/* ============================================================
   Chrom° — Liquid glass, multi-page, trilingual
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:#fff;color:#000}

:root{
  --bg:#040406;
  --bg-2:#08080c;
  --panel:#0a0a0c;
  --silver:#c8c8d0;
  --fg:#f0f0f4;
  --mute:#8a8a96;
  --iridescent:#ffe6f5;
  --glass:rgba(255,255,255,.06);
  --glass-strong:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.22);
  --ease-liquid:cubic-bezier(.2,.7,.2,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --serif:'Cormorant Garamond',serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --farsi:'Vazirmatn','Inter',sans-serif;
}

html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

html[dir="rtl"] body,
html[lang="fa"] body{ font-family:var(--farsi) }

/* ============================================================
   Ambient background — spot + stars + aurora
   ============================================================ */
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}

.spot{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,230,245,.08),transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 85%,rgba(200,200,224,.10),transparent 55%),
    radial-gradient(ellipse 70% 50% at 15% 60%,rgba(180,200,255,.05),transparent 60%);
}
.aurora{
  background:
    conic-gradient(from 220deg at 50% 120%,transparent 0deg,rgba(200,200,224,.06) 60deg,transparent 140deg,rgba(255,230,245,.05) 220deg,transparent 320deg);
  animation:auroraSpin 60s linear infinite;
  filter:blur(40px);
  opacity:.7;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}

.stars{
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.6) 100%,transparent),
    radial-gradient(1px 1px at 55% 24%,rgba(255,255,255,.4) 100%,transparent),
    radial-gradient(1.5px 1.5px at 82% 36%,rgba(255,255,255,.7) 100%,transparent),
    radial-gradient(1px 1px at 28% 64%,rgba(255,255,255,.5) 100%,transparent),
    radial-gradient(1px 1px at 70% 78%,rgba(255,255,255,.6) 100%,transparent),
    radial-gradient(1px 1px at 92% 92%,rgba(255,255,255,.4) 100%,transparent),
    radial-gradient(1px 1px at 8% 82%,rgba(255,255,255,.4) 100%,transparent),
    radial-gradient(1.5px 1.5px at 42% 8%,rgba(255,255,255,.5) 100%,transparent);
  background-size:600px 600px;
  animation:twinkle 8s ease-in-out infinite;
}
@keyframes twinkle{50%{opacity:.55}}

.cursor-glow{
  position:fixed;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,245,.06),transparent 60%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  transition:opacity .4s ease;
  mix-blend-mode:screen;
  opacity:0;
}
body:hover .cursor-glow{opacity:1}

/* ============================================================
   LIQUID GLASS primitive
   The Apple-style "liquid glass" pane: multi-layer.
   ============================================================ */
.glass{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,.04) 100%);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 20px 60px -20px rgba(0,0,0,.6),
    0 8px 24px -12px rgba(0,0,0,.4);
  border-radius:24px;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%,rgba(255,230,245,.06),transparent 60%);
  pointer-events:none;
  mix-blend-mode:screen;
}
.glass::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 55%);
  transform:translateX(-100%);
  transition:transform 1.4s var(--ease-out-expo);
  pointer-events:none;
}
.glass:hover::after{transform:translateX(100%)}

/* ============================================================
   PAGE LOADER — Aperture (only shown on page transitions)
   ============================================================ */
