/* ============================================================
   Next Core Labs — cinematic scroll site (v2, 2026-10)
   Builds on colors_and_type.css tokens. One fixed canvas plays a
   continuous AI-generated camera journey; pinned scenes lay copy over it.
   ============================================================ */

:root{
  --ink:#06040b;
  --violet:var(--next-violet);
  --core:var(--core-purple);
  --text:var(--cloud-gray);
  --muted:#b9b0c9;
  --dim:#8c82a0;
  --glass:rgba(17,11,28,.55);
  --glass-line:rgba(145,92,243,.22);
  --display:"Neutiva","Inter","Helvetica Neue",system-ui,sans-serif;
  --body:"Neutiva","Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arabic:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --gutter:clamp(20px,4vw,56px);
  --nav-h:72px;
}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[dir="rtl"] body{font-family:var(--arabic)}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
::selection{background:rgba(145,92,243,.45);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;
  background:#05030a url("../seq/poster.webp") center/cover no-repeat}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(6,4,11,.75) 100%),
    linear-gradient(to bottom,rgba(6,4,11,.55) 0%,transparent 18%,transparent 62%,rgba(6,4,11,.85) 100%);
  transition:background-color .4s ease}
.veil::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:var(--dark,0);transition:opacity .5s ease}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- loader ---------- */
.loader{position:fixed;z-index:60;inset-block-end:20px;inset-inline-start:var(--gutter);display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:opacity .6s ease,transform .6s ease}
[dir="rtl"] .loader{letter-spacing:0;text-transform:none;font-size:13px}
.loader.done{opacity:0;transform:translateY(8px);pointer-events:none}
.loader-bar{width:72px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--violet);transition:width .3s ease}
.loader b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;inset-inline:0;top:0;height:var(--nav-h);display:flex;align-items:center;gap:28px;padding-inline:var(--gutter);
  transition:background-color .35s ease,backdrop-filter .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
