/* ============================================================
   DoCam.app — landing (monospace / diagnostic-sheet direction)
   Rules from the owner:
   - Monospace typography everywhere.
   - NO gradients anywhere except the logo image itself.
   - Brand colours kept as SOLID accents (module dots / status ticks).
   - Signature: a monochrome ∞ "diagnostic sweep" comet, no visible track.
   Light/Dark auto via prefers-color-scheme.
   ============================================================ */

:root {
  /* module signature colours — used ONLY as small solid accents */
  --m-webcam:#DB4437; --m-mic:#F4B400; --m-ready:#EA580C;
  --m-speaker:#7C4DFF; --m-internet:#0F9D58; --m-geo:#4285F4; --m-bt:#2563EB;

  /* neutrals — light */
  --bg:#F7F8FA; --bg-2:#FFFFFF; --tile:#FFFFFF;
  --text:#0F172A; --text-2:#475569; --text-3:#94A3B8; --on-accent:#FFFFFF;
  --border:#E2E8F0; --border-2:#CBD5E1; --divider:#EEF1F5;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --xs:4px; --s:8px; --m:16px; --l:24px; --xl:40px; --xxl:72px;
  --r:12px; --r-s:8px; --maxw:1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0B1220; --bg-2:#111827; --tile:#111827;
    --text:#F8FAFC; --text-2:#CBD5E1; --text-3:#8895A7;
    --border:#1E293B; --border-2:#334155; --divider:#161F2E;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:15px; line-height:1.6;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","calt";
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--m-geo); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--l); }
section{ padding-block:var(--xxl); border-top:1px solid var(--divider); }

/* section heading system — monospace, technical */
.tag{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); display:inline-flex; align-items:center; gap:8px;
  margin:0 0 var(--m);
}
.tag::before{ content:"▚"; color:var(--text-2); }
h2.h{ font:600 clamp(22px,3.2vw,32px)/1.15 var(--mono); letter-spacing:-.02em; margin:0 0 var(--s); }
.lede{ color:var(--text-2); max-width:64ch; margin:0; }

/* ---------------- header ---------------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-in{ display:flex; align-items:center; gap:var(--m); height:60px; }
.brand{ display:flex; align-items:center; gap:9px; }
.brand img{ height:26px; width:auto; }
.brand .tld{ font-size:12px; color:var(--text-3); border:1px solid var(--border-2); border-radius:var(--r-s); padding:2px 6px; }
.nav-spacer{ flex:1; }
.nav-links{ display:flex; gap:2px; }
.nav-links a{ color:var(--text-2); font-size:13px; padding:7px 10px; border-radius:var(--r-s); }
.nav-links a:hover{ color:var(--text); background:var(--divider); }
@media (max-width:720px){ .nav-links .hide-sm{ display:none; } }
.lang{ display:inline-flex; border:1px solid var(--border-2); border-radius:var(--r-s); overflow:hidden; }
.lang button{ border:0; background:transparent; color:var(--text-3); font-size:12px; padding:7px 9px; letter-spacing:.04em; }
.lang button[aria-pressed="true"]{ color:var(--text); background:var(--divider); font-weight:600; }

/* ---------------- hero ---------------- */
.hero{ border-top:0; padding-top:var(--xxl); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--xl); align-items:center; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:var(--l); } }
.hero h1{
  font:600 clamp(30px,5.2vw,52px)/1.06 var(--mono);
  letter-spacing:-.035em; margin:var(--m) 0 var(--m);
}
.hero h1 .u{ /* the phrase that "resolves" — underline accent, no gradient */
  border-bottom:2px solid var(--m-ready); padding-bottom:2px;
}
.hero .sub{ color:var(--text-2); font-size:clamp(14px,1.8vw,17px); max-width:54ch; margin:0 0 var(--l); }

.trust{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--l);
  font-size:12.5px; color:var(--text-2);
  border:1px solid var(--border); border-radius:var(--r-s); padding:7px 12px;
}
.trust .lock{ color:var(--m-internet); flex:none; }

