/* ================================================================
   ققنوس داناپرداز — Visual System v5
   ----------------------------------------------------------------
   Dark-first. Ember-led. Editorial. Architectural. Restrained.

   Design principles
     1. Every element earns its place.
     2. Whitespace is the primary design material.
     3. One accent per surface.
     4. Motion is short, purposeful, transform+opacity only.
     5. Surfaces distinguish themselves by tone, not by borders.
     6. Persian typography first. Latin appears only as metadata.
     7. Each route is its own environment — same DNA, different weather.
   ================================================================ */


/* ================================================================
   1. TOKENS
   ================================================================ */
:root{
  /* ---- surface ladder ---- */
  --surface-0:      #08090C;
  --surface-1:      #0C0E13;
  --surface-2:      #12151B;
  --surface-warm:   #100C09;
  --surface-cool:   #0A0C14;

  /* ---- hairlines ---- */
  --line:           rgba(255,255,255,.055);
  --line-2:         rgba(255,255,255,.09);
  --line-3:         rgba(255,255,255,.16);

  /* ---- text ladder ---- */
  --tx:             #E8EBEF;
  --tx-2:           #9DA5B0;
  --tx-3:           #6E7682;
  --tx-4:           #4B515C;

  /* ---- brand accent ---- */
  --ember:          #E86A1E;
  --ember-soft:     #F2A96B;
  --ember-deep:     #A8440A;
  --ember-tint:     rgba(232,106,30,.10);
  --ember-line:     rgba(232,106,30,.28);

  /* ---- secondary accents ---- */
  --violet:         #9D8BF5;
  --violet-soft:    #C4B5FD;
  --violet-tint:    rgba(157,139,245,.09);
  --cyan:           #5FD4E8;
  --cyan-tint:      rgba(95,212,232,.08);

  /* ---- state ---- */
  --ok:             #4ADE80;
  --warn:           #F87171;

  /* ---- gradients ---- */
  --g-fire:         linear-gradient(135deg, #F5A96B 0%, var(--ember) 55%, var(--ember-deep) 100%);
  --g-duo:          linear-gradient(120deg, var(--ember) 0%, var(--violet) 100%);

  /* ---- geometry ---- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-pill: 999px;

  --maxw:  1180px;
  --pad:   32px;

  /* ---- spacing rhythm ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --s-13: 168px;

  /* ---- motion language ---- */
  --e:      cubic-bezier(.22,.68,.24,1);
  --e-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: 200ms;
  --t-base: 320ms;
  --t-slow: 500ms;

  /* ---- z ladder ---- */
  --z-atmos:   0;
  --z-reel:    1;
  --z-content: 4;
  --z-nav:     60;
  --z-chat:    80;
  --z-drawer:  90;
  --z-loader:  100;
}
@media (max-width:768px){
  :root{ --pad:22px; }
}


/* ================================================================
   2. RESET
   ================================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{ width:0; height:0; }

body{
  margin:0;
  background:var(--surface-0);
  color:var(--tx);
  font-family:'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16.5px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ border:0; background:none; padding:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.3; letter-spacing:-.015em; }
p{ margin:0; }

::selection{ background:var(--ember); color:#0A0503; }
:focus-visible{
  outline:2px solid var(--ember-soft);
  outline-offset:3px;
  border-radius:var(--r-sm);
}


/* ================================================================
   3. FONTS
   ================================================================ */
@font-face{ font-family:'Vazirmatn'; src:url('../font/Vazirmatn-Regular.woff2')   format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('../font/Vazirmatn-Medium.woff2')    format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('../font/Vazirmatn-SemiBold.woff2')  format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('../font/Vazirmatn-Bold.woff2')      format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Vazirmatn'; src:url('../font/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }


/* ================================================================
   4. TYPE SCALE
   ================================================================ */
.t-display{
  font-size:clamp(2.1rem, 1.85rem + 1.15vw, 3.6rem);
  line-height:1.14;
  letter-spacing:-.028em;
  font-weight:800;
}
.t-h2{
  font-size:clamp(1.65rem, 1.5rem + .8vw, 2.5rem);
  line-height:1.28;
  letter-spacing:-.022em;
  font-weight:800;
}
.t-h3{
  font-size:clamp(1.08rem, 1rem + .28vw, 1.35rem);
  line-height:1.5;
  font-weight:700;
  letter-spacing:-.01em;
}
.t-lead{
  font-size:clamp(1rem, .96rem + .18vw, 1.14rem);
  color:var(--tx-2);
  line-height:1.95;
  font-weight:400;
}
.t-sm{
  font-size:14.5px;
  color:var(--tx-2);
  line-height:1.85;
}
.t-mono{
  font-family:ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-3);
}

@media (min-width:1500px){
  body{ font-size:17px; }
  .t-display{ font-size:clamp(52px, 3.6vw, 72px); }
  .t-h2{ font-size:clamp(36px, 2.5vw, 50px); }
  .t-h3{ font-size:clamp(19px, 1.25vw, 24px); }
  .t-lead{ font-size:clamp(17px, 1.1vw, 21px); }
  .t-sm{ font-size:clamp(14.5px, .9vw, 16px); }
  .t-mono{ font-size:clamp(11.5px, .7vw, 13.5px); }
}

.grad,
.grad-duo{
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.grad{ background-image:var(--g-fire); }
.grad-duo{ background-image:var(--g-duo); }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad,.grad-duo{ color:var(--ember-soft); -webkit-text-fill-color:currentColor; }
}


/* ================================================================
   5. LAYOUT
   ================================================================ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
main, .footer{ position:relative; z-index:var(--z-content); }

.section{
  position:relative;
  isolation:isolate;
  padding-block:clamp(88px, 12vw, 168px);
  content-visibility:auto;
  contain-intrinsic-size:1px 720px;
}
.section-head{
  max-width:640px;
  margin-bottom:clamp(52px, 6vw, 84px);
}
.section-head .t-lead{ margin-top:20px; }

.section[data-tone]::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
}
.section[data-tone="warm"]::before{
  background:linear-gradient(180deg,
    transparent 0%,
    var(--surface-warm) 42%,
    transparent 100%);
}
.section[data-tone="cool"]::before{
  background:linear-gradient(180deg,
    transparent 0%,
    var(--surface-cool) 48%,
    transparent 100%);
}
.section[data-tone="deep"]::before{
  background:linear-gradient(180deg,
    transparent 0%,
    var(--surface-1) 50%,
    transparent 100%);
}
.section + .section::after{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline:18%;
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--ember-soft);
  font-family:'Vazirmatn', system-ui, sans-serif;
  font-size:clamp(12.5px, 1vw, 15px);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:none;
  margin-bottom:18px;
  opacity:.94;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  flex:none;
  background:linear-gradient(90deg, var(--ember), transparent);
}
.section-head .eyebrow{ font-size:clamp(12.5px, 1.02vw, 15px); margin-bottom:14px; }
.reel-slide .eyebrow{ font-size:clamp(13.5px, 1.15vw, 17px); letter-spacing:.12em; margin-bottom:20px; }


/* ================================================================
   6. BUTTONS
   ================================================================ */
.btn{
  --btn-bg:transparent;
  --btn-line:var(--line-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--btn-line);
  border-radius:var(--r-md);
  background:var(--btn-bg);
  font-weight:600;
  font-size:14.5px;
  color:var(--tx);
  cursor:pointer;
  transition:
    border-color var(--t-fast) var(--e),
    background var(--t-fast) var(--e),
    color var(--t-fast) var(--e),
    transform var(--t-fast) var(--e);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
.btn:hover{
  border-color:rgba(242,169,107,.32);
  background:rgba(255,255,255,.025);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  --btn-bg:linear-gradient(135deg, var(--ember) 0%, var(--ember-deep) 100%);
  --btn-line:transparent;
  color:#160803;
  font-weight:700;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  box-shadow:0 4px 18px -10px rgba(232,106,30,.5);
}
.btn-primary:hover{
  background:linear-gradient(135deg, var(--ember-soft) 0%, var(--ember) 100%);
  border-color:transparent;
  box-shadow:0 6px 22px -10px rgba(232,106,30,.65);
}
.btn-lg{ min-height:54px; padding:0 26px; font-size:15px; }
.btn-sm{ min-height:34px; padding:0 14px; font-size:13px; border-radius:var(--r-sm); }

.slide-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }


/* ================================================================
   7. ATMOSPHERE — aura (reads per-page tokens)
   ================================================================ */
.aura{
  position:fixed;
  inset:0;
  z-index:var(--z-atmos);
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.aura i{
  position:absolute;
  display:block;
  width:54vmax;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(110px);
  opacity:.16;
  will-change:transform;
}
.aura i:nth-child(1){
  background:radial-gradient(circle, var(--aura-a) 0%, transparent 68%);
  top:-22%; inset-inline-end:-16%;
  animation:drift-a 34s var(--e) infinite alternate;
}
.aura i:nth-child(2){
  background:radial-gradient(circle, var(--aura-b) 0%, transparent 68%);
  bottom:-26%; inset-inline-start:-18%;
  opacity:.10;
  animation:drift-b 40s var(--e) infinite alternate;
}
.aura i:nth-child(3){ display:none; }

@keyframes drift-a{ to{ transform:translate3d(-5vw,7vh,0) scale(1.10); } }
@keyframes drift-b{ to{ transform:translate3d(7vw,-5vh,0) scale(1.14); } }

body.home .aura{ opacity:.14; filter:saturate(.2); }
body.home .grad,
body.home .grad-duo{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--tx);
}
body.home .eyebrow{ color:var(--tx-3); }
body.home .eyebrow::before{ background:linear-gradient(90deg, var(--tx-3), transparent); }


/* ================================================================
   8. LOADER
   ================================================================ */
#loader{
  position:fixed;
  inset:0;
  z-index:var(--z-loader);
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--surface-0);
  transition:opacity 460ms var(--e), visibility 460ms;
}
#loader.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-core{
  display:grid;
  place-items:center;
  gap:26px;
  text-align:center;
  position:relative;
  z-index:2;
}
.loader-mark{
  position:relative;
  width:clamp(108px, 13vw, 148px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.loader-mark img{
  width:100%; height:100%;
  object-fit:contain;
  padding:14%;
  border-radius:50%;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 34px rgba(232,106,30,.18);
  filter:drop-shadow(0 0 16px rgba(232,106,30,.35));
}
.loader-ring{
  position:absolute;
  inset:-8%;
  border-radius:50%;
  border:1px solid transparent;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(232,106,30,.85) 44deg,
    rgba(242,169,107,.6) 72deg,
    transparent 124deg) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:ring-spin 2.2s linear infinite;
  opacity:.85;
  will-change:transform;
}
@keyframes ring-spin{ to{ transform:rotate(360deg); } }

.loader-bar{
  width:clamp(140px, 18vw, 200px);
  height:2px;
  background:rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
}
.loader-bar i{
  display:block;
  height:100%;
  width:var(--pc, 0%);
  background:linear-gradient(90deg, var(--ember-deep), var(--ember), var(--ember-soft));
  border-radius:2px;
  transition:width 200ms var(--e);
}
.loader-word{
  color:var(--tx-3);
  font-weight:600;
  letter-spacing:.26em;
  font-family:'Vazirmatn', system-ui, sans-serif;
  font-size:12.5px;
  opacity:.9;
}


/* ================================================================
   9. NAVIGATION
   ================================================================ */
.nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:var(--z-nav);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:
    background var(--t-base) var(--e),
    border-color var(--t-base) var(--e);
}
.nav::before{
  content:'';
  position:absolute;
  inset:-1px 0 auto 0;
  height:180%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,5,7,.72) 0%, rgba(4,5,7,.4) 45%, transparent 100%);
  transition:opacity var(--t-base) var(--e);
}
.nav.stuck::before{ opacity:0; }
.nav.stuck{
  background:rgba(7,8,10,.66);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:40px; height:40px; object-fit:contain; flex:none; }
