:root {
  --primary: #003d7a;
  --accent: #00a651;
  --text: #1f2937;
  --bg: #f8fafc;
  --card: #ffffff;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  --radius: 16px;
  --border: rgba(148, 163, 184, 0.35);
  --muted: #64748b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Open Sans, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(900px 500px at 10% 0%, rgba(29, 78, 216, 0.10), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(34, 197, 94, 0.10), transparent 55%),
    var(--bg);
  line-height: 1.6;
}
.hero, .section, .faq-item, .step, .stat-card, .contact-card {
  content-visibility: auto;
  contain-intrinsic-size: 700px;
}
.hero { content-visibility: visible; contain-intrinsic-size: auto; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .with-anim .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}
.site-header, .hero, .section, .faq-item, .step, .stat-card, .contact-card {
  border-color: var(--border);
}
.tagline { color: var(--muted); }
.hero-sub p { color: var(--muted); }
.bg-blob {
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  filter: blur(60px);
  opacity: 0.45;
  transform: translate3d(0,0,0);
}
.bg-blob.a { left: -160px; top: -160px; background: rgba(59,130,246,0.45); }
.bg-blob.b { right: -180px; top: -200px; background: rgba(34,197,94,0.35); }
.with-anim .bg-blob { animation: floaty 12s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(26px) } }

.site-header {
  background: var(--card);
  border-bottom: 1px solid #e5e7eb;
  padding: 20px;
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.82);
}
.brand { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
.tagline { color: #64748b; margin-top: 4px; }
.top-nav { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.top-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f1f5f9;
}
.content {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.breadcrumbs a { color: var(--text); text-decoration: none; background: rgba(241,245,249,0.9); padding: 4px 8px; border-radius: 10px; }
.breadcrumbs a:hover { text-decoration: underline; }
.bc-sep { color: rgba(100,116,139,0.85); }
.bc-current { font-weight: 800; }
.variant-1 .breadcrumbs, .variant-2 .breadcrumbs, .variant-3 .breadcrumbs, .variant-4 .breadcrumbs, .variant-5 .breadcrumbs, .variant-6 .breadcrumbs, .variant-7 .breadcrumbs, .variant-8 .breadcrumbs, .variant-9 .breadcrumbs {
  background: rgba(10, 15, 28, 0.55);
  border-color: rgba(148, 163, 184, 0.20);
}
.variant-1 .breadcrumbs a, .variant-2 .breadcrumbs a, .variant-3 .breadcrumbs a, .variant-4 .breadcrumbs a, .variant-5 .breadcrumbs a, .variant-6 .breadcrumbs a, .variant-7 .breadcrumbs a, .variant-8 .breadcrumbs a, .variant-9 .breadcrumbs a {
  background: rgba(26,38,64,0.45);
  color: rgba(230,237,247,0.92);
}
.hero, .section {
  background: var(--card);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.hero h1 { margin-top: 0; }
.hero-inner { max-width: 860px; }
.hero-media {
  width: 100%;
  margin: 0 0 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.22);
}
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-sub p { margin: 10px 0; color: #475569; }
.hero-actions { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cta {
  display: inline-block;
  margin-top: 8px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 12px 30px rgba(29,78,216,0.22);
}
.cta:hover { transform: translateY(-1px); }
.cta.ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(29,78,216,0.25);
  box-shadow: none;
}
.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: calc(var(--radius) - 6px);
  padding: 12px;
  margin: 8px 0;
}
.faq-item summary { cursor: pointer; font-weight: 600; }
.bullets { padding-left: 18px; }
.bullets li { margin: 8px 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; background: #fff; }
.stat-value { font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.stat-label { color: #64748b; margin-top: 4px; }
.steps { display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 38px 1fr; gap: 12px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; }
.step-num { width: 38px; height: 38px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(29,78,216,0.12); color: var(--primary); font-weight: 800; }
.step-body h3 { margin: 0 0 6px; }
.rel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fact {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.85);
}
.fact-k { font-weight: 800; }
.fact-v { margin-top: 4px; color: #64748b; }
.pill-links { display:flex; flex-wrap: wrap; gap: 10px; }
.pill-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(241,245,249,0.9);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.pill-link:hover { text-decoration: underline; }
.variant-1 .fact, .variant-2 .fact, .variant-3 .fact, .variant-4 .fact, .variant-5 .fact, .variant-6 .fact, .variant-7 .fact, .variant-8 .fact, .variant-9 .fact {
  background: rgba(10, 15, 28, 0.50);
  border-color: rgba(148, 163, 184, 0.20);
}
.variant-1 .fact-v, .variant-2 .fact-v, .variant-3 .fact-v, .variant-4 .fact-v, .variant-5 .fact-v, .variant-6 .fact-v, .variant-7 .fact-v, .variant-8 .fact-v, .variant-9 .fact-v {
  color: rgba(230, 237, 247, 0.68);
}
.variant-1 .pill-link, .variant-2 .pill-link, .variant-3 .pill-link, .variant-4 .pill-link, .variant-5 .pill-link, .variant-6 .pill-link, .variant-7 .pill-link, .variant-8 .pill-link, .variant-9 .pill-link {
  background: rgba(26,38,64,0.45);
  color: rgba(230,237,247,0.92);
  border-color: rgba(148, 163, 184, 0.20);
}
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr; }
}
.rel-card {
  display: block;
  text-decoration: none;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rel-card:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); }
.rel-title { font-weight: 800; letter-spacing: 0.2px; }
.rel-desc { margin-top: 6px; color: #64748b; font-size: 0.92rem; }
.variant-1 .rel-card, .variant-2 .rel-card, .variant-3 .rel-card, .variant-4 .rel-card, .variant-5 .rel-card, .variant-6 .rel-card, .variant-7 .rel-card, .variant-8 .rel-card, .variant-9 .rel-card {
  background: rgba(10, 15, 28, 0.52);
  border-color: rgba(148, 163, 184, 0.22);
  color: #e6edf7;
}
.variant-1 .rel-desc, .variant-2 .rel-desc, .variant-3 .rel-desc, .variant-4 .rel-desc, .variant-5 .rel-desc, .variant-6 .rel-desc, .variant-7 .rel-desc, .variant-8 .rel-desc, .variant-9 .rel-desc {
  color: rgba(230, 237, 247, 0.68);
}
@media (max-width: 860px) {
  .rel-grid { grid-template-columns: 1fr; }
}
.contact-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.contact-card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; background: #fff; }
.contact-card h3 { margin: 0 0 6px; }

.reveal { opacity: 1; transform: none; }
.with-anim .reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.with-anim .reveal.in { opacity: 1; transform: translateY(0); }

/* Variants: different hero moods */
.variant-1 .cta { background: linear-gradient(135deg, var(--primary), #7c3aed); }
.variant-2 .cta { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.variant-3 .cta { background: linear-gradient(135deg, #0ea5e9, var(--primary)); }
.variant-4 .cta { background: linear-gradient(135deg, #f97316, #ef4444); }

/* --- DESIGN TEMPLATES (0..9) --- */
.variant-0 { --radius: 16px; }

/* 1) Glass / Aurora */
.variant-1 {
  --bg: #0b1220;
  --text: #e2e8f0;
  --muted: rgba(226,232,240,0.72);
  --card: rgba(17, 24, 39, 0.55);
  --border: rgba(148,163,184,0.22);
  --shadow: 0 22px 70px rgba(2,6,23,0.55);
}
.variant-1 body { background: var(--bg); }
.variant-1 .site-header { background: rgba(15, 23, 42, 0.55); border-bottom-color: var(--border); }
.variant-1 .top-nav a { background: rgba(148,163,184,0.10); color: var(--text); }
.variant-1 .hero, .variant-1 .section { backdrop-filter: blur(18px); }
.variant-1 .bg-blob.a { background: rgba(99,102,241,0.38); }
.variant-1 .bg-blob.b { background: rgba(34,197,94,0.28); }

/* 2) Dark minimal / neon accent */
.variant-2 {
  --bg: #070a12;
  --text: #e5e7eb;
  --muted: rgba(229,231,235,0.70);
  --card: #0b1220;
  --border: rgba(148,163,184,0.18);
  --shadow: 0 16px 60px rgba(0,0,0,0.55);
}
.variant-2 .site-header { background: rgba(11,18,32,0.92); }
.variant-2 .top-nav a { background: rgba(59,130,246,0.12); color: var(--text); }
.variant-2 .cta { box-shadow: 0 14px 40px rgba(59,130,246,0.25); }

/* 3) Neo-brutal */
.variant-3 {
  --bg: #fff7ed;
  --card: #ffffff;
  --text: #111827;
  --muted: #374151;
  --border: rgba(17,24,39,0.85);
  --radius: 10px;
  --shadow: 8px 8px 0 rgba(17,24,39,0.92);
}
.variant-3 .site-header { background: #fff; border-bottom: 3px solid var(--border); backdrop-filter: none; }
.variant-3 .top-nav a { background: #fff; border: 2px solid var(--border); }
.variant-3 .hero, .variant-3 .section { border-width: 2px; }
.variant-3 .cta { border: 2px solid rgba(17,24,39,0.75); }

/* 4) Candy gradient */
.variant-4 {
  --bg: #0b1220;
  --text: #e2e8f0;
  --muted: rgba(226,232,240,0.72);
  --card: rgba(15, 23, 42, 0.66);
  --border: rgba(148,163,184,0.22);
  --shadow: 0 22px 80px rgba(2,6,23,0.55);
}
.variant-4 body {
  background: radial-gradient(900px 600px at 12% 0%, rgba(244,63,94,0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(900px 600px at 60% 100%, rgba(34,197,94,0.14), transparent 60%),
    var(--bg);
}
.variant-4 .cta { background: linear-gradient(135deg, #f43f5e, #a855f7, #3b82f6); }
.with-anim.variant-4 .cta { background-size: 200% 200%; animation: grad 6s ease infinite; }
@keyframes grad { 0%,100%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } }

/* 5) Elegant monochrome */
.variant-5 {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15,23,42,0.10);
  --shadow: 0 14px 40px rgba(2,6,23,0.08);
  --radius: 20px;
}
.variant-5 .brand { letter-spacing: 0.2px; }
.variant-5 .top-nav a { background: #eef2ff; }
.variant-5 .cta { background: #0f172a; box-shadow: 0 14px 40px rgba(2,6,23,0.18); }
.variant-5 .cta.ghost { color: #0f172a; border-color: rgba(15,23,42,0.22); }

/* 6) Retro / warm */
.variant-6 {
  --bg: #fffbeb;
  --card: #fff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: rgba(120,53,15,0.16);
  --shadow: 0 18px 55px rgba(120,53,15,0.12);
  --radius: 18px;
}
.variant-6 .cta { background: linear-gradient(135deg, #b45309, #f59e0b); box-shadow: 0 14px 40px rgba(180,83,9,0.18); }
.variant-6 .step-num { background: rgba(245,158,11,0.18); color: #92400e; }

/* 7) Luxury / deep */
.variant-7 {
  --bg: #06070a;
  --card: rgba(17, 24, 39, 0.72);
  --text: #f8fafc;
  --muted: rgba(248,250,252,0.70);
  --border: rgba(251,191,36,0.18);
  --shadow: 0 22px 90px rgba(0,0,0,0.60);
  --radius: 22px;
}
.variant-7 .brand { color: #fbbf24; }
.variant-7 .cta { background: linear-gradient(135deg, #fbbf24, #f97316); color: #111827; }
.variant-7 .top-nav a { background: rgba(251,191,36,0.10); color: var(--text); }

/* 8) Corporate blue */
.variant-8 {
  --bg: #f1f5ff;
  --card: #ffffff;
  --text: #0b1220;
  --muted: #334155;
  --border: rgba(30,64,175,0.14);
  --shadow: 0 18px 60px rgba(30,64,175,0.10);
  --radius: 14px;
}
.variant-8 .site-header { background: rgba(255,255,255,0.88); }
.variant-8 .top-nav a { background: rgba(30,64,175,0.06); }
.variant-8 .cta { background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }

/* 9) Playful */
.variant-9 {
  --bg: #fdf2f8;
  --card: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --border: rgba(236,72,153,0.18);
  --shadow: 0 18px 60px rgba(236,72,153,0.12);
  --radius: 24px;
}
.variant-9 .cta { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.variant-9 .top-nav a { background: rgba(236,72,153,0.06); }

@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
.site-footer {
  text-align: center;
  padding: 24px;
  color: #64748b;
}