/* FluffyLand — iOS‑style glassmorphism */
:root{
  --bg: #0b0c10;
  --text: #e9ecf1;
  --muted: #b7beca;
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.15);
  --accent: 220 100% 60%;
  --radius: 24px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.bg-layer{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
}
.bg-layer img{
  height:100%; width:100%; object-fit:cover; filter:grayscale(10%) saturate(85%);
  transform:scale(1.05);
}
.bg-layer .bg-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,10,16,.65), rgba(8,10,16,.9));
  backdrop-filter:saturate(60%) blur(0px);
}

/* Навигация */
.nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(10,12,18, .55);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; gap:16px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.3px}
.brand-emoji{font-size:22px}
.brand-text{font-size:18px}

.nav-links{
  margin-left:8px; display:flex; gap:14px; flex:1;
}
.nav-links a{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:12px }
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06) }

.cta-group{display:flex; align-items:center; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  color:var(--text); text-decoration:none;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  backdrop-filter: blur(10px);
  transition:transform .15s ease, background .2s ease, border .2s ease;
}
.chip:hover{ transform:translateY(-1px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25) }
.chip svg{ width:18px; height:18px; fill:currentColor }

.menu{ display:none; background:transparent; border:0; padding:8px 10px; border-radius:12px; }
.menu span{ display:block; width:20px; height:2px; background:var(--text); margin:4px 0; border-radius:2px }

/* Hero */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; padding:28px 0 12px }
.hero-content{ padding:28px }
.hero h1{ font-size:clamp(28px, 4vw, 44px); margin:0 0 10px 0; line-height:1.1 }
.subtitle{ color:var(--muted); margin:0 0 18px }
.grad{ background: linear-gradient(90deg, hsl(var(--accent)), #7dd3fc 60%, #fde68a 100%); -webkit-background-clip:text; background-clip:text; color:transparent }

.hero-actions{ display:flex; gap:10px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:16px; text-decoration:none; font-weight:600;
  border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text);
  box-shadow: var(--shadow);
}
.btn.primary{ background:linear-gradient(180deg, hsla(var(--accent), .85), hsla(var(--accent), .65)); border:0; color:#0a1020 }
.btn.ghost{ background:rgba(255,255,255,.03) }
.btn:hover{ transform:translateY(-1px) }

.hero-media{ padding:8px }
.hero-media img{ width:100%; height:auto; display:block; border-radius: calc(var(--radius) - 6px) }

/* Секции */
.section{ padding:34px 0 }
.section-head h2{ margin:0 0 6px; font-size:clamp(22px, 3vw, 32px) }
.section-head p{ margin:0; color:var(--muted) }

.glass{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: var(--shadow);
}

.cards.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:16px }
.card{ padding:18px }

.info-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; margin-top:16px }
.kv{ list-style:none; padding:0; margin:0 }
.kv li{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.1) }
.kv li:last-child{ border-bottom:0 }
.kv span{ color:var(--muted); width:120px }
.kv code{ background:rgba(255,255,255,.06); padding:4px 8px; border-radius:8px; border:1px solid var(--border) }

.banner{ padding:10px }
.banner img{ width:100%; height:100%; object-fit:cover; border-radius: calc(var(--radius) - 6px) }

/* Проходка */
.access-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:12px; margin-top:16px }
.steps{ counter-reset: step; padding:18px 24px }
.steps li{ margin:10px 0; }
.steps a{ color:#a6e3ff }

.promo{ display:grid; grid-template-columns: 90px 1fr; gap:16px; align-items:center }
.promo-icon{ width:84px; height:84px; display:grid; place-items:center; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid var(--border) }
.promo-icon svg{ width:46px; height:46px; fill:currentColor }

/* Правила */
.rules ul{ padding-left:18px; margin:0 0 8px }
.rules li{ margin:8px 0 }
.muted{ color:var(--muted); font-size:14px }

/* FAQ */
.faq{ display:grid; gap:12px; margin-top:16px }
.faq details{ padding:12px 16px }
.faq summary{ cursor:pointer; font-weight:600 }
.faq p{ margin:8px 0 0 }

/* Footer */
.footer{ padding:30px 0 60px; color:var(--muted); text-align:center }

/* Адаптив */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; }
  .access-grid{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .nav-links{ display:none }
  .menu{ display:inline-block }
}

/* Fix: ensure buttons and chips have consistent height and padding */
.chip, .btn {
  min-height: 40px;
  padding-inline: 14px;
  font-size: 15px;
}

.container {
  padding-left: 8px;
  padding-right: 8px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Prevent hugging edges on mobile */
@media (max-width: 600px) {
  .hero-content, .hero-media, .card, .glass {
    padding: 16px;
  }
}


/* ===== Мобильная адаптация ===== */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }

  /* Навигация */
  .nav-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .cta-group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .chip, .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-content {
    padding: 16px 0;
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-media {
    padding: 0;
  }

  /* Сетки в одну колонку */
  .cards.grid-3,
  .info-grid,
  .access-grid {
    grid-template-columns: 1fr;
  }

  /* Текст */
  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.4rem;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .brand-text {
    font-size: 16px;
  }
  .promo {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .promo-icon {
    margin: 0 auto;
  }
}