/* ============================================================================
   VASTROX Domain Doctor — premium "vitals monitor" theme
   Dark-first (brand). Landing content also supports a light theme.
   ========================================================================= */

:root {
  /* Brand */
  --brand-primary:#2f6bff; --brand-accent:#4d8bff; --brand-cyan:#22d3ee; --brand-indigo:#4f46e5;
  /* Grounds & surfaces */
  --bg:#04060d; --surface:#0b1120; --surface-2:#0e1526; --surface-inset:#070b15;
  /* Text */
  --text:#e8eefc; --text-muted:#8294b0; --text-faint:#5b6a86;
  /* Structure */
  --border:rgba(140,170,220,.10); --border-strong:rgba(140,170,220,.18); --divider:rgba(140,170,220,.06);
  /* Semantic status */
  --ok:#34d399; --ok-bg:rgba(52,211,153,.10); --ok-ring:rgba(52,211,153,.30);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.10); --warn-ring:rgba(251,191,36,.32);
  --fail:#f87171; --fail-bg:rgba(248,113,113,.10); --fail-ring:rgba(248,113,113,.32);
  --scan:#22d3ee; --scan-bg:rgba(34,211,238,.08); --scan-ring:rgba(34,211,238,.30);
  --na:#7688a5; --na-bg:rgba(118,136,165,.10);
  /* Glows & shadows */
  --glow-primary:0 0 0 1px rgba(47,107,255,.30), 0 12px 48px -12px rgba(47,107,255,.42);
  --glow-cyan:0 0 34px -6px rgba(34,211,238,.5);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.03), 0 22px 54px -28px rgba(0,0,0,.75);
  /* Radii */
  --r-pill:999px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  /* Type */
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur:260ms; --dur-slow:520ms;
  /* Layout */
  --maxw:1080px; --maxw-narrow:720px; --header-h:64px;
  color-scheme:dark;
}

:root[data-theme="light"], html[data-theme="light"] {
  --bg:#f5f7fc; --surface:#ffffff; --surface-2:#f0f3fa; --surface-inset:#eef2f9;
  --text:#0b1120; --text-muted:#516078; --text-faint:#7686a0;
  --border:rgba(30,60,110,.12); --border-strong:rgba(30,60,110,.20); --divider:rgba(30,60,110,.07);
  --ok:#059669; --warn:#b45309; --fail:#dc2626; --scan:#0891b2; --na:#64748b;
  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 44px -26px rgba(20,40,90,.28);
  --glow-primary:0 0 0 1px rgba(47,107,255,.22), 0 14px 44px -16px rgba(47,107,255,.3);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f5f7fc; --surface:#ffffff; --surface-2:#f0f3fa; --surface-inset:#eef2f9;
    --text:#0b1120; --text-muted:#516078; --text-faint:#7686a0;
    --border:rgba(30,60,110,.12); --border-strong:rgba(30,60,110,.20); --divider:rgba(30,60,110,.07);
    --ok:#059669; --warn:#b45309; --fail:#dc2626; --scan:#0891b2; --na:#64748b;
    --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 44px -26px rgba(20,40,90,.28);
    color-scheme:light;
  }
}

