/* =========================================================================
   Lumina: The Lost Light — official-style showcase site
   Palette drawn from the game's own art direction:
     deep night blue, soft cyan light aura (#7BEBFD) and antique ivory/gold.
   ========================================================================= */

:root{
  --bg:#05080f;
  --bg-2:#0a1120;
  --bg-3:#0d1830;
  --panel:rgba(14,22,42,.62);
  --panel-solid:#0d1628;
  --line:rgba(123,235,253,.16);
  --line-soft:rgba(244,238,221,.10);

  --cyan:#7bebfd;
  --cyan-2:#3fd0f0;
  --cyan-deep:#1c8fb4;
  --gold:#f4eedd;
  --gold-2:#e6c98d;
  --ivory:#faf4e8;

  --text:#e2e9f6;
  --text-2:#a9b7d2;
  --text-3:#7386a6;

  /* Cinzel covers latin + latin-ext only. Playfair Display sits directly behind it
     so Vietnamese (which needs the `vietnamese` subset) still gets a serif display
     face rather than falling through to a sans. Then the CJK/Thai Noto faces. */
  --font-display:"Cinzel","Playfair Display","Noto Sans JP","Noto Sans KR","Noto Sans Thai",Georgia,serif;
  --font-body:"Inter","Noto Sans JP","Noto Sans KR","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --maxw:1180px;
  --nav-h:74px;
}

/* --- Vietnamese display font ------------------------------------------------
   Cinzel ships no `vietnamese` subset, so in the base stack the browser resolves
   font per CHARACTER: plain letters from Cinzel, accented ones from Playfair.
   Inside a single word ("TIA SÁNG") that reads as two different typefaces.
   Vietnamese is one alphabet, so the whole display string must share one face —
   drop Cinzel entirely when the document language is Vietnamese.
   `html[lang="vi"]` (0,1,1) outranks `:root` (0,1,0), and main.js keeps
   document.documentElement.lang in sync on every language switch.
   Body text needs no override: Inter ships a `vietnamese` subset and leads the stack. */
html[lang="vi"]{
  --font-display:"Playfair Display","Noto Sans JP","Noto Sans KR","Noto Sans Thai",Georgia,serif;
}

/* --- display text is always capitals ----------------------------------------
   Cinzel is an all-caps face, so Latin headings already *looked* uppercase for
   en/id/es/pt_BR — but that was a side effect of the font, not a declared rule.
   Vietnamese now uses Playfair Display, which does keep lowercase, so without
   this rule "Tia sáng gần như đã mất" would sit next to "A LIGHT NEARLY LOST".
   Declaring it once makes the look explicit and identical in all 8 locales.
   No effect on ja/ko/th — those scripts have no case distinction. */
.nav__wordmark,.hero__tagline,.h2,.video-block__name,.chapter__num,.chapter__body h3,
.lore__title,.lore__name,.char-sheet__name,.char-trait__label,.world__name,.cta__title,
.footer__title{text-transform:uppercase}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:rgba(123,235,253,.28);color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2}