/* store buttons — solid, NO gradient */
.stores{ display:flex; flex-wrap:wrap; gap:var(--s); }
.store{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--text); color:var(--bg);
  border:1px solid var(--text); border-radius:var(--r);
  padding:9px 14px; min-width:148px; transition:transform .16s ease;
}
.store:hover{ transform:translateY(-2px); }
.store .ic{ flex:none; }
.store .t{ display:flex; flex-direction:column; line-height:1.1; }
.store .t small{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.store .t b{ font-size:14px; font-weight:600; }
.store .soon{ margin-left:auto; font-size:9px; letter-spacing:.08em; padding:3px 6px; border-radius:var(--r-s);
  border:1px solid color-mix(in srgb, var(--bg) 40%, transparent); }

/* ---------------- signature: ∞ comet ---------------- */
.sig{ display:grid; place-items:center; }
.inf{ width:min(120px,42%); height:auto; overflow:visible; }
.inf .lay{ fill:none; stroke:currentColor; stroke-linecap:round; }
.inf.run .lay{ animation:sweep 3.4s linear infinite; }
.inf .head{ filter:drop-shadow(0 0 6px color-mix(in srgb, currentColor 55%, transparent)); }
@keyframes sweep{ to{ stroke-dashoffset:-100; } }
.inf .static{ stroke:currentColor; opacity:.14; fill:none; display:none; }
.sig{ color:var(--text); }
.sig-cap{ margin-top:var(--m); text-align:center; color:var(--text-3); font-size:12px; letter-spacing:.04em; }

/* ---------------- checks: diagnostic list ---------------- */
.diag{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-top:var(--l); background:var(--bg-2); }
.diag .row{
  display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:var(--m);
  padding:14px var(--l); border-top:1px solid var(--divider);
}
.diag .row:first-child{ border-top:0; }
.diag .dot{ width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 14%, transparent); }
.diag .name{ font-weight:600; color:var(--text); }
.diag .name span{ color:var(--text-3); font-weight:400; margin-left:10px; }
.diag .st{ font-size:12px; color:var(--text-3); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:560px){ .diag .name span{ display:block; margin:2px 0 0; } }

/* ---------------- principles ---------------- */
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--m); margin-top:var(--l); }
@media (max-width:900px){ .grid4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid4{ grid-template-columns:1fr; } }
.pc{ border:1px solid var(--border); border-radius:var(--r); padding:var(--l); background:var(--tile); }
.pc .num{ font-size:12px; color:var(--c); letter-spacing:.1em; }
.pc h3{ font:600 15px/1.3 var(--mono); margin:10px 0 6px; }
.pc p{ color:var(--text-2); font-size:13px; margin:0; }

/* ---------------- anchor offset (sticky header) ---------------- */
[id]{ scroll-margin-top:78px; }

/* ---------------- mobile menu ---------------- */
.nav-toggle{ display:none; border:1px solid var(--border-2); border-radius:var(--r-s); background:transparent; color:var(--text); padding:6px; line-height:0; }
.mobile-menu{ border-top:1px solid var(--border); background:var(--bg-2); padding:6px var(--l) 12px; }
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ display:block; color:var(--text-2); font-size:14px; padding:11px 2px; border-bottom:1px solid var(--divider); }
.mobile-menu a:last-child{ border-bottom:0; }
.mobile-menu a:hover{ color:var(--text); }
@media (max-width:720px){
  .nav-toggle{ display:inline-flex; }
  .nav-in{ gap:10px; }
  .brand .tld{ display:none; }   /* free space so lang + hamburger always fit */
}
@media (min-width:721px){ .mobile-menu{ display:none; } }

/* ---------------- two scenarios ---------------- */
.scen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--m); margin-top:var(--l); }
@media (max-width:760px){ .scen-grid{ grid-template-columns:1fr; } }
.scen{ border:1px solid var(--border); border-radius:var(--r); padding:var(--l); background:var(--tile); }
.scen.feature{ border:2px solid var(--c); }
.scen-ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:var(--m);
  background:color-mix(in srgb, var(--c) 12%, transparent); color:var(--c); }
