/* MSecure v2 — premium dark + lead-gen friendly */
:root{
  --bg: #070A12;
  --bg2:#0B1020;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.10);
  --text:#E9EDF5;
  --muted: rgba(233,237,245,.72);
  --muted2: rgba(233,237,245,.56);
  --accent:#7C5CFF;
  --accent2:#12D6DF;
  --ok:#2EE59D;
  --warn:#FFCC66;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 24px;

  --w: 1120px;
  --pad: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(18,214,223,.22), transparent 55%),
    radial-gradient(900px 600px at 40% 120%, rgba(124,92,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width:var(--w); margin:0 auto; padding:0 var(--pad)}
.section{padding:72px 0}
@media (max-width: 820px){ .section{padding:54px 0} }

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,10,18,.62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px var(--pad)}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.logo{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(18,214,223,.85));
  box-shadow: 0 10px 26px rgba(124,92,255,.18);
  font-size:14px;
}
.nav-links{display:flex; gap:18px; color:var(--muted)}
.nav-links a{padding:10px 10px; border-radius:12px}
.nav-links a:hover{background: rgba(255,255,255,.05); color:var(--text)}

@media (max-width: 820px){
  .nav-links{display:none}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.btn:hover{transform: translateY(-1px); transition: .18s ease}
.btn.primary{
  border: 1px solid rgba(124,92,255,.45);
  background: linear-gradient(135deg, rgba(124,92,255,.92), rgba(18,214,223,.72));
}
.btn.ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:none;
}

.h1{font-size:44px; line-height:1.08; margin:0}
.h2{font-size:34px; line-height:1.15; margin:0}
.sub{margin:10px 0 0; color:var(--muted); font-size:16px}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 13px;
}

.grid{display:grid; gap:16px}
.cols2{grid-template-columns: 1.15fr .85fr}
.cols3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px){ .cols2{grid-template-columns:1fr} }
@media (max-width: 980px){ .cols3{grid-template-columns:1fr} }

.card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted)}
.card.glow{
  position:relative;
  overflow:hidden;
}
.card.glow:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 220px at 15% 0%, rgba(124,92,255,.28), transparent 60%),
              radial-gradient(520px 220px at 90% 15%, rgba(18,214,223,.18), transparent 55%);
  opacity:.9; pointer-events:none;
}

.hero{
  padding: 54px 0 26px;
}
.hero-wrap{
  position:relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1100px 480px at 15% 10%, rgba(124,92,255,.30), transparent 55%),
    radial-gradient(900px 420px at 85% 0%, rgba(18,214,223,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.hero-inner{padding: 34px; display:grid; gap:18px; grid-template-columns: 1.25fr .75fr}
@media (max-width: 980px){ .hero-inner{grid-template-columns:1fr; padding:22px} }

.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.meta-row{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted2); font-size:13px}
.meta-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
}

.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge{
  font-size:12px; color:var(--text);
  padding:7px 10px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.list{margin:0; padding-left:18px; color:var(--muted)}
.mini{margin:0; padding-left:18px; color:var(--muted)}
.mini li{margin:6px 0}

.hr{
  height:1px; background: rgba(255,255,255,.08);
  margin:18px 0;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 26px 0;
  color: var(--muted2);
}
.foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot-links{display:flex; gap:14px}
.foot-links a{opacity:.85}
.foot-links a:hover{opacity:1}

.small{font-size:13px; color:var(--muted2)}

.note{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(46,229,157,.10);
  border: 1px solid rgba(46,229,157,.25);
}
.dot{width:10px; height:10px; border-radius:999px; background: var(--ok); margin-top:6px}

.icon{
  width:18px; height:18px; display:inline-block;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(18,214,223,.85));
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(124,92,255,.16);
}

/* === CSP hardening: zamiana inline style na klasy === */
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
/* Ujednolicenie wyglądu pól formularzy (kontakt + magnety) */
.form input, .form textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
}

/* === CSP hardening: mapowanie inline style -> klasy === */
.mw-58ch{max-width:58ch}
.mw-62ch{max-width:62ch}

.bg-ok{background:var(--ok)}
.bg-warn{background:var(--warn)}
.bg-accent2{background:var(--accent2)}

.mt-6{margin-top:6px}
/* === util: po usunięciu inline style === */

