/* === IceDrift / Book of Frost — Nordic Minimal Light Edition === */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;700&family=Tenor+Sans&display=swap');

:root {
  --snow:        #f7f8fc;
  --ice:         #eef1f8;
  --frost:       #dde4f0;
  --silver:      #bcc8dd;
  --slate:       #8496b0;
  --steel:       #4a5f7a;
  --midnight:    #1a2638;
  --abyss:       #0d1520;

  --crystal:     #5b9bd5;
  --glacier:     #3a7fc1;
  --deep-ice:    #1e5fa0;
  --arctic:      #a8d4f5;
  --teal:        #2ab8c8;
  --teal-light:  #7fe0ea;

  --accent:      #1e5fa0;
  --accent-warm: #e85d26;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-accent:  'Tenor Sans', Georgia, serif;

  --ease: cubic-bezier(.25,.8,.25,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --radius: 16px;
  --radius-sm: 8px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font-body);
  background: var(--snow);
  color: var(--midnight);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ─── FROST TEXTURE ─────────────────────── */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 90% 10%,  rgba(91,155,213,.08)  0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 80%,  rgba(42,184,200,.06)  0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(188,200,221,.15) 0%, transparent 50%);
}

/* ─── TOP BANNER ─────────────────────────── */
.top-banner {
  position:fixed; top:0; left:0; width:100%; z-index:2000;
  background: var(--midnight);
  border-bottom: 1px solid rgba(91,155,213,.2);
  padding:.38rem 1.5rem;
  display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap;
}
.top-banner p {
  font-family:var(--font-body); font-size:.7rem; font-weight:500;
  letter-spacing:.06em; color: var(--arctic); margin:0; text-align:center;
}
.top-banner .tbadge {
  font-family:var(--font-body); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:rgba(91,155,213,.2); color:var(--teal-light);
  border:1px solid rgba(91,155,213,.35);
  padding:.15rem .6rem; border-radius:4px;
  white-space:nowrap; flex-shrink:0;
}

/* ─── HEADER ─────────────────────────────── */
.header {
  position:fixed; top:29px; left:0; width:100%; z-index:1000;
  background: rgba(247,248,252,.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--frost);
  padding:.9rem 0;
  box-shadow: 0 2px 20px rgba(30,95,160,.06);
}
.header-content {
  max-width:1200px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-container { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.logo-mark {
  width:38px; height:38px;
  background: linear-gradient(135deg, var(--crystal), var(--teal));
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  box-shadow: 0 4px 14px rgba(91,155,213,.3);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.logo-container:hover .logo-mark { transform:rotate(-10deg) scale(1.1); box-shadow:0 6px 22px rgba(42,184,200,.4); }
.site-name {
  font-family: var(--font-display); font-size:1.35rem;
  color: var(--midnight); letter-spacing:.01em;
}
.site-name em { font-style:italic; color: var(--glacier); }

.nav ul { display:flex; list-style:none; gap:2rem; align-items:center; }
.nav a {
  font-family:var(--font-body); font-size:.82rem; font-weight:500;
  color: var(--slate); text-decoration:none; transition:color .2s; position:relative;
  letter-spacing:.01em;
}
.nav a::after {
  content:''; position:absolute; left:0; bottom:-3px;
  width:0; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--crystal), var(--teal));
  transition:width .3s var(--ease);
}
.nav a:hover { color: var(--midnight); }
.nav a:hover::after { width:100%; }

.nav .nav-cta {
  background: var(--midnight);
  color: var(--snow) !important;
  padding:.45rem 1.1rem;
  border-radius: 50px;
  font-weight:700;
  letter-spacing:.04em;
  transition: background .2s, transform .2s, box-shadow .2s !important;
}
.nav .nav-cta:hover { background:var(--accent); transform:translateY(-1px); box-shadow:0 4px 16px rgba(30,95,160,.25); }
.nav .nav-cta::after { display:none; }

.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.menu-toggle span { display:block; width:22px; height:2px; background:var(--midnight); border-radius:2px; transition:.3s; }

/* ─── PAGE OFFSET ─────────────────────────── */
.page-top { padding-top:calc(29px + 62px); }

/* ─── AGE OVERLAY ─────────────────────────── */
.age-overlay {
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(24px) brightness(.92) saturate(.7);
  -webkit-backdrop-filter:blur(24px) brightness(.92) saturate(.7);
  background:rgba(247,248,252,.4);
  transition:opacity .4s var(--ease);
}
.age-overlay.hidden { opacity:0; pointer-events:none; }
.age-card {
  background: var(--snow);
  border:1px solid var(--frost);
  border-radius:24px; padding:3rem 2.8rem; max-width:460px; width:92%;
  text-align:center; position:relative;
  box-shadow: 0 8px 40px rgba(30,95,160,.12), 0 40px 80px rgba(0,0,0,.06);
  animation:popIn .5s var(--ease-spring) both;
}
@keyframes popIn { from{transform:scale(.9) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

.age-deco { font-size:2.8rem; display:block; margin-bottom:1rem; }
.age-card h2 {
  font-family:var(--font-display); font-size:1.8rem;
  color:var(--midnight); margin-bottom:.7rem;
}
.age-card p { font-size:.97rem; color:var(--slate); margin-bottom:.5rem; }
.age-coins-note {
  margin:1.1rem 0 1.8rem;
  background:rgba(91,155,213,.07); border:1px solid rgba(91,155,213,.18);
  border-radius:10px; padding:.8rem 1rem;
  font-size:.83rem; color:var(--glacier); line-height:1.6;
}
.age-buttons { display:flex; gap:.8rem; }
.age-buttons .btn { flex:1; }

/* ─── BUTTONS ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.85rem 2rem; font-family:var(--font-body);
  font-size:.86rem; font-weight:700; letter-spacing:.04em;
  border:none; border-radius:50px; cursor:pointer; text-decoration:none;
  transition:transform .2s var(--ease-spring), box-shadow .2s; white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  background: var(--midnight);
  color: var(--snow);
  box-shadow: 0 4px 20px rgba(13,21,32,.2);
}
.btn-primary:hover { background:var(--accent); box-shadow:0 8px 28px rgba(30,95,160,.35); color:var(--snow); }
.btn-outline {
  background:transparent; color:var(--midnight);
  border:2px solid var(--frost); font-size:.84rem;
}
.btn-outline:hover { border-color:var(--silver); background:var(--ice); }
.btn-ice {
  background:linear-gradient(135deg, var(--crystal), var(--teal));
  color:var(--snow);
  box-shadow: 0 4px 20px rgba(91,155,213,.35);
}
.btn-ice:hover { box-shadow:0 8px 28px rgba(42,184,200,.45); }
.btn-ghost { background:transparent; color:var(--slate); border:1px solid var(--frost); font-size:.82rem; }
.btn-ghost:hover { color:var(--midnight); border-color:var(--silver); background:var(--ice); }

/* ─── HERO ─────────────────────────────────── */
.hero {
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:4rem;
  position:relative; padding:8rem 0 6rem; overflow:hidden;
}
.hero::after {
  content:''; position:absolute; right:-200px; top:50%; transform:translateY(-50%);
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,155,213,.07) 0%, transparent 70%);
  pointer-events:none;
}

.hero-content { position:relative; z-index:1; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--glacier); margin-bottom:1.4rem;
}
.hero-eyebrow::before { content:''; display:block; width:20px; height:1px; background:var(--crystal); }

