:root {
  --bg: #06110e;
  --bg-2: #081813;
  --felt: #0d2d25;
  --felt-2: #124237;
  --felt-3: #174d3f;
  --card: rgba(11, 31, 25, .82);
  --card-solid: #0b211b;
  --line: rgba(238, 239, 230, .1);
  --line-strong: rgba(235, 220, 185, .22);
  --text: #f5f3ec;
  --muted: #a5b5ad;
  --muted-2: #7f938a;
  --gold: #d7b06f;
  --gold-light: #f1d59a;
  --ivory: #f2ebdc;
  --red: #c85d58;
  --blue: #4b7eae;
  --yellow: #c39745;
  --black-tile: #17231f;
  --green: #4fc489;
  --shadow-xl: 0 46px 120px rgba(0,0,0,.46);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.34);
  --shadow-md: 0 14px 34px rgba(0,0,0,.24);
  --radius-s: 14px;
  --radius: 24px;
  --radius-l: 34px;
  --container: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --felt-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% -8%, rgba(215,176,111,.1), transparent 30rem),
    radial-gradient(circle at 12% 12%, rgba(24,78,63,.18), transparent 28rem),
    linear-gradient(180deg, #071713 0%, var(--bg) 48%, #050d0b 100%);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .1;
  background-image: var(--felt-noise);
  mix-blend-mode: soft-light;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; height: auto; }
