/* ===== THEME ===== */

/* --- v4.4.1 overflow & viewport fixes --- */
:root{ --vw: 100vw; }
@supports (width: 100dvw){
  :root{ --vw: 100dvw; }
}
html, body{ width: var(--vw); overflow-x: hidden; }

/* Constrain any element from exceeding viewport width */
img, video, canvas, svg{ max-width: 100%; height: auto; }
section, .container, .divider.wave, .nav.open .nav-links{ max-width: var(--vw); }

/* Ensure absolutely positioned hero BG never creates horizontal scroll */
.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(560px, 92svh, 880px);
  padding:0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'>  <defs>    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>      <stop offset='0%' stop-color='%232c4f87' stop-opacity='0.28'/>      <stop offset='100%' stop-color='%232c4f87' stop-opacity='0.12'/>    </linearGradient>  </defs>  <rect width='100%' height='100%' fill='transparent'/>  <g fill='none' stroke='url(%23g)' stroke-width='1'>    <path d='M-60 80 C 140 20, 360 140, 560 80 S 1060 100, 1500 60' />    <path d='M-60 160 C 160 100, 380 220, 580 160 S 1080 180, 1500 140' />    <path d='M-60 240 C 180 180, 400 300, 600 240 S 1100 260, 1500 220' />    <path d='M-60 320 C 200 260, 420 380, 620 320 S 1120 340, 1500 300' />    <path d='M-60 400 C 220 340, 440 460, 640 400 S 1140 420, 1500 380' />    <path d='M-60 480 C 240 420, 460 540, 660 480 S 1160 500, 1500 460' />    <path d='M-60 560 C 260 500, 480 620, 680 560 S 1180 580, 1500 540' />    <path d='M-60 640 C 280 580, 500 700, 700 640 S 1200 660, 1500 620' />    <path d='M-60 720 C 300 660, 520 780, 720 720 S 1220 740, 1500 700' />    <path d='M-60 800 C 320 740, 540 860, 740 800 S 1240 820, 1500 780' />  </g></svg>");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:160px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 85%);
}
.dotgrid, .aurora{ contain: paint; will-change: transform; }
.aurora{ inset: -5% auto auto -5%; } /* keep blobs inside hero painting area */

/* Nav dropdown: prevent subpixel overflow on mobile */
@media (max-width: 640px){
  .nav.open .nav-links{ width: calc(var(--vw) - 2rem); left: 50%; transform: translateX(-50%); }
}

/* Safe fallback for browsers without 'overflow: clip' */
@supports not (overflow: clip){
  .hero{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(560px, 92svh, 880px);
  padding:0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'>  <defs>    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>      <stop offset='0%' stop-color='%232c4f87' stop-opacity='0.28'/>      <stop offset='100%' stop-color='%232c4f87' stop-opacity='0.12'/>    </linearGradient>  </defs>  <rect width='100%' height='100%' fill='transparent'/>  <g fill='none' stroke='url(%23g)' stroke-width='1'>    <path d='M-60 80 C 140 20, 360 140, 560 80 S 1060 100, 1500 60' />    <path d='M-60 160 C 160 100, 380 220, 580 160 S 1080 180, 1500 140' />    <path d='M-60 240 C 180 180, 400 300, 600 240 S 1100 260, 1500 220' />    <path d='M-60 320 C 200 260, 420 380, 620 320 S 1120 340, 1500 300' />    <path d='M-60 400 C 220 340, 440 460, 640 400 S 1140 420, 1500 380' />    <path d='M-60 480 C 240 420, 460 540, 660 480 S 1160 500, 1500 460' />    <path d='M-60 560 C 260 500, 480 620, 680 560 S 1180 580, 1500 540' />    <path d='M-60 640 C 280 580, 500 700, 700 640 S 1200 660, 1500 620' />    <path d='M-60 720 C 300 660, 520 780, 720 720 S 1220 740, 1500 700' />    <path d='M-60 800 C 320 740, 540 860, 740 800 S 1240 820, 1500 780' />  </g></svg>");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:160px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 85%);
}
}