.brand-tx{ display:grid; gap:0; line-height:1.15; }
.brand-tx b{
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--tx);
}
.brand-tx span{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--tx-3);
  margin-top:4px;
}

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  display:block;
  padding:8px 13px;
  border-radius:var(--r-sm);
  font-size:.915rem;
  color:#BCC4CF;
  transition:
    color var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
}
.nav-links a:hover,
.nav-links a[aria-current="true"]{
  color:var(--tx);
  background:rgba(255,255,255,.03);
}

.nav-act{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:transparent;
  cursor:pointer;
  color:var(--tx-2);
  transition:
    border-color var(--t-fast) var(--e),
    color var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
}
.icon-btn:hover{
  border-color:rgba(242,169,107,.35);
  color:var(--ember-soft);
  background:rgba(255,255,255,.02);
}
.icon-btn.on{ color:var(--ember-soft); border-color:var(--ember-line); }
.icon-btn svg{ width:17px; height:17px; }
.nav-act #sound{ display:none; }

.page-contact .nav-act .btn-primary{ display:none; }
@media (min-width:1025px){
  .page-contact .nav-links{
    display:inline-flex;
    align-items:center;
    transform:translateX(calc(50vw - 50%));
  }
  .page-contact .nav{ justify-content:flex-start; }
  .page-contact .brand{ margin-inline-end:auto; }
}


/* ================================================================
   10. BURGER + DRAWER
   ================================================================ */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:4px;
  justify-content:center;
  align-items:center;
  width:38px; height:38px;
  cursor:pointer;
  color:inherit;
}
.burger span{
  display:block;
  width:18px; height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform var(--t-base) var(--e), opacity var(--t-fast) var(--e);
}
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  background:rgba(6,7,10,.97);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-slow) var(--e), visibility var(--t-slow);
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer a{
  font-size:21px;
  font-weight:700;
  padding:13px 30px;
  text-align:center;
  color:var(--tx-2);
  transform:translateY(14px);
  opacity:0;
  transition:
    color var(--t-fast) var(--e),
    transform var(--t-slow) var(--e-out),
    opacity var(--t-slow) var(--e-out);
}
.drawer.open a{ opacity:1; transform:translateY(0); }
.drawer.open a:nth-child(1){ transition-delay:50ms; }
.drawer.open a:nth-child(2){ transition-delay:85ms; }
.drawer.open a:nth-child(3){ transition-delay:120ms; }
.drawer.open a:nth-child(4){ transition-delay:155ms; }
.drawer.open a:nth-child(5){ transition-delay:190ms; }
.drawer.open a:nth-child(6){ transition-delay:225ms; }
.drawer.open a:nth-child(7){ transition-delay:260ms; }
.drawer.open a:nth-child(8){ transition-delay:295ms; }
.drawer a:hover{ color:var(--ember-soft); }
.drawer-close{
  position:absolute;
  top:22px; left:22px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--tx-2);
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.drawer-close:hover{ color:var(--ember-soft); border-color:var(--ember-line); }

@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .btn-primary{ white-space:nowrap; }
  .nav.stuck{
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
    background:rgba(7,8,10,.94);
  }
}


/* ================================================================
   11. REEL — desktop
   ================================================================ */
.reel{ position:relative; }

.reel-stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  z-index:var(--z-reel);
  background:#040507;
  contain:paint;
}
.reel-video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  z-index:2;
  pointer-events:none;
  transition:opacity 560ms linear;
}
.reel-video.live{ opacity:1; z-index:3; }
.reel-video.holding{ opacity:1; z-index:2; transition:none; }

.reel-copy{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  align-items:center;
  padding-inline:clamp(28px, 6vw, 96px);
  padding-block:96px 168px;
}
.reel-slide{
  grid-area:1/1;
  width:clamp(300px, 42%, 580px);
  position:relative;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-4px);
  transition:opacity var(--t-slow) var(--e), visibility var(--t-slow);
}
.reel-slide.live{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.reel-slide:last-child{
  transition:opacity 820ms var(--e), visibility 820ms;
}
.reel-slide[data-side="right"]{ justify-self:right; text-align:right; }
.reel-slide[data-side="left"]{  justify-self:left;  text-align:right; }

.reel-slide[data-chapter="1"]{ align-self:end;  }
.reel-slide[data-chapter="2"],
.reel-slide[data-chapter="3"]{ align-self:start; margin-top:8%; }
.reel-slide[data-chapter="4"],
.reel-slide[data-chapter="5"]{ align-self:start; margin-top:12%; }
.reel-slide[data-chapter="6"]{ align-self:center; }
.reel-slide[data-chapter="7"]{ align-self:end; margin-bottom:4%; }

.reel-slide h1,
.reel-slide h2,
.reel-slide p,
.reel-slide .eyebrow{
  text-shadow:0 1px 2px rgba(0,0,0,.62), 0 2px 22px rgba(0,0,0,.42);
}
.reel-slide .t-lead{ margin-top:20px; color:#C8CFD8; }
.reel-slide .chips{ margin-top:26px; }
.reel-slide .slide-cta{ margin-top:34px; }

.reel-slide:first-child .t-display,
.reel-slide:first-child .t-lead,
.reel-slide:first-child .eyebrow{
  text-shadow:0 1px 3px rgba(0,0,0,.78), 0 2px 18px rgba(0,0,0,.55);
}
.reel-slide:first-child .t-lead{ color:#E0E4EA; }

.slide-veil{
  position:absolute;
  z-index:-1;
  inset:-24px -28px -28px -28px;
  border-radius:24px;
  background:radial-gradient(125% 100% at 50% 50%,
    rgba(4,5,7,.72) 0%,
    rgba(4,5,7,.48) 48%,
    rgba(4,5,7,.18) 74%,
    transparent 92%);
  pointer-events:none;
}
.reel-slide:first-child .slide-veil{ display:none; }

.rv{ display:block; overflow:hidden; }
.rv > i{
  display:block;
  font-style:normal;
  transform:translateY(105%) rotate(1.8deg);
  opacity:0;
  transition:transform 820ms var(--e-out), opacity 620ms var(--e);
}
.live .rv > i{ transform:none; opacity:1; }
.live .rv:nth-child(1) > i{ transition-delay:40ms; }
.live .rv:nth-child(2) > i{ transition-delay:110ms; }
.live .rv:nth-child(3) > i{ transition-delay:180ms; }

.stg{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--t-slow) var(--e), transform var(--t-slow) var(--e);
}
.live .stg{ opacity:1; transform:none; }
.live .stg-1{ transition-delay:220ms; }
.live .stg-2{ transition-delay:300ms; }
.live .stg-3{ transition-delay:380ms; }

.reel-rail{
  position:absolute;
  inset-block:0;
  inset-inline-start:clamp(22px, 2.8vw, 38px);
  display:grid;
  align-content:center;
  gap:16px;
  z-index:6;
}
.reel-rail button{
  --w:3px;
  width:var(--w);
  height:34px;
  padding:0;
  border-radius:2px;
  border:0;
  background:rgba(255,255,255,.11);
  position:relative;
  overflow:hidden;
  transition:background var(--t-base) var(--e);
}
.reel-rail button::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-start:0;
  height:var(--fill, 0%);
  border-radius:2px;
  background:var(--ember-soft);
}
.reel-rail button[aria-current="true"]{ background:rgba(255,255,255,.22); }
.reel-rail button:hover{ background:var(--ember-soft); }

.reel-hint{
  position:absolute;
  bottom:34px;
  inset-inline-end:clamp(28px, 6vw, 96px);
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--tx-3);
  z-index:6;
  font-size:10.5px;
  letter-spacing:.12em;
  opacity:.55;
  transition:opacity var(--t-base) var(--e);
}
.reel-hint:hover{ opacity:.85; }
.reel-hint.gone{ opacity:0; }
.reel-hint .t-mono{ font-size:10.5px; letter-spacing:.12em; }
.hint-arrow{
  width:13px; height:13px;
  color:var(--ember-soft);
  animation:hint-bob 2.1s var(--e) infinite;
}
@keyframes hint-bob{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%    { transform:translateY(4px); opacity:1; }
}

.reel-loader{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,
    rgba(8,7,14,.55) 0%,
    rgba(6,5,12,.85) 68%,
    rgba(3,2,6,.96) 100%);
  -webkit-backdrop-filter:blur(5px);
          backdrop-filter:blur(5px);
  transition:opacity var(--t-slow) var(--e), backdrop-filter var(--t-slow) var(--e);
  pointer-events:none;
}
.reel-loader.is-gone{
  opacity:0;
  -webkit-backdrop-filter:blur(0);
          backdrop-filter:blur(0);
}
.reel-loader__ring{
  width:36px; height:36px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.09);
  border-top-color:rgba(232,106,30,.85);
  animation:reel-spin .95s linear infinite;
}
@keyframes reel-spin{ to{ transform:rotate(360deg); } }

@media (max-height:860px) and (min-width:901px){
  .t-display{ font-size:clamp(28px, 4.4vh, 46px); }
  .reel-slide .t-lead{ font-size:clamp(13.5px, 1.9vh, 16.5px); margin-top:14px; }
  .reel-slide .slide-cta{ margin-top:22px; }
  .reel-slide .chips{ margin-top:16px; }
  .reel-copy{ padding-block:88px 148px; }
}
@media (max-height:700px) and (min-width:901px){
  .t-display{ font-size:clamp(24px, 4vh, 38px); }
  .reel-slide .btn-lg{ min-height:42px; padding:0 18px; font-size:13.5px; }
  .reel-copy{ padding-block:80px 120px; }
  .reel-hint{ display:none; }
}


/* ================================================================
   12. MOBILE INTRO
   ================================================================ */
.mob-intro{ display:none; }

