:root{
  --bg: #0B0E14;
  --surface: #11151D;
  --surface-2: #1B212E;
  --border: rgba(255,255,255,0.08);
  --text: #ECEEF2;
  --text-dim: #8B92A3;
  --cyan: #3EC9C0;
  --amber: #FFB23E;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --maxw: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}

img,svg{display:block; max-width:100%;}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-0.01em;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:0.9rem;
}
.eyebrow.center{text-align:center;}
h2.center{text-align:center; max-width:640px; margin:0 auto 3.2rem;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem, 4vw, 3.5rem);
  background:rgba(11,14,20,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:0.6rem;}
.brand-word{font-family:var(--display); font-weight:600; font-size:1.15rem;}
.nav-links{display:flex; gap:2rem;}
.nav-links a{font-size:0.92rem; color:var(--text-dim); transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.nav-cta{font-size:0.88rem;}

@media (max-width:760px){
  .nav-links{display:none;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.7rem 1.4rem;
  border-radius:8px;
  font-size:0.95rem;
  font-weight:500;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber); color:#1A1306;}
.btn-primary:hover{background:#ffc25e;}
.btn-large{padding:0.9rem 2rem; font-size:1.02rem;}
.btn-ghost{border:1px solid var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}
.btn-text{color:var(--text-dim);}
.btn-text:hover{color:var(--cyan);}

/* ---------- HERO ---------- */
.hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.2rem,4vw,3.5rem) 2rem;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:2.5rem;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.3rem);
  line-height:1.08;
  margin-bottom:1.3rem;
}
.hero-sub{
  color:var(--text-dim);
  font-size:1.08rem;
  max-width:480px;
  margin-bottom:2rem;
}
.hero-actions{display:flex; gap:1rem; align-items:center; flex-wrap:wrap;}
.hero-visual{min-height:340px;}

@media (max-width:880px){
  .hero{grid-template-columns:1fr; text-align:left;}
  .hero-visual{order:-1; min-height:260px;}
}

/* hero SVG flow */
.flow-path{
  fill:none;
  stroke:rgba(255,255,255,0.12);
  stroke-width:1.5;
}
.node-circle{
  fill:var(--surface-2);
  stroke:var(--border);
  stroke-width:1.5;
}
.node-circle-core{
  fill:#19222E;
  stroke:var(--cyan);
  stroke-width:2;
}
.node-circle-human{
  fill:var(--surface-2);
  stroke:var(--amber);
  stroke-width:1.5;
}
.node-label{
  font-family:var(--mono);
  font-size:11px;
  fill:var(--text);
  text-anchor:middle;
}
.node-sub{
  font-family:var(--mono);
  font-size:10px;
  fill:var(--text-dim);
  text-anchor:middle;
}
.pulse{fill:var(--amber);}
.pulse-alt{fill:var(--cyan);}

@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none; opacity:0; }
  svg animateMotion{display:none;}
}

/* ---------- PROBLEM ---------- */
.problem{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.problem-inner{
  max-width:760px;
  margin:0 auto;
  padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,4vw,3.5rem);
}
.problem h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:1.1rem; line-height:1.25;}
.problem-text{color:var(--text-dim); font-size:1.05rem;}

/* ---------- HOW IT WORKS ---------- */
.how{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(4rem,7vw,6rem) clamp(1.2rem,4vw,3.5rem);
}
.how h2.center{font-size:clamp(1.6rem,3vw,2.2rem);}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.2rem;
}
.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.8rem;
}
.step-index{
  font-family:var(--mono);
  color:var(--cyan);
  font-size:0.85rem;
  margin-bottom:1rem;
}
.step h3{font-size:1.15rem; margin-bottom:0.6rem;}
.step p{color:var(--text-dim); font-size:0.96rem;}

@media (max-width:880px){
  .steps{grid-template-columns:1fr;}
}

/* ---------- USE CASES ---------- */
.cases{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:clamp(4rem,7vw,6rem) clamp(1.2rem,4vw,3.5rem);
}
.cases h2.center{font-size:clamp(1.6rem,3vw,2.2rem);}
.case-grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
}
.case-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.6rem;
}
.case-card svg{margin-bottom:1.1rem;}
.case-card h3{font-size:1.05rem; margin-bottom:0.5rem;}
.case-card p{color:var(--text-dim); font-size:0.92rem;}

