/* Homepage only (approved round 2 direction, Nov 2026): hero, perks strip, steps, offers, help
   and closing band. Shared theme (tokens, header, cards, sections) lives in space.css.
   Orbi is never mirrored or stretched (width only): RTL just moves him to the other column. */
.home{--glow-x:74%}
[dir="rtl"] .home{--glow-x:26%}

/* ---------- Hero ---------- */
.space-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:18px;
  background:
    radial-gradient(44% 58% at var(--glow-x) 44%,rgba(139,92,246,.46),transparent 70%),
    radial-gradient(30% 36% at calc(var(--glow-x) + 8%) 96%,rgba(56,189,248,.24),transparent 70%),
    radial-gradient(50% 50% at calc(100% - var(--glow-x)) -10%,rgba(121,62,182,.20),transparent 70%),
    linear-gradient(180deg,#0b0918 0%,var(--space-0) 100%)}
/* Distant nebula: soft colour depth far behind the scene */
.hero-nebula{position:absolute;z-index:-2;top:-20%;inset-inline-end:-10%;width:60%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(139,92,246,.22),rgba(56,189,248,.08) 45%,transparent 70%);filter:blur(30px)}
.hero-layout{position:relative;display:grid;align-items:center}
.hero-copy{position:relative;z-index:2;padding-block:4px 0}
.hero-copy h1{font-size:clamp(36px,9.2vw,70px);line-height:1.04;letter-spacing:-.02em;margin:0 0 10px}
:lang(ar) .hero-copy h1{line-height:1.28;letter-spacing:0}
.hero-copy h1 .accent{display:block;color:var(--orbitra-lime);text-shadow:0 0 36px rgba(198,241,53,.25)}
.hero-copy .hero-lead{font-size:clamp(15px,1.9vw,20px);color:#cfcbe0;max-width:30em;margin:0 0 16px}

/* Orbi stage, back to front: nebula · orbits + planets (back) · horizon · contact shadow ·
   Orbi · front half of the lime ring + foreground planet · speech bubble (desktop only) */
.hero-stage{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-top:10px}
.hero-orbits{position:absolute;left:-20%;width:140%;max-width:none;bottom:22px;height:auto;aspect-ratio:960/640;pointer-events:none}
.hero-orbits.back{z-index:-1}
.hero-orbits.front{z-index:2}
.hero-horizon{position:absolute;z-index:-1;left:50%;top:calc(100% - 46px);width:190%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 18%,#2a2250 0%,#141027 32%,#0a0914 62%);
  box-shadow:0 -2px 0 rgba(198,241,53,.45),0 -10px 30px rgba(198,241,53,.10),0 -26px 80px rgba(139,92,246,.55),inset 0 30px 70px rgba(139,92,246,.30)}
.hero-shadow{position:absolute;z-index:0;bottom:30px;left:50%;width:44%;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent)}
.hero-orbi{position:relative;z-index:1;width:min(220px,56%);margin-bottom:36px;
  filter:drop-shadow(0 0 22px rgba(139,92,246,.55)) drop-shadow(10px 0 26px rgba(56,189,248,.28))}
/* On phones and tablets the bubble is hidden so Orbi's face sits right under the CTA */
.hero-stage .orbi-bubble{display:none}
.hide-sm{display:none}

@media(min-width:521px){.hide-sm{display:inline-flex}.hero-orbi{width:min(280px,60%)}}
@media(min-width:860px){
  .space-hero{padding-top:40px}
  .hero-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;min-height:600px}
  .hero-copy{padding-block:24px 72px}
  .hero-copy h1{margin-bottom:14px}
  .hero-copy .hero-lead{margin-bottom:22px}
  .hero-stage{align-self:stretch;min-height:600px;padding-top:14px}
  .hero-orbi{width:min(330px,68%);margin-bottom:32px}
  .hero-orbits{bottom:34px}
  .hero-horizon{top:calc(100% - 58px);width:200%}
  .hero-shadow{bottom:26px}
  /* Bubble floats above his head on the inline-start side, tail pointing down at him */
  .hero-stage .orbi-bubble{display:block;position:relative;z-index:3;order:-1;align-self:flex-start;width:auto;max-width:250px;margin:0 0 30px;padding:10px 14px;font-size:14px;line-height:1.45;background:var(--orbitra-off-white)}
  .hero-stage .orbi-bubble::after{left:70%;right:auto;top:auto;bottom:-7px;margin:0 0 0 -8px;border-radius:0 0 4px 0}
  [dir="rtl"] .hero-stage .orbi-bubble{align-self:flex-end}
  [dir="rtl"] .hero-stage .orbi-bubble::after{left:28%}
}
@media(max-width:520px){.space-hero .btn-row .btn{flex:1 1 100%}}