.page-loader{
  position:fixed;inset:0;
  display:grid;place-items:center;
  background:rgba(4,4,6,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.page-loader.on{opacity:1;pointer-events:auto}

.aperture{
  width:120px;height:120px;
  color:#f5f5f7;
  --rate:1;
}
.ap-halo{stroke:currentColor;stroke-width:1;opacity:.1;fill:none}
.ap-r1,.ap-r2,.ap-r3{
  stroke:currentColor;
  stroke-linecap:round;
  fill:none;
  transform-box:view-box;
  transform-origin:center;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
.ap-r1{stroke-width:2;   stroke-dasharray:34 14 9 43; opacity:.95;animation-name:ap-cw; animation-duration:calc(2.8s * var(--rate,1))}
.ap-r2{stroke-width:2.4; stroke-dasharray:24 10 24 42;opacity:.72;animation-name:ap-ccw;animation-duration:calc(3.9s * var(--rate,1))}
.ap-r3{stroke-width:2.8; stroke-dasharray:16 12 16 56;opacity:.52;animation-name:ap-cw; animation-duration:calc(2.1s * var(--rate,1))}
.ap-core{
  fill:currentColor;
  transform-box:view-box;
  transform-origin:center;
  animation:ap-core calc(2.1s * var(--rate,1)) ease-in-out infinite;
}
@keyframes ap-cw{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ap-ccw{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes ap-core{0%,100%{transform:scale(.55);opacity:.45}50%{transform:scale(1);opacity:1}}

.loader-label{
  margin-top:24px;
  font:400 11px/1 var(--mono);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--mute);
  animation:fadeInOut 2.1s ease-in-out infinite;
  text-align:center;
}
.loader-wrap{display:grid;place-items:center}
@keyframes fadeInOut{0%,100%{opacity:.4}50%{opacity:1}}

/* ============================================================
   HEADER — logo left, language switch right
   ============================================================ */
.top{
  position:fixed;
  top:20px;left:22px;right:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:100;
  pointer-events:none;
}
.top > *{pointer-events:auto}

.logo-badge{
  padding:10px 18px;
  border-radius:99px;
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  letter-spacing:-.01em;
  font-weight:300;
  color:var(--fg);
  display:inline-flex;align-items:center;gap:4px;
  transition:transform .5s var(--ease-liquid);
}
.logo-badge sup{
  font-size:12px;
  font-style:normal;
  background:linear-gradient(180deg,#fff,var(--silver));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.logo-badge:hover{transform:scale(1.04) rotate(-1deg)}

/* Language switch — Apple-style segmented liquid glass */
.lang-switch{
  position:relative;
  display:inline-flex;
  padding:5px;
  border-radius:99px;
  gap:2px;
}
.lang-switch button{
  position:relative;
  padding:8px 16px;
  border-radius:99px;
  font:500 12px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  z-index:2;
  transition:color .4s var(--ease-liquid);
  min-width:52px;
}
.lang-switch button.active{color:#040406;font-weight:700}
.lang-switch button:not(.active):hover{color:var(--fg)}
.lang-thumb{
  position:absolute;
  top:5px;bottom:5px;
  border-radius:99px;
  background:linear-gradient(180deg,#fff,var(--silver));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.08),
    0 6px 20px rgba(255,230,245,.28),
    0 2px 8px rgba(0,0,0,.4);
  transition:left .55s var(--ease-liquid),width .55s var(--ease-liquid);
  z-index:1;
}

/* ============================================================
   DOCK — the star of the show. Apple liquid glass, bottom-fixed.
   ============================================================ */
.dock-wrap{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  padding:8px;
  border-radius:32px;
  transition:transform .4s var(--ease-liquid);
}
.dock{
  display:flex;
  gap:6px;
  padding:8px;
  align-items:center;
}
.dock-item{
  --size:60px;
  width:var(--size);
  height:var(--size);
  border-radius:18px;
  display:grid;place-items:center;
  position:relative;
  color:var(--fg);
  transition:all .45s var(--ease-liquid);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  overflow:visible;
}
.dock-item svg{
  width:26px;height:26px;
  transition:transform .5s var(--ease-liquid);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.dock-item:hover{
  --size:74px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.22);
  transform:translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 12px 32px -4px rgba(0,0,0,.5),
    0 0 40px -8px rgba(255,230,245,.25);
}
.dock-item:hover svg{transform:scale(1.08)}
/* neighbor magnify */
.dock-item:hover + .dock-item,
.dock-item:has(+ .dock-item:hover){--size:68px}

.dock-item.active{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 24px -4px rgba(255,230,245,.3);
}
.dock-item.active::after{
  content:"";
  position:absolute;
  bottom:-14px;left:50%;
  transform:translateX(-50%);
  width:4px;height:4px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px #fff,0 0 24px rgba(255,230,245,.6);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{50%{transform:translateX(-50%) scale(1.4);opacity:.7}}

.dock-tip{
  position:absolute;
  bottom:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  padding:6px 12px;
  font:500 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--fg);
  border-radius:99px;
  background:rgba(20,20,26,.85);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  opacity:0;
  pointer-events:none;
  transition:.3s var(--ease-liquid);
}
.dock-item:hover .dock-tip{opacity:1;transform:translateX(-50%) translateY(0)}

.dock-sep{width:1px;height:36px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent);margin:0 4px}

/* ============================================================
   PAGES — each page is a full section that swaps
   ============================================================ */
.page{
  display:none;
  padding:110px 32px 140px;
  min-height:100vh;
  animation:pageIn .8s var(--ease-out-expo);
}
.page.active{display:block}
@keyframes pageIn{
  from{opacity:0;transform:translateY(20px) scale(.995);filter:blur(12px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.container{max-width:1280px;margin:0 auto}

/* ============================================================
   HERO PAGE — cinematic
   ============================================================ */
.hero{
  text-align:center;
  min-height:calc(100vh - 140px);
  display:grid;
  place-items:center;
  padding:60px 24px 40px;
  position:relative;
}
.hero-inner{max-width:1080px;position:relative;z-index:3}

/* ---------- Cinematic hero stage ---------- */
.hero-cinematic{
  min-height:min(100vh,900px);
  padding-top:20px;
  padding-bottom:40px;
  overflow:visible;
}
.hero-stage{
  position:absolute;
  inset:0;
  display:grid;place-items:center;
  pointer-events:none;
  z-index:1;
}

/* Conic gradient sweep behind the orb */
.hero-conic{
  position:absolute;
  width:min(760px,90vw);
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,230,245,.18) 60deg,
    rgba(200,200,224,.22) 120deg,
    transparent 200deg,
    rgba(255,255,255,.14) 300deg,
    transparent 360deg
  );
  filter:blur(40px);
  opacity:.65;
  animation:conicSpin 22s linear infinite;
  mix-blend-mode:screen;
}
@keyframes conicSpin{to{transform:rotate(360deg)}}

/* Orbit SVG covers the stage */
.hero-orbits{
  position:absolute;
  width:min(880px,100vw);
  aspect-ratio:1;
  animation:orbitFloat 12s ease-in-out infinite;
  filter:drop-shadow(0 0 40px rgba(255,230,245,.1));
}
@keyframes orbitFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(2deg)}
}

/* Individual orbit ring rotations */
.orbit{transform-origin:400px 400px}
.orbit-1{animation:orbitTiltA 24s linear infinite}
.orbit-2{animation:orbitTiltB 40s linear infinite}
.orbit-3{animation:orbitTiltC 18s linear infinite reverse}
@keyframes orbitTiltA{to{transform:rotate(360deg)}}
@keyframes orbitTiltB{from{transform:rotate(0) rotateX(60deg)}to{transform:rotate(360deg) rotateX(60deg)}}
@keyframes orbitTiltC{to{transform:rotate(-360deg)}}

/* The orb — pure SVG, no photo */
.hero-orb-svg{
  position:relative;
  width:min(520px,72vw);
  aspect-ratio:1;
  z-index:2;
  animation:orbBreathe 8s ease-in-out infinite;
  filter:
    drop-shadow(0 40px 120px rgba(200,200,224,.32))
    drop-shadow(0 0 90px rgba(255,230,245,.25));
  transition:transform .5s var(--ease-liquid);
  overflow:visible;
}
@keyframes orbBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-18px) scale(1.02)}
}
.orb-bands{
  transform-origin:200px 200px;
  animation:bandsRotate 22s linear infinite;
}
@keyframes bandsRotate{to{transform:rotate(360deg)}}

/* Position the floating readouts around the orb */
.hero-cinematic .chrome-label{
  position:absolute;
  z-index:3;
  animation:floatLabel 6s ease-in-out infinite;
}
.hero-cinematic .chrome-label.l1{
  top:14%;
  left:6%;
  animation-delay:-1s;
}
.hero-cinematic .chrome-label.l2{
  bottom:12%;
  right:6%;
  animation-delay:-3s;
}

/* Hero copy positioning — the h1 sits ABOVE the stage, CTAs BELOW */
.hero-cinematic .hero-inner{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  min-height:min(88vh,820px);
  width:100%;
  padding:0 20px;
}
.hero-cinematic h1{margin-bottom:0}
.hero-cinematic .lede{margin-top:auto;margin-bottom:32px;padding-top:24px}
.hero-cinematic .hero-cta{margin-bottom:20px}

@media(max-width:720px){
  .hero-cinematic{min-height:auto;padding-top:10px}
  .hero-cinematic .hero-inner{min-height:auto;gap:40px}
  .hero-cinematic .lede{padding-top:60vw}
  .hero-orb{width:70vw}
  .hero-cinematic .chrome-label.l1{top:52vw;left:2%}
  .hero-cinematic .chrome-label.l2{top:56vw;right:2%;bottom:auto}
}

.tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px 6px 6px;
  border-radius:99px;
  font:400 12px/1 var(--mono);
  letter-spacing:.06em;
  color:var(--mute);
  margin-bottom:36px;
  opacity:0;
  animation:fadeUp .9s .1s var(--ease-out-expo) forwards;
}
.tag .v{
  padding:4px 10px;
  background:linear-gradient(120deg,var(--iridescent),var(--silver));
  color:#000;
  border-radius:99px;
  font-weight:600;
  font-size:11px;
}

.hero h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(72px,11vw,180px);
  line-height:.92;
  letter-spacing:-.025em;
  margin-bottom:36px;
  text-wrap:balance;
}
.hero h1 .w{
  display:inline-block;
  opacity:0;
  transform:translateY(40px) scale(.94);
  filter:blur(8px);
  animation:wordIn 1.1s var(--ease-out-expo) forwards;
}
.hero h1 .w:nth-child(1){animation-delay:.25s}
.hero h1 .w:nth-child(2){animation-delay:.40s}
.hero h1 .w:nth-child(3){animation-delay:.55s}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(120deg,#fff 0%,var(--silver) 30%,var(--iridescent) 50%,var(--silver) 70%,#fff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes shimmer{0%,100%{background-position:0 0}50%{background-position:200% 0}}
@keyframes fadeUp{to{opacity:1}}

.hero p.lede{
  font-size:19px;line-height:1.55;color:var(--mute);
  max-width:560px;margin:0 auto 44px;
  text-wrap:pretty;font-weight:300;
  opacity:0;animation:fadeUp 1s .7s var(--ease-out-expo) forwards;
}

.hero-cta{
  display:inline-flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fadeUp 1s .9s var(--ease-out-expo) forwards;
}

/* Buttons */
.btn-primary{
  position:relative;
  padding:15px 26px;
  background:linear-gradient(180deg,#fff,#c0c0c8);
  color:#040406;
  border-radius:99px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.01em;
  transition:.5s var(--ease-liquid);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 4px rgba(0,0,0,.05),
    0 8px 32px rgba(255,255,255,.14),
    0 2px 8px rgba(0,0,0,.4);
  overflow:hidden;
  isolation:isolate;
}
.btn-primary::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease-out-expo);
  z-index:-1;
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 48px rgba(255,230,245,.28),
    0 4px 12px rgba(0,0,0,.5);
}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:active{transform:translateY(-1px) scale(.99)}

.btn-ghost{
  padding:15px 22px;
  color:var(--fg);
  border:1px solid rgba(240,240,244,.22);
  border-radius:99px;
  font-size:14px;
  font-weight:500;
  transition:.4s var(--ease-liquid);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  border-color:var(--fg);
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

/* Chrome orb stage */
.chrome-wrap{
  margin:80px auto 0;
  width:min(680px,88vw);
  aspect-ratio:16/9;
  position:relative;
  perspective:1400px;
  opacity:0;
  animation:fadeUp 1.2s 1.1s var(--ease-out-expo) forwards;
}
.chrome-img{
  width:100%;height:100%;
  background:url('../assets/img/13-chrom-liquid.jpg') center/contain no-repeat;
  filter:drop-shadow(0 30px 100px rgba(200,200,224,.20));
  transition:transform .5s var(--ease-liquid);
  animation:floatOrb 8s ease-in-out infinite;
}
@keyframes floatOrb{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-16px) rotate(1deg)}
}
.chrome-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  animation:ringRotate 30s linear infinite;
}
.chrome-ring::before{
  content:"";
  position:absolute;
  top:-4px;left:50%;
  width:8px;height:8px;
  background:radial-gradient(circle,#fff,transparent);
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 0 16px #fff;
}
@keyframes ringRotate{to{transform:rotate(360deg)}}

.chrome-label{
  position:absolute;
  font:400 11px/1.5 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
  padding:8px 14px;
  border-radius:8px;
  animation:floatLabel 6s ease-in-out infinite;
}
.chrome-label b{color:var(--fg);display:block;font-weight:600;font-size:14px;margin-bottom:2px}
.chrome-label.l1{top:6%;left:-6%;animation-delay:-1s}
.chrome-label.l2{bottom:14%;right:-4%;animation-delay:-3s}
@keyframes floatLabel{50%{transform:translateY(-10px)}}

/* ============================================================
   SECTIONS (reused across pages)
   ============================================================ */
.section-head{text-align:center;margin-bottom:72px}
.s-label{
  font:400 11px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:28px;
  display:inline-flex;align-items:center;gap:14px;
}
.s-label::before,.s-label::after{
  content:"";width:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--silver),transparent);
}
h2.big{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(48px,7vw,96px);
  line-height:.98;
  letter-spacing:-.025em;
  max-width:980px;
  margin:0 auto 24px;
  text-wrap:balance;
}
h2.big em{
  font-style:italic;
  background:linear-gradient(120deg,#fff,var(--silver),var(--iridescent),var(--silver));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:var(--mute);
  max-width:680px;
  margin:0 auto;
  line-height:1.5;
  font-weight:300;
}

/* Pillars */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:20px;
}
.pill{
  padding:44px 34px;
  border-radius:24px;
  transition:.5s var(--ease-liquid);
  cursor:default;
}
.pill:hover{
  transform:translateY(-6px);
  border-color:var(--glass-border-strong);
}
.pill .pn{
  font-family:var(--serif);
  font-style:italic;
  font-size:44px;
  font-weight:300;
  color:var(--silver);
  margin-bottom:20px;
  line-height:1;
}
.pill h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:28px;
  letter-spacing:-.015em;
  line-height:1.15;
  margin-bottom:16px;
}
.pill h3 em{
  font-style:italic;
  background:linear-gradient(120deg,#fff,var(--iridescent));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.pill p{font-size:14px;line-height:1.65;color:var(--mute)}

/* Detail split */
.detail{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  margin-top:80px;
}
.detail .imgw{
  aspect-ratio:1;
  background:url('../assets/img/13-chrom-torus.jpg') center/cover;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(240,240,244,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  position:relative;
  transition:.6s var(--ease-liquid);
}
.detail .imgw:hover{
  transform:scale(1.02) rotate(-.4deg);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 60px rgba(255,230,245,.1);
}
.detail .imgw::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 40%);
  pointer-events:none;
}
.detail h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(40px,5vw,64px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin-bottom:24px;
  text-wrap:balance;
}
.detail h3 em{
  font-style:italic;
  background:linear-gradient(120deg,#fff,var(--silver),var(--iridescent));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.detail p{
  font-size:17px;line-height:1.65;color:var(--mute);
  margin-bottom:18px;max-width:520px;
}

/* Specs table */
.specs{margin-top:32px;border-top:1px solid rgba(240,240,244,.12)}
.specs .r{
  display:grid;grid-template-columns:auto 1fr;
  padding:16px 0;
  border-bottom:1px solid rgba(240,240,244,.06);
  font:400 13px/1.5 var(--mono);
  color:var(--mute);
  gap:24px;align-items:center;
  transition:.3s;
}
.specs .r:hover{padding-left:8px;color:var(--fg)}
.specs .r b{color:var(--fg);font-weight:500;letter-spacing:.02em;text-align:right}
html[dir="rtl"] .specs .r b{text-align:left}

/* Numbers */
.nums-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:60px;
  border-top:1px solid rgba(240,240,244,.12);
}
.nums-grid .n{
  padding:48px 24px 0;
  border-right:1px solid rgba(240,240,244,.08);
  transition:.4s var(--ease-liquid);
  cursor:default;
}
.nums-grid .n:last-child{border-right:0}
html[dir="rtl"] .nums-grid .n{border-right:0;border-left:1px solid rgba(240,240,244,.08)}
html[dir="rtl"] .nums-grid .n:last-child{border-left:0}
.nums-grid .n:hover{
  background:rgba(255,255,255,.03);
  transform:translateY(-4px);
}
.nums-grid .n:hover b{
  background:linear-gradient(180deg,#fff,var(--iridescent));
  -webkit-background-clip:text;background-clip:text;
}
.nums-grid b{
  display:block;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(48px,6vw,80px);
  line-height:.95;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,var(--silver));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  margin-bottom:14px;
  transition:.4s;
}
.nums-grid b em{font-style:italic}
.nums-grid span{
  font:400 12px/1.4 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);
  display:block;padding-bottom:24px;
}

