/* Production-grade, no external deps. */

/* ========== Tokens ========== */
:root{
  --bg:#f7f5f2;
  --surface:#ffffff;
  --ink:#111111;
  --muted:#2a2a2a;

  --accent:#d80f2a;
  --accent-ink:#ffffff;

  --border:#111111;
  --border-subtle:#2a2a2a;

  --focus:#0a66ff;

  --shadow: 10px 10px 0 rgba(17,17,17,.95);

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

  --container: 1120px;
  --gutter: 18px;

  --nav-h: 74px;
  --progress-h: 4px;

  --section-pad: 30px; /* REQUIRED: 30px top/bottom */
  --title-pt: 15px;    /* REQUIRED */
  --title-pb: 10px;    /* REQUIRED */

  --ease: cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"]{
  --bg:#0b0b0f;
  --surface:#12121a;
  --ink:#f8f7ff;
  --muted:#c9c7d2;

  --accent:#ff2a44;
  --accent-ink:#0b0b0f;

  --border:#f8f7ff;
  --border-subtle:#c9c7d2;

  --focus:#ffd400;

  --shadow: 10px 10px 0 rgba(248,247,255,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--ink);
  line-height:1.35;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block; margin-inline:auto}
a{color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

p{margin:0 0 12px}
ul{margin:0; padding-left: 18px}

h1,h2,h3{
  margin:0;
  padding-top: var(--title-pt);
  padding-bottom: var(--title-pb);
}
h1{font-size: clamp(32px, 4.5vw, 56px); line-height:1.05; letter-spacing:-0.02em}
h2{font-size: clamp(22px, 2.6vw, 30px); line-height:1.1}
h3{font-size: 18px; line-height:1.15}

.sr-only{
  position:absolute!important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:12px; top:12px;
  padding:10px 14px;
  background:var(--surface);
  border:3px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transform: translateY(-150%);
  transition: transform .18s var(--ease);
  z-index: 9999;
}
.skip-link:focus{transform: translateY(0)}

/* Header / Nav */
.site-header{position:relative}
.nav{
  position: sticky;
  top:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px var(--gutter);
  min-height: var(--nav-h);
  background: rgba(247,245,242,.82);
  border-bottom: 3px solid var(--border);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .nav{ background: rgba(18,18,26,.75); }

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}
.brand img{
  display:block;
  height: 32px;
  width:auto;
  max-width: 220px;
}
.brand__name{
  font-size: 18px;
  font-weight:900;
  letter-spacing:-0.02em;
  padding:6px 10px;
  border:3px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);
}
html[data-theme="dark"] .brand__name{ box-shadow: 6px 6px 0 rgba(255,255,255,.08); }

.nav__toggle{
  display:none;
  border:3px solid var(--border);
  background:var(--surface);
  border-radius: 999px;
  padding:10px 12px;
  font-weight:900;
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);
  cursor:pointer;
  color:var(--ink);
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav__link{
  color:var(--ink);
  text-decoration:none;
  padding:10px 10px;
  border-radius: 999px;
}
.nav__link:hover{background: rgba(0,0,0,.06)}
html[data-theme="dark"] .nav__link:hover{background: rgba(255,255,255,.08)}

.nav__tools{display:flex; align-items:center; gap:10px; margin-left: 6px}

/* Language menu */
.lang{position:relative}
.lang__btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:3px solid var(--border);
  background:var(--surface);
  border-radius: 999px;
  cursor:pointer;
  color:var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);
}
.lang__menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: var(--surface);
  border:3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
}
.lang__menu[data-open="true"]{display:block}
.lang-opt{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius: 12px;
  border:2px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor:pointer;
}
.lang-opt:hover{background: rgba(0,0,0,.06)}
html[data-theme="dark"] .lang-opt:hover{background: rgba(255,255,255,.08)}
.lang-opt[aria-current="page"]{
  border-color: var(--accent);
  background: rgba(216,15,42,.12);
}

/* Theme toggle */
.theme{
  border:3px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding:10px 12px;
  cursor:pointer;
  color:var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);
  display:flex; gap:6px; align-items:center;
}

