
:root{
  --purple:#5B2BFF;
  --gold:#F4C95D;
  --mint:#00C2A8;
  --ink:#0A0A0A;
  --pearl:#F7F7F7;
  --text:#0A0A0A;
  --bg:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55;
}
.container{max-width:1120px; margin:0 auto; padding:0 20px;}
header.site-header{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eee;
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.navbar a.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:0.2px}
.navbar a.brand img{height:36px; width:auto}
.navbar nav a{margin:0 10px; padding:6px 10px; text-decoration:none; color:var(--ink); border-radius:8px}
.navbar nav a:hover{background:#f0f2ff}
.nav-cta{background:var(--purple); color:#fff !important; border-radius:10px; padding:8px 14px; font-weight:600}
.hero{
  padding:80px 0 40px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(91,43,255,0.10) 0%, transparent 60%);
}
.hero .kicker{color:var(--mint); font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:13px}
.hero h1{font-size:44px; line-height:1.1; margin:8px 0 16px}
.hero p{font-size:18px; max-width:780px}
.btn{display:inline-block; background:var(--purple); color:#fff; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600}
.btn.secondary{background:var(--gold); color:#111}
.btn.ghost{background:transparent; border:1.5px solid var(--ink); color:var(--ink)}
.btn + .btn{margin-left:10px}
.hero-logos{display:flex; align-items:center; gap:16px; margin-top:22px}
.section{padding:60px 0; border-top:1px solid #f3f3f5}
.section h2{font-size:28px; margin:0 0 12px}
.section .lead{font-size:18px; color:#333; max-width:860px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}
.card{border:1px solid #e8e8ee; border-radius:14px; padding:18px; background:#fff}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:#333}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef; color:#222; font-size:12px; margin-right:8px}
.principles-list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
.principle{border:1px solid #e8e8ee; border-radius:14px; padding:16px}
.founders{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:18px}
.founder{border:1px solid #e8e8ee; border-radius:14px; padding:16px; background:#fff}
.founder h4{margin:6px 0 6px; font-size:16px}
.founder small{color:#444}
.footer{padding:40px 0; border-top:1px solid #eee; background:linear-gradient(#fff, #faf9ff)}
.footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.footer a{color:#222; text-decoration:none}
.notice{font-size:13px; color:#444}
blockquote{margin:12px 0; padding:12px 14px; background:#fafafa; border-left:3px solid var(--gold); border-radius:6px}
kbd{background:#f3f3f5; padding:2px 6px; border-radius:6px; border:1px solid #e2e2e8}

@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .principles-list{grid-template-columns:1fr 1fr}
  .founders{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .principles-list{grid-template-columns:1fr}
  .navbar nav{display:none}
}
