/* ==========================================================================
   Component: Revenue Optimization & Recovery (ROR) Flagship Section v1.0
   Third principal StorageRankers business line, alongside SEO and Website
   Design. Built as a standalone, reusable component so it can be shared by
   the homepage flagship section today and a future dedicated ROR page.
   ========================================================================== */

.ror-flagship{
    position:relative;
    padding:96px 0;
    background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-800) 100%);
    color:var(--white);
    overflow:hidden;
}
.ror-flagship__grid{
    position:relative;z-index:1;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
}

/* ---- Left: copy column ---- */
.ror-flagship__content .section-eyebrow{text-align:left;margin-bottom:14px;}
.ror-flagship__content h2{
    color:var(--white);font-size:2.3rem;font-weight:800;line-height:1.16;
    margin-bottom:20px;max-width:560px;
}
.ror-flagship__content h2::after{display:none;}
.ror-flagship__desc{color:var(--gray-300);font-size:1.05rem;line-height:1.7;margin-bottom:36px;max-width:520px;}

/* Audit -> Recover -> Optimize connected framework */
.ror-framework{display:flex;align-items:flex-start;gap:0;margin-bottom:40px;}
.ror-framework__step{position:relative;flex:1 1 0;min-width:0;padding-right:22px;}
.ror-framework__step:last-child{padding-right:0;}
.ror-framework__connector{
    position:absolute;top:19px;left:calc(100% - 14px);width:36px;height:2px;
    background:linear-gradient(90deg,rgba(111,217,224,.5),rgba(111,217,224,.08));
    z-index:0;
}
.ror-framework__step:last-child .ror-framework__connector{display:none;}
.ror-framework__num{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.06);border:1.5px solid var(--teal-300);
    color:var(--teal-300);font-weight:800;font-size:.95rem;
    margin-bottom:14px;position:relative;z-index:1;
}
.ror-framework__step h3{color:var(--white);font-size:1rem;font-weight:700;margin-bottom:6px;}
.ror-framework__step p{color:var(--gray-300);font-size:.85rem;line-height:1.55;margin:0;max-width:220px;}

.ror-flagship__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---- Right: revenue-control dashboard ---- */
.ror-flagship__visual{display:flex;justify-content:center;}
.ror-dash{
    width:100%;max-width:420px;
    background:rgba(0,31,49,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(19,167,179,.18);border-radius:18px;
    padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.ror-dash__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.ror-dash__title{font-size:.85rem;font-weight:700;color:var(--white);}
.ror-dash__pill{
    display:inline-flex;align-items:center;gap:6px;background:rgba(19,167,179,.16);
    border:1px solid rgba(19,167,179,.3);color:var(--teal-300);font-size:.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:20px;
}
.ror-dash__pill-dot{width:6px;height:6px;border-radius:50%;background:var(--teal-300);}

.ror-dash__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.ror-dash__signal{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;}
.ror-dash__label{font-size:.63rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.ror-dash__spark{width:100%;height:28px;display:block;}
.ror-dash__gauge{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;text-align:center;}
.ror-dash__gauge svg{display:block;margin:0 auto 6px;}

.ror-dash__status{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;margin-bottom:12px;}
.ror-dash__status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;}
.ror-dash__status-name{color:rgba(255,255,255,.75);font-size:.74rem;}
.ror-dash__status-tag{
    display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.3px;padding:3px 9px;border-radius:12px;
}
.ror-dash__status-tag--corrected{color:var(--teal-300);background:rgba(19,167,179,.14);}
.ror-dash__status-tag--monitoring{color:var(--amber-500);background:rgba(245,141,29,.14);}
.ror-dash__status-tag--opportunity{color:#FF8A5C;background:rgba(255,138,92,.14);}

/* Unit-group indicator chips */
.ror-dash__groups{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.ror-dash__group{
    display:inline-flex;align-items:center;gap:6px;background:rgba(19,167,179,.1);
    border:1px solid rgba(19,167,179,.2);border-radius:6px;padding:5px 10px;
    font-size:.65rem;color:var(--teal-300);font-weight:600;
}
.ror-dash__group-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ror-dash__group-dot--teal{background:var(--teal-300);}
.ror-dash__group-dot--amber{background:var(--amber-500);}

/* Mini Audit -> Recover -> Optimize progress strip inside the dashboard */
.ror-dash__progress{display:flex;align-items:center;gap:0;}
.ror-dash__progress-node{
    display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 0;position:relative;
}
.ror-dash__progress-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.3);}
.ror-dash__progress-node--active .ror-dash__progress-dot{background:var(--teal-300);border-color:var(--teal-300);box-shadow:0 0 0 4px rgba(111,217,224,.18);}
.ror-dash__progress-node span{font-size:.62rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.4px;}
.ror-dash__progress-node--active span{color:var(--teal-300);font-weight:700;}
.ror-dash__progress-line{position:absolute;top:5px;left:50%;width:100%;height:1px;background:rgba(255,255,255,.15);z-index:-1;}
.ror-dash__progress-node:last-child .ror-dash__progress-line{display:none;}

/* ---- Responsive ---- */
@media (max-width:1100px){
    .ror-flagship{padding:80px 0;}
    .ror-flagship__grid{grid-template-columns:1fr;gap:44px;}
    .ror-flagship__content h2{max-width:640px;}
    .ror-flagship__desc{max-width:100%;}
    .ror-flagship__visual{order:2;}
    .ror-dash{max-width:480px;}
}
@media (max-width:640px){
    .ror-flagship{padding:56px 0;}
    .ror-flagship__content h2{font-size:1.7rem;}
    .ror-framework{flex-direction:column;gap:22px;}
    .ror-framework__step{padding-right:0;padding-left:0;}
    .ror-framework__connector{display:none;}
    .ror-framework__step p{max-width:100%;}
    .ror-flagship__actions{flex-direction:column;align-items:stretch;}
    .ror-flagship__actions .btn{width:100%;text-align:center;justify-content:center;}
    .ror-dash__groups .ror-dash__group:nth-child(n+3){display:none;}

    /* Simplify rather than squeeze: the dashboard's internal two-column
       rows (signals, gauge+status) get cramped at phone widths, especially
       longer status tags like "Opportunity". Drop to a single column and
       tighten the card padding instead of shrinking content to fit. */
    .ror-dash{padding:20px;}
    .ror-dash__row{grid-template-columns:1fr;}
}