/* ============================================================
   Funinexchange.vip — shared stylesheet
   Slate / amber theme, matching the live site's design system
   ============================================================ */

:root{
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;

  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;

  --red-500: #ef4444;

  --white: #ffffff;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --sidebar-w: 460px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--slate-900);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:700; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }
@media (min-width:1024px){ .wrap{ padding:0 32px; } }

.pill-dot{ width:6px; height:6px; border-radius:999px; background:var(--emerald-500); display:inline-block; }

/* ---------------- Page shell: fixed left app-preview + main column ---------------- */
.shell{ display:flex; flex-direction:column; min-height:100vh; position:relative; padding-bottom:76px; }
@media (min-width:1024px){ .shell{ flex-direction:row; padding-bottom:0; } }

/* ---------------- Left sidebar (desktop only "app preview") ---------------- */
.app-sidebar{ display:none; }
@media (min-width:1024px){
  .app-sidebar{
    display:flex; flex-shrink:0; width:var(--sidebar-w); height:100vh; position:fixed; top:0; left:0; z-index:20;
    justify-content:center; align-items:center; padding:0 0 24px 24px;
  }
}
.app-sidebar__frame{
  width:100%; max-width:var(--sidebar-w); border-radius:0;
  overflow:hidden; background:var(--slate-800);
}
@media (min-width:1024px){
  .app-sidebar__frame{
    border-radius:2.5rem; border:10px solid var(--slate-900);
    box-shadow:0 50px 100px -20px rgba(0,0,0,.6), 0 30px 60px -30px rgba(0,0,0,.5);
  }
}
.app-sidebar__body{ display:flex; flex-direction:column; max-height:calc(100vh - 160px); overflow-y:auto; }

.sb-header{ padding:16px; border-bottom:1px solid rgba(51,65,85,.8); }
.sb-header__row{ display:flex; align-items:center; justify-content:space-between; }
.sb-header__brand{ display:flex; align-items:center; gap:8px; }
.sb-header__brand img{ height:26px; width:auto; }
.sb-header__actions{ display:flex; gap:8px; }
.sb-btn{ padding:8px 12px; border-radius:8px; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.sb-btn--signup{ background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); }
.sb-btn--login{ background:rgba(51,65,85,.8); color:var(--white); border:1px solid var(--slate-600); }
.sb-date{ color:var(--slate-500); font-size:.72rem; margin-top:10px; display:flex; align-items:center; gap:6px; }
.sb-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--slate-700); }
.sb-nav a{ padding:6px 12px; border-radius:6px; font-size:.72rem; font-weight:600; color:var(--slate-300); }
.sb-nav a:hover{ color:var(--amber-400); background:rgba(51,65,85,.5); }

