/* assets/flo-roi.css */

.flo-roi{
  /* tighter rhythm + still feels like a “band” */
  position: relative;
  margin: 32px 0;                 /* was 56px */
  padding: 40px 0;                /* was 72px (caused big gap) */
  background: linear-gradient(180deg, #0b1328 0%, #0e1833 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* softer transitions (less visual “blank space”) */
.flo-roi::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-28px;                      /* was -56px */
  height:28px;                    /* was 56px */
  background: linear-gradient(to bottom, transparent, #0b1328);
  pointer-events:none;
}

.flo-roi::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-28px;                   /* was -56px */
  height:28px;                    /* was 56px */
  background: linear-gradient(to top, transparent, #0e1833);
  pointer-events:none;
}

/* kicker with accent + small line for visual separation
   (use > to avoid global .kicker overrides) */
.flo-roi > .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  opacity: 1;
  color:#34d3ff !important;
}

.flo-roi > .kicker::before{
  content:"";
  width:28px;
  height:2px;
  background:#34d3ff;
  display:inline-block;
  border-radius:2px;
  opacity:.9;
}

/* headline accent span (used in roi-section.php) */
.flo-roi .roi-accent{
  background: linear-gradient(90deg, #34d3ff, #38f2c2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.flo-roi__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .flo-roi{
    padding: 28px 0;              /* was 54px */
    margin: 24px 0;               /* tighter */
  }
  .flo-roi::before{
    top: -18px;
    height: 18px;
  }
  .flo-roi::after{
    bottom: -18px;
    height: 18px;
  }
  .flo-roi__grid{ grid-template-columns: 1fr; }
}

.flo-roi__card{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18,26,54,.58), rgba(18,26,54,.38));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  padding: 18px;
}

.flo-roi__title{
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  margin: 6px 0 10px;
  font-weight: 900;
}

.flo-roi__sub{
  opacity:.82;
  max-width: 70ch;
  line-height: 1.6;
  margin: 0 0 14px;
}

.flo-roi__form{
  display:grid;
  gap: 12px;
  margin-top: 10px;
}

.flo-roi__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px){
  .flo-roi__row{ grid-template-columns: 1fr; }
}

.flo-roi label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  opacity: .9;
  margin-bottom: 6px;
}

.flo-roi input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e7ecff;
  outline: none;
}

.flo-roi input:focus{
  border-color: rgba(52, 211, 255, .5);
  box-shadow: 0 0 0 4px rgba(52,211,255,.12);
}

.flo-roi__hint{
  font-size: 12px;
  opacity: .75;
  line-height: 1.45;
}

.flo-roi__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.flo-roi__btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#e7ecff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
  text-decoration:none;
}

.flo-roi__btn:hover{ background: rgba(255,255,255,.12); }

.flo-roi__btnPrimary{
  border-color: rgba(37,211,102,.35);
  background: linear-gradient(135deg, rgba(37,211,102,.9), rgba(37,211,102,.72));
  color:#06110a;
}

.flo-roi__btnPrimary:hover{
  filter: brightness(1.02);
}

.flo-roi__metrics{
  display:grid;
  gap: 12px;
}

.flo-roi__metric{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  padding: 14px;
}

.flo-roi__metricLabel{
  font-size: 12px;
  font-weight: 900;
  opacity: .85;
  margin-bottom: 6px;
}

.flo-roi__metricValue{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
}

.flo-roi__metricMeta{
  font-size: 12px;
  opacity: .75;
  margin-top: 6px;
  line-height: 1.35;
}

.flo-roi__note{
  font-size: 12px;
  opacity: .75;
  line-height: 1.5;
  margin-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.16);
  padding-top: 10px;
}