/* ════════════════════════════════════════════
   TWISE Night V2 — Creative Redesign
   AZRI Creative Studio
   Exo 800 + Source Sans 3 · Midnight Science
════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────── */
:root {
    --bg:          #05071a;
    --bg-2:        #080c22;
    --bg-3:        #0c1030;
    --surface:     rgba(255,255,255,0.04);
    --surface-hi:  rgba(255,255,255,0.07);

    --mint:        #3ddc84;
    --mint-dim:    rgba(61,220,132,0.12);
    --mint-glow:   rgba(61,220,132,0.22);
    --teal:        #00c8e0;
    --teal-dim:    rgba(0,200,224,0.12);
    --gold:        #f5a623;
    --gold-dim:    rgba(245,166,35,0.12);

    /* RGB variants for rgba() blending */
    --mint-rgb:    61,220,132;
    --teal-rgb:    0,200,224;
    --gold-rgb:    245,166,35;

    --ink:         #dde8f8;
    --ink-2:       #8b9dc3;
    --ink-3:       #3d4f72;

    --line:        rgba(255,255,255,0.07);

    --f-head: 'Exo', sans-serif;
    --f-body: 'Source Sans 3', sans-serif;
    --ease:   cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--f-body);
    font-size:clamp(15px,1.8vw,17px);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--mint)}
strong{font-weight:600;color:var(--ink)}
ol,ul{list-style:none}

/* ── Layout ────────────────────────────────── */
.container{
    width:100%;
    max-width:1140px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,48px);
}

/* ── Chip / tag ────────────────────────────── */
.section-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:5px 14px;
    border:1px solid rgba(61,220,132,0.25);
    border-radius:100px;
    font-family:var(--f-head);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--mint);
    margin-bottom:clamp(20px,3vw,32px);
}
.section-chip::before{
    content:'';
    width:5px;height:5px;
    border-radius:50%;
    background:var(--mint);
    flex-shrink:0;
}

/* ── Reveal ────────────────────────────────── */
.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}


/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero{
    position:relative;
    height:100svh;
    min-height:600px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:clamp(48px,8vh,96px);
    overflow:hidden;
}

.star-canvas{
    position:absolute;inset:0;z-index:1;
    background:radial-gradient(ellipse 70% 50% at 60% 30%,
        rgba(61,220,132,0.07) 0%,transparent 70%);
}

.hero-video{
    position:absolute;inset:0;z-index:2;
    opacity:.3;
}

.hero-overlay{
    position:absolute;inset:0;z-index:3;
    background:
        linear-gradient(to bottom,
            rgba(5,7,26,.2) 0%,
            rgba(5,7,26,.0) 30%,
            rgba(5,7,26,.7) 70%,
            rgba(5,7,26,.97) 100%),
        linear-gradient(100deg,rgba(5,7,26,.7) 0%,transparent 60%);
}

.hero-deco{
    position:absolute;
    right:-2%;
    bottom:5%;
    z-index:3;
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(80px,20vw,240px);
    letter-spacing:-.04em;
    color:transparent;
    -webkit-text-stroke:1px rgba(61,220,132,0.1);
    pointer-events:none;
    user-select:none;
    line-height:1;
}

.hero-content{
    position:relative;z-index:4;
    padding:0 clamp(20px,5vw,64px);
    max-width:860px;
}

.hero-kicker{
    font-family:var(--f-head);
    font-size:clamp(11px,1.2vw,13px);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-2);
    margin-bottom:20px;
    display:flex;
    align-items:center;
    gap:10px;
}
.hero-kicker::before{
    content:'';
    display:inline-block;
    width:28px;height:1px;
    background:var(--mint);
    flex-shrink:0;
}

.hero-title{
    font-family:var(--f-head);
    font-weight:800;
    line-height:.92;
    letter-spacing:-.04em;
    margin-bottom:clamp(24px,4vw,40px);
}
.title-main{
    display:block;
    font-size:clamp(72px,14vw,160px);
    color:#fff;
}
.title-sub{
    display:block;
    font-size:clamp(48px,9vw,100px);
    color:var(--mint);
    font-weight:300;
    letter-spacing:-.02em;
}

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    list-style:none;
}
.hero-pills li{
    padding:6px 14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:100px;
    font-family:var(--f-head);
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-2);
    backdrop-filter:blur(8px);
}

