@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600&display=swap');

:root{
  --bg:#0D1015;
  --bg-raised:#151A21;
  --grid:rgba(255,255,255,0.045);
  --ink:#ECEDEF;
  --muted:#868C99;
  --cyan:#4FD1C5;
  --amber:#F5A623;
  --line:#242A33;
  --spot-x:50%;
  --spot-y:30%;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(600px circle at var(--spot-x) var(--spot-y), rgba(79,209,197,0.06), transparent 60%),
    repeating-linear-gradient(0deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent 44px),
    var(--bg);
  color:var(--ink);
  font-family:'Manrope', Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;}
.mono{font-family:'JetBrains Mono', monospace;}
.doc{max-width:980px;margin:0 auto;padding:0 28px;}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(13,16,21,0.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
header .doc{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{font-family:'JetBrains Mono', monospace;font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;}
.logo .cursor{display:inline-block;color:var(--cyan);animation:blink 1.1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
nav{display:flex;gap:26px;font-family:'JetBrains Mono', monospace;font-size:0.82rem;}
nav a{text-decoration:none;color:var(--muted);position:relative;padding:4px 0;}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--cyan);transition:width 0.25s ease;}
nav a:hover, nav a.active{color:var(--ink);}
nav a:hover::after, nav a.active::after{width:100%;}

/* terminal window */
.terminal{
  background:var(--bg-raised);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
}
.term-bar{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);}
.term-bar span{width:11px;height:11px;border-radius:50%;background:#3A4048;}
.term-bar span:nth-child(1){background:#e5564d;}
.term-bar span:nth-child(2){background:#e8b23d;}
.term-bar span:nth-child(3){background:#3fb862;}
.term-body{padding:20px 22px;font-family:'JetBrains Mono', monospace;font-size:0.87rem;color:#B7E7E0;min-height:120px;}
.term-body .line{margin-bottom:6px;}
.term-body .prompt{color:var(--cyan);}
.term-body .out{color:var(--muted);}
.term-cursor{display:inline-block;width:7px;height:1em;background:var(--cyan);vertical-align:text-bottom;animation:blink 0.9s step-end infinite;}

/* hero */
.hero{padding:64px 0 60px;}
.hero .coords{font-family:'JetBrains Mono', monospace;font-size:0.76rem;color:var(--muted);letter-spacing:0.02em;margin-bottom:18px;}
.hero .coords .dot{color:var(--cyan);}
.hero h1{
  font-family:'JetBrains Mono', monospace;font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.16;letter-spacing:-0.01em;
  max-width:16ch;margin-top:26px;
}
.hero p{margin-top:20px;max-width:50ch;color:var(--muted);font-size:1.05rem;}
.cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-block;padding:13px 24px;font-size:0.9rem;font-weight:600;text-decoration:none;border-radius:4px;font-family:'JetBrains Mono', monospace;transition:transform 0.15s ease, box-shadow 0.15s ease;}
.btn-primary{background:var(--cyan);color:#08221E;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(79,209,197,0.5);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--cyan);}

/* sections */
section{padding:60px 0;border-top:1px solid var(--line);}
.eyebrow{font-family:'JetBrains Mono', monospace;color:var(--cyan);font-size:0.8rem;}
.section-head h2{font-size:1.7rem;margin-top:10px;font-weight:600;}
.section-head p{color:var(--muted);margin-top:10px;max-width:56ch;}

/* pillar cards (home) */
.pillars{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.pillar{background:var(--bg);padding:26px 22px;}
.pillar .tag{font-family:'JetBrains Mono', monospace;font-size:0.74rem;color:var(--cyan);}
.pillar h3{margin-top:10px;font-size:1.05rem;font-weight:600;}
.pillar p{margin-top:8px;color:var(--muted);font-size:0.92rem;}

/* circuit process */
.process{margin-top:44px;position:relative;}
.process svg{width:100%;height:auto;display:block;}
.process-path{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.4s ease;}
.process-path.drawn{stroke-dashoffset:0;}
.process-node{fill:var(--bg-raised);stroke:var(--cyan);stroke-width:1.5;}
.process-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px;}
.process-labels div{font-family:'JetBrains Mono', monospace;font-size:0.78rem;color:var(--muted);text-align:center;}
.process-labels strong{display:block;color:var(--ink);font-size:0.86rem;margin-bottom:3px;}

/* items / pricing list */
.items{margin-top:26px;}
.item{display:grid;grid-template-columns:22px 1fr auto;gap:20px;padding:22px 4px;border-top:1px solid var(--line);cursor:pointer;transition:background 0.15s ease;}
.items .item:last-child{border-bottom:1px solid var(--line);}
.item:hover{background:var(--bg-raised);}
.item.selected{background:var(--bg-raised);}
.box{width:18px;height:18px;border:1.4px solid var(--cyan);margin-top:3px;display:flex;align-items:center;justify-content:center;font-size:0.72rem;color:var(--cyan);font-family:'JetBrains Mono', monospace;}
.item.disabled{cursor:default;}
.item h3{font-size:1rem;font-weight:600;}
.item p{color:var(--muted);font-size:0.9rem;margin-top:5px;max-width:46ch;}
.item .price{white-space:nowrap;font-family:'JetBrains Mono', monospace;font-size:0.9rem;text-align:right;padding-top:2px;}
.item .price small{display:block;color:var(--muted);font-size:0.72rem;font-weight:400;}
.total-bar{margin-top:4px;padding:22px 4px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'JetBrains Mono', monospace;font-size:0.92rem;}
.total-bar .label{color:var(--muted);}
.total-bar .value{color:var(--amber);font-weight:700;}

/* forms */
form{max-width:520px;margin-top:8px;}
.field{margin-bottom:20px;}
.field-label{display:block;font-family:'JetBrains Mono', monospace;font-size:0.78rem;color:var(--cyan);margin-bottom:8px;}
.field-label .sep{color:var(--muted);}
input[type=text],input[type=email],textarea{
  width:100%;background:var(--bg-raised);border:1px solid var(--line);color:var(--ink);
  padding:12px 13px;font-family:'Manrope', Arial, sans-serif;font-size:0.96rem;border-radius:4px;
}
input:focus,textarea:focus{outline:none;border-color:var(--cyan);}
textarea{min-height:100px;resize:vertical;}
.selected-note{font-family:'JetBrains Mono', monospace;font-size:0.84rem;color:var(--muted);margin-bottom:22px;}
.selected-note strong{color:var(--cyan);}
#confirm{display:none;margin-top:16px;color:var(--cyan);font-size:0.88rem;font-family:'JetBrains Mono', monospace;}

/* footer */
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:0.84rem;font-family:'JetBrains Mono', monospace;}
footer .doc{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* reveal + motion */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.hero h1,.hero p,.hero .cta-row{opacity:0;transform:translateY(14px);animation:rise 0.6s ease forwards;}
.hero p{animation-delay:0.1s;}
.hero .cta-row{animation-delay:0.2s;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}

@media (prefers-reduced-motion: reduce){
  .hero h1,.hero p,.hero .cta-row{animation:none;opacity:1;transform:none;}
  .reveal{transition:none;opacity:1;transform:none;}
  .process-path{transition:none;stroke-dashoffset:0;}
  .term-cursor,.logo .cursor{animation:none;}
}

@media (max-width:720px){
  .pillars{grid-template-columns:1fr;}
  .process-labels{grid-template-columns:repeat(2,1fr);}
  .item{grid-template-columns:18px 1fr;}
  .item .price{grid-column:2;text-align:left;margin-top:6px;}
}