@media (max-width:980px){
  .case-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .case-grid{grid-template-columns:1fr;}
}

/* ---------- COMPUTE ---------- */
.compute{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(4rem,7vw,6rem) clamp(1.2rem,4vw,3.5rem);
}
.compute-grid{
  display:grid;
  grid-template-columns:1fr 0.85fr;
  gap:3rem;
  align-items:center;
}
.compute h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:1.1rem; line-height:1.2;}
.compute-copy p{color:var(--text-dim); margin-bottom:1rem; font-size:1rem;}
.compute-list{margin-top:1.4rem; display:flex; flex-direction:column; gap:0.7rem;}
.compute-list li{
  color:var(--text-dim);
  font-size:0.94rem;
  padding-left:1.3rem;
  position:relative;
}
.compute-list li::before{
  content:"";
  position:absolute; left:0; top:0.5em;
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
}
.compute-list span{color:var(--text); font-weight:500;}

.rack{fill:var(--surface-2); stroke:var(--border); stroke-width:1;}
.rack-active{stroke:var(--cyan); stroke-width:1.5;}
.led{fill:#39404D;}
.led-on{fill:var(--cyan);}
.rack-label{font-family:var(--mono); font-size:11px; fill:var(--text-dim);}
.rack-label-active{fill:var(--cyan);}
.rack-pulse{
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.5;
  opacity:0;
  animation:rackPulse 2.6s ease-in-out infinite;
}
@keyframes rackPulse{
  0%,100%{opacity:0;}
  50%{opacity:0.55;}
}
@media (prefers-reduced-motion: reduce){
  .rack-pulse{animation:none; opacity:0.3;}
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

@media (max-width:880px){
  .compute-grid{grid-template-columns:1fr;}
  .compute-visual{order:-1;}
}

/* ---------- TEAM ---------- */
.team{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:clamp(4rem,7vw,6rem) clamp(1.2rem,4vw,3.5rem);
}
.team h2.center{font-size:clamp(1.6rem,3vw,2.2rem);}
.team-grid{
  max-width:760px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}
.team-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.8rem;
}
.avatar-mono{font-family:var(--mono); font-size:18px; fill:var(--cyan);}
.team-card h3{margin-top:1rem; font-size:1.1rem;}
.role{font-family:var(--mono); font-size:0.82rem; color:var(--amber); margin:0.3rem 0 0.8rem;}
.bio{color:var(--text-dim); font-size:0.92rem; margin-bottom:0.9rem;}
.email-link{font-family:var(--mono); font-size:0.85rem; color:var(--cyan); border-bottom:1px solid transparent;}
.email-link:hover{border-color:var(--cyan);}

@media (max-width:600px){
  .team-grid{grid-template-columns:1fr;}
}

/* ---------- CTA ---------- */
.cta{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  padding:clamp(4.5rem,8vw,6.5rem) clamp(1.2rem,4vw,3.5rem);
}
.cta h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:0.9rem;}
.cta p{color:var(--text-dim); margin-bottom:2rem; font-size:1.05rem;}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--border);
  padding:3.5rem clamp(1.2rem,4vw,3.5rem) 2rem;
}
.footer-top{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}
.footer-brand .brand{margin-bottom:0.9rem;}
.footer-tagline{color:var(--text-dim); font-size:0.92rem; max-width:240px;}
.footer-col h4{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:1rem;
}
.footer-col{display:flex; flex-direction:column; gap:0.65rem;}
.footer-col a{color:var(--text); font-size:0.92rem; opacity:0.85;}
.footer-col a:hover{color:var(--cyan); opacity:1;}
.footer-bottom{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.6rem;
}
.footer-copy{color:var(--text-dim); font-size:0.85rem;}
.footer-email{font-family:var(--mono); font-size:0.85rem; color:var(--text-dim);}
.footer-email:hover{color:var(--cyan);}

