/* ── HERO ── */
.hero {
  position:relative; height:100vh; min-height:780px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:-6%;
  background-image: url('../../assets/images/map_dark.png');
  background-size:cover; background-position:center top;
  filter:brightness(0.18) saturate(1.4) hue-rotate(5deg);
  will-change:transform;
}
.hero-vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%, rgba(80,30,200,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(37,99,235,0.07) 0%, transparent 55%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 28%,
      rgba(0,0,0,0) 62%, rgba(0,0,0,0.9) 90%, #000 100%);
}
.hero-grain {
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
}
.hero-orb {
  position:absolute; width:900px; height:500px;
  top:50%; left:50%; transform:translate(-50%,-54%);
  background:radial-gradient(ellipse at center,
    rgba(109,40,217,0.18) 0%, rgba(59,130,246,0.07) 45%, transparent 70%);
  border-radius:50%;
  animation:orbPulse 6s ease-in-out infinite;
  pointer-events:none;
}

/* ── HERO CONTENT — 2-column split ── */
.hero-content {
  position:relative; z-index:2;
  width:100%; max-width:1240px;
  padding:0 72px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.hero-text {
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; font-weight:700; letter-spacing:5px; text-transform:uppercase;
  color:rgba(192,132,252,0.85);
  margin-bottom:24px;
  opacity:0; animation:fadeUp 1s var(--ease-out) 0.2s forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content:''; display:block; width:28px; height:1px;
  background:rgba(192,132,252,0.4);
}
.hero-title {
  font-size:clamp(64px, 7vw, 108px);
  font-weight:800; letter-spacing:-4px; line-height:0.95;
  padding-bottom:0.12em;
  background:linear-gradient(160deg, #fff 20%, rgba(210,200,255,0.85) 65%, rgba(140,160,255,0.55) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:0; animation:fadeUp 1s var(--ease-out) 0.38s forwards;
}
.hero-subtitle {
  margin-top:20px;
  font-size:clamp(17px, 1.8vw, 22px);
  font-weight:300; line-height:1.65;
  color:rgba(255,255,255,0.58); letter-spacing:-0.1px;
  opacity:0; animation:fadeUp 1s var(--ease-out) 0.56s forwards;
}
.hero-actions {
  margin-top:36px; display:flex; gap:12px; flex-wrap:wrap;
  opacity:0; animation:fadeUp 1s var(--ease-out) 0.74s forwards;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  padding:15px 36px; border-radius:14px;
  background:linear-gradient(135deg, var(--c-violet-d), var(--c-blue-d));
  font-size:14px; font-weight:600; color:#fff; text-decoration:none; letter-spacing:-0.2px;
  box-shadow:0 0 0 1px rgba(139,92,246,0.5), 0 8px 40px rgba(109,40,217,0.45);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.btn-primary:hover {
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 0 1px rgba(139,92,246,0.7), 0 20px 64px rgba(109,40,217,0.6);
}
.btn-outline {
  display:inline-flex; align-items:center; gap:7px;
  padding:15px 36px; border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  font-size:14px; font-weight:600; color:rgba(255,255,255,0.8); text-decoration:none;
  letter-spacing:-0.2px; backdrop-filter:blur(12px);
  transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-out);
}
.btn-outline:hover {
  background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.24);
  transform:translateY(-3px);
}

/* ── HERO STATS ── */
.hero-stats {
  display:flex; gap:40px; margin-top:40px;
}
.h-stat { display:flex; flex-direction:column; gap:2px; }
.h-stat-num {
  font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-2px;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.h-stat-label { font-size:11px; font-weight:500; color:rgba(255,255,255,0.35); letter-spacing:1px; }

/* ── 3D PHONE SCENE ── */
.hero-phone-scene {
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.hero-phone-floater {
  perspective:1600px;
  position:relative; z-index:2;
}
.hero-phone-3d {
  transform-style:preserve-3d;
  will-change:transform, filter;
  transition:filter 0.05s linear;
  --glare-x: 40%;
  --glare-y: 30%;
}

/* ── FLOATING ANIMATION ── */
@keyframes phoneFloat {
  0%,100% { translate:0 0; }
  40%     { translate:0 -16px; }
  70%     { translate:0 -10px; }
}
.hero-phone-3d { animation:phoneFloat 7s ease-in-out infinite; }

/* ── PHONE FRAME ── */
.hero-phone-frame {
  width:266px; height:548px;
  background:linear-gradient(155deg,
    #1e1e38 0%,
    #151530 35%,
    #0e0e28 65%,
    #111125 100%);
  border-radius:52px;
  position:relative; overflow:hidden;
  border:1.5px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.055),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
/* Edge light that follows tilt */
.hero-phone-frame::before {
  content:'';
  position:absolute; inset:0; border-radius:52px; z-index:20; pointer-events:none;
  background:radial-gradient(
    ellipse at var(--glare-x,40%) var(--glare-y,30%),
    rgba(255,255,255,0.10) 0%,
    rgba(139,92,246,0.07) 35%,
    transparent 65%
  );
}

/* ── DYNAMIC ISLAND ── */
.hero-phone-island {
  position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:96px; height:32px;
  background:#050510;
  border-radius:22px;
  z-index:15;
  box-shadow:0 0 0 1.5px rgba(255,255,255,0.07), 0 4px 20px rgba(0,0,0,0.8);
}
.hero-phone-island::after {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  background:#1a1a2e;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}

/* ── SCREEN ── */
.hero-phone-screen {
  position:absolute; inset:0;
  border-radius:51px; overflow:hidden;
}
.hero-screen-img {
  width:100%; height:100%;
  object-fit:cover; object-position:top;
  display:block;
  transition:opacity 0.4s ease, transform 0.4s ease;
}

/* Screen glare — moves with --glare-x/y */
.hero-screen-glare {
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:10;
  background:
    radial-gradient(
      ellipse 120% 80% at var(--glare-x, 40%) var(--glare-y, 28%),
      rgba(255,255,255,0.13) 0%,
      rgba(255,255,255,0.03) 30%,
      transparent 58%
    ),
    linear-gradient(165deg,
      rgba(255,255,255,0.06) 0%,
      transparent 40%,
      rgba(0,0,0,0.14) 100%
    );
}

/* ── SIDE BUTTONS ── */
.hero-phone-btn-vol {
  position:absolute; left:-2.5px; top:118px;
  width:3px; height:60px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.12) 100%);
  border-radius:0 3px 3px 0;
}
.hero-phone-btn-vol::before {
  content:'';
  position:absolute; top:76px; left:0;
  width:3px; height:40px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.12) 100%);
  border-radius:0 3px 3px 0;
}
.hero-phone-btn-pwr {
  position:absolute; right:-2.5px; top:152px;
  width:3px; height:70px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.12) 100%);
  border-radius:3px 0 0 3px;
}

