/* =========================================================
   ORBIT — stylesheet
   ========================================================= */

:root{
  /* colour */
  --void:        #05060d;
  --navy-900:    #080b18;
  --navy-800:    #0c1224;
  --navy-700:    #131b36;
  --line:        rgba(255,255,255,.09);
  --line-soft:   rgba(255,255,255,.05);

  --blue:        #3d6bff;
  --blue-bright: #5c86ff;
  --blue-deep:   #1c2f7a;
  --cyan:        #49e0f2;
  --purple:      #8a7bff;

  --white:       #f4f6fc;
  --muted:       #9aa2c2;
  --muted-dim:   #616a8e;

  --radius-lg:   28px;
  --radius-md:   18px;
  --radius-sm:   12px;

  --container:   1180px;
  --nav-h:       76px;

  --ease:        cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:'Unbounded', 'Inter', sans-serif;
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
}

.eyebrow-label{ color:var(--cyan); } /* unused placeholder guard */

::selection{ background:var(--blue); color:#fff; }

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

/* ---------------------------------------------------------
   Shared decorative bits
   --------------------------------------------------------- */

.starfield{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.star{
  position:absolute;
  width:2px; height:2px;
  background:#fff;
  border-radius:50%;
  animation:twinkle var(--dur,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  opacity:.4;
}
@keyframes twinkle{
  0%,100%{ opacity:.15; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.4); }
}

.glow-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}

.ring{
  position:absolute;
  border:1px solid rgba(93,140,255,.35);
  border-radius:50%;
  box-shadow:0 0 40px rgba(61,107,255,.12) inset;
}

.section{
  position:relative;
  padding:140px 0;
}
@media (max-width:900px){
  .section{ padding:96px 0; }
}

.section-head{
  max-width:620px;
  margin-bottom:72px;
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}
.section-head h2{
  font-size:clamp(2rem, 3.4vw, 2.75rem);
  margin-bottom:18px;
}
.section-head p{
  color:var(--muted);
  font-size:1.08rem;
  max-width:52ch;
}
.section-head.center p{ margin-inline:auto; }

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--blue-bright), var(--blue));
  color:#fff;
  box-shadow:0 10px 30px -8px rgba(61,107,255,.55);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px -8px rgba(61,107,255,.7);
}
.btn-ghost{
  background:rgba(255,255,255,.03);
  color:var(--white);
  border-color:var(--line);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.07);
  transform:translateY(-2px);
}
.btn-block{ width:100%; }

/* chips / badges */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(19,27,54,.7);
  border:1px solid var(--line);
  font-size:.86rem;
  color:var(--muted);
  backdrop-filter:blur(6px);
}
.chip .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  flex-shrink:0;
}

/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */
.nav-wrap{
  position:fixed;
  top:18px; left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding-inline:20px;
}
.nav{
  width:100%;
  max-width:920px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px 12px 10px 20px;
  background:rgba(9,13,26,.72);
  border:1px solid var(--line);
  border-radius:20px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:26px; width:auto; }

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-links a{
  padding:9px 14px;
  border-radius:12px;
  font-size:.92rem;
  color:var(--muted);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--white); background:rgba(255,255,255,.05); }

.nav-cta .btn{ padding:11px 22px; font-size:.9rem; }

.nav-toggle{
  display:none;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--white);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:'';
  display:block;
  width:16px; height:2px;
  background:currentColor;
  position:relative;
  transition:transform .25s;
}
.nav-toggle span::before{ position:absolute; top:-5px; }
.nav-toggle span::after{ position:absolute; top:5px; }

@media (max-width:760px){
  .nav-links{
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    background:rgba(9,13,26,.96);
    border:1px solid var(--line);
    border-radius:16px;
    padding:10px;
    gap:2px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 14px; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:var(--nav-h);
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 78% 32%, rgba(61,107,255,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(73,224,242,.08), transparent 65%),
    var(--void);
}

.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:24px;
}

.hero-copy{ position:relative; z-index:3; padding-block:60px; }

.hero-copy h1{
  font-size:clamp(2.6rem, 5vw, 4.1rem);
  margin-bottom:22px;
  max-width:12ch;
}
.hero-copy .lede{
  color:var(--muted);
  font-size:1.15rem;
  max-width:44ch;
  margin-bottom:36px;
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.hero-fineprint{
  color:var(--muted-dim);
  font-size:.88rem;
}

.hero-stage{
  position:relative;
  height:640px;
}
.hero-orbit-ring{
  position:absolute;
  top:50%; left:50%;
  width:560px; height:560px;
  transform:translate(-50%,-50%) rotate(-18deg);
  border:1px solid rgba(93,140,255,.28);
  border-radius:50%;
  box-shadow:0 0 60px rgba(61,107,255,.08) inset;
}
.hero-orbit-ring::after{
  content:'';
  position:absolute;
  top:50%; left:-4px;
  width:8px; height:8px;
  background:var(--cyan);
  border-radius:50%;
  box-shadow:0 0 12px 3px var(--cyan);
  transform:translateY(-50%);
}
.hero-orbit-ring.r2{
  width:720px; height:720px;
  border-color:rgba(93,140,255,.14);
  transform:translate(-50%,-50%) rotate(10deg);
}
.hero-orbit-ring,
.hero-orbit-ring.r2{
  animation:spin-slow 60s linear infinite;
}
.hero-orbit-ring.r2{ animation-duration:90s; animation-direction:reverse; }
@keyframes spin-slow{ to{ transform:translate(-50%,-50%) rotate(342deg); } }

.hero-glow{
  position:absolute;
  top:50%; left:50%;
  width:480px; height:480px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(61,107,255,.45), transparent 70%);
  filter:blur(30px);
}