/* CTA final */
.cta-final{
  padding:120px 24px 80px;
  text-align:center;
  position:relative;
}
.cta-final::before{
  content:"";position:absolute;
  top:50%;left:50%;
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(255,230,245,.10),transparent 65%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{50%{transform:translate(-50%,-50%) scale(1.15);opacity:.7}}

/* ============================================================
   RESERVES page
   ============================================================ */
.vaults{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:60px;
}
.vault{
  padding:36px;
  border-radius:24px;
  position:relative;
  transition:.5s var(--ease-liquid);
}
.vault:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:var(--glass-border-strong);
}
.vault .vh{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:24px;
  gap:16px;
}
.vault h4{
  font-family:var(--serif);font-weight:300;
  font-size:32px;letter-spacing:-.015em;
}
.vault h4 em{font-style:italic;color:var(--silver)}
.vault .code{
  font:500 11px/1 var(--mono);
  padding:4px 10px;
  background:rgba(255,255,255,.06);
  border-radius:99px;
  color:var(--silver);
  letter-spacing:.14em;
}
.vault .r{
  display:grid;grid-template-columns:1fr auto;
  padding:12px 0;
  border-bottom:1px dashed rgba(240,240,244,.08);
  font:400 13px/1.5 var(--mono);
  color:var(--mute);
}
.vault .r:last-child{border-bottom:0}
.vault .r b{color:var(--fg);font-weight:500}
.vault .live{
  display:inline-flex;align-items:center;gap:6px;
  color:#8fffb0;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:16px;
}
.vault .live::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#8fffb0;
  box-shadow:0 0 8px #8fffb0;
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.3;transform:scale(.7)}}

