/* landing page */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(16px,4vw,48px);background:rgba(3,6,12,.7);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav nav{display:flex;gap:28px}
.nav nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:500}
.nav nav a:hover{color:var(--text)}
.btn.sm{padding:9px 16px;font-size:13px}
main{position:relative;z-index:1}
section{padding-inline:clamp(16px,5vw,64px)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;max-width:1240px;margin:0 auto;padding-top:72px;padding-bottom:56px;min-height:calc(100vh - 70px)}
h1{font:700 clamp(40px,5.6vw,72px)/1.02 var(--display);letter-spacing:-.035em;margin:18px 0 22px}
h1 .hl{background:linear-gradient(90deg,var(--cyan),#9fdcff 50%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:18px;color:var(--muted);max-width:560px;margin:0 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:22px;font-size:12px;color:var(--faint);letter-spacing:.08em}
.hero-visual{position:relative;aspect-ratio:1;max-width:540px;width:100%;justify-self:center}
.orb{position:absolute;inset:8%}
.orb svg{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(79,227,255,.35))}
.orb-label{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:var(--cyan)}
.spin{transform-origin:200px 200px;animation:spin 14s linear infinite}
.spin-rev{transform-origin:200px 200px;animation:spin 22s linear infinite reverse}
.spin-slow{transform-origin:200px 200px;animation:spin 60s linear infinite}
.pulse{transform-origin:200px 200px;animation:pulse 3.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.12);opacity:.8}}
.hud{position:absolute;padding:12px 16px;display:flex;flex-direction:column;gap:2px;min-width:170px;border-color:var(--line-strong);animation:float 6s ease-in-out infinite}
.hud .k{font-size:10px;letter-spacing:.16em;color:var(--muted)}
.hud b{font-size:26px;font-weight:500;color:var(--text)}
.hud .up{font-size:11px;color:var(--green)}.hud .dim,.dim{color:var(--faint);font-size:11px}
.c1{top:6%;left:-4%}.c2{top:18%;right:-6%;animation-delay:-2s}.c3{bottom:16%;left:-8%;animation-delay:-4s}.c4{bottom:4%;right:0;animation-delay:-1s}
@keyframes float{50%{transform:translateY(-8px)}}
.tools{max-width:1240px;margin:0 auto;padding-block:28px;border-block:1px solid var(--line);display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.tools .dim{letter-spacing:.16em}
.tool-row{display:flex;gap:28px;flex-wrap:wrap;color:var(--muted);font:600 15px var(--display)}
.block{max-width:1240px;margin:0 auto;padding-block:100px}
.block h2,.final h2{font:600 clamp(30px,3.6vw,46px)/1.1 var(--display);letter-spacing:-.025em;margin:14px 0 14px;max-width:760px}
.sub{color:var(--muted);font-size:17px;max-width:640px;margin:0 0 28px}
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.mod{text-align:left;padding:24px;transition:.25s;border-color:var(--line)}
.mod:hover{border-color:var(--cyan);box-shadow:var(--glow);transform:translateY(-3px)}
.mod i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);font-size:18px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 25%,transparent)}
.mod h3{font:600 18px var(--display);margin:18px 0 6px}
.mod p{color:var(--muted);font-size:14px;margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.compare{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.compare .col{padding:28px}
.compare .col.on{background:linear-gradient(160deg,rgba(79,227,255,.12),rgba(47,123,255,.06));border-left:1px solid var(--line-strong)}
.compare .k{font-size:10.5px;letter-spacing:.16em;color:var(--muted)}
.compare .on .k{color:var(--cyan)}
.compare ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px}
.compare li{font-size:14.5px;color:var(--muted);padding-left:22px;position:relative}
.compare li::before{content:"–";position:absolute;left:0;color:var(--faint)}
.compare .on li{color:var(--text)}.compare .on li::before{content:"✓";color:var(--green)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.step{padding:28px}.step .n{color:var(--cyan);font-size:13px}
.step h3{font:600 22px var(--display);margin:14px 0 8px}.step p{color:var(--muted);margin:0}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);border:1px solid var(--line-strong);filter:saturate(.85) contrast(1.05);box-shadow:var(--glow)}
.final{max-width:1100px;margin:0 auto 100px;text-align:center;padding:72px 24px;border-color:var(--line-strong);background:radial-gradient(ellipse at 50% 0%,rgba(79,227,255,.16),transparent 70%),var(--panel)}
.final h2,.final .sub{margin-inline:auto}
.foot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:28px clamp(16px,5vw,64px);border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media (max-width:960px){
  .hero,.split,.about{grid-template-columns:1fr}
  .hero{padding-top:40px;min-height:auto}
  .hero-visual{max-width:420px}
  .modules{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .nav nav{display:none}
}
@media (max-width:560px){
  .modules{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}.compare .col.on{border-left:0;border-top:1px solid var(--line-strong)}
  .hud{min-width:0;padding:8px 10px}.hud b{font-size:18px}
  .c1{left:0}.c2{right:0}.c3{left:0}
  .block{padding-block:64px}
}