@media (max-width:900px){
  .reel{ display:none; }
  .mob-intro{ display:block; }

  .mob-hero{
    position:relative;
    overflow:hidden;
    min-height:100svh;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
  }
  .mob-hero video{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 30%;
    background:var(--surface-warm);
  }
  .mob-hero-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(120% 62% at 50% 100%,
        rgba(8,9,13,.94) 0%, rgba(8,9,13,.55) 46%, transparent 78%),
      linear-gradient(180deg,
        rgba(8,9,13,.28) 0%, transparent 30%,
        rgba(8,9,13,.28) 62%, rgba(8,9,13,.9) 100%);
  }
  .mob-hero-copy{
    position:relative;
    z-index:2;
    width:100%;
    padding:28px 22px calc(44px + env(safe-area-inset-bottom));
  }
  .mob-hero-copy .eyebrow{
    color:var(--ember-soft);
    text-shadow:0 2px 16px rgba(0,0,0,.85);
  }
  .mob-hero-copy .t-display{
    font-size:clamp(28px, 8.4vw, 40px);
    line-height:1.2;
    margin-block:10px 12px;
    text-shadow:0 4px 24px rgba(0,0,0,.85);
  }
  .mob-hero-copy .t-lead{
    font-size:clamp(14px, 3.9vw, 16px);
    line-height:1.9;
    color:rgba(255,255,255,.9);
  }
  .mob-hero-copy .slide-cta{
    flex-direction:column;
    gap:10px;
    margin-top:24px;
  }
  .mob-hero-copy .slide-cta .btn{
    width:100%;
    min-height:50px;
    font-size:14.5px;
    justify-content:center;
  }

  .mob-chapters{ display:grid; gap:2px; background:var(--surface-0); }
  .mob-chapter{
    position:relative;
    overflow:hidden;
    padding:60px 22px 56px;
    background:var(--surface-0);
    content-visibility:auto;
    contain-intrinsic-size:1px 420px;
  }
  .mob-chapter::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.85;
  }
  .mob-chapter[data-glow="warm"]::before{
    background:linear-gradient(180deg, var(--surface-warm) 0%, transparent 60%);
  }
  .mob-chapter[data-glow="cool"]::before{
    background:linear-gradient(180deg, var(--surface-cool) 0%, transparent 60%);
  }
  .mob-chapter + .mob-chapter{ border-top:1px solid var(--line); }
  .mob-chapter > *{ position:relative; z-index:1; }
  .mob-chapter .eyebrow{ color:var(--ember-soft); }
  .mob-chapter .t-h2{
    font-size:clamp(24px, 7vw, 30px);
    line-height:1.3;
    margin-block:10px 12px;
  }
  .mob-chapter .t-lead{
    font-size:clamp(14px, 3.8vw, 15.5px);
    line-height:1.9;
    color:var(--tx-2);
  }
  .mob-chapter .chips{ margin-top:16px; gap:7px; }
  .mob-chapter .slide-cta{
    flex-direction:column;
    gap:10px;
    margin-top:24px;
  }
  .mob-chapter .slide-cta .btn{
    width:100%;
    min-height:50px;
    font-size:14.5px;
    justify-content:center;
  }
}
@media (max-width:480px){ .mob-chapter{ padding:52px 18px 48px; } }


/* ================================================================
   13. CHIPS
   ================================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:7px; min-width:0; }
.chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:rgba(12,14,20,.5);
  font-size:.82rem;
  color:var(--tx-2);
  transition:
    border-color var(--t-fast) var(--e),
    color var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
  max-width:100%;
}
.chip:hover{
  border-color:var(--ember-line);
  color:var(--ember-soft);
  background:var(--ember-tint);
}


/* ================================================================
   14. GRIDS + CARDS
   ================================================================ */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  position:relative;
  padding:30px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  overflow:hidden;
  min-width:0;
  transition:
    border-color var(--t-base) var(--e),
    background var(--t-base) var(--e),
    transform var(--t-base) var(--e);
}
.card:hover{
  border-color:var(--line-2);
  background:var(--surface-2);
  transform:translateY(-2px);
}
.card h3{
  font-size:1.1rem;
  margin-bottom:12px;
  letter-spacing:-.008em;
}
.card p{
  font-size:.95rem;
  color:var(--tx-2);
  line-height:1.9;
}

.card .ico,
.info-row .ico{
  width:38px; height:38px;
  margin-bottom:20px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  color:var(--ember-soft);
  background:transparent;
}
.card .ico svg{ width:18px; height:18px; }
.grid > .card:nth-child(3n+2) .ico{ color:var(--violet-soft); }
.grid > .card:nth-child(3n+3) .ico{ color:var(--cyan); }

.card-link{ display:block; }
.card-go{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:22px;
  color:var(--ember-soft);
  font-size:12.5px;
  letter-spacing:.08em;
  transition:gap var(--t-base) var(--e);
}
.card-go::after{ content:'←'; font-size:13px; }
.card-link:hover .card-go{ gap:12px; }

.mini{
  padding:20px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  display:grid;
  gap:5px;
  transition:border-color var(--t-base) var(--e), background var(--t-base) var(--e);
}
.mini:hover{ border-color:var(--line-2); background:var(--surface-2); }
.mini b{ font-size:15px; font-weight:700; }
.mini span{ font-size:13.5px; color:var(--tx-3); }

.cta-bar{
  margin-top:clamp(48px, 6vw, 80px);
  padding:clamp(26px, 3vw, 36px);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:linear-gradient(120deg, var(--ember-tint), var(--violet-tint));
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  align-items:center;
  justify-content:space-between;
}
.cta-bar h3{ font-size:19px; margin-bottom:5px; }


/* ================================================================
   15. SERVICE INDEX — editorial
   ================================================================ */
.svc{ position:relative; }
.svc-list{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.svc-row{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:clamp(22px, 2.6vw, 32px) 4px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  min-height:clamp(80px, 7.4vw, 124px);
  transition:padding-inline var(--t-base) var(--e);
}
.svc-row:last-child{ border-bottom:0; }

.svc-row .num{
  min-width:34px;
  color:var(--tx-3);
  font-weight:700;
  font-size:clamp(12px, .95vw, 15px);
  transition:color var(--t-base) var(--e), opacity var(--t-base) var(--e);
  opacity:.55;
}
.svc-row h3{
  font-size:clamp(1.22rem, 1.1rem + .85vw, 2.15rem);
  line-height:1.45;
  font-weight:800;
  color:var(--tx-3);
  letter-spacing:-.018em;
  transition:color var(--t-base) var(--e);
}
.svc-row .go{
  width:34px; height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--tx-3);
  opacity:0;
  transform:translateX(10px);
  transition:
    opacity var(--t-base) var(--e),
    transform var(--t-base) var(--e),
    border-color var(--t-base) var(--e),
    color var(--t-base) var(--e),
    background var(--t-base) var(--e);
}
.svc-row:hover,
.svc-row:focus-within{ padding-inline:16px; }
.svc-row:hover h3,
.svc-row:focus-within h3{ color:var(--tx); }
.svc-row:hover .num,
.svc-row:focus-within .num{ color:var(--ember-soft); opacity:1; }
.svc-row:hover .go,
.svc-row:focus-within .go{
  opacity:1;
  transform:none;
  border-color:transparent;
  color:#160803;
  background:var(--g-fire);
}
.svc-row::after{
  content:'';
  position:absolute;
  inset-block:18%;
  inset-inline-start:0;
  width:2px;
  background:var(--ember-soft);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform var(--t-base) var(--e-out);
}
.svc-row:hover::after,
.svc-row:focus-within::after{ transform:scaleY(1); }

.svc-row.open h3{ color:var(--tx); }
.svc-row.open .num{ color:var(--ember-soft); opacity:1; }

.svc-row .inline-detail{
  display:block;
  grid-column:1/-1;
  overflow:hidden;
  max-height:0;
  opacity:0;
  padding-block:0;
  transition:
    max-height var(--t-base) var(--e),
    opacity var(--t-base) var(--e),
    padding var(--t-base) var(--e);
}
.svc-row.open .inline-detail{
  max-height:min(70vh, 620px);
  opacity:1;
  padding-block:6px 22px;
}
.svc-row .inline-detail p{
  font-size:clamp(14px, .95vw, 16.5px);
  color:var(--tx-2);
  line-height:1.95;
  max-width:72ch;
}
.svc-row .inline-detail .chips{ margin-top:16px; }
body.svc-float .svc-row .inline-detail{ display:none; }

.svc-detail{
  display:none;
  position:fixed;
  inset-inline-end:26px;
  bottom:26px;
  width:min(340px, calc(100vw - 52px));
  z-index:calc(var(--z-chat) - 5);
  padding:22px 24px;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:rgba(10,12,15,.9);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
  opacity:0;
  transform:translateY(16px) scale(.98);
  pointer-events:none;
  transition:opacity var(--t-base) var(--e), transform var(--t-base) var(--e);
}
.svc-detail::before{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--g-duo);
  opacity:.7;
}
.svc-detail.live{ opacity:1; transform:none; }
body.svc-float .svc-detail{ display:block; }
.svc-detail .t-mono{
  color:var(--ember-soft);
  display:block;
  margin-bottom:10px;
  font-size:11px;
}
.svc-detail p{ font-size:13.5px; color:var(--tx-2); line-height:1.9; }
.svc-detail .chips{ margin-top:16px; }
.svc-detail .chip{ font-size:11px; padding:4px 10px; }

@media (min-width:1500px){
  .svc-detail{ width:min(28vw, 400px); }
  .svc-detail p{ font-size:clamp(14px, .85vw, 16.5px); }
  .svc-row{ min-height:clamp(100px, 6.8vw, 140px); }
  .svc-row h3{ font-size:clamp(30px, 2.1vw, 46px); }
}


/* ================================================================
   16. PRODUCT + PROCESS
   ================================================================ */
.product{ position:relative; overflow:hidden; }
.product::before{
  content:'';
  position:absolute;
  inset-block-start:-30%;
  inset-inline-end:-10%;
  width:56vw;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--ember-tint), transparent 68%);
  pointer-events:none;
}
.product-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(32px, 5vw, 68px);
  align-items:center;
}
@media (max-width:940px){ .product-grid{ grid-template-columns:1fr; } }

.shot{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--surface-1);
  box-shadow:0 30px 80px -50px rgba(0,0,0,.9);
}
.shot-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:11px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-bottom:1px solid var(--line);
}
.shot-bar i{ width:9px; height:9px; border-radius:50%; display:block; flex:none; }
.shot-bar i:nth-child(1){ background:#FF5F57; }
.shot-bar i:nth-child(2){ background:#FEBC2E; }
.shot-bar i:nth-child(3){ background:#28C840; }
.shot-bar span{
  margin-inline-start:auto;
  font-size:11px;
  color:var(--tx-3);
  letter-spacing:.04em;
}
.shot img{ display:block; width:100%; height:auto; }
.shot-cap{
  font-size:13px;
  color:var(--tx-3);
  margin-top:12px;
  text-align:center;
  line-height:1.9;
}
.shot-note{
  padding:9px 14px;
  font-size:11.5px;
  color:var(--ember-soft);
  background:var(--ember-tint);
  border-top:1px dashed var(--ember-line);
}

.shots{
  display:grid;
  gap:clamp(28px, 3.6vw, 52px);
  margin-top:clamp(32px, 4vw, 56px);
}
.shots .shot{ width:100%; }
.shot-lead{ width:90%; justify-self:start; margin-right:0; }
.shot-lead-in{ max-width:72ch; margin:clamp(10px, 1.6vw, 20px) 0 4px; }
.shot-lead-in h3{ margin:0 0 .45em; color:var(--tx); }
.shot-lead-in p{ margin:0; color:var(--tx-2); line-height:1.95; font-size:.98rem; }
.shot-sub{ width:min(760px, 100%); justify-self:center; margin-top:6px; }

.feat{ display:grid; gap:14px; margin-top:26px; }
.feat li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14.5px;
  color:var(--tx-2);
  line-height:1.85;
}
.feat li svg{
  flex:none;
  width:16px; height:16px;
  margin-top:6px;
  color:var(--ember-soft);
}
.feat li:nth-child(2n) svg{ color:var(--violet-soft); }
.feat li:nth-child(3n) svg{ color:var(--cyan); }

.steps{
  counter-reset:s;
  display:grid;
  gap:0;
  margin-top:24px;
}
.step{
  counter-increment:s;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px, 4vw, 56px);
  align-items:start;
  padding:clamp(28px, 3.4vw, 44px) 0;
  border-bottom:1px solid var(--line);
}
.step:first-child{ border-top:1px solid var(--line); }
.step::before{
  content:'0' counter(s);
  font-family:ui-monospace, monospace;
  font-size:clamp(28px, 3vw, 44px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--tx-4);
  padding-top:6px;
  transition:color var(--t-base) var(--e);
}
.step:hover::before{ color:var(--ember-soft); }
.step h3{ font-size:19px; margin-bottom:10px; }
.step p{
  font-size:15px;
  color:var(--tx-2);
  line-height:1.95;
  max-width:70ch;
}


/* ================================================================
   17. PRIVATE AI — evidence, not feature cards
   ================================================================ */
#private-ai .grid-3{
  border-top:1px solid var(--line-2);
  padding-top:clamp(40px, 5vw, 64px);
  gap:clamp(24px, 3vw, 44px);
}
#private-ai .card{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0 clamp(16px, 2vw, 28px) 0 0;
}
#private-ai .card:hover{
  background:transparent;
  transform:none;
  border-color:transparent;
}
#private-ai .card + .card{
  padding-inline-start:clamp(24px, 3vw, 44px);
  border-inline-start:1px solid var(--line);
}
#private-ai .card .ico{
  color:var(--ember-soft);
  border-color:var(--line-2);
  margin-bottom:22px;
}
#private-ai .card h3{
  font-size:1.08rem;
  margin-bottom:12px;
}
#private-ai .card p{
  font-size:14.5px;
  line-height:1.95;
}


