:root{
  --bg:#050711;
  --panel:rgba(13,17,33,.54);
  --glass:rgba(255,255,255,.055);
  --stroke:rgba(255,255,255,.16);
  --text:#f5f7ff;
  --muted:rgba(229,234,255,.70);
  --soft:rgba(229,234,255,.50);
  --violet:#8b6cff;
  --blue:#5ba7ff;
  --cyan:#62e7ff;
  --green:#38e595;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#03050d}
body{margin:0;min-height:100%;font-family:"Inter","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#03050d;letter-spacing:-.02em;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img{display:block;max-width:100%}
.site-bg{position:fixed;inset:0;z-index:-4;background-image:url('../assets/bg/deep-space-source.png');background-size:cover;background-position:center center;filter:saturate(1.08) contrast(1.04) brightness(.92);transform:scale(1.01)}
.site-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,5,13,.62),rgba(3,5,13,.20) 48%,rgba(3,5,13,.58)),linear-gradient(180deg,rgba(3,5,13,.04),rgba(3,5,13,.78) 82%,#03050d 100%)}
.site-vignette{position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 74% 18%,rgba(113,88,255,.30),transparent 31%),radial-gradient(circle at 15% 8%,rgba(77,180,255,.12),transparent 34%),radial-gradient(circle at 50% 102%,rgba(0,0,0,.95),transparent 44%)}
.site-grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.20;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}
.section-pad{width:min(calc(100% - 96px),var(--max));margin-inline:auto}.anchor-section{scroll-margin-top:110px}
.glass,.glass-nav{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid var(--stroke);box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 18px 80px rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.nav{position:fixed;top:26px;left:50%;transform:translateX(-50%);width:min(calc(100vw - 96px),1320px);height:70px;z-index:100;display:grid;grid-template-columns:260px 1fr 330px;align-items:center;padding:0 18px 0 16px;border-radius:999px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:"Instrument Serif",serif;font-style:italic;font-size:34px;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.32),rgba(139,108,255,.30) 35%,rgba(12,13,27,.86));border:1px solid rgba(255,255,255,.24);box-shadow:0 0 24px rgba(139,108,255,.30)}.brand-name{font-weight:900;font-size:17px}.nav-center{display:flex;justify-content:center;gap:36px;font-size:14px;font-weight:850;color:rgba(255,255,255,.78)}.nav-center a:hover{color:#fff}.nav-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}.pill{height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0 22px;font-size:14px;font-weight:850}.pill-ghost{border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);background:rgba(255,255,255,.035)}.pill-light{background:#fff;color:#0b0d14;box-shadow:0 12px 40px rgba(255,255,255,.18)}
.badge{width:max-content;max-width:100%;display:flex;gap:10px;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid rgba(177,159,255,.42);background:rgba(255,255,255,.055);box-shadow:inset 0 1px 1px rgba(255,255,255,.16);color:rgba(255,255,255,.86);font-size:13px;font-weight:850}.badge b{display:inline-grid;place-items:center;min-width:46px;height:26px;padding:0 10px;border-radius:999px;background:#fff;color:#0a0c13}
.hero{min-height:100vh;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,80px);align-items:center;padding-top:130px;padding-bottom:70px}.hero-copy{position:relative;z-index:2;max-width:640px}.hero h1{margin:28px 0 0;font-size:clamp(58px,7vw,104px);line-height:.94;font-weight:950;letter-spacing:-.075em}.hero h1 span{background:linear-gradient(90deg,#fff,#eef0ff 58%,#c2bbff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero h1 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:#c8c1ff}.lead{margin:25px 0 0;color:var(--muted);font-size:clamp(16px,1.15vw,19px);line-height:1.82;max-width:620px}.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.button{height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:0 26px;font-weight:900;font-size:15px}.button-primary{background:linear-gradient(135deg,#9b84ff,#5ba7ff);box-shadow:0 16px 42px rgba(111,122,255,.34);color:#fff}.button-play{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.04);color:rgba(255,255,255,.86)}.button-play span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);font-size:12px}.mini-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px}.mini-proof div{min-height:76px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);padding:17px}.mini-proof strong{display:block;font-size:15px}.mini-proof small{display:block;margin-top:7px;color:var(--soft);font-size:13px}
.hero-visual{position:relative;min-height:660px;display:grid;place-items:center;perspective:1600px}.orbit-ring{position:absolute;border:1px solid rgba(148,131,255,.22);border-radius:50%;filter:blur(.1px)}.ring-a{width:680px;height:410px;transform:rotate(-23deg);opacity:.6}.ring-b{width:520px;height:320px;transform:rotate(17deg);opacity:.35}.hand-phone-scene{position:relative;width:min(590px,42vw);height:660px;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.16,1,.3,1)}.hand-palm{position:absolute;right:8%;bottom:8%;width:360px;height:360px;border-radius:46% 44% 38% 52%;background:radial-gradient(circle at 30% 20%,#b77a52,#6a3c2d 46%,#271514 80%);filter:saturate(.9);transform:rotate(-18deg) translateZ(-28px);box-shadow:0 40px 120px rgba(0,0,0,.58);opacity:.92}.hand-thumb{position:absolute;right:2%;bottom:26%;width:120px;height:280px;border-radius:80px;background:linear-gradient(135deg,#b4774f,#4b291f 66%);transform:rotate(-28deg) translateZ(14px);box-shadow:inset 0 0 30px rgba(255,255,255,.10),0 16px 50px rgba(0,0,0,.35);opacity:.96}.finger{position:absolute;left:11%;bottom:10%;width:72px;height:250px;border-radius:70px;background:linear-gradient(160deg,#b87b54,#4b2a21 68%);transform-origin:bottom center;filter:saturate(.94);opacity:.92}.finger-1{left:19%;bottom:4%;transform:rotate(-30deg) translateZ(-10px)}.finger-2{left:27%;bottom:2%;height:270px;transform:rotate(-18deg) translateZ(-12px)}.finger-3{left:35%;bottom:3%;height:250px;transform:rotate(-7deg) translateZ(-14px)}.floating-chip{position:absolute;z-index:5;padding:11px 15px;border-radius:999px;font-size:13px;font-weight:850;color:rgba(255,255,255,.82)}.chip-a{right:8%;top:18%}.chip-b{left:10%;bottom:22%}.chip-c{right:12%;bottom:10%}
.phone-shell{position:relative;aspect-ratio:9/19.5;transform-style:preserve-3d}.hero-phone{position:absolute;left:50%;top:50%;width:min(300px,24vw);transform:translate(-50%,-50%) rotateZ(12deg) rotateY(-22deg) rotateX(4deg);filter:drop-shadow(0 42px 80px rgba(0,0,0,.65))}.phone-metal{position:absolute;inset:0;border-radius:42px;padding:6px;background:linear-gradient(135deg,#edf2ff 0,#5f6574 7%,#0b0e15 18%,#1d2433 55%,#f7fbff 69%,#0b0c11 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 9px 0 16px rgba(255,255,255,.12),inset -12px 0 22px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.11)}.phone-metal::before{content:"";position:absolute;inset:5px;border-radius:37px;border:1px solid rgba(255,255,255,.18);pointer-events:none}.phone-glass{position:relative;width:100%;height:100%;overflow:hidden;border-radius:36px;background:#02040a;box-shadow:inset 0 0 0 3px rgba(0,0,0,.86),inset 0 0 30px rgba(255,255,255,.08)}.screen{position:absolute;inset:13px;border-radius:28px;overflow:hidden;background:#02040a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.screen img{width:100%;height:100%;object-fit:cover;object-position:center center}.screen-glare{position:absolute;inset:13px;border-radius:28px;pointer-events:none;opacity:.72;mix-blend-mode:screen;background:linear-gradient(112deg,rgba(255,255,255,.22) 0 5%,transparent 20% 48%,rgba(255,255,255,.09) 58%,transparent 76%),radial-gradient(circle at 74% 15%,rgba(118,221,255,.23),transparent 14%)}.camera{position:absolute;z-index:5;left:50%;top:19px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#05070a 0 31%,#6f7b92 35% 42%,#090c13 48% 62%,rgba(255,255,255,.48) 71%,#05070a 100%);box-shadow:0 0 0 2px rgba(0,0,0,.52),inset 0 0 3px rgba(111,136,255,.65)}.speaker{position:absolute;z-index:4;left:50%;top:8px;transform:translateX(-50%);width:60px;height:5px;border-radius:999px;background:rgba(255,255,255,.19);opacity:.34}.btn-side{position:absolute;z-index:6;display:block;width:4px;border-radius:999px;background:linear-gradient(180deg,#d2d9e6,#444b57 64%,#090b10);box-shadow:inset 1px 0 1px rgba(255,255,255,.66),0 0 5px rgba(0,0,0,.85)}.power{right:-3px;top:26%;height:78px}.vol{left:-3px;height:60px}.vol-a{top:19%}.vol-b{top:30%}.antenna{position:absolute;z-index:7;width:24px;height:2px;background:rgba(255,255,255,.46);opacity:.42}.top-left{left:26px;top:4px}.top-right{right:26px;top:4px}.bottom-left{left:26px;bottom:4px}.bottom-right{right:26px;bottom:4px}.port-row{position:absolute;z-index:6;left:50%;bottom:2px;transform:translateX(-50%);height:8px;display:flex;align-items:center;gap:12px;opacity:.62}.port-row i{width:4px;height:4px;border-radius:50%;background:#dbe5ff;box-shadow:8px 0 0 #dbe5ff,16px 0 0 #dbe5ff}.port-row b{width:34px;height:5px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:#11151d}
.split-heading,.gallery-heading,.compare-copy{max-width:900px}.section-kicker{display:block;color:#bfb8ff;font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}.split-heading h2,.wheel-copy h2,.gallery-heading h2,.compare-copy h2{font-size:clamp(38px,4.2vw,68px);line-height:1.08;letter-spacing:-.065em;margin:0}.split-heading p,.wheel-copy p,.gallery-heading p,.compare-copy p{margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.86;max-width:780px}.pain{padding-top:90px;padding-bottom:80px}.pain-grid{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.pain-card{border-radius:28px;padding:26px;min-height:230px}.pain-card span{color:#bfb8ff;font-weight:900;font-size:14px}.pain-card h3{font-size:23px;line-height:1.2;margin:42px 0 0}.pain-card p{margin:14px 0 0;color:var(--muted);line-height:1.76;font-size:15px}.feature-wheel{min-height:900px;display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:center;padding-top:100px;padding-bottom:100px;border-top:1px solid rgba(255,255,255,.08)}.feature-detail{margin-top:28px;border-radius:24px;padding:24px;min-height:150px}.feature-detail b{display:block;font-size:24px;margin-bottom:12px}.feature-detail span{display:block;color:var(--muted);font-size:16px;line-height:1.8}.wheel-stage{display:grid;grid-template-columns:420px 1fr;gap:34px;align-items:center}.wheel-phone-wrap{min-height:620px;display:grid;place-items:center;position:relative}.wheel-phone{width:310px;transform:rotateZ(-4deg) rotateY(16deg) rotateX(2deg);transition:transform .45s cubic-bezier(.16,1,.3,1), filter .45s}.wheel-phone-wrap:hover .wheel-phone{transform:rotateZ(-2deg) rotateY(5deg) rotateX(0deg) scale(1.02)}.wheel-orb{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(139,108,255,.20),transparent 70%);filter:blur(14px);z-index:-1}.wheel-list{display:grid;gap:12px}.wheel-item{width:100%;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.042);border-radius:22px;padding:18px 20px;cursor:pointer;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"n b" "n s";column-gap:14px;align-items:center;transition:.25s ease}.wheel-item span{grid-area:n;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#bfb8ff;font-weight:950}.wheel-item b{grid-area:b;font-size:18px}.wheel-item small{grid-area:s;color:var(--soft);margin-top:5px}.wheel-item.is-active{border-color:rgba(139,108,255,.62);background:linear-gradient(135deg,rgba(139,108,255,.24),rgba(91,167,255,.09));box-shadow:0 18px 60px rgba(87,90,255,.16)}.stats{padding:70px 0;background:linear-gradient(135deg,rgba(126,88,255,.84),rgba(63,124,255,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.stats-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.stat-card strong{display:block;font-size:clamp(46px,5vw,76px);line-height:1;font-weight:950;letter-spacing:-.06em}.stat-card span{display:block;margin-top:12px;font-size:16px;font-weight:700;color:rgba(255,255,255,.88);line-height:1.55}.gallery{padding-top:100px;padding-bottom:90px}.screen-marquee{margin-top:48px;overflow:hidden;padding:26px 0}.screen-track{display:flex;gap:34px;width:max-content;animation:marquee 32s linear infinite}.mini-phone{width:210px;aspect-ratio:9/19.5;border-radius:28px;padding:8px;background:linear-gradient(135deg,#eaf0ff,#10131c 22%,#05070d 78%,#f5f8ff);box-shadow:0 24px 64px rgba(0,0,0,.42);flex:0 0 auto}.mini-phone img{width:100%;height:100%;object-fit:cover;border-radius:22px}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 17px))}}.compare{padding-top:70px;padding-bottom:90px}.compare-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.compare-card{border-radius:28px;padding:30px;min-height:240px}.compare-card.hot{background:linear-gradient(135deg,rgba(139,108,255,.34),rgba(91,167,255,.15))}.compare-card h3{font-size:26px;margin:0 0 18px}.compare-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.8}.contact{padding-top:80px;padding-bottom:120px}.contact-panel{min-height:430px;border-radius:40px;padding:clamp(34px,5vw,68px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:54px;background:linear-gradient(135deg,rgba(108,105,213,.25),rgba(8,10,20,.58))}.contact-panel h2{font-size:clamp(40px,5vw,72px);line-height:1.08;letter-spacing:-.07em;margin:28px 0 0}.contact-panel p{margin-top:20px;color:var(--muted);font-size:17px;line-height:1.85}.contact-slots{display:grid;gap:16px}.contact-slots a{height:60px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.045);font-weight:900}.reveal{opacity:0;transform:translateY(24px)}.reveal.is-visible{opacity:1;transform:translateY(0);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
@media (max-width:1180px){.section-pad{width:min(calc(100% - 44px),var(--max))}.nav{width:calc(100vw - 34px);grid-template-columns:1fr auto}.nav-center{display:none}.hero,.feature-wheel,.wheel-stage,.contact-panel{grid-template-columns:1fr}.hero{padding-top:120px}.hero-visual{min-height:610px}.hand-phone-scene{width:min(560px,86vw)}.hero-phone{width:min(292px,52vw)}.pain-grid,.stats-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.wheel-phone-wrap{min-height:560px}.compare-grid{grid-template-columns:1fr}.contact-panel{gap:34px}}
@media (max-width:720px){.section-pad{width:min(calc(100% - 28px),var(--max))}.nav{top:14px;height:62px;padding-inline:12px}.brand-mark{width:42px;height:42px;font-size:30px}.brand-name{font-size:14px}.pill-ghost{display:none}.pill-light{height:42px;padding-inline:16px;font-size:13px}.hero{min-height:auto;padding-top:100px}.hero h1{font-size:clamp(46px,13vw,64px)}.lead{font-size:16px}.button{width:100%}.mini-proof,.pain-grid,.stats-inner{grid-template-columns:1fr}.hero-visual{min-height:520px}.hand-phone-scene{height:520px}.hero-phone{width:min(250px,68vw)}.hand-palm{width:260px;height:260px}.hand-thumb{height:210px;width:92px}.finger{height:190px;width:54px}.floating-chip{display:none}.split-heading h2,.wheel-copy h2,.gallery-heading h2,.compare-copy h2{font-size:clamp(34px,10vw,52px)}.feature-wheel{padding-block:70px}.wheel-phone{width:min(260px,72vw)}.wheel-phone-wrap{min-height:440px}.wheel-item{padding:15px}.stats{padding:48px 0}.stat-card strong{font-size:48px}.mini-phone{width:172px}.contact-panel{padding:28px 20px;border-radius:30px}.contact-panel h2{font-size:clamp(34px,10vw,52px)}}

/* v8 feature-wheel refinement: upright phone, tighter typography, richer copy */
.feature-wheel-v8{
  min-height:auto;
  padding-top:84px;
  padding-bottom:84px;
  grid-template-columns:minmax(360px,.86fr) minmax(650px,1.14fr);
  gap:48px;
  align-items:stretch;
}
.feature-wheel-v8 .wheel-copy{
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-block:18px;
}
.feature-wheel-v8 .wheel-copy-top{max-width:640px}
.feature-wheel-v8 .wheel-copy h2{
  font-size:clamp(40px,4.4vw,72px);
  line-height:1.02;
  letter-spacing:-.07em;
  max-width:660px;
}
.feature-wheel-v8 .wheel-copy p{
  max-width:620px;
  font-size:17px;
  line-height:1.9;
  margin-top:22px;
}
.feature-wheel-v8 .feature-detail{
  margin-top:32px;
  min-height:292px;
  padding:28px 30px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:opacity .22s ease,transform .22s ease;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.026));
}
.feature-wheel-v8 .feature-detail b{font-size:25px;line-height:1.2;margin-bottom:12px}
.feature-wheel-v8 .feature-detail span{font-size:16px;line-height:1.78;color:rgba(235,238,255,.76)}
.feature-wheel-v8 .feature-detail ul{
  list-style:none;
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:0;
}
.feature-wheel-v8 .feature-detail li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.84);
}
.feature-wheel-v8 .feature-detail li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#9b84ff,#5ba7ff);
  box-shadow:0 0 18px rgba(139,108,255,.55);
}
.feature-wheel-v8 .feature-detail em{
  display:block;
  margin-top:auto;
  padding-top:18px;
  font-style:normal;
  font-size:13px;
  line-height:1.55;
  color:#c8c2ff;
}
.feature-wheel-v8 .wheel-stage{
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(320px,410px) minmax(310px,1fr);
  gap:34px;
  align-items:stretch;
}
.feature-wheel-v8 .wheel-phone-wrap{
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-wheel-v8 .wheel-phone{
  width:305px;
  transform:none !important;
  filter:drop-shadow(0 42px 78px rgba(0,0,0,.58));
  transition:transform .42s cubic-bezier(.16,1,.3,1),filter .42s cubic-bezier(.16,1,.3,1);
}
.feature-wheel-v8 .wheel-phone-wrap:hover .wheel-phone{
  transform:translateY(-8px) scale(1.012) !important;
}
.feature-wheel-v8 .wheel-orb{width:390px;height:390px;opacity:.92}
.feature-wheel-v8 .wheel-list{
  align-self:center;
  gap:11px;
}
.feature-wheel-v8 .wheel-item{
  min-height:78px;
  border-radius:21px;
  padding:16px 18px;
  grid-template-columns:42px 1fr;
  column-gap:14px;
}
.feature-wheel-v8 .wheel-item span{width:40px;height:40px;border-radius:13px;font-size:14px}
.feature-wheel-v8 .wheel-item b{font-size:17px;letter-spacing:-.02em}
.feature-wheel-v8 .wheel-item small{font-size:13px;color:rgba(235,238,255,.55)}
@media (max-width:1180px){
  .feature-wheel-v8{grid-template-columns:1fr;gap:34px;padding-block:70px}
  .feature-wheel-v8 .wheel-copy{min-height:auto;padding-block:0}
  .feature-wheel-v8 .feature-detail{margin-top:28px;min-height:auto}
  .feature-wheel-v8 .wheel-stage{grid-template-columns:1fr;min-height:auto}
  .feature-wheel-v8 .wheel-phone-wrap{min-height:520px}
  .feature-wheel-v8 .wheel-list{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
}
@media (max-width:720px){
  .feature-wheel-v8 .wheel-copy h2{font-size:clamp(34px,10vw,50px)}
  .feature-wheel-v8 .wheel-copy p{font-size:15px;line-height:1.75}
  .feature-wheel-v8 .feature-detail{padding:22px;border-radius:22px}
  .feature-wheel-v8 .wheel-phone-wrap{min-height:420px}
  .feature-wheel-v8 .wheel-phone{width:min(248px,72vw)}
  .feature-wheel-v8 .wheel-list{grid-template-columns:1fr}
}

/* v9: loosen phone screen crop so the App screenshot feels less trapped by the shell. */
.phone-glass .screen{
  inset:10px 7px 9px;
  border-radius:30px;
}
.phone-glass .screen img{
  width:112%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:translateX(-5.35%);
}
.phone-glass .screen-glare{
  inset:10px 7px 9px;
  border-radius:30px;
}
.feature-wheel-v8 .wheel-phone .screen{
  inset:9px 6px 8px;
  border-radius:30px;
}
.feature-wheel-v8 .wheel-phone .screen img{
  width:115%;
  transform:translateX(-6.5%);
}
@media (max-width:720px){
  .phone-glass .screen{inset:9px 6px 8px;border-radius:28px}
  .phone-glass .screen img{width:113%;transform:translateX(-5.75%)}
}

/* v10: fix screen clipping introduced by v9 zoom.
   Keep the display area wider by reducing bezel inset, but never zoom/crop the screenshot itself. */
.phone-glass .screen{
  inset:7px 5px 7px !important;
  border-radius:31px !important;
}
.phone-glass .screen img{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center center !important;
  transform:none !important;
}
.phone-glass .screen-glare{
  inset:7px 5px 7px !important;
  border-radius:31px !important;
}
.feature-wheel-v8 .wheel-phone .screen{
  inset:7px 5px 7px !important;
  border-radius:31px !important;
}
.feature-wheel-v8 .wheel-phone .screen img{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center center !important;
  transform:none !important;
}
.mini-phone img{
  object-fit:fill !important;
}
@media (max-width:720px){
  .phone-glass .screen{inset:7px 5px 7px !important;border-radius:29px !important}
  .phone-glass .screen img{width:100% !important;max-width:100% !important;transform:none !important;object-fit:fill !important}
}

/* v11: remove distorted CSS-hand and replace it with a clean Apple-style floating device stage.
   The previous hand was built from rotated CSS ellipses; perspective + tilt made it look deformed.
   A real hand-held visual should use a photographed PNG/WebP hand layer or a true 3D hand mesh. */
.hero-visual{
  min-height:640px;
}
.hand-phone-scene{
  width:min(620px,44vw) !important;
  height:640px !important;
  isolation:isolate;
}
.hand-palm,
.hand-thumb,
.finger{
  display:none !important;
}
.hand-phone-scene::before{
  content:"";
  position:absolute;
  left:12%;
  top:14%;
  width:74%;
  height:74%;
  border-radius:52px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 54%,rgba(139,108,255,.10)),
    radial-gradient(circle at 70% 18%,rgba(102,221,255,.22),transparent 22%),
    radial-gradient(circle at 28% 74%,rgba(139,108,255,.28),transparent 30%);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -30px 80px rgba(0,0,0,.18),
    0 38px 120px rgba(0,0,0,.48),
    0 0 80px rgba(94,101,255,.15);
  transform:rotate(-12deg) skewY(-2deg) translateZ(-34px);
  opacity:.84;
  z-index:0;
}
.hand-phone-scene::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:7%;
  width:360px;
  height:70px;
  transform:translateX(-50%) rotate(-5deg);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(139,108,255,.46) 0%,rgba(80,116,255,.18) 34%,transparent 72%);
  filter:blur(8px);
  opacity:.82;
  z-index:0;
}
.hand-phone-scene .hero-phone{
  z-index:3;
  width:min(322px,25vw) !important;
  transform:translate(-50%,-50%) rotateZ(7deg) rotateY(-14deg) rotateX(3deg) !important;
  filter:drop-shadow(0 46px 92px rgba(0,0,0,.72)) drop-shadow(0 0 38px rgba(139,108,255,.18));
}
.hero-visual .chip-a{right:2%;top:21%;z-index:6}
.hero-visual .chip-b{left:12%;bottom:23%;z-index:6}
.hero-visual .chip-c{right:5%;bottom:12%;z-index:6}
@media (max-width:1180px){
  .hand-phone-scene{width:min(560px,86vw) !important;height:600px !important}
  .hand-phone-scene .hero-phone{width:min(306px,54vw) !important}
}
@media (max-width:720px){
  .hero-visual{min-height:500px}
  .hand-phone-scene{height:500px !important}
  .hand-phone-scene::before{left:8%;top:14%;width:84%;height:72%;border-radius:38px}
  .hand-phone-scene::after{width:260px;height:58px;bottom:8%}
  .hand-phone-scene .hero-phone{width:min(254px,70vw) !important}
}

/* v12: bring the hand back, but as one stable SVG illustration instead of separate stretched CSS blobs. */
.hand-phone-scene::before{
  width:70% !important;
  height:70% !important;
  left:18% !important;
  top:16% !important;
  opacity:.38 !important;
  border-radius:56px !important;
  transform:rotate(-10deg) skewY(-1deg) translateZ(-44px) !important;
}
.hand-layer{
  position:absolute;
  left:3%;
  top:1%;
  width:96%;
  height:99%;
  z-index:1;
  pointer-events:none;
  transform:rotate(-9deg) translate3d(12px,30px,-18px);
  transform-origin:56% 58%;
  opacity:.93;
  filter:saturate(.92) contrast(1.02);
}
.hand-layer .hand-shape{
  fill:url(#hqSkinPalm);
  stroke:rgba(255,226,196,.16);
  stroke-width:1.2;
}
.hand-layer .back-finger{fill:url(#hqSkinDark);opacity:.96}
.hand-layer .thumb,.hand-layer .thumb-pad{fill:url(#hqSkinLight);opacity:.97}
.hand-layer .hand-glow{fill:url(#hqSkinGlow);opacity:.56;mix-blend-mode:screen}
.hand-layer .hand-line{
  fill:none;
  stroke:rgba(255,218,188,.23);
  stroke-width:2.2;
  stroke-linecap:round;
}
.hand-layer .hand-line.subtle{opacity:.42;stroke-width:1.5}
.hand-phone-scene .hero-phone{
  z-index:4 !important;
  width:min(318px,25vw) !important;
  transform:translate(-50%,-50%) rotateZ(8deg) rotateY(-13deg) rotateX(3deg) !important;
}
.hero-visual .chip-a,.hero-visual .chip-b,.hero-visual .chip-c{z-index:8!important}
@media (max-width:1180px){
  .hand-layer{left:1%;top:2%;width:98%;height:96%;transform:rotate(-8deg) translate3d(8px,30px,-18px)}
  .hand-phone-scene .hero-phone{width:min(304px,54vw) !important}
}
@media (max-width:720px){
  .hand-layer{left:-4%;top:2%;width:108%;height:96%;transform:rotate(-8deg) translate3d(4px,22px,-18px);opacity:.86}
  .hand-phone-scene .hero-phone{width:min(252px,70vw) !important}
}

/* v13: replace the fake orange CSS/SVG hand with a subdued source-code hand silhouette.
   This keeps the hand-held composition, but avoids cartoon fingers and distorted skin blocks. */
.hand-phone-scene{
  transform-style: preserve-3d;
}
.hand-phone-scene::before{
  background:
    radial-gradient(circle at 48% 44%, rgba(123,107,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(103,100,158,.06) 46%, rgba(0,0,0,.05));
  border-color: rgba(255,255,255,.08);
  opacity:.72;
  transform:rotate(-11deg) translateZ(-58px);
}
.hand-layer{
  left:-2% !important;
  top:5% !important;
  width:104% !important;
  height:92% !important;
  opacity:.82 !important;
  transform:rotate(-7deg) translate3d(4px,24px,-20px) !important;
  filter: blur(.2px) drop-shadow(0 48px 70px rgba(0,0,0,.58));
  pointer-events:none;
}
.hand-layer .palm{
  fill:#312632 !important;
  opacity:.88 !important;
}
.hand-layer .back-finger{
  fill:#262233 !important;
  opacity:.72 !important;
}
.hand-layer .thumb,
.hand-layer .thumb-pad{
  fill:#56342d !important;
  opacity:.76 !important;
}
.hand-layer .hand-glow{
  fill:rgba(255,174,122,.18) !important;
  opacity:.25 !important;
  mix-blend-mode:screen;
}
.hand-layer .hand-line{
  display:none !important;
}
.hand-phone-scene .hero-phone{
  width:min(312px,25vw) !important;
  transform:translate(-50%,-50%) rotateZ(8deg) rotateY(-16deg) rotateX(3deg) !important;
  filter:drop-shadow(0 44px 86px rgba(0,0,0,.7)) drop-shadow(0 0 38px rgba(115,105,255,.16));
}
.hero-phone .screen img{
  object-fit:cover;
  object-position:center center;
}
.floating-chip{
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

@media (max-width:1180px){
  .hand-layer{left:-5% !important;width:110% !important;opacity:.72 !important;}
  .hand-phone-scene .hero-phone{width:min(300px,54vw) !important;}
}
@media (max-width:720px){
  .hand-layer{left:-12% !important;width:122% !important;opacity:.62 !important;}
  .hand-phone-scene .hero-phone{width:min(252px,70vw) !important;}
}

/* v14: replace the CSS-built hand/phone stage with the supplied PNG cutout.
   This uses the user's hand-held phone asset directly as source code content,
   not an AI regenerated static landing-page screenshot. */
.hero-image-scene{
  width:min(720px,48vw) !important;
  height:min(780px,82vh) !important;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
  isolation:isolate;
}
.hero-image-scene::before,
.hero-image-scene::after{
  content:none !important;
  display:none !important;
}
.hero-hand-phone-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
  filter:
    drop-shadow(0 34px 70px rgba(0,0,0,.62))
    drop-shadow(0 0 34px rgba(123,96,255,.20));
  transform:translate3d(0,0,0);
  user-select:none;
  pointer-events:none;
}
.hero-visual .orbit-ring{
  opacity:.55;
}
.hero-visual .chip-a{right:2%;top:28%;}
.hero-visual .chip-b{left:5%;bottom:30%;}
.hero-visual .chip-c{right:4%;bottom:20%;}
@media (max-width:980px){
  .hero-image-scene{
    width:min(620px,82vw) !important;
    height:620px !important;
  }
}
@media (max-width:640px){
  .hero-image-scene{
    width:96vw !important;
    height:520px !important;
  }
  .hero-visual .floating-chip{display:none;}
}


/* v15: fix hero image drifting on mouse hover.
   Root cause: initTilt wrote a new transform onto .hero-image-scene,
   replacing the original translate(-50%, -50%) centering transform.
   The PNG hand-phone hero is now a static art layer and must not receive pointer tilt. */
.hero-image-scene{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
}
.hero-image-scene:hover{
  transform:none !important;
}
.hero-hand-phone-image{
  transform:none !important;
}

/* v16: copy and section update -- focus on HTTP API端, not old-phone-first narrative. */
.nav-center{gap:28px;}
.hero h1{max-width:720px;}
.hero .lead{max-width:660px;}

.usecases{
  padding-top:84px;
  padding-bottom:88px;
}
.usecases-heading{
  max-width:960px;
  margin-bottom:34px;
}
.usecases-heading h2{
  margin:16px 0 0;
  font-size:clamp(38px,4.8vw,76px);
  line-height:1.02;
  letter-spacing:-.07em;
  font-weight:950;
  max-width:860px;
}
.usecases-heading p{
  margin:18px 0 0;
  max-width:820px;
  font-size:17px;
  line-height:1.85;
  color:var(--muted);
}
.usecases-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:22px;
  align-items:stretch;
}
.scenario-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.scenario-card{
  min-height:178px;
  border-radius:26px;
  padding:25px 24px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.026));
}
.scenario-card b{
  display:block;
  font-size:21px;
  line-height:1.22;
  letter-spacing:-.04em;
  margin-bottom:12px;
}
.scenario-card p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:rgba(233,237,255,.70);
}
.api-setup{
  border-radius:30px;
  padding:30px;
  background:
    radial-gradient(circle at 90% 0%,rgba(91,167,255,.18),transparent 28%),
    radial-gradient(circle at 8% 100%,rgba(139,108,255,.22),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
}
.api-setup h3{
  margin:22px 0 18px;
  font-size:clamp(28px,2.6vw,44px);
  line-height:1.06;
  letter-spacing:-.065em;
}
.api-setup ol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:13px;
  counter-reset:apiStep;
}
.api-setup li{
  position:relative;
  padding:15px 16px 15px 58px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  counter-increment:apiStep;
}
.api-setup li::before{
  content:counter(apiStep, decimal-leading-zero);
  position:absolute;
  left:15px;
  top:15px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
  color:#d8d2ff;
  background:rgba(139,108,255,.18);
  border:1px solid rgba(139,108,255,.24);
}
.api-setup strong{
  display:block;
  font-size:16px;
  line-height:1.25;
  margin-bottom:5px;
}
.api-setup li span{
  display:block;
  color:rgba(233,237,255,.66);
  font-size:14px;
  line-height:1.65;
}
.api-setup pre{
  margin:18px 0 0;
  padding:18px 20px;
  border-radius:20px;
  overflow:auto;
  background:rgba(2,5,14,.68);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
}
.api-setup code{
  font-family:"SFMono-Regular","Cascadia Code","JetBrains Mono",Consolas,monospace;
  font-size:13px;
  line-height:1.75;
  color:#d9e2ff;
  white-space:pre;
}
.api-note{
  margin:15px 0 0;
  color:#c8c2ff;
  font-size:13px;
  line-height:1.7;
}
@media (max-width:1180px){
  .nav-center{gap:20px;}
  .usecases-grid{grid-template-columns:1fr;}
  .scenario-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .usecases{padding-top:64px;padding-bottom:70px;}
  .usecases-heading h2{font-size:clamp(34px,10vw,52px);}
  .usecases-heading p{font-size:15px;line-height:1.75;}
  .scenario-list{grid-template-columns:1fr;}
  .scenario-card{min-height:auto;padding:22px;border-radius:22px;}
  .api-setup{padding:22px;border-radius:24px;}
  .api-setup li{padding-left:52px;}
}

/* v17: typography/copy cleanup. Avoid large headings leaving one or two Chinese characters alone on a line. */
.tidy-title{
  text-wrap:balance;
}
.tidy-title .title-line{
  display:block;
  white-space:nowrap;
}
.hero-title{
  max-width:780px !important;
  font-size:clamp(58px,6.3vw,96px) !important;
  line-height:.96 !important;
  letter-spacing:-.072em !important;
}
.hero-title .accent-line{
  background:linear-gradient(90deg,#fff,#eef0ff 54%,#c2bbff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.split-heading h2,
.wheel-copy h2,
.usecases-heading h2,
.gallery-heading h2,
.compare-copy h2,
.contact-panel h2{
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:normal;
}
.split-heading h2 .title-line,
.wheel-copy h2 .title-line,
.usecases-heading h2 .title-line,
.gallery-heading h2 .title-line,
.compare-copy h2 .title-line,
.contact-panel h2 .title-line{
  display:block;
  white-space:nowrap;
}
.split-heading h2,
.gallery-heading h2,
.compare-copy h2{
  font-size:clamp(40px,4vw,62px) !important;
  line-height:1.1 !important;
  letter-spacing:-.055em !important;
}
.feature-wheel-v8 .wheel-copy h2,
.usecases-heading h2{
  font-size:clamp(38px,4vw,64px) !important;
  line-height:1.1 !important;
  letter-spacing:-.055em !important;
}
.contact-panel h2{
  font-size:clamp(40px,4.4vw,64px) !important;
  line-height:1.1 !important;
  letter-spacing:-.058em !important;
  max-width:760px;
}
.hero-copy .lead,
.split-heading p,
.wheel-copy p,
.usecases-heading p,
.gallery-heading p,
.compare-copy p,
.contact-panel p{
  word-break:normal;
  overflow-wrap:break-word;
}
@media (max-width:900px){
  .tidy-title .title-line,
  .split-heading h2 .title-line,
  .wheel-copy h2 .title-line,
  .usecases-heading h2 .title-line,
  .gallery-heading h2 .title-line,
  .compare-copy h2 .title-line,
  .contact-panel h2 .title-line{
    white-space:normal;
  }
}
@media (max-width:720px){
  .hero-title{font-size:clamp(44px,12vw,62px) !important;}
  .split-heading h2,
  .gallery-heading h2,
  .compare-copy h2,
  .feature-wheel-v8 .wheel-copy h2,
  .usecases-heading h2,
  .contact-panel h2{
    font-size:clamp(32px,9.5vw,48px) !important;
    line-height:1.12 !important;
  }
}

/* v18: documentation-aligned API interface section */
.api-spec{
  padding-top:88px;
  padding-bottom:90px;
}
.api-spec-heading{
  max-width:980px;
  margin-bottom:30px;
}
.api-spec-heading h2{
  margin:16px 0 0;
  font-size:clamp(36px,4.6vw,72px);
  line-height:1.03;
  letter-spacing:-.07em;
  font-weight:950;
  max-width:920px;
}
.api-spec-heading p{
  margin:18px 0 0;
  max-width:860px;
  color:var(--muted);
  font-size:17px;
  line-height:1.85;
}
.api-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.api-card{
  min-height:184px;
  border-radius:26px;
  padding:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
}
.api-card span{
  display:inline-flex;
  height:28px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:rgba(139,108,255,.16);
  border:1px solid rgba(139,108,255,.28);
  color:#d9d3ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.api-card h3{
  margin:16px 0 10px;
  font-size:24px;
  letter-spacing:-.04em;
  line-height:1.14;
}
.api-card p{
  margin:0;
  color:rgba(233,237,255,.68);
  line-height:1.75;
  font-size:15px;
}
.api-card.hot{
  background:
    radial-gradient(circle at 100% 0,rgba(91,167,255,.18),transparent 26%),
    linear-gradient(135deg,rgba(139,108,255,.14),rgba(255,255,255,.035));
  border-color:rgba(139,108,255,.32);
}
.api-card.muted-card{opacity:.78}
.api-example-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:16px;
  margin-top:16px;
}
.api-example,.api-rules{
  border-radius:28px;
  padding:26px;
}
.api-example h3,.api-rules h3{
  margin:0 0 16px;
  font-size:24px;
  line-height:1.18;
}
.api-example pre{
  margin:0;
  overflow:auto;
  padding:20px;
  border-radius:20px;
  background:rgba(2,5,14,.72);
  border:1px solid rgba(255,255,255,.10);
  color:#dfe6ff;
  line-height:1.6;
  font-size:13px;
}
.api-rules ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.api-rules li{
  padding:15px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(233,237,255,.72);
  line-height:1.65;
}
.api-rules b{color:#fff}
@media (max-width:980px){
  .api-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .api-example-row{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .api-info-grid{grid-template-columns:1fr;}
  .api-spec{padding-top:60px;padding-bottom:64px;}
}

/* v20: keep only API setup block, add copy-gated disclaimer modal */
.api-access{
  padding-top:88px;
  padding-bottom:96px;
  border-top:1px solid rgba(255,255,255,.08);
}
.api-access-heading{
  max-width:980px;
  margin-bottom:32px;
}
.api-access-heading h2{
  margin:16px 0 0;
  font-size:clamp(38px,4.3vw,66px);
  line-height:1.08;
  letter-spacing:-.058em;
  font-weight:950;
  max-width:940px;
}
.api-access-heading p{
  margin:18px 0 0;
  color:var(--muted);
  max-width:880px;
  font-size:17px;
  line-height:1.85;
}
.api-access-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.86fr);
  gap:22px;
  border-radius:34px;
  padding:30px;
  background:
    radial-gradient(circle at 98% 0%,rgba(91,167,255,.16),transparent 30%),
    radial-gradient(circle at 4% 100%,rgba(139,108,255,.20),transparent 35%),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
}
.api-access-copy h3{
  margin:22px 0 14px;
  font-size:clamp(30px,3vw,48px);
  line-height:1.06;
  letter-spacing:-.06em;
}
.api-access-copy p{
  margin:0;
  color:rgba(233,237,255,.72);
  font-size:16px;
  line-height:1.78;
  max-width:720px;
}
.api-access-copy code{
  color:#e8e4ff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  padding:.08em .36em;
  border-radius:7px;
}
.api-access-copy ol{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:14px;
  counter-reset:apiOnlyStep;
}
.api-access-copy li{
  position:relative;
  min-height:72px;
  padding:16px 18px 16px 62px;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  counter-increment:apiOnlyStep;
}
.api-access-copy li::before{
  content:counter(apiOnlyStep, decimal-leading-zero);
  position:absolute;
  left:17px;
  top:17px;
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(139,108,255,.18);
  border:1px solid rgba(139,108,255,.28);
  color:#d8d2ff;
  font-weight:950;
  font-size:12px;
}
.api-access-copy strong{
  display:block;
  font-size:17px;
  line-height:1.25;
  margin-bottom:5px;
}
.api-access-copy li span{
  display:block;
  color:rgba(233,237,255,.66);
  line-height:1.65;
  font-size:14px;
}
.api-copy-card{
  border-radius:28px;
  padding:22px;
  background:rgba(2,5,14,.66);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.22);
}
.api-copy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.api-copy-head span{
  height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(139,108,255,.16);
  border:1px solid rgba(139,108,255,.26);
  color:#d8d2ff;
  font-size:12px;
  font-weight:950;
  letter-spacing:.05em;
}
.copy-config-btn{
  height:42px;
  border:none;
  border-radius:999px;
  padding:0 18px;
  background:linear-gradient(135deg,#9b84ff,#5ba7ff);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(95,116,255,.28);
}
.copy-config-btn:active{transform:translateY(1px)}
.api-copy-card pre{
  margin:0;
  padding:20px;
  border-radius:20px;
  overflow:auto;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}
.api-copy-card code{
  font-family:"SFMono-Regular","Cascadia Code","JetBrains Mono",Consolas,monospace;
  font-size:13px;
  line-height:1.8;
  color:#e2e8ff;
  white-space:pre;
}
.api-copy-notes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.api-copy-notes span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  color:rgba(233,237,255,.70);
  font-size:12px;
  font-weight:800;
}
.copy-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.copy-modal.is-open{display:flex;}
.copy-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
}
.copy-modal-card{
  position:relative;
  width:min(720px,100%);
  border-radius:30px;
  padding:30px;
  background:
    radial-gradient(circle at 100% 0%,rgba(91,167,255,.14),transparent 30%),
    radial-gradient(circle at 0% 100%,rgba(139,108,255,.18),transparent 32%),
    rgba(16,19,34,.92);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 100px rgba(0,0,0,.52);
}
.copy-modal-card h2{
  margin:10px 0 14px;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.12;
  letter-spacing:-.05em;
}
.copy-modal-card p{
  margin:12px 0 0;
  color:rgba(233,237,255,.72);
  line-height:1.78;
  font-size:15px;
}
.agree-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:20px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88);
  line-height:1.6;
  font-weight:700;
}
.agree-row input{margin-top:4px;accent-color:#8b7cff;}
.copy-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:22px;
}
.modal-btn{
  height:46px;
  border-radius:999px;
  padding:0 22px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.13);
}
.modal-btn.ghost{background:rgba(255,255,255,.05);color:rgba(255,255,255,.86);}
.modal-btn.primary{background:linear-gradient(135deg,#9b84ff,#5ba7ff);border:none;color:#fff;}
.modal-btn.primary:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35);}
.copy-status{min-height:22px;color:#c8c2ff !important;font-size:13px !important;margin-top:12px !important;}
body.modal-lock{overflow:hidden;}
@media (max-width:980px){
  .api-access-panel{grid-template-columns:1fr;padding:24px;}
}
@media (max-width:640px){
  .api-access{padding-top:60px;padding-bottom:70px;}
  .api-access-heading h2{font-size:clamp(32px,9.5vw,48px);}
  .api-access-heading p{font-size:15px;line-height:1.75;}
  .api-access-copy h3{font-size:clamp(28px,8.5vw,40px);}
  .api-access-copy li{padding-left:54px;}
  .api-copy-card{padding:16px;border-radius:24px;}
  .api-copy-head{align-items:flex-start;flex-direction:column;}
  .copy-modal-card{padding:22px;border-radius:24px;}
  .copy-modal-actions{flex-direction:column;}
  .modal-btn{width:100%;}
}

/* v23: contact bottom two-line note and disclaimer entry */
.contact-extra-lines{
  grid-column:1 / -1;
  display:grid;
  gap:12px;
  margin-top:12px;
}
.contact-extra-line{
  width:100%;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:18px;
  align-items:center;
  padding:17px 22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  color:rgba(238,241,255,.84);
  text-align:left;
}
.contact-extra-line strong{
  color:#fff;
  font-size:15px;
  font-weight:950;
  letter-spacing:.02em;
}
.contact-extra-line span{
  color:rgba(222,227,246,.70);
  font-size:14px;
  line-height:1.7;
}
.disclaimer-line{
  cursor:pointer;
  font:inherit;
}
.disclaimer-line:hover{
  border-color:rgba(151,133,255,.45);
  background:linear-gradient(135deg,rgba(139,108,255,.18),rgba(91,167,255,.06));
  transform:translateY(-1px);
}
@media (max-width:720px){
  .contact-extra-line{
    grid-template-columns:1fr;
    gap:6px;
    padding:16px;
  }
}

/* v24: compact contact panel */
.contact{
  padding-top:56px !important;
  padding-bottom:84px !important;
}
.contact-panel{
  width:min(100%,1120px) !important;
  margin:0 auto !important;
  min-height:0 !important;
  padding:clamp(28px,3.4vw,46px) !important;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr) !important;
  gap:28px 44px !important;
  align-items:start !important;
  border-radius:34px !important;
}
.contact-panel h2{
  margin-top:22px !important;
  max-width:600px !important;
  font-size:clamp(34px,3.7vw,56px) !important;
  line-height:1.08 !important;
  letter-spacing:-.056em !important;
}
.contact-panel p{
  margin-top:16px !important;
  max-width:620px !important;
  font-size:15.5px !important;
  line-height:1.78 !important;
}
.contact-slots{
  justify-self:end !important;
  align-self:center !important;
  width:min(100%,440px) !important;
  gap:12px !important;
}
.contact-slots a{
  height:52px !important;
  font-size:15px !important;
}
.contact-extra-lines{
  margin-top:0 !important;
  gap:10px !important;
}
.contact-extra-line{
  min-height:52px !important;
  grid-template-columns:126px 1fr !important;
  gap:16px !important;
  padding:13px 20px !important;
  border-radius:18px !important;
}
.contact-extra-line strong{
  font-size:14.5px !important;
}
.contact-extra-line span{
  font-size:13.5px !important;
  line-height:1.58 !important;
}
@media (max-width:1180px){
  .contact-panel{
    grid-template-columns:1fr !important;
    width:min(100%,960px) !important;
    gap:22px !important;
  }
  .contact-slots{
    justify-self:stretch !important;
    width:100% !important;
  }
}
@media (max-width:720px){
  .contact{
    padding-top:42px !important;
    padding-bottom:66px !important;
  }
  .contact-panel{
    padding:24px 18px !important;
    border-radius:28px !important;
  }
  .contact-panel h2{
    font-size:clamp(32px,9vw,44px) !important;
  }
  .contact-extra-line{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    gap:6px !important;
    padding:14px 16px !important;
  }
}


/* v25: use supplied deep-space background + interactive 3D card motion */
.site-bg{
  background-image:url('../assets/bg/deep-space-source.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  filter:saturate(1.10) contrast(1.06) brightness(.96) !important;
  transform:scale(1.018) !important;
}
.site-bg::after{
  background:
    radial-gradient(circle at 76% 13%,rgba(113,88,255,.08),transparent 28%),
    linear-gradient(90deg,rgba(3,5,13,.60),rgba(3,5,13,.24) 48%,rgba(3,5,13,.58)),
    linear-gradient(180deg,rgba(3,5,13,.03),rgba(3,5,13,.72) 78%,#03050d 100%) !important;
}
.site-vignette{
  background:
    radial-gradient(circle at 74% 18%,rgba(113,88,255,.24),transparent 31%),
    radial-gradient(circle at 16% 10%,rgba(77,180,255,.10),transparent 34%),
    radial-gradient(circle at 50% 104%,rgba(0,0,0,.74),transparent 46%) !important;
}
.site-grain{opacity:.16 !important;}

/* Cards / modules feel like glass blocks floating above the space surface. */
.mini-proof div,
.pain-card,
.feature-detail,
.wheel-item,
.api-access-panel,
.api-access-copy li,
.api-copy-card,
.mini-phone,
.compare-card,
.contact-panel,
.contact-slots a,
.contact-extra-line{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform,opacity,filter;
  transition:
    transform .48s cubic-bezier(.16,1,.3,1),
    box-shadow .48s cubic-bezier(.16,1,.3,1),
    border-color .36s ease,
    background .36s ease,
    filter .36s ease;
}
.mini-proof div::after,
.pain-card::after,
.feature-detail::after,
.wheel-item::after,
.api-access-panel::after,
.api-access-copy li::after,
.api-copy-card::after,
.mini-phone::after,
.compare-card::after,
.contact-panel::after,
.contact-slots a::after,
.contact-extra-line::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(120deg,transparent 4%,rgba(255,255,255,.20) 18%,transparent 38%);
  transform:translateX(-42%) translateZ(24px);
  transition:opacity .36s ease,transform .62s cubic-bezier(.16,1,.3,1);
  mix-blend-mode:screen;
}
.mini-proof div:hover,
.pain-card:hover,
.feature-detail:hover,
.wheel-item:hover,
.api-access-panel:hover,
.api-access-copy li:hover,
.api-copy-card:hover,
.mini-phone:hover,
.compare-card:hover,
.contact-panel:hover,
.contact-slots a:hover,
.contact-extra-line:hover{
  border-color:rgba(157,143,255,.52) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    0 24px 82px rgba(0,0,0,.36),
    0 0 42px rgba(108,119,255,.18) !important;
  filter:saturate(1.08);
}
.mini-proof div:hover::after,
.pain-card:hover::after,
.feature-detail:hover::after,
.wheel-item:hover::after,
.api-access-panel:hover::after,
.api-access-copy li:hover::after,
.api-copy-card:hover::after,
.mini-phone:hover::after,
.compare-card:hover::after,
.contact-panel:hover::after,
.contact-slots a:hover::after,
.contact-extra-line:hover::after{
  opacity:.56;
  transform:translateX(38%) translateZ(24px);
}
.motion-card.is-floating{
  animation:moduleFloat 5.6s ease-in-out infinite;
  animation-delay:var(--float-delay,0ms);
}
.motion-card.is-hovering{
  animation-play-state:paused;
}
@keyframes moduleFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,18px)}
}

