/* ============================================================
   VRUSHYAM OS SHOWCASE — page styles (theme-aware, GPU-cheap)
   Requires: assets/site-shell.css
   ============================================================ */
:root{
  --v-grad: linear-gradient(120deg, var(--accent3) 0%, var(--accent2) 55%, var(--accent) 100%);
  --v-grad2: linear-gradient(120deg, var(--accent) 0%, var(--accent2) 100%);
  --v-ease: cubic-bezier(.22,.9,.3,1);
  --v-r: 22px;
}

.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.band{padding:clamp(64px,8vw,110px) 0;}
.band-alt{background:var(--bg2);}

.os h1,.os h2,.os h3{letter-spacing:-.02em; line-height:1.12; font-weight:800;}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.55rem; font-weight:600;
}
.eyebrow i{width:8px; height:8px; border-radius:50%; background:var(--v-grad2); flex:none;}
.h2{font-size:clamp(1.8rem,3.4vw,2.7rem); margin:.7rem 0 .9rem;}
.sub{color:var(--text2); max-width:600px; font-size:1rem; line-height:1.7;}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.9rem; text-decoration:none;
  padding:13px 27px; border-radius:100px;
  transition:transform .25s var(--v-ease), box-shadow .25s var(--v-ease);
}
.btn-primary{background:var(--accent); color:#000; box-shadow:0 8px 26px -8px rgba(0,229,160,.5);}
.btn-primary:hover{transform:translateY(-3px); background:var(--accent2); box-shadow:0 14px 32px -8px rgba(0,184,217,.55); color:#000;}
.btn-ghost{border:2px solid var(--border); background:var(--card); color:var(--text);}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--glow);}
.btn:focus-visible{outline:3px solid var(--accent2); outline-offset:3px;}

/* reveal on scroll — transform/opacity only */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s var(--v-ease), transform .7s var(--v-ease);}
.rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;} .rv-d3{transition-delay:.24s;}

/* scenes pause offscreen */
.scene .anim{animation-play-state:paused;}
.scene.live .anim{animation-play-state:running;}

