/* DigiVeritaz — recreated static site styles */
:root{
--green:#22c55e;
--green-dark:#16a34a;
--ink:#0b1220;
--ink-2:#111827;
--muted:#6b7280;
--bg:#ffffff;
--bg-2:#f6f8fb;
--border:#e5e7eb;
--radius:14px;
--shadow:0 10px 30px rgba(17,24,39,.08);
--max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Inter","Segoe UI",sans-serif;color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,4.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:700}
.section-head h2 span,h2 span,h1 span{color:var(--green)}
p{margin:0 0 1em;color:#374151}
.play{font-family:inherit}
.green_text,.green{color:var(--green)}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.text-center{text-align:center}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-40{margin-top:40px}
.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}
.d-none{display:none}
/* buttons */
.btn{
display:inline-block;padding:14px 28px;border-radius:999px;
background:var(--green);color:#fff;font-weight:600;border:0;cursor:pointer;
transition:transform .15s ease, background .2s ease;
}
.btn{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);box-shadow:0 10px 24px rgba(22,163,74,.28)}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,163,74,.4)}
.btn-outline{background:transparent;border:2px solid var(--green);color:var(--green)}
.btn-outline:hover{background:var(--green);color:#fff}
/* === Floating language switcher (bottom-left) === */
.lang-switcher{
position:fixed;left:24px;bottom:24px;z-index:60;
}
.lang-btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 16px;border-radius:999px;
background:#fff;border:1px solid var(--border);
color:#0b1220;font-weight:700;font-size:.85rem;letter-spacing:.02em;
box-shadow:0 12px 28px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.06);
cursor:pointer;font-family:inherit;transition:.25s ease;
}
.lang-btn:hover{
transform:translateY(-2px);
border-color:var(--green);color:var(--green-dark);
box-shadow:0 16px 32px rgba(22,163,74,.22), 0 3px 8px rgba(17,24,39,.08);
}
.lang-btn svg{width:16px;height:16px;flex-shrink:0}
.lang-btn .lang-label{font-weight:700}
.lang-btn .lang-caret{opacity:.65;transition:transform .25s}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg);opacity:1;color:var(--green-dark)}
.lang-menu{
position:absolute;left:0;bottom:calc(100% + 12px);
list-style:none;margin:0;padding:8px;min-width:240px;
background:#fff;border:1px solid var(--border);border-radius:18px;
box-shadow:0 30px 60px -10px rgba(17,24,39,.22), 0 8px 20px rgba(17,24,39,.08);
display:none;max-height:calc(100vh - 120px);overflow-y:auto;
}
.lang-menu.open{display:block;animation:langFade .25s cubic-bezier(.2,.7,.3,1)}
@keyframes langFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lang-menu li{
display:flex;align-items:center;gap:12px;
padding:11px 14px;border-radius:12px;cursor:pointer;
font-size:.9rem;transition:background .2s ease, color .2s ease;
position:relative;
}
.lang-menu li:hover{background:#f6f8fb}
.lang-menu li.on{background:#f7fee7}
.lang-menu li.on:after{
content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);
color:var(--green-dark);font-weight:800;font-size:.95rem;
}
.lang-flag{font-size:1.2rem;line-height:1;flex-shrink:0}
.lang-native{flex:1;color:#0b1220;font-weight:600;white-space:nowrap}
.lang-menu li.on .lang-native{color:var(--green-dark)}
.lang-en{font-size:.72rem;color:var(--muted);font-weight:500;margin-right:18px}
.lang-menu li.on .lang-en{margin-right:26px}
/* mobile positioning */
@media (max-width:600px){
.lang-switcher{left:14px;bottom:14px}
.lang-btn{padding:10px 14px;font-size:.8rem}
.lang-menu{min-width:220px}
}
[data-theme="dark"] .lang-btn{background:#111827;border-color:#1e293b;color:#f1f5f9}
[data-theme="dark"] .lang-btn:hover{color:#22c55e;border-color:#22c55e}
[data-theme="dark"] .lang-menu{background:#0f172a;border-color:#1e293b;box-shadow:0 30px 60px -10px rgba(0,0,0,.6)}
[data-theme="dark"] .lang-menu li:hover{background:#1e293b}
[data-theme="dark"] .lang-menu li.on{background:rgba(34,197,94,.12)}
[data-theme="dark"] .lang-native{color:#f1f5f9}
[data-theme="dark"] .lang-menu li.on .lang-native{color:#86efac}
[data-theme="dark"] .lang-menu li.on:after{color:#22c55e}
/* avoid collision with to-top button which is at right */
.to-top{right:24px;bottom:24px}
/* RTL adjustments for Arabic */
[dir="rtl"] .why-item:hover{transform:translateX(-6px)}
[dir="rtl"] .rev-card2:hover{transform:translateX(-6px)}
[dir="rtl"] .btn:after,[dir="rtl"] .view-more:after,[dir="rtl"] .more-link:after,[dir="rtl"] .wwd-preview .pv-cta:after{content:"←"}
[dir="rtl"] .btn:hover:after,[dir="rtl"] .view-more:hover:after,[dir="rtl"] .more-link:hover:after{transform:translateX(-4px)}
[dir="rtl"] .site-footer ul li a:hover{transform:translateX(-3px)}
[dir="rtl"] .lang-menu{left:0;right:auto}
[dir="rtl"] .marquee{direction:ltr}
/* accessibility skip link */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:999;
padding:12px 18px;background:#0b1220;color:#fff;border-radius:0 0 12px 0;
font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}
/* floating pill header */
.site-header{
position:sticky;top:22px;z-index:50;
background:transparent;border:0;padding:0 24px;
transition:top .25s ease;
}
.site-header.scrolled{top:12px}
.site-header.scrolled .container{
box-shadow:0 20px 50px rgba(17,24,39,.14), 0 3px 10px rgba(17,24,39,.06);
}
.site-header .container{
max-width:1260px;background:#ffffff;
border-radius:999px;
box-shadow:0 14px 34px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.04);
padding:8px 10px 8px 28px;
transition:box-shadow .25s ease;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0;gap:18px}
.brand{
display:flex;align-items:center;gap:10px;
font-family:"Inter",sans-serif;font-weight:800;font-size:1.55rem;
color:#0b1220;letter-spacing:-.02em;white-space:nowrap;
}
.brand img,.brand svg{width:36px;height:36px;flex-shrink:0;object-fit:contain}
.brand .wordmark{color:#0b1220;font-weight:700}
.brand .wordmark b{font-weight:800;color:#0b1220}
.nav ul{
list-style:none;display:flex;gap:4px;margin:0;padding:0;align-items:center;
flex:1;justify-content:center;
}
.nav ul li.cta{flex-shrink:0}
.nav a.navlink{
position:relative;font-weight:600;color:#1f2937;font-size:.98rem;
padding:11px 20px;border-radius:999px;transition:all .25s ease;
letter-spacing:-.01em;
}
.nav a.navlink:hover{color:var(--green-dark);background:#f1faf1}
.nav a.navlink.active{
background:linear-gradient(135deg,#d9f5c4,#bdf0a0);
color:#0b1220;box-shadow:inset 0 0 0 1px rgba(22,163,74,.15);
}
.nav .cta{margin-left:6px}
.nav .cta .btn{
padding:13px 26px;border-radius:999px;color:#fff;font-weight:600;font-size:.98rem;
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
box-shadow:0 10px 24px rgba(22,163,74,.32), inset 0 1px 0 rgba(255,255,255,.25);
transition:all .25s ease;
}
.nav .cta .btn:hover{
filter:brightness(1.08);transform:translateY(-2px);
box-shadow:0 14px 30px rgba(22,163,74,.42), inset 0 1px 0 rgba(255,255,255,.3);
}
.hamb{
display:none;background:none;border:0;cursor:pointer;
width:42px;height:42px;border-radius:999px;
position:relative;font-size:0;
transition:background .2s ease;
}
.hamb:hover{background:#f3f4f6}
.hamb:before,.hamb:after,.hamb span{
content:"";position:absolute;left:11px;right:11px;height:2px;
background:#0b1220;border-radius:2px;
transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamb:before{top:14px}
.hamb span{top:20px;display:block}
.hamb:after{top:26px}
.hamb.is-open:before{top:20px;transform:rotate(45deg)}
.hamb.is-open span{opacity:0}
.hamb.is-open:after{top:20px;transform:rotate(-45deg)}
[data-theme="dark"] .hamb:before,
[data-theme="dark"] .hamb:after,
[data-theme="dark"] .hamb span{background:#f1f5f9}
@media (max-width: 1050px){
.site-header{top:14px;padding:0 16px}
.site-header .container{padding:8px 10px 8px 20px}
.nav ul{
position:absolute;top:calc(100% + 10px);left:16px;right:16px;
background:#fff;flex-direction:column;gap:4px;
border-radius:24px;border:1px solid var(--border);
box-shadow:0 24px 60px rgba(17,24,39,.18), 0 4px 14px rgba(17,24,39,.06);
padding:14px;
display:flex;
opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(-8px) scale(.985);transform-origin:top center;
transition:opacity .22s ease, transform .25s cubic-bezier(.2,.7,.3,1), visibility 0s linear .25s;
max-height:calc(100vh - 110px);overflow-y:auto;-webkit-overflow-scrolling:touch;
z-index:51;
}
.nav ul.open{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateY(0) scale(1);
transition:opacity .22s ease, transform .25s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0s;
}
.nav ul li{padding:0;width:100%}
.nav a.navlink{display:block;width:100%;text-align:left;padding:12px 16px;font-size:1rem}
.nav a.navlink.active{background:linear-gradient(135deg,#f7fee7,#d1fae5);color:var(--green-dark)}
.hamb{display:flex;align-items:center;justify-content:center;margin-left:auto}
.nav .cta{display:none}
/* full-screen backdrop when nav is open */
body.nav-open{overflow:hidden}
body.nav-open:before{
content:"";position:fixed;inset:0;z-index:40;
background:rgba(11,18,32,.45);backdrop-filter:blur(2px);
animation:navFade .22s ease;
}
[data-theme="dark"] .nav ul{background:#0f172a;border-color:#1e293b;box-shadow:0 24px 60px rgba(0,0,0,.6)}
[data-theme="dark"] .nav a.navlink.active{background:linear-gradient(135deg,#0b3520,#0f2a1c);color:#86efac}
}
@keyframes navFade{from{opacity:0}to{opacity:1}}
/* hero — extends up behind the floating navbar */
.hero{
margin-top:-90px;padding:170px 0 80px;
position:relative;overflow:hidden;
background:
radial-gradient(900px 420px at 85% 10%, rgba(34,197,94,.16), transparent 60%),
radial-gradient(700px 360px at 10% 90%, rgba(15,118,110,.10), transparent 60%),
linear-gradient(180deg, #fbfefc 0%, #ffffff 100%);
}
.hero:before,.hero:after{
content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;z-index:0;
pointer-events:none;animation:float 18s ease-in-out infinite;
}
.hero:before{width:520px;height:520px;background:radial-gradient(circle,#bbf7d0,transparent 70%);top:-120px;right:-120px}
.hero:after{width:440px;height:440px;background:radial-gradient(circle,#a7f3d0,transparent 70%);bottom:-180px;left:-140px;animation-delay:-6s}
.hero .container{position:relative;z-index:1}
@keyframes float{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(20px,-30px) scale(1.08)}
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.hero h1 span{color:var(--green)}
.hero p.lead{font-size:1.15rem;color:#374151;max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hero-img{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.hero-logo{display:flex;align-items:center;justify-content:center}
.hero-logo img{max-width:520px;width:100%;filter:drop-shadow(0 30px 60px rgba(34,197,94,.28))}
.hero-reviews{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
.hero-reviews .rev{text-align:center}
.hero-reviews .rev img{max-height:38px;margin:0 auto 6px;width:auto}
.hero-reviews .stars{color:#f59e0b;letter-spacing:2px;font-size:.9rem}
.hero-reviews .count{font-size:.82rem;color:var(--muted);margin-top:2px}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}.hero-reviews{justify-content:center;gap:18px}}
/* section */
section{padding:72px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 40px}
.section-head h2 span{color:var(--green)}
.section-head p{color:var(--muted)}
/* rounded panel sections */
.panel{
background:linear-gradient(180deg,#eef2f7 0%,#f6f8fb 100%);
border-radius:32px;padding:56px 40px 44px;
box-shadow:inset 0 0 0 1px rgba(17,24,39,.04);
position:relative;
}
.panel .section-head{margin-bottom:36px}
.panel .section-head p{font-weight:500;color:var(--muted)}
/* carousel */
.carousel{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:6px 4px 14px;scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel > *{scroll-snap-align:start}
.panel-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.panel-dots i{width:8px;height:8px;border-radius:999px;background:#cbd5e1;display:block}
.panel-dots i.on{background:var(--green);width:22px}
.panel-tag{text-align:center;margin-top:22px;color:#111827;font-weight:600}
/* === Why Choose — split layout v2 === */
.why-split{
display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:stretch;
}
@media (max-width:900px){.why-split{grid-template-columns:1fr;gap:40px}}
.why-visual{
position:relative;border-radius:28px;overflow:hidden;
background:
radial-gradient(600px 400px at 30% 20%,rgba(34,197,94,.22),transparent 60%),
radial-gradient(500px 400px at 80% 90%,rgba(15,118,110,.20),transparent 60%),
linear-gradient(135deg,#0b1220,#111827);
padding:44px 40px;color:#fff;
display:flex;flex-direction:column;gap:28px;
box-shadow:0 30px 60px -20px rgba(15,118,110,.4);
}
.why-visual .mini-stats{margin-top:auto}
.why-visual:before{
content:"";position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:36px 36px;
mask-image:radial-gradient(ellipse at center,#000 40%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 80%);
pointer-events:none;
}
.why-visual > *{position:relative;z-index:1}
.why-visual .badge{
display:inline-flex;align-items:center;gap:8px;
background:rgba(34,197,94,.18);color:#86efac;
padding:8px 16px;border-radius:999px;font-size:.78rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;align-self:flex-start;
border:1px solid rgba(34,197,94,.3);
}
.why-visual .badge:before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e}
.why-visual .lead-num{
font-family:"Space Grotesk","Inter",sans-serif;
font-size:clamp(4rem,8vw,6.5rem);font-weight:600;letter-spacing:-.03em;
line-height:1;margin:30px 0 6px;white-space:nowrap;
background:linear-gradient(180deg,#fff,#86efac);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.why-visual h3{color:#fff;font-size:1.6rem;margin:0 0 10px}
.why-visual p{color:#cbd5e1;max-width:380px;margin:0 0 24px}
.why-visual .mini-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
align-items:start;
}
.why-visual .mini-stats .ms{display:flex;flex-direction:column;gap:10px;align-items:center;justify-self:center;text-align:center}
.why-visual .mini-stats .ms-num{
font-family:"Space Grotesk","Inter",sans-serif;
font-size:1.6rem;font-weight:700;color:#fff;
letter-spacing:-.02em;line-height:1;
}
.why-visual .mini-stats .ms-num span{color:#86efac}
.why-visual .mini-stats .ms-label{
font-size:.72rem;color:#94a3b8;font-weight:600;
text-transform:uppercase;letter-spacing:.08em;line-height:1.3;
}
.why-list{display:flex;flex-direction:column;gap:18px}
.why-item{
display:flex;gap:22px;align-items:flex-start;
padding:24px;border-radius:18px;
background:#fff;border:1px solid var(--border);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-item:hover{
transform:translateX(6px);
box-shadow:0 16px 32px -12px rgba(22,163,74,.18);
border-color:#bbf7d0;
}
.why-item .ic{
flex-shrink:0;width:54px;height:54px;border-radius:14px;
background:linear-gradient(135deg,#f7fee7,#d1fae5);
display:grid;place-items:center;
box-shadow:inset 0 0 0 1px rgba(15,118,110,.15);
}
.why-item .ic svg{width:26px;height:26px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-item h4{font-size:1.1rem;margin:0 0 6px;color:#0b1220}
.why-item p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
[data-theme="dark"] .why-item{background:#111827;border-color:#1e293b}
[data-theme="dark"] .why-item h4{color:#f1f5f9}
[data-theme="dark"] .why-item .ic{background:linear-gradient(135deg,#0b3520,#0f2a1c);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
[data-theme="dark"] .why-item .ic svg{stroke:#22c55e}
[data-theme="dark"] .why-item:hover{border-color:rgba(34,197,94,.4);box-shadow:0 16px 32px -12px rgba(34,197,94,.3)}
/* === Why Choose — bento grid (legacy, kept) === */
.why-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-bento > *{
background:#fff;border-radius:24px;padding:32px;
border:1px solid var(--border);
box-shadow:0 12px 32px rgba(17,24,39,.05);
position:relative;overflow:hidden;
transition:transform .3s ease, box-shadow .3s ease;
}
.why-bento > *:hover{transform:translateY(-6px);box-shadow:0 24px 48px -12px rgba(22,163,74,.18)}
.why-feature{
grid-column:span 2;
background:linear-gradient(135deg,#f7fee7 0%,#ffffff 60%) !important;
display:flex;flex-direction:column;justify-content:space-between;gap:18px;
min-height:300px;
}
.why-feature:after{
content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;
background:radial-gradient(circle,rgba(34,197,94,.22),transparent 70%);
pointer-events:none;z-index:0;
}
.why-feature > *{position:relative;z-index:1}
.why-feature .big-num{
font-family:"Inter",sans-serif;font-size:clamp(3.6rem,7vw,5.6rem);
font-weight:800;letter-spacing:-.04em;line-height:1;color:#0b1220;
}
.why-feature .big-num span{color:var(--green)}
.why-feature h3{font-size:1.5rem;margin:6px 0 4px}
.why-feature p{color:var(--muted);max-width:380px;margin:0 0 6px}
.why-stat{display:flex;flex-direction:column;justify-content:space-between;min-height:200px}
.why-stat .circle{
width:56px;height:56px;border-radius:14px;
background:linear-gradient(135deg,#f7fee7,#d1fae5);
display:grid;place-items:center;
box-shadow:inset 0 0 0 1px rgba(15,118,110,.12);
}
.why-stat .circle svg{width:26px;height:26px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-stat .num{
font-family:"Inter",sans-serif;font-size:2.5rem;font-weight:800;
letter-spacing:-.02em;line-height:1;color:#0b1220;margin-top:auto;
}
.why-stat .num span{color:var(--green)}
.why-stat .label{font-size:.95rem;color:var(--muted);margin-top:6px;font-weight:500}
.why-tagline{
grid-column:span 3;
background:linear-gradient(135deg,#0b1220,#111827) !important;
color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;
padding:30px 40px !important;border:0 !important;
}
.why-tagline h3{color:#fff;margin:0;font-size:1.35rem;max-width:640px;font-weight:700}
.why-tagline .pill{
flex-shrink:0;padding:11px 22px;border-radius:999px;
background:rgba(34,197,94,.18);color:#86efac;font-weight:700;
border:1px solid rgba(34,197,94,.3);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:900px){
.why-bento{grid-template-columns:1fr 1fr}
.why-feature{grid-column:span 2}
.why-tagline{grid-column:span 2;flex-direction:column;text-align:center;align-items:center}
}
@media (max-width:560px){
.why-bento{grid-template-columns:1fr;gap:16px}
.why-feature,.why-tagline{grid-column:span 1}
.why-feature .big-num{font-size:3.4rem}
.why-bento > *{padding:26px}
}
[data-theme="dark"] .why-bento > *{background:#111827;border-color:#1e293b}
[data-theme="dark"] .why-feature{background:linear-gradient(135deg,#0f2a1c,#0b1220) !important}
[data-theme="dark"] .why-feature .big-num,
[data-theme="dark"] .why-stat .num{color:#f1f5f9}
[data-theme="dark"] .why-stat .circle{background:linear-gradient(135deg,#0b3520,#0f2a1c);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
[data-theme="dark"] .why-stat .circle svg{stroke:#22c55e}
[data-theme="dark"] .why-bento > *:hover{box-shadow:0 24px 48px -12px rgba(34,197,94,.3)}
/* legacy why-card kept for safety */
.why-card{
background:#fff;border-radius:22px;padding:34px 28px;
box-shadow:0 8px 24px rgba(17,24,39,.05);
min-height:260px;display:flex;flex-direction:column;
}
.why-card .circle,.wwd-card .circle{
width:68px;height:68px;border-radius:50%;
background:linear-gradient(135deg,#f7fee7,#f1f5f9);
display:grid;place-items:center;margin-bottom:20px;
box-shadow:inset 0 0 0 1px rgba(15,118,110,.08);
}
.why-card .circle svg,.wwd-card .circle svg{width:32px;height:32px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-card .icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-size:1.6rem;margin-bottom:10px}
.why-card p{color:var(--muted);margin:0}
/* === Impact strip — oversized stats === */
.impact{
position:relative;padding:110px 0;overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 50%,#ffffff 100%);
}
.impact:before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(900px 500px at 50% 50%,rgba(34,197,94,.08),transparent 60%);
}
.impact .container{position:relative;z-index:1}
.impact-head{text-align:center;margin-bottom:60px}
.impact-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:680px;margin:0 auto 14px}
.impact-head p{color:var(--muted);max-width:560px;margin:0 auto;font-size:1.05rem}
.impact-row{
display:grid;grid-template-columns:repeat(5,1fr);
gap:0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
@media (max-width:1100px){.impact-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.impact-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.impact-row{grid-template-columns:1fr}}
.impact-cell{
position:relative;padding:50px 28px;
text-align:center;
border-right:1px solid var(--border);
transition:background .3s ease;
}
.impact-cell:last-child{border-right:0}
.impact-cell:hover{background:linear-gradient(180deg,rgba(34,197,94,.06),transparent)}
.impact-cell:hover .impact-num{
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media (max-width:1100px){
.impact-cell:nth-child(3n){border-right:0}
.impact-cell:nth-child(n+4){border-top:1px solid var(--border)}
}
@media (max-width:700px){
.impact-cell:nth-child(2n){border-right:0}
.impact-cell:nth-child(3n){border-right:1px solid var(--border)}
.impact-cell:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:480px){
.impact-cell{border-right:0!important}
.impact-cell + .impact-cell{border-top:1px solid var(--border)}
}
.impact-num{
display:block;
font-family:"Space Grotesk","Inter",sans-serif;
font-weight:600;
font-size:clamp(2.6rem,4.6vw,4.2rem);
letter-spacing:-.025em;line-height:1;color:#0b1220;
white-space:nowrap;
transition:.4s ease;
font-variant-numeric:tabular-nums;
}
.impact-num em{font-style:normal;color:var(--green);font-weight:600}
.impact-label{
display:block;margin-top:18px;color:var(--muted);
font-size:.88rem;font-weight:500;letter-spacing:.01em;
max-width:200px;margin-left:auto;margin-right:auto;line-height:1.5;
}
[data-theme="dark"] .impact{background:linear-gradient(180deg,#070b14 0%,#0b1220 50%,#070b14 100%)}
[data-theme="dark"] .impact-row,[data-theme="dark"] .impact-cell{border-color:#1e293b}
[data-theme="dark"] .impact-num{color:#f1f5f9}
[data-theme="dark"] .impact-cell:hover{background:linear-gradient(180deg,rgba(34,197,94,.08),transparent)}
/* === Process — How We Work === */
.process{
position:relative;padding:90px 0;overflow:hidden;
background:
radial-gradient(700px 400px at 20% 10%,rgba(34,197,94,.08),transparent 60%),
radial-gradient(600px 400px at 90% 90%,rgba(15,118,110,.08),transparent 60%),
linear-gradient(180deg,#fafbfc,#ffffff);
}
.process:before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(15,118,110,.08) 1px,transparent 1px);
background-size:24px 24px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.process .container{position:relative;z-index:1}
.process-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
position:relative;margin-top:50px;
}
.process-grid:before{
content:"";position:absolute;left:8%;right:8%;top:48px;height:2px;
background-image:linear-gradient(90deg,#bbf7d0 50%,transparent 50%);
background-size:14px 2px;background-repeat:repeat-x;
z-index:0;
}
@media (max-width:1000px){
.process-grid{grid-template-columns:1fr 1fr}
.process-grid:before{display:none}
}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}
.proc-step{
position:relative;background:#fff;border:1px solid var(--border);
border-radius:24px;padding:36px 28px 30px;
box-shadow:0 12px 32px rgba(17,24,39,.05);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
z-index:1;
}
.proc-step:hover{
transform:translateY(-8px);
box-shadow:0 28px 56px -12px rgba(22,163,74,.22);
border-color:#bbf7d0;
}
.proc-step .step-num{
position:absolute;top:-18px;left:28px;
width:48px;height:48px;border-radius:14px;
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#fff;font-weight:800;font-size:1.05rem;
display:grid;place-items:center;
box-shadow:0 12px 24px rgba(22,163,74,.4);
font-family:"Inter",sans-serif;letter-spacing:.02em;
}
.proc-step .step-icon{
width:60px;height:60px;border-radius:16px;
background:linear-gradient(135deg,#f7fee7,#d1fae5);
display:grid;place-items:center;
margin:18px 0 22px;
box-shadow:inset 0 0 0 1px rgba(15,118,110,.15);
}
.proc-step .step-icon svg{width:28px;height:28px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.proc-step h3{font-size:1.2rem;margin:0 0 10px;color:#0b1220}
.proc-step p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.proc-step .step-meta{
display:inline-flex;align-items:center;gap:6px;margin-top:14px;
font-size:.78rem;font-weight:700;color:var(--green-dark);
background:#f7fee7;padding:5px 12px;border-radius:999px;
border:1px solid #bbf7d0;
}
[data-theme="dark"] .process{
background:
radial-gradient(700px 400px at 20% 10%,rgba(34,197,94,.12),transparent 60%),
radial-gradient(600px 400px at 90% 90%,rgba(15,118,110,.14),transparent 60%),
linear-gradient(180deg,#0b1220,#070b14);
}
[data-theme="dark"] .process:before{background-image:radial-gradient(rgba(34,197,94,.18) 1px,transparent 1px)}
[data-theme="dark"] .proc-step{background:#111827;border-color:#1e293b}
[data-theme="dark"] .proc-step:hover{border-color:rgba(34,197,94,.4);box-shadow:0 28px 56px -12px rgba(34,197,94,.3)}
[data-theme="dark"] .proc-step h3{color:#f1f5f9}
[data-theme="dark"] .proc-step .step-icon{background:linear-gradient(135deg,#0b3520,#0f2a1c);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
[data-theme="dark"] .proc-step .step-icon svg{stroke:#22c55e}
[data-theme="dark"] .proc-step .step-meta{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.3)}
[data-theme="dark"] .process-grid:before{background-image:linear-gradient(90deg,rgba(34,197,94,.3) 50%,transparent 50%)}
/* === What We Do v3 — interactive index === */
.wwd-index{
display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;align-items:stretch;
}
@media (max-width:1000px){.wwd-index{grid-template-columns:1fr;gap:30px}}
.wwd-list{display:flex;flex-direction:column;gap:4px}
.wwd-row{
display:flex;align-items:center;gap:18px;
padding:22px 24px;border-radius:18px;cursor:pointer;
border:1px solid transparent;background:transparent;
transition:.3s ease;position:relative;
}
.wwd-row .row-num{
font-family:"Inter",sans-serif;font-size:.85rem;font-weight:700;
color:#94a3b8;letter-spacing:.08em;width:30px;flex-shrink:0;
}
.wwd-row .row-title{font-weight:700;font-size:1.15rem;color:#0b1220;flex:1;letter-spacing:-.01em}
.wwd-row .row-arrow{
width:32px;height:32px;border-radius:50%;
background:#f1f5f9;display:grid;place-items:center;
color:#94a3b8;flex-shrink:0;transition:.3s ease;
}
.wwd-row .row-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wwd-row:hover{background:#f8fafc}
.wwd-row.active{
background:linear-gradient(135deg,#f7fee7,#ffffff);
border-color:#bbf7d0;
box-shadow:0 12px 32px -8px rgba(22,163,74,.18);
}
.wwd-row.active .row-num{color:var(--green-dark)}
.wwd-row.active .row-arrow{background:var(--green);color:#fff}
.wwd-row.active .row-arrow svg{transform:rotate(-45deg)}
.wwd-preview{
position:relative;border-radius:28px;overflow:hidden;
background:linear-gradient(135deg,#0b1220,#111827);
color:#fff;padding:46px 42px;min-height:480px;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
box-shadow:0 30px 60px -20px rgba(15,118,110,.4);
}
.wwd-preview:before{
content:"";position:absolute;inset:0;
background:
radial-gradient(600px 400px at 80% 0%,rgba(34,197,94,.22),transparent 60%),
radial-gradient(500px 400px at 0% 100%,rgba(15,118,110,.18),transparent 60%);
pointer-events:none;
}
.wwd-preview:after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:36px 36px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.wwd-preview > *{position:relative;z-index:1}
.wwd-preview .pv-icon{
width:74px;height:74px;border-radius:20px;
background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(15,118,110,.15));
display:grid;place-items:center;
border:1px solid rgba(34,197,94,.3);
box-shadow:0 12px 24px rgba(0,0,0,.3);
}
.wwd-preview .pv-icon svg{width:34px;height:34px;stroke:#86efac;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wwd-preview .pv-eyebrow{
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:#86efac;margin-top:auto;
}
.wwd-preview h3{
color:#fff;font-size:clamp(2rem,3.5vw,2.6rem);margin:8px 0 14px;line-height:1.1;letter-spacing:-.02em;
}
.wwd-preview p{color:#cbd5e1;font-size:1.05rem;max-width:440px;margin:0}
.wwd-preview .pv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.wwd-preview .pv-tags span{
font-size:.78rem;font-weight:600;color:#cbd5e1;
padding:6px 14px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.wwd-preview .pv-cta{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
padding:14px 26px;border-radius:999px;
background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
font-weight:700;font-size:.95rem;
box-shadow:0 12px 28px rgba(22,163,74,.4);
transition:.25s;
}
.wwd-preview .pv-cta:after{content:"→";transition:transform .25s}
.wwd-preview .pv-cta:hover{transform:translateY(-2px);filter:brightness(1.1)}
.wwd-preview .pv-cta:hover:after{transform:translateX(4px)}
/* fade-in transition for preview content */
.wwd-fade{animation:wwdFade .35s ease}
@keyframes wwdFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-theme="dark"] .wwd-row .row-title{color:#f1f5f9}
[data-theme="dark"] .wwd-row .row-arrow{background:#1e293b;color:#64748b}
[data-theme="dark"] .wwd-row:hover{background:#0f172a}
[data-theme="dark"] .wwd-row.active{background:linear-gradient(135deg,#0f2a1c,#0b1220);border-color:rgba(34,197,94,.35)}
/* === What We Do v2 — modern 3-col grid === */
.wwd-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:1000px){.wwd-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.wwd-grid{grid-template-columns:1fr}}
.wwd-tile{
position:relative;background:#fff;border-radius:22px;padding:32px 28px 28px;
border:1px solid var(--border);
box-shadow:0 12px 32px rgba(17,24,39,.05);
display:flex;flex-direction:column;gap:18px;
min-height:300px;overflow:hidden;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wwd-tile:before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,transparent,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
transition:background .35s ease;
}
.wwd-tile:hover{transform:translateY(-6px);box-shadow:0 24px 48px -12px rgba(22,163,74,.18);border-color:transparent}
.wwd-tile:hover:before{background:linear-gradient(135deg,#22c55e,#16a34a)}
.wwd-tile:after{
content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;
background:radial-gradient(circle,rgba(34,197,94,.10),transparent 70%);
pointer-events:none;opacity:0;transition:opacity .35s ease;
}
.wwd-tile:hover:after{opacity:1}
.wwd-tile .num{
position:absolute;top:24px;right:28px;
font-family:"Inter",sans-serif;font-size:1rem;font-weight:800;
color:var(--green-dark);letter-spacing:.06em;
background:linear-gradient(135deg,#f7fee7,#d1fae5);
padding:6px 12px;border-radius:999px;
border:1px solid rgba(15,118,110,.15);
}
.wwd-tile .ic{
width:60px;height:60px;border-radius:16px;
background:linear-gradient(135deg,#f7fee7,#d1fae5);
display:grid;place-items:center;
box-shadow:inset 0 0 0 1px rgba(15,118,110,.15);
}
.wwd-tile .ic svg{width:28px;height:28px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wwd-tile h3{font-size:1.3rem;margin:0;color:#0b1220;line-height:1.25}
.wwd-tile p{margin:0;color:var(--muted);font-size:.96rem;flex:1}
.wwd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wwd-tags span{
font-size:.74rem;font-weight:600;
padding:5px 11px;border-radius:999px;
background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;
}
.wwd-tile .more-link{
display:inline-flex;align-items:center;gap:6px;
font-weight:700;font-size:.92rem;color:var(--green-dark);
margin-top:auto;padding-top:6px;
}
.wwd-tile .more-link:after{content:"→";transition:transform .25s ease}
.wwd-tile:hover .more-link:after{transform:translateX(4px)}
[data-theme="dark"] .wwd-tile{background:#111827;border-color:#1e293b}
[data-theme="dark"] .wwd-tile h3{color:#f1f5f9}
[data-theme="dark"] .wwd-tile .ic{background:linear-gradient(135deg,#0b3520,#0f2a1c);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
[data-theme="dark"] .wwd-tile .ic svg{stroke:#22c55e}
[data-theme="dark"] .wwd-tile .num{background:linear-gradient(135deg,#0b3520,#0f2a1c);color:#86efac;border-color:rgba(34,197,94,.3)}
[data-theme="dark"] .wwd-tags span{background:#1e293b;color:#94a3b8;border-color:#334155}
[data-theme="dark"] .wwd-tile .more-link{color:#22c55e}
[data-theme="dark"] .wwd-tile:hover{box-shadow:0 24px 48px -12px rgba(34,197,94,.3)}
/* legacy wwd-card kept */
.wwd-card{
background:#fff;border-radius:22px;padding:30px 26px;
box-shadow:0 8px 24px rgba(17,24,39,.05);
display:flex;flex-direction:column;min-height:320px;
}
.wwd-card h3{font-size:1.25rem;margin-bottom:10px}
.wwd-card p{color:var(--muted);flex:1;margin-bottom:18px}
.wwd-card .view-more{
align-self:flex-start;padding:10px 22px;border-radius:999px;color:#fff;font-weight:600;
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
box-shadow:0 8px 20px rgba(22,163,74,.3);transition:.2s;
}
.wwd-card .view-more:hover{transform:translateY(-2px);filter:brightness(1.08)}
/* services grid (legacy) */
.services{background:var(--bg-2)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.services-grid{grid-template-columns:1fr}}
@media (max-width:1100px) and (min-width:901px){.services-grid{grid-template-columns:1fr 1fr}}
.svc-card{
background:#fff;border:1px solid var(--border);border-radius:var(--radius);
padding:26px;transition:transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d1fae5}
.svc-card .icon{
width:58px;height:58px;border-radius:16px;
background:linear-gradient(135deg,#f7fee7,#d1fae5);color:#16a34a;
display:grid;place-items:center;margin-bottom:16px;
box-shadow:inset 0 0 0 1px rgba(15,118,110,.1);
}
.svc-card .icon svg{width:28px;height:28px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-card h3{margin-bottom:6px}
.svc-card p{color:var(--muted);margin-bottom:14px}
.svc-card a.more{color:var(--green);font-weight:600}
/* stats */
.stats{
background:
radial-gradient(600px 300px at 15% 20%, rgba(34,197,94,.18), transparent 60%),
radial-gradient(500px 260px at 85% 80%, rgba(15,118,110,.22), transparent 60%),
linear-gradient(135deg,#0b1220,#111827);
color:#fff;position:relative;overflow:hidden;
}
.stats:before{
content:"";position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:40px 40px;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 80%);
}
.stats .container{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;text-align:center;position:relative}
.stats h3{color:#fff;font-size:2.6rem;margin:0}
.stats h3 span{color:var(--green)}
.stats p{color:#cbd5e1;margin:0;font-size:.95rem}
@media (max-width:900px){.stats .container{grid-template-columns:1fr 1fr}}
/* === Clients & Partners — dual marquee === */
.clients-stat{
display:flex;justify-content:center;gap:50px;flex-wrap:wrap;
margin-bottom:36px;padding:0 20px;
}
.clients-stat .pill-stat{
display:inline-flex;align-items:center;gap:14px;
padding:14px 24px;border-radius:999px;
background:#fff;border:1px solid var(--border);
box-shadow:0 8px 20px rgba(17,24,39,.05);
}
.clients-stat .pill-stat .ps-num{
font-family:"Space Grotesk","Inter",sans-serif;
font-size:1.5rem;font-weight:600;color:#0b1220;letter-spacing:-.02em;
}
.clients-stat .pill-stat .ps-num em{font-style:normal;color:var(--green)}
.clients-stat .pill-stat .ps-label{font-size:.88rem;color:var(--muted);font-weight:500}
[data-theme="dark"] .clients-stat .pill-stat{background:#111827;border-color:#1e293b}
[data-theme="dark"] .clients-stat .pill-stat .ps-num{color:#f1f5f9}
.marquee{
overflow-x:clip;overflow-y:visible;
padding:22px 0;position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee + .marquee{padding-top:8px}
.marquee-track{
display:flex;gap:24px;width:max-content;align-items:center;
animation:marquee 50s linear infinite;
}
.marquee.reverse .marquee-track{animation:marqueeRev 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.brand-tile{
flex:0 0 200px;height:108px;background:#fff;border-radius:20px;
display:grid;place-items:center;padding:24px;
border:1px solid var(--border);
box-shadow:0 8px 24px rgba(17,24,39,.04);
transition:all .35s cubic-bezier(.2,.7,.3,1);
position:relative;overflow:hidden;
}
.brand-tile:before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,transparent,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
transition:background .35s ease;
}
.brand-tile:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px -8px rgba(22,163,74,.18);
border-color:transparent;
}
.brand-tile:hover:before{background:linear-gradient(135deg,#22c55e,#16a34a)}
.brand-tile img{
max-height:54px;max-width:100%;width:auto;object-fit:contain;
filter:grayscale(100%);opacity:.65;transition:.35s ease;
}
.brand-tile:hover img{filter:none;opacity:1}
[data-theme="dark"] .brand-tile{background:#111827;border-color:#1e293b}
[data-theme="dark"] .brand-tile img{filter:brightness(0) invert(1) opacity(.7)}
[data-theme="dark"] .brand-tile:hover img{filter:brightness(0) invert(1) opacity(1)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clients-row{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:center}
.clients-row img{filter:grayscale(100%);opacity:.75;transition:.2s}
.clients-row img:hover{filter:none;opacity:1}
@media (max-width:900px){.clients-row{grid-template-columns:repeat(3,1fr)}}
/* === Clients & Partners — pill-filtered grid === */
.client-filter{
display:flex;flex-wrap:wrap;gap:10px;
justify-content:center;margin:10px auto 32px;
max-width:980px;
}
.client-filter .pill{
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:999px;
background:#fff;border:1px solid var(--border);
color:var(--ink);font-family:inherit;font-size:.88rem;font-weight:600;
cursor:pointer;letter-spacing:-.005em;
box-shadow:0 1px 2px rgba(17,24,39,.04);
transition:all .25s cubic-bezier(.2,.7,.3,1);
}
.client-filter .pill:hover{
border-color:rgba(34,197,94,.45);
color:var(--green-dark);
transform:translateY(-1px);
box-shadow:0 6px 14px -6px rgba(34,197,94,.22);
}
.client-filter .pill.is-active{
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
color:#fff;border-color:transparent;
box-shadow:0 8px 18px -6px rgba(22,163,74,.45);
}
.client-filter .pill.is-active .pill-count{
background:rgba(255,255,255,.22);color:#fff;
}
.client-filter .pill-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 7px;
font-size:.72rem;font-weight:700;
background:rgba(17,24,39,.06);color:var(--muted);
border-radius:999px;line-height:1;
}
[data-theme="dark"] .client-filter .pill{
background:#111827;border-color:#1e293b;color:#e5e7eb;
}
[data-theme="dark"] .client-filter .pill:hover{
border-color:rgba(34,197,94,.45);color:#86efac;
}
[data-theme="dark"] .client-filter .pill-count{
background:rgba(255,255,255,.08);color:#9ca3af;
}
[data-theme="dark"] .client-filter .pill.is-active{color:#fff}
.client-marquee{margin-top:8px}
.client-marquee + .client-marquee{margin-top:4px}
.client-marquee.is-swapping .marquee-track{opacity:0;transform:translateY(6px)}
.client-marquee .marquee-track{
transition:opacity .28s ease, transform .28s ease;
gap:28px;
}
/* larger tiles + larger logos inside them */
.client-marquee .brand-tile{flex:0 0 240px;height:140px;padding:22px}
.client-marquee .brand-tile img{
filter:none;opacity:1;
max-height:88px;max-width:100%;
}
.client-marquee .brand-tile:hover img{filter:none;opacity:1;transform:scale(1.04)}
[data-theme="dark"] .client-marquee .brand-tile img{filter:none;opacity:1}
[data-theme="dark"] .client-marquee .brand-tile:hover img{filter:none;opacity:1}
@media (max-width:700px){
.client-marquee .brand-tile{flex:0 0 190px;height:118px;padding:18px}
.client-marquee .brand-tile img{max-height:72px}
}
[data-client-source]{display:none}
.client-grid .brand-tile{
flex:none;width:100%;height:120px;padding:22px;
background:#fff;border-radius:16px;
border:1px solid var(--border);
box-shadow:0 1px 2px rgba(17,24,39,.04);
display:grid;place-items:center;
position:relative;overflow:hidden;
transition:transform .3s cubic-bezier(.2,.7,.3,1),
box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.client-grid .brand-tile:before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,transparent,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
transition:background .3s ease;
}
.client-grid .brand-tile img{
max-height:56px;max-width:100%;width:auto;object-fit:contain;
filter:saturate(.85);opacity:.92;
transition:filter .3s ease, opacity .3s ease, transform .3s ease;
}
.client-grid .brand-tile:hover{
transform:translateY(-4px);
box-shadow:0 18px 32px -10px rgba(22,163,74,.18);
border-color:transparent;
}
.client-grid .brand-tile:hover:before{
background:linear-gradient(135deg,#22c55e,#16a34a);
}
.client-grid .brand-tile:hover img{
filter:saturate(1);opacity:1;transform:scale(1.04);
}
[data-theme="dark"] .client-grid .brand-tile{
background:#111827;border-color:#1e293b;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
[data-theme="dark"] .client-grid .brand-tile img{
filter:brightness(0) invert(1) opacity(.8);
}
[data-theme="dark"] .client-grid .brand-tile:hover img{
filter:brightness(0) invert(1) opacity(1);transform:scale(1.04);
}
/* Dark tiles (for logos designed on dark backgrounds like MAI, Ashlar) */
.client-grid .brand-tile--dark{
background:linear-gradient(140deg,#0f172a,#0b1220);
border-color:transparent;
box-shadow:0 6px 20px -8px rgba(2,6,23,.45);
}
.client-grid .brand-tile--dark:before{
background:linear-gradient(135deg,rgba(34,197,94,.25),rgba(15,118,110,.25));
}
.client-grid .brand-tile--dark img{filter:none;opacity:1}
.client-grid .brand-tile--dark:hover{
box-shadow:0 18px 36px -10px rgba(34,197,94,.35);
}
.client-grid .brand-tile--dark:hover img{filter:none;opacity:1}
[data-theme="dark"] .client-grid .brand-tile--dark{
background:linear-gradient(140deg,#1f2937,#0b1220);border-color:#1e293b;
}
[data-theme="dark"] .client-grid .brand-tile--dark img{filter:none;opacity:1}
@media (max-width:1100px){.client-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){
.client-grid{grid-template-columns:repeat(3,1fr);gap:10px}
.client-grid .brand-tile{height:96px;padding:16px}
.client-cat-title{font-size:1.1rem}
}
@media (max-width:420px){.client-grid{grid-template-columns:repeat(2,1fr)}}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
/* === Reviews v3 — premium rating cards === */
.rating-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media (max-width:1000px){.rating-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.rating-grid{grid-template-columns:1fr}}
.rating-card{
position:relative;background:#fff;border:1px solid var(--border);
border-radius:28px;padding:40px 36px 36px;overflow:hidden;
box-shadow:0 14px 40px rgba(17,24,39,.06);
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
display:flex;flex-direction:column;gap:22px;
}
.rating-card:before{
content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;
background:radial-gradient(circle,rgba(34,197,94,.10),transparent 70%);
pointer-events:none;transition:opacity .4s ease;
}
.rating-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 60px -16px rgba(22,163,74,.22);
border-color:#bbf7d0;
}
.rating-card .platform{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding-bottom:22px;border-bottom:1px dashed var(--border);
}
.rating-card .platform img{max-height:38px;width:auto;object-fit:contain}
.rating-card .platform .verified{
display:inline-flex;align-items:center;gap:6px;
font-size:.72rem;font-weight:700;color:var(--green-dark);
background:#f7fee7;padding:5px 10px;border-radius:999px;
border:1px solid #bbf7d0;letter-spacing:.04em;text-transform:uppercase;
}
.rating-card .platform .verified:before{content:"✓";color:var(--green)}
.rating-card .rate-block{display:flex;align-items:flex-end;gap:14px}
.rating-card .rate-block .num{
font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;
font-size:clamp(3.4rem,6vw,4.6rem);line-height:.9;letter-spacing:-.04em;
color:#0b1220;
}
.rating-card .rate-block .num span{color:var(--green)}
.rating-card .rate-block .out{font-size:1.05rem;color:var(--muted);font-weight:500;padding-bottom:8px}
.rating-card .stars{
color:#fbbf24;letter-spacing:5px;font-size:1.3rem;line-height:1;
}
.rating-card .meta{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:8px;
}
.rating-card .meta .count{
display:flex;flex-direction:column;
font-size:.86rem;color:var(--muted);
}
.rating-card .meta .count strong{
font-family:"Space Grotesk","Inter",sans-serif;font-size:1.1rem;
font-weight:600;color:#0b1220;letter-spacing:-.01em;
}
.rating-card .meta .read{
display:inline-flex;align-items:center;gap:6px;
font-size:.86rem;font-weight:700;color:var(--green-dark);
}
.rating-card .meta .read:after{content:"→";transition:transform .25s}
.rating-card:hover .meta .read:after{transform:translateX(4px)}
[data-theme="dark"] .rating-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .rating-card:hover{border-color:rgba(34,197,94,.4);box-shadow:0 30px 60px -16px rgba(34,197,94,.3)}
[data-theme="dark"] .rating-card .platform{border-bottom-color:#1e293b}
[data-theme="dark"] .rating-card .platform img{filter:brightness(0) invert(1) opacity(.85)}
[data-theme="dark"] .rating-card .platform .verified{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.3)}
[data-theme="dark"] .rating-card .rate-block .num,
[data-theme="dark"] .rating-card .meta .count strong{color:#f1f5f9}
[data-theme="dark"] .rating-card .meta .read{color:#22c55e}
/* === Reviews v2 — split rating === */
.reviews-split{
display:grid;grid-template-columns:0.95fr 1.05fr;gap:50px;align-items:stretch;
}
@media (max-width:1000px){.reviews-split{grid-template-columns:1fr}}
.rev-hero{
position:relative;border-radius:28px;overflow:hidden;
background:linear-gradient(135deg,#0b1220,#111827);
color:#fff;padding:50px 44px;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
min-height:420px;
box-shadow:0 30px 60px -20px rgba(15,118,110,.4);
}
.rev-hero:before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(600px 400px at 20% 0%,rgba(34,197,94,.22),transparent 60%),
radial-gradient(500px 400px at 100% 100%,rgba(15,118,110,.18),transparent 60%);
}
.rev-hero:after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:36px 36px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.rev-hero > *{position:relative;z-index:1}
.rev-hero .badge{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
padding:8px 16px;border-radius:999px;
background:rgba(34,197,94,.18);color:#86efac;
font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
border:1px solid rgba(34,197,94,.3);
}
.rev-hero .badge:before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e}
.rev-hero .big-rating{
display:flex;align-items:baseline;gap:14px;margin-top:auto;
}
.rev-hero .big-rating .num{
font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;
font-size:clamp(4.5rem,9vw,6.5rem);line-height:1;letter-spacing:-.04em;
background:linear-gradient(180deg,#fff,#86efac);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.rev-hero .big-rating .out{
font-family:"Space Grotesk","Inter",sans-serif;font-size:1.6rem;
color:#64748b;font-weight:500;
}
.rev-hero .stars{
color:#fbbf24;letter-spacing:4px;font-size:1.25rem;margin-top:8px;
}
.rev-hero h3{
color:#fff;font-size:1.45rem;margin:14px 0 6px;line-height:1.3;
}
.rev-hero p{color:#cbd5e1;max-width:380px;margin:0 0 4px}
.rev-hero .total{
display:inline-flex;align-items:center;gap:8px;
font-size:.9rem;color:#94a3b8;font-weight:500;margin-top:6px;
}
.rev-hero .total strong{color:#fff;font-weight:700}
.rev-list{display:flex;flex-direction:column;gap:18px}
.rev-card2{
display:flex;align-items:center;gap:22px;padding:24px 28px;
background:#fff;border:1px solid var(--border);border-radius:20px;
box-shadow:0 10px 28px rgba(17,24,39,.05);
transition:.3s ease;position:relative;overflow:hidden;
}
.rev-card2:hover{transform:translateX(6px);box-shadow:0 20px 40px -12px rgba(22,163,74,.18);border-color:#bbf7d0}
.rev-card2 .logo-box{
flex-shrink:0;width:96px;height:64px;border-radius:14px;
background:#f8fafc;border:1px solid var(--border);
display:grid;place-items:center;padding:10px;
}
.rev-card2 .logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.rev-card2 .info{flex:1;min-width:0}
.rev-card2 .info .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rev-card2 .info .num{
font-family:"Space Grotesk","Inter",sans-serif;font-size:1.55rem;
font-weight:600;color:#0b1220;letter-spacing:-.02em;line-height:1;
}
.rev-card2 .info .stars{color:#fbbf24;letter-spacing:2px;font-size:.85rem}
.rev-card2 .info p{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.rev-card2 .arrow{
flex-shrink:0;width:36px;height:36px;border-radius:50%;
background:#f1f5f9;display:grid;place-items:center;color:#94a3b8;
transition:.3s ease;
}
.rev-card2:hover .arrow{background:var(--green);color:#fff;transform:rotate(-45deg)}
.rev-card2 .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .rev-card2{background:#111827;border-color:#1e293b}
[data-theme="dark"] .rev-card2 .info .num{color:#f1f5f9}
[data-theme="dark"] .rev-card2 .logo-box{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .rev-card2 .logo-box img{filter:brightness(0) invert(1) opacity(.85)}
[data-theme="dark"] .rev-card2 .arrow{background:#1e293b;color:#64748b}
[data-theme="dark"] .rev-card2:hover{border-color:rgba(34,197,94,.4)}
/* legacy reviews kept */
.reviews{background:var(--bg-2)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}
.rev-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.rev-card h3{font-size:1.8rem;margin-bottom:4px}
.rev-card .stars{color:#f59e0b;letter-spacing:2px;margin-bottom:8px}
/* === Testimonials v2 — modern grid === */
.testimonials-bg{
position:relative;padding:90px 0;overflow:hidden;
background:
radial-gradient(700px 400px at 20% 10%,rgba(34,197,94,.06),transparent 60%),
radial-gradient(600px 400px at 90% 90%,rgba(15,118,110,.06),transparent 60%),
linear-gradient(180deg,#fafbfc,#ffffff);
}
.testimonials-bg .container{position:relative;z-index:1}
[data-theme="dark"] .testimonials-bg{
background:
radial-gradient(700px 400px at 20% 10%,rgba(34,197,94,.10),transparent 60%),
linear-gradient(180deg,#0b1220,#070b14);
}
.tgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1000px){.tgrid2{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.tgrid2{grid-template-columns:1fr}}
.tcard2{
position:relative;background:#fff;border:1px solid var(--border);
border-radius:24px;padding:38px 32px 30px;
box-shadow:0 14px 38px rgba(17,24,39,.06);
transition:.35s ease;
display:flex;flex-direction:column;gap:18px;
overflow:hidden;
}
.tcard2:hover{
transform:translateY(-8px);
box-shadow:0 28px 56px -14px rgba(22,163,74,.2);
border-color:#bbf7d0;
}
.tcard2 .quote-mark{
position:absolute;top:22px;right:26px;
font-family:"Space Grotesk",Georgia,serif;
font-size:5rem;line-height:.7;font-weight:700;
color:#bbf7d0;opacity:.55;pointer-events:none;
}
.tcard2 .stars2{color:#fbbf24;letter-spacing:3px;font-size:.95rem}
.tcard2 blockquote{
margin:0;color:#0b1220;font-style:normal;font-size:1.05rem;
line-height:1.65;font-weight:500;letter-spacing:-.005em;
flex:1;
}
.tcard2 .author{
display:flex;align-items:center;gap:14px;
padding-top:18px;border-top:1px dashed var(--border);
}
.tcard2 .avatar{
width:48px;height:48px;border-radius:50%;flex-shrink:0;
display:grid;place-items:center;color:#fff;font-weight:700;
font-family:"Space Grotesk",sans-serif;font-size:1.05rem;letter-spacing:-.02em;
box-shadow:0 6px 14px rgba(15,118,110,.3);
}
.tcard2 .av-1{background:linear-gradient(135deg,#22c55e,#16a34a)}
.tcard2 .av-2{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.tcard2 .av-3{background:linear-gradient(135deg,#3b82f6,#1e40af)}
.tcard2 .av-4{background:linear-gradient(135deg,#a855f7,#6d28d9)}
.tcard2 .av-5{background:linear-gradient(135deg,#ec4899,#be185d)}
.tcard2 .av-6{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.tcard2 cite{
font-style:normal;font-weight:700;color:#0b1220;
display:block;font-size:.98rem;letter-spacing:-.01em;
}
.tcard2 .role2{color:var(--muted);font-size:.85rem;margin-top:2px;display:block}
[data-theme="dark"] .tcard2{background:#111827;border-color:#1e293b}
[data-theme="dark"] .tcard2 blockquote,[data-theme="dark"] .tcard2 cite{color:#f1f5f9}
[data-theme="dark"] .tcard2 .quote-mark{color:rgba(34,197,94,.25)}
[data-theme="dark"] .tcard2 .author{border-top-color:#1e293b}
[data-theme="dark"] .tcard2:hover{border-color:rgba(34,197,94,.4);box-shadow:0 28px 56px -14px rgba(34,197,94,.3)}
/* legacy */
.tcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.tcard .stars{color:#f59e0b}
.tcard blockquote{margin:10px 0;color:#374151;font-style:italic}
.tcard cite{font-weight:600;color:var(--ink);font-style:normal}
.tcard .role{color:var(--muted);font-size:.9rem}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.tgrid{grid-template-columns:1fr}}
/* FAQ */
.faq-item{
background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden;
}
.faq-q{
padding:18px 22px;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;
}
.faq-q:after{content:"+";font-size:22px;color:var(--green)}
.faq-item.open .faq-q:after{content:"–"}
.faq-a{display:none;padding:0 22px 20px;color:#374151}
.faq-item.open .faq-a{display:block}
/* === Case Studies v4 — minimal clean tiles === */
.cs-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
@media (max-width:1100px){.cs-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cs-row{grid-template-columns:1fr}}
.cs-tile{
position:relative;background:#fff;border:1px solid var(--border);
border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
display:flex;flex-direction:column;
box-shadow:0 12px 32px rgba(17,24,39,.05);
transition:.4s ease;min-height:380px;
}
.cs-tile:hover{
transform:translateY(-8px);
box-shadow:0 28px 56px -16px rgba(22,163,74,.22);
border-color:#bbf7d0;
}
/* logo display area */
.cs-tile .head{
position:relative;height:160px;
background:linear-gradient(160deg,#f8fafc 0%,#f1f5f9 100%);
display:grid;place-items:center;padding:30px;overflow:hidden;
border-bottom:1px solid var(--border);
}
.cs-tile .head:before{
content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(15,118,110,.10) 1px,transparent 1px);
background-size:18px 18px;
mask-image:radial-gradient(ellipse at center,#000 40%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 80%);
}
.cs-tile .head:after{
content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;
background:radial-gradient(circle,rgba(34,197,94,.12),transparent 70%);
transition:opacity .4s ease;opacity:0;
}
.cs-tile:hover .head:after{opacity:1}
.cs-tile .head img{
position:relative;z-index:1;
max-height:54px;max-width:75%;width:auto;object-fit:contain;
transition:transform .4s ease;
}
.cs-tile:hover .head img{transform:scale(1.06)}
/* tag floating top-right */
.cs-tile .h-tag{
position:absolute;top:16px;right:16px;z-index:2;
display:inline-flex;align-items:center;gap:6px;
padding:5px 12px;border-radius:999px;
background:#fff;color:var(--green-dark);
font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
border:1px solid #bbf7d0;
box-shadow:0 4px 12px rgba(0,0,0,.06);
}
/* body */
.cs-tile .body{
padding:24px 26px 26px;flex:1;
display:flex;flex-direction:column;gap:12px;
}
.cs-tile h3{font-size:1.1rem;margin:0;color:#0b1220;line-height:1.35;letter-spacing:-.01em}
.cs-tile .body p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.55;flex:1}
.cs-tile .metric-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-top:14px;margin-top:auto;border-top:1px dashed var(--border);
}
.cs-tile .metric-block{display:flex;align-items:baseline;gap:8px}
.cs-tile .h-metric{
font-family:"Space Grotesk","Inter",sans-serif;
font-size:1.5rem;font-weight:600;line-height:1;
letter-spacing:-.025em;color:var(--green-dark);
}
.cs-tile .h-metric-label{font-size:.78rem;color:var(--muted);font-weight:500}
.cs-tile .arrow-c{
width:34px;height:34px;border-radius:50%;
background:#f1f5f9;display:grid;place-items:center;color:#94a3b8;
flex-shrink:0;transition:.3s ease;
}
.cs-tile:hover .arrow-c{background:var(--green);color:#fff;transform:rotate(-45deg)}
.cs-tile .arrow-c svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .cs-tile{background:#111827;border-color:#1e293b}
[data-theme="dark"] .cs-tile h3{color:#f1f5f9}
[data-theme="dark"] .cs-tile .head{background:linear-gradient(160deg,#0f172a,#0b1220);border-bottom-color:#1e293b}
[data-theme="dark"] .cs-tile .head img{filter:brightness(0) invert(1) opacity(.9)}
[data-theme="dark"] .cs-tile .h-tag{background:#0b1220;color:#86efac;border-color:rgba(34,197,94,.3)}
[data-theme="dark"] .cs-tile .h-metric{color:#22c55e}
[data-theme="dark"] .cs-tile .arrow-c{background:#1e293b;color:#64748b}
[data-theme="dark"] .cs-tile .metric-row{border-top-color:#1e293b}
[data-theme="dark"] .cs-tile:hover{border-color:rgba(34,197,94,.4);box-shadow:0 28px 56px -16px rgba(34,197,94,.3)}
/* === Case Studies v2 — bento layout === */
.cs-bento{
display:grid;grid-template-columns:1.4fr 1fr;gap:24px;
}
@media (max-width:1000px){.cs-bento{grid-template-columns:1fr}}
.cs-featured{
position:relative;border-radius:28px;overflow:hidden;
background:linear-gradient(135deg,#0b1220,#111827);
color:#fff;padding:46px 44px;min-height:520px;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
box-shadow:0 30px 60px -20px rgba(15,118,110,.4);
text-decoration:none;transition:.4s;
}
.cs-featured:before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(700px 500px at 80% 0%,rgba(34,197,94,.22),transparent 60%),
radial-gradient(500px 400px at 0% 100%,rgba(15,118,110,.18),transparent 60%);
}
.cs-featured:after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:36px 36px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.cs-featured > *{position:relative;z-index:1}
.cs-featured:hover{transform:translateY(-4px);box-shadow:0 36px 70px -20px rgba(34,197,94,.5)}
.cs-featured .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.cs-featured .brand-mark{
background:#fff;border-radius:14px;padding:14px 20px;
display:grid;place-items:center;height:64px;min-width:140px;
box-shadow:0 12px 24px rgba(0,0,0,.3);
}
.cs-featured .brand-mark img{max-height:36px;width:auto;object-fit:contain}
.cs-featured .badge{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:999px;
background:rgba(34,197,94,.18);color:#86efac;
font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
border:1px solid rgba(34,197,94,.3);
}
.cs-featured .metric{
font-family:"Space Grotesk","Inter",sans-serif;
font-size:clamp(3.6rem,7vw,5.6rem);font-weight:600;
letter-spacing:-.04em;line-height:.95;margin-top:auto;
background:linear-gradient(180deg,#fff,#86efac);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
white-space:nowrap;
}
.cs-featured h3{color:#fff;font-size:1.6rem;margin:8px 0 8px;line-height:1.2}
.cs-featured p{color:#cbd5e1;max-width:480px;margin:0 0 18px;font-size:1rem}
.cs-featured .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cs-featured .tags span{
font-size:.74rem;font-weight:600;color:#cbd5e1;
padding:6px 13px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.cs-featured .view{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
padding:14px 26px;border-radius:999px;
background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
font-weight:700;font-size:.95rem;
box-shadow:0 12px 28px rgba(22,163,74,.4);
}
.cs-featured .view:after{content:"→";transition:transform .25s}
.cs-featured:hover .view:after{transform:translateX(4px)}
.cs-side{display:grid;grid-template-rows:repeat(3,1fr);gap:24px}
@media (max-width:1000px){.cs-side{grid-template-rows:auto;grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.cs-side{grid-template-columns:1fr}}
.cs-mini{
position:relative;background:#fff;border:1px solid var(--border);
border-radius:22px;padding:28px;
display:flex;flex-direction:column;justify-content:space-between;gap:14px;
box-shadow:0 12px 30px rgba(17,24,39,.05);
transition:.35s ease;text-decoration:none;color:inherit;overflow:hidden;
min-height:160px;
}
.cs-mini:before{
content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;
background:radial-gradient(circle,rgba(34,197,94,.10),transparent 70%);
pointer-events:none;opacity:0;transition:.4s;
}
.cs-mini:hover{transform:translateY(-6px);box-shadow:0 28px 56px -12px rgba(22,163,74,.22);border-color:#bbf7d0}
.cs-mini:hover:before{opacity:1}
.cs-mini .mini-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.cs-mini .mini-logo{height:32px;display:flex;align-items:center}
.cs-mini .mini-logo img{max-height:32px;width:auto;object-fit:contain}
.cs-mini .mini-arrow{
width:32px;height:32px;border-radius:50%;
background:#f1f5f9;display:grid;place-items:center;color:#94a3b8;
flex-shrink:0;transition:.3s ease;
}
.cs-mini:hover .mini-arrow{background:var(--green);color:#fff;transform:rotate(-45deg)}
.cs-mini .mini-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cs-mini .mini-metric{
font-family:"Space Grotesk","Inter",sans-serif;
font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;
letter-spacing:-.025em;line-height:1;color:#0b1220;
position:relative;
}
.cs-mini .mini-metric span{color:var(--green)}
.cs-mini .mini-title{
font-size:.92rem;color:var(--muted);font-weight:500;
position:relative;line-height:1.45;
}
.cs-mini .mini-title strong{color:#0b1220;display:block;font-weight:700;font-size:1rem}
[data-theme="dark"] .cs-mini{background:#111827;border-color:#1e293b}
[data-theme="dark"] .cs-mini .mini-metric,[data-theme="dark"] .cs-mini .mini-title strong{color:#f1f5f9}
[data-theme="dark"] .cs-mini .mini-arrow{background:#1e293b;color:#64748b}
[data-theme="dark"] .cs-mini:hover{border-color:rgba(34,197,94,.4);box-shadow:0 28px 56px -12px rgba(34,197,94,.3)}
[data-theme="dark"] .cs-mini .mini-logo img{filter:brightness(0) invert(1) opacity(.85)}
/* legacy */
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:1000px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cs-grid{grid-template-columns:1fr}}
/* case-study marquee */
.cs-marquee{
overflow:hidden;padding:8px 0 4px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cs-track{
display:flex;gap:28px;width:max-content;align-items:flex-start;
animation:marquee 50s linear infinite;
}
.cs-track:hover{animation-play-state:paused}
.cs-track .cs-card{flex:0 0 240px}
/* logo case study cards (homepage) */
.cs-card{display:block;text-align:center}
.cs-card .logo-tile{
background:#fff;border-radius:22px;padding:34px 24px;
box-shadow:0 10px 28px rgba(17,24,39,.06);
display:grid;place-items:center;height:140px;
transition:transform .25s ease, box-shadow .25s ease;
}
.cs-card:hover .logo-tile{transform:translateY(-4px);box-shadow:0 16px 38px rgba(17,24,39,.10)}
.cs-card .logo-tile img{max-height:62px;width:auto;object-fit:contain}
.cs-card .cs-title{
margin-top:18px;font-weight:700;color:#0b1220;font-size:1rem;line-height:1.4;
max-width:240px;margin-left:auto;margin-right:auto;
}
.panel-cta{display:flex;justify-content:center;margin-top:30px}
.panel-cta .btn{padding:13px 34px}
/* case studies / posts */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.card-grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:16/10;background:#eef2f7;background-size:cover;background-position:center}
.card .thumb[style*="Case%20Studies"]{aspect-ratio:4/3}
.card .body{padding:22px}
.card h3{font-size:1.15rem}
.card .tag{display:inline-block;background:#f7fee7;color:var(--green);padding:4px 10px;border-radius:999px;font-size:.8rem;margin-bottom:10px;font-weight:600}
.card .meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem;margin-top:12px}
.card .meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
[data-theme="dark"] .card{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .card .tag{background:rgba(34,197,94,.12)}
/* blog */
.blog-hero{padding:140px 0 30px;background:linear-gradient(180deg,#f7fee7,#fff);border-bottom:1px solid var(--border);margin-top:-90px}
.blog-hero .container{max-width:820px}
.blog-hero .crumbs{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.blog-hero .crumbs a{color:var(--muted);text-decoration:none}
.blog-hero .crumbs a:hover{color:var(--green)}
.blog-hero .post-tag{display:inline-block;background:#f7fee7;color:var(--green);padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px}
.blog-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.18;letter-spacing:-.018em;margin:0 0 18px;color:#0b1220}
.blog-hero .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:var(--muted);font-size:.92rem}
.blog-hero .post-meta .sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45}
[data-theme="dark"] .blog-hero{background:linear-gradient(180deg,#0b1220,#0a0f1c)}
[data-theme="dark"] .blog-hero h1{color:#f1f5f9}
[data-theme="dark"] .blog-hero .post-tag{background:rgba(34,197,94,.12)}
.blog-feature{padding:32px 0 0}
.blog-feature .container{max-width:980px}
.blog-feature img{width:100%;aspect-ratio:3/2;object-fit:contain;border-radius:18px;border:1px solid var(--border);background:#eef2f7;display:block}
.blog-article{padding:48px 0 64px}
.blog-article .container{max-width:760px}
.blog-article .prose{font-size:1.05rem;line-height:1.8;color:#334155}
.blog-article .prose p{margin:0 0 1.1em}
.blog-article .prose h2{font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.012em;line-height:1.25;margin:2em 0 .6em;color:#0b1220}
.blog-article .prose h3{font-size:clamp(1.15rem,2vw,1.35rem);font-weight:700;line-height:1.3;margin:1.6em 0 .5em;color:#0b1220}
.blog-article .prose h4{font-size:1.05rem;font-weight:700;margin:1.4em 0 .4em;color:#0b1220}
.blog-article .prose ul,.blog-article .prose ol{margin:0 0 1.3em;padding-left:1.4em}
.blog-article .prose li{margin:.4em 0}
.blog-article .prose strong{color:#0b1220;font-weight:700}
.blog-article .prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.blog-article .prose a:hover{text-decoration-thickness:2px}
.blog-article .prose blockquote{border-left:4px solid var(--green);background:linear-gradient(90deg,rgba(34,197,94,.06),transparent);padding:18px 24px;margin:1.6em 0;border-radius:0 12px 12px 0;font-style:italic;color:#334155}
.blog-article .prose img{max-width:100%;height:auto;border-radius:12px;margin:1.4em 0;border:1px solid var(--border)}
.blog-article .prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
.blog-article .prose th,.blog-article .prose td{border:1px solid var(--border);padding:10px 14px;text-align:left}
.blog-article .prose th{background:#f8fafc;font-weight:700;color:#0b1220}
.blog-article .prose hr{border:0;border-top:1px solid var(--border);margin:2em 0}
[data-theme="dark"] .blog-article .prose{color:#cbd5e1}
[data-theme="dark"] .blog-article .prose h2,[data-theme="dark"] .blog-article .prose h3,[data-theme="dark"] .blog-article .prose h4,[data-theme="dark"] .blog-article .prose strong{color:#f1f5f9}
[data-theme="dark"] .blog-article .prose blockquote{color:#cbd5e1;background:linear-gradient(90deg,rgba(34,197,94,.1),transparent)}
[data-theme="dark"] .blog-article .prose th{background:#0f172a;color:#f1f5f9}
[data-theme="dark"] .blog-article .prose th,[data-theme="dark"] .blog-article .prose td{border-color:#1e293b}
.blog-share{display:flex;align-items:center;gap:12px;padding:24px 0;margin-top:32px;border-top:1px solid var(--border)}
.blog-share .lbl{font-size:.85rem;font-weight:600;color:var(--muted)}
.blog-share a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#f1f5f9;color:#475569;transition:.2s}
.blog-share a:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.blog-share a svg{width:16px;height:16px;fill:currentColor}
[data-theme="dark"] .blog-share a{background:#1e293b;color:#cbd5e1}
.blog-related{padding:64px 0;background:linear-gradient(180deg,rgba(248,250,252,.7),rgba(248,250,252,.3))}
[data-theme="dark"] .blog-related{background:rgba(15,23,42,.4)}
.blog-related h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 28px;letter-spacing:-.015em}
@media (max-width:700px){
.blog-hero{padding:120px 0 24px}
.blog-feature{padding:24px 0 0}
.blog-feature img{border-radius:14px}
.blog-article{padding:36px 0 48px}
.blog-article .prose{font-size:1rem;line-height:1.75}
}
/* forms */
form .field{margin-bottom:18px}
form label{font-weight:600;display:block;margin-bottom:6px}
form input[type=text],form input[type=email],form input[type=tel],form select,form textarea{
width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:10px;font:inherit;background:#fff;
}
form input:focus,form select:focus,form textarea:focus{outline:2px solid #bbf7d0;border-color:var(--green)}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check-grid label{font-weight:500;display:flex;gap:8px;align-items:center;background:#f9fafb;padding:10px 12px;border-radius:8px;border:1px solid var(--border)}
@media (max-width:700px){.check-grid{grid-template-columns:1fr}}
/* page hero — same trick: extend gradient up behind the navbar */
.page-hero{margin-top:-90px;padding:160px 0 50px;background:linear-gradient(180deg,#f7fee7,#fff);border-bottom:1px solid var(--border)}
.breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:10px}
/* === Modern Footer (light) === */
.site-footer{
position:relative;margin-top:100px;padding:0;
background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 60%,#f1f5f9 100%);
color:#475569;overflow:hidden;
border-top:1px solid #eef2f7;
}
.site-footer:before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(800px 400px at 20% 0%,rgba(34,197,94,.06),transparent 60%),
radial-gradient(700px 400px at 90% 100%,rgba(15,118,110,.05),transparent 60%);
}
.site-footer:after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(15,118,110,.08) 1px,transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.site-footer .container{position:relative;z-index:1}
/* CTA banner above footer */
.foot-cta{
background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(15,118,110,.06));
border:1px solid rgba(34,197,94,.18);
border-radius:32px;padding:50px 56px;
display:flex;align-items:center;justify-content:space-between;gap:30px;
margin:80px 0 70px;flex-wrap:wrap;
box-shadow:0 30px 60px -20px rgba(0,0,0,.3);
}
.foot-cta-text{flex:1;min-width:280px}
.foot-cta-text .eyebrow{
background:rgba(34,197,94,.18);color:#86efac;
border:1px solid rgba(34,197,94,.3);
}
.foot-cta-text h2{
color:#fff;font-size:clamp(1.8rem,3.2vw,2.6rem);
margin:8px 0 6px;line-height:1.15;
}
.foot-cta-text h2 span{color:#86efac}
.foot-cta-text p{color:#94a3b8;margin:0;max-width:520px;font-size:1rem}
.foot-cta .btn{
flex-shrink:0;padding:16px 32px;font-size:1rem;
background:linear-gradient(135deg,#22c55e,#16a34a);
box-shadow:0 14px 32px rgba(22,163,74,.4);
}
/* Main footer columns */
.foot-main{padding:80px 0 60px}
.footer-grid{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px;align-items:start;
}
@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:36px}}
.site-footer h4{
color:#0b1220;font-weight:800;font-size:1rem;
margin:0 0 22px;letter-spacing:.06em;text-transform:uppercase;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{padding:7px 0}
.site-footer ul li a{
color:#64748b;font-size:.94rem;font-weight:500;
transition:.25s ease;display:inline-flex;align-items:center;gap:6px;
}
.site-footer ul li a:hover{color:var(--green-dark);transform:translateX(3px)}
.site-footer ul li a:hover:before{content:"→";font-weight:700}
/* brand column */
.foot-brand{
display:flex;align-items:center;gap:12px;
font-family:"Inter",sans-serif;font-weight:800;font-size:1.5rem;color:#0b1220;
}
.foot-brand img,.foot-brand svg{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.foot-brand .wordmark{color:#0b1220;font-weight:700}
.foot-brand .wordmark b{font-weight:800;color:#0b1220}
.foot-tag{color:#64748b;margin:18px 0 22px;font-size:.95rem;line-height:1.6;max-width:340px}
.foot-socials{display:flex;gap:12px;margin-bottom:24px}
.foot-socials a{
width:52px;height:52px;border-radius:14px;
border:1px solid #e2e8f0;background:#fff;
display:grid;place-items:center;color:#0b1220;transition:.25s ease;
box-shadow:0 4px 12px rgba(17,24,39,.04);
}
.foot-socials a:hover{
border-color:rgba(34,197,94,.5);color:var(--green-dark);transform:translateY(-3px);
background:#f7fee7;box-shadow:0 10px 24px rgba(34,197,94,.18);
}
.foot-socials svg{width:22px;height:22px;fill:currentColor}
/* newsletter */
.foot-newsletter{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
border-radius:14px;padding:6px 6px 6px 18px;
display:flex;align-items:center;gap:8px;max-width:340px;
transition:.25s;
}
.foot-newsletter:focus-within{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.05)}
.foot-newsletter input{
flex:1;background:transparent;border:0;outline:none;
color:#fff;font-size:.94rem;padding:10px 0;font-family:inherit;
}
.foot-newsletter input::placeholder{color:#64748b}
.foot-newsletter button{
flex-shrink:0;padding:10px 18px;border-radius:10px;
background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
font-weight:700;font-size:.85rem;border:0;cursor:pointer;
transition:.25s;display:inline-flex;align-items:center;gap:6px;
}
.foot-newsletter button:hover{transform:translateY(-1px);filter:brightness(1.1)}
/* contact column */
.foot-contact-row{
display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;
color:#64748b;font-size:.93rem;line-height:1.55;
}
.foot-contact-row .ic{
flex-shrink:0;width:36px;height:36px;border-radius:10px;
background:#f7fee7;border:1px solid #bbf7d0;
display:grid;place-items:center;color:var(--green-dark);
}
.foot-contact-row .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foot-contact-row strong{color:#0b1220;font-weight:700;display:block;font-size:.92rem;margin-bottom:2px}
.foot-contact-row a{color:inherit;text-decoration:none;transition:.2s}
.foot-contact-row a:hover{color:var(--green)}
[data-theme="dark"] .foot-contact-row a:hover{color:#86efac}
/* massive brand wordmark — SVG scales perfectly to container */
.foot-mark{
width:100%;padding:20px 0 0;margin-top:20px;
user-select:none;pointer-events:none;
display:block;line-height:0;
}
.foot-mark svg{width:100%;height:auto;display:block}
.foot-mark text{
font-family:"Space Grotesk","Inter",sans-serif;
font-weight:700;letter-spacing:-6;
fill:url(#footMarkGrad);
}
/* bottom bar */
.foot-bottom{
display:flex;gap:30px;justify-content:space-between;align-items:center;
padding:24px 0;border-top:1px solid #e2e8f0;
color:#64748b;font-size:.88rem;flex-wrap:wrap;
}
.foot-bottom-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-bottom a{color:#64748b;font-weight:500;transition:.2s}
.foot-bottom a:hover{color:var(--green-dark)}
/* legacy support */
.foot-services{display:none}
.foot-copy{display:none}
/* dark theme footer override */
[data-theme="dark"] .site-footer{
background:linear-gradient(180deg,#070b14 0%,#0b1220 100%);
border-top-color:#1e293b;color:#cbd5e1;
}
[data-theme="dark"] .site-footer:after{background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px)}
[data-theme="dark"] .site-footer h4{color:#fff}
[data-theme="dark"] .site-footer ul li a{color:#94a3b8}
[data-theme="dark"] .site-footer ul li a:hover{color:#22c55e}
[data-theme="dark"] .foot-brand,[data-theme="dark"] .foot-brand .wordmark,[data-theme="dark"] .foot-brand .wordmark b{color:#fff}
[data-theme="dark"] .foot-tag{color:#cbd5e1}
[data-theme="dark"] .foot-socials a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#cbd5e1;box-shadow:none}
[data-theme="dark"] .foot-socials a:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.5);color:#22c55e;box-shadow:0 8px 20px rgba(34,197,94,.2)}
[data-theme="dark"] .foot-contact-row{color:#cbd5e1}
[data-theme="dark"] .foot-contact-row strong{color:#fff}
[data-theme="dark"] .foot-contact-row .ic{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.2);color:#22c55e}
[data-theme="dark"] .foot-bottom{border-top-color:rgba(255,255,255,.06);color:#64748b}
[data-theme="dark"] .foot-bottom a{color:#94a3b8}
[data-theme="dark"] .foot-bottom a:hover{color:#22c55e}
/* back-to-top floating button */
.to-top{
position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;
border:2px solid var(--green);background:#fff;color:var(--green-dark);
display:grid;place-items:center;cursor:pointer;z-index:60;
box-shadow:0 10px 24px rgba(22,163,74,.2);
opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--green);color:#fff}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* === modern polish === */
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--green-dark);
background:linear-gradient(135deg,#f7fee7,#d1fae5);
padding:8px 16px;border-radius:999px;
box-shadow:inset 0 0 0 1px rgba(22,163,74,.18);
margin-bottom:18px;
}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
[data-theme="dark"] .eyebrow{background:linear-gradient(135deg,#0b3520,#0f2a1c);color:#86efac;box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
/* arrow on buttons */
.btn{display:inline-flex;align-items:center;gap:8px}
.btn:after{content:"→";font-weight:700;transition:transform .25s ease;display:inline-block}
.btn:hover:after{transform:translateX(4px)}
.btn-outline:after{content:"→"}
.view-more{display:inline-flex;align-items:center;gap:6px}
.view-more:after{content:"→";transition:transform .25s ease}
.view-more:hover:after{transform:translateX(4px)}
/* card hover gradient border */
.svc-card,.why-card,.wwd-card,.tcard,.card,.rev-card{position:relative}
.svc-card:before,.why-card:before,.wwd-card:before,.tcard:before,.card:before,.rev-card:before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,transparent,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
pointer-events:none;transition:background .35s ease;
}
.svc-card:hover:before,.why-card:hover:before,.wwd-card:hover:before,.tcard:hover:before,.card:hover:before,.rev-card:hover:before{
background:linear-gradient(135deg,#22c55e,#16a34a);
}
/* glow on card hover */
.svc-card,.why-card,.wwd-card,.tcard,.card{transition:transform .3s ease, box-shadow .3s ease}
.svc-card:hover,.why-card:hover,.wwd-card:hover,.tcard:hover,.card:hover{
transform:translateY(-6px);
box-shadow:0 24px 48px -12px rgba(22,163,74,.18),0 8px 24px rgba(0,0,0,.06);
}
[data-theme="dark"] .svc-card:hover,[data-theme="dark"] .why-card:hover,[data-theme="dark"] .wwd-card:hover,[data-theme="dark"] .tcard:hover,[data-theme="dark"] .card:hover{
box-shadow:0 24px 48px -12px rgba(34,197,94,.25),0 8px 24px rgba(0,0,0,.5);
}
/* dot pattern util */
.dot-bg{
background-image:radial-gradient(rgba(15,118,110,.12) 1px,transparent 1px);
background-size:22px 22px;
}
[data-theme="dark"] .dot-bg{background-image:radial-gradient(rgba(34,197,94,.18) 1px,transparent 1px)}
/* refined section heading rhythm */
.section-head{margin-bottom:48px}
.section-head h2{margin-bottom:14px}
.section-head p{font-size:1.05rem;max-width:620px;margin:0 auto}
/* refined hero */
.hero h1{font-weight:800;line-height:1.08}
.hero .lead{margin-top:18px}
/* utilities */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.list-check{list-style:none;padding:0}
.list-check li{padding:8px 0 8px 28px;position:relative;color:#374151}
.list-check li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.prose h2{margin-top:1.4em}
.prose p,.prose li{color:#374151}
/* ========= MOBILE RESPONSIVE PASS ========= */
@media (max-width:1100px){
.stats .container{grid-template-columns:repeat(3,1fr);gap:24px}
section{padding:60px 0}
.panel{padding:48px 32px 36px}
}
@media (max-width:900px){
/* spacing */
section{padding:48px 0}
.container{padding:0 18px}
.panel{padding:36px 22px 28px;border-radius:24px}
.panel .section-head{margin-bottom:24px}
/* hero */
.hero{margin-top:-80px;padding:120px 0 40px}
.page-hero{margin-top:-80px;padding:110px 0 30px}
.hero-grid{gap:30px}
.hero h1{font-size:2.1rem;line-height:1.15}
.hero p.lead{font-size:1rem}
.hero-cta{justify-content:flex-start}
.hero-logo{order:-1}
.hero-logo img{max-width:300px}
.hero-reviews{justify-content:flex-start;gap:22px}
.hero-reviews .rev img{max-height:30px}
.hero-reviews .stars{font-size:.8rem}
.hero-reviews .count{font-size:.75rem}
.hero:before,.hero:after{filter:blur(60px);opacity:.4}
/* stats — keep 2 cols, smaller numbers */
.stats .container{grid-template-columns:1fr 1fr;gap:22px}
.stats h3{font-size:2rem}
.stats p{font-size:.85rem}
/* contact form layout collapse */
section > .container[style*="grid-template-columns:1.2fr"],
section > .container[style*="1.2fr .8fr"]{
grid-template-columns:1fr !important;
}
.check-grid{grid-template-columns:1fr}
.page-hero h1{font-size:2rem}
/* CTA section */
section[style*="linear-gradient(135deg,#16a34a"]{padding:50px 0}
/* footer */
.site-footer{padding:48px 0 24px;margin-top:50px}
.footer-grid{gap:30px}
.foot-bottom{justify-content:center;text-align:center;flex-direction:column;gap:10px}
/* brand tiles smaller */
.brand-tile{flex:0 0 170px;height:100px;padding:18px}
.brand-tile img{max-height:46px}
/* navbar */
.site-header{top:10px;padding:0 12px}
.site-header .container{padding:6px 8px 6px 16px}
.brand{font-size:1.25rem}
.brand svg{width:26px;height:26px}
}
@media (max-width:600px){
/* hero further tightening */
.hero h1{font-size:1.85rem}
.hero-logo img{max-width:240px}
.hero-reviews{gap:16px}
.hero-cta .btn{width:100%;text-align:center}
/* stats — 1 col on tiny screens */
.stats .container{grid-template-columns:1fr 1fr}
.stats h3{font-size:1.8rem}
/* services hub grid auto */
.services-grid{grid-template-columns:1fr}
/* why & wwd cards smaller */
.why-card{min-height:220px;padding:28px 22px}
.why-card h3{font-size:1.4rem}
.wwd-card{min-height:280px;padding:26px 22px}
/* case study grid */
.cs-grid{gap:18px}
.cs-card .logo-tile{height:120px;padding:24px 20px}
.cs-card .logo-tile img{max-height:50px}
/* page hero */
.page-hero h1{font-size:1.7rem}
/* footer logo center */
.foot-brand{justify-content:flex-start}
.foot-services{grid-template-columns:1fr}
/* back to top */
.to-top{right:14px;bottom:14px;width:42px;height:42px}
/* buttons wider tap target */
.btn{padding:13px 22px}
/* prose pages */
.prose h2{font-size:1.3rem}
/* tcard testimonials */
.tcard{padding:22px}
}
@media (max-width:380px){
.hero h1{font-size:1.65rem}
.panel{padding:28px 16px 22px}
.stats h3{font-size:1.6rem}
}
/* ========= DARK THEME ========= */
[data-theme="dark"]{
--ink:#f1f5f9;
--ink-2:#e2e8f0;
--muted:#94a3b8;
--bg:#070b14;
--bg-2:#0f172a;
--border:#1e293b;
}
[data-theme="dark"] body{background:#070b14;color:#e2e8f0}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:#f8fafc}
[data-theme="dark"] p{color:#cbd5e1}
/* navbar */
[data-theme="dark"] .site-header .container{
background:#0f172a;
box-shadow:0 14px 34px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.04);
}
[data-theme="dark"] .brand,[data-theme="dark"] .brand .wordmark,[data-theme="dark"] .brand .wordmark b{color:#f1f5f9}
[data-theme="dark"] .nav a.navlink{color:#cbd5e1}
[data-theme="dark"] .nav a.navlink:hover{background:#1e293b;color:var(--green)}
[data-theme="dark"] .nav a.navlink.active{background:linear-gradient(135deg,#14532d,#166534);color:#bbf7d0;box-shadow:inset 0 0 0 1px rgba(34,197,94,.3)}
[data-theme="dark"] .hamb{color:#e2e8f0}
[data-theme="dark"] .hamb:hover{background:#1e293b}
/* hero */
[data-theme="dark"] .hero{
background:
radial-gradient(900px 420px at 85% 10%, rgba(34,197,94,.18), transparent 60%),
radial-gradient(700px 360px at 10% 90%, rgba(15,118,110,.18), transparent 60%),
linear-gradient(180deg,#070b14 0%,#0b1220 100%);
}
[data-theme="dark"] .hero p.lead{color:#cbd5e1}
[data-theme="dark"] .hero-reviews .count{color:#94a3b8}
[data-theme="dark"] .page-hero{background:linear-gradient(180deg,#0b1220,#070b14);border-bottom-color:#1e293b}
/* cards / surfaces */
[data-theme="dark"] .panel{background:linear-gradient(180deg,#0f172a,#0b1220);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
[data-theme="dark"] .panel .section-head p{color:#94a3b8}
[data-theme="dark"] .why-card,
[data-theme="dark"] .wwd-card,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .tcard,
[data-theme="dark"] .card,
[data-theme="dark"] .rev-card,
[data-theme="dark"] .brand-tile,
[data-theme="dark"] .cs-card .logo-tile,
[data-theme="dark"] .faq-item{
background:#111827;border-color:#1e293b;
box-shadow:0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .why-card .circle,
[data-theme="dark"] .wwd-card .circle{
background:linear-gradient(135deg,#0b3520,#0f2a1c);
box-shadow:inset 0 0 0 1px rgba(34,197,94,.2);
}
[data-theme="dark"] .why-card .circle svg,
[data-theme="dark"] .wwd-card .circle svg{stroke:#22c55e}
[data-theme="dark"] .svc-card .icon{background:linear-gradient(135deg,#0b3520,#0f2a1c)}
[data-theme="dark"] .svc-card .icon svg{stroke:#22c55e}
[data-theme="dark"] .why-card p,
[data-theme="dark"] .wwd-card p,
[data-theme="dark"] .svc-card p,
[data-theme="dark"] .tcard blockquote,
[data-theme="dark"] .tcard .role,
[data-theme="dark"] .panel-tag{color:#94a3b8}
[data-theme="dark"] .cs-card .cs-title,
[data-theme="dark"] .tcard cite{color:#f1f5f9}
/* logo tiles in dark — invert dark logos to white */
[data-theme="dark"] .brand-tile img,
[data-theme="dark"] .cs-card .logo-tile img{filter:brightness(0) invert(1) opacity(.92)}
/* forms */
[data-theme="dark"] form input[type=text],
[data-theme="dark"] form input[type=email],
[data-theme="dark"] form input[type=tel],
[data-theme="dark"] form select,
[data-theme="dark"] form textarea{
background:#0f172a;color:#f1f5f9;border-color:#1e293b;
}
[data-theme="dark"] form input::placeholder,
[data-theme="dark"] form textarea::placeholder{color:#64748b}
[data-theme="dark"] .check-grid label{background:#0f172a;border-color:#1e293b;color:#cbd5e1}
/* footer */
[data-theme="dark"] .site-footer{background:#070b14;border-top-color:#1e293b}
[data-theme="dark"] .site-footer ul li a,[data-theme="dark"] .foot-bottom a{color:#cbd5e1}
[data-theme="dark"] .site-footer ul li a:hover,[data-theme="dark"] .foot-bottom a:hover{color:var(--green)}
[data-theme="dark"] .foot-brand,[data-theme="dark"] .foot-brand .wordmark,[data-theme="dark"] .foot-brand .wordmark b{color:#f1f5f9}
[data-theme="dark"] .foot-socials a{border-color:#1e293b;color:#e2e8f0}
[data-theme="dark"] .foot-socials a:hover{border-color:var(--green);color:var(--green)}
[data-theme="dark"] .foot-copy{color:#cbd5e1}
[data-theme="dark"] .foot-bottom{border-top-color:#1e293b;color:#cbd5e1}
/* back to top */
[data-theme="dark"] .to-top{background:#0f172a}
[data-theme="dark"] .to-top:hover{background:var(--green);color:#fff}
/* faq */
[data-theme="dark"] .faq-q{color:#f1f5f9}
[data-theme="dark"] .faq-a{color:#cbd5e1}
/* prose pages */
[data-theme="dark"] .prose p,[data-theme="dark"] .prose li{color:#cbd5e1}
/* theme toggle button */
.theme-toggle{
background:none;border:1px solid var(--border);
width:38px;height:38px;border-radius:50%;cursor:pointer;
display:grid;place-items:center;color:#0b1220;
margin-right:8px;transition:.2s;
}
.theme-toggle:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle{color:#f1f5f9;border-color:#334155}
[data-theme="dark"] .theme-toggle:hover{color:#22c55e;border-color:#22c55e}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
/* ===================== ABOUT PAGE — PREMIUM ===================== */
.about-hero{position:relative;overflow:hidden;padding:140px 0 90px;background:
radial-gradient(1200px 500px at 85% -10%, rgba(34,197,94,.18), transparent 60%),
radial-gradient(900px 400px at 10% 10%, rgba(15,118,110,.12), transparent 60%),
linear-gradient(180deg,#f7fee7 0%,#ffffff 90%);
border-bottom:1px solid var(--border);margin-top:-90px}
.about-hero:before{content:"";position:absolute;inset:0;background-image:
radial-gradient(circle at 20px 20px, rgba(17,24,39,.05) 1px, transparent 1.5px);
background-size:36px 36px;opacity:.35;pointer-events:none}
.about-hero .container{position:relative;max-width:1100px;text-align:center}
.about-hero .kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
background:#fff;border:1px solid var(--border);border-radius:999px;
font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:#16a34a;box-shadow:0 4px 16px rgba(17,24,39,.06);margin-bottom:22px}
.about-hero .kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.about-hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;font-weight:800}
.about-hero .lead{max-width:780px;margin:0 auto;font-size:1.15rem;color:#334155;line-height:1.65}
.about-hero .hero-sub{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px}
.about-hero .hero-sub .chip{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--border);font-weight:600;font-size:.85rem;color:#0b1220}
[data-theme="dark"] .about-hero{background:
radial-gradient(1200px 500px at 85% -10%, rgba(34,197,94,.12), transparent 60%),
linear-gradient(180deg,#0b1220 0%,#0f172a 100%)}
[data-theme="dark"] .about-hero .kicker{background:#111827;border-color:#1e293b;color:#86efac}
[data-theme="dark"] .about-hero .lead{color:#cbd5e1}
[data-theme="dark"] .about-hero .hero-sub .chip{background:#111827;border-color:#1e293b;color:#f1f5f9}
/* Stats row — premium */
.about-stats{padding:70px 0;background:#fff;border-bottom:1px solid var(--border)}
.about-stats .container{max-width:1200px;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.about-stats .stat{padding:22px 18px;text-align:center;border-right:1px solid var(--border);position:relative;transition:.3s}
.about-stats .stat:last-child{border-right:none}
.about-stats .stat:hover{transform:translateY(-3px)}
.about-stats .stat .num{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:#0b1220;line-height:1;margin-bottom:8px}
.about-stats .stat .num b{color:var(--green);font-weight:800}
.about-stats .stat .lbl{font-size:.82rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
[data-theme="dark"] .about-stats{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .about-stats .stat{border-color:#1e293b}
[data-theme="dark"] .about-stats .stat .num{color:#f1f5f9}
[data-theme="dark"] .about-stats .stat .lbl{color:#94a3b8}
@media (max-width:900px){.about-stats .container{grid-template-columns:repeat(3,1fr)}.about-stats .stat:nth-child(3n){border-right:none}.about-stats .stat:nth-child(-n+3){border-bottom:1px solid var(--border)}}
@media (max-width:520px){.about-stats .container{grid-template-columns:repeat(2,1fr)}.about-stats .stat{border-right:none!important;border-bottom:1px solid var(--border)}}
/* Generic section kicker for premium sections */
.about-sec{padding:100px 0}
.about-sec .kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#16a34a;margin-bottom:12px}
.about-sec .sec-head{text-align:center;max-width:820px;margin:0 auto 60px}
.about-sec .sec-head h2{font-size:clamp(2rem,3.5vw,2.75rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 16px;font-weight:800}
.about-sec .sec-head p{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:0}
[data-theme="dark"] .about-sec .kicker{color:#86efac}
[data-theme="dark"] .about-sec .sec-head p{color:#94a3b8}
/* Who We Are / Mission-Vision — premium panels */
.mv-wrap{background:linear-gradient(135deg,#eff6f5 0%,#f5fbf0 100%);padding:72px 28px;border-radius:28px;position:relative;overflow:hidden;max-width:1280px;margin:0 auto}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1200px;margin:0 auto;position:relative}
.mv-grid:before{content:"";position:absolute;left:50%;top:4%;bottom:4%;width:3px;background:linear-gradient(180deg,#c6e44a 0%,#22c55e 50%,#16a34a 100%);transform:translateX(-50%);border-radius:3px;z-index:0}
.mv-card{background:#fff;border:none;border-radius:26px;padding:56px 48px;position:relative;overflow:hidden;box-shadow:0 30px 60px -24px rgba(15,23,42,.2);min-height:480px;transition:.35s}
.mv-card:before{display:none}
.mv-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -20px rgba(15,23,42,.22)}
.mv-card .mv-icon{display:none}
.mv-card h3{font-size:clamp(2.3rem,4.5vw,3.6rem);line-height:.95;letter-spacing:-.02em;margin:0;font-weight:800;background:linear-gradient(135deg,#0b4d4a 0%,#16a34a 45%,#14532d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;position:relative;z-index:2}
.mv-card h3:after{content:"";display:block;width:110px;height:2px;background:linear-gradient(90deg,#16a34a,#14532d);margin:22px 0 34px;opacity:.35}
.mv-card p{font-size:1.03rem;line-height:1.75;color:#334155;position:relative;z-index:2;margin:0}
.mv-card p strong{color:#0b1220;font-weight:700}
.mv-card .mv-deco{position:absolute;opacity:.14;pointer-events:none;z-index:1}
.mv-card .mv-deco svg{width:100%;height:100%;stroke:#0b1220;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mv-card.mv-vision .mv-deco{top:28px;right:28px;width:210px;height:150px}
.mv-card.mv-mission .mv-deco{bottom:24px;right:28px;width:220px;height:200px}
[data-theme="dark"] .mv-wrap{background:linear-gradient(135deg,#0b1220 0%,#0f172a 100%)}
[data-theme="dark"] .mv-card{background:#111827;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
[data-theme="dark"] .mv-card h3{background:linear-gradient(135deg,#5eead4 0%,#86efac 50%,#4ade80 100%);-webkit-background-clip:text;background-clip:text}
[data-theme="dark"] .mv-card h3:after{background:linear-gradient(90deg,#5eead4,#86efac)}
[data-theme="dark"] .mv-card p{color:#cbd5e1}
[data-theme="dark"] .mv-card p strong{color:#f1f5f9}
[data-theme="dark"] .mv-card .mv-deco svg{stroke:#e2e8f0;opacity:.8}
@media (max-width:900px){.mv-wrap{padding:40px 16px}.mv-grid{grid-template-columns:1fr;gap:24px}.mv-grid:before{display:none}.mv-card{padding:44px 32px;min-height:auto}.mv-card.mv-vision .mv-deco,.mv-card.mv-mission .mv-deco{width:140px;height:100px;top:20px;right:20px;bottom:auto}}
.intro-lead{max-width:860px;margin:0 auto 60px;text-align:center;font-size:1.2rem;line-height:1.7;color:#334155;padding:32px 40px;background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,rgba(34,197,94,.4),rgba(15,118,110,.4)) border-box;
border:1px solid transparent;border-radius:20px}
.intro-lead strong{color:#0b1220}
[data-theme="dark"] .intro-lead{background:linear-gradient(#111827,#111827) padding-box,linear-gradient(135deg,rgba(34,197,94,.4),rgba(15,118,110,.4)) border-box;color:#cbd5e1}
[data-theme="dark"] .intro-lead strong{color:#f1f5f9}
/* Core Values — numbered cards */
.values-section{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);position:relative}
[data-theme="dark"] .values-section{background:linear-gradient(180deg,#0b1220 0%,#0f172a 100%)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto}
.value-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px 28px;position:relative;transition:.3s;overflow:hidden}
.value-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(17,24,39,.08);border-color:#bbf7d0}
.value-card:hover .val-num{color:var(--green);opacity:.3}
.value-card .val-num{position:absolute;top:20px;right:24px;font-size:2.6rem;font-weight:800;color:#e2e8f0;letter-spacing:-.02em;transition:.3s;line-height:1}
.value-card .val-icon{width:46px;height:46px;border-radius:12px;background:#f7fee7;display:grid;place-items:center;margin-bottom:18px}
.value-card .val-icon svg{width:22px;height:22px;stroke:var(--green-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.value-card h3{font-size:1.15rem;margin:0 0 10px;font-weight:700}
.value-card p{color:var(--muted);line-height:1.6;margin:0;font-size:.95rem}
[data-theme="dark"] .value-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .value-card .val-num{color:#1e293b}
[data-theme="dark"] .value-card .val-icon{background:rgba(34,197,94,.14)}
[data-theme="dark"] .value-card .val-icon svg{stroke:#86efac}
[data-theme="dark"] .value-card p{color:#94a3b8}
@media (max-width:900px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.values-grid{grid-template-columns:1fr}}
/* Process — Launch → Optimize → Scale */
.process-section{padding:100px 0;background:#fff}
[data-theme="dark"] .process-section{background:#0f172a}
.process-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;max-width:1200px;margin:0 auto}
.process-track:before{content:"";position:absolute;top:56px;left:14%;right:14%;height:2px;
background-image:linear-gradient(90deg,var(--green) 50%,transparent 50%);background-size:14px 2px;background-repeat:repeat-x;z-index:0;opacity:.5}
@media (max-width:820px){.process-track{grid-template-columns:1fr}.process-track:before{display:none}}
.phase-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:36px 28px 30px;position:relative;z-index:1;text-align:left;transition:.3s}
.phase-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(17,24,39,.08);border-color:#bbf7d0}
.phase-card .phase-badge{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;display:grid;place-items:center;margin:0 auto 22px;font-weight:800;font-size:1.6rem;box-shadow:0 12px 28px rgba(22,163,74,.3);border:4px solid #fff}
.phase-card h3{font-size:1.4rem;margin:0 0 20px;font-weight:800;text-align:center;letter-spacing:-.01em}
.phase-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.phase-card ul li{position:relative;padding-left:28px;color:#334155;line-height:1.55;font-size:.95rem}
.phase-card ul li:before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:#f7fee7;
background-image:url("data:image/svg+xml;utf8,");
background-size:10px 10px;background-repeat:no-repeat;background-position:center}
[data-theme="dark"] .phase-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .phase-card .phase-badge{border-color:#111827}
[data-theme="dark"] .phase-card ul li{color:#cbd5e1}
[data-theme="dark"] .phase-card ul li:before{background-color:rgba(34,197,94,.14)}
/* Service Expertise — premium cards */
.services-expertise{padding:100px 0;background:linear-gradient(180deg,#fff 0%,#f7fee7 100%);position:relative;overflow:hidden}
.services-expertise:before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.12),transparent 70%);pointer-events:none}
.services-expertise:after{content:"";position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(15,118,110,.09),transparent 70%);pointer-events:none}
[data-theme="dark"] .services-expertise{background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%)}
.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1200px;margin:0 auto;position:relative;z-index:1}
@media (max-width:900px){.expertise-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.expertise-grid{grid-template-columns:1fr}}
.exp-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px 26px 26px;transition:.35s;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px;min-height:220px}
.exp-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#22c55e,#16a34a);transform:scaleY(0);transform-origin:top;transition:.35s}
.exp-card:after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-left:60px solid transparent;border-top:60px solid rgba(34,197,94,0);transition:.35s}
.exp-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(15,23,42,.12);border-color:transparent}
.exp-card:hover:before{transform:scaleY(1)}
.exp-card:hover:after{border-top-color:rgba(34,197,94,.1)}
.exp-card .exp-num{position:absolute;top:18px;right:22px;font-size:2.2rem;font-weight:800;color:#f1f5f9;letter-spacing:-.02em;line-height:1;transition:.35s;z-index:1}
.exp-card:hover .exp-num{color:#bbf7d0;transform:scale(1.05)}
.exp-card .exp-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#dcfce7 0%,#ccfbf1 100%);display:grid;place-items:center;transition:.35s;position:relative;z-index:2}
.exp-card:hover .exp-icon{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);transform:rotate(-5deg) scale(1.05);box-shadow:0 14px 28px rgba(22,163,74,.32)}
.exp-card .exp-icon svg{width:26px;height:26px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.35s}
.exp-card:hover .exp-icon svg{stroke:#fff}
.exp-card h3{font-size:1.1rem;margin:4px 0 0;font-weight:700;color:#0b1220;position:relative;z-index:2;letter-spacing:-.01em}
.exp-card p{margin:0;color:var(--muted);line-height:1.55;font-size:.9rem;position:relative;z-index:2;flex:1}
.exp-card .exp-link{display:inline-flex;align-items:center;gap:6px;color:var(--green-dark);font-weight:600;font-size:.88rem;margin-top:6px;position:relative;z-index:2}
.exp-card .exp-link:after{content:"→";transition:transform .3s ease;display:inline-block}
.exp-card:hover .exp-link:after{transform:translateX(5px)}
[data-theme="dark"] .exp-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .exp-card h3{color:#f1f5f9}
[data-theme="dark"] .exp-card .exp-num{color:#1e293b}
[data-theme="dark"] .exp-card:hover .exp-num{color:rgba(187,247,208,.25)}
[data-theme="dark"] .exp-card .exp-icon{background:rgba(34,197,94,.14)}
[data-theme="dark"] .exp-card .exp-icon svg{stroke:#86efac}
[data-theme="dark"] .exp-card .exp-link{color:#22c55e}
.svc-closing{max-width:780px;margin:50px auto 0;text-align:center;color:var(--muted);font-style:italic;line-height:1.7;position:relative;z-index:1}
/* Why Choose — feature tiles */
.why-section{padding:100px 0;background:#fff}
[data-theme="dark"] .why-section{background:#0f172a}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto}
@media (max-width:820px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-tile{background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px;display:flex;align-items:flex-start;gap:14px;transition:.25s}
.why-tile:hover{border-color:#bbf7d0;box-shadow:0 16px 32px rgba(17,24,39,.07);transform:translateY(-3px)}
.why-tile .tile-check{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:grid;place-items:center;box-shadow:0 6px 16px rgba(22,163,74,.25)}
.why-tile .tile-check svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.why-tile p{margin:0;color:#0b1220;font-weight:500;line-height:1.55;font-size:.97rem}
[data-theme="dark"] .why-tile{background:#111827;border-color:#1e293b}
[data-theme="dark"] .why-tile p{color:#f1f5f9}
.why-promise{max-width:860px;margin:48px auto 0;text-align:center;font-size:1.3rem;line-height:1.55;font-weight:700;color:#0b1220;padding:32px;background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#22c55e,#16a34a) border-box;
border:2px solid transparent;border-radius:22px}
[data-theme="dark"] .why-promise{background:linear-gradient(#111827,#111827) padding-box,linear-gradient(135deg,#22c55e,#16a34a) border-box;color:#f1f5f9}
/* Final CTA */
.about-cta{padding:90px 24px;background:linear-gradient(135deg,#0b1220 0%,#16a34a 100%);position:relative;overflow:hidden}
.about-cta:before{content:"";position:absolute;inset:0;background:
radial-gradient(600px 300px at 20% 30%, rgba(34,197,94,.25), transparent 60%),
radial-gradient(500px 260px at 85% 70%, rgba(34,197,94,.15), transparent 60%);pointer-events:none}
.about-cta .container{position:relative;max-width:900px;text-align:center}
.about-cta h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:0 0 18px;line-height:1.15;letter-spacing:-.01em;font-weight:800}
.about-cta h2 span{color:#bbf7d0}
.about-cta p{color:#e2e8f0;font-size:1.1rem;margin:0 0 30px;line-height:1.6}
.about-cta .btn{padding:14px 34px;font-size:1rem}
/* Fade-in on scroll (pure CSS, first paint graceful) */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.fade-up.in{opacity:1;transform:none}
/* ===================== SERVICE PAGES — PREMIUM ===================== */
.process-track.auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.process-track.auto:before{display:none}
.phase-card p{color:#334155;line-height:1.6;margin:0;font-size:.95rem;text-align:left}
[data-theme="dark"] .phase-card p{color:#cbd5e1}
/* Service hero breadcrumb */
.about-hero .breadcrumb{display:inline-block;font-size:.85rem;color:var(--muted);margin-bottom:14px;letter-spacing:.04em}
[data-theme="dark"] .about-hero .breadcrumb{color:#94a3b8}
/* Service deliverables compact tiles */
.svc-deliver-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1200px;margin:0 auto}
@media (max-width:820px){.svc-deliver-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.svc-deliver-grid{grid-template-columns:1fr}}
.svc-deliver{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:#fff;border:1px solid var(--border);border-radius:14px;transition:.25s}
.svc-deliver:hover{transform:translateY(-3px);border-color:#bbf7d0;box-shadow:0 12px 28px rgba(17,24,39,.06)}
.svc-deliver .dot{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:grid;place-items:center;box-shadow:0 4px 10px rgba(22,163,74,.25)}
.svc-deliver .dot svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.svc-deliver p{margin:0;color:#0b1220;font-weight:500;line-height:1.5;font-size:.95rem}
[data-theme="dark"] .svc-deliver{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-deliver p{color:#f1f5f9}
/* Service FAQ section */
.svc-faq-wrap{max-width:820px;margin:0 auto}
/* ===================== NAV DROPDOWN (Services) ===================== */
.has-dd{position:relative}
.has-dd .dd-caret{display:inline-block;font-size:.75em;margin-left:2px;transition:transform .25s ease;opacity:.75}
.has-dd:hover .dd-caret,.has-dd:focus-within .dd-caret,.has-dd.open .dd-caret{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(10px);background:#fff;border-radius:18px;padding:10px;min-width:320px;box-shadow:0 28px 60px rgba(15,23,42,.2);border:1px solid var(--border);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;z-index:1000;pointer-events:none}
.dd-menu:before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:#fff;border-top:1px solid var(--border);border-left:1px solid var(--border);z-index:1}
/* Invisible bridge that extends hover area from navlink to menu so quick cursor moves don't dismiss it */
.dd-bridge{position:absolute;top:-18px;left:-18px;right:-18px;height:22px;display:block;pointer-events:auto;background:transparent}
.has-dd{padding:3px 0}
.has-dd:focus-within .dd-menu,.has-dd.open .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;transition-delay:0s, 0s, 0s}
.has-dd:hover .dd-caret{transform:rotate(180deg)}
.dd-menu a{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;color:#0b1220;font-weight:500;font-size:.92rem;text-decoration:none;transition:background .15s, color .15s;white-space:nowrap}
.dd-menu a:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;opacity:.4;transition:.15s}
.dd-menu a:hover{background:#f7fee7;color:var(--green-dark)}
.dd-menu a:hover:before{opacity:1;transform:scale(1.3);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.dd-menu a.active{background:linear-gradient(135deg,#f7fee7 0%,#ccfbf1 100%);color:#16a34a;font-weight:700}
.dd-menu a.active:before{background:#16a34a;opacity:1;transform:scale(1.3);box-shadow:0 0 0 3px rgba(15,118,110,.22)}
.dd-menu a.active:after{content:"✓";margin-left:auto;color:#16a34a;font-weight:800;font-size:.9rem;padding-left:10px}
[data-theme="dark"] .dd-menu{background:#0f172a;border-color:#1e293b;box-shadow:0 28px 60px rgba(0,0,0,.6)}
[data-theme="dark"] .dd-menu:before{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .dd-menu a{color:#e2e8f0}
[data-theme="dark"] .dd-menu a:hover{background:rgba(34,197,94,.12);color:#86efac}
[data-theme="dark"] .dd-menu a.active{background:rgba(34,197,94,.16);color:#86efac}
[data-theme="dark"] .dd-menu a.active:before{background:#86efac}
[data-theme="dark"] .dd-menu a.active:after{color:#86efac}
@media (max-width:960px){
.dd-menu{position:static;transform:none;min-width:0;box-shadow:none;border:none;padding:4px 0 8px 14px;background:transparent;opacity:1;visibility:visible;pointer-events:auto;display:none;transition:none}
.dd-menu:before,.dd-bridge{display:none}
/* must override the desktop open-state transform/position that yanks the menu off-screen */
.has-dd:focus-within .dd-menu,.has-dd.open .dd-menu{display:flex;position:static;transform:none}
.dd-menu a{padding:10px 12px;font-size:.9rem;white-space:normal}
}
/* ===================== SERVICE OPTIONAL SECTIONS ===================== */
.svc-whatis-card{max-width:900px;margin:0 auto;padding:44px 48px;background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,rgba(34,197,94,.35),rgba(15,118,110,.35)) border-box;
border:1px solid transparent;border-radius:24px;box-shadow:0 20px 40px rgba(15,23,42,.06);line-height:1.75;color:#334155;font-size:1.05rem}
.svc-whatis-card strong{color:#0b1220}
.svc-whatis-card em{color:#16a34a;font-style:italic}
[data-theme="dark"] .svc-whatis-card{background:linear-gradient(#111827,#111827) padding-box,linear-gradient(135deg,rgba(34,197,94,.35),rgba(15,118,110,.35)) border-box;color:#cbd5e1}
[data-theme="dark"] .svc-whatis-card strong{color:#f1f5f9}
[data-theme="dark"] .svc-whatis-card em{color:#86efac}
.sub-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1200px;margin:0 auto}
@media (max-width:820px){.sub-svc-grid{grid-template-columns:1fr}}
.sub-svc-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px 28px;transition:.3s;position:relative;overflow:hidden;display:flex;gap:18px;align-items:flex-start}
.sub-svc-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(15,23,42,.1);border-color:#bbf7d0}
.sub-svc-card .ss-icon{flex-shrink:0;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#dcfce7,#ccfbf1);display:grid;place-items:center;transition:.3s}
.sub-svc-card:hover .ss-icon{background:linear-gradient(135deg,#22c55e,#16a34a)}
.sub-svc-card .ss-icon svg{width:26px;height:26px;stroke:#16a34a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.sub-svc-card:hover .ss-icon svg{stroke:#fff}
.sub-svc-card h3{font-size:1.15rem;margin:0 0 8px;font-weight:700;color:#0b1220;letter-spacing:-.01em}
.sub-svc-card p{margin:0;color:var(--muted);line-height:1.6;font-size:.95rem}
[data-theme="dark"] .sub-svc-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .sub-svc-card h3{color:#f1f5f9}
[data-theme="dark"] .sub-svc-card .ss-icon{background:rgba(34,197,94,.14)}
[data-theme="dark"] .sub-svc-card .ss-icon svg{stroke:#86efac}
.industries-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.industry-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:#fff;border:1px solid var(--border);font-weight:600;font-size:.92rem;color:#0b1220;transition:.25s;cursor:default}
.industry-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.industry-pill:hover{transform:translateY(-3px);border-color:var(--green);color:var(--green-dark);box-shadow:0 10px 24px rgba(17,24,39,.08)}
[data-theme="dark"] .industry-pill{background:#111827;border-color:#1e293b;color:#f1f5f9}
[data-theme="dark"] .industry-pill:hover{border-color:#22c55e;color:#86efac}
/* ===================== PREMIUM DECORATIVE ACCENTS ===================== */
/* Hand-drawn squiggle underline on every .green_text accent word */
.about-hero h1 .green_text, .about-sec .sec-head h2 .green_text, .about-cta h2 span{position:relative;display:inline-block;padding-bottom:6px}
.about-hero h1 .green_text:after, .about-sec .sec-head h2 .green_text:after, .about-cta h2 span:after{
content:"";position:absolute;left:-2%;right:-2%;bottom:-2px;height:.36em;
background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%;
pointer-events:none;opacity:.85
}
.about-cta h2 span:after{background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%}
[data-theme="dark"] .about-hero h1 .green_text:after, [data-theme="dark"] .about-sec .sec-head h2 .green_text:after{background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%}
/* Floating hero accents — star, blob, leaf */
.about-hero .hero-orb-1, .about-hero .hero-orb-2, .about-hero .hero-orb-3, .about-hero .hero-orb-4{position:absolute;pointer-events:none;z-index:0}
.about-hero .hero-orb-1{top:18%;left:7%;width:38px;height:38px;color:#22c55e;opacity:.55;animation:hero-float 7s ease-in-out infinite}
.about-hero .hero-orb-2{top:30%;right:9%;width:54px;height:54px;color:#16a34a;opacity:.45;animation:hero-float 9s ease-in-out 1s infinite}
.about-hero .hero-orb-3{bottom:18%;left:14%;width:28px;height:28px;color:#16a34a;opacity:.5;animation:hero-float 6.5s ease-in-out .5s infinite}
.about-hero .hero-orb-4{bottom:26%;right:16%;width:42px;height:42px;color:#22c55e;opacity:.35;animation:hero-float 8.5s ease-in-out 2s infinite}
.about-hero [class^="hero-orb"] svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}
.about-hero .container{position:relative;z-index:1}
/* Marquee strip — dark band of values scrolling */
.marquee-strip{background:linear-gradient(90deg,#0b1220 0%,#16a34a 100%);padding:26px 0;overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.marquee-strip:before,.marquee-strip:after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee-strip:before{left:0;background:linear-gradient(90deg,#0b1220,transparent)}
.marquee-strip:after{right:0;background:linear-gradient(-90deg,#16a34a,transparent)}
.marquee-track{display:flex;gap:64px;animation:marquee-scroll 36s linear infinite;white-space:nowrap;width:max-content;align-items:center}
.marquee-item{color:#bbf7d0;font-size:1.55rem;font-weight:800;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:22px}
.marquee-item:after{content:"✦";color:#22c55e;font-size:1.1rem;opacity:.7;margin-left:22px}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Sticker-style rotations on value cards — breaks the sterile grid */
.values-grid .value-card{transform-origin:center}
.values-grid .value-card:nth-child(6n+1){transform:rotate(-.55deg)}
.values-grid .value-card:nth-child(6n+2){transform:rotate(.3deg) translateY(6px)}
.values-grid .value-card:nth-child(6n+3){transform:rotate(-.25deg)}
.values-grid .value-card:nth-child(6n+4){transform:rotate(.45deg)}
.values-grid .value-card:nth-child(6n+5){transform:rotate(-.35deg) translateY(4px)}
.values-grid .value-card:nth-child(6n){transform:rotate(.2deg)}
.values-grid .value-card:hover{transform:rotate(0) translateY(-6px)!important}
/* Big decorative quotation mark on What-Is card */
.svc-whatis-card{position:relative;padding-top:80px!important}
.svc-whatis-card:before{content:"\201C";position:absolute;top:-4px;left:32px;font-family:Georgia,"Times New Roman",serif;font-size:8rem;line-height:1;color:var(--green);opacity:.18;font-weight:900;pointer-events:none}
.svc-whatis-card:after{content:"";position:absolute;top:24px;right:32px;width:80px;height:3px;background:linear-gradient(90deg,var(--green),transparent);border-radius:999px;opacity:.4}
/* Squiggly divider between sections */
.svc-divider{display:block;max-width:140px;height:24px;margin:0 auto;background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%}
[data-theme="dark"] .svc-divider{filter:hue-rotate(0) brightness(1.4)}
/* Offset sub-svc grid — feature first card, asymmetric */
.sub-svc-grid{align-items:stretch}
.sub-svc-grid .sub-svc-card:nth-child(odd){transform:rotate(-.15deg)}
.sub-svc-grid .sub-svc-card:nth-child(even){transform:rotate(.2deg) translateY(8px)}
.sub-svc-grid .sub-svc-card:hover{transform:rotate(0) translateY(-4px)!important}
/* Handwritten-style accent badge */
.ink-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:transparent;border:2px dashed var(--green);border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#16a34a;transform:rotate(-1deg);margin-bottom:10px}
[data-theme="dark"] .ink-badge{border-color:#86efac;color:#86efac}
/* Subtle grain on about-sec backgrounds */
.values-section,.process-section{position:relative}
.values-section:after,.process-section:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20px 20px,rgba(17,24,39,.025) 1px,transparent 1.5px);background-size:28px 28px;pointer-events:none;z-index:0}
.values-section > *,.process-section > *{position:relative;z-index:1}
/* Number glyph in values-grid — bigger, overflow sticker */
.value-card .val-num{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:3.4rem!important;top:14px!important;right:22px!important}
/* Process phase badge — replace digit bubble with a stamped look */
.phase-card .phase-badge{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:900;letter-spacing:-.02em}
/* ===================== PROCESS TIMELINE (vertical, editorial) ===================== */
.process-timeline{max-width:900px;margin:0 auto;position:relative;padding:10px 0}
.tl-step{display:grid;grid-template-columns:110px 1fr;gap:30px;padding:28px 0;align-items:start;position:relative}
.tl-step + .tl-step{padding-top:36px}
.tl-step .tl-marker{position:relative;display:flex;justify-content:center;min-height:70px}
.tl-step .tl-num{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#fff;display:grid;place-items:center;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:900;font-size:1.55rem;letter-spacing:-.02em;box-shadow:0 14px 30px rgba(22,163,74,.3), inset 0 1px 0 rgba(255,255,255,.2);border:4px solid #fff;position:relative;z-index:2;transition:transform .35s ease}
.tl-step .tl-num:before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px dashed var(--green);opacity:.4}
.tl-step:hover .tl-num{transform:scale(1.08) rotate(-6deg)}
.tl-step:not(:last-child) .tl-marker:after{content:"";position:absolute;top:72px;left:50%;transform:translateX(-50%);width:2px;height:calc(100% + 64px);background-image:linear-gradient(180deg,var(--green) 50%,transparent 50%);background-size:2px 10px;background-repeat:repeat-y;opacity:.45;z-index:1}
.tl-step .tl-content{padding:8px 24px 8px 4px;min-height:70px}
.tl-step .tl-content .tl-kicker{display:inline-block;padding:4px 12px;background:#f7fee7;color:#16a34a;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;border:1px solid rgba(34,197,94,.2)}
.tl-step .tl-content h3{margin:0 0 10px;font-size:1.3rem;font-weight:800;letter-spacing:-.015em;color:#0b1220;line-height:1.25}
.tl-step .tl-content p{margin:0;color:#334155;line-height:1.7;font-size:1rem}
.tl-step .tl-arrow{position:absolute;top:44px;left:110px;color:var(--green);opacity:.3;pointer-events:none;transform:translateX(-100%) rotate(0);transition:.3s}
.tl-step:hover .tl-arrow{opacity:.7;transform:translateX(-90%) rotate(8deg)}
.tl-step .tl-arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Alternate subtle tilt on odd/even steps to feel hand-placed */
.tl-step:nth-child(odd) .tl-content{transform:rotate(-.2deg)}
.tl-step:nth-child(even) .tl-content{transform:rotate(.25deg)}
[data-theme="dark"] .tl-step .tl-num{border-color:#0f172a}
[data-theme="dark"] .tl-step .tl-num:before{border-color:#86efac;opacity:.25}
[data-theme="dark"] .tl-step .tl-content h3{color:#f1f5f9}
[data-theme="dark"] .tl-step .tl-content p{color:#cbd5e1}
[data-theme="dark"] .tl-step .tl-content .tl-kicker{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}
@media (max-width:640px){
.tl-step{grid-template-columns:62px 1fr;gap:16px;padding:22px 0}
.tl-step + .tl-step{padding-top:26px}
.tl-step .tl-num{width:52px;height:52px;font-size:1.15rem}
.tl-step:not(:last-child) .tl-marker:after{top:54px;height:calc(100% + 46px)}
.tl-step .tl-content{padding:4px 0 0 6px}
.tl-step .tl-content h3{font-size:1.1rem}
.tl-step .tl-arrow{display:none}
}
/* ===================== SPLIT PANEL (image + copy, alternating) ===================== */
.svc-split{padding:90px 0}
.svc-split .container{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1200px;margin:0 auto}
.svc-split.right .svc-split-img{order:2}
.svc-split.right .svc-split-copy{order:1}
.svc-split-img{border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(15,23,42,.14);position:relative;transform:rotate(-.3deg);transition:.35s}
.svc-split-img:hover{transform:rotate(0) translateY(-4px)}
.svc-split-img img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3}
.svc-split-img:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(34,197,94,.15),transparent 40%);pointer-events:none}
.svc-split-copy h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0 0 20px;color:#0b1220;background:linear-gradient(135deg,#0b4d4a,#16a34a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.svc-split-copy h2 .green_text{-webkit-text-fill-color:initial}
.svc-split-copy p{color:#334155;line-height:1.78;font-size:1rem;margin:0 0 16px}
.svc-split-copy p strong{color:#0b1220;font-weight:700}
.svc-split-copy .btn{margin-top:22px}
.svc-split-copy .best-sub{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.svc-split-copy .best-sub h3{font-size:1.15rem;font-weight:700;margin:0 0 10px;color:#0b1220}
[data-theme="dark"] .svc-split-copy h2{background:linear-gradient(135deg,#5eead4,#86efac);-webkit-background-clip:text;background-clip:text}
[data-theme="dark"] .svc-split-copy p{color:#cbd5e1}
[data-theme="dark"] .svc-split-copy p strong,[data-theme="dark"] .svc-split-copy .best-sub h3{color:#f1f5f9}
[data-theme="dark"] .svc-split-copy .best-sub{border-top-color:#1e293b}
@media (max-width:820px){.svc-split{padding:60px 0}.svc-split .container{grid-template-columns:1fr;gap:32px}.svc-split.right .svc-split-img{order:0}.svc-split.right .svc-split-copy{order:1}}
/* Platforms — 3-card */
.platforms-section{padding:90px 0;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%)}
[data-theme="dark"] .platforms-section{background:linear-gradient(180deg,#0b1220 0%,#0f172a 100%)}
.platforms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto}
@media (max-width:820px){.platforms-grid{grid-template-columns:1fr}}
.platform-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:44px 30px;text-align:center;transition:.35s;position:relative;overflow:hidden}
.platform-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(15,23,42,.12);border-color:#bbf7d0}
.platform-card:after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--green),#16a34a);transform:scaleX(0);transform-origin:left;transition:.35s}
.platform-card:hover:after{transform:scaleX(1)}
.platform-card .pf-logo{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;background:#f8fafc;display:grid;place-items:center;transition:.3s;border:1px solid var(--border)}
.platform-card:hover .pf-logo{background:linear-gradient(135deg,#dcfce7,#ccfbf1);transform:scale(1.08) rotate(-4deg);border-color:#bbf7d0}
.platform-card .pf-logo svg{width:44px;height:44px}
.platform-card h3{font-size:1.2rem;margin:0 0 10px;font-weight:800;letter-spacing:-.01em}
.platform-card p{color:var(--muted);line-height:1.65;margin:0;font-size:.95rem}
.platforms-outro{text-align:center;max-width:760px;margin:44px auto 0;color:#334155;font-weight:500;line-height:1.65;font-style:italic;position:relative}
.platforms-outro:before,.platforms-outro:after{content:"—";color:var(--green);margin:0 10px;opacity:.5}
[data-theme="dark"] .platform-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .platform-card .pf-logo{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .platforms-outro{color:#cbd5e1}
/* Benefits with images (9-card grid) */
.benefits-img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1200px;margin:0 auto}
@media (max-width:900px){.benefits-img-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.benefits-img-grid{grid-template-columns:1fr}}
.benefit-img-card{background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;transition:.35s;display:flex;flex-direction:column}
.benefit-img-card:hover{transform:translateY(-6px);box-shadow:0 28px 54px rgba(15,23,42,.1);border-color:#bbf7d0}
.benefit-img-card .bi-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;transition:.5s}
.benefit-img-card:hover .bi-img{transform:scale(1.04)}
.benefit-img-card .bi-body{padding:22px 24px 26px;flex:1}
.benefit-img-card .bi-body h3{font-size:1.1rem;margin:0 0 10px;font-weight:800;letter-spacing:-.01em;color:#0b1220}
.benefit-img-card .bi-body p{color:var(--muted);line-height:1.58;font-size:.93rem;margin:0}
.benefit-img-card .bi-body p strong{color:#0b1220}
[data-theme="dark"] .benefit-img-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .benefit-img-card .bi-body h3, [data-theme="dark"] .benefit-img-card .bi-body p strong{color:#f1f5f9}
/* Sticker rotations for image benefits too */
.benefits-img-grid .benefit-img-card:nth-child(3n+1){transform:rotate(-.25deg)}
.benefits-img-grid .benefit-img-card:nth-child(3n+2){transform:rotate(.3deg) translateY(6px)}
.benefits-img-grid .benefit-img-card:nth-child(3n){transform:rotate(-.15deg)}
.benefits-img-grid .benefit-img-card:hover{transform:rotate(0) translateY(-6px)!important}
/* ===================== SPLIT-PANEL BULLET LIST (used in Why Choose panels) ===================== */
.svc-split-copy ul.split-bullets{list-style:none;padding:0;margin:20px 0 6px;display:flex;flex-direction:column;gap:14px}
.svc-split-copy ul.split-bullets li{position:relative;padding-left:32px;line-height:1.6;color:#334155;font-size:.98rem}
.svc-split-copy ul.split-bullets li:before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--green),#16a34a);box-shadow:0 0 0 4px rgba(34,197,94,.15);transition:.2s}
.svc-split-copy ul.split-bullets li:hover:before{transform:scale(1.2);box-shadow:0 0 0 5px rgba(34,197,94,.22)}
.svc-split-copy ul.split-bullets li strong{color:#0b1220;font-weight:700}
[data-theme="dark"] .svc-split-copy ul.split-bullets li{color:#cbd5e1}
[data-theme="dark"] .svc-split-copy ul.split-bullets li strong{color:#f1f5f9}
/* ===================== SIMPLE BENEFITS (bullet list card) ===================== */
.simple-benefits-wrap{padding:80px 0}
.simple-benefits{max-width:980px;margin:0 auto;padding:56px 48px;background:#fff;border:1px solid var(--border);border-radius:28px;box-shadow:0 20px 48px rgba(15,23,42,.06);position:relative;overflow:hidden}
.simple-benefits:before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.14),transparent 70%);pointer-events:none}
.simple-benefits .kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#16a34a;margin-bottom:10px}
.simple-benefits h2{margin:0 0 28px;font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.simple-benefits h2 .green_text{background:linear-gradient(135deg,#0b4d4a,#16a34a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.simple-benefits ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 36px;position:relative;z-index:1}
@media (max-width:640px){.simple-benefits{padding:40px 28px}.simple-benefits ul{grid-template-columns:1fr}}
.simple-benefits li{position:relative;padding-left:36px;color:#334155;line-height:1.6;font-size:1.02rem}
.simple-benefits li:before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--green),#16a34a);background-image:linear-gradient(135deg,#22c55e,#16a34a), url("data:image/svg+xml;utf8,");background-size:100%,12px 12px;background-repeat:no-repeat;background-position:center,center;box-shadow:0 4px 10px rgba(22,163,74,.25)}
.simple-benefits li strong{color:#0b1220;font-weight:700}
[data-theme="dark"] .simple-benefits{background:#111827;border-color:#1e293b}
[data-theme="dark"] .simple-benefits li{color:#cbd5e1}
[data-theme="dark"] .simple-benefits li strong{color:#f1f5f9}
[data-theme="dark"] .simple-benefits .kicker{color:#86efac}
/* ===================== SERVICE HERO — subtitle line (replaces pill-kicker for service pages) ===================== */
.svc-hero .breadcrumb{display:inline-block;font-size:.82rem;color:var(--muted);margin-bottom:20px;letter-spacing:.04em;font-weight:500;background:rgba(255,255,255,.6);padding:6px 16px;border-radius:999px;border:1px solid var(--border)}
.svc-hero .breadcrumb:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:10px;vertical-align:middle;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.svc-hero h1{margin-bottom:14px}
.svc-hero .hero-subtitle{margin:0 auto 20px;max-width:820px;font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:600;color:#16a34a;line-height:1.35;letter-spacing:-.005em;font-family:"Inter Tight","Inter",sans-serif}
.svc-hero .hero-subtitle:before,.svc-hero .hero-subtitle:after{content:"";display:inline-block;width:28px;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);vertical-align:middle;margin:0 14px;opacity:.6}
.svc-hero .lead{max-width:820px;margin:0 auto 34px}
[data-theme="dark"] .svc-hero .breadcrumb{background:rgba(17,24,39,.6);border-color:#1e293b;color:#94a3b8}
[data-theme="dark"] .svc-hero .hero-subtitle{color:#86efac}
/* === Case Study Detail Pages === */
.cs-hero{position:relative;padding:90px 0 60px;background:linear-gradient(135deg,rgba(34,197,94,.08) 0%,rgba(15,118,110,.04) 60%,transparent 100%);overflow:hidden}
.cs-hero:before{content:"";position:absolute;top:-100px;right:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.18),transparent 65%);filter:blur(20px);z-index:0}
.cs-hero:after{content:"";position:absolute;bottom:-140px;left:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,118,110,.14),transparent 65%);filter:blur(20px);z-index:0}
.cs-hero .container{position:relative;z-index:1;max-width:980px}
.cs-hero .breadcrumb{display:inline-block;padding:7px 14px;background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:999px;font-size:.82rem;color:var(--muted);margin-bottom:18px;backdrop-filter:blur(6px)}
.cs-hero .breadcrumb a{color:var(--muted);text-decoration:none}
.cs-hero .breadcrumb a:hover{color:var(--green)}
.cs-hero .cs-tag{display:inline-block;padding:6px 14px;background:linear-gradient(135deg,var(--green),#16a34a);color:#fff;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;box-shadow:0 6px 18px rgba(34,197,94,.3)}
.cs-hero h1{font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.08;margin:0 0 18px;letter-spacing:-.02em}
.cs-hero .lead{max-width:760px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);line-height:1.55}
.cs-meta{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 0;position:relative;z-index:2}
.cs-meta .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cs-meta .meta-item{padding:8px 22px;border-right:1px solid var(--border)}
.cs-meta .meta-item:last-child{border-right:none}
.cs-meta .meta-item .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:6px}
.cs-meta .meta-item .val{font-size:1.02rem;font-weight:700;color:#0b1220;letter-spacing:-.01em}
[data-theme="dark"] .cs-meta{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .cs-meta .meta-item{border-color:#1e293b}
[data-theme="dark"] .cs-meta .meta-item .val{color:#f1f5f9}
@media (max-width:760px){.cs-meta .container{grid-template-columns:1fr 1fr}.cs-meta .meta-item{border-right:none;border-bottom:1px solid var(--border);padding:14px 18px}.cs-meta .meta-item:nth-child(2n){border-right:none}.cs-meta .meta-item:nth-last-child(-n+2){border-bottom:none}}
.cs-section{padding:72px 0}
.cs-section.alt{background:linear-gradient(180deg,rgba(248,250,252,.7),rgba(248,250,252,.3))}
[data-theme="dark"] .cs-section.alt{background:rgba(15,23,42,.4)}
.cs-section .cs-body{max-width:860px;margin:0 auto}
.cs-section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 20px;letter-spacing:-.015em}
.cs-section p{font-size:1.05rem;line-height:1.7;color:#334155;margin:0 0 16px}
[data-theme="dark"] .cs-section p{color:#cbd5e1}
.cs-section ul.split-bullets{margin-top:22px}
.cs-section blockquote{border-left:4px solid var(--green);background:linear-gradient(90deg,rgba(34,197,94,.06),transparent);padding:20px 26px;margin:28px 0;border-radius:0 12px 12px 0;font-size:1.1rem;font-style:italic;color:#334155;line-height:1.55}
[data-theme="dark"] .cs-section blockquote{color:#cbd5e1;background:linear-gradient(90deg,rgba(34,197,94,.1),transparent)}
.cs-results{padding:80px 0;background:linear-gradient(135deg,#0b1220 0%,#0f172a 100%);color:#fff;position:relative;overflow:hidden}
.cs-results:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(34,197,94,.18),transparent 45%),radial-gradient(circle at 85% 80%,rgba(15,118,110,.18),transparent 45%);pointer-events:none}
.cs-results .container{position:relative;z-index:1}
.cs-results .results-head{text-align:center;max-width:720px;margin:0 auto 48px}
.cs-results h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin:0 0 14px}
.cs-results .results-head p{color:#cbd5e1;font-size:1.1rem;line-height:1.55;margin:0}
.cs-results .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cs-results .metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 22px;text-align:center;transition:.3s;backdrop-filter:blur(8px)}
.cs-results .metric:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.4);background:rgba(255,255,255,.06);box-shadow:0 12px 36px rgba(34,197,94,.15)}
.cs-results .metric .num{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;color:var(--green);letter-spacing:-.02em;line-height:1;margin-bottom:10px}
.cs-results .metric .lbl{font-size:.86rem;color:#cbd5e1;letter-spacing:.03em;font-weight:500}
@media (max-width:900px){.cs-results .metrics-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cs-results .metrics-grid{grid-template-columns:1fr}}
.cs-related{padding:72px 0}
.cs-related h2{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 34px;letter-spacing:-.015em}
/* Case study breadcrumb (refined) */
.cs-crumbs{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--muted);margin-bottom:22px;backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(15,23,42,.04);max-width:100%;flex-wrap:wrap}
.cs-crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:500;padding:2px 4px;border-radius:6px;transition:.2s}
.cs-crumbs a:hover{color:var(--green);background:rgba(34,197,94,.08)}
.cs-crumbs a svg{width:14px;height:14px;fill:currentColor;opacity:.8}
.cs-crumbs .sep{color:#cbd5e1;font-size:1rem;line-height:1;user-select:none}
.cs-crumbs .current{display:inline-flex;align-items:center;padding:2px 10px;background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(15,118,110,.08));color:#0b1220;font-weight:700;border-radius:999px;font-size:.82rem;letter-spacing:-.005em}
[data-theme="dark"] .cs-crumbs{background:rgba(17,24,39,.7);border-color:#1e293b;color:#94a3b8}
[data-theme="dark"] .cs-crumbs a{color:#94a3b8}
[data-theme="dark"] .cs-crumbs a:hover{color:#86efac;background:rgba(34,197,94,.12)}
[data-theme="dark"] .cs-crumbs .sep{color:#475569}
[data-theme="dark"] .cs-crumbs .current{color:#f1f5f9;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(15,118,110,.12))}
@media (max-width:520px){.cs-crumbs{font-size:.78rem;padding:6px 12px 6px 10px;gap:6px}.cs-crumbs .current{padding:2px 8px;font-size:.76rem}}
/* === Contact page === */
.contact-hero{position:relative;padding:90px 0 50px;background:linear-gradient(135deg,rgba(34,197,94,.08) 0%,rgba(15,118,110,.04) 60%,transparent 100%);overflow:hidden}
.contact-hero:before{content:"";position:absolute;top:-100px;right:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.16),transparent 65%);filter:blur(22px);z-index:0}
.contact-hero:after{content:"";position:absolute;bottom:-140px;left:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,118,110,.14),transparent 65%);filter:blur(22px);z-index:0}
.contact-hero .container{position:relative;z-index:1;text-align:center;max-width:820px}
.contact-hero .cs-crumbs{margin-left:auto;margin-right:auto}
.contact-hero .cs-tag{display:inline-block;padding:6px 14px;background:linear-gradient(135deg,var(--green),#16a34a);color:#fff;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;box-shadow:0 6px 18px rgba(34,197,94,.3)}
.contact-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.07;margin:0 0 16px;letter-spacing:-.02em}
.contact-hero .lead{max-width:680px;margin:0 auto;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);line-height:1.55}
.contact-strip{padding:10px 0 56px;position:relative;z-index:2}
.contact-strip .strip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 0}
.contact-strip .strip-item{padding:4px 32px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:6px;min-width:0}
.contact-strip .strip-item:first-child{border-left:none;padding-left:0}
.contact-strip .strip-item:last-child{padding-right:0}
.contact-strip .sl{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.contact-strip .sv{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:700;color:#0b1220;text-decoration:none;letter-spacing:-.015em;line-height:1.25;transition:.2s}
.contact-strip .sv:hover{color:var(--green)}
.contact-strip .sv-sub{font-size:.88rem;color:var(--muted);line-height:1.55}
.contact-strip .sv-sub a{color:var(--muted);text-decoration:none;transition:.2s}
.contact-strip .sv-sub a:hover{color:var(--green)}
[data-theme="dark"] .contact-strip .strip-row{border-color:#1e293b}
[data-theme="dark"] .contact-strip .strip-item{border-color:#1e293b}
[data-theme="dark"] .contact-strip .sv{color:#f1f5f9}
[data-theme="dark"] .contact-strip .sl,[data-theme="dark"] .contact-strip .sv-sub,[data-theme="dark"] .contact-strip .sv-sub a{color:#94a3b8}
@media (max-width:820px){
.contact-strip .strip-row{grid-template-columns:1fr;padding:10px 0}
.contact-strip .strip-item{border-left:none;border-top:1px solid var(--border);padding:18px 0}
.contact-strip .strip-item:first-child{border-top:none;padding-top:18px}
[data-theme="dark"] .contact-strip .strip-item{border-color:#1e293b}
}
.contact-main{padding:40px 0 70px}
.contact-main .wrap{max-width:820px;margin:0 auto}
.c-form-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:36px;box-shadow:0 10px 40px rgba(15,23,42,.06)}
.c-form-card .form-head{margin-bottom:24px}
.c-form-card .form-head .eyebrow{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:8px}
.c-form-card .form-head h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:0 0 8px;letter-spacing:-.015em}
.c-form-card .form-head p{color:var(--muted);margin:0;font-size:.98rem}
.c-form-card .two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.c-form-card .two-up{grid-template-columns:1fr}}
.c-form-card .field label{display:block;font-size:.82rem;font-weight:600;color:#0b1220;margin-bottom:8px;letter-spacing:-.005em}
.c-form-card .field input,.c-form-card .field select,.c-form-card .field textarea{width:100%;padding:13px 15px;border:1px solid var(--border);border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff;color:#0b1220;transition:.2s;box-sizing:border-box}
.c-form-card .field input:focus,.c-form-card .field select:focus,.c-form-card .field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.c-form-card .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
@media (max-width:600px){.c-form-card .check-grid{grid-template-columns:1fr}}
.c-form-card .check-grid label{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border);border-radius:12px;font-size:.9rem;color:#334155;cursor:pointer;transition:.2s;margin:0;font-weight:500}
.c-form-card .check-grid label:hover{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.03)}
.c-form-card .check-grid input[type="checkbox"]{accent-color:var(--green);width:16px;height:16px;margin:0;flex-shrink:0}
.c-form-card .check-grid label:has(input:checked){border-color:var(--green);background:rgba(34,197,94,.08);color:#0b1220;font-weight:600}
.c-form-card .submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.c-form-card .submit-row .btn{padding:14px 30px}
.c-form-card .submit-row .hint{font-size:.82rem;color:var(--muted)}
[data-theme="dark"] .c-form-card{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .c-form-card .field label{color:#f1f5f9}
[data-theme="dark"] .c-form-card .field input,[data-theme="dark"] .c-form-card .field select,[data-theme="dark"] .c-form-card .field textarea{background:#0b1220;color:#f1f5f9;border-color:#1e293b}
[data-theme="dark"] .c-form-card .check-grid label{color:#cbd5e1;border-color:#1e293b}
[data-theme="dark"] .c-form-card .check-grid label:hover{background:rgba(34,197,94,.06)}
.c-aside{display:flex;flex-direction:column;gap:20px}
.c-info-card{background:linear-gradient(160deg,#0b1220 0%,#0f172a 100%);color:#fff;border-radius:24px;padding:32px;position:relative;overflow:hidden}
.c-info-card:before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.25),transparent 60%);filter:blur(10px)}
.c-info-card>*{position:relative;z-index:1}
.c-info-card h3{font-size:1.3rem;margin:0 0 20px;color:#fff;letter-spacing:-.015em}
.c-info-card .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.c-info-card .row:last-child{border-bottom:none}
.c-info-card .row .ic{width:38px;height:38px;border-radius:10px;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-info-card .row .ic svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2}
.c-info-card .row .txt{flex:1;min-width:0}
.c-info-card .row .lbl{font-size:.72rem;color:#94a3b8;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.c-info-card .row .val{font-size:.95rem;color:#f1f5f9;line-height:1.55;word-break:break-word}
.c-info-card .row .val a{color:#f1f5f9;text-decoration:none}
.c-info-card .row .val a:hover{color:#86efac}
.c-socials-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px}
.c-socials-card h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px;font-weight:700}
.c-socials-card .soc{display:flex;gap:10px;flex-wrap:wrap}
.c-socials-card .soc a{width:42px;height:42px;border-radius:12px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;transition:.25s}
.c-socials-card .soc a svg{width:18px;height:18px;fill:#0b1220;transition:.25s}
.c-socials-card .soc a:hover{background:linear-gradient(135deg,var(--green),#16a34a);transform:translateY(-2px)}
.c-socials-card .soc a:hover svg{fill:#fff}
[data-theme="dark"] .c-socials-card{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .c-socials-card .soc a{background:#1e293b}
[data-theme="dark"] .c-socials-card .soc a svg{fill:#f1f5f9}
.c-map{padding:0 0 70px}
.c-map .map-wrap{border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 40px rgba(15,23,42,.06);height:420px}
.c-map .map-wrap iframe{width:100%;height:100%;border:0;display:block}
[data-theme="dark"] .c-map .map-wrap{border-color:#1e293b}
/* ===================== PACKAGES / TIERS SECTION ===================== */
.packages-section{padding:90px 0;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)}
[data-theme="dark"] .packages-section{background:linear-gradient(180deg,#0b1220 0%,#0f172a 100%)}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1200px;margin:0 auto}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr}}
.pkg-card{background:#f8fafc;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:.35s;border:1px solid var(--border);position:relative}
.pkg-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(15,23,42,.1);border-color:#bbf7d0}
.pkg-card.featured{border-color:#86efac;box-shadow:0 20px 40px rgba(190,242,100,.15)}
.pkg-card.featured:before{content:"Most Popular";position:absolute;top:16px;right:16px;padding:4px 10px;background:#0b1220;color:#86efac;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;z-index:2}
.pkg-header{background:linear-gradient(135deg,#bbf7d0 0%,#86efac 100%);padding:38px 30px 34px;text-align:center;position:relative}
.pkg-header h3{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:900;margin:0 0 10px;color:#0b1220;letter-spacing:-.025em;line-height:1}
.pkg-header p{margin:0;color:#0b1220;font-weight:500;line-height:1.4;font-size:.95rem;opacity:.85;max-width:280px;margin-left:auto;margin-right:auto}
.pkg-duration{background:#f1f5f9;padding:44px 24px 38px;text-align:center;position:relative}
.pkg-duration .dur{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:900;letter-spacing:-.01em;line-height:1.2;color:#0b1220;margin:0;text-transform:uppercase}
.pkg-duration:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:70%;height:2px;background:linear-gradient(90deg,transparent 0%,#86efac 50%,transparent 100%)}
.pkg-services{padding:30px 28px 34px;display:flex;gap:14px;flex:1;align-items:flex-start}
.pkg-services .svc-check{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:2px solid #0b1220;display:grid;place-items:center;margin-top:2px}
.pkg-services .svc-check svg{width:14px;height:14px;stroke:#0b1220;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pkg-services p{margin:0;color:#334155;line-height:1.6;font-size:.96rem}
[data-theme="dark"] .pkg-card{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .pkg-header{background:linear-gradient(135deg,#16a34a 0%,#16a34a 100%)}
[data-theme="dark"] .pkg-header h3,[data-theme="dark"] .pkg-header p{color:#0b1220}
[data-theme="dark"] .pkg-duration{background:#111827}
[data-theme="dark"] .pkg-duration .dur{color:#f1f5f9}
[data-theme="dark"] .pkg-services p{color:#cbd5e1}
[data-theme="dark"] .pkg-services .svc-check{border-color:#e2e8f0}
[data-theme="dark"] .pkg-services .svc-check svg{stroke:#e2e8f0}
/* === Contact form UI polish === */
.c-form-card{padding:40px}
@media (max-width:600px){.c-form-card{padding:26px}}
.c-form-card .form-head{padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:28px}
[data-theme="dark"] .c-form-card .form-head{border-color:#1e293b}
.c-form-card .form-head .eyebrow{display:inline-block;padding:4px 10px;background:rgba(34,197,94,.1);border-radius:999px}
.c-form-card .field{position:relative}
.c-form-card .field label{display:flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600;color:#0b1220;margin-bottom:8px;letter-spacing:-.005em}
.c-form-card .field label .req{color:var(--green);font-weight:800}
.c-form-card .input-wrap{position:relative}
.c-form-card .input-wrap .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none;transition:.2s}
.c-form-card .input-wrap input,.c-form-card .input-wrap select{padding-left:42px}
.c-form-card .input-wrap:focus-within .ico{stroke:var(--green)}
.c-form-card .field input,.c-form-card .field select,.c-form-card .field textarea{font-weight:500}
.c-form-card .field input::placeholder,.c-form-card .field textarea::placeholder{color:#94a3b8;font-weight:400}
.c-form-card .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
.c-form-card .section-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:28px 0 14px;padding-top:22px;border-top:1px dashed var(--border)}
[data-theme="dark"] .c-form-card .section-label{border-color:#1e293b}
.c-form-card .check-grid label{position:relative;padding:12px 14px 12px 40px}
.c-form-card .check-grid label .cbox{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;border:1.5px solid #cbd5e1;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:.2s}
.c-form-card .check-grid label .cbox svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;opacity:0;transition:.2s}
.c-form-card .check-grid input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.c-form-card .check-grid label:has(input:checked) .cbox{background:var(--green);border-color:var(--green)}
.c-form-card .check-grid label:has(input:checked) .cbox svg{opacity:1}
[data-theme="dark"] .c-form-card .check-grid label .cbox{background:#0b1220;border-color:#334155}
.c-form-card .submit-row{margin-top:26px;padding-top:24px;border-top:1px solid var(--border);flex-direction:column;align-items:stretch;gap:12px}
[data-theme="dark"] .c-form-card .submit-row{border-color:#1e293b}
.c-form-card .submit-row .btn{width:100%;padding:16px 28px;font-size:1rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--green),#16a34a);border:none;color:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(34,197,94,.32);transition:.25s}
.c-form-card .submit-row .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(34,197,94,.45)}
.c-form-card .submit-row .btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.5;transition:transform .25s}
.c-form-card .submit-row .btn:hover svg{transform:translateX(4px)}
.c-form-card .submit-row .hint{text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.82rem}
.c-form-card .submit-row .hint svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2}
.c-form-card .form-success{background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(15,118,110,.08));border:1px solid rgba(34,197,94,.3);border-radius:14px;padding:16px 20px;color:#16a34a;font-size:.92rem;font-weight:500;display:none;align-items:center;gap:10px;margin-bottom:16px}
.c-form-card .form-success.show{display:flex}
[data-theme="dark"] .c-form-card .form-success{color:#86efac}
/* ================================================================
HERO — A/B/C variant preview (remove block once one is chosen)
================================================================ */
.hero-multi .hv{display:none}
.hero-multi[data-variant="a"] .hv-a,
.hero-multi[data-variant="b"] .hv-b,
.hero-multi[data-variant="c"] .hv-c{display:block}
.hero-multi[data-variant="b"] .hv-b,
.hero-multi[data-variant="c"] .hv-c{display:grid}
/* Variant A — Bold centered */
.hv-a{text-align:center;max-width:920px;margin:0 auto}
.hv-a .eyebrow{display:inline-block}
.hv-a-title{
font-size:clamp(2.4rem,6vw,5rem);
line-height:1.02;letter-spacing:-.035em;
margin:18px auto 22px;font-weight:800;
}
.hv-a-lead{font-size:1.18rem;max-width:680px;margin:0 auto;color:#374151}
.hv-a-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hv-a-reviews{justify-content:center;gap:40px;margin-top:46px}
/* Compact platform-rating cards inside the hero (replaces trust stat strip) */
.hv-a-mini-ratings{
display:flex;justify-content:flex-start;align-items:stretch;gap:14px;
margin:34px 0 0;flex-wrap:wrap;
}
/* On mobile, center the Google / Clutch / UpCity rating cards. */
@media (max-width:900px){
.hv-a-mini-ratings{
justify-content:center !important;
margin-left:auto;margin-right:auto;
}
}
.mini-rating{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;padding:14px 18px;min-width:140px;
background:#fff;border:1px solid var(--border);border-radius:14px;
color:inherit;
box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.mini-rating img{height:36px;width:auto;object-fit:contain;margin-bottom:4px;max-width:140px}
.mini-rating-score{display:flex;align-items:baseline;gap:4px;font-weight:800;font-size:1.15rem;color:#0b1220}
.mini-rating-score .mini-star{color:#f59e0b;font-size:.95rem}
.mini-rating-count{font-size:.78rem;color:#64748b;font-weight:600;letter-spacing:.01em}
[data-theme="dark"] .mini-rating{background:#0f172a;border-color:#1e293b;box-shadow:none}
[data-theme="dark"] .mini-rating-score{color:#f1f5f9}
[data-theme="dark"] .mini-rating-count{color:#94a3b8}
.btn-ghost{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:600;border:1.5px solid var(--border);color:var(--ink);background:rgba(255,255,255,.6);transition:.2s}
.btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
[data-theme="dark"] .btn-ghost{background:rgba(15,23,42,.5);border-color:#334155;color:#e5e7eb}
[data-theme="dark"] .btn-ghost:hover{border-color:var(--green);color:#86efac}
[data-theme="dark"] .hv-a-lead{color:#cbd5e1}
/* Variant B — Bento stats */
.hv-b{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hv-b-title{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.025em;margin-bottom:18px}
.hv-b .lead{max-width:520px}
.hv-b-reviews{margin-top:28px;gap:24px}
.bento{
display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto auto;gap:14px;
}
.bento-cell{
background:linear-gradient(180deg,#ffffff 0%, #f6fdf8 100%);
border:1px solid var(--border);border-radius:20px;padding:22px;
box-shadow:0 10px 30px rgba(17,24,39,.06);position:relative;overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease;
}
.bento-cell:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(34,197,94,.18)}
.bento-hero{grid-column:1/2;grid-row:1/3;padding:26px;background:linear-gradient(155deg,#f7fee7 0%,#ffffff 60%);border-color:rgba(34,197,94,.25)}
.bento-cell:nth-child(2){grid-column:2/3;grid-row:1/2}
.bento-cell:nth-child(3){grid-column:2/3;grid-row:2/3}
.bento-cell:nth-child(4){grid-column:1/3;grid-row:3/4;display:flex;align-items:center;justify-content:space-between;gap:18px}
.bento-cell:nth-child(4) .bento-num{margin:0}
.bento-eyebrow{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:8px}
.bento-num{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.bento-num span{color:var(--green);margin-left:2px}
.bento-num.small{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.bento-spark{display:block;width:100%;height:60px;margin:14px 0 6px}
.bento-foot{font-size:.85rem;color:var(--muted);font-weight:500}
[data-theme="dark"] .bento-cell{background:linear-gradient(180deg,#0f172a,#0b1220);border-color:#1e293b;box-shadow:0 10px 30px rgba(0,0,0,.4)}
[data-theme="dark"] .bento-hero{background:linear-gradient(155deg,rgba(34,197,94,.12),#0b1220 60%);border-color:rgba(34,197,94,.3)}
[data-theme="dark"] .bento-num{color:#f1f5f9}
[data-theme="dark"] .bento-foot,[data-theme="dark"] .bento-eyebrow{color:#94a3b8}
/* Variant C — Client logo wall (social proof) */
.hv-c{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hv-c-title{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.025em;margin-bottom:18px}
.hv-c .lead{max-width:540px}
.hv-c-reviews{margin-top:28px;gap:24px}
.logo-wall{
position:relative;border-radius:24px;
padding:18px;
background:linear-gradient(180deg,#ffffff 0%, #f6fdf8 100%);
border:1px solid rgba(34,197,94,.28);
box-shadow:0 24px 60px rgba(17,24,39,.10);
overflow:hidden;
}
.logo-wall-glow{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(420px 220px at 12% 0%, rgba(34,197,94,.18), transparent 70%),
radial-gradient(420px 220px at 100% 100%, rgba(15,118,110,.14), transparent 70%);
}
.logo-wall-head{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:2px 4px 14px;flex-wrap:wrap;
}
.logo-wall-tag{
display:inline-flex;align-items:center;gap:9px;
padding:8px 14px;border-radius:999px;
background:#fff;border:1px solid var(--border);
font-size:.8rem;font-weight:600;color:#374151;
box-shadow:0 4px 12px rgba(17,24,39,.05);
}
.logo-wall-tag strong{color:var(--green);font-weight:700}
.lw-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.22);animation:dpulse 2s infinite}
@keyframes dpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.55}}
.logo-wall-meta{display:flex;gap:6px}
.lw-stat{
display:flex;flex-direction:column;align-items:center;
padding:4px 12px;border-left:1px solid var(--border);
font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
}
.lw-stat:first-child{border-left:0}
.lw-stat strong{display:block;font-size:1rem;color:var(--ink);font-weight:800;letter-spacing:0;text-transform:none;margin-bottom:1px}
.logo-wall-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
background:var(--border);border:1px solid var(--border);border-radius:16px;
gap:1px;overflow:hidden;
}
.lw-cell{
position:relative;background:#fff;
min-height:96px;
display:flex;align-items:center;justify-content:center;
padding:14px;
transition:background .25s ease, box-shadow .25s ease;
}
.lw-cell img{
max-height:42px;max-width:90%;width:auto;height:auto;object-fit:contain;
transition:transform .25s ease;
}
.lw-cell:hover{background:#f7fee7;z-index:2;box-shadow:inset 0 0 0 2px rgba(34,197,94,.45)}
.lw-cell:hover img{transform:scale(1.07)}
.lw-featured{background:linear-gradient(160deg,#f7fee7 0%,#ffffff 80%)}
.lw-chip{
position:absolute;top:8px;right:8px;
font-size:.62rem;font-weight:700;letter-spacing:.02em;line-height:1;
padding:4px 8px;border-radius:999px;
background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
box-shadow:0 4px 10px rgba(34,197,94,.35);
}
.logo-marquee{
position:relative;z-index:1;
margin-top:14px;padding-top:14px;
border-top:1px dashed rgba(17,24,39,.08);
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.lm-track{
display:flex;align-items:center;gap:48px;width:max-content;
animation:lmScroll 36s linear infinite;
}
.logo-marquee:hover .lm-track{animation-play-state:paused}
.lm-track img{
height:28px;width:auto;flex:0 0 auto;
transition:transform .25s ease;
}
.lm-track img:hover{transform:scale(1.1)}
@keyframes lmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-wall-cta{
position:relative;z-index:1;
display:inline-flex;align-items:center;gap:6px;margin:12px 0 4px 4px;
font-size:.85rem;font-weight:700;color:var(--green);
transition:gap .2s ease;
}
.logo-wall-cta:hover{gap:10px}
@media (prefers-reduced-motion: reduce){
.lm-track,.lw-dot{animation:none}
}
[data-theme="dark"] .logo-wall{background:linear-gradient(180deg,#0f172a,#0b1220);border-color:rgba(34,197,94,.32);box-shadow:0 24px 60px rgba(0,0,0,.5)}
[data-theme="dark"] .logo-wall-tag{background:#0b1220;border-color:#1e293b;color:#cbd5e1}
[data-theme="dark"] .lw-stat{border-color:#1e293b;color:#94a3b8}
[data-theme="dark"] .lw-stat strong{color:#f1f5f9}
[data-theme="dark"] .logo-wall-grid{background:#1e293b;border-color:#1e293b}
[data-theme="dark"] .lw-cell{background:#0b1220}
[data-theme="dark"] .lw-featured{background:linear-gradient(160deg,rgba(34,197,94,.12),#0b1220 80%)}
[data-theme="dark"] .lw-cell:hover{background:#0f172a}
[data-theme="dark"] .logo-marquee{border-top-color:rgba(255,255,255,.08)}
/* responsive */
@media (max-width: 960px){
.hv-b,.hv-c{grid-template-columns:1fr;gap:36px}
.logo-wall-grid{grid-template-columns:repeat(3,1fr)}
.logo-wall .lw-cell:nth-child(n+10){display:none}
}
@media (max-width: 600px){
.bento{grid-template-columns:1fr;grid-auto-rows:auto}
.bento-hero,.bento-cell{grid-column:auto !important;grid-row:auto !important}
.bento-cell:nth-child(4){flex-direction:column;align-items:flex-start;gap:6px}
.hv-a-cta{flex-direction:column}
.hv-a-cta .btn,.hv-a-cta .btn-ghost{width:100%;text-align:center}
.hv-a-reviews{gap:24px}
.logo-wall-grid{grid-template-columns:repeat(3,1fr)}
.logo-wall .lw-cell:nth-child(n+10){display:none}
.lw-cell img{max-height:36px}
}
/* ================================================================
GLOBAL MOBILE RESPONSIVE PASS — comprehensive fixes
Added to repair layout issues across all pages on small screens.
================================================================ */
/* prevent horizontal overflow on every page */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
/* tablet & below */
@media (max-width:1024px){
:root{--max:100%}
.container{padding:0 22px}
/* services hub on tablets — go to 2 columns instead of 3 */
.wwd-grid{grid-template-columns:repeat(2,1fr)}
}
/* phones — primary mobile breakpoint */
@media (max-width:760px){
/* typography rhythm */
h1{font-size:clamp(1.85rem,7vw,2.5rem)}
h2{font-size:clamp(1.5rem,5vw,2rem)}
h3{font-size:1.1rem}
p{font-size:.98rem}
/* tighter container gutters on small screens */
.container{padding:0 16px}
/* sections — reduce vertical padding */
section{padding:44px 0}
.panel{padding:32px 18px 26px;border-radius:20px}
.panel .section-head{margin-bottom:22px}
.section-head{margin-bottom:30px}
.section-head h2{font-size:clamp(1.5rem,5vw,2rem)}
.section-head p{font-size:.95rem}
/* ---- HEADER / NAV ---- */
.site-header{top:8px;padding:0 10px}
.site-header .container{padding:6px 6px 6px 14px;border-radius:24px}
.brand{font-size:1.1rem;gap:8px}
.brand img,.brand svg{width:28px;height:28px}
/* mobile menu — make scrollable so dropdown content fits */
.nav ul{
top:calc(100% + 8px);left:10px;right:10px;
max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:12px;border-radius:18px;
}
[data-theme="dark"] .nav ul{background:#0f172a;border:1px solid #1e293b}
.nav ul.open{display:flex}
.nav a.navlink{padding:12px 14px;font-size:.95rem}
/* show CTA inside the mobile menu */
.nav .cta{display:block;width:100%;margin:8px 0 4px}
.nav .cta .btn{display:flex;width:100%;justify-content:center;padding:13px 18px}
/* hide separate theme toggle inside the mobile menu list to save space */
.nav ul li:has(.theme-toggle){padding:4px 0}
.theme-toggle{margin-right:4px}
/* mobile dropdown — indented list */
.has-dd .dd-menu{padding:4px 0 8px 12px;background:transparent;border:0;box-shadow:none;min-width:0}
.has-dd .dd-menu a{padding:9px 10px;font-size:.88rem}
/* ---- HERO ---- */
.hero{margin-top:-72px;padding:108px 0 36px}
.hero:before,.hero:after{filter:blur(50px);opacity:.35}
.hero h1,.hv-a-title,.hv-b-title,.hv-c-title{font-size:clamp(1.85rem,7vw,2.4rem);line-height:1.12;letter-spacing:-.02em}
.hero p.lead,.hv-a-lead{font-size:1rem}
.hv-a-cta,.hero-cta{justify-content:center;gap:10px}
.hv-a-cta .btn,.hv-a-cta .btn-ghost,
.hero-cta .btn,.hero-cta .btn-outline{width:100%;text-align:center;justify-content:center}
.hv-a{padding:0 4px}
.hv-a-reviews,.hero-reviews{gap:18px;justify-content:center;margin-top:30px}
.hero-reviews .rev img{max-height:28px}
.hero-reviews .stars{font-size:.78rem;letter-spacing:1px}
.hero-reviews .count{font-size:.72rem}
/* page hero */
.page-hero{margin-top:-72px;padding:96px 0 28px}
.page-hero h1{font-size:clamp(1.7rem,6vw,2.2rem)}
/* hero variant b/c — stack */
.hv-b,.hv-c{grid-template-columns:1fr;gap:30px}
.hv-b-title,.hv-c-title{font-size:clamp(1.85rem,6.5vw,2.4rem)}
/* about hero */
.about-hero{padding:110px 0 60px}
.about-hero h1{font-size:clamp(2rem,7vw,2.7rem)}
.about-hero .lead{font-size:1rem;padding:0 4px}
.about-hero .hero-sub{gap:8px;margin-top:24px}
.about-hero .hero-sub .chip{padding:6px 12px;font-size:.78rem}
/* ---- BUTTONS ---- */
.btn{padding:12px 22px;font-size:.95rem}
.btn-outline,.btn-ghost{padding:12px 22px;font-size:.95rem}
/* ---- IMPACT / STATS ---- */
.impact{padding:60px 0}
.impact-head{margin-bottom:36px}
.impact-head h2{font-size:clamp(1.5rem,5vw,1.9rem)}
.impact-cell{padding:30px 16px}
.impact-num{font-size:clamp(2.2rem,9vw,3.2rem)}
.impact-label{font-size:.82rem}
.stats .container{grid-template-columns:1fr 1fr;gap:18px}
.stats h3{font-size:1.6rem}
/* ---- PROCESS ---- */
.process{padding:60px 0}
.proc-step{padding:30px 22px 24px}
.proc-step h3{font-size:1.1rem}
.proc-step .step-num{width:42px;height:42px;font-size:.95rem;top:-15px;left:22px}
/* ---- WHY / WWD ---- */
.why-split{gap:30px}
.why-visual{padding:36px 26px;min-height:auto}
.why-visual h3{font-size:1.3rem}
.why-visual .mini-stats{grid-template-columns:1fr 1fr 1fr;gap:12px}
.why-visual .mini-stats .ms-num{font-size:1.2rem}
.why-item{padding:18px;gap:14px}
.why-item h4{font-size:1rem}
.why-item p{font-size:.9rem}
.wwd-preview{padding:36px 26px;min-height:auto}
.wwd-preview .pv-icon{width:60px;height:60px}
.wwd-row{padding:16px 18px}
.wwd-tile{padding:26px 22px;min-height:auto}
/* ---- CASE STUDIES ---- */
.cs-tile{min-height:auto}
.cs-tile .head{height:130px;padding:24px}
.cs-tile .body{padding:20px 22px 22px}
.cs-featured{padding:36px 26px;min-height:auto}
.cs-featured h3{font-size:1.3rem}
.cs-featured .metric{font-size:clamp(2.6rem,9vw,3.6rem)}
.cs-mini{padding:22px;min-height:auto}
.cs-card .logo-tile{height:120px;padding:22px 18px}
.cs-card .logo-tile img{max-height:48px}
/* case study detail */
.cs-hero{padding:70px 0 44px}
.cs-hero h1{font-size:clamp(1.8rem,6.5vw,2.4rem)}
.cs-meta{padding:18px 0}
.cs-section{padding:50px 0}
.cs-section h2{font-size:clamp(1.4rem,5vw,1.8rem)}
.cs-section p{font-size:.98rem}
.cs-section blockquote{padding:16px 18px;font-size:1rem;margin:22px 0}
.cs-results{padding:54px 0}
/* ---- REVIEWS / RATINGS / TESTIMONIALS ---- */
.rating-card{padding:30px 24px 26px;gap:18px}
.rating-card .rate-block .num{font-size:clamp(2.6rem,9vw,3.6rem)}
.rev-hero{padding:36px 26px;min-height:auto}
.rev-card2{padding:18px 20px;gap:16px}
.rev-card2 .logo-box{width:72px;height:52px}
.tcard2{padding:28px 22px 24px}
.tcard2 blockquote{font-size:.98rem}
.tcard2 .quote-mark{font-size:3.6rem;top:14px;right:18px}
/* ---- ABOUT PAGE ---- */
.about-stats{padding:36px 0}
.about-stats .stat{padding:16px 12px}
.about-stats .stat .num{font-size:clamp(1.5rem,5.5vw,2rem)}
.about-stats .stat .lbl{font-size:.72rem}
.about-sec{padding:60px 0}
.about-sec .sec-head{margin-bottom:36px}
.about-sec .sec-head h2{font-size:clamp(1.6rem,5vw,2.1rem)}
.about-sec .sec-head p{font-size:.98rem}
.mv-card{padding:36px 26px}
.mv-card h3{font-size:clamp(1.9rem,7vw,2.6rem)}
.mv-card p{font-size:.98rem;line-height:1.65}
.intro-lead{font-size:1.05rem;padding:24px 22px;margin-bottom:36px}
.value-card{padding:26px 22px}
.value-card .val-num{font-size:2.6rem!important;top:10px!important;right:16px!important}
.process-section{padding:60px 0}
.phase-card{padding:30px 22px 26px}
.phase-card h3{font-size:1.2rem;margin-bottom:14px}
.phase-card .phase-badge{width:60px;height:60px;font-size:1.25rem;margin-bottom:16px}
.services-expertise{padding:60px 0}
.exp-card{padding:26px 22px;min-height:auto}
.why-section{padding:60px 0}
.why-tile{padding:22px}
.why-promise{padding:24px 20px;font-size:1.05rem;margin-top:30px}
.about-cta{padding:60px 18px}
.about-cta h2{font-size:clamp(1.7rem,5.5vw,2.2rem)}
.about-cta p{font-size:1rem}
/* ---- SERVICE PAGES ---- */
.svc-hero .hero-subtitle{font-size:1rem}
.svc-hero .hero-subtitle:before,.svc-hero .hero-subtitle:after{width:14px;margin:0 8px}
.svc-whatis-card{padding:60px 24px 32px!important;font-size:.98rem}
.svc-whatis-card:before{font-size:5rem;left:18px}
.svc-deliver{padding:14px 16px}
.sub-svc-card{padding:24px 20px;gap:14px}
.sub-svc-card .ss-icon{width:48px;height:48px}
.platforms-section{padding:60px 0}
.platform-card{padding:32px 22px}
.simple-benefits-wrap{padding:50px 0}
/* ---- CONTACT ---- */
.contact-hero{padding:70px 0 36px}
.contact-hero h1{font-size:clamp(1.9rem,6.5vw,2.6rem)}
.contact-strip{padding:0 0 36px}
.contact-strip .strip-row{padding:6px 0}
.contact-main{padding:24px 0 50px}
.c-form-card{padding:24px 18px}
.c-form-card .form-head h2{font-size:clamp(1.2rem,4.5vw,1.5rem)}
.c-form-card .field input,.c-form-card .field select,.c-form-card .field textarea{padding:12px 14px;font-size:16px} /* 16px prevents iOS zoom */
.c-form-card .input-wrap input,.c-form-card .input-wrap select{padding-left:38px}
.c-info-card{padding:26px 22px}
.c-info-card h3{font-size:1.15rem;margin-bottom:16px}
.c-map .map-wrap{height:320px;border-radius:18px}
/* ---- FORMS — prevent iOS zoom ---- */
form input[type=text],form input[type=email],form input[type=tel],
form select,form textarea{font-size:16px;padding:12px 14px}
/* ---- FOOTER ---- */
.foot-cta{padding:32px 24px;margin:50px 0 40px;border-radius:24px;text-align:left}
.foot-cta-text h2{font-size:clamp(1.5rem,5vw,2rem)}
.foot-cta-text p{font-size:.95rem}
.foot-cta .btn{padding:14px 26px;font-size:.95rem}
.foot-main{padding:50px 0 30px}
.footer-grid{gap:32px}
.foot-tag{font-size:.92rem;margin:14px 0 18px}
.foot-mark{padding-top:14px;margin-top:14px}
.foot-bottom{padding:18px 0;font-size:.82rem;flex-direction:column;gap:10px;text-align:center}
.foot-bottom-links{justify-content:center;gap:16px}
/* ---- MARQUEE / BRAND TILES ---- */
.clients-stat{gap:14px;margin-bottom:22px}
.clients-stat .pill-stat{padding:10px 16px}
.clients-stat .pill-stat .ps-num{font-size:1.2rem}
.clients-stat .pill-stat .ps-label{font-size:.78rem}
.brand-tile{flex:0 0 150px;height:88px;padding:14px}
.brand-tile img{max-height:42px}
.client-marquee .brand-tile{flex:0 0 160px;height:96px;padding:14px}
.client-marquee .brand-tile img{max-height:60px}
.client-filter{gap:8px;margin:6px auto 22px}
.client-filter .pill{padding:8px 14px;font-size:.82rem}
.marquee-strip{padding:18px 0}
.marquee-strip .marquee-item{font-size:1.1rem;gap:16px}
/* ---- BLOG ---- */
.blog-hero{padding:96px 0 22px}
.blog-hero h1{font-size:clamp(1.6rem,5.5vw,2.2rem)}
.blog-feature{padding:18px 0 0}
.blog-article{padding:30px 0 40px}
.blog-article .prose{font-size:.98rem;line-height:1.72}
.blog-article .prose h2{font-size:clamp(1.25rem,5vw,1.6rem)}
.blog-article .prose h3{font-size:clamp(1.1rem,4.5vw,1.3rem)}
.blog-article .prose blockquote{padding:14px 18px;margin:1.4em 0}
.blog-article .prose table{font-size:.88rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.blog-related{padding:44px 0}
/* ---- FAQ ---- */
.faq-q{padding:14px 16px;font-size:.95rem;line-height:1.4}
.faq-a{padding:0 16px 16px;font-size:.94rem}
/* ---- LANG SWITCHER + BACK TO TOP — avoid collision ---- */
.to-top{right:14px;bottom:70px;width:40px;height:40px}
.lang-switcher{left:14px;bottom:14px}
.lang-menu{min-width:200px;max-width:calc(100vw - 28px)}
/* ---- HERO IMAGE ---- */
.hero-grid{gap:24px}
.hero-logo img{max-width:240px}
/* ---- ENSURE LONG WORDS WRAP ---- */
h1,h2,h3,h4,p,li,a,span{overflow-wrap:break-word;word-wrap:break-word}
/* ---- HORIZONTAL GRID FALLBACK ---- */
.grid-2{gap:24px}
/* timeline */
.process-timeline{padding:0}
.tl-step .tl-content p{font-size:.95rem}
}
/* very small phones */
@media (max-width:420px){
.container{padding:0 14px}
h1{font-size:1.7rem}
.hero h1,.hv-a-title{font-size:1.7rem;line-height:1.15}
.page-hero h1,.about-hero h1{font-size:1.6rem}
.section-head h2{font-size:1.35rem}
.btn,.btn-outline,.btn-ghost{padding:11px 18px;font-size:.92rem}
/* stats single column on tiny screens */
.stats .container{grid-template-columns:1fr;gap:14px}
/* impact label tighter */
.impact-num{font-size:2.4rem}
.impact-cell{padding:24px 12px}
/* footer cta stack tighter */
.foot-cta{padding:26px 20px}
.foot-cta .btn{width:100%;justify-content:center}
/* hero reviews single row scroll */
.hero-reviews,.hv-a-reviews{gap:14px}
.hero-reviews .rev{flex:1;min-width:0}
/* footer brand */
.foot-brand{font-size:1.25rem}
.foot-brand img,.foot-brand svg{width:34px;height:34px}
/* contact form */
.c-form-card{padding:20px 14px;border-radius:18px}
.c-form-card .submit-row .btn{padding:14px 20px}
/* logos grid */
.logo-wall{padding:12px}
.logo-wall-grid{grid-template-columns:repeat(2,1fr)}
.logo-wall .lw-cell:nth-child(n+7){display:none}
/* lang switcher very small */
.lang-btn{padding:8px 12px;font-size:.75rem}
.lang-btn .lang-label{display:none}
}
/* landscape phones — keep nav usable */
@media (max-width:900px) and (orientation:landscape){
.nav ul{max-height:calc(100vh - 80px)}
.hero{padding:100px 0 30px}
}
/* ====================================================================
41-services rework — mega-menu, EEAT cards, grouped grid, doc prose
==================================================================== */
/* Mega-menu (replaces the narrow single-column dropdown for Services) */
.has-mega .dd-menu.mega-menu{
left:50%;
transform:translateX(-50%) translateY(10px);
min-width:980px;
max-width:min(96vw, 1200px);
padding:22px;
display:block;
}
.has-mega:focus-within .dd-menu.mega-menu,
.has-mega.open .dd-menu.mega-menu{
transform:translateX(-50%) translateY(0);
}
.mega-menu .mm-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0,1fr));
gap:18px 22px;
}
.mega-menu .mm-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-menu .mm-head{
font-family:'Space Grotesk', Inter, sans-serif;
font-weight:700;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--green);
padding:6px 12px 8px;
border-bottom:1px solid var(--border);
margin-bottom:4px;
}
.mega-menu .mm-col a{
padding:7px 12px;
font-size:.86rem;
white-space:normal;
line-height:1.3;
border-radius:10px;
}
.mega-menu .mm-col a:before{display:none}
.mega-menu .mm-foot{
margin-top:18px;
padding-top:14px;
border-top:1px dashed var(--border);
text-align:center;
}
.mega-menu .mm-all{
display:inline-block;
padding:9px 18px;
border-radius:999px;
background:linear-gradient(135deg,#f7fee7,#ccfbf1);
color:var(--green-dark);
font-weight:700;
font-size:.88rem;
text-decoration:none;
border:1px solid #bbf7d0;
transition:transform .15s, box-shadow .15s;
}
.mega-menu .mm-all:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(15,118,110,.18);
}
[data-theme="dark"] .mega-menu .mm-all{
background:linear-gradient(135deg,#0b3520,#0f2a1c);
color:#bbf7d0;
border-color:#16a34a;
}
@media (max-width:1100px){
.has-mega .dd-menu.mega-menu{min-width:740px}
.mega-menu .mm-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width:900px){
/* Inside the mobile drawer the dropdown is a normal stacked list */
.has-mega .dd-menu.mega-menu{
position:static;transform:none;min-width:0;max-width:100%;
box-shadow:none;border:0;padding:0;background:transparent;
}
.has-mega .dd-menu.mega-menu:before{display:none}
.mega-menu .mm-grid{grid-template-columns:1fr;gap:8px}
.mega-menu .mm-head{padding:10px 4px 4px;border:0}
.mega-menu .mm-foot{border:0;margin-top:8px;padding-top:8px;text-align:left}
}
/* Services hub — categorised grid */
.svc-hub{padding:60px 0 90px}
.svc-cat-group{margin-bottom:56px}
.svc-cat-group:last-child{margin-bottom:0}
.svc-cat-head{
font-size:1.6rem;
margin:0 0 22px;
padding-bottom:10px;
border-bottom:1px solid var(--border);
letter-spacing:-.01em;
}
.svc-hub .services-grid{grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1100px) and (min-width:901px){.svc-hub .services-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.svc-hub .services-grid{grid-template-columns:1fr}}
a.svc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.svc-card:hover h3{color:var(--green-dark)}
/* E-E-A-T trust signals strip */
.eeat-section{padding:80px 0;background:linear-gradient(180deg,#f7fee7 0%,#ffffff 60%)}
[data-theme="dark"] .eeat-section{background:linear-gradient(180deg,#0b1f15 0%,#0a0f1c 60%)}
.eeat-section .sec-head{margin-bottom:32px;text-align:center}
.eeat-section .sec-head p{max-width:720px;margin:10px auto 0;color:var(--muted);font-size:.95rem}
.eeat-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
@media (max-width:1100px){.eeat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.eeat-grid{grid-template-columns:1fr}}
.eeat-card{
position:relative;
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:24px 22px 22px;
display:flex;
flex-direction:column;
gap:10px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eeat-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.08);border-color:#bbf7d0}
.eeat-marker{
position:absolute;
top:14px;
right:18px;
font-size:1.4rem;
color:var(--green);
opacity:.55;
line-height:1;
}
.eeat-tag{
display:inline-block;
width:fit-content;
font-size:.72rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--green-dark);
font-weight:700;
padding:4px 10px;
background:#f7fee7;
border-radius:999px;
}
.eeat-signal{
font-size:1.05rem;
margin:6px 0 4px;
line-height:1.3;
font-weight:700;
color:var(--ink);
}
.eeat-evidence{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
[data-theme="dark"] .eeat-card{background:#0f172a;border-color:#1e293b}
[data-theme="dark"] .eeat-tag{background:rgba(16,185,129,.12);color:#bbf7d0}
/* ====================================================================
Doc-driven section layouts — checkmark deliverable cards, numbered
grid, pill cloud, prose. Aligned with the rest of the site's
value-card / svc-deliver aesthetic.
==================================================================== */
.svc-doc-sec{padding:80px 0;position:relative;overflow:hidden}
.svc-doc-sec.alt{background:linear-gradient(180deg,#f6faf8 0%,#ffffff 100%)}
[data-theme="dark"] .svc-doc-sec.alt{background:linear-gradient(180deg,#0b1a14 0%,#0a0f1c 100%)}
.svc-doc-sec.pills{padding:64px 0}
/* Subtle radial glow accent on alternating sections */
.svc-doc-sec.alt:before{
content:"";position:absolute;top:-200px;right:-200px;
width:600px;height:600px;border-radius:50%;
background:radial-gradient(circle, rgba(34,197,94,.06) 0%, transparent 65%);
pointer-events:none;
}
.svc-doc-sec > .container{max-width:1200px;position:relative;z-index:1}
/* -------- Section header (number chip + h2 + accent line) -------- */
.svc-sec-head{
display:flex;
align-items:flex-start;
gap:18px;
margin-bottom:14px;
text-align:left;
flex-wrap:wrap;
}
.svc-sec-num{
display:inline-flex;align-items:center;justify-content:center;
font-family:'Space Grotesk', Inter, sans-serif;
font-weight:700;font-size:.78rem;letter-spacing:.12em;
color:var(--green-dark);
background:linear-gradient(135deg,#f7fee7,#d1fae5);
border:1px solid #bbf7d0;
padding:6px 12px;
border-radius:8px;
flex-shrink:0;
line-height:1;
min-height:28px;
margin-top:6px;
text-transform:uppercase;
}
[data-theme="dark"] .svc-sec-num{
background:linear-gradient(135deg,#0b3520,#0f2a1c);
color:#bbf7d0;border-color:#16a34a;
}
.svc-sec-head h2{
font-size:2.1rem;
line-height:1.15;
letter-spacing:-.02em;
margin:0;
color:var(--ink);
font-weight:800;
flex:1;min-width:0;
}
[data-theme="dark"] .svc-sec-head h2{color:#fff}
/* Accent line under the heading */
.svc-doc-sec .container > .svc-sec-head + *{position:relative}
.svc-sec-head + .svc-sec-intro-wrap:before,
.svc-sec-head + .svc-num-grid:before,
.svc-sec-head + .svc-feat-grid:before,
.svc-sec-head + .svc-check-grid:before,
.svc-sec-head + .svc-pill-cloud:before,
.svc-sec-head + .svc-prose:before{
content:"";display:block;
width:56px;height:3px;border-radius:3px;
background:linear-gradient(90deg,#22c55e,#16a34a);
margin-bottom:28px;
}
@media (max-width:680px){
.svc-doc-sec{padding:64px 0}
.svc-sec-head h2{font-size:1.55rem}
.svc-sec-head{gap:14px;margin-bottom:10px}
}
/* -------- Section intro paragraph(s) -------- */
.svc-sec-intro-wrap{margin:0 0 32px;max-width:880px}
.svc-sec-intro-wrap p{
margin:0 0 14px;
color:var(--muted);
font-size:1.02rem;
line-height:1.75;
}
.svc-sec-intro-wrap p:last-child{margin-bottom:0}
.svc-sec-intro{font-size:1.08rem !important;color:var(--ink) !important;font-weight:500}
[data-theme="dark"] .svc-sec-intro{color:#e2e8f0 !important}
[data-theme="dark"] .svc-sec-intro-wrap p{color:#cbd5e1}
/* -------- Layout E: prose only (heading + paragraphs) -------- */
.svc-doc-sec .svc-prose{max-width:880px;color:var(--muted);font-size:1.02rem;line-height:1.75}
.svc-doc-sec .svc-prose p{margin:0 0 14px}
.svc-doc-sec .svc-prose p:last-child{margin-bottom:0}
[data-theme="dark"] .svc-doc-sec .svc-prose p{color:#cbd5e1}
/* -------- Layout A: numbered card grid (Phase / Step / Tier) -------- */
.svc-num-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
@media (max-width:820px){.svc-num-grid{grid-template-columns:1fr}}
.svc-num-card{
position:relative;
background:#fff;
border:1px solid var(--border);
border-radius:18px;
padding:30px 28px 26px;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
overflow:hidden;
}
.svc-num-card:hover{
transform:translateY(-4px);
box-shadow:0 22px 44px rgba(15,23,42,.08);
border-color:#bbf7d0;
}
.svc-num-card:hover .svc-num-badge{color:var(--green);opacity:.32}
.svc-num-badge{
position:absolute;top:22px;right:26px;
font-family:'Space Grotesk', Inter, sans-serif;
font-weight:800;font-size:2.4rem;letter-spacing:-.02em;
color:#e2e8f0;line-height:1;transition:.3s;
}
[data-theme="dark"] .svc-num-badge{color:#1e293b}
.svc-num-icon{
width:48px;height:48px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:12px;
background:linear-gradient(135deg,#22c55e,#16a34a);
box-shadow:0 6px 14px rgba(34,197,94,.25);
margin-bottom:18px;
}
.svc-num-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-num-card h3{font-size:1.18rem;margin:0 0 10px;line-height:1.3;font-weight:700;color:var(--ink);padding-right:60px}
.svc-num-card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.65}
[data-theme="dark"] .svc-num-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-num-card h3{color:#fff}
[data-theme="dark"] .svc-num-card p{color:#94a3b8}
/* -------- Layout B: pill cloud (Industries / Categories / Sectors) -------- */
.svc-pill-cloud{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.svc-pill{
display:inline-flex;align-items:center;gap:8px;
padding:11px 18px;
border-radius:999px;
background:#fff;
border:1px solid var(--border);
color:var(--ink);
font-weight:600;font-size:.93rem;
line-height:1.3;
transition:transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.svc-pill:before{
content:"";display:inline-block;
width:8px;height:8px;border-radius:50%;
background:linear-gradient(135deg,#22c55e,#16a34a);
flex-shrink:0;
}
.svc-pill:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(15,118,110,.12);
border-color:#bbf7d0;
background:linear-gradient(135deg,#f7fee7,#fff);
}
[data-theme="dark"] .svc-pill{
background:#0f172a;border-color:#1e293b;color:#e2e8f0;
}
[data-theme="dark"] .svc-pill:hover{
background:linear-gradient(135deg,#0b3520,#0f172a);
border-color:#16a34a;
}
/* -------- Layouts C+D: deliverable card grid (the signature pattern) --
Both labelled bullets (em-dash 'Label — body') and plain bullets
render as the same card style with the green checkmark icon. -- */
.svc-feat-grid,
.svc-check-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}
@media (max-width:680px){
.svc-feat-grid,.svc-check-grid{grid-template-columns:1fr}
}
.svc-feat-card,
.svc-check-tile{
display:flex;
align-items:flex-start;
gap:14px;
padding:20px 22px;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-feat-card:hover,
.svc-check-tile:hover{
transform:translateY(-3px);
box-shadow:0 16px 34px rgba(15,23,42,.07);
border-color:#bbf7d0;
}
/* The signature green-gradient checkmark used everywhere. */
.svc-feat-icon{
flex-shrink:0;
width:32px;height:32px;
border-radius:9px;
background:linear-gradient(135deg,#22c55e,#16a34a);
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 6px 14px rgba(34,197,94,.25);
margin-top:1px;
}
.svc-feat-icon svg{
width:16px;height:16px;
stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.svc-feat-content{flex:1;min-width:0}
.svc-check-tile > p{flex:1;min-width:0}
.svc-feat-card h3{
font-size:1.02rem;margin:0 0 4px;line-height:1.3;
font-weight:700;color:var(--ink);
}
.svc-feat-card p{
margin:0;color:var(--muted);font-size:.93rem;line-height:1.55;
}
.svc-feat-card.plain h3{display:none}
.svc-feat-card.plain p{color:var(--ink);font-weight:500;font-size:.96rem}
.svc-check-tile p{
margin:0;color:var(--ink);font-weight:500;font-size:.96rem;line-height:1.55;
}
.svc-check-tile p strong{font-weight:700;color:var(--ink)}
[data-theme="dark"] .svc-feat-card,
[data-theme="dark"] .svc-check-tile{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-feat-card h3,
[data-theme="dark"] .svc-check-tile p{color:#f1f5f9}
[data-theme="dark"] .svc-feat-card p{color:#94a3b8}
[data-theme="dark"] .svc-feat-card.plain p{color:#f1f5f9}
/* Bullets used inside Layout A (when sub-grid + extras coexist) */
.svc-doc-sec ul.svc-list{
list-style:none;
margin:24px 0 0;
padding:0;
display:grid;
grid-template-columns:1fr;
gap:8px 22px;
}
@media (min-width:760px){
.svc-doc-sec ul.svc-list{grid-template-columns:1fr 1fr}
}
.svc-doc-sec ul.svc-list li{
position:relative;
padding:6px 0 6px 26px;
color:var(--ink);
font-size:.96rem;
line-height:1.55;
}
.svc-doc-sec ul.svc-list li:before{
content:"";
position:absolute;left:2px;top:.7em;
width:12px;height:12px;border-radius:3px;
background:linear-gradient(135deg,#22c55e,#16a34a);
box-shadow:0 0 0 3px rgba(34,197,94,.14);
}
[data-theme="dark"] .svc-doc-sec ul.svc-list li{color:#e2e8f0}
.svc-doc-sec ul.svc-list li strong{color:var(--ink);font-weight:700}
[data-theme="dark"] .svc-doc-sec ul.svc-list li strong{color:#fff}
/* ====================================================================
Stats strip — 4 big numbers showing trust between hero and EEAT
==================================================================== */
.svc-stats-strip{
padding:54px 0 30px;
background:linear-gradient(180deg,#ffffff 0%,#f6faf8 100%);
border-bottom:1px solid var(--border);
border-top:1px solid var(--border);
}
[data-theme="dark"] .svc-stats-strip{
background:linear-gradient(180deg,#0a0f1c 0%,#0b1a14 100%);
border-color:#1e293b;
}
.svc-stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
text-align:center;
}
@media (max-width:780px){.svc-stats-grid{grid-template-columns:repeat(2,1fr);gap:30px 20px}}
.svc-stat{
position:relative;
padding:0 16px;
}
.svc-stat:not(:last-child):after{
content:"";position:absolute;
top:50%;right:-12px;
width:1px;height:46px;
background:linear-gradient(180deg,transparent,var(--border),transparent);
transform:translateY(-50%);
}
@media (max-width:780px){.svc-stat:not(:last-child):after{display:none}}
.svc-stat-num{
font-family:'Space Grotesk', Inter, sans-serif;
font-size:2.6rem;
font-weight:800;
letter-spacing:-.03em;
line-height:1;
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:6px;
}
.svc-stat-lbl{
font-size:.85rem;
color:var(--muted);
font-weight:500;
letter-spacing:.01em;
line-height:1.4;
}
[data-theme="dark"] .svc-stat-lbl{color:#94a3b8}
/* ====================================================================
Visual process timeline — used for Phase/Step/Tier sub-sections
==================================================================== */
.svc-tl-track{
display:grid;
gap:18px;
position:relative;
}
.svc-tl-step{
display:grid;
grid-template-columns:auto 28px 1fr;
align-items:flex-start;
gap:16px;
position:relative;
}
.svc-tl-marker{
position:relative;
width:56px;height:56px;
display:grid;place-items:center;
background:linear-gradient(135deg,#22c55e,#16a34a);
border-radius:14px;
box-shadow:0 10px 24px rgba(34,197,94,.22);
z-index:1;
}
.svc-tl-marker:before{
content:"";position:absolute;
top:100%;left:50%;
width:2px;height:30px;
background:linear-gradient(180deg,#16a34a,transparent);
transform:translateX(-50%);
opacity:.4;
}
.svc-tl-step:last-child .svc-tl-marker:before{display:none}
.svc-tl-num{
font-family:'Space Grotesk', Inter, sans-serif;
font-weight:800;
font-size:1.1rem;
color:#fff;
letter-spacing:.02em;
line-height:1;
}
.svc-tl-arrow{
margin-top:18px;
display:inline-flex;align-items:center;justify-content:center;
}
.svc-tl-arrow svg{
width:22px;height:22px;
stroke:var(--green);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
opacity:.55;
}
@media (max-width:680px){.svc-tl-arrow{display:none}}
.svc-tl-card{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:22px 24px;
flex:1;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.svc-tl-card:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(15,23,42,.07);
border-color:#bbf7d0;
}
.svc-tl-kicker{
display:inline-block;
font-family:'Space Grotesk', Inter, sans-serif;
font-weight:700;
font-size:.72rem;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--green-dark);
background:#f7fee7;
padding:4px 10px;
border-radius:6px;
margin-bottom:10px;
}
.svc-tl-card h3{
font-size:1.1rem;
margin:0 0 8px;
line-height:1.3;
font-weight:700;
color:var(--ink);
}
.svc-tl-card p{
margin:0;
color:var(--muted);
font-size:.96rem;
line-height:1.65;
}
[data-theme="dark"] .svc-tl-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-tl-card h3{color:#fff}
[data-theme="dark"] .svc-tl-card p{color:#94a3b8}
[data-theme="dark"] .svc-tl-kicker{background:rgba(16,185,129,.1);color:#bbf7d0}
@media (max-width:680px){
.svc-tl-step{grid-template-columns:auto 1fr;gap:14px}
.svc-tl-arrow{display:none}
.svc-tl-marker{width:48px;height:48px}
}
/* ====================================================================
Industry icon cards — replaces flat pill cloud
==================================================================== */
.svc-ind-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
@media (max-width:1100px){.svc-ind-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.svc-ind-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.svc-ind-grid{grid-template-columns:1fr}}
.svc-ind-card{
display:flex;align-items:center;gap:14px;
padding:16px 18px;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
transition:transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.svc-ind-card:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(15,23,42,.08);
border-color:#bbf7d0;
background:linear-gradient(135deg,#f8fffb,#fff);
}
.svc-ind-icon{
flex-shrink:0;
width:42px;height:42px;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#f7fee7,#d1fae5);
border-radius:11px;
}
.svc-ind-icon svg{
width:22px;height:22px;
stroke:#16a34a;fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
}
.svc-ind-label{
font-weight:600;
font-size:.94rem;
color:var(--ink);
line-height:1.35;
flex:1;min-width:0;
}
[data-theme="dark"] .svc-ind-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-ind-card:hover{background:linear-gradient(135deg,#0b3520,#111827)}
[data-theme="dark"] .svc-ind-label{color:#f1f5f9}
[data-theme="dark"] .svc-ind-icon{background:rgba(16,185,129,.12)}
[data-theme="dark"] .svc-ind-icon svg{stroke:#22c55e}
/* ====================================================================
Pull-quote / lead intro card
==================================================================== */
.svc-quote-sec{padding:64px 0 24px}
.svc-quote-card{
position:relative;
max-width:880px;
margin:0 auto;
background:linear-gradient(135deg,#f6faf8 0%,#ffffff 100%);
border:1px solid #d1fae5;
border-radius:20px;
padding:42px 44px 36px;
box-shadow:0 18px 42px rgba(15,118,110,.07);
}
.svc-quote-mark{
position:absolute;
top:18px;left:24px;
width:54px;height:54px;
fill:#22c55e;
opacity:.13;
}
.svc-quote-text{
font-size:1.18rem;
line-height:1.7;
color:var(--ink);
font-weight:500;
margin:0 0 12px;
position:relative;
}
.svc-quote-card p{
margin:0 0 12px;
color:var(--muted);
line-height:1.7;
font-size:1rem;
}
.svc-quote-card p:last-child{margin-bottom:0}
[data-theme="dark"] .svc-quote-card{
background:linear-gradient(135deg,#0b1a14 0%,#0a0f1c 100%);
border-color:#16a34a;
box-shadow:0 18px 42px rgba(0,0,0,.4);
}
[data-theme="dark"] .svc-quote-text{color:#f1f5f9}
[data-theme="dark"] .svc-quote-card p{color:#cbd5e1}
@media (max-width:680px){
.svc-quote-card{padding:32px 28px 28px}
.svc-quote-text{font-size:1.06rem}
}
/* Industry feature cards (industries with em-dash descriptions) */
.svc-ind-feat-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}
@media (max-width:780px){.svc-ind-feat-grid{grid-template-columns:1fr}}
.svc-ind-feat-card{
display:flex;align-items:flex-start;gap:14px;
padding:20px 22px;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.svc-ind-feat-card:hover{
transform:translateY(-3px);
box-shadow:0 16px 34px rgba(15,23,42,.07);
border-color:#bbf7d0;
}
.svc-ind-feat-card .svc-ind-icon{margin-top:1px}
.svc-ind-feat-content{flex:1;min-width:0}
.svc-ind-feat-card h3{font-size:1.02rem;margin:0 0 4px;line-height:1.3;font-weight:700;color:var(--ink)}
.svc-ind-feat-card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
[data-theme="dark"] .svc-ind-feat-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-ind-feat-card h3{color:#f1f5f9}
[data-theme="dark"] .svc-ind-feat-card p{color:#94a3b8}
/* ====================================================================
Services hub — category tab bar (icon + label + count badge)
==================================================================== */
.svc-hub .container > .svc-tabs{
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.svc-tabs{
gap:6px;
margin:0 auto 44px;
padding:6px;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:saturate(180%) blur(12px);
backdrop-filter:saturate(180%) blur(12px);
border:1px solid rgba(187,247,208,.7);
border-radius:18px;
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 12px 32px rgba(15,118,110,.08),
0 2px 6px rgba(15,23,42,.04);
position:sticky;
top:84px;
z-index:5;
max-width:fit-content;
}
[data-theme="dark"] .svc-tabs{
background:rgba(15,23,42,.85);
border-color:rgba(15,118,110,.5);
box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 12px 32px rgba(0,0,0,.45),
0 2px 6px rgba(0,0,0,.3);
}
.svc-tab{
appearance:none;
font:inherit;cursor:pointer;
display:inline-flex;align-items:center;gap:9px;
padding:11px 16px;
border:0;
border-radius:12px;
background:transparent;
color:var(--ink);
font-weight:600;
font-size:.93rem;
letter-spacing:-.005em;
transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease;
white-space:nowrap;
position:relative;
}
.svc-tab-icon{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;
flex-shrink:0;
opacity:.6;
transition:opacity .2s ease;
}
.svc-tab-icon svg{
width:100%;height:100%;
stroke:currentColor;fill:none;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.svc-tab-label{line-height:1}
.svc-tab-count{
font-family:'Space Grotesk', Inter, sans-serif;
font-size:.7rem;font-weight:700;letter-spacing:.02em;
padding:3px 8px;
border-radius:999px;
background:rgba(15,23,42,.06);
color:inherit;
min-width:22px;text-align:center;
line-height:1;
transition:background .25s ease, color .25s ease;
}
[data-theme="dark"] .svc-tab{color:#e2e8f0}
[data-theme="dark"] .svc-tab-count{background:rgba(255,255,255,.08)}
.svc-tab:hover{
background:#f7fee7;
color:var(--green-dark);
}
.svc-tab:hover .svc-tab-icon{opacity:1}
.svc-tab:hover .svc-tab-count{background:rgba(15,118,110,.12)}
[data-theme="dark"] .svc-tab:hover{background:rgba(34,197,94,.12);color:#bbf7d0}
.svc-tab.active{
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
color:#fff;
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 8px 22px rgba(15,118,110,.32);
transform:translateY(-1px);
}
.svc-tab.active:hover{
background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
color:#fff;
}
.svc-tab.active .svc-tab-icon{opacity:1}
.svc-tab.active .svc-tab-count{
background:rgba(255,255,255,.22);
color:#fff;
}
/* Mobile — horizontal scroll, slightly smaller */
@media (max-width:780px){
.svc-hub .container > .svc-tabs{justify-content:flex-start}
.svc-tabs{
overflow-x:auto;
flex-wrap:nowrap;
scrollbar-width:none;
-ms-overflow-style:none;
border-radius:16px;
position:static;
max-width:100%;
width:100%;
}
.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{font-size:.86rem;padding:10px 13px;gap:7px}
.svc-tab-icon{width:16px;height:16px}
.svc-tab-count{font-size:.66rem;padding:2px 6px;min-width:0}
}
/* Category group header row + count badge */
.svc-cat-head-row{
display:flex;align-items:flex-end;justify-content:space-between;
gap:14px;margin-bottom:22px;
padding-bottom:10px;
border-bottom:1px solid var(--border);
}
.svc-cat-head{
font-size:1.5rem;
margin:0;
letter-spacing:-.01em;
border:0;padding:0;
}
.svc-cat-count{
font-family:'Space Grotesk', Inter, sans-serif;
font-size:.78rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--green-dark);
background:#f7fee7;
padding:5px 11px;
border-radius:999px;
border:1px solid #bbf7d0;
white-space:nowrap;
}
[data-theme="dark"] .svc-cat-count{
background:rgba(16,185,129,.1);color:#bbf7d0;border-color:#16a34a;
}
/* Fade-in animation when switching tabs */
@keyframes svcCatFade{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
.svc-cat-group.svc-fade-in{animation:svcCatFade .35s ease-out both}
/* ====================================================================
Services hub redesign — image-led portfolio directory
==================================================================== */
.svc-hub-hero{
margin-top:-90px;
min-height:calc(100svh - 18px);
display:grid;
align-items:end;
position:relative;
overflow:hidden;
color:#fff;
background:#07110d;
}
.svc-hub-hero-media{position:absolute;inset:0}
.svc-hub-hero-media img{
width:100%;
height:100%;
object-fit:cover;
filter:saturate(.9) contrast(1.05);
transform:scale(1.02);
animation:svcHeroImage 900ms ease-out both;
}
.svc-hub-hero:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(2,6,23,.88) 0%,rgba(2,6,23,.68) 38%,rgba(2,6,23,.22) 74%),
linear-gradient(0deg,rgba(2,6,23,.78) 0%,rgba(2,6,23,.08) 44%);
z-index:1;
}
.svc-hub-hero .container{
position:relative;
z-index:2;
padding-top:170px;
padding-bottom:80px;
max-width:1220px;
animation:svcHeroCopy 650ms ease-out 120ms both;
}
.svc-hub-hero .breadcrumb{
display:inline-flex;
align-items:center;
width:fit-content;
margin:0 0 18px;
padding:0;
color:rgba(255,255,255,.72);
background:none;
border:0;
font-size:.86rem;
letter-spacing:.04em;
text-transform:uppercase;
}
.svc-hero-kicker{
display:block;
margin-bottom:16px;
color:#86efac;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
font-size:.78rem;
}
.svc-hub-hero h1{
max-width:820px;
margin:0 0 22px;
font-size:clamp(3.1rem,7vw,6.8rem);
line-height:.92;
letter-spacing:-.035em;
color:#fff;
}
.svc-hub-hero p{
max-width:650px;
margin:0;
color:rgba(255,255,255,.82);
font-size:clamp(1.02rem,1.5vw,1.22rem);
line-height:1.65;
}
.svc-hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:32px;
}
.svc-hero-actions .btn-outline{
border-color:rgba(255,255,255,.5);
color:#fff;
background:rgba(255,255,255,.08);
}
.svc-hero-actions .btn-outline:hover{background:rgba(255,255,255,.16)}
@keyframes svcHeroCopy{
from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes svcHeroImage{
from{opacity:.75;transform:scale(1.08)}
to{opacity:1;transform:scale(1.02)}
}
.svc-hub{
padding:42px 0 96px;
background:#f7faf8;
}
[data-theme="dark"] .svc-hub{background:#070b14}
.svc-hub .container{max-width:1220px}
.svc-hub .container > .svc-tabs{
justify-content:flex-start;
margin-bottom:58px;
}
.svc-tabs{
top:92px;
border-radius:8px;
max-width:100%;
background:rgba(255,255,255,.92);
border-color:rgba(15,23,42,.08);
box-shadow:0 18px 42px rgba(15,23,42,.08);
}
.svc-tab{border-radius:6px}
.svc-tab.active{box-shadow:none}
.svc-cat-group{scroll-margin-top:150px;margin-bottom:78px}
.svc-cat-head-row{
align-items:flex-start;
margin-bottom:24px;
padding-bottom:22px;
border-bottom:1px solid rgba(15,23,42,.12);
}
.svc-cat-eyebrow{
display:block;
margin-bottom:8px;
color:#16a34a;
font-size:.76rem;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.svc-cat-head{
margin:0;
font-size:clamp(2rem,3.8vw,3.8rem);
line-height:.98;
color:#07110d;
letter-spacing:-.035em;
}
.svc-cat-desc{
max-width:650px;
margin:12px 0 0;
color:#475569;
line-height:1.65;
}
.svc-cat-jump{
flex-shrink:0;
color:#16a34a;
text-decoration:none;
font-weight:800;
font-size:.82rem;
letter-spacing:.08em;
text-transform:uppercase;
padding-top:10px;
}
.svc-cat-jump:hover{color:#064e3b}
.svc-hub .services-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.svc-hub .svc-card{
min-height:420px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
border:1px solid rgba(15,23,42,.1);
border-radius:8px;
background:#fff;
color:#07110d;
text-decoration:none;
box-shadow:none;
isolation:isolate;
transform:none;
}
.svc-hub .svc-card:before{display:none}
.svc-hub .svc-card:hover{
transform:translateY(-4px);
box-shadow:0 24px 54px rgba(15,23,42,.13);
border-color:rgba(15,118,110,.25);
}
.svc-card-media{
display:block;
position:relative;
height:210px;
overflow:hidden;
background:#0f172a;
}
.svc-card-media:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(2,6,23,0) 35%,rgba(2,6,23,.28));
}
.svc-card-media img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:transform .55s ease, filter .35s ease;
}
.svc-hub .svc-card:hover .svc-card-media img{
transform:scale(1.08);
filter:saturate(1.05) contrast(1.04);
}
.svc-card-body{
display:flex;
flex:1;
flex-direction:column;
padding:22px;
}
.svc-card-kicker{
display:flex;
align-items:center;
gap:9px;
margin-bottom:16px;
color:#16a34a;
font-size:.72rem;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
}
.svc-card-kicker .icon{
width:28px;
height:28px;
display:grid;
place-items:center;
margin:0;
border-radius:50%;
background:#f7fee7;
color:#16a34a;
box-shadow:none;
}
.svc-card-kicker .icon svg{
width:15px;
height:15px;
stroke:currentColor;
fill:none;
stroke-width:2;
}
.svc-card-title{
display:block;
margin:0 0 10px;
font-family:'Space Grotesk',Inter,sans-serif;
color:#07110d;
font-size:1.28rem;
line-height:1.12;
font-weight:800;
letter-spacing:-.02em;
}
.svc-card-copy{
display:block;
color:#475569;
line-height:1.58;
font-size:.95rem;
}
.svc-hub .svc-card .more{
display:inline-flex;
align-items:center;
gap:7px;
width:fit-content;
margin-top:auto;
padding-top:20px;
color:#16a34a;
font-weight:800;
font-size:.88rem;
}
.svc-card-featured{
grid-column:span 2;
min-height:500px;
}
.svc-card-featured .svc-card-media{height:300px}
.svc-card-featured .svc-card-title{font-size:clamp(1.75rem,3vw,2.7rem);max-width:760px}
.svc-card-featured .svc-card-copy{max-width:680px;font-size:1.02rem}
.svc-hub-cta{
padding:86px 0;
background:#07110d;
color:#fff;
text-align:center;
}
.svc-hub-cta h2{
margin:0 0 12px;
color:#fff;
font-size:clamp(2.2rem,4vw,4.3rem);
letter-spacing:-.035em;
}
.svc-hub-cta p{
max-width:620px;
margin:0 auto 28px;
color:rgba(255,255,255,.74);
line-height:1.65;
}
[data-theme="dark"] .svc-cat-head{color:#f8fafc}
[data-theme="dark"] .svc-cat-desc{color:#94a3b8}
[data-theme="dark"] .svc-cat-head-row{border-bottom-color:#1e293b}
[data-theme="dark"] .svc-hub .svc-card{background:#111827;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-card-title{color:#fff}
[data-theme="dark"] .svc-card-copy{color:#94a3b8}
[data-theme="dark"] .svc-card-kicker .icon{background:rgba(16,185,129,.12)}
@media (max-width:1100px){
.svc-hub .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-card-featured{grid-column:span 2}
}
@media (max-width:780px){
.svc-hub-hero{min-height:auto;margin-top:-78px}
.svc-hub-hero .container{padding-top:136px;padding-bottom:58px}
.svc-hub-hero h1{font-size:clamp(2.45rem,15vw,4rem)}
.svc-hero-actions{gap:10px}
.svc-hero-actions .btn,.svc-hero-actions .btn-outline{width:100%;justify-content:center}
.svc-hub{padding:28px 0 70px}
.svc-hub .container > .svc-tabs{margin-bottom:42px}
.svc-cat-head-row{display:block}
.svc-cat-jump{display:inline-block;margin-top:16px}
.svc-hub .services-grid{grid-template-columns:1fr}
.svc-card-featured{grid-column:auto}
.svc-hub .svc-card,.svc-card-featured{min-height:0}
.svc-card-media,.svc-card-featured .svc-card-media{height:220px}
.svc-card-body{padding:20px}
}
/* ====================================================================
Service detail V2 prototype — SEO page
==================================================================== */
.svc2-hero{
margin-top:-90px;
min-height:calc(100svh - 10px);
position:relative;
display:grid;
align-items:end;
overflow:hidden;
background:#06110d;
color:#fff;
}
.svc2-hero-bg{position:absolute;inset:0}
.svc2-hero-bg img{
width:100%;
height:100%;
object-fit:cover;
filter:saturate(.92) contrast(1.04);
transform:scale(1.04);
animation:svc2HeroImage .9s ease-out both;
}
.svc2-hero:before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg,rgba(2,6,23,.92) 0%,rgba(2,6,23,.72) 42%,rgba(2,6,23,.18) 100%),
linear-gradient(0deg,rgba(2,6,23,.78) 0%,rgba(2,6,23,.04) 46%);
}
.svc2-hero .container{
position:relative;
z-index:2;
max-width:1220px;
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:44px;
align-items:end;
padding-top:168px;
padding-bottom:74px;
}
.svc2-hero-copy{
max-width:870px;
animation:svc2HeroCopy .7s ease-out .12s both;
}
.svc2-crumb{
margin:0 0 22px;
color:rgba(255,255,255,.7);
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.08em;
}
.svc2-kicker{
display:block;
margin-bottom:14px;
color:#86efac;
font-size:.78rem;
font-weight:850;
letter-spacing:.12em;
text-transform:uppercase;
}
.svc2-hero h1{
max-width:900px;
margin:0 0 24px;
color:#fff;
font-size:clamp(3rem,6.4vw,6.4rem);
line-height:.92;
letter-spacing:-.04em;
}
.svc2-hero p{
max-width:760px;
margin:0;
color:rgba(255,255,255,.82);
font-size:clamp(1rem,1.35vw,1.18rem);
line-height:1.68;
}
.svc2-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:32px;
}
.svc2-actions .btn-outline{
color:#fff;
border-color:rgba(255,255,255,.48);
background:rgba(255,255,255,.08);
}
.svc2-stat-panel{
display:grid;
gap:1px;
border-radius:8px;
overflow:hidden;
background:rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(16px) saturate(160%);
backdrop-filter:blur(16px) saturate(160%);
border:1px solid rgba(255,255,255,.24);
box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.svc2-stat{
padding:22px 24px;
background:rgba(2,6,23,.42);
}
.svc2-stat strong{
display:block;
color:#fff;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:2rem;
line-height:1;
letter-spacing:-.03em;
}
.svc2-stat span{
display:block;
margin-top:7px;
color:rgba(255,255,255,.7);
font-size:.86rem;
}
@keyframes svc2HeroCopy{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes svc2HeroImage{from{opacity:.8;transform:scale(1.1)}to{opacity:1;transform:scale(1.04)}}
.svc2-nav{
position:sticky;
top:88px;
z-index:8;
background:rgba(255,255,255,.9);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
border-bottom:1px solid rgba(15,23,42,.08);
}
.svc2-nav .container{
max-width:1220px;
display:flex;
gap:8px;
overflow:auto;
padding-top:10px;
padding-bottom:10px;
scrollbar-width:none;
}
.svc2-nav .container::-webkit-scrollbar{display:none}
.svc2-nav a{
flex:0 0 auto;
color:#0f172a;
text-decoration:none;
font-size:.84rem;
font-weight:800;
padding:9px 13px;
border-radius:999px;
}
.svc2-nav a:hover{background:#f7fee7;color:#16a34a}
.svc2-overview,
.svc2-process,
.svc2-focus,
.svc2-industries,
.svc2-difference,
.svc2-trust,
.svc2-faq{
padding:92px 0;
background:#fff;
}
.svc2-overview .container,
.svc2-process .container,
.svc2-focus .container,
.svc2-industries .container,
.svc2-difference .container,
.svc2-trust .container,
.svc2-faq .container{
max-width:1220px;
}
.svc2-overview{background:#f7faf8}
.svc2-overview .container{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:54px;
align-items:start;
}
.svc2-overview h2,
.svc2-section-head h2,
.svc2-focus h2{
margin:0;
color:#07110d;
font-size:clamp(2.2rem,4.2vw,4.8rem);
line-height:.98;
letter-spacing:-.04em;
}
.svc2-prose{margin-top:22px}
.svc2-prose p{
margin:0 0 14px;
color:#475569;
line-height:1.75;
font-size:1.02rem;
}
.svc2-overview-card{
display:grid;
gap:10px;
padding:26px;
border:1px solid rgba(15,23,42,.1);
border-radius:8px;
background:#fff;
box-shadow:0 22px 54px rgba(15,23,42,.08);
}
.svc2-overview-card strong{
margin-bottom:4px;
color:#07110d;
font-size:1.04rem;
}
.svc2-overview-card span{
display:block;
padding:11px 0;
color:#334155;
border-top:1px solid rgba(15,23,42,.08);
}
.svc2-section-head{
max-width:820px;
margin-bottom:34px;
}
.svc2-section-head p{
max-width:720px;
margin:18px 0 0;
color:#475569;
line-height:1.7;
}
.svc2-process{background:#07110d;color:#fff}
.svc2-process .svc2-section-head h2{color:#fff}
.svc2-process .svc2-section-head p{color:rgba(255,255,255,.74)}
.svc2-process-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.svc2-process-card{
min-height:360px;
padding:24px;
border-radius:8px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.13);
display:flex;
flex-direction:column;
}
.svc2-process-card span{
color:#86efac;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:2.3rem;
font-weight:850;
letter-spacing:-.04em;
}
.svc2-process-card h3{
margin:28px 0 12px;
color:#fff;
font-size:1.26rem;
line-height:1.18;
}
.svc2-process-card p{
margin:0;
color:rgba(255,255,255,.72);
line-height:1.62;
font-size:.95rem;
}
.svc2-focus .container{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:54px;
align-items:center;
}
.svc2-focus.flip .svc2-focus-media{order:2}
.svc2-focus.flip .svc2-focus-copy{order:1}
.svc2-focus-media{
overflow:hidden;
border-radius:8px;
min-height:560px;
box-shadow:0 24px 62px rgba(15,23,42,.14);
}
.svc2-focus-media img{
width:100%;
height:100%;
min-height:560px;
object-fit:cover;
display:block;
}
.svc2-mini-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:28px;
}
.svc2-mini-card{
padding:18px;
border-radius:8px;
border:1px solid rgba(15,23,42,.1);
background:#f8fafc;
}
.svc2-mini-card h3{
margin:0 0 6px;
color:#07110d;
font-size:.98rem;
line-height:1.28;
}
.svc2-mini-card p{
margin:0;
color:#475569;
line-height:1.55;
font-size:.92rem;
}
.svc2-industries{background:#f7faf8}
.svc2-industry-grid,
.svc2-trust-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.svc2-industry,
.svc2-trust-card{
padding:22px;
border-radius:8px;
background:#fff;
border:1px solid rgba(15,23,42,.1);
}
.svc2-industry h3,
.svc2-trust-card h3{
margin:14px 0 6px;
color:#07110d;
font-size:1.04rem;
line-height:1.28;
}
.svc2-industry p,
.svc2-trust-card p{
margin:0;
color:#475569;
line-height:1.55;
font-size:.92rem;
}
.svc2-difference{background:#fff}
.svc2-diff-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.svc2-trust{background:#07110d;color:#fff}
.svc2-trust .svc2-section-head h2{color:#fff}
.svc2-trust .svc2-section-head p{color:rgba(255,255,255,.72)}
.svc2-trust-card{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.13);
}
.svc2-trust-card > span{
display:block;
color:#86efac;
font-size:1.5rem;
}
.svc2-trust-card h3{color:#fff}
.svc2-trust-card p{color:rgba(255,255,255,.72)}
.svc2-faq{background:#f7faf8}
.svc2-faq .svc-faq-wrap{max-width:900px;margin:0}
.svc2-cta{
padding:92px 0;
text-align:center;
background:#dcfce7;
}
.svc2-cta h2{
max-width:850px;
margin:0 auto 14px;
color:#07110d;
font-size:clamp(2.4rem,5vw,5rem);
line-height:.95;
letter-spacing:-.04em;
}
.svc2-cta p{
max-width:650px;
margin:0 auto 28px;
color:#334155;
line-height:1.65;
}
[data-theme="dark"] .svc2-nav{background:rgba(7,11,20,.9);border-bottom-color:#1e293b}
[data-theme="dark"] .svc2-nav a{color:#e2e8f0}
[data-theme="dark"] .svc2-nav a:hover{background:rgba(16,185,129,.12);color:#86efac}
[data-theme="dark"] .svc2-overview,
[data-theme="dark"] .svc2-focus,
[data-theme="dark"] .svc2-difference{background:#070b14}
[data-theme="dark"] .svc2-industries,
[data-theme="dark"] .svc2-faq{background:#0b1220}
[data-theme="dark"] .svc2-overview h2,
[data-theme="dark"] .svc2-section-head h2,
[data-theme="dark"] .svc2-focus h2{color:#f8fafc}
[data-theme="dark"] .svc2-prose p,
[data-theme="dark"] .svc2-section-head p{color:#94a3b8}
[data-theme="dark"] .svc2-overview-card,
[data-theme="dark"] .svc2-mini-card,
[data-theme="dark"] .svc2-industry{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc2-overview-card strong,
[data-theme="dark"] .svc2-mini-card h3,
[data-theme="dark"] .svc2-industry h3{color:#f8fafc}
[data-theme="dark"] .svc2-overview-card span,
[data-theme="dark"] .svc2-mini-card p,
[data-theme="dark"] .svc2-industry p{color:#94a3b8}
@media (max-width:1100px){
.svc2-hero .container{grid-template-columns:1fr;gap:28px}
.svc2-stat-panel{grid-template-columns:repeat(4,1fr)}
.svc2-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc2-industry-grid,.svc2-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc2-diff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
.svc2-hero{margin-top:-78px;min-height:auto}
.svc2-hero .container{padding-top:132px;padding-bottom:52px}
.svc2-hero h1{font-size:clamp(2.35rem,14vw,4rem)}
.svc2-actions .btn,.svc2-actions .btn-outline{width:100%;justify-content:center}
.svc2-stat-panel{grid-template-columns:repeat(2,1fr)}
.svc2-nav{top:0}
.svc2-overview,
.svc2-process,
.svc2-focus,
.svc2-industries,
.svc2-difference,
.svc2-trust,
.svc2-faq{padding:62px 0}
.svc2-overview .container,
.svc2-focus .container{grid-template-columns:1fr;gap:30px}
.svc2-focus.flip .svc2-focus-media,
.svc2-focus.flip .svc2-focus-copy{order:initial}
.svc2-focus-media,.svc2-focus-media img{min-height:300px}
.svc2-process-grid,
.svc2-mini-grid,
.svc2-industry-grid,
.svc2-trust-grid,
.svc2-diff-grid{grid-template-columns:1fr}
.svc2-process-card{min-height:0}
.svc2-overview-card{padding:20px}
}
/* SEO hero revision — cleaner editorial direction */
.svc2-hero-clean{
min-height:auto;
align-items:stretch;
color:#07110d;
background:
linear-gradient(180deg,#f7faf8 0%,#ffffff 76%),
#fff;
overflow:visible;
}
.svc2-hero-clean:before{display:none}
.svc2-hero-clean > .container:first-of-type{
max-width:1220px;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
gap:56px;
align-items:center;
padding-top:168px;
padding-bottom:46px;
}
.svc2-hero-clean .svc2-hero-copy{
max-width:760px;
color:#07110d;
}
.svc2-hero-clean .svc2-crumb{
color:#64748b;
}
.svc2-hero-clean .svc2-kicker{
color:#16a34a;
}
.svc2-hero-clean h1{
color:#07110d;
font-size:clamp(3.05rem,5.9vw,6.05rem);
line-height:.94;
max-width:820px;
}
.svc2-hero-clean p{
color:#475569;
max-width:680px;
}
.svc2-hero-clean .svc2-actions .btn-outline{
color:#0f172a;
border-color:rgba(15,23,42,.24);
background:#fff;
}
.svc2-hero-clean .svc2-actions .btn-outline:hover{
border-color:#16a34a;
color:#16a34a;
background:#f7fee7;
}
.svc2-hero-media{
min-height:520px;
overflow:hidden;
border-radius:8px;
border:1px solid rgba(15,23,42,.1);
box-shadow:0 26px 70px rgba(15,23,42,.14);
background:#0f172a;
animation:svc2HeroImage .8s ease-out .08s both;
}
.svc2-hero-media img{
width:100%;
height:100%;
min-height:520px;
display:block;
object-fit:cover;
transition:transform .65s ease, filter .35s ease;
}
.svc2-hero-media:hover img{
transform:scale(1.045);
filter:saturate(1.04) contrast(1.03);
}
.svc2-hero-clean > .container.svc2-stat-panel{
max-width:1220px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
margin-bottom:48px;
padding:0;
border-radius:8px;
overflow:hidden;
background:#fff;
border:1px solid rgba(15,23,42,.1);
box-shadow:0 18px 46px rgba(15,23,42,.08);
}
.svc2-hero-clean .svc2-stat{
background:#fff;
padding:24px 26px;
border-right:1px solid rgba(15,23,42,.08);
}
.svc2-hero-clean .svc2-stat:last-child{border-right:0}
.svc2-hero-clean .svc2-stat strong{
color:#07110d;
}
.svc2-hero-clean .svc2-stat span{
color:#64748b;
}
[data-theme="dark"] .svc2-hero-clean{
background:#070b14;
color:#f8fafc;
}
[data-theme="dark"] .svc2-hero-clean .svc2-hero-copy,
[data-theme="dark"] .svc2-hero-clean h1{color:#f8fafc}
[data-theme="dark"] .svc2-hero-clean p{color:#94a3b8}
[data-theme="dark"] .svc2-hero-clean .svc2-crumb{color:#94a3b8}
[data-theme="dark"] .svc2-hero-clean .svc2-actions .btn-outline{
color:#f8fafc;
background:#111827;
border-color:#334155;
}
[data-theme="dark"] .svc2-hero-clean > .container.svc2-stat-panel,
[data-theme="dark"] .svc2-hero-clean .svc2-stat{
background:#111827;
border-color:#1e293b;
}
[data-theme="dark"] .svc2-hero-clean .svc2-stat strong{color:#f8fafc}
[data-theme="dark"] .svc2-hero-clean .svc2-stat span{color:#94a3b8}
@media (max-width:1100px){
.svc2-hero-clean > .container:first-of-type{
grid-template-columns:1fr;
gap:34px;
}
.svc2-hero-media{min-height:420px}
.svc2-hero-media img{min-height:420px}
}
@media (max-width:780px){
.svc2-hero-clean > .container:first-of-type{
padding-top:126px;
padding-bottom:28px;
gap:26px;
}
.svc2-hero-clean h1{
font-size:clamp(2.35rem,12vw,3.65rem);
line-height:.98;
}
.svc2-hero-clean .svc2-actions .btn,
.svc2-hero-clean .svc2-actions .btn-outline{
width:100%;
justify-content:center;
}
.svc2-hero-media,
.svc2-hero-media img{
min-height:260px;
}
.svc2-hero-clean > .container.svc2-stat-panel{
grid-template-columns:repeat(2,minmax(0,1fr));
margin-bottom:28px;
}
.svc2-hero-clean .svc2-stat{
padding:20px;
border-right:1px solid rgba(15,23,42,.08);
border-bottom:1px solid rgba(15,23,42,.08);
}
.svc2-hero-clean .svc2-stat:nth-child(2n){border-right:0}
.svc2-hero-clean .svc2-stat:nth-last-child(-n+2){border-bottom:0}
}
/* ====================================================================
Services hub v2 — clean split hero, even pill tabs, uniform card grid
Scoped under .svc-hub2 so the original .svc-hub page is untouched.
==================================================================== */
.svc-hub2-hero{
margin-top:-90px;
position:relative;
overflow:hidden;
background:linear-gradient(180deg,#f1faf3 0%,#ffffff 78%);
color:#07110d;
}
.svc-hub2-hero:before{
content:"";
position:absolute;
top:-180px;right:-180px;
width:540px;height:540px;
border-radius:50%;
background:radial-gradient(closest-side,rgba(34,197,94,.18),rgba(34,197,94,0) 70%);
z-index:0;
}
.svc-hub2-hero .container{
position:relative;z-index:1;
display:grid;
grid-template-columns:1.05fr .95fr;
align-items:center;
gap:64px;
padding-top:170px;
padding-bottom:80px;
max-width:1220px;
}
.svc-hub2-hero .breadcrumb{
display:inline-flex;align-items:center;
margin:0 0 18px;padding:0;
color:#16a34a;background:none;border:0;
font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
}
.svc-hub2-kicker{
display:inline-block;
margin-bottom:18px;
padding:6px 12px;
border-radius:999px;
background:#dcfce7;
color:#16a34a;
font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.svc-hub2-hero h1{
margin:0 0 22px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(2.6rem,5.4vw,4.6rem);
line-height:1.02;
letter-spacing:-.03em;
color:#07110d;
}
.svc-hub2-hero h1 em{font-style:normal;color:#16a34a}
.svc-hub2-hero p{
max-width:560px;margin:0;
color:#374151;font-size:1.08rem;line-height:1.65;
}
.svc-hub2-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.svc-hub2-actions .btn-outline{
border:1.5px solid rgba(15,118,110,.4);
color:#16a34a;background:#ffffff;
}
.svc-hub2-actions .btn-outline:hover{background:#f7fee7}
.svc-hub2-meta{
display:flex;flex-wrap:wrap;gap:28px;
margin-top:36px;
padding-top:26px;
border-top:1px solid rgba(15,23,42,.08);
}
.svc-hub2-meta-item .num{
display:block;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.65rem;font-weight:800;color:#07110d;line-height:1;
}
.svc-hub2-meta-item .lbl{
display:block;margin-top:6px;
color:#475569;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
.svc-hub2-hero-media{
position:relative;
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 70px rgba(15,23,42,.18);
aspect-ratio:4/3.4;
}
.svc-hub2-hero-media img{
width:100%;height:100%;object-fit:cover;display:block;
animation:svcHub2Img 800ms ease-out both;
}
@keyframes svcHub2Img{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
/* Section wrapper */
.svc-hub2{
padding:64px 0 96px;
background:#ffffff;
}
[data-theme="dark"] .svc-hub2-hero{background:linear-gradient(180deg,#06120c 0%,#070b14 80%);color:#f8fafc}
[data-theme="dark"] .svc-hub2-hero h1{color:#f8fafc}
[data-theme="dark"] .svc-hub2-hero p{color:#cbd5e1}
[data-theme="dark"] .svc-hub2-meta-item .num{color:#f8fafc}
[data-theme="dark"] .svc-hub2{background:#070b14}
/* Tabs — even-spaced pill bar */
.svc-hub2-tabs{
position:sticky;top:88px;z-index:40;
display:flex;flex-wrap:wrap;
gap:8px;
padding:10px;
margin:0 0 56px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
box-shadow:0 12px 30px rgba(15,23,42,.06);
}
[data-theme="dark"] .svc-hub2-tabs{
background:#0f172a;border-color:#1e293b;box-shadow:none;
}
.svc-hub2-tab{
flex:1 1 auto;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 16px;
border:0;background:transparent;
color:#334155;
font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;
border-radius:10px;
cursor:pointer;
transition:background .2s ease,color .2s ease;
}
.svc-hub2-tab:hover{background:#f1f5f9;color:#07110d}
[data-theme="dark"] .svc-hub2-tab{color:#cbd5e1}
[data-theme="dark"] .svc-hub2-tab:hover{background:rgba(255,255,255,.05);color:#f8fafc}
.svc-hub2-tab.active{
background:#07110d;color:#ffffff;
}
[data-theme="dark"] .svc-hub2-tab.active{background:#22c55e;color:#07110d}
.svc-hub2-tab .count{
display:inline-grid;place-items:center;
min-width:22px;height:22px;padding:0 6px;
border-radius:999px;
background:rgba(15,23,42,.08);
color:#475569;
font-size:.7rem;font-weight:800;
}
.svc-hub2-tab.active .count{background:rgba(255,255,255,.18);color:#ffffff}
[data-theme="dark"] .svc-hub2-tab .count{background:rgba(255,255,255,.08);color:#cbd5e1}
[data-theme="dark"] .svc-hub2-tab.active .count{background:rgba(7,17,13,.2);color:#07110d}
/* Category groups */
.svc-hub2-group{margin-bottom:80px;scroll-margin-top:170px}
.svc-hub2-group:last-child{margin-bottom:0}
.svc-hub2-grouphead{margin:0 0 28px}
.svc-hub2-grouphead .eyebrow{
display:inline-block;
color:#16a34a;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:8px;
}
.svc-hub2-grouphead h2{
margin:0 0 8px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(1.7rem,3vw,2.6rem);
letter-spacing:-.025em;
color:#07110d;
line-height:1.1;
}
.svc-hub2-grouphead p{
max-width:680px;margin:0;
color:#475569;line-height:1.6;font-size:1rem;
}
[data-theme="dark"] .svc-hub2-grouphead h2{color:#f8fafc}
[data-theme="dark"] .svc-hub2-grouphead p{color:#94a3b8}
/* Uniform 3-col card grid (no spans, no featured outlier) */
.svc-hub2-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.svc-hub2-card{
display:flex;flex-direction:column;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
overflow:hidden;
text-decoration:none;color:inherit;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.svc-hub2-card:hover{
transform:translateY(-4px);
border-color:rgba(15,118,110,.35);
box-shadow:0 24px 48px rgba(15,23,42,.1);
}
.svc-hub2-card-media{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:#0f172a;
}
.svc-hub2-card-media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s ease;
}
.svc-hub2-card:hover .svc-hub2-card-media img{transform:scale(1.06)}
.svc-hub2-card-body{
display:flex;flex:1;flex-direction:column;
padding:22px 22px 24px;
}
.svc-hub2-card-cat{
display:inline-block;
margin-bottom:10px;
color:#16a34a;
font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.svc-hub2-card h3{
margin:0 0 8px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.18rem;line-height:1.25;font-weight:700;
letter-spacing:-.01em;
color:#07110d;
}
.svc-hub2-card p{
margin:0 0 18px;
color:#475569;font-size:.94rem;line-height:1.55;
}
.svc-hub2-card .arrow{
display:inline-flex;align-items:center;gap:6px;
margin-top:auto;
color:#16a34a;font-weight:800;font-size:.85rem;
letter-spacing:.04em;
}
.svc-hub2-card .arrow svg{
width:16px;height:16px;
transition:transform .25s ease;
}
.svc-hub2-card:hover .arrow svg{transform:translateX(4px)}
[data-theme="dark"] .svc-hub2-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .svc-hub2-card h3{color:#f8fafc}
[data-theme="dark"] .svc-hub2-card p{color:#94a3b8}
/* Bottom CTA — refined dark band */
.svc-hub2-cta{
position:relative;
padding:88px 0;
background:linear-gradient(135deg,#07110d 0%,#0f2a1c 100%);
color:#ffffff;text-align:center;overflow:hidden;
}
.svc-hub2-cta:before{
content:"";position:absolute;inset:0;
background:radial-gradient(600px circle at 50% 0%,rgba(34,197,94,.18),transparent 60%);
}
.svc-hub2-cta .container{position:relative}
.svc-hub2-cta h2{
margin:0 0 14px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(2rem,4vw,3.4rem);
letter-spacing:-.03em;line-height:1.05;color:#ffffff;
}
.svc-hub2-cta p{
max-width:580px;margin:0 auto 28px;
color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.6;
}
/* Fade-in when switching tabs */
.svc-hub2-group.is-fade{animation:svcHub2Fade .35s ease-out both}
@keyframes svcHub2Fade{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
/* Responsive */
@media (max-width:1100px){
.svc-hub2-hero .container{grid-template-columns:1fr;gap:42px;padding-top:150px;padding-bottom:60px}
.svc-hub2-hero-media{order:-1;max-width:560px;margin:0 auto;width:100%}
.svc-hub2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
.svc-hub2-hero{margin-top:-78px}
.svc-hub2-hero .container{padding-top:128px;padding-bottom:48px;gap:30px}
.svc-hub2-hero h1{font-size:clamp(2.2rem,9vw,3rem)}
.svc-hub2-meta{gap:18px}
.svc-hub2-meta-item .num{font-size:1.35rem}
.svc-hub2{padding:40px 0 70px}
.svc-hub2-tabs{
position:static;flex-wrap:nowrap;overflow-x:auto;
border-radius:12px;padding:8px;gap:6px;margin-bottom:36px;
}
.svc-hub2-tabs::-webkit-scrollbar{display:none}
.svc-hub2-tab{flex:0 0 auto;padding:9px 13px;font-size:.84rem}
.svc-hub2-grid{grid-template-columns:1fr;gap:16px}
.svc-hub2-group{margin-bottom:56px}
.svc-hub2-cta{padding:64px 0}
}
/* ====================================================================
Services hub v3 — premium agency look
Dark mesh hero, floating glass cards, marquee, sticky pill tabs with
sliding indicator, bento image cards, dramatic CTA.
Scoped under .svc-hub3* — fully isolated from earlier versions.
==================================================================== */
/* HERO ---------------------------------------------------------------- */
.svc-hub3-hero{
position:relative;
margin-top:-90px;
padding:170px 0 0;
background:#050a07;
color:#fff;
overflow:hidden;
isolation:isolate;
}
.svc-hub3-hero:before{
content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(900px circle at 8% 12%,rgba(34,197,94,.32),transparent 55%),
radial-gradient(720px circle at 92% 78%,rgba(20,184,166,.24),transparent 60%),
radial-gradient(500px circle at 78% 6%,rgba(34,197,94,.16),transparent 60%);
}
.svc-hub3-hero:after{
content:"";position:absolute;inset:0;z-index:0;opacity:.18;pointer-events:none;
background-image:
linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 30%,transparent 75%);
mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 30%,transparent 75%);
}
.svc-hub3-hero .container{
position:relative;z-index:2;
display:grid;
grid-template-columns:1.18fr .82fr;
gap:80px;align-items:center;
max-width:1280px;
padding-bottom:90px;
}
/* status badge */
.svc-hub3-badge{
display:inline-flex;align-items:center;gap:9px;
padding:7px 14px 7px 12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-radius:999px;
font-size:.78rem;font-weight:600;letter-spacing:.04em;
color:rgba(255,255,255,.86);
margin-bottom:30px;
}
.svc-hub3-badge .dot{
width:7px;height:7px;border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.18);
animation:svc3DotPulse 2.4s ease-in-out infinite;
}
@keyframes svc3DotPulse{
0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
50%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
}
.svc-hub3-hero h1{
margin:0 0 28px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(2.8rem,6vw,5.6rem);
line-height:.96;
letter-spacing:-.04em;
font-weight:700;
color:#fff;
}
.svc-hub3-hero h1 .accent{
display:inline-block;font-style:italic;font-weight:500;
background:linear-gradient(90deg,#22c55e 0%,#a7f3d0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
padding:0 .04em;
}
.svc-hub3-hero h1 .underline{position:relative;display:inline-block}
.svc-hub3-hero h1 .underline:after{
content:"";position:absolute;left:0;right:0;bottom:-.04em;height:8px;
background:linear-gradient(90deg,rgba(34,197,94,.55),rgba(34,197,94,0));
border-radius:4px;
}
.svc-hub3-hero .lead{
max-width:540px;margin:0 0 38px;
color:rgba(255,255,255,.74);
font-size:1.12rem;line-height:1.7;
}
.svc-hub3-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:50px}
.svc-hub3-actions .btn-primary{
display:inline-flex;align-items:center;gap:8px;
padding:14px 22px;border-radius:12px;
background:#22c55e;color:#062014;
font-weight:700;text-decoration:none;
box-shadow:0 14px 40px rgba(34,197,94,.4),inset 0 -3px 0 rgba(0,0,0,.12);
transition:transform .2s ease,box-shadow .2s ease;
}
.svc-hub3-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(34,197,94,.5)}
.svc-hub3-actions .btn-primary svg{width:16px;height:16px}
.svc-hub3-actions .btn-ghost{
display:inline-flex;align-items:center;gap:8px;
padding:14px 20px;border-radius:12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
color:#fff;font-weight:600;text-decoration:none;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
transition:background .2s,border-color .2s;
}
.svc-hub3-actions .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(34,197,94,.5)}
.svc-hub3-stats{
display:flex;flex-wrap:wrap;align-items:center;gap:0;
padding-top:32px;
border-top:1px solid rgba(255,255,255,.08);
}
.svc-hub3-stat{
padding-right:34px;margin-right:34px;
border-right:1px solid rgba(255,255,255,.08);
}
.svc-hub3-stat:last-child{border-right:0;margin-right:0;padding-right:0}
.svc-hub3-stat .num{
display:block;line-height:1;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:2rem;font-weight:700;
background:linear-gradient(135deg,#fff 0%,#a7f3d0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-hub3-stat .lbl{
display:block;margin-top:8px;
color:rgba(255,255,255,.55);
font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
/* floating glass preview cards (right side of hero) */
.svc-hub3-floats{position:relative;height:540px}
.svc-float-card{
position:absolute;width:280px;
padding:20px;border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
box-shadow:0 30px 80px rgba(0,0,0,.45);
color:#fff;
}
.svc-float-card .label{
display:inline-block;
font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:#86efac;margin-bottom:14px;
}
.svc-float-card h4{
margin:0 0 8px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.18rem;font-weight:700;color:#fff;
}
.svc-float-card .desc{margin:0;color:rgba(255,255,255,.62);font-size:.86rem;line-height:1.5}
.svc-float-card .row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:14px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.08);
}
.svc-float-card .row .v{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.4rem;font-weight:700;color:#22c55e;
}
.svc-float-card .row .k{
color:rgba(255,255,255,.5);
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.svc-float-1{top:10px;right:80px;animation:svc3Float1 6s ease-in-out infinite}
.svc-float-2{top:180px;right:0;animation:svc3Float2 7s ease-in-out infinite}
.svc-float-3{top:350px;right:120px;animation:svc3Float3 8s ease-in-out infinite}
@keyframes svc3Float1{
0%,100%{transform:rotate(-3deg) translateY(0)}
50%{transform:rotate(-3deg) translateY(-12px)}
}
@keyframes svc3Float2{
0%,100%{transform:rotate(2.5deg) translateY(0)}
50%{transform:rotate(2.5deg) translateY(-16px)}
}
@keyframes svc3Float3{
0%,100%{transform:rotate(-2deg) translateY(0)}
50%{transform:rotate(-2deg) translateY(-10px)}
}
/* marquee strip at bottom of hero */
.svc-hub3-marquee{
position:relative;z-index:2;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(0,0,0,.25);
overflow:hidden;
}
.svc-hub3-marquee:before,.svc-hub3-marquee:after{
content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;
}
.svc-hub3-marquee:before{left:0;background:linear-gradient(90deg,#050a07,transparent)}
.svc-hub3-marquee:after{right:0;background:linear-gradient(-90deg,#050a07,transparent)}
.svc-hub3-marquee-track{
display:flex;width:max-content;
animation:svc3Marq 42s linear infinite;
}
.svc-hub3-marquee-item{
display:inline-flex;align-items:center;gap:14px;padding:0 30px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.06rem;font-weight:500;letter-spacing:-.005em;
color:rgba(255,255,255,.65);
white-space:nowrap;
}
.svc-hub3-marquee-item .star{color:#22c55e;font-size:.7rem}
@keyframes svc3Marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* SECTION ------------------------------------------------------------- */
.svc-hub3{
padding:96px 0 110px;
background:linear-gradient(180deg,#fafafa 0%,#ffffff 100%);
position:relative;
}
[data-theme="dark"] .svc-hub3{background:#070b14}
/* TABS — sliding indicator pill */
.svc-hub3-tabs-wrap{
position:sticky;top:84px;z-index:40;
margin:0 0 64px;
}
.svc-hub3-tabs{
position:relative;
display:flex;flex-wrap:wrap;gap:4px;
padding:6px;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
box-shadow:0 12px 36px rgba(15,23,42,.08);
}
[data-theme="dark"] .svc-hub3-tabs{
background:rgba(15,23,42,.85);border-color:#1e293b;box-shadow:none;
}
.svc-hub3-tab-indicator{
position:absolute;top:6px;bottom:6px;
background:#07110d;
border-radius:10px;z-index:0;
transition:transform .4s cubic-bezier(.5,1.5,.5,1),width .4s cubic-bezier(.5,1.5,.5,1);
pointer-events:none;
box-shadow:0 6px 18px rgba(7,17,13,.25);
}
[data-theme="dark"] .svc-hub3-tab-indicator{background:#22c55e}
.svc-hub3-tab{
position:relative;z-index:1;
flex:1 1 auto;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 18px;
border:0;background:transparent;
color:#475569;
font-family:Inter,sans-serif;font-size:.92rem;font-weight:600;
border-radius:10px;cursor:pointer;
transition:color .25s ease;
white-space:nowrap;
}
.svc-hub3-tab:hover{color:#07110d}
.svc-hub3-tab.active{color:#fff}
[data-theme="dark"] .svc-hub3-tab{color:#cbd5e1}
[data-theme="dark"] .svc-hub3-tab:hover{color:#fff}
[data-theme="dark"] .svc-hub3-tab.active{color:#062014}
.svc-hub3-tab .count{
display:inline-grid;place-items:center;
min-width:22px;height:22px;padding:0 7px;border-radius:999px;
background:rgba(15,23,42,.08);
color:#475569;
font-size:.68rem;font-weight:700;
transition:background .25s,color .25s;
}
.svc-hub3-tab.active .count{background:rgba(34,197,94,.95);color:#062014}
/* GROUPS + bento grid */
.svc-hub3-group{margin-bottom:96px;scroll-margin-top:160px}
.svc-hub3-group:last-child{margin-bottom:0}
.svc-hub3-grouphead{
display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
margin:0 0 36px;padding-bottom:22px;
border-bottom:1px dashed rgba(15,23,42,.14);
}
[data-theme="dark"] .svc-hub3-grouphead{border-bottom-color:rgba(255,255,255,.1)}
.svc-hub3-grouphead .num-tag{
display:inline-flex;align-items:center;gap:10px;
margin-bottom:14px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:#16a34a;
}
.svc-hub3-grouphead .num-tag .num{
display:inline-grid;place-items:center;
width:30px;height:30px;border-radius:50%;
background:#dcfce7;color:#16a34a;
font-size:.84rem;font-weight:800;
}
.svc-hub3-grouphead h2{
margin:0 0 8px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(2.25rem,4.1vw,3.85rem);
letter-spacing:-.035em;line-height:1.02;color:#07110d;font-weight:800;
}
.svc-hub3-grouphead h2 em{font-style:italic;color:#16a34a;font-weight:600}
.svc-hub3-grouphead p{margin:0;max-width:560px;color:#475569;font-size:1rem;line-height:1.6}
.svc-hub3-grouphead .right-link{
display:inline-flex;align-items:center;gap:6px;
color:#16a34a;font-weight:700;font-size:.78rem;letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.svc-hub3-grouphead .right-link:hover{color:#064e3b}
[data-theme="dark"] .svc-hub3-grouphead h2{color:#f8fafc}
[data-theme="dark"] .svc-hub3-grouphead p{color:#94a3b8}
/* BENTO GRID */
.svc-hub3-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
grid-auto-rows:240px;
gap:18px;
}
.svc-hub3-grid .svc-hub3-card{grid-column:span 2}
.svc-hub3-grid .svc-hub3-card.is-featured{grid-column:span 4;grid-row:span 2}
.svc-hub3-card{
position:relative;
display:flex;flex-direction:column;
border-radius:18px;
overflow:hidden;
text-decoration:none;color:#fff;
isolation:isolate;
transition:transform .35s ease;
background:#0f172a;
min-height:240px;
}
.svc-hub3-card:hover{transform:translateY(-5px)}
.svc-hub3-card .img{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;
transition:transform .8s ease,filter .4s ease;
}
.svc-hub3-card:hover .img{transform:scale(1.07);filter:saturate(1.1)}
.svc-hub3-card:before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(7,17,13,0) 0%,rgba(7,17,13,.35) 35%,rgba(7,17,13,.82) 65%,rgba(7,17,13,.97) 100%);
}
.svc-hub3-card:after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit;
border:1px solid rgba(255,255,255,.08);
transition:border-color .3s,box-shadow .3s;
}
.svc-hub3-card:hover:after{
border-color:rgba(34,197,94,.45);
box-shadow:0 0 0 1px rgba(34,197,94,.22),0 30px 70px rgba(15,23,42,.4);
}
.svc-hub3-card-content{
position:relative;z-index:2;
margin-top:auto;
padding:22px 22px 22px;
display:flex;flex-direction:column;
}
.svc-hub3-card .cat{
display:inline-flex;align-items:center;gap:7px;
margin-bottom:8px;
font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.78);
}
.svc-hub3-card .cat:before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;
}
.svc-hub3-card h3{
margin:0 0 4px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.22rem;line-height:1.22;font-weight:700;letter-spacing:-.015em;
color:#fff;
}
.svc-hub3-card p{
margin:6px 0 0;color:rgba(255,255,255,.82);
font-size:.9rem;line-height:1.5;
display:block;
}
.svc-hub3-card .arrow{
position:absolute;top:18px;right:18px;z-index:3;
width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
display:grid;place-items:center;color:#fff;
transition:background .25s,transform .25s,border-color .25s;
}
.svc-hub3-card .arrow svg{width:16px;height:16px;transition:transform .25s}
.svc-hub3-card:hover .arrow{background:#22c55e;border-color:#22c55e;color:#062014}
.svc-hub3-card:hover .arrow svg{transform:translate(2px,-2px)}
.svc-hub3-card.is-featured h3{font-size:clamp(1.7rem,2.4vw,2.5rem);max-width:560px}
.svc-hub3-card.is-featured p{display:block;max-width:520px;margin-top:8px;font-size:.98rem}
.svc-hub3-card.is-featured .arrow{width:48px;height:48px;top:22px;right:22px}
.svc-hub3-card.is-featured .arrow svg{width:18px;height:18px}
.svc-hub3-card.is-featured .svc-hub3-card-content{padding:30px}
/* fade in on tab switch */
.svc-hub3-group.is-fade{animation:svc3Fade .42s ease-out both}
@keyframes svc3Fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* CTA ----------------------------------------------------------------- */
.svc-hub3-cta{
position:relative;
padding:120px 0;
background:#050a07;color:#fff;text-align:center;
overflow:hidden;isolation:isolate;
}
.svc-hub3-cta:before{
content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(800px circle at 50% 0%,rgba(34,197,94,.34),transparent 55%),
radial-gradient(620px circle at 18% 100%,rgba(20,184,166,.24),transparent 60%),
radial-gradient(520px circle at 82% 100%,rgba(34,197,94,.18),transparent 60%);
}
.svc-hub3-cta:after{
content:"";position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;
background-image:
linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent 80%);
mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent 80%);
}
.svc-hub3-cta .container{position:relative;z-index:2}
.svc-hub3-cta .badge{
display:inline-flex;align-items:center;gap:8px;
padding:7px 14px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.85);
font-size:.78rem;font-weight:600;letter-spacing:.04em;
margin-bottom:24px;
}
.svc-hub3-cta .badge .dot{
width:6px;height:6px;border-radius:50%;background:#22c55e;
box-shadow:0 0 0 3px rgba(34,197,94,.2);
}
.svc-hub3-cta h2{
margin:0 auto 18px;max-width:820px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(2.4rem,5vw,4.6rem);
letter-spacing:-.035em;line-height:1.02;color:#fff;font-weight:700;
}
.svc-hub3-cta h2 em{
font-style:italic;font-weight:500;
background:linear-gradient(90deg,#22c55e 0%,#a7f3d0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-hub3-cta p{
max-width:580px;margin:0 auto 36px;
color:rgba(255,255,255,.74);font-size:1.08rem;line-height:1.6;
}
.svc-hub3-cta .actions{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* Responsive ---------------------------------------------------------- */
@media (max-width:1100px){
.svc-hub3-hero .container{grid-template-columns:1fr;gap:48px;padding-bottom:70px}
.svc-hub3-floats{height:380px;max-width:520px;margin:0 auto}
.svc-float-card{width:240px}
.svc-float-1{right:auto;left:0}
.svc-float-2{right:0;top:160px}
.svc-float-3{right:auto;left:60px;top:300px}
.svc-hub3-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px}
.svc-hub3-grid .svc-hub3-card.is-featured{grid-column:span 4;grid-row:span 2}
.svc-hub3-grid .svc-hub3-card{grid-column:span 2}
}
@media (max-width:780px){
.svc-hub3-hero{margin-top:-78px;padding:130px 0 0}
.svc-hub3-hero .container{gap:36px;padding-bottom:50px}
.svc-hub3-hero h1{font-size:clamp(2.2rem,9vw,3rem)}
.svc-hub3-stats{gap:0}
.svc-hub3-stat{padding-right:18px;margin-right:18px}
.svc-hub3-stat .num{font-size:1.55rem}
.svc-hub3-floats{height:360px}
.svc-float-card{width:220px;padding:16px}
.svc-float-1{left:0;top:0}
.svc-float-2{right:0;top:130px}
.svc-float-3{left:30px;top:240px}
.svc-hub3-marquee-item{font-size:.94rem;padding:0 22px}
.svc-hub3{padding:60px 0 80px}
.svc-hub3-tabs-wrap{position:static;margin-bottom:42px}
.svc-hub3-tabs{flex-wrap:nowrap;overflow-x:auto;padding:5px;border-radius:12px}
.svc-hub3-tabs::-webkit-scrollbar{display:none}
.svc-hub3-tab{flex:0 0 auto;padding:9px 14px;font-size:.84rem}
.svc-hub3-tab-indicator{display:none}
.svc-hub3-tab.active{background:#07110d}
.svc-hub3-grouphead{grid-template-columns:1fr;gap:14px}
.svc-hub3-grouphead .right-link{justify-self:start}
.svc-hub3-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
.svc-hub3-grid .svc-hub3-card,
.svc-hub3-grid .svc-hub3-card.is-featured{grid-column:auto;grid-row:auto;min-height:300px}
.svc-hub3-card.is-featured{min-height:380px}
.svc-hub3-card.is-featured h3{font-size:1.55rem}
.svc-hub3-cta{padding:80px 0}
}
/* ====================================================================
Section variants — each services category gets its own layout.
Marketing keeps the bento grid (svc-hub3-grid above).
==================================================================== */
/* --- Variant 2: ADVERTISING — split feature + sidebar list --------- */
.svc-hub3-split{
display:grid;grid-template-columns:1.18fr 1fr;
gap:24px;align-items:stretch;
}
.svc-hub3-split-feature{
position:relative;display:flex;flex-direction:column;
border-radius:20px;overflow:hidden;
text-decoration:none;color:#fff;
isolation:isolate;background:#0f172a;
min-height:560px;transition:transform .35s ease;
}
.svc-hub3-split-feature:hover{transform:translateY(-4px)}
.svc-hub3-split-feature .img{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;
transition:transform .8s ease,filter .4s;
}
.svc-hub3-split-feature:hover .img{transform:scale(1.06);filter:saturate(1.1)}
.svc-hub3-split-feature:before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(7,17,13,0) 30%,rgba(7,17,13,.55) 65%,rgba(7,17,13,.95) 100%);
}
.svc-hub3-split-feature:after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit;border:1px solid rgba(255,255,255,.08);
transition:border-color .3s,box-shadow .3s;
}
.svc-hub3-split-feature:hover:after{
border-color:rgba(34,197,94,.4);
box-shadow:0 0 0 1px rgba(34,197,94,.2),0 30px 70px rgba(15,23,42,.4);
}
.svc-hub3-split-feature .content{
position:relative;z-index:2;margin-top:auto;padding:36px;
}
.svc-hub3-split-feature .badge-live{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;margin-bottom:18px;
background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);
border-radius:999px;color:#86efac;
font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.svc-hub3-split-feature .badge-live .dot{
width:6px;height:6px;border-radius:50%;background:#22c55e;
animation:svc3DotPulse 2.4s ease-in-out infinite;
}
.svc-hub3-split-feature h3{
margin:0 0 12px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(1.7rem,2.4vw,2.4rem);
line-height:1.08;letter-spacing:-.025em;font-weight:700;color:#fff;max-width:560px;
}
.svc-hub3-split-feature p{
margin:0;color:rgba(255,255,255,.78);font-size:.98rem;line-height:1.6;max-width:520px;
}
.svc-hub3-split-feature .arrow{
position:absolute;top:24px;right:24px;z-index:3;
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
display:grid;place-items:center;color:#fff;
transition:background .25s,transform .25s,border-color .25s;
}
.svc-hub3-split-feature .arrow svg{width:18px;height:18px;transition:transform .25s}
.svc-hub3-split-feature:hover .arrow{background:#22c55e;border-color:#22c55e;color:#062014}
.svc-hub3-split-feature:hover .arrow svg{transform:translate(2px,-2px)}
.svc-hub3-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.svc-hub3-list .lrow{
display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
padding:18px 22px;background:#fff;
border:1px solid rgba(15,23,42,.08);border-radius:14px;
text-decoration:none;color:#07110d;
position:relative;overflow:hidden;flex:1;
transition:transform .25s,border-color .25s,box-shadow .25s;
}
.svc-hub3-list .lrow:before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0;
background:linear-gradient(180deg,#22c55e,#16a34a);transition:width .3s ease;
}
.svc-hub3-list .lrow:hover{
transform:translateX(4px);border-color:rgba(34,197,94,.4);
box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.svc-hub3-list .lrow:hover:before{width:4px}
.svc-hub3-list .lnum{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.05rem;font-weight:700;color:#16a34a;
display:inline-grid;place-items:center;
width:38px;height:38px;border-radius:10px;background:#dcfce7;
}
.svc-hub3-list .ltext{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc-hub3-list .ltitle{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.05rem;font-weight:700;line-height:1.2;color:#07110d;
}
.svc-hub3-list .ldesc{
color:#64748b;font-size:.84rem;line-height:1.4;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.svc-hub3-list .larrow{
width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;color:#16a34a;background:transparent;
transition:background .25s,color .25s;
}
.svc-hub3-list .lrow:hover .larrow{background:#22c55e;color:#062014}
.svc-hub3-list .larrow svg{width:14px;height:14px;transition:transform .25s}
.svc-hub3-list .lrow:hover .larrow svg{transform:translateX(2px)}
[data-theme="dark"] .svc-hub3-list .lrow{background:#0f172a;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-hub3-list .ltitle{color:#f8fafc}
[data-theme="dark"] .svc-hub3-list .lnum{background:rgba(34,197,94,.12);color:#86efac}
/* --- Variant 3: DESIGN & CONTENT — editorial mosaic ---------------- */
.svc-hub3-mosaic{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:repeat(4,170px);
gap:18px;
}
.svc-hub3-mosaic .mcard{
position:relative;display:flex;flex-direction:column;
border-radius:18px;overflow:hidden;
text-decoration:none;color:#fff;
isolation:isolate;background:#0f172a;
transition:transform .35s ease;min-height:0;
}
.svc-hub3-mosaic .mcard:hover{transform:translateY(-4px)}
.svc-hub3-mosaic .mcard .img{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;
transition:transform .8s ease,filter .4s;
}
.svc-hub3-mosaic .mcard:hover .img{transform:scale(1.07);filter:saturate(1.1)}
.svc-hub3-mosaic .mcard:before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(7,17,13,0) 30%,rgba(7,17,13,.5) 65%,rgba(7,17,13,.95) 100%);
}
.svc-hub3-mosaic .mcard:after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
border:1px solid rgba(255,255,255,.08);
transition:border-color .3s,box-shadow .3s;
}
.svc-hub3-mosaic .mcard:hover:after{
border-color:rgba(34,197,94,.4);
box-shadow:0 0 0 1px rgba(34,197,94,.2),0 26px 60px rgba(15,23,42,.4);
}
.svc-hub3-mosaic .mcard .meta{position:relative;z-index:2;margin-top:auto;padding:18px}
.svc-hub3-mosaic .mcard .cat{
display:inline-flex;align-items:center;gap:6px;
font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.78);margin-bottom:6px;
}
.svc-hub3-mosaic .mcard .cat:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#22c55e}
.svc-hub3-mosaic .mcard h3{
margin:0;font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.05rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:#fff;
}
.svc-hub3-mosaic .mcard .ed-tag{
position:absolute;top:14px;left:14px;z-index:3;
padding:5px 10px;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.svc-hub3-mosaic .mcard .arrow{
position:absolute;top:14px;right:14px;z-index:3;
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
display:grid;place-items:center;color:#fff;
transition:background .25s,border-color .25s;
}
.svc-hub3-mosaic .mcard .arrow svg{width:14px;height:14px;transition:transform .25s}
.svc-hub3-mosaic .mcard:hover .arrow{background:#22c55e;border-color:#22c55e;color:#062014}
.svc-hub3-mosaic .mcard:hover .arrow svg{transform:translate(2px,-2px)}
.svc-hub3-mosaic .m-big{grid-column:1/3;grid-row:1/5}
.svc-hub3-mosaic .m-sq{grid-column:3/5;grid-row:1/3}
.svc-hub3-mosaic .m-1{grid-column:3/4;grid-row:3/4}
.svc-hub3-mosaic .m-2{grid-column:4/5;grid-row:3/4}
.svc-hub3-mosaic .m-wide{grid-column:3/5;grid-row:4/5}
.svc-hub3-mosaic .m-big h3{font-size:clamp(1.5rem,2vw,2rem);max-width:380px}
.svc-hub3-mosaic .m-big .meta{padding:30px}
.svc-hub3-mosaic .m-big .desc{
display:block;margin-top:10px;color:rgba(255,255,255,.78);
font-size:.95rem;line-height:1.55;max-width:340px;
}
.svc-hub3-mosaic .m-sq h3{font-size:1.25rem}
.svc-hub3-mosaic .m-big .arrow{width:42px;height:42px}
.svc-hub3-mosaic .m-big .arrow svg{width:16px;height:16px}
/* --- Variant 4: STRATEGY & DATA — numbered roadmap rows ------------ */
.svc-hub3-rows{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:12px;
}
.svc-hub3-rows .strow{
display:grid;grid-template-columns:80px 1fr auto auto;gap:24px;align-items:center;
padding:22px 26px;background:#fff;
border:1px solid rgba(15,23,42,.08);border-radius:16px;
text-decoration:none;color:#07110d;
position:relative;overflow:hidden;
transition:transform .25s ease,border-color .25s,box-shadow .25s;
}
.svc-hub3-rows .strow:before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0;
background:linear-gradient(180deg,#22c55e,#16a34a);transition:width .3s;
}
.svc-hub3-rows .strow:hover{
transform:translateX(6px);border-color:rgba(34,197,94,.4);
box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.svc-hub3-rows .strow:hover:before{width:5px}
.svc-hub3-rows .stnum{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:2.2rem;font-weight:700;line-height:1;color:#16a34a;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.svc-hub3-rows .sttext{display:flex;flex-direction:column;gap:4px;min-width:0}
.svc-hub3-rows .sttitle{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.18rem;font-weight:700;line-height:1.2;color:#07110d;letter-spacing:-.015em;
}
.svc-hub3-rows .stdesc{color:#64748b;font-size:.92rem;line-height:1.5}
.svc-hub3-rows .stmetric{
display:flex;flex-direction:column;align-items:flex-end;gap:2px;
padding:0 10px 0 18px;
border-left:1px solid rgba(15,23,42,.08);
min-width:130px;text-align:right;
}
.svc-hub3-rows .stmetric .v{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1rem;font-weight:700;color:#16a34a;line-height:1.1;
}
.svc-hub3-rows .stmetric .k{
font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
color:#94a3b8;font-weight:700;margin-top:4px;
}
.svc-hub3-rows .starrow{
width:42px;height:42px;border-radius:50%;
background:#f1f5f9;color:#16a34a;
display:grid;place-items:center;
transition:background .25s,color .25s;
}
.svc-hub3-rows .starrow svg{width:16px;height:16px;transition:transform .25s}
.svc-hub3-rows .strow:hover .starrow{background:#22c55e;color:#062014}
.svc-hub3-rows .strow:hover .starrow svg{transform:translate(2px,-2px)}
[data-theme="dark"] .svc-hub3-rows .strow{background:#0f172a;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-hub3-rows .sttitle{color:#f8fafc}
[data-theme="dark"] .svc-hub3-rows .starrow{background:rgba(255,255,255,.05);color:#86efac}
[data-theme="dark"] .svc-hub3-rows .stmetric{border-left-color:rgba(255,255,255,.08)}
[data-theme="dark"] .svc-hub3-rows .stnum{color:#86efac}
/* --- Variant 5: TECH & DEVELOPMENT — code-editor cards ------------- */
.svc-hub3-codes{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.svc-hub3-codes .ccard{
position:relative;display:flex;flex-direction:column;
background:#0d1117;border:1px solid #1f2937;
border-radius:14px;overflow:hidden;text-decoration:none;
transition:transform .25s,border-color .25s,box-shadow .3s;
}
.svc-hub3-codes .ccard:hover{
transform:translateY(-4px);border-color:rgba(34,197,94,.5);
box-shadow:0 24px 50px rgba(0,0,0,.4),0 0 0 1px rgba(34,197,94,.25);
}
.svc-hub3-codes .ctop{
display:flex;align-items:center;gap:10px;
padding:11px 16px;background:#161b22;border-bottom:1px solid #1f2937;
}
.svc-hub3-codes .cdots{display:inline-flex;gap:6px;align-items:center}
.svc-hub3-codes .cdots i{width:11px;height:11px;border-radius:50%;background:#3a4250;display:inline-block}
.svc-hub3-codes .cdots i:nth-child(1){background:#ff5f57}
.svc-hub3-codes .cdots i:nth-child(2){background:#febc2e}
.svc-hub3-codes .cdots i:nth-child(3){background:#28c840}
.svc-hub3-codes .cfile{
font-family:'JetBrains Mono','SF Mono','Menlo',monospace;
font-size:.78rem;color:#9ca3af;letter-spacing:.02em;
}
.svc-hub3-codes .cfile .ext{color:#22c55e}
.svc-hub3-codes .cbody{
padding:18px 18px 16px;
display:flex;flex-direction:column;gap:8px;flex:1;
}
.svc-hub3-codes .ccomment{
font-family:'JetBrains Mono','SF Mono','Menlo',monospace;
font-size:.74rem;color:#6b7280;
}
.svc-hub3-codes .ccomment .kw{color:#22c55e}
.svc-hub3-codes .ccard h3{
margin:0;font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.12rem;font-weight:700;color:#f4f4f5;line-height:1.2;letter-spacing:-.01em;
}
.svc-hub3-codes .ccard p{margin:0;color:#9ca3af;font-size:.86rem;line-height:1.5}
.svc-hub3-codes .cbottom{
display:flex;align-items:center;justify-content:flex-end;gap:8px;
margin-top:auto;padding-top:14px;
border-top:1px dashed #1f2937;flex-wrap:wrap;
}
.svc-hub3-codes .ctags{display:inline-flex;gap:6px;flex-wrap:wrap}
.svc-hub3-codes .ctag{
font-family:'JetBrains Mono','SF Mono','Menlo',monospace;
font-size:.66rem;color:#86efac;
background:rgba(34,197,94,.1);
border:1px solid rgba(34,197,94,.18);
padding:2px 8px;border-radius:6px;
}
.svc-hub3-codes .crun{
font-family:'JetBrains Mono','SF Mono','Menlo',monospace;
font-size:.78rem;color:#22c55e;
display:inline-flex;align-items:center;gap:2px;
}
.svc-hub3-codes .ccard:hover .crun{color:#86efac}
.svc-hub3-codes .crun .blink{
display:inline-block;width:7px;height:13px;background:#22c55e;
animation:svc3Blink 1.1s steps(1) infinite;
vertical-align:middle;margin-left:3px;
}
@keyframes svc3Blink{50%{opacity:0}}
/* responsive — variants */
@media (max-width:1100px){
.svc-hub3-split{grid-template-columns:1fr;gap:18px}
.svc-hub3-split-feature{min-height:380px}
.svc-hub3-mosaic{grid-template-rows:repeat(5,170px)}
.svc-hub3-mosaic .m-big{grid-column:1/5;grid-row:1/3}
.svc-hub3-mosaic .m-sq{grid-column:1/3;grid-row:3/5}
.svc-hub3-mosaic .m-1{grid-column:3/4;grid-row:3/4}
.svc-hub3-mosaic .m-2{grid-column:4/5;grid-row:3/4}
.svc-hub3-mosaic .m-wide{grid-column:3/5;grid-row:4/5}
.svc-hub3-codes{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-hub3-rows .strow{grid-template-columns:60px 1fr auto auto;gap:16px;padding:18px 20px}
.svc-hub3-rows .stnum{font-size:1.7rem}
}
@media (max-width:780px){
.svc-hub3-list{gap:8px}
.svc-hub3-list .lrow{grid-template-columns:auto 1fr auto;padding:14px 16px;gap:12px}
.svc-hub3-list .ldesc{display:none}
.svc-hub3-mosaic{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}
.svc-hub3-mosaic .mcard{min-height:200px}
.svc-hub3-mosaic .m-big,.svc-hub3-mosaic .m-sq,.svc-hub3-mosaic .m-1,
.svc-hub3-mosaic .m-2,.svc-hub3-mosaic .m-wide{grid-column:auto;grid-row:auto}
.svc-hub3-mosaic .m-big{min-height:300px}
.svc-hub3-rows .strow{grid-template-columns:50px 1fr auto;gap:12px;padding:14px 16px}
.svc-hub3-rows .stmetric{display:none}
.svc-hub3-rows .stnum{font-size:1.4rem}
.svc-hub3-rows .sttitle{font-size:1rem}
.svc-hub3-rows .stdesc{font-size:.84rem}
.svc-hub3-codes{grid-template-columns:1fr;gap:14px}
}
/* ====================================================================
v3.1 — content-driven layouts. Each section's design follows the
user's mental model for that category.
==================================================================== */
/* Advertising — channel directory with platform logos ---------------- */
.svc-hub3-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc-hub3-channels .chfeatured{
grid-column:span 3;display:grid;grid-template-columns:1.1fr .9fr;
background:#0d1117;color:#fff;
border:1px solid #1f2937;border-radius:18px;overflow:hidden;
text-decoration:none;
transition:transform .25s,border-color .25s,box-shadow .25s;
}
.svc-hub3-channels .chfeatured:hover{
transform:translateY(-3px);border-color:rgba(34,197,94,.5);
box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px rgba(34,197,94,.2);
}
.svc-hub3-channels .chfleft{padding:42px;display:flex;flex-direction:column;justify-content:center}
.svc-hub3-channels .chflogos{display:flex;gap:10px;margin-bottom:22px}
.svc-hub3-channels .chflogos img{
width:44px;height:44px;background:rgba(255,255,255,.06);
padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
}
.svc-hub3-channels .chfeatured h3{
margin:0 0 14px;font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(1.7rem,2.4vw,2.4rem);
line-height:1.1;letter-spacing:-.025em;font-weight:700;color:#fff;max-width:480px;
}
.svc-hub3-channels .chfeatured p{
color:rgba(255,255,255,.74);font-size:.98rem;line-height:1.6;
margin:0 0 22px;max-width:480px;
}
.svc-hub3-channels .chformats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.svc-hub3-channels .chformats .ftag{
padding:5px 11px;border-radius:999px;
background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);
color:#86efac;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.7rem;font-weight:600;letter-spacing:.04em;
}
.svc-hub3-channels .chcta{display:inline-flex;align-items:center;gap:8px;color:#22c55e;font-weight:700;font-size:.92rem}
.svc-hub3-channels .chcta svg{width:16px;height:16px;transition:transform .25s}
.svc-hub3-channels .chfeatured:hover .chcta svg{transform:translate(2px,-2px)}
.svc-hub3-channels .chfright{
position:relative;display:grid;place-items:center;padding:32px;
background:
radial-gradient(500px circle at 70% 30%,rgba(34,197,94,.18),transparent 60%),
linear-gradient(135deg,#0a0e13 0%,#161b22 100%);
}
.svc-hub3-channels .chfmosaic{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
width:100%;max-width:340px;
}
.svc-hub3-channels .chfmosaic img{
width:100%;aspect-ratio:1;object-fit:contain;
background:rgba(255,255,255,.05);padding:18px;
border-radius:14px;border:1px solid rgba(255,255,255,.08);
transition:background .25s,border-color .25s;
}
.svc-hub3-channels .chfeatured:hover .chfmosaic img{
background:rgba(34,197,94,.05);border-color:rgba(34,197,94,.18);
}
.svc-hub3-channels .chcard{
display:flex;flex-direction:column;
padding:24px;background:#fff;
border:1px solid rgba(15,23,42,.08);border-radius:14px;
text-decoration:none;color:#07110d;
transition:transform .25s,border-color .25s,box-shadow .25s;
}
.svc-hub3-channels .chcard:hover{
transform:translateY(-4px);border-color:rgba(34,197,94,.4);
box-shadow:0 20px 40px rgba(15,23,42,.08);
}
.svc-hub3-channels .chcard .chtop{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.svc-hub3-channels .chcard .chlogo{
width:42px;height:42px;border-radius:10px;background:#f8fafc;padding:9px;
border:1px solid rgba(15,23,42,.06);
}
.svc-hub3-channels .chcard .chstack{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.66rem;color:#64748b;
letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
.svc-hub3-channels .chcard h3{
margin:0 0 8px;font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.16rem;font-weight:700;letter-spacing:-.015em;color:#07110d;
}
.svc-hub3-channels .chcard p{margin:0 0 14px;color:#64748b;font-size:.9rem;line-height:1.55}
.svc-hub3-channels .chcard .chformats-mini{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.svc-hub3-channels .chcard .chformats-mini span{
padding:3px 8px;border-radius:6px;background:#f1f5f9;color:#475569;
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.66rem;font-weight:600;
}
.svc-hub3-channels .chcard .chbottom{
margin-top:auto;display:flex;align-items:center;justify-content:space-between;
padding-top:14px;border-top:1px dashed rgba(15,23,42,.1);
}
.svc-hub3-channels .chcard .chmeta{font-size:.78rem;color:#16a34a;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.svc-hub3-channels .chcard .charrow{
display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:#f1f5f9;color:#16a34a;
transition:background .25s,color .25s;
}
.svc-hub3-channels .chcard .charrow svg{width:13px;height:13px;transition:transform .25s}
.svc-hub3-channels .chcard:hover .charrow{background:#22c55e;color:#062014}
.svc-hub3-channels .chcard:hover .charrow svg{transform:translate(2px,-2px)}
[data-theme="dark"] .svc-hub3-channels .chcard{background:#0f172a;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-hub3-channels .chcard h3{color:#f8fafc}
[data-theme="dark"] .svc-hub3-channels .chcard .chlogo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .svc-hub3-channels .chcard .chformats-mini span{background:rgba(255,255,255,.06);color:#cbd5e1}
[data-theme="dark"] .svc-hub3-channels .chcard .charrow{background:rgba(255,255,255,.06);color:#86efac}
/* Design & Content — editorial alternating spreads ------------------- */
.svc-hub3-editorial{display:flex;flex-direction:column;gap:18px}
.svc-hub3-editorial .eds{
display:grid;grid-template-columns:1fr 1.1fr;gap:36px;
padding:36px;background:#fff;
border:1px solid rgba(15,23,42,.08);border-radius:20px;
text-decoration:none;color:#07110d;
align-items:center;overflow:hidden;
transition:border-color .25s,box-shadow .25s;
}
.svc-hub3-editorial .eds:hover{
border-color:rgba(34,197,94,.4);box-shadow:0 20px 40px rgba(15,23,42,.08);
}
.svc-hub3-editorial .eds:nth-child(even){grid-template-columns:1.1fr 1fr}
.svc-hub3-editorial .eds:nth-child(even) .edcontent{order:2}
.svc-hub3-editorial .eds:nth-child(even) .edmedia{order:1}
.svc-hub3-editorial .edmeta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.svc-hub3-editorial .edno{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:.84rem;color:#94a3b8;font-weight:700;
letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.svc-hub3-editorial .edcat{
font-size:.66rem;color:#16a34a;letter-spacing:.14em;text-transform:uppercase;
font-weight:800;padding:4px 10px;background:#dcfce7;border-radius:999px;
}
.svc-hub3-editorial h3{
margin:0 0 14px;font-family:'Space Grotesk',Inter,sans-serif;
font-size:clamp(1.6rem,2.6vw,2.5rem);
line-height:1.05;font-weight:700;letter-spacing:-.03em;color:#07110d;
}
.svc-hub3-editorial h3 em{font-style:italic;font-weight:500;color:#16a34a}
.svc-hub3-editorial p{
margin:0 0 22px;color:#475569;font-size:1rem;line-height:1.65;max-width:460px;
}
.svc-hub3-editorial .edlabel{
display:block;
font-size:.66rem;color:#94a3b8;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;margin-bottom:10px;
}
.svc-hub3-editorial .eddeliv{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.svc-hub3-editorial .eddeliv span{
padding:5px 11px;border-radius:8px;
background:#f1f5f9;color:#475569;font-size:.78rem;font-weight:600;
}
.svc-hub3-editorial .edcta{
display:inline-flex;align-items:center;gap:8px;
color:#16a34a;font-weight:700;font-size:.9rem;
}
.svc-hub3-editorial .edcta svg{width:14px;height:14px;transition:transform .25s}
.svc-hub3-editorial .eds:hover .edcta svg{transform:translate(2px,-2px)}
.svc-hub3-editorial .edmedia{
position:relative;border-radius:14px;overflow:hidden;
aspect-ratio:5/4;background:#0f172a;
}
.svc-hub3-editorial .edmedia img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s ease;
}
.svc-hub3-editorial .eds:hover .edmedia img{transform:scale(1.04)}
[data-theme="dark"] .svc-hub3-editorial .eds{background:#0f172a;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-hub3-editorial h3{color:#f8fafc}
[data-theme="dark"] .svc-hub3-editorial p{color:#94a3b8}
[data-theme="dark"] .svc-hub3-editorial .eddeliv span{background:rgba(255,255,255,.06);color:#cbd5e1}
[data-theme="dark"] .svc-hub3-editorial .edcat{background:rgba(34,197,94,.12);color:#86efac}
/* Strategy & Data — dashboard tiles with sparklines ------------------ */
.svc-hub3-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc-hub3-tiles .dtile{
position:relative;display:flex;flex-direction:column;
padding:22px;background:#fff;
border:1px solid rgba(15,23,42,.08);border-radius:14px;
text-decoration:none;color:#07110d;overflow:hidden;
transition:transform .25s,border-color .25s,box-shadow .25s;
min-height:280px;
}
.svc-hub3-tiles .dtile:hover{
transform:translateY(-4px);border-color:rgba(34,197,94,.4);
box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.svc-hub3-tiles .dtile .dthead{
display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.svc-hub3-tiles .dtile .dtcat{
font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:#16a34a;font-weight:800;
display:inline-flex;align-items:center;gap:6px;
}
.svc-hub3-tiles .dtile .dtcat:before{
content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#22c55e;
}
.svc-hub3-tiles .dtile .dtnum{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:.68rem;color:#cbd5e1;font-weight:700;font-variant-numeric:tabular-nums;
}
.svc-hub3-tiles .dtile h3{
margin:0 0 6px;font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.05rem;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:#07110d;
}
.svc-hub3-tiles .dtile p{margin:0;color:#64748b;font-size:.84rem;line-height:1.5}
.svc-hub3-tiles .dtile .dtchart{
margin:14px -22px 0;height:62px;position:relative;overflow:hidden;
}
.svc-hub3-tiles .dtile .dtchart svg{display:block;width:100%;height:100%}
.svc-hub3-tiles .dtile .dtchart .l{stroke:#22c55e;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc-hub3-tiles .dtile .dtchart .f{fill:url(#dtgrad)}
.svc-hub3-tiles .dtile .dtchart .b{fill:#22c55e;opacity:.85}
.svc-hub3-tiles .dtile .dtfoot{
margin-top:auto;display:flex;align-items:center;justify-content:space-between;
padding-top:14px;border-top:1px dashed rgba(15,23,42,.1);
}
.svc-hub3-tiles .dtile .dtkpi{display:flex;flex-direction:column;gap:2px}
.svc-hub3-tiles .dtile .dtkpi .v{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:.92rem;color:#16a34a;font-weight:700;line-height:1;
}
.svc-hub3-tiles .dtile .dtkpi .k{
font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
color:#94a3b8;font-weight:700;margin-top:4px;
}
.svc-hub3-tiles .dtile .dtarrow{
display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:#f1f5f9;color:#16a34a;
transition:background .25s,color .25s;
}
.svc-hub3-tiles .dtile .dtarrow svg{width:13px;height:13px;transition:transform .25s}
.svc-hub3-tiles .dtile:hover .dtarrow{background:#22c55e;color:#062014}
.svc-hub3-tiles .dtile:hover .dtarrow svg{transform:translate(2px,-2px)}
.svc-hub3-tiles .dtile.is-feature{
grid-column:span 2;
background:linear-gradient(135deg,#0d1117 0%,#0f2a1c 100%);
color:#fff;border-color:rgba(34,197,94,.3);padding:30px;min-height:320px;
}
.svc-hub3-tiles .dtile.is-feature h3{color:#fff;font-size:1.45rem;max-width:340px}
.svc-hub3-tiles .dtile.is-feature p{color:rgba(255,255,255,.74);max-width:380px}
.svc-hub3-tiles .dtile.is-feature .dtcat{color:#86efac}
.svc-hub3-tiles .dtile.is-feature .dtcat:before{background:#86efac}
.svc-hub3-tiles .dtile.is-feature .dtnum{color:rgba(255,255,255,.4)}
.svc-hub3-tiles .dtile.is-feature .dtchart{margin:14px -30px 0;height:90px}
.svc-hub3-tiles .dtile.is-feature .dtfoot{border-top-color:rgba(255,255,255,.1)}
.svc-hub3-tiles .dtile.is-feature .dtkpi .v{color:#86efac;font-size:1.05rem}
.svc-hub3-tiles .dtile.is-feature .dtkpi .k{color:rgba(255,255,255,.5)}
.svc-hub3-tiles .dtile.is-feature .dtarrow{background:rgba(34,197,94,.2);color:#86efac;width:36px;height:36px}
.svc-hub3-tiles .dtile.is-feature:hover .dtarrow{background:#22c55e;color:#062014}
[data-theme="dark"] .svc-hub3-tiles .dtile{background:#0f172a;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-hub3-tiles .dtile h3{color:#f8fafc}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtarrow{background:rgba(255,255,255,.06);color:#86efac}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtfoot{border-top-color:rgba(255,255,255,.08)}
/* Tech codes — DELIVERS line ---------------------------------------- */
.svc-hub3-codes .ccard .cdelivers{
display:flex;align-items:flex-start;gap:8px;
padding:8px 0 4px;color:#a1a1aa;font-size:.78rem;line-height:1.45;
}
.svc-hub3-codes .ccard .cdelivers strong{
color:#22c55e;font-weight:700;letter-spacing:.06em;font-size:.66rem;
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
text-transform:uppercase;flex-shrink:0;padding-top:2px;
}
.svc-hub3-codes .ccard .cstack{
display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;
}
.svc-hub3-codes .ccard .cstack .ctag{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.66rem;color:#86efac;
background:rgba(34,197,94,.1);
border:1px solid rgba(34,197,94,.18);
padding:2px 8px;border-radius:6px;
}
/* responsive — content variants */
@media (max-width:1100px){
.svc-hub3-channels{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-hub3-channels .chfeatured{grid-column:span 2}
.svc-hub3-channels .chfright{display:none}
.svc-hub3-editorial .eds,
.svc-hub3-editorial .eds:nth-child(even){grid-template-columns:1fr;gap:24px}
.svc-hub3-editorial .eds:nth-child(even) .edcontent{order:2}
.svc-hub3-editorial .eds:nth-child(even) .edmedia{order:1}
.svc-hub3-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-hub3-tiles .dtile.is-feature{grid-column:span 2}
}
@media (max-width:780px){
.svc-hub3-channels{grid-template-columns:1fr}
.svc-hub3-channels .chfeatured{grid-column:auto}
.svc-hub3-channels .chfleft{padding:28px}
.svc-hub3-editorial .eds{padding:24px}
.svc-hub3-tiles{grid-template-columns:1fr}
.svc-hub3-tiles .dtile.is-feature{grid-column:auto;min-height:280px}
}
/* ====================================================================
v3.2 — readability + accessibility pass
Bigger labels, stronger contrast, focus rings on every card.
==================================================================== */
/* bump tiny labels to readable sizes */
.svc-hub3-channels .chcard .chstack{font-size:.72rem;color:#475569}
.svc-hub3-channels .chcard .chformats-mini span{font-size:.7rem;padding:3px 9px}
.svc-hub3-channels .chcard p{color:#475569;font-size:.94rem;line-height:1.6}
.svc-hub3-channels .chcard h3{font-size:1.22rem;margin-bottom:10px}
.svc-hub3-channels .chcard .chmeta{font-size:.74rem}
.svc-hub3-tiles .dtile h3{font-size:1.12rem;line-height:1.25;margin-bottom:8px}
.svc-hub3-tiles .dtile p{color:#475569;font-size:.9rem;line-height:1.55}
.svc-hub3-tiles .dtile .dtcat{font-size:.72rem}
.svc-hub3-tiles .dtile .dtnum{font-size:.74rem;color:#94a3b8}
.svc-hub3-tiles .dtile .dtkpi .v{font-size:1rem}
.svc-hub3-tiles .dtile .dtkpi .k{font-size:.7rem;color:#64748b}
.svc-hub3-tiles .dtile.is-feature h3{font-size:1.55rem;line-height:1.15}
.svc-hub3-tiles .dtile.is-feature p{font-size:.98rem;color:rgba(255,255,255,.82)}
.svc-hub3-codes .ccard h3{font-size:1.18rem;margin-bottom:6px}
.svc-hub3-codes .ccard p{color:#cbd5e1;font-size:.9rem;line-height:1.55}
.svc-hub3-codes .ccard .ccomment{font-size:.78rem}
.svc-hub3-codes .ccard .cdelivers{color:#cbd5e1;font-size:.84rem;line-height:1.5}
.svc-hub3-codes .ccard .cdelivers strong{font-size:.7rem}
.svc-hub3-codes .ccard .cstack .ctag,
.svc-hub3-codes .ccard .ctag{font-size:.72rem;padding:3px 9px}
.svc-hub3-editorial .eds h3{font-size:clamp(1.55rem,2.5vw,2.3rem);line-height:1.1;margin-bottom:16px}
.svc-hub3-editorial .eds p{font-size:1.02rem;line-height:1.7;color:#374151}
.svc-hub3-editorial .edcat{font-size:.72rem}
.svc-hub3-editorial .edno{font-size:.88rem}
.svc-hub3-editorial .edlabel{font-size:.72rem;color:#64748b}
.svc-hub3-editorial .eddeliv span{font-size:.82rem;padding:6px 12px;color:#374151}
.svc-hub3-editorial .edcta{font-size:.94rem}
/* keyboard focus — visible on every interactive card */
.svc-hub3-card:focus-visible,
.svc-hub3-channels .chcard:focus-visible,
.svc-hub3-channels .chfeatured:focus-visible,
.svc-hub3-editorial .eds:focus-visible,
.svc-hub3-tiles .dtile:focus-visible,
.svc-hub3-codes .ccard:focus-visible,
.svc-hub3-tab:focus-visible,
.svc-hub3-actions a:focus-visible,
.svc-hub3-cta a:focus-visible{
outline:3px solid #22c55e;
outline-offset:3px;
border-radius:14px;
}
.svc-hub3-card:focus-visible{outline-offset:4px}
.svc-hub3-tab:focus-visible{outline-offset:1px;border-radius:10px}
/* hover signal on group titles for sighted scanners */
.svc-hub3-grouphead h2 em{color:#22c55e;font-weight:600}
/* image cards: ensure body padding lifts text away from the dark band edge */
.svc-hub3-card-content{padding:48px 22px 22px}
.svc-hub3-card.is-featured .svc-hub3-card-content{padding:60px 30px 30px}
/* skip-to-content support: ensure landmarks remain crawlable when sticky */
@media (prefers-reduced-motion:reduce){
.svc-float-1,.svc-float-2,.svc-float-3,
.svc-hub3-marquee-track,.svc-hub3-card .img,
.svc-hub3-codes .crun .blink,.svc-hub3-badge .dot,
.svc-hub3-editorial .edmedia img,
.svc-hub3-channels .chfmosaic img{
animation:none !important;transition:none !important;
}
}
/* ====================================================================
v3.3 — Strategy & Tech REDESIGN.
Drops sparklines/traffic-lights; puts content readability first.
These rules override prior .svc-hub3-tiles / .svc-hub3-codes by
source order.
==================================================================== */
/* Strategy & Data — clean framework grid (3-col) -------------------- */
.svc-hub3-tiles{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.svc-hub3-tiles .dtile{
display:flex;flex-direction:column;
padding:28px;background:#fff;
border:1px solid rgba(15,23,42,.08);border-radius:16px;
text-decoration:none;color:#07110d;
transition:transform .25s,border-color .25s,box-shadow .25s;
min-height:320px;
}
.svc-hub3-tiles .dtile:hover{
transform:translateY(-4px);
border-color:rgba(34,197,94,.4);
box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.svc-hub3-tiles .dtile .dthead{
display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.svc-hub3-tiles .dtile .dtnum{
display:inline-grid;place-items:center;
width:38px;height:38px;border-radius:10px;
background:#dcfce7;color:#16a34a;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:.96rem;font-weight:800;letter-spacing:-.01em;
}
.svc-hub3-tiles .dtile .dtcat{
font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
color:#16a34a;font-weight:700;
}
.svc-hub3-tiles .dtile h3{
margin:0 0 10px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.34rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;
color:#07110d;
}
.svc-hub3-tiles .dtile p{
margin:0;color:#475569;font-size:.96rem;line-height:1.6;
}
.svc-hub3-tiles .dtile .dtchart{display:none}
.svc-hub3-tiles .dtile .dtfoot,
.svc-hub3-tiles .dtile .dtkpi{display:none}
.svc-hub3-tiles .dtile .dtsection{
margin-top:auto;padding-top:22px;
border-top:1px dashed rgba(15,23,42,.12);
}
.svc-hub3-tiles .dtile .dtlabel{
display:block;
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:#94a3b8;font-weight:700;margin-bottom:12px;
}
.svc-hub3-tiles .dtile .dttags{
display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;
}
.svc-hub3-tiles .dtile .dttags span{
padding:5px 11px;border-radius:8px;
background:#f1f5f9;color:#334155;
font-size:.82rem;font-weight:600;
border:1px solid rgba(15,23,42,.04);
}
.svc-hub3-tiles .dtile .dtcta{
display:inline-flex;align-items:center;gap:8px;
color:#16a34a;font-weight:700;font-size:.94rem;
}
.svc-hub3-tiles .dtile .dtcta svg{width:16px;height:16px;transition:transform .25s}
.svc-hub3-tiles .dtile:hover .dtcta svg{transform:translate(3px,-2px)}
.svc-hub3-tiles .dtile .dtarrow{display:none}
/* featured spans 2 cols with green gradient */
.svc-hub3-tiles .dtile.is-feature{
grid-column:span 2;
background:linear-gradient(135deg,#062e1a 0%,#0a3a22 100%);
color:#fff;border-color:rgba(34,197,94,.3);
padding:36px;position:relative;overflow:hidden;
}
.svc-hub3-tiles .dtile.is-feature:before{
content:"";position:absolute;
top:-120px;right:-120px;width:340px;height:340px;border-radius:50%;
background:radial-gradient(closest-side,rgba(34,197,94,.22),rgba(34,197,94,0) 70%);
pointer-events:none;
}
.svc-hub3-tiles .dtile.is-feature > *{position:relative;z-index:1}
.svc-hub3-tiles .dtile.is-feature .dtnum{
background:rgba(34,197,94,.18);color:#bbf7d0;
}
.svc-hub3-tiles .dtile.is-feature .dtcat{color:#86efac}
.svc-hub3-tiles .dtile.is-feature h3{
color:#fff;font-size:1.75rem;max-width:520px;
}
.svc-hub3-tiles .dtile.is-feature p{
color:rgba(255,255,255,.86);font-size:1.04rem;max-width:560px;
}
.svc-hub3-tiles .dtile.is-feature .dtsection{
border-top-color:rgba(255,255,255,.14);
}
.svc-hub3-tiles .dtile.is-feature .dtlabel{color:rgba(255,255,255,.6)}
.svc-hub3-tiles .dtile.is-feature .dttags span{
background:rgba(34,197,94,.14);color:#bbf7d0;
border:1px solid rgba(34,197,94,.3);
}
.svc-hub3-tiles .dtile.is-feature .dtcta{color:#22c55e}
[data-theme="dark"] .svc-hub3-tiles .dtile{background:#0f172a;border-color:#1e293b;color:#f8fafc}
[data-theme="dark"] .svc-hub3-tiles .dtile h3{color:#f8fafc}
[data-theme="dark"] .svc-hub3-tiles .dtile p{color:#cbd5e1}
[data-theme="dark"] .svc-hub3-tiles .dtile .dttags span{background:rgba(255,255,255,.06);color:#cbd5e1;border-color:rgba(255,255,255,.04)}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtsection{border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtnum{background:rgba(34,197,94,.12);color:#86efac}
/* Tech & Development — clean spec cards (2-col) --------------------- */
.svc-hub3-codes{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.svc-hub3-codes .ccard{
position:relative;display:flex;flex-direction:column;
background:#0d1117;border:1px solid #1f2937;
border-radius:16px;overflow:hidden;
text-decoration:none;
transition:transform .25s,border-color .25s,box-shadow .3s;
}
.svc-hub3-codes .ccard:hover{
transform:translateY(-4px);
border-color:rgba(34,197,94,.5);
box-shadow:0 24px 50px rgba(0,0,0,.4),0 0 0 1px rgba(34,197,94,.25);
}
.svc-hub3-codes .ctop{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 26px;
background:rgba(255,255,255,.02);
border-bottom:1px solid rgba(255,255,255,.06);
}
.svc-hub3-codes .ctop .cdots{display:none}
.svc-hub3-codes .cfile{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.84rem;color:#9ca3af;font-weight:500;
display:inline-flex;align-items:center;gap:9px;
}
.svc-hub3-codes .cfile:before{
content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:#22c55e;
}
.svc-hub3-codes .cfile .ext{color:#22c55e;font-weight:700}
.svc-hub3-codes .ccomment{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.78rem;color:#6b7280;font-style:italic;
}
.svc-hub3-codes .cbody{
padding:26px 26px 6px;
display:flex;flex-direction:column;flex:1;
}
.svc-hub3-codes .ccard h3{
margin:0 0 12px;
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1.5rem;font-weight:700;color:#f4f4f5;
line-height:1.18;letter-spacing:-.015em;
}
.svc-hub3-codes .cbody > p{
margin:0 0 4px;color:#cbd5e1;font-size:.96rem;line-height:1.6;
}
.svc-hub3-codes .cspec{
display:grid;grid-template-columns:auto 1fr;
gap:14px 20px;align-items:start;
padding:22px 0 6px;margin-top:24px;
border-top:1px dashed rgba(255,255,255,.08);
}
.svc-hub3-codes .cspec .clabel{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.74rem;color:#22c55e;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
padding-top:3px;white-space:nowrap;
}
.svc-hub3-codes .cspec .cvalue{
color:#e5e7eb;font-size:.94rem;line-height:1.6;
}
.svc-hub3-codes .cstack,
.svc-hub3-codes .cdelivers{display:none}
.svc-hub3-codes .cbottom{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:auto;padding:18px 26px;
background:rgba(34,197,94,.05);
border-top:1px solid rgba(34,197,94,.12);
}
.svc-hub3-codes .crun{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.88rem;color:#22c55e;font-weight:600;
display:inline-flex;align-items:center;gap:4px;
}
.svc-hub3-codes .crun .blink{
display:inline-block;width:7px;height:13px;background:#22c55e;
animation:svc3Blink 1.1s steps(1) infinite;
vertical-align:middle;margin-left:3px;
}
.svc-hub3-codes .carrow{
display:grid;place-items:center;
width:36px;height:36px;border-radius:50%;
background:rgba(34,197,94,.16);color:#22c55e;
transition:background .25s,color .25s;
}
.svc-hub3-codes .carrow svg{width:16px;height:16px;transition:transform .25s}
.svc-hub3-codes .ccard:hover .carrow{background:#22c55e;color:#062014}
.svc-hub3-codes .ccard:hover .carrow svg{transform:translate(2px,-2px)}
/* responsive */
@media (max-width:1100px){
.svc-hub3-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-hub3-tiles .dtile.is-feature{grid-column:span 2}
.svc-hub3-codes{grid-template-columns:1fr}
}
@media (max-width:780px){
.svc-hub3-tiles{grid-template-columns:1fr}
.svc-hub3-tiles .dtile.is-feature{grid-column:auto;padding:26px}
.svc-hub3-tiles .dtile{padding:22px;min-height:0}
.svc-hub3-codes .ctop{padding:14px 18px}
.svc-hub3-codes .cbody{padding:20px 18px 6px}
.svc-hub3-codes .cbottom{padding:14px 18px}
.svc-hub3-codes .cspec{grid-template-columns:1fr;gap:6px 0}
.svc-hub3-codes .cspec .clabel{padding-top:0;margin-bottom:2px}
.svc-hub3-codes .ccard h3{font-size:1.3rem}
}
/* ====================================================================
v3.4 — Tech cards: LIGHT in light theme, DARK in dark theme.
Adds .clogos row for real platform/tech brand logos.
==================================================================== */
.svc-hub3-codes .ccard{
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
}
.svc-hub3-codes .ccard:hover{
border-color:rgba(34,197,94,.4);
box-shadow:0 24px 50px rgba(15,23,42,.1),0 0 0 1px rgba(34,197,94,.18);
}
.svc-hub3-codes .ctop{
background:#f8fafc;
border-bottom:1px solid rgba(15,23,42,.06);
}
.svc-hub3-codes .cfile{color:#475569}
.svc-hub3-codes .cfile:before{background:#16a34a}
.svc-hub3-codes .cfile .ext{color:#16a34a}
.svc-hub3-codes .ccomment{color:#94a3b8}
.svc-hub3-codes .ccard h3{color:#07110d}
.svc-hub3-codes .cbody > p{color:#475569}
.svc-hub3-codes .cspec{border-top:1px dashed rgba(15,23,42,.1)}
.svc-hub3-codes .cspec .clabel{color:#16a34a}
.svc-hub3-codes .cspec .cvalue{color:#334155}
.svc-hub3-codes .cbottom{
background:rgba(34,197,94,.06);
border-top:1px solid rgba(34,197,94,.18);
}
.svc-hub3-codes .crun{color:#16a34a}
.svc-hub3-codes .crun .blink{background:#16a34a}
.svc-hub3-codes .carrow{background:rgba(34,197,94,.14);color:#16a34a}
.svc-hub3-codes .ccard:hover .carrow{background:#22c55e;color:#062014}
/* logo row */
.svc-hub3-codes .clogos{
display:flex;flex-wrap:wrap;gap:9px;align-items:center;
margin-top:2px;
}
.svc-hub3-codes .clogos > span{
display:inline-grid;place-items:center;
width:38px;height:38px;
padding:7px;border-radius:9px;
background:#f1f5f9;
border:1px solid rgba(15,23,42,.06);
transition:transform .2s ease,background .2s,border-color .2s;
cursor:default;
}
.svc-hub3-codes .clogos > span img{
width:100%;height:100%;object-fit:contain;display:block;
}
.svc-hub3-codes .ccard:hover .clogos > span{
background:#f7fee7;border-color:rgba(34,197,94,.2);
}
/* DARK theme — bring back dark cards (slightly darker than v3.3) */
[data-theme="dark"] .svc-hub3-codes .ccard{
background:#06090d;border-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .svc-hub3-codes .ccard:hover{
border-color:rgba(34,197,94,.5);
box-shadow:0 24px 50px rgba(0,0,0,.5),0 0 0 1px rgba(34,197,94,.25);
}
[data-theme="dark"] .svc-hub3-codes .ctop{
background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.06);
}
[data-theme="dark"] .svc-hub3-codes .cfile{color:#9ca3af}
[data-theme="dark"] .svc-hub3-codes .cfile:before{background:#22c55e}
[data-theme="dark"] .svc-hub3-codes .cfile .ext{color:#22c55e}
[data-theme="dark"] .svc-hub3-codes .ccomment{color:#6b7280}
[data-theme="dark"] .svc-hub3-codes .ccard h3{color:#f4f4f5}
[data-theme="dark"] .svc-hub3-codes .cbody > p{color:#cbd5e1}
[data-theme="dark"] .svc-hub3-codes .cspec{border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .svc-hub3-codes .cspec .clabel{color:#22c55e}
[data-theme="dark"] .svc-hub3-codes .cspec .cvalue{color:#e5e7eb}
[data-theme="dark"] .svc-hub3-codes .cbottom{
background:rgba(34,197,94,.05);
border-top:1px solid rgba(34,197,94,.12);
}
[data-theme="dark"] .svc-hub3-codes .crun{color:#22c55e}
[data-theme="dark"] .svc-hub3-codes .crun .blink{background:#22c55e}
[data-theme="dark"] .svc-hub3-codes .carrow{background:rgba(34,197,94,.16);color:#22c55e}
[data-theme="dark"] .svc-hub3-codes .clogos > span{
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .svc-hub3-codes .ccard:hover .clogos > span{
background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);
}
/* ====================================================================
v3.5 — Strategy & Data: visual band at top of each tile.
Logos for tool-driven services, inline SVG illustrations for the
conceptual ones (Revenue, CMO, Real Estate).
==================================================================== */
.svc-hub3-tiles .dtile .dtvisual{
display:flex;align-items:center;justify-content:flex-start;
gap:14px;flex-wrap:wrap;
margin:-28px -28px 24px;
padding:22px 28px;
background:linear-gradient(135deg,#f7fee7 0%,#f7fee7 100%);
border-bottom:1px solid rgba(15,23,42,.06);
min-height:96px;
}
.svc-hub3-tiles .dtile .dtvisual-logos{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.svc-hub3-tiles .dtile .dtvisual-logos span{
display:inline-grid;place-items:center;
width:40px;height:40px;padding:8px;border-radius:10px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 2px 6px rgba(15,23,42,.04);
transition:transform .25s,background .2s,border-color .2s;
}
.svc-hub3-tiles .dtile .dtvisual-logos span img{
width:100%;height:100%;object-fit:contain;display:block;
}
.svc-hub3-tiles .dtile:hover .dtvisual-logos span{
background:#f7fee7;border-color:rgba(34,197,94,.22);
}
.svc-hub3-tiles .dtile .dtvisual-illu{
flex:1;height:64px;color:#16a34a;
min-width:140px;
}
.svc-hub3-tiles .dtile .dtvisual-illu svg{display:block;width:100%;height:100%}
/* featured tile gets a richer visual band */
.svc-hub3-tiles .dtile.is-feature .dtvisual{
margin:-36px -36px 28px;
padding:28px 36px;
background:linear-gradient(135deg,rgba(34,197,94,.18) 0%,rgba(34,197,94,.06) 100%);
border-bottom:1px solid rgba(255,255,255,.08);
min-height:120px;
justify-content:space-between;
}
.svc-hub3-tiles .dtile.is-feature .dtvisual-logos span{
width:46px;height:46px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.svc-hub3-tiles .dtile.is-feature .dtvisual-illu{
color:#86efac;height:84px;flex:0 0 auto;width:200px;
}
.svc-hub3-tiles .dtile.is-feature:hover .dtvisual-logos span{
background:rgba(255,255,255,.16);border-color:rgba(34,197,94,.4);
}
/* dark theme */
[data-theme="dark"] .svc-hub3-tiles .dtile .dtvisual{
background:linear-gradient(135deg,rgba(34,197,94,.1) 0%,rgba(34,197,94,.03) 100%);
border-bottom-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtvisual-logos span{
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .svc-hub3-tiles .dtile:hover .dtvisual-logos span{
background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);
}
/* mobile — keep visual band compact */
@media (max-width:780px){
.svc-hub3-tiles .dtile .dtvisual{
margin:-22px -22px 18px;padding:18px 22px;min-height:80px;
}
.svc-hub3-tiles .dtile .dtvisual-logos span{width:36px;height:36px;padding:7px}
.svc-hub3-tiles .dtile.is-feature .dtvisual{
margin:-26px -26px 22px;padding:22px 26px;min-height:96px;
}
.svc-hub3-tiles .dtile.is-feature .dtvisual-illu{display:none}
}
/* ====================================================================
v3.6 — single-logo design anchor per Strategy tile.
One prominent mark + a short label (tool name or concept).
Replaces the v3.5 multi-logo row layout.
==================================================================== */
.svc-hub3-tiles .dtile .dtvisual{
display:flex;align-items:center;gap:16px;
margin:-28px -28px 24px;
padding:24px 28px;
background:linear-gradient(135deg,#f7fee7 0%,#f7fee7 100%);
border-bottom:1px solid rgba(15,23,42,.06);
min-height:0;
flex-wrap:nowrap;
}
.svc-hub3-tiles .dtile .dtvisual-mark{
flex-shrink:0;
width:64px;height:64px;
display:grid;place-items:center;
padding:14px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
box-shadow:0 4px 14px rgba(15,23,42,.06);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-hub3-tiles .dtile:hover .dtvisual-mark{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(15,23,42,.1);
border-color:rgba(34,197,94,.3);
}
.svc-hub3-tiles .dtile .dtvisual-mark img,
.svc-hub3-tiles .dtile .dtvisual-mark svg{
width:100%;height:100%;object-fit:contain;display:block;
}
.svc-hub3-tiles .dtile .dtvisual-mark svg{color:#16a34a}
.svc-hub3-tiles .dtile .dtvisual-meta{
display:flex;flex-direction:column;gap:4px;min-width:0;
}
.svc-hub3-tiles .dtile .dtvisual-tag{
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
color:#16a34a;font-weight:700;
}
.svc-hub3-tiles .dtile .dtvisual-name{
font-family:'Space Grotesk',Inter,sans-serif;
font-size:1rem;font-weight:700;color:#07110d;letter-spacing:-.01em;
line-height:1.15;
}
.svc-hub3-tiles .dtile .dtvisual-sub{
font-size:.78rem;color:#64748b;line-height:1.4;margin-top:2px;
}
/* hide v3.5 multi-logo layout in this redesign */
.svc-hub3-tiles .dtile .dtvisual-logos,
.svc-hub3-tiles .dtile .dtvisual-illu{display:none}
/* featured tile gets a bigger mark + dark glassy band */
.svc-hub3-tiles .dtile.is-feature .dtvisual{
margin:-36px -36px 28px;
padding:30px 36px;
background:linear-gradient(135deg,rgba(34,197,94,.18) 0%,rgba(34,197,94,.06) 100%);
border-bottom:1px solid rgba(255,255,255,.08);
gap:20px;
}
.svc-hub3-tiles .dtile.is-feature .dtvisual-mark{
width:84px;height:84px;padding:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.svc-hub3-tiles .dtile.is-feature .dtvisual-mark svg{color:#86efac}
.svc-hub3-tiles .dtile.is-feature .dtvisual-tag{color:#86efac}
.svc-hub3-tiles .dtile.is-feature .dtvisual-name{color:#ffffff;font-size:1.18rem}
.svc-hub3-tiles .dtile.is-feature .dtvisual-sub{color:rgba(255,255,255,.7)}
/* dark theme */
[data-theme="dark"] .svc-hub3-tiles .dtile .dtvisual{
background:linear-gradient(135deg,rgba(34,197,94,.1) 0%,rgba(34,197,94,.03) 100%);
border-bottom-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtvisual-mark{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtvisual-name{color:#f8fafc}
[data-theme="dark"] .svc-hub3-tiles .dtile .dtvisual-sub{color:#94a3b8}
@media (max-width:780px){
.svc-hub3-tiles .dtile .dtvisual{
margin:-22px -22px 18px;padding:18px 22px;gap:14px;
}
.svc-hub3-tiles .dtile .dtvisual-mark{width:54px;height:54px;padding:12px}
.svc-hub3-tiles .dtile.is-feature .dtvisual{
margin:-26px -26px 22px;padding:22px 26px;
}
.svc-hub3-tiles .dtile.is-feature .dtvisual-mark{width:64px;height:64px;padding:14px}
}
/* ====================================================================
v3.8 — Marketing bento: aurora gradient cards.
Drops photo backgrounds in favour of per-card mesh gradients +
glassmorphic icon chip + bold white typography. Modern Linear/
Vercel/Stripe pattern.
==================================================================== */
/* hide the old photo background span */
.svc-hub3-grid .svc-hub3-card .img{display:none}
/* card itself becomes the gradient surface */
.svc-hub3-grid .svc-hub3-card{
background:var(--card-bg, linear-gradient(135deg,#16a34a 0%,#022c22 100%));
border:1px solid rgba(255,255,255,.08);
isolation:isolate;
}
/* mesh gradient overlay (two soft radial blobs) */
.svc-hub3-grid .svc-hub3-card:before{
content:"";display:block;
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(circle at 18% 8%,var(--mesh-1,rgba(255,255,255,.18)),transparent 48%),
radial-gradient(circle at 88% 92%,var(--mesh-2,rgba(0,0,0,.32)),transparent 52%);
opacity:1;transition:opacity .35s ease;
}
.svc-hub3-grid .svc-hub3-card:hover:before{opacity:1.15}
/* subtle dot grid texture */
.svc-hub3-grid .svc-hub3-card:after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
background-size:8px 8px;
border-radius:inherit;
border:1px solid rgba(255,255,255,.06);
transition:border-color .3s,box-shadow .3s;
}
.svc-hub3-grid .svc-hub3-card:hover:after{
border-color:rgba(255,255,255,.22);
box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.25);
}
/* glassmorphic icon chip — top-left */
.svc-hub3-grid .svc-hub3-card .icon-bloom{
position:absolute;top:22px;left:22px;z-index:2;
width:52px;height:52px;border-radius:14px;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(20px) saturate(140%);
backdrop-filter:blur(20px) saturate(140%);
display:grid;place-items:center;color:#fff;
transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .35s,border-color .35s;
}
.svc-hub3-grid .svc-hub3-card:hover .icon-bloom{
transform:translateY(-3px) scale(1.06);
background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.35);
}
.svc-hub3-grid .svc-hub3-card .icon-bloom svg{
width:26px;height:26px;
fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;
}
/* arrow chip — re-style to match glass aesthetic */
.svc-hub3-grid .svc-hub3-card .arrow{
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
}
.svc-hub3-grid .svc-hub3-card:hover .arrow{
background:#fff;border-color:#fff;color:var(--card-accent,#062014);
}
/* typography on aurora cards */
.svc-hub3-grid .svc-hub3-card-content{
position:relative;z-index:2;margin-top:auto;
padding:88px 28px 28px;
}
.svc-hub3-grid .svc-hub3-card .cat{
color:rgba(255,255,255,.86);font-weight:700;
font-size:.7rem;letter-spacing:.16em;
}
.svc-hub3-grid .svc-hub3-card .cat:before{background:rgba(255,255,255,.65)}
.svc-hub3-grid .svc-hub3-card h3{
color:#fff;font-weight:700;font-size:1.32rem;line-height:1.18;
letter-spacing:-.015em;margin-bottom:8px;
}
.svc-hub3-grid .svc-hub3-card p{
color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.55;
}
/* featured card extras: bigger icon, floating dots, larger title */
.svc-hub3-grid .svc-hub3-card.is-featured .icon-bloom{
width:68px;height:68px;border-radius:16px;
top:30px;left:30px;
}
.svc-hub3-grid .svc-hub3-card.is-featured .icon-bloom svg{width:32px;height:32px}
.svc-hub3-grid .svc-hub3-card.is-featured .svc-hub3-card-content{
padding:120px 36px 36px;
}
.svc-hub3-grid .svc-hub3-card.is-featured h3{
font-size:clamp(1.85rem,2.6vw,2.6rem);max-width:560px;line-height:1.06;
}
.svc-hub3-grid .svc-hub3-card.is-featured p{
display:block;font-size:1.02rem;max-width:520px;
}
.svc-hub3-grid .svc-hub3-card .float-dot{
position:absolute;border-radius:50%;z-index:1;
background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,.05));
pointer-events:none;
}
.svc-hub3-grid .svc-hub3-card.is-featured .float-dot.d1{
width:160px;height:160px;top:8%;right:14%;
animation:auroraFloat 9s ease-in-out infinite;
}
.svc-hub3-grid .svc-hub3-card.is-featured .float-dot.d2{
width:90px;height:90px;top:52%;right:6%;
animation:auroraFloat 11s ease-in-out infinite reverse;
}
@keyframes auroraFloat{
0%,100%{transform:translateY(0) scale(1);opacity:.45}
50%{transform:translateY(-14px) scale(1.05);opacity:.62}
}
/* per-card mood gradients */
.svc-hub3-grid .svc-hub3-card[data-mood="emerald"]{
--card-bg:linear-gradient(135deg,#022c22 0%,#064e3b 50%,#16a34a 100%);
--mesh-1:rgba(110,231,183,.4);--mesh-2:rgba(2,44,34,.7);--card-accent:#022c22;
}
.svc-hub3-grid .svc-hub3-card[data-mood="purple"]{
--card-bg:linear-gradient(135deg,#2e1065 0%,#581c87 55%,#7e22ce 100%);
--mesh-1:rgba(216,180,254,.4);--mesh-2:rgba(46,16,101,.6);--card-accent:#2e1065;
}
.svc-hub3-grid .svc-hub3-card[data-mood="sunset"]{
--card-bg:linear-gradient(135deg,#7f1d1d 0%,#c2410c 50%,#f97316 100%);
--mesh-1:rgba(254,215,170,.4);--mesh-2:rgba(127,29,29,.55);--card-accent:#7c2d12;
}
.svc-hub3-grid .svc-hub3-card[data-mood="ocean"]{
--card-bg:linear-gradient(135deg,#082f49 0%,#0c4a6e 55%,#0284c7 100%);
--mesh-1:rgba(186,230,253,.4);--mesh-2:rgba(8,47,73,.65);--card-accent:#082f49;
}
.svc-hub3-grid .svc-hub3-card[data-mood="amber"]{
--card-bg:linear-gradient(135deg,#451a03 0%,#92400e 50%,#d97706 100%);
--mesh-1:rgba(254,215,170,.42);--mesh-2:rgba(69,26,3,.6);--card-accent:#451a03;
}
.svc-hub3-grid .svc-hub3-card[data-mood="lime"]{
--card-bg:linear-gradient(135deg,#1a2e05 0%,#16a34a 50%,#16a34a 100%);
--mesh-1:rgba(217,249,157,.4);--mesh-2:rgba(26,46,5,.6);--card-accent:#1a2e05;
}
.svc-hub3-grid .svc-hub3-card[data-mood="whatsapp"]{
--card-bg:linear-gradient(135deg,#022c22 0%,#047857 55%,#10b981 100%);
--mesh-1:rgba(167,243,208,.42);--mesh-2:rgba(2,44,34,.65);--card-accent:#022c22;
}
.svc-hub3-grid .svc-hub3-card[data-mood="crimson"]{
--card-bg:linear-gradient(135deg,#450a0a 0%,#991b1b 55%,#ef4444 100%);
--mesh-1:rgba(254,202,202,.4);--mesh-2:rgba(69,10,10,.65);--card-accent:#450a0a;
}
.svc-hub3-grid .svc-hub3-card[data-mood="magenta"]{
--card-bg:linear-gradient(135deg,#500724 0%,#9d174d 55%,#db2777 100%);
--mesh-1:rgba(251,207,232,.4);--mesh-2:rgba(80,7,36,.65);--card-accent:#500724;
}
.svc-hub3-grid .svc-hub3-card[data-mood="violet"]{
--card-bg:linear-gradient(135deg,#1e1b4b 0%,#3730a3 55%,#6366f1 100%);
--mesh-1:rgba(196,181,253,.4);--mesh-2:rgba(30,27,75,.65);--card-accent:#1e1b4b;
}
/* respect reduced-motion for floating dots */
@media (prefers-reduced-motion:reduce){
.svc-hub3-grid .svc-hub3-card.is-featured .float-dot{animation:none}
}
/* mobile — tighten padding */
@media (max-width:780px){
.svc-hub3-grid .svc-hub3-card-content{padding:80px 22px 22px}
.svc-hub3-grid .svc-hub3-card.is-featured .svc-hub3-card-content{padding:100px 24px 24px}
.svc-hub3-grid .svc-hub3-card .icon-bloom{top:18px;left:18px;width:46px;height:46px}
.svc-hub3-grid .svc-hub3-card.is-featured .icon-bloom{top:22px;left:22px;width:58px;height:58px}
}
/* ====================================================================
v3.9 — Marketing bento, BRAND-STRICT.
Ice White (#FBFBF0), Midnight (#14141A), and the site's house green
(#22c55e) — the guideline electric lime is too loud at scale, so we
use the same green that's already running across the site.
No gradients, no shadows, no strokes. Inter Tight titles, Open Sans
body. Overrides the v3.8 aurora aesthetic.
==================================================================== */
/* kill all decorative gradient + shadow layers from v3.8 */
.svc-hub3-grid .svc-hub3-card{
background:var(--card-bg,#14141A) !important;
border:none !important;
isolation:isolate;
}
.svc-hub3-grid .svc-hub3-card:before{
content:none !important;background:none !important;
}
.svc-hub3-grid .svc-hub3-card:after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
border-radius:inherit;background:none !important;
border:1.5px solid transparent;
box-shadow:none !important;
transition:border-color .25s ease;
}
.svc-hub3-grid .svc-hub3-card:hover{
transform:translateY(-4px);
box-shadow:none !important;
}
.svc-hub3-grid .svc-hub3-card:hover:after{
border-color:var(--card-accent,#22c55e);
}
.svc-hub3-grid .svc-hub3-card .float-dot{display:none !important}
.svc-hub3-grid .svc-hub3-card .img{display:none}
/* solid icon chip — flat brand colour, NO glassmorphism / blur / gradient */
.svc-hub3-grid .svc-hub3-card .icon-bloom{
position:absolute;top:24px;left:24px;z-index:2;
width:54px;height:54px;
border-radius:14px;
background:var(--icon-bg,#22c55e) !important;
color:var(--icon-fg,#14141A);
border:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
display:grid;place-items:center;
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.svc-hub3-grid .svc-hub3-card:hover .icon-bloom{
transform:rotate(-4deg) scale(1.05);
}
.svc-hub3-grid .svc-hub3-card .icon-bloom svg{
width:26px;height:26px;
fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;
}
/* arrow — outlined chip in brand accent */
.svc-hub3-grid .svc-hub3-card .arrow{
position:absolute;top:24px;right:24px;z-index:2;
width:38px;height:38px;border-radius:50%;
background:transparent !important;
color:var(--arrow-fg,#FBFBF0) !important;
border:1.5px solid var(--arrow-border,rgba(34,197,94,.55)) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
display:grid;place-items:center;
transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.svc-hub3-grid .svc-hub3-card .arrow svg{width:14px;height:14px}
.svc-hub3-grid .svc-hub3-card:hover .arrow{
background:var(--card-accent,#22c55e) !important;
color:#14141A !important;
border-color:var(--card-accent,#22c55e) !important;
}
/* typography — Inter Tight + Open Sans (brand) */
.svc-hub3-grid .svc-hub3-card-content{
position:relative;z-index:2;
margin-top:auto;
padding:96px 28px 28px;
}
.svc-hub3-grid .svc-hub3-card .cat{
font-family:'Open Sans','Inter',sans-serif;
font-size:.7rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
color:var(--text-muted,rgba(251,251,240,.65));
}
.svc-hub3-grid .svc-hub3-card .cat:before{
background:var(--card-accent,#22c55e);
width:6px;height:6px;
}
.svc-hub3-grid .svc-hub3-card h3{
font-family:'Inter Tight','Inter',sans-serif;
font-weight:800;font-style:normal;
font-size:1.55rem;line-height:1.05;
letter-spacing:-.025em;
color:var(--text-main,#FBFBF0);
margin:10px 0 12px;
}
.svc-hub3-grid .svc-hub3-card p{
font-family:'Open Sans','Inter',sans-serif;
font-size:.96rem;line-height:1.55;font-weight:400;
color:var(--text-body,rgba(251,251,240,.78));
display:block;
}
/* featured (SEO) — lime brand bg, midnight text/icon */
.svc-hub3-grid .svc-hub3-card.is-featured .icon-bloom{
width:72px;height:72px;border-radius:18px;
top:32px;left:32px;
}
.svc-hub3-grid .svc-hub3-card.is-featured .icon-bloom svg{width:34px;height:34px;stroke-width:2.2}
.svc-hub3-grid .svc-hub3-card.is-featured .arrow{top:32px;right:32px;width:46px;height:46px}
.svc-hub3-grid .svc-hub3-card.is-featured .svc-hub3-card-content{
padding:140px 36px 36px;
}
.svc-hub3-grid .svc-hub3-card.is-featured h3{
font-size:clamp(2.2rem,3vw,3.2rem);
line-height:1;letter-spacing:-.035em;font-weight:900;font-style:italic;
max-width:600px;
}
.svc-hub3-grid .svc-hub3-card.is-featured p{
font-size:1.05rem;line-height:1.55;max-width:540px;
}
/* ============ MOOD: midnight (default dark card) ============ */
.svc-hub3-grid .svc-hub3-card[data-mood="midnight"]{
--card-bg:#14141A;
--card-accent:#22c55e;
--icon-bg:#22c55e;
--icon-fg:#14141A;
--arrow-border:rgba(34,197,94,.55);
--arrow-fg:#FBFBF0;
--text-main:#FBFBF0;
--text-muted:rgba(251,251,240,.62);
--text-body:rgba(251,251,240,.78);
}
/* ============ MOOD: ice (light card) ============ */
.svc-hub3-grid .svc-hub3-card[data-mood="ice"]{
--card-bg:#FBFBF0;
--card-accent:#14141A;
--icon-bg:#14141A;
--icon-fg:#22c55e;
--arrow-border:rgba(20,20,26,.3);
--arrow-fg:#14141A;
--text-main:#14141A;
--text-muted:rgba(20,20,26,.6);
--text-body:rgba(20,20,26,.72);
}
.svc-hub3-grid .svc-hub3-card[data-mood="ice"]:hover .arrow{
background:#14141A !important;color:#22c55e !important;border-color:#14141A !important;
}
/* ============ MOOD: lime-brand (the hero / featured) ============ */
.svc-hub3-grid .svc-hub3-card[data-mood="lime-brand"]{
--card-bg:#22c55e;
--card-accent:#14141A;
--icon-bg:#14141A;
--icon-fg:#22c55e;
--arrow-border:rgba(20,20,26,.4);
--arrow-fg:#14141A;
--text-main:#14141A;
--text-muted:rgba(20,20,26,.6);
--text-body:rgba(20,20,26,.78);
}
.svc-hub3-grid .svc-hub3-card[data-mood="lime-brand"]:hover .arrow{
background:#14141A !important;color:#22c55e !important;border-color:#14141A !important;
}
/* hover border colour follows accent */
.svc-hub3-grid .svc-hub3-card[data-mood="ice"]:hover:after{border-color:#14141A}
.svc-hub3-grid .svc-hub3-card[data-mood="lime-brand"]:hover:after{border-color:#14141A}
.svc-hub3-grid .svc-hub3-card[data-mood="midnight"]:hover:after{border-color:#22c55e}
/* mobile padding */
@media (max-width:780px){
.svc-hub3-grid .svc-hub3-card .icon-bloom{top:20px;left:20px;width:48px;height:48px}
.svc-hub3-grid .svc-hub3-card .arrow{top:20px;right:20px}
.svc-hub3-grid .svc-hub3-card-content{padding:90px 22px 22px}
.svc-hub3-grid .svc-hub3-card h3{font-size:1.35rem}
.svc-hub3-grid .svc-hub3-card.is-featured .icon-bloom{top:24px;left:24px;width:60px;height:60px}
.svc-hub3-grid .svc-hub3-card.is-featured .svc-hub3-card-content{padding:110px 24px 24px}
.svc-hub3-grid .svc-hub3-card.is-featured h3{font-size:1.85rem}
}
/* ====================================================================
v3.10 — bump every card-level title 1–2 pt and 700 → 800
To match the heavier group-heading rhythm.
==================================================================== */
/* Advertising channel cards */
.svc-hub3-channels .chcard h3{
font-size:1.35rem;font-weight:800;letter-spacing:-.018em;line-height:1.18;
}
.svc-hub3-channels .chfeatured h3{
font-size:clamp(1.9rem,2.7vw,2.6rem);font-weight:800;letter-spacing:-.028em;line-height:1.08;
}
/* Design & Content editorial spreads */
.svc-hub3-editorial .eds h3{
font-size:clamp(1.75rem,2.8vw,2.55rem);font-weight:800;letter-spacing:-.032em;line-height:1.05;
}
/* Strategy & Data tiles */
.svc-hub3-tiles .dtile h3{
font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
.svc-hub3-tiles .dtile.is-feature h3{
font-size:1.95rem;font-weight:800;letter-spacing:-.028em;line-height:1.05;
}
/* Tech & Development code-spec cards */
.svc-hub3-codes .ccard h3{
font-size:1.65rem;font-weight:800;letter-spacing:-.02em;line-height:1.12;
}
/* Mobile — let titles breathe a touch smaller */
@media (max-width:780px){
.svc-hub3-channels .chcard h3{font-size:1.22rem}
.svc-hub3-editorial .eds h3{font-size:clamp(1.55rem,5.4vw,2rem)}
.svc-hub3-tiles .dtile h3{font-size:1.35rem}
.svc-hub3-tiles .dtile.is-feature h3{font-size:1.65rem}
.svc-hub3-codes .ccard h3{font-size:1.45rem}
}
/* ====================================================================
SMM v1 — Social Media Management page redesign.
Bold, modern, brand-strict: Ice White (#FBFBF0), Midnight (#14141A),
site green (#22c55e). Inter Tight headlines, Open Sans body. No
gradients, no shadows on flat blocks. Alternating light/dark sections
for visual rhythm.
==================================================================== */
.smm{font-family:'Open Sans','Inter',sans-serif;color:#14141A}
.smm *{box-sizing:border-box}
.smm .container{max-width:1240px;margin:0 auto;padding:0 28px}
/* ----- HERO ----- */
.smm-hero{
position:relative;margin-top:-90px;
padding:170px 0 96px;
background:#FBFBF0;color:#14141A;overflow:hidden;
}
.smm-hero:before{
content:"";position:absolute;
right:-180px;top:-180px;width:560px;height:560px;border-radius:50%;
background:#22c55e;opacity:.05;
}
.smm-hero .container{
position:relative;z-index:1;
display:grid;grid-template-columns:1.1fr 1fr;
gap:72px;align-items:center;
}
.smm-eyebrow{
display:inline-flex;align-items:center;gap:10px;
padding:8px 16px;background:#14141A;color:#22c55e;border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:24px;
}
.smm-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:smmPulse 2.2s ease-in-out infinite}
@keyframes smmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
.smm-hero h1{
font-family:'Inter Tight','Inter',sans-serif;
font-size:clamp(2.4rem,5vw,4.8rem);
font-weight:900;line-height:.95;letter-spacing:-.04em;
color:#14141A;margin:0 0 24px;
}
.smm-hero h1 em{font-style:italic;font-weight:800;color:#22c55e}
.smm-hero .lead{
font-size:1.08rem;line-height:1.7;color:#3a3a4a;
max-width:560px;margin:0 0 32px;
}
.smm-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.smm-btn-primary{
display:inline-flex;align-items:center;gap:10px;
padding:15px 24px;border-radius:12px;
background:#14141A;color:#FBFBF0;
font-family:'Open Sans',sans-serif;font-weight:700;font-size:.95rem;
text-decoration:none;transition:transform .2s,background .2s;
}
.smm-btn-primary:hover{transform:translateY(-2px);background:#22c55e;color:#14141A}
.smm-btn-primary svg{width:16px;height:16px}
.smm-btn-ghost{
display:inline-flex;align-items:center;gap:10px;
padding:15px 22px;border-radius:12px;
background:transparent;color:#14141A;
border:1.5px solid rgba(20,20,26,.18);
font-family:'Open Sans',sans-serif;font-weight:700;font-size:.95rem;
text-decoration:none;transition:background .2s,border-color .2s;
}
.smm-btn-ghost:hover{background:#14141A;color:#FBFBF0;border-color:#14141A}
.smm-hero-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#475569;font-size:.86rem}
.smm-hero-trust .star{color:#22c55e;font-weight:700}
.smm-hero-trust .sep{width:4px;height:4px;border-radius:50%;background:rgba(20,20,26,.2)}
/* feed mockup on right side of hero */
.smm-feed{position:relative;display:grid;gap:14px}
.smm-feed-card{
background:#FFFFFF;border:1.5px solid #14141A;border-radius:18px;
padding:18px;position:relative;
transition:transform .3s ease;
}
.smm-feed-card:nth-child(1){transform:rotate(-2deg) translateX(-10px)}
.smm-feed-card:nth-child(2){transform:rotate(1deg) translateX(20px)}
.smm-feed-card:nth-child(3){transform:rotate(-1deg)}
.smm-feed-card .fc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.smm-feed-card .fc-avatar{width:36px;height:36px;border-radius:50%;background:#14141A;color:#22c55e;display:grid;place-items:center;font-weight:800;font-family:'Inter Tight';font-size:.92rem}
.smm-feed-card .fc-name{font-weight:700;font-size:.86rem;color:#14141A;font-family:'Inter Tight'}
.smm-feed-card .fc-meta{font-size:.72rem;color:#64748b;font-family:'JetBrains Mono'}
.smm-feed-card .fc-platform{margin-left:auto;font-family:'JetBrains Mono';font-size:.66rem;color:#22c55e;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.smm-feed-card .fc-body{font-size:.86rem;line-height:1.55;color:#374151;margin:0 0 12px}
.smm-feed-card .fc-stats{display:flex;gap:14px;font-size:.74rem;color:#64748b;font-family:'JetBrains Mono';padding-top:10px;border-top:1px dashed rgba(20,20,26,.1)}
.smm-feed-card .fc-stats span strong{color:#14141A}
.smm-feed-card .fc-img{
height:120px;border-radius:10px;margin-bottom:12px;
background:#14141A;display:grid;place-items:center;color:#22c55e;
}
.smm-feed-card .fc-img svg{width:48px;height:48px}
/* ----- MARQUEE override for SMM ----- */
.smm-marquee{
background:#14141A;color:#FBFBF0;
padding:18px 0;overflow:hidden;
border-top:1px solid rgba(34,197,94,.2);
border-bottom:1px solid rgba(34,197,94,.2);
}
.smm-marquee-track{
display:flex;width:max-content;
animation:smmMarq 38s linear infinite;
gap:48px;
}
.smm-marquee-item{
font-family:'Inter Tight';font-size:1.05rem;font-weight:800;letter-spacing:-.01em;
color:#FBFBF0;display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
}
.smm-marquee-item .dot{color:#22c55e;font-size:.7rem}
@keyframes smmMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ----- STATS BAND ----- */
.smm-stats{padding:80px 0;background:#FBFBF0}
.smm-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid rgba(20,20,26,.12)}
.smm-stat{padding:24px 28px;border-right:1px solid rgba(20,20,26,.12);border-top:1px solid rgba(20,20,26,.12);border-bottom:1px solid rgba(20,20,26,.12)}
.smm-stat .num{font-family:'Inter Tight';font-size:clamp(2.2rem,3.4vw,3.4rem);font-weight:900;color:#14141A;letter-spacing:-.04em;line-height:1}
.smm-stat .num em{font-style:normal;color:#22c55e;font-weight:900}
.smm-stat .lbl{font-family:'JetBrains Mono';font-size:.72rem;color:#475569;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;font-weight:600}
/* ----- TRUST BAND (E-E-A-T, dark) ----- */
.smm-trust{padding:96px 0;background:#14141A;color:#FBFBF0}
.smm-section-head{margin-bottom:48px;max-width:780px}
.smm-section-head .kicker{
font-family:'JetBrains Mono';font-size:.78rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:#22c55e;
display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.smm-section-head .kicker:before{content:"";width:24px;height:1px;background:#22c55e}
.smm-section-head h2{
font-family:'Inter Tight';font-size:clamp(2.2rem,4vw,3.6rem);font-weight:900;line-height:1.05;letter-spacing:-.035em;margin:0 0 16px;
}
.smm-section-head h2 em{font-style:italic;color:#22c55e;font-weight:800}
.smm-section-head p{font-size:1.04rem;line-height:1.65;color:#a1a1aa;max-width:640px;margin:0}
.smm-trust .smm-section-head h2{color:#FBFBF0}
.smm-trust .smm-section-head p{color:#a1a1aa}
.smm-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.smm-trust-card{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
padding:28px;border-radius:18px;
display:flex;flex-direction:column;gap:14px;
transition:transform .25s,border-color .25s,background .25s;
}
.smm-trust-card:hover{transform:translateY(-4px);border-color:#22c55e;background:rgba(34,197,94,.05)}
.smm-trust-card .tag{
font-family:'JetBrains Mono';font-size:.66rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:#22c55e;
}
.smm-trust-card h3{font-family:'Inter Tight';font-size:1.25rem;font-weight:800;color:#FBFBF0;margin:0;line-height:1.2}
.smm-trust-card p{font-size:.92rem;line-height:1.6;color:#cbd5e1;margin:0}
.smm-trust-card .badge{
width:44px;height:44px;border-radius:12px;background:#22c55e;color:#14141A;
display:grid;place-items:center;
}
.smm-trust-card .badge svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ----- QUOTE / INTRO ----- */
.smm-intro{padding:96px 0;background:#FBFBF0}
.smm-intro-quote{
max-width:920px;margin:0 auto;text-align:left;
}
.smm-intro-quote .qmark{
font-family:'Inter Tight';font-size:6rem;line-height:1;color:#22c55e;font-weight:900;margin-bottom:-30px;display:block;
}
.smm-intro-quote p{
font-family:'Inter Tight';font-size:clamp(1.4rem,2.4vw,2.1rem);
line-height:1.3;font-weight:700;letter-spacing:-.025em;color:#14141A;margin:0 0 22px;
}
.smm-intro-quote .meta{font-size:1rem;line-height:1.7;color:#3a3a4a;max-width:780px}
/* ----- PROCESS (numbered alternating sections) ----- */
.smm-process{padding:96px 0;background:#FBFBF0;border-top:1px solid rgba(20,20,26,.08)}
.smm-process-list{display:grid;gap:32px}
.smm-process-row{
display:grid;grid-template-columns:100px 1fr auto;gap:32px;align-items:start;
padding:36px 0;border-top:1px solid rgba(20,20,26,.1);
}
.smm-process-row:last-child{border-bottom:1px solid rgba(20,20,26,.1)}
.smm-process-num{
font-family:'Inter Tight';font-size:clamp(3rem,5vw,4.6rem);font-weight:900;
color:#22c55e;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.smm-process-body h3{
font-family:'Inter Tight';font-size:clamp(1.6rem,2.4vw,2.2rem);
font-weight:800;line-height:1.1;letter-spacing:-.025em;color:#14141A;margin:0 0 12px;
}
.smm-process-body p{font-size:1.02rem;line-height:1.65;color:#3a3a4a;max-width:680px;margin:0}
.smm-process-arrow{
width:48px;height:48px;border-radius:50%;
background:transparent;border:1.5px solid rgba(20,20,26,.2);
display:grid;place-items:center;color:#14141A;
transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.smm-process-arrow svg{width:18px;height:18px}
.smm-process-row:hover .smm-process-arrow{background:#22c55e;border-color:#22c55e;color:#14141A;transform:translate(2px,-2px)}
/* ----- PLATFORM GRID ----- */
.smm-platforms{padding:96px 0;background:#14141A;color:#FBFBF0}
.smm-platforms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.smm-pcard{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
padding:28px;border-radius:16px;
display:flex;flex-direction:column;gap:14px;
transition:transform .25s,border-color .25s,background .25s;
}
.smm-pcard:hover{transform:translateY(-4px);border-color:#22c55e;background:rgba(34,197,94,.05)}
.smm-pcard .plogo{
width:48px;height:48px;border-radius:12px;
background:#FBFBF0;padding:10px;display:grid;place-items:center;
}
.smm-pcard .plogo img{width:100%;height:100%;object-fit:contain}
.smm-pcard h3{font-family:'Inter Tight';font-size:1.5rem;font-weight:800;color:#FBFBF0;margin:0;line-height:1.15}
.smm-pcard p{font-size:.94rem;line-height:1.6;color:#cbd5e1;margin:0}
.smm-pcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px;border-top:1px dashed rgba(255,255,255,.1)}
.smm-pcard .tags span{
padding:4px 10px;border-radius:8px;
background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);
color:#22c55e;font-family:'JetBrains Mono';font-size:.7rem;font-weight:600;
}
/* ----- FORMATS strip ----- */
.smm-formats{padding:96px 0;background:#FBFBF0}
.smm-formats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.smm-fcard{
background:#FFFFFF;border:1.5px solid rgba(20,20,26,.1);
padding:24px;border-radius:14px;
display:flex;flex-direction:column;gap:10px;
transition:transform .25s,border-color .25s;
}
.smm-fcard:hover{transform:translateY(-3px);border-color:#22c55e}
.smm-fcard .ficon{
width:42px;height:42px;border-radius:10px;
background:#14141A;color:#22c55e;display:grid;place-items:center;
}
.smm-fcard .ficon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smm-fcard h3{font-family:'Inter Tight';font-size:1.15rem;font-weight:800;color:#14141A;margin:0;line-height:1.2}
.smm-fcard p{font-size:.92rem;line-height:1.55;color:#475569;margin:0}
/* ----- KPI / MEASURE grid ----- */
.smm-measure{padding:96px 0;background:#14141A;color:#FBFBF0}
.smm-measure-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.smm-mcard{
display:flex;align-items:flex-start;gap:18px;
padding:24px;border-radius:14px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
transition:background .25s,border-color .25s;
}
.smm-mcard:hover{background:rgba(34,197,94,.06);border-color:#22c55e}
.smm-mcard .mc-num{
font-family:'Inter Tight';font-size:1.8rem;font-weight:900;color:#22c55e;line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.smm-mcard h3{font-family:'Inter Tight';font-size:1.1rem;font-weight:800;color:#FBFBF0;margin:0 0 6px;line-height:1.25}
.smm-mcard p{font-size:.92rem;line-height:1.55;color:#a1a1aa;margin:0}
/* ----- INDUSTRIES ----- */
.smm-industries{padding:96px 0;background:#FBFBF0}
.smm-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.smm-icard{
display:flex;align-items:center;gap:18px;
padding:22px 24px;border-radius:14px;
background:#FFFFFF;border:1.5px solid rgba(20,20,26,.08);
transition:transform .25s,border-color .25s;
}
.smm-icard:hover{transform:translateY(-3px);border-color:#22c55e}
.smm-icard .iicon{
width:44px;height:44px;border-radius:12px;background:#22c55e;color:#14141A;display:grid;place-items:center;flex-shrink:0;
}
.smm-icard .iicon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.smm-icard span{font-family:'Inter Tight';font-size:1.02rem;font-weight:700;color:#14141A;line-height:1.3}
/* ----- WHY US (checklist) ----- */
.smm-why{padding:96px 0;background:#FBFBF0;border-top:1px solid rgba(20,20,26,.08)}
.smm-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.smm-wrow{
display:flex;align-items:flex-start;gap:16px;
padding:20px 22px;border-radius:14px;
background:#FFFFFF;border:1.5px solid rgba(20,20,26,.08);
}
.smm-wrow .check{
width:32px;height:32px;border-radius:50%;background:#14141A;color:#22c55e;
display:grid;place-items:center;flex-shrink:0;
}
.smm-wrow .check svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.smm-wrow p{font-family:'Open Sans',sans-serif;font-size:.98rem;line-height:1.55;color:#14141A;margin:0;font-weight:500}
/* ----- FAQ ----- */
.smm-faq{padding:96px 0;background:#FBFBF0}
.smm-faq-list{display:grid;gap:12px;max-width:920px;margin:0 auto}
.smm-faq-item{
background:#FFFFFF;border:1.5px solid rgba(20,20,26,.08);
border-radius:14px;overflow:hidden;
transition:border-color .25s;
}
.smm-faq-item:hover{border-color:#22c55e}
.smm-faq-q{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:22px 26px;cursor:pointer;
font-family:'Inter Tight';font-size:1.15rem;font-weight:700;color:#14141A;letter-spacing:-.01em;
}
.smm-faq-q .toggle{
width:30px;height:30px;border-radius:50%;background:#14141A;color:#22c55e;display:grid;place-items:center;flex-shrink:0;
transition:transform .25s,background .25s;
}
.smm-faq-q .toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.smm-faq-item.open .smm-faq-q .toggle{transform:rotate(45deg);background:#22c55e;color:#14141A}
.smm-faq-a{
max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease;
font-size:.98rem;line-height:1.7;color:#3a3a4a;
padding:0 26px;
}
.smm-faq-item.open .smm-faq-a{max-height:400px;padding:0 26px 22px}
/* ----- CTA ----- */
.smm-cta{padding:120px 0;background:#22c55e;color:#14141A;text-align:center;position:relative;overflow:hidden}
.smm-cta:before{
content:"";position:absolute;left:-100px;bottom:-100px;
width:300px;height:300px;border-radius:50%;background:#14141A;opacity:.06;
}
.smm-cta:after{
content:"";position:absolute;right:-120px;top:-120px;
width:340px;height:340px;border-radius:50%;background:#14141A;opacity:.05;
}
.smm-cta .container{position:relative;z-index:1}
.smm-cta h2{
font-family:'Inter Tight';font-size:clamp(2.4rem,5vw,4.4rem);
font-weight:900;line-height:1;letter-spacing:-.04em;
color:#14141A;margin:0 0 18px;max-width:760px;margin-left:auto;margin-right:auto;
}
.smm-cta h2 em{font-style:italic;font-weight:800}
.smm-cta p{font-size:1.1rem;line-height:1.6;color:#14141A;opacity:.78;max-width:560px;margin:0 auto 32px}
.smm-cta .actions{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center}
.smm-cta .smm-btn-primary{background:#14141A;color:#FBFBF0}
.smm-cta .smm-btn-primary:hover{background:#FBFBF0;color:#14141A}
.smm-cta .smm-btn-ghost{border-color:rgba(20,20,26,.3);color:#14141A}
.smm-cta .smm-btn-ghost:hover{background:#14141A;color:#FBFBF0;border-color:#14141A}
/* ----- RESPONSIVE ----- */
@media (max-width:1100px){
.smm-hero .container{grid-template-columns:1fr;gap:40px}
.smm-feed{max-width:480px}
.smm-trust-grid,.smm-platforms-grid,.smm-formats-grid,.smm-ind-grid{grid-template-columns:repeat(2,1fr)}
.smm-stats-grid{grid-template-columns:repeat(2,1fr)}
.smm-measure-grid,.smm-why-grid{grid-template-columns:1fr}
}
@media (max-width:780px){
/* Stop the hero extending up under the floating header on mobile —
was margin-top:-78px which made the eyebrow + H1 sit in the header
tap zone, so tapping "near the heading" was actually hitting the
brand logo / nav links and navigating to other pages. */
.smm-hero{margin-top:0;padding:32px 0 60px}
.smm-hero h1{font-size:clamp(2rem,8vw,2.8rem)}
.smm-trust-grid,.smm-platforms-grid,.smm-formats-grid,.smm-ind-grid{grid-template-columns:1fr}
.smm-stats-grid{grid-template-columns:1fr 1fr}
.smm-process-row{grid-template-columns:60px 1fr;gap:18px;padding:24px 0}
.smm-process-num{font-size:2.4rem}
.smm-process-arrow{display:none}
.smm-trust,.smm-intro,.smm-process,.smm-platforms,.smm-formats,.smm-measure,.smm-industries,.smm-why,.smm-faq{padding:60px 0}
.smm-cta{padding:80px 0}
}
/* ===== Dark-mode overrides for smm-* service page sections ===== */
[data-theme="dark"] .smm-hero{background:#0b1220;color:#f1f5f9}
[data-theme="dark"] .smm-hero h1{color:#f1f5f9}
[data-theme="dark"] .smm-hero .lead{color:#cbd5e1}
[data-theme="dark"] .smm-hero-trust{color:#94a3b8}
[data-theme="dark"] .smm-hero-trust .sep{background:rgba(241,245,249,.2)}
[data-theme="dark"] .smm-btn-ghost{border-color:rgba(241,245,249,.2);color:#f1f5f9}
[data-theme="dark"] .smm-btn-ghost:hover{background:#f1f5f9;color:#14141A;border-color:#f1f5f9}
[data-theme="dark"] .smm-feed-card{background:#111827;border-color:#1e293b}
[data-theme="dark"] .smm-feed-card .fc-name,
[data-theme="dark"] .smm-feed-card .fc-stats span strong{color:#f1f5f9}
[data-theme="dark"] .smm-feed-card .fc-body{color:#cbd5e1}
[data-theme="dark"] .smm-feed-card .fc-stats{border-top-color:rgba(241,245,249,.1)}
[data-theme="dark"] .smm-feed-card .fc-meta,
[data-theme="dark"] .smm-feed-card .fc-stats{color:#94a3b8}
[data-theme="dark"] .smm-stats{background:#0b1220}
[data-theme="dark"] .smm-stats-grid{border-left-color:rgba(241,245,249,.1)}
[data-theme="dark"] .smm-stat{border-color:rgba(241,245,249,.1)}
[data-theme="dark"] .smm-stat .num{color:#f1f5f9}
[data-theme="dark"] .smm-stat .lbl{color:#94a3b8}
[data-theme="dark"] .smm-section-head h2{color:#f1f5f9}
[data-theme="dark"] .smm-section-head p{color:#94a3b8}
[data-theme="dark"] .smm-intro{background:#0b1220}
[data-theme="dark"] .smm-intro-quote p{color:#f1f5f9}
[data-theme="dark"] .smm-intro-quote .meta{color:#cbd5e1}
[data-theme="dark"] .smm-process{background:#0b1220;border-top-color:rgba(241,245,249,.08)}
[data-theme="dark"] .smm-process-row{border-color:rgba(241,245,249,.1)}
[data-theme="dark"] .smm-process-row:last-child{border-bottom-color:rgba(241,245,249,.1)}
[data-theme="dark"] .smm-process-body h3{color:#f1f5f9}
[data-theme="dark"] .smm-process-body p{color:#cbd5e1}
[data-theme="dark"] .smm-process-arrow{border-color:rgba(241,245,249,.2);color:#f1f5f9}
[data-theme="dark"] .smm-formats{background:#0b1220}
[data-theme="dark"] .smm-fcard{background:#111827;border-color:#1e293b}
[data-theme="dark"] .smm-fcard h3{color:#f1f5f9}
[data-theme="dark"] .smm-fcard p{color:#94a3b8}
[data-theme="dark"] .smm-industries{background:#0b1220}
[data-theme="dark"] .smm-icard{background:#111827;border-color:#1e293b}
[data-theme="dark"] .smm-icard span{color:#f1f5f9}
[data-theme="dark"] .smm-why{background:#0b1220;border-top-color:rgba(241,245,249,.08)}
[data-theme="dark"] .smm-wrow{background:#111827;border-color:#1e293b}
[data-theme="dark"] .smm-wrow p{color:#f1f5f9}
[data-theme="dark"] .smm-faq{background:#0b1220}
[data-theme="dark"] .smm-faq-item{background:#111827;border-color:#1e293b}
[data-theme="dark"] .smm-faq-q{color:#f1f5f9}
[data-theme="dark"] .smm-faq-a{color:#cbd5e1}
[data-theme="dark"] .smm-marquee{background:#070b14;border-color:rgba(241,245,249,.08)}
[data-theme="dark"] .smm-marquee-item{color:#cbd5e1}
/* ------------------------------------------------------------------ */
/* Dark-mode contrast fixes — second pass audit 2026-05-16 */
/* Spans service-pages (.smm-*), case-study, FAQ, contact, blog */
/* ------------------------------------------------------------------ */
/* ---- Service-page template (.smm-*) ---- */
/* .smm-intro-quote .meta / .smm-process-body p / .smm-faq-a use
hardcoded color:#3a3a4a which is invisible on dark bg #0b1220. */
[data-theme="dark"] .smm-intro-quote .meta,
[data-theme="dark"] .smm-process-body p,
[data-theme="dark"] .smm-faq-a{
color:#cbd5e1 !important;
}
/* FAQ question text uses --dvh-ink in dark via inheritance — force visible. */
[data-theme="dark"] .smm-faq-q{color:#f1f5f9 !important}
/* CTA banner copy used opacity:.78 on a bright green — drop the opacity. */
[data-theme="dark"] .smm-cta p,
.smm-cta p{opacity:1 !important;color:rgba(255,255,255,.92) !important}
/* ---- Case-study listing tiles (.card / .tag) ---- */
[data-theme="dark"] .card h3{color:#f1f5f9 !important}
[data-theme="dark"] .card .tag{color:#86efac !important}
/* ---- Case-study detail page ---- */
[data-theme="dark"] .cs-meta .meta-item .lbl{color:#94a3b8 !important}
[data-theme="dark"] .cs-crumbs .current{color:#f1f5f9 !important}
/* ---- Blog template ---- */
[data-theme="dark"] .blog-hero .crumbs,
[data-theme="dark"] .blog-hero .crumbs a{color:#cbd5e1 !important}
[data-theme="dark"] .blog-article .prose ul,
[data-theme="dark"] .blog-article .prose ol,
[data-theme="dark"] .blog-article .prose li{color:#cbd5e1 !important}
[data-theme="dark"] .blog-article .prose a{color:#86efac !important}
[data-theme="dark"] .blog-share .lbl{color:#cbd5e1 !important}
[data-theme="dark"] .blog-share a svg{fill:#cbd5e1 !important}
[data-theme="dark"] .blog-feature{background:#0f172a !important}
/* ---- FAQ accordion (faq.html + footer accordions) ---- */
[data-theme="dark"] .faq-q:after{color:#86efac !important}
[data-theme="dark"] .faq-item{border-bottom:1px solid rgba(241,245,249,.1) !important}
/* ------------------------------------------------------------------ */
/* Mobile click-through hardening (audit 2026-05-16, post-deploy) */
/* ------------------------------------------------------------------ */
/* The .smm-feed-card mockups are decorative (aria-hidden) — they
visually mimic Google search results and review cards with link-blue
bold text. Some users tapped them expecting interaction; lock them
from receiving any taps so a phantom tap can't propagate / mis-target.
They contain no real links anyway. */
.smm-feed,
.smm-feed *{pointer-events:none}
/* .dd-bridge is a transparent 22px overlay above the desktop dropdown
menu — its only purpose is to keep the hover state alive between
trigger and menu. It has pointer-events:auto which means it CAN
absorb taps when the menu is open. On touch devices it provides no
value and may intercept stray taps; disable everywhere. */
.dd-bridge{pointer-events:none !important}
/* Hide it entirely on mobile breakpoints — saves a tap target. */
@media (max-width:960px){
.dd-bridge{display:none !important}
}
/* ------------------------------------------------------------------ */
/* Critical mobile fix — stop the floating header pill from absorbing */
/* taps in its empty zones. Sticky header overlaps the hero on scroll, */
/* so taps in the white-pill empty area were being caught (which meant */
/* tapping near the H1 sometimes landed on the brand link or nav). */
/* Pass clicks THROUGH the empty pill; only the explicit interactive */
/* children (brand, hamburger, theme toggle, nav links, CTA button) */
/* keep their tap targets. */
/* ------------------------------------------------------------------ */
.site-header,
.site-header .container,
.site-header .nav{pointer-events:none}
.site-header .brand,
.site-header .hamb,
.site-header .theme-toggle,
.site-header .lang-btn,
.site-header .nav ul,
.site-header .nav ul *,
.site-header .nav .cta,
.site-header .nav .cta *{pointer-events:auto}
/* ------------------------------------------------------------------ */
/* NUCLEAR fix — service-page hero: lock every non-CTA element from */
/* receiving any pointer events. User reports tapping the eyebrow, */
/* H1, lead, or trust line on mobile redirects to other pages. */
/* This makes those elements literally inert; only the two CTA */
/* buttons inside .smm-hero-cta can receive taps. */
/* ------------------------------------------------------------------ */
.smm-hero,
.smm-hero .container,
.smm-hero .container > div,
.smm-hero .smm-eyebrow,
.smm-hero .smm-eyebrow *,
.smm-hero h1,
.smm-hero h1 *,
.smm-hero .lead,
.smm-hero .lead *,
.smm-hero .smm-hero-trust,
.smm-hero .smm-hero-trust *{
pointer-events:none;
}
/* CTAs are the only interactive elements in the hero. */
.smm-hero .smm-hero-cta,
.smm-hero .smm-hero-cta *,
.smm-hero .smm-btn-primary,
.smm-hero .smm-btn-primary *,
.smm-hero .smm-btn-ghost,
.smm-hero .smm-btn-ghost *{
pointer-events:auto;
}
/* Apply the same lock to homepage hero (.hero / variant A). */
.hero .hv-a-text,
.hero .hv-a-text > :not(.hero-cta):not(.hv-a-cta),
.hero .hv-a-text > :not(.hero-cta):not(.hv-a-cta) *,
.hero .hv-a-mini-ratings,
.hero .hv-a-mini-ratings *,
.hero .hv-a-reviews,
.hero .hv-a-reviews *{
pointer-events:none;
}
.hero .hero-cta,
.hero .hero-cta *,
.hero .hv-a-cta,
.hero .hv-a-cta *,
.hero .btn,
.hero .btn-ghost,
.hero .btn-outline{
pointer-events:auto;
}
/* ------------------------------------------------------------------ */
/* Service-page dark sections — heading visibility (audit 2026-05-18) */
/* User report: in LIGHT mode, the last 2 dark sections show an h2 */
/* that overlaps / is hard to read. The base .smm-section-head h2 has */
/* no color, so it inherits from the section. For the green .smm-cta */
/* the h2 was dark while the paragraph was already white — inconsistent*/
/* and harder to read than white. Force explicit, readable colors in */
/* BOTH light and dark modes for every dark-bg section. */
/* ------------------------------------------------------------------ */
/* Light mode — dark-bg sections always get white h2 + em. */
.smm-marquee .smm-section-head h2,
.smm-trust .smm-section-head h2,
.smm-platforms .smm-section-head h2,
.smm-measure .smm-section-head h2,
.smm-cta h2{
color:#FBFBF0 !important;
}
.smm-trust .smm-section-head h2 em,
.smm-platforms .smm-section-head h2 em,
.smm-measure .smm-section-head h2 em,
.smm-cta h2 em{
color:#86efac !important; /* lighter green — pops on dark/green */
}
/* Light mode — supporting paragraph text in dark sections (slate-300). */
.smm-trust .smm-section-head p,
.smm-platforms .smm-section-head p,
.smm-measure .smm-section-head p{
color:#cbd5e1 !important;
}
/* Dark mode — preserve readable colors on these sections as well. */
[data-theme="dark"] .smm-marquee .smm-section-head h2,
[data-theme="dark"] .smm-trust .smm-section-head h2,
[data-theme="dark"] .smm-platforms .smm-section-head h2,
[data-theme="dark"] .smm-measure .smm-section-head h2,
[data-theme="dark"] .smm-cta h2{
color:#f1f5f9 !important;
}
[data-theme="dark"] .smm-trust .smm-section-head h2 em,
[data-theme="dark"] .smm-platforms .smm-section-head h2 em,
[data-theme="dark"] .smm-measure .smm-section-head h2 em,
[data-theme="dark"] .smm-cta h2 em{
color:#86efac !important;
}
[data-theme="dark"] .smm-trust .smm-section-head p,
[data-theme="dark"] .smm-platforms .smm-section-head p,
[data-theme="dark"] .smm-measure .smm-section-head p{
color:#cbd5e1 !important;
}