/* ------------------------------- buttons ------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:.02em;
  padding:15px 34px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg,#a9f2ff 0%,var(--cyan) 42%,var(--cyan-2) 100%);
  color:#04141c;
  box-shadow:0 8px 30px rgba(63,208,240,.34),0 0 0 1px rgba(255,255,255,.16) inset;
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(63,208,240,.5)}
.btn--ghost{
  background:rgba(255,255,255,.03);color:var(--ivory);
  border-color:var(--line);backdrop-filter:blur(6px);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--cyan);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* -------------------------------- nav --------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease,box-shadow .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,8,15,.82);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);padding:0 26px;
  display:flex;align-items:center;gap:26px;
}
.nav__brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.nav__mark{width:34px;height:34px;border-radius:9px;box-shadow:0 0 22px rgba(123,235,253,.4)}
.nav__wordmark{
  font-family:var(--font-display);font-weight:700;letter-spacing:.22em;font-size:19px;
  background:linear-gradient(180deg,#fff8e6,var(--gold-2) 55%,#b98f43);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav__links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav__links a{
  font-size:15px;font-weight:500;color:var(--text-2);padding:9px 14px;border-radius:9px;
  transition:color .2s,background .2s;
}
.nav__links a:hover{color:#fff;background:rgba(123,235,253,.08)}
.nav__links a.nav__cta{
  color:#04141c;background:linear-gradient(135deg,#a9f2ff,var(--cyan-2));
  font-weight:600;margin-left:8px;box-shadow:0 6px 20px rgba(63,208,240,.32);
}
.nav__links a.nav__cta:hover{background:linear-gradient(135deg,#c3f7ff,var(--cyan))}

/* ---------------------------- language menu ---------------------------- */
.lang{position:relative;flex:0 0 auto}
.lang__btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  padding:9px 13px;border-radius:11px;font-size:14px;font-weight:500;font-family:var(--font-body);
  transition:border-color .2s,background .2s;
}
.lang__btn:hover{border-color:var(--cyan);background:rgba(123,235,253,.09)}
.lang__globe{width:17px;height:17px;fill:none;stroke:var(--cyan);stroke-width:1.6;flex:0 0 auto}
.lang__chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.7;transition:transform .25s}
.lang.is-open .lang__chev{transform:rotate(180deg)}
.lang__list{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;margin:0;padding:7px;list-style:none;
  background:rgba(10,17,32,.97);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s ease;z-index:70;
  max-height:min(70vh,460px);overflow:auto;
}
.lang.is-open .lang__list{opacity:1;visibility:visible;transform:translateY(0)}
.lang__list li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:9px;font-size:14.5px;color:var(--text-2);cursor:pointer;
  transition:background .18s,color .18s;
}
.lang__list li:hover{background:rgba(123,235,253,.1);color:#fff}
.lang__list li.is-active{color:var(--cyan);background:rgba(123,235,253,.08)}
.lang__list li .code{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* -------------------------------- hero --------------------------------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 40px) 26px 90px;overflow:hidden;text-align:center;
}
.hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:center 42%;
  transform:scale(1.06);animation:drift 34s ease-in-out infinite alternate;
}
/* muted looping cinematic behind the hero copy (falls back to .hero__bg poster) */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;opacity:.92;
}
@keyframes drift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.13) translateY(-18px)}}
.hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 62% 46% at 50% 34%,rgba(63,208,240,.16),transparent 62%),
    linear-gradient(180deg,rgba(5,8,15,.80) 0%,rgba(5,8,15,.56) 34%,rgba(5,8,15,.80) 74%,var(--bg) 100%);
}
.hero__glow{
  position:absolute;left:50%;top:36%;width:min(760px,90vw);height:min(760px,90vw);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(123,235,253,.20),rgba(123,235,253,.05) 42%,transparent 68%);
  filter:blur(6px);
}
.hero__sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.spark{
  position:absolute;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px 2px rgba(123,235,253,.75);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(20px) scale(.6);opacity:0}
  12%{opacity:.9}
  70%{opacity:.55}
  100%{transform:translateY(-140px) scale(1.05);opacity:0}
}
.hero__content{position:relative;z-index:3;max-width:820px}
.hero__logo{
  width:min(560px,84vw);margin:0 auto 26px;filter:drop-shadow(0 14px 44px rgba(0,0,0,.72));
  animation:riseIn 1s ease both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__kicker{
  display:inline-block;font-size:13px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  color:var(--cyan);padding:7px 18px;border:1px solid var(--line);border-radius:999px;
  background:rgba(123,235,253,.06);margin-bottom:20px;
}
.hero__tagline{
  font-family:var(--font-display);font-weight:600;font-size:clamp(27px,4.3vw,48px);line-height:1.24;
  color:var(--ivory);letter-spacing:.01em;margin-bottom:20px;
  text-shadow:0 2px 26px rgba(0,0,0,.8);
}
.hero__desc{
  font-size:clamp(16px,1.5vw,19px);color:var(--text-2);max-width:660px;margin:0 auto 34px;line-height:1.72;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.hero__actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.hero__soon{
  display:inline-flex;align-items:center;gap:9px;margin-top:30px;
  font-size:14px;color:var(--text-3);letter-spacing:.03em;
}
.hero__soon svg{width:17px;height:17px;fill:none;stroke:var(--cyan);stroke-width:1.6;opacity:.85}
.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  width:24px;height:40px;border:1.5px solid rgba(123,235,253,.4);border-radius:14px;
}
.hero__scroll span{
  position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;
  background:var(--cyan);animation:wheel 1.9s ease-in-out infinite;
}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(12px);opacity:.25}}

/* ------------------------------ sections ------------------------------- */
.section{position:relative;padding:110px 0;overflow:hidden}
.section--story{padding-top:130px}
.kicker{
  font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  color:var(--cyan);margin-bottom:16px;
}
.h2{
  font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.4vw,50px);line-height:1.16;
  color:var(--ivory);letter-spacing:.005em;
}
.lead{margin-top:16px;font-size:clamp(16px,1.5vw,19px);color:var(--text-2);max-width:640px}
.section .kicker,.section .h2,.section .lead{text-align:center;margin-left:auto;margin-right:auto}
.ornament{position:absolute;left:50%;transform:translateX(-50%);width:min(430px,72vw);opacity:.5;pointer-events:none;z-index:1}
.ornament--top{top:26px}
.ornament--cta{position:static;transform:none;width:min(360px,66vw);margin:0 auto 22px;opacity:.72}

/* ------------------------------ cinematic ------------------------------ */
/* Shared video block: used by both the prologue cinematic and the gameplay clip. */
.section--cinema{padding-top:96px;padding-bottom:96px}
.section--gameplay{padding-top:20px;padding-bottom:96px}
.video-shell{max-width:960px;margin:56px auto 0}
.video-block__frame{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#03060d;
  box-shadow:0 34px 90px rgba(0,0,0,.72),0 0 0 1px rgba(123,235,253,.06) inset;
  aspect-ratio:16/9;
}
.video-block__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 55%,rgba(5,8,15,.55));
}
.video-block__video{width:100%;height:100%;display:block;object-fit:cover;background:#03060d}
.video-block__play{
  position:absolute;inset:0;margin:auto;width:92px;height:92px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;z-index:3;padding:0;
  background:radial-gradient(circle at 36% 30%,rgba(169,242,255,.95),var(--cyan-2));
  border:none;box-shadow:0 12px 44px rgba(63,208,240,.5),0 0 0 10px rgba(123,235,253,.12);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,opacity .3s;
}
.video-block__play:hover{transform:scale(1.07);box-shadow:0 18px 56px rgba(63,208,240,.62),0 0 0 16px rgba(123,235,253,.16)}
.video-block__play svg{width:38px;height:38px;fill:#04141c;margin-left:5px}
.video-block.is-playing .video-block__play{opacity:0;pointer-events:none;transform:scale(.85)}
/* two gameplay clips side by side, each with a localized caption */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1000px;margin:56px auto 0}
.video-block__meta{margin-top:16px}
.video-block__tag{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--cyan);margin-bottom:9px;
}
.video-block__name{
  font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.9vw,22px);
  color:var(--ivory);letter-spacing:.03em;margin-bottom:7px;line-height:1.25;
}
.video-block__note{color:var(--text-2);font-size:14.5px;line-height:1.62}
/* screenshot strip under the gameplay clips */
.stills{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:34px auto 0}
.stills img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
  border:1px solid var(--line-soft);transition:transform .5s cubic-bezier(.2,.7,.3,1),border-color .3s;
}
.stills img:hover{transform:translateY(-4px);border-color:var(--line)}

