/* ==========================================================================
   StorageRankers - Homepage Sections (Services, CMS, ROR, Pricing, FAQ, CTA)
   ========================================================================== */


/* ==========================================================================
   Services - Asymmetric Featured Layout
   ========================================================================== */
.services-redesign{
    padding:100px 0;
    background:linear-gradient(160deg, #FFFFFF 0%, #F4F9FA 55%, #EFF7F8 100%);
}
.services-redesign h2{font-size:2.4rem;color:var(--navy-950);text-align:center;margin-bottom:18px;position:relative;}
.services-redesign h2::after{content:'';width:70px;height:4px;background:var(--teal-500);display:block;margin:16px auto 0;border-radius:2px;}
.services-subhead{text-align:center;color:var(--gray-700);font-size:1.05rem;max-width:640px;margin:0 auto 56px;}

.services-layout{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start;}

/* ---- Featured panel ---- */
.service-featured{
    position:relative;overflow:hidden;background:var(--navy-950);border-radius:20px;
    padding:52px 48px;box-shadow:0 24px 50px rgba(0,31,49,.18);
}
/* Hidden starting state is scoped behind .animate-ready (added by JS only after
   the observer is wired up) so that if the script fails to load, these
   elements simply stay at their default visible state instead of being
   permanently invisible - progressive enhancement, not optional. */
.animate-ready .service-featured{
    opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out;
}
.service-featured.in-view{opacity:1;transform:translateY(0);}
.featured-ribbon{
    display:inline-block;background:var(--teal-500);color:var(--white);font-size:.78rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;padding:8px 18px 8px 16px;border-radius:0 6px 6px 0;
    margin:-52px 0 28px -48px;position:relative;
}
.featured-bg-arrow{position:absolute;top:-20px;right:-20px;width:340px;height:340px;opacity:.06;pointer-events:none;}
.featured-grid{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:44px;}
.featured-left h3{color:var(--white);font-size:2rem;margin-bottom:10px;}
.featured-tagline{color:var(--teal-300);font-weight:700;font-size:1.05rem;margin-bottom:18px;}
.featured-desc{color:var(--gray-300);font-size:1rem;line-height:1.65;margin-bottom:22px;max-width:460px;}
.featured-checklist{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:11px;}
.featured-checklist li{color:var(--white);font-size:.92rem;padding-left:26px;position:relative;}
.featured-checklist li::before{content:'\2713';position:absolute;left:0;color:var(--teal-300);font-weight:700;}

.featured-right{border-left:1px solid rgba(255,255,255,.12);padding-left:36px;}
.metrics-label{color:var(--teal-300);text-transform:uppercase;letter-spacing:1px;font-size:.72rem;font-weight:700;margin-bottom:20px;}
.metric-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.metric-row:last-child{border-bottom:none;padding-bottom:0;}
.metric-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--teal-500);display:flex;align-items:center;justify-content:center;}
.metric-value{color:var(--white);font-size:1.5rem;font-weight:800;line-height:1.1;}
.metric-name{color:var(--gray-300);font-size:.85rem;margin-top:2px;}
.metric-sub{color:rgba(255,255,255,.45);font-size:.72rem;margin-top:1px;}

