/* ============================================================
   Ali Saidov — cinematic 3D scroll portfolio
   Ink black + emerald. Montserrat body / Anton display.
   Continuous 3-clip canvas scrub ("the film").
   ============================================================ */

:root{
    --ink:#050605; --ink-2:#0a0d0b; --ink-3:#10140f;
    --smoke:#9aa39c; --smoke-dim:#6b746d; --white:#f2f5f1;
    --emerald:#00c391; --emerald-hi:#2affbf; --emerald-lo:#065f4a;
    --line:rgba(255,255,255,.08);
    --maxw:1320px;
    --ease:cubic-bezier(.16,1,.3,1);      /* soft settle */
    --spring:cubic-bezier(.32,.72,0,1);   /* heavy mass, premium */
    --mono:'Space Grotesk',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--ink);color:var(--white)}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:400;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
canvas{display:block}
::selection{background:var(--emerald);color:#022}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- shared type ---------- */
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.36em;font-weight:600;color:var(--emerald);text-transform:uppercase;margin-bottom:1.1rem}
/* HUD prefix — reads like a terminal readout inside the film */
.eyebrow::before{content:"// ";color:var(--emerald-hi);letter-spacing:0;margin-right:.3em}
.section-title{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(2.1rem,6vw,5rem);line-height:.98}
/* titles inside the film glow like the holograms around them */
.act .section-title{text-shadow:0 0 26px rgba(0,195,145,.28),0 6px 40px rgba(0,0,0,.65)}

/* ---------- grain + vignette ---------- */
.grain{position:fixed;top:-64px;left:-64px;width:calc(100% + 128px);height:calc(100% + 128px);z-index:9998;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;will-change:transform;animation:grain 8s steps(5) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-16px,8px,0)}40%{transform:translate3d(12px,-14px,0)}60%{transform:translate3d(-10px,10px,0)}80%{transform:translate3d(14px,6px,0)}100%{transform:translate3d(0,0,0)}}
.vignette{position:fixed;inset:0;z-index:9997;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---------- progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 0;will-change:transform;z-index:9999;background:linear-gradient(90deg,var(--emerald),var(--emerald-hi));box-shadow:0 0 14px var(--emerald)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:10000;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader__inner{width:min(80vw,420px);text-align:center}
.loader__word{font-family:'Anton',sans-serif;font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:.3em;color:var(--white);margin-bottom:1.4rem;text-indent:.3em}
.loader__bar{height:2px;background:var(--line);overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--emerald);box-shadow:0 0 12px var(--emerald)}
.loader__pct{margin-top:.9rem;font-size:.72rem;letter-spacing:.35em;color:var(--smoke-dim)}

/* ---------- nav : floating glass island ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;justify-content:center;padding:clamp(.9rem,2.2vw,1.5rem) clamp(1rem,4vw,3rem);pointer-events:none}
.nav__island{pointer-events:auto;display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);width:100%;max-width:var(--maxw);padding:.55rem .6rem .55rem 1.5rem;border-radius:100px;
    background:rgba(8,11,9,.55);border:1px solid rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px -20px rgba(0,0,0,.8);
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    transform:translateY(-120%);opacity:0;transition:transform .9s var(--spring),opacity .7s ease}
.nav.ready .nav__island{transform:translateY(0);opacity:1}
.nav__logo{font-family:'Anton',sans-serif;font-size:1.3rem;letter-spacing:.14em;color:var(--white);margin-right:auto}
.nav__logo span{color:var(--emerald)}
.nav__links{display:flex;gap:clamp(1.2rem,2.4vw,2rem)}
.nav__links a{position:relative;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--smoke);transition:color .35s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--emerald);transition:right .4s var(--spring)}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{right:0}
.nav__actions{display:flex;align-items:center;gap:.55rem}
/* button-in-button CTA */
.nav__cta{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--white);
    padding:.5rem .55rem .5rem 1rem;border-radius:100px;white-space:nowrap;
    transition:transform .5s var(--spring),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .5s var(--ease)}