/* ---- reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(47,107,255,.14), transparent 60%),
    radial-gradient(900px 640px at 96% 6%, rgba(79,70,229,.10), transparent 62%);
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.15; letter-spacing:-.01em; margin:0}
a{color:var(--brand-accent); text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--brand-accent); outline-offset:2px; border-radius:inherit}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,5vw,40px)}
.wrap.narrow{max-width:var(--maxw-narrow)}
.h1{font-size:clamp(1.75rem,6.4vw,3.25rem); overflow-wrap:break-word; word-break:break-word}
.lead{color:var(--text-muted); font-size:clamp(1.02rem,2.2vw,1.22rem); line-height:1.6}
.linkish{background:none; border:0; color:var(--brand-accent); cursor:pointer; padding:0; font:inherit; text-decoration:underline}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid transparent; border-radius:var(--r-md); cursor:pointer;
  font-weight:600; font-size:.98rem; padding:.72rem 1.15rem; line-height:1;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur);
  white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.55rem .9rem; font-size:.88rem}
.btn-primary{
  color:#fff; background:linear-gradient(135deg,#4f86ff 0%,#2f6bff 48%,#4f46e5 112%);
  box-shadow:var(--glow-primary);
}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(47,107,255,.5), 0 18px 54px -14px rgba(47,107,255,.6)}
.btn-ghost{background:var(--surface-2); color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand-accent); color:var(--brand-accent)}

/* ---- header ------------------------------------------------------------- */
.dd-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--border)}
.dd-header-in{display:flex; align-items:center; justify-content:space-between; height:var(--header-h)}
.dd-brand{display:flex; align-items:center; gap:.6rem; color:var(--text)}
.dd-brand:hover{text-decoration:none}
.dd-brand-mark{display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(160deg,rgba(47,107,255,.16),rgba(34,211,238,.07)); border:1px solid var(--border-strong)}
.dd-brand-tx{display:flex; flex-direction:column; line-height:1.05}
.dd-brand-tx b{font-family:var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em}
.dd-brand-tx i{font-style:normal; font-size:.68rem; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase}
.dd-nav{display:flex; align-items:center; gap:.35rem}
.dd-nav a{color:var(--text-muted); font-size:.9rem; font-weight:500; padding:.5rem .7rem; border-radius:10px}
.dd-nav a:hover{color:var(--text); background:var(--surface); text-decoration:none}
.dd-nav-cta{color:var(--brand-accent)!important; border:1px solid var(--border-strong)}
.dd-nav-cta:hover{border-color:var(--brand-accent)}
@media (max-width:720px){ .dd-nav a:not(.dd-nav-cta){display:none} }

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative; padding:clamp(48px,9vh,104px) 0 clamp(28px,5vh,52px); text-align:center; overflow:hidden}
.hero-in{position:relative; z-index:2; max-width:820px; margin-inline:auto}
.hero-glow{position:absolute; z-index:1; left:50%; top:-10%; width:760px; height:520px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(47,107,255,.20), transparent 70%); filter:blur(20px); pointer-events:none}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:clamp(.68rem,2.6vw,.8rem); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--brand-accent); background:var(--scan-bg);
  border:1px solid var(--border-strong); padding:.4rem .8rem; border-radius:var(--r-pill); margin:0 0 1.1rem;
  max-width:100%; text-align:center; line-height:1.3}
.eyebrow-dot{width:7px; height:7px; border-radius:50%; background:var(--brand-cyan); box-shadow:0 0 10px var(--brand-cyan); animation:pulse 2s var(--ease-out) infinite}
.hero-h1{margin:0 0 1rem; background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--text) 62%, var(--text-muted)));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-lead{margin:0 auto 2rem; max-width:640px}

/* scan console */
.scan-form{max-width:640px; margin-inline:auto}
.scan-field{display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-xl); padding:.55rem .55rem .55rem 1rem; box-shadow:var(--shadow-card);
  transition:border-color var(--dur), box-shadow var(--dur)}
.scan-field:focus-within{border-color:var(--brand-primary); box-shadow:var(--glow-primary)}
.scan-globe{display:grid; place-items:center; color:var(--text-faint); flex:0 0 auto}
.scan-field input{flex:1 1 auto; min-width:0; background:none; border:0; outline:0; color:var(--text);
  font-size:1.06rem; font-family:var(--font-mono); letter-spacing:.01em; padding:.5rem .2rem}
.scan-field input::placeholder{color:var(--text-faint); font-family:var(--font-body)}
.scan-btn{flex:0 0 auto; position:relative}
.scan-btn-spin{display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite}
.scanning .scan-btn-label{opacity:.6}
.scanning .scan-btn-spin{display:inline-block}
.scan-hint{margin:.9rem 0 0; font-size:.86rem; color:var(--text-faint)}
.scan-hint .sample{color:var(--text-muted)}
.scan-error{margin:.8rem 0 0; color:var(--fail); font-size:.92rem; font-weight:500}
@media (max-width:560px){
  .scan-field{flex-wrap:wrap; border-radius:var(--r-lg); padding:.7rem}
  .scan-field input{width:100%; flex-basis:100%; font-size:16px}
  .scan-btn{width:100%; height:50px}
}

