/* =========================================================
   TOKENS (WCAG-first, light + dark)
   ========================================================= */
:root{
  --bg: #f6f6f2;
  --bg2:#ffffff;
  --fg:#101217;
  --muted:#3a4353;
  --border:#0f1320;
  --shadow:#0f1320;

  --accent:#5f6e0a;   /* olive */
  --accent2:#183a76;  /* navy */
  --accent-contrast:#ffffff;

  --focus:#183a76;
  --focus-ring: 0 0 0 4px rgba(24,58,118,.25);

  --radius:18px;
  --radius-sm:12px;

  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;
  --space-6:30px;
  --space-7:40px;
  --space-8:56px;

  --max: 1120px;

  --nav-h: 68px;
}

html[data-theme="dark"]{
  --bg:#0b0d11;
  --bg2:#111520;
  --fg:#f4f6ff;
  --muted:#c7cfdd;
  --border:#d7deed;
  --shadow:#000000;

  --accent:#b8d80f;
  --accent2:#6ea0ff;
  --accent-contrast:#0b0d11;

  --focus:#b8d80f;
  --focus-ring: 0 0 0 4px rgba(184,216,15,.25);
}

*{box-sizing:border-box;}
/* Ensure the HTML `hidden` attribute is never overridden by author styles. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
  line-height:1.45;
}

img{max-width:100%; height:auto; display:block; margin-inline:auto;}
a{color:inherit;}
p{margin:0 0 var(--space-3);}
ul{margin:0; padding:0;}
li{list-style:none;}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--space-4);}

/* Skip link */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  transform:translateY(-150%);
  background:var(--bg2);
  color:var(--fg);
  border:3px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  z-index:9999;
  box-shadow:6px 6px 0 var(--shadow);
}
.skip-link:focus{transform:translateY(0); outline:none;}

/* Navbar + sticky */
.site-header{position:relative;}
.nav-wrap{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:3px solid var(--border);
}
.navbar{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:0 var(--space-4);
  max-width:var(--max);
  margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  border:3px solid transparent;
}
.brand-link:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}
.brand-mark img{width:54px; height:32px;}
.brand-text{font-weight:900; letter-spacing:.02em;}

/* Nav links */
.nav-links{
  display:flex;
  gap:6px;
  margin-left:auto;
  padding:0;
}
.nav-links a{
  display:inline-flex;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  border:3px solid transparent;
  color:var(--fg);
}
.nav-links a:hover{background:var(--bg2); border-color:var(--border);}
.nav-links a:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}

.nav-tools{display:flex; align-items:center; gap:10px; margin-left:8px;}

/* Language dropdown (custom, accessible) */
.lang{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:3px solid var(--border);
  background:var(--bg2);
  color:var(--fg);
  cursor:pointer;
  font-weight:700;
}
.lang-btn:hover{transform:translateY(-1px);}
.lang-btn:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}
.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:var(--bg2);
  border:3px solid var(--border);
  border-radius:14px;
  padding:6px;
  box-shadow:10px 10px 0 var(--shadow);
}
.lang-menu li{
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  border:2px solid transparent;
}
.lang-menu li:hover{background: color-mix(in oklab, var(--accent) 18%, var(--bg2)); border-color:var(--border);}
.lang-menu li:focus{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}

.theme-btn{
  width:44px; height:44px;
  border-radius:14px;
  border:3px solid var(--border);
  background:var(--bg2);
  color:var(--fg);
  cursor:pointer;
  font-weight:900;
}
.theme-btn:hover{transform:translateY(-1px);}
.theme-btn:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}

.nav-toggle{
  width:44px; height:44px;
  border-radius:14px;
  border:3px solid var(--border);
  background:var(--bg2);
  color:var(--fg);
  cursor:pointer;
  display:none;
}
.nav-toggle:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}

.mobile-menu{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--space-4) var(--space-3);
  display:none;
  gap:10px;
}
.mobile-menu:not([hidden]){display:grid;}
.mobile-menu a{
  text-decoration:none;
  padding:12px 14px;
  background:var(--bg2);
  border:3px solid var(--border);
  border-radius:14px;
}
.mobile-menu a:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring);}

