:root {
  --navy-900:#081420; --navy-800:#0c1d2e; --navy-700:#13293f; --navy-600:#234e6e;
  --teal:#0283a2; --teal-light:#36b3d1; --lime:#99c33d; --sun:#f6c21c;
  --ink:#122033; --body:#3d4a5c; --muted:#6b7789; --line:#e3e8ef; --paper:#f6f8fb; --white:#fff;
  --radius:20px; --shadow:0 1px 2px rgba(8,20,32,.06), 0 12px 32px -12px rgba(8,20,32,.18);
  --display:"Outfit", system-ui, sans-serif; --text:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:17px/1.65 var(--text); color:var(--body); background:var(--white); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--navy-600); }
h1, h2, h3 { font-family:var(--display); color:var(--ink); line-height:1.1; letter-spacing:-.02em; margin:0; }
.wrap { width:100%; max-width:1160px; margin:0 auto; padding:0 24px; }
.eyebrow { font:600 13px/1 var(--text); letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }

/* Nav */
.nav { position:absolute; inset:0 0 auto; z-index:10; }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font:600 17px/1.1 var(--display); letter-spacing:.01em; }
.brand img { width:36px; height:36px; }
.brand span small { display:block; font:500 11px/1.4 var(--text); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.nav ul { list-style:none; display:flex; gap:32px; margin:0; padding:0; }
.nav ul a { color:rgba(255,255,255,.78); text-decoration:none; font-weight:500; font-size:15px; }
.nav ul a:hover, .nav ul a[aria-current] { color:#fff; }

/* Hero */
.hero { position:relative; overflow:hidden; color:#fff; background:
  radial-gradient(900px 520px at 78% 40%, rgba(2,131,162,.45), transparent 60%),
  radial-gradient(600px 400px at 10% 110%, rgba(153,195,61,.18), transparent 60%),
  linear-gradient(180deg, var(--navy-900), var(--navy-800)); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%); }
.hero .wrap { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:40px; padding-top:150px; padding-bottom:110px; }
.hero h1 { color:#fff; font-size:clamp(44px, 6.4vw, 80px); font-weight:700; }
.hero h1 em { font-style:normal; color:var(--lime); }
.hero p.lead { font-size:20px; color:rgba(255,255,255,.75); max-width:520px; margin:24px 0 36px; }
.hero .eyebrow { color:var(--teal-light); display:inline-block; margin-bottom:22px; }
.hero-art { position:relative; }
.hero-art img { width:110%; max-width:none; margin-left:-2%; filter:drop-shadow(0 40px 50px rgba(0,0,0,.45)); animation:float 6s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-14px) rotate(-1deg); } }
@media (prefers-reduced-motion:reduce) { .hero-art img { animation:none; } }