.hero h1 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.8rem,5vw,4.2rem); line-height:1.05;
  color:var(--midnight); margin-bottom:1.4rem;
  letter-spacing:-.01em;
}
.hero h1 em {
  font-style:italic; color:var(--glacier);
  display:block;
}

.hero p {
  font-size:1.05rem; color:var(--slate);
  margin-bottom:2.4rem; max-width:480px; line-height:1.8;
}
.hero-buttons { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.hero-coins-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:500;
  color:var(--glacier); background:rgba(91,155,213,.08);
  border:1px solid rgba(91,155,213,.18);
  border-radius:50px; padding:.4rem .9rem; margin-top:1.2rem;
}

.hero-visual {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
}
.hero-card-stack { position:relative; width:340px; height:380px; }
.hero-card-main {
  position:absolute; top:0; left:0; right:0;
  background:linear-gradient(145deg, var(--midnight), #1e3a5a);
  border-radius:24px; padding:2.5rem;
  box-shadow:0 30px 60px rgba(13,21,32,.25), 0 0 0 1px rgba(91,155,213,.15);
  color:var(--snow); text-align:center; height:320px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  overflow:hidden;
}
.hero-card-main::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,155,213,.12) 0%, transparent 70%);
}
.hero-card-main .card-emoji { font-size:3.5rem; }
.hero-card-main h3 { font-family:var(--font-display); font-size:1.5rem; font-style:italic; }
.hero-card-main p { font-size:.82rem; color:var(--arctic); opacity:.8; }
.hero-card-float {
  position:absolute; bottom:0; right:-20px;
  background:var(--snow); border:1px solid var(--frost);
  border-radius:16px; padding:1rem 1.4rem;
  box-shadow:0 12px 30px rgba(13,21,32,.1);
  display:flex; align-items:center; gap:.7rem; white-space:nowrap;
}
.hero-card-float .dot { width:8px; height:8px; background:var(--teal); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
.hero-card-float p { font-size:.8rem; font-weight:600; color:var(--midnight); margin:0; }
.hero-card-float span { font-size:.72rem; color:var(--slate); }

/* ─── CONTAINER & SECTIONS ────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }
section { padding:5rem 0; position:relative; }
.section-label {
  font-family:var(--font-body); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--glacier); display:block; margin-bottom:.5rem;
}
.section-title { font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.8rem); color:var(--midnight); margin-bottom:1rem; }

/* ─── SECTION DIVIDER ─────────────────────── */
.section-divider { height:1px; background:var(--frost); margin:0; }

/* ─── CARDS ───────────────────────────────── */
.card {
  background:var(--snow); border:1px solid var(--frost);
  border-radius:var(--radius); padding:2rem;
  transition:transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
  position:relative; overflow:hidden;
}
.card::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(91,155,213,.04) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.card:hover { transform:translateY(-5px); border-color:rgba(91,155,213,.25); box-shadow:0 16px 40px rgba(13,21,32,.08); }
.card:hover::after { opacity:1; }

.card-icon { font-size:1.9rem; margin-bottom:1rem; display:block; }
.card h3 { font-family:var(--font-display); font-size:1.15rem; color:var(--midnight); margin-bottom:.5rem; }
.card p { font-size:.92rem; color:var(--slate); line-height:1.7; margin:0; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:3rem; }

/* ─── COINS CALLOUT ───────────────────────── */
.coins-callout {
  background:linear-gradient(135deg, rgba(91,155,213,.07), rgba(42,184,200,.05));
  border:1px solid rgba(91,155,213,.18);
  border-radius:var(--radius); padding:2.8rem; text-align:center; margin:3.5rem 0;
}
.coins-callout .big-icon { font-size:3rem; display:block; margin-bottom:1rem; }
.coins-callout h3 { font-family:var(--font-display); font-size:1.5rem; color:var(--midnight); margin-bottom:.8rem; }
.coins-callout p { color:var(--slate); font-size:.95rem; max-width:560px; margin:0 auto; }

/* ─── DISCLAIMER ──────────────────────────── */
.disclaimer-block {
  background:linear-gradient(135deg, #f0f4fa, #eaf0f8);
  border:1px solid var(--frost);
  border-left:4px solid var(--crystal);
  border-radius:var(--radius-sm); padding:1.8rem 2.2rem; margin:2.5rem 0;
}
.disc-header { display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.disc-icon { font-size:1.2rem; }
.disclaimer-block strong { font-family:var(--font-body); font-size:.85rem; font-weight:700; color:var(--midnight); letter-spacing:.04em; text-transform:uppercase; }
.disclaimer-block p { font-size:.88rem; color:var(--slate); margin:.3rem 0 0; line-height:1.75; }
.disclaimer-block a { color:var(--glacier); }

/* ─── TESTIMONIALS ROW ─────────────────────── */
.review-row { display:flex; flex-direction:column; gap:1rem; }
.review-item {
  background:var(--snow); border:1px solid var(--frost); border-radius:var(--radius);
  padding:1.6rem 2rem; display:flex; gap:1.2rem; align-items:flex-start;
  transition:box-shadow .25s, border-color .25s;
}
.review-item:hover { border-color:rgba(91,155,213,.22); box-shadow:0 8px 24px rgba(13,21,32,.06); }
.review-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--crystal), var(--teal));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:var(--snow);
  font-family:var(--font-accent);
}
.review-body { flex:1; }
.review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.3rem; }
.review-name { font-weight:700; font-size:.9rem; color:var(--midnight); }
.review-stars { color:var(--crystal); font-size:.9rem; letter-spacing:.05rem; }
.review-text { font-size:.88rem; color:var(--slate); line-height:1.7; margin:0; }
.review-date { font-size:.72rem; color:var(--silver); margin-top:.3rem; }

