/* ===== A1 CONNECT — Home Hero (final, approved: blue palette matching header) =====
   Requires base.css and header.css loaded first (shared resets, colour variables,
   --header-bg-top, --header-bg-bottom, --gold-light, --gold, --gold-dark). */

:root {
  --black: #060606;
  --black-soft: #121212;
  --white: #ffffff;
  --gold-line: rgba(59, 130, 246, 0.32);
  --shadow-lg: 0 24px 60px rgba(6, 12, 30, 0.35);
}

h1 {
  font-family: "Sora", "Inter", sans-serif;
  line-height: 1.05; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2.8rem, 5.4vw, 4.4rem);
  background: linear-gradient(100deg, #ffffff 0%, #cfe0ff 22%, #8fb8ff 45%, #ffffff 65%, #cfe0ff 85%, #8fb8ff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 42px rgba(59,130,246,0.28);
  animation: heroGradientMove 7s ease-in-out infinite;
}
@keyframes heroGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Eyebrow badge (dark variant) — scoped to .hero so it doesn't override the default
   light-background eyebrow from base.css used by other sections */
.hero .eyebrow {
  color: var(--gold-light); background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Buttons (.btn / .btn-primary / .btn-outline) now live in base.css as a
   shared component used across hero, product-hero, and industries sections. */

/* Hero section */
.hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(59,130,246,0.22), transparent 60%),
    radial-gradient(700px 400px at 5% 110%, rgba(59,130,246,0.1), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, var(--black-soft) 100%);
  color: var(--white); padding: 96px 0 100px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero p.lead { color: rgba(255,255,255,0.68); font-weight: 400; font-size: 1.1rem; line-height: 1.7; max-width: 500px; letter-spacing: 0.001em; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }

/* Stats — sits under the CTA buttons in the text column, divided, glowing numerals */
.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; margin-top: 44px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.hero-stats div { padding: 0 36px; border-left: 1px solid rgba(255,255,255,0.1); text-align: center; }
.hero-stats div:first-child { border-left: none; }
.hero-stats div strong {
  display: block; font-family: "Sora", "Inter", sans-serif; font-weight: 800;
  font-size: 1.85rem; letter-spacing: -0.01em; margin-bottom: 6px;
  color: var(--gold-light); text-shadow: 0 0 18px rgba(59,130,246,0.45);
}
.hero-stats div span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.48); line-height: 1.4; display: block; max-width: 140px;
  margin: 0 auto;
}
@media (max-width: 520px) {
  .hero-stats div { padding: 0 20px; }
}

@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
  .hero { padding: 64px 0 56px; }
  .hero-grid { gap: 40px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* Review card SVG (unchanged — already the approved blue card design) */
.review-card-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; }
.review-card-frame { position: relative; width: 82%; aspect-ratio: 1/1; border-radius: 30px; }
.review-card { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)); }
.review-card-caption { text-align: center; font-size: 0.82rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); margin-top: 34px; font-weight: 500; }

/* Badge ring — thick white border right around the card; "THE PRODUCT" text travels inside the band */
.card-badge-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 91%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35));
}