/* Perks strip: the three promises, right under the hero */
.perks{border-block:1px solid var(--space-line);background:rgba(14,12,26,.85)}
.perk-list{list-style:none;margin:0 auto;padding-block:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.perk-list li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:13px;line-height:1.35;color:#d8d4e8}
.perk-list img{width:38px;height:38px;padding:8px;border-radius:12px;background:rgba(198,241,53,.08);border:1px solid rgba(198,241,53,.25)}
@media(min-width:768px){.perk-list{padding-block:20px;gap:24px}.perk-list li{flex-direction:row;justify-content:center;text-align:start;font-size:15px}}
.shop-section{padding-top:36px}

/* ---------- How it works: compact rows on mobile, three columns on desktop ---------- */
.orbit-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:step;position:relative}
.orbit-step{position:relative;display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:var(--space-2);border:1px solid rgba(255,255,255,.07)}
.orbit-step .ring{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#0b0a14;box-shadow:0 0 0 1px rgba(198,241,53,.45),0 0 22px rgba(198,241,53,.16)}
.orbit-step .ring img{width:26px;height:26px}
.orbit-step h3{font-size:18px;margin:0 0 4px}
.orbit-step p{margin:0;color:#aaa6bd;font-size:15px}
.orbit-step::after{counter-increment:step;content:counter(step);position:absolute;top:14px;inset-inline-end:18px;font:700 26px/1 'Space Grotesk',sans-serif;color:rgba(139,92,246,.5)}
@media(min-width:768px){
  .orbit-steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .orbit-steps::before{content:"";position:absolute;top:44px;inset-inline:16%;border-top:2px dashed rgba(198,241,53,.22)}
  .orbit-step{flex-direction:column;padding:22px}
}
.home .note{margin-top:16px}

/* ---------- Offers ---------- */
.home .offer{background:var(--space-2);border-color:rgba(255,255,255,.08);padding:24px}
.home .offer-main{border-color:rgba(198,241,53,.7);box-shadow:0 0 0 1px rgba(198,241,53,.2),0 20px 50px rgba(198,241,53,.07)}
.home .offer:not(.offer-main){border-color:rgba(139,92,246,.45)}
.home .offer .price-note{border-top-color:var(--space-line)}

/* ---------- Help: compact, icon beside text ---------- */
.home .help-grid{gap:12px}
.home .help-card{display:flex;gap:14px;align-items:flex-start;padding:18px;background:var(--space-2);border:1px solid rgba(255,255,255,.07)}
.home .help-card img{width:32px;height:32px;margin:2px 0 0;flex-shrink:0}
.home .help-card h3{font-size:17px;margin:0 0 2px}
.home .help-card .pending{margin-top:6px}
.home .help-card:hover{outline:none;border-color:rgba(198,241,53,.4)}

/* ---------- Closing band ---------- */
.space-cta{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:28px 24px;display:grid;gap:18px;align-items:center;
  background:radial-gradient(60% 120% at var(--end-x) 50%,rgba(139,92,246,.35),transparent 70%),var(--space-1);border:1px solid rgba(255,255,255,.08)}
.space-cta .planet-arc{position:absolute;z-index:-1;width:440px;aspect-ratio:1;border-radius:50%;inset-inline-end:-250px;top:-60px;
  background:radial-gradient(circle at 35% 35%,#2a2350,#100d20 65%);box-shadow:-2px 0 0 rgba(198,241,53,.45),-20px 0 60px rgba(56,189,248,.25)}
[dir="rtl"] .space-cta .planet-arc{box-shadow:2px 0 0 rgba(198,241,53,.45),20px 0 60px rgba(56,189,248,.25)}
.space-cta h2{margin:0;font-size:clamp(24px,3.4vw,34px);max-width:18em}
.space-cta h2 .accent{color:var(--orbitra-lime)}
@media(min-width:768px){.space-cta{grid-template-columns:1fr auto;padding:40px 48px}}