/* ---- results wrap ------------------------------------------------------- */
.results-wrap{padding:8px 0 40px; scroll-margin-top:80px}
.score-panel{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,3vw,40px); align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-card); padding:clamp(22px,3.5vw,40px); margin-bottom:24px; position:relative; overflow:hidden}
.score-panel::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 240px at 12% 0%, rgba(47,107,255,.10), transparent 65%)}
.gauge-mod{display:flex; align-items:center; gap:clamp(18px,3vw,32px); position:relative; z-index:1}
.gauge{position:relative; width:clamp(150px,20vw,200px); aspect-ratio:1; flex:0 0 auto}
.gauge-svg{width:100%; height:100%; transform:rotate(-90deg)}
.gauge-track{fill:none; stroke:var(--border-strong); stroke-width:14}
.gauge-fill{fill:none; stroke:url(#gaugeArc); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:653.45; stroke-dashoffset:653.45; transition:stroke-dashoffset 900ms var(--ease-out);
  filter:drop-shadow(0 0 8px rgba(47,107,255,.5))}
.gauge-center{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.gauge-score{font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,5vw,3.3rem); line-height:1; letter-spacing:-.02em}
.gauge-grade{font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin-top:.3rem; padding:.1rem .55rem;
  border-radius:var(--r-pill); display:inline-block}
.score-meta{min-width:0}
.score-domain{font-family:var(--font-mono); font-size:1.05rem; color:var(--text); font-weight:600; word-break:break-all; margin-bottom:.35rem}
.score-summary{color:var(--text-muted); font-size:1rem; line-height:1.5; margin-bottom:.8rem}
.score-counts{display:flex; flex-wrap:wrap; gap:.4rem}
.count-chip{display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; padding:.28rem .6rem; border-radius:var(--r-pill); border:1px solid var(--border)}
.count-chip .dot{width:7px; height:7px; border-radius:50%}
.count-pass{color:var(--ok)} .count-pass .dot{background:var(--ok)}
.count-warn{color:var(--warn)} .count-warn .dot{background:var(--warn)}
.count-fail{color:var(--fail)} .count-fail .dot{background:var(--fail)}
.count-na{color:var(--na)} .count-na .dot{background:var(--na)}

/* category rail */
.cat-rail{display:flex; flex-direction:column; gap:.55rem; position:relative; z-index:1}
.cat-bar{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem}
.cat-bar-label{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text-muted); font-weight:500}
.cat-bar-track{grid-column:1/-1; height:6px; border-radius:var(--r-pill); background:var(--surface-inset); overflow:hidden}
.cat-bar-fill{height:100%; border-radius:var(--r-pill); width:0; transition:width 800ms var(--ease-out)}
.cat-bar-score{font-family:var(--font-mono); font-size:.82rem; color:var(--text-muted)}
@media (max-width:820px){
  .score-panel{grid-template-columns:1fr}
  .gauge-mod{flex-direction:column; text-align:center}
  .score-meta{text-align:center}
  .score-counts{justify-content:center}
}

/* ---- category sections + cards ------------------------------------------ */
.cards{display:flex; flex-direction:column; gap:28px}
.cat-section{}
.cat-head{display:flex; align-items:center; gap:.7rem; margin:6px 2px 12px; position:sticky; top:var(--header-h); z-index:5;
  background:color-mix(in srgb,var(--bg) 82%, transparent); backdrop-filter:blur(8px); padding:.5rem 0}
.cat-head h2{font-size:1.12rem; font-weight:800}
.cat-head .cat-count{font-size:.82rem; color:var(--text-faint); font-family:var(--font-mono)}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow:hidden; transition:border-color var(--dur), transform var(--dur) var(--ease-out)}
.card.is-open{border-color:var(--border-strong)}
.card-head{display:flex; align-items:flex-start; gap:.75rem; padding:16px 18px; cursor:pointer; width:100%;
  text-align:left; background:none; border:0; color:inherit}
.card-head:hover{background:color-mix(in srgb,var(--surface-2) 60%, transparent)}
.card-ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-top:1px}
.card-tt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.18rem}
.card-title{display:block; font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:-.005em}
.card-summary{display:block; color:var(--text-muted); font-size:.9rem; line-height:1.45}
.card-chev{flex:0 0 auto; color:var(--text-faint); transition:transform var(--dur) var(--ease-out); margin-top:4px}
.card.is-open .card-chev{transform:rotate(180deg)}
.card-body{max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-out)}
.card-body-in{padding:2px 18px 18px 18px; border-top:1px solid var(--divider)}
.card-findings{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.card-findings li{display:flex; align-items:flex-start; gap:.55rem; font-size:.9rem; color:var(--text); line-height:1.45}
.card-findings .fi{flex:0 0 auto; width:16px; height:16px; margin-top:2px}
.fi-pass{color:var(--ok)} .fi-warn{color:var(--warn)} .fi-fail{color:var(--fail)} .fi-info{color:var(--text-muted)}
.card-records{margin-top:12px}
.rec-label{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:.4rem}
.rec-block{position:relative; background:var(--surface-inset); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:.7rem .8rem; overflow-x:auto; font-family:var(--font-mono); font-size:.82rem; color:var(--text); line-height:1.6}
.rec-block .rec-line{white-space:pre; display:block}
.rec-copy{position:absolute; top:6px; right:6px; padding:.25rem .5rem; font-size:.72rem; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); cursor:pointer}
.rec-copy:hover{color:var(--text); border-color:var(--border-strong)}
.card-fix{margin-top:14px; background:color-mix(in srgb,var(--brand-primary) 8%, var(--surface-2));
  border:1px solid var(--border-strong); border-radius:var(--r-md); padding:.85rem 1rem}
