:root {
  --bg:#05060d;
  --bg2:#0a0d1a;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14);
  --txt:#f6f7fb;
  --muted:#aeb4c2;
  --acc:#ff8a1f;
  --acc2:#ffb347;
  --cyan:#35d6ff;
  --ok:#4be3a2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1000px 520px at 12% -10%,rgba(104,79,255,.34),transparent 60%),
    radial-gradient(900px 520px at 85% -25%,rgba(255,66,184,.26),transparent 58%),
    radial-gradient(760px 420px at 50% 115%,rgba(255,138,31,.22),transparent 68%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  line-height:1.6;
}
body::before{
  content:"";position:fixed;inset:-30% -20%;pointer-events:none;z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, rgba(53,214,255,.08), rgba(255,138,31,.10), rgba(75,227,162,.08), rgba(53,214,255,.08));
  filter:blur(60px);
  animation:floatGlow 16s ease-in-out infinite alternate;
}
@keyframes floatGlow {from{transform:translateY(-20px) rotate(0)} to{transform:translateY(20px) rotate(10deg)}}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;background:rgba(7,8,11,.66);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:14px}
.brand{font-size:24px;font-weight:800;letter-spacing:.2px}.brand .e,.mark{color:var(--acc)}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
nav a{color:var(--muted);text-decoration:none;font-size:14px}
nav a:hover{color:#fff}
.lang-flags{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.03)}
.lang-flags a{font-size:16px;line-height:1;filter:grayscale(.1);opacity:.85;transition:transform .2s ease,opacity .2s ease;display:inline-flex;align-items:center;justify-content:center;min-width:18px}
.lang-flags a:hover,.lang-flags a.active{opacity:1;transform:translateY(-1px) scale(1.06)}
.nav-cta{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#151515;padding:8px 12px;border-radius:999px;font-weight:800;border:1px solid rgba(255,255,255,.18)}
.hero{padding:72px 0 36px;position:relative;transform:translateZ(0);overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;z-index:-1;filter:blur(2px)}
.hero::before{width:420px;height:420px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(255,138,31,.26),transparent 62%);animation:orbFloat 9s ease-in-out infinite alternate}
.hero::after{width:520px;height:2px;left:-80px;top:52%;background:linear-gradient(90deg,transparent,rgba(53,214,255,.65),transparent);animation:sweep 7s linear infinite}
@keyframes orbFloat{from{transform:translateY(0) translateX(0)}to{transform:translateY(24px) translateX(-20px)}}
@keyframes sweep{from{transform:translateX(-10%)}to{transform:translateX(120%)}}
.badge{display:inline-flex;gap:8px;border:1px solid rgba(255,138,31,.4);background:rgba(255,138,31,.08);color:#ffd8b2;border-radius:999px;padding:6px 10px;font-size:12px}
h1{font-size:clamp(32px,5.2vw,60px);line-height:1.05;margin:14px 0 12px;text-wrap:pretty}
.h2{font-size:clamp(24px,3vw,36px);line-height:1.2;margin:0 0 10px}
.lead{font-size:18px;color:var(--muted);max-width:820px}
.btn{display:inline-block;margin-top:16px;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#101114;text-decoration:none;padding:11px 15px;border-radius:12px;font-weight:800;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(255,138,31,.28);transition:transform .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,138,31,.38)}
.btn.secondary{background:transparent;color:var(--txt);border:1px solid var(--line);margin-left:10px;box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;backdrop-filter:blur(8px);transition:transform .28s ease,border-color .28s ease,background .28s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(255,138,31,.42);background:rgba(255,255,255,.09)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.kpi{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);padding:14px;border-radius:14px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:auto -20% -70% -20%;height:80px;background:radial-gradient(circle,rgba(255,138,31,.28),transparent 65%)}
.kpi b{font-size:24px;color:var(--acc2);letter-spacing:.3px}
.count{font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,138,31,.35)}
.quote{margin-top:16px;padding:12px 14px;border:1px solid rgba(53,214,255,.35);background:rgba(53,214,255,.09);border-radius:12px;color:#dcf7ff}
.clean-strip{margin-top:14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg,rgba(104,79,255,.22),rgba(255,66,184,.18),rgba(255,138,31,.18));font-weight:600}
.ticker{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04)}
.ticker-track{display:flex;gap:34px;padding:10px 16px;white-space:nowrap;min-width:max-content;animation:tickerMove 20s linear infinite}
.ticker-item{color:#d7dcef;font-size:14px}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section{padding:10px 0 34px}.muted{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{background:rgba(255,255,255,.04);border:1px solid var(--line);padding:14px;border-radius:12px;transition:transform .25s ease,border-color .25s ease}.step b{color:var(--ok)}
.step:hover{transform:translateY(-3px);border-color:rgba(75,227,162,.45)}
.video-wrap{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:260px;background:#070b14;margin-top:18px}
.code-window{box-shadow:inset 0 0 0 1px rgba(53,214,255,.12),0 20px 60px rgba(0,0,0,.45)}
.code-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.red{background:#ff5f57}.dot.amber{background:#ffbd2e}.dot.green{background:#28ca42}
.code-title{margin-left:8px;font-size:12px;color:#b9c2d8;letter-spacing:.4px}
.deploy-badge{margin-left:auto;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.deploy-badge.ok{color:#0f2c1f;background:linear-gradient(90deg,#4be3a2,#8af0c8)}
.deploy-badge.retry{color:#361f08;background:linear-gradient(90deg,#ffb347,#ffcf82)}
.deploy-title{padding:8px 12px;font-size:12px;color:#ffdcb8;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(90deg,rgba(255,138,31,.12),rgba(255,138,31,.02));letter-spacing:.35px}
.code-body{position:relative;padding:14px 16px 70px;min-height:248px;background:radial-gradient(120% 120% at 10% 0%,rgba(53,214,255,.08),transparent 45%),#060a12}
.code-stream{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12.5px;line-height:1.45;color:#91f9da;white-space:pre-wrap;opacity:.95;text-shadow:0 0 12px rgba(75,227,162,.16)}
.morph{color:#aaf8df}
.caret{color:var(--acc);font-weight:800;display:inline-block;min-width:8px}
.caret.edit{color:#ff7a00;filter:drop-shadow(0 0 6px rgba(255,122,0,.7));animation:caretBlink .42s steps(1,end) infinite}
@keyframes caretBlink{50%{opacity:.2}}
.glitch{color:#ffb347;text-shadow:0 0 12px rgba(255,138,31,.45)}
.sync-flash{animation:syncFlash .32s ease}
.scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(53,214,255,.65),transparent);filter:blur(.4px);animation:scanMove 3.4s linear infinite}
@keyframes scanMove{from{top:18%}to{top:86%}}
@keyframes syncFlash{0%{background:rgba(255,138,31,.15)}100%{background:transparent}}
.video-overlay{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;padding:14px 16px;background:linear-gradient(to top,rgba(0,0,0,.76),transparent 76%)}
.code-claim{margin:0;font-weight:700;font-size:14px;color:#ffe5c8;text-shadow:0 0 14px rgba(255,138,31,.3)}
.cta-panel{background:linear-gradient(135deg,rgba(255,138,31,.15),rgba(255,255,255,.06));border-color:rgba(255,138,31,.35)}
.cta-sticky{position:fixed;right:16px;bottom:16px;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#121212;padding:12px 14px;border-radius:999px;text-decoration:none;font-weight:800;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.35);animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
footer{border-top:1px solid var(--line);margin-top:42px;padding:24px 0;color:var(--muted);font-size:14px}
.langs a{color:var(--txt);margin-right:10px}.langs a.active{color:var(--acc);font-weight:700}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media (max-width:920px){.grid,.kpis,.steps{grid-template-columns:1fr}.hero{padding-top:56px}.btn.secondary{margin-left:0}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}.reveal{opacity:1;transform:none}}


@media (max-width:920px){
  .nav{flex-direction:column;align-items:flex-start}
  nav{width:100%;gap:10px}
  .lang-flags{order:20;flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .lang-flags a{font-size:18px}
  .nav-cta{order:30}
  .video-wrap{min-height:220px}
  .code-body{min-height:200px;padding:12px 12px 58px}
  .code-stream{font-size:11.5px;line-height:1.4}
}