/* ---------- HERO ---------- */
.os-hero{padding:150px 0 60px; position:relative; overflow:hidden;}
@media (max-width:768px){.os-hero{padding-top:120px;}}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;} .hero-art{order:-1; max-width:520px; margin:0 auto;}}
.os-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);}
.os-hero h1 .grad{background:var(--v-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.os-hero .sub{margin:1.2rem 0 2rem; font-size:1.05rem;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-proof{display:flex; gap:26px; margin-top:2.4rem; flex-wrap:wrap;}
.proof{display:flex; align-items:center; gap:10px; color:var(--text2); font-size:.86rem; font-weight:500;}
.proof b{font-size:1.25rem; color:var(--text); font-weight:800;}
.hero-art{position:relative;}
.hero-art::before{
  content:''; position:absolute; inset:6% 2%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(0,229,160,.12), rgba(0,184,217,.07) 55%, transparent 75%);
}

/* ---------- MARQUEE (module icons) ---------- */
.marquee{overflow:hidden; padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg2);}
.mq-track{display:flex; gap:14px; width:max-content; animation:mq 34s linear infinite;}
.marquee:hover .mq-track{animation-play-state:paused;}
.mq-chip{
  flex:none; display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:.85rem; color:var(--text2);
  padding:9px 20px 9px 12px; border:1.5px solid var(--border); border-radius:100px; background:var(--card);
}
.mq-chip img{width:26px; height:26px; object-fit:contain;}
.mq-chip.mq-brand{
  border-color:var(--accent); background:var(--card2); color:var(--text);
  box-shadow:0 0 24px rgba(0,229,160,.18);
}
.mq-chip.mq-brand img{width:30px; height:30px; border-radius:8px;}
@keyframes mq{to{transform:translateX(-50%);}}

/* ---------- FEATURE ROWS ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; padding:clamp(42px,5.5vw,72px) 0;}
.feature.flip .f-art{order:2;}
@media (max-width:900px){.feature,.feature.flip .f-art{grid-template-columns:1fr; order:0;} .f-art{max-width:480px; margin:0 auto;}}
.f-copy .h3{font-size:clamp(1.45rem,2.5vw,2rem); margin:.65rem 0 .8rem; letter-spacing:-.02em;}
.f-copy p{color:var(--text2); max-width:480px; line-height:1.7;}
.f-list{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem;}
.f-list li{display:flex; gap:.65rem; align-items:flex-start; font-weight:500; font-size:.9rem;}
.f-list svg{flex:none; margin-top:3px;}
.f-art{
  background:var(--card); border:1px solid var(--border); border-radius:var(--v-r);
  box-shadow:var(--shadow); padding:16px; transition:transform .4s var(--v-ease), box-shadow .4s;
}
.f-art:hover{transform:translateY(-6px); box-shadow:var(--shadow), var(--glow);}
.scene svg{display:block; width:100%; height:auto; border-radius:14px;}

/* scene surface colors (theme-aware via vars) */
.sc-bg{fill:var(--bg3);}
.sc-card{fill:var(--card);}
.sc-card2{fill:var(--card2);}
.sc-line{stroke:var(--border);}
.sc-linefill{fill:var(--border);}
.sc-text{fill:var(--text);}
.sc-text2{fill:var(--text2);}
.sc-text3{fill:var(--text3);}

/* ---------- ORBIT (icons, images instead of names) ---------- */
.orbit-band{background:var(--bg2); overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.orbit-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;}
@media (max-width:960px){.orbit-grid{grid-template-columns:1fr;}}
.orbit-stage{position:relative; aspect-ratio:1; max-width:560px; margin:0 auto; width:100%;}
.o-ring{position:absolute; inset:0; border:1px dashed var(--border); border-radius:50%;}
.o-ring.r2{inset:16%;} .o-ring.r3{inset:33%;}
.o-spin{position:absolute; inset:0; animation:spin 46s linear infinite;}
.o-spin.rev{inset:16%; animation:spinRev 34s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes spinRev{to{transform:rotate(-360deg);}}
.o-node{position:absolute; top:0; left:50%; transform:translate(-50%,-50%);}
.o-node .chipwrap{animation:spinRev 46s linear infinite;}
.o-spin.rev .o-node .chipwrap{animation:spin 34s linear infinite;}
.o-chip{
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:var(--card); border:1.5px solid var(--border);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.55);
  transition:border-color .3s, transform .3s var(--v-ease), box-shadow .3s;
  position:relative;
}
.o-chip img{width:34px; height:34px; object-fit:contain;}
.o-chip:hover{border-color:var(--accent); transform:scale(1.12); box-shadow:var(--glow);}
.o-chip em{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) scale(.85);
  font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.06em; white-space:nowrap;
  background:var(--card2); border:1px solid var(--border); color:var(--text);
  padding:3px 10px; border-radius:100px; opacity:0; transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.o-chip:hover em{opacity:1; transform:translateX(-50%) scale(1);}
.o-core{position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none;}
.o-core img{width:96px; height:96px; border-radius:26px; margin:0 auto; box-shadow:0 0 44px rgba(0,229,160,.35); display:block;}
.o-core .cap{font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.24em; color:var(--text3); margin-top:14px;}
.orbit-stage:hover .o-spin, .orbit-stage:hover .chipwrap{animation-play-state:paused;}

/* ---------- STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--v-r); padding:28px 24px; box-shadow:var(--shadow); text-align:center;}
.stat b{font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:800; background:var(--v-grad2); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; line-height:1;}
.stat span{font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); display:block; margin-top:10px;}

/* ---------- ROADMAP ---------- */
.road{position:relative; max-width:760px; margin:52px auto 0; padding-left:44px;}
.road::before{
  content:''; position:absolute; left:15px; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:var(--v-grad2);
  transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--v-ease);
}
.road.in::before{transform:scaleY(1);}
.r-item{position:relative; padding:0 0 32px;}
.r-item::before{
  content:''; position:absolute; left:-37px; top:6px; width:17px; height:17px; border-radius:50%;
  background:var(--bg); border:4px solid var(--accent); box-shadow:0 0 0 5px var(--bg2);
  transform:scale(0); transition:transform .5s var(--v-ease);
}
.road.in .r-item::before{transform:scale(1);}
.road.in .r-item:nth-child(2)::before{transition-delay:.25s;}
.road.in .r-item:nth-child(3)::before{transition-delay:.5s;}
.road.in .r-item:nth-child(4)::before{transition-delay:.75s;}
.road.in .r-item:nth-child(5)::before{transition-delay:1s;}
.r-item h3{font-size:1.1rem; display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.r-item .ph{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.12em; color:var(--accent); background:var(--card); border:1px solid var(--border); border-radius:100px; padding:4px 12px;}
.r-item p{color:var(--text2); font-size:.9rem; margin-top:.4rem; max-width:520px; line-height:1.7;}

/* ---------- CTA ---------- */
.cta-card{
  background:var(--card); border:1px solid var(--border); border-radius:30px;
  padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.cta-card h2{font-size:clamp(1.8rem,3.6vw,2.8rem);}
.cta-card p{color:var(--text2); max-width:520px; margin:1rem auto 2rem; line-height:1.7;}
.cta-card .glowline{position:absolute; left:0; right:0; top:0; height:3px; background:var(--v-grad);}

/* ---------- keyframes (transform/opacity/dash only) ---------- */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes floaty2{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
@keyframes pulse{0%{transform:scale(.6); opacity:.7;}80%{transform:scale(1.6); opacity:0;}100%{opacity:0;}}
@keyframes blink{0%,100%{opacity:.25;}50%{opacity:1;}}
@keyframes dashflow{to{stroke-dashoffset:-120;}}
@keyframes growbar{from{transform:scaleY(.12);}to{transform:scaleY(1);}}
@keyframes drawline{from{stroke-dashoffset:420;}to{stroke-dashoffset:0;}}
@keyframes typedot{0%,60%,100%{transform:translateY(0); opacity:.4;}30%{transform:translateY(-4px); opacity:1;}}
@keyframes sweep{to{transform:rotate(360deg);}}
@keyframes popin{from{transform:scale(0);}to{transform:scale(1);}}
@keyframes slidechat{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:translateY(0);}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .rv{opacity:1; transform:none;}
  .road::before,.r-item::before{transform:none;}
}