html{scroll-behavior:smooth}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff; --fg:#0d0d0d; --muted:#555;
  --brand:#2c4f87; --brand-weak:#cdd6ea;
  --surface:#fafafa; --line:#e6eaf3;
  --glass-bg:rgba(255,255,255,.6); --glass-br:12px; --glass-blur:14px;

  /* Shadows OFF (per request) */
  --shadow-1:none;
  --shadow-2:none;
  --shadow-brand:none;
  --shadow-brand-strong:none;
}
.theme-dark{
  --bg:#0b0f14; --fg:#e9eef6; --muted:#b6c0cf;
  --surface:#111822; --line:#213048;
  --glass-bg:rgba(17,24,34,.55);

  --shadow-1:none;
  --shadow-2:none;
  --shadow-brand:none;
  --shadow-brand-strong:none;
}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;padding-bottom:140px}
img{display:block;max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;padding:0;margin:0;cursor:pointer;line-height:1}
.icon-btn:hover{filter:brightness(.96)}
.page-enter{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Bottom Dock Navbar */
.header{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(96%,1180px);
  bottom:12px;
  z-index:999;
  background:var(--surface);
  border:1px solid var(--brand);
  border-radius:22px; /* bigger radius */
  --dock-h:58px;
  height:var(--dock-h);
  padding:0 .9rem; /* fixed vertical padding = 0 to lock height */
  display:flex;
  align-items:center;
}
.progressbar{position:absolute;left:12px;right:12px;top:-6px;height:4px;background:rgba(44,79,135,.15);border-radius:999px;overflow:hidden}
.progressbar span{display:block;height:100%;width:0%;background:var(--brand)}
.nav-container{display:flex;justify-content:space-between;align-items:center;width:100%}
.header .container{max-width:none;width:100%;padding:0}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.1rem;color:var(--brand)}
.logo img{width:28px;height:28px}
.nav{display:flex;align-items:center;margin-left:auto;gap:.6rem}
.nav .nav-links{display:flex;align-items:center;gap:1rem}
.nav a{padding:.45rem .65rem;border-radius:8px;text-decoration:none;color:var(--fg);font-weight:600;border:1px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a.active{border-color:var(--brand);color:var(--brand)}
#language-switcher{padding:.4rem .6rem;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--fg)}

/* Back to top */
#to-top{position:fixed;right:16px;bottom:100px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:.6rem .7rem;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;transform:translateY(6px);z-index:998}
#to-top.show{opacity:1;pointer-events:auto;transform:none}

/* Hero */

/* --- v4.4.2 hero line pattern & safe vh --- */
/* Safe viewport height to avoid URL bar resize glitches */
:root{
  --svh: 100vh;
}
@supports (height: 100dvh){
  :root{ --svh: 100dvh; }
}
@supports (height: 100svh){
  :root{ --svh: 100svh; }
}

/* Robust hero background via ::before */
.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(560px, 92svh, 880px);
  padding:0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'>  <defs>    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>      <stop offset='0%' stop-color='%232c4f87' stop-opacity='0.28'/>      <stop offset='100%' stop-color='%232c4f87' stop-opacity='0.12'/>    </linearGradient>  </defs>  <rect width='100%' height='100%' fill='transparent'/>  <g fill='none' stroke='url(%23g)' stroke-width='1'>    <path d='M-60 80 C 140 20, 360 140, 560 80 S 1060 100, 1500 60' />    <path d='M-60 160 C 160 100, 380 220, 580 160 S 1080 180, 1500 140' />    <path d='M-60 240 C 180 180, 400 300, 600 240 S 1100 260, 1500 220' />    <path d='M-60 320 C 200 260, 420 380, 620 320 S 1120 340, 1500 300' />    <path d='M-60 400 C 220 340, 440 460, 640 400 S 1140 420, 1500 380' />    <path d='M-60 480 C 240 420, 460 540, 660 480 S 1160 500, 1500 460' />    <path d='M-60 560 C 260 500, 480 620, 680 560 S 1180 580, 1500 540' />    <path d='M-60 640 C 280 580, 500 700, 700 640 S 1200 660, 1500 620' />    <path d='M-60 720 C 300 660, 520 780, 720 720 S 1220 740, 1500 700' />    <path d='M-60 800 C 320 740, 540 860, 740 800 S 1240 820, 1500 780' />  </g></svg>");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:160px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 85%);
}