/* ── HOME INDICATOR ── */
.hero-phone-bar {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:118px; height:4px; border-radius:3px;
  background:rgba(255,255,255,0.32);
  z-index:11;
}

/* ── GLOW UNDER PHONE ── */
.hero-phone-glow {
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  width:280px; height:60px;
  background:radial-gradient(ellipse, rgba(109,40,217,0.65) 0%, transparent 70%);
  filter:blur(18px);
  pointer-events:none; z-index:1;
}
.hero-phone-ground-shadow {
  position:absolute; bottom:-70px; left:50%; transform:translateX(-50%);
  width:220px; height:40px;
  background:radial-gradient(ellipse, rgba(0,0,0,0.7) 0%, transparent 70%);
  filter:blur(24px);
  pointer-events:none;
}

/* ── SCROLL CUE ── */
.scroll-cue {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
  opacity:0; animation:fadeIn 1s 2.2s forwards;
}
.scroll-cue span {
  font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase;
  color:rgba(255,255,255,0.2);
}
.scroll-cue .icon-svg {
  color:rgba(255,255,255,0.35);
  animation:chevronBounce 2.5s 2.5s ease-in-out infinite;
}
.scroll-cue img {
  width:20px; height:20px; opacity:0.35;
  animation:chevronBounce 2.5s 2.5s ease-in-out infinite;
  filter:brightness(0) invert(1);
}
@keyframes chevronBounce {
  0%,100% { opacity:.35; transform:translateY(0); }
  50%     { opacity:.85; transform:translateY(6px); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .hero-phone-3d { animation: none; }
  .scroll-cue img { animation: none; }
  .hero-screen-img { transition: none; }
}

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  .hero-content { padding:0 40px; gap:44px; }
  .hero-phone-frame { width:230px; height:474px; border-radius:46px; }
  .hero-phone-island { width:84px; height:28px; top:11px; }
  .hero-phone-bar { width:100px; }
}
@media (max-width:840px) {
  .hero-content {
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }
  .hero-text { align-items:center; }
  .hero-eyebrow { justify-content:center; }
  .hero-actions { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-phone-scene { order:-1; }
  .hero-phone-frame { width:200px; height:412px; border-radius:40px; }
  .hero-phone-island { width:72px; height:24px; top:10px; }
}
@media (max-width:480px) {
  .hero-content { padding:0 20px; }
  .hero-stats { gap:24px; }
  .hero-phone-frame { width:176px; height:360px; border-radius:36px; }
}