:root{
  --sea-900:#03151b;
  --sea-700:#0b2c35;
  --sea-600:#0f4756;
  --sea-500:#18a7b7;
  --sea-300:#7df1dd;
  --sand-200:#0c2330;
  --sand-100:#071b22;
  --ink:#e6fbf9;
  --muted:#9cb8b7;
  --white:#ffffff;
  --shadow:0 24px 50px rgba(2, 12, 16, 0.55);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Sora',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 5% -10%, rgba(24,167,183,0.45), transparent 60%),
    radial-gradient(800px 520px at 100% 10%, rgba(73,242,194,0.28), transparent 60%),
    linear-gradient(180deg, #031319 0%, #071b22 45%, #04151b 100%);
  background-attachment:fixed;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

.container{
  width:min(1160px, 92vw);
  margin:0 auto;
}

.page-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 260px at 78% 8%, rgba(73,242,194,0.2), transparent 60%),
    radial-gradient(380px 260px at 12% 16%, rgba(24,167,183,0.24), transparent 60%),
    radial-gradient(520px 320px at 86% 70%, rgba(14,71,86,0.35), transparent 70%);
  z-index:-1;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(3, 19, 25, 0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(125,241,221,0.12);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#e6fbf9;
  font-weight:700;
  letter-spacing:0.3px;
}

.logo-mark{
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(125,241,221,0.08);
  border:1px solid rgba(125,241,221,0.2);
  display:grid;
  place-items:center;
  padding:6px;
}

.logo-text{
  font-family:'Fraunces',serif;
  font-size:1.05rem;
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav a{
  color:#c9f5f0;
  text-decoration:none;
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
  transition:all .2s ease;
}

.nav a:hover,
.nav a.active{
  background:rgba(125,241,221,0.16);
}

.nav-toggle{
  display:none;
}

.burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(125,241,221,0.35);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.burger span{
  width:20px;
  height:2px;
  background:#fff;
  border-radius:4px;
}

.hero{
  padding:70px 0 90px;
  color:var(--ink);
  background:linear-gradient(160deg, rgba(7,27,34,0.95), rgba(6,22,28,0.9));
  border-bottom:1px solid rgba(125,241,221,0.08);
}

.hero-shell{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:44px;
  align-items:center;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:44px;
  align-items:center;
}

.hero-copy{
  display:grid;
  gap:18px;
}

.hero h1{
  font-family:'Fraunces',serif;
  font-size:clamp(2.4rem, 3.4vw, 3.6rem);
  margin:0 0 14px 0;
  letter-spacing:0.2px;
}

.hero p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.hero-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(125,241,221,0.12);
  color:#d7fffa;
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:0.85rem;
  border:1px solid rgba(125,241,221,0.3);
}

.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:6px;
}

.hero-highlights{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.highlight-card{
  padding:14px;
  border-radius:14px;
  background:rgba(12, 35, 48, 0.7);
  border:1px solid rgba(125,241,221,0.18);
  display:grid;
  gap:6px;
}

.highlight-label{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#7df1dd;
}

.highlight-value{
  font-weight:700;
}

.btn{
  margin: 10px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  border:none;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn.primary{
  background:linear-gradient(120deg, #2fd6d8, #63f1c7);
  color:#042126;
  box-shadow:0 18px 34px rgba(3, 18, 24, 0.45);
}

.btn.ghost{
  background:transparent;
  color:#d7fffa;
  border:1px solid rgba(125,241,221,0.5);
}

.btn.light{
  background:#0f3e48;
  color:#d7fffa;
  box-shadow:0 12px 22px rgba(2, 12, 16, 0.4);
}

.btn:hover{
  transform:translateY(-2px);
}

.hero-visual{
  display:grid;
  gap:18px;
}

.hero-card{
  background:rgba(7, 27, 34, 0.85);
  border-radius:var(--radius-xl);
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(125,241,221,0.12);
}

.hero-card img{
  border-radius:18px;
}

.hero-chip{
  position:absolute;
  background:rgba(125,241,221,0.18);
  color:#d7fffa;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:0.75rem;
  top:16px;
  left:16px;
  border:1px solid rgba(125,241,221,0.45);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.stat{
  background:rgba(12, 35, 48, 0.7);
  padding:14px;
  border-radius:14px;
  text-align:center;
  border:1px solid rgba(125,241,221,0.14);
}

.stat strong{
  display:block;
  font-size:1.1rem;
}

.section{
  padding:70px 0;
  background:var(--sand-100);
}

.section.alt{
  background:#061820;
}

.section-title{
  text-align:center;
  margin:0 0 36px 0;
}

.section-title h2{
  font-family:'Fraunces',serif;
  margin:0 0 10px 0;
  font-size:clamp(1.8rem, 2.4vw, 2.6rem);
}

.section-title p{
  margin:0;
  color:var(--muted);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
}

.feature-card{
  background:#0a232c;
  padding:20px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  display:grid;
  gap:12px;
  border:1px solid rgba(125,241,221,0.08);
}

.feature-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(125,241,221,0.14);
  display:grid;
  place-items:center;
  font-weight:700;
  color:#63f1c7;
}

.feature-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  color:var(--muted);
}

.strip{
  background:#061d24;
  padding:24px 0;
  border-top:1px solid rgba(125,241,221,0.08);
  border-bottom:1px solid rgba(125,241,221,0.08);
}

.strip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-weight:600;
}

.strip-row span{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:10px;
}

.strip-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(125,241,221,0.12);
  color:#d7fffa;
  border:1px solid rgba(125,241,221,0.35);
}

