/* =========================================================
   LANDING PAGE
   hero / countdown / stats / about / features
   timeline / rules / faq / contact
========================================================= */

/* =========================================================
   BAND RHYTHM

   The page alternates light bands with deep blue "ink"
   ones:  hero (light) → countdown (dark) → stats + about
   (light) → features (dark) → timeline + rules + faq
   (light) → contact + footer (dark).

   The hero is deliberately the light one: the official
   logo strip and the navbar above it are both white, so
   opening on white keeps the whole top of the page in a
   single tone before the countdown drops into ink.

   Everything sitting on an ink band reads its colour from
   the --ink-* group, so the two halves stay in step.
========================================================= */

.countdown-section,
.features,
.contact{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    color:var(--ink-text);
}

.countdown-section .container,
.features .container,
.contact .container{
    position:relative;
    z-index:2;
}

.countdown-section :is(h1,h2,h3,h4),
.features :is(h1,h2,h3,h4),
.contact :is(h1,h2,h3,h4){
    color:var(--ink-heading);
}

.countdown-section p,
.features p,
.contact p{
    color:var(--ink-text);
}

/* Eyebrow pill inverts to a soft glass chip on the dark bands */

.features .section-heading span,
.contact .section-heading span{
    color:var(--ink-accent-soft);
    background:var(--ink-chip);
    border:1px solid var(--ink-line);
}

.features .section-heading p,
.contact .section-heading p,
.countdown-section .section-title p{
    color:var(--ink-text-soft);
}

/* Hairline of light where a dark band meets the band above */

.features,
.contact{
    border-top:1px solid var(--ink-line);
}

/* =========================================================
   HERO  — light band
========================================================= */

.hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(84px,10vw,140px) 0 clamp(88px,9vw,128px);
    color:var(--text-light);
    background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 70%,#FBFCFF 100%);
}

/* Fine engineering grid, fading out toward the edges */

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(11,17,32,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(11,17,32,.045) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 68%);
    mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 68%);
    pointer-events:none;
    z-index:0;
}

/* The drifting blue orb belonged to the dark hero. On white
   it would read as exactly the blurry blue corner blemish
   we were asked to get rid of, so the band is left clean. */

.hero .container{
    position:relative;
    z-index:2;
}

.hero-content{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:clamp(40px,6vw,88px);
}

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:var(--space-md);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:var(--radius-pill);
    background:var(--primary-soft);
    border:1px solid var(--border);
    font-size:var(--caption);
    font-weight:600;
    color:var(--text);
    box-shadow:var(--shadow-xs);
    transition:background var(--transition),border-color var(--transition);
}

.hero-badge:hover{
    background:var(--primary-light);
    border-color:var(--border-strong);
}

/* Same gold as the contact cards, so the two agree */

.hero-badge i{
    color:#B67B0C;
    font-size:.9rem;
}

.hero-text h1{
    font-size:var(--display-1);
    line-height:1.04;
    letter-spacing:-.04em;
    margin-bottom:var(--space-md);
    color:var(--text-strong);
}

.hero-text h1 span{
    display:block;
    color:var(--primary);
    margin-top:6px;
}

.hero-text > p{
    font-size:var(--body-lg);
    color:var(--text-light);
    max-width:520px;
    line-height:1.65;
    margin-bottom:var(--space-lg);
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* Slightly sunken so the outline button still has an edge
   against a white band rather than vanishing into it */

.hero-buttons .btn-secondary,
.hero-buttons .secondary-button{
    background:var(--surface-light);
    border-color:var(--border-strong);
    color:var(--text-strong);
}

.hero-buttons .btn-secondary:hover,
.hero-buttons .secondary-button:hover{
    background:var(--surface-sunken);
    border-color:var(--text-faint);
}

/* ---------- Floating status card ---------- */

.hero-card{
    position:relative;
    perspective:1400px;
}

/* No glow behind the card any more — on a white band the
   card is defined by its border and shadow instead. */

.event-card{
    position:relative;
    z-index:1;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    padding:clamp(24px,3.2vw,34px);
    animation:cardFloat 7s ease-in-out infinite;
}

@keyframes cardFloat{
    0%,100%{ transform:translateY(0) rotateX(0) rotateY(0); }
    50%{ transform:translateY(-12px) rotateX(1.2deg) rotateY(-1.2deg); }
}

.event-card h3{
    font-size:var(--heading-3);
    padding-bottom:var(--space-sm);
    margin-bottom:var(--space-xs);
    border-bottom:1px solid var(--divider);
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-strong);
}

