/* ==========================================================================
   DefectDash marketing site: shared styles
   ========================================================================== */

:root{
  --bg:#0D1013;
  --bg-raised:#171B20;
  --bg-elevated:#1F242B;
  --ink:#EDEBE3;
  --ink-dim:#9BA3AC;
  --ink-faint:#616870;
  --line:#262C33;
  --line-strong:#333A42;
  --accent:#E2793B;
  --accent-ink:#1B0F06;
  --pass:#3FA980;
  --fail:#D8544A;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.6);

  --font-display: "Archivo", var(--font-sans);
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --container: 1180px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
}

:root[data-theme="light"]{
  --bg:#F2F0E9;
  --bg-raised:#FFFFFF;
  --bg-elevated:#FBFAF6;
  --ink:#14171B;
  --ink-dim:#5B6068;
  --ink-faint:#8A8F96;
  --line:#DEDACD;
  --line-strong:#CBC6B6;
  --accent:#C1521A;
  --accent-ink:#FFF7EE;
  --pass:#1F7A5C;
  --fail:#B23B32;
  --shadow: 0 30px 70px -35px rgba(30,25,15,.35);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F2F0E9;
    --bg-raised:#FFFFFF;
    --bg-elevated:#FBFAF6;
    --ink:#14171B;
    --ink-dim:#5B6068;
    --ink-faint:#8A8F96;
    --line:#DEDACD;
    --line-strong:#CBC6B6;
    --accent:#C1521A;
    --accent-ink:#FFF7EE;
    --pass:#1F7A5C;
    --fail:#B23B32;
    --shadow: 0 30px 70px -35px rgba(30,25,15,.35);
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent); color:var(--accent-ink); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
}
.eyebrow::before{ content:""; width:16px; height:1.5px; background:var(--accent); display:block; }

h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; text-wrap:balance; margin:0; }
h1{ font-size:clamp(38px,5.4vw,64px); line-height:1.03; }
h2{ font-size:clamp(28px,3.6vw,40px); line-height:1.08; }
h3{ font-size:19px; font-weight:700; }
p{ margin:0; }
.lede{ font-size:19px; line-height:1.6; color:var(--ink-dim); max-width:56ch; text-wrap:pretty; }
.tabular{ font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:99px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:color-mix(in srgb, var(--accent) 88%, white 12%); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink-dim); }
.btn-block{ width:100%; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.site-nav .row{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.wordmark .mark{
  width:30px; height:30px; border-radius:8px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wordmark .mark svg{ width:17px; height:17px; }
.wordmark .word{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:32px; font-size:14.5px; font-weight:500; }
.nav-links a{ text-decoration:none; color:var(--ink-dim); }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
  width:36px; height:36px; border-radius:99px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink-dim); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }

.nav-toggle{
  display:none; width:36px; height:36px; border-radius:8px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
}
@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  body.nav-open .nav-links{
    display:flex; position:absolute; top:76px; left:0; right:0; background:var(--bg-raised);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:2px; padding:12px 20px 20px;
  }
  body.nav-open .nav-links a{ padding:10px 0; width:100%; }
}

/* ---------- hero ---------- */
.hero{ padding:96px 0 60px; overflow:hidden; }
.hero .row{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:940px){ .hero .row{ grid-template-columns:1fr; } }
.hero-copy .lede{ margin:20px 0 32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-proof{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-proof .stat b{
  display:block; font-family:var(--font-mono); font-size:26px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.hero-proof .stat span{ font-size:12.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }

/* ---------- phone mockup ---------- */
.phone-stage{ position:relative; display:flex; justify-content:center; padding:20px 0; }
.phone{
  width:280px; border-radius:38px; background:var(--bg-elevated); border:1px solid var(--line-strong);
  padding:10px; box-shadow:var(--shadow); transform:rotate(-3deg); position:relative;
}
.phone::before{
  content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%); width:64px; height:5px;
  border-radius:99px; background:var(--line-strong); z-index:2;
}
.phone-screen{
  background:var(--bg); border-radius:28px; overflow:hidden; border:1px solid var(--line); padding-top:28px;
}
.ph-head{ padding:6px 18px 14px; border-bottom:1px solid var(--line); }
.ph-head .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.ph-head .v{ font-family:var(--font-display); font-weight:800; font-size:17px; margin-top:2px; }
.ph-list{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.ph-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg-raised);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
}
.ph-row.is-fail{ border-color:color-mix(in srgb, var(--fail) 55%, var(--line)); background:color-mix(in srgb, var(--fail) 10%, var(--bg-raised)); }
.ph-row .label{ font-size:13.5px; font-weight:600; }
.chip{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:99px; font-weight:600; flex-shrink:0;
}
.chip-pass{ background:color-mix(in srgb, var(--pass) 22%, transparent); color:var(--pass); }
.chip-fail{ background:color-mix(in srgb, var(--fail) 22%, transparent); color:var(--fail); }
.ph-defect{
  margin:2px 14px 14px; padding:11px 13px; border-radius:10px; border:1px dashed color-mix(in srgb, var(--fail) 45%, var(--line));
  font-size:12px; color:var(--ink-dim); line-height:1.5;
}
.ph-defect b{ color:var(--ink); display:block; font-size:12.5px; margin-bottom:2px; }
.ph-sign{ margin:0 14px 16px; padding-top:12px; border-top:1px solid var(--line); }
.ph-sign .sig{ height:30px; display:flex; align-items:flex-end; }
.ph-sign .sig svg{ width:110px; height:26px; color:var(--ink-dim); }
.ph-sign .name{ font-size:11px; color:var(--ink-faint); margin-top:4px; }
.ph-submit{
  margin:0 14px 18px; text-align:center; background:var(--accent); color:var(--accent-ink);
  font-size:12.5px; font-weight:700; border-radius:10px; padding:11px; letter-spacing:.02em;
}

/* ---------- problem strip ---------- */
.problem{ padding:76px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-raised); }
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:36px; }
@media (max-width:820px){ .problem-grid{ grid-template-columns:1fr; gap:28px; } }
.problem-item{ padding:0 32px; border-left:1px solid var(--line); }
.problem-item:first-child{ border-left:none; padding-left:0; }
@media (max-width:820px){ .problem-item{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px; } .problem-item:first-child{ border-top:none; padding-top:0; } }
.problem-item h3{ margin-bottom:10px; }
.problem-item p{ color:var(--ink-dim); font-size:14.5px; }

