/* ========== Base / Tokens ========== */
:root{
  --bg:#F6F3EE;
  --surface:#FFFFFF;
  --text:#0B1220;
  --muted:#2C3A52;

  --accent:#1F5EFF;
  --accent-text:#FFFFFF;
  --accent2:#00A89B;
  --accent2-text:#071012;

  --border:#0B1220;
  --shadow:#0B1220;
  --focus:#B42C00;

  --nav-bg: rgba(246,243,238,.74);
  --nav-border: rgba(11,18,32,.22);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow-lg: 12px 12px 0 var(--shadow);
  --shadow-md: 8px 8px 0 var(--shadow);
  --shadow-sm: 6px 6px 0 var(--shadow);

  color-scheme: light dark;
}

[data-theme="dark"]{
  --bg:#070A12;
  --surface:#0E1424;
  --text:#F1F5FF;
  --muted:#C9D3EA;

  --accent:#5A8CFF;
  --accent-text:#070A12;
  --accent2:#00D6C7;
  --accent2-text:#070A12;

  --border:#F1F5FF;
  --shadow:#000000;
  --focus:#FFB020;

  --nav-bg: rgba(7,10,18,.68);
  --nav-border: rgba(241,245,255,.18);
}

/* ========== Resets ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  line-height:1.5;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;margin-inline:auto}
a{color:inherit}
p{margin:0 0 12px}
ul{margin:0;padding-left:18px}
li{margin:6px 0}

.container{
  width:min(1120px, calc(100% - 32px));
  margin-inline:auto;
}

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

/* ========== Background depth ========== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  /* Base: gradients only (fast paint). */
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(31,94,255,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(0,168,155,.18), transparent 60%),
    radial-gradient(1000px 700px at 50% 100%, rgba(31,94,255,.14), transparent 60%);
  background-size: auto, auto, auto;
  background-position: center;
  filter: saturate(1.15) contrast(1.02);
  opacity:.12;
  pointer-events:none;
}

/* Upgrade: add lightweight photographic depth after load/idle. */
.bg-rich body::before{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(31,94,255,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(0,168,155,.18), transparent 60%),
    radial-gradient(1000px 700px at 50% 100%, rgba(31,94,255,.14), transparent 60%),
    image-set(
      url("/assets/web/bg-gradient.webp") type("image/webp"),
      url("/assets/web/bg-gradient.jpg") type("image/jpeg")
    );
  background-size: auto, auto, auto, cover;
  background-position: center;
}

[data-theme="dark"] body::before{
  opacity:.20;
  filter: saturate(1.05) contrast(1.1);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: url("/assets/ui/noise.png");
  opacity:.55;
  pointer-events:none;
  mix-blend-mode:multiply;
}

[data-theme="dark"] body::after{
  opacity:.35;
  mix-blend-mode:screen;
}

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

/* ========== Navbar + Progress ========== */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:2px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
}

.progress{
  height:6px;
  background: transparent;
  border-bottom:2px solid var(--nav-border);
}
.progress__bar{
  height:100%;
  width:100%;
  transform-origin:left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
}
.brand__mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:2px solid var(--border);
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}
.brand__mark--sm{width:28px;height:28px;border-radius:10px}
.brand__text{font-size:16px}

.nav__links{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav__links a{
  text-decoration:none;
  font-weight:800;
  padding:8px 10px;
  border-radius: 12px;
}
.nav__links a:hover{background: rgba(31,94,255,.12)}
.nav__links a:focus-visible{outline:3px solid var(--focus); outline-offset:3px}

.nav__controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav__toggle{
  display:none;
  border:2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding:10px 12px;
  box-shadow: var(--shadow-sm);
  font-weight:900;
}
.nav__toggle:focus-visible{outline:3px solid var(--focus); outline-offset:3px}

/* ========== Language switcher (custom menu) ========== */
.lang{position:relative}
.lang__btn{
  display:flex;
  align-items:center;
  gap:8px;
  border:2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding:10px 12px;
  box-shadow: var(--shadow-sm);
  font-weight:900;
}
.lang__btn:hover{transform: translateY(-1px)}
.lang__btn:active{transform: translateY(0)}
.lang__btn:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.lang__chev{opacity:.8}

.lang__menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width: 240px;
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding:8px;
}
.lang__item{
  display:flex;
  width:100%;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  background:transparent;
  border:2px solid transparent;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
  font-weight:900;
  text-align:left;
}
.lang__item:hover{background: rgba(31,94,255,.12)}
.lang__item[aria-current="true"]{
  background: rgba(0,168,155,.16);
  border-color: rgba(0,168,155,.35);
}
.lang__item:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.lang__code{font-weight:800; opacity:.7}

