/* ============================================================
   SmartNOTAM — Modern landing (loaded AFTER style.css)
   Dark aurora hero + live decoder + severity-color language.
   Reuses :root tokens from style.css; new `lp-` namespace so it
   never collides with the app/legacy landing rules.
   ============================================================ */

:root {
  /* Severity tones — the same palette the map paints (red/violet/amber/cyan) */
  --t-red:    #ef4444;  --t-red-bg:    rgba(239,68,68,.15);   --t-red-bd:    rgba(239,68,68,.35);
  --t-violet: #a855f7;  --t-violet-bg: rgba(168,85,247,.16);  --t-violet-bd: rgba(168,85,247,.38);
  --t-amber:  #f59e0b;  --t-amber-bg:  rgba(245,158,11,.16);  --t-amber-bd:  rgba(245,158,11,.38);
  --t-cyan:   #0ea5e9;  --t-cyan-bg:   rgba(14,165,233,.16);  --t-cyan-bd:   rgba(14,165,233,.38);
  --t-slate:  #94a3b8;  --t-slate-bg:  rgba(148,163,184,.15); --t-slate-bd:  rgba(148,163,184,.34);

  --lp-ink:   #060912;   /* hero base */
  --lp-ink-2: #0b1226;
  --lp-glass: rgba(255,255,255,.055);
  --lp-glass-bd: rgba(255,255,255,.10);
  --lp-glass-hi: rgba(255,255,255,.14);
  --lp-on-dark: #e8edf8;
  --lp-on-dark-2: #aab4cc;
  --lp-on-dark-3: #93a0bd;

  /* Brand gradient — confident sky-blue → brand → deep blue. Stays in the
     blue/aviation family (no violet+cyan rainbow) so the wordmark and
     headline read professional; the violet/cyan severity palette is reserved
     for the product (map, chips, legend) where the colors carry meaning. */
  --lp-grad-blue: linear-gradient(102deg, #9cc8fd 0%, #4f8ff7 48%, #1d4ed8 100%);
}

.lp { background: var(--bg); color: var(--txt); overflow-x: hidden; }
.lp * { box-sizing: border-box; }
.lp ::selection { background: rgba(59,130,246,.30); }

/* ─────────────────────────────────────────────────────────────
   NAV (transparent over the dark hero)
   ───────────────────────────────────────────────────────────── */
.lp-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 5vw, 48px);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.lp-nav.scrolled {
  background: rgba(8,12,26,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255,255,255,.08);
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--lp-on-dark); }
.lp-brand .lp-mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  box-shadow: 0 6px 18px -4px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff;
}
.lp-brand .lp-mark svg { width: 19px; height: 19px; }
.lp-brand b { color: #fff; }
.lp-brand .lp-brand-accent { color: #6aa6ff; }
.lp-navlinks { display: flex; align-items: center; gap: 28px; }
.lp-navlinks a { color: var(--lp-on-dark-2); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color .18s; }
.lp-navlinks a:hover { color: #fff; }
.lp-navlinks .lp-btn-ghost { color: var(--lp-on-dark); }

/* Buttons */
.lp-btn {
  --b-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s; white-space: nowrap;
}
.lp-btn svg { width: 17px; height: 17px; }
.lp-btn-grad {
  color: #fff; background: linear-gradient(135deg,#3b82f6,#2563eb 55%,#1e40af);
  box-shadow: 0 10px 26px -8px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.28);
}
.lp-btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(37,99,235,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.lp-btn-ghost { background: rgba(255,255,255,.06); color: var(--lp-on-dark); border-color: rgba(255,255,255,.16); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.lp-btn-sm { padding: 10px 18px; font-size: 14px; }
.lp-btn-lg { padding: 16px 30px; font-size: 16px; }
.lp-btn-dark { background: var(--txt); color: #fff; }
.lp-btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lp-btn-outline { background: var(--surface); color: var(--txt); border-color: var(--line-strong); }
.lp-btn-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

/* ─────────────────────────────────────────────────────────────
   HERO (dark, animated aurora)
   ───────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #15214a 0%, var(--lp-ink-2) 42%, var(--lp-ink) 100%);
  color: var(--lp-on-dark);
  padding: clamp(120px, 16vh, 180px) clamp(16px, 5vw, 48px) clamp(84px, 11vh, 132px);
  text-align: center;
}
/* moving aurora blobs in the severity palette */
.lp-aurora { position: absolute; inset: -25% -10% auto -10%; height: 120%; z-index: -2; pointer-events: none; filter: blur(74px); opacity: .72; }
.lp-aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.lp-aurora .a1 { width: 46vw; height: 46vw; left: 4%;  top: -6%;  background: radial-gradient(circle, rgba(59,130,246,.8), transparent 62%); animation: lp-float1 18s ease-in-out infinite; }
.lp-aurora .a2 { width: 40vw; height: 40vw; right: 2%; top: -10%; background: radial-gradient(circle, rgba(79,99,230,.6), transparent 62%);  animation: lp-float2 22s ease-in-out infinite; }
.lp-aurora .a3 { width: 34vw; height: 34vw; left: 32%; top: 14%;  background: radial-gradient(circle, rgba(56,140,235,.5), transparent 62%);   animation: lp-float3 26s ease-in-out infinite; }
@keyframes lp-float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,7%) scale(1.12)} }
@keyframes lp-float2 { 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-7%,5%) scale(.92)} }
@keyframes lp-float3 { 0%,100%{transform:translate(0,0) scale(.95)} 50%{transform:translate(5%,-6%) scale(1.1)} }
/* faint navigational grid */
.lp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}
/* No white bottom-fade: it washed out the stats strip. The hero stays solid
   dark to its edge and meets the light body with a clean section break. */

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 26px;
  padding: 7px 15px 7px 11px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  font-size: 13px; font-weight: 600; color: var(--lp-on-dark); backdrop-filter: blur(8px);
}
.lp-eyebrow .lp-live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: lp-pulse 2.2s infinite; }
@keyframes lp-pulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }

.lp-h1 {
  margin: 0 auto; max-width: 16ch; font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(40px, 7.2vw, 82px); color: #fff;
}
.lp-h1 .lp-grad { background: var(--lp-grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { margin: 26px auto 0; max-width: 56ch; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; color: var(--lp-on-dark-2); }
.lp-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.lp-trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; font-size: 13.5px; color: var(--lp-on-dark-3); }
.lp-trust span { display: inline-flex; align-items: center; gap: 7px; }
.lp-trust svg { width: 15px; height: 15px; color: #34d399; }

/* ─────────────────────────────────────────────────────────────
   LIVE DECODER (glass panel, hero centerpiece)
   ───────────────────────────────────────────────────────────── */
.lp-decoder-wrap { max-width: 1000px; margin: 54px auto 0; }
.lp-decoder {
  position: relative; border-radius: 22px; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border: 1px solid var(--lp-glass-bd);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.lp-decoder-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.lp-decoder-bar .lp-tl { width: 11px; height: 11px; border-radius: 50%; }
.lp-tl.r{background:#ff5f57} .lp-tl.y{background:#febc2e} .lp-tl.g{background:#28c840}
.lp-decoder-bar .lp-bar-title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--lp-on-dark-2); font-family: var(--font-mono); }
.lp-decoder-bar .lp-bar-badge { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #34d399; display: inline-flex; align-items: center; gap: 6px; }
.lp-decoder-bar .lp-bar-badge .lp-live { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: lp-pulse 2.2s infinite; }

.lp-decoder-examples { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px 0; }
.dec-ex {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: var(--radius-pill); color: var(--lp-on-dark-2);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: all .16s;
}
.dec-ex:hover { color: #fff; background: rgba(255,255,255,.1); }
.dec-ex.active { color: #fff; background: rgba(59,130,246,.22); border-color: rgba(96,165,250,.5); }

.lp-decoder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.lp-dec-col { padding: 18px; }
.lp-dec-col.input { border-right: 1px solid rgba(255,255,255,.07); }
.lp-dec-collabel { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-on-dark-3); margin-bottom: 10px; }
#decoderInput {
  width: 100%; min-height: 168px; resize: vertical; tab-size: 2;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: #cdd6ec;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  padding: 13px 14px; outline: none; transition: border-color .18s, box-shadow .18s;
}
#decoderInput:focus { border-color: rgba(96,165,250,.55); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }

/* decoded result */
.lp-dec-col.output { display: flex; flex-direction: column; }
.dec-empty { color: var(--lp-on-dark-3); font-size: 14px; padding: 28px 4px; }
.dec-result { animation: lp-fadein .35s ease; }
@keyframes lp-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.dec-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.dec-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 7px; border: 1px solid; }
.dec-cat { color: var(--lp-on-dark); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.tone-red    { color: #fca5a5; background: var(--t-red-bg);    border-color: var(--t-red-bd); }
.tone-violet { color: #d8b4fe; background: var(--t-violet-bg); border-color: var(--t-violet-bd); }
.tone-amber  { color: #fcd34d; background: var(--t-amber-bg);  border-color: var(--t-amber-bd); }
.tone-cyan   { color: #7dd3fc; background: var(--t-cyan-bg);   border-color: var(--t-cyan-bd); }
.tone-slate  { color: #cbd5e1; background: var(--t-slate-bg);  border-color: var(--t-slate-bd); }
.dec-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.25; color: #fff; letter-spacing: -.01em; }
.dec-summary { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--lp-on-dark-2); }
.dec-plain-src { color: var(--lp-on-dark-3); font-weight: 600; }
.dec-plain-hint { color: #93c5fd; font-weight: 600; }
.dec-qcode, .dec-sched { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--lp-on-dark-2); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 7px 11px; margin-top: 4px; }
.dec-qcode svg, .dec-sched svg { color: var(--lp-on-dark-3); flex-shrink: 0; }
.dec-sched { margin-top: 8px; }
.dec-qmono { font-family: var(--font-mono); font-weight: 700; color: #fff; letter-spacing: .04em; }
.dec-qexp { color: var(--lp-on-dark-2); }
.dec-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--lp-on-dark-3); }
.dec-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }

/* ─────────────────────────────────────────────────────────────
   STATS STRIP
   ───────────────────────────────────────────────────────────── */
.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1000px; margin: 30px auto 0; }
.lp-stat { text-align: center; padding: 20px 10px; border-radius: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.lp-stat-num { font-size: clamp(28px, 4.2vw, 40px); font-weight: 900; letter-spacing: -.02em; color: #fff; line-height: 1; }
.lp-stat-num .lp-unit { background: var(--lp-grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stat-label { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--lp-on-dark-2); }

/* ─────────────────────────────────────────────────────────────
   LIGHT BODY — sections
   ───────────────────────────────────────────────────────────── */
.lp-section { padding: clamp(64px, 10vh, 120px) clamp(16px, 5vw, 48px); max-width: 1180px; margin: 0 auto; }
.lp-section.muted { background: var(--bg-muted); max-width: none; }
.lp-section.muted > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.lp-sec-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.lp-eyebrow-2 { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.lp-h2 { margin: 0; font-size: clamp(28px, 4.4vw, 46px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; color: var(--txt); }
.lp-h2 .lp-grad2 { background: linear-gradient(100deg,#2563eb,#1e40af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sec-head p { margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted-strong); }

/* Feature cards */
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-feat {
  position: relative; padding: 26px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp-feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.lp-feat-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; }
.lp-feat-ic svg { width: 22px; height: 22px; }
.ic-red    { background: linear-gradient(135deg,#f87171,#dc2626); }
.ic-violet { background: linear-gradient(135deg,#c084fc,#9333ea); }
.ic-amber  { background: linear-gradient(135deg,#fbbf24,#d97706); }
.ic-cyan   { background: linear-gradient(135deg,#38bdf8,#0284c7); }
.ic-blue   { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.ic-green  { background: linear-gradient(135deg,#34d399,#059669); }
.lp-feat h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--txt); }
.lp-feat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-strong); }

/* Split: end-to-end (cockpit + briefing) */
.lp-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.lp-split.rev { grid-template-columns: .95fr 1.05fr; }
.lp-split.rev .lp-split-text { order: 2; }
.lp-split-text h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 16px; color: var(--txt); }
.lp-split-text > p { font-size: 16.5px; line-height: 1.65; color: var(--muted-strong); margin: 0 0 22px; }
.lp-checklist { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.lp-checklist li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--txt-2); }
.lp-checklist li svg { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); }

/* generic glass-on-light visual card */
.lp-visual { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: linear-gradient(160deg, #0d1530, #15214a); padding: 26px; min-height: 280px; }
.lp-visual .lp-flow { display: grid; gap: 14px; }
.lp-flow-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--lp-on-dark); }
.lp-flow-card .lp-fc-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.lp-flow-card .lp-fc-t { font-size: 13.5px; font-weight: 700; color: #fff; }
.lp-flow-card .lp-fc-s { font-size: 12px; color: var(--lp-on-dark-3); }
.lp-flow-arrow { display: grid; place-items: center; color: var(--lp-on-dark-3); }
.lp-flow-arrow svg { width: 18px; height: 18px; }

/* Map section */
.lp-map-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-xl); background: #0b1226; }
.lp-map-bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; background: #0d1530; border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-map-bar .lp-tl { width: 11px; height: 11px; border-radius: 50%; }
.lp-map-bar .url { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--lp-on-dark-3); }
.lp-map-img { display: block; width: 100%; height: auto; }
.lp-map-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 26px; font-size: 13.5px; color: var(--muted-strong); }
.lp-map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lp-sw { width: 22px; height: 5px; border-radius: 3px; }
.lp-sw.dot { width: 11px; height: 11px; border-radius: 50%; }
.sw-red{background:#dc2626} .sw-violet{background:#a855f7} .sw-amber{background:#f59e0b} .sw-cyan{background:#0ea5e9}

/* Trust band */
.lp-trustband { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.lp-trustcard { padding: 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.lp-trustcard .lp-tc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 15px; }
.lp-trustcard h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--txt); }
.lp-trustcard p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted-strong); }
.lp-badge-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--green-soft); color: #166534; font-size: 12.5px; font-weight: 700; }
.lp-badge-row svg { width: 14px; height: 14px; }

/* Steps */
.lp-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; counter-reset: step; }
.lp-step { position: relative; padding: 28px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.lp-step-n { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(135deg,#3b82f6,#1e40af); margin-bottom: 16px; box-shadow: var(--shadow-brand); }
.lp-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--txt); }
.lp-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-strong); }

/* Pricing */
.lp-pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.lp-price { display: flex; flex-direction: column; padding: 30px 26px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lp-price.feat { border-color: transparent; background: linear-gradient(180deg, #0d1530, #15214a); color: var(--lp-on-dark); box-shadow: 0 30px 60px -20px rgba(37,99,235,.5); position: relative; transform: translateY(-8px); }
.lp-price.feat .lp-price-name, .lp-price.feat .lp-price-desc { color: var(--lp-on-dark-2); }
.lp-price.feat .lp-price-amt, .lp-price.feat .lp-price-feats li { color: #fff; }
.lp-price-tag { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); background: linear-gradient(90deg,#60a5fa,#a855f7); color: #fff; }
.lp-price-tier { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.lp-price.feat .lp-price-tier { color: #93c5fd; }
.lp-price-name { margin: 4px 0 14px; font-size: 16px; font-weight: 700; color: var(--muted-strong); }
.lp-price-amt { font-size: 42px; font-weight: 900; letter-spacing: -.03em; color: var(--txt); }
.lp-price-amt .per { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lp-price-desc { margin: 12px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted-strong); }
.lp-price-feats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; flex: 1; }
.lp-price-feats li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--txt-2); }
.lp-price-feats li svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--green); margin-top: 1px; }
.lp-price.feat .lp-price-feats li svg { color: #34d399; }

/* CTA band (dark) */
.lp-cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  margin: 0 clamp(16px, 5vw, 48px) clamp(48px, 8vh, 90px); border-radius: 28px;
  background: radial-gradient(110% 130% at 50% 0%, #1b2a5e, var(--lp-ink-2) 60%, var(--lp-ink));
  padding: clamp(48px, 8vh, 84px) 24px; color: var(--lp-on-dark);
}
.lp-cta .lp-aurora { filter: blur(60px); opacity: .6; }
.lp-cta h2 { margin: 0 auto; max-width: 18ch; font-size: clamp(28px, 4.4vw, 50px); font-weight: 900; letter-spacing: -.03em; line-height: 1.06; color: #fff; }
.lp-cta p { margin: 18px auto 0; max-width: 48ch; font-size: 17px; color: var(--lp-on-dark-2); }
.lp-cta .lp-hero-ctas { margin-top: 30px; }

/* Footer (dark) */
.lp-footer { background: var(--lp-ink); color: var(--lp-on-dark-2); padding: 64px clamp(16px,5vw,48px) 28px; }
.lp-footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.lp-footer .lp-brand { margin-bottom: 14px; }
.lp-footer-text { font-size: 13.5px; line-height: 1.65; color: var(--lp-on-dark-3); max-width: 38ch; }
.lp-footer h4 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-on-dark); margin: 0 0 14px; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-footer a { color: var(--lp-on-dark-2); text-decoration: none; font-size: 14px; transition: color .16s; }
.lp-footer a:hover { color: #fff; }
.lp-footer-bottom { max-width: 1180px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--lp-on-dark-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Scroll reveal */
.lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--rd, 0ms); }
.lp-reveal.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .lp-navlinks { gap: 16px; }
  .lp-navlinks a:not(.lp-btn) { display: none; }
  .lp-features, .lp-trustband, .lp-steps, .lp-pricing { grid-template-columns: 1fr; }
  .lp-stats { grid-template-columns: repeat(2,1fr); }
  .lp-split, .lp-split.rev { grid-template-columns: 1fr; }
  .lp-split.rev .lp-split-text { order: 0; }
  .lp-price.feat { transform: none; }
}
@media (max-width: 640px) {
  .lp-decoder-grid { grid-template-columns: 1fr; }
  .lp-dec-col.input { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .lp-footer-inner { grid-template-columns: 1fr 1fr; }
  .lp-footer-inner > div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-aurora i { animation: none !important; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}