.sb-news{ padding:12px 16px; border-bottom:1px solid rgba(51,65,85,.8); display:flex; align-items:center; gap:12px; }
.sb-news__icon{ width:36px; height:36px; border-radius:8px; background:rgba(245,158,11,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; }
.sb-news__label{ color:var(--amber-400); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.sb-news__text{ color:var(--slate-300); font-size:.82rem; margin-top:2px; }

.sb-stats{ padding:12px 16px; display:flex; align-items:center; justify-content:space-around; gap:8px; border-bottom:1px solid rgba(71,85,105,.6); background:rgba(30,41,59,.3); }
.sb-stats div{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.sb-stats b{ font-size:.85rem; color:var(--amber-400); }
.sb-stats span{ font-size:.62rem; color:var(--slate-500); }

.sb-section{ padding:16px; }
.sb-banner{
  border-radius:16px; padding:16px; background:linear-gradient(135deg,#b91c1c,#7f1d1d);
  display:flex; align-items:center; justify-content:space-between; box-shadow:0 10px 24px rgba(127,29,29,.3);
}
.sb-banner__tag{ display:inline-block; padding:2px 8px; background:rgba(251,191,36,.2); color:var(--amber-400); font-size:.6rem; font-weight:800; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.sb-banner h3{ font-size:.9rem; margin-top:6px; }
.sb-banner p{ font-size:.75rem; color:rgba(255,255,255,.85); margin-top:2px; }

.sb-promo{ border-radius:16px; padding:14px; background:rgba(30,41,59,.6); border:1px solid var(--slate-700); display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.sb-promo__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.sb-promo__icon{ width:42px; height:42px; border-radius:10px; background:rgba(245,158,11,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.2rem; }
.sb-promo p:first-child{ font-size:.85rem; font-weight:600; }
.sb-promo p:last-child{ font-size:.72rem; color:var(--amber-400); }
.sb-claim{ padding:8px 12px; background:var(--amber-500); color:var(--slate-900); font-size:.72rem; font-weight:800; border-radius:8px; flex-shrink:0; }

.sb-jackpot{ margin-top:10px; border-radius:10px; background:rgba(30,41,59,.6); border:1px solid var(--slate-600); padding:10px 12px; display:flex; align-items:center; gap:10px; }
.sb-jackpot__label{ font-size:.6rem; color:var(--slate-400); text-transform:uppercase; letter-spacing:.06em; }
.sb-jackpot__value{ font-size:.85rem; font-weight:700; }

.sb-sports{ margin-top:0; border-radius:16px; overflow:hidden; background:rgba(30,41,59,.5); border:1px solid var(--slate-600); }
.sb-sports__head{ display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--slate-600); }
.sb-sports__head h3{ font-size:.85rem; display:flex; align-items:center; gap:8px; }
.sb-sports__live{ padding:4px 10px; background:rgba(239,68,68,.9); font-size:.6rem; font-weight:800; border-radius:8px; text-transform:uppercase; }
.sb-sports__body{ padding:14px; display:flex; gap:12px; }
.sb-sports__box{ flex:1; min-height:84px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,rgba(49,46,129,.5),rgba(88,28,135,.5)); position:relative; }
.sb-sports__list{ display:flex; flex-direction:column; justify-content:center; gap:6px; font-size:.75rem; }
.sb-sports__list .lead{ color:var(--amber-400); font-weight:700; }
.sb-sports__list span{ color:var(--slate-400); }
.sb-sports__cta{ display:block; margin:0 14px 14px; padding:10px; background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); font-weight:700; font-size:.82rem; border-radius:10px; text-align:center; }

.sb-quick{ margin-top:16px; }
.sb-quick__label{ font-size:.6rem; color:var(--slate-500); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.sb-quick__row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.sb-quick__tile{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.sb-quick__tile .box{ width:42px; height:42px; border-radius:10px; background:rgba(51,65,85,.8); border:1px solid var(--slate-600); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.sb-quick__tile span{ font-size:.65rem; color:var(--slate-400); }

.sb-level{ margin-top:16px; border-radius:10px; background:rgba(30,41,59,.6); border:1px solid var(--slate-600); padding:12px; }
.sb-level__row{ display:flex; justify-content:space-between; font-size:.72rem; margin-bottom:8px; }
.sb-level__row span:first-child{ color:var(--slate-400); }
.sb-level__row span:last-child{ color:var(--amber-400); font-weight:700; }
.sb-level__bar{ height:6px; border-radius:999px; background:var(--slate-700); overflow:hidden; }
.sb-level__bar i{ display:block; height:100%; width:45%; background:linear-gradient(90deg,var(--amber-500),var(--amber-400)); }
.sb-level__note{ font-size:.62rem; color:var(--slate-500); margin-top:6px; }

.sb-toggle{ margin-top:16px; display:flex; border-radius:10px; background:rgba(15,23,42,.8); padding:4px; border:1px solid var(--slate-700); }
.sb-toggle button{ flex:1; padding:10px; font-size:.82rem; font-weight:700; border-radius:8px; color:var(--slate-400); }
.sb-toggle button.active{ background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); }

.sb-games{ margin-top:16px; }
.sb-games__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sb-game{ border-radius:10px; overflow:hidden; background:rgba(51,65,85,.5); border:1px solid var(--slate-600); }
.sb-game__art{ aspect-ratio:4/3; overflow:hidden; position:relative; background:linear-gradient(135deg,rgba(127,29,29,.4),var(--slate-800)); }
.sb-game__foot{ padding:8px 10px; display:flex; align-items:center; justify-content:space-between; background:rgba(30,41,59,.5); font-size:.72rem; }
.sb-game__play{ padding:4px 8px; background:var(--amber-500); color:var(--slate-900); font-size:.65rem; font-weight:700; border-radius:6px; }

.sb-highlights{ margin-top:16px; padding-bottom:4px; }
.sb-highlights__head{ display:flex; justify-content:space-between; margin-bottom:10px; }
.sb-highlights__head h3{ font-size:.85rem; }
.sb-highlights__tag{ font-size:.68rem; font-weight:700; color:var(--amber-400); background:rgba(245,158,11,.1); padding:2px 8px; border-radius:6px; }
.sb-match{ display:flex; align-items:center; justify-content:space-between; padding:10px; border-radius:10px; background:rgba(51,65,85,.4); margin-bottom:6px; font-size:.78rem; }
.sb-match__left{ display:flex; align-items:center; gap:10px; }
.sb-match__badge{ width:30px; height:30px; border-radius:8px; background:rgba(56,189,248,.2); color:var(--sky-400); font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-match time{ display:block; color:var(--slate-500); font-size:.62rem; }
.sb-match p{ color:var(--white); font-weight:600; }

.sb-bottomnav{ display:flex; justify-content:space-around; align-items:center; padding:12px 8px; border-top:1px solid rgba(51,65,85,.8); background:rgba(15,23,42,.98); }
.sb-bottomnav a{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.6rem; color:var(--slate-400); font-weight:600; }
.sb-bottomnav a.active{ color:var(--amber-400); }
.sb-bottomnav a .ic{ font-size:1.1rem; }

/* ---------------- Main column ---------------- */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
@media (min-width:1024px){ .main-col{ margin-left:var(--sidebar-w); } }
@media (min-width:1280px){ .main-col{ margin-left:500px; } }

/* ---------------- Top header (main column) ---------------- */
.top-header{ padding:20px 16px 12px; }
@media (min-width:1024px){ .top-header{ padding:28px 32px 12px; } }
.top-header__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand-logo{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo img{ height:34px; width:auto; }
@media (min-width:1024px){ .brand-logo img{ height:40px; } }

nav.primary-nav{ display:none; gap:20px; align-items:center; }
@media (min-width:1024px){ nav.primary-nav{ display:flex; } }
nav.primary-nav a{ font-size:.86rem; font-weight:600; color:var(--slate-300); padding:4px 0; border-bottom:2px solid transparent; }
nav.primary-nav a:hover, nav.primary-nav a.active{ color:var(--amber-400); border-color:var(--amber-400); }

.auth-actions{ display:flex; align-items:center; gap:8px; }
.auth-btn{ padding:9px 14px; border-radius:8px; font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.auth-btn--signup{ background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); }
.auth-btn--login{ background:rgba(51,65,85,.8); color:var(--white); border:1px solid var(--slate-600); }

.mobile-nav-toggle{ display:flex; width:40px; height:40px; border-radius:8px; border:1px solid var(--slate-600); background:rgba(30,41,59,.6); align-items:center; justify-content:center; flex-shrink:0; }
@media (min-width:1024px){ .mobile-nav-toggle{ display:none; } }

nav.mobile-dropdown{ display:none; flex-direction:column; gap:4px; margin-top:12px; padding:12px; border-radius:12px; border:1px solid var(--slate-700); background:rgba(15,23,42,.92); }
nav.mobile-dropdown.open{ display:flex; }
nav.mobile-dropdown a{ padding:10px 12px; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--slate-300); }
nav.mobile-dropdown a.active{ color:var(--amber-400); background:rgba(245,158,11,.08); }
@media (min-width:1024px){ nav.mobile-dropdown{ display:none !important; } }

/* ---------------- Content container ---------------- */
.content{ padding:0 16px 48px; }
@media (min-width:1024px){ .content{ padding:0 32px 48px; } }

/* ---------------- Hero (home) ---------------- */
.hero-block{ background:var(--slate-800); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; }
.hero-block__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .hero-block__grid{ grid-template-columns:1.1fr .9fr; } }
.hero-block__left{ padding:28px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.hero-block__left h1{ font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.25; }
.hero-block__left p{ color:var(--slate-400); font-size:.92rem; line-height:1.7; }
.hero-block__right{ min-height:220px; overflow:hidden; position:relative; background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(15,23,42,.4)); }
.cta-btn{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:13px 24px; border-radius:10px; background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); font-weight:800; font-size:.88rem; }

/* ---------------- Feature cards ---------------- */
.feature-block{ background:var(--slate-800); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; }
.feature-block__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .feature-block__grid{ grid-template-columns:.8fr 1.2fr; } }
.feature-block__media{ min-height:160px; overflow:hidden; position:relative; background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(15,23,42,.4)); }
.feature-block__content{ padding:28px; }
.feature-block__content h2{ font-size:1.3rem; margin-bottom:12px; }
.feature-block__content p{ color:var(--slate-400); font-size:.9rem; line-height:1.7; margin-bottom:14px; }
.bullet-list{ display:grid; gap:10px; margin-bottom:16px; }
.bullet-list li{ display:flex; gap:10px; font-size:.88rem; color:var(--slate-300); }
.bullet-list .dot{ color:var(--amber-400); font-weight:800; flex-shrink:0; }
.feature-link{ color:var(--amber-400); font-weight:700; font-size:.86rem; display:inline-flex; align-items:center; gap:6px; }

/* ---------------- Article blocks ---------------- */
.article-block{ background:var(--slate-800); border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:24px; }
.article-block h2{ font-size:1.2rem; margin-bottom:12px; }
.article-block p{ color:var(--slate-400); font-size:.9rem; line-height:1.75; margin-bottom:10px; }
.diamond-list{ display:grid; gap:12px; margin-top:12px; }
.diamond-list li{ font-size:.9rem; color:var(--slate-300); line-height:1.6; padding-left:20px; position:relative; }
.diamond-list li::before{ content:"◆"; position:absolute; left:0; top:2px; color:var(--amber-400); font-size:.65rem; }
.diamond-list strong{ color:var(--white); }

/* ---------------- Section heading ---------------- */
.section-title{ display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.section-title .bar{ width:4px; height:18px; border-radius:999px; background:var(--amber-500); }

/* ---------------- Stats grid ---------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
@media (min-width:768px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-tile{ background:rgba(30,41,59,.6); border:1px solid var(--slate-600); border-radius:var(--radius-md); padding:16px; text-align:center; }
.stat-tile b{ display:block; font-size:1.6rem; }
.stat-tile span{ font-size:.72rem; color:var(--slate-400); }
.stat-tile.amber b{ color:var(--amber-400); }
.stat-tile.emerald b{ color:var(--emerald-400); }
.stat-tile.sky b{ color:var(--sky-400); }

/* ---------------- Featured tiles row ---------------- */
.tile-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; margin-bottom:12px; }
.featured-tile{ flex-shrink:0; width:160px; border-radius:var(--radius-md); overflow:hidden; position:relative; }
.featured-tile__media{ aspect-ratio:3/4; overflow:hidden; background:linear-gradient(135deg,rgba(127,29,29,.5),var(--slate-800)); position:relative; }
.featured-tile__text{ position:absolute; bottom:0; left:0; right:0; padding:12px; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); }
.featured-tile__title{ font-size:.82rem; font-weight:700; display:block; }
.featured-tile__cta{ font-size:.72rem; color:var(--amber-400); }
.see-all{ display:flex; justify-content:flex-end; margin-bottom:24px; }
.see-all a{ padding:10px 16px; border-radius:10px; background:rgba(245,158,11,.15); color:var(--amber-400); font-weight:700; font-size:.85rem; border:1px solid rgba(245,158,11,.35); }

/* ---------------- Offers grid ---------------- */
.offer-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:24px; }
@media (min-width:768px){ .offer-grid{ grid-template-columns:1fr 1fr; } }
.offer-card{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius-md); border:1px solid; }
.offer-card.amber{ background:linear-gradient(90deg,rgba(69,26,3,.3),rgba(30,41,59,.8)); border-color:rgba(245,158,11,.3); }
.offer-card.sky{ background:linear-gradient(90deg,rgba(8,47,73,.3),rgba(30,41,59,.8)); border-color:rgba(14,165,233,.3); }
.offer-card__icon{ width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
.offer-card.amber .offer-card__icon{ background:rgba(245,158,11,.2); }
.offer-card.sky .offer-card__icon{ background:rgba(14,165,233,.2); }
.offer-card h3{ font-size:.92rem; }
.offer-card p{ font-size:.78rem; margin-top:2px; }
.offer-card.amber p{ color:var(--amber-400); }
.offer-card.sky p{ color:var(--sky-400); }

/* ---------------- Security split ---------------- */
.security-block{ display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--slate-600); background:rgba(30,41,59,.5); margin-bottom:24px; }
@media (min-width:900px){ .security-block{ flex-direction:row; } }
.security-block__media{ padding:0; overflow:hidden; position:relative; min-height:200px; background:linear-gradient(135deg,var(--slate-800),var(--slate-900)); border-bottom:1px solid var(--slate-600); }
@media (min-width:900px){ .security-block__media{ width:40%; border-bottom:none; border-right:1px solid var(--slate-600); } }
.security-block__content{ padding:28px; flex:1; }
.security-block__content h2{ font-size:1.25rem; }
.security-block__content p{ color:var(--slate-400); font-size:.88rem; margin-top:10px; line-height:1.7; }
.security-block__content ul{ margin-top:14px; display:grid; gap:8px; }
.security-block__content li{ font-size:.86rem; color:var(--slate-300); display:flex; gap:8px; }
.security-block__content li::before{ content:"✓"; color:var(--amber-400); font-weight:800; }

/* ---------------- Blog cards ---------------- */
.blog-head-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.blog-head-row a{ color:var(--amber-400); font-size:.85rem; font-weight:600; }
.blog-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:24px; }
@media (min-width:768px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{ border-radius:var(--radius-md); overflow:hidden; background:rgba(30,41,59,.6); border:1px solid var(--slate-600); }
.blog-card__media{ aspect-ratio:1/1; overflow:hidden; position:relative; background:linear-gradient(135deg,rgba(245,158,11,.15),var(--slate-700)); }
.blog-card__body{ padding:16px; }
.blog-card time{ font-size:.72rem; color:var(--slate-500); }
.blog-card h3{ font-size:.92rem; margin-top:4px; line-height:1.4; }
.blog-card p{ font-size:.78rem; color:var(--slate-400); margin-top:8px; }
.blog-card .read-more{ font-size:.78rem; color:var(--amber-400); font-weight:600; margin-top:8px; display:inline-block; }

/* ---------------- FAQ ---------------- */
.faq-list{ display:grid; gap:8px; margin-bottom:24px; }
.faq-item{ border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--slate-600); }
.faq-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:rgba(5,150,105,.8); color:var(--white); font-size:.88rem; font-weight:600; text-align:left; }
.faq-trigger:hover{ background:var(--emerald-600); }
.faq-icon{ width:22px; height:22px; border-radius:999px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; transition:transform .2s ease; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-content{ max-height:0; overflow:hidden; transition:max-height .22s ease; background:rgba(30,41,59,.8); border-top:0 solid var(--slate-600); }
.faq-item.open .faq-content{ max-height:240px; border-top-width:1px; }
.faq-content p{ padding:14px 16px; font-size:.85rem; color:var(--slate-300); line-height:1.6; }

/* ---------------- CTA strip ---------------- */
.cta-strip{ border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--slate-800),var(--slate-900)); border:1px solid var(--slate-600); padding:28px; display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center; margin-bottom:24px; }
@media (min-width:900px){ .cta-strip{ flex-direction:row; justify-content:space-between; text-align:left; } }
.cta-strip h2{ font-size:1.2rem; }
.cta-strip .actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn-primary{ padding:12px 22px; border-radius:10px; background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); font-weight:800; font-size:.86rem; }
.btn-secondary{ padding:12px 22px; border-radius:10px; background:var(--slate-700); color:var(--white); font-weight:700; font-size:.86rem; border:1px solid var(--slate-600); }

