/* ═══════════════════════════════════════════════════════════════
   CHAT2GAME · v20 · "EMBER CHROME" — masaüstü final revizyon
   Siyah cam + krom beyaz + sıvı cıva. UV=makine, gül=insan.
   HERO kilitli. SEKANS tek-altyazı keynote akışı. Yeni duygu sahnesi.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --void:   #070610;
  --void2:  #0B0A16;
  --void3:  #12111F;
  --bone:   #F0EEE8;
  --dim:    #B6B4C6;
  --dim2:   #8E8CA2;
  --mute:   #706E88;
  --chrome: #B9C0D0;
  --chrome2:#8A8EA6;
  --uv:     #FF6A3D;
  --uv2:    #FFB08A;
  --uvdim:  rgba(255,106,61,.14);
  --rose:   #FF5C86;
  --rose2:  #FF9AB5;
  --hair:   rgba(240,238,232,.08);
  --hair2:  rgba(240,238,232,.16);
  --disp:   'Anton', 'Arial Narrow', sans-serif;
  --sans:   'Instrument Sans', system-ui, sans-serif;
  --serif:  'Instrument Serif', Georgia, serif;
  --mono:   'JetBrains Mono', ui-monospace, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; background:var(--void); color-scheme:dark; }
body {
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-size:17px; line-height:1.65;
  overflow-x:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(127,178,255,.18);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--uv); color:var(--bone); }
:focus-visible { outline:2px solid var(--uv); outline-offset:3px; }
.skip-link {
  position:fixed; z-index:1000; left:1rem; top:1rem;
  padding:.7rem .95rem; border-radius:.7rem;
  background:var(--bone); color:var(--void);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  transform:translateY(-180%); transition:transform 160ms cubic-bezier(.22,1,.36,1);
}
.skip-link:focus-visible { transform:translateY(0); outline-color:var(--uv); }
.br-d { display:inline; }

/* ── film aygıtları (süreklilik) ───────────────────────────── */

.grain {
  position:fixed; inset:-4%; z-index:120; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* ── nav ────────────────────────────────────────────────────── */

.nav { position:fixed; top:0; left:0; right:0; z-index:100; }
.nav__inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem clamp(1.2rem, 3.4vw, 3rem);
}
.brand { display:flex; align-items:center; gap:.7rem; }
.brand b {
  font-family:var(--disp); font-weight:400; font-size:1.18rem;
  letter-spacing:.008em; color:var(--bone);
}
.rec {
  width:8px; height:8px; border-radius:50%; background:var(--rose);
  box-shadow:0 0 11px rgba(255,92,134,.85);
  animation:rec 1.7s steps(2, jump-none) infinite;
}
.rec--still { animation:none; }
@keyframes rec { 0% { opacity:1; } 100% { opacity:.25; } }
.nav__links { display:flex; gap:2rem; }
.nav__links a {
  font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim2); transition:color .25s;
}
.nav__links a:hover { color:var(--bone); }
.nav__pill {
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone); border:1px solid var(--hair2); border-radius:99px;
  padding:.6rem 1.15rem; white-space:nowrap;
  background:linear-gradient(180deg, rgba(240,238,232,.05), transparent);
}

/* ── slate (klaket) ─────────────────────────────────────────── */

.slate {
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.24em;
  color:var(--dim2); text-transform:uppercase; white-space:nowrap;
}
.slate i {
  width:8px; height:8px; background:var(--rose); flex:none;
  box-shadow:0 0 10px rgba(255,92,134,.7);
}

/* ── store ──────────────────────────────────────────────────── */

.store {
  display:flex; align-items:center; gap:.9rem;
  border:1px solid var(--hair2); border-radius:16px;
  padding:.95rem 1.55rem;
  background:linear-gradient(180deg, rgba(240,238,232,.05), rgba(7,6,16,.4));
  transition:border-color .3s, background-color .3s, transform .3s;
  will-change:transform;
}
.store:hover { border-color:rgba(185,192,208,.5); background:rgba(240,238,232,.07); transform:translateY(-2px); }
.store svg { width:21px; height:25px; color:var(--bone); flex:none; }
.store span { display:flex; flex-direction:column; line-height:1.25; }
.store em {
  font-style:normal; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.26em; color:var(--uv2);
}
.store b { font-weight:600; font-size:1.08rem; color:var(--bone); }

/* ═══ PREMIUM iPHONE ═══════════════════════════════════════════ */

.dev { position:relative; aspect-ratio:588/1231; --rad:clamp(2.3rem, 3.9vh, 4.6rem); }
.dev__body {
  position:absolute; inset:0; border-radius:var(--rad);
  background:linear-gradient(135deg,#3A3A4C 0%,#1B1B27 13%,#0E0E18 50%,#1B1B27 87%,#3A3A4C 100%);
  box-shadow:
    0 90px 175px -50px rgba(0,0,0,.95),
    0 50px 100px -42px rgba(138,92,255,.12),
    inset 0 0 0 1.5px rgba(240,238,232,.12),
    inset 0 3px 2px rgba(240,238,232,.20),
    inset 0 -3px 3px rgba(0,0,0,.55);
}
.dev__body::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.6px; z-index:15;
  background:linear-gradient(135deg, rgba(240,238,232,.55), rgba(138,92,255,.18) 28%, rgba(0,0,0,.4) 58%, rgba(185,192,208,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75;
}
.dev__scr {
  position:absolute; inset:2.5%;
  border-radius:calc(var(--rad) - .55rem);
  overflow:hidden; background:#000; z-index:2;
  transform:translateZ(0);
}
.dev__glare {
  position:absolute; inset:2.5%; z-index:16; pointer-events:none;
  border-radius:calc(var(--rad) - .55rem);
  background:linear-gradient(122deg, transparent 33%, rgba(240,238,232,.06) 46%, rgba(240,238,232,.11) 50%, transparent 60%);
  mix-blend-mode:screen; opacity:.85;
}
.dev__notch {
  position:absolute; top:2.9%; left:50%; transform:translateX(-50%);
  width:29%; height:2.5%; min-height:11px; border-radius:99px;
  background:#000; z-index:13;
  box-shadow:inset 0 0 5px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5);
}
.dev__notch::after {
  content:""; position:absolute; right:14%; top:50%; transform:translateY(-50%);
  width:22%; height:44%; border-radius:99px;
  background:radial-gradient(circle at 60% 40%, #1a1c2e, #050509);
  box-shadow:inset 0 0 3px rgba(120,110,200,.4);
}
.dev__btn {
  position:absolute; z-index:12; pointer-events:none;
  background:linear-gradient(90deg,#2A2A38,#42424F 45%,#22222E);
  box-shadow:inset 0 1px 0 rgba(240,238,232,.14);
}
.dev__btn--r1 { right:-1.6%; top:30%; width:1.7%; height:9.5%;  border-radius:0 3px 3px 0; }
.dev__btn--l1 { left:-1.6%;  top:21%; width:1.7%; height:5.5%;  border-radius:3px 0 0 3px; }
.dev__btn--l2 { left:-1.6%;  top:31%; width:1.7%; height:12%;   border-radius:3px 0 0 3px; }

.scrw { position:absolute; inset:0; overflow:hidden; }
.scrw .scr {
  position:absolute; top:0; left:0; width:100%; height:104%;
  object-fit:cover; object-position:top center;
}
.boot {
  position:absolute; inset:0; z-index:9; opacity:0; pointer-events:none;
  background:radial-gradient(90% 60% at 50% 46%, rgba(244,242,255,.92), rgba(138,92,255,.42) 45%, transparent 75%);
}
.tapring {
  position:absolute; left:50%; top:56.6%; z-index:8;
  width:52%; aspect-ratio:1; border-radius:50%;
  border:2px solid rgba(255,92,134,.9);
  transform:translate(-50%,-50%) scale(.2); opacity:0;
  pointer-events:none;
}
.tapring--call { left:81%; top:10.6%; width:20%; }
.mark { position:absolute; width:2px; height:2px; pointer-events:none; opacity:0; }
#orbStart { left:81%; top:10.6%; }
#orbEnd   { left:50%; top:33%; }

/* ═══ 00 · BOOT — AAA başlık açılışı (güçlendirildi) ══════════ */

.boot0 {
  position:fixed; inset:0; z-index:110;
  background:radial-gradient(120% 120% at 50% 44%, #0F0D22 0%, #070610 62%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.boot0__grid {
  position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:1;
  background:
    linear-gradient(rgba(138,92,255,.06) 1px, transparent 1px) 0 0/100% 5.2vh,
    linear-gradient(90deg, rgba(138,92,255,.06) 1px, transparent 1px) 0 0/5.2vh 100%;
  mask:radial-gradient(72% 62% at 50% 46%, #000, transparent 78%);
  -webkit-mask:radial-gradient(72% 62% at 50% 46%, #000, transparent 78%);
}
.boot0__ignite {
  position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background:radial-gradient(42% 38% at 50% 50%, rgba(138,92,255,.24), transparent 70%);
}
.boot0__line {
  position:absolute; left:50%; top:50%; z-index:2; pointer-events:none;
  width:46vw; height:1.5px; transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg, transparent, var(--uv), var(--chrome), var(--uv), transparent);
  box-shadow:0 0 22px rgba(138,92,255,.85);
}
.boot0__scan {
  position:absolute; left:0; right:0; height:34vh; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(138,92,255,.16) 60%, rgba(185,192,208,.28) 82%, transparent);
  top:-40vh; opacity:0;
}
.boot0__word {
  position:relative; z-index:3;
  font-family:var(--disp); font-weight:400;
  font-size:clamp(3.8rem, 14vw, 17rem); line-height:.9; letter-spacing:.02em;
  display:flex; gap:.01em; perspective:700px;
}
.boot0__word .bl {
  display:inline-block; will-change:transform, opacity, background-position;
  background:linear-gradient(100deg, #56596E 0%, #F0EEE8 22%, #B9C0D0 40%, #8A5CFF 52%, #F0EEE8 66%, #56596E 100%);
  background-size:250% 100%; background-position:120% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.boot0__under {
  position:relative; z-index:3; margin-top:2.4vh;
  width:min(46vw, 30rem); height:2px; transform:scaleX(0);
  background:linear-gradient(90deg, transparent, var(--uv), var(--chrome), var(--uv), transparent);
  box-shadow:0 0 16px rgba(138,92,255,.7);
}
.boot0__sub {
  position:relative; z-index:3; margin-top:2.6vh;
  font-family:var(--mono); font-size:clamp(11px,1.15vw,14px); letter-spacing:.46em;
  color:var(--uv2); text-transform:uppercase; padding-left:.46em; opacity:0;
}
.boot0__tag {
  position:relative; z-index:3; margin-top:1.4vh;
  font-family:var(--mono); font-size:clamp(11px,1.2vw,15px); letter-spacing:.52em;
  color:var(--chrome); text-transform:uppercase; padding-left:.52em; opacity:0;
}
.boot0__flash {
  position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 46%, rgba(244,242,255,.95), rgba(138,92,255,.5) 45%, transparent 72%);
}

/* ═══ 01 · HERO — KİLİTLİ (dokunma) ══════════════════════════ */

.s1 { position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:center; }
.s1__bg {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 60% at 74% 52%, rgba(138,92,255,.13), transparent 62%),
    radial-gradient(42% 46% at 20% 72%, rgba(255,92,134,.07), transparent 68%);
}
.s1__grid-bg {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background:
    linear-gradient(rgba(240,238,232,.04) 1px, transparent 1px) 0 0/100% 6vh,
    linear-gradient(90deg, rgba(240,238,232,.04) 1px, transparent 1px) 0 0/6vh 100%;
  mask:radial-gradient(80% 80% at 30% 50%, #000, transparent 75%);
  -webkit-mask:radial-gradient(80% 80% at 30% 50%, #000, transparent 75%);
}
.s1__ghost {
  position:absolute; z-index:1; left:-3vw; bottom:6vh; pointer-events:none;
  font-family:var(--disp); font-weight:400;
  font-size:26vw; line-height:.8; letter-spacing:.01em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(185,192,208,.10);
  opacity:.7;
}
.s1__grid {
  position:relative; z-index:5; width:100%;
  max-width:112rem; margin:0 auto;
  padding:12vh clamp(1.4rem, 4vw, 4.5rem) 8vh;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(2rem, 5vw, 6rem);
}
.s1__lead { max-width:39rem; }
.s1__brand {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(3.2rem, 6.8vw, 7.4rem); line-height:.92; letter-spacing:.008em;
  color:var(--bone); margin:2.2vh 0 0; width:max-content; max-width:100%; white-space:nowrap;
}
.s1__brand .bl--x { color:var(--uv); text-shadow:0 0 34px rgba(255,106,61,.28); }
.s1__motto {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem, 2.6vw, 2.5rem); color:var(--chrome);
  margin-top:1.4vh; letter-spacing:.01em;
}
.s1__sub {
  color:var(--dim); font-size:clamp(1.1rem, 1.35vw, 1.4rem); line-height:1.7;
  margin-top:3vh; max-width:26rem;
}
.s1__sub em { font-family:var(--serif); font-style:italic; color:var(--rose2); font-size:1.06em; }
.s1__cta { display:flex; gap:.9rem; margin-top:4vh; flex-wrap:wrap; }
.s1__stage { position:relative; display:flex; justify-content:center; }
.s1__phone { position:relative; will-change:transform, opacity; }
.hero-reel { display:none; }
.s1__phone--legacy { display:block; }
.dev--hero { height:min(78svh, 50rem); }
.s1__phone::after {
  content:""; position:absolute; left:4%; right:4%; bottom:-7%; height:26%;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,106,61,.18), transparent 70%);
  filter:blur(30px); z-index:-1; pointer-events:none;
}
.s1__hud {
  position:absolute; z-index:6; top:14vh; right:clamp(1.4rem,4vw,4.5rem);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; color:var(--mute);
  text-align:right; line-height:2;
}
.s1__hud b { color:var(--uv2); font-weight:500; }

/* ═══ SEKANS 01 — tek altyazı, keynote akışı, ÇAKIŞMA YOK ═════ */

.sq { background:#05040E; }
.sq__pin {
  height:100svh; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
.sq__pin .slate--in {
  position:absolute; top:5.5vh; left:50%; transform:translateX(-50%); z-index:10;
}
.sq__glow { position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; }
.sq__glow--scan  { background:radial-gradient(60% 52% at 50% 38%, rgba(138,92,255,.2), transparent 70%); }
.sq__glow--found { background:radial-gradient(62% 54% at 50% 38%, rgba(255,92,134,.19), rgba(120,50,100,.1) 52%, transparent 74%); }
.sq__glow--match { background:radial-gradient(46% 42% at 38% 38%, rgba(138,92,255,.18), transparent 68%),
                   radial-gradient(46% 42% at 62% 38%, rgba(255,92,134,.18), transparent 68%); }
.rings { position:absolute; left:50%; top:37%; z-index:2; pointer-events:none; }
.rings i {
  position:absolute; left:0; top:0; width:34svh; aspect-ratio:1;
  margin:-17svh 0 0 -17svh;
  border-radius:50%; border:1px solid rgba(138,92,255,.36);
  opacity:0; will-change:transform;
}
.mring {
  position:absolute; left:50%; top:37%; z-index:2; pointer-events:none;
  width:52svh; aspect-ratio:1; margin:-26svh 0 0 -26svh;
  border-radius:50%; opacity:0; will-change:transform;
}
.mring--i { border:2px solid rgba(138,92,255,.55); }
.mring--p { border:2px solid rgba(255,92,134,.55); }
.sq__stage {
  position:relative; z-index:5; flex:1;
  display:flex; align-items:center; justify-content:center;
}
.dev--big { height:min(64svh, 42rem); }
.fr { position:absolute; inset:0; }
.fr .scrw { position:absolute; inset:0; }
.fr--2, .fr--3, .fr--4, .fr--5 { opacity:0; }

/* tek altyazı bandı — telefonun ALTINDA, güvenli bölge */
.sq__cap {
  flex:none; position:relative; z-index:6; height:26svh;
  display:grid; place-items:center;
  padding:0 6vw;
}
.sq__beat {
  grid-area:1/1; max-width:44rem; text-align:center; will-change:transform, opacity;
}
.sq__tc {
  font-family:var(--mono); font-size:14px; letter-spacing:.36em; color:var(--uv2);
  display:block; margin-bottom:1rem;
}
.sq__beat h3 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.8rem, 5.2vw, 5rem); line-height:.98; letter-spacing:.012em;
  color:var(--bone); margin-bottom:.9rem;
}
.sq__beat p { color:var(--dim); font-size:clamp(1.12rem, 1.3vw, 1.4rem); line-height:1.6; }

.rail {
  position:absolute; right:2.2vw; top:50%; transform:translateY(-50%); z-index:10;
  list-style:none; display:flex; flex-direction:column; gap:1.3rem;
}
.rail li {
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--mute);
  padding-left:1.2rem; position:relative; white-space:nowrap; transition:color .3s;
}
.rail li::before {
  content:""; position:absolute; left:0; top:50%; margin-top:-2.5px;
  width:5px; height:5px; border-radius:50%; background:var(--mute); transition:background .3s, box-shadow .3s;
}
.rail li.on { color:var(--bone); }
.rail li.on::before { background:var(--uv); box-shadow:0 0 9px rgba(138,92,255,.9); }

/* ═══ GECE İLERLİYOR — 5 sahne, koreografi + yoğunluk ═════════ */

.sn { background:var(--void2); position:relative; }
.sn__head {
  position:sticky; top:0; left:0; right:0; z-index:20;
  padding:5.5vh clamp(1.4rem, 5vw, 5rem) 0; pointer-events:none;
}
.gn { position:relative; }
.gp {
  min-height:100svh; position:relative;
  display:flex; align-items:center;
  padding:8vh clamp(1.4rem, 5vw, 6rem);
  gap:clamp(2rem, 5vw, 6rem); overflow:hidden;
}
.gp--2, .gp--4 { flex-direction:row-reverse; }
.gp--1::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 68% at 18% 52%, rgba(138,92,255,.08), transparent 65%); }
.gp--2::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 68% at 82% 52%, rgba(255,92,134,.09), transparent 65%); }
.gp--3::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 80% at 50% 60%, rgba(138,92,255,.1), transparent 65%); }
.gp--4::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 68% at 82% 40%, rgba(255,92,134,.1), transparent 60%); }
.gp--5::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 68% at 18% 60%, rgba(138,92,255,.09), transparent 65%); }

