/* ==========================================================================
   WhiteGen Design System
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
  --brand-primary: #004A93;
  --brand-accent: #C8102E;
  --brand-light: #E8F0FE;
  --brand-dark: #00264D;
  --text: #1a1a1a;
  --text-light: #555;
  --bg: #fff;
  --bg-alt: #f7f9fc;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,74,147,.08);
  --transition: .25s ease;
  --max-w: 1200px;
  --header-h: 72px;
  --font: 'Inter',system-ui,-apple-system,sans-serif;
}

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size:16px;
  line-height:1.5;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body {
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

img,video,iframe,embed,object,table { max-width:100%; height:auto; }
a { color:inherit; }

/* ==========================================================================
   2. Container
   ========================================================================== */
.container { width:92%; max-width:var(--max-w); margin:0 auto; }

/* ==========================================================================
   3. Screen-reader only
   ========================================================================== */
.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   4. Site Header
   ========================================================================== */
.site-header {
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:1000;
}

/* 5. Header inner */
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
}

/* 6. Logo */
.logo {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.25rem;
  font-weight:700;
  text-decoration:none;
  color:var(--brand-dark);
}
.logo img { height:36px; width:auto; }

/* 7. Main nav */
.main-nav { display:flex; align-items:center; gap:1.5rem; }
.main-nav a {
  font-size:.95rem;
  font-weight:500;
  text-decoration:none;
  color:var(--text);
  transition:color var(--transition);
}
.main-nav a:hover { color:var(--brand-primary); }

/* Nav dropdown button (mega-menu trigger) */
.nav-dropdown { position:relative; }
.nav-dropdown button {
  background:none;
  border:none;
  font-family:var(--font);
  font-size:.95rem;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  padding:.5rem 0;
  transition:color var(--transition);
}
.nav-dropdown button:hover { color:var(--brand-primary); }
.nav-dropdown button::after { content:' ▾'; font-size:.75rem; }

/* 8. Nav CTA */
.nav-cta {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1.2rem;
  background:var(--brand-primary);
  color:#fff;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  transition:background var(--transition);
}
.nav-cta:hover { background:var(--brand-dark); }

/* 9. Mega menu */
.mega-menu {
  position:absolute;
  top:100%; left:0; right:0;
  display:none;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  background:#fff;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  border-radius:0 0 var(--radius) var(--radius);
  padding:2rem;
}
.mega-menu.active { display:grid; }
.mega-menu h4 {
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-light);
  margin-bottom:.75rem;
  font-weight:700;
}
.mega-menu a {
  display:block;
  padding:.4rem 0;
  font-size:.93rem;
  color:var(--text);
  text-decoration:none;
  transition:color var(--transition);
}
.mega-menu a:hover { color:var(--brand-primary); }

/* 10. Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
}
.hamburger span {
  display:block;
  width:24px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:var(--transition);
}

/* 11. Mobile nav */
.mobile-nav {
  position:fixed;
  top:0; right:0;
  width:100%; height:100%;
  background:rgba(0,74,147,.97);
  color:#fff;
  transform:translateX(100%);
  transition:transform .35s ease;
  z-index:2000;
  padding:2rem;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav .close-btn {
  align-self:flex-end;
  background:none; border:none;
  color:#fff; font-size:1.8rem;
  cursor:pointer; margin-bottom:2rem;
}
.mobile-nav a {
  display:block;
  padding:.75rem 0;
  font-size:1.15rem;
  font-weight:500;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.15);
}

/* ==========================================================================
   12-18. Hero
   ========================================================================== */
.hero {
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-primary) 50%,#0062c4);
  color:#fff;
  padding:calc(var(--header-h) + 4rem) 0 5rem;
  position:relative;
}

/* 13. Curved separator */
.hero::after {
  content:'';
  position:absolute;
  bottom:-1px; left:0; right:0;
  height:60px;
  background:#fff;
  clip-path:ellipse(55% 100% at 50% 100%);
}

/* 14. Hero grid */
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

/* 15. Hero h1 */
.hero h1 {
  font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:800;
  line-height:1.2;
  margin-bottom:1rem;
}

/* 16. Hero p */
.hero p {
  font-size:1.1rem;
  color:rgba(255,255,255,.8);
  line-height:1.7;
  margin-bottom:2rem;
}

/* 17. Hero buttons */
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }

/* 18. Hero media */
.hero-media img {
  width:100%;
  border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}

/* ==========================================================================
   19-23. Buttons
   ========================================================================== */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.97rem;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:var(--transition);
  font-family:var(--font);
}

