*{box-sizing:border-box}
:root{
  --bg: #0b0d12;
  --bg-elev: rgba(255,255,255,.06);
  --text: #e9ecf1;
  --muted:#b9c0cf;
  --border: rgba(255,255,255,.12);
  --accent: #7aa2ff;
  --accent-2:#9b8cff;
  --radius:16px;
  --gap: clamp(14px, 2.2vw, 28px);
  --container: min(1120px, 92vw);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9fc;
    --bg-elev: rgba(255,255,255,.8);
    --text:#0e1320;
    --muted:#475069;
    --border: rgba(20,24,40,.1);
    --shadow: 0 12px 34px rgba(0,0,0,.08);
  }
}

html{scroll-behavior:smooth}
html,body{margin:0;height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Noto Sans', Arial;
  line-height:1.6; color:var(--text); background:var(--bg);
  background-image: radial-gradient(60vw 60vw at 80% -10%, rgba(122,162,255,.18), transparent),
                    radial-gradient(50vw 50vw at -10% 40%, rgba(155,140,255,.18), transparent);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{width:var(--container); margin-inline:auto; padding-inline: clamp(10px, 1.2vw, 16px)}
.grid{display:grid; gap:var(--gap); grid-template-columns: 1.15fr .85fr; align-items:center}
.grid-2{display:grid; gap:var(--gap); grid-template-columns:1fr 1fr}
.section{padding: clamp(56px, 8vh, 120px) 0}
.section.alt{background:transparent}

h1{font-size: clamp(30px, 4.6vw, 56px); line-height:1.1; margin:0 0 12px}
h2{font-size: clamp(22px, 3.2vw, 36px); margin:0 0 16px}
h3{margin:8px 0 8px; font-size: clamp(18px, 2.2vw, 22px)}
p{margin: 0 0 12px; color:var(--muted)}

.site-header{position:sticky; top:0; backdrop-filter:saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom:1px solid var(--border); z-index:10}
.site-header .container{display:flex; align-items:center; justify-content:space-between; min-height:68px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.brand img{filter: drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.nav-toggle{display:none}
.menu{display:flex; gap: clamp(8px, 2vw, 22px); list-style:none; margin:0; padding:0; align-items:center}
.btn{display:inline-block; padding:12px 18px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text)}

.theme-toggle{margin-left:12px; border:1px solid var(--border); background:var(--bg-elev);
  backdrop-filter: blur(10px); border-radius:999px; padding:8px 12px; cursor:pointer}

.hero{position:relative; isolation:isolate; padding: clamp(72px, 11vh, 140px) 0}
.hero::after{content:''; position:absolute; inset:10% auto auto 55%; width:40vmax; height:40vmax;
  background: radial-gradient(closest-side, rgba(122,162,255,.22), transparent);
  filter: blur(50px); z-index:-1; opacity:.9}
.hero .card-like{background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:18px}

.badges{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:18px 0 0; list-style:none}
.badges li{border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:14px; background:var(--bg-elev)}

.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:var(--gap); margin-top: 16px}
.card{padding:22px; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  background: var(--bg-elev); backdrop-filter: blur(8px) saturate(120%)}

.checklist{padding-left: 1.2em}
.checklist li{margin:8px 0}
.stat-box{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.stat{font-size: clamp(26px, 5.4vw, 46px); font-weight:800; display:inline-block; min-width:2ch;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

.testimonial, .ref-list{padding:24px; border:1px solid var(--border); background:var(--bg-elev); border-radius:var(--radius); box-shadow:var(--shadow)}
.ref-list{list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:12px}
.ref-list a{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:transparent}
.ref-list a:hover{background:var(--bg-elev)}

.faq{border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin:10px 0; background:var(--bg-elev)}
.faq>summary{cursor:pointer; font-weight:600}
.faq[open]{box-shadow:var(--shadow)}

.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{margin:8px 0}
.contact-form{display:grid; gap:10px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); font:inherit; background:var(--bg-elev); color:var(--text)
}
.contact-form button{justify-self:start}

.site-footer{border-top:1px solid var(--border); padding:22px 0; font-size:14px; color:var(--muted)}

@media (max-width: 900px){
  .grid, .grid-2{grid-template-columns:1fr}
  .nav-toggle{display:inline-block; background:transparent; border:1px solid var(--border); padding:8px 12px; border-radius:8px; color:var(--text)}
  .menu{position:absolute; right:12px; top:68px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:10px; display:none; flex-direction:column; width:min(240px, 90vw)}
  .menu.open{display:flex}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

.logos{align-items:center}
.logos img{display:inline-block; filter: grayscale(100%); opacity:.85; transition: all .2s ease}
.logos a:hover img{filter: none; opacity:1}
.hp{display:none}

.lang-switch{display:flex; gap:8px; align-items:center; margin-left:8px}
.lang-switch a{padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; opacity:.9}
.lang-switch a:hover{opacity:1}

/* --- Ref logos cleanup v9 --- */
.ref-list{list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; padding:16px}
.ref-list li{display:block}
.ref-list a{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg-elev);
  min-height:54px;
  text-decoration:none;
  color:var(--text);
  box-shadow: var(--shadow);
}
.ref-list img{
  max-height:28px; width:auto; height:auto;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:8px;
  padding:6px 8px;
  border:1px solid var(--border);
  filter:none; opacity:1;
}
.ref-list a:hover{transform:translateY(-1px)}
@media (max-width:520px){
  .ref-list{grid-template-columns: 1fr}
}

/* --- v13 header brand tweaks --- */
.brand img{height:52px !important; width:auto}
.brand span{font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.01em}
.site-header .container{min-height:76px}

/* --- v14 Hero logo effect --- */
.hero-logo{
  height: clamp(64px, 10vw, 96px);
  width: auto;
  display: inline-block;
  margin-bottom: 14px;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 10px 30px rgba(123, 145, 255, .25);
  animation: heroPulse 4s ease-in-out infinite;
}
.hero-text.card-like{
  position: relative;
  overflow: hidden;
}
.hero-text.card-like::before{
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 220px;
  background: radial-gradient(120px 120px at 20% 50%, rgba(122,162,255,.35), transparent 70%),
              radial-gradient(160px 160px at 60% 0%, rgba(155,140,255,.28), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}
@keyframes heroPulse{
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 10px 25px rgba(120,140,255,.45)); }
  50% { transform: translateY(-2px); filter: drop-shadow(0 14px 28px rgba(155,140,255,.55)); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo{ animation: none; }
}

/* --- v15 hero logo bigger + gradient animation --- */
.hero-logo{height: clamp(96px, 14vw, 140px); margin-bottom: 18px}
.hero-logo-animated{animation: heroPulse 4s ease-in-out infinite, hueSpin 18s linear infinite}
@keyframes hueSpin{from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)}}
.hero .cta-row{margin-top: 14px}