/* ------------------------------- story --------------------------------- */
.story{display:flex;flex-direction:column;gap:78px;margin-top:74px}
.chapter{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.chapter:nth-child(even) .chapter__media{order:2}
.chapter__media{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6);
  aspect-ratio:16/9;
}
.chapter__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.chapter:hover .chapter__media img{transform:scale(1.045)}
.chapter__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,15,.05),rgba(5,8,15,.42));
}
.chapter__num{
  position:absolute;left:18px;top:14px;z-index:2;font-family:var(--font-display);
  font-size:15px;letter-spacing:.2em;color:var(--cyan);
  background:rgba(5,8,15,.55);border:1px solid var(--line);border-radius:8px;padding:4px 12px;
  backdrop-filter:blur(6px);
}
.chapter__body h3{
  font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.4vw,29px);
  color:var(--gold);letter-spacing:.05em;margin-bottom:16px;
}
.chapter__body p{color:var(--text-2);font-size:16.5px;line-height:1.78}

/* --------------------------- ancient history --------------------------- */
/* Timeline of the world's backstory, appended under the four story chapters. */
.lore{margin-top:96px}
.lore__head{text-align:center;max-width:660px;margin:0 auto 54px}
.lore__title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.9vw,34px);
  color:var(--ivory);letter-spacing:.04em;margin-bottom:12px;line-height:1.24;
}
.lore__desc{color:var(--text-2);font-size:16px}
.lore__list{list-style:none;margin:0 auto;padding:0;max-width:830px;position:relative}
/* vertical thread linking the eras */
.lore__list::before{
  content:"";position:absolute;left:11px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}
.lore__item{position:relative;padding:0 0 42px 54px}
.lore__item:last-child{padding-bottom:0}
.lore__dot{
  position:absolute;left:4px;top:5px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#d8fbff,var(--cyan-2));
  box-shadow:0 0 0 4px rgba(5,8,15,.92),0 0 18px rgba(63,208,240,.6);
}
.lore__era{
  display:block;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--cyan);margin-bottom:9px;
}
.lore__name{
  font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,23px);
  color:var(--gold);letter-spacing:.03em;margin-bottom:9px;line-height:1.3;
}
.lore__text{color:var(--text-2);font-size:15.8px;line-height:1.74}

/* ----------------------------- character ------------------------------- */
.section--character{
  padding-top:96px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 52%,var(--bg) 100%);
}
.character__glow{
  position:absolute;left:50%;top:44%;width:min(1040px,120vw);height:min(1040px,120vw);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(63,208,240,.17),rgba(63,208,240,.045) 44%,transparent 68%);
  filter:blur(10px);
}
/* turnaround: three official renders sharing one crop box and one floor line */
.turnaround{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:940px;margin:60px auto 0}
.turn{
  position:relative;display:flex;flex-direction:column;align-items:center;margin:0;
  padding:24px 14px 0;border-radius:22px;
  background:linear-gradient(180deg,rgba(20,32,58,.52),rgba(11,18,34,.34));
  border:1px solid var(--line-soft);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .45s;
}
.turn:hover{transform:translateY(-7px);border-color:var(--line);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.turn img{
  width:100%;height:auto;max-width:252px;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.62));
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.turn:hover img{transform:translateY(-4px) scale(1.03)}
.turn__floor{
  width:76%;height:1px;margin:4px auto 0;
  background:linear-gradient(90deg,transparent,rgba(123,235,253,.5),transparent);
}
.turn__cap{
  margin:14px 0 20px;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--cyan);text-align:center;
}
.char-sheet{
  display:grid;grid-template-columns:.85fr 1.4fr;gap:46px;align-items:start;
  max-width:940px;margin:56px auto 0;padding:36px 38px;border-radius:22px;
  background:linear-gradient(180deg,rgba(20,32,58,.6),rgba(11,18,34,.6));
  border:1px solid var(--line-soft);
}
.char-sheet__name{
  font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,36px);
  color:var(--ivory);letter-spacing:.05em;line-height:1.2;margin-bottom:11px;
}
.char-sheet__role{
  color:var(--cyan);font-size:13px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  line-height:1.5;
}
.char-traits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 28px}
.char-trait__label{
  display:block;font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.09em;color:var(--gold);text-transform:uppercase;margin-bottom:7px;
}
.char-trait__text{display:block;color:var(--text-2);font-size:15px;line-height:1.64}

