/* CZ Kinetics — site styles (Carbon + Vibrant Red) */
:root{
  --bg:#121212; --surface:#1C1C1E; --surface2:#26262A;
  --border:rgba(240,240,242,0.10); --text:#F0F0F2; --muted:#A0A0A6;
  --accent:#E23A2E; --accent2:#FF6B5E; --accent-soft:rgba(226,58,46,0.18);
  --on-accent:#FFFFFF;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.55; font-size:17px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
a{color:inherit; text-decoration:none}
img,svg{display:block}
.eyebrow{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700}
.muted{color:var(--muted)}
h1,h2,h3{line-height:1.12; font-weight:700; letter-spacing:-.01em}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:11px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn-primary{background:var(--grad); color:var(--on-accent); box-shadow:0 6px 20px var(--accent-soft)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 26px var(--accent-soft)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:9px 16px; font-size:14px}

/* nav */
header{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(10px)}
nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.02em}
.brand .logo{height:46px; width:auto; flex:0 0 auto; display:block}
.brand .name{font-size:18px}
.brand .name span{color:var(--accent)}
.navlinks{display:flex; align-items:center; gap:30px; font-size:15px}
.navlinks a{color:var(--muted)} .navlinks a:hover{color:var(--text)}
.navlinks a.btn{color:var(--on-accent)}
.navtoggle{display:none; background:transparent; border:1px solid var(--border); border-radius:9px; width:42px; height:38px; cursor:pointer; align-items:center; justify-content:center}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{content:""; display:block; width:18px; height:2px; background:var(--text); position:relative}
.navtoggle span::before{position:absolute; top:-6px} .navtoggle span::after{position:absolute; top:6px}

/* hero */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:46px 46px; opacity:.5; mask-image:radial-gradient(circle at 70% 35%,#000,transparent 70%); pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:84px; padding-bottom:96px}
.hero h1{font-size:clamp(34px,5.4vw,52px); margin:18px 0 18px}
.hero p.lead{font-size:18.5px; color:var(--muted); max-width:540px}
.cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.chips{display:flex; gap:10px; margin-top:34px; flex-wrap:wrap}
.chip{font-size:13px; color:var(--muted); border:1px solid var(--border); background:var(--surface); padding:7px 13px; border-radius:999px}
.chip b{color:var(--text)}
.heroart{position:relative; display:flex; justify-content:center; align-items:center}
.heroart svg{width:100%; max-width:520px; height:auto}

/* sections */
section{padding:84px 0}
.sec-head{max-width:680px; margin-bottom:46px}
.sec-head h2{font-size:clamp(26px,3.4vw,34px); margin:14px 0 12px}
.sec-head p{color:var(--muted); font-size:17px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px}
.card .ico{width:46px; height:46px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.card h3{font-size:19px; margin-bottom:9px}
.card p{color:var(--muted); font-size:15.5px}

/* flagship */
.flag{background:var(--surface)}
.flaggrid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.badge-rd{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border); padding:6px 13px; border-radius:999px}
.badge-rd .dot{width:7px; height:7px; border-radius:50%; background:var(--accent)}
.flag h2{font-size:clamp(28px,3.6vw,36px); margin:18px 0 16px}
.flag p{color:var(--muted); max-width:520px}
.spec{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 22px}
.spec span{font-size:14px; padding:8px 14px; border-radius:10px; background:var(--surface2); border:1px solid var(--border)}
.nda{font-size:14px; color:var(--muted)}
.lead-line{color:var(--text); font-weight:600; font-size:17px; margin-top:14px; max-width:520px}
.callout{border-left:3px solid var(--accent); background:var(--surface2); padding:15px 20px; border-radius:0 12px 12px 0; color:var(--muted); font-size:15px; max-width:540px; margin:22px 0}
.callout b{color:var(--text)}
.flagart{background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:24px; display:flex; align-items:center; justify-content:center}
.flagart svg{width:100%; max-width:440px; height:auto}

/* founders */
.founders{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.founder{display:flex; gap:18px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px}
.avatar{width:58px; height:58px; flex:0 0 auto; border-radius:14px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-weight:700; font-size:20px}
.founder h3{font-size:18px} .founder .role{color:var(--accent); font-size:13.5px; font-weight:600; letter-spacing:.03em; margin:2px 0 8px}
.founder p{color:var(--muted); font-size:15px}
.tag-tbd{color:var(--accent2); font-style:italic}

/* contact */
.contact{background:var(--surface)}
.contactgrid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.contact h2{font-size:clamp(26px,3.4vw,34px); margin-bottom:14px}
.contact .lines{font-size:16px}
.contact .lines div{padding:9px 0; border-bottom:1px solid var(--border); color:var(--muted)}
.contact .lines b{color:var(--text); font-weight:600}
footer{border-top:1px solid var(--border); padding:30px 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}

/* responsive */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr; gap:8px; padding-top:54px; padding-bottom:64px}
  .heroart{order:-1; margin-bottom:8px}
  .heroart svg{max-width:380px}
  .flaggrid{grid-template-columns:1fr; gap:30px}
  .contactgrid{grid-template-columns:1fr; gap:26px}
  .founders{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  section{padding:64px 0}
}
@media (max-width:780px){
  .navtoggle{display:inline-flex}
  .navlinks{display:none; position:absolute; left:0; right:0; top:68px; flex-direction:column; align-items:stretch; gap:14px; background:var(--surface); border-bottom:1px solid var(--border); padding:20px 32px}
  .navlinks.open{display:flex}
  .navlinks a.btn{justify-content:center}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .cards{grid-template-columns:1fr}
  footer .wrap{flex-direction:column; align-items:flex-start; gap:6px}
}