:root{
  --bg:#000000;
  --muted:#b2b1b1;
  --accent:#ffffff;
  --screenshot-w:520px;
  --screenshot-h:320px;
  --screenshot-max:92vw;
  --gutter:8px;
  --browser-border:2px;
}
*{box-sizing:border-box}
body{font-family:monospace; background:var(--bg); color:var(--accent); margin:0}
.page{max-width:980px;margin:0px auto;padding:0px;padding-top:180px}
.hero{text-align:center;padding:48px 0;position:fixed;top:0;left:0;right:0;background:var(--bg);z-index:50;border-bottom:1px solid rgba(255,255,255,0.1)}
.hero h1{font-family:'Special Elite', monospace;font-size:28px;letter-spacing:1px;margin:0}
.hero .sub{font-size:18px;color:var(--muted);margin-top:12px}
.hero h1 #type-text{white-space:pre-wrap;word-break:break-word}
.cursor{display:inline-block;margin-left:6px;color:var(--accent);animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
.cta{margin-top:14px;display:flex;gap:8px;justify-content:center}
.btn{display:inline-block;padding:8px 14px;border-radius:6px;border:1px solid #bbb;background:transparent;color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.btn:hover{border-color:#ffffff;transform: scale(1.05);}
.btn-primary{background:#ffffff;color:#000000;border-color:#111}
.btn-primary:hover{background:#ffffff}
.brand{position:fixed;top:10px;left:16px;font-family:'Special Elite',monospace;font-size:14px;color:var(--accent);letter-spacing:0.5px;z-index:100}
.grid{display:flex;flex-direction:column;gap:48px;margin-top:18px}
.card{display:grid;grid-template-columns:minmax(0, var(--screenshot-w)) 1fr;gap:var(--gutter);align-items:center;grid-template-areas:"image text"}
.card.right{grid-template-columns:1fr minmax(0, var(--screenshot-w));grid-template-areas:"text image"}
.screenshot{background:transparent;border-radius:8px;padding:0px;min-width:0;grid-area:image}
/* .screenshot{margin:0} */
.screenshot img,.content img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover;border-radius:6px}

.browser-mock{border:var(--browser-border) dotted #bbb;padding:0;border-radius:8px;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,0.03)}
.browser-mock .bar{height:12px;display:flex;gap:6px;align-items:center;margin-bottom:6px}
.browser-mock .bar span{width:12px;height:12px;border-radius:50%;display:inline-block;background:#444}
.content{width:var(--screenshot-w);max-width:var(--screenshot-max);height:var(--screenshot-h);min-height:160px;aspect-ratio:16/9;overflow:hidden;border-radius:6px;min-width:0}
.text{min-width:0;display:flex;flex-direction:column;justify-content:center}
.text{min-width:0;display:flex;flex-direction:column;justify-content:center;grid-area:text}
.svg-placeholder svg{width:100%;height:100%;display:block}
.label{font-size:12px;color:var(--muted);margin-top:4px}
.text h2{font-family:'Special Elite', monospace;font-size:18px;margin:0 0 8px 0}
.foot{margin-top:36px;color:var(--muted);font-size:13px;text-align:center}
.text ol { margin: 10px 0; padding-left: 44px; color: var(--muted); font-size: 13px; }.foot{margin-top:36px;color:var(--muted);font-size:13px;text-align:center}

@media (max-width:880px){
  .page{padding:20px;padding-top:160px}
  .hero{padding:32px 20px}
  .card, .card.right{
    grid-template-columns:1fr;
    grid-template-areas:"image" "text";
    gap:16px;
  }
  .content{width:100%;min-height:200px;height:auto;max-width:100%}
  .screenshot{padding:0;min-height:200px}
  .screenshot img{height:auto;min-height:200px}
  .text{justify-content:flex-start;padding-top:8px}
  .hero h1{font-size:20px}
}