/* ==========================================================================
   pilltronics — corporate site
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:        #0A1428;
  --ink-2:      #1B2740;
  --muted:      #6B7691;
  --muted-2:    #9AA3B7;
  --line:       #E4E9F2;
  --line-soft:  #EEF2F8;
  --bg:         #FFFFFF;
  --bg-soft:    #F5F7FB;
  --bg-soft-2:  #EEF2F9;
  --navy:       #10265A;
  --navy-deep:  #06122C;
  --blue:       #2F6BF3;
  --blue-ink:   #1B4ED1;
  --cyan:       #17A3E8;
  --blue-soft:  #EAF1FE;
  --green:      #12B26A;
  --amber:      #F0A93B;
  --red:        #E9556B;

  --ff: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
  --ff-en: "Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --shadow-s: 0 2px 8px rgba(12,26,58,.05), 0 12px 28px -18px rgba(12,26,58,.22);
  --shadow-m: 0 4px 14px rgba(12,26,58,.06), 0 30px 60px -34px rgba(12,26,58,.32);
  --shadow-l: 0 8px 24px rgba(12,26,58,.07), 0 60px 100px -50px rgba(12,26,58,.40);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff); font-size:16px; line-height:1.7;
  font-weight:400; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; word-break:keep-all;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1480px}
.section{position:relative;padding:clamp(88px,11vw,160px) 0}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--navy-deep);color:#fff}
.section--tight{padding-block:clamp(64px,8vw,110px)}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-en);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.section--dark .eyebrow,.cta .eyebrow{color:#7FB0FF}

.h-display{
  font-family:var(--ff-en);font-weight:800;line-height:.94;
  letter-spacing:-.035em;font-size:clamp(44px,8.4vw,116px);
}
.h1{font-size:clamp(30px,4.6vw,58px);font-weight:800;line-height:1.22;letter-spacing:-.035em}
.h2{font-size:clamp(25px,3.1vw,40px);font-weight:800;line-height:1.28;letter-spacing:-.032em}
.h3{font-size:clamp(19px,1.75vw,24px);font-weight:700;line-height:1.4;letter-spacing:-.025em}
.lead{font-size:clamp(15px,1.32vw,19px);line-height:1.85;color:var(--muted)}
.section--dark .lead,.cta .lead{color:rgba(255,255,255,.62)}
.small{font-size:13.5px;line-height:1.7;color:var(--muted)}
.mono{font-family:var(--ff-en);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.accent{color:var(--blue)}

.sec-head{max-width:820px;margin-bottom:clamp(44px,5vw,76px)}
.sec-head .h2{margin-top:20px}
.sec-head .lead{margin-top:20px;max-width:64ch}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow::before{display:none}

/* ---------- buttons ---------- */
.btn{
  --bg-c:var(--ink); --fg-c:#fff;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:100px;background:var(--bg-c);color:var(--fg-c);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:1}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:linear-gradient(120deg,var(--blue),var(--cyan));
  opacity:0;transition:opacity .45s var(--ease);
}
.btn:hover{box-shadow:0 18px 34px -18px rgba(47,107,243,.7)}
.btn:hover::after{opacity:1}
.btn--primary{--bg-c:var(--blue)}
.btn--primary::after{background:linear-gradient(120deg,var(--blue-ink),var(--blue))}
.btn--ghost{--bg-c:transparent;--fg-c:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{--fg-c:#fff}
.section--dark .btn--ghost,.cta .btn--ghost{--fg-c:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.btn .ico{width:15px;height:15px;transition:transform .45s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}

.link-more{
  display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--ink);letter-spacing:-.005em;
}
.link-more .bar{width:26px;height:1px;background:var(--ink);transition:width .45s var(--ease)}
.link-more:hover .bar{width:40px}
.section--dark .link-more,.cta .link-more{color:#fff}
.section--dark .link-more .bar{background:#fff}

/* ---------- chrome: progress / grain / cursor ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:1200;pointer-events:none}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.grain{
  position:fixed;inset:-120px;z-index:1100;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
.cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;z-index:1300;
  border:1px solid rgba(47,107,243,.5);pointer-events:none;opacity:0;
  transform:translate3d(-50%,-50%,0);
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease), background .35s;
  mix-blend-mode:normal;
}
.cursor.is-on{opacity:1}
.cursor.is-big{width:66px;height:66px;background:rgba(47,107,243,.1)}
@media (hover:none),(max-width:900px){ .cursor{display:none} }

/* ---------- preloader ---------- */
.preload{
  position:fixed;inset:0;z-index:2000;background:var(--navy-deep);
  display:grid;place-items:center;transition:opacity .7s var(--ease), visibility .7s;
}
.preload.is-done{opacity:0;visibility:hidden}
.preload__inner{display:grid;justify-items:center;gap:22px}
.preload__mark{width:56px;opacity:0;animation:preIn .9s var(--ease) .1s forwards}
.preload__track{width:170px;height:2px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px}
.preload__fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .3s linear}
.preload__txt{
  font-family:var(--ff-en);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.44);
}
@keyframes preIn{to{opacity:1}}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;
  transition:height .45s var(--ease), background .45s var(--ease),
             box-shadow .45s var(--ease), backdrop-filter .45s;
}
.hdr::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 var(--line-soft);
  transition:opacity .45s var(--ease);
}
.hdr.is-stuck::after{opacity:1}
.hdr.is-stuck{height:64px}
.hdr__inner{
  width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:25px;width:auto;transition:height .4s var(--ease)}