/* ─── FOOTER ──────────────────────────────── */
.footer { background:var(--midnight); border-top:none; padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; }
.footer-brand .site-name { font-family:var(--font-display); font-size:1.1rem; color:var(--snow); display:block; margin-bottom:.6rem; }
.footer-brand p { font-size:.84rem; color:var(--slate); line-height:1.75; }
.footer-col h4 { font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--arctic); margin-bottom:1rem; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:.45rem; }
.footer-links a { font-size:.86rem; color:var(--slate); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--snow); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.76rem; color:var(--slate); margin:0; }
.footer-badges { display:flex; gap:.4rem; }
.footer-badge { font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .6rem; border-radius:4px; background:rgba(91,155,213,.12); color:var(--arctic); border:1px solid rgba(91,155,213,.2); }

/* ─── COOKIE MODAL ─────────────────────────── */
.cookie-modal-backdrop {
  position:fixed; inset:0; z-index:6000;
  background:rgba(26,38,56,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:2rem 1rem; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.cookie-modal-backdrop.show { opacity:1; pointer-events:all; }
.cookie-modal {
  background:var(--snow); border:1px solid var(--frost);
  border-radius:24px 24px 0 0;
  padding:2.4rem 2.6rem 2rem; width:100%; max-width:600px;
  box-shadow:0 -20px 60px rgba(13,21,32,.12);
  transform:translateY(40px); transition:transform .4s var(--ease);
}
.cookie-modal-backdrop.show .cookie-modal { transform:translateY(0); }
.cookie-modal-header { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; }
.cookie-modal-icon { width:44px; height:44px; flex-shrink:0; background:linear-gradient(135deg,var(--crystal),var(--teal)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.cookie-modal-header h3 { font-family:var(--font-display); font-size:1.25rem; color:var(--midnight); margin-bottom:.2rem; }
.cookie-modal-header p { font-size:.82rem; color:var(--slate); margin:0; line-height:1.55; }
.cookie-modal-header a { color:var(--glacier); }
.cookie-divider { height:1px; background:var(--frost); margin:1.3rem 0; }
.cookie-categories { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.6rem; }
.cookie-category { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--ice); border:1px solid var(--frost); border-radius:10px; padding:.9rem 1.1rem; transition:border-color .2s; }
.cookie-category:hover { border-color:rgba(91,155,213,.3); }
.cookie-cat-info { flex:1; }
.cookie-cat-info strong { font-size:.88rem; font-weight:700; color:var(--midnight); display:block; margin-bottom:.15rem; }
.cookie-cat-info span { font-size:.76rem; color:var(--slate); line-height:1.4; }
.cookie-toggle { position:relative; flex-shrink:0; }
.cookie-toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { display:block; width:44px; height:24px; background:var(--silver); border-radius:50px; cursor:pointer; transition:background .25s; position:relative; }
.toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--snow); border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.15); transition:transform .25s var(--ease-spring); }
.cookie-toggle input:checked + .toggle-track { background:var(--crystal); }
.cookie-toggle input:checked + .toggle-track::after { transform:translateX(20px); }
.cookie-toggle input:disabled + .toggle-track { opacity:.5; cursor:not-allowed; }
.cookie-modal-actions { display:flex; gap:.7rem; flex-wrap:wrap; }
.cookie-modal-actions .btn { flex:1; min-width:110px; font-size:.82rem; padding:.75rem 1rem; }