/* Progress */
.progress{height:6px; background: color-mix(in oklab, var(--bg2) 40%, var(--bg));}
.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Hero */
.hero{
  position:relative;
  padding: var(--space-7) 0 var(--space-8);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 80% 30%, color-mix(in oklab, var(--accent2) 24%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 80%, transparent), var(--bg));
  pointer-events:none;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:-2px;
  background-image:url("/assets/web/abstract-bg-1920.webp");
  background-size:cover;
  background-position:center;
  opacity:.10;
  mix-blend-mode:multiply;
}
html[data-theme="dark"] .hero-bg::after{opacity:.14; mix-blend-mode:screen;}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-6);
  align-items:center;
  position:relative;
}
.kicker{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:3px solid var(--border);
  background:var(--bg2);
  font-weight:800;
  box-shadow:6px 6px 0 var(--shadow);
}
h1{
  margin: var(--space-4) 0 var(--space-2);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height:1.05;
  padding-top:15px;
  padding-bottom:10px;
}
.subhead{
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color:var(--muted);
  max-width:52ch;
}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin: var(--space-4) 0;}
.badge{
  padding:8px 10px;
  border-radius:999px;
  border:2px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 80%, var(--accent) 8%);
  font-weight:800;
  font-size:.95rem;
}
.hero-cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: var(--space-4);}
.micro{color:var(--muted); font-weight:600; margin-top: var(--space-3);}

.pack-frame{
  position:relative;
  background:var(--bg2);
  border:3px solid var(--border);
  border-radius:var(--radius);
  box-shadow:14px 14px 0 var(--shadow);
  padding: var(--space-4);
}
.pack-frame picture img{width:100%; height:auto;}
.sticker{
  position:absolute;
  right:-10px;
  top:-12px;
  width:88px; height:88px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:var(--accent-contrast);
  border:3px solid var(--border);
  display:grid;
  place-items:center;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:8px 8px 0 var(--shadow);
}
.sticker span{font-size:.7rem; font-weight:800; opacity:.95;}

.hero--offline{padding:var(--space-6) 0 var(--space-7);}

/* Buttons */
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  border:3px solid var(--border);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.01em;
  min-width: min(100%, 360px);
  box-shadow:8px 8px 0 var(--shadow);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0); box-shadow:6px 6px 0 var(--shadow);}
.btn:focus-visible{outline:none; border-color:var(--focus); box-shadow:var(--focus-ring), 8px 8px 0 var(--shadow);}
.btn-primary{background:var(--accent); color:var(--accent-contrast);}
.btn-ghost{background:var(--bg2); color:var(--fg);}

/* Sections */
.section{
  padding:30px 0;
}
.section-title{
  margin:0 0 var(--space-4);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  padding-top:15px;
  padding-bottom:10px;
}
.article{
  background:var(--bg2);
  border:3px solid var(--border);
  border-radius:var(--radius);
  padding: var(--space-5);
  box-shadow:12px 12px 0 var(--shadow);
  margin-bottom: var(--space-5);
}
.article:last-child{margin-bottom:0;}
.article-title{
  margin:0 0 var(--space-3);
  font-size:1.25rem;
  padding-top:15px;
  padding-bottom:10px;
}
.muted{color:var(--muted);}
.small{font-size:.92rem;}

/* Bullets */
.bullets{
  display:grid;
  gap:10px;
  margin-top: var(--space-3);
}
.bullets li{
  position:relative;
  padding-left:34px;
  font-weight:700;
}
.bullets li::before{
  content:"";
  position:absolute;
  left:0; top:5px;
  width:18px; height:18px;
  border:3px solid var(--border);
  background: color-mix(in oklab, var(--accent) 40%, var(--bg2));
  border-radius:6px;
}

/* Proof */
.proof-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.proof-card{
  border:3px solid var(--border);
  border-radius:var(--radius-sm);
  background: color-mix(in oklab, var(--bg2) 85%, var(--accent2) 6%);
  padding: var(--space-4);
  box-shadow:8px 8px 0 var(--shadow);
}
.proof-card h4{margin:0 0 10px; font-size:1rem;}
.proof-card p{margin:0; color:var(--muted); font-weight:650;}