/* ---------------- Page intro (non-home pages) ---------------- */
.page-intro{ padding:28px 0 8px; }
.page-intro .crumb{ font-size:.74rem; color:var(--slate-500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.page-intro .crumb a{ color:var(--slate-400); }
.page-intro h1{ font-size:clamp(1.5rem,3.2vw,2rem); margin-bottom:10px; }
.page-intro p{ color:var(--slate-400); font-size:.92rem; max-width:680px; }

/* ---------------- Blog post ---------------- */
.post-meta{ font-size:.76rem; color:var(--amber-400); font-weight:600; margin-bottom:10px; }
.post-body p{ color:var(--slate-300); font-size:.92rem; line-height:1.8; margin-bottom:16px; }
.post-body h2{ font-size:1.15rem; margin:28px 0 10px; }
.post-body h3{ font-size:1rem; color:var(--amber-400); margin:22px 0 8px; }
.post-body .diamond-list{ margin-bottom:16px; }

.callout-box{
  border:1px solid var(--slate-600); border-left:3px solid var(--amber-500);
  background:rgba(30,41,59,.6); border-radius:var(--radius-sm);
  padding:16px 18px; margin:18px 0; font-size:.88rem; color:var(--slate-300); line-height:1.7;
}
.callout-box strong{ color:var(--amber-400); }

.data-table-wrap{ overflow-x:auto; margin:18px 0; border:1px solid var(--slate-600); border-radius:var(--radius-sm); }
.data-table{ width:100%; border-collapse:collapse; font-size:.84rem; white-space:nowrap; }
.data-table th{ background:rgba(245,158,11,.12); color:var(--amber-400); text-align:left; padding:10px 14px; font-weight:700; border-bottom:1px solid var(--slate-600); }
.data-table td{ padding:10px 14px; color:var(--slate-300); border-bottom:1px solid var(--slate-700); }
.data-table tr:last-child td{ border-bottom:none; }

.post-faq{ margin-top:30px; }
.post-faq h2{ font-size:1.15rem; margin-bottom:14px; }

/* ---------------- Footer ---------------- */
.site-footer{ margin-top:8px; padding:28px 16px 100px; }
@media (min-width:1024px){ .site-footer{ padding:28px 32px 32px; } }
.footer-social{ text-align:center; margin-bottom:24px; }
.footer-social p{ font-size:.72rem; color:var(--slate-500); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.social-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.social-pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--slate-600); font-size:.76rem; font-weight:600; color:var(--slate-300); }
.social-pill:hover{ border-color:var(--amber-400); color:var(--amber-400); }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:20px; }
.footer-nav a{ font-size:.82rem; color:var(--slate-400); text-transform:capitalize; }
.footer-nav a:hover{ color:var(--amber-400); }
.footer-contact{ text-align:center; font-size:.8rem; color:var(--slate-500); line-height:1.8; }
.footer-contact a{ color:var(--slate-400); }