/* ============================================================
   MERCURY page
   ============================================================ */
.mercury-hero{text-align:center;padding:0 0 60px}
.mercury-diagram{
  margin:60px auto 0;
  max-width:900px;
  padding:60px 40px;
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
.mercury-diagram svg{width:100%;height:auto}
.mercury-caption{
  font:400 12px/1.6 var(--mono);
  color:var(--mute);
  text-align:center;
  margin-top:32px;
  letter-spacing:.06em;
}

.feature-list{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:60px;
}
.feature{
  padding:28px 30px;
  border-radius:20px;
  display:flex;gap:20px;align-items:flex-start;
  transition:.4s var(--ease-liquid);
}
.feature:hover{
  transform:translateX(4px);
  border-color:var(--glass-border-strong);
}
html[dir="rtl"] .feature:hover{transform:translateX(-4px)}
.feature .fi{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:22px;color:var(--fg);
}
.feature h4{
  font-family:var(--serif);font-weight:400;
  font-size:22px;letter-spacing:-.01em;
  margin-bottom:8px;
}
.feature p{font-size:14px;line-height:1.6;color:var(--mute)}

/* ============================================================
   CONTACT page
   ============================================================ */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:60px;
  align-items:start;
}
.contact-info{padding:40px;border-radius:24px}
.contact-info h3{
  font-family:var(--serif);font-weight:300;
  font-size:32px;margin-bottom:20px;
}
.contact-info p{color:var(--mute);line-height:1.7;margin-bottom:24px}
.contact-info .ci-row{
  display:flex;gap:16px;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  align-items:center;
}
.contact-info .ci-row:last-child{border-bottom:0}
.contact-info .ci-label{
  font:500 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);
  width:100px;
}
.contact-info .ci-val{color:var(--fg);font-size:15px}
.contact-info .ci-val a{
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:.3s;
}
.contact-info .ci-val a:hover{border-color:var(--fg)}