/* Soft radial vignette to blend edges */


.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(560px, 92svh, 880px);
  padding:0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'>  <defs>    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>      <stop offset='0%' stop-color='%232c4f87' stop-opacity='0.28'/>      <stop offset='100%' stop-color='%232c4f87' stop-opacity='0.12'/>    </linearGradient>  </defs>  <rect width='100%' height='100%' fill='transparent'/>  <g fill='none' stroke='url(%23g)' stroke-width='1'>    <path d='M-60 80 C 140 20, 360 140, 560 80 S 1060 100, 1500 60' />    <path d='M-60 160 C 160 100, 380 220, 580 160 S 1080 180, 1500 140' />    <path d='M-60 240 C 180 180, 400 300, 600 240 S 1100 260, 1500 220' />    <path d='M-60 320 C 200 260, 420 380, 620 320 S 1120 340, 1500 300' />    <path d='M-60 400 C 220 340, 440 460, 640 400 S 1140 420, 1500 380' />    <path d='M-60 480 C 240 420, 460 540, 660 480 S 1160 500, 1500 460' />    <path d='M-60 560 C 260 500, 480 620, 680 560 S 1180 580, 1500 540' />    <path d='M-60 640 C 280 580, 500 700, 700 640 S 1200 660, 1500 620' />    <path d='M-60 720 C 300 660, 520 780, 720 720 S 1220 740, 1500 700' />    <path d='M-60 800 C 320 740, 540 860, 740 800 S 1240 820, 1500 780' />  </g></svg>");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:160px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 85%);
}
.pattern-bg{background:radial-gradient(1200px 600px at -10% -10%, rgba(44,79,135,.10), transparent 60%),radial-gradient(1000px 500px at 110% 110%, rgba(44,79,135,.08), transparent 60%)}

/* (aurora & dotgrid removed in v4.4.2) */
.grain{display:none} /* removed to keep hero clean */

