/* ============================================
   SHARED ICON SYSTEM — SVG Icons via CSS
   Replace all emojis with clean vector icons
   ============================================ */

/* Base icon styles */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--icon-bg, rgba(255,255,255,.06));
  border: 1px solid var(--icon-border, rgba(255,255,255,.08));
  margin-bottom: 1rem;
  position: relative;
  /* 3D lift */
  box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.12);
}
.icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--primary, #fff);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon Variants */
.icon-sm { width: 36px; height: 36px; }
.icon-sm svg { width: 18px; height: 18px; }
.icon-lg { width: 56px; height: 56px; }
.icon-lg svg { width: 28px; height: 28px; }

/* ============================================
   3D DESIGN SYSTEM — Mobile First
   ============================================ */

/* === 3D Card Effect === */
.card-3d {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 1.5rem;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
  /* 3D base shadow stack */
  box-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 4px 12px rgba(0,0,0,.12),
    0 8px 24px rgba(0,0,0,.08);
  /* Subtle 3D perspective on hover */
  transform-style: preserve-3d;
  will-change: transform;
}
.card-3d:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow:
    0 4px 8px rgba(0,0,0,.1),
    0 12px 28px rgba(0,0,0,.15),
    0 20px 40px rgba(0,0,0,.1);
}
/* 3D card bottom edge */
.card-3d::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 4px;
  right: 4px;
  height: 6px;
  border-radius: 0 0 var(--radius, 14px) var(--radius, 14px);
  background: var(--bg-card);
  filter: brightness(.7);
  z-index: -1;
  transition: bottom .3s ease, filter .3s ease;
}
.card-3d:hover::after {
  bottom: -6px;
  filter: brightness(.5);
}

/* === 3D Button === */
.btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all .2s ease;
  /* 3D push effect */
  box-shadow:
    0 4px 0 var(--btn-shadow, rgba(0,0,0,.25)),
    0 6px 12px rgba(0,0,0,.15);
  transform: translateY(0);
}
.btn-3d:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 var(--btn-shadow, rgba(0,0,0,.25)),
    0 2px 4px rgba(0,0,0,.1);
}
.btn-3d:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--btn-shadow, rgba(0,0,0,.25)),
    0 10px 20px rgba(0,0,0,.2);
}

/* === 3D Stats Counter === */
.stat-3d {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  position: relative;
  box-shadow:
    0 4px 12px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .3s ease;
}
.stat-3d:hover {
  transform: translateY(-4px) scale(1.02);
}