.nav.solid{background:rgba(8,5,14,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;height:28px;flex:none}
.brand svg{height:28px;width:auto;fill:#fff}
.nav-links{display:flex;gap:28px;margin-inline-start:auto;font-size:15px}
.nav-links a{text-decoration:none;color:var(--muted);transition:color .2s ease}
.nav-links a:hover,.nav-links a.on{color:#fff}
.lang{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;font:600 15px/1 var(--arabic);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
[dir="rtl"] .lang{font-family:var(--body);font-size:13px;letter-spacing:.04em}
.lang:hover{border-color:var(--violet);background:rgba(145,92,243,.12)}
.nav .btn{padding:10px 20px;font-size:14.5px}
@media (max-width:900px){.nav-links{display:none}.lang{margin-inline-start:auto}.nav .btn{padding:9px 16px;font-size:14px}}
@media (max-width:420px){.nav{gap:12px}.brand svg{height:22px}.nav .btn{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;font:600 16px/1.2 inherit;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .25s ease,background-color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--core);color:#fff;box-shadow:0 0 0 1px rgba(145,92,243,.45) inset,0 10px 40px -10px rgba(123,60,234,.8)}
.btn-primary:hover{background:var(--purple-500);box-shadow:0 0 0 1px rgba(172,138,243,.6) inset,0 14px 50px -8px rgba(145,92,243,.9)}
.btn-ghost{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--violet);background:rgba(145,92,243,.12)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}

/* ---------- chapters rail ---------- */
.chapters{position:fixed;z-index:40;inset-inline-end:22px;top:50%;transform:translateY(-50%);display:flex;gap:14px;align-items:stretch}
.chapters ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.chapters li{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .3s ease;justify-content:flex-end}
[dir="rtl"] .chapters li{letter-spacing:0;text-transform:none;font-size:13px}
.chapters li b{font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--body)}
.chapters li span{opacity:0;transform:translateX(6px);transition:opacity .3s ease,transform .3s ease}
.chapters li.on{color:#fff}
.chapters li.on span{opacity:1;transform:none}
.ch-line{width:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.ch-line i{display:block;width:100%;height:0;background:linear-gradient(var(--violet),var(--core))}
@media (max-width:1100px){.chapters{display:none}}

/* ---------- scenes ---------- */
main{position:relative;z-index:3}
.scene{position:relative;height:calc(var(--len) * 1vh)}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.beat{position:absolute;opacity:0;will-change:opacity,transform}
.no-js .beat,.reduced .beat{transition:none}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-300)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;font-size:15px}
.display{font-family:var(--display);font-weight:800;font-size:clamp(52px,9.2vw,152px);line-height:.92;letter-spacing:-.045em;color:#fff;text-wrap:balance}
[dir="rtl"] .display{font-family:var(--arabic);font-weight:700;letter-spacing:0;line-height:1.12;font-size:clamp(44px,7.6vw,124px)}
.display span{display:block}
.display .soft{color:transparent;-webkit-text-stroke:1.2px rgba(236,236,236,.55)}
[dir="rtl"] .display .soft{-webkit-text-stroke:0;color:rgba(236,236,236,.42)}
.h-xl{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:-.035em;color:#fff;text-wrap:balance}
[dir="rtl"] .h-xl{font-family:var(--arabic);letter-spacing:0;line-height:1.25;font-size:clamp(30px,3.8vw,58px)}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--muted);max-width:46ch;text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.kicker{font-family:var(--body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);font-weight:600}
[dir="rtl"] .kicker{letter-spacing:0;text-transform:none;font-size:14px}

/* hero */
.hero-a{inset-inline:var(--gutter);top:calc(var(--nav-h) + 6vh);display:grid;gap:22px}
.hero-a .display{max-width:12ch}
.cue-wrap{inset-inline-start:var(--gutter);bottom:6vh}
.cue{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .cue{letter-spacing:0;text-transform:none;font-size:14px}
.cue-line{width:1px;height:44px;background:linear-gradient(var(--violet),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.side{inset-inline-start:var(--gutter);top:50%;transform:translateY(-50%);display:grid;gap:16px;max-width:min(27vw,440px)}
.side .h-xl{font-size:clamp(30px,3.4vw,58px)}
.hero-c{inset-inline-start:var(--gutter);top:50%;transform:translateY(-50%);display:grid;gap:20px;justify-items:start;max-width:min(31vw,540px)}
.hero-c .display{font-size:clamp(40px,4.8vw,88px)}
[dir="rtl"] .hero-c .display{font-size:clamp(36px,4vw,72px)}
.hero-c .meta{font-size:14px;color:var(--dim)}

/* services */
.svc{right:var(--gutter);top:50%;transform:translateY(-50%);width:min(440px,32vw);display:grid;gap:16px}
.svc .h-xl{font-size:clamp(32px,3.6vw,56px)}
.cards{display:grid;gap:10px;margin-top:8px}
.card{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px 22px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:border-color .35s ease,background-color .35s ease,opacity .35s ease;opacity:.55}
.card.on{opacity:1;border-color:var(--glass-line);background:rgba(28,16,48,.62);box-shadow:0 20px 60px -30px rgba(145,92,243,.7)}
.card-h{display:flex;align-items:baseline;gap:14px}
.card-h b{font-family:var(--body);font-size:13px;color:var(--violet);font-variant-numeric:tabular-nums}
.card-h h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff}
[dir="rtl"] .card-h h3{font-family:var(--arabic);letter-spacing:0}
.card-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.card.on .card-body{grid-template-rows:1fr}
.card-body>div{overflow:hidden}
.card-body p{color:var(--muted);font-size:15.5px;padding-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px}
.chips span{font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid rgba(145,92,243,.3);color:var(--purple-200);background:rgba(91,33,182,.14)}

/* process */
.proc-head{inset-inline-start:var(--gutter);top:calc(var(--nav-h) + 5vh);display:grid;gap:14px;max-width:min(620px,86vw)}
.steps{inset-inline:var(--gutter);bottom:7vh;display:grid;gap:16px}
.steps-bar{height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.steps-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--core),var(--violet))}
[dir="rtl"] .steps-bar i{margin-inline-start:0;background:linear-gradient(270deg,var(--core),var(--violet))}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.step{padding:16px 16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(10,7,18,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s ease;opacity:.6;min-width:0}
.step.on{opacity:1;border-color:var(--glass-line);background:rgba(28,16,48,.66);transform:translateY(-6px)}
.step.done{opacity:.85}
.step b{display:block;font-family:var(--body);font-size:12px;color:var(--violet);font-variant-numeric:tabular-nums;margin-bottom:6px}
.step h3{font-family:var(--display);font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em}
[dir="rtl"] .step h3{font-family:var(--arabic)}
.step p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
@media (max-width:900px){
  .steps ol{grid-template-columns:1fr}
  .step{display:none;transform:none}
  .step.on{display:block;transform:none}
}

/* lab / scale */
.lab{inset-inline-start:var(--gutter);top:50%;transform:translateY(-50%);display:grid;gap:18px;max-width:min(600px,44vw)}
.side,.hero-c,.svc,.lab,.proc-head{isolation:isolate}
.side::before,.hero-c::before,.svc::before,.lab::before,.proc-head::before{content:"";position:absolute;inset:-18% -22%;z-index:-1;background:radial-gradient(closest-side,rgba(6,4,11,.74),rgba(6,4,11,.35) 60%,transparent);pointer-events:none}
@media (min-width:1101px){[dir="ltr"] .svc{right:calc(var(--gutter) + 84px)}}
.big-kicker{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,96px);letter-spacing:-.045em;line-height:.95;background:linear-gradient(100deg,#fff 10%,var(--purple-300) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
[dir="rtl"] .big-kicker{font-family:var(--arabic);letter-spacing:0;line-height:1.25}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.stat{border-top:1px solid rgba(145,92,243,.35);padding-top:12px}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,52px);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:14px;color:var(--muted)}
.quote{font-size:clamp(16px,1.4vw,20px);color:var(--text);border-inline-start:2px solid var(--violet);padding-inline-start:16px;max-width:44ch;font-style:italic}
[dir="rtl"] .quote{font-style:normal}

/* contact */
.contact{position:relative;z-index:3;padding-block:18vh 12vh;padding-inline:var(--gutter)}
.contact-grid{max-width:1240px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact .h-xl{margin-block:16px 18px}
.reach{display:grid;gap:10px;margin-top:28px}
.reach a,.reach span{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:16px;width:fit-content}
.reach a:hover{color:var(--purple-200)}
.reach svg{width:18px;height:18px;color:var(--violet);flex:none}
.reach .ltr{direction:ltr;unicode-bidi:isolate}
form.brief{border:1px solid var(--glass-line);border-radius:24px;padding:clamp(22px,3vw,34px);background:rgba(14,9,24,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:grid;gap:16px;box-shadow:0 40px 120px -50px rgba(91,33,182,.9)}
.field{display:grid;gap:6px}
.field label{font-size:13px;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 14px;transition:border-color .2s ease,background-color .2s ease}
.input:focus{outline:none;border-color:var(--violet);background:rgba(145,92,243,.08)}
textarea.input{resize:vertical;min-height:120px}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.form-note{font-size:13.5px;color:var(--dim)}
.form-note.ok{color:var(--purple-200)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* footer */
.foot{position:relative;z-index:3;padding:56px var(--gutter) 36px;border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(transparent,rgba(6,4,11,.9) 40%)}
.foot-grid{max-width:1240px;margin-inline:auto;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot .brand svg{height:26px}
.foot p.tag{color:var(--muted);margin-top:14px;max-width:30ch}
.foot h4{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
[dir="rtl"] .foot h4{letter-spacing:0;text-transform:none;font-size:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.foot a{text-decoration:none;color:var(--muted)}
.foot a:hover{color:#fff}
.colophon{max-width:1240px;margin:40px auto 0;font-size:13px;color:var(--dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- mobile scene layout ---------- */
@media (max-width:1100px) and (min-width:768px){.side,.hero-c{max-width:40vw}.svc{width:46vw}.lab{max-width:56vw}}
@media (max-width:767px){
  body{font-size:16px}
  .side,.hero-c,.lab{top:auto;bottom:6vh;transform:none;max-width:none;inset-inline:var(--gutter)}
  .hero-c .display{font-size:clamp(38px,11vw,56px)}
  .side .lead{font-size:15px}
  .svc{right:var(--gutter);left:var(--gutter);width:auto}
  .cue-wrap{bottom:4vh}
  .hero-a{top:calc(var(--nav-h) + 3vh)}
  .side,.hero-c{bottom:7vh}
  .svc{top:auto;bottom:5vh;transform:none}
  .hero-c .meta{display:none}
  .svc .lead{display:none}
  .card{padding:14px 16px}
  .card:not(.on){display:none}
  .proc-head{top:calc(var(--nav-h) + 2vh)}
  .proc-head .lead{display:none}
  .lab{gap:14px}
  .lab .lead{font-size:15px}
  .quote{display:none}
  .stats{gap:8px}
  .stat span{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .grain,.cue-line{animation:none}
  .btn,.card,.step,.card-body{transition:none}
}