/* ---- Supporting cards ---- */
.services-supporting{display:flex;flex-direction:column;gap:20px;}
.support-card{
    display:flex;gap:18px;align-items:flex-start;background:var(--white);border:1px solid var(--gray-300);
    border-radius:16px;padding:26px;text-decoration:none;box-shadow:0 6px 18px rgba(0,31,49,.06);
    transition:transform .25s,box-shadow .25s;
}
.animate-ready .support-card{opacity:0;transform:translateY(20px);}
.support-card.in-view{animation:supportCardIn .6s ease-out forwards;}
.support-card[data-delay="1"].in-view{animation-delay:.05s;}
.support-card[data-delay="2"].in-view{animation-delay:.2s;}
.support-card[data-delay="3"].in-view{animation-delay:.35s;}
@keyframes supportCardIn{to{opacity:1;transform:translateY(0);}}
.support-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,31,49,.12);}
.support-icon{
    flex-shrink:0;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    transition:transform .25s;
}
.support-card:hover .support-icon{transform:scale(1.05);}
.support-icon--teal{background:var(--teal-500);}
.support-icon--blue{background:#2B7FC9;}
.support-icon--orange{background:var(--cta-500);}
.support-body h4{color:var(--navy-950);font-size:1.1rem;margin-bottom:6px;}
.support-body p{color:var(--gray-700);font-size:.87rem;line-height:1.5;margin-bottom:10px;}
.support-link{color:var(--teal-500);font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:5px;}
.support-link svg{transition:transform .25s;}
.support-card:hover .support-link svg{transform:translateX(3px);}
.support-card--featured .support-link{color:var(--cta-500);}
.support-card--featured{border-color:rgba(242,68,5,.25);}

/* Elevated ROR pillar card: same support-card system, recolored so it reads
   as a principal business line rather than a minor add-on. Links to the
   flagship ROR section (#revenue-optimization) further down the page. */
.support-card--ror{background:var(--navy-950);border-color:var(--navy-700);}
.support-card--ror .support-body h4{color:var(--white);}
.support-card--ror .support-body p{color:var(--gray-300);}
.support-card--ror .support-link{color:var(--teal-300);}
.support-icon--ror{background:var(--amber-500);}

@media (max-width:1024px){
    .services-layout{grid-template-columns:1fr;}
    .featured-grid{grid-template-columns:1fr;gap:32px;}
    .featured-right{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:28px;}
}
@media (max-width:640px){
    .service-featured{padding:40px 26px;}
    .featured-ribbon{margin:-40px 0 24px -26px;}
    .featured-left h3{font-size:1.6rem;}
}

/* ==========================================================================
   CMS / Platform Integration Hub
   ========================================================================== */
.integration-section{padding:100px 0;background:linear-gradient(180deg,var(--white) 0%,var(--gray-100) 100%);overflow:hidden;}
.integration-layout{display:grid;grid-template-columns:1fr 1.72fr;gap:52px;align-items:center;margin-bottom:56px;}

/* ---- Intro column ---- */
.integration-intro .section-eyebrow{text-align:left;}
.integration-intro h2{font-size:2.4rem;font-weight:800;color:var(--navy-950);line-height:1.12;position:relative;padding-bottom:18px;margin-bottom:20px;}
.integration-intro h2::after{content:'';position:absolute;left:0;bottom:0;width:66px;height:4px;border-radius:2px;background:var(--teal-500);}
.integration-intro p{color:var(--gray-700);font-size:1.05rem;line-height:1.7;margin-bottom:24px;}
.integration-checklist{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:14px;}
.integration-checklist li{position:relative;padding-left:34px;color:var(--navy-950);font-weight:600;font-size:1rem;}
.integration-checklist li::before{
    content:'\2713';position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
    background:var(--teal-500);color:var(--white);font-size:.8rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
/* Live "Don't see your software?" callout (replaces the raster graphic) */
.integration-callout{
    display:flex;align-items:center;gap:18px;background:var(--white);
    border:1px solid var(--gray-300);border-radius:16px;padding:22px 24px;
    box-shadow:0 10px 28px rgba(0,31,49,.09);
}
.callout-icon{
    flex-shrink:0;width:60px;height:60px;border-radius:50%;
    background:rgba(19,167,179,.14);display:flex;align-items:center;justify-content:center;
}
.integration-callout h4{color:var(--navy-950);font-size:1rem;margin:0 0 5px;}
.integration-callout p{color:var(--gray-700);font-size:.86rem;line-height:1.5;margin:0;}

/* ---- Hub core: single positioning context for all connector wires ---- */
.integration-hub{position:relative;}
.hub-core{position:relative;}
.hub-wires{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;}

/* Google node (top) */
.hub-google{
    position:relative;z-index:2;display:flex;align-items:center;gap:12px;width:fit-content;margin:8px auto 14px;
    background:var(--white);border:1px solid var(--gray-300);border-radius:14px;padding:12px 22px;
    box-shadow:0 10px 24px rgba(0,31,49,.10);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.hub-google:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,31,49,.16);border-color:var(--teal-300);}
.hub-google-mark{width:34px;height:34px;flex-shrink:0;display:block;}
.hub-google-text{display:flex;flex-direction:column;line-height:1.2;}
.hub-google-text strong{color:var(--navy-950);font-size:1.05rem;font-weight:800;}
.hub-google-text span{color:var(--gray-700);font-size:.8rem;}

/* Three-zone body */
.hub-body{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center;}
.hub-platforms,.hub-features{display:flex;flex-direction:column;gap:16px;}

.hub-card{
    position:relative;z-index:1;display:flex;align-items:center;gap:12px;background:var(--white);
    border:1px solid var(--gray-300);border-radius:12px;padding:13px 16px;
    box-shadow:0 4px 14px rgba(0,31,49,.06);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,31,49,.15);border-color:var(--teal-300);}