/* Entrance sequence: sections enter as a small cascade instead of one flat fade. */
.motion-seq{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.985);
  filter:blur(8px);
}
.motion-seq.seq-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  transition:
    opacity .72s cubic-bezier(.16,1,.3,1),
    transform .78s cubic-bezier(.16,1,.3,1),
    filter .72s ease;
  transition-delay:var(--seq-delay,0ms);
}

/* Scroll/touch active focus: on mobile, the card nearest the viewport center gets a lift. */
.motion-card.scroll-focus{
  transform:translate3d(0,-10px,24px) scale(1.012) !important;
  border-color:rgba(157,143,255,.56) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    0 24px 82px rgba(0,0,0,.38),
    0 0 52px rgba(108,119,255,.20) !important;
}

/* Better staged phone / gallery movement while scrolling. */
.hero-hand-phone-image,
.wheel-phone,
.mini-phone img{
  will-change:transform,filter;
}
.hero-hand-phone-image{
  animation:heroPhoneBreath 7.5s ease-in-out infinite;
}
@keyframes heroPhoneBreath{
  0%,100%{transform:translate3d(0,0,0) rotateZ(0deg)}
  50%{transform:translate3d(0,-10px,0) rotateZ(.6deg)}
}
.screen-track:hover{animation-play-state:paused;}
.mini-phone:nth-child(2n){--float-delay:260ms;}
.mini-phone:nth-child(3n){--float-delay:520ms;}