img { object-fit: contain; object-position: center top; }
button { color: inherit; }
::selection { color: #101711; background: var(--gold-light); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: clamp(78px, 9vw, 132px) 0; }
.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading.centered p { margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  color: var(--gold-light);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow > span { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow.light { color: #f8dfaf; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { letter-spacing: -.035em; line-height: 1.03; }
h1,h2 { font-family: var(--display); font-weight: 600; }
h1 { font-size: clamp(4.4rem, 9vw, 7.3rem); margin-bottom: 24px; }
h1 em { color: var(--gold-light); font-style: normal; }
h2 { font-size: clamp(2.7rem, 5.8vw, 4.7rem); margin-bottom: 20px; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.65rem); margin-bottom: 12px; }
p { color: var(--muted); }

.scroll-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 20px rgba(215,176,111,.35);
}

.site-header {
  position: fixed;
  z-index: 110;
  left: 0;
  right: 0;
  top: 0;
  padding-top: max(10px, env(safe-area-inset-top));
  pointer-events: none;
}
.nav {
  min-height: 68px;
  margin-top: 8px;
  padding: 10px 10px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 21px;
  background: rgba(4, 15, 12, .77);
  box-shadow: 0 16px 46px rgba(0,0,0,.2);
  backdrop-filter: blur(18px) saturate(125%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #152118;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(0,0,0,.18);
}
.brand-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; font-size: 1.03rem; letter-spacing: -.02em; }
.brand small { display: block; color: #93a69d; font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.nav-links { display: flex; gap: 3px; align-items: center; }
.nav-links a {
  padding: 10px 12px;
  border-radius: 11px;
  color: #c6d0cb;
  font-size: .89rem;
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}
.nav-links a:hover, .nav-links a.is-active { color: white; background: rgba(255,255,255,.055); }
.nav-download {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  color: #182018;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  font-size: .88rem;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 10px 20px rgba(0,0,0,.15);
  transition: transform .2s var(--ease), box-shadow .2s ease;
}
.nav-download:hover { transform: translateY(-2px); box-shadow: inset 0 1px rgba(255,255,255,.7), 0 14px 25px rgba(0,0,0,.22); }
.menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; }
.menu-button span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: white; transition: transform .2s ease, opacity .2s ease; }

.hero { min-height: 980px; padding-top: 150px; display: flex; align-items: center; overflow: hidden; }
.hero-light { position: absolute; border-radius: 50%; filter: blur(35px); pointer-events: none; opacity: .7; }
.hero-light-a { width: 700px; height: 700px; right: -250px; top: 0; background: radial-gradient(circle, rgba(215,176,111,.12), transparent 68%); }
.hero-light-b { width: 500px; height: 500px; left: -250px; top: 250px; background: radial-gradient(circle, rgba(28,87,71,.22), transparent 68%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr); gap: clamp(38px, 7vw, 96px); align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-lead { max-width: 690px; margin-bottom: 28px; font-size: clamp(1.06rem, 1.7vw, 1.22rem); color: #ccd7d1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.button {
  min-height: 60px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .2s var(--ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.button svg { width: 25px; height: 25px; fill: currentColor; flex: 0 0 auto; }
.button small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.button-primary { color: #162017; background: linear-gradient(180deg, #f3dbab, #d4ab69); box-shadow: inset 0 1px rgba(255,255,255,.75), 0 15px 30px rgba(0,0,0,.16); }
.button-primary:hover { transform: translateY(-3px); box-shadow: inset 0 1px rgba(255,255,255,.75), 0 20px 36px rgba(0,0,0,.23); }
.button-secondary, .button-dark { color: white; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.11); }
.button-secondary:hover, .button-dark:hover { transform: translateY(-2px); background: rgba(255,255,255,.075); }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; max-width: 700px; }
.hero-facts > div { padding: 15px 16px; border-radius: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.028); box-shadow: var(--shadow-md); }
.hero-facts strong { display: block; margin-bottom: 3px; color: var(--gold-light); font-family: var(--display); font-size: 1.45rem; }
.hero-facts span { display: block; color: var(--muted); font-size: .78rem; }

.hero-visual { position: relative; min-height: 760px; display: grid; place-items: center; perspective: 1500px; }
.halo { position: absolute; width: 590px; height: 590px; border-radius: 50%; background: radial-gradient(circle, rgba(215,176,111,.13), rgba(28,79,65,.08) 35%, transparent 70%); filter: blur(30px); }
.phone { position: relative; z-index: 3; width: min(430px, 82vw); padding: 10px; border-radius: 54px; background: linear-gradient(145deg, #4a4035, #0b0d0c 22%, #151817 78%, #826640); box-shadow: 0 50px 100px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.2); transform: rotate(4deg); transition: transform .25s var(--ease); }
.phone::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border-radius: 47px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.phone-frame { position: relative; overflow: hidden; border-radius: 45px; background: #020504; }
.phone-frame img { width: 100%; height: auto; object-fit: contain; }
.phone-island { position: absolute; z-index: 4; left: 50%; top: 14px; transform: translateX(-50%); width: 30%; max-width: 130px; height: 28px; border-radius: 999px; background: #020303; box-shadow: inset 0 -1px rgba(255,255,255,.05); }
.floating-tile { position: absolute; z-index: 4; width: 72px; height: 98px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, #fbf7ed, #e8deca); color: var(--red); box-shadow: 0 22px 40px rgba(0,0,0,.3), inset 0 1px white; font-size: 1.55rem; font-weight: 900; animation: float 5s ease-in-out infinite; }
.floating-tile i { position: absolute; bottom: 12px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tile-a { left: 2%; top: 16%; transform: rotate(-10deg); }
.tile-b { right: 1%; bottom: 21%; color: var(--blue); transform: rotate(9deg); animation-delay: -2.2s; }
.hero-note { position: absolute; z-index: 4; right: 0; bottom: 4%; max-width: 280px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: rgba(5,18,15,.82); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.hero-note strong { display: block; margin-bottom: 4px; color: var(--gold-light); }
.hero-note span { color: var(--muted); font-size: .82rem; }

.trust-strip { position: relative; z-index: 3; margin-top: -25px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trust-grid span { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(9,27,22,.88); box-shadow: var(--shadow-md); color: #cbd6d1; font-size: .84rem; font-weight: 700; text-align: center; backdrop-filter: blur(10px); }

.feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.feature { grid-column: span 4; min-height: 270px; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(7,22,18,.82); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.feature::after { content:""; position:absolute; right:-80px; bottom:-100px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(215,176,111,.13),transparent 68%); }
.feature-large { grid-column: span 6; }
.feature-wide { grid-column: span 6; }
.feature-icon { width: 52px; height: 52px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 16px; color: #1c241c; background: linear-gradient(180deg, var(--gold-light), var(--gold)); box-shadow: inset 0 1px white; }
.feature-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feature p { max-width: 620px; margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.chips span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); color: #d9e0dc; font-size: .74rem; font-weight: 700; }

.gameplay-section { background: radial-gradient(circle at 75% 45%, rgba(26,82,67,.18), transparent 36rem); }
.gameplay-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); gap: 45px; align-items: center; }
.gameplay-copy > p { max-width: 580px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.demo-control { min-height: 44px; padding: 0 13px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #d7dfdb; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.demo-control:hover { transform: translateY(-2px); background: rgba(255,255,255,.065); }
.demo-control.is-active { border-color: rgba(215,176,111,.35); color: var(--gold-light); background: rgba(215,176,111,.08); }
.demo-status { margin-top: 13px; font-size: .82rem; color: #8da299; }
.table-demo { padding: 14px; border: 1px solid var(--line); border-radius: 30px; background: rgba(6,20,16,.84); box-shadow: var(--shadow-xl); }
.table-demo-top { height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #cbd6d0; font-size: .83rem; }
.table-demo-top span:last-child { margin-left: auto; color: var(--gold-light); }
.turn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(79,196,137,.08); }
.felt-board { position: relative; min-height: 390px; overflow: hidden; border: 12px solid #6f4e2f; border-radius: 28px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.035), transparent 36%), linear-gradient(150deg, var(--felt-3), var(--felt) 74%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -30px 60px rgba(0,0,0,.2); }
.felt-board::before { content:""; position:absolute; inset:0; opacity:.18; background-image:var(--felt-noise); }
.meld { position: absolute; z-index: 2; display: flex; gap: 7px; }
.meld-one { left: 12%; top: 19%; }
.meld-two { right: 13%; top: 38%; }
.discard-pile { position:absolute; z-index:2; left:50%; top:52%; transform:translate(-50%,-50%) rotate(5deg); }
.mini-tile { width: 42px; height: 60px; display:grid; place-items:center; position:relative; border-radius:9px; color:var(--black-tile); background:linear-gradient(180deg,#faf5e9,#e6dcc8); box-shadow:inset 0 1px white,0 8px 12px rgba(0,0,0,.2); font-weight:900; }
.mini-tile::after { content:""; position:absolute; bottom:6px; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.45; }
.mini-tile.red { color:var(--red); }.mini-tile.blue { color:var(--blue); }.mini-tile.yellow { color:var(--yellow); }.mini-tile.black { color:var(--black-tile); }
.deck-stack { position:absolute; z-index:2; right:11%; bottom:18%; width:60px; height:78px; }
.deck-stack i { position:absolute; width:52px; height:72px; border-radius:10px; background:#e9dfcc; box-shadow:0 7px 10px rgba(0,0,0,.14); }
.deck-stack i:nth-child(1){left:8px;top:8px}.deck-stack i:nth-child(2){left:4px;top:4px}.deck-stack i:nth-child(3){left:0;top:0}
.rack { min-height: 112px; margin-top: 12px; padding: 17px 16px; display:flex; align-items:center; justify-content:center; gap:5px; overflow-x:auto; border-radius:21px; background:linear-gradient(180deg,#795838,#452f1d); box-shadow:inset 0 2px rgba(255,255,255,.1), 0 18px 26px rgba(0,0,0,.24); scrollbar-width:none; }
.rack::-webkit-scrollbar { display:none; }
.rack-tile { flex:0 0 auto; width:40px; height:64px; position:relative; display:grid; place-items:center; border:0; border-radius:9px; color:var(--black-tile); background:linear-gradient(180deg,#fcf8ed,#e7ddc9); box-shadow:inset 0 1px white,0 6px 10px rgba(0,0,0,.2); font-weight:900; cursor:pointer; transition: transform .18s var(--ease), box-shadow .18s ease; }
.rack-tile::after { content:""; position:absolute; left:50%; bottom:7px; width:5px; height:5px; transform:translateX(-50%); border-radius:50%; background:currentColor; opacity:.5; }
.rack-tile[data-color="red"]{color:var(--red)}.rack-tile[data-color="blue"]{color:var(--blue)}.rack-tile[data-color="yellow"]{color:var(--yellow)}.rack-tile[data-color="black"]{color:var(--black-tile)}
.rack-tile.is-selected { transform:translateY(-12px); box-shadow:inset 0 1px white,0 14px 18px rgba(0,0,0,.3),0 0 0 2px var(--gold); }

.mode-layout { display:grid; grid-template-columns: 330px 1fr; gap:18px; }
.mode-tabs { display:grid; gap:10px; }
.mode-tab { min-height:64px; padding:0 18px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.03); color:#c7d2cc; font-weight:800; text-align:left; cursor:pointer; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.mode-tab:hover { transform:translateX(3px); background:rgba(255,255,255,.055); }
.mode-tab.is-active { color:var(--gold-light); border-color:rgba(215,176,111,.3); background:rgba(215,176,111,.08); }
.mode-panel { min-height:330px; padding:34px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(135deg,rgba(22,63,51,.58),rgba(7,22,18,.9)); box-shadow:var(--shadow-lg); }
.mode-kicker { display:inline-block; margin-bottom:24px; padding:7px 10px; border-radius:999px; color:var(--gold-light); background:rgba(215,176,111,.08); border:1px solid rgba(215,176,111,.16); font-size:.7rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.mode-panel h3 { font-family:var(--display); font-size:clamp(2rem,4vw,3.3rem); }
.mode-panel p { max-width:720px; }
.mode-panel ul { display:grid; gap:9px; padding:0; margin:24px 0 0; list-style:none; }
.mode-panel li { position:relative; padding-left:22px; color:#d4ddd8; }
.mode-panel li::before { content:""; position:absolute; left:0; top:.65em; width:7px; height:7px; border-radius:50%; background:var(--gold); }

.screens-section { overflow:hidden; }
.screen-carousel { position:relative; overflow:hidden; padding:2px; }
.screen-track { display:flex; gap:22px; align-items:stretch; transition:transform .55s var(--ease-soft); will-change:transform; }
.screen-slide { flex:0 0 calc(33.333% - 15px); min-width:0; padding:18px; border:1px solid var(--line); border-radius:30px; background:rgba(8,23,19,.72); box-shadow:var(--shadow-lg); opacity:.58; transform:scale(.95); transition:opacity .35s ease, transform .35s ease, border-color .35s ease; }
.screen-slide.is-active { opacity:1; transform:scale(1); border-color:rgba(215,176,111,.24); }
.screen-phone { position:relative; overflow:hidden; margin:auto; width:min(100%, 280px); border-radius:38px; border:7px solid #171a18; background:#020403; box-shadow:0 28px 55px rgba(0,0,0,.34); }
.screen-phone img { width:100%; height:auto; object-fit:contain; display:block; }
.screen-phone .phone-island { top:10px; height:22px; width:31%; }
.slide-copy { padding:20px 4px 3px; }
.slide-copy > span { color:var(--gold); font-weight:900; font-size:.72rem; letter-spacing:.12em; }
.slide-copy h3 { margin:5px 0 7px; }
.slide-copy p { margin:0; font-size:.87rem; }
.carousel-controls { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:24px; }
.round-button { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.035); color:white; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.round-button:hover { transform:translateY(-2px); background:rgba(255,255,255,.07); }
.round-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.carousel-dots { display:flex; gap:7px; }
.carousel-dot { width:9px; height:9px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.24); cursor:pointer; transition:width .2s ease, background .2s ease; }
.carousel-dot.is-active { width:28px; background:var(--gold); }

.atmosphere-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.atmosphere-image { position:relative; }
.atmosphere-image::before { content:""; position:absolute; inset:5% -5% -5% 8%; border-radius:36px; background:rgba(215,176,111,.08); filter:blur(30px); }
.atmosphere-image img { position:relative; width:100%; height:auto; object-fit:contain; border-radius:34px; border:1px solid rgba(255,255,255,.09); box-shadow:var(--shadow-xl); }
.atmosphere-copy p { max-width:600px; }
.design-points { display:grid; gap:10px; margin-top:26px; }
.design-points > div { padding:16px 17px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.028); }
.design-points strong { display:block; margin-bottom:4px; color:#e7ddd0; }
.design-points span { color:var(--muted); font-size:.86rem; }

.customization-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center; }
.theme-picker { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.theme-button { min-height:44px; padding:0 13px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.03); color:#d1dad5; font-weight:700; cursor:pointer; }
.theme-button i { width:15px; height:15px; border-radius:50%; background:#1a5a49; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); }
.theme-button[data-theme="burgundy"] i { background:#672b36; }.theme-button[data-theme="night"] i { background:#121b2c; }
.theme-button.is-active { color:var(--gold-light); border-color:rgba(215,176,111,.26); background:rgba(215,176,111,.07); }
.theme-preview { min-height:500px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:31px; background:linear-gradient(160deg,#1a503f,#0e2b23 70%); box-shadow:var(--shadow-xl); transition:background .45s ease; }
.theme-preview::before { content:""; position:absolute; inset:0; background-image:var(--felt-noise); opacity:.2; }
.theme-preview[data-theme-preview="burgundy"] { background:linear-gradient(160deg,#672f37,#32181e 72%); }
.theme-preview[data-theme-preview="night"] { background:linear-gradient(160deg,#182138,#0c101d 72%); }
.preview-table { position:absolute; left:50%; top:42%; width:72%; aspect-ratio:1.3; transform:translate(-50%,-50%) perspective(800px) rotateX(55deg) rotateZ(-5deg); border:18px solid #765333; border-radius:44%; background:rgba(0,0,0,.1); box-shadow:0 48px 60px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.06); }
.preview-meld { position:absolute; left:18%; top:30%; display:flex; gap:6px; transform:rotateX(-55deg); }
.preview-meld.second { left:49%; top:57%; }
.preview-rack { position:absolute; left:50%; bottom:9%; transform:translateX(-50%); width:78%; min-height:88px; padding:15px; border-radius:19px; display:flex; justify-content:center; gap:6px; background:linear-gradient(180deg,#765434,#452e1c); box-shadow:0 18px 26px rgba(0,0,0,.28),inset 0 2px rgba(255,255,255,.1); }
.preview-rack span { width:42px; height:60px; display:grid; place-items:center; border-radius:8px; background:#f0e7d5; color:#17231f; font-weight:900; box-shadow:inset 0 1px white,0 5px 9px rgba(0,0,0,.18); }

.facts-card { display:grid; grid-template-columns:.75fr 1.25fr; gap:40px; padding:36px; border:1px solid rgba(215,176,111,.18); border-radius:30px; background:linear-gradient(135deg,rgba(20,58,47,.7),rgba(7,21,17,.92)); box-shadow:var(--shadow-lg); }
.fact-copy { display:grid; gap:14px; }
.fact-copy p { margin:0; color:#c8d3cd; }
.fact-copy strong { color:var(--gold-light); }

.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:start; }
.faq-list { display:grid; gap:10px; }
details { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); overflow:hidden; }
summary { position:relative; padding:20px 55px 20px 19px; list-style:none; cursor:pointer; font-weight:800; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:17px; top:50%; transform:translateY(-50%); width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:var(--gold-light); background:rgba(255,255,255,.05); font-size:1.1rem; transition:transform .2s ease; }
details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
details p { margin:0; padding:0 19px 19px; }

.download-card { min-height:560px; position:relative; overflow:hidden; display:flex; align-items:center; padding:clamp(34px,7vw,76px); border:1px solid rgba(215,176,111,.18); border-radius:36px; box-shadow:var(--shadow-xl); background:#081511; }
.download-bg { position:absolute; inset:0; }
.download-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,15,12,.97) 0%,rgba(5,15,12,.84) 46%,rgba(5,15,12,.25) 100%),linear-gradient(0deg,rgba(5,15,12,.55),transparent 45%); }
.download-bg img { width:100%; height:100%; object-fit:contain; object-position:center right; }
.download-content { position:relative; z-index:2; max-width:620px; }
.download-content p { max-width:560px; color:#cbd6d1; font-size:1.08rem; }
.store-note { display:block; color:#91a79d; }

.site-footer { padding:42px 0 50px; border-top:1px solid rgba(255,255,255,.06); }
.footer-grid { display:grid; grid-template-columns:1.2fr auto auto; gap:34px; align-items:start; }
.footer-brand { margin-bottom:14px; }
.site-footer p { max-width:700px; margin:0; font-size:.8rem; color:#758b82; }
.footer-links { display:grid; grid-template-columns:repeat(2,max-content); gap:10px 22px; font-size:.82rem; }
.footer-links a { color:#b8c7c0; }.footer-links a:hover { color:white; }
.powered-by { display:flex; flex-direction:column; gap:10px; min-width:160px; }
.powered-by span { color:#8aa097; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.powered-by a { display:inline-flex; align-items:center; gap:10px; color:#e7eee9; }
.powered-by img { width:auto; height:36px; max-width:160px; object-fit:contain; }

.back-top { position:fixed; z-index:80; right:18px; bottom:18px; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line); border-radius:16px; color:white; background:rgba(5,17,14,.82); backdrop-filter:blur(12px); box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease,transform .2s ease; cursor:pointer; }
.back-top.is-visible { opacity:1; pointer-events:auto; transform:none; }
.back-top svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mobile-cta { display:none; position:fixed; z-index:79; left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); min-height:68px; padding:10px 10px 10px 14px; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(215,176,111,.15); border-radius:19px; background:rgba(4,15,12,.92); box-shadow:var(--shadow-lg); backdrop-filter:blur(16px); }
.mobile-cta strong,.mobile-cta span { display:block; }.mobile-cta span { color:var(--muted); font-size:.73rem; }.mobile-cta a { min-height:44px; padding:0 17px; display:inline-flex; align-items:center; border-radius:13px; color:#172017; background:linear-gradient(180deg,var(--gold-light),var(--gold)); font-weight:900; }

.store-dialog { width:min(460px,calc(100% - 30px)); padding:0; border:1px solid rgba(215,176,111,.18); border-radius:26px; color:var(--text); background:#0a201a; box-shadow:var(--shadow-xl); }
.store-dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(6px); }
.store-dialog form { position:relative; padding:32px; text-align:center; }
.dialog-close { position:absolute; right:14px; top:14px; width:38px; height:38px; border:0; border-radius:12px; color:white; background:rgba(255,255,255,.05); font-size:1.5rem; cursor:pointer; }
.dialog-icon { width:62px; height:62px; margin:0 auto 18px; display:grid; place-items:center; border-radius:18px; color:#182018; background:linear-gradient(180deg,var(--gold-light),var(--gold)); }
.dialog-icon svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.store-dialog h2 { font-size:2.3rem; }.store-dialog p { margin-bottom:22px; }.dialog-ok { width:100%; }
.noscript { position:fixed; z-index:200; left:10px; right:10px; bottom:10px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; color:white; background:#10241e; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes float { 0%,100%{translate:0 0}50%{translate:0 -13px} }

@media (max-width: 1080px) {
  .hero-grid,.gameplay-grid,.atmosphere-grid,.customization-grid,.faq-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero { min-height:auto; }
  .hero-copy { text-align:center; }.hero-lead { margin-inline:auto; }.hero-actions,.hero-facts { justify-content:center; margin-inline:auto; }
  .hero-visual { min-height:720px; }.hero-note { right:50%; transform:translateX(50%); }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .gameplay-copy { text-align:center; }.gameplay-copy>p { margin-inline:auto; }.demo-actions { justify-content:center; }
  .mode-layout { grid-template-columns:1fr; }.mode-tabs { grid-template-columns:repeat(4,1fr); }.mode-tab { text-align:center; }
  .screen-slide { flex-basis:calc(50% - 11px); }
  .atmosphere-copy,.customization-copy { text-align:center; }.atmosphere-copy p,.customization-copy p { margin-inline:auto; }.theme-picker { justify-content:center; }
  .facts-card { grid-template-columns:1fr; }
}

@media (max-width: 850px) {
  .nav-links,.nav-download { display:none; }.menu-button { display:block; margin-left:auto; }
  .nav.is-open { flex-wrap:wrap; align-items:flex-start; }
  .nav.is-open .nav-links { display:grid; order:3; width:100%; padding-top:8px; border-top:1px solid var(--line); }
  .nav.is-open .nav-links a { padding:12px; }
  .feature,.feature-large,.feature-wide { grid-column:span 12; }
  .mode-tabs { grid-template-columns:repeat(2,1fr); }
  .screen-slide { flex-basis:86%; }
  .footer-grid { grid-template-columns:1fr; }.footer-links { grid-template-columns:repeat(3,max-content); }
}

@media (max-width: 640px) {
  .container { width:min(calc(100% - 22px),var(--container)); }
  .section { padding:72px 0; }
  .nav { width:calc(100% - 14px); margin-top:6px; border-radius:18px; }
  .brand small { display:none; }
  .hero { padding-top:125px; }
  h1 { font-size:clamp(3.65rem,18vw,5.25rem); }
  h2 { font-size:clamp(2.45rem,12vw,3.4rem); }
  .hero-actions { display:grid; }.hero-actions .button { width:100%; }
  .hero-facts { grid-template-columns:1fr; }
  .hero-visual { min-height:600px; }.phone { width:min(390px,90vw); }.floating-tile { width:55px; height:76px; font-size:1.2rem; }.hero-note { bottom:-10px; width:min(330px,92%); }
  .trust-grid { grid-template-columns:1fr; }
  .table-demo { padding:10px; }.felt-board { min-height:300px; border-width:9px; }.mini-tile { width:34px; height:50px; font-size:.8rem; }.rack { justify-content:flex-start; min-height:96px; }.rack-tile { width:35px; height:56px; }
  .mode-tabs { grid-template-columns:1fr 1fr; }.mode-panel { padding:25px; }
  .screen-track { gap:14px; }.screen-slide { flex-basis:92%; padding:13px; border-radius:25px; }.screen-phone { border-radius:31px; border-width:5px; }.screen-phone .phone-island { top:8px; height:18px; }
  .theme-preview { min-height:430px; }.preview-rack { width:90%; overflow:hidden; }.preview-rack span { width:35px; height:54px; }
  .facts-card { padding:25px; }
  .download-card { min-height:600px; padding:30px 24px; align-items:flex-end; }.download-bg::after { background:linear-gradient(0deg,rgba(5,15,12,.98) 0%,rgba(5,15,12,.82) 55%,rgba(5,15,12,.2) 100%); }.download-bg img { object-position:center; }
  .footer-links { grid-template-columns:repeat(2,max-content); }
  .powered-by { margin-top:8px; }
  .mobile-cta { display:flex; }.back-top { bottom:92px; }
}

@media (max-width: 380px) {
  .hero-visual { min-height:540px; }.phone { width:94vw; }.tile-a { left:-2%; }.tile-b { right:-3%; }
  .mode-tabs { grid-template-columns:1fr; }.footer-links { grid-template-columns:1fr; }
}

@media (hover:hover) and (pointer:fine) {
  .tilt-card { will-change:transform; }
}

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