:root {
  --navy:#0a1324; --ink:#0b1a2b; --mid:#172139;
  --gold:#d4af37; --pale-gold:#f3e7c6;
  --slate:#111827; --muted:#6b7280;
  --soft:#f6f7fb; --paper:#f9fafb; --white:#ffffff;
  --radius:14px; --radius-sm:10px; --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: var(--slate); background: var(--white);}
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

header.nav {
  position: sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(10,19,36,0.98), rgba(10,19,36,0.92));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px) saturate(1.2);
}
.nav .row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav a.logo { display:flex; align-items:center; gap:12px; padding:10px 0; text-decoration:none; }
.nav a.logo span { color:#fff; font-weight:800; letter-spacing:.6px; }
.nav img.logo { height:36px; width:auto; }
.nav ul { list-style:none; display:flex; gap:20px; padding:0; margin:0; }
.nav ul a { color:#fff; text-decoration:none; font-weight:700; font-size:15px; opacity:.95; }
.nav ul a:hover { color: var(--gold); }
.nav .cta-inline a { display:inline-flex; gap:8px; align-items:center; color:#fff; text-decoration:none; font-weight:700; }
.nav .cta-inline a:hover { color: var(--gold);}

.hero {
  position:relative; color:#fff; overflow:hidden;
  background: radial-gradient(800px 400px at 80% -10%, rgba(212,175,55,0.22), transparent 60%), var(--ink);
}
.hero::before {
  content:""; position:absolute; inset:-10% -10% auto auto; width:900px; height:700px;
  background: url('assets/blob.svg') no-repeat right top / contain;
  opacity:.7; pointer-events:none;
}
.hero::after {
  content:""; position:absolute; inset:auto -10% -20% -10%; height:400px;
  background: url('assets/grid.svg') center / cover no-repeat; opacity:.15;
}
.hero .grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; padding:84px 0 64px; }
.hero h1 { font-size: clamp(28px, 4vw, 52px); line-height:1.05; margin:0 0 14px; }
.hero p.lead { font-size: clamp(16px,2.2vw,20px); color:#e5e7eb; margin:0 0 20px; }
.kicker { text-transform:uppercase; letter-spacing:.14em; color: var(--gold); font-weight:900; font-size:12px; }
.badges { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; }

.card { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); box-shadow: var(--shadow); padding:20px; }
.card.soft { background: var(--paper);}
.shadow { box-shadow: var(--shadow);}
.hr { border:0; border-top:1px dashed #e5e7eb; margin:16px 0; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none; transition: transform .12s ease, box-shadow .12s ease; }
.btn.primary { background: linear-gradient(135deg, var(--gold), var(--pale-gold)); color:#1f2937; box-shadow: 0 8px 20px rgba(212,175,55,.25); }
.btn.ghost { border:1.5px solid rgba(255,255,255,.6); color:#fff; }
.btn:hover { transform: translateY(-1px);}

.section { padding:68px 0; }
.section.alt { background: var(--soft);}
.section h2 { font-size: clamp(22px, 3.2vw, 36px); margin:0 0 10px; }
.section p.section-intro { color: var(--muted); margin:0 0 22px; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }

.feature { display:flex; gap:12px; align-items:flex-start; }
.feature img { flex:0 0 20px; }
.feature h4 { margin:0; font-size:16px;}
.feature p { margin:6px 0 0; color:#374151; font-size:14px; }

.pricing { border: 1px solid #e5e7eb; border-radius: var(--radius); overflow:hidden; }
.pricing table { width:100%; border-collapse:collapse; }
.pricing th, .pricing td { padding:14px 12px; border-bottom:1px solid #eef2f7; text-align:left; }
.pricing th { background:#f9fafb; font-size:14px; }
.price { font-weight:900; color: var(--ink);}

.badge { display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; background: #fffbe6; border:1px solid #f59e0b33; }

.testimonials .quote { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.quote b { color: var(--ink);}
.stars { letter-spacing:2px; color: var(--gold); }

.faq details { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:14px 16px; margin:10px 0; }
.faq summary { cursor:pointer; font-weight:800; }
.faq p { margin:10px 0 0; color:#374151; }

footer { background: var(--navy); color:#cbd5e1; padding:28px 0; font-size:14px; }
footer a { color:#fff; text-decoration:none; }

.floating-cta { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
.floating-cta a { display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:999px; background: linear-gradient(135deg, var(--gold), var(--pale-gold)); color:#111827; font-weight:900; text-decoration:none; box-shadow: 0 8px 24px rgba(212,175,55,.3);}

.sticky-contact { position: sticky; bottom:0; z-index:40; background: #0c172b; color:#fff; padding:10px 0; display:none; }
.sticky-contact .row { display:flex; gap:12px; align-items:center; justify-content:center; }
.sticky-contact a { color:#fff; text-decoration:none; font-weight:800; }
@media (max-width: 760px) { .sticky-contact { display:block; } .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } .hero .grid { grid-template-columns:1fr; } }