/* ---------- features ---------- */
.features{ padding:100px 0; }
.section-head{ max-width:60ch; margin-bottom:52px; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .feat-grid{ grid-template-columns:1fr; } }
.feat-card{ background:var(--bg-raised); padding:30px 26px; }
.feat-icon{
  width:40px; height:40px; border-radius:10px; background:var(--bg-elevated); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:18px;
}
.feat-icon svg{ width:20px; height:20px; }
.feat-card h3{ margin-bottom:8px; }
.feat-card p{ color:var(--ink-dim); font-size:14.5px; }

/* ---------- screens showcase ---------- */
.screens{ padding:20px 0 110px; }
.screens-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; align-items:start; }
@media (max-width:900px){ .screens-grid{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }
.screen-card{ }
.screen-label{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }

.panel{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:20px;
  box-shadow:var(--shadow);
}
.dash-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dash-title{ font-family:var(--font-display); font-weight:800; font-size:15px; }
.dash-badge{ font-family:var(--font-mono); font-size:10.5px; padding:3px 8px; border-radius:99px; background:color-mix(in srgb, var(--pass) 20%, transparent); color:var(--pass); }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-box{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px; padding:14px; }
.stat-box .num{ font-family:var(--font-mono); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-box .num.warn{ color:var(--accent); }
.stat-box .cap{ font-size:11.5px; color:var(--ink-faint); margin-top:3px; }

.pdf-panel{ font-family:var(--font-mono); }
.pdf-top{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:14px; }
.pdf-top .co{ font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:-.01em; }
.pdf-top .doc{ font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; }
.pdf-meta{ font-size:11px; color:var(--ink-dim); margin-bottom:14px; display:flex; flex-direction:column; gap:3px; }
.pdf-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.pdf-line{ display:flex; justify-content:space-between; font-size:11px; padding:5px 0; border-bottom:1px dotted var(--line); }
.pdf-line .ok{ color:var(--pass); }
.pdf-sent{ font-size:10.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:10px; }

/* ---------- trust strip ---------- */
.trust{ border-top:1px solid var(--line); background:var(--bg-raised); padding:40px 0; }
.trust-row{ display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; }
.trust-item{ display:flex; align-items:center; gap:12px; flex:1; min-width:220px; }
.trust-item svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.trust-item span{ font-size:13.5px; color:var(--ink-dim); }

/* ---------- final CTA ---------- */
.cta-band{ padding:110px 0; text-align:center; }
.cta-band h2{ margin:0 auto 16px; max-width:20ch; }
.cta-band .lede{ margin:0 auto 34px; }
.cta-band .hero-cta{ justify-content:center; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:48px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.footer-brand .word{ font-family:var(--font-display); font-weight:800; font-size:17px; }
.footer-brand p{ color:var(--ink-faint); font-size:13px; margin-top:8px; max-width:32ch; }
.footer-links{ display:flex; gap:36px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:9px; }
.footer-col .h{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.footer-col a{ font-size:13.5px; color:var(--ink-dim); text-decoration:none; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint); }

/* ---------- simple page header (contact/privacy) ---------- */
.page-hero{ padding:72px 0 20px; }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero .lede{ margin-top:16px; }

/* ---------- contact ---------- */
.contact-wrap{ padding:50px 0 120px; display:grid; grid-template-columns:1fr .85fr; gap:56px; }
@media (max-width:860px){ .contact-wrap{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-dim); }
.field input, .field select, .field textarea{
  font-family:var(--font-sans); font-size:15px; padding:12px 14px; border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--bg-raised); color:var(--ink); width:100%;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:12.5px; color:var(--ink-faint); margin-top:12px; }
.form-status{ font-size:13.5px; margin-top:12px; display:none; }
.form-status.show{ display:block; }

.contact-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px; height:fit-content; }
.contact-card h3{ margin-bottom:14px; }
.contact-card .item{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.contact-card .item:first-of-type{ border-top:none; padding-top:0; }
.contact-card .item svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.contact-card .item .t{ font-size:13px; color:var(--ink-faint); }
.contact-card .item .v{ font-size:14.5px; font-weight:600; }
.contact-card .item a{ text-decoration:none; }

/* ---------- legal / privacy ---------- */
.legal{ padding:20px 0 120px; }
.legal-body{ max-width:72ch; }
.legal-body h2{ font-size:20px; margin:40px 0 14px; }
.legal-body h2:first-of-type{ margin-top:8px; }
.legal-body p{ color:var(--ink-dim); font-size:15px; margin-bottom:14px; }
.legal-body ul{ color:var(--ink-dim); font-size:15px; padding-left:20px; margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
.legal-body li strong{ color:var(--ink); }
.legal-body a{ color:var(--accent); }
.legal-updated{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); margin-top:10px; }

.legal-flag{
  border-left:3px solid var(--accent); background:var(--bg-raised); border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:14px 18px; margin:0 0 18px; font-size:13.5px; color:var(--ink-dim);
}
.legal-flag strong{ color:var(--accent); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:6px; }