/* Titles / text */
.hero-title{font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:.3px;color:var(--brand)}
.hero-subtitle{margin-top:1rem;font-size:clamp(1rem,1.9vw,1.25rem);color:var(--muted)}
.typed-line{margin-top:.6rem;min-height:1.4em;color:var(--fg);font-weight:800;letter-spacing:.2px}
.cursor{display:inline-block;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

.hero-chips{display:flex;gap:.5rem;justify-content:center;margin:1.25rem 0}
.chip{border:1px solid var(--line);background:rgba(44,79,135,.07);color:var(--brand);padding:.35rem .65rem;border-radius:999px;font-size:.85rem;font-weight:700}
.hero-ctas{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}
.btn{display:inline-block;padding:.9rem 1.3rem;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid transparent;position:relative;overflow:hidden;transition:transform .12s ease}
.btn-primary{background:var(--brand);color:#fff}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand-weak)}
.btn-ghost:hover{background:rgba(44,79,135,.06)}

/* Glass */
.glass{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:12px}

/* Wave dividers */
.divider.wave{position:absolute;left:0;right:0;height:80px;pointer-events:none;background-repeat:no-repeat;background-size:cover}
.divider.wave.bottom{bottom:-1px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"><path fill="%23ffffff" d="M0,64L80,69.3C160,75,320,85,480,96C640,107,800,117,960,122.7C1120,128,1280,128,1360,128L1440,128L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"/></svg>')}
.theme-dark .divider.wave.bottom{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"><path fill="%230b0f14" d="M0,64L80,69.3C160,75,320,85,480,96C640,107,800,117,960,122.7C1120,128,1280,128,1360,128L1440,128L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0,320,0,160,0,80,0L0,0Z"/></svg>')}
.divider.wave.top{top:-1px;transform:rotate(180deg);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"><path fill="%23ffffff" d="M0,64L80,69.3C160,75,320,85,480,96C640,107,800,117,960,122.7C1120,128,1280,128,1360,128L1440,128L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0,320,0,160,0,80,0L0,0Z"/></svg>')}
.theme-dark .divider.wave.top{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"><path fill="%230b0f14" d="M0,64L80,69.3C160,75,320,85,480,96C640,107,800,117,960,122.7C1120,128,1280,128,1360,128L1440,128L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0,320,0,160,0,80,0L0,0Z"/></svg>')}

/* Spacing & titles */
section.reveal:not(.hero):not(.product-section):not(.cta){ padding: 6rem 0; }
.section-title{text-align:center;font-size:clamp(1.6rem,3vw,2rem);margin-bottom:2rem}

/* Micro animations */
.micro-animate .anim-item{opacity:1;transform:none}
.micro-animate .anim-item.show{opacity:1;transform:none}

/* Grid & cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{padding:1.5rem}
.card .icon{font-size:1.4rem;margin-bottom:.5rem}
.card h3{margin-bottom:.35rem}
.card p{color:var(--muted)}

/* Stats */
.stat .count{font-size:2rem;font-weight:800;color:var(--brand);margin:.25rem 0}
.price .price-tag{font-size:1.8rem;font-weight:800}

/* Product */
.product-section{min-height:100vh;display:flex;align-items:center;position:relative;padding:8rem 0 12rem}
.product-card{max-width:820px;margin:0 auto;text-align:center;padding:2rem}
.product-mock{margin-bottom:1.25rem;perspective:1000px}
.anim-tilt .mock-frame{transition:transform .2s ease}
.anim-tilt:hover .mock-frame{transform:rotateX(8deg) rotateY(-8deg)}
.mock-frame{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);height:280px;background:linear-gradient(180deg, #f8faff 0%, #eef3ff 100%)}
.mock-gradient{position:absolute;inset:0;background:conic-gradient(from 180deg at 50% 50%, rgba(44,79,135,.15), transparent 40%, rgba(44,79,135,.18))}
.mock-label{position:absolute;left:12px;bottom:12px;background:var(--brand);color:#fff;font-weight:800;font-size:.85rem;padding:.45rem .7rem;border-radius:10px}
.product-title{font-size:1.9rem;margin:.5rem 0}
.product-description{color:var(--muted);margin-bottom:1.1rem}
.product-btn{background:var(--brand);color:#fff;padding:.85rem 1.3rem;border-radius:10px;text-decoration:none;font-weight:800;display:inline-block}

/* Testimonials carousel */
.testimonials .carousel{position:relative;overflow:hidden;padding:0}
.carousel-viewport{overflow:hidden;width:100%}
.carousel-track{display:flex;gap:0;transition:transform .4s ease;will-change:transform}
.slide{min-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.25rem}
.slide .avatar{border-radius:50%;margin-bottom:.75rem}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:1px solid var(--line);border-radius:10px;padding:.3rem .6rem;cursor:pointer}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}

/* Roadmap */
.roadmap-list{list-style:none;display:grid;gap:1rem}

/* Newsletter */
.form{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:1rem;border-radius:12px}
.form input{padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;min-width:260px;background:transparent;color:inherit}

/* Blog */
.blog .teaser{margin-bottom:.9rem}
.blog .read-btn{margin-top:.45rem}

/* CTA */
.cta{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--brand);color:#fff;padding:8rem 0 12rem}
.cta h2{ margin-bottom: 1.25rem; }
.cta .cta-btn{background:#fff;color:var(--brand);padding:.9rem 1.3rem;border-radius:12px;text-decoration:none;font-weight:900}

/* Social proof */
.social-proof .trusted{text-align:center;font-weight:800;color:var(--brand);margin-bottom:1rem}
.social-proof .logos{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;opacity:.85}
.social-proof .logos span{border:1px dashed var(--line);padding:.45rem .75rem;border-radius:999px;font-size:.9rem}

/* Footer */
.footer{background:#0d0d0d;color:#fff;padding:2rem 0}
.footer-content{display:flex;flex-direction:column;align-items:center;gap:1rem}
.footer .mission{opacity:.85}
.social-icons{display:flex;gap:1rem}
.social-icons img{width:24px;height:24px;filter:invert(1)}

/* Reveal */
.reveal{opacity:1;transform:none}
.reveal.show{opacity:1;transform:none}

/* Reduced motion: pause aurora */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .aurora{animation:none !important}
}

/* Mobile */
@media (max-width: 640px) {
  .header{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(96%,1180px);
  bottom:12px;
  z-index:999;
  background:var(--surface);
  border:1px solid var(--brand);
  border-radius:22px; /* bigger radius */
  --dock-h:58px;
  height:var(--dock-h);
  padding:0 .9rem; /* fixed vertical padding = 0 to lock height */
  display:flex;
  align-items:center;
}
  .logo img{ width:24px; height:24px; }
  .logo span{ font-size:.95rem; }

  #nav-toggle, #theme-toggle { display:inline-flex; }
  .nav .nav-links { display:none; }
  .nav.open .nav-links {
    display:flex; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + 64px); width: 96%; padding: .75rem; gap: .6rem; flex-wrap: wrap;
    justify-content: space-between; z-index: 1000;
    background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--line); border-radius: 12px;
  }
  .nav.open .nav-links a { padding:.5rem .6rem; font-size:.95rem; border-radius:8px; border:1px solid transparent; }
  .nav.open .nav-links a:active { border-color: var(--brand-weak); }

  .grid-3{grid-template-columns:1fr}
  .hero-title { font-size: clamp(2rem, 7vw, 3rem); }
  .hero-subtitle { font-size: .95rem; }
  .chip { font-size: .8rem; padding: .3rem .55rem; }
  .btn { padding: .8rem 1.1rem; border-radius: 10px; }
  .product-card { padding: 1.25rem; }
  .mock-frame { height: 220px; }

  .form{ flex-direction: column; align-items: stretch; }
  .form input{ min-width: 0; width: 100%; }
  .form button{ width: 100%; }

  .slide{ padding:1rem .5rem; }
  .divider.wave{ height:60px; }
}

/* Desktop */
@media (min-width: 641px) {
  .nav .nav-links { display:flex; gap:1rem; }
  #nav-toggle { display:none; }
}

.theme-dark .glass{background:rgba(17,24,34,.55)}

/* v4.4.5 Aurora background (no markup) */
.hero::before, 


@keyframes aur1{from{transform:translate(0,0) scale(1)}to{transform:translate(4%, -3%) scale(1.05)}}
@keyframes aur2{from{transform:translate(0,0) scale(1)}to{transform:translate(-3%, 3%) scale(1.06)}}
@media (prefers-reduced-motion: reduce){
  .hero::before, 
}

/* v4.4.6 soft fade at bottom of hero to page background */
.hero .inner-pad{padding:6rem 0 7rem} /* optional wrapper if needed */

.theme-dark 

/* Hamburger (3 bars to X) */
.hamburger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:36px; border-radius:10px; position:relative}
.hamburger .bar{display:block; width:22px; height:2px; background:currentColor; border-radius:2px; position:absolute; transition:transform .25s ease, opacity .2s ease}
.hamburger .bar:nth-child(1){transform:translateY(-6px)}
.hamburger .bar:nth-child(2){transform:translateY(0)}
.hamburger .bar:nth-child(3){transform:translateY(6px)}
.nav.open .hamburger .bar:nth-child(1){transform:rotate(45deg)}
.nav.open .hamburger .bar:nth-child(2){opacity:0}
.nav.open .hamburger .bar:nth-child(3){transform:rotate(-45deg)}

/* Mobile panel polish */
@media (max-width: 768px){
  .nav-links{ width:calc(var(--vw) - 2rem);
    padding:.85rem; gap:.65rem; flex-wrap:wrap; justify-content:space-between;
    background:#fff; border:1px solid var(--line); border-radius:14px; 
    box-shadow:none; opacity:0; transition:opacity .2s ease, transform .2s ease;
  }
  .theme-dark .nav-links{ background:#0f141c; }
  .nav.open .nav-links{ display:flex; opacity:1; transform:translateX(-50%) translateY(0) }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.25); display:none; }
  .nav.open ~ .nav-backdrop{ display:block; }
}

/* Keep bottom dock width & look */
.header{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(96%,1180px);
  bottom:12px;
  z-index:999;
  background:var(--surface);
  border:1px solid var(--brand);
  border-radius:22px; /* bigger radius */
  --dock-h:58px;
  height:var(--dock-h);
  padding:0 .9rem; /* fixed vertical padding = 0 to lock height */
  display:flex;
  align-items:center;
}

@media (max-width: 768px){
  .header{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(96%,1180px);
  bottom:12px;
  z-index:999;
  background:var(--surface);
  border:1px solid var(--brand);
  border-radius:22px; /* bigger radius */
  --dock-h:58px;
  height:var(--dock-h);
  padding:0 .9rem; /* fixed vertical padding = 0 to lock height */
  display:flex;
  align-items:center;
}
}


/* v4.4.8 — kill any space above hero content */
section.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(560px, 92svh, 880px);
  padding:0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'>  <defs>    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>      <stop offset='0%' stop-color='%232c4f87' stop-opacity='0.28'/>      <stop offset='100%' stop-color='%232c4f87' stop-opacity='0.12'/>    </linearGradient>  </defs>  <rect width='100%' height='100%' fill='transparent'/>  <g fill='none' stroke='url(%23g)' stroke-width='1'>    <path d='M-60 80 C 140 20, 360 140, 560 80 S 1060 100, 1500 60' />    <path d='M-60 160 C 160 100, 380 220, 580 160 S 1080 180, 1500 140' />    <path d='M-60 240 C 180 180, 400 300, 600 240 S 1100 260, 1500 220' />    <path d='M-60 320 C 200 260, 420 380, 620 320 S 1120 340, 1500 300' />    <path d='M-60 400 C 220 340, 440 460, 640 400 S 1140 420, 1500 380' />    <path d='M-60 480 C 240 420, 460 540, 660 480 S 1160 500, 1500 460' />    <path d='M-60 560 C 260 500, 480 620, 680 560 S 1180 580, 1500 540' />    <path d='M-60 640 C 280 580, 500 700, 700 640 S 1200 660, 1500 620' />    <path d='M-60 720 C 300 660, 520 780, 720 720 S 1220 740, 1500 700' />    <path d='M-60 800 C 320 740, 540 860, 740 800 S 1240 820, 1500 780' />  </g></svg>");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:160px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg) 85%);
}
.hero > .container{ padding-top:0 !important; }
.hero > *:first-child{ margin-top:0 !important; }
.hero .hero-inner{ margin-top:0 !important; padding-top:0 !important; }
.hero h1.hero-title{ margin-top:0 !important; }
.hero p.hero-subtitle{ margin-top:.6rem; } /* keep a little breathing space under title */


/* v4.5.1 — navbar icon buttons spacing & light theme clarity */
.nav{display:flex;align-items:center;gap:.6rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;padding:0;margin:0;cursor:pointer;line-height:1}
/* Fallback in case some browsers ignore gap for buttons */
.nav .icon-btn + .icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;padding:0;margin:0;cursor:pointer;line-height:1}

/* Light theme: give icon buttons a subtle surface so they don't visually "merge" */


.header .container{max-width:none;width:100%;padding:0;height:100%;display:flex;align-items:center}
.nav-container{height:100%}

.nav .icon-btn{margin:0}

#language-switcher{height:38px;line-height:38px;padding:0 .6rem;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit}

.nav a{display:inline-flex;align-items:center;height:38px}

@media (max-width:768px){
  .nav-links{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(12px + var(--dock-h) + 8px);
    width:calc(var(--vw) - 2rem);
    display:none; padding:.85rem; gap:.65rem; flex-wrap:wrap; justify-content:space-between;
    background:#fff; border:1px solid var(--line); border-radius:14px; opacity:0; 
    transition:opacity .2s ease, transform .2s ease;
  }
  .theme-dark .nav-links{ background:#0f141c; }
  .nav.open .nav-links{ display:flex; opacity:1; transform:translateX(-50%) }
}


/* WHY WELTANCE */
.why { padding: 6rem 0; position: relative; }
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.why-card { padding: 1.5rem; }
.why-card h3 { margin-bottom: .5rem; }
.why-card p { color: var(--muted); }
.why-list, .why-steps { margin-top: .5rem; display: grid; gap: .35rem; padding-left: 1rem; }
.badge-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .9rem; }
.badge { border: 1px solid var(--line); background: rgba(44,79,135,.07); color: var(--brand); padding: .35rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.why-mission { margin-top: .25rem; font-weight: 600; }
@media (max-width: 640px){ .why-grid { grid-template-columns: 1fr; } }


/* Footer refresh */
.footer{background:#0d0d0d;color:#fff;padding:2.2rem 0;margin-top:4rem}
.footer .mini-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:.5rem 0}
.footer .mini-links a{color:#fff;opacity:.8;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.2)}
.footer .mini-links a:hover{opacity:1}
.footer .contact a{color:#fff}
.footer .copyright{opacity:.7;font-size:.9rem}


/* WHY (Conversion-Focused) */
.why-convert{ padding:5rem 0 6rem; }
.why-head{ text-align:center; max-width:860px; margin:0 auto 1.4rem; }
.why-title{ font-size: clamp(1.8rem, 3.2vw, 2.3rem); color: var(--fg); letter-spacing:.2px; }
.why-sub{ color: var(--muted); margin-top:.4rem; font-size: clamp(1rem, 1.6vw, 1.1rem); }
.why-benefits .why-box{ padding:1.25rem 1.25rem; border-radius:12px; }
.why-kicker{ font-size:.78rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color: var(--brand); opacity:.9; margin-bottom:.35rem; }
.why-box h3{ font-size:1.15rem; margin:.15rem 0 .35rem; }
.why-box p{ color: var(--muted); }
.why-proof{ margin:1.1rem auto 0; border-radius:12px; padding:.6rem .9rem; }
.why-proof ul{ display:flex; flex-wrap:wrap; gap:1rem 1.2rem; align-items:center; justify-content:center; list-style:none; }
.why-proof li{ display:flex; gap:.45rem; align-items:baseline; }
.why-proof strong{ font-size:1.05rem; color: var(--brand); }
.why-guarantee{ display:flex; justify-content:center; margin:1rem 0 .2rem; }
.badge-ghost{ border:1px dashed var(--line); padding:.4rem .65rem; border-radius:999px; font-weight:700; color:var(--fg); background:transparent; }
.why-ctas{ display:flex; gap:.6rem; justify-content:center; margin-top:.6rem; }
@media (max-width: 640px){
  .why-convert{ padding:3.5rem 0 4rem; }
  .why-box{ padding:1rem; }
  .why-proof ul{ gap:.6rem .8rem; }
}


/* Language select visibility */
#language-switcher{ background: var(--surface) !important; color: var(--fg) !important; border:1px solid var(--line); }
#language-switcher option{ color: var(--fg); background: var(--surface); }


/* WHY (Conversion-Focused) v3 */
.why-convert{ padding:5rem 0 6rem; }
.why-head{ text-align:center; max-width:860px; margin:0 auto 1.2rem; }
.why-title{ font-size: clamp(1.8rem, 3.2vw, 2.3rem); color: var(--fg); letter-spacing:.2px; }
.why-sub{ color: var(--muted); margin-top:.35rem; font-size: clamp(1rem, 1.6vw, 1.1rem); }
.why-benefits .why-box{ padding:1.25rem 1.25rem; border-radius:12px; display:flex; flex-direction:column; justify-content:flex-start; min-height: 160px; }
.why-kicker{ font-size:.78rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color: var(--brand); opacity:.95; margin-bottom:.35rem; }
.why-box h3{ font-size:1.15rem; margin:.15rem 0 .35rem; }
.why-box p{ color: var(--muted); margin-top:.1rem; }
.why-proof{ margin:1rem auto 0; border-radius:12px; padding:.6rem .9rem; }
.why-proof ul{ display:flex; flex-wrap:wrap; gap:1rem 1.2rem; align-items:center; justify-content:center; list-style:none; }
.why-proof li{ display:flex; gap:.45rem; align-items:baseline; }
.why-proof strong{ font-size:1.05rem; color: var(--brand); }
.why-guarantee{ display:flex; justify-content:center; margin:1rem 0 .2rem; }
.badge-ghost{ border:1px dashed var(--line); padding:.4rem .65rem; border-radius:999px; font-weight:700; color:var(--fg); background:transparent; }
.why-ctas{ display:flex; gap:.6rem; justify-content:center; margin-top:.6rem; }
@media (max-width: 640px){
  .why-convert{ padding:3.5rem 0 4rem; }
  .why-box{ padding:1rem; min-height: auto; }
  .why-proof ul{ gap:.6rem .8rem; }
}
/* Language select visibility (reinforced) */
#language-switcher{ background: var(--surface) !important; color: var(--fg) !important; border:1px solid var(--line); }
#language-switcher option{ color: var(--fg); background: var(--surface); }

/* Product cover image fit */
.mock-frame{ position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line); }
.mock-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mock-gradient{ pointer-events:none; }

.form .note{ text-align:center; }

/* === Policies Only (built on latest base) === */
.policies-only{padding:5rem 0 4rem;}
.po-title{font-size:clamp(2rem,5vw,3rem); margin-bottom:1rem; color:var(--brand);}
.po-grid{display:grid; grid-template-columns: 260px 1fr; gap:1.25rem;}
.po-toc{position:sticky; top:96px; align-self:start; border:1px solid var(--line); border-radius:12px; padding:.8rem; background:var(--surface);}
.po-toc-link{display:block; padding:.5rem .6rem; border-radius:8px; text-decoration:none; color:var(--fg); border:1px solid transparent; margin-bottom:.35rem}
.po-toc-link:hover{border-color:var(--line);}
.po-card{border:1px solid var(--line); border-radius:12px; padding:1.1rem; background:var(--surface); overflow:hidden; background-clip:padding-box;}
.po-card + .po-card{margin-top:1rem;}
.po-upd{color:var(--muted); margin:.25rem 0 .6rem;}
.po-list{margin:.5rem 0 0 1.1rem;}
.po-list.bullets{list-style:disc;}
@media (max-width: 900px){ .po-grid{grid-template-columns:1fr;} }


.footer-quick{ text-align:center; margin-top:16px; }
.footer-quick .footer-title{ color:#fff; font-weight:700; margin-bottom:6px; }
.footer-quick .footer-links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.footer-quick .footer-link{ color:#fff; opacity:.92; text-decoration:none; font-weight:700; }
.footer-quick .footer-link:hover{ opacity:1; text-decoration:underline; }
#language-switcher{ background:var(--surface); color:var(--fg); }
#language-switcher option{ color:var(--fg); background:var(--surface); }