:root{
  --e-txt:#d4d4d4; --e-dim:#565656;
  --e-com:#6a9955; --e-on:#4ec9b0; --e-off:#ce9178; --e-lb:#7aa2c7; --e-num:#b5cea8;
  --bg-op:.18;
}
/* website-wide code editor background (angled plane) */
.bg-editor{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:var(--bg-op);font-family:var(--mono);perspective:1400px;perspective-origin:44% 48%}
.bg-editor::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(20,20,20,.5) 0%,transparent 24%,transparent 68%,rgba(20,20,20,.75) 100%),
    linear-gradient(90deg,transparent 0%,transparent 60%,rgba(20,20,20,.5) 86%,rgba(20,20,20,.82) 100%)}
.bg-plane{position:absolute;inset:0;
  transform:rotateX(14deg) rotateY(-8deg) rotateZ(1deg) scale(1.42);transform-origin:44% 50%}
.bg-scroll{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:56px 1fr;
  transition:transform .55s ease;will-change:transform}
.bg-gut{font-size:.98rem;line-height:2.05;color:var(--e-dim);text-align:right;
  padding:26px 14px 0 0;white-space:pre;user-select:none}
.bg-code{font-size:.98rem;line-height:2.05;padding:26px 0 120px 20px;white-space:pre;color:var(--e-txt)}
.bg-code i{font-style:normal}
.bg-code i.co{color:var(--e-com)} .bg-code i.on{color:var(--e-on)} .bg-code i.off{color:var(--e-off)}
.bg-code i.lb{color:var(--e-lb)} .bg-code i.nu{color:var(--e-num)}
.bg-code .cur{color:#fff}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--gold);vertical-align:-0.2em;
  margin-left:1px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ac{position:absolute;z-index:6;min-width:250px;max-width:340px;background:#252526;border:1px solid #454545;
  border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.55);font-size:.82rem;overflow:hidden;
  opacity:0;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease}
.ac.show{opacity:1;transform:none}
.ac .r{display:flex;align-items:center;gap:9px;padding:4px 11px;color:#c9c9c9;white-space:nowrap}
.ac .r.sel{background:#04395e}
.ac .r .ic{width:14px;height:14px;border-radius:3px;flex:0 0 auto;font-size:.56rem;font-weight:800;
  text-align:center;line-height:14px;color:#161616}
.ac .r .ic.k{background:#c586c0} .ac .r .ic.v{background:#75beff} .ac .r .ic.f{background:#dcb67a}
.ac .r .m{color:var(--gold);font-weight:700}
.ac .r .d{color:#7c7c7c;margin-left:auto;padding-left:18px;font-size:.72rem}

.page{position:relative;z-index:1}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:150px 26px 110px;text-align:center}
.hero .eyebrow{text-shadow:0 2px 22px rgba(15,15,15,.9);margin-bottom:22px}
.hero h1{font-size:clamp(3.6rem,12vw,7.5rem);line-height:.98;letter-spacing:-0.035em;
  text-shadow:0 3px 26px rgba(15,15,15,.9),0 0 6px rgba(15,15,15,.7)}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--mono);
  font-size:.66rem;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

/* content sections — text + image side by side, with placeholders for now */
.lbl{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
section.blk{max-width:var(--wrap);margin:0 auto;padding:120px 26px}
.blk h2{font-size:clamp(1.7rem,3.4vw,2.35rem);color:#fff;margin:16px 0 0}
.blk p.lead{color:var(--muted);font-size:1.06rem;max-width:46ch;margin:16px 0 0}
.imgph{border:1px dashed #3a3a3a;border-radius:12px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 14px,transparent 14px 28px),rgba(28,28,28,.86);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  padding:26px;min-height:240px;font-family:var(--mono);color:var(--faint)}
.imgph .big{font-size:.98rem;color:var(--muted)}
.imgph .small{font-size:.72rem}
.imgph.wide{min-height:clamp(240px,44vw,460px)}
.ph-wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px 30px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat:not(:first-of-type){margin-top:100px}
.feat.flip .txt{order:2}
@media (max-width:760px){
  .bg-plane{transform:rotateX(12deg) rotateY(-6deg) scale(1.6)}
  .hero{padding:120px 18px 84px}
  section.blk{padding:72px 18px}
  .feat,.feat.flip .txt{grid-template-columns:1fr;order:0;gap:24px}
  .feat:not(:first-of-type){margin-top:56px}
}