/* HOMEPAGE — identity polish pass.
   Loaded only on index.php, after new-style.css, so every selector here
   only needs to be as specific as new-style.css's own rule to win --
   no page-wrapper class exists on the homepage to scope under, but
   .icon-row-section, .split-section, #home etc. are already unique to
   this page, so nothing here can leak onto another page. */

/* ── HERO ── */
.hero{position:relative;overflow:hidden;}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(4,83,167,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,83,167,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 65% 70% at 78% 30%, #000 0%, transparent 72%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1;}
.hero-mockup-wrap{position:relative;}
.hero-mockup-wrap::before{
  content:'';
  position:absolute;
  inset:-18px;
  background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(4,83,167,.16) 0%, transparent 72%);
  z-index:-1;
  pointer-events:none;
}
.hero-right .highlight-card{box-shadow:0 30px 70px rgba(4,83,167,.16), 0 8px 20px rgba(15,23,42,.08)!important;}

/* ── ICON ROWS (both the 4-up feature row and the 5-up security row) ── */
.icon-row{border:none!important;border-radius:0!important;gap:18px!important;}
.icon-card{
  border:1px solid var(--border)!important;
  border-radius:var(--r-lg)!important;
  position:relative;
  padding-top:36px!important;
}
.icon-card::before{
  content:'';
  position:absolute; top:0; left:22px; right:22px; height:3px;
  border-radius:0 0 3px 3px;
  background:var(--blue);
}
.icon-card:hover{border-color:rgba(4,83,167,.3)!important; box-shadow:0 12px 30px rgba(4,83,167,.09);}
.icon-card-icon{
  width:46px;height:46px;border-radius:12px;
  background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px!important;
  font-size:20px!important;
}

/* ── SPLIT SECTION ("Where Your Profit Disappears") ── */
.split-visual{box-shadow:0 20px 50px rgba(15,23,42,.07);}
.profit-loss-hero{box-shadow:0 4px 16px rgba(239,68,68,.08);}

@media (max-width:900px){
  .hero::after{mask-image:radial-gradient(ellipse 90% 50% at 50% 20%, #000 0%, transparent 75%);}
}