/* ═══════════════════════════════════════════════════════════════
   🌍 PUBLIC-MAP — HERO PREMIUM (centered, gold-serif, search-driven)
   Reproduces the high-end reference experience:
     badge → gold serif title → subtitle → dual CTA → trust row →
     animated Google-style search bar → real-people use-case photos →
     white gold-bordered result-stat cards.
   Purely visual. No nav / cart / Stripe / zones / i18n / JS logic touched.
   ═══════════════════════════════════════════════════════════════ */

/* ── Clean premium navy backdrop (mute the existing slideshow, keep its JS) ── */
.hero.hero-novideo{
  background:radial-gradient(125% 95% at 50% -10%, #16294a 0%, #0c1b38 42%, #071224 100%) !important;
  /* The stacked centered layout is taller than one viewport — let the hero grow
     instead of clipping (it was height:100vh; overflow:hidden; align:center). */
  height:auto !important;
  min-height:100vh;
  align-items:flex-start !important;
}
.hero.hero-novideo .hero-slideshow{ opacity:.10 !important; filter:saturate(.7) brightness(.6); }
.hero.hero-novideo .hero-bg-overlay{
  background:linear-gradient(180deg, rgba(7,18,36,.72) 0%, rgba(7,18,36,.90) 60%, rgba(7,18,36,.97) 100%) !important;
}

/* ── Single centered column ── */
.hero.hero-novideo .hero-content{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  grid-template-columns:none !important;
  max-width:1120px !important;
  gap:0 !important;
  padding:150px 32px 70px !important;
}
.hero.hero-novideo .hero-content > div:first-child{
  display:contents;                 /* flatten the wrapper so children stack in the flex column */
}

/* ── Badge pill ── */
.hero.hero-novideo .hero-pre{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,162,75,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  font-family:'Outfit',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#EAD9A8;
  margin:0 0 34px;
}
.hero.hero-novideo .hero-pre img{ display:none; }   /* drop the flags; use a live dot */
.hero.hero-novideo .hero-pre::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:#34D07F; box-shadow:0 0 0 0 rgba(52,208,127,.6);
  animation:heroDot 2.2s ease-out infinite;
}
@keyframes heroDot{
  0%{ box-shadow:0 0 0 0 rgba(52,208,127,.55);}
  70%{ box-shadow:0 0 0 8px rgba(52,208,127,0);}
  100%{ box-shadow:0 0 0 0 rgba(52,208,127,0);}
}