/* utilities */
.ml-8{margin-left:8px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.gap-12{gap:12px}
.hidden{display:none!important}
.muted{color:rgba(233,237,245,.62)}

/* === components: proofbar + forms (phase1) === */
.proofbar{padding-top:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.stats{grid-template-columns:1fr}}
.stat{padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.03)}
.stat .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,237,245,.62)}
.stat .v{font-size:28px;font-weight:800;margin-top:6px;line-height:1.05}
.stat .d{margin-top:8px;color:rgba(233,237,245,.80)}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(233,237,245,.88);font-size:13px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
.field .small{display:inline-block}
.input,.select,.textarea{width:100%;margin-top:6px;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text);outline:none}
.textarea{min-height:140px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(31,111,235,.65);box-shadow:0 0 0 3px rgba(31,111,235,.18)}

/* === MSecure PHASE1: forms + proofbar === */

/* Form controls */
.field{display:flex;flex-direction:column}
.input,.textarea,.select{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}
.input:focus,.textarea:focus,.select:focus{
  border-color: rgba(31,111,235,.75);
  box-shadow: 0 0 0 3px rgba(31,111,235,.18);
}
.textarea{resize:vertical;min-height:120px}

/* Proofbar */
.proofbar{
  background: rgba(31,111,235,.12);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.proofbar-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  color: rgba(233,237,245,.86);
  font-size:14px;
}
.proofbar .sep{opacity:.55}
.proofbar .dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--accent, #1F6FEB);
  display:inline-block;
}
@media (max-width: 720px){
  .proofbar-inner{flex-wrap:wrap;gap:8px}
}

/* === MSecure PHASE2: services page === */
.section-title{
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.15;
}
.section-sub{
  margin: 0 0 18px 0;
  color: rgba(233,237,245,.72);
  max-width: 70ch;
}

.pricing{align-items:stretch}
.price-card{position:relative}
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,245,.86);
  font-size: 12px;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:12px 14px;
  background: rgba(255,255,255,.04);
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  color: rgba(233,237,245,.92);
}
.faq-body{
  margin-top:8px;
  color: rgba(233,237,245,.72);
  line-height: 1.6;
}

/* === MSecure PHASE3: case studies === */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,245,.86);
  font-size: 12px;
  letter-spacing: .02em;
}

.kpis{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.kpi{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  min-width: 180px;
}
.kpi .k{font-size:12px;color: rgba(233,237,245,.62)}
.kpi .v{font-weight:800;color: rgba(233,237,245,.92)}

.cs-grid{display:grid;gap:14px}
@media(min-width:900px){.cs-grid{grid-template-columns:repeat(3,1fr)}}

.cs-card{position:relative}
.cs-card h3{margin-bottom:6px}
.cs-card p{color: rgba(233,237,245,.72)}
.cs-card .mini{margin-top:10px}

.toc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.toc a{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,245,.86);
  font-size: 12px;
  text-decoration:none;
}
.toc a:hover{filter:brightness(1.05)}

.cs-section{scroll-margin-top:90px}
.cs-section h2{margin:0 0 10px 0}
.cs-section p{color: rgba(233,237,245,.72); line-height:1.65}
.cs-split{display:grid;gap:14px}
@media(min-width:900px){.cs-split{grid-template-columns: 1.1fr .9fr}}
.cs-aside .card{position:sticky;top:90px}

/* === MSecure PHASE4: home === */
.steps{display:grid;gap:14px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:999px;
  background:rgba(31,111,235,.18);
  border:1px solid rgba(31,111,235,.35);
  color:rgba(233,237,245,.92);
  font-weight:800;
  margin-bottom:10px;
}
.step p{color: rgba(233,237,245,.72); line-height:1.65}

.faq-list{display:grid;gap:10px}
.faq{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius:16px;
  padding:10px 12px;
}
.faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color: rgba(233,237,245,.92);
}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:8px 0 0 0;color: rgba(233,237,245,.72); line-height:1.65}

.metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.metric{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,245,.86);
  font-size:12px;
  letter-spacing:.02em;
}