.form-wrap{padding:40px;border-radius:24px}
.form-wrap h3{
  font-family:var(--serif);font-weight:300;
  font-size:32px;margin-bottom:24px;
}
.field{margin-bottom:18px}
.field label{
  display:block;
  font:500 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);
  margin-bottom:10px;
}
.field input,.field textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  color:var(--fg);
  font:400 14px/1.5 var(--sans);
  transition:.3s var(--ease-liquid);
  font-family:inherit;
}
.field input:focus,.field textarea:focus{
  outline:0;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 4px rgba(255,230,245,.06);
}
.field textarea{resize:vertical;min-height:100px}

/* ============================================================
   Footer (kept minimal — team line removed)
   ============================================================ */
footer{
  padding:60px 32px 120px;  /* extra bottom padding for dock */
  border-top:1px solid rgba(240,240,244,.06);
  position:relative;
  z-index:2;
  transition:opacity .5s var(--ease-liquid);
}
/* Footer only shows when the Home page is active */
body:not(.on-home) footer{display:none}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:32px;max-width:1280px;margin:0 auto;
}
.foot-grid h5{
  font:400 11px/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--silver);margin-bottom:16px;
}
.foot-grid a{
  display:block;padding:5px 0;
  font-size:14px;color:var(--mute);
  transition:.3s var(--ease-liquid);
  position:relative;
  width:fit-content;
}
.foot-grid a::before{
  content:"";
  position:absolute;
  bottom:2px;left:0;
  width:0;height:1px;
  background:var(--fg);
  transition:width .4s var(--ease-liquid);
}
.foot-grid a:hover{color:var(--fg);transform:translateX(3px)}
html[dir="rtl"] .foot-grid a:hover{transform:translateX(-3px)}
.foot-grid a:hover::before{width:100%}
.foot-grid .lead .logo-badge{padding:0;margin-bottom:12px}
.copy-foot{
  max-width:1280px;margin:48px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(240,240,244,.06);
  display:flex;justify-content:space-between;
  font:400 12px/1 var(--mono);color:var(--mute);
  flex-wrap:wrap;gap:8px;
}