/* ================================================================
   18. CONTACT / FORM
   ================================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px, 4.5vw, 60px);
}
@media (max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }

.info-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.info-row .ico{
  margin-bottom:0;
  width:36px; height:36px;
  color:var(--ember-soft);
}
.info-row .ico svg{ width:16px; height:16px; }
.info-row:nth-child(2) .ico{ color:var(--violet-soft); }
.info-row:nth-child(3) .ico{ color:var(--cyan); }
.info-row b{
  display:block;
  font-size:.98rem;
  color:var(--tx);
  font-weight:600;
  margin-bottom:3px;
}
.info-row a,
.info-row span{ font-size:.96rem; line-height:1.9; }
.info-row a:hover{ color:var(--ember-soft); }
.info-row a bdi{
  direction:ltr;
  unicode-bidi:isolate;
  font-family:ui-monospace, monospace;
  letter-spacing:.02em;
}
.phones{ display:grid; gap:2px; }
.phones a{
  direction:ltr;
  text-align:right;
  font-family:ui-monospace, monospace;
  letter-spacing:.02em;
}

.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{
  font-size:.96rem;
  font-weight:600;
  color:var(--tx);
  margin-bottom:7px;
  display:block;
}
.field .req{ color:var(--ember-soft); margin-inline-start:3px; }
.field input,
.field textarea,
.field select{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface-2);
  color:var(--tx);
  font-size:1rem;
  line-height:1.7;
  transition:
    border-color var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--tx-4); }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--ember-line);
  background:rgba(255,255,255,.02);
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.9; }
.field input[type=tel]{ direction:ltr; text-align:right; }
.field .err{ font-size:.85rem; color:var(--warn); min-height:0; }
.field .hint{ font-size:.85rem; color:var(--tx-3); margin-top:6px; }
.field.bad input, .field.bad textarea{ border-color:var(--warn); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }
.hp{
  position:absolute;
  inset-inline-start:-9999px;
  width:1px; height:1px;
  opacity:0;
}
.form-note{ font-size:12.5px; color:var(--tx-3); }
.form-msg{
  padding:13px 15px;
  border-radius:var(--r-md);
  font-size:14px;
  border:1px solid var(--line);
  display:none;
}
.form-msg.ok{
  display:block;
  border-color:rgba(74,222,128,.32);
  background:rgba(74,222,128,.06);
  color:#86EFAC;
}
.form-msg.no{
  display:block;
  border-color:rgba(248,113,113,.32);
  background:rgba(248,113,113,.06);
  color:#FCA5A5;
}

select option, select optgroup{ background:#FFFFFF; color:#111418; }
select option:checked, select option:hover{ background:#FFE8D2; color:#111418; }
.field select{ color:var(--tx); background-color:var(--surface-2); }

.map{
  margin:22px 0 0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--surface-1);
}
.map img{ display:block; width:100%; height:auto; }
.map figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 16px;
  font-size:13px;
  color:var(--tx-3);
  border-top:1px solid var(--line);
}
.map figcaption a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ember-soft);
  font-size:13px;
  white-space:nowrap;
}
.map figcaption a svg{ width:14px; height:14px; }
.map figcaption a:hover{ text-decoration:underline; }
@media (max-width:520px){
  .map figcaption{ flex-direction:column; align-items:flex-start; gap:8px; }
}


/* ================================================================
   19. FOOTER
   ================================================================ */
.footer{
  position:relative;
  border-top:1px solid var(--line-2);
  background:var(--surface-0);
  padding-block:clamp(56px, 7vw, 88px) clamp(28px, 3.4vw, 40px);
}
.footer::before{
  content:'';
  position:absolute;
  inset-block-start:-1px;
  inset-inline:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--ember), var(--violet), transparent);
  opacity:.28;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child{ grid-column:1/-1; margin-bottom:16px; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-grid > div:first-child{ margin-bottom:0; }
}
.footer .brand img{ width:52px; height:52px; }
.footer .brand-tx b{ font-size:20px; }
.footer .brand-tx span{ font-size:10.5px; }
.footer h4{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ember-soft);
  opacity:.8;
  font-weight:500;
  text-transform:uppercase;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.footer ul{ display:grid; gap:2px; }
.footer li a{
  display:block;
  padding:7px 0;
  font-size:14px;
  color:var(--tx-2);
  transition:color var(--t-fast);
}
.footer li a:hover{ color:var(--ember-soft); }
.footer li a bdi{
  direction:ltr;
  unicode-bidi:isolate;
  font-family:ui-monospace, monospace;
  letter-spacing:.02em;
}
.footer-btm{
  margin-top:clamp(44px, 5vw, 64px);
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  font-size:12.5px;
  color:var(--tx-3);
}
.foot-blurb{
  margin-top:20px;
  max-width:38ch;
  font-size:14px;
  color:var(--tx-2);
  line-height:1.9;
}

.social{ display:flex; gap:8px; margin-top:18px; }
.social a{
  width:30px; height:30px;
  border-radius:var(--r-sm);
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  color:var(--tx-3);
  background:transparent;
  transition:
    color var(--t-fast) var(--e),
    border-color var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
}
.social a:hover{
  color:var(--ember-soft);
  border-color:var(--ember-line);
  background:var(--ember-tint);
}
.social svg{ width:14px; height:14px; stroke-width:1.5; }


/* ================================================================
   20. CHAT PANEL
   ================================================================ */
.chat-fab{
  position:fixed;
  bottom:24px;
  inset-inline-start:26px;
  z-index:var(--z-chat);
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:linear-gradient(150deg, var(--ember-tint), rgba(12,14,20,.9));
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 12px 32px -16px rgba(232,106,30,.45);
  transition:transform var(--t-base) var(--e), border-color var(--t-base) var(--e);
}
.chat-fab:hover{ transform:scale(1.04); border-color:var(--ember-line); }
.chat-fab img{ width:26px; height:26px; object-fit:contain; }
.chat-fab::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid transparent;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    var(--ember-soft) 90deg,
    rgba(242,169,107,.7) 150deg,
    transparent 220deg) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:ring-spin 3.6s linear infinite;
  pointer-events:none;
  opacity:.7;
}
.chat-fab.open::after{ display:none; }

.chat-panel{
  position:fixed;
  bottom:88px;
  inset-inline-start:26px;
  z-index:var(--z-chat);
  width:min(380px, calc(100vw - 32px));
  height:min(568px, calc(100dvh - 128px));
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.98);
  transition:
    opacity var(--t-base) var(--e),
    transform var(--t-base) var(--e-out),
    visibility var(--t-base);
}
.chat-panel.open{ opacity:1; visibility:visible; transform:none; }

.chat-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.chat-top img{ width:28px; height:28px; object-fit:contain; }
.chat-top .who{
  flex:1;
  display:grid;
  line-height:1.35;
  min-width:0;
}
.chat-top .who b{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
}
.chat-top .who span{
  font-size:11px;
  color:var(--tx-3);
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
.dot{ width:5px; height:5px; border-radius:50%; background:var(--ok); flex:none; }
.dot.off{ background:var(--tx-3); }
.chat-top button{
  width:30px; height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--tx-2);
  cursor:pointer;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.chat-top button:hover{ color:var(--tx); border-color:var(--line-2); }

.chat-body{
  flex:1;
  overflow-y:auto;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }

.msg{
  display:flex;
  gap:9px;
  max-width:88%;
  animation:msg-in 320ms var(--e-out);
}
@keyframes msg-in{ from{ opacity:0; transform:translateY(6px); } }
.msg.me{ align-self:flex-start; flex-direction:row-reverse; }
.msg.ai{ align-self:flex-end; }
.msg .av{
  flex:none;
  width:24px; height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
}
.msg .av img{ width:16px; height:16px; object-fit:contain; }
.msg .bub{
  padding:11px 14px;
  border-radius:var(--r-md);
  font-size:14px;
  line-height:1.9;
  border:1px solid var(--line);
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;
}
.msg.ai .bub{
  background:var(--surface-2);
  border-start-end-radius:4px;
}
.msg.me .bub{
  background:linear-gradient(135deg, var(--ember-tint), var(--violet-tint));
  border-color:var(--ember-line);
  border-start-start-radius:4px;
}
.msg .bub p{ margin:0; }
.msg .bub p + p{ margin-top:9px; }
.msg .bub ul{ list-style:disc; padding-inline-start:19px; margin:8px 0; }
.msg .bub li{ margin:3px 0; }
.msg .bub code{
  font-family:ui-monospace, monospace;
  font-size:12.5px;
  background:rgba(255,255,255,.06);
  padding:1px 5px;
  border-radius:4px;
}
.msg .bub a{ color:var(--ember-soft); text-decoration:underline; }

.srcs{
  margin-top:10px;
  padding-top:9px;
  border-top:1px dashed var(--line);
}
.srcs b{ font-size:11px; color:var(--tx-3); font-weight:400; }
.srcs .chips{ margin-top:6px; }
.srcs .chip{ font-size:10.5px; padding:3px 9px; }

.typing{ display:flex; gap:4px; padding:12px 15px; }
.typing i{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--tx-3);
  animation:blink 1.3s var(--e) infinite;
}
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{
  0%,60%,100%{ opacity:.25; transform:translateY(0); }
  30%        { opacity:1; transform:translateY(-3px); }
}