/* Progress */
.progress{
  position: sticky;
  top: var(--nav-h);
  z-index: 49;
  height: var(--progress-h);
  background: rgba(0,0,0,.12);
}
html[data-theme="dark"] .progress{background: rgba(255,255,255,.14)}
.progress__bar{
  height:100%;
  width:0%;
  background: var(--accent);
  transform-origin:left center;
}

/* Hero */
.hero{position:relative}
.hero__bg{
  position:absolute;
  inset:0;
  background-image: url("/assets/bg-hero.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.08);
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 20% 30%, rgba(216,15,42,.55), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.84));
}
html[data-theme="dark"] .hero__bg::after{
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(255,42,68,.50), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.66), rgba(0,0,0,.90));
}

.hero__inner{
  position:relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--gutter) 32px;
  display:grid;
  gap: 24px;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
}
.kicker{
  display:inline-block;
  padding: 8px 12px;
  border:3px solid rgba(255,255,255,.92);
  color:#fff;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom: 12px;
}
.hero h1{color:#fff}
.hero .sub{color: rgba(255,255,255,.92); font-size: clamp(16px, 2vw, 20px); max-width: 46ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin: 16px 0 8px}
.hero__bullets{
  margin-top: 14px;
  color: rgba(255,255,255,.92);
  padding-left: 18px;
}
.hero__bullets li{margin: 6px 0}
.micro{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  margin-top: 12px;
}

.packshot-frame{
  position:relative;
  padding: 16px;
  border-radius: var(--radius);
  border: 3px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.22);
  box-shadow: 14px 14px 0 rgba(0,0,0,.45);
}
.packshot--hero{
  width: min(300px, 78vw);
  height:auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.55));
  animation: floaty 4.8s var(--ease) infinite alternate;
}
.glow{
  position:absolute;
  inset:-20px;
  background: radial-gradient(circle at 50% 40%, rgba(255,42,68,.33), transparent 58%);
  filter: blur(18px);
  z-index:-1;
}

@keyframes floaty{
  from{transform: translateY(0) rotate(-1.2deg)}
  to{transform: translateY(-10px) rotate(1.2deg)}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 16px;
  border-radius: 999px;
  border:3px solid var(--border);
  font-weight: 900;
  text-decoration:none;
  cursor:pointer;
  box-shadow: 8px 8px 0 rgba(0,0,0,.18);
  color: var(--ink);
  background: var(--surface);
}
.btn--primary{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--border);
}
.btn--ghost{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.92);
  color:#fff;
}
.btn--small{padding: 10px 12px; font-size: 14px}

/* Main / Sections */
.section{
  padding: var(--section-pad) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.article{
  background: var(--surface);
  border:3px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.article p{color: var(--muted)}

.block{
  background: var(--surface);
  border:3px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin: 18px 0;
}
.block__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap:wrap;
}
.block__title{
  font-weight: 950;
  font-size: 18px;
  margin: 0;
}
.block__sub{
  margin:0;
  color: var(--muted);
  font-size: 13px;
}

.bullets{
  columns: 2;
  column-gap: 28px;
  margin-top: 8px;
}
.bullets li{break-inside: avoid; margin: 8px 0; color: var(--muted)}
.bullets li::marker{color: var(--accent)}

.grid{
  display:grid;
  gap: 16px;
  margin-top: 18px;
}
.grid--two{grid-template-columns: repeat(2, minmax(0,1fr))}
.card{
  border:3px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card__title{font-weight:950; margin: 0 0 8px}
.card__sub{color: var(--muted); font-size: 13px; margin:0 0 10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex;
  padding: 8px 10px;
  border:2px solid var(--border-subtle);
  border-radius: 999px;
  font-weight: 800;
  background: rgba(216,15,42,.08);
}

.t-grid{display:grid; gap: 12px}
.t-card{
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(0,0,0,.03);
}
html[data-theme="dark"] .t-card{background: rgba(255,255,255,.05)}
.t-quote{font-weight: 900; margin-bottom: 8px}
.t-who{color: var(--muted); font-size: 13px; margin:0}

/* Pricing */
.price-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.price-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background: var(--surface);
  border:3px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  position:relative;
  min-height: 100%;
}
.badge{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 8px 10px;
  border:3px solid var(--border);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-weight: 950;
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);

  z-index: 10;
}
.packshot--pricing{
  display:block;
  width: 100%;
  max-width: 260px;
  height: 130px;
  margin-inline:auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.5));

  position: relative;
  z-index: 1;
  margin-top: 12px;
  margin-bottom: 10px;
}
.price-card .badge + .packshot--pricing{ margin-top: 44px; }