.card-fix .fix-h{display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.86rem; color:var(--text); margin-bottom:.3rem}
.card-fix p{margin:0 0 .6rem; font-size:.88rem; color:var(--text-muted); line-height:1.5}
.card-fix a{font-size:.85rem; font-weight:600}

/* status pills / icons */
.pill{display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:.28rem .58rem; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap}
.pill .pd{width:6px; height:6px; border-radius:50%}
.pill-pass{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-ring)} .pill-pass .pd{background:var(--ok)}
.pill-warn{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-ring)} .pill-warn .pd{background:var(--warn)}
.pill-fail{color:var(--fail); background:var(--fail-bg); border-color:var(--fail-ring)} .pill-fail .pd{background:var(--fail)}
.pill-info{color:var(--text-muted); background:var(--na-bg)} .pill-info .pd{background:var(--na)}
.pill-na{color:var(--na); background:var(--na-bg)} .pill-na .pd{background:var(--na)}
.pill-scan{color:var(--scan); background:var(--scan-bg); border-color:var(--scan-ring)} .pill-scan .pd{background:var(--scan); animation:pulse 1.1s var(--ease-out) infinite}
.card-ic.ic-pass{background:var(--ok-bg); color:var(--ok)}
.card-ic.ic-warn{background:var(--warn-bg); color:var(--warn)}
.card-ic.ic-fail{background:var(--fail-bg); color:var(--fail)}
.card-ic.ic-info,.card-ic.ic-na{background:var(--na-bg); color:var(--na)}
.card-ic.ic-scan{background:var(--scan-bg); color:var(--scan)}

/* scanning card shimmer */
.card.is-scanning .card-summary{color:var(--text-faint)}
.card.is-scanning{position:relative}
.card.is-scanning::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,var(--scan-bg) 50%,transparent 70%);
  background-size:200% 100%; animation:sweep 1.6s linear infinite}

/* results CTA */
.results-cta{margin-top:30px}
.results-cta-in{background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-xl);
  padding:clamp(26px,4vw,44px); text-align:center; box-shadow:var(--glow-primary); position:relative; overflow:hidden}
.results-cta-in::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 240px at 50% 0,rgba(47,107,255,.16),transparent 70%); pointer-events:none}
.results-cta-in h3{font-size:clamp(1.35rem,3vw,1.7rem); margin:.2rem 0 .6rem; position:relative}
.results-cta-in p{color:var(--text-muted); max-width:600px; margin:0 auto 1.2rem; position:relative}

/* shared CTA primitives */
.cta-eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-accent);
  margin:0 0 .7rem; position:relative}
.cta-checks{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.55rem; position:relative}
.cta-checks li{display:flex; align-items:flex-start; gap:.6rem; color:var(--text); font-size:.95rem; line-height:1.45}
.cta-checks li::before{content:""; flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:var(--ok-bg); border:1px solid var(--ok-ring);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2334d399' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}
.cta-checks-center{max-width:420px; margin-inline:auto; text-align:left}
.cta-actions{display:flex; flex-wrap:wrap; gap:.7rem; position:relative}
.cta-actions-center{justify-content:center}

/* Fix-it-with-VASTROX band on tool pages */
.cta-band{position:relative; margin:20px 0; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb,var(--brand-primary) 14%, var(--surface-2)) 0%, var(--surface-2) 58%);
  border:1px solid var(--border-strong); box-shadow:var(--glow-primary)}
.cta-band-glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 220px at 88% 0,rgba(34,211,238,.14),transparent 62%), radial-gradient(560px 240px at 0% 100%,rgba(79,70,229,.14),transparent 60%)}
.cta-band-in{position:relative; padding:clamp(24px,4vw,40px)}
.cta-headline{font-size:clamp(1.35rem,3.2vw,1.9rem); margin:0 0 .55rem; letter-spacing:-.01em}
.cta-sub{color:var(--text-muted); max-width:620px; margin:0 0 1.2rem; line-height:1.6}
.cta-trust{margin:1.1rem 0 0; font-size:.8rem; color:var(--text-faint); position:relative}

