/* ============================================================
   DEESTECH design system (v2) — shared across all pages.
   Fonts are loaded per-page: Space Grotesk + Source Serif 4.
   Themes: [data-theme="dark"] (default) / [data-theme="light"].
   ============================================================ */
:root{
  --bg:#080B11;--bg2:#0C1119;--surface:rgba(255,255,255,.035);--surface2:rgba(255,255,255,.06);
  --ink:#EEF1F5;--muted:#8A94A2;--faint:#5A6472;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.14);
  --accent:#6E9FCB;--accent-ink:#06121f;--orb:#2b4a6e;--orb2:#13233a;
  --display:"Archivo",system-ui,sans-serif;--serif:"Archivo",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;
}
html[data-theme="light"]{
  --bg:#F3F4F2;--bg2:#EBEDE9;--surface:rgba(12,20,32,.03);--surface2:rgba(12,20,32,.055);
  --ink:#111820;--muted:#5C6672;--faint:#95A0AC;--line:rgba(12,20,32,.11);--line2:rgba(12,20,32,.18);
  --accent:#2f6fb0;--accent-ink:#ffffff;--orb:#7ea8d4;--orb2:#dbe6f2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s ease,color .4s ease;min-height:100vh}
.wrap{width:min(1180px,90vw);margin:0 auto}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
a{color:var(--accent)}

/* faint column grid backdrop */
.grid-lines{display:none}

/* header */
header.site{position:fixed;top:0;left:0;right:0;z-index:40;padding:18px 0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(var(--bg),transparent);transition:background .4s}
header.site.solid{background:color-mix(in srgb,var(--bg) 88%,transparent)}
header.site .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{height:28px;width:auto}
.brand b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
nav.top{display:flex;align-items:center;gap:2px}
nav.top a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;padding:9px 14px;border-radius:10px;transition:.2s;white-space:nowrap}
nav.top a:hover,nav.top a.on{color:var(--ink);background:var(--surface2)}
nav.top a.ext::after{content:"↗";margin-left:5px;font-size:11px;opacity:.7}
.navwrap{display:flex;align-items:center;gap:5px}
.tgl,.navtoggle{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:.2s}
.tgl:hover,.navtoggle:hover{border-color:var(--accent);color:var(--accent)}
.navtoggle{display:none;font-size:19px}
@media(max-width:860px){
  .brand b{font-size:17px}
  .navtoggle{display:grid}
  nav.top{position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px 5vw 16px;
    background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);display:none}
  nav.top.open{display:flex}
  nav.top a{padding:14px 12px;font-size:15.5px;border-radius:10px}
}

/* newsletter band */
.news{text-align:center;padding:clamp(48px,7vw,92px) 0;border-top:1px solid var(--line)}
.news .k{display:block;margin-bottom:10px}
.news h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.02em;margin-bottom:10px}
.news>p{color:var(--muted);margin-bottom:22px}
.news form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input[type=email]{flex:1 1 220px;min-width:0;background:var(--surface2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;color:var(--ink);font-family:var(--display);font-size:15px}
.news input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.news .fine{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:14px;letter-spacing:.05em}
.news .done{font-family:var(--serif);font-size:20px;color:var(--ink)}
.hp{position:absolute;left:-5000px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.01em;text-decoration:none;padding:15px 28px;border-radius:999px;border:1px solid var(--line2);color:var(--ink);cursor:pointer;transition:.22s;background:transparent}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* hero */
.hero{position:relative;min-height:72vh;display:flex;align-items:center;overflow:hidden;padding:110px 0 22px}
.hero.short{min-height:auto;padding:140px 0 18px}
.orb{position:absolute;z-index:0;width:min(70vh,680px);height:min(70vh,680px);right:-16vw;top:44%;translate:0 -50%;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,color-mix(in srgb,var(--orb) 40%,#fff) 0%,var(--orb) 30%,var(--orb2) 58%,transparent 72%);
  filter:blur(6px);opacity:.2;animation:float 18s ease-in-out infinite}
.orb::after{content:"";position:absolute;inset:-16%;border-radius:50%;background:inherit;filter:blur(70px);opacity:.22}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3%) scale(1.045)}}
.hero .inner{position:relative;z-index:2;max-width:min(1080px,92vw)}
.hero .ey{margin-bottom:20px}
.hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(42px,8vw,104px);line-height:.96;letter-spacing:-.03em;margin-bottom:24px;max-width:16ch}
.hero.short h1{font-size:clamp(40px,6.5vw,76px)}
.hero h1 .em{font-style:normal;color:var(--accent)}
.hero p{font-size:clamp(16px,1.7vw,20px);line-height:1.6;color:var(--muted);max-width:52ch;margin-bottom:30px}