.chat-foot{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:grid;
  gap:8px;
}
.chat-input{
  display:flex;
  align-items:flex-end;
  gap:8px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
  padding:6px;
  transition:border-color var(--t-fast);
}
.chat-input:focus-within{ border-color:var(--ember-line); }
.chat-input textarea{
  flex:1;
  border:0;
  background:transparent;
  resize:none;
  max-height:112px;
  padding:7px 8px;
  font-size:14px;
  line-height:1.7;
}
.chat-input textarea:focus{ outline:none; }
.chat-send{
  flex:none;
  width:32px; height:32px;
  border-radius:var(--r-sm);
  border:0;
  background:var(--g-fire);
  color:#160803;
  display:grid;
  place-items:center;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.chat-send:disabled{ opacity:.35; cursor:not-allowed; }
.chat-send:not(:disabled):hover{ transform:scale(1.04); }
.chat-send svg{ width:15px; height:15px; }
.chat-legal{
  font-size:10.5px;
  color:var(--tx-3);
  text-align:center;
  line-height:1.7;
}

.music-fab{
  position:fixed;
  bottom:26px;
  inset-inline-end:26px;
  z-index:calc(var(--z-chat) - 1);
  width:38px; height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  border:1px solid var(--line);
  background:rgba(12,14,20,.62);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  color:var(--tx-3);
  transition:
    color var(--t-fast) var(--e),
    border-color var(--t-fast) var(--e),
    transform var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
}
.music-fab:hover{
  transform:scale(1.05);
  border-color:var(--ember-line);
  color:var(--ember-soft);
  background:rgba(12,14,20,.85);
}
.music-fab.on{ color:var(--ember-soft); border-color:var(--ember-line); }
.music-fab svg{ width:15px; height:15px; }
.music-fab .i-off{ display:none; }
.music-fab.muted .i-on{ display:none; }
.music-fab.muted .i-off{ display:block; }
.music-fab.muted{ color:var(--tx-3); border-color:var(--line); }

@media (max-width:520px){
  .music-fab{ bottom:20px; inset-inline-end:20px; width:36px; height:36px; }
  .music-fab svg{ width:13px; height:13px; }
  .chat-fab{ inset-inline-start:20px; bottom:20px; width:48px; height:48px; }
}


/* ================================================================
   21. INNER PAGES — page hero
   ================================================================ */
.page-hero{
  position:relative;
  isolation:isolate;
  padding-block:clamp(120px, 15vh, 190px) clamp(64px, 9vw, 110px);
}
.page-hero[data-tone]::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.page-hero[data-tone="warm"]::before{
  background:linear-gradient(180deg, var(--surface-warm), transparent 70%);
}
.page-hero[data-tone="cool"]::before{
  background:linear-gradient(180deg, var(--surface-cool), transparent 70%);
}
.page-hero .t-display{ margin-bottom:22px; }
.page-hero .t-lead{ max-width:54ch; }
.page-hero-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(32px, 5vw, 68px);
  align-items:center;
}
@media (max-width:940px){ .page-hero-grid{ grid-template-columns:1fr; } }

.page-hero-grid > .mark-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(20px, 2.4vw, 32px);
  align-items:center;
  text-align:right;
}
.page-hero-grid > .mark-card img{ width:clamp(96px, 11vw, 128px); }
.page-hero-grid > .mark-card figcaption{ margin-top:0; }
.page-hero-grid > .mark-card figcaption span{ max-width:38ch; }
@media (max-width:760px){
  .page-hero-grid > .mark-card{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
}

.story-body{ max-width:72ch; display:grid; gap:22px; }
.story-body p{
  font-size:clamp(15px, 1.18vw, 17px);
  color:var(--tx-2);
  line-height:2.05;
}
.story-lead{
  font-size:clamp(20px, 2.4vw, 27px) !important;
  font-weight:800;
  line-height:1.6 !important;
  color:var(--tx) !important;
  background-image:var(--g-fire);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .story-lead{ -webkit-text-fill-color:currentColor; color:var(--ember-soft) !important; }
}
.story-mark{
  color:var(--tx) !important;
  font-weight:700;
  padding-inline-start:18px;
  border-inline-start:2px solid transparent;
  border-image:var(--g-duo) 1;
}
.story-quote{
  margin:14px 0 0;
  padding:26px 28px;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:linear-gradient(120deg, var(--ember-tint), var(--violet-tint));
  font-size:clamp(17px, 1.9vw, 21px);
  font-weight:700;
  line-height:1.85;
}


/* ================================================================
   22. VOICE DEMO PANEL
   ================================================================ */
.voice-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
}
@media (max-width:980px){ .voice-grid{ grid-template-columns:1fr; } }

.vdemo{
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  padding:20px;
  box-shadow:0 30px 80px -44px rgba(0,0,0,.9);
  position:relative;
  overflow:hidden;
  contain:paint;
}
.vdemo::before{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:2px;
  background:linear-gradient(90deg, var(--ember), var(--violet), transparent);
  opacity:.6;
}
.vdemo-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.vdemo-top b{ display:block; font-size:14.5px; }
.vdemo-top .t-sm{
  color:var(--tx-3);
  font-size:12.5px;
  display:flex;
  align-items:center;
  gap:7px;
}
.vdemo-top .t-sm::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  animation:live-dot 2.4s var(--e) infinite;
}
@keyframes live-dot{
  0%  { box-shadow:0 0 0 0 rgba(74,222,128,.45); }
  70% { box-shadow:0 0 0 7px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.live-dot{ display:inline-flex; align-items:center; gap:6px; color:var(--cyan); }
.live-dot::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  animation:live-pulse 1.9s var(--e) infinite;
}
@keyframes live-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.vwave{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 15px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-2);
  contain:paint;
}
.vplay{
  position:relative;
  flex:none;
  width:50px; height:50px;
  border-radius:50%;
  background:var(--g-fire);
  color:#160803;
  display:grid;
  place-items:center;
  transition:transform var(--t-fast) var(--e);
}
.vplay::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid var(--ember-line);
  pointer-events:none;
  animation:pulse-ring 2.6s var(--e) infinite;
}
.vplay.on::after{ animation-duration:1.3s; }
.vplay:hover{ transform:scale(1.05); }
.vplay svg{ width:20px; height:20px; }
.vplay .i-stop{ display:none; }
.vplay.on .i-play{ display:none; }
.vplay.on .i-stop{ display:block; }

.vbars{
  flex:1;
  display:flex;
  align-items:center;
  gap:3px;
  height:42px;
  direction:ltr;
}
.vbars i{
  flex:1;
  display:block;
  min-width:2px;
  border-radius:2px;
  height:var(--h, 18%);
  background:linear-gradient(180deg, var(--ember-soft), var(--ember));
  opacity:.5;
}
.vbars i.hot{
  opacity:1;
  background:linear-gradient(180deg, #fff, var(--ember-soft));
}
.vcount{ flex:none; color:var(--tx-3); }

.vlines{
  display:grid;
  gap:8px;
  max-height:340px;
  overflow-y:auto;
  padding-inline-end:4px;
  scrollbar-width:none;
  contain:content;
  overscroll-behavior:contain;
}
.vlines::-webkit-scrollbar{ width:0; }
.vline{ min-width:0; }
.vline-btn{
  width:100%;
  text-align:start;
  position:relative;
  display:grid;
  gap:5px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:transparent;
  min-width:0;
  transition:
    border-color var(--t-fast) var(--e),
    background var(--t-fast) var(--e);
}
.vline-btn::before{
  content:'';
  position:absolute;
  inset-block:10px;
  inset-inline-start:0;
  width:2px;
  border-radius:2px;
  background:var(--line-3);
  transition:background var(--t-fast) var(--e);
}
.vline-btn:hover{
  border-color:var(--line-2);
  background:rgba(255,255,255,.02);
}
.vwho{
  color:var(--tx-3);
  font-size:clamp(11.5px, .85vw, 13px) !important;
  letter-spacing:.1em;
}
.vtext{
  font-size:14px;
  line-height:1.9;
  color:var(--tx-2);
  overflow-wrap:anywhere;
  min-width:0;
}
.vline-bot{ background:linear-gradient(90deg, var(--ember-tint), transparent); }
.vline-bot::before{ background:var(--ember-soft); }
.vline-bot .vwho{ color:var(--ember-soft); }
.vline-usr,
.vline-human{ background:linear-gradient(90deg, var(--violet-tint), transparent); }
.vline-usr::before,
.vline-human::before{ background:var(--violet); }
.vline-usr .vwho,
.vline-human .vwho{ color:var(--violet-soft); }
.vline.on .vline-btn,
.vline-btn.playing{
  border-color:var(--ember-line);
  background:linear-gradient(90deg, var(--ember-tint), transparent);
}
.vline.on .vline-btn::before,
.vline-btn.playing::before{
  background:linear-gradient(180deg, var(--ember-soft), var(--violet));
}
.vline.on .vtext{ color:var(--tx); }
.vline.done .vline-btn{ opacity:.5; }
.vnote{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  color:var(--tx-3);
  font-size:12px;
}
.voice-grid .chips{ margin-top:22px; }


/* ================================================================
   23. CHAT PREVIEW (rag hero)
   ================================================================ */
.hero-split .wrap{
  display:grid;
  gap:clamp(30px, 4vw, 64px);
  align-items:center;
}
@media (min-width:1000px){
  .hero-split .wrap{ grid-template-columns:1.15fr .85fr; }
}
.hero-demo{
  display:grid;
  justify-items:center;
  width:90%;
  justify-self:start;
}

.cw{
  width:min(460px, 100%);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface-1);
  box-shadow:0 30px 80px -44px rgba(0,0,0,.9);
  transform:perspective(1200px) rotateY(8deg) rotateX(2deg) scale(1.02);
  transform-origin:center right;
  transition:transform var(--t-slow) var(--e-out);
}
.hero-demo:hover .cw{
  transform:perspective(1200px) rotateY(2deg) rotateX(1deg) scale(1.04);
}
.cw-top{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.cw-top img{ border-radius:6px; flex:none; }
.cw-top > div{ display:grid; gap:3px; min-width:0; }
.cw-top b{ font-size:14.5px; }
.cw-top span{
  font-size:11px;
  color:var(--tx-3);
  display:flex;
  align-items:center;
  gap:6px;
}
.cw-top span i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ok);
  flex:none;
}
.cw-x{
  margin-inline-start:auto;
  color:var(--tx-3);
  font-size:18px;
  line-height:1;
}
.cw-body{
  padding:15px;
  display:grid;
  gap:11px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-width:0;
}
.cw-msg{
  font-size:13.5px;
  line-height:1.95;
  padding:11px 14px;
  border-radius:var(--r-md);
  max-width:88%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.cw-msg.bot{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-start-start-radius:5px;
  justify-self:start;
  color:var(--tx-2);
}
.cw-msg.me{
  background:linear-gradient(135deg, var(--ember-tint), rgba(232,106,30,.05));
  border:1px solid var(--ember-line);
  border-start-end-radius:5px;
  justify-self:end;
  color:var(--tx);
}
.cw-src{
  display:block;
  margin-top:9px;
  padding-top:8px;
  border-top:1px dashed var(--line);
  font-size:10.5px;
  color:var(--ember-soft);
  letter-spacing:.03em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.cw-in{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.2);
}
.cw-in span{ flex:1; font-size:12.5px; color:var(--tx-3); }
.cw-in i{
  width:26px;
  height:26px;
  border-radius:var(--r-sm);
  flex:none;
  background:var(--g-fire);
}


/* ================================================================
   24. REALTIME ORB
   ================================================================ */
.rt-grid{
  display:grid;
  gap:clamp(30px, 4vw, 60px);
  align-items:center;
  margin-top:clamp(26px, 3vw, 44px);
}
@media (min-width:980px){ .rt-grid{ grid-template-columns:.9fr 1.1fr; } }

.rt-orb-wrap{
  display:grid;
  justify-items:center;
  gap:22px;
  padding:clamp(28px, 4vw, 48px);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--surface-1);
}
.rt-orb{
  position:relative;
  width:min(240px, 58vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.rt-core{
  position:absolute;
  inset:16%;
  border-radius:50%;
  background:radial-gradient(circle at 42% 34%, #FFA366 0%, var(--ember) 46%, var(--ember-deep) 100%);
  box-shadow:
    0 0 55px rgba(232,106,30,.4),
    inset 0 0 45px rgba(255,220,180,.18);
  animation:rt-breathe 3.4s var(--e) infinite;
}
.rt-ring{
  position:absolute;
  inset:6%;
  border-radius:50%;
  border:1px solid var(--ember-line);
  animation:rt-pulse 3.4s var(--e) infinite;
}
.rt-ring.d2{
  inset:-4%;
  animation-delay:1.1s;
  border-color:rgba(232,106,30,.14);
}
.rt-spark{
  position:absolute;
  inset:16%;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(2px 2px at 30% 35%, rgba(255,230,190,.9), transparent),
    radial-gradient(2px 2px at 68% 28%, rgba(255,230,190,.75), transparent),
    radial-gradient(1.6px 1.6px at 44% 66%, rgba(255,230,190,.8), transparent),
    radial-gradient(1.6px 1.6px at 74% 60%, rgba(255,230,190,.6), transparent);
  animation:rt-drift 6s linear infinite;
}
@keyframes rt-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
@keyframes rt-pulse{
  0%  { transform:scale(.94); opacity:.8; }
  100%{ transform:scale(1.2); opacity:0; }
}
@keyframes rt-drift{
  0%  { transform:translateY(0) rotate(0); }
  100%{ transform:translateY(-6px) rotate(360deg); }
}
.rt-bar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:var(--surface-2);
}
.rt-mic{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #22C55E, #16A34A);
  color:#05210F;
  flex:none;
}
.rt-mic svg{ width:15px; height:15px; }
.rt-speed{ display:flex; align-items:center; gap:9px; }
.rt-speed i{
  width:70px;
  height:3px;
  border-radius:2px;
  display:block;
  background:linear-gradient(90deg, var(--ember-soft) 0 62%, rgba(255,255,255,.14) 62%);
  position:relative;
}
.rt-speed i::after{
  content:'';
  position:absolute;
  inset-inline-start:62%;
  top:50%;
  width:11px;
  height:11px;
  margin-top:-5.5px;
  margin-inline-start:-5.5px;
  border-radius:50%;
  background:var(--ember-soft);
}
.rt-speed b{ font-size:12px; color:var(--tx-3); font-weight:500; }
.rt-reset{ color:var(--tx-3); display:grid; place-items:center; }
.rt-reset svg{ width:16px; height:16px; }
.rt-cap{ color:var(--tx-3); margin:0; }
.rt-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
}
.rt-list li{
  display:grid;
  gap:7px;
  padding:clamp(17px, 2vw, 22px) 0;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.rt-list li:first-child{ border-top:1px solid var(--line); }
.rt-list b{ font-size:clamp(15.5px, 1.2vw, 18px); }
.rt-list span{
  color:var(--tx-2);
  font-size:clamp(14px, 1vw, 15.5px);
  line-height:1.95;
}


/* ================================================================
   25. RAG PIPELINE
   ================================================================ */
.pipe{
  position:relative;
  list-style:none;
  margin:clamp(30px, 4vw, 52px) 0 0;
  padding:0;
  display:grid;
  gap:0;
}
.pipe::before{
  content:'';
  position:absolute;
  z-index:0;
  inset-block:2.6rem 2.6rem;
  inset-inline-start:calc(1.5rem - 1px);
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--line-3) 12%,
    var(--line-3) 88%,
    transparent 100%);
}
.pipe-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(18px, 2.6vw, 34px);
  padding:clamp(22px, 3vw, 34px) 0;
  border-top:1px solid var(--line);
  position:relative;
  z-index:1;
  align-items:start;
}
.pipe-step:last-child{ border-bottom:1px solid var(--line); }
.pipe-n{
  font-family:'Vazirmatn', system-ui, sans-serif;
  font-size:clamp(14px, 1vw, 17px);
  font-weight:700;
  color:#fff;
  width:3rem;
  height:3rem;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(232,106,30,.5) 0%,
    rgba(232,106,30,.14) 55%,
    transparent 85%);
  border:1px solid var(--ember-line);
  box-shadow:0 0 20px rgba(232,106,30,.22);
}
.pipe-body h3{
  font-size:clamp(18px, 1.55vw, 23px);
  margin:0 0 .5em;
}
.pipe-body p{
  color:var(--tx-2);
  line-height:1.95;
  max-width:72ch;
  margin:0;
  overflow-wrap:anywhere;
  min-width:0;
}
.pipe-body .chips{ margin-top:15px; }
.pipe-body{ min-width:0; }
@media (max-width:640px){
  .pipe::before{ display:none; }
  .pipe-step{ grid-template-columns:1fr; gap:10px; }
  .pipe-n{ width:2.4rem; height:2.4rem; min-width:0; }
}

.rag-demo{
  display:grid;
  gap:0;
  margin-top:clamp(24px, 3vw, 40px);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  overflow:hidden;
}
.rag-demo > div{ padding:clamp(18px, 2.4vw, 28px); min-width:0; }
.rag-demo .t-mono{ display:block; color:var(--tx-3); margin-bottom:10px; }
.rag-q p{ margin:0; font-size:clamp(17px, 1.5vw, 20px); color:var(--tx); }
.rag-arrow{
  display:grid;
  place-items:center;
  padding:0 !important;
  height:34px;
  color:var(--ember-soft);
  opacity:.55;
}
.rag-arrow svg{ width:18px; height:18px; }
.rag-hits{ background:rgba(0,0,0,.2); border-block:1px solid var(--line); }
.rag-hits ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.rag-hits li{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  font-size:14.5px;
  color:var(--tx-2);
}
.rag-hits b{
  font-variant-numeric:tabular-nums;
  color:var(--ember-soft);
  min-width:3.4em;
  font-weight:600;
}
.rag-hits i{ color:var(--tx-3); font-style:normal; font-size:12.5px; }
.rag-hits li.drop{ opacity:.4; text-decoration:line-through; }
.rag-hits li.drop b{ color:var(--tx-3); }
.rag-a{ background:linear-gradient(180deg, var(--violet-tint), transparent); }
.rag-a p{ margin:0 0 12px; color:var(--tx); }
.rag-a .phones{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.rag-note{ margin-top:18px; color:var(--tx-3); max-width:76ch; }


/* ================================================================
   26. MARK CARD
   ================================================================ */
.mark-card{
  margin:0;
  display:grid;
  justify-items:center;
  text-align:center;
  padding:clamp(24px, 3vw, 38px);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--surface-1);
}
.mark-card img{
  width:min(140px, 32vw);
  height:auto;
  border-radius:16px;
  box-shadow:
    0 20px 56px -30px rgba(232,106,30,.45),
    0 0 0 1px rgba(255,255,255,.05);
  transition:transform var(--t-base) var(--e);
}
.mark-card:hover img{ transform:translateY(-4px); }
.mark-card figcaption{
  margin-top:22px;
  display:grid;
  gap:9px;
}
.mark-card figcaption b{ font-size:clamp(17px, 1.3vw, 20px); }
.mark-card figcaption span{
  font-size:clamp(14px, 1vw, 15.5px);
  color:var(--tx-2);
  line-height:1.95;
  max-width:46ch;
}
@media (min-width:900px){
  .mark-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:clamp(22px, 3vw, 38px);
    justify-items:start;
    text-align:right;
    align-items:center;
  }
  .mark-card figcaption{ margin-top:0; }
  .mark-card figcaption span{ max-width:52ch; }
}


/* ================================================================
   27. PROJECTS PAGE
   ================================================================ */
.draft-note{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 20px;
  margin-bottom:clamp(28px, 4vw, 44px);
  border:1px solid var(--ember-line);
  border-radius:var(--r-lg);
  background:var(--ember-tint);
}
.draft-note::before{
  content:'!';
  flex:none;
  width:22px;
  height:22px;
  margin-top:1px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ember);
  color:#1A0D03;
  font-weight:800;
  font-size:13px;
}
.draft-note b{ display:block; color:var(--tx); font-size:14.5px; margin-bottom:4px; }
.draft-note span{ color:var(--tx-2); font-size:13.5px; line-height:1.85; }

.proj-grid{
  display:grid;
  gap:clamp(20px, 2.6vw, 28px);
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:980px){ .proj-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .proj-grid{ grid-template-columns:1fr; } }

.proj{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-1);
  overflow:hidden;
  transition:
    border-color var(--t-base) var(--e),
    transform var(--t-base) var(--e);
}
.proj:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.proj-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--surface-2);
}
.proj-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.proj-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  gap:10px;
  color:var(--tx-3);
}
.proj-empty svg{ width:32px; height:32px; opacity:.5; }
.proj-empty span{ font-size:12.5px; letter-spacing:.04em; }
.proj-flag{
  position:absolute;
  inset-block-start:12px;
  inset-inline-end:12px;
  padding:5px 12px;
  border-radius:var(--r-pill);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:#1A0D03;
  background:var(--ember-soft);
}
.proj-body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.proj-meta{ color:var(--tx-3); font-size:11px; letter-spacing:.05em; }
.proj-body h2{ font-size:18px; line-height:1.4; margin:0; }
.proj-body p{ color:var(--tx-2); font-size:14.5px; line-height:1.85; margin:0; }
.proj-body .chips{ margin-top:auto; padding-top:14px; }
.proj.is-draft .proj-media{ filter:saturate(.75); }


/* ================================================================
   28. TEXT CONTAINMENT
   ================================================================ */
.cw-msg, .cw-src, .rag-q p, .rag-a p, .rag-hits li,
.vtext, .vline-btn, .chip, .svc-row .inline-detail p,
.pipe-body p, .card p, .shot-cap, .rt-list span,
.msg .bub, .mini b, .mini span{
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;
}
.cw-body, .cw-top > div, .rag-demo > div, .pipe-body,
.vline-btn, .rt-list li, .card, .svc-row{ min-width:0; }
.cw, .rag-demo, .vdemo{ overflow:hidden; }


/* ================================================================
   29. SCROLL REVEAL
   ================================================================ */
[data-rv]{
  opacity:0;
  transform:translateY(20px);
}
[data-rv].seen{
  opacity:1;
  transform:none;
  transition:
    opacity 640ms var(--e-out),
    transform 640ms var(--e-out);
  transition-delay:var(--d, 0ms);
}


/* ================================================================
   30. MISC
   ================================================================ */
#top{
  display:block;
  position:absolute;
  inset-block-start:0;
  scroll-margin-block-start:0;
}


/* ================================================================
   31. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1; transform:none; }
  .rv > i{ transform:none; opacity:1; }
  .stg{ opacity:1; transform:none; }
  .aura i{ animation:none; }
  .rt-core, .rt-ring, .rt-spark{ animation:none; }
  .rt-ring{ opacity:.5; }
  .mob-hero video{ display:none; }
  .reel-loader__ring{ animation:none; opacity:.6; }
  .reel-loader{ transition:opacity .2s linear; }
  .loader-ring, .chat-fab::after, .music-fab::after,
  .vplay::after, .vdemo-top .t-sm::before,
  .hint-arrow, .live-dot::before{
    animation:none;
  }
  .hint-arrow{ opacity:.7; }
  .mark-card:hover img{ transform:none; }
}


/* ================================================================
   32. PRINT
   ================================================================ */