/* 20 */
.btn-primary { background:var(--brand-primary); color:#fff; }
.btn-primary:hover { background:#003a76; }

/* 21 */
.btn-white { background:#fff; color:var(--brand-primary); }
.btn-white:hover { background:var(--brand-light); }

/* 22 */
.btn-outline { border-color:#fff; color:#fff; background:transparent; }
.btn-outline:hover { background:#fff; color:var(--brand-primary); }

/* 23 */
.btn-accent { background:var(--brand-accent); color:#fff; }
.btn-accent:hover { background:#a80d24; }

/* ==========================================================================
   24-29. Sections
   ========================================================================== */
/* 24 */
.section { padding:4.5rem 0; }
/* 25 */
.section-light { background:var(--bg-alt); }
/* 26 */
.section-accent { background:var(--brand-primary); color:#fff; }
/* 27 */
.section-dark { background:var(--brand-dark); color:#fff; }
/* 28 */
.section-title {
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-weight:700;
  margin-bottom:.5rem;
}
/* 29 */
.section-sub {
  font-size:1.05rem;
  color:var(--text-light);
  margin-bottom:2rem;
}

/* ==========================================================================
   30-33. Grids & Stats
   ========================================================================== */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }

/* 31 */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
/* 32 */
.stat-number { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:#fff; }
/* 33 */
.stat-label { font-size:.9rem; color:rgba(255,255,255,.8); }

/* ==========================================================================
   34-36. Cards
   ========================================================================== */
.card {
  background:var(--bg);
  border:1px solid #e9ecf0;
  border-radius:var(--radius);
  padding:2rem;
  transition:var(--transition);
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,74,147,.12);
}

/* 35 */
.card-dark { background:var(--brand-dark); color:#fff; border-color:transparent; }

/* 36 */
.card-icon {
  width:48px; height:48px;
  border-radius:50%;
  background:var(--brand-light);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}

/* ==========================================================================
   37-40. Image + Text
   ========================================================================== */
.img-text {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

/* 38 */
.img-text.reverse { direction:rtl; }
.img-text.reverse > * { direction:ltr; }

/* 39 */
.img-text img { width:100%; border-radius:var(--radius); }

/* 40 */
.img-text h2 { font-size:1.6rem; font-weight:700; margin-bottom:1rem; }

/* ==========================================================================
   41-42. Logo Cloud
   ========================================================================== */
.logo-cloud {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:2.5rem;
}
.logo-cloud img {
  opacity:.65;
  filter:grayscale(100%);
  transition:var(--transition);
}
.logo-cloud img:hover { opacity:1; filter:none; }

/* ==========================================================================
   43-44. Comparison Table
   ========================================================================== */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.comparison-table {
  width:100%;
  border-collapse:collapse;
}
.comparison-table thead { background:var(--brand-primary); color:#fff; }
.comparison-table th {
  padding:.75rem 1rem;
  font-size:.9rem;
  font-weight:600;
  text-align:left;
}
.comparison-table td {
  padding:.75rem 1rem;
  font-size:.92rem;
  border-bottom:1px solid #e9ecf0;
}
.comparison-table tbody tr:nth-child(even) { background:var(--bg-alt); }
.comparison-table tbody tr:hover { background:var(--brand-light); }

/* ==========================================================================
   45. AI Chunk
   ========================================================================== */
.ai-chunk {
  border-left:4px solid var(--brand-accent);
  background:var(--brand-light);
  padding:1.5rem 2rem;
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:1rem;
  line-height:1.8;
  margin-bottom:2rem;
}

/* ==========================================================================
   46-50. Accordion
   ========================================================================== */
.accordion-item {
  border:1px solid #e3e7ed;
  border-radius:var(--radius);
  margin-bottom:.75rem;
  overflow:hidden;
}
.accordion-item summary {
  padding:1rem 1.5rem;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.accordion-item summary::-webkit-details-marker { display:none; }
.accordion-item summary::after {
  content:'+';
  font-size:1.2rem;
  font-weight:700;
  color:var(--brand-primary);
}
.accordion-item[open] summary::after { content:'\2212'; }
.accordion-body {
  padding:0 1.5rem 1rem;
  font-size:.95rem;
  line-height:1.8;
}

/* ==========================================================================
   51-52. Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  padding-top:calc(var(--header-h) + 1rem);
  padding-bottom:1rem;
  font-size:.88rem;
  color:var(--text-light);
}
.breadcrumbs a {
  color:var(--brand-primary);
  text-decoration:none;
}
.breadcrumbs a:hover { text-decoration:underline; }

/* ==========================================================================
   53-54. CTA Block
   ========================================================================== */
.cta-block {
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-primary));
  padding:3.5rem;
  border-radius:var(--radius);
  text-align:center;
  color:#fff;
}
.cta-block h2 {
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:700;
  margin-bottom:1rem;
}
.cta-block p {
  color:rgba(255,255,255,.85);
  margin-bottom:1.5rem;
}

/* ==========================================================================
   55-57. Testimonial
   ========================================================================== */
.testimonial {
  position:relative;
  padding:2rem;
}
.testimonial::before {
  content:'\201C';
  font-size:4rem;
  position:absolute;
  top:0; left:1rem;
  color:var(--brand-light);
  font-weight:800;
  line-height:1;
}
.testimonial cite {
  display:block;
  margin-top:1rem;
  font-weight:600;
  font-size:.95rem;
  font-style:normal;
}

/* ==========================================================================
   58-62. How-to Steps
   ========================================================================== */
.howto-steps { counter-reset:step; }

.howto-step {
  position:relative;
  padding-left:4rem;
  margin-bottom:2rem;
}
.howto-step::before {
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0; top:0;
  width:3rem; height:3rem;
  border-radius:50%;
  background:var(--brand-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.1rem;
}
.howto-step h3 { font-size:1.05rem; font-weight:600; margin-bottom:.5rem; }
.howto-step p  { font-size:.95rem; color:var(--text-light); line-height:1.7; }

/* ==========================================================================
   63-66. Related Grid
   ========================================================================== */
.related-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.related-grid .card {
  text-decoration:none;
  color:inherit;
  border:2px solid transparent;
}
.related-grid .card:hover { border-color:var(--brand-primary); transform:translateY(-4px); }
.related-grid h3 { font-size:1.1rem; margin-bottom:.5rem; }
.related-grid p  { font-size:.95rem; color:var(--text-light); }

/* ==========================================================================
   67-73. Footer
   ========================================================================== */
.site-footer {
  background:var(--brand-dark);
  color:rgba(255,255,255,.85);
  padding:3.5rem 0 1.5rem;
}

/* 68 */
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:2.5rem;
}

/* 69 */
.footer-brand a {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:1.15rem;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  margin-bottom:.75rem;
}
.footer-brand p { font-size:.9rem; line-height:1.7; color:rgba(255,255,255,.7); }

/* 70 */
.site-footer h4 {
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:1rem;
  color:#fff;
}

/* 71 */
.site-footer a {
  color:rgba(255,255,255,.7);
  text-decoration:none;
  font-size:.9rem;
  display:block;
  margin-bottom:.5rem;
  transition:color var(--transition);
}
.site-footer a:hover { color:#fff; }

/* 72 */
.footer-bottom {
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.82rem;
}

/* 73 */
.footer-badges span {
  background:rgba(255,255,255,.08);
  padding:.25rem .75rem;
  border-radius:4px;
  font-size:.8rem;
  margin-left:.5rem;
}

/* ==========================================================================
   74-76. Page Header
   ========================================================================== */
.page-header {
  background:linear-gradient(150deg,var(--brand-dark),var(--brand-primary) 60%,#0062c4);
  color:#fff;
  padding:calc(var(--header-h) + 3rem) 0 3rem;
  text-align:center;
}
.page-header h1 {
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800;
  margin-bottom:1rem;
}
.page-header p {
  font-size:1.05rem;
  color:rgba(255,255,255,.8);
  max-width:600px;
  margin:0 auto;
}

/* ==========================================================================
   77. Content
   ========================================================================== */
.content { max-width:860px; margin:0 auto; }
.content p  { line-height:1.8; margin-bottom:1rem; }
.content h2 { font-size:1.5rem; font-weight:700; margin-top:2rem; margin-bottom:.75rem; }
.content h3 { font-size:1.2rem; font-weight:600; margin-top:1.5rem; margin-bottom:.5rem; }
.content ul,
.content ol { padding-left:1.5rem; margin-bottom:1rem; line-height:1.8; }
.content li { margin-bottom:.25rem; }

/* ==========================================================================
   78. Brand Banner
   ========================================================================== */
.brand-banner {
  background:var(--brand-primary);
  color:#fff;
  padding:3rem 0;
}

/* ==========================================================================
   79. Performance
   ========================================================================== */
/* content-visibility removed — causes rendering issues on some browsers */

/* ==========================================================================
   80. Focus-visible
   ========================================================================== */
:focus-visible {
  outline:2px solid var(--brand-accent);
  outline-offset:2px;
}

/* ==========================================================================
   Responsive — 1024px
   ========================================================================== */
@media (max-width:1024px) {
  .mega-menu { grid-template-columns:repeat(2,1fr); }
  .grid-4    { grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   Responsive — 768px
   ========================================================================== */
@media (max-width:768px) {
  .main-nav  { display:none; }
  .hamburger { display:flex; }

  .hero-grid,
  .img-text,
  .grid-2,
  .grid-3,
  .footer-grid { grid-template-columns:1fr; }

  .hero { text-align:center; }
  .hero-buttons { justify-content:center; }

  .related-grid { grid-template-columns:repeat(2,1fr); }

  .mega-menu {
    position:static;
    grid-template-columns:1fr;
    box-shadow:none;
    border-radius:0;
  }
}

/* ==========================================================================
   Responsive — 480px
   ========================================================================== */
@media (max-width:480px) {
  .related-grid  { grid-template-columns:1fr; }
  .hero-buttons  { flex-direction:column; }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header,.site-footer,.mobile-nav,.hero::after,.cta-block { display:none; }
  .hero { padding-top:1rem; background:#fff; color:#000; }
  .section { padding:1.5rem 0; }
}