.games-cta{
  background:linear-gradient(120deg, #0f3f4b, #1e7a85);
  color:#e6fbf9;
  border-radius:var(--radius-xl);
  padding:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  box-shadow:var(--shadow);
  border:1px solid rgba(125,241,221,0.18);
}

.devices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}

.devices ul{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:10px;
  color:var(--muted);
}

.device-frame{
  background:#0a232c;
  border-radius:var(--radius-xl);
  padding:18px;
  box-shadow:var(--shadow);
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}

.catalog-card{
  background:#0a232c;
  padding:16px;
  border-radius:18px;
  box-shadow:var(--shadow);
  display:grid;
  gap:12px;
  border:1px solid rgba(125,241,221,0.08);
}

.catalog-media{
  background:#071b22;
  border-radius:14px;
  padding:14px;
  position:relative;
  display:grid;
  place-items:center;
}

.catalog-tags{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  gap:6px;
}

.catalog-tag{
  background:#0f2f39;
  color:#d7fffa;
  padding:4px 8px;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:700;
  border:1px solid rgba(125,241,221,0.2);
}

.pillbar-inner{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(125,241,221,0.25);
  background:#0a232c;
  color:#d7fffa;
  font-weight:600;
  cursor:pointer;
}

.pill.active{
  background:#18a7b7;
  color:#042126;
  border-color:#18a7b7;
}

.review-shell{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:24px;
}

.review-card{
  background:#0a232c;
  padding:20px;
  border-radius:18px;
  box-shadow:var(--shadow);
  display:grid;
  gap:16px;
  border:1px solid rgba(125,241,221,0.08);
}

.review-card .avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(125,241,221,0.14);
  display:grid;
  place-items:center;
  font-weight:700;
  color:#63f1c7;
}

.review-actions{
  display:flex;
  gap:8px;
}

.review-actions button{
  border:none;
  background:#0c2b35;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  color:#d7fffa;
}

.review-matrix{
  display:grid;
  gap:10px;
  color:var(--muted);
}

.review-matrix strong{
  color:var(--ink);
}

.download{
  background:#0b3a45;
  color:#e6fbf9;
  padding:60px 0;
}

.download .pill{
  background:rgba(125,241,221,0.16);
  color:#e6fbf9;
  border-color:rgba(125,241,221,0.2);
}

.article-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

.article-card{
  background:#0a232c;
  border-radius:18px;
  padding:16px;
  display:flex;
  gap:14px;
  box-shadow:var(--shadow);
  border:1px solid rgba(125,241,221,0.08);
}

.article-card img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:14px;
}

.footer{
  background:#03171d;
  color:#c9f5f0;
  padding:40px 0 30px;
  border-top:1px solid rgba(125,241,221,0.08);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.footer a{
  color:#c9f5f0;
  text-decoration:none;
}

.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(2, 16, 20, 0.76);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:30;
}

.overlay.show{
  display:flex;
}

.overlay-card{
  background:#0a232c;
  padding:24px;
  border-radius:18px;
  width:min(420px, 90vw);
  text-align:center;
  border:1px solid rgba(125,241,221,0.14);
}

.cookie-box{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#0a232c;
  padding:18px;
  border-radius:16px;
  box-shadow:var(--shadow);
  width:min(360px, 92vw);
  display:none;
  z-index:25;
  border:1px solid rgba(125,241,221,0.14);
}

.cookie-box.show{
  display:block;
}

.page-section{
  padding:60px 0;
}

.page-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}

.info-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.info-card{
  background:#0a232c;
  padding:16px;
  border-radius:14px;
  box-shadow:var(--shadow);
  border:1px solid rgba(125,241,221,0.08);
}

.info-list{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:8px;
  color:var(--muted);
}

.faq-accordion{
  display:grid;
  gap:12px;
}

.faq-accordion details{
  background:#0a232c;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(125,241,221,0.08);
}

.faq-accordion summary{
  cursor:pointer;
  font-weight:700;
}