.hdr.is-stuck .brand img{height:22px}
.brand__logo--light{display:none}
.hdr.is-light .brand__logo--dark{display:none}
.hdr.is-light .brand__logo--light{display:block}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:10px 16px;font-size:14.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink-2);transition:color .3s;
}
.hdr.is-light .nav a{color:rgba(255,255,255,.82)}
.nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--blue)}
.hdr.is-light .nav a:hover,.hdr.is-light .nav a.is-active{color:#fff}
.hdr.is-light .nav a::after{background:#fff}

.hdr__cta{display:flex;align-items:center;gap:12px}
.hdr__cta .btn{padding:11px 21px;font-size:13.5px}
.hdr.is-light .btn--ghost{--fg-c:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

.burger{
  display:none;width:44px;height:44px;border-radius:12px;
  align-items:center;justify-content:center;
}
.burger i{display:block;position:relative;width:20px;height:1.6px;background:var(--ink);transition:.4s var(--ease)}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--ink);transition:.4s var(--ease);
}
.burger i::before{top:-6px}.burger i::after{top:6px}
.hdr.is-light .burger i,.hdr.is-light .burger i::before,.hdr.is-light .burger i::after{background:#fff}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{top:0;transform:rotate(45deg);background:var(--ink)}
body.menu-open .burger i::after{top:0;transform:rotate(-45deg);background:var(--ink)}

/* mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:990;background:var(--bg);
  padding:calc(var(--nav-h) + 28px) var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  visibility:hidden;overflow-y:auto;
}
body.menu-open .mmenu{clip-path:inset(0 0 0 0);visibility:visible}
.mmenu__nav a{
  display:block;padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-size:clamp(26px,7vw,38px);font-weight:800;letter-spacing:-.035em;
  opacity:0;transform:translateY(24px);
}
body.menu-open .mmenu__nav a{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) calc(.18s + var(--i)*.06s), transform .6s var(--ease) calc(.18s + var(--i)*.06s);
}
.mmenu__nav a em{
  font-style:normal;font-family:var(--ff-en);font-size:12px;font-weight:600;
  letter-spacing:.2em;color:var(--muted-2);display:block;margin-bottom:2px;
}
.mmenu__foot{padding-top:28px;color:var(--muted);font-size:13.5px}

@media (max-width:1080px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:flex}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 clamp(80px,10vh,130px);
  background:var(--navy-deep);color:#fff;overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 52% at 76% 18%, rgba(47,107,243,.42), transparent 62%),
    radial-gradient(46% 44% at 12% 78%, rgba(23,163,232,.24), transparent 66%),
    linear-gradient(168deg,#06122C 0%,#0A1C42 48%,#071634 100%);
}
.hero__grid{
  position:absolute;inset:-2px;z-index:-2;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(78% 70% at 50% 40%,#000 25%,transparent 82%);
  -webkit-mask-image:radial-gradient(78% 70% at 50% 40%,#000 25%,transparent 82%);
}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-2;will-change:transform}
.orb--1{width:min(46vw,560px);aspect-ratio:1;background:rgba(47,107,243,.5);top:-12%;right:-6%;animation:drift1 22s ease-in-out infinite}
.orb--2{width:min(36vw,420px);aspect-ratio:1;background:rgba(23,163,232,.34);bottom:-14%;left:-8%;animation:drift2 26s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,7%,0) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8%,-6%,0) scale(1.14)}}

/* giant drifting wordmark */
.hero__ghost{
  position:absolute;left:0;right:0;bottom:6%;z-index:-1;pointer-events:none;
  font-family:var(--ff-en);font-weight:800;font-size:clamp(90px,19vw,290px);
  line-height:1;letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);
  display:flex;gap:.22em;animation:ghostRun 34s linear infinite;
}
@keyframes ghostRun{to{transform:translateX(-50%)}}

.hero__inner{
  position:relative;width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;
  border-radius:100px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  font-size:12.5px;letter-spacing:-.005em;color:rgba(255,255,255,.8);backdrop-filter:blur(8px);
}
.hero__badge b{
  font-family:var(--ff-en);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  padding:4px 9px;border-radius:100px;background:var(--blue);color:#fff;
}
.hero__title{
  margin-top:26px;font-size:clamp(29px,4.3vw,60px);font-weight:800;
  line-height:1.24;letter-spacing:-.042em;
}
.hero__title .gradient{
  background:linear-gradient(96deg,#6FA8FF 0%,#33D3F5 52%,#8FC4FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{margin-top:26px;max-width:50ch;font-size:clamp(14.5px,1.22vw,17.5px);line-height:1.86;color:rgba(255,255,255,.66)}
.hero__acts{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px}
.hero .btn--ghost{--fg-c:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}

.hero__visual{position:relative;min-height:min(58vh,520px);display:grid;place-items:center}
.hero__glow{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(96,160,255,.4),transparent 66%);
  filter:blur(46px);
}
.hero__ring{
  position:absolute;width:min(78%,520px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
}
.hero__ring::after{
  content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(255,255,255,.09);
  animation:spin 46s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__device{
  position:relative;width:min(112%,760px);
  filter:drop-shadow(0 50px 70px rgba(0,0,0,.5));
  animation:floaty 7.5s ease-in-out infinite;will-change:transform;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero__chip{
  position:absolute;display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-radius:100px;background:rgba(9,20,44,.72);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 34px -20px rgba(0,0,0,.9);
  font-size:12px;font-weight:600;color:#fff;white-space:nowrap;letter-spacing:-.01em;
}
.hero__chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(18,178,106,.6);animation:pulse 2.4s infinite}
.hero__chip .dot--blue{background:#5AA9FF;box-shadow:0 0 0 0 rgba(90,169,255,.6)}
.hero__chip .dot--amber{background:var(--amber);box-shadow:0 0 0 0 rgba(240,169,59,.6)}
@keyframes pulse{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero__chip--1{top:8%;left:-2%;animation:floaty 6.4s ease-in-out infinite}
.hero__chip--2{top:44%;right:-3%;animation:floaty 8.2s ease-in-out .6s infinite}
.hero__chip--3{bottom:11%;left:6%;animation:floaty 7.1s ease-in-out .3s infinite}

.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:grid;justify-items:center;gap:9px;z-index:2;
  font-family:var(--ff-en);font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.42);
}
.hero__scroll .rail{width:1px;height:44px;background:rgba(255,255,255,.16);overflow:hidden;position:relative}
.hero__scroll .rail::after{
  content:"";position:absolute;inset:0;background:#fff;
  animation:railRun 2s var(--ease-io) infinite;
}
@keyframes railRun{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ticker */
.ticker{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.09);
  background:var(--navy-deep);color:rgba(255,255,255,.5);overflow:hidden;
}
.ticker__row{display:flex;gap:0;width:max-content;animation:tick 40s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{
  display:flex;align-items:center;gap:14px;padding:16px 26px;
  font-family:var(--ff-en);font-size:12px;font-weight:500;letter-spacing:.13em;white-space:nowrap;
}
.ticker__row span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--blue)}
@keyframes tick{to{transform:translateX(-50%)}}

@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:8px}
  .hero__visual{min-height:auto;margin-top:34px;order:2}
  .hero__device{width:min(100%,520px)}
  .hero__chip{font-size:11px;padding:7px 11px}
  .hero__chip--1{top:4%;left:0}
  .hero__chip--2{top:auto;bottom:30%;right:0}
  .hero__chip--3{bottom:6%;left:2%}
  .hero__scroll{display:none}
}

/* ==========================================================================
   PRODUCT FILM
   ========================================================================== */
.film{
  background:linear-gradient(180deg,var(--navy-deep) 0%,#08183A 46%,var(--navy-deep) 100%);
  color:#fff;overflow:hidden;
}
.film::before{
  content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:min(80vw,1100px);aspect-ratio:2/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(47,107,243,.26),transparent 66%);filter:blur(30px);
}
.film .eyebrow{color:#7FB0FF}
.film .lead{color:rgba(255,255,255,.62)}

.player{position:relative}
.player__frame{
  position:relative;border-radius:clamp(16px,1.6vw,24px);overflow:hidden;
  background:#04102A;aspect-ratio:16/9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             0 40px 90px -40px rgba(0,0,0,.95),
             0 0 0 1px rgba(47,107,243,.14);
}
.player__frame video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#04102A;
}
.player__meta{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;gap:12px;
  padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px);
  font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.62);
  background:linear-gradient(rgba(4,16,42,.62),transparent);
  transition:opacity .5s var(--ease);pointer-events:none;
}
.player.is-playing .player__meta{opacity:0}

.player__play{
  position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:20px;
  background:
    radial-gradient(38% 46% at 50% 46%,rgba(4,16,42,.62),transparent 72%),
    linear-gradient(180deg,rgba(4,16,42,.42) 0%,rgba(4,16,42,.30) 42%,rgba(4,16,42,.72) 100%);
  transition:opacity .55s var(--ease),visibility .55s;
}
.player.is-playing .player__play{opacity:0;visibility:hidden}
.player__ico{
  position:relative;width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:var(--navy-deep);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -16px rgba(0,0,0,.7);
  transition:transform .55s var(--ease),background .4s;
}
.player__ico svg{width:38%;height:38%;margin-left:8%}
.player__play:hover .player__ico{transform:scale(1.08);background:#fff}
.player__ring{
  position:absolute;top:calc(50% - clamp(64px,7vw,92px)/2 - 8px);left:50%;
  width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,0);border:1px solid rgba(255,255,255,.5);
  animation:playRing 2.6s var(--ease-io) infinite;pointer-events:none;
}
@keyframes playRing{0%{transform:translate(-50%,0) scale(1);opacity:.7}70%{transform:translate(-50%,0) scale(1.55);opacity:0}100%{opacity:0}}
.player__cta{
  font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:#fff;text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.player__cta em{
  display:block;font-style:normal;margin-top:5px;font-family:var(--ff-en);
  font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.66);
}

