:root{
  --bg:#071b2f;
  --fg:#d7f3ff;
  --muted:rgba(215,243,255,.65);
  --line:rgba(215,243,255,.18);
  --line2:rgba(215,243,255,.10);
  --accent:#62f0ff;
  --shadow: 0 22px 70px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(900px 700px at 18% -10%, rgba(98,240,255,.18), transparent 55%),
    radial-gradient(900px 700px at 85% 10%, rgba(215,243,255,.10), transparent 60%),
    linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px, calc(100% - 40px)); margin:0 auto;}

/* blueprint grid */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(215,243,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(215,243,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.7;
}
body:after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(215,243,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(215,243,255,.03) 1px, transparent 1px);
  background-size:12px 12px;
  opacity:.8;
  mix-blend-mode:screen;
}

.top{position:sticky;top:0;z-index:20;background:rgba(7,27,47,.65);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.top-in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.sig{width:10px;height:10px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 6px rgba(98,240,255,.12)}
.b1{font-family:"IBM Plex Mono", monospace;font-weight:600;letter-spacing:.08em}
.nav{display:none;gap:14px;align-items:center}
@media(min-width:900px){.nav{display:flex}}
.a{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.08em;color:rgba(215,243,255,.72);padding:10px 10px;border-radius:10px}
.a:hover{background:rgba(215,243,255,.06)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;font-weight:700;font-size:13px;border:1px solid rgba(98,240,255,.30);background:rgba(215,243,255,.06)}
.btn2{background:linear-gradient(135deg, rgba(98,240,255,.18), rgba(215,243,255,.06))}
.ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:rgba(215,243,255,.88)}
.w{width:100%}

.hero{padding:70px 0 22px}
.hero-in{display:grid;gap:16px;align-items:start}
@media(min-width:980px){.hero-in{grid-template-columns:1.05fr .95fr}}
.k{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(98,240,255,.88)}
.h1{margin:12px 0 0;font-weight:800;letter-spacing:-.6px;font-size:clamp(34px,4.5vw,62px);line-height:1.02}
.p{margin:12px 0 0;color:rgba(215,243,255,.72);line-height:1.75;max-width:70ch}
.cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.chips{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:"IBM Plex Mono", monospace;font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:8px 12px;background:rgba(215,243,255,.05)}

.plan{border:1px solid rgba(98,240,255,.28);background:rgba(0,0,0,.18);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.plan-h{padding:12px 14px;border-bottom:1px solid var(--line2);font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.12em;color:rgba(215,243,255,.78)}
.svg{width:100%;height:auto;display:block}
.o{fill:rgba(0,0,0,.16);stroke:rgba(98,240,255,.55);stroke-width:2}
.r{fill:rgba(98,240,255,.08);stroke:rgba(215,243,255,.40);stroke-width:1.5}
.t{fill:rgba(215,243,255,.72);font-family:"IBM Plex Mono", monospace;font-size:14px;letter-spacing:.10em}
.plan-f{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line2)}
.m b{display:block}
.m span{display:block;color:rgba(215,243,255,.65);font-family:"IBM Plex Mono", monospace;font-size:12px;margin-top:4px}

.sec{padding:64px 0}
.head{max-width:74ch}
.ey{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(98,240,255,.88)}
.h2{margin:10px 0 0;font-weight:800;letter-spacing:-.2px;font-size:clamp(22px,3vw,36px)}

.filters{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.f{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.12em;border:1px solid var(--line2);background:rgba(215,243,255,.05);border-radius:12px;padding:10px 12px;cursor:pointer;color:rgba(215,243,255,.88)}
.f.is-on{border-color:rgba(98,240,255,.45);box-shadow:0 0 0 4px rgba(98,240,255,.10) inset}

.grid{margin-top:14px;display:grid;gap:10px}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.card{width:100%;text-align:left;border-radius:14px;border:1px dashed rgba(215,243,255,.28);background:rgba(0,0,0,.14);padding:12px;cursor:pointer;color:var(--fg)}
.code{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.14em;color:rgba(98,240,255,.88)}
.title{margin-top:10px;font-weight:800}
.spec{margin-top:6px;color:rgba(215,243,255,.70);font-family:"IBM Plex Mono", monospace;font-size:12px}
.price{margin-top:12px;font-weight:800}

.specs{margin-top:14px;border:1px solid var(--line2);background:rgba(0,0,0,.14);border-radius:16px;overflow:hidden}
.specs .row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px dashed rgba(215,243,255,.18)}
.specs .row:last-child{border-bottom:none}
.specs span{font-family:"IBM Plex Mono", monospace;color:rgba(215,243,255,.70)}

.contact{margin-top:14px;display:grid;gap:12px}
@media(min-width:980px){.contact{grid-template-columns:1.1fr .9fr;align-items:start}}
.form{border:1px solid rgba(215,243,255,.20);background:rgba(0,0,0,.14);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.two{display:grid;gap:10px}
@media(min-width:760px){.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f2{display:grid;gap:6px;margin-top:10px}
.f2 label{font-family:"IBM Plex Mono", monospace;font-size:12px;color:rgba(215,243,255,.70)}
.f2 input,.f2 textarea,.f2 select{width:100%;border-radius:14px;border:1px solid rgba(215,243,255,.18);background:rgba(7,27,47,.45);padding:12px;color:var(--fg);outline:none}
.f2 input:focus,.f2 textarea:focus,.f2 select:focus{border-color:rgba(98,240,255,.55);box-shadow:0 0 0 5px rgba(98,240,255,.12)}
.fine{margin-top:10px;font-size:12px;color:rgba(215,243,255,.65);font-family:"IBM Plex Mono", monospace}
.aside{border:1px solid rgba(98,240,255,.22);background:rgba(98,240,255,.07);border-radius:16px;padding:14px}
.ak{font-family:"IBM Plex Mono", monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(98,240,255,.88);margin-top:12px}
.ak:first-child{margin-top:0}
.av{margin-top:8px;color:rgba(215,243,255,.72);line-height:1.65}

.foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:rgba(215,243,255,.65);font-size:12px;font-family:"IBM Plex Mono", monospace}

.modal{position:fixed; inset:0; display:none; z-index:60}
.modal.on{display:block}
.m-bg{position:absolute; inset:0; background:rgba(0,0,0,.62)}
.m-card{position:relative; width:min(980px, calc(100% - 24px)); margin: 8vh auto 0; background:rgba(7,27,47,.96); border-radius:16px; overflow:hidden; border:1px solid rgba(215,243,255,.18); box-shadow:var(--shadow)}
.m-card img{width:100%; height: min(52vh, 520px); object-fit:cover; display:block; filter:saturate(.95) contrast(1.02)}
.m-body{padding:14px 14px 18px}
.m-code{font-family:"IBM Plex Mono", monospace;letter-spacing:.14em;color:rgba(98,240,255,.88);font-size:12px}
.m-title{margin-top:10px;font-weight:800}
.m-sub{margin-top:6px;color:rgba(215,243,255,.72);font-family:"IBM Plex Mono", monospace;font-size:12px}
.m-price{margin-top:12px;font-weight:800}
.m-note{margin-top:10px;color:rgba(215,243,255,.65);font-size:12px;line-height:1.6}
.m-x{position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:12px; border:1px solid rgba(215,243,255,.18); background:rgba(215,243,255,.08); cursor:pointer; font-size:20px; line-height:1; color:var(--fg)}

[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .65s ease, transform .65s ease;}
[data-reveal].is-in{opacity:1; transform: translateY(0)}

@media(max-width:540px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}