:root{
  --bg: #0b1220;
  --surface: #0f172a;
  --elev: #111827;
  --text: #e5e7eb;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --brand-2:#a78bfa;
  --ring:#93c5fd;
  --ok:#34d399;
  --danger:#f87171;
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at -10% -10%, #172554 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% -20%, #3b0764 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

img{max-width:100%; display:block}
.container{width:min(1100px, 92%); margin-inline:auto;}

a{color:inherit; text-decoration:none}
a.link{color:var(--brand)}
a.link:hover{text-decoration:underline}

.dimmed{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, monospace}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-grid{display:grid; grid-template-columns: 1fr auto; align-items:center; gap:1rem; padding:.8rem 0;}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.brand__logo{filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));}
.brand__text .amp{color:var(--brand)}
.site-nav{display:flex; gap:1rem; align-items:center}
.site-nav a{padding:.5rem .75rem; border-radius:10px;}
.site-nav a:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none; background:none; border:0; padding:.5rem; border-radius:12px}
.nav-toggle__bar{display:block; width:22px; height:2px; background:var(--text); margin:4px 0;}

@media (max-width: 820px){
  .nav-toggle{display:block}
  .site-nav{position:fixed; inset:60px 0 auto 0; background:var(--surface); border-bottom:1px solid rgba(255,255,255,.06);
    transform: translateY(-120%); transition:.3s ease; flex-direction:column; padding:1rem; gap:.2rem}
  .site-nav.open{transform: translateY(0)}
}

.site-main{padding-block: 24px 64px}

.hero{display:grid; grid-template-columns: 1.2fr .9fr; gap:2rem; padding-block:2rem 1rem; align-items:center}
.hero__content h1{font-size: clamp(2rem, 3.8vw, 3.4rem); line-height:1.1; margin:0 0 .7rem 0}
.lead{color:var(--text); opacity:.9; font-size:1.05rem}
.badges{display:flex; gap:.6rem; flex-wrap:wrap; padding:0; list-style:none; margin:1rem 0 0}
.badges li{padding:.3rem .6rem; border:1px solid rgba(255,255,255,.08); border-radius:999px; font-size:.9rem; color:var(--muted)}

.hero__media{display:grid; gap:1rem}
.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent) 0%, rgba(17,24,39,.4) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding:1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card h3{margin:.2rem 0 .5rem; font-size:1.05rem}
.card.glass{backdrop-filter: blur(8px); background: color-mix(in srgb, var(--surface) 70%, rgba(255,255,255,.06));}

.flow{display:flex; align-items:center; gap:.6rem}
.flow__node{background: #0ea5e9; color:#001018; font-weight:700; padding:.35rem .6rem; border-radius:10px; box-shadow: inset 0 -2px rgba(0,0,0,.2)}
.flow__pipe{flex:1; height:3px; background: linear-gradient(90deg, #0ea5e9, #a78bfa); border-radius:999px;}

.section-title{font-size: clamp(1.4rem, 2.4vw, 2rem); margin:0 0 1rem}
.grid{display:grid; gap:1rem}
.two-col{grid-template-columns:1.1fr .9fr}
.cards-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width:920px){ .hero{grid-template-columns:1fr} .two-col, .cards-3{grid-template-columns:1fr} }

.logos{display:flex; flex-wrap:wrap; gap:.8rem; padding:0; list-style:none}
.logo{padding:.5rem .8rem; border-radius:12px; border:1px dashed rgba(255,255,255,.15); color:var(--muted)}

.timeline{display:grid; grid-template-columns: repeat(4,1fr); gap:.8rem}
.t-item{border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem; background: rgba(255,255,255,.02)}
.t-item span{font-weight:800; color:var(--brand); font-size:.9rem}
.t-item h4{margin:.2rem 0 .3rem}
@media (max-width:900px){ .timeline{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .timeline{grid-template-columns:1fr} }

.cta-band{background: radial-gradient(600px 80% at 10% 10%, rgba(96,165,250,.2), transparent 60%), var(--surface); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);}
.cta-band__grid{display:grid; gap:1rem; align-items:center; grid-template-columns: 1.4fr .6fr; padding:1.4rem 0}
@media (max-width:820px){ .cta-band__grid{grid-template-columns:1fr} }

.checklist{list-style:none; padding:0; margin:0}
.checklist li{padding-left:1.6rem; position:relative; margin:.4rem 0}
.checklist li::before{content:"✓"; position:absolute; left:.2rem; top:.1rem; color:var(--ok); font-weight:900}

.arch{display:grid; gap:.6rem}
.arch__lane{display:flex; align-items:center; gap:1rem; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); padding:.8rem 1rem; border-radius:12px}
.arch__lane span{font-weight:800; color:var(--brand-2)}

.form{max-width:780px; margin-inline:auto}
.form__row{display:grid; gap:.35rem; margin:.7rem 0}
.form__row input, .form__row textarea, .form__row select{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.75rem .9rem;
  color:var(--text);
  outline: none;
}
.form__row input:focus, .form__row textarea:focus, .form__row select:focus{border-color:var(--ring); box-shadow: 0 0 0 4px rgba(147,197,253,.15)}
.error{color:var(--danger); min-height:1.1rem}
.form__actions{display:grid; gap:.6rem}

.site-footer{border-top:1px solid rgba(255,255,255,.06); padding-top:1.6rem; background: color-mix(in srgb, var(--surface) 80%, transparent)}
.footer-grid{display:grid; grid-template-columns: 1.1fr .7fr .7fr; gap:1rem}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin:.2rem 0}
.footer-bottom{padding:.8rem 0 1.6rem; color:var(--muted)}
.brand--footer .amp{color:var(--brand)}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr} }