.price-tag{font-weight: 950; margin: 0; letter-spacing:.06em; font-size: 12px}
.price-name{font-weight: 950; font-size: 18px; margin: 6px 0 0}
.price-amount{font-weight: 950; font-size: 28px; margin: 10px 0 0}
.price-sub{font-weight: 800; font-size: 14px; color: var(--muted)}
.price-per{margin: 6px 0 0; color: var(--muted)}
.mini-list{margin: 12px 0 0; color: var(--muted)}
.mini-list li{margin: 6px 0}
.price-cta{margin-top:auto; padding-top: 14px; display:flex; justify-content:center}

/* FAQ accordion */
.block--faq{position:relative}
.faq{display:grid; gap: 10px}
.faq-item{
  border:2px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow:hidden;
  background: rgba(0,0,0,.02);
}
html[data-theme="dark"] .faq-item{background: rgba(255,255,255,.04)}
.faq-q{
  width:100%;
  text-align:left;
  padding: 14px 14px;
  border:0;
  background: transparent;
  color: var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 950;
}
.faq-q__icon{
  width: 32px; height: 32px;
  display:grid;
  place-items:center;
  border:2px solid var(--border-subtle);
  border-radius: 999px;
  flex: none;
}
.faq-a{
  padding: 0 14px 14px;
}
.faq-a p{margin:0; color: var(--muted)}

/* Final CTA */
.final{
  margin-top: 20px;
  border-radius: var(--radius);
  border:3px solid var(--border);
  overflow:hidden;
  box-shadow: var(--shadow);
  position:relative;
}
.final__bg{
  position:absolute;
  inset:0;
  background-image:url("/assets/bg-neon.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.1);
}
.final__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.62));
}
.final__inner{
  position:relative;
  padding: 22px 16px;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:flex-start;
}
.final__title{font-weight: 950; font-size: 22px; margin:0}
.final__p{margin:0; color: rgba(255,255,255,.9)}

/* Footer */
.footer{
  border-top: 3px solid var(--border);
  padding: 22px var(--gutter);
}
.footer__inner{
  max-width: var(--container);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:flex-start;
}
.footer__link{
  color: var(--ink);
  font-weight: 950;
}
.footer__note{margin:0; color: var(--muted); font-size: 13px}
.footer__tiny{margin:0; color: var(--muted); font-size: 12px}

/* Offline */
.offline{display:grid; place-items:center; min-height:100vh}
.offline__main{
  max-width: 560px;
  padding: 24px;
  border:3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}

/* Reveal */
[data-reveal]{opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}

/* Responsive */
@media (max-width: 920px){
  .hero__inner{grid-template-columns:1fr; text-align:center}
  .hero__cta{justify-content:center}
  .hero .sub{margin-inline:auto}
  .final__inner{align-items:center; text-align:center}
}

@media (max-width: 860px){
  .price-grid{grid-template-columns: 1fr}
}

@media (max-width: 760px){
  .brand img{ height: 24px; max-width: 180px; }
  .brand__name{ font-size: 14px; padding:5px 8px; border-width:2px; }
  .packshot--pricing{ height: 110px; }

  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 10px);
    background: var(--surface);
    border:3px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 10px;
  }
  .nav__menu[data-open="true"]{display:flex}
  .nav__link{
    border:2px solid var(--border-subtle);
    padding: 12px 12px;
    border-radius: var(--radius-sm);
  }
  .nav__tools{justify-content:space-between}
  .bullets{columns: 1}
  /* Mobile rule: center content except bullets/lists */
  .section{ text-align:center }
  .bullets, .mini-list, .faq, .faq-a{ text-align:left }
  .btn{ width: min(100%, 360px) }

  .block__head{ justify-content:center; align-items:center; text-align:center }
  .block__head > *{ flex: 1 1 100%; }
  .block__head .btn{ margin-inline:auto }
}