:root{
  --bg:        #04060F;
  --panel:     #0A0F1E;
  --panel-2:   #0D1428;
  --line:      rgba(125,150,215,.14);
  --gold:      #E8B34B;
  --gold-soft: #F2CE85;
  --blue:      #4C8DFF;
  --cyan:      #38E1FF;
  --green:     #3DE8A0;
  --text:      #EDF0F7;
  --muted:     #8C94A9;

  --font-sans: 'Onest', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --reveal-1: 1.45s;
  --reveal-2: 1.60s;
  --reveal-3: 1.75s;
  --reveal-sub: 2.0s;
  --reveal-cta: 2.15s;
  --reveal-hint: 2.7s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);

  overflow-x:hidden;
  overflow-x:clip;
}
::selection{background:rgba(232,179,75,.3)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero__scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 52% at 50% 44%, rgba(4,6,15,.6), transparent 70%);
}
.hero__inner{
  position:relative;z-index:2;text-align:center;
  max-width:1140px;padding:140px 24px 120px;
  pointer-events:none;
}
.hero__inner a,.hero__inner button{pointer-events:auto}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.26em;
  color:var(--muted);text-transform:uppercase;margin-bottom:34px;
  opacity:0;
}
.is-loaded .hero__eyebrow{animation:fadeUp .8s ease var(--reveal-1) forwards}
.hero__eyebrow::before,.hero__eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero__eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}

