:root {
  --ink: #f4f8fb;
  --muted: #8c98a6;
  --bg: #05070b;
  --panel: #090e14;
  --line: rgba(163, 223, 230, .16);
  --cyan: #55f1ed;
  --pink: #ff4fb8;
  --green: #0d705d;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 75% 5%, rgba(17, 137, 147, .13), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

.site-header, footer {
  width: min(calc(100% - 48px), var(--max));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header { height: 86px; position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.brand-mark { display:block; width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(85,241,237,.12)); }
.header-link { color: var(--muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

.hero {
  min-height: calc(100svh - 86px);
  width: min(calc(100% - 48px), var(--max));
  margin: auto;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 40px;
  position: relative;
  padding: 44px 0 100px;
  overflow: visible;
}
.hero-light { position: absolute; width: 560px; height: 560px; right: -120px; top: 0; border-radius: 50%; background: rgba(3, 72, 75, .15); filter: blur(80px); pointer-events: none; }
.eyebrow { margin: 0 0 24px; color: #afbbc6; font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.eyebrow span { display: inline-block; vertical-align: middle; width: 24px; height: 1px; background: var(--pink); margin-right: 10px; box-shadow: 0 0 8px var(--pink); }
h1, h2 { margin: 0; font-weight: 800; letter-spacing: -.055em; line-height: .92; }
h1 { font-size: clamp(3.5rem, 6.4vw, 6.2rem); text-shadow: 0 0 32px rgba(85, 241, 237, .08); }
h1 em, h2 em { color: transparent; -webkit-text-stroke: 1px var(--cyan); font-style: normal; text-shadow: 0 0 20px rgba(85, 241, 237, .18); }
.hero-text { max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.7; margin: 28px 0 30px; }
.coming-button { width: max-content; min-width: 202px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 12px 18px; border: 1px solid rgba(244, 248, 251, .22); border-radius: 10px; background: rgba(255,255,255,.035); font-weight: 650; line-height: 1.05; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.coming-button small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.apple { color: var(--ink); font-size: 21px; }
.platform-note { color: #65717d; font-size: 9px; letter-spacing: .2em; margin: 13px 0 0 29px; }

.hero-game { position: relative; height: 560px; display: grid; place-items: center; perspective: 900px; overflow: hidden; }
.table-orbit { position: absolute; inset: 9% -12% 4% 2%; transform: perspective(700px) rotateX(63deg) rotateZ(-6deg); border: 1px solid rgba(85,241,237,.25); border-radius: 42% 42% 15% 15%; background: linear-gradient(135deg, rgba(8,76,65,.82), rgba(4,27,31,.6)); box-shadow: inset 0 0 45px rgba(85,241,237,.07), 0 30px 70px rgba(0,0,0,.45); overflow: hidden; }
.table-orbit::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(255,255,255,.13); border-radius: inherit; }
.orbit-label { position: absolute; color: rgba(176, 245, 236, .55); font-weight: 800; letter-spacing: .1em; font-size: 18px; }
.orbit-pass { bottom: 13%; left: 24%; right: 24%; text-align: center; border: 1px solid rgba(255,255,255,.12); padding: 11px; }
.orbit-come { top: 26%; left: 39%; font-size: 30px; }
.orbit-field { top: 45%; left: 43%; }
.rail { position: absolute; border: 1px solid rgba(85,241,237,.15); border-radius: 50%; }
.rail-one { inset: 16% 12%; }.rail-two { inset: 27% 24%; }
.dice-stage { --die-size:108px; width:310px; height:270px; position:relative; z-index:2; transform:translateY(-20px); perspective:820px; perspective-origin:50% 45%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.die { position:absolute; width:var(--die-size); height:var(--die-size); transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.die-one { left:10px; top:108px; }
.die-two { left:190px; top:116px; }
.die::after { content:""; position:absolute; z-index:-1; left:12px; right:12px; bottom:-10px; height:13px; border-radius:50%; background:rgba(0,0,0,.82); filter:blur(4px); transform:rotateX(70deg); transition:opacity .18s ease,transform .18s ease; }
.die.is-rolling::after { opacity:.2; transform:rotateX(70deg) scale(.68); }
.die-motion,.die-view,.die-cube { position:absolute; inset:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; }
.die-view { transform:rotateX(-20deg) rotateY(28deg); }
.die-two .die-view { transform:rotateX(-20deg) rotateY(-28deg); }
.die-cube { will-change:transform; }
.die-face {
  position:absolute;
  inset:0;
  display:grid;
  grid-template:repeat(3,1fr)/repeat(3,1fr);
  padding:17px;
  overflow:visible;
  border:1px solid #57101d;
  border-radius:1px;
  background:#420914;
  box-shadow:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.die-face::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:10px;
  pointer-events:none;
  background:
    linear-gradient(125deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.018) 24%,transparent 43%),
    radial-gradient(circle at 15% 12%,rgba(255,180,186,.17),transparent 31%),
    radial-gradient(circle at 88% 88%,rgba(6,210,208,.055),transparent 30%),
    linear-gradient(145deg,#7e1728 0%,#5a0e1e 44%,#350711 100%);
  border:1px solid rgba(255,112,126,.24);
  box-shadow:
    inset 6px 6px 12px rgba(255,210,213,.08),
    inset -8px -10px 15px rgba(29,0,7,.34),
    inset 0 0 0 1px rgba(255,155,164,.06);
}
.face-front { transform:rotateY(0deg) translateZ(calc(var(--die-size)/2)); }
.face-back { transform:rotateY(180deg) translateZ(calc(var(--die-size)/2)); }
.face-right { transform:rotateY(90deg) translateZ(calc(var(--die-size)/2)); }
.face-left { transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2)); }
.face-top { transform:rotateX(90deg) translateZ(calc(var(--die-size)/2)); }
.face-bottom { transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2)); }
.pip { position:relative; z-index:1; width:11px; height:11px; place-self:center; border:1px solid rgba(255,255,255,.58); border-radius:50%; background:#eee9dc; box-shadow:inset 1px 2px 3px rgba(73,36,38,.48),0 1px 1px rgba(255,255,255,.12); }
.pip.tl { grid-area:1/1 }.pip.tc { grid-area:1/2 }.pip.tr { grid-area:1/3 }
.pip.ml { grid-area:2/1 }.pip.mc { grid-area:2/2 }.pip.mr { grid-area:2/3 }
.pip.bl { grid-area:3/1 }.pip.bc { grid-area:3/2 }.pip.br { grid-area:3/3 }
.hero-game[role="button"] { cursor:pointer; }
.hero-game[role="button"]:focus-visible { outline:1px solid var(--cyan); outline-offset:5px; }
.chip { position: absolute; z-index: 3; width: 63px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; border: 6px dashed rgba(255,255,255,.75); box-shadow: 0 15px 23px rgba(0,0,0,.5); }
.chip::after { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.chip-pink { background:#c62d87; right: 13%; top: 28%; transform: rotate(18deg); }
.chip-cyan { background:#087e82; left: 8%; bottom: 17%; transform: rotate(-12deg); }
.hero-status { position: absolute; z-index: 4; bottom: 4%; color: #85929d; letter-spacing: .15em; font-size: 9px; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); margin-right:8px; animation: breathe 3s ease-in-out infinite; }
.hero-status b { color: #34434d; margin: 0 7px; }

.section { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 120px 0; }
.experience { border-top: 1px solid var(--line); display:grid; grid-template-columns: 1fr 1fr; column-gap: 80px; }
h2 { font-size: clamp(3rem, 6vw, 5.3rem); }
.section-intro, .table-copy > p:last-child { align-self:end; color:var(--muted); line-height:1.75; max-width:440px; margin:0 0 6px; }
.features { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:74px; }
.feature { position:relative; min-height:260px; padding:35px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(12,19,27,.75),rgba(7,11,16,.65)); }
.feature-number { position:absolute; top:20px; right:22px; color:#44515d; font:10px ui-monospace, monospace; }
.feature-icon { width:47px; height:47px; display:grid; place-items:center; color:var(--cyan); border:1px solid rgba(85,241,237,.3); margin-bottom:44px; box-shadow:inset 0 0 18px rgba(85,241,237,.06); }
.feature:nth-child(2) .feature-icon { color:var(--pink); border-color:rgba(255,79,184,.3); }
.feature h3 { margin:0 0 12px; font-size:17px; }
.feature p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; max-width:230px; }

.table-section { display:grid; grid-template-columns:.75fr 1.25fr; align-items:center; gap:80px; }
.table-copy > p:last-child { margin-top:30px; }
.craps-board { position:relative; min-height:470px; padding:38px; display:grid; grid-template-rows:70px 46px 100px 1fr 44px; transform:perspective(1000px) rotateX(7deg) rotateY(-6deg); background:linear-gradient(145deg,#0b584b,#07372f); border:10px solid #111920; outline:1px solid rgba(85,241,237,.22); box-shadow:0 35px 80px rgba(0,0,0,.55), inset 0 0 50px rgba(0,0,0,.25); color:rgba(225,255,249,.72); font-weight:750; letter-spacing:.12em; }
.board-top { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid rgba(255,255,255,.26); }
.board-top span { display:grid; place-items:center; border-right:1px solid rgba(255,255,255,.2); }
.board-top span:last-child { border:0; }.board-top .six { color:var(--pink); }
.dont-pass,.come-box,.field-box,.pass-line { display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-top:0; }
.dont-pass { font-size:11px; }.dont-pass small { margin-left:10px; color:rgba(255,255,255,.38); }
.come-box { font-size:26px; }
.field-box { font-size:20px; align-content:center; gap:12px; }.field-box small { font-size:8px; }.field-box b { font-size:9px; }
.pass-line { color:var(--cyan); border-color:rgba(85,241,237,.45); }
.board-chip { position:absolute; width:54px; height:54px; display:grid; place-items:center; border-radius:50%; border:5px dashed white; font-size:10px; color:#fff; box-shadow:0 12px 20px rgba(0,0,0,.45); }
.board-chip-one { background:#b72e7d; right:18%; bottom:30%; }.board-chip-two { background:#136d99; right:9%; bottom:25%; }
.puck { position:absolute; width:45px; height:45px; border-radius:50%; display:grid; place-items:center; top:8%; left:39%; background:#f2f2ea; color:#171b1d; font-size:9px; box-shadow:0 8px 16px rgba(0,0,0,.45); }

.final-cta { position:relative; text-align:center; border-top:1px solid var(--line); overflow:hidden; }
.final-cta h2 { font-size:clamp(3.4rem,7vw,6.3rem); }
.final-cta > p:not(.eyebrow) { color:var(--muted); margin:28px 0; }
.final-cta .coming-button { margin:auto; }
.muted { color:#e9eef1; }
.cta-glow { position:absolute; z-index:-1; width:500px; height:250px; left:50%; bottom:-170px; transform:translateX(-50%); background:rgba(20,171,169,.2); filter:blur(70px); }
footer { min-height:110px; border-top:1px solid var(--line); color:#68747f; font-size:11px; }
.footer-brand { color:#d8e0e5; }
footer nav { display:flex; gap:28px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes breathe { 50% { opacity:.45; box-shadow:0 0 4px var(--cyan); } }

@media (max-width: 860px) {
  .hero { grid-template-columns:1fr; padding-top:70px; text-align:center; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; position:relative; z-index:3; }
  .hero-text { max-width:570px; }
  .hero-game { height:490px; width:min(100%,600px); margin:auto; }
  .table-orbit { inset:5% -5% 4%; }
  .experience { grid-template-columns:1fr; }
  .section-intro { margin-top:32px; }
  .features { grid-template-columns:1fr; margin-top:55px; }
  .feature { min-height:210px; }
  .feature-icon { margin-bottom:30px; }
  .table-section { grid-template-columns:1fr; gap:55px; }
  .table-copy { text-align:center; }.table-copy > p:last-child { margin:28px auto 0; }
  .craps-board { width:min(100%,680px); margin:auto; transform:perspective(1000px) rotateX(5deg); }
}

@media (max-width: 560px) {
  .site-header, footer, .hero, .section { width:min(calc(100% - 32px), var(--max)); }
  .site-header { height:72px; }
  .header-link { display:none; }
  .hero { min-height:auto; padding:56px 0 65px; gap:12px; }
  h1 { font-size:clamp(2.65rem,13.2vw,4rem); line-height:.95; }
  .hero-text { font-size:14px; margin:24px 0; }
  .hero-game { width:calc(100% + 32px); margin-left:-16px; height:380px; }
  .table-orbit { inset:9% -18% 1%; }
  .dice-stage { transform:scale(.76) translateY(-10px); }
  .chip { transform:scale(.78); }
  .chip-pink { right:8%; top:27%; }.chip-cyan { left:4%; bottom:13%; }
  .orbit-label { font-size:13px; }.orbit-come { font-size:22px; }
  .hero-status { bottom:2%; }
  .section { padding:86px 0; }
  h2 { font-size:clamp(2.75rem,14vw,4.2rem); }
  .features { gap:12px; }
  .feature { padding:28px; }
  .craps-board { min-height:365px; padding:22px 18px; grid-template-rows:55px 38px 75px 1fr 38px; border-width:7px; font-size:11px; }
  .come-box { font-size:20px; }.field-box { font-size:15px; }.board-chip { transform:scale(.8); }
  .puck { transform:scale(.8); }
  .final-cta h2 { font-size:clamp(3rem,15vw,4.8rem); }
  footer { min-height:150px; flex-wrap:wrap; padding:30px 0; gap:15px; }
  .footer-brand { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}