:root {
  --deep:#032f27;
  --deepest:#011d18;
  --emerald:#087356;
  --gold:#ffd45a;
  --gold-pale:#fff0a7;
  --white:#fffdf4;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}

* { box-sizing:border-box }
html { min-width:280px; background:var(--deepest) }
body { min-width:280px; margin:0; color:var(--white); background:var(--deepest) }
a { color:inherit; text-decoration:none }
img { display:block }
p,h1,h2 { margin:0 }
.skip-link { position:fixed; z-index:100; left:12px; top:-60px; padding:9px 12px; color:var(--deep); background:var(--gold); font-weight:900 }
.skip-link:focus { top:10px }
a:focus-visible { outline:3px solid white; outline-offset:4px }

.site-header {
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;
  padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));
  background:linear-gradient(180deg,#011d18eb 0,#011d18b8 72%,transparent);
}
.brand { display:flex; align-items:center; gap:9px; font-size:.82rem; font-weight:950; letter-spacing:.035em; white-space:nowrap }
.brand b { color:var(--gold) }
.brand-mark { display:grid; place-items:center; width:38px; height:40px; color:var(--gold-pale); border:2px solid var(--gold); border-radius:10px; font-size:.9rem; font-weight:950; box-shadow:0 0 28px #ffc83d31 }
.header-cta { padding:11px 16px; color:var(--deepest); background:linear-gradient(135deg,var(--gold-pale),#f5b91b); border:1px solid #fff0a7; border-radius:4px; font-size:.7rem; font-weight:950; letter-spacing:.08em; box-shadow:0 10px 30px #0008 }
.landing-cta { position:relative }
.landing-cta.is-loading {
  pointer-events:none;
  color:transparent;
  cursor:wait;
  opacity:.78;
}
.landing-cta.is-loading::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  margin:-10px 0 0 -10px;
  border:2px solid #032f274d;
  border-top-color:var(--deepest);
  border-radius:50%;
  animation:cta-loading .65s linear infinite;
}
@keyframes cta-loading { to { transform:rotate(360deg) } }

.split-hero {
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#064534;
}
.hero-art,.hero-light { position:absolute; inset:0; width:100%; height:100% }
.hero-art { z-index:-3; object-fit:cover; object-position:center }
.hero-light {
  z-index:-2;
  background:
    linear-gradient(180deg,#011e19ad 0,transparent 18%,transparent 61%,#011c17d1 89%,#011913f7 100%),
    linear-gradient(90deg,#031b14a3 0,transparent 36%,transparent 64%,#00282394 100%);
}
.hero-light:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent 7%,#ffe584 24%,#fff7c5 50%,#f8c933 77%,transparent 96%);
  box-shadow:0 0 18px #ffe680,0 0 54px #ffd348;
  opacity:.92;
}
.split-panels { min-height:100svh; display:grid; grid-template-columns:1fr 1fr }
.panel { position:relative; min-width:0 }
.panel-copy { position:absolute; z-index:2; top:12%; width:100%; padding:0 6.5vw }
.win-panel .panel-copy { left:0; text-align:left }
.pix-panel .panel-copy { right:0; text-align:right }
.panel-copy>p { color:#fff0a1; font-size:clamp(.58rem,2.4vw,.82rem); font-weight:950; letter-spacing:.12em }
.panel-copy h1,.panel-copy h2 { margin-top:10px; font-size:clamp(2.15rem,10.4vw,4.1rem); line-height:.84; letter-spacing:-.075em; font-weight:950; text-shadow:0 5px 24px #001b16cc }
.panel-copy em { color:var(--gold); font-style:normal }
.panel-copy strong { display:inline-block; margin-top:14px; padding:7px 9px; color:var(--deepest); background:linear-gradient(135deg,#fff4b9,var(--gold)); border:1px solid #fff1aa; font-size:clamp(.53rem,2.25vw,.74rem); font-weight:950; letter-spacing:.07em; box-shadow:0 9px 26px #0007 }
.panel-action { position:absolute; z-index:3; left:0; right:0; bottom:10.5%; padding:0 4vw }
.pix-panel .panel-action { text-align:right }
.panel-action>span { display:block; min-height:2.4em; color:#fff5c5; font-size:clamp(.5rem,2.05vw,.7rem); line-height:1.2; font-weight:950; letter-spacing:.08em; text-shadow:0 2px 10px #000 }
.panel-action>a { display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin-top:9px; padding:11px 6px; color:var(--deepest); background:linear-gradient(135deg,#fff1a5 0,#ffc72f 55%,#eaa300 100%); border:1px solid #fff1a5; border-radius:4px; font-size:clamp(.65rem,2.8vw,.88rem); font-weight:950; letter-spacing:.035em; box-shadow:0 13px 32px #000b,0 0 28px #ffc62e35 }
.panel-action>a:active { transform:translateY(1px) }
.center-die-label { position:absolute; z-index:2; left:50%; top:67.5%; transform:translateX(-50%); padding:7px 10px; color:var(--deepest); background:#fff4b8e8; border:1px solid white; border-radius:999px; white-space:nowrap; font-size:.48rem; font-weight:950; letter-spacing:.14em; box-shadow:0 8px 28px #0009 }
.legal-line {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:3.4%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:94%;
  transform:translateX(-50%);
  color:#d8e6e0;
  font-size:clamp(.42rem,1.7vw,.59rem);
  font-weight:850;
  letter-spacing:.035em;
  text-align:center;
}
.legal-line span { padding:0 8px; border-right:1px solid #f4d56f70 }
.legal-line span:first-child { color:var(--gold); font-size:1.2em; font-weight:950 }
.legal-line span:last-child { border:0 }
footer { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); color:#7f9b90; background:#011913; text-align:center; font-size:.48rem; line-height:1.4 }

@media(min-width:700px) {
  .site-header { min-height:82px; padding-inline:4vw }
  .brand { font-size:1rem }
  .brand-mark { width:44px; height:46px; font-size:1.05rem }
  .header-cta { min-width:150px; padding:13px 20px; font-size:.76rem }
  .hero-art { object-position:center 52% }
  .panel-copy { top:15%; padding-inline:7vw }
  .panel-copy h1,.panel-copy h2 { font-size:clamp(4.3rem,7vw,7.3rem) }
  .panel-copy>p { font-size:.8rem }
  .panel-copy strong { font-size:.76rem; padding:9px 12px }
  .panel-action { bottom:9%; padding-inline:6vw }
  .panel-action>span { min-height:auto; font-size:.72rem }
  .panel-action>a { max-width:320px; min-height:60px; padding:16px 20px; font-size:.85rem }
  .pix-panel .panel-action>a { margin-left:auto }
  .center-die-label { top:72%; font-size:.58rem }
  .legal-line { bottom:2.4%; font-size:.58rem }
}

@media(max-width:340px) {
  .site-header { padding-inline:10px }
  .brand { font-size:.7rem }
  .brand-mark { width:34px; height:36px; font-size:.78rem }
  .header-cta { padding:9px 11px; font-size:.62rem }
  .panel-copy { padding-inline:4.5vw }
  .panel-copy h1,.panel-copy h2 { font-size:1.95rem }
  .panel-action { padding-inline:3vw }
  .panel-action>a { font-size:.61rem }
  .legal-line span { padding-inline:5px }
}

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