.event-card h3::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 4px var(--success-light);
    animation:pulseDot 2.2s ease-in-out infinite;
}

@keyframes pulseDot{
    0%,100%{ box-shadow:0 0 0 4px var(--success-light); }
    50%{ box-shadow:0 0 0 8px rgba(14,138,69,.08); }
}

.event-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    padding:14px 0;
    border-bottom:1px solid var(--border-soft);
}

.event-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.event-label{
    font-size:var(--body-sm);
    font-weight:500;
    color:var(--text-light);
}

.event-value{
    font-size:var(--caption);
    font-weight:600;
    color:var(--text-muted);
    padding:5px 12px;
    border-radius:var(--radius-pill);
    background:var(--surface-sunken);
    border:1px solid var(--border);
}

.event-value.status-open{
    background:var(--success-light);
    color:var(--success);
    border-color:rgba(14,138,69,.22);
}

.event-row i.status-open{
    color:var(--success);
    background:none;
    border:none;
}

.event-row i{
    color:var(--text-faint);
    font-size:1rem;
}

/* =========================================================
   COUNTDOWN
========================================================= */

/* Continues the hero's ink, one shade deeper, so the two
   read as a single cinematic block before the page opens
   out into light. */

.countdown-section{
    padding:var(--section-padding) 0;
    background:var(--gradient-ink-flat);
    position:relative;
    overflow:hidden;
}

.countdown-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(820px 420px at 16% 0%,rgba(37,110,255,.14),transparent 62%),
        radial-gradient(820px 440px at 86% 100%,rgba(112,84,235,.11),transparent 62%);
    z-index:0;
}

.countdown-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(150,183,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(150,183,255,.045) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
    mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
    z-index:0;
}

.countdown-section .container{
    position:relative;
    z-index:2;
}

.countdown-section .section-title h2{
    color:var(--ink-heading);
    font-size:var(--display-2);
}

.countdown-section .section-title p{
    color:var(--ink-text-soft);
}

.countdown{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(12px,2vw,20px);
    max-width:820px;
    margin-inline:auto;
}

.count-item{
    position:relative;
    background:var(--ink-card);
    border:1px solid var(--ink-line);
    border-radius:var(--radius-lg);
    padding:clamp(20px,3vw,32px) var(--space-sm);
    text-align:center;
    overflow:hidden;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:transform var(--transition),
               background var(--transition),
               border-color var(--transition);
}

/* Thin light seam along the top edge of each tile */

.count-item::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:1px;
    background:linear-gradient(
        90deg,transparent,rgba(160,196,255,.5),transparent);
}

.count-item:hover{
    transform:translateY(-5px);
    background:var(--ink-card-hover);
    border-color:var(--ink-line-strong);
}

.count-item h2{
    font-size:clamp(2.25rem,5.4vw,3.5rem);
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.04em;
    line-height:1;
    margin-bottom:8px;
    background:var(--gradient-text-ink);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.count-item span{
    font-size:var(--caption);
    text-transform:uppercase;
    letter-spacing:var(--tracking-wide);
    color:var(--ink-text-soft);
    font-weight:600;
}

/* Shown when no deadline is configured, or once it passes */

.countdown-message,
.countdown-ended{
    grid-column:1 / -1;
    padding:26px var(--space-md);
    text-align:center;
    border-radius:var(--radius-lg);
    background:var(--ink-card);
    border:1px solid var(--ink-line);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:var(--ink-text);
    font-size:var(--body-sm);
    font-weight:500;
}

/* =========================================================
   STATISTICS  — first light band
========================================================= */

.stats{
    padding:var(--section-padding) 0;
    background:var(--surface);
    position:relative;
}

/* Daylight rising out of the dark block above */

.stats::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:180px;
    background:linear-gradient(
        180deg,
        rgba(10,23,48,.055) 0%,
        rgba(10,23,48,.015) 46%,
        transparent 100%);
    pointer-events:none;
}

