:root{
  --bg:#090b10;
  --panel:#121621;
  --panel-strong:#181e2c;
  --line:rgba(255,255,255,.11);
  --text:#f8f6f2;
  --muted:#b8bcc8;
  --accent:#ff5a47;
  --accent-2:#ff9b3d;
  --accent-3:#ffd27f;
  --shadow:0 30px 80px rgba(0,0,0,.38);
  --radius:28px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(255,90,71,.16), transparent 32%),
    radial-gradient(circle at top right, rgba(255,155,61,.14), transparent 26%),
    linear-gradient(180deg, #0a0c12 0%, #090b10 45%, #0f1320 100%);
  color:var(--text);
  font-family:"Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  min-height:100vh;
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100vw - 32px), var(--max));margin:0 auto}
.site-header,
main,
.site-footer{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(18px);
  background:rgba(8,10,16,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:74px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:0 0 auto;
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#130b08;
  font-weight:900;
  font-size:18px;
  box-shadow:0 14px 32px rgba(255,90,71,.28);
}
.brand-copy{display:grid;gap:2px}
.brand-title{font-size:16px;font-weight:800;letter-spacing:.02em}
.brand-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}
.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  flex:1 1 auto;
  min-width:0;
}
.nav-links a{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.nav-links .cta{
  color:#130b08;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 12px 28px rgba(255,90,71,.24);
}
.hero{
  padding:48px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
  gap:22px;
  align-items:stretch;
}
.hero-copy,
.hero-card,
.section-card,
.pricing-card,
.faq-card,
.feature-band,
.cta-band{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(18,22,33,.92), rgba(12,15,23,.94));
  box-shadow:var(--shadow);
}
.hero-copy{
  padding:30px;
  position:relative;
  overflow:hidden;
}
.hero-copy::after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(255,210,127,.18), transparent 72%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  color:var(--accent-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(255,255,255,.04);
}
h1{
  margin:16px 0 14px;
  font-size:clamp(38px, 6vw, 62px);
  line-height:.96;
  letter-spacing:-.05em;
}
.hero-copy p,
.lede{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.58;
  max-width:700px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{
  color:#130b08;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 18px 34px rgba(255,90,71,.24);
}
.button.secondary{
  color:var(--text);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.hero-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.meta-pill{
  padding:9px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  background:rgba(255,255,255,.03);
}
.hero-card{
  padding:24px;
  display:grid;
  gap:14px;
  align-content:start;
  background:
    radial-gradient(circle at top right, rgba(255,155,61,.18), transparent 32%),
    linear-gradient(180deg, rgba(21,26,37,.96), rgba(12,15,23,.96));
}
.hero-card h2,
.feature-band h2,
.cta-band h2,
.quote-band h2{
  margin:0;
  font-size:24px;
  line-height:1.04;
  letter-spacing:-.03em;
}
.hero-card p,
.feature-band p,
.cta-band p,
.quote-band p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.module-stack,
.list,
.feature-list,
.faq-list{
  display:grid;
  gap:10px;
}
.module-chip{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.module-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:16px;
  background:linear-gradient(135deg, rgba(255,90,71,.18), rgba(255,155,61,.18));
  border:1px solid rgba(255,255,255,.1);
}
.module-title{font-size:15px;font-weight:800}
.module-sub{font-size:12px;color:var(--muted);margin-top:2px}
.module-tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-3);
}
.mockup{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.mockup-window{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(10,14,22,.92), rgba(18,24,36,.78));
  box-shadow:0 18px 40px rgba(0,0,0,.26);
}
.mockup-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mockup-dots{
  display:flex;
  gap:7px;
}
.mockup-dots span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
.mockup-dots span:first-child{background:var(--accent)}
.mockup-dots span:nth-child(2){background:var(--accent-2)}
.mockup-dots span:nth-child(3){background:var(--accent-3)}
.mockup-label{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.mockup-qr{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:12px;
  align-items:center;
}
.qr-box{
  aspect-ratio:1;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, rgba(255,90,71,.16), rgba(255,155,61,.16));
  position:relative;
  overflow:hidden;
}
.qr-box::before,
.qr-box::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.12);
}
.qr-grid{
  position:absolute;
  inset:18px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:5px;
}
.qr-grid span{
  border-radius:4px;
  background:rgba(255,255,255,.92);
  opacity:.15;
}
.qr-grid span:nth-child(1),
.qr-grid span:nth-child(2),
.qr-grid span:nth-child(7),
.qr-grid span:nth-child(8),
.qr-grid span:nth-child(15),
.qr-grid span:nth-child(18),
.qr-grid span:nth-child(22),
.qr-grid span:nth-child(26),
.qr-grid span:nth-child(31),
.qr-grid span:nth-child(32){
  opacity:1;
}
.mockup-stack{
  display:grid;
  gap:10px;
}
.mockup-card{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  display:grid;
  gap:6px;
}
.mockup-card strong{
  font-size:13px;
  letter-spacing:-.01em;
}
.mockup-card span{
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.mockup-list{
  display:grid;
  gap:7px;
}
.mockup-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.mockup-badge{
  min-width:24px;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,155,61,.16);
  color:var(--accent-3);
  font-size:11px;
  font-weight:900;
}
.mockup-row strong{
  font-size:12px;
  letter-spacing:-.01em;
}
.mockup-row span{
  color:var(--muted);
  font-size:10px;
}
.mockup-pill{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(61,220,132,.13);
  color:#8effb6;
  font-size:10px;
  font-weight:800;
}
.feature-art{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.email-preview-grid{
  align-items:start;
}
.email-preview-card{
  display:grid;
  gap:14px;
  padding:22px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,22,33,.95), rgba(12,15,23,.96));
  box-shadow:var(--shadow);
}
.email-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.email-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--accent-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.email-preview-head strong{
  font-size:15px;
  letter-spacing:-.02em;
}
.email-meta{
  display:grid;
  gap:8px;
}
.email-meta > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.email-meta span{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.email-meta strong{
  font-size:13px;
  text-align:right;
}
.email-body{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.email-body p{
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.65;
}
.email-list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  display:grid;
  gap:7px;
  font-size:13px;
  line-height:1.55;
}
.art-tile{
  min-height:132px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(255,210,127,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  display:grid;
  gap:8px;
  align-content:start;
}
.art-tile strong{
  font-size:14px;
  letter-spacing:-.01em;
}
.art-tile span{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.art-mini-list{
  display:grid;
  gap:7px;
}
.art-mini{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,90,71,.82), rgba(255,155,61,.28));
}
.art-mini:nth-child(2){width:82%}
.art-mini:nth-child(3){width:64%}
.section{
  padding:18px 0 8px;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.section-head h2{
  margin:0;
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
}
.section-head p{
  margin:0;
  max-width:620px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.grid-2,
.split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.section-card,
.pricing-card,
.faq-card,
.feature-band,
.cta-band,
.quote-band{
  padding:20px;
  display:grid;
  gap:12px;
}
.section-card{min-height:244px}
.card-kicker,
.plan{
  color:var(--accent-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.section-card h3,
.faq-card h3{
  margin:0;
  font-size:24px;
  line-height:1.02;
  letter-spacing:-.04em;
}
.faq-card h3{
  font-size:16px;
  letter-spacing:-.02em;
}
.section-card p,
.pricing-card p,
.faq-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.feature{
  color:#ecedf2;
  font-size:13px;
  line-height:1.4;
}
.price{
  display:flex;
  align-items:end;
  gap:8px;
  font-weight:900;
  letter-spacing:-.04em;
}
.price strong{font-size:42px;line-height:.9}
.price span{font-size:14px;color:var(--muted);padding-bottom:7px}
.price-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.signup-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.signup-card{
  padding:20px;
  display:grid;
  gap:12px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(18,22,33,.92), rgba(12,15,23,.94));
  box-shadow:var(--shadow);
}
.signup-card.featured{
  background:
    radial-gradient(circle at top right, rgba(255,90,71,.18), transparent 32%),
    linear-gradient(180deg, rgba(27,20,22,.97), rgba(16,12,15,.97));
  border-color:rgba(255,130,98,.32);
}
.signup-kicker{
  color:var(--accent-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.signup-card h3{
  margin:0;
  font-size:22px;
  line-height:1.04;
  letter-spacing:-.03em;
}
.signup-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.summary-stack{
  display:grid;
  gap:8px;
}
.tight-stack{
  gap:8px;
}
.summary-includes{
  display:grid;
  gap:10px;
}
.summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.summary-row span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.summary-row strong{
  font-size:14px;
  letter-spacing:-.01em;
  text-align:right;
}
.signup-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}
.fine-print{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.form-shell{
  padding:20px;
  display:grid;
  gap:14px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(18,22,33,.92), rgba(12,15,23,.94));
  box-shadow:var(--shadow);
}
.form-shell.featured{
  background:
    radial-gradient(circle at top right, rgba(255,90,71,.18), transparent 32%),
    linear-gradient(180deg, rgba(27,20,22,.97), rgba(16,12,15,.97));
  border-color:rgba(255,130,98,.32);
}
.form-head{
  display:grid;
  gap:8px;
}
.form-head h2{
  margin:0;
  font-size:24px;
  line-height:1.04;
  letter-spacing:-.03em;
}
.form-head p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.form-grid .full{
  grid-column:1 / -1;
}
.field{
  display:grid;
  gap:6px;
  min-width:0;
}
.field label{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.field input,
.field select,
.field textarea{
  width:100%;
  box-sizing:border-box;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:12px 13px;
  font-size:14px;
  font-family:inherit;
  outline:none;
}
.field textarea{
  min-height:108px;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{
  color:#8f94a3;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(255,155,61,.6);
  box-shadow:0 0 0 3px rgba(255,155,61,.14);
}
.inline-checks{
  display:grid;
  gap:10px;
  min-width:0;
}
.check-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:12px 13px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}
.check-row input{
  margin-top:2px;
  accent-color:var(--accent);
}
.check-row > div{
  min-width:0;
}
.check-row strong{
  display:block;
  font-size:13px;
  letter-spacing:-.01em;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.check-row span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.status-box{
  display:none;
  padding:13px 14px;
  border-radius:16px;
  font-size:13px;
  line-height:1.55;
  border:1px solid rgba(255,255,255,.1);
}
.status-box.show{display:block}
.status-box.ok{
  background:rgba(61,220,132,.12);
  border-color:rgba(61,220,132,.28);
  color:#bff7d5;
}
.status-box.err{
  background:rgba(255,90,71,.12);
  border-color:rgba(255,90,71,.28);
  color:#ffd0cb;
}
.pricing-card.featured{
  background:
    radial-gradient(circle at top right, rgba(255,90,71,.18), transparent 32%),
    linear-gradient(180deg, rgba(27,20,22,.97), rgba(16,12,15,.97));
  border-color:rgba(255,130,98,.32);
}
.feature-band{
  background:
    radial-gradient(circle at top right, rgba(255,90,71,.16), transparent 30%),
    linear-gradient(180deg, rgba(21,26,37,.96), rgba(12,15,23,.96));
}
.cta-band{
  margin-top:14px;
  align-items:start;
}
.quote-band{
  background:
    radial-gradient(circle at top right, rgba(255,210,127,.14), transparent 32%),
    linear-gradient(180deg, rgba(19,24,36,.96), rgba(11,14,22,.97));
}
.quote{
  color:#f5f2eb;
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.01em;
}
.quote-mark{
  color:var(--accent-3);
  font-size:34px;
  line-height:1;
  font-weight:900;
}
.quote-byline{
  display:grid;
  gap:4px;
}
.quote-byline strong{
  font-size:13px;
  letter-spacing:.01em;
}
.quote-byline span{
  color:var(--muted);
  font-size:12px;
}
.stat-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stat{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  display:grid;
  gap:4px;
  min-width:108px;
}
.stat strong{font-size:18px;letter-spacing:-.03em}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em}
.site-footer{
  padding:34px 0 48px;
  color:var(--muted);
  font-size:13px;
}
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:1080px){
  .hero-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .split,
  .feature-art,
  .signup-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{padding:12px 0;align-items:flex-start}
  .nav-links{justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:760px){
  .wrap{width:min(calc(100vw - 24px), var(--max))}
  .nav{padding:12px 0;align-items:flex-start}
  .nav-links{justify-content:flex-start;flex-wrap:wrap}
  .hero{padding-top:28px}
  .hero-copy,
  .hero-card,
  .section-card,
  .pricing-card,
  .faq-card,
  .feature-band,
  .cta-band,
  .quote-band{padding:18px}
  .hero-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .split,
  .feature-art,
  .signup-grid{grid-template-columns:1fr}
  .mockup-qr{grid-template-columns:1fr}
  .section-head{display:grid;align-items:start}
  .button{width:100%}
}
@media (max-width:480px){
  .wrap{width:min(calc(100vw - 20px), var(--max))}
  .nav{gap:10px}
  .nav-links{gap:6px}
  .nav-links a{font-size:12px;padding:8px 9px}
  .hero-copy,
  .hero-card,
  .section-card,
  .pricing-card,
  .faq-card,
  .feature-band,
  .cta-band,
  .quote-band{padding:16px}
}