.proof-rail{
  margin-top: var(--space-5);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items:start;
}
.proof-img{
  border-radius:var(--radius);
  border:3px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 75%, var(--accent) 8%);
  padding: var(--space-4);
  box-shadow:10px 10px 0 var(--shadow);
}
.trust-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding: var(--space-3);
  background: var(--bg2);
  border:3px solid var(--border);
  border-radius:var(--radius);
  box-shadow:10px 10px 0 var(--shadow);
}
.note{
  margin-top: var(--space-3);
  border:3px solid var(--border);
  border-radius:var(--radius);
  padding: var(--space-4);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg2));
  box-shadow:10px 10px 0 var(--shadow);
}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.price-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--bg2);
  border:3px solid var(--border);
  border-radius:var(--radius);
  padding: var(--space-4);
  box-shadow:12px 12px 0 var(--shadow);
}
.price-head{display:flex; flex-direction:column; gap:6px; margin-bottom:8px;}
.price-tag{
  align-self:flex-start;
  padding:6px 10px;
  border:2px solid var(--border);
  border-radius:999px;
  background: color-mix(in oklab, var(--accent2) 16%, var(--bg2));
  font-weight:900;
  font-size:.85rem;
}
.price-name{margin:0; font-size:1.1rem;}
.price-pack{
  margin-top: var(--space-2);
  border-radius:16px;
  border:3px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 85%, var(--accent) 8%);
  padding: var(--space-3);
  box-shadow:8px 8px 0 var(--shadow);
}
.price-pack img{width:100%; height:auto; object-fit:contain; aspect-ratio: 16/9;}
.price-money{margin-top: var(--space-3);}
.price-main{font-size:1.8rem; font-weight:1000; letter-spacing:-.02em;}
.price-sub{color:var(--muted); font-weight:750;}
.price-list{
  display:grid;
  gap:10px;
  margin: var(--space-3) 0;
  padding:0;
}
.price-list li{
  padding-left:30px;
  position:relative;
  font-weight:700;
}
.price-list li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  width:22px; height:22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  border:3px solid var(--border);
  background: color-mix(in oklab, var(--accent) 30%, var(--bg2));
}
.price-cta{margin-top:auto;}

/* FAQ */
.faq{margin-top: var(--space-3); display:grid; gap:10px;}
.faq-item{
  border:3px solid var(--border);
  border-radius:16px;
  background: var(--bg2);
  box-shadow:8px 8px 0 var(--shadow);
}
.faq-q{margin:0;}
.faq-btn{
  width:100%;
  background:transparent;
  border:0;
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
  color:var(--fg);
  cursor:pointer;
}
.faq-btn:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.faq-icon{
  width:30px; height:30px;
  border-radius:10px;
  border:3px solid var(--border);
  display:grid;
  place-items:center;
  font-weight:1000;
  background: color-mix(in oklab, var(--accent2) 12%, var(--bg2));
}
.faq-a{padding:0 14px 14px;}
.faq-a p{margin:0; color:var(--muted); font-weight:650;}

.inline-cta{margin-top: var(--space-4);}

/* Footer */
.footer{
  border-top:3px solid var(--border);
  background: color-mix(in oklab, var(--bg2) 85%, var(--bg));
  padding: var(--space-7) 0;
}
.footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--space-5);
}
.footer-brand{font-weight:1000; font-size:1.2rem; margin-bottom:8px;}
.footer-right{display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.footer-link{
  font-weight:900;
  text-decoration:none;
  border-bottom:3px solid var(--border);
  padding-bottom:2px;
}
.footer-link:hover{transform:translateY(-1px);}
.footer-link:focus-visible{outline:none; box-shadow:var(--focus-ring);}

/* Reveal motion */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-inview{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .subhead{margin-inline:auto;}
  .badge-row{justify-content:center;}
  .hero-cta{justify-content:center;}
  .btn{min-width:min(100%,360px);}
  .proof-grid{grid-template-columns:1fr;}
  .proof-rail{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .footer-grid{flex-direction:column; align-items:center; text-align:center;}
  .footer-right{align-items:center;}
  .bullets{ text-align:left; }
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center;}
}

/* Desktop safety: mobile menu must never render above the breakpoint */
@media (min-width: 961px){
  .mobile-menu{display:none !important;}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
  .reveal{transition:none;}
  .btn:hover,.lang-btn:hover,.theme-btn:hover{transform:none;}
}