.theme{
  border:2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding:10px 12px;
  box-shadow: var(--shadow-sm);
  font-weight:900;
}
.theme:hover{transform: translateY(-1px)}
.theme:active{transform: translateY(0)}
.theme:focus-visible{outline:3px solid var(--focus); outline-offset:3px}

/* ========== Hero ========== */
.hero{
  position:relative;
  padding: 22px 0 10px;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  /* Base: gradient only. Photo layer is added after idle (bg-rich). */
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.15));
  background-size: cover;
  background-position: center;
  filter: blur(0px);
  opacity:.22;
}
.bg-rich .hero__bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.15)),
    image-set(
      url("/assets/web/bg-city-night.webp") type("image/webp"),
      url("/assets/web/bg-city-night.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
}
[data-theme="dark"] .hero__bg{
  opacity:.30;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  align-items:stretch;
  padding: 10px 0 22px;
}

.hero__copy{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:18px 18px 16px;
}
.eyebrow{
  display:inline-block;
  margin:0 0 12px;
  padding:8px 10px;
  border:2px solid var(--border);
  border-radius: 999px;
  background: rgba(31,94,255,.12);
  font-weight:900;
  letter-spacing:.3px;
}
h1{
  margin:0;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height:1.06;
  letter-spacing:-.6px;
  padding-top: 15px;
  padding-bottom: 10px;
}
.sub{
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 12px;
}
.micro{
  margin-top: 10px;
  color: var(--muted);
  font-weight:800;
}

.hero__bullets{
  margin: 0;
  padding-left: 18px;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 14px;
}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border:2px solid var(--border);
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  letter-spacing:.2px;
  box-shadow: var(--shadow-md);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  min-height: 48px;
}
.btn:hover{transform: translateY(-2px)}
.btn:active{transform: translateY(0); box-shadow: var(--shadow-sm)}
.btn:focus-visible{outline:3px solid var(--focus); outline-offset:3px}

.btn--primary{
  background: var(--accent);
  color: var(--accent-text);
}
.btn--primary:hover{background: color-mix(in srgb, var(--accent) 88%, black)}
.btn--ghost{
  background: var(--surface);
  color: var(--text);
}
.btn--wide{
  width: min(100%, 360px);
}

/* ========== Sections ========== */
.section{
  padding: 30px 0;
}
.section--alt{
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-top:2px solid var(--nav-border);
  border-bottom:2px solid var(--nav-border);
}
.section--final{
  padding-bottom: 42px;
}

h2{
  margin:0 0 14px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height:1.15;
  letter-spacing:-.3px;
  padding-top: 15px;
  padding-bottom: 10px;
}
h3{
  margin:0 0 8px;
  font-size: 18px;
  line-height:1.2;
  padding-top: 15px;
  padding-bottom: 10px;
}
.section__cta{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}


/* ========== Proof media ========== */
.proof__media{
  margin: 10px 0 14px;
  display:flex;
  justify-content:center;
}
.proof__img{
  width: min(520px, 100%);
  height:auto;
  border-radius: var(--radius-lg);
  border:2px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

/* ========== Cards / Grids ========== */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

.card{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding:14px 14px 12px;
}

.bullets{
  text-align:left;
}
.bullets--tight{padding-left: 18px}
.bullets--tight li{margin:4px 0}

.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}

.media{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding:14px;
  position:relative;
}
.media__tag{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 10px;
  border:2px solid var(--border);
  border-radius: 999px;
  background: rgba(0,168,155,.16);
  font-weight:900;
}
.packshot{
  object-fit: contain;
  width:100%;
  height:auto;
}

