:root{
  --bg: #DADAE3;
  --surface: #DADAE3;
  --text: #000000;
  --muted: #000000;
  --accent: #797982;
  --accent-2: #858585;
  --ring: #DADAE3;
  --section: #DADAE3;
  --ringcontact: #7A7A7A;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff; --surface:#ffffff; --text:#0b1020; --muted:#3b4469;
    --accent:#0066ff; --accent-2:#00b37a; --ring:#dfe6ff;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 85%, transparent);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--ring)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand-badge{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px rgba(0,0,0,.25)}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{padding:.4rem .2rem;border-radius:8px}
.menu a:hover{background:color-mix(in oklab, var(--ring) 40%, transparent)}
.cta{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#001018;padding:.55rem .9rem;border-radius:12px;font-weight:700;border:0}
.ghost{border:1px solid var(--ring);padding:.55rem .9rem;border-radius:12px}
.hamburger{display:none;background:none;border:0;color:var(--text);font-size:1.4rem}
.mobile-menu{display:none;border-top:1px solid var(--ring)}
.mobile-menu a{display:block;padding:1rem;border-bottom:1px solid var(--ring)}

@media (max-width:820px){
  .menu{display:none}
  .hamburger{display:block}
}

/* Sections */
.section{padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--section)}
.section-title{font-size:1.8rem;margin:0 0 .75rem}
.sub{color:var(--muted)}

/* Hero */
.hero{padding:clamp(3rem,6vw,5rem) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.kicker{color:color-mix(in oklab, var(--accent) 70%, var(--text));font-weight:700;text-transform:uppercase;letter-spacing:.12em}
h1{font-size:clamp(2rem,5.2vw,3.2rem);line-height:1.1;margin:.4rem 0;font-weight:900}
.lead{font-size:1.08rem;color:var(--muted);max-width:60ch}
.buttons{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.hero-card{background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 82%, transparent), color-mix(in oklab,var(--surface) 94%, transparent));padding:1.1rem;border-radius:16px;border:1px solid var(--ring);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-card ul{margin:.4rem 0 0 1rem}
.hero-card li{margin:.3rem 0}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* Cards & grids */
.grid{display:grid;gap:1.1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--ring);border-radius:16px;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Logos row inside About */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.6rem}
.logo{background:var(--surface);border:1px solid var(--ring);border-radius:10px;padding:.6rem;text-align:center}

/* Contact form */
form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
form label{display:grid;gap:.3rem}
form input, form textarea, form select{background:var(--bg);border:1px solid var(--ringcontact);color:var(--text);padding:.7rem;border-radius:10px}
form .full{grid-column:1/-1}
form textarea{min-height:120px}
form button{justify-self:start}

/* Footer */
.site-footer{padding:2rem 0;border-top:1px solid var(--ring);color:var(--muted)}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.25rem}
.footgrid a{display:block;padding:.2rem 0}
@media (max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
