/* ═══════════════════════════════════════════════════════ Business Raisers — common.css Generated from all page inline styles Fonts loaded in main.php ═══════════════════════════════════════════════════════ */ /* ═══ INDEX ═══ */ /* ═══════════════════════════════════════ DESIGN SYSTEM — ENTERPRISE PROFESSIONAL Font: IBM Plex Sans (same as IBM, many Fortune 500) Accent: Instrument Serif for display headings ═══════════════════════════════════════ */ :root { --brand: #D4202E; --brand-dark: #B01C29; --brand-light: #FDF2F3; --brand-mid: #F9D4D6; --blue: #0052CC; --blue-lt: #E8F0FE; --teal: #0097A7; --teal-lt: #E0F7FA; --amber: #E65100; --amber-lt: #FFF3E0; --green: #1B7F4F; --green-lt: #E8F5EE; --ink: #111827; --ink-80: #374151; --ink-50: #6B7280; --ink-20: #D1D5DB; --ink-08: #F3F4F6; --white: #FFFFFF; --border: #E5E7EB; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 12px 40px rgba(0,0,0,.1); --max: 1200px; --pad: 5%; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased} /* ═══ UTILITY ═══ */ .container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* ═══ TOP BAR ═══ */ .topbar{background:var(--ink);padding:8px var(--pad);display:flex;justify-content:space-between;align-items:center} .topbar-inner{max-width:var(--max);margin:0 auto;width:100%;display:flex;justify-content:space-between;align-items:center} .topbar a{font-size:13px;color:rgba(255,255,255,.65);font-family:var(--font-sans);transition:color .15s;display:flex;align-items:center;gap:6px} .topbar a:hover{color:white} .topbar-right{display:flex;gap:24px;align-items:center} /* ═══ NAV ═══ */ header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .logo-sq{width:38px;height:38px;background:var(--brand);border-radius:var(--r-sm);display:grid;place-items:center;font-weight:700;color:white;font-family:var(--font-sans);font-size:17px;letter-spacing:-.5px} .logo-text{display:flex;flex-direction:column;line-height:1.2} .logo-text strong{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.3px} .logo-text span{font-size:10px;color:var(--ink-50);letter-spacing:.3px;font-weight:500} nav{display:flex;align-items:center;gap:4px;list-style:none} nav a{font-size:14px;font-weight:500;color:var(--ink-80);padding:7px 14px;border-radius:var(--r-sm);transition:background .15s,color .15s;white-space:nowrap;display:block} nav a:hover{background:var(--ink-08);color:var(--ink)} nav .active > a{color:var(--brand)} /* Mega menu */ .has-mega{position:relative} .has-mega > a::after{content:' ▾';font-size:9px;opacity:.5} .mega{display:none;position:absolute;top:calc(100%+12px);left:50%;transform:translateX(-50%);background:white;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:28px;width:700px;z-index:300} .has-mega:hover .mega{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .mega-col h5{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)} .mega-col a{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:400;color:var(--ink-80);padding:6px 8px;border-radius:var(--r-sm);transition:background .12s;white-space:nowrap} .mega-col a:hover{background:var(--ink-08);color:var(--brand)} .mega-col a::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.4;flex-shrink:0} .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:5px 12px;border-radius:30px;font-size:12px;font-weight:600;white-space:nowrap} .btn-cta{background:var(--brand);color:white;padding:9px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:600;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap;display:inline-block} .btn-cta:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,32,46,.35)} /* ═══ HERO ═══ */ .hero{padding:80px var(--pad) 0;background:linear-gradient(160deg, #FAFBFF 0%, #FFF8F8 60%, #F0F4FF 100%);position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(rgba(212,32,46,.05),transparent 70%)} .hero::after{content:'';position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(rgba(0,82,204,.04),transparent 70%)} .hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-bottom:80px} /* Hero left */ .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--brand-light);border:1px solid var(--brand-mid);color:var(--brand);padding:6px 14px;border-radius:30px;font-size:12px;font-weight:600;letter-spacing:.2px;margin-bottom:24px} .hero-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} h1.hero-h1{font-family:var(--font-sans);font-size:clamp(38px,4.5vw,60px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin-bottom:20px} h1.hero-h1 .serif{font-family:var(--font-serif);font-weight:400;font-style:italic;color:var(--brand)} .hero-sub{font-size:17px;color:var(--ink-80);line-height:1.75;font-weight:300;max-width:500px;margin-bottom:32px} .hero-sub strong{font-weight:600;color:var(--ink)} .hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px} .btn-primary{background:var(--brand);color:white;padding:14px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 2px 12px rgba(212,32,46,.25)} .btn-primary:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(212,32,46,.4)} .btn-secondary{border:1.5px solid var(--border);color:var(--ink-80);padding:14px 26px;border-radius:var(--r-sm);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:all .2s;background:white} .btn-secondary:hover{border-color:var(--ink-20);color:var(--ink);background:var(--ink-08)} .hero-proof{display:flex;gap:24px;flex-wrap:wrap} .proof-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-50);font-weight:400} .proof-item::before{content:'✓';color:var(--green);font-weight:700;font-size:14px} /* Hero right — Automation Visual */ .hero-visual{position:relative} .automation-board{background:white;border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--shadow-lg);padding:28px;position:relative} .ab-header{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:20px;display:flex;align-items:center;gap:8px} .ab-header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite} .flow-step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);margin-bottom:6px;border:1px solid transparent;transition:all .2s;position:relative} .flow-step.active{background:var(--brand-light);border-color:var(--brand-mid)} .flow-step:hover{background:var(--ink-08)} .fs-icon{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:16px;flex-shrink:0} .fs-body{flex:1;min-width:0} .fs-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3} .fs-sub{font-size:11px;color:var(--ink-50);margin-top:2px} .fs-status{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;align-self:center} .status-done{background:var(--green-lt);color:var(--green)} .status-live{background:var(--brand-light);color:var(--brand)} .status-wait{background:var(--amber-lt);color:var(--amber)} .flow-line{width:2px;height:16px;background:linear-gradient(var(--border),transparent);margin:0 0 6px 30px} /* Floating cards */ .float-card{position:absolute;background:white;border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:14px 18px;border:1px solid var(--border);z-index:2} .fc-top{top:-18px;right:-18px;display:flex;align-items:center;gap:10px} .fc-num{font-family:var(--font-serif);font-size:28px;font-style:italic;color:var(--green);line-height:1} .fc-label{font-size:12px;color:var(--ink-50);line-height:1.4;font-weight:500} .fc-bot{bottom:-18px;left:-18px} .fc-bot-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-80);font-weight:500;padding:3px 0} .fc-bot-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} /* ═══ TICKER ═══ */ .ticker{background:var(--ink);overflow:hidden;padding:13px 0;border-top:3px solid var(--brand)} .ticker-wrap{display:flex;gap:0} .ticker-track{display:flex;gap:48px;animation:tickScroll 35s linear infinite;white-space:nowrap;flex-shrink:0} @keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .t-item{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45)} .t-sep{color:var(--brand);font-size:16px} /* ═══ CLIENTS ═══ */ .clients-section{padding:52px var(--pad);border-bottom:1px solid var(--border)} .clients-inner{max-width:var(--max);margin:0 auto} .clients-label{text-align:center;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:28px} .clients-row{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap} .client-name{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--ink-20);transition:color .2s;letter-spacing:-.3px} .client-name:hover{color:var(--ink-50)} /* ═══ SECTION COMMON ═══ */ section{padding:88px var(--pad)} .section-tag{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:block} h2.section-h2{font-family:var(--font-sans);font-size:clamp(28px,3.5vw,44px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:16px} h2.section-h2 .s{font-family:var(--font-serif);font-weight:400;font-style:italic;color:var(--brand)} .section-lead{font-size:17px;color:var(--ink-80);line-height:1.75;font-weight:300;max-width:600px} .section-lead strong{color:var(--ink);font-weight:600} /* ═══ PROBLEM-SOLUTION SECTION (psychological hook) ═══ */ .problem-section{background:var(--ink)} .problem-inner{max-width:var(--max);margin:0 auto} .problem-headline{font-family:var(--font-serif);font-size:clamp(28px,3.5vw,46px);font-style:italic;font-weight:400;color:white;line-height:1.2;margin-bottom:12px} .problem-sub{font-size:16px;color:rgba(255,255,255,.55);font-weight:300;max-width:520px;line-height:1.7;margin-bottom:48px} .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:52px} .pain-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:28px;transition:background .2s} .pain-card:hover{background:rgba(255,255,255,.08)} .pain-icon{font-size:28px;margin-bottom:14px;display:block} .pain-title{font-size:16px;font-weight:600;color:white;margin-bottom:8px} .pain-text{font-size:14px;color:rgba(255,255,255,.5);line-height:1.65;font-weight:300} .pain-arrow{text-align:center;margin:16px 0;color:rgba(255,255,255,.2);font-size:28px} /* ═══ AUTOMATION MODULES (the core visual section) ═══ */ .modules-section{background:var(--ink-08)} .modules-inner{max-width:var(--max);margin:0 auto} .modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px} .module-card{background:white;border-radius:var(--r-xl);border:1px solid var(--border);padding:0;overflow:hidden;transition:all .3s;cursor:default} .module-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .module-top{padding:28px;border-bottom:1px solid var(--border)} .module-icon-wrap{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;font-size:26px;margin-bottom:18px} .module-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.3px} .module-desc{font-size:14px;color:var(--ink-50);line-height:1.65;font-weight:300} .module-bottom{padding:20px 28px;background:var(--ink-08)} .module-flows{display:flex;flex-direction:column;gap:8px} .mf-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-80);font-weight:500} .mf-item::before{content:'→';color:var(--brand);font-size:11px;flex-shrink:0} .module-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;margin-top:14px} /* ═══ STATS — ANIMATED COUNTERS ═══ */ .stats-section{background:white;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .stats-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0} .stat-box{text-align:center;padding:56px 28px;border-right:1px solid var(--border);position:relative} .stat-box:last-child{border-right:none} .stat-box::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:3px;background:var(--brand);border-radius:0 0 3px 3px} .stat-num-wrap{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-bottom:10px} .stat-counter{font-family:var(--font-sans);font-size:clamp(40px,4.5vw,60px);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1} .stat-suffix{font-family:var(--font-serif);font-size:32px;font-style:italic;color:var(--brand)} .stat-label{font-size:14px;color:var(--ink-50);line-height:1.5;font-weight:400;max-width:160px;margin:0 auto} .stat-sublabel{font-size:12px;color:var(--ink-20);margin-top:6px;font-weight:500} /* ═══ HOW WE HELP — ROLE-BASED (psychological section) ═══ */ .roles-section{background:white} .roles-inner{max-width:var(--max);margin:0 auto} .roles-tabs{display:flex;gap:8px;margin-top:40px;margin-bottom:40px;flex-wrap:wrap} .role-tab{padding:10px 22px;border-radius:30px;border:1.5px solid var(--border);font-size:14px;font-weight:600;color:var(--ink-50);cursor:pointer;transition:all .2s;background:white} .role-tab.active,.role-tab:hover{background:var(--brand);color:white;border-color:var(--brand)} .role-panel{display:none} .role-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .rp-title{font-family:var(--font-sans);font-size:26px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.25;letter-spacing:-.02em} .rp-desc{font-size:15px;color:var(--ink-80);line-height:1.75;font-weight:300;margin-bottom:28px} .rp-list{list-style:none;display:flex;flex-direction:column;gap:12px} .rp-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-80);line-height:1.6} .rp-list li .check{width:22px;height:22px;border-radius:50%;background:var(--green-lt);display:grid;place-items:center;flex-shrink:0;color:var(--green);font-size:11px;font-weight:700;margin-top:1px} .rp-visual{background:var(--ink-08);border-radius:var(--r-xl);padding:32px;border:1px solid var(--border)} .rp-metric{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)} .rp-metric:last-child{border-bottom:none} .rp-metric-label{font-size:13px;color:var(--ink-80);font-weight:500} .rp-metric-val{font-size:15px;font-weight:700;color:var(--ink)} .rp-metric-change{font-size:12px;font-weight:600;padding:3px 8px;border-radius:20px} .up{background:var(--green-lt);color:var(--green)} .down{background:var(--brand-light);color:var(--brand)} /* ═══ ZOHO ECOSYSTEM ═══ */ .ecosystem-section{background:var(--ink-08)} .ecosystem-inner{max-width:var(--max);margin:0 auto} .eco-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:52px} .eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .eco-card{background:white;border-radius:var(--r-lg);padding:24px;border:1px solid var(--border);transition:all .25s;text-decoration:none;display:block} .eco-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--ink-20)} .eco-icon{font-size:26px;margin-bottom:12px} .eco-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.3px} .eco-desc{font-size:13px;color:var(--ink-50);line-height:1.55} /* ═══ TESTIMONIAL CAROUSEL ═══ */ .testi-section{background:white} .testi-inner{max-width:var(--max);margin:0 auto} .testi-carousel{margin-top:52px;position:relative;overflow:hidden} .testi-track{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)} .testi-slide{min-width:100%;padding:0 4px} .testi-grid-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .testi-card{background:var(--ink-08);border-radius:var(--r-xl);padding:32px;border:1px solid var(--border);transition:all .25s;display:flex;flex-direction:column;gap:18px} .testi-card:hover{background:white;box-shadow:var(--shadow-md)} .testi-top{display:flex;justify-content:space-between;align-items:flex-start} .testi-stars{color:#F59E0B;letter-spacing:2px;font-size:14px} .testi-tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--brand-light);color:var(--brand)} .testi-quote{font-family:var(--font-serif);font-size:16px;font-style:italic;font-weight:400;color:var(--ink-80);line-height:1.7;flex:1} .testi-quote::before{content:'\201C';font-size:40px;color:var(--brand-mid);line-height:0;vertical-align:-14px;margin-right:4px;font-family:Georgia} .testi-person{display:flex;align-items:center;gap:12px} .testi-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;color:white;flex-shrink:0;font-family:var(--font-sans)} .testi-name{font-size:14px;font-weight:700;color:var(--ink)} .testi-role{font-size:12px;color:var(--ink-50);margin-top:2px} .testi-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px} .testi-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-20);cursor:pointer;transition:all .2s} .testi-dot.active{background:var(--brand);width:24px;border-radius:4px} .testi-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:white;display:grid;place-items:center;cursor:pointer;transition:all .2s;font-size:16px;color:var(--ink-80)} .testi-arrow:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light)} /* ═══ PROCESS ═══ */ .process-section{background:var(--ink-08)} .process-inner{max-width:var(--max);margin:0 auto} .process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:52px;position:relative} .process-steps::before{content:'';position:absolute;top:30px;left:calc(10% + 20px);right:calc(10% + 20px);height:1px;background:repeating-linear-gradient(90deg,var(--ink-20) 0,var(--ink-20) 6px,transparent 6px,transparent 12px)} .ps-card{text-align:center;position:relative} .ps-num{width:60px;height:60px;border-radius:50%;margin:0 auto 18px;background:white;border:2px solid var(--border);display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--brand);position:relative;z-index:1;box-shadow:var(--shadow-sm);font-family:var(--font-sans);letter-spacing:-.5px} .ps-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px} .ps-text{font-size:13px;color:var(--ink-50);line-height:1.6;font-weight:300} /* ═══ WHY US ═══ */ .whyus-section{background:white} .whyus-inner{max-width:var(--max);margin:0 auto} .whyus-layout{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start;margin-top:52px} .whyus-sticky{position:sticky;top:88px} .whyus-big{font-family:var(--font-serif);font-size:clamp(28px,3vw,40px);font-style:italic;color:var(--ink);line-height:1.2;margin-bottom:20px} .whyus-big strong{font-style:normal;font-family:var(--font-sans);font-weight:700;color:var(--brand)} .whyus-para{font-size:15px;color:var(--ink-80);line-height:1.75;font-weight:300;margin-bottom:28px} .btn-outline{border:1.5px solid var(--ink);color:var(--ink);padding:12px 24px;border-radius:var(--r-sm);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:all .2s;background:white} .btn-outline:hover{background:var(--ink);color:white} .why-feats{display:flex;flex-direction:column;gap:2px} .why-feat{display:flex;gap:18px;align-items:flex-start;padding:24px 28px;border-radius:var(--r-lg);border:1px solid transparent;transition:all .2s;background:var(--ink-08)} .why-feat:hover{background:white;border-color:var(--border);box-shadow:var(--shadow-sm)} .wf-icon{width:48px;height:48px;border-radius:var(--r-md);flex-shrink:0;display:grid;place-items:center;font-size:22px} .wf-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.3px} .wf-text{font-size:14px;color:var(--ink-80);line-height:1.65;font-weight:300} /* ═══ INDUSTRIES ═══ */ .industries-section{background:var(--ink-08)} .industries-inner{max-width:var(--max);margin:0 auto} .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px} .ind-card{background:white;border-radius:var(--r-xl);padding:28px;border:1px solid var(--border);transition:all .25s} .ind-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)} .ind-emoji{font-size:32px;margin-bottom:16px;display:block} .ind-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.3px} .ind-text{font-size:13px;color:var(--ink-50);line-height:1.65;margin-bottom:14px;font-weight:300} .ind-tags{display:flex;flex-wrap:wrap;gap:6px} .ind-tag{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--ink-08);color:var(--ink-80)} /* ═══ BLOGS SECTION ═══ */ .blog-section{background:white} .blog-inner{max-width:var(--max);margin:0 auto} .blog-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .blog-card{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);transition:all .3s;background:white} .blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .blog-img{height:200px;overflow:hidden;flex-shrink:0} .blog-img img{width:100%;height:100%;object-fit:cover;display:block} .blog-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px} .blog-category{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand)} .blog-date{font-size:12px;color:var(--ink-50)} .blog-body{padding:22px;display:flex;flex-direction:column;flex:1} .blog-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:10px;letter-spacing:-.3px} .blog-excerpt{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300} .blog-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .blog-read{font-size:13px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:5px} .blog-mins{font-size:12px;color:var(--ink-50)} /* ═══ PARTNER BAND ═══ */ .partner-band{background:var(--blue-lt);border:1px solid rgba(0,82,204,.15);margin:0 var(--pad)} .partner-band-inner{max-width:var(--max);margin:0 auto;padding:48px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .pb-tag{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block} .pb-title{font-family:var(--font-sans);font-size:28px;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:-.025em} .pb-text{font-size:15px;color:var(--ink-80);line-height:1.7;font-weight:300} .pb-certs{display:flex;flex-direction:column;gap:12px} .pb-cert{background:white;border-radius:var(--r-md);padding:18px 22px;display:flex;align-items:center;gap:14px;border:1px solid rgba(0,82,204,.1)} .pb-cert-icon{font-size:24px} .pb-cert-title{font-size:14px;font-weight:700;color:var(--ink)} .pb-cert-sub{font-size:12px;color:var(--ink-50);margin-top:3px} /* ═══ CTA ═══ */ .cta-section{padding:100px var(--pad);background:var(--ink)} .cta-inner{max-width:760px;margin:0 auto;text-align:center} .cta-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:12px;font-weight:600;margin-bottom:24px} .cta-h2{font-family:var(--font-sans);font-size:clamp(32px,4vw,52px);font-weight:700;color:white;line-height:1.1;letter-spacing:-.03em;margin-bottom:18px} .cta-h2 .s{font-family:var(--font-serif);font-weight:400;font-style:italic;color:#FF8A95} .cta-sub{font-size:17px;color:rgba(255,255,255,.6);font-weight:300;line-height:1.7;margin-bottom:44px} .cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:32px} .btn-cta-lg{background:var(--brand);color:white;padding:16px 36px;border-radius:var(--r-sm);font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:10px;transition:all .25s;box-shadow:0 4px 20px rgba(212,32,46,.4)} .btn-cta-lg:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 12px 36px rgba(212,32,46,.5)} .btn-cta-ghost{border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:16px 32px;border-radius:var(--r-sm);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:10px;transition:all .2s;background:transparent} .btn-cta-ghost:hover{border-color:rgba(255,255,255,.5);color:white;background:rgba(255,255,255,.06)} .cta-assurances{display:flex;justify-content:center;gap:28px;flex-wrap:wrap} .assur{font-size:13px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:6px} .assur::before{content:'✓';color:#34D399;font-weight:700} /* ═══ FOOTER ═══ */ footer{background:#0D1117;padding:64px var(--pad) 32px} .footer-inner{max-width:var(--max);margin:0 auto} .footer-top{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)} .footer-brand p{font-size:13px;color:rgba(255,255,255,.4);line-height:1.75;margin-top:14px;font-weight:300} .footer-brand-chip{display:inline-block;margin-top:16px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600} .footer-col h4{font-size:13px;font-weight:700;color:white;margin-bottom:18px;letter-spacing:.3px} .footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.4);margin-bottom:10px;transition:color .15s;font-weight:300} .footer-col a:hover{color:white} .footer-social{display:flex;gap:10px;margin-top:18px} /*.social-link{width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .2s;font-size:14px;text-decoration:none}*/ /*.social-link:hover{background:var(--brand)}*/ .footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .footer-bottom p{font-size:13px;color:rgba(255,255,255,.25)} .footer-bottom-links{display:flex;gap:20px} .footer-bottom-links a{font-size:13px;color:rgba(255,255,255,.25);transition:color .15s} .footer-bottom-links a:hover{color:white} /* ═══ ANIMATIONS ═══ */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .fade-up{animation:fadeUp .5s ease both} .d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s} /* Reveal on scroll */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease} .reveal.visible{opacity:1;transform:translateY(0)} /* ═══ RESPONSIVE ═══ */ @media(max-width:1024px){ .topbar,.partner-chip{display:none} .hero-inner,.eco-header,.partner-band-inner,.whyus-layout{grid-template-columns:1fr} .hero-inner .hero-visual{display:none} .pain-grid,.modules-grid,.eco-grid,.ind-grid{grid-template-columns:repeat(2,1fr)} .blog-grid{grid-template-columns:repeat(2,1fr)} .stats-inner{grid-template-columns:repeat(2,1fr)} .stat-box{border-right:none;border-bottom:1px solid var(--border)} .footer-top{grid-template-columns:1fr 1fr} .process-steps{grid-template-columns:repeat(3,1fr)} .role-panel.active{grid-template-columns:1fr} .testi-grid-inner{grid-template-columns:1fr 1fr} .whyus-sticky{position:static} } @media(max-width:640px){ nav{display:none} section{padding:64px var(--pad)} .pain-grid,.modules-grid,.eco-grid,.ind-grid,.blog-grid{grid-template-columns:1fr} .stats-inner{grid-template-columns:1fr 1fr} .footer-top{grid-template-columns:1fr} .process-steps{grid-template-columns:repeat(2,1fr)} .testi-grid-inner{grid-template-columns:1fr} .hero-btns{flex-direction:column;align-items:flex-start} } /* Mobile nav */ .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;z-index:700;flex-shrink:0} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-mobile{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:600;overflow-y:auto;padding:80px 24px 40px;transform:translateX(100%);transition:transform .3s ease} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{display:block;font-size:16px;font-weight:500;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--border)} .nav-mobile a:hover{color:var(--brand)} .nav-mobile .mob-section{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);padding:20px 0 8px;border-bottom:none} .nav-mobile .mob-sub{font-size:14px;padding:10px 0 10px 16px;border-bottom:1px solid var(--ink-08);color:var(--ink-80)} .nav-mobile-cta{margin-top:24px;background:var(--brand);color:white !important;text-align:center;padding:16px;border-radius:var(--r-sm);font-size:16px;font-weight:700;display:block} @media(max-width:1024px){nav{display:none}.hamburger{display:flex}.nav-mobile{display:block}} /* ── CLIENT LOGO CAROUSEL ── */ .clients-section { padding: 48px 5%; background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .clients-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-50); margin-bottom: 32px; } .clients-track-wrap { overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .clients-track { display: flex; align-items: center; gap: 0; width: max-content; animation: clientsScroll 30s linear infinite; } .clients-track:hover { animation-play-state: paused; } @keyframes clientsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .client-logo-item { display: flex; align-items: center; justify-content: center; padding: 0 40px; min-width: 180px; height: 72px; flex-shrink: 0; border-right: 1px solid var(--border); } .client-logo-item:last-child { border-right: none; } .client-logo-item img { max-height: 44px; max-width: 140px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.45); transition: filter 0.3s ease; display: block; } .client-logo-item img:hover { filter: grayscale(0%) opacity(1); } /* ── HOME ZOHO EXPERTISE SECTION ── */ .zh-exp-sec { padding: 80px 5%; background: #F8FAFC; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .zh-exp-inner { max-width: 1160px; margin: 0 auto; } .zh-exp-header { text-align: center; margin-bottom: 48px; } .zh-exp-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; margin-bottom: 14px; letter-spacing: .3px; border-bottom: 1.5px solid var(--brand); padding-bottom: 2px; transition: opacity .2s; } .zh-exp-eyebrow:hover { opacity: .7; } .zh-exp-title { font-size: clamp(22px, 2.8vw, 36px); font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -.025em; max-width: 720px; margin: 0 auto; } .zh-exp-title em { font-family: var(--font-serif); font-style: italic; color: var(--brand); font-weight: 400; } /* Cards grid */ .zh-exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; } .zh-exp-card { background: white; border: 1.5px solid var(--border); border-radius: 20px; padding: 32px 24px 28px; transition: all .25s ease; display: flex; flex-direction: column; gap: 0; position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; } .zh-exp-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, var(--brand)); transform: scaleX(0); transition: transform .25s ease; transform-origin: left; } .zh-exp-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.10); transform: translateY(-4px); border-color: transparent; } .zh-exp-card:hover::after { transform: scaleX(1); } .zh-exp-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: var(--card-bg, #FDF2F3); flex-shrink: 0; overflow: hidden; } .zh-exp-icon img { width: 40px; height: 40px; object-fit: contain; display: block; } .zh-exp-name { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.025em; margin-bottom: 10px; line-height: 1.2; } .zh-exp-desc { font-size: 14px; color: var(--ink-50); line-height: 1.7; font-weight: 300; flex: 1; } /* View All button */ .zh-exp-footer { text-align: center; } .zh-exp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 36px; border: 1.5px solid var(--brand); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--brand); background: white; text-decoration: none; transition: all .2s; font-family: var(--font-sans); cursor: pointer; } .zh-exp-btn:hover { background: var(--brand); color: white; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,32,46,.2); } /* Responsive */ @media (max-width: 1024px) { .zh-exp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .zh-exp-grid { grid-template-columns: 1fr; gap: 14px; } .zh-exp-sec { padding: 52px 4%; } .zh-exp-card { padding: 24px 20px; } } /* ═══ BLOG-SINGLE ═══ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --brand:#D4202E;--brand-dark:#B01C29;--brand-light:#FDF2F3;--brand-mid:#F9D4D6; --blue:#0052CC;--blue-lt:#E8F0FE;--green:#1B7F4F;--green-lt:#E8F5EE; --amber:#E65100;--amber-lt:#FFF3E0;--purple:#6D28D9;--purple-lt:#F5F3FF; --ink:#111827;--ink-80:#374151;--ink-50:#6B7280;--ink-20:#D1D5DB;--ink-08:#F3F4F6; --border:#E5E7EB;--white:#FFFFFF; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px; --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.1); --max:1200px; } html{scroll-behavior:smooth} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} /* ── TOPBAR ── */ .topbar{background:var(--ink);padding:8px 5%} .topbar-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .topbar a{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;transition:color .15s} .topbar a:hover{color:white} .topbar-left,.topbar-right{display:flex;gap:16px;align-items:center} /* ── HEADER ── */ header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 5%;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;flex-shrink:0} .nav-links{display:flex;gap:2px} .nav-links a{font-size:13px;font-weight:500;color:var(--ink-80);padding:7px 12px;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{background:var(--brand-light);color:var(--brand)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:4px 10px;border-radius:30px;font-size:11px;font-weight:600} .btn-nav{background:var(--brand);color:white;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:all .2s;display:inline-block} .btn-nav:hover{background:var(--brand-dark)} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .nav-mobile{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:999;overflow-y:auto;padding:80px 5% 40px;transform:translateX(100%);transition:transform .3s} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{font-size:15px;font-weight:500;color:var(--ink-80);padding:14px 0;border-bottom:1px solid var(--border);display:block} /* ── BREADCRUMB ── */ .breadcrumb{padding:10px 5%;background:var(--ink-08);border-bottom:1px solid var(--border)} .bc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50);flex-wrap:wrap} .bc-inner a:hover{color:var(--brand)} /* ══════════════════════════════════════ BLOG HERO ══════════════════════════════════════ */ .blog-hero{ background:linear-gradient(145deg,var(--ink-08) 0%,var(--brand-light) 100%); padding:52px 5% 0; border-bottom:1px solid var(--border); overflow:hidden; position:relative; } .blog-hero::before{ content:'';position:absolute; top:-60px;right:-60px; width:320px;height:320px; background:radial-gradient(circle,rgba(212,32,46,.08) 0%,transparent 70%); border-radius:50%; } .bh-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:2} /* Meta row */ .blog-meta-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px} .blog-cat{ display:inline-flex;align-items:center;gap:5px; background:var(--brand);color:white; font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase; padding:4px 12px;border-radius:30px; } .blog-tag{ display:inline-flex;align-items:center;gap:4px; background:white;color:var(--ink-50); border:1px solid var(--border); font-size:11px;font-weight:600; padding:3px 10px;border-radius:20px; transition:all .15s; } .blog-tag:hover{border-color:var(--brand);color:var(--brand)} .blog-date{font-size:12px;color:var(--ink-50);margin-left:0} /* Title */ .blog-title{ font-size:clamp(26px,3.8vw,52px); font-weight:700;line-height:1.1; letter-spacing:-.035em; color:var(--ink); margin-bottom:18px; max-width:820px; } .blog-title em{ font-family:var(--font-serif); font-style:italic; color:var(--brand); font-weight:400; } /* Subtitle */ .blog-subtitle{ font-size:17px;color:var(--ink-80); font-weight:300;line-height:1.75; max-width:680px;margin-bottom:28px; } /* Author + share row */ .blog-byline{ display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap; padding:18px 0 0; border-top:1px solid var(--border); margin-bottom:0; } .blog-author{display:flex;align-items:center;gap:11px} .author-avatar{ width:40px;height:40px;border-radius:50%; background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%); display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:700;color:white;flex-shrink:0; } .author-name{font-size:13px;font-weight:600;color:var(--ink)} .author-role{font-size:11px;color:var(--ink-50);font-weight:400} .blog-meta-right{display:flex;align-items:center;gap:14px} .meta-pill{ display:flex;align-items:center;gap:5px; font-size:12px;color:var(--ink-50);font-weight:500; } .share-btns{display:flex;gap:6px} .share-btn{ width:32px;height:32px;border-radius:8px; background:white;border:1px solid var(--border); display:flex;align-items:center;justify-content:center; transition:all .2s;cursor:pointer; } .share-btn:hover{background:var(--brand);border-color:var(--brand)} .share-btn:hover svg path,.share-btn:hover svg rect,.share-btn:hover svg circle{stroke:white;fill:white} /* Cover image strip */ .blog-cover{ margin-top:32px; border-radius:16px 16px 0 0; overflow:hidden; height:320px; background:linear-gradient(135deg,#1E293B 0%,#0F172A 50%,#1a0a0d 100%); position:relative; display:flex;align-items:center;justify-content:center; } .cover-graphic{ display:flex;flex-direction:column;align-items:center;gap:16px; opacity:.9; } .cover-label{ font-size:11px;font-weight:700;letter-spacing:3px; text-transform:uppercase;color:rgba(255,255,255,.3); } .cover-stat-row{display:flex;gap:24px} .cover-stat{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px;padding:20px 28px; text-align:center; backdrop-filter:blur(10px); } .cover-stat-num{ font-family:var(--font-serif); font-size:40px;font-style:italic; color:var(--brand);line-height:1;font-weight:400; } .cover-stat-lbl{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;margin-top:4px} /* ══════════════════════════════════════ MAIN LAYOUT: content + sidebar ══════════════════════════════════════ */ .blog-body{ max-width:var(--max); margin:0 auto; padding:52px 5% 80px; display:grid; grid-template-columns:1fr 320px; align-items:start; } /* ── PROGRESS BAR ── */ .reading-bar{ position:fixed;top:64px;left:0;right:0; height:3px;background:var(--border);z-index:400; } .reading-progress{ height:100%;background:var(--brand); width:0%;transition:width .1s linear; } /* ══════════════════════════════════════ ARTICLE CONTENT ══════════════════════════════════════ */ .article-content{} /* Key stats banner */ .key-stats{ display:grid;grid-template-columns:repeat(3,1fr); gap:16px;margin-bottom:40px; } .ks-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-xl);padding:22px 18px; position:relative;overflow:hidden; transition:all .2s; } .ks-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--ks-color,var(--brand)); } .ks-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .ks-num{ font-family:var(--font-serif); font-size:36px;font-style:italic; color:var(--ks-color,var(--brand)); line-height:1;margin-bottom:6px; } .ks-label{font-size:12px;color:var(--ink-50);font-weight:500;line-height:1.4} /* Article typography */ .article-content h2{ font-size:clamp(20px,2vw,26px); font-weight:700;letter-spacing:-.025em; color:var(--ink);margin:44px 0 16px; padding-top:8px; scroll-margin-top:120px; } .article-content h2 em{ font-family:var(--font-serif);font-style:italic; color:var(--brand);font-weight:400; } .article-content h3{ font-size:18px;font-weight:700; color:var(--ink);margin:28px 0 12px; letter-spacing:-.02em; } .article-content p{ font-size:16px;color:var(--ink-80); line-height:1.85;font-weight:300; margin-bottom:20px; } .article-content strong{font-weight:600;color:var(--ink)} /* Pull quote */ .pull-quote{ border-left:4px solid var(--brand); background:var(--brand-light); padding:22px 26px; border-radius:0 var(--r-lg) var(--r-lg) 0; margin:32px 0; } .pull-quote p{ font-family:var(--font-serif); font-size:20px;font-style:italic; color:var(--ink);line-height:1.5; margin-bottom:8px;font-weight:400; } .pull-quote cite{ font-size:12px;font-weight:600; color:var(--brand);font-style:normal; display:flex;align-items:center;gap:6px; } .pull-quote cite::before{content:'—'} /* Info box */ .info-box{ background:var(--blue-lt);border:1px solid rgba(0,82,204,.15); border-radius:var(--r-lg);padding:22px 24px; margin:28px 0;display:flex;gap:14px; } .info-box-icon{font-size:22px;flex-shrink:0;margin-top:2px} .info-box-body h4{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:6px} .info-box-body p{font-size:14px;color:var(--ink-80);line-height:1.7;margin-bottom:0;font-weight:300} /* Warning / tip box */ .tip-box{ background:var(--green-lt);border:1px solid rgba(27,127,79,.15); border-radius:var(--r-lg);padding:22px 24px; margin:28px 0;display:flex;gap:14px; } .tip-box-icon{font-size:22px;flex-shrink:0;margin-top:2px} .tip-box-body h4{font-size:14px;font-weight:700;color:var(--green);margin-bottom:6px} .tip-box-body p{font-size:14px;color:var(--ink-80);line-height:1.7;margin-bottom:0;font-weight:300} /* Checklist */ .checklist{margin:20px 0 28px;display:flex;flex-direction:column;gap:10px} .checklist li{ display:flex;align-items:flex-start;gap:10px; font-size:15px;color:var(--ink-80);font-weight:300;line-height:1.6; } .checklist li::before{ content:'✓'; width:20px;height:20px;border-radius:50%; background:var(--green-lt);color:var(--green); font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:2px; } /* Numbered steps */ .step-list{margin:20px 0 28px;display:flex;flex-direction:column;gap:16px} .step-item{display:flex;gap:16px;align-items:flex-start} .step-num{ width:32px;height:32px;border-radius:50%; background:var(--brand);color:white; font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:2px; } .step-body h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px} .step-body p{font-size:14px;color:var(--ink-50);line-height:1.65;margin-bottom:0;font-weight:300} /* Results table */ .results-table{ width:100%;border-collapse:collapse; margin:28px 0;border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--shadow-sm); } .results-table th{ background:var(--ink);color:white; font-size:12px;font-weight:600; padding:14px 18px;text-align:left;letter-spacing:.3px; } .results-table td{ padding:13px 18px; font-size:14px;color:var(--ink-80); border-bottom:1px solid var(--border);font-weight:300; } .results-table tr:last-child td{border-bottom:none} .results-table tr:nth-child(even) td{background:var(--ink-08)} .td-before{color:var(--brand);font-weight:600} .td-after{color:var(--green);font-weight:600} /* Image block */ .article-img{ margin:32px 0;border-radius:var(--r-xl); overflow:hidden;background:var(--ink-08); border:1px solid var(--border); } .article-img-inner{ height:220px;background:linear-gradient(135deg,var(--ink-08) 0%,var(--brand-light) 100%); display:flex;align-items:center;justify-content:center; font-size:48px; } .article-img figcaption{ padding:12px 16px; font-size:12px;color:var(--ink-50); border-top:1px solid var(--border); font-style:italic; } /* Tags footer */ .article-tags{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:28px 0;border-top:1px solid var(--border); margin-top:40px; } .article-tags span{font-size:12px;font-weight:600;color:var(--ink-50)} .a-tag{ background:var(--ink-08);color:var(--ink-80); border:1px solid var(--border); font-size:12px;font-weight:500; padding:4px 12px;border-radius:20px; transition:all .15s; } .a-tag:hover{background:var(--brand-light);border-color:var(--brand-mid);color:var(--brand)} /* Author card */ .author-card{ background:var(--ink-08);border:1px solid var(--border); border-radius:var(--r-xl);padding:28px; margin-top:32px;display:flex;gap:18px;align-items:flex-start; } .ac-avatar{ width:56px;height:56px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%); display:flex;align-items:center;justify-content:center; font-size:20px;font-weight:700;color:white; } .ac-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px} .ac-role{font-size:12px;color:var(--brand);font-weight:600;margin-bottom:8px} .ac-bio{font-size:13px;color:var(--ink-50);line-height:1.7;font-weight:300} /* ══════════════════════════════════════ SIDEBAR ══════════════════════════════════════ */ .blog-sidebar{ position:sticky;top:88px; display:flex;flex-direction:column;gap:20px; } /* TOC */ .toc-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-xl);padding:22px; box-shadow:var(--shadow-sm); } .toc-card h4{ font-size:12px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:var(--ink-50); margin-bottom:14px;display:flex;align-items:center;gap:6px; } .toc-list{display:block;flex-direction:column;gap:2px} .toc-link{ display:flex;align-items:flex-start;gap:8px; font-size:13px;color:var(--ink-80); padding:6px 8px;border-radius:6px; transition:all .15s;line-height:1.45; } .toc-link:hover,.toc-link.active{ background:var(--brand-light);color:var(--brand); } .toc-link::before{ content:'';width:5px;height:5px;border-radius:50%; background:var(--brand);opacity:.35;flex-shrink:0;margin-top:5px; } .toc-link.active::before{opacity:1} /* Consultation CTA sidebar */ .cta-sidebar{ background:var(--ink);border-radius:var(--r-xl); padding:24px;overflow:hidden;position:relative; } .cta-sidebar::before{ content:'';position:absolute; top:-40px;right:-40px;width:120px;height:120px; background:radial-gradient(circle,rgba(212,32,46,.2) 0%,transparent 70%); border-radius:50%; } .cta-sidebar-tag{ font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:6px; } .cta-sidebar-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);animation:blink2 1.5s infinite} @keyframes blink2{0%,100%{opacity:1}50%{opacity:.3}} .cta-sidebar h3{ font-size:18px;font-weight:700;color:white; line-height:1.25;letter-spacing:-.02em;margin-bottom:10px; } .cta-sidebar h3 em{ font-family:var(--font-serif);font-style:italic; color:var(--brand);font-weight:400; } .cta-sidebar p{ font-size:13px;color:rgba(255,255,255,.5); line-height:1.65;font-weight:300;margin-bottom:18px; } .btn-sidebar-red{ display:flex;align-items:center;justify-content:center;gap:7px; background:var(--brand);color:white; padding:11px 18px;border-radius:8px; font-size:13px;font-weight:700; transition:all .2s;width:100%;text-align:center; position:relative;z-index:2; } .btn-sidebar-red:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-sidebar-outline{ display:flex;align-items:center;justify-content:center;gap:7px; border:1.5px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); padding:10px 18px;border-radius:8px; font-size:13px;font-weight:500; transition:all .2s;margin-top:8px;width:100%;text-align:center; position:relative;z-index:2; } .btn-sidebar-outline:hover{border-color:rgba(255,255,255,.4);color:white} .cta-assur{ display:flex;flex-direction:column;gap:5px;margin-top:14px; position:relative;z-index:2; } .cta-assur span{ font-size:11px;color:rgba(255,255,255,.3); display:flex;align-items:center;gap:5px; } .cta-assur span::before{content:'✓';color:#34D399;font-weight:700} /* Related services card */ .related-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-xl);padding:22px; } .related-card h4{ font-size:12px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:var(--ink-50);margin-bottom:14px; } .related-service{ display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:8px; border:1px solid var(--border); margin-bottom:8px;transition:all .15s; } .related-service:last-child{margin-bottom:0} .related-service:hover{border-color:var(--brand-mid);background:var(--brand-light)} .rs-icon{ width:34px;height:34px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:16px;flex-shrink:0; } .rs-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2} .rs-sub{font-size:11px;color:var(--ink-50);font-weight:400} .rs-arrow{margin-left:auto;font-size:12px;color:var(--ink-20);transition:color .15s} .related-service:hover .rs-arrow{color:var(--brand)} /* Newsletter */ .newsletter-card{ background:linear-gradient(135deg,var(--brand-light) 0%,#fff 100%); border:1.5px solid var(--brand-mid); border-radius:var(--r-xl);padding:22px; } .newsletter-card h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px} .newsletter-card p{font-size:13px;color:var(--ink-50);line-height:1.6;font-weight:300;margin-bottom:14px} .nl-input{ width:100%;padding:10px 14px; border:1.5px solid var(--border);border-radius:8px; font-size:13px;font-family:var(--font-sans);color:var(--ink); outline:none;transition:border .2s;margin-bottom:8px; } .nl-input:focus{border-color:var(--brand)} .nl-btn{ width:100%;padding:11px;background:var(--brand);color:white; border:none;border-radius:8px;font-size:13px;font-weight:700; font-family:var(--font-sans);cursor:pointer;transition:all .2s; } .nl-btn:hover{background:var(--brand-dark)} /* ══════════════════════════════════════ RELATED POSTS ══════════════════════════════════════ */ .related-posts-sec{ background:var(--ink-08); border-top:1px solid var(--border); padding:60px 5%; } .rp-inner{max-width:var(--max);margin:0 auto} .rp-header{margin-bottom:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .rp-header h2{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.025em} .rp-header h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .rp-header a{font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap} .rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .rp-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-xl);overflow:hidden; transition:all .25s;display:flex;flex-direction:column; } .rp-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent} .rp-cover{ height:160px; display:flex;align-items:center;justify-content:center; font-size:40px; position:relative;overflow:hidden; } .rp-cover-1{background:linear-gradient(135deg,#EFF6FF,#DBEAFE)} .rp-cover-2{background:linear-gradient(135deg,#F0FDF4,#DCFCE7)} .rp-cover-3{background:linear-gradient(135deg,#FFF7ED,#FED7AA)} .rp-body{padding:20px;flex:1;display:flex;flex-direction:column} .rp-cat{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin-bottom:8px} .rp-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-.02em;margin-bottom:8px} .rp-title:hover{color:var(--brand)} .rp-excerpt{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300;flex:1} .rp-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .rp-date{font-size:11px;color:var(--ink-50)} .rp-read{font-size:12px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:4px;transition:gap .15s} .rp-card:hover .rp-read{gap:7px} /* ── BOTTOM CTA ── */ .bottom-cta{background:var(--ink);padding:72px 5%;text-align:center} .bottom-cta-wrap{max-width:620px;margin:0 auto} .bc-ey{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:20px} .bc-title{font-size:clamp(24px,3vw,38px);font-weight:700;color:white;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px} .bc-title em{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .bc-sub{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:28px} .bc-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .bc-assur{display:flex;justify-content:center;gap:20px;flex-wrap:wrap} .bc-assur span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px} .bc-assur span::before{content:'✓';color:#34D399;font-weight:700} .btn-red-lg{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:700;transition:all .2s} .btn-red-lg:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-ghost-lg{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:600;transition:all .2s} .btn-ghost-lg:hover{border-color:rgba(255,255,255,.5);color:white} /* ── FOOTER ── */ footer{background:#0D1117;padding:52px 5% 28px} .ft-inner{max-width:var(--max);margin:0 auto} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)} .ft-brand p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:12px;font-weight:300} .ft-chip{display:inline-block;margin-top:12px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600} .ft-social{display:flex;gap:8px;margin-top:12px} .soc-link{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s} .soc-link:hover{background:var(--brand)} .ft-col h4{font-size:12px;font-weight:700;color:white;margin-bottom:12px} .ft-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:8px;transition:color .15s;font-weight:300} .ft-col a:hover{color:white} .ft-bot{padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .ft-bot p,.ft-links a{font-size:12px;color:rgba(255,255,255,.25)} .ft-links{display:flex;gap:16px} /* ── RESPONSIVE ── */ @media(max-width:1024px){ .blog-body{grid-template-columns:1fr;} .blog-sidebar{position:static} .key-stats{grid-template-columns:repeat(3,1fr)} .rp-grid{grid-template-columns:repeat(2,1fr)} .ft-top{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .nav-links{display:none} .hamburger{display:flex} .key-stats{grid-template-columns:1fr 1fr} .rp-grid{grid-template-columns:1fr} .blog-cover{height:220px} .cover-stat-row{gap:12px} .cover-stat{padding:14px 16px} .cover-stat-num{font-size:28px} } @media(max-width:480px){ .key-stats{grid-template-columns:1fr} .blog-title{font-size:26px} .results-table{font-size:12px} .results-table th,.results-table td{padding:10px 12px} } /* ═══ BLOG ═══ */ /* ═══ SECTION COMMON ═══ */ section{padding:88px var(--pad)} .section-tag{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:block} h2.section-h2{font-family:var(--font-sans);font-size:clamp(28px,3.5vw,44px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:16px} h2.section-h2 .s{font-family:var(--font-serif);font-weight:400;font-style:italic;color:var(--brand)} .section-lead{font-size:17px;color:var(--ink-80);line-height:1.75;font-weight:300;max-width:600px} .section-lead strong{color:var(--ink);font-weight:600} /* ═══ BLOGS SECTION ═══ */ .blog-section{background:white} .blog-inner{max-width:var(--max);margin:0 auto} .blog-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .blog-card{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);transition:all .3s;background:white} .blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .blog-img{height:200px;overflow:hidden;flex-shrink:0} .blog-img img{width:100%;height:100%;object-fit:cover;display:block} .blog-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px} .blog-category{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand)} .blog-date{font-size:12px;color:var(--ink-50)} .blog-body{padding:22px;display:flex;flex-direction:column;flex:1} .blog-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:10px;letter-spacing:-.3px} .blog-excerpt{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300} .blog-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .blog-read{font-size:13px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:5px} .blog-mins{font-size:12px;color:var(--ink-50)} /* ── PAGINATION ── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 48px 0 0; padding: 0; list-style: none; } .pagination li a.page-link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--ink-80); background: white; border: 1.5px solid var(--border); text-decoration: none; transition: all .2s; font-family: var(--font-sans); } .pagination li a.page-link:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); } .pagination li.active a.page-link { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 2px 10px rgba(212,32,46,.25); } .pagination li.active a.page-link:hover { background: var(--brand-dark); } .pagination .page-item a.page-link, .pagination .nav-next a.page-link { min-width: auto; padding: 0 16px; gap: 5px; color: var(--ink-80); font-weight: 600; } .pagination .page-item a.page-link:hover, .pagination .nav-next a.page-link:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); } /* ═══ CONTACT ═══ */ :root{ --brand:#D4202E;--brand-dark:#B01C29;--brand-light:#FDF2F3;--brand-mid:#F9D4D6; --blue:#0052CC;--blue-lt:#E8F0FE;--green:#1B7F4F;--green-lt:#E8F5EE; --amber:#E65100;--amber-lt:#FFF3E0; --ink:#111827;--ink-80:#374151;--ink-50:#6B7280;--ink-20:#D1D5DB;--ink-08:#F3F4F6; --white:#FFFFFF;--border:#E5E7EB; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px; --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.08);--shadow-lg:0 12px 40px rgba(0,0,0,.1); --max:1200px; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6;max-width:100vw} a{color:inherit;text-decoration:none} img{max-width:100%;display:block;height:auto} ul{list-style:none} button{font-family:var(--font-sans)} /* ── TOP BAR ── */ .topbar{background:var(--ink);padding:8px 5%} .topbar-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .topbar a{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;transition:color .15s;white-space:nowrap} .topbar a:hover{color:white} .topbar-left{display:flex;gap:16px;flex-wrap:wrap} .topbar-right{display:flex;gap:16px;align-items:center} /* ── HEADER ── */ header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 5%;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0} .logo-sq{width:36px;height:36px;background:var(--brand);border-radius:var(--r-sm);display:grid;place-items:center;font-weight:700;color:white;font-size:15px;flex-shrink:0} .logo-text strong{display:block;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.3px;line-height:1.2} .logo-text span{display:block;font-size:10px;color:var(--ink-50);letter-spacing:.3px;font-weight:500} /* Desktop Nav */ .nav-desktop{display:flex;align-items:center;gap:2px} .nav-desktop > li{position:relative} .nav-desktop > li > a{font-size:13px;font-weight:500;color:var(--ink-80);padding:7px 12px;border-radius:var(--r-sm);transition:background .15s,color .15s;white-space:nowrap;display:block} .nav-desktop > li > a:hover,.nav-desktop > li.active > a{background:var(--ink-08);color:var(--brand)} .has-mega > a::after{content:' ▾';font-size:9px;opacity:.5} .mega{display:none;position:absolute;top:calc(100%+12px);left:50%;transform:translateX(-50%);background:white;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;width:680px;z-index:600;grid-template-columns:repeat(3,1fr);gap:20px} .has-mega:hover .mega{display:grid} .mega-col h5{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)} .mega-col a{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-80);padding:5px 7px;border-radius:6px;transition:background .12s;white-space:nowrap} .mega-col a:hover{background:var(--ink-08);color:var(--brand)} .mega-col a::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brand);opacity:.4;flex-shrink:0} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:4px 10px;border-radius:30px;font-size:11px;font-weight:600;white-space:nowrap} .btn-nav{background:var(--brand);color:white;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:all .2s;white-space:nowrap;display:inline-block} .btn-nav:hover{background:var(--brand-dark)} /* Mobile hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;z-index:700;flex-shrink:0} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile Nav Drawer */ .nav-mobile{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:600;overflow-y:auto;padding:80px 24px 40px;transform:translateX(100%);transition:transform .3s ease} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{display:block;font-size:16px;font-weight:500;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--border)} .nav-mobile a:hover{color:var(--brand)} .nav-mobile .mob-section{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);padding:20px 0 8px;border-bottom:none} .nav-mobile .mob-sub{font-size:14px;padding:10px 0 10px 16px;border-bottom:1px solid var(--ink-08);color:var(--ink-80)} .nav-mobile-cta{margin-top:24px;background:var(--brand);color:white;text-align:center;padding:16px;border-radius:var(--r-sm);font-size:16px;font-weight:700;display:block} /* ── BREADCRUMB ── */ .breadcrumb{padding:10px 5%;background:var(--ink-08);border-bottom:1px solid var(--border)} .bc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50);flex-wrap:wrap} .bc-inner a{color:var(--ink-50);transition:color .15s} .bc-inner a:hover{color:var(--brand)} .bc-inner span{color:var(--ink-80);font-weight:500} /* ── PAGE HERO ── */ .page-hero{background:linear-gradient(145deg,var(--ink-08) 0%,var(--brand-light) 100%);padding:64px 5%;border-bottom:1px solid var(--border)} .ph-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .ph-tag{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px} .ph-inner h1{font-family:var(--font-sans);font-size:clamp(28px,3.5vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px} .ph-inner h1 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .ph-intro{font-size:16px;color:var(--ink-80);line-height:1.75;font-weight:300;margin-bottom:24px} .ph-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px} .ph-badge{display:flex;align-items:center;gap:5px;background:white;border:1px solid var(--border);padding:6px 12px;border-radius:30px;font-size:12px;font-weight:500;color:var(--ink-80)} .ph-btns{display:flex;gap:10px;flex-wrap:wrap} .ph-visual{background:white;border-radius:var(--r-xl);padding:32px;border:1px solid var(--border);box-shadow:var(--shadow-md)} .pv-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:16px} .pv-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--ink-80);font-weight:500} .pv-item:last-child{border-bottom:none} .pv-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex-shrink:0} /* ── SECTIONS ── */ .sec{padding:80px 5%} .sec-inner{max-width:var(--max);margin:0 auto} .sec-bg{background:var(--ink-08)} .sec-dark{background:var(--ink)} .sec-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:10px} .sec-dark .sec-tag{color:#FF8A95} h2.sec-h2{font-family:var(--font-sans);font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:14px} h2.sec-h2 .si{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .sec-dark h2.sec-h2{color:white} .sec-lead{font-size:16px;color:var(--ink-80);line-height:1.75;font-weight:300;max-width:600px} .sec-dark .sec-lead{color:rgba(255,255,255,.5)} .sec-header{margin-bottom:48px} /* ── GRIDS ── */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .g-center{align-items:center} /* ── CARDS ── */ .card{background:white;border-radius:var(--r-xl);border:1px solid var(--border);padding:28px;transition:all .25s;display:block;text-decoration:none;color:inherit} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .c-icon{font-size:28px;margin-bottom:14px} .card h3,.c-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.3px} .card p,.c-text{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300} .c-list{margin-top:14px;display:flex;flex-direction:column;gap:7px} .c-list li{font-size:13px;color:var(--ink-80);display:flex;align-items:flex-start;gap:7px} .c-list li::before{content:'→';color:var(--brand);font-size:11px;flex-shrink:0;margin-top:2px} /* ── FEAT ROWS ── */ .feat-row{display:flex;gap:16px;align-items:flex-start;padding:20px 24px;border-radius:var(--r-lg);background:var(--ink-08);border:1px solid transparent;transition:all .2s;margin-bottom:8px} .feat-row:hover{background:white;border-color:var(--border);box-shadow:var(--shadow-sm)} .feat-icon{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;flex-shrink:0} .feat-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px} .feat-text{font-size:13px;color:var(--ink-80);line-height:1.65;font-weight:300} /* ── FAQ ── */ .faq-item{border-bottom:1px solid var(--border);padding:18px 0} .faq-q{font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;user-select:none} .faq-q::after{content:'+';font-size:20px;color:var(--brand);font-weight:300;flex-shrink:0;transition:transform .2s} .faq-item.open .faq-q::after{transform:rotate(45deg)} .faq-a{font-size:14px;color:var(--ink-80);line-height:1.75;font-weight:300;max-height:0;overflow:hidden;transition:max-height .3s,margin .3s} .faq-item.open .faq-a{max-height:400px;margin-top:10px} /* ── PROCESS ── */ .process-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px;position:relative} .process-wrap::before{content:'';position:absolute;top:28px;left:calc(10% + 14px);right:calc(10% + 14px);height:1px;background:repeating-linear-gradient(90deg,var(--ink-20) 0,var(--ink-20) 6px,transparent 6px,transparent 12px)} .proc-step{text-align:center} .proc-num{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;background:white;border:2px solid var(--border);display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--brand);position:relative;z-index:1;box-shadow:var(--shadow-sm)} .proc-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px} .proc-text{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* ── TESTIMONIALS ── */ .testi-card{background:var(--ink-08);border-radius:var(--r-xl);padding:24px;border:1px solid var(--border);transition:all .25s;display:flex;flex-direction:column;gap:14px} .testi-card:hover{background:white;box-shadow:var(--shadow-md)} .testi-stars{color:#F59E0B;font-size:13px;letter-spacing:2px} .testi-quote{font-family:var(--font-serif);font-size:14px;font-style:italic;color:var(--ink-80);line-height:1.7;flex:1} .testi-person{display:flex;align-items:center;gap:10px} .testi-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:white;flex-shrink:0} .testi-name{font-size:13px;font-weight:700;color:var(--ink)} .testi-role{font-size:11px;color:var(--ink-50);margin-top:2px} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;padding:12px 24px;border-radius:var(--r-sm);transition:all .25s;text-decoration:none;cursor:pointer;border:none;font-family:var(--font-sans);line-height:1} .btn-red{background:var(--brand);color:white;box-shadow:0 2px 12px rgba(212,32,46,.2)} .btn-red:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,32,46,.35)} .btn-dark{background:var(--ink);color:white} .btn-dark:hover{background:#1e293b;transform:translateY(-1px)} .btn-ghost{border:1.5px solid var(--border);color:var(--ink-80);background:white} .btn-ghost:hover{border-color:var(--ink-20);color:var(--ink)} .btn-ghost-light{border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);background:transparent} .btn-ghost-light:hover{border-color:rgba(255,255,255,.6);color:white} .btn-lg{font-size:15px;padding:14px 32px} /* ── CTA BLOCK ── */ .cta-block{background:var(--ink);padding:88px 5%;text-align:center} .cta-inner{max-width:700px;margin:0 auto} .cta-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:22px} .cta-h{font-family:var(--font-sans);font-size:clamp(28px,3.5vw,46px);font-weight:700;color:white;line-height:1.1;letter-spacing:-.03em;margin-bottom:14px} .cta-h .si{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .cta-sub{font-size:16px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:36px} .cta-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:24px} .cta-assurances{display:flex;justify-content:center;gap:24px;flex-wrap:wrap} .assur{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px} .assur::before{content:'✓';color:#34D399;font-weight:700} /* ── FORM ── */ .form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .form-field label{font-size:12px;font-weight:600;color:var(--ink-80)} .form-field input,.form-field select,.form-field textarea{padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-sans);font-size:14px;color:var(--ink);background:white;outline:none;transition:border-color .2s;width:100%} .form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--brand)} .form-field textarea{resize:vertical;min-height:110px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* ── TICKER ── */ .ticker{background:var(--ink);overflow:hidden;padding:12px 0;border-top:3px solid var(--brand)} .ticker-track{display:flex;gap:40px;animation:tickScroll 35s linear infinite;white-space:nowrap} @keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .t-item{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4)} .t-sep{color:var(--brand)} /* ── FOOTER ── */ footer{background:#0D1117;padding:56px 5% 28px} .footer-inner{max-width:var(--max);margin:0 auto} .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)} .footer-brand p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:12px;font-weight:300} .footer-chip{display:inline-block;margin-top:14px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600} .footer-social{display:flex;gap:8px;margin-top:14px} .social-link{width:32px;height:32px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);display:grid;place-items:center;transition:background .2s} .social-link:hover{background:var(--brand)} .footer-col h4{font-size:12px;font-weight:700;color:white;margin-bottom:14px;letter-spacing:.3px} .footer-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:9px;transition:color .15s;font-weight:300} .footer-col a:hover{color:white} .footer-bottom{padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .footer-bottom p,.footer-links a{font-size:12px;color:rgba(255,255,255,.25)} .footer-links{display:flex;gap:16px} .footer-links a:hover{color:white} /* ── REVEAL ── */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease} .reveal.visible{opacity:1;transform:translateY(0)} /* ═══════════════════════════ RESPONSIVE — MOBILE FIRST ═══════════════════════════ */ @media(max-width:1024px){ .topbar{display:none} .partner-chip{display:none} .ph-inner{grid-template-columns:1fr} .ph-visual{display:none} .g2{grid-template-columns:1fr;gap:32px} .g3{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)} .footer-top{grid-template-columns:1fr 1fr;gap:28px} .process-wrap{grid-template-columns:repeat(3,1fr)} .process-wrap::before{display:none} .mega{width:90vw;left:0;transform:none} .has-mega:hover .mega{display:none} .nav-desktop{display:none} .hamburger{display:flex} .nav-mobile{display:block} .form-row{grid-template-columns:1fr} } @media(max-width:640px){ .sec{padding:56px 4%} .page-hero{padding:48px 4%} .g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr 1fr} .footer-top{grid-template-columns:1fr} .process-wrap{grid-template-columns:repeat(2,1fr)} .cta-btns{flex-direction:column;align-items:center} .cta-assurances{gap:12px} h2.sec-h2{font-size:24px} .ph-inner h1{font-size:28px} .hero-btns{flex-direction:column;align-items:flex-start} } @media(max-width:400px){ .g4{grid-template-columns:1fr} .ph-badges{gap:6px} .ph-badge{font-size:11px;padding:5px 10px} } /* ═══════════ CONTACT PAGE ═══════════ */ .contact-hero{background:linear-gradient(145deg,var(--ink-08) 0%,var(--brand-light) 100%);padding:64px 5%;border-bottom:1px solid var(--border)} .contact-hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:center} .ch-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:12px} .contact-hero h1{font-family:var(--font-sans);font-size:clamp(28px,3.5vw,46px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px} .contact-hero h1 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .contact-hero p{font-size:15px;color:var(--ink-80);line-height:1.75;font-weight:300;margin-bottom:24px} .hero-badges{display:flex;gap:8px;flex-wrap:wrap} .hero-badge{display:inline-flex;align-items:center;gap:5px;background:white;border:1px solid var(--border);padding:6px 13px;border-radius:30px;font-size:12px;font-weight:500;color:var(--ink-80)} /* Hours card */ .hours-card{background:white;border-radius:var(--r-xl);padding:28px;border:1px solid var(--border);box-shadow:var(--shadow-md)} .hours-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:16px;display:flex;align-items:center;gap:7px} .hours-pulse{width:7px;height:7px;border-radius:50%;background:#1B7F4F;animation:hpulse 2s infinite;flex-shrink:0} @keyframes hpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} .hours-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px} .hours-row:last-of-type{border-bottom:none} .hours-day{color:var(--ink-80)} .hours-open{font-weight:700;color:var(--ink)} .hours-closed{font-weight:700;color:var(--brand)} .hours-address{margin-top:18px;padding:14px;background:var(--ink-08);border-radius:var(--r-md);border:1px solid var(--border)} .hours-address-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:6px} .hours-address-txt{font-size:13px;color:var(--ink-80);line-height:1.65;font-weight:300} /* Contact section */ .contact-sec{padding:72px 5%;background:white} .contact-sec-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start} .ci-sec-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px} .ci-h2{font-size:clamp(24px,2.5vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.025em;color:var(--ink);margin-bottom:10px} .ci-h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .ci-lead{font-size:14px;color:var(--ink-80);font-weight:300;line-height:1.75;margin-bottom:32px} .ci-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px} .ci-icon{width:46px;height:46px;border-radius:var(--r-md);background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .ci-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:5px} .ci-val{font-size:14px;font-weight:600;color:var(--ink);line-height:1.5} .ci-val a{color:var(--brand);text-decoration:none} .ci-val a:hover{text-decoration:underline} .soc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px} .soc-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;text-decoration:none;transition:all .2s} .soc-fb{background:#EFF6FF;color:#1D4ED8}.soc-fb:hover{background:#1D4ED8;color:white} .soc-ig{background:var(--brand-light);color:var(--brand)}.soc-ig:hover{background:var(--brand);color:white} .soc-li{background:#EFF6FF;color:#0A66C2}.soc-li:hover{background:#0A66C2;color:white} .ci-partner{margin-top:28px;padding:18px;background:var(--blue-lt);border-radius:var(--r-md);border:1px solid rgba(0,82,204,.15);display:flex;align-items:center;gap:12px} .ci-partner-icon{font-size:26px} .ci-partner-title{font-size:13px;font-weight:700;color:var(--blue)} .ci-partner-sub{font-size:11px;color:var(--ink-50);margin-top:2px;font-weight:300} /* Form card */ .form-card{background:var(--ink-08);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px} .form-card h3{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.025em;margin-bottom:5px} .form-card-sub{font-size:13px;color:var(--ink-50);margin-bottom:28px;font-weight:300} .f-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .f-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .f-field label{font-size:12px;font-weight:600;color:var(--ink-80)} .f-field input,.f-field select,.f-field textarea{padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-sans);font-size:14px;color:var(--ink);background:white;outline:none;transition:border-color .2s,box-shadow .2s;width:100%} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,32,46,.08)} .f-field textarea{resize:vertical;min-height:120px} .form-submit-btn{width:100%;padding:14px;background:var(--brand);color:white;border:none;border-radius:var(--r-sm);font-size:15px;font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px} .form-submit-btn:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,32,46,.25)} .form-assur{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .form-assur span{font-size:12px;color:var(--ink-50);display:flex;align-items:center;gap:4px} .form-assur span::before{content:'✓';color:#1B7F4F;font-weight:700} /* CTA */ .cta-block{background:var(--ink);padding:80px 5%;text-align:center} .cta-wrap{max-width:680px;margin:0 auto} .cta-ey{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:20px} .cta-h2{font-size:clamp(26px,3vw,40px);font-weight:700;color:white;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px} .cta-h2 em{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .cta-sub{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:32px} .cta-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px} .cta-assur{display:flex;justify-content:center;gap:20px;flex-wrap:wrap} .cta-assur span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px} .cta-assur span::before{content:'✓';color:#34D399;font-weight:700} .btn-red-lg{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:700;text-decoration:none;transition:all .2s} .btn-red-lg:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-ghost-lg{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:600;text-decoration:none;transition:all .2s} .btn-ghost-lg:hover{border-color:rgba(255,255,255,.6);color:white} /* Responsive */ @media(max-width:1024px){ .contact-hero-inner{grid-template-columns:1fr} .contact-sec-inner{grid-template-columns:1fr;gap:36px} } @media(max-width:640px){ .contact-hero{padding:48px 4%} .contact-sec{padding:52px 4%} .f-row2{grid-template-columns:1fr} .form-card{padding:24px} } /* ═══ OUR-ZOHO-EXPERTISE ═══ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --brand:#D4202E;--brand-dark:#B01C29;--brand-light:#FDF2F3;--brand-mid:#F9D4D6; --blue:#0052CC;--blue-lt:#E8F0FE;--green:#1B7F4F;--green-lt:#E8F5EE; --amber:#E65100;--amber-lt:#FFF3E0;--purple:#6D28D9;--purple-lt:#F5F3FF; --ink:#111827;--ink-80:#374151;--ink-50:#6B7280;--ink-20:#D1D5DB;--ink-08:#F3F4F6; --border:#E5E7EB;--white:#FFFFFF; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --max:1160px; } html{scroll-behavior:smooth} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} /* ── TOPBAR ── */ .topbar{background:var(--ink);padding:8px 5%} .topbar-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center} .topbar a{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;transition:color .15s} .topbar a:hover{color:white} .topbar-left,.topbar-right{display:flex;gap:16px;align-items:center} /* ── HEADER ── */ header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.08)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 5%;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;gap:9px;flex-shrink:0} .nav-links{display:flex;gap:2px} .nav-links a{font-size:13px;font-weight:500;color:var(--ink-80);padding:7px 12px;border-radius:8px;transition:all .15s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{background:var(--brand-light);color:var(--brand)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:4px 10px;border-radius:30px;font-size:11px;font-weight:600} .btn-nav{background:var(--brand);color:white;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;transition:all .2s} .btn-nav:hover{background:var(--brand-dark)} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .nav-mobile{display:none;position:fixed;top:112px;left:0;right:0;bottom:0;background:white;z-index:999;overflow-y:auto;padding:24px 5%;flex-direction:column;gap:4px;transform:translateX(100%);transition:transform .3s} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{font-size:15px;font-weight:500;color:var(--ink-80);padding:12px 0;border-bottom:1px solid var(--border);display:block} /* ── BREADCRUMB ── */ .breadcrumb{padding:10px 5%;background:var(--ink-08);border-bottom:1px solid var(--border)} .bc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50)} .bc-inner a:hover{color:var(--brand)} /* ── TICKER ── */ .ticker{background:var(--ink);overflow:hidden;padding:10px 0;border-top:3px solid var(--brand)} .ticker-track{display:flex;gap:40px;animation:tick 30s linear infinite;white-space:nowrap} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} .t-item{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4)} .t-sep{color:var(--brand)} /* ══════════════════════════════════════ HERO — EXCITING VERSION ══════════════════════════════════════ */ .page-hero{ background: linear-gradient(145deg, var(--ink-08) 0%, var(--brand-light) 100%); padding: 0; overflow: hidden; position: relative; border-bottom: 1px solid var(--border); } /* Subtle dot grid matching theme */ .hero-grid-bg{ position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(212,32,46,.08) 1px, transparent 1px); background-size: 28px 28px; } /* Soft blobs — light version */ .hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none} .hero-blob-1{width:400px;height:400px;background:rgba(212,32,46,.08);top:-100px;right:-80px;animation:blobFloat 8s ease-in-out infinite} .hero-blob-2{width:300px;height:300px;background:rgba(0,82,204,.06);bottom:-80px;left:10%;animation:blobFloat 10s ease-in-out infinite reverse} @keyframes blobFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}} .ph-inner{ max-width: var(--max); margin: 0 auto; padding: 72px 5% 64px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .ph-left{} .ph-tag{ font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase; color:var(--brand);display:inline-flex;align-items:center;gap:6px; margin-bottom:18px; background:var(--brand-light); border:1px solid var(--brand-mid); padding:5px 12px;border-radius:30px; } .ph-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blink 1.5s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} .ph-inner h1{ font-size:clamp(32px,4.5vw,58px); font-weight:700;line-height:1.05; letter-spacing:-.04em; color:var(--ink); margin-bottom:20px; } .ph-inner h1 em{ font-family:var(--font-serif); font-style:italic; color:var(--brand); font-weight:400; } .ph-intro{ font-size:16px;color:var(--ink-80); line-height:1.75;font-weight:300;margin-bottom:32px; max-width:500px; } .ph-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px} .btn-hero-red{ display:inline-flex;align-items:center;gap:7px; background:var(--brand);color:white; padding:12px 24px;border-radius:8px; font-size:14px;font-weight:700; transition:all .2s; } .btn-hero-red:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,32,46,.35)} .btn-hero-ghost{ display:inline-flex;align-items:center;gap:7px; background:white; border:1.5px solid var(--border); color:var(--ink-80); padding:12px 24px;border-radius:8px; font-size:14px;font-weight:600; transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.08); } .btn-hero-ghost:hover{border-color:var(--ink-20);color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.1)} /* Stats row */ .ph-stats{ display:flex;gap:0; background:white; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); } .ph-stat{ flex:1;padding:18px 16px; border-right:1px solid var(--border); display:flex;flex-direction:column;gap:4px; transition:background .2s; } .ph-stat:last-child{border-right:none} .ph-stat:hover{background:var(--brand-light)} .ph-stat-num{ font-family:var(--font-serif); font-size:28px;font-style:italic; color:var(--brand);line-height:1; font-weight:400; } .ph-stat-lbl{font-size:11px;color:var(--ink-50);font-weight:500;line-height:1.3} /* Right side: App mosaic */ .ph-right{position:relative} .app-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .mosaic-chip{ background:white; border:1.5px solid var(--border); border-radius:12px; padding:12px 10px; display:flex;flex-direction:column;align-items:center;gap:6px; transition:all .2s; cursor:default; box-shadow:0 1px 4px rgba(0,0,0,.06); } .mosaic-chip:hover{ background:var(--brand-light); border-color:var(--brand-mid); transform:translateY(-2px); box-shadow:0 4px 12px rgba(212,32,46,.12); } .mosaic-chip img{width:28px;height:28px;object-fit:contain} .mosaic-chip span{font-size:9px;font-weight:600;color:var(--ink-50);text-align:center;line-height:1.2} .mosaic-chip.highlight{ background:var(--brand-light); border-color:var(--brand-mid); } .mosaic-chip.highlight span{color:var(--brand)} /* ══════════════════════════════════════ CATEGORY NAV ══════════════════════════════════════ */ .cat-nav{ background:white; border-bottom:1px solid var(--border); position:sticky;top:64px;z-index:100; } .cat-nav-inner{ max-width:var(--max);margin:0 auto;padding:0 5%; display:flex;gap:0;overflow-x:auto;scrollbar-width:none; } .cat-nav-inner::-webkit-scrollbar{display:none} .cat-btn{ padding:15px 18px;font-size:13px;font-weight:600; color:var(--ink-50);border-bottom:2.5px solid transparent; white-space:nowrap;cursor:pointer;transition:all .2s; background:none;border-left:none;border-right:none;border-top:none; font-family:var(--font-sans);display:flex;align-items:center;gap:5px; } .cat-btn:hover{color:var(--ink);border-bottom-color:var(--ink-20)} .cat-btn.active{color:var(--brand);border-bottom-color:var(--brand);background:var(--brand-light)} /* Count badge on tabs */ .cat-count{ font-size:10px;font-weight:700; background:var(--ink-08);color:var(--ink-50); padding:1px 6px;border-radius:10px; transition:all .2s; } .cat-btn.active .cat-count{background:var(--brand);color:white} /* ══════════════════════════════════════ CONTENT BODY ══════════════════════════════════════ */ .expertise-body{padding:0 5% 80px;background:white} .expertise-inner{max-width:var(--max);margin:0 auto} .cat-section{ padding-top:72px; scroll-margin-top:130px; /* ← KEY: sticky header + tab nav height */ } .cat-header{ display:flex;align-items:flex-start;justify-content:space-between; gap:20px;margin-bottom:32px; padding-bottom:24px;border-bottom:1px solid var(--border); } .cat-header-left{} .cat-tag{ font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px; padding:5px 12px;border-radius:30px;margin-bottom:12px; } .cat-section-title{ font-size:clamp(20px,2.2vw,28px);font-weight:700; letter-spacing:-.025em;color:var(--ink);margin-bottom:6px; } .cat-section-title em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--brand)} .cat-section-sub{font-size:14px;color:var(--ink-50);font-weight:300;line-height:1.7;max-width:520px} .cat-app-count{ flex-shrink:0; font-size:11px;font-weight:700;letter-spacing:1px; color:var(--ink-50);text-transform:uppercase; background:var(--ink-08);padding:6px 14px;border-radius:30px; align-self:flex-start;margin-top:4px; } /* ── APP GRID ── */ .app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* ── APP CARD ── */ .app-card{ background:white; border:1.5px solid var(--border); border-radius:20px;padding:22px 20px; transition:all .25s ease; display:flex;flex-direction:column; position:relative;overflow:hidden; } .app-card-accent{ position:absolute;top:0;left:0;right:0;height:3px; background:var(--cat-color,var(--brand)); transform:scaleX(0);transform-origin:left; transition:transform .3s ease; border-radius:20px 20px 0 0; } .app-card:hover{ box-shadow:0 12px 40px rgba(0,0,0,.10); transform:translateY(-4px); border-color:transparent; } .app-card:hover .app-card-accent{transform:scaleX(1)} .app-icon-wrap{ width:50px;height:50px;border-radius:12px; display:flex;align-items:center;justify-content:center; margin-bottom:14px;flex-shrink:0;overflow:hidden; background:var(--cat-bg,var(--brand-light)); } .app-icon-wrap img{width:34px;height:34px;object-fit:contain} .app-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.3px} .app-desc{font-size:12px;color:var(--ink-50);line-height:1.65;font-weight:300;flex:1} .app-link{ display:inline-flex;align-items:center;gap:4px; font-size:12px;font-weight:600;margin-top:14px; color:var(--cat-color,var(--brand)); transition:gap .2s; } .app-link:hover{gap:7px} /* Category color variables */ .cat-sales{--cat-color:#D4202E;--cat-bg:#FDF2F3} .cat-marketing{--cat-color:#E65100;--cat-bg:#FFF3E0} .cat-support{--cat-color:#0052CC;--cat-bg:#EFF6FF} .cat-finance{--cat-color:#1B7F4F;--cat-bg:#E8F5EE} .cat-collab{--cat-color:#6D28D9;--cat-bg:#F5F3FF} .cat-hr{--cat-color:#9A3412;--cat-bg:#FFF7ED} .cat-it{--cat-color:#0369A1;--cat-bg:#F0F9FF} .cat-analytics{--cat-color:#6D28D9;--cat-bg:#F5F3FF} .cat-tag-sales{background:var(--brand-light);color:var(--brand)} .cat-tag-marketing{background:var(--amber-lt);color:var(--amber)} .cat-tag-support{background:var(--blue-lt);color:var(--blue)} .cat-tag-finance{background:var(--green-lt);color:var(--green)} .cat-tag-collab{background:var(--purple-lt);color:var(--purple)} .cat-tag-hr{background:#FFF7ED;color:#9A3412} .cat-tag-it{background:#F0F9FF;color:#0369A1} .cat-tag-analytics{background:var(--purple-lt);color:var(--purple)} /* ── CTA ── */ .cta-block{background:var(--ink);padding:80px 5%;text-align:center} .cta-wrap{max-width:680px;margin:0 auto} .cta-ey{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:20px} .cta-h{font-size:clamp(26px,3vw,40px);font-weight:700;color:white;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px} .cta-h em{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .cta-sub{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:32px} .cta-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px} .cta-assur{display:flex;justify-content:center;gap:22px;flex-wrap:wrap} .cta-assur span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px} .cta-assur span::before{content:'✓';color:#34D399;font-weight:700} .btn-red{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;padding:13px 28px;border-radius:8px;font-size:15px;font-weight:700;transition:all .2s} .btn-red:hover{background:var(--brand-dark);transform:translateY(-1px)} /* ── FOOTER ── */ footer{background:#0D1117;padding:52px 5% 28px} .ft-inner{max-width:var(--max);margin:0 auto} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)} .ft-brand p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:12px;font-weight:300} .ft-chip{display:inline-block;margin-top:12px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600} .ft-social{display:flex;gap:8px;margin-top:12px} .soc-link{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s} .soc-link:hover{background:var(--brand)} .ft-col h4{font-size:12px;font-weight:700;color:white;margin-bottom:12px} .ft-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:8px;transition:color .15s;font-weight:300} .ft-col a:hover{color:white} .ft-bot{padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .ft-bot p,.ft-links a{font-size:12px;color:rgba(255,255,255,.25)} .ft-links{display:flex;gap:16px} /* ── RESPONSIVE ── */ @media(max-width:1024px){ .ph-inner{grid-template-columns:1fr} .ph-right{display:none} .app-grid{grid-template-columns:repeat(3,1fr)} .ft-top{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .app-grid{grid-template-columns:repeat(2,1fr)} .nav-links{display:none} .hamburger{display:flex} .nav-mobile{display:flex} .cat-header{flex-direction:column} } @media(max-width:480px){ .app-grid{grid-template-columns:1fr 1fr} .ph-stats{flex-wrap:wrap} .ph-stat{min-width:40%} } /* ═══ PARINAAM-FOUNDATION-CASE-STUDIES ═══ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --brand:#D4202E;--brand-dark:#B01C29;--brand-light:#FDF2F3;--brand-mid:#F9D4D6; --blue:#0052CC;--blue-lt:#E8F0FE;--green:#1B7F4F;--green-lt:#E8F5EE; --amber:#E65100;--amber-lt:#FFF3E0;--purple:#6D28D9;--purple-lt:#F5F3FF; --ink:#111827;--ink-80:#374151;--ink-50:#6B7280;--ink-20:#D1D5DB;--ink-08:#F3F4F6; --border:#E5E7EB;--white:#FFFFFF; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px; --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.1); --max:1200px; } html{scroll-behavior:smooth} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} /* ── TOPBAR ── */ .topbar{background:var(--ink);padding:8px 5%} .topbar-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .topbar a{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;transition:color .15s} .topbar a:hover{color:white} .topbar-left,.topbar-right{display:flex;gap:16px;align-items:center} /* ── HEADER ── */ header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 5%;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;flex-shrink:0} .nav-links{display:flex;gap:2px} .nav-links a{font-size:13px;font-weight:500;color:var(--ink-80);padding:7px 12px;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{background:var(--brand-light);color:var(--brand)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:4px 10px;border-radius:30px;font-size:11px;font-weight:600} .btn-nav{background:var(--brand);color:white;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:all .2s;display:inline-block} .btn-nav:hover{background:var(--brand-dark)} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .nav-mobile{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:999;overflow-y:auto;padding:80px 5% 40px;transform:translateX(100%);transition:transform .3s} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{font-size:15px;font-weight:500;color:var(--ink-80);padding:14px 0;border-bottom:1px solid var(--border);display:block} /* ── BREADCRUMB ── */ .breadcrumb{padding:10px 5%;background:var(--ink-08);border-bottom:1px solid var(--border)} .bc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50);flex-wrap:wrap} .bc-inner a:hover{color:var(--brand)} /* ══════════════════════════════════════ HERO ══════════════════════════════════════ */ .cs-hero{ background:linear-gradient(145deg,var(--ink-08) 0%,var(--brand-light) 100%); padding:0;overflow:hidden;position:relative; border-bottom:1px solid var(--border); } .cs-hero::after{ content:'';position:absolute; top:-80px;right:-80px; width:400px;height:400px; background:radial-gradient(circle,rgba(212,32,46,.07) 0%,transparent 70%); border-radius:50%;pointer-events:none; } /* Dot grid */ .cs-hero::before{ content:'';position:absolute;inset:0; background-image:radial-gradient(circle,rgba(212,32,46,.06) 1px,transparent 1px); background-size:28px 28px; } .cs-hero-inner{ max-width:var(--max);margin:0 auto; padding:56px 5% 0; position:relative;z-index:2; } /* Top badges row */ .cs-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px} .cs-badge-type{ display:inline-flex;align-items:center;gap:6px; background:var(--brand);color:white; font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase; padding:5px 14px;border-radius:30px; } .cs-badge{ display:inline-flex;align-items:center;gap:5px; background:white;color:var(--ink-80); border:1px solid var(--border); font-size:11px;font-weight:600; padding:4px 12px;border-radius:20px; } .cs-badge.green{background:var(--green-lt);border-color:rgba(27,127,79,.2);color:var(--green)} .cs-badge.blue{background:var(--blue-lt);border-color:rgba(0,82,204,.2);color:var(--blue)} .cs-badge.purple{background:var(--purple-lt);border-color:rgba(109,40,217,.2);color:var(--purple)} /* Title */ .cs-title{ font-size:clamp(28px,4vw,54px); font-weight:700;line-height:1.08; letter-spacing:-.04em;color:var(--ink); margin-bottom:18px;max-width:880px; } .cs-title em{ font-family:var(--font-serif);font-style:italic; color:var(--brand);font-weight:400; } /* Subtitle */ .cs-subtitle{ font-size:17px;color:var(--ink-80);font-weight:300; line-height:1.75;max-width:680px;margin-bottom:32px; } /* Meta row */ .cs-meta{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; padding:18px 0;border-top:1px solid var(--border); } .cs-meta-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-50)} .cs-meta-item strong{color:var(--ink);font-weight:600} .cs-meta-sep{width:1px;height:16px;background:var(--border)} /* Stats strip (dark bar) */ .cs-stats-strip{ background:var(--ink); margin-top:36px; border-radius:16px 16px 0 0; padding:28px 32px; display:grid;grid-template-columns:repeat(4,1fr); position:relative;z-index:2; } .css-stat{ text-align:center; border-right:1px solid rgba(255,255,255,.08); padding:0 16px; } .css-stat:first-child{padding-left:0} .css-stat:last-child{border-right:none;padding-right:0} .css-num{ font-family:var(--font-serif); font-size:36px;font-style:italic; color:var(--brand);line-height:1; font-weight:400;margin-bottom:5px; } .css-label{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;line-height:1.4} /* ══════════════════════════════════════ PROJECT INFO BAR ══════════════════════════════════════ */ .project-bar{ background:white;border-bottom:1px solid var(--border); padding:22px 5%; } .pb-inner{ max-width:var(--max);margin:0 auto; display:grid;grid-template-columns:repeat(5,1fr);gap:0; } .pb-item{ padding:0 20px;border-right:1px solid var(--border); display:flex;flex-direction:column;gap:4px; } .pb-item:first-child{padding-left:0} .pb-item:last-child{border-right:none} .pb-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50)} .pb-value{font-size:13px;font-weight:600;color:var(--ink)} .pb-value .tag{ display:inline-flex;align-items:center;gap:4px; font-size:11px;font-weight:700; padding:2px 8px;border-radius:20px; background:var(--green-lt);color:var(--green); } /* ══════════════════════════════════════ MAIN LAYOUT ══════════════════════════════════════ */ .cs-body{ max-width:var(--max);margin:0 auto; padding:52px 5% 80px; display:grid; grid-template-columns:1fr 300px; gap:52px;align-items:start; } .cs-article{} /* ── Reading progress ── */ .reading-bar{position:fixed;top:64px;left:0;right:0;height:3px;background:var(--border);z-index:400} .reading-progress{height:100%;background:var(--brand);width:0%;transition:width .1s linear} /* ══════════════════════════════════════ ARTICLE TYPOGRAPHY ══════════════════════════════════════ */ .cs-article h2{ font-size:clamp(19px,2vw,25px); font-weight:700;letter-spacing:-.025em; color:var(--ink);margin:48px 0 16px; padding-top:8px;scroll-margin-top:130px; display:flex;align-items:center;gap:10px; } .cs-article h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cs-article h2 .h2-icon{ width:36px;height:36px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:18px;flex-shrink:0; } .cs-article h3{font-size:16px;font-weight:700;color:var(--ink);margin:24px 0 10px;letter-spacing:-.015em} .cs-article p{font-size:15px;color:var(--ink-80);line-height:1.85;font-weight:300;margin-bottom:18px} .cs-article strong{font-weight:600;color:var(--ink)} /* Section divider */ .sec-div{height:1px;background:var(--border);margin:8px 0 0} /* ── Challenge cards ── */ .challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .ch-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-lg);padding:18px; display:flex;gap:12px;align-items:flex-start; transition:all .2s; } .ch-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand-mid);transform:translateY(-2px)} .ch-num{ width:28px;height:28px;border-radius:8px; background:var(--brand-light);color:var(--brand); font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:1px; } .ch-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px} .ch-desc{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* ── Solution feature cards ── */ .sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .sol-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-lg);padding:20px; position:relative;overflow:hidden;transition:all .2s; } .sol-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--sol-color,var(--brand)); } .sol-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:transparent} .sol-icon{font-size:22px;margin-bottom:10px} .sol-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .sol-desc{font-size:12px;color:var(--ink-50);line-height:1.65;font-weight:300} /* ── Approval workflow visual ── */ .workflow-viz{ background:var(--ink);border-radius:var(--r-xl); padding:28px;margin:28px 0;position:relative;overflow:hidden; } .workflow-viz::before{ content:'';position:absolute;top:-60px;right:-60px; width:200px;height:200px; background:radial-gradient(circle,rgba(212,32,46,.15) 0%,transparent 70%); border-radius:50%; } .wf-label{ font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:rgba(255,255,255,.35);margin-bottom:20px; display:flex;align-items:center;gap:6px; } .wf-label::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brand);animation:blk 1.5s infinite} @keyframes blk{0%,100%{opacity:1}50%{opacity:.3}} .wf-steps{display:flex;align-items:center;gap:0} .wf-step{ flex:1;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px;padding:16px 14px; text-align:center;position:relative; } .wf-step-icon{font-size:24px;margin-bottom:8px} .wf-step-title{font-size:11px;font-weight:700;color:white;line-height:1.3} .wf-step-role{font-size:10px;color:rgba(255,255,255,.35);margin-top:3px;font-weight:400} .wf-arrow{ flex-shrink:0;width:32px;display:flex;align-items:center;justify-content:center; font-size:16px;color:var(--brand); } .wf-status{ display:flex;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap; } .wf-status-item{ display:flex;align-items:center;gap:6px; font-size:11px;color:rgba(255,255,255,.4); } .wf-dot{width:8px;height:8px;border-radius:50%} /* ── Checklist ── */ .checklist{display:flex;flex-direction:column;gap:10px;margin:16px 0 24px} .checklist li{ display:flex;align-items:flex-start;gap:10px; font-size:14px;color:var(--ink-80);font-weight:300;line-height:1.6; } .checklist li::before{ content:'✓';width:20px;height:20px;border-radius:50%; background:var(--green-lt);color:var(--green); font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:2px; } /* ── Implementation phases ── */ .phases{display:flex;flex-direction:column;gap:0;margin:24px 0} .phase{ display:flex;gap:20px;align-items:stretch; padding-bottom:24px;position:relative; } .phase:last-child{padding-bottom:0} .phase-left{display:flex;flex-direction:column;align-items:center;width:40px;flex-shrink:0} .phase-dot{ width:40px;height:40px;border-radius:50%; background:var(--brand);color:white; font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;box-shadow:0 0 0 4px var(--brand-light); } .phase-line{ width:2px;flex:1;background:var(--border); margin:8px 0 0; } .phase:last-child .phase-line{display:none} .phase-body{ background:white;border:1.5px solid var(--border); border-radius:var(--r-lg);padding:18px 20px; flex:1;transition:all .2s; } .phase-body:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-sm)} .phase-name{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px} .phase-tag{font-size:10px;font-weight:600;background:var(--brand-light);color:var(--brand);padding:2px 8px;border-radius:10px} .phase-items{display:flex;flex-direction:column;gap:4px} .phase-item{font-size:12px;color:var(--ink-50);display:flex;align-items:flex-start;gap:6px;font-weight:300;line-height:1.5} .phase-item::before{content:'→';color:var(--brand);font-weight:700;flex-shrink:0} /* ── Unique ID system visual ── */ .id-visual{ background:var(--ink-08);border:1px solid var(--border); border-radius:var(--r-lg);padding:20px;margin:20px 0; } .id-visual-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:12px} .id-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .id-box{ background:white;border:1.5px solid var(--border); border-radius:8px;padding:8px 14px; font-size:12px;font-weight:600;color:var(--ink); } .id-box.key{ background:var(--brand);color:white;border-color:var(--brand); font-family:monospace;font-size:13px;letter-spacing:.5px; } .id-box.subform{ background:var(--blue-lt);border-color:rgba(0,82,204,.2);color:var(--blue); } .id-arrow-sm{font-size:14px;color:var(--ink-20)} /* ── Results grid ── */ .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0} .res-card{ background:white;border:1.5px solid var(--border); border-radius:var(--r-xl);padding:22px 18px; text-align:center;position:relative;overflow:hidden; transition:all .2s; } .res-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--res-color,var(--brand)); } .res-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .res-icon{font-size:28px;margin-bottom:10px} .res-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px} .res-desc{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* ── Highlights list ── */ .highlights{display:flex;flex-direction:column;gap:10px;margin:20px 0} .hl-item{ display:flex;align-items:flex-start;gap:12px; background:white;border:1px solid var(--border); border-radius:10px;padding:14px 16px; transition:all .15s; } .hl-item:hover{border-color:var(--brand-mid);background:var(--brand-light)} .hl-icon{font-size:18px;flex-shrink:0;margin-top:1px} .hl-body strong{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:3px} .hl-body span{font-size:12px;color:var(--ink-50);font-weight:300;line-height:1.5} /* ── Next steps ── */ .next-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0} .ns-item{ display:flex;align-items:flex-start;gap:10px; background:var(--ink-08);border-radius:10px; padding:14px;border:1px solid var(--border); } .ns-num{ width:24px;height:24px;border-radius:6px; background:var(--brand);color:white; font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:1px; } .ns-text{font-size:12px;color:var(--ink-80);font-weight:400;line-height:1.55} /* ── Pull quote ── */ .pull-quote{ border-left:4px solid var(--brand); background:var(--brand-light); padding:22px 26px;border-radius:0 var(--r-lg) var(--r-lg) 0; margin:28px 0; } .pull-quote p{ font-family:var(--font-serif);font-size:19px; font-style:italic;color:var(--ink);line-height:1.55; margin-bottom:8px;font-weight:400; } .pull-quote cite{font-size:12px;font-weight:600;color:var(--brand);font-style:normal;display:flex;align-items:center;gap:6px} .pull-quote cite::before{content:'—'} /* ── Article tags ── */ .article-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--border);margin-top:36px} .article-tags span{font-size:12px;font-weight:600;color:var(--ink-50)} .a-tag{background:var(--ink-08);color:var(--ink-80);border:1px solid var(--border);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;transition:all .15s} .a-tag:hover{background:var(--brand-light);border-color:var(--brand-mid);color:var(--brand)} /* ══════════════════════════════════════ SIDEBAR ══════════════════════════════════════ */ .cs-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px} .toc-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-sm)} .toc-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .toc-list{display:block;flex-direction:column;gap:2px} .toc-link{display:block;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-80);transition:all .2s;text-decoration:none} .toc-card{text-align:left} .toc-link:hover,.toc-link.active{background:var(--brand-light);color:var(--brand)} .toc-link::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.3;flex-shrink:0} .toc-link.active::before{opacity:1} /* Project snapshot */ .snapshot-card{background:var(--ink-08);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px} .snapshot-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .snap-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)} .snap-row:last-child{border-bottom:none} .snap-label{font-size:12px;color:var(--ink-50);font-weight:400} .snap-val{font-size:12px;font-weight:600;color:var(--ink);text-align:right;max-width:160px} .snap-val .chip{display:inline-block;background:var(--green-lt);color:var(--green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px} /* CTA sidebar */ .cta-sidebar{background:var(--ink);border-radius:var(--r-xl);padding:24px;overflow:hidden;position:relative} .cta-sidebar::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(212,32,46,.2) 0%,transparent 70%);border-radius:50%} .cta-sidebar-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:6px} .cta-sidebar-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);animation:blk 1.5s infinite} .cta-sidebar h3{font-size:17px;font-weight:700;color:white;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px} .cta-sidebar h3 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cta-sidebar p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65;font-weight:300;margin-bottom:16px} .btn-sb-red{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:white;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:700;transition:all .2s;width:100%;position:relative;z-index:2;margin-bottom:8px} .btn-sb-red:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-sb-outline{display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;transition:all .2s;width:100%;position:relative;z-index:2} .btn-sb-outline:hover{border-color:rgba(255,255,255,.4);color:white} .sb-assur{display:flex;flex-direction:column;gap:5px;margin-top:14px;position:relative;z-index:2} .sb-assur span{font-size:11px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px} .sb-assur span::before{content:'✓';color:#34D399;font-weight:700} /* Tools used card */ .tools-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px} .tools-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .tool-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:1px solid var(--border);margin-bottom:8px;transition:all .15s} .tool-item:last-child{margin-bottom:0} .tool-item:hover{border-color:var(--brand-mid);background:var(--brand-light)} .tool-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .tool-name{font-size:13px;font-weight:600;color:var(--ink)} .tool-sub{font-size:11px;color:var(--ink-50);font-weight:300} /* ══════════════════════════════════════ MORE CASE STUDIES ══════════════════════════════════════ */ .more-cs-sec{background:var(--ink-08);border-top:1px solid var(--border);padding:60px 5%} .mcs-inner{max-width:var(--max);margin:0 auto} .mcs-header{margin-bottom:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .mcs-header h2{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.025em} .mcs-header h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .mcs-header a{font-size:13px;font-weight:600;color:var(--brand)} .mcs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .mcs-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:all .25s;display:flex;flex-direction:column} .mcs-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent} .mcs-cover{height:140px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative} .mcs-cover-1{background:linear-gradient(135deg,#EFF6FF,#DBEAFE)} .mcs-cover-2{background:linear-gradient(135deg,#F0FDF4,#DCFCE7)} .mcs-body{padding:20px;flex:1;display:flex;flex-direction:column} .mcs-industry{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin-bottom:8px} .mcs-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.02em;margin-bottom:8px} .mcs-desc{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300;flex:1} .mcs-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .mcs-tools{display:flex;gap:6px} .mcs-tool-tag{font-size:10px;font-weight:600;background:var(--blue-lt);color:var(--blue);padding:2px 8px;border-radius:10px;border:1px solid rgba(0,82,204,.15)} .mcs-read{font-size:12px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:4px;transition:gap .15s} .mcs-card:hover .mcs-read{gap:7px} /* ══════════════════════════════════════ BOTTOM CTA ══════════════════════════════════════ */ .bottom-cta{background:var(--ink);padding:72px 5%;text-align:center} .btm-wrap{max-width:620px;margin:0 auto} .btm-ey{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:20px} .btm-title{font-size:clamp(24px,3vw,38px);font-weight:700;color:white;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px} .btm-title em{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .btm-sub{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:28px} .btm-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .btm-assur{display:flex;justify-content:center;gap:20px;flex-wrap:wrap} .btm-assur span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px} .btm-assur span::before{content:'✓';color:#34D399;font-weight:700} .btn-red-lg{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:700;transition:all .2s} .btn-red-lg:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-ghost-lg{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:600;transition:all .2s} .btn-ghost-lg:hover{border-color:rgba(255,255,255,.5);color:white} /* ── FOOTER ── */ footer{background:#0D1117;padding:52px 5% 28px} .ft-inner{max-width:var(--max);margin:0 auto} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)} .ft-brand p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:12px;font-weight:300} .ft-chip{display:inline-block;margin-top:12px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600} .ft-social{display:flex;gap:8px;margin-top:12px} .soc-link{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s} .soc-link:hover{background:var(--brand)} .ft-col h4{font-size:12px;font-weight:700;color:white;margin-bottom:12px} .ft-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:8px;transition:color .15s;font-weight:300} .ft-col a:hover{color:white} .ft-bot{padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .ft-bot p,.ft-links a{font-size:12px;color:rgba(255,255,255,.25)} .ft-links{display:flex;gap:16px} /* ── RESPONSIVE ── */ @media(max-width:1024px){ .cs-body{grid-template-columns:1fr} .cs-sidebar{position:static} .cs-stats-strip{grid-template-columns:repeat(2,1fr)} .css-stat:nth-child(2){border-right:none} .css-stat:nth-child(3){border-top:1px solid rgba(255,255,255,.08);padding-top:16px} .css-stat:nth-child(4){border-top:1px solid rgba(255,255,255,.08);padding-top:16px;border-right:none} .pb-inner{grid-template-columns:1fr 1fr 1fr} .ft-top{grid-template-columns:1fr 1fr} .mcs-grid{grid-template-columns:1fr} .results-grid{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .nav-links{display:none} .hamburger{display:flex} .challenge-grid,.sol-grid,.next-steps{grid-template-columns:1fr} .wf-steps{flex-direction:column;gap:10px} .wf-arrow{transform:rotate(90deg)} .pb-inner{grid-template-columns:1fr 1fr} .results-grid{grid-template-columns:1fr} .cs-stats-strip{grid-template-columns:repeat(2,1fr);gap:16px;padding:20px} .cs-stats-strip .css-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:16px} .cs-stats-strip .css-stat:nth-child(even){border-bottom:none;padding-bottom:0} } /* ═══ SCIMPLIFY-CASE-STUDIES ═══ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --brand:#D4202E;--brand-dark:#B01C29;--brand-light:#FDF2F3;--brand-mid:#F9D4D6; --blue:#0052CC;--blue-lt:#E8F0FE;--green:#1B7F4F;--green-lt:#E8F5EE; --amber:#E65100;--amber-lt:#FFF3E0;--purple:#6D28D9;--purple-lt:#F5F3FF; --ink:#111827;--ink-80:#374151;--ink-50:#6B7280;--ink-20:#D1D5DB;--ink-08:#F3F4F6; --border:#E5E7EB;--white:#FFFFFF; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px; --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.1); --max:1200px; } html{scroll-behavior:smooth} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} /* TOPBAR */ .topbar{background:var(--ink);padding:8px 5%} .topbar-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .topbar a{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;transition:color .15s} .topbar a:hover{color:white} .topbar-left,.topbar-right{display:flex;gap:16px;align-items:center} /* HEADER */ header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 5%;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;flex-shrink:0} .nav-links{display:flex;gap:2px} .nav-links a{font-size:13px;font-weight:500;color:var(--ink-80);padding:7px 12px;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{background:var(--brand-light);color:var(--brand)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:4px 10px;border-radius:30px;font-size:11px;font-weight:600} .btn-nav{background:var(--brand);color:white;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:all .2s;display:inline-block} .btn-nav:hover{background:var(--brand-dark)} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .nav-mobile{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:999;overflow-y:auto;padding:80px 5% 40px;transform:translateX(100%);transition:transform .3s} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{font-size:15px;font-weight:500;color:var(--ink-80);padding:14px 0;border-bottom:1px solid var(--border);display:block} /* BREADCRUMB */ .breadcrumb{padding:10px 5%;background:var(--ink-08);border-bottom:1px solid var(--border)} .bc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50);flex-wrap:wrap} .bc-inner a:hover{color:var(--brand)} /* ══ HERO ══ */ .cs-hero{background:linear-gradient(145deg,var(--ink-08) 0%,var(--brand-light) 100%);padding:0;overflow:hidden;position:relative;border-bottom:1px solid var(--border)} .cs-hero::after{content:'';position:absolute;top:-80px;right:-80px;width:400px;height:400px;background:radial-gradient(circle,rgba(212,32,46,.07) 0%,transparent 70%);border-radius:50%;pointer-events:none} .cs-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(212,32,46,.06) 1px,transparent 1px);background-size:28px 28px} .cs-hero-inner{max-width:var(--max);margin:0 auto;padding:56px 5% 0;position:relative;z-index:2} .cs-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px} .cs-badge-type{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:white;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:30px} .cs-badge{display:inline-flex;align-items:center;gap:5px;background:white;color:var(--ink-80);border:1px solid var(--border);font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px} .cs-badge.green{background:var(--green-lt);border-color:rgba(27,127,79,.2);color:var(--green)} .cs-badge.blue{background:var(--blue-lt);border-color:rgba(0,82,204,.2);color:var(--blue)} .cs-badge.amber{background:var(--amber-lt);border-color:rgba(230,81,0,.2);color:var(--amber)} .cs-title{font-size:clamp(28px,4vw,54px);font-weight:700;line-height:1.08;letter-spacing:-.04em;color:var(--ink);margin-bottom:18px;max-width:900px} .cs-title em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cs-subtitle{font-size:17px;color:var(--ink-80);font-weight:300;line-height:1.75;max-width:700px;margin-bottom:32px} .cs-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--border)} .cs-meta-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-50)} .cs-meta-item strong{color:var(--ink);font-weight:600} .cs-meta-sep{width:1px;height:16px;background:var(--border)} /* Stats strip */ .cs-stats-strip{background:var(--ink);margin-top:36px;border-radius:16px 16px 0 0;padding:28px 32px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2} .css-stat{text-align:center;border-right:1px solid rgba(255,255,255,.08);padding:0 16px} .css-stat:first-child{padding-left:0} .css-stat:last-child{border-right:none;padding-right:0} .css-num{font-family:var(--font-serif);font-size:36px;font-style:italic;color:var(--brand);line-height:1;font-weight:400;margin-bottom:5px} .css-label{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;line-height:1.4} /* PROJECT BAR */ .project-bar{background:white;border-bottom:1px solid var(--border);padding:22px 5%} .pb-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0} .pb-item{padding:0 20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px} .pb-item:first-child{padding-left:0} .pb-item:last-child{border-right:none} .pb-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50)} .pb-value{font-size:13px;font-weight:600;color:var(--ink)} .pb-value .tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--green-lt);color:var(--green)} /* LAYOUT */ .cs-body{max-width:var(--max);margin:0 auto;padding:52px 5% 80px;display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start} /* Reading bar */ .reading-bar{position:fixed;top:64px;left:0;right:0;height:3px;background:var(--border);z-index:400} .reading-progress{height:100%;background:var(--brand);width:0%;transition:width .1s linear} /* ══ ARTICLE TYPOGRAPHY ══ */ .cs-article h2{font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.025em;color:var(--ink);margin:48px 0 16px;padding-top:8px;scroll-margin-top:130px;display:flex;align-items:center;gap:10px} .cs-article h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cs-article h2 .h2-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .cs-article h3{font-size:16px;font-weight:700;color:var(--ink);margin:26px 0 10px;letter-spacing:-.015em} .cs-article p{font-size:15px;color:var(--ink-80);line-height:1.85;font-weight:300;margin-bottom:18px} .cs-article strong{font-weight:600;color:var(--ink)} .sec-div{height:1px;background:var(--border);margin:8px 0 0} /* Challenge cards */ .challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .ch-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;gap:12px;align-items:flex-start;transition:all .2s} .ch-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand-mid);transform:translateY(-2px)} .ch-num{width:28px;height:28px;border-radius:8px;background:var(--brand-light);color:var(--brand);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .ch-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px} .ch-desc{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* Before / After comparison */ .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0} .ba-col{border-radius:var(--r-xl);padding:22px;border:1.5px solid var(--border)} .ba-col.before{background:#FFF5F5;border-color:#FECACA} .ba-col.after{background:var(--green-lt);border-color:rgba(27,127,79,.2)} .ba-head{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:6px} .ba-col.before .ba-head{color:#DC2626} .ba-col.after .ba-head{color:var(--green)} .ba-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.55;font-weight:300;margin-bottom:9px;color:var(--ink-80)} .ba-col.before .ba-item::before{content:'✗';color:#DC2626;font-weight:700;flex-shrink:0} .ba-col.after .ba-item::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0} /* Solution cards */ .sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .sol-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden;transition:all .2s} .sol-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sol-color,var(--brand))} .sol-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:transparent} .sol-icon{font-size:22px;margin-bottom:10px} .sol-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .sol-desc{font-size:12px;color:var(--ink-50);line-height:1.65;font-weight:300} /* Pipeline visual */ .pipeline-viz{background:var(--ink);border-radius:var(--r-xl);padding:28px;margin:28px 0;position:relative;overflow:hidden} .pipeline-viz::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(212,32,46,.15) 0%,transparent 70%);border-radius:50%} .pv-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:20px;display:flex;align-items:center;gap:6px} .pv-label::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--brand);animation:blk 1.5s infinite} @keyframes blk{0%,100%{opacity:1}50%{opacity:.3}} .pipeline-stages{display:flex;align-items:stretch;gap:0;margin-bottom:20px} .ps-stage{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:14px 10px;text-align:center;position:relative;transition:background .2s} .ps-stage:first-child{border-radius:10px 0 0 10px} .ps-stage:last-child{border-radius:0 10px 10px 0;background:rgba(212,32,46,.15);border-color:rgba(212,32,46,.35)} .ps-stage:hover{background:rgba(255,255,255,.1)} .ps-icon{font-size:20px;margin-bottom:6px} .ps-name{font-size:10px;font-weight:700;color:white;line-height:1.3} .ps-arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--brand);z-index:2} .ps-stage:last-child .ps-arrow{display:none} .pipeline-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px} .pr-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;display:flex;gap:8px;align-items:flex-start} .pr-icon{font-size:14px;flex-shrink:0} .pr-text{font-size:11px;color:rgba(255,255,255,.45);line-height:1.5;font-weight:300} /* Automation flow */ .auto-flow{margin:20px 0 28px;display:flex;flex-direction:column;gap:0} .af-item{display:flex;gap:16px;align-items:stretch;padding-bottom:18px;position:relative} .af-item:last-child{padding-bottom:0} .af-left{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0} .af-dot{width:36px;height:36px;border-radius:50%;background:var(--brand);color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px var(--brand-light)} .af-line{width:2px;flex:1;background:var(--border);margin:6px 0 0} .af-item:last-child .af-line{display:none} .af-body{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;flex:1;transition:all .2s} .af-body:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-sm)} .af-trigger{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin-bottom:4px} .af-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px} .af-desc{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* Results table */ .results-table{width:100%;border-collapse:collapse;margin:24px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .results-table th{background:var(--ink);color:white;font-size:12px;font-weight:600;padding:14px 18px;text-align:left;letter-spacing:.3px} .results-table td{padding:13px 18px;font-size:14px;color:var(--ink-80);border-bottom:1px solid var(--border);font-weight:300} .results-table tr:last-child td{border-bottom:none} .results-table tr:nth-child(even) td{background:var(--ink-08)} .td-before{color:var(--brand);font-weight:600} .td-after{color:var(--green);font-weight:600} .td-change{font-weight:700;color:var(--ink)} /* Results grid */ .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0} .res-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px 18px;text-align:center;position:relative;overflow:hidden;transition:all .2s} .res-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--res-color,var(--brand))} .res-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .res-num{font-family:var(--font-serif);font-size:36px;font-style:italic;color:var(--res-color,var(--brand));line-height:1;margin-bottom:6px} .res-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px} .res-desc{font-size:11px;color:var(--ink-50);line-height:1.55;font-weight:300} /* Checklist */ .checklist{display:flex;flex-direction:column;gap:10px;margin:16px 0 24px} .checklist li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-80);font-weight:300;line-height:1.6} .checklist li::before{content:'✓';width:20px;height:20px;border-radius:50%;background:var(--green-lt);color:var(--green);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px} /* Implementation phases */ .phases{display:flex;flex-direction:column;gap:0;margin:24px 0} .phase{display:flex;gap:20px;align-items:stretch;padding-bottom:24px;position:relative} .phase:last-child{padding-bottom:0} .phase-left{display:flex;flex-direction:column;align-items:center;width:40px;flex-shrink:0} .phase-dot{width:40px;height:40px;border-radius:50%;background:var(--brand);color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px var(--brand-light)} .phase-line{width:2px;flex:1;background:var(--border);margin:8px 0 0} .phase:last-child .phase-line{display:none} .phase-body{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;flex:1;transition:all .2s} .phase-body:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-sm)} .phase-name{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .phase-tag{font-size:10px;font-weight:600;background:var(--brand-light);color:var(--brand);padding:2px 8px;border-radius:10px} .phase-items{display:flex;flex-direction:column;gap:4px} .phase-item{font-size:12px;color:var(--ink-50);display:flex;align-items:flex-start;gap:6px;font-weight:300;line-height:1.5} .phase-item::before{content:'→';color:var(--brand);font-weight:700;flex-shrink:0} /* Pull quote */ .pull-quote{border-left:4px solid var(--brand);background:var(--brand-light);padding:22px 26px;border-radius:0 var(--r-lg) var(--r-lg) 0;margin:28px 0} .pull-quote p{font-family:var(--font-serif);font-size:20px;font-style:italic;color:var(--ink);line-height:1.55;margin-bottom:8px;font-weight:400} .pull-quote cite{font-size:12px;font-weight:600;color:var(--brand);font-style:normal;display:flex;align-items:center;gap:6px} .pull-quote cite::before{content:'—'} /* Highlights */ .highlights{display:flex;flex-direction:column;gap:10px;margin:20px 0} .hl-item{display:flex;align-items:flex-start;gap:12px;background:white;border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all .15s} .hl-item:hover{border-color:var(--brand-mid);background:var(--brand-light)} .hl-icon{font-size:18px;flex-shrink:0;margin-top:1px} .hl-body strong{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:3px} .hl-body span{font-size:12px;color:var(--ink-50);font-weight:300;line-height:1.5} /* Info box */ .info-box{background:var(--blue-lt);border:1px solid rgba(0,82,204,.15);border-radius:var(--r-lg);padding:20px 22px;margin:24px 0;display:flex;gap:13px} .info-box-icon{font-size:20px;flex-shrink:0;margin-top:2px} .info-box-body h4{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:5px} .info-box-body p{font-size:13px;color:var(--ink-80);line-height:1.7;margin-bottom:0;font-weight:300} /* Article tags */ .article-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--border);margin-top:36px} .article-tags span{font-size:12px;font-weight:600;color:var(--ink-50)} .a-tag{background:var(--ink-08);color:var(--ink-80);border:1px solid var(--border);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;transition:all .15s} .a-tag:hover{background:var(--brand-light);border-color:var(--brand-mid);color:var(--brand)} /* ══ SIDEBAR ══ */ .cs-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px} .toc-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-sm)} .toc-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .toc-list{display:block;flex-direction:column;gap:2px} .toc-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-80);transition:all .2s;text-decoration:none} .toc-card{text-align:left} .toc-link:hover,.toc-link.active{background:var(--brand-light);color:var(--brand)} .toc-link::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.3;flex-shrink:0} .toc-link.active::before{opacity:1} .snapshot-card{background:var(--ink-08);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px} .snapshot-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .snap-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)} .snap-row:last-child{border-bottom:none} .snap-label{font-size:12px;color:var(--ink-50);font-weight:400} .snap-val{font-size:12px;font-weight:600;color:var(--ink);text-align:right;max-width:160px} .snap-val .chip{display:inline-block;background:var(--green-lt);color:var(--green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px} .cta-sidebar{background:var(--ink);border-radius:var(--r-xl);padding:24px;overflow:hidden;position:relative} .cta-sidebar::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(212,32,46,.2) 0%,transparent 70%);border-radius:50%} .cta-sidebar-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:6px} .cta-sidebar-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);animation:blk 1.5s infinite} .cta-sidebar h3{font-size:17px;font-weight:700;color:white;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px} .cta-sidebar h3 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cta-sidebar p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65;font-weight:300;margin-bottom:16px} .btn-sb-red{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:white;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:700;transition:all .2s;width:100%;position:relative;z-index:2;margin-bottom:8px} .btn-sb-red:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-sb-outline{display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;transition:all .2s;width:100%;position:relative;z-index:2} .btn-sb-outline:hover{border-color:rgba(255,255,255,.4);color:white} .sb-assur{display:flex;flex-direction:column;gap:5px;margin-top:14px;position:relative;z-index:2} .sb-assur span{font-size:11px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px} .sb-assur span::before{content:'✓';color:#34D399;font-weight:700} .tools-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px} .tools-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .tool-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:1px solid var(--border);margin-bottom:8px;transition:all .15s} .tool-item:last-child{margin-bottom:0} .tool-item:hover{border-color:var(--brand-mid);background:var(--brand-light)} .tool-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .tool-name{font-size:13px;font-weight:600;color:var(--ink)} .tool-sub{font-size:11px;color:var(--ink-50);font-weight:300} /* ══ MORE CASE STUDIES ══ */ .more-cs-sec{background:var(--ink-08);border-top:1px solid var(--border);padding:60px 5%} .mcs-inner{max-width:var(--max);margin:0 auto} .mcs-header{margin-bottom:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .mcs-header h2{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.025em} .mcs-header h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .mcs-header a{font-size:13px;font-weight:600;color:var(--brand)} .mcs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .mcs-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:all .25s;display:flex;flex-direction:column} .mcs-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent} .mcs-cover{height:140px;display:flex;align-items:center;justify-content:center;font-size:44px} .mcs-cover-1{background:linear-gradient(135deg,#EFF6FF,#DBEAFE)} .mcs-cover-2{background:linear-gradient(135deg,#F0FDF4,#DCFCE7)} .mcs-body{padding:20px;flex:1;display:flex;flex-direction:column} .mcs-industry{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin-bottom:8px} .mcs-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.02em;margin-bottom:8px;display:block} .mcs-title:hover{color:var(--brand)} .mcs-desc{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300;flex:1} .mcs-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .mcs-tools{display:flex;gap:6px} .mcs-tool-tag{font-size:10px;font-weight:600;background:var(--blue-lt);color:var(--blue);padding:2px 8px;border-radius:10px;border:1px solid rgba(0,82,204,.15)} .mcs-read{font-size:12px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:4px;transition:gap .15s} .mcs-card:hover .mcs-read{gap:7px} /* BOTTOM CTA */ .bottom-cta{background:var(--ink);padding:72px 5%;text-align:center} .btm-wrap{max-width:620px;margin:0 auto} .btm-ey{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:20px} .btm-title{font-size:clamp(24px,3vw,38px);font-weight:700;color:white;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px} .btm-title em{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .btm-sub{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:28px} .btm-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .btm-assur{display:flex;justify-content:center;gap:20px;flex-wrap:wrap} .btm-assur span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px} .btm-assur span::before{content:'✓';color:#34D399;font-weight:700} .btn-red-lg{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:700;transition:all .2s} .btn-red-lg:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-ghost-lg{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:600;transition:all .2s} .btn-ghost-lg:hover{border-color:rgba(255,255,255,.5);color:white} /* FOOTER */ footer{background:#0D1117;padding:52px 5% 28px} .ft-inner{max-width:var(--max);margin:0 auto} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)} .ft-brand p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:12px;font-weight:300} .ft-chip{display:inline-block;margin-top:12px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600} .ft-social{display:flex;gap:8px;margin-top:12px} .soc-link{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s} .soc-link:hover{background:var(--brand)} .ft-col h4{font-size:12px;font-weight:700;color:white;margin-bottom:12px} .ft-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:8px;transition:color .15s;font-weight:300} .ft-col a:hover{color:white} .ft-bot{padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .ft-bot p,.ft-links a{font-size:12px;color:rgba(255,255,255,.25)} .ft-links{display:flex;gap:16px} /* RESPONSIVE */ @media(max-width:1024px){ .cs-body{grid-template-columns:1fr} .cs-sidebar{position:static} .cs-stats-strip{grid-template-columns:repeat(2,1fr);gap:12px;padding:20px} .css-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px} .css-stat:nth-child(even){border-bottom:none} .pb-inner{grid-template-columns:1fr 1fr 1fr} .ft-top{grid-template-columns:1fr 1fr} .results-grid{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .nav-links{display:none} .hamburger{display:flex} .challenge-grid,.sol-grid,.ba-grid,.pipeline-rules{grid-template-columns:1fr} .pipeline-stages{flex-direction:column;gap:6px} .ps-stage{border-radius:8px} .ps-arrow{display:none} .pb-inner{grid-template-columns:1fr 1fr} .results-grid{grid-template-columns:1fr} .mcs-grid{grid-template-columns:1fr} } @media(max-width:480px){ .results-table{font-size:12px} .results-table th,.results-table td{padding:10px 12px} } /* ═══ ZOHO-ONE-IMPLEMENTATION-FOR-A-REAL-ESTATE-GROUP ═══ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --brand:#D4202E;--brand-dark:#B01C29;--brand-light:#FDF2F3;--brand-mid:#F9D4D6; --blue:#0052CC;--blue-lt:#E8F0FE;--green:#1B7F4F;--green-lt:#E8F5EE; --amber:#E65100;--amber-lt:#FFF3E0;--purple:#6D28D9;--purple-lt:#F5F3FF; --ink:#111827;--ink-80:#374151;--ink-50:#6B7280;--ink-20:#D1D5DB;--ink-08:#F3F4F6; --border:#E5E7EB;--white:#FFFFFF; --font-sans:'IBM Plex Sans',system-ui,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px; --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.1); --max:1200px; } html{scroll-behavior:smooth} body{font-family:var(--font-sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} /* TOPBAR */ .topbar{background:var(--ink);padding:8px 5%} .topbar-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px} .topbar a{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;transition:color .15s} .topbar a:hover{color:white} .topbar-left,.topbar-right{display:flex;gap:16px;align-items:center} /* HEADER */ header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)} .nav-wrap{max-width:var(--max);margin:0 auto;padding:0 5%;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;flex-shrink:0} .nav-links{display:flex;gap:2px} .nav-links a{font-size:13px;font-weight:500;color:var(--ink-80);padding:7px 12px;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{background:var(--brand-light);color:var(--brand)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .partner-chip{background:var(--blue-lt);color:var(--blue);border:1px solid rgba(0,82,204,.2);padding:4px 10px;border-radius:30px;font-size:11px;font-weight:600} .btn-nav{background:var(--brand);color:white;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:all .2s;display:inline-block} .btn-nav:hover{background:var(--brand-dark)} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .nav-mobile{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:999;overflow-y:auto;padding:80px 5% 40px;transform:translateX(100%);transition:transform .3s} .nav-mobile.open{transform:translateX(0)} .nav-mobile a{font-size:15px;font-weight:500;color:var(--ink-80);padding:14px 0;border-bottom:1px solid var(--border);display:block} /* BREADCRUMB */ .breadcrumb{padding:10px 5%;background:var(--ink-08);border-bottom:1px solid var(--border)} .bc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-50);flex-wrap:wrap} .bc-inner a:hover{color:var(--brand)} /* ══ HERO ══ */ .cs-hero{background:linear-gradient(145deg,var(--ink-08) 0%,var(--brand-light) 100%);padding:0;overflow:hidden;position:relative;border-bottom:1px solid var(--border)} .cs-hero::after{content:'';position:absolute;top:-80px;right:-80px;width:400px;height:400px;background:radial-gradient(circle,rgba(212,32,46,.07) 0%,transparent 70%);border-radius:50%;pointer-events:none} .cs-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(212,32,46,.06) 1px,transparent 1px);background-size:28px 28px} .cs-hero-inner{max-width:var(--max);margin:0 auto;padding:56px 5% 0;position:relative;z-index:2} .cs-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px} .cs-badge-type{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:white;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:30px} .cs-badge{display:inline-flex;align-items:center;gap:5px;background:white;color:var(--ink-80);border:1px solid var(--border);font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px} .cs-badge.green{background:var(--green-lt);border-color:rgba(27,127,79,.2);color:var(--green)} .cs-badge.blue{background:var(--blue-lt);border-color:rgba(0,82,204,.2);color:var(--blue)} .cs-badge.amber{background:var(--amber-lt);border-color:rgba(230,81,0,.2);color:var(--amber)} .cs-badge.purple{background:var(--purple-lt);border-color:rgba(109,40,217,.2);color:var(--purple)} .cs-title{font-size:clamp(28px,4vw,54px);font-weight:700;line-height:1.08;letter-spacing:-.04em;color:var(--ink);margin-bottom:18px;max-width:920px} .cs-title em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cs-subtitle{font-size:17px;color:var(--ink-80);font-weight:300;line-height:1.75;max-width:700px;margin-bottom:32px} .cs-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--border)} .cs-meta-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-50)} .cs-meta-item strong{color:var(--ink);font-weight:600} .cs-meta-sep{width:1px;height:16px;background:var(--border)} .cs-stats-strip{background:var(--ink);margin-top:36px;border-radius:16px 16px 0 0;padding:28px 32px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2} .css-stat{text-align:center;border-right:1px solid rgba(255,255,255,.08);padding:0 16px} .css-stat:first-child{padding-left:0} .css-stat:last-child{border-right:none;padding-right:0} .css-num{font-family:var(--font-serif);font-size:36px;font-style:italic;color:var(--brand);line-height:1;font-weight:400;margin-bottom:5px} .css-label{font-size:11px;color:rgba(255,255,255,.4);font-weight:500;line-height:1.4} /* PROJECT BAR */ .project-bar{background:white;border-bottom:1px solid var(--border);padding:22px 5%} .pb-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0} .pb-item{padding:0 20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px} .pb-item:first-child{padding-left:0} .pb-item:last-child{border-right:none} .pb-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50)} .pb-value{font-size:13px;font-weight:600;color:var(--ink)} .pb-value .tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--green-lt);color:var(--green)} /* LAYOUT */ .cs-body{max-width:var(--max);margin:0 auto;padding:52px 5% 80px;display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start} .reading-bar{position:fixed;top:64px;left:0;right:0;height:3px;background:var(--border);z-index:400} .reading-progress{height:100%;background:var(--brand);width:0%;transition:width .1s linear} /* TYPOGRAPHY */ .cs-article h2{font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.025em;color:var(--ink);margin:48px 0 16px;padding-top:8px;scroll-margin-top:130px;display:flex;align-items:center;gap:10px} .cs-article h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cs-article h2 .h2-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .cs-article h3{font-size:16px;font-weight:700;color:var(--ink);margin:26px 0 10px;letter-spacing:-.015em} .cs-article p{font-size:15px;color:var(--ink-80);line-height:1.85;font-weight:300;margin-bottom:18px} .cs-article strong{font-weight:600;color:var(--ink)} .sec-div{height:1px;background:var(--border);margin:8px 0 0} /* Tool chaos grid */ .tool-chaos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0} .tc-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;gap:11px;align-items:flex-start;transition:all .2s;position:relative;overflow:hidden} .tc-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#EF4444} .tc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .tc-icon{font-size:20px;flex-shrink:0} .tc-name{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px} .tc-pain{font-size:11px;color:#DC2626;font-weight:500;margin-bottom:3px} .tc-desc{font-size:11px;color:var(--ink-50);line-height:1.5;font-weight:300} /* Zoho One map */ .zoho-one-map{background:var(--ink);border-radius:var(--r-xl);padding:30px;margin:28px 0;position:relative;overflow:hidden} .zoho-one-map::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(212,32,46,.12) 0%,transparent 70%);border-radius:50%} .zom-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:6px} .zom-title{font-size:18px;font-weight:700;color:white;margin-bottom:22px;display:flex;align-items:center;gap:10px} .zom-title em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .zom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .zom-app{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;transition:all .2s;cursor:default} .zom-app:hover{background:rgba(255,255,255,.11);border-color:rgba(212,32,46,.3)} .zom-app-icon{font-size:24px} .zom-app-name{font-size:11px;font-weight:700;color:white;line-height:1.2} .zom-app-role{font-size:10px;color:rgba(255,255,255,.35);font-weight:300;line-height:1.3} .zom-app.highlight{background:rgba(212,32,46,.15);border-color:rgba(212,32,46,.4)} .zom-connector{margin-top:16px;text-align:center;font-size:11px;color:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;gap:8px} .zom-connector::before,.zom-connector::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)} /* Migration visual */ .migration-viz{display:grid;grid-template-columns:1fr 40px 1fr;gap:0;align-items:center;margin:24px 0} .mv-before,.mv-after{border-radius:var(--r-xl);padding:22px;border:1.5px solid var(--border)} .mv-before{background:#FFF5F5;border-color:#FECACA} .mv-after{background:var(--green-lt);border-color:rgba(27,127,79,.2)} .mv-head{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:6px} .mv-before .mv-head{color:#DC2626} .mv-after .mv-head{color:var(--green)} .mv-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.55;font-weight:300;margin-bottom:9px;color:var(--ink-80)} .mv-before .mv-item::before{content:'✗';color:#DC2626;font-weight:700;flex-shrink:0} .mv-after .mv-item::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0} .mv-arrow{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--brand);font-weight:700} /* Challenge cards */ .challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .ch-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;gap:12px;align-items:flex-start;transition:all .2s} .ch-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand-mid);transform:translateY(-2px)} .ch-num{width:28px;height:28px;border-radius:8px;background:var(--brand-light);color:var(--brand);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .ch-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px} .ch-desc{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* Solution cards */ .sol-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0} .sol-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden;transition:all .2s} .sol-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sol-color,var(--brand))} .sol-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:transparent} .sol-icon{font-size:22px;margin-bottom:10px} .sol-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .sol-desc{font-size:12px;color:var(--ink-50);line-height:1.65;font-weight:300} .sol-tag{display:inline-flex;margin-top:8px;font-size:10px;font-weight:700;background:var(--blue-lt);color:var(--blue);padding:2px 8px;border-radius:10px;border:1px solid rgba(0,82,204,.15)} /* Data migration timeline */ .migration-phases{display:flex;flex-direction:column;gap:0;margin:24px 0} .mp-item{display:flex;gap:18px;align-items:stretch;padding-bottom:20px} .mp-item:last-child{padding-bottom:0} .mp-left{display:flex;flex-direction:column;align-items:center;width:38px;flex-shrink:0} .mp-dot{width:38px;height:38px;border-radius:50%;background:var(--brand);color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px var(--brand-light)} .mp-line{width:2px;flex:1;background:var(--border);margin:6px 0 0} .mp-item:last-child .mp-line{display:none} .mp-body{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;flex:1;transition:all .2s} .mp-body:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-sm)} .mp-tag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin-bottom:4px} .mp-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .mp-items{display:flex;flex-direction:column;gap:4px} .mp-point{font-size:12px;color:var(--ink-50);display:flex;align-items:flex-start;gap:6px;font-weight:300;line-height:1.5} .mp-point::before{content:'→';color:var(--brand);font-weight:700;flex-shrink:0} /* Automation flows */ .auto-flow{display:flex;flex-direction:column;gap:0;margin:20px 0 28px} .af-item{display:flex;gap:16px;align-items:stretch;padding-bottom:18px} .af-item:last-child{padding-bottom:0} .af-left{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0} .af-dot{width:36px;height:36px;border-radius:50%;background:var(--brand);color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px var(--brand-light)} .af-line{width:2px;flex:1;background:var(--border);margin:6px 0 0} .af-item:last-child .af-line{display:none} .af-body{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;flex:1;transition:all .2s} .af-body:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-sm)} .af-trigger{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin-bottom:4px} .af-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px} .af-desc{font-size:12px;color:var(--ink-50);line-height:1.6;font-weight:300} /* Results */ .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0} .res-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px 18px;text-align:center;position:relative;overflow:hidden;transition:all .2s} .res-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--res-color,var(--brand))} .res-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .res-num{font-family:var(--font-serif);font-size:36px;font-style:italic;color:var(--res-color,var(--brand));line-height:1;margin-bottom:6px} .res-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px} .res-desc{font-size:11px;color:var(--ink-50);line-height:1.55;font-weight:300} /* Results table */ .results-table{width:100%;border-collapse:collapse;margin:24px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .results-table th{background:var(--ink);color:white;font-size:12px;font-weight:600;padding:14px 18px;text-align:left;letter-spacing:.3px} .results-table td{padding:13px 18px;font-size:14px;color:var(--ink-80);border-bottom:1px solid var(--border);font-weight:300} .results-table tr:last-child td{border-bottom:none} .results-table tr:nth-child(even) td{background:var(--ink-08)} .td-before{color:var(--brand);font-weight:600} .td-after{color:var(--green);font-weight:600} .td-change{font-weight:700;color:var(--ink)} /* Checklist */ .checklist{display:flex;flex-direction:column;gap:10px;margin:16px 0 24px} .checklist li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-80);font-weight:300;line-height:1.6} .checklist li::before{content:'✓';width:20px;height:20px;border-radius:50%;background:var(--green-lt);color:var(--green);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px} /* Pull quote */ .pull-quote{border-left:4px solid var(--brand);background:var(--brand-light);padding:22px 26px;border-radius:0 var(--r-lg) var(--r-lg) 0;margin:28px 0} .pull-quote p{font-family:var(--font-serif);font-size:20px;font-style:italic;color:var(--ink);line-height:1.55;margin-bottom:8px;font-weight:400} .pull-quote cite{font-size:12px;font-weight:600;color:var(--brand);font-style:normal;display:flex;align-items:center;gap:6px} .pull-quote cite::before{content:'—'} /* Info box */ .info-box{background:var(--blue-lt);border:1px solid rgba(0,82,204,.15);border-radius:var(--r-lg);padding:20px 22px;margin:22px 0;display:flex;gap:13px} .info-box-icon{font-size:20px;flex-shrink:0;margin-top:2px} .info-box-body h4{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:5px} .info-box-body p{font-size:13px;color:var(--ink-80);line-height:1.7;margin-bottom:0;font-weight:300} /* Highlights */ .highlights{display:flex;flex-direction:column;gap:10px;margin:20px 0} .hl-item{display:flex;align-items:flex-start;gap:12px;background:white;border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all .15s} .hl-item:hover{border-color:var(--brand-mid);background:var(--brand-light)} .hl-icon{font-size:18px;flex-shrink:0;margin-top:1px} .hl-body strong{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:3px} .hl-body span{font-size:12px;color:var(--ink-50);font-weight:300;line-height:1.5} /* Cost comparison */ .cost-table{width:100%;border-collapse:collapse;margin:20px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .cost-table th{background:var(--ink-08);color:var(--ink-50);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 16px;text-align:left;border-bottom:2px solid var(--border)} .cost-table td{padding:12px 16px;font-size:13px;color:var(--ink-80);border-bottom:1px solid var(--border);font-weight:300} .cost-table tr:last-child td{border-bottom:none;font-weight:700;color:var(--ink);background:var(--ink-08)} .cost-table tr:last-child td:first-child{border-radius:0 0 0 var(--r-lg)} .cost-table tr:last-child td:last-child{border-radius:0 0 var(--r-lg) 0} .cost-old{color:var(--brand);font-weight:600;text-decoration:line-through;opacity:.7} .cost-new{color:var(--green);font-weight:700} .cost-save{color:var(--green);font-weight:700;font-size:12px} /* Article tags */ .article-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--border);margin-top:36px} .article-tags span{font-size:12px;font-weight:600;color:var(--ink-50)} .a-tag{background:var(--ink-08);color:var(--ink-80);border:1px solid var(--border);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;transition:all .15s} .a-tag:hover{background:var(--brand-light);border-color:var(--brand-mid);color:var(--brand)} /* SIDEBAR */ .cs-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px} .toc-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--shadow-sm)} .toc-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .toc-list{display:block;flex-direction:column;gap:2px} .toc-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-80);transition:all .2s;text-decoration:none} .toc-card{text-align:left} .toc-link:hover,.toc-link.active{background:var(--brand-light);color:var(--brand)} .toc-link::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.3;flex-shrink:0} .toc-link.active::before{opacity:1} .snapshot-card{background:var(--ink-08);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px} .snapshot-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .snap-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)} .snap-row:last-child{border-bottom:none} .snap-label{font-size:12px;color:var(--ink-50)} .snap-val{font-size:12px;font-weight:600;color:var(--ink);text-align:right;max-width:160px} .snap-val .chip{display:inline-block;background:var(--green-lt);color:var(--green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px} .cta-sidebar{background:var(--ink);border-radius:var(--r-xl);padding:24px;overflow:hidden;position:relative} .cta-sidebar::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(212,32,46,.2) 0%,transparent 70%);border-radius:50%} .cta-sidebar-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:6px} .cta-sidebar-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);animation:blk 1.5s infinite} @keyframes blk{0%,100%{opacity:1}50%{opacity:.3}} .cta-sidebar h3{font-size:17px;font-weight:700;color:white;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px} .cta-sidebar h3 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .cta-sidebar p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65;font-weight:300;margin-bottom:16px} .btn-sb-red{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:white;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:700;transition:all .2s;width:100%;position:relative;z-index:2;margin-bottom:8px} .btn-sb-red:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-sb-outline{display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;transition:all .2s;width:100%;position:relative;z-index:2} .btn-sb-outline:hover{border-color:rgba(255,255,255,.4);color:white} .sb-assur{display:flex;flex-direction:column;gap:5px;margin-top:14px;position:relative;z-index:2} .sb-assur span{font-size:11px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px} .sb-assur span::before{content:'✓';color:#34D399;font-weight:700} .tools-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px} .tools-card h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-50);margin-bottom:14px} .tool-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;border:1px solid var(--border);margin-bottom:8px;transition:all .15s} .tool-item:last-child{margin-bottom:0} .tool-item:hover{border-color:var(--brand-mid);background:var(--brand-light)} .tool-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .tool-name{font-size:13px;font-weight:600;color:var(--ink)} .tool-sub{font-size:11px;color:var(--ink-50);font-weight:300} /* MORE CASE STUDIES */ .more-cs-sec{background:var(--ink-08);border-top:1px solid var(--border);padding:60px 5%} .mcs-inner{max-width:var(--max);margin:0 auto} .mcs-header{margin-bottom:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .mcs-header h2{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.025em} .mcs-header h2 em{font-family:var(--font-serif);font-style:italic;color:var(--brand);font-weight:400} .mcs-header a{font-size:13px;font-weight:600;color:var(--brand)} .mcs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .mcs-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:all .25s;display:flex;flex-direction:column} .mcs-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent} .mcs-cover{height:140px;display:flex;align-items:center;justify-content:center;font-size:44px} .mcs-cover-1{background:linear-gradient(135deg,#FFF3E0,#FDDCB5)} .mcs-cover-2{background:linear-gradient(135deg,#EFF6FF,#DBEAFE)} .mcs-body{padding:20px;flex:1;display:flex;flex-direction:column} .mcs-industry{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin-bottom:8px} .mcs-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.02em;margin-bottom:8px;display:block} .mcs-title:hover{color:var(--brand)} .mcs-desc{font-size:13px;color:var(--ink-50);line-height:1.65;font-weight:300;flex:1} .mcs-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .mcs-tools{display:flex;gap:6px;flex-wrap:wrap} .mcs-tool-tag{font-size:10px;font-weight:600;background:var(--blue-lt);color:var(--blue);padding:2px 8px;border-radius:10px;border:1px solid rgba(0,82,204,.15)} .mcs-read{font-size:12px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:4px;transition:gap .15s;white-space:nowrap} .mcs-card:hover .mcs-read{gap:7px} /* BOTTOM CTA */ .bottom-cta{background:var(--ink);padding:72px 5%;text-align:center} .btm-wrap{max-width:620px;margin:0 auto} .btm-ey{display:inline-flex;align-items:center;gap:7px;background:rgba(212,32,46,.15);border:1px solid rgba(212,32,46,.3);color:#FF8A95;padding:5px 14px;border-radius:30px;font-size:11px;font-weight:600;margin-bottom:20px} .btm-title{font-size:clamp(24px,3vw,38px);font-weight:700;color:white;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px} .btm-title em{font-family:var(--font-serif);font-style:italic;color:#FF8A95;font-weight:400} .btm-sub{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;margin-bottom:28px} .btm-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .btm-assur{display:flex;justify-content:center;gap:20px;flex-wrap:wrap} .btm-assur span{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:4px} .btm-assur span::before{content:'✓';color:#34D399;font-weight:700} .btn-red-lg{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:white;padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:700;transition:all .2s} .btn-red-lg:hover{background:var(--brand-dark);transform:translateY(-1px)} .btn-ghost-lg{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:13px 28px;border-radius:var(--r-sm);font-size:15px;font-weight:600;transition:all .2s} .btn-ghost-lg:hover{border-color:rgba(255,255,255,.5);color:white} /* FOOTER */ footer{background:#0D1117;padding:52px 5% 28px} .ft-inner{max-width:var(--max);margin:0 auto} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)} .ft-brand p{font-size:12px;color:rgba(255,255,255,.35);line-height:1.75;margin-top:12px;font-weight:300} .ft-chip{display:inline-block;margin-top:12px;background:rgba(0,82,204,.2);border:1px solid rgba(0,82,204,.3);color:#6B9BFF;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600} .ft-social{display:flex;gap:8px;margin-top:12px} .soc-link{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s} .soc-link:hover{background:var(--brand)} .ft-col h4{font-size:12px;font-weight:700;color:white;margin-bottom:12px} .ft-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:8px;transition:color .15s;font-weight:300} .ft-col a:hover{color:white} .ft-bot{padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .ft-bot p,.ft-links a{font-size:12px;color:rgba(255,255,255,.25)} .ft-links{display:flex;gap:16px} /* RESPONSIVE */ @media(max-width:1024px){ .cs-body{grid-template-columns:1fr} .cs-sidebar{position:static} .cs-stats-strip{grid-template-columns:repeat(2,1fr);gap:12px;padding:20px} .css-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px} .css-stat:nth-child(even){border-bottom:none;padding-bottom:0} .pb-inner{grid-template-columns:1fr 1fr 1fr} .ft-top{grid-template-columns:1fr 1fr} .results-grid{grid-template-columns:1fr 1fr} .tool-chaos{grid-template-columns:1fr 1fr} .zom-grid{grid-template-columns:repeat(3,1fr)} .mcs-grid{grid-template-columns:1fr} } @media(max-width:768px){ .nav-links{display:none} .hamburger{display:flex} .challenge-grid,.sol-grid,.migration-viz{grid-template-columns:1fr} .migration-viz{grid-template-columns:1fr} .mv-arrow{transform:rotate(90deg);padding:8px 0} .tool-chaos{grid-template-columns:1fr} .zom-grid{grid-template-columns:repeat(2,1fr)} .pb-inner{grid-template-columns:1fr 1fr} .results-grid{grid-template-columns:1fr} } @media(max-width:480px){ .results-table,.cost-table{font-size:12px} .results-table th,.results-table td,.cost-table th,.cost-table td{padding:10px 12px} .zom-grid{grid-template-columns:1fr 1fr} } .cat-count{ font-size:10px;font-weight:700; background:var(--ink-08);color:var(--ink-50); padding:1px 6px;border-radius:10px; transition:all .2s; }