.hero-mascot{
  position:absolute;
  top:50%; left:50%;
  width:min(560px, 90%);
  transform:translate(-50%,-50%);
  z-index:2;
  filter:drop-shadow(0 30px 60px rgba(0,0,20,.6));
  animation:float-slow 7s ease-in-out infinite;
}
@keyframes float-slow{
  0%,100%{ transform:translate(-50%,-50%) translateY(0); }
  50%{ transform:translate(-50%,-50%) translateY(-16px); }
}

.hero-tag{
  position:absolute;
  z-index:3;
  animation:float-slow 6s ease-in-out infinite;
}
.hero-tag.t1{ top:10%; left:2%; animation-delay:.2s; }
.hero-tag.t2{ top:6%; right:6%; animation-delay:1.1s; }
.hero-tag.t3{ bottom:16%; left:-4%; animation-delay:.6s; }
.hero-tag.t4{ bottom:6%; right:10%; animation-delay:1.6s; }

@media (max-width:1020px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ padding-block:20px 0; }
  .hero-copy h1{ max-width:none; margin-inline:auto; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-stage{ height:440px; }
  .hero-tag{ display:none; }
}
@media (max-width:520px){
  .hero-stage{ height:340px; }
  .hero-orbit-ring{ width:340px; height:340px; }
  .hero-orbit-ring.r2{ width:420px; height:420px; }
}

/* ---------------------------------------------------------
   Feature showcase (alternating)
   --------------------------------------------------------- */
.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  padding-block:96px;
  border-top:1px solid var(--line-soft);
}
.feature-row:first-of-type{ border-top:none; }
.feature-row.reverse{ direction:rtl; }
.feature-row.reverse > *{ direction:ltr; }

.feature-text h3{
  font-size:clamp(1.7rem, 2.6vw, 2.3rem);
  margin-bottom:16px;
}
.feature-text p{
  color:var(--muted);
  font-size:1.05rem;
  max-width:42ch;
  margin-bottom:24px;
}
.feature-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.feature-visual{
  position:relative;
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-visual .fv-glow{
  position:absolute;
  width:70%; height:70%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(61,107,255,.25), transparent 70%);
  filter:blur(40px);
  z-index:0;
}
.feature-visual .fv-mascot{
  position:relative;
  width:54%;
  z-index:2;
  filter:drop-shadow(0 20px 40px rgba(0,0,20,.5));
}
.feature-visual.mascot-bg .fv-mascot{
  position:absolute;
  width:90%;
  opacity:.16;
  z-index:0;
  filter:none;
}

/* discord-style mock card */
.mock-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:360px;
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px;
  box-shadow:0 30px 60px -20px rgba(0,0,10,.6);
}
.mock-card.offset{ margin-left:auto; margin-right:8%; }
.mock-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.mock-avatar{
  width:34px; height:34px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--blue-bright), var(--purple));
  flex-shrink:0;
}
.mock-head strong{ font-size:.92rem; }
.mock-head span{ display:block; color:var(--muted-dim); font-size:.78rem; }
.mock-bar{
  border-left:3px solid var(--blue-bright);
  padding:10px 14px;
  background:rgba(61,107,255,.07);
  border-radius:0 10px 10px 0;
  font-size:.86rem;
  color:var(--muted);
  margin-bottom:10px;
}
.mock-bar b{ color:var(--white); }
.mock-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.mock-actions button{
  padding:8px 14px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.8rem;
}
.mock-actions button.on{
  background:rgba(61,107,255,.16);
  border-color:rgba(93,140,255,.4);
  color:var(--white);
}

.role-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%; max-width:340px;
}
.role-pill{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:.85rem;
}
.role-pill .dot{ width:8px; height:8px; border-radius:50%; }

@media (max-width:860px){
  .feature-row{ grid-template-columns:1fr; gap:36px; padding-block:64px; }
  .feature-row.reverse{ direction:ltr; }
  .feature-visual{ order:-1; }
}

/* ---------------------------------------------------------
   One Bot — constellation section
   --------------------------------------------------------- */
