/* ── HERO LAYOUT ─────────────────────────────────────────── */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, #F0F5FF 55%, #EEF9F4 100%);
}
#hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero-inner {
  position: relative; z-index: 2;
  padding: 0 clamp(1.5rem, 7vw, 7rem);
  padding-top: calc(var(--nav-h) + 2rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  width: 100%; max-width: 1400px; margin: 0 auto;
}

/* ── HERO LEFT ───────────────────────────────────────────── */
.hero-left { display: flex; flex-direction: column; gap: 1.25rem; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 100px;
  background: rgba(26,107,255,.08); border: 1px solid rgba(26,107,255,.2);
  font-size: .75rem; font-weight: 700; color: var(--color-primary);
  letter-spacing: .04em; width: fit-content; opacity: 0;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.8)} }

.hero-h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.hero-line-wrap { overflow: hidden; display: block; }
.hero-line {
  display: block; transform: translateY(110%);
  background: linear-gradient(135deg, var(--text-primary) 50%, var(--color-primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-line.accent-line {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-sub {
  font-size: clamp(.95rem, 1.5vw, 1.1rem); font-weight: 400;
  color: var(--text-secondary); line-height: 1.7; max-width: 460px; opacity: 0;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; }

.hero-social-proof { display: flex; align-items: center; gap: 14px; opacity: 0; }
.hero-avatars { display: flex; }
.hero-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -8px; font-size: .7rem;
  font-weight: 700; color: #fff; display: grid; place-items: center;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-proof-text { font-size: .8rem; color: var(--text-secondary); font-weight: 500; }
.hero-proof-text strong { color: var(--text-primary); font-weight: 700; }

/* ── HERO RIGHT — PHONE ──────────────────────────────────── */
.hero-right {
  display: flex; justify-content: center; align-items: center;
  position: relative; opacity: 0;
}
.phone-blob {
  position: absolute; width: 340px; height: 340px;
  background: radial-gradient(ellipse, rgba(26,107,255,.15) 0%, rgba(0,201,122,.1) 50%, transparent 72%);
  border-radius: 50%; filter: blur(32px); z-index: 0;
  animation: blobPulse 5s ease-in-out infinite;
}
@keyframes blobPulse { 0%,100%{transform:translateY(var(--parallax-y,0px)) scale(1) rotate(0deg)} 50%{transform:translateY(var(--parallax-y,0px)) scale(1.1) rotate(8deg)} }

.phone-mockup {
  position: relative; z-index: 1;
  animation: floatPhone 4s ease-in-out infinite; will-change: transform;
}
@keyframes floatPhone { 0%,100%{transform:translateY(var(--parallax-y,0px)) rotate(-1.5deg)} 50%{transform:translateY(calc(var(--parallax-y,0px) - 16px)) rotate(-1.5deg)} }

.phone-frame {
  width: 255px; height: 510px;
  border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(10,15,30,.18), 0 8px 24px rgba(10,15,30,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.phone-screen-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: calc(var(--nav-h) + 1.5rem); }
  .hero-left { align-items: center; }
  .hero-sub { max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-social-proof { justify-content: center; }
  .hero-right { display: none; }
}
@media (max-width: 600px) {
  .hero-inner { gap: 2rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-h1 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline { width: 100%; justify-content: center; }
  .hero-social-proof { flex-direction: column; gap: 8px; }
}