:root{
  --bg: #0B0C10;
  --panel: #14161C;
  --border: #24262E;
  --text: #EDEEF2;
  --muted: #8B8F9C;
  --accent: #3D5AFE;
  --accent-2: #7C8CFF;
  --ghost: #43465A;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --max: 1120px;
}

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

html{scroll-behavior:smooth;}

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

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035;
  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");
}

a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:1rem;
}

.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  max-width:32ch;
  margin-bottom:2.5rem;
  color:var(--text);
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.5rem, 5vw, 4rem);
  background:rgba(11,12,16,0.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:0.6rem; font-weight:600; letter-spacing:0.02em; color:var(--text);}
.brand-mark{width:22px; height:22px; color:var(--accent-2);}
.brand-mark.small{width:18px; height:18px;}
.nav-links{display:flex; gap:2rem;}
.nav-links a{color:var(--muted); font-size:0.92rem; transition:color 0.2s;}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  font-size:0.88rem; font-weight:500;
  border:1px solid var(--border);
  padding:0.5rem 1.1rem; border-radius:100px;
  transition:border-color 0.2s, color 0.2s;
}
.nav-cta:hover{border-color:var(--accent); color:var(--accent-2);}
.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer;}
.nav-toggle span{width:20px; height:1.5px; background:var(--text);}

/* ---------- Hero ---------- */
.hero{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:2rem;
  padding:clamp(3rem,8vw,7rem) clamp(1.5rem,5vw,4rem) clamp(2rem,6vw,4rem);
  min-height:78vh;
}
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.3rem, 4.4vw, 3.6rem);
  line-height:1.15;
  margin-bottom:1.4rem;
}
.hero h1 em{font-style:italic; color:var(--accent-2);}
.hero-sub{color:var(--muted); font-size:1.05rem; max-width:46ch; margin-bottom:2.2rem;}
.hero-actions{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;}

.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:600; font-size:0.95rem;
  padding:0.85rem 1.7rem; border-radius:8px;
  display:inline-flex; align-items:center; gap:0.5rem;
  transition:transform 0.2s, box-shadow 0.2s;
  box-shadow:0 8px 24px -8px rgba(61,90,254,0.5);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(61,90,254,0.65);}
.btn-primary.small{padding:0.65rem 1.3rem; font-size:0.88rem; margin-top:1.6rem;}
.btn-ghost{color:var(--muted); font-size:0.95rem; border-bottom:1px solid var(--border); padding-bottom:2px; transition:color 0.2s, border-color 0.2s;}
.btn-ghost:hover{color:var(--text); border-color:var(--muted);}

/* ---------- Orbit signature ---------- */
.hero-orbit{position:relative; display:flex; align-items:center; justify-content:center;}
.orbit-svg{width:100%; max-width:420px; height:auto;}
.ring{fill:none; stroke:var(--border); stroke-width:1;}
.ring-live{stroke:rgba(61,90,254,0.35);}
.ring-ghost{stroke-dasharray:2 6;}

.core{
  transform-origin:240px 240px;
  animation:pulse 5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.7;}
}

.orbit-node{transform-origin:240px 240px;}
.node-live{animation:spin 14s linear infinite;}
.node-ghost-1{animation:spin 22s linear infinite reverse;}
.node-ghost-2{animation:spin 30s linear infinite;}
.node-live circle{transform:translate(240px,140px);}
.node-ghost-1 circle{transform:translate(240px,90px);}
.node-ghost-2 circle{transform:translate(240px,40px);}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.orbit-label{
  position:absolute; font-family:var(--mono); font-size:0.7rem; color:var(--muted);
  letter-spacing:0.04em; pointer-events:none;
}
.label-live{top:18%; right:6%;}
.label-ghost{bottom:14%; left:4%; opacity:0.55;}

@media (prefers-reduced-motion: reduce){
  .core, .orbit-node{animation:none;}
}