.constellation{
  position:relative;
  width:100%;
  max-width:640px;
  aspect-ratio:1/1;
  margin-inline:auto;
}
.constellation-core{
  position:absolute;
  top:50%; left:50%;
  width:38%;
  transform:translate(-50%,-50%);
  z-index:3;
  filter:drop-shadow(0 20px 50px rgba(0,0,20,.6));
  animation:float-slow 7s ease-in-out infinite;
}
.constellation-ring{
  position:absolute;
  inset:8%;
  border:1px dashed rgba(93,140,255,.3);
  border-radius:50%;
}
.const-item{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:2;
}
.const-item .chip{ animation:float-slow 5.5s ease-in-out infinite; }

/* ---------------------------------------------------------
   Pricing
   --------------------------------------------------------- */
.pricing-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.price-card{
  position:relative;
  background:linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border:1px solid rgba(93,140,255,.28);
  border-radius:var(--radius-lg);
  padding:44px;
  box-shadow:0 40px 90px -30px rgba(20,40,120,.5);
}
.price-card::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg, rgba(93,140,255,.5), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.price-tag-label{ color:var(--muted); font-size:.95rem; margin-bottom:6px; }
.price-amount{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:6px;
}
.price-amount .num{
  font-family:'Unbounded', sans-serif;
  font-size:4rem;
  font-weight:600;
}
.price-amount .term{
  color:var(--cyan);
  font-weight:600;
  letter-spacing:.04em;
  font-size:.95rem;
}
.price-sub{ color:var(--muted); margin-bottom:28px; }
.price-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.price-list li{
  display:flex; align-items:center; gap:10px;
  font-size:.96rem;
  color:var(--white);
}
.price-list li svg{ flex-shrink:0; color:var(--cyan); }

.pricing-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.pricing-visual img{ width:70%; filter:drop-shadow(0 25px 50px rgba(0,0,20,.5)); animation:float-slow 7s ease-in-out infinite; }

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

/* ---------------------------------------------------------
   How it works
   --------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.step{
  position:relative;
  padding:32px 26px;
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.step .step-no{
  font-family:'Unbounded', sans-serif;
  font-size:.85rem;
  color:var(--cyan);
  margin-bottom:18px;
  display:block;
}
.step h4{ font-size:1.25rem; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:.95rem; }

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

/* ---------------------------------------------------------
   Commands
   --------------------------------------------------------- */
.command-panel{
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:10px;
  max-width:720px;
  margin-inline:auto;
  box-shadow:0 40px 80px -30px rgba(0,0,10,.6);
}
.command-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-radius:12px;
}
.command-row:hover{ background:rgba(255,255,255,.03); }
.command-row + .command-row{ border-top:1px solid var(--line-soft); }
.command-icon{
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(61,107,255,.16);
  border:1px solid rgba(93,140,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan);
  flex-shrink:0;
  font-family:'Unbounded', sans-serif;
  font-size:.8rem;
}
.command-main{ min-width:0; }
.command-main .cmd{
  font-family:'Unbounded', sans-serif;
  font-size:.92rem;
  color:var(--white);
}
.command-main .cmd span{ color:var(--muted-dim); font-weight:400; margin-left:8px; }
.command-main .desc{ color:var(--muted); font-size:.85rem; margin-top:2px; }

/* ---------------------------------------------------------
   Permissions
   --------------------------------------------------------- */
.perm-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.perm-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.perm-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--navy-800);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.88rem;
  color:var(--muted);
}
.perm-item svg{ color:var(--cyan); flex-shrink:0; }

@media (max-width:900px){
  .perm-wrap{ grid-template-columns:1fr; gap:32px; }
  .perm-list{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Final CTA
   --------------------------------------------------------- */
.final-cta{
  position:relative;
  overflow:hidden;
  padding:160px 0;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(61,107,255,.28), transparent 65%),
    var(--void);
}
.final-cta .hero-mascot{
  position:absolute;
  top:50%; left:50%;
  width:420px;
  transform:translate(-50%,-46%);
  opacity:.9;
  z-index:0;
}
.final-cta-inner{ position:relative; z-index:2; }
.final-cta h2{
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  max-width:14ch;
  margin-inline:auto;
  margin-bottom:20px;
}
.final-cta p{
  color:var(--muted);
  max-width:44ch;
  margin-inline:auto;
  margin-bottom:36px;
  font-size:1.08rem;
}
.final-cta .hero-actions{ justify-content:center; }

@media (max-width:700px){
  .final-cta{ padding:120px 0; }
  .final-cta .hero-mascot{ width:280px; }
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding:64px 0 32px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.footer-brand img{ height:24px; margin-bottom:14px; }
.footer-brand p{ color:var(--muted-dim); font-size:.92rem; max-width:32ch; }
.footer-links{
  display:flex;
  gap:56px;
  flex-wrap:wrap;
}
.footer-col h5{
  font-size:.8rem;
  color:var(--muted-dim);
  margin-bottom:14px;
  font-weight:600;
}
.footer-col a{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  padding:5px 0;
}
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  border-top:1px solid var(--line-soft);
  padding-top:24px;
  color:var(--muted-dim);
  font-size:.84rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}