@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root{
  color-scheme: dark;
  --al-black: #0a0908;
  --al-black-soft: #141210;
  --al-surface-1: #1c1916;
  --al-surface-2: #26221d;
  --al-cream: #f5f0e6;
  --al-white: #ffffff;
  --al-orange: #ff4a17;
  --al-orange-tint: #ff7a4d;
  --al-gray-300: #c9c2b8;
  --al-gray-400: #8a8177;
  --al-gray-600: #55504a;
  --border-subtle: rgba(245, 240, 230, 0.12);
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --radius-md: 8px;
  --radius-lg: 16px;
  --ls-wide: 0.08em;
  --ls-widest: 0.16em;
  --gradient-vignette-corner: radial-gradient(120% 90% at 78% 22%, rgba(255, 74, 23, 0.24) 0%, rgba(20, 15, 12, 0.5) 45%, #0a0908 75%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: var(--al-black);
  color: var(--al-cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--al-orange); text-decoration:none; }
a:hover{ color: var(--al-orange-tint); }
.al-nav-link{ color: var(--al-gray-300); }
.al-nav-link:hover{ color: var(--al-orange); }
button{ font-family:inherit; }

.al-btn{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; border-radius: var(--radius-md); box-sizing:border-box; white-space:nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.al-btn-lg{ padding:14px 28px; font-size:15px; }
.al-btn-md{ padding:11px 22px; font-size:14px; }
.al-btn-sm{ padding:8px 16px; font-size:13px; }
.al-btn-primary{ background: var(--al-orange); color: var(--al-white); }
.al-btn-primary:hover{ background: var(--al-orange-tint); }
.al-btn-secondary{ background: var(--al-surface-1); color: var(--al-cream); border:1px solid var(--border-subtle); }
.al-btn-secondary:hover{ border-color: var(--al-orange); }
.al-btn-ghost{ background:transparent; color: var(--al-cream); border:1px solid transparent; }
.al-btn-ghost:hover{ background: rgba(245,240,230,.06); }

.al-header{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px,5vw,48px); background: rgba(10,9,8,.85); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border-subtle);
}
.al-header-left{ display:flex; align-items:center; gap:48px; }
.al-brand{ display:flex; align-items:center; gap:10px; }
.al-brand img.mark{ height:30px; width:30px; border-radius:6px; object-fit:cover; }
.al-brand img.wordmark{ height:16px; width:auto; }
.al-nav{ display:flex; gap:32px; font-size:14px; font-weight:500; }
.al-header-actions{ display:flex; gap:12px; align-items:center; }
@media (max-width:860px){ .al-nav{ display:none; } }

.al-hero{
  position:relative; padding: clamp(64px,10vw,120px) clamp(20px,5vw,48px) clamp(48px,8vw,88px);
  background: var(--gradient-vignette-corner); overflow:hidden;
}
.al-eyebrow{ font-size:13px; font-weight:600; letter-spacing:var(--ls-widest); color:var(--al-orange); text-transform:uppercase; margin-bottom:14px; }
.al-hero h1{ font-family: var(--font-display); font-weight:700; font-size: clamp(32px,5vw,52px); line-height:1.08; margin:0 0 18px; max-width:820px; color: var(--al-cream); }
.al-hero h1 .accent{ color: var(--al-orange); }
.al-hero p.lede{ font-size:16px; color: var(--al-gray-300); line-height:1.6; max-width:640px; margin:0 0 32px; }
.al-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

section{ padding: clamp(48px,9vw,88px) clamp(20px,5vw,48px); max-width:1100px; margin:0 auto; }
section.bleed{ max-width:none; border-top:1px solid var(--border-subtle); }
section.bleed > .inner{ max-width:1100px; margin:0 auto; }
.al-section-head{ margin-bottom:36px; max-width:640px; }
.al-section-head h2{ font-family: var(--font-display); font-weight:700; font-size:28px; margin:0; color: var(--al-cream); }
.al-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.al-card{
  background: var(--al-surface-1); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); padding:24px;
}
.al-card h3{ font-size:15px; font-weight:700; margin:0 0 8px; color: var(--al-cream); }
.al-card p{ font-size:13px; color: var(--al-gray-400); line-height:1.6; margin:0; }

.al-faq-item{ border-bottom:1px solid var(--border-subtle); padding:18px 0; }
.al-faq-item h3{ font-size:15px; font-weight:700; margin:0 0 8px; color: var(--al-cream); }
.al-faq-item p{ font-size:13px; color: var(--al-gray-400); line-height:1.6; margin:0; }

.al-cta-band{
  background: var(--al-surface-1); border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.al-cta-band h2{ font-family: var(--font-display); font-size:22px; font-weight:700; margin:0 0 6px; color: var(--al-cream); }
.al-cta-band p{ font-size:14px; color: var(--al-gray-400); margin:0; }

footer{ border-top:1px solid var(--border-subtle); padding: 40px clamp(20px,5vw,48px); }
footer .inner{ max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer .al-brand img.mark{ height:24px; width:24px; }
.al-social-link{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius: var(--radius-md); border:1px solid var(--border-subtle); color: var(--al-gray-300);
  transition: color .12s ease, border-color .12s ease;
}
.al-social-link:hover{ color: var(--al-orange); border-color: var(--al-orange); }

.al-coming-soon-badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing: var(--ls-wide); text-transform:uppercase;
  color: var(--al-orange); border:1px solid var(--al-orange); border-radius: var(--radius-full); padding:6px 14px;
}
.al-coming-soon-badge-lg{ font-size:13px; padding:10px 22px; }
footer p{ font-size:12px; color: var(--al-gray-600); margin:0; }
footer nav{ display:flex; gap:20px; font-size:13px; }

.al-breadcrumb{ font-size:12px; color: var(--al-gray-400); margin-bottom:16px; }
.al-breadcrumb a{ color: var(--al-gray-400); }
.al-breadcrumb a:hover{ color: var(--al-orange); }