/* === MSecure PHASE5: contact === */
.contact-grid{display:grid;gap:18px}
@media(min-width:980px){.contact-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.stack{display:grid;gap:12px}
.card.soft{background:rgba(255,255,255,.03)}
.note{color:rgba(233,237,245,.72);line-height:1.65}
.kv{display:grid;gap:10px}
.kv .row{display:flex;gap:10px;align-items:flex-start}
.kv .k{min-width:120px;color:rgba(233,237,245,.62);font-size:12px;letter-spacing:.02em}
.kv .v{color:rgba(233,237,245,.86)}

/* === MSecure PHASE6: trust === */
.truststrip{background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.08)}
.truststrip-inner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 0;color:rgba(233,237,245,.84);font-size:13px}
.truststrip-label{color:rgba(233,237,245,.62);font-weight:600;letter-spacing:.02em}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-size:12px}
.chip .dot{width:7px;height:7px;border-radius:999px;background:var(--accent)}
.trustcards{display:grid;gap:14px}
@media(min-width:980px){.trustcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trustcards .card h3{margin:0 0 6px 0}
.trustcards .note{margin:0;color:rgba(233,237,245,.72);line-height:1.65}

/* === MSecure PHASE7: stats === */
.stats{display:grid;gap:14px}
@media(min-width:980px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:16px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.stat .num{font-size:28px;line-height:1.1;font-weight:800;letter-spacing:.01em}
.stat .lbl{margin-top:6px;color:rgba(233,237,245,.72);line-height:1.55;font-size:13px}

/* === MSecure PHASE8: trust === */
.trust{display:grid;gap:14px}
@media(min-width:980px){.trust{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trust .card{height:100%}
.list-check{list-style:none;margin:10px 0 0;padding:0}
.list-check li{position:relative;padding-left:18px;margin:8px 0;color:rgba(233,237,245,.86);line-height:1.55}
.list-check li:before{content:"✓";position:absolute;left:0;top:0;color:rgba(233,237,245,.70)}

/* === MSecure PHASE9: service landing === */
.subnav{position:sticky;top:0;z-index:30;background:rgba(11,18,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.subnav .in{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0}
.subnav .tabs{display:flex;gap:8px;flex-wrap:wrap}
.subnav .tabs a{font-size:14px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(233,237,245,.86)}
.subnav .tabs a:hover{border-color:rgba(255,255,255,.22)}
.subnav .cta{display:flex;gap:8px;align-items:center}
.anchor{scroll-margin-top:86px}

.deliver{display:grid;gap:12px}
@media(min-width:980px){.deliver{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deliver .card h3{margin-bottom:6px}

.timeline{display:grid;gap:12px}
@media(min-width:980px){.timeline{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;background:rgba(255,255,255,.03)}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);margin-right:8px;font-size:13px;color:rgba(233,237,245,.8)}
.step .t{font-weight:700}
.step p{margin:8px 0 0;color:rgba(233,237,245,.78)}

.faq{border-top:1px solid rgba(255,255,255,.10)}
.faq details{border-bottom:1px solid rgba(255,255,255,.10);padding:12px 0}
.faq summary{cursor:pointer;font-weight:700;color:rgba(233,237,245,.92)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:rgba(233,237,245,.60)}
.faq details[open] summary:after{content:"–"}
.faq p{margin:10px 0 0;color:rgba(233,237,245,.78)}

/* artefakty */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.cards3{grid-template-columns:1fr}}
.card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.filemeta{margin-top:10px}
.filemeta a{word-break:break-word}

/* === artefacts (phase13) === */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.filterbtn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text);padding:10px 12px;border-radius:14px;cursor:pointer;font:inherit}
.filterbtn:hover{background:rgba(255,255,255,.06)}
.filterbtn.is-active{border-color:rgba(31,111,235,.65);background:rgba(31,111,235,.12)}
.artifacts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width: 980px){.artifacts-grid{grid-template-columns:1fr}}
.artifact-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px}
.artifact-card h3{margin:0 0 6px 0}
.artifact-meta{margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{font-size:12px;border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;color:rgba(233,237,245,.86);background:rgba(255,255,255,.03)}
.actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.is-hidden{display:none!important}
.filemeta{word-break:break-all}

/* === polish (phase14) === */
:root{
  --bg: #0B1220;
  --panel: rgba(255,255,255,.03);
  --panel2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --text: rgb(233,237,245);
  --muted: rgba(233,237,245,.70);
  --muted2: rgba(233,237,245,.55);
  --accent: #1F6FEB;
}

html{scroll-behavior:smooth}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px}
.section{padding:72px 0}
@media (max-width:980px){.section{padding:56px 0}}

.h1{letter-spacing:-0.02em}
.section-title{letter-spacing:-0.01em}

p{line-height:1.65}
.sub{color:var(--muted)}
.small{color:var(--muted2)}

.card, .artifact-card{
  border:1px solid var(--stroke);
  background:var(--panel);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.card:hover, .artifact-card:hover{
  border-color:var(--stroke2);
  transform:translateY(-1px);
  transition:transform .15s ease, border-color .15s ease;
}

.btn{
  border:1px solid var(--stroke2);
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid rgba(31,111,235,.65);
  outline-offset:2px;
  border-radius:14px;
}

/* === nav polish (phase16) === */
.subnav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,18,32,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.subnav a{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  color:rgba(233,237,245,.72);
  text-decoration:none;
}
.subnav a:hover{ color:rgba(233,237,245,.92); background:rgba(255,255,255,.05); }
.subnav a.is-active{ color:rgba(233,237,245,1); background:rgba(31,111,235,.12); }
[id]{ scroll-margin-top: 96px; }

/* === a11y+nav (phase17) === */
.skip-link{
  position:absolute;
  left:12px; top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(31,111,235,.18);
  border:1px solid rgba(31,111,235,.35);
  color:rgba(233,237,245,1);
  text-decoration:none;
  transform:translateY(-140%);
  transition:transform .18s ease;
  z-index:9999;
}
.skip-link:focus{ transform:translateY(0); outline:none; }

.nav .links a.is-active{
  color:rgba(233,237,245,1);
  background:rgba(255,255,255,.06);
  border-radius:12px;
}

/* === proof (phase18) === */
.proof-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:980px){.proof-grid{grid-template-columns:1fr}}
.proof-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px}
.proof-card h3{margin:0 0 8px 0}
.proof-list{margin:0;padding-left:18px}
.proof-list li{margin:6px 0}
.proof-cta{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}

/* === social proof (phase20) === */
.stackbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.stackchip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);padding:8px 12px;border-radius:999px;font-size:14px;color:rgba(233,237,245,.86)}
.stackchip .dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.quotegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.quotegrid{grid-template-columns:1fr}}
.quote{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px}
.quote .q{margin:0 0 10px 0;font-size:15px;line-height:1.5;color:rgba(233,237,245,.92)}
.quote .who{font-size:13px;color:rgba(233,237,245,.62)}
.quote .tag{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);border-radius:999px;padding:5px 10px;font-size:12px;color:rgba(233,237,245,.72);margin-bottom:10px}

