/* ==========================================================================
   Hitek Nova / TestPod — Redesign v2 (preview stylesheet)
   Brand system: 60/30/10 red-spark · Oswald display · Open Sans body · IBM Plex Mono data
   Preview loads fonts from Google CDN (matches the current homepage's approach);
   production cutover self-hosts these per DESIGN.md.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=Open+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F6F5F3; --ink:#14181E; --navy:#0E1A2B; --card:#FFFFFF;
  --slate:#5D6570; --line:#E4E3DF;
  --red:#DE1B32; --red-ink:#B3172A; --green:#1E9E63;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:'Oswald',"Bahnschrift","Arial Narrow",sans-serif;
  --maxw:1180px;
  --shadow:0 18px 50px rgba(20,24,30,.10);
  --m-bg:#0B1522; --m-panel:#0E1A2B; --m-cell:#122236; --m-cell-line:#1E3350;
  --m-sub:#7C8CA0; --m-txt:#D6DEE9;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#0C1017; --ink:#EDEEF1; --navy:#0A1420; --card:#141A22;
    --slate:#9AA3AE; --line:#232A32; --red:#F23349; --red-ink:#F23349;
    --shadow:0 20px 52px rgba(0,0,0,.55); }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--paper); color:var(--ink); line-height:1.62; font-size:16.5px;
  font-family:var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img{max-width:100%;}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.disp{ font-family:var(--disp); font-weight:600; line-height:1.06; text-transform:uppercase; letter-spacing:.005em; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
a{ color:var(--red-ink); text-decoration:none; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }

/* ---- top nav ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(246,245,243,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav .row{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:600; text-transform:uppercase;
  font-size:20px; letter-spacing:.03em; color:var(--ink); }
.brand .logo{ width:30px; height:30px; display:block; flex:none; }
.brand b{ font-weight:600; color:var(--ink); }
.nav nav{ display:flex; gap:30px; }
.nav nav a{ color:var(--slate); font-size:14.5px; font-weight:600; }
.nav nav a:hover{ color:var(--ink); }
.nav .acts{ display:flex; align-items:center; gap:18px; }
.nav .signin{ color:var(--slate); font-size:14.5px; font-weight:600; }
.nav .signin:hover{ color:var(--ink); }
@media(max-width:860px){ .nav nav{ display:none; } }

.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); text-transform:uppercase;
  font-weight:600; letter-spacing:.03em; font-size:15px; padding:12px 22px; border-radius:9px; cursor:pointer; border:0;
  background:var(--red); color:#fff; box-shadow:0 6px 20px rgba(222,27,50,.28); transition:transform .15s, box-shadow .15s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(222,27,50,.36); color:#fff; }
.btn.sm{ font-size:13.5px; padding:9px 16px; }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:none; border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--slate); color:var(--ink); }

/* ---- HERO (dark ink-navy band) ---- */
.hero{ position:relative; overflow:hidden; background:var(--navy); color:#EAF0F7; border-bottom:1px solid rgba(255,255,255,.06);
  background-image:
    radial-gradient(560px 280px at 84% -8%,rgba(242,51,73,.22),transparent 66%),
    radial-gradient(480px 300px at 8% 8%,rgba(30,158,99,.07),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px; }
.hero .wrap{ padding:76px 24px 84px; text-align:center; }
.hero .eyebrow{ color:#E0657A; }
.hero h1{ font-size:clamp(38px,7vw,78px); margin:18px auto 0; max-width:15ch; text-wrap:balance; color:#fff; }
.hero h1 .hl{ color:var(--red); }
.hero .sub{ font-size:clamp(16.5px,2.1vw,20px); color:#A9B7C6; max-width:56ch; margin:22px auto 0; line-height:1.6; }
.hero .ctas{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:34px; }
.hero .ghost{ color:#CBD6E2; border-color:rgba(255,255,255,.16); }
.hero .ghost:hover{ border-color:rgba(255,255,255,.34); color:#fff; }
.hero .trust{ display:inline-flex; align-items:center; gap:10px; margin-top:30px; font-size:13.5px; color:#9FB0C2; }
.hero .trust .tick{ width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none; }

/* ---- APP MOCKUP (live board) ---- */
.board-wrap{ margin:-52px auto 0; position:relative; z-index:2; max-width:1080px; padding:0 24px; }
.board{ background:var(--m-bg); border:1px solid var(--m-cell-line); border-radius:16px; overflow:hidden;
  box-shadow:0 40px 100px rgba(2,6,23,.45); }
.board-top{ display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--m-cell-line); background:var(--m-panel); }
.board-top .lights{ display:flex; gap:7px; }
.board-top .lights i{ width:11px;height:11px;border-radius:50%; display:block; }
.l-r{ background:#ED6A5E; } .l-y{ background:#F4BF4F; } .l-g{ background:#61C554; }
.board-title{ font-family:var(--disp); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:14px; color:#EAF0F7; display:flex; align-items:center; gap:10px; }
.board-title .badge{ font-family:var(--mono); font-weight:500; text-transform:none; letter-spacing:0; font-size:10.5px; color:#67E8A0; background:rgba(30,158,99,.16); border:1px solid rgba(30,158,99,.3); padding:2px 8px; border-radius:999px; }
.board-stat{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--m-sub); display:flex; align-items:center; gap:8px; }
.board-stat .dot{ width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 0 4px rgba(30,158,99,.16); }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--m-cell-line); padding:1px; }
@media(max-width:720px){ .grid{ grid-template-columns:repeat(2,1fr); } }
.cell{ background:var(--m-cell); padding:12px 12px 13px; min-height:104px; }
.cell-top{ display:flex; align-items:center; justify-content:space-between; }
.port{ font-family:var(--mono); font-size:11px; color:var(--m-sub); }
.st{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:999px; }
.st.wipe{ color:#F23349; background:rgba(242,51,73,.12); border:1px solid rgba(242,51,73,.28); }
.st.test{ color:#F4BF4F; background:rgba(244,191,79,.12); border:1px solid rgba(244,191,79,.28); }
.st.done{ color:#67E8A0; background:rgba(30,158,99,.14); border:1px solid rgba(30,158,99,.3); }
.st.idle{ color:#7C8CA0; background:rgba(124,140,160,.12); border:1px solid rgba(124,140,160,.24); }
.model{ display:flex; align-items:center; gap:7px; margin-top:9px; }
.model svg{ width:13px; height:13px; fill:var(--m-txt); opacity:.85; }
.model span{ font-size:12.5px; font-weight:600; color:var(--m-txt); }
.meta{ display:flex; flex-direction:column; gap:2px; margin-top:7px; font-family:var(--mono); font-size:10.5px; color:var(--m-sub); }
.meta b{ color:#B9C6D6; font-weight:600; }
.bar{ height:5px; background:rgba(255,255,255,.07); border-radius:20px; overflow:hidden; margin-top:9px; }
.bar i{ display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#DE1B32,#F23349); }
.doneline{ display:flex; align-items:center; gap:6px; margin-top:9px; font-size:11px; font-weight:600; color:#67E8A0; }
.doneline svg{ width:13px;height:13px;fill:none;stroke:#67E8A0;stroke-width:3.2; }

/* ---- PROOF STRIP ---- */
.proof{ border-bottom:1px solid var(--line); }
.proof .wrap{ padding:30px 24px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  font-family:var(--disp); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--slate); }
.proof .lead{ color:var(--ink); }
.proof .sep{ width:4px;height:4px;border-radius:50%;background:var(--line); }

/* ---- SECTIONS ---- */
section.band{ padding:78px 0; border-bottom:1px solid var(--line); }
.sec-head{ max-width:640px; }
.sec-head h2{ font-size:clamp(28px,4.2vw,44px); margin:10px 0 0; }
.sec-head h2 .hl{ color:var(--red); }
.sec-head p{ color:var(--slate); font-size:17px; margin:14px 0 0; max-width:56ch; }

/* bento features */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
@media(max-width:840px){ .bento{ grid-template-columns:1fr; } }
.fcard{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow); }
.fcard .ic{ width:46px;height:46px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  background:var(--navy); color:#fff; }
.fcard .ic svg{ width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2; }
.fcard h3{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:21px; margin:18px 0 0; color:var(--ink); letter-spacing:.01em; }
.fcard p{ color:var(--slate); font-size:15px; margin:10px 0 0; }
.fcard .tick{ color:var(--green); font-weight:700; }

/* pricing / built-for band */
.pricing{ background:var(--paper); }
.pcard{ margin-top:40px; display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:var(--card); }
@media(max-width:840px){ .pcard{ grid-template-columns:1fr; } }
.pcard .left{ padding:40px; }
.pcard .left .eyebrow{ color:var(--red-ink); }
.pcard .left h3{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:clamp(24px,3.4vw,34px); margin:12px 0 0; color:var(--ink); }
.pcard .left h3 em{ font-style:normal; color:var(--red); }
.pcard .left p{ color:var(--slate); font-size:15.5px; margin:14px 0 0; max-width:44ch; }
.plist{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:11px; }
.plist li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink); }
.plist .tick{ width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none;margin-top:1px; }
.pcard .right{ background:var(--navy); color:#EAF0F7; padding:40px; display:flex; flex-direction:column; justify-content:center;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:26px 26px,26px 26px; }
.pcard .right .price{ font-family:var(--disp); font-weight:600; font-size:64px; line-height:1; color:#fff; }
.pcard .right .price small{ font-family:var(--mono); font-weight:400; font-size:15px; color:#9FB0C2; text-transform:none; letter-spacing:0; display:block; margin-top:8px; }
.pcard .right .u{ color:#A9B7C6; font-size:14px; margin:18px 0 0; }
.pcard .right .u b{ color:#fff; }
.pcard .right .btn{ margin-top:24px; justify-content:center; }
.pcard .right .fine{ font-family:var(--mono); font-size:12px; color:#7C8CA0; margin-top:14px; text-align:center; }

/* footer */
footer.site{ background:var(--navy); color:#AEB9C6; }
footer.site .wrap{ padding:56px 24px 30px; }
.fgrid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
@media(max-width:760px){ .fgrid{ grid-template-columns:1fr 1fr; } }
.fbrand{ display:flex; align-items:center; gap:12px; }
footer.site h4{ font-family:var(--disp); font-weight:600; text-transform:uppercase; color:#fff; font-size:22px; margin:0; letter-spacing:.03em; }
footer.site h5{ font-family:var(--disp); font-weight:600; text-transform:uppercase; color:#E6ECF3; font-size:13px; letter-spacing:.08em; margin:0 0 14px; }
footer.site p{ font-size:14px; color:#8FA1B5; margin:12px 0 0; max-width:34ch; }
footer.site ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
footer.site ul a{ color:#AEB9C6; font-size:14px; }
footer.site ul a:hover{ color:#fff; }
.fbottom{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:#7C8CA0; }
.fbottom .mono{ color:#8FA1B5; }

.preview-flag{ background:var(--red); color:#fff; text-align:center; font-family:var(--mono); font-size:12px;
  letter-spacing:.05em; padding:7px 12px; }
.preview-flag a{ color:#fff; text-decoration:underline; }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }