

:root {
  
  --brand-900: #0b0d12;   
  --brand-800: #14171e;
  --brand-700: #b5670a;   
  --brand-600: #f39715;   
  --brand-500: #ffb43d;   
  --brand-100: #fff0d9;   
  --brand-50:  #fff8ef;   
  --accent-500: #1f86e8;  
  --accent-600: #046bd2;
  --accent-700: #0356aa;

  
  --ink-900: #0b0d12;
  --ink-800: #16191f;
  --ink-700: #2b313b;
  --ink-600: #4a515d;
  --ink-500: #6b7280;
  --ink-400: #9aa3b2;
  --ink-300: #cbd2dd;
  --ink-200: #e6e9ef;
  --ink-100: #f1f4f8;
  --ink-50:  #f8fafc;
  --white:   #ffffff;

  --success: #17a673;
  --warning: #e0a000;
  --danger:  #e53e3e;

  --font-sans: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;  --fs-sm: 0.9375rem; --fs-base: 1rem;  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;   --fs-2xl: 1.75rem;  --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 3.75rem;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;

  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-xl:24px;
  --shadow-sm: 0 1px 2px rgba(11,13,18,.06);
  --shadow: 0 6px 20px rgba(11,13,18,.10);
  --shadow-lg: 0 24px 56px rgba(11,13,18,.18);
  --glow-orange: 0 0 0 1px rgba(243,151,21,.35), 0 12px 40px rgba(243,151,21,.28);
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65;
  color: var(--ink-800); background: var(--white); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 2px; }

h1,h2,h3,h4 { color: var(--brand-900); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--sp-4); font-weight: 800; }
h1 { font-size: clamp(2.1rem, 4vw + .5rem, var(--fs-5xl)); letter-spacing: -.02em; text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 2.5vw + .5rem, var(--fs-3xl)); text-transform: uppercase; }
h3 { font-size: var(--fs-xl); font-weight: 700; }
h4 { font-size: var(--fs-lg); font-weight: 700; }
p { margin: 0 0 var(--sp-4); color: var(--ink-700); }

.skip-link { position:absolute; left:-10000px; top:0; background:var(--brand-900); color:#fff; padding:var(--sp-2) var(--sp-4); z-index:100; }
.skip-link:focus { left:1rem; top:1rem; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
section { padding: var(--sp-20) 0; }
section.tight { padding: var(--sp-12) 0; }


.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ink-200);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding: var(--sp-4) 0; }


.brand { display:flex; align-items:center; gap:0; font-style: italic; font-weight: 800;
  font-size: 1.5rem; letter-spacing:-.01em; color: var(--brand-900); line-height:1; }
.brand:hover { text-decoration:none; color: var(--brand-900); }
.brand .w1 { color: var(--brand-900); }
.brand .w2 { color: var(--brand-600); }
.site-header .brand { font-size: 1.4rem; }

.nav-menu { display:flex; align-items:center; gap:var(--sp-6); list-style:none; padding:0; margin:0; }
.nav-menu a { color: var(--ink-800); font-weight:600; font-size:var(--fs-sm); }
.nav-menu a:hover { color: var(--brand-700); text-decoration:none; }
.nav-menu li { position:relative; }
.dropdown > a::after { content:""; display:inline-block; width:0; height:0; border:4px solid transparent; border-top-color:var(--ink-500); margin-left:6px; vertical-align:middle; }
.dropdown-panel { position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:270px; padding:var(--sp-3); opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s; }
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel a { display:block; padding:var(--sp-2) var(--sp-3); border-radius:6px; font-size:var(--fs-sm); font-weight:600; }
.dropdown-panel a:hover { background:var(--brand-50); color:var(--brand-700); text-decoration:none; }
.dropdown-panel small { color:var(--ink-500); display:block; font-size:var(--fs-xs); margin-top:2px; font-weight:500; }
.nav-toggle { display:none; background:transparent; border:1px solid var(--ink-300); border-radius:8px; padding:8px 10px; cursor:pointer; color:var(--ink-800); }


.btn { display:inline-flex; align-items:center; gap:var(--sp-2); padding:.75rem 1.4rem; border-radius:999px; font-weight:700; font-size:var(--fs-sm); border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.btn-primary { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color:#1a1205; box-shadow: 0 8px 24px rgba(243,151,21,.35); }
.btn-primary:hover { color:#1a1205; text-decoration:none; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(243,151,21,.45); }
.btn-secondary { background:#fff; color:var(--brand-700); border-color:var(--ink-300); }
.btn-secondary:hover { border-color:var(--brand-600); color:var(--brand-700); text-decoration:none; background:var(--brand-50); }
.btn-ghost { background:transparent; color:var(--brand-700); }
.btn-ghost:hover { background:var(--brand-50); text-decoration:none; }
.btn-lg { padding:.95rem 1.7rem; font-size:var(--fs-base); }
.btn-arrow::after { content:"›"; font-size:1.3em; line-height:0; transition:transform .2s; }
.btn-arrow:hover::after { transform:translateX(3px); }


.hero { position:relative; overflow:hidden; padding: var(--sp-24) 0 var(--sp-20);
  background: radial-gradient(1100px 600px at 78% 18%, rgba(243,151,21,.16), transparent 60%),
              radial-gradient(900px 500px at 12% 90%, rgba(4,107,210,.14), transparent 60%),
              linear-gradient(160deg, #0b0d12 0%, #15110a 55%, #0b0d12 100%); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(243,151,21,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(243,151,21,.05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 80%); }

.hero-stage { position:relative; aspect-ratio:4/3; border-radius:var(--radius-xl);
  border:1px solid rgba(243,151,21,.22); overflow:hidden;
  background: linear-gradient(135deg, rgba(20,23,30,.55), rgba(11,13,18,.30));
  box-shadow: var(--shadow-lg), inset 0 0 80px rgba(243,151,21,.05); }
.hero-stage #idp-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-stage-tag { position:absolute; top:12px; right:14px; z-index:2; font-size:var(--fs-xs);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-500);
  display:inline-flex; align-items:center; gap:7px; }
.hero-stage-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand-600);
  box-shadow:0 0 10px var(--brand-500); animation: pulseDot 1.6s ease-in-out infinite; }
#hero-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero .container { position:relative; z-index:2; }
.hero-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-12); align-items:center; }
.hero h1 { color:#fff; margin-bottom:var(--sp-5); text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.hero h1 .accent { color:var(--brand-500); }
.hero .lede { font-size:var(--fs-lg); color:rgba(255,255,255,.82); margin-bottom:var(--sp-8); max-width:56ch; }
.hero-cta { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.hero-trust { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; color:rgba(255,255,255,.6); font-size:var(--fs-sm); font-weight:600; }
.hero-trust strong { color:var(--brand-500); }

.eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(243,151,21,.14); color:var(--brand-500); font-weight:700; font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:var(--sp-4); border:1px solid rgba(243,151,21,.25); }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand-600); box-shadow:0 0 10px var(--brand-500); animation: pulseDot 1.8s ease-in-out infinite; }
.section-head .eyebrow, .page-hero .eyebrow { background:var(--brand-100); color:var(--brand-700); border-color:transparent; }
.section-head .eyebrow::before, .page-hero .eyebrow::before { background:var(--brand-600); }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }


.hero-visual { position:relative; aspect-ratio:4/3; border-radius:var(--radius-xl);
  background: linear-gradient(135deg, rgba(20,23,30,.7), rgba(11,13,18,.5)); border:1px solid rgba(243,151,21,.25);
  box-shadow: var(--shadow-lg), inset 0 0 80px rgba(243,151,21,.06); overflow:hidden; backdrop-filter: blur(2px); }
.hero-visual::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  box-shadow: 0 0 16px 2px var(--brand-500); animation: scanY 3.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scanY { 0%{transform:translateY(0)} 50%{transform:translateY(360px)} 100%{transform:translateY(0)} }
.hero-doc { position:absolute; background:#fff; border-radius:10px; box-shadow:var(--shadow-lg); padding:14px; color:var(--ink-800); font-size:.75rem; width:58%; }
.hero-doc .line { height:6px; background:var(--ink-200); border-radius:3px; margin-bottom:6px; overflow:hidden; position:relative; }
.hero-doc .line::after { content:""; position:absolute; inset:0; width:40%; background:linear-gradient(90deg,transparent,rgba(243,151,21,.55),transparent); animation: shimmer 2.6s linear infinite; }
@keyframes shimmer { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }
.hero-doc .line.short{width:60%} .hero-doc .line.mid{width:80%}
.hero-doc .chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.65rem; background:var(--brand-100); color:var(--brand-700); font-weight:700; }
.hero-doc.a { top:12%; left:8%; transform:rotate(-5deg); animation: float1 7s ease-in-out infinite; }
.hero-doc.b { top:30%; right:6%; transform:rotate(4deg); animation: float2 8s ease-in-out infinite; }
.hero-doc.c { bottom:10%; left:22%; width:64%; transform:rotate(-1deg); animation: float1 9s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-12px) rotate(-5deg)} }
@keyframes float2 { 0%,100%{transform:translateY(0) rotate(4deg)} 50%{transform:translateY(10px) rotate(4deg)} }


.trustbar { padding:var(--sp-8) 0; background:#fff; border-top:1px solid var(--ink-200); border-bottom:1px solid var(--ink-200); overflow:hidden; }
.trustbar p { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-500); text-align:center; margin-bottom:var(--sp-5); font-weight:700; }
.marquee { position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; gap:var(--sp-10); width:max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { color:var(--ink-500); font-weight:800; font-size:var(--fs-lg); letter-spacing:.02em; white-space:nowrap; opacity:.7; font-style:italic; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trust-logos { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-8); align-items:center; justify-items:center; }
.trust-logos span { color:var(--ink-500); font-weight:800; font-size:var(--fs-lg); opacity:.75; font-style:italic; }


.grid { display:grid; gap:var(--sp-6); }
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
.card { background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:var(--sp-6); transition:.22s; position:relative; }
.card::before { content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--brand-600),var(--brand-500)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; transition:width .25s; }
.card:hover { box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--brand-500); }
.card:hover::before { width:100%; }
a.card:hover { text-decoration:none; }
.card h3 { margin-bottom:var(--sp-2); font-size:var(--fs-lg); }
.card p { color:var(--ink-600); font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.card-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--brand-100); color:var(--brand-700); margin-bottom:var(--sp-4); font-size:1.5rem; font-weight:800; }
.card-icon.accent { background:rgba(4,107,210,.10); color:var(--accent-600); }
.card-link { font-size:var(--fs-sm); font-weight:700; color:var(--brand-700); text-transform:uppercase; letter-spacing:.03em; }
.card-link::after { content:" ›"; font-size:1.2em; }

.section-head { text-align:center; max-width:740px; margin:0 auto var(--sp-12); }
.section-head .eyebrow { margin-bottom:var(--sp-3); }
.section-head p { color:var(--ink-600); font-size:var(--fs-lg); }


.feature-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:center; }
.feature-split.reverse { direction:rtl; } .feature-split.reverse > * { direction:ltr; }
.check-list { list-style:none; padding:0; margin:var(--sp-6) 0 0; }
.check-list li { position:relative; padding:var(--sp-2) 0 var(--sp-2) var(--sp-8); color:var(--ink-700); }
.check-list li::before { content:"✓"; position:absolute; left:0; top:10px; width:22px; height:22px; border-radius:50%; background:var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; }


.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-8); text-align:center; }
.stat .num { font-size:var(--fs-4xl); font-weight:800; color:var(--brand-500); letter-spacing:-.02em; line-height:1; }
.stat .label { font-size:var(--fs-sm); color:var(--ink-600); margin-top:var(--sp-2); }


.quote { background:var(--brand-900); color:#fff; border-radius:var(--radius-lg); padding:var(--sp-12); text-align:center;
  background-image: radial-gradient(600px 300px at 50% 0%, rgba(243,151,21,.25), transparent 60%); border:1px solid rgba(243,151,21,.15); }
.quote blockquote { font-size:var(--fs-xl); line-height:1.5; margin:0 0 var(--sp-6); font-weight:500; }
.quote cite { font-style:normal; color:var(--brand-500); font-size:var(--fs-sm); }