/* === proof metrics (phase21) === */
.metricgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:980px){.metricgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.metricgrid{grid-template-columns:1fr}}
.mcard{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:14px}
.mcard .k{font-size:12px;color:rgba(233,237,245,.62);margin-bottom:6px}
.mcard .v{font-size:15px;color:rgba(233,237,245,.92);font-weight:600}
.quote .q{font-size:15px;line-height:1.6}
.quote .who{margin-top:6px}

/* === onboarding (phase22) === */
.weekgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.weekgrid{grid-template-columns:1fr}}
.stepcard{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px}
.stepcard .pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02)}
.stepcard h3{margin:10px 0 6px 0}
.stepcard ul{margin:8px 0 0 18px}
.stepcard li{margin:6px 0}

/* === sla/scope (phase22) === */
.slagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:980px){.slagrid{grid-template-columns:1fr}}
.slabox{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px}
.slabox h3{margin:0 0 8px 0}
.slabox ul{margin:8px 0 0 18px}
.slabox li{margin:6px 0}
.scopegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:980px){.scopegrid{grid-template-columns:1fr}}
.scopebox{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);border-radius:18px;padding:16px}
.scopebox .title{font-weight:700;margin:0 0 6px 0}
.scopebox ul{margin:8px 0 0 18px}
.scopebox li{margin:6px 0}

/* === pricing guardrails (phase23) === */
.pricegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.pricegrid{grid-template-columns:1fr}}
.pcard{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px}
.pcard h3{margin:0 0 8px 0}
.pcard ul{margin:10px 0 0 18px}
.pcard li{margin:6px 0}
.pnote{margin-top:12px;color:rgba(233,237,245,.62);font-size:13px}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ptag{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02)}