.btn{display:inline-block; padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); font-weight:600}
.btn--primary{background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#06122a; border:0}
.btn--ghost{background:transparent}
.btn--lg{font-size:1.05rem; padding:1rem 1.3rem}

.grad{background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip:text; color:transparent}
.section{padding:1rem 0}
.page-title{font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin:.3rem 0 1rem}

.reveal{opacity:0; transform: translateY(16px); transition: .6s ease}
.reveal.visible{opacity:1; transform:none}

.preloader{
  position:fixed; inset:0; display:grid; place-items:center;
  background: radial-gradient(800px 500px at 50% -10%, rgba(96,165,250,.15), transparent 60%), var(--bg);
  z-index:9999; transition: .4s ease; opacity:1; visibility:visible;
}
.preloader.hide{opacity:0; visibility:hidden}
.preloader__inner{display:grid; gap:.6rem; place-items:center; text-align:center}
.preloader__inner img{animation: spin 2.2s linear infinite}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}

.icon-lk::before, .icon-gh::before, .icon-x::before{display:inline-block; width:22px; height:22px; content:""; background: currentColor; mask-size: contain; mask-repeat:no-repeat; mask-position:center}
.icon-lk::before{mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\"><path fill=\"%23fff\" d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.95v5.66H9.35V9h3.41v1.56h.05c.47-.89 1.62-1.84 3.33-1.84 3.56 0 4.22 2.34 4.22 5.39v6.34ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.56V9h3.56v11.45ZM22 0H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2Z\"/></svg>');}
.icon-gh::before{mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23fff\" d=\"M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.49l-.01-1.71c-2.78.6-3.37-1.18-3.37-1.18-.45-1.14-1.11-1.45-1.11-1.45-.91-.62.07-.61.07-.61 1 .07 1.53 1.02 1.53 1.02.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.35-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .85-.27 2.77 1.02a9.54 9.54 0 0 1 5.04 0c1.92-1.29 2.77-1.02 2.77-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.67.92.67 1.86l-.01 2.76c0 .27.18.58.69.48A10 10 0 0 0 12 2Z\"/></svg>');}
.icon-x::before{mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23fff\" d=\"M13.46 10.9 20.5 3h-1.67l-6.13 6.9L7.4 3H2l7.4 10.6L2 21h1.67l6.4-7.2L16.6 21H22l-8.54-10.1Zm-2.26 2.54-.74-1.06-5.9-8.43h2.54l4.77 6.83.74 1.06 6.16 8.82h-2.54l-5.02-7.22Z\"/></svg>');}

.grad-border{position:relative}
.grad-border::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-mask: 
  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;}



/* Language picker */
.lang-picker{display:flex; gap:.4rem; align-items:center; margin-left:.4rem}
.lang-btn{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:.35rem .6rem; font-weight:700; cursor:pointer}
.lang-btn[aria-pressed="true"]{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#06122a; border:0}
@media (max-width: 820px){ .lang-picker{align-self:flex-end} }