.nav__cta-ico{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:100px;background:rgba(255,255,255,.1);transition:transform .5s var(--spring),background .4s var(--ease)}
.nav__cta-ico svg{width:.85rem;height:.85rem;transition:transform .5s var(--spring)}
.nav__cta:hover{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.94);color:#000}
.nav__cta:hover .nav__cta-ico{background:rgba(0,0,0,.12)}
.nav__cta:hover .nav__cta-ico svg{transform:translate(2px,0)}
.nav__cta:active{transform:scale(.97)}
/* CV = primary emerald action */
.nav__cta--cv{border-color:transparent;background:var(--emerald);color:#022;box-shadow:0 0 0 0 rgba(0,195,145,.5);animation:cvPulse 2.8s var(--ease) infinite}
.nav__cta--cv .nav__cta-ico{background:rgba(0,30,22,.18)}
.nav__cta--cv:hover{background:var(--emerald-hi);border-color:transparent;color:#022;animation:none;box-shadow:0 0 26px rgba(42,255,191,.55)}
.nav__cta--cv:hover .nav__cta-ico{background:rgba(0,30,22,.22)}
@keyframes cvPulse{0%{box-shadow:0 0 0 0 rgba(0,195,145,.45)}70%{box-shadow:0 0 0 12px rgba(0,195,145,0)}100%{box-shadow:0 0 0 0 rgba(0,195,145,0)}}
@media(max-width:820px){.nav__links{display:none}.nav__island{padding-left:1.2rem}}
@media(max-width:400px){.nav__cta{padding-left:.85rem;letter-spacing:.08em}.nav__cta span{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.nav__cta--cv{animation:none}.nav__island{transition:opacity .4s}}

/* ============================================================
   THE FILM — fixed canvas + stacked sticky acts
   ============================================================ */
.film-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:var(--ink)}
main{position:relative;z-index:1}
.film{position:relative}
.act{position:relative;height:340vh}          /* scroll room per clip */
.act__inner{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:0 clamp(1.2rem,5vw,4rem);overflow:hidden;will-change:transform,opacity}
.act__inner--left{justify-content:flex-start}
.act__head{max-width:760px;margin-bottom:2.4rem}
.act__head--center{text-align:center;margin-left:auto;margin-right:auto}

/* soft readability scrims tuned per act (drawn over the canvas, under text).
   feathered top+bottom so the scrim never meets an act edge with a hard line */
.act__inner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.act-hero .act__inner::before{background:radial-gradient(90% 80% at 50% 52%,transparent 42%,rgba(3,5,4,.55) 100%)}
.act-pillars .act__inner::before{background:linear-gradient(90deg,rgba(3,5,4,.92) 0%,rgba(3,5,4,.72) 46%,rgba(3,5,4,.28) 100%)}
.act-work .act__inner::before{background:linear-gradient(180deg,rgba(3,5,4,.72),rgba(3,5,4,.86) 60%,rgba(3,5,4,.95))}
/* emerald dot-grid texture over each act, same as the stats dissolve, feathered at the edges */
.act-pillars .act__inner::after,.act-work .act__inner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:radial-gradient(rgba(0,195,145,.5) 1px,transparent 1.6px);background-size:26px 26px;opacity:.22;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}

/* ---- ACT 1 hero ---- */
.act-hero .act__inner{flex-direction:column;justify-content:center;text-align:center}
.hero__kicker{font-size:.72rem;letter-spacing:.4em;font-weight:700;text-transform:uppercase;color:var(--emerald);margin-bottom:1.6rem;opacity:0}
.hero__title{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(3.4rem,15vw,14rem);line-height:.86;letter-spacing:.01em;display:flex;justify-content:center;flex-wrap:wrap;gap:0 .04em;text-shadow:0 0 34px rgba(0,195,145,.32),0 8px 60px rgba(0,0,0,.7)}
/* kicker reads as a HUD readout floating in the void */
.hero__kicker::before{content:"[ ";color:var(--emerald-hi);letter-spacing:0}
.hero__kicker::after{content:" ]";color:var(--emerald-hi);letter-spacing:0}
.hero__title .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotateX(-90deg);transform-origin:bottom}
.hero__title .space{width:.28em}
.hero__subline{overflow:hidden;margin-top:1rem}
.hero__sub{display:inline-block;font-size:clamp(.9rem,2.4vw,1.4rem);letter-spacing:.5em;text-transform:uppercase;font-weight:500;color:var(--white);opacity:0;transform:translateY(120%);padding-left:.5em}
.scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.62rem;letter-spacing:.35em;color:var(--smoke)}
.scrollhint i{width:1px;height:38px;background:linear-gradient(var(--emerald),transparent);animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- ACT 2 pillars ---- */
.act-pillars .act__inner{flex-direction:column;justify-content:center;align-items:flex-start}
.pillars__list{list-style:none;display:flex;flex-direction:column;gap:0;width:100%;max-width:760px}
/* pillars = holographic panels, extra screens of the studio scene behind them */
.pillar{position:relative;background:linear-gradient(135deg,rgba(3,14,11,.62),rgba(3,10,8,.38));border:1px solid rgba(0,195,145,.24);border-radius:10px;padding:1.5rem 1.5rem;margin-bottom:.85rem;display:grid;grid-template-columns:64px 1fr;gap:1.4rem;align-items:start;opacity:0;box-shadow:inset 0 0 30px rgba(0,195,145,.05),0 0 24px rgba(0,0,0,.35);overflow:hidden}
.pillar:last-child{margin-bottom:0}
/* scanlines, like the holo screens in the film */
.pillar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,195,145,.045) 0 1px,transparent 1px 3px);border-radius:inherit}
/* emerald corner tick */
.pillar::before{content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;border-top:2px solid var(--emerald);border-left:2px solid var(--emerald);border-radius:10px 0 0 0;opacity:.85}
.pillar__idx{font-family:'Anton',sans-serif;font-size:1.4rem;color:var(--emerald);opacity:.75;text-shadow:0 0 14px rgba(0,195,145,.5)}
.pillar__title{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,2rem);line-height:1.04;letter-spacing:.01em}
.pillar__body{margin-top:.6rem;color:var(--smoke);font-size:1rem;line-height:1.55}
@media(max-width:560px){.pillar{grid-template-columns:44px 1fr;gap:.9rem}}