.scroll-cue{
    position:absolute;
    bottom:clamp(24px,4vh,40px);
    right:clamp(20px,4vw,56px);
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    cursor:pointer;
}
.scroll-line{
    display:block;
    width:1px;
    height:48px;
    background:linear-gradient(to bottom,transparent,var(--mint));
    animation:scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop{
    0%{transform:scaleY(0);transform-origin:top;opacity:0}
    50%{transform:scaleY(1);opacity:1}
    100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}
.dot-pulse{width:6px;height:6px;border-radius:50%;background:var(--mint)}


/* ════════════════════════════════════════════
   BRIEF
════════════════════════════════════════════ */
.brief{
    padding:clamp(80px,12vw,160px) 0 clamp(64px,8vw,100px);
    border-bottom:1px solid var(--line);
}

.brief-top{
    display:flex;
    flex-direction:column;
    margin-bottom:clamp(40px,6vw,72px);
}

.brief-heading{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(40px,7vw,84px);
    line-height:1.0;
    letter-spacing:-.03em;
    color:var(--ink);
    max-width:700px;
}

.brief-body{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:clamp(32px,5vw,80px);
    align-items:start;
}

.brief-text .lead{
    font-size:clamp(16px,1.8vw,19px);
    color:var(--ink);
    margin-bottom:20px;
    line-height:1.7;
}
.brief-text p{color:var(--ink-2);line-height:1.8}
.brief-text strong{color:var(--ink)}

.brief-meta{
    display:flex;
    flex-direction:column;
    gap:0;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    background:var(--surface);
    backdrop-filter:blur(12px);
    position:sticky;
    top:32px;
}
.meta-item{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:16px 20px;
    border-bottom:1px solid var(--line);
}
.meta-item:last-child{border-bottom:none}
.meta-item--full{background:var(--mint-dim)}
.meta-label{
    font-family:var(--f-head);
    font-size:9px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--mint);
}
.meta-value{font-size:13px;color:var(--ink);line-height:1.5}


/* ════════════════════════════════════════════
   CHALLENGE — UI CARD GRID
════════════════════════════════════════════ */
.challenge{
    padding:clamp(80px,10vw,140px) 0;
    background:var(--bg-2);
}

.challenge-header{
    margin-bottom:clamp(48px,6vw,72px);
}
.challenge-header h2{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(36px,6vw,72px);
    line-height:1.05;
    letter-spacing:-.03em;
}
.challenge-sub{
    margin-top:14px;
    font-size:clamp(14px,1.6vw,17px);
    color:var(--ink-2);
    line-height:1.65;
    max-width:480px;
}

/* ── Card grid ── */
.ch-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(14px,2vw,20px);
}

.ch-card{
    display:flex;
    flex-direction:column;
    gap:0;
    background:linear-gradient(160deg,rgba(255,255,255,0.055) 0%,rgba(255,255,255,0.02) 100%);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    position:relative;
    transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
    cursor:default;
}

/* Top glow line on hover */
.ch-card::before{
    content:'';
    position:absolute;
    top:0;left:10%;right:10%;
    height:1px;
    border-radius:100px;
    opacity:0;
    transition:opacity .5s;
}
.ch-card--mint::before{ background:linear-gradient(90deg,transparent,rgba(61,220,132,.6),transparent); }
.ch-card--teal::before{ background:linear-gradient(90deg,transparent,rgba(0,200,224,.6),transparent); }
.ch-card--gold::before{ background:linear-gradient(90deg,transparent,rgba(245,166,35,.6),transparent); }

.ch-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,0.14);
}
.ch-card:hover::before{ opacity:1; }

.ch-card--mint:hover{ box-shadow:0 24px 56px rgba(61,220,132,.09); }
.ch-card--teal:hover{ box-shadow:0 24px 56px rgba(0,200,224,.09); }
.ch-card--gold:hover{ box-shadow:0 24px 56px rgba(245,166,35,.09); }