/* ─── LEGAL ────────────────────────────────── */
.legal-wrap { padding-top:calc(29px + 62px + 3rem); padding-bottom:5rem; }
.legal-card { background:var(--snow); border:1px solid var(--frost); border-radius:var(--radius); padding:3rem; }
.legal-card h1 { font-family:var(--font-display); font-size:2.2rem; color:var(--midnight); margin-bottom:.3rem; }
.legal-card .updated { font-size:.76rem; color:var(--silver); margin-bottom:2rem; display:block; letter-spacing:.06em; }
.legal-card h2 { font-family:var(--font-display); font-size:1.15rem; color:var(--midnight); margin:1.8rem 0 .5rem; }
.legal-card h3 { font-size:.9rem; font-weight:700; color:var(--glacier); margin:1.2rem 0 .3rem; text-transform:uppercase; letter-spacing:.08em; }
.legal-card p, .legal-card li { font-size:.92rem; color:var(--slate); margin-bottom:.5rem; line-height:1.8; }
.legal-card ul { padding-left:1.3rem; }
.legal-card a { color:var(--glacier); }

/* ─── RESPONSIVE ───────────────────────────── */
@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; text-align:center; }
  .hero-visual { display:none; }
  .hero p { margin-left:auto; margin-right:auto; }
  .hero-buttons { justify-content:center; }
  .hero-eyebrow { justify-content:center; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .menu-toggle { display:flex; }
  .nav { display:none; position:absolute; top:100%; left:0; width:100%; background:rgba(247,248,252,.98); border-bottom:1px solid var(--frost); padding:.5rem 0; backdrop-filter:blur(16px); }
  .nav.active { display:block; }
  .nav ul { flex-direction:column; gap:0; padding:0 20px; }
  .nav ul li { border-bottom:1px solid var(--frost); }
  .nav a { display:block; padding:.85rem 0; }
  .hero { padding:7rem 0 4rem; }
  .features-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .age-buttons { flex-direction:column; }
  .cookie-modal { border-radius:20px 20px 0 0; padding:1.8rem 1.4rem 1.5rem; }
  .cookie-modal-actions .btn { flex:1 1 100%; }
  .legal-card { padding:2rem 1.5rem; }
  .top-banner { flex-direction:column; gap:.3rem; padding:.5rem 1rem; }
}
@media (max-width:480px) { .hero h1 { font-size:2.3rem; } .container { padding:0 18px; } .card { padding:1.5rem; } }

.text-center { text-align:center; }
.mt-2 { margin-top:2rem; }
.mt-3 { margin-top:3rem; }
.hidden { display:none!important; }