/* ------------------------------- worlds -------------------------------- */
.section--worlds{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 50%,var(--bg) 100%)}
.worlds__bg{
  position:absolute;left:0;right:0;bottom:0;height:62%;background-size:cover;background-position:center bottom;
  opacity:.14;mask-image:linear-gradient(180deg,transparent,#000 42%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
}
.worlds{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:64px}
.world{
  position:relative;border-radius:20px;overflow:hidden;min-height:290px;
  border:1px solid var(--line);background:var(--panel-solid);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s;
}
.world:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.6);border-color:rgba(123,235,253,.42)}
.world__img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.5;transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .4s;
}
.world:hover .world__img{transform:scale(1.06);opacity:.62}
.world::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,11,22,.32) 0%,rgba(6,11,22,.72) 58%,rgba(6,11,22,.94) 100%);
}
.world__inner{position:relative;z-index:2}
.world__tag{
  display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--cyan);margin-bottom:11px;
}
.world__name{
  font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.2vw,27px);color:var(--ivory);
  letter-spacing:.04em;margin-bottom:9px;line-height:1.24;
}
.world__desc{color:var(--text-2);font-size:15.5px;line-height:1.62}

/* ------------------------------ features ------------------------------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px}
.feature{
  position:relative;padding:32px 28px 30px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,32,58,.66),rgba(11,18,34,.66));
  border:1px solid var(--line-soft);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s;
}
.feature::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .35s;
}
.feature:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.feature:hover::before{opacity:.9}
.feature__icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:radial-gradient(circle at 34% 28%,rgba(123,235,253,.24),rgba(123,235,253,.05));
  border:1px solid var(--line);
}
.feature__icon svg{width:26px;height:26px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:19px;font-weight:600;color:var(--ivory);margin-bottom:10px;letter-spacing:.01em}
.feature p{color:var(--text-2);font-size:15.5px;line-height:1.68}

/* ------------------------------- gallery ------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:64px}
.shot{
  position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55);cursor:pointer;
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.07)}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(4,7,14,.9));
  color:var(--ivory);font-size:15px;line-height:1.5;z-index:2;
  transform:translateY(6px);opacity:.92;transition:transform .4s,opacity .4s;
}
.shot:hover .shot__cap{transform:translateY(0);opacity:1}

/* ------------------------------ languages ------------------------------ */
.section--langs{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-3) 60%,var(--bg) 100%)}
.langs{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:60px}
.langcard{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding:24px 14px;border-radius:15px;cursor:pointer;
  background:rgba(14,22,42,.6);border:1px solid var(--line-soft);
  transition:transform .3s,border-color .3s,background .3s;
}
.langcard:hover{transform:translateY(-4px);border-color:var(--line);background:rgba(20,32,58,.7)}
.langcard.is-active{border-color:rgba(123,235,253,.55);background:rgba(123,235,253,.09);box-shadow:0 0 0 1px rgba(123,235,253,.25),0 18px 40px rgba(0,0,0,.4)}
.langcard__flag{font-size:23px;line-height:1;margin-bottom:4px}
.langcard__name{font-size:15.5px;font-weight:600;color:var(--ivory)}
.langcard__code{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* --------------------------------- cta --------------------------------- */
.section--cta{padding:150px 0;text-align:center;overflow:hidden}
.cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42}
.cta__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 56% 60% at 50% 50%,rgba(5,8,15,.42),rgba(5,8,15,.86) 72%),
    linear-gradient(180deg,var(--bg),transparent 22%,transparent 78%,var(--bg));
}
.cta{max-width:720px}
.cta__title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.6vw,52px);color:var(--ivory);
  line-height:1.16;margin-bottom:18px;text-shadow:0 3px 26px rgba(0,0,0,.7);
}
.cta__desc{color:var(--text-2);font-size:clamp(16px,1.6vw,19px);max-width:560px;margin:0 auto 34px}
.cta__form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:540px;margin:0 auto}
.cta__input{
  flex:1 1 260px;min-width:0;padding:15px 20px;border-radius:999px;font-size:16px;font-family:var(--font-body);
  background:rgba(8,14,26,.85);border:1px solid var(--line);color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.cta__input::placeholder{color:var(--text-3)}
.cta__input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(123,235,253,.14)}
.cta__note{margin-top:22px;font-size:14px;color:var(--text-3);letter-spacing:.03em}
.cta__note.is-ok{color:var(--cyan);font-weight:600}
.cta__note.is-err{color:#ff9b9b;font-weight:600}

/* ------------------------------- footer -------------------------------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:60px 0 34px}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:16px}
.footer__mark{width:48px;height:48px;border-radius:12px;box-shadow:0 0 24px rgba(123,235,253,.3)}
.footer__title{
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.14em;
  background:linear-gradient(180deg,#fff8e6,var(--gold-2) 60%,#b98f43);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:5px;
}
.footer__tagline{color:var(--text-3);font-size:14px;max-width:440px}
.footer__links{display:flex;gap:22px;flex-wrap:wrap}
.footer__links a{color:var(--text-2);font-size:14.5px;transition:color .2s}
.footer__links a:hover{color:var(--cyan)}
.footer__bottom{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--text-3);font-size:13px;
}
.footer__note{opacity:.75}

/* ------------------------------ reveal --------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ------------------------------ responsive ----------------------------- */
@media (max-width:1000px){
  .nav__links a:not(.nav__cta){display:none}
  .features{grid-template-columns:repeat(2,1fr)}
  .langs{grid-template-columns:repeat(3,1fr)}
  .video-grid{grid-template-columns:1fr;gap:40px}
  .stills{grid-template-columns:repeat(2,1fr)}
  .turnaround{gap:18px}
  .turn img{max-width:220px}
}
@media (max-width:820px){
  :root{--nav-h:64px}
  body{font-size:16px}
  .nav__wordmark{font-size:17px}
  .section{padding:82px 0}
  .chapter{grid-template-columns:1fr;gap:26px}
  .chapter:nth-child(even) .chapter__media{order:0}
  .worlds{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .story{gap:64px;margin-top:52px}
  .ornament{width:min(330px,80vw)}
  .turnaround{gap:12px;margin-top:44px}
  .turn{padding:16px 8px 0;border-radius:16px}
  .turn__cap{font-size:10px;letter-spacing:.18em;margin:11px 0 15px}
  .char-sheet{grid-template-columns:1fr;gap:28px;padding:28px 24px}
  .lore{margin-top:70px}
  .lore__item{padding-left:44px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .nav__inner{padding:0 16px;gap:12px}
  .nav__links{display:none}
  .features{grid-template-columns:1fr}
  .langs{grid-template-columns:repeat(2,1fr)}
  .stills{grid-template-columns:repeat(2,1fr);gap:10px}
  .turnaround{gap:8px}
  .turn{padding:11px 4px 0}
  .char-traits{grid-template-columns:1fr;gap:20px}
  .lore__head{margin-bottom:38px}
  .lore__item{padding-left:36px;padding-bottom:32px}
  .lore__list::before{left:8px}
  .lore__dot{left:1px;width:13px;height:13px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .hero__actions .btn{width:100%}
  .footer__inner{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}