@media (prefers-reduced-motion:reduce){
  .motion-card.is-floating,
  .hero-hand-phone-image,
  .screen-track{animation:none !important;}
  .motion-seq,
  .motion-seq.seq-visible{transition:none !important;filter:none !important;}
}
@media (max-width:720px){
  .motion-card.is-floating{animation-duration:6.8s;}
  .motion-card.scroll-focus{transform:translate3d(0,-6px,12px) scale(1.006) !important;}
}

/* v26: smoother interaction layer.
   Avoid competing transforms from GSAP, hover, center-focus and idle float.
   Cards now use CSS variables for one composed transform and GPU-friendly transitions. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}
.reveal{will-change:opacity,transform;}
.motion-card{
  --rx:0deg;
  --ry:0deg;
  --mx:0px;
  --my:0px;
  --mz:0px;
  --focus-y:0px;
  --scale:1;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  transform-origin:center center;
  transform:
    perspective(1050px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(var(--scale));
  transition:
    transform .48s var(--ease-out),
    box-shadow .48s var(--ease-out),
    border-color .34s ease,
    background .34s ease,
    filter .34s ease,
    opacity .72s var(--ease-soft);
  contain:paint;
}
.motion-card.motion-seq{
  opacity:0;
  filter:blur(12px);
  transform:perspective(1050px) translate3d(0,42px,0) rotateX(6deg) scale(.965);
}
.motion-card.motion-seq.seq-visible{
  opacity:1;
  filter:blur(0);
  transform:
    perspective(1050px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(var(--scale));
  transition-delay:var(--seq-delay,0ms);
}
.motion-card.is-floating{
  animation:none !important;
}
.motion-card.is-hovering,
.motion-card.scroll-focus{
  filter:saturate(1.10) brightness(1.035);
}
.motion-card.scroll-focus:not(.is-hovering){
  --mz:14px;
  --scale:1.01;
  border-color:rgba(160,147,255,.58) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    0 28px 88px rgba(0,0,0,.42),
    0 0 60px rgba(105,116,255,.22) !important;
}
.motion-card::after{
  opacity:0;
  transform:translateX(-55%) skewX(-12deg) translateZ(30px);
  background:
    linear-gradient(112deg,transparent 0%,rgba(255,255,255,.04) 14%,rgba(255,255,255,.25) 22%,rgba(130,180,255,.16) 28%,transparent 44%);
  transition:opacity .32s ease,transform .72s var(--ease-out);
}
.motion-card.is-hovering::after,
.motion-card.scroll-focus::after,
.wheel-item.is-active::after{
  opacity:.62;
  transform:translateX(42%) skewX(-12deg) translateZ(30px);
}
.motion-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% -20%,rgba(151,140,255,.38),transparent 42%);
  transition:opacity .35s ease;
  mix-blend-mode:screen;
}
.motion-card.is-hovering::before,
.motion-card.scroll-focus::before,
.wheel-item.is-active::before{opacity:.62;}
.wheel-item.is-active{
  --mz:18px;
  --scale:1.012;
  transform:
    perspective(1050px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(var(--scale));
}
.feature-detail,
.api-access-panel,
.api-copy-card,
.compare-card,
.contact-panel,
.pain-card,
.mini-proof div,
.wheel-item,
.contact-extra-line,
.contact-slots a{
  overflow:hidden;
}
.mini-phone{
  transform-origin:center 56%;
}
.mini-phone:hover{
  filter:saturate(1.12) brightness(1.04) drop-shadow(0 24px 56px rgba(109,114,255,.20));
}
.hero-hand-phone-image{
  animation:heroPhoneBreathV26 9s var(--ease-soft) infinite;
  transform:translateZ(0);
}
@keyframes heroPhoneBreathV26{
  0%,100%{translate:0 0; rotate:0deg; filter:drop-shadow(0 34px 70px rgba(0,0,0,.62)) drop-shadow(0 0 34px rgba(123,96,255,.20));}
  50%{translate:0 -8px; rotate:.35deg; filter:drop-shadow(0 40px 78px rgba(0,0,0,.66)) drop-shadow(0 0 44px rgba(123,96,255,.24));}
}
.screen-track{
  will-change:transform;
  transform:translate3d(0,0,0);
  animation-duration:42s !important;
}
.screen-marquee{
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.wheel-phone,
.hero-hand-phone-image,
.site-bg{backface-visibility:hidden;}
@media (hover:none){
  .motion-card{
    transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s ease, filter .35s ease;
  }
  .motion-card.scroll-focus:not(.is-hovering){
    --focus-y:-7px;
    --mz:10px;
    --scale:1.006;
  }
}
@media (prefers-reduced-motion:reduce){
  .motion-card,
  .motion-card.motion-seq,
  .motion-card.motion-seq.seq-visible{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
  .motion-card::before,.motion-card::after{display:none !important;}
  .hero-hand-phone-image{animation:none !important;}
}

/* v27: synced module/image choreography and smoother feature wheel transitions. */
.wheel-screen-stack{
  position:absolute !important;
  overflow:hidden;
  isolation:isolate;
}
.wheel-screen-stack .wheel-screen-current,
.wheel-screen-stack .wheel-screen-next{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center center !important;
  transform:translateZ(0) scale(1) !important;
  transition:
    opacity .34s cubic-bezier(.22,1,.36,1),
    transform .48s cubic-bezier(.22,1,.36,1),
    filter .48s ease !important;
  backface-visibility:hidden;
}
.wheel-screen-stack .wheel-screen-current{opacity:1;z-index:1;}
.wheel-screen-stack .wheel-screen-next{opacity:0;z-index:2;filter:brightness(1.06) saturate(1.08);transform:translateZ(0) scale(1.016) !important;}
.wheel-screen-stack.is-crossfading .wheel-screen-current{opacity:0;transform:translateZ(0) scale(.992) !important;filter:brightness(.94) saturate(.98);}
.wheel-screen-stack.is-crossfading .wheel-screen-next{opacity:1;transform:translateZ(0) scale(1) !important;}
.feature-wheel-v8 .wheel-stage.is-switching .wheel-phone,
.feature-wheel-v8 .wheel-phone-wrap.is-syncing .wheel-phone{
  transform:translate3d(0,-8px,0) scale(1.018) !important;
  filter:drop-shadow(0 48px 88px rgba(0,0,0,.66)) drop-shadow(0 0 34px rgba(122,105,255,.22));
}
.feature-wheel-v8 .feature-detail.is-switching{
  transform:translate3d(0,-4px,0) scale(.996) !important;
  opacity:.72 !important;
}
.wheel-item.is-pending{
  border-color:rgba(142,126,255,.72) !important;
  background:linear-gradient(135deg,rgba(139,108,255,.22),rgba(91,167,255,.08)) !important;
}

/* Local section sequencing: copy/card/image now enter in one staged beat per block, not by global page index. */
.feature-wheel-v8 .wheel-phone-wrap.motion-seq{
  transform:perspective(1050px) translate3d(0,44px,0) rotateX(5deg) scale(.972);
}
.feature-wheel-v8 .wheel-phone-wrap.motion-seq.seq-visible{
  transform:
    perspective(1050px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
}
.screen-track{
  animation-play-state:paused;
}
.screen-marquee.marquee-ready .screen-track{
  animation-play-state:running;
}
.mini-phone.motion-seq{
  transform:perspective(980px) translate3d(0,42px,0) rotateX(7deg) rotateY(-4deg) scale(.965);
}
.mini-phone.motion-seq.seq-visible{
  transform:
    perspective(980px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale));
}
.motion-card{
  transform-box:border-box;
}
.motion-card.is-hovering{
  z-index:3;
}
.wheel-phone-wrap.motion-card::before,
.wheel-phone-wrap.motion-card::after{
  inset:8% 2%;
  border-radius:44px;
}
.wheel-phone-wrap.motion-card::after{
  opacity:0;
}
.wheel-phone-wrap.motion-card.is-hovering::after,
.wheel-phone-wrap.motion-card.scroll-focus::after{
  opacity:.38;
}

/* Make active states feel connected with the phone screenshot. */
.wheel-list{
  position:relative;
}
.wheel-item.is-active{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    0 18px 58px rgba(92,96,255,.18),
    0 0 0 1px rgba(141,128,255,.24) !important;
}
.wheel-item.is-active span{
  background:linear-gradient(135deg,rgba(142,126,255,.34),rgba(91,167,255,.20));
}

