/* Shared look continuation from style.css color system */
:root{
    --blue:#0935ff;
    --cyan:#00e1ff;
    --white:#fff;
    --bg:#070a1a;
    --muted:rgba(255,255,255,.72);
    --muted2:rgba(255,255,255,.55);
    --card:rgba(255,255,255,.06);
    --border:rgba(0,225,255,.35);
}

body{
    background:
        radial-gradient(1200px 500px at 50% -150px, rgba(0,225,255,.22), transparent 60%),
        linear-gradient(180deg, #050717 0%, #070a1a 100%);
    color:var(--white);
}

.page{
    width:min(1000px, 92vw);
    margin:0 auto;
    padding:1.5rem 0 4rem;
}

.hero{
    margin-top:1.5rem;
    text-align:center;
    padding:3.2rem 1rem 2rem;
}

.hero-logo{
    width:min(30rem, 72vw);
    height:clamp(30rem, 18vw, 11rem);
    margin:0 auto;
    border-radius:1.2rem;
    border:1px solid rgba(0,225,255,.45);
    box-shadow:
        0 18px 60px rgba(0,225,255,.12),
        0 0 0 6px rgba(0,225,255,.06);

    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero-logo img{
    width:min(20rem, 44vw);
    height:auto;
    display:block;
    filter: drop-shadow(0 10px 30px rgba(4, 50, 150, 0.637));

    animation: fadeInOut 4s ease-in-out infinite;
}
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.4; /* Adjust lowest opacity here (0 = fully invisible) */
    }
    50% {
        opacity: 1;   /* Fully visible */
    }
}

.hero-quote{
    margin-top:1rem;
    font-weight:800;
    letter-spacing:.02em;
    font-size:clamp(1.2rem, 2.6vw, 1.8rem);
    color:rgba(255,255,255,.92);
}

.intro{ padding:0 0; }

.section-title{
    font-size:clamp(1.5rem, 3.4vw, 2.1rem);
    margin:0 0 .65rem;
    text-align:center;
}

.lead{
    color:var(--muted);
    line-height:1.6;
    max-width:62ch;
    margin:0 auto 1.8rem;
    font-size:1.02rem;
    text-align:center;
}

.intro-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:1rem;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:1.1rem;
    padding:1.2rem 1.1rem;
    box-shadow:0 18px 55px rgba(0,0,0,.25);
}

.card-title{
    font-size:1.05rem;
    margin-bottom:.75rem;
}

.list{ padding-left:1.1rem; margin:0; }
.list li{
    color:var(--muted2);
    line-height:1.7;
    margin:.35rem 0;
}

@media (max-width: 720px){
    .intro-grid{ grid-template-columns:1fr; }
}