/* ---------- Products ---------- */
.products{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,4rem);
  border-top:1px solid var(--border);
}
.product-card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:clamp(1.8rem,4vw,3rem);
  max-width:760px;
}
.product-status{
  display:inline-block; font-family:var(--mono); font-size:0.68rem;
  color:#7CFFB2; border:1px solid rgba(124,255,178,0.3); background:rgba(124,255,178,0.06);
  padding:0.25rem 0.65rem; border-radius:100px; letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:1.2rem;
}
.product-card h3{font-family:var(--serif); font-weight:500; font-size:1.6rem; margin-bottom:0.9rem;}
.product-card p{color:var(--muted); max-width:58ch; margin-bottom:1.4rem;}
.product-meta{font-family:var(--mono); font-size:0.85rem; color:var(--text);}
.product-meta .divider{color:var(--ghost); margin:0 0.5rem;}
.products-footnote{color:var(--muted); font-size:0.9rem; margin-top:2rem;}

/* ---------- Philosophy ---------- */
.philosophy{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,4rem);
  border-top:1px solid var(--border);
}
.principles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem;
}
.principle h3{font-size:1.05rem; font-weight:600; margin-bottom:0.7rem;}
.principle p{color:var(--muted); font-size:0.95rem;}

/* ---------- Contact ---------- */
.contact{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,4rem);
  border-top:1px solid var(--border);
  text-align:left;
}
.contact-email{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem); color:var(--accent-2);
  border-bottom:1px solid transparent; transition:border-color 0.2s;
}
.contact-email:hover{border-color:var(--accent-2);}

/* ---------- Footer ---------- */
.footer{
  max-width:var(--max); margin:0 auto;
  padding:2.4rem clamp(1.5rem,5vw,4rem) 3rem;
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
}
.footer-brand{display:flex; align-items:center; gap:0.6rem; font-weight:600;}
.footer-tagline{color:var(--muted); font-weight:400; font-size:0.85rem; margin-left:0.4rem;}
.footer-links{display:flex; gap:1.6rem;}
.footer-links a{color:var(--muted); font-size:0.88rem; transition:color 0.2s;}
.footer-links a:hover{color:var(--text);}
.footer-copy{width:100%; color:var(--ghost); font-size:0.78rem; margin-top:0.8rem;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:left;}
  .hero-orbit{order:-1; margin-bottom:1rem; max-width:320px; margin-inline:auto;}
  .principles{grid-template-columns:1fr; gap:1.8rem;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--border);
    padding:0.5rem clamp(1.5rem,5vw,4rem) 1.2rem;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:0.7rem 0; border-bottom:1px solid var(--border);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-toggle{display:flex;}
}

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

:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px;}

/* ---------- Legal Pages ---------- */
.legal-page{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,4rem) clamp(3rem,7vw,6rem);
}
.legal-page h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem, 4vw, 3rem);
  margin-bottom:0.5rem;
}
.legal-updated{
  font-family:var(--mono); font-size:0.8rem; color:var(--muted);
  margin-bottom:3rem; padding-bottom:2rem; border-bottom:1px solid var(--border);
}
.legal-page h2{
  font-family:var(--serif); font-weight:500;
  font-size:1.3rem; margin-top:2.5rem; margin-bottom:0.8rem;
}
.legal-page h3{
  font-size:1.05rem; font-weight:600; margin-top:1.8rem; margin-bottom:0.6rem;
}
.legal-page p{color:var(--muted); max-width:65ch; margin-bottom:1rem;}
.legal-page a{color:var(--accent-2); border-bottom:1px solid transparent; transition:border-color 0.2s;}
.legal-page a:hover{border-color:var(--accent-2);}
.legal-page ul, .legal-page ol{
  color:var(--muted); margin:0.5rem 0 1.5rem 1.5rem;
}
.legal-page li{margin-bottom:0.5rem;}
.legal-page table{
  width:100%; border-collapse:collapse; margin:1rem 0 1.5rem;
}
.legal-page th, .legal-page td{
  text-align:left; padding:0.7rem 1rem; border-bottom:1px solid var(--border);
}
.legal-page th{
  font-family:var(--mono); font-size:0.8rem; color:var(--accent-2);
  letter-spacing:0.04em; text-transform:uppercase;
}
.legal-page td{color:var(--muted); font-size:0.92rem;}