:root{--bg: #f4f7fb;--fg:#eef2ff;--muted: #eef2f7;--brand:#6366f1;--accent:#22d3ee;--card: rgba(255,255,255,0.88);--line:#1f2937;--ok:#10b981  --bg-elev: #ffffff;
  --card-border: rgba(0,0,0,0.12);
  --text: #0f172a;
  --text-dim: rgba(15,23,42,0.7);
  --primary: #2563eb;
  --primary-weak: #dbeafe;
  --ring: rgba(37,99,235,0.35);
  --muted-border: rgba(0,0,0,0.08);
}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background: var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{position:sticky;top:0;background:rgba(11,16,32,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.nav-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:36px;height:36px;border-radius:8px}.brand .title{font-weight:800;letter-spacing:.4px}
.lang-select{background:transparent;border:1px solid var(--line);color:var(--fg);padding:8px 10px;border-radius:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#1f2937,#111827);color:#fff;box-shadow:0 4px 20px rgba(34,211,238,.15)}
.btn:hover{transform:translateY(-1px)}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:12px}
.section{padding:36px 24px;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:16px}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
.card{
  background: var(--card);
  border: 1px solid var(--card-border);
border:1px solid var(--line);padding:18px;border-radius:16px}
.card h3{margin-top:0}.badge{display:inline-block;background:#0b3b3f;padding:4px 10px;border-radius:999px;border:1px solid #12454a;color:#9be1ea;font-size:12px}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--line);padding:10px;text-align:left}
.footer{padding:24px;color:#94a3b8;font-size:14px}.footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}.footer a{color:#a5b4fc}.footer .sep{opacity:.4}.footer-legal{margin-top:8px;font-size:12px;color:#94a3b8}
.input, textarea{width:100%;background:#0f172a;color:#e2e8f0;border:1px solid var(--line);border-radius:12px;padding:12px}.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}
.hero-banner{min-height:46vh;display:flex;align-items:center;position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);margin-top:18px}
.hero-banner .inner{position:relative;z-index:2;padding:40px}.hero-title{font-size:36px;margin:0 0 8px 0}.hero-sub{color:#c7d2fe;margin:0}
.hero-banner::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.05) saturate(1.05);opacity:.9}
.hero-home::before{background-image:url('./assets/hero-home.svg')}
.hero-services::before{background-image:url('./assets/hero-services.svg')}
.hero-about::before{background-image:url('./assets/hero-about.svg')}
.hero-contact::before{background-image:url('./assets/hero-contact.svg')}
.hero-plans::before{background-image:url('./assets/hero-plans.svg')}
.nav-links a{border-radius:12px;padding:10px 14px;border:1px solid var(--line);background:linear-gradient(180deg,#1f2937,#111827)}
.nav-links a.active{outline:2px solid var(--accent)}
/* Pricing */
.pricing{display:grid;gap:16px}.pricing.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.pricing.cols-3{grid-template-columns:1fr}}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.price-head{display:flex;align-items:baseline;justify-content:space-between}.price-tier{font-weight:700}
.price{font-size:28px;font-weight:800}.price small{font-size:12px;color:#9ca3af}.price-feats{margin:0;padding-left:18px}
/* Cookies */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#0b1020;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.25);padding:16px;z-index:50}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-actions{display:flex;gap:8px}.cookie-btn{padding:10px 14px;border:1px solid var(--line);background:linear-gradient(180deg,#1f2937,#111827);border-radius:10px;color:#fff}
.cookie-btn.primary{outline:2px solid var(--accent)}.cookie-manage{cursor:pointer;text-decoration:underline;color:var(--accent)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:60}
.modal.open{display:flex}.modal-card{background:#0f172a;border:1px solid var(--line);border-radius:16px;max-width:720px;width:96%;padding:16px;color:#e2e8f0}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.toggle input{transform:scale(1.2)}

.cta-bottom{margin-top:24px;display:flex;justify-content:center}
.cta-bottom .btn{font-size:18px;padding:16px 28px;border-width:2px}

/* === Layout shift fix across pages (prevent menu/button jumping on scrollbar changes) === */
html { scrollbar-gutter: stable both-edges; }
body { overflow-y: scroll; }



/* === v16 Contrast Fix: Standard Light (natural balance) === */
/* Scope to non-hero content to avoid changing hero banners */
.section:not(.hero) {
  background: #f7f9fc; /* slightly darker than page bg for separation */
}

.section:not(.hero) .card {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 2px 8px rgba(16,24,40,0.06);
}

/* Stronger readable text in content areas */
.section:not(.hero), 
.section:not(.hero) p,
.section:not(.hero) li,
.section:not(.hero) dd,
.section:not(.hero) dt {
  color: #0f172a !important; /* slate-900 */
}

.section:not(.hero) h1,
.section:not(.hero) h2,
.section:not(.hero) h3,
.section:not(.hero) h4 {
  color: #0b1220 !important;
}

/* Pricing/feature blocks often dim text—normalize for readability */
.section:not(.hero) .card .muted,
.section:not(.hero) .card [class*="muted"],
.section:not(.hero) .card [style*="opacity"],
.section:not(.hero) .card .desc,
.section:not(.hero) .card .note {
  opacity: 1 !important;
  color: #1f2937 !important; /* gray-800 */
}

/* Subtle divider color on light theme */
.section:not(.hero) hr,
.section:not(.hero) .divider {
  border-color: rgba(0,0,0,0.12);
}

/* Keep badges readable */
.section:not(.hero) .badge,
.section:not(.hero) .label {
  color: #0f172a !important;
  background: #eef2f7 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
/* === End v16 Contrast Fix === */


/* === v17 Adjustment: Slightly lighter text for non-hero sections === */
.section:not(.hero),
.section:not(.hero) p,
.section:not(.hero) li,
.section:not(.hero) dd,
.section:not(.hero) dt {
  color: #334155 !important; /* slate-700, softer */
}

.section:not(.hero) h1,
.section:not(.hero) h2,
.section:not(.hero) h3,
.section:not(.hero) h4 {
  color: #1e293b !important; /* slightly lighter heading */
}
/* === End v17 Adjustment === */


/* === v18: Lighten hero CTA buttons only === */
.section.hero .btn,
.section.hero a.btn,
.section.hero .button,
.section.hero a.button,
.section.hero .cta button,
.section.hero .cta a {
  background: rgba(17, 24, 39, 0.72) !important; /* slightly lighter than before */
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.14) !important;
}

.section.hero .btn:hover,
.section.hero a.btn:hover,
.section.hero .button:hover,
.section.hero a.button:hover,
.section.hero .cta button:hover,
.section.hero .cta a:hover {
  background: rgba(17, 24, 39, 0.64) !important;
}

.section.hero .btn:active,
.section.hero a.btn:active,
.section.hero .button:active,
.section.hero a.button:active,
.section.hero .cta button:active,
.section.hero .cta a:active {
  background: rgba(17, 24, 39, 0.78) !important;
}
/* === End v18 === */


/* === v19: Lighten hero CTA buttons more === */
.section.hero .btn,
.section.hero a.btn,
.section.hero .button,
.section.hero a.button,
.section.hero .cta button,
.section.hero .cta a {
  background: rgba(30, 41, 59, 0.4) !important; /* lighter bluish gray */
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.18) !important;
  transition: background 0.2s ease;
}

.section.hero .btn:hover,
.section.hero a.btn:hover,
.section.hero .button:hover,
.section.hero a.button:hover,
.section.hero .cta button:hover,
.section.hero .cta a:hover {
  background: rgba(30, 41, 59, 0.32) !important;
}

.section.hero .btn:active,
.section.hero a.btn:active,
.section.hero .button:active,
.section.hero a.button:active,
.section.hero .cta button:active,
.section.hero .cta a:active {
  background: rgba(30, 41, 59, 0.46) !important;
}
/* === End v19 === */


/* === v20: Change hero CTA buttons to gray background === */
.section.hero .btn,
.section.hero a.btn,
.section.hero .button,
.section.hero a.button,
.section.hero .cta button,
.section.hero .cta a {
  background: #6b7280 !important; /* neutral gray tone */
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  transition: background 0.25s ease;
}

.section.hero .btn:hover,
.section.hero a.btn:hover,
.section.hero .button:hover,
.section.hero a.button:hover,
.section.hero .cta button:hover,
.section.hero .cta a:hover {
  background: #9ca3af !important; /* lighter on hover */
}

.section.hero .btn:active,
.section.hero a.btn:active,
.section.hero .button:active,
.section.hero a.button:active,
.section.hero .cta button:active,
.section.hero .cta a:active {
  background: #4b5563 !important; /* slightly darker on click */
}
/* === End v20 === */


/* === v21: Force gray hero CTA buttons in header.hero-banner === */
header.hero-banner .btn,
header.hero-banner a.btn {
  background: #9ca3af !important;         /* gray-400 */
  background-image: none !important;       /* remove any gradient */
  color: #111827 !important;               /* slate-900 text for better contrast on gray */
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

header.hero-banner .btn:hover,
header.hero-banner a.btn:hover {
  background: #cbd5e1 !important;          /* slate-300 */
  color: #0b1220 !important;
}

header.hero-banner .btn:active,
header.hero-banner a.btn:active {
  background: #6b7280 !important;          /* gray-500 */
  color: #fff !important;
}
/* === End v21 === */


/* === Mobile hamburger & drawer nav (v51) === */
html, body { max-width:100%; overflow-x:hidden; }
.hamburger{
  display:none;position:relative;width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);cursor:pointer
}
.hamburger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:1px;
  transition:transform .25s ease,opacity .2s ease}
.hamburger span:nth-child(1){top:13px}.hamburger span:nth-child(2){top:20px}.hamburger span:nth-child(3){top:27px}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center;z-index:1002}
  /* drawer */
  #site-nav{
    position:fixed; top:0; right:0; bottom:0; width:min(82vw,360px);
    padding:88px 20px 24px; background:rgba(19,24,29,.96); box-shadow:-20px 0 40px rgba(0,0,0,.35);
    transform:translateX(110%); transition:transform .28s ease; z-index:1001; overflow-y:auto;
    display:flex; flex-direction:column; gap:14px !important;
  }
  #site-nav a, #site-nav button, #site-nav .pill, #site-nav select{
    display:block; padding:14px 12px; border-radius:12px; background:transparent !important;
    border:1px solid rgba(255,255,255,.08) !important; color:#eaf2ff !important; text-align:left; font-size:16px;
  }
  .nav .nav-inner{position:relative}
  body.nav-open #site-nav{ transform:translateX(0) !important; }
  .nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.42); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1000}
  .nav-open .nav-backdrop{opacity:1; pointer-events:auto}
  .no-scroll{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  #site-nav,.nav-backdrop,.hamburger span{transition:none!important}
}