.stats .container{
    position:relative;
    z-index:1;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:clamp(16px,2.4vw,28px);
}

.stat-box{
    position:relative;
    padding:clamp(26px,3.4vw,38px) var(--space-md);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    text-align:center;
    overflow:hidden;
    transition:transform var(--transition),
               box-shadow var(--transition),
               border-color var(--transition);
}

.stat-box::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:var(--gradient-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--transition-slow);
}

.stat-box:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:transparent;
}

.stat-box:hover::before{
    transform:scaleX(1);
}

.stat-box h2{
    font-size:clamp(2.25rem,4.4vw,3rem);
    letter-spacing:-.04em;
    background:var(--gradient-text);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:6px;
}

.stat-box p{
    font-size:var(--body-sm);
    color:var(--text-muted);
    font-weight:500;
}

/* ---------- problem statements link ---------- */

.stat-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    padding:8px 18px;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.01em;
    color:#FFFFFF;
    background:var(--primary);
    border-radius:999px;
    transition:background var(--transition),
               transform var(--transition);
}

.stat-link:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}

.stat-link.is-disabled{
    color:var(--text-muted);
    background:var(--primary-light);
    cursor:not-allowed;
}

/* =========================================================
   ABOUT
========================================================= */

.about{
    padding:var(--section-padding) 0;
    background:var(--background-alt);
    position:relative;
    overflow:hidden;
}

.about::before{
    content:"";
    position:absolute;
    left:-160px;
    bottom:-120px;
    width:460px;
    height:460px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(10,90,224,.13),transparent 68%);
    filter:blur(48px);
    pointer-events:none;
}

.about .container{
    position:relative;
}

.about-wrapper{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(36px,5.5vw,80px);
    align-items:center;
}

.about-content > p{
    font-size:var(--body-lg);
    color:var(--text-light);
    line-height:1.75;
    margin-bottom:var(--space-md);
}

.about-content .section-heading{
    margin-bottom:var(--space-md);
}

.about-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:var(--space-lg);
}

.about-list li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:var(--body-sm);
    font-weight:500;
    color:var(--text-strong);
    transition:transform var(--transition),
               box-shadow var(--transition),
               border-color var(--transition);
}

.about-list li:hover{
    transform:translateX(6px);
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
}

.about-list i{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-xs);
    background:var(--primary-light);
    color:var(--primary);
    font-size:.85rem;
    flex-shrink:0;
}

.about-card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    padding:clamp(26px,3.4vw,38px);
}

.about-card h3{
    font-size:var(--heading-3);
}

.about-card br{
    display:none;
}

.about-card h3 + br + .event-row{
    border-top:1px solid var(--divider);
    margin-top:var(--space-sm);
}

/* =========================================================
   FEATURES  — dark band in the middle of the page
========================================================= */

.features{
    padding:var(--section-padding) 0;
    background:
        radial-gradient(1000px 560px at 84% 4%,rgba(37,110,255,.13),transparent 60%),
        radial-gradient(880px 520px at 8% 94%,rgba(112,84,235,.10),transparent 58%),
        var(--gradient-ink);
}

/* Same engineering grid as the hero, softer */

.features::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(150,183,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(150,183,255,.04) 1px,transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 76%);
    mask-image:radial-gradient(circle at 50% 42%,#000,transparent 76%);
    pointer-events:none;
    z-index:0;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:clamp(16px,2.4vw,26px);
}

.feature-card{
    position:relative;
    padding:clamp(26px,3vw,34px);
    background:var(--ink-card);
    border:1px solid var(--ink-line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:transform var(--transition),
               box-shadow var(--transition),
               background var(--transition),
               border-color var(--transition);
}

.feature-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        420px circle at var(--mx,50%) var(--my,0%),
        rgba(120,166,255,.20),
        transparent 62%);
    opacity:0;
    transition:opacity var(--transition);
    pointer-events:none;
}

.feature-card:hover{
    transform:translateY(-6px);
    background:var(--ink-card-hover);
    box-shadow:var(--shadow-ink);
    border-color:var(--ink-line-strong);
}

.feature-card:hover::after{
    opacity:1;
}

.feature-icon{
    position:relative;
    z-index:1;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:var(--gradient-primary);
    color:#fff;
    font-size:1.15rem;
    margin-bottom:var(--space-md);
    box-shadow:0 16px 34px -12px rgba(37,110,255,.75);
    transition:transform var(--transition-slow);
}

.feature-card:hover .feature-icon{
    transform:scale(1.06) rotate(-4deg);
}

.feature-card h3{
    position:relative;
    z-index:1;
    font-size:var(--heading-3);
    margin-bottom:10px;
    color:var(--ink-heading);
}

.feature-card p{
    position:relative;
    z-index:1;
    font-size:var(--body-sm);
    color:var(--ink-text-soft);
    line-height:1.7;
}

/* =========================================================
   TIMELINE
========================================================= */

.timeline{
    padding:var(--section-padding) 0;
    background:var(--surface);
    position:relative;
}

/* Daylight rising out of the dark Features band above */

.timeline::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:180px;
    background:linear-gradient(
        180deg,
        rgba(10,23,48,.055) 0%,
        rgba(10,23,48,.015) 46%,
        transparent 100%);
    pointer-events:none;
}

.timeline .container{
    position:relative;
    z-index:1;
}

.timeline-wrapper{
    position:relative;
    max-width:860px;
    margin-inline:auto;
    padding-left:38px;
}

.timeline-wrapper::before{
    content:"";
    position:absolute;
    left:11px;
    top:8px;
    bottom:8px;
    width:2px;
    background:linear-gradient(
        180deg,
        var(--primary) 0%,
        var(--secondary) 50%,
        rgba(91,75,225,.15) 100%);
    border-radius:2px;
}

.timeline-item{
    position:relative;
    padding-bottom:var(--space-lg);
}

.timeline-item:last-child{
    padding-bottom:0;
}

.timeline-dot{
    position:absolute;
    left:-33px;
    top:24px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--surface);
    border:3px solid var(--primary);
    box-shadow:0 0 0 5px rgba(10,90,224,.12);
    z-index:1;
}

.timeline-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:clamp(20px,2.6vw,28px);
    box-shadow:var(--shadow-xs);
    transition:transform var(--transition),
               box-shadow var(--transition),
               border-color var(--transition);
}

.timeline-card:hover{
    transform:translateX(8px);
    box-shadow:var(--shadow-md);
    border-color:var(--primary);
}

.timeline-card h3{
    font-size:var(--heading-3);
    margin-bottom:8px;
}

.timeline-card p{
    font-size:var(--body-sm);
    color:var(--text-muted);
    margin-bottom:var(--space-sm);
    line-height:1.7;
}

.timeline-date{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 13px;
    border-radius:var(--radius-pill);
    background:var(--primary-light);
    color:var(--primary-dark);
    font-size:var(--caption);
    font-weight:600;
}

.timeline-date::before{
    content:"\f133";
    font-family:"Font Awesome 6 Free";
    font-weight:400;
    font-size:.78rem;
}

/* =========================================================
   RULES
========================================================= */

.rules{
    padding:var(--section-padding) 0;
    background:var(--background-alt);
}

.rules-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:clamp(14px,2.2vw,22px);
}

.rule-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:clamp(22px,2.8vw,28px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:transform var(--transition),
               box-shadow var(--transition),
               border-color var(--transition);
}

.rule-card:hover{
    transform:translateY(-4px);
    border-color:var(--border-strong);
    box-shadow:var(--shadow-md);
}

