:root{
  --bg:#070810;
  --bg2:#0e1020;
  --card:rgba(15,18,35,.6);
  --card-strong:rgba(15,18,35,.82);
  --line:rgba(255,255,255,.09);
  --text:#edf3ff;
  --muted:#9ca9c6;
  --cyan:#2ef2ff;
  --violet:#8b5cf6;
  --coral:#ff7e9f;
  --teal:#4cf0c3;
  --gold:#ffd86f;
  --shadow:0 20px 80px rgba(0,0,0,.45);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:radial-gradient(circle at 20% 0%, rgba(46,242,255,.12), transparent 32%), radial-gradient(circle at 80% 12%, rgba(139,92,246,.14), transparent 28%), linear-gradient(180deg, #06070d, #090b15 36%, #070810 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,.2));
  pointer-events:none;
  opacity:.15;
}
canvas#starfield,canvas#phoenixParticles{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-2}
canvas#phoenixParticles{z-index:-1; opacity:.55; filter:blur(.4px)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.site-header,.site-footer,.glass{backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.glass{background:linear-gradient(180deg, rgba(14,16,32,.72), rgba(14,16,32,.5)); border:1px solid var(--line); box-shadow:var(--shadow)}
.site-header{
  position:sticky; top:12px; z-index:30;
  width:min(1320px, calc(100% - 24px));
  margin:12px auto 0;
  padding:14px 18px;
  border-radius:22px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:rgba(9,11,21,.72);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 14px rgba(46,242,255,.22))}