.form-card{
  background:#0a232c;
  padding:20px;
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(125,241,221,0.08);
}

.form-grid{
  display:grid;
  gap:12px;
}

.form-grid label{
  display:grid;
  gap:6px;
  font-weight:600;
  color:var(--muted);
}

.form-grid input,
.form-grid textarea,
.form-grid select{
  border:1px solid rgba(125,241,221,0.18);
  border-radius:12px;
  padding:10px 12px;
  font-family:inherit;
  font-size:0.95rem;
  background:#071b22;
  color:#d7fffa;
}

.form-grid .full{
  grid-column:1 / -1;
}

.small-muted{
  color:var(--muted);
  font-size:0.9rem;
}

@media (max-width: 980px){
  .hero-shell,
  .hero-grid,
  .devices,
  .review-shell,
  .page-grid{
    grid-template-columns:1fr;
  }
  .feature-grid,
  .catalog-grid,
  .article-grid,
  .info-cards{
    grid-template-columns:1fr;
  }
  .hero-highlights{
    grid-template-columns:1fr;
  }
  .games-cta{
    flex-direction:column;
    text-align:center;
  }
}

@media (max-width: 780px){
  .burger{
    display:flex;
  }
  .nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:rgba(3, 19, 25, 0.96);
    flex-direction:column;
    padding:12px 0 18px;
    display:none;
  }
  .nav a{
    padding:10px 16px;
  }
  .nav-toggle:checked + .burger + .nav{
    display:flex;
  }
  .hero{
    padding:60px 0 70px;
  }
}

@media (max-width: 560px){
  .hero-stats{
    grid-template-columns:1fr;
  }
  .catalog-frame-wrap iframe{
    height:420px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* ===== GOOGLE POLICY COMPLIANCE ADDITIONS ===== */

/* Top disclaimer bar */
.disclaimer-top-bar {
  background: #04171d;
  color: #7df1dd;
  font-size: 0.82rem;
  padding: 8px 0;
  text-align: center;
  border-bottom: 2px solid #18a7b7;
  line-height: 1.4;
}
.disclaimer-top-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.disclaimer-top-bar strong { color: #e6fbf9; }

/* Badge important variant */
.badge-important {
  background: #18a7b7;
  color: #042126;
  border-color: #0f4756;
}

/* Policy callout box */
.policy-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #0c2630;
  border: 2px solid #2fd6d8;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0;
  font-size: 0.93rem;
  line-height: 1.5;
}
.policy-callout-icon { font-size: 1.4rem; flex-shrink: 0; }

/* Feature card variants */
.feature-card--green {
  border-left: 4px solid #18a7b7;
}
.feature-card--green .feature-icon { background: #0f3b45; color: #63f1c7; }
.feature-card--red {
  border-left: 4px solid #cf4b4b;
}
.feature-card--red .feature-icon { background: #2c1414; color: #ffb3b3; }

/* FREE tag in catalog */
.free-tag {
  background: #18a7b7 !important;
  color: #042126 !important;
  font-weight: 700;
}

/* Responsible play section */
.responsible-section {
  background: #071c23;
  border-top: 3px solid #18a7b7;
  border-bottom: 3px solid #18a7b7;
}
.responsible-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
@media(max-width:760px) {
  .responsible-grid { grid-template-columns: 1fr; }
}
.responsible-main { }
.responsible-statement p { margin: 0 0 14px; line-height: 1.6; }
.responsible-rules { display: flex; flex-direction: column; gap: 14px; }

/* Help resources links */
.help-resources { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.help-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #07242c;
  color: #e6fbf9;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background .2s;
}
.help-link:hover { background: #0f3f4b; }
.help-link strong { font-size: 1rem; }
.help-link span { font-size: 0.85rem; color: #7df1dd; }
.help-resources--full .help-link { }

/* Footer disclaimer */
.disclaimer-footer {
  font-size: 0.8rem;
  margin: 10px 0 6px;
  line-height: 1.5;
  color: var(--muted);
}

/* Responsible play page */
.responsible-hero { background: #0b222b; border-bottom: 3px solid #18a7b7; }
.responsible-statement-full { }
.rp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media(max-width:700px) { .rp-grid { grid-template-columns: 1fr; } }
.rp-box {
  padding: 24px;
  border-radius: var(--radius-lg);
}
.rp-box h3 { margin-top: 0; }
.rp-box ul { margin: 12px 0 0; padding-left: 20px; }
.rp-box ul li { margin-bottom: 8px; line-height: 1.5; }
.rp-box--green {
  background: #0b2a33;
  border: 2px solid #18a7b7;
}
.rp-box--red {
  background: #321818;
  border: 2px solid #cf4b4b;
}
.warning-card {
  border-left: 4px solid #18a7b7;
  background: #0c2630;
}