/* ---- ACT 3 work ---- */
.act-work .act__inner{flex-direction:column;justify-content:center}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;width:100%;max-width:var(--maxw);margin:0 auto}
/* work cards = holo-screens hanging in the gallery corridor */
.card{position:relative;background:linear-gradient(160deg,rgba(6,16,13,.78),rgba(8,12,10,.66));border:1px solid rgba(0,195,145,.28);border-radius:14px;padding:0 0 1.7rem;min-height:300px;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .5s,background .5s,box-shadow .5s;overflow:hidden;opacity:0;box-shadow:inset 0 0 26px rgba(0,195,145,.05)}
.card__media{height:150px;overflow:hidden;border-radius:14px 14px 0 0;position:relative}
.card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,195,145,.08),transparent 30%,transparent 40%,rgba(10,14,11,.85)),repeating-linear-gradient(0deg,rgba(0,195,145,.05) 0 1px,transparent 1px 3px)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__meta{display:flex;justify-content:space-between;align-items:center;margin:1.2rem 1.7rem 0}
.card__tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);font-weight:700}
.card__plat{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke-dim)}
.card__plat::before{content:"[ ";color:rgba(0,195,145,.6)}
.card__plat::after{content:" ]";color:rgba(0,195,145,.6)}
.card__title{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1;margin:.8rem 1.7rem .7rem;letter-spacing:.01em}
.card__pitch{color:var(--smoke);font-size:.92rem;line-height:1.55;margin:0 1.7rem}
/* button-in-button footer link */
.card__go{margin:1.4rem 1.7rem 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--white);display:inline-flex;gap:.6rem;align-items:center;margin-top:auto;padding-top:1.4rem}
.card__go i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:100px;background:rgba(0,195,145,.14);color:var(--emerald);font-size:.8rem;transition:transform .5s var(--spring),background .4s var(--ease)}
.card:hover{transform:translateY(-10px);border-color:rgba(0,195,145,.6);background:rgba(14,20,16,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 26px rgba(0,195,145,.08),0 24px 50px -24px rgba(0,0,0,.9),0 0 40px rgba(0,195,145,.16)}
.card:hover .card__go i{transform:translate(3px,-3px);background:rgba(0,195,145,.28)}
/* mobile: horizontal snap carousel — 3 stacked cards don't fit a phone's 100svh */
@media(max-width:900px){
  .work__grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1rem;max-width:100%;padding:0 .2rem .6rem}
  .work__grid::-webkit-scrollbar{display:none}
  .card{flex:0 0 min(78vw,340px);scroll-snap-align:center;min-height:0}
  .card__media{height:130px}
}

/* ============================================================
   POST-FILM SECTIONS (opaque, cover the fixed canvas)
   ============================================================ */
