/* telebridge build 20260709225408r2117 · hero perf: header chroma-key + shader loops */
/* ==========================================================================
Telebridge — homepage patch styles
--------------------------------------------------------------------------
Loaded AFTER telebridge.css (and blog.css) in the shared . Currently
just the two-image "showcase-duo" grid added to the homepage's brand
showcase section — kept in its own small file rather than bloating
blog.css with unrelated homepage styles, or guessing at edits to
telebridge.css (which isn't part of this project's local files).
Add as a stylesheet link in the shared , after the others:
========================================================================== */
.showcase-duo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin-top: 12px;
}
.showcase-duo .brand-showcase-card {
border-radius: var(--radius, 16px);
overflow: hidden;
box-shadow: 0 1px 3px rgba(28, 10, 74, 0.08);
}
.showcase-duo .brand-showcase-card img.tb-brand-img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
@media (max-width: 760px) {
.showcase-duo {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Mega-menu navigation (Business Solutions / Providers / Industries / etc.)
Additive — uses existing nav-item hover pattern, extends to wide panels.
========================================================================== */
.nav-item.has-mega { position: static; }
.mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
width: min(920px, calc(100vw - 48px));
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(28,10,74,.18);
border: 1px solid rgba(28,10,74,.06);
padding: 26px;
opacity: 0;
visibility: hidden;
transition: opacity .18s ease, transform .18s ease;
z-index: 200;
}
.mega.mega-sm { width: min(520px, calc(100vw - 48px)); }
.nav-item.has-mega:hover .mega {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px 28px;
}
.mega-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mega-grid-industries { grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
.mega-col { display: flex; flex-direction: column; gap: 4px; }
.mega-head {
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted-dark, #6B6185);
padding: 4px 10px 8px;
border-bottom: 1px solid rgba(28,10,74,.08);
margin-bottom: 4px;
}
.mega a {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 10px;
border-radius: 10px;
text-decoration: none;
color: var(--navy, #1C0A4A);
transition: background .15s ease;
line-height: 1.3;
}
.mega a:hover { background: var(--ice, #F4F1FA); }
.mega a strong {
display: block;
font-size: 14.5px;
font-weight: 600;
}
.mega a em {
display: block;
font-style: normal;
font-size: 12px;
color: var(--muted-dark, #6B6185);
margin-top: 1px;
}
.mega-ico {
width: 30px; height: 30px;
border-radius: 8px;
flex-shrink: 0;
margin-top: 1px;
opacity: .9;
}
/* Industries / Use Cases — simple link lists, no icons */
.mega-grid-industries a {
font-size: 14px;
font-weight: 500;
padding: 8px 10px;
}
@media (max-width: 1024px) {
/* Mega menus collapse — mobile uses the existing burger menu instead */
.mega { display: none; }
}
/* ==========================================================================
Mobile menu drawer
========================================================================== */
.mobile-menu {
position: fixed;
top: 0; right: 0;
width: min(320px, 85vw);
height: 100vh;
background: var(--navy-deep, #110730);
z-index: 1000;
padding: 80px 24px 32px;
overflow-y: auto;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: -12px 0 40px rgba(0,0,0,.3);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
color: rgba(255,255,255,.9);
text-decoration: none;
font-size: 16px;
font-weight: 600;
padding: 11px 12px;
border-radius: 8px;
transition: background .15s;
}
.mobile-menu a:hover { background: rgba(255,255,255,.08); }
.mobile-menu a.mm-sub {
font-size: 14px;
font-weight: 500;
color: rgba(177,166,255,.85);
padding: 8px 12px 8px 24px;
}
.mobile-menu a.mm-residential {
margin-top: 10px;
background: rgba(184,102,255,.15);
color: #fff;
}
@media (min-width: 1025px) {
.mobile-menu { display: none; }
}
/* M-5: defensive overflow guard on nav container (mega menus use position:absolute
so they escape this; this only catches accidental inline overflow) */
.wrap.nav { overflow: visible; }
header#header { overflow: visible; }
/* mega menus are positioned absolute and must be allowed to overflow the header,
so we intentionally keep overflow visible but rely on the .mega opacity/visibility
pattern (not overflow clipping) to hide them — see C-1 fix above */
/* ==========================================================================
Solution page components (software-development, automation, etc.)
========================================================================== */
/* Services grid (8-card grid) */
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.scard { background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 4px 20px rgba(28,10,74,.06); border: 1px solid rgba(28,10,74,.06); transition: transform .2s, box-shadow .2s; }
.scard:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(28,10,74,.1); }
.sc-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; }
.sc-ico svg { width: 22px; height: 22px; }
.scard h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.scard p { font-size: 13.5px; color: var(--muted-dark, #6B6185); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .sgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sgrid { grid-template-columns: 1fr; } }
/* Technology stack grid */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.tech-col { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 10px rgba(28,10,74,.05); border: 1px solid rgba(28,10,74,.05); }
.tech-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, #8B5CF6); margin: 0 0 8px; }
.tech-col p { font-size: 14px; color: var(--muted-dark, #6B6185); line-height: 1.5; margin: 0; }
@media (max-width: 760px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tech-grid { grid-template-columns: 1fr; } }
/* Process steps */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.pstep { background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 4px 16px rgba(28,10,74,.05); border: 1px solid rgba(28,10,74,.06); }
.pnum { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 12px; }
.pstep h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.pstep p { font-size: 13.5px; color: var(--muted-dark, #6B6185); line-height: 1.55; margin: 0; }
@media (max-width: 760px) { .process-grid { grid-template-columns: 1fr; } }
/* Stat cluster (side panel) */
.stat-cluster { display: flex; flex-direction: column; gap: 16px; }
.scluster-item { background: var(--navy-deep, #110730); border-radius: 14px; padding: 22px 24px; }
.sci-num { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 6px; }
.sci-lbl { font-size: 13px; color: var(--muted, #8B82A8); }
/* ==========================================================================
Homepage v2 — sector cards, why grid, industry tags, stats strip
========================================================================== */
/* Hero sector cards (replace old SVG network graph) */
.hero-sectors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.hs-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: all .2s; animation: fadeUp .5s ease both; }
.hs-card:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.hs-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.hs-ico svg { width: 22px; height: 22px; }
.hs-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.8); text-align: center; line-height: 1.25; letter-spacing: .02em; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .hero-sectors { grid-template-columns: repeat(3, 1fr); } }
/* Hero stats strip */
.hero-stats-strip { display: flex; gap: 2px; border-radius: 12px; overflow: hidden; }
.hss { flex: 1; background: rgba(255,255,255,.05); padding: 14px 12px; text-align: center; border: 1px solid rgba(255,255,255,.06); }
.hss-n { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hss-l { display: block; font-size: 10.5px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 2px; }
/* Why Telebridge grid */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.why-card { background: #fff; border-radius: 16px; padding: 32px 26px; box-shadow: 0 4px 20px rgba(28,10,74,.06); border: 1px solid rgba(28,10,74,.06); transition: transform .2s, box-shadow .2s; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(28,10,74,.1); }
.wc-num { font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 14px; }
.why-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.why-card p { font-size: 14px; color: var(--muted-dark, #6B6185); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }
/* Industry tags */
.industry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ind-tag { display: inline-block; padding: 8px 16px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; }
.ind-tag:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.25); }
/* ==========================================================================
Visual punch — gradients, glows, hover effects, card polish
========================================================================== */
/* Hero sector cards — glassmorphism + glow */
.hs-card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hs-card:hover .hs-ico { transform: scale(1.12); box-shadow: 0 0 24px rgba(45,212,207,.35); }
.hs-ico { transition: transform .25s, box-shadow .25s; }
.hs-lbl { transition: color .2s; }
.hs-card:hover .hs-lbl { color: #fff; }
/* Hero stats strip — gradient border glow */
.hero-stats-strip { background: rgba(255,255,255,.03); border: 1px solid rgba(45,212,207,.15); border-radius: 14px; }
.hss { border-right: 1px solid rgba(45,212,207,.1); }
.hss:last-child { border-right: none; }
/* Why cards — gradient accent line on hover */
.why-card { position: relative; overflow: hidden; }
.why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity .25s; }
.why-card:hover::before { opacity: 1; }
.wc-num { opacity: .15; position: absolute; right: 16px; top: 8px; font-size: 64px; pointer-events: none; }
/* Solution cards — lift + gradient border on hover */
.sol-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; }
.sol-card:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 50px rgba(28,10,74,.14) !important; }
.sol-illu { position: relative; overflow: hidden; }
.sol-illu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.06)); pointer-events: none; }
/* CTA buttons — gradient hover glow */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: var(--grad); opacity: 0; z-index: -1; filter: blur(12px); transition: opacity .3s; }
.btn-primary:hover::after { opacity: .5; }
/* Dashboard mock — enhanced border glow */
.dash-mock { border: 1px solid rgba(45,212,207,.12); box-shadow: 0 20px 60px rgba(28,10,74,.15), 0 0 0 1px rgba(45,212,207,.05); }
.dash-mock:hover { border-color: rgba(45,212,207,.25); box-shadow: 0 24px 70px rgba(28,10,74,.2), 0 0 30px rgba(45,212,207,.08); }
.dash-bar { border-bottom: 1px solid rgba(45,212,207,.08); }
/* Animated bar chart bars — pulse effect */
.bar { position: relative; }
.bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(45,212,207,.6); border-radius: 2px; }
/* Feature list checkmarks — gradient color */
.fi .ck svg { color: #2DD4CF; filter: drop-shadow(0 0 4px rgba(45,212,207,.3)); }
/* Paystone partner section — enhanced card */
.cpartner { border: 1px solid rgba(242,85,77,.1); transition: border-color .3s; }
.cpartner:hover { border-color: rgba(242,85,77,.2); }
/* Plans glance — refined card */
.plans-glance { border: 1px solid rgba(28,10,74,.08); box-shadow: 0 12px 40px rgba(28,10,74,.08); transition: box-shadow .3s, transform .3s; }
.plans-glance:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(28,10,74,.12); }
.plan-row.feat { background: linear-gradient(90deg, rgba(11,95,255,.06), rgba(45,212,207,.06)); border-left: 3px solid #0B5FFF; }
/* Industry tags — glow on hover */
.ind-tag:hover { box-shadow: 0 0 16px rgba(45,212,207,.2); }
/* Testimonial cards — gradient quote mark */
.tcard { position: relative; overflow: hidden; }
.tcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }
.tcard .qmark { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Trustband — enhanced glow */
.trustband { position: relative; }
.trustband::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(11,95,255,.12), transparent 60%), radial-gradient(circle at 70% 50%, rgba(45,212,207,.08), transparent 60%); pointer-events: none; }
/* Partner logo chips — subtle hover */
.lchip { transition: transform .2s, box-shadow .2s; }
.lchip:hover { transform: scale(1.06); box-shadow: 0 4px 16px rgba(28,10,74,.12); }
/* Section headings — gradient underline on eyebrow */
.sec-head .eyebrow { position: relative; }
.sec-head .eyebrow::after { content: ''; display: block; width: 40px; height: 2px; background: currentColor; opacity: .9; margin-top: 8px; border-radius: 1px; }
.sec-head .eyebrow.center::after { margin-left: auto; margin-right: auto; }
/* eyebrow leading-dash removed globally; underline uses currentColor to always match */
.eyebrow::before{content:none !important}
/* Scroll reveal — smoother entrance */
/* Service cards (sgrid) — hover glow */
.scard { position: relative; overflow: hidden; }
.scard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: 0; transition: opacity .25s; }
.scard:hover::before { opacity: 1; }
/* Process step numbers — larger watermark style */
.pstep { position: relative; overflow: hidden; }
/* ==========================================================================
Visual fixes based on live site assessment — June 28, 2026
========================================================================== */
/* Fix 1: Reduce excessive section spacing */
.sec { padding-top: 64px !important; padding-bottom: 64px !important; }
.sec-head { margin-bottom: 28px; }
.sec-head h2 { margin-bottom: 12px; }
/* Fix 2: Fix reveal animation — faster, less dramatic */
.reveal.active { opacity: 1 !important; transform: translateY(0) !important; }
/* Fix 3: Solutions grid — 4 columns to fit 8 cards in 2 clean rows */
.sol-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
@media (max-width: 1100px) { .sol-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 760px) { .sol-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .sol-grid { grid-template-columns: 1fr !important; } }
/* Fix 4: Add visual pop to Why cards */
.why-card { border: 1px solid rgba(139,92,246,.1); background: linear-gradient(160deg, #fff 0%, #faf8ff 100%); }
.why-card:hover { border-color: rgba(139,92,246,.25); }
.why-card h3 { color: var(--navy); }
/* Fix 5: Add color accent to solution cards */
.sol-card { border: 1px solid rgba(28,10,74,.06); }
.sol-card:hover { border-color: rgba(139,92,246,.2); }
.sol-card .body .cat { font-weight: 800; letter-spacing: .06em; }
/* Fix 6: Hero section — tighten spacing */
.hero { padding-bottom: 48px !important; }
.hero .lead { max-width: 560px; }
.hero-proof { margin-top: 20px; }
/* Fix 7: Dashboard mock — add more visual presence */
.dash-mock { border-radius: 16px; overflow: hidden; }
.dash-body { background: linear-gradient(180deg, #0f0825 0%, #160d2e 100%); }
.bars .bar { background: linear-gradient(180deg, #8B5CF6, #0B5FFF) !important; border-radius: 4px 4px 0 0; }
/* Fix 8: Plans glance card — more visual definition */
.plans-glance { border-radius: 18px; padding: 28px 32px; }
.plan-row { border-bottom: 1px solid rgba(28,10,74,.06); }
/* Fix 9: Operational Impact section — tighten */
.km-grid { gap: 16px; }
.km-hero { border-radius: 18px; }
/* Fix 10: Industry tags on dark background — more vibrant */
.industry-tags .ind-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
/* Fix 11: CTA block — add gradient border */
.cta-block { position: relative; }
.cta-block::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--grad); border-radius: 2px; }
/* Fix 12: Ticker spacing */
.ticker { margin: 0; }
/* ==========================================================================
Real photography integration — photo cards, team strip, hero overlay
========================================================================== */
/* Photo card with caption */
.photo-card { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 12px 40px rgba(28,10,74,.12); }
.photo-card img { transition: transform .4s ease; }
.photo-card:hover img { transform: scale(1.03); }
.pc-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(17,7,48,.7)); color: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* Team photo strip */
.team-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
.ts-photo { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; position: relative; }
.ts-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ts-photo:hover img { transform: scale(1.06); }
.ts-photo .ts-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(17,7,48,.65)); color: rgba(255,255,255,.85); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: 0; transition: opacity .3s; }
.ts-photo:hover .ts-label { opacity: 1; }
@media (max-width: 760px) { .team-strip { grid-template-columns: repeat(2, 1fr); } }
/* Hero photo background */
.hero-photo { overflow: hidden; }
.hero-photo img { filter: blur(1px); }
/* ==========================================================================
Shader Hero — WebGL background + staggered content reveal
========================================================================== */
.shader-hero { background: #030014; }
.shader-hero .hero-layout { align-items: center; }
/* Staggered content entrance — starts hidden, JS adds .shader-in */
.shader-h1, .shader-lead, .shader-cta, .shader-proof, .shader-visual {
opacity: 0; transform: translateY(24px);
transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.shader-h1.shader-in, .shader-lead.shader-in, .shader-cta.shader-in,
.shader-proof.shader-in, .shader-visual.shader-in {
opacity: 1; transform: translateY(0);
}
/* Hero H1 on shader — larger, more impactful */
.shader-hero h1 { font-size: 62px; line-height: 1.05; letter-spacing: -0.02em; }
@media (max-width: 900px) { .shader-hero h1 { font-size: 42px; } }
@media (max-width: 520px) { .shader-hero h1 { font-size: 32px; } }
/* Sector cards on shader — glassmorphism enhanced */
.shader-hero .hs-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.shader-hero .hs-card:hover { background: rgba(255,255,255,.15); border-color: rgba(139,92,246,.4); box-shadow: 0 8px 32px rgba(139,92,246,.15); }
/* Stats strip on shader */
.shader-hero .hero-stats-strip { background: rgba(255,255,255,.04); border: 1px solid rgba(139,92,246,.15); }
.shader-hero .hss { border-color: rgba(139,92,246,.1); }
/* CTA buttons on shader — glow effect */
.shader-hero .btn-primary { box-shadow: 0 0 20px rgba(139,92,246,.3), 0 0 60px rgba(139,92,246,.1); }
.shader-hero .btn-primary:hover { box-shadow: 0 0 30px rgba(139,92,246,.5), 0 0 80px rgba(139,92,246,.15); }
/* ==========================================================================
Cinematic Hero — intro cards, scroll hint, logo reveal
========================================================================== */
/* Intro service cards — translucent glassmorphism */
.intro-card {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 18px 22px; border-radius: 14px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
text-decoration: none; color: rgba(255,255,255,.8);
transition: all .3s ease; min-width: 100px;
}
.intro-card:hover {
background: rgba(139,92,246,.15); border-color: rgba(139,92,246,.4);
transform: translateY(-4px); box-shadow: 0 12px 40px rgba(139,92,246,.2);
color: #fff;
}
.ic-ico { display: flex; align-items: center; justify-content: center; }
.ic-ico svg { width: 24px; height: 24px; color: #8B5CF6; transition: color .3s; }
.intro-card:hover .ic-ico svg { color: #A78BFA; }
.ic-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* Scroll dot animation */
@keyframes scrollDot { 0%,100% { top: 6px; opacity: .4; } 50% { top: 22px; opacity: 1; } }
/* Main content start — gradient transition from black to navy */
.main-content-start { position: relative; }
.main-content-start::before {
content: ''; position: absolute; top: -120px; left: 0; right: 0; height: 120px;
background: linear-gradient(180deg, transparent, var(--navy-deep, #110730));
pointer-events: none; z-index: 5;
}
/* Override for cinematic hero — no old mesh/gridlines */
.shader-hero .mesh, .shader-hero .gridlines { display: none; }
@media (max-width: 600px) {
.intro-card { min-width: 80px; padding: 14px 16px; }
.ic-lbl { font-size: 11px; }
#logo-reveal div:first-of-type { font-size: 36px !important; }
}
/* Logo glow pulse animation */
@keyframes logoGlow {
0%,100% { filter: drop-shadow(0 0 30px rgba(139,92,246,.5)) brightness(1.1); }
50% { filter: drop-shadow(0 0 60px rgba(139,92,246,.8)) drop-shadow(0 0 100px rgba(45,212,207,.3)) brightness(1.25); }
}
.logo-glow-active { animation: logoGlow 3s ease-in-out infinite; }
/* Hero logo on dark bg — no blend needed, transparent PNG */
/* ==========================================================================
Hero typography — premium branding
========================================================================== */
.hero-tagline {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 16px; font-weight: 300; letter-spacing: .35em;
text-transform: uppercase; color: rgba(255,255,255,.45);
position: relative; display: inline-block; padding: 0 24px;
}
.hero-tagline::before, .hero-tagline::after {
content: ''; position: absolute; top: 50%; width: 40px; height: 1px;
background: linear-gradient(90deg, rgba(139,92,246,.4), transparent);
}
.hero-tagline::before { right: 100%; }
.hero-tagline::after { left: 100%; background: linear-gradient(270deg, rgba(139,92,246,.4), transparent); }
/* Hero stat numbers */
.hero-stat-num {
font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 800;
background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 40%, #2DD4CF 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1.1;
}
.hero-stat-lbl {
font-size: 10px; color: rgba(255,255,255,.35);
text-transform: uppercase; letter-spacing: .1em; margin-top: 4px;
}
/* Unicorn Studio layer sizing */
#unicorn-layer { pointer-events: none; }
#unicorn-layer canvas { pointer-events: none; }
/* ==========================================================================
HEADER ENHANCEMENT — synced with dark hero aesthetic
========================================================================== */
/* Header on hero — fully transparent until scroll */
header {
background: transparent !important;
backdrop-filter: none !important;
border-bottom: 1px solid transparent !important;
transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease !important;
}
header.scrolled {
border-bottom: 1px solid rgba(139,92,246,.12) !important;
}
/* Nav links — subtle glow on hover */
.nav-links > a, .nav-item > a {
color: rgba(255,255,255,.6) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
letter-spacing: .03em !important;
transition: color .25s ease, text-shadow .25s ease !important;
}
.nav-links > a:hover, .nav-item:hover > a {
color: #fff !important;
text-shadow: 0 0 20px rgba(139,92,246,.4) !important;
}
.nav-links > a::after, .nav-item > a::after {
background: linear-gradient(90deg, #8B5CF6, #2DD4CF) !important;
height: 2px !important;
}
/* Residential pill — glassmorphism */
.nav-cta-pill {
background: rgba(139,92,246,.15) !important;
border: 1px solid rgba(139,92,246,.3) !important;
color: #A78BFA !important;
backdrop-filter: blur(8px) !important;
transition: all .25s ease !important;
}
.nav-cta-pill:hover {
background: rgba(139,92,246,.3) !important;
border-color: rgba(139,92,246,.5) !important;
color: #fff !important;
box-shadow: 0 0 20px rgba(139,92,246,.2) !important;
}
/* Get In Touch CTA — glow pulse */
.nav-cta .btn-primary {
background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
box-shadow: 0 0 20px rgba(139,92,246,.3), 0 4px 16px rgba(0,0,0,.3) !important;
font-size: 13px !important;
padding: 10px 22px !important;
border-radius: 10px !important;
}
.nav-cta .btn-primary:hover {
box-shadow: 0 0 30px rgba(139,92,246,.5), 0 8px 24px rgba(0,0,0,.3) !important;
transform: translateY(-1px) !important;
}
/* Logo — subtle glow */
.logo-mark {
filter: drop-shadow(0 0 12px rgba(139,92,246,.5)) !important;
transition: filter .3s ease !important;
}
.logo:hover .logo-mark {
filter: drop-shadow(0 0 20px rgba(139,92,246,.7)) !important;
}
.logo-name {
letter-spacing: .06em !important;
font-weight: 800 !important;
}
/* Mega menu — dark glass */
.mega {
background: rgba(3,0,20,.95) !important;
backdrop-filter: blur(24px) !important;
border: 1px solid rgba(139,92,246,.1) !important;
box-shadow: 0 24px 64px rgba(0,0,0,.5) !important;
}
.mega-head {
color: #8B5CF6 !important;
}
.mega a:hover {
background: rgba(139,92,246,.08) !important;
}
/* ==========================================================================
HERO CONTENT — better space usage, card layout, KPI display
========================================================================== */
/* Service cards — wider, more visual */
.intro-card {
min-width: 120px !important;
padding: 20px 24px !important;
border-radius: 16px !important;
background: rgba(139,92,246,.06) !important;
border: 1px solid rgba(139,92,246,.15) !important;
}
.intro-card:hover {
background: rgba(139,92,246,.14) !important;
border-color: rgba(139,92,246,.35) !important;
box-shadow: 0 8px 32px rgba(139,92,246,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.ic-ico svg {
width: 28px !important; height: 28px !important;
filter: drop-shadow(0 0 8px rgba(139,92,246,.4));
transition: filter .3s ease, transform .3s ease !important;
}
.intro-card:hover .ic-ico svg {
filter: drop-shadow(0 0 14px rgba(139,92,246,.6)) !important;
transform: scale(1.15) !important;
}
.ic-lbl {
font-size: 11.5px !important;
letter-spacing: .08em !important;
margin-top: 4px !important;
}
/* Stats — larger, more prominent */
.hero-stat-num {
font-size: 34px !important;
filter: drop-shadow(0 0 12px rgba(139,92,246,.3));
}
/* ==========================================================================
STAGGERED TEXT REVEAL — word-by-word drop animation
========================================================================== */
/* Each .word-drop starts hidden, JS adds .word-in sequentially */
.word-drop {
display: inline-block;
opacity: 0;
transform: translateY(-40px);
transition: opacity 1s cubic-bezier(.25,.46,.45,.94), transform 1.2s cubic-bezier(.22,1,.36,1);
}
.word-drop.word-in {
opacity: 1;
transform: translateY(0);
}
/* Logo glow pulse — enhanced */
@keyframes logoGlow {
0%,100% { filter: drop-shadow(0 0 30px rgba(139,92,246,.4)); }
50% { filter: drop-shadow(0 0 50px rgba(139,92,246,.7)) drop-shadow(0 0 80px rgba(45,212,207,.2)); }
}
.logo-glow-active { animation: logoGlow 3.5s ease-in-out infinite; }
/* Tagline decorative lines — wider */
.hero-tagline::before, .hero-tagline::after { width: 60px !important; }
/* ==========================================================================
FLOATING HEADER — Lamp light beam entrance + glass pill design
========================================================================== */
/* Floating pill shape */
.hdr-floating {
position: fixed !important; top: 16px !important; left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
width: calc(100% - 48px) !important; max-width: 1320px !important;
border-radius: 16px !important;
background: rgba(8,2,28,.55) !important;
backdrop-filter: blur(24px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
border: 1px solid rgba(139,92,246,.1) !important;
box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
padding: 0 !important; z-index: 1000 !important;
overflow: visible !important;
}
.hdr-floating.scrolled {
top: 10px !important;
}
/* Nav inside floating header */
.hdr-floating .nav {
padding: 12px 28px !important;
}
/* Header font — DM Sans */
.hdr-floating .nav-links > a,
.hdr-floating .nav-item > a {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: .02em !important;
color: rgba(255,255,255,.55) !important;
}
.hdr-floating .nav-links > a:hover,
.hdr-floating .nav-item:hover > a {
color: rgba(255,255,255,.95) !important;
text-shadow: 0 0 16px rgba(139,92,246,.35) !important;
}
/* Logo in floating header */
.hdr-floating .logo-name {
font-family: 'DM Sans', sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
}
/* CTA in floating header */
.hdr-floating .nav-cta .btn-primary {
font-family: 'DM Sans', sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
padding: 9px 20px !important;
border-radius: 10px !important;
letter-spacing: .03em !important;
}
/* Residential pill */
.hdr-floating .nav-cta-pill {
font-family: 'DM Sans', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 8px !important;
padding: 6px 14px !important;
}
/* ── LAMP LIGHT BEAM ANIMATION ── */
.hdr-lamp {
position: absolute; left: 50%; top: 0;
transform: translateX(-50%);
width: 0; height: 100%;
pointer-events: none; z-index: 0;
}
/* Conic gradient beams — left and right */
.lamp-beam {
position: absolute; top: 50%; width: 0; height: 2px;
opacity: 0;
}
.lamp-beam-l {
right: 50%;
background: linear-gradient(270deg, rgba(139,92,246,.6), rgba(45,212,207,.2), transparent);
transform-origin: right center;
}
.lamp-beam-r {
left: 50%;
background: linear-gradient(90deg, rgba(139,92,246,.6), rgba(45,212,207,.2), transparent);
transform-origin: left center;
}
/* Thin center bar */
.lamp-bar {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.8), #2DD4CF, rgba(139,92,246,.8), transparent);
opacity: 0;
}
/* Center glow blob */
.lamp-glow {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 0; height: 8px;
background: radial-gradient(ellipse, rgba(139,92,246,.6), transparent);
border-radius: 50%;
opacity: 0; filter: blur(6px);
}
/* ── ANIMATION KEYFRAMES ── */
/* Phase 1: Light propagation (0.3s delay, 0.8s duration) */
@keyframes beamExpand {
0% { width: 0; opacity: 0; }
20% { opacity: 0.6; }
100% { width: 50vw; opacity: 0.8; }
}
@keyframes barExpand {
0% { width: 0; opacity: 0; }
30% { opacity: 1; }
100% { width: min(90%, 1200px); opacity: 0.6; }
}
@keyframes glowExpand {
0% { width: 0; opacity: 0; }
40% { opacity: 0.8; }
100% { width: 200px; opacity: 0.4; }
}
/* Phase 2: Nav items materialize (starts after light completes ~1.1s) */
@keyframes navItemDrop {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ACTIVE STATE — triggered by JS */
.hdr-floating.lamp-active .lamp-beam-l,
.hdr-floating.lamp-active .lamp-beam-r {
animation: beamExpand 0.8s ease-in-out 0.3s both;
}
.hdr-floating.lamp-active .lamp-bar {
animation: barExpand 0.8s ease-in-out 0.3s both;
}
.hdr-floating.lamp-active .lamp-glow {
animation: glowExpand 0.8s ease-in-out 0.3s both;
}
/* Nav items — initially hidden, revealed sequentially after light */
.hdr-anim-item {
opacity: 0;
transform: translateY(-15px);
}
.hdr-floating.lamp-done .hdr-anim-item {
animation: navItemDrop 1.0s cubic-bezier(.25,.46,.45,.94) both;
}
/* Stagger each nav item */
.hdr-floating.lamp-done .hdr-anim-item:nth-child(1) { animation-delay: 0s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(2) { animation-delay: 0.08s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(3) { animation-delay: 0.16s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(4) { animation-delay: 0.24s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(5) { animation-delay: 0.32s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(6) { animation-delay: 0.40s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(7) { animation-delay: 0.48s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(8) { animation-delay: 0.56s; }
.hdr-floating.lamp-done .hdr-anim-item:nth-child(9) { animation-delay: 0.64s; }
/* Logo is special — always visible but faded until lamp done */
.hdr-floating .logo .hdr-anim-item {
opacity: 0.3; transform: translateY(0);
}
.hdr-floating.lamp-done .logo .hdr-anim-item {
animation: none;
opacity: 1; transition: opacity 0.6s ease;
}
/* After all animations settle — ensure items stay visible */
.hdr-floating.lamp-settled .hdr-anim-item {
opacity: 1 !important; transform: translateY(0) !important;
animation: none !important;
}
/* Header bottom glow line after lamp animation */
.hdr-floating.lamp-done::after {
content: '';
position: absolute; bottom: -1px; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.25), rgba(45,212,207,.2), rgba(139,92,246,.25), transparent);
animation: barExpand .6s ease-out both;
}
/* ── RESPONSIVE — mobile floating header ── */
@media (max-width: 900px) {
.hdr-floating {
width: calc(100% - 24px) !important;
top: 8px !important;
border-radius: 12px !important;
}
.hdr-floating .nav { padding: 10px 16px !important; }
.hdr-lamp { display: none; }
.hdr-anim-item { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* ==========================================================================
ACETERNITY LAMP HEADER — conic gradient beams + floating nav pills
Ported from React/Framer Motion to vanilla CSS animations
========================================================================== */
/* Header shell — transparent, no background */
.hdr-lamp-header {
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
width: 100% !important; max-width: 100% !important;
left: 0 !important; right: 0 !important;
transform: none !important;
top: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.hdr-lamp-header.scrolled {
border-bottom: 1px solid rgba(139,92,246,.08) !important;
}
/* ── LAMP CONTAINER — sits behind the nav ── */
.lamp-container {
position: absolute; top: 0; left: 0; right: 0;
height: 80px; overflow: hidden; z-index: 0;
pointer-events: none;
}
.lamp-inner {
position: relative; width: 100%; height: 100%;
display: flex; align-items: flex-end; justify-content: center;
transform: scaleY(1.5);
transform-origin: bottom center;
}
/* Conic gradient beams — LEFT */
.lamp-conic-l {
position: absolute; right: 50%; bottom: 0;
width: 0; height: 140px;
background: conic-gradient(from 70deg at center top, #06b6d4, transparent, transparent);
opacity: 0;
animation: lampConicExpand 0.8s ease-in-out 0.3s forwards;
}
/* Conic gradient beams — RIGHT */
.lamp-conic-r {
position: absolute; left: 50%; bottom: 0;
width: 0; height: 140px;
background: conic-gradient(from 290deg at center top, transparent, transparent, #06b6d4);
opacity: 0;
animation: lampConicExpand 0.8s ease-in-out 0.3s forwards;
}
/* Blur background behind beams */
.lamp-blur-bg {
position: absolute; bottom: -10px; left: 0; right: 0;
height: 60px; background: rgba(2,6,23,1);
filter: blur(20px); z-index: 10;
}
/* Blur overlay */
.lamp-blur-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
height: 60px; opacity: .1;
backdrop-filter: blur(8px); z-index: 20;
}
/* Large glow orb */
.lamp-glow-orb {
position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
width: 0; height: 80px;
background: #06b6d4; opacity: 0;
border-radius: 50%; filter: blur(40px); z-index: 15;
animation: lampGlowExpand 0.8s ease-in-out 0.3s forwards;
}
/* Small bright glow */
.lamp-glow-orb-sm {
position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
width: 0; height: 60px;
background: #22d3ee; opacity: 0;
border-radius: 50%; filter: blur(24px); z-index: 25;
animation: lampGlowSmExpand 0.8s ease-in-out 0.3s forwards;
}
/* Cyan horizontal bar */
.lamp-cyan-bar {
position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
width: 0; height: 2px;
background: linear-gradient(90deg, transparent, #22d3ee, #8B5CF6, #22d3ee, transparent);
z-index: 30; opacity: 0;
animation: lampBarExpand 0.8s ease-in-out 0.3s forwards;
}
/* Dark cap above the lamp */
.lamp-dark-cap {
position: absolute; top: -40px; left: 0; right: 0;
height: 50px; background: rgba(2,6,23,1); z-index: 5;
}
/* ── LAMP KEYFRAMES ── */
@keyframes lampConicExpand {
0% { width: 0; opacity: 0; }
30% { opacity: 0.5; }
100% { width: 30rem; opacity: 0.7; }
}
@keyframes lampGlowExpand {
0% { width: 0; opacity: 0; }
50% { opacity: 0.5; }
100% { width: 28rem; opacity: 0.4; }
}
@keyframes lampGlowSmExpand {
0% { width: 0; opacity: 0; }
50% { opacity: 0.7; }
100% { width: 14rem; opacity: 0.5; }
}
@keyframes lampBarExpand {
0% { width: 0; opacity: 0; }
40% { opacity: 0.8; }
100% { width: min(70%, 900px); opacity: 1; }
}
/* ── FLOATING NAV PILLS ── */
.hdr-nav-content {
position: relative; z-index: 40;
padding: 14px 28px !important;
}
/* Each nav item is its own floating glass pill */
.hdr-pill {
opacity: 0;
transform: translateY(-25px);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 6px 14px !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background .25s, border-color .25s, box-shadow .25s;
margin: 0 2px;
}
.hdr-pill:hover {
background: rgba(139,92,246,.12);
border-color: rgba(139,92,246,.3);
box-shadow: 0 4px 20px rgba(139,92,246,.15);
}
/* Logo pill — special treatment */
.hdr-pill-logo {
background: transparent;
border-color: transparent;
padding: 4px 16px 4px 8px !important;
gap: 10px;
}
.hdr-pill-logo:hover {
background: rgba(139,92,246,.06);
border-color: rgba(139,92,246,.15);
}
/* ── PILL ENTRANCE — staggered drop after lamp completes (1.1s) ── */
@keyframes pillDrop {
0% { opacity: 0; transform: translateY(-25px); }
100% { opacity: 1; transform: translateY(0); }
}
.hdr-lamp-header.lamp-done .hdr-pill {
animation: pillDrop 1.0s cubic-bezier(.25,.46,.45,.94) both;
}
/* Stagger: 0.12s between each pill */
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(1) { animation-delay: 0s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(2) { animation-delay: 0.12s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(3) { animation-delay: 0.24s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(4) { animation-delay: 0.36s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(5) { animation-delay: 0.48s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(6) { animation-delay: 0.60s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(7) { animation-delay: 0.72s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(8) { animation-delay: 0.84s; }
.hdr-lamp-header.lamp-done .hdr-pill:nth-child(9) { animation-delay: 0.96s; }
/* Logo drops first, before other pills */
.hdr-lamp-header.lamp-done .hdr-pill-logo {
animation-delay: 0s !important;
}
/* Settled state — everything visible */
.hdr-lamp-header.lamp-settled .hdr-pill {
opacity: 1 !important; transform: translateY(0) !important;
animation: none !important;
}
.hdr-lamp-header.lamp-settled .lamp-container {
opacity: .3;
transition: opacity 2s ease;
}
/* ── NAV TEXT STYLING — lighter, more visible ── */
.hdr-lamp-header .nav-links > a,
.hdr-lamp-header .nav-item > a {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.75) !important;
letter-spacing: .02em !important;
}
.hdr-lamp-header .nav-links > a:hover,
.hdr-lamp-header .nav-item:hover > a {
color: #fff !important;
text-shadow: 0 0 12px rgba(34,211,238,.3) !important;
}
/* Logo text */
.hdr-lamp-header .logo-name {
font-family: 'DM Sans', sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
color: #fff !important;
}
/* Logo mark glow — synced with lamp cyan */
.hdr-lamp-header .logo-mark {
filter: drop-shadow(0 0 10px rgba(34,211,238,.4)) !important;
}
/* CTA button — matches lamp glow */
.hdr-lamp-header .nav-cta .btn-primary {
font-family: 'DM Sans', sans-serif !important;
background: linear-gradient(135deg, #06b6d4, #8B5CF6) !important;
box-shadow: 0 0 16px rgba(6,182,212,.3) !important;
font-size: 12.5px !important; font-weight: 600 !important;
padding: 8px 18px !important; border-radius: 10px !important;
}
.hdr-lamp-header .nav-cta .btn-primary:hover {
box-shadow: 0 0 24px rgba(6,182,212,.5), 0 0 48px rgba(139,92,246,.15) !important;
}
/* Residential pill */
.hdr-lamp-header .nav-cta-pill {
font-family: 'DM Sans', sans-serif !important;
font-size: 12px !important; font-weight: 600 !important;
color: #22d3ee !important;
border-color: rgba(34,211,238,.25) !important;
background: rgba(34,211,238,.06) !important;
}
.hdr-lamp-header .nav-cta-pill:hover {
background: rgba(34,211,238,.15) !important;
border-color: rgba(34,211,238,.4) !important;
color: #fff !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.lamp-container { display: none; }
.hdr-pill { opacity: 1 !important; transform: none !important; animation: none !important;
background: transparent; border-color: transparent; }
}
/* ==========================================================================
LAMP FIX — Repositioned ABOVE header, casting light DOWN onto pills
+ Spotlight mouse-tracking glow on nav pills
========================================================================== */
/* Override lamp container — extends ABOVE the header */
.lamp-container {
position: absolute !important;
top: -60px !important; /* Extends above the header */
left: 0; right: 0;
height: 120px !important; /* Taller to show the light cone */
overflow: visible !important; /* Allow light to extend beyond */
z-index: 0;
pointer-events: none;
}
/* Scale inner to create the V-shape light cone pointing DOWN */
.lamp-inner {
transform: scaleY(1) !important;
transform-origin: top center !important;
height: 100% !important;
display: flex !important;
align-items: flex-start !important; /* Light originates from top */
justify-content: center !important;
}
/* Left conic beam — originates from top center, fans LEFT-DOWN */
.lamp-conic-l {
position: absolute !important;
top: 0 !important; right: 50% !important; bottom: auto !important;
height: 120px !important;
background: conic-gradient(from 70deg at center top, #06b6d4, transparent 40%, transparent) !important;
}
/* Right conic beam — originates from top center, fans RIGHT-DOWN */
.lamp-conic-r {
position: absolute !important;
top: 0 !important; left: 50% !important; bottom: auto !important;
height: 120px !important;
background: conic-gradient(from 290deg at center top, transparent 60%, transparent, #06b6d4) !important;
}
/* Glow orbs — positioned at top center */
.lamp-glow-orb {
bottom: auto !important; top: -10px !important;
}
.lamp-glow-orb-sm {
bottom: auto !important; top: 0 !important;
}
/* Cyan bar — at bottom of lamp (where it meets the nav) */
.lamp-cyan-bar {
bottom: 0 !important; top: auto !important;
}
/* Dark cap and blur bg — hide them, we don't need masking for header use */
.lamp-dark-cap { display: none !important; }
.lamp-blur-bg { display: none !important; }
.lamp-blur-overlay { display: none !important; }
/* Downward light cast — a gradient that illuminates the nav pills from above */
.lamp-container::after {
content: '';
position: absolute;
bottom: -40px; left: 50%; transform: translateX(-50%);
width: 70%; height: 50px;
background: radial-gradient(ellipse at center top, rgba(6,182,212,.12), transparent 70%);
pointer-events: none;
animation: lampDownCast 0.8s ease-in-out 0.3s both;
}
@keyframes lampDownCast {
0% { opacity: 0; width: 20%; }
100% { opacity: 1; width: 70%; }
}
/* ── SPOTLIGHT BUTTON EFFECT — mouse-tracking radial glow on pills ── */
.hdr-pill {
position: relative !important;
overflow: hidden !important;
}
.hdr-pill .pill-spotlight {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease-out;
background: radial-gradient(
circle at var(--px, 50%) var(--py, 50%),
rgba(120,180,255,.35) 0%,
rgba(80,140,255,.18) 22%,
rgba(0,0,0,0) 55%
);
border-radius: inherit;
}
.hdr-pill:hover .pill-spotlight {
opacity: 1;
}
/* Pill border glow on hover — synced with spotlight */
.hdr-pill:hover {
border-color: rgba(120,180,255,.4) !important;
box-shadow: 0 4px 20px rgba(6,182,212,.15), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* ==========================================================================
HOTFIX — Logo visibility + lamp positioning + pill overflow
========================================================================== */
/* Logo pill must ALWAYS be visible — never hidden by animation */
.hdr-pill-logo {
opacity: 1 !important;
transform: translateY(0) !important;
animation: none !important;
overflow: visible !important;
}
/* Logo mark sizing */
.hdr-pill-logo .logo-mark {
width: 32px !important; height: 32px !important;
object-fit: contain !important;
}
/* Lamp container — sits ABOVE header but doesn't break layout */
.lamp-container {
top: -50px !important;
height: 100px !important;
opacity: 0;
animation: lampFadeIn 0.5s ease 0.2s forwards;
}
@keyframes lampFadeIn {
to { opacity: 1; }
}
/* Header needs enough top padding to show the lamp above */
.hdr-lamp-header {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Ensure nav content sits above the lamp */
.hdr-nav-content {
position: relative !important;
z-index: 50 !important;
}
/* Fix pill overflow — allow spotlight but don't clip content */
.hdr-pill .pill-spotlight {
border-radius: 12px;
}
/* ==========================================================================
LAMP REDO — Light bar ABOVE pills, Telebridge brand colors
========================================================================== */
/* Reset lamp container — positioned ABOVE the nav row */
.lamp-container {
position: absolute !important;
top: -8px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 80% !important;
max-width: 1000px !important;
height: 6px !important;
overflow: visible !important;
z-index: 60 !important;
pointer-events: none !important;
opacity: 0;
animation: lampFadeIn 0.5s ease 0.2s forwards !important;
}
/* Hide the inner container and all conic elements — replacing with simpler approach */
.lamp-inner { display: none !important; }
/* The light bar itself — a visible glowing line ABOVE the pills */
.lamp-container::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 3px !important;
background: linear-gradient(90deg,
transparent,
rgba(139,92,246,.4) 15%,
rgba(139,92,246,.8) 35%,
#A78BFA 50%,
rgba(139,92,246,.8) 65%,
rgba(139,92,246,.4) 85%,
transparent
) !important;
border-radius: 2px !important;
box-shadow:
0 0 8px rgba(139,92,246,.6),
0 0 20px rgba(139,92,246,.3),
0 0 40px rgba(139,92,246,.15) !important;
animation: lightBarGrow 0.8s ease-in-out 0.3s forwards !important;
}
/* Downward light cast — cone of light falling onto pills */
.lamp-container::after {
content: '' !important;
position: absolute !important;
top: 3px !important; left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 70px !important;
background: linear-gradient(180deg,
rgba(139,92,246,.15) 0%,
rgba(139,92,246,.06) 40%,
transparent 100%
) !important;
filter: blur(8px) !important;
animation: lightCastGrow 0.8s ease-in-out 0.5s forwards !important;
pointer-events: none !important;
}
@keyframes lightBarGrow {
0% { width: 0; }
100% { width: 100%; }
}
@keyframes lightCastGrow {
0% { width: 0; opacity: 0; }
100% { width: 90%; opacity: 1; }
}
/* Center glow bloom at the bar midpoint */
.hdr-lamp-header .hdr-nav-content::before {
content: '';
position: absolute;
top: -14px; left: 50%; transform: translateX(-50%);
width: 0; height: 30px;
background: radial-gradient(ellipse at center, rgba(139,92,246,.25), transparent 70%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
animation: glowBloom 0.8s ease-in-out 0.4s forwards;
}
@keyframes glowBloom {
0% { width: 0; opacity: 0; }
100% { width: 300px; opacity: 1; }
}
/* ── PILL REFINEMENTS — lit from above ── */
/* Each pill gets a subtle top highlight — simulates light hitting it */
.hdr-lamp-header.lamp-settled .hdr-pill {
box-shadow: inset 0 1px 0 rgba(139,92,246,.12), 0 2px 8px rgba(0,0,0,.2) !important;
}
.hdr-lamp-header.lamp-settled .hdr-pill:hover {
box-shadow:
inset 0 1px 0 rgba(139,92,246,.2),
0 4px 20px rgba(139,92,246,.15),
0 0 12px rgba(139,92,246,.08) !important;
border-color: rgba(139,92,246,.35) !important;
}
/* Spotlight beam — use brand purple instead of blue */
.hdr-pill .pill-spotlight {
background: radial-gradient(
circle at var(--px, 50%) var(--py, 50%),
rgba(167,139,250,.3) 0%,
rgba(139,92,246,.15) 25%,
rgba(0,0,0,0) 55%
) !important;
}
/* Lamp bar on settled — remains as subtle ambient glow */
.hdr-lamp-header.lamp-settled .lamp-container::before {
box-shadow:
0 0 6px rgba(139,92,246,.3),
0 0 12px rgba(139,92,246,.12) !important;
}
.hdr-lamp-header.lamp-settled .lamp-container::after {
opacity: .5 !important;
}
/* Header bottom border — subtle gradient line */
.hdr-lamp-header::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important; left: 10% !important; right: 10% !important;
height: 1px !important;
background: linear-gradient(90deg,
transparent,
rgba(139,92,246,.15) 30%,
rgba(139,92,246,.08) 50%,
rgba(139,92,246,.15) 70%,
transparent
) !important;
}
/* ==========================================================================
LAMP V3 — Correct Aceternity implementation, miniaturized for header
Light bar at TOP of header, conic gradients fan DOWN onto pills
Brand purple (#8B5CF6) instead of cyan
========================================================================== */
/* Override all previous lamp positioning */
.lamp-container {
position: absolute !important;
top: 0 !important;
left: 0 !important; right: 0 !important;
width: 100% !important; max-width: none !important;
height: 80px !important;
overflow: hidden !important;
z-index: 0 !important;
pointer-events: none !important;
transform: none !important;
opacity: 1 !important;
animation: none !important;
}
/* Show the inner container again */
.lamp-inner {
display: flex !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
align-items: flex-start !important;
justify-content: center !important;
transform: scaleY(1.2) !important;
transform-origin: top center !important;
}
/* Left conic gradient — fans from center-top to the LEFT */
.lamp-conic-l {
position: absolute !important;
top: 0 !important; right: 50% !important;
bottom: auto !important; left: auto !important;
width: 0 !important;
height: 80px !important;
background: conic-gradient(from 70deg at 50% 0%, #8B5CF6, transparent 40%, transparent) !important;
opacity: 0 !important;
animation: lampConicExpand 0.8s ease-in-out 0.3s forwards !important;
}
/* Right conic gradient — fans from center-top to the RIGHT */
.lamp-conic-r {
position: absolute !important;
top: 0 !important; left: 50% !important;
bottom: auto !important; right: auto !important;
width: 0 !important;
height: 80px !important;
background: conic-gradient(from 290deg at 50% 0%, transparent 60%, transparent, #8B5CF6) !important;
opacity: 0 !important;
animation: lampConicExpand 0.8s ease-in-out 0.3s forwards !important;
}
/* Masking divs on the conic gradients — clip to create clean light cone */
.lamp-conic-l::before {
content: '';
position: absolute; bottom: 0; left: 0;
width: 100%; height: 60%;
background: rgb(2,6,23);
mask-image: linear-gradient(to top, white, transparent);
-webkit-mask-image: linear-gradient(to top, white, transparent);
z-index: 2;
}
.lamp-conic-l::after {
content: '';
position: absolute; bottom: 0; left: 0;
width: 30%; height: 100%;
background: rgb(2,6,23);
mask-image: linear-gradient(to right, white, transparent);
-webkit-mask-image: linear-gradient(to right, white, transparent);
z-index: 2;
}
.lamp-conic-r::before {
content: '';
position: absolute; bottom: 0; right: 0;
width: 100%; height: 60%;
background: rgb(2,6,23);
mask-image: linear-gradient(to top, white, transparent);
-webkit-mask-image: linear-gradient(to top, white, transparent);
z-index: 2;
}
.lamp-conic-r::after {
content: '';
position: absolute; bottom: 0; right: 0;
width: 30%; height: 100%;
background: rgb(2,6,23);
mask-image: linear-gradient(to left, white, transparent);
-webkit-mask-image: linear-gradient(to left, white, transparent);
z-index: 2;
}
/* Blur layer below conic gradients */
.lamp-blur-bg {
display: block !important;
position: absolute !important;
top: 50% !important; left: 0 !important; right: 0 !important;
height: 50px !important;
background: rgb(2,6,23) !important;
filter: blur(20px) !important;
z-index: 3 !important;
}
/* Large glow orb — purple */
.lamp-glow-orb {
display: block !important;
position: absolute !important;
top: 4px !important; left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important; height: 50px !important;
background: #8B5CF6 !important;
border-radius: 50% !important;
filter: blur(30px) !important;
opacity: 0 !important;
z-index: 5 !important;
animation: lampGlowExpand 0.8s ease-in-out 0.3s forwards !important;
}
/* Smaller brighter glow */
.lamp-glow-orb-sm {
display: block !important;
position: absolute !important;
top: 0 !important; left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important; height: 40px !important;
background: #A78BFA !important;
border-radius: 50% !important;
filter: blur(16px) !important;
opacity: 0 !important;
z-index: 6 !important;
animation: lampGlowSmExpand 0.8s ease-in-out 0.3s forwards !important;
}
/* The bright horizontal bar — the "light rod" */
.lamp-cyan-bar {
display: block !important;
position: absolute !important;
top: 2px !important; left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important; height: 2px !important;
background: #A78BFA !important;
z-index: 10 !important;
opacity: 0 !important;
box-shadow: 0 0 6px #8B5CF6, 0 0 15px rgba(139,92,246,.5), 0 0 30px rgba(139,92,246,.2) !important;
animation: lampBarExpand 0.8s ease-in-out 0.3s forwards !important;
}
/* Dark cap above */
.lamp-dark-cap {
display: block !important;
position: absolute !important;
top: -30px !important; left: 0 !important; right: 0 !important;
height: 35px !important;
background: rgb(2,6,23) !important;
z-index: 4 !important;
}
/* Blur overlay */
.lamp-blur-overlay {
display: block !important;
position: absolute !important;
top: 50% !important; left: 0 !important; right: 0 !important;
height: 50px !important;
opacity: 0.1 !important;
backdrop-filter: blur(8px) !important;
z-index: 7 !important;
}
/* Override keyframes for brand colors */
@keyframes lampConicExpand {
0% { width: 0; opacity: 0; }
30% { opacity: 0.6; }
100% { width: 24rem; opacity: 0.8; }
}
@keyframes lampGlowExpand {
0% { width: 0; opacity: 0; }
50% { opacity: 0.5; }
100% { width: 22rem; opacity: 0.35; }
}
@keyframes lampGlowSmExpand {
0% { width: 0; opacity: 0; }
50% { opacity: 0.7; }
100% { width: 10rem; opacity: 0.5; }
}
@keyframes lampBarExpand {
0% { width: 0; opacity: 0; }
40% { opacity: 1; }
100% { width: min(60%, 700px); opacity: 1; }
}
/* Hide the pseudo-element lamp we added before */
.lamp-container::before { display: none !important; }
.lamp-container::after { display: none !important; }
.hdr-lamp-header .hdr-nav-content::before { display: none !important; }
/* Settled state — lamp fades to ambient */
.hdr-lamp-header.lamp-settled .lamp-container {
opacity: 0.5 !important;
transition: opacity 2s ease !important;
}
/* ==========================================================================
LAMP V4 — Simplified for thin header. No masking divs (they kill it).
Just the visible glow elements: bar + orbs + light wash
========================================================================== */
/* Kill the masking pseudo-elements on conics — they make everything invisible */
.lamp-conic-l::before, .lamp-conic-l::after,
.lamp-conic-r::before, .lamp-conic-r::after {
display: none !important;
}
/* Kill the dark layers that hide everything */
.lamp-dark-cap { display: none !important; }
.lamp-blur-bg { display: none !important; }
.lamp-blur-overlay { display: none !important; }
/* Lamp container — full width, positioned at top of header */
.lamp-container {
height: 60px !important;
top: 0 !important;
overflow: visible !important;
}
/* Shrink the conic gradients and remove the mask */
.lamp-conic-l {
height: 55px !important;
opacity: 0 !important;
animation: lampConicV4 0.8s ease-in-out 0.3s forwards !important;
}
.lamp-conic-r {
height: 55px !important;
opacity: 0 !important;
animation: lampConicV4 0.8s ease-in-out 0.3s forwards !important;
}
@keyframes lampConicV4 {
0% { width: 0; opacity: 0; }
30% { opacity: 0.3; }
100% { width: 20rem; opacity: 0.45; }
}
/* Glow orbs — tuned for thin header */
.lamp-glow-orb {
top: -5px !important;
height: 40px !important;
filter: blur(25px) !important;
}
.lamp-glow-orb-sm {
top: -2px !important;
height: 30px !important;
filter: blur(12px) !important;
}
/* Bar — bright and visible */
.lamp-cyan-bar {
top: 0 !important;
height: 2px !important;
box-shadow:
0 0 4px #A78BFA,
0 0 10px rgba(139,92,246,.6),
0 0 25px rgba(139,92,246,.3),
0 2px 40px rgba(139,92,246,.15) !important;
}
/* Add a visible downward light wash from the bar */
.lamp-inner::after {
content: '' !important;
position: absolute !important;
top: 2px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 60px !important;
background: linear-gradient(180deg,
rgba(139,92,246,.18) 0%,
rgba(139,92,246,.08) 35%,
rgba(139,92,246,.02) 65%,
transparent 100%
) !important;
pointer-events: none !important;
animation: lampWashV4 0.8s ease-in-out 0.4s forwards !important;
}
@keyframes lampWashV4 {
0% { width: 0; opacity: 0; }
100% { width: 80%; opacity: 1; }
}
/* ==========================================================================
ASTRA-STYLE MINIMAL HEADER — clean floating bar, no pills, no lamp
Overrides ALL previous header styling
========================================================================== */
/* Kill all lamp/pill/floating styles */
.lamp-container, .lamp-inner, .lamp-conic, .lamp-conic-l, .lamp-conic-r,
.lamp-blur-bg, .lamp-blur-overlay, .lamp-glow-orb, .lamp-glow-orb-sm,
.lamp-cyan-bar, .lamp-dark-cap, .hdr-nav-content::before,
.hdr-lamp-header::after, .pill-spotlight { display: none !important; }
/* The header bar itself */
.hdr-minimal {
position: fixed !important;
top: 14px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: calc(100% - 40px) !important;
max-width: 1280px !important;
-webkit-
border-radius: 14px !important;
padding: 0 !important;
z-index: 1000 !important;
overflow: visible !important;
right: auto !important;
}
.hdr-minimal.scrolled {
}
/* Bottom glow line — subtle purple, like Astra */
.hdr-minimal::after {
content: '' !important;
position: absolute !important;
bottom: -1px !important;
left: 15% !important;
right: 15% !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.3), rgba(139,92,246,.15), rgba(139,92,246,.3), transparent) !important;
border-radius: 1px !important;
display: block !important;
}
/* Inner bar layout — logo left, nav center, CTA right */
.hdr-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 24px !important;
position: relative !important;
max-width: 1280px !important;
margin: 0 auto !important;
}
/* Logo */
.hdr-minimal .logo {
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
flex-shrink: 0 !important;
}
.hdr-minimal .logo-mark {
width: 28px !important;
height: 28px !important;
object-fit: contain !important;
filter: drop-shadow(0 0 8px rgba(139,92,246,.4)) !important;
}
.hdr-minimal .logo-name {
font-family: 'DM Sans', sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #fff !important;
letter-spacing: .04em !important;
text-transform: none !important;
}
/* Nav links — centered, clean text, no backgrounds */
.hdr-minimal .nav-links {
display: flex !important;
align-items: center !important;
gap: 4px !important;
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
.hdr-minimal .nav-item,
.hdr-minimal .nav-item.has-mega {
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
overflow: visible !important;
position: relative !important;
}
.hdr-minimal .nav-links > a,
.hdr-minimal .nav-item > a {
font-family: 'DM Sans', -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(255,255,255,.55) !important;
text-decoration: none !important;
padding: 8px 14px !important;
letter-spacing: .01em !important;
transition: color .2s ease !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
text-shadow: none !important;
}
.hdr-minimal .nav-links > a:hover,
.hdr-minimal .nav-item:hover > a {
color: rgba(255,255,255,.9) !important;
text-shadow: none !important;
}
/* No underline effect on hover */
.hdr-minimal .nav-links > a::after,
.hdr-minimal .nav-item > a::after {
display: none !important;
}
/* Right side — Log In text + Sign Up button */
.hdr-right {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
/* "Residential" as subtle text link (like "Log In") */
.hdr-link-subtle {
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(255,255,255,.55) !important;
text-decoration: none !important;
padding: 8px 12px !important;
transition: color .2s ease !important;
}
.hdr-link-subtle:hover {
color: rgba(255,255,255,.9) !important;
}
/* Sign Up button — clean outlined pill */
.hdr-btn-signup {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #fff !important;
background: transparent !important;
border: 1px solid rgba(255,255,255,.25) !important;
border-radius: 8px !important;
padding: 7px 18px !important;
cursor: pointer !important;
transition: all .2s ease !important;
letter-spacing: .02em !important;
white-space: nowrap !important;
}
.hdr-btn-signup:hover {
border-color: rgba(255,255,255,.5) !important;
background: rgba(255,255,255,.06) !important;
}
/* Burger — keep it working */
.hdr-minimal .burger {
display: none !important;
}
/* Mega menu — position relative to the nav-item */
.hdr-minimal .mega {
position: absolute !important;
top: 100% !important; /* was calc(100%+12px) — caused hover gap, fixed */
left: 50% !important;
transform: translateX(-50%) !important;
background: rgba(12,6,24,.95) !important;
backdrop-filter: blur(24px) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 14px !important;
box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
padding: 20px !important;
min-width: 280px !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .2s ease, transform .2s ease !important;
transform: translateX(-50%) translateY(6px) !important;
z-index: 100 !important;
}
.hdr-minimal .nav-item:hover > .mega {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
/* Mega menu content styling */
.hdr-minimal .mega-head {
font-family: 'DM Sans', sans-serif !important;
color: rgba(139,92,246,.8) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
padding: 0 0 8px !important;
}
.hdr-minimal .mega a {
font-family: 'DM Sans', sans-serif !important;
color: rgba(255,255,255,.7) !important;
font-size: 13.5px !important;
border-radius: 8px !important;
padding: 8px 10px !important;
}
.hdr-minimal .mega a:hover {
background: rgba(139,92,246,.08) !important;
color: #fff !important;
}
.hdr-minimal .mega a strong {
font-weight: 500 !important;
}
.hdr-minimal .mega a em {
color: rgba(255,255,255,.35) !important;
font-size: 12px !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
.hdr-minimal .nav-links { position: static !important; transform: none !important; }
}
@media (max-width: 900px) {
.hdr-minimal { width: calc(100% - 20px) !important; top: 8px !important; border-radius: 12px !important; }
.hdr-bar { padding: 8px 16px !important; }
.hdr-minimal .nav-links { display: none !important; }
.hdr-link-subtle { display: none !important; }
.hdr-minimal .burger { display: flex !important; }
}
/* ==========================================================================
HEADER FIX — Force correct layout, override all base telebridge.css
Individual island buttons with shimmer effect
========================================================================== */
/* Force the header to be the floating bar */
header#header.hdr-minimal {
position: fixed !important;
top: 14px !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
width: calc(100% - 48px) !important;
max-width: 1260px !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 16px !important;
box-shadow: 0 4px 30px rgba(0,0,0,.25) !important;
z-index: 1000 !important;
overflow: visible !important;
}
header#header.hdr-minimal.scrolled {
}
/* Bottom glow */
header#header.hdr-minimal::after {
content: '' !important; display: block !important;
position: absolute !important; bottom: -1px !important;
left: 20% !important; right: 20% !important; height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.2), transparent) !important;
}
/* The bar layout container */
header#header .hdr-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 20px !important;
gap: 12px !important;
width: 100% !important;
max-width: none !important;
}
/* Logo — floating, not inside any pill */
header#header .hdr-bar > .logo {
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
flex-shrink: 0 !important;
padding: 4px 8px !important;
border-radius: 10px !important;
transition: background .2s !important;
}
header#header .hdr-bar > .logo:hover {
background: rgba(255,255,255,.04) !important;
}
header#header .hdr-bar .logo-mark {
width: 26px !important; height: 26px !important;
filter: drop-shadow(0 0 8px rgba(139,92,246,.5)) !important;
}
header#header .hdr-bar .logo-name {
font-family: 'DM Sans', sans-serif !important;
font-size: 17px !important; font-weight: 600 !important;
color: #fff !important; letter-spacing: .03em !important;
text-transform: none !important;
}
/* Nav links — center positioned */
header#header .hdr-bar > .nav-links {
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex: 1 !important;
justify-content: center !important;
}
/* ── INDIVIDUAL ISLAND BUTTONS — each nav item is its own island ── */
header#header .hdr-bar .nav-item {
position: relative !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 10px !important;
padding: 0 !important;
overflow: hidden !important;
transition: background .25s, border-color .25s, box-shadow .25s !important;
}
header#header .hdr-bar .nav-item:hover {
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.14) !important;
box-shadow: 0 2px 12px rgba(139,92,246,.1) !important;
}
/* Shimmer sweep on each island */
header#header .hdr-bar .nav-item::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: -100% !important;
width: 100% !important; height: 100% !important;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 60%, transparent 100%) !important;
transition: none !important;
animation: none !important;
pointer-events: none !important;
}
header#header .hdr-bar .nav-item:hover::before {
animation: islandShimmer .6s ease forwards !important;
}
@keyframes islandShimmer {
0% { left: -100%; }
100% { left: 100%; }
}
/* Nav link text inside islands */
header#header .hdr-bar .nav-item > a {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.6) !important;
padding: 7px 14px !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
text-decoration: none !important;
position: relative !important;
z-index: 1 !important;
letter-spacing: .01em !important;
transition: color .2s !important;
}
header#header .hdr-bar .nav-item > a::after {
display: none !important;
}
header#header .hdr-bar .nav-item:hover > a {
color: #fff !important;
}
/* Right side */
header#header .hdr-right {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
/* Residential — subtle text island */
header#header .hdr-link-subtle {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important; font-weight: 500 !important;
color: rgba(255,255,255,.5) !important;
padding: 7px 14px !important;
text-decoration: none !important;
border-radius: 10px !important;
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.05) !important;
transition: all .2s !important;
}
header#header .hdr-link-subtle:hover {
color: #fff !important;
background: rgba(255,255,255,.07) !important;
border-color: rgba(255,255,255,.12) !important;
}
/* Sign Up — outlined island with glow */
header#header .hdr-btn-signup {
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important; font-weight: 600 !important;
color: #fff !important;
background: rgba(139,92,246,.12) !important;
border: 1px solid rgba(139,92,246,.3) !important;
border-radius: 10px !important;
padding: 7px 20px !important;
cursor: pointer !important;
transition: all .25s !important;
position: relative !important;
overflow: hidden !important;
}
header#header .hdr-btn-signup:hover {
background: rgba(139,92,246,.22) !important;
border-color: rgba(139,92,246,.5) !important;
box-shadow: 0 0 16px rgba(139,92,246,.2) !important;
}
/* Shimmer on signup button */
header#header .hdr-btn-signup::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: -100% !important;
width: 100% !important; height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.15), transparent) !important;
pointer-events: none !important;
}
header#header .hdr-btn-signup:hover::before {
animation: islandShimmer .5s ease forwards !important;
}
/* Burger */
header#header .hdr-right .burger { display: none !important; }
/* ── MEGA MENUS — from islands ── */
header#header .hdr-bar .mega {
position: absolute !important;
top: calc(100% + 10px) !important;
left: 50% !important;
transform: translateX(-50%) translateY(6px) !important;
background: rgba(10,5,20,.94) !important;
backdrop-filter: blur(24px) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 14px !important;
box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
padding: 16px !important;
min-width: 260px !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .2s, transform .2s !important;
z-index: 100 !important;
overflow: visible !important;
}
header#header .hdr-bar .nav-item:hover > .mega {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
header#header .mega-head {
font-family: 'DM Sans', sans-serif !important;
color: rgba(139,92,246,.7) !important;
font-size: 11px !important; font-weight: 600 !important;
text-transform: uppercase !important; letter-spacing: .08em !important;
}
header#header .mega a {
font-family: 'DM Sans', sans-serif !important;
color: rgba(255,255,255,.65) !important;
font-size: 13px !important; border-radius: 8px !important;
}
header#header .mega a:hover {
background: rgba(139,92,246,.08) !important;
color: #fff !important;
}
header#header .mega a em {
color: rgba(255,255,255,.3) !important; font-size: 11.5px !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
header#header .hdr-bar > .nav-links { gap: 2px !important; }
header#header .hdr-bar .nav-item > a { font-size: 12px !important; padding: 6px 10px !important; }
}
@media (max-width: 900px) {
header#header.hdr-minimal { width: calc(100% - 24px) !important; top: 8px !important; border-radius: 12px !important; }
header#header .hdr-bar { padding: 8px 14px !important; }
header#header .hdr-bar > .nav-links { display: none !important; }
header#header .hdr-link-subtle { display: none !important; }
header#header .hdr-right .burger { display: flex !important; }
}
/* ==========================================================================
FINAL HEADER FIXES — dropdowns, lighter bg, cursor illumination
========================================================================== */
/* 1. LIGHTER BACKGROUND — light violet tint instead of dark purple */
header#header.hdr-minimal {
}
header#header.hdr-minimal.scrolled {
}
/* 2. ISLAND BUTTONS — light violet background */
header#header .hdr-bar .nav-item {
background: rgba(139,92,246,.08) !important;
border: 1px solid rgba(139,92,246,.12) !important;
overflow: visible !important; /* CRITICAL — allows mega menu to show */
}
header#header .hdr-bar .nav-item:hover {
background: rgba(139,92,246,.14) !important;
border-color: rgba(139,92,246,.22) !important;
}
/* Kill the shimmer — replacing with cursor illumination */
header#header .hdr-bar .nav-item::before {
display: none !important;
}
/* 3. CURSOR-TRACKING ILLUMINATION — radial glow follows mouse */
header#header .hdr-bar .nav-item > a {
position: relative !important;
z-index: 2 !important;
}
header#header .hdr-bar .nav-item .nav-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .3s ease;
background: radial-gradient(
120px circle at var(--gx, 50%) var(--gy, 50%),
rgba(139,92,246,.35) 0%,
rgba(139,92,246,.12) 30%,
transparent 70%
);
z-index: 1;
}
header#header .hdr-bar .nav-item:hover .nav-glow {
opacity: 1;
}
/* Same glow for Residential link */
header#header .hdr-link-subtle {
position: relative !important;
overflow: hidden !important;
background: rgba(139,92,246,.06) !important;
border: 1px solid rgba(139,92,246,.1) !important;
}
header#header .hdr-link-subtle .nav-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .3s ease;
background: radial-gradient(
100px circle at var(--gx, 50%) var(--gy, 50%),
rgba(139,92,246,.3) 0%,
rgba(139,92,246,.08) 35%,
transparent 70%
);
}
header#header .hdr-link-subtle:hover .nav-glow { opacity: 1; }
/* Same glow for Sign Up */
header#header .hdr-btn-signup {
background: rgba(139,92,246,.15) !important;
border: 1px solid rgba(139,92,246,.25) !important;
}
header#header .hdr-btn-signup::before { display: none !important; }
header#header .hdr-btn-signup .nav-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .3s ease;
background: radial-gradient(
100px circle at var(--gx, 50%) var(--gy, 50%),
rgba(167,139,250,.4) 0%,
rgba(139,92,246,.15) 35%,
transparent 70%
);
}
header#header .hdr-btn-signup:hover .nav-glow { opacity: 1; }
/* 4. DROPDOWN FIX — position correctly under each island */
header#header .hdr-bar .nav-item > .mega {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
transform: translateY(6px) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .2s ease, transform .2s ease !important;
z-index: 200 !important;
overflow: visible !important;
}
header#header .hdr-bar .nav-item:hover > .mega {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* Solutions mega is wide — center it */
header#header .hdr-bar .nav-item:first-child > .mega {
left: -100px !important;
min-width: 650px !important;
}
/* ==========================================================================
HERO REBUILD — outcome-driven, product-first, modern SaaS standard
+ Header ash white bg + floating logo
========================================================================== */
/* Header — transparent (islands are per-element in v4) */
header#header.hdr-minimal {
background: transparent !important;
border: none !important;
}
header#header.hdr-minimal.scrolled {
}
/* Header logo — floating, no button treatment */
header#header .hdr-bar > .logo {
background: none !important;
border: none !important;
padding: 4px 8px !important;
}
header#header .hdr-bar > .logo:hover {
background: none !important;
}
/* Hero headline — large, outcome-driven */
.hero-headline {
font-family: 'DM Sans', sans-serif;
font-size: 42px; font-weight: 700;
color: #fff; line-height: 1.15;
letter-spacing: -.02em;
margin: 0;
}
.hero-hl-grad {
background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 40%, #2DD4CF 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 768px) { .hero-headline { font-size: 28px; } }
/* Hero sub text */
.hero-sub {
font-family: 'DM Sans', sans-serif;
color: rgba(255,255,255,.45);
font-size: 15px; line-height: 1.7;
margin: 14px auto 0; max-width: 560px;
font-weight: 400;
}
/* Hero CTA buttons */
.hero-btn-primary {
font-family: 'DM Sans', sans-serif;
font-size: 14px; font-weight: 600;
color: #fff; background: linear-gradient(135deg, #8B5CF6, #6D28D9);
border: none; border-radius: 10px;
padding: 12px 28px; cursor: pointer;
box-shadow: 0 0 20px rgba(139,92,246,.3);
transition: all .25s;
}
.hero-btn-primary:hover {
box-shadow: 0 0 30px rgba(139,92,246,.5); transform: translateY(-1px);
}
.hero-btn-ghost {
font-family: 'DM Sans', sans-serif;
font-size: 14px; font-weight: 500;
color: rgba(255,255,255,.6);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 11px 24px;
text-decoration: none; transition: all .25s;
}
.hero-btn-ghost:hover {
color: #fff; background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.2);
}
/* ── SERVICE CARDS — interactive with cursor glow + tech tags ── */
.hero-svc-card {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; min-width: 190px;
background: rgba(255,255,255,.04);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px; text-decoration: none;
color: rgba(255,255,255,.85);
transition: all .35s cubic-bezier(.25,.8,.25,1);
}
.hero-svc-card::before {
content: ''; position: absolute; inset: 0;
border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,.1), transparent 50%, rgba(255,255,255,.05));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none; opacity: 0; transition: opacity .35s;
}
.hero-svc-card:hover::before { opacity: 1; }
.hero-svc-card:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.14);
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 30px rgba(139,92,246,.08);
}
.hsc-glow {
position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
opacity: 0; transition: opacity .35s ease;
background: radial-gradient(
120px circle at var(--cx,50%) var(--cy,50%),
rgba(139,92,246,.2) 0%, rgba(139,92,246,.05) 40%, transparent 70%
);
}
.hero-svc-card:hover .hsc-glow { opacity: 1; }
/* Animated shine sweep on hover */
.hsc-shine {
position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(
105deg, transparent 40%, rgba(255,255,255,.06) 45%,
rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 55%, transparent 60%
);
background-size: 250% 100%;
background-position: 200% 0;
transition: background-position 0s;
}
.hero-svc-card:hover .hsc-shine {
background-position: -50% 0;
transition: background-position .8s ease;
}
.hsc-icon-wrap {
width: 40px; height: 40px; flex-shrink: 0;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.06);
transition: all .35s;
}
.hero-svc-card:hover .hsc-icon-wrap {
transform: scale(1.08);
box-shadow: 0 0 16px rgba(139,92,246,.2);
}
.hsc-icon-wrap svg { transition: all .35s; }
.hero-svc-card:hover .hsc-icon-wrap svg {
filter: drop-shadow(0 0 8px currentColor);
}
.hsc-body { flex: 1; min-width: 0; }
.hsc-label {
font-family: 'DM Sans', sans-serif;
font-size: 13px; font-weight: 600;
letter-spacing: .02em;
color: rgba(255,255,255,.9);
line-height: 1.2;
}
.hsc-tag {
font-family: 'DM Sans', sans-serif;
font-size: 10px; color: rgba(255,255,255,.3);
letter-spacing: .03em; margin-top: 3px;
transition: color .35s;
}
.hero-svc-card:hover .hsc-tag { color: rgba(255,255,255,.5); }
.hsc-badge {
font-size: 8px; font-weight: 600;
color: #A78BFA; letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 8px; border-radius: 6px;
border: 1px solid rgba(139,92,246,.12);
background: rgba(139,92,246,.06);
flex-shrink: 0; transition: all .35s;
white-space: nowrap;
}
.hero-svc-card:hover .hsc-badge {
background: rgba(139,92,246,.12);
border-color: rgba(139,92,246,.25);
}
/* White icon wrap for partner logos */
.hsc-icon-wrap[style*="background:#fff"] {
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 10px !important;
padding: 6px !important;
}
.hsc-icon-wrap img {
display: block;
}
@media (max-width: 600px) {
.hero-svc-card { min-width: 160px; padding: 12px 14px; }
.hsc-label { font-size: 11px; }
.hsc-arrow { display: none; }
}
/* ── KPIs — clean, specific ── */
.hero-kpi { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hk-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 28px; font-weight: 800;
background: linear-gradient(135deg, #C4B5FD, #8B5CF6, #2DD4CF);
-webkit-background-clip: text; background-clip: text; color: transparent;
line-height: 1;
}
.hk-lbl {
font-family: 'DM Sans', sans-serif;
font-size: 10px; color: rgba(255,255,255,.35);
text-transform: uppercase; letter-spacing: .1em;
line-height: 1.2;
}
@media (max-width: 600px) {
#hero-stats-row { gap: 20px !important; flex-wrap: wrap; }
.hk-num { font-size: 22px; }
}
/* ==========================================================================
DEAD SPACE FIX — compress hero vertically
========================================================================== */
/* Hero section — content + ticker fit exactly in viewport at 100% zoom.
Hero fills (100vh - ticker height); content centers; ticker sits flush
at the fold. Verified in-browser at 100% zoom. */
.shader-hero { min-height: auto !important; }
#cinematic-hero {
min-height: calc(100vh - 48px) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#hero-content {
min-height: calc(100vh - 48px) !important;
justify-content: center !important;
padding-top: 64px !important;
padding-bottom: 24px !important;
}
/* smaller logo + hidden scroll-hint so the stack fits above the ticker */
#logo-reveal img { width: 160px !important; }
#scroll-hint { display: none !important; }
/* Shader and Unicorn layer — cap height */
#shader-canvas, #unicorn-layer,
#cinematic-hero > div[style*="radial-gradient"] {
height: 100% !important;
}
/* Logo — smaller margin below */
#logo-reveal { margin-bottom: 6px !important; }
#logo-reveal img { width: 160px !important; }
/* Headline — tighter to logo */
#tagline-reveal { margin-top: 0 !important; }
.hero-headline { font-size: 38px !important; }
.hero-sub { margin-top: 10px !important; font-size: 14px !important; }
/* CTA row — tighter */
#hero-cta-row { margin-top: 20px !important; }
/* Service cards — tighter */
#service-cards-row { margin-top: 28px !important; }
/* Stats — tighter */
#hero-stats-row { margin-top: 24px !important; }
/* Scroll hint — tighter */
#scroll-hint { display: none !important; }
/* ==========================================================================
FEATURE SHOWCASE — 2-column: timeline left, image cards right
========================================================================== */
.showcase-container {
position: relative;
background: rgba(15,10,30,.6);
border: 1px solid rgba(255,255,255,.06);
border-radius: 24px;
padding: 40px;
backdrop-filter: blur(12px);
overflow: hidden;
}
.showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
position: relative; z-index: 1;
}
/* Left column — text + timeline */
.showcase-text { display: flex; flex-direction: column; }
/* Timeline */
.showcase-timeline { margin-top: 24px; display: flex; flex-direction: column; padding-left: 4px; }
.stl-item { display: flex; align-items: flex-start; gap: 12px; }
.stl-dot {
flex-shrink: 0; width: 14px; height: 14px;
border: 2px solid; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-top: 2px; position: relative; z-index: 2;
background: rgba(15,10,30,.9);
}
.stl-dot > div { width: 5px; height: 5px; border-radius: 50%; }
.stl-line { width: 2px; height: 18px; margin-left: 6px; border-radius: 1px; }
.stl-title { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; }
.stl-desc { font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
/* Right column — 2x2 image cards */
.showcase-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.sc-card {
position: relative; overflow: hidden;
background-size: cover; background-position: center;
border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
aspect-ratio: 4/3;
transition: transform .3s ease;
cursor: pointer;
}
.sc-card:hover { transform: scale(1.02); }
.sc-card-wide { aspect-ratio: 4/3; }
.sc-card-tall { aspect-ratio: 4/5; }
.sc-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.6) 100%);
transition: opacity .3s;
}
.sc-card:hover .sc-overlay { opacity: .9; }
.sc-badge-left {
position: absolute; top: 10px; left: 10px;
display: inline-flex; align-items: center;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
border-radius: 20px; padding: 5px;
backdrop-filter: blur(8px);
transition: transform .3s;
}
.sc-card:hover .sc-badge-left { transform: scale(1.1); }
.sc-badge-left svg { width: 14px; height: 14px; color: rgba(255,255,255,.8); }
.sc-badge-right {
position: absolute; top: 10px; right: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 11px; color: rgba(255,255,255,.85);
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
border-radius: 20px; padding: 4px 10px;
backdrop-filter: blur(8px);
transition: transform .3s;
}
.sc-card:hover .sc-badge-right { transform: translateX(2px); }
.sc-caption {
position: absolute; bottom: 10px; left: 10px; right: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 15px; font-weight: 500; color: #fff;
letter-spacing: -.01em; line-height: 1.2;
transition: transform .3s;
}
.sc-card:hover .sc-caption { transform: translateY(-3px); }
@media (max-width: 900px) {
.showcase-grid { grid-template-columns: 1fr; }
.showcase-cards { order: -1; }
.showcase-container { padding: 24px; }
.showcase-container h2 { font-size: 32px !important; }
}
@media (max-width: 500px) {
.showcase-cards { grid-template-columns: 1fr; }
.sc-card-tall { aspect-ratio: 4/3; }
}
/* ==========================================================================
NEXUS-STYLE SOFTWARE SECTION — glassmorphic card layout
========================================================================== */
.nexus-wrap { position: relative; padding: 40px 0; }
.nexus-glow-tl { position: absolute; top: -20%; left: -10%; width: 50%; height: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.08), transparent 70%); filter: blur(80px); pointer-events: none; }
.nexus-glow-br { position: absolute; bottom: -10%; right: -10%; width: 50%; height: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,207,.05), transparent 70%); filter: blur(80px); pointer-events: none; }
.nexus-grid-bg { position: absolute; inset: 0; opacity: .02; background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 4rem 4rem; pointer-events: none; }
.nexus-outer {
border-radius: 24px; padding: 1px;
background: linear-gradient(145deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 50%, transparent 100%);
position: relative; z-index: 1;
}
.nexus-inner {
background: rgba(11,14,20,.92);
backdrop-filter: blur(20px);
border-radius: 23px;
overflow: hidden; position: relative;
box-shadow: inset 0 0 60px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
.nexus-inner::before { content: ''; position: absolute; top: 0; right: 25%; width: 300px; height: 300px; background: rgba(139,92,246,.04); border-radius: 50%; filter: blur(60px); pointer-events: none; }
.nexus-inner::after { content: ''; position: absolute; bottom: 0; right: 0; width: 300px; height: 300px; background: rgba(45,212,207,.03); border-radius: 50%; filter: blur(60px); pointer-events: none; }
.nexus-content {
display: grid; grid-template-columns: 5fr 7fr; gap: 48px;
padding: 48px 52px; position: relative; z-index: 1;
}
/* Left column */
.nexus-left { display: flex; flex-direction: column; justify-content: center; }
.nexus-badge {
display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px;
border-radius: 20px; border: 1px solid rgba(139,92,246,.25);
background: rgba(139,92,246,.08); width: fit-content; margin-bottom: 24px;
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
color: #A78BFA; text-transform: uppercase; letter-spacing: .06em;
box-shadow: 0 0 12px rgba(139,92,246,.1);
}
.nb-dot { width: 6px; height: 6px; border-radius: 50%; background: #8B5CF6; box-shadow: 0 0 6px rgba(139,92,246,.6); }
.nexus-h2 {
font-family: 'DM Sans', sans-serif; font-size: 46px; font-weight: 600;
color: #fff; line-height: 1.05; letter-spacing: -.03em;
}
.nexus-grad {
background: linear-gradient(135deg, #A78BFA, #2DD4CF);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.nexus-desc {
font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(255,255,255,.4);
line-height: 1.65; margin-top: 16px; max-width: 380px;
}
.nexus-stats { display: flex; align-items: center; gap: 28px; margin-top: 28px; }
.ns-num { font-family: 'DM Sans', sans-serif; font-size: 36px; font-weight: 500; color: #fff; letter-spacing: -.02em; }
.ns-lbl { font-family: 'DM Sans', sans-serif; font-size: 10px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.ns-divider { width: 1px; height: 40px; background: rgba(255,255,255,.08); }
.nexus-cta {
display: inline-flex; align-items: center; padding: 12px 28px;
font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
color: rgba(11,14,20,.9); background: #fff; border-radius: 24px;
text-decoration: none; transition: all .25s;
box-shadow: 0 0 16px rgba(255,255,255,.15);
}
.nexus-cta:hover { transform: scale(1.02); box-shadow: 0 0 24px rgba(255,255,255,.25); }
/* Right column */
.nexus-right { display: flex; flex-direction: column; gap: 14px; position: relative; }
.nexus-divider-line { display: none; }
@media (min-width: 901px) {
.nexus-divider-line { display: block; position: absolute; left: -24px; top: 50%; bottom: 10%; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent); }
}
/* Cards */
.nexus-card {
background: rgba(20,24,36,.5); backdrop-filter: blur(12px);
border-radius: 16px; border: 1px solid rgba(255,255,255,.04);
padding: 18px 20px; transition: border-color .25s;
overflow: hidden; position: relative;
}
.nexus-card:hover { border-color: rgba(255,255,255,.08); }
.nc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nc-icon-wrap {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(26,30,41,.7); border: 1px solid rgba(255,255,255,.04);
display: flex; align-items: center; justify-content: center;
}
.nc-icon svg { width: 20px; height: 20px; color: #A78BFA; }
.nc-title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: #fff; }
.nc-sub { font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,.3); margin-top: 1px; }
.nc-status {
display: flex; align-items: center; gap: 6px; padding: 4px 10px;
border-radius: 20px; background: rgba(13,24,21,.8); border: 1px solid rgba(0,230,118,.15);
margin-left: auto;
}
.nc-pulse { width: 5px; height: 5px; border-radius: 50%; background: #00E676; box-shadow: 0 0 6px rgba(0,230,118,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.nc-status span { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600; color: #00E676; text-transform: uppercase; letter-spacing: .08em; }
.nc-badge-green {
margin-left: auto; padding: 3px 10px; border-radius: 12px;
background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2);
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: #22C55E;
}
/* Project rows */
.nc-body { display: flex; flex-direction: column; gap: 6px; }
.nc-row {
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
border-radius: 10px; transition: background .2s;
}
.nc-row:hover { background: rgba(255,255,255,.03); }
.nc-av {
width: 28px; height: 28px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; color: #fff;
}
.nc-name { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,.8); flex: 1; }
.nc-tag {
padding: 3px 10px; border-radius: 10px;
font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600;
}
/* Bar chart */
.nc-bars {
display: flex; align-items: flex-end; gap: 6px; height: 80px;
padding: 8px 4px 0;
}
.ncb {
flex: 1; border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, #8B5CF6, #0B5FFF);
min-height: 8px; transition: height .6s ease;
}
/* Tech tags */
.nc-tags-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-tech {
padding: 5px 12px; border-radius: 8px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,.5);
transition: all .2s;
}
.nc-tech:hover { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.15); color: rgba(255,255,255,.8); }
@media (max-width: 900px) {
.nexus-content { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; }
.nexus-h2 { font-size: 32px !important; }
}
/* ==========================================================================
NEXUS FIX — Full width, entrance animations, no dead space
========================================================================== */
/* Make the nexus section full-bleed */
.nexus-wrap {
padding: 0 !important;
margin: 0 !important;
}
/* Outer container — full width, no max-width constraint */
.nexus-outer {
border-radius: 0 !important;
background: none !important;
padding: 0 !important;
}
.nexus-inner {
border-radius: 0 !important;
min-height: 80vh !important;
display: flex !important;
align-items: center !important;
}
.nexus-content {
padding: 60px 5vw !important;
max-width: 1300px !important;
margin: 0 auto !important;
width: 100% !important;
}
/* The parent section — full bleed, no padding */
.nexus-wrap + .sec, .nexus-wrap {
padding: 0 !important;
}
/* ── WORD-BY-WORD REVEAL (like GSAP reveal-word) ── */
.nex-word-wrap { overflow: hidden; display: block; }
.nex-word {
display: block;
transform: translateY(110%);
transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.nex-word.nex-in { transform: translateY(0); }
/* ── FADE REVEAL (like GSAP reveal-fade) ── */
.nex-fade {
opacity: 0;
transform: translateY(16px);
transition: opacity .8s ease, transform .8s ease;
}
.nex-fade.nex-in {
opacity: 1;
transform: translateY(0);
}
/* ── CARD REVEAL (like GSAP reveal-card) ── */
.nex-card-anim {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.nex-card-anim.nex-in {
opacity: 1;
transform: translateY(0);
}
/* ── CONTINUOUS ANIMATIONS — pulse, float, glow ── */
@keyframes nexFloat1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nexFloat2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes nexBarGrow { 0% { height: 4px; } }
.nexus-card:nth-child(1) { animation: nexFloat1 4s ease-in-out infinite; }
.nexus-card:nth-child(2) { animation: nexFloat2 5s ease-in-out infinite .5s; }
.nexus-card:nth-child(3) { animation: nexFloat1 4.5s ease-in-out infinite 1s; }
/* Bar chart grow animation */
.ncb { animation: nexBarGrow 1.5s ease-out both; }
.ncb:nth-child(1) { animation-delay: .1s; }
.ncb:nth-child(2) { animation-delay: .2s; }
.ncb:nth-child(3) { animation-delay: .3s; }
.ncb:nth-child(4) { animation-delay: .4s; }
.ncb:nth-child(5) { animation-delay: .5s; }
.ncb:nth-child(6) { animation-delay: .6s; }
.ncb:nth-child(7) { animation-delay: .7s; }
.ncb:nth-child(8) { animation-delay: .8s; }
/* Pulse on delivering status */
.nc-pulse {
animation: pulse 1.5s ease-in-out infinite !important;
}
/* Card hover glow effect */
.nexus-card::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(circle at var(--ncx, 50%) var(--ncy, 50%), rgba(139,92,246,.08), transparent 60%);
opacity: 0; transition: opacity .3s;
pointer-events: none;
}
.nexus-card:hover::before { opacity: 1; }
/* Tech tags — subtle pulse highlight */
.nc-tech:nth-child(odd) { animation: nexFloat1 6s ease-in-out infinite; }
.nc-tech:nth-child(even) { animation: nexFloat2 7s ease-in-out infinite .3s; }
/* Remove section padding from parent */
.nexus-wrap { margin-top: -1px !important; }
/* ==========================================================================
NEXUS FULL-BLEED FIX — override all container constraints
========================================================================== */
.nexus-section {
background: #060310 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important;
overflow: hidden !important;
}
.nexus-section .nexus-wrap {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
.nexus-section .nexus-outer {
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
.nexus-section .nexus-inner {
border-radius: 0 !important;
min-height: 85vh !important;
display: flex !important;
align-items: center !important;
}
.nexus-section .nexus-content {
max-width: 1300px !important;
margin: 0 auto !important;
padding: 60px 48px !important;
width: 100% !important;
}
/* Cards need more visual weight */
.nexus-card {
padding: 22px 24px !important;
}
.nc-bars { height: 100px !important; }
/* ==========================================================================
ANIMATED VIDEO LOGO in header
========================================================================== */
.logo-video-wrap {
position: relative;
width: 30px; height: 30px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
}
.logo-video {
position: absolute; inset: -2px;
width: calc(100% + 4px); height: calc(100% + 4px);
object-fit: cover;
/* Invert for dark background — the video has white bg */
filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 6px rgba(139,92,246,.5));
opacity: 0;
transition: opacity .3s;
}
.logo-video.playing { opacity: 1; }
.logo-video.playing + .logo-mark-static { opacity: 0; }
.logo-mark-static {
width: 30px !important; height: 30px !important;
transition: opacity .3s;
}
/* ==========================================================================
NEXUS SECTION COLOR SCHEME — align with site palette
========================================================================== */
#tb-nexus {
background: #0a0515 !important; /* Match site dark purple instead of navy */
}
/* ==========================================================================
ANIMATED LOGO V2 — full video with symbol + text, seamless with header
========================================================================== */
/* Remove old logo video styles */
.logo-video-wrap, .logo-video, .logo-mark-static { display: none !important; }
/* New logo animation container */
.logo-anim-wrap {
position: relative;
width: 160px; height: 40px;
overflow: hidden;
flex-shrink: 0;
}
.logo-anim-video {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 164px; height: auto;
/* Blend white background away — the video bg is near-white (#f5f5f5) */
mix-blend-mode: screen;
filter: invert(1) brightness(1.2);
pointer-events: none;
}
/* Hide the old .logo-mark and .logo-name when video is present */
header#header .logo-anim-wrap ~ .logo-copy,
header#header .logo-anim-wrap ~ .logo-mark { display: none !important; }
/* Logo link — no button treatment */
header#header .hdr-bar > .logo {
background: none !important;
border: none !important;
padding: 4px 0 !important;
}
/* ==========================================================================
HEADER + LOGO + NEXUS CRITICAL FIXES
========================================================================== */
/* Header — dark semi-transparent that works on ALL backgrounds */
header#header.hdr-minimal {
-webkit-
}
header#header.hdr-minimal.scrolled {
}
/* Logo video — remove broken blend mode, use simple approach */
.logo-anim-video {
mix-blend-mode: normal !important;
filter: none !important;
/* The video has white bg — we'll hide it with a dark overlay and clip */
background: transparent !important;
}
/* Instead of blend mode tricks, just show the static logo always
and overlay the video cropped to only the visible parts */
.logo-anim-wrap {
width: 160px !important;
height: 40px !important;
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
overflow: visible !important;
}
/* Hide the video entirely — use static logo with CSS animation instead */
.logo-anim-video { display: none !important; }
/* Show the static logo mark and text */
header#header .hdr-bar > .logo {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
header#header .logo-anim-wrap ~ .logo-copy,
header#header .logo-anim-wrap ~ .logo-mark { display: flex !important; }
/* Since the video approach is broken, restore static logo with a glow animation */
.logo-anim-wrap::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 8px;
background: radial-gradient(circle, rgba(139,92,246,.4), transparent 70%);
opacity: 0;
animation: logoGlowOnce 2s ease-out .5s forwards;
pointer-events: none;
}
@keyframes logoGlowOnce {
0% { opacity: 0; transform: scale(.5); }
30% { opacity: .8; }
100% { opacity: 0; transform: scale(1.5); }
}
.logo-anim-wrap:hover::after {
animation: logoGlowOnce .8s ease-out forwards !important;
}
/* ==========================================================================
HEADER LOGO ANIMATION — canvas-based with chroma key
========================================================================== */
.hdr-logo-anim {
width: 160px; height: 40px;
flex-shrink: 0; position: relative;
cursor: pointer;
}
#hdr-logo-canvas {
width: 160px; height: 40px;
display: block;
}
/* Remove old logo-anim-wrap styles that interfere */
.logo-anim-wrap { display: none !important; }
/* ==========================================================================
LOGO FIX — proper sizing, no border, clean canvas
========================================================================== */
.hdr-logo-anim {
width: 150px !important;
height: 34px !important;
border: none !important;
outline: none !important;
background: none !important;
overflow: hidden !important;
}
#hdr-logo-canvas {
width: 150px !important;
height: 34px !important;
border: none !important;
outline: none !important;
background: transparent !important;
}
/* Ensure no box/border around the logo link */
header#header .hdr-bar > .logo {
border: none !important;
background: none !important;
box-shadow: none !important;
outline: none !important;
padding: 4px 0 !important;
}
header#header .hdr-bar > .logo:hover {
background: none !important;
}
/* ==========================================================================
INDUSTRY CONNECTION MAP — animated SVG visual
========================================================================== */
.showcase-visual {
display: flex; align-items: center; justify-content: center;
min-height: 400px;
}
.industry-map {
width: 100%; max-width: 600px; height: auto;
}
/* Connection lines — dash animation */
@keyframes igLineDash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -20; }
}
.ig-line-anim {
animation: igLineDash 2s linear infinite;
}
/* Nodes — pulse in on load */
@keyframes igNodePulse {
0% { opacity: 0; transform: scale(.5); }
60% { opacity: 1; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
.ig-node-anim {
opacity: 0;
animation: igNodePulse .8s ease-out forwards;
transform-origin: center;
}
/* Orbit rings — slow rotation */
@keyframes igRingSpin {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -48; }
}
.ig-ring-anim {
animation: igRingSpin 12s linear infinite;
}
/* Core node — gentle pulse */
.ig-core circle:first-child {
animation: igCorePulse 3s ease-in-out infinite;
}
@keyframes igCorePulse {
0%, 100% { r: 32; opacity: 1; }
50% { r: 36; opacity: .8; }
}
/* Responsive */
@media (max-width: 900px) {
.showcase-visual { min-height: 300px; }
.showcase-grid { grid-template-columns: 1fr !important; }
.showcase-visual { order: -1; }
}
/* ==========================================================================
PREMIUM SOLUTION CARDS — Aura-inspired with unique visuals per card
========================================================================== */
.tb-sol-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
.tb-sol-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none; color: #fff;
transition: all .45s cubic-bezier(.25,.8,.25,1);
cursor: pointer;
}
.tb-sol-card::before {
content: ''; position: absolute; inset: 0; z-index: 0;
border-radius: inherit; padding: 1px;
background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 50%, var(--accent, rgba(255,255,255,.05)));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .45s;
pointer-events: none;
}
.tb-sol-card:hover::before { opacity: 1; }
.tb-sol-card:hover {
transform: translateY(-8px);
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.1);
box-shadow: 0 24px 48px -12px rgba(0,0,0,.5), 0 0 40px rgba(139,92,246,.06);
}
/* Visual header area */
.tsc-visual {
position: relative; height: 140px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.tsc-wave {
position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
z-index: 1;
}
.tsc-wave-line {
stroke-dasharray: 600; stroke-dashoffset: 600;
animation: tscWaveDraw 3s ease-out forwards;
}
@keyframes tscWaveDraw {
to { stroke-dashoffset: 0; }
}
.tsc-glow {
position: absolute; inset: 0; z-index: 0;
opacity: .6; pointer-events: none;
}
.tsc-grid {
position: absolute; inset: 0; opacity: .04;
background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none; z-index: 0;
}
.tsc-icon {
position: relative; z-index: 2;
width: 52px; height: 52px;
border-radius: 14px;
background: rgba(255,255,255,.06);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.08);
display: flex; align-items: center; justify-content: center;
transition: all .4s;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.tb-sol-card:hover .tsc-icon {
transform: scale(1.08);
box-shadow: 0 0 20px var(--accent, rgba(139,92,246,.3));
border-color: rgba(255,255,255,.15);
}
/* Divider line */
.tsc-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 20%, rgba(255,255,255,.1) 80%, transparent);
}
/* Card body */
.tsc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.tsc-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tsc-cat {
font-size: 10px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 4px 10px; border-radius: 8px;
border: 1px solid;
background: rgba(255,255,255,.03);
}
.tsc-partner {
font-size: 9px; font-weight: 500;
color: rgba(255,255,255,.25);
letter-spacing: .08em; text-transform: uppercase;
}
.tsc-title {
font-family: 'DM Sans', sans-serif;
font-size: 20px; font-weight: 700;
color: rgba(255,255,255,.9);
line-height: 1.2; margin-bottom: 10px;
}
.tsc-desc {
font-size: 13px; color: rgba(255,255,255,.4);
line-height: 1.6; margin-bottom: 14px; flex: 1;
}
.tsc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tsc-chip {
font-size: 10px; font-weight: 500;
color: rgba(255,255,255,.35);
padding: 4px 10px; border-radius: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.05);
transition: all .3s;
}
.tb-sol-card:hover .tsc-chip {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.5);
}
.tsc-cta {
font-size: 12px; font-weight: 600;
display: flex; align-items: center; gap: 6px;
transition: all .3s;
}
.tsc-cta span { transition: transform .3s; }
.tb-sol-card:hover .tsc-cta span { transform: translateX(4px); }
/* Animated shine on hover */
.tb-sol-card::after {
content: ''; position: absolute; inset: 0; z-index: 3;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 55%, transparent 60%);
background-size: 250% 100%; background-position: 200% 0;
pointer-events: none; border-radius: inherit;
transition: background-position 0s;
}
.tb-sol-card:hover::after {
background-position: -50% 0;
transition: background-position .8s ease;
}
/* Responsive */
@media (max-width: 900px) {
.tb-sol-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
.tb-sol-grid { grid-template-columns: 1fr !important; }
}
/* Card visual area + KPI footer */
.tsc-vis {
height: 160px; position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.tsc-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.04);
}
.tsc-kpi { display: flex; align-items: baseline; gap: 6px; }
.tsc-kv {
font-size: 18px; font-weight: 700; color: rgba(255,255,255,.8);
font-family: 'Barlow Condensed', sans-serif;
}
.tsc-kl {
font-size: 9px; color: rgba(255,255,255,.25);
text-transform: uppercase; letter-spacing: .08em;
}
/* Remove old tsc-chips since we replaced with KPI */
.tsc-chips { display: none; }
/* ==========================================================================
OPERATIONAL IMPACT — dark theme overrides
========================================================================== */
#tb-wwd + section .sec-head h2,
section[style*="060318"] .sec-head h2 { color: #fff !important; }
section[style*="060318"] .sec-head p { color: rgba(255,255,255,.4) !important; }
section[style*="060318"] .eyebrow { color: #A78BFA !important; }
section[style*="060318"] .eyebrow::before { background: #A78BFA !important; }
section[style*="060318"] .partner-strip .pl { color: rgba(255,255,255,.35) !important; }
section[style*="060318"] .lchip { background: #fff !important; border-color: rgba(255,255,255,.15) !important; padding: 6px 12px !important; border-radius: 8px !important; }
section[style*="060318"] .lchip img { filter: none !important; opacity: 1 !important; height: 20px !important; }
/* Impact grid responsive */
.tb-impact-grid { margin-top: 36px; }
@media (max-width: 900px) {
.tb-impact-grid { grid-template-columns: 1fr !important; }
}
/* ==========================================================================
INDUSTRIES GRID — interactive icon cards
========================================================================== */
.tb-ind-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 14px !important;
}
.tb-ind-grid { position: relative; align-items: start; }
.tb-ind-card {
display: flex; flex-direction: column; align-items: center;
padding: 20px 12px 16px; border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none; color: #fff;
transition: transform .4s cubic-bezier(.25,.8,.25,1),
border-color .4s, background .4s, box-shadow .4s;
text-align: center; position: relative; overflow: hidden;
min-height: 118px;
z-index: 1;
}
.tb-ind-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 20%, var(--accent, #8B5CF6), transparent 70%);
opacity: 0; transition: opacity .4s; pointer-events: none;
}
.tb-ind-card::after {
content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
background: var(--accent, #8B5CF6);
transform: scaleX(0); transform-origin: left;
transition: transform .4s cubic-bezier(.25,.8,.25,1);
}
.tb-ind-card:hover::before { opacity: .1; }
.tb-ind-card:hover::after { transform: scaleX(1); }
.tb-ind-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--accent, #8B5CF6) 40%, rgba(255,255,255,.1));
background: rgba(255,255,255,.055);
box-shadow: 0 22px 44px -16px rgba(0,0,0,.55),
0 0 26px -6px color-mix(in srgb, var(--accent,#8B5CF6) 30%, transparent);
z-index: 5;
}
/* Compact top (always visible) */
.tic-top {
display: flex; flex-direction: column; align-items: center;
transition: transform .4s cubic-bezier(.25,.8,.25,1);
}
.tic-icon {
font-size: 28px; margin-bottom: 10px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
transition: transform .4s;
}
.tb-ind-card:hover .tic-icon { transform: scale(1.12) translateY(-2px); }
.tic-name {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
letter-spacing: .02em; margin-bottom: 4px;
}
.tic-stack {
font-size: 9px; color: rgba(255,255,255,.28);
letter-spacing: .04em; line-height: 1.4;
transition: opacity .3s;
}
.tb-ind-card:hover .tic-stack { opacity: 0; height: 0; margin: 0; }
/* Hover-reveal expertise panel — absolutely positioned so it overlays
downward without growing the grid row (no reflow of sibling cards). */
.tic-reveal {
position: absolute;
left: 0; right: 0;
top: 100%;
background: linear-gradient(180deg, rgba(20,14,36,.98), rgba(14,10,28,.98));
border: 1px solid color-mix(in srgb, var(--accent,#8B5CF6) 35%, rgba(255,255,255,.08));
border-top: none;
border-radius: 0 0 16px 16px;
padding: 0 16px;
max-height: 0;
opacity: 0;
overflow: hidden;
text-align: left;
box-shadow: 0 22px 40px -14px rgba(0,0,0,.6);
transition: max-height .42s cubic-bezier(.25,.8,.25,1), opacity .3s ease, padding .42s;
pointer-events: none;
z-index: 6;
}
.tb-ind-card:hover .tic-reveal {
max-height: 240px;
opacity: 1;
padding: 4px 16px 16px;
}
/* Card itself must allow the panel to spill out on hover */
.tb-ind-card { overflow: visible; }
/* keep the accent top-bar + glow clipped to the card body though */
.tb-ind-card::before,
.tb-ind-card::after { border-radius: inherit; }
.tic-reveal-desc {
font-size: 11px; line-height: 1.5;
color: rgba(255,255,255,.62);
margin-bottom: 10px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.08);
}
.tic-reveal-list {
list-style: none; padding: 0; margin: 0 0 10px;
display: flex; flex-direction: column; gap: 5px;
}
.tic-reveal-list li {
font-size: 10.5px; line-height: 1.35;
color: rgba(255,255,255,.78);
padding-left: 15px; position: relative;
}
.tic-reveal-list li::before {
content: ''; position: absolute; left: 0; top: 5px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent, #8B5CF6);
box-shadow: 0 0 6px color-mix(in srgb, var(--accent,#8B5CF6) 60%, transparent);
}
.tic-reveal-foot {
display: flex; align-items: center; gap: 6px;
font-size: 9.5px; color: rgba(255,255,255,.4);
padding-top: 9px;
border-top: 1px solid rgba(255,255,255,.06);
}
.tic-metric {
font-size: 13px; font-weight: 700;
color: var(--accent, #8B5CF6);
font-family: 'Barlow Condensed', Inter, sans-serif;
letter-spacing: .01em;
}
.tic-go {
margin-left: auto;
font-weight: 600;
color: color-mix(in srgb, var(--accent,#8B5CF6) 85%, #fff);
white-space: nowrap;
}
/* Team section light violet bg */
section[style*="f0ecf9"] .ts-photo { border-radius: 16px !important; box-shadow: 0 8px 24px rgba(30,21,48,.12); }
section[style*="f0ecf9"] .ts-photo img { border-radius: 16px; }
@media (max-width: 900px) {
.tb-ind-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
.tb-ind-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ==========================================================================
LIGHT SECTIONS — greyish purple instead of white for better dark→light transition
========================================================================== */
.sec-tint {
background: linear-gradient(180deg, #e8e3f3, #e0dbed) !important;
}
.sec-tint h2 { color: #1e1530 !important; }
.sec-tint p { color: rgba(30,21,48,.55) !important; }
.sec-tint .eyebrow { color: #8B5CF6 !important; }
.sec-tint .eyebrow::before { background: #8B5CF6 !important; }
/* Partner strip in light sections */
.sec-tint .lchip { background: #fff !important; border-color: rgba(139,92,246,.1) !important; box-shadow: 0 2px 8px rgba(30,21,48,.06) !important; }
/* Paystone section cards */
.cpartner { background: linear-gradient(180deg, #e8e3f3, #ddd7ec) !important; }
.cpartner h2 { color: #1e1530 !important; }
/* Residential section */
.sec[style*="--ice"] { background: linear-gradient(180deg, #e8e3f3, #e0dbed) !important; }
/* CTA sections light bg */
.sec-tint .fcard { background: #fff !important; border: 1px solid rgba(139,92,246,.08) !important; box-shadow: 0 4px 16px rgba(30,21,48,.06) !important; }
/* Testimonial cards */
.tb-test-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(255,255,255,.12) !important;
box-shadow: 0 16px 32px rgba(0,0,0,.3) !important;
}
/* Trust/Regulatory cards */
.tb-trust-card {
border-radius: 16px; padding: 24px 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
text-align: center; transition: all .4s;
cursor: default; position: relative; overflow: hidden;
}
.tb-trust-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 30%, var(--tc, #22C55E), transparent 70%);
opacity: 0; transition: opacity .4s; pointer-events: none;
}
.tb-trust-card:hover::before { opacity: .06; }
.tb-trust-card:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,.12);
box-shadow: 0 12px 24px rgba(0,0,0,.3);
}
.ttc-icon {
width: 52px; height: 52px; margin: 0 auto 14px;
border-radius: 14px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
transition: all .4s;
}
.tb-trust-card:hover .ttc-icon {
transform: scale(1.08);
box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 30%, transparent);
border-color: rgba(255,255,255,.12);
}
.ttc-title {
font-size: 16px; font-weight: 700; color: rgba(255,255,255,.85);
margin-bottom: 8px; letter-spacing: .02em;
}
.ttc-desc {
font-size: 11px; color: rgba(255,255,255,.3); line-height: 1.5;
}
@media (max-width: 768px) {
.tb-trust-card + .tb-trust-card + .tb-trust-card + .tb-trust-card { grid-column: span 2; }
section[style*="0d0926"] > div > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Map province hover */
.map-prov { transition: all .3s ease; }
.map-city { cursor: pointer; }
/* =====================================================
PAYSTONE SECTION — 3D DEVICE STACK + DATA FLOWS
Dark shell + light inset canvas | tb-paystone
===================================================== */
.tb-pay-sec { padding: 100px 0; }
/* ---- Product mini-cards (left column) ---- */
.tb-pay-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
background: rgba(20,14,36,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.05);
border-radius: 16px;
transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s;
overflow: hidden;
cursor: default;
}
.tb-pay-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--tc, #8B5CF6);
opacity: .55;
transform: scaleY(.4);
transform-origin: center;
transition: transform .35s, opacity .35s;
}
.tb-pay-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--tc, #8B5CF6) 22%, rgba(255,255,255,.08));
box-shadow: 0 10px 30px -12px rgba(0,0,0,.6), 0 0 22px -6px color-mix(in srgb, var(--tc, #8B5CF6) 20%, transparent);
}
.tb-pay-card:hover::before { transform: scaleY(1); opacity: 1; }
.tb-pay-card-icon {
width: 42px; height: 42px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
border: 1px solid;
flex-shrink: 0;
transition: transform .35s;
}
.tb-pay-card:hover .tb-pay-card-icon { transform: scale(1.06); }
.tb-pay-card-title {
font-size: 14px; font-weight: 600; color: #fff;
letter-spacing: -.01em; margin-bottom: 4px;
}
.tb-pay-card-desc {
font-size: 11.5px; color: rgba(255,255,255,.45);
line-height: 1.55;
}
.tb-pay-card-shine {
position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform .8s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.tb-pay-card:hover .tb-pay-card-shine { transform: translateX(100%); }
/* ---- CTAs ---- */
.tb-pay-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 20px;
font-size: 13px; font-weight: 600;
border-radius: 10px;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
font-family: inherit;
}
.tb-pay-btn-primary {
color: #0a0515;
background: linear-gradient(120deg, #fff, #f0eafe);
box-shadow: 0 0 22px 2px rgba(255,255,255,.14);
}
.tb-pay-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 26px -4px rgba(139,92,246,.4), 0 0 22px 2px rgba(255,255,255,.2);
}
.tb-pay-btn-ghost {
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.1);
}
.tb-pay-btn-ghost:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.2);
transform: translateY(-2px);
}
/* ---- Right column: LIGHT INSET CANVAS ---- */
.tb-pay-canvas {
position: relative;
padding: 24px 24px 20px;
border-radius: 24px;
background:
radial-gradient(ellipse at 30% 20%, #f7f2ff 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, #fbe8ec 0%, transparent 60%),
linear-gradient(160deg, #f4f0fb 0%, #ece5f5 100%);
border: 1px solid rgba(255,255,255,.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
inset 0 -20px 40px -20px rgba(30,21,48,.06),
0 30px 60px -20px rgba(0,0,0,.5),
0 0 0 1px rgba(139,92,246,.06);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 560px;
}
/* grid pattern removed per design update */
.tb-pay-canvas-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
position: relative; z-index: 2;
}
.tb-pay-canvas-title {
font-size: 12px; font-weight: 700; color: #1e1530;
letter-spacing: .1em; text-transform: uppercase;
}
.tb-pay-canvas-live {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(0,230,118,.08);
border: 1px solid rgba(0,230,118,.22);
font-size: 10px; font-weight: 700; color: #059669;
text-transform: uppercase; letter-spacing: .1em;
}
.tb-pay-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #00E676;
box-shadow: 0 0 8px rgba(0,230,118,.7);
animation: tbLivePulse 1.5s infinite;
}
@keyframes tbLivePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(.85); }
}
/* ---- The stage (holds terminal + nodes + flow SVG) ---- */
.tb-pay-stage {
position: relative;
flex: 1;
min-height: 420px;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.tb-pay-flows {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
}
/* ---- Corner nodes ---- */
.tb-node {
position: absolute;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px 10px 10px;
background: rgba(255,255,255,.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid color-mix(in srgb, var(--nc, #8B5CF6) 15%, rgba(30,21,48,.06));
border-radius: 14px;
box-shadow:
0 6px 18px -6px color-mix(in srgb, var(--nc, #8B5CF6) 25%, rgba(30,21,48,.15)),
0 1px 0 rgba(255,255,255,.9) inset;
z-index: 3;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
animation: tbNodeFloat 6s ease-in-out infinite;
}
.tb-node:hover {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 12px 28px -8px color-mix(in srgb, var(--nc, #8B5CF6) 40%, rgba(30,21,48,.2)),
0 1px 0 rgba(255,255,255,.9) inset;
}
.tb-node-ico {
width: 32px; height: 32px;
border-radius: 9px;
background: color-mix(in srgb, var(--nc, #8B5CF6) 10%, rgba(255,255,255,.6));
border: 1px solid color-mix(in srgb, var(--nc, #8B5CF6) 20%, transparent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tb-node-name {
font-size: 12px; font-weight: 700; color: #1e1530;
letter-spacing: -.01em; line-height: 1.1; margin-bottom: 2px;
white-space: nowrap;
}
.tb-node-sub {
font-size: 9.5px; color: rgba(30,21,48,.5);
letter-spacing: .02em;
white-space: nowrap;
}
/* Nodes positioned to match SVG flow endpoints (viewBox 600x460).
POS(75,55)=12.5%,12% | ACC(525,55)=87.5%,12%
CRM(60,230)=10%,50% | APP(525,386)=87.5%,84% */
/* Node positions match SVG viewBox coords (600x460, preserveAspectRatio=none):
ROW 1: POS(90,60)=15%,13% | Accounting(510,60)=85%,13%
ROW 2: CRM(60,240)=10%,52% | Customer App(540,240)=90%,52%
ROW 3: (see .tb-snode-* below) */
.tb-node-pos { top: 13%; left: 15%; transform: translate(-50%,-50%); animation-delay: 0s; }
.tb-node-acc { top: 13%; left: 85%; transform: translate(-50%,-50%); animation-delay: -1.5s; }
.tb-node-crm { top: 52%; left: 10%; transform: translate(-50%,-50%); animation-delay: -3s; }
.tb-node-app { top: 52%; left: 90%; transform: translate(-50%,-50%); animation-delay: -4.5s; }
.tb-node:hover { transform: translate(-50%,-50%) translateY(-3px) scale(1.03); }
@keyframes tbNodeFloat {
0%, 100% { transform: translate(-50%,-50%) translateY(0); }
50% { transform: translate(-50%,-50%) translateY(-4px); }
}
/* ---- Clover Mini 3 terminal (landscape countertop device) ---- */
.tb-term-wrap {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 320px;
display: flex; flex-direction: column; align-items: center;
}
.tb-term-3d {
position: relative;
width: 320px; height: 220px;
transform-style: preserve-3d;
transform: rotateY(0) rotateX(0);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
animation: tbTermIdle 7s ease-in-out infinite;
filter: drop-shadow(0 22px 26px rgba(30,21,48,.22)) drop-shadow(0 6px 10px rgba(30,21,48,.12));
}
@keyframes tbTermIdle {
/* Subtler rotation than portrait — device already has perspective baked in */
0%, 100% { transform: rotateY(-2.5deg) rotateX(2deg); }
50% { transform: rotateY( 2.5deg) rotateX(-1deg); }
}
.tb-term-svg { width: 100%; height: 100%; display: block; }
/* Terminal ground shadow — wider for landscape device */
.tb-term-shadow {
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%);
width: 220px; height: 18px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(30,21,48,.28), transparent 70%);
filter: blur(8px);
z-index: -1;
}
.tb-term-caption {
margin-top: 14px;
font-size: 10px; font-weight: 600;
color: rgba(30,21,48,.55);
letter-spacing: .06em; text-transform: uppercase;
background: rgba(255,255,255,.7);
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(30,21,48,.08);
white-space: nowrap;
}
/* Activity pulse — centered ripples emanating from the device
(replaces the top-edge NFC ripple; better fit for a countertop device) */
.tb-term-pulse {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
}
.tb-term-pulse span {
position: absolute;
top: 0; left: 0;
transform: translate(-50%, -50%);
width: 220px; height: 140px;
border-radius: 50%;
border: 1.5px solid rgba(139,92,246,.5);
opacity: 0;
animation: tbTermPulse 4.2s ease-out infinite;
}
.tb-term-pulse span:nth-child(2) { animation-delay: 1.4s; border-color: rgba(242,85,77,.4); }
.tb-term-pulse span:nth-child(3) { animation-delay: 2.8s; border-color: rgba(14,165,233,.4); }
@keyframes tbTermPulse {
0% { transform: translate(-50%, -50%) scale(.6); opacity: .55; border-width: 1.5px; }
100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; border-width: .5px; }
}
/* Flow line dash animation (base subtle pulse for the gradient overlays) */
.tb-flow-anim {
stroke-dasharray: 5 12;
animation: tbFlowDash 2.4s linear infinite;
opacity: .9;
}
@keyframes tbFlowDash {
to { stroke-dashoffset: -34; }
}
/* ---- KPI chips ---- */
.tb-pay-chips {
display: flex; justify-content: center; gap: 10px;
margin-top: 14px;
flex-wrap: wrap;
position: relative; z-index: 2;
}
.tb-pay-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: rgba(255,255,255,.7);
border: 1px solid rgba(30,21,48,.08);
border-radius: 20px;
font-size: 11px; color: rgba(30,21,48,.7);
backdrop-filter: blur(8px);
}
.tb-pay-chip b { color: #1e1530; font-weight: 700; }
.tb-chip-dot {
width: 6px; height: 6px; border-radius: 50%;
box-shadow: 0 0 6px currentColor;
}
/* ---- Responsive ---- */
@media (max-width: 960px) {
.tb-pay-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.tb-pay-canvas { min-height: 540px; padding: 20px 16px 16px; }
.tb-node { padding: 8px 10px 8px 8px; }
.tb-node-name { font-size: 11px; }
.tb-node-sub { font-size: 9px; }
.tb-node-ico { width: 28px; height: 28px; }
.tb-term-wrap { width: 260px; }
.tb-term-3d { width: 260px; height: 175px; }
}
@media (max-width: 640px) {
.tb-pay-sec { padding: 66px 0; }
.tb-pay-canvas { min-height: 480px; }
.tb-pay-head h2 { font-size: 1.75rem !important; }
.tb-term-wrap { width: 220px; }
.tb-term-3d { width: 220px; height: 148px; }
.tb-pay-chips { gap: 6px; }
.tb-pay-chip { font-size: 10px; padding: 6px 10px; }
}
/* --- Clover Mini 3 ![]()
styles --- */
.tb-term-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
/* transparent PNG/WebP — no blend mode needed */
}
/* Soft radial aura behind the landscape terminal */
.tb-term-3d::before {
content: "";
position: absolute;
inset: -14% -10% -18% -10%;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(139,92,246,.22) 0%, rgba(242,85,77,.08) 40%, transparent 70%);
filter: blur(28px);
z-index: -1;
pointer-events: none;
animation: tbTermAura 4.5s ease-in-out infinite;
}
@keyframes tbTermAura {
0%, 100% { opacity: .55; transform: scale(1); }
50% { opacity: .9; transform: scale(1.06); }
}
/* --- Telebridge middleware nodes (n8n Automation, Webhook Router) --- */
.tb-mnode {
position: absolute;
display: flex; align-items: center; gap: 8px;
padding: 7px 12px 7px 8px;
background: linear-gradient(135deg, rgba(30,21,48,.92), rgba(28,10,74,.88));
border: 1px solid rgba(139,92,246,.35);
border-radius: 12px;
box-shadow:
0 10px 26px -8px rgba(30,21,48,.5),
0 0 0 1px rgba(255,255,255,.03) inset,
0 0 16px rgba(139,92,246,.18);
z-index: 4;
transform: translate(-50%, -50%);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
animation: tbMnodeFloat 5s ease-in-out infinite;
}
.tb-mnode:hover {
transform: translate(-50%, -50%) scale(1.04);
box-shadow:
0 14px 32px -8px rgba(30,21,48,.6),
0 0 20px rgba(139,92,246,.35);
}
.tb-mnode-badge {
font-size: 8.5px; font-weight: 800;
color: #F2554D;
background: rgba(242,85,77,.14);
border: 1px solid rgba(242,85,77,.35);
padding: 2px 5px;
border-radius: 4px;
letter-spacing: .06em;
line-height: 1;
flex-shrink: 0;
}
.tb-mnode-ico {
width: 24px; height: 24px;
border-radius: 7px;
background: rgba(139,92,246,.14);
border: 1px solid rgba(139,92,246,.25);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tb-mnode-wh .tb-mnode-ico {
background: rgba(14,165,233,.14);
border-color: rgba(14,165,233,.28);
}
.tb-mnode-lbl {
font-size: 10.5px; font-weight: 700;
color: #fff;
line-height: 1.1;
letter-spacing: -.01em;
white-space: nowrap;
}
.tb-mnode-lbl span {
display: block;
font-size: 8.5px; font-weight: 500;
color: rgba(255,255,255,.45);
margin-top: 2px;
letter-spacing: .04em;
}
/* Middleware positions match SVG viewBox coords:
n8n(216,150) = 36%,32.5% | Webhook(384,322) = 64%,70% */
/* ROW 1.5: n8n Automation above terminal (300,115) = 50%,25%
ROW 2.5: Webhook Router below terminal (300,375) = 50%,81.5% (moved down from 77% to clear terminal caption) */
.tb-mnode-n8n { top: 25%; left: 50%; animation-delay: -1s; }
.tb-mnode-wh { top: 81.5%; left: 50%; animation-delay: -2.8s; }
@keyframes tbMnodeFloat {
0%, 100% { transform: translate(-50%,-50%) translateY(0); }
50% { transform: translate(-50%,-50%) translateY(-3px); }
}
/* --- Satellite integrations (Slack, Email Receipts) --- */
.tb-snode {
position: absolute;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: rgba(255,255,255,.75);
backdrop-filter: blur(8px);
border: 1px solid rgba(30,21,48,.1);
border-radius: 12px;
box-shadow: 0 4px 12px -4px rgba(30,21,48,.15);
font-size: 10px; font-weight: 700;
color: rgba(30,21,48,.75);
letter-spacing: -.01em;
white-space: nowrap;
z-index: 4;
transform: translate(-50%, -50%);
transition: transform .3s, box-shadow .3s;
}
.tb-snode:hover {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0 8px 18px -4px rgba(30,21,48,.22);
}
.tb-snode-dot {
display: inline-block;
width: 7px; height: 7px; border-radius: 50%;
box-shadow: 0 0 6px currentColor;
}
/* Satellite positions: Slack(78,386)=13%,84% | Email(552,230)=92%,50% */
/* ROW 3: Slack(108,410)=18%,89% | Email(492,410)=82%,89% */
.tb-snode-slk { top: 89%; left: 18%; }
.tb-snode-eml { top: 89%; left: 82%; }
/* --- Floating data pill labels on flow paths --- */
.tb-data-pill {
animation: tbPillPulse 3s ease-in-out infinite;
filter: drop-shadow(0 2px 4px rgba(30,21,48,.15));
}
.tb-data-pill:nth-of-type(2) { animation-delay: -.6s; }
.tb-data-pill:nth-of-type(3) { animation-delay: -1.2s; }
.tb-data-pill:nth-of-type(4) { animation-delay: -1.8s; }
.tb-data-pill:nth-of-type(5) { animation-delay: -2.4s; }
@keyframes tbPillPulse {
0%, 100% { opacity: .85; }
50% { opacity: 1; }
}
/* Stage sized for 3-row layout (Row 1 systems + n8n + Row 2 terminal band + Webhook + Row 3 satellites) */
.tb-pay-stage { min-height: 540px; }
/* Mobile: hide middleware + satellites, collapse to a simple 4-corner layout.
POS/Accounting stay at row 1; CRM/App move to bottom corners as a fallback. */
@media (max-width: 720px) {
.tb-mnode, .tb-snode, .tb-data-pill { display: none; }
.tb-node-crm { top: 88%; left: 12%; }
.tb-node-app { top: 88%; left: 88%; }
/* Hide the middleware-relay paths on mobile */
#p-pos-n8n, #p-acc-n8n, #p-n8n-term,
#p-term-wh, #p-wh-slk, #p-wh-eml { display: none; }
.tb-pay-stage { min-height: 460px; }
}
/* =====================================================
ROGERS BUSINESS & CONSUMER SECTION — #tb-rogers
Dark shell | Business tier (dark cards) | Home tier (light canvas)
===================================================== */
.tb-rogers-sec { padding: 100px 0; }
/* ---- Tier heading dividers ---- */
.tb-rogers-tier { margin-bottom: 40px; }
.tb-rogers-tier + .tb-rogers-tier { margin-top: 60px; }
.tb-tier-head {
display: flex; align-items: center; gap: 16px;
margin-bottom: 6px;
}
.tb-tier-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.tb-tier-label {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px;
border-radius: 20px;
border: 1px solid;
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
white-space: nowrap;
}
.tb-tier-label-biz {
color: #F2554D;
background: rgba(218,41,28,.1);
border-color: rgba(218,41,28,.28);
box-shadow: 0 0 14px rgba(218,41,28,.14);
}
.tb-tier-label-home {
color: #F59E0B;
background: rgba(245,158,11,.1);
border-color: rgba(245,158,11,.28);
box-shadow: 0 0 14px rgba(245,158,11,.14);
}
.tb-tier-sub {
font-size: 13px; color: rgba(255,255,255,.45);
text-align: center;
margin: 0 0 34px;
letter-spacing: -.005em;
}
/* ---- Business tier: 4-card grid ---- */
.tb-rogers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 28px;
}
.tb-rogers-card {
position: relative;
display: flex; flex-direction: column;
background: rgba(20,14,36,.6);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.05);
border-radius: 18px;
overflow: hidden;
transition: transform .4s cubic-bezier(.2,.7,.2,1),
border-color .35s,
box-shadow .4s;
cursor: default;
}
.tb-rogers-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--tc, #DA291C), transparent);
opacity: .55;
transition: opacity .35s;
}
.tb-rogers-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--tc, #DA291C) 30%, rgba(255,255,255,.08));
box-shadow:
0 22px 44px -18px rgba(0,0,0,.7),
0 0 26px -6px color-mix(in srgb, var(--tc, #DA291C) 28%, transparent);
}
.tb-rogers-card:hover::before { opacity: 1; }
/* Visual area (top) */
.tb-rogers-card-visual {
position: relative;
height: 160px;
padding: 20px 20px 12px;
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
border-bottom: 1px solid rgba(255,255,255,.04);
overflow: hidden;
}
.tb-rogers-card-visual svg {
width: 100%;
height: 100%;
display: block;
}
/* Body area (bottom) */
.tb-rogers-card-body {
padding: 20px;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
.tb-rogers-card-badge {
display: inline-flex; align-items: center;
padding: 4px 10px;
border: 1px solid;
border-radius: 6px;
font-size: 10px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
width: fit-content;
}
.tb-rogers-card-title {
font-size: 17px; font-weight: 600; color: #fff;
letter-spacing: -.02em; line-height: 1.2;
margin: 0;
}
.tb-rogers-card-desc {
font-size: 12.5px; color: rgba(255,255,255,.5);
line-height: 1.55;
margin: 0;
}
.tb-rogers-card-chips {
display: flex; flex-wrap: wrap; gap: 5px;
margin: 2px 0 4px;
}
.tb-rogers-card-chips span {
padding: 3px 9px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 6px;
font-size: 10px; font-weight: 500;
color: rgba(255,255,255,.55);
letter-spacing: .01em;
}
.tb-rogers-card-metric {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.05);
display: flex; align-items: baseline; gap: 8px;
}
.tb-rogers-card-metric b {
font-size: 20px; font-weight: 600; color: #fff;
letter-spacing: -.02em;
font-family: 'Barlow Condensed', Inter, sans-serif;
}
.tb-rogers-card-metric span {
font-size: 10px; font-weight: 500;
color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .08em;
}
/* ---- CTAs (shared between tiers) ---- */
.tb-rogers-cta {
display: flex; justify-content: center; gap: 12px;
margin-top: 26px;
flex-wrap: wrap;
}
.tb-rogers-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px;
font-size: 13.5px; font-weight: 600;
border-radius: 10px;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
font-family: inherit;
}
.tb-rogers-btn-primary {
color: #0a0515;
background: linear-gradient(120deg, #fff, #f0eafe);
box-shadow: 0 0 22px 2px rgba(255,255,255,.14);
}
.tb-rogers-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px -4px rgba(218,41,28,.35), 0 0 22px 2px rgba(255,255,255,.2);
}
.tb-rogers-btn-ghost {
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.1);
}
.tb-rogers-btn-ghost:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.2);
transform: translateY(-2px);
}
/* =====================================================
RESIDENTIAL TIER — light canvas
===================================================== */
.tb-home-canvas {
position: relative;
padding: 32px 28px;
border-radius: 24px;
background:
radial-gradient(ellipse at 30% 20%, #fff5e6 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, #f7f2ff 0%, transparent 60%),
linear-gradient(160deg, #faf3ea 0%, #f0e8f9 100%);
border: 1px solid rgba(255,255,255,.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
inset 0 -20px 40px -20px rgba(30,21,48,.05),
0 30px 60px -20px rgba(0,0,0,.5),
0 0 0 1px rgba(245,158,11,.08);
overflow: hidden;
margin-bottom: 28px;
}
.tb-home-grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
gap: 20px;
}
.tb-home-card {
background: rgba(255,255,255,.75);
backdrop-filter: blur(10px);
border: 1px solid rgba(30,21,48,.06);
border-radius: 16px;
padding: 22px;
display: flex; flex-direction: column;
transition: transform .35s cubic-bezier(.2,.7,.2,1),
box-shadow .35s,
border-color .35s;
}
.tb-home-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px -12px rgba(30,21,48,.18);
border-color: rgba(30,21,48,.12);
}
.tb-home-card-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
}
.tb-home-card-ico {
width: 40px; height: 40px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tb-home-card-title {
font-size: 15px; font-weight: 700; color: #1e1530;
letter-spacing: -.01em; margin-bottom: 2px;
}
.tb-home-card-sub {
font-size: 11px; color: rgba(30,21,48,.5);
font-weight: 500;
}
/* Internet plans mini-table */
.tb-home-plans {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 12px;
}
.tb-home-plan {
display: grid;
grid-template-columns: 62px 1fr auto;
gap: 10px;
align-items: baseline;
padding: 8px 12px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(30,21,48,.05);
border-radius: 9px;
transition: background .2s, border-color .2s;
}
.tb-home-plan:hover {
background: rgba(255,255,255,.85);
border-color: rgba(30,21,48,.09);
}
.tb-home-plan-feat {
background: linear-gradient(120deg, rgba(11,95,255,.06), rgba(139,92,246,.06));
border-color: rgba(11,95,255,.18);
}
.tb-home-plan-speed {
font-size: 20px; font-weight: 700; color: #1e1530;
font-family: 'Barlow Condensed', Inter, sans-serif;
letter-spacing: -.01em;
line-height: 1;
}
.tb-home-plan-speed sub {
font-size: 9px; color: rgba(30,21,48,.5);
font-weight: 500; font-family: Inter, sans-serif;
letter-spacing: normal;
margin-left: 2px;
vertical-align: baseline;
}
.tb-home-plan-name {
font-size: 12px; font-weight: 600; color: #1e1530;
}
.tb-home-plan-name b {
display: inline-block;
margin-left: 6px;
font-size: 9px; font-weight: 700;
color: #0B5FFF;
background: rgba(11,95,255,.1);
padding: 2px 6px;
border-radius: 4px;
letter-spacing: .04em;
vertical-align: middle;
}
.tb-home-plan-price {
font-size: 15px; font-weight: 700; color: #1e1530;
letter-spacing: -.01em;
}
.tb-home-plan-price sub {
font-size: 10px; color: rgba(30,21,48,.5);
font-weight: 500;
margin-left: 1px;
vertical-align: baseline;
}
.tb-home-note {
font-size: 10px; color: rgba(30,21,48,.4);
font-style: italic;
text-align: center;
padding-top: 6px;
}
/* Feature list for TV / Wireless cards */
.tb-home-feat-list {
list-style: none;
padding: 0; margin: 0 0 14px;
display: flex; flex-direction: column;
gap: 8px;
flex: 1;
}
.tb-home-feat-list li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px;
color: rgba(30,21,48,.7);
line-height: 1.45;
}
.tb-home-check {
flex-shrink: 0;
width: 16px; height: 16px;
border-radius: 50%;
background: rgba(0,230,118,.14);
color: #059669;
font-size: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800;
margin-top: 1px;
}
.tb-home-tag {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 6px 12px;
border: 1px solid;
border-radius: 20px;
font-size: 10.5px; font-weight: 700;
letter-spacing: .02em;
margin-top: auto;
}
/* ---- Responsive ---- */
@media (max-width: 1080px) {
.tb-rogers-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tb-home-grid { grid-template-columns: 1fr 1fr; }
.tb-home-card-internet { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.tb-rogers-sec { padding: 66px 0; }
.tb-rogers-grid { grid-template-columns: 1fr; }
.tb-home-grid { grid-template-columns: 1fr; gap: 14px; }
.tb-home-card-internet { grid-column: auto; }
.tb-home-canvas { padding: 20px 16px; }
.tb-tier-sub { font-size: 12px; margin-bottom: 26px; padding: 0 12px; }
.tb-rogers-card-visual { height: 140px; }
}
/* =====================================================
HOLOGRAPHIC CANADA GLOBE — #tb-industries map
===================================================== */
.tb-globe-wrap {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 32px;
align-items: center;
max-width: 1100px;
margin: 0 auto 44px;
}
.tb-globe-stage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-height: 560px;
border-radius: 24px;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 45%, rgba(139,92,246,.08) 0%, transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(45,212,207,.05) 0%, transparent 50%),
#05030f;
border: 1px solid rgba(139,92,246,.12);
box-shadow:
inset 0 0 60px rgba(139,92,246,.06),
0 30px 70px -30px rgba(0,0,0,.7);
}
#tb-globe-mount {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
touch-action: none; /* let OrbitControls handle touch */
}
#tb-globe-mount canvas { display: block; }
/* Holographic tooltip */
#tb-globe-tip {
position: absolute;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease;
transform: translate(-50%, -100%);
background: rgba(8,5,24,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(139,92,246,.3);
border-radius: 12px;
padding: 10px 14px;
min-width: 180px;
max-width: 240px;
z-index: 20;
box-shadow: 0 0 20px rgba(139,92,246,.2);
}
#tb-globe-tip::after {
content: "";
position: absolute;
bottom: -5px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 9px; height: 9px;
background: rgba(8,5,24,.92);
border-right: 1px solid rgba(139,92,246,.3);
border-bottom: 1px solid rgba(139,92,246,.3);
}
#tb-globe-tip-city {
font-size: 14px; font-weight: 700; color: #fff;
margin-bottom: 4px; letter-spacing: -.01em;
}
#tb-globe-tip-svc {
font-size: 11px; color: rgba(255,255,255,.5);
line-height: 1.5;
}
/* Drag hint */
.tb-globe-hint {
position: absolute;
bottom: 14px; left: 50%;
transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 14px;
border-radius: 20px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.5);
font-size: 11px; font-weight: 500;
letter-spacing: .04em;
backdrop-filter: blur(8px);
pointer-events: none;
animation: tbHintFade 4s ease-in-out infinite;
}
@keyframes tbHintFade {
0%, 100% { opacity: .4; }
50% { opacity: .8; }
}
.tb-globe-fallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.4);
font-size: 13px;
padding: 40px;
text-align: center;
}
/* Legend panel */
.tb-globe-legend {
display: flex; flex-direction: column;
gap: 16px;
}
.tb-globe-legend-title {
font-size: 12px; font-weight: 700;
color: rgba(255,255,255,.5);
letter-spacing: .12em; text-transform: uppercase;
margin-bottom: 2px;
}
.tb-globe-legend-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
transition: border-color .3s, background .3s;
}
.tb-globe-legend-item:hover {
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.1);
}
.tb-globe-swatch {
width: 12px; height: 12px;
border-radius: 50%;
margin-top: 3px;
flex-shrink: 0;
}
.tb-globe-legend-name {
font-size: 13px; font-weight: 600; color: #fff;
letter-spacing: -.01em; margin-bottom: 3px;
}
.tb-globe-legend-sub {
font-size: 11px; color: rgba(255,255,255,.42);
line-height: 1.5;
}
.tb-globe-legend-stats {
display: flex; gap: 10px;
margin-top: 4px;
}
.tb-globe-stat {
flex: 1;
padding: 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.05);
border-radius: 12px;
text-align: center;
}
.tb-globe-stat b {
display: block;
font-size: 18px; font-weight: 600; color: #A78BFA;
font-family: 'Barlow Condensed', Inter, sans-serif;
letter-spacing: -.01em;
line-height: 1.1;
}
.tb-globe-stat span {
font-size: 9px; color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .06em;
}
/* Responsive */
@media (max-width: 900px) {
.tb-globe-wrap {
grid-template-columns: 1fr;
gap: 24px;
}
.tb-globe-stage { max-height: 460px; }
.tb-globe-legend-stats { max-width: 400px; }
}
@media (max-width: 560px) {
.tb-globe-stage { max-height: 360px; border-radius: 18px; }
.tb-globe-legend-item { padding: 12px 14px; }
}
/* =====================================================
INDUSTRIES — BENTO CARDS (feature tiles + mini tiles)
Replaces the uniform .tb-ind-card grid.
===================================================== */
/* ---- Featured row: 4 large tiles ---- */
.tb-ind-featured {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.tbi-feat {
position: relative;
display: flex; flex-direction: column;
padding: 22px 20px 20px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none; color: #fff;
overflow: hidden;
min-height: 340px;
transition: transform .45s cubic-bezier(.22,.7,.2,1), border-color .4s, box-shadow .45s;
}
.tbi-feat-glow {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 0%, var(--accent), transparent 62%);
opacity: .08; pointer-events: none;
transition: opacity .45s;
}
.tbi-feat::after {
content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: .6; transition: opacity .4s;
}
.tbi-feat:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.1));
box-shadow: 0 28px 54px -20px rgba(0,0,0,.7),
0 0 34px -8px color-mix(in srgb, var(--accent) 34%, transparent);
}
.tbi-feat:hover .tbi-feat-glow { opacity: .16; }
.tbi-feat:hover::after { opacity: 1; }
.tbi-feat-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
position: relative; z-index: 2;
}
.tbi-feat-icon {
font-size: 30px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
transition: transform .45s;
}
.tbi-feat:hover .tbi-feat-icon { transform: scale(1.12) rotate(-4deg); }
.tbi-feat-name {
font-size: 19px; font-weight: 700; color: #fff;
letter-spacing: -.02em; line-height: 1.1;
}
.tbi-feat-tag {
font-size: 10px; color: rgba(255,255,255,.4);
letter-spacing: .04em; margin-top: 3px;
}
/* Feature visual scene */
.tbi-feat-viz {
position: relative; z-index: 2;
height: 96px;
margin-bottom: 14px;
border-radius: 12px;
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.04);
overflow: hidden;
}
.tbi-feat-viz svg { width: 100%; height: 100%; display: block; }
/* KPI row */
.tbi-feat-kpis {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-bottom: 14px;
position: relative; z-index: 2;
}
.tbi-kpi {
padding: 10px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
border-radius: 11px;
border-left: 3px solid var(--accent);
}
.tbi-kpi b {
display: block;
font-size: 24px; font-weight: 700;
color: var(--accent);
font-family: 'Barlow Condensed', Inter, sans-serif;
letter-spacing: -.01em; line-height: 1;
}
.tbi-kpi span {
font-size: 9.5px; color: rgba(255,255,255,.45);
text-transform: uppercase; letter-spacing: .05em;
margin-top: 4px; display: block;
}
/* integration chips */
.tbi-feat-list {
display: flex; flex-wrap: wrap; gap: 5px;
margin-bottom: 16px;
position: relative; z-index: 2;
}
.tbi-feat-list span {
padding: 4px 9px;
background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.03));
border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.06));
border-radius: 6px;
font-size: 10px; font-weight: 500;
color: rgba(255,255,255,.6);
}
.tbi-feat-go {
margin-top: auto;
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600;
color: color-mix(in srgb, var(--accent) 80%, #fff);
position: relative; z-index: 2;
}
.tbi-feat-go span { transition: transform .3s; }
.tbi-feat:hover .tbi-feat-go span { transform: translateX(5px); }
/* ---- Feature-specific animations ---- */
/* Retail: loyalty points drift + heart pop */
.tbi-retail-pts circle { animation: tbiDrift 2.4s ease-in-out infinite; }
.tbi-retail-pts circle:nth-child(2){ animation-delay:.4s; }
.tbi-retail-pts circle:nth-child(3){ animation-delay:.8s; }
@keyframes tbiDrift {
0%,100% { transform: translate(0,0); opacity:.4; }
50% { transform: translate(12px,-8px); opacity:1; }
}
.tbi-retail-heart { animation: tbiHeartPop 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes tbiHeartPop {
0%,80%,100% { transform: scale(0); opacity:0; }
40%,60% { transform: scale(1); opacity:1; }
}
/* Restaurants: bars grow, ticket slides */
.tbi-viz-restaurants .tbi-bar { transform-origin: bottom; animation: tbiBarGrow 3s ease-in-out infinite; }
.tbi-viz-restaurants .tbi-bar:nth-child(1){ animation-delay:0s; }
.tbi-viz-restaurants .tbi-bar:nth-child(2){ animation-delay:.2s; }
.tbi-viz-restaurants .tbi-bar:nth-child(3){ animation-delay:.4s; }
.tbi-viz-restaurants .tbi-bar:nth-child(4){ animation-delay:.6s; }
@keyframes tbiBarGrow {
0%,100% { transform: scaleY(.75); }
50% { transform: scaleY(1); }
}
.tbi-ticket { animation: tbiTicketFloat 3s ease-in-out infinite; }
@keyframes tbiTicketFloat {
0%,100% { transform: translate(170px,20px); }
50% { transform: translate(170px,14px); }
}
/* Professional: nodes pulse */
.tbi-pro-node { animation: tbiNodePulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tbi-viz-pro .tbi-pro-node:nth-child(1){ animation-delay:0s; }
.tbi-viz-pro .tbi-pro-node:nth-child(2){ animation-delay:.3s; }
.tbi-viz-pro .tbi-pro-node:nth-child(3){ animation-delay:.6s; }
.tbi-viz-pro .tbi-pro-node:nth-child(4){ animation-delay:.9s; }
@keyframes tbiNodePulse {
0%,100% { opacity:.5; }
50% { opacity:1; }
}
/* ---- Compact row: 6 mini tiles ---- */
.tb-ind-compact {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.tbi-mini {
position: relative;
display: flex; flex-direction: column; align-items: center;
padding: 18px 12px 14px;
border-radius: 15px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none; color: #fff;
text-align: center; overflow: hidden;
min-height: 132px;
transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s, box-shadow .4s;
}
.tbi-mini::before {
content:''; position:absolute; inset:0;
background: radial-gradient(circle at 50% 15%, var(--accent), transparent 70%);
opacity:0; transition:opacity .4s; pointer-events:none;
}
.tbi-mini:hover::before { opacity:.12; }
.tbi-mini:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.1));
background: rgba(255,255,255,.05);
box-shadow: 0 18px 36px -16px rgba(0,0,0,.5),
0 0 22px -8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.tbi-mini-icon {
font-size: 26px; margin-bottom: 9px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
transition: transform .4s;
position: relative; z-index: 2;
}
.tbi-mini:hover .tbi-mini-icon { transform: scale(1.15) translateY(-2px); }
.tbi-mini-name {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88);
letter-spacing: .01em; margin-bottom: 4px;
position: relative; z-index: 2;
}
.tbi-mini-stack {
font-size: 9px; color: rgba(255,255,255,.3);
letter-spacing: .03em; line-height: 1.4;
margin-bottom: 10px;
position: relative; z-index: 2;
}
.tbi-mini-badge {
margin-top: auto;
font-size: 9px; font-weight: 700;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
padding: 4px 9px; border-radius: 20px;
letter-spacing: .03em;
opacity: 0; transform: translateY(6px);
transition: opacity .35s, transform .35s;
position: relative; z-index: 2;
}
.tbi-mini:hover .tbi-mini-badge { opacity: 1; transform: translateY(0); }
/* Mini-specific micro-animations */
/* Healthcare: sparkline/heartbeat bars */
.tbi-mini-spark {
position: absolute; top: 12px; right: 12px;
display: flex; align-items: flex-end; gap: 2px; height: 14px;
opacity: .5;
}
.tbi-mini-spark span {
width: 3px; background: #22C55E; border-radius: 1px;
animation: tbiSpark 1.2s ease-in-out infinite;
}
.tbi-mini-spark span:nth-child(1){ height:6px; animation-delay:0s; }
.tbi-mini-spark span:nth-child(2){ height:12px; animation-delay:.2s; }
.tbi-mini-spark span:nth-child(3){ height:8px; animation-delay:.4s; }
@keyframes tbiSpark {
0%,100% { transform: scaleY(.5); }
50% { transform: scaleY(1); }
}
/* Manufacturing: spinning gears */
.tbi-mini-gears {
position: absolute; top: 10px; right: 10px;
width: 40px; height: 40px; opacity: .4;
}
.tbi-mini-gears svg { width: 100%; height: 100%; }
.tbi-gear1 { transform-origin: 14px 16px; animation: tbiSpin 4s linear infinite; }
.tbi-gear2 { transform-origin: 26px 24px; animation: tbiSpin 4s linear infinite reverse; }
@keyframes tbiSpin { to { transform: rotate(360deg); } }
/* ---- Responsive ---- */
@media (max-width: 1080px) {
.tb-ind-featured { grid-template-columns: repeat(2, 1fr); }
.tb-ind-compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.tb-ind-featured { grid-template-columns: 1fr; }
.tb-ind-compact { grid-template-columns: repeat(2, 1fr); }
.tbi-feat { min-height: 0; }
}
/* =====================================================
A WORD FROM OUR PARTNERS — testimonial carousel
#tb-voices
===================================================== */
.tb-voices {
position: relative;
margin-top: 44px;
padding: 0 4px;
}
.tb-voices-track {
display: flex;
gap: 20px;
transition: transform .6s cubic-bezier(.22,.7,.2,1);
will-change: transform;
cursor: grab;
}
.tb-voices-track:active { cursor: grabbing; }
/* Each card — 3 per view on desktop */
.tb-voice {
position: relative;
flex: 0 0 calc((100% - 40px) / 3);
box-sizing: border-box;
display: flex; flex-direction: column;
padding: 26px 24px 24px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.07);
overflow: hidden;
transition: border-color .4s, box-shadow .4s, transform .4s;
user-select: none;
}
.tb-voice::before {
content: '';
position: absolute; left: 0; top: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: .55;
}
.tb-voice::after {
content: '';
position: absolute; top: -30px; right: -30px;
width: 130px; height: 130px; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
opacity: .12; pointer-events: none;
}
.tb-voice:hover {
border-color: color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.1));
box-shadow: 0 24px 50px -22px rgba(0,0,0,.7),
0 0 30px -10px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Ribbon tag */
.tb-voice-ribbon {
align-self: flex-start;
font-size: 9.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
padding: 4px 10px; border-radius: 20px;
margin-bottom: 16px;
}
/* Partnership lockup (partner cards) */
.tb-voice-lockup {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: #fff;
border-radius: 12px;
margin-bottom: 16px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.tb-voice-logo { display: block; object-fit: contain; }
.tb-voice-logo-paystone { height: 22px; }
.tb-voice-logo-rogers { height: 26px; }
.tb-voice-logo-tb { height: 30px; }
.tb-voice-x {
display: inline-flex; align-items: center; justify-content: center;
opacity: .6;
flex-shrink: 0;
}
.tb-voice-x svg { stroke: rgba(30,21,48,.35) !important; }
/* Stars */
.tb-voice-stars {
color: #F59E0B;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 14px;
text-shadow: 0 0 10px rgba(245,158,11,.3);
}
/* Quote */
.tb-voice-quote {
font-size: 13.5px;
line-height: 1.68;
color: rgba(255,255,255,.72);
margin: 0 0 20px;
font-style: normal;
position: relative;
flex: 1;
}
.tb-voice-quote::before {
content: '\201C';
position: absolute;
top: -18px; left: -6px;
font-size: 52px;
font-family: Georgia, serif;
color: color-mix(in srgb, var(--accent) 40%, transparent);
line-height: 1;
opacity: .5;
}
/* Person */
.tb-voice-person {
display: flex; align-items: center; gap: 12px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.07);
}
.tb-voice-avatar {
width: 42px; height: 42px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff;
flex-shrink: 0;
letter-spacing: .02em;
}
.tb-voice-name {
font-size: 13.5px; font-weight: 700; color: #fff;
letter-spacing: -.01em; margin-bottom: 2px;
}
.tb-voice-role {
font-size: 10.5px; color: rgba(255,255,255,.45);
line-height: 1.4;
}
/* Arrows */
.tb-voices-arrow {
position: absolute; top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(20,14,36,.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.75);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 10;
transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.tb-voices-arrow:hover {
background: rgba(139,92,246,.25);
border-color: rgba(139,92,246,.5);
color: #fff;
}
.tb-voices-prev { left: -14px; }
.tb-voices-next { right: -14px; }
.tb-voices-arrow:active { transform: translateY(-50%) scale(.92); }
/* Dots */
.tb-voices-dots {
display: flex; justify-content: center; gap: 8px;
margin-top: 28px;
}
.tb-voices-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,.18);
border: none; cursor: pointer; padding: 0;
transition: background .3s, width .3s;
}
.tb-voices-dot.active {
width: 26px; border-radius: 4px;
background: linear-gradient(90deg, #8B5CF6, #A78BFA);
}
/* Responsive */
@media (max-width: 1024px) {
.tb-voice { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 720px) {
.tb-voice { flex-basis: 100%; }
.tb-voices-prev { left: 2px; }
.tb-voices-next { right: 2px; }
.tb-voices-arrow { width: 38px; height: 38px; }
}
/* =====================================================
REGULATORY ALIGNMENT & TRUST — #tb-regulatory
Animated authority emblems
===================================================== */
.tb-trust-sec {
position: relative;
background: linear-gradient(180deg, #06111d 0%, #0a0620 100%);
padding: 90px 0;
border-top: 1px solid rgba(255,255,255,.05);
border-bottom: 1px solid rgba(255,255,255,.05);
overflow: hidden;
}
.tb-trust-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tb-trust-blob {
position: absolute; border-radius: 50%; filter: blur(120px);
}
.tb-trust-blob-1 { top: -10%; left: 5%; width: 40%; height: 50%; background: radial-gradient(circle, rgba(45,212,207,.10), transparent 70%); }
.tb-trust-blob-2 { bottom: -12%; right: 5%; width: 44%; height: 52%; background: radial-gradient(circle, rgba(139,92,246,.08), transparent 70%); }
.tb-trust-maple {
position: absolute; right: -30px; top: 50%;
transform: translateY(-50%);
width: 300px; height: 300px;
opacity: .03; color: #fff;
}
.tb-trust-maple svg { width: 100%; height: 100%; }
/* Grid */
.tb-trust-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-top: 44px;
}
.tb-authority {
position: relative;
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 26px 16px 22px;
border-radius: 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
overflow: hidden;
transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s, box-shadow .4s;
}
.tb-authority::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, var(--ac), transparent 65%);
opacity: 0; transition: opacity .4s; pointer-events: none;
}
.tb-authority:hover::before { opacity: .1; }
.tb-authority:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--ac) 40%, rgba(255,255,255,.1));
background: rgba(255,255,255,.05);
box-shadow: 0 22px 44px -18px rgba(0,0,0,.6),
0 0 26px -8px color-mix(in srgb, var(--ac) 32%, transparent);
}
/* Emblem */
.tb-auth-emblem {
width: 64px; height: 64px;
margin-bottom: 16px;
position: relative; z-index: 2;
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ac) 30%, transparent));
}
.tb-auth-emblem svg { width: 100%; height: 100%; overflow: visible; }
/* Rotating progress ring — always subtly rotating, speeds on hover */
.tb-auth-ring {
transform-origin: 32px 32px;
animation: tbAuthSpin 8s linear infinite;
opacity: .85;
}
.tb-authority:hover .tb-auth-ring { animation-duration: 2.5s; }
@keyframes tbAuthSpin { to { transform: rotate(360deg); } }
/* PIPEDA dot pulse */
.tb-auth-dot { animation: tbAuthPulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes tbAuthPulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
/* CASL — envelope flap + check draw on hover */
.tb-auth-check { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .5s ease .1s; }
.tb-authority:hover .tb-auth-check { stroke-dashoffset: 0; }
.tb-auth-check-c { transition: transform .4s; transform-origin: 43px 41px; transform-box: fill-box; }
.tb-authority:hover .tb-auth-check-c { transform: scale(1.1); }
/* CRTC — broadcast waves ripple */
.tb-auth-wave1 { animation: tbWave 2s ease-out infinite; transform-origin: 32px 36px; transform-box: fill-box; }
.tb-auth-wave2 { animation: tbWave 2s ease-out infinite .3s; transform-origin: 32px 36px; transform-box: fill-box; }
.tb-auth-wave3 { animation: tbWave 2s ease-out infinite .6s; transform-origin: 32px 36px; transform-box: fill-box; }
@keyframes tbWave { 0%{ opacity:0; } 40%{ opacity:.7; } 100%{ opacity:0; } }
/* PCI — lock + shield pulse */
.tb-auth-lock { animation: tbAuthPulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.tb-auth-shield-pulse { animation: tbShieldPulse 3s ease-in-out infinite; }
@keyframes tbShieldPulse { 0%,100%{ opacity:.3; } 50%{ opacity:.8; } }
/* SOC 2 — check draw loop */
.tb-auth-soc-check { stroke-dasharray: 18; stroke-dashoffset: 18; animation: tbDraw 3s ease-in-out infinite; }
@keyframes tbDraw { 0%{ stroke-dashoffset:18; } 40%,60%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:18; } }
/* AI — nodes pulse in sequence */
.tb-auth-ai-nodes circle { animation: tbAuthPulse 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.tb-auth-ai-nodes circle:nth-child(1){ animation-delay:0s; }
.tb-auth-ai-nodes circle:nth-child(2){ animation-delay:.3s; }
.tb-auth-ai-nodes circle:nth-child(3){ animation-delay:.6s; }
.tb-auth-ai-nodes circle:nth-child(4){ animation-delay:.9s; }
/* Text */
.tb-auth-code {
font-size: 17px; font-weight: 800;
color: #fff; letter-spacing: .02em;
margin-bottom: 4px;
position: relative; z-index: 2;
font-family: 'DM Sans', Inter, sans-serif;
}
.tb-auth-name {
font-size: 11px; font-weight: 600;
color: var(--ac);
letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 10px;
position: relative; z-index: 2;
}
.tb-auth-desc {
font-size: 11px; line-height: 1.5;
color: rgba(255,255,255,.5);
position: relative; z-index: 2;
}
/* Trust footer strip */
.tb-trust-footer {
display: flex; align-items: center; justify-content: center;
gap: 28px; flex-wrap: wrap;
margin-top: 34px;
padding: 20px 28px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 16px;
}
.tb-trust-foot-item {
display: flex; align-items: center; gap: 12px;
font-size: 13px; color: rgba(255,255,255,.6);
}
.tb-trust-foot-item b { color: rgba(255,255,255,.9); font-weight: 700; }
.tb-trust-foot-mark {
display: inline-flex; width: 22px; height: 22px;
color: #F2554D; flex-shrink: 0;
}
.tb-trust-foot-mark svg { width: 100%; height: 100%; }
.tb-trust-foot-shield { color: #2DD4CF; }
.tb-trust-foot-divider {
width: 1px; height: 28px;
background: rgba(255,255,255,.12);
}
/* Responsive */
@media (max-width: 1024px) {
.tb-trust-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.tb-trust-sec { padding: 66px 0; }
.tb-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tb-trust-foot-divider { display: none; }
.tb-trust-footer { flex-direction: column; gap: 14px; }
}
/* =====================================================
FINAL CTA — lead-gen anchor #tb-finalcta
===================================================== */
.tb-finalcta {
position: relative;
padding: 90px 0;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 0%, #2a0f5c 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, #4a0f3a 0%, transparent 55%),
linear-gradient(135deg, #1C0A4A 0%, #0a0620 60%, #1a0730 100%);
}
.tb-fcta-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tb-fcta-mesh { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.tb-fcta-mesh-1 { top: -20%; left: -5%; width: 45%; height: 70%; background: radial-gradient(circle, rgba(139,92,246,.55), transparent 70%); animation: tbFctaFloat 14s ease-in-out infinite; }
.tb-fcta-mesh-2 { bottom: -25%; right: -8%; width: 50%; height: 75%; background: radial-gradient(circle, rgba(242,85,77,.4), transparent 70%); animation: tbFctaFloat 18s ease-in-out infinite reverse; }
.tb-fcta-mesh-3 { top: 30%; left: 45%; width: 35%; height: 50%; background: radial-gradient(circle, rgba(45,212,207,.28), transparent 70%); animation: tbFctaFloat 16s ease-in-out infinite 2s; }
@keyframes tbFctaFloat {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(28px,-22px) scale(1.08); }
}
.tb-fcta-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
background-size: 54px 54px;
opacity: .025;
mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}
.tb-fcta-inner {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 48px;
align-items: center;
max-width: 1120px;
}
/* Left column */
.tb-fcta-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px;
border-radius: 20px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: #fff;
font-size: 12px; font-weight: 600;
letter-spacing: .03em;
margin-bottom: 22px;
backdrop-filter: blur(8px);
}
.tb-fcta-badge-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #2DD4CF;
box-shadow: 0 0 10px #2DD4CF;
animation: tbFctaPulse 1.6s infinite;
}
@keyframes tbFctaPulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.8); } }
.tb-fcta-title {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 600;
color: #fff;
line-height: 1.08;
letter-spacing: -.03em;
margin: 0 0 18px;
}
.tb-fcta-sub {
font-size: 15.5px;
line-height: 1.65;
color: rgba(255,255,255,.62);
margin: 0 0 28px;
max-width: 520px;
}
/* Trust stats */
.tb-fcta-trust {
display: flex; gap: 28px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.tb-fcta-trust-item b {
display: block;
font-size: 32px; font-weight: 700;
font-family: 'Barlow Condensed', Inter, sans-serif;
background: linear-gradient(120deg, #fff, #C4B5FD);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
line-height: 1;
}
.tb-fcta-trust-item span {
font-size: 11px; color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .06em;
margin-top: 5px; display: block;
}
.tb-fcta-assurances {
display: flex; flex-direction: column; gap: 8px;
}
.tb-fcta-assurances span {
font-size: 12.5px; color: rgba(255,255,255,.6);
font-weight: 500;
}
/* Right column — the form card */
.tb-fcta-right { position: relative; }
.tb-fcta-card {
position: relative;
background: rgba(255,255,255,.055);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.14);
border-radius: 22px;
padding: 28px 26px;
box-shadow: 0 40px 80px -30px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.12);
}
.tb-fcta-card::before {
content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
border-radius: 22px 22px 0 0;
background: linear-gradient(90deg, #8B5CF6, #F2554D, #2DD4CF);
}
.tb-fcta-card-head { margin-bottom: 18px; }
.tb-fcta-card-title {
font-size: 18px; font-weight: 700; color: #fff;
letter-spacing: -.01em; margin-bottom: 4px;
}
.tb-fcta-card-sub {
font-size: 12.5px; color: rgba(255,255,255,.5);
}
.tb-fcta-field { margin-bottom: 11px; }
.tb-fcta-field input,
.tb-fcta-field select {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border-radius: 11px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: #fff;
font-size: 13.5px;
font-family: inherit;
transition: border-color .25s, background .25s, box-shadow .25s;
outline: none;
}
.tb-fcta-field input::placeholder { color: rgba(255,255,255,.4); }
.tb-fcta-field input:focus,
.tb-fcta-field select:focus {
border-color: rgba(139,92,246,.6);
background: rgba(255,255,255,.09);
box-shadow: 0 0 0 3px rgba(139,92,246,.15);
}
.tb-fcta-field select { color: rgba(255,255,255,.7); cursor: pointer; }
.tb-fcta-field select option { background: #1a1030; color: #fff; }
.tb-fcta-submit {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 9px;
padding: 14px;
margin-top: 6px;
border: none;
border-radius: 12px;
background: linear-gradient(120deg, #8B5CF6, #A855F7 55%, #F2554D);
background-size: 160% 100%;
color: #fff;
font-size: 14.5px; font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: transform .25s, box-shadow .25s, background-position .5s;
box-shadow: 0 12px 30px -8px rgba(139,92,246,.6);
}
.tb-fcta-submit:hover {
transform: translateY(-2px);
background-position: 100% 0;
box-shadow: 0 16px 40px -8px rgba(242,85,77,.55);
}
.tb-fcta-submit:active { transform: translateY(0); }
.tb-fcta-submit:disabled { opacity: .7; cursor: default; transform: none; }
.tb-fcta-submit svg { transition: transform .3s; }
.tb-fcta-submit:hover svg { transform: translateX(4px); }
.tb-fcta-alt {
text-align: center;
font-size: 11.5px;
color: rgba(255,255,255,.45);
margin-top: 14px;
}
.tb-fcta-alt a { color: #C4B5FD; text-decoration: none; font-weight: 600; }
.tb-fcta-alt a:hover { text-decoration: underline; }
/* Success state */
.tb-fcta-success { text-align: center; padding: 20px 6px; }
.tb-fcta-success-ico {
width: 62px; height: 62px; margin: 0 auto 16px;
border-radius: 50%;
background: linear-gradient(135deg, #8B5CF6, #F2554D);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 26px rgba(139,92,246,.5);
animation: tbFctaPop .5s cubic-bezier(.2,1.3,.4,1);
}
@keyframes tbFctaPop { 0%{ transform:scale(0); } 100%{ transform:scale(1); } }
.tb-fcta-success h3 { font-size: 22px; color: #fff; margin: 0 0 8px; }
.tb-fcta-success p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; max-width: 300px; margin-inline: auto; }
/* Responsive */
@media (max-width: 900px) {
.tb-fcta-inner { grid-template-columns: 1fr; gap: 34px; }
.tb-fcta-sub { max-width: none; }
}
@media (max-width: 640px) {
.tb-finalcta { padding: 64px 0; }
.tb-fcta-trust { gap: 20px; }
.tb-fcta-trust-item b { font-size: 26px; }
.tb-fcta-card { padding: 22px 18px; }
}
/* =====================================================
HEADER DROPDOWN FIX + ICON ENHANCEMENT
Fixes the hover-gap (menu vanished when crossing the gap)
and gives mega menus real icons + brand styling.
===================================================== */
/* 1) HOVER-GAP FIX ---------------------------------------------------
The menu sat 12px below the button with empty space between, so moving
the cursor toward it dropped :hover. We remove the visual gap, keep the
panel flush under the item, and add an invisible "bridge" that keeps the
hover path unbroken. */
.hdr-minimal .nav-item.has-mega { position: relative !important; }
.hdr-minimal .mega {
top: 100% !important; /* flush, no physical gap */
margin-top: 0 !important;
padding-top: 26px !important; /* internal breathing room replaces the gap */
/* keep the visual panel offset via background inset below */
}
/* Invisible bridge spanning button → panel so hover never breaks */
.hdr-minimal .nav-item.has-mega::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 26px;
background: transparent;
display: none;
}
.hdr-minimal .nav-item.has-mega:hover::after { display: block; }
/* The actual visible card is drawn via a wrapper padding trick:
give .mega a transparent top pad (done above) and paint the card
background only on an inner box. Simpler: keep bg on .mega but pull
it up visually with a translated inner. We instead paint bg on .mega
and use a ::before to render the arrow + maintain the gap look. */
.hdr-minimal .mega {
background: transparent !important; /* move real bg to inner card */
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
/* Inner card = the grid gets the styling now */
.hdr-minimal .mega > .mega-grid {
background: rgba(12,6,24,.97) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid rgba(139,92,246,.16) !important;
border-radius: 16px !important;
box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 40px -12px rgba(139,92,246,.35) !important;
padding: 20px !important;
position: relative;
}
/* subtle top accent line on the card */
.hdr-minimal .mega > .mega-grid::before {
content: "";
position: absolute; left: 20px; right: 20px; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.7), rgba(45,212,207,.5), transparent);
border-radius: 2px;
}
/* little pointer arrow up to the nav item */
.hdr-minimal .mega > .mega-grid::after {
content: "";
position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 12px; height: 12px;
background: rgba(12,6,24,.97);
border-left: 1px solid rgba(139,92,246,.16);
border-top: 1px solid rgba(139,92,246,.16);
}
/* Entrance animation */
.hdr-minimal .mega {
opacity: 0 !important;
pointer-events: none !important;
transform: translateX(-50%) translateY(8px) !important;
transition: opacity .22s ease, transform .28s cubic-bezier(.22,.7,.2,1) !important;
}
.hdr-minimal .nav-item.has-mega:hover > .mega,
.hdr-minimal .mega:hover {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
/* 2) ICON ENHANCEMENTS ---------------------------------------------- */
/* Gradient icon tiles now hold an SVG glyph */
.hdr-minimal .mega-ico,
.mega-ico {
width: 34px !important; height: 34px !important;
border-radius: 9px !important;
display: inline-flex !important;
align-items: center; justify-content: center;
flex-shrink: 0;
opacity: 1 !important;
box-shadow: 0 4px 12px -2px rgba(0,0,0,.4);
transition: transform .3s cubic-bezier(.22,.7,.2,1), box-shadow .3s;
}
.mega-ico svg { width: 18px; height: 18px; display: block; }
.mega a:hover .mega-ico {
transform: scale(1.12) rotate(-4deg);
box-shadow: 0 6px 16px -2px rgba(0,0,0,.5);
}
/* Provider logos on white tiles */
.mega-ico-plain { background: #fff !important; padding: 0 6px; }
.mega-ico-plain img { max-height: 16px; max-width: 26px; width: auto; object-fit: contain; display: block; }
/* Emoji dots for Industries / Use Cases text menus */
.mega-idot {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; margin-right: 10px;
border-radius: 7px;
font-size: 13px;
flex-shrink: 0;
background: color-mix(in srgb, var(--dc, #8B5CF6) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--dc, #8B5CF6) 30%, transparent);
transition: transform .25s, background .25s;
}
.mega-grid-industries a {
display: flex !important;
align-items: center !important;
font-size: 13.5px !important;
padding: 7px 10px !important;
border-radius: 8px !important;
}
.mega-grid-industries a:hover .mega-idot {
transform: scale(1.15);
background: color-mix(in srgb, var(--dc, #8B5CF6) 28%, transparent);
}
/* Wider industries/use-cases panel so two columns breathe */
.hdr-minimal #megaIndustries > .mega-grid,
.hdr-minimal #megaUseCases > .mega-grid {
min-width: 540px !important;
}
.mega-grid-industries {
grid-template-columns: repeat(2, 1fr) !important;
gap: 2px 20px !important;
}
/* Icon-menu link rows: better alignment + spacing */
.hdr-minimal .mega a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 9px 12px !important;
}
.hdr-minimal .mega a strong { display: block; line-height: 1.3; }
.hdr-minimal .mega a em { display: block; line-height: 1.3; margin-top: 1px; }
/* Nav caret subtle rotation on open */
.hdr-minimal .nav-item.has-mega > a {
gap: 3px;
}
.hdr-minimal .nav-item.has-mega:hover > a { color: #fff !important; }
/* =====================================================
HEADER V3 — luminous island, premium type, animated iconography
===================================================== */
/* ---- 1) ISLAND: neutralized — header is transparent, islands are per-element (v4) ---- */
header#header.hdr-minimal {
}
header#header.hdr-minimal.scrolled {
}
header#header.hdr-minimal::after {
display: none !important;
}
/* ---- 2) NAV LABELS: Space Grotesk, bright, pill hover, rotating caret ---- */
.hdr-minimal .nav-links > a,
.hdr-minimal .nav-item > a {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
color: rgba(255,255,255,.86) !important;
letter-spacing: .015em !important;
padding: 9px 15px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
transition: color .2s ease, background .25s ease, box-shadow .25s ease !important;
}
.hdr-minimal .nav-links > a:hover,
.hdr-minimal .nav-item:hover > a {
color: #fff !important;
background: rgba(139,92,246,.18) !important;
box-shadow: inset 0 0 0 1px rgba(168,139,250,.28), 0 2px 12px -4px rgba(139,92,246,.5) !important;
}
.nav-caret {
width: 13px; height: 13px;
opacity: .55;
transition: transform .3s cubic-bezier(.22,.7,.2,1), opacity .2s;
}
.hdr-minimal .nav-item:hover .nav-caret {
transform: rotate(180deg);
opacity: 1;
}
/* Residential + Sign Up more visible */
.hdr-link-subtle {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
font-weight: 500 !important;
color: rgba(255,255,255,.78) !important;
}
.hdr-link-subtle:hover { color: #fff !important; }
.hdr-btn-signup {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
font-weight: 600 !important;
background: linear-gradient(120deg, #8B5CF6, #A855F7) !important;
border: 1px solid rgba(196,181,253,.4) !important;
box-shadow: 0 4px 18px -6px rgba(139,92,246,.7) !important;
}
.hdr-btn-signup:hover {
background: linear-gradient(120deg, #9d70ff, #b969ff) !important;
box-shadow: 0 6px 24px -6px rgba(139,92,246,.9) !important;
transform: translateY(-1px) !important;
}
/* ---- 3) ICON SYSTEM ---- */
/* Gradient tiles (Solutions / Resources / Company) */
.hdr-minimal .mega-ico,
.mega-ico {
width: 38px !important; height: 38px !important;
border-radius: 11px !important;
background: linear-gradient(135deg, var(--g1, #8B5CF6), var(--g2, #C084FC)) !important;
display: inline-flex !important;
align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow:
0 5px 14px -3px color-mix(in srgb, var(--g1, #8B5CF6) 55%, transparent),
inset 0 1px 0 rgba(255,255,255,.28);
transition: transform .35s cubic-bezier(.22,.7,.2,1), box-shadow .35s;
}
.mega a:hover .mega-ico {
transform: translateY(-2px) scale(1.07);
box-shadow:
0 9px 22px -4px color-mix(in srgb, var(--g1, #8B5CF6) 70%, transparent),
inset 0 1px 0 rgba(255,255,255,.35);
}
.mega-ico .mi { width: 21px; height: 21px; display: block; overflow: visible; }
.mi { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap { transform-box: fill-box; transform-origin: center; }
/* Provider white tiles */
.mega-ico-plain { background: #fff !important; padding: 0 7px !important; box-shadow: 0 5px 14px -3px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05) !important; }
.mega-ico-plain img { max-height: 15px; max-width: 26px; width: auto; object-fit: contain; display: block; }
/* Colored chips (Industries / Use Cases) */
.mega-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin-right: 11px;
border-radius: 9px;
flex-shrink: 0;
color: var(--dc, #8B5CF6);
background: color-mix(in srgb, var(--dc, #8B5CF6) 13%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc, #8B5CF6) 32%, transparent);
transition: transform .3s cubic-bezier(.22,.7,.2,1), background .25s, box-shadow .25s;
}
.mega-chip .mi { width: 17px; height: 17px; stroke: currentColor; overflow: visible; }
.mega-grid-industries a:hover .mega-chip {
transform: translateY(-1px) scale(1.1);
background: color-mix(in srgb, var(--dc, #8B5CF6) 24%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc, #8B5CF6) 55%, transparent),
0 4px 12px -4px color-mix(in srgb, var(--dc, #8B5CF6) 60%, transparent);
}
/* ---- 4) KEYFRAME LIBRARY ---- */
@keyframes miSpin { to { transform: rotate(360deg); } }
@keyframes miSpinR { to { transform: rotate(-360deg); } }
@keyframes miDrawL { 0% { stroke-dashoffset: var(--dl, 12); } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes miFlow { to { stroke-dashoffset: -14; } }
@keyframes miPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes miPop { 0%,100% { transform: scale(1); } 40% { transform: scale(1.3); } }
@keyframes miWiggle{ 0%,100% { transform: rotate(0); } 20% { transform: rotate(-11deg); } 60% { transform: rotate(9deg); } }
@keyframes miDrive { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes miRise { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-3.5px); opacity: 0; } }
@keyframes miBarY { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes miNeedle{ 0%,100% { transform: rotate(-52deg); } 55% { transform: rotate(34deg); } }
@keyframes miRing { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes miNod { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes miSwing { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes miBeat { 0%,28%,100% { transform: scale(1); } 8% { transform: scale(1.18); } 18% { transform: scale(1.06); } }
@keyframes miNudgeL{ 0%,100% { transform: translateX(0); } 50% { transform: translateX(-1.6px); } }
@keyframes miNudgeR{ 0%,100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }
@keyframes miDrop { 0% { transform: translateY(-2.5px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(2.5px); opacity: 0; } }
@keyframes miType { 0% { transform: scaleX(0); } 55%,100% { transform: scaleX(1); } }
@keyframes miFlip { 0%,100% { transform: skewY(0); } 50% { transform: skewY(-7deg); } }
@keyframes miHook { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes miSnipA { 0%,100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes miSnipB { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes miLid { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.8px) rotate(-3deg); } }
@keyframes miFlash { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes miLetter{ 0%,100% { transform: translateY(0); opacity: 0; } 50% { transform: translateY(-2.5px); opacity: 1; } }
@keyframes miFlap { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.75); } }
/* ---- 5) PER-ICON HOVER ANIMATIONS ---- */
/* Solutions */
.mega a:hover .mi-code .c1 { animation: miNudgeL 1s ease-in-out infinite; }
.mega a:hover .mi-code .c2 { animation: miNudgeR 1s ease-in-out infinite; }
.mega a:hover .mi-code .c3 { stroke-dasharray: 11; animation: miDrawL 1.1s ease-in-out infinite; --dl: 11; }
.mega a:hover .mi-ai .orb { animation: miSpin 3.2s linear infinite; }
.mega a:hover .mi-ai .n0 { animation: miPop 1.6s ease-in-out infinite; }
.mega a:hover .mi-wifi .w1 { animation: miPulse 1.5s ease-in-out infinite; }
.mega a:hover .mi-wifi .w2 { animation: miPulse 1.5s ease-in-out .25s infinite; }
.mega a:hover .mi-wifi .w3 { animation: miPulse 1.5s ease-in-out .5s infinite; }
.mega a:hover .mi-wifi .w0 { animation: miPop 1.5s ease-in-out infinite; }
.mega a:hover .mi-phone .ph { animation: miWiggle .8s ease-in-out infinite; }
.mega a:hover .mi-phone .sw1 { animation: miPulse 1.2s ease-in-out infinite; }
.mega a:hover .mi-phone .sw2 { animation: miPulse 1.2s ease-in-out .3s infinite; }
.mega a:hover .mi-shield .chk { stroke-dasharray: 10; animation: miDrawL 1.3s ease-in-out infinite; --dl: 10; }
.mega a:hover .mi-truck .whA,
.mega a:hover .mi-truck .whB { animation: miSpin .9s linear infinite; }
.mega a:hover .mi-truck .bd { animation: miDrive 1.1s ease-in-out infinite; }
.mega a:hover .mi-truck .rd { animation: miFlow .7s linear infinite; }
.mega a:hover .mi-card .cd { animation: miWiggle 1.4s ease-in-out infinite; }
.mega a:hover .mi-card .t1 { animation: miPulse 1.1s ease-in-out infinite; }
.mega a:hover .mi-card .t2 { animation: miPulse 1.1s ease-in-out .3s infinite; }
.mega a:hover .mi-chart .ln { animation: miDrawL 1.5s ease-in-out infinite; --dl: 20; }
.mega a:hover .mi-chart .tp { animation: miPop 1.5s ease-in-out .5s infinite; }
/* Resources */
.mega a:hover .mi-blog .l1 { animation: miType 1.3s ease infinite; }
.mega a:hover .mi-blog .l2 { animation: miType 1.3s ease .18s infinite; }
.mega a:hover .mi-blog .l3 { animation: miType 1.3s ease .36s infinite; }
.mega a:hover .mi-book .pg { animation: miFlip 1.2s ease-in-out infinite; }
.mega a:hover .mi-cmp .b1 { animation: miBarY 1.2s ease-in-out infinite; }
.mega a:hover .mi-cmp .b2 { animation: miBarY 1.2s ease-in-out .2s infinite; }
.mega a:hover .mi-cmp .b3 { animation: miBarY 1.2s ease-in-out .4s infinite; }
.mega a:hover .mi-tools .wr { animation: miWiggle 1.1s ease-in-out infinite; }
/* Company */
.mega a:hover .mi-user .us { animation: miNod 1.1s ease-in-out infinite; }
.mega a:hover .mi-star .st { animation: miPop 1.4s ease-in-out infinite; }
.mega a:hover .mi-star .sp { animation: miFlash 1.4s ease-in-out .3s infinite; }
.mega a:hover .mi-medal .md { animation: miSwing 1.4s ease-in-out infinite; }
.mega a:hover .mi-brief .bc { animation: miNod 1.1s ease-in-out infinite; }
.mega a:hover .mi-mail .fl { animation: miFlap 1.3s ease-in-out infinite; transform-origin: 50% 0%; }
.mega a:hover .mi-mail .lt { animation: miLetter 1.3s ease-in-out infinite; }
/* Industries chips */
.mega-grid-industries a:hover .in-log .whA,
.mega-grid-industries a:hover .in-log .whB { animation: miSpin .9s linear infinite; }
.mega-grid-industries a:hover .in-log .bd { animation: miDrive 1.1s ease-in-out infinite; }
.mega-grid-industries a:hover .in-ret .aw { animation: miFlap 1.2s ease-in-out infinite; transform-origin: 50% 0%; }
.mega-grid-industries a:hover .in-ret .dr { animation: miPulse 1.2s ease-in-out infinite; }
.mega-grid-industries a:hover .in-hea .hb { animation: miFlow .8s linear infinite; }
.mega-grid-industries a:hover .in-pro .bc { animation: miNod 1.1s ease-in-out infinite; }
.mega-grid-industries a:hover .in-res .s1 { animation: miRise 1.3s ease-out infinite; }
.mega-grid-industries a:hover .in-res .s2 { animation: miRise 1.3s ease-out .45s infinite; }
.mega-grid-industries a:hover .in-man .g1 { animation: miSpin 2.6s linear infinite; }
.mega-grid-industries a:hover .in-man .g2 { animation: miSpinR 2.6s linear infinite; }
.mega-grid-industries a:hover .in-con .hk { animation: miHook 1.2s ease-in-out infinite; }
.mega-grid-industries a:hover .in-aut .whA,
.mega-grid-industries a:hover .in-aut .whB { animation: miSpin .9s linear infinite; }
.mega-grid-industries a:hover .in-aut .bd { animation: miDrive 1.1s ease-in-out infinite; }
.mega-grid-industries a:hover .in-sal .bl1 { animation: miSnipA .9s ease-in-out infinite; }
.mega-grid-industries a:hover .in-sal .bl2 { animation: miSnipB .9s ease-in-out infinite; }
.mega-grid-industries a:hover .in-non .ht { animation: miBeat 1.3s ease-in-out infinite; }
/* Use cases chips */
.mega-grid-industries a:hover .uc-fee .ar { animation: miDrop 1.1s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-cnet .nd { animation: miNeedle 1.6s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-bkp .sb1 { animation: miBarY 1.2s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-bkp .sb2 { animation: miBarY 1.2s ease-in-out .15s infinite; }
.mega-grid-industries a:hover .uc-bkp .sb3 { animation: miBarY 1.2s ease-in-out .3s infinite; }
.mega-grid-industries a:hover .uc-bkp .sb4 { animation: miBarY 1.2s ease-in-out .45s infinite; }
.mega-grid-industries a:hover .uc-cph .cl { animation: miNod 1.3s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-cph .ph2 { animation: miWiggle 1s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-afu .rf { animation: miSpin 1.5s linear infinite; }
.mega-grid-industries a:hover .uc-crm .d1 { animation: miPulse 1.3s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-crm .d2 { animation: miPulse 1.3s ease-in-out .35s infinite; }
.mega-grid-industries a:hover .uc-flt .pn { animation: miNod 1.1s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-flt .pg { animation: miRing 1.3s ease-out infinite; }
.mega-grid-industries a:hover .uc-gft .ld { animation: miLid 1.2s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-pos .scr { animation: miFlash 1.2s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-pos .rc { animation: miBarY 1.2s ease-in-out infinite; transform-origin: 50% 0% !important; }
.mega-grid-industries a:hover .uc-sdw .lk { animation: miFlow .9s linear infinite; }
.mega-grid-industries a:hover .uc-sdw .nA { animation: miPop 1.4s ease-in-out infinite; }
.mega-grid-industries a:hover .uc-sdw .nB { animation: miPop 1.4s ease-in-out .3s infinite; }
.mega-grid-industries a:hover .uc-sdw .nC { animation: miPop 1.4s ease-in-out .6s infinite; }
/* ---- 6) Row + panel polish ---- */
.mega-grid-industries a {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.72) !important;
}
.mega-grid-industries a:hover { color: #fff !important; }
.hdr-minimal .mega a strong {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 13.5px !important;
color: rgba(255,255,255,.92) !important;
}
.hdr-minimal .mega-head {
font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
color: #A78BFA !important;
font-size: 10.5px !important;
letter-spacing: .12em !important;
}
@media (prefers-reduced-motion: reduce) {
.mega .ap, .nav-caret { animation: none !important; transition: none !important; }
}
/* =====================================================
SCROLL PERFORMANCE PASS
===================================================== */
/* Animated CTA meshes: no filter (gradient does the glow), compositor-only motion */
.tb-fcta-mesh { filter: none !important; will-change: transform; opacity: .6; }
.tb-trust-blob { filter: none !important; }
.tb-foot-blob, .tbf-blob { filter: none !important; }
/* Skip rendering heavy below-fold sections until near viewport.
(Excludes #tb-industries — the WebGL globe measures its own mount.) */
#tb-paystone, #tb-rogers, #tb-voices, #tb-regulatory, #tb-finalcta {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
footer.tb-footer { content-visibility: auto; contain-intrinsic-size: auto 640px; }
/* Pause every CSS animation in sections that are off-screen */
.tb-anim-off * { animation-play-state: paused !important; }
/* Fixed glass header: halve the resample cost during scroll */
header#header.hdr-minimal {
-webkit-
}
/* Carousel + ticker on their own GPU layer */
.tb-voices-track { will-change: transform; }
/* ---- Scroll governor: active-scroll state ---- */
/* De-glass the fixed header while scrolling (backdrop-filter resampling is the per-frame tax) */
html.tb-scrolling header#header.hdr-minimal {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
}
/* Freeze all CSS animation during active scroll; resumes 160ms after scroll stops */
html.tb-scrolling *, html.tb-scrolling *::before, html.tb-scrolling *::after {
animation-play-state: paused !important;
}
/* ---- Adaptive lite mode (auto-enabled on machines that can't hold ~48fps) ---- */
html.tb-lite #unicorn-layer { display: none !important; }
html.tb-lite header#header.hdr-minimal,
html.tb-lite .hdr-minimal .mega > .mega-grid,
html.tb-lite .tb-fcta-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.tb-lite header#header.hdr-minimal { }
html.tb-lite .hdr-minimal .mega > .mega-grid { background: rgba(12,6,24,.99) !important; }
html.tb-lite .tb-fcta-card { background: rgba(24,14,44,.94) !important; }
html.tb-lite .tb-fcta-mesh { animation: none !important; }
/* =====================================================
SOLUTIONS PAGE (sol2-*) — synergetic with homepage
===================================================== */
/* ---------- HERO ---------- */
.sol2-hero {
position: relative;
padding: 130px 0 84px;
overflow: hidden;
background:
radial-gradient(ellipse at 15% 0%, #2a0f5c 0%, transparent 55%),
radial-gradient(ellipse at 95% 30%, #17233f 0%, transparent 55%),
linear-gradient(180deg, #0a0620 0%, #0d0722 100%);
}
.sol2-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sol2-hero-blob { position: absolute; border-radius: 50%; }
.sol2-hb1 { top: -15%; left: -8%; width: 46%; height: 72%; background: radial-gradient(circle, rgba(139,92,246,.22), transparent 68%); animation: sol2Float 16s ease-in-out infinite; }
.sol2-hb2 { bottom: -25%; right: -5%; width: 44%; height: 70%; background: radial-gradient(circle, rgba(45,212,207,.12), transparent 70%); animation: sol2Float 20s ease-in-out infinite reverse; }
@keyframes sol2Float { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(26px,-20px) scale(1.07); } }
.sol2-hero-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
background-size: 56px 56px; opacity: .022;
mask-image: radial-gradient(ellipse at 30% 20%, #000 15%, transparent 68%);
-webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 15%, transparent 68%);
}
.sol2-hero-inner { position: relative; z-index: 2; max-width: 900px; }
.sol2-hero .breadcrumb { color: rgba(255,255,255,.4); font-size: 13px; margin-bottom: 20px; }
.sol2-hero .breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.sol2-hero .breadcrumb a:hover { color: #A78BFA; }
.sol2-hero-title {
font-size: clamp(2.4rem, 5.2vw, 4.1rem);
font-weight: 600;
line-height: 1.04; letter-spacing: -.035em;
color: #fff; margin: 12px 0 0;
font-family: 'Space Grotesk', 'DM Sans', sans-serif;
}
.sol2-hero-title .grad {
background: linear-gradient(120deg, #B866FF, #8B5CF6 45%, #2DD4CF);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.sol2-hero-sub {
font-size: 17px; line-height: 1.65;
color: rgba(255,255,255,.6);
max-width: 680px; margin: 22px 0 0;
}
.sol2-hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.sol2-btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 13px 24px; border-radius: 12px;
font-family: 'Space Grotesk','DM Sans',sans-serif;
font-size: 14.5px; font-weight: 600;
text-decoration: none; cursor: pointer;
transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.sol2-btn svg { transition: transform .3s; }
.sol2-btn-primary {
background: linear-gradient(120deg, #8B5CF6, #A855F7 55%, #F2554D);
background-size: 160% 100%;
color: #fff;
box-shadow: 0 12px 30px -8px rgba(139,92,246,.6);
}
.sol2-btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -8px rgba(242,85,77,.5); }
.sol2-btn-primary:hover svg { transform: translateX(4px); }
.sol2-btn-ghost {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.16);
color: rgba(255,255,255,.85);
}
.sol2-btn-ghost:hover { background: rgba(139,92,246,.15); border-color: rgba(168,139,250,.4); color: #fff; transform: translateY(-2px); }
.sol2-hero-stats {
display: flex; gap: 44px; flex-wrap: wrap;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.08);
}
.sol2-hstat b {
display: block;
font-size: 40px; font-weight: 700;
font-family: 'Barlow Condensed', Inter, sans-serif;
background: linear-gradient(120deg, #fff, #C4B5FD);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
line-height: 1;
}
.sol2-hstat span {
display: block; font-size: 11.5px; color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .06em; margin-top: 7px;
}
/* hide the filler stat cleanly */
.sol2-hstat:nth-child(2) { display: none; }
/* ---------- VALUE PROP ---------- */
.sol2-value {
background: linear-gradient(180deg, #0d0722 0%, #08040f 100%);
padding: 84px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.sol2-value-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
margin-top: 44px;
}
.sol2-vcard {
position: relative;
padding: 30px 26px;
border-radius: 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
overflow: hidden;
transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s;
}
.sol2-vcard::before {
content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
background: linear-gradient(90deg, var(--ac), transparent);
opacity: .8;
}
.sol2-vcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.1)); background: rgba(255,255,255,.05); }
.sol2-vico {
width: 52px; height: 52px; border-radius: 13px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--ac) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent);
margin-bottom: 18px;
}
.sol2-vico svg { width: 26px; height: 26px; }
.sol2-vcard h3 { font-size: 18px; color: #fff; margin: 0 0 9px; font-weight: 700; letter-spacing: -.01em; }
.sol2-vcard p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; }
/* ---------- THE EIGHT (cards) ---------- */
.sol2-grid-sec {
position: relative;
background: linear-gradient(180deg, #08040f 0%, #0a0620 100%);
padding: 88px 0;
overflow: hidden;
}
.sol2-grid-bg { position: absolute; inset: 0; pointer-events: none; }
.sol2-grid-blob { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 60%; height: 60%; background: radial-gradient(circle, rgba(139,92,246,.08), transparent 70%); }
.sol2-cards {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
margin-top: 46px;
}
.sol2-card {
position: relative;
display: flex; flex-direction: column;
padding: 24px 22px 22px;
border-radius: 18px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.07);
text-decoration: none;
overflow: hidden;
transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s, box-shadow .4s;
}
.sol2-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% -10%, var(--ac), transparent 60%);
opacity: 0; transition: opacity .4s; pointer-events: none;
}
.sol2-card:hover::before { opacity: .12; }
.sol2-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--ac) 42%, rgba(255,255,255,.1));
background: rgba(255,255,255,.055);
box-shadow: 0 24px 50px -20px rgba(0,0,0,.6), 0 0 30px -10px color-mix(in srgb, var(--ac) 35%, transparent);
}
.sol2-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; position: relative; z-index: 2; }
.sol2-card-ico {
width: 46px; height: 46px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #fff));
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ac) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
transition: transform .35s cubic-bezier(.22,.7,.2,1);
}
.sol2-card:hover .sol2-card-ico { transform: translateY(-2px) scale(1.08); }
.sol2-card-ico .mi { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sol2-card-num {
font-family: 'Barlow Condensed', Inter, sans-serif;
font-size: 30px; font-weight: 700;
color: color-mix(in srgb, var(--ac) 55%, transparent);
line-height: 1;
}
.sol2-card-cat {
font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--ac); margin-bottom: 7px; position: relative; z-index: 2;
}
.sol2-card-title {
font-family: 'Space Grotesk','DM Sans',sans-serif;
font-size: 16.5px; font-weight: 600; color: #fff;
margin: 0 0 9px; line-height: 1.2; letter-spacing: -.01em;
position: relative; z-index: 2;
}
.sol2-card-blurb { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.52); margin: 0 0 14px; position: relative; z-index: 2; flex: 1; }
.sol2-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; position: relative; z-index: 2; }
.sol2-card-chips span {
font-size: 10.5px; font-weight: 500;
color: rgba(255,255,255,.65);
padding: 4px 9px; border-radius: 6px;
background: color-mix(in srgb, var(--ac) 12%, rgba(255,255,255,.02));
border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent);
}
.sol2-card-link {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; font-weight: 600;
color: var(--ac);
position: relative; z-index: 2;
}
.sol2-card-link svg { transition: transform .3s; }
.sol2-card:hover .sol2-card-link svg { transform: translateX(4px); }
/* ---------- PROCESS ---------- */
.sol2-process {
background: linear-gradient(180deg, #0a0620 0%, #0d0722 100%);
padding: 84px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.sol2-steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
margin-top: 46px;
}
.sol2-step {
position: relative;
padding: 28px 22px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
transition: transform .4s, border-color .4s;
}
.sol2-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.1)); }
.sol2-step-rail {
position: absolute; top: 46px; right: -9px; width: 18px; height: 2px;
background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 60%, transparent), transparent);
z-index: 3;
}
.sol2-step:last-child .sol2-step-rail { display: none; }
.sol2-step-num {
font-family: 'Barlow Condensed', Inter, sans-serif;
font-size: 15px; font-weight: 700; letter-spacing: .1em;
color: color-mix(in srgb, var(--ac) 60%, transparent);
margin-bottom: 14px;
}
.sol2-step-ico {
width: 46px; height: 46px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: var(--ac);
background: color-mix(in srgb, var(--ac) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 28%, transparent);
margin-bottom: 16px;
}
.sol2-step-ico svg { width: 23px; height: 23px; }
.sol2-step h4 { font-size: 16px; color: #fff; margin: 0 0 8px; font-weight: 700; }
.sol2-step p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.52); margin: 0; }
/* ---------- INTEGRATE / COMPOUNDING ---------- */
.sol2-integrate {
position: relative;
background: linear-gradient(135deg, #1C0A4A 0%, #0a0620 60%, #17233f 100%);
padding: 90px 0;
overflow: hidden;
}
.sol2-int-bg { position: absolute; inset: 0; pointer-events: none; }
.sol2-int-blob { position: absolute; border-radius: 50%; }
.sol2-ib1 { top: -10%; left: 40%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%); }
.sol2-ib2 { bottom: -20%; left: -5%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(45,212,207,.1), transparent 70%); }
.sol2-int-inner {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center;
}
.sol2-int-copy .eyebrow { display: inline-block; margin-bottom: 14px; }
.sol2-int-copy h2 {
font-family: 'Space Grotesk','DM Sans',sans-serif;
font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 600;
color: #fff; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 18px;
}
.sol2-int-copy p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.6); margin: 0 0 28px; }
.sol2-int-metrics { display: flex; gap: 36px; flex-wrap: wrap; }
.sol2-imetric b {
display: block; font-size: 34px; font-weight: 700;
font-family: 'Barlow Condensed', Inter, sans-serif;
background: linear-gradient(120deg, #fff, #C4B5FD);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
line-height: 1;
}
.sol2-imetric span { display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 6px; max-width: 170px; }
/* Flow diagram */
.sol2-int-viz { display: flex; justify-content: center; }
.sol2-flow {
width: 100%; max-width: 340px;
display: flex; flex-direction: column; align-items: center;
padding: 30px 24px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.sol2-flow-node {
display: flex; align-items: center; gap: 11px;
width: 100%;
padding: 13px 16px; border-radius: 12px;
font-family: 'Space Grotesk','DM Sans',sans-serif;
font-size: 13.5px; font-weight: 600; color: #fff;
border: 1px solid rgba(255,255,255,.14);
}
.sol2-fn-web { background: linear-gradient(120deg, rgba(11,95,255,.3), rgba(11,95,255,.12)); }
.sol2-fn-crm { background: linear-gradient(120deg, rgba(139,92,246,.3), rgba(139,92,246,.12)); }
.sol2-fn-ico {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.1);
}
.sol2-fn-ico svg { width: 17px; height: 17px; }
.sol2-flow-line { width: 2px; height: 26px; position: relative; background: linear-gradient(180deg, rgba(139,92,246,.6), rgba(45,212,207,.4)); margin: 3px 0; }
.sol2-flow-dot {
position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 6px; height: 6px; border-radius: 50%; background: #2DD4CF;
box-shadow: 0 0 8px #2DD4CF;
animation: sol2FlowDot 2s ease-in-out infinite;
}
@keyframes sol2FlowDot { 0%{ top: 0; opacity: 0; } 20%{ opacity: 1; } 80%{ opacity: 1; } 100%{ top: 100%; opacity: 0; } }
.sol2-flow-branch { display: flex; gap: 12px; width: 100%; margin-top: 24px; position: relative; }
.sol2-flow-branch::before {
content: ''; position: absolute; top: -18px; left: 25%; right: 25%; height: 18px;
border-top: 2px solid rgba(255,255,255,.14);
border-left: 2px solid rgba(255,255,255,.14);
border-right: 2px solid rgba(255,255,255,.14);
border-radius: 8px 8px 0 0;
}
.sol2-flow-sub {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
padding: 13px 8px; border-radius: 11px;
font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.12);
}
.sol2-fn-call { background: linear-gradient(135deg, rgba(34,197,94,.24), rgba(34,197,94,.08)); }
.sol2-fn-pay { background: linear-gradient(135deg, rgba(242,85,77,.24), rgba(242,85,77,.08)); }
.sol2-flow-sub .sol2-fn-ico { width: 32px; height: 32px; }
/* ---------- FAQ ---------- */
.sol2-faq-sec {
background: linear-gradient(180deg, #0d0722 0%, #08040f 100%);
padding: 84px 0;
border-top: 1px solid rgba(255,255,255,.05);
}
.sol2-faq { max-width: 760px; margin: 44px auto 0; }
.sol2-faq-item {
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
margin-bottom: 12px;
background: rgba(255,255,255,.03);
overflow: hidden;
transition: border-color .3s;
}
.sol2-faq-item:hover { border-color: rgba(139,92,246,.28); }
.sol2-faq-q {
width: 100%; text-align: left;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px;
background: none; border: none; cursor: pointer;
font-family: 'Space Grotesk','DM Sans',sans-serif;
font-size: 15px; font-weight: 600; color: #fff;
}
.sol2-faq-q .pm {
flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(139,92,246,.18); color: #A78BFA;
font-size: 17px; transition: transform .3s, background .3s;
}
.sol2-faq-item.open .sol2-faq-q .pm { transform: rotate(45deg); background: rgba(139,92,246,.35); }
.sol2-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.sol2-faq-item.open .sol2-faq-a { max-height: 240px; }
.sol2-faq-a p { padding: 0 22px 20px; margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.58); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.sol2-cards { grid-template-columns: repeat(2, 1fr); }
.sol2-steps { grid-template-columns: repeat(2, 1fr); }
.sol2-step:nth-child(2) .sol2-step-rail { display: none; }
.sol2-value-grid { grid-template-columns: 1fr; }
.sol2-int-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 620px) {
.sol2-hero { padding: 104px 0 64px; }
.sol2-cards { grid-template-columns: 1fr; }
.sol2-steps { grid-template-columns: 1fr; }
.sol2-step .sol2-step-rail { display: none !important; }
.sol2-hero-stats { gap: 28px; }
.sol2-hstat b { font-size: 32px; }
}
/* =====================================================
BUSINESS INTERNET & NETWORKING (bi-*)
===================================================== */
/* ---------- HERO ---------- */
.bi-hero {
position: relative; padding: 128px 0 80px; overflow: hidden;
background:
radial-gradient(ellipse at 12% 0%, #0f2f3a 0%, transparent 55%),
radial-gradient(ellipse at 92% 20%, #2a0f5c 0%, transparent 55%),
linear-gradient(180deg, #0a0620 0%, #0d0722 100%);
}
.bi-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bi-hero-blob { position: absolute; border-radius: 50%; }
.bi-hb1 { top: -12%; left: -6%; width: 44%; height: 68%; background: radial-gradient(circle, rgba(45,212,207,.16), transparent 68%); animation: biFloat 17s ease-in-out infinite; }
.bi-hb2 { bottom: -20%; right: -6%; width: 44%; height: 68%; background: radial-gradient(circle, rgba(139,92,246,.16), transparent 70%); animation: biFloat 21s ease-in-out infinite reverse; }
@keyframes biFloat { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(24px,-18px) scale(1.06); } }
.bi-net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.bi-hero-inner { position: relative; z-index: 2; max-width: 880px; }
.bi-hero .breadcrumb { color: rgba(255,255,255,.4); font-size: 13px; margin-bottom: 18px; }
.bi-hero .breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.bi-hero .breadcrumb a:hover { color: #2DD4CF; }
.bi-hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 15px; border-radius: 20px; margin-bottom: 20px;
background: rgba(45,212,207,.1); border: 1px solid rgba(45,212,207,.28);
color: #7FF0E8; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.bi-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #2DD4CF; box-shadow: 0 0 10px #2DD4CF; animation: biPulse 1.6s infinite; }
@keyframes biPulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(.8);} }
.bi-hero-title {
font-family: 'Space Grotesk','DM Sans',sans-serif;
font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 600;
line-height: 1.05; letter-spacing: -.035em; color: #fff; margin: 0;
}
.bi-hero-title .grad {
background: linear-gradient(120deg, #2DD4CF, #8B5CF6 70%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.bi-hero-sub { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.6); max-width: 660px; margin: 22px 0 0; }
.bi-hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.bi-btn {
display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 12px;
font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 14.5px; font-weight: 600;
text-decoration: none; cursor: pointer; border: none;
transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.bi-btn svg { transition: transform .3s; }
.bi-btn-primary { background: linear-gradient(120deg, #18B6A7, #2DD4CF 55%, #8B5CF6); background-size: 160% 100%; color: #06222a; font-weight: 700; box-shadow: 0 12px 30px -8px rgba(45,212,207,.5); }
.bi-btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -8px rgba(139,92,246,.5); color: #fff; }
.bi-btn-primary:hover svg { transform: translateX(4px); }
.bi-btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
.bi-btn-ghost:hover { background: rgba(45,212,207,.14); border-color: rgba(45,212,207,.4); color: #fff; transform: translateY(-2px); }
.bi-hero-trust { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.08); }
.bi-htrust b { display: block; font-size: 32px; font-weight: 700; font-family: 'Barlow Condensed', Inter, sans-serif; background: linear-gradient(120deg, #fff, #99F6EC); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; }
.bi-htrust span { display: block; font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; max-width: 150px; }
/* ---------- TICKER ---------- */
.bi-ticker-sec { background: #08040f; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; padding: 16px 0; }
.bi-ticker { overflow: hidden; }
.bi-ticker-row { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; animation: biTicker 32s linear infinite; }
.bi-ticker-row span { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .02em; }
.bi-ticker-row i { color: #2DD4CF; font-style: normal; }
@keyframes biTicker { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* ---------- WHY BUSINESS-GRADE ---------- */
.bi-why { background: linear-gradient(180deg, #0d0722 0%, #08040f 100%); padding: 84px 0; }
.bi-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.bi-why-card { position: relative; padding: 28px 22px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); overflow: hidden; transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s; }
.bi-why-card::before { content:''; position:absolute; left:0; top:0; width:100%; height:3px; background: linear-gradient(90deg, var(--ac), transparent); }
.bi-why-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.1)); background: rgba(255,255,255,.05); }
.bi-why-ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 28%, transparent); margin-bottom: 16px; }
.bi-why-ico svg { width: 24px; height: 24px; }
.bi-why-card h3 { font-size: 16.5px; color: #fff; margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; }
.bi-why-card p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; }
/* ---------- PRODUCTS ---------- */
.bi-products { position: relative; background: linear-gradient(180deg, #08040f 0%, #0a0620 100%); padding: 88px 0; overflow: hidden; }
.bi-products-bg { position: absolute; inset: 0; pointer-events: none; }
.bi-prod-blob { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 60%; height: 55%; background: radial-gradient(circle, rgba(45,212,207,.07), transparent 70%); }
.bi-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.bi-prod-card { position: relative; padding: 26px 24px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); overflow: hidden; transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s, box-shadow .4s; }
.bi-prod-card::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% -10%, var(--ac), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.bi-prod-card:hover::before { opacity:.1; }
.bi-prod-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac) 42%, rgba(255,255,255,.1)); background: rgba(255,255,255,.055); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6), 0 0 30px -10px color-mix(in srgb, var(--ac) 35%, transparent); }
.bi-prod-feature { border-color: color-mix(in srgb, var(--ac) 32%, rgba(255,255,255,.1)); background: color-mix(in srgb, var(--ac) 7%, rgba(255,255,255,.03)); }
.bi-prod-tag { position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac); background: color-mix(in srgb, var(--ac) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); padding: 4px 10px; border-radius: 20px; }
.bi-prod-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; position: relative; z-index: 2; }
.bi-prod-ico { width: 48px; height: 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #fff)); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ac) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.3); flex-shrink: 0; transition: transform .35s cubic-bezier(.22,.7,.2,1); }
.bi-prod-card:hover .bi-prod-ico { transform: translateY(-2px) scale(1.07); }
.bi-prod-ico svg, .bi-prod-ico .mi { width: 25px; height: 25px; }
.bi-prod-head h3 { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 17px; font-weight: 600; color: #fff; margin: 0; letter-spacing: -.01em; }
.bi-prod-desc { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.55); margin: 0 0 18px; position: relative; z-index: 2; }
.bi-prod-specs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); position: relative; z-index: 2; }
.bi-spec { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bi-spec-k { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
.bi-spec-v { font-size: 12.5px; color: rgba(255,255,255,.88); font-weight: 600; text-align: right; }
.bi-prod-chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; }
.bi-prod-chips span { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.7); padding: 4px 9px; border-radius: 6px; background: color-mix(in srgb, var(--ac) 12%, rgba(255,255,255,.02)); border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); }
/* ---------- RESILIENCE / FAILOVER ---------- */
.bi-resilience { position: relative; background: linear-gradient(135deg, #0f2f3a 0%, #0a0620 60%, #1C0A4A 100%); padding: 90px 0; overflow: hidden; }
.bi-res-bg { position: absolute; inset: 0; pointer-events: none; }
.bi-res-blob { position: absolute; border-radius: 50%; }
.bi-rb1 { top: -10%; right: 30%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(45,212,207,.16), transparent 70%); }
.bi-rb2 { bottom: -20%; left: -5%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%); }
.bi-res-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center; }
.bi-res-copy .eyebrow { display: inline-block; margin-bottom: 14px; }
.bi-res-copy h2 { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 600; color: #fff; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 18px; }
.bi-res-copy p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.62); margin: 0 0 16px; }
.bi-res-copy strong { color: #7FF0E8; }
.bi-inline-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 14px; font-weight: 600; color: #2DD4CF; text-decoration: none; }
.bi-inline-cta svg { transition: transform .3s; }
.bi-inline-cta:hover svg { transform: translateX(4px); }
/* Failover viz */
.bi-res-viz { display: flex; justify-content: center; }
.bi-failover { width: 100%; max-width: 380px; padding: 28px 26px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bi-fo-node { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 13.5px; font-weight: 600; color: #fff; }
.bi-fo-node svg { width: 24px; height: 24px; flex-shrink: 0; }
.bi-fo-paths { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; margin-left: 20px; }
.bi-fo-path { position: relative; display: flex; align-items: center; padding: 10px 14px 10px 26px; border-radius: 10px; font-size: 12px; font-weight: 600; border: 1px dashed rgba(255,255,255,.2); color: rgba(255,255,255,.5); transition: all .4s; }
.bi-fo-path::before { content:''; position:absolute; left:10px; top:50%; transform: translateY(-50%); width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.3); }
.bi-fo-primary.bi-fo-active { border-style: solid; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.12); color: #86EFAC; }
.bi-fo-primary.bi-fo-active::before { background:#22C55E; box-shadow:0 0 8px #22C55E; }
.bi-fo-primary.bi-fo-down { border-color: rgba(242,85,77,.4); background: rgba(242,85,77,.08); color: rgba(252,165,165,.7); text-decoration: line-through; opacity: .7; }
.bi-fo-primary.bi-fo-down::before { background:#F2554D; }
.bi-fo-backup.bi-fo-active { border-style: solid; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.12); color: #FCD34D; }
.bi-fo-backup.bi-fo-active::before { background:#F59E0B; box-shadow:0 0 8px #F59E0B; }
.bi-fo-pulse { position:absolute; right:12px; width:6px; height:6px; border-radius:50%; background:#22C55E; opacity:0; }
.bi-fo-primary.bi-fo-active .bi-fo-pulse { opacity:1; animation: biPulse 1.2s infinite; }
.bi-fo-status { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.25); font-size: 12px; color: rgba(255,255,255,.75); }
.bi-fo-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; flex-shrink: 0; transition: background .4s; }
/* ---------- NETWORK STATS ---------- */
.bi-network { background: linear-gradient(180deg, #0a0620 0%, #0d0722 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bi-net-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.bi-net-stat { text-align: center; padding: 26px 18px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.bi-net-stat b { display: block; font-size: 40px; font-weight: 700; font-family: 'Barlow Condensed', Inter, sans-serif; background: linear-gradient(120deg, #fff, #99F6EC); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; }
.bi-net-stat span { display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; line-height: 1.5; }
.bi-net-note { text-align: center; max-width: 700px; margin: 30px auto 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.45); }
/* ---------- CHOOSE / FIND YOUR FIT ---------- */
.bi-choose { background: linear-gradient(180deg, #0d0722 0%, #08040f 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bi-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.bi-choose-card { text-align: left; padding: 24px 20px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); cursor: pointer; font-family: inherit; transition: transform .3s, border-color .3s, background .3s; }
.bi-choose-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 40%, rgba(255,255,255,.1)); background: rgba(255,255,255,.05); }
.bi-choose-card.active { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, rgba(255,255,255,.03)); box-shadow: 0 0 26px -8px color-mix(in srgb, var(--ac) 50%, transparent); }
.bi-choose-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent); margin-bottom: 14px; }
.bi-choose-ico svg { width: 22px; height: 22px; }
.bi-choose-card h4 { font-size: 15px; color: #fff; margin: 0 0 6px; font-weight: 700; }
.bi-choose-card p { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.5); margin: 0; }
.bi-choose-result { max-height: 0; overflow: hidden; transition: max-height .5s ease, margin .4s ease; margin-top: 0; }
.bi-choose-result.show { max-height: 200px; margin-top: 20px; }
.bi-choose-result-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; background: linear-gradient(120deg, rgba(139,92,246,.15), rgba(45,212,207,.1)); border: 1px solid rgba(139,92,246,.3); }
.bi-choose-result-ico { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #8B5CF6, #2DD4CF); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bi-choose-result-inner p { flex: 1; min-width: 260px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0; }
.bi-choose-result-inner p strong { color: #fff; }
.bi-choose-cta { flex-shrink: 0; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 13.5px; font-weight: 600; color: #2DD4CF; text-decoration: none; white-space: nowrap; }
.bi-choose-cta:hover { color: #7FF0E8; }
/* ---------- AD BAND (split lifestyle feature) ---------- */
.bi-adband { background: #08040f; padding: 60px 0; }
.bi-ad { position: relative; display: grid; align-items: stretch; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #1C0A4A 0%, #0f2f3a 100%); border: 1px solid rgba(139,92,246,.25); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.bi-ad-photo { grid-template-columns: 1.02fr .98fr; }
.bi-ad-glow { position: absolute; top: -40%; left: -14%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(45,212,207,.22), transparent 65%); pointer-events: none; z-index: 0; }
.bi-ad-content { position: relative; z-index: 2; padding: 48px 44px; align-self: center; }
.bi-ad-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7FF0E8; background: rgba(45,212,207,.14); border: 1px solid rgba(45,212,207,.3); padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; }
.bi-ad-content h2 { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; color: #fff; margin: 0 0 14px; letter-spacing: -.02em; }
.bi-ad-content p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.65); margin: 0 0 18px; max-width: 480px; }
.bi-ad-points { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.bi-ad-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.8); }
.bi-ad-ck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(45,212,207,.2); color: #2DD4CF; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bi-ad-btn { color: #06222a !important; }
/* Photo half */
.bi-ad-photo-wrap { position: relative; min-height: 100%; overflow: hidden; }
.bi-ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
/* Seam gradient: blends the photo's left edge into the card, feathers top/bottom */
.bi-ad-photo-grad { position: absolute; inset: 0; pointer-events: none; background:
linear-gradient(90deg, rgba(28,10,74,.95) 0%, rgba(28,10,74,.35) 12%, rgba(28,10,74,0) 30%),
linear-gradient(0deg, rgba(15,47,58,.5) 0%, rgba(15,47,58,0) 22%); }
.bi-ad-photo-chip { position: absolute; left: 22px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 30px; background: rgba(10,6,20,.62); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); }
.bi-ad-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #2DD4CF; box-shadow: 0 0 10px #2DD4CF; animation: biPulse 1.6s infinite; flex-shrink: 0; }
@keyframes biSpin { to { transform: rotate(360deg); } }
/* ---------- PROCESS ---------- */
.bi-process { background: linear-gradient(180deg, #0a0620 0%, #0d0722 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bi-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; }
.bi-step { position: relative; padding: 28px 22px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: transform .4s, border-color .4s; }
.bi-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.1)); }
.bi-step-rail { position: absolute; top: 44px; right: -9px; width: 18px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 60%, transparent), transparent); z-index: 3; }
.bi-step-num { font-family: 'Barlow Condensed', Inter, sans-serif; font-size: 28px; font-weight: 700; color: color-mix(in srgb, var(--ac) 60%, transparent); line-height: 1; margin-bottom: 14px; }
.bi-step h4 { font-size: 16px; color: #fff; margin: 0 0 8px; font-weight: 700; }
.bi-step p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.52); margin: 0; }
/* ---------- FAQ ---------- */
.bi-faq-sec { background: linear-gradient(180deg, #0d0722 0%, #08040f 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bi-faq { max-width: 760px; margin: 44px auto 0; }
.bi-faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; margin-bottom: 12px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .3s; }
.bi-faq-item:hover { border-color: rgba(45,212,207,.28); }
.bi-faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; cursor: pointer; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 15px; font-weight: 600; color: #fff; }
.bi-faq-q .pm { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(45,212,207,.16); color: #2DD4CF; font-size: 17px; transition: transform .3s, background .3s; }
.bi-faq-item.open .bi-faq-q .pm { transform: rotate(45deg); background: rgba(45,212,207,.3); }
.bi-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bi-faq-item.open .bi-faq-a { max-height: 260px; }
.bi-faq-a p { padding: 0 22px 20px; margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.58); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.bi-why-grid { grid-template-columns: repeat(2, 1fr); }
.bi-prod-grid { grid-template-columns: repeat(2, 1fr); }
.bi-net-stats { grid-template-columns: repeat(2, 1fr); }
.bi-choose-grid { grid-template-columns: repeat(2, 1fr); }
.bi-steps { grid-template-columns: repeat(2, 1fr); }
.bi-step:nth-child(2) .bi-step-rail { display: none; }
.bi-res-inner { grid-template-columns: 1fr; gap: 40px; }
.bi-ad-photo { grid-template-columns: 1fr; }
.bi-ad-photo .bi-ad-photo-wrap { grid-row: 1; min-height: 300px; }
.bi-ad-photo .bi-ad-content { grid-row: 2; }
.bi-ad-photo-grad { background:
linear-gradient(0deg, rgba(28,10,74,.9) 0%, rgba(28,10,74,.15) 30%, rgba(28,10,74,0) 55%); }
.bi-ad-img { object-position: 50% 38%; }
}
@media (max-width: 620px) {
.bi-hero { padding: 104px 0 60px; }
.bi-why-grid, .bi-prod-grid, .bi-net-stats, .bi-choose-grid, .bi-steps { grid-template-columns: 1fr; }
.bi-step-rail { display: none !important; }
.bi-hero-trust { gap: 24px; }
.bi-ad-content { padding: 32px 24px; }
.bi-ad-photo .bi-ad-photo-wrap { min-height: 240px; }
.bi-choose-result-inner { flex-direction: column; align-items: flex-start; }
}
/* ---------- BI: animated product visuals + co-branding ---------- */
/* Animated SVG banner at the top of product cards that have one */
.bi-prod-viz {
position: relative;
height: 150px;
margin: -26px -24px 18px;
padding: 16px 18px 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 8%, rgba(255,255,255,.02)), rgba(255,255,255,0));
border-bottom: 1px solid color-mix(in srgb, var(--ac) 18%, rgba(255,255,255,.05));
border-radius: 18px 18px 0 0;
overflow: hidden;
}
.bi-prod-viz svg { width: 100%; height: 100%; display: block; }
.bi-prod-hasviz .bi-prod-head { margin-top: 0; }
/* Hero co-brand lockup */
.bi-cobrand {
display: flex; align-items: center; gap: 16px;
margin-top: 30px; flex-wrap: wrap;
}
.bi-cobrand-label {
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.4);
}
.bi-cobrand-logos { display: inline-flex; align-items: center; gap: 14px; }
.bi-cobrand-plate {
display: inline-flex; align-items: center; justify-content: center;
height: 40px; padding: 0 16px; border-radius: 10px;
background: #fff; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4);
}
.bi-cobrand-plate img { height: 30px; width: auto; display: block; }
.bi-cobrand-x { color: rgba(255,255,255,.35); font-size: 20px; font-weight: 300; }
.bi-cobrand-tb {
display: inline-flex; align-items: center; gap: 9px;
height: 40px; padding: 0 16px 0 12px; border-radius: 10px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.bi-cobrand-tb img { height: 26px; width: 26px; display: block; }
.bi-cobrand-tbname {
font-family: 'DM Sans', Inter, sans-serif;
font-size: 15px; font-weight: 800; letter-spacing: .03em;
color: #fff;
}
/* Powered-by / delivered-by strip */
.bi-powered {
display: flex; align-items: center; justify-content: center; gap: 30px;
flex-wrap: wrap;
margin: 40px auto 0; max-width: 620px;
padding: 24px 30px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
}
.bi-powered-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bi-powered-lbl { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.bi-powered-plate {
display: inline-flex; align-items: center; justify-content: center;
height: 44px; padding: 0 20px; border-radius: 10px; background: #fff;
box-shadow: 0 6px 18px -6px rgba(0,0,0,.4);
}
.bi-powered-plate img { height: 34px; width: auto; display: block; }
.bi-powered-tb { display: inline-flex; align-items: center; gap: 10px; height: 44px; }
.bi-powered-tb img { height: 32px; width: 32px; display: block; }
.bi-powered-tbname {
font-family: 'DM Sans', Inter, sans-serif;
font-size: 19px; font-weight: 800; letter-spacing: .03em;
color: #fff;
}
.bi-powered-link svg { width: 40px; height: 24px; }
@media (max-width: 620px) {
.bi-prod-viz { height: 130px; }
.bi-powered { gap: 18px; padding: 20px; }
.bi-cobrand-tbname { font-size: 14px; }
.bi-powered-tbname { font-size: 17px; }
}
/* =====================================================
BUSINESS PHONE & CLOUD VOICE (bv-*)
===================================================== */
/* ---------- HERO ---------- */
.bv-hero { position: relative; padding: 128px 0 80px; overflow: hidden;
background:
radial-gradient(ellipse at 12% 0%, #0d3320 0%, transparent 55%),
radial-gradient(ellipse at 92% 20%, #0a2f4a 0%, transparent 55%),
linear-gradient(180deg, #0a0620 0%, #0d0722 100%); }
.bv-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bv-hero-blob { position: absolute; border-radius: 50%; }
.bv-hb1 { top: -12%; left: -6%; width: 44%; height: 68%; background: radial-gradient(circle, rgba(34,197,94,.15), transparent 68%); animation: bvFloat 17s ease-in-out infinite; }
.bv-hb2 { bottom: -20%; right: -6%; width: 44%; height: 68%; background: radial-gradient(circle, rgba(11,95,255,.14), transparent 70%); animation: bvFloat 21s ease-in-out infinite reverse; }
@keyframes bvFloat { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(24px,-18px) scale(1.06); } }
/* concentric call rings */
.bv-hero-rings { position: absolute; top: 20%; right: 8%; width: 340px; height: 340px; opacity: .5; }
.bv-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(34,197,94,.4); }
.bv-ring1 { width: 33%; height: 33%; animation: bvRing 3s ease-out infinite; }
.bv-ring2 { width: 66%; height: 66%; animation: bvRing 3s ease-out infinite .6s; }
.bv-ring3 { width: 100%; height: 100%; animation: bvRing 3s ease-out infinite 1.2s; }
@keyframes bvRing { 0%{ transform: scale(.6); opacity: .8; } 100%{ transform: scale(1.1); opacity: 0; } }
.bv-hero-inner { position: relative; z-index: 2; max-width: 880px; }
.bv-hero .breadcrumb { color: rgba(255,255,255,.4); font-size: 13px; margin-bottom: 18px; }
.bv-hero .breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.bv-hero .breadcrumb a:hover { color: #22C55E; }
.bv-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 20px; margin-bottom: 20px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.28); color: #86EFAC; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.bv-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 10px #22C55E; animation: bvPulse 1.6s infinite; }
@keyframes bvPulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(.8);} }
.bv-hero-title { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; color: #fff; margin: 0; }
.bv-hero-title .grad { background: linear-gradient(120deg, #22C55E, #0B5FFF 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.bv-hero-sub { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.6); max-width: 660px; margin: 22px 0 0; }
.bv-hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.bv-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 12px; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; }
.bv-btn svg { transition: transform .3s; }
.bv-btn-primary { background: linear-gradient(120deg, #16A34A, #22C55E 55%, #0B5FFF); background-size: 160% 100%; color: #04220f; font-weight: 700; box-shadow: 0 12px 30px -8px rgba(34,197,94,.5); }
.bv-btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -8px rgba(11,95,255,.5); color: #fff; }
.bv-btn-primary:hover svg { transform: translateX(4px); }
.bv-btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
.bv-btn-ghost:hover { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); color: #fff; transform: translateY(-2px); }
.bv-hero-trust { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.08); }
.bv-htrust b { display: block; font-size: 32px; font-weight: 700; font-family: 'Barlow Condensed', Inter, sans-serif; background: linear-gradient(120deg, #fff, #86EFAC); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; }
.bv-htrust span { display: block; font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; max-width: 160px; }
/* ---------- TICKER ---------- */
.bv-ticker-sec { background: #08040f; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; padding: 16px 0; }
.bv-ticker { overflow: hidden; }
.bv-ticker-row { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; animation: bvTicker 32s linear infinite; }
.bv-ticker-row span { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .02em; }
.bv-ticker-row i { color: #22C55E; font-style: normal; }
@keyframes bvTicker { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* ---------- WHY ---------- */
.bv-why { background: linear-gradient(180deg, #0d0722 0%, #08040f 100%); padding: 84px 0; }
.bv-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.bv-why-card { position: relative; padding: 28px 22px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); overflow: hidden; transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s; }
.bv-why-card::before { content:''; position:absolute; left:0; top:0; width:100%; height:3px; background: linear-gradient(90deg, var(--ac), transparent); }
.bv-why-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.1)); background: rgba(255,255,255,.05); }
.bv-why-ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 28%, transparent); margin-bottom: 16px; }
.bv-why-ico svg { width: 24px; height: 24px; }
.bv-why-card h3 { font-size: 16.5px; color: #fff; margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; }
.bv-why-card p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; }
/* ---------- PRODUCTS ---------- */
.bv-products { position: relative; background: linear-gradient(180deg, #08040f 0%, #0a0620 100%); padding: 88px 0; overflow: hidden; }
.bv-products-bg { position: absolute; inset: 0; pointer-events: none; }
.bv-prod-blob { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 60%; height: 55%; background: radial-gradient(circle, rgba(34,197,94,.07), transparent 70%); }
.bv-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.bv-prod-card { position: relative; padding: 26px 24px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); overflow: hidden; transition: transform .4s cubic-bezier(.22,.7,.2,1), border-color .4s, background .4s, box-shadow .4s; }
.bv-prod-card::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% -10%, var(--ac), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.bv-prod-card:hover::before { opacity:.1; }
.bv-prod-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac) 42%, rgba(255,255,255,.1)); background: rgba(255,255,255,.055); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6), 0 0 30px -10px color-mix(in srgb, var(--ac) 35%, transparent); }
.bv-prod-feature { border-color: color-mix(in srgb, var(--ac) 32%, rgba(255,255,255,.1)); background: color-mix(in srgb, var(--ac) 7%, rgba(255,255,255,.03)); }
.bv-prod-tag { position: absolute; top: 16px; right: 16px; z-index: 4; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac); background: color-mix(in srgb, var(--ac) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); padding: 4px 10px; border-radius: 20px; }
/* animated visual banner */
.bv-prod-viz { position: relative; height: 150px; margin: -26px -24px 18px; padding: 14px 16px 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 8%, rgba(255,255,255,.02)), rgba(255,255,255,0)); border-bottom: 1px solid color-mix(in srgb, var(--ac) 18%, rgba(255,255,255,.05)); border-radius: 18px 18px 0 0; overflow: hidden; }
.bv-prod-viz svg { width: 100%; height: 100%; display: block; }
.bv-prod-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; position: relative; z-index: 2; }
.bv-prod-ico { width: 48px; height: 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #fff)); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ac) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.3); flex-shrink: 0; transition: transform .35s cubic-bezier(.22,.7,.2,1); }
.bv-prod-card:hover .bv-prod-ico { transform: translateY(-2px) scale(1.07); }
.bv-prod-ico svg { width: 25px; height: 25px; }
.bv-prod-head h3 { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 17px; font-weight: 600; color: #fff; margin: 0; letter-spacing: -.01em; }
.bv-prod-desc { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.55); margin: 0 0 18px; position: relative; z-index: 2; }
.bv-prod-specs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); position: relative; z-index: 2; }
.bv-spec { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bv-spec-k { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
.bv-spec-v { font-size: 12.5px; color: rgba(255,255,255,.88); font-weight: 600; text-align: right; }
.bv-prod-chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; }
.bv-prod-chips span { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.7); padding: 4px 9px; border-radius: 6px; background: color-mix(in srgb, var(--ac) 12%, rgba(255,255,255,.02)); border: 1px solid color-mix(in srgb, var(--ac) 22%, transparent); }
/* ---------- FEATURES ---------- */
.bv-features { position: relative; background: linear-gradient(135deg, #0d3320 0%, #0a0620 60%, #1C0A4A 100%); padding: 90px 0; overflow: hidden; }
.bv-feat-bg { position: absolute; inset: 0; pointer-events: none; }
.bv-feat-blob { position: absolute; border-radius: 50%; }
.bv-fb1 { top: -10%; right: 30%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(34,197,94,.15), transparent 70%); }
.bv-fb2 { bottom: -20%; left: -5%; width: 40%; height: 60%; background: radial-gradient(circle, rgba(11,95,255,.12), transparent 70%); }
.bv-feat-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.bv-feat-copy .eyebrow { display: inline-block; margin-bottom: 14px; }
.bv-feat-copy h2 { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 600; color: #fff; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 18px; }
.bv-feat-copy p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.62); margin: 0 0 20px; }
.bv-inline-cta { display: inline-flex; align-items: center; gap: 7px; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 14px; font-weight: 600; color: #22C55E; text-decoration: none; }
.bv-inline-cta svg { transition: transform .3s; }
.bv-inline-cta:hover svg { transform: translateX(4px); }
.bv-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bv-feat-item { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: transform .3s, border-color .3s, background .3s; }
.bv-feat-item:hover { transform: translateY(-3px); border-color: rgba(34,197,94,.35); background: rgba(255,255,255,.06); }
.bv-feat-item .bv-feat-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg,rgba(34,197,94,.18),rgba(34,197,94,.06)); border:1px solid rgba(34,197,94,.22); color: #6EE7A0; --gA:#34D399; transition:transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease, border-color .3s ease; }
.bv-feat-ico svg{ width:24px; height:24px; display:block; }
.bv-feat-item:hover .bv-feat-ico{ transform:translateY(-2px) scale(1.06); box-shadow:0 8px 22px -8px rgba(34,197,94,.5); border-color:rgba(52,211,153,.5); }
.bv-feat-item b { display: block; font-size: 13.5px; color: #fff; font-weight: 700; margin-bottom: 3px; }
.bv-feat-item span { display: block; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
/* ---------- CHOOSE ---------- */
.bv-choose { background: linear-gradient(180deg, #0a0620 0%, #08040f 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bv-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.bv-choose-card { text-align: left; padding: 24px 20px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); cursor: pointer; font-family: inherit; transition: transform .3s, border-color .3s, background .3s; }
.bv-choose-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 40%, rgba(255,255,255,.1)); background: rgba(255,255,255,.05); }
.bv-choose-card.active { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, rgba(255,255,255,.03)); box-shadow: 0 0 26px -8px color-mix(in srgb, var(--ac) 50%, transparent); }
.bv-choose-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ac) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent); margin-bottom: 14px; }
.bv-choose-ico svg { width: 22px; height: 22px; }
.bv-choose-card h4 { font-size: 15px; color: #fff; margin: 0 0 6px; font-weight: 700; }
.bv-choose-card p { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.5); margin: 0; }
.bv-choose-result { max-height: 0; overflow: hidden; transition: max-height .5s ease, margin .4s ease; margin-top: 0; }
.bv-choose-result.show { max-height: 220px; margin-top: 20px; }
.bv-choose-result-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; background: linear-gradient(120deg, rgba(34,197,94,.14), rgba(11,95,255,.1)); border: 1px solid rgba(34,197,94,.3); }
.bv-choose-result-ico { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #22C55E, #0B5FFF); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bv-choose-result-inner p { flex: 1; min-width: 260px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0; }
.bv-choose-result-inner p strong { color: #fff; }
.bv-choose-cta { flex-shrink: 0; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 13.5px; font-weight: 600; color: #22C55E; text-decoration: none; white-space: nowrap; }
.bv-choose-cta:hover { color: #86EFAC; }
/* ---------- AD BAND ---------- */
.bv-adband { background: #08040f; padding: 60px 0; }
.bv-ad { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; padding: 44px 44px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #0d3320 0%, #1C0A4A 100%); border: 1px solid rgba(34,197,94,.25); }
.bv-ad-glow { position: absolute; top: -40%; right: -10%; width: 55%; height: 180%; background: radial-gradient(circle, rgba(34,197,94,.22), transparent 65%); pointer-events: none; }
.bv-ad-content { position: relative; z-index: 2; }
.bv-ad-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #86EFAC; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.3); padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; }
.bv-ad-content h2 { font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; color: #fff; margin: 0 0 14px; letter-spacing: -.02em; }
.bv-ad-content p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.65); margin: 0 0 18px; max-width: 480px; }
.bv-ad-points { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; }
.bv-ad-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.8); }
.bv-ad-ck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(34,197,94,.2); color: #22C55E; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bv-ad-btn { color: #04220f !important; }
.bv-ad-visual { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; }
.bv-ad-phone { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.bv-ad-phone-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(34,197,94,.3); }
.bv-ad-phone-ring::before, .bv-ad-phone-ring::after { content:''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(34,197,94,.5); animation: bvRing 2.4s ease-out infinite; }
.bv-ad-phone-ring::after { animation-delay: 1.2s; }
.bv-ad-phone-ico { position: relative; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #22C55E, #0B5FFF); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -6px rgba(34,197,94,.6); animation: bvWiggle 2.4s ease-in-out infinite; }
.bv-ad-phone-ico svg { width: 34px; height: 34px; }
@keyframes bvWiggle { 0%,100%{ transform: rotate(0); } 8%,24%{ transform: rotate(-10deg); } 16%,32%{ transform: rotate(10deg); } 40%{ transform: rotate(0); } }
/* ---------- PROCESS ---------- */
.bv-process { background: linear-gradient(180deg, #0a0620 0%, #0d0722 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; }
.bv-step { position: relative; padding: 28px 22px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: transform .4s, border-color .4s; }
.bv-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.1)); }
.bv-step-rail { position: absolute; top: 44px; right: -9px; width: 18px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 60%, transparent), transparent); z-index: 3; }
.bv-step-num { font-family: 'Barlow Condensed', Inter, sans-serif; font-size: 28px; font-weight: 700; color: color-mix(in srgb, var(--ac) 60%, transparent); line-height: 1; margin-bottom: 14px; }
.bv-step h4 { font-size: 16px; color: #fff; margin: 0 0 8px; font-weight: 700; }
.bv-step p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.52); margin: 0; }
/* ---------- FAQ ---------- */
.bv-faq-sec { background: linear-gradient(180deg, #0d0722 0%, #08040f 100%); padding: 84px 0; border-top: 1px solid rgba(255,255,255,.05); }
.bv-faq { max-width: 760px; margin: 44px auto 0; }
.bv-faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; margin-bottom: 12px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .3s; }
.bv-faq-item:hover { border-color: rgba(34,197,94,.28); }
.bv-faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; cursor: pointer; font-family: 'Space Grotesk','DM Sans',sans-serif; font-size: 15px; font-weight: 600; color: #fff; }
.bv-faq-q .pm { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(34,197,94,.16); color: #22C55E; font-size: 17px; transition: transform .3s, background .3s; }
.bv-faq-item.open .bv-faq-q .pm { transform: rotate(45deg); background: rgba(34,197,94,.3); }
.bv-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bv-faq-item.open .bv-faq-a { max-height: 260px; }
.bv-faq-a p { padding: 0 22px 20px; margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.58); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.bv-why-grid { grid-template-columns: repeat(2, 1fr); }
.bv-prod-grid { grid-template-columns: repeat(2, 1fr); }
.bv-choose-grid { grid-template-columns: repeat(2, 1fr); }
.bv-steps { grid-template-columns: repeat(2, 1fr); }
.bv-step:nth-child(2) .bv-step-rail { display: none; }
.bv-feat-inner { grid-template-columns: 1fr; gap: 36px; }
.bv-ad { grid-template-columns: 1fr; }
.bv-ad-visual { display: none; }
.bv-hero-rings { display: none; }
}
@media (max-width: 620px) {
.bv-hero { padding: 104px 0 60px; }
.bv-why-grid, .bv-prod-grid, .bv-choose-grid, .bv-steps, .bv-feat-grid { grid-template-columns: 1fr; }
.bv-step-rail { display: none !important; }
.bv-hero-trust { gap: 24px; }
.bv-ad { padding: 32px 24px; }
.bv-choose-result-inner { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
BUSINESS VOICE — Tiered Portfolio + Ad-image placeholder bands
(distinct layout from Business Internet: category rows, not a flat grid)
============================================================ */
/* ---- Tiered portfolio ---- */
.bv-portfolio{position:relative;padding:96px 0;background:linear-gradient(180deg,#0b0a1a 0%,#0e0c22 100%);overflow:hidden}
.bv-portfolio-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.bv-portfolio .bv-prod-blob{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.10),transparent 62%);filter:blur(40px)}
.bv-tiers{margin-top:52px;display:flex;flex-direction:column;gap:22px}
.bv-tier{border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden}
.bv-tier-head{display:flex;align-items:center;gap:16px;padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.bv-tier-ico{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--tc) 14%, transparent);border:1px solid color-mix(in srgb, var(--tc) 34%, transparent)}
.bv-tier-ico svg{width:22px;height:22px}
.bv-tier-head h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;color:#fff;letter-spacing:-.01em}
.bv-tier-head p{margin:3px 0 0;font-size:13px;color:rgba(255,255,255,.5)}
.bv-tier-count{margin-left:auto;flex-shrink:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:rgba(255,255,255,.6);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.bv-tier-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:rgba(255,255,255,.05)}
.bv-item{padding:0;background:#0d0b1f;position:relative;overflow:hidden;transition:background .3s ease;--cx:50%;--cy:0%}
.bv-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);opacity:.55;transition:opacity .3s ease,width .3s ease;z-index:4}
.bv-item:hover{background:#120f28}
.bv-item:hover::before{opacity:1;width:5px}
/* mouse-follow glow (borrowed from homepage hero cards) */
.bv-item-glow{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s ease;pointer-events:none;background:radial-gradient(340px circle at var(--cx) var(--cy),color-mix(in srgb,var(--ac) 22%,transparent),transparent 60%)}
.bv-item:hover .bv-item-glow{opacity:1}
/* animated micro-visual, top-right of each card */
.bv-item-viz{position:absolute;bottom:16px;right:16px;width:44px;height:44px;z-index:5;opacity:.92;transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease;pointer-events:none;border-radius:12px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ac) 22%,#0a0818),#0a0818 78%);border:1px solid color-mix(in srgb,var(--ac) 36%,transparent);box-shadow:inset 0 0 12px color-mix(in srgb,var(--ac) 20%,transparent);overflow:hidden}
.bv-item:hover .bv-item-viz{opacity:1;transform:scale(1.08);box-shadow:0 6px 20px -6px color-mix(in srgb,var(--ac) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--ac) 28%,transparent)}
.bv-item-body{position:relative;z-index:3;padding:24px 26px;min-height:150px}
.bv-item-cta{padding-right:52px}
.bv-item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;padding-right:8px}
.bv-item-top h4{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16.5px;color:#fff;letter-spacing:-.01em}
.bv-item-flag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ac);background:color-mix(in srgb, var(--ac) 14%, transparent);border:1px solid color-mix(in srgb, var(--ac) 32%, transparent);padding:3px 8px;border-radius:20px}
.bv-item-body p{margin:0 0 14px;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.56)}
.bv-item-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.bv-item-tags span{font-size:11px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:4px 9px;border-radius:7px}
/* per-card CTA */
.bv-item-cta{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ac);text-decoration:none;letter-spacing:.01em}
.bv-item-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.bv-item:hover .bv-item-cta svg{transform:translateX(4px)}
.bv-item-cta::after{content:"";display:block}
/* ---- Story band: asymmetric portrait ad + copy ---- */
.bv-story{position:relative;padding:88px 0;background:#0a0918;overflow:hidden}
.bv-story-inner{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:52px;align-items:center}
.bv-story-media{position:relative}
.bv-story-frame{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:1px solid rgba(34,197,94,.22);background:linear-gradient(160deg,rgba(34,197,94,.09),rgba(14,12,34,.6));box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.bv-story-frame picture{position:absolute;inset:0;z-index:1}
.bv-story-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:1}
.bv-story-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(74,222,128,.55);text-align:center;padding:24px}
.bv-story-ph svg{width:46px;height:46px;opacity:.7}
.bv-story-ph span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em}
.bv-story-ph small{font-size:11.5px;color:rgba(255,255,255,.3);max-width:200px;line-height:1.5}
.bv-story-badge{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#fff;background:rgba(10,9,24,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);padding:8px 13px;border-radius:30px;z-index:3}
.bv-story-badge-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px rgba(34,197,94,.8);animation:bvPulse 2s infinite}
@keyframes bvPulse{0%,100%{opacity:1}50%{opacity:.4}}
.bv-story-copy .eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bv-story-copy h2{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.14;color:#fff;letter-spacing:-.02em}
.bv-story-copy>p{margin:0 0 22px;font-size:15px;line-height:1.68;color:rgba(255,255,255,.58);max-width:520px}
.bv-story-points{display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
.bv-story-pt{display:flex;align-items:center;gap:11px;font-size:14px;color:rgba(255,255,255,.8)}
.bv-story-pt span{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#22C55E;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.32)}
/* ---- Cinema band: wide cinematic ad strip ---- */
.bv-cinema{position:relative;padding:64px 24px;background:#0a0918}
.bv-cinema-frame{position:relative;max-width:1180px;margin:0 auto;min-height:340px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(120deg,#101a16 0%,#0d1524 60%,#141020 100%);display:flex;align-items:center}
.bv-cinema-frame>picture{position:absolute;inset:0;z-index:1}
.bv-cinema-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:1}
.bv-cinema-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,.32);text-align:center;z-index:1;padding:24px}
.bv-cinema-ph svg{width:44px;height:44px;opacity:.55}
.bv-cinema-ph span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em}
.bv-cinema-ph small{font-size:11.5px;color:rgba(255,255,255,.24);max-width:280px;line-height:1.5}
.bv-cinema-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(8,7,20,.9) 0%,rgba(8,7,20,.72) 42%,rgba(8,7,20,.25) 100%)}
.bv-cinema-content{position:relative;z-index:3;padding:44px 48px;max-width:600px}
.bv-cinema-tag{display:inline-block;margin-bottom:14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4ADE80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);padding:5px 12px;border-radius:30px}
.bv-cinema-content h2{margin:0 0 12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(24px,3.4vw,36px);line-height:1.12;color:#fff;letter-spacing:-.02em}
.bv-cinema-content>p{margin:0 0 24px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);max-width:480px}
/* ---- Responsive ---- */
@media(max-width:860px){
.bv-story-inner{grid-template-columns:1fr;gap:32px}
.bv-story-media{max-width:360px;margin:0 auto}
.bv-tier-head{flex-wrap:wrap}
.bv-cinema-content{padding:34px 28px}
.bv-cinema-scrim{background:linear-gradient(180deg,rgba(8,7,20,.55) 0%,rgba(8,7,20,.9) 100%)}
}
@media(max-width:520px){
.bv-tier-items{grid-template-columns:1fr}
.bv-portfolio,.bv-story{padding:64px 0}
}
/* ============================================================
BUSINESS VOICE — per-card micro-visual animations (v2)
Sized to fit a 46x46 badge; brighter, glowing, always-on.
All coordinates are relative to the 46px badge; center = 23,23.
============================================================ */
.bv-item-viz span{position:absolute;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--ac) 70%,transparent))}
/* RING — Advantage Voice: pulsing call rings */
.bv-viz-ring .bv-ring-core{top:23px;left:23px;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac),0 0 14px var(--ac)}
.bv-viz-ring .bv-ring-w{top:23px;left:23px;width:8px;height:8px;margin:-4px;border-radius:50%;border:2px solid var(--ac);animation:bvRing 2.2s ease-out infinite}
.bv-viz-ring .bv-ring-w:nth-child(3){animation-delay:.73s}
.bv-viz-ring .bv-ring-w:nth-child(4){animation-delay:1.46s}
@keyframes bvRing{0%{transform:scale(1);opacity:1}100%{transform:scale(4);opacity:0}}
/* PULL — Unison: call hops between two devices */
.bv-viz-pull .bv-pull-dev{width:12px;height:18px;border-radius:3px;border:2px solid var(--ac);top:23px;margin-top:-9px}
.bv-viz-pull .bv-pull-a{left:5px}
.bv-viz-pull .bv-pull-b{right:5px}
.bv-viz-pull .bv-pull-dot{top:23px;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac),0 0 12px var(--ac);animation:bvPull 2.4s ease-in-out infinite}
@keyframes bvPull{0%,100%{left:9px}50%{left:31px}20%,80%{opacity:1}45%,55%{opacity:.55}}
/* ROUTE — Cloud UC: hub fans calls to multiple lines */
.bv-viz-route .bv-route-hub{left:6px;top:23px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.bv-viz-route .bv-route-line{left:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ac),transparent);transform-origin:left center;animation:bvRoute 2s ease-in-out infinite}
.bv-viz-route .bv-rl1{top:13px;width:26px;animation-delay:0s}
.bv-viz-route .bv-rl2{top:23px;width:30px;animation-delay:.28s}
.bv-viz-route .bv-rl3{top:33px;width:24px;animation-delay:.56s}
@keyframes bvRoute{0%,100%{opacity:.3;transform:scaleX(.55)}50%{opacity:1;transform:scaleX(1)}}
/* PRESENCE — Operator Connect: Teams-style status bars + dot */
.bv-viz-presence .bv-pres-bar{left:8px;height:4px;border-radius:2px;background:var(--ac)}
.bv-viz-presence .bv-pres-bar:nth-child(1){top:14px;width:20px;animation:bvPres 1.7s ease-in-out infinite}
.bv-viz-presence .bv-pres-bar:nth-child(2){top:22px;width:28px;animation:bvPres 1.7s ease-in-out infinite .28s}
.bv-viz-presence .bv-pres-bar:nth-child(3){top:30px;width:16px;animation:bvPres 1.7s ease-in-out infinite .56s}
.bv-viz-presence .bv-pres-dot{top:12px;right:8px;width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px #22C55E,0 0 12px #22C55E;animation:bvBlink 1.5s ease-in-out infinite}
@keyframes bvPres{0%,100%{opacity:.4;width:14px}50%{opacity:1}}
@keyframes bvBlink{0%,100%{opacity:1}50%{opacity:.35}}
/* SYNC — Teams Phone Mobile: pulse travels between two nodes */
.bv-viz-sync .bv-sync-node{width:9px;height:9px;border-radius:50%;border:2px solid var(--ac);top:23px;margin-top:-4.5px}
.bv-viz-sync .bv-sn1{left:6px}
.bv-viz-sync .bv-sn2{right:6px}
.bv-viz-sync .bv-sync-pulse{top:23px;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac),0 0 14px var(--ac);animation:bvSync 1.7s ease-in-out infinite}
@keyframes bvSync{0%{left:9px;transform:scale(1)}50%{left:31px;transform:scale(1.35)}100%{left:9px;transform:scale(1)}}
/* STACK — M365: app tiles cascade */
.bv-viz-stack .bv-stack-app{width:14px;height:14px;border-radius:4px;border:2px solid var(--ac);animation:bvStack 2.2s ease-in-out infinite}
.bv-viz-stack .bv-sa1{top:9px;left:9px;animation-delay:0s}
.bv-viz-stack .bv-sa2{top:17px;left:19px;animation-delay:.22s;opacity:.8}
.bv-viz-stack .bv-sa3{top:25px;left:12px;animation-delay:.44s;opacity:.6}
@keyframes bvStack{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-3px);opacity:1}}
/* QUEUE — Cloud Contact Centre: calls line up into an agent */
.bv-viz-queue .bv-q-agent{right:6px;top:23px;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac),0 0 12px var(--ac)}
.bv-viz-queue .bv-q-call{top:23px;margin-top:-3px;width:6px;height:6px;border-radius:50%;border:2px solid var(--ac);animation:bvQueue 2.2s linear infinite}
.bv-viz-queue .bv-qc1{animation-delay:0s}
.bv-viz-queue .bv-qc2{animation-delay:.73s}
.bv-viz-queue .bv-qc3{animation-delay:1.46s}
@keyframes bvQueue{0%{left:3px;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:28px;opacity:0}}
/* SCALE — Virtual Contact Centre: bars scale up/down (adaptiveness) */
.bv-viz-scale .bv-scale-b{bottom:11px;width:8px;border-radius:2px;background:var(--ac);box-shadow:0 0 6px color-mix(in srgb,var(--ac) 60%,transparent)}
.bv-viz-scale .bv-sb1{left:10px;animation:bvScale 1.5s ease-in-out infinite}
.bv-viz-scale .bv-sb2{left:20px;animation:bvScale 1.5s ease-in-out infinite .2s}
.bv-viz-scale .bv-sb3{left:30px;animation:bvScale 1.5s ease-in-out infinite .4s}
@keyframes bvScale{0%,100%{height:8px;opacity:.55}50%{height:24px;opacity:1}}
/* TRUNK — SIP Trunking: PBX → dashed flow → cloud */
.bv-viz-trunk .bv-trunk-pbx{left:5px;top:23px;width:10px;height:12px;margin-top:-6px;border-radius:2px;border:2px solid var(--ac)}
.bv-viz-trunk .bv-trunk-cloud{right:5px;top:23px;width:13px;height:9px;margin-top:-4.5px;border-radius:5px;background:color-mix(in srgb,var(--ac) 45%,transparent);border:2px solid var(--ac)}
.bv-viz-trunk .bv-trunk-flow{left:17px;top:23px;width:14px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--ac) 0 3px,transparent 3px 6px);animation:bvTrunk .7s linear infinite}
@keyframes bvTrunk{0%{background-position:0 0}100%{background-position:6px 0}}
/* LINE — Business Phone: steady dial-tone pulse line */
.bv-viz-line .bv-line-wave{left:9px;top:23px;width:28px;height:2px;margin-top:-1px;border-radius:2px;overflow:visible}
.bv-viz-line .bv-line-wave::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--ac) 0 2px,transparent 2px 5px);animation:bvTrunk 1s linear infinite}
.bv-viz-line .bv-line-wave::after{content:"";position:absolute;left:0;top:-4px;width:5px;height:10px;border-radius:2px;background:var(--ac);box-shadow:0 0 8px var(--ac);animation:bvQueue 2.2s linear infinite}
/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
.bv-item-viz span,.bv-item-viz span::before,.bv-item-viz span::after{animation:none!important}
}
/* Business Voice cards — staggered entrance (JS adds .bv-in) */
.bv-portfolio .bv-item{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),background .3s ease}
.bv-portfolio .bv-item.bv-in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.bv-portfolio .bv-item{opacity:1;transform:none}}
/* ============================================================
BUSINESS VOICE — Powered by Rogers together with Shaw + Platforms strip
============================================================ */
/* ---- Powered by Rogers together with Shaw ---- */
.bv-powered{position:relative;padding:92px 0;background:linear-gradient(180deg,#0a0620 0%,#0d0a24 100%);overflow:hidden}
.bv-powered-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.bv-powered-glow{position:absolute;top:-10%;left:-6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.16),transparent 66%);filter:blur(50px)}
.bv-powered-inner{position:relative;z-index:2;display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center}
.bv-powered-media{display:flex;flex-direction:column;gap:16px}
.bv-powered-video{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -30px rgba(218,41,28,.5);aspect-ratio:16/9;background:#DA291C}
.bv-powered-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bv-powered-plus{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.bv-pp-chip{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:7px 12px}
.bv-pp-chip img{display:block;height:30px;width:auto}
.bv-pp-x{color:rgba(255,255,255,.35);font-size:18px;font-weight:300}
.bv-pp-tb{display:inline-flex;align-items:center;gap:7px}
.bv-pp-tb img{display:block}
.bv-pp-tb b{font-family:'DM Sans','Space Grotesk',sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:-.01em}
.bv-powered-copy .eyebrow{display:block;margin-bottom:13px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bv-powered-copy h2{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(25px,3vw,34px);line-height:1.14;color:#fff;letter-spacing:-.02em}
.bv-powered-copy>p{margin:0 0 26px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.6);max-width:560px}
.bv-powered-points{display:flex;flex-direction:column;gap:16px}
.bv-pp{display:flex;gap:13px;align-items:flex-start}
.bv-pp-ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 34%,transparent);color:var(--c)}
.bv-pp-ic svg{width:17px;height:17px}
.bv-pp>div b{display:block;font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:2px}
.bv-pp>div span{display:block;font-size:13px;line-height:1.55;color:rgba(255,255,255,.52)}
/* ---- Platforms & Integrations strip ---- */
.bv-platforms{position:relative;padding:88px 0;background:#0b0a1a}
.bv-plat-grid{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bv-plat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease}
.bv-plat:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.32);background:linear-gradient(180deg,rgba(34,197,94,.06),rgba(255,255,255,.012))}
.bv-plat-chip{width:100%;height:64px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px 18px;margin-bottom:16px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.bv-plat-chip img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bv-plat b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff;margin-bottom:7px}
.bv-plat span{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5)}
.bv-plat-note{margin:34px auto 0;text-align:center;font-size:14px;color:rgba(255,255,255,.55)}
.bv-plat-note a{color:#4ADE80;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(74,222,128,.35);transition:border-color .2s ease}
.bv-plat-note a:hover{border-color:#4ADE80}
/* ---- Responsive ---- */
@media(max-width:900px){
.bv-powered-inner{grid-template-columns:1fr;gap:36px}
.bv-plat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
.bv-plat-grid{grid-template-columns:repeat(2,1fr)}
.bv-powered,.bv-platforms{padding:64px 0}
}
@media(max-width:420px){
.bv-plat-grid{grid-template-columns:1fr}
}
/* Business Voice hero — Rogers together with Shaw co-brand lockup */
.bv-hero-lockup{display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:22px;padding:10px 17px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.bv-lockup-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.bv-lockup-chip{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:8px 13px}
.bv-lockup-chip img{display:block;height:34px;width:auto}
.bv-lockup-sep{width:1px;height:26px;background:rgba(255,255,255,.15)}
.bv-lockup-tb{display:inline-flex;align-items:center;gap:6px}
.bv-lockup-tb img{display:block}
.bv-lockup-tb b{font-family:'DM Sans','Space Grotesk',sans-serif;font-weight:800;font-size:14px;color:#fff;letter-spacing:-.01em}
@media(max-width:520px){.bv-hero-lockup{gap:10px;padding:9px 13px}.bv-lockup-label{width:100%;text-align:center}.bv-lockup-chip img{height:28px}}
/* ============================================================
BUSINESS INTERNET — Powered by Rogers together with Shaw band + Platforms strip
============================================================ */
/* ---- Powered band (replaces old bi-powered strip, inside bi-network) ---- */
.bi-powered-band{margin-top:44px;display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:center;padding:28px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09)}
.bi-powered-media{display:flex;flex-direction:column;gap:14px}
.bi-powered-video{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px -28px rgba(218,41,28,.5);aspect-ratio:16/9;background:#DA291C}
.bi-powered-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bi-powered-lockup{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.bi-pl-chip{display:inline-flex;align-items:center;background:#fff;border-radius:7px;padding:6px 11px}
.bi-pl-chip img{display:block;height:28px;width:auto}
.bi-pl-x{color:rgba(255,255,255,.35);font-size:16px;font-weight:300}
.bi-pl-tb{display:inline-flex;align-items:center;gap:6px}
.bi-pl-tb img{display:block}
.bi-pl-tb b{font-family:'DM Sans','Space Grotesk',sans-serif;font-weight:800;font-size:13.5px;color:#fff;letter-spacing:-.01em}
.bi-powered-copy .eyebrow{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bi-powered-copy h3{margin:0 0 14px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(21px,2.5vw,27px);line-height:1.18;color:#fff;letter-spacing:-.01em}
.bi-powered-copy>p{margin:0 0 22px;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.58)}
.bi-powered-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:#2DD4CF;text-decoration:none;padding:11px 20px;border-radius:10px;background:rgba(45,212,207,.1);border:1px solid rgba(45,212,207,.3);transition:background .25s ease,border-color .25s ease,transform .25s ease}
.bi-powered-cta:hover{background:rgba(45,212,207,.18);border-color:rgba(45,212,207,.55);transform:translateY(-1px)}
.bi-powered-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.bi-powered-cta:hover svg{transform:translateX(4px)}
/* ---- Platforms & Integrations strip ---- */
.bi-platforms{position:relative;padding:88px 0;background:linear-gradient(180deg,#0a0620,#0d0722)}
.bi-plat-grid{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bi-plat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease}
.bi-plat:hover{transform:translateY(-4px);border-color:rgba(45,212,207,.32);background:linear-gradient(180deg,rgba(45,212,207,.06),rgba(255,255,255,.012))}
.bi-plat-chip{width:100%;height:64px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px 18px;margin-bottom:16px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.bi-plat-chip img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bi-plat b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff;margin-bottom:7px}
.bi-plat span{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5)}
.bi-plat-note{margin:34px auto 0;text-align:center;font-size:14px;color:rgba(255,255,255,.55)}
.bi-plat-note a{color:#2DD4CF;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(45,212,207,.35);transition:border-color .2s ease}
.bi-plat-note a:hover{border-color:#2DD4CF}
@media(max-width:900px){
.bi-powered-band{grid-template-columns:1fr;gap:28px}
.bi-plat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
.bi-plat-grid{grid-template-columns:repeat(2,1fr)}
.bi-platforms{padding:64px 0}
}
@media(max-width:420px){
.bi-plat-grid{grid-template-columns:1fr}
}
/* ============================================================
SERVICE CONTACT PAGES (/contact/*) — form engine UI
============================================================ */
/* ---- Hero ---- */
.tbc-hero{position:relative;padding:120px 0 40px;background:linear-gradient(180deg,#0a0620,#0d0a24);overflow:hidden}
.tbc-hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.tbc-hero-blob{position:absolute;border-radius:50%;filter:blur(60px)}
.tbc-hb1{top:-14%;left:-6%;width:460px;height:460px;background:radial-gradient(circle,rgba(34,197,94,.14),transparent 66%)}
.tbc-hb2{bottom:-24%;right:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 66%)}
.tbc-hero-inner{position:relative;z-index:2}
.tbc-hero-badge{display:inline-flex;align-items:center;gap:8px;margin:14px 0 16px;padding:7px 15px;border-radius:40px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28);font-size:12.5px;font-weight:600;color:#4ADE80}
.tbc-hero-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(30px,4.4vw,46px);line-height:1.08;color:#fff;letter-spacing:-.02em;margin:0 0 16px;max-width:760px}
.tbc-hero-sub{font-size:16px;line-height:1.65;color:rgba(255,255,255,.6);max-width:640px}
/* ---- Layout ---- */
.tbc-main{padding:0 0 90px;background:linear-gradient(180deg,#0d0a24,#0a0620)}
.tbc-grid{display:grid;grid-template-columns:1.35fr 0.85fr;gap:28px;align-items:stretch}
/* ---- Form card ---- */
.tbc-form-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:30px;box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}
.tbc-form-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.tbc-form-head h2{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;color:#fff;letter-spacing:-.01em}
.tbc-form-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:30px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.26);font-size:12px;font-weight:600;color:#4ADE80;white-space:nowrap}
.tbc-modes-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:12px}
.tb-modes{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:24px}
.tb-mode{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;color:#fff}
.tb-mode:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.05)}
.tb-mode-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:#4ADE80}
.tb-mode-ic svg{width:18px;height:18px}
.tb-mode-t{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;line-height:1.25}
.tb-mode-s{font-size:10.5px;color:rgba(255,255,255,.45);line-height:1.3}
.tb-mode-on{border-color:#22C55E;background:rgba(34,197,94,.12);box-shadow:0 0 0 1px rgba(34,197,94,.5),0 10px 26px -12px rgba(34,197,94,.6)}
.tb-mode-on .tb-mode-ic{background:#22C55E;border-color:#22C55E;color:#0a0620}
.tb-mode-locked{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.tb-mode-locked:hover{transform:none;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.tbc-fields{display:flex;flex-direction:column;gap:15px}
.tbc-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.tbc-field{display:flex;flex-direction:column;gap:6px}
.tbc-field label{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75)}
.tbc-hint{font-weight:400;color:rgba(255,255,255,.4)}
.tbc-field input,.tbc-field textarea,.tbc-field select{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:12px 14px;color:#fff;font-size:14px;font-family:inherit;transition:border-color .2s ease,background .2s ease}
.tbc-field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.tbc-field select option{background:#141029;color:#fff}
.tbc-field input::placeholder,.tbc-field textarea::placeholder{color:rgba(255,255,255,.32)}
.tbc-field input:focus,.tbc-field textarea:focus,.tbc-field select:focus{outline:none;border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.05)}
.tbc-field textarea{min-height:100px;resize:vertical}
.tb-postal-note{font-size:11.5px;line-height:1.4;min-height:15px;transition:color .2s ease}
.tb-postal-note.ok{color:#4ADE80}
.tb-postal-note.warn{color:#F59E0B}
.tbc-submit{width:100%;margin-top:22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px;border:none;border-radius:12px;background:linear-gradient(135deg,#22C55E,#16A34A);color:#062012;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.tbc-submit:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(34,197,94,.7)}
.tbc-submit svg{transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.tbc-submit:hover svg{transform:translateX(4px)}
.tbc-privacy{margin-top:14px;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.4);text-align:center}
/* ---- Lightning bolt animation ---- */
.tbc-bolt{display:inline-flex;color:#FDE047;filter:drop-shadow(0 0 4px rgba(253,224,71,.7));animation:tbBolt 2.4s steps(1) infinite}
@keyframes tbBolt{0%,92%,100%{opacity:1;transform:scale(1)}94%{opacity:.3;transform:scale(1.25)}96%{opacity:1;transform:scale(.9)}98%{opacity:.5;transform:scale(1.15)}}
.tbc-submit .tbc-bolt{color:#062012;filter:none;animation:tbBoltFast 1.6s steps(1) infinite}
@keyframes tbBoltFast{0%,88%,100%{opacity:1}90%{opacity:.2}92%{opacity:1}94%{opacity:.4}96%{opacity:1}}
/* ---- Side panel ---- */
.tbc-side{display:flex;flex-direction:column;gap:18px;height:100%}
.tbc-side .tbc-ad[data-ad-slot="voice-contact-1"]{flex:1 1 auto;min-height:200px;aspect-ratio:auto}
.tbc-side-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:22px}
.tbc-side-card h3{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.tbc-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.tbc-step:last-child{margin-bottom:0}
.tbc-step-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:#4ADE80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3)}
.tbc-step b{display:block;font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:#fff;margin-bottom:2px}
.tbc-step p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5)}
.tbc-contact-info{display:flex;flex-direction:column;gap:15px}
.tbc-ci{display:flex;gap:12px;align-items:flex-start}
.tbc-ci-ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#4ADE80}
.tbc-ci-ic svg{width:17px;height:17px}
.tbc-ci-t{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.4);margin-bottom:2px}
.tbc-ci a,.tbc-ci-d{font-size:13.5px;color:rgba(255,255,255,.82);text-decoration:none;line-height:1.4}
.tbc-ci a:hover{color:#4ADE80}
/* ---- Ad placeholders ---- */
.tbc-ad{padding:0;overflow:hidden;min-height:150px;border-radius:18px}
.tbc-ad[data-ad-slot="voice-contact-1"]{aspect-ratio:4/5;min-height:0}
.tbc-ad-wide{min-height:120px}
.tbc-ad img{display:block;width:100%;height:100%;object-fit:cover}
.tbc-ad picture{display:block;width:100%;height:100%}
.tbc-ad-ph{width:100%;height:100%;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;color:rgba(255,255,255,.28);border:1px dashed rgba(255,255,255,.14);border-radius:18px;text-align:center}
.tbc-ad-ph svg{width:34px;height:34px;opacity:.6}
.tbc-ad-ph span{font-size:12px;font-weight:600;letter-spacing:.02em}
/* ---- Success state ---- */
.tb-form-success{text-align:center;padding:38px 16px}
.tb-form-success-ico{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#22C55E,#16A34A);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.tb-form-success h3{margin:0 0 10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:26px;color:#fff}
.tb-form-success p{margin:0 auto;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.6);max-width:440px}
/* ---- Reveal (lightning-quick) ---- */
.tbc-hero-inner.reveal,.tbc-form-card.reveal,.tbc-side.reveal{opacity:0;transform:translateY(14px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.tbc-form-card.reveal{transition-delay:.06s}
.tbc-side.reveal{transition-delay:.12s}
.reveal.in,.tbc-hero-inner.reveal.in,.tbc-form-card.reveal.in,.tbc-side.reveal.in{opacity:1;transform:none}
/* ---- Responsive ---- */
@media(max-width:900px){
.tbc-grid{grid-template-columns:1fr}
.tb-modes{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
.tb-modes{grid-template-columns:repeat(2,1fr)}
.tbc-row{grid-template-columns:1fr}
.tbc-form-card{padding:22px}
.tbc-hero{padding:100px 0 32px}
}
@media(prefers-reduced-motion:reduce){
.tbc-bolt,.tbc-submit .tbc-bolt{animation:none}
}
/* ============================================================
BUSINESS INTERNET contact page — teal variant overrides
============================================================ */
.tbc-hero-bi .tbc-hb1{background:radial-gradient(circle,rgba(45,212,207,.15),transparent 66%)}
.tbc-hero-bi .tbc-hb2{background:radial-gradient(circle,rgba(139,92,246,.12),transparent 66%)}
.tbc-hero-bi .tbc-hero-badge{background:rgba(45,212,207,.1);border-color:rgba(45,212,207,.28);color:#2DD4CF}
.tbc-hero-bi .tbc-bolt{color:#5EEAD4;filter:drop-shadow(0 0 4px rgba(94,234,212,.7))}
.tbc-form-bi .tbc-form-badge{background:rgba(45,212,207,.1);border-color:rgba(45,212,207,.26);color:#2DD4CF}
.tbc-form-bi .tbc-form-badge .tbc-bolt{color:#5EEAD4}
.tbc-form-bi .tb-mode:hover{border-color:rgba(45,212,207,.4);background:rgba(45,212,207,.05)}
.tbc-form-bi .tb-mode-ic{background:rgba(45,212,207,.12);border-color:rgba(45,212,207,.25);color:#2DD4CF}
.tbc-form-bi .tb-mode-on{border-color:#2DD4CF;background:rgba(45,212,207,.12);box-shadow:0 0 0 1px rgba(45,212,207,.5),0 10px 26px -12px rgba(45,212,207,.6)}
.tbc-form-bi .tb-mode-on .tb-mode-ic{background:#2DD4CF;border-color:#2DD4CF;color:#04201f}
.tbc-form-bi .tbc-field input:focus,.tbc-form-bi .tbc-field textarea:focus,.tbc-form-bi .tbc-field select:focus{border-color:rgba(45,212,207,.55);background:rgba(45,212,207,.05)}
.tbc-form-bi .tb-postal-note.ok{color:#2DD4CF}
.tbc-submit-bi{background:linear-gradient(135deg,#2DD4CF,#18B6A7);color:#04201f}
.tbc-submit-bi:hover{box-shadow:0 16px 40px -14px rgba(45,212,207,.7)}
.tbc-submit-bi .tbc-bolt{color:#04201f}
/* BI side accents */
.tbc-hero-bi ~ .tbc-main .tbc-step-n,
.tbc-form-bi ~ .tbc-side .tbc-step-n{color:#2DD4CF;background:rgba(45,212,207,.12);border-color:rgba(45,212,207,.3)}
.tbc-form-bi ~ .tbc-side .tbc-ci-ic{color:#2DD4CF}
.tbc-form-bi ~ .tbc-side .tbc-ci a:hover{color:#2DD4CF}
/* BI ad slot — same portrait-fill behavior as voice */
.tbc-side .tbc-ad[data-ad-slot="internet-contact-1"]{flex:1 1 auto;min-height:200px}
.tbc-form-bi .tb-form-success-ico{background:linear-gradient(135deg,#2DD4CF,#18B6A7)}
/* Business Internet — product card CTAs */
.bi-prod-card{display:flex;flex-direction:column}
.bi-prod-card .bi-prod-chips{margin-bottom:18px}
.bi-prod-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ac,#2DD4CF);text-decoration:none;letter-spacing:.01em;padding:9px 16px;border-radius:9px;background:color-mix(in srgb,var(--ac,#2DD4CF) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac,#2DD4CF) 30%,transparent);transition:background .25s ease,border-color .25s ease,transform .2s ease}
.bi-prod-cta:hover{background:color-mix(in srgb,var(--ac,#2DD4CF) 20%,transparent);border-color:color-mix(in srgb,var(--ac,#2DD4CF) 55%,transparent);transform:translateY(-1px)}
.bi-prod-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.bi-prod-cta:hover svg{transform:translateX(4px)}
/* ============================================================
MANAGED IT, SECURITY & CLOUD — /solutions/managed-it-security
Palette: #EC4899 (primary), #8B5CF6, #2DD4CF, #F59E0B, #22C55E
============================================================ */
/* ---- Buttons ---- */
.mi-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;cursor:pointer}
.mi-btn-primary{background:linear-gradient(135deg,#EC4899,#B8318C);color:#fff;border:none}
.mi-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(236,72,153,.7)}
.mi-btn-primary svg{transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.mi-btn-primary:hover svg{transform:translateX(4px)}
.mi-btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.16)}
.mi-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* ---- Hero ---- */
.mi-hero{position:relative;padding:128px 0 80px;background:linear-gradient(180deg,#0a0620,#0d0a24);overflow:hidden}
.mi-hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.mi-hero-blob{position:absolute;border-radius:50%;filter:blur(70px)}
.mi-hb1{top:-16%;left:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(236,72,153,.16),transparent 66%)}
.mi-hb2{bottom:-24%;right:-8%;width:560px;height:560px;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 66%)}
.mi-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(236,72,153,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(236,72,153,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%)}
.mi-hero-inner{position:relative;z-index:2}
.mi-hero-badge{display:inline-flex;align-items:center;gap:8px;margin:16px 0 18px;padding:7px 15px;border-radius:40px;background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.28);font-size:12.5px;font-weight:600;color:#F9A8D4}
.mi-badge-dot{width:7px;height:7px;border-radius:50%;background:#EC4899;box-shadow:0 0 0 0 rgba(236,72,153,.6);animation:miPulse 2s infinite}
@keyframes miPulse{0%{box-shadow:0 0 0 0 rgba(236,72,153,.5)}70%{box-shadow:0 0 0 8px rgba(236,72,153,0)}100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}}
.mi-hero-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(34px,5vw,56px);line-height:1.05;color:#fff;letter-spacing:-.02em;margin:0 0 18px;max-width:820px}
.mi-hero-sub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.6);max-width:680px;margin:0 0 26px}
.mi-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.mi-cobrand{display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;padding:10px 17px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);margin-bottom:34px}
.mi-cobrand-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.mi-cobrand-plate{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:8px 13px}
.mi-cobrand-plate img{display:block;height:32px;width:auto}
.mi-cobrand-x{color:rgba(255,255,255,.3);font-size:16px}
.mi-cobrand-tb{display:inline-flex;align-items:center;gap:7px}
.mi-cobrand-tb img{display:block;height:20px;width:auto}
.mi-cobrand-tbname{font-family:'DM Sans','Space Grotesk',sans-serif;font-weight:800;font-size:14px;color:#fff;letter-spacing:-.01em}
.mi-hero-trust{display:grid;grid-template-columns:repeat(4,auto);gap:34px;flex-wrap:wrap}
.mi-htrust b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(24px,3vw,32px);color:#fff;line-height:1;margin-bottom:6px}
.mi-htrust span{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.4;max-width:180px;display:block}
/* ---- Ticker ---- */
.mi-ticker-sec{background:#0b0a1a;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0;overflow:hidden}
.mi-ticker{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mi-ticker-row{display:flex;align-items:center;gap:22px;white-space:nowrap;animation:miTicker 34s linear infinite;padding-right:22px}
.mi-ticker-row span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:rgba(255,255,255,.72)}
.mi-ticker-row i{color:#EC4899;font-style:normal}
@keyframes miTicker{to{transform:translateX(-50%)}}
/* ---- Why ---- */
.mi-why{padding:88px 0;background:#0d0a24}
.mi-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.mi-why-card{padding:26px 22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s}
.mi-why-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 40%,transparent);background:color-mix(in srgb,var(--ac) 6%,rgba(255,255,255,.01))}
.mi-why-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:16px}
.mi-why-ico svg{width:24px;height:24px}
.mi-why-card h3{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.mi-why-card p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55)}
/* ---- Products ---- */
.mi-products{position:relative;padding:88px 0;background:#0a0817;overflow:hidden}
.mi-products-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.mi-prod-blob{position:absolute;top:10%;right:-6%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.1),transparent 66%);filter:blur(60px)}
.mi-products .wrap{position:relative;z-index:1}
.mi-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.mi-prod-card{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .4s cubic-bezier(.22,.7,.2,1),border-color .4s,background .4s,box-shadow .4s}
.mi-prod-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ac) 80%,transparent)}
.mi-prod-feature{background:linear-gradient(165deg,color-mix(in srgb,var(--ac) 12%,rgba(255,255,255,.02)),rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--ac) 34%,transparent)}
.mi-prod-tag{position:absolute;top:16px;right:16px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ac);padding:4px 10px;border-radius:20px}
.mi-prod-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.mi-prod-ico{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--ac);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--ac) 90%,transparent)}
.mi-prod-ico svg{width:24px;height:24px}
.mi-prod-head h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:#fff}
.mi-prod-desc{margin:0 0 18px;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.6)}
.mi-prod-specs{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.mi-spec{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.06)}
.mi-spec-k{color:rgba(255,255,255,.45)}
.mi-spec-v{color:rgba(255,255,255,.82);text-align:right;font-weight:500}
.mi-prod-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.mi-prod-chips span{font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;color:color-mix(in srgb,var(--ac) 80%,#fff);background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 26%,transparent)}
.mi-prod-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ac);text-decoration:none;padding:9px 16px;border-radius:9px;background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);transition:background .25s,border-color .25s,transform .2s}
.mi-prod-cta:hover{background:color-mix(in srgb,var(--ac) 20%,transparent);border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-1px)}
.mi-prod-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.mi-prod-cta:hover svg{transform:translateX(4px)}
/* ---- NIST Framework ---- */
.mi-framework{padding:88px 0;background:#0d0a24}
.mi-nist{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:50px}
.mi-nist-line{position:absolute;top:29px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,#EC4899,#8B5CF6,#2DD4CF,#F59E0B,#22C55E);opacity:.4;z-index:0}
.mi-nist-step{position:relative;z-index:1;text-align:center;padding:0 6px}
.mi-nist-node{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#0d0a24;border:2px solid var(--ac);color:var(--ac);box-shadow:0 0 0 6px #0d0a24,0 10px 26px -12px color-mix(in srgb,var(--ac) 90%,transparent);transition:transform .3s ease}
.mi-nist-step:hover .mi-nist-node{transform:translateY(-4px) scale(1.05)}
.mi-nist-node svg{width:26px;height:26px}
.mi-nist-num{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ac);margin-bottom:6px}
.mi-nist-step h4{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.mi-nist-step p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.5)}
/* ---- Platforms ---- */
.mi-platforms{padding:88px 0;background:#0b0a1a}
.mi-plat-grid{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mi-plat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
.mi-plat:hover{transform:translateY(-4px);border-color:rgba(236,72,153,.32);background:linear-gradient(180deg,rgba(236,72,153,.06),rgba(255,255,255,.012))}
.mi-plat-chip{width:100%;height:64px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px 18px;margin-bottom:16px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.mi-plat-chip img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mi-plat b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff;margin-bottom:7px}
.mi-plat span{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5)}
.mi-plat-note{margin:34px auto 0;text-align:center;font-size:14px;color:rgba(255,255,255,.55)}
.mi-plat-note a{color:#EC4899;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(236,72,153,.35);transition:border-color .2s}
.mi-plat-note a:hover{border-color:#EC4899}
/* ---- Ad band ---- */
.mi-adband{padding:80px 0;background:#0a0817}
.mi-ad{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mi-ad-media{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;box-shadow:0 30px 70px -34px rgba(236,72,153,.4)}
.mi-ad-media img{display:block;width:100%;height:100%;object-fit:cover}
.mi-ad-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.28);background:linear-gradient(135deg,rgba(236,72,153,.06),rgba(139,92,246,.05));border:1px dashed rgba(255,255,255,.14)}
.mi-ad-ph svg{width:40px;height:40px;opacity:.6}
.mi-ad-ph span{font-size:12.5px;font-weight:600}
.mi-ad-content .eyebrow{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mi-ad-content h3{margin:0 0 15px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(23px,2.6vw,30px);line-height:1.16;color:#fff;letter-spacing:-.01em}
.mi-ad-content>p{margin:0 0 20px;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.6)}
.mi-ad-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.mi-ad-list li{display:flex;align-items:center;gap:11px;font-size:14px;color:rgba(255,255,255,.78)}
.mi-ad-list svg{flex-shrink:0;width:18px;height:18px}
.mi-inline-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:#EC4899;text-decoration:none;padding:12px 22px;border-radius:11px;background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.3);transition:background .25s,border-color .25s,transform .2s}
.mi-inline-cta:hover{background:rgba(236,72,153,.18);border-color:rgba(236,72,153,.55);transform:translateY(-1px)}
.mi-inline-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.mi-inline-cta:hover svg{transform:translateX(4px)}
/* ---- Choose ---- */
.mi-choose{padding:88px 0;background:#0d0a24}
.mi-choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.mi-choose-card{text-align:left;padding:24px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .3s,border-color .3s,background .3s;font-family:inherit}
.mi-choose-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 42%,transparent);background:color-mix(in srgb,var(--ac) 6%,transparent)}
.mi-choose-card.active{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);box-shadow:0 0 0 1px var(--ac),0 16px 40px -18px color-mix(in srgb,var(--ac) 80%,transparent)}
.mi-choose-ico{display:flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:14px}
.mi-choose-ico svg{width:22px;height:22px}
.mi-choose-card h4{margin:0 0 7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff}
.mi-choose-card p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.52)}
.mi-choose-result{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s,margin .4s;margin-top:0}
.mi-choose-result.show{max-height:260px;opacity:1;margin-top:24px}
.mi-choose-result-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 26px;border-radius:16px;background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(139,92,246,.08));border:1px solid rgba(236,72,153,.24)}
.mi-choose-result-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EC4899,#B8318C)}
.mi-choose-result-inner p{flex:1;min-width:220px;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.85)}
.mi-choose-result-inner p strong{color:#fff}
.mi-choose-cta{flex-shrink:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:#fff;text-decoration:none;padding:11px 20px;border-radius:10px;background:rgba(236,72,153,.2);border:1px solid rgba(236,72,153,.45);transition:background .25s,transform .2s}
.mi-choose-cta:hover{background:rgba(236,72,153,.32);transform:translateY(-1px)}
/* ---- Process ---- */
.mi-process{padding:88px 0;background:#0a0817}
.mi-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.mi-step{position:relative;padding:26px 22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.mi-step-rail{position:absolute;top:44px;right:-9px;width:18px;height:2px;background:rgba(255,255,255,.14);z-index:1}
.mi-step-num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--ac);margin-bottom:12px}
.mi-step h4{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.mi-step p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.55)}
/* ---- FAQ ---- */
.mi-faq-sec{padding:88px 0;background:#0d0a24}
.mi-faq{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px}
.mi-faq-item{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .3s}
.mi-faq-item.open{border-color:rgba(236,72,153,.3)}
.mi-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;background:none;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:#fff;text-align:left}
.mi-faq-ic{flex-shrink:0;position:relative;width:16px;height:16px}
.mi-faq-ic::before,.mi-faq-ic::after{content:"";position:absolute;background:#EC4899;border-radius:2px;transition:transform .3s}
.mi-faq-ic::before{top:7px;left:0;width:16px;height:2px}
.mi-faq-ic::after{top:0;left:7px;width:2px;height:16px}
.mi-faq-item.open .mi-faq-ic::after{transform:scaleY(0)}
.mi-faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
.mi-faq-a p{margin:0;padding:0 22px 20px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.6)}
/* ---- Final CTA ---- */
.mi-final{position:relative;padding:96px 0;background:linear-gradient(180deg,#0a0817,#0d0a24);overflow:hidden;text-align:center}
.mi-final-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.mi-final-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:640px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.18),transparent 66%);filter:blur(60px)}
.mi-final-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.mi-final-inner .eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mi-final-inner h2{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(27px,3.6vw,40px);line-height:1.1;color:#fff;letter-spacing:-.02em}
.mi-final-inner>p{margin:0 0 28px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.6)}
.mi-final-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.mi-final-trust{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.65)}
.mi-bolt{display:inline-flex;color:#FDE047;filter:drop-shadow(0 0 4px rgba(253,224,71,.7));animation:tbBolt 2.4s steps(1) infinite}
/* ---- Responsive ---- */
@media(max-width:1000px){
.mi-why-grid{grid-template-columns:repeat(2,1fr)}
.mi-prod-grid{grid-template-columns:repeat(2,1fr)}
.mi-plat-grid{grid-template-columns:repeat(3,1fr)}
.mi-choose-grid{grid-template-columns:repeat(2,1fr)}
.mi-steps{grid-template-columns:repeat(2,1fr)}
.mi-nist{grid-template-columns:repeat(5,1fr);gap:8px}
.mi-nist-step p{display:none}
.mi-hero-trust{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:760px){
.mi-ad{grid-template-columns:1fr;gap:28px}
.mi-nist{grid-template-columns:1fr;gap:20px}
.mi-nist-line{display:none}
.mi-nist-step p{display:block}
.mi-nist-node{margin-bottom:12px}
}
@media(max-width:620px){
.mi-why-grid,.mi-prod-grid,.mi-choose-grid,.mi-steps{grid-template-columns:1fr}
.mi-plat-grid{grid-template-columns:repeat(2,1fr)}
.mi-step-rail{display:none}
.mi-hero{padding:108px 0 60px}
}
@media(prefers-reduced-motion:reduce){
.mi-ticker-row{animation:none}
.mi-badge-dot{animation:none}
.mi-bolt{animation:none}
}
/* ============================================================
MANAGED IT & SECURITY contact page — pink variant overrides
============================================================ */
.tbc-hero-mi .tbc-hb1{background:radial-gradient(circle,rgba(236,72,153,.16),transparent 66%)}
.tbc-hero-mi .tbc-hb2{background:radial-gradient(circle,rgba(139,92,246,.13),transparent 66%)}
.tbc-hero-mi .tbc-hero-badge{background:rgba(236,72,153,.1);border-color:rgba(236,72,153,.28);color:#F9A8D4}
.tbc-hero-mi .tbc-bolt{color:#FDE047}
.tbc-form-mi .tbc-form-badge{background:rgba(236,72,153,.1);border-color:rgba(236,72,153,.26);color:#F9A8D4}
.tbc-form-mi .tb-mode:hover{border-color:rgba(236,72,153,.4);background:rgba(236,72,153,.05)}
.tbc-form-mi .tb-mode-ic{background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.25);color:#EC4899}
.tbc-form-mi .tb-mode-on{border-color:#EC4899;background:rgba(236,72,153,.12);box-shadow:0 0 0 1px rgba(236,72,153,.5),0 10px 26px -12px rgba(236,72,153,.6)}
.tbc-form-mi .tb-mode-on .tb-mode-ic{background:#EC4899;border-color:#EC4899;color:#2a0716}
.tbc-form-mi .tbc-field input:focus,.tbc-form-mi .tbc-field textarea:focus,.tbc-form-mi .tbc-field select:focus{border-color:rgba(236,72,153,.55);background:rgba(236,72,153,.05)}
.tbc-form-mi .tb-postal-note.ok{color:#F472B6}
.tbc-submit-mi{background:linear-gradient(135deg,#EC4899,#B8318C);color:#fff}
.tbc-submit-mi:hover{box-shadow:0 16px 40px -14px rgba(236,72,153,.7)}
.tbc-submit-mi .tbc-bolt{color:#FDE047}
.tbc-form-mi ~ .tbc-side .tbc-step-n{color:#EC4899;background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.3)}
.tbc-form-mi ~ .tbc-side .tbc-ci-ic{color:#EC4899}
.tbc-form-mi ~ .tbc-side .tbc-ci a:hover{color:#EC4899}
.tbc-side .tbc-ad[data-ad-slot="mi-contact-1"]{flex:1 1 auto;min-height:200px}
.tbc-form-mi .tb-form-success-ico{background:linear-gradient(135deg,#EC4899,#B8318C)}
/* ============================================================
TB-NEXUS (Software & Automation) — bulletproof reveal
Content is VISIBLE BY DEFAULT. Animation is additive only.
If JS/GSAP/CDN all fail, the section still renders fully.
============================================================ */
/* Optional entrance: only applies when JS adds .tb-nx-play.
Uses a gentle starting offset ONLY while play class drives it,
via animation (so no permanent hidden state exists). */
#tb-nexus.tb-nx-play .tb-reveal-word{animation:tbNxWord .9s cubic-bezier(.22,1,.36,1) both}
#tb-nexus.tb-nx-play .tb-reveal-fade{animation:tbNxFade .8s cubic-bezier(.22,1,.36,1) both}
#tb-nexus.tb-nx-play .tb-reveal-card{animation:tbNxCard .8s cubic-bezier(.22,1,.36,1) both}
#tb-nexus.tb-nx-play .tb-reveal-word:nth-child(1){animation-delay:.05s}
#tb-nexus.tb-nx-play .tb-reveal-word:nth-child(2){animation-delay:.15s}
#tb-nexus.tb-nx-play .tb-reveal-word:nth-child(3){animation-delay:.25s}
#tb-nexus.tb-nx-play .tb-reveal-fade:nth-of-type(1){animation-delay:.35s}
#tb-nexus.tb-nx-play .tb-reveal-fade:nth-of-type(2){animation-delay:.45s}
#tb-nexus.tb-nx-play .tb-reveal-card{animation-delay:.3s}
@keyframes tbNxWord{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes tbNxFade{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes tbNxCard{from{opacity:.001;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* Reduced-motion: no entrance animation, content simply present */
@media(prefers-reduced-motion:reduce){
#tb-nexus.tb-nx-play .tb-reveal-word,
#tb-nexus.tb-nx-play .tb-reveal-fade,
#tb-nexus.tb-nx-play .tb-reveal-card{animation:none}
}
/* tb-nexus decorative animations (CSS-only, replace former GSAP) */
#tb-wave-path{animation:tbWaveFlow 4s ease-in-out infinite alternate}
@keyframes tbWaveFlow{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
#tb-nexus .tb-node-1{animation:tbNodeA 2s ease-in-out infinite alternate}
#tb-nexus .tb-node-2{animation:tbNodeB 2.5s ease-in-out infinite alternate}
@keyframes tbNodeA{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes tbNodeB{from{transform:translateY(0)}to{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){
#tb-wave-path,#tb-nexus .tb-node-1,#tb-nexus .tb-node-2{animation:none}
#tb-wave-path{stroke-dashoffset:0}
}
/* ============================================================
IOT, FLEET & ASSET TRACKING — /solutions/iot-fleet
Palette: #DA291C (Rogers red), #F59E0B (amber), #2DD4CF, #22C55E, #0B5FFF
============================================================ */
/* ---- Buttons ---- */
.io-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;cursor:pointer}
.io-btn-primary{background:linear-gradient(135deg,#DA291C,#A81E14);color:#fff;border:none}
.io-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(218,41,28,.7)}
.io-btn-primary svg{transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.io-btn-primary:hover svg{transform:translateX(4px)}
.io-btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.16)}
.io-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* ---- Hero ---- */
.io-hero{position:relative;padding:128px 0 80px;background:linear-gradient(180deg,#1a0806,#140a12);overflow:hidden}
.io-hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.io-hero-blob{position:absolute;border-radius:50%;filter:blur(70px)}
.io-hb1{top:-16%;left:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(218,41,28,.16),transparent 66%)}
.io-hb2{bottom:-24%;right:-8%;width:560px;height:560px;background:radial-gradient(circle,rgba(245,158,11,.12),transparent 66%)}
.io-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(218,41,28,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(218,41,28,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%)}
.io-hero-inner{position:relative;z-index:2}
.io-hero-badge{display:inline-flex;align-items:center;gap:8px;margin:16px 0 18px;padding:7px 15px;border-radius:40px;background:rgba(218,41,28,.1);border:1px solid rgba(218,41,28,.3);font-size:12.5px;font-weight:600;color:#F6A29B}
.io-badge-dot{width:7px;height:7px;border-radius:50%;background:#DA291C;box-shadow:0 0 0 0 rgba(218,41,28,.6);animation:ioPulse 2s infinite}
@keyframes ioPulse{0%{box-shadow:0 0 0 0 rgba(218,41,28,.5)}70%{box-shadow:0 0 0 8px rgba(218,41,28,0)}100%{box-shadow:0 0 0 0 rgba(218,41,28,0)}}
.io-hero-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(34px,5vw,56px);line-height:1.05;color:#fff;letter-spacing:-.02em;margin:0 0 18px;max-width:840px}
.io-hero-sub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.6);max-width:690px;margin:0 0 26px}
.io-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.io-cobrand{display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;padding:10px 17px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);margin-bottom:34px}
.io-cobrand-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.io-cobrand-plate{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:8px 13px}
.io-cobrand-plate img{display:block;height:32px;width:auto}
.io-cobrand-x{color:rgba(255,255,255,.3);font-size:16px}
.io-cobrand-tb{display:inline-flex;align-items:center;gap:7px}
.io-cobrand-tb img{display:block;height:20px;width:auto}
.io-cobrand-tbname{font-family:'DM Sans','Space Grotesk',sans-serif;font-weight:800;font-size:14px;color:#fff;letter-spacing:-.01em}
.io-hero-trust{display:grid;grid-template-columns:repeat(4,auto);gap:34px;flex-wrap:wrap}
.io-htrust b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(24px,3vw,32px);color:#fff;line-height:1;margin-bottom:6px}
.io-htrust span{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.4;max-width:190px;display:block}
/* ---- Ticker ---- */
.io-ticker-sec{background:#120709;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0;overflow:hidden}
.io-ticker{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.io-ticker-row{display:flex;align-items:center;gap:22px;white-space:nowrap;animation:ioTicker 34s linear infinite;padding-right:22px}
.io-ticker-row span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:rgba(255,255,255,.72)}
.io-ticker-row i{color:#DA291C;font-style:normal}
@keyframes ioTicker{to{transform:translateX(-50%)}}
/* ---- Why ---- */
.io-why{padding:88px 0;background:#140a12}
.io-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.io-why-card{padding:26px 22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s}
.io-why-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 40%,transparent);background:color-mix(in srgb,var(--ac) 6%,rgba(255,255,255,.01))}
.io-why-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:16px}
.io-why-ico svg{width:24px;height:24px}
.io-why-card h3{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.io-why-card p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55)}
/* ---- Products ---- */
.io-products{position:relative;padding:88px 0;background:#0f070c;overflow:hidden}
.io-products-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.io-prod-blob{position:absolute;top:10%;right:-6%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.1),transparent 66%);filter:blur(60px)}
.io-products .wrap{position:relative;z-index:1}
.io-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.io-prod-card{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .4s cubic-bezier(.22,.7,.2,1),border-color .4s,background .4s,box-shadow .4s}
.io-prod-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ac) 80%,transparent)}
.io-prod-feature{background:linear-gradient(165deg,color-mix(in srgb,var(--ac) 12%,rgba(255,255,255,.02)),rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--ac) 34%,transparent)}
.io-prod-tag{position:absolute;top:16px;right:16px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ac);padding:4px 10px;border-radius:20px}
.io-prod-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.io-prod-ico{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--ac);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--ac) 90%,transparent)}
.io-prod-ico svg{width:24px;height:24px}
.io-prod-head h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:#fff;line-height:1.15}
.io-prod-desc{margin:0 0 18px;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.6)}
.io-prod-specs{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.io-spec{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.06)}
.io-spec-k{color:rgba(255,255,255,.45)}
.io-spec-v{color:rgba(255,255,255,.82);text-align:right;font-weight:500}
.io-prod-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.io-prod-chips span{font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;color:color-mix(in srgb,var(--ac) 80%,#fff);background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 26%,transparent)}
.io-prod-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ac);text-decoration:none;padding:9px 16px;border-radius:9px;background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);transition:background .25s,border-color .25s,transform .2s}
.io-prod-cta:hover{background:color-mix(in srgb,var(--ac) 20%,transparent);border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-1px)}
.io-prod-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.io-prod-cta:hover svg{transform:translateX(4px)}
/* ---- Coverage (distinctive visual) ---- */
.io-coverage{padding:88px 0;background:#140a12}
.io-cov{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px}
.io-cov-track{position:absolute;top:29px;left:11%;right:11%;height:2px;background:linear-gradient(90deg,#DA291C,#F59E0B,#2DD4CF,#22C55E);opacity:.4;z-index:0}
.io-cov-step{position:relative;z-index:1;text-align:center;padding:0 6px}
.io-cov-node{width:58px;height:58px;margin:0 auto 14px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#140a12;border:2px solid var(--ac);color:var(--ac);box-shadow:0 0 0 6px #140a12,0 10px 26px -12px color-mix(in srgb,var(--ac) 90%,transparent);transition:transform .3s ease}
.io-cov-step:hover .io-cov-node{transform:translateY(-4px) scale(1.05)}
.io-cov-node svg{width:26px;height:26px}
.io-cov-lbl{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.io-cov-step h4{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.io-cov-step p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.5)}
/* ---- Platforms ---- */
.io-platforms{padding:88px 0;background:#120709}
.io-plat-grid{margin-top:48px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.io-plat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
.io-plat:hover{transform:translateY(-4px);border-color:rgba(218,41,28,.32);background:linear-gradient(180deg,rgba(218,41,28,.06),rgba(255,255,255,.012))}
.io-plat-chip{width:100%;height:82px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px 14px;margin-bottom:16px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.io-plat-chip img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.io-plat b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff;margin-bottom:7px}
.io-plat span{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5)}
.io-plat-note{margin:34px auto 0;text-align:center;font-size:14px;color:rgba(255,255,255,.55)}
.io-plat-note a{color:#DA291C;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(218,41,28,.35);transition:border-color .2s}
.io-plat-note a:hover{border-color:#DA291C}
/* ---- Ad band ---- */
.io-adband{padding:80px 0;background:#0f070c}
.io-ad{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.io-ad-media{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;box-shadow:0 30px 70px -34px rgba(218,41,28,.4)}
.io-ad-media img{display:block;width:100%;height:100%;object-fit:cover}
.io-ad-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.28);background:linear-gradient(135deg,rgba(218,41,28,.06),rgba(245,158,11,.05));border:1px dashed rgba(255,255,255,.14)}
.io-ad-ph svg{width:40px;height:40px;opacity:.6}
.io-ad-ph span{font-size:12.5px;font-weight:600}
.io-ad-content .eyebrow{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.io-ad-content h3{margin:0 0 15px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(23px,2.6vw,30px);line-height:1.16;color:#fff;letter-spacing:-.01em}
.io-ad-content>p{margin:0 0 20px;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.6)}
.io-ad-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.io-ad-list li{display:flex;align-items:center;gap:11px;font-size:14px;color:rgba(255,255,255,.78)}
.io-ad-list svg{flex-shrink:0;width:18px;height:18px}
.io-inline-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:#DA291C;text-decoration:none;padding:12px 22px;border-radius:11px;background:rgba(218,41,28,.1);border:1px solid rgba(218,41,28,.3);transition:background .25s,border-color .25s,transform .2s}
.io-inline-cta:hover{background:rgba(218,41,28,.18);border-color:rgba(218,41,28,.55);transform:translateY(-1px)}
.io-inline-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.io-inline-cta:hover svg{transform:translateX(4px)}
/* ---- Choose ---- */
.io-choose{padding:88px 0;background:#140a12}
.io-choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.io-choose-card{text-align:left;padding:24px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .3s,border-color .3s,background .3s;font-family:inherit}
.io-choose-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 42%,transparent);background:color-mix(in srgb,var(--ac) 6%,transparent)}
.io-choose-card.active{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);box-shadow:0 0 0 1px var(--ac),0 16px 40px -18px color-mix(in srgb,var(--ac) 80%,transparent)}
.io-choose-ico{display:flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:14px}
.io-choose-ico svg{width:22px;height:22px}
.io-choose-card h4{margin:0 0 7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff}
.io-choose-card p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.52)}
.io-choose-result{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s,margin .4s;margin-top:0}
.io-choose-result.show{max-height:260px;opacity:1;margin-top:24px}
.io-choose-result-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 26px;border-radius:16px;background:linear-gradient(135deg,rgba(218,41,28,.12),rgba(245,158,11,.08));border:1px solid rgba(218,41,28,.24)}
.io-choose-result-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#DA291C,#A81E14)}
.io-choose-result-inner p{flex:1;min-width:220px;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.85)}
.io-choose-result-inner p strong{color:#fff}
.io-choose-cta{flex-shrink:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:#fff;text-decoration:none;padding:11px 20px;border-radius:10px;background:rgba(218,41,28,.2);border:1px solid rgba(218,41,28,.45);transition:background .25s,transform .2s}
.io-choose-cta:hover{background:rgba(218,41,28,.32);transform:translateY(-1px)}
/* ---- Process ---- */
.io-process{padding:88px 0;background:#0f070c}
.io-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.io-step{position:relative;padding:26px 22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.io-step-rail{position:absolute;top:44px;right:-9px;width:18px;height:2px;background:rgba(255,255,255,.14);z-index:1}
.io-step-num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--ac);margin-bottom:12px}
.io-step h4{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.io-step p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.55)}
/* ---- FAQ ---- */
.io-faq-sec{padding:88px 0;background:#140a12}
.io-faq{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px}
.io-faq-item{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .3s}
.io-faq-item.open{border-color:rgba(218,41,28,.3)}
.io-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;background:none;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:#fff;text-align:left}
.io-faq-ic{flex-shrink:0;position:relative;width:16px;height:16px}
.io-faq-ic::before,.io-faq-ic::after{content:"";position:absolute;background:#DA291C;border-radius:2px;transition:transform .3s}
.io-faq-ic::before{top:7px;left:0;width:16px;height:2px}
.io-faq-ic::after{top:0;left:7px;width:2px;height:16px}
.io-faq-item.open .io-faq-ic::after{transform:scaleY(0)}
.io-faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
.io-faq-a p{margin:0;padding:0 22px 20px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.6)}
/* ---- Final CTA ---- */
.io-final{position:relative;padding:96px 0;background:linear-gradient(180deg,#0f070c,#140a12);overflow:hidden;text-align:center}
.io-final-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.io-final-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:640px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.18),transparent 66%);filter:blur(60px)}
.io-final-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.io-final-inner .eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.io-final-inner h2{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(27px,3.6vw,40px);line-height:1.1;color:#fff;letter-spacing:-.02em}
.io-final-inner>p{margin:0 0 28px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.6)}
.io-final-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.io-final-trust{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.65)}
.io-bolt{display:inline-flex;color:#FDE047;filter:drop-shadow(0 0 4px rgba(253,224,71,.7));animation:tbBolt 2.4s steps(1) infinite}
/* ---- Responsive ---- */
@media(max-width:1000px){
.io-why-grid{grid-template-columns:repeat(2,1fr)}
.io-prod-grid{grid-template-columns:repeat(2,1fr)}
.io-plat-grid{grid-template-columns:repeat(3,1fr)}
.io-choose-grid{grid-template-columns:repeat(2,1fr)}
.io-steps{grid-template-columns:repeat(2,1fr)}
.io-cov{grid-template-columns:repeat(4,1fr);gap:8px}
.io-cov-step p{display:none}
.io-hero-trust{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:760px){
.io-ad{grid-template-columns:1fr;gap:28px}
.io-cov{grid-template-columns:1fr;gap:20px}
.io-cov-track{display:none}
.io-cov-step p{display:block}
.io-cov-node{margin-bottom:12px}
}
@media(max-width:620px){
.io-why-grid,.io-prod-grid,.io-choose-grid,.io-steps{grid-template-columns:1fr}
.io-plat-grid{grid-template-columns:repeat(2,1fr)}
.io-step-rail{display:none}
.io-hero{padding:108px 0 60px}
}
@media(prefers-reduced-motion:reduce){
.io-ticker-row{animation:none}
.io-badge-dot{animation:none}
.io-bolt{animation:none}
}
/* ---- IoT wide landscape banner ---- */
.io-banner{padding:20px 0 88px;background:#0f070c}
.io-banner-card{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:21/8;box-shadow:0 40px 90px -40px rgba(218,41,28,.5)}
.io-banner-media{position:absolute;inset:0}
.io-banner-media img{width:100%;height:100%;object-fit:cover;display:block}
.io-banner-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.3);background:linear-gradient(135deg,rgba(218,41,28,.1),rgba(245,158,11,.08),rgba(45,212,207,.06));border:1px dashed rgba(255,255,255,.16)}
.io-banner-ph svg{width:48px;height:48px;opacity:.6}
.io-banner-ph span{font-size:13.5px;font-weight:600}
.io-banner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(270deg,rgba(10,5,6,.92) 0%,rgba(10,5,6,.74) 40%,rgba(10,5,6,.28) 70%,transparent 100%)}
.io-banner-content{position:relative;z-index:2;max-width:520px;padding:0 clamp(28px,5vw,64px);text-align:right;margin-left:auto}
.io-banner-content p{margin-left:auto}
.io-banner-eyebrow{display:inline-block;margin-bottom:14px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F6A29B;padding:6px 13px;border-radius:20px;background:rgba(218,41,28,.14);border:1px solid rgba(218,41,28,.32)}
.io-banner-content h3{margin:0 0 14px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(24px,3.4vw,40px);line-height:1.08;color:#fff;letter-spacing:-.02em}
.io-banner-content p{margin:0 0 24px;font-size:clamp(14px,1.5vw,16.5px);line-height:1.6;color:rgba(255,255,255,.72);max-width:440px}
.io-banner-cta{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;background:linear-gradient(135deg,#DA291C,#A81E14);color:#fff;transition:transform .2s,box-shadow .2s}
.io-banner-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(218,41,28,.8)}
.io-banner-cta svg{transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.io-banner-cta:hover svg{transform:translateX(4px)}
@media(max-width:820px){
.io-banner-card{aspect-ratio:16/11}
.io-banner-overlay{background:linear-gradient(180deg,rgba(10,5,6,.55) 0%,rgba(10,5,6,.82) 60%,rgba(10,5,6,.94) 100%);align-items:flex-end}
.io-banner-content{padding:0 24px 30px;max-width:none}
}
@media(max-width:520px){
.io-banner-card{aspect-ratio:4/5}
}
/* ============================================================
IOT & FLEET contact page — Rogers-red variant overrides
============================================================ */
.tbc-hero-io .tbc-hb1{background:radial-gradient(circle,rgba(218,41,28,.16),transparent 66%)}
.tbc-hero-io .tbc-hb2{background:radial-gradient(circle,rgba(245,158,11,.12),transparent 66%)}
.tbc-hero-io .tbc-hero-badge{background:rgba(218,41,28,.1);border-color:rgba(218,41,28,.3);color:#F6A29B}
.tbc-hero-io .tbc-bolt{color:#FDE047}
.tbc-form-io .tbc-form-badge{background:rgba(218,41,28,.1);border-color:rgba(218,41,28,.26);color:#F6A29B}
.tbc-form-io .tb-mode:hover{border-color:rgba(218,41,28,.4);background:rgba(218,41,28,.05)}
.tbc-form-io .tb-mode-ic{background:rgba(218,41,28,.12);border-color:rgba(218,41,28,.25);color:#DA291C}
.tbc-form-io .tb-mode-on{border-color:#DA291C;background:rgba(218,41,28,.12);box-shadow:0 0 0 1px rgba(218,41,28,.5),0 10px 26px -12px rgba(218,41,28,.6)}
.tbc-form-io .tb-mode-on .tb-mode-ic{background:#DA291C;border-color:#DA291C;color:#fff}
.tbc-form-io .tbc-field input:focus,.tbc-form-io .tbc-field textarea:focus,.tbc-form-io .tbc-field select:focus{border-color:rgba(218,41,28,.55);background:rgba(218,41,28,.05)}
.tbc-form-io .tb-postal-note.ok{color:#F6A29B}
.tbc-submit-io{background:linear-gradient(135deg,#DA291C,#A81E14);color:#fff}
.tbc-submit-io:hover{box-shadow:0 16px 40px -14px rgba(218,41,28,.7)}
.tbc-submit-io .tbc-bolt{color:#FDE047}
.tbc-form-io ~ .tbc-side .tbc-step-n{color:#DA291C;background:rgba(218,41,28,.12);border-color:rgba(218,41,28,.3)}
.tbc-form-io ~ .tbc-side .tbc-ci-ic{color:#DA291C}
.tbc-form-io ~ .tbc-side .tbc-ci a:hover{color:#DA291C}
.tbc-side .tbc-ad[data-ad-slot="io-contact-1"]{flex:1 1 auto;min-height:200px}
.tbc-form-io .tb-form-success-ico{background:linear-gradient(135deg,#DA291C,#A81E14)}
/* ============================================================
PAYMENTS PAGE — light "warm & clean" theme
Cream/off-white bg · Paystone red #F2554D · charcoal #1F1F1F
============================================================ */
.pay-page{--pr:#F2554D;--pr-dk:#D63C34;--ink:#F5F2FA;--ink-2:rgba(245,242,250,.72);--ink-3:rgba(245,242,250,.5);--cream:#140A24;--cream-2:#1C0F32;--cream-3:#241541;--card:#1E1236;--line:rgba(177,166,255,.14);background:var(--cream);color:var(--ink);overflow-x:hidden}
.pay-page .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.pay-page h1,.pay-page h2,.pay-page h3{font-family:'Space Grotesk','Barlow Condensed',sans-serif;letter-spacing:-.02em}
.pay-page section{position:relative}
/* shared section head */
.pay-head{max-width:680px;margin:0 auto 52px;text-align:center}
.pay-eyebrow{display:inline-block;margin-bottom:14px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pr);padding:6px 14px;border-radius:20px;background:rgba(242,85,77,.09);border:1px solid rgba(242,85,77,.2)}
.pay-head h2{margin:0 0 14px;font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.06;color:var(--ink)}
.pay-head p{margin:0;font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--ink-3)}
.pay-eyebrow-light{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
/* buttons */
.pay-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;border:1px solid transparent}
.pay-btn-primary{background:linear-gradient(135deg,var(--pr),var(--pr-dk));color:#fff;box-shadow:0 12px 30px -12px rgba(242,85,77,.6)}
.pay-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(242,85,77,.75)}
.pay-btn-primary svg{transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.pay-btn-primary:hover svg{transform:translateX(4px)}
.pay-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.pay-btn-ghost:hover{background:var(--card);border-color:rgba(242,85,77,.4);color:var(--pr);transform:translateY(-2px)}
.pay-btn-lg{padding:17px 32px;font-size:16px}
.pay-bc{color:var(--ink-3)}
.pay-bc a{color:var(--ink-3);text-decoration:none}.pay-bc a:hover{color:var(--pr)}
/* badge */
.pay-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--pr);background:rgba(242,85,77,.09);border:1px solid rgba(242,85,77,.22);padding:7px 14px;border-radius:24px;margin-bottom:20px}
.pay-badge-ico{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;background:var(--pr);border-radius:50%;color:#fff}
.pay-badge-ico svg{width:11px;height:11px}
.pay-badge-light{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.pay-badge-light .pay-badge-ico{background:#fff;color:var(--pr)}
/* ---- HERO ---- */
.pay-hero{padding:128px 0 80px;overflow:hidden}
.pay-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pay-hero-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.pay-hb1{width:520px;height:520px;top:-140px;right:-120px;background:radial-gradient(circle,rgba(242,85,77,.28),transparent 68%);animation:payBlobA 14s ease-in-out infinite}
.pay-hb2{width:440px;height:440px;bottom:-160px;left:-120px;background:radial-gradient(circle,rgba(139,92,246,.2),transparent 68%);animation:payBlobB 18s ease-in-out infinite}
@keyframes payBlobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.12)}}
@keyframes payBlobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
.pay-hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(177,166,255,.06) 1.2px,transparent 1.2px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%)}
.pay-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pay-hero-title{margin:0 0 20px;font-size:clamp(38px,5.6vw,66px);font-weight:600;line-height:1.02;color:var(--ink)}
.pay-grad{background:linear-gradient(120deg,var(--pr),#EC4899 60%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pay-hero-sub{margin:0 0 30px;font-size:clamp(15px,1.8vw,18px);line-height:1.62;color:var(--ink-2);max-width:520px}
.pay-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.pay-hero-partners{display:flex;align-items:center;gap:14px}
.pay-hp-label{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.pay-paystone-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 16px;box-shadow:0 8px 20px -12px rgba(28,10,74,.3)}
.pay-paystone-chip img{height:24px;width:auto;display:block}
.pay-hero-visual{position:relative}
.pay-hero-imgwrap{position:relative;border-radius:24px;overflow:visible}
.pay-hero-imgwrap>img{width:100%;height:auto;border-radius:24px;display:block;box-shadow:0 40px 80px -30px rgba(31,31,31,.4);position:relative;z-index:1}
.pay-hero-float{position:absolute;z-index:2;display:flex;align-items:center;gap:11px;background:var(--card);border-radius:14px;padding:12px 16px;box-shadow:0 20px 44px -18px rgba(31,31,31,.35);border:1px solid var(--line)}
.pay-hero-float b{display:block;font-size:14px;font-weight:700;color:var(--ink);font-family:'Space Grotesk',sans-serif;line-height:1.15}
.pay-hero-float span{font-size:12px;color:var(--ink-3)}
.pay-float-ico{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;background:color-mix(in srgb,var(--fc) 20%,var(--card));color:var(--fc)}
.pay-float-ico svg{width:18px;height:18px}
.pay-float-1{top:26px;left:-26px;animation:payFloatA 4.5s ease-in-out infinite}
.pay-float-2{bottom:34px;right:-22px;animation:payFloatB 5.2s ease-in-out infinite}
@keyframes payFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes payFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
/* ---- TRUST BAR ---- */
.pay-trust{padding:0 0 20px;margin-top:-24px}
.pay-trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 24px;box-shadow:0 24px 60px -40px rgba(31,31,31,.4)}
.pay-tstat{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.pay-tstat:not(:last-child)::after{content:'';position:absolute;right:-9px;top:14%;height:72%;width:1px;background:var(--line)}
.pay-tnum{font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,3.4vw,40px);font-weight:800;color:var(--pr);line-height:1;letter-spacing:.01em;white-space:nowrap}
.pay-tlbl{font-family:'DM Sans','Inter',sans-serif;font-size:11.5px;line-height:1.35;color:var(--ink-3);letter-spacing:.02em;max-width:130px}
@media(max-width:900px){
.pay-hero-grid{grid-template-columns:1fr;gap:40px}
.pay-hero-visual{max-width:460px;margin:0 auto}
.pay-trust-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}
.pay-tstat:not(:last-child)::after{display:none}
.pay-tstat:nth-child(5){grid-column:1/-1}
}
@media(max-width:560px){.pay-float-1{left:8px}.pay-float-2{right:8px}}
/* ---- WAYS (mini cards, homepage-style) ---- */
.pay-ways{padding:74px 0}
.pay-ways-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pay-way{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;transition:transform .45s cubic-bezier(.25,.8,.25,1),box-shadow .45s,border-color .45s}
.pay-way::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,color-mix(in srgb,var(--wc) 55%,transparent),transparent 55%,color-mix(in srgb,var(--wc) 30%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none}
.pay-way:hover::before{opacity:1}
.pay-way:hover{transform:translateY(-8px);box-shadow:0 26px 54px -22px color-mix(in srgb,var(--wc) 30%,rgba(28,10,74,.3))}
.pay-way-ico{position:relative;z-index:2;display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--wc) 20%,var(--card));color:var(--wc);margin-bottom:18px;transition:transform .4s,box-shadow .4s}
.pay-way:hover .pay-way-ico{transform:scale(1.08);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--wc) 55%,transparent)}
.pay-way-ico svg{width:26px;height:26px}
.pay-way h3{position:relative;z-index:2;margin:0 0 8px;font-size:18.5px;font-weight:600;color:var(--ink)}
.pay-way p{position:relative;z-index:2;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
/* ---- PRODUCT CATALOG (homepage-style solution cards) ---- */
.pay-products{padding:78px 0;background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.pay-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pay-prod-card{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:transform .45s cubic-bezier(.25,.8,.25,1),box-shadow .45s,border-color .45s}
.pay-prod-card::after{content:'';position:absolute;width:340px;height:340px;left:var(--cx,50%);top:var(--cy,0);transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--pc) 16%,transparent),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:1}
.pay-prod-card:hover::after{opacity:1}
.pay-prod-card::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;background:linear-gradient(145deg,color-mix(in srgb,var(--pc) 55%,transparent),transparent 52%,color-mix(in srgb,var(--pc) 32%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none}
.pay-prod-card:hover::before{opacity:1}
.pay-prod-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -24px color-mix(in srgb,var(--pc) 34%,rgba(28,10,74,.34))}
.pay-prod-visual{position:relative;height:160px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 20%,var(--card)),color-mix(in srgb,var(--pc) 10%,var(--card)));border-bottom:1px solid var(--line);z-index:2}
.pay-prod-visual img{width:100%;height:100%;object-fit:cover}
.pay-prod-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--pc) 20%,transparent),transparent 60%);opacity:.85;pointer-events:none}
.pay-prod-scene{position:relative;z-index:2;width:78%;max-width:200px;filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--pc) 22%,transparent));transition:transform .5s cubic-bezier(.25,.8,.25,1)}
.pay-prod-scene svg{width:100%;height:auto;display:block}
.pay-prod-card:hover .pay-prod-scene{transform:scale(1.06) translateY(-3px)}
.pay-prod-vlabel{position:absolute;bottom:11px;left:0;right:0;text-align:center;z-index:4;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--pc) 68%,var(--ink-3))}
/* per-card scene animations (loop gently; hover intensifies via scale above) */
.ps-tap{animation:paySmartPulse 2.4s ease-in-out infinite}
.ps-wave1{animation:payWave 2.4s ease-in-out infinite}
.ps-wave2{animation:payWave 2.4s ease-in-out .3s infinite}
@keyframes paySmartPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes payWave{0%,100%{opacity:.2}50%{opacity:.9}}
.pay-prod-card:hover .pt-enter{animation:payKeyPress .6s ease}
@keyframes payKeyPress{0%,100%{transform:translateY(0)}50%{transform:translateY(2px);filter:brightness(1.15)}}
.pay-prod-card:hover .po-btn{animation:payBtnGlow 1s ease infinite}
@keyframes payBtnGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
.po-cursor{animation:payCursor 2.6s ease-in-out infinite}
@keyframes payCursor{0%,100%{transform:translate(0,0)}45%{transform:translate(-6px,-2px)}55%{transform:translate(-6px,-2px)}}
.pp-item{animation:payItemFade 2.4s ease infinite}
.pp-item2{animation:payItemFade 2.4s ease .3s infinite}
.pp-item3{animation:payItemFade 2.4s ease .6s infinite}
@keyframes payItemFade{0%,100%{opacity:.45}50%{opacity:1}}
.pg-heart{transform-origin:150px 48px;animation:payHeart 1.8s ease-in-out infinite}
@keyframes payHeart{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}45%{transform:scale(1)}}
.pay-prod-card:hover .pg-card1{transform:translateY(-3px) rotate(2deg);transition:transform .5s}
.psec-check{stroke-dasharray:44;stroke-dashoffset:44;animation:paySecDraw 3s ease-in-out infinite}
@keyframes paySecDraw{0%{stroke-dashoffset:44}30%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.psec-ring{animation:paySecSpin 14s linear infinite;transform-origin:100px 66px}
@keyframes paySecSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ps-tap,.ps-wave1,.ps-wave2,.po-cursor,.pp-item,.pp-item2,.pp-item3,.pg-heart,.psec-check,.psec-ring{animation:none}}
.pay-prod-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;position:relative;z-index:2}
.pay-prod-tophead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.pay-prod-body h3{margin:0;font-size:20px;font-weight:600;color:var(--ink)}
.pay-prod-arrow{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:9px;background:color-mix(in srgb,var(--pc) 22%,var(--card));color:var(--pc);flex-shrink:0;transition:transform .35s,background .35s}
.pay-prod-card:hover .pay-prod-arrow{background:var(--pc);color:#fff;transform:translateX(4px)}
.pay-prod-body>p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--ink-3);flex:1}
.pay-prod-tags{display:flex;flex-wrap:wrap;gap:7px}
.pay-prod-tags span{font-size:11px;font-weight:600;color:var(--ink-2);background:color-mix(in srgb,var(--pc) 16%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 18%,transparent);padding:4px 10px;border-radius:20px;transition:all .3s}
.pay-prod-card:hover .pay-prod-tags span{border-color:color-mix(in srgb,var(--pc) 30%,transparent)}
@media(max-width:900px){
.pay-ways-grid{grid-template-columns:repeat(2,1fr)}
.pay-prod-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
}
@media(max-width:480px){.pay-ways-grid{grid-template-columns:1fr}}
/* ---- LANDSCAPE SHOW-BAND (above product catalog) ---- */
.pay-showband{padding:20px 0 74px}
.pay-showband-card{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:21/8;box-shadow:0 40px 90px -44px rgba(28,10,74,.6);border:1px solid var(--line)}
.pay-showband-media{position:absolute;inset:0}
.pay-showband-media img{width:100%;height:100%;object-fit:cover;display:block}
.pay-showband-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4);background:linear-gradient(135deg,#2A1B3D,#3D2450,#1C0A4A)}
.pay-showband-ph svg{width:46px;height:46px;opacity:.55}
.pay-showband-ph span{font-size:13.5px;font-weight:600}
.pay-showband-overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(20,10,30,.92) 0%,rgba(20,10,30,.72) 42%,rgba(20,10,30,.25) 72%,transparent 100%)}
.pay-showband-content{position:relative;z-index:2;max-width:520px;padding:0 clamp(28px,5vw,60px)}
.pay-showband-content h3{margin:0 0 13px;font-size:clamp(22px,3vw,34px);font-weight:600;color:#fff;line-height:1.1}
.pay-showband-content p{margin:0 0 22px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.75);max-width:420px}
@media(max-width:820px){
.pay-showband-card{aspect-ratio:4/5}
.pay-showband-overlay{background:linear-gradient(180deg,rgba(20,10,30,.4),rgba(20,10,30,.85) 60%,rgba(20,10,30,.95));align-items:flex-end}
.pay-showband-content{padding:0 26px 30px}
}
/* ---- SAVINGS CALCULATOR ---- */
.pay-calc{padding:80px 0}
.pay-calc-card{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 34px 80px -40px rgba(31,31,31,.45)}
.pay-calc-inputs{padding:40px}
.pay-calc-field{margin-bottom:30px}
.pay-calc-field:last-child{margin-bottom:0}
.pay-calc-labelrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pay-calc-labelrow label{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.pay-calc-hint{font-weight:500;color:var(--ink-3);font-size:12px}
.pay-calc-out{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--pr)}
.pay-calc-seg{display:flex;gap:8px;flex-wrap:wrap}
.pay-seg-btn{flex:1;min-width:78px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--cream-3);color:var(--ink-2);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s}
.pay-seg-btn:hover{border-color:rgba(242,85,77,.4);color:var(--pr)}
.pay-seg-on{background:var(--pr);border-color:var(--pr);color:#fff;box-shadow:0 8px 20px -8px rgba(242,85,77,.55)}
.pay-seg-on:hover{color:#fff}
.pay-calc-breakdown{display:flex;flex-direction:column;gap:9px;padding:16px 0 4px;margin-bottom:20px;border-top:1px solid rgba(255,255,255,.1)}
.pay-calc-brk{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.6)}
.pay-calc-brk b{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;font-size:14px}
.pay-calc-save-yr #paySavePct{color:#4ADE80;font-weight:700}
.pay-calc-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:6px;background:var(--cream-2);outline:none;cursor:pointer}
.pay-calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--pr);box-shadow:0 4px 12px -2px rgba(242,85,77,.6);cursor:pointer;transition:transform .15s}
.pay-calc-field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.pay-calc-field input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--pr);box-shadow:0 4px 12px -2px rgba(242,85,77,.6);cursor:pointer}
.pay-calc-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--ink-3)}
.pay-calc-result{background:linear-gradient(160deg,#2A1650,#1C0A4A);color:#fff;padding:40px;display:flex;align-items:center}
.pay-calc-result-inner{width:100%}
.pay-calc-save-label{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px}
.pay-calc-save{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,6vw,52px);font-weight:700;line-height:1;color:#fff;margin-bottom:4px}
.pay-calc-save span{font-size:20px;font-weight:600;color:rgba(255,255,255,.5)}
.pay-calc-save-yr{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:24px}
.pay-calc-save-yr b{color:#4ADE80;font-weight:700}
.pay-calc-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.pay-calc-bar-row{display:flex;align-items:center;gap:12px}
.pay-calc-bar-lbl{font-size:12px;width:52px;color:rgba(255,255,255,.6);flex-shrink:0}
.pay-calc-bar-track{flex:1;height:12px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
.pay-calc-bar{height:100%;border-radius:6px;width:0;transition:width .5s cubic-bezier(.4,0,.2,1)}
.pay-calc-bar-now{background:linear-gradient(90deg,#78716C,#A8A29E)}
.pay-calc-bar-us{background:linear-gradient(90deg,var(--pr),#F5867F)}
.pay-calc-bar-val{font-size:12.5px;font-weight:600;width:70px;text-align:right;flex-shrink:0;font-family:'Space Grotesk',sans-serif}
.pay-calc-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:11px;background:linear-gradient(135deg,var(--pr),var(--pr-dk));color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 30px -12px rgba(242,85,77,.6)}
.pay-calc-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.pay-calc-cta svg{transition:transform .25s}
.pay-calc-cta:hover svg{transform:translateX(3px)}
.pay-calc-disc{margin:16px 0 0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.4)}
@media(max-width:820px){
.pay-ways-grid{grid-template-columns:repeat(2,1fr)}
.pay-prod-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
.pay-calc-card{grid-template-columns:1fr}
.pay-calc-inputs,.pay-calc-result{padding:32px}
}
@media(max-width:480px){.pay-ways-grid{grid-template-columns:1fr}}
/* ---- INFRASTRUCTURE GRID ---- */
.pay-infra{padding:70px 0;background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.pay-infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pay-infra-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.pay-infra-card>p{flex:1}
.pay-infra-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:var(--ic);text-decoration:none;transition:gap .25s,opacity .25s;opacity:.85;align-self:flex-start}
.pay-infra-card:hover .pay-infra-cta{opacity:1;gap:9px}
.pay-infra-cta svg{transition:transform .25s}
.pay-infra-card:hover .pay-infra-cta svg{transform:translateX(2px)}
.pay-infra-card:hover{transform:translateY(-5px);box-shadow:0 26px 54px -32px rgba(31,31,31,.4)}
.pay-infra-ico{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:13px;background:color-mix(in srgb,var(--ic) 20%,var(--card));color:var(--ic);margin-bottom:18px}
.pay-infra-ico svg{width:25px;height:25px}
.pay-infra-card h3{margin:0 0 9px;font-size:18.5px;font-weight:600;color:var(--ink)}
.pay-infra-card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}
/* ---- SECURITY BAND ---- */
.pay-security{padding:40px 0 80px}
.pay-sec-card{position:relative;display:block;border:1px solid var(--line);border-radius:26px;padding:56px;overflow:hidden;background:#140A24;min-height:340px}
.pay-sec-copy{max-width:520px}
.pay-sec-card::before{content:'';position:absolute;inset:0;z-index:0;background-image:image-set(url('/assets/media/library/security-counter-bg.webp') type('image/webp'),url('/assets/media/library/security-counter-bg.jpg') type('image/jpeg'));background-size:cover;background-position:right center}
.pay-sec-card::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,10,36,.96) 0%,rgba(20,10,36,.86) 40%,rgba(20,10,36,.5) 70%,rgba(20,10,36,.2) 100%)}
.pay-sec-card>*{position:relative;z-index:2}
.pay-sec-copy .pay-eyebrow{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.pay-sec-copy h2{color:#fff;font-size:clamp(24px,3.2vw,34px);font-weight:600;margin:0 0 14px;line-height:1.1}
.pay-sec-copy>p{color:rgba(255,255,255,.66);font-size:15px;line-height:1.62;margin:0 0 26px;max-width:480px}
.pay-sec-stats{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:24px}
.pay-sec-stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:var(--pr);line-height:1}
.pay-sec-stat span{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.35;display:block;margin-top:5px;max-width:130px}
.pay-inline-link{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color .2s,border-color .2s}
.pay-inline-link:hover{color:var(--pr);border-color:var(--pr)}
.pay-inline-link svg{transition:transform .25s}
.pay-inline-link:hover svg{transform:translateX(3px)}
.pay-sec-shield{display:flex;align-items:center;justify-content:center}
.pay-shield-svg{width:min(240px,60%);height:auto;overflow:visible}
.pay-shield-body{fill:none;stroke:var(--pr);stroke-width:5;opacity:.35;stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.4s ease}
.pay-shield-check{fill:none;stroke:#4ADE80;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset .7s ease .9s}
.pay-shield-in .pay-shield-body{stroke-dashoffset:0;opacity:.6}
.pay-shield-in .pay-shield-check{stroke-dashoffset:0}
.pay-shield-svg::after{content:''}
/* ---- INDUSTRIES ---- */
.pay-industries{padding:70px 0;background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.pay-ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pay-ind-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.pay-ind-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -32px rgba(31,31,31,.4);border-color:color-mix(in srgb,var(--dc) 40%,transparent)}
.pay-ind-ico{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:13px;background:color-mix(in srgb,var(--dc) 20%,var(--card));color:var(--dc);margin-bottom:16px}
.pay-ind-ico svg{width:25px;height:25px}
.pay-ind-card h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--ink)}
.pay-ind-card>p{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.pay-ind-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pay-ind-list li{position:relative;padding-left:22px;font-size:13px;color:var(--ink-2);font-weight:500}
.pay-ind-list li::before{content:'';position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:50%;background:color-mix(in srgb,var(--dc) 26%,var(--card))}
.pay-ind-list li::after{content:'';position:absolute;left:4px;top:8px;width:4px;height:7px;border-right:2px solid var(--dc);border-bottom:2px solid var(--dc);transform:rotate(40deg)}
/* ---- PROCESS ---- */
.pay-process{padding:70px 0}
.pay-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.pay-step{position:relative;padding:0 6px}
.pay-step-n{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;background:var(--card);border:2px solid var(--pr);color:var(--pr);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;margin-bottom:16px;box-shadow:0 10px 24px -12px rgba(242,85,77,.5)}
.pay-step-body h3{margin:0 0 7px;font-size:17px;font-weight:600;color:var(--ink)}
.pay-step-body p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.pay-steps::before{content:'';position:absolute;top:23px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,rgba(242,85,77,.3) 0 8px,transparent 8px 16px);z-index:0}
.pay-step-n{position:relative;z-index:1}
/* ---- IMAGE BAND ---- */
.pay-band{padding:20px 0 80px}
.pay-band-card{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 40px 90px -44px rgba(28,10,74,.6);border:1px solid var(--line)}
.pay-band-media{position:relative;font-size:0}
.pay-band-media img{width:100%;height:auto;display:block}
.pay-band-cta-wrap{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:22px;background:linear-gradient(160deg,#2A1650,#1C0A4A);border-top:1px solid var(--line)}
.pay-band-cta-text{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff}
@media(max-width:640px){
.pay-band-cta-text{font-size:14px;text-align:center;width:100%}
}
/* ---- FAQ ---- */
.pay-faq{padding:70px 0;background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.pay-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.pay-faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.pay-faq-item.pay-faq-open{border-color:rgba(242,85,77,.35);box-shadow:0 16px 40px -24px rgba(242,85,77,.4)}
.pay-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:none;border:none;cursor:pointer;text-align:left;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.pay-faq-ic{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:8px;background:rgba(242,85,77,.1);color:var(--pr);flex-shrink:0;transition:transform .3s}
.pay-faq-ic svg{width:17px;height:17px}
.pay-faq-open .pay-faq-ic{transform:rotate(45deg)}
.pay-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.pay-faq-open .pay-faq-a{max-height:240px}
.pay-faq-a p{margin:0;padding:0 24px 22px;font-size:14.5px;line-height:1.62;color:var(--ink-3)}
/* ---- FINAL CTA ---- */
.pay-final{padding:90px 0;text-align:center;overflow:hidden}
.pay-final-bg{position:absolute;inset:0;pointer-events:none}
.pay-final-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.pay-fb1{width:480px;height:480px;top:-120px;left:50%;transform:translateX(-60%);background:radial-gradient(circle,rgba(242,85,77,.2),transparent 68%)}
.pay-fb2{width:400px;height:400px;bottom:-140px;right:20%;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 68%)}
.pay-final-inner{position:relative;max-width:680px;margin:0 auto}
.pay-final-title{margin:0 0 16px;font-size:clamp(30px,4.4vw,48px);font-weight:600;line-height:1.05;color:var(--ink)}
.pay-final-sub{margin:0 0 30px;font-size:clamp(15px,1.8vw,17.5px);line-height:1.6;color:var(--ink-2)}
.pay-final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){
.pay-infra-grid{grid-template-columns:repeat(2,1fr)}
.pay-ind-grid{grid-template-columns:repeat(2,1fr)}
.pay-steps{grid-template-columns:repeat(2,1fr);gap:30px 22px}
.pay-steps::before{display:none}
.pay-sec-card{padding:34px}
.pay-sec-shield{order:-1;max-width:180px;margin:0 auto}
}
@media(max-width:560px){
.pay-infra-grid,.pay-ind-grid,.pay-steps{grid-template-columns:1fr}
.pay-sec-stats{gap:20px}
}
/* ============================================================
PAYMENTS contact page — Paystone-red variant overrides
============================================================ */
.tbc-hero-pay .tbc-hb1{background:radial-gradient(circle,rgba(242,85,77,.18),transparent 66%)}
.tbc-hero-pay .tbc-hb2{background:radial-gradient(circle,rgba(139,92,246,.12),transparent 66%)}
.tbc-hero-pay .tbc-hero-badge{background:rgba(242,85,77,.1);border-color:rgba(242,85,77,.3);color:#F9A19B}
.tbc-hero-pay .tbc-bolt{color:#FDE047}
.tbc-form-pay .tbc-form-badge{background:rgba(242,85,77,.1);border-color:rgba(242,85,77,.26);color:#F9A19B}
.tbc-form-pay .tb-mode:hover{border-color:rgba(242,85,77,.4);background:rgba(242,85,77,.05)}
.tbc-form-pay .tb-mode-ic{background:rgba(242,85,77,.12);border-color:rgba(242,85,77,.25);color:#F2554D}
.tbc-form-pay .tb-mode-on{border-color:#F2554D;background:rgba(242,85,77,.12);box-shadow:0 0 0 1px rgba(242,85,77,.5),0 10px 26px -12px rgba(242,85,77,.6)}
.tbc-form-pay .tb-mode-on .tb-mode-ic{background:#F2554D;border-color:#F2554D;color:#fff}
.tbc-form-pay .tbc-field input:focus,.tbc-form-pay .tbc-field textarea:focus,.tbc-form-pay .tbc-field select:focus{border-color:rgba(242,85,77,.55);background:rgba(242,85,77,.05)}
.tbc-form-pay .tb-postal-note.ok{color:#F9A19B}
.tbc-submit-pay{background:linear-gradient(135deg,#F2554D,#D63C34);color:#fff}
.tbc-submit-pay:hover{box-shadow:0 16px 40px -14px rgba(242,85,77,.7)}
.tbc-submit-pay .tbc-bolt{color:#FDE047}
.tbc-form-pay ~ .tbc-side .tbc-step-n{color:#F2554D;background:rgba(242,85,77,.12);border-color:rgba(242,85,77,.3)}
.tbc-form-pay ~ .tbc-side .tbc-ci-ic{color:#F2554D}
.tbc-form-pay ~ .tbc-side .tbc-ci a:hover{color:#F2554D}
.tbc-side .tbc-ad[data-ad-slot="pay-contact-1"]{flex:1 1 auto;min-height:200px;aspect-ratio:4/3}
.tbc-form-pay .tb-form-success-ico{background:linear-gradient(135deg,#F2554D,#D63C34)}
/* ============================================================
SALES, CRM & CAMPAIGNS solution page (amber + purple, dark)
============================================================ */
.sc-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;cursor:pointer}
.sc-btn-primary{background:linear-gradient(135deg,#F59E0B,#D97706);color:#1a1205;border:none;box-shadow:0 12px 30px -12px rgba(245,158,11,.55)}
.sc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(245,158,11,.7)}
.sc-btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.16)}
.sc-btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.sc-btn-lg{padding:16px 30px;font-size:16px}
.sc-eyebrow{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#F59E0B;padding:6px 14px;border-radius:30px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.24);margin-bottom:16px}
.sc-eyebrow-light{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.sc-head{max-width:760px;margin:0 auto 44px;text-align:center}
.sc-head h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(26px,3.6vw,40px);line-height:1.1;color:#fff;letter-spacing:-.02em;margin:0 0 14px}
.sc-head p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.55);margin:0}
/* ---- HERO ---- */
.sc-hero{position:relative;padding:128px 0 80px;background:#0d0716;overflow:hidden}
.sc-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sc-hero-net{position:absolute;inset:0;z-index:0;opacity:.92}
.sc-hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(13,7,22,.93) 0%,rgba(13,7,22,.74) 38%,rgba(13,7,22,.42) 62%,rgba(13,7,22,.55) 100%)}
.sc-hero-veil::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,7,22,.5) 0%,transparent 22%,transparent 70%,rgba(13,7,22,.9) 100%)}
.sc-hero-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;z-index:1}
.sc-hb1{width:520px;height:520px;top:-170px;right:-130px;background:radial-gradient(circle,rgba(245,158,11,.16),transparent 68%);animation:scBlobA 15s ease-in-out infinite}
.sc-hb2{width:440px;height:440px;bottom:-190px;left:-130px;background:radial-gradient(circle,rgba(139,92,246,.14),transparent 68%);animation:scBlobB 19s ease-in-out infinite}
.sc-hb3{display:none}
@keyframes scBlobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.12)}}
@keyframes scBlobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.14)}}
.sc-hero-aurora{display:none}
.sc-hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(245,158,11,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(245,158,11,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%)}
.sc-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.sc-hero-left{min-width:0}
.sc-hero-badge{display:inline-flex;align-items:center;gap:8px;margin:16px 0 18px;padding:7px 15px;border-radius:40px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);font-size:12.5px;font-weight:600;color:#FBCB77}
.sc-badge-dot{width:7px;height:7px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.2);animation:scDot 2s ease-in-out infinite}
@keyframes scDot{0%,100%{opacity:1}50%{opacity:.4}}
.sc-hero-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(32px,4.4vw,52px);line-height:1.05;color:#fff;letter-spacing:-.02em;margin:0 0 18px}
.sc-hero-title .grad{background:linear-gradient(120deg,#F59E0B,#FBBF24,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-hero-sub{font-size:16px;line-height:1.65;color:rgba(255,255,255,.6);margin:0 0 26px}
.sc-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.sc-hero-trust{display:flex;gap:20px;flex-wrap:wrap}
.sc-ht-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.6)}
.sc-ht-item svg{width:16px;height:16px;color:#F59E0B;flex-shrink:0}
/* hero LIVE OPS CONSOLE */
.sc-hero-right{position:relative}
.sc-console{position:relative;background:linear-gradient(160deg,rgba(36,21,54,.94),rgba(22,16,42,.94));border:1px solid rgba(245,158,11,.22);border-radius:22px;padding:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 70px -34px rgba(245,158,11,.32);animation:scConFloat 7s ease-in-out infinite;overflow:hidden}
.sc-console::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(245,158,11,.1),transparent 55%);pointer-events:none}
@keyframes scConFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.sc-con-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;position:relative;z-index:1}
.sc-con-title{display:flex;align-items:center;gap:8px}
.sc-con-title b{font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:700;color:#fff}
.sc-con-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:scDot 1.6s ease-in-out infinite}
.sc-con-sub{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:2px 7px;border-radius:20px;border:1px solid rgba(255,255,255,.12)}
.sc-con-status{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#4ADE80}
.sc-con-wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.sc-con-wave i{width:2.5px;border-radius:2px;background:#4ADE80;height:5px;animation:scWave 1s ease-in-out infinite}
.sc-con-wave i:nth-child(2){animation-delay:.15s}.sc-con-wave i:nth-child(3){animation-delay:.3s}.sc-con-wave i:nth-child(4){animation-delay:.45s}.sc-con-wave i:nth-child(5){animation-delay:.6s}
@keyframes scWave{0%,100%{height:4px}50%{height:15px}}
.sc-con-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;position:relative;z-index:1}
.sc-con-metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 10px;text-align:center}
.sc-con-num{display:block;font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:800;line-height:1;color:#fff;letter-spacing:.01em}
.sc-con-metric:nth-child(1) .sc-con-num{color:#FBBF24}
.sc-con-metric:nth-child(2) .sc-con-num{color:#A78BFA}
.sc-con-metric:nth-child(3) .sc-con-num{color:#4ADE80}
.sc-con-metric span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.45);margin-top:5px;line-height:1.2}
.sc-con-spark{position:relative;margin-bottom:16px;z-index:1}
.sc-spark-svg{width:100%;height:48px;display:block}
.sc-spark-lbl{position:absolute;top:2px;right:2px;font-size:9px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.35)}
.sc-con-feedhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;position:relative;z-index:1}
.sc-con-feedhead>span:first-child{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sc-con-count{font-size:11px;color:rgba(255,255,255,.45)}
.sc-con-count b{color:#4ADE80;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800}
.sc-con-feed{position:relative;z-index:1;height:150px;overflow:hidden;display:flex;flex-direction:column;gap:7px;mask-image:linear-gradient(180deg,#000 78%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent)}
.sc-feed-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);flex-shrink:0;animation:scFeedIn .5s cubic-bezier(.3,0,.2,1)}
.sc-feed-row.sc-feed-new{animation:scFeedPop .6s cubic-bezier(.3,0,.2,1)}
@keyframes scFeedIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes scFeedPop{0%{opacity:0;transform:translateY(-14px) scale(.97);box-shadow:0 0 0 0 var(--fc,rgba(245,158,11,.5))}60%{box-shadow:0 0 22px -6px var(--fc,rgba(245,158,11,.5))}100%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 0 0 transparent}}
.sc-feed-ico{flex-shrink:0;display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:8px;background:color-mix(in srgb,var(--fc) 18%,transparent);color:var(--fc)}
.sc-feed-ico svg{width:16px;height:16px}
.sc-feed-txt{flex:1;min-width:0}
.sc-feed-txt b{display:block;font-size:12.5px;font-weight:600;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-feed-txt span{display:block;font-size:10.5px;color:rgba(255,255,255,.45);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-feed-badge{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--fc) 16%,transparent);color:var(--fc);border:1px solid color-mix(in srgb,var(--fc) 30%,transparent)}
@media(max-width:900px){
.sc-hero-inner{grid-template-columns:1fr;gap:36px}
.sc-hero-right{max-width:440px}
}
@media(prefers-reduced-motion:reduce){
.sc-console,.sc-con-dot,.sc-con-wave i,.sc-feed-row{animation:none;opacity:1;transform:none}
}
/* ---- STATS ---- */
.sc-stats{background:#120b1e;padding:0 0 8px}
.sc-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:#1a1330;border:1px solid rgba(177,166,255,.14);border-radius:20px;padding:32px 24px;margin-top:-40px;position:relative;z-index:3;box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.sc-stat{text-align:center;position:relative}
.sc-stat:not(:last-child)::after{content:'';position:absolute;right:-9px;top:14%;height:72%;width:1px;background:rgba(177,166,255,.14)}
.sc-snum{display:block;font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,3.4vw,42px);font-weight:800;color:#F59E0B;line-height:1;letter-spacing:.01em;white-space:nowrap}
.sc-snum-amp{color:rgba(255,255,255,.4);font-weight:600}
.sc-slbl{display:block;margin-top:8px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.5);letter-spacing:.02em;max-width:150px;margin-left:auto;margin-right:auto}
/* ---- WHY ---- */
.sc-why{padding:78px 0;background:#120b1e}
.sc-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sc-why-card{background:#1a1330;border:1px solid rgba(177,166,255,.12);border-radius:18px;padding:28px 24px;transition:transform .35s cubic-bezier(.25,.8,.25,1),box-shadow .35s,border-color .35s}
.sc-why-card:hover{transform:translateY(-6px);border-color:rgba(245,158,11,.3);box-shadow:0 24px 50px -28px rgba(245,158,11,.3)}
.sc-why-ico{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:13px;background:rgba(245,158,11,.12);color:#F59E0B;margin-bottom:18px}
.sc-why-ico svg{width:25px;height:25px}
.sc-why-card h3{margin:0 0 9px;font-size:18px;font-weight:600;color:#fff}
.sc-why-card p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.5)}
/* ---- CAPABILITIES ---- */
.sc-capabilities{padding:78px 0;background:linear-gradient(180deg,#120b1e,#150d24)}
.sc-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sc-cap-card{position:relative;overflow:hidden;background:#1c1436;border:1px solid rgba(177,166,255,.13);border-radius:20px;padding:30px 28px;transition:transform .4s cubic-bezier(.25,.8,.25,1),box-shadow .4s,border-color .4s}
.sc-cap-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 55%,transparent),transparent 55%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.sc-cap-card:hover::before{opacity:1}
.sc-cap-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -26px color-mix(in srgb,var(--cc) 40%,rgba(0,0,0,.5))}
.sc-cap-lg{grid-column:span 1;grid-row:span 2;display:flex;flex-direction:column}
.sc-cap-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.sc-cap-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--cc) 75%,#fff);background:color-mix(in srgb,var(--cc) 14%,transparent);border:1px solid color-mix(in srgb,var(--cc) 26%,transparent);padding:4px 10px;border-radius:20px}
.sc-cap-ico{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--cc) 15%,transparent);color:var(--cc);margin-bottom:18px}
.sc-cap-ico svg{width:26px;height:26px}
.sc-cap-card h3{margin:0 0 10px;font-size:19px;font-weight:600;color:#fff}
.sc-cap-card>p{margin:0 0 16px;font-size:13.5px;line-height:1.58;color:rgba(255,255,255,.52);flex:1}
.sc-cap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sc-cap-list li{position:relative;padding-left:22px;font-size:13px;color:rgba(255,255,255,.7);font-weight:500}
.sc-cap-list li::before{content:'';position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--cc) 20%,transparent)}
.sc-cap-list li::after{content:'';position:absolute;left:4.5px;top:7px;width:4px;height:7px;border-right:2px solid var(--cc);border-bottom:2px solid var(--cc);transform:rotate(40deg)}
/* ---- PIPELINE FUNNEL ---- */
.sc-pipeline{padding:78px 0;background:#150d24}
.sc-funnel{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sc-funnel-stage{display:flex;justify-content:center}
.sc-funnel-bar{width:var(--sw);min-width:280px;display:flex;align-items:center;gap:16px;padding:18px 24px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--sc) 22%,#1c1436),color-mix(in srgb,var(--sc) 8%,#1c1436));border:1px solid color-mix(in srgb,var(--sc) 34%,transparent);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.sc-funnel-stage:hover .sc-funnel-bar{transform:scale(1.02);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--sc) 55%,transparent)}
.sc-funnel-n{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--sc);line-height:1;flex-shrink:0}
.sc-funnel-txt{flex:1;min-width:0}
.sc-funnel-txt b{display:block;font-size:16px;font-weight:600;color:#fff;line-height:1.2}
.sc-funnel-txt span{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px}
.sc-funnel-metric{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--sc) 78%,#fff);background:color-mix(in srgb,var(--sc) 16%,transparent);padding:5px 11px;border-radius:20px;flex-shrink:0;white-space:nowrap}
/* ---- STACK ---- */
.sc-stack{padding:78px 0;background:linear-gradient(180deg,#150d24,#120b1e)}
.sc-stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sc-stack-card{background:#1a1330;border:1px solid rgba(177,166,255,.12);border-radius:18px;padding:28px 24px;transition:transform .35s,box-shadow .35s,border-color .35s}
.sc-stack-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--kc) 40%,transparent);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--kc) 40%,transparent)}
.sc-stack-ico{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in srgb,var(--kc) 14%,transparent);color:var(--kc);margin-bottom:16px}
.sc-stack-ico svg{width:24px;height:24px}
.sc-stack-card h4{margin:0 0 8px;font-size:16.5px;font-weight:600;color:#fff}
.sc-stack-card p{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.5)}
.sc-stack-note{text-align:center;max-width:640px;margin:28px auto 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.5);padding:16px 24px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.16);border-radius:14px}
/* ---- AD BAND ---- */
.sc-adband{padding:8px 0 78px;background:#120b1e}
.sc-adband-card{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:21/8;border:1px solid rgba(177,166,255,.14);box-shadow:0 40px 90px -44px rgba(0,0,0,.7)}
.sc-adband-media{position:absolute;inset:0}
.sc-adband-media img{width:100%;height:100%;object-fit:cover;display:block}
.sc-adband-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4);background:linear-gradient(135deg,#2A1B3D,#3A2A18,#1C0A4A)}
.sc-adband-ph svg{width:44px;height:44px;opacity:.55}
.sc-adband-ph span{font-size:13px;font-weight:600}
.sc-adband-overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(18,11,30,.94) 0%,rgba(18,11,30,.74) 44%,rgba(18,11,30,.2) 74%,transparent 100%)}
.sc-adband-content{position:relative;z-index:2;max-width:520px;padding:0 clamp(28px,5vw,58px)}
.sc-adband-content h3{margin:0 0 12px;font-size:clamp(22px,3vw,32px);font-weight:600;color:#fff;line-height:1.1}
.sc-adband-content p{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);max-width:420px}
@media(max-width:820px){
.sc-adband-card{aspect-ratio:4/5}
.sc-adband-overlay{background:linear-gradient(180deg,rgba(18,11,30,.4),rgba(18,11,30,.86) 60%,rgba(18,11,30,.96));align-items:flex-end}
.sc-adband-content{padding:0 26px 30px}
}
/* ---- COMPLIANCE ---- */
.sc-compliance{padding:78px 0;background:#120b1e}
.sc-comp-card{display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center;background:linear-gradient(150deg,#231433,#1a1330);border:1px solid rgba(177,166,255,.14);border-radius:26px;padding:52px;position:relative;overflow:hidden}
.sc-comp-copy .sc-eyebrow{margin-bottom:14px}
.sc-comp-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.2vw,34px);font-weight:600;color:#fff;margin:0 0 14px;line-height:1.12}
.sc-comp-copy>p{font-size:15px;line-height:1.62;color:rgba(255,255,255,.6);margin:0 0 26px;max-width:540px}
.sc-comp-list{display:flex;flex-direction:column;gap:16px}
.sc-comp-item{display:flex;gap:14px;align-items:flex-start}
.sc-comp-check{flex-shrink:0;display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:8px;background:rgba(245,158,11,.16);color:#F59E0B;margin-top:1px}
.sc-comp-check svg{width:15px;height:15px}
.sc-comp-item b{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:2px}
.sc-comp-item span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.52)}
.sc-comp-visual{display:flex;align-items:center;justify-content:center}
.sc-comp-shield{position:relative;width:200px;height:220px}
.sc-shield-svg{width:100%;height:100%;overflow:visible}
.sc-shield-body{fill:rgba(245,158,11,.06);stroke:rgba(245,158,11,.5);stroke-width:2.5}
.sc-shield-check{fill:none;stroke:#22C55E;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120}
.sc-comp-shield.sc-shield-in .sc-shield-check{animation:scShieldDraw 1s ease forwards .2s}
@keyframes scShieldDraw{to{stroke-dashoffset:0}}
.sc-comp-badge{position:absolute;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;padding:6px 12px;border-radius:20px;background:#1a1330;border:1px solid rgba(245,158,11,.4);color:#FBCB77;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.sc-cb1{top:24px;left:-6px;animation:scFloat 4s ease-in-out infinite}
.sc-cb2{top:96px;right:-12px;animation:scFloat 4s ease-in-out .8s infinite}
.sc-cb3{bottom:40px;left:6px;animation:scFloat 4s ease-in-out 1.6s infinite}
@keyframes scFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* ---- SEGMENTS ---- */
.sc-segments{padding:78px 0;background:linear-gradient(180deg,#120b1e,#150d24)}
.sc-seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sc-seg-card{position:relative;overflow:hidden;background:#1a1330;border:1px solid rgba(177,166,255,.12);border-radius:18px;padding:30px 28px;transition:transform .35s,box-shadow .35s,border-color .35s}
.sc-seg-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--gc) 40%,transparent);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--gc) 40%,transparent)}
.sc-seg-ico{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:14px;background:color-mix(in srgb,var(--gc) 14%,transparent);color:var(--gc);margin-bottom:18px}
.sc-seg-ico svg{width:26px;height:26px}
.sc-seg-card h3{margin:0 0 9px;font-size:18px;font-weight:600;color:#fff}
.sc-seg-card p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.52)}
/* ---- PROCESS ---- */
.sc-process{padding:78px 0;background:#150d24}
.sc-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sc-proc-step{position:relative;background:#1a1330;border:1px solid rgba(177,166,255,.12);border-radius:18px;padding:28px 24px}
.sc-proc-n{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;background:rgba(245,158,11,.12);border:2px solid #F59E0B;color:#F59E0B;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;margin-bottom:16px;box-shadow:0 10px 24px -12px rgba(245,158,11,.5)}
.sc-proc-step h4{margin:0 0 8px;font-size:16.5px;font-weight:600;color:#fff}
.sc-proc-step p{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.5)}
/* ---- BANNER ---- */
.sc-banner{padding:8px 0 78px;background:#150d24}
.sc-banner-card{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:21/8;border:1px solid rgba(177,166,255,.14);box-shadow:0 40px 90px -44px rgba(0,0,0,.7)}
.sc-banner-media{position:absolute;inset:0}
.sc-banner-media img{width:100%;height:100%;object-fit:cover;display:block}
.sc-banner-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4);background:linear-gradient(135deg,#1C0A4A,#3A2A18,#2A1B3D)}
.sc-banner-ph svg{width:44px;height:44px;opacity:.55}
.sc-banner-ph span{font-size:13px;font-weight:600}
.sc-banner-overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(18,11,30,.94) 0%,rgba(18,11,30,.72) 46%,rgba(18,11,30,.2) 76%,transparent 100%)}
.sc-banner-content{position:relative;z-index:2;max-width:520px;padding:0 clamp(28px,5vw,58px)}
.sc-banner-content h3{margin:0 0 12px;font-size:clamp(22px,3vw,34px);font-weight:600;color:#fff;line-height:1.1}
.sc-banner-content p{margin:0 0 22px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);max-width:430px}
@media(max-width:820px){
.sc-banner-card{aspect-ratio:4/5}
.sc-banner-overlay{background:linear-gradient(180deg,rgba(18,11,30,.4),rgba(18,11,30,.86) 58%,rgba(18,11,30,.96));align-items:flex-end}
.sc-banner-content{padding:0 26px 30px}
}
/* ---- FAQ ---- */
.sc-faq-sec{padding:78px 0;background:linear-gradient(180deg,#150d24,#120b1e)}
.sc-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sc-faq-item{background:#1a1330;border:1px solid rgba(177,166,255,.12);border-radius:14px;overflow:hidden;transition:border-color .3s}
.sc-faq-item[open]{border-color:rgba(245,158,11,.3)}
.sc-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:600;color:#fff}
.sc-faq-item summary::-webkit-details-marker{display:none}
.sc-faq-ico{flex-shrink:0;display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px;background:rgba(245,158,11,.12);color:#F59E0B;transition:transform .3s}
.sc-faq-ico svg{width:16px;height:16px}
.sc-faq-item[open] .sc-faq-ico{transform:rotate(180deg)}
.sc-faq-a{padding:0 24px 20px}
.sc-faq-a p{margin:0;font-size:14px;line-height:1.62;color:rgba(255,255,255,.6)}
/* ---- FINAL ---- */
.sc-final{position:relative;padding:96px 0;background:#120b1e;overflow:hidden;text-align:center}
.sc-final-bg{position:absolute;inset:0;pointer-events:none}
.sc-final-blob{position:absolute;border-radius:50%;filter:blur(90px)}
.sc-fb1{width:480px;height:480px;top:-160px;left:10%;background:radial-gradient(circle,rgba(245,158,11,.18),transparent 68%)}
.sc-fb2{width:420px;height:420px;bottom:-160px;right:10%;background:radial-gradient(circle,rgba(139,92,246,.16),transparent 68%)}
.sc-final-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.sc-final-inner h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:600;color:#fff;line-height:1.08;letter-spacing:-.02em;margin:0 0 16px}
.sc-final-inner p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.6);margin:0 0 30px}
.sc-final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---- RESPONSIVE ---- */
@media(max-width:1000px){
.sc-stats-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}
.sc-stat:nth-child(2)::after{display:none}
.sc-why-grid,.sc-stack-grid,.sc-process-grid{grid-template-columns:repeat(2,1fr)}
.sc-cap-grid,.sc-seg-grid{grid-template-columns:1fr 1fr}
.sc-cap-lg{grid-column:span 2;grid-row:span 1}
}
@media(max-width:720px){
.sc-hero{padding:108px 0 60px}
.sc-comp-card{grid-template-columns:1fr;padding:34px;gap:32px}
.sc-comp-visual{order:-1}
.sc-cap-grid,.sc-seg-grid,.sc-why-grid,.sc-stack-grid,.sc-process-grid{grid-template-columns:1fr}
.sc-cap-lg{grid-column:span 1}
.sc-funnel-bar{min-width:0;width:100%!important}
.sc-stats-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
.sc-hb1,.sc-hb2,.sc-badge-dot,.sc-cb1,.sc-cb2,.sc-cb3{animation:none}
}
/* ============================================================
SALES/CRM contact page — amber variant overrides
============================================================ */
.tbc-hero-sc .tbc-hb1{background:radial-gradient(circle,rgba(245,158,11,.18),transparent 66%)}
.tbc-hero-sc .tbc-hb2{background:radial-gradient(circle,rgba(139,92,246,.12),transparent 66%)}
.tbc-hero-sc .tbc-hero-badge{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#FBCB77}
.tbc-hero-sc .tbc-bolt{color:#FDE047}
.tbc-hero-sc .grad{background:linear-gradient(120deg,#F59E0B,#FBBF24,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}
.tbc-form-sc .tbc-form-badge{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.26);color:#FBCB77}
.tbc-form-sc .tb-mode:hover{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.05)}
.tbc-form-sc .tb-mode-ic{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:#F59E0B}
.tbc-form-sc .tb-mode-on{border-color:#F59E0B;background:rgba(245,158,11,.12);box-shadow:0 0 0 1px rgba(245,158,11,.5),0 10px 26px -12px rgba(245,158,11,.6)}
.tbc-form-sc .tb-mode-on .tb-mode-ic{background:#F59E0B;border-color:#F59E0B;color:#1a1205}
.tbc-form-sc .tbc-field input:focus,.tbc-form-sc .tbc-field textarea:focus,.tbc-form-sc .tbc-field select:focus{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.05)}
.tbc-form-sc .tb-postal-note.ok{color:#FBCB77}
.tbc-submit-sc{background:linear-gradient(135deg,#F59E0B,#D97706);color:#1a1205}
.tbc-submit-sc:hover{box-shadow:0 16px 40px -14px rgba(245,158,11,.7)}
.tbc-submit-sc .tbc-bolt{color:#B45309}
.tbc-form-sc ~ .tbc-side .tbc-step-n{color:#F59E0B;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.tbc-form-sc ~ .tbc-side .tbc-ci-ic{color:#F59E0B}
.tbc-form-sc ~ .tbc-side .tbc-ci a:hover{color:#F59E0B}
.tbc-side .tbc-ad[data-ad-slot="sc-contact-1"]{flex:1 1 auto;min-height:200px;aspect-ratio:4/3}
.tbc-form-sc .tb-form-success-ico{background:linear-gradient(135deg,#F59E0B,#D97706)}
/* ---- TECH & INTEGRATION STACK ---- */
.sc-tech{padding:78px 0;background:linear-gradient(180deg,#120b1e,#150d24)}
.sc-tech-layers{display:flex;flex-direction:column;gap:16px;max-width:960px;margin:0 auto}
.sc-tech-layer{position:relative;background:#1a1330;border:1px solid rgba(177,166,255,.12);border-radius:18px;padding:24px 26px;display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;transition:border-color .35s,box-shadow .35s,transform .35s}
.sc-tech-layer::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--lc)}
.sc-tech-layer:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--lc) 40%,transparent);box-shadow:0 24px 50px -30px color-mix(in srgb,var(--lc) 45%,transparent)}
.sc-tech-lhead{display:flex;gap:14px;align-items:flex-start}
.sc-tech-lnum{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--lc);line-height:1;flex-shrink:0}
.sc-tech-lhead h3{margin:0 0 5px;font-size:16.5px;font-weight:600;color:#fff;line-height:1.15}
.sc-tech-lhead p{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.5)}
.sc-tech-logos{display:flex;flex-wrap:wrap;gap:10px}
.sc-logo{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;padding:12px 8px;border-radius:12px;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s}
.sc-logo:hover{transform:translateY(-3px);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--lc) 50%,rgba(0,0,0,.5))}
.sc-logo img{width:34px;height:34px;object-fit:contain}
.sc-logo span{font-size:10.5px;font-weight:600;color:#3a2f52;text-align:center;line-height:1.1;letter-spacing:.01em}
@media(max-width:760px){
.sc-tech-layer{grid-template-columns:1fr;gap:16px}
.sc-logo{width:calc(33.33% - 7px)}
}
/* ---- IN-HOUSE ENGINE ---- */
.sc-engine{padding:20px 0 82px;background:#150d24}
.sc-engine-card{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;background:radial-gradient(120% 140% at 100% 0%,rgba(245,158,11,.1),transparent 55%),linear-gradient(150deg,#231433,#1a1330);border:1px solid rgba(245,158,11,.2);border-radius:26px;padding:52px;overflow:hidden}
.sc-engine-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.2vw,34px);font-weight:600;color:#fff;margin:0 0 14px;line-height:1.12}
.sc-engine-copy>p{font-size:15px;line-height:1.64;color:rgba(255,255,255,.62);margin:0 0 26px}
.sc-engine-feats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-engine-feat{display:flex;gap:12px;align-items:flex-start}
.sc-ef-ico{flex-shrink:0;display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;background:rgba(245,158,11,.14);color:#F59E0B}
.sc-ef-ico svg{width:20px;height:20px}
.sc-engine-feat b{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:2px}
.sc-engine-feat span{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.52)}
.sc-engine-visual{display:flex;align-items:center;justify-content:center;min-height:320px}
.sc-engine-core{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}
.sc-engine-symbol{position:relative;z-index:5;width:88px;height:88px;border-radius:22px;background:linear-gradient(150deg,#241541,#1a1330);border:1px solid rgba(245,158,11,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 50px -6px rgba(245,158,11,.4)}
.sc-engine-symbol img{width:48px;height:48px;object-fit:contain}
.sc-engine-ring{position:absolute;border-radius:50%;border:1px solid rgba(245,158,11,.16)}
.sc-er1{width:150px;height:150px;animation:scSpin 20s linear infinite}
.sc-er2{width:220px;height:220px;border-color:rgba(139,92,246,.16);animation:scSpin 32s linear infinite reverse}
.sc-er3{width:280px;height:280px;border-color:rgba(255,255,255,.06)}
@keyframes scSpin{to{transform:rotate(360deg)}}
.sc-engine-orbit{position:absolute;width:44px;height:44px;border-radius:12px;background:#1a1330;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);z-index:4}
.sc-engine-orbit img{width:24px;height:24px;object-fit:contain}
.sc-eo1{top:2px;left:50%;margin-left:-22px;animation:scFloat 4s ease-in-out infinite}
.sc-eo2{right:2px;top:50%;margin-top:-22px;animation:scFloat 4s ease-in-out 1s infinite}
.sc-eo3{bottom:2px;left:50%;margin-left:-22px;animation:scFloat 4s ease-in-out 2s infinite}
.sc-eo4{left:2px;top:50%;margin-top:-22px;animation:scFloat 4s ease-in-out 3s infinite}
@media(max-width:820px){
.sc-engine-card{grid-template-columns:1fr;padding:34px;gap:34px}
.sc-engine-feats{grid-template-columns:1fr}
.sc-engine-visual{order:-1;min-height:0}
}
@media(prefers-reduced-motion:reduce){
.sc-er1,.sc-er2,.sc-eo1,.sc-eo2,.sc-eo3,.sc-eo4{animation:none}
}
/* ============ LIFE OF A LEAD — animated pipeline lifecycle ============ */
.sc-pipeline{padding:78px 0;background:linear-gradient(180deg,#150d24,#120b1e)}
.sc-life{position:relative;max-width:1140px;margin:46px auto 0}
/* rail + progress + traveling token — sits BEHIND the stage nodes so icons are never covered */
.sc-life-track{position:absolute;top:0;left:0;width:100%;height:62px;z-index:1;pointer-events:none}
.sc-life-track::before{content:'';position:absolute;top:30px;left:8.333%;right:8.333%;height:3px;border-radius:3px;background:rgba(177,166,255,.14)}
.sc-life-progress{position:absolute;top:30px;left:8.333%;height:3px;width:0;border-radius:3px;background:linear-gradient(90deg,#F59E0B,#EAB308,#0B5FFF,#8B5CF6,#EC4899,#22C55E);background-repeat:no-repeat;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 14px rgba(139,92,246,.45)}
.sc-life-token{position:absolute;top:30px;left:8.333%;transform:translate(-50%,-50%);transition:left .66s cubic-bezier(.5,0,.2,1)}
.sc-token-core{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--tkc,#F59E0B);box-shadow:0 0 16px var(--tkc,#F59E0B);z-index:1}
.sc-token-ring{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--tkc,#F59E0B);opacity:.5;animation:scTokPulse 1.4s ease-out infinite;z-index:1}
@keyframes scTokPulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.sc-token-label{position:absolute;top:-13px;left:8.333%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--tkc,#F59E0B);text-shadow:0 1px 8px rgba(21,13,36,.95),0 0 5px rgba(21,13,36,.9);z-index:6;transition:left .66s cubic-bezier(.5,0,.2,1);pointer-events:none}
/* stages */
.sc-life-stages{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative;z-index:2}
.sc-life-stage{display:flex;flex-direction:column;align-items:center;text-align:center}
.sc-ls-node{position:relative;z-index:4;width:62px;height:62px;border-radius:50%;background:#1a1330;border:2px solid rgba(177,166,255,.16);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);transition:all .4s;flex-shrink:0}
.sc-ls-ico{display:inline-flex}.sc-ls-ico svg{width:26px;height:26px}
.sc-ls-pulse{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lsc);opacity:0}
.sc-ls-burst{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.sc-life-stage.active .sc-ls-node{border-color:var(--lsc);color:var(--lsc);background:color-mix(in srgb,var(--lsc) 15%,#1a1330);box-shadow:0 0 28px -4px var(--lsc);transform:scale(1.07)}
.sc-life-stage.active .sc-ls-pulse{animation:scNodePulse 1s ease-out}
@keyframes scNodePulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.sc-life-stage.done .sc-ls-node{border-color:color-mix(in srgb,var(--lsc) 5%,transparent);color:var(--lsc)}
.sc-life-stage.done .sc-ls-node{border-color:color-mix(in srgb,var(--lsc) 50%,rgba(177,166,255,.16))}
.sc-ls-info{margin-top:16px}
.sc-ls-num{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lsc);opacity:.55;margin-bottom:5px;transition:opacity .4s}
.sc-ls-info>b{display:block;font-size:13px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:5px}
.sc-ls-info>p{font-size:11px;line-height:1.45;color:rgba(255,255,255,.42);margin:0 0 9px}
.sc-life-stage.active .sc-ls-num{opacity:1}
.sc-life-stage.active .sc-ls-info>p{color:rgba(255,255,255,.6)}
.sc-ls-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.sc-ls-chips span{font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:20px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.08)}
.sc-chip-win{background:rgba(34,197,94,.14)!important;color:#4ADE80!important;border-color:rgba(34,197,94,.32)!important}
.sc-ls-layers{display:flex;flex-direction:column;gap:4px;align-items:center}
.sc-enrich-layer{font-size:9.5px;font-weight:600;padding:3px 9px;border-radius:6px;background:rgba(234,179,8,.1);color:#FCD34D;border:1px solid rgba(234,179,8,.22);opacity:0;transform:translateY(6px) scale(.92);transition:all .4s}
.sc-enrich-layer.on{opacity:1;transform:none}
.sc-enrich-layer[data-l="3"]{background:rgba(234,179,8,.2);font-weight:700}
.sc-ls-gate{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.sc-gate-check{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:rgba(11,95,255,.1);color:#93C5FD;border:1px solid rgba(11,95,255,.22);opacity:.25;transition:all .35s}
.sc-gate-check.on{opacity:1;background:rgba(11,95,255,.2);box-shadow:0 0 10px -2px rgba(11,95,255,.55)}
.sc-ls-auto{display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:center}
.sc-auto-node{font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:rgba(139,92,246,.1);color:#C4B5FD;border:1px solid rgba(139,92,246,.22);opacity:.3;transform:scale(.9);transition:all .3s}
.sc-auto-node.on{opacity:1;transform:scale(1);background:rgba(139,92,246,.22);box-shadow:0 0 10px -2px rgba(139,92,246,.6)}
.sc-auto-arrow{font-size:10px;color:rgba(139,92,246,.4)}
.sc-ls-qa{width:100%;max-width:132px}
.sc-qa-meter{height:6px;border-radius:6px;background:rgba(236,72,153,.12);overflow:hidden;margin-bottom:5px}
.sc-qa-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#EC4899,#F472B6);transition:width 1.1s cubic-bezier(.3,0,.2,1)}
.sc-qa-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.5)}
.sc-qa-label b{color:#F472B6;font-size:11px}
.sc-life-won.active .sc-ls-burst{animation:scWonBurst .85s ease-out}
@keyframes scWonBurst{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 26px rgba(34,197,94,0)}}
.sc-life-foot{display:flex;justify-content:space-between;align-items:center;margin-top:36px;flex-wrap:wrap;gap:14px}
.sc-life-legend{display:flex;align-items:center;gap:0;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.5)}
.sc-legend-dot{width:8px;height:8px;border-radius:50%;margin:0 6px 0 14px}
.sc-legend-dot:first-child{margin-left:0}
.sc-life-replay{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#C4B5FD;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25);padding:8px 14px;border-radius:10px;cursor:pointer;transition:all .25s;font-family:inherit}
.sc-life-replay:hover{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.45)}
.sc-life-replay svg{transition:transform .5s}
.sc-life-replay:hover svg{transform:rotate(-180deg)}
@media(max-width:860px){
.sc-life-track{display:none}
.sc-life{margin-top:24px}
.sc-life-stages{grid-template-columns:1fr;gap:12px}
.sc-life-stage{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;background:#1a1330;border:1px solid rgba(177,166,255,.1);border-radius:14px;padding:16px 16px}
.sc-life-stage.active{border-color:color-mix(in srgb,var(--lsc) 35%,transparent)}
.sc-ls-node{width:50px;height:50px}
.sc-ls-ico svg{width:22px;height:22px}
.sc-life-stage.active .sc-ls-node{transform:none}
.sc-ls-info{margin-top:0;flex:1}
.sc-ls-chips,.sc-ls-gate,.sc-ls-auto{justify-content:flex-start}
.sc-ls-layers{align-items:flex-start}
.sc-ls-qa{max-width:none}
}
@media(prefers-reduced-motion:reduce){
.sc-token-ring,.sc-ls-pulse{animation:none}
.sc-life-token,.sc-life-progress,.sc-qa-fill,.sc-enrich-layer,.sc-auto-node,.sc-gate-check{transition:none}
}
/* ============ FIELD & DOOR-TO-DOOR (photo-led) ============ */
.sc-field{padding:78px 0;background:linear-gradient(180deg,#120b1e,#150d24)}
.sc-field-feature{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-top:22px;align-items:stretch}
/* big hero photo */
.sc-field-hero{position:relative;border-radius:22px;overflow:hidden;min-height:420px;border:1px solid rgba(245,158,11,.18)}
.sc-field-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.sc-field-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,11,30,.15) 0%,rgba(18,11,30,0) 30%,rgba(18,11,30,.35) 62%,rgba(18,11,30,.92) 100%)}
.sc-field-hero-chip{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(18,11,30,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);padding:7px 13px;border-radius:30px;letter-spacing:.01em}
.sc-fh-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.25);animation:scDot 1.6s ease-in-out infinite}
.sc-field-hero-cap{position:absolute;left:22px;right:22px;bottom:96px;z-index:2}
.sc-field-hero-cap b{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.2vw,23px);font-weight:600;color:#fff;line-height:1.2;margin-bottom:6px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.sc-field-hero-cap span{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.82);max-width:520px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.sc-field-hero-team{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:flex;align-items:center;gap:10px}
.sc-fht-photo{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.5);margin-left:-14px;box-shadow:0 4px 12px rgba(0,0,0,.4);background:#241541}
.sc-fht-photo:first-child{margin-left:0}
.sc-fht-photo img{position:static;width:100%;height:100%;object-fit:cover}
.sc-fht-count{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.85);margin-left:6px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* coverage map card */
.sc-field-mapcard{background:linear-gradient(150deg,#1e1236,#1a1330);border:1px solid rgba(245,158,11,.18);border-radius:22px;padding:20px;display:flex;flex-direction:column}
.sc-field-map-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sc-fm-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#FBBF24}
.sc-fm-dot{width:8px;height:8px;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.2);animation:scDot 1.6s ease-in-out infinite}
.sc-fm-note{font-size:11px;color:rgba(255,255,255,.45)}
.sc-field-map{width:100%;height:auto;display:block;flex:1;min-height:0}
.sc-prov{fill:rgba(255,255,255,.05);stroke:rgba(245,158,11,.3);stroke-width:1.4;transition:fill .5s,stroke .5s;stroke-linejoin:round}
.sc-prov.on{fill:url(#scFmFill);stroke:#FBBF24;filter:drop-shadow(0 0 10px rgba(245,158,11,.45))}
.sc-fm-node{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center}
.sc-fm-node.on{opacity:1;animation:scNodePop .5s ease-out}
@keyframes scNodePop{0%{transform:scale(0)}60%{transform:scale(1.6)}100%{transform:scale(1)}}
.sc-fm-ripple{fill:none;stroke:#FBBF24;stroke-width:1.5;opacity:0}
.sc-fm-labels text{opacity:0;transition:opacity .5s}
.sc-fm-labels text.on{opacity:.9}
.sc-field-legend{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.sc-fl-item{display:flex;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.5);padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);transition:all .4s}
.sc-fl-item b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;color:rgba(255,255,255,.6);transition:color .4s}
.sc-fl-item.on{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.sc-fl-item.on b{color:#FBBF24}
/* tracks */
.sc-field-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.sc-field-track{display:flex;gap:13px;align-items:flex-start;padding:18px;border-radius:14px;background:#1a1330;border:1px solid rgba(177,166,255,.1);transition:transform .3s,border-color .3s}
.sc-field-track:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ftc) 40%,transparent)}
.sc-ft-ico{flex-shrink:0;display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:11px;background:color-mix(in srgb,var(--ftc) 16%,transparent);color:var(--ftc)}
.sc-ft-ico svg{width:22px;height:22px}
.sc-field-track b{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:4px}
.sc-field-track p{font-size:12px;line-height:1.5;color:rgba(255,255,255,.5);margin:0}
/* stats */
.sc-field-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.sc-field-stat{text-align:center;padding:16px 8px;border-radius:12px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.16)}
.sc-fs-num,.sc-field-stat>b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;line-height:1;color:#FBBF24}
.sc-field-stat>b{font-size:20px;letter-spacing:.01em}
.sc-field-stat span{display:block;font-size:10px;font-weight:600;color:rgba(255,255,255,.45);margin-top:5px;line-height:1.2}
@media(max-width:900px){
.sc-field-feature{grid-template-columns:1fr}
.sc-field-hero{min-height:340px}
.sc-field-tracks{grid-template-columns:1fr}
.sc-field-stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
.sc-fm-dot,.sc-fh-dot{animation:none}
.sc-prov,.sc-fm-node,.sc-fm-labels text,.sc-fl-item{transition:none}
}
/* ============ BUSINESS-INTERNET: FIBRE BUILD / INFRA / SLA ============ */
.bi-sec-head{text-align:center;max-width:720px;margin:0 auto 44px}
.bi-sec-head h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.4vw,34px);font-weight:600;color:#fff;margin:12px 0 12px;line-height:1.14}
.bi-sec-head p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.6);margin:0}
/* --- Field consultation card (landscape) --- */
.bi-fieldcard{position:relative;padding:88px 0;background:linear-gradient(180deg,#0d0722,#0a0620)}
.bi-fc{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 40px 100px -50px rgba(0,0,0,.9)}
.bi-fc-media{position:relative;min-height:420px}
.bi-fc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.bi-fc-media-grad{position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(13,7,34,.5) 100%),linear-gradient(180deg,transparent 60%,rgba(13,7,34,.35) 100%)}
.bi-fc-badge{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(13,7,34,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);padding:7px 13px;border-radius:30px;letter-spacing:.01em}
.bi-fc-dot{width:8px;height:8px;border-radius:50%;background:#2DD4CF;box-shadow:0 0 0 4px rgba(45,212,207,.22);animation:scDot 1.6s ease-in-out infinite}
.bi-fc-copy{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.bi-fc-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,2.8vw,31px);font-weight:600;color:#fff;margin:12px 0 14px;line-height:1.16}
.bi-fc-copy>p{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.62);margin:0 0 22px}
.bi-fc-points{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:12px}
.bi-fc-points li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.4}
.bi-fc-points li svg{flex-shrink:0;width:18px;height:18px;color:#2DD4CF;margin-top:1px}
.bi-fc-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bi-fc-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:#06121f;background:linear-gradient(180deg,#2DD4CF,#22B8B3);padding:13px 22px;border-radius:12px;text-decoration:none;box-shadow:0 14px 34px -14px rgba(45,212,207,.7);transition:transform .25s ease,box-shadow .25s ease}
.bi-fc-btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(45,212,207,.85)}
.bi-fc-cta-note{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.4)}
.bi-fc-cta-note{color:rgba(255,255,255,.45)}
@media(max-width:840px){
.bi-fc{grid-template-columns:1fr}
.bi-fc-media{min-height:280px}
.bi-fc-copy{padding:32px 26px}
}
@media(prefers-reduced-motion:reduce){.bi-fc-dot{animation:none}}
/* --- Infrastructure / equipment stack --- */
.bi-infra{position:relative;padding:88px 0;background:linear-gradient(180deg,#0a0620,#0d0722)}
.bi-infra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:920px;margin:0 auto}
.bi-infra-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.bi-infra-card:hover{transform:translateY(-6px);border-color:rgba(45,212,207,.35)}
.bi-infra-photo{aspect-ratio:1.85/1;background:#0f0a26;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.bi-infra-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bi-infra-ph-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.3)}
.bi-infra-ph-inner svg{width:46px;height:46px}
.bi-infra-ph-inner span{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.32)}
.bi-infra-body{padding:18px}
.bi-infra-body b{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:6px}
.bi-infra-body p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5);margin:0 0 12px}
.bi-infra-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bi-infra-specs li{font-size:10px;font-weight:600;color:#7EE7E3;background:rgba(45,212,207,.1);border:1px solid rgba(45,212,207,.2);padding:3px 8px;border-radius:20px}
.bi-infra-note{text-align:center;font-size:11.5px;color:rgba(255,255,255,.4);margin-top:20px}
@media(max-width:900px){.bi-infra-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.bi-infra-grid{grid-template-columns:1fr}}
/* --- Reliability / SLA panel --- */
.bi-sla{position:relative;padding:88px 0;background:linear-gradient(180deg,#0d0722,#0a0620);overflow:hidden}
.bi-sla-bg{position:absolute;inset:0;pointer-events:none}
.bi-sla-blob{position:absolute;width:520px;height:520px;top:-160px;right:-120px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,207,.1),transparent 68%);filter:blur(60px)}
.bi-sla-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.bi-sla-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.2vw,32px);font-weight:600;color:#fff;margin:12px 0 14px;line-height:1.16}
.bi-sla-copy>p{font-size:15px;line-height:1.62;color:rgba(255,255,255,.62);margin:0 0 26px}
.bi-sla-points{display:flex;flex-direction:column;gap:16px}
.bi-sla-point{display:flex;gap:13px;align-items:flex-start}
.bi-slp-ico{flex-shrink:0;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:11px;background:rgba(45,212,207,.12);color:#2DD4CF}
.bi-slp-ico svg{width:21px;height:21px}
.bi-sla-point b{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:2px}
.bi-sla-point span{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.5)}
.bi-sla-viz{display:flex;flex-direction:column;align-items:center;gap:24px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:36px}
.bi-sla-gauge{position:relative;width:200px;height:200px}
.bi-gauge-svg{width:100%;height:100%}
#biGaugeArc{transition:stroke-dashoffset 1.6s cubic-bezier(.3,0,.2,1)}
.bi-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bi-gauge-center b{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;line-height:1;color:#fff}
.bi-gauge-center span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:4px}
.bi-sla-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.bi-sla-stat{text-align:center;padding:12px 6px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.bi-sla-stat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:#2DD4CF;line-height:1}
.bi-sla-stat span{display:block;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.45);margin-top:5px}
.bi-sla-live{display:inline-flex;align-items:center;gap:5px;justify-content:center}
.bi-sla-livedot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.22);animation:scDot 1.6s ease-in-out infinite}
@media(max-width:880px){.bi-sla-inner{grid-template-columns:1fr;gap:34px}}
@media(prefers-reduced-motion:reduce){
.bi-build-fill,.bi-build-signal,#biGaugeArc{transition:none}
.bi-sla-livedot{animation:none}
}
/* ============ MEGA MENU V2 — Premium redesign ============ */
header#header.hdr-minimal .mega.mega-v2,
header#header .hdr-bar .mega.mega-v2{
width:min(900px,calc(100vw - 48px))!important;
padding:22px!important;
background:linear-gradient(170deg,rgba(18,10,38,.98),rgba(10,5,22,.98))!important;
backdrop-filter:blur(28px)!important;-webkit-backdrop-filter:blur(28px)!important;
border:1px solid rgba(139,92,246,.14)!important;
border-radius:18px!important;
box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset!important;
}
header#header.hdr-minimal .mega.mega-prov,
header#header .hdr-bar .mega.mega-prov{width:min(520px,calc(100vw - 48px))!important;padding:18px!important}
.mv2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px 26px}
.mv2-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.mv2-head{display:block;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(139,92,246,.55);padding:8px 10px 6px;margin-bottom:2px}
.mv2-link{display:flex!important;align-items:center!important;gap:12px!important;padding:10px 11px!important;border-radius:12px!important;text-decoration:none!important;color:rgba(255,255,255,.7)!important;transition:all .28s cubic-bezier(.22,.7,.2,1)!important;position:relative;overflow:hidden;border:1px solid transparent}
.mv2-link::before{content:'';position:absolute;inset:0;border-radius:12px;opacity:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.12),transparent 60%);transition:opacity .3s;pointer-events:none}
.mv2-link:hover::before{opacity:1}
.mv2-link:hover{background:rgba(255,255,255,.04)!important;border-color:rgba(139,92,246,.16);color:#fff!important;transform:translateX(3px)}
.mv2-ico{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 18%,transparent),color-mix(in srgb,var(--b) 10%,transparent));border:1px solid color-mix(in srgb,var(--a) 22%,transparent);transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s}
.mv2-ico svg{width:20px;height:20px;display:block}
.mv2-link:hover .mv2-ico{transform:scale(1.12) rotate(-5deg);box-shadow:0 6px 20px -4px color-mix(in srgb,var(--a) 45%,transparent)}
.mv2-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.mv2-txt strong{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;color:inherit;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv2-txt em{font-style:normal;font-size:11px;font-weight:500;color:rgba(255,255,255,.32);display:block;line-height:1.3;transition:color .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv2-link:hover .mv2-txt em{color:rgba(255,255,255,.5)}
.mv2-arrow{flex-shrink:0;width:16px;height:16px;color:rgba(255,255,255,.15);transition:color .25s,transform .25s}
.mv2-arrow svg{width:16px;height:16px;display:block}
.mv2-link:hover .mv2-arrow{color:rgba(255,255,255,.55);transform:translateX(3px)}
/* ── Providers dropdown — logo cards ── */
.mv2-prov-grid{display:flex;flex-direction:column;gap:8px}
.mv2-prov-card{display:flex!important;align-items:center!important;gap:16px!important;padding:16px 18px!important;border-radius:14px!important;text-decoration:none!important;color:rgba(255,255,255,.75)!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.03)!important;transition:all .3s cubic-bezier(.22,.7,.2,1)!important;position:relative;overflow:hidden}
.mv2-prov-card::before{content:'';position:absolute;inset:0;border-radius:14px;opacity:0;transition:opacity .3s;pointer-events:none}
.mv2-prov-card:first-child::before{background:radial-gradient(200px circle at 30% 50%,rgba(218,41,28,.1),transparent 60%)}
.mv2-prov-card:last-child::before{background:radial-gradient(200px circle at 30% 50%,rgba(242,85,77,.1),transparent 60%)}
.mv2-prov-card:hover::before{opacity:1}
.mv2-prov-card:hover{border-color:rgba(255,255,255,.14)!important;background:rgba(255,255,255,.05)!important;transform:translateX(4px);color:#fff!important}
.mv2-prov-logo{width:150px;height:56px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px 18px;flex-shrink:0;box-shadow:0 6px 18px -4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s}
.mv2-prov-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.mv2-prov-rogers img{aspect-ratio:356/120}
.mv2-prov-paystone img{aspect-ratio:594/120}
.mv2-prov-card:hover .mv2-prov-logo{transform:scale(1.05);box-shadow:0 10px 24px -4px rgba(0,0,0,.6)}
.mv2-prov-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.mv2-prov-info strong{font-family:'DM Sans',sans-serif;font-size:14.5px;font-weight:600;color:inherit;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv2-prov-info em{font-style:normal;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.35);display:block;transition:color .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv2-prov-card:hover .mv2-prov-info em{color:rgba(255,255,255,.55)}
.mv2-prov-badge{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);transition:all .25s;white-space:nowrap}
.mv2-prov-card:hover .mv2-prov-badge{border-color:rgba(139,92,246,.35);color:rgba(255,255,255,.65);background:rgba(139,92,246,.1)}
.mv2-prov-card .mv2-arrow{flex-shrink:0;width:18px;height:18px;color:rgba(255,255,255,.15);transition:color .25s,transform .25s}
.mv2-prov-card:hover .mv2-arrow{color:rgba(255,255,255,.55);transform:translateX(4px)}
@media(max-width:980px){header#header .mega.mega-v2{display:none!important}}
/* ═══════════════════════════════════════════════════════════════
HEADER — FLOATING ISLANDS v4
No enclosing capsule. Logo, each nav item, and each button are
independent floating pill-islands. Appended LAST; overrides all.
═══════════════════════════════════════════════════════════════ */
/* Header = transparent positioning wrapper only (NO bar background) */
header#header.hdr-minimal{
position:fixed!important; top:16px!important; left:50%!important;
transform:translateX(-50%)!important;
width:min(1360px,calc(100vw - 32px))!important;
z-index:1000!important;
background:transparent!important;
backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
border:none!important; border-radius:0!important; box-shadow:none!important;
padding:0!important;
}
header#header.hdr-minimal.scrolled{ }
header#header.hdr-minimal .hdr-bar{
display:flex!important; align-items:center!important;
justify-content:space-between!important;
gap:16px!important; height:auto!important; padding:0!important;
background:transparent!important; border:none!important; position:relative!important;
}
/* ---- LOGO island ---- */
header#header.hdr-minimal .logo{
display:flex!important; align-items:center!important; justify-content:center!important; flex-shrink:0!important;
height:50px!important; padding:0 16px!important; margin:0!important;
background:rgba(14,10,28,.6)!important;
backdrop-filter:blur(18px) saturate(1.2)!important; -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;
border:1px solid rgba(255,255,255,.08)!important; border-radius:100px!important;
box-shadow:0 8px 28px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
header#header.hdr-minimal .hdr-logo-anim{ display:flex!important; align-items:center!important; justify-content:center!important; height:100%!important; }
header#header.hdr-minimal #hdr-logo-canvas{ display:block!important; height:32px!important; width:auto!important; max-width:180px!important; }
/* ---- NAV: transparent group, NOT a capsule. Kill old transform + flex-grow ---- */
header#header.hdr-minimal .hdr-bar > .nav-links{
display:flex!important; align-items:center!important; gap:8px!important;
position:static!important;
transform:none!important;
flex:0 0 auto!important;
margin:0 auto!important;
padding:0!important; background:transparent!important; border:none!important;
border-radius:0!important; width:auto!important; height:auto!important; box-shadow:none!important;
}
/* ---- EACH nav item = its own floating island ---- */
header#header.hdr-minimal .hdr-bar .nav-item{
position:relative!important; margin:0!important; overflow:visible!important;
border-radius:100px!important;
background:rgba(14,10,28,.6)!important;
backdrop-filter:blur(18px) saturate(1.2)!important; -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;
border:1px solid rgba(255,255,255,.08)!important;
box-shadow:0 8px 28px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;
transition:background .2s,border-color .2s,transform .2s!important;
}
header#header.hdr-minimal .hdr-bar .nav-item:hover{
background:rgba(30,20,50,.78)!important; border-color:rgba(255,255,255,.18)!important;
transform:translateY(-1px)!important;
}
header#header.hdr-minimal .hdr-bar .nav-item > a{
display:inline-flex!important; align-items:center!important; gap:5px!important;
padding:0 18px!important; height:54px!important;
font-family:'DM Sans','Inter',sans-serif!important; font-size:14px!important; font-weight:500!important;
color:rgba(255,255,255,.72)!important; letter-spacing:-.01em!important;
border-radius:100px!important; text-decoration:none!important; white-space:nowrap!important;
transition:color .2s!important; position:relative!important; z-index:2!important; background:transparent!important;
}
header#header.hdr-minimal .hdr-bar .nav-item:hover > a{ color:#fff!important; }
header#header.hdr-minimal .nav-caret{
width:13px!important; height:13px!important; opacity:.5!important; margin-left:1px!important;
transition:transform .25s,opacity .2s!important;
}
header#header.hdr-minimal .nav-item:hover .nav-caret{ opacity:.85!important; transform:rotate(180deg)!important; }
header#header.hdr-minimal .nav-item::before,
header#header.hdr-minimal .nav-item::after,
header#header.hdr-minimal .nav-item .nav-glow{ display:none!important; }
/* ---- RIGHT side: each its own island ---- */
header#header.hdr-minimal .hdr-right{ display:flex!important; align-items:center!important; gap:8px!important; flex-shrink:0!important; }
header#header.hdr-minimal .hdr-link-subtle{
display:inline-flex!important; align-items:center!important; height:54px!important; padding:0 20px!important;
font-family:'DM Sans','Inter',sans-serif!important; font-size:13.5px!important; font-weight:500!important;
color:rgba(255,255,255,.7)!important; text-decoration:none!important; white-space:nowrap!important;
border-radius:100px!important;
background:rgba(14,10,28,.6)!important;
backdrop-filter:blur(18px) saturate(1.2)!important; -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;
border:1px solid rgba(255,255,255,.08)!important;
box-shadow:0 8px 28px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;
transition:color .2s,background .2s,transform .2s!important;
}
header#header.hdr-minimal .hdr-link-subtle:hover{ color:#fff!important; background:rgba(30,20,50,.78)!important; transform:translateY(-1px)!important; }
header#header.hdr-minimal .hdr-btn-signup{
display:inline-flex!important; align-items:center!important; gap:7px!important;
height:54px!important; padding:0 22px!important;
font-family:'DM Sans','Inter',sans-serif!important; font-size:13.5px!important; font-weight:600!important;
color:#1a1030!important; background:#fff!important;
border:none!important; border-radius:100px!important; cursor:pointer!important; white-space:nowrap!important;
box-shadow:0 8px 24px -6px rgba(255,255,255,.35)!important;
transition:transform .2s,box-shadow .2s,background .2s!important;
}
header#header.hdr-minimal .hdr-btn-signup::after{
content:''!important; width:14px!important; height:14px!important;
background:currentColor!important;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat!important;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat!important;
transition:transform .25s!important;
}
header#header.hdr-minimal .hdr-btn-signup:hover{ transform:translateY(-1px)!important; box-shadow:0 10px 28px -6px rgba(255,255,255,.5)!important; background:#f2eeff!important; }
header#header.hdr-minimal .hdr-btn-signup:hover::after{ transform:translate(2px,-2px)!important; }
/* ---- Mega dropdown re-anchor below the islands ---- */
header#header.hdr-minimal .nav-item.has-mega .mega{ top:calc(100% + 14px)!important; }
/* ---- Responsive ---- */
@media(max-width:1120px){
header#header.hdr-minimal .hdr-bar .nav-item > a{ padding:0 13px!important; font-size:13px!important; }
header#header.hdr-minimal .hdr-bar > .nav-links{ gap:6px!important; }
}
@media(max-width:940px){
header#header.hdr-minimal .hdr-bar > .nav-links{ display:none!important; }
header#header.hdr-minimal .hdr-link-subtle{ display:none!important; }
header#header.hdr-minimal .burger{ display:flex!important; }
}
/* ═══ HEADER v4 — kill scroll-state box + glow lines (must be last) ═══ */
/* No box container ever — scrolled or not */
header#header.hdr-minimal,
header#header.hdr-minimal.scrolled{
-webkit-
}
/* Kill the gradient divider lines above/below center */
header#header.hdr-minimal::before,
header#header.hdr-minimal::after,
header#header .hdr-bar::before,
header#header .hdr-bar::after{
display:none!important;
content:none!important;
background:none!important;
}
/* Bar stays transparent too */
header#header.hdr-minimal .hdr-bar{
background:transparent!important;
border:none!important;
box-shadow:none!important;
}
/* ═══ HEADER v4 — kill double-pill on hover (nested background) ═══ */
/* The inner must NEVER paint its own pill — only the .nav-item island does */
header#header.hdr-minimal .hdr-bar .nav-item > a,
header#header.hdr-minimal .hdr-bar .nav-item:hover > a,
header#header.hdr-minimal .nav-links > a,
header#header.hdr-minimal .nav-links > a:hover{
background:transparent!important;
background-image:none!important;
border:none!important;
box-shadow:none!important;
}
/* ═══ HEADER ISLANDS + DROPDOWNS — glare/shine + cursor glow (matches home cards) ═══ */
/* CRITICAL: shine clip must be on the /element that does NOT contain the dropdown.
Putting overflow:hidden on .nav-item would clip the mega dropdown (it's a child). */
/* Logo + Residential + Sign Up have no dropdown — safe to clip the element itself */
header#header.hdr-minimal .logo,
header#header.hdr-minimal .hdr-link-subtle,
header#header.hdr-minimal .hdr-btn-signup{
position:relative!important;
overflow:hidden!important;
}
/* Nav items: clip the (the visible pill), NOT the nav-item (which holds the dropdown) */
header#header.hdr-minimal .hdr-bar .nav-item{ position:relative!important; overflow:visible!important; }
header#header.hdr-minimal .hdr-bar .nav-item > a{ position:relative!important; overflow:hidden!important; }
/* Shine sweep on the pill + logo + residential */
header#header.hdr-minimal .hdr-bar .nav-item > a::after,
header#header.hdr-minimal .logo::after,
header#header.hdr-minimal .hdr-link-subtle::after{
content:''!important; position:absolute!important; inset:0!important;
border-radius:inherit!important; pointer-events:none!important; z-index:3!important;
background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 55%, transparent 60%)!important;
background-size:250% 100%!important;
background-position:200% 0!important;
transition:background-position 0s!important;
}
header#header.hdr-minimal .hdr-bar .nav-item:hover > a::after,
header#header.hdr-minimal .logo:hover::after,
header#header.hdr-minimal .hdr-link-subtle:hover::after{
background-position:-50% 0!important;
transition:background-position .8s ease!important;
}
/* Sign Up (white) — purple-tinted sheen so it's visible */
header#header.hdr-minimal .hdr-btn-signup::before{
content:''!important; position:absolute!important; inset:0!important;
border-radius:inherit!important; pointer-events:none!important; z-index:1!important;
background:linear-gradient(105deg, transparent 40%, rgba(120,80,200,.08) 45%, rgba(120,80,200,.18) 50%, rgba(120,80,200,.08) 55%, transparent 60%)!important;
background-size:250% 100%!important;
background-position:200% 0!important;
transition:background-position 0s!important;
}
header#header.hdr-minimal .hdr-btn-signup:hover::before{
background-position:-50% 0!important;
transition:background-position .8s ease!important;
}
header#header.hdr-minimal .hdr-btn-signup{ position:relative!important; }
header#header.hdr-minimal .hdr-btn-signup > *{ position:relative!important; z-index:2!important; }
/* Cursor-tracking radial glow on the nav pill (clipped to the pill, dropdown unaffected) */
header#header.hdr-minimal .hdr-bar .nav-item > a::before{
content:''!important; position:absolute!important; inset:0!important;
border-radius:inherit!important; pointer-events:none!important; z-index:1!important;
opacity:0!important; transition:opacity .3s!important;
background:radial-gradient(80px circle at var(--cx,50%) var(--cy,50%), rgba(139,92,246,.18), transparent 65%)!important;
}
header#header.hdr-minimal .hdr-bar .nav-item:hover > a::before{ opacity:1!important; }
/* keep the link text/caret above the shine + glow */
header#header.hdr-minimal .hdr-bar .nav-item > a > *{ position:relative!important; z-index:4!important; }
/* Dropdown panel shine — the mega has overflow:hidden already; add a sweep when it opens */
header#header.hdr-minimal .mega.mega-v2::after{
content:''!important; position:absolute!important; inset:0!important;
border-radius:inherit!important; pointer-events:none!important; z-index:1!important;
background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.04) 47%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 53%, transparent 58%)!important;
background-size:250% 100%!important;
background-position:200% 0!important;
}
header#header.hdr-minimal .nav-item.has-mega:hover .mega.mega-v2::after{
background-position:-50% 0!important;
transition:background-position 1.1s ease .1s!important;
}
header#header.hdr-minimal .mega.mega-v2 > *{ position:relative; z-index:2; }
/* ═══ ROGERS BUSINESS PROVIDER PAGE (rbp-*) ═══ */
.rbp-cobrand{padding:64px 0;background:linear-gradient(180deg,#0e0a1e,#0a0515)}
.rbp-cobrand-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.rbp-cobrand-copy .rbp-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;border:1px solid rgba(218,41,28,.32);background:rgba(218,41,28,.09);font-size:11px;font-weight:600;color:#F2554D;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.rbp-badge-dot{width:7px;height:7px;border-radius:50%;background:#F2554D;box-shadow:0 0 8px #F2554D}
.rbp-cobrand-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;color:#fff;line-height:1.1;margin:0 0 16px}
.rbp-cobrand-copy>p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.6);margin:0 0 26px}
.rbp-cobrand-stats{display:flex;gap:28px;flex-wrap:wrap}
.rbp-cbs b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:#F2554D;line-height:1}
.rbp-cbs span{display:block;font-size:12px;color:rgba(255,255,255,.45);margin-top:4px}
.rbp-cobrand-visual{display:flex;flex-direction:column;align-items:center;gap:16px}
.rbp-video-plate{width:100%;max-width:420px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);aspect-ratio:16/7;display:flex;align-items:center;justify-content:center}
.rbp-video-plate video{width:100%;height:100%;object-fit:contain}
.rbp-plate-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.5)}
.rbp-plate-tag img{height:18px;width:auto}
.rbp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rbp-card{text-decoration:none!important;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.22,.7,.2,1),box-shadow .3s}
.rbp-card:hover{transform:translateY(-6px)}
.rbp-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:var(--tc);opacity:.85;transition:gap .25s,opacity .25s}
.rbp-card:hover .rbp-card-link{gap:10px;opacity:1}
.rbp-why{background:linear-gradient(180deg,#0a0515,#0e0a1e)}
.rbp-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.rbp-why-card{padding:26px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:transform .3s,border-color .3s,background .3s}
.rbp-why-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.rbp-why-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.rbp-why-ico svg{width:22px;height:22px}
.rbp-why-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}
.rbp-why-card p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);margin:0}
.rbp-sla{background:linear-gradient(180deg,#0e0a1e,#0a0515)}
.rbp-sla-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.rbp-sla-gauge{display:flex;justify-content:center}
.rbp-sla-gauge svg{width:100%;max-width:280px}
.rbp-sla-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;color:#fff;line-height:1.15;margin:10px 0 14px}
.rbp-sla-copy>p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.6);margin:0 0 20px}
.rbp-sla-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.rbp-sla-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.72)}
.rbp-sla-list li svg{width:18px;height:18px;color:#2DD4CF;flex-shrink:0}
.rbp-process{background:linear-gradient(180deg,#0a0515,#0e0a1e)}
.rbp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;counter-reset:rbp}
.rbp-step{position:relative;padding:26px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.rbp-step-num{display:block;font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:800;background:linear-gradient(120deg,#8B5CF6,#DA291C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1;margin-bottom:12px}
.rbp-step h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}
.rbp-step p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);margin:0}
.rbp-home{background:linear-gradient(180deg,#0e0a1e,#0a0515)}
.rbp-home-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:40px;border-radius:24px;background:linear-gradient(150deg,rgba(245,158,11,.06),rgba(20,14,36,.6));border:1px solid rgba(245,158,11,.14)}
.rbp-home-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.1);font-size:11px;font-weight:600;color:#F59E0B;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.rbp-home-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;color:#fff;line-height:1.15;margin:0 0 14px}
.rbp-home-copy>p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.6);margin:0 0 24px}
.rbp-home-ctas{display:flex;gap:12px;flex-wrap:wrap}
.rbp-home-stats{display:flex;flex-direction:column;gap:16px}
.rbp-home-stat{padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.rbp-home-stat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:#F59E0B;line-height:1}
.rbp-home-stat span{display:block;font-size:12px;color:rgba(255,255,255,.45);margin-top:4px}
.rbp-faq-sec{background:linear-gradient(180deg,#0a0515,#0e0a1e)}
@media(max-width:960px){
.rbp-cobrand-inner,.rbp-sla-inner,.rbp-home-inner{grid-template-columns:1fr}
.rbp-grid{grid-template-columns:1fr}
.rbp-why-grid,.rbp-steps{grid-template-columns:repeat(2,1fr)}
.rbp-home-stats{flex-direction:row;flex-wrap:wrap}
.rbp-home-stat{flex:1;min-width:120px}
}
@media(max-width:560px){
.rbp-why-grid,.rbp-steps{grid-template-columns:1fr}
}
/* ═══════════════ ROGERS BUSINESS — culmination page (rbx-*) ═══════════════ */
/* ---- HERO ---- */
.rbx-hero{position:relative;overflow:hidden;padding:150px 0 90px;background:radial-gradient(ellipse at 50% 0%,#1a0812 0%,#0d0518 45%,#0a0515 100%);min-height:88vh;display:flex;align-items:center}
.rbx-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.85}
.rbx-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.rbx-hero-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.rbx-hb1{top:-15%;left:-8%;width:48%;height:60%;background:radial-gradient(circle,#DA291C,transparent 70%);opacity:.28;animation:rbxFloat 20s ease-in-out infinite}
.rbx-hb2{bottom:-20%;right:-10%;width:52%;height:62%;background:radial-gradient(circle,#8B5CF6,transparent 70%);opacity:.22;animation:rbxFloat 24s ease-in-out infinite reverse}
.rbx-hb3{top:35%;left:40%;width:34%;height:34%;background:radial-gradient(circle,#F59E0B,transparent 70%);opacity:.12;animation:rbxFloat 28s ease-in-out infinite}
@keyframes rbxFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-6%) scale(1.08)}}
.rbx-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%)}
.rbx-hero-inner{position:relative;z-index:2;text-align:center;max-width:920px;margin:0 auto}
.rbx-hero .breadcrumb{color:rgba(255,255,255,.4);margin-bottom:20px}
.rbx-hero .breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none}
.rbx-hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;border:1px solid rgba(218,41,28,.35);background:rgba(218,41,28,.1);font-size:12px;font-weight:600;color:#FF8A84;letter-spacing:.04em;margin-bottom:26px;box-shadow:0 0 24px rgba(218,41,28,.18)}
.rbx-badge-pulse{width:8px;height:8px;border-radius:50%;background:#DA291C;box-shadow:0 0 0 0 rgba(218,41,28,.6);animation:rbxPulse 2s infinite}
@keyframes rbxPulse{0%{box-shadow:0 0 0 0 rgba(218,41,28,.6)}70%{box-shadow:0 0 0 10px rgba(218,41,28,0)}100%{box-shadow:0 0 0 0 rgba(218,41,28,0)}}
.rbx-hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:600;color:#fff;line-height:1.06;letter-spacing:-.03em;margin:0 0 22px}
.rbx-grad{background:linear-gradient(115deg,#DA291C,#FF6B4A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rbx-grad-2{background:linear-gradient(115deg,#8B5CF6,#B866FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rbx-hero-sub{font-size:clamp(15px,1.7vw,18px);line-height:1.7;color:rgba(255,255,255,.62);max-width:720px;margin:0 auto 34px}
.rbx-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.rbx-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s}
.rbx-btn-primary{background:linear-gradient(120deg,#DA291C,#F59E0B);color:#fff;box-shadow:0 14px 40px -12px rgba(218,41,28,.6)}
.rbx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 50px -12px rgba(218,41,28,.75)}
.rbx-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.14)}
.rbx-btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.rbx-hero-cobrand{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:40px}
.rbx-cobrand-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}
.rbx-cobrand-plate{display:flex;align-items:center;background:#fff;border-radius:7px;padding:5px 12px}
.rbx-cobrand-plate img{height:22px;width:auto;display:block}
.rbx-cobrand-x{color:rgba(255,255,255,.35);font-size:16px}
.rbx-cobrand-tb{display:inline-flex;align-items:center;gap:7px}
.rbx-cobrand-tb img{height:22px;width:auto}
.rbx-cobrand-tb b{color:#fff;font-size:14px;font-weight:600}
.rbx-hero-trust{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.rbx-htrust{padding:14px 22px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);min-width:140px}
.rbx-htrust b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;background:linear-gradient(120deg,#DA291C,#F59E0B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1}
.rbx-htrust span{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:5px}
.rbx-scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.2);border-radius:14px;z-index:3;display:flex;justify-content:center;padding-top:7px}
.rbx-scroll-cue span{width:4px;height:8px;border-radius:2px;background:rgba(255,255,255,.5);animation:rbxScroll 1.8s infinite}
@keyframes rbxScroll{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}}
/* ---- TICKER ---- */
.rbx-ticker-sec{background:linear-gradient(180deg,#0a0515,#0d0722);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:18px 0;overflow:hidden}
.rbx-ticker{display:flex;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rbx-ticker-row{display:inline-flex;align-items:center;gap:20px;animation:rbxTicker 46s linear infinite;flex-shrink:0}
.rbx-ticker-row span{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;color:rgba(255,255,255,.55)}
.rbx-ticker-row i{color:#DA291C;font-style:normal}
@keyframes rbxTicker{to{transform:translateX(-50%)}}
/* ---- INTRO ---- */
.rbx-intro{padding:72px 0;background:linear-gradient(180deg,#0d0722,#0a0515)}
.rbx-intro-inner{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center}
.rbx-intro-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;color:#fff;line-height:1.14;margin:12px 0 16px}
.rbx-intro-copy>p{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.6);margin:0}
.rbx-intro-stats{display:flex;flex-direction:column;gap:14px}
.rbx-istat{padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.rbx-istat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:800;color:#F2554D;line-height:1}
.rbx-istat span{display:block;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:5px}
/* ---- PORTFOLIO NAV ---- */
.rbx-nav{padding:72px 0;background:linear-gradient(180deg,#0a0515,#0d0722)}
.rbx-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.rbx-nav-card{display:flex;flex-direction:column;padding:28px 24px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);text-decoration:none;transition:transform .3s cubic-bezier(.22,.7,.2,1),border-color .3s,background .3s;position:relative;overflow:hidden}
.rbx-nav-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--nc) 14%,transparent),transparent 70%)}
.rbx-nav-card:hover::before{opacity:1}
.rbx-nav-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--nc) 40%,transparent)}
.rbx-nav-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--nc);background:color-mix(in srgb,var(--nc) 14%,transparent);border:1px solid color-mix(in srgb,var(--nc) 28%,transparent);position:relative;z-index:1}
.rbx-nav-ico svg{width:26px;height:26px}
.rbx-nav-card h3{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#fff;margin:0 0 8px;position:relative;z-index:1}
.rbx-nav-card p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.5);margin:0 0 16px;flex:1;position:relative;z-index:1}
.rbx-nav-link{font-size:13px;font-weight:600;color:var(--nc);position:relative;z-index:1;transition:letter-spacing .25s}
.rbx-nav-card:hover .rbx-nav-link{letter-spacing:.03em}
/* ---- CHAPTER HEADS ---- */
.rbx-chapter-head{padding:80px 0 20px;scroll-margin-top:90px;background:#0a0515}
.rbx-chead-inner{display:flex;align-items:center;gap:28px;padding-bottom:20px;border-bottom:1px solid color-mix(in srgb,var(--cac) 22%,transparent)}
.rbx-chead-num{font-family:'Barlow Condensed',sans-serif;font-size:clamp(56px,10vw,110px);font-weight:800;line-height:.85;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--cac) 55%,transparent);flex-shrink:0}
.rbx-chead-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cac);margin-bottom:10px}
.rbx-chead-copy h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:600;color:#fff;line-height:1.1;margin:0 0 12px}
.rbx-chead-copy p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.55);margin:0;max-width:720px}
/* ---- WHY TELEBRIDGE + PROCESS ---- */
.rbx-why-tb{background:linear-gradient(180deg,#0d0722,#0a0515)}
.rbx-whytb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.rbx-whytb-card{padding:28px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:transform .3s,border-color .3s}
.rbx-whytb-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14)}
.rbx-whytb-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.rbx-whytb-ico svg{width:23px;height:23px}
.rbx-whytb-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}
.rbx-whytb-card p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);margin:0}
.rbx-process{background:linear-gradient(180deg,#0a0515,#0d0722)}
.rbx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.rbx-step{padding:28px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.rbx-step-num{display:block;font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:800;background:linear-gradient(120deg,#8B5CF6,#DA291C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1;margin-bottom:12px}
.rbx-step h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}
.rbx-step p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.5);margin:0}
.rbx-faq-sec{background:linear-gradient(180deg,#0d0722,#0a0515)}
@media(max-width:960px){
.rbx-intro-inner{grid-template-columns:1fr}
.rbx-nav-grid,.rbx-whytb-grid,.rbx-steps{grid-template-columns:repeat(2,1fr)}
.rbx-chead-inner{flex-direction:column;align-items:flex-start;gap:8px}
.rbx-intro-stats{flex-direction:row;flex-wrap:wrap}
.rbx-istat{flex:1;min-width:130px}
}
@media(max-width:560px){ .rbx-nav-grid,.rbx-whytb-grid,.rbx-steps{grid-template-columns:1fr} }
/* ═══════════════ RESIDENTIAL B2C SUITE (rz-*) ═══════════════ */
.rz-h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}
.rz-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#DA291C;margin-bottom:12px}
.rz-lede{font-size:16px;line-height:1.7;color:var(--muted-dark,rgba(20,10,40,.6))}
.rz-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-bottom:12px}
.rz-sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.rz-sec-head .rz-h2{font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--navy,#140a28);margin:0 0 14px}
.rz-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;font-family:inherit}
.rz-btn-sm{padding:12px 22px;font-size:14px}
.rz-btn-primary{background:linear-gradient(120deg,#DA291C,#FF6B4A);color:#fff;box-shadow:0 14px 36px -12px rgba(218,41,28,.55)}
.rz-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(218,41,28,.7)}
.rz-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18)}
.rz-btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.rz-btn-dark{background:var(--navy,#140a28);color:#fff}
.rz-btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(20,10,40,.5)}
/* HERO */
.rz-hero{position:relative;overflow:hidden;padding:150px 0 90px;background:radial-gradient(ellipse at 30% 0%,#1e0d38 0%,#160b2c 45%,#12081f 100%);color:#fff}
.rz-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.rz-hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.rz-hero-blob{position:absolute;border-radius:50%;filter:blur(80px)}
.rz-hb1{top:-15%;right:-8%;width:46%;height:58%;background:radial-gradient(circle,#DA291C,transparent 70%);opacity:.3;animation:rzFloat 20s ease-in-out infinite}
.rz-hb2{bottom:-20%;left:-10%;width:50%;height:60%;background:radial-gradient(circle,#8B5CF6,transparent 70%);opacity:.22;animation:rzFloat 26s ease-in-out infinite reverse}
.rz-hb3{top:40%;left:45%;width:30%;height:30%;background:radial-gradient(circle,#F59E0B,transparent 70%);opacity:.14;animation:rzFloat 30s ease-in-out infinite}
@keyframes rzFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-6%) scale(1.08)}}
.rz-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.rz-hero .breadcrumb{color:rgba(255,255,255,.45);margin-bottom:18px}
.rz-hero .breadcrumb a{color:rgba(255,255,255,.6);text-decoration:none}
.rz-hero-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;border:1px solid rgba(218,41,28,.35);background:rgba(218,41,28,.12);font-size:12.5px;font-weight:600;color:#FF8A84;margin-bottom:22px}
.rz-pill-dot{width:8px;height:8px;border-radius:50%;background:#DA291C;box-shadow:0 0 0 0 rgba(218,41,28,.6);animation:rzPulse 2s infinite}
@keyframes rzPulse{0%{box-shadow:0 0 0 0 rgba(218,41,28,.6)}70%{box-shadow:0 0 0 9px rgba(218,41,28,0)}100%{box-shadow:0 0 0 0 rgba(218,41,28,0)}}
.rz-hero-text h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,5.2vw,4rem);font-weight:600;color:#fff;line-height:1.05;letter-spacing:-.03em;margin:0 0 20px}
.rz-grad{background:linear-gradient(110deg,#FF6B4A,#FFD166);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rz-hero-text>p{font-size:clamp(15px,1.6vw,17.5px);line-height:1.7;color:rgba(255,255,255,.7);max-width:560px;margin:0 0 30px}
.rz-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:28px}
.rz-hero-partner{display:inline-flex;align-items:center;gap:12px;padding:9px 18px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.rz-hero-partner span{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}
.rz-hero-partner img{height:24px;width:auto;background:#fff;border-radius:6px;padding:4px 10px}
.rz-hero-visual{display:flex;justify-content:center;align-items:center}
.rz-home-scene{width:100%;max-width:440px}
.rz-home-scene svg{width:100%;height:auto;overflow:visible}
.rz-orbit{transform-origin:210px 210px}
.rz-orbit-1{animation:rzOrbit 22s linear infinite}
.rz-orbit-2{animation:rzOrbit 26s linear infinite reverse}
.rz-orbit-3{animation:rzOrbit 30s linear infinite}
.rz-orbit-4{animation:rzOrbit 24s linear infinite reverse}
@keyframes rzOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.rz-orbit>g>g{transform-box:fill-box;transform-origin:center}
.rz-orbit-1{animation:rzOrbit 22s linear infinite}
/* TRUST BAR */
.rz-trust-bar{background:#12081f;border-top:1px solid rgba(255,255,255,.06);padding:26px 0}
.rz-trust-inner{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}
.rz-trust-item{text-align:center}
.rz-trust-item b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;background:linear-gradient(120deg,#FF6B4A,#FFD166);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1}
.rz-trust-item span{display:block;font-size:12.5px;color:rgba(255,255,255,.5);margin-top:5px}
/* SUITE */
.rz-suite{background:#fff}
.rz-suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rz-suite-card{display:flex;flex-direction:column;padding:28px 24px;border-radius:18px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));text-decoration:none;transition:transform .3s cubic-bezier(.22,.7,.2,1),border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.rz-suite-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sc);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.rz-suite-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--sc) 40%,transparent);box-shadow:0 20px 44px -20px color-mix(in srgb,var(--sc) 50%,transparent)}
.rz-suite-card:hover::before{transform:scaleX(1)}
.rz-suite-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent)}
.rz-suite-ico svg{width:26px;height:26px}
.rz-suite-card h3{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.rz-suite-card p{font-size:14px;line-height:1.55;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
/* INTERNET PLANS */
.rz-internet{background:#faf9fc}
.rz-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
.rz-plan{position:relative;padding:28px 22px;border-radius:18px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));text-align:center;transition:transform .3s,box-shadow .3s}
.rz-plan:hover{transform:translateY(-5px);box-shadow:0 18px 40px -20px rgba(20,10,40,.3)}
.rz-plan-pop{border-color:#DA291C;box-shadow:0 14px 40px -18px rgba(218,41,28,.4)}
.rz-plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,#DA291C,#FF6B4A);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;white-space:nowrap}
.rz-plan-speed{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:8px}
.rz-plan-speed b{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:800;color:var(--navy,#140a28);line-height:1}
.rz-plan-speed span{font-size:15px;font-weight:600;color:var(--muted-dark,rgba(20,10,40,.5))}
.rz-plan h4{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.rz-plan>p{font-size:13px;line-height:1.5;color:var(--muted-dark,rgba(20,10,40,.55));margin:0 0 16px;min-height:40px}
.rz-plan-price{margin-bottom:16px}
.rz-plan-price b{font-size:30px;font-weight:800;color:var(--navy,#140a28);font-family:'Barlow Condensed',sans-serif}
.rz-plan-price span{font-size:13px;color:var(--muted-dark,rgba(20,10,40,.5))}
.rz-plan-btn{width:100%;padding:11px;border-radius:11px;border:1.5px solid var(--line-dark,rgba(20,10,40,.15));background:#fff;color:var(--navy,#140a28);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .2s;font-family:inherit}
.rz-plan-btn:hover{background:var(--navy,#140a28);color:#fff;border-color:var(--navy,#140a28)}
.rz-plan-btn-pop{background:linear-gradient(120deg,#DA291C,#FF6B4A);color:#fff;border:none}
.rz-plan-btn-pop:hover{filter:brightness(1.08);color:#fff}
.rz-5g{display:grid;grid-template-columns:1.4fr .6fr;gap:32px;align-items:center;padding:36px;border-radius:22px;background:linear-gradient(135deg,#1e0d38,#12081f);color:#fff}
.rz-5g-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFD166;padding:5px 14px;border-radius:100px;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.3);margin-bottom:14px}
.rz-5g-copy h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;color:#fff;margin:0 0 12px}
.rz-5g-copy>p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.7);margin:0 0 20px}
.rz-5g-copy b{color:#FFD166}
.rz-5g-visual{display:flex;justify-content:center}
.rz-5g-visual svg{width:100%;max-width:180px}
/* TV */
.rz-tv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
.rz-tv-card{padding:26px 22px;border-radius:16px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));transition:transform .3s,box-shadow .3s}
.rz-tv-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -20px rgba(20,10,40,.28)}
.rz-tv-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.rz-tv-ico svg{width:23px;height:23px}
.rz-tv-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.rz-tv-card p{font-size:13.5px;line-height:1.55;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
.rz-tv-tiers{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.rz-tvt{flex:1;min-width:150px;padding:18px 20px;border-radius:14px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.1));cursor:pointer;transition:all .2s;text-align:center}
.rz-tvt:hover{border-color:#8B5CF6;transform:translateY(-3px)}
.rz-tvt h5{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#140a28);margin:0 0 5px}
.rz-tvt p{font-size:12.5px;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
/* MOBILE */
.rz-mobile{background:#fff}
.rz-mobile-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-bottom:32px}
.rz-mobile-feats{display:flex;flex-direction:column;gap:20px}
.rz-mfeat{display:flex;gap:16px;align-items:flex-start}
.rz-mfeat-ico{width:46px;height:46px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.rz-mfeat-ico svg{width:23px;height:23px}
.rz-mfeat h4{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;color:var(--navy,#140a28);margin:0 0 5px}
.rz-mfeat p{font-size:14px;line-height:1.55;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
.rz-phone-mock{display:flex;justify-content:center}
.rz-phone-body{width:200px;height:400px;border-radius:36px;background:linear-gradient(160deg,#2a1548,#160b2c);padding:10px;box-shadow:0 40px 80px -30px rgba(20,10,40,.6),inset 0 0 0 2px rgba(255,255,255,.08);position:relative}
.rz-phone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:60px;height:6px;border-radius:4px;background:rgba(255,255,255,.15);z-index:2}
.rz-phone-screen{width:100%;height:100%;border-radius:28px;background:radial-gradient(ellipse at 50% 30%,#2d1a52,#160b2c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.rz-phone-signal{position:absolute;top:20px;right:24px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#fff}
.rz-sig-bars{display:inline-flex;align-items:flex-end;gap:2px}
.rz-sig-bars i{width:3px;background:#fff;border-radius:1px}
.rz-sig-bars i:nth-child(1){height:4px}.rz-sig-bars i:nth-child(2){height:7px}.rz-sig-bars i:nth-child(3){height:10px}.rz-sig-bars i:nth-child(4){height:13px}
.rz-phone-glyph{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#DA291C,#FF6B4A);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(218,41,28,.6)}
.rz-phone-glyph svg{width:38px;height:38px}
.rz-phone-label{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#fff}
.rz-phone-sub{font-size:12.5px;color:rgba(255,255,255,.5)}
.rz-mobile-cta{text-align:center}
/* SECURITY */
.rz-sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.rz-sec-card{padding:26px 22px;border-radius:16px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));transition:transform .3s,box-shadow .3s}
.rz-sec-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -20px rgba(34,197,94,.3)}
.rz-sec-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.rz-sec-ico svg{width:23px;height:23px}
.rz-sec-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.rz-sec-card p{font-size:13.5px;line-height:1.55;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
.rz-sec-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px 36px;border-radius:20px;background:linear-gradient(120deg,#0d2818,#12081f);color:#fff}
.rz-sec-banner-copy h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;color:#fff;margin:0 0 8px}
.rz-sec-banner-copy p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7);margin:0;max-width:560px}
/* SMART HOME */
.rz-smart{background:#fff}
.rz-smart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rz-smart-tile{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:16px;background:#faf9fc;border:1.5px solid var(--line-dark,rgba(20,10,40,.08));transition:transform .3s,border-color .3s}
.rz-smart-tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.rz-smart-ico{width:48px;height:48px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.rz-smart-ico svg{width:24px;height:24px}
.rz-smart-tile h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#140a28);margin:0 0 4px}
.rz-smart-tile p{font-size:13px;line-height:1.5;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
/* HOME PHONE */
.rz-phone-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.rz-phone-copy .rz-h2{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--navy,#140a28);margin:0 0 14px}
.rz-phone-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
.rz-phone-list li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--navy,#140a28);font-weight:500}
.rz-phone-list li svg{width:19px;height:19px;flex-shrink:0}
.rz-phone-illus{display:flex;justify-content:center}
.rz-phone-illus svg{width:100%;max-width:240px}
/* BUNDLE */
.rz-bundle{background:#12081f}
.rz-bundle-inner{position:relative;text-align:center;max-width:820px;margin:0 auto;padding:56px 40px;border-radius:26px;background:linear-gradient(150deg,#1e0d38,#12081f);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.rz-bundle-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(circle,rgba(218,41,28,.25),transparent 65%);filter:blur(40px);pointer-events:none}
.rz-bundle-inner>*{position:relative;z-index:1}
.rz-bundle-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFD166;padding:6px 16px;border-radius:100px;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.3);margin-bottom:18px}
.rz-bundle-inner .rz-h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:0 0 14px}
.rz-bundle-inner .rz-lede{margin:0 auto 28px;max-width:600px}
.rz-bundle-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.rz-bundle-row>span{color:rgba(255,255,255,.4);font-size:18px;font-weight:600}
.rz-bundle-chip{padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600}
.rz-bundle-save{padding:10px 22px;border-radius:100px;background:linear-gradient(120deg,#DA291C,#FF6B4A);color:#fff;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.rz-bundle-save b{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800}
.rz-bundle-save span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.rz-bundle-promise{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin-bottom:32px}
.rz-promise b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:#FFD166;line-height:1}
.rz-promise span{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:5px}
/* WHY */
.rz-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rz-why-card{padding:28px 22px;border-radius:16px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));transition:transform .3s,box-shadow .3s}
.rz-why-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -20px rgba(20,10,40,.28)}
.rz-why-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.rz-why-ico svg{width:23px;height:23px}
.rz-why-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.rz-why-card p{font-size:13.5px;line-height:1.6;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
.rz-faq-sec{background:#fff}
@media(max-width:960px){
.rz-hero-inner,.rz-mobile-inner,.rz-phone-inner{grid-template-columns:1fr}
.rz-hero-visual{order:-1}
.rz-suite-grid,.rz-smart-grid{grid-template-columns:repeat(2,1fr)}
.rz-plan-grid,.rz-tv-grid,.rz-sec-grid,.rz-why-grid{grid-template-columns:repeat(2,1fr)}
.rz-5g,.rz-mobile-inner{grid-template-columns:1fr}
.rz-5g-visual,.rz-phone-mock{margin-top:10px}
}
@media(max-width:560px){
.rz-suite-grid,.rz-smart-grid,.rz-plan-grid,.rz-tv-grid,.rz-sec-grid,.rz-why-grid{grid-template-columns:1fr}
.rz-bundle-row{flex-direction:column}
}
/* ═══════════════ RESIDENTIAL INTERNET SUBPAGE (ri-*) ═══════════════ */
.ri-h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}
.ri-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac,#DA291C);margin-bottom:12px}
.ri-lede{font-size:16px;line-height:1.7;color:var(--muted-dark,rgba(20,10,40,.6))}
.ri-sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.ri-sec-head.center{text-align:center}
.ri-sec-head:not(.center){text-align:left;margin-left:0}
.ri-sec-head .ri-h2{font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--navy,#140a28);margin:0 0 14px}
.ri-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;font-family:inherit}
.ri-btn-primary{background:linear-gradient(120deg,#DA291C,#FF6B4A);color:#fff;box-shadow:0 14px 36px -12px rgba(218,41,28,.55)}
.ri-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(218,41,28,.7)}
.ri-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2)}
.ri-btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.ri-btn-white{background:#fff;color:#140a28;box-shadow:0 14px 36px -12px rgba(0,0,0,.4)}
.ri-btn-white:hover{transform:translateY(-2px);background:#f4f1fa}
.ri-btn-ghost-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.ri-btn-ghost-w:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
/* HERO */
/* HERO — editorial grid frame over animated blue light-blades */
.ri-hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:110px 0 70px;background:#000005;color:#fff}
.ri-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ri-photo-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,rgba(44,146,244,.06),transparent 60%)}
.ri-photo-scrim::before{content:'';display:none}
.ri-photo-scrim::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 100%,rgba(0,0,0,.5),transparent 55%);pointer-events:none}
.ri-hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1}
/* film-grain overlay for the moody texture in the reference */
.ri-hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
.ri-hero-blob{display:none}
.ri-hero-gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(87,142,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(87,142,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 78%)}
.ri-frame{position:relative;z-index:2}
.ri-frame-inner{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr auto;gap:0;min-height:74vh;border:1px solid rgba(87,142,255,.16);border-radius:20px;padding:0;background:linear-gradient(160deg,rgba(44,146,244,.04),rgba(0,0,20,.28));backdrop-filter:blur(2px)}
/* subtle corner ticks */
.ri-frame-inner::before,.ri-frame-inner::after{content:'';position:absolute;width:14px;height:14px;border-color:rgba(87,142,255,.55);border-style:solid}
.ri-frame-inner::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-top-left-radius:6px}
.ri-frame-inner::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-bottom-right-radius:6px}
.ri-cell{position:relative;padding:22px 26px}
.ri-cell-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(112,180,255,.75);margin-bottom:7px}
.ri-cell-value{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.01em}
/* top row */
.ri-tl{grid-column:1;grid-row:1;border-bottom:1px solid rgba(87,142,255,.1)}
.ri-tc{grid-column:2;grid-row:1;text-align:center;border-bottom:1px solid rgba(87,142,255,.1);border-left:1px solid rgba(87,142,255,.08);border-right:1px solid rgba(87,142,255,.08)}
.ri-tr{grid-column:3;grid-row:1;text-align:right;border-bottom:1px solid rgba(87,142,255,.1)}
.ri-tr-logo{height:26px;width:auto;background:#fff;border-radius:6px;padding:4px 10px;margin-top:2px}
/* center main spans all 3 cols */
.ri-main{grid-column:1 / 4;grid-row:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:44px 26px}
.ri-main .breadcrumb{color:rgba(255,255,255,.5);margin-bottom:18px;font-size:12.5px}
.ri-main .breadcrumb a{color:rgba(255,255,255,.65);text-decoration:none}
.ri-main h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:600;color:#fff;line-height:1.03;letter-spacing:-.035em;margin:0 0 20px;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.ri-grad{background:linear-gradient(115deg,#57a0ff,#70cfff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ri-main>p{font-size:clamp(15px,1.6vw,17.5px);line-height:1.7;color:rgba(255,255,255,.74);max-width:620px;margin:0 auto 26px;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.ri-hero-stat{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:28px;padding:14px 30px;border-radius:16px;background:rgba(44,146,244,.1);border:1px solid rgba(87,142,255,.28);backdrop-filter:blur(6px)}
.ri-hero-stat-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ri-hero-stat-value{display:flex;align-items:baseline;gap:6px}
.ri-hero-stat-value b{font-family:'Barlow Condensed',sans-serif;font-size:56px;font-weight:800;background:linear-gradient(115deg,#57a0ff,#70cfff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:.9}
.ri-hero-stat-value span{font-size:20px;font-weight:600;color:rgba(255,255,255,.72)}
.ri-hero-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center}
.ri-btn-frame{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(87,142,255,.32);backdrop-filter:blur(6px)}
.ri-btn-frame:hover{background:rgba(44,146,244,.16);transform:translateY(-2px)}
/* center logo mark */
.ri-mark{position:absolute;top:14px;left:50%;transform:translateX(-50%);grid-row:1;padding:0;z-index:3;pointer-events:none;display:none}
.ri-mark-logo{height:22px;width:auto;opacity:.5}
/* bottom row */
.ri-bl{grid-column:1;grid-row:3;border-top:1px solid rgba(87,142,255,.1)}
.ri-bl-stat{font-size:13px;color:rgba(255,255,255,.85);font-weight:500;margin-bottom:9px}
.ri-bl-stat b{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;background:linear-gradient(115deg,#57a0ff,#70cfff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-right:4px}
.ri-progress{height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:7px;max-width:220px}
.ri-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#2c92f4,#70cfff);width:0;animation:riProg 2.4s cubic-bezier(.22,.7,.2,1) forwards .3s}
@keyframes riProg{to{width:92%}}
.ri-bl-sub{font-size:11px;color:rgba(255,255,255,.42)}
.ri-br{grid-column:2 / 4;grid-row:3;border-top:1px solid rgba(87,142,255,.1);border-left:1px solid rgba(87,142,255,.08);display:flex;align-items:center;justify-content:flex-end}
.ri-br-badges{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end}
.ri-br-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.78)}
.ri-br-badge svg{width:16px;height:16px;color:#70cfff;flex-shrink:0}
.ri-scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(87,142,255,.32);border-radius:13px;z-index:3;display:flex;justify-content:center;padding-top:6px}
.ri-scroll-cue span{width:4px;height:7px;border-radius:2px;background:rgba(112,180,255,.65);animation:rbxScroll 1.8s infinite}
/* LOGOS */
.ri-logos{background:#12081f;padding:22px 0;border-top:1px solid rgba(255,255,255,.06)}
.ri-logos-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.ri-logos-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}
.ri-logos-img{height:28px;width:auto;background:#fff;border-radius:6px;padding:4px 12px}
.ri-logos-sep{width:1px;height:24px;background:rgba(255,255,255,.15)}
.ri-logos-tag{font-size:12.5px;color:rgba(255,255,255,.55)}
/* PHOTO ADS */
.ri-photo{padding:0;background:#fff}
.ri-photo-hero{padding:56px 0}
.ri-photo-block{position:relative;height:430px;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#2a1548,#160b2c);display:flex;align-items:center;border:1px solid rgba(255,255,255,.06)}
.ri-photo-block::before{content:attr(data-ph);position:absolute;top:16px;left:16px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);padding:6px 12px;border-radius:8px;z-index:2}
.ri-photo-block::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(218,41,28,.25),transparent 60%),radial-gradient(circle at 20% 80%,rgba(139,92,246,.2),transparent 60%)}
.ri-photo-overlay{position:relative;z-index:2;padding:44px 48px;max-width:600px}.ri-photo-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}.ri-photo-logo{height:26px;width:auto;background:#fff;border-radius:6px;padding:4px 11px}.ri-photo-points{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}.ri-photo-points li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.9)}.ri-photo-points li svg{width:16px;height:16px;color:#70cfff;flex-shrink:0}
.ri-photo-overlay .ri-photo-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFD166;margin-bottom:0}
.ri-photo-overlay h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:600;color:#fff;margin:0 0 12px;line-height:1.12}
.ri-photo-overlay p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);margin:0}
.ri-photo-split{padding:56px 0}
.ri-photo-split-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.ri-photo-block-sm{height:340px;border-radius:22px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1e0d38,#12081f);border:1px solid rgba(255,255,255,.06)}
.ri-photo-block-sm::before{content:attr(data-ph);position:absolute;top:16px;left:16px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);padding:6px 12px;border-radius:8px;z-index:2}
.ri-photo-block-sm::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(218,41,28,.2),transparent 65%)}
.ri-photo-copy .ri-kicker{color:#DA291C}
.ri-photo-copy h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;color:var(--navy,#140a28);margin:0 0 12px}
.ri-photo-copy>p{font-size:15px;line-height:1.7;color:var(--muted-dark,rgba(20,10,40,.6));margin:0 0 18px}
.ri-photo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ri-photo-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--navy,#140a28);font-weight:500}
.ri-photo-list li svg{width:18px;height:18px;flex-shrink:0}
/* PLANS */
/* PLANS — branded textured background + enhanced cards */
.ri-plans{position:relative;overflow:hidden;background:linear-gradient(180deg,#eae4f6 0%,#e2daf1 100%)}
.ri-plans::before{content:'';position:absolute;top:-10%;left:-6%;width:44%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(184,102,255,.12),transparent 70%);filter:blur(50px);pointer-events:none}
.ri-plans::after{content:'';position:absolute;bottom:-14%;right:-8%;width:48%;height:62%;border-radius:50%;background:radial-gradient(circle,rgba(28,10,74,.08),transparent 70%);filter:blur(50px);pointer-events:none}
.ri-plans .wrap{position:relative;z-index:1}
.ri-plans .wrap::before{content:'';position:absolute;inset:-40px 0;background-image:linear-gradient(rgba(184,102,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(184,102,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 80%);pointer-events:none;z-index:-1}
.ri-plan-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
.ri-plan{position:relative;padding:26px 18px 24px;border-radius:20px;background:linear-gradient(170deg,#ffffff,#fbf9ff);border:1.5px solid rgba(184,102,255,.14);text-align:center;transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s,border-color .35s;overflow:hidden;box-shadow:0 4px 20px -12px rgba(28,10,74,.18)}
/* glowing top accent bar that fills on hover */
.ri-plan::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#B866FF,#B1A6FF);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.7,.2,1)}
.ri-plan:hover::before{transform:scaleX(1)}
/* diagonal shine sweep on hover (matches home cards) */
.ri-plan::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(184,102,255,.1) 50%,transparent 60%);background-size:250% 100%;background-position:200% 0;transition:background-position 0s}
.ri-plan:hover::after{background-position:-50% 0;transition:background-position .85s ease}
.ri-plan:hover{transform:translateY(-8px);border-color:rgba(184,102,255,.4);box-shadow:0 26px 50px -22px rgba(184,102,255,.5)}
.ri-plan>*{position:relative;z-index:1}
.ri-plan-pop{background:linear-gradient(170deg,#ffffff,#f6f0ff);border-color:#B866FF;box-shadow:0 18px 46px -18px rgba(184,102,255,.55);transform:translateY(-6px)}
.ri-plan-pop::before{transform:scaleX(1)}
.ri-plan-pop:hover{transform:translateY(-12px)}
.ri-plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,#B866FF,#8B45E0);color:#fff;font-size:10.5px;font-weight:700;padding:4px 14px;border-radius:100px;white-space:nowrap;z-index:2;box-shadow:0 6px 16px -6px rgba(184,102,255,.6)}
.ri-plan-name{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--navy,#1C0A4A);margin-bottom:8px}
.ri-plan-speed{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-bottom:6px}
.ri-plan-speed b{font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:800;background:linear-gradient(135deg,#1C0A4A,#6C3BD6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1}
.ri-plan-pop .ri-plan-speed b{background:linear-gradient(135deg,#B866FF,#6C3BD6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ri-plan-speed span{font-size:13px;font-weight:600;color:var(--muted-dark,rgba(28,10,74,.5))}
/* animated speed meter bar under the speed */
.ri-plan-meter{height:4px;border-radius:2px;background:rgba(184,102,255,.12);overflow:hidden;margin:0 auto 12px;max-width:90px}
.ri-plan-meter i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#B866FF,#B1A6FF);width:0;transition:width 1s cubic-bezier(.22,.7,.2,1)}
.ri-plan:hover .ri-plan-meter i,.ri-plan-pop .ri-plan-meter i{width:var(--mtr,60%)}
.ri-plan-for{font-size:12px;line-height:1.4;color:var(--muted-dark,rgba(28,10,74,.55));margin:0 0 12px;min-height:34px}
.ri-plan-price b{font-size:28px;font-weight:800;color:var(--navy,#1C0A4A);font-family:'Barlow Condensed',sans-serif}
.ri-plan-price span{font-size:12px;color:var(--muted-dark,rgba(28,10,74,.5))}
.ri-plan-reg{font-size:11px;color:var(--muted-dark,rgba(28,10,74,.4));text-decoration:line-through;margin-bottom:14px}
.ri-plan-list{list-style:none;padding:0;margin:0 0 16px;text-align:left;display:flex;flex-direction:column;gap:6px}
.ri-plan-list li{font-size:11.5px;color:var(--muted-dark,rgba(28,10,74,.62));padding-left:16px;position:relative}
.ri-plan-list li::before{content:'✓';position:absolute;left:0;color:#B866FF;font-weight:700}
.ri-plan-btn{width:100%;padding:11px;border-radius:11px;border:1.5px solid rgba(184,102,255,.28);background:#fff;color:var(--navy,#1C0A4A);font-weight:600;font-size:13px;cursor:pointer;transition:all .25s;font-family:inherit}
.ri-plan-btn:hover{background:var(--navy,#1C0A4A);color:#fff;border-color:var(--navy,#1C0A4A);transform:translateY(-1px)}
.ri-plan-btn-pop{background:linear-gradient(120deg,#B866FF,#8B45E0);color:#fff;border:none;box-shadow:0 8px 22px -8px rgba(184,102,255,.6)}
.ri-plan-btn-pop:hover{filter:brightness(1.08);color:#fff}
.ri-plan-note{font-size:12.5px;color:var(--muted-dark,rgba(28,10,74,.5));text-align:center;max-width:760px;margin:0 auto;line-height:1.6}
.ri-plan-note b{color:var(--navy,#1C0A4A)}
/* 5G */
.ri-5g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px;max-width:840px;margin-left:auto;margin-right:auto}
.ri-5g-plan{position:relative;padding:28px 24px;border-radius:18px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));text-align:center;transition:transform .3s,box-shadow .3s}
.ri-5g-plan:hover{transform:translateY(-5px);box-shadow:0 18px 40px -20px rgba(245,158,11,.3)}
.ri-5g-pop{border-color:#F59E0B;box-shadow:0 14px 40px -18px rgba(245,158,11,.4)}
.ri-5g-pop .ri-plan-tag{background:linear-gradient(120deg,#F59E0B,#FCD34D);color:#7a4a00}
.ri-5g-name{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--navy,#140a28);margin-bottom:8px}
.ri-5g-price{margin-bottom:16px}
.ri-5g-price b{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;color:var(--navy,#140a28)}
.ri-5g-price span{font-size:14px;color:var(--muted-dark,rgba(20,10,40,.5))}
.ri-5g-list{list-style:none;padding:0;margin:0 0 18px;text-align:left;display:flex;flex-direction:column;gap:8px}
.ri-5g-list li{font-size:13px;color:var(--muted-dark,rgba(20,10,40,.6));padding-left:18px;position:relative}
.ri-5g-list li::before{content:'✓';position:absolute;left:0;color:#F59E0B;font-weight:700}
.ri-5g-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;max-width:820px;margin:0 auto}
.ri-compare-card{padding:26px;border-radius:18px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09))}
.ri-compare-card h4{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--navy,#140a28);margin:0 0 14px}
.ri-compare-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ri-compare-card li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted-dark,rgba(20,10,40,.65))}
.ri-compare-card li svg{width:16px;height:16px;flex-shrink:0}
.ri-compare-vs{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;color:var(--muted-dark,rgba(20,10,40,.3))}
/* FEATURES */
.ri-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ri-feat{padding:28px 24px;border-radius:16px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09));transition:transform .3s,box-shadow .3s}
.ri-feat:hover{transform:translateY(-4px);box-shadow:0 16px 36px -20px rgba(20,10,40,.28)}
.ri-feat-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.ri-feat-ico svg{width:24px;height:24px}
.ri-feat h4{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.ri-feat p{font-size:13.5px;line-height:1.6;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
/* BUNDLE */
.ri-bundle{background:#12081f}
.ri-bundle-inner{position:relative;text-align:center;max-width:820px;margin:0 auto;padding:52px 40px;border-radius:26px;background:linear-gradient(150deg,#1e0d38,#12081f);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.ri-bundle-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(circle,rgba(218,41,28,.25),transparent 65%);filter:blur(40px);pointer-events:none}
.ri-bundle-inner>*{position:relative;z-index:1}
.ri-bundle-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFD166;padding:6px 16px;border-radius:100px;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.3);margin-bottom:18px}
.ri-bundle-inner .ri-h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 14px}
.ri-bundle-inner .ri-lede{margin:0 auto 28px;max-width:580px}
.ri-bundle-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.ri-bundle-chip{padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.ri-bundle-chip:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.ri-bundle-eq{color:rgba(255,255,255,.4);font-size:13px;font-weight:600}
.ri-bundle-save{padding:10px 22px;border-radius:100px;background:linear-gradient(120deg,#DA291C,#FF6B4A);color:#fff;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.ri-bundle-save b{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800}
.ri-bundle-save span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
/* HOW */
.ri-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ri-step{padding:28px 22px;border-radius:16px;background:#fff;border:1.5px solid var(--line-dark,rgba(20,10,40,.09))}
.ri-step-num{display:block;font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:800;background:linear-gradient(120deg,#DA291C,#FF6B4A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1;margin-bottom:12px}
.ri-step h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#140a28);margin:0 0 8px}
.ri-step p{font-size:13.5px;line-height:1.6;color:var(--muted-dark,rgba(20,10,40,.55));margin:0}
.ri-faq-sec{background:#ece6f7}
/* CTA */
.ri-cta{background:#e6def2}
.ri-cta-inner{position:relative;text-align:center;max-width:760px;margin:0 auto;padding:52px 40px;border-radius:26px;background:linear-gradient(135deg,#DA291C,#8B1a10);overflow:hidden}
.ri-cta-inner .ri-h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 14px}
.ri-cta-inner .ri-lede{margin:0 auto 26px;max-width:520px}
.ri-cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
@media(max-width:960px){
.ri-frame-inner{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto}
.ri-tl{grid-column:1;grid-row:1}
.ri-tc{grid-column:2;grid-row:1;text-align:left;border-left:none;border-right:none}
.ri-tr{grid-column:1 / 3;grid-row:2;text-align:left;border-bottom:1px solid rgba(184,102,255,.12)}
.ri-main{grid-column:1 / 3;grid-row:3;padding:36px 22px}
.ri-main h1{font-size:clamp(2rem,8vw,3rem)}
.ri-bl{grid-column:1 / 3;grid-row:4}
.ri-br{grid-column:1 / 3;grid-row:5;border-left:none;justify-content:flex-start}
.ri-br-badges{justify-content:flex-start}
.ri-plan-grid{grid-template-columns:repeat(2,1fr)}
.ri-5g-grid,.ri-feat-grid{grid-template-columns:repeat(2,1fr)}
.ri-photo-split-inner{grid-template-columns:1fr}
.ri-5g-compare{grid-template-columns:1fr}
.ri-compare-vs{transform:rotate(90deg);justify-self:center}
.ri-steps{grid-template-columns:repeat(2,1fr)}
.ri-sec-head:not(.center){text-align:center}
}
@media(max-width:560px){
.ri-plan-grid,.ri-5g-grid,.ri-feat-grid,.ri-steps{grid-template-columns:1fr}
.ri-bundle-row{flex-direction:column}
}
/* ═══ RESIDENTIAL NAV DROPDOWN (mega-res) ═══ */
.hdr-res-nav{position:relative}
.hdr-res-nav > a{display:inline-flex;align-items:center;gap:5px}
/* Override the base .mega-v2 900px width + right-align so it doesn't overflow the viewport edge */
header#header.hdr-minimal .mega.mega-v2.mega-res,
header#header .hdr-bar .mega.mega-v2.mega-res{
width:380px!important;min-width:380px!important;
left:auto!important;right:0!important;
transform-origin:top right;
padding:14px!important;
/* right-aligned: must NOT inherit translateX(-50%) or it jumps sideways */
transform:translateY(6px)!important;
}
/* shown state for the right-aligned Residential dropdown (no translateX) */
header#header.hdr-minimal .nav-item.has-mega:hover > .mega.mega-res,
header#header .hdr-bar .nav-item.has-mega:hover > .mega.mega-res,
header#header .hdr-bar .nav-item.has-mega > .mega.mega-res:hover{
transform:translateY(0)!important;
}
.mv2-res-grid{display:flex;flex-direction:column;gap:2px}
.mega-res .mv2-link{border-radius:12px}
.mv2-res-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:12px;border-radius:12px;background:rgba(218,41,28,.1);border:1px solid rgba(218,41,28,.22);color:#FF8A84;font-size:13.5px;font-weight:600;text-decoration:none;transition:background .2s,gap .2s}
.mv2-res-foot:hover{background:rgba(218,41,28,.16);gap:11px}
.mv2-res-foot svg{width:15px;height:15px}
@media(max-width:1100px){
.hdr-res-nav{display:none}
}
/* ── Filled photo blocks (real images) ── */
.ri-photo-block.ri-photo-filled{background:#160b33}
.ri-photo-block.ri-photo-filled::before,.ri-photo-block-sm.ri-photo-filled::before{display:none!important}
.ri-photo-block.ri-photo-filled::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,8,42,.92) 0%,rgba(20,8,42,.78) 40%,rgba(20,8,42,.35) 62%,rgba(20,8,42,.05) 82%,transparent 100%)}
.ri-photo-img{position:absolute;inset:0;z-index:0}
.ri-photo-img img{width:100%;height:100%;object-fit:cover;display:block}
.ri-photo-block.ri-photo-filled .ri-photo-overlay{position:relative;z-index:2}
.ri-photo-block-sm.ri-photo-filled{overflow:hidden}
.ri-photo-block-sm.ri-photo-filled::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(20,8,42,.25) 100%);pointer-events:none}
/* ── Internet page: darker lavender-tinted section backgrounds ── */
.ri-5g.sec-tint{background:#ece6f7!important}
.ri-how.sec-tint{background:#e6def2!important}
.ri-features{background:#f0eaf9}
.ri-photo{background:#f0eaf9}
.ri-photo-hero{background:#ece6f7}
.ri-photo-split{background:#f0eaf9}
/* ═══════════════════════════════════════════════════════════
DROPDOWN HOVER FIX — invisible bridge + grace-period close
Solves the cat-and-mouse: the cursor can travel from the nav
button down into the dropdown across the gap without the menu
closing. Uses a transparent .mega::before bridge (no visual
change) + a small close delay for forgiveness.
═══════════════════════════════════════════════════════════ */
/* Transparent hover BRIDGE: fills the gap between the button and the
floating panel so the cursor never leaves the combined hover region.
Extends from above the panel top down into the panel; sits behind
content and is only active while the item/panel is hovered. */
header#header .hdr-bar .nav-item.has-mega > .mega::before,
header#header.hdr-minimal .nav-item.has-mega > .mega::before{
content:'' !important;
position:absolute !important;
left:0 !important; right:0 !important;
top:-22px !important; /* reach up to overlap the button */
height:30px !important; /* cover the 10px gap + margin */
background:transparent !important;
z-index:0 !important;
pointer-events:auto !important;
}
/* GRACE PERIOD: delay the hide so a brief cursor slip off the edge or a
diagonal move doesn't instantly dismiss the menu. Opens instantly. */
header#header .hdr-bar .nav-item.has-mega > .mega,
header#header.hdr-minimal .nav-item.has-mega > .mega{
transition: opacity .22s ease .16s, transform .22s ease .16s !important;
}
header#header .hdr-bar .nav-item.has-mega:hover > .mega,
header#header.hdr-minimal .nav-item.has-mega:hover > .mega{
transition: opacity .16s ease 0s, transform .16s ease 0s !important;
}
/* While the panel itself is hovered, keep it open with no delay (belt & braces).
NOTE: do NOT set transform here — each dropdown has its own correct transform
(centered ones use translateX(-50%); the right-aligned Residential menu does not).
Overriding it caused a sideways jump. */
header#header .hdr-bar .nav-item.has-mega > .mega:hover,
header#header.hdr-minimal .nav-item.has-mega > .mega:hover{
opacity:1 !important; pointer-events:auto !important;
transition: opacity .16s ease 0s !important;
}
/* ═══════════════════════════════════════════════════════════
RESIDENTIAL TV SUBPAGE (tv-*) — cinematic magenta/purple
═══════════════════════════════════════════════════════════ */
.tv-h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}
.tv-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac,#EC4899);margin-bottom:12px}
.tv-lede{font-size:16px;line-height:1.7;color:var(--muted-dark,rgba(28,10,44,.62))}
.tv-sec-head{max-width:720px;margin:0 auto 44px}
.tv-sec-head.center{text-align:center}
.tv-sec-head .tv-h2{font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--navy,#1a0a2e);margin:0 0 14px}
/* buttons */
.tv-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;font-family:inherit}
.tv-btn svg{flex-shrink:0}
.tv-btn-primary{background:linear-gradient(120deg,#EC4899,#A855F7);color:#fff;box-shadow:0 14px 36px -12px rgba(236,72,153,.6)}
.tv-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(168,85,247,.7)}
.tv-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(236,72,153,.35);backdrop-filter:blur(6px)}
.tv-btn-ghost:hover{background:rgba(236,72,153,.16);transform:translateY(-2px)}
.tv-btn-gold{background:linear-gradient(120deg,#F59E0B,#FCD34D);color:#5a3a00;box-shadow:0 14px 36px -12px rgba(245,158,11,.6)}
.tv-btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(245,158,11,.75)}
.tv-btn-white{background:#fff;color:#1a0a2e;box-shadow:0 14px 36px -12px rgba(0,0,0,.4)}
.tv-btn-white:hover{transform:translateY(-2px);background:#f7f0fb}
.tv-btn-ghost-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.tv-btn-ghost-w:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
/* HERO */
.tv-hero{position:relative;overflow:hidden;min-height:auto;display:flex;align-items:center;padding:92px 0 64px;background:radial-gradient(ellipse at 70% 10%,#2e0f3f 0%,#1a0a2e 45%,#0f0620 100%);color:#fff}
.tv-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.tv-hero-photo{position:absolute;inset:0;background:linear-gradient(120deg,#241040,#160a2c);opacity:.5}
.tv-hero-photo::before{content:attr(data-ph);position:absolute;top:16px;left:16px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.18);padding:5px 11px;border-radius:8px;z-index:2}
.tv-hero-photo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 75% 35%,rgba(236,72,153,.18),transparent 55%),radial-gradient(ellipse at 20% 90%,rgba(15,6,32,.6),transparent 60%)}
.tv-hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.tv-hero-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.tv-hg1{top:-12%;right:-6%;width:44%;height:56%;background:radial-gradient(circle,#EC4899,transparent 70%);opacity:.3;animation:rzFloat 20s ease-in-out infinite}
.tv-hg2{bottom:-16%;left:-8%;width:46%;height:58%;background:radial-gradient(circle,#A855F7,transparent 70%);opacity:.26;animation:rzFloat 26s ease-in-out infinite reverse}
.tv-hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
.tv-hero-inner{position:relative;z-index:2}
.tv-hero-text{max-width:760px}
.tv-hero .breadcrumb{color:rgba(255,255,255,.5);margin-bottom:18px;font-size:12.5px}
.tv-hero .breadcrumb a{color:rgba(255,255,255,.65);text-decoration:none}
.tv-hero-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;border:1px solid rgba(236,72,153,.35);background:rgba(236,72,153,.12);font-size:12.5px;font-weight:600;color:#F9A8D4;margin-bottom:22px}
.tv-pill-dot{width:8px;height:8px;border-radius:50%;background:#EC4899;box-shadow:0 0 10px #EC4899;animation:rzPulse 2s infinite}
.tv-hero-text h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.4rem,6vw,4.6rem);font-weight:600;color:#fff;line-height:1.04;letter-spacing:-.035em;margin:0 0 22px;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.tv-grad{background:linear-gradient(110deg,#EC4899,#C084FC,#818CF8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tv-hero-text>p{font-size:clamp(15px,1.7vw,18px);line-height:1.7;color:rgba(255,255,255,.76);max-width:600px;margin:0 0 30px;text-shadow:0 1px 20px rgba(0,0,0,.4)}
.tv-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:34px}
.tv-hero-apps{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tv-apps-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tv-apps-row{display:flex;gap:10px;flex-wrap:wrap}
.tv-app-chip{position:relative;display:inline-flex;align-items:center;padding:8px 18px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:600;color:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.tv-app-chip::after{content:attr(data-ph);position:absolute;bottom:calc(100% + 4px);left:0;font-size:8.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(236,72,153,.5);white-space:nowrap;opacity:0;transition:opacity .2s}
.tv-app-chip:hover::after{opacity:1}
.tv-scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(236,72,153,.35);border-radius:13px;z-index:3;display:flex;justify-content:center;padding-top:6px}
.tv-scroll-cue span{width:4px;height:7px;border-radius:2px;background:rgba(236,72,153,.7);animation:rbxScroll 1.8s infinite}
/* LOGOS */
.tv-logos{background:#0f0620;padding:22px 0;border-top:1px solid rgba(255,255,255,.06)}
.tv-logos-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.tv-logos-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}
.tv-logos-img{height:28px;width:auto;background:#fff;border-radius:6px;padding:4px 12px}
.tv-logos-sep{width:1px;height:24px;background:rgba(255,255,255,.15)}
.tv-logos-tag{font-size:12.5px;color:rgba(255,255,255,.55)}
/* SHOWCASE image ad */
.tv-showcase{background:#0f0620;padding:56px 0}
.tv-showcase-block{position:relative;height:480px;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,#2a1145,#160a2c);display:flex;align-items:flex-end;border:1px solid rgba(236,72,153,.12)}
.tv-showcase-block::before{content:attr(data-ph);position:absolute;top:18px;left:18px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);padding:6px 12px;border-radius:8px;z-index:3}
.tv-showcase-block::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,6,32,.92) 0%,rgba(15,6,32,.4) 45%,transparent 75%),radial-gradient(ellipse at 75% 25%,rgba(236,72,153,.2),transparent 60%);z-index:1}
.tv-showcase-overlay{position:relative;z-index:2;padding:44px 48px;max-width:640px}
.tv-sc-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#F9A8D4;margin-bottom:10px}
.tv-showcase-overlay h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;color:#fff;margin:0 0 12px;line-height:1.1}
.tv-showcase-overlay>p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.8);margin:0 0 22px}
.tv-sc-stats{display:flex;gap:32px;flex-wrap:wrap}
.tv-sc-stat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:800;background:linear-gradient(120deg,#EC4899,#C084FC);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1}
.tv-sc-stat span{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:3px}
/* PLANS */
.tv-plans{position:relative;overflow:hidden;background:linear-gradient(180deg,#f3ebfa 0%,#ece0f6 100%)}
.tv-plans::before{content:'';position:absolute;top:-10%;right:-6%;width:44%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.1),transparent 70%);filter:blur(50px);pointer-events:none}
.tv-plans::after{content:'';position:absolute;bottom:-14%;left:-8%;width:46%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.1),transparent 70%);filter:blur(50px);pointer-events:none}
.tv-plans .wrap{position:relative;z-index:1}
.tv-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px;align-items:start}
.tv-plan{position:relative;border-radius:22px;background:linear-gradient(170deg,#fff,#faf4ff);border:1.5px solid rgba(168,85,247,.16);overflow:hidden;transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s,border-color .35s;box-shadow:0 6px 24px -14px rgba(26,10,46,.28)}
.tv-plan:hover{transform:translateY(-8px);border-color:rgba(236,72,153,.4);box-shadow:0 30px 56px -22px rgba(168,85,247,.5)}
.tv-plan-pop{border-color:#EC4899;box-shadow:0 20px 50px -20px rgba(236,72,153,.5);transform:translateY(-6px)}
.tv-plan-pop:hover{transform:translateY(-12px)}
.tv-plan-flag{position:absolute;top:16px;right:16px;z-index:3;background:linear-gradient(120deg,#EC4899,#A855F7);color:#fff;font-size:10.5px;font-weight:700;padding:5px 13px;border-radius:100px;box-shadow:0 6px 16px -6px rgba(236,72,153,.6)}
.tv-plan-art{position:relative;height:170px;background:linear-gradient(135deg,#2a1145,#3d1a5c);overflow:hidden}
.tv-plan-art::before{content:attr(data-ph);position:absolute;top:12px;left:12px;font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.22);padding:4px 9px;border-radius:6px;z-index:2}
.tv-plan-art::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(236,72,153,.28),transparent 65%)}
.tv-plan-body{padding:24px 24px 26px}
.tv-plan-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;color:var(--navy,#1a0a2e);margin-bottom:5px}
.tv-plan-tag{font-size:12.5px;color:var(--muted-dark,rgba(26,10,46,.55));margin:0 0 16px;min-height:32px}
.tv-plan-price{display:flex;align-items:baseline;gap:5px;margin-bottom:18px}
.tv-plan-price b{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;background:linear-gradient(135deg,#1a0a2e,#A855F7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1}
.tv-plan-pop .tv-plan-price b{background:linear-gradient(135deg,#EC4899,#A855F7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tv-plan-price span{font-size:14px;font-weight:600;color:var(--muted-dark,rgba(26,10,46,.5))}
.tv-plan-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.tv-plan-list li{font-size:13.5px;color:var(--muted-dark,rgba(26,10,46,.68));padding-left:22px;position:relative;line-height:1.4}
.tv-plan-list li::before{content:'✓';position:absolute;left:0;color:#EC4899;font-weight:700}
.tv-plan-list li b{color:var(--navy,#1a0a2e)}
.tv-plan-btn{width:100%;padding:13px;border-radius:12px;border:1.5px solid rgba(168,85,247,.3);background:#fff;color:var(--navy,#1a0a2e);font-weight:600;font-size:14px;cursor:pointer;transition:all .25s;font-family:inherit}
.tv-plan-btn:hover{background:var(--navy,#1a0a2e);color:#fff;border-color:var(--navy,#1a0a2e);transform:translateY(-1px)}
.tv-plan-btn-pop{background:linear-gradient(120deg,#EC4899,#A855F7);color:#fff;border:none;box-shadow:0 8px 22px -8px rgba(236,72,153,.6)}
.tv-plan-btn-pop:hover{filter:brightness(1.08);color:#fff}
.tv-plan-note{font-size:12.5px;color:var(--muted-dark,rgba(26,10,46,.5));text-align:center;max-width:800px;margin:0 auto;line-height:1.6}
/* FEATURES */
.tv-features{background:#f3ebfa}
.tv-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.tv-feat{padding:28px 26px;border-radius:18px;background:#fff;border:1.5px solid rgba(168,85,247,.14);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.tv-feat:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(168,85,247,.35)}
.tv-feat-lg{grid-column:span 1;grid-row:span 2;background:linear-gradient(160deg,#2a1145,#1a0a2e);border-color:rgba(236,72,153,.2);display:flex;align-items:flex-end;min-height:300px}
.tv-feat-lg::before{content:attr(data-ph);position:absolute;top:16px;left:16px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);padding:5px 11px;border-radius:8px;z-index:3}
.tv-feat-lg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 30%,rgba(236,72,153,.25),transparent 60%),linear-gradient(to top,rgba(15,6,32,.85),transparent 60%);z-index:1}
.tv-feat-content{position:relative;z-index:2}
.tv-feat-lg .tv-feat-ico{background:rgba(236,72,153,.18)}
.tv-feat-lg h3{color:#fff}
.tv-feat-lg p{color:rgba(255,255,255,.8)}
.tv-feat-ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.tv-feat-ico svg{width:25px;height:25px}
.tv-feat h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--navy,#1a0a2e);margin:0 0 8px}
.tv-feat p{font-size:13.5px;line-height:1.6;color:var(--muted-dark,rgba(26,10,46,.58));margin:0}
/* SPORTS image ad */
.tv-sports{background:#0f0620;padding:0}
.tv-sports-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:520px;align-items:stretch}
.tv-sports-copy{display:flex;flex-direction:column;justify-content:center;padding:70px 56px 70px 0}
.tv-sports-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px}
.tv-sports-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9)}
.tv-sports-list li svg{width:17px;height:17px;flex-shrink:0}
.tv-btn-gold{align-self:flex-start}
.tv-sports-visual{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#3d1a5c,#1a0a2e);margin:40px 0;border:1px solid rgba(245,158,11,.2)}
.tv-sports-visual::before{content:attr(data-ph);position:absolute;top:16px;left:16px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.22);padding:5px 11px;border-radius:8px;z-index:2}
.tv-sports-visual::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(245,158,11,.2),transparent 65%)}
/* STREAMSAVER */
.tv-streamsaver{background:linear-gradient(180deg,#ece0f6,#f3ebfa)}
.tv-ss-grid{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.tv-ss-card{position:relative;width:168px;height:168px;border-radius:18px;background:linear-gradient(160deg,#fff,#faf4ff);border:1.5px solid rgba(168,85,247,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 26px -16px rgba(26,10,46,.3)}
.tv-ss-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 20px 40px -18px rgba(168,85,247,.45)}
.tv-ss-card::before{content:attr(data-ph);position:absolute;top:10px;left:10px;font-size:8.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(168,85,247,.4);background:rgba(168,85,247,.06);border:1px dashed rgba(168,85,247,.25);padding:3px 8px;border-radius:6px}
.tv-ss-name{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:var(--navy,#1a0a2e);margin-bottom:6px}
.tv-ss-card p{font-size:11.5px;color:var(--muted-dark,rgba(26,10,46,.55));margin:0;line-height:1.4}
.tv-ss-plus,.tv-ss-equals{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:800;color:rgba(168,85,247,.5)}
.tv-ss-save{width:168px;height:168px;border-radius:18px;background:linear-gradient(135deg,#EC4899,#A855F7);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 16px 40px -14px rgba(236,72,153,.6)}
.tv-ss-save b{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:800;line-height:1}
.tv-ss-save span{font-size:11px;opacity:.9;margin-top:4px;padding:0 12px;text-align:center}
.tv-ss-cta{text-align:center}
/* APP section */
.tv-app{background:#f3ebfa}
.tv-app-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.tv-app-visual{position:relative;height:auto;aspect-ratio:1647/955;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#2a1145,#160a2c);border:1px solid rgba(168,85,247,.16)}
.tv-app-visual::before{content:attr(data-ph);position:absolute;top:16px;left:16px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.22);padding:5px 11px;border-radius:8px;z-index:2}
.tv-app-visual::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(168,85,247,.22),transparent 65%)}
.tv-app-copy .tv-h2{color:var(--navy,#1a0a2e);font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 14px}
.tv-app-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.tv-app-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--navy,#1a0a2e)}
.tv-app-list li svg{width:17px;height:17px;flex-shrink:0}
/* BUNDLE */
.tv-bundle{background:#0f0620}
.tv-bundle-inner{position:relative;text-align:center;max-width:840px;margin:0 auto;padding:52px 44px;border-radius:26px;background:linear-gradient(150deg,#2a1145,#160a2c);border:1px solid rgba(236,72,153,.14);overflow:hidden}
.tv-bundle-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(circle,rgba(236,72,153,.25),transparent 65%);filter:blur(45px);pointer-events:none}
.tv-bundle-inner>*{position:relative;z-index:1}
.tv-bundle-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#F9A8D4;padding:6px 16px;border-radius:100px;background:rgba(236,72,153,.14);border:1px solid rgba(236,72,153,.3);margin-bottom:18px}
.tv-bundle-inner .tv-h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 14px}
.tv-bundle-inner .tv-lede{margin:0 auto 28px;max-width:600px}
.tv-bundle-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.tv-bundle-chip{padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.tv-bundle-chip:hover{background:rgba(236,72,153,.16);transform:translateY(-2px);border-color:rgba(236,72,153,.3)}
.tv-bundle-eq{color:rgba(255,255,255,.4);font-size:13px;font-weight:600}
.tv-bundle-save{padding:10px 22px;border-radius:100px;background:linear-gradient(120deg,#EC4899,#A855F7);color:#fff;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.tv-bundle-save b{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800}
.tv-bundle-save span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
/* HOW */
.tv-how{background:#f3ebfa}
.tv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tv-step{padding:28px 22px;border-radius:16px;background:#fff;border:1.5px solid rgba(168,85,247,.14)}
.tv-step-num{display:block;font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:800;background:linear-gradient(120deg,#EC4899,#A855F7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1;margin-bottom:12px}
.tv-step h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--navy,#1a0a2e);margin:0 0 8px}
.tv-step p{font-size:13.5px;line-height:1.6;color:var(--muted-dark,rgba(26,10,46,.58));margin:0}
.tv-faq-sec{background:#ece0f6}
/* CTA */
.tv-cta{background:#f3ebfa}
.tv-cta-inner{position:relative;text-align:center;max-width:780px;margin:0 auto;padding:56px 44px;border-radius:26px;background:linear-gradient(135deg,#EC4899,#A855F7);overflow:hidden}
.tv-cta-glow{position:absolute;bottom:-50%;left:50%;transform:translateX(-50%);width:80%;height:90%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 60%);filter:blur(40px);pointer-events:none}
.tv-cta-inner>*{position:relative;z-index:1}
.tv-cta-inner .tv-h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 14px}
.tv-cta-inner .tv-lede{margin:0 auto 26px;max-width:540px}
.tv-cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
@media(max-width:960px){
.tv-plan-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
.tv-feat-grid{grid-template-columns:repeat(2,1fr)}
.tv-feat-lg{grid-column:span 2;grid-row:span 1;min-height:220px}
.tv-sports-inner{grid-template-columns:1fr}
.tv-sports-copy{padding:56px 0 20px}
.tv-sports-visual{margin:0 0 40px;min-height:320px}
.tv-app-inner{grid-template-columns:1fr}
.tv-app-visual{order:-1}
.tv-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.tv-feat-grid,.tv-steps{grid-template-columns:1fr}
.tv-feat-lg{grid-column:span 1}
.tv-ss-grid{flex-direction:column}
.tv-bundle-row{flex-direction:column}
.tv-sc-stats{gap:20px}
}
/* ── Multiview interactive demo ── */
.tv-feat-lg{flex-direction:column;align-items:stretch;justify-content:space-between;gap:18px;padding:22px}
.tv-mv-demo{position:relative;z-index:2}
.tv-mv-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:16/10;margin-bottom:10px}
.tv-mv-tile{position:relative;border:1.5px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(150deg,color-mix(in srgb,var(--g) 30%,#1a0a2e),#160a2c);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .28s cubic-bezier(.22,.7,.2,1),border-color .28s,box-shadow .28s;font-family:inherit;padding:8px}
.tv-mv-tile::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--g) 45%,transparent),transparent 70%);opacity:.5;transition:opacity .28s}
.tv-mv-tile:hover{transform:scale(1.03);border-color:color-mix(in srgb,var(--g) 60%,transparent)}
.tv-mv-tile>*{position:relative;z-index:1}
.tv-mv-sport{font-size:30px;line-height:1}
.tv-mv-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.92)}
.tv-mv-live{position:absolute;top:7px;left:8px;font-size:7.5px;font-weight:700;letter-spacing:.04em;color:#FF5C7A}
.tv-mv-audio{position:absolute;top:6px;right:8px;font-size:12px;opacity:0;transition:opacity .25s}
.tv-mv-tile.tv-mv-active{border-color:var(--g);box-shadow:0 0 0 2px color-mix(in srgb,var(--g) 45%,transparent),0 14px 30px -12px color-mix(in srgb,var(--g) 70%,transparent);transform:scale(1.04);z-index:2}
.tv-mv-tile.tv-mv-active::after{opacity:.85}
.tv-mv-tile.tv-mv-active .tv-mv-audio{opacity:1}
.tv-mv-tile.tv-mv-active .tv-mv-sport{animation:tvMvPulse 1.4s ease-in-out infinite}
@keyframes tvMvPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.tv-mv-hint{text-align:center;font-size:11px;color:rgba(255,255,255,.5);font-weight:500}
/* ── TV filled photo blocks (real images) ── */
.tv-photo-filled{position:relative;overflow:hidden}
.tv-photo-filled::before{display:none!important} /* hide dashed label */
.tv-photo-img{position:absolute;inset:0;z-index:0}
.tv-photo-img img{width:100%;height:100%;object-fit:cover;display:block}
/* hero photo fills bg, keep its dark scrims (they're on ::after via .tv-hero-photo base which we neutralize) */
.tv-hero-photo.tv-photo-filled{opacity:1}
.tv-hero-photo.tv-photo-filled picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.tv-hero-photo.tv-photo-filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tv-hero-photo.tv-photo-filled::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(15,6,32,.95) 0%,rgba(15,6,32,.86) 32%,rgba(15,6,32,.45) 56%,rgba(15,6,32,.12) 78%,rgba(15,6,32,.02) 100%),linear-gradient(to top,rgba(15,6,32,.65),transparent 42%);pointer-events:none}
/* showcase: keep the bottom-up gradient so overlay text stays readable */
.tv-showcase-block.tv-photo-filled::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(15,6,32,.94) 0%,rgba(15,6,32,.55) 42%,rgba(15,6,32,.15) 72%,transparent 100%);pointer-events:none}
.tv-showcase-block.tv-photo-filled .tv-showcase-overlay{position:relative;z-index:2}
/* sports/app visuals: subtle vignette only */
.tv-sports-visual.tv-photo-filled::after,.tv-app-visual.tv-photo-filled::after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(15,6,32,.35) 100%);pointer-events:none}
/* plan art: dark gradient at bottom so it blends into the card body */
.tv-plan-art.tv-photo-filled::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(26,10,46,.05) 0%,rgba(26,10,46,.35) 70%,rgba(255,255,255,.0) 100%);pointer-events:none}
/* ── TV plan-card art: tailored to each image's aspect ratio ──
Two plan images (App TV, Ultimate) are portrait 4:5 marketing posters;
the Popular image is landscape. Art area is portrait 4:5 so the two
posters fit edge-to-edge with NO cropping; the landscape image covers. */
.tv-plan-art{height:auto;aspect-ratio:4/5}
.tv-plan-art.tv-photo-filled{background:radial-gradient(ellipse at 50% 50%,#241040,#0f0620)}
.tv-plan-art.tv-photo-filled .tv-photo-img{position:absolute;inset:0}
.tv-plan-art.tv-photo-filled .tv-photo-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.tv-plan-art.tv-photo-filled::after{display:none}
/* Popular card image is landscape → cover-crop centered on the TV screen */
.tv-plan-pop .tv-plan-art{aspect-ratio:4/5}
.tv-plan-pop .tv-plan-art.tv-photo-filled .tv-photo-img img{object-position:center 30%}
/* ── TV scene photos: framing ── */
.tv-hero-photo.tv-photo-filled .tv-photo-img img,
.tv-hero-photo.tv-photo-filled img{object-position:72% 42%}
.tv-showcase-block.tv-photo-filled .tv-photo-img img{object-position:center 30%}
.tv-sports-visual.tv-photo-filled .tv-photo-img img{object-position:center 32%}
.tv-app-visual.tv-photo-filled .tv-photo-img img{object-position:center center}
/* ── StreamSaver filled app tiles (square images) ── */
.tv-ss-card.tv-ss-filled{padding:0;overflow:hidden;background:#0f0620;border-color:rgba(236,72,153,.2)}
.tv-ss-card.tv-ss-filled::before{display:none}
.tv-ss-card.tv-ss-filled picture{display:block;width:100%;height:100%}
.tv-ss-card.tv-ss-filled img{width:100%;height:100%;object-fit:cover;display:block}
/* ── Clean plan cards (no photo) — premium top accent + spacing ── */
.tv-plan{padding-top:6px}
.tv-plan::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#A855F7,#EC4899);opacity:.5;transition:opacity .35s}
.tv-plan:hover::before{opacity:1}
.tv-plan-pop::before{opacity:1;height:6px}
.tv-plan-body{padding-top:30px}
.tv-plan-pop .tv-plan-body{padding-top:38px} /* room for the Most Popular flag */
.tv-plan-flag{top:14px}
/* ═══ TV feature showcase bands (App TV poster + Watch Now photo) ═══ */
.tv-feature-band{background:#f3ebfa;padding:70px 0}
.tv-feature-band.tv-fb-alt{background:linear-gradient(180deg,#ece0f6,#f3ebfa)}
.tv-fb-inner{display:grid;grid-template-columns:0.85fr 1fr;gap:52px;align-items:center}
.tv-fb-inner.tv-fb-reverse{grid-template-columns:1fr 0.9fr}
.tv-fb-inner.tv-fb-reverse .tv-fb-visual{order:2}
.tv-fb-inner.tv-fb-reverse .tv-fb-copy{order:1}
/* image displays at its NATURAL aspect ratio — no forced crop */
.tv-fb-visual{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(26,10,46,.5);background:radial-gradient(ellipse at 50% 40%,#241040,#0f0620)}
.tv-fb-visual img{width:100%;height:auto;display:block}
.tv-fb-portrait{max-width:420px} /* portrait poster: contained width, natural height */
.tv-fb-portrait img{aspect-ratio:4/5;object-fit:cover}
.tv-fb-landscape img{aspect-ratio:1448/1086;object-fit:cover}
.tv-fb-copy .tv-h2{color:var(--navy,#1a0a2e);font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 14px}
.tv-fb-list{list-style:none;padding:0;margin:20px 0 26px;display:flex;flex-direction:column;gap:11px}
.tv-fb-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--navy,#1a0a2e)}
.tv-fb-list li svg{width:17px;height:17px;flex-shrink:0}
@media(max-width:860px){
.tv-fb-inner,.tv-fb-inner.tv-fb-reverse{grid-template-columns:1fr;gap:32px}
.tv-fb-inner.tv-fb-reverse .tv-fb-visual{order:-1}
.tv-fb-inner .tv-fb-visual{order:-1}
.tv-fb-portrait{max-width:340px;margin:0 auto}
}
/* ═══════════════════════════════════════════════════════════
RESIDENTIAL MOBILITY SUBPAGE (mb-*) — Rogers red + violet
═══════════════════════════════════════════════════════════ */
.mb-h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}
.mb-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac,#DA291C);margin-bottom:12px}
.mb-lede{font-size:16px;line-height:1.7;color:var(--muted-dark,rgba(28,10,44,.62))}
.mb-sec-head{max-width:720px;margin:0 auto 44px}
.mb-sec-head.center{text-align:center}
.mb-sec-head .mb-h2{font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--navy,#1a0a2e);margin:0 0 14px}
/* buttons */
.mb-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;font-family:inherit}
.mb-btn-primary{background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;box-shadow:0 14px 36px -12px rgba(218,41,28,.55)}
.mb-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(218,41,28,.7)}
.mb-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.mb-btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.mb-btn-white{background:#fff;color:#1a0a2e;box-shadow:0 14px 36px -12px rgba(0,0,0,.4)}
.mb-btn-white:hover{transform:translateY(-2px);background:#f7f0fb}
.mb-btn-ghost-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.mb-btn-ghost-w:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
/* HERO */
.mb-hero{position:relative;overflow:hidden;min-height:auto;display:flex;align-items:center;padding:92px 0 64px;background:radial-gradient(ellipse at 75% 15%,#3a0f12 0%,#22070c 45%,#12060a 100%);color:#fff}
.mb-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.mb-hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.mb-hero-devices{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mb-hero-device{position:absolute;display:inline-block;line-height:0;transform:translate(-50%,-50%);will-change:transform;user-select:none}
.mb-hero-device img{height:100%;width:auto;display:block;-webkit-user-drag:none;user-select:none}
.mb-hero-signal{position:absolute;z-index:0;pointer-events:none}
.mb-hero-signal span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(236,72,153,.5);width:36px;height:36px;animation:mbRing 3.4s ease-out infinite}
.mb-hero-signal span:nth-child(2){animation-delay:1.13s;border-color:rgba(168,85,247,.5)}
.mb-hero-signal span:nth-child(3){animation-delay:2.26s;border-color:rgba(37,99,235,.5)}
@keyframes mbRing{0%{width:28px;height:28px;opacity:0}12%{opacity:.6}100%{width:540px;height:540px;opacity:0}}
.mb-hero-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.mb-hg1{top:-12%;right:-6%;width:44%;height:56%;background:radial-gradient(circle,#DA291C,transparent 70%);opacity:.14;animation:rzFloat 20s ease-in-out infinite}
.mb-hg2{bottom:-16%;left:-8%;width:46%;height:58%;background:radial-gradient(circle,#A855F7,transparent 70%);opacity:.1;animation:rzFloat 26s ease-in-out infinite reverse}
.mb-hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
.mb-hero-inner{position:relative;z-index:2}
.mb-hero-inner::before{content:'';position:absolute;top:-92px;bottom:-64px;left:-40vw;width:130%;z-index:-1;background:linear-gradient(100deg,rgba(18,6,10,.92) 0%,rgba(18,6,10,.82) 42%,rgba(18,6,10,.45) 62%,rgba(18,6,10,0) 82%);pointer-events:none}
.mb-hero-text{max-width:820px}
.mb-hero .breadcrumb{color:rgba(255,255,255,.5);margin-bottom:18px;font-size:12.5px}
.mb-hero .breadcrumb a{color:rgba(255,255,255,.65);text-decoration:none}
.mb-hero-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;border:1px solid rgba(218,41,28,.4);background:rgba(218,41,28,.14);font-size:12.5px;font-weight:600;color:#FCA5A5;margin-bottom:22px}
.mb-pill-dot{width:8px;height:8px;border-radius:50%;background:#DA291C;box-shadow:0 0 10px #DA291C;animation:rzPulse 2s infinite}
.mb-hero-brand{display:inline-flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.mb-hero-logo{display:inline-flex;align-items:center;background:#fff;border-radius:11px;padding:8px 14px;box-shadow:0 12px 34px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.mb-hero-logo img{height:27px;width:auto;display:block}
.mb-hero-brand-tag{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:#FCA5A5;text-transform:uppercase}
.mb-hero-text h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:600;color:#fff;line-height:1.06;letter-spacing:-.035em;margin:0 0 22px;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.mb-grad{background:linear-gradient(110deg,#F0442E,#FB923C,#A855F7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mb-hero-text>p{font-size:clamp(15px,1.7vw,18px);line-height:1.7;color:rgba(255,255,255,.76);max-width:640px;margin:0 0 30px}
.mb-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:36px}
.mb-hero-stats{display:flex;gap:36px;flex-wrap:wrap}
.mb-hstat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:800;background:linear-gradient(120deg,#F0442E,#FB923C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1}
.mb-hstat span{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:4px}
.mb-scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(218,41,28,.4);border-radius:13px;z-index:3;display:flex;justify-content:center;padding-top:6px}
.mb-scroll-cue span{width:4px;height:7px;border-radius:2px;background:rgba(218,41,28,.7);animation:rbxScroll 1.8s infinite}
/* LOGOS */
.mb-logos{background:#12060a;padding:22px 0;border-top:1px solid rgba(255,255,255,.06)}
.mb-logos-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.mb-logos-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase}
.mb-logos-img{height:28px;width:auto;background:#fff;border-radius:6px;padding:4px 12px}
.mb-logos-sep{width:1px;height:24px;background:rgba(255,255,255,.15)}
.mb-logos-tag{font-size:12.5px;color:rgba(255,255,255,.55)}
/* WHY */
.mb-why{background:linear-gradient(180deg,#fbf5f4,#f6eef4)}
.mb-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mb-why-card{padding:26px 22px;border-radius:18px;background:#fff;border:1.5px solid rgba(218,41,28,.1);transition:transform .3s,box-shadow .3s}
.mb-why-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(218,41,28,.28)}
.mb-why-ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.mb-why-ico svg{width:25px;height:25px}
.mb-why-card h3{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;color:var(--navy,#1a0a2e);margin:0 0 8px}
.mb-why-card p{font-size:13.5px;line-height:1.6;color:var(--muted-dark,rgba(26,10,46,.58));margin:0}
/* PLANS */
.mb-plans{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6eef4 0%,#efe4ee 100%)}
.mb-plan-toggle{text-align:center;margin-bottom:26px}
.mb-toggle-note{display:inline-block;font-size:12.5px;font-weight:600;color:var(--muted-dark,rgba(26,10,46,.55));background:rgba(218,41,28,.07);border:1px solid rgba(218,41,28,.16);padding:7px 16px;border-radius:100px}
.mb-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;align-items:stretch}
.mb-plan{position:relative;display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(170deg,#fff,#fdf6fb);border:1.5px solid rgba(168,85,247,.14);padding:24px 22px 26px;transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s,border-color .35s;box-shadow:0 6px 24px -14px rgba(26,10,46,.26)}
.mb-plan:hover{transform:translateY(-6px);border-color:rgba(218,41,28,.32);box-shadow:0 26px 52px -22px rgba(218,41,28,.4)}
.mb-plan-pop{border-color:#DA291C;box-shadow:0 20px 46px -20px rgba(218,41,28,.45)}
.mb-plan-ult{border-color:#A855F7;background:linear-gradient(170deg,#fff,#faf4ff)}
.mb-plan-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;font-size:10.5px;font-weight:700;padding:5px 15px;border-radius:100px;box-shadow:0 6px 16px -6px rgba(218,41,28,.6);white-space:nowrap}
.mb-flag-ult{background:linear-gradient(120deg,#A855F7,#EC4899);box-shadow:0 6px 16px -6px rgba(168,85,247,.6)}
.mb-plan-head{margin-bottom:14px}
.mb-plan-name{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;color:var(--navy,#1a0a2e)}
.mb-plan-for{font-size:12px;color:var(--muted-dark,rgba(26,10,46,.5));margin:2px 0 0}
.mb-plan-price{display:flex;align-items:flex-start;gap:2px;margin-bottom:6px;color:var(--navy,#1a0a2e)}
.mb-cur{font-size:18px;font-weight:700;margin-top:8px}
.mb-plan-price b{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:800;line-height:.9}
.mb-per{font-size:14px;font-weight:600;color:var(--muted-dark,rgba(26,10,46,.5));margin-top:auto;padding-bottom:8px}
.mb-plan-data{font-size:13.5px;color:var(--navy,#1a0a2e);padding:8px 0 14px;border-bottom:1px solid rgba(26,10,46,.08);margin-bottom:14px}
.mb-plan-data b{color:#DA291C;font-weight:700}
.mb-plan-hero{padding:4px 0 14px;margin-bottom:14px;border-bottom:1px solid rgba(26,10,46,.08)}
.mb-plan-stat{display:flex;align-items:baseline;gap:6px;line-height:.95}
.mb-plan-stat b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2.7rem,5vw,3.5rem);letter-spacing:-.01em;color:#1C0A4A;font-variant-numeric:tabular-nums;transition:transform .3s ease;transform-origin:left center}
.mb-plan-stat .mb-unit{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:#1C0A4A}
.mb-stat-inf b{font-size:clamp(3.2rem,6vw,4.2rem);color:#A855F7;line-height:.8;animation:mbInfPulse 3s ease-in-out infinite}
.mb-plan:hover .mb-plan-stat b{transform:scale(1.03)}
.mb-plan-statsub{font-size:13px;color:rgba(26,10,46,.6);margin-top:3px}
.mb-plan-speed{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#DA291C;background:rgba(218,41,28,.07);border:1px solid rgba(218,41,28,.16);padding:4px 11px;border-radius:999px}
.mb-speed-dot{width:6px;height:6px;border-radius:50%;background:#DA291C;box-shadow:0 0 8px #DA291C;animation:rzPulse 2s infinite}
.mb-plan-pop .mb-plan-stat b,.mb-plan-pop .mb-plan-stat .mb-unit{color:#DA291C}
.mb-plan-ult .mb-plan-stat b,.mb-plan-ult .mb-stat-inf b{color:#A855F7}
.mb-plan-ult .mb-plan-speed{color:#A855F7;background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.2)}
.mb-plan-ult .mb-speed-dot{background:#A855F7;box-shadow:0 0 8px #A855F7}
@keyframes mbInfPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(1.05)}}
.mb-plan-ult .mb-plan-data b{color:#A855F7}
.mb-plan-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mb-plan-list li{font-size:12.5px;color:var(--muted-dark,rgba(26,10,46,.66));padding-left:20px;position:relative;line-height:1.45}
.mb-plan-list li::before{content:'✓';position:absolute;left:0;color:#DA291C;font-weight:700}
.mb-plan-ult .mb-plan-list li::before{color:#A855F7}
.mb-plan-list li b{color:var(--navy,#1a0a2e)}
.mb-plan-btn{width:100%;padding:12px;border-radius:11px;border:1.5px solid rgba(218,41,28,.3);background:#fff;color:var(--navy,#1a0a2e);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .25s;font-family:inherit}
.mb-plan-btn:hover{background:var(--navy,#1a0a2e);color:#fff;border-color:var(--navy,#1a0a2e);transform:translateY(-1px)}
.mb-plan-btn-pop{background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;border:none;box-shadow:0 8px 22px -8px rgba(218,41,28,.6)}
.mb-plan-btn-pop:hover{filter:brightness(1.08);color:#fff;background:linear-gradient(120deg,#DA291C,#F0442E)}
.mb-plan-btn-ult{background:linear-gradient(120deg,#A855F7,#EC4899);color:#fff;border:none;box-shadow:0 8px 22px -8px rgba(168,85,247,.6)}
.mb-plan-btn-ult:hover{filter:brightness(1.08);color:#fff}
/* Talk & Text */
.mb-tt-row{margin-bottom:22px}
.mb-tt-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 28px;border-radius:18px;background:linear-gradient(120deg,#1a0a2e,#2a1145);border:1px solid rgba(255,255,255,.08)}
.mb-tt-left{display:flex;align-items:center;gap:18px;flex:1;min-width:280px}
.mb-tt-ico{width:48px;height:48px;border-radius:12px;background:rgba(218,41,28,.18);display:flex;align-items:center;justify-content:center;color:#FCA5A5;flex-shrink:0}
.mb-tt-ico svg{width:24px;height:24px}
.mb-tt-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#fff;margin-bottom:4px}
.mb-tt-card p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:560px}
.mb-tt-btn{padding:12px 22px;border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;transition:all .25s;font-family:inherit;white-space:nowrap}
.mb-tt-btn:hover{background:rgba(218,41,28,.25);transform:translateY(-2px)}
.mb-plan-note{font-size:12px;color:var(--muted-dark,rgba(26,10,46,.5));text-align:center;max-width:860px;margin:0 auto;line-height:1.6}
/* BUNDLE */
.mb-bundle{background:#12060a}
/* full-bleed photo background */
.mb-bundle-photo{position:relative;overflow:hidden;isolation:isolate}
.mb-bundle-photo>.wrap{position:relative;z-index:2}
.mb-bundle-bg{position:absolute;inset:0;z-index:0;display:block;line-height:0}
.mb-bundle-bg picture,.mb-bundle-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.mb-bundle-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(18,6,10,.86) 0%,rgba(18,6,10,.62) 30%,rgba(18,6,10,.66) 70%,rgba(18,6,10,.9) 100%),
radial-gradient(ellipse at 50% 50%,rgba(18,6,10,.3) 0%,rgba(18,6,10,.78) 100%)}
.mb-bundle-photo .mb-bundle-inner{background:linear-gradient(150deg,rgba(58,15,18,.72),rgba(34,7,12,.8));backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);border-color:rgba(255,255,255,.13);box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.mb-bundle-inner{position:relative;text-align:center;max-width:860px;margin:0 auto;padding:52px 44px;border-radius:26px;background:linear-gradient(150deg,#3a0f12,#22070c);border:1px solid rgba(218,41,28,.16);overflow:hidden}
.mb-bundle-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(circle,rgba(218,41,28,.28),transparent 65%);filter:blur(45px);pointer-events:none}
.mb-bundle-inner>*{position:relative;z-index:1}
.mb-bundle-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FCA5A5;padding:6px 16px;border-radius:100px;background:rgba(218,41,28,.14);border:1px solid rgba(218,41,28,.3);margin-bottom:18px}
.mb-bundle-inner .mb-h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 14px}
.mb-bundle-inner .mb-lede{margin:0 auto 28px;max-width:620px}
.mb-bundle-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.mb-bundle-chip{padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.mb-bundle-chip:hover{background:rgba(218,41,28,.18);transform:translateY(-2px);border-color:rgba(218,41,28,.3)}
.mb-bundle-eq{color:rgba(255,255,255,.4);font-size:13px;font-weight:600}
.mb-bundle-save{padding:10px 22px;border-radius:100px;background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.mb-bundle-save b{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800}
.mb-bundle-save span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
/* DEVICES */
.mb-devices{background:linear-gradient(180deg,#f6eef4,#fbf5f4)}
.mb-device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}
.mb-device{border-radius:22px;background:#fff;border:1.5px solid rgba(218,41,28,.1);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s;box-shadow:0 6px 24px -14px rgba(26,10,46,.26)}
.mb-device:hover{transform:translateY(-6px);border-color:rgba(218,41,28,.3);box-shadow:0 26px 52px -22px rgba(218,41,28,.32)}
.mb-device-art{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,#1a0a2e,#12060a);overflow:hidden}
/* filled device images */
.mb-device-art.mb-device-filled::before{display:none}
.mb-device-art.mb-device-filled::after{display:none}
.mb-device-art.mb-device-filled picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.mb-device-art.mb-device-filled img{width:100%;height:100%;object-fit:cover;display:block}
/* iPhone & Samsung are landscape 4:3 → perfect cover fit */
.mb-dev-iphone img,.mb-dev-samsung img{object-position:center}
/* Pixel is portrait → cover-crop biased to keep both phones fully in frame */
.mb-dev-pixel img{object-fit:cover;object-position:center center}
.mb-device-body{padding:22px 22px 24px}
.mb-device-brand{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#DA291C}
.mb-device-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;color:var(--navy,#1a0a2e);margin:4px 0 8px}
.mb-device-desc{font-size:13px;line-height:1.55;color:var(--muted-dark,rgba(26,10,46,.58));margin:0 0 16px;min-height:58px}
.mb-device-price{display:flex;flex-direction:column;margin-bottom:16px}
.mb-device-price span{font-size:11px;color:var(--muted-dark,rgba(26,10,46,.5));text-transform:uppercase;letter-spacing:.04em}
.mb-device-price b{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--navy,#1a0a2e)}
.mb-device-btn{width:100%;padding:12px;border-radius:11px;border:1.5px solid rgba(218,41,28,.3);background:#fff;color:var(--navy,#1a0a2e);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .25s;font-family:inherit}
.mb-device-btn:hover{background:#DA291C;color:#fff;border-color:#DA291C;transform:translateY(-1px)}
.mb-device-more{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mb-more-item{display:flex;align-items:center;gap:11px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid rgba(218,41,28,.1);font-size:13px;font-weight:500;color:var(--navy,#1a0a2e)}
.mb-more-item svg{width:22px;height:22px;color:#DA291C;flex-shrink:0}
/* FINANCING */
.mb-financing{background:linear-gradient(180deg,#fbf5f4,#f6eef4)}
.mb-fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
.mb-fin-card{position:relative;padding:32px 30px;border-radius:20px;background:#fff;border:1.5px solid rgba(218,41,28,.12)}
.mb-fin-featured{background:linear-gradient(160deg,#fff,#fdf3f2);border-color:rgba(218,41,28,.28);box-shadow:0 20px 44px -22px rgba(218,41,28,.3)}
.mb-fin-num{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:800;color:rgba(218,41,28,.25);line-height:1;margin-bottom:10px}
.mb-fin-card h3{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;color:var(--navy,#1a0a2e);margin:0 0 12px}
.mb-fin-card>p{font-size:14px;line-height:1.65;color:var(--muted-dark,rgba(26,10,46,.6));margin:0 0 18px}
.mb-fin-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.mb-fin-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--navy,#1a0a2e)}
.mb-fin-list li svg{width:16px;height:16px;flex-shrink:0}
.mb-fin-note{font-size:12px;color:var(--muted-dark,rgba(26,10,46,.5));text-align:center;max-width:760px;margin:0 auto;line-height:1.6}
/* SWITCH */
.mb-switch{background:#f6eef4}
.mb-switch-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center}
.mb-switch-copy .mb-h2{color:var(--navy,#1a0a2e);font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 14px}
.mb-switch-steps{display:flex;flex-direction:column;gap:16px;margin:24px 0 28px}
.mb-sstep{display:flex;gap:14px;align-items:flex-start}
.mb-sstep-num{width:30px;height:30px;border-radius:50%;background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mb-sstep b{font-size:15px;color:var(--navy,#1a0a2e);display:block;margin-bottom:2px}
.mb-sstep p{font-size:13px;color:var(--muted-dark,rgba(26,10,46,.58));margin:0;line-height:1.5}
.mb-switch-visual{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#2a1145,#12060a);border:1px solid rgba(218,41,28,.16)}
.mb-switch-visual.mb-switch-filled picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.mb-switch-visual.mb-switch-filled img{width:100%;height:100%;object-fit:cover;display:block}
.mb-switch-visual.mb-switch-filled::before,.mb-switch-visual.mb-switch-filled::after{display:none}
/* QUOTE */
.mb-quote{background:#12060a}
.mb-quote-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1080px;margin:0 auto;padding:48px 44px;border-radius:26px;background:linear-gradient(150deg,#3a0f12,#1a0a2e);border:1px solid rgba(218,41,28,.16);overflow:hidden}
.mb-quote-glow{position:absolute;top:-30%;right:-10%;width:60%;height:80%;background:radial-gradient(circle,rgba(218,41,28,.25),transparent 65%);filter:blur(45px);pointer-events:none}
.mb-quote-left,.mb-quote-form{position:relative;z-index:1}
.mb-quote-left .mb-h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:0 0 14px}
.mb-quote-points{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.mb-quote-points li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9)}
.mb-quote-points li svg{width:17px;height:17px;flex-shrink:0}
.mb-quote-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px}
.mb-form-row{margin-bottom:12px}
.mb-input{width:100%;padding:13px 15px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-family:inherit;box-sizing:border-box;transition:border-color .2s,background .2s}
.mb-input::placeholder{color:rgba(255,255,255,.4)}
.mb-input:focus{outline:none;border-color:rgba(218,41,28,.5);background:rgba(255,255,255,.09)}
.mb-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:36px}
.mb-select option{background:#1a0a2e;color:#fff}
.mb-textarea{min-height:80px;resize:vertical}
.mb-form-btn{width:100%;justify-content:center;margin-top:4px}
.mb-form-fine{font-size:11px;color:rgba(255,255,255,.45);text-align:center;margin:12px 0 0;line-height:1.5}
.mb-form-success{text-align:center;padding:30px 10px}
.mb-form-success-ico{width:64px;height:64px;border-radius:50%;background:linear-gradient(120deg,#DA291C,#F0442E);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.mb-form-success h3{font-family:'Space Grotesk',sans-serif;font-size:22px;color:#fff;margin:0 0 10px}
.mb-form-success p{font-size:14px;color:rgba(255,255,255,.75);margin:0;line-height:1.6}
.mb-faq-sec{background:#f6eef4}
/* CTA */
.mb-cta{background:#fbf5f4}
.mb-cta-inner{position:relative;text-align:center;max-width:780px;margin:0 auto;padding:56px 44px;border-radius:26px;background:linear-gradient(135deg,#DA291C,#A855F7);overflow:hidden}
.mb-cta-glow{position:absolute;bottom:-50%;left:50%;transform:translateX(-50%);width:80%;height:90%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 60%);filter:blur(40px);pointer-events:none}
.mb-cta-inner>*{position:relative;z-index:1}
.mb-cta-inner .mb-h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 14px}
.mb-cta-inner .mb-lede{margin:0 auto 26px;max-width:540px}
.mb-cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
@media(max-width:1000px){
.mb-why-grid{grid-template-columns:repeat(2,1fr)}
.mb-plan-grid{grid-template-columns:repeat(2,1fr)}
.mb-device-grid{grid-template-columns:1fr}
.mb-device-more{grid-template-columns:repeat(2,1fr)}
.mb-fin-grid{grid-template-columns:1fr}
.mb-switch-inner{grid-template-columns:1fr;gap:32px}
.mb-switch-visual{max-width:400px;margin:0 auto;order:-1}
.mb-quote-inner{grid-template-columns:1fr;gap:32px}
}
@media(max-width:560px){
.mb-why-grid,.mb-plan-grid,.mb-device-more{grid-template-columns:1fr}
.mb-hero-stats{gap:22px}
.mb-tt-card{flex-direction:column;align-items:flex-start}
.mb-bundle-row{flex-direction:column}
}
/* ═══════════ /residential/security — Self Protection + Smart Home (sp-*) ═══════════ */
.sp-hero{position:relative;overflow:hidden;padding:132px 0 36px;background:#08041a;isolation:isolate}
.sp-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(ellipse 90% 70% at 50% 0%,#2b1257 0%,#170a37 42%,#0a0520 78%,#07031a 100%)}
.sp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp-grid{position:absolute;inset:0;opacity:.32;
background-image:linear-gradient(rgba(184,102,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(184,102,255,.07) 1px,transparent 1px);
background-size:58px 58px;
-webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000 25%,transparent 80%);
mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000 25%,transparent 80%)}
.sp-noise{position:absolute;inset:0;opacity:.12;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);background-size:3px 3px}
.sp-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
box-shadow:inset 0 -120px 130px -70px #07031a, inset 0 120px 110px -80px rgba(7,3,26,.7)}
.sp-inner{position:relative;z-index:3;max-width:880px;margin:0 auto;text-align:center}
.sp-crumb{font-size:12.5px;color:rgba(255,255,255,.42);margin-bottom:10px}
.sp-crumb a{color:rgba(255,255,255,.6);text-decoration:none}.sp-crumb a:hover{color:#fff}
.sp-crumb span{color:rgba(255,255,255,.9)}
.sp-brand{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.sp-logo{display:inline-flex;background:#fff;border-radius:11px;padding:8px 14px;box-shadow:0 12px 34px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.sp-logo img{height:27px;width:auto;display:block}
.sp-brand-tag{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:#67E8F9;text-transform:uppercase}
.sp-dot{width:8px;height:8px;border-radius:50%;background:#06B6D4;box-shadow:0 0 10px #06B6D4;animation:rzPulse 2s infinite}
.sp-h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.95rem,3.5vw,2.95rem);font-weight:600;color:#fff;line-height:1.07;letter-spacing:-.032em;margin:0 0 13px;text-transform:none;text-shadow:0 4px 44px rgba(0,0,0,.5)}
.sp-grad{background:linear-gradient(100deg,#F0442E,#B866FF 52%,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sp-lede{font-size:14.6px;line-height:1.6;color:rgba(255,255,255,.76);max-width:620px;margin:0 auto 20px}
.sp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sp-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:12px;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:transform .25s cubic-bezier(.22,.7,.2,1),box-shadow .25s,background .25s}
.sp-btn-primary{background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;box-shadow:0 14px 36px -12px rgba(218,41,28,.8)}
.sp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -12px rgba(218,41,28,.95)}
.sp-btn-ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.sp-btn-ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
/* stage */
.sp-stage-wrap{position:relative;z-index:3;margin:22px auto 0;max-width:1060px;padding:0 20px;display:flex;flex-direction:column;align-items:center}
.sp-hud{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:11px}
.sp-mode{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.34);color:#6EE7B7;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.sp-mode-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 10px #10B981;animation:rzPulse 1.8s infinite}
.sp-live{font-size:12.5px;color:rgba(255,255,255,.45);letter-spacing:.02em}
.sp-live b{color:#fff;font-weight:600}
.sp-stage{position:relative;width:100%;aspect-ratio:5/3;overflow:hidden;border-radius:20px}
.sp-pool{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76%;height:80%;
background:radial-gradient(ellipse at 50% 50%,rgba(184,102,255,.2),rgba(218,41,28,.09) 45%,transparent 72%);filter:blur(46px)}
.sp-home,.sp-home picture,.sp-home img{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp-home img{object-fit:cover;object-position:center center;
-webkit-mask-image:radial-gradient(ellipse 74% 78% at 50% 50%,#000 62%,transparent 97%);
mask-image:radial-gradient(ellipse 74% 78% at 50% 50%,#000 62%,transparent 97%)}
.sp-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-links line{animation:spDash 26s linear infinite}
@keyframes spDash{to{stroke-dashoffset:-400}}
.sp-chip{fill:url(#spChipG);stroke:rgba(103,232,249,.45);stroke-width:1.8;transition:stroke .4s,filter .4s}
.sp-chip-hl{opacity:.6}
.sp-node .sp-ring{opacity:0;transform-box:fill-box;transform-origin:center}
.sp-node.sp-on .sp-chip{stroke:#F0442E;stroke-width:2.4;filter:url(#spGlow)}
.sp-node.sp-on .sp-ring1{animation:spRing 2.1s ease-out infinite}
.sp-node.sp-on .sp-ring2{animation:spRing 2.1s ease-out .55s infinite}
@keyframes spRing{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}
.sp-spark{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #F0442E);transition:opacity .18s}
.sp-trail{transition:opacity .25s}
.sp-hub{transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.sp-hub.sp-hub-hit{transform:scale(1.1)}
.sp-hub-ring{animation:spHubRing 3.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes spHubRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.sp-radar{transform-box:fill-box;transform-origin:center;animation:spRadar 5.5s linear infinite}
@keyframes spRadar{to{transform:rotate(360deg)}}
/* stats + compliance */
.sp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:990px;margin:20px auto 0}
.sp-stat{position:relative;text-align:left;padding:19px 20px 20px;border-radius:16px;overflow:hidden;
background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.11);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 20px 48px -28px rgba(0,0,0,.85);
transition:transform .4s cubic-bezier(.22,.7,.2,1),border-color .4s,box-shadow .4s}
.sp-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,#F0442E,#B866FF 50%,#22D3EE);
transform:scaleX(.24);transform-origin:left;transition:transform .55s cubic-bezier(.22,.7,.2,1)}
.sp-stat::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
background:radial-gradient(ellipse at 50% 0%,rgba(103,232,249,.14),transparent 62%)}
.sp-stat:hover{transform:translateY(-5px);border-color:rgba(103,232,249,.35);box-shadow:0 32px 64px -30px rgba(6,182,212,.5)}
.sp-stat:hover::before{transform:scaleX(1)}
.sp-stat:hover::after{opacity:1}
.sp-stat-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
background:rgba(6,182,212,.13);border:1px solid rgba(6,182,212,.3);color:#67E8F9;margin-bottom:12px}
.sp-stat-ico svg{width:19px;height:19px}
.sp-stat-num{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2.5rem,3.1vw,3rem);line-height:.92;letter-spacing:-.015em;
background:linear-gradient(178deg,#fff 34%,#8ecdf5 92%);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;filter:drop-shadow(0 8px 26px rgba(103,232,249,.22))}
.sp-stat-num i{font-style:normal;font-size:.92rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:9px;vertical-align:.55em;
-webkit-text-fill-color:#67E8F9;color:#67E8F9;background:rgba(6,182,212,.13);border:1px solid rgba(6,182,212,.28);padding:3px 8px;border-radius:7px;filter:none}
.sp-stat-lab{display:block;margin-top:11px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.sp-stat-sub{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.sp-compliance{display:flex;align-items:center;gap:12px;text-align:left;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62);
max-width:640px;margin:22px auto 0;padding:11px 16px;border:1px solid rgba(6,182,212,.24);border-radius:12px;background:rgba(6,182,212,.055)}
.sp-compliance svg{width:20px;height:20px;flex:0 0 20px;color:#67E8F9}
@media(max-width:900px){
.sp-hero{padding:108px 0 32px}
.sp-stage{aspect-ratio:3/2;border-radius:14px}
.sp-stats{grid-template-columns:1fr;gap:14px;margin-top:20px}
.sp-stat{padding:20px}
.sp-stat-num{font-size:2.6rem}
.sp-compliance{align-items:flex-start}
.sp-chip{stroke-width:2.6}
.sp-hud{gap:10px}
}
@media(prefers-reduced-motion:reduce){
.sp-radar,.sp-hub-ring,.sp-links line{animation:none}
}
/* ─────────── security page body sections (sp-*) ─────────── */
.sp-plans,.sp-included,.sp-auto,.sp-faq-sec{background:linear-gradient(180deg,#faf7fd,#f4eefb)}
.sp-pillars,.sp-record,.sp-quote-sec{background:#fff}
.sp-equip{background:linear-gradient(180deg,#f4eefb,#fbf8fe)}
.sp-head{max-width:760px}
.sp-head.center{margin:0 auto 44px;text-align:center}
.sp-kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0891B2;margin-bottom:14px}
.sp-kicker-red{color:#DA291C}
.sp-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:600;color:#1C0A4A;line-height:1.12;letter-spacing:-.028em;margin:0 0 16px;text-transform:none}
.sp-sub{font-size:15.5px;line-height:1.7;color:rgba(28,10,74,.68);margin:0 0 8px}
.sp-ticks{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.sp-ticks li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:rgba(28,10,74,.72)}
.sp-ticks li::before{content:'';position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:rgba(6,182,212,.14);
box-shadow:inset 0 0 0 1px rgba(6,182,212,.4)}
.sp-ticks li::after{content:'';position:absolute;left:5px;top:8px;width:5px;height:8px;border-right:2px solid #0891B2;border-bottom:2px solid #0891B2;transform:rotate(40deg)}
.sp-ticks-lg li{font-size:14.5px}
/* image placeholders */
.sp-ph{position:relative;aspect-ratio:var(--ar,4/3);border-radius:16px;overflow:hidden;display:grid;place-items:center;text-align:center;
background:linear-gradient(135deg,rgba(28,10,74,.055),rgba(6,182,212,.06));
border:1.5px dashed rgba(28,10,74,.22)}
.sp-ph span{font-size:11.5px;font-weight:600;letter-spacing:.03em;color:rgba(28,10,74,.5);padding:16px;line-height:1.5;max-width:88%}
.sp-ph::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(28,10,74,.022) 12px,rgba(28,10,74,.022) 24px)}
.sp-ph.sp-filled{border:none;background:#12060a}
.sp-ph.sp-filled span,.sp-ph.sp-filled::after{display:none}
.sp-ph.sp-filled picture,.sp-ph.sp-filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sp-ph-soft{border-color:rgba(28,10,74,.16)}
.sp-ph-bleed{border-radius:0;border:none;height:100%;width:100%;aspect-ratio:auto}
/* pillars */
.sp-pillar-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sp-pillar{border-radius:22px;overflow:hidden;background:#fff;border:1px solid rgba(28,10,74,.09);box-shadow:0 18px 46px -30px rgba(28,10,74,.4);transition:transform .4s cubic-bezier(.22,.7,.2,1),box-shadow .4s}
.sp-pillar:hover{transform:translateY(-5px);box-shadow:0 34px 70px -34px rgba(6,182,212,.45)}
.sp-pillar .sp-ph{border-radius:0}
.sp-pillar-body{padding:28px 26px 30px}
.sp-pillar-body h3{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:600;color:#1C0A4A;margin:12px 0 10px;letter-spacing:-.02em}
.sp-pillar-body p{font-size:14px;line-height:1.65;color:rgba(28,10,74,.66);margin:0}
.sp-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.sp-tag-red{background:rgba(218,41,28,.1);color:#DA291C;border:1px solid rgba(218,41,28,.25)}
.sp-tag-cyan{background:rgba(6,182,212,.1);color:#0891B2;border:1px solid rgba(6,182,212,.28)}
/* plans */
.sp-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sp-plan{position:relative;display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(170deg,#fff,#fbf6ff);border:1.5px solid rgba(6,182,212,.16);padding:26px 24px 28px;
transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s,border-color .35s;box-shadow:0 6px 24px -14px rgba(28,10,74,.3)}
.sp-plan:hover{transform:translateY(-6px);border-color:rgba(6,182,212,.42);box-shadow:0 28px 56px -24px rgba(6,182,212,.5)}
.sp-plan-pop{border-color:rgba(218,41,28,.4)}
.sp-plan-ult{border-color:rgba(184,102,255,.42)}
.sp-plan-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;font-size:10.5px;font-weight:700;padding:5px 15px;border-radius:100px;box-shadow:0 6px 16px -6px rgba(218,41,28,.6);white-space:nowrap;letter-spacing:.04em}
.sp-flag-ult{background:linear-gradient(120deg,#8B5CF6,#B866FF);box-shadow:0 6px 16px -6px rgba(139,92,246,.6)}
.sp-plan-top h3{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:600;color:#1C0A4A;margin:0 0 4px}
.sp-plan-for{font-size:12.5px;color:rgba(28,10,74,.55);margin:0}
.sp-plan-hero{padding:16px 0 14px;margin:14px 0;border-top:1px solid rgba(28,10,74,.07);border-bottom:1px solid rgba(28,10,74,.07)}
.sp-plan-stat{display:flex;align-items:baseline;gap:8px;line-height:.95}
.sp-plan-stat b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:3.2rem;color:#0891B2;font-variant-numeric:tabular-nums}
.sp-plan-pop .sp-plan-stat b{color:#DA291C}
.sp-plan-ult .sp-plan-stat b{color:#8B5CF6}
.sp-unit{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:#1C0A4A;text-transform:uppercase;letter-spacing:.04em}
.sp-plan-statsub{font-size:12.5px;color:rgba(28,10,74,.6);margin-top:6px}
.sp-plan-statsub b{color:#1C0A4A;font-weight:700}
.sp-plan-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.sp-plan-list li{position:relative;padding-left:20px;font-size:12.5px;line-height:1.5;color:rgba(28,10,74,.68)}
.sp-plan-list li::before{content:'✓';position:absolute;left:0;color:#0891B2;font-weight:700;font-size:12px}
.sp-save{color:#059669;font-weight:700}
.sp-plan-btn{width:100%;padding:12px;border-radius:11px;border:1.5px solid rgba(6,182,212,.35);background:#fff;color:#1C0A4A;font-weight:600;font-size:13.5px;cursor:pointer;transition:all .25s;font-family:inherit}
.sp-plan-btn:hover{background:rgba(6,182,212,.07);border-color:#0891B2}
.sp-plan-btn-pop{background:linear-gradient(120deg,#DA291C,#F0442E);color:#fff;border-color:transparent}
.sp-plan-btn-pop:hover{background:linear-gradient(120deg,#c02418,#e03a24);color:#fff}
.sp-plan-btn-ult{background:linear-gradient(120deg,#8B5CF6,#B866FF);color:#fff;border-color:transparent}
.sp-plan-btn-ult:hover{background:linear-gradient(120deg,#7c3aed,#a855f7);color:#fff}
.sp-plan-note{max-width:900px;margin:32px auto 0;font-size:11.5px;line-height:1.65;color:rgba(28,10,74,.5);text-align:center}
/* equipment */
.sp-equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sp-dev{border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(28,10,74,.09);box-shadow:0 12px 34px -24px rgba(28,10,74,.4);transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s}
.sp-dev:hover{transform:translateY(-5px);box-shadow:0 28px 56px -28px rgba(218,41,28,.4)}
.sp-dev .sp-ph{border-radius:0}
.sp-dev-body{padding:20px 20px 22px}
.sp-dev-body h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:600;color:#1C0A4A;margin:0 0 8px}
.sp-dev-body p{font-size:13px;line-height:1.6;color:rgba(28,10,74,.64);margin:0 0 16px}
.sp-dev-btn{width:100%;padding:10px;border-radius:10px;border:1.5px solid rgba(218,41,28,.28);background:#fff;color:#1C0A4A;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .25s;font-family:inherit}
.sp-dev-btn:hover{background:rgba(218,41,28,.06);border-color:#DA291C}
.sp-equip-note{display:flex;align-items:flex-start;gap:12px;max-width:820px;margin:34px auto 0;padding:14px 18px;border-radius:12px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.2)}
.sp-equip-note svg{width:20px;height:20px;flex:0 0 20px;color:#0891B2;margin-top:1px}
.sp-equip-note p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(28,10,74,.62)}
/* included */
.sp-inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sp-inc{padding:24px 22px;border-radius:16px;background:#fff;border:1px solid rgba(28,10,74,.08);transition:transform .3s,box-shadow .3s,border-color .3s}
.sp-inc:hover{transform:translateY(-4px);border-color:rgba(6,182,212,.35);box-shadow:0 20px 44px -26px rgba(6,182,212,.5)}
.sp-inc-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);color:#0891B2;margin-bottom:14px}
.sp-inc-ico svg{width:20px;height:20px}
.sp-inc h4{font-size:14.5px;font-weight:700;color:#1C0A4A;margin:0 0 7px}
.sp-inc p{font-size:12.8px;line-height:1.6;color:rgba(28,10,74,.62);margin:0}
/* split sections */
.sp-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.sp-split-rev .sp-split-media{order:2}
.sp-split-media .sp-ph{box-shadow:0 26px 60px -32px rgba(28,10,74,.55)}
.sp-record{background:#fff}
.sp-urgent{background:linear-gradient(160deg,#1C0A4A,#0f0630);color:#fff}
.sp-urgent .sp-h2{color:#fff}
.sp-urgent .sp-sub{color:rgba(255,255,255,.72)}
.sp-urgent .sp-ph{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(6,182,212,.08));border-color:rgba(255,255,255,.22)}
.sp-urgent .sp-ph span{color:rgba(255,255,255,.55)}
.sp-caveat{margin-top:22px;padding:20px 22px;border-radius:14px;background:rgba(218,41,28,.09);border:1px solid rgba(218,41,28,.3)}
.sp-caveat h4{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FCA5A5;margin:0 0 12px}
.sp-caveat ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.sp-caveat li{position:relative;padding-left:18px;font-size:12.8px;line-height:1.6;color:rgba(255,255,255,.75)}
.sp-caveat li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#F0442E}
.sp-caveat b{color:#fff;font-weight:700}
.sp-btn-ghost-dark{margin-top:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.sp-local-row{display:flex;gap:34px;flex-wrap:wrap;margin:24px 0 26px}
.sp-local-item b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.7rem;color:#0891B2;line-height:1}
.sp-local-item span{display:block;font-size:12px;color:rgba(28,10,74,.55);margin-top:4px}
.sp-local{background:linear-gradient(180deg,#fbf8fe,#f4eefb)}
/* automation */
.sp-auto-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.sp-auto-card{border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(28,10,74,.09);box-shadow:0 14px 38px -26px rgba(28,10,74,.4);transition:transform .35s,box-shadow .35s}
.sp-auto-card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(184,102,255,.45)}
.sp-auto-card .sp-ph{border-radius:0}
.sp-auto-body{padding:20px 20px 22px}
.sp-auto-body h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:600;color:#1C0A4A;margin:0 0 8px}
.sp-auto-lg .sp-auto-body h3{font-size:1.3rem}
.sp-auto-body p{font-size:12.8px;line-height:1.6;color:rgba(28,10,74,.64);margin:0}
/* bundle band */
.sp-bundle{position:relative;overflow:hidden;isolation:isolate;background:#12060a}
.sp-bundle-bg{position:absolute;inset:0;z-index:0;display:block;line-height:0}
.sp-bundle-bg .sp-ph{height:100%;border-radius:0}
.sp-bundle-bg picture,.sp-bundle-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.sp-bundle-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(15,6,48,.9) 0%,rgba(15,6,48,.66) 32%,rgba(15,6,48,.72) 70%,rgba(15,6,48,.94) 100%)}
.sp-bundle>.wrap{position:relative;z-index:2}
.sp-bundle-inner{position:relative;text-align:center;max-width:880px;margin:0 auto;padding:52px 44px;border-radius:26px;
background:linear-gradient(150deg,rgba(28,10,74,.72),rgba(10,5,32,.82));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.sp-bundle-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#67E8F9;padding:6px 16px;border-radius:100px;background:rgba(6,182,212,.14);border:1px solid rgba(6,182,212,.32);margin-bottom:18px}
.sp-bundle-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.sp-bundle-chip{padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.sp-bundle-chip:hover{background:rgba(6,182,212,.2);transform:translateY(-2px);border-color:rgba(6,182,212,.4)}
.sp-bundle-eq{color:rgba(255,255,255,.4);font-size:15px;font-weight:600}
.sp-bundle-save{padding:10px 22px;border-radius:100px;background:linear-gradient(120deg,#0891B2,#06B6D4);color:#fff;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.sp-bundle-save b{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800}
.sp-bundle-save span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.88}
/* faq + cta */
.sp-faq{max-width:840px;margin:0 auto}
.sp-cta{background:linear-gradient(120deg,#DA291C 0%,#8B5CF6 55%,#0891B2 100%)}
.sp-cta-inner{text-align:center;max-width:760px;margin:0 auto}
.sp-cta-inner h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:600;color:#fff;margin:0 0 14px;letter-spacing:-.028em;text-transform:none}
.sp-cta-inner p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.85);margin:0 0 30px}
.sp-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sp-btn-white{background:#fff;color:#1C0A4A;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.sp-btn-white:hover{transform:translateY(-2px)}
@media(max-width:980px){
.sp-pillar-grid,.sp-plan-grid,.sp-equip-grid,.sp-inc-grid,.sp-auto-grid,.sp-split{grid-template-columns:1fr}
.sp-split{gap:34px}
.sp-split-rev .sp-split-media{order:0}
.sp-bundle-inner{padding:38px 24px}
.sp-bundle-row{flex-direction:column}
.sp-local-row{gap:22px}
}
/* ── hero device tooltips ── */
.sp-node,.sp-hub{cursor:pointer}
.sp-node:focus,.sp-hub:focus{outline:none}
.sp-node:focus-visible .sp-chip{stroke:#67E8F9;stroke-width:3.4}
.sp-hub:focus-visible{filter:drop-shadow(0 0 10px #67E8F9)}
.sp-tip{position:absolute;z-index:6;left:0;top:0;pointer-events:none;opacity:0;
transform:translate(-50%,-100%) translateY(-4px) scale(.95);transform-origin:50% 100%;
transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.4,.64,1);
width:max-content;min-width:184px;max-width:264px;padding:14px 18px 15px;border-radius:15px;text-align:left;
background:linear-gradient(158deg,rgba(38,22,72,.97) 0%,rgba(15,7,34,.98) 55%,rgba(8,4,20,.99) 100%);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 26px 60px -22px rgba(0,0,0,.92),0 0 40px -16px rgba(103,232,249,.4),inset 0 1px 0 rgba(255,255,255,.09);
backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.sp-tip::before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;border-radius:1px;
background:linear-gradient(90deg,transparent,rgba(103,232,249,.85),rgba(184,102,255,.7),transparent)}
.sp-tip::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);
background:rgb(9,4,22);border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.sp-tip.sp-tip-on{opacity:1;transform:translate(-50%,-100%) translateY(-14px) scale(1)}
.sp-tip.sp-tip-below{transform:translate(-50%,0) translateY(4px) scale(.95);transform-origin:50% 0}
.sp-tip.sp-tip-below.sp-tip-on{transform:translate(-50%,0) translateY(14px) scale(1)}
.sp-tip.sp-tip-below::after{top:-6px;bottom:auto;
border:none;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);
background:rgb(30,17,58)}
.sp-tip.sp-tip-below::before{top:auto;bottom:0}
.sp-tip-cat{display:inline-block;font-style:normal;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;color:#67E8F9;margin-bottom:8px;
padding:3px 8px;border-radius:5px;background:rgba(6,182,212,.14);border:1px solid rgba(6,182,212,.3)}
.sp-tip b{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:#fff;
letter-spacing:-.018em;line-height:1.2;margin-bottom:6px;white-space:normal;
text-shadow:0 1px 12px rgba(0,0,0,.6)}
.sp-tip span{display:block;font-family:'Inter',sans-serif;font-size:12.2px;font-weight:400;line-height:1.5;
color:rgba(255,255,255,.7)}
@media(max-width:900px){
.sp-tip{min-width:150px;max-width:200px;padding:11px 13px 12px;border-radius:13px}
.sp-tip b{font-size:13.2px}
.sp-tip span{font-size:11.4px}
.sp-tip-cat{font-size:8.4px;margin-bottom:6px}
}
/* ── /residential/security · automation grid: icon panels (photo-free cards) ── */
.sp-auto-ico{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
background:linear-gradient(150deg,#faf7ff 0%,#f2ecff 48%,#eaf7fa 100%);
border-bottom:1px solid rgba(28,10,74,.07)}
.sp-auto-ico::before{content:'';position:absolute;inset:0;
background:radial-gradient(120% 92% at 50% 110%,rgba(184,102,255,.2),transparent 64%)}
.sp-auto-ico::after{content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(45deg,transparent 0 13px,rgba(28,10,74,.02) 13px 26px)}
.sp-auto-ico svg{position:relative;z-index:1;width:52%;height:auto;overflow:visible;
fill:none;stroke:#1C0A4A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
transition:transform .38s cubic-bezier(.22,.7,.2,1)}
.sp-auto-card:hover .sp-auto-ico svg{transform:translateY(-3px)}
.sp-auto-ico .ai-soft{stroke:rgba(28,10,74,.3)}
.sp-auto-ico .ai-accent{stroke:#B866FF}
.sp-auto-ico .ai-fill{fill:rgba(28,10,74,.06);stroke:none}
.sp-auto-ico .ai-dot{fill:#F0442E;stroke:none}
.sp-auto-ico .ai-wave{stroke:#B866FF;opacity:.16;animation:spAiWave 3.2s ease-in-out infinite}
.sp-auto-ico .ai-wave.w2{animation-delay:.5s}
.sp-auto-ico .ai-wave.w3{animation-delay:1s}
@keyframes spAiWave{0%,100%{opacity:.14}50%{opacity:.62}}
.sp-auto-ico .ai-pulse{animation:spAiPulse 2.6s ease-in-out infinite}
@keyframes spAiPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
.sp-auto-ico .ai-wave,.sp-auto-ico .ai-pulse{animation:none}
.sp-auto-card:hover .sp-auto-ico svg{transform:none}
}
@media(max-width:980px){
.sp-auto-ico{aspect-ratio:16/7}
.sp-auto-ico svg{width:auto;height:64%}
}
/* ── /residential/security · hero header clearance ───────────────────────────
Line 358 of this file sets `.sec { padding-top:64px !important }` sitewide.
.sp-hero carries class="sec sp-hero", so every non-important padding rule for
the hero above is dead. Measured live: the floating header pill is 56px tall
with its bottom edge at y=72. 132px padding-top yields 60px of clearance.
!important is required here solely to answer the !important on line 358;
the selector is element-qualified so the blast radius is this one section. */
section.sp-hero{padding-top:132px !important;padding-bottom:36px !important}
@media(max-width:900px){
section.sp-hero{padding-top:108px !important;padding-bottom:32px !important}
}
/* ═══════════════════════════════════════════════════════════════════════════
/residential — residential hub (rh-*)
Hero reuses .sp-hero / .sp-bg / .sp-stage so it inherits the shader canvas
(initSpBg) and the interactive house network (initSpHero). Everything below
the hero is rh-* and self-contained.
═══════════════════════════════════════════════════════════════════════════ */
/* hero deltas — 4-up stats instead of the security page's 3-up */
.rh-hero .sp-stats.rh-stats{grid-template-columns:repeat(4,1fr);max-width:1060px}
.rh-hero .rh-stats .sp-stat{padding:20px 18px}
.rh-hero .rh-stats .sp-stat-num{font-size:2rem;letter-spacing:-.02em}
.rh-hero .sp-h1{max-width:15ch;margin-left:auto;margin-right:auto}
@media(max-width:980px){.rh-hero .sp-stats.rh-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rh-hero .sp-stats.rh-stats{grid-template-columns:1fr}}
/* shared type + buttons */
.rh-head{max-width:720px;margin:0 auto 44px}
.rh-head.center{text-align:center}
.rh-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B866FF;margin-bottom:12px}
.rh-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.65rem,2.9vw,2.4rem);font-weight:600;color:#1C0A4A;line-height:1.14;letter-spacing:-.028em;margin:0 0 14px;text-transform:none}
.rh-sub{font-size:15px;line-height:1.68;color:rgba(28,10,74,.66);margin:0}
.rh-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:11px;font-size:14.5px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:transform .3s cubic-bezier(.22,.7,.2,1),box-shadow .3s,background .3s}
.rh-btn-primary{background:linear-gradient(120deg,#B866FF,#7C3AED);color:#fff;box-shadow:0 14px 32px -16px rgba(184,102,255,.9)}
.rh-btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(184,102,255,.95)}
.rh-btn-white{background:#fff;color:#1C0A4A;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.rh-btn-white:hover{transform:translateY(-2px)}
.rh-ticks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px}
.rh-ticks li{position:relative;padding-left:28px;font-size:14.2px;line-height:1.6;color:rgba(28,10,74,.74)}
.rh-ticks li::before{content:'';position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
background:radial-gradient(circle at 50% 45%,#B866FF,#7C3AED)}
.rh-ticks li::after{content:'';position:absolute;left:5px;top:11px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
/* trust bar */
.rh-trust{background:#12071f;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.rh-trust-inner{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;padding:16px 0;
font-size:12.6px;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.rh-trust-lead{font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:11px;color:#B1A6FF}
.rh-trust-sep{width:1px;height:14px;background:rgba(255,255,255,.16)}
.rh-trust-item{position:relative;padding-left:16px}
.rh-trust-item::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:#F0442E;opacity:.75}
/* service grid */
.rh-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rh-svc{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;text-decoration:none;
border:1px solid rgba(28,10,74,.09);box-shadow:0 16px 40px -28px rgba(28,10,74,.45);
transition:transform .4s cubic-bezier(.22,.7,.2,1),box-shadow .4s,border-color .4s}
.rh-svc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--dc) 46%,transparent);box-shadow:0 34px 64px -30px color-mix(in srgb,var(--dc) 60%,transparent)}
.rh-svc-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#12060a}
.rh-svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.7,.2,1)}
.rh-svc:hover .rh-svc-media img{transform:scale(1.06)}
.rh-svc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,4,26,.72) 100%)}
.rh-svc-tag{position:absolute;left:14px;bottom:13px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:#fff;padding:5px 11px;border-radius:100px;background:color-mix(in srgb,var(--dc) 84%,#000);box-shadow:0 6px 18px -8px rgba(0,0,0,.8)}
.rh-svc-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.rh-svc-body h3{font-family:'Space Grotesk',sans-serif;font-size:1.08rem;font-weight:600;color:#1C0A4A;margin:0 0 8px;letter-spacing:-.015em}
.rh-svc-body p{font-size:13px;line-height:1.62;color:rgba(28,10,74,.64);margin:0 0 16px;flex:1}
.rh-svc-go{display:inline-flex;align-items:center;gap:7px;font-size:12.6px;font-weight:700;letter-spacing:.02em;color:var(--dc)}
.rh-svc-go svg{transition:transform .3s}
.rh-svc:hover .rh-svc-go svg{transform:translateX(4px)}
/* bundle band */
.rh-bundle{position:relative;overflow:hidden;isolation:isolate;background:#12060a}
.rh-bundle-bg{position:absolute;inset:0;z-index:0;line-height:0}
.rh-bundle-bg picture,.rh-bundle-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block}
.rh-bundle-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(10,4,28,.94) 0%,rgba(10,4,28,.82) 40%,rgba(10,4,28,.34) 74%,rgba(10,4,28,.2) 100%)}
.rh-bundle .wrap{position:relative;z-index:2}
.rh-bundle-inner{max-width:640px}
.rh-bundle-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
padding:6px 13px;border-radius:100px;margin-bottom:16px;background:linear-gradient(120deg,#F0442E,#B81A0E)}
.rh-bundle-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 26px}
.rh-chip{display:inline-flex;align-items:center;padding:9px 15px;border-radius:100px;font-size:13px;font-weight:600;text-decoration:none;
color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);transition:.28s}
.rh-chip:hover{background:rgba(184,102,255,.24);border-color:rgba(184,102,255,.6);transform:translateY(-2px)}
.rh-bundle-eq{font-size:20px;font-weight:700;color:rgba(255,255,255,.42);padding:0 4px}
.rh-bundle-save{display:flex;flex-direction:column;line-height:1.15;padding:8px 16px;border-radius:12px;
background:linear-gradient(120deg,rgba(184,102,255,.24),rgba(6,182,212,.18));border:1px solid rgba(184,102,255,.4)}
.rh-bundle-save b{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;color:#fff}
.rh-bundle-save span{font-size:11px;color:rgba(255,255,255,.62)}
/* alternating photo bands */
.rh-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.rh-band-rev .rh-split-media{order:2}
.rh-ph{position:relative;aspect-ratio:var(--ar,3/2);border-radius:18px;overflow:hidden;background:#12060a;
box-shadow:0 26px 60px -34px rgba(28,10,74,.7)}
.rh-ph picture,.rh-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rh-split-text .rh-h2{margin-top:0}
/* mobility float strip */
.rh-devices{position:relative;overflow:hidden;background:linear-gradient(180deg,#0d0722,#150a33)}
.rh-devices .rh-h2{color:#fff}
.rh-devices .rh-sub{color:rgba(255,255,255,.66)}
.rh-dev-glow{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 70% 60% at 50% 105%,rgba(184,102,255,.28),transparent 62%)}
.rh-devices .wrap{position:relative;z-index:1}
.rh-float-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3vw,44px);margin:8px 0 34px;min-height:260px}
.rh-float{filter:drop-shadow(0 30px 44px rgba(0,0,0,.6));animation:rhFloat 6.4s ease-in-out infinite}
.rh-float img{display:block;width:100%;height:auto}
.rh-float.f1{width:clamp(70px,10vw,124px);animation-delay:0s}
.rh-float.f2{width:clamp(64px,9vw,112px);animation-delay:.5s}
.rh-float.f3{width:clamp(96px,14vw,178px);animation-delay:1s}
.rh-float.f4{width:clamp(52px,7vw,92px);animation-delay:1.5s}
.rh-float.f5{width:clamp(58px,8vw,104px);animation-delay:2s}
@keyframes rhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.rh-dev-cta{text-align:center}
/* local + faq */
.rh-local-row{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0 26px}
.rh-local-item{display:flex;flex-direction:column;line-height:1.25}
.rh-local-item b{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;color:#1C0A4A}
.rh-local-item span{font-size:12px;color:rgba(28,10,74,.58);margin-top:4px}
.rh-faq-sec{background:#F7F4FE}
.rh-faq{display:grid;gap:12px}
@media(prefers-reduced-motion:reduce){
.rh-float{animation:none}
.rh-svc:hover{transform:none}
.rh-svc:hover .rh-svc-media img{transform:none}
}
@media(max-width:1080px){.rh-svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:980px){
.rh-split{grid-template-columns:1fr;gap:32px}
.rh-band-rev .rh-split-media{order:0}
.rh-bundle-inner{max-width:none}
.rh-bundle-scrim{background:linear-gradient(180deg,rgba(10,4,28,.72) 0%,rgba(10,4,28,.92) 60%)}
.rh-float-row{min-height:180px;gap:12px}
}
@media(max-width:620px){
.rh-svc-grid{grid-template-columns:1fr}
.rh-trust-inner{gap:12px;font-size:11.6px}
.rh-bundle-row{gap:8px}
}
/* ═══════════════════════════════════════════════════════════════════════════
/contact/residential — consolidated residential contact page
Follows the tbc-* contract used by /contact/business-internet et al.
Accent: Lavender Violet #B866FF (residential), Rogers red for the badge dot.
═══════════════════════════════════════════════════════════════════════════ */
.tbc-hero-res .tbc-hb1{background:radial-gradient(circle,rgba(184,102,255,.18),transparent 66%)}
.tbc-hero-res .tbc-hb2{background:radial-gradient(circle,rgba(240,68,46,.10),transparent 66%)}
.tbc-hero-res .tbc-hero-badge{background:rgba(184,102,255,.1);border-color:rgba(184,102,255,.3);color:#C79BFF}
.tbc-hero-res .tbc-bolt{color:#D9B4FF;filter:drop-shadow(0 0 4px rgba(184,102,255,.7))}
.tbc-form-res .tbc-form-badge{background:rgba(184,102,255,.1);border-color:rgba(184,102,255,.28);color:#B866FF}
.tbc-form-res .tbc-form-badge .tbc-bolt{color:#C79BFF}
.tbc-form-res .tb-mode:hover{border-color:rgba(184,102,255,.42);background:rgba(184,102,255,.05)}
.tbc-form-res .tb-mode-ic{background:rgba(184,102,255,.12);border-color:rgba(184,102,255,.26);color:#B866FF}
.tbc-form-res .tb-mode-on{border-color:#B866FF;background:rgba(184,102,255,.12);box-shadow:0 0 0 1px rgba(184,102,255,.5),0 10px 26px -12px rgba(184,102,255,.6)}
.tbc-form-res .tb-mode-on .tb-mode-ic{background:#B866FF;border-color:#B866FF;color:#1C0A4A}
.tbc-form-res .tbc-field input:focus,.tbc-form-res .tbc-field textarea:focus,.tbc-form-res .tbc-field select:focus{border-color:rgba(184,102,255,.55)}
.tbc-submit-res{background:linear-gradient(135deg,#B866FF,#7C3AED);color:#fff}
.tbc-submit-res:hover{box-shadow:0 16px 40px -14px rgba(184,102,255,.8)}
.tbc-submit-res .tbc-bolt{color:#fff}
.tbc-form-res ~ .tbc-side .tbc-step-n{color:#B866FF;background:rgba(184,102,255,.12);border-color:rgba(184,102,255,.3)}
.tbc-form-res ~ .tbc-side .tbc-ci-ic{color:#B866FF}
.tbc-form-res ~ .tbc-side .tbc-ci a:hover{color:#B866FF}
.tbc-form-res .tb-form-success-ico{background:linear-gradient(135deg,#B866FF,#7C3AED)}
/* hero chips */
.rc-hero-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.rc-hero-chip{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72);
padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
/* numbered step headings inside the form card */
.rc-step{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:11.5px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:#C79BFF}
.rc-step::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(184,102,255,.34),transparent)}
/* checkbox + pill selectors — these sit on .tbc-main's dark gradient */
.rc-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.rc-check{position:relative;display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:12px;cursor:pointer;
border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:border-color .25s,background .25s,transform .25s}
.rc-check:hover{border-color:rgba(184,102,255,.5);background:rgba(184,102,255,.06);transform:translateY(-1px)}
.rc-check input{appearance:none;width:19px;height:19px;flex:0 0 19px;border-radius:6px;cursor:pointer;
border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);transition:.2s}
.rc-check input:checked{background:#B866FF;border-color:#B866FF;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:13px;background-position:center;background-repeat:no-repeat}
.rc-check input:focus-visible{outline:2px solid #B866FF;outline-offset:2px}
.rc-check:has(input:checked){border-color:#B866FF;background:rgba(184,102,255,.12);
box-shadow:0 0 0 1px rgba(184,102,255,.4)}
.rc-check span{font-size:13.6px;font-weight:600;color:rgba(255,255,255,.86)}
.rc-pills{display:flex;gap:9px;flex-wrap:wrap}
.rc-pill{position:relative;cursor:pointer}
.rc-pill input{position:absolute;opacity:0;width:0;height:0}
.rc-pill span{display:inline-flex;align-items:center;padding:10px 17px;border-radius:100px;font-size:13.2px;font-weight:600;
color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);transition:.24s}
.rc-pill:hover span{border-color:rgba(184,102,255,.5);color:#fff;background:rgba(184,102,255,.07)}
.rc-pill input:checked + span{background:rgba(184,102,255,.16);border-color:#B866FF;color:#fff;
box-shadow:0 0 0 1px rgba(184,102,255,.45)}
.rc-pill input:focus-visible + span{outline:2px solid #B866FF;outline-offset:2px}
/* consent */
.rc-consent{display:flex;align-items:flex-start;gap:11px;margin:22px 0 18px;cursor:pointer}
.rc-consent input{appearance:none;width:19px;height:19px;flex:0 0 19px;margin-top:1px;border-radius:6px;cursor:pointer;
border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);transition:.2s}
.rc-consent input:checked{background:#B866FF;border-color:#B866FF;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:13px;background-position:center;background-repeat:no-repeat}
.rc-consent input:focus-visible{outline:2px solid #B866FF;outline-offset:2px}
.rc-consent span{font-size:12.6px;line-height:1.6;color:rgba(255,255,255,.55)}
/* image slots — sized by --ar. Dashed while empty; solid once a lands. */
.tbc-ad-res{aspect-ratio:var(--ar,4/3);min-height:0;
background:linear-gradient(150deg,rgba(184,102,255,.1),rgba(6,182,212,.06));
border:1.5px dashed rgba(184,102,255,.4)}
.tbc-ad-res:has(picture){border:1px solid rgba(255,255,255,.09);background:#0e0820}
.tbc-ad-res:has(picture) picture{display:block;width:100%;height:100%}
.tbc-ad-res:has(picture) img{display:block;width:100%;height:100%;object-fit:cover}
.tbc-ad-res .tbc-ad-ph{color:rgba(255,255,255,.62);text-align:center;padding:18px}
.tbc-ad-res .tbc-ad-ph svg{color:#C79BFF;opacity:.85}
.tbc-ad-res .tbc-ad-ph em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:500;
letter-spacing:.02em;color:rgba(255,255,255,.38)}
.rc-faq-sec{background:#F7F4FE}
@media(max-width:620px){
.rc-checks{grid-template-columns:1fr}
.rc-step{margin-top:22px}
}
/* ============================================================================
FLAGSHIP SYSTEM (.sd-*) — shared by /solutions/software-development and
/solutions/automation. sd pages use it as-is (accent #0B5FFF); automation
sections add the .au scope class, recoloured violet by the .au overrides
at the end of this file. Mirrors the .mi-* flagship system. Never uses .sec (line 358 sets
padding !important sitewide and would fight these sections).
============================================================================ */
/* ---- Buttons ---- */
.sd-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;cursor:pointer}
.sd-btn-primary{background:linear-gradient(135deg,#0B5FFF,#0A3FB0);color:#fff;border:none}
.sd-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(11,95,255,.7)}
.sd-btn-primary svg{transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.sd-btn-primary:hover svg{transform:translateX(4px)}
.sd-btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.16)}
.sd-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* ---- Hero ---- */
.sd-hero{position:relative;padding:128px 0 80px;background:linear-gradient(180deg,#080b20,#0b0d26);overflow:hidden}
.sd-hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.sd-hero-blob{position:absolute;border-radius:50%;filter:blur(70px)}
.sd-hb1{top:-16%;left:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(11,95,255,.18),transparent 66%)}
.sd-hb2{bottom:-24%;right:-8%;width:560px;height:560px;background:radial-gradient(circle,rgba(45,212,207,.12),transparent 66%)}
.sd-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(11,95,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,95,255,.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%)}
.sd-hero-inner{position:relative;z-index:2}
.sd-hero-badge{display:inline-flex;align-items:center;gap:8px;margin:16px 0 18px;padding:7px 15px;border-radius:40px;background:rgba(11,95,255,.12);border:1px solid rgba(11,95,255,.32);font-size:12.5px;font-weight:600;color:#93B8FF}
.sd-badge-dot{width:7px;height:7px;border-radius:50%;background:#0B5FFF;box-shadow:0 0 0 0 rgba(11,95,255,.6);animation:sdPulse 2s infinite}
@keyframes sdPulse{0%{box-shadow:0 0 0 0 rgba(11,95,255,.5)}70%{box-shadow:0 0 0 8px rgba(11,95,255,0)}100%{box-shadow:0 0 0 0 rgba(11,95,255,0)}}
.sd-hero-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(34px,5vw,56px);line-height:1.05;color:#fff;letter-spacing:-.02em;margin:0 0 18px;max-width:820px}
.sd-hero-sub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.6);max-width:690px;margin:0 0 26px}
.sd-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
/* Code-frame motif (replaces the carrier co-brand plate — this practice is not carrier-delivered) */
.sd-codeframe{max-width:520px;margin-bottom:34px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sd-cf-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.sd-cf-dot{width:10px;height:10px;border-radius:50%}
.sd-cf-dot:nth-child(1){background:#F2554D}.sd-cf-dot:nth-child(2){background:#F59E0B}.sd-cf-dot:nth-child(3){background:#22C55E}
.sd-cf-name{margin-left:8px;font-size:11.5px;color:rgba(255,255,255,.42)}
.sd-cf-body{padding:14px 16px;font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.62)}
.sd-cf-body .k{color:#B866FF}.sd-cf-body .s{color:#2DD4CF}.sd-cf-body .c{color:rgba(255,255,255,.3)}
.sd-cf-cursor{display:inline-block;width:7px;height:14px;background:#0B5FFF;vertical-align:-2px;animation:sdBlink 1.1s steps(1) infinite}
@keyframes sdBlink{50%{opacity:0}}
.sd-hero-trust{display:grid;grid-template-columns:repeat(4,auto);gap:34px;flex-wrap:wrap}
.sd-htrust b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(22px,3vw,30px);color:#fff;line-height:1;margin-bottom:6px}
.sd-htrust span{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.4;max-width:180px;display:block}
/* ---- Ticker ---- */
.sd-ticker-sec{background:#080a1c;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0;overflow:hidden}
.sd-ticker{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sd-ticker-row{display:flex;align-items:center;gap:22px;white-space:nowrap;animation:sdTicker 34s linear infinite;padding-right:22px}
.sd-ticker-row span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:rgba(255,255,255,.72)}
.sd-ticker-row i{color:#0B5FFF;font-style:normal}
@keyframes sdTicker{to{transform:translateX(-50%)}}
/* ---- Why ---- */
.sd-why{padding:88px 0;background:#0b0d26}
.sd-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.sd-why-card{padding:26px 22px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s}
.sd-why-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 40%,transparent);background:color-mix(in srgb,var(--ac) 6%,rgba(255,255,255,.01))}
.sd-why-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:16px}
.sd-why-ico svg{width:24px;height:24px}
.sd-why-card h3{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
.sd-why-card p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55)}
/* ---- Practices (product grid) ---- */
.sd-products{position:relative;padding:88px 0;background:#080a1c;overflow:hidden}
.sd-products-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.sd-prod-blob{position:absolute;top:10%;right:-6%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(11,95,255,.11),transparent 66%);filter:blur(60px)}
.sd-products .wrap{position:relative;z-index:1}
.sd-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.sd-prod-card{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .4s cubic-bezier(.22,.7,.2,1),border-color .4s,background .4s,box-shadow .4s}
.sd-prod-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ac) 80%,transparent)}
.sd-prod-feature{background:linear-gradient(165deg,color-mix(in srgb,var(--ac) 12%,rgba(255,255,255,.02)),rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--ac) 34%,transparent)}
.sd-prod-tag{position:absolute;top:16px;right:16px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ac);padding:4px 10px;border-radius:20px}
.sd-prod-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.sd-prod-ico{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--ac);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--ac) 90%,transparent)}
.sd-prod-ico svg{width:24px;height:24px}
.sd-prod-head h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17.5px;color:#fff}
.sd-prod-desc{margin:0 0 18px;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.6)}
.sd-prod-specs{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.sd-spec{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.06)}
.sd-spec-k{color:rgba(255,255,255,.45);flex-shrink:0}
.sd-spec-v{color:rgba(255,255,255,.82);text-align:right;font-weight:500}
.sd-prod-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.sd-prod-chips span{font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;color:color-mix(in srgb,var(--ac) 80%,#fff);background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 26%,transparent)}
.sd-prod-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ac);text-decoration:none;padding:9px 16px;border-radius:9px;background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);transition:background .25s,border-color .25s,transform .2s}
.sd-prod-cta:hover{background:color-mix(in srgb,var(--ac) 20%,transparent);border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-1px)}
.sd-prod-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.sd-prod-cta:hover svg{transform:translateX(4px)}
/* ---- Stack matrix (typography, not logo chips — avoids missing partner assets) ---- */
.sd-stack{padding:88px 0;background:#0b0d26}
.sd-stack-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sd-stack-col{padding:26px 22px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.08);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
.sd-stack-col:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 38%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 7%,transparent),rgba(255,255,255,.012))}
.sd-stack-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.sd-stack-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent)}
.sd-stack-ico svg{width:20px;height:20px}
.sd-stack-col h4{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:#fff}
/* Logo tiles. Mirrors the proven .sc-logo pattern on /solutions/b2b-acquisition:
white plate, contained mark, caption beneath. The mark sits in a fixed-height
"well" so wide logos (AWS) use the full tile width instead of being boxed into
a square and shrunk. object-fit:contain guarantees nothing is ever cropped. */
.sd-stack-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;align-content:start}
.sd-logo{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:15px 9px 12px;border-radius:13px;background:linear-gradient(180deg,#fff,#F6F7FA);border:1px solid rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 9px 22px -12px rgba(0,0,0,.65);transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s}
.sd-logo:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 60%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 30px -12px color-mix(in srgb,var(--ac) 55%,rgba(0,0,0,.6))}
.sd-logo-well{width:100%;height:34px;display:flex;align-items:center;justify-content:center}
.sd-logo-well img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.sd-logo span{font-size:10.5px;font-weight:600;color:#2B2540;text-align:center;line-height:1.2;letter-spacing:.005em}
.sd-stack-note{margin:34px auto 0;text-align:center;font-size:14px;color:rgba(255,255,255,.55);max-width:680px}
/* ---- Lifecycle rail ---- */
.sd-lifecycle{padding:88px 0;background:#080a1c}
.sd-life{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:50px}
.sd-life-line{position:absolute;top:29px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,#0B5FFF,#2DD4CF,#8B5CF6,#B866FF,#F59E0B,#22C55E);opacity:.4;z-index:0}
.sd-life-step{position:relative;z-index:1;text-align:center;padding:0 4px}
.sd-life-node{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#080a1c;border:2px solid var(--ac);color:var(--ac);box-shadow:0 0 0 6px #080a1c,0 10px 26px -12px color-mix(in srgb,var(--ac) 90%,transparent);transition:transform .3s ease}
.sd-life-step:hover .sd-life-node{transform:translateY(-4px) scale(1.05)}
.sd-life-node svg{width:26px;height:26px}
.sd-life-num{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ac);margin-bottom:6px}
.sd-life-step h4{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff}
.sd-life-step p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.5)}
/* ---- Ad band ---- */
.sd-adband{padding:80px 0;background:#0b0d26}
.sd-ad{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.sd-ad-media{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;box-shadow:0 30px 70px -34px rgba(11,95,255,.45)}
.sd-ad-media img{display:block;width:100%;height:100%;object-fit:cover}
.sd-ad-content .eyebrow{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sd-ad-content h3{margin:0 0 15px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(23px,2.6vw,30px);line-height:1.16;color:#fff;letter-spacing:-.01em}
.sd-ad-content>p{margin:0 0 20px;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.6)}
.sd-ad-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.sd-ad-list li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.78)}
.sd-ad-list svg{flex-shrink:0;width:18px;height:18px;margin-top:3px}
.sd-ad-note{margin:0 0 22px;padding:13px 16px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5)}
.sd-inline-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:#4D8DFF;text-decoration:none;padding:12px 22px;border-radius:11px;background:rgba(11,95,255,.12);border:1px solid rgba(11,95,255,.34);transition:background .25s,border-color .25s,transform .2s}
.sd-inline-cta:hover{background:rgba(11,95,255,.2);border-color:rgba(11,95,255,.6);transform:translateY(-1px)}
.sd-inline-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.sd-inline-cta:hover svg{transform:translateX(4px)}
/* ---- Choose ---- */
.sd-choose{padding:88px 0;background:#080a1c}
.sd-choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.sd-choose-card{text-align:left;padding:24px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .3s,border-color .3s,background .3s;font-family:inherit}
.sd-choose-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 42%,transparent);background:color-mix(in srgb,var(--ac) 6%,transparent)}
.sd-choose-card.active{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);box-shadow:0 0 0 1px var(--ac),0 16px 40px -18px color-mix(in srgb,var(--ac) 80%,transparent)}
.sd-choose-ico{display:flex;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:14px}
.sd-choose-ico svg{width:22px;height:22px}
.sd-choose-card h4{margin:0 0 7px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff}
.sd-choose-card p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.52)}
.sd-choose-result{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s,margin .4s;margin-top:0}
.sd-choose-result.show{max-height:280px;opacity:1;margin-top:24px}
.sd-choose-result-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 26px;border-radius:16px;background:linear-gradient(135deg,rgba(11,95,255,.14),rgba(45,212,207,.07));border:1px solid rgba(11,95,255,.26)}
.sd-choose-result-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0B5FFF,#0A3FB0)}
.sd-choose-result-inner p{flex:1;min-width:220px;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.85)}
.sd-choose-result-inner p strong{color:#fff}
.sd-choose-cta{flex-shrink:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:#fff;text-decoration:none;padding:11px 20px;border-radius:10px;background:rgba(11,95,255,.24);border:1px solid rgba(11,95,255,.5);transition:background .25s,transform .2s}
.sd-choose-cta:hover{background:rgba(11,95,255,.36);transform:translateY(-1px)}
/* ---- Engagement models (replaces published price bands) ---- */
.sd-engage{padding:88px 0;background:#0b0d26}
.sd-eng-note{margin:34px auto 0;text-align:center;font-size:14px;line-height:1.65;color:rgba(255,255,255,.55);max-width:660px}
.sd-eng-note a{color:#4D8DFF;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(11,95,255,.4);transition:border-color .2s}
.sd-eng-note a:hover{border-color:#4D8DFF}
/* ---- FAQ ---- */
.sd-faq-sec{padding:88px 0;background:#080a1c}
.sd-faq{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px}
.sd-faq-item{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .3s}
.sd-faq-item.open{border-color:rgba(11,95,255,.34)}
.sd-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;background:none;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:#fff;text-align:left}
.sd-faq-ic{flex-shrink:0;position:relative;width:16px;height:16px}
.sd-faq-ic::before,.sd-faq-ic::after{content:"";position:absolute;background:#0B5FFF;border-radius:2px;transition:transform .3s}
.sd-faq-ic::before{top:7px;left:0;width:16px;height:2px}
.sd-faq-ic::after{top:0;left:7px;width:2px;height:16px}
.sd-faq-item.open .sd-faq-ic::after{transform:scaleY(0)}
.sd-faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
.sd-faq-a p{margin:0;padding:0 22px 20px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.6)}
/* ---- Final CTA ---- */
.sd-final{position:relative;padding:96px 0;background:linear-gradient(180deg,#080a1c,#0b0d26);overflow:hidden;text-align:center}
.sd-final-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.sd-final-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:640px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(11,95,255,.16),rgba(184,102,255,.12) 45%,transparent 70%);filter:blur(60px)}
.sd-final-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
/* Centred eyebrow: display:block killed the flex context, so justify-content went
inert and the ::before dash collapsed flush against the text. Restore inline-flex
and mirror the dash so a centred label reads symmetric. currentColor picks up the
inline accent instead of the base --teal. */
.sd-final-inner .eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sd-final-inner .eyebrow::before,.sd-final-inner .eyebrow::after{content:"" !important;flex:none;width:26px;height:1.5px;background:currentColor;opacity:.55;display:inline-block}
.sd-final-inner h2{margin:0 0 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(27px,3.6vw,40px);line-height:1.1;color:#fff;letter-spacing:-.02em}
.sd-final-inner>p{margin:0 0 28px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.6)}
.sd-final-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.sd-final-trust{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.65)}
.sd-bolt{display:inline-flex;color:#FDE047;filter:drop-shadow(0 0 4px rgba(253,224,71,.7));animation:tbBolt 2.4s steps(1) infinite}
/* ---- Contact page accent variant (/contact/software-development) ---- */
.tbc-hero-sd .tbc-hb1{background:radial-gradient(circle,rgba(11,95,255,.18),transparent 66%)}
.tbc-hero-sd .tbc-hb2{background:radial-gradient(circle,rgba(45,212,207,.12),transparent 66%)}
.tbc-hero-sd .tbc-hero-badge{background:rgba(11,95,255,.12);border-color:rgba(11,95,255,.32);color:#93B8FF}
.tbc-hero-sd .tbc-bolt{color:#FDE047}
.tbc-form-sd .tbc-form-badge{background:rgba(11,95,255,.12);border-color:rgba(11,95,255,.3);color:#93B8FF}
.tbc-form-sd .tb-mode:hover{border-color:rgba(11,95,255,.42);background:rgba(11,95,255,.05)}
.tbc-form-sd .tb-mode-ic{background:rgba(11,95,255,.14);border-color:rgba(11,95,255,.28);color:#4D8DFF}
.tbc-form-sd .tb-mode-on{border-color:#0B5FFF;background:rgba(11,95,255,.14);box-shadow:0 0 0 1px rgba(11,95,255,.5),0 10px 26px -12px rgba(11,95,255,.6)}
.tbc-form-sd .tb-mode-on .tb-mode-ic{background:#0B5FFF;border-color:#0B5FFF;color:#04102b}
.tbc-form-sd .tbc-field input:focus,.tbc-form-sd .tbc-field textarea:focus,.tbc-form-sd .tbc-field select:focus{border-color:rgba(11,95,255,.58);background:rgba(11,95,255,.05)}
.tbc-form-sd .tb-postal-note.ok{color:#4D8DFF}
.tbc-form-sd ~ .tbc-side .tbc-step-n{color:#4D8DFF;background:rgba(11,95,255,.14);border-color:rgba(11,95,255,.32)}
.tbc-form-sd ~ .tbc-side .tbc-ci-ic{color:#4D8DFF}
.tbc-form-sd ~ .tbc-side .tbc-ci a:hover{color:#4D8DFF}
.tbc-form-sd .tb-form-success-ico{background:linear-gradient(135deg,#0B5FFF,#0A3FB0)}
.tbc-submit-sd{background:linear-gradient(135deg,#0B5FFF,#0A3FB0);color:#fff}
.tbc-submit-sd:hover{box-shadow:0 16px 40px -14px rgba(11,95,255,.7)}
.tbc-submit-sd .tbc-bolt{color:#FDE047}
/* ---- Responsive ---- */
@media(max-width:1000px){
.sd-why-grid{grid-template-columns:repeat(2,1fr)}
.sd-prod-grid{grid-template-columns:repeat(2,1fr)}
.sd-stack-grid{grid-template-columns:repeat(2,1fr)}
.sd-choose-grid{grid-template-columns:repeat(2,1fr)}
.sd-life{grid-template-columns:repeat(3,1fr);gap:30px 14px}
.sd-life-line{display:none}
.sd-life-node{box-shadow:0 0 0 4px #080a1c}
.sd-hero-trust{grid-template-columns:repeat(2,1fr);gap:22px}
.sd-ad{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
.sd-hero{padding:104px 0 64px}
.sd-why-grid,.sd-prod-grid,.sd-stack-grid,.sd-choose-grid{grid-template-columns:1fr}
.sd-life{grid-template-columns:repeat(3,1fr);gap:20px 8px}
.sd-life-line{display:none}
.sd-life-node{width:48px;height:48px;box-shadow:0 0 0 4px #080a1c}
.sd-codeframe{max-width:100%}
.sd-why,.sd-products,.sd-stack,.sd-lifecycle,.sd-choose,.sd-engage,.sd-faq-sec{padding:64px 0}
.sd-final{padding:72px 0}
.sd-choose-result-inner{flex-direction:column;align-items:flex-start}
}
/* ---- Selected Work (case studies) ----
Sits between .sd-stack (#0b0d26) and .sd-lifecycle (#080a1c), so the
background BRIDGES the two rather than repeating either one.
Client names withheld: cards are de-identified by design. */
.sd-work{padding:88px 0;background:linear-gradient(180deg,#0b0d26,#080a1c)}
.sd-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.sd-work-card{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 7%,rgba(255,255,255,.03)),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .4s cubic-bezier(.22,.7,.2,1),border-color .4s,box-shadow .4s}
/* Full-bleed abstract interface art. No screenshots: these products are
de-identified, so the geometry evokes the UI without naming the client. */
.sd-work-viz{position:relative;margin:-26px -24px 20px;padding-bottom:46.875%;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07);background:
radial-gradient(ellipse 68% 96% at 50% 108%, color-mix(in srgb,var(--ac) 20%,transparent), transparent 72%),
linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
#070a18;
background-size:auto,26px 26px,26px 26px}
.sd-work-viz svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sd-work-card:hover .sd-work-viz svg{transform:scale(1.035)}
.sd-work-idx{position:absolute;top:12px;right:14px;z-index:2;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.28)}
.sd-work-card:hover .sd-work-idx{color:color-mix(in srgb,var(--ac) 70%,#fff)}
.sd-work-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 50%,transparent);box-shadow:0 28px 70px -32px color-mix(in srgb,var(--ac) 90%,transparent)}
.sd-work-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ac);opacity:.65}
.sd-work-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.sd-work-sector{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--ac) 72%,#fff);line-height:1.5}
.sd-work-plats{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;flex-shrink:0}
.sd-work-plats span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.sd-work-card h3{margin:0 0 10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17.5px;line-height:1.25;color:#fff}
.sd-work-problem{margin:0 0 18px;font-size:13px;line-height:1.62;color:rgba(255,255,255,.52)}
.sd-work-label{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:11px}
.sd-work-built{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.sd-work-built li{position:relative;padding-left:19px;font-size:12.5px;line-height:1.52;color:rgba(255,255,255,.7)}
.sd-work-built li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--ac);opacity:.8}
.sd-work-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.sd-work-stack span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:500;padding:4px 9px;border-radius:7px;color:color-mix(in srgb,var(--ac) 78%,#fff);background:color-mix(in srgb,var(--ac) 10%,transparent);border:1px solid color-mix(in srgb,var(--ac) 24%,transparent)}
/* User stories are requirement statements from the spec — NOT client testimonials.
Deliberately not styled as a pull-quote, so they can never read as one. */
.sd-work-story{margin-top:auto;padding:14px 16px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-left:2px solid color-mix(in srgb,var(--ac) 55%,transparent)}
.sd-work-story-label{display:block;font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:7px}
.sd-work-story p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62);font-style:italic}
.sd-work-note{margin:34px auto 0;max-width:720px;text-align:center;padding:16px 20px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.65;color:rgba(255,255,255,.5)}
.sd-work-note b{color:rgba(255,255,255,.75);font-weight:600}
@media(max-width:1000px){ .sd-work-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){
.sd-work{padding:64px 0}
.sd-work-grid{grid-template-columns:1fr}
.sd-work-top{flex-direction:column;gap:8px}
.sd-work-plats{justify-content:flex-start}
}
/* ---- Image placeholders (sd pages) ----
Same convention as .mi-ad-ph. Each placeholder displays its slot id and the
exact asset spec, so sourcing the photo needs no code spelunking. Swap by
replacing the .sd-ph div with the block commented beside it. */
.sd-ph{position:relative;width:100%;height:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,.32);background:linear-gradient(135deg,rgba(11,95,255,.07),rgba(45,212,207,.05));border:1.5px dashed rgba(255,255,255,.17);border-radius:inherit;text-align:center;padding:18px}
.sd-ph svg{width:36px;height:36px;opacity:.55}
.sd-ph b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.05em;color:rgba(255,255,255,.5)}
.sd-ph span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.3)}
/* ---- Craft band (full-bleed cinematic break) ----
Sits between sd-products (#080a1c) and sd-stack (#0b0d26); owns its height,
so it reads as a visual rest between two card grids. */
.sd-craft{position:relative;background:#080a1c;overflow:hidden}
.sd-craft-media{position:relative;height:clamp(300px,42vw,440px)}
.sd-craft-media picture,.sd-craft-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sd-craft-media .sd-ph{position:absolute;inset:0;border-radius:0;border-left:none;border-right:none}
.sd-craft-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,28,.55),rgba(8,10,28,.15) 40%,rgba(8,10,28,.82));pointer-events:none}
.sd-craft-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 34px}
.sd-craft-cap .eyebrow{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sd-craft-cap h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(21px,2.6vw,30px);line-height:1.18;color:#fff;letter-spacing:-.01em;max-width:640px}
/* ---- Mirrored split band (image right) ---- */
.sd-ad-flip .sd-ad-media{order:2}
.sd-ad-flip .sd-ad-content{order:1}
@media(max-width:1000px){ .sd-ad-flip .sd-ad-media{order:0} }
.sd-adband-2{background:linear-gradient(180deg,#0b0d26,#080a1c)}
/* ---- Engagement comparison strip (replaces the four sd-eng cards) ----
A different shape at the exact point the eye is tired of bordered cards.
Mobile: horizontal scroll with a sticky attribute column. */
.sd-cmp-wrap{margin-top:46px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);scrollbar-width:thin}
.sd-cmp{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:13px}
.sd-cmp th,.sd-cmp td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.06)}
.sd-cmp tr:last-child th,.sd-cmp tr:last-child td{border-bottom:none}
.sd-cmp thead th{padding-top:20px;padding-bottom:16px;background:rgba(255,255,255,.03)}
.sd-cmp thead th b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff;margin-bottom:4px}
.sd-cmp thead th i{display:block;width:26px;height:3px;border-radius:3px;background:var(--ac);font-style:normal}
.sd-cmp tbody th{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.sd-cmp td{color:rgba(255,255,255,.74);line-height:1.5}
.sd-cmp td em{font-style:normal;color:color-mix(in srgb,var(--ac) 78%,#fff);font-weight:600}
.sd-cmp tbody tr:hover td{background:rgba(255,255,255,.025)}
.sd-cmp .sd-cmp-fit td{color:rgba(255,255,255,.9);font-weight:500}
.sd-cmp thead th:first-child{background:rgba(255,255,255,.03)}
.sd-cmp th:first-child,.sd-cmp td:first-child{position:sticky;left:0;background:#0d0f2b;z-index:1;box-shadow:1px 0 0 rgba(255,255,255,.07)}
@media(max-width:760px){
.sd-cmp th,.sd-cmp td{padding:12px 13px}
.sd-cmp{min-width:620px}
}
/* ---- Telebridge brand thread (sd pages) ----
Brand appears at entry (hero plate), mid-page (craft standard), and exit
(final sigil) — thread, not wallpaper. Violet #B866FF is the brand tint. */
.sd-brand{display:inline-flex;align-items:center;gap:12px;padding:9px 16px;border-radius:14px;background:rgba(184,102,255,.07);border:1px solid rgba(184,102,255,.22);margin-bottom:6px}
.sd-brand img{display:block;height:26px;width:26px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(184,102,255,.45))}
.sd-brand-name{font-family:'Space Grotesk','DM Sans',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em;color:#fff}
.sd-brand-div{width:1px;height:16px;background:rgba(255,255,255,.18)}
.sd-brand-sub{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#CBA8FF}
.sd-ticker-brand{display:inline-flex;align-items:center;gap:9px}
.sd-ticker-brand img{display:block;height:17px;width:17px;object-fit:contain}
.sd-ticker-brand span{color:#CBA8FF !important}
.sd-final-sigil{display:block;margin:0 auto 18px;height:44px;width:44px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(184,102,255,.55))}
.tbc-hero-sd .tbc-hero-badge img{display:inline-block;height:16px;width:16px;object-fit:contain;margin-right:2px}
/* ---- Partner showcase (sd-partners) ----
Two authorized-partnership cards with a rotating conic border and a shine
sweep over the white logo plates. Rogers red #DA291C · Paystone coral #F5867F
(the site's payments accent). Sits between sd-stack and sd-work. */
.sd-partners{position:relative;padding:92px 0;background:#080a1c;overflow:hidden}
.sd-partners-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.sd-pb1{position:absolute;top:-18%;left:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.09),transparent 66%);filter:blur(70px)}
.sd-pb2{position:absolute;bottom:-22%;right:-8%;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(245,134,127,.08),transparent 66%);filter:blur(70px)}
.sd-partners .wrap{position:relative;z-index:1}
.sd-partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.sd-partner{position:relative;border-radius:22px;padding:1.5px;overflow:hidden;isolation:isolate}
.sd-partner::before{content:"";position:absolute;inset:-45%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 32%,color-mix(in srgb,var(--pc) 85%,#fff) 47% 53%,transparent 68% 100%);animation:sdOrbit 7s linear infinite;opacity:.55}
.sd-partner:hover::before{opacity:1;animation-duration:3.2s}
@keyframes sdOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sd-partner::before{animation:none;opacity:.35}}
.sd-partner-inner{position:relative;height:100%;border-radius:20.5px;background:linear-gradient(180deg,#0e1132,#0a0c22 55%,#090b1e);padding:30px 28px;display:flex;flex-direction:column}
.sd-partner-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sd-partner-plate{position:relative;overflow:hidden;background:#fff;border-radius:14px;height:72px;min-width:210px;max-width:280px;flex:1;display:flex;align-items:center;justify-content:center;padding:15px 24px;box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
.sd-partner-plate img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.sd-partner-plate::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.85) 50%,transparent 80%);transform:translateX(-130%) skewX(-12deg);transition:transform .8s cubic-bezier(.22,1,.36,1);pointer-events:none}
.sd-partner:hover .sd-partner-plate::after{transform:translateX(280%) skewX(-12deg)}
.sd-partner-badge{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:30px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--pc) 82%,#fff);background:color-mix(in srgb,var(--pc) 13%,transparent);border:1px solid color-mix(in srgb,var(--pc) 34%,transparent)}
.sd-partner-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 0 color-mix(in srgb,var(--pc) 60%,transparent);animation:sdPulse 2.2s infinite}
.sd-partner h3{margin:0 0 10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(19px,2vw,24px);line-height:1.2;color:#fff;letter-spacing:-.01em}
.sd-partner>.sd-partner-inner>p, .sd-partner-copy{margin:0 0 20px;font-size:13.5px;line-height:1.66;color:rgba(255,255,255,.6)}
.sd-partner-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.sd-partner-list li{position:relative;padding-left:24px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.76)}
.sd-partner-list li svg{position:absolute;left:0;top:2px;width:16px;height:16px}
.sd-partner-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.sd-partner-chips span{font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;color:color-mix(in srgb,var(--pc) 80%,#fff);background:color-mix(in srgb,var(--pc) 11%,transparent);border:1px solid color-mix(in srgb,var(--pc) 26%,transparent);transition:background .25s,transform .2s}
.sd-partner:hover .sd-partner-chips span{background:color-mix(in srgb,var(--pc) 16%,transparent)}
.sd-partner-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:color-mix(in srgb,var(--pc) 85%,#fff);text-decoration:none;padding:11px 20px;border-radius:11px;background:color-mix(in srgb,var(--pc) 12%,transparent);border:1px solid color-mix(in srgb,var(--pc) 32%,transparent);transition:background .25s,border-color .25s,transform .2s}
.sd-partner-cta:hover{background:color-mix(in srgb,var(--pc) 20%,transparent);border-color:color-mix(in srgb,var(--pc) 58%,transparent);transform:translateY(-1px)}
.sd-partner-cta svg{transition:transform .28s cubic-bezier(.34,1.4,.5,1)}
.sd-partner-cta:hover svg{transform:translateX(4px)}
/* wide carrier-platform row appended to the stack grid */
.sd-stack-col-wide{grid-column:1/-1}
@media(max-width:1000px){ .sd-partner-grid{grid-template-columns:1fr} }
@media(max-width:760px){
.sd-partners{padding:64px 0}
.sd-partner-inner{padding:24px 20px}
.sd-partner-plate{min-width:170px;height:62px}
}
/* beams canvas mount — sits under the blobs/grid, fades into the ticker */
.sd-beams{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.sd-beams.on{opacity:1}
.sd-beams canvas{display:block;width:100%!important;height:100%!important}
.sd-hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,transparent,#0b0d26);pointer-events:none}
.sd-beams.on ~ .sd-hero-grid{opacity:.45}
/* Footer partner badges are links to the partner pages (were inert s that
still animated on hover). Styling lives in the shell; these add link affordances. */
footer.tb-footer .tbf-plogo{text-decoration:none;cursor:pointer}
footer.tb-footer .tbf-plogo:focus-visible{outline:2px solid #B866FF;outline-offset:3px}
footer.tb-footer .tbf-plogo:hover{box-shadow:0 8px 22px rgba(0,0,0,.35)}
/* ============================================================================
AUTOMATION & AI — /solutions/automation
Reuses the .sd-* flagship system; .au scope recolours the blue-specific
rules to brand violet #B866FF (AI flagship = brand colour).
============================================================================ */
.au .sd-hero-grid{background-image:linear-gradient(rgba(184,102,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(184,102,255,.06) 1px,transparent 1px)}
.au .sd-hb1{background:radial-gradient(circle,rgba(184,102,255,.18),transparent 66%)}
.au .sd-hb2{background:radial-gradient(circle,rgba(45,212,207,.10),transparent 66%)}
.au .sd-hero-badge{background:rgba(184,102,255,.12);border-color:rgba(184,102,255,.32);color:#CBA8FF}
.au .sd-badge-dot{background:#B866FF;box-shadow:0 0 0 0 rgba(184,102,255,.6)}
.au .sd-btn-primary{background:linear-gradient(135deg,#B866FF,#7A2FD0)}
.au .sd-btn-primary:hover{box-shadow:0 16px 40px -14px rgba(184,102,255,.7)}
.au .sd-cf-cursor{background:#B866FF}
.au.sd-ticker-sec .sd-ticker-row i{color:#B866FF}
.au .sd-faq-item.open{border-color:rgba(184,102,255,.34)}
.au .sd-faq-ic::before,.au .sd-faq-ic::after{background:#B866FF}
.au .sd-inline-cta{color:#CBA8FF;background:rgba(184,102,255,.12);border-color:rgba(184,102,255,.34)}
.au .sd-inline-cta:hover{background:rgba(184,102,255,.2);border-color:rgba(184,102,255,.6)}
.au .sd-choose-result-inner{background:linear-gradient(135deg,rgba(184,102,255,.14),rgba(45,212,207,.07));border-color:rgba(184,102,255,.26)}
.au .sd-choose-result-ico{background:linear-gradient(135deg,#B866FF,#7A2FD0)}
.au .sd-choose-cta{background:rgba(184,102,255,.24);border-color:rgba(184,102,255,.5)}
.au .sd-choose-cta:hover{background:rgba(184,102,255,.36)}
.au .sd-final-glow{background:radial-gradient(circle,rgba(184,102,255,.18),rgba(11,95,255,.1) 45%,transparent 70%)}
.au .sd-eng-note a{color:#CBA8FF;border-bottom-color:rgba(184,102,255,.4)}
.au .sd-eng-note a:hover{border-color:#CBA8FF}
.au .sd-ph{background:linear-gradient(135deg,rgba(184,102,255,.08),rgba(45,212,207,.05));border-color:rgba(184,102,255,.2)}
/* contact accent variants (/contact/automation) */
.tbc-hero-au .tbc-hb1{background:radial-gradient(circle,rgba(184,102,255,.18),transparent 66%)}
.tbc-hero-au .tbc-hb2{background:radial-gradient(circle,rgba(45,212,207,.12),transparent 66%)}
.tbc-hero-au .tbc-hero-badge{background:rgba(184,102,255,.12);border-color:rgba(184,102,255,.32);color:#CBA8FF}
.tbc-hero-au .tbc-bolt{color:#FDE047}
.tbc-form-au .tbc-form-badge{background:rgba(184,102,255,.12);border-color:rgba(184,102,255,.3);color:#CBA8FF}
.tbc-form-au .tb-mode:hover{border-color:rgba(184,102,255,.42);background:rgba(184,102,255,.05)}
.tbc-form-au .tb-mode-ic{background:rgba(184,102,255,.14);border-color:rgba(184,102,255,.28);color:#CBA8FF}
.tbc-form-au .tb-mode-on{border-color:#B866FF;background:rgba(184,102,255,.14);box-shadow:0 0 0 1px rgba(184,102,255,.5),0 10px 26px -12px rgba(184,102,255,.6)}
.tbc-form-au .tb-mode-on .tb-mode-ic{background:#B866FF;border-color:#B866FF;color:#1C0A4A}
.tbc-form-au .tbc-field input:focus,.tbc-form-au .tbc-field textarea:focus,.tbc-form-au .tbc-field select:focus{border-color:rgba(184,102,255,.58);background:rgba(184,102,255,.05)}
.tbc-form-au .tb-postal-note.ok{color:#CBA8FF}
.tbc-form-au ~ .tbc-side .tbc-step-n{color:#CBA8FF;background:rgba(184,102,255,.14);border-color:rgba(184,102,255,.32)}
.tbc-form-au ~ .tbc-side .tbc-ci-ic{color:#CBA8FF}
.tbc-form-au ~ .tbc-side .tbc-ci a:hover{color:#CBA8FF}
.tbc-form-au .tb-form-success-ico{background:linear-gradient(135deg,#B866FF,#7A2FD0)}
.tbc-submit-au{background:linear-gradient(135deg,#B866FF,#7A2FD0);color:#fff}
.tbc-submit-au:hover{box-shadow:0 16px 40px -14px rgba(184,102,255,.7)}
.tbc-submit-au .tbc-bolt{color:#FDE047}
/* anime.js entrance takeover: when tb-anim.js owns an element's motion, the
CSS transition must not double-animate. Fallback (no anime / reduced motion)
uses the base .reveal rule in telebridge.css unchanged. */
.rv-js{transition:none !important}
@media(prefers-reduced-motion:reduce){ .reveal{transition-duration:.01s !important} }
/* cube-cluster canvas mount (automation hero) */
.au-spline{position:absolute;top:0;right:0;bottom:12%;left:38%;opacity:0;overflow:hidden;transition:opacity 1.4s ease;pointer-events:none;z-index:0;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,#000 60%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,#000 60%,transparent 100%);
mask-composite:intersect}
.au-spline.on{opacity:1}
.au-spline iframe{position:absolute;top:-8%;left:-10%;width:126%;height:126%;border:0;display:block;pointer-events:none;background:transparent}
/* second, softer vertical fade at the very right edge so it never hard-cuts there either */
.au-spline::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,transparent 55%,rgba(11,13,38,.0) 80%,rgba(11,13,38,.35) 100%)}
.au-spline.on ~ .sd-hero-grid{opacity:.3}
@media(max-width:900px){
.au-spline{left:30%;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.au-spline iframe{top:-6%;left:-20%;width:150%;height:140%}
}
@media(max-width:640px){ .au-spline{display:none} }
/* AU hero field: indigo on the text side, easing to near-black on the right so the
Spline scene's dark background blends in seamlessly instead of seaming. */
.au.sd-hero{background:linear-gradient(100deg,#140a2e 0%,#12112e 34%,#0a0b1c 60%,#07080f 100%)}
.au .sd-hero-grid{opacity:.5}
.au .sd-hero-inner{position:relative;z-index:2}
/* AU trust stats: sit above the Spline scene and stay legible over busy geometry */
.au .sd-hero-trust{position:relative;z-index:3}
.au .sd-htrust b{text-shadow:0 2px 18px rgba(7,8,15,.9),0 0 4px rgba(7,8,15,.8)}
.au .sd-htrust span{text-shadow:0 1px 10px rgba(7,8,15,.95);color:rgba(255,255,255,.62)}
/* ---- AU hero: fit the whole thing in one screen at 100% zoom ---- */
.au.sd-hero{min-height:calc(100vh - 58px);min-height:calc(100svh - 58px);padding-top:88px;padding-bottom:22px;display:flex;align-items:flex-end;box-sizing:border-box}
.au .sd-hero-inner{width:100%;padding-top:8px;padding-bottom:8px}
.au .sd-brand{margin-bottom:4px}
.au .breadcrumb{margin-bottom:10px}
.au .sd-hero-badge{margin-bottom:14px}
.au .sd-hero-title{font-size:clamp(34px,5vw,58px);line-height:1.02;margin:0 0 16px}
.au .sd-hero-sub{font-size:16px;line-height:1.55;margin:0 0 22px;max-width:560px}
.au .sd-hero-cta{margin-bottom:22px}
.au .sd-codeframe{margin-bottom:22px}
.au .sd-hero-trust{gap:26px}
.au .sd-htrust b{font-size:clamp(20px,2.4vw,26px)}
.au .sd-htrust span{font-size:12px}
/* short viewports (laptops < 820px tall): compress further, drop the code frame */
@media(max-height:860px){
.au.sd-hero{padding-top:84px;padding-bottom:24px}
.au .sd-hero-title{font-size:clamp(28px,3.8vw,42px);margin-bottom:12px}
.au .sd-hero-sub{font-size:14.5px;margin-bottom:16px}
.au .au-neural{margin-bottom:14px;transform:scale(.92);transform-origin:left top}
.sd-hero:not(.au) .sd-codeframe{transform:scale(.94);transform-origin:left top;margin-bottom:12px}
.au .sd-hero-cta{margin-bottom:16px}
.au .sd-hero-trust{gap:20px}
}
@media(max-height:720px){
.au .au-neural{display:none}
.sd-hero:not(.au) .sd-codeframe{display:none}
.au .sd-hero-sub{margin-bottom:18px}
}
/* keep the scene spanning the taller hero cleanly */
.au-spline{bottom:8%}
/* ============================================================
AU ENGAGEMENT JOURNEY (aljk-*) — accordion timeline
One step open at a time. Collapsed panels are truly hidden
(max-height:0 + overflow:hidden) so nothing bleeds through.
The always-visible lead keeps every step scannable; the
expanded body is one sentence + chips.
============================================================ */
.aljk{position:relative;margin:48px auto 0;max-width:760px}
.aljk-rail{position:absolute;left:23px;top:20px;bottom:20px;width:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.aljk-rail-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
background:linear-gradient(180deg,#B866FF,#2DD4CF 45%,#F59E0B 82%,#EC4899);transition:height .55s cubic-bezier(.4,0,.2,1)}
.aljk-steps{display:flex;flex-direction:column;gap:6px}
.aljk-step{position:relative;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.02);
transition:background .35s,border-color .35s}
.aljk-step.on{background:linear-gradient(115deg,color-mix(in srgb,var(--ac) 10%,transparent),rgba(255,255,255,.02));
border-color:color-mix(in srgb,var(--ac) 38%,transparent)}
.aljk-hd{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
background:none;border:0;padding:16px 20px 16px 58px;color:#fff;position:relative}
.aljk-marker{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
background:#0a0b1c;border:2px solid var(--ac);display:flex;align-items:center;justify-content:center;z-index:2;transition:box-shadow .35s}
.aljk-dot{width:6px;height:6px;border-radius:50%;background:var(--ac);opacity:.45;transition:opacity .35s,transform .35s}
.aljk-step.on .aljk-marker,.aljk-step.done .aljk-marker{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent)}
.aljk-step.on .aljk-dot,.aljk-step.done .aljk-dot{opacity:1;transform:scale(1.2)}
.aljk-num{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ac);flex:none}
.aljk-ti{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:#fff}
.aljk-dur{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:color-mix(in srgb,var(--ac) 70%,#fff);background:color-mix(in srgb,var(--ac) 10%,transparent);
border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);padding:3px 10px;border-radius:20px;flex:none}
.aljk-chev{width:9px;height:9px;border-right:2px solid rgba(255,255,255,.4);border-bottom:2px solid rgba(255,255,255,.4);
transform:rotate(45deg);transition:transform .35s;flex:none;margin-left:4px}
.aljk-step.on .aljk-chev{transform:rotate(-135deg);border-color:var(--ac)}
.aljk-lead{padding:0 20px 0 58px;margin-top:-6px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.55)}
.aljk-step.on .aljk-lead{color:rgba(255,255,255,.72)}
.aljk-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.aljk-panel-in{padding:12px 20px 18px 58px}
.aljk-body{margin:12px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.7);
padding-top:12px;border-top:1px solid color-mix(in srgb,var(--ac) 18%,transparent)}
.aljk-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.aljk-tag{font-size:10.5px;font-weight:500;color:color-mix(in srgb,var(--ac) 65%,#fff);
background:color-mix(in srgb,var(--ac) 9%,transparent);border:1px solid color-mix(in srgb,var(--ac) 22%,transparent);
padding:4px 11px;border-radius:7px}
@media(max-width:640px){
.aljk-hd{padding:14px 16px 14px 50px}.aljk-lead,.aljk-panel-in{padding-left:50px}
.aljk-rail{left:19px}.aljk-marker{left:9px}.aljk-ti{font-size:15px}.aljk-dur{display:none}
}
/* ============================================================
AU PAGE DIFFERENTIATION
Software page = cool steel-blue on near-black (#080a1c).
Automation page = warmer violet-tinted charcoal with a faint
plum wash, so the two solution pages read as siblings, not
twins. Applied to the alternating section backgrounds only —
copy contrast and accents already handled by the .au scope.
============================================================ */
.au.sd-lifecycle{background:radial-gradient(120% 80% at 80% 0%,rgba(184,102,255,.06),transparent 60%),#0b0a1a}
.au.sd-choose{background:radial-gradient(100% 70% at 15% 100%,rgba(45,212,207,.05),transparent 60%),#0d0b1e}
.au.sd-products{background:#0c0a1c}
.au.sd-adband{background:radial-gradient(90% 90% at 100% 50%,rgba(184,102,255,.05),transparent 62%),#0b0a1a}
.au.sd-engage{background:#0d0b1e}
.au.sd-faq-sec{background:radial-gradient(120% 80% at 50% 0%,rgba(184,102,255,.05),transparent 58%),#0b0a1a}
.au.sd-ticker-band{background:#0c0a1c;border-color:rgba(184,102,255,.12)}
/* section eyebrows/dividers pick up the violet identity */
.au .sd-ticker-item{color:rgba(203,168,255,.5)}
.au .sd-why{background:#0c0a1c}
/* practice-card footer brand logos: small centered lockups on white plates */
.tsc-logos{display:flex;align-items:center;gap:8px}
.tsc-logo{height:26px;min-width:26px;padding:4px 8px;border-radius:7px;background:#fff;
display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tsc-logo img{height:15px;width:auto;display:block}
.tsc-logo.n8n-plate{background:#0f0f14;border:1px solid rgba(234,75,113,.3)}
.tsc-logo.n8n-plate img{height:16px}
.tsc-logo-glyph{height:26px;padding:4px 11px;border-radius:7px;display:flex;align-items:center;gap:6px;
background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent)}
.tsc-logo-glyph svg{width:15px;height:15px}
.tsc-logo-glyph span{font-size:11px;font-weight:700;letter-spacing:.06em;color:color-mix(in srgb,var(--ac) 72%,#fff)}
/* ============================================================
AU NEURAL ENGINE — hero visual (replaces the shared code-frame)
A live layered neural-network SVG in a glass frame, unique to
the automation page. Signals propagate left→right in real time.
============================================================ */
.au-neural{position:relative;max-width:560px;border-radius:16px;overflow:hidden;
background:linear-gradient(160deg,rgba(184,102,255,.06),rgba(45,212,207,.04) 60%,rgba(10,11,26,.2));
border:1px solid rgba(184,102,255,.16);
box-shadow:0 24px 60px -28px rgba(184,102,255,.45),inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.au-neural-bar{display:flex;align-items:center;justify-content:space-between;
padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.06);
background:rgba(10,11,26,.35)}
.au-neural-live{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,'SF Mono',monospace;
font-size:11.5px;letter-spacing:.04em;color:rgba(203,168,255,.85)}
.au-neural-live-dot{width:7px;height:7px;border-radius:50%;background:#2DD4CF;
box-shadow:0 0 0 0 rgba(45,212,207,.6);animation:auNeuralPulse 1.8s ease-out infinite}
@keyframes auNeuralPulse{0%{box-shadow:0 0 0 0 rgba(45,212,207,.5)}70%{box-shadow:0 0 0 7px rgba(45,212,207,0)}100%{box-shadow:0 0 0 0 rgba(45,212,207,0)}}
.au-neural-meta{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.28)}
.au-neural-stage{position:relative;padding:4px 12px 0;
background:radial-gradient(120% 90% at 50% 40%,rgba(184,102,255,.05),transparent 70%)}
.au-neural-stage svg{display:block;width:100%;height:auto}
/* faint scanning shimmer across the stage for "processing" feel */
.au-neural-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 48%,transparent 66%);
background-size:220% 100%;animation:auNeuralScan 5.5s linear infinite}
@keyframes auNeuralScan{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
.au-neural-stage::after,.au-neural-live-dot{animation:none}
.au-neural-stage svg animate,.au-neural-stage svg animateMotion{display:none}
}
/* pull ticker up so it shows at the fold on load */
.au.sd-ticker-sec{margin-top:0;position:relative;z-index:4}
.au .au-neural{margin-bottom:30px}
/* spacing between breadcrumb and the practice badge plate */
.sd-hero .sd-brand{margin-top:16px}
/* compact software code-frame so the ticker shows on load */
.sd-hero .sd-codeframe{margin-bottom:18px}
.sd-hero:not(.au) .sd-hero-sub{margin-bottom:20px}
/* ---- software hero: final compaction so ticker sits flush like automation ---- */
.sd-hero:not(.au) .sd-codeframe{transform:scale(.9);transform-origin:left top;margin-bottom:8px;max-width:480px}
.sd-hero:not(.au) .sd-cf-body{padding:11px 14px;line-height:1.7;font-size:12px}
.sd-hero:not(.au) .sd-cf-bar{padding:8px 14px}
.sd-hero:not(.au) .sd-hero-sub{margin-bottom:18px}
.sd-hero:not(.au) .sd-hero-cta{margin-bottom:18px}
.sd-hero:not(.au) .sd-hero-title{margin-bottom:14px}
.sd-hero:not(.au) .sd-brand{margin-top:12px;margin-bottom:2px}
.sd-hero:not(.au) .sd-hero-trust{gap:24px}
/* slim, sleek ticker band */
.ticker { padding: 11px 0 !important; }
.ticker-item { font-size: 12.5px !important; gap: 10px !important; }
.ticker-item b { font-size: 15px !important; }
.ticker-track { gap: 44px !important; }
/* ============================================================
INDUSTRY PAGES v3 (indp-*) — premium DARK vertical landing
Self-contained dark theme so the cinematic photography glows.
Does NOT depend on light-page --ink/--card vars.
Reference: /industries/restaurants-hospitality
============================================================ */
/* force the whole industry page onto a rich dark canvas */
body:has(.indp-hero){background:#0a0810}
.indp-hero ~ .sec, .indp-hero + .sec{--i-ink:#F4F1FA;--i-sub:rgba(244,241,250,.6);--i-faint:rgba(244,241,250,.42);
--i-card:rgba(255,255,255,.028);--i-card2:rgba(255,255,255,.05);--i-border:rgba(255,255,255,.08);--i-coral:#F5867F}
.indp-hero,.indp-bands,.indp-pain,.indp-calc,.indp-proof,.indp-how,.indp-faq,.indp-cta{
--i-ink:#F4F1FA;--i-sub:rgba(244,241,250,.62);--i-faint:rgba(244,241,250,.42);
--i-card:rgba(255,255,255,.028);--i-card2:rgba(255,255,255,.05);--i-border:rgba(255,255,255,.09);--i-coral:#F5867F}
/* section backgrounds — alternating depth instead of flat lavender */
.indp-pain,.indp-calc,.indp-how{background:#0a0810}
.indp-bands,.indp-proof,.indp-faq{background:
radial-gradient(120% 80% at 50% 0%,rgba(245,134,127,.05),transparent 55%),#0c0a13}
.indp-bands{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.sec.indp-pain,.sec.indp-calc,.sec.indp-how,.sec.indp-bands,.sec.indp-proof,.sec.indp-faq{padding:88px 0}
/* section headings — refined, high-contrast */
.indp-hero ~ .sec .sec-head h2, .indp-bands .sec-head h2, .indp-pain .sec-head h2,
.indp-calc .sec-head h2, .indp-how .sec-head h2, .indp-faq .sec-head h2,
.indp-proof-text h2{
font-family:'Space Grotesk',sans-serif !important;font-weight:600 !important;
font-size:clamp(26px,3.4vw,38px) !important;line-height:1.1 !important;letter-spacing:-.01em !important;
color:#F4F1FA !important;margin-bottom:0}
.indp-hero ~ .sec .sec-head p, .indp-bands .sec-head p, .indp-pain .sec-head p, .indp-calc .sec-head p{
color:rgba(244,241,250,.6) !important;font-size:16px !important;line-height:1.65 !important}
.indp-hero ~ .sec .eyebrow, .indp-bands .eyebrow, .indp-pain .eyebrow, .indp-calc .eyebrow,
.indp-how .eyebrow, .indp-faq .eyebrow{
font-size:12px !important;font-weight:600 !important;letter-spacing:.18em !important;text-transform:uppercase !important;
color:#F5867F !important;display:inline-block;margin-bottom:14px}
.sec-head.center{max-width:none}
/* ---- image placeholder ---- */
.indp-ph{position:relative;aspect-ratio:var(--ar,4/3);border-radius:16px;overflow:hidden;
background:linear-gradient(135deg,#15121d,#1b1524);border:1px solid rgba(255,255,255,.06)}
.indp-ph picture,.indp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.indp-ph-tag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.03em;
color:rgba(255,255,255,.5);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:5px 11px;border-radius:20px;
border:1px solid rgba(255,255,255,.12);opacity:0}
.indp-ph-empty{background:radial-gradient(120% 90% at 30% 20%,rgba(245,134,127,.12),transparent 60%),linear-gradient(135deg,#15121d,#1b1524);display:flex;align-items:center;justify-content:center}
.indp-ph-empty img{display:none}
.indp-ph-empty::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px)}
.indp-ph-empty::after{content:"⬒ " attr(data-ph);position:relative;z-index:2;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.4);padding:8px 16px;border:1px dashed rgba(255,255,255,.2);border-radius:10px;text-align:center}
.indp-ph-empty .indp-ph-tag{opacity:1}
/* ---- buttons ---- */
.indp-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:12px;font-size:15px;
font-weight:600;text-decoration:none;cursor:pointer;letter-spacing:-.01em;
transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s,background .35s}
.indp-btn .indp-arr{transition:transform .35s}
.indp-btn:hover .indp-arr{transform:translateX(4px)}
.indp-btn-primary{background:linear-gradient(120deg,#F5867F,#EE4C39);color:#fff;box-shadow:0 18px 40px -16px rgba(238,76,57,.7)}
.indp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 26px 54px -18px rgba(238,76,57,.85)}
.indp-btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);color:#F4F1FA;backdrop-filter:blur(6px)}
.indp-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.indp-btn-lg{padding:18px 34px;font-size:16.5px}
/* ---- HERO ---- */
.indp-hero{position:relative;overflow:hidden;padding:132px 0 88px;background:#0a0810}
.indp-hero-bg{position:absolute;inset:0;z-index:0}
.indp-hero-glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.55}
.indp-hero-rest .g1{width:560px;height:560px;top:-140px;right:-100px;background:radial-gradient(circle,rgba(245,134,127,.5),transparent 70%)}
.indp-hero-rest .g2{width:480px;height:480px;bottom:-160px;left:-120px;background:radial-gradient(circle,rgba(238,76,57,.3),transparent 70%)}
.indp-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 78%)}
.indp-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.indp-hero-copy .breadcrumb{margin-bottom:22px;color:rgba(244,241,250,.4)}
.indp-hero-copy .breadcrumb a{color:rgba(244,241,250,.55)}
.indp-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:30px;background:rgba(245,134,127,.1);border:1px solid rgba(245,134,127,.3);color:#F5867F;font-weight:600;font-size:12.5px;letter-spacing:.02em;margin-bottom:24px}
.indp-badge-ic{display:flex}.indp-badge-ic svg{width:16px;height:16px}
.indp-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4.8vw,58px);line-height:1.03;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 22px}
.indp-grad{background:linear-gradient(115deg,#F5867F,#EE4C39 55%,#B866FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-sub{font-size:17.5px;line-height:1.62;color:rgba(244,241,250,.66);max-width:560px;margin:0 0 32px;font-weight:400}
.indp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.indp-hero-trust{display:flex;gap:14px;flex-wrap:wrap}
.indp-trust{flex:1;min-width:150px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.indp-trust b{display:block;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;color:#F5867F;line-height:1;margin-bottom:7px}
.indp-trust span{font-size:12.5px;color:rgba(244,241,250,.55);line-height:1.4;display:block}
.indp-hero-media .indp-ph{border-radius:20px;box-shadow:0 50px 100px -40px rgba(238,76,57,.45),0 0 0 1px rgba(255,255,255,.06)}
/* ---- PAIN ---- */
.indp-pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.indp-pain-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 24px;transition:transform .4s,border-color .4s,background .4s}
.indp-pain-card:hover{transform:translateY(-5px);border-color:rgba(245,134,127,.4);background:linear-gradient(180deg,rgba(245,134,127,.07),rgba(255,255,255,.02))}
.indp-pain-ic{display:flex;width:48px;height:48px;border-radius:13px;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(238,76,57,.22),rgba(245,134,127,.1));color:#F5867F;margin-bottom:18px;border:1px solid rgba(245,134,127,.15)}
.indp-pain-ic svg{width:23px;height:23px}
.indp-pain-card h3{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px;color:#F4F1FA}
.indp-pain-card p{font-size:13.5px;line-height:1.6;color:rgba(244,241,250,.55)}
/* ---- SHOWCASE BANDS ---- */
.indp-bands .sec-head{margin-bottom:20px}
.indp-band{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:48px 0}
.indp-band-rev .indp-band-media{order:2}
.indp-band-media .indp-ph{box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05)}
.indp-band-text .indp-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bc,#F5867F);margin-bottom:16px}
.indp-band-text h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,2.9vw,32px);font-weight:600;line-height:1.12;letter-spacing:-.015em;color:#F4F1FA;margin:0 0 18px}
.indp-band-text>p{font-size:16px;line-height:1.68;color:rgba(244,241,250,.62);margin:0 0 24px}
.indp-ticks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:13px}
.indp-ticks li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:rgba(244,241,250,.9)}
.indp-ticks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--bc,#F5867F) 20%,transparent);border:1px solid color-mix(in srgb,var(--bc,#F5867F) 35%,transparent)}
.indp-ticks li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--bc,#F5867F);border-width:0 2px 2px 0;transform:rotate(42deg)}
.indp-band-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-decoration:none;color:var(--bc,#F5867F);padding:11px 20px;border-radius:11px;border:1px solid color-mix(in srgb,var(--bc,#F5867F) 30%,transparent);background:color-mix(in srgb,var(--bc,#F5867F) 8%,transparent);transition:background .3s,transform .3s}
.indp-band-cta:hover{background:color-mix(in srgb,var(--bc,#F5867F) 16%,transparent);transform:translateY(-1px)}
.indp-band-cta .indp-arr{transition:transform .3s}
.indp-band-cta:hover .indp-arr{transform:translateX(4px)}
/* ---- CALCULATOR ---- */
.indp-calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:stretch}
.indp-calc-inputs{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:34px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.indp-calc-field label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:rgba(244,241,250,.6);margin-bottom:13px;font-weight:500}
.indp-calc-field label b{font-family:'Space Grotesk',sans-serif;font-size:19px;color:#F4F1FA;font-weight:600}
.indp-calc-field input[type=range]{width:100%;height:5px;border-radius:5px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#F5867F,#EE4C39);cursor:pointer;outline:none}
.indp-calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #EE4C39;cursor:pointer;box-shadow:0 2px 10px rgba(238,76,57,.5);transition:transform .15s}
.indp-calc-field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.indp-calc-field input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #EE4C39;cursor:pointer}
.indp-calc-out{background:linear-gradient(160deg,rgba(245,134,127,.14),rgba(184,102,255,.06));border:1px solid rgba(245,134,127,.26);border-radius:20px;padding:34px;display:flex;flex-direction:column}
.indp-calc-result{text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}
.indp-calc-result-lbl{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(244,241,250,.55);margin-bottom:10px}
.indp-calc-result-num{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,6vw,58px);font-weight:700;line-height:1;background:linear-gradient(90deg,#F5867F,#EE4C39);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-calc-result-num span{font-size:20px;-webkit-text-fill-color:rgba(244,241,250,.5);color:rgba(244,241,250,.5)}
.indp-calc-result-sub{display:block;font-size:13px;color:rgba(244,241,250,.5);margin-top:9px}
.indp-calc-break{padding:24px 0}
.indp-calc-row{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(244,241,250,.88);margin-bottom:13px}
.indp-calc-row b{margin-left:auto;font-family:'Space Grotesk',sans-serif;font-weight:600;color:#F4F1FA}
.indp-calc-dot{width:10px;height:10px;border-radius:50%;flex:none}
.indp-calc-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.06);margin-top:8px}
.indp-calc-bar span{display:block;transition:width .4s cubic-bezier(.4,0,.2,1)}
.indp-calc-note{font-size:11.5px;line-height:1.55;color:rgba(244,241,250,.42);margin:16px 0 22px}
.indp-calc-cta{margin-top:auto;width:100%;justify-content:center}
/* ---- PROOF ---- */
.indp-proof-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.indp-proof-media .indp-ph{box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05)}
.indp-proof-text .indp-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F5867F;margin-bottom:16px}
.indp-proof-text h2{margin:0 0 18px !important}
.indp-proof-text>p{font-size:16.5px;line-height:1.68;color:rgba(244,241,250,.62);margin:0 0 32px}
.indp-proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.indp-proof-stat{padding:20px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.indp-proof-stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:#F5867F;line-height:1;margin-bottom:9px;letter-spacing:-.01em}
.indp-proof-stat span{font-size:12.5px;line-height:1.45;color:rgba(244,241,250,.55)}
/* ---- HOW ---- */
.indp-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.indp-how-step{position:relative;padding:28px 24px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px}
.indp-how-n{display:flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;background:linear-gradient(120deg,#F5867F,#EE4C39);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;margin-bottom:18px;box-shadow:0 8px 20px -6px rgba(238,76,57,.5)}
.indp-how-step h3{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px;color:#F4F1FA}
.indp-how-step p{font-size:13.5px;line-height:1.6;color:rgba(244,241,250,.55)}
/* ---- FAQ ---- */
.indp-faq-list{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.indp-faq-item{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;transition:border-color .3s}
.indp-faq-item[open]{border-color:rgba(245,134,127,.28)}
.indp-faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#F4F1FA;display:flex;justify-content:space-between;align-items:center;gap:16px}
.indp-faq-item summary::-webkit-details-marker{display:none}
.indp-faq-item summary::after{content:"+";font-size:24px;font-weight:300;color:#F5867F;transition:transform .3s;flex:none}
.indp-faq-item[open] summary::after{transform:rotate(45deg)}
.indp-faq-item p{padding:0 24px 22px;font-size:14.5px;line-height:1.72;color:rgba(244,241,250,.6)}
/* ---- CLOSING CTA ---- */
.indp-cta{position:relative;overflow:hidden;padding:0;border:none;background:#0a0810}
.indp-cta-bg{position:absolute;inset:0;z-index:0}
.indp-cta-bg .indp-ph{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:none}
.indp-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,16,.82),rgba(10,8,16,.93)),radial-gradient(120% 100% at 50% 0%,rgba(238,76,57,.3),transparent 58%)}
.indp-cta-inner{position:relative;z-index:2;text-align:center;max-width:700px;margin:0 auto;padding:104px 0}
.indp-cta-inner h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4.2vw,46px);font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 18px;line-height:1.08}
.indp-cta-inner p{color:rgba(244,241,250,.68);font-size:17.5px;line-height:1.7;margin:0 0 32px}
/* ---- responsive ---- */
@media(max-width:900px){
.indp-hero{padding:110px 0 64px}
.indp-hero-inner{grid-template-columns:1fr;gap:44px}
.indp-hero-media{max-width:440px}
.indp-pain-grid,.indp-how-grid{grid-template-columns:repeat(2,1fr)}
.indp-band,.indp-band-rev{grid-template-columns:1fr;gap:30px}
.indp-band-rev .indp-band-media{order:0}
.indp-calc-wrap{grid-template-columns:1fr}
.indp-proof-inner{grid-template-columns:1fr;gap:36px}
}
@media(max-width:560px){
.indp-pain-grid,.indp-how-grid,.indp-proof-stats{grid-template-columns:1fr}
.indp-hero-trust{flex-direction:column}
}
/* ============================================================
INDUSTRY PAGES — dark-theme text contrast lock
The indp-* sections render on the near-black page bg (#0a0810).
These explicit colors guarantee readable light-on-dark text,
overriding any inherited light-theme variables.
============================================================ */
.indp-pain, .indp-bands, .indp-calc, .indp-proof, .indp-how, .indp-faq{ background:#0a0810 !important }
/* subtle tonal alternation so sections read as distinct, not a flat wall */
.indp-bands, .indp-proof, .indp-faq{ background:#0d0a15 !important }
.indp-pain-card h3, .indp-band-text h3, .indp-how-step h3,
.indp-proof-text h2, .sec-head h2{ color:#F7F5FB }
.indp-pain-card p, .indp-band-text>p, .indp-how-step p,
.indp-proof-text>p, .sec-head p{ color:rgba(245,242,250,.72) }
.indp-ticks li{ color:#EDEAF5 }
.indp-calc-field label{ color:rgba(245,242,250,.72) }
.indp-calc-field label b{ color:#F7F5FB }
.indp-calc-row{ color:#EDEAF5 }
.indp-faq-item summary{ color:#F7F5FB }
.indp-faq-item p{ color:rgba(245,242,250,.7) }
.indp-calc-note{ color:rgba(245,242,250,.5) }
.indp-calc-result-lbl, .indp-calc-result-sub{ color:rgba(245,242,250,.6) }
.indp-trust span{ color:rgba(245,242,250,.55) }
/* cards need a visible dark surface so they read as cards on the dark bg */
.indp-pain-card, .indp-how-step, .indp-calc-inputs, .indp-faq-item{
background:#15121d; border-color:rgba(255,255,255,.08) }
/* ============================================================
Remove redundant crosshatch "graph line" grid overlays from
hero sections site-wide. They read as templated/AI-generated
and add nothing over the glows, gradients, and animations that
already give each hero its character. Kept: intentional abstract
interface art (.sd-work-viz) which is a distinct design element.
============================================================ */
.gridlines,
.sd-hero-grid,
.mi-hero-grid,
.io-hero-grid,
.sc-hero-grid,
.rbx-hero-grid,
.ri-hero-gridlines,
.sp-grid,
.sp-noise,
.indp-hero-grid,
.tsc-grid,
.tb-fcta-grid,
.sol2-hero-grid,
.nexus-grid-bg,
.ri-plans .wrap::before{
display: none !important;
}
/* ============================================================
PREMIUM DROPDOWN PARITY — bring the plain .mega dropdowns
(Industries, Use Cases, Resources, Company) up to the same
premium treatment as the mega-v2 dropdowns (Solutions,
Providers, Residential): refined hover, gradient icon wells,
lift + slide, and consistent spacing.
============================================================ */
/* link: match mv2-link hover feel (dark glass, slide, border) */
header#header .mega a,
.hdr-minimal .mega a{
align-items:center !important;
gap:12px !important;
padding:10px 11px !important;
border-radius:12px !important;
border:1px solid transparent !important;
transition:all .28s cubic-bezier(.22,.7,.2,1) !important;
}
header#header .mega a:hover,
.hdr-minimal .mega a:hover{
background:rgba(255,255,255,.04) !important;
border-color:rgba(139,92,246,.16) !important;
color:#fff !important;
transform:translateX(3px);
}
header#header .mega a strong{
font-family:'DM Sans',sans-serif !important;
font-size:13.5px !important; font-weight:600 !important; line-height:1.2 !important;
}
header#header .mega a em{
font-size:11px !important; font-weight:500 !important;
color:rgba(255,255,255,.32) !important; transition:color .25s;
}
header#header .mega a:hover em{ color:rgba(255,255,255,.5) !important; }
/* icon wells: gradient-tinted like mv2-ico (uses --dc from the chip, or --g1/--g2) */
header#header .mega-ico,
.hdr-minimal .mega-ico{
width:38px !important; height:38px !important; border-radius:11px !important;
display:flex !important; align-items:center; justify-content:center;
background:linear-gradient(135deg,color-mix(in srgb,var(--g1,#8B5CF6) 18%,transparent),color-mix(in srgb,var(--g2,#C084FC) 10%,transparent)) !important;
border:1px solid color-mix(in srgb,var(--g1,#8B5CF6) 22%,transparent) !important;
opacity:1 !important; margin-top:0 !important;
transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s !important;
}
header#header .mega a:hover .mega-ico{
transform:scale(1.12) rotate(-5deg);
box-shadow:0 6px 20px -4px color-mix(in srgb,var(--g1,#8B5CF6) 45%,transparent);
}
header#header .mega-ico svg{ width:19px !important; height:19px !important; }
/* mega-chip (Industries/Use Cases icons) → same gradient well treatment via --dc */
header#header .mega-chip{
width:38px !important; height:38px !important; border-radius:11px !important;
display:inline-flex !important; align-items:center; justify-content:center; flex-shrink:0;
background:linear-gradient(135deg,color-mix(in srgb,var(--dc,#8B5CF6) 20%,transparent),color-mix(in srgb,var(--dc,#8B5CF6) 8%,transparent)) !important;
border:1px solid color-mix(in srgb,var(--dc,#8B5CF6) 24%,transparent) !important;
transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s !important;
}
header#header .mega-chip svg{ width:19px; height:19px; }
header#header .mega a:hover .mega-chip{
transform:scale(1.12) rotate(-5deg);
box-shadow:0 6px 20px -4px color-mix(in srgb,var(--dc,#8B5CF6) 45%,transparent);
}
/* Industries / Use Cases links: they're single-line — give them vertical centering
and the same premium row height so they don't look like a flat list */
header#header .mega-grid-industries a{
font-size:13.5px !important; font-weight:600 !important;
padding:10px 11px !important; align-items:center !important;
}
/* add a hover arrow to every mega link that doesn't already have one (parity with mv2-arrow) */
header#header .mega a::after{
content:"";
width:16px; height:16px; flex-shrink:0; margin-left:auto;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
opacity:.14; transition:opacity .25s,transform .25s;
}
header#header .mega a:hover::after{ opacity:.5; transform:translateX(3px); }
/* don't double-add arrow where an explicit .mv2-arrow already exists */
header#header .mv2-link::after{ display:none; }
/* column headings for Resources/Company (mega-col) — subtle premium label like mv2-head.
Only if a heading exists; harmless otherwise. */
header#header .mega-col > .mega-head{
display:block;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:rgba(139,92,246,.55);padding:8px 10px 6px;
}
/* ============================================================
PREMIUM DROPDOWN PARITY v2 — panel-level match + hover animation
Bring the plain .mega panels (Industries, Use Cases, Resources,
Company) to full mega-v2 parity: violet-tinted border, gradient
background, inset ring, larger radius/padding, AND the shimmer
sweep animation that plays when the nav item is hovered.
============================================================ */
/* panel: match mega-v2 border / gradient bg / inset ring / radius / padding */
header#header .mega:not(.mega-v2){
padding:22px !important;
background:linear-gradient(170deg,rgba(18,10,38,.98),rgba(10,5,22,.98)) !important;
backdrop-filter:blur(28px) !important; -webkit-backdrop-filter:blur(28px) !important;
border:1px solid rgba(139,92,246,.14) !important;
border-radius:18px !important;
box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset !important;
overflow:hidden;
}
/* shimmer sweep: same diagonal light gradient that sweeps on nav hover */
header#header .mega:not(.mega-v2)::after{
content:'' !important; position:absolute !important; inset:0 !important;
border-radius:inherit !important; pointer-events:none !important; z-index:1 !important;
background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.04) 47%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 53%, transparent 58%) !important;
background-size:250% 100% !important;
background-position:200% 0 !important;
}
header#header .nav-item.has-mega:hover .mega:not(.mega-v2)::after{
background-position:-50% 0 !important;
transition:background-position 1.1s ease .1s !important;
}
/* keep content above the shimmer layer */
header#header .mega:not(.mega-v2) > *{ position:relative; z-index:2; }
/* cursor-follow spotlight glow on each link (parity with .mv2-link::before) */
header#header .mega:not(.mega-v2) a{ position:relative; overflow:hidden; }
header#header .mega:not(.mega-v2) a::before{
content:''; position:absolute; inset:0; border-radius:12px; opacity:0; z-index:0;
background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.12),transparent 60%);
transition:opacity .3s; pointer-events:none;
}
header#header .mega:not(.mega-v2) a:hover::before{ opacity:1; }
/* ensure the link's own content (icon/text/arrow) sits above the glow */
header#header .mega:not(.mega-v2) a > *{ position:relative; z-index:1; }
/* ============================================================
FIX double border on plain dropdowns: the inner .mega-grid was
styled as its own card (border/bg/radius/shadow/accent) while my
parity CSS also styles the outer .mega panel — two rectangles.
Premium mega-v2 styles only the outer panel with a transparent
inner grid. Match that: strip the inner card styling so the plain
dropdowns show a single clean border like Solutions/Providers.
============================================================ */
header#header .mega:not(.mega-v2) > .mega-grid,
.hdr-minimal .mega:not(.mega-v2) > .mega-grid{
background:transparent !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
border:none !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
min-width:0 !important;
}
/* remove the inner card's top accent line and pointer arrow (belong to the old nested-card look) */
header#header .mega:not(.mega-v2) > .mega-grid::before,
header#header .mega:not(.mega-v2) > .mega-grid::after,
.hdr-minimal .mega:not(.mega-v2) > .mega-grid::before,
.hdr-minimal .mega:not(.mega-v2) > .mega-grid::after{
display:none !important;
}
/* also neutralize the base .mega-grid background so no inner fill remains */
header#header .mega:not(.mega-v2) .mega-grid{ background:transparent !important; }
/* ---- calculator tabs (Bookings / Payments / Connectivity) ---- */
.rc-calc{margin-top:44px}
.rc-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.rc-tab{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:12px;
background:#15121d;border:1px solid rgba(255,255,255,.08);color:rgba(245,242,250,.6);
font-size:14px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.22,.7,.2,1);font-family:inherit}
.rc-tab:hover{color:#fff;border-color:rgba(245,134,127,.3)}
.rc-tab.is-active{background:linear-gradient(135deg,rgba(245,134,127,.16),rgba(240,68,46,.08));
border-color:rgba(245,134,127,.4);color:#fff}
.rc-tab-dot{width:9px;height:9px;border-radius:50%;flex:none}
.rc-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.rc-inputs{background:#15121d;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:30px;display:flex;flex-direction:column;justify-content:center}
.rc-panel{display:none}
.rc-panel.is-active{display:block;animation:rcFade .35s ease}
@keyframes rcFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rc-panel-lead{font-size:13px;line-height:1.55;color:rgba(245,242,250,.6);margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
.rc-panel .indp-calc-field{margin-bottom:24px}
.rc-panel .indp-calc-field:last-child{margin-bottom:0}
/* outage-cost callout in the results panel */
.rc-callout{display:flex;gap:12px;align-items:flex-start;background:rgba(240,68,46,.08);
border:1px solid rgba(240,68,46,.22);border-radius:14px;padding:14px 16px;margin:20px 0 0}
.rc-callout-ic{display:flex;flex:none;width:32px;height:32px;border-radius:9px;align-items:center;justify-content:center;
background:rgba(240,68,46,.15);color:#F0442E;margin-top:1px}
.rc-callout-ic svg{width:17px;height:17px}
.rc-callout div{font-size:12.5px;line-height:1.5;color:rgba(245,242,250,.72)}
.rc-callout b{color:#fff;display:inline}
.rc-callout #rc-outage-cost{color:#F5867F;font-weight:700;font-family:'Space Grotesk',sans-serif}
.indp-calc-bar span:nth-child(3){background:#F0442E}
@media(max-width:820px){ .rc-body{grid-template-columns:1fr} }
/* ============================================================
RESTAURANTS CONNECTIVITY — step-by-step form
============================================================ */
.rcx-hero{padding:110px 0 50px;text-align:center}
.rcx-hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:2}
.rcx-hero .breadcrumb{justify-content:center;margin-bottom:18px}
.rcx-hero .indp-badge{margin-left:auto;margin-right:auto}
.rcx-formsec{padding-top:10px}
.rcx-card{position:relative;background:#15121d;border:1px solid rgba(255,255,255,.08);border-radius:22px;
padding:40px 40px 34px;box-shadow:0 40px 90px -50px rgba(240,68,46,.4);overflow:hidden;min-height:340px}
.rcx-progress{position:absolute;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.06)}
.rcx-progress-bar{height:100%;background:linear-gradient(90deg,#F5867F,#F0442E);border-radius:0 3px 3px 0;
transition:width .45s cubic-bezier(.22,.7,.2,1)}
.rcx-steps{position:relative}
.rcx-step{display:none;animation:rcxIn .4s cubic-bezier(.22,.7,.2,1)}
.rcx-step.is-active{display:block}
@keyframes rcxIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.rcx-step-n{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:#F5867F;margin-bottom:14px}
.rcx-step h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3vw,28px);color:#F7F5FB;margin:0 0 8px;line-height:1.15}
.rcx-step-help{font-size:14px;line-height:1.55;color:rgba(245,242,250,.6);margin:0 0 26px}
/* choice buttons */
.rcx-choices{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.rcx-choice{text-align:left;padding:16px 18px;border-radius:13px;background:#1b1826;
border:1px solid rgba(255,255,255,.09);color:#EDEAF5;font-size:14.5px;font-weight:500;font-family:inherit;
cursor:pointer;transition:all .22s cubic-bezier(.22,.7,.2,1);position:relative}
.rcx-choice:hover{border-color:rgba(245,134,127,.45);background:#211c2e;transform:translateY(-2px)}
.rcx-choice.is-picked{border-color:#F0442E;background:linear-gradient(135deg,rgba(245,134,127,.18),rgba(240,68,46,.1));color:#fff}
.rcx-choice.is-picked::after{content:"✓";position:absolute;top:12px;right:14px;color:#F5867F;font-weight:700}
/* text input steps */
.rcx-fields{display:grid;gap:13px;margin-bottom:22px}
.rcx-input{width:100%;padding:15px 17px;border-radius:12px;background:#1b1826;border:1px solid rgba(255,255,255,.1);
color:#fff;font-size:15px;font-family:inherit;transition:border-color .25s,box-shadow .25s}
.rcx-input::placeholder{color:rgba(245,242,250,.4)}
.rcx-input:focus{outline:none;border-color:rgba(245,134,127,.55);box-shadow:0 0 0 3px rgba(240,68,46,.12)}
/* continue / submit */
.rcx-next{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:12px;border:none;
background:linear-gradient(120deg,#F5867F,#F0442E);color:#fff;font-size:15.5px;font-weight:600;font-family:inherit;
cursor:pointer;transition:transform .3s,box-shadow .3s,opacity .3s;box-shadow:0 16px 36px -16px rgba(240,68,46,.8)}
.rcx-next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(240,68,46,.9)}
.rcx-next:disabled{opacity:.4;cursor:not-allowed}
.rcx-next .rcx-arr{transition:transform .3s}
.rcx-next:hover:not(:disabled) .rcx-arr{transform:translateX(4px)}
.rcx-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:rgba(245,242,250,.66);
margin-bottom:22px;cursor:pointer}
.rcx-consent input{margin-top:2px;accent-color:#F0442E;width:16px;height:16px;flex:none}
.rcx-back{margin-top:20px;font-size:13.5px;font-weight:600;color:rgba(245,242,250,.5);cursor:pointer;
display:inline-flex;align-items:center;transition:color .25s;-webkit-user-select:none;user-select:none}
.rcx-back:hover{color:#F5867F}
.rcx-trust{text-align:center;font-size:12.5px;color:rgba(245,242,250,.45);margin-top:20px}
/* success */
.rcx-success{text-align:center;padding:20px 10px}
.rcx-success-ico{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#F5867F,#F0442E);
display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 16px 40px -12px rgba(240,68,46,.7)}
.rcx-success h2{font-family:'Space Grotesk',sans-serif;font-size:26px;color:#F7F5FB;margin:0 0 12px}
.rcx-success p{font-size:15px;line-height:1.6;color:rgba(245,242,250,.7);max-width:460px;margin:0 auto 18px}
@media(max-width:560px){
.rcx-card{padding:32px 22px 26px}
.rcx-choices{grid-template-columns:1fr}
}
/* ---- connectivity/audit form: engagement modes + multi-select + postal note ---- */
.rcx-multi{margin-bottom:22px}
.rcx-choice.is-picked{border-color:#F0442E}
.rcx-modes{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:22px}
.rcx-mode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
padding:16px 18px;border-radius:13px;background:#1b1826;border:1px solid rgba(255,255,255,.09);
color:#EDEAF5;font-family:inherit;cursor:pointer;transition:all .22s cubic-bezier(.22,.7,.2,1);position:relative}
.rcx-mode:hover:not(.rcx-mode-locked){border-color:rgba(245,134,127,.45);background:#211c2e;transform:translateY(-2px)}
.rcx-mode.is-picked{border-color:#F0442E;background:linear-gradient(135deg,rgba(245,134,127,.18),rgba(240,68,46,.1))}
.rcx-mode.is-picked::after{content:"✓";position:absolute;top:12px;right:14px;color:#F5867F;font-weight:700}
.rcx-mode-ic{display:flex;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;
background:rgba(240,68,46,.14);color:#F5867F;margin-bottom:6px}
.rcx-mode-ic svg{width:18px;height:18px}
.rcx-mode-t{font-size:14.5px;font-weight:600;color:#fff}
.rcx-mode-s{font-size:11.5px;color:rgba(245,242,250,.5)}
.rcx-mode-locked{opacity:.5;cursor:not-allowed}
.rcx-mode-locked .rcx-mode-ic{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.rcx-postal-note{font-size:12px;margin:2px 2px 0;min-height:16px;color:rgba(245,242,250,.5)}
.rcx-postal-note.ok{color:#4ADE80}
.rcx-postal-note.warn{color:#F59E0B}
@media(max-width:560px){ .rcx-modes{grid-template-columns:1fr} }
/* ---- Healthcare hero accent (clinical green + trust blue) ---- */
.indp-hero-health .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(34,197,94,.4),transparent 70%)}
.indp-hero-health .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(77,141,255,.3),transparent 70%)}
.indp-hero-health .indp-badge{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#22C55E}
.indp-hero-health .indp-grad{background:linear-gradient(120deg,#22C55E,#4D8DFF 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-health .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(34,197,94,.5)}
/* health pain icons + primary button tint */
.indp-hero-health ~ .indp-pain .indp-pain-ic{background:rgba(34,197,94,.12);color:#22C55E}
.indp-hero-health ~ .indp-pain .indp-pain-card:hover{border-color:rgba(34,197,94,.35)}
/* healthcare primary buttons → clinical green (scoped to health pages) */
.indp-hero-health .indp-btn-primary,
.indp-hero-health ~ .sec .indp-btn-primary,
.indp-hero-health ~ .sec .indp-band-cta,
.rcx-hero-health .rcx-next, .rcx-hero-health ~ .sec .rcx-next,
.rcx-hero-health ~ .sec .rcx-choice.is-picked, .rcx-hero-health ~ .sec .rcx-mode.is-picked{
--hc:#22C55E;
}
.indp-hero-health .indp-btn-primary,
.indp-hero-health ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#22C55E,#16A34A) !important;
box-shadow:0 16px 36px -16px rgba(34,197,94,.7) !important;
}
.indp-hero-health ~ .sec .indp-calc-result-num,
.indp-hero-health ~ .sec .rc-tab.is-active{
--none:0;
}
/* health calc accent */
.indp-hero-health ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#22C55E,#4D8DFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-health ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(77,141,255,.08));border-color:rgba(34,197,94,.4)}
.indp-hero-health ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#22C55E,#4D8DFF)}
.indp-hero-health ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#22C55E}
.indp-hero-health ~ .indp-proof .indp-proof-stat b{color:#22C55E}
.indp-hero-health ~ .indp-faq .indp-faq-item summary::after{color:#22C55E}
/* ---- Retail hero accent (amber + slate-blue) ---- */
.indp-hero-retail .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(245,158,11,.4),transparent 70%)}
.indp-hero-retail .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(100,116,139,.3),transparent 70%)}
.indp-hero-retail .indp-badge{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#F59E0B}
.indp-hero-retail .indp-grad{background:linear-gradient(120deg,#F59E0B,#FBBF24 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-retail .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(245,158,11,.5)}
.indp-hero-retail ~ .indp-pain .indp-pain-ic{background:rgba(245,158,11,.12);color:#F59E0B}
.indp-hero-retail ~ .indp-pain .indp-pain-card:hover{border-color:rgba(245,158,11,.35)}
/* retail primary buttons → amber */
.indp-hero-retail .indp-btn-primary,
.indp-hero-retail ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#F59E0B,#D97706) !important;
box-shadow:0 16px 36px -16px rgba(245,158,11,.7) !important;
}
.indp-hero-retail ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#F59E0B,#FBBF24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-retail ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(251,191,36,.08));border-color:rgba(245,158,11,.4)}
.indp-hero-retail ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#F59E0B,#FBBF24)}
.indp-hero-retail ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#F59E0B}
.indp-hero-retail ~ .indp-proof .indp-proof-stat b{color:#F59E0B}
.indp-hero-retail ~ .indp-faq .indp-faq-item summary::after{color:#F59E0B}
/* retail form accent */
.rcx-hero-retail .g1{background:radial-gradient(circle,rgba(245,158,11,.4),transparent 70%)}
.rcx-hero-retail .indp-badge{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#F59E0B}
.rcx-hero-retail .indp-grad{background:linear-gradient(120deg,#F59E0B,#FBBF24 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-retail ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-retail ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#F59E0B,#D97706)}
.rcx-hero-retail ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-retail ~ .rcx-formsec .rcx-mode.is-picked{border-color:#F59E0B;background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(217,119,6,.1))}
.rcx-hero-retail ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-retail ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-retail ~ .rcx-formsec .rcx-step-n{color:#F59E0B}
.rcx-hero-retail ~ .rcx-formsec .rcx-input:focus{border-color:rgba(245,158,11,.55);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
/* proof-section CTA (lead-gen placement in the "Why it works" band) */
.indp-proof-cta{margin-top:28px}
/* ============================================================
FIX: .sec-tint light-theme text rules were forcing dark text
(#1e1530 / rgba(30,21,48)) via !important. On dark-themed pages
(.pay-page and the indp-* industry pages) that lands dark-on-dark
and is illegible. Re-assert legible light text + correct dark bg
inside these dark contexts.
============================================================ */
.pay-page .sec-tint{
background:var(--cream-2, #1C0F32) !important;
}
.pay-page .sec-tint h2,
.pay-page .sec-tint h3{ color:var(--ink, #F5F2FA) !important; }
.pay-page .sec-tint p{ color:var(--ink-2, rgba(245,242,250,.72)) !important; }
.pay-page .cpartner{ background:var(--cream-3, #241541) !important; }
.pay-page .cpartner h2{ color:var(--ink, #F5F2FA) !important; }
.pay-page .sec-tint .lchip,
.pay-page .sec-tint .fcard{ background:var(--card, #1E1236) !important; border-color:var(--line, rgba(177,166,255,.14)) !important; }
/* FIX: the global .disclosure base rule (telebridge.css) forces a light --ice
background with dark text. Inside the dark .pay-page that renders as a light
label with light text (illegible). Override to a subtle dark panel + legible
light text so the Paystone disclaimer reads correctly. */
.pay-page .disclosure,
.pay-page .quick-form .disclosure{
background:rgba(177,166,255,.06) !important;
border-left-color:rgba(242,85,77,.5) !important;
color:var(--ink-3, rgba(245,242,250,.5)) !important;
}
/* ---- Logistics hero accent (electric cyan + slate-blue) ---- */
.indp-hero-logistics .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(6,182,212,.4),transparent 70%)}
.indp-hero-logistics .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%)}
.indp-hero-logistics .indp-badge{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3);color:#06B6D4}
.indp-hero-logistics .indp-grad{background:linear-gradient(120deg,#06B6D4,#22D3EE 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-logistics .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(6,182,212,.5)}
.indp-hero-logistics ~ .indp-pain .indp-pain-ic{background:rgba(6,182,212,.12);color:#06B6D4}
.indp-hero-logistics ~ .indp-pain .indp-pain-card:hover{border-color:rgba(6,182,212,.35)}
/* logistics primary buttons → cyan */
.indp-hero-logistics .indp-btn-primary,
.indp-hero-logistics ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#06B6D4,#0891B2) !important;
box-shadow:0 16px 36px -16px rgba(6,182,212,.7) !important;
}
.indp-hero-logistics ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#06B6D4,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-logistics ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(6,182,212,.16),rgba(34,211,238,.08));border-color:rgba(6,182,212,.4)}
.indp-hero-logistics ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#06B6D4,#22D3EE)}
.indp-hero-logistics ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#06B6D4}
.indp-hero-logistics ~ .indp-proof .indp-proof-stat b{color:#06B6D4}
.indp-hero-logistics ~ .indp-faq .indp-faq-item summary::after{color:#06B6D4}
/* logistics form accent */
.rcx-hero-logistics .g1{background:radial-gradient(circle,rgba(6,182,212,.4),transparent 70%)}
.rcx-hero-logistics .indp-badge{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3);color:#06B6D4}
.rcx-hero-logistics .indp-grad{background:linear-gradient(120deg,#06B6D4,#22D3EE 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-logistics ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-logistics ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#06B6D4,#0891B2)}
.rcx-hero-logistics ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-logistics ~ .rcx-formsec .rcx-mode.is-picked{border-color:#06B6D4;background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(8,145,178,.1))}
.rcx-hero-logistics ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-logistics ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-logistics ~ .rcx-formsec .rcx-step-n{color:#06B6D4}
.rcx-hero-logistics ~ .rcx-formsec .rcx-input:focus{border-color:rgba(6,182,212,.55);box-shadow:0 0 0 3px rgba(6,182,212,.12)}
/* ---- Manufacturing hero accent (industrial orange + steel) ---- */
.indp-hero-mfg .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(249,115,22,.4),transparent 70%)}
.indp-hero-mfg .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(100,116,139,.3),transparent 70%)}
.indp-hero-mfg .indp-badge{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.3);color:#F97316}
.indp-hero-mfg .indp-grad{background:linear-gradient(120deg,#F97316,#FB923C 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-mfg .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(249,115,22,.5)}
.indp-hero-mfg ~ .indp-pain .indp-pain-ic{background:rgba(249,115,22,.12);color:#F97316}
.indp-hero-mfg ~ .indp-pain .indp-pain-card:hover{border-color:rgba(249,115,22,.35)}
/* manufacturing primary buttons → industrial orange */
.indp-hero-mfg .indp-btn-primary,
.indp-hero-mfg ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#F97316,#EA580C) !important;
box-shadow:0 16px 36px -16px rgba(249,115,22,.7) !important;
}
.indp-hero-mfg ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#F97316,#FB923C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-mfg ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(251,146,60,.08));border-color:rgba(249,115,22,.4)}
.indp-hero-mfg ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#F97316,#FB923C)}
.indp-hero-mfg ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#F97316}
.indp-hero-mfg ~ .indp-proof .indp-proof-stat b{color:#F97316}
.indp-hero-mfg ~ .indp-faq .indp-faq-item summary::after{color:#F97316}
/* manufacturing form accent */
.rcx-hero-mfg .g1{background:radial-gradient(circle,rgba(249,115,22,.4),transparent 70%)}
.rcx-hero-mfg .indp-badge{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.3);color:#F97316}
.rcx-hero-mfg .indp-grad{background:linear-gradient(120deg,#F97316,#FB923C 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-mfg ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-mfg ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#F97316,#EA580C)}
.rcx-hero-mfg ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-mfg ~ .rcx-formsec .rcx-mode.is-picked{border-color:#F97316;background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(234,88,12,.1))}
.rcx-hero-mfg ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-mfg ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-mfg ~ .rcx-formsec .rcx-step-n{color:#F97316}
.rcx-hero-mfg ~ .rcx-formsec .rcx-input:focus{border-color:rgba(249,115,22,.55);box-shadow:0 0 0 3px rgba(249,115,22,.12)}
/* ---- Construction hero accent (hi-vis yellow + steel) ---- */
.indp-hero-const .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(250,204,21,.38),transparent 70%)}
.indp-hero-const .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(100,116,139,.3),transparent 70%)}
.indp-hero-const .indp-badge{background:rgba(250,204,21,.1);border-color:rgba(250,204,21,.32);color:#FACC15}
.indp-hero-const .indp-grad{background:linear-gradient(120deg,#FACC15,#FDE047 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-const .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(250,204,21,.45)}
.indp-hero-const ~ .indp-pain .indp-pain-ic{background:rgba(250,204,21,.12);color:#FACC15}
.indp-hero-const ~ .indp-pain .indp-pain-card:hover{border-color:rgba(250,204,21,.35)}
/* construction primary buttons → hi-vis yellow (dark text for contrast on yellow) */
.indp-hero-const .indp-btn-primary,
.indp-hero-const ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#FACC15,#EAB308) !important;
box-shadow:0 16px 36px -16px rgba(250,204,21,.6) !important;
color:#1A1206 !important;
}
.indp-hero-const .indp-btn-primary *,
.indp-hero-const ~ .sec .indp-btn-primary *{color:#1A1206 !important;}
.indp-hero-const ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#FACC15,#FDE047);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-const ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(250,204,21,.16),rgba(253,224,71,.08));border-color:rgba(250,204,21,.4)}
.indp-hero-const ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#FACC15,#FDE047)}
.indp-hero-const ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#FACC15}
.indp-hero-const ~ .indp-proof .indp-proof-stat b{color:#FACC15}
.indp-hero-const ~ .indp-faq .indp-faq-item summary::after{color:#FACC15}
/* construction form accent */
.rcx-hero-const .g1{background:radial-gradient(circle,rgba(250,204,21,.38),transparent 70%)}
.rcx-hero-const .indp-badge{background:rgba(250,204,21,.1);border-color:rgba(250,204,21,.32);color:#FACC15}
.rcx-hero-const .indp-grad{background:linear-gradient(120deg,#FACC15,#FDE047 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-const ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-const ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#FACC15,#EAB308);color:#1A1206}
.rcx-hero-const ~ .rcx-formsec .rcx-next .rcx-arr{color:#1A1206}
.rcx-hero-const ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-const ~ .rcx-formsec .rcx-mode.is-picked{border-color:#FACC15;background:linear-gradient(135deg,rgba(250,204,21,.18),rgba(234,179,8,.1))}
.rcx-hero-const ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-const ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-const ~ .rcx-formsec .rcx-step-n{color:#FACC15}
.rcx-hero-const ~ .rcx-formsec .rcx-input:focus{border-color:rgba(250,204,21,.55);box-shadow:0 0 0 3px rgba(250,204,21,.12)}
/* ---- Salon/Spa hero accent (warm rose-pink + soft mauve) ---- */
.indp-hero-salon .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(244,114,182,.36),transparent 70%)}
.indp-hero-salon .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(192,132,252,.3),transparent 70%)}
.indp-hero-salon .indp-badge{background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.3);color:#F472B6}
.indp-hero-salon .indp-grad{background:linear-gradient(120deg,#F472B6,#F9A8D4 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-salon .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(244,114,182,.45)}
.indp-hero-salon ~ .indp-pain .indp-pain-ic{background:rgba(244,114,182,.12);color:#F472B6}
.indp-hero-salon ~ .indp-pain .indp-pain-card:hover{border-color:rgba(244,114,182,.35)}
/* salon primary buttons → rose-pink */
.indp-hero-salon .indp-btn-primary,
.indp-hero-salon ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#F472B6,#EC4899) !important;
box-shadow:0 16px 36px -16px rgba(244,114,182,.6) !important;
}
.indp-hero-salon ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#F472B6,#F9A8D4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-salon ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(244,114,182,.16),rgba(249,168,212,.08));border-color:rgba(244,114,182,.4)}
.indp-hero-salon ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#F472B6,#F9A8D4)}
.indp-hero-salon ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#F472B6}
.indp-hero-salon ~ .indp-proof .indp-proof-stat b{color:#F472B6}
.indp-hero-salon ~ .indp-faq .indp-faq-item summary::after{color:#F472B6}
/* salon form accent */
.rcx-hero-salon .g1{background:radial-gradient(circle,rgba(244,114,182,.36),transparent 70%)}
.rcx-hero-salon .indp-badge{background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.3);color:#F472B6}
.rcx-hero-salon .indp-grad{background:linear-gradient(120deg,#F472B6,#F9A8D4 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-salon ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-salon ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#F472B6,#EC4899)}
.rcx-hero-salon ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-salon ~ .rcx-formsec .rcx-mode.is-picked{border-color:#F472B6;background:linear-gradient(135deg,rgba(244,114,182,.18),rgba(236,72,153,.1))}
.rcx-hero-salon ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-salon ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-salon ~ .rcx-formsec .rcx-step-n{color:#F472B6}
.rcx-hero-salon ~ .rcx-formsec .rcx-input:focus{border-color:rgba(244,114,182,.55);box-shadow:0 0 0 3px rgba(244,114,182,.12)}
/* ---- Auto Dealers hero accent (electric blue + steel) ---- */
.indp-hero-auto .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(37,99,235,.38),transparent 70%)}
.indp-hero-auto .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(100,116,139,.3),transparent 70%)}
.indp-hero-auto .indp-badge{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.32);color:#3B82F6}
.indp-hero-auto .indp-grad{background:linear-gradient(120deg,#2563EB,#60A5FA 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-auto .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(37,99,235,.5)}
.indp-hero-auto ~ .indp-pain .indp-pain-ic{background:rgba(37,99,235,.12);color:#3B82F6}
.indp-hero-auto ~ .indp-pain .indp-pain-card:hover{border-color:rgba(37,99,235,.35)}
/* auto primary buttons → electric blue */
.indp-hero-auto .indp-btn-primary,
.indp-hero-auto ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#2563EB,#1D4ED8) !important;
box-shadow:0 16px 36px -16px rgba(37,99,235,.6) !important;
}
.indp-hero-auto ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#2563EB,#60A5FA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-auto ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(96,165,250,.08));border-color:rgba(37,99,235,.4)}
.indp-hero-auto ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#2563EB,#60A5FA)}
.indp-hero-auto ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#2563EB}
.indp-hero-auto ~ .indp-proof .indp-proof-stat b{color:#3B82F6}
.indp-hero-auto ~ .indp-faq .indp-faq-item summary::after{color:#3B82F6}
/* auto form accent */
.rcx-hero-auto .g1{background:radial-gradient(circle,rgba(37,99,235,.38),transparent 70%)}
.rcx-hero-auto .indp-badge{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.32);color:#3B82F6}
.rcx-hero-auto .indp-grad{background:linear-gradient(120deg,#2563EB,#60A5FA 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-auto ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-auto ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#2563EB,#1D4ED8)}
.rcx-hero-auto ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-auto ~ .rcx-formsec .rcx-mode.is-picked{border-color:#2563EB;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(29,78,216,.1))}
.rcx-hero-auto ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-auto ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-auto ~ .rcx-formsec .rcx-step-n{color:#3B82F6}
.rcx-hero-auto ~ .rcx-formsec .rcx-input:focus{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* ---- Professional Services hero accent (deep teal + slate) ---- */
.indp-hero-pro .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(13,148,136,.36),transparent 70%)}
.indp-hero-pro .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(100,116,139,.3),transparent 70%)}
.indp-hero-pro .indp-badge{background:rgba(13,148,136,.1);border-color:rgba(13,148,136,.32);color:#14B8A6}
.indp-hero-pro .indp-grad{background:linear-gradient(120deg,#0D9488,#2DD4BF 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-pro .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(13,148,136,.5)}
.indp-hero-pro ~ .indp-pain .indp-pain-ic{background:rgba(13,148,136,.12);color:#14B8A6}
.indp-hero-pro ~ .indp-pain .indp-pain-card:hover{border-color:rgba(13,148,136,.35)}
/* pro primary buttons → deep teal */
.indp-hero-pro .indp-btn-primary,
.indp-hero-pro ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#0D9488,#0F766E) !important;
box-shadow:0 16px 36px -16px rgba(13,148,136,.6) !important;
}
.indp-hero-pro ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#0D9488,#2DD4BF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-pro ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(13,148,136,.16),rgba(45,212,191,.08));border-color:rgba(13,148,136,.4)}
.indp-hero-pro ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#0D9488,#2DD4BF)}
.indp-hero-pro ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#0D9488}
.indp-hero-pro ~ .indp-proof .indp-proof-stat b{color:#14B8A6}
.indp-hero-pro ~ .indp-faq .indp-faq-item summary::after{color:#14B8A6}
/* pro form accent */
.rcx-hero-pro .g1{background:radial-gradient(circle,rgba(13,148,136,.36),transparent 70%)}
.rcx-hero-pro .indp-badge{background:rgba(13,148,136,.1);border-color:rgba(13,148,136,.32);color:#14B8A6}
.rcx-hero-pro .indp-grad{background:linear-gradient(120deg,#0D9488,#2DD4BF 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-pro ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-pro ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#0D9488,#0F766E)}
.rcx-hero-pro ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-pro ~ .rcx-formsec .rcx-mode.is-picked{border-color:#0D9488;background:linear-gradient(135deg,rgba(13,148,136,.18),rgba(15,118,110,.1))}
.rcx-hero-pro ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-pro ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-pro ~ .rcx-formsec .rcx-step-n{color:#14B8A6}
.rcx-hero-pro ~ .rcx-formsec .rcx-input:focus{border-color:rgba(13,148,136,.55);box-shadow:0 0 0 3px rgba(13,148,136,.12)}
/* ---- Nonprofits hero accent (warm violet + soft lavender) ---- */
.indp-hero-np .g1{width:520px;height:520px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(147,51,234,.36),transparent 70%)}
.indp-hero-np .g2{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(168,85,247,.28),transparent 70%)}
.indp-hero-np .indp-badge{background:rgba(147,51,234,.1);border-color:rgba(147,51,234,.32);color:#A855F7}
.indp-hero-np .indp-grad{background:linear-gradient(120deg,#9333EA,#C084FC 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-np .indp-hero-media .indp-ph{box-shadow:0 40px 90px -40px rgba(147,51,234,.5)}
.indp-hero-np ~ .indp-pain .indp-pain-ic{background:rgba(147,51,234,.12);color:#A855F7}
.indp-hero-np ~ .indp-pain .indp-pain-card:hover{border-color:rgba(147,51,234,.35)}
/* nonprofit primary buttons → warm violet */
.indp-hero-np .indp-btn-primary,
.indp-hero-np ~ .sec .indp-btn-primary{
background:linear-gradient(120deg,#9333EA,#7E22CE) !important;
box-shadow:0 16px 36px -16px rgba(147,51,234,.6) !important;
}
.indp-hero-np ~ .indp-calc .indp-calc-result-num{background:linear-gradient(90deg,#9333EA,#C084FC);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indp-hero-np ~ .indp-calc .rc-tab.is-active{background:linear-gradient(135deg,rgba(147,51,234,.16),rgba(192,132,252,.08));border-color:rgba(147,51,234,.4)}
.indp-hero-np ~ .indp-calc input[type=range]{background:linear-gradient(90deg,#9333EA,#C084FC)}
.indp-hero-np ~ .indp-calc input[type=range]::-webkit-slider-thumb{border-color:#9333EA}
.indp-hero-np ~ .indp-proof .indp-proof-stat b{color:#A855F7}
.indp-hero-np ~ .indp-faq .indp-faq-item summary::after{color:#A855F7}
/* nonprofit form accent */
.rcx-hero-np .g1{background:radial-gradient(circle,rgba(147,51,234,.36),transparent 70%)}
.rcx-hero-np .indp-badge{background:rgba(147,51,234,.1);border-color:rgba(147,51,234,.32);color:#A855F7}
.rcx-hero-np .indp-grad{background:linear-gradient(120deg,#9333EA,#C084FC 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rcx-hero-np ~ .rcx-formsec .rcx-progress-bar,
.rcx-hero-np ~ .rcx-formsec .rcx-next{background:linear-gradient(120deg,#9333EA,#7E22CE)}
.rcx-hero-np ~ .rcx-formsec .rcx-choice.is-picked,
.rcx-hero-np ~ .rcx-formsec .rcx-mode.is-picked{border-color:#9333EA;background:linear-gradient(135deg,rgba(147,51,234,.18),rgba(126,34,206,.1))}
.rcx-hero-np ~ .rcx-formsec .rcx-choice.is-picked::after,
.rcx-hero-np ~ .rcx-formsec .rcx-mode.is-picked::after,
.rcx-hero-np ~ .rcx-formsec .rcx-step-n{color:#A855F7}
.rcx-hero-np ~ .rcx-formsec .rcx-input:focus{border-color:rgba(147,51,234,.55);box-shadow:0 0 0 3px rgba(147,51,234,.12)}
/* ═══════════════════════════════════════════════════════════════════════
USE CASES — purpose-built uc-* template (DARK theme, matches indp-*)
Reference: /use-cases/lower-payment-processing-fees
Mirrors the industry dark system: #0a0810 body, light ink, translucent cards.
═══════════════════════════════════════════════════════════════════════ */
body:has(.uc-hero){ background:#0a0810; }
.uc-hero,.uc-calc-sec,.uc-problem-sec,.uc-solution-sec,.uc-compare-sec,.uc-steps-sec,.uc-faq-sec,.uc-edge-sec,.uc-proof-sec{
--uc-accent:#10B981; --uc-accent2:#34D399;
--uc-ink:#F4F1FA; --uc-sub:rgba(244,241,250,.64); --uc-faint:rgba(244,241,250,.52);
--uc-card:rgba(255,255,255,.032); --uc-card2:rgba(255,255,255,.055); --uc-border:rgba(255,255,255,.09);
}
/* section backgrounds — alternating depth like the industry pages */
.uc-hero,.uc-problem-sec,.uc-steps-sec{ background:#0a0810; }
.uc-calc-sec,.uc-solution-sec,.uc-compare-sec,.uc-faq-sec{
background:radial-gradient(120% 80% at 50% 0%,rgba(16,185,129,.05),transparent 55%),#0c0a13; }
.uc-solution-sec,.uc-compare-sec{ border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
/* section headings (default sec-head h2 is dark ink → force light on our dark sections) */
.uc-hero .sec-head h2,.uc-calc-sec .sec-head h2,.uc-problem-sec .sec-head h2,.uc-solution-sec .sec-head h2,.uc-compare-sec .sec-head h2,.uc-steps-sec .sec-head h2,.uc-edge-sec .sec-head h2,.uc-proof-sec .sec-head h2,.uc-faq-sec .sec-head h2{ color:#fff; }
/* ---- hero ---- */
.uc-hero{ position:relative; padding:132px 0 88px; overflow:hidden; }
.uc-hero-pf::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(16,185,129,.14), transparent 68%),
radial-gradient(50% 55% at 4% 92%, rgba(184,102,255,.10), transparent 70%); pointer-events:none; }
.uc-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.uc-bc{ margin-bottom:18px; }
.uc-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--uc-accent2);
background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.28); padding:7px 14px; border-radius:100px; }
.uc-badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--uc-accent2); box-shadow:0 0 0 4px rgba(16,185,129,.20); }
.uc-partner{ display:inline-flex; align-items:center; gap:12px; }
.uc-partner-lbl{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--uc-faint); }
.uc-partner-chip{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:11px; padding:8px 15px; box-shadow:0 10px 26px -14px rgba(0,0,0,.55); }
.uc-partner-chip img{ height:22px; width:auto; display:block; }
.uc-hero-title{ font-size:clamp(34px,5vw,54px); line-height:1.06; letter-spacing:-.02em; margin:20px 0 0; color:#fff; font-weight:700; }
.uc-grad{ background:linear-gradient(100deg,var(--uc-accent2),#5EEAD4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.uc-hero-sub{ font-size:18px; line-height:1.6; color:var(--uc-sub); max-width:560px; margin:22px 0 0; }
.uc-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 0; }
.uc-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
.uc-chip{ font-size:13px; font-weight:600; color:var(--uc-ink); background:var(--uc-card); border:1px solid var(--uc-border);
padding:8px 13px; border-radius:10px; }
.uc-chip::before{ content:"✓"; color:var(--uc-accent2); font-weight:800; margin-right:7px; }
.uc-hero-media .indp-ph{ border-radius:20px; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); border:1px solid var(--uc-border); }
/* ---- shared section bits ---- */
.uc-eyebrow{ color:var(--uc-accent2)!important; }
.uc-sec-sub{ max-width:640px; margin:14px auto 0; color:var(--uc-sub); font-size:16px; line-height:1.6; }
/* ---- primary/ghost buttons: retint the reused indp-btn to green in uc context ---- */
.uc-hero .indp-btn-primary,.uc-calc-sec .indp-btn-primary{
background:linear-gradient(120deg,var(--uc-accent),var(--uc-accent2)); color:#04231A;
box-shadow:0 18px 40px -16px rgba(16,185,129,.6); }
.uc-hero .indp-btn-ghost,.uc-calc-sec .indp-btn-ghost{ color:var(--uc-ink); border:1px solid var(--uc-border); background:var(--uc-card); }
/* ---- calculator ---- */
.uc-calc{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:40px; background:var(--uc-card);
border:1px solid var(--uc-border); border-radius:22px; overflow:hidden; }
.uc-calc-inputs{ padding:38px 36px; border-right:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:32px; justify-content:center; }
.uc-calc-field label{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; color:var(--uc-ink); font-size:15px; margin-bottom:12px; }
.uc-calc-field label b{ font-size:19px; color:var(--uc-accent2); }
.uc-calc-field input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px; background:rgba(255,255,255,.12); outline:none; }
.uc-calc-field input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--uc-accent2); border:3px solid #0c0a13; box-shadow:0 2px 10px rgba(16,185,129,.55); cursor:pointer; }
.uc-calc-field input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--uc-accent2); border:3px solid #0c0a13; box-shadow:0 2px 10px rgba(16,185,129,.55); cursor:pointer; }
.uc-calc-hint{ display:block; margin-top:10px; font-size:12.5px; color:var(--uc-faint); line-height:1.5; }
.uc-calc-out{ padding:38px 36px; background:linear-gradient(160deg,rgba(16,185,129,.12),rgba(184,102,255,.05)); display:flex; flex-direction:column; }
.uc-calc-result-lbl{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--uc-faint); }
.uc-calc-result-num{ display:block; font-size:clamp(40px,6vw,56px); font-weight:800; line-height:1; letter-spacing:-.02em;
background:linear-gradient(90deg,var(--uc-accent2),#5EEAD4); -webkit-background-clip:text; background-clip:text; color:transparent; margin:6px 0 8px; }
.uc-calc-result-num span{ font-size:20px; font-weight:600; color:var(--uc-faint); margin-left:4px; -webkit-text-fill-color:var(--uc-faint); }
.uc-calc-result-sub{ font-size:14.5px; color:var(--uc-sub); }
.uc-calc-result-sub b{ color:var(--uc-ink); }
.uc-calc-compare{ margin:26px 0 0; border-top:1px solid rgba(255,255,255,.08); padding-top:22px; }
.uc-calc-row{ display:flex; align-items:center; font-size:14px; color:var(--uc-sub); margin-bottom:7px; }
.uc-calc-row b{ margin-left:auto; color:var(--uc-ink); font-size:15px; }
.uc-calc-rate{ color:var(--uc-faint); font-size:12.5px; margin-left:6px; }
.uc-calc-rate b{ margin-left:0; color:var(--uc-accent2); font-size:12.5px; }
.uc-calc-dot{ width:9px; height:9px; border-radius:50%; margin-right:9px; }
.uc-dot-now{ background:#F08A9B; } .uc-dot-tb{ background:var(--uc-accent2); }
.uc-calc-bar{ height:9px; background:rgba(255,255,255,.08); border-radius:100px; overflow:hidden; margin:0 0 15px; }
.uc-bar-now,.uc-bar-tb{ display:block; height:100%; border-radius:100px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.uc-bar-now{ background:linear-gradient(90deg,#E06A80,#C9526A); }
.uc-bar-tb{ background:linear-gradient(90deg,var(--uc-accent),var(--uc-accent2)); }
.uc-calc-disc{ font-size:12px; color:var(--uc-faint); line-height:1.5; margin:6px 0 18px; }
.uc-calc-cta{ margin-top:auto; align-self:flex-start; }
/* rate-drop curve */
.uc-rate-viz{ margin:22px 0 4px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.uc-rate-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.uc-rate-head span{ font-size:13px; font-weight:600; color:var(--uc-sub); }
.uc-rate-head b{ font-size:23px; font-weight:800; color:var(--uc-accent2); letter-spacing:-.01em; }
.uc-rate-svg{ width:100%; height:auto; display:block; overflow:visible; }
.uc-rate-grid{ stroke:rgba(255,255,255,.09); stroke-width:1; }
.uc-rate-th{ stroke:rgba(255,255,255,.16); stroke-width:1; stroke-dasharray:2 3; }
.uc-rate-line{ fill:none; stroke:var(--uc-accent2); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.uc-rate-yl{ fill:var(--uc-faint); font-size:8px; font-weight:600; }
.uc-rate-xl{ fill:var(--uc-faint); font-size:8.5px; font-weight:600; }
.uc-rate-mark-l{ stroke:rgba(255,255,255,.38); stroke-width:1; }
.uc-rate-mark{ fill:var(--uc-accent2); stroke:#0c0a13; stroke-width:2; filter:drop-shadow(0 0 5px rgba(16,185,129,.85)); }
.uc-rate-cap{ font-size:12px; color:var(--uc-faint); line-height:1.5; margin:10px 0 0; }
/* ---- problem grid ---- */
.uc-problem-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:42px; }
.uc-pain-card{ background:var(--uc-card); border:1px solid var(--uc-border); border-radius:16px; padding:26px 22px; }
.uc-pain-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; font-weight:800;
color:var(--uc-accent2); background:rgba(16,185,129,.12); margin-bottom:16px; }
.uc-pain-card h4{ font-size:17px; color:var(--uc-ink); margin:0 0 8px; }
.uc-pain-card p{ font-size:14px; line-height:1.55; color:var(--uc-sub); margin:0; }
/* ---- solution cards ---- */
.uc-sol-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:42px; }
.uc-sol-card{ background:linear-gradient(180deg,var(--uc-card2),var(--uc-card)); border:1px solid var(--uc-border); border-radius:18px; padding:30px 28px; }
.uc-kicker{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--uc-accent2); background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.22); padding:5px 11px; border-radius:100px; margin-bottom:16px; }
.uc-sol-card h3{ font-size:20px; color:var(--uc-ink); margin:0 0 10px; letter-spacing:-.01em; }
.uc-sol-card p{ font-size:15px; line-height:1.6; color:var(--uc-sub); margin:0; }
/* ---- comparison table ---- */
.uc-compare{ margin-top:40px; border:1px solid var(--uc-border); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.018); }
.uc-cmp-head,.uc-cmp-row{ display:grid; grid-template-columns:1.1fr 1.35fr 1.35fr; }
.uc-cmp-head{ background:rgba(255,255,255,.05); }
.uc-cmp-head .uc-cmp-cell{ color:var(--uc-ink); font-weight:700; font-size:14.5px; padding:16px 20px; }
.uc-cmp-head .uc-cmp-us{ color:var(--uc-accent2); }
.uc-cmp-row{ border-top:1px solid rgba(255,255,255,.07); }
.uc-cmp-row:nth-child(even){ background:rgba(255,255,255,.022); }
.uc-cmp-cell{ padding:15px 20px; font-size:14px; line-height:1.5; }
.uc-cmp-crit{ font-weight:600; color:var(--uc-ink); }
.uc-cmp-them{ color:var(--uc-faint); }
.uc-cmp-us{ color:#8CE9C6; font-weight:600; }
.uc-cmp-us::before{ content:"✓ "; color:var(--uc-accent2); font-weight:800; }
/* ---- steps ---- */
.uc-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:42px; }
.uc-step{ position:relative; padding-top:6px; }
.uc-step-num{ font-size:28px; font-weight:800; color:var(--uc-accent2); letter-spacing:-.02em; }
.uc-step h4{ font-size:17px; color:var(--uc-ink); margin:12px 0 8px; }
.uc-step p{ font-size:14px; line-height:1.55; color:var(--uc-sub); margin:0; }
/* ---- FAQ: retint the reused .faq-item for our dark section ---- */
.uc-faq-sec .faq-item{ background:linear-gradient(180deg,var(--uc-card2),var(--uc-card)); border:1px solid var(--uc-border); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.uc-faq-sec .faq-q{ color:var(--uc-ink); }
.uc-faq-sec .faq-q .faq-plus{ color:var(--uc-accent2); }
.uc-faq-sec .faq-a p{ color:var(--uc-sub); }
/* ---- responsive ---- */
@media (max-width:900px){
.uc-hero{ padding:104px 0 64px; }
.uc-hero-grid{ grid-template-columns:1fr; gap:36px; }
.uc-hero-media{ order:-1; max-width:420px; }
.uc-calc{ grid-template-columns:1fr; }
.uc-calc-inputs{ border-right:none; border-bottom:1px solid rgba(255,255,255,.07); }
.uc-problem-grid{ grid-template-columns:repeat(2,1fr); }
.uc-sol-grid{ grid-template-columns:1fr; }
.uc-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.uc-problem-grid,.uc-steps{ grid-template-columns:1fr; }
.uc-cmp-head,.uc-cmp-row{ grid-template-columns:1fr 1fr; }
.uc-cmp-head .uc-cmp-crit,.uc-cmp-row .uc-cmp-crit{ grid-column:1 / -1; background:rgba(255,255,255,.04); font-size:12px;
text-transform:uppercase; letter-spacing:.04em; padding:8px 20px; }
}
/* payments contact CTA — shared closing band linking to /contact/payments */
.pay-contact-cta{ background:radial-gradient(120% 130% at 50% 0%,rgba(11,95,255,.13),transparent 60%),linear-gradient(180deg,#0d0b16,#0a0810); border-top:1px solid rgba(255,255,255,.06); padding:82px 0; }
.pcc-inner{ max-width:680px; margin:0 auto; text-align:center; }
.pcc-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9AA6FF; margin-bottom:16px; }
.pcc-h{ font-size:clamp(28px,4vw,40px); line-height:1.1; letter-spacing:-.02em; color:#fff; margin:0 0 16px; }
.pcc-p{ font-size:16px; line-height:1.65; color:rgba(244,241,250,.66); margin:0 auto 28px; max-width:600px; }
.pcc-btn{ display:inline-flex; align-items:center; gap:9px; background:linear-gradient(120deg,#F2554D,#0B5FFF); color:#fff; font-weight:700; font-size:15.5px; padding:15px 30px; border-radius:12px; text-decoration:none; box-shadow:0 18px 40px -16px rgba(11,95,255,.6); transition:transform .2s, box-shadow .2s; }
.pcc-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -16px rgba(11,95,255,.75); }
.pcc-disc{ font-size:12px; color:rgba(244,241,250,.4); line-height:1.5; margin:22px auto 0; max-width:560px; }
/* mobile sticky CTA — use-case lead-gen pages */
.uc-sticky{ display:none; }
@media (max-width:768px){
.uc-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(12,10,19,.92); backdrop-filter:blur(12px);
border-top:1px solid rgba(255,255,255,.1); }
.uc-sticky-txt{ font-size:13px; font-weight:600; color:rgba(244,241,250,.7); }
.uc-sticky-btn{ flex-shrink:0; background:linear-gradient(120deg,#10B981,#34D399); color:#04231A; font-weight:700; font-size:14px;
padding:11px 18px; border-radius:10px; text-decoration:none; }
}
/* use-case #2: choose-pos-system */
.uc-hero-pos::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(16,185,129,.13), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(52,211,153,.09), transparent 70%); pointer-events:none; }
.uc-match .uc-cmp-head,.uc-match .uc-cmp-row{ grid-template-columns:1fr 1.15fr 1.4fr; }
.uc-match{ background:rgba(255,255,255,.028); }
.uc-match .uc-cmp-head{ background:rgba(255,255,255,.08); }
.uc-match .uc-cmp-row:nth-child(even){ background:rgba(255,255,255,.045); }
.uc-match .uc-cmp-cell{ color:rgba(244,241,250,.88); font-size:14.5px; }
.uc-match .uc-cmp-cell.uc-cmp-crit{ color:#fff; }
.uc-match .uc-cmp-cell:nth-child(2){ color:#6EE7B7; font-weight:600; }
.uc-match .uc-cmp-head .uc-cmp-cell{ color:#fff!important; font-weight:700; }
.uc-match-foot{ text-align:center; font-size:14px; color:var(--uc-sub); margin:22px 0 0; }
.uc-match-foot a{ color:var(--uc-accent2); font-weight:600; }
/* use-case #3: automate-sales-follow-ups (in-house AI — violet accent, scoped) */
body:has(.uc-hero-asf) .uc-hero,
body:has(.uc-hero-asf) .uc-calc-sec,
body:has(.uc-hero-asf) .uc-problem-sec,
body:has(.uc-hero-asf) .uc-solution-sec,
body:has(.uc-hero-asf) .uc-steps-sec,
body:has(.uc-hero-asf) .uc-edge-sec,
body:has(.uc-hero-asf) .uc-faq-sec{ --uc-accent:#8B5CF6; --uc-accent2:#B57BFF; }
body:has(.uc-hero-asf) .uc-sticky-btn{ background:linear-gradient(120deg,#8B5CF6,#B866FF); color:#fff; }
body:has(.uc-hero-asf) .uc-calc-result-num{ background:linear-gradient(90deg,#B57BFF,#8B5CF6); -webkit-background-clip:text; background-clip:text; }
.uc-hero-asf::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(139,92,246,.16), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(184,102,255,.10), transparent 70%); pointer-events:none; }
.asf-funnel{ display:flex; align-items:stretch; gap:8px; margin:24px 0 4px; }
.asf-fstep{ flex:1; background:var(--uc-card); border:1px solid var(--uc-border); border-radius:12px; padding:14px 8px; text-align:center; }
.asf-fstep b{ display:block; font-size:26px; font-weight:800; color:var(--uc-ink); letter-spacing:-.01em; }
.asf-fstep span{ font-size:11.5px; color:var(--uc-sub); line-height:1.3; display:block; margin-top:3px; }
.asf-fstep-win{ background:linear-gradient(180deg,rgba(139,92,246,.20),rgba(139,92,246,.06)); border-color:rgba(139,92,246,.42); }
.asf-fstep-win b{ color:var(--uc-accent2); }
.asf-farrow{ align-self:center; color:var(--uc-faint); font-size:18px; }
/* contact CTA — violet variant */
.pcc-auto{ background:radial-gradient(120% 130% at 50% 0%,rgba(139,92,246,.15),transparent 60%),linear-gradient(180deg,#0d0b16,#0a0810); }
.pcc-btn-violet{ background:linear-gradient(120deg,#8B5CF6,#B866FF); box-shadow:0 18px 40px -16px rgba(139,92,246,.6); }
.pcc-btn-violet:hover{ box-shadow:0 22px 50px -16px rgba(139,92,246,.78); }
.pcc-auto .pcc-eyebrow{ color:#C4B5FD; }
@media (max-width:560px){ .asf-funnel{ gap:5px; } .asf-fstep{ padding:12px 4px; } .asf-fstep b{ font-size:21px; } .asf-fstep span{ font-size:10px; } .asf-farrow{ font-size:14px; } }
/* use-case #4: compare-business-internet (Rogers · blue accent, scoped) */
body:has(.uc-hero-cbi) .uc-hero,
body:has(.uc-hero-cbi) .uc-problem-sec,
body:has(.uc-hero-cbi) .uc-solution-sec,
body:has(.uc-hero-cbi) .uc-compare-sec,
body:has(.uc-hero-cbi) .uc-steps-sec,
body:has(.uc-hero-cbi) .uc-edge-sec,
body:has(.uc-hero-cbi) .uc-faq-sec{ --uc-accent:#3B82F6; --uc-accent2:#6BA6FF; }
body:has(.uc-hero-cbi) .uc-sticky-btn{ background:linear-gradient(120deg,#2F6BFF,#6BA6FF); color:#fff; }
.uc-hero-cbi::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(59,130,246,.15), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(107,166,255,.10), transparent 70%); pointer-events:none; }
/* 4-column comparison table (connection types) */
.uc-cmp4-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:40px; }
.uc-cmp4{ min-width:640px; }
.uc-cmp4 .uc-cmp-head, .uc-cmp4 .uc-cmp-row{ grid-template-columns:1.25fr 1fr 1fr 1fr; }
.uc-cmp4 .uc-cmp-cell{ color:rgba(244,241,250,.88); font-size:13.5px; padding:14px 16px; }
.uc-cmp4 .uc-cmp-cell:first-child{ color:#fff; font-weight:600; }
.uc-cmp4 .uc-cmp-head .uc-cmp-cell{ color:#fff!important; font-weight:700; font-size:14px; }
.uc-cmp4 .uc-cmp-head .uc-cmp-cell:nth-child(2){ color:var(--uc-accent2)!important; }
@media (max-width:560px){ .uc-cmp4 .uc-cmp-head, .uc-cmp4 .uc-cmp-row{ grid-template-columns:1.25fr 1fr 1fr 1fr; } }
/* contact CTA — blue variant */
.pcc-net{ background:radial-gradient(120% 130% at 50% 0%,rgba(59,130,246,.15),transparent 60%),linear-gradient(180deg,#0d0b16,#0a0810); }
.pcc-btn-blue{ background:linear-gradient(120deg,#2F6BFF,#6BA6FF); color:#fff; box-shadow:0 18px 40px -16px rgba(47,107,255,.6); }
.pcc-btn-blue:hover{ box-shadow:0 22px 50px -16px rgba(47,107,255,.78); }
.pcc-net .pcc-eyebrow{ color:#93C5FD; }
/* Rogers logo (red wordmark on white) uses the default white .uc-partner-chip */
/* competitive-edge section (compare-business-internet) */
.uc-edge-sec{ --edge-bg:none; background:linear-gradient(180deg,rgba(11,9,19,.86) 0%,rgba(11,9,19,.56) 34%,rgba(11,9,19,.70) 100%),radial-gradient(120% 80% at 50% -5%,color-mix(in srgb,var(--uc-accent) 10%,transparent),transparent 55%),var(--edge-bg) center/cover no-repeat,#0b0913; }
.uc-edge-sec{ position:relative; }
.uc-edge-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; margin-top:44px; }
.uc-edge-col{ background:var(--uc-card); border:1px solid var(--uc-border); border-radius:20px; padding:32px 30px; }
.uc-edge-col-us{ background:linear-gradient(180deg,color-mix(in srgb,var(--uc-accent) 15%,transparent),color-mix(in srgb,var(--uc-accent) 4%,transparent)); border-color:color-mix(in srgb,var(--uc-accent) 36%,transparent); box-shadow:0 24px 60px -30px color-mix(in srgb,var(--uc-accent) 52%,transparent); }
.uc-edge-brand{ display:flex; align-items:center; gap:13px; margin-bottom:18px; min-height:34px; }
.uc-edge-chip{ display:inline-flex; align-items:center; background:#fff; border-radius:9px; padding:7px 12px; box-shadow:0 6px 18px -10px rgba(0,0,0,.5); }
.uc-edge-chip img{ height:17px; width:auto; display:block; }
.uc-edge-tblogo{ height:22px; width:auto; display:block; }
.uc-edge-tag{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--uc-faint); }
.uc-edge-tag-us{ color:var(--uc-accent2); }
.uc-edge-h3{ font-size:21px; color:var(--uc-ink); margin:0 0 18px; letter-spacing:-.01em; font-weight:700; }
.uc-edge-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.uc-edge-list li{ position:relative; padding-left:30px; font-size:14.5px; line-height:1.5; color:var(--uc-sub); }
.uc-edge-list li::before{ content:"\2713"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--uc-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1; color:var(--uc-faint); }
.uc-edge-list-us li{ color:rgba(244,241,250,.92); }
.uc-edge-list-us li::before{ background:color-mix(in srgb,var(--uc-accent) 18%,transparent); border-color:color-mix(in srgb,var(--uc-accent) 46%,transparent); color:var(--uc-accent2); }
.uc-edge-plus{ align-self:center; font-size:26px; font-weight:300; color:var(--uc-faint); padding:0 2px; }
.uc-edge-payoff{ margin-top:26px; background:linear-gradient(100deg,color-mix(in srgb,var(--uc-accent) 16%,transparent),color-mix(in srgb,var(--uc-accent) 5%,transparent)); border:1px solid color-mix(in srgb,var(--uc-accent) 32%,transparent); border-radius:18px; padding:28px 34px; text-align:center; }
.uc-edge-result{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--uc-accent2); margin-bottom:12px; }
.uc-edge-payoff p{ margin:0; font-size:17px; line-height:1.6; color:var(--uc-ink); font-weight:500; max-width:760px; margin-inline:auto; }
.uc-edge-payoff p b{ color:#fff; font-weight:700; }
@media (max-width:820px){ .uc-edge-grid{ grid-template-columns:1fr; } .uc-edge-plus{ padding:2px 0; } }
/* per-page edge-section background slots */
body:has(.uc-hero-cbi) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-cbi-edge-bg.jpg'); }
body:has(.uc-hero-pf) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-pf-edge-bg.jpg'); }
body:has(.uc-hero-pos) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-pos-edge-bg.jpg'); }
body:has(.uc-hero-asf) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-asf-edge-bg.jpg'); }
body:has(.uc-hero-gcl) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-gcl-edge-bg.jpg'); }
/* client proof band (payments) — premium product showcase */
.uc-proof-sec{ background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--uc-accent) 9%,transparent),transparent 55%),#0a0812; }
.uc-proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.uc-proof-card{ position:relative; display:flex; flex-direction:column; overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
border:1px solid var(--uc-border); border-radius:22px; padding:18px 18px 26px;
transition:transform .38s cubic-bezier(.2,.7,.2,1), border-color .38s, box-shadow .38s; }
.uc-proof-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--uc-accent) 46%,transparent); box-shadow:0 32px 74px -34px color-mix(in srgb,var(--uc-accent) 62%,transparent); }
.uc-proof-media{ position:relative; border-radius:16px; overflow:hidden; min-height:174px; display:flex; align-items:center; justify-content:center; padding:22px;
background:radial-gradient(circle at 60% 42%, color-mix(in srgb,var(--uc-accent) 26%,transparent), transparent 66%), linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)); border:1px solid var(--uc-border); }
.uc-proof-device{ max-height:150px; max-width:80%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 20px 34px rgba(0,0,0,.55)); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.uc-proof-card:hover .uc-proof-device{ transform:scale(1.07) translateY(-4px); }
.uc-proof-logo{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; background:#fff; border-radius:10px; padding:7px 12px; box-shadow:0 8px 20px -10px rgba(0,0,0,.6); }
.uc-proof-logo img{ max-height:22px; max-width:132px; width:auto; height:auto; object-fit:contain; display:block; }
.uc-proof-device-tag{ position:absolute; bottom:12px; right:14px; z-index:2; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--uc-ink); background:rgba(10,8,18,.62); backdrop-filter:blur(6px); border:1px solid var(--uc-border); padding:5px 10px; border-radius:100px; }
.uc-proof-body{ display:flex; flex-direction:column; flex:1; padding:22px 12px 0; }
.uc-proof-name{ font-size:20px; font-weight:800; color:#fff; letter-spacing:-.015em; }
.uc-proof-meta{ font-size:12.5px; color:var(--uc-accent2); font-weight:600; margin-top:6px; }
.uc-proof-arch{ margin-top:20px; padding-top:20px; border-top:1px solid var(--uc-border); }
.uc-proof-arch-lbl{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--uc-faint); margin-bottom:14px; }
.uc-proof-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.uc-proof-list li{ position:relative; padding-left:27px; font-size:13.5px; line-height:1.45; color:rgba(244,241,250,.9); }
.uc-proof-list li::before{ content:"\2713"; position:absolute; left:0; top:0; width:17px; height:17px; border-radius:6px; background:color-mix(in srgb,var(--uc-accent) 22%,transparent); border:1px solid color-mix(in srgb,var(--uc-accent) 50%,transparent); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; line-height:1; color:var(--uc-accent2); }
.uc-proof-grid.active .uc-proof-list li{ animation:ucProofIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ucProofIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
.uc-proof-grid.active .uc-proof-card:nth-child(1) .uc-proof-list li:nth-child(1){ animation-delay:.10s; }
.uc-proof-grid.active .uc-proof-card:nth-child(1) .uc-proof-list li:nth-child(2){ animation-delay:.18s; }
.uc-proof-grid.active .uc-proof-card:nth-child(1) .uc-proof-list li:nth-child(3){ animation-delay:.26s; }
.uc-proof-grid.active .uc-proof-card:nth-child(1) .uc-proof-list li:nth-child(4){ animation-delay:.34s; }
.uc-proof-grid.active .uc-proof-card:nth-child(2) .uc-proof-list li:nth-child(1){ animation-delay:.16s; }
.uc-proof-grid.active .uc-proof-card:nth-child(2) .uc-proof-list li:nth-child(2){ animation-delay:.24s; }
.uc-proof-grid.active .uc-proof-card:nth-child(2) .uc-proof-list li:nth-child(3){ animation-delay:.32s; }
.uc-proof-grid.active .uc-proof-card:nth-child(2) .uc-proof-list li:nth-child(4){ animation-delay:.40s; }
.uc-proof-by{ display:flex; align-items:center; gap:18px; margin-top:auto; padding-top:22px; }
.uc-proof-by-item{ display:inline-flex; align-items:center; gap:9px; }
.uc-proof-by-lbl{ font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--uc-faint); white-space:nowrap; }
.uc-proof-by-logo{ max-height:15px; max-width:112px; width:auto; height:auto; object-fit:contain; display:block; }
.uc-proof-by-ps{ display:inline-flex; align-items:center; background:#fff; border-radius:6px; padding:5px 9px; }
.uc-proof-by-ps img{ max-height:13px; max-width:80px; width:auto; height:auto; object-fit:contain; display:block; }
.uc-proof-foot{ text-align:center; font-size:13px; color:var(--uc-faint); margin-top:30px; }
@media (prefers-reduced-motion: reduce){ .uc-proof-grid.active .uc-proof-list li{ animation:none; } }
@media (max-width:720px){ .uc-proof-grid{ grid-template-columns:1fr; } }
/* use-case #5: gift-card-loyalty (Paystone · green — base accent) */
.uc-hero-gcl::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(16,185,129,.14), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(52,211,153,.09), transparent 70%); pointer-events:none; }
/* rich calculator inputs column (payment-fees) */
.uc-calc-inputs-rich{ justify-content:space-between; gap:26px; position:relative; overflow:hidden;
background:radial-gradient(80% 55% at 12% 6%, color-mix(in srgb,var(--uc-accent) 12%,transparent), transparent 62%); }
.uc-calc-inputs-rich::before{ content:""; position:absolute; width:260px; height:260px; right:-90px; bottom:-90px;
background:radial-gradient(circle, color-mix(in srgb,var(--uc-accent) 15%,transparent), transparent 70%);
border-radius:50%; pointer-events:none; animation:ucCalcGlow 9s ease-in-out infinite alternate; }
@keyframes ucCalcGlow{ from{ transform:translate(0,0) scale(1); opacity:.65; } to{ transform:translate(-30px,-24px) scale(1.18); opacity:1; } }
.uc-calc-inputs-rich > *{ position:relative; z-index:1; }
.uc-calc-eyebrow{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--uc-accent2); margin-bottom:12px; }
.uc-calc-h3{ font-size:clamp(21px,2.4vw,26px); line-height:1.12; color:#fff; letter-spacing:-.02em; margin:0 0 12px; font-weight:800; }
.uc-calc-lead{ font-size:14.5px; line-height:1.6; color:var(--uc-sub); margin:0; max-width:340px; }
.uc-calc-fields{ display:flex; flex-direction:column; gap:30px; }
.uc-calc-trust{ display:flex; flex-direction:column; gap:11px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.uc-calc-trust-item{ position:relative; padding-left:26px; font-size:13px; font-weight:600; color:rgba(244,241,250,.82); }
.uc-calc-trust-item::before{ content:"\2713"; position:absolute; left:0; top:-1px; width:18px; height:18px; border-radius:50%;
background:color-mix(in srgb,var(--uc-accent) 22%,transparent); color:var(--uc-accent2);
display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; line-height:1; }
.uc-calc.active .uc-calc-trust-item{ animation:ucTrustIn .5s ease both; }
@keyframes ucTrustIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
.uc-calc.active .uc-calc-trust-item:nth-child(1){ animation-delay:.20s; }
.uc-calc.active .uc-calc-trust-item:nth-child(2){ animation-delay:.34s; }
.uc-calc.active .uc-calc-trust-item:nth-child(3){ animation-delay:.48s; }
@media (max-width:820px){ .uc-calc-inputs-rich{ justify-content:flex-start; } .uc-calc-inputs-rich::before{ display:none; } }
@media (prefers-reduced-motion: reduce){ .uc-calc-inputs-rich::before{ animation:none; } .uc-calc.active .uc-calc-trust-item{ animation:none; } }
/* use-case #6: cloud-phone-system (Rogers · blue, scoped) */
body:has(.uc-hero-cps) .uc-hero,
body:has(.uc-hero-cps) .uc-problem-sec,
body:has(.uc-hero-cps) .uc-solution-sec,
body:has(.uc-hero-cps) .uc-compare-sec,
body:has(.uc-hero-cps) .uc-steps-sec,
body:has(.uc-hero-cps) .uc-edge-sec,
body:has(.uc-hero-cps) .uc-faq-sec{ --uc-accent:#3B82F6; --uc-accent2:#6BA6FF; }
body:has(.uc-hero-cps) .uc-cmp-us{ color:#6BA6FF; }
body:has(.uc-hero-cps) .uc-sticky-btn{ background:linear-gradient(120deg,#2F6BFF,#6BA6FF); color:#fff; }
body:has(.uc-hero-cps) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-cps-edge-bg.jpg'); }
.uc-hero-cps::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(59,130,246,.15), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(107,166,255,.10), transparent 70%); pointer-events:none; }
/* use-case #7: internet-backup (Rogers · blue, scoped) */
body:has(.uc-hero-ibk) .uc-hero,
body:has(.uc-hero-ibk) .uc-problem-sec,
body:has(.uc-hero-ibk) .uc-calc-sec,
body:has(.uc-hero-ibk) .uc-solution-sec,
body:has(.uc-hero-ibk) .uc-steps-sec,
body:has(.uc-hero-ibk) .uc-edge-sec,
body:has(.uc-hero-ibk) .uc-faq-sec{ --uc-accent:#3B82F6; --uc-accent2:#6BA6FF; }
body:has(.uc-hero-ibk) .uc-sticky-btn{ background:linear-gradient(120deg,#2F6BFF,#6BA6FF); color:#fff; }
body:has(.uc-hero-ibk) .uc-calc-result-num{ background:linear-gradient(90deg,#6BA6FF,#3B82F6); -webkit-background-clip:text; background-clip:text; }
body:has(.uc-hero-ibk) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-ibk-edge-bg.jpg'); }
.uc-hero-ibk::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(59,130,246,.15), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(107,166,255,.10), transparent 70%); pointer-events:none; }
/* use-case #8: sd-wan-multi-location (Rogers · blue, scoped) */
body:has(.uc-hero-sdw) .uc-hero,
body:has(.uc-hero-sdw) .uc-problem-sec,
body:has(.uc-hero-sdw) .uc-solution-sec,
body:has(.uc-hero-sdw) .uc-compare-sec,
body:has(.uc-hero-sdw) .uc-steps-sec,
body:has(.uc-hero-sdw) .uc-edge-sec,
body:has(.uc-hero-sdw) .uc-faq-sec{ --uc-accent:#3B82F6; --uc-accent2:#6BA6FF; }
body:has(.uc-hero-sdw) .uc-cmp-us{ color:#6BA6FF; }
body:has(.uc-hero-sdw) .uc-sticky-btn{ background:linear-gradient(120deg,#2F6BFF,#6BA6FF); color:#fff; }
body:has(.uc-hero-sdw) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-sdw-edge-bg.jpg'); }
.uc-hero-sdw::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(59,130,246,.15), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(107,166,255,.10), transparent 70%); pointer-events:none; }
/* use-case #9: fleet-tracking (Rogers IoT · cyan, scoped) */
body:has(.uc-hero-flt) .uc-hero,
body:has(.uc-hero-flt) .uc-problem-sec,
body:has(.uc-hero-flt) .uc-calc-sec,
body:has(.uc-hero-flt) .uc-solution-sec,
body:has(.uc-hero-flt) .uc-steps-sec,
body:has(.uc-hero-flt) .uc-edge-sec,
body:has(.uc-hero-flt) .uc-faq-sec{ --uc-accent:#06B6D4; --uc-accent2:#22D3EE; }
body:has(.uc-hero-flt) .uc-sticky-btn{ background:linear-gradient(120deg,#0891B2,#22D3EE); color:#fff; }
body:has(.uc-hero-flt) .uc-calc-result-num{ background:linear-gradient(90deg,#22D3EE,#06B6D4); -webkit-background-clip:text; background-clip:text; }
body:has(.uc-hero-flt) .pcc-btn-blue{ background:linear-gradient(120deg,#0891B2,#22D3EE); }
body:has(.uc-hero-flt) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-flt-edge-bg.jpg'); }
.uc-hero-flt::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(6,182,212,.15), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(34,211,238,.10), transparent 70%); pointer-events:none; }
/* fix: speedometer needle (Compare business internet menu icon) pivots at its hub
(12,17) so the fixed end stays pinned and only the tip sweeps the arc — instead
of the transform-origin resolving against the needle's bbox and popping out. */
.uc-cnet .nd{ transform-box:view-box; transform-origin:12px 17px; }
/* use-case #10: custom-crm (in-house · violet, scoped) */
body:has(.uc-hero-crm) .uc-hero,
body:has(.uc-hero-crm) .uc-problem-sec,
body:has(.uc-hero-crm) .uc-solution-sec,
body:has(.uc-hero-crm) .uc-compare-sec,
body:has(.uc-hero-crm) .uc-steps-sec,
body:has(.uc-hero-crm) .uc-edge-sec,
body:has(.uc-hero-crm) .uc-faq-sec{ --uc-accent:#8B5CF6; --uc-accent2:#B57BFF; }
body:has(.uc-hero-crm) .uc-cmp-us{ color:#B57BFF; }
body:has(.uc-hero-crm) .uc-sticky-btn{ background:linear-gradient(120deg,#7C3AED,#B57BFF); color:#fff; }
body:has(.uc-hero-crm) .uc-edge-sec{ --edge-bg:url('/assets/media/library/uc-crm-edge-bg.jpg'); }
.uc-hero-crm::before{ content:""; position:absolute; inset:0; background:
radial-gradient(58% 55% at 88% 10%, rgba(139,92,246,.16), transparent 68%),
radial-gradient(52% 55% at 4% 92%, rgba(181,123,255,.10), transparent 70%); pointer-events:none; }
/* related use-cases cluster (all use-case pages) — neutral, page-agnostic */
.uc-rel-sec{ background:#0a0812; }
.uc-rel-sec .sec-head h2{ color:#fff; }
.uc-rel-sec .uc-eyebrow{ color:rgba(244,241,250,.5); }
.uc-rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.uc-rel-card{ display:flex; flex-direction:column; gap:7px; padding:24px 22px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); text-decoration:none; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s, background .3s; }
.uc-rel-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.055); box-shadow:0 24px 54px -32px rgba(0,0,0,.7); }
.uc-rel-t{ font-size:16px; font-weight:700; color:#F4F1FA; letter-spacing:-.01em; }
.uc-rel-d{ font-size:13px; line-height:1.45; color:rgba(244,241,250,.62); }
.uc-rel-go{ display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:12.5px; font-weight:700; color:rgba(244,241,250,.85); transition:gap .3s; }
.uc-rel-card:hover .uc-rel-go{ gap:9px; }
@media (max-width:820px){ .uc-rel-grid{ grid-template-columns:1fr; } }
/* ===== /industries HUB (light theme — matches home/residential) ===== */
.ih-hero{ background:radial-gradient(ellipse 90% 70% at 50% 0%,#2b1257 0%,#170a37 42%,#0a0520 78%,#07031a 100%); }
.ih-hero .sp-inner{ max-width:900px; }
.ih-stats{ grid-template-columns:repeat(3,1fr); max-width:760px; }
/* trust strip */
.ih-trust{ background:#FAF8FF; border-top:1px solid rgba(28,10,74,.07); border-bottom:1px solid rgba(28,10,74,.07); padding:20px 0; }
.ih-trust-inner{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.ih-trust-lead{ font-size:13px; font-weight:600; color:rgba(28,10,74,.55); }
.ih-trust-logos{ display:inline-flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center; }
.ih-trust-logo{ max-height:24px; width:auto; opacity:.92; }
.ih-trust-txt{ font-size:12.5px; font-weight:700; color:rgba(28,10,74,.5); }
/* industries grid */
.ih-grid-sec{ background:#fff; }
.ih-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:6px; }
.ih-card{ display:flex; flex-direction:column; padding:26px 24px 22px; border-radius:20px; background:#fff; border:1px solid rgba(28,10,74,.10); text-decoration:none; position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.22,.7,.2,1), border-color .35s, box-shadow .35s; }
.ih-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac); opacity:0; transition:opacity .35s; }
.ih-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--ac) 42%,transparent); box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ac) 55%,transparent); }
.ih-card:hover::before{ opacity:1; }
.ih-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ih-ico{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; color:var(--ac); background:color-mix(in srgb,var(--ac) 12%,transparent); transition:transform .35s; }
.ih-card:hover .ih-ico{ transform:scale(1.06) rotate(-3deg); }
.ih-ico svg{ width:24px; height:24px; }
.ih-arrow{ color:rgba(28,10,74,.26); transition:transform .35s, color .35s; }
.ih-card:hover .ih-arrow{ color:var(--ac); transform:translateX(3px); }
.ih-card-t{ font-family:'Space Grotesk',sans-serif; font-size:16.5px; font-weight:600; color:#1C0A4A; letter-spacing:-.02em; margin:0 0 7px; line-height:1.2; }
.ih-card-d{ font-size:13.5px; line-height:1.5; color:rgba(28,10,74,.62); margin:0 0 16px; flex:1; }
.ih-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ih-tag{ font-size:10.5px; font-weight:600; letter-spacing:.02em; color:rgba(28,10,74,.6); background:rgba(28,10,74,.05); border-radius:100px; padding:4px 9px; }
/* image feature bands */
.ih-band{ background:#fff; }
.ih-band-alt{ background:#FAF8FF; }
.ih-pts{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px; }
.ih-pts li{ position:relative; padding-left:30px; font-size:14.5px; line-height:1.5; color:rgba(28,10,74,.78); font-weight:500; }
.ih-pts li::before{ content:"\2713"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:6px; background:rgba(184,102,255,.13); color:#8B5CF6; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1; }
/* final CTA */
.ih-cta-sec{ background:#fff; }
.ih-cta{ position:relative; overflow:hidden; text-align:center; border-radius:28px; padding:64px 40px; background:linear-gradient(135deg,#1C0A4A 0%,#3B1D7A 52%,#0891B2 125%); }
.ih-cta::before{ content:""; position:absolute; width:420px; height:420px; top:-160px; right:-120px; background:radial-gradient(circle,rgba(184,102,255,.4),transparent 68%); pointer-events:none; }
.ih-cta > *{ position:relative; z-index:1; }
.ih-cta-h2{ font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:600; color:#fff; letter-spacing:-.028em; line-height:1.12; margin:0 0 12px; }
.ih-cta-sub{ font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.82); max-width:560px; margin:0 auto 28px; }
/* light-theme FAQ */
.ih-faq-sec{ background:#FAF8FF; }
.ih-faq .faq-item{ border-color:rgba(28,10,74,.1); }
.ih-faq .faq-q{ color:#1C0A4A; }
.ih-faq .faq-plus{ color:#8B5CF6; }
.ih-faq .faq-a p{ color:rgba(28,10,74,.66); }
@media (max-width:980px){ .ih-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ih-grid{ grid-template-columns:1fr; } }