/* =====================================================================
   UGU — HOMEPAGE HERO v2  (scoped: .hero2 only)
   Nothing in this file affects the header, footer or any other section.
   ===================================================================== */

.hero2{
  --h2-gold:#F2B63D;
  --h2-gold-soft:rgba(242,182,61,.72);
  --h2-navy:#061A3A;
  --h2-navy-deep:#061634;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  min-height:680px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:62px 0;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:
    radial-gradient(900px 520px at 4% 106%, rgba(30,71,148,.32), transparent 58%),
    linear-gradient(160deg,var(--h2-navy-deep) 0%, var(--h2-navy) 55%, #0a234e 100%);
}

.hero2__inner{
  width:100%;
  max-width:1380px;
  margin-inline:auto;
  padding-inline:60px;
  display:grid;
  grid-template-columns:minmax(0,51%) minmax(0,49%);
  align-items:center;
  gap:20px;
}

/* ============================ LEFT COLUMN ============================ */
.hero2__copy{ position:relative; z-index:2; }
.hero2__eyebrow{
  display:block;
  font-size:18px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--h2-gold);
  margin:0 0 24px;
}
.hero2 h1{
  font-family:var(--font-display,inherit);
  font-size:clamp(40px, calc(4.6vw - 4px), 56px);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-1.4px;
  color:#fff;
  max-width:660px;
  margin:0;
}
.hero2 h1 .hero2__gold{ color:var(--h2-gold); }
.hero2__rule{
  width:65px; height:3px; border-radius:2px;
  background:var(--h2-gold);
  margin:24px 0 22px;
}
.hero2__lead{
  font-size:18px; line-height:1.55; font-weight:400;
  color:#F2F4F8; max-width:560px; margin:0;
}
.hero2__note{
  font-size:15.5px; line-height:1.5; font-style:italic; font-weight:500;
  color:rgba(255,235,198,.85); max-width:500px;
  margin:10px 0 0;
}