.stats,.finale{position:relative;z-index:2}
.finale{background:var(--ink)}
.stats{max-width:var(--maxw);margin:0 auto;padding:clamp(9rem,30vh,16rem) clamp(1.2rem,4vw,3rem) clamp(6rem,14vh,12rem)}
.stats__head{margin-bottom:4rem;max-width:820px}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ink);padding:2.6rem 1.6rem 2.2rem;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.stat::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--emerald),var(--emerald-hi));box-shadow:0 0 14px rgba(0,195,145,.5);transition:width 1.1s var(--spring)}
.stat.in::before{width:100%}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 0 0,rgba(0,195,145,.06),transparent 60%);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.stat:hover{background:var(--ink-2)}
.stat:hover::after{opacity:1}
.stat__num{font-family:'Anton',sans-serif;font-size:clamp(2.8rem,7vw,5rem);line-height:1;color:var(--white)}
.stat__num .sfx{color:var(--emerald)}
.stat__label{margin-top:.8rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
@media(max-width:820px){.stats__grid{grid-template-columns:repeat(2,1fr)}}

/* finale/footer stay solid so the fixed canvas never peeks between sections */
.finale::before{content:"";position:absolute;inset:-1px 0;background:var(--ink);z-index:-1}
/* the FIRST post-film section dissolves out of the film — no hard seam.
   top is transparent (film shows through), fades into solid ink by ~32vh */
.stats::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,transparent 0,rgba(5,6,5,.5) 15vh,var(--ink) 32vh)}
/* emerald dot-grid texture riding the dissolve band, masked to fade in and out */
.stats::after{content:"";position:absolute;left:0;right:0;top:0;height:34vh;z-index:-1;pointer-events:none;
    background-image:radial-gradient(rgba(0,195,145,.5) 1px,transparent 1.6px);background-size:26px 26px;opacity:.55;
    -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 32%,transparent 86%);
    mask-image:linear-gradient(180deg,transparent 4%,#000 32%,transparent 86%)}

.finale{max-width:none;padding:clamp(6rem,14vh,12rem) clamp(1.2rem,4vw,3rem)}
.finale__head{margin-bottom:3.4rem;text-align:center;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.finale__title{color:var(--white)}
.finale__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:var(--maxw);margin:0 auto}
.cert{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2);cursor:pointer;opacity:0;transform:translateY(30px) scale(.98);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.cert img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--spring),opacity .6s;opacity:.72}
.cert::after{content:"VIEW";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:var(--white);background:linear-gradient(180deg,rgba(2,10,8,.1),rgba(2,10,8,.55));opacity:0;transition:opacity .4s}
.cert:hover{border-color:rgba(0,195,145,.5);box-shadow:0 20px 44px -22px rgba(0,0,0,.9),0 0 30px rgba(0,195,145,.14)}
.cert:hover img{transform:scale(1.07);opacity:1}
.cert:hover::after{opacity:1}
.cert:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
@media(max-width:900px){.finale__grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;z-index:2;background:var(--ink);border-top:1px solid var(--line);padding:clamp(4rem,10vh,8rem) clamp(1.2rem,4vw,3rem) 3rem;max-width:var(--maxw);margin:0 auto}
.footer__big{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(2.6rem,11vw,9rem);line-height:.9;letter-spacing:.01em;margin-bottom:3rem}
.footer__row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.4rem;border-top:1px solid var(--line);padding-top:2rem}
.footer__mail{font-size:clamp(1rem,3vw,1.6rem);border-bottom:1px solid transparent;transition:border-color .3s}
.footer__mail:hover{border-color:var(--emerald)}
.footer__social{display:flex;gap:1.6rem;flex-wrap:wrap}
.footer__social a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--smoke);transition:color .3s}
.footer__social a:hover{color:var(--emerald)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-dim)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:9990;background:rgba(2,3,2,.94);display:flex;align-items:center;justify-content:center;padding:4vw;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:2rem;right:2rem;background:none;border:1px solid var(--line);color:var(--white);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1rem}
.lightbox__close:hover{border-color:var(--emerald);color:var(--emerald)}

/* ---------- small screens ---------- */
@media(max-width:560px){
  .stats{padding-left:1rem;padding-right:1rem}
  .stat{padding:1.9rem 1.1rem 1.6rem}
  .finale__grid{gap:.7rem}
  .footer__row{flex-direction:column;align-items:flex-start}
  .footer__base{flex-direction:column;gap:.4rem}
  .hero__sub{letter-spacing:.32em}
  .lightbox__close{top:1rem;right:1rem}
}
/* touch devices: no hover states to wait on */
@media(hover:none){
  .cert img{opacity:.92}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .act{height:auto;min-height:100vh}
    .act__inner{position:relative;height:auto;min-height:100vh;padding-top:8rem;padding-bottom:8rem}
    .hero__title .ch,.hero__kicker,.hero__sub,.pillar,.card,.cert{opacity:1!important;transform:none!important}
}