/* Card Top Row */
.ch-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:clamp(20px,2.5vw,28px) clamp(20px,2.5vw,28px) 0;
}

.ch-card-icon{
    width:44px;height:44px;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    transition:box-shadow .4s;
}
.ch-card--mint .ch-card-icon{
    background:rgba(61,220,132,0.1);
    border:1px solid rgba(61,220,132,0.22);
    color:var(--mint);
}
.ch-card--teal .ch-card-icon{
    background:rgba(0,200,224,0.1);
    border:1px solid rgba(0,200,224,0.22);
    color:var(--teal);
}
.ch-card--gold .ch-card-icon{
    background:rgba(245,166,35,0.1);
    border:1px solid rgba(245,166,35,0.22);
    color:var(--gold);
}
.ch-card--mint:hover .ch-card-icon{ box-shadow:0 0 18px rgba(61,220,132,.3); }
.ch-card--teal:hover  .ch-card-icon{ box-shadow:0 0 18px rgba(0,200,224,.3); }
.ch-card--gold:hover  .ch-card-icon{ box-shadow:0 0 18px rgba(245,166,35,.3); }

.ch-card-num{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(28px,3vw,40px);
    letter-spacing:-.04em;
    line-height:1;
    transition:opacity .4s;
}
.ch-card--mint .ch-card-num{ color:rgba(61,220,132,0.18); }
.ch-card--teal .ch-card-num{ color:rgba(0,200,224,0.18); }
.ch-card--gold .ch-card-num{ color:rgba(245,166,35,0.18); }
.ch-card:hover .ch-card-num{ opacity:.6; }

/* Card Body */
.ch-card-body{
    padding:clamp(16px,2vw,22px) clamp(20px,2.5vw,28px);
    flex:1;
}
.ch-card-body h3{
    font-family:var(--f-head);
    font-size:clamp(16px,1.8vw,20px);
    font-weight:700;
    color:var(--ink);
    margin-bottom:10px;
    line-height:1.25;
}
.ch-card-body p{
    font-size:clamp(13px,1.4vw,15px);
    color:var(--ink-2);
    line-height:1.72;
}

/* Card Art — bottom decorative area */
.ch-card-art{
    margin:0 clamp(20px,2.5vw,28px) clamp(20px,2.5vw,28px);
    padding:clamp(14px,1.8vw,18px);
    background:rgba(0,0,0,0.2);
    border:1px solid var(--line);
    border-radius:12px;
    min-height:80px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:10px;
    position:relative;
    overflow:hidden;
    transition:border-color .4s;
}
.ch-card--mint:hover .ch-card-art{ border-color:rgba(61,220,132,0.18); }
.ch-card--teal:hover  .ch-card-art{ border-color:rgba(0,200,224,0.18); }
.ch-card--gold:hover  .ch-card-art{ border-color:rgba(245,166,35,0.18); }

/* Art: palette swatches (card 1) */
.ch-art-palette{
    display:flex;gap:6px;align-items:center;
}
.ch-swatch{
    width:16px;height:16px;
    border-radius:4px;
    flex-shrink:0;
    opacity:.85;
}

/* Art: animated bars (card 1) */
.ch-art-bars{
    display:flex;flex-direction:column;gap:5px;
}
.ch-art-bar{
    height:4px;
    border-radius:100px;
    background:var(--c);
    width:0;
    transition:width 0.9s var(--ease) var(--d);
}
.ch-card.visible .ch-art-bar{
    width:var(--w);
}

/* Art: check badge (card 1) */
.ch-art-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:var(--f-head);
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mint);
    padding:3px 8px 3px 5px;
    border:1px solid rgba(61,220,132,0.3);
    border-radius:100px;
    background:var(--mint-dim);
    width:fit-content;
}

/* Art: split (card 2) */
.ch-art-split{
    display:flex;
    align-items:stretch;
    gap:0;
    height:100%;
    min-height:56px;
    flex:1;
}
.ch-split-half{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 6px;
}
.ch-split-half span{
    font-family:var(--f-head);
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ch-split-science{ color:var(--teal); }
.ch-split-spectacle{ color:var(--gold); }
.ch-split-divider{
    width:1px;
    background:var(--line);
    align-self:stretch;
    margin:4px 0;
}

/* Art: audiences (card 3) */
.ch-art-audiences{
    display:flex;
    gap:clamp(12px,2vw,20px);
    align-items:center;
    justify-content:center;
    flex:1;
    padding:8px 0;
}
.ch-aud-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}
.ch-aud-ring{
    width:28px;height:28px;
    border-radius:50%;
    border:2px solid var(--ac);
    box-shadow:0 0 12px rgba(var(--mint-rgb),0.2);
    position:relative;
    animation:audPulse 2.4s ease-in-out infinite;
}
.ch-aud-item:nth-child(1) .ch-aud-ring{ box-shadow:0 0 12px rgba(61,220,132,.25);animation-delay:0s; }
.ch-aud-item:nth-child(2) .ch-aud-ring{ box-shadow:0 0 12px rgba(0,200,224,.25);animation-delay:.4s; }
.ch-aud-item:nth-child(3) .ch-aud-ring{ box-shadow:0 0 12px rgba(245,166,35,.25);animation-delay:.8s; }
.ch-aud-item::after{
    content:'';
    display:block;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--ac);
    opacity:.7;
}
.ch-aud-item small{
    font-family:var(--f-head);
    font-size:9px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-3);
}
@keyframes audPulse{
    0%,100%{transform:scale(1);opacity:.7}
    50%{transform:scale(1.15);opacity:1}
}


/* ════════════════════════════════════════════
   PROCESS — RETRON ACCORDION
════════════════════════════════════════════ */
.process{
    padding:clamp(80px,10vw,140px) 0;
    overflow:hidden;
    background:var(--bg);
}

.process-header{
    margin-bottom:clamp(32px,4vw,48px);
}

.retron-wrap{
    display:grid;
    grid-template-columns:clamp(120px,14vw,180px) 1fr;
    gap:clamp(24px,4vw,56px);
    align-items:start;
    position:relative;
}

/* Left — big number */
.retron-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:sticky;
    top:120px;
    user-select:none;
    pointer-events:none;
}

