:root{
  --bg:#070a12; --panel:#0f1220; --edge:#191d2f; --text:#e8ecf3; --muted:#9aa3b2;
  --primary:#00e5ff; --accent:#8a4bff; --accent2:#ff00d4; --ok:#48ff8a;
  --glow:0 12px 40px rgba(0,229,255,.18), 0 8px 30px rgba(138,75,255,.16);
  --radius:22px;
}

/* Animatable custom property for silky float */
@property --floatY{
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.container{width:min(1140px,92%);margin:0 auto}

/* Header */
.header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg,rgba(7,10,18,.9),rgba(7,10,18,.6) 60%,transparent);border-bottom:1px solid #121629}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.logo-img{width:36px;height:36px;border-radius:12px;box-shadow:var(--glow);background:#000;object-fit:cover}
.nav a,.lang-btn{opacity:.9;margin-left:16px}
.lang-btn{border:1px solid var(--edge);background:#0e1120;border-radius:12px;padding:6px 10px;cursor:pointer;color:var(--text)}
.lang-btn[aria-pressed="true"]{background:#14182a}

/* Hero */
.grad{background:linear-gradient(90deg,var(--primary),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{padding:80px 0 40px;background:
  radial-gradient(60% 40% at 15% 10%, rgba(0,229,255,.16), transparent 60%),
  radial-gradient(60% 40% at 85% 0%, rgba(255,0,212,.14), transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
.hero .subtitle{color:var(--muted)}
.kicker{font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* Badges */
.badges{display:flex;gap:clamp(10px,1.2vw,16px);flex-wrap:wrap;align-items:center;margin:12px 0 8px}
.badges img{height:clamp(40px,5vw,60px);width:auto;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}

/* Pills (no jitter) */
.hero-metrics{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.chip{background:#0c1020;border:1px solid var(--edge);border-radius:999px;padding:8px 12px;font-size:13px;color:var(--muted)}
.chip strong{color:var(--text);font-variant-numeric:tabular-nums}
.chip .num{display:inline-block;min-width:5.2ch;text-align:right}

/* Ticks */
.ticks{list-style:none;margin:14px 0 0;padding:0}
.ticks li{position:relative;margin:10px 0 0 0;padding-left:22px;color:var(--muted)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok)}

/* iPhone mockup — phone levitates, video stays pinned */
.device-wrap{
  position:relative;
  display:grid;
  place-items:center;
}

/* soft oval shadow that syncs with levitation */
.device-wrap::before{
  content:"";
  position:absolute;
  z-index:0;
  bottom:6px;
  width:56%;
  height:clamp(10px,6vw,24px);
  border-radius:999px;
  background:radial-gradient(50% 65% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
  filter:blur(8px);
  opacity:.28;
  transform-origin:center;
  animation:shadowPulse 4.8s cubic-bezier(.4,0,.2,1) infinite;
  /* ✨ added so JS can smoothly sync the shadow */
  transform: scale(var(--shadowScale,1));
}

.iphone{
  position:relative;
  z-index:1;
  width:min(390px,90vw);
  aspect-ratio:9/19.5;
  background:#000;
  border-radius:36px;
  border:1px solid #1b1f33;
  box-shadow:var(--glow);
  overflow:hidden;
  will-change:transform;
  backface-visibility:hidden;
  transform-style:preserve-3d;

  /* Smooth, visible float driven by a custom property (but with a transform, so it's GPU-only) */
  --floatY: 0px;
}

/* Video stays optically fixed by counter-transform */
.iphone-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:28px;
  animation:none!important;
  will-change:auto;
  z-index:1;
}

/* Default (classic) float — used as fallback if custom props aren't supported */
.smooth-float{
  animation:floatYclassic 4.8s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes floatYclassic{
  from{ transform:translate3d(0, 10px, 0) }
  to  { transform:translate3d(0,-22px, 0) }
}

/* High-fidelity float that also keeps video pinned (modern browsers) */
@supports (transform: translate3d(0, var(--floatY), 0)){
  .smooth-float{
    animation:floatYvar 4.8s cubic-bezier(.4,0,.2,1) infinite;
    transform:translate3d(0, var(--floatY), 0);
  }
  /* animate the custom property like a sine-y curve (no “pause” at ends) */
  @keyframes floatYvar{
    0%   { --floatY:  10px; }
    12.5%{ --floatY:   4px; }
    25%  { --floatY:  -6px; }
    37.5%{ --floatY: -16px; }
    50%  { --floatY: -22px; }
    62.5%{ --floatY: -16px; }
    75%  { --floatY:  -6px; }
    87.5%{ --floatY:   4px; }
    100% { --floatY:  10px; }
  }
  /* counter-translate the video so it appears locked while the shell floats */
  .iphone .iphone-video{
    transform:translate3d(0, calc(-1 * var(--floatY)), 0) !important;
  }
}

/* ✨ JS-driven float hook: disables CSS animations when script runs */
.iphone.js-float-active.smooth-float{ animation:none !important; }
.device-wrap.js-float-active::before{ animation:none !important; }

.iphone-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:160px;height:26px;background:#0b0d14;border-radius:14px;box-shadow:inset 0 0 0 1px #1a1e2c
}

.panel{background:linear-gradient(180deg,#0f1224,#0a0d1a);border:1px solid var(--edge);border-radius:28px;box-shadow:var(--glow);overflow:hidden}

/* Sections */
.section{padding:68px 0}
.section-head{margin:0 0 16px}
.subtitle{color:var(--muted);margin:8px 0 0}

/* Feature rail — auto loop + pause on hover (CSS-driven) */
.rail-wrap{position:relative}
.rail{display:block;overflow:hidden;padding-bottom:0}
.fcard{scroll-snap-align:start;background:var(--panel);border:1px solid var(--edge);border-radius:20px;padding:14px}
.fshot{width:100%;border-radius:14px;border:1px solid #1b1f33;margin-bottom:10px}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-thumb{background:#1a1f34;border-radius:999px}
.rail-fade{position:absolute;top:0;bottom:0;width:40px;pointer-events:none}
.rail-fade--left{left:-2px;background:linear-gradient(90deg,var(--bg),transparent)}
.rail-fade--right{right:-2px;background:linear-gradient(270deg,var(--bg),transparent)}

#features{ --feat-card-w: 260px; }
#features .rail-track{
  --loop-dur: 48s;
  display:flex;
  gap:14px;
  width:max-content;
  will-change:transform;
  animation:featureLoop var(--loop-dur) linear infinite;
}
#features .rail-track .fcard{ flex:0 0 var(--feat-card-w); }
#features .rail:hover .rail-track,
#features .rail:focus-within .rail-track{ animation-play-state:paused }

@keyframes featureLoop{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* Pricing */
.controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}
.pillbar{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--edge);background:#0e1120;color:#e8ecf3;border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .2s ease,transform .06s}
.pill:hover{transform:translateY(-1px)}
.pill.is-active{background:linear-gradient(45deg,var(--primary),var(--accent2));color:#061218;font-weight:700}
.pricing{display:grid;grid-template-columns:1fr;gap:20px;padding:18px}
.price-figure{font-size:44px;line-height:1;font-weight:800;margin-bottom:8px}
.price-figure .currency{font-size:.6em;opacity:.8;margin-right:4px}
.price-figure .per{font-size:.38em;opacity:.8;margin-left:6px}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* Cards / Support layout */
.cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:16px}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:10px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
details.card summary{cursor:pointer}
details.card[open]{border-color:#2a3150}

/* Footer */
.footer{border-top:1px solid var(--edge);padding:28px 0;margin-top:40px;color:var(--muted);font-size:14px}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .smooth-float{animation:none !important; transform:none !important}
  .device-wrap::before{animation:none}
  #features .rail-track{animation:none}
  .iphone .iphone-video{transform:none !important}
}

/* small screens */
@media (max-width:950px){
  .hero-grid{grid-template-columns:1fr}
}