@media (max-width:880px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

/* ---------- INNER PAGE HEADER (About / Pricing / Security / etc.) ---------- */
.page-hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.2rem,4vw,3.5rem) clamp(2rem,4vw,3rem);
}
.page-hero h1{
  font-size:clamp(2rem,4vw,2.8rem);
  line-height:1.12;
  max-width:760px;
  margin-bottom:1.1rem;
}
.page-hero .lede{
  color:var(--text-dim);
  font-size:1.08rem;
  max-width:620px;
}
.page-section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,4vw,3.5rem);
}
.page-section.bordered{
  border-top:1px solid var(--border);
}
.page-section h2{
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  margin-bottom:1.2rem;
}
.page-section p{color:var(--text-dim); font-size:1rem; max-width:720px;}
.page-section p + p{margin-top:0.9rem;}

/* ---------- PRICING ---------- */
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
.price-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:2rem;
  display:flex;
  flex-direction:column;
}
.price-card.featured{
  border-color:var(--cyan);
  background:linear-gradient(180deg, rgba(62,201,192,0.06), var(--surface));
}
.price-tier{font-family:var(--mono); font-size:0.85rem; color:var(--amber); margin-bottom:0.8rem;}
.price-amount{font-family:var(--display); font-size:2rem; margin-bottom:0.3rem;}
.price-amount span{font-family:var(--body); font-size:0.95rem; color:var(--text-dim); font-weight:400;}
.price-desc{color:var(--text-dim); font-size:0.92rem; margin-bottom:1.6rem;}
.price-features{display:flex; flex-direction:column; gap:0.7rem; margin-bottom:1.8rem; flex-grow:1;}
.price-features li{
  font-size:0.92rem;
  color:var(--text);
  padding-left:1.3rem;
  position:relative;
}
.price-features li::before{
  content:"";
  position:absolute; left:0; top:0.5em;
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
}
@media (max-width:920px){
  .price-grid{grid-template-columns:1fr;}
}

.faq-list{display:flex; flex-direction:column; gap:1.6rem; max-width:720px;}
.faq-item h3{font-size:1.02rem; margin-bottom:0.4rem;}
.faq-item p{color:var(--text-dim); font-size:0.95rem;}

/* ---------- SECURITY ---------- */
.security-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
}
.security-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.8rem;
}
.security-card h3{font-size:1.05rem; margin-bottom:0.6rem; display:flex; align-items:center; gap:0.6rem;}
.security-card p{color:var(--text-dim); font-size:0.93rem;}
.status-pill{
  font-family:var(--mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:0.2rem 0.55rem;
  border-radius:20px;
  border:1px solid var(--border);
  color:var(--text-dim);
}
.status-pill.in-progress{color:var(--amber); border-color:rgba(255,178,62,0.35);}
@media (max-width:760px){
  .security-grid{grid-template-columns:1fr;}
}

/* ---------- ABOUT ---------- */
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
.value-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.6rem;
}
.value-card h3{font-size:1.02rem; margin-bottom:0.5rem;}
.value-card p{color:var(--text-dim); font-size:0.92rem;}
@media (max-width:880px){
  .values-grid{grid-template-columns:1fr;}
}

/* ---------- CAREERS ---------- */
.empty-state{
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:14px;
  padding:2.2rem;
  max-width:680px;
}
.empty-state h3{font-size:1.05rem; margin-bottom:0.7rem;}
.empty-state p{color:var(--text-dim); font-size:0.95rem;}

/* ---------- CONTACT ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  max-width:760px;
}
.contact-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.8rem;
}
.contact-card h3{font-size:1rem; margin-bottom:0.4rem;}
.contact-card p{color:var(--text-dim); font-size:0.9rem; margin-bottom:1rem;}
@media (max-width:600px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- LEGAL PROSE ---------- */
.legal-content{max-width:720px;}
.legal-content h2{font-size:1.25rem; margin-top:2.2rem; margin-bottom:0.8rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--text-dim); font-size:0.96rem; margin-bottom:0.9rem; max-width:none;}
.legal-content ul{margin:0.8rem 0 0.9rem 1.2rem; color:var(--text-dim); font-size:0.96rem;}
.legal-content ul li{list-style:disc; margin-bottom:0.4rem;}
.legal-updated{font-family:var(--mono); font-size:0.82rem; color:var(--text-dim); margin-bottom:2rem; display:block;}