.hub-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0;}
.hub-card-label{font-weight:700;color:var(--navy-950);font-size:.9rem;line-height:1.2;}
.hub-card-label small{display:block;font-weight:400;color:var(--gray-700);font-size:.72rem;margin-top:1px;}

.hub-card--feature h4{color:var(--navy-950);font-size:.9rem;margin-bottom:2px;line-height:1.2;}
.hub-card--feature p{color:var(--gray-700);font-size:.78rem;margin:0;line-height:1.4;}
.hub-feature-icon{
    flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--teal-500);
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(19,167,179,.28);
}

/* Node dots - CSS-anchored to each card edge so they always stay round and
   land exactly on the card, independent of the stretched wires SVG behind. */
.hub-platforms .hub-card::after,
.hub-features .hub-card::after{
    content:'';position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
    background:var(--white);border:2.5px solid var(--teal-500);transform:translateY(-50%);z-index:3;
}
.hub-platforms .hub-card::after{right:-6px;}
.hub-features .hub-card::after{left:-6px;}

/* Center orb + orbit ring */
.hub-center{position:relative;display:flex;align-items:center;justify-content:center;padding:14px;}
.orb-ring{
    position:absolute;top:50%;left:50%;width:250px;height:250px;transform:translate(-50%,-50%);
    border-radius:50%;border:1.5px solid rgba(19,167,179,.45);z-index:1;
}
.orb-ring::before{
    content:'';position:absolute;top:50%;left:50%;width:288px;height:288px;transform:translate(-50%,-50%);
    border-radius:50%;border:1px dashed rgba(19,167,179,.22);
}
.orb{
    position:relative;z-index:2;width:212px;height:212px;border-radius:50%;
    background:radial-gradient(120% 120% at 32% 24%,#1ab6c2 0%,#0b6a80 46%,#00263a 100%);
    box-shadow:0 18px 44px rgba(0,31,49,.34),0 0 0 8px rgba(255,255,255,.9),0 0 0 9px rgba(19,167,179,.25);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--white);
}
.orb-icon{width:52px;height:52px;margin-bottom:8px;}
.orb-title{font-weight:800;font-size:1.28rem;line-height:1.02;letter-spacing:.5px;}
.orb-sub{margin-top:6px;color:var(--teal-300);font-weight:700;font-size:.82rem;letter-spacing:.3px;}

/* ...and more pill */
.hub-more-pill{
    position:relative;z-index:2;display:block;width:fit-content;margin:14px auto 0;
    background:var(--white);border:1px solid var(--gray-300);border-radius:22px;
    color:var(--gray-700);font-weight:700;font-size:.9rem;padding:9px 24px;box-shadow:0 6px 16px rgba(0,31,49,.08);
}

/* Bottom connector feature row + dashed distribution branch */
.hub-more{margin-top:0;position:relative;}
.hub-branch{display:block;width:100%;height:40px;overflow:visible;}
.hub-more-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:0;}
.more-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 0;min-width:0;transition:transform .2s ease;}
.more-item:hover{transform:translateY(-4px);}
.more-item svg{flex-shrink:0;}
.more-item span{font-size:.78rem;color:var(--gray-700);font-weight:600;text-align:center;line-height:1.2;}