/* dev ghost timecode — yoğunluk + katılan tipografi */
.gp__ghost {
  position:absolute; z-index:0; pointer-events:none;
  font-family:var(--disp); font-weight:400; line-height:.8;
  font-size:34vh; letter-spacing:.01em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(185,192,208,.07);
  top:50%; transform:translateY(-50%);
}
.gp--1 .gp__ghost, .gp--3 .gp__ghost, .gp--5 .gp__ghost { right:2vw; }
.gp--2 .gp__ghost, .gp--4 .gp__ghost { left:2vw; }

.gp__phone { flex:none; position:relative; z-index:2; will-change:transform, opacity; transform-style:preserve-3d; }
.dev--gp { height:min(76svh, 47rem); }
.gp__phone::after {
  content:""; position:absolute; bottom:-8%; left:10%; right:10%; height:60%;
  background:radial-gradient(ellipse at 50% 0%, rgba(138,92,255,.1), transparent 70%);
  filter:blur(26px); z-index:-1; pointer-events:none;
}
.gp--2 .gp__phone::after, .gp--4 .gp__phone::after {
  background:radial-gradient(ellipse at 50% 0%, rgba(255,92,134,.09), transparent 70%);
}
.gp__txt { flex:1; max-width:30rem; position:relative; z-index:3; }
.gp__txt--r { text-align:right; }
.gp__ts {
  font-family:var(--mono); font-size:13.5px; letter-spacing:.3em;
  color:var(--uv2); display:block; margin-bottom:1.6rem; will-change:opacity, transform;
}
.gp--2 .gp__ts, .gp--4 .gp__ts { color:var(--rose2); }
.gp__h {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(3.6rem, 7.5vw, 9rem); line-height:.88; letter-spacing:.01em;
  color:var(--bone); margin-bottom:1.8rem; will-change:opacity, transform;
}
.gp__p { color:var(--dim); font-size:clamp(1.14rem, 1.35vw, 1.42rem); line-height:1.7; will-change:opacity; }
.gn__line {
  display:flex; align-items:center; gap:1.5rem;
  padding:5vh clamp(1.4rem, 5vw, 6rem);
  font-family:var(--mono); font-size:12px; letter-spacing:.28em;
  color:var(--mute); text-transform:uppercase;
}
.gn__line::after { content:""; flex:1; height:1px; background:var(--hair); }

/* ═══ DUYGU · yeni sahne — neden? ════════════════════════════ */

.sd { background:#050410; position:relative; }
.sd__pin {
  height:100svh; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 7vw;
}
.sd__pin .slate--in { position:absolute; top:7.5vh; left:50%; transform:translateX(-50%); z-index:5; }
.sd__atmos {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(48% 44% at 50% 44%, rgba(138,92,255,.13), transparent 70%),
    radial-gradient(40% 40% at 72% 78%, rgba(255,92,134,.07), transparent 70%);
}
.sd__beam {
  position:absolute; left:50%; top:-20%; width:60%; height:150%; z-index:1; pointer-events:none;
  transform:translateX(-50%) rotate(8deg);
  background:linear-gradient(90deg, transparent, rgba(138,92,255,.07) 45%, rgba(185,192,208,.05) 55%, transparent);
  filter:blur(30px); opacity:.7;
}
.sd__lines { position:relative; z-index:3; display:flex; flex-direction:column; gap:1.4vh; align-items:center; }
.dg {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2.3rem, 5.6vw, 6rem); line-height:1.1; letter-spacing:.005em;
  color:var(--bone); clip-path:inset(0 100% 0 0);
  will-change:clip-path, opacity;
}
.dg[data-i="1"] { color:var(--chrome); }
.dg[data-i="2"] .hl { color:var(--uv2); font-style:italic; }
.sd__foot {
  position:relative; z-index:3; margin-top:5.5vh;
  font-family:var(--sans); font-size:clamp(1.15rem, 1.6vw, 1.55rem); letter-spacing:.02em;
  color:var(--dim); opacity:0;
}
.sd__foot em { font-family:var(--serif); font-style:italic; color:var(--rose2); font-size:1.08em; }

/* ═══ SES KÖPRÜSÜ — telefonlar büyük, çakışma yok ════════════ */

.s5 { background:#040309; }
.s5__pin {
  height:100svh; overflow:hidden; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.s5__pin .slate--in { position:absolute; top:6.5vh; left:50%; transform:translateX(-50%); z-index:7; }
.duo {
  position:relative; z-index:3; will-change:transform, opacity;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem, 7vw, 7rem); width:100%;
}
.dev--duo { height:min(66svh, 40rem); }
.dev--l { transform-origin:bottom right; }
.dev--r { transform-origin:bottom left; }
.wave {
  position:absolute; left:20%; right:20%; top:42%; height:70px; z-index:2;
  margin-top:-35px; display:flex; align-items:center; gap:3px; opacity:0; pointer-events:none;
}
.wave i {
  flex:1; height:100%; border-radius:3px;
  background:linear-gradient(180deg, rgba(138,92,255,.9), rgba(255,92,134,.7));
  transform:scaleY(.18); transform-origin:center;
  animation:wv 1s cubic-bezier(.45,0,.25,1) infinite alternate;
}
@keyframes wv { 0% { transform:scaleY(.14); } 100% { transform:scaleY(1); } }
.off {
  position:absolute; inset:0; z-index:6; opacity:0; pointer-events:none;
  background:linear-gradient(160deg, #05040E 0%, #0A0816 52%, #060410 100%);
}
.orb {
  position:absolute; left:0; top:0; z-index:8; width:16px; height:16px;
  margin:-8px 0 0 -8px; opacity:0; pointer-events:none; will-change:transform;
}
.orb::before { content:""; position:absolute; inset:3px; border-radius:50%; background:#FBF8FF; }
.orb u {
  position:absolute; left:50%; top:50%; width:130px; height:130px;
  margin:-65px 0 0 -65px; border-radius:50%; display:block;
}
.orb__e { background:radial-gradient(50% 50% at 50% 50%, rgba(255,92,134,.6), rgba(255,92,134,.16) 48%, transparent 72%); }
.orb__i { background:radial-gradient(50% 50% at 50% 50%, rgba(138,92,255,.62), rgba(138,92,255,.17) 48%, transparent 72%); opacity:0; }
.s5__quote { position:absolute; left:0; right:0; bottom:7vh; z-index:6; text-align:center; padding:0 5vw; }
.q {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2rem, 4.2vw, 4rem); line-height:1.25; color:var(--bone);
}
.qm { display:inline-block; overflow:hidden; vertical-align:bottom; }
.qw { display:inline-block; will-change:transform; }
.q__meta { margin-top:1.2rem; font-family:var(--mono); font-size:12px; letter-spacing:.28em; color:var(--mute); }
.s5__t {
  margin-top:2.2rem; font-family:var(--disp); font-weight:400;
  font-size:clamp(2.4rem, 4.6vw, 4.4rem); line-height:.98; color:var(--bone);
}
.s5__t em { font-family:var(--serif); font-style:italic; color:var(--rose2); font-size:1.05em; }

/* ═══ KAPANIŞ · YAKINDA. ════════════════════════════════════ */

.sk { position:relative; overflow:hidden; background:var(--void); }
.sk::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(52% 52% at 50% 50%, rgba(138,92,255,.09), transparent 70%),
    radial-gradient(38% 38% at 78% 22%, rgba(255,92,134,.05), transparent 65%);
}
.sk__inner {
  position:relative; z-index:3; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:10vh 4vw 6vh;
}
.sk__inner .slate--c { justify-content:center; margin-bottom:5vh; }
.sk__t {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(7.5rem, 20vw, 24rem); line-height:.86; letter-spacing:.006em;
}
.skl { display:block; white-space:nowrap; }
.bl2 { display:inline-block; will-change:color; color:var(--void); }
.bl2--d { color:var(--void); }
.js-off .sk__t .bl2, .flat .sk__t .bl2 { color:var(--bone); }
.js-off .sk__t .bl2--d, .flat .sk__t .bl2--d { color:var(--uv); }
.sk__sub { margin-top:3vh; color:var(--dim); font-size:clamp(1.15rem, 1.4vw, 1.45rem); }
.sk__cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:3.5vh; }

/* ═══ GALERİ · tüm ekranlar krom sürüklenme ═══════════════════ */

.footwrap { position:relative; background:#05040D; }
.gallery {
  position:relative; overflow:hidden; padding:8vh 0 5vh; border-top:1px solid var(--hair);
}
.gallery__head { display:flex; justify-content:center; margin-bottom:5vh; }
.gallery::before, .gallery::after {
  content:""; position:absolute; top:0; bottom:0; z-index:2; pointer-events:none;
  width:clamp(4rem, 10vw, 11rem);
}
.gallery::before { left:0; background:linear-gradient(90deg, #05040D, transparent); }
.gallery::after  { right:0; background:linear-gradient(270deg, #05040D, transparent); }
.gallery__track {
  display:flex; gap:clamp(1rem, 1.8vw, 1.8rem); width:max-content;
  animation:galleryRoll 38s linear infinite;
}
.gallery__track:hover { animation-play-state:paused; }
@keyframes galleryRoll { from { transform:translate3d(0,0,0); } to { transform:translate3d(calc(-50% - .9vw),0,0); } }
.gallery__strip { display:flex; align-items:flex-end; gap:clamp(1rem, 1.8vw, 1.8rem); flex:none; }
.gallery__item { flex:none; }
.gallery__item:nth-child(3n+1) { transform:translateY(0); }
.gallery__item:nth-child(3n+2) { transform:translateY(3vh); }
.gallery__item:nth-child(3n)   { transform:translateY(-3vh); }
.dev--gal { height:min(40svh, 25rem); }
.gallery__item .dev__body {
  box-shadow:
    0 50px 95px -24px rgba(0,0,0,.92),
    0 20px 55px -16px rgba(138,92,255,.09),
    inset 0 0 0 1.5px rgba(240,238,232,.1),
    inset 0 2px 1px rgba(240,238,232,.16);
}

.foot { padding:0 clamp(1.2rem, 4vw, 4rem) 2.4rem; }
.foot__row {
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  border-top:1px solid var(--hair); padding-top:1.9rem;
}
.foot__brand {
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--disp); font-size:1.05rem; letter-spacing:.15em; color:var(--bone);
}
.foot__links { display:flex; gap:1.8rem; flex-wrap:wrap; }
.foot__links a {
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; color:var(--dim2); transition:color .25s;
}
.foot__links a:hover { color:var(--bone); }
.foot__base {
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.7rem;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute);
}

/* ── yasal ──────────────────────────────────────────────────── */

.legal { position:relative; padding:19vh 0 10vh; min-height:100svh; overflow:hidden; background:var(--void); }
.legal__aura { display:none; position:absolute; inset:0 0 auto; height:56rem; pointer-events:none; background:radial-gradient(52% 55% at 78% 8%, rgba(255,106,61,.13), transparent 72%); }
.legal__wrap { position:relative; z-index:1; width:min(48rem, 90vw); margin:0 auto; }
.legal .back { font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; color:var(--dim2); transition:color .25s; }
.legal .back:hover { color:var(--bone); }
.legal h1 { font-family:var(--disp); font-weight:400; font-size:clamp(2.6rem, 5vw, 3.8rem); margin:1.6rem 0 .5rem; letter-spacing:.015em; }
.legal .updated { font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--mute); margin-bottom:2rem; }
.legal .intro { color:var(--dim); font-size:1.14rem; margin-bottom:3rem; }
.legal section { margin-bottom:2.7rem; }
.legal h2 { font-family:var(--sans); font-weight:600; font-size:1.3rem; letter-spacing:.01em; display:flex; align-items:baseline; gap:.8rem; margin-bottom:.9rem; color:var(--bone); }
.legal h2 .n { font-family:var(--mono); font-size:.85rem; color:var(--uv2); font-weight:400; }
.legal ul { list-style:none; }
.legal li { color:var(--dim); font-size:1.08rem; padding-left:1.4rem; position:relative; margin-bottom:.75rem; }
.legal li::before { content:""; position:absolute; left:0; top:.7em; width:6px; height:1px; background:var(--uv); }
.legal a.contact-mail { color:var(--uv2); border-bottom:1px solid rgba(138,92,255,.4); }
.legal .footer__base { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--hair); margin-top:4rem; padding-top:1.5rem; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute); }
.legal .footer__base a { color:var(--dim2); }
.legal .footer__base a:hover { color:var(--bone); }

@media (min-width: 901px) {
  .legal__aura { display:block; }
  .legal { padding-top:clamp(10rem, 18vh, 13rem); }
  .legal__wrap { width:min(68rem, 86vw); }
  .legal h1 { max-width:58rem; font-size:clamp(5rem, 8vw, 8.8rem); line-height:.86; letter-spacing:0; text-wrap:balance; }
  .legal .intro { max-width:52rem; font-size:clamp(1.25rem, 1.65vw, 1.6rem); line-height:1.7; margin:3.2rem 0 6rem; }
  .legal section { display:grid; grid-template-columns:minmax(12rem, 16rem) 1fr; gap:clamp(2rem, 5vw, 5rem); padding:2.5rem 0 3rem; margin:0; border-top:1px solid rgba(240,238,232,.1); }
  .legal h2 { align-self:start; margin:0; font-size:1.08rem; line-height:1.45; }
  .legal li { font-size:1.08rem; line-height:1.75; margin-bottom:1rem; }
  .legal .footer__base { margin-top:6rem; padding-top:2rem; }
  .nav__links a[aria-current="page"] { color:var(--bone); }
  .nav__links a[aria-current="page"]::after { transform:scaleX(1); background:var(--uv); }
}

/* ── JS'siz / hareket kapalı ─────────────────────────────────── */

.js-off .boot0, .flat .boot0,
.js-off .boot, .js-off .tapring, .js-off .orb, .js-off .off, .js-off .wave,
.js-off .rings, .js-off .mring, .js-off .sq__glow, .js-off .boot0__scan,
.flat .boot, .flat .tapring, .flat .orb, .flat .off, .flat .wave,
.flat .rings, .flat .mring, .flat .sq__glow, .flat .boot0__scan { display:none; }
.js-off .lb, .flat .lb { display:none; }
.flat .rec, .flat .wave i, .flat .gallery__track { animation:none; }
.js-off .sq__beat:not(:first-child), .flat .sq__beat:not(:first-child) { opacity:0; }
.js-off .s1__phone, .flat .s1__phone { opacity:1 !important; transform:none !important; }
.js-off .dg, .flat .dg { clip-path:none !important; }
.js-off .sd__foot, .flat .sd__foot { opacity:1 !important; }

/* ── mobil ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --uv:#8A5CFF; --uv2:#B79CFF; --uvdim:rgba(138,92,255,.14); }
  body { font-size:16px; }
  .br-d { display:none; }
  .nav__links { display:none; }

  .boot0__word { font-size:18vw; }

  .s1__grid { grid-template-columns:1fr; padding-top:14vh; text-align:center; gap:3vh; }
  .s1__lead { max-width:100%; margin:0 auto; }
  .s1__sub { margin-left:auto; margin-right:auto; }
  .s1__cta { justify-content:center; }
  .s1__brand { font-size:15vw; }
  .gallery__track { animation-duration:52s; }
  .s1__motto { font-size:6vw; }
  .dev--hero { height:58svh; }
  .s1__ghost { font-size:42vw; bottom:2vh; opacity:.5; }
  .s1__hud { display:none; }

  .sq__pin .slate--in { width:max-content; max-width:92vw; }
  .dev--big { height:52svh; }
  .sq__cap { height:30svh; }
  .sq__beat h3 { font-size:clamp(2.2rem, 9.5vw, 3.2rem); }
  .sq__beat p { font-size:1.06rem; }
  .rail { display:none; }
  .rings i { width:52vw; margin:-26vw 0 0 -26vw; }
  .mring { width:70vw; margin:-35vw 0 0 -35vw; }

  .gp { flex-direction:column !important; align-items:center; padding:6vh 5vw; text-align:center; }
  .dev--gp { height:54svh; }
  .gp__txt { max-width:100%; }
  .gp__txt--r { text-align:center; }
  .gp__h { font-size:clamp(3rem, 12vw, 5.2rem); }
  .gp__ghost { font-size:26vh; opacity:.6; }

  .dg { font-size:clamp(1.9rem, 7.4vw, 3rem); }

  .duo { gap:clamp(1rem, 5vw, 2.5rem); }
  .dev--duo { height:44svh; }
  .wave { left:12%; right:12%; height:44px; margin-top:-22px; }
  .q { font-size:clamp(1.4rem, 6vw, 2rem); }
  .s5__t { font-size:clamp(1.9rem, 8vw, 2.7rem) !important; }
  .s5__quote { bottom:4vh; }

  .sk__t { font-size:clamp(5.5rem, 22vw, 9rem); }
  .dev--gal { height:32svh; }
  .foot__row, .foot__base { flex-direction:column; align-items:flex-start; }
}

/* masaüstü güvenli alanları
   Sabit film şeritleri ve nav, içerik katmanlarının üzerine binmesin. */