@media (hover:none){
  .wheel-screen-stack .wheel-screen-current,
  .wheel-screen-stack .wheel-screen-next{
    transition-duration:.28s !important;
  }
  .feature-wheel-v8 .wheel-stage.is-switching .wheel-phone,
  .feature-wheel-v8 .wheel-phone-wrap.is-syncing .wheel-phone{
    transform:translate3d(0,-5px,0) scale(1.01) !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .screen-track{animation-play-state:paused !important;}
  .wheel-screen-stack .wheel-screen-current,
  .wheel-screen-stack .wheel-screen-next{transition:none !important;}
}

/* v28: prevent hover/center-focus state from sticking on desktop.
   Desktop cards now return to neutral after pointer leave; center lift is reserved for touch/mobile scrolling. */
.motion-card{
  --gx:50%;
  --gy:0%;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1),
    border-color .28s ease,
    background .28s ease,
    filter .28s ease,
    opacity .68s cubic-bezier(.16,1,.3,1) !important;
}
.motion-card::before{
  background:
    radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(170,158,255,.34),transparent 34%),
    radial-gradient(circle at 50% -22%,rgba(151,140,255,.30),transparent 44%) !important;
  transition:opacity .24s ease !important;
}
.motion-card::after{
  transition:opacity .24s ease, transform .54s cubic-bezier(.22,1,.36,1) !important;
}
.motion-card:not(.is-hovering):not(.scroll-focus)::before,
.motion-card:not(.is-hovering):not(.scroll-focus)::after{
  opacity:0 !important;
}
@media (hover:hover) and (pointer:fine){
  .motion-card.scroll-focus:not(.is-hovering){
    --focus-y:0px !important;
    --mz:0px !important;
    --scale:1 !important;
    filter:none !important;
  }
  .motion-card.scroll-focus:not(.is-hovering)::before,
  .motion-card.scroll-focus:not(.is-hovering)::after{
    opacity:0 !important;
  }
  .motion-card.is-hovering{
    z-index:8;
    transition-duration:.34s,.34s,.24s,.24s,.24s,.68s !important;
  }
}
/* More compact local sequencing after v28: keep section cards synchronized with the current block. */
.pain-grid .motion-card:nth-child(1),
.compare-grid .motion-card:nth-child(1),
.contact-extra-lines .motion-card:nth-child(1){--seq-delay:0ms !important;}
.pain-grid .motion-card:nth-child(2),
.compare-grid .motion-card:nth-child(2),
.contact-extra-lines .motion-card:nth-child(2){--seq-delay:70ms !important;}
.pain-grid .motion-card:nth-child(3),
.compare-grid .motion-card:nth-child(3){--seq-delay:140ms !important;}
.pain-grid .motion-card:nth-child(4){--seq-delay:210ms !important;}
.wheel-list .motion-card:nth-child(1){--seq-delay:120ms !important;}
.wheel-list .motion-card:nth-child(2){--seq-delay:170ms !important;}
.wheel-list .motion-card:nth-child(3){--seq-delay:220ms !important;}
.wheel-list .motion-card:nth-child(4){--seq-delay:270ms !important;}
.wheel-list .motion-card:nth-child(5){--seq-delay:320ms !important;}
.wheel-list .motion-card:nth-child(6){--seq-delay:370ms !important;}


/* v29: use the user-supplied deep-space PNG directly as the site background.
   Keep overlays lighter so the planet, stars and mountain horizon remain visible. */
.site-bg{
  background-image:url('../assets/bg/deep-space-source.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.12) contrast(1.06) brightness(.98) !important;
}
.site-bg::after{
  background:
    radial-gradient(circle at 72% 12%,rgba(116,100,255,.08),transparent 28%),
    linear-gradient(90deg,rgba(3,5,13,.58),rgba(3,5,13,.18) 46%,rgba(3,5,13,.54)),
    linear-gradient(180deg,rgba(3,5,13,.02),rgba(3,5,13,.68) 76%,#03050d 100%) !important;
}
.site-vignette{
  background:
    radial-gradient(circle at 74% 18%,rgba(113,88,255,.18),transparent 31%),
    radial-gradient(circle at 16% 10%,rgba(77,180,255,.08),transparent 34%),
    radial-gradient(circle at 50% 104%,rgba(0,0,0,.70),transparent 46%) !important;
}


/* v30: make the supplied deep-space image actually visible.
   Previous builds placed the fixed background behind the opaque body paint via negative z-index,
   so the page still looked black. Keep all content above the background layer. */
html{
  background:#03050d !important;
}
body{
  background:transparent !important;
  isolation:isolate;
}
.site-bg{
  z-index:0 !important;
  opacity:1 !important;
  background-image:url('../assets/bg/deep-space-source.png') !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.16) contrast(1.08) brightness(1.05) !important;
  transform:none !important;
}
.site-bg::after{
  background:
    linear-gradient(90deg,rgba(3,5,13,.44),rgba(3,5,13,.18) 46%,rgba(3,5,13,.36)),
    linear-gradient(180deg,rgba(3,5,13,.02),rgba(3,5,13,.22) 42%,rgba(3,5,13,.50) 78%,rgba(3,5,13,.82) 100%) !important;
}
.site-vignette{
  z-index:1 !important;
  background:
    radial-gradient(circle at 70% 16%,rgba(121,103,255,.16),transparent 34%),
    radial-gradient(circle at 18% 8%,rgba(76,163,255,.08),transparent 35%),
    linear-gradient(180deg,rgba(3,5,13,.06),rgba(3,5,13,.32) 58%,rgba(3,5,13,.72) 100%) !important;
}
.site-grain{
  z-index:2 !important;
  opacity:.10 !important;
}
.nav,
main,
footer,
.modal-backdrop{
  position:relative;
  z-index:3;
}
/* Let the space background breathe through large sections instead of covering it with flat black. */
.hero,
.pain,
.feature-wheel,
.gallery,
.compare,
.contact,
.api-access,
.anchor-section,
.section-pad{
  background:transparent !important;
}
/* Keep readability with localized glass panels rather than a full-page black wash. */
.hero::before,
.pain::before,
.feature-wheel::before,
.gallery::before,
.compare::before,
.contact::before,
.api-access::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(180deg,rgba(3,5,13,.18),rgba(3,5,13,.46));
}
.hero,
.pain,
.feature-wheel,
.gallery,
.compare,
.contact,
.api-access{
  position:relative;
}
/* Restore the planet / horizon visibility on desktop and still keep enough contrast for text. */
@media (min-width:900px){
  .site-bg{
    background-attachment:fixed;
  }
  .hero{
    background:radial-gradient(circle at 72% 35%,rgba(104,91,255,.10),transparent 42%) !important;
  }
}
@media (max-width:720px){
  .site-bg{
    background-position:center top !important;
    filter:saturate(1.12) contrast(1.04) brightness(.98) !important;
  }
  .site-bg::after{
    background:linear-gradient(180deg,rgba(3,5,13,.18),rgba(3,5,13,.62) 62%,rgba(3,5,13,.88) 100%) !important;
  }
}

/* v31: smoother entrance/exit sequencing and remove the page-wide translucent bands.
   The previous section ::before overlays made a rectangular transparent wash visible
   between modules. Readability is now handled by local glass cards only. */
.hero::before,
.pain::before,
.feature-wheel::before,
.gallery::before,
.compare::before,
.contact::before,
.api-access::before{
  display:none !important;
  content:none !important;
  background:none !important;
}

.hero,
.pain,
.feature-wheel,
.gallery,
.compare,
.contact,
.api-access{
  background:transparent !important;
}

/* Keep text readable without drawing a full-width rectangle over the background. */
.hero-copy,
.split-heading,
.wheel-copy,
.gallery-heading,
.compare-copy,
.api-access-heading,
.contact-panel > div:first-child{
  text-shadow:0 2px 18px rgba(0,0,0,.42);
}

/* Enter and exit use mirrored order. Cards no longer pop in/out as a flat batch. */
.motion-card.motion-seq{
  opacity:0;
  filter:blur(14px) saturate(.9);
  transform:
    perspective(1050px)
    translate3d(0,46px,0)
    rotateX(7deg)
    scale(.958) !important;
  transition:
    opacity .64s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1),
    filter .64s ease,
    box-shadow .36s ease,
    border-color .28s ease !important;
  transition-delay:0ms !important;
}
.motion-card.motion-seq.seq-visible{
  opacity:1;
  filter:blur(0) saturate(1);
  transform:
    perspective(1050px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(var(--scale)) !important;
  transition-delay:var(--seq-delay,0ms) !important;
}
.motion-card.motion-seq.seq-out:not(.seq-visible){
  opacity:0;
  filter:blur(10px) saturate(.92);
  transform:
    perspective(1050px)
    translate3d(0,-24px,0)
    rotateX(-4deg)
    scale(.976) !important;
  transition-delay:var(--seq-out-delay,0ms) !important;
}

/* Slightly tighten the current-section rhythm: copy first, cards after, phone last. */
.pain-grid .motion-card:nth-child(1){--seq-delay:0ms !important;--seq-out-delay:162ms !important;}
.pain-grid .motion-card:nth-child(2){--seq-delay:74ms !important;--seq-out-delay:108ms !important;}
.pain-grid .motion-card:nth-child(3){--seq-delay:148ms !important;--seq-out-delay:54ms !important;}
.pain-grid .motion-card:nth-child(4){--seq-delay:222ms !important;--seq-out-delay:0ms !important;}
.wheel-list .motion-card:nth-child(1){--seq-delay:126ms !important;--seq-out-delay:210ms !important;}
.wheel-list .motion-card:nth-child(2){--seq-delay:170ms !important;--seq-out-delay:168ms !important;}
.wheel-list .motion-card:nth-child(3){--seq-delay:214ms !important;--seq-out-delay:126ms !important;}
.wheel-list .motion-card:nth-child(4){--seq-delay:258ms !important;--seq-out-delay:84ms !important;}
.wheel-list .motion-card:nth-child(5){--seq-delay:302ms !important;--seq-out-delay:42ms !important;}
.wheel-list .motion-card:nth-child(6){--seq-delay:346ms !important;--seq-out-delay:0ms !important;}
.compare-grid .motion-card:nth-child(1){--seq-delay:0ms !important;--seq-out-delay:96ms !important;}
.compare-grid .motion-card:nth-child(2){--seq-delay:84ms !important;--seq-out-delay:48ms !important;}
.compare-grid .motion-card:nth-child(3){--seq-delay:168ms !important;--seq-out-delay:0ms !important;}

/* Prevent the background from showing visible section seams while scrolling. */
.site-bg{
  background-attachment:fixed !important;
  background-position:center top !important;
}
.site-bg::after{
  background:
    radial-gradient(circle at 72% 14%,rgba(116,100,255,.08),transparent 30%),
    linear-gradient(90deg,rgba(3,5,13,.38),rgba(3,5,13,.14) 48%,rgba(3,5,13,.34)),
    linear-gradient(180deg,rgba(3,5,13,.04),rgba(3,5,13,.20) 45%,rgba(3,5,13,.62) 100%) !important;
}
.site-vignette{
  background:
    radial-gradient(circle at 70% 16%,rgba(121,103,255,.14),transparent 34%),
    radial-gradient(circle at 18% 8%,rgba(76,163,255,.07),transparent 35%),
    linear-gradient(180deg,rgba(3,5,13,.05),rgba(3,5,13,.22) 60%,rgba(3,5,13,.66) 100%) !important;
}

@media (prefers-reduced-motion:reduce){
  .motion-card.motion-seq,
  .motion-card.motion-seq.seq-visible,
  .motion-card.motion-seq.seq-out{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
}

/* v32: section-level choreography for smoother module enter/exit order.
   Cards are now controlled by their local block, so a group enters in one staged beat
   and exits in reverse instead of each card triggering at a different scroll position. */
.motion-card.motion-seq{
  opacity:0;
  filter:blur(12px) saturate(.92) brightness(.96);
  transform:
    perspective(1100px)
    translate3d(0,38px,0)
    rotateX(6deg)
    scale(.972) !important;
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    transform .68s cubic-bezier(.22,1,.36,1),
    filter .58s ease,
    box-shadow .36s ease,
    border-color .28s ease !important;
  transition-delay:0ms !important;
}
.motion-card.motion-seq.seq-visible{
  opacity:1;
  filter:blur(0) saturate(1) brightness(1);
  transform:
    perspective(1100px)
    translate3d(var(--mx), calc(var(--my) + var(--focus-y)), var(--mz))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(var(--scale)) !important;
  transition-delay:var(--seq-delay,0ms) !important;
}
.motion-card.motion-seq.seq-out:not(.seq-visible){
  opacity:0;
  filter:blur(8px) saturate(.92) brightness(.92);
  transition-delay:var(--seq-out-delay,0ms) !important;
}
.motion-card.motion-seq.seq-out.seq-leave-up:not(.seq-visible){
  transform:
    perspective(1100px)
    translate3d(0,-22px,0)
    rotateX(-4deg)
    scale(.982) !important;
}
.motion-card.motion-seq.seq-out.seq-leave-down:not(.seq-visible){
  transform:
    perspective(1100px)
    translate3d(0,30px,0)
    rotateX(5deg)
    scale(.972) !important;
}

/* Fine tune major local groups: left-to-right on entry, right-to-left on exit. */
.mini-proof .motion-card:nth-child(1){--seq-delay:0ms !important;--seq-out-delay:80ms !important;}
.mini-proof .motion-card:nth-child(2){--seq-delay:64ms !important;--seq-out-delay:40ms !important;}
.mini-proof .motion-card:nth-child(3){--seq-delay:128ms !important;--seq-out-delay:0ms !important;}
.pain-grid .motion-card:nth-child(1){--seq-delay:0ms !important;--seq-out-delay:144ms !important;}
.pain-grid .motion-card:nth-child(2){--seq-delay:64ms !important;--seq-out-delay:96ms !important;}
.pain-grid .motion-card:nth-child(3){--seq-delay:128ms !important;--seq-out-delay:48ms !important;}
.pain-grid .motion-card:nth-child(4){--seq-delay:192ms !important;--seq-out-delay:0ms !important;}
.wheel-stage .feature-detail.motion-card{--seq-delay:0ms !important;--seq-out-delay:160ms !important;}
.wheel-stage .wheel-phone-wrap.motion-card{--seq-delay:72ms !important;--seq-out-delay:116ms !important;}
.wheel-list .motion-card:nth-child(1){--seq-delay:130ms !important;--seq-out-delay:210ms !important;}
.wheel-list .motion-card:nth-child(2){--seq-delay:172ms !important;--seq-out-delay:168ms !important;}
.wheel-list .motion-card:nth-child(3){--seq-delay:214ms !important;--seq-out-delay:126ms !important;}
.wheel-list .motion-card:nth-child(4){--seq-delay:256ms !important;--seq-out-delay:84ms !important;}
.wheel-list .motion-card:nth-child(5){--seq-delay:298ms !important;--seq-out-delay:42ms !important;}
.wheel-list .motion-card:nth-child(6){--seq-delay:340ms !important;--seq-out-delay:0ms !important;}
.api-access-panel .api-access-copy li:nth-child(1){--seq-delay:70ms !important;--seq-out-delay:96ms !important;}
.api-access-panel .api-access-copy li:nth-child(2){--seq-delay:124ms !important;--seq-out-delay:48ms !important;}
.api-access-panel .api-access-copy li:nth-child(3){--seq-delay:178ms !important;--seq-out-delay:0ms !important;}
.api-access-panel .api-copy-card.motion-card{--seq-delay:132ms !important;--seq-out-delay:84ms !important;}
.screen-track .motion-card:nth-child(1){--seq-delay:0ms !important;--seq-out-delay:192ms !important;}
.screen-track .motion-card:nth-child(2){--seq-delay:32ms !important;--seq-out-delay:168ms !important;}
.screen-track .motion-card:nth-child(3){--seq-delay:64ms !important;--seq-out-delay:144ms !important;}
.screen-track .motion-card:nth-child(4){--seq-delay:96ms !important;--seq-out-delay:120ms !important;}
.screen-track .motion-card:nth-child(5){--seq-delay:128ms !important;--seq-out-delay:96ms !important;}
.screen-track .motion-card:nth-child(6){--seq-delay:160ms !important;--seq-out-delay:72ms !important;}
.compare-grid .motion-card:nth-child(1){--seq-delay:0ms !important;--seq-out-delay:96ms !important;}
.compare-grid .motion-card:nth-child(2){--seq-delay:76ms !important;--seq-out-delay:48ms !important;}
.compare-grid .motion-card:nth-child(3){--seq-delay:152ms !important;--seq-out-delay:0ms !important;}
.contact-slots .motion-card:nth-child(1){--seq-delay:92ms !important;--seq-out-delay:96ms !important;}
.contact-slots .motion-card:nth-child(2){--seq-delay:142ms !important;--seq-out-delay:48ms !important;}
.contact-slots .motion-card:nth-child(3){--seq-delay:192ms !important;--seq-out-delay:0ms !important;}
.contact-extra-lines .motion-card:nth-child(1){--seq-delay:250ms !important;--seq-out-delay:52ms !important;}
.contact-extra-lines .motion-card:nth-child(2){--seq-delay:304ms !important;--seq-out-delay:0ms !important;}

/* Keep exit/re-entry light so quick scrolling does not feel sticky. */
.motion-card.motion-seq.seq-out:not(.seq-visible)::before,
.motion-card.motion-seq.seq-out:not(.seq-visible)::after{
  opacity:0 !important;
}
@media (prefers-reduced-motion:reduce){
  .motion-card.motion-seq,
  .motion-card.motion-seq.seq-visible,
  .motion-card.motion-seq.seq-out{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
}

/* v33: move hero composition up slightly and make the main title visibly gradient. */
@media (min-width:901px){
  .hero{
    padding-top:92px !important;
    padding-bottom:52px !important;
    min-height:94vh !important;
    align-items:center !important;
  }
  .hero-copy{
    margin-top:-22px !important;
  }
  .hero-visual{
    margin-top:-28px !important;
  }
}

.hero-title .title-line{
  background:
    linear-gradient(112deg,
      #ffffff 0%,
      #f4f7ff 24%,
      #d9e5ff 46%,
      #9ec1ff 68%,
      #b7a3ff 86%,
      #ede8ff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 10px 28px rgba(112,130,255,.16));
}
.hero-title .accent-line{
  background:
    linear-gradient(112deg,
      #f7f9ff 0%,
      #cbd8ff 30%,
      #8db6ff 58%,
      #b18cff 82%,
      #f1eaff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

@media (max-width:900px){
  .hero{
    padding-top:96px !important;
  }
}

/* v34: full-site glassmorphism pass.
   Give every visible module frame a consistent frosted-glass surface while keeping
   existing 3D hover / staged scroll choreography unchanged. */
:root{
  --glass-surface:linear-gradient(145deg,rgba(255,255,255,.118),rgba(255,255,255,.045) 42%,rgba(90,126,255,.055));
  --glass-surface-strong:linear-gradient(145deg,rgba(255,255,255,.155),rgba(255,255,255,.060) 45%,rgba(121,101,255,.090));
  --glass-surface-active:linear-gradient(145deg,rgba(139,108,255,.30),rgba(91,167,255,.115) 54%,rgba(255,255,255,.055));
  --glass-stroke:rgba(255,255,255,.21);
  --glass-stroke-hot:rgba(180,168,255,.54);
  --glass-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.055),0 22px 72px rgba(0,0,0,.33),0 0 0 1px rgba(255,255,255,.035);
}

:where(
  .glass,
  .glass-nav,
  .badge,
  .button-play,
  .pill-ghost,
  .floating-chip,
  .mini-proof div,
  .pain-card,
  .feature-detail,
  .wheel-item,
  .api-access-panel,
  .api-access-copy li,
  .api-copy-card,
  .api-copy-notes,
  .api-copy-notes span,
  .copy-config-btn,
  .mini-phone,
  .compare-card,
  .contact-panel,
  .contact-slots a,
  .contact-extra-line,
  .copy-modal-card,
  .modal-btn.ghost
){
  background:var(--glass-surface) !important;
  border-color:var(--glass-stroke) !important;
  box-shadow:var(--glass-shadow) !important;
  backdrop-filter:blur(22px) saturate(176%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(176%) !important;
}

:where(.nav.glass-nav){
  background:
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055) 45%,rgba(92,113,255,.075)) !important;
  backdrop-filter:blur(26px) saturate(185%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(185%) !important;
}

:where(.badge,.floating-chip,.pill-ghost,.button-play,.copy-config-btn,.modal-btn.ghost){
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    0 12px 34px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.035) !important;
}

:where(.mini-proof div,.pain-card,.feature-detail,.wheel-item,.api-access-copy li,.api-copy-card,.compare-card,.contact-slots a,.contact-extra-line){
  position:relative;
  isolation:isolate;
}

:where(.mini-proof div,.pain-card,.feature-detail,.wheel-item,.api-access-copy li,.api-copy-card,.compare-card,.contact-slots a,.contact-extra-line)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  opacity:.78;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.14),transparent 34%),
    radial-gradient(circle at 82% 100%,rgba(104,138,255,.105),transparent 38%);
  mix-blend-mode:screen;
}

:where(.mini-proof div,.pain-card,.feature-detail,.wheel-item,.api-access-copy li,.api-copy-card,.compare-card,.contact-slots a,.contact-extra-line)::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.36;
  background:
    linear-gradient(120deg,rgba(255,255,255,.18),transparent 28%,transparent 72%,rgba(120,148,255,.11)),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 36%);
  mask-image:linear-gradient(180deg,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
}