/* === decision cards (phase24) === */
.decisiongrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.decisiongrid{grid-template-columns:1fr}}
.dcard{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:20px;padding:16px;position:relative}
.dcard .badge{display:inline-block}
.dcard h3{margin:10px 0 8px 0}
.dcard p{margin:0;color:rgba(233,237,245,.72)}
.dcard ul{margin:12px 0 0 18px}
.dcard li{margin:6px 0}
.dcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.dcard.is-featured{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.05)}

/* === premium typography (phase25) === */
:root{
  --lead: rgba(233,237,245,.82);
  --subtle: rgba(233,237,245,.62);
}

.h1{letter-spacing:-.02em}
.section-title{letter-spacing:-.01em}

.hero .sub, .lead, .lede{
  color:var(--lead);
  font-size:18px;
  line-height:1.55;
  max-width:68ch;
}
@media (max-width:820px){
  .hero .sub, .lead, .lede{font-size:16px}
}

p{line-height:1.65}
.small{line-height:1.45}

.card, .dcard, .artifact-card, .pcard, .mcard{
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

ul{padding-left:18px}
li{line-height:1.55}

.btn.primary{transform:translateY(0); transition:transform .15s ease, filter .15s ease}
.btn.primary:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.ghost:hover{filter:brightness(1.05)}

.kpi .v{letter-spacing:-.01em}
.pill, .chip, .badge{letter-spacing:.01em}

/* === results (phase26) === */
.resultgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.resultgrid{grid-template-columns:1fr}}
.rcard{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:20px;padding:16px}
.rcard h3{margin:10px 0 8px 0}
.rcard ul{margin:12px 0 0 18px}
.rcard li{margin:6px 0;color:rgba(233,237,245,.82)}
.cta-row{margin-top:16px}

/* === sow/timeline (phase27) === */
.sowgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.sowgrid{grid-template-columns:1fr}}
.sowcard{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:20px;padding:16px}
.sowcard h3{margin:0 0 10px 0}
.sowcard ul{margin:0 0 0 18px}
.sowcard li{margin:6px 0;color:rgba(233,237,245,.82)}
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:980px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tgrid{grid-template-columns:1fr}}
.tstep{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);border-radius:18px;padding:14px}
.tstep .t-title{font-weight:700;margin:10px 0 6px 0}

/* === contact summary (phase28) === */
.summarybox{margin-top:8px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.02);border-radius:16px;padding:12px;color:rgba(233,237,245,.86);font-size:13px;line-height:1.45}
.field.is-error .input, .field.is-error .textarea, .field.is-error .select{border-color:rgba(255,140,140,.55)}
.errmsg{margin-top:8px;color:rgba(255,160,160,.92);font-size:12px}

/* === fonts (phase35_gfonts) === */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?v=202602081145) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?v=202602081145) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?v=202602081145) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?v=202602081145) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?v=202602081145) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?v=202602081145) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?v=202602081145) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* === debug (phase37) === */
.debugbar{
  position:fixed; right:14px; bottom:14px; z-index:9999;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,16,32,.85);
  backdrop-filter: blur(10px);
  color:rgba(233,237,245,.92);
  font-size:12px; line-height:1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-width: 340px;
}
.debugbar .t{font-weight:700; margin-bottom:4px}
.debugbar .k{color:rgba(233,237,245,.62)}
.debugbar .v{color:rgba(233,237,245,.92); font-weight:600}
.debugbar .row{display:flex; gap:8px; margin-top:4px}
.debugbar .row > div{flex:1; min-width:0}

/* phase37 helpers */
.mt6{margin-top:6px}

/* === debugpill (phase38) === */
.ms-debugpill{position:fixed;right:12px;bottom:12px;z-index:99999;background:rgba(0,0,0,.72);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 10px;font:12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:72ch;backdrop-filter:blur(8px)}
.ms-debugpill.is-error{background:rgba(160,0,0,.78);border-color:rgba(255,255,255,.26)}


/* === attribution + honeypot (phase40) === */
.hp-field{
  position:absolute !important;
  left:-6000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.thanksbox{margin-top:14px}


/* === attribution + subject (phase41) === */
.thanks-id{margin:6px 0 10px 0;font-size:18px;font-weight:700;color:rgba(233,237,245,.92)}


/* === lead magnet (phase42) === */
.magnetgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:980px){.magnetgrid{grid-template-columns:1fr}}
.mcard2{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:20px;padding:16px}
.mcard2 h3{margin:10px 0 8px 0}
.mcard2 p{margin:0;color:rgba(233,237,245,.72)}