/* Home hosting/services band */
.hosting-band .hosting-band-head{margin-bottom:1.2rem}
.hosting-band .hosting-band-head p{color:var(--text-muted); margin:.5rem 0 0; max-width:640px; line-height:1.6}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.svc-card{display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border-radius:var(--r-md);
  background:var(--surface-inset); border:1px solid var(--border); transition:border-color var(--dur), transform var(--dur) var(--ease-out)}
.svc-card:hover{border-color:var(--brand-accent); transform:translateY(-2px); text-decoration:none}
.svc-t{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); display:flex; align-items:center; gap:.4rem}
.svc-arrow{color:var(--brand-accent); transition:transform var(--dur)}
.svc-card:hover .svc-arrow{transform:translateX(3px)}
.svc-d{color:var(--text-muted); font-size:.88rem; line-height:1.5}

/* ---- SEO content sections ---------------------------------------------- */
.section{padding:clamp(48px,8vh,96px) 0}
.section.content{padding-top:clamp(40px,6vh,72px)}
.content-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(22px,3.5vw,34px); box-shadow:var(--shadow-card); margin-bottom:20px}
.content-card h2{font-size:1.4rem; margin-bottom:1rem}
.content-about p{color:var(--text-muted); margin:0 0 1rem; line-height:1.75}
.content-about p:last-child{margin-bottom:0}
.content-about strong{color:var(--text)}
.content-card code{font-family:var(--font-mono); font-size:.85em; background:var(--surface-inset);
  border:1px solid var(--border); border-radius:6px; padding:.08em .4em; color:var(--brand-accent); word-break:break-word}
.err-list{list-style:none; margin:0; padding:0; display:grid; gap:.65rem}
.err-list li{display:flex; align-items:flex-start; gap:.6rem; color:var(--text-muted); line-height:1.5}
.err-list li::before{content:"!"; flex:0 0 auto; width:20px; height:20px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-ring)}
.faq-list{display:flex; flex-direction:column; gap:.4rem}
.faq{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-inset); overflow:hidden}
.faq summary{cursor:pointer; padding:1rem 1.1rem; font-weight:600; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand-accent); font-size:1.3rem; font-weight:400; line-height:1; transition:transform var(--dur)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 1.1rem 1.1rem}
.faq-a p{margin:0; color:var(--text-muted); line-height:1.65}
.rel-chips{display:flex; flex-wrap:wrap; gap:.55rem}
.rel-chip{display:inline-flex; align-items:center; padding:.55rem .9rem; border-radius:var(--r-pill);
  background:var(--surface-inset); border:1px solid var(--border); color:var(--text-muted); font-size:.88rem; font-weight:500}
.rel-chip:hover{border-color:var(--brand-accent); color:var(--brand-accent); text-decoration:none}
.rel-chip-home{background:color-mix(in srgb,var(--brand-primary) 12%,var(--surface-inset)); color:var(--brand-accent); border-color:var(--border-strong)}

/* ---- footer ------------------------------------------------------------- */
.dd-footer{border-top:1px solid var(--border); background:color-mix(in srgb,var(--surface) 55%,var(--bg)); padding:56px 0 32px; margin-top:40px}
.dd-footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px}
.dd-footer-brand p{color:var(--text-muted); font-size:.9rem; line-height:1.6; margin:.9rem 0 1.1rem; max-width:280px}
.dd-footer-col{display:flex; flex-direction:column; gap:.5rem}
.dd-footer-label{font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:700; margin:0 0 .3rem}
.dd-footer-col a{color:var(--text-muted); font-size:.9rem}
.dd-footer-col a:hover{color:var(--text)}
.dd-footer-base{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:36px; padding-top:22px; border-top:1px solid var(--divider); color:var(--text-faint); font-size:.85rem}
.dd-footer-links{display:flex; gap:1.2rem; flex-wrap:wrap}
.dd-footer-links a{color:var(--text-faint)}
.dd-footer-links a:hover{color:var(--text-muted)}
@media (max-width:820px){ .dd-footer-grid{grid-template-columns:1fr 1fr} .dd-footer-brand{grid-column:1/-1} }
@media (max-width:520px){ .dd-footer-grid{grid-template-columns:1fr} }

/* ---- animations --------------------------------------------------------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.45; transform:scale(.82)}}
@keyframes sweep{to{background-position:-200% 0}}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
.card{animation:fadeUp var(--dur) var(--ease-out) both}

@media (max-width:640px){
  body::before{display:none}
  .card.is-scanning::after{display:none}
  .cat-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}