:where(
  .mini-proof div,
  .pain-card,
  .feature-detail,
  .wheel-item,
  .api-access-copy li,
  .api-copy-card,
  .compare-card,
  .contact-slots a,
  .contact-extra-line
):is(:hover,.is-hovering,.scroll-focus){
  background:var(--glass-surface-strong) !important;
  border-color:var(--glass-stroke-hot) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 28px 88px rgba(0,0,0,.40),
    0 0 56px rgba(115,124,255,.20),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

.wheel-item.is-active,
.compare-card.hot{
  background:var(--glass-surface-active) !important;
  border-color:rgba(176,160,255,.62) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 26px 82px rgba(0,0,0,.38),
    0 0 66px rgba(118,102,255,.24),
    0 0 0 1px rgba(151,135,255,.14) !important;
}

.api-access-panel,
.contact-panel{
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.09),transparent 34%),
    radial-gradient(circle at 92% 18%,rgba(117,102,255,.16),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.038) 48%,rgba(13,17,33,.40)) !important;
}

.api-copy-card pre{
  background:rgba(3,6,16,.42) !important;
  border:1px solid rgba(255,255,255,.135) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 18px 48px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(150%) !important;
}

.mini-phone{
  background:
    linear-gradient(135deg,rgba(255,255,255,.36),rgba(255,255,255,.08) 16%,rgba(5,7,13,.82) 72%,rgba(255,255,255,.32)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.copy-modal-backdrop{
  backdrop-filter:blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(130%) !important;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(
    .glass,
    .glass-nav,
    .mini-proof div,
    .pain-card,
    .feature-detail,
    .wheel-item,
    .api-access-panel,
    .api-access-copy li,
    .api-copy-card,
    .compare-card,
    .contact-panel,
    .contact-slots a,
    .contact-extra-line,
    .copy-modal-card
  ){
    background:linear-gradient(145deg,rgba(30,35,58,.88),rgba(10,13,29,.74)) !important;
  }
}

/* v34 rollback interaction hotfix: make all marked modules lift smoothly on hover and scroll proximity.
   This layer is intentionally appended last so it repairs v34 without changing its layout or copy. */
.hq-lift-target{
  --hq-tilt-x:0deg;
  --hq-tilt-y:0deg;
  --hq-dx:0px;
  --hq-dy:0px;
  --hq-focus-y:0px;
  --hq-z:0px;
  --hq-scale:1;
  --hq-glow:0;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform,filter,box-shadow,border-color;
  transition:
    transform .46s cubic-bezier(.22,1,.36,1),
    box-shadow .46s cubic-bezier(.22,1,.36,1),
    border-color .32s ease,
    filter .32s ease,
    background .32s ease;
}
.hq-lift-target:not(.motion-seq),
.hq-lift-target.motion-seq.seq-visible{
  transform:
    perspective(1100px)
    translate3d(var(--hq-dx), calc(var(--hq-dy) + var(--hq-focus-y)), var(--hq-z))
    rotateX(var(--hq-tilt-x))
    rotateY(var(--hq-tilt-y))
    scale(var(--hq-scale)) !important;
}
.hq-lift-target.hq-hover,
.hq-lift-target.hq-scroll-hot{
  filter:saturate(1.1) brightness(1.045);
  border-color:rgba(179,164,255,.66) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 30px 92px rgba(0,0,0,.42),
    0 0 calc(22px + 54px * var(--hq-glow)) rgba(118,128,255,.24),
    0 0 0 1px rgba(255,255,255,.045) !important;
}
.hq-lift-target.hq-hover{z-index:20;}
.hq-lift-target.hq-scroll-hot:not(.hq-hover){
  --hq-scale:1.008;
}
.hq-lift-target::before,
.hq-lift-target::after{
  pointer-events:none;
}
.hq-lift-target.hq-hover::before,
.hq-lift-target.hq-scroll-hot::before{
  opacity:.72 !important;
}
.hq-lift-target.hq-hover::after,
.hq-lift-target.hq-scroll-hot::after{
  opacity:.58 !important;
  transform:translateX(38%) skewX(-12deg) translateZ(28px) !important;
}
.button.hq-lift-target,
.pill.hq-lift-target,
.floating-chip.hq-lift-target{
  position:relative;
  transform-origin:center center;
}
.hero-image-scene.hq-lift-target:not(.motion-seq),
.hero-image-scene.hq-lift-target.motion-seq.seq-visible{
  transform:
    perspective(1250px)
    translate3d(var(--hq-dx), calc(var(--hq-dy) + var(--hq-focus-y)), var(--hq-z))
    rotateX(calc(var(--hq-tilt-x) * .55))
    rotateY(calc(var(--hq-tilt-y) * .55))
    scale(var(--hq-scale)) !important;
}
.wheel-phone-wrap.hq-lift-target.hq-hover .wheel-phone,
.wheel-phone-wrap.hq-lift-target.hq-scroll-hot .wheel-phone{
  filter:drop-shadow(0 48px 88px rgba(0,0,0,.68)) drop-shadow(0 0 38px rgba(122,105,255,.25));
}
@media (hover:hover) and (pointer:fine){
  .hq-lift-target:hover{cursor:default;}
  a.hq-lift-target:hover,
  button.hq-lift-target:hover{cursor:pointer;}
}
@media (hover:none), (pointer:coarse){
  .hq-lift-target{
    transition:
      transform .52s cubic-bezier(.22,1,.36,1),
      box-shadow .52s cubic-bezier(.22,1,.36,1),
      border-color .30s ease,
      filter .30s ease;
  }
  .hq-lift-target.hq-scroll-hot:not(.hq-hover){
    --hq-scale:1.006;
  }
}
@media (prefers-reduced-motion:reduce){
  .hq-lift-target,
  .hq-lift-target:not(.motion-seq),
  .hq-lift-target.motion-seq.seq-visible{
    transform:none !important;
    transition:none !important;
    filter:none !important;
  }
}


/* v34 interaction fix 2:
   1. Keep hero floating chips absolutely positioned after they become lift targets.
   2. Make every interactive frame lift from the full bounding box, including all four corners.
   3. Hide any residual hard rectangle around the hand PNG with a soft edge mask. */
.hero-visual{
  overflow:visible !important;
}
.hero-visual .floating-chip,
.hero-visual .floating-chip.hq-lift-target{
  position:absolute !important;
  transform-origin:center center !important;
  z-index:16 !important;
}
.hero-visual .chip-a,
.hero-visual .floating-chip.chip-a{
  top:34% !important;
  right:5% !important;
  bottom:auto !important;
  left:auto !important;
}
.hero-visual .chip-b,
.hero-visual .floating-chip.chip-b{
  top:64% !important;
  left:10% !important;
  bottom:auto !important;
  right:auto !important;
}
.hero-visual .chip-c,
.hero-visual .floating-chip.chip-c{
  top:auto !important;
  right:7% !important;
  bottom:16% !important;
  left:auto !important;
}
.hero-image-scene{
  overflow:visible !important;
  pointer-events:auto !important;
}
.hero-hand-phone-image{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 2.5%, #000 96.5%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 2.5%, #000 96.5%, transparent 100%);
  mask-composite:intersect;
}
.hq-lift-target{
  pointer-events:auto !important;
  transform-origin:center center !important;
}
@media (hover:hover) and (pointer:fine){
  .hq-lift-target:hover{
    --hq-focus-y:-13px !important;
    --hq-z:22px !important;
    --hq-scale:1.016 !important;
    --hq-glow:1 !important;
    filter:saturate(1.12) brightness(1.05) !important;
    border-color:rgba(188,174,255,.72) !important;
  }
  .hero-image-scene.hq-lift-target:hover{
    --hq-focus-y:-10px !important;
    --hq-z:26px !important;
    --hq-scale:1.014 !important;
  }
  .floating-chip.hq-lift-target:hover{
    --hq-focus-y:-9px !important;
    --hq-z:18px !important;
    --hq-scale:1.045 !important;
  }
}
@media (max-width:980px){
  .hero-visual .floating-chip{display:none !important;}
}

/* v34 interaction fix 3:
   Remove visible rectangular hover frames from image-only stages.
   The hero PNG and the feature phone wrapper should move/lift, but the wrapper itself
   must never draw a box-shadow, border, background, or pseudo highlight rectangle. */
.hero-image-scene,
.hero-image-scene.hq-lift-target,
.hero-image-scene.hq-lift-target.motion-card,
.hero-image-scene.hq-lift-target:is(.hq-hover,.hq-scroll-hot,.is-hovering,.scroll-focus),
.wheel-phone-wrap,
.wheel-phone-wrap.motion-card,
.wheel-phone-wrap.hq-lift-target,
.wheel-phone-wrap.hq-lift-target:is(.hq-hover,.hq-scroll-hot,.is-hovering,.scroll-focus){
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.hero-image-scene::before,
.hero-image-scene::after,
.hero-image-scene.hq-lift-target::before,
.hero-image-scene.hq-lift-target::after,
.wheel-phone-wrap::before,
.wheel-phone-wrap::after,
.wheel-phone-wrap.motion-card::before,
.wheel-phone-wrap.motion-card::after,
.wheel-phone-wrap.hq-lift-target::before,
.wheel-phone-wrap.hq-lift-target::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
}
.hero-image-scene.hq-lift-target.hq-hover,
.hero-image-scene.hq-lift-target.hq-scroll-hot,
.wheel-phone-wrap.hq-lift-target.hq-hover,
.wheel-phone-wrap.hq-lift-target.hq-scroll-hot{
  border-color:transparent !important;
  box-shadow:none !important;
}
.hero-image-scene.hq-lift-target.hq-hover .hero-hand-phone-image,
.hero-image-scene.hq-lift-target.hq-scroll-hot .hero-hand-phone-image{
  filter:
    drop-shadow(0 40px 78px rgba(0,0,0,.66))
    drop-shadow(0 0 38px rgba(123,96,255,.24)) !important;
}
.wheel-phone-wrap.hq-lift-target.hq-hover .wheel-phone,
.wheel-phone-wrap.hq-lift-target.hq-scroll-hot .wheel-phone,
.wheel-phone-wrap.motion-card.is-hovering .wheel-phone,
.wheel-phone-wrap.motion-card.scroll-focus .wheel-phone{
  filter:drop-shadow(0 48px 88px rgba(0,0,0,.68)) drop-shadow(0 0 38px rgba(122,105,255,.25)) !important;
}
/* Keep a soft PNG edge without producing a visible rectangular canvas. */
.hero-hand-phone-image{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 3%,#000 96%,transparent 100%) !important;
  -webkit-mask-composite:source-in !important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 3%,#000 96%,transparent 100%) !important;
  mask-composite:intersect !important;
}

/* v34 interaction fix 5: smooth CSS-first lift for the red-marked modules.
   No JS writes transforms on desktop, so hover cannot stick and corner hit area stays native. */
.lite-lift{
  transform-origin:center center !important;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    filter .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
  will-change:transform,filter;
  backface-visibility:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* Neutralize older motion variables so the CSS hover is the only desktop lift source. */
@media (hover:hover) and (pointer:fine){
  .lite-lift{
    --rx:0deg !important;
    --ry:0deg !important;
    --mx:0px !important;
    --my:0px !important;
    --mz:0px !important;
    --scale:1 !important;
    --focus-y:0px !important;
  }
  .lite-lift.motion-card.motion-seq.seq-visible{
    transform:translate3d(0,0,0) scale(1) !important;
  }
  .lite-lift:hover,
  .lite-lift.motion-card.motion-seq.seq-visible:hover{
    transform:translate3d(0,-13px,28px) scale(1.018) !important;
    filter:saturate(1.12) brightness(1.055) !important;
    border-color:rgba(188,174,255,.72) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(255,255,255,.08),
      0 34px 92px rgba(0,0,0,.42),
      0 0 58px rgba(118,128,255,.23) !important;
  }
  .lite-lift:hover::before{opacity:.72 !important;}
  .lite-lift:hover::after{
    opacity:.54 !important;
    transform:translateX(38%) skewX(-12deg) translateZ(30px) !important;
  }
  .hero-cta .button.lite-lift:hover,
  .nav-actions .pill.lite-lift:hover,
  .contact-slots a.lite-lift:hover{
    transform:translate3d(0,-8px,20px) scale(1.035) !important;
  }
  .mini-proof > div.lite-lift:hover,
  .pain-card.lite-lift:hover,
  .wheel-item.lite-lift:hover,
  .feature-detail.lite-lift:hover,
  .api-copy-card.lite-lift:hover,
  .compare-card.lite-lift:hover,
  .contact-extra-line.lite-lift:hover{
    cursor:default;
  }
  button.lite-lift:hover,
  a.lite-lift:hover{cursor:pointer;}
}

/* Touch/mobile: center card floats while scrolling. */
@media (hover:none), (pointer:coarse){
  .lite-lift.lite-touch-focus,
  .lite-lift.motion-card.motion-seq.seq-visible.lite-touch-focus{
    transform:translate3d(0,-9px,18px) scale(1.01) !important;
    filter:saturate(1.08) brightness(1.04) !important;
    border-color:rgba(188,174,255,.62) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.24),
      0 26px 72px rgba(0,0,0,.34),
      0 0 38px rgba(118,128,255,.17) !important;
  }
}

/* Image-only stages must never draw a rectangular hover frame. */
.hero-image-scene,
.wheel-phone-wrap,
.hero-image-scene.lite-lift,
.wheel-phone-wrap.lite-lift,
.hero-image-scene:is(:hover,.lite-touch-focus),
.wheel-phone-wrap:is(:hover,.lite-touch-focus){
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.hero-image-scene::before,
.hero-image-scene::after,
.wheel-phone-wrap::before,
.wheel-phone-wrap::after{
  display:none !important;
  content:none !important;
}
.hero-hand-phone-image{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 3%,#000 96%,transparent 100%) !important;
  -webkit-mask-composite:source-in !important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 3%,#000 96%,transparent 100%) !important;
  mask-composite:intersect !important;
}

/* v34 interaction fix 6: cursor-depth press surface for all marked frames.
   The point under the cursor visually sinks while the opposite side rises.
   This keeps fix5's smoothness but restores the local 3D interaction. */
.depth-press{
  --depth-rx:0deg;
  --depth-ry:0deg;
  --depth-dx:0px;
  --depth-dy:0px;
  --depth-z:0px;
  --depth-scale:1;
  --depth-glow:0;
  --depth-x:50%;
  --depth-y:50%;
  --depth-ix:50%;
  --depth-iy:50%;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,filter,box-shadow;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .38s cubic-bezier(.22,1,.36,1),
    border-color .28s ease,
    filter .28s ease,
    background .28s ease;
}
.depth-press:not(.motion-card),
.depth-press.motion-card.motion-seq.seq-visible{
  transform:
    perspective(980px)
    translate3d(var(--depth-dx), var(--depth-dy), var(--depth-z))
    rotateX(var(--depth-rx))
    rotateY(var(--depth-ry))
    scale(var(--depth-scale)) !important;
}
.depth-press.depth-active,
.depth-press.depth-touch-focus{
  z-index:12;
  border-color:rgba(172,164,255,.70) !important;
  filter:saturate(1.12) brightness(1.045);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.24),
    inset 0 -18px 42px rgba(15,18,45,.26),
    0 24px 70px rgba(0,0,0,.40),
    0 0 48px rgba(114,126,255,calc(var(--depth-glow) * .28)) !important;
}
.depth-sink,
.depth-gloss{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .24s ease, transform .34s cubic-bezier(.22,1,.36,1);
  z-index:8;
}
.depth-sink{
  /* Dark pocket at the cursor = local down-press. Opposite corner gets soft reflected light. */
  background:
    radial-gradient(circle at var(--depth-x) var(--depth-y),
      rgba(1,3,12,.52) 0%,
      rgba(5,8,24,.38) 12%,
      rgba(28,33,74,.15) 26%,
      transparent 48%),
    radial-gradient(circle at var(--depth-ix) var(--depth-iy),
      rgba(255,255,255,.22) 0%,
      rgba(118,147,255,.12) 18%,
      transparent 46%);
  mix-blend-mode:multiply;
}
.depth-gloss{
  background:
    radial-gradient(circle at var(--depth-ix) var(--depth-iy),
      rgba(255,255,255,.28) 0%,
      rgba(149,171,255,.16) 20%,
      transparent 48%),
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.05) 16%,
      rgba(255,255,255,.23) 22%,
      rgba(105,157,255,.14) 30%,
      transparent 44%);
  mix-blend-mode:screen;
  transform:translate3d(calc((50% - var(--depth-x)) * .02), calc((50% - var(--depth-y)) * .02), 28px);
}
.depth-press.depth-active .depth-sink,
.depth-press.depth-touch-focus .depth-sink{opacity:calc(var(--depth-glow) * .62);}
.depth-press.depth-active .depth-gloss,
.depth-press.depth-touch-focus .depth-gloss{opacity:calc(var(--depth-glow) * .80);}