@media (min-width: 901px) {
  .lb--t span { right:clamp(13rem, 18vw, 18rem); }

  .sq__pin,
  .sd__pin,
  .s5__pin { padding-bottom:44px; }

  .sq__pin .slate--in,
  .sd__pin .slate--in,
  .s5__pin .slate--in {
    top:clamp(5.5rem, 11vh, 7rem);
  }

  /* Sekans telefonu merkezde olduğu için kayıt etiketi sol raya alınır. */
  .sq__pin .slate--in {
    left:clamp(1.4rem, 4vw, 4.5rem);
    transform:none;
  }

  .sq__stage .dev--big { transform:translateY(clamp(2rem, 4vh, 3rem)); }

  .sn__head { padding-top:clamp(5.5rem, 11vh, 7rem); }

  /* Ses alıntısı için telefonların altında gerçek bir nefes alanı bırak. */
  .dev--duo { height:min(56svh, 35rem); }
  .s5__quote { bottom:clamp(3.5rem, 7vh, 4.5rem); }
}

@media (min-width: 901px) and (max-width: 1200px) {
  /* Dar masaüstünde HUD telefonu kapatmasın. */
  .s1__hud {
    left:clamp(1.4rem, 4vw, 3rem);
    right:auto;
    top:13vh;
    text-align:left;
  }

  .sq__pin .slate--in {
    font-size:11px;
    letter-spacing:.16em;
  }
}

/* ── masaüstü final katmanı: iPhone çerçevesi + sinematik sekans ───────── */
@media (min-width: 901px) {
  /* Android hissini kaldıran, tek parça iPhone gövdesi. */
  .dev { --rad:clamp(2.4rem, 4.7vh, 4.8rem); }
  .dev__body {
    border-radius:var(--rad);
    background:linear-gradient(112deg, #747486 0%, #333444 3.5%, #151622 10%, #0A0B12 50%, #151622 90%, #666677 97%, #2a2b39 100%);
    box-shadow:
      0 84px 150px -48px rgba(0,0,0,.98),
      0 30px 70px -28px rgba(138,92,255,.22),
      inset 0 0 0 1px rgba(240,238,232,.28),
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -5px 8px rgba(0,0,0,.7);
  }
  .dev__body::before {
    padding:1.2px;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.72), rgba(185,192,208,.3) 24%, rgba(9,10,16,.4) 54%, rgba(255,255,255,.58) 100%);
    opacity:.95;
  }
  .dev__body::after {
    content:""; position:absolute; z-index:14; top:2.05%; left:50%;
    width:30%; height:2.65%; transform:translateX(-50%);
    border-radius:999px; background:#020207;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.1), 0 0 0 1px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.55);
    pointer-events:none;
  }
  .dev__scr {
    inset:1.7%;
    border-radius:calc(var(--rad) - .72rem);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 1px rgba(0,0,0,.6);
  }
  .dev__scr::after {
    content:""; position:absolute; z-index:12; left:50%; bottom:1.15%;
    width:27%; height:4px; transform:translateX(-50%);
    border-radius:999px; background:rgba(255,255,255,.82);
    box-shadow:0 0 5px rgba(255,255,255,.32); pointer-events:none;
  }
  .dev__notch { display:none; }
  .dev__glare { inset:1.7%; border-radius:calc(var(--rad) - .72rem); opacity:.65; }
  .dev__btn--r1 { right:-1.9%; width:1.9%; border-radius:0 4px 4px 0; }
  .dev__btn--l1, .dev__btn--l2 { left:-1.9%; width:1.9%; border-radius:4px 0 0 4px; }

  /* 2. sayfa: ekran büyür, merkezde sabitlenir, altyazı kenarlardan akar. */
  .sq__pin { padding-top:56px; padding-bottom:56px; }
  .sq__stage .dev--big {
    height:min(62svh, 42rem);
    transform:translateY(clamp(1.5rem, 3vh, 2.5rem));
    filter:drop-shadow(0 24px 42px rgba(138,92,255,.14));
  }
  .sq__cap { height:24svh; }
  .sq__beat { position:relative; text-shadow:0 10px 32px rgba(0,0,0,.7); }
  .rail { right:clamp(2rem, 4vw, 5rem); }
  .rail li { color:rgba(185,192,208,.62); font-size:12.5px; }
  .rail li.on { color:var(--bone); }

  /* Gece sahneleri: teknik etiket yerine metinsiz, optik derinlik katmanı. */
  .gp::after {
    content:""; position:absolute; z-index:1; top:50%; width:min(30rem, 27vw); aspect-ratio:1;
    transform:translateY(-50%) scale(.92); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 45% 45%, rgba(255,176,138,.15), rgba(255,106,61,.055) 36%, transparent 69%);
    filter:blur(10px); opacity:.62;
  }
  .gp--1::after, .gp--3::after, .gp--5::after { right:4vw; }
  .gp--2::after, .gp--4::after { left:4vw; background:radial-gradient(circle at 55% 45%, rgba(240,238,232,.1), rgba(255,106,61,.05) 38%, transparent 70%); }
  .gp::before { opacity:.72; }
  .gp__ghost { opacity:.8; -webkit-text-stroke-color:rgba(185,192,208,.11); }
  .gp__phone { filter:drop-shadow(0 26px 42px rgba(0,0,0,.46)); }

  /* Sekans 04: daha büyük ikili mockup, daha kuvvetli ses dalgası. */
  .s5__pin { padding-bottom:56px; }
  .duo { gap:clamp(2rem, 8vw, 9rem); margin-top:-3vh; }
  .dev--duo { height:min(62svh, 39rem); }
  .s5__quote { bottom:clamp(4.4rem, 8vh, 6rem); }
  .wave { left:15%; right:15%; top:43%; height:82px; filter:drop-shadow(0 0 18px rgba(138,92,255,.34)); }
  .wave i { background:linear-gradient(180deg, rgba(183,156,255,.98), rgba(255,92,134,.72)); }
  .q__meta { color:rgba(185,192,208,.74); }

  .foot__base { color:rgba(185,192,208,.7); font-size:12px; letter-spacing:.12em; }
}

@media (min-width: 901px) and (max-width: 1200px) {
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) .gallery__track,
  html:not(.motion-forced) .rec,
  html:not(.motion-forced) .wave i { animation:none !important; }
}

