:root{
  --bg: #0b1020;
  --bg-elev: #121831;
  --text: #eaf0ff;
  --muted: #b7c2e8;
  --brand: #4f7cff;
  --brand-2: #29d3c7;
  --line: #223059;
  --ok: #30d158;
  --warn: #ffd60a;
  --danger: #ff453a;
  --shadow: 0 10px 30px #0005, 0 2px 10px #0004;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{padding-left:1.2rem}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.full-bleed{max-width:none;padding:0 20px}

.site-header{
  position: sticky; top:0; z-index: 20;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 20px;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.brand span{letter-spacing:.2px}

.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:6px 10px;border-radius:8px;transition:background .2s}
.nav-toggle:hover{background:var(--bg-elev)}
.nav-list{display:flex;gap:16px;align-items:center;list-style:none;margin:0;padding:0}

.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--line);transition:transform .08s ease, background .2s, box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#051127;border-color:transparent;box-shadow:0 8px 18px #2b4bd03a}
.btn-secondary{background:transparent;color:var(--text)}

.theme-toggle{background:none;border:1px solid var(--line);border-radius:10px;padding:8px}

.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;
  padding:64px 20px 32px; border-bottom:1px solid var(--line);
  background: radial-gradient(1000px 500px at 10% -10%, #12204a 0%, transparent 60%),
              radial-gradient(800px 400px at 80% -20%, #0a3a3a 0%, transparent 60%);
}
.hero h1{font-size: clamp(2rem, 3.6vw, 3rem); margin:0 0 10px}
.subtitle{color:var(--muted);max-width:65ch}
.cta-group{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.hero-bullets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:22px 0 0}
.hero-bullets li{background:var(--bg-elev);border:1px solid var(--line);padding:8px 10px;border-radius:10px}
.hero-visual{height:280px;border-radius:16px;border:1px solid var(--line);background:
  conic-gradient(from 180deg at 50% 50%, #1c2b57, #0a3a3a, #1c2b57);
  box-shadow: inset 0 0 60px #0a3a3a5a, 0 10px 40px #0006;
  animation: orbit 18s linear infinite;
}
.hero-visual img{width:100%;height:100%;object-fit:cover;border-radius:16px}

.section{padding:56px 20px}
.section-header h2{margin:0 0 6px;font-size:1.6rem}
.section-header p{margin:0;color:var(--muted)}

.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:18px;transition:transform .18s ease, box-shadow .2s, border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in oklab, var(--brand) 40%, var(--line))}
.card h3{margin:0 0 8px;font-size:1.1rem}
.card p{margin:0 0 8px;color:var(--muted)}
.card ul{margin:0;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:16px 0 0;padding:0;list-style:none}
.steps li{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:16px}
.steps h4{margin:0 0 6px}

.logos{grid-template-columns:repeat(6,minmax(0,1fr))}
.logo-chip{border:1px solid var(--line);background:var(--bg-elev);padding:10px 12px;border-radius:999px;text-align:center}

.about{margin-top:14px}

.contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.fine-print{color:var(--muted);margin-top:10px}

.site-footer{border-top:1px solid var(--line);padding:20px 0 32px;margin-top:32px}
.footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer-links{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.tagline{color:var(--muted)}
.footer-meta{margin-top:12px;color:var(--muted)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.revealed{opacity:1;transform:none}

/* Light theme support */
.light{--bg:#f7f9ff;--bg-elev:#ffffff;--text:#0b1020;--muted:#4a5678;--line:#e3e8ff}

/* Sticky CTA on mobile */
.sticky-cta{display:none;position:fixed;bottom:12px;right:12px;z-index:25}
@media (max-width: 560px){.sticky-cta{display:block}}

@media (max-width: 960px){
  .hero{grid-template-columns:1fr;}
  .hero-visual{order:-1;height:200px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 560px){
  .nav-toggle{display:inline-block}
  .nav-list{display:none}
  .nav-list[data-open="true"]{display:flex;position:absolute;right:12px;top:56px;background:var(--bg-elev);border:1px solid var(--line);padding:10px;border-radius:12px;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
  .hero-bullets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{flex-direction:column;gap:16px}
  .footer-links{flex-wrap:wrap;gap:10px}
}

@keyframes orbit{
  0%{filter:hue-rotate(0deg)}
  50%{filter:hue-rotate(20deg)}
  100%{filter:hue-rotate(0deg)}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important}
}