/* Keep the local depth effect from drawing visible rectangular frames around cutout art. */
.hero-image-scene,
.wheel-phone-wrap{
  outline:none !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-image-scene.depth-press,
.wheel-phone-wrap.depth-press{
  overflow:visible !important;
}
.hero-image-scene .depth-sink,
.hero-image-scene .depth-gloss,
.wheel-phone-wrap .depth-sink,
.wheel-phone-wrap .depth-gloss{display:none !important;}

/* Ensure compact buttons and chips also feel like pressable glass surfaces. */
.nav-center a.depth-press,
.button.depth-press,
.pill.depth-press,
.floating-chip.depth-press,
.api-copy-head button.depth-press,
.api-copy-notes span.depth-press,
.modal-btn.depth-press{
  overflow:hidden;
  transform-origin:center center;
}

/* Remove leftover hover systems from earlier hotfixes when present; fix6 owns the transform. */
.hq-lift-target,
.lite-lift{
  animation:none !important;
}
.hq-lift-target.hq-hover,
.hq-lift-target.hq-scroll-hot,
.lite-lift:hover,
.lite-lift.lite-touch-focus{
  transform:inherit;
}

@media (hover:hover) and (pointer:fine){
  .depth-press{cursor:default;}
  a.depth-press,
  button.depth-press{cursor:pointer;}
}
@media (prefers-reduced-motion:reduce){
  .depth-press,
  .depth-press:not(.motion-card),
  .depth-press.motion-card.motion-seq.seq-visible{
    transform:none !important;
    transition:none !important;
    filter:none !important;
  }
  .depth-sink,.depth-gloss{display:none !important;}
}

/* v34 interaction fix 7: extend depth-press to every visible frame without reintroducing image rectangles. */
.badge.depth-press,
.brand.depth-press,
.brand-mark.depth-press,
.nav-center a.depth-press,
.button.depth-press,
.pill.depth-press,
.floating-chip.depth-press,
.api-copy-head button.depth-press,
.api-copy-notes span.depth-press,
.modal-btn.depth-press{
  overflow:hidden;
  transform-origin:center center;
}

.brand.depth-press,
.nav-center a.depth-press{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
}
.nav-center a.depth-press{
  padding:8px 10px;
  margin:-8px -10px;
}
.brand.depth-press{
  padding:6px 10px;
  margin:-6px -10px;
}
.brand-mark.depth-press{
  overflow:hidden;
}

/* The supplied hand-phone PNG and the feature phone are cutout/image stages. They should tilt and float,
   but must never draw a rectangular glass frame or local overlay over the transparent image canvas. */
.hero-image-scene.depth-press,
.hero-image-scene.depth-press.depth-active,
.hero-image-scene.depth-press.depth-touch-focus,
.hero-image-scene.depth-press.motion-card.motion-seq.seq-visible,
.wheel-phone-wrap.depth-press,
.wheel-phone-wrap.depth-press.depth-active,
.wheel-phone-wrap.depth-press.depth-touch-focus,
.wheel-phone-wrap.depth-press.motion-card.motion-seq.seq-visible{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.hero-image-scene.depth-press .depth-sink,
.hero-image-scene.depth-press .depth-gloss,
.wheel-phone-wrap.depth-press .depth-sink,
.wheel-phone-wrap.depth-press .depth-gloss{
  display:none !important;
  content:none !important;
  opacity:0 !important;
}
.hero-image-scene.depth-press.depth-active .hero-hand-phone-image,
.hero-image-scene.depth-press.depth-touch-focus .hero-hand-phone-image{
  filter:
    drop-shadow(0 44px 88px rgba(0,0,0,.70))
    drop-shadow(0 0 46px rgba(130,108,255,.28)) !important;
}
.wheel-phone-wrap.depth-press.depth-active .wheel-phone,
.wheel-phone-wrap.depth-press.depth-touch-focus .wheel-phone{
  filter:drop-shadow(0 54px 96px rgba(0,0,0,.70)) drop-shadow(0 0 42px rgba(130,108,255,.26)) !important;
}

/* Broader hit response for large glass panels: corner hover should still feel like a pressure point. */
.pain-card.depth-press,
.feature-detail.depth-press,
.wheel-item.depth-press,
.api-access-panel.depth-press,
.api-copy-card.depth-press,
.compare-card.depth-press,
.contact-panel.depth-press,
.contact-extra-line.depth-press,
.mini-proof > div.depth-press,
.mini-phone.depth-press{
  overflow:hidden;
  transform-origin:center center;
}

/* Keep previous lightweight lift classes neutral; fix7 owns the 3D pressure model. */
.depth-press.lite-lift:hover,
.depth-press.hq-lift-target.hq-hover,
.depth-press.hq-lift-target.hq-scroll-hot{
  transform:
    perspective(980px)
    translate3d(var(--depth-dx), var(--depth-dy), var(--depth-z))
    rotateX(var(--depth-rx))
    rotateY(var(--depth-ry))
    scale(var(--depth-scale)) !important;
}


/* v34 interaction fix 8:
   Add the local pressure interaction to every red-marked frame without reintroducing image rectangles.
   The cursor point becomes the low point, the opposite side rises, and the whole module floats slightly. */
.depth-press{
  --depth-lift-y:0px;
  transform-origin:center center !important;
  contain:paint;
}
.depth-press:not(.motion-card),
.depth-press.motion-card.motion-seq.seq-visible,
.depth-press.motion-card.seq-visible{
  transform:
    perspective(1040px)
    translate3d(var(--depth-dx), calc(var(--depth-dy) + var(--depth-lift-y)), var(--depth-z))
    rotateX(var(--depth-rx))
    rotateY(var(--depth-ry))
    scale(var(--depth-scale)) !important;
}
.depth-press.depth-active,
.depth-press.depth-touch-focus{
  border-color:rgba(190,184,255,.76) !important;
  filter:saturate(1.16) brightness(1.06);
}
.depth-press.depth-active .depth-sink,
.depth-press.depth-touch-focus .depth-sink{
  opacity:calc(var(--depth-glow) * .78) !important;
}
.depth-press.depth-active .depth-gloss,
.depth-press.depth-touch-focus .depth-gloss{
  opacity:calc(var(--depth-glow) * .92) !important;
}
.depth-sink{
  background:
    radial-gradient(circle at var(--depth-x) var(--depth-y), rgba(0,0,0,.64) 0%, rgba(4,7,20,.48) 14%, rgba(33,36,82,.17) 30%, transparent 52%),
    radial-gradient(circle at var(--depth-ix) var(--depth-iy), rgba(255,255,255,.28) 0%, rgba(130,154,255,.16) 18%, transparent 48%) !important;
}
.depth-gloss{
  background:
    radial-gradient(circle at var(--depth-ix) var(--depth-iy), rgba(255,255,255,.36) 0%, rgba(154,178,255,.20) 21%, transparent 50%),
    linear-gradient(116deg, transparent 0%, rgba(255,255,255,.055) 16%, rgba(255,255,255,.30) 22%, rgba(112,163,255,.18) 32%, transparent 48%) !important;
}
/* The red-marked hero/feature image stages are cutout art, not glass cards. Move the art stage only. */
.hero-image-scene.depth-press,
.wheel-phone-wrap.depth-press,
.hero-image-scene.depth-press.depth-active,
.hero-image-scene.depth-press.depth-touch-focus,
.wheel-phone-wrap.depth-press.depth-active,
.wheel-phone-wrap.depth-press.depth-touch-focus{
  contain:none !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.hero-image-scene.depth-press .depth-sink,
.hero-image-scene.depth-press .depth-gloss,
.wheel-phone-wrap.depth-press .depth-sink,
.wheel-phone-wrap.depth-press .depth-gloss{
  display:none !important;
}
.hero-image-scene.depth-press.depth-active .hero-hand-phone-image,
.hero-image-scene.depth-press.depth-touch-focus .hero-hand-phone-image{
  transform:translate3d(0,-4px,0) scale(1.006) !important;
  filter:drop-shadow(0 50px 95px rgba(0,0,0,.72)) drop-shadow(0 0 52px rgba(130,108,255,.30)) !important;
}
.wheel-phone-wrap.depth-press.depth-active .wheel-phone,
.wheel-phone-wrap.depth-press.depth-touch-focus .wheel-phone{
  transform:translate3d(0,-4px,0) scale(1.008) !important;
  filter:drop-shadow(0 56px 96px rgba(0,0,0,.72)) drop-shadow(0 0 46px rgba(130,108,255,.30)) !important;
}
/* Explicitly cover the red-marked groups. */
.mini-proof > div.depth-press,
.pain-card.depth-press,
.compare-card.depth-press,
.wheel-item.depth-press,
.feature-detail.depth-press,
.api-access-panel.depth-press,
.api-access-copy li.depth-press,
.api-copy-card.depth-press,
.contact-panel.depth-press,
.contact-slots a.depth-press,
.contact-extra-line.depth-press,
.nav-actions .pill.depth-press,
.hero-cta .button.depth-press{
  overflow:hidden !important;
  transform-origin:center center !important;
  will-change:transform,filter,box-shadow !important;
}
@media (hover:hover) and (pointer:fine){
  .depth-press:hover{transition-duration:.18s,.18s,.18s,.18s,.18s !important;}
}

/* v34 interaction fix 9:
   1) Keep the fixed top navigation shell centered.
   2) Expand the pressure-depth effect to the remaining visible small frames without letting parent layout boxes fight transforms.
*/
.nav,
.nav.glass-nav,
.glass-nav.nav{
  left:50% !important;
  transform:translateX(-50%) !important;
  transform-origin:center center !important;
  contain:none !important;
}
.nav.depth-press,
.nav.glass-nav.depth-press,
.glass-nav.nav.depth-press,
.nav.depth-active,
.nav.depth-touch-focus{
  transform:translateX(-50%) !important;
  filter:none !important;
}
.nav > .depth-sink,
.nav > .depth-gloss,
.glass-nav > .depth-sink,
.glass-nav > .depth-gloss{
  display:none !important;
  opacity:0 !important;
  content:none !important;
}

/* More compact controls and sub-cards participate in the same local pressure model. */
.badge.depth-press,
.brand.depth-press,
.brand-mark.depth-press,
.nav-center a.depth-press,
.nav-actions .pill.depth-press,
.hero-cta .button.depth-press,
.mini-proof > div.depth-press,
.floating-chip.depth-press,
.pain-card.depth-press,
.feature-detail.depth-press,
.wheel-item.depth-press,
.api-access-panel.depth-press,
.api-access-copy li.depth-press,
.api-copy-card.depth-press,
.api-copy-head button.depth-press,
.api-copy-notes span.depth-press,
.mini-phone.depth-press,
.compare-card.depth-press,
.contact-panel.depth-press,
.contact-slots a.depth-press,
.contact-extra-line.depth-press,
.copy-modal-card.depth-press,
.modal-btn.depth-press{
  will-change:transform,filter,box-shadow !important;
  transform-style:preserve-3d !important;
  backface-visibility:hidden !important;
  -webkit-font-smoothing:antialiased;
}

/* The hero and wheel phone areas are art/cutout stages. They get pressure movement,
   but no generated rectangle overlay and no accidental visible border. */
.hero-image-scene.depth-press,
.wheel-phone-wrap.depth-press{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  contain:none !important;
}
.hero-image-scene.depth-press::before,
.hero-image-scene.depth-press::after,
.wheel-phone-wrap.depth-press::before,
.wheel-phone-wrap.depth-press::after,
.hero-image-scene.depth-press > .depth-sink,
.hero-image-scene.depth-press > .depth-gloss,
.wheel-phone-wrap.depth-press > .depth-sink,
.wheel-phone-wrap.depth-press > .depth-gloss{
  display:none !important;
  opacity:0 !important;
  content:none !important;
}
.hero-image-scene.depth-press.depth-active,
.hero-image-scene.depth-press.depth-touch-focus,
.wheel-phone-wrap.depth-press.depth-active,
.wheel-phone-wrap.depth-press.depth-touch-focus{
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Keep the press-reset clean. Earlier helper classes should not leave a card stuck hot. */
.depth-press:not(.depth-active):not(.depth-touch-focus){
  filter:none;
}
.depth-press:not(.depth-active):not(.depth-touch-focus) > .depth-sink,
.depth-press:not(.depth-active):not(.depth-touch-focus) > .depth-gloss{
  opacity:0 !important;
}

/* v34 fix9 border-only patch:
   The large media containers are layout stages, not glass cards. If they receive the
   pressure overlay, a rectangular border/glass plate appears around the phone/gallery.
   Keep local pressure on the real cards/buttons/phone items, but never draw a frame
   on these staging containers. */
.wheel-stage.depth-press,
.screen-marquee.depth-press,
.wheel-stage.depth-active,
.screen-marquee.depth-active,
.wheel-stage.depth-touch-focus,
.screen-marquee.depth-touch-focus{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  overflow:visible !important;
}
.wheel-stage.depth-press::before,
.wheel-stage.depth-press::after,
.screen-marquee.depth-press::before,
.screen-marquee.depth-press::after,
.wheel-stage.depth-press > .depth-sink,
.wheel-stage.depth-press > .depth-gloss,
.screen-marquee.depth-press > .depth-sink,
.screen-marquee.depth-press > .depth-gloss{
  display:none !important;
  opacity:0 !important;
  content:none !important;
}

/* v34 interaction smooth fix 11: keep the same press-depth interaction, but make it lighter and smoother. */
.depth-press.depth-smooth{
  --depth-rx:0deg;
  --depth-ry:0deg;
  --depth-dx:0px;
  --depth-dy:0px;
  --depth-z:0px;
  --depth-lift-y:0px;
  --depth-scale:1;
  --depth-glow:0;
  --depth-x:50%;
  --depth-y:50%;
  --depth-ix:50%;
  --depth-iy:50%;
  position:relative;
  isolation:isolate;
  transform-origin:center center !important;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  will-change:transform;
  transition:
    border-color .20s ease,
    box-shadow .22s ease,
    filter .20s ease,
    background .20s ease !important;
}
.depth-press.depth-smooth:not(.motion-card),
.depth-press.depth-smooth.motion-card.motion-seq.seq-visible,
.depth-press.depth-smooth.motion-card.seq-visible,
.depth-press.depth-smooth.motion-card:not(.motion-seq){
  transform:
    perspective(1040px)
    translate3d(var(--depth-dx), calc(var(--depth-dy) + var(--depth-lift-y)), var(--depth-z))
    rotateX(var(--depth-rx))
    rotateY(var(--depth-ry))
    scale(var(--depth-scale)) !important;
}
.depth-press.depth-smooth.depth-active,
.depth-press.depth-smooth.depth-touch-focus{
  z-index:18;
  border-color:rgba(190,184,255,.68) !important;
  filter:saturate(1.08) brightness(1.035) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -12px 34px rgba(14,18,46,.20),
    0 22px 60px rgba(0,0,0,.34),
    0 0 38px rgba(114,126,255,calc(var(--depth-glow) * .22)) !important;
}
.depth-press.depth-smooth.depth-resetting{
  transition:
    transform .30s cubic-bezier(.22,1,.36,1),
    border-color .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    background .22s ease !important;
}
.depth-press.depth-smooth > .depth-sink,
.depth-press.depth-smooth > .depth-gloss{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease !important;
  z-index:7;
  will-change:opacity;
}
.depth-press.depth-smooth > .depth-sink{
  background:
    radial-gradient(circle at var(--depth-x) var(--depth-y), rgba(0,0,0,.54) 0%, rgba(4,7,20,.38) 14%, rgba(34,38,84,.13) 30%, transparent 52%),
    radial-gradient(circle at var(--depth-ix) var(--depth-iy), rgba(255,255,255,.24) 0%, rgba(130,154,255,.14) 19%, transparent 49%) !important;
  mix-blend-mode:multiply;
}
.depth-press.depth-smooth > .depth-gloss{
  background:
    radial-gradient(circle at var(--depth-ix) var(--depth-iy), rgba(255,255,255,.32) 0%, rgba(154,178,255,.17) 21%, transparent 50%),
    linear-gradient(116deg, transparent 0%, rgba(255,255,255,.04) 16%, rgba(255,255,255,.22) 23%, rgba(112,163,255,.13) 32%, transparent 49%) !important;
  mix-blend-mode:screen;
}
.depth-press.depth-smooth.depth-active > .depth-sink,
.depth-press.depth-smooth.depth-touch-focus > .depth-sink{opacity:calc(var(--depth-glow) * .58) !important;}
.depth-press.depth-smooth.depth-active > .depth-gloss,
.depth-press.depth-smooth.depth-touch-focus > .depth-gloss{opacity:calc(var(--depth-glow) * .70) !important;}

/* Large layout/media stages must not draw rectangular pressure frames. */
.nav.depth-press,
.nav.glass-nav.depth-press,
.wheel-stage.depth-press,
.screen-marquee.depth-press,
.screen-track.depth-press,
.wheel-list.depth-press{
  transform:none !important;
  filter:none !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.nav,
.nav.glass-nav{transform:translateX(-50%) !important;}
.nav.depth-press > .depth-sink,
.nav.depth-press > .depth-gloss,
.wheel-stage.depth-press > .depth-sink,
.wheel-stage.depth-press > .depth-gloss,
.screen-marquee.depth-press > .depth-sink,
.screen-marquee.depth-press > .depth-gloss{display:none !important;}

/* Cutout/image stages move smoothly but never expose a rectangular canvas. */
.hero-image-scene.depth-press.depth-smooth,
.wheel-phone-wrap.depth-press.depth-smooth{
  contain:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.hero-image-scene.depth-press.depth-smooth::before,
.hero-image-scene.depth-press.depth-smooth::after,
.hero-image-scene.depth-press.depth-smooth > .depth-sink,
.hero-image-scene.depth-press.depth-smooth > .depth-gloss,
.wheel-phone-wrap.depth-press.depth-smooth::before,
.wheel-phone-wrap.depth-press.depth-smooth::after,
.wheel-phone-wrap.depth-press.depth-smooth > .depth-sink,
.wheel-phone-wrap.depth-press.depth-smooth > .depth-gloss{
  display:none !important;
  opacity:0 !important;
  content:none !important;
}
.hero-image-scene.depth-press.depth-smooth.depth-active,
.hero-image-scene.depth-press.depth-smooth.depth-touch-focus,
.wheel-phone-wrap.depth-press.depth-smooth.depth-active,
.wheel-phone-wrap.depth-press.depth-smooth.depth-touch-focus{
  border-color:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.hero-image-scene.depth-press.depth-smooth.depth-active .hero-hand-phone-image,
.hero-image-scene.depth-press.depth-smooth.depth-touch-focus .hero-hand-phone-image{
  filter:drop-shadow(0 48px 88px rgba(0,0,0,.68)) drop-shadow(0 0 38px rgba(130,108,255,.22)) !important;
}
.wheel-phone-wrap.depth-press.depth-smooth.depth-active .wheel-phone,
.wheel-phone-wrap.depth-press.depth-smooth.depth-touch-focus .wheel-phone{
  filter:drop-shadow(0 50px 86px rgba(0,0,0,.68)) drop-shadow(0 0 34px rgba(130,108,255,.22)) !important;
}

/* The older hover helper classes remain in the file for rollback compatibility, but smooth fix owns the transform. */
.depth-press.depth-smooth.hq-lift-target,
.depth-press.depth-smooth.lite-lift,
.depth-press.depth-smooth.is-hovering,
.depth-press.depth-smooth.scroll-focus{
  animation:none !important;
}
@media (hover:hover) and (pointer:fine){
  .depth-press.depth-smooth:hover{cursor:default;}
  a.depth-press.depth-smooth:hover,
  button.depth-press.depth-smooth:hover{cursor:pointer;}
}
@media (hover:none), (pointer:coarse){
  .depth-press.depth-smooth.depth-touch-focus{
    transition:border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
  }
}

/* v34 smooth2: glass highlight + cinematic staged reveal.
   Keep all content; only refine hover feedback and section entrance rhythm. */
:root{
  --cinema-y:0px;
  --cinema-scale:1;
}

.depth-press.depth-smooth{
  --glass-hot-x:var(--depth-x,50%);
  --glass-hot-y:var(--depth-y,50%);
}

.depth-press.depth-smooth.depth-active,
.depth-press.depth-smooth.depth-touch-focus{
  background:
    radial-gradient(circle at var(--depth-x,50%) var(--depth-y,50%), rgba(255,255,255,.165), rgba(151,177,255,.115) 18%, transparent 42%),
    radial-gradient(circle at var(--depth-ix,50%) var(--depth-iy,50%), rgba(113,119,255,.20), transparent 46%),
    var(--glass-surface-strong, linear-gradient(145deg,rgba(255,255,255,.145),rgba(255,255,255,.055))) !important;
  border-color:rgba(207,202,255,.78) !important;
  filter:saturate(1.14) brightness(1.065) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -16px 38px rgba(12,16,42,.24),
    0 28px 74px rgba(0,0,0,.42),
    0 0 34px rgba(122,138,255,calc(var(--depth-glow) * .23)),
    0 0 76px rgba(162,142,255,calc(var(--depth-glow) * .18)) !important;
}

.depth-press.depth-smooth.depth-active > .depth-gloss,
.depth-press.depth-smooth.depth-touch-focus > .depth-gloss{
  opacity:calc(var(--depth-glow) * .92) !important;
}
.depth-press.depth-smooth.depth-active > .depth-sink,
.depth-press.depth-smooth.depth-touch-focus > .depth-sink{
  opacity:calc(var(--depth-glow) * .52) !important;
}

.depth-press.depth-smooth.depth-active::after,
.depth-press.depth-smooth.depth-touch-focus::after{
  opacity:.68 !important;
}

/* Entrance choreography: label/title -> body copy -> controls -> cards, with a faint sci-fi scan. */
.cinema-seq{
  opacity:0;
  filter:blur(14px) saturate(.82) brightness(.92);
  clip-path:inset(0 0 22% 0 round 18px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    filter .82s cubic-bezier(.16,1,.3,1),
    clip-path .82s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:var(--cinema-delay,0ms) !important;
  will-change:opacity,filter,clip-path,transform;
}
.cinema-seq.cinema-in{
  opacity:1;
  filter:blur(0) saturate(1) brightness(1);
  clip-path:inset(-3% -3% -3% -3% round 18px);
}
.cinema-seq:not(.depth-press):not(.motion-card){
  --cinema-y:34px;
  --cinema-scale:.972;
  transform:translate3d(0,var(--cinema-y),0) scale(var(--cinema-scale));
}
.cinema-seq.cinema-in:not(.depth-press):not(.motion-card){
  --cinema-y:0px;
  --cinema-scale:1;
  transform:translate3d(0,0,0) scale(1);
}

.depth-press.depth-smooth.cinema-seq{
  --cinema-y:34px;
  --cinema-scale:.972;
}
.depth-press.depth-smooth.cinema-seq.cinema-in{
  --cinema-y:0px;
  --cinema-scale:1;
}
.depth-press.depth-smooth.cinema-seq:not(.motion-card),
.depth-press.depth-smooth.cinema-seq.motion-card.motion-seq.seq-visible,
.depth-press.depth-smooth.cinema-seq.motion-card.seq-visible,
.depth-press.depth-smooth.cinema-seq.motion-card:not(.motion-seq){
  transform:
    perspective(1040px)
    translate3d(var(--depth-dx), calc(var(--depth-dy) + var(--depth-lift-y) + var(--cinema-y,0px)), var(--depth-z))
    rotateX(var(--depth-rx))
    rotateY(var(--depth-ry))
    scale(calc(var(--depth-scale) * var(--cinema-scale,1))) !important;
}

@keyframes cinemaSweep{
  0%{transform:translateX(-125%) rotate(4deg);opacity:0}
  18%{opacity:.68}
  100%{transform:translateX(125%) rotate(4deg);opacity:0}
}

/* Avoid old reveal delays fighting the local choreography. */
.reveal.cinema-section,
.cinema-section.reveal{
  transition-delay:0ms !important;
}

@media (prefers-reduced-motion:reduce){
  .cinema-seq,
  .cinema-seq.cinema-in{
    opacity:1 !important;
    filter:none !important;
    clip-path:none !important;
    transform:none !important;
    transition:none !important;
  }
  .cinema-seq.cinema-in.cinema-scan::after{display:none !important;}
}
@media (max-width:720px){
  .cinema-seq{filter:blur(8px) saturate(.9);}
}

/* smooth2 safety: use a real child sweep layer instead of overriding existing card ::after glass layers. */
.cinema-sweep{
  position:absolute;
  inset:-38%;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.24) 43%, rgba(126,166,255,.13) 48%, transparent 58% 100%);
  transform:translateX(-125%) rotate(4deg);
  animation:cinemaSweep 1.05s cubic-bezier(.16,1,.3,1) both;
  mix-blend-mode:screen;
  opacity:.64;
  z-index:12;
}
.hero-visual .cinema-sweep,
.hero-image-scene .cinema-sweep,
.wheel-phone-wrap .cinema-sweep,
.mini-phone .cinema-sweep,
.screen-marquee .cinema-sweep,
.screen-track .cinema-sweep{display:none !important;}
.cinema-scan{position:relative;overflow:hidden;}


/* v34 smooth-plus2: no hover highlight on the hero hand PNG, and smoother vertical scrolling.
   Keep the press-depth interaction on real glass cards, but the hand art remains clean cutout art. */
.hero-image-scene.depth-press.depth-smooth,
.hero-image-scene.depth-press.depth-smooth.depth-active,
.hero-image-scene.depth-press.depth-smooth.depth-touch-focus,
.hero-image-scene.depth-press.depth-smooth.cinema-seq,
.hero-image-scene.depth-press.depth-smooth.cinema-in{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
  contain:none !important;
}
.hero-image-scene.depth-press.depth-smooth::before,
.hero-image-scene.depth-press.depth-smooth::after,
.hero-image-scene.depth-press.depth-smooth > .depth-sink,
.hero-image-scene.depth-press.depth-smooth > .depth-gloss,
.hero-image-scene.depth-press.depth-smooth .cinema-sweep{
  display:none !important;
  opacity:0 !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}
.hero-image-scene.depth-press.depth-smooth.depth-active .hero-hand-phone-image,
.hero-image-scene.depth-press.depth-smooth.depth-touch-focus .hero-hand-phone-image,
.hero-image-scene.depth-press.depth-smooth:hover .hero-hand-phone-image{
  filter:drop-shadow(0 42px 78px rgba(0,0,0,.64)) !important;
}

/* Reduce costly global compositing while scrolling; active elements still animate smoothly. */
.depth-press.depth-smooth,
.cinema-seq{
  will-change:auto !important;
}
.depth-press.depth-smooth.depth-active,
.depth-press.depth-smooth.depth-touch-focus,
.cinema-seq:not(.cinema-in){
  will-change:transform,opacity !important;
}
html.is-scrolling .depth-press.depth-smooth.depth-active,
html.is-scrolling .depth-press.depth-smooth.depth-touch-focus{
  filter:saturate(1.06) brightness(1.025) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    0 18px 48px rgba(0,0,0,.30),
    0 0 28px rgba(114,126,255,calc(var(--depth-glow) * .16)) !important;
}
html.is-scrolling .depth-press.depth-smooth > .depth-sink,
html.is-scrolling .depth-press.depth-smooth > .depth-gloss{
  transition-duration:.08s !important;
}
html.is-scrolling .cinema-seq{
  filter:none !important;
  clip-path:none !important;
  transition-duration:.56s !important;
}

/* Lighter cinematic reveal: keep the title -> copy -> cards order, avoid heavy blur/clip jank on scroll. */
.cinema-seq{
  filter:blur(6px) saturate(.94) brightness(.96) !important;
  clip-path:none !important;
}
.cinema-seq.cinema-in{
  filter:blur(0) saturate(1) brightness(1) !important;
  clip-path:none !important;
}

/* The feature phone stage is still art: no generated rectangular glass plate. */
.wheel-phone-wrap.depth-press.depth-smooth,
.wheel-phone-wrap.depth-press.depth-smooth.depth-active,
.wheel-phone-wrap.depth-press.depth-smooth.depth-touch-focus{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.wheel-phone-wrap.depth-press.depth-smooth::before,
.wheel-phone-wrap.depth-press.depth-smooth::after,
.wheel-phone-wrap.depth-press.depth-smooth > .depth-sink,
.wheel-phone-wrap.depth-press.depth-smooth > .depth-gloss{
  display:none !important;
  opacity:0 !important;
  content:none !important;
}


/* v34 copy-lock: 全局禁止手动复制；联系区可复制；API 配置只能通过“复制配置”按钮复制。 */
html, body, body *{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

/* 联系方式、交流群、下载入口，以及联系方式板块正文允许用户复制，避免客源流失。 */
#contact,
#contact *,
.contact,
.contact *,
.contact-slots,
.contact-slots *,
.contact-panel,
.contact-panel *,
input,
textarea{
  -webkit-user-select:text !important;
  user-select:text !important;
  -webkit-touch-callout:default !important;
}

/* API 配置红框区域保持可读，但禁止手动选中/复制；只允许点击按钮触发复制流程。 */
#api-spec,
#api-spec *,
.api-access-panel,
.api-access-panel *,
.api-copy-card,
.api-copy-card *,
#apiConfigText,
.api-copy-card pre,
.api-copy-card code{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

.api-copy-card pre,
.api-copy-card code,
#apiConfigText{
  pointer-events:none !important;
}
.copy-config-btn,
[data-copy-config],
[data-copy-confirm],
[data-copy-cancel],
[data-copy-agree],
[data-disclaimer-open],
[data-disclaimer-close]{
  pointer-events:auto !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}

.allow-copy,
.allow-copy *{
  -webkit-user-select:text !important;
  user-select:text !important;
  -webkit-touch-callout:default !important;
}

/* v34 sequence-only patch: ordered in/out animation without adding any mask/sweep layer. */
.cinema-sweep{display:none !important;content:none !important;background:none !important;box-shadow:none !important;}
.hq-flow{
  opacity:0 !important;
  translate:0 26px;
  filter:blur(10px) saturate(.92) brightness(.95);
  transition:
    opacity .58s cubic-bezier(.19,1,.22,1),
    translate .70s cubic-bezier(.19,1,.22,1),
    filter .58s ease !important;
  transition-delay:var(--hq-in-delay,0ms) !important;
  will-change:opacity,translate,filter;
}
.hq-flow.hq-flow-in{
  opacity:1 !important;
  translate:0 0;
  filter:blur(0) saturate(1) brightness(1);
  transition-delay:var(--hq-in-delay,0ms) !important;
}
.hq-flow.hq-flow-out:not(.hq-flow-in){
  opacity:0 !important;
  translate:0 var(--hq-out-y,-22px);
  filter:blur(8px) saturate(.94) brightness(.92);
  transition-delay:var(--hq-out-delay,0ms) !important;
}
.hq-flow.hq-flow-title{translate:0 20px;}
.hq-flow.hq-flow-copy{translate:0 18px;}
.hq-flow.hq-flow-card{translate:0 34px;}
.hq-flow.hq-flow-visual{translate:0 30px;}
.hq-flow.hq-flow-in.hq-flow-title,
.hq-flow.hq-flow-in.hq-flow-copy,
.hq-flow.hq-flow-in.hq-flow-card,
.hq-flow.hq-flow-in.hq-flow-visual{translate:0 0;}
@media (prefers-reduced-motion:reduce){
  .hq-flow,.hq-flow.hq-flow-in,.hq-flow.hq-flow-out:not(.hq-flow-in){
    opacity:1 !important;
    translate:0 0 !important;
    filter:none !important;
    transition:none !important;
  }
}

/* v34 final sequence refinement: slower queued entrance and reverse queued exit.
   This block only changes timing/opacity/translate. No masks, sweeps or rectangular overlay layers. */
.hq-flow{
  opacity:0 !important;
  translate:0 34px;
  filter:blur(13px) saturate(.90) brightness(.94);
  transition:
    opacity .86s cubic-bezier(.16,1,.3,1),
    translate 1.04s cubic-bezier(.16,1,.3,1),
    filter .92s ease !important;
  transition-delay:var(--hq-in-delay,0ms) !important;
  will-change:opacity,translate,filter;
  backface-visibility:hidden;
}
.hq-flow.hq-flow-in{
  opacity:1 !important;
  translate:0 0;
  filter:blur(0) saturate(1) brightness(1);
  transition-delay:var(--hq-in-delay,0ms) !important;
}
.hq-flow.hq-flow-out:not(.hq-flow-in){
  opacity:0 !important;
  translate:0 var(--hq-out-y,-28px);
  filter:blur(10px) saturate(.92) brightness(.90);
  transition:
    opacity .70s cubic-bezier(.32,0,.67,0),
    translate .82s cubic-bezier(.32,0,.67,0),
    filter .68s ease !important;
  transition-delay:var(--hq-out-delay,0ms) !important;
}
.hq-flow.hq-flow-title{translate:0 24px;}
.hq-flow.hq-flow-copy{translate:0 22px;}
.hq-flow.hq-flow-card{translate:0 42px;}
.hq-flow.hq-flow-panel{translate:0 38px;}
.hq-flow.hq-flow-visual{translate:0 36px;}
.hq-flow.hq-flow-in.hq-flow-title,
.hq-flow.hq-flow-in.hq-flow-copy,
.hq-flow.hq-flow-in.hq-flow-card,
.hq-flow.hq-flow-in.hq-flow-panel,
.hq-flow.hq-flow-in.hq-flow-visual{translate:0 0;}

.hq-flow.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:0;
  transform:translate3d(0,14px,0);
  filter:blur(8px);
  transition:
    opacity .70s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .70s ease;
  will-change:opacity,transform,filter;
}
.hq-flow.hq-flow-in.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-in.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-in.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
  transition-delay:calc(var(--hq-content-delay,0ms) + var(--hq-child-delay,0ms));
}
.hq-flow.hq-flow-out:not(.hq-flow-in).hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-out:not(.hq-flow-in).hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-out:not(.hq-flow-in).hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:0;
  transform:translate3d(0,-8px,0);
  filter:blur(6px);
  transition-delay:var(--hq-out-delay,0ms);
}
.hq-flow.hq-flow-card > :nth-child(1),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(1),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(1){--hq-child-delay:180ms;}
.hq-flow.hq-flow-card > :nth-child(2),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(2),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(2){--hq-child-delay:280ms;}
.hq-flow.hq-flow-card > :nth-child(3),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(3),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(3){--hq-child-delay:380ms;}
.hq-flow.hq-flow-card > :nth-child(4),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(4),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(4){--hq-child-delay:480ms;}
.hq-flow.hq-flow-card > :nth-child(n+5),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(n+5),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(n+5){--hq-child-delay:560ms;}

@media (prefers-reduced-motion:reduce){
  .hq-flow,
  .hq-flow.hq-flow-in,
  .hq-flow.hq-flow-out:not(.hq-flow-in),
  .hq-flow.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
  .hq-flow.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
  .hq-flow.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
    opacity:1 !important;
    translate:0 0 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* v34 queue-cool patch: make each red-frame module appear as one complete unit.
   The old timing let the glass border appear much earlier than the text.
   This patch keeps all content, adds a slower sci-fi entrance, and avoids masks/sweeps/rectangular overlays. */
.hq-flow{
  translate:0 48px !important;
  filter:blur(16px) saturate(.86) brightness(.90) !important;
  opacity:0 !important;
  transition:
    opacity 1.06s cubic-bezier(.16,1,.3,1),
    translate 1.20s cubic-bezier(.16,1,.3,1),
    filter 1.08s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:var(--hq-in-delay,0ms) !important;
}
.hq-flow.hq-flow-title{translate:0 34px !important;filter:blur(14px) saturate(.88) brightness(.94) !important;}
.hq-flow.hq-flow-copy{translate:0 28px !important;filter:blur(10px) saturate(.92) brightness(.94) !important;}
.hq-flow.hq-flow-card{translate:0 54px !important;filter:blur(18px) saturate(.86) brightness(.90) !important;}
.hq-flow.hq-flow-panel{translate:0 50px !important;filter:blur(17px) saturate(.88) brightness(.90) !important;}
.hq-flow.hq-flow-visual{translate:0 44px !important;filter:blur(12px) saturate(.92) brightness(.95) !important;}
.hq-flow.hq-flow-in,
.hq-flow.hq-flow-in.hq-flow-title,
.hq-flow.hq-flow-in.hq-flow-copy,
.hq-flow.hq-flow-in.hq-flow-card,
.hq-flow.hq-flow-in.hq-flow-panel,
.hq-flow.hq-flow-in.hq-flow-visual{
  opacity:1 !important;
  translate:0 0 !important;
  filter:blur(0) saturate(1) brightness(1) !important;
  transition-delay:var(--hq-in-delay,0ms) !important;
}
.hq-flow.hq-flow-out:not(.hq-flow-in){
  opacity:0 !important;
  translate:0 var(--hq-out-y,-34px) !important;
  filter:blur(12px) saturate(.90) brightness(.86) !important;
  transition:
    opacity .78s cubic-bezier(.32,0,.67,0),
    translate .92s cubic-bezier(.32,0,.67,0),
    filter .78s ease !important;
  transition-delay:var(--hq-out-delay,0ms) !important;
}

/* Inner content no longer lags far behind the frame. It comes in almost together,
   then resolves line by line, so the user does not see empty glass borders. */
.hq-flow.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:0 !important;
  transform:translate3d(0,18px,0) scale(.992) !important;
  filter:blur(9px) saturate(.92) brightness(.92) !important;
  transition:
    opacity .92s cubic-bezier(.16,1,.3,1),
    transform 1.02s cubic-bezier(.16,1,.3,1),
    filter .92s ease !important;
}
.hq-flow.hq-flow-in.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-in.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-in.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:blur(0) saturate(1) brightness(1) !important;
  transition-delay:calc(var(--hq-in-delay,0ms) + 54ms + var(--hq-child-delay,0ms)) !important;
}
.hq-flow.hq-flow-out:not(.hq-flow-in).hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-out:not(.hq-flow-in).hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-out:not(.hq-flow-in).hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:0 !important;
  transform:translate3d(0,-12px,0) scale(.995) !important;
  filter:blur(7px) saturate(.92) brightness(.90) !important;
  transition-delay:var(--hq-out-delay,0ms) !important;
}
.hq-flow.hq-flow-card > :nth-child(1),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(1),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(1){--hq-child-delay:0ms !important;}
.hq-flow.hq-flow-card > :nth-child(2),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(2),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(2){--hq-child-delay:74ms !important;}
.hq-flow.hq-flow-card > :nth-child(3),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(3),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(3){--hq-child-delay:148ms !important;}
.hq-flow.hq-flow-card > :nth-child(4),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(4),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(4){--hq-child-delay:222ms !important;}
.hq-flow.hq-flow-card > :nth-child(n+5),
.hq-flow.hq-flow-panel .api-access-copy > :nth-child(n+5),
.hq-flow.hq-flow-panel .api-copy-card > :nth-child(n+5){--hq-child-delay:292ms !important;}

/* A cleaner sci-fi feel using light/contrast only. No pseudo mask, no sweep layer, no clipping. */
.hq-flow.hq-flow-card.hq-flow-in,
.hq-flow.hq-flow-panel.hq-flow-in{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    0 22px 62px rgba(0,0,0,.30),
    0 0 34px rgba(121,133,255,.08) !important;
}
.hq-flow.hq-flow-visual.hq-flow-in{
  filter:blur(0) saturate(1.04) brightness(1.02) !important;
}
@media (prefers-reduced-motion:reduce){
  .hq-flow,
  .hq-flow.hq-flow-in,
  .hq-flow.hq-flow-out:not(.hq-flow-in),
  .hq-flow.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
  .hq-flow.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
  .hq-flow.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
    opacity:1 !important;
    translate:0 0 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* v35 contact layout + smoother stage patch.
   Only expands contact module, adds copy buttons/QR placeholders, and reduces heavy animation cost. */
.contact-panel{
  width:100% !important;
  max-width:var(--max) !important;
  grid-template-columns:minmax(0,1fr) minmax(560px,.92fr) !important;
  gap:28px 56px !important;
  padding:clamp(30px,3.8vw,54px) !important;
}
.contact-panel > div:first-child{
  max-width:660px !important;
  justify-self:start !important;
}
.contact-panel h2{
  max-width:640px !important;
}
.contact-action-area{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 158px;
  gap:16px;
  align-items:stretch;
  justify-self:stretch;
  align-self:center;
}
.contact-slots{
  width:100% !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  display:grid !important;
  gap:12px !important;
}
.contact-link-row{
  min-height:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 74px;
  align-items:center;
  gap:12px;
  padding:7px 9px 7px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.032));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 18px 54px rgba(0,0,0,.18);
  cursor:pointer;
}
.contact-link-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}
.contact-link-main span{
  color:#fff;
  font-weight:950;
  font-size:15px;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contact-link-main small{
  color:rgba(226,232,255,.56);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contact-copy-btn{
  height:40px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(157,132,255,.42),rgba(91,167,255,.20));
  color:#fff;
  font-size:13px;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 10px 30px rgba(71,96,255,.18);
}
.contact-copy-btn:hover{
  border-color:rgba(203,196,255,.52);
  filter:brightness(1.08);
}
.contact-copy-btn.is-copied{
  background:linear-gradient(135deg,rgba(56,229,149,.45),rgba(91,167,255,.18));
}
.contact-qr-column{
  display:grid;
  gap:12px;
  align-content:stretch;
}
.contact-qr-card{
  min-height:112px;
  border-radius:22px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:14px;
  border:1px dashed rgba(255,255,255,.24);
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px);
}
.contact-qr-card span{
  display:block;
  color:#fff;
  font-weight:950;
  font-size:15px;
}
.contact-qr-card small{
  display:block;
  margin-top:4px;
  color:rgba(226,232,255,.58);
  font-size:12px;
  line-height:1.4;
}
.contact-extra-lines{
  grid-column:1 / -1;
  margin-top:8px !important;
}
.contact-link-row,
.contact-copy-btn,
.contact-qr-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
}