.scen h3{ font:600 18px/1.25 var(--mono); margin:0 0 8px; letter-spacing:-.01em; }
.scen p{ color:var(--text-2); font-size:14px; margin:0; }
.scen p.scen-meta{ margin:var(--m) 0 0; color:var(--text-3); font-size:12px; letter-spacing:.04em; }

/* ---------------- honest "what we don't check" note ---------------- */
.note{ margin-top:var(--l); border:1px solid var(--border); border-left:3px solid var(--text-3);
  border-radius:var(--r-s); padding:var(--m) var(--l); background:var(--bg-2); }
.note h3{ font:600 14px/1.3 var(--mono); margin:0 0 6px; }
.note p{ color:var(--text-2); font-size:13px; line-height:1.6; margin:0; }

/* ---------------- report card ---------------- */
.report-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--xl); align-items:center; }
@media (max-width:860px){ .report-grid{ grid-template-columns:1fr; } }

.rcard{ background:var(--tile); border:1px solid var(--border); border-radius:var(--r); padding:16px; max-width:520px; }
.rcard-top{ display:flex; align-items:flex-start; gap:18px; }
/* left: QR on top, horizontal logo underneath */
.rleft{ flex:none; display:flex; flex-direction:column; align-items:center; gap:12px; }
.rqr{ width:126px; height:126px; border-radius:9px; padding:7px; background:#fff; border:1px solid var(--border); }
.rlogo{ height:24px; width:auto; }
.rmeta{ flex:1; min-width:0; }
/* top row: report ID (left) with the "Signed" badge opposite it (right) */
.rhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rid-l{ font-size:10px; color:var(--text-3); letter-spacing:.14em; text-transform:uppercase; margin:2px 0 3px; }
.rid{ font-size:19px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
/* verification stamp — icon only (green shield), no label */
.signed{ flex:none; display:inline-flex; align-items:center; }
.signed .shield{ color:var(--m-internet); flex:none; width:22px; height:22px; }
.rscan{ color:var(--text-2); font-size:12.5px; line-height:1.45; margin:16px 0 0; }
.rscan a{ color:var(--m-geo); }
.rtype{ color:var(--text-3); font-size:11.5px; margin:10px 0 0; }

/* ---------------- business / API ---------------- */
.biz{ display:grid; grid-template-columns:1fr .85fr; gap:var(--xl); align-items:center;
  border:1px solid var(--border); border-radius:var(--r); background:var(--bg-2); padding:clamp(20px,4vw,40px); }
@media (max-width:820px){ .biz{ grid-template-columns:1fr; } }
.api{ font-size:13px; line-height:1.9; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-s); padding:var(--m) var(--l); overflow-x:auto; }
.api .mth{ color:var(--m-internet); }
.api .cm{ color:var(--text-3); }

/* ---------------- buttons (no gradient) ---------------- */
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--r); padding:11px 18px; font-size:14px; font-weight:600;
  border:1px solid var(--border-2); background:transparent; color:var(--text); transition:transform .16s ease, background .16s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* ---------------- footer ---------------- */
footer{ border-top:1px solid var(--border); background:var(--bg-2); padding-block:var(--xl); }
.foot-grid{ display:flex; flex-wrap:wrap; gap:var(--xl); justify-content:space-between; }
.foot-brand{ max-width:300px; }
.foot-brand p{ color:var(--text-2); font-size:13px; margin:var(--s) 0 0; }
.foot-col h4{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin:0 0 var(--m); }
.foot-col a{ display:block; color:var(--text-2); font-size:13px; padding:4px 0; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:var(--m); justify-content:space-between; align-items:center;
  margin-top:var(--xl); padding-top:var(--l); border-top:1px solid var(--border); color:var(--text-3); font-size:12px; }
.foot-bottom .cross{ display:inline-flex; gap:var(--m); }
.foot-bottom .cross a{ color:var(--text-2); }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .store:hover,.btn:hover{ transform:none; }
  .inf.run .lay{ animation:none; display:none; }
  .inf .static{ display:block; }
}