.rule-card > i{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:var(--primary-light);
    border:1px solid rgba(10,90,224,.14);
    color:var(--primary);
    font-size:1.05rem;
    flex-shrink:0;
}

.rule-card h4{
    font-size:var(--body);
    margin-bottom:6px;
}

.rule-card p{
    font-size:var(--body-sm);
    color:var(--text-muted);
    line-height:1.65;
}

/* =========================================================
   FAQ
========================================================= */

.faq{
    padding:var(--section-padding) 0;
    background:var(--surface);
}

.faq-container{
    max-width:800px;
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.faq-item{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:border-color var(--transition),box-shadow var(--transition);
}

.faq-item:hover{
    border-color:var(--border-strong);
}

.faq-item.active{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    padding:20px 24px;
    text-align:left;
    font-size:var(--body);
    font-weight:600;
    color:var(--text-strong);
    letter-spacing:var(--tracking-snug);
    transition:color var(--transition);
}

.faq-question:hover{
    color:var(--primary);
}

.faq-question i{
    font-size:.8rem;
    color:var(--text-faint);
    transition:transform var(--transition),color var(--transition);
    flex-shrink:0;
}

.faq-item.active .faq-question i{
    transform:rotate(180deg);
    color:var(--primary);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease-out);
}

.faq-answer p{
    padding:0 24px 22px;
    font-size:var(--body-sm);
    color:var(--text-muted);
    line-height:1.75;
}

/* =========================================================
   CONTACT
========================================================= */

/* Closing dark band — runs straight into the footer */

.contact{
    padding:var(--section-padding) 0 clamp(88px,9vw,120px);
    background:
        radial-gradient(900px 500px at 12% 2%,rgba(37,110,255,.12),transparent 60%),
        radial-gradient(820px 460px at 90% 98%,rgba(112,84,235,.10),transparent 58%),
        var(--gradient-ink-flat);
}

.contact::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(150,183,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(150,183,255,.04) 1px,transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);
    mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);
    pointer-events:none;
    z-index:0;
}

.contact-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(20px,3vw,32px);
    align-items:stretch;
}

/* Both cards are white panels floating on the dark band. */

.contact-card{
    padding:clamp(26px,3.4vw,38px);
    background:var(--surface);
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-ink),var(--shadow-inset);
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
}

.contact-card:last-child{
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.contact-card:last-child::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        620px 320px at 82% 0%,rgba(10,90,224,.10),transparent 68%);
}

.contact-card:last-child > *{
    position:relative;
}

.contact-card:last-child h3{
    color:var(--text-strong);
    font-size:var(--heading-2);
}

.contact-card:last-child p{
    color:var(--text-muted);
    line-height:1.75;
}

.contact-info{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

/* Golden symbols: a deep gold glyph on a warm tint, so the
   icons stay unmistakably gold and still read on white. */

.contact-info i{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:linear-gradient(140deg,#FFF3DC 0%,#FDE7BE 100%);
    border:1px solid rgba(197,131,14,.28);
    color:#B67B0C;
    font-size:1rem;
    flex-shrink:0;
    box-shadow:0 8px 18px -10px rgba(197,131,14,.65);
}

.contact-info h4{
    font-size:var(--body-sm);
    margin-bottom:4px;
    color:var(--text-strong);
}

.contact-info p{
    font-size:var(--body-sm);
    color:var(--text-muted);
    line-height:1.6;
}


/* =========================================================
   Problem-statements banner (home page)

   The statistics row was reduced to a single panel — the
   problem statements. Because .stats-grid is auto-fit, one
   item already fills the width; this modifier lays that panel
   out as a horizontal banner (count/label on the left, the
   "View Problem Statements" button on the right) instead of a
   centred card. It reuses the existing .stat-box look and the
   .stat-link button, so nothing else changes.
========================================================= */

.stat-box.ps-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(16px,3vw,32px);
    flex-wrap:wrap;
    text-align:left;
}

.stat-box.ps-banner .ps-banner-info{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.stat-box.ps-banner .stat-link{
    margin-top:0;
}