/* Smoother sequence: less expensive blur, slower but cleaner frame/content resolve. */
.hq-flow{
  filter:blur(7px) saturate(.92) brightness(.94) !important;
  transition:
    opacity .92s cubic-bezier(.16,1,.3,1),
    translate 1.04s cubic-bezier(.16,1,.3,1),
    filter .82s cubic-bezier(.16,1,.3,1) !important;
}
.hq-flow.hq-flow-title{filter:blur(6px) saturate(.94) brightness(.96) !important;}
.hq-flow.hq-flow-copy{filter:blur(5px) saturate(.96) brightness(.96) !important;}
.hq-flow.hq-flow-card{filter:blur(8px) saturate(.92) brightness(.94) !important;}
.hq-flow.hq-flow-panel{filter:blur(8px) saturate(.92) brightness(.94) !important;}
.hq-flow.hq-flow-visual{filter:blur(6px) saturate(.96) brightness(.98) !important;}
.hq-flow.hq-flow-in,
.hq-flow.hq-flow-in.hq-flow-title,
.hq-flow.hq-flow-in.hq-flow-copy,
.hq-flow.hq-flow-in.hq-flow-card,
.hq-flow.hq-flow-in.hq-flow-panel,
.hq-flow.hq-flow-in.hq-flow-visual{
  filter:blur(0) saturate(1) brightness(1) !important;
}
.hq-flow.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  filter:blur(5px) saturate(.96) brightness(.96) !important;
  transition:
    opacity .88s cubic-bezier(.16,1,.3,1),
    transform .96s cubic-bezier(.16,1,.3,1),
    filter .78s ease !important;
}
.hq-flow.hq-flow-in.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-in.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-in.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  filter:blur(0) saturate(1) brightness(1) !important;
}