.retron-big-num{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(100px,13vw,170px);
    line-height:.9;
    letter-spacing:-.05em;
    background:linear-gradient(150deg,var(--mint) 0%,var(--teal) 55%,rgba(0,200,224,.0) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.retron-label-vert{
    font-family:var(--f-head);
    font-weight:700;
    font-size:10px;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:var(--ink-3);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    margin-top:10px;
}

/* Right — heading + accordion */
.retron-right{ min-width:0; }

.retron-heading{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(28px,3.5vw,44px);
    line-height:1.1;
    letter-spacing:-.03em;
    color:var(--ink);
    margin-bottom:clamp(28px,4vw,44px);
}

/* Steps */
.retron-steps{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.retron-step{
    border:1px solid transparent;
    border-radius:14px;
    padding:clamp(18px,2.2vw,24px) clamp(18px,2vw,22px);
    cursor:pointer;
    transition:border-color .35s var(--ease), background .35s;
    position:relative;
}
.retron-step:not(.retron-step--active):hover{
    background:var(--surface);
    border-color:var(--line);
}
.retron-step--active{
    background:var(--surface-hi);
    border-color:rgba(61,220,132,0.22);
    cursor:default;
}

/* Step header row */
.retron-step-hd{
    display:grid;
    grid-template-columns:38px 1fr 24px;
    gap:14px;
    align-items:start;
}

.rs-num{
    font-family:var(--f-head);
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--ink-3);
    transition:color .3s;
    padding-top:3px;
}
.retron-step--active .rs-num{ color:var(--mint); }

.rs-title-area{ flex:1;min-width:0; }
.rs-title-area h3{
    font-family:var(--f-head);
    font-size:clamp(14px,1.6vw,18px);
    font-weight:700;
    color:var(--ink-2);
    line-height:1.25;
    margin-bottom:0;
    transition:color .3s;
}
.retron-step--active .rs-title-area h3{ color:var(--ink); }

.rs-tags{
    font-size:10px;
    color:var(--mint);
    font-family:var(--f-head);
    letter-spacing:.07em;
    text-transform:uppercase;
    margin-top:6px;
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .4s var(--ease), opacity .35s;
}
.retron-step--active .rs-tags{
    max-height:30px;
    opacity:1;
}

/* Toggle icon */
.rs-toggle{
    width:22px;height:22px;
    border:1px solid var(--ink-3);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    transition:border-color .3s,background .3s;
    flex-shrink:0;
    justify-self:center;
    margin-top:1px;
}
.rs-toggle::before,.rs-toggle::after{
    content:'';
    position:absolute;
    background:var(--ink-3);
    border-radius:2px;
    transition:transform .35s var(--ease), background .3s;
}
.rs-toggle::before{ width:8px;height:1.5px; }
.rs-toggle::after{  width:1.5px;height:8px; }
.retron-step--active .rs-toggle{
    border-color:var(--mint);
    background:var(--mint-dim);
}
.retron-step--active .rs-toggle::before{ background:var(--mint); }
.retron-step--active .rs-toggle::after{
    background:var(--mint);
    transform:scaleY(0);
}

/* Expandable body */
.retron-step-body{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .55s var(--ease);
}
.retron-step--active .retron-step-body{
    grid-template-rows:1fr;
}
.retron-step-body-inner{
    overflow:hidden;
}
.retron-step-body p{
    padding:16px 0 6px clamp(28px,3vw,52px);
    font-size:clamp(13px,1.5vw,15px);
    color:var(--ink-2);
    line-height:1.82;
    max-width:600px;
}
.retron-step-body em{ color:var(--mint);font-style:italic; }

/* Floating geometric deco */
.retron-deco{
    position:absolute;
    right:clamp(-40px,-4vw,-20px);
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    z-index:0;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.retron-geo{
    border-radius:10px;
    opacity:.5;
}
.retron-geo--a{
    width:56px;height:56px;
    background:linear-gradient(135deg,rgba(61,220,132,.15),rgba(0,200,224,.08));
    border:1px solid rgba(61,220,132,.2);
    transform:rotate(22deg);
    animation:geoFloat 7s ease-in-out infinite;
}
.retron-geo--b{
    width:32px;height:32px;
    background:linear-gradient(135deg,rgba(0,200,224,.12),rgba(245,166,35,.06));
    border:1px solid rgba(0,200,224,.18);
    transform:rotate(-15deg);
    animation:geoFloat 5.5s ease-in-out infinite reverse;
    margin-left:24px;
}
@keyframes geoFloat{
    0%,100%{transform:rotate(22deg) translateY(0)}
    50%{transform:rotate(28deg) translateY(-14px)}
}


/* ════════════════════════════════════════════
   SHOWCASE — INTERACTIVE GRID
════════════════════════════════════════════ */
.showcase{
    padding:clamp(80px,10vw,140px) 0 0;
    background:var(--bg-2);
    overflow:hidden;
}

.showcase-header{
    margin-bottom:clamp(40px,5vw,60px);
    display:flex;
    flex-direction:column;
}
.showcase-header h2{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(48px,9vw,110px);
    line-height:1;
    letter-spacing:-.04em;
    color:var(--ink);
}
.showcase-sub{
    font-size:clamp(14px,1.5vw,16px);
    color:var(--ink-2);
    margin-top:16px;
    max-width:480px;
}

/* Grid wrapper */
.sg-grid-wrap{
    max-width:1140px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,48px) clamp(60px,8vw,100px);
}

.sg-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:clamp(180px,22vw,300px);
    gap:14px;
}

/* Grid placement */
.sg-cell:nth-child(1){ grid-column:1/3; }   /* wide */
.sg-cell:nth-child(2){ grid-column:3; }
.sg-cell:nth-child(3){ grid-column:1; }
.sg-cell:nth-child(4){ grid-column:2; }
.sg-cell:nth-child(5){ grid-column:3; }
.sg-cell:nth-child(6){ grid-column:2/4; }   /* wide */

.sg-cell{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    background:var(--bg-3);
    border:1px solid var(--line);
    cursor:pointer;
    transition:border-color .4s;
}
.sg-cell:hover{ border-color:rgba(255,255,255,0.14); }

.sg-cell video, .sg-cell img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .7s var(--ease);
}
.sg-cell:hover video, .sg-cell:hover img{ transform:scale(1.05); }