/* chapters */
.chapters{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:clamp(18px,2vw,28px);
  background:rgba(255,255,255,.1);border-radius:16px;overflow:hidden;
}
.chapters li{background:rgba(255,255,255,.035)}
.chapters button{
  position:relative;display:block;width:100%;height:100%;text-align:left;
  padding:clamp(16px,1.7vw,22px) clamp(14px,1.5vw,20px);
  transition:background .4s var(--ease);
}
.chapters button::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.chapters button:hover{background:rgba(255,255,255,.06)}
.chapters li.is-active button{background:rgba(47,107,243,.16)}
.chapters li.is-active button::after{transform:scaleX(1)}
.chapters em{
  display:block;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;color:rgba(255,255,255,.42);
}
.chapters li.is-active em{color:#7FB0FF}
.chapters b{display:block;margin-top:9px;font-size:14px;font-weight:700;letter-spacing:-.025em;color:#fff}
.chapters span{display:block;margin-top:6px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.52)}

.btn--play .ico--play{width:13px;height:13px}
.btn--play:hover .ico--play{transform:none}

@media (max-width:900px){
  .chapters{grid-template-columns:1fr 1fr}
  .player__cta{font-size:13px}
}
@media (max-width:520px){
  .chapters{grid-template-columns:1fr}
  .player__meta{font-size:9.5px;letter-spacing:.1em}
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}
[data-reveal][data-d="5"]{transition-delay:.45s}
[data-reveal][data-d="6"]{transition-delay:.54s}
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(3deg);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.split.is-in .ch{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.split .ch{opacity:1!important;transform:none!important;transition:none!important}
  .orb,.hero__device,.hero__chip,.hero__ghost,.ticker__row{animation:none!important}
}

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.prob__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);margin-top:clamp(36px,4vw,58px)}
.prob__card{
  position:relative;padding:clamp(26px,2.6vw,38px);border-radius:20px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.prob__card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-m)}
.prob__no{
  font-family:var(--ff-en);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--muted-2);
}
.prob__card h3{margin-top:16px;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.03em}
.prob__card p{margin-top:12px;font-size:14.5px;line-height:1.8;color:var(--muted)}
.prob__flaw{
  margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);
  display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.65;color:var(--red);font-weight:600;
}
.prob__flaw svg{flex:0 0 16px;margin-top:3px}
.prob__answer{
  margin-top:clamp(30px,3.4vw,46px);padding:clamp(26px,3vw,44px);border-radius:22px;
  background:linear-gradient(120deg,var(--navy) 0%,#173B86 55%,#0E2E6E 100%);
  color:#fff;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,38px);align-items:center;
  position:relative;overflow:hidden;
}
.prob__answer::after{
  content:"";position:absolute;right:-8%;top:-40%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(90,169,255,.35),transparent 66%);
}
.prob__answer .tag{
  font-family:var(--ff-en);font-size:11px;font-weight:700;letter-spacing:.2em;
  padding:8px 14px;border-radius:100px;background:rgba(255,255,255,.13);white-space:nowrap;
}
.prob__answer p{font-size:clamp(16px,1.75vw,25px);font-weight:700;line-height:1.55;letter-spacing:-.03em;position:relative}
.prob__answer p em{font-style:normal;color:#7FC4FF}

/* stat strip */
.statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.4vw,46px)}
.statstrip li{padding:26px 24px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.statstrip li>b{display:block;font-family:var(--ff-en);font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--navy)}
.statstrip li>span{display:block;margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.6}

