/* ====== Base ====== */
:root{
    --bg: #0C0514;
    --bg-2: #130824;
    --fg: #F2ECFF;
    --muted: #C7BEE4;
    --primary: #A785FF;
    --primary-2: #6E4BFF;
    --card: #1B1230;
    --border: #2F2150;
  }
  
  *{ box-sizing:border-box }
  html,body{ height:100% }
  body{
    margin:0;
    color:var(--fg);
    font: 400 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
    background: radial-gradient(1200px 700px at 70% -10%, rgba(167,133,255,.22), transparent 50%),
                radial-gradient(900px 600px at 20% -10%, rgba(110,75,255,.18), transparent 50%),
                var(--bg);
    overflow-x: hidden;
  }
  
  /* decorative layers */
  .bg-grad{
    position: fixed; inset: -20vmax; pointer-events:none; z-index:-2;
    background: radial-gradient(60% 50% at 75% 20%, rgba(167,133,255,.18), transparent 60%),
                radial-gradient(50% 40% at 30% 10%, rgba(110,75,255,.22), transparent 60%);
    filter: blur(20px);
  }
  .bg-noise{
    position: fixed; inset:0; z-index:-1; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/feGaussianBlur%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }
  
  /* ====== Layout ====== */
  .container{ width:min(1200px, 94%); margin-inline:auto }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; padding:.75rem 1.1rem; border-radius:.75rem;
    text-decoration:none; font-weight:600; letter-spacing:.2px;
    border:1px solid transparent; transition: all .2s ease;
  }
  .btn--primary{
    background: linear-gradient(90deg, var(--primary-2), var(--primary));
    color:#0c0514; box-shadow: 0 10px 24px rgba(110,75,255,.35);
  }
  .btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(110,75,255,.45) }
  .btn--ghost{
    color:var(--fg); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
  }
  .btn--ghost:hover{ background: rgba(255,255,255,.12) }
  .btn--lg{ padding:1rem 1.4rem; font-size:1.05rem }
  
  /* ====== Navbar ====== */
  .nav{ position:sticky; top:0; backdrop-filter: blur(10px); background:rgba(12,5,20,.25); z-index:40 }
  .nav__row{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0 }
  .brand__img{ height:36px; display:block }
  .nav__links{ display:none; gap:2rem }
  .nav__links a{ color:var(--muted); text-decoration:none }
  .nav__links a:hover{ color:var(--fg) }
  .nav__cta{ display:flex; gap:.75rem }
  @media (min-width: 900px){
    .nav__links{ display:flex }
    .brand__img{ height:44px }
  }
  
  /* ====== Hero ====== */
  .hero{ padding: 7rem 0 4rem }
  .hero__grid{ display:grid; gap:2rem; align-items:center; grid-template-columns: 1.05fr .95fr }
  @media (max-width: 900px){
    .hero__grid{ grid-template-columns: 1fr; }
    .hero__right{ order:-1 } /* image above on mobile */
  }
  .eyebrow{
    margin:0 0 1rem; color:#b29bf8; letter-spacing:.16em; font-weight:700; font-size:.8rem;
  }
  .hero__title{
    margin:.2rem 0 1rem; font-weight:800; letter-spacing:-.02em;
    font-size: clamp(2rem, 2.5vw + 1.8rem, 4.2rem);
    line-height:1.05;
  }
  .hero__subtitle{ color:var(--muted); max-width: 46ch; margin: 0 0 1.25rem }
  .hero__actions{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap }
  
  /* ====== Orbits ====== */
  .hero__right{ display:flex; align-items:center; justify-content:center; }
  .orbits{
    position: relative; width:min(560px, 90vw); aspect-ratio: 1/1;
    border-radius:50%; isolation:isolate;
    background: radial-gradient(40% 40% at 50% 50%, rgba(167,133,255,.15), transparent 60%), radial-gradient(30% 30% at 50% 50%, rgba(110,75,255,.12), transparent 65%);
    box-shadow: inset 0 0 60px rgba(167,133,255,.15);
  }
  .orbits__logo{
    position:absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
    width: 36%; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
  }
  .orbit{ position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(255,255,255,.14); }
  .orbit--1{ inset:9% }
  .orbit--2{ inset:21% }
  .orbit--3{ inset:33% }
  
  .badge{
    position:absolute; left: var(--x); top: var(--y);
    transform: translate(-50%,-50%) translate3d(0,0,0);
    animation: float 6s ease-in-out infinite;
  }
  .badge svg{ width:48px; height:48px; display:block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)) }
  .badge circle{ fill:#fff }
  .badge text{ font:700 14px/1 ui-sans-serif, system-ui, -apple-system; dominant-baseline:middle; fill:#111 }
  
  @keyframes float{
    0%,100%{ transform: translate(-50%,-50%) translateY(0) }
    50%{ transform: translate(-50%,-50%) translateY(-6px) }
  }
  
  /* ====== Features ====== */
  .features{ padding: 3.5rem 0 4.5rem; border-top:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, transparent, rgba(255,255,255,.02)) }
  .features__grid{
    display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 1000px){ .features__grid{ grid-template-columns: repeat(2, 1fr) } }
  @media (max-width: 560px){ .features__grid{ grid-template-columns: 1fr } }
  .feat{
    padding:1.1rem; border:1px solid var(--border); border-radius:1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
  }
  .feat__ico{ font-size:1.25rem; margin-bottom:.2rem }
  .feat h3{ margin:.1rem 0 .35rem; font-size:1.05rem }
  .feat p{ margin:0; color:var(--muted) }
  
  /* ====== Footer ====== */
  .footer{ border-top:1px solid rgba(255,255,255,.08); padding:1.4rem 0; font-size:.95rem; color:var(--muted) }
  .footer__row{ display:flex; align-items:center; justify-content:space-between }
  .footer__links{ display:flex; gap:1rem }
  .footer a{ color:inherit; text-decoration:none }
  .footer a:hover{ color:var(--fg) }