/* Overlay + caption */
.sg-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(5,7,26,.92) 0%,rgba(5,7,26,.45) 40%,transparent 70%);
    display:flex;align-items:flex-end;
    padding:clamp(14px,2vw,20px);
    transition:background .4s;
}
.sg-cell:hover .sg-overlay{
    background:linear-gradient(to top,rgba(5,7,26,1) 0%,rgba(5,7,26,.65) 50%,rgba(5,7,26,.1) 100%);
}

.sg-caption{
    display:flex;
    align-items:flex-end;
    gap:10px;
    transform:translateY(6px);
    opacity:.8;
    transition:transform .45s var(--ease), opacity .45s;
}
.sg-cell:hover .sg-caption{
    transform:translateY(0);
    opacity:1;
}

.sg-num{
    font-family:var(--f-head);
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--mint);
    flex-shrink:0;
    padding-bottom:3px;
}
.sg-caption strong{
    display:block;
    font-family:var(--f-head);
    font-size:clamp(12px,1.4vw,14px);
    font-weight:700;
    color:#fff;
    margin-bottom:3px;
    text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.sg-caption p{
    font-size:clamp(11px,1.2vw,13px);
    color:rgba(200,220,255,.8);
    line-height:1.45;
    text-shadow:0 1px 6px rgba(0,0,0,.9);
}


/* ════════════════════════════════════════════
   WATCH
════════════════════════════════════════════ */
.watch{
    padding:clamp(80px,10vw,140px) 0;
    background:var(--bg);
}

.watch-label{margin-bottom:0}

.watch-heading{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(40px,7vw,88px);
    line-height:1.0;
    letter-spacing:-.03em;
    color:var(--ink);
    margin-bottom:clamp(32px,5vw,56px);
}
.watch-heading em{color:var(--mint);font-weight:300;font-style:italic}

.watch-player{max-width:860px}

.player-frame{
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:var(--bg-3);
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 0 0 1px var(--mint-dim),0 40px 80px rgba(0,0,0,.5);
}
.player-frame iframe{
    position:absolute;inset:0;
    width:100%;height:100%;
    border:none;z-index:2;
}

.player-placeholder{
    position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-3);
}
.placeholder-inner{
    display:flex;flex-direction:column;
    align-items:center;gap:20px;
    padding:40px;text-align:center;
}
.placeholder-inner p{font-size:14px;color:var(--ink-2);max-width:280px;line-height:1.6}

.watch-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
    padding:0 4px;
    flex-wrap:wrap;
    gap:10px;
}
.watch-meta>span{
    font-family:var(--f-head);
    font-size:11px;
    letter-spacing:.07em;
    color:var(--ink-3);
    text-transform:uppercase;
}
.drive-link{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--f-head);font-size:12px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--mint);
    transition:opacity .2s;
}
.drive-link:hover{opacity:.7}


/* ════════════════════════════════════════════
   IMPACT
════════════════════════════════════════════ */
.impact{
    position:relative;
    padding:clamp(80px,10vw,140px) 0;
    background:var(--bg-2);
    overflow:hidden;
}

.impact-bg-word{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(80px,22vw,280px);
    letter-spacing:-.04em;
    color:transparent;
    -webkit-text-stroke:1px rgba(61,220,132,0.06);
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}

.impact-top{margin-bottom:clamp(32px,4vw,48px)}

.impact-body{
    display:flex;
    align-items:flex-end;
    gap:clamp(32px,6vw,80px);
    flex-wrap:wrap;
    margin-bottom:clamp(32px,5vw,56px);
}

.impact-statement{flex:1;min-width:280px}
.impact-statement p{
    font-family:var(--f-head);
    font-weight:700;
    font-size:clamp(28px,4vw,48px);
    line-height:1.2;
    letter-spacing:-.02em;
    color:var(--ink);
}
.impact-statement em{color:var(--mint);font-style:italic;font-weight:300}