@media (max-width:900px){ .prob__grid,.statstrip{grid-template-columns:1fr} .prob__answer{grid-template-columns:1fr;gap:16px} }

/* ==========================================================================
   PRODUCT OVERVIEW (3 cards)
   ========================================================================== */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.7vw,24px)}
.pcard{
  position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .65s var(--ease),box-shadow .65s var(--ease);
}
.pcard:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px transparent,var(--shadow-l)}
.pcard__media{
  position:relative;aspect-ratio:4/3.1;display:grid;place-items:center;padding:26px;
  background:radial-gradient(120% 100% at 50% 0%,#F7F9FD 0%,#E9EFF8 100%);overflow:hidden;
}
.pcard__media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 105%,rgba(47,107,243,.14),transparent 70%);
}
.pcard__media img{
  position:relative;max-height:100%;width:auto;object-fit:contain;
  transition:transform .8s var(--ease);filter:drop-shadow(0 24px 30px rgba(16,38,90,.16));
}
.pcard:hover .pcard__media img{transform:scale(1.06) translateY(-4px)}
.pcard__media img.is-tall{max-width:58%}
.pcard__tag{
  position:absolute;top:18px;left:18px;z-index:2;padding:6px 12px;border-radius:100px;
  background:rgba(10,20,40,.82);color:#fff;font-family:var(--ff-en);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;backdrop-filter:blur(6px);
}
.pcard__body{padding:clamp(22px,2.3vw,32px);display:flex;flex-direction:column;flex:1;gap:12px}
.pcard__body h3{font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.03em}
.pcard__body h3 em{font-style:normal;display:block;font-size:12px;font-family:var(--ff-en);letter-spacing:.16em;color:var(--blue);font-weight:700;margin-bottom:7px}
.pcard__body p{font-size:14.5px;line-height:1.8;color:var(--muted)}
.pcard__spec{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.pcard__spec li{
  padding:5px 11px;border-radius:100px;background:var(--bg-soft);
  font-size:11.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;
}
.pcard__body .link-more{margin-top:auto;padding-top:16px}
@media (max-width:960px){ .pcards{grid-template-columns:1fr} .pcard__media img.is-tall{max-width:44%} }

/* ==========================================================================
   PRODUCT DETAIL (sticky)
   ========================================================================== */
.detail{position:relative}
.detail__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,74px);align-items:start}
.detail--rev .detail__grid{direction:rtl}
.detail--rev .detail__grid > *{direction:ltr}
.detail__sticky{position:sticky;top:calc(var(--nav-h) + 24px)}
.stage{
  position:relative;border-radius:26px;padding:clamp(24px,3vw,46px);
  background:radial-gradient(120% 110% at 50% 0%,#FAFCFF 0%,#E9EFF8 100%);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
}
.section--dark .stage{
  background:radial-gradient(120% 110% at 50% 0%,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.stage__glow{
  position:absolute;left:50%;bottom:-30%;transform:translateX(-50%);
  width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,243,.2),transparent 64%);filter:blur(20px);
}
.stage figure{position:relative;margin:0}
.stage figure img{width:100%;filter:drop-shadow(0 34px 44px rgba(16,38,90,.2))}
.stage__extra{
  position:relative;margin-top:18px;padding:14px 18px 14px 14px;border-radius:16px;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line);
  display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;backdrop-filter:blur(6px);
}
.stage__extra img{width:88px;filter:drop-shadow(0 8px 12px rgba(16,38,90,.18))}
.stage__extra b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.02em}
.stage__extra span{display:block;margin-top:5px;font-size:12px;line-height:1.6;color:var(--muted)}
@media (max-width:480px){ .stage__extra{grid-template-columns:64px 1fr;gap:12px} .stage__extra img{width:64px} }

/* hotspots */
.hs{
  position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);box-shadow:0 4px 16px rgba(16,38,90,.28);cursor:pointer;
  transform:translate(-50%,-50%);z-index:3;
}
.hs::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--blue);
  animation:hsPulse 2.6s var(--ease-io) infinite;
}
.hs i{width:7px;height:7px;border-radius:50%;background:var(--blue);display:block}
@keyframes hsPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}
.hs__label{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);
  padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff;white-space:nowrap;
  font-size:12px;font-weight:600;letter-spacing:-.01em;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);box-shadow:var(--shadow-m);
}
.hs__label b{display:block;font-size:12.5px}
.hs__label span{display:block;font-size:11px;font-weight:500;opacity:.66;margin-top:2px}
.hs:hover .hs__label,.hs:focus-visible .hs__label{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:720px){ .hs{width:20px;height:20px} .hs__label{display:none} }