/* price badge */
.hero2__price{
  display:inline-flex; align-items:center; gap:12px;
  min-width:240px; min-height:62px;
  padding:0 18px;
  margin-top:18px;
  border:1px solid var(--h2-gold-soft);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.hero2__price svg{ width:22px; height:22px; color:var(--h2-gold); flex:none; }
.hero2__price-txt{ display:flex; flex-direction:column; line-height:1.18; }
.hero2__price-txt small{ font-size:13px; color:#fff; opacity:.9; }
.hero2__price-txt span{ font-size:15px; color:#fff; font-weight:500; }
.hero2__price-txt b{ font-size:25px; font-weight:700; color:var(--h2-gold); margin-right:5px; }

/* CTAs */
.hero2__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.hero2__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:58px; padding:0 20px;
  border-radius:6px;
  font-size:16px; font-weight:700; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero2__btn svg{ width:19px; height:19px; flex:none; }
.hero2__btn--primary{
  background:var(--h2-gold); color:#0A1F44; border:1px solid var(--h2-gold);
  box-shadow:0 10px 28px rgba(242,182,61,.24);
}
.hero2__btn--primary:hover{ transform:translateY(-2px); background:#f6c256; box-shadow:0 16px 34px rgba(242,182,61,.32); }
.hero2__btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); font-weight:600;
}
.hero2__btn--ghost:hover{ transform:translateY(-2px); border-color:var(--h2-gold); background:rgba(242,182,61,.12); }
.hero2__btn:focus-visible{ outline:3px solid var(--h2-gold); outline-offset:3px; }

.hero2__trust{
  display:flex; align-items:center; gap:8px;
  margin:12px 0 0; font-size:13.5px; color:rgba(255,255,255,.75);
}
.hero2__trust svg{ width:16px; height:16px; flex:none; }

/* =================== RIGHT COLUMN — GLOBAL NETWORK =================== */
.hero2__visual{ position:relative; }

/* The stage maps 1:1 onto the clean globe area of the supplied banner
   (source 1536x1024, globe crop x730-1536 / y150-900 = 806x750).
   Every child below is positioned in % of this box, so the real HTML
   flow always lands exactly over the artwork. */
.hero2__stage{
  position:relative;
  width:116%;
  margin-left:-8%;
  aspect-ratio:806/750;
}
.hero2__art{ position:absolute; inset:0; overflow:hidden; }
.hero2__overlay{ position:absolute; inset:0; }
.hero2__globe{
  position:absolute;
  left:-90.57%;   /* -730/806  */
  top:-20%;       /* -150/750  */
  width:190.57%;  /* 1536/806  */
  height:136.53%; /* 1024/750  */
  max-width:none;
  object-fit:fill;
  /* fades the artwork out around the globe so it blends into the navy */
  -webkit-mask-image:radial-gradient(ellipse 27% 33% at 74.2% 50%, #000 60%, rgba(0,0,0,.9) 76%, rgba(0,0,0,.3) 91%, transparent 100%);
          mask-image:radial-gradient(ellipse 27% 33% at 74.2% 50%, #000 60%, rgba(0,0,0,.9) 76%, rgba(0,0,0,.3) 91%, transparent 100%);
}
/* hides the labels baked into the artwork + blends its edges into the navy */
.hero2__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(56% 30% at 52% 61%, rgba(6,22,52,1) 0%, rgba(6,22,52,.99) 64%, rgba(6,22,52,.6) 87%, rgba(6,22,52,0) 100%),
    radial-gradient(38% 12% at 51% 78%, rgba(6,22,52,1) 0%, rgba(6,22,52,.97) 58%, rgba(6,22,52,.45) 86%, rgba(6,22,52,0) 100%);
}

.hero2__flow{
  position:absolute; top:39.3%; left:13.22%; right:9.74%;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.hero2__step{ position:relative; text-align:center; }
/* dashed connector + glowing node */
.hero2__step + .hero2__step::before{
  content:""; position:absolute; top:0; margin-top:25.1%; left:-75%; right:75%;
  height:1px; transform:translateY(-.5px);
  background:repeating-linear-gradient(to right, rgba(255,255,255,.6) 0 5px, transparent 5px 11px);
}
.hero2__step + .hero2__step::after{
  content:""; position:absolute; top:0; left:-32%;
  width:7px; height:7px; margin-top:calc(25.1% - 3.5px); border-radius:50%;
  background:var(--h2-gold); box-shadow:0 0 10px 2px rgba(242,182,61,.6);
  animation:hero2Pulse 3.6s ease-in-out infinite;
}
.hero2__step:nth-child(3)::after{ animation-delay:1.3s; }
.hero2__ico{
  width:50.2%; aspect-ratio:1; min-width:56px;
  margin:0 auto 13px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  display:grid; place-items:center;
  background:rgba(9,28,62,.5);
  box-shadow:0 0 26px rgba(120,170,255,.14), inset 0 0 18px rgba(255,255,255,.05);
}
.hero2__ico svg{ width:44%; height:44%; color:#fff; }
.hero2__step b{
  display:block;
  font-family:var(--font-display,inherit);
  font-size:15px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#fff;
  line-height:1.25;
}
.hero2__step span:not(.hero2__ico){
  display:block; margin-top:6px;
  font-size:13px; line-height:1.42; color:rgba(226,235,250,.88);
  padding-inline:2px;
}
.hero2__guarantee{
  position:absolute; top:74.6%; left:50.8%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:11px;
  height:52px; padding:0 24px; margin:0;
  white-space:nowrap;
  border:1px solid var(--h2-gold-soft); border-radius:30px;
  background:rgba(6,22,52,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  font-size:14.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#fff;
}
.hero2__guarantee svg{ width:20px; height:20px; color:var(--h2-gold); flex:none; }

@keyframes hero2Pulse{
  0%,100%{ opacity:.5; transform:scale(.8); }
  50%    { opacity:1;  transform:scale(1.18); }
}

/* ============================= USP STRIP ============================= */
.hero2__usps{
  position:relative; z-index:1;
  width:100%; max-width:1380px;
  margin:36px auto 0;
  padding-inline:60px;
}
.hero2__usps-card{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff;
  border-radius:14px 14px 0 0;
  box-shadow:0 -10px 40px rgba(3,12,30,.26);
  overflow:hidden;
}
.hero2__usp{
  display:flex; align-items:flex-start; gap:14px;
  padding:26px 22px 30px;
  border-right:1px solid #E6EAF2;
}
.hero2__usp:last-child{ border-right:0; }
.hero2__usp-ic{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:#EEF2F9; color:#0E2A5E;
}
.hero2__usp-ic svg{ width:22px; height:22px; }
.hero2__usp b{
  display:block;
  font-family:var(--font-display,inherit);
  font-size:14px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#0B1B33;
  margin-bottom:6px;
}
.hero2__usp p{ margin:0; font-size:13.5px; line-height:1.5; color:#5B6B86; }

/* ============================ RESPONSIVE ============================= */
@media (max-width:1439px){
  .hero2__inner{ padding-inline:44px; }
  .hero2__usps{ padding-inline:44px; }
  .hero2__eyebrow{ font-size:16px; margin-bottom:20px; }
  .hero2__step b{ font-size:14px; }
  .hero2__step span:not(.hero2__ico){ font-size:12.2px; }
  .hero2__guarantee{ height:46px; padding:0 18px; font-size:13px; letter-spacing:.5px; }
  .hero2__btn{ height:54px; padding:0 18px; font-size:15.5px; }
  .hero2__stage{ width:106%; margin-left:-4%; }
}

@media (max-width:1199px){
  .hero2__lead{ font-size:17px; }
  .hero2__note{ font-size:15px; }
  .hero2__step b{ font-size:12.5px; letter-spacing:.4px; }
  .hero2__step span:not(.hero2__ico){ font-size:11px; }
  .hero2__guarantee{ height:40px; padding:0 14px; font-size:11.5px; gap:8px; }
  .hero2__guarantee svg{ width:16px; height:16px; }
  .hero2__usp p{ font-size:12.5px; }
  .hero2__stage{ width:102%; margin-left:-1%; }
}

@media (max-width:1023px){
  .hero2{ min-height:0; padding-block:56px 0; }
  .hero2__inner{ grid-template-columns:minmax(0,1fr); gap:40px; padding-inline:32px; }
  .hero2 h1{ font-size:clamp(40px,6.4vw,58px); max-width:none; }
  .hero2__btn{ padding:0 24px; font-size:16.5px; }
  .hero2__lead,.hero2__note{ max-width:640px; }
  .hero2__visual{ order:-1; }
  .hero2__stage{ width:100%; max-width:620px; margin:-4% auto -8%; }
  .hero2__step b{ font-size:14px; }
  .hero2__step span:not(.hero2__ico){ font-size:12px; }
  .hero2__guarantee{ height:46px; padding:0 18px; font-size:12.5px; }
  .hero2__usps{ margin-top:40px; padding-inline:32px; }
  .hero2__usps-card{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero2__usp:nth-child(2){ border-right:0; }
  .hero2__usp:nth-child(1),.hero2__usp:nth-child(2){ border-bottom:1px solid #E6EAF2; }
}

@media (max-width:767px){
  .hero2{ padding-block:40px 0; }
  .hero2__inner{ padding-inline:20px; gap:34px; }
  .hero2__eyebrow{ font-size:14px; letter-spacing:.4px; margin-bottom:16px; }
  .hero2 h1{ font-size:clamp(32px,8.6vw,44px); letter-spacing:-1px; }
  .hero2__rule{ margin:18px 0 16px; }
  .hero2__lead{ font-size:16px; }
  .hero2__note{ font-size:14px; }
  .hero2__price{ min-width:0; width:100%; max-width:270px; }
  .hero2__cta{ flex-direction:column; align-items:stretch; gap:12px; margin-top:22px; }
  .hero2__btn{ width:100%; }
  .hero2__stage{ max-width:none; width:124%; margin-left:-12%; margin-bottom:0; aspect-ratio:auto; }
  .hero2__art{ position:relative; inset:auto; width:100%; aspect-ratio:806/750; margin-bottom:-56.5%; }
  .hero2__overlay{ position:static; text-align:center; }
  .hero2__flow{ position:static; margin:0 9.74% 0 13.22%; }
  .hero2__step b{ font-size:clamp(9.5px, 3.15vw, 13px); letter-spacing:.2px; }
  .hero2__step span:not(.hero2__ico){ font-size:clamp(8.8px, 2.8vw, 11.5px); line-height:1.3; margin-top:4px; }
  .hero2__ico svg{ width:42%; height:42%; }
  .hero2__guarantee{ position:static; top:auto; left:auto; transform:none; margin:16px auto 0; height:38px; padding:0 14px; font-size:clamp(8.5px, 2.7vw, 11px); letter-spacing:.2px; gap:7px; }
  .hero2__guarantee svg{ width:14px; height:14px; }
  .hero2__usps{ margin-top:30px; padding-inline:20px; }
  .hero2__usps-card{ grid-template-columns:1fr; }
  .hero2__usp{ border-right:0; border-bottom:1px solid #E6EAF2; padding:20px; }
  .hero2__usp:nth-child(2){ border-right:0; }
  .hero2__usp:last-child{ border-bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  .hero2 *,
  .hero2 *::before,
  .hero2 *::after{ animation:none !important; transition:none !important; }
}