.cta-band { position:relative; overflow:hidden; background:linear-gradient(135deg,#0b0d12,#1a1206); color:#fff; border-radius:var(--radius-xl); padding:var(--sp-16); text-align:center; border:1px solid rgba(243,151,21,.25); }
.cta-band::before { content:""; position:absolute; inset:0; background:radial-gradient(700px 320px at 50% -10%, rgba(243,151,21,.3), transparent 60%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,.86); font-size:var(--fs-lg); max-width:60ch; margin:0 auto var(--sp-6); }
.cta-band .btn-secondary { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.cta-band .btn-secondary:hover { background:rgba(255,255,255,.08); border-color:#fff; }


.faq details { background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius); padding:var(--sp-4) var(--sp-6); margin-bottom:var(--sp-3); transition:.2s; }
.faq details[open] { border-color:var(--brand-500); box-shadow:var(--shadow-sm); }
.faq summary { cursor:pointer; font-weight:700; color:var(--brand-900); list-style:none; display:flex; justify-content:space-between; gap:var(--sp-4); }
.faq summary::after { content:"+"; color:var(--brand-600); font-size:1.5rem; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq details > *:not(summary) { margin-top:var(--sp-3); color:var(--ink-700); }


.crumbs { font-size:var(--fs-sm); color:var(--ink-500); padding:var(--sp-4) 0 0; }
.crumbs a { color:var(--ink-500); } .crumbs a:hover { color:var(--brand-700); }
.crumbs span[aria-current] { color:var(--ink-700); }
.page-hero { padding:var(--sp-16) 0 var(--sp-12); background:linear-gradient(180deg,var(--brand-50) 0%,#fff 100%); border-bottom:1px solid var(--ink-200); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(243,151,21,.14),transparent 70%); }
.page-hero .container { position:relative; z-index:1; }
.page-hero .lede { font-size:var(--fs-lg); color:var(--ink-600); max-width:64ch; }


.two-col { display:grid; grid-template-columns:1fr 320px; gap:var(--sp-12); }
.sidebar { background:var(--brand-50); border-radius:var(--radius-lg); padding:var(--sp-6); position:sticky; top:96px; height:fit-content; border:1px solid var(--brand-100); }
.sidebar h4 { font-size:var(--fs-base); margin-bottom:var(--sp-3); }
.sidebar ul { list-style:none; padding:0; margin:0 0 var(--sp-5); }
.sidebar li { padding:var(--sp-2) 0; font-size:var(--fs-sm); color:var(--ink-700); border-bottom:1px solid rgba(243,151,21,.14); }
.sidebar li:last-child { border-bottom:0; }
.sidebar li strong { color:var(--brand-900); }

.prose h2 { margin-top:var(--sp-12); } .prose h3 { margin-top:var(--sp-8); }
.prose ul, .prose ol { padding-left:var(--sp-6); color:var(--ink-700); }
.prose li { margin-bottom:var(--sp-2); }
.prose ol li { margin-bottom:var(--sp-3); }
.prose table { width:100%; border-collapse:collapse; margin:var(--sp-6) 0; }
.prose th, .prose td { padding:var(--sp-3) var(--sp-4); text-align:left; border-bottom:1px solid var(--ink-200); font-size:var(--fs-sm); }
.prose th { background:var(--brand-50); color:var(--brand-900); font-weight:700; }


.answer-box { background:var(--brand-50); border:1px solid var(--brand-100); border-left:4px solid var(--brand-600); border-radius:var(--radius); padding:var(--sp-5) var(--sp-6); margin:0 0 var(--sp-8); }
.answer-box .answer-tag { display:inline-block; font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700); margin-bottom:var(--sp-2); }
.answer-box p { margin:0; color:var(--ink-800); font-size:var(--fs-lg); line-height:1.6; }


.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-4); }
.form-field label { font-weight:700; color:var(--ink-800); font-size:var(--fs-sm); }
.form-field input, .form-field textarea, .form-field select { font-family:inherit; font-size:var(--fs-base); padding:.75rem 1rem; border:1px solid var(--ink-300); border-radius:var(--radius); background:#fff; transition:.15s; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(243,151,21,.18); }


.site-footer { background:var(--brand-900); color:rgba(255,255,255,.82); padding:var(--sp-16) 0 var(--sp-8); }
.site-footer a { color:rgba(255,255,255,.82); font-size:var(--fs-sm); } .site-footer a:hover { color:#fff; text-decoration:none; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:var(--sp-8); margin-bottom:var(--sp-12); }
.footer-col h5 { color:#fff; font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-4); font-weight:700; }
.footer-col ul { list-style:none; padding:0; margin:0; } .footer-col li { margin-bottom:var(--sp-2); }
.footer-brand { max-width:300px; } .footer-brand p { color:rgba(255,255,255,.7); font-size:var(--fs-sm); margin-top:var(--sp-3); }
.footer-brand .brand, .site-footer .brand { color:#fff; } .footer-brand .brand .w1 { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding-top:var(--sp-6); display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-xs); color:rgba(255,255,255,.6); }


.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}


.text-center{text-align:center}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-6{margin-top:var(--sp-6)}.mb-6{margin-bottom:var(--sp-6)}.max-w-prose{max-width:65ch}


@media (max-width: 960px) {
  .hero { padding: var(--sp-16) 0 var(--sp-12); }
  .hero-inner, .feature-split, .two-col { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .nav-toggle { display:inline-flex; }
  .nav-menu { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; gap:0; padding:var(--sp-3); border-bottom:1px solid var(--ink-200); box-shadow:var(--shadow); }
  .nav-menu.open { display:flex; }
  .nav-menu li { width:100%; }
  .nav-menu a { display:block; padding:var(--sp-3); border-radius:6px; }
  .dropdown-panel { position:static; box-shadow:none; border:none; padding:0 0 0 var(--sp-3); opacity:1; visibility:visible; transform:none; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .cta-band { padding:var(--sp-10); }
  section { padding:var(--sp-12) 0; }
  .quote { padding:var(--sp-8); } .quote blockquote { font-size:var(--fs-lg); }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
  .footer-grid { grid-template-columns:1fr; }
  .hero-visual { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, #idp-canvas { display:none; }
  a { color:#000; text-decoration:underline; }
}


.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); box-shadow: 0 0 10px rgba(243,151,21,.5); }
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(11,13,18,.09); background: rgba(255,255,255,.97); }
.to-top { position: fixed; right: 20px; bottom: 92px; z-index: 55; width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer; background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #1a1205; font-size: 1.3rem; font-weight: 800; box-shadow: 0 8px 24px rgba(243,151,21,.4);
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.to-top.show { opacity: 1; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.98); }
@media print { .scroll-progress, .to-top, #hero-bg { display: none; } }


.gloss-index { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-8); }
.gloss-index a { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100); border-radius:999px; padding:6px 12px; }
.gloss-index a:hover { background:var(--brand-100); text-decoration:none; }
.glossary { margin:0 0 var(--sp-10); }
.glossary dt { font-weight:800; color:var(--brand-900); font-size:var(--fs-lg); margin-top:var(--sp-6);
  scroll-margin-top:90px; padding-left:var(--sp-4); border-left:3px solid var(--brand-600); }
.glossary dd { margin:var(--sp-2) 0 0 var(--sp-4); color:var(--ink-700); line-height:1.65; }
.gloss-links { display:block; margin-top:var(--sp-2); font-size:var(--fs-sm); font-weight:600; }


.cat-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-8); }
.cat-chips a { font-size:var(--fs-sm); font-weight:600; color:var(--ink-700); background:#fff;
  border:1px solid var(--ink-200); border-radius:999px; padding:7px 14px; transition:.15s; }
.cat-chips a:hover { border-color:var(--brand-500); color:var(--brand-700); text-decoration:none; background:var(--brand-50); }
.cat-chips a.active { background:var(--brand-600); border-color:var(--brand-600); color:#1a1205; }
.cat-chips a span { opacity:.6; font-weight:700; font-size:var(--fs-xs); }
.cat-chips a.active span { opacity:.8; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin-top:var(--sp-12); }
.pagination a, .pagination span { min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; border-radius:8px; border:1px solid var(--ink-200); font-size:var(--fs-sm); font-weight:700; color:var(--ink-700); background:#fff; }
.pagination a:hover { border-color:var(--brand-500); color:var(--brand-700); text-decoration:none; background:var(--brand-50); }
.pagination .page-num.active { background:var(--brand-600); border-color:var(--brand-600); color:#1a1205; }
.pagination .page-prev, .pagination .page-next { font-weight:700; }


.wt-launch { position:fixed; right:20px; bottom:20px; z-index:60; width:60px; height:60px; border-radius:50%;
  border:none; cursor:pointer; background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); color:#1a1205;
  font-size:1.6rem; box-shadow:0 10px 30px rgba(243,151,21,.45); transition:transform .2s; }
.wt-launch:hover { transform:translateY(-3px) scale(1.04); }
.wt-launch.wt-hidden { display:none; }
.wt-panel { position:fixed; right:20px; bottom:20px; z-index:61; width:370px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; }
.wt-panel[hidden] { display:none !important; }
.wt-head { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--brand-900); color:#fff; }
.wt-head small { display:block; color:rgba(255,255,255,.6); font-size:var(--fs-xs); font-weight:500; }
.wt-head .wt-dot { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); }
.wt-close { margin-left:auto; background:transparent; border:none; color:#fff; font-size:1.5rem; cursor:pointer; line-height:1; }
.wt-msgs { flex:1; overflow-y:auto; padding:16px; background:var(--ink-50); display:flex; flex-direction:column; gap:10px; }
.wt-msg { max-width:85%; padding:10px 13px; border-radius:14px; font-size:var(--fs-sm); line-height:1.5; }
.wt-msg a { font-weight:700; }
.wt-bot { background:#fff; border:1px solid var(--ink-200); align-self:flex-start; border-bottom-left-radius:4px; color:var(--ink-800); }
.wt-user { background:var(--brand-600); color:#1a1205; align-self:flex-end; border-bottom-right-radius:4px; font-weight:600; }
.wt-rel { margin-top:8px; font-size:var(--fs-xs); color:var(--ink-500); }
.wt-chips { display:flex; flex-wrap:wrap; gap:6px; }
.wt-chip { background:#fff; border:1px solid var(--brand-200,#ffd79a); color:var(--brand-700); border-radius:999px; padding:6px 12px; font-size:var(--fs-xs); font-weight:700; cursor:pointer; }
.wt-chip:hover { background:var(--brand-50); }
.wt-card { background:#fff; border:1px solid var(--ink-200); border-radius:10px; padding:12px; font-size:var(--fs-sm); }
.wt-act { display:block; padding:9px 12px; margin-top:6px; border:1px solid var(--ink-200); border-radius:8px; color:var(--ink-800); font-weight:600; }
.wt-act:hover { border-color:var(--brand-500); background:var(--brand-50); text-decoration:none; }
.wt-act span { margin-right:6px; }
.wt-input { display:flex; gap:8px; padding:10px; border-top:1px solid var(--ink-200); background:#fff; }
.wt-input input { flex:1; border:1px solid var(--ink-300); border-radius:999px; padding:10px 14px; font-size:var(--fs-sm); font-family:inherit; }
.wt-input input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(243,151,21,.15); }
.wt-input button { width:42px; border:none; border-radius:50%; background:var(--brand-600); color:#1a1205; font-size:1.1rem; font-weight:800; cursor:pointer; }
.wt-foot { padding:8px 12px; font-size:var(--fs-xs); color:var(--ink-500); text-align:center; background:#fff; border-top:1px solid var(--ink-100); }
@media (max-width:560px){ .wt-panel{ right:8px; bottom:8px; height:calc(100vh - 16px); } }
@media print { .wt-launch, .wt-panel { display:none !important; } }



.hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
#form-result { display:none; padding:var(--sp-4); border-radius:var(--radius); margin-bottom:var(--sp-4); font-weight:600; }
#form-result.ok { display:block; background:rgba(52,210,127,.12); border:1px solid #34d27f; color:#0f6e56; }
#form-result.err { display:block; background:rgba(229,62,62,.10); border:1px solid var(--danger); color:#a32d2d; }


.hero-art { display:grid; grid-template-columns:1.12fr .88fr; gap:var(--sp-10); align-items:center; }
.hero-illus { width:100%; height:auto; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); border:1px solid var(--ink-200); }
@media (max-width:960px){ .hero-art{ grid-template-columns:1fr; gap:var(--sp-6); } }


.trust-logos { align-items:center; }
.trust-logo { max-height:46px; width:auto; max-width:150px; object-fit:contain; filter:grayscale(1); opacity:.65; transition:filter .2s, opacity .2s; }
.trust-logo:hover { filter:none; opacity:1; }
.testi-by { display:flex; align-items:center; gap:10px; margin-top:var(--sp-3); }
.testi-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--ink-100); }
.testi-by strong { display:block; color:var(--brand-900); font-size:var(--fs-sm); }
.testi-by small { color:var(--ink-500); }