.impact-numbers{
    display:flex;
    gap:clamp(24px,4vw,56px);
    flex-wrap:wrap;
}
.big-metric{display:flex;flex-direction:column;gap:10px}
.big-num{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(64px,10vw,120px);
    line-height:1;
    letter-spacing:-.04em;
    color:var(--mint);
    min-width:0;
}
.big-label{
    display:flex;align-items:center;gap:8px;
    font-family:var(--f-head);
    font-size:12px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-2);
}
.big-label svg{opacity:.7;flex-shrink:0}

.impact-note{
    font-size:clamp(14px,1.5vw,16px);
    color:var(--ink-2);
    line-height:1.8;
    max-width:680px;
    padding-left:18px;
    border-left:2px solid var(--mint-dim);
}


/* ════════════════════════════════════════════
   REFLECTION
════════════════════════════════════════════ */
.reflection{
    padding:clamp(80px,10vw,140px) 0;
    background:var(--bg);
}

.quote-block{
    position:relative;
    margin-bottom:clamp(56px,8vw,100px);
    padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    border-left:3px solid var(--mint);
}
.quote-mark{
    position:absolute;
    top:clamp(16px,2vw,28px);
    left:clamp(20px,3vw,44px);
    font-family:var(--f-head);
    font-size:clamp(80px,12vw,160px);
    font-weight:800;
    color:var(--mint);
    opacity:.1;
    line-height:1;
    pointer-events:none;
}
.quote-block blockquote{
    position:relative;z-index:1;
    font-family:var(--f-head);
    font-size:clamp(17px,2.2vw,26px);
    font-weight:400;
    font-style:italic;
    line-height:1.6;
    color:var(--ink);
    margin-bottom:24px;
    max-width:820px;
}
.quote-block cite{
    font-style:normal;
    font-size:13px;
    letter-spacing:.06em;
    color:var(--ink-2);
    font-family:var(--f-head);
}


/* ════════════════════════════════════════════
   LESSONS — REVENUE BREAKDOWN STYLE
════════════════════════════════════════════ */

/* Top header block */
.lessons-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(24px,4vw,48px);
    align-items:start;
    margin-bottom:clamp(28px,3.5vw,40px);
}

.lessons-main-title{
    font-family:var(--f-head);
    font-weight:800;
    font-size:clamp(28px,4vw,48px);
    line-height:1.05;
    letter-spacing:-.03em;
    color:var(--ink);
}

.lessons-main-sub{
    font-family:var(--f-head);
    font-size:clamp(12px,1.4vw,14px);
    color:var(--ink-3);
    line-height:1.5;
    margin-top:8px;
}

.lessons-intro-text{
    font-size:clamp(13px,1.4vw,15px);
    color:var(--ink-2);
    line-height:1.72;
    max-width:380px;
    margin-top:14px;
}

.lessons-top-right{
    display:flex;
    align-items:flex-start;
    padding-top:8px;
}

.lessons-count{
    font-family:var(--f-head);
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-3);
    white-space:nowrap;
    padding:4px 12px;
    border:1px solid var(--line);
    border-radius:100px;
}

/* Rows */
.lessons-rows{
    border-top:1px solid var(--line);
}

.lesson-row{
    display:grid;
    grid-template-columns:clamp(140px,20vw,220px) 1fr clamp(32px,4vw,52px);
    gap:clamp(16px,2.5vw,32px);
    align-items:center;
    padding:clamp(22px,3vw,32px) 0;
    border-bottom:1px solid var(--line);
    transition:background .3s;
    border-radius:0;
    position:relative;
}
.lesson-row::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:10px;
    background:transparent;
    transition:background .3s;
    pointer-events:none;
}
.lesson-row:hover::before{
    background:var(--surface);
}

.lesson-row--highlight{
    background:rgba(61,220,132,0.04);
}

/* Left meta column */
.lesson-row-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.lesson-row-tag{
    font-family:var(--f-head);
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-3);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.lesson-row-badge{
    padding:2px 8px;
    background:var(--mint-dim);
    border:1px solid rgba(61,220,132,0.3);
    border-radius:100px;
    font-size:8px;
    color:var(--mint);
    letter-spacing:.08em;
    font-weight:700;
    text-transform:uppercase;
}