.brand span{font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.02em}
.site-header nav{display:flex; gap:20px; color:var(--muted); font-size:.96rem}
.site-header nav a:hover,.footer-links a:hover{color:var(--text)}
.cta-button,.button{border-radius:999px; padding:12px 18px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:.25s ease}
.cta-button{background:linear-gradient(90deg, rgba(46,242,255,.18), rgba(139,92,246,.18)); border:1px solid rgba(255,255,255,.12)}
.button.primary{background:linear-gradient(90deg, rgba(46,242,255,.85), rgba(139,92,246,.85)); color:#051019; box-shadow:0 12px 35px rgba(46,242,255,.22)}
.button.secondary{border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
.button:hover,.cta-button:hover{transform:translateY(-2px)}
main{width:min(1320px, calc(100% - 24px)); margin:0 auto; position:relative}
.section{padding:76px 0; position:relative}
.hero{padding-top:72px; display:grid; grid-template-columns:1.05fr 1fr; gap:42px; align-items:center; min-height:95vh}
.eyebrow{display:inline-flex; gap:8px; align-items:center; font-size:.85rem; text-transform:uppercase; letter-spacing:.16em; color:var(--cyan); margin-bottom:16px}
.hero-copy h1,.section-head h2,.roots-copy h2{font-family:"Space Grotesk",sans-serif; line-height:.98; margin:0 0 18px}
.hero-copy h1{font-size:clamp(3rem, 7vw, 6rem); max-width:12ch}
.hero-copy p{color:var(--muted); font-size:1.12rem; max-width:60ch; line-height:1.8}
.hero-actions{display:flex; gap:14px; margin:28px 0 30px; flex-wrap:wrap}
.proof-bar{display:flex; flex-wrap:wrap; gap:14px}
.proof-bar > div{padding:16px 20px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03); min-width:130px}
.proof-bar strong{display:block; font-size:1.7rem}
.proof-bar span{font-size:.92rem; color:var(--muted)}
.hero-visual{position:relative; min-height:780px}
.galaxy-wrap{position:absolute; inset:60px 0 60px 0; display:flex; align-items:center; justify-content:center}
#galaxy{position:relative; width:min(880px, 100%); aspect-ratio:1/1; transition:transform .75s cubic-bezier(.2,.8,.2,1)}
#constellationSvg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.hero-center-brand{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:240px; padding:20px; border-radius:26px; z-index:3; display:flex; gap:14px; align-items:center}
.hero-center-brand img{width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 0 22px rgba(46,242,255,.22))}
.hero-center-brand span,.hero-founders span,.spotlight-top span,.graph-info span{display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem}
.hero-center-brand strong,.hero-founders strong{display:block; font-family:"Space Grotesk",sans-serif; font-size:1.15rem}
.hero-center-brand small{color:var(--cyan)}
.hero-founders{position:absolute; right:0; top:22px; width:250px; padding:14px; border-radius:22px; z-index:4}
.hero-founders img{border-radius:18px; margin-bottom:12px}
.floating-card{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.orbit-node{
  position:absolute; left:50%; top:50%; width:130px; aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center; transform-style:preserve-3d; cursor:pointer; z-index:5;
}
.node-core{
  width:100%; height:100%; border-radius:50%; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:14px;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,.04) 30%, rgba(8,10,18,.92));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 32px currentColor, inset 0 0 32px rgba(255,255,255,.05);
}
.orbit-node.active .node-core,.orbit-node:hover .node-core{transform:scale(1.08); border-color:rgba(255,255,255,.24)}
.orbit-node .label{font-weight:700; font-size:.86rem}
.orbit-node .role{font-size:.68rem; color:#d4dbef; max-width:11ch; line-height:1.35}
.node-ring{position:absolute; inset:-10px; border-radius:50%; border:1px dashed rgba(255,255,255,.15); animation:spin 22s linear infinite}
.orbit-node.active .node-ring{border-color:rgba(46,242,255,.45)}
@keyframes spin{to{transform:rotate(360deg)}}
.platform-spotlight{position:absolute; left:0; bottom:0; width:min(500px, 100%); padding:20px 22px; border-radius:24px; z-index:4}
.spotlight-top{display:flex; gap:16px; align-items:center; margin-bottom:10px}
.spotlight-icon{width:54px; height:54px; border-radius:16px; border:1px solid var(--line); display:grid; place-items:center; background:rgba(255,255,255,.03)}
.spotlight-top h3,.graph-info h3{margin:4px 0 0; font-family:"Space Grotesk",sans-serif; font-size:1.35rem}
#spotlightDesc,.graph-info p{color:var(--muted); line-height:1.7}
#spotlightBullets{padding-left:18px; margin:10px 0 0; color:#dbe6ff}
#spotlightBullets li{margin:8px 0}
.marquee-section{padding-top:12px}
.marquee{overflow:hidden; border-radius:18px; padding:18px 0}
.marquee-track{display:flex; width:max-content; gap:36px; animation:marquee 28s linear infinite; font-weight:700; font-family:"Space Grotesk",sans-serif; color:#d9e5ff}
@keyframes marquee{to{transform:translateX(-50%)}}
.section-head{max-width:920px; margin-bottom:34px}
.section-head h2{font-size:clamp(2.1rem,4.8vw,4.2rem)}
.section-head p{color:var(--muted); line-height:1.8; max-width:68ch}
.platform-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.platform-card{padding:20px; border-radius:26px; min-height:330px; position:relative; overflow:hidden; transition:.25s ease}
.platform-card:hover{transform:translateY(-4px)}
.platform-card::after{content:""; position:absolute; inset:auto -20% -30% auto; width:160px; height:160px; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 60%); opacity:.4; pointer-events:none}
.platform-mark{width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin-bottom:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.platform-mark img{width:42px; height:42px; object-fit:contain}
.platform-title{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.platform-title h3{margin:0; font-family:"Space Grotesk",sans-serif; font-size:1.3rem}
.platform-title span{color:var(--cyan); font-size:.88rem}
.platform-card p{color:var(--muted); line-height:1.75; min-height:88px}
.platform-card ul{padding-left:18px; margin:0; color:#d9e1f5}
.platform-card li{margin:8px 0}
.advice-mark,.growthware-mark,.curematics-mark{position:relative}
.advice-mark span,.growthware-mark span,.curematics-mark span{display:block; width:38px; height:38px; position:relative}
.advice-mark span::before,.advice-mark span::after,.growthware-mark span::before,.growthware-mark span::after,.curematics-mark span::before,.curematics-mark span::after{content:""; position:absolute}
.advice-mark span::before{inset:0; border:2px solid var(--cyan); border-radius:50%}
.advice-mark span::after{left:9px; top:9px; width:20px; height:20px; border-radius:50% 50% 50% 0; border:2px solid var(--cyan); transform:rotate(-45deg)}
.growthware-mark span::before{inset:2px 2px auto auto; width:18px; height:18px; background:var(--violet); box-shadow:-20px 0 0 rgba(46,242,255,.9), 0 20px 0 rgba(76,240,195,.9), -20px 20px 0 rgba(255,126,159,.9); border-radius:5px}
.growthware-mark span::after{inset:0; border:2px solid rgba(255,255,255,.15); border-radius:10px}
.curematics-mark span::before{left:8px; top:18px; width:24px; height:2px; background:linear-gradient(90deg,var(--teal),var(--cyan)); box-shadow:10px -10px 0 var(--teal), 20px -18px 0 var(--cyan)}
.curematics-mark span::after{left:7px; top:5px; width:6px; height:6px; background:var(--teal); border-radius:50%; box-shadow:10px 10px 0 var(--teal), 20px 0 0 var(--cyan), 30px -8px 0 var(--cyan)}
.bravatar-mark svg{width:44px; height:44px}
.factory-flow{display:flex; gap:12px; align-items:stretch; padding:26px; border-radius:26px; overflow:auto}
.flow-step{min-width:180px; padding:20px; border-radius:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)}
.flow-step span{display:inline-flex; width:40px; height:40px; border-radius:999px; background:rgba(46,242,255,.1); color:var(--cyan); align-items:center; justify-content:center; font-weight:700; margin-bottom:14px}
.flow-step strong{display:block; font-family:"Space Grotesk",sans-serif; margin-bottom:8px}
.flow-step small{color:var(--muted); line-height:1.6}
.flow-arrow{width:64px; min-width:64px; position:relative}
.flow-arrow::before{content:""; position:absolute; left:8px; right:8px; top:50%; height:1px; background:linear-gradient(90deg, rgba(46,242,255,.1), rgba(46,242,255,.7));}
.flow-arrow::after{content:""; position:absolute; right:9px; top:calc(50% - 6px); border:6px solid transparent; border-left-color:var(--cyan)}
.graph-panel{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; border-radius:30px; padding:18px}
.build-graph{position:relative; min-height:520px; border-radius:24px; border:1px solid rgba(255,255,255,.06); background:radial-gradient(circle at 50% 20%, rgba(46,242,255,.08), transparent 28%), rgba(255,255,255,.02); overflow:hidden}
.graph-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); background:rgba(8,10,18,.9); box-shadow:0 0 34px rgba(139,92,246,.25)}
.graph-center img{width:76px; height:76px; object-fit:contain}
.graph-node{position:absolute; width:18px; height:18px; border-radius:50%; cursor:pointer; transform:translate(-50%,-50%); box-shadow:0 0 18px currentColor}
.graph-node::after{content:attr(data-name); position:absolute; left:50%; top:24px; transform:translateX(-50%); white-space:nowrap; font-size:.72rem; color:#dfe8ff; opacity:.9}
.graph-link{position:absolute; height:1px; transform-origin:left center; background:linear-gradient(90deg, rgba(46,242,255,.18), rgba(139,92,246,.45), transparent)}
.graph-info{border-radius:24px; padding:22px}
.build-filters{display:flex; flex-wrap:wrap; gap:10px; padding:12px; border-radius:20px; margin-bottom:20px}
.filter{border:0; background:rgba(255,255,255,.05); color:#dfe8ff; padding:11px 15px; border-radius:999px; cursor:pointer; font-weight:700}
.filter.active{background:linear-gradient(90deg, rgba(46,242,255,.24), rgba(139,92,246,.22)); color:#fff}
.build-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.build-card{padding:18px; border-radius:24px; position:relative; overflow:hidden; transition:.25s ease}
.build-card:hover{transform:translateY(-4px); box-shadow:0 18px 45px rgba(0,0,0,.35)}
.build-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px}
.build-top h3{margin:0; font-family:"Space Grotesk",sans-serif; font-size:1.1rem}
.build-status{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12)}
.status-live{color:#4cf0c3}.status-beta{color:#ffd86f}.status-internal{color:#8b5cf6}.status-prototype{color:#ff7e9f}
.build-meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.build-meta span{font-size:.74rem; color:#cad4ee; border:1px solid rgba(255,255,255,.08); padding:6px 9px; border-radius:999px}
.build-card p{color:var(--muted); line-height:1.7}
.build-logic{margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); color:#dce6ff; font-size:.93rem; line-height:1.7}
.roots-section{display:grid; grid-template-columns:.9fr 1.1fr; gap:26px; align-items:center}
.roots-art{padding:22px; border-radius:28px}
.roots-art img{border-radius:22px}
.roots-copy p, .roots-copy blockquote{color:var(--muted); line-height:1.9; font-size:1.05rem}
.roots-copy blockquote{border-left:3px solid var(--cyan); padding-left:18px; margin:18px 0 0; color:#dce7ff}
.site-footer{width:min(1320px, calc(100% - 24px)); margin:0 auto 24px; padding:18px 20px; border-radius:22px; border:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:rgba(9,11,21,.72)}
.site-footer span{display:block; color:var(--muted); margin-top:4px}
.footer-links{display:flex; gap:16px; color:var(--muted)}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:none}
@media (max-width:1180px){
  .hero{grid-template-columns:1fr; padding-top:46px}
  .platform-grid,.build-grid{grid-template-columns:repeat(2,1fr)}
  .graph-panel,.roots-section{grid-template-columns:1fr}
  .hero-visual{min-height:860px}
  .site-header nav{display:none}
}
@media (max-width:760px){
  .platform-grid,.build-grid{grid-template-columns:1fr}
  .site-header,.site-footer{width:calc(100% - 16px)}
  main{width:calc(100% - 16px)}
  .hero-copy h1{max-width:none}
  .hero-visual{min-height:900px}
  .hero-founders{position:relative; width:100%; top:auto; right:auto; margin-bottom:12px}
  .galaxy-wrap{top:180px; bottom:200px}
  .platform-spotlight{width:100%}
  .flow-arrow{display:none}
  .factory-flow{flex-direction:column}
}