/* ============================================================
   Scroll animations (reveal in / disappear out)
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(50px);
  filter:blur(6px);
  transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo),filter 1s var(--ease-out-expo);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal.out{opacity:0;transform:translateY(-30px) scale(.98);filter:blur(4px)}

/* Stagger children */
.reveal.stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo);
}
.reveal.in.stagger > *{opacity:1;transform:none}
.reveal.in.stagger > *:nth-child(1){transition-delay:.08s}
.reveal.in.stagger > *:nth-child(2){transition-delay:.16s}
.reveal.in.stagger > *:nth-child(3){transition-delay:.24s}
.reveal.in.stagger > *:nth-child(4){transition-delay:.32s}
.reveal.in.stagger > *:nth-child(5){transition-delay:.40s}
.reveal.in.stagger > *:nth-child(6){transition-delay:.48s}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:960px){
  .pillars,.vaults,.feature-list,.contact-grid{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr;gap:40px}
  .nums-grid{grid-template-columns:1fr 1fr}
  .nums-grid .n{border-right:0;border-bottom:1px solid rgba(240,240,244,.08)}
  .nums-grid .n:nth-child(even){border-right:0}
  .nums-grid .n:nth-child(-n+2){border-bottom:1px solid rgba(240,240,244,.08)}
  html[dir="rtl"] .nums-grid .n{border-left:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .hero h1{font-size:56px}
  .chrome-wrap{margin-top:48px;aspect-ratio:4/3}
  .chrome-label{font-size:10px;padding:6px 10px}
  .page{padding:96px 20px 120px}
}
@media(max-width:640px){
  .top{top:14px;left:14px;right:14px}
  .logo-badge{font-size:18px;padding:8px 14px}
  .lang-switch button{padding:6px 10px;min-width:42px;font-size:11px}
  .dock-wrap{bottom:16px;padding:6px}
  .dock-item{--size:52px;border-radius:14px}
  .dock-item svg{width:22px;height:22px}
  .dock-item:hover{--size:62px}
  .dock-sep{height:28px}
  .foot-grid{grid-template-columns:1fr}
  .nums-grid{grid-template-columns:1fr}
  .copy-foot{justify-content:center;text-align:center}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01s !important;
  }
}