/* ── Gold serif mega-title (both lines gold, gentle shine) ── */
.hero.hero-novideo .hero-h1-premium{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:clamp(46px,7.4vw,104px);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 26px;
  max-width:14ch;
  opacity:1 !important;              /* override the reveal-anim base state */
  animation:none !important;
}
.hero.hero-novideo .hero-h1-premium .hero-line-1,
.hero.hero-novideo .hero-h1-premium .hero-line-2{
  display:block; font-style:normal;
  opacity:1 !important;              /* was 0 (waiting on heroLineReveal) */
  transform:none !important;         /* was translateY(30/40px) */
  background:linear-gradient(105deg,#F7E7B8 0%,#E7CE8B 34%,#FFF4D6 50%,#E4C57C 66%,#C9A24B 100%) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  animation:heroGoldShine 6s linear infinite !important;
}
.hero.hero-novideo .hero-h1-premium .hero-line-2{ font-style:italic; }
@keyframes heroGoldShine{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

/* ── Subtitle ── */
.hero.hero-novideo .hero-sub{
  font-family:'Outfit',sans-serif;
  font-size:clamp(16px,1.5vw,20px); font-weight:300;
  line-height:1.65; color:rgba(226,232,240,.80);
  max-width:640px; margin:0 auto 38px !important;
}

/* ── Dual CTA ── */
.hero.hero-novideo .hero-btns{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  margin:0 0 30px;
}
.hero.hero-novideo .hero-cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:16px;
  padding:17px 30px; border-radius:14px; border:0; cursor:pointer;
  text-decoration:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}
.hero.hero-novideo .hero-cta-primary{
  color:#fff;
  background:linear-gradient(180deg,#2E6BFF 0%,#1852E8 100%);
  box-shadow:0 14px 30px -10px rgba(24,82,232,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.hero.hero-novideo .hero-cta-audit{
  color:#3A1E00;
  background:linear-gradient(180deg,#FFC24D 0%,#F79A1E 100%);
  box-shadow:0 14px 30px -10px rgba(247,154,30,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.hero.hero-novideo .hero-cta:hover{ transform:translateY(-3px); filter:brightness(1.05); }
.hero.hero-novideo .hero-cta:active{ transform:translateY(0); }

/* ── Trust row ── */
.hero.hero-novideo .hero-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px;
  margin:0 0 42px;
}
.hero.hero-novideo .hero-trust-item{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Outfit',sans-serif; font-size:14.5px; font-weight:500;
  color:rgba(226,232,240,.9);
}
.hero.hero-novideo .hero-trust-item .ht-svg{ width:18px; height:18px; flex:0 0 auto; }

/* ── Animated search bar (centerpiece) ── */
.hero-searchbar{
  width:min(760px,100%);
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:18px;
  padding:10px 10px 10px 22px;
  box-shadow:0 30px 70px -24px rgba(2,8,20,.85), 0 2px 0 rgba(255,255,255,.15) inset;
  margin:0 auto 44px;
}
.hero-searchbar .hsb-ico{ flex:0 0 auto; width:22px; height:22px; color:#5B6B86; }
.hero-searchbar .hsb-field{
  flex:1 1 auto; min-width:0;
  font-family:'Outfit',sans-serif; font-size:clamp(15px,1.6vw,19px); font-weight:400;
  color:#0E2038; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-searchbar .hsb-caret{ display:inline-block; width:2px; height:1.05em; margin-left:1px;
  background:#2E6BFF; vertical-align:-2px; animation:hsbBlink 1s steps(1) infinite; }
@keyframes hsbBlink{ 50%{ opacity:0; } }
.hero-searchbar .hsb-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:16px; color:#fff;
  background:linear-gradient(180deg,#2E6BFF 0%,#1852E8 100%);
  border:0; border-radius:12px; padding:13px 26px; cursor:pointer; text-decoration:none;
  box-shadow:0 8px 18px -6px rgba(24,82,232,.7);
  transition:transform .25s ease, filter .25s ease;
}
.hero-searchbar .hsb-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* ═══ Real-people use-case photo cards (row) ═══ */
.hero.hero-novideo .hero-right{
  display:block !important;
  width:100%;
  margin:0 auto;
  animation:none !important;
}
.hero-usecases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  width:100%;
  margin:0 auto 46px;
  transform:none;
}
.uc-card{
  position:relative; margin:0;
  border-radius:20px; overflow:hidden;
  background:#0b1424;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.7);
  aspect-ratio:4/3;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease;
}
.uc-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,12,24,.72) 0%, rgba(6,12,24,.18) 42%, rgba(6,12,24,0) 66%);
  pointer-events:none;
}
.uc-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
  filter:saturate(1.03) contrast(1.02);
}
.uc-card:hover{ transform:translateY(-6px); border-color:rgba(201,162,75,.5);
  box-shadow:0 36px 70px -22px rgba(0,0,0,.78), 0 0 0 1px rgba(201,162,75,.32); }
.uc-card:hover img{ transform:scale(1.08); }

.uc-pill{
  position:absolute; left:14px; bottom:14px; right:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:12px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13.5px; color:#101A30;
  z-index:2;
}
.uc-pill .uc-pin{ flex:0 0 auto; width:15px; height:15px; }
.uc-pill .uc-txt{ white-space:nowrap; }
.uc-pill .uc-live{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:ucPulse 2.2s ease-out infinite; }
@keyframes ucPulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }

/* ═══ Result stat cards — WHITE, gold top accent ═══ */
.hero-stats-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  width:100%; margin:0 auto;
}
.hero-stats-strip .floating-card{
  position:relative; text-align:left;
  background:#fff !important; border:0 !important;
  border-radius:18px !important; padding:26px 26px 24px !important;
  box-shadow:0 24px 50px -20px rgba(2,10,26,.55), inset 0 0 0 1px rgba(15,32,64,.05) !important;
  animation:none !important; overflow:hidden;
}
.hero-stats-strip .floating-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#F3DFA4,#C9A24B);
}
.hero-stats-strip .fc-label{
  font-family:'Outfit',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#7C8AA0 !important; margin-bottom:10px;
}
.hero-stats-strip .fc-val{
  font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:clamp(40px,4.4vw,58px); line-height:1; color:#0E2038 !important; margin-bottom:8px;
  -webkit-text-fill-color:#0E2038 !important;              /* beat any gradient-clip rule */
}
.hero-stats-strip .fc-val.red{ color:#1852E8 !important; -webkit-text-fill-color:#1852E8 !important; }
.hero-stats-strip .fc-val.or{ color:#B8860B !important; -webkit-text-fill-color:#B8860B !important; }
.hero-stats-strip .fc-sub{
  font-family:'Outfit',sans-serif; font-size:14px; font-weight:400; color:#5B6B86 !important;
}

/* Hide the old KPI counters — the white stat cards replace them (JS stays intact) */
.hero.hero-novideo .hero-kpis{ display:none !important; }

/* ── Tablet ── */
@media (max-width:1024px){
  .hero-usecases{ grid-template-columns:repeat(2,1fr); }
  .hero-stats-strip{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .hero.hero-novideo .hero-content{ padding-top:130px !important; }
}

/* ── Mobile ── */
@media (max-width:768px){
  .hero.hero-novideo .hero-content{ padding:112px 20px 54px !important; }
  .hero.hero-novideo .hero-pre{ font-size:10.5px; letter-spacing:.10em; padding:8px 15px; margin-bottom:24px; }
  .hero.hero-novideo .hero-btns{ flex-direction:column; width:100%; }
  .hero.hero-novideo .hero-cta{ width:100%; }
  .hero-searchbar{ padding:8px 8px 8px 16px; border-radius:15px; }
  .hero-searchbar .hsb-btn{ padding:12px 18px; font-size:14px; }
  .hero.hero-novideo .hero-right{ display:block !important; }
  .hero-usecases{ grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:34px; }
  .uc-card{ aspect-ratio:1/1; border-radius:15px; }
  .uc-pill{ font-size:11px; padding:7px 10px; left:8px; bottom:8px; }
  .hero-stats-strip{ grid-template-columns:1fr; gap:12px; }
  .hero-stats-strip .floating-card{ padding:20px 22px !important; }
}

@media (prefers-reduced-motion:reduce){
  .uc-card, .hero-h1-premium .hero-line-1, .hero-h1-premium .hero-line-2,
  .hero-searchbar .hsb-caret, .hero-pre::before, .uc-pill .uc-live{ animation:none !important; }
}