/* ========== Hero Media ========== */
.hero__media{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pack{
  position:relative;
  border-radius: var(--radius-md);
  background: radial-gradient(700px 340px at 40% 40%, rgba(31,94,255,.28), transparent 55%),
              radial-gradient(700px 360px at 70% 70%, rgba(0,168,155,.20), transparent 60%);
  border:2px solid var(--border);
  padding:10px;
  box-shadow: var(--shadow-md);
}

.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.stat{
  border:2px solid var(--border);
  border-radius: 16px;
  padding:10px 10px 8px;
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.stat__k{
  font-weight:950;
  font-size: 20px;
  line-height:1;
}
.stat__v{
  margin-top:6px;
  color: var(--muted);
  font-weight:800;
  font-size: 12px;
}

/* ========== Pricing ========== */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.pricing__card{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:14px;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.pricing__card--highlight{
  outline: 4px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 0;
  transform: translateY(-2px);
}
.pricing__top .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border:2px solid var(--border);
  border-radius: 999px;
  background: rgba(31,94,255,.12);
  font-weight:950;
  margin-bottom: 6px;
}
.pricing__note{
  color: var(--muted);
  font-weight:800;
  margin: 0 0 8px;
}
.pricing__media{
  margin: 6px 0 10px;
  border:2px solid var(--border);
  border-radius: var(--radius-md);
  padding:10px;
  background: radial-gradient(520px 260px at 35% 35%, rgba(31,94,255,.22), transparent 55%),
              radial-gradient(520px 260px at 70% 65%, rgba(0,168,155,.18), transparent 58%);
  box-shadow: var(--shadow-md);
}
.pricing__price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin: 6px 0 8px;
  padding: 10px 12px;
  border:2px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.price{font-weight:950;font-size:26px;letter-spacing:-.2px}
.price-sub{font-weight:900;color:var(--muted);font-size:12px}

.pricing__cta{
  margin-top:auto;
  display:flex;
  justify-content:center;
}

/* ========== FAQ ========== */
.faq{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.faq__item{
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 10px 10px 8px;
}
.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: transparent;
  border:2px solid transparent;
  border-radius: 14px;
  color: var(--text);
  font-weight: 950;
  cursor:pointer;
  padding: 8px 10px;
  text-align:left;
}
.faq__q:hover{background: rgba(31,94,255,.10)}
.faq__q:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.faq__icon{
  width:26px;height:26px;
  display:grid;place-items:center;
  border:2px solid var(--border);
  border-radius: 10px;
  background: rgba(0,168,155,.16);
  font-weight: 950;
}
.faq__a{
  padding: 6px 10px 10px;
  color: var(--muted);
  font-weight: 800;
}

/* ========== Final panel ========== */
.final__panel{
  margin-top: 14px;
  background: var(--surface);
  border:2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.final__strong{font-weight:950;margin:0}
.final__sub{color:var(--muted);font-weight:800;margin:6px 0 0}

/* ========== Footer ========== */
.footer{
  border-top:2px solid var(--nav-border);
  padding: 22px 0;
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer__brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer__name{
  font-weight:950;
}
.footer__small{
  color: var(--muted);
  font-weight:800;
  max-width: 520px;
}
.footer__link, .footer__top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border:2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration:none;
  font-weight:950;
}
.footer__link:hover, .footer__top:hover{transform: translateY(-1px)}
.footer__link:focus-visible, .footer__top:focus-visible{outline:3px solid var(--focus); outline-offset:3px}

/* ========== Animations (prefers-reduced-motion friendly) ========== */
[data-animate]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.in-view[data-animate]{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-animate]{opacity:1;transform:none;transition:none}
  .btn, .lang__btn, .theme, .footer__link, .footer__top{transition:none}
}

/* ========== Responsive (mobile rules) ========== */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr; gap:14px}
  .split{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
}

@media (max-width: 820px){
  .nav__toggle{display:inline-flex}
  .nav__links{
    position:absolute;
    left:16px;
    right:16px;
    top:64px;
    background: var(--surface);
    border:2px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding:12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{background: rgba(31,94,255,.10)}
}

@media (max-width: 720px){
  .section{ text-align:center; }
  .card, .pricing__card, .faq__item, .media, .hero__copy, .hero__media{ text-align:center; }
  .bullets{ text-align:left; }
  .cta-row{ justify-content:center; }
  .section__cta{ justify-content:center; }
  .btn--wide{ width: min(100%, 360px); }
}