/* === 3D Predict Box === */
.predict-3d {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  cursor: default;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
  /* 3D depth */
  box-shadow:
    0 6px 0 rgba(0,0,0,.3),
    0 8px 16px rgba(0,0,0,.2);
}
.predict-3d:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 10px 0 rgba(0,0,0,.25),
    0 14px 28px rgba(0,0,0,.25);
}
.predict-3d small {
  font-size: .72rem;
  font-weight: 500;
  opacity: .85;
  margin-top: .2rem;
}
.predict-3d.red { background: linear-gradient(145deg, #f87171, #dc2626); }
.predict-3d.green { background: linear-gradient(145deg, #4ade80, #16a34a); }
.predict-3d.violet { background: linear-gradient(145deg, #c084fc, #7c3aed); }

/* === 3D Step Number === */
.step-3d {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
  box-shadow:
    0 3px 0 var(--primary-dark, rgba(0,0,0,.3)),
    0 4px 10px rgba(0,0,0,.2);
}

/* === 3D FAQ Accordion === */
.faq-3d {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: .6rem;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .3s ease;
}
.faq-3d:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.faq-3d .faq-q {
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-heading, #fff);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  transition: background .2s ease;
}
.faq-3d .faq-q:hover {
  background: rgba(255,255,255,.03);
}
.faq-3d .faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: .75rem;
  transition: transform .3s ease, background .3s ease;
  /* 3D mini button */
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.faq-3d .faq-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--primary, #fff);
  stroke-width: 2.5;
  fill: none;
  transition: transform .3s ease;
}
.faq-3d.open .faq-icon {
  background: var(--primary);
  transform: rotate(45deg);
}
.faq-3d.open .faq-icon svg {
  stroke: #000;
}
.faq-3d .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 1.25rem;
  color: var(--text-muted, #888);
  font-size: .9rem;
  line-height: 1.7;
}
.faq-3d.open .faq-a {
  max-height: 600px;
  padding: 0 1.25rem 1.25rem;
}

/* === Mobile-First Base Layout === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* CRITICAL: Prevent horizontal scroll on mobile */
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
body {
  font-family: var(--font, 'Segoe UI', Roboto, -apple-system, sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  /* CRITICAL: No side space */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--secondary, var(--primary)); }
ul, ol { list-style: none; }
h1, h2, h3 { color: var(--text-heading, #fff); line-height: 1.25; font-weight: 700; word-wrap: break-word; overflow-wrap: break-word; }
/* Mobile sizes first */
h1 { font-size: 1.6rem; margin-bottom: .75rem; }
h2 { font-size: 1.25rem; margin-bottom: .75rem; }
h3 { font-size: 1rem; margin-bottom: .4rem; }
p { margin-bottom: 1rem; word-wrap: break-word; overflow-wrap: break-word; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 .75rem;
}
.section { padding: 2.5rem 0; }
.section-alt { background: var(--bg-alt); }

/* Desktop overrides */
@media (min-width: 768px) {
  h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
  .container { padding: 0 2rem; }
  .section { padding: 4rem 0; }
}

/* === Mobile-First Header === */
.header {
  background: var(--bg, #0a0a0a);
  position: sticky;
  top: 0;
  z-index: 9998;
  border-bottom: 1px solid var(--border);
  padding: .5rem 0;
}
@media (min-width: 768px) {
  .header {
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.logo img {
  height: 38px;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.logo-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
}
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  /* 3D button */
  box-shadow: 0 3px 0 rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.15);
  transition: all .2s ease;
}
.nav-toggle:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.nav-list {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg, #0a0a0a);
  border-top: 1px solid var(--border);
  padding: .75rem;
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-list.active { display: flex; flex-direction: column; }
.nav-list li { width: 100%; }
.nav-list a {
  display: flex;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .95rem;
  font-weight: 500;
  transition: all .2s ease;
  /* Ensure touch-friendly */
  min-height: 48px;
  border-bottom: 1px solid var(--border);
}
.nav-list a:hover,
.nav-list a.active {
  background: rgba(255,255,255,.05);
  color: var(--primary);
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-list {
    display: flex !important;
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    gap: .15rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .nav-list a {
    padding: .4rem .55rem;
    font-size: .82rem;
    min-height: auto;
    border-bottom: none;
  }
}

/* === Breadcrumbs === */
.breadcrumbs {
  padding: .75rem 0;
  font-size: .82rem;
  color: var(--text-muted);
}
.breadcrumbs a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.breadcrumbs span { margin: 0 .35rem; opacity: .4; }

/* === Mobile Grids === */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.grid-auto { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 480px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .grid-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* === Footer === */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.footer h3 {
  color: var(--text-heading);
  margin-bottom: .6rem;
  font-size: .9rem;
  font-weight: 700;
}
.footer ul a {
  color: var(--text-muted);
  font-size: .85rem;
  display: block;
  padding: .3rem 0;
  text-decoration: none;
}
.footer ul a:hover { color: var(--primary); }
.footer-bottom {
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8rem;
}
.footer-bottom a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* === Utilities === */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Main content links */
main p a:not(.btn-3d) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1px;
}
main ul.legal { list-style: disc; padding-left: 1.5rem; color: var(--text-muted); }
main ul.legal li { margin-bottom: .5rem; }

/* Steps list */
.steps-list { margin-top: 1.25rem; }
.step-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.step-item:last-child { border-bottom: none; }
.step-item p { margin: 0; padding-top: .4rem; font-size: .95rem; }

/* Explore cards */
.explore-card {
  display: block;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  color: var(--text);
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.explore-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  color: var(--text);
}
.explore-card h3 {
  font-size: .9rem;
  color: var(--primary);
  margin-bottom: .2rem;
}
.explore-card p {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
}

/* CTA Banner with 3D */
.cta-3d {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 2rem 1.5rem;
  text-align: center;
  margin: 2rem 0;
  position: relative;
  box-shadow:
    0 4px 12px rgba(0,0,0,.1),
    0 8px 24px rgba(0,0,0,.08);
}
.cta-3d p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.cta-3d .btn-3d { margin: .25rem; }

/* Support cards */
.support-card {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  text-align: center;
  transition: all .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.support-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.support-card h3 { font-size: .95rem; margin-bottom: .3rem; }
.support-card p { font-size: .85rem; color: var(--text-muted); margin: 0; }

/* Spec grid */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 600px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec-box {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.spec-box ul { list-style: disc; padding-left: 1.5rem; color: var(--text-muted); }
.spec-box li { margin-bottom: .4rem; }

/* Payout table */
.payout-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.payout-table th, .payout-table td { padding: .65rem .75rem; border: 1px solid var(--border); text-align: left; font-size: .9rem; }
.payout-table th { background: var(--bg-card); color: var(--text-heading, #fff); font-weight: 600; }
.payout-table td { color: var(--text-muted); }

/* Blog article card */
.blog-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 1.5rem;
  color: var(--text);
  text-decoration: none;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  position: relative;
  overflow: hidden;
}
.blog-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary, var(--primary)));
  opacity: 0;
  transition: opacity .3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  color: var(--text);
}
.blog-card:hover::before { opacity: 1; }
.blog-card .blog-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  padding: .2rem .6rem;
  border-radius: 6px;
  margin-bottom: .75rem;
}
.blog-card h3 {
  font-size: 1rem;
  margin-bottom: .4rem;
  color: var(--text-heading, #fff);
}
.blog-card p {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}
.blog-card .read-more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  color: var(--primary);
  margin-top: .75rem;
  font-weight: 600;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--primary);
  color: #000;
  padding: .5rem 1rem;
  z-index: 9999;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { top: 0; }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}
/* ============================================================
   BANNER IMAGE — Inside hero, responsive sizing
   ============================================================ */
.banner-img{margin:0 0 1.25rem;text-align:center}
.banner-img img{width:100%;max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.25);display:block;aspect-ratio:2/1;object-fit:cover}
@media(min-width:768px){.banner-img img{max-width:600px;margin:0 auto;border-radius:var(--radius)}}
@media(min-width:1024px){.banner-img img{max-width:720px}}

/* ============================================================
   LAYOUT C — Split/Magazine Style (Domains 21-30)
   ============================================================ */
.hero-split{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:2rem 0;align-items:center}
.hero-split .hero-text{text-align:left;border-left:3px solid var(--primary);padding-left:1rem}
.hero-split .hero-text h1{font-size:1.6rem;line-height:1.15;letter-spacing:-.02em}
.hero-split .hero-text h1 span{color:var(--primary)}
.hero-split .hero-text .subtitle{color:var(--text-muted);font-size:.78rem;margin:.75rem 0 1.25rem;text-transform:uppercase;letter-spacing:.08em}
.hero-split .hero-text .hero-btns{display:flex;gap:.5rem;flex-direction:column}
.hero-split .hero-text .hero-btns .btn-3d{font-size:.95rem;padding:.85rem 1.5rem;border-radius:2rem;width:100%;text-align:center}
@media(min-width:768px){.hero-split .hero-text .hero-btns{flex-direction:row}.hero-split .hero-text .hero-btns .btn-3d{width:auto}}
.hero-split .hero-visual{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center;position:relative;overflow:hidden}
.hero-split .hero-visual::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.hero-split .hero-visual .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.hero-split .hero-visual .stat-pill{background:var(--bg);border-left:3px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.75rem .75rem;text-align:left}
.hero-split .hero-visual .stat-pill strong{display:block;font-size:1.5rem;color:var(--primary);font-weight:800;line-height:1}
.hero-split .hero-visual .stat-pill small{font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem;display:block}
@media(min-width:768px){.hero-split{grid-template-columns:1fr 1fr;padding:3.5rem 0}.hero-split .hero-text h1{font-size:2.2rem}}


/* Timeline steps */
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:.65rem;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:1.5rem;padding-left:1.5rem}
.timeline-item::before{content:attr(data-step);position:absolute;left:-2rem;top:0;width:1.5rem;height:1.5rem;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;z-index:1}
.timeline-item h3{font-size:.95rem;margin-bottom:.25rem}
.timeline-item p{font-size:.85rem;color:var(--text-muted);margin:0}

/* Wave section dividers */
.wave-top{position:relative;padding-top:2rem}
.wave-top::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2rem;background:var(--bg);clip-path:ellipse(55% 100% at 50% 0%)}

/* Horizontal feature strip */
.feature-strip{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.feature-strip::-webkit-scrollbar{height:4px}
.feature-strip::-webkit-scrollbar-track{background:transparent}
.feature-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.feature-strip .strip-card{flex:0 0 75%;scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;min-width:0}
@media(min-width:768px){.feature-strip .strip-card{flex:0 0 30%}}

/* Blog list style */
.blog-list-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--border)}
.blog-list-item:last-child{border-bottom:none}
.blog-list-item .blog-num{flex:0 0 2.5rem;height:2.5rem;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.blog-list-item h3{font-size:.95rem;margin-bottom:.25rem}
.blog-list-item p{font-size:.8rem;color:var(--text-muted);margin:0}

/* ============================================================
   LAYOUT D — Glassmorphism/Modern Style (Domains 31-41)
   ============================================================ */
.hero-glass{text-align:center;padding:2.5rem 0 2rem;position:relative}
.hero-glass::after{content:'';position:absolute;top:50%;left:50%;width:300px;height:300px;background:var(--primary);opacity:.06;border-radius:50%;transform:translate(-50%,-50%);filter:blur(80px);pointer-events:none}
.hero-glass h1{font-size:1.7rem;letter-spacing:-.02em;position:relative;z-index:1}
.hero-glass h1 span{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-glass .subtitle{color:var(--text-muted);font-size:.9rem;margin:.75rem auto 1.5rem;max-width:500px;position:relative;z-index:1}
@media(min-width:768px){.hero-glass h1{font-size:2.4rem}.hero-glass{padding:4rem 0 3rem}}

/* Glass cards */
.glass-card{background:rgba(255,255,255,.03);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:1.25rem;transition:transform .2s ease,border-color .2s ease}
.glass-card:hover{transform:translateY(-2px);border-color:var(--primary)}

/* Circular stat badges */
.stat-circles{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.stat-circle{width:5rem;height:5rem;border-radius:50%;border:2px solid var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-card);transition:transform .2s ease,box-shadow .2s ease}
.stat-circle:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(var(--primary),.2)}
.stat-circle strong{font-size:1.1rem;color:var(--primary);font-weight:800;line-height:1}
.stat-circle small{font-size:.5rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.15rem}

/* Badge steps */
.badge-steps{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.badge-step{display:flex;align-items:center;gap:.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:2rem;padding:.5rem 1rem;font-size:.85rem;transition:border-color .2s ease}
.badge-step:hover{border-color:var(--primary)}
.badge-step .badge-num{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}

/* Gradient border cards */
.glow-card{position:relative;background:var(--bg-card);border-radius:var(--radius);padding:1.25rem;overflow:hidden}
.glow-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary))}

/* Floating action bar */
.action-bar{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding:1rem;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:2rem;max-width:500px;margin:0 auto}
.action-bar .btn-3d{flex:1;min-width:0;text-align:center;font-size:.8rem;padding:.65rem .5rem}

/* Pill tags */
.pill-tag{display:inline-block;padding:.25rem .75rem;border-radius:2rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:var(--primary);color:#fff;margin-bottom:.75rem}

/* Blog magazine grid */
.blog-mag{display:grid;grid-template-columns:1fr;gap:1rem}
.blog-mag .blog-mag-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;position:relative;overflow:hidden;transition:border-color .2s ease}
.blog-mag .blog-mag-item:hover{border-color:var(--primary)}
.blog-mag .blog-mag-item::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.blog-mag .blog-mag-item:hover::before{transform:scaleX(1)}
.blog-mag .blog-mag-item h3{font-size:.95rem;margin:.5rem 0 .25rem}
.blog-mag .blog-mag-item p{font-size:.8rem;color:var(--text-muted);margin:0}
@media(min-width:768px){.blog-mag{grid-template-columns:1fr 1fr 1fr}}