/* ---------------- Mobile bottom nav (overlays main column) ---------------- */
.mobile-bottom-nav{ position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; justify-content:space-around; align-items:center; padding:10px 8px; background:rgba(15,23,42,.97); backdrop-filter:blur(8px); border-top:1px solid var(--slate-700); }
@media (min-width:1024px){ .mobile-bottom-nav{ display:none; } }
.mobile-bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.62rem; color:var(--slate-400); font-weight:600; }
.mobile-bottom-nav a.active{ color:var(--amber-400); }
.mobile-bottom-nav .ic{ font-size:1.15rem; }

/* ---------------- Floating widgets ---------------- */
.floating-widgets{ position:fixed; right:16px; bottom:84px; z-index:100; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
@media (min-width:1024px){ .floating-widgets{ bottom:32px; right:32px; } }
.fw-whatsapp{ width:54px; height:54px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 10px 24px rgba(0,0,0,.4); }
.fw-telegram{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:var(--slate-800); border:1px solid var(--slate-600); box-shadow:0 10px 24px rgba(0,0,0,.4); font-size:.76rem; }
.fw-telegram b{ display:block; font-size:.78rem; }
.fw-telegram span.sub{ font-size:.64rem; color:var(--slate-400); }

/* ---------------- Background watermark ---------------- */
.bg-watermark{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.bg-watermark p{ color:rgba(255,255,255,.035); font-size:5rem; font-weight:900; text-transform:uppercase; letter-spacing:.3em; white-space:nowrap; }

/* ---------------- Responsive tweaks ---------------- */
@media (max-width:560px){
}

/* ---------------- Illustration fills ---------------- */
.media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------- Age gate ---------------- */
.age-gate{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(5,8,15,.96); backdrop-filter:blur(6px);
}
.age-gate[hidden]{ display:none; }
.age-gate__card{
  width:100%; max-width:420px; background:var(--slate-800); border:1px solid var(--slate-600);
  border-radius:var(--radius-lg); padding:32px 28px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.age-gate__card img{ height:40px; width:auto; margin:0 auto 20px; }
.age-gate__badge{
  width:56px; height:56px; border-radius:50%; background:rgba(245,158,11,.15); border:2px solid var(--amber-500);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:1.6rem; font-weight:800; color:var(--amber-400);
}
.age-gate__card h2{ font-size:1.2rem; margin-bottom:10px; }
.age-gate__card p{ color:var(--slate-400); font-size:.86rem; line-height:1.6; margin-bottom:22px; }
.age-gate__actions{ display:flex; flex-direction:column; gap:10px; }
.age-gate__yes{ padding:13px; border-radius:10px; background:linear-gradient(90deg,var(--amber-500),var(--amber-600)); color:var(--slate-900); font-weight:800; font-size:.9rem; }
.age-gate__no{ padding:13px; border-radius:10px; background:var(--slate-700); color:var(--white); font-weight:700; font-size:.9rem; border:1px solid var(--slate-600); }
.age-gate__link{ display:block; margin-top:16px; font-size:.76rem; color:var(--slate-500); }
.age-gate__link a{ color:var(--amber-400); text-decoration:underline; }

/* ---------------- Legal pages ---------------- */
.legal-block{ background:var(--slate-800); border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:20px; }
.legal-block h2{ font-size:1.1rem; margin-bottom:12px; color:var(--amber-400); }
.legal-block h3{ font-size:.96rem; margin:16px 0 8px; color:var(--white); }
.legal-block p{ color:var(--slate-300); font-size:.9rem; line-height:1.75; margin-bottom:12px; }
.legal-block ul{ display:grid; gap:8px; margin:12px 0; }
.legal-block li{ color:var(--slate-300); font-size:.88rem; line-height:1.65; padding-left:18px; position:relative; }
.legal-block li::before{ content:"–"; position:absolute; left:0; color:var(--amber-400); }
.legal-block a{ color:var(--amber-400); text-decoration:underline; }
.legal-updated{ color:var(--slate-500); font-size:.8rem; margin-bottom:20px; }
.helpline-card{ background:rgba(30,41,59,.6); border:1px solid var(--slate-600); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:12px; }
.helpline-card h3{ font-size:.92rem; color:var(--amber-400); margin-bottom:6px; }
.helpline-card p{ font-size:.86rem; color:var(--slate-300); margin-bottom:4px; }
.helpline-card .num{ font-weight:700; color:var(--white); }

/* --- post banner (auto-generated, blog-banners project) --- */
.post-banner{margin:0 0 26px;border-radius:14px;overflow:hidden;line-height:0;
  box-shadow:0 20px 44px -30px rgba(0,0,0,.45)}
.post-banner img{display:block;width:100%;height:auto}
.banner-band{padding:20px 0 0}
@media (max-width:640px){.post-banner{border-radius:10px;margin-bottom:20px}}