/* =========================================================================
   YSRA — home page styles
   ========================================================================= */

/* ---------- HERO ---------- */
.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(7rem,12vh,10rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.orb-1{width:46vw;height:46vw;top:-14vw;right:-8vw;background:radial-gradient(circle at 40% 40%, var(--accent-glow), transparent 68%)}
.orb-2{width:40vw;height:40vw;bottom:-16vw;left:-10vw;background:radial-gradient(circle at 60% 40%, color-mix(in srgb,var(--signal) 14%,transparent), transparent 66%);opacity:.3}
.grid-lines{position:absolute;inset:-20%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000,transparent 80%);opacity:.6}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero-copy h1{margin:1.2rem 0 1.5rem}
.hero-meta{display:flex;align-items:center;gap:1.2rem;margin-top:2.4rem;color:var(--muted)}
.hero-meta .mono{font-size:.8rem;letter-spacing:.1em}

/* hero mark + entrance */
.hero-mark-wrap{position:relative;display:grid;place-items:center}
.hero-mark{width:min(380px,76%);overflow:visible}
.hero-mark .ring{fill:none;stroke:var(--ring);stroke-width:7}
.hero-mark .core{fill:var(--core)}
.ring-grp{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .ring-l{animation:driftIn-l 1.5s cubic-bezier(.2,.8,.2,1) both}
  .ring-r{animation:driftIn-r 1.5s cubic-bezier(.2,.8,.2,1) both}
  .hero-mark .core{animation:coreIn 1.1s cubic-bezier(.2,.8,.2,1) 1s both}
  .hero-mark{animation:floatY 7s ease-in-out 2s infinite}
}
@keyframes driftIn-l{0%{transform:translateX(-60px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes driftIn-r{0%{transform:translateX(60px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes coreIn{0%{opacity:0;transform:scale(.4)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mark-labels{position:absolute;inset:0;pointer-events:none}
.ml{position:absolute;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--text-soft);opacity:0;animation:lblIn .6s ease 1.4s both}
.ml-a{top:17%;left:6%}
.ml-b{top:17%;right:6%}
.ml-c{bottom:3%;left:50%;transform:translateX(-50%);color:var(--accent);font-size:.82rem;letter-spacing:.1em}
@keyframes lblIn{from{opacity:0}to{opacity:1}}

/* ticker */
.ticker{position:relative;z-index:2;margin-top:clamp(3rem,7vh,6rem);border-block:1px solid var(--line);overflow:hidden;padding-block:1rem;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;align-items:center;gap:2.2rem;white-space:nowrap;width:max-content;animation:scrollX 28s linear infinite}
.ticker-track span{font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.06em;color:var(--text-soft)}
.ticker-track i{color:var(--accent);font-style:normal;font-weight:700}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- SECTION HEADS ---------- */
.sec-head{max-width:48rem;margin-bottom:3.4rem}
.sec-head h2{margin:1.1rem 0 1.2rem}
.sec-head.center{margin-inline:auto}

/* ---------- PIPELINE ("inside a build") ---------- */
.pipe{overflow:hidden;padding:0}
.pipe-head{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line);background:var(--panel)}
.pipe-head .dots{display:flex;gap:.45rem}
.pipe-head .dots i{width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
.pipe-title{flex:1;color:var(--muted);font-size:.82rem}
.pipe-body{display:grid;grid-template-columns:1.05fr 1fr;min-height:500px}
.pipe-flow{padding:1.7rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1.5rem}
.phase{opacity:.42;transition:opacity .45s;position:relative;padding-left:1.4rem}
.phase::before{content:"";position:absolute;left:.32rem;top:1.5rem;bottom:-1.5rem;width:1px;background:var(--line-strong)}
.phase:last-child::before{display:none}
.phase::after{content:"";position:absolute;left:0;top:.42rem;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);transition:all .4s}
.phase.active,.phase.done{opacity:1}
.phase.active::after{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.phase.done::after{border-color:var(--accent);background:var(--accent)}
.phase-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.phase-no{font-size:.72rem;color:var(--muted);letter-spacing:.1em}
.phase.active .phase-no,.phase.done .phase-no{color:var(--accent)}
.phase-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.phase-tick{margin-left:auto;color:var(--accent);opacity:0;transition:opacity .3s;font-size:.85rem}
.phase.done .phase-tick{opacity:1}
.phase-agents{display:flex;flex-wrap:wrap;gap:.45rem}
.agent{font-size:.72rem;padding:.38em .7em;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--bg);transition:all .35s;white-space:nowrap}
.agent.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-glow)}
.agent.done{color:var(--text-soft);border-color:var(--line-strong);background:transparent}

.pipe-preview{padding:1.7rem;display:flex;flex-direction:column;gap:1rem;background:var(--panel-2)}
.brief{font-size:.82rem;line-height:1.5;color:var(--text-soft);border-left:2px solid var(--accent);padding:.2rem 0 .2rem .9rem}
.preview-frame{flex:1;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow);background:var(--surface);display:flex;flex-direction:column}
.pf-bar{padding:.55rem .9rem;border-bottom:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:.5rem}
.pf-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pf-url{font-size:.74rem;color:var(--muted)}
.pf-screen{position:relative;flex:1;min-height:260px;overflow:hidden}
.pf-skeleton{position:absolute;inset:0;padding:1.1rem;display:flex;flex-direction:column;gap:1rem;transition:opacity .5s}
.sk{background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:8px}
@keyframes shimmer{to{background-position:-200% 0}}
.sk-nav{height:30px}.sk-hero{height:84px}
.sk-row{display:flex;gap:.8rem}.sk-row i{flex:1;height:56px;display:block;background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:8px}
.pf-app{position:absolute;inset:0;opacity:0;transform:scale(.98);transition:opacity .6s,transform .6s;pointer-events:none;display:flex;flex-direction:column}
.pf-screen.ready .pf-app{opacity:1;transform:none}
.pf-screen.ready .pf-skeleton{opacity:0}
.pa-nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.pa-logo{width:22px;height:22px;border-radius:6px;background:var(--accent)}
.pa-links{display:flex;gap:.4rem}.pa-links b{width:30px;height:7px;border-radius:4px;background:var(--line-strong);display:block}
.pa-hero{padding:1.2rem 1rem .9rem;text-align:left}
.pa-hero h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.35rem;margin-bottom:.2rem;letter-spacing:-.02em}
.pa-hero p{color:var(--muted);font-size:.85rem;margin-bottom:.7rem}
.pa-btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-size:.76rem;font-weight:600;padding:.45em .9em;border-radius:8px}
.pa-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.4rem 1rem 1rem}
.pa-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem}
.pa-stat{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem;display:block;color:var(--accent);letter-spacing:-.01em}
.pa-card em{font-style:normal;font-size:.68rem;color:var(--muted)}
.deployed{display:flex;align-items:center;gap:.55rem;color:var(--accent);font-size:.8rem;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.deployed.show{opacity:1;transform:none}
.dep-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.pipe-actions{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.7rem;border-top:1px solid var(--line)}
.build-time{font-size:.78rem;color:var(--muted)}

/* ---------- SWARM ---------- */
.swarm-sec{background:var(--bg-2);border-block:1px solid var(--line);padding-top:clamp(5rem,10vw,8rem)}
.swarm-stage{position:relative;height:340vh}
.swarm-pin{position:sticky;top:0;height:100vh;overflow:hidden}
#swarmCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.swarm-steps{position:absolute;inset:0;pointer-events:none}
.sw-step{position:absolute;left:6vw;bottom:12vh;max-width:32ch;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.sw-step.active{opacity:1;transform:none}
.sw-step span{display:block;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.sw-step p{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.2;letter-spacing:-.02em;color:var(--text)}

/* ---------- CAPABILITIES ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cap{padding:2rem 1.7rem;display:flex;flex-direction:column;gap:.7rem}
.cap-ico{font-size:1.8rem;color:var(--accent);line-height:1;margin-bottom:.4rem}
.cap h3{margin:0}
.cap p{color:var(--text-soft);font-size:.95rem}

/* ---------- METRICS ---------- */
.metrics-sec{background:var(--bg-2);border-block:1px solid var(--line)}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.metric{display:flex;flex-direction:column;gap:.6rem}
.metric-num{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--accent);letter-spacing:-.03em}
.metric-lab{color:var(--text-soft);font-size:.92rem;max-width:24ch}

/* ---------- MANIFESTO ---------- */
.manifesto-sec{background:#0B0C0E;color:#ECEEF1;padding-block:clamp(6rem,12vw,9rem);position:relative;overflow:hidden}
[data-theme="light"] .manifesto-sec{background:#14161C}
.manifesto-sec .noise{opacity:.22}
.manifesto-mark{width:70px;margin:0 auto 2.4rem}
.manifesto-mark .ring{stroke:#ECEEF1}
.manifesto-mark .core{fill:#5FC9B2}
.manifesto{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.26;letter-spacing:-.02em}
.manifesto-sec .grad-text{background:linear-gradient(100deg,#5FC9B2,#9ad9cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.manifesto-by{margin-top:2rem;color:var(--muted);font-size:.8rem;letter-spacing:.12em}

/* ---------- CTA ---------- */
.cta-sec{position:relative;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;width:60vw;height:60vw;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--accent-glow),transparent 65%);pointer-events:none}
.cta-sec h2{margin:1.1rem 0 1.3rem}
.cta-form{display:flex;gap:.7rem;max-width:480px;margin:2.2rem auto 0;flex-wrap:wrap;justify-content:center}
.cta-input{flex:1;min-width:240px;padding:.95em 1.2em;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:.95rem}
.cta-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.cta-fine{margin-top:1.3rem;color:var(--muted);font-size:.74rem;letter-spacing:.08em}

/* ---------- MOBILE MENU ---------- */
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--surface);border-left:1px solid var(--line);z-index:95;transform:translateX(100%);padding:6rem 2rem 2rem;display:none;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-lg)}
body.is-ready .mobile-menu{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.4rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
body.menu-open{overflow:hidden}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:2rem}
  .hero-mark-wrap{order:-1;max-width:300px;justify-self:center;margin-inline:auto}
  .pipe-body{grid-template-columns:1fr}
  .pipe-flow{border-right:none;border-bottom:1px solid var(--line)}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .metrics-grid{grid-template-columns:repeat(2,1fr);gap:2.4rem}
  .sw-step{left:6vw;right:6vw;bottom:10vh}
}
@media (max-width:560px){
  .cap-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr}
}