/* ── FINAL REVISION / DESKTOP CINEMA MASTER ───────────────────────────── */
@media (min-width: 901px) {
  .nav__inner { min-height:56px; padding-top:.45rem; padding-bottom:.45rem; }
  .nav__pill {
    margin-right:.5rem; padding:.45rem 1.15rem;
    font-size:11px; line-height:1.2;
    border-color:rgba(185,192,208,.26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.22);
  }

  .hero-atmosphere {
    position:absolute; inset:0; z-index:2; width:100%; height:100%;
    pointer-events:none; opacity:.82; mix-blend-mode:screen;
  }
  .hero-color-bends {
    position:absolute; inset:-8% -5%; z-index:1; pointer-events:none;
    overflow:hidden; opacity:.78; mix-blend-mode:screen;
    mask-image:radial-gradient(ellipse 72% 84% at 73% 48%, #000 0%, rgba(0,0,0,.92) 44%, transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 72% 84% at 73% 48%, #000 0%, rgba(0,0,0,.92) 44%, transparent 100%);
  }
  .hero-color-bends canvas { display:block; width:100%; height:100%; }
  .s1::after {
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(7,6,16,.76) 0%, rgba(7,6,16,.2) 42%, transparent 66%),
      radial-gradient(ellipse at 72% 48%, transparent 34%, rgba(7,6,16,.18) 76%, rgba(7,6,16,.58) 100%);
  }
  .s1__rays { position:absolute; inset:-20%; z-index:2; pointer-events:none; overflow:hidden; }
  .s1__rays i {
    position:absolute; top:-20%; width:16vw; height:150%; opacity:.15;
    background:linear-gradient(180deg, rgba(205,194,255,.34), rgba(138,92,255,.08) 52%, transparent 88%);
    transform:rotate(17deg) translate3d(0,-8%,0); transform-origin:top center;
    filter:blur(18px); animation:heroRay 9s cubic-bezier(.45,0,.25,1) infinite alternate;
  }
  .s1__rays i:nth-child(1) { left:49%; animation-delay:-2s; }
  .s1__rays i:nth-child(2) { left:67%; width:9vw; opacity:.11; animation-delay:-6s; }
  .s1__rays i:nth-child(3) { left:25%; width:11vw; opacity:.08; animation-delay:-4s; }
  .s1__fog {
    position:absolute; z-index:2; left:-15%; right:-15%; bottom:-22%; height:58%; pointer-events:none;
    background:
      radial-gradient(40% 70% at 25% 50%, rgba(138,92,255,.13), transparent 72%),
      radial-gradient(42% 72% at 72% 48%, rgba(185,192,208,.08), transparent 74%);
    filter:blur(28px); opacity:.8; animation:heroFog 12s cubic-bezier(.45,0,.25,1) infinite alternate;
  }
  .s1__grid { perspective:1500px; }
  .s1__phone { filter:drop-shadow(0 42px 72px rgba(0,0,0,.52)); }
  .s1__brand { text-shadow:0 24px 60px rgba(0,0,0,.58); }
  .s1.is-live .dev--hero .dev__body { animation:heroDeviceFloat 6.8s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .s1.is-live .dev--hero .dev__glare { animation:heroReflection 5.4s cubic-bezier(.45,0,.25,1) infinite alternate; }

  @keyframes heroRay {
    from { transform:rotate(13deg) translate3d(-4%,-10%,0) scaleX(.82); opacity:.07; }
    to { transform:rotate(20deg) translate3d(9%,2%,0) scaleX(1.14); opacity:.21; }
  }
  @keyframes heroFog {
    from { transform:translate3d(-3%,0,0) scale(1); opacity:.56; }
    to { transform:translate3d(4%,-5%,0) scale(1.08); opacity:.9; }
  }
  @keyframes heroDeviceFloat {
    from { transform:translate3d(0,0,0) rotateZ(-.15deg); }
    to { transform:translate3d(0,-8px,0) rotateZ(.18deg); }
  }
  @keyframes heroReflection {
    from { transform:translate3d(-4%,0,0); opacity:.38; }
    to { transform:translate3d(5%,0,0); opacity:.78; }
  }
  /* Complete sequence redesign: centered device, alternating side narratives. */
  .sq__pin { padding:0; isolation:isolate; }
  .sq__pin::before {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(34% 58% at 50% 48%, rgba(138,92,255,.13), transparent 72%),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0/8vw 100%;
  }
  .sq__pin .slate--in { top:5.2rem; }
  .sq__stage { position:absolute; inset:56px 0 56px; z-index:5; }
  .sq__stage .dev--big {
    height:min(78svh, 50rem); transform:none;
    filter:drop-shadow(0 48px 90px rgba(0,0,0,.72)) drop-shadow(0 0 44px rgba(138,92,255,.16));
  }
  .sq__cap { position:absolute; inset:0; z-index:7; height:auto; display:block; padding:0; pointer-events:none; }
  .sq__beat {
    position:absolute; top:50%; width:min(30vw, 28rem); max-width:none;
    translate:0 -50%; text-wrap:balance;
  }
  .sq__beat:nth-child(odd) { left:5vw; text-align:right; }
  .sq__beat:nth-child(even) { right:5vw; text-align:left; }
  .sq__tc { font-size:12px; letter-spacing:.32em; margin-bottom:1.25rem; }
  .sq__beat h3 { font-size:clamp(3.4rem, 5.8vw, 6.8rem); line-height:.88; margin-bottom:1.15rem; }
  .sq__beat p { max-width:29rem; font-size:clamp(1rem, 1.15vw, 1.25rem); }
  .sq__beat:nth-child(odd) p { margin-left:auto; }
  .rail {
    left:50%; right:auto; top:auto; bottom:4.35rem; transform:translateX(-50%);
    flex-direction:row; gap:clamp(1rem, 2.1vw, 2.5rem); width:max-content;
  }
  .rail li { padding-left:0; padding-top:1rem; font-size:9px; letter-spacing:.14em; }
  .rail li::before { left:50%; top:0; margin:0 0 0 -2.5px; }
  .rings { top:50%; }
  .mring { top:50%; }

  /* Emotional full-screen bridge after the match sequence. */
  .se { position:relative; background:#05040d; }
  .se__pin {
    position:relative; height:100svh; overflow:hidden; display:flex;
    align-items:center; justify-content:center; flex-direction:column; text-align:center;
    padding:56px 6vw;
  }
  .se__pin .slate--in { position:absolute; top:5.4rem; left:50%; transform:translateX(-50%); z-index:5; }
  .se__halo {
    position:absolute; z-index:1; width:min(78vw, 76rem); aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(138,92,255,.2), rgba(138,92,255,.055) 35%, transparent 69%);
    filter:blur(10px); opacity:.9;
  }
  .se__line {
    position:absolute; z-index:2; left:12vw; right:12vw; top:50%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(138,92,255,.8), rgba(240,238,232,.55), rgba(138,92,255,.8), transparent);
    box-shadow:0 0 24px rgba(138,92,255,.7); transform:scaleX(0);
  }
  .se__copy { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; }
  .se__copy span {
    font-family:var(--serif); font-style:italic; font-size:clamp(3rem, 6vw, 7.2rem);
    line-height:1; color:var(--chrome); clip-path:inset(0 100% 0 0);
  }
  .se__copy strong {
    font-family:var(--disp); font-weight:400; font-size:clamp(5.4rem, 11.5vw, 14rem);
    line-height:.82; letter-spacing:.005em; color:var(--bone); margin-top:1.1rem;
    clip-path:inset(0 100% 0 0); text-shadow:0 28px 80px rgba(0,0,0,.72);
  }
  .se__sub { position:relative; z-index:3; margin-top:3.2rem; color:var(--dim); font-size:1.15rem; opacity:0; }

  /* Night chapters gain active signal movement without adding clutter. */
  .gp.is-live::after { animation:signalFloat 4.8s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .gp.is-live .gp__ghost { animation:ghostBreath 6.4s cubic-bezier(.45,0,.25,1) infinite alternate; }
  @keyframes signalFloat {
    from { transform:translate3d(0,-50%,0); opacity:.48; }
    to { transform:translate3d(0,-54%,0); opacity:.92; }
  }
  @keyframes ghostBreath {
    from { transform:translate3d(0,-50%,0) scale(.98); opacity:.48; }
    to { transform:translate3d(0,-52%,0) scale(1.025); opacity:.84; }
  }

  /* Every finale device behaves like a live product, not a poster. */
  .gallery__item .dev__scr::before {
    content:"MELİNA · yeni mesaj"; position:absolute; z-index:11; left:7%; right:7%; top:7%;
    padding:.58rem .7rem; border:1px solid rgba(255,255,255,.14); border-radius:12px;
    background:rgba(13,12,24,.82); backdrop-filter:blur(12px);
    color:rgba(240,238,232,.88); font-family:var(--mono); font-size:8px; letter-spacing:.08em;
    opacity:0; transform:translate3d(0,-14px,0) scale(.96);
  }
  .gallery__item:nth-child(3n+2) .dev__scr::before { content:"EŞLEŞME BULUNDU · 02:48"; }
  .gallery__item:nth-child(3n) .dev__scr::before { content:"TAKIM HAZIR · 5/5"; }
  .gallery.is-live .gallery__item .scr { animation:screenDrift 7s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .gallery.is-live .gallery__item .dev__scr::before { animation:liveNotice 6.2s cubic-bezier(.22,1,.36,1) infinite; }
  .gallery.is-live .gallery__item .dev--gal { animation:galleryDeviceA 5.8s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .gallery.is-live .gallery__item:nth-child(3n+2) .dev--gal { animation-name:galleryDeviceB; animation-duration:6.6s; animation-delay:-3.1s; }
  .gallery.is-live .gallery__item:nth-child(3n) .dev--gal { animation-name:galleryDeviceC; animation-duration:5.2s; animation-delay:-1.8s; }
  .gallery.is-live .gallery__item:nth-child(2n) .scr { animation-delay:-3.2s; }
  .gallery.is-live .gallery__item:nth-child(3n) .dev__scr::before { animation-delay:-2.1s; }
  @keyframes screenDrift {
    from { transform:translate3d(0,0,0) scale(1); }
    to { transform:translate3d(0,-.65%,0) scale(1.006); }
  }
  @keyframes liveNotice {
    0%, 15% { opacity:0; transform:translate3d(0,-14px,0) scale(.96); }
    24%, 62% { opacity:1; transform:translate3d(0,0,0) scale(1); }
    72%, 100% { opacity:0; transform:translate3d(0,-7px,0) scale(.985); }
  }
  @keyframes galleryDeviceA {
    from { transform:translate3d(0,10px,0) rotateY(-3deg) rotateZ(-.35deg); }
    to { transform:translate3d(0,-13px,0) rotateY(2deg) rotateZ(.45deg); }
  }
  @keyframes galleryDeviceB {
    from { transform:translate3d(0,-7px,0) rotateY(3deg) rotateZ(.4deg); }
    to { transform:translate3d(0,14px,0) rotateY(-2deg) rotateZ(-.5deg); }
  }
  @keyframes galleryDeviceC {
    from { transform:translate3d(0,12px,0) rotateX(-1deg) rotateZ(.3deg); }
    to { transform:translate3d(0,-10px,0) rotateX(1.2deg) rotateZ(-.4deg); }
  }

  .dev__body, .dev__scr, .scr { backface-visibility:hidden; transform-style:preserve-3d; }
  .scr { image-rendering:auto; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .lb--t span { display:none; }
  .sq__beat { width:27vw; }
  .sq__beat:nth-child(odd) { left:3vw; }
  .sq__beat:nth-child(even) { right:3vw; }
  .sq__beat h3 { font-size:clamp(2.8rem, 5vw, 4.6rem); }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) .s1__rays i,
  html:not(.motion-forced) .s1__fog,
  html:not(.motion-forced) .gp.is-live::after,
  html:not(.motion-forced) .gp.is-live .gp__ghost,
  html:not(.motion-forced) .gallery.is-live .gallery__item .scr,
  html:not(.motion-forced) .gallery.is-live .gallery__item .dev__scr::before,
  html:not(.motion-forced) .gallery.is-live .gallery__item .dev--gal {
    animation:none !important;
  }
  html:not(.motion-forced) .se__copy span,
  html:not(.motion-forced) .se__copy strong { clip-path:none !important; }
  html:not(.motion-forced) .se__sub { opacity:1 !important; }
}

/* ── DESKTOP · MINERAL NIGHT / LIVE PRODUCT SYSTEM ─────────────────────
   Refero'nun katman ritmi, React Bits'in kontrollü shader yaklaşımı,
   Skiper/Vengeance'in canlı durum ve sinyal desenleri; mevcut yapının üstünde. */
@media (min-width: 901px) {
  :root {
    --void:#06110f;
    --void2:#091816;
    --void3:#10231f;
    --bone:#f4ead9;
    --dim:#c7beaf;
    --dim2:#9e988c;
    --mute:#77766f;
    --chrome:#ded5c7;
    --chrome2:#a9a69f;
    --uv:#f2a45f;
    --uv2:#ffc27f;
    --uvdim:rgba(242,164,95,.14);
    --rose:#55d3b2;
    --rose2:#8be4c8;
    --hair:rgba(244,234,217,.09);
    --hair2:rgba(244,234,217,.19);
    --ease-enter:cubic-bezier(.22,1,.36,1);
    --ease-move:cubic-bezier(.25,1,.5,1);
  }

  .boot0 { background:radial-gradient(120% 120% at 50% 44%,#10231f 0%,#06110f 62%); }
  .boot0__grid { background:linear-gradient(rgba(85,211,178,.055) 1px,transparent 1px) 0 0/100% 5.2vh,linear-gradient(90deg,rgba(85,211,178,.055) 1px,transparent 1px) 0 0/5.2vh 100%; }
  .boot0__ignite { background:radial-gradient(42% 38% at 50% 50%,rgba(85,211,178,.2),rgba(242,164,95,.05) 48%,transparent 70%); }
  .boot0__line,.boot0__under { box-shadow:0 0 20px rgba(85,211,178,.55); }
  .boot0__word .bl { background-image:linear-gradient(100deg,#606a65 0%,#f4ead9 22%,#c7d8ce 40%,#55d3b2 52%,#ffc27f 66%,#606a65 100%); }
  .boot0__flash { background:radial-gradient(60% 55% at 50% 46%,rgba(244,234,217,.94),rgba(85,211,178,.38) 42%,rgba(242,164,95,.12) 58%,transparent 72%); }

  html, body { background:var(--void); }
  body { color:var(--bone); }
  ::selection { background:var(--uv); color:#06110f; }
  :focus-visible { outline-color:var(--rose); }

  /* Floating glass island: pill and frame have independent breathing room. */
  .nav { top:.8rem; padding:0 clamp(1rem,2vw,2rem); }
  .nav__inner {
    position:relative; width:min(94rem,100%); margin:0 auto; min-height:58px;
    padding:.48rem .62rem .48rem 1.2rem;
    border-radius:20px;
    background:linear-gradient(180deg,rgba(16,35,31,.84),rgba(6,17,15,.74));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(244,234,217,.09), 0 18px 48px rgba(1,8,7,.28);
    backdrop-filter:blur(18px) saturate(125%);
  }
  .nav__inner::before {
    content:""; position:absolute; inset:1px; border-radius:19px; pointer-events:none;
    background:linear-gradient(105deg,rgba(139,228,200,.08),transparent 28%,transparent 70%,rgba(242,164,95,.08));
  }
  .nav__pill {
    position:relative; margin:0; padding:.58rem 1.12rem; min-width:9.8rem; text-align:center;
    color:var(--bone); border-color:rgba(242,164,95,.28);
    background:linear-gradient(180deg,rgba(242,164,95,.12),rgba(242,164,95,.035));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(1,8,7,.2);
  }
  .nav__progress {
    position:absolute; left:1.2rem; right:1.2rem; bottom:0; height:1px;
    transform:scaleX(0); transform-origin:left center;
    background:linear-gradient(90deg,var(--rose),var(--uv),transparent);
    box-shadow:0 0 12px rgba(85,211,178,.38); pointer-events:none;
  }
  .brand b { color:var(--bone); }
  .rec { background:var(--rose); box-shadow:0 0 13px rgba(85,211,178,.72); }
  .nav__links a { position:relative; color:var(--dim2); transition:color 180ms var(--ease-enter); }
  .nav__links a::after {
    content:""; position:absolute; left:0; right:.16em; bottom:-.35rem; height:1px;
    transform:scaleX(0); transform-origin:right; background:var(--rose);
    transition:transform 220ms var(--ease-enter);
  }

  .slate { color:rgba(222,213,199,.72); font-size:12.5px; letter-spacing:.22em; }
  .slate i { background:var(--rose); box-shadow:0 0 12px rgba(85,211,178,.6); }

  .store {
    position:relative; border:0; border-radius:18px; padding:1rem 1.4rem;
    background:linear-gradient(145deg,rgba(244,234,217,.1),rgba(16,35,31,.72));
    box-shadow:inset 0 0 0 1px rgba(244,234,217,.14), inset 0 1px 0 rgba(255,255,255,.12), 0 18px 50px rgba(1,8,7,.28);
    transition:transform 180ms var(--ease-enter), box-shadow 220ms var(--ease-enter), background-color 200ms ease;
  }
  .store::after {
    content:"↗"; display:grid; place-items:center; width:2rem; height:2rem; margin-left:.3rem;
    border-radius:50%; color:var(--bone); background:rgba(244,234,217,.08);
    box-shadow:inset 0 0 0 1px rgba(244,234,217,.12);
    transition:transform 180ms var(--ease-enter), background-color 180ms ease;
  }
  .store em { color:var(--uv2); }
  .store:active { transform:translateY(1px) scale(.98); }

  /* Consistent machined iPhone lighting. */
  .dev__body {
    background:linear-gradient(112deg,#8b8b86 0%,#3c433f 3%,#15211e 10%,#050a09 50%,#18231f 90%,#817d74 97%,#2d332f 100%);
    box-shadow:0 92px 170px -54px rgba(0,5,4,.96), 0 34px 72px -32px rgba(85,211,178,.15), inset 0 0 0 1px rgba(244,234,217,.3), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -6px 9px rgba(0,0,0,.72);
  }
  .dev__body::before {
    background:linear-gradient(135deg,rgba(255,252,244,.76),rgba(139,228,200,.28) 26%,rgba(5,10,9,.46) 55%,rgba(255,194,127,.52) 100%);
  }
  .dev__glare { background:linear-gradient(122deg,transparent 30%,rgba(244,234,217,.045) 44%,rgba(255,255,255,.13) 50%,transparent 61%); }
  .dev__scr { box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.72); }

  /* HERO: petrol depth, mint social signal, amber focus. */
  .s1 {
    background:
      radial-gradient(70% 82% at 74% 48%,rgba(20,70,58,.28),transparent 67%),
      radial-gradient(50% 58% at 12% 90%,rgba(242,164,95,.08),transparent 70%),
      linear-gradient(145deg,#06110f 0%,#071411 55%,#040b0a 100%);
  }
  .s1__bg { background:radial-gradient(58% 60% at 74% 52%,rgba(85,211,178,.11),transparent 62%),radial-gradient(42% 46% at 20% 72%,rgba(242,164,95,.065),transparent 68%); }
  .s1__grid-bg {
    opacity:.42;
    background:linear-gradient(rgba(139,228,200,.035) 1px,transparent 1px) 0 0/100% 7vh,linear-gradient(90deg,rgba(139,228,200,.035) 1px,transparent 1px) 0 0/7vh 100%;
  }
  .hero-color-bends { opacity:.7; mix-blend-mode:screen; }
  .hero-atmosphere { opacity:.66; }
  .s1::after { background:linear-gradient(90deg,rgba(6,17,15,.86) 0%,rgba(6,17,15,.28) 42%,transparent 66%),radial-gradient(ellipse at 72% 48%,transparent 32%,rgba(6,17,15,.16) 72%,rgba(6,17,15,.62) 100%); }
  .s1__rays i { background:linear-gradient(180deg,rgba(139,228,200,.28),rgba(85,211,178,.055) 52%,transparent 88%); }
  .s1__fog { background:radial-gradient(40% 70% at 25% 50%,rgba(85,211,178,.1),transparent 72%),radial-gradient(42% 72% at 72% 48%,rgba(242,164,95,.07),transparent 74%); }
  .s1__ghost { -webkit-text-stroke-color:rgba(139,228,200,.08); }
  .s1__brand { line-height:.98; padding-block:.06em; text-wrap:nowrap; }
  .s1__brand .bl--x { color:var(--uv); text-shadow:0 0 34px rgba(242,164,95,.26); }
  .s1__motto { color:var(--chrome); }
  .s1__sub em { color:var(--rose2); }
  .s1__phone::after { background:radial-gradient(ellipse at 50% 0%,rgba(85,211,178,.2),rgba(242,164,95,.07) 42%,transparent 72%); }

  .device-live { position:absolute; z-index:14; pointer-events:none; font-family:var(--mono); }
  /* MATCHING: one centered object, each state receives its own physical signal. */
  .sq { background:#040c0b; }
  .sq__pin::before { background:radial-gradient(34% 58% at 50% 48%,rgba(85,211,178,.115),transparent 72%),linear-gradient(90deg,rgba(139,228,200,.018) 1px,transparent 1px) 0 0/8vw 100%; }
  .sq__pin::after {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
    background:linear-gradient(115deg,transparent 20%,rgba(85,211,178,.055) 46%,transparent 47%),linear-gradient(65deg,transparent 55%,rgba(242,164,95,.045) 76%,transparent 77%);
    transition:opacity 260ms var(--ease-enter), transform 420ms var(--ease-move);
  }
  .sq__glow--scan { background:radial-gradient(60% 52% at 50% 44%,rgba(85,211,178,.2),transparent 70%); }
  .sq__glow--found { background:radial-gradient(62% 54% at 50% 44%,rgba(242,164,95,.18),rgba(85,211,178,.06) 52%,transparent 74%); }
  .sq__glow--match { background:radial-gradient(46% 42% at 38% 44%,rgba(85,211,178,.16),transparent 68%),radial-gradient(46% 42% at 62% 44%,rgba(242,164,95,.16),transparent 68%); }
  .rings i { border-color:rgba(85,211,178,.38); }
  .mring--i { border-color:rgba(85,211,178,.58); }
  .mring--p { border-color:rgba(242,164,95,.58); }
  .sq__stage .dev--big { filter:drop-shadow(0 52px 96px rgba(0,5,4,.76)) drop-shadow(0 0 48px rgba(85,211,178,.14)); }
  .sq__beat { padding-block:.5rem; }
  .sq__beat::before {
    content:"←"; position:absolute; top:-.32em; right:-.05em; z-index:-1;
    font-family:var(--disp); font-size:clamp(8rem,14vw,15rem); line-height:1; color:rgba(139,228,200,.05);
  }
  .sq__beat:nth-child(even)::before { content:"→"; right:auto; left:-.05em; color:rgba(242,164,95,.055); }
  .sq__beat h3 { line-height:.94; padding-block:.04em; }
  .sq__beat:nth-child(odd) h3 { text-shadow:0 0 42px rgba(85,211,178,.12); }
  .sq__beat:nth-child(even) h3 { text-shadow:0 0 42px rgba(242,164,95,.12); }
  .rail li::before { background:var(--mute); }
  .rail li.on::before { background:var(--uv); box-shadow:0 0 11px rgba(242,164,95,.72); }
  .device-live--sequence { inset:0; overflow:hidden; border-radius:inherit; opacity:.8; }
  .device-live--sequence .device-live__scan {
    position:absolute; left:4%; right:4%; top:12%; height:1px;
    background:linear-gradient(90deg,transparent,var(--rose),transparent); box-shadow:0 0 13px rgba(85,211,178,.72);
    opacity:0;
  }
  .device-live--sequence > span { position:absolute; width:6px; height:6px; border:1px solid rgba(139,228,200,.56); border-radius:50%; opacity:0; }
  .device-live--sequence > span:nth-of-type(1) { left:18%; top:34%; }
  .device-live--sequence > span:nth-of-type(2) { right:17%; top:49%; }
  .device-live--sequence > span:nth-of-type(3) { left:32%; bottom:24%; }
  .device-live--sequence b { position:absolute; right:6%; bottom:5%; color:rgba(139,228,200,.72); font-size:7px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; opacity:0; }
  #sqPin[data-stage="1"] .device-live__scan { animation:sequenceScan 2.4s var(--ease-move) infinite; }
  #sqPin[data-stage="1"] .device-live--sequence > span,
  #sqPin[data-stage="2"] .device-live--sequence > span { animation:sequencePing 2.2s var(--ease-enter) infinite; }
  #sqPin[data-stage="3"] .device-live--sequence b,
  #sqPin[data-stage="4"] .device-live--sequence b { opacity:1; }
  @keyframes sequenceScan { 0% { opacity:0; transform:translate3d(0,0,0); } 18% { opacity:1; } 82% { opacity:.8; } 100% { opacity:0; transform:translate3d(0,56vh,0); } }
  @keyframes sequencePing { 0%,20% { opacity:0; transform:scale(.94); } 42%,70% { opacity:1; transform:scale(1.6); } 100% { opacity:0; transform:scale(2.1); } }

  /* Emotional bridge: large but fully contained typography. */
  .se { background:#06110f; }
  .se__halo { background:radial-gradient(circle,rgba(85,211,178,.18),rgba(242,164,95,.055) 38%,transparent 69%); }
  .se__line { background:linear-gradient(90deg,transparent,rgba(85,211,178,.75),rgba(244,234,217,.55),rgba(242,164,95,.72),transparent); box-shadow:0 0 24px rgba(85,211,178,.48); }
  .se__copy { width:100%; overflow:visible; }
  .se__copy span { line-height:1.08; padding:.08em .1em; color:var(--chrome); }
  .se__copy strong {
    max-width:92vw; white-space:nowrap; font-size:clamp(4rem,8.7vw,9.8rem);
    line-height:.94; padding:.06em .04em .1em; color:var(--bone);
  }

  /* NIGHT: every chapter receives depth and a different live product behavior. */
  .sn { background:var(--void2); }
  .sn__head::before {
    content:""; position:absolute; inset:0 0 -5rem; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg,var(--void2) 0%,rgba(9,24,22,.94) 42%,rgba(9,24,22,.56) 70%,transparent 100%);
  }
  .gp {
    padding-top:12vh; padding-bottom:4vh;
    background-image:linear-gradient(90deg,rgba(139,228,200,.022) 1px,transparent 1px),linear-gradient(rgba(139,228,200,.016) 1px,transparent 1px);
    background-size:10vw 100%,100% 10vh;
  }
  .gp--1::before { background:radial-gradient(58% 68% at 18% 52%,rgba(85,211,178,.1),transparent 65%); }
  .gp--2::before { background:radial-gradient(58% 68% at 82% 52%,rgba(242,164,95,.09),transparent 65%); }
  .gp--3::before { background:radial-gradient(80% 80% at 50% 60%,rgba(85,211,178,.09),transparent 65%); }
  .gp--4::before { background:radial-gradient(58% 68% at 82% 40%,rgba(242,164,95,.09),transparent 60%); }
  .gp--5::before { background:radial-gradient(58% 68% at 18% 60%,rgba(85,211,178,.085),transparent 65%); }
  .gp::after { background:radial-gradient(circle at 45% 45%,rgba(139,228,200,.14),rgba(85,211,178,.045) 38%,transparent 70%); }
  .gp--2::after,.gp--4::after { background:radial-gradient(circle at 55% 45%,rgba(255,194,127,.13),rgba(242,164,95,.045) 38%,transparent 70%); }
  .gp__ghost { opacity:.68; -webkit-text-stroke-color:rgba(139,228,200,.09); }
  .gp__h { max-width:100%; font-size:clamp(3.4rem,6.2vw,7rem); line-height:.96; padding-block:.08em; overflow:visible; text-wrap:balance; }
  .gp__ts { color:var(--rose2); }
  .gp--2 .gp__ts,.gp--4 .gp__ts { color:var(--uv2); }
  .gp__p { color:var(--dim); text-wrap:pretty; }
  .gp__phone::after { background:radial-gradient(ellipse at 50% 0%,rgba(85,211,178,.14),transparent 70%); }
  .gp--2 .gp__phone::after,.gp--4 .gp__phone::after { background:radial-gradient(ellipse at 50% 0%,rgba(242,164,95,.12),transparent 70%); }
  .device-live--night { inset:0; overflow:hidden; border-radius:inherit; }
  .device-live--night > div { position:absolute; opacity:0; }
  .gp.is-live .device-live--night > div { opacity:1; }
  .live-radar { left:50%; top:42%; width:58%; aspect-ratio:1; transform:translate(-50%,-50%); }
  .live-radar i { position:absolute; inset:18%; border:1px solid rgba(139,228,200,.46); border-radius:50%; opacity:0; }
  .live-radar i:nth-child(2) { inset:5%; animation-delay:-.7s; }
  .live-radar i:nth-child(3) { inset:-9%; animation-delay:-1.4s; }
  .live-radar b { position:absolute; left:50%; bottom:-10%; transform:translateX(-50%); width:max-content; color:var(--rose2); font-size:7px; letter-spacing:.1em; font-weight:400; }
  .gp.is-live .live-radar i { animation:nightRadar 2.2s var(--ease-enter) infinite; }
  .live-reaction { right:6%; bottom:9%; display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:12px; background:rgba(6,17,15,.86); box-shadow:inset 0 0 0 1px rgba(255,194,127,.2); transform:translate3d(0,14px,0); }
  .gp.is-live .live-reaction { animation:nightRise 5.4s var(--ease-enter) infinite; }
  .live-reaction span,.live-squad b,.live-typing span,.live-affinity span { color:rgba(244,234,217,.74); font-size:7px; letter-spacing:.08em; font-weight:400; }
  .live-reaction b { color:var(--uv2); font-size:9px; }
  .live-squad { left:8%; right:8%; bottom:8%; display:flex; align-items:center; gap:4px; padding:.55rem .65rem; border-radius:12px; background:rgba(6,17,15,.86); box-shadow:inset 0 0 0 1px rgba(139,228,200,.18); }
  .live-squad i { width:15px; height:15px; border-radius:5px; background:linear-gradient(135deg,rgba(139,228,200,.55),rgba(85,211,178,.12)); transform:scale(.92); }
  .live-squad b { margin-left:auto; color:var(--rose2); }
  .gp.is-live .live-squad i { animation:squadReady 3.6s var(--ease-enter) infinite; }
  .live-squad i:nth-child(2){animation-delay:-.25s}.live-squad i:nth-child(3){animation-delay:-.5s}.live-squad i:nth-child(4){animation-delay:-.75s}.live-squad i:nth-child(5){animation-delay:-1s}
  .live-typing { left:8%; bottom:9%; display:flex; align-items:center; gap:4px; padding:.58rem .7rem; border-radius:14px; background:rgba(6,17,15,.88); box-shadow:inset 0 0 0 1px rgba(255,194,127,.18); }
  .live-typing i { width:4px; height:4px; border-radius:50%; background:var(--uv2); }
  .live-typing span { margin-left:.35rem; }
  .gp.is-live .live-typing i { animation:typingDot .9s var(--ease-enter) infinite alternate; }
  .live-typing i:nth-child(2){animation-delay:.14s}.live-typing i:nth-child(3){animation-delay:.28s}
  .live-affinity { left:7%; right:7%; bottom:8%; display:grid; grid-template-columns:1fr auto; gap:.35rem; padding:.62rem .7rem; border-radius:13px; background:rgba(6,17,15,.88); box-shadow:inset 0 0 0 1px rgba(139,228,200,.2); }
  .live-affinity b { color:var(--rose2); font-size:9px; }
  .live-affinity i { grid-column:1/3; height:2px; transform:scaleX(.08); transform-origin:left; background:linear-gradient(90deg,var(--rose),var(--uv)); }
  .gp.is-live .live-affinity i { animation:affinityFill 3.8s var(--ease-enter) infinite; }
  @keyframes nightRadar { 0%{opacity:0;transform:scale(.76)} 25%{opacity:.8} 100%{opacity:0;transform:scale(1.25)} }
  @keyframes nightRise { 0%,14%{opacity:0;transform:translate3d(0,14px,0) scale(.97)} 24%,72%{opacity:1;transform:translate3d(0,0,0) scale(1)} 84%,100%{opacity:0;transform:translate3d(0,-7px,0) scale(.99)} }
  @keyframes squadReady { 0%,25%{opacity:.42;transform:scale(.9)} 45%,80%{opacity:1;transform:scale(1)} 100%{opacity:.55;transform:scale(.94)} }
  @keyframes typingDot { from{opacity:.25;transform:translate3d(0,2px,0)} to{opacity:1;transform:translate3d(0,-2px,0)} }
  @keyframes affinityFill { 0%,15%{transform:scaleX(.08);opacity:.45} 55%,78%{transform:scaleX(.92);opacity:1} 100%{transform:scaleX(.92);opacity:.35} }

  /* Human story and voice bridge share the same mineral lighting. */
  .sd { background:#050e0c; }
  .sd__atmos { background:radial-gradient(48% 44% at 50% 44%,rgba(85,211,178,.12),transparent 70%),radial-gradient(40% 40% at 72% 78%,rgba(242,164,95,.065),transparent 70%); }
  .sd__beam { background:linear-gradient(90deg,transparent,rgba(85,211,178,.06) 45%,rgba(242,164,95,.045) 55%,transparent); }
  .dg { line-height:1.16; padding:.06em .08em; overflow:visible; text-wrap:balance; }
  .dg[data-i="2"] .hl { color:var(--uv2); }
  .sd__foot em { color:var(--rose2); }

  .s5 { background:#040b0a; }
  .wave {
    left:50%; right:auto; width:min(20vw,16rem); transform:translateX(-50%);
    justify-content:center; gap:clamp(4px,.5vw,7px);
    filter:drop-shadow(0 0 20px rgba(85,211,178,.32));
  }
  .wave i {
    flex:0 0 clamp(4px,.42vw,7px);
    background:linear-gradient(180deg,rgba(139,228,200,.96),rgba(242,164,95,.74));
    animation-timing-function:cubic-bezier(.45,0,.25,1);
  }
  .orb__e { background:radial-gradient(50% 50% at 50% 50%,rgba(242,164,95,.66),rgba(242,164,95,.15) 48%,transparent 72%); }
  .orb__i { background:radial-gradient(50% 50% at 50% 50%,rgba(85,211,178,.68),rgba(85,211,178,.16) 48%,transparent 72%); }
  .s5__t { line-height:1.04; padding-block:.05em; }
  .s5__t em { color:var(--rose2); }
  .device-live--voice { left:7%; right:7%; top:7%; min-height:2.2rem; border-radius:13px; background:rgba(6,17,15,.88); box-shadow:inset 0 0 0 1px rgba(139,228,200,.17); opacity:0; }
  .voice-call { display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; transform:translate3d(0,-10px,0); }
  .voice-call i { width:7px; height:7px; border-radius:50%; background:var(--rose); box-shadow:0 0 10px rgba(85,211,178,.72); }
  .voice-call span,.voice-receive span { color:rgba(244,234,217,.76); font-size:7px; letter-spacing:.08em; }
  .voice-receive { display:flex; align-items:center; gap:3px; padding:.55rem .65rem; }
  .voice-receive span { margin-right:auto; }
  .voice-receive i { width:2px; height:12px; border-radius:2px; background:var(--uv2); transform:scaleY(.25); }
  .s5.is-live .device-live--voice { animation:voiceNotice 6s var(--ease-enter) infinite; }
  .s5.is-live .voice-receive i { animation:voiceMeter .72s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .voice-receive i:nth-child(3){animation-delay:-.16s}.voice-receive i:nth-child(4){animation-delay:-.32s}.voice-receive i:nth-child(5){animation-delay:-.48s}.voice-receive i:nth-child(6){animation-delay:-.64s}
  @keyframes voiceNotice { 0%,12%{opacity:0;transform:translate3d(0,-10px,0) scale(.98)} 22%,76%{opacity:1;transform:translate3d(0,0,0) scale(1)} 88%,100%{opacity:0;transform:translate3d(0,-5px,0) scale(.99)} }
  @keyframes voiceMeter { from{transform:scaleY(.2);opacity:.45} to{transform:scaleY(1);opacity:1} }

  /* Closing typography is fully visible; gallery keeps live screens restrained. */
  .sk { background:var(--void); }
  .sk::before { background:radial-gradient(52% 52% at 50% 50%,rgba(85,211,178,.085),transparent 70%),radial-gradient(38% 38% at 78% 22%,rgba(242,164,95,.05),transparent 65%); }
  .sk__t { line-height:.93; padding:.08em 0 .11em; overflow:visible; }
  .skl { padding-inline:.04em; }
  .footwrap { background:#040d0b; }
  .gallery { border-top-color:rgba(139,228,200,.12); }
  .gallery::before { background:linear-gradient(90deg,#040d0b,transparent); }
  .gallery::after { background:linear-gradient(270deg,#040d0b,transparent); }
  .gallery__item .dev__scr::before { border-color:rgba(139,228,200,.15); background:rgba(6,17,15,.86); color:rgba(244,234,217,.9); }
  .device-live--gallery { left:7%; right:7%; bottom:6%; display:flex; align-items:center; gap:.4rem; padding:.38rem .5rem; border-radius:10px; background:rgba(6,17,15,.84); box-shadow:inset 0 0 0 1px rgba(139,228,200,.14); opacity:0; }
  .device-live--gallery i { width:5px; height:5px; border-radius:50%; background:var(--rose); box-shadow:0 0 7px rgba(85,211,178,.6); }
  .device-live--gallery span { color:rgba(244,234,217,.7); font-size:6px; letter-spacing:.08em; }
  .gallery.is-live .device-live--gallery { animation:galleryStatus 6.4s var(--ease-enter) infinite; }
  .gallery__item:nth-child(2n) .device-live--gallery { animation-delay:-2.7s; }
  @keyframes galleryStatus { 0%,18%{opacity:0;transform:translate3d(0,8px,0)} 28%,72%{opacity:1;transform:translate3d(0,0,0)} 84%,100%{opacity:0;transform:translate3d(0,-4px,0)} }

  .legal { background:var(--void); }
  .legal__aura { background:radial-gradient(52% 55% at 78% 8%,rgba(85,211,178,.11),transparent 72%),radial-gradient(38% 42% at 20% 16%,rgba(242,164,95,.055),transparent 74%); }
  .legal h1 { line-height:.96; padding-block:.06em .1em; overflow:visible; }
  .legal h2 .n,.legal a.contact-mail { color:var(--uv2); }
  .legal li::before { background:var(--rose); }

  @media (hover:hover) and (pointer:fine) {
    .nav__links a:hover::after { transform:scaleX(1); transform-origin:left; }
    .store:hover { transform:translateY(-3px); background:rgba(16,35,31,.88); box-shadow:inset 0 0 0 1px rgba(139,228,200,.24),inset 0 1px 0 rgba(255,255,255,.15),0 22px 58px rgba(1,8,7,.34); }
    .store:hover::after { transform:translate3d(2px,-1px,0) scale(1.05); background:rgba(242,164,95,.14); }
    .gallery__track:hover { animation-play-state:paused; }
  }
}

@media (min-width:901px) and (max-width:1180px) {
  .se__copy strong { font-size:clamp(3.8rem,8vw,6.2rem); }
  .gp__h { font-size:clamp(3.2rem,5.5vw,5.2rem); }
}

@media (min-width:901px) and (prefers-reduced-motion:reduce) {
  html:not(.motion-forced) .device-live,
  html:not(.motion-forced) .device-live i,
  html:not(.motion-forced) .live-radar i,
  html:not(.motion-forced) .live-reaction,
  html:not(.motion-forced) .live-squad i,
  html:not(.motion-forced) .live-typing i,
  html:not(.motion-forced) .live-affinity i { animation:none !important; }
  html:not(.motion-forced) .device-live--gallery { opacity:.9; transform:none; }
  html:not(.motion-forced) .gp.is-live .device-live--night > div { opacity:1; }
  html:not(.motion-forced) .hero-reel__ring,
  html:not(.motion-forced) .hero-reel__shot,
  html:not(.motion-forced) .hero-reel__index i,
  html:not(.motion-forced) .hero-reel__sheen { animation:none !important; }
}

/* Hero narrative reel — desktop only. Native 1344×2992 captures, no raster scaling tricks. */
@media (min-width:901px) {
  .hero-reel {
    perspective:1500px;
  }
  .hero-reel__frame {
    width:52%;
    aspect-ratio:1344/2992;
    transform-style:preserve-3d;
  }
  .js-on .hero-reel__frame {
    animation:heroReelHardware 7.6s cubic-bezier(.45,0,.25,1) infinite alternate,
              heroReelFloat 8.4s cubic-bezier(.45,0,.25,1) infinite alternate !important;
  }
  .hero-reel__screen {
    background:#050812;
    isolation:isolate;
  }
  .hero-reel__slide {
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0;
    transform:translate3d(0,4.5%,0) scale(.975);
    transition:opacity 360ms cubic-bezier(.22,1,.36,1),
               transform 780ms cubic-bezier(.22,1,.36,1),
               clip-path 780ms cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }
  .hero-reel__slide.is-active {
    z-index:2;
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    clip-path:inset(0 0 0 0 round 0);
  }
  .hero-reel__shot,
  .js-on .hero-reel__shot {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    filter:none !important;
    image-rendering:auto;
    animation:none !important;
    backface-visibility:hidden;
  }
  .hero-reel__shot.is-active { opacity:1; }
  .hero-reel__slide[data-motion="iris"] { clip-path:circle(12% at 50% 46%); transform:scale(1.035); }
  .hero-reel__slide[data-motion="scan"] { clip-path:inset(0 0 88% 0); transform:translate3d(0,-2.2%,0) scale(1.025); }
  .hero-reel__slide[data-motion="reveal"] { clip-path:polygon(0 0,100% 0,84% 0,16% 100%,0 100%); transform:translate3d(3.5%,0,0) scale(1.015); }
  .hero-reel__slide[data-motion="push"],
  .hero-reel__slide[data-motion="wipe-left"] { clip-path:inset(0 0 0 100%); transform:translate3d(7%,0,0) scale(1.01); }
  .hero-reel__slide[data-motion="wipe-right"] { clip-path:inset(0 100% 0 0); transform:translate3d(-7%,0,0) scale(1.01); }
  .hero-reel__slide[data-motion="success"] { clip-path:circle(22% at 50% 42%); transform:scale(.94); }
  .hero-reel__slide[data-motion="lift"] { clip-path:inset(100% 0 0 0); transform:translate3d(0,7%,0) scale(1.01); }
  .hero-reel__slide[data-motion="shuffle"] { clip-path:polygon(0 0,48% 0,38% 100%,0 100%); transform:translate3d(-3%,0,0) scale(1.02); }
  .hero-reel__slide[data-motion="finish"] { clip-path:inset(7% 7% 7% 7% round 2.5rem); transform:scale(.92); }
  .hero-reel__slide.is-active[data-motion] { clip-path:inset(0 0 0 0 round 0); transform:translate3d(0,0,0) scale(1); }

  .hero-reel__story {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:.25rem;
    padding:13%;
    color:#eee8dc;
    overflow:hidden;
    background:
      radial-gradient(circle at 82% 20%,rgba(127,178,255,.24),transparent 35%),
      radial-gradient(circle at 16% 82%,rgba(170,179,193,.12),transparent 36%),
      linear-gradient(156deg,#0b1524 0%,#07101d 48%,#050812 100%);
  }
  .hero-reel__story::before {
    content:"";
    position:absolute;
    inset:7%;
    border:1px solid rgba(184,210,255,.16);
    border-radius:1.8rem;
    box-shadow:inset 0 0 42px rgba(127,178,255,.045);
  }
  .hero-reel__story::after {
    content:"";
    position:absolute;
    left:13%;
    right:13%;
    top:24%;
    height:1px;
    background:linear-gradient(90deg,rgba(127,178,255,.86),transparent);
    transform-origin:left;
    transform:scaleX(.24);
    opacity:.48;
  }
  .hero-reel__story span,
  .hero-reel__story strong,
  .hero-reel__story b {
    position:relative;
    z-index:1;
    display:block;
    transform:translateY(1.4rem);
    opacity:0;
    transition:opacity 520ms cubic-bezier(.22,1,.36,1),transform 760ms cubic-bezier(.22,1,.36,1);
  }
  .hero-reel__story span {
    color:#aab3c1;
    font-size:clamp(.72rem,1.05vw,1rem);
    font-weight:600;
    letter-spacing:.18em;
  }
  .hero-reel__story strong {
    color:#eee8dc;
    font-family:var(--disp);
    font-weight:400;
    font-size:clamp(2.6rem,4.9vw,5.1rem);
    line-height:.88;
    letter-spacing:.012em;
    text-wrap:balance;
  }
  .hero-reel__story b {
    margin-top:.7rem;
    color:#b8d2ff;
    font-size:clamp(.8rem,1.15vw,1.08rem);
    line-height:1.25;
    letter-spacing:.04em;
  }
  .hero-reel__story--wide strong { font-size:clamp(1.85rem,3.05vw,3.15rem); line-height:.9; }
  .hero-reel__story i {
    position:absolute;
    right:-22%;
    bottom:-7%;
    width:74%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(127,178,255,.2);
    box-shadow:0 0 70px rgba(127,178,255,.08),inset 0 0 54px rgba(184,210,255,.035);
  }
  .hero-reel__story.is-active span,
  .hero-reel__story.is-active strong,
  .hero-reel__story.is-active b { opacity:1; transform:translateY(0); }
  .hero-reel__story.is-active strong { transition-delay:90ms; }
  .hero-reel__story.is-active b { transition-delay:170ms; }

  .hero-reel__callout {
    position:absolute;
    z-index:6;
    left:76%;
    top:29%;
    width:24%;
    min-width:10rem;
    padding-left:1rem;
    border-left:1px solid rgba(127,178,255,.4);
    color:#eee8dc;
    transform:translate3d(0,0,0);
  }
  .hero-reel__callout::before {
    content:"";
    position:absolute;
    left:-.23rem;
    top:.15rem;
    width:.42rem;
    height:.42rem;
    border-radius:50%;
    background:#b8d2ff;
    box-shadow:0 0 18px rgba(127,178,255,.72);
  }
  .hero-reel__callout span,
  .hero-reel__callout strong { display:block; transition:opacity 160ms ease,transform 260ms cubic-bezier(.22,1,.36,1); }
  .hero-reel__callout span { color:#7f8998; font-size:.63rem; font-weight:700; letter-spacing:.14em; }
  .hero-reel__callout strong { max-width:13ch; margin-top:.35rem; font-size:clamp(.78rem,1vw,1.05rem); line-height:1.15; letter-spacing:-.025em; text-wrap:balance; }
  .hero-reel__callout.is-changing span,
  .hero-reel__callout.is-changing strong { opacity:0; transform:translate3d(0,.55rem,0); }

  .hero-reel__index {
    left:11%;
    top:auto;
    bottom:16%;
    width:18%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:.55rem;
    color:#7f8998;
    font-size:.62rem;
    font-variant-numeric:tabular-nums;
    letter-spacing:.08em;
  }
  .hero-reel__index > i {
    width:auto;
    height:1px;
    overflow:hidden;
    background:rgba(170,179,193,.2);
    box-shadow:none;
  }
  .hero-reel__index > i em {
    display:block;
    width:100%;
    height:100%;
    background:#b8d2ff;
    box-shadow:0 0 12px rgba(127,178,255,.62);
    transform:scaleX(0);
    transform-origin:left;
  }
  .hero-reel__index > i em.is-running { animation:heroReelProgress 3.8s linear both; }
  .js-on .hero-reel__index i { animation:none !important; }
  .hero-reel__sheen { z-index:4; }

  @keyframes heroReelFloat {
    from { transform:translate3d(0,5px,0) rotateY(-2.2deg) rotateX(.5deg) rotateZ(-.18deg); }
    to { transform:translate3d(0,-10px,18px) rotateY(2.4deg) rotateX(-.35deg) rotateZ(.2deg); }
  }
  @keyframes heroReelProgress { to { transform:scaleX(1); } }
}

@media (min-width:901px) and (prefers-reduced-motion:reduce) {
  html:not(.motion-forced) .hero-reel__frame,
  html:not(.motion-forced) .hero-reel__index > i em { animation:none !important; }
  html:not(.motion-forced) .hero-reel__slide { transition:opacity 180ms ease; transform:none; clip-path:none; }
  html:not(.motion-forced) .hero-reel__slide:not(.is-active) { display:none; }
}

/* Desktop hero — one hero device inside a deconstructed product aperture. */
@media (min-width:901px) {
  .s1__stage {
    min-width:0;
    align-items:center;
  }
  .s1__phone--stack {
    width:min(44vw,47rem);
    height:min(78svh,50rem);
    filter:none;
    isolation:isolate;
  }
  .s1__phone--legacy { display:none; }
  .hero-product {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    isolation:isolate;
  }
  .hero-product::before {
    content:"";
    position:absolute;
    z-index:-3;
    inset:8% -5% 3%;
    border-radius:50%;
    background:radial-gradient(ellipse at 50% 45%,rgba(127,178,255,.23),rgba(170,179,193,.07) 42%,transparent 72%);
    filter:blur(30px);
    pointer-events:none;
  }
  .hero-product::after {
    content:"";
    position:absolute;
    z-index:0;
    left:11%; right:9%; bottom:10%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(170,179,193,.28),rgba(127,178,255,.64),rgba(238,232,220,.2),transparent);
    box-shadow:0 0 38px rgba(127,178,255,.34);
    pointer-events:none;
  }
  .hero-product__piece {
    position:absolute;
    margin:0;
    transform:none;
    backface-visibility:visible;
    transform-style:flat;
  }
  .hero-product__device {
    z-index:5;
    left:31%;
    top:2%;
    width:38%;
  }
  .dev--hero-product {
    width:100%;
    height:auto;
  }
  .hero-product__device .dev__body {
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.52),inset 2px 0 1px rgba(255,255,255,.27),inset -2px 0 2px rgba(0,2,9,.9),0 92px 154px -52px rgba(0,2,9,.98),0 34px 76px -30px rgba(127,178,255,.3);
  }
  .hero-product__blade {
    z-index:2;
    width:31%;
    height:48%;
    padding:5px;
    border-radius:2.2rem;
    overflow:hidden;
    background:linear-gradient(132deg,rgba(238,232,220,.72),rgba(170,179,193,.18) 16%,rgba(11,21,36,.94) 42%,rgba(127,178,255,.22) 78%,rgba(238,232,220,.38));
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.17),0 62px 112px -54px rgba(0,2,9,.98),0 24px 56px -30px rgba(127,178,255,.2);
  }
  .hero-product__blade::after {
    content:"";
    position:absolute;
    inset:5px;
    z-index:2;
    border-radius:inherit;
    background:linear-gradient(116deg,transparent 35%,rgba(238,232,220,.12) 49%,transparent 61%);
    pointer-events:none;
  }
  .hero-product__blade--messages {
    left:0;
    top:24%;
    border-radius:4.4rem 1.35rem 1.35rem 4.4rem;
  }
  .hero-product__blade--teams {
    right:0;
    top:18%;
    height:52%;
    border-radius:1.35rem 4.4rem 4.4rem 1.35rem;
  }
  .hero-product__blade-core {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:inherit;
    background:#050812;
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.08),inset 0 16px 34px rgba(127,178,255,.05);
  }
  .hero-product__blade img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 8%;
  }
  .hero-product__blade--teams img { object-position:50% 6%; }
  .hero-product__orbit {
    position:absolute;
    z-index:-1;
    left:50%;
    top:44%;
    border-radius:50%;
    background:conic-gradient(from 20deg,transparent 0 16%,rgba(127,178,255,.42) 22%,rgba(238,232,220,.18) 28%,transparent 35% 68%,rgba(170,179,193,.2) 76%,transparent 84%);
    -webkit-mask:radial-gradient(circle,transparent calc(100% - 1px),#000 calc(100% - 1px));
    mask:radial-gradient(circle,transparent calc(100% - 1px),#000 calc(100% - 1px));
    pointer-events:none;
  }
  .hero-product__orbit--outer {
    width:76%;
    aspect-ratio:1;
    margin:-38% 0 0 -38%;
    opacity:.68;
    animation:heroProductOrbit 18s cubic-bezier(.45,0,.25,1) infinite alternate;
  }
  .hero-product__orbit--inner {
    width:56%;
    aspect-ratio:1;
    margin:-28% 0 0 -28%;
    opacity:.42;
    animation:heroProductOrbit 13s cubic-bezier(.45,0,.25,1) -6s infinite alternate-reverse;
  }
  .hero-product__dock {
    position:absolute;
    z-index:1;
    left:26%; right:24%; bottom:6.5%;
    height:1.7rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(1.2rem,2vw,2.2rem);
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(127,178,255,.16),rgba(11,21,36,.42) 48%,transparent 74%);
    box-shadow:0 12px 38px -18px rgba(127,178,255,.34);
  }
  .hero-product__dock i {
    width:2.2rem;
    height:1px;
    border-radius:99px;
    background:linear-gradient(90deg,transparent,rgba(127,178,255,.82),transparent);
    box-shadow:0 0 14px rgba(127,178,255,.42);
    animation:heroDockSignal 4.8s cubic-bezier(.22,1,.36,1) infinite;
  }
  .hero-product__dock i:nth-child(2) { animation-delay:-1.6s; }
  .hero-product__dock i:nth-child(3) { animation-delay:-3.2s; }
  @keyframes heroProductOrbit {
    from { transform:rotate(-8deg); opacity:.28; }
    to { transform:rotate(16deg); opacity:.72; }
  }
  @keyframes heroDockSignal {
    0%,18%,100% { opacity:.22; }
    42%,68% { opacity:1; }
  }
}

/* Desktop hero reel — one full-resolution surface, four product moments. */
@media (min-width:901px) {
  .hero-reel {
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    isolation:isolate;
  }
  .hero-reel__aura {
    position:absolute;
    z-index:-3;
    width:82%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(127,178,255,.2),rgba(170,179,193,.055) 42%,transparent 70%);
    filter:blur(28px);
    pointer-events:none;
  }
  .hero-reel__ring {
    position:absolute;
    z-index:-2;
    border-radius:50%;
    background:conic-gradient(from 30deg,transparent 0 18%,rgba(127,178,255,.42) 24%,rgba(238,232,220,.16) 30%,transparent 38% 70%,rgba(170,179,193,.2) 78%,transparent 86%);
    -webkit-mask:radial-gradient(circle,transparent calc(100% - 1px),#000 calc(100% - 1px));
    mask:radial-gradient(circle,transparent calc(100% - 1px),#000 calc(100% - 1px));
    pointer-events:none;
  }
  .hero-reel__ring--outer {
    width:78%;
    aspect-ratio:1;
    opacity:.62;
  }
  .hero-reel__ring--inner {
    width:59%;
    aspect-ratio:1;
    opacity:.36;
  }
  .js-on .hero-reel__ring--outer { animation:heroReelOrbit 19s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .js-on .hero-reel__ring--inner { animation:heroReelOrbit 14s cubic-bezier(.45,0,.25,1) -7s infinite alternate-reverse; }
  .hero-reel__frame {
    position:relative;
    z-index:3;
    width:49%;
    aspect-ratio:1290/2778;
    border-radius:clamp(3.2rem,5.4vh,5.6rem);
    background:linear-gradient(112deg,#e1e4e8 0%,#818a97 1.2%,#2f3946 4.4%,#0b111b 10%,#050812 48%,#111a27 89%,#7b8592 97%,#d7dade 99%,#59616d 100%);
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.5),inset 2px 0 1px rgba(255,255,255,.24),inset -2px 0 2px rgba(0,2,9,.9),inset 0 -9px 15px rgba(0,2,9,.84),0 104px 184px -60px rgba(0,2,9,.98),0 38px 82px -34px rgba(127,178,255,.3);
    transform:none;
    backface-visibility:visible;
  }
  .js-on .hero-reel__frame { animation:heroReelHardware 7.6s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .hero-reel__frame::before {
    content:"";
    position:absolute;
    inset:.55%;
    z-index:4;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(132deg,rgba(255,255,255,.82),rgba(170,179,193,.22) 24%,rgba(5,8,18,.12) 54%,rgba(127,178,255,.32) 78%,rgba(238,232,220,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }
  .hero-reel__frame::after {
    content:"";
    position:absolute;
    z-index:1;
    inset:-.35%;
    border-radius:inherit;
    background:conic-gradient(from 210deg,transparent 0 25%,rgba(184,210,255,.52) 31%,rgba(238,232,220,.22) 36%,transparent 43% 76%,rgba(127,178,255,.28) 82%,transparent 89%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    padding:1.5px;
    opacity:.42;
    pointer-events:none;
  }
  .js-on .hero-reel__frame::after { animation:heroReelEdge 9s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .hero-reel__screen {
    position:absolute;
    z-index:2;
    inset:1.35% 2.9% 1.4%;
    overflow:hidden;
    border-radius:calc(clamp(3.2rem,5.4vh,5.6rem) - .88rem);
    background:#050812;
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.1),0 0 0 1px rgba(0,2,9,.9),0 0 32px rgba(0,2,9,.74);
  }
  .hero-reel__shot {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    opacity:0;
    transform:none !important;
    filter:none !important;
    image-rendering:auto;
    backface-visibility:visible;
  }
  .hero-reel__shot:first-child { opacity:1; }
  .js-on .hero-reel__shot {
    animation:heroReelShot 32s cubic-bezier(.65,0,.35,1) infinite both;
  }
  .js-on .hero-reel__shot:nth-child(1) { animation-delay:0s; }
  .js-on .hero-reel__shot:nth-child(2) { animation-delay:-24s; }
  .js-on .hero-reel__shot:nth-child(3) { animation-delay:-16s; }
  .js-on .hero-reel__shot:nth-child(4) { animation-delay:-8s; }
  .hero-reel__sheen {
    position:absolute;
    z-index:5;
    inset:-12% -45%;
    background:linear-gradient(112deg,transparent 38%,rgba(238,232,220,.045) 47%,rgba(255,255,255,.09) 50%,transparent 59%);
    pointer-events:none;
  }
  .js-on .hero-reel__sheen { animation:heroReelSheen 9s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .hero-reel__island {
    position:absolute;
    z-index:7;
    top:2.05%;
    left:50%;
    width:28%;
    height:2.35%;
    min-height:12px;
    border-radius:99px;
    background:#010205;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 1px 5px rgba(0,0,0,.88);
    transform:translateX(-50%);
  }
  .js-on .hero-reel__island { animation:heroReelIsland 4.8s cubic-bezier(.45,0,.25,1) infinite alternate; }
  .hero-reel__island::after {
    content:"";
    position:absolute;
    right:11%;
    top:50%;
    width:8%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 38% 34%,rgba(127,178,255,.72),#06101c 26%,#010205 72%);
    transform:translateY(-50%);
  }
  .hero-reel__button {
    position:absolute;
    z-index:-1;
    width:1.45%;
    border-radius:4px;
    background:linear-gradient(90deg,#46505d,#c0c6cd 42%,#4b5562 72%,#151c26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 2px rgba(0,2,9,.8);
  }
  .hero-reel__button--power { right:-1.15%; top:27%; height:10.5%; }
  .hero-reel__button--volume { left:-1.15%; top:24%; height:12%; }
  .hero-reel__index {
    position:absolute;
    z-index:5;
    left:77%;
    top:43%;
    display:grid;
    gap:.65rem;
  }
  .hero-reel__index i {
    display:block;
    width:2.6rem;
    height:2px;
    border-radius:99px;
    background:rgba(170,179,193,.2);
    box-shadow:0 0 0 rgba(127,178,255,0);
  }
  .js-on .hero-reel__index i { animation:heroReelIndex 32s cubic-bezier(.65,0,.35,1) infinite both; }
  .js-on .hero-reel__index i:nth-child(1) { animation-delay:0s; }
  .js-on .hero-reel__index i:nth-child(2) { animation-delay:-24s; }
  .js-on .hero-reel__index i:nth-child(3) { animation-delay:-16s; }
  .js-on .hero-reel__index i:nth-child(4) { animation-delay:-8s; }
  .hero-reel__floor {
    position:absolute;
    z-index:-1;
    left:27%; right:27%; bottom:3%; height:5%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(127,178,255,.2),rgba(170,179,193,.04) 45%,transparent 72%);
    filter:blur(12px);
    pointer-events:none;
  }
  .js-on .hero-reel__floor { animation:heroReelFloor 6.4s cubic-bezier(.45,0,.25,1) infinite alternate; }
  @keyframes heroReelShot {
    0%,18% { opacity:1; }
    25%,94% { opacity:0; }
    100% { opacity:1; }
  }
  @keyframes heroReelIndex {
    0%,18% { background:rgba(184,210,255,.92); box-shadow:0 0 16px rgba(127,178,255,.56); }
    25%,94% { background:rgba(170,179,193,.18); box-shadow:0 0 0 rgba(127,178,255,0); }
    100% { background:rgba(184,210,255,.92); box-shadow:0 0 16px rgba(127,178,255,.56); }
  }
  @keyframes heroReelOrbit {
    from { transform:rotate(-8deg); opacity:.26; }
    to { transform:rotate(15deg); opacity:.7; }
  }
  @keyframes heroReelSheen {
    from { transform:translateX(-7%); opacity:.3; }
    to { transform:translateX(7%); opacity:.78; }
  }
  @keyframes heroReelHardware {
    from { box-shadow:inset 0 0 0 1px rgba(238,232,220,.46),inset 2px 0 1px rgba(255,255,255,.2),inset -2px 0 2px rgba(0,2,9,.9),inset 0 -9px 15px rgba(0,2,9,.84),0 96px 170px -60px rgba(0,2,9,.98),-12px 34px 76px -38px rgba(127,178,255,.2); }
    to { box-shadow:inset 0 0 0 1px rgba(238,232,220,.58),inset 2px 0 1px rgba(255,255,255,.3),inset -2px 0 2px rgba(0,2,9,.9),inset 0 -9px 15px rgba(0,2,9,.84),0 112px 196px -60px rgba(0,2,9,.98),16px 38px 88px -34px rgba(127,178,255,.38); }
  }
  @keyframes heroReelEdge {
    from { transform:rotate(-7deg); opacity:.26; }
    to { transform:rotate(8deg); opacity:.68; }
  }
  @keyframes heroReelIsland {
    from { box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 1px 5px rgba(0,0,0,.88),0 0 0 rgba(127,178,255,0); }
    to { box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 1px 5px rgba(0,0,0,.88),0 0 16px rgba(127,178,255,.16); }
  }
  @keyframes heroReelFloor {
    from { transform:scaleX(.86); opacity:.42; }
    to { transform:scaleX(1.08); opacity:.92; }
  }
}

/* ── DESKTOP · TITANIUM NIGHT FX PASS ──────────────────────────────── */
@media (min-width:901px) {
  :root {
    --void:#050812;
    --void2:#07101d;
    --void3:#0b1524;
    --bone:#eee8dc;
    --dim:#b9bbc1;
    --dim2:#9299a5;
    --mute:#6f7887;
    --chrome:#aab3c1;
    --chrome2:#7d8797;
    --uv:#7fb2ff;
    --uv2:#b8d2ff;
    --uvdim:rgba(127,178,255,.15);
    --rose:#82c9e8;
    --rose2:#b7d2ff;
    --hair:rgba(170,179,193,.1);
    --hair2:rgba(170,179,193,.2);
  }

  html,body { background:var(--void); }
  .grain { opacity:.04; mix-blend-mode:soft-light; }

  .scene-fx-canvas {
    position:absolute; inset:0; z-index:1; width:100%; height:100%;
    pointer-events:none; opacity:.82; mix-blend-mode:screen;
    transition:opacity 420ms cubic-bezier(.22,1,.36,1);
  }
  .scene-fx-canvas--signal { z-index:2; opacity:.96; }
  .scene-fx-canvas--bridge { opacity:.92; }
  .scene-fx-canvas--night { opacity:1; }
  .scene-fx-canvas--voice { z-index:2; opacity:1; }
  .scene-fx-canvas--close { opacity:.72; }

  .nav__inner {
    background:linear-gradient(180deg,rgba(13,22,38,.9),rgba(5,8,18,.78));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 0 0 1px rgba(170,179,193,.12),0 22px 64px rgba(0,2,9,.4);
  }
  .nav__inner::before { background:linear-gradient(105deg,rgba(127,178,255,.1),transparent 28%,transparent 70%,rgba(238,232,220,.055)); }
  .nav__pill {
    border-color:rgba(170,179,193,.28);
    background:linear-gradient(180deg,rgba(170,179,193,.12),rgba(127,178,255,.035));
  }
  .nav__progress { background:linear-gradient(90deg,#7fb2ff,#eee8dc,#82c9e8); box-shadow:0 0 14px rgba(127,178,255,.52); }
  .rec,.slate i { background:#82c9e8; box-shadow:0 0 13px rgba(130,201,232,.72); }

  .boot0 { background:radial-gradient(120% 120% at 50% 44%,#101a2b 0%,#050812 64%); }
  .boot0__grid { background:linear-gradient(rgba(127,178,255,.055) 1px,transparent 1px) 0 0/100% 5.2vh,linear-gradient(90deg,rgba(127,178,255,.055) 1px,transparent 1px) 0 0/5.2vh 100%; }
  .boot0__ignite { background:radial-gradient(42% 38% at 50% 50%,rgba(127,178,255,.22),rgba(170,179,193,.05) 48%,transparent 70%); }
  .boot0__line,.boot0__under { box-shadow:0 0 24px rgba(127,178,255,.62); }
  .boot0__word .bl { background-image:linear-gradient(100deg,#596271 0%,#eee8dc 22%,#aab3c1 40%,#7fb2ff 52%,#eee8dc 66%,#596271 100%); }
  .boot0__flash { background:radial-gradient(60% 55% at 50% 46%,rgba(238,232,220,.96),rgba(127,178,255,.42) 42%,rgba(170,179,193,.1) 60%,transparent 73%); }

  .store {
    background:linear-gradient(145deg,rgba(238,232,220,.105),rgba(11,21,36,.78));
    box-shadow:inset 0 0 0 1px rgba(170,179,193,.18),inset 0 1px 0 rgba(255,255,255,.14),0 20px 54px rgba(0,2,9,.36);
  }
  .store::after { background:rgba(127,178,255,.08); box-shadow:inset 0 0 0 1px rgba(127,178,255,.16); }

  .dev__body {
    background:linear-gradient(112deg,#c0c5cd 0%,#697280 2.7%,#252d39 8%,#070b13 48%,#1b2330 90%,#949ca9 97%,#39424f 100%);
    box-shadow:0 96px 180px -52px rgba(0,2,9,.98),0 34px 78px -30px rgba(127,178,255,.2),inset 0 0 0 1px rgba(238,232,220,.34),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -7px 10px rgba(0,0,0,.76);
  }
  .dev__body::before { background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(170,179,193,.38) 24%,rgba(7,11,19,.5) 55%,rgba(127,178,255,.55) 100%); }
  .dev__glare { background:linear-gradient(122deg,transparent 27%,rgba(238,232,220,.045) 42%,rgba(255,255,255,.16) 50%,transparent 62%); }

  .s1 {
    background:radial-gradient(72% 88% at 76% 48%,rgba(22,47,86,.42),transparent 68%),radial-gradient(48% 58% at 12% 88%,rgba(170,179,193,.085),transparent 72%),linear-gradient(145deg,#050812 0%,#07101d 54%,#03050b 100%);
  }
  .s1__bg { background:radial-gradient(58% 64% at 74% 52%,rgba(127,178,255,.15),transparent 64%),radial-gradient(42% 46% at 18% 72%,rgba(170,179,193,.07),transparent 70%); }
  .s1__grid-bg { opacity:.58; background:linear-gradient(rgba(127,178,255,.045) 1px,transparent 1px) 0 0/100% 7vh,linear-gradient(90deg,rgba(127,178,255,.045) 1px,transparent 1px) 0 0/7vh 100%; }
  .hero-color-bends { opacity:.92; filter:saturate(1.12) contrast(1.08); mask-image:radial-gradient(ellipse 84% 92% at 72% 48%,#000 0%,rgba(0,0,0,.96) 54%,transparent 100%); }
  .hero-atmosphere { opacity:.88; }
  .s1::after { background:linear-gradient(90deg,rgba(5,8,18,.9) 0%,rgba(5,8,18,.34) 42%,transparent 67%),radial-gradient(ellipse at 72% 48%,transparent 28%,rgba(5,8,18,.13) 70%,rgba(5,8,18,.66) 100%); }
  .s1__rays i { background:linear-gradient(180deg,rgba(184,210,255,.36),rgba(127,178,255,.075) 50%,transparent 88%); filter:blur(14px); }
  .s1__fog { background:radial-gradient(42% 72% at 25% 50%,rgba(127,178,255,.12),transparent 72%),radial-gradient(42% 72% at 72% 48%,rgba(170,179,193,.09),transparent 74%); }
  .s1__ghost { -webkit-text-stroke-color:rgba(127,178,255,.1); }
  .s1__brand .bl--x { color:#7fb2ff; text-shadow:0 0 38px rgba(127,178,255,.35); }
  .s1__sub em { color:#b8d2ff; }
  .s1__phone::after { background:radial-gradient(ellipse at 50% 0%,rgba(127,178,255,.24),rgba(170,179,193,.08) 44%,transparent 73%); }

  .device-live--night > div,.device-live--voice,.device-live--gallery {
    background:linear-gradient(135deg,rgba(8,15,28,.94),rgba(13,25,44,.86));
    border-color:rgba(127,178,255,.2);
    box-shadow:inset 0 0 0 1px rgba(127,178,255,.16),0 14px 36px rgba(0,2,9,.34);
  }
  .device-live--gallery i { background:#82c9e8; box-shadow:0 0 9px rgba(130,201,232,.74); }

  .sq { background:#040711; }
  .sq__pin { background:radial-gradient(44% 62% at 50% 48%,rgba(18,40,76,.32),transparent 72%),#040711; }
  .sq__pin::before { background:radial-gradient(36% 60% at 50% 48%,rgba(127,178,255,.13),transparent 72%),linear-gradient(90deg,rgba(127,178,255,.025) 1px,transparent 1px) 0 0/8vw 100%; }
  .sq__pin::after { background:linear-gradient(115deg,transparent 20%,rgba(127,178,255,.06) 46%,transparent 47%),linear-gradient(65deg,transparent 55%,rgba(170,179,193,.045) 76%,transparent 77%); }
  .sq__kinetic {
    position:absolute; left:50%; top:50%; z-index:3; width:100%; transform:translate(-50%,-50%);
    font-family:var(--disp); font-size:clamp(8rem,17vw,18rem); line-height:.78; letter-spacing:.015em;
    text-align:center; white-space:nowrap; color:rgba(127,178,255,.055);
    -webkit-text-stroke:1px rgba(184,210,255,.21); text-shadow:0 0 110px rgba(127,178,255,.22);
    pointer-events:none; transform-style:preserve-3d;
  }
  .sq__glow--scan { background:radial-gradient(62% 56% at 50% 44%,rgba(127,178,255,.24),transparent 70%); }
  .sq__glow--found { background:radial-gradient(62% 56% at 50% 44%,rgba(170,179,193,.18),rgba(127,178,255,.08) 52%,transparent 74%); }
  .sq__glow--match { background:radial-gradient(46% 44% at 38% 44%,rgba(127,178,255,.2),transparent 68%),radial-gradient(46% 44% at 62% 44%,rgba(238,232,220,.13),transparent 68%); }
  .rings i,.mring--i { border-color:rgba(127,178,255,.55); box-shadow:0 0 28px rgba(127,178,255,.08); }
  .mring--p { border-color:rgba(170,179,193,.55); }
  .sq__stage .dev--big { filter:drop-shadow(0 56px 104px rgba(0,2,9,.82)) drop-shadow(0 0 62px rgba(127,178,255,.2)); }
  .sq__beat::before { color:rgba(127,178,255,.075); }
  .sq__beat:nth-child(even)::before { color:rgba(170,179,193,.065); }

  .se { background:#050812; }
  .se__halo { background:radial-gradient(circle,rgba(127,178,255,.22),rgba(170,179,193,.06) 38%,transparent 70%); }
  .se__line { background:linear-gradient(90deg,transparent,rgba(127,178,255,.82),rgba(238,232,220,.7),rgba(170,179,193,.72),transparent); box-shadow:0 0 30px rgba(127,178,255,.58); }

  .sn { background:#07101d; }
  .sn__head::before { background:linear-gradient(180deg,#07101d 0%,rgba(7,16,29,.95) 42%,rgba(7,16,29,.58) 70%,transparent 100%); }
  .gp {
    background-color:#07101d;
    background-image:linear-gradient(90deg,rgba(127,178,255,.026) 1px,transparent 1px),linear-gradient(rgba(127,178,255,.018) 1px,transparent 1px);
  }
  .gp--1::before,.gp--3::before,.gp--5::before { background:radial-gradient(62% 72% at 18% 52%,rgba(127,178,255,.12),transparent 66%); }
  .gp--2::before,.gp--4::before { background:radial-gradient(62% 72% at 82% 52%,rgba(170,179,193,.105),transparent 66%); }
  .gp::after,.gp--2::after,.gp--4::after { background:radial-gradient(circle at 50% 45%,rgba(127,178,255,.14),rgba(170,179,193,.045) 38%,transparent 71%); }
  .gp__ghost { -webkit-text-stroke-color:rgba(127,178,255,.105); }
  .gp__phone::after,.gp--2 .gp__phone::after,.gp--4 .gp__phone::after { background:radial-gradient(ellipse at 50% 0%,rgba(127,178,255,.16),transparent 70%); }
  .gp__ts,.gp--2 .gp__ts,.gp--4 .gp__ts { color:#b8d2ff; }

  .sd { background:#050914; }
  .sd__atmos { background:radial-gradient(50% 46% at 50% 44%,rgba(127,178,255,.15),transparent 70%),radial-gradient(42% 42% at 72% 78%,rgba(170,179,193,.075),transparent 70%); }
  .sd__beam { background:linear-gradient(90deg,transparent,rgba(127,178,255,.075) 45%,rgba(238,232,220,.045) 55%,transparent); }
  .dg[data-i="2"] .hl,.sd__foot em { color:#b8d2ff; }

  .s5 { background:#040711; }
  .wave { filter:drop-shadow(0 0 24px rgba(127,178,255,.44)); }
  .wave i { background:linear-gradient(180deg,#b8d2ff,#7f8998); }
  .orb__e { background:radial-gradient(50% 50% at 50% 50%,rgba(238,232,220,.7),rgba(170,179,193,.18) 48%,transparent 72%); }
  .orb__i { background:radial-gradient(50% 50% at 50% 50%,rgba(127,178,255,.76),rgba(127,178,255,.18) 48%,transparent 72%); }

  .sk { background:#050812; }
  .sk::before { background:radial-gradient(52% 52% at 50% 50%,rgba(127,178,255,.12),transparent 70%),radial-gradient(38% 38% at 78% 22%,rgba(170,179,193,.055),transparent 65%); }
  .sk__inner > :not(.scene-fx-canvas) { position:relative; z-index:2; }
  .footwrap { background:#040711; }
  .gallery { background:radial-gradient(62% 80% at 50% 48%,rgba(17,37,70,.32),transparent 70%),#040711; perspective:1400px; }
  .gallery::before { background:linear-gradient(90deg,#040711,transparent); }
  .gallery::after { background:linear-gradient(270deg,#040711,transparent); }
  .gallery__track,.gallery__strip { transform-style:preserve-3d; }
  .gallery__item { transform-style:preserve-3d; }
  .gallery__item:nth-child(4n+1) .dev--gal { filter:drop-shadow(0 38px 54px rgba(127,178,255,.13)); }

  .legal { background:#050812; }
  .legal__aura { background:radial-gradient(52% 55% at 78% 8%,rgba(127,178,255,.14),transparent 72%),radial-gradient(38% 42% at 20% 16%,rgba(170,179,193,.06),transparent 74%); }

  @media (hover:hover) and (pointer:fine) {
    .store:hover { background:rgba(13,25,44,.92); box-shadow:inset 0 0 0 1px rgba(127,178,255,.28),inset 0 1px 0 rgba(255,255,255,.17),0 26px 68px rgba(0,2,9,.44); }
    .store:hover::after { background:rgba(127,178,255,.16); }
  }
}

@media (min-width:901px) and (prefers-reduced-motion:reduce) {
  html:not(.motion-forced) .scene-fx-canvas { opacity:.34; }
  html:not(.motion-forced) .sq__kinetic { transform:translate(-50%,-50%) !important; }
}

/* Desktop-only iPhone Pro system — rebuilt around the native 1344×2992 captures. */
@media (min-width:901px) {
  .nav__links a {
    font-family:var(--sans);
    font-size:13px;
    font-weight:600;
    letter-spacing:.17em;
    color:rgba(238,232,220,.76);
    text-shadow:0 1px 14px rgba(127,178,255,.14);
  }
  .nav__links a:hover { color:var(--bone); }

  .device-live--night,
  .device-live--gallery { display:none !important; }

  .dev {
    aspect-ratio:1290/2778;
    --rad:clamp(2.65rem,5.35vh,5.8rem);
    perspective:1900px;
    transform-style:preserve-3d;
    isolation:isolate;
  }
  .dev::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:-.45%;
    border-radius:calc(var(--rad) + .24rem);
    background:linear-gradient(118deg,rgba(238,232,220,.72) 0%,rgba(170,179,193,.32) 8%,rgba(23,32,45,.9) 28%,rgba(5,8,18,.96) 58%,rgba(127,178,255,.22) 82%,rgba(238,232,220,.42) 100%);
    box-shadow:0 72px 130px -44px rgba(0,2,9,.98),-20px 28px 68px -30px rgba(127,178,255,.22),18px 18px 52px -32px rgba(238,232,220,.18);
    transform:translateZ(-12px);
    pointer-events:none;
  }
  .dev::after {
    content:"";
    position:absolute;
    z-index:-2;
    left:6%; right:6%; bottom:-7%; height:12%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(127,178,255,.2),rgba(170,179,193,.055) 45%,transparent 74%);
    transform:translateZ(-72px) rotateX(76deg) scaleX(1.12);
    filter:blur(17px);
    opacity:.74;
    pointer-events:none;
  }
  .dev__body {
    inset:.8%;
    z-index:1;
    border-radius:calc(var(--rad) - .18rem);
    background:linear-gradient(112deg,#e3e5e8 0%,#8b939f 1.4%,#36404d 4.2%,#111823 10%,#050812 48%,#101824 88%,#687280 96.5%,#d2d6dc 99%,#59616d 100%);
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.46),inset 2px 0 1px rgba(255,255,255,.24),inset -2px 0 2px rgba(0,2,9,.86),inset 0 -8px 13px rgba(0,2,9,.82),0 96px 180px -56px rgba(0,2,9,.98),0 34px 80px -34px rgba(127,178,255,.24);
    transform-style:preserve-3d;
    transition:box-shadow 680ms cubic-bezier(.22,1,.36,1);
  }
  .dev__body::before {
    inset:.45%;
    padding:1px;
    border-radius:calc(var(--rad) - .28rem);
    background:linear-gradient(132deg,rgba(255,255,255,.82),rgba(170,179,193,.24) 22%,rgba(5,8,18,.16) 52%,rgba(127,178,255,.32) 78%,rgba(238,232,220,.56));
    opacity:.84;
    transform:translateZ(10px);
  }
  .dev__body::after { display:none; }

  .dev__scr {
    inset:1.35% 2.9% 1.4%;
    border-radius:calc(var(--rad) - .88rem);
    background:#050812;
    box-shadow:inset 0 0 0 1px rgba(238,232,220,.1),0 0 0 1px rgba(0,2,9,.88),0 0 28px rgba(0,2,9,.7);
    transform:translateZ(15px);
  }
  .scrw { background:#050812; }
  .scrw .scr {
    top:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    image-rendering:auto;
    filter:none;
  }
  .dev__scr::after {
    bottom:.75%;
    width:27%;
    height:3px;
    background:rgba(238,232,220,.9);
    box-shadow:0 0 5px rgba(238,232,220,.2);
  }

  .dev__notch {
    display:block;
    top:2.05%;
    left:50%;
    width:28%;
    height:2.35%;
    min-height:12px;
    border-radius:999px;
    background:linear-gradient(180deg,#010207,#05070d);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.055),0 0 0 1px rgba(0,2,9,.88),0 2px 9px rgba(0,0,0,.62);
    transform:translate3d(-50%,0,29px);
    z-index:18;
  }
  .dev__notch::before {
    content:"";
    position:absolute;
    left:18%; top:50%;
    width:38%; height:18%;
    border-radius:999px;
    background:#111722;
    transform:translateY(-50%);
    box-shadow:inset 0 1px 2px rgba(127,178,255,.13);
  }
  .dev__notch::after {
    right:12%; top:50%;
    width:13%; height:48%;
    background:radial-gradient(circle at 40% 35%,#27415f 0%,#101a2b 28%,#02040a 68%);
    box-shadow:inset 0 0 3px rgba(127,178,255,.34),0 0 3px rgba(127,178,255,.1);
  }
  .dev__glare {
    inset:1.35% 2.9% 1.4%;
    border-radius:calc(var(--rad) - .88rem);
    background:linear-gradient(116deg,transparent 22%,rgba(238,232,220,.025) 39%,rgba(255,255,255,.105) 49%,transparent 60%);
    opacity:.5;
    transform:translateZ(24px);
  }
  .dev__btn {
    background:linear-gradient(90deg,#4d5663,#c1c6cd 42%,#4d5663 72%,#171e28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 1px 2px rgba(0,2,9,.8);
    transform:translateZ(-5px);
  }
  .dev__btn--r1 { right:-1.2%; top:27%; width:1.55%; height:10.5%; border-radius:0 4px 4px 0; }
  .dev__btn--l1 { left:-1.2%; top:17%; width:1.55%; height:5.2%; border-radius:4px 0 0 4px; }
  .dev__btn--l2 { left:-1.2%; top:25%; width:1.55%; height:11%; border-radius:4px 0 0 4px; }

  .dev--hero,.dev--gp {
    transform-style:preserve-3d;
    transition:transform 720ms cubic-bezier(.22,1,.36,1),filter 720ms cubic-bezier(.22,1,.36,1);
  }

  @media (hover:hover) and (pointer:fine) {
    .sq__stage .dev:hover .dev__body,
    .duo .dev:hover .dev__body,
    .gallery__item:hover .dev__body {
      transform:none;
      box-shadow:inset 0 0 0 1px rgba(238,232,220,.52),inset 2px 0 1px rgba(255,255,255,.28),inset -2px 0 2px rgba(0,2,9,.88),inset 0 -8px 13px rgba(0,2,9,.84),0 116px 190px -60px rgba(0,2,9,.98),0 42px 88px -34px rgba(127,178,255,.3);
    }
  }

  /* Keep captured app pixels on a flat compositor plane. The hardware can
     retain depth through its own metal, light and shadow layers. */
  .dev {
    perspective:none;
    transform-style:flat;
  }
  .dev__scr {
    transform:none;
    transform-style:flat;
    backface-visibility:visible;
  }
  .scrw,
  .fr {
    transform-style:flat;
    backface-visibility:visible;
  }
  .scrw .scr {
    transform:none !important;
    transform-origin:50% 50% !important;
    backface-visibility:visible;
    will-change:auto;
  }
  .gallery.is-live .gallery__item .scr,
  .gallery.is-live .gallery__item .dev--gal {
    animation:none !important;
  }
  .s1.is-live .dev--hero .dev__body {
    animation:none !important;
  }
  .dev--hero,
  .dev--gp {
    transition:filter 720ms cubic-bezier(.22,1,.36,1);
  }
}

@media (min-width:901px) and (prefers-reduced-motion:reduce) {
  html:not(.motion-forced) .dev__body,
  html:not(.motion-forced) .dev--hero,
  html:not(.motion-forced) .dev--gp { transition:none; }
  html:not(.motion-forced) .s1__phone:hover .dev--hero,
  html:not(.motion-forced) .gp__phone:hover .dev--gp,
  html:not(.motion-forced) .dev:hover .dev__body { transform:none; }
}

/* Cascade lock: narrative reel stays authoritative after legacy hero rules. */
@media (min-width:901px) {
  .hero-reel { perspective:none; }
  .hero-reel__frame {
    width:auto;
    height:min(74svh,47rem);
    max-width:48%;
    aspect-ratio:1344/2992;
    transform-style:preserve-3d;
  }
  .js-on .hero-reel__frame {
    animation:heroReelHardware 7.6s cubic-bezier(.45,0,.25,1) infinite alternate !important;
    transform:none !important;
    transform-style:flat;
  }
  .hero-reel__slide {
    transition:opacity 280ms cubic-bezier(.22,1,.36,1),
               transform 620ms cubic-bezier(.22,1,.36,1),
               clip-path 620ms cubic-bezier(.22,1,.36,1);
  }
  .hero-reel__shot,
  .js-on .hero-reel__shot {
    object-fit:cover;
    opacity:0;
    animation:none !important;
    transform:none !important;
    backface-visibility:visible;
  }
  .hero-reel__shot.is-active { opacity:1; }
  .hero-reel__shot[data-motion],
  .hero-reel__shot.is-active[data-motion] { transform:none !important; }
  .hero-reel__slide[data-motion="iris"] { transform:scale(1.035) !important; }
  .hero-reel__slide[data-motion="scan"] { transform:translate3d(0,-2.2%,0) scale(1.025) !important; }
  .hero-reel__slide[data-motion="reveal"] { transform:translate3d(3.5%,0,0) scale(1.015) !important; }
  .hero-reel__slide[data-motion="push"],
  .hero-reel__slide[data-motion="wipe-left"] { transform:translate3d(7%,0,0) scale(1.01) !important; }
  .hero-reel__slide[data-motion="wipe-right"] { transform:translate3d(-7%,0,0) scale(1.01) !important; }
  .hero-reel__slide[data-motion="success"] { transform:scale(.94) !important; }
  .hero-reel__slide[data-motion="lift"] { transform:translate3d(0,7%,0) scale(1.01) !important; }
  .hero-reel__slide[data-motion="shuffle"] { transform:translate3d(-3%,0,0) scale(1.02) !important; }
  .hero-reel__slide[data-motion="finish"] { transform:scale(.92) !important; }
  .hero-reel__slide.is-active[data-motion] { transform:translate3d(0,0,0) scale(1) !important; }
  .hero-reel__index { left:2%; top:auto; bottom:16%; gap:.55rem; }
  .hero-reel__index > i { width:auto; height:1px; background:rgba(170,179,193,.2); box-shadow:none; }
  .hero-reel__callout {
    left:73.5%;
    top:28%;
    width:29%;
    min-width:12rem;
    padding:.2rem 0 .35rem 1.35rem;
    border-left-color:rgba(184,210,255,.52);
  }
  .hero-reel__callout span {
    color:#aab3c1;
    font-size:clamp(.66rem,.72vw,.78rem);
    letter-spacing:.2em;
  }
  .hero-reel__callout strong {
    max-width:15ch;
    margin-top:.55rem;
    color:#eee8dc;
    font-family:var(--disp);
    font-size:clamp(1.18rem,1.55vw,1.7rem);
    font-weight:400;
    line-height:1.04;
    letter-spacing:.015em;
    text-shadow:0 12px 32px rgba(5,8,18,.72);
  }
  .hero-reel__callout::after {
    content:"";
    display:block;
    width:min(7rem,80%);
    height:1px;
    margin-top:.8rem;
    background:linear-gradient(90deg,rgba(184,210,255,.72),transparent);
    transform-origin:left;
    transition:transform 620ms cubic-bezier(.22,1,.36,1);
  }
  .hero-reel__callout.is-changing::after { transform:scaleX(.18); }
  .hero-reel__story strong {
    text-shadow:0 18px 45px rgba(5,8,18,.8),0 0 38px rgba(127,178,255,.08);
  }
  .hero-reel__story::after {
    transform:scaleX(.18);
    transition:transform 820ms cubic-bezier(.22,1,.36,1),opacity 420ms ease;
  }
  .hero-reel__story.is-active::after { transform:scaleX(1); opacity:.78; }
  .hero-reel__story i {
    opacity:.36;
    transform:translate3d(9%,7%,0) scale(.9);
    transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .7s ease;
  }
  .hero-reel__story.is-active i { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

@media (min-width:901px) {
  .hero-reel__screen {
    transform:none !important;
    filter:none !important;
    backface-visibility:visible;
    contain:paint;
  }
  .hero-reel__shot.hero-reel__slide[data-motion],
  .hero-reel__shot.hero-reel__slide.is-active[data-motion] {
    transform:none !important;
    translate:none !important;
    scale:none !important;
    rotate:none !important;
    clip-path:none !important;
    filter:none !important;
    image-rendering:auto;
    will-change:auto;
    transition:opacity 160ms ease;
  }
}

/* Ses Köprüsü: telefonlar geri çekilmeden alt metin sahneye girmez. */
@media (min-width:901px) {
  .s5__quote {
    bottom:clamp(.8rem,3vh,2rem);
    width:min(66rem,88vw);
    will-change:transform,opacity;
  }
  .s5__quote .q__meta { will-change:transform,opacity; }
}

/* Mobile composition: a single-column narrative with safe-area spacing. */
@media (max-width:900px) {
  html { scroll-padding-top:calc(4.5rem + env(safe-area-inset-top)); }
  body { overflow-x:clip; }

  .nav {
    top:0;
    padding:calc(.55rem + env(safe-area-inset-top)) .7rem 0;
  }
  .nav__inner {
    min-height:3.45rem;
    padding:.42rem .48rem .42rem .82rem;
    border-radius:1rem;
  }
  .brand { gap:.52rem; min-width:0; }
  .brand b { font-size:1.02rem; letter-spacing:.008em; }
  .rec { width:7px; height:7px; }
  .nav__pill {
    min-width:0;
    padding:.47rem .68rem;
    margin:0;
    font-size:.62rem;
    letter-spacing:.11em;
  }

  .s1 { min-height:100dvh; align-items:flex-start; }
  .s1__grid {
    min-height:100dvh;
    padding:calc(5.75rem + env(safe-area-inset-top)) 1.2rem 2.6rem;
    gap:1.35rem;
    align-content:start;
  }
  .s1__lead { width:100%; }
  .slate { font-size:.6rem; letter-spacing:.13em; line-height:1.45; }
  .s1__brand {
    max-width:100%;
    font-size:clamp(3.35rem,14.5vw,5.1rem);
    line-height:.94;
    margin-top:1.1rem;
  }
  .s1__motto { margin-top:.9rem; font-size:clamp(1.35rem,6.3vw,2rem); }
  .s1__sub { max-width:31rem; margin-top:1.25rem; font-size:1rem; line-height:1.58; }
  .s1__cta { width:100%; margin-top:1.55rem; gap:.65rem; }
  .s1__cta .store { flex:1 1 9.25rem; justify-content:center; min-height:3.85rem; }
  .s1__phone { width:min(82vw,23rem); margin:0 auto; }
  .dev--hero { height:min(55dvh,32rem); }
  .s1__ghost { font-size:38vw; bottom:0; }

  .sq__pin, .sd__pin, .s5__pin { height:100dvh; }
  .sq__pin .slate--in, .sd__pin .slate--in, .s5__pin .slate--in {
    top:calc(4.85rem + env(safe-area-inset-top));
    max-width:calc(100vw - 2rem);
    text-align:center;
  }
  .sq__stage { align-items:flex-end; padding-bottom:.4rem; }
  .dev--big { height:min(51dvh,31rem); }
  .sq__cap { height:31dvh; padding:0 1.25rem calc(.85rem + env(safe-area-inset-bottom)); }
  .sq__tc { margin-bottom:.62rem; font-size:.62rem; letter-spacing:.22em; }
  .sq__beat h3 { margin-bottom:.55rem; font-size:clamp(2.3rem,11vw,3.4rem); line-height:.92; }
  .sq__beat p { max-width:31rem; font-size:.98rem; line-height:1.48; }

  .sn__head { padding:calc(5.3rem + env(safe-area-inset-top)) 1.2rem 0; }
  .gp {
    min-height:100dvh;
    padding:3.5rem 1.2rem 4.1rem;
    gap:1.45rem;
  }
  .gp__phone { order:0; }
  .gp__txt { order:1; max-width:34rem; }
  .dev--gp { height:min(53dvh,32rem); }
  .gp__ghost { font-size:22vh; opacity:.42; }
  .gp__ts { margin-bottom:.72rem; font-size:.66rem; letter-spacing:.2em; }
  .gp__h { margin-bottom:.78rem; font-size:clamp(2.65rem,12vw,4rem); line-height:.9; }
  .gp__p { max-width:31rem; font-size:1rem; line-height:1.56; }
  .gn__line { padding:1.5rem 1.2rem; gap:.8rem; font-size:.58rem; letter-spacing:.14em; }
  .gn__line::after { min-width:1.5rem; }

  .sd__pin { padding:0 1.25rem; }
  .sd__lines { gap:.75rem; }
  .dg { font-size:clamp(2rem,9vw,3.25rem); line-height:1.12; }
  .sd__foot { margin-top:2.1rem; font-size:1.02rem; }

  .duo { gap:.55rem; padding:0 .65rem; align-items:flex-end; }
  .dev--duo { height:min(40dvh,24rem); }
  .wave { left:22%; right:22%; top:43%; height:38px; margin-top:-19px; }
  .s5__quote {
    bottom:calc(.9rem + env(safe-area-inset-bottom));
    padding:0 1.15rem;
  }
  .q { font-size:clamp(1.42rem,6.4vw,2rem); line-height:1.2; }
  .q__meta { margin-top:.72rem; font-size:.58rem; letter-spacing:.16em; }
  .s5__t { margin-top:1.1rem; font-size:clamp(1.8rem,8.1vw,2.55rem) !important; line-height:1.02; }

  .sk__inner {
    min-height:100dvh;
    padding:calc(5.6rem + env(safe-area-inset-top)) 1.2rem calc(2rem + env(safe-area-inset-bottom));
  }
  .sk__inner .slate--c { margin-bottom:2.6rem; }
  .sk__t { font-size:clamp(4.8rem,22vw,7.1rem); line-height:.9; }
  .sk__sub { max-width:28rem; margin-top:1.35rem; font-size:1rem; line-height:1.55; }
  .sk__cta { width:100%; margin-top:1.65rem; gap:.65rem; }
  .sk__cta .store { flex:1 1 9.25rem; justify-content:center; min-height:3.85rem; }

  .gallery { padding:4.5rem 0 3rem; }
  .gallery__head { margin-bottom:2.7rem; }
  .gallery__head .slate { text-align:center; }
  .gallery__track { gap:.85rem; animation-duration:44s; }
  .gallery__strip { gap:.85rem; }
  .gallery__item:nth-child(3n+2) { transform:translateY(1.15rem); }
  .gallery__item:nth-child(3n) { transform:translateY(-1.15rem); }
  .dev--gal { height:min(30dvh,18rem); }
  .gallery::before, .gallery::after { width:3.2rem; }

  .foot { padding:1.25rem 1.2rem calc(2rem + env(safe-area-inset-bottom)); }
  .foot__row { gap:1.25rem; padding-top:1.4rem; }
  .foot__brand { letter-spacing:.008em; }
  .foot__links { display:grid; grid-template-columns:1fr; gap:.75rem; }
  .foot__links a { font-size:.68rem; letter-spacing:.09em; }
  .foot__base { margin-top:1.4rem; font-size:.58rem; line-height:1.55; }

  .legal { min-height:100dvh; padding:calc(7rem + env(safe-area-inset-top)) 0 calc(3rem + env(safe-area-inset-bottom)); }
  .legal__wrap { width:min(100% - 2.4rem,44rem); }
  .legal h1 { font-size:clamp(3rem,13vw,4.6rem); line-height:.94; }
  .legal .intro { font-size:1rem; line-height:1.62; margin-bottom:2.2rem; }
  .legal section { margin-bottom:2.2rem; }
  .legal h2 { font-size:1.12rem; line-height:1.35; }
  .legal li { font-size:1rem; line-height:1.58; padding-left:1.15rem; }
  .legal .footer__base { flex-direction:column; margin-top:3.2rem; font-size:.6rem; line-height:1.55; }
}

@media (max-width:380px) {
  .brand b { font-size:.92rem; }
  .nav__pill { padding:.42rem .55rem; font-size:.57rem; }
  .s1__brand { font-size:14vw; }
  .s1__cta .store, .sk__cta .store { flex-basis:100%; }
  .dev--duo { height:min(37dvh,21rem); }
  .q__meta { letter-spacing:.11em; }
}

/* Short, horizontal phone viewports keep the same hierarchy without clipping. */
@media (max-width:900px) and (orientation:landscape) and (max-height:600px) {
  .nav { padding-top:calc(.35rem + env(safe-area-inset-top)); }
  .nav__inner { min-height:3rem; }
  .s1__grid {
    grid-template-columns:minmax(0,1.1fr) minmax(9rem,.7fr);
    min-height:100dvh;
    padding:calc(3.7rem + env(safe-area-inset-top)) 7vw 1.15rem;
    text-align:left;
    align-items:center;
  }
  .s1__lead { margin:0; }
  .s1__motto { font-size:clamp(1.18rem,3.5vw,1.65rem); }
  .s1__sub { margin-left:0; margin-right:0; font-size:.9rem; }
  .s1__cta { justify-content:flex-start; margin-top:.9rem; }
  .s1__cta .store { flex:0 1 9.2rem; min-height:3.3rem; }
  .s1__phone { margin:0 auto; }
  .dev--hero { height:min(66dvh,24rem); }

  .sq__pin .slate--in, .sd__pin .slate--in, .s5__pin .slate--in { top:3.55rem; }
  .dev--big { height:min(57dvh,23rem); }
  .sq__cap { height:27dvh; }
  .sq__beat h3 { font-size:clamp(1.7rem,5vw,2.5rem); }
  .sq__beat p { font-size:.83rem; }

  .gp { min-height:100dvh; padding:3.6rem 7vw 1.35rem; }
  .dev--gp { height:min(54dvh,22rem); }
  .gp__h { font-size:clamp(2rem,6vw,3rem); }
  .gp__p { font-size:.86rem; }

  .dev--duo { height:min(42dvh,18rem); }
  .s5__quote { bottom:.55rem; }
  .q { font-size:clamp(1.1rem,3.8vw,1.55rem); }
  .s5__t { margin-top:.55rem; font-size:clamp(1.45rem,5vw,2.1rem) !important; }
  .q__meta { margin-top:.38rem; }

  .sk__inner { min-height:100dvh; padding:3.6rem 7vw 1.25rem; }
  .sk__t { font-size:clamp(3.8rem,12vw,6rem); }
  .sk__sub { margin-top:.75rem; font-size:.9rem; }
  .sk__cta { margin-top:.9rem; }
  .sk__cta .store { min-height:3.3rem; }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce) {
  html:not(.motion-forced) .gallery__track,
  html:not(.motion-forced) .wave i,
  html:not(.motion-forced) .rec { animation:none !important; }
}