.btns { display:flex; flex-wrap:wrap; gap:14px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:999px; font:600 16px/1 var(--text); text-decoration:none; transition:transform .15s, background .15s; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--lime); color:var(--navy-900); }
.btn-primary:hover { background:#abd34f; color:var(--navy-900); }
.btn-ghost { color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn-ghost:hover { color:#fff; box-shadow:inset 0 0 0 1.5px #fff; }

/* Sections */
section.block { padding:110px 0; }
section.alt { background:var(--paper); }
.section-head { max-width:640px; margin-bottom:56px; }
.section-head h2 { font-size:clamp(34px, 4vw, 48px); margin-top:14px; }
.section-head p { font-size:19px; margin:18px 0 0; }

/* Featured game */
.feature { display:grid; grid-template-columns:1.25fr 1fr; background:var(--white); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.feature > * { min-width:0; }
.feature-media { position:relative; background:var(--navy-800); min-height:380px; }
.feature-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-body { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.tag { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:#fff6d6; color:#7a5a00; font:600 13px/1 var(--text); }
.tag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sun); }
.feature-body h3 { font-size:38px; margin:20px 0 6px; }
.feature-body .sub { color:var(--muted); font-weight:500; margin:0 0 18px; }
.feature-body ul { padding:0; margin:22px 0 0; list-style:none; display:grid; gap:10px; }
.feature-body li { padding-left:28px; position:relative; }
.feature-body li::before { content:""; position:absolute; left:0; top:.55em; width:14px; height:14px; border-radius:4px; background:var(--teal); opacity:.9; }
.shots { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.shots img { border-radius:18px; box-shadow:var(--shadow); aspect-ratio:16/8; object-fit:cover; width:100%; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.step { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.step .num { font:700 15px/1 var(--display); color:var(--teal); width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(2,131,162,.1); margin-bottom:22px; }
.step h3 { font-size:22px; margin-bottom:10px; }
.step p { margin:0; }

/* Promise band */
.promise-band { background:linear-gradient(135deg, var(--navy-800), var(--navy-700)); color:rgba(255,255,255,.78); border-radius:32px; padding:64px; display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:center; }
.promise-band h2 { color:#fff; font-size:clamp(32px, 3.6vw, 44px); margin:14px 0 16px; }
.promise-band .eyebrow { color:var(--lime); }
.promise-band img { width:260px; filter:drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.checks { list-style:none; padding:0; margin:28px 0 32px; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.checks li { display:flex; gap:12px; align-items:flex-start; color:#fff; font-weight:500; }
.checks li::before { content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23081420' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Inner pages */
.page-hero { background:linear-gradient(180deg, var(--navy-900), var(--navy-800)); color:rgba(255,255,255,.75); padding:150px 0 72px; position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; width:700px; height:700px; right:-200px; top:-300px; border-radius:50%; background:radial-gradient(rgba(2,131,162,.45), transparent 65%); }
.page-hero .wrap { position:relative; }
.page-hero h1 { color:#fff; font-size:clamp(40px, 5vw, 60px); margin:14px 0 14px; }
.page-hero .eyebrow { color:var(--teal-light); }
.page-hero p { font-size:19px; max-width:620px; margin:0; }
.page-hero.with-seal .wrap { display:flex; align-items:center; gap:48px; }
.page-hero.with-seal img { width:200px; flex:none; filter:drop-shadow(0 18px 28px rgba(0,0,0,.4)); }
.prose { max-width:760px; padding:80px 24px 100px; margin:0 auto; }
.prose h2 { font-size:26px; margin:48px 0 12px; }
.prose h2:first-child { margin-top:0; }
.prose p, .prose ul { margin:0 0 16px; }
.prose ul { padding-left:22px; }
.callout { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; margin:0 0 40px; }
.callout p:last-child { margin:0; }
.promise-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 48px; }
.promise-card { border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.promise-card h3 { font-size:21px; margin:16px 0 8px; }
.promise-card p { margin:0; }
.promise-card .icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(153,195,61,.18); color:#4f7a12; }
.faq { border-top:1px solid var(--line); }
.faq div { border-bottom:1px solid var(--line); padding:22px 0; }
.faq b { color:var(--ink); display:block; font-size:18px; margin-bottom:4px; }
.contact-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(135deg, var(--navy-800), var(--navy-700)); color:rgba(255,255,255,.75); border-radius:var(--radius); padding:32px; margin:0 0 48px; }
.contact-card h2 { color:#fff; margin:0 0 6px !important; font-size:24px; }
.contact-card p { margin:0 !important; }

/* Footer */
footer.site { background:var(--navy-900); color:rgba(255,255,255,.6); padding:64px 0 40px; font-size:15px; }
footer.site .top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
footer.site nav { display:flex; flex-wrap:wrap; gap:28px; }
footer.site a { color:rgba(255,255,255,.8); text-decoration:none; }
footer.site a:hover { color:#fff; }
footer.site .bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:28px; font-size:14px; }

/* Responsive */
@media (max-width:900px) {
  .hero .wrap { grid-template-columns:1fr; padding-top:120px; padding-bottom:72px; text-align:left; }
  .hero-art { order:-1; max-width:420px; margin:0 auto; }
  .hero-art img { width:100%; margin:0; }
  .feature, .promise-band { grid-template-columns:1fr; }
  .feature-media { min-height:0; aspect-ratio:16/9; }
  .feature-body { padding:32px 28px; }
  .steps { grid-template-columns:1fr; }
  .promise-band { padding:40px 28px; gap:24px; text-align:left; }
  .promise-band img { width:160px; }
  section.block { padding:72px 0; }
  .page-hero.with-seal .wrap { flex-direction:column; align-items:flex-start; gap:24px; }
  .page-hero.with-seal img { width:140px; }
}
@media (max-width:640px) {
  .wrap { padding:0 16px; }
  .nav ul { gap:18px; }
  .nav ul li.hide-sm { display:none; }
  .brand span { display:none; }
  .checks, .promise-grid, .shots { grid-template-columns:1fr; }
  .shots { gap:16px; }
  .prose { padding:56px 16px 72px; }
  .page-hero { padding:120px 0 56px; }
}