/* === v52: force menu items visible in drawer & keep language switch visible === */
@media (max-width:900px){
  /* Ensure the drawer itself isn't hidden by legacy rules */
  #site-nav{ display:flex !important; visibility:visible !important; opacity:1 !important; }
  /* Make sure all children are stacked and clickable */
  #site-nav > *{ display:block !important; visibility:visible !important; opacity:1 !important; }
  #site-nav a, #site-nav button, #site-nav .pill{ pointer-events:auto !important; }
  /* Some themes hide nav via transform/rotate for vertical tabs; neutralize in drawer */
  #site-nav *{ transform:none !important; writing-mode:horizontal-tb !important; }
  /* Language switch */
  #site-nav select{ appearance:auto; -webkit-appearance:menulist; color:#eaf2ff !important; background:#0f1720 !important; border:1px solid rgba(255,255,255,.18) !important; }
}


/* === v53: body-level drawer to avoid clipping by transformed/overflow header === */
@media (max-width:900px){
  #site-nav.drawer-nav{
    position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important;
    left:auto !important; width:min(82vw,360px) !important;
    padding:88px 20px 24px; background:rgba(19,24,29,.96);
    box-shadow:-20px 0 40px rgba(0,0,0,.35);
    transform:translateX(110%); transition:transform .28s ease; z-index:1001;
    overflow-y:auto; display:flex !important; flex-direction:column; gap:14px !important;
    border-radius:0 !important; clip-path:none !important;
  }
  body.nav-open #site-nav.drawer-nav{ transform:translateX(0) !important; }
  /* ensure items readable */
  #site-nav.drawer-nav a, #site-nav.drawer-nav button, #site-nav.drawer-nav .pill, #site-nav.drawer-nav select{
    display:block !important; padding:14px 12px; border-radius:12px; background:transparent !important;
    border:1px solid rgba(255,255,255,.12) !important; color:#eaf2ff !important; text-align:left; font-size:16px;
    pointer-events:auto !important; opacity:1 !important; visibility:visible !important;
  }
  #site-nav.drawer-nav *{ transform:none !important; writing-mode:horizontal-tb !important; }
  /* ensure language select looks good */
  #site-nav.drawer-nav select{ appearance:auto; -webkit-appearance:menulist; background:#0f1720 !important; }
  /* hide any desktop-only separators that were vertical */
  #site-nav.drawer-nav .vertical-divider{ display:none !important; }
}