@media (max-width:1180px){
  .contact-panel{
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  .contact-action-area{
    grid-template-columns:minmax(0,1fr) 150px;
  }
}
@media (max-width:720px){
  .contact-action-area{
    grid-template-columns:1fr;
  }
  .contact-qr-column{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .contact-link-row{
    grid-template-columns:minmax(0,1fr) 68px;
    padding-left:16px;
  }
}


/* v35 top navigation glass refinement: transparent Apple-style glass shell + larger glass hover targets. */
.nav.glass-nav,
.glass-nav.nav{
  background:
    linear-gradient(135deg, rgba(255,255,255,.135), rgba(255,255,255,.032) 42%, rgba(111,96,255,.095) 100%) !important;
  border:1px solid rgba(226,232,255,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.075),
    0 1px 0 rgba(255,255,255,.10),
    0 22px 70px rgba(0,0,0,.34),
    0 0 42px rgba(107,106,255,.13) !important;
  backdrop-filter:blur(26px) saturate(186%) contrast(1.08) !important;
  -webkit-backdrop-filter:blur(26px) saturate(186%) contrast(1.08) !important;
  overflow:hidden !important;
  isolation:isolate;
}
.nav.glass-nav::before,
.glass-nav.nav::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 14% 18%, rgba(150,194,255,.34), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(154,116,255,.24), transparent 32%),
    linear-gradient(90deg, rgba(255,255,255,.075), transparent 42%, rgba(255,255,255,.05));
  opacity:.82;
}
.nav.glass-nav::after,
.glass-nav.nav::after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  top:0;
  height:1px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  opacity:.55;
}
.nav.glass-nav .brand,
.nav.glass-nav .nav-center,
.nav.glass-nav .nav-actions{
  position:relative;
  z-index:1;
}
.nav-center{
  gap:18px !important;
}
.nav-center a,
.nav-center a.depth-press{
  min-height:44px !important;
  padding:0 18px !important;
  margin:0 -6px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  background:rgba(255,255,255,0) !important;
  box-shadow:none !important;
  backdrop-filter:blur(0) saturate(100%) !important;
  -webkit-backdrop-filter:blur(0) saturate(100%) !important;
  transition:
    background .24s cubic-bezier(.16,1,.3,1),
    border-color .24s cubic-bezier(.16,1,.3,1),
    box-shadow .24s cubic-bezier(.16,1,.3,1),
    color .18s ease,
    filter .18s ease !important;
}
.nav-center a:hover,
.nav-center a:focus-visible,
.nav-center a.depth-active,
.nav-center a.depth-touch-focus{
  color:#fff !important;
  background:
    radial-gradient(circle at var(--depth-ix,50%) var(--depth-iy,50%), rgba(255,255,255,.22), transparent 54%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.052)) !important;
  border-color:rgba(222,228,255,.24) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.24),
    0 10px 34px rgba(87,100,255,.18),
    0 0 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter:blur(14px) saturate(175%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(175%) !important;
  filter:brightness(1.07) !important;
}
.nav-actions .pill,
.nav-actions .pill.depth-press{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    0 12px 34px rgba(0,0,0,.18) !important;
}

/* v36: make the fixed top status bar closer to the transparent glass cards.
   Only overrides opacity/lighting of the navbar; no layout, content, or section animation changes. */
.nav.glass-nav,
.glass-nav.nav{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.070) 0%,
      rgba(255,255,255,.020) 40%,
      rgba(123,116,255,.038) 100%) !important;
  border-color:rgba(232,238,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.052),
    0 1px 0 rgba(255,255,255,.055),
    0 18px 58px rgba(0,0,0,.22),
    0 0 36px rgba(112,120,255,.075) !important;
  backdrop-filter:blur(20px) saturate(178%) contrast(1.04) !important;
  -webkit-backdrop-filter:blur(20px) saturate(178%) contrast(1.04) !important;
}
.nav.glass-nav::before,
.glass-nav.nav::before{
  background:
    radial-gradient(circle at 14% 18%, rgba(175,210,255,.18), transparent 30%),
    radial-gradient(circle at 84% 0%, rgba(158,126,255,.12), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.036), transparent 42%, rgba(255,255,255,.026)) !important;
  opacity:.42 !important;
}
.nav.glass-nav::after,
.glass-nav.nav::after{
  opacity:.42 !important;
}
.nav-actions .pill.pill-ghost,
.nav-actions .pill.pill-ghost.depth-press{
  background:rgba(255,255,255,.030) !important;
  border-color:rgba(238,242,255,.18) !important;
  backdrop-filter:blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(170%) !important;
}

/* v36 unit-sequence fix: each glass module enters as one complete unit.
   No mask, no clip-path, no pseudo overlay: only opacity / translate / scale / blur.
   This prevents empty borders from appearing before their text. */
.hq-flow.hq-flow-unit{
  opacity:0 !important;
  translate:0 46px !important;
  scale:.982 !important;
  filter:blur(10px) saturate(.90) brightness(.92) !important;
  transition:
    opacity 1.08s cubic-bezier(.16,1,.3,1),
    translate 1.18s cubic-bezier(.16,1,.3,1),
    scale 1.18s cubic-bezier(.16,1,.3,1),
    filter .98s cubic-bezier(.16,1,.3,1),
    box-shadow .48s ease,
    border-color .36s ease !important;
  transition-delay:var(--hq-in-delay,0ms) !important;
  will-change:opacity,translate,scale,filter;
}
.hq-flow.hq-flow-unit.hq-flow-title{translate:0 30px !important;scale:.992 !important;filter:blur(8px) saturate(.94) brightness(.95) !important;}
.hq-flow.hq-flow-unit.hq-flow-copy{translate:0 24px !important;scale:.994 !important;filter:blur(7px) saturate(.96) brightness(.96) !important;}
.hq-flow.hq-flow-unit.hq-flow-visual{translate:0 40px !important;scale:.986 !important;filter:blur(8px) saturate(.96) brightness(.98) !important;}
.hq-flow.hq-flow-unit.hq-flow-in,
.hq-flow.hq-flow-unit.hq-flow-in.hq-flow-title,
.hq-flow.hq-flow-unit.hq-flow-in.hq-flow-copy,
.hq-flow.hq-flow-unit.hq-flow-in.hq-flow-card,
.hq-flow.hq-flow-unit.hq-flow-in.hq-flow-panel,
.hq-flow.hq-flow-unit.hq-flow-in.hq-flow-visual{
  opacity:1 !important;
  translate:0 0 !important;
  scale:1 !important;
  filter:blur(0) saturate(1) brightness(1) !important;
  transition-delay:var(--hq-in-delay,0ms) !important;
}
.hq-flow.hq-flow-unit.hq-flow-out:not(.hq-flow-in){
  opacity:0 !important;
  translate:0 var(--hq-out-y,-30px) !important;
  scale:.988 !important;
  filter:blur(8px) saturate(.92) brightness(.90) !important;
  transition:
    opacity .78s cubic-bezier(.32,0,.67,0),
    translate .88s cubic-bezier(.32,0,.67,0),
    scale .88s cubic-bezier(.32,0,.67,0),
    filter .72s ease !important;
  transition-delay:var(--hq-out-delay,0ms) !important;
}

/* Keep frame and text visually bound together. The module itself carries the reveal;
   children no longer wait behind an already visible empty glass border. */
.hq-flow.hq-flow-unit.hq-flow-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-unit.hq-flow-panel .api-access-copy > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep),
.hq-flow.hq-flow-unit.hq-flow-panel .api-copy-card > :not(.depth-sink):not(.depth-gloss):not(.cinema-sweep){
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

.hq-flow.hq-flow-unit.hq-flow-card.hq-flow-in,
.hq-flow.hq-flow-unit.hq-flow-panel.hq-flow-in{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    0 24px 70px rgba(0,0,0,.30),
    0 0 42px rgba(126,136,255,.10) !important;
}
.hq-flow.hq-flow-unit.hq-flow-card.hq-flow-in:hover,
.hq-flow.hq-flow-unit.hq-flow-panel.hq-flow-in:hover{
  border-color:rgba(190,190,255,.46) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.26),
    0 30px 86px rgba(0,0,0,.34),
    0 0 58px rgba(139,160,255,.18) !important;
}

@media (prefers-reduced-motion:reduce){
  .hq-flow.hq-flow-unit,
  .hq-flow.hq-flow-unit.hq-flow-in,
  .hq-flow.hq-flow-unit.hq-flow-out:not(.hq-flow-in){
    opacity:1 !important;
    translate:0 0 !important;
    scale:1 !important;
    filter:none !important;
    transition:none !important;
  }
}

/* v37: responsive layout pass for phone-first visitors and narrow desktop windows.
   Scope: layout/scale only. Keep existing content, copy lock, glass style, staged animations and press-3D interactions intact. */
:root{
  --mobile-edge: clamp(14px, 4vw, 22px);
}

/* Narrow desktop / tablet-landscape: keep hero as a product split layout instead of dropping
   the hand-phone artwork underneath the proof cards. This fixes the awkward blank vertical gap. */
@media (min-width: 861px) and (max-width: 1180px){
  .section-pad{
    width:min(calc(100% - 42px), var(--max)) !important;
  }
  .nav{
    width:calc(100vw - 36px) !important;
    height:66px !important;
    top:18px !important;
    grid-template-columns:minmax(170px, 1fr) auto !important;
    padding-inline:14px !important;
  }
  .nav-actions{gap:10px !important;}
  .nav-actions .pill{height:42px !important;padding-inline:18px !important;font-size:13px !important;}

  .hero{
    min-height:92vh !important;
    grid-template-columns:minmax(0, .86fr) minmax(360px, .92fr) !important;
    gap:clamp(18px, 3vw, 42px) !important;
    align-items:center !important;
    padding-top:104px !important;
    padding-bottom:40px !important;
  }
  .hero-copy{
    max-width:560px !important;
    margin-top:0 !important;
  }
  .hero h1,
  .hero-title{
    font-size:clamp(52px, 7vw, 74px) !important;
    line-height:.94 !important;
    letter-spacing:-.075em !important;
    max-width:540px !important;
  }
  .hero .lead{
    max-width:540px !important;
    font-size:clamp(15px, 1.7vw, 17px) !important;
    line-height:1.78 !important;
    margin-top:22px !important;
  }
  .hero-cta{margin-top:28px !important;gap:12px !important;}
  .hero-cta .button{height:52px !important;padding-inline:22px !important;font-size:14px !important;}
  .mini-proof{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    margin-top:26px !important;
  }
  .mini-proof div{min-height:68px !important;padding:14px !important;border-radius:15px !important;}
  .mini-proof strong{font-size:14px !important;}
  .mini-proof small{font-size:12px !important;}

  .hero-visual{
    min-height:560px !important;
    margin-top:0 !important;
    overflow:visible !important;
  }
  .hero-image-scene{
    width:min(520px, 48vw) !important;
    height:min(620px, 72vh) !important;
  }
  .hero-hand-phone-image{
    object-fit:contain !important;
  }
  .hero-visual .chip-a{right:0 !important;top:27% !important;}
  .hero-visual .chip-b{left:2% !important;bottom:29% !important;}
  .hero-visual .chip-c{right:2% !important;bottom:17% !important;}

  .pain-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
  .feature-wheel-v8{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .feature-wheel-v8 .wheel-stage{
    grid-template-columns:minmax(300px, 380px) minmax(300px, 1fr) !important;
    gap:28px !important;
  }
  .api-access-panel{grid-template-columns:1fr !important;}
  .gallery-heading,.api-access-heading,.split-heading,.compare-copy{max-width:760px !important;}
}

/* Tablet portrait / large phone landscape. */
@media (min-width: 641px) and (max-width: 860px){
  .section-pad{width:min(calc(100% - 36px), var(--max)) !important;}
  .nav{
    width:calc(100vw - 28px) !important;
    height:64px !important;
    top:14px !important;
    grid-template-columns:minmax(160px, 1fr) auto !important;
    padding-inline:12px !important;
  }
  .nav-center{display:none !important;}
  .pill-ghost{display:none !important;}
  .pill-light{height:42px !important;padding-inline:16px !important;font-size:13px !important;}

  .hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    min-height:auto !important;
    padding-top:106px !important;
    padding-bottom:56px !important;
  }
  .hero-copy{max-width:680px !important;margin:0 auto !important;}
  .hero h1,.hero-title{
    font-size:clamp(54px, 10vw, 78px) !important;
    line-height:.96 !important;
    max-width:680px !important;
  }
  .hero .lead{font-size:16px !important;max-width:640px !important;line-height:1.78 !important;}
  .hero-cta .button{height:52px !important;}
  .mini-proof{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .hero-visual{
    min-height:500px !important;
    margin-top:-6px !important;
  }
  .hero-image-scene{
    width:min(560px, 86vw) !important;
    height:500px !important;
  }
  .floating-chip{display:none !important;}
  .pain-grid,.compare-grid{grid-template-columns:1fr !important;}
  .feature-wheel-v8 .wheel-stage{grid-template-columns:1fr !important;}
  .wheel-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important;display:grid !important;}
  .contact-panel,.api-access-panel{grid-template-columns:1fr !important;}
}

/* Phone layout: tighter rhythm, no huge empty art gaps, readable text, and touch-friendly targets. */
@media (max-width: 640px){
  html{font-size:15px;}
  body{overflow-x:hidden !important;}
  .site-bg{
    background-attachment:scroll !important;
    background-position:54% top !important;
    filter:saturate(1.08) contrast(1.04) brightness(.98) !important;
  }
  .site-vignette{opacity:.88 !important;}
  .section-pad{
    width:calc(100% - var(--mobile-edge) * 2) !important;
    margin-inline:var(--mobile-edge) !important;
  }

  .nav{
    top:12px !important;
    width:calc(100vw - 24px) !important;
    height:58px !important;
    padding:0 10px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    border-radius:999px !important;
  }
  .brand{gap:9px !important;min-width:0 !important;}
  .brand-mark{width:40px !important;height:40px !important;font-size:28px !important;}
  .brand-name{font-size:14px !important;white-space:nowrap !important;}
  .nav-center,.pill-ghost{display:none !important;}
  .nav-actions{gap:0 !important;}
  .pill-light{
    height:40px !important;
    padding-inline:15px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:22px !important;
    padding-top:98px !important;
    padding-bottom:46px !important;
    align-items:start !important;
  }
  .hero-copy{max-width:100% !important;margin-top:0 !important;}
  .badge{
    max-width:100% !important;
    font-size:12px !important;
    gap:8px !important;
    padding:5px 9px !important;
  }
  .badge b{min-width:42px !important;height:24px !important;padding-inline:8px !important;}
  .hero h1,.hero-title{
    margin-top:22px !important;
    font-size:clamp(46px, 15vw, 60px) !important;
    line-height:.94 !important;
    letter-spacing:-.075em !important;
    max-width:100% !important;
  }
  .hero-title .title-line{display:block !important;}
  .hero .lead{
    margin-top:22px !important;
    font-size:15.5px !important;
    line-height:1.78 !important;
    max-width:100% !important;
  }
  .hero-cta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:28px !important;
  }
  .hero-cta .button{
    width:100% !important;
    height:54px !important;
    padding-inline:18px !important;
  }
  .mini-proof{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:24px !important;
  }
  .mini-proof div{
    min-height:64px !important;
    padding:15px 17px !important;
    border-radius:18px !important;
  }

  .hero-visual{
    min-height:420px !important;
    margin-top:4px !important;
    overflow:visible !important;
    display:grid !important;
    place-items:center !important;
  }
  .hero-image-scene{
    width:min(100%, 420px) !important;
    height:420px !important;
  }
  .hero-hand-phone-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
  .orbit-ring{opacity:.26 !important;transform:scale(.72) !important;}
  .floating-chip{display:none !important;}

  .pain{padding-top:54px !important;padding-bottom:56px !important;}
  .split-heading h2,
  .wheel-copy h2,
  .gallery-heading h2,
  .compare-copy h2,
  .api-access-heading h2,
  .contact-panel h2{
    font-size:clamp(34px, 10.8vw, 48px) !important;
    line-height:1.08 !important;
    letter-spacing:-.06em !important;
  }
  .split-heading p,
  .wheel-copy p,
  .gallery-heading p,
  .compare-copy p,
  .api-access-heading p{
    font-size:15px !important;
    line-height:1.78 !important;
    margin-top:16px !important;
  }
  .pain-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:26px !important;
  }
  .pain-card{
    min-height:auto !important;
    padding:22px !important;
    border-radius:22px !important;
  }
  .pain-card h3{margin-top:28px !important;font-size:21px !important;}
  .pain-card p{font-size:14.5px !important;line-height:1.7 !important;}

  .feature-wheel-v8{
    padding-top:58px !important;
    padding-bottom:64px !important;
    gap:26px !important;
  }
  .feature-wheel-v8 .wheel-copy{min-height:auto !important;}
  .feature-wheel-v8 .feature-detail{
    margin-top:22px !important;
    min-height:auto !important;
    padding:22px !important;
    border-radius:22px !important;
  }
  .feature-wheel-v8 .wheel-stage{
    grid-template-columns:1fr !important;
    gap:20px !important;
    min-height:auto !important;
  }
  .feature-wheel-v8 .wheel-phone-wrap{
    min-height:430px !important;
  }
  .feature-wheel-v8 .wheel-phone{width:min(250px, 72vw) !important;}
  .wheel-list{grid-template-columns:1fr !important;gap:10px !important;}
  .wheel-item{min-height:72px !important;border-radius:18px !important;padding:14px 15px !important;}

  .api-access{padding-top:58px !important;padding-bottom:58px !important;}
  .api-access-panel{
    grid-template-columns:1fr !important;
    gap:22px !important;
    padding:22px !important;
    border-radius:26px !important;
  }
  .api-access-copy h3{font-size:clamp(28px, 8vw, 38px) !important;}
  .api-copy-card{padding:18px !important;border-radius:22px !important;}
  .api-copy-card pre{
    max-width:100% !important;
    overflow:auto !important;
    font-size:12px !important;
    line-height:1.62 !important;
  }

  .gallery{padding-top:60px !important;padding-bottom:62px !important;}
  .screen-marquee{
    margin-top:26px !important;
    padding:18px 0 !important;
  }
  .screen-track{gap:18px !important;animation-duration:40s !important;}
  .mini-phone{width:156px !important;border-radius:24px !important;padding:6px !important;}
  .mini-phone img{border-radius:18px !important;}

  .compare{padding-top:56px !important;padding-bottom:62px !important;}
  .compare-grid{grid-template-columns:1fr !important;gap:12px !important;margin-top:24px !important;}
  .compare-card{min-height:auto !important;padding:22px !important;border-radius:22px !important;}

  .contact{padding-top:58px !important;padding-bottom:76px !important;}
  .contact-panel{
    grid-template-columns:1fr !important;
    gap:24px !important;
    min-height:auto !important;
    padding:24px 18px !important;
    border-radius:28px !important;
  }
  .contact-panel h2{margin-top:20px !important;}
  .contact-panel p{font-size:14.5px !important;line-height:1.76 !important;}
  .contact-action-area{grid-template-columns:1fr !important;gap:14px !important;}
  .contact-link-row{min-height:56px !important;border-radius:18px !important;grid-template-columns:minmax(0,1fr) 66px !important;}
  .contact-qr-column{grid-template-columns:repeat(2, minmax(0,1fr)) !important;gap:10px !important;}
  .contact-qr-card{min-height:96px !important;border-radius:18px !important;}
  .contact-extra-line{grid-template-columns:1fr !important;gap:6px !important;padding:14px 16px !important;border-radius:18px !important;}

  /* Mobile performance: keep frosted style, reduce filter cost while scrolling. */
  :where(.glass,.glass-nav,.badge,.button-play,.pill-ghost,.floating-chip,.mini-proof div,.pain-card,.feature-detail,.wheel-item,.api-access-panel,.api-access-copy li,.api-copy-card,.mini-phone,.compare-card,.contact-panel,.contact-link-row,.contact-qr-card,.contact-extra-line){
    backdrop-filter:blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(150%) !important;
  }
  .hq-flow.hq-flow-unit{
    filter:blur(6px) saturate(.94) brightness(.94) !important;
    transition-duration:.82s,.9s,.9s,.72s,.34s,.28s !important;
  }
  .hq-flow.hq-flow-unit.hq-flow-in{filter:blur(0) saturate(1) brightness(1) !important;}
}

@media (max-width: 380px){
  .brand-name{font-size:13px !important;}
  .pill-light{padding-inline:12px !important;font-size:12px !important;}
  .hero h1,.hero-title{font-size:clamp(42px, 14.5vw, 54px) !important;}
  .hero .lead{font-size:14.5px !important;}
  .button{font-size:14px !important;}
  .hero-visual{min-height:370px !important;}
  .hero-image-scene{height:370px !important;}
}