/* ---- Bottom banner (live) ---- */
.integration-banner{
    display:grid;grid-template-columns:auto auto auto 1fr auto;align-items:center;gap:26px;
    background:#EDF3F5;border:1px solid var(--gray-300);border-radius:18px;padding:24px 36px;margin-top:56px;
}
.banner-shield{flex-shrink:0;width:50px;height:50px;color:var(--teal-500);}
.banner-heading{color:var(--navy-950);font-size:1.42rem;font-weight:800;line-height:1.16;white-space:nowrap;}
.banner-divide{width:1px;height:56px;background:var(--gray-300);}
.banner-desc{color:var(--gray-700);font-size:.96rem;line-height:1.5;max-width:440px;}
.banner-tagline{color:var(--teal-500);font-weight:800;font-size:1.06rem;text-align:right;white-space:nowrap;justify-self:end;}

/* Responsive CMS block: hidden on desktop, shown on tablet/mobile */
.cms-responsive{display:none;}

@media (max-width:1200px){
    .integration-layout{display:none;}
    .cms-responsive{display:block;}

    .cms-connection-card{
        max-width:460px;margin:0 auto 36px;background:var(--navy-950);border-radius:16px;
        padding:36px 32px;text-align:center;box-shadow:0 16px 36px rgba(0,31,49,.22);
    }
    .cms-conn-icon{margin:0 auto 16px;display:block;border-radius:12px;}
    .cms-connection-card h3{color:var(--white);font-size:1.4rem;font-weight:800;margin-bottom:12px;}
    .cms-connection-card p{color:var(--gray-300);font-size:.95rem;line-height:1.6;margin:0;}

    .cms-logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px;}
    .cms-logo-card{
        display:flex;align-items:center;gap:12px;background:var(--white);
        border:1px solid var(--gray-300);border-radius:12px;padding:14px 16px;
    }

    .cms-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px;}
    .cms-feat{
        display:flex;align-items:flex-start;gap:12px;background:var(--white);
        border:1px solid var(--gray-300);border-radius:12px;padding:16px;
    }
    .cms-feat svg{flex-shrink:0;margin-top:2px;}
    .cms-feat strong{display:block;color:var(--navy-950);font-size:.88rem;margin-bottom:3px;}
    .cms-feat span{color:var(--gray-700);font-size:.8rem;line-height:1.4;}

    .cms-dont-see{
        display:flex;align-items:center;gap:18px;background:var(--white);
        border:1px solid var(--gray-300);border-radius:16px;padding:24px;
        box-shadow:0 8px 24px rgba(0,31,49,.07);margin-bottom:8px;
    }
    .cms-dont-see h4{color:var(--navy-950);font-size:1rem;margin:0 0 6px;}
    .cms-dont-see > div > p{color:var(--gray-700);font-size:.88rem;line-height:1.5;margin:0 0 14px;}
    .cms-dont-see-cta{display:inline-flex;font-size:.88rem;padding:10px 20px;}
}

@media (max-width:600px){
    .cms-logo-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .cms-feat-grid{grid-template-columns:1fr;gap:10px;}
    .cms-dont-see{flex-direction:column;text-align:center;}
    .cms-connection-card{padding:28px 22px;}
    .integration-banner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;}
    .banner-divide{display:none;}
    .banner-tagline{text-align:center;white-space:normal;}
}



/* ==========================================================================
   Revenue Optimization & Recovery
   Moved out of this file - the ROR flagship section is now a standalone,
   reusable component. See css/components/ror.css.
   ========================================================================== */


/* ==========================================================================
   Build 35.9.2 - Software cards made functional
   .hub-card was a <div>; it is now an <a>. These rules only add link
   affordances (cursor, text-decoration reset, focus ring) and the CTA
   beneath the section. The card's own box styling above is unchanged, so
   the section's appearance, background and animation system are untouched.
   ========================================================================== */
a.hub-card{text-decoration:none;cursor:pointer;}
a.hub-card:hover{border-color:var(--teal-300);}
a.hub-card:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px;}
.integration-cta{text-align:center;margin-top:44px;}
.integration-cta .btn{display:inline-flex;}
/* Text wordmark fallback where no approved platform logo asset exists */
.hub-logo--text{
    display:inline-flex;align-items:center;justify-content:center;
    width:auto;min-width:32px;height:32px;padding:0 8px;
    background:var(--navy-950);color:var(--white);border-radius:6px;
    font-size:.66rem;font-weight:800;letter-spacing:.3px;white-space:nowrap;
}
@media (max-width:640px){
    .integration-cta{margin-top:32px;}
    .integration-cta .btn{width:100%;justify-content:center;}
}