/* === v54: self-contained body-level mobile drawer (one-shot robust) === */
html, body { max-width:100%; overflow-x:hidden; }

.hamburger{
  display:none; position:relative; width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.30);
  cursor:pointer; align-items:center; justify-content:center;
}
.hamburger span{position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:1px;
  transition:transform .25s ease,opacity .2s ease}
.hamburger span:nth-child(1){top:13px}.hamburger span:nth-child(2){top:20px}.hamburger span:nth-child(3){top:27px}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 900px){
  .hamburger{ display:inline-flex; z-index: 10005; }

  /* Drawer container appended to body */
  .mobile-drawer{
    position: fixed; top:0; right:0; bottom:0; width:min(82vw, 360px);
    background: rgba(19,24,29,.98);
    box-shadow: -24px 0 48px rgba(0,0,0,.5);
    transform: translateX(110%);
    transition: transform .28s ease;
    z-index: 10003;
    display:flex; flex-direction:column; padding:88px 20px 24px; gap:14px; overflow-y:auto;
  }
  .mobile-drawer.open{ transform: translateX(0); }

  .mobile-drawer a, .mobile-drawer button, .mobile-drawer .pill, .mobile-drawer select{
    display:block !important; padding:14px 12px; border-radius:12px;
    text-align:left; font-size:16px; color:#eaf2ff !important;
    background:transparent !important; border:1px solid rgba(255,255,255,.12) !important;
    pointer-events:auto !important; visibility:visible !important; opacity:1 !important;
  }
  .mobile-drawer *{ transform:none !important; writing-mode:horizontal-tb !important; }

  /* Language select explicit styling */
  .mobile-drawer select{
    appearance:auto; -webkit-appearance:menulist;
    background:#0f1720 !important;
  }

  /* Backdrop */
  .drawer-backdrop{
    position: fixed; inset:0;
    background: rgba(0,0,0,.42);
    opacity:0; pointer-events:none;
    transition: opacity .28s ease;
    z-index: 10002;
  }
  .drawer-backdrop.show{ opacity:1; pointer-events:auto; }

  /* Prevent body scroll when drawer open */
  .no-scroll{ overflow:hidden; }
}

@media (prefers-reduced-motion: reduce){
  .mobile-drawer, .drawer-backdrop, .hamburger span{ transition:none !important; }
}