/* section + content */
.sec{position:relative;z-index:2;padding:clamp(64px,9vw,120px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:36px;border-bottom:1px solid var(--line);padding-bottom:18px}
.sec-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.025em}
.sec-head .mono{padding-bottom:6px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3.4vw,40px);margin:16px 0;position:relative;overflow:hidden}
.k{color:var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:12px}
.panel h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:14px}
.panel h3{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:5px}
.panel p{color:var(--muted);font-size:16.5px;line-height:1.65;margin-bottom:14px}.panel p:last-child{margin-bottom:0}
.panel strong{color:var(--ink);font-weight:600}
.panel .line{border:0;border-top:1px solid var(--line);margin:22px 0}

/* feature grid (spec cards) */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fcard{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--surface)}
.fcard .kk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px}
.fcard h3{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:6px}
.fcard p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}

/* numbered steps */
.steps{counter-reset:s;list-style:none;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:600;font-size:14px}
.steps h3{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:3px}
.steps p{color:var(--muted);margin:0}

/* data table */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:6px 0}
table.dt{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
table.dt th,table.dt td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.dt th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
table.dt td:first-child{font-family:var(--mono);color:var(--ink);white-space:nowrap}
table.dt td{color:var(--muted)}table.dt tr:last-child td{border-bottom:0}

/* device screenshot frame */
.shot{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:14px;position:relative;overflow:hidden}
.shot img{display:block;width:100%;height:auto;border-radius:14px}

/* app grid */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.app{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  text-decoration:none;color:inherit;position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s}
.app:hover{transform:translateY(-4px);border-color:var(--line2);background:var(--surface2)}
.app .top{display:flex;align-items:center;justify-content:space-between}
.app .ico{width:56px;height:56px;border-radius:15px;padding:9px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center}
.app .ico img{width:100%;height:100%;object-fit:contain}
.app .ico.lett{padding:0;font-family:var(--display);font-weight:800;font-size:24px;color:var(--accent);line-height:1}
.app .badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.app .badge.live{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.app .badge.soon{color:var(--faint)}
.app h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.app p{color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:-4px}
.app .go{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.app:hover .go{color:var(--accent)}

/* contact band */
.contact{text-align:center;padding:clamp(64px,9vw,130px) 0}
.contact h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.02em;margin-bottom:14px}
.contact h2 .em{font-style:normal;color:var(--accent)}
.contact p{color:var(--muted);font-size:17px;margin-bottom:28px}

/* footer */
footer.site{border-top:1px solid var(--line);padding:26px 0;position:relative;z-index:2}
footer.site .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer.site a{color:var(--muted);text-decoration:none;font-size:13px}
footer.site a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important}.rv{opacity:1;transform:none}}

/* ── Discount lead-capture popup (promo.js in deestech.js) ───────────────────── */
.dpov{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,8,14,.72);backdrop-filter:blur(6px)}
.dpov.on{display:flex}
.dpov .card{position:relative;width:min(720px,100%);max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border:1px solid var(--line2);border-radius:22px;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
@media(max-width:620px){.dpov .card{grid-template-columns:1fr}.dpov .hype{min-height:120px}}
.dpov .hype{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--accent),var(--orb));display:grid;place-items:center;padding:28px}
.dpov .hype b{font-family:var(--display);font-weight:700;font-size:clamp(54px,9vw,92px);line-height:.82;color:var(--accent-ink);letter-spacing:-.03em;text-align:center;transform:rotate(-4deg)}
.dpov .hype small{display:block;font-size:.32em;letter-spacing:.34em;margin-top:.35em}
.dpov .body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.dpov .ey{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.dpov h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,34px);letter-spacing:-.02em;color:var(--ink);margin:0}
.dpov p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}
.dpov form{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.dpov input[type=email]{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);font-size:15px}
.dpov input[type=email]:focus{outline:none;border-color:var(--accent)}
.dpov .yes{appearance:none;cursor:pointer;border:0;border-radius:12px;padding:14px 16px;font-weight:700;font-size:15px;background:var(--accent);color:var(--accent-ink);transition:filter .15s}
.dpov .yes:hover{filter:brightness(1.08)}
.dpov .yes:disabled{opacity:.6;cursor:default}
.dpov .no{background:none;border:0;cursor:pointer;color:var(--faint);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;padding:2px}
.dpov .no:hover{color:var(--muted)}
.dpov .fine{font-size:11px;color:var(--faint);line-height:1.5}
.dpov .fine a{color:var(--muted)}
.dpov .x{position:absolute;top:10px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
.dpov .x:hover{border-color:var(--accent);color:var(--accent)}
.dpov .code{display:flex;align-items:center;gap:10px;margin-top:2px}
.dpov .code code{flex:1;font-family:var(--mono);font-size:20px;letter-spacing:.14em;color:var(--ink);background:var(--surface2);border:1px dashed var(--accent);border-radius:12px;padding:12px 14px;text-align:center}
.dpov .copy{cursor:pointer;border:1px solid var(--accent);background:none;color:var(--accent);border-radius:10px;padding:12px 14px;font-weight:600;font-size:13px}
#dpromo-tab{position:fixed;left:0;bottom:22px;z-index:9998;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:9px 14px;border:0;border-radius:0 10px 10px 0;cursor:pointer;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);display:none}
#dpromo-tab.on{display:block}