@media print{
  .nav, .chat-fab, .chat-panel, .music-fab,
  .reel-rail, .reel-hint, #loader, .aura, .reel-loader,
  .page-portal{
    display:none !important;
  }
  .reel-stage{ position:static; height:auto; }
  body{ background:#fff; color:#000; }
  .grad, .grad-duo, .story-lead{
    background:none;
    -webkit-text-fill-color:currentColor;
    color:#111 !important;
  }
}


/* ================================================================
   SYNTRA LAYER — parallax backdrop, scroll progress, custom cursor
   ================================================================ */

#main, .drawer, .footer, .nav, #loader, .aura,
.chat-fab, .chat-panel, .music-fab,
.sx-progress, .sx-cursor, .sx-cursor-dot, .svc-detail{
  position:relative;
}
.nav, #loader, .aura, .sx-progress, .sx-cursor, .sx-cursor-dot,
.chat-fab, .chat-panel, .music-fab, .svc-detail, .drawer{
  position:fixed;
}

/* ---------- 1. fixed parallax backdrop ---------- */
.sx-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}
.sx-bg__grid{
  position:absolute;
  inset:-10% -10%;
  background-image:
    linear-gradient(to right, var(--grid-tint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-tint) 1px, transparent 1px);
  background-size:104px 104px;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 58% 52% at 50% 40%, #000 0%, transparent 78%);
}
.sx-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(130px);
  opacity:.22;
  will-change:transform;
}
.sx-orb--warm{
  width:40vw; height:40vw;
  min-width:360px; min-height:360px;
  background:radial-gradient(circle at 35% 35%, var(--orb-warm), transparent 68%);
  top:-14vh; left:-12vw;
}
.sx-orb--violet{
  width:34vw; height:34vw;
  min-width:280px; min-height:280px;
  background:radial-gradient(circle at 60% 40%, var(--orb-violet), transparent 68%);
  top:52vh; right:-14vw;
}
.sx-orb--cyan{
  width:24vw; height:24vw;
  min-width:200px; min-height:200px;
  background:radial-gradient(circle at 50% 50%, var(--orb-cyan), transparent 68%);
  top:150vh; left:8vw;
  opacity:.5;
}
.sx-shape{ display:none; }
.sx-dust{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  will-change:transform;
}

/* ---------- 2. scroll progress ---------- */
.sx-progress{
  top:0; left:0; right:0;
  height:1.5px;
  z-index:9998;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--ember), var(--violet), var(--cyan));
  pointer-events:none;
  opacity:.7;
}

/* ---------- 3. custom cursor ---------- */
.sx-cursor, .sx-cursor-dot{
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
  mix-blend-mode:difference;
  will-change:transform;
}
.sx-cursor{
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border:1px solid rgba(255,255,255,.5);
  transition:
    width .28s cubic-bezier(.22,1,.36,1),
    height .28s cubic-bezier(.22,1,.36,1),
    margin .28s cubic-bezier(.22,1,.36,1),
    background .28s,
    border-color .28s;
}
.sx-cursor-dot{
  width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px;
  background:#fff;
}
.sx-cursor.is-hover{
  width:56px; height:56px;
  margin:-28px 0 0 -28px;
  background:rgba(255,255,255,.9);
  border-color:transparent;
}
@media (hover:none),(pointer:coarse){
  .sx-cursor, .sx-cursor-dot{ display:none !important; }
}

/* ---------- 4. nav sound button ---------- */
.nav-act .sound-nav{ display:grid; position:relative; }
.nav-act .sound-nav .i-off{ display:none; }
.nav-act .sound-nav:not(.on) .i-on{ display:none; }
.nav-act .sound-nav:not(.on) .i-off{ display:block; }
.nav-act .sound-nav.on{
  color:var(--ember-soft);
  border-color:var(--ember-line);
}

/* hide native cursor only when custom is actually live */
@media (hover:hover) and (pointer:fine){
  body.sx-cursor-on,
  body.sx-cursor-on a,
  body.sx-cursor-on button,
  body.sx-cursor-on input,
  body.sx-cursor-on textarea,
  body.sx-cursor-on select,
  body.sx-cursor-on [role="button"]{ cursor:none; }
}


/* ================================================================
   PAGE ATMOSPHERE — per-page weather
   ----------------------------------------------------------------
   data-page on <body> overrides the ambient tokens consumed by
   .aura and .sx-bg__grid/.sx-orb. Same brand DNA, different light.

     home      ember + violet, warm and cinematic
     code      violet + cyan, cool and precise
     voice     ember + cyan, alive and signal-led
     rag       cyan + violet, cool and structured
     projects  neutral, quiet and editorial
     contact   warm ember, grounded and human
   ================================================================ */
body {
  --aura-a:    rgba(232,106,30,.16);
  --aura-b:    rgba(157,139,245,.10);
  --grid-tint: rgba(255,255,255,.018);
  --orb-warm:   rgba(232,106,30,.40);
  --orb-violet: rgba(157,139,245,.24);
  --orb-cyan:   rgba(95,212,232,.08);
}
body[data-page="code"]{
  --aura-a:    rgba(157,139,245,.16);
  --aura-b:    rgba(95,212,232,.11);
  --grid-tint: rgba(157,139,245,.030);
  --orb-warm:   rgba(157,139,245,.34);
  --orb-violet: rgba(95,212,232,.20);
  --orb-cyan:   rgba(232,106,30,.06);
}
body[data-page="voice"]{
  --aura-a:    rgba(232,106,30,.10);
  --aura-b:    rgba(95,212,232,.14);
  --grid-tint: rgba(95,212,232,.025);
  --orb-warm:   rgba(232,106,30,.30);
  --orb-violet: rgba(95,212,232,.26);
  --orb-cyan:   rgba(95,212,232,.14);
}
body[data-page="rag"]{
  --aura-a:    rgba(95,212,232,.14);
  --aura-b:    rgba(157,139,245,.12);
  --grid-tint: rgba(95,212,232,.028);
  --orb-warm:   rgba(95,212,232,.30);
  --orb-violet: rgba(157,139,245,.24);
  --orb-cyan:   rgba(232,106,30,.06);
}
body[data-page="projects"]{
  --aura-a:    rgba(232,106,30,.10);
  --aura-b:    rgba(255,255,255,.04);
  --grid-tint: rgba(255,255,255,.014);
  --orb-warm:   rgba(232,106,30,.26);
  --orb-violet: rgba(255,255,255,.10);
  --orb-cyan:   rgba(255,255,255,.05);
}
body[data-page="contact"]{
  --aura-a:    rgba(232,106,30,.18);
  --aura-b:    rgba(157,139,245,.06);
  --grid-tint: rgba(255,255,255,.012);
  --orb-warm:   rgba(232,106,30,.44);
  --orb-violet: rgba(232,106,30,.10);
  --orb-cyan:   rgba(157,139,245,.06);
}
/* ================================================================
   PAGE PORTAL — art-directed directional transitions
   ----------------------------------------------------------------
   Layers (back to front)
     1. veil         dark surface that passes through
     2. glow         warm bloom trailing the movement
     3. band         wide light band sweeping the middle
     4. embers ×6    warm particles drifting in the direction
     5. stamp        brand mark (logo + wordmark + 2 rings)
     6. brackets ×4  architectural frame at the viewport corners

   The choreography
     - veil enters from the destination side
     - band appears as the veil covers
     - embers drift in the direction of travel
     - brand stamp appears at the peak of cover
     - corner brackets settle into the frame
     - old page drifts the opposite way
     - new page arrives from the destination side
     - everything reverses as the veil exits
   ================================================================ */
.page-portal{
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
  overflow:hidden;
  visibility:hidden;
  contain:layout paint;

  --portal-e:     cubic-bezier(.72, 0, .28, 1);
  --portal-e-out: cubic-bezier(.16, 1, .3, 1);
  --dir-x: 1;
  --dir-y: 0;
}
html.page-leaving .page-portal,
html.page-arrive  .page-portal,
html.page-reveal  .page-portal{ visibility:visible; }

/* ============================================================
   1. VEIL
   ============================================================ */
.page-portal__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(75% 65% at 50% 50%,
      #0B0D14 0%,
      #07080E 55%,
      #05060A 100%);
  transform: translate3d(
    calc(var(--dir-x) * 100%),
    calc(var(--dir-y) * 100%),
    0
  );
  will-change:transform;
  transition: transform 460ms var(--portal-e);
}

/* ============================================================
   2. GLOW
   ============================================================ */
.page-portal__glow{
  position:absolute;
  inset:0;
  background: radial-gradient(
    62% 52% at
      calc(50% - var(--dir-x) * 34%)
      calc(50% - var(--dir-y) * 34%),
    rgba(232,106,30,.26) 0%,
    rgba(157,139,245,.12) 38%,
    transparent 72%
  );
  opacity:0;
  will-change:opacity;
  transition: opacity 340ms var(--portal-e) 40ms;
}

/* ============================================================
   3. BAND
   ============================================================ */
.page-portal__band{
  position:absolute;
  top:50%;
  left:50%;
  width: 170vw;
  height: 56vh;
  margin: -28vh 0 0 -85vw;
  background: radial-gradient(50% 62% at 50% 50%,
    rgba(255,238,216,.20) 0%,
    rgba(242,169,107,.11) 26%,
    rgba(232,106,30,.045) 50%,
    transparent 76%);
  opacity:0;
  transform: translate3d(
    calc(var(--dir-x) * 30%),
    calc(var(--dir-y) * 30%),
    0
  ) scale(.92);
  will-change:transform, opacity;
  transition:
    transform 520ms var(--portal-e),
    opacity 340ms var(--portal-e) 50ms;
}

/* ============================================================
   4. EMBERS
   ============================================================ */
.page-portal__ember{
  position:absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFE6C8 0%,
    rgba(242,169,107,.7) 45%,
    transparent 78%);
  box-shadow: 0 0 10px rgba(255,206,150,.55);
  opacity:0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  transition:
    transform 640ms var(--portal-e),
    opacity 320ms var(--portal-e);
}
.page-portal__ember--1{ top: 32%; left: 36%; --e: 22%; transition-delay: 60ms; }
.page-portal__ember--2{ top: 58%; left: 62%; --e: 40%; transition-delay: 90ms; }
.page-portal__ember--3{ top: 44%; left: 74%; --e: 16%; transition-delay: 40ms; }
.page-portal__ember--4{ top: 68%; left: 30%; --e: 52%; transition-delay: 120ms; }
.page-portal__ember--5{ top: 26%; left: 56%; --e: 32%; transition-delay: 70ms; }
.page-portal__ember--6{ top: 76%; left: 46%; --e: 44%; transition-delay: 100ms; }

/* ============================================================
   5. BRAND STAMP
   ============================================================ */
.page-portal__stamp{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.94);
  display: grid;
  justify-items: center;
  gap: 14px;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 520ms var(--portal-e-out),
    opacity 340ms var(--portal-e);
}
.page-portal__stamp::before{
  content:'';
  position: absolute;
  top: 50%; left: 50%;
  width: 340px; height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(232,106,30,.16) 0%,
    rgba(232,106,30,.05) 42%,
    transparent 72%);
  pointer-events: none;
}
.page-portal__mark{
  position: relative;
  width: clamp(56px, 7vw, 84px);
  height: auto;
  filter: drop-shadow(0 0 26px rgba(232,106,30,.6));
}
.page-portal__word{
  position: relative;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(242,169,107,.82);
  white-space: nowrap;
}
.page-portal__ring{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(242,169,107,.42);
  transform: translate(-50%, -50%) scale(.85);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.page-portal__ring--a{
  width: 148px; height: 148px;
  transition:
    transform 780ms var(--portal-e-out) 60ms,
    opacity 340ms var(--portal-e) 60ms;
}
.page-portal__ring--b{
  width: 232px; height: 232px;
  border-color: rgba(157,139,245,.34);
  transition:
    transform 900ms var(--portal-e-out) 160ms,
    opacity 340ms var(--portal-e) 160ms;
}

/* ============================================================
   6. CORNER BRACKETS — safe-area aware
   ============================================================ */
.page-portal__bracket{
  position: absolute;
  width: 42px;
  height: 42px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 480ms var(--portal-e-out),
    opacity 320ms var(--portal-e);
}
.page-portal__bracket--tl{
  top: calc(34px + env(safe-area-inset-top, 0px));
  left: calc(34px + env(safe-area-inset-left, 0px));
  border-top: 1px solid rgba(242,169,107,.5);
  border-left: 1px solid rgba(242,169,107,.5);
  transform: translate(-10px, -10px);
}
.page-portal__bracket--tr{
  top: calc(34px + env(safe-area-inset-top, 0px));
  right: calc(34px + env(safe-area-inset-right, 0px));
  border-top: 1px solid rgba(242,169,107,.5);
  border-right: 1px solid rgba(242,169,107,.5);
  transform: translate(10px, -10px);
}
.page-portal__bracket--bl{
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  left: calc(34px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(242,169,107,.5);
  border-left: 1px solid rgba(242,169,107,.5);
  transform: translate(-10px, 10px);
}
.page-portal__bracket--br{
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  right: calc(34px + env(safe-area-inset-right, 0px));
  border-bottom: 1px solid rgba(242,169,107,.5);
  border-right: 1px solid rgba(242,169,107,.5);
  transform: translate(10px, 10px);
}

/* ============================================================
   STATE: LEAVING — old page
   ============================================================ */
html.page-leaving .page-portal__veil{
  transform: translate3d(0, 0, 0);
}
html.page-leaving .page-portal__glow{ opacity:1; }

html.page-leaving .page-portal__band{
  opacity:1;
  transform: translate3d(
    calc(var(--dir-x) * -6%),
    calc(var(--dir-y) * -6%),
    0
  ) scale(1);
}

html.page-leaving .page-portal__ember{
  opacity:1;
  transform: translate3d(
    calc(var(--dir-x) * var(--e)),
    calc(var(--dir-y) * var(--e)),
    0
  );
}

html.page-leaving .page-portal__stamp{
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 170ms;
}
html.page-leaving .page-portal__ring{
  opacity:1;
  transform: translate(-50%, -50%) scale(1.35);
}
html.page-leaving .page-portal__bracket{
  opacity:1;
  transform: translate(0, 0);
  transition-delay: 130ms;
}

html.page-leaving main,
html.page-leaving .footer{
  transform: translate3d(
    calc(var(--dir-x) * -58px),
    calc(var(--dir-y) * -58px),
    0
  ) scale(.985);
  opacity:.38;
  transition:
    transform 440ms var(--portal-e),
    opacity 400ms var(--portal-e);
}
html.page-leaving .nav{
  transform: translate3d(
    calc(var(--dir-x) * -28px),
    calc(var(--dir-y) * -28px),
    0
  );
  opacity:0;
  transition:
    transform 400ms var(--portal-e),
    opacity 380ms var(--portal-e);
}

/* ============================================================
   STATE: ARRIVING — new page, pre-paint
   ============================================================ */
html.page-arrive .page-portal__veil{
  transform: translate3d(0, 0, 0);
  transition:none;
}
html.page-arrive .page-portal__glow{
  opacity:1;
  transition:none;
}
html.page-arrive .page-portal__band{
  opacity:1;
  transform: translate3d(
    calc(var(--dir-x) * -6%),
    calc(var(--dir-y) * -6%),
    0
  ) scale(1);
  transition:none;
}
html.page-arrive .page-portal__ember{
  opacity:1;
  transform: translate3d(
    calc(var(--dir-x) * var(--e)),
    calc(var(--dir-y) * var(--e)),
    0
  );
  transition:none;
}
html.page-arrive .page-portal__stamp{
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
  transition:none;
}
html.page-arrive .page-portal__ring{
  opacity:1;
  transform: translate(-50%, -50%) scale(1.35);
  transition:none;
}
html.page-arrive .page-portal__bracket{
  opacity:1;
  transform: translate(0, 0);
  transition:none;
}
html.page-arrive main,
html.page-arrive .footer{
  transform: translate3d(
    calc(var(--dir-x) * 64px),
    calc(var(--dir-y) * 64px),
    0
  );
  opacity:0;
  transition:none;
}
html.page-arrive .nav{
  opacity:0;
  transition:none;
}

/* ============================================================
   STATE: REVEALING — new page, JS-driven
   ============================================================ */
html.page-reveal .page-portal__veil{
  transform: translate3d(
    calc(var(--dir-x) * -100%),
    calc(var(--dir-y) * -100%),
    0
  );
  transition: transform 580ms var(--portal-e);
}
html.page-reveal .page-portal__glow{
  opacity:0;
  transition: opacity 420ms var(--portal-e) 140ms;
}
html.page-reveal .page-portal__band{
  opacity:0;
  transform: translate3d(
    calc(var(--dir-x) * 22%),
    calc(var(--dir-y) * 22%),
    0
  ) scale(1.06);
  transition:
    transform 560ms var(--portal-e),
    opacity 420ms var(--portal-e) 80ms;
}
html.page-reveal .page-portal__ember{
  opacity:0;
  transform: translate3d(
    calc(var(--dir-x) * var(--e) * 1.6),
    calc(var(--dir-y) * var(--e) * 1.6),
    0
  );
  transition:
    transform 560ms var(--portal-e),
    opacity 380ms var(--portal-e) 80ms;
}
html.page-reveal .page-portal__stamp{
  opacity:0;
  transform: translate(-50%, -50%) scale(1.06);
  transition:
    transform 480ms var(--portal-e),
    opacity 320ms var(--portal-e);
}
html.page-reveal .page-portal__ring{
  opacity:0;
  transform: translate(-50%, -50%) scale(1.85);
  transition:
    transform 640ms var(--portal-e-out),
    opacity 400ms var(--portal-e) 80ms;
}
html.page-reveal .page-portal__bracket{
  opacity:0;
  transform: translate(
    calc(var(--dir-x) * 10px),
    calc(var(--dir-y) * 10px)
  );
  transition:
    transform 480ms var(--portal-e),
    opacity 280ms var(--portal-e) 40ms;
}
html.page-reveal main,
html.page-reveal .footer{
  transform: none;
  opacity:1;
  transition:
    transform 580ms var(--portal-e),
    opacity 500ms var(--portal-e) 60ms;
}
html.page-reveal .nav{
  opacity:1;
  transition: opacity 420ms var(--portal-e) 220ms;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .page-portal__veil{
    transform: translate3d(0, 0, 0) !important;
    transition: opacity 120ms linear !important;
    opacity: 0;
  }
  .page-portal__glow,
  .page-portal__band,
  .page-portal__ember,
  .page-portal__stamp,
  .page-portal__ring,
  .page-portal__bracket{ display:none; }

  html.page-leaving .page-portal__veil{ opacity:1; }
  html.page-arrive  .page-portal__veil{ opacity:1; }
  html.page-reveal  .page-portal__veil{ opacity:0; }

  html.page-leaving main,
  html.page-leaving .footer,
  html.page-leaving .nav,
  html.page-arrive main,
  html.page-arrive .footer,
  html.page-arrive .nav,
  html.page-reveal main,
  html.page-reveal .footer,
  html.page-reveal .nav{
    transform:none !important;
    transition: opacity 140ms linear !important;
  }
}

/* ============================================================
   MOBILE — up to 900px
   ============================================================ */
@media (max-width: 900px){

  .page-portal__band{ display:none; }
  .page-portal__ember--3,
  .page-portal__ember--6{ display:none; }
  .page-portal__ring--b{ display:none; }

  .page-portal__stamp{ gap: 12px; }
  .page-portal__mark{ width: 52px; }
  .page-portal__word{
    font-size: 11px;
    letter-spacing: .04em;
  }
  .page-portal__stamp::before{ width: 220px; height: 220px; }

  .page-portal__ring--a{
    width: 112px; height: 112px;
    transition:
      transform 560ms var(--portal-e-out) 40ms,
      opacity 260ms var(--portal-e) 40ms;
  }

  .page-portal__bracket{ width: 28px; height: 28px; }
  .page-portal__bracket--tl{
    top: calc(18px + env(safe-area-inset-top, 0px));
    left: calc(18px + env(safe-area-inset-left, 0px));
  }
  .page-portal__bracket--tr{
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }
  .page-portal__bracket--bl{
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: calc(18px + env(safe-area-inset-left, 0px));
  }
  .page-portal__bracket--br{
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }

  html.page-leaving main,
  html.page-leaving .footer{
    transform: translate3d(
      calc(var(--dir-x) * -22px),
      calc(var(--dir-y) * -22px),
      0
    ) scale(.996);
    opacity:.55;
    transition:
      transform 320ms var(--portal-e),
      opacity 280ms var(--portal-e);
  }
  html.page-arrive main,
  html.page-arrive .footer{
    transform: translate3d(
      calc(var(--dir-x) * 26px),
      calc(var(--dir-y) * 26px),
      0
    );
  }
  html.page-reveal main,
  html.page-reveal .footer{
    transition:
      transform 420ms var(--portal-e),
      opacity 360ms var(--portal-e) 40ms;
  }

  .page-portal__veil{
    transition: transform 360ms var(--portal-e);
  }
  html.page-reveal .page-portal__veil{
    transition: transform 440ms var(--portal-e);
  }
  html.page-leaving .page-portal__glow,
  html.page-reveal  .page-portal__glow{
    transition: opacity 280ms var(--portal-e) 30ms;
  }

  html.page-leaving .page-portal__stamp{
    transition-delay: 140ms;
    transition:
      transform 380ms var(--portal-e-out),
      opacity 280ms var(--portal-e);
  }
  html.page-reveal .page-portal__stamp{
    transition:
      transform 360ms var(--portal-e),
      opacity 240ms var(--portal-e);
  }

  html.page-leaving .page-portal__bracket{
    transition-delay: 100ms;
  }
  html.page-reveal .page-portal__bracket{
    transition:
      transform 340ms var(--portal-e),
      opacity 200ms var(--portal-e) 30ms;
  }
}

/* ============================================================
   VERY NARROW — up to 480px
   ============================================================ */
@media (max-width: 480px){
  .page-portal__mark{ width: 46px; }
  .page-portal__word{ font-size: 10.5px; }
  .page-portal__stamp::before{ width: 180px; height: 180px; }
  .page-portal__ring--a{ width: 96px; height: 96px; }

  .page-portal__bracket{ width: 24px; height: 24px; }
  .page-portal__bracket--tl{
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: calc(14px + env(safe-area-inset-left, 0px));
  }
  .page-portal__bracket--tr{
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
  }
  .page-portal__bracket--bl{
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: calc(14px + env(safe-area-inset-left, 0px));
  }
  .page-portal__bracket--br{
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
  }
}
/* ================================================================
   END OF FILE
   ================================================================ */