/* feature list */
.feat{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
.section--dark .feat{border-color:rgba(255,255,255,.12)}
.feat li{
  display:grid;grid-template-columns:44px 1fr;gap:18px;
  padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--line);
}
.section--dark .feat li{border-color:rgba(255,255,255,.12)}
.feat__no{
  font-family:var(--ff-en);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--blue);padding-top:4px;
}
.feat h4{font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.028em}
.feat p{margin-top:9px;font-size:14.5px;line-height:1.8;color:var(--muted)}
.section--dark .feat p{color:rgba(255,255,255,.6)}
.feat__meta{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;
}
.feat__meta span{
  padding:5px 11px;border-radius:8px;background:var(--bg-soft);
  font-family:var(--ff-en);font-size:11.5px;font-weight:600;color:var(--ink-2);
}
.section--dark .feat__meta span{background:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}

.detail__head{margin-bottom:clamp(24px,2.6vw,38px)}
.detail__head .h2{margin-top:18px}
.detail__head .lead{margin-top:18px}
.detail__dims{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
}
.section--dark .detail__dims{border-color:rgba(255,255,255,.12)}
.detail__dims div{display:grid;gap:3px}
.detail__dims dt{font-size:11.5px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;font-family:var(--ff-en);font-weight:600}
.detail__dims dd{margin:0;font-family:var(--ff-en);font-size:clamp(17px,1.6vw,21px);font-weight:700;letter-spacing:-.03em}

/* volume compare bar */
.vol{margin-top:26px;padding:24px;border-radius:18px;background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line)}
.section--dark .vol{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.vol__row{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;margin-bottom:12px}
.vol__row:last-child{margin-bottom:0}
.vol__row small{font-size:12px;color:var(--muted);font-weight:600}
.vol__bar{height:10px;border-radius:100px;background:rgba(16,38,90,.09);overflow:hidden}
.section--dark .vol__bar{background:rgba(255,255,255,.12)}
.vol__fill{height:100%;width:0;border-radius:100px;background:var(--muted-2);transition:width 1.5s var(--ease)}
.vol__row--now .vol__fill{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.vol__row b{font-family:var(--ff-en);font-size:14px;font-weight:700}
.vol__note{margin-top:16px;font-size:12.5px;color:var(--blue);font-weight:700;font-family:var(--ff-en);letter-spacing:.04em}

@media (max-width:960px){
  .detail__grid,.detail--rev .detail__grid{grid-template-columns:1fr;direction:ltr}
  .detail__sticky{position:static}
}

/* ==========================================================================
   APP SHOWCASE
   ========================================================================== */
.appshow{position:relative;overflow:hidden}
.appstrip{position:relative;margin-top:clamp(34px,4vw,56px)}
.appstrip::before,.appstrip::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(30px,8vw,140px);z-index:3;pointer-events:none;
}
.appstrip::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent)}
.appstrip::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent)}
.appstrip__row{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;animation:appRun 56s linear infinite}
.appshow:hover .appstrip__row{animation-play-state:paused}
@keyframes appRun{to{transform:translateX(-50%)}}
.phone{
  position:relative;flex:0 0 auto;width:clamp(174px,17vw,232px);border-radius:26px;overflow:hidden;
  background:#fff;box-shadow:0 30px 60px -28px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .6s var(--ease);
}
.phone:hover{transform:translateY(-10px)}
.phone img{width:100%}
.phone figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(transparent,rgba(6,18,44,.9) 55%);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:-.01em;
}
.phone figcaption em{display:block;font-style:normal;font-weight:500;font-size:11px;opacity:.66;margin-top:2px}

.appfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px);margin-top:clamp(38px,4vw,60px)}
.appfeat li{padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.appfeat h4{font-size:16px;font-weight:700;letter-spacing:-.025em}
.appfeat p{margin-top:9px;font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.58)}
.appfeat .ic{width:34px;height:34px;border-radius:10px;background:rgba(47,107,243,.2);display:grid;place-items:center;margin-bottom:16px}
.appfeat .ic svg{width:17px;height:17px;stroke:#7FB0FF}
@media (max-width:900px){ .appfeat{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .appfeat{grid-template-columns:1fr} }

/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */
.tech__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,26px)}
.tech__card{
  position:relative;padding:clamp(28px,3vw,44px);border-radius:22px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.tech__card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.tech__card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-m)}
