/* Renquantis — styles.css */
:root{
  --bg:#0b1220;
  --ink:#dbe7ff;
  --muted:#9fb3ce;
  --line: rgba(255,255,255,.08);
  --brand1:#22d3ee; /* cyan */
  --brand2:#60a5fa; /* blue */
  --card: rgba(255,255,255,.04);
  --card-strong: rgba(255,255,255,.06);
}
*{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(--ink);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:88px 0;border-top:1px solid var(--line)}
.section.hero{padding-top:120px;background:linear-gradient(180deg,rgba(34,211,238,.08),transparent)}
.section.dark{background:linear-gradient(180deg, rgba(13,20,36,1), rgba(13,20,36,.6))}
.section.tint{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h1,h2,h3{line-height:1.2;margin:0 0 8px}
h1{font-size: clamp(36px, 6vw, 64px); letter-spacing:.5px}
h2{font-size: clamp(22px, 3.5vw, 32px)}
h3{font-size:20px}
p{margin:8px 0 0;color:var(--muted)}
.lead{font-size:18px;max-width:640px}
b{color:#fff}
.meta{color:var(--muted);font-size:12px}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:12px}

.button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;
  padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600;transition:.2s}
.button:hover{background:rgba(255,255,255,.08)}
.button.primary{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#0b1220;border:0}
.button.primary:hover{filter:brightness(1.05)}
.button.small{padding:8px 12px;font-size:14px}
.button.ghost{background:transparent}

.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);
  padding:6px 10px;border-radius:999px;font-size:12px}
.pills{display:flex;gap:8px;list-style:none;padding:0;margin:18px 0 0;flex-wrap:wrap}
.pills li{border:1px solid var(--line);background:rgba(255,255,255,.05);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.6);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.navwrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.12em}
.logo{display:block}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:500}
.nav a:hover{color:#fff}
.menu-btn{display:none;background:transparent;border:0;gap:5px;padding:10px;border-radius:10px}
.menu-btn span{display:block;width:22px;height:2px;background:#cfe3ff;border-radius:2px}
@media (max-width: 820px){
  .nav{position:absolute;top:64px;left:0;right:0;background:rgba(11,18,32,.95);border-bottom:1px solid var(--line);
    display:none;flex-direction:column;padding:12px 20px}
  .nav.open{display:flex}
  .menu-btn{display:flex}
}

.grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:36px}
.grid3 .span2{grid-column: span 1}
@media (max-width: 900px){
  .grid2,.grid3{grid-template-columns:1fr}
  .grid3 .span2{grid-column: auto}
}
.rowhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}

.cards{display:grid;gap:18px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width: 1000px){ .cards.four{grid-template-columns:repeat(2,1fr)} .cards.three{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 620px){ .cards.four,.cards.three{grid-template-columns:1fr} }

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;transition:.2s}
.card:hover{transform:translateY(-2px);background:var(--card-strong)}
.card.glow{position:relative;overflow:hidden}
.card.glow::before{content:"";position:absolute;inset:-60% -60% auto auto;width:200px;height:200px;background:radial-gradient(120px 120px at 50% 50%, rgba(34,211,238,.25), transparent 60%);filter:blur(16px)}

.bullets{margin:10px 0 0;padding-left:18px}
.bullets li{margin:.3rem 0}
.badge{display:inline-flex;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:4px 8px;border-radius:999px;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.sub{color:var(--muted);margin-top:4px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.stats > div{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:14px;padding:12px}
.stats dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stats dd{margin:4px 0 0;color:#fff}
.checks{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.checks li{position:relative;padding-left:26px}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--brand1),var(--brand2));mask: url('assets/check.svg') center/14px 14px no-repeat}

.icon{width:28px;height:28px;margin-bottom:8px;opacity:.9}
.icon.chip{background: url('assets/chip.svg') center/contain no-repeat}
.icon.shield{background: url('assets/shield.svg') center/contain no-repeat}
.icon.rocket{background: url('assets/rocket.svg') center/contain no-repeat}
.icon.orbit{background: url('assets/orbit.svg') center/contain no-repeat}

.timeline{border-left:1px solid var(--line);padding-left:18px;margin:18px 0 0}
.timeline li{margin:0 0 18px 0;position:relative}
.timeline li::before{content:"";position:absolute;left:-9px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--brand1);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.timeline time{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.timeline h3{margin-top:4px}

.form{display:grid;gap:10px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.form input,.form textarea{background:#0f1830;color:#e8f0ff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;outline:none;transition:.15s}
.form input:focus,.form textarea:focus{border-color:rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.fineprint{color:var(--muted);font-size:12px}
.msg{margin:6px 0 0;font-size:14px}

.site-footer{border-top:1px solid var(--line);padding:18px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footnav a{color:var(--muted);text-decoration:none;margin-right:12px}
.footnav a:hover{color:#fff}
.footbrand{display:flex;align-items:center;gap:8px;color:var(--muted)}

.bg.fx{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(800px 400px at 50% -100px, rgba(34,211,238,.12), transparent 60%),
  radial-gradient(1200px 800px at 80% -200px, rgba(96,165,250,.12), transparent 60%),
  radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,.45), transparent 60%),
  radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,.35), transparent 60%),
  radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,.45), transparent 60%),
  radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;}

.orb-wrap{display:grid;place-items:center}
.orb{position:relative;width:min(420px,80vw);height:min(420px,80vw);border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.9), rgba(96,165,250,.9));
  box-shadow: inset 0 0 80px rgba(11,18,32,.6), 0 0 120px rgba(34,211,238,.25);
  animation: float 8s ease-in-out infinite;}
.ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.5);inset:8%}
.ring-a{animation: spin 14s linear infinite}
.ring-b{inset:18%;border-color:rgba(255,255,255,.3);animation: spinrev 22s linear infinite}
.ring-c{inset:28%;border-color:rgba(255,255,255,.2);animation: spin 30s linear infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}