/* v16: hero wordmark scaling */
.hero-logo{max-width: min(100%, 640px)}

/* --- v17 brand wrap & mobile stacking --- */
.brand{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.brand img{flex:0 0 auto}
.brand span{
  display:block;
  max-width: clamp(140px, 32vw, 260px);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
@media (max-width: 640px){
  .site-header .container{min-height:72px}
  .brand{flex-direction:column; align-items:flex-start; gap:6px}
  .brand span{max-width: 80vw}
}

/* --- v18 brand split + sizing --- */
.brand span.brand-text{
  display:block;
  max-width: clamp(160px, 34vw, 320px);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.brand .brand-main{display:inline}
.brand .brand-tld{display:inline}

@media (max-width: 820px){
  .brand span.brand-text{font-size: clamp(18px, 3.2vw, 24px)}
}

@media (max-width: 640px){
  .brand{flex-direction:column; align-items:flex-start; gap:6px}
  .brand span.brand-text{max-width: 82vw; font-size: clamp(18px, 5vw, 22px)}
  .brand .brand-main{display:block}   /* put ".help" on new line */
  .brand .brand-tld{display:block; margin-top: 1px}
}

/* v19 animations */
.brand .brand-tld{position:relative}
.brand .brand-tld::before{
  content:"";
  position:absolute; left:-0.55em; top:0.55em;
  width:6px; height:6px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(120,140,255,.6);
}
.brand:hover .brand-tld::before{animation: blinkDot 1.6s ease-in-out infinite}
@keyframes blinkDot{0%,100%{opacity:1} 50%{opacity:.35}}

/* button shine */
.btn{position:relative; overflow:hidden}
.btn::after{
  content:""; position:absolute; top:-100%; left:-30%;
  width:40%; height:300%;
  transform: rotate(25deg);
  background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  transition: transform .6s ease;
}
.btn:hover::after{transform: translateX(260%) rotate(25deg)}

/* scroll reveal */
.reveal{opacity:0; transform: translateY(12px); transition: all .6s ease}
.reveal.visible{opacity:1; transform:none}
.cards .card img{max-width:44px; height:auto; margin-bottom:8px}

/* v22: compact header logo */
.brand img{height:32px !important; width:auto; filter:none; box-shadow:none}
.brand{gap:12px}

/* v23: Force light theme (disable dark mode) */
:root{
  --bg:#f7f9fc;
  --bg-elev: rgba(255,255,255,.8);
  --text:#0e1320;
  --muted:#475069;
  --border: rgba(20,24,40,.1);
  --shadow: 0 12px 34px rgba(0,0,0,.08);
}
body{background:var(--bg) !important; color:var(--text) !important}
/* hide any leftover theme toggle styles if CSS remains */
.theme-toggle{display:none !important}

/* v27: brand fallback text style */
.brand .brand-fallback{
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 24px);
}

/* v30: contact link styles */
.contact-link{
  display:inline-block;
  margin:.3rem 0;
  padding:.5rem 1rem;
  border-radius:999px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:500;
  color:var(--text);
  transition:.2s ease;
}
.contact-link:hover{
  background:var(--accent);
  color:#fff;
}

/* v33: footer small line */
.foot-small{font-size: 90%; color: var(--muted)}

/* v41: language switcher */
.lang-switch{
  margin-left: auto;
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: 0.9rem;
}
.lang-switch a{
  color: var(--text);
  text-decoration:none;
  font-weight:500;
}
.lang-switch a:hover{
  text-decoration:underline;
}

/* v42: flags style */
.lang-switch a{
  font-size: 1.2rem;
}

/* v44: flag hover effect */
.lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lang-switch a:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  background: var(--bg-elev);
}
.lang-switch{gap:.6rem}

/* v46: reference logo sizing */
.ref-list img.ref-logo{
  max-height:32px; width:auto; height:auto; object-fit:contain;
}

/* v49: center lang switch between logo and menu */
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
header .brand{margin-right:1rem;}
header .lang-switch{margin:0 2rem;flex-shrink:0;}
header .main-nav{margin-left:auto;}

/* v52: header 3-column layout */
header .container{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
header .brand{grid-column:1; justify-self:start;}
header .lang-switch{grid-column:2; justify-self:center;}
header .main-nav{grid-column:3; justify-self:end;}

/* On small screens, stack logo top, flags below, menu under */
@media(max-width:768px){
  header .container{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    text-align:center;
  }
  header .brand{justify-self:center;}
  header .lang-switch{margin:0.5rem 0;}
  header .main-nav{justify-self:center;}
}