.tech__card:hover::after{transform:scaleX(1)}
.tech__ic{
  width:46px;height:46px;border-radius:14px;background:var(--blue-soft);
  display:grid;place-items:center;margin-bottom:22px;
}
.tech__ic svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.7}
.tech__card h3{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.03em}
.tech__card h3 em{
  display:block;font-style:normal;font-family:var(--ff-en);font-size:11px;font-weight:700;
  letter-spacing:.18em;color:var(--blue);margin-bottom:9px;
}
.tech__card p{margin-top:14px;font-size:14.5px;line-height:1.85;color:var(--muted)}
.tech__card .kv{
  margin-top:20px;padding:14px 16px;border-radius:12px;background:var(--bg-soft);
  font-family:var(--ff-en);font-size:12.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.tech__card .kv b{color:var(--blue)}
@media (max-width:900px){ .tech__grid{grid-template-columns:1fr} }

/* alarm flow */
.flow{
  margin-top:clamp(34px,4vw,56px);padding:clamp(26px,3vw,44px);border-radius:22px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);
}
.flow__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:clamp(24px,2.6vw,36px)}
.flow__head h3{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.03em}
.flow__head span{font-size:13px;color:var(--muted)}
.flow__track{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.flow__step{
  position:relative;padding:22px 18px;border-radius:16px;background:var(--bg-soft);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.flow__step em{
  font-style:normal;font-family:var(--ff-en);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;color:var(--muted-2);
}
.flow__step h4{margin-top:10px;font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.flow__step p{margin-top:7px;font-size:12.5px;line-height:1.65;color:var(--muted)}
.flow__step--key{background:var(--blue-soft);box-shadow:inset 0 0 0 1px rgba(47,107,243,.2)}
.flow__step--key em{color:var(--blue)}
.flow__step--ok{background:rgba(18,178,106,.08);box-shadow:inset 0 0 0 1px rgba(18,178,106,.2)}
.flow__step--ok em{color:var(--green)}
.flow__step--warn{background:rgba(240,169,59,.1);box-shadow:inset 0 0 0 1px rgba(240,169,59,.24)}
.flow__step--warn em{color:#C57E14}
.flow__arrow{
  position:absolute;top:50%;right:-9px;transform:translateY(-50%);z-index:2;
  width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(16,38,90,.16);
  display:grid;place-items:center;
}
.flow__arrow svg{width:9px;height:9px;stroke:var(--muted);stroke-width:2.4;fill:none}
.flow__note{
  margin-top:22px;padding:16px 20px;border-radius:14px;background:var(--ink);color:#fff;
  font-size:13.5px;line-height:1.7;display:flex;gap:12px;align-items:flex-start;
}
.flow__note b{color:#7FC4FF}
.flow__note svg{flex:0 0 17px;margin-top:3px;stroke:#7FC4FF;fill:none;stroke-width:1.8}
@media (max-width:1000px){ .flow__track{grid-template-columns:1fr 1fr} .flow__arrow{display:none} }
@media (max-width:560px){ .flow__track{grid-template-columns:1fr} }

/* ==========================================================================
   ARCHITECTURE / FIGURE
   ========================================================================== */
.figframe{
  position:relative;border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow-s);
}
.figframe__bar{
  display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid var(--line-soft);
  background:var(--bg-soft);
}
.figframe__bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.figframe__bar i:first-child{background:#E9556B}
.figframe__bar i:nth-child(2){background:#F0A93B}
.figframe__bar i:nth-child(3){background:#12B26A}
.figframe__bar span{
  margin-left:8px;font-family:var(--ff-en);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;color:var(--muted);
}
.figframe__zoom{position:relative;display:block}
.figframe__zoom img{width:100%;transition:transform .8s var(--ease)}
.figframe__zoom:hover img{transform:scale(1.02)}
.figframe__zoom .zoom{
  position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:100px;background:rgba(10,20,40,.84);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:-.01em;backdrop-filter:blur(6px);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.figframe:hover .zoom{opacity:1;transform:none}
@media (hover:none){ .figframe__zoom .zoom{opacity:1;transform:none} }
.figframe__zoom .zoom svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none}
.figframe figcaption{padding:16px 20px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted)}

.figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px);margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:900px){ .figs{grid-template-columns:1fr} }

/* ==========================================================================
   NUMBERS
   ========================================================================== */
.nums{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.12);border-radius:20px;overflow:hidden}
.nums li{background:var(--navy-deep);padding:clamp(24px,2.8vw,40px) clamp(16px,1.8vw,26px);text-align:center}
.nums li>b{
  display:block;font-family:var(--ff-en);font-size:clamp(28px,3.4vw,46px);font-weight:800;
  letter-spacing:-.045em;line-height:1;
  background:linear-gradient(120deg,#fff,#8FC4FF);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nums li>b sup{font-size:.42em;font-weight:700;vertical-align:super;letter-spacing:0;line-height:0}
.nums li>span{display:block;margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5}
@media (max-width:1000px){ .nums{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .nums{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================================
   SPEC TABLE
   ========================================================================== */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px)}
.spec__col{border-radius:20px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.spec__hd{
  padding:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg-soft);
}
.spec__hd h3{font-family:var(--ff-en);font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.02em}
.spec__hd span{font-size:12.5px;color:var(--muted)}
.spec table{font-size:14px}
.spec th,.spec td{padding:14px clamp(20px,2.2vw,28px);text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:38%;font-weight:600;color:var(--muted);font-size:13px}
.spec td{font-weight:600;letter-spacing:-.015em}
.spec tbody tr{transition:background .3s}
.spec tbody tr:hover{background:var(--bg-soft)}
@media (max-width:900px){ .spec{grid-template-columns:1fr} }

/* ==========================================================================
   COMPANY
   ========================================================================== */
.co__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(30px,4.4vw,80px);align-items:center}
.co__mark{position:relative;display:grid;place-items:center;padding:clamp(30px,4vw,60px);border-radius:26px;background:var(--bg-soft);overflow:hidden}
.co__mark::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 40%,rgba(47,107,243,.14),transparent 68%);
}
.co__mark img{position:relative;width:min(62%,300px)}
.co__vals{margin-top:clamp(26px,3vw,42px);display:grid;gap:1px;background:var(--line);border-radius:18px;overflow:hidden}
.co__vals li{background:#fff;padding:22px clamp(20px,2.2vw,28px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.co__vals em{font-style:normal;font-family:var(--ff-en);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--blue);white-space:nowrap}
.co__vals h4{font-size:15.5px;font-weight:700;letter-spacing:-.025em}
.co__vals p{margin-top:6px;font-size:13.5px;line-height:1.75;color:var(--muted)}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4vw,56px)}
.team li{padding:26px 22px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.team .yr{font-family:var(--ff-en);font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.045em;color:var(--navy);line-height:1}
.team .yr sup{font-size:.4em;font-weight:700;margin-left:2px}
.team h4{margin-top:12px;font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.team p{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.6}
@media (max-width:900px){ .co__grid{grid-template-columns:1fr} .team{grid-template-columns:1fr 1fr} }

/* roadmap */
.road{margin-top:clamp(40px,4.6vw,70px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.road li{position:relative;padding-top:30px}
.road li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.road li::after{
  content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px var(--line);
}
.road li.is-now::before{background:linear-gradient(90deg,var(--blue),rgba(47,107,243,.2))}
.road li.is-now::after{background:var(--blue);box-shadow:0 0 0 2px var(--blue),0 0 0 6px rgba(47,107,243,.18)}
.road em{font-style:normal;font-family:var(--ff-en);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--muted-2)}
.road li.is-now em{color:var(--blue)}
.road h4{margin-top:10px;font-size:15.5px;font-weight:700;letter-spacing:-.025em}
.road p{margin-top:8px;font-size:13px;line-height:1.7;color:var(--muted)}
@media (max-width:820px){ .road{grid-template-columns:1fr 1fr} }

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.cta{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;text-align:center}
.cta::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 60% at 50% 8%,rgba(47,107,243,.4),transparent 62%),
    radial-gradient(40% 50% at 84% 92%,rgba(23,163,232,.22),transparent 66%);
}
.cta__inner{position:relative}
.cta .h1{margin-top:22px}
.cta .lead{margin:22px auto 0;max-width:52ch}
.cta__acts{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta__mail{
  margin-top:34px;display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-en);
  font-size:clamp(15px,1.7vw,22px);font-weight:600;letter-spacing:-.02em;color:#fff;
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.25);transition:border-color .4s;
}
.cta__mail:hover{border-color:#fff}

.ftr{background:var(--navy-deep);color:rgba(255,255,255,.56);padding:clamp(50px,6vw,80px) 0 34px;border-top:1px solid rgba(255,255,255,.08)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,48px)}
.ftr__brand img{height:26px;width:auto;opacity:.95}
.ftr__brand p{margin-top:18px;font-size:13.5px;line-height:1.8;max-width:34ch}
.ftr__col h5{color:#fff;font-family:var(--ff-en);font-size:11px;font-weight:700;letter-spacing:.2em;margin-bottom:16px}
.ftr__col li{margin-bottom:10px}
.ftr__col a{font-size:13.5px;transition:color .3s}
.ftr__col a:hover{color:#fff}
.ftr__bot{
  margin-top:clamp(38px,4.4vw,62px);padding-top:26px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  font-size:12.5px;
}
.ftr__bot .mono{font-family:var(--ff-en);letter-spacing:.06em;font-size:11.5px;opacity:.7}
@media (max-width:820px){ .ftr__top{grid-template-columns:1fr 1fr} .ftr__brand{grid-column:1/-1} }

/* to-top */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:900;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;
  box-shadow:var(--shadow-m);
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--blue)}
.totop svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

/* hotspot open state (touch) */
.hs.is-open .hs__label{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:720px){ .hs.is-open .hs__label{display:block} }

/* screenshot / static capture mode */
.is-shot [data-reveal],.is-shot .split .ch{opacity:1!important;transform:none!important;transition:none!important}
.is-shot .vol__fill{transition:none!important}

.is-shot .hero{min-height:min(100svh,900px)}