.hero__title{
  font-weight:800;
  font-size:clamp(48px,7.6vw,112px);
  line-height:.99;
  letter-spacing:-.032em;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line>span{display:inline-block;transform:translateY(114%)}
.is-loaded .hero__title .line:nth-child(1)>span{animation:lineUp 1s cubic-bezier(.19,.71,.19,1) var(--reveal-1) forwards}
.is-loaded .hero__title .line:nth-child(2)>span{animation:lineUp 1s cubic-bezier(.19,.71,.19,1) var(--reveal-2) forwards}
.is-loaded .hero__title .line:nth-child(3)>span{animation:lineUp 1s cubic-bezier(.19,.71,.19,1) var(--reveal-3) forwards}
@keyframes lineUp{to{transform:translateY(0)}}

.hero__title .w-outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(237,240,247,.55);
}
.hero__title .w-gold{
  font-style:italic;font-weight:800;
  background:linear-gradient(100deg,var(--gold) 20%,var(--gold-soft) 50%,var(--gold) 80%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s ease-in-out infinite;
  padding-right:.05em;
}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

.hero__sub{
  color:var(--muted);font-size:18px;line-height:1.7;font-weight:400;
  max-width:540px;margin:32px auto 42px;
  opacity:0;transform:translateY(14px);
}
.is-loaded .hero__sub{animation:fadeUp .8s ease var(--reveal-sub) forwards}
.hero__sub strong{color:var(--text);font-weight:600}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.hero__cta{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(14px);
}
.is-loaded .hero__cta{animation:fadeUp .8s ease var(--reveal-cta) forwards}

main .btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border-radius:12px;
  font-family:var(--font-sans);font-weight:700;font-size:15px;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn--gold{background:var(--gold);color:#171004}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(232,179,75,.35)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}

.hero__hint{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.34em;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;pointer-events:none;
}
.is-loaded .hero__hint{animation:fadeUp .8s ease var(--reveal-hint) forwards}
.hero__hint::after{
  content:"";width:1px;height:44px;
  background:linear-gradient(var(--gold),transparent);
  animation:drop 2.2s infinite;
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

.tldr{position:relative;padding:150px 40px 180px;max-width:1240px;margin:0 auto}
.tldr__card{
  position:relative;
  background:linear-gradient(160deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);border-radius:24px;
  padding:64px;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;
  transform-style:preserve-3d;transition:transform .25s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  opacity:0;transform:translateY(36px);
}
.tldr__card.in{animation:cardIn .9s cubic-bezier(.2,.65,.2,1) forwards}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
.tldr__card::before{
  content:"";position:absolute;inset:0;border-radius:24px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(232,179,75,.45),transparent 30%,transparent 70%,rgba(76,141,255,.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

.tldr__eyebrow{display:flex;align-items:baseline;gap:14px;margin-bottom:28px;font-family:var(--font-mono)}
.tldr__eyebrow .num{color:var(--gold);font-size:20px;font-weight:700}
.tldr__eyebrow .lbl{font-size:11px;letter-spacing:.3em;color:var(--muted)}

.tldr__text{font-size:19px;line-height:1.78;color:var(--muted);font-weight:400}
.tldr__text mark{background:none;color:var(--text);font-weight:600}
.tldr__text .hl-gold{color:var(--gold)}
.tldr__text .hl-blue{color:var(--blue)}

.tldr__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}
.stat{border:1px solid var(--line);border-radius:14px;padding:18px 16px;background:rgba(255,255,255,.02)}
.stat b{
  display:block;font-weight:800;font-size:32px;color:var(--text);
  line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat small{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

.hero-card{
  align-self:center;
  background:#070C1A;
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(76,141,255,.06);
  transform:translateZ(30px);
}
.hero-card__head{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.hero-card__dots{display:flex;gap:7px}
.hero-card__dots i{width:11px;height:11px;border-radius:50%}
.hero-card__dots i:nth-child(1){background:#FF5F57}
.hero-card__dots i:nth-child(2){background:#FEBC2E}
.hero-card__dots i:nth-child(3){background:#28C840}
.hero-card__file{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.hero-card__live{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--green);
  border:1px solid rgba(61,232,160,.35);border-radius:999px;padding:4px 11px;
  background:rgba(61,232,160,.06);
}
.hero-card__live i{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.hero-card__code{
  padding:22px 24px;
  font-family:var(--font-mono);font-size:13px;line-height:1.75;
  overflow-x:auto;
}

.code-line{white-space:pre;overflow:hidden;width:0}
.tldr__card.in .code-line{
  width:calc(var(--n) * 1ch);
  animation:typeLine calc(var(--n) * 24ms) steps(var(--n)) var(--d) both;
}
@keyframes typeLine{from{width:0}}

.hero-card__caret{
  display:inline-block;width:.62em;height:1.05em;vertical-align:text-bottom;
  background:var(--gold);opacity:0;
}
.tldr__card.in .hero-card__caret{
  animation:caretShow .1s linear var(--caret-delay,3.4s) forwards,
            caretBlink 1.05s steps(1) calc(var(--caret-delay,3.4s) + .1s) infinite;
}
@keyframes caretShow{to{opacity:1}}
@keyframes caretBlink{50%{opacity:0}}

.tk-c{color:#5B6B8C;font-style:italic}
.tk-f{color:#7FB0FF}
.tk-k{color:#C792EA}
.tk-s{color:#E8B34B}
.tk-v{color:#38E1FF}
.tk-o{color:#8C94A9}

.hero-card__status{
  display:flex;align-items:center;gap:10px;
  padding:13px 20px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  background:rgba(61,232,160,.03);
  opacity:.35;transition:opacity .6s ease, background .6s ease, color .6s ease;
}
.tldr__card.in.typed .hero-card__status{
  opacity:1;background:rgba(61,232,160,.07);color:var(--green);
}
.hero-card__status i{
  width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 10px var(--green);
}

@media(max-width:980px){
  .site-nav{padding:14px 20px}
  .site-nav__links{display:none}
  .hero__inner{padding:120px 20px 130px}
  .hero__title{font-size:clamp(42px,11.5vw,66px)}
  .tldr{padding:90px 20px 130px}
  .tldr__card{grid-template-columns:1fr;padding:38px 24px;gap:44px}
  .stat b{font-size:24px}
  .hero-card__code{font-size:11.5px;padding:18px 16px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__title .line>span{transform:none}
  .hero__eyebrow,.hero__sub,.hero__cta,.hero__hint{opacity:1;transform:none}
  .tldr__card{opacity:1;transform:none}
  .code-line{width:auto!important;animation:none!important}
  .hero-card__caret{opacity:1;animation:none!important}
  .hero-card__status{opacity:1}
}