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

:root {
  --navy:#071b31;
  --navy-2:#0d2a49;
  --gold:#d4a24c;
  --gold-light:#e6c27a;
  --ink:#111827;
  --muted:#5e6675;
  --paper:#f8f7f4;
  --surface:#ffffff;
  --soft:#efede7;
  --line:#dedbd4;
  --shadow:0 18px 42px rgba(7,27,49,.10);
}

[data-theme="dark"] {
  --ink:#f7f7f5;
  --muted:#b7bec8;
  --paper:#07111f;
  --surface:#0c1c30;
  --soft:#10243d;
  --line:rgba(255,255,255,.12);
  --shadow:0 18px 42px rgba(0,0,0,.3);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; background:var(--paper); }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; }
button { font:inherit; }

.site-header { position:sticky; z-index:50; top:0; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(14px); }
.header-shell,.content-shell,.footer-shell { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.header-shell { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand img { flex:0 0 auto; }
.brand-copy { display:flex; min-width:0; flex-direction:column; }
.brand-copy strong { font-size:21px; font-weight:900; line-height:1.05; }
.brand-copy strong span { color:#b67b1d; }
.brand-copy small { margin-top:4px; color:var(--muted); font-size:9px; font-weight:700; }
.site-header nav { display:flex; align-items:center; gap:23px; }
.site-header nav a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; }
.site-header nav a:hover { color:var(--ink); }
.site-header nav .nav-cta { padding:9px 15px; border:1px solid #9e6815; border-radius:8px; background:var(--gold); color:#17120b; }
.nav-toggle { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; }
.nav-toggle span { width:20px; height:2px; display:block; margin:4px auto; background:var(--ink); }

.hero { position:relative; min-height:660px; display:flex; align-items:center; isolation:isolate; overflow:hidden; background:url('/assets/images/brand/dartsboard-social-1200x630.png') center/cover no-repeat; }
.hero-shade { position:absolute; z-index:-1; inset:0; background:rgba(3,18,34,.84); }
.hero-shell { width:min(1160px,calc(100% - 40px)); margin:0 auto; color:#fff; }
.hero-shell > * { max-width:760px; }
.eyebrow,.section-kicker { margin:0 0 10px; color:#b77816; font-size:11px; font-weight:900; text-transform:uppercase; }
.hero .eyebrow { color:var(--gold-light); }
.hero h1 { margin:0 0 22px; color:#fff; font-size:62px; line-height:1.04; }
.hero-lead { margin:0; color:rgba(255,255,255,.9); font-size:20px; line-height:1.55; }
.hero-actions { display:flex; gap:12px; margin-top:30px; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 18px; border:1px solid transparent; border-radius:8px; font-size:13px; font-weight:800; text-decoration:none; cursor:pointer; }
.button-gold { border-color:#a96f13; background:var(--gold); color:#17120b; box-shadow:0 9px 22px rgba(136,88,14,.22); }
.button-gold:hover { background:var(--gold-light); }
.button-outline { border-color:rgba(230,194,122,.64); background:rgba(7,27,49,.46); color:#fff; }
.button-outline:hover { background:rgba(255,255,255,.1); }
.button-dark { border-color:var(--navy); background:var(--navy); color:#fff; }
.button-outline-dark { border-color:#a56d17; background:transparent; color:var(--ink); }
.hero-facts { display:flex; flex-wrap:wrap; gap:9px; margin:34px 0 0; padding:0; list-style:none; }
.hero-facts li { padding:7px 11px; border:1px solid rgba(255,255,255,.22); border-radius:6px; background:rgba(7,27,49,.55); color:rgba(255,255,255,.82); font-size:11px; font-weight:700; }

.benefits,.features,.counter-band,.trial,.install,.support,.closing { padding:86px 0; }
.benefits { background:var(--surface); }
.benefits h2,.features h2,.counter-band h2,.trial h2,.install h2,.support h2,.closing h2 { max-width:760px; margin:0 0 20px; color:var(--ink); font-size:36px; line-height:1.16; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px; }
.benefit-grid article { padding:26px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }
.benefit-grid article > span { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:var(--gold-light); font-size:19px; font-weight:900; }
.benefit-grid h3 { margin:18px 0 9px; font-size:20px; }
.benefit-grid p,.feature-heading p,.counter-layout p,.split-section p,.support-copy p,.closing p { margin:0; color:var(--muted); }

.features { background:var(--soft); }
.feature-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:76px; align-items:start; }
.feature-heading { position:sticky; top:116px; }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:#996417; font-weight:800; text-decoration:none; }
.feature-list { display:grid; gap:0; margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }
.feature-list li { display:grid; grid-template-columns:46px minmax(0,1fr); gap:4px 12px; padding:20px 0; border-bottom:1px solid var(--line); }
.feature-list li > span { grid-row:1/3; color:#a66e18; font-size:12px; font-weight:900; }
.feature-list strong { font-size:16px; }
.feature-list small { color:var(--muted); font-size:13px; }

.counter-band { background:#f3e7d1; }
[data-theme="dark"] .counter-band { background:#102138; }
.counter-layout { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:72px; align-items:center; }
.counter-visual { min-height:330px; display:flex; align-items:center; justify-content:center; flex-direction:column; border:1px solid rgba(230,194,122,.55); border-radius:8px; background:var(--navy); color:#fff; box-shadow:var(--shadow); }
.counter-visual strong { margin-top:15px; color:#fff; font-size:76px; line-height:1; }
.counter-visual span { margin-top:8px; color:var(--gold-light); font-size:12px; font-weight:800; text-transform:uppercase; }
.counter-layout p { margin-bottom:24px; }

.trial { background:var(--navy); color:#fff; }
.trial h2 { color:#fff; }
.trial p { color:rgba(255,255,255,.78); }
.split-section { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:76px; }
.split-section p + p { margin-top:12px; }
.split-section .button { margin-top:24px; }
.install { background:var(--surface); }

.support { background:#081a2f; color:#fff; }
.support-shell { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:28px; align-items:center; }
.support-mark { width:92px; height:92px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold-light); font-size:40px; }
.support h2 { margin-bottom:8px; color:#fff; }
.support-copy p { max-width:650px; color:rgba(255,255,255,.76); }
.support-actions { display:grid; gap:10px; min-width:205px; }
.closing { background:var(--surface); text-align:center; }
.closing .content-shell { display:flex; align-items:center; flex-direction:column; }
.closing h2 { margin-top:18px; }
.closing p { margin-bottom:24px; }

footer { border-top:1px solid var(--line); background:var(--surface); }
.footer-shell { min-height:102px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand .brand-copy strong { font-size:18px; }
footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:22px; }
footer nav a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; }
footer nav a:hover { color:var(--ink); }

.support-dialog { width:min(650px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:1px solid var(--gold); border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:0 26px 80px rgba(0,0,0,.36); }
.support-dialog::backdrop { background:rgba(3,12,23,.72); backdrop-filter:blur(4px); }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px; background:var(--navy); color:#fff; }
.dialog-header span { color:var(--gold-light); font-size:10px; font-weight:900; text-transform:uppercase; }
.dialog-header h2 { margin:5px 0 0; color:#fff; font-size:25px; }
.dialog-header button { width:44px; height:44px; flex:0 0 auto; border:1px solid rgba(255,255,255,.3); border-radius:8px; background:transparent; color:#fff; font-size:25px; cursor:pointer; }
.dialog-body { padding:24px; }
.dialog-body p { color:var(--muted); }
.dialog-body ul { padding-left:20px; color:var(--muted); }
.dialog-note { padding:13px 15px; border-left:3px solid var(--gold); background:color-mix(in srgb,var(--gold) 12%,var(--surface)); }

.button:focus-visible,.brand:focus-visible,.site-header nav a:focus-visible,.nav-toggle:focus-visible,.dialog-header button:focus-visible,.text-link:focus-visible,footer a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

@media (max-width:920px) {
  .nav-toggle { display:block; }
  .site-header nav { position:absolute; top:calc(100% + 1px); right:0; left:0; display:none; align-items:stretch; flex-direction:column; gap:0; padding:12px 20px 18px; border-bottom:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
  .site-header nav.is-open { display:flex; }
  .site-header nav a { justify-content:center; }
  .feature-layout,.counter-layout,.split-section { grid-template-columns:1fr; gap:34px; }
  .feature-heading { position:static; }
  .counter-visual { min-height:270px; }
  .support-shell { grid-template-columns:82px minmax(0,1fr); }
  .support-actions { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .hero { min-height:680px; background-position:64% center; }
  .hero h1 { font-size:43px; }
  .hero-lead { font-size:18px; }
  .benefits,.features,.counter-band,.trial,.install,.support,.closing { padding:62px 0; }
  .benefits h2,.features h2,.counter-band h2,.trial h2,.install h2,.support h2,.closing h2 { font-size:30px; }
  .benefit-grid { grid-template-columns:1fr; }
  .footer-shell { align-items:flex-start; flex-direction:column; padding:24px 0; }
  footer nav { justify-content:flex-start; gap:8px 20px; }
}

@media (max-width:480px) {
  .header-shell,.content-shell,.footer-shell,.hero-shell { width:min(100% - 32px,1160px); }
  .site-header .brand-copy small { display:none; }
  .hero { min-height:700px; }
  .hero h1 { font-size:37px; overflow-wrap:anywhere; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions .button { width:100%; }
  .hero-facts { margin-top:25px; }
  .benefit-grid article { padding:22px; }
  .support-shell { grid-template-columns:1fr; text-align:center; }
  .support-mark { margin:0 auto; }
  .support-actions { grid-column:auto; grid-template-columns:1fr; }
  .dialog-header,.dialog-body { padding:20px 18px; }
  .dialog-header h2 { font-size:21px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }