/* ─────────────────────────────────────────────────────────────────────────────
   Airwynn — Hero section
   ───────────────────────────────────────────────────────────────────────────── */

.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 72px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;pointer-events:none;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 60%,transparent 100%);}
.hero-atmosphere{
  position:absolute;inset:0;
  background:
    /* sparse tiny stars, scattered — deliberately irregular positions/sizes */
    radial-gradient(1.6px 1.6px at 12% 18%,rgba(255,255,255,.55),transparent 100%),
    radial-gradient(1.2px 1.2px at 22% 62%,rgba(255,255,255,.4),transparent 100%),
    radial-gradient(1.8px 1.8px at 35% 12%,rgba(255,255,255,.5),transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 40%,rgba(255,255,255,.35),transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 45%,rgba(255,255,255,.45),transparent 100%),
    radial-gradient(1.3px 1.3px at 60% 22%,rgba(255,255,255,.4),transparent 100%),
    radial-gradient(1.7px 1.7px at 18% 82%,rgba(255,255,255,.5),transparent 100%),
    radial-gradient(1.2px 1.2px at 40% 78%,rgba(255,255,255,.35),transparent 100%),
    radial-gradient(1.4px 1.4px at 5% 8%,rgba(255,255,255,.4),transparent 100%),
    radial-gradient(1.2px 1.2px at 30% 30%,rgba(255,255,255,.3),transparent 100%),
    /* very subtle nebula/light haze, well away from the text column */
    radial-gradient(ellipse 55% 40% at 20% 85%,rgba(80,60,120,.06),transparent 70%),
    radial-gradient(ellipse 90% 60% at 78% 45%,rgba(59,130,246,.14),transparent 60%),
    linear-gradient(180deg,#011021 0%,#070912 45%,#011021 100%);
}
/* Mobile: one continuous background on the SAME full-hero element (no
   separate bounded box layered on top — that was the previous approach
   and its own edge was the visible "seam" reported after the first pass)
   — same star field + nebula + base gradient as above, with one extra
   glow layer blended into the identical stack so there is nothing for a
   seam to form at. Replaces the visual weight the removed planet left
   behind, directly behind where the headline sits. */
@media(max-width:640px){
  .hero-atmosphere{
    background:
      radial-gradient(1.6px 1.6px at 12% 18%,rgba(255,255,255,.55),transparent 100%),
      radial-gradient(1.2px 1.2px at 22% 62%,rgba(255,255,255,.4),transparent 100%),
      radial-gradient(1.8px 1.8px at 35% 12%,rgba(255,255,255,.5),transparent 100%),
      radial-gradient(1.2px 1.2px at 48% 40%,rgba(255,255,255,.35),transparent 100%),
      radial-gradient(1.5px 1.5px at 8% 45%,rgba(255,255,255,.45),transparent 100%),
      radial-gradient(1.3px 1.3px at 60% 22%,rgba(255,255,255,.4),transparent 100%),
      radial-gradient(1.7px 1.7px at 18% 82%,rgba(255,255,255,.5),transparent 100%),
      radial-gradient(1.2px 1.2px at 40% 78%,rgba(255,255,255,.35),transparent 100%),
      radial-gradient(1.4px 1.4px at 5% 8%,rgba(255,255,255,.4),transparent 100%),
      radial-gradient(1.2px 1.2px at 30% 30%,rgba(255,255,255,.3),transparent 100%),
      radial-gradient(ellipse 70% 45% at 50% 30%,rgba(59,130,246,.20),transparent 72%),
      radial-gradient(ellipse 55% 40% at 20% 85%,rgba(80,60,120,.06),transparent 70%),
      radial-gradient(ellipse 90% 60% at 78% 45%,rgba(59,130,246,.14),transparent 60%),
      linear-gradient(180deg,#011021 0%,#070912 45%,#011021 100%);
  }
}
/* Earth horizon — a real NASA orbital photograph (Apollo 17 "Blue Marble",
   AS17-148-22727, public domain), not an illustration. Cropped so the limb
   and lit continents/clouds already sit in the frame's near corner, then
   anchored to the hero's bottom-right and pushed further past it so most
   of the frame extends off-screen — only the near limb is ever visible,
   like a horizon shot from low orbit. Color-graded (cooler, darker, a
   directional falloff toward the far corner) to read as a deliberate,
   moody photograph rather than a bright stock image, and slightly blurred
   so it stays visually secondary to the text (shallow depth-of-field).
   Single static image, no canvas, no WebGL, no per-frame work. */
.hero-planet{
  position:absolute;
  right:0;bottom:0;
  width:min(74vw,980px);height:min(74vw,980px);
  transform:translate(44%,46%);
  border-radius:50%;
  background-image:url("../assets/images/earth-horizon.webp");
  background-size:cover;
  background-position:center;
  filter:blur(1.8px) saturate(1.03);
  opacity:.97;
}
.hero-planet::after{
  /* soft outer atmospheric glow bleeding into the hero background —
     extends past the disc itself so the limb dissolves into space
     rather than showing a hard circular edge */
  content:'';position:absolute;inset:-14%;border-radius:50%;
  box-shadow:0 0 130px 50px rgba(60,130,190,.10);
  filter:blur(36px);pointer-events:none;
}
.hero-orb-1{position:absolute;top:-8%;left:18%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.18),transparent 70%);filter:blur(40px);}
.hero-orb-2{position:absolute;top:12%;right:8%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.14),transparent 70%);filter:blur(40px);}
@media(max-width:900px){.hero-planet{opacity:.7;transform:translate(42%,44%);}}
/* Mobile: the planet photograph reads as visual clutter at this size and
   competes with the headline rather than sitting behind it — removed
   entirely (not replaced with another illustration, per design decision)
   in favour of the pure CSS gradient/glow treatment added to .v3-hero in
   airwynn-v3.css for this same breakpoint. */
@media(max-width:640px){.hero-planet,.hero-planet::after{display:none;}}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:99px;border:1px solid var(--border2);background:var(--surface);font-size:.8125rem;color:var(--text2);margin-bottom:26px;}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 8px #10B981;flex-shrink:0;}
.hero-badge-text{color:#34d399;font-weight:600;}
.hero-headline{max-width:820px;margin-bottom:20px;}
.hero-sub{max-width:600px;font-size:1.0625rem;color:var(--text2);line-height:1.75;margin-bottom:34px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.hero-trust{font-size:.8125rem;color:var(--text3);margin-bottom:56px;letter-spacing:.01em;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;background:var(--blue);color:#fff;font-size:.9375rem;font-weight:600;border:none;transition:opacity .15s,transform .15s,box-shadow .15s;}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 0 24px rgba(59,130,246,.3);}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;background:var(--surface);color:var(--text1);font-size:.9375rem;font-weight:500;border:1px solid var(--border2);transition:background .15s,border-color .15s,transform .15s;}
.btn-ghost:hover{background:var(--surface2);border-color:rgba(255,255,255,.2);transform:translateY(-1px);}

/* ── Hero product window ──────────────────────────────────────────────────── */

.product-window{width:100%;max-width:920px;border-radius:var(--r-lg);border:1px solid var(--border2);overflow:hidden;box-shadow:0 0 0 1px var(--border),0 28px 72px rgba(0,0,0,.72),0 0 90px rgba(59,130,246,.07);background:var(--bg1);position:relative;}
.product-window::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--r-lg)+1px);background:linear-gradient(135deg,rgba(59,130,246,.18),transparent 40%,rgba(99,102,241,.13));pointer-events:none;z-index:0;}
.pw-titlebar{display:flex;align-items:center;gap:7px;padding:10px 15px;border-bottom:1px solid var(--border);background:rgba(5,5,10,.88);position:relative;z-index:1;}
.pw-dot{width:9px;height:9px;border-radius:50%;}
.pw-title-text{font-size:.625rem;color:var(--text3);margin-left:7px;}
.pw-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:40px;border-bottom:1px solid var(--border);background:rgba(10,10,20,.92);position:relative;z-index:1;gap:12px;}
.pw-brand{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.pw-brand img{width:16px;height:16px;}
.pw-brand-name{font-size:.625rem;font-weight:700;letter-spacing:.14em;color:#fff;}
.pw-nav{display:flex;gap:1px;overflow:hidden;}
.pw-navitem{font-size:.5625rem;padding:3px 9px;border-radius:4px;color:var(--text3);white-space:nowrap;}
.pw-navitem.on{background:rgba(59,130,246,.14);color:#93c5fd;}
.pw-body{display:flex;height:290px;position:relative;z-index:1;}
.pw-left{width:156px;flex-shrink:0;border-right:1px solid var(--border);padding:10px;background:rgba(10,10,20,.72);overflow:hidden;}
.pw-map{flex:1;position:relative;overflow:hidden;background:linear-gradient(160deg,#070714,#0B1225 50%,#070C1A);}
.pw-right{width:128px;flex-shrink:0;border-left:1px solid var(--border);padding:9px;background:rgba(10,10,20,.72);overflow:hidden;}
.pw-sl{font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:5px;margin-top:8px;}
.pw-sl:first-child{margin-top:0;}
.pw-card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:5px;padding:5px 7px;margin-bottom:4px;}
.pw-card-lbl{font-size:.4375rem;color:var(--text3);margin-bottom:1px;}
.pw-card-val{font-size:.6875rem;font-weight:700;color:#fff;}
.pw-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(59,130,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.04) 1px,transparent 1px);background-size:28px 28px;}
.pw-statusbar{height:28px;border-top:1px solid var(--border);background:rgba(5,5,10,.92);display:flex;align-items:center;padding:0 12px;gap:10px;position:relative;z-index:1;overflow:hidden;}
.pw-live{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 5px var(--blue);animation:pDot 2s infinite;flex-shrink:0;}
.pw-status-txt{font-size:.5rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pw-risk-ring{width:32px;height:32px;border-radius:50%;border:2.5px solid #34d399;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pw-risk-score{font-size:.5rem;font-weight:700;color:#34d399;}
@keyframes pDot{0%,100%{opacity:1;}50%{opacity:.3;}}
@media(max-width:580px){.pw-left,.pw-right{display:none;}}


@media(max-width:580px){.pw-left,.pw-right{display:none;}}