@font-face{font-family:Inter;src:url(../fonts/inter-latin.woff2) format('woff2');font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Poppins;src:url(../fonts/poppins-600-latin.woff2) format('woff2');font-style:normal;font-weight:600;font-display:swap}@font-face{font-family:Poppins;src:url(../fonts/poppins-700-latin.woff2) format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--sf-navy:#0e1b33;--sf-navy-2:#162b4f;--sf-slate:#45607f;--sf-gold:#e2a83e;--sf-gold-light:#f3c86b;--sf-paper:#f7f5f0;--sf-charcoal:#1f2328;--sf-soft:#eef1f5;--sf-green:#3c8562;--sf-red:#b94a48;--sf-blue:#2f6eeb;--sf-teal:#1f9a8a;--sf-border:#dbe1e8;--sf-radius-card:16px;--sf-radius-button:10px;--sf-shadow:0 8px 24px rgba(14,27,51,.08);--sf-max:1280px;--sf-head:Poppins,Montserrat,Arial,Helvetica,sans-serif;--sf-body:Inter,Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sf-paper);color:var(--sf-charcoal);font-family:var(--sf-body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%;height:auto}a{color:var(--sf-navy);text-underline-offset:.2em}button,input,select,textarea{font:inherit}h1,h2,h3,h4{margin:0 0 .65em;color:var(--sf-navy);font-family:var(--sf-head);line-height:1.1;letter-spacing:-.025em}h1{font-size:clamp(2.6rem,6vw,4rem)}h2{font-size:clamp(2rem,4vw,2.625rem)}h3{font-size:clamp(1.25rem,2vw,1.5rem)}p{margin:0 0 1.2em}.sf-container{width:min(calc(100% - 40px),var(--sf-max));margin-inline:auto}.sf-narrow{max-width:820px}.sf-prose{max-width:860px;padding-block:64px 96px}.sf-prose>*+*{margin-top:1.3em}.sf-prose h2{margin-top:2em}.sf-prose h3{margin-top:1.7em}.sf-prose ul,.sf-prose ol{padding-left:1.25em}.sf-prose .sf-section,.sf-prose .sf-band{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}.sf-section{padding-block:clamp(64px,8vw,112px)}.sf-section--soft{background:var(--sf-soft)}.sf-section--navy{background:var(--sf-navy);color:var(--sf-paper)}.sf-section--navy h2,.sf-section--navy h3,.sf-section--navy a{color:var(--sf-paper)}.sf-eyebrow{margin-bottom:16px;color:var(--sf-slate);font-size:.77rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.sf-section--navy .sf-eyebrow,.sf-final-cta .sf-eyebrow{color:var(--sf-gold-light)}.sf-lead{max-width:760px;color:var(--sf-slate);font-size:clamp(1.08rem,2vw,1.25rem);line-height:1.5}.sf-section--navy .sf-lead{color:#cdd7e5}.sf-kicker{font-family:var(--sf-head);font-size:clamp(1.25rem,2.8vw,2rem);font-weight:600;color:var(--sf-navy)}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sf-skip-link{position:fixed;top:12px;left:12px;z-index:9999;padding:10px 16px;background:var(--sf-gold);color:var(--sf-navy);transform:translateY(-150%)}.sf-skip-link:focus{transform:none}
.sf-site-header{position:sticky;top:0;z-index:100;background:rgba(247,245,240,.95);border-bottom:1px solid rgba(14,27,51,.08);backdrop-filter:blur(12px)}.sf-header-inner{display:flex;align-items:center;justify-content:space-between;min-height:84px}.sf-logo{display:flex;align-items:center;gap:10px;text-decoration:none}.sf-logo img{width:52px;height:53px;object-fit:contain}.sf-logo span{display:grid;line-height:1}.sf-logo strong{font-family:var(--sf-head);font-size:1.05rem;letter-spacing:-.03em}.sf-logo small{margin-top:3px;color:var(--sf-slate);font-size:.82rem}.sf-primary-nav,.sf-nav-list{display:flex;align-items:center}.sf-nav-list{gap:24px;margin:0;padding:0;list-style:none}.sf-nav-list a{font-size:.92rem;font-weight:600;text-decoration:none}.sf-nav-list a:hover{text-decoration:underline}.sf-primary-nav{gap:28px}.sf-menu-toggle{display:none;width:46px;height:46px;padding:11px;border:1px solid var(--sf-border);border-radius:10px;background:transparent}.sf-menu-toggle span:not(.screen-reader-text){display:block;height:2px;margin:5px 0;background:var(--sf-navy)}
.sf-button,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 21px;border:0;border-radius:var(--sf-radius-button);background:var(--sf-gold);color:var(--sf-navy)!important;font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease}.sf-button:hover,.wp-block-button__link:hover{background:#d39a31;transform:translateY(-1px)}.sf-button--small{min-height:44px;padding:10px 16px;font-size:.9rem}.sf-button--dark{background:var(--sf-navy);color:var(--sf-paper)!important}.sf-button--ghost{border:1px solid var(--sf-border);background:transparent}.sf-text-link{font-weight:700;text-decoration-thickness:1px}.sf-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sf-gold);outline-offset:2px}
.sf-hero{position:relative;min-height:calc(100vh - 84px);display:grid;align-items:center;overflow:hidden}.sf-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);align-items:center;gap:48px}.sf-hero-copy{position:relative;z-index:2;padding-block:72px}.sf-hero h1{max-width:760px}.sf-hero-visual{position:relative}.sf-hero-visual img{width:100%;border-radius:24px;box-shadow:var(--sf-shadow)}.sf-hero-labels{position:absolute;inset:auto 7% 7% 7%;display:flex;flex-wrap:wrap;gap:8px}.sf-hero-labels span{padding:7px 10px;border:1px solid rgba(247,245,240,.42);border-radius:7px;background:rgba(14,27,51,.84);color:var(--sf-paper);font-size:.72rem;font-weight:700;backdrop-filter:blur(5px)}.sf-cta-note{max-width:560px;margin-top:20px;color:var(--sf-slate);font-size:.9rem}.sf-trust-strip{border-block:1px solid var(--sf-border);background:#fff}.sf-trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.sf-trust-grid div{padding:22px 18px;border-right:1px solid var(--sf-border);color:var(--sf-navy);font-size:.73rem;font-weight:700;letter-spacing:.09em;text-align:center}.sf-trust-grid div:last-child{border-right:0}
.sf-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px);align-items:start}.sf-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}.sf-card{padding:28px;border:1px solid var(--sf-border);border-radius:var(--sf-radius-card);background:#fff}.sf-card p:last-child{margin-bottom:0}.sf-card-num{display:inline-block;margin-bottom:28px;color:var(--sf-gold);font-family:var(--sf-head);font-size:.78rem;font-weight:700;letter-spacing:.1em}.sf-card--navy{background:var(--sf-navy);color:var(--sf-paper)}.sf-card--navy h3{color:var(--sf-paper)}.sf-contrast{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;margin-top:44px}.sf-contrast-panel{padding:32px;border:1px solid var(--sf-border);border-radius:var(--sf-radius-card);background:#fff}.sf-contrast-panel--system{border-color:var(--sf-navy);background:var(--sf-navy);color:var(--sf-paper)}.sf-contrast-panel--system h3{color:var(--sf-paper)}.sf-versus{align-self:center;color:var(--sf-slate);font-size:.75rem;font-weight:800;letter-spacing:.15em}.sf-list-clean{margin:0;padding:0;list-style:none}.sf-list-clean li{padding:10px 0;border-bottom:1px solid var(--sf-border)}.sf-section--navy .sf-list-clean li{border-color:rgba(247,245,240,.16)}
.sf-calculator{padding:34px;border:1px solid var(--sf-border);border-radius:var(--sf-radius-card);background:#fff}.sf-range-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}.sf-range{width:100%;accent-color:var(--sf-gold)}.sf-range-value{min-width:72px;color:var(--sf-navy);font-family:var(--sf-head);font-size:2rem;font-weight:700;text-align:right}.sf-calculator-output{display:flex;align-items:baseline;gap:12px;margin-top:22px;color:var(--sf-navy)}.sf-calculator-output strong{font-family:var(--sf-head);font-size:clamp(2.5rem,7vw,5rem);line-height:1}.sf-disclaimer{margin-top:20px;color:var(--sf-slate);font-size:.82rem}
.sf-flywheel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:42px}.sf-stage{position:relative;min-height:150px;padding:24px;border:1px solid var(--sf-border);border-radius:14px;background:#fff;cursor:pointer;transition:transform .2s ease,border-color .2s ease}.sf-stage:hover,.sf-stage.is-active{border-color:var(--sf-gold);transform:translateY(-3px)}.sf-stage.is-active:before{content:"";position:absolute;top:0;left:24px;width:44px;height:4px;background:var(--sf-gold)}.sf-stage small{display:block;margin-bottom:22px;color:var(--sf-slate);font-weight:700}.sf-stage p{margin:0;color:var(--sf-slate);font-size:.9rem}.sf-journey{display:flex;align-items:center;gap:8px;overflow-x:auto;margin-top:36px;padding:18px 4px 28px}.sf-journey-step{min-width:132px;padding:18px;border:1px solid var(--sf-border);border-radius:12px;background:#fff;text-align:center}.sf-journey-arrow{color:var(--sf-gold);font-size:1.4rem;font-weight:700}.sf-journey-branch{border-color:var(--sf-teal)}
.sf-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px}.sf-week{position:relative;padding:28px 24px;border-top:3px solid var(--sf-border)}.sf-week:before{content:"";position:absolute;top:-8px;left:24px;width:13px;height:13px;border-radius:50%;background:var(--sf-gold)}.sf-week h3{font-size:1.15rem}.sf-week ul{padding-left:18px}.sf-ownership-grid,.sf-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}.sf-ownership-grid div,.sf-metric{padding:24px;border:1px solid rgba(247,245,240,.18);border-radius:14px}.sf-metric{border-color:var(--sf-border);background:#fff}.sf-metric span{display:block;color:var(--sf-slate);font-size:.86rem}.sf-comparison{width:100%;border-collapse:collapse;margin-top:40px;background:#fff}.sf-comparison th,.sf-comparison td{padding:16px;border:1px solid var(--sf-border);text-align:left;vertical-align:top}.sf-comparison th{background:var(--sf-navy);color:var(--sf-paper)}.sf-comparison td:last-child{background:#fff8e8;font-weight:600}
.sf-diagnostic{padding:32px;border:1px solid var(--sf-border);border-radius:var(--sf-radius-card);background:#fff}.sf-diagnostic-progress{height:6px;margin-bottom:28px;border-radius:999px;background:var(--sf-soft);overflow:hidden}.sf-diagnostic-progress span{display:block;width:0;height:100%;background:var(--sf-gold);transition:width .3s ease}.sf-diagnostic fieldset{margin:0;padding:0;border:0}.sf-diagnostic legend{margin-bottom:24px;color:var(--sf-navy);font-family:var(--sf-head);font-size:1.45rem;font-weight:600}.sf-diagnostic-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sf-diagnostic-options button{padding:16px;border:1px solid var(--sf-border);border-radius:10px;background:var(--sf-paper);color:var(--sf-navy);font-weight:700}.sf-diagnostic-result{padding:24px;border-left:4px solid var(--sf-gold);background:var(--sf-soft)}
.sf-form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.sf-field{display:flex;flex-direction:column;gap:7px}.sf-field--full{grid-column:1/-1}.sf-field label{color:var(--sf-navy);font-weight:700}.sf-field input,.sf-field select,.sf-field textarea{width:100%;padding:13px 14px;border:1px solid #aab5c3;border-radius:8px;background:#fff;color:var(--sf-charcoal)}.sf-field textarea{min-height:140px;resize:vertical}.sf-field .sf-optional{color:var(--sf-slate);font-size:.82rem;font-weight:400}.sf-consent{display:flex;gap:10px;align-items:flex-start}.sf-consent input{width:20px;height:20px;margin-top:3px}.sf-form-notice{padding:18px;border-radius:10px}.sf-form-notice--success{border:1px solid var(--sf-green);background:#edf7f1}.sf-form-notice--error{border:1px solid var(--sf-red);background:#fff0ef}.sf-hp{position:absolute!important;left:-10000px!important}
.sf-page-hero{padding-block:clamp(72px,10vw,128px);border-bottom:1px solid var(--sf-border);background:linear-gradient(120deg,var(--sf-paper) 60%,#eef2f5)}.sf-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.sf-post-card,.sf-empty-state{padding:30px;border:1px solid var(--sf-border);border-radius:var(--sf-radius-card);background:#fff}.sf-post-card h2{font-size:1.45rem}.sf-post-card h2 a{text-decoration:none}.sf-source-note{margin-top:48px;padding:24px;border-left:4px solid var(--sf-gold);background:var(--sf-soft)}.sf-final-cta{padding:clamp(64px,9vw,112px) max(20px,calc((100vw - var(--sf-max))/2));background:var(--sf-navy);color:var(--sf-paper)}.sf-final-cta h2{color:var(--sf-paper)}
.sf-site-footer{padding-top:72px;background:#091428;color:#cbd5e2}.sf-footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:48px}.sf-footer-brand img{width:120px;height:120px;margin-bottom:20px;border-radius:14px;background:var(--sf-paper)}.sf-footer-brand p{max-width:420px}.sf-site-footer h2{color:var(--sf-paper);font-size:1rem}.sf-site-footer a{display:block;margin:9px 0;color:#cbd5e2;text-decoration:none}.sf-footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-block:22px;border-top:1px solid rgba(247,245,240,.13);font-size:.84rem}
@media(max-width:1024px){.sf-card-grid{grid-template-columns:repeat(2,1fr)}.sf-flywheel{grid-template-columns:repeat(2,1fr)}.sf-ownership-grid,.sf-metric-grid{grid-template-columns:repeat(2,1fr)}.sf-hero-grid{grid-template-columns:1fr}.sf-hero{min-height:auto}.sf-hero-visual{max-width:760px;margin-bottom:64px}.sf-primary-nav{position:absolute;top:84px;left:0;right:0;display:none;align-items:stretch;padding:28px 20px;background:var(--sf-paper);border-bottom:1px solid var(--sf-border)}.sf-primary-nav.is-open{display:block}.sf-nav-list{display:grid;gap:0}.sf-nav-list li{border-bottom:1px solid var(--sf-border)}.sf-nav-list a{display:block;padding:13px 0}.sf-primary-nav>.sf-button{margin-top:20px}.sf-menu-toggle{display:block}.sf-footer-grid{grid-template-columns:2fr 1fr 1fr}.sf-footer-grid>div:last-child{grid-column:2}.sf-timeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.sf-container{width:min(calc(100% - 32px),var(--sf-max))}.sf-section{padding-block:64px}.sf-hero-copy{padding-block:56px 24px}.sf-hero h1{font-size:clamp(2.35rem,11vw,3.25rem)}.sf-hero-grid{gap:18px}.sf-hero-labels{position:static;margin-top:12px}.sf-trust-grid{grid-template-columns:repeat(2,1fr)}.sf-trust-grid div:nth-child(2){border-right:0}.sf-trust-grid div:nth-child(-n+2){border-bottom:1px solid var(--sf-border)}.sf-split,.sf-card-grid,.sf-ownership-grid,.sf-metric-grid,.sf-form,.sf-post-grid{grid-template-columns:1fr}.sf-contrast{grid-template-columns:1fr}.sf-versus{text-align:center}.sf-flywheel{grid-template-columns:1fr}.sf-stage{min-height:0}.sf-timeline{grid-template-columns:1fr}.sf-week{border-top:0;border-left:3px solid var(--sf-border)}.sf-week:before{top:31px;left:-8px}.sf-comparison{display:block;overflow-x:auto;white-space:nowrap}.sf-diagnostic-options{grid-template-columns:1fr}.sf-field--full{grid-column:auto}.sf-footer-grid{grid-template-columns:1fr 1fr}.sf-footer-brand{grid-column:1/-1}.sf-footer-grid>div:last-child{grid-column:auto}.sf-footer-bottom{flex-direction:column}.sf-page-hero{padding-block:64px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ==========================================================================
   Scaleframe Interactive & Visual Components Upgrade
   ========================================================================== */

/* 1. Interactive Agency Chaos vs System Simulator */
.sf-simulator{margin-top:40px;padding:36px;border:1px solid var(--sf-border);border-radius:20px;background:#fff;box-shadow:var(--sf-shadow)}
.sf-sim-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:32px}
.sf-sim-toggle-pill{display:inline-flex;padding:6px;border-radius:999px;background:var(--sf-soft);gap:6px;border:1px solid var(--sf-border)}
.sf-sim-btn{display:flex;align-items:center;gap:8px;padding:10px 22px;border:0;border-radius:999px;background:transparent;color:var(--sf-slate);font-weight:700;font-size:.92rem;cursor:pointer;transition:all .2s ease}
.sf-sim-btn.is-active{background:var(--sf-navy);color:#fff;box-shadow:0 4px 12px rgba(14,27,51,.15)}
.sf-sim-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.sf-sim-dot--red{background:#e53e3e}
.sf-sim-dot--gold{background:var(--sf-gold)}
.sf-sim-tagline{margin-top:14px;color:var(--sf-slate);font-size:.9rem}
.sf-sim-banner{margin-bottom:32px;overflow:hidden;border-radius:14px;border:1px solid var(--sf-border);background:#091428}
.sf-sim-banner img{width:100%;height:auto;display:block;transition:transform .4s ease}
.sf-sim-banner:hover img{transform:scale(1.01)}
.sf-sim-view{display:none}
.sf-sim-view.is-visible{display:block;animation:sfFadeIn .3s ease}
.sf-sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sf-sim-card{padding:32px;border-radius:16px;border:1px solid var(--sf-border);background:var(--sf-paper)}
.sf-sim-card--danger{border-color:#fed7d7;background:#fffaf0}
.sf-sim-card--system{border-color:var(--sf-navy);background:#fff}
.sf-sim-badge{display:inline-block;padding:5px 12px;border-radius:6px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;background:var(--sf-soft);color:var(--sf-slate)}
.sf-sim-badge--danger{background:#fed7d7;color:#9b2c2c}
.sf-sim-badge--gold{background:var(--sf-gold-light);color:var(--sf-navy)}
.sf-sim-friction-list,.sf-sim-system-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:18px}
.sf-sim-friction-list li,.sf-sim-system-list li{display:flex;gap:14px;align-items:flex-start}
.sf-icon-bullet{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;flex-shrink:0;margin-top:2px}
.sf-icon-bullet--danger{background:#fee2e2;color:#dc2626}
.sf-icon-bullet--gold{background:#fef3c7;color:#b45309}
.sf-icon-bullet svg{width:16px;height:16px}
.sf-sim-calc-box{background:#fff}
.sf-sim-slider-row{margin-block:20px 24px}
.sf-sim-slider-row label{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--sf-navy);margin-bottom:10px}
.sf-slider-val{font-size:1.6rem;font-family:var(--sf-head);color:var(--sf-gold);font-weight:700}
.sf-sim-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--sf-border)}
.sf-sim-stat{display:flex;flex-direction:column;gap:4px}
.sf-sim-stat strong{font-family:var(--sf-head);font-size:1.45rem;color:var(--sf-navy)}
.sf-sim-stat span{font-size:.78rem;color:var(--sf-slate);line-height:1.3}
.sf-sim-stat--burn strong{color:#dc2626}
.sf-sim-system-summary{background:#fff;display:flex;flex-direction:column;justify-content:space-between}
.sf-sim-metric-callout{display:flex;align-items:center;gap:18px;margin-block:16px 20px;padding:18px;border-radius:12px;background:var(--sf-soft)}
.sf-metric-lead-num{font-family:var(--sf-head);font-size:3.5rem;line-height:1;font-weight:800;color:var(--sf-gold)}
.sf-metric-lead-text strong{display:block;font-size:1.15rem;color:var(--sf-navy)}
.sf-metric-lead-text p{margin:4px 0 0;font-size:.85rem;color:var(--sf-slate)}
.sf-sim-comparison-pills{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.sf-comp-pill{display:flex;justify-content:space-between;padding:10px 14px;border-radius:8px;background:var(--sf-paper);font-size:.88rem}
.sf-comp-pill span{color:var(--sf-slate)}
.sf-comp-pill strong{color:var(--sf-navy)}

/* 2. Post-Click Funnel Leak Detector */
.sf-leak-detector{margin-top:40px;padding:36px;border-radius:20px;background:#fff;border:1px solid var(--sf-border);box-shadow:var(--sf-shadow)}
.sf-leak-header{text-align:center;max-width:720px;margin-inline:auto;margin-bottom:36px}
.sf-leak-controls{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;padding:24px;border-radius:14px;background:var(--sf-soft);margin-bottom:36px}
.sf-leak-control label{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--sf-navy);margin-bottom:10px}
.sf-leak-control output{color:var(--sf-gold);font-family:var(--sf-head);font-size:1.25rem;font-weight:700}
.sf-leak-select{width:100%;padding:13px 14px;border:1px solid var(--sf-border);border-radius:8px;background:#fff;color:var(--sf-navy);font-weight:600}
.sf-leak-funnel-viz{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.sf-funnel-step{position:relative;width:100%;background:var(--sf-soft);border-radius:10px;overflow:hidden}
.sf-funnel-bar{height:52px;display:flex;align-items:center;justify-content:space-between;padding-inline:20px;border-radius:10px;transition:width .4s ease;white-space:nowrap}
.sf-funnel-bar--1{width:100%;background:linear-gradient(90deg,#0e1b33,#162b4f);color:#fff}
.sf-funnel-bar--2{width:75%;background:linear-gradient(90deg,#162b4f,#2b4675);color:#fff}
.sf-funnel-bar--3{width:40%;background:linear-gradient(90deg,#dc2626,#ef4444);color:#fff}
.sf-funnel-bar--4{width:25%;background:linear-gradient(90deg,#e2a83e,#f3c86b);color:var(--sf-navy)}
.sf-funnel-label{font-weight:700;font-size:.9rem}
.sf-funnel-val{font-family:var(--sf-head);font-size:1.1rem;font-weight:700}
.sf-funnel-loss{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#dc2626;font-size:.82rem;font-weight:700}
.sf-leak-summary{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;padding-top:24px;border-top:1px solid var(--sf-border);align-items:center}
.sf-leak-alert{display:flex;gap:14px;align-items:flex-start}
.sf-leak-alert-icon{color:#e53e3e;flex-shrink:0;margin-top:2px}
.sf-leak-alert h4{margin:0 0 4px;font-size:1rem;color:var(--sf-navy)}
.sf-leak-alert p{margin:0;font-size:.85rem;color:var(--sf-slate)}
.sf-leak-financial{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:12px;background:var(--sf-paper);border:1px solid var(--sf-border);text-align:right}
.sf-leak-calc-row{display:flex;justify-content:space-between;align-items:center}
.sf-leak-calc-row span{font-size:.85rem;color:var(--sf-slate)}
.sf-leak-amount{font-family:var(--sf-head);font-size:1.5rem;color:#dc2626}

/* 3. Upgraded 8-Stage Flywheel */
.sf-flywheel-pro{margin-top:40px}
.sf-flywheel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sf-stage-pro{position:relative;padding:24px;border:1px solid var(--sf-border);border-radius:16px;background:#fff;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;justify-content:space-between}
.sf-stage-pro:hover,.sf-stage-pro.is-active{border-color:var(--sf-gold);transform:translateY(-4px);box-shadow:0 12px 24px rgba(226,168,62,.15)}
.sf-stage-pro.is-active:before{content:"";position:absolute;top:0;left:24px;right:24px;height:4px;border-radius:0 0 4px 4px;background:var(--sf-gold)}
.sf-stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sf-stage-icon{color:var(--sf-navy);display:flex}
.sf-stage-badge{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--sf-slate);background:var(--sf-soft);padding:4px 8px;border-radius:4px}
.sf-stage-pro h3{font-size:1.25rem;margin-bottom:8px;color:var(--sf-navy)}
.sf-stage-pro p{margin:0 0 16px;color:var(--sf-slate);font-size:.86rem;line-height:1.45}
.sf-stage-arrow{align-self:flex-end;color:var(--sf-gold);font-weight:700;font-size:1.1rem;transition:transform .2s ease}
.sf-stage-pro:hover .sf-stage-arrow{transform:translateX(4px)}

/* 4. Capabilities Matrix */
.sf-capabilities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.sf-cap-card{padding:28px;border:1px solid var(--sf-border);border-radius:16px;background:#fff;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}
.sf-cap-card:hover{transform:translateY(-4px);border-color:var(--sf-gold);box-shadow:var(--sf-shadow)}
.sf-cap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.sf-cap-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--sf-soft);color:var(--sf-navy)}
.sf-cap-num{font-family:var(--sf-head);font-size:.82rem;font-weight:800;color:var(--sf-gold)}
.sf-cap-card h3{font-size:1.2rem;margin-bottom:12px;color:var(--sf-navy)}
.sf-cap-solves{margin-bottom:14px;padding:12px;border-radius:8px;background:#fffaf0;border-left:3px solid var(--sf-gold)}
.sf-cap-solves strong{display:block;font-size:.72rem;text-transform:uppercase;color:#b45309;letter-spacing:.06em}
.sf-cap-solves p{margin:2px 0 0;font-size:.82rem;color:var(--sf-charcoal)}
.sf-cap-deliverables{margin-bottom:20px;font-size:.84rem;color:var(--sf-slate);flex-grow:1}
.sf-cap-deliverables span{font-weight:700;color:var(--sf-navy)}
.sf-cap-action a{font-size:.88rem;font-weight:700;color:var(--sf-navy);text-decoration:none}
.sf-cap-action a:hover{color:var(--sf-gold)}

/* 5. Customer Journey Pipeline */
.sf-journey-pro{margin-top:40px}
.sf-journey-flow{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding-block:16px 28px}
.sf-j-node{flex:0 0 160px;padding:16px;border:1px solid var(--sf-border);border-radius:12px;background:#fff;cursor:pointer;transition:all .2s ease;text-align:center}
.sf-j-node:hover,.sf-j-node.is-inspected{border-color:var(--sf-gold);box-shadow:0 8px 20px rgba(14,27,51,.08);transform:translateY(-2px)}
.sf-j-step-num{font-size:.68rem;font-weight:800;color:var(--sf-gold);letter-spacing:.08em;margin-bottom:6px}
.sf-j-pill{font-weight:700;font-size:.9rem;color:var(--sf-navy);margin-bottom:10px}
.sf-j-drawer{display:none;font-size:.76rem;text-align:left;border-top:1px solid var(--sf-border);padding-top:10px;margin-top:10px}
.sf-j-node.is-inspected .sf-j-drawer{display:block}
.sf-j-fix{color:var(--sf-green);margin-bottom:6px}
.sf-j-fail{color:#dc2626}
.sf-j-connector{display:flex;align-items:center;color:var(--sf-gold);font-weight:800;font-size:1.2rem}

/* 6. Client Ownership Pillars */
.sf-ownership-pro{margin-top:40px}
.sf-ownership-grid-pro{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sf-own-card{padding:30px;border-radius:16px;border:1px solid rgba(247,245,240,.18);background:rgba(22,43,79,.6);backdrop-filter:blur(10px);color:var(--sf-paper);display:flex;flex-direction:column;justify-content:space-between}
.sf-own-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:rgba(226,168,62,.15);color:var(--sf-gold);margin-bottom:20px}
.sf-own-card h3{color:#fff;font-size:1.25rem;margin-bottom:12px}
.sf-own-card p{color:#cbd5e2;font-size:.88rem;line-height:1.5;margin-bottom:20px}
.sf-own-badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--sf-gold)}
.sf-own-badge svg{width:14px;height:14px}

/* 7. 30-Day Launch Roadmap */
.sf-roadmap-pro{margin-top:40px}
.sf-roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sf-road-card{padding:28px;border-radius:16px;border:1px solid var(--sf-border);background:#fff;display:flex;flex-direction:column}
.sf-road-eyebrow{font-size:.72rem;font-weight:800;color:var(--sf-gold);letter-spacing:.12em;margin-bottom:8px}
.sf-road-card h3{font-size:1.2rem;margin-bottom:16px;color:var(--sf-navy)}
.sf-road-deliverables{font-size:.84rem;color:var(--sf-slate);margin-bottom:16px;flex-grow:1}
.sf-road-deliverables strong{display:block;color:var(--sf-navy);margin-bottom:4px}
.sf-road-client{padding:10px 12px;border-radius:8px;background:var(--sf-soft);font-size:.78rem;color:var(--sf-charcoal)}
.sf-road-client strong{display:block;color:var(--sf-navy)}

/* 8. Gamified Diagnostic Pro */
.sf-diagnostic-pro{margin-top:40px;padding:36px;border-radius:20px;border:1px solid var(--sf-border);background:#fff;box-shadow:var(--sf-shadow)}
.sf-diag-progress-bar{height:6px;border-radius:999px;background:var(--sf-soft);overflow:hidden;margin-bottom:32px}
.sf-diag-progress-bar span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--sf-navy),var(--sf-gold));transition:width .3s ease}
.sf-diag-step-count{display:block;font-size:.78rem;font-weight:700;color:var(--sf-slate);margin-bottom:12px}
.sf-diag-step-count em{color:var(--sf-gold);font-style:normal;font-weight:800}
.sf-diag-legend{font-family:var(--sf-head);font-size:1.5rem;font-weight:600;color:var(--sf-navy);margin-bottom:28px}
.sf-diagnostic-options-pro{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sf-diag-opt-btn{display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--sf-border);border-radius:12px;background:var(--sf-paper);color:var(--sf-navy);font-weight:700;font-size:.92rem;cursor:pointer;transition:all .2s ease;text-align:left}
.sf-diag-opt-btn:hover{border-color:var(--sf-gold);background:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,27,51,.06)}
.sf-opt-icon{width:22px;height:22px;border-radius:50%;background:var(--sf-soft);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.sf-diagnostic-result-pro{padding:32px;border-radius:16px;background:var(--sf-soft);border:1px solid var(--sf-border)}
.sf-diag-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block:24px}
.sf-diag-metric-box{padding:20px;border-radius:12px;background:#fff;border:1px solid var(--sf-border);text-align:center}
.sf-diag-num{display:block;font-family:var(--sf-head);font-size:2.2rem;font-weight:800;line-height:1}
.sf-diag-num--red{color:#dc2626}
.sf-diag-num--gold{color:var(--sf-gold)}
.sf-diag-metric-box span{display:block;margin-top:6px;font-size:.8rem;color:var(--sf-slate);font-weight:700}
.sf-diag-advice{padding:18px;border-radius:10px;background:#fff;border-left:4px solid var(--sf-gold);margin-bottom:24px}
.sf-diag-advice strong{display:block;color:var(--sf-navy);margin-bottom:4px}
.sf-diag-advice p{margin:0;font-size:.9rem;color:var(--sf-charcoal)}

/* 9. Visual Mockup Containers */
.sf-dashboard-showcase{margin-top:40px;border-radius:20px;overflow:hidden;border:1px solid var(--sf-border);box-shadow:var(--sf-shadow);background:#091428}
.sf-dashboard-showcase img{width:100%;height:auto;display:block}

/* Fade animation */
@keyframes sfFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Responsive adjustments */
@media(max-width:1024px){
  .sf-capabilities-grid{grid-template-columns:repeat(2,1fr)}
  .sf-flywheel-grid{grid-template-columns:repeat(2,1fr)}
  .sf-ownership-grid-pro{grid-template-columns:repeat(2,1fr)}
  .sf-roadmap-grid{grid-template-columns:repeat(2,1fr)}
  .sf-sim-grid{grid-template-columns:1fr}
  .sf-leak-controls{grid-template-columns:1fr}
  .sf-leak-summary{grid-template-columns:1fr}
}

@media(max-width:720px){
  .sf-capabilities-grid,.sf-flywheel-grid,.sf-ownership-grid-pro,.sf-roadmap-grid{grid-template-columns:1fr}
  .sf-diagnostic-options-pro{grid-template-columns:1fr}
  .sf-diag-score-grid{grid-template-columns:1fr}
  .sf-sim-stats-grid{grid-template-columns:1fr}
  .sf-sim-toggle-pill{flex-direction:column;width:100%}
  .sf-sim-btn{justify-content:center}
}


/* Header scrolled shadow */
.sf-site-header.is-scrolled{background:rgba(247,245,240,.98);box-shadow:0 4px 20px rgba(14,27,51,.08);border-bottom-color:rgba(14,27,51,.12)}

/* Currency selector pill styling */
.sf-currency-selector-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;font-size:.84rem;color:var(--sf-slate)}
.sf-curr-pills{display:inline-flex;gap:4px;background:var(--sf-soft);padding:4px;border-radius:999px;border:1px solid var(--sf-border)}
.sf-curr-pill{border:0;background:transparent;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--sf-slate);cursor:pointer;transition:all .15s ease}
.sf-curr-pill:hover{color:var(--sf-navy)}
.sf-curr-pill.is-active{background:var(--sf-gold);color:var(--sf-navy);box-shadow:0 2px 8px rgba(226,168,62,.25)}

/* Subpage body wide layout */
.sf-page-hero{background:linear-gradient(135deg,#0e1b33 0%,#162b4f 100%)!important;color:#fff!important;padding-block:clamp(64px,8vw,100px)!important}
.sf-page-hero h1{color:#fff!important}
.sf-page-hero .sf-lead{color:#cbd5e2!important}
.sf-page-hero .sf-eyebrow{color:var(--sf-gold)!important}

.sf-page-body{width:min(calc(100% - 40px),var(--sf-max));margin-inline:auto;padding-block:48px 96px}
.sf-page-body>p,.sf-page-body>h2,.sf-page-body>h3,.sf-page-body>ul,.sf-page-body>ol,.sf-page-body>.sf-narrow{max-width:820px;margin-inline:auto}
.sf-page-body>h2{margin-top:2.2em}
.sf-page-body>h3{margin-top:1.8em}
.sf-page-body>.sf-capabilities-grid,.sf-page-body>.sf-flywheel-pro,.sf-page-body>.sf-leak-detector,.sf-page-body>.sf-simulator,.sf-page-body>.sf-roadmap-pro,.sf-page-body>.sf-ownership-pro,.sf-page-body>.sf-journey-pro,.sf-page-body>.sf-dashboard-showcase,.sf-page-body>.sf-final-cta,.sf-page-body>.sf-card-grid,.sf-page-body>.sf-post-grid{max-width:100%}


/* Capabilities Filter Tabs */
.sf-cap-matrix-wrapper{margin-top:36px}
.sf-cap-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
.sf-cap-tab{padding:8px 18px;border:1px solid var(--sf-border);border-radius:999px;background:#fff;color:var(--sf-slate);font-weight:700;font-size:.84rem;cursor:pointer;transition:all .2s ease}
.sf-cap-tab:hover{color:var(--sf-navy);border-color:var(--sf-gold)}
.sf-cap-tab.is-active{background:var(--sf-navy);color:#fff;border-color:var(--sf-navy);box-shadow:0 4px 12px rgba(14,27,51,.15)}

/* Customer Journey Swipe Hint */
.sf-journey-swipe-hint{display:none;text-align:center;font-size:.78rem;font-weight:700;color:var(--sf-slate);margin-bottom:12px;letter-spacing:.05em}
@media(max-width:1024px){.sf-journey-swipe-hint{display:block}}

/* Inspected state enhancement */
.sf-j-node.is-inspected{border-color:var(--sf-gold)!important;box-shadow:0 0 0 3px rgba(226,168,62,.3), 0 10px 25px rgba(14,27,51,.12)!important;transform:translateY(-3px)}

/* Subtle scroll reveal enhancement */
.sf-card,.sf-sim-card,.sf-cap-card,.sf-own-card,.sf-road-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}


/* ==========================================================================
   Loop 3: Performance, Accessibility & Mobile Polish
   ========================================================================== */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* High contrast focus ring for keyboard accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--sf-gold) !important;
  outline-offset: 3px !important;
}

/* Button micro-interactions */
.sf-button {
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(226,168,62,.2);
}
.sf-button:hover {
  box-shadow: 0 6px 20px rgba(226,168,62,.35);
}
.sf-button:active {
  transform: translateY(1px);
}

/* Smooth card transitions */
.sf-cap-card, .sf-stage-pro, .sf-own-card, .sf-road-card, .sf-sim-card {
  will-change: transform;
}

/* Mobile responsive fixes */
@media(max-width:600px){
  .sf-container {
    width: calc(100% - 24px) !important;
  }
  .sf-simulator, .sf-leak-detector, .sf-diagnostic-pro {
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }
  .sf-sim-btn {
    padding: 8px 14px !important;
    font-size: .82rem !important;
  }
  .sf-sim-card {
    padding: 20px 16px !important;
  }
  .sf-leak-controls {
    padding: 16px !important;
    gap: 20px !important;
  }
  .sf-funnel-bar {
    padding-inline: 12px !important;
    height: 46px !important;
  }
  .sf-funnel-label {
    font-size: .78rem !important;
  }
  .sf-funnel-val {
    font-size: .9rem !important;
  }
  .sf-funnel-loss {
    position: static !important;
    transform: none !important;
    display: block !important;
    font-size: .72rem !important;
    margin-top: 4px;
    padding-left: 12px;
  }
  .sf-sim-stat strong {
    font-size: 1.25rem !important;
  }
  .sf-cap-card {
    padding: 20px 16px !important;
  }
  .sf-page-hero {
    padding-block: 48px !important;
  }
  .sf-page-body {
    padding-block: 32px 64px !important;
  }
  .sf-diag-legend {
    font-size: 1.2rem !important;
  }
  .sf-diag-opt-btn {
    padding: 14px 16px !important;
    font-size: .86rem !important;
  }
}


/* ==========================================================================
   Pictorial Visual Cards & Animated Illustrations
   ========================================================================== */

.sf-cap-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sf-cap-card .sf-cap-header,
.sf-cap-card h3,
.sf-cap-card .sf-cap-solves,
.sf-cap-card .sf-cap-deliverables,
.sf-cap-card .sf-cap-action {
  padding-inline: 24px;
}

.sf-cap-card .sf-cap-header {
  margin-top: 20px;
}

.sf-cap-card .sf-cap-action {
  padding-bottom: 24px;
}

.sf-pic-art {
  height: 140px;
  position: relative;
  background: linear-gradient(135deg, #091428 0%, #162b4f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(226,168,62,.18);
}

.sf-pic-chip {
  position: absolute;
  bottom: 10px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14,27,51,.85);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sf-pic-chip--gold { border-color: var(--sf-gold); color: var(--sf-gold-light); }

.sf-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sf-dot--green { background: #10b981; box-shadow: 0 0 8px #10b981; }
.sf-dot--gold { background: var(--sf-gold); box-shadow: 0 0 8px var(--sf-gold); }

/* 1. Radar Scope */
.sf-radar-scope {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(226,168,62,.3);
  position: relative;
  box-shadow: inset 0 0 20px rgba(226,168,62,.1);
}
.sf-radar-grid {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(226,168,62,.25);
}
.sf-radar-sweep {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(226,168,62,.35) 360deg);
  animation: sfRadarSweep 4s linear infinite;
}
.sf-radar-blip {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sf-gold);
  box-shadow: 0 0 6px var(--sf-gold);
  animation: sfPulse 2s ease infinite;
}
.sf-radar-blip--1 { top: 24px; left: 30px; }
.sf-radar-blip--2 { bottom: 20px; right: 28px; animation-delay: .7s; }
.sf-radar-blip--3 { top: 40px; right: 22px; animation-delay: 1.3s; }

/* 2. Blueprint Funnel */
.sf-blueprint-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sf-funnel-tier {
  padding: 4px 14px;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #cbd5e2;
  text-align: center;
}
.sf-funnel-tier--top { width: 140px; border-color: rgba(69,96,127,.6); }
.sf-funnel-tier--mid { width: 105px; border-color: rgba(226,168,62,.5); color: var(--sf-gold-light); }
.sf-funnel-tier--bot { width: 75px; background: var(--sf-gold); color: var(--sf-navy); border-color: var(--sf-gold); }
.sf-funnel-stream { font-size: .75rem; color: var(--sf-gold); line-height: 1; animation: sfBounce 1.5s infinite; }

/* 3. Meta Ad Mockup */
.sf-meta-mock {
  width: 170px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(14,27,51,.9);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.sf-meta-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sf-meta-avatar { width: 14px; height: 14px; border-radius: 50%; background: #1877f2; }
.sf-meta-user { font-size: .6rem; color: #cbd5e2; }
.sf-meta-user em { color: var(--sf-gold); font-style: normal; }
.sf-meta-card-body { height: 38px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.sf-meta-stat-pill { font-size: .62rem; font-weight: 700; color: #10b981; }
.sf-meta-metrics-row { display: flex; justify-content: space-between; margin-top: 6px; font-size: .65rem; color: #94a3b8; }
.sf-meta-metrics-row strong { color: #fff; }

/* 4. Carousel Deck */
.sf-carousel-deck { position: relative; width: 150px; height: 80px; }
.sf-carousel-card {
  position: absolute;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
}
.sf-carousel-card--3 { inset: 12px 0 0 20px; background: rgba(69,96,127,.4); }
.sf-carousel-card--2 { inset: 6px 0 6px 10px; background: rgba(22,43,79,.7); border-color: rgba(226,168,62,.3); }
.sf-carousel-card--1 {
  inset: 0 10px 12px 0;
  background: #0e1b33;
  border-color: var(--sf-gold);
  padding: 8px 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
}
.sf-hook-tag { font-size: .55rem; font-weight: 800; color: var(--sf-gold); letter-spacing: .08em; display: block; }
.sf-carousel-card--1 p { font-size: .65rem; color: #fff; margin: 2px 0 4px; line-height: 1.2; font-weight: 600; }
.sf-swipe-indicator { font-size: .55rem; color: #94a3b8; float: right; }

/* 5. Video Phone Mockup */
.sf-phone-mock {
  width: 90px;
  height: 110px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.2);
  background: #091428;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.sf-phone-notch { width: 30px; height: 4px; border-radius: 0 0 4px 4px; background: #162b4f; margin: 0 auto; }
.sf-video-overlay { padding: 8px 6px; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 4px); }
.sf-play-badge { font-size: .6rem; font-weight: 800; color: var(--sf-gold); }
.sf-retention-wave { display: flex; align-items: flex-end; gap: 3px; height: 24px; justify-content: center; }
.sf-retention-wave span { width: 3px; border-radius: 2px; background: var(--sf-gold); animation: sfWave 1.2s ease infinite alternate; }
.sf-retention-wave span:nth-child(1){ height: 8px; }
.sf-retention-wave span:nth-child(2){ height: 18px; animation-delay: .2s; }
.sf-retention-wave span:nth-child(3){ height: 22px; animation-delay: .4s; }
.sf-retention-wave span:nth-child(4){ height: 14px; animation-delay: .1s; }
.sf-retention-wave span:nth-child(5){ height: 20px; animation-delay: .3s; }
.sf-retention-wave span:nth-child(6){ height: 10px; animation-delay: .5s; }
.sf-caption-preview { font-size: .55rem; color: #fff; background: rgba(0,0,0,.6); padding: 2px; border-radius: 3px; text-align: center; }

/* 6. AI Avatar Split */
.sf-avatar-split { display: flex; align-items: center; gap: 8px; }
.sf-avatar-panel {
  width: 70px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(14,27,51,.8);
  text-align: center;
  font-size: .62rem;
  color: #cbd5e2;
}
.sf-variant-tag { font-size: .55rem; font-weight: 800; color: var(--sf-gold); display: block; margin-bottom: 4px; }
.sf-face-mesh { width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--sf-gold); margin: 0 auto 4px; }
.sf-avatar-vs { font-size: .65rem; font-weight: 800; color: var(--sf-slate); }

/* 7. Browser Mockup */
.sf-browser-mock {
  width: 170px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: #0e1b33;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.sf-browser-bar { padding: 4px 8px; background: #162b4f; display: flex; align-items: center; gap: 4px; }
.sf-b-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
.sf-browser-url { font-size: .55rem; color: #94a3b8; margin-left: 4px; }
.sf-browser-screen { padding: 8px; display: flex; align-items: center; gap: 10px; }
.sf-speed-gauge {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid #10b981;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sf-speed-gauge strong { font-size: .9rem; color: #10b981; line-height: 1; }
.sf-speed-gauge small { font-size: .45rem; color: #94a3b8; }
.sf-screen-lines { display: flex; flex-direction: column; gap: 4px; font-size: .65rem; color: #fff; }
.sf-mock-cta { padding: 3px 8px; border-radius: 4px; background: var(--sf-gold); color: var(--sf-navy); font-size: .55rem; font-weight: 800; text-align: center; }

/* 8. Circuit Flow */
.sf-circuit-flow { display: flex; align-items: center; gap: 6px; }
.sf-circuit-node {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(14,27,51,.9);
  border: 1px solid rgba(226,168,62,.3);
  text-align: center;
}
.sf-c-icon { font-size: 1rem; display: block; }
.sf-circuit-node small { font-size: .55rem; color: #cbd5e2; display: block; margin-top: 2px; }
.sf-circuit-wire { width: 20px; height: 2px; background: rgba(226,168,62,.3); position: relative; }
.sf-wire-pulse {
  position: absolute; top: -2px; left: 0; width: 6px; height: 6px;
  border-radius: 50%; background: var(--sf-gold);
  box-shadow: 0 0 6px var(--sf-gold);
  animation: sfWireTravel 2s linear infinite;
}

/* ==========================================================================
   Interactive System Synergy Simulator (Cockpit)
   ========================================================================== */

.sf-synergy-simulator {
  margin-block: 48px;
  padding: 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, #091428 0%, #0e1b33 100%);
  border: 1px solid rgba(226,168,62,.3);
  color: #fff;
  box-shadow: 0 12px 36px rgba(9,20,40,.25);
}
.sf-synergy-header { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: 40px; }
.sf-synergy-header h3 { color: #fff; }
.sf-synergy-header .sf-lead { color: #cbd5e2; }

.sf-synergy-cockpit {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
}

.sf-synergy-toggles { display: flex; flex-direction: column; gap: 14px; }
.sf-syn-switch {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(22,43,79,.6);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: all .2s ease;
}
.sf-syn-switch:hover { border-color: rgba(226,168,62,.4); background: rgba(22,43,79,.85); }
.sf-syn-switch input { display: none; }
.sf-syn-slider {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: #334155;
  position: relative;
  flex-shrink: 0;
  transition: background .25s ease;
}
.sf-syn-slider:before {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease;
}
.sf-syn-switch input:checked + .sf-syn-slider { background: var(--sf-gold); }
.sf-syn-switch input:checked + .sf-syn-slider:before { transform: translateX(20px); background: var(--sf-navy); }
.sf-syn-label strong { display: block; font-size: .95rem; color: #fff; }
.sf-syn-label small { font-size: .8rem; color: #94a3b8; }

.sf-synergy-display {
  padding: 32px;
  border-radius: 18px;
  background: rgba(14,27,51,.9);
  border: 1px solid rgba(226,168,62,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sf-engine-core { position: relative; width: 140px; height: 140px; margin-bottom: 24px; }
.sf-engine-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(226,168,62,.3); animation: sfRotate 16s linear infinite; }
.sf-engine-ring--inner { inset: 15px; border-style: solid; border-color: rgba(226,168,62,.5); animation-direction: reverse; animation-duration: 10s; }
.sf-engine-center {
  position: absolute; inset: 25px; border-radius: 50%;
  background: radial-gradient(circle, #162b4f 0%, #091428 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--sf-gold);
  box-shadow: 0 0 25px rgba(226,168,62,.3);
}
.sf-engine-power { font-family: var(--sf-head); font-size: 1.7rem; font-weight: 800; color: var(--sf-gold); line-height: 1; }
.sf-engine-center small { font-size: .65rem; color: #cbd5e2; text-transform: uppercase; }

.sf-engine-status { margin-bottom: 20px; font-size: .9rem; color: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); }
.sf-engine-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-bottom: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.sf-eng-metric { display: flex; flex-direction: column; gap: 3px; }
.sf-eng-val { font-family: var(--sf-head); font-size: 1.35rem; font-weight: 800; color: var(--sf-gold-light); }
.sf-eng-lbl { font-size: .72rem; color: #94a3b8; line-height: 1.2; }
.sf-engine-diagnosis { font-size: .84rem; color: #cbd5e2; line-height: 1.5; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.04); }

/* Keyframe animations */
@keyframes sfRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sfRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sfBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes sfPulse { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes sfWave { from { height: 6px; } to { height: 22px; } }
@keyframes sfWireTravel { from { left: 0; } to { left: 14px; } }

@media(max-width:900px){
  .sf-synergy-cockpit { grid-template-columns: 1fr; }
}


/* ==========================================================================
   VERSION 2 SERVICES: ARCHITECTURE HERO, STAGE SHOWCASE & AGENCY MODELS
   ========================================================================== */

/* --- 1. System Architecture Hero --- */
.sf-arch-hero {
  margin: 2.5rem 0 4rem;
  position: relative;
}

.sf-arch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .sf-arch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .sf-arch-grid {
    grid-template-columns: 1fr;
  }
}

.sf-arch-card {
  background: linear-gradient(180deg, rgba(22, 43, 79, 0.7) 0%, rgba(14, 27, 51, 0.95) 100%);
  border: 1px solid rgba(226, 168, 62, 0.2);
  border-radius: 12px;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.sf-arch-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 168, 62, 0.6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(226, 168, 62, 0.15);
}

.sf-arch-num {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E2A83E;
  margin-bottom: 1rem;
  display: block;
}

.sf-arch-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(226, 168, 62, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E2A83E;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(226, 168, 62, 0.25);
}

.sf-arch-icon svg {
  width: 24px;
  height: 24px;
}

.sf-arch-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.sf-arch-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #B4C6DF;
  margin: 0 0 1.25rem;
  flex-grow: 1;
}

.sf-arch-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sf-arch-pills span {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #D6E4F5;
}

.sf-arch-connector-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 1rem;
}

.sf-arch-con-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 168, 62, 0.4), rgba(226, 168, 62, 0.6));
}

.sf-arch-connector-bar .sf-arch-con-line:last-child {
  background: linear-gradient(90deg, rgba(226, 168, 62, 0.6), rgba(226, 168, 62, 0.4), transparent);
}

.sf-arch-hub {
  background: #0B1528;
  border: 1px solid rgba(226, 168, 62, 0.6);
  padding: 0.85rem 1.75rem;
  border-radius: 40px;
  box-shadow: 0 0 25px rgba(226, 168, 62, 0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.sf-hub-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E2A83E;
  box-shadow: 0 0 10px #E2A83E;
  animation: sf-pulse-hub 2s infinite ease-in-out;
}

@keyframes sf-pulse-hub {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px #E2A83E; }
}

.sf-arch-hub strong {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.sf-arch-hub small {
  display: block;
  font-size: 0.75rem;
  color: #E2A83E;
  font-weight: 500;
}

@media (max-width: 768px) {
  .sf-arch-hub {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem;
  }
}

/* --- 2. Interactive Capability Stage (Showcase V2) --- */
.sf-v2-showcase {
  margin: 4rem 0;
}

.sf-v2-nav-wrap {
  margin-bottom: 2rem;
  position: relative;
}

.sf-v2-nav {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 168, 62, 0.4) transparent;
}

.sf-v2-nav::-webkit-scrollbar {
  height: 4px;
}

.sf-v2-nav::-webkit-scrollbar-thumb {
  background: rgba(226, 168, 62, 0.4);
  border-radius: 2px;
}

.sf-v2-tab {
  background: rgba(22, 43, 79, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #B4C6DF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.sf-v2-tab:hover {
  background: rgba(22, 43, 79, 0.8);
  border-color: rgba(226, 168, 62, 0.4);
  color: #FFFFFF;
}

.sf-v2-tab.is-active {
  background: linear-gradient(135deg, rgba(226, 168, 62, 0.18) 0%, rgba(22, 43, 79, 0.9) 100%);
  border-color: #E2A83E;
  color: #FFFFFF;
  box-shadow: 0 4px 15px rgba(226, 168, 62, 0.2);
}

.sf-v2-tab-num {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #E2A83E;
}

.sf-v2-tab.is-active .sf-v2-tab-num {
  background: #E2A83E;
  color: #0E1B33;
}

.sf-v2-tab-title {
  letter-spacing: 0.02em;
}

/* Panels */
.sf-v2-panel {
  display: none;
  animation: sf-v2-fade 0.35s ease forwards;
}

.sf-v2-panel.is-active {
  display: block;
}

@keyframes sf-v2-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sf-v2-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  background: linear-gradient(180deg, #132238 0%, #0B1528 100%);
  border: 1px solid rgba(226, 168, 62, 0.3);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 960px) {
  .sf-v2-stage {
    grid-template-columns: 1fr;
    padding: 1.75rem;
    gap: 2rem;
  }
}

/* Left Visual Column */
.sf-v2-visual {
  position: relative;
}

.sf-v2-mockup-frame {
  background: #08101C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.sf-v2-mockup-topbar {
  background: #0F1D33;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-v2-dots {
  display: flex;
  gap: 6px;
}

.sf-v2-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3A4A62;
}

.sf-v2-dots span:nth-child(1) { background: #FF5F56; }
.sf-v2-dots span:nth-child(2) { background: #FFBD2E; }
.sf-v2-dots span:nth-child(3) { background: #27C93F; }

.sf-v2-url-bar {
  font-family: monospace;
  font-size: 0.75rem;
  color: #7E95B6;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  flex: 1;
}

.sf-v2-mockup-body {
  padding: 1.5rem;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visual Mockup Internal Components */
.sf-screen-radar {
  width: 100%;
}

.sf-radar-display {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px dashed rgba(226, 168, 62, 0.4);
  position: relative;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-radar-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(226, 168, 62, 0.3) 0deg, transparent 60deg);
  animation: sf-radar-spin 4s linear infinite;
}

@keyframes sf-radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sf-radar-ping {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E2A83E;
  box-shadow: 0 0 10px #E2A83E;
}

.sf-ping-1 { top: 25%; left: 30%; }
.sf-ping-2 { top: 65%; left: 70%; }
.sf-ping-3 { top: 40%; left: 75%; }

.sf-radar-crosshair {
  width: 80%;
  height: 80%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.sf-radar-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.sf-radar-meta-item {
  background: rgba(22, 43, 79, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.6rem;
  border-radius: 6px;
  text-align: center;
}

.sf-radar-meta-item small {
  display: block;
  font-size: 0.7rem;
  color: #8CA0B8;
  margin-bottom: 0.25rem;
}

.sf-radar-meta-item strong {
  font-size: 0.85rem;
  color: #FFFFFF;
}

/* Studio Reels Mockup */
.sf-screen-studio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.sf-reel-card {
  background: #111C2E;
  border: 1px solid rgba(226, 168, 62, 0.25);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

.sf-reel-thumb {
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.sf-reel-1 { background: linear-gradient(135deg, #1d3557, #457b9d); }
.sf-reel-2 { background: linear-gradient(135deg, #2b2d42, #8d99ae); }
.sf-reel-3 { background: linear-gradient(135deg, #0f2027, #203a43); }

.sf-reel-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.65);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  color: #E2A83E;
  font-weight: 700;
}

.sf-reel-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(226, 168, 62, 0.9);
  color: #0E1B33;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.sf-reel-stat {
  padding: 0.5rem;
  font-size: 0.72rem;
  color: #9DB3CE;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-reel-stat strong {
  color: #27C93F;
}

/* Ads Campaign Control Mockup */
.sf-screen-ads {
  width: 100%;
}

.sf-ads-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-ads-header span {
  font-size: 0.8rem;
  color: #8FA4BF;
}

.sf-ads-header strong {
  color: #27C93F;
  font-size: 0.85rem;
}

.sf-ads-table {
  width: 100%;
  border-collapse: collapse;
}

.sf-ads-table th {
  text-align: left;
  font-size: 0.72rem;
  color: #8FA4BF;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
}

.sf-ads-table td {
  padding: 0.6rem;
  font-size: 0.78rem;
  color: #D6E4F5;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sf-ads-table td:last-child {
  font-weight: 700;
  color: #27C93F;
}

.sf-status-on {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27C93F;
  box-shadow: 0 0 6px #27C93F;
  margin-right: 6px;
}

/* Landing Page Mockup */
.sf-screen-lander {
  width: 100%;
  background: #0E1B33;
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid rgba(226, 168, 62, 0.2);
}

.sf-lander-speed-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(39, 201, 63, 0.15);
  border: 1px solid rgba(39, 201, 63, 0.4);
  color: #27C93F;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.sf-lander-wireframe {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sf-wire-line-large {
  height: 16px;
  width: 75%;
  background: rgba(226, 168, 62, 0.6);
  border-radius: 4px;
}

.sf-wire-line-sub {
  height: 10px;
  width: 50%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sf-wire-btn {
  height: 32px;
  width: 140px;
  background: #E2A83E;
  border-radius: 6px;
  margin-top: 0.5rem;
}

/* CRM Flow Mockup */
.sf-screen-crm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.sf-crm-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(22, 43, 79, 0.6);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border-left: 3px solid #E2A83E;
}

.sf-crm-time {
  font-size: 0.72rem;
  font-weight: 800;
  color: #E2A83E;
  white-space: nowrap;
}

.sf-crm-desc {
  font-size: 0.8rem;
  color: #FFFFFF;
}

/* Generic Screen Info */
.sf-screen-generic {
  width: 100%;
  text-align: center;
  padding: 1rem;
}

.sf-screen-generic-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  color: #E2A83E;
}

.sf-screen-generic-icon svg {
  width: 100%;
  height: 100%;
}

.sf-screen-generic strong {
  display: block;
  color: #FFFFFF;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.sf-screen-generic p {
  color: #8FA4BF;
  font-size: 0.85rem;
  margin: 0;
}

/* Right Info Column */
.sf-v2-info {
  display: flex;
  flex-direction: column;
}

.sf-v2-tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E2A83E;
  margin-bottom: 0.75rem;
}

.sf-v2-info h3 {
  font-size: 1.85rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
  line-height: 1.25;
}

.sf-v2-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #C1D4EB;
  margin: 0 0 1.5rem;
}

.sf-v2-risk {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.sf-v2-risk strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #FF6B6B;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.sf-v2-risk p {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #F8D7DA;
  margin: 0;
}

.sf-v2-deliverables {
  margin-bottom: 1.5rem;
}

.sf-v2-deliverables h4 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #8FA4BF;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.sf-v2-deliv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (max-width: 600px) {
  .sf-v2-deliv-grid {
    grid-template-columns: 1fr;
  }
}

.sf-v2-deliv-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #D6E4F5;
}

.sf-v2-deliv-item span {
  color: #E2A83E;
  font-weight: 800;
}

.sf-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sf-v2-metric {
  font-size: 0.82rem;
  color: #8FA4BF;
}

.sf-v2-metric strong {
  display: block;
  font-size: 1rem;
  color: #E2A83E;
}

.sf-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #E2A83E;
  color: #0E1B33 !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-v2-cta:hover {
  background: #F0BC5E;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(226, 168, 62, 0.35);
}

/* --- 3. Agency Models Comparison Matrix --- */
.sf-models-comparison {
  margin: 5rem 0 3rem;
}

.sf-models-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}

.sf-models-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E2A83E;
  background: rgba(226, 168, 62, 0.12);
  border: 1px solid rgba(226, 168, 62, 0.3);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}

.sf-models-header h2 {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.sf-models-header p {
  font-size: 1.05rem;
  color: #B4C6DF;
  line-height: 1.6;
  margin: 0;
}

.sf-models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .sf-models-grid {
    grid-template-columns: 1fr;
  }
}

.sf-model-card {
  background: #111C2E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease;
}

.sf-model-card:hover {
  transform: translateY(-4px);
}

.sf-model-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8FA4BF;
  margin-bottom: 0.75rem;
}

.sf-model-badge--gold {
  color: #0E1B33;
  background: #E2A83E;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  font-weight: 800;
}

.sf-model-card h3 {
  font-size: 1.4rem;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
}

.sf-model-tagline {
  font-size: 0.85rem;
  color: #8FA4BF;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  min-height: 40px;
}

.sf-model-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}

.sf-model-list li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #D6E4F5;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.sf-cross {
  color: #FF5F56;
  font-weight: 800;
  font-size: 0.9rem;
}

.sf-check {
  color: #27C93F;
  font-weight: 800;
  font-size: 0.9rem;
}

.sf-model-cost {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-model-cost span {
  display: block;
  font-size: 0.75rem;
  color: #8FA4BF;
  margin-bottom: 0.25rem;
}

.sf-model-cost strong {
  font-size: 1rem;
  color: #FFFFFF;
}

.sf-model-card--scaleframe {
  background: linear-gradient(180deg, #162B4F 0%, #0E1B33 100%);
  border: 2px solid #E2A83E;
  box-shadow: 0 15px 40px rgba(226, 168, 62, 0.2);
  transform: scale(1.02);
}

.sf-model-card--scaleframe:hover {
  transform: scale(1.04);
}

.sf-model-cost--gold strong {
  color: #E2A83E;
}


/* ==========================================================================
   V2 SHOWCASE EXACT SELECTORS STYLING
   ========================================================================== */

.sf-v2-showcase {
  margin: 3.5rem 0 5rem;
}

.sf-v2-tabs-nav {
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 168, 62, 0.4) transparent;
}

.sf-v2-tabs-container {
  display: flex;
  gap: 0.75rem;
  min-width: max-content;
}

.sf-v2-tab {
  background: rgba(22, 43, 79, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  color: #B4C6DF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.25s ease;
  outline: none;
}

.sf-v2-tab:hover {
  background: rgba(22, 43, 79, 0.85);
  border-color: rgba(226, 168, 62, 0.4);
  color: #FFFFFF;
}

.sf-v2-tab.is-active {
  background: linear-gradient(135deg, rgba(226, 168, 62, 0.2) 0%, rgba(22, 43, 79, 0.95) 100%);
  border-color: #E2A83E;
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(226, 168, 62, 0.25);
}

.sf-v2-tab-num {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #E2A83E;
}

.sf-v2-tab.is-active .sf-v2-tab-num {
  background: #E2A83E;
  color: #0E1B33;
}

/* Panels */
.sf-v2-panel {
  display: none;
}

.sf-v2-panel.is-active {
  display: block;
  animation: sf-v2-appear 0.35s ease forwards;
}

@keyframes sf-v2-appear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sf-v2-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  background: linear-gradient(180deg, #132238 0%, #0B1528 100%);
  border: 1px solid rgba(226, 168, 62, 0.3);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 960px) {
  .sf-v2-grid {
    grid-template-columns: 1fr;
    padding: 1.75rem;
    gap: 2rem;
  }
}

/* Screen Mockup Frame */
.sf-v2-screen {
  background: #08101C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.sf-v2-screen-top {
  background: #0F1D33;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-screen-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sf-dot--red { background: #FF5F56; }
.sf-dot--gold { background: #FFBD2E; }
.sf-dot--green { background: #27C93F; }

.sf-screen-title {
  font-family: monospace;
  font-size: 0.72rem;
  color: #7E95B6;
  margin-left: 0.5rem;
}

.sf-v2-screen-body {
  padding: 1.5rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sf-v2-live-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.sf-hud-stat small {
  display: block;
  font-size: 0.7rem;
  color: #8CA0B8;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sf-hud-stat strong {
  font-size: 0.92rem;
  color: #E2A83E;
}

.sf-hud-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #27C93F;
  font-weight: 600;
}

/* Info Column */
.sf-v2-info-col h2 {
  font-size: 1.85rem;
  color: #FFFFFF;
  margin: 0.5rem 0 1rem;
  line-height: 1.25;
}

.sf-v2-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #C1D4EB;
  margin: 0 0 1.5rem;
}

.sf-v2-risk-card {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.sf-risk-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sf-risk-icon {
  width: 18px;
  height: 18px;
  color: #FF6B6B;
  display: flex;
  align-items: center;
}

.sf-risk-icon svg {
  width: 18px;
  height: 18px;
}

.sf-risk-header strong {
  font-size: 0.75rem;
  font-weight: 800;
  color: #FF6B6B;
  letter-spacing: 0.06em;
}

.sf-v2-risk-card p {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #F8D7DA;
  margin: 0;
}

.sf-v2-deliverables-block h4 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #8FA4BF;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.sf-v2-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (max-width: 600px) {
  .sf-v2-checklist {
    grid-template-columns: 1fr;
  }
}

.sf-v2-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #D6E4F5;
}

.sf-v2-check-bullet {
  width: 16px;
  height: 16px;
  color: #E2A83E;
  flex-shrink: 0;
  display: inline-flex;
}

.sf-v2-check-bullet svg {
  width: 16px;
  height: 16px;
}

.sf-v2-action-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.sf-v2-action-row .sf-button {
  background: #E2A83E;
  color: #0E1B33 !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sf-v2-action-row .sf-button:hover {
  background: #F0BC5E;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(226, 168, 62, 0.35);
}

.sf-v2-action-row .sf-text-link {
  color: #8FA4BF;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sf-v2-action-row .sf-text-link:hover {
  color: #FFFFFF;
}


/* ==========================================================================
   INFOGRAPHIC SERVICES EXPERIENCE STYLES
   ========================================================================== */

.sf-infographic-wrap {
  margin: 1.5rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

.sf-info-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #E2A83E;
  background: rgba(226, 168, 62, 0.12);
  border: 1px solid rgba(226, 168, 62, 0.3);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.sf-info-sub {
  font-size: 1.05rem;
  color: #B4C6DF;
  line-height: 1.6;
  max-width: 680px;
  margin: 0.5rem auto 0;
}

/* --- 1. The 5-Node Schematic Flow --- */
.sf-info-schematic-card {
  background: linear-gradient(180deg, #132238 0%, #0B1528 100%);
  border: 1px solid rgba(226, 168, 62, 0.3);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.sf-info-schematic-header {
  margin-bottom: 3rem;
}

.sf-info-schematic-header h2 {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
}

.sf-info-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.sf-flow-node {
  background: #0E1B33;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  min-width: 155px;
  flex: 1;
  text-align: center;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.sf-flow-node:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 168, 62, 0.5);
}

.sf-node-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(226, 168, 62, 0.12);
  border: 1px solid rgba(226, 168, 62, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  position: relative;
  color: #E2A83E;
}

.sf-node-num {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #E2A83E;
  color: #0E1B33;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.35rem;
  border-radius: 10px;
}

.sf-node-icon svg {
  width: 20px;
  height: 20px;
}

.sf-node-body h4 {
  font-size: 0.92rem;
  color: #FFFFFF;
  margin: 0 0 0.4rem;
  white-space: nowrap;
}

.sf-node-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(39, 201, 63, 0.15);
  border: 1px solid rgba(39, 201, 63, 0.3);
  color: #27C93F;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  margin-bottom: 0.6rem;
}

.sf-node-tag--gold {
  background: rgba(226, 168, 62, 0.2);
  border-color: #E2A83E;
  color: #E2A83E;
}

.sf-node-specs {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: #8FA4BF;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.5rem;
}

.sf-flow-conduit {
  flex-shrink: 0;
  width: 30px;
  height: 3px;
  background: rgba(226, 168, 62, 0.3);
  position: relative;
  overflow: hidden;
}

.sf-flow-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: #E2A83E;
  box-shadow: 0 0 8px #E2A83E;
  animation: sf-pulse-line 1.5s infinite linear;
}

@keyframes sf-pulse-line {
  0% { transform: translateX(-10px); }
  100% { transform: translateX(35px); }
}

.sf-flow-node--result {
  background: linear-gradient(135deg, rgba(226, 168, 62, 0.15) 0%, #111E36 100%);
  border: 2px solid #E2A83E;
  box-shadow: 0 0 25px rgba(226, 168, 62, 0.25);
}

.sf-node-circle--gold {
  background: #E2A83E;
  color: #0E1B33;
  border-color: #F0BC5E;
}

.sf-node-circle--gold .sf-node-icon {
  color: #0E1B33;
}

/* --- 2. Visual Comparison Section --- */
.sf-info-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 860px) {
  .sf-info-vs-grid {
    grid-template-columns: 1fr;
  }
}

.sf-info-vs-card {
  border-radius: 14px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sf-info-vs-card--broken {
  background: linear-gradient(180deg, #1C1318 0%, #120B0E 100%);
  border: 1px solid rgba(220, 53, 69, 0.35);
}

.sf-info-vs-card--engine {
  background: linear-gradient(180deg, #132238 0%, #0E1B33 100%);
  border: 2px solid #E2A83E;
  box-shadow: 0 15px 40px rgba(226, 168, 62, 0.18);
}

.sf-vs-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 0.75rem;
}

.sf-vs-badge--danger {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #FF6B6B;
}

.sf-vs-badge--gold {
  background: #E2A83E;
  color: #0E1B33;
}

.sf-info-vs-card h3 {
  font-size: 1.6rem;
  color: #FFFFFF;
  margin: 0 0 1.25rem;
}

.sf-vs-metric-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.sf-vs-metric--danger {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.sf-vs-metric--gold {
  background: rgba(226, 168, 62, 0.15);
  border: 1px solid rgba(226, 168, 62, 0.35);
}

.sf-vs-num {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.sf-vs-metric--danger .sf-vs-num { color: #FF6B6B; }
.sf-vs-metric--gold .sf-vs-num { color: #E2A83E; }

.sf-vs-label {
  font-size: 0.85rem;
  color: #FFFFFF;
  line-height: 1.35;
  font-weight: 600;
}

.sf-vs-infographic-graphic {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sf-broken-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sf-b-node {
  background: rgba(220, 53, 69, 0.18);
  border: 1px solid rgba(220, 53, 69, 0.35);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  color: #FFADAD;
}

.sf-b-cross {
  color: #FF5F56;
  font-weight: 800;
  font-size: 0.75rem;
}

.sf-connected-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sf-c-pipe-bar {
  height: 6px;
  background: linear-gradient(90deg, #E2A83E, #27C93F);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(39, 201, 63, 0.5);
}

.sf-c-nodes {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: #E2A83E;
}

.sf-vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sf-vs-list li {
  font-size: 0.88rem;
  color: #C5D6EA;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* --- 3. Bento Infographic Grid --- */
.sf-info-bento-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.sf-info-bento-header h2 {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0;
}

.sf-info-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1100px) {
  .sf-info-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sf-info-bento-grid {
    grid-template-columns: 1fr;
  }
}

.sf-bento-card {
  background: #0E1B33;
  border: 1px solid rgba(226, 168, 62, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sf-bento-card:hover {
  transform: translateY(-4px);
  border-color: #E2A83E;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.sf-bento-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sf-bento-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: #E2A83E;
}

.sf-bento-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(226, 168, 62, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E2A83E;
}

.sf-bento-icon svg {
  width: 18px;
  height: 18px;
}

.sf-bento-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #8FA4BF;
}

.sf-bento-card h4 {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
  line-height: 1.3;
}

.sf-bento-gauge {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sf-gauge-dial {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #E2A83E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(226, 168, 62, 0.1);
}

.sf-dial-core {
  font-size: 0.78rem;
  font-weight: 800;
  color: #FFFFFF;
}

.sf-gauge-meta strong {
  display: block;
  font-size: 0.8rem;
  color: #FFFFFF;
  line-height: 1.2;
}

.sf-gauge-meta small {
  display: block;
  font-size: 0.68rem;
  color: #8FA4BF;
  line-height: 1.3;
}

.sf-bento-chips {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.sf-bento-chips span {
  font-size: 0.74rem;
  color: #B4C6DF;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  border-left: 2px solid #E2A83E;
}

.sf-bento-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: #E2A83E;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: transform 0.2s ease;
}

.sf-bento-link:hover {
  transform: translateX(4px);
  color: #F0BC5E;
}

/* --- 4. 1,000 Clicks Waterfall --- */
.sf-info-waterfall-card {
  background: linear-gradient(180deg, #132238 0%, #0B1528 100%);
  border: 1px solid rgba(226, 168, 62, 0.3);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.sf-waterfall-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.sf-waterfall-header h2 {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0;
}

.sf-waterfall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 860px) {
  .sf-waterfall-grid {
    grid-template-columns: 1fr;
  }
}

.sf-wf-col {
  background: #0E1B33;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.sf-wf-col--bad {
  border: 1px solid rgba(220, 53, 69, 0.35);
}

.sf-wf-col--good {
  border: 2px solid #E2A83E;
  background: linear-gradient(180deg, #14243E 0%, #0E1B33 100%);
}

.sf-wf-col-title {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sf-wf-bars {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.sf-wf-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sf-wf-bar-wrap {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 2px;
}

.sf-wf-bar {
  height: 100%;
  background: #2D4263;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}

.sf-wf-bar--sub { background: #405B82; }
.sf-wf-bar--bad { background: #8B2635; color: #FFA8B5; }
.sf-wf-bar--danger { background: #D90429; color: #FFFFFF; font-weight: 800; }

.sf-wf-bar--gold { background: #B3822B; color: #FFFFFF; }
.sf-wf-bar--green { background: #1B7A3E; color: #E8F5E9; }
.sf-wf-bar--gold-bright { background: #E2A83E; color: #0E1B33; font-weight: 800; }

.sf-wf-stat {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8FA4BF;
  width: 65px;
  text-align: right;
}

.sf-wf-stat--danger { color: #FF6B6B; }
.sf-wf-stat--gold { color: #E2A83E; font-size: 0.95rem; }

.sf-wf-bottom-tag {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.sf-wf-bottom--bad {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #F8D7DA;
}

.sf-wf-bottom--good {
  background: rgba(226, 168, 62, 0.12);
  border: 1px solid rgba(226, 168, 62, 0.3);
  color: #F0E6D2;
}

/* --- 5. 30-Day Gantt Timeline --- */
.sf-info-gantt-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.sf-info-gantt-header h2 {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0;
}

.sf-gantt-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .sf-gantt-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .sf-gantt-timeline {
    grid-template-columns: 1fr;
  }
}

.sf-gantt-item {
  display: flex;
  flex-direction: column;
}

.sf-gantt-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #E2A83E;
  margin-bottom: 0.5rem;
}

.sf-gantt-box {
  background: #0E1B33;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sf-gantt-box--gold {
  border: 2px solid #E2A83E;
  background: linear-gradient(180deg, #152744 0%, #0E1B33 100%);
  box-shadow: 0 10px 25px rgba(226, 168, 62, 0.15);
}

.sf-gantt-icon {
  width: 32px;
  height: 32px;
  color: #E2A83E;
  margin-bottom: 0.75rem;
}

.sf-gantt-icon svg {
  width: 24px;
  height: 24px;
}

.sf-gantt-box h4 {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
}

.sf-gantt-box p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #8FA4BF;
  margin: 0 0 1rem;
  flex-grow: 1;
}

.sf-gantt-client-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: #D6E4F5;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  display: inline-block;
}

.sf-gantt-client--gold {
  background: #E2A83E;
  color: #0E1B33;
}

/* --- 6. Infographic CTA Card --- */
.sf-info-cta-card {
  background: linear-gradient(180deg, #162B4F 0%, #0E1B33 100%);
  border: 2px solid #E2A83E;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px rgba(226, 168, 62, 0.2);
}

.sf-cta-step-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 1rem;
}

@media (max-width: 768px) {
  .sf-cta-step-flow {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }
  .sf-cstep-arrow {
    display: none;
  }
}

.sf-cstep {
  display: flex;
  flex-direction: column;
}

.sf-cstep-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E2A83E;
  margin-bottom: 0.25rem;
}

.sf-cstep strong {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}

.sf-cstep small {
  font-size: 0.78rem;
  color: #8FA4BF;
}

.sf-cstep-arrow {
  color: #E2A83E;
  font-size: 1.5rem;
  font-weight: 800;
}

.sf-info-cta-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

@media (max-width: 860px) {
  .sf-info-cta-action {
    flex-direction: column;
    text-align: center;
  }
}

.sf-cta-copy h3 {
  font-size: 1.45rem;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
}

.sf-cta-copy p {
  font-size: 0.9rem;
  color: #B4C6DF;
  margin: 0;
}

.sf-cta-btns {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  .sf-cta-btns {
    flex-direction: column;
    width: 100%;
  }
}

/* --- Extracted Preview CSS Rules --- */
html, body { overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; } @media (max-width: 720px) { .sf-j-step-num, .sf-node-num, .sf-node-specs, .sf-node-tag, .sf-funnel-tier, .sf-journey-swipe-hint, [class*="eyebrow"], [class*="badge"] { font-size: 12px !important; } } @media (max-width: 720px) { .sf-text-link, .sf-bento-link, .sf-card a:not(.sf-button):not(.sf-btn), .sf-card-grid a:not(.sf-button):not(.sf-btn) { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; } .sf-button, .sf-btn { min-height: 48px; } } @media (max-width: 600px) { .sf-funnel-step { overflow: visible !important; background: transparent !important; } .sf-funnel-bar { min-width: 100% !important; height: auto !important; min-height: 46px; white-space: normal !important; flex-wrap: wrap; gap: 2px 10px; padding-block: 10px !important; position: relative; } .sf-funnel-label { flex: 1 1 60%; line-height: 1.3; } .sf-funnel-loss { padding-left: 0 !important; color: #fff !important; opacity: .92; } .sf-leak-select { white-space: normal; text-overflow: ellipsis; font-size: 15px; padding-right: 34px; } .sf-leak-control label { flex-wrap: wrap; gap: 4px 12px; } .sf-leak-control output { font-size: 1.05rem !important; } .sf-leak-financial { text-align: left; } .sf-leak-calc-row { flex-wrap: wrap; gap: 4px 12px; } } @media (max-width: 720px) { .sf-journey-swipe-hint { display: none !important; } .sf-journey-flow, .sf-journey { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 4px; padding-block: 8px 16px; } .sf-j-node, .sf-journey-step { flex: 1 1 auto !important; min-width: 0; width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; } .sf-j-step-num { margin: 0; } .sf-j-pill { margin: 0; } .sf-j-drawer { grid-column: 1 / -1; } .sf-j-connector, .sf-journey-arrow { justify-content: center; transform: rotate(90deg); line-height: 1; height: 20px; } } @media (max-width: 900px) { .sf-info-flow { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; overflow: visible !important; } .sf-flow-node { min-width: 0 !important; width: 100%; } .sf-node-body h4 { white-space: normal !important; } .sf-flow-conduit { width: 3px !important; height: 22px !important; margin: 0 auto; } .sf-flow-pulse { width: 100% !important; height: 8px !important; animation: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .sf-diagram { width: 100%; height: auto; display: block; border-radius: var(--sf-radius-card, 16px); } .sf-diagram-caption { margin: 12px 0 0; font-size: .85rem; color: var(--sf-slate, #45607f); } .sf-sysmap { margin: 0; background: #fff; border: 1px solid var(--sf-border, #dbe1e8); border-radius: var(--sf-radius-card, 16px); box-shadow: var(--sf-shadow); padding: clamp(18px, 3vw, 28px); font-family: var(--sf-body, Inter, Arial, sans-serif); color: var(--sf-navy, #0e1b33); } .sf-sysmap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .9rem; color: var(--sf-slate, #45607f); } .sf-sysmap-badge { background: var(--sf-navy, #0e1b33); color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: .82rem; } .sf-sysmap-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 10px; } .sf-sysmap-steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--sf-border, #dbe1e8), var(--sf-gold, #e2a83e)); } .sf-sysmap-steps li { position: relative; display: flex; align-items: center; gap: 14px; } .sf-sysmap-n { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-soft, #eef1f5); border: 1px solid var(--sf-border, #dbe1e8); font: 700 .78rem var(--sf-head, Poppins, Arial, sans-serif); color: var(--sf-navy, #0e1b33); position: relative; z-index: 1; } .sf-sysmap-t { display: flex; flex-direction: column; line-height: 1.25; } .sf-sysmap-t strong { font: 600 .98rem var(--sf-head, Poppins, Arial, sans-serif); } .sf-sysmap-t em { font-style: normal; font-size: .84rem; color: var(--sf-slate, #45607f); } .sf-sysmap-steps li.is-goal .sf-sysmap-n { background: var(--sf-gold, #e2a83e); border-color: var(--sf-gold, #e2a83e); } .sf-sysmap-loop { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--sf-paper, #f7f5f0); font-size: .85rem; font-weight: 600; color: var(--sf-navy, #0e1b33); } .sf-sysmap-loop svg { color: var(--sf-gold, #e2a83e); flex: none; } .sf-sysmap-own { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .sf-sysmap-own span { font-size: .78rem; font-weight: 600; color: var(--sf-green, #3c8562); background: rgba(60,133,98,.08); border: 1px solid rgba(60,133,98,.25); padding: 4px 10px; border-radius: 999px; } .sf-sysmap-own span::before { content: "✓ "; } .sf-handoff { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 24px; } .sf-handoff-panel { margin: 0; background: #fff; border: 1px solid var(--sf-border, #dbe1e8); border-radius: var(--sf-radius-card, 16px); padding: 16px 16px 18px; } .sf-handoff-panel--chaos { border-top: 3px solid var(--sf-red, #b94a48); } .sf-handoff-panel--system { border-top: 3px solid var(--sf-gold, #e2a83e); } .sf-handoff-panel figcaption { margin-top: 8px; font-size: .88rem; color: var(--sf-slate, #45607f); line-height: 1.45; } .sf-handoff-panel figcaption strong { display: block; font: 600 1rem var(--sf-head, Poppins, Arial, sans-serif); color: var(--sf-navy, #0e1b33); margin-bottom: 2px; } @media (max-width: 720px) { .sf-handoff { grid-template-columns: 1fr; } } .sf-report { margin: 0 0 28px; background: #fff; border: 1px solid var(--sf-border, #dbe1e8); border-radius: var(--sf-radius-card, 16px); box-shadow: var(--sf-shadow); padding: clamp(16px, 3vw, 28px); color: var(--sf-navy, #0e1b33); } .sf-report-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--sf-border, #dbe1e8); } .sf-report-top strong { font: 600 1.05rem var(--sf-head, Poppins, Arial, sans-serif); display: block; } .sf-report-top div span { font-size: .8rem; color: var(--sf-slate, #45607f); } .sf-report-tag { font-size: .78rem; font-weight: 600; background: var(--sf-soft, #eef1f5); padding: 5px 10px; border-radius: 999px; } .sf-report-flow { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .sf-report-flow li { position: relative; background: var(--sf-soft, #eef1f5); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .sf-report-flow li span { font-size: .78rem; color: var(--sf-slate, #45607f); } .sf-report-flow li b, .sf-report-kpis b { font: 600 1.15rem var(--sf-head, Poppins, Arial, sans-serif); color: #9aa8b8; } .sf-report-flow li.is-goal { background: rgba(226,168,62,.16); } .sf-report-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sf-report-kpis div { border: 1px solid var(--sf-border, #dbe1e8); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .sf-report-kpis span { font-size: .8rem; color: var(--sf-slate, #45607f); } .sf-report-log { margin-top: 16px; padding: 14px 16px; background: var(--sf-paper, #f7f5f0); border-radius: 10px; } .sf-report-log strong { font-size: .9rem; } .sf-report-log ul { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; color: var(--sf-charcoal, #1f2328); line-height: 1.5; } @media (max-width: 720px) { .sf-report-flow { grid-template-columns: 1fr 1fr; } .sf-report-flow li.is-goal { grid-column: 1 / -1; } .sf-report-kpis { grid-template-columns: 1fr; } } .sf-handoff-panel .sf-diagram { max-width: 420px; margin: 0 auto; } .sf-about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 8px; } .sf-about-facts > div { background: #fff; border: 1px solid var(--sf-border, #dbe1e8); border-radius: var(--sf-radius-card, 16px); padding: 20px; } .sf-about-facts strong { font: 600 1.02rem var(--sf-head, Poppins, Arial, sans-serif); color: var(--sf-navy, #0e1b33); } .sf-about-facts p { margin: 8px 0 0; font-size: .95rem; color: var(--sf-slate, #45607f); } @media (max-width: 860px) { .sf-about-facts { grid-template-columns: 1fr; } } .sf-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; } .sf-contact-grid > div { background: #fff; border: 1px solid var(--sf-border, #dbe1e8); border-radius: 12px; padding: 16px 18px; } .sf-contact-grid span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-slate, #45607f); margin-bottom: 4px; } .sf-contact-grid a, .sf-contact-grid p { margin: 0; font-weight: 600; color: var(--sf-navy, #0e1b33); word-break: break-word; } @media (max-width: 600px) { .sf-contact-grid { grid-template-columns: 1fr; } }@media (max-width: 600px) {
 .sf-cap-card .sf-pic-art { display: none !important; }
 .sf-cap-card { padding: 18px !important; }
 .sf-capabilities-grid { gap: 12px !important; }
 .sf-cap-tabs { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
 .sf-cap-tab { flex: none; }
 .sf-flywheel-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
 .sf-stage-pro { padding: 14px !important; }
 .sf-stage-pro h3 { font-size: 1rem !important; margin: 8px 0 4px !important; }
 .sf-stage-pro p { font-size: .84rem !important; line-height: 1.4 !important; }
 .sf-stage-arrow { display: none !important; }
 .sf-sysmap-t em { display: none; }
 .sf-sysmap-steps { gap: 6px; }
 .sf-sysmap-n { flex-basis: 34px; height: 34px; }
 .sf-sysmap-steps::before { left: 16px; }
 .sf-own-card { padding: 18px !important; }
 .sf-section { padding-block: 56px !important; }
} @media (max-width: 600px) { .sf-cap-card { min-height: 0 !important; height: auto !important; } .sf-cap-card .sf-cap-header { display: none !important; } .sf-cap-card h3 { margin-top: 0 !important; } .sf-cap-action { margin-top: 4px !important; padding-top: 0 !important; } } .sf-handoff--single { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto 20px; } .sf-guarantee { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid var(--sf-border, #dbe1e8); border-left: 4px solid var(--sf-gold, #e2a83e); border-radius: var(--sf-radius-card, 16px); padding: clamp(18px, 3vw, 28px); margin: 20px 0; box-shadow: var(--sf-shadow); } .sf-guarantee-mark { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-navy, #0e1b33); color: var(--sf-gold, #e2a83e); font: 700 1.1rem var(--sf-head, Poppins, Arial, sans-serif); } .sf-guarantee h3 { margin: 0 0 8px; } .sf-guarantee p { margin: 0 0 10px; } .sf-guarantee-small { font-size: .85rem; color: var(--sf-slate, #45607f); } @media (max-width: 600px) { .sf-guarantee { flex-direction: column; gap: 12px; } .sf-guarantee-mark { width: 60px; height: 60px; font-size: .95rem; } } .sf-contact-grid--single { grid-template-columns: minmax(0, 420px); }

/* ==========================================================================
   SCALEFRAME COMPREHENSIVE OVERHAUL STYLES
   ========================================================================== */

/* --- Case Studies Hub Styles --- */
.sf-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 3rem 0;
}

@media (max-width: 900px) {
  .sf-cases-grid {
    grid-template-columns: 1fr;
  }
}

.sf-case-card {
  background: #0E1B33;
  border: 1px solid rgba(226, 168, 62, 0.25);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sf-case-card:hover {
  transform: translateY(-4px);
  border-color: #E2A83E;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.sf-case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.sf-case-sector {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E2A83E;
  text-transform: uppercase;
}

.sf-case-badge {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(39, 201, 63, 0.15);
  border: 1px solid rgba(39, 201, 63, 0.35);
  color: #27C93F;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
}

.sf-case-card h3 {
  font-size: 1.45rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
  line-height: 1.3;
}

.sf-case-metric-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(22, 43, 79, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.sf-case-metric-item small {
  display: block;
  font-size: 0.72rem;
  color: #8FA4BF;
  margin-bottom: 0.25rem;
}

.sf-case-metric-item strong {
  font-size: 1.35rem;
  color: #E2A83E;
  font-weight: 800;
}

.sf-case-flow {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.sf-case-flow-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #C5D6EA;
}

.sf-case-flow-row strong {
  color: #FFFFFF;
  white-space: nowrap;
}

.sf-case-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.sf-case-tag-list span {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #A3B8D1;
}

.sf-case-card .sf-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Trust Stats Banner --- */
.sf-trust-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  background: linear-gradient(180deg, #132238 0%, #0B1528 100%);
  border: 1px solid rgba(226, 168, 62, 0.3);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  margin: 2.5rem 0 3.5rem;
  text-align: center;
}

@media (max-width: 860px) {
  .sf-trust-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 500px) {
  .sf-trust-stats-bar {
    grid-template-columns: 1fr;
  }
}

.sf-trust-stat strong {
  display: block;
  font-size: 1.85rem;
  color: #E2A83E;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.sf-trust-stat span {
  font-size: 0.82rem;
  color: #8FA4BF;
  line-height: 1.35;
}

/* --- Contact Page Modern Layout --- */
.sf-contact-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  margin: 3rem 0;
}

@media (max-width: 900px) {
  .sf-contact-container {
    grid-template-columns: 1fr;
  }
}

.sf-contact-info-card {
  background: #0E1B33;
  border: 1px solid rgba(226, 168, 62, 0.25);
  border-radius: 14px;
  padding: 2.5rem 2rem;
}

.sf-contact-info-card h3 {
  font-size: 1.5rem;
  color: #FFFFFF;
  margin: 0 0 1.25rem;
}

.sf-contact-channels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.sf-channel-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(22, 43, 79, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.sf-channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(226, 168, 62, 0.15);
  color: #E2A83E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-channel-body strong {
  display: block;
  font-size: 0.88rem;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}

.sf-channel-body a, .sf-channel-body p {
  font-size: 0.95rem;
  color: #E2A83E;
  text-decoration: none;
  margin: 0;
}

.sf-channel-body small {
  display: block;
  font-size: 0.75rem;
  color: #8FA4BF;
  margin-top: 0.25rem;
}

/* --- Insights Article Cards --- */
.sf-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 3rem 0;
}

@media (max-width: 860px) {
  .sf-insights-grid {
    grid-template-columns: 1fr;
  }
}

.sf-insight-card {
  background: #0E1B33;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.sf-insight-card:hover {
  transform: translateY(-4px);
  border-color: #E2A83E;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.sf-insight-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sf-insight-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #E2A83E;
  background: rgba(226, 168, 62, 0.12);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.sf-insight-readtime {
  font-size: 0.75rem;
  color: #8FA4BF;
}

.sf-insight-card h3 {
  font-size: 1.4rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
  line-height: 1.35;
}

.sf-insight-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #B4C6DF;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}

.sf-insight-takeaways {
  background: rgba(22, 43, 79, 0.5);
  border-left: 3px solid #E2A83E;
  padding: 0.85rem 1rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: #D6E4F5;
}

.sf-insight-takeaways strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #E2A83E;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

/* --- Service Deep-Dive Template Blocks --- */
.sf-service-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(226, 168, 62, 0.15);
  border: 1px solid rgba(226, 168, 62, 0.35);
  color: #E2A83E;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.sf-deliv-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 3rem;
}

@media (max-width: 900px) {
  .sf-deliv-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sf-deliv-cards-grid {
    grid-template-columns: 1fr;
  }
}

.sf-deliv-card {
  background: #0E1B33;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.sf-deliv-card-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: #E2A83E;
  margin-bottom: 0.5rem;
}

.sf-deliv-card h4 {
  font-size: 1.1rem;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
}

.sf-deliv-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #A3B8D1;
  margin: 0;
}

/* --- Vertical Audience Teardown Cards --- */
.sf-audience-teardown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2.5rem 0;
}

@media (max-width: 860px) {
  .sf-audience-teardown {
    grid-template-columns: 1fr;
  }
}

.sf-audience-trap-box {
  background: linear-gradient(180deg, #1C1318 0%, #120B0E 100%);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 12px;
  padding: 2rem;
}

.sf-audience-trap-box h3 {
  font-size: 1.3rem;
  color: #FF6B6B;
  margin: 0 0 1rem;
}

.sf-audience-engine-box {
  background: linear-gradient(180deg, #132238 0%, #0E1B33 100%);
  border: 2px solid #E2A83E;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(226, 168, 62, 0.15);
}

.sf-audience-engine-box h3 {
  font-size: 1.3rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
}

.sf-check-list-modern {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sf-check-list-modern li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #C5D6EA;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}