.lesson-row-detail{
    font-size:clamp(12px,1.3vw,14px);
    color:var(--ink-3);
    line-height:1.65;
}

/* Center insight column */
.lesson-row-insight strong{
    font-family:var(--f-head);
    font-size:clamp(15px,1.9vw,21px);
    font-weight:700;
    color:var(--ink);
    line-height:1.25;
    display:block;
    transition:color .3s;
}
.lesson-row:hover .lesson-row-insight strong,
.lesson-row--highlight .lesson-row-insight strong{
    color:var(--mint);
}

/* Right number column */
.lesson-row-num{
    font-family:var(--f-head);
    font-size:clamp(28px,4vw,44px);
    font-weight:800;
    letter-spacing:-.04em;
    color:var(--mint);
    line-height:1;
    opacity:.28;
    text-align:right;
    transition:opacity .3s;
}
.lesson-row:hover .lesson-row-num{ opacity:.75; }
.lesson-row--highlight .lesson-row-num{ opacity:.6; }


/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer{
    padding:clamp(28px,4vw,40px) 0;
    border-top:1px solid var(--line);
    background:var(--bg);
}
.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.footer-logo{
    height:clamp(22px,3vw,30px);
    width:auto;
    object-fit:contain;
    object-position:left center;
    display:block;
}
.footer-copy{
    font-family:var(--f-head);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-3);
}


/* ════════════════════════════════════════════
   RESPONSIVE — Tablet
════════════════════════════════════════════ */
@media(max-width:900px){
    .brief-body{ grid-template-columns:1fr }
    .brief-meta{ position:static }

    .ch-cards{ grid-template-columns:1fr }

    .retron-wrap{ grid-template-columns:1fr }
    .retron-left{
        flex-direction:row;
        align-items:flex-end;
        position:static;
        gap:16px;
        margin-bottom:8px;
    }
    .retron-big-num{ font-size:clamp(72px,12vw,110px); }
    .retron-label-vert{
        writing-mode:horizontal-tb;
        transform:none;
        margin-top:0;
        margin-left:4px;
        margin-bottom:8px;
    }
    .retron-deco{ display:none; }

    .sg-grid{
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:clamp(160px,28vw,260px);
    }
    .sg-cell:nth-child(1){ grid-column:1/3; }
    .sg-cell:nth-child(2){ grid-column:1; }
    .sg-cell:nth-child(3){ grid-column:2; }
    .sg-cell:nth-child(4){ grid-column:1; }
    .sg-cell:nth-child(5){ grid-column:2; }
    .sg-cell:nth-child(6){ grid-column:1/3; }

    .lessons-top{ grid-template-columns:1fr }
    .lessons-top-right{ display:none }
    .lesson-row{ grid-template-columns:1fr 1fr auto }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile
════════════════════════════════════════════ */
@media(max-width:600px){
    .hero-content{ padding:0 20px }
    .hero-deco{ font-size:22vw;right:-5%;bottom:2% }

    .sg-grid{
        grid-template-columns:1fr;
        grid-auto-rows:clamp(160px,56vw,240px);
    }
    .sg-cell:nth-child(n){ grid-column:1; }

    .retron-step-hd{ grid-template-columns:30px 1fr 22px;gap:10px; }

    .lesson-row{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto;
    }
    .lesson-row-meta{ grid-column:1/3; }
    .lesson-row-insight{ grid-column:1; }
    .lesson-row-num{ grid-column:2;align-self:end;font-size:clamp(24px,8vw,36px); }

    .impact-body{ flex-direction:column;align-items:flex-start }
    .impact-numbers{ gap:20px }
    .big-num{ font-size:clamp(56px,16vw,90px) }

    .quote-block{ padding:28px 20px }
    .quote-mark{ font-size:80px;top:10px;left:16px }
    .quote-block blockquote{ font-size:16px }

    .footer-inner{ flex-direction:column;align-items:flex-start;gap:12px }
    .footer-logo{ height:22px }
}