/* ==========================================================================
IntelliGents Ops — light variant.
Manrope typography, brand-blue primary accent (#2D7BC9), deeper blue
(#1E5A99) for links and CTAs to maintain AA contrast on white. Solid
pill-shaped buttons, clean cards on white, numbered-step pattern
inspired by the Tanz Tech layout. Frames the homepage around the
four-pillar agency-umbrella positioning (AI Reception + Process
Automation + Ops Consulting + Custom Software).
========================================================================== */
/* ---------- Design tokens ---------- */
:root {
/* Backgrounds */
--ig-bg: #ffffff; /* page background */
--ig-bg-elevated: #f8fafc; /* slate-50; subtle card lift */
--ig-bg-elevated-hover: #f1f5f9; /* slate-100 */
--ig-bg-card: #ffffff; /* white cards, defined by border */
--ig-bg-dropdown: rgba(255, 255, 255, 0.97);
/* Borders */
--ig-border: rgba(15, 23, 42, 0.08);
--ig-border-strong: rgba(45, 123, 201, 0.30);
--ig-border-soft: rgba(15, 23, 42, 0.04);
/* Text */
--ig-text: #0f172a; /* slate-900, primary */
--ig-text-secondary: #334155; /* slate-700, body copy */
--ig-text-muted: #64748b; /* slate-500, secondary */
--ig-text-dim: #94a3b8; /* slate-400, fine print */
--ig-text-faint: #cbd5e1; /* slate-300 */
/* Brand — blue */
--ig-blue: #2d7bc9; /* primary brand (accents/borders/badges) */
--ig-blue-deep: #1e5a99; /* links + CTAs (AA on white) */
--ig-blue-light: #5aa0e0;
--ig-blue-soft: rgba(45, 123, 201, 0.08);
--ig-blue-border: rgba(45, 123, 201, 0.30);
--ig-blue-glow: rgba(45, 123, 201, 0.18);
/* Legacy aliases so existing partial markup keeps working — everything
that used to point at indigo/purple now resolves to brand blue.
Links/CTAs route to --ig-blue-deep for contrast on white. */
--ig-indigo: var(--ig-blue);
--ig-indigo-soft: var(--ig-blue-soft);
--ig-indigo-border: var(--ig-blue-border);
--ig-purple: var(--ig-blue-deep);
--ig-purple-deep: var(--ig-blue-deep);
--ig-gradient: var(--ig-blue); /* solid, used for buttons/badges */
/* --ig-gradient-accent is the animated multi-hue gradient used on hero
headline accent spans. 4 stops loop with a 300% background-size +
gradient-shift keyframe to give a slow color flow on white. All stops
pass AA contrast on white. */
--ig-gradient-accent: linear-gradient(135deg, #1e5a99, #7c3aed, #2d7bc9, #1e5a99);
/* Semantic — deepened for white-bg contrast */
--ig-green: #059669; /* emerald-600 */
--ig-green-light: #10b981; /* emerald-500 */
--ig-pink: #db2777; /* pink-600 */
--ig-amber: #d97706; /* amber-600 */
--ig-red: #dc2626; /* red-600 */
--ig-red-light: #ef4444; /* red-500 */
/* Radii — slightly softer to match Tanz Tech look */
--ig-r-sm: 10px;
--ig-r-md: 14px;
--ig-r-lg: 18px;
--ig-r-xl: 20px;
--ig-r-2xl: 24px;
--ig-r-pill: 999px;
/* Shadows — neutral lifts on white (no glow effects, those vanish on light) */
--ig-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06);
--ig-shadow-glow: 0 8px 24px rgba(45, 123, 201, 0.18);
--ig-shadow-deep: 0 12px 40px rgba(15, 23, 42, 0.10);
--ig-shadow-dropdown: 0 12px 32px rgba(15, 23, 42, 0.12);
/* Layout — roomier */
--ig-max-w: 1200px;
--ig-max-w-narrow: 920px;
/* Typography — Manrope */
--ig-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
padding: 0;
font-family: var(--ig-font);
font-size: 16px;
line-height: 1.6;
background: var(--ig-bg);
color: var(--ig-text-secondary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ig-purple); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ig-blue); }
h1, h2, h3, h4, h5, h6 { color: var(--ig-text); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
/* Skip link for a11y */
.skip-link {
position: absolute; top: -1000px; left: 8px;
background: var(--ig-indigo); color: #fff; padding: 8px 14px;
border-radius: 8px; z-index: 10000;
}
.skip-link:focus { top: 8px; }
/* ---------- Header / Nav ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--ig-border);
}
.site-header-inner {
max-width: var(--ig-max-w);
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-brand {
font-size: 1.05rem;
font-weight: 800;
color: var(--ig-text);
letter-spacing: -0.01em;
}
.site-brand .brand-accent {
background: var(--ig-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.primary-nav ul {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 22px; align-items: center;
}
.primary-nav a {
color: var(--ig-text-secondary);
font-size: .92rem;
font-weight: 600;
padding: 6px 0;
}
.primary-nav a:hover { color: var(--ig-text); }
.nav-cta {
padding: 10px 18px !important;
background: var(--ig-gradient);
color: #fff !important;
border-radius: var(--ig-r-md);
}
.nav-cta:hover { opacity: .9; box-shadow: var(--ig-shadow-glow); color: #fff !important; }
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--ig-border-strong);
color: var(--ig-text-secondary);
border-radius: 10px;
padding: 8px 12px;
font-size: .9rem;
}
/* ---------- Buttons ---------- */
.btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 32px;
background: var(--ig-gradient);
color: #fff;
font-size: .95rem; font-weight: 600;
border: none; border-radius: var(--ig-r-md);
text-decoration: none; cursor: pointer;
transition: all .2s ease;
}
.btn-primary:hover { opacity: .9; transform: translateY(-2px); box-shadow: var(--ig-shadow-glow); color: #fff; }
.btn-secondary {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 32px;
background: var(--ig-bg-card);
color: var(--ig-text-secondary);
font-size: .95rem; font-weight: 600;
border: 1px solid var(--ig-border-strong);
border-radius: var(--ig-r-md);
text-decoration: none; cursor: pointer;
transition: all .2s ease;
}
.btn-secondary:hover { background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.2); transform: translateY(-2px); color: var(--ig-text); }
/* ---------- Badges / pills ---------- */
.pill-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--ig-indigo-soft);
border: 1px solid var(--ig-indigo-border);
border-radius: var(--ig-r-pill);
padding: 8px 20px;
font-size: .8rem; font-weight: 600;
color: var(--ig-purple);
text-transform: uppercase;
letter-spacing: .08em;
}
.pill-badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ig-indigo);
animation: pulse 2s ease-in-out infinite;
}
.label-pill {
display: inline-block;
font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--ig-text-dim);
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
padding: 8px 20px;
border-radius: var(--ig-r-pill);
}
/* ---------- Animations ---------- */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes ring {
0%,80%,100% { transform: rotate(0); }
5% { transform: rotate(15deg); }
10% { transform: rotate(-15deg); }
15% { transform: rotate(12deg); }
20% { transform: rotate(-10deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(0); }
}
@keyframes dropIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
Section: Hero (homepage + niche)
========================================================================== */
.hero-section {
display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
padding: 80px 24px;
max-width: var(--ig-max-w-narrow);
margin: 0 auto;
}
.hero-section .hero-badge { margin-bottom: 32px; }
.hero-section h1 {
font-size: 3.2rem; font-weight: 800; color: var(--ig-text);
line-height: 1.15; letter-spacing: -.03em; margin-bottom: 24px;
}
.hero-section h1 .accent {
background: var(--ig-gradient-accent);
background-size: 300% 300%;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 6s ease-in-out infinite;
}
.hero-section p {
font-size: 1.15rem; color: var(--ig-text-muted);
line-height: 1.7; max-width: 680px; margin-bottom: 16px;
}
.hero-section p:last-of-type { margin-bottom: 40px; }
.hero-highlights {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px 24px; margin-bottom: 40px; max-width: 700px;
}
.hero-highlights .highlight {
display: inline-flex; align-items: center; gap: 8px;
font-size: .95rem; color: var(--ig-text-secondary); font-weight: 500;
}
.hero-highlights .highlight .icon { font-size: 1.1rem; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* Demo dropdown (used in hero + demo CTA) */
.demo-wrapper { position: relative; display: inline-flex; }
.demo-dropdown {
display: none; position: absolute;
bottom: calc(100% + 8px); left: 0;
background: var(--ig-bg-dropdown);
border: 1px solid var(--ig-border-strong);
border-radius: var(--ig-r-lg);
padding: 8px; min-width: 260px;
backdrop-filter: blur(20px);
box-shadow: var(--ig-shadow-dropdown);
z-index: 100;
}
.demo-wrapper.open .demo-dropdown { display: block; animation: dropIn .2s ease; }
.demo-dropdown a {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
color: var(--ig-text-secondary);
text-decoration: none;
font-size: .88rem; font-weight: 600;
border-radius: var(--ig-r-sm);
transition: background .15s ease;
}
.demo-dropdown a:hover { background: rgba(15,23,42,.06); color: var(--ig-text); }
.demo-dropdown a .niche-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.demo-dropdown .dropdown-label {
display: block;
padding: 8px 16px 6px;
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--ig-text-dim);
}
/* ==========================================================================
Section: Problem (homepage)
========================================================================== */
.problem-section { padding: 80px 24px; max-width: var(--ig-max-w); margin: 0 auto; }
.problem-header { text-align: center; margin-bottom: 48px; }
.problem-header h2 { font-size: 2.4rem; font-weight: 800; color: var(--ig-text); letter-spacing: -.02em; margin-bottom: 20px; }
.problem-header p { font-size: 1.1rem; color: var(--ig-text-muted); line-height: 1.7; max-width: 640px; margin: 0 auto; }
.cost-breakdown { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 56px; }
.cost-card {
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.15);
border-radius: var(--ig-r-xl);
padding: 24px 28px;
text-align: center;
min-width: 160px; flex: 1; max-width: 220px;
}
.cost-card .cost-amount { font-size: 2rem; font-weight: 800; color: var(--ig-red); letter-spacing: -.02em; margin-bottom: 4px; }
.cost-card .cost-label { font-size: .8rem; font-weight: 600; color: var(--ig-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.stats-label { text-align: center; margin-bottom: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }
.stats-column-label {
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
padding: 10px 0 6px; text-align: center;
}
.stats-column-label.positive { color: var(--ig-indigo); }
.stats-column-label.negative { color: var(--ig-red); }
.stat-item {
display: flex; align-items: flex-start; gap: 16px;
background: var(--ig-bg-elevated);
border: 1px solid rgba(15,23,42,.06);
border-radius: var(--ig-r-lg);
padding: 20px 22px;
transition: transform .2s ease, background .2s ease;
}
.stat-item:hover { transform: translateY(-2px); background: var(--ig-bg-elevated-hover); }
.stat-number { font-size: 1.6rem; font-weight: 800; flex-shrink: 0; min-width: 58px; letter-spacing: -.02em; }
.stat-item.positive .stat-number { color: var(--ig-purple); }
.stat-item.negative .stat-number { color: var(--ig-red); }
.stat-item.negative { border-color: rgba(220, 38, 38, 0.1); }
.stat-text { font-size: .9rem; color: var(--ig-text-secondary); line-height: 1.5; padding-top: 4px; }
/* ==========================================================================
Section: Solution / industries / why-us / comparison share a base
========================================================================== */
.section-base { padding: 80px 24px; max-width: var(--ig-max-w); margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 { font-size: 2.4rem; font-weight: 800; color: var(--ig-text); letter-spacing: -.02em; margin-bottom: 14px; }
.section-header p { font-size: 1.1rem; color: var(--ig-text-muted); line-height: 1.7; max-width: 640px; margin: 0 auto; }
/* Solution grid (4 cards) */
.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.solution-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 36px 32px;
transition: transform .3s ease, box-shadow .3s ease;
display: flex; flex-direction: column;
}
.solution-card:hover { transform: translateY(-4px); box-shadow: var(--ig-shadow-card); }
.card-icon {
width: 52px; height: 52px;
border-radius: var(--ig-r-lg);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; margin-bottom: 20px;
}
.card-voice .card-icon { background: rgba(2,132,199,.12); border: 1px solid rgba(2,132,199,.2); }
.card-crm .card-icon { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.2); }
.card-scheduling .card-icon { background: rgba(5,150,105,.12); border: 1px solid rgba(5,150,105,.2); }
.card-analytics .card-icon { background: rgba(219,39,119,.12); border: 1px solid rgba(219,39,119,.2); }
.solution-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--ig-text); margin-bottom: 12px; }
.solution-card .card-description { font-size: .92rem; color: var(--ig-text-muted); line-height: 1.65; margin-bottom: 20px; }
.card-features { list-style: none; margin: 0; padding: 0; margin-top: auto; }
.card-features li { font-size: .85rem; color: var(--ig-text-secondary); padding: 6px 0; display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.card-features li .bullet { flex-shrink: 0; font-size: .65rem; margin-top: 4px; }
.card-voice .card-features .bullet { color: var(--ig-blue); }
.card-crm .card-features .bullet { color: var(--ig-purple); }
.card-scheduling .card-features .bullet { color: var(--ig-green); }
.card-analytics .card-features .bullet { color: var(--ig-pink); }
/* Niche solution cards (4 variants) */
.card-calls .card-icon { background: rgba(5,150,105,.12); border: 1px solid rgba(5,150,105,.2); }
.card-qualify .card-icon { background: rgba(2,132,199,.12); border: 1px solid rgba(2,132,199,.2); }
.card-booking .card-icon { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.2); }
.card-follow .card-icon { background: rgba(219,39,119,.12); border: 1px solid rgba(219,39,119,.2); }
.card-calls .card-features .bullet { color: var(--ig-green); }
.card-qualify .card-features .bullet { color: var(--ig-blue); }
.card-booking .card-features .bullet { color: var(--ig-purple); }
.card-follow .card-features .bullet { color: var(--ig-pink); }
/* ---------- Industries grid ---------- */
.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.industry-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 36px 28px;
text-align: center;
text-decoration: none;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
display: flex; flex-direction: column; align-items: center;
}
.industry-card:hover { transform: translateY(-4px); box-shadow: var(--ig-shadow-card); border-color: var(--ig-indigo-border); }
.industry-icon {
width: 64px; height: 64px; border-radius: var(--ig-r-xl);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; margin-bottom: 20px;
}
.card-tree .industry-icon { background: rgba(5,150,105,.12); border: 1px solid rgba(5,150,105,.2); }
.card-plumbing .industry-icon { background: rgba(2,132,199,.12); border: 1px solid rgba(2,132,199,.2); }
.card-legal .industry-icon { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.2); }
.card-realestate .industry-icon { background: rgba(219,39,119,.12); border: 1px solid rgba(219,39,119,.2); }
.card-chiro .industry-icon { background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.2); }
.card-helpdesk .industry-icon { background: rgba(45,123,201,.12); border: 1px solid rgba(45,123,201,.2); }
.card-office-design .industry-icon { background: rgba(234,88,12,.12); border: 1px solid rgba(234,88,12,.2); }
.industry-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ig-text); margin-bottom: 10px; }
.industry-card p { font-size: .85rem; color: var(--ig-text-muted); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.card-link { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ig-purple); transition: color .2s ease; }
.industry-card:hover .card-link { color: var(--ig-blue); }
.industry-card.coming-soon { opacity: .5; pointer-events: none; }
.industry-card.coming-soon .card-link { color: var(--ig-text-dim); }
.industries-callout {
text-align: center;
max-width: 640px;
margin: 64px auto 0;
padding: 36px 32px;
background: var(--ig-blue-soft);
border: 1px solid var(--ig-blue-border);
border-radius: var(--ig-r-2xl);
}
.industries-callout-question {
font-size: 1.1rem;
font-weight: 600;
color: var(--ig-text);
margin: 0 0 22px;
}
.industries-callout-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ig-blue);
color: #fff !important;
padding: 14px 32px;
border-radius: var(--ig-r-pill);
font-size: 1rem;
font-weight: 700;
text-decoration: none;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
box-shadow: 0 6px 18px rgba(45, 123, 201, 0.25);
}
.industries-callout-cta:hover {
background: var(--ig-blue-deep);
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(45, 123, 201, 0.32);
}
@media (max-width: 600px) {
.industries-callout { padding: 28px 20px; margin-top: 48px; }
.industries-callout-cta { padding: 12px 22px; font-size: .92rem; }
}
/* ==========================================================================
Industries carousel — replaces the static .industries-grid on /ai-reception/
and /industries/. Two horizontal rows of cards that auto-scroll left, pause
on hover/focus, with manual prev/next arrows that jump one card at a time.
Cards are duplicated server-side so the loop is seamless.
========================================================================== */
.industries-carousel {
position: relative;
margin-top: 32px;
padding: 0 8px;
}
.industries-carousel-viewport {
overflow: hidden;
/* Vertical padding gives cards headroom for hover translateY(-4px) and
the 20px shadow blur — without it the top of the top-row cards clipped
against the viewport edge on hover. Mask is horizontal-only so the
padding doesn't interfere with the edge fade. */
padding: 12px 0 24px;
/* Edge fade so cards entering/leaving the viewport blend instead of clipping
hard. The arrows live OUTSIDE this masked element so they stay crisp. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.industries-carousel-rows {
display: flex;
flex-direction: column;
gap: 24px;
}
.industries-carousel-track {
display: flex;
gap: 24px;
width: max-content;
/* Tracks get translateX values from JS each frame. */
will-change: transform;
}
.industries-carousel-track .industry-card {
flex-shrink: 0;
width: 280px;
margin: 0;
}
.industries-carousel-track .industry-card[aria-hidden="true"] {
/* Cloned cards (duplicated for seamless loop). Visually identical, but
hidden from assistive tech so screen readers don't read them twice. */
}
/* "More coming soon" filler — appended to the bottom row when the industry
count is odd so both rows have equal card counts. Visually distinct (dashed
border, brand-blue tint) so it reads as a placeholder, but it's still a real
link to the consultation page so visitors who don't see their vertical have
a second on-card CTA matching the "Learn More →" pattern. */
.industry-card--coming-soon {
background: transparent;
border: 2px dashed var(--ig-blue-border);
}
.industry-card--coming-soon:hover {
background: var(--ig-blue-soft);
border-color: var(--ig-blue);
}
.industry-card--coming-soon .industry-icon {
background: var(--ig-blue-soft);
border: 1px solid var(--ig-blue-border);
}
.industry-card--coming-soon h3 {
color: var(--ig-text-secondary);
}
.industry-card--coming-soon p {
color: var(--ig-text-muted);
}
.industry-card--coming-soon .card-link {
color: var(--ig-blue-deep);
}
.industry-card--coming-soon:hover .card-link {
color: var(--ig-blue);
}
/* Prev / next nav buttons */
.industries-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1;
color: var(--ig-text);
z-index: 5;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
padding: 0;
font-family: inherit;
}
.industries-carousel-nav:hover,
.industries-carousel-nav:focus-visible {
background: var(--ig-blue);
border-color: var(--ig-blue);
color: #fff;
transform: translateY(-50%) scale(1.06);
box-shadow: 0 8px 22px rgba(45, 123, 201, 0.32);
outline: none;
}
.industries-carousel-nav--prev { left: -10px; }
.industries-carousel-nav--next { right: -10px; }
@media (prefers-reduced-motion: reduce) {
/* JS also detects this and keeps the carousel paused; CSS ensures no
implicit animation either way. */
.industries-carousel-track { transition: none !important; }
}
@media (max-width: 768px) {
.industries-carousel { padding: 0 4px; }
.industries-carousel-track .industry-card { width: 240px; }
.industries-carousel-nav { width: 36px; height: 36px; font-size: 1.2rem; }
.industries-carousel-nav--prev { left: -4px; }
.industries-carousel-nav--next { right: -4px; }
.industries-carousel-viewport {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
}
/* ---------- Why Us ---------- */
.value-props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 64px; }
.value-prop {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 36px 32px; text-align: center;
}
.value-prop .prop-icon { font-size: 2rem; margin-bottom: 16px; }
.value-prop h3 { font-size: 1.2rem; font-weight: 700; color: var(--ig-text); margin-bottom: 12px; }
.time-accent {
background: linear-gradient(135deg, var(--ig-indigo), var(--ig-purple));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.results-accent {
background: linear-gradient(135deg, var(--ig-green), var(--ig-green-light));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.value-prop p { font-size: .92rem; color: var(--ig-text-muted); line-height: 1.65; margin: 0; }
.flowchart-label { text-align: center; margin-bottom: 32px; }
.flowchart { display: flex; align-items: stretch; gap: 0; max-width: 960px; margin: 0 auto 20px; position: relative; }
.flow-step { flex: 1; text-align: center; padding: 0 20px; position: relative; }
.step-number {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; font-weight: 800; color: #fff;
margin: 0 auto 8px; position: relative; z-index: 2;
}
.flow-step:nth-child(1) .step-number { background: linear-gradient(135deg, var(--ig-blue), var(--ig-blue-light)); }
.flow-step:nth-child(2) .step-number { background: linear-gradient(135deg, var(--ig-blue-deep), var(--ig-blue)); }
.flow-step:nth-child(3) .step-number { background: linear-gradient(135deg, var(--ig-green), var(--ig-green-light)); }
.flow-step:not(:last-child)::after {
content: ''; position: absolute; top: 24px;
left: calc(50% + 32px); right: calc(-50% + 32px);
height: 2px;
background: linear-gradient(90deg, rgba(45,123,201,.4), rgba(45,123,201,.4));
z-index: 1;
}
.flow-step:nth-child(2):not(:last-child)::after {
background: linear-gradient(90deg, rgba(45,123,201,.4), rgba(5,150,105,.4));
}
.flow-step h4 { font-size: 1rem; font-weight: 700; color: var(--ig-text); margin-bottom: 10px; }
.flow-step p { font-size: .85rem; color: var(--ig-text-muted); line-height: 1.55; max-width: 260px; margin: 0 auto; }
.reassurance { text-align: center; margin-top: 40px; }
.reassurance p {
display: inline-flex; align-items: center; gap: 8px;
font-size: .9rem; font-weight: 600; color: var(--ig-green);
background: rgba(5,150,105,.08);
border: 1px solid rgba(5,150,105,.18);
padding: 12px 28px; border-radius: var(--ig-r-pill);
margin: 0;
}
/* ---------- Comparison ---------- */
.table-wrapper { overflow-x: auto; }
.comparison-table {
width: 100%; border-collapse: separate; border-spacing: 0;
background: rgba(15,23,42,.02);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
overflow: hidden; margin-bottom: 48px;
}
.comparison-table thead th {
padding: 20px 16px;
font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--ig-text-dim);
text-align: center;
border-bottom: 1px solid var(--ig-border);
background: rgba(15,23,42,.02);
}
.comparison-table thead th:first-child { text-align: left; padding-left: 28px; }
.comparison-table thead th.col-us {
color: var(--ig-purple);
background: rgba(45,123,201,.06);
}
.comparison-table thead th.col-us::before { content: '★'; margin-right: 6px; }
.comparison-table tbody tr { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.comparison-table tbody tr:hover {
background: rgba(15,23,42,.02);
transform: scale(1.015);
box-shadow: 0 4px 20px rgba(15,23,42,.06);
z-index: 2; position: relative;
}
.comparison-table tbody td {
padding: 18px 16px; font-size: .9rem; text-align: center;
border-bottom: 1px solid var(--ig-border-soft);
color: var(--ig-text-muted);
}
.comparison-table tbody td:first-child {
text-align: left; padding-left: 28px;
color: var(--ig-text-secondary); font-weight: 600; font-size: .88rem;
}
.comparison-table tbody td.col-us { background: rgba(45,123,201,.04); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.icon-yes { color: var(--ig-green); font-weight: 700; font-size: 1.15rem; }
.icon-no { color: var(--ig-red-light); font-weight: 700; font-size: 1.15rem; }
.icon-partial { color: var(--ig-amber); font-size: .8rem; font-weight: 600; }
.value-text { font-weight: 600; color: var(--ig-text-secondary); }
.col-us .value-text { color: var(--ig-purple); }
.advantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.advantage-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 32px 24px; text-align: center;
}
.advantage-card .adv-icon { font-size: 2rem; margin-bottom: 14px; }
.advantage-card h3 { font-size: 1rem; font-weight: 700; color: var(--ig-text); margin-bottom: 10px; }
.advantage-card p { font-size: .85rem; color: var(--ig-text-muted); line-height: 1.6; margin: 0; }
/* ---------- Pricing ---------- */
.pricing-section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.pricing-header { text-align: center; margin-bottom: 50px; }
.pricing-header h2 { font-size: 2.5rem; font-weight: 800; color: var(--ig-text); margin-bottom: 12px; letter-spacing: -.02em; }
.pricing-header p { font-size: 1.1rem; color: var(--ig-text-muted); max-width: 550px; margin: 0 auto; line-height: 1.6; }
.pricing-container { display: flex; justify-content: center; gap: 24px; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; }
.pricing-card {
background: var(--ig-bg-card);
border: 1px solid var(--ig-border-strong);
border-radius: var(--ig-r-2xl);
padding: 36px 32px; width: 340px;
position: relative;
transition: transform .3s ease, box-shadow .3s ease;
backdrop-filter: blur(10px);
display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--ig-shadow-deep); }
.pricing-card.featured {
border-color: rgba(45,123,201,.4);
background: rgba(45,123,201,.06);
transform: scale(1.03);
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-4px); }
.badge {
position: absolute; top: -14px; left: 50%;
transform: translateX(-50%);
background: var(--ig-gradient);
color: #fff;
font-size: .75rem; font-weight: 700;
padding: 6px 20px; border-radius: 20px;
text-transform: uppercase; letter-spacing: .08em;
}
.tier-name { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.card-essentials .tier-name { color: var(--ig-blue); }
.card-professional .tier-name { color: var(--ig-purple); }
.card-enterprise .tier-name { color: var(--ig-pink); }
.price { margin-bottom: 6px; }
.price .amount { font-size: 3rem; font-weight: 800; color: var(--ig-text); letter-spacing: -.03em; }
.price .dollar { font-size: 1.5rem; font-weight: 600; color: var(--ig-text-muted); vertical-align: top; position: relative; top: 8px; }
.price .period { font-size: 1rem; color: var(--ig-text-dim); font-weight: 500; }
.price-subtitle { font-size: .85rem; color: var(--ig-text-dim); margin-bottom: 28px; line-height: 1.5; }
.divider { height: 1px; background: var(--ig-border-strong); margin-bottom: 24px; }
.features-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ig-text-dim); margin-bottom: 16px; }
.features { list-style: none; margin: 0 0 32px; padding: 0; flex-grow: 1; }
.features li { font-size: .9rem; color: var(--ig-text-secondary); padding: 8px 0; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.features li .check {
flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; margin-top: 1px;
}
.card-essentials .check { background: rgba(2,132,199,.15); color: var(--ig-blue); }
.card-professional .check { background: rgba(124,58,237,.15); color: var(--ig-purple); }
.card-enterprise .check { background: rgba(219,39,119,.15); color: var(--ig-pink); }
.cta-button {
display: block; width: 100%;
padding: 14px; border: none;
border-radius: var(--ig-r-md);
font-size: .95rem; font-weight: 600;
text-align: center; text-decoration: none;
transition: all .2s ease; cursor: pointer;
}
.card-essentials .cta-button { background: rgba(2,132,199,.12); color: var(--ig-blue); border: 1px solid rgba(2,132,199,.25); }
.card-essentials .cta-button:hover { background: rgba(2,132,199,.2); }
.card-professional .cta-button { background: var(--ig-gradient); color: #fff; border: none; }
.card-professional .cta-button:hover { opacity: .9; box-shadow: var(--ig-shadow-glow); }
.card-enterprise .cta-button { background: rgba(219,39,119,.12); color: var(--ig-pink); border: 1px solid rgba(219,39,119,.25); }
.card-enterprise .cta-button:hover { background: rgba(219,39,119,.2); }
.footer-note { text-align: center; margin-top: 40px; color: var(--ig-text-dim); font-size: .85rem; }
/* ---------- Demo + contact ---------- */
.demo-section {
padding: 80px 24px 40px;
max-width: var(--ig-max-w-narrow);
margin: 0 auto; text-align: center;
}
.demo-section h2 { font-size: 2.4rem; font-weight: 800; color: var(--ig-text); letter-spacing: -.02em; margin-bottom: 14px; }
.demo-section .subtext { font-size: 1.05rem; color: var(--ig-text-muted); line-height: 1.7; max-width: 540px; margin: 0 auto 36px; }
.demo-button {
display: inline-flex; align-items: center; gap: 12px;
padding: 20px 48px;
background: var(--ig-bg-card);
border: 2px solid var(--ig-border-strong);
border-radius: 60px; color: var(--ig-text);
font-size: 1.1rem; font-weight: 700;
text-decoration: none; cursor: pointer;
transition: all .3s ease; margin-bottom: 40px;
}
.demo-button:hover {
background: var(--ig-indigo-soft);
border-color: rgba(45,123,201,.4);
box-shadow: 0 0 40px rgba(45,123,201,.15);
transform: translateY(-2px); color: var(--ig-text);
}
.demo-button .phone-icon { font-size: 1.3rem; animation: ring 2.5s ease-in-out infinite; }
.demo-dropdown-wrap { position: relative; display: inline-flex; margin-bottom: 40px; }
.demo-dropdown-wrap .demo-button { margin-bottom: 0; }
.demo-niche-menu {
display: none; position: absolute;
top: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: var(--ig-bg-dropdown);
border: 1px solid var(--ig-border-strong);
border-radius: var(--ig-r-lg);
padding: 8px; min-width: 260px;
backdrop-filter: blur(20px);
box-shadow: var(--ig-shadow-dropdown);
z-index: 100;
}
.demo-dropdown-wrap.open .demo-niche-menu { display: block; }
.demo-niche-menu a {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
color: var(--ig-text-secondary);
text-decoration: none;
font-size: .88rem; font-weight: 600;
border-radius: var(--ig-r-sm);
transition: background .15s ease;
}
.demo-niche-menu a:hover { background: rgba(15,23,42,.06); color: var(--ig-text); }
.demo-niche-menu a .niche-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.demo-niche-menu .dropdown-label {
display: block; padding: 8px 16px 6px;
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--ig-text-dim);
}
.demo-tips { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.demo-tip { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ig-text-secondary); font-weight: 500; }
.demo-tip .tip-icon {
width: 36px; height: 36px; border-radius: var(--ig-r-sm);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
background: var(--ig-indigo-soft);
border: 1px solid rgba(45,123,201,.2);
flex-shrink: 0;
}
.section-divider { max-width: 200px; height: 1px; background: var(--ig-border-strong); margin: 0 auto; }
.contact-section { padding: 40px 24px 80px; max-width: 680px; margin: 0 auto; }
.contact-header { text-align: center; margin-bottom: 40px; }
.contact-header h2 { font-size: 2rem; font-weight: 800; color: var(--ig-text); letter-spacing: -.02em; margin-bottom: 12px; }
.contact-header p { font-size: .95rem; color: var(--ig-text-muted); line-height: 1.6; margin: 0; }
/* GHL embedded form container */
.ghl-form-embed {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 8px;
min-height: 560px;
overflow: hidden;
}
.ghl-form-embed iframe { width: 100%; min-height: 560px; border: 0; border-radius: 16px; }
/* ---------- Industry page (niche) variants ---------- */
/* Accent overrides driven by .industry--{slug} class on the page wrapper */
.industry--tree-services { --ig-industry-accent: #059669; --ig-industry-soft: rgba(5,150,105,.10); --ig-industry-border: rgba(5,150,105,.30); }
.industry--plumbing { --ig-industry-accent: #0284c7; --ig-industry-soft: rgba(2,132,199,.10); --ig-industry-border: rgba(2,132,199,.30); }
.industry--law-offices { --ig-industry-accent: #7c3aed; --ig-industry-soft: rgba(124,58,237,.10); --ig-industry-border: rgba(124,58,237,.30); }
.industry--real-estate { --ig-industry-accent: #db2777; --ig-industry-soft: rgba(219,39,119,.10); --ig-industry-border: rgba(219,39,119,.30); }
.industry--chiropractic { --ig-industry-accent: #d97706; --ig-industry-soft: rgba(217,119,6,.10); --ig-industry-border: rgba(217,119,6,.30); }
.industry--helpdesk { --ig-industry-accent: #4f46e5; --ig-industry-soft: rgba(79,70,229,.10); --ig-industry-border: rgba(79,70,229,.30); }
.industry--office-design { --ig-industry-accent: #ea580c; --ig-industry-soft: rgba(234,88,12,.10); --ig-industry-border: rgba(234,88,12,.30); }
.industry-hero .hero-badge {
background: var(--ig-industry-soft);
border-color: var(--ig-industry-border);
color: var(--ig-industry-accent);
}
.industry-hero .hero-badge .dot { background: var(--ig-industry-accent); }
.industry-hero h1 .accent {
background: linear-gradient(135deg, var(--ig-industry-accent), var(--ig-blue-deep), var(--ig-blue), var(--ig-industry-accent));
background-size: 300% 300%;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
animation: gradient-shift 6s ease-in-out infinite;
}
.industry-demo .demo-button { border-color: var(--ig-industry-border); }
.industry-demo .demo-button:hover {
background: var(--ig-industry-soft);
border-color: var(--ig-industry-accent);
box-shadow: 0 0 40px var(--ig-industry-soft);
}
.industry-demo .demo-tip .tip-icon {
background: var(--ig-industry-soft);
border-color: var(--ig-industry-border);
}
/* Scenarios grid for niche problem section */
.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.scenario-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 28px 24px;
text-align: center;
}
.scenario-card .scenario-icon { font-size: 2rem; margin-bottom: 14px; }
.scenario-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ig-text); margin-bottom: 10px; }
.scenario-card p { font-size: .88rem; color: var(--ig-text-muted); line-height: 1.6; margin: 0; }
/* ---------- FAQ (for industry + blog) ---------- */
.faq-section { padding: 80px 24px; max-width: 920px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 40px; }
.faq-header h2 { font-size: 2rem; font-weight: 800; color: var(--ig-text); margin-bottom: 10px; }
.faq-header p { font-size: 1rem; color: var(--ig-text-muted); margin: 0; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-xl);
padding: 20px 24px;
}
.faq-item[open] { border-color: var(--ig-indigo-border); }
.faq-item summary {
list-style: none; cursor: pointer;
font-weight: 700; font-size: 1rem;
color: var(--ig-text);
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; font-size: 1.4rem; line-height: 1;
color: var(--ig-purple); transition: transform .2s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer {
margin-top: 12px;
color: var(--ig-text-secondary);
font-size: .95rem; line-height: 1.7;
}
/* ---------- Blog ---------- */
.blog-header {
max-width: var(--ig-max-w); margin: 0 auto;
padding: 80px 24px 40px; text-align: center;
}
.blog-header h1 { font-size: 2.6rem; letter-spacing: -.02em; margin-bottom: 12px; color: var(--ig-text); }
.blog-header p { color: var(--ig-text-muted); font-size: 1.05rem; max-width: 620px; margin: 0 auto; }
.post-grid {
max-width: var(--ig-max-w); margin: 0 auto;
padding: 0 24px 80px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.post-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 28px;
display: flex; flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
text-decoration: none;
}
.post-card:hover {
transform: translateY(-4px);
box-shadow: var(--ig-shadow-card);
border-color: var(--ig-indigo-border);
}
.post-card .post-category {
font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--ig-purple);
margin-bottom: 10px;
}
.post-card h3 { font-size: 1.15rem; color: var(--ig-text); margin-bottom: 10px; line-height: 1.35; }
.post-card .excerpt { font-size: .92rem; color: var(--ig-text-muted); line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
.post-meta {
display: flex; gap: 12px; align-items: center;
font-size: .8rem; color: var(--ig-text-dim);
}
.post-single {
max-width: 760px; margin: 0 auto;
padding: 60px 24px 80px;
color: var(--ig-text-secondary);
}
.post-single .post-category { font-size: .78rem; color: var(--ig-purple); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.post-single h1 { font-size: 2.4rem; color: var(--ig-text); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 16px; }
.post-single .post-lead-meta { color: var(--ig-text-dim); font-size: .9rem; margin-bottom: 32px; }
.post-content { font-size: 1.02rem; line-height: 1.8; }
.post-content h2 { font-size: 1.55rem; margin-top: 2em; margin-bottom: .6em; color: var(--ig-text); }
.post-content h3 { font-size: 1.2rem; margin-top: 1.6em; margin-bottom: .5em; color: var(--ig-text); }
.post-content p { margin-bottom: 1.1em; }
.post-content a { color: var(--ig-purple); border-bottom: 1px solid rgba(124,58,237,.25); }
.post-content a:hover { color: var(--ig-blue); border-bottom-color: rgba(124,58,237,.6); }
.post-content ul, .post-content ol { margin: 0 0 1.2em 1.4em; }
.post-content li { margin-bottom: .5em; }
.post-content blockquote {
border-left: 3px solid var(--ig-purple);
padding: 8px 20px;
background: var(--ig-indigo-soft);
border-radius: 0 var(--ig-r-md) var(--ig-r-md) 0;
margin: 1.5em 0;
color: var(--ig-text-secondary);
}
.post-content code {
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
border-radius: 6px;
padding: 2px 6px;
font-size: .9em;
}
.post-content img { border-radius: var(--ig-r-xl); margin: 1.2em 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.post-content th, .post-content td { padding: 10px 14px; border-bottom: 1px solid var(--ig-border); text-align: left; }
.post-content th { color: var(--ig-text); font-weight: 700; }
/* ---------- Footer ---------- */
.site-footer {
padding: 48px 24px 32px;
max-width: var(--ig-max-w);
margin: 0 auto;
border-top: 1px solid rgba(15,23,42,.06);
}
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.footer-brand h3 { font-size: 1.1rem; font-weight: 700; color: var(--ig-text); margin-bottom: 8px; }
.footer-brand p { font-size: .85rem; color: var(--ig-text-dim); margin-bottom: 20px; }
.social-links { display: flex; gap: 12px; }
.social-links a {
width: 38px; height: 38px; border-radius: var(--ig-r-sm);
background: var(--ig-bg-card);
border: 1px solid var(--ig-border-strong);
display: flex; align-items: center; justify-content: center;
color: var(--ig-text-muted); text-decoration: none;
transition: all .2s ease;
}
.social-links a:hover {
background: var(--ig-indigo-soft);
border-color: rgba(45,123,201,.3);
color: var(--ig-purple);
transform: translateY(-2px);
}
.footer-contact { display: flex; gap: 48px; flex-wrap: wrap; }
.contact-block { display: flex; flex-direction: column; gap: 6px; }
.contact-block .contact-label {
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--ig-text-dim);
}
.contact-block a { font-size: .92rem; color: var(--ig-text-secondary); text-decoration: none; font-weight: 500; }
.contact-block a:hover { color: var(--ig-purple); }
.footer-bottom {
border-top: 1px solid var(--ig-border-soft);
padding-top: 20px;
text-align: center;
font-size: .78rem;
color: var(--ig-text-faint);
}
/* ---------- Mobile breakpoint (≤768px) ---------- */
@media (max-width: 768px) {
.primary-nav { display: none; }
.nav-toggle { display: inline-flex; }
.primary-nav.is-open {
display: block;
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--ig-bg-dropdown);
border-bottom: 1px solid var(--ig-border);
padding: 16px 24px;
}
.primary-nav.is-open ul { flex-direction: column; gap: 14px; align-items: flex-start; }
.hero-section { padding: 60px 20px; }
.hero-section h1 { font-size: 2rem; }
.hero-section p { font-size: 1rem; }
.hero-buttons { flex-direction: column; width: 100%; }
.btn-primary, .btn-secondary { width: 100%; justify-content: center; }
.problem-section, .section-base, .pricing-section, .demo-section, .contact-section, .faq-section { padding-left: 20px; padding-right: 20px; }
.problem-header h2, .section-header h2, .pricing-header h2, .demo-section h2, .faq-header h2 { font-size: 1.8rem; }
.cost-breakdown { gap: 12px; }
.cost-card { min-width: 140px; padding: 18px 16px; }
.cost-card .cost-amount { font-size: 1.5rem; }
.stats-grid { grid-template-columns: 1fr; }
.solution-grid { grid-template-columns: 1fr; }
.industries-grid { grid-template-columns: 1fr; }
.scenarios { grid-template-columns: 1fr; }
.value-props { grid-template-columns: 1fr; }
.flowchart { flex-direction: column; gap: 32px; align-items: center; }
.flow-step { padding: 0; }
.flow-step:not(:last-child)::after {
top: auto; bottom: -20px; left: 50%; right: auto;
width: 2px; height: 20px; transform: translateX(-50%);
background: rgba(45,123,201,.3);
}
.table-wrapper { display: none; }
.advantages { grid-template-columns: 1fr; }
.pricing-container { flex-direction: column; align-items: stretch; }
.pricing-card { width: 100%; max-width: 100%; }
.pricing-card.featured { transform: scale(1); }
.pricing-card.featured:hover { transform: translateY(-4px); }
.demo-button { padding: 16px 36px; font-size: 1rem; }
.demo-tips { flex-direction: column; align-items: center; gap: 16px; }
.contact-header h2 { font-size: 1.6rem; }
.post-grid { grid-template-columns: 1fr; padding: 0 20px 60px; }
.post-single h1 { font-size: 1.7rem; }
.footer-top { flex-direction: column; align-items: center; text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.social-links { justify-content: center; }
.footer-contact { flex-direction: column; align-items: center; gap: 24px; }
.contact-block { align-items: center; }
}
/* ---------- Single-post supplements (single.php) ---------- */
.post-card-thumb {
display: block; overflow: hidden;
border-radius: var(--ig-r-xl);
margin: -28px -28px 20px;
}
.post-card-thumb img {
width: 100%; height: auto; display: block;
transition: transform .4s ease;
}
.post-card:hover .post-card-thumb img { transform: scale(1.03); }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--ig-purple); }
.post-single-hero {
max-width: 760px; margin: 0 auto;
padding: 60px 24px 24px;
}
.post-single-hero h1 {
font-size: 2.4rem; color: var(--ig-text);
line-height: 1.2; letter-spacing: -.02em;
margin: 14px 0 16px;
}
.post-single-hero .post-single-lead {
font-size: 1.1rem; color: var(--ig-text-muted);
line-height: 1.6; margin-bottom: 20px;
}
.post-single-thumb {
max-width: 920px; margin: 24px auto 0;
padding: 0 24px;
}
.post-single-thumb img {
width: 100%; height: auto; display: block;
border-radius: var(--ig-r-2xl);
box-shadow: var(--ig-shadow-card);
}
.post-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 32px; padding-top: 24px;
border-top: 1px solid var(--ig-border);
}
.post-tag {
font-size: .78rem; color: var(--ig-text-dim);
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 50px;
padding: 6px 14px;
text-decoration: none;
transition: color .2s ease, border-color .2s ease;
}
.post-tag:hover { color: var(--ig-purple); border-color: var(--ig-indigo-border); }
.post-author-card {
display: flex; gap: 20px; align-items: flex-start;
margin-top: 40px; padding: 24px;
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
}
.post-author-avatar img { border-radius: 50%; display: block; }
.post-author-body strong { color: var(--ig-text); display: block; margin-bottom: 6px; }
.post-author-body p { color: var(--ig-text-muted); font-size: .92rem; line-height: 1.6; margin: 0; }
.related-posts {
max-width: var(--ig-max-w); margin: 60px auto 0;
padding: 0 24px;
}
.related-posts h2 {
font-size: 1.5rem; color: var(--ig-text);
margin-bottom: 24px; text-align: center;
}
.post-cta-strip {
max-width: var(--ig-max-w); margin: 60px auto 80px;
padding: 0 24px;
}
.post-cta-inner {
background: var(--ig-indigo-soft);
border: 1px solid var(--ig-indigo-border);
border-radius: var(--ig-r-2xl);
padding: 48px 32px;
text-align: center;
}
.post-cta-inner h2 { font-size: 1.6rem; color: var(--ig-text); margin-bottom: 10px; }
.post-cta-inner p { color: var(--ig-text-muted); margin-bottom: 22px; font-size: 1rem; }
.pagination {
display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; padding: 8px 14px;
border-radius: 10px;
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
color: var(--ig-text-secondary);
text-decoration: none; font-size: .9rem; font-weight: 600;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
color: #fff;
background: var(--ig-blue);
border-color: var(--ig-blue);
}
@media (max-width: 768px) {
.post-single-hero { padding: 40px 20px 16px; }
.post-single-hero h1 { font-size: 1.7rem; }
.post-single-thumb { padding: 0 20px; }
.related-posts, .post-cta-strip { padding: 0 20px; }
.post-cta-inner { padding: 32px 20px; }
.post-author-card { flex-direction: column; align-items: center; text-align: center; }
}
/* ==========================================================================
Blue-variant overrides — applied after the base block so they win without
needing !important. Keep this section cohesive: any new rule added here
should be part of the "cleaner / more spacious / solid pill" identity.
========================================================================== */
/* --- Typography shift: Manrope is a touch lighter than Montserrat at the
same weight, so we nudge display weights up one step. --- */
body { font-weight: 500; letter-spacing: -.005em; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; font-weight: 800; }
/* --- Solid pill buttons (no gradients, no shimmer) --- */
.btn-primary {
background: var(--ig-blue) !important;
background-image: none !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--ig-r-pill) !important;
padding: 16px 36px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
box-shadow: 0 8px 24px rgba(45, 123, 201, 0.28) !important;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.btn-primary::before { display: none !important; }
.btn-primary:hover {
background: var(--ig-blue-deep) !important;
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(45, 123, 201, 0.4) !important;
}
.btn-secondary {
background: transparent !important;
border: 1.5px solid var(--ig-blue-border) !important;
color: var(--ig-text) !important;
border-radius: var(--ig-r-pill) !important;
padding: 14px 30px !important;
font-weight: 600 !important;
transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}
.btn-secondary:hover {
background: var(--ig-blue-soft) !important;
border-color: var(--ig-blue) !important;
transform: translateY(-1px);
}
/* Accent span inside H1 — preserve the base theme's animated multi-hue
gradient (deep-blue → violet → brand-blue → deep-blue loop on a 300%
background-size). The base rule already supplies background-clip + the
gradient-shift keyframe. */
/* --- Cleaner cards: solid surfaces, thin cool-grey border, softer lift --- */
.solution-card,
.pricing-card,
.problem-section .cost-card,
.why-us .value-prop,
.comparison-card,
.scenario-card,
.post-card {
background: var(--ig-bg-card) !important;
border: 1px solid var(--ig-border) !important;
box-shadow: none;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.solution-card:hover,
.pricing-card:hover,
.scenario-card:hover,
.post-card:hover {
transform: translateY(-4px);
border-color: var(--ig-blue-border) !important;
box-shadow: var(--ig-shadow-card) !important;
}
/* Featured pricing card — brand blue ring instead of purple gradient border */
.pricing-card.featured,
.card-professional.featured {
border-color: var(--ig-blue) !important;
box-shadow: 0 0 0 1px var(--ig-blue), var(--ig-shadow-card) !important;
}
.pricing-card .badge,
.card-professional .badge {
background: var(--ig-blue) !important;
color: #fff !important;
border-radius: var(--ig-r-pill) !important;
padding: 6px 18px !important;
font-weight: 700;
}
/* Icon chips — circular, solid blue wash */
.card-icon,
.solution-card .card-icon {
background: var(--ig-blue-soft) !important;
border: 1px solid var(--ig-blue-border) !important;
border-radius: 50% !important;
width: 56px; height: 56px;
}
/* Pills everywhere: badges, highlights, category chips */
.pill-badge,
.hero-highlights .highlight,
.post-category,
.post-card-category {
border-radius: var(--ig-r-pill) !important;
}
/* --- Roomier hero, big Manrope display --- */
.hero-section { padding-top: 96px; padding-bottom: 64px; }
.hero-section h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.08; }
.hero-section > p { max-width: 640px; font-size: 1.1rem; }
.section-base,
.problem-section,
.pricing-section,
.faq-section { padding: 96px 24px; }
.section-header h2,
.problem-header h2,
.pricing-header h2,
.faq-header h2,
.demo-section h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
/* --- Numbered step cards (Tanz Tech-inspired "01 / 02 / 03" pattern) ---
Usage:
-
01
Strategic audit
…
…
You can drop these into any section (why-us, solution, industry) without
touching the existing flowchart markup. --- */
.step-cards {
list-style: none;
margin: 0 auto; padding: 0;
max-width: var(--ig-max-w);
display: grid; gap: 24px;
grid-template-columns: repeat(3, 1fr);
}
.step-card {
position: relative;
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 40px 28px 28px;
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.step-card:hover {
transform: translateY(-4px);
border-color: var(--ig-blue-border);
box-shadow: var(--ig-shadow-card);
}
.step-card .step-number {
display: inline-block;
font-size: 2.4rem; font-weight: 800;
line-height: 1;
color: var(--ig-blue);
margin-bottom: 18px;
letter-spacing: -.04em;
font-feature-settings: 'tnum' 1;
}
.step-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step-card p { color: var(--ig-text-muted); font-size: .95rem; line-height: 1.6; margin: 0; }
/* Variant: compact numbered row with a top divider, matches the Tanz Tech
"View All" section footer. Use on sections where you want the steps to
feel horizontal + inline. */
.step-cards--inline {
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.step-cards--inline .step-card {
background: transparent;
border: 0;
border-top: 1px solid var(--ig-border);
border-radius: 0;
padding: 32px 24px 0;
}
.step-cards--inline .step-card:hover { transform: none; box-shadow: none; }
/* --- Brand logo-mark (for header) — matches the IntelliGents wordmark color.
Drop inside .site-brand: IntelliGents */
.site-brand { font-weight: 800; }
.site-brand .brand-mark em { color: var(--ig-blue); font-style: normal; }
.site-brand .brand-mark { letter-spacing: -.02em; }
.site-brand .brand-tagline {
display: block;
font-size: .62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .18em;
color: var(--ig-blue);
margin-top: 2px;
}
/* --- Trusted-by logo row (optional, Tanz Tech-style "Trusted by companies") --- */
.trusted-row {
max-width: var(--ig-max-w);
margin: 0 auto; padding: 48px 24px 24px;
text-align: center;
}
.trusted-row h3 {
font-size: 1rem; font-weight: 700;
color: var(--ig-text-muted);
text-transform: none; letter-spacing: 0;
margin-bottom: 28px;
}
.trusted-logos {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: center; gap: 48px;
opacity: .6;
}
.trusted-logos img { max-height: 28px; width: auto; filter: grayscale(1); }
/* --- Responsive --- */
@media (max-width: 900px) {
.step-cards,
.step-cards--inline { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.hero-section { padding-top: 72px; padding-bottom: 48px; }
.section-base,
.problem-section,
.pricing-section,
.faq-section { padding: 64px 20px; }
.trusted-logos { gap: 28px; }
}
/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
IntelliGents Ops — umbrella homepage styles
Appended after the blue-variant rules so these win cascade.
Targets: .hero-ops, .value-prop-section, .pillars-section,
.flagship-ai-section.
============================================================ */
.hero-ops .hero-lead {
max-width: 720px;
margin: 18px auto 0;
font-size: clamp(1rem, 1.2vw, 1.15rem);
color: var(--ig-text-muted);
line-height: 1.65;
}
.hero-ops .hero-subtle {
margin-top: 28px;
font-size: .9rem;
color: var(--ig-text-muted);
opacity: .8;
}
/* ---------- Value-prop strip ---------- */
.value-prop-section {
padding-top: 24px;
}
.value-prop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: var(--ig-max-w);
margin: 40px auto 0;
}
.value-prop-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 16px;
padding: 28px 24px;
transition: border-color .2s ease, transform .2s ease;
}
.value-prop-card:hover {
border-color: var(--ig-blue);
transform: translateY(-2px);
}
.value-prop-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: rgba(45, 123, 201, 0.12);
border: 1px solid rgba(45, 123, 201, 0.3);
margin-bottom: 18px;
}
.value-prop-card h3 {
font-size: 1.15rem;
margin: 0 0 10px;
color: var(--ig-text);
}
.value-prop-card p {
font-size: .95rem;
color: var(--ig-text-muted);
line-height: 1.6;
margin: 0;
}
/* ---------- Pillars grid ---------- */
.pillars-section {
padding-top: 72px;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: var(--ig-max-w);
margin: 48px auto 0;
}
.pillar-card {
position: relative;
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 20px;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pillar-card:hover {
border-color: var(--ig-blue);
transform: translateY(-3px);
box-shadow: 0 12px 32px -20px rgba(45, 123, 201, 0.6);
}
.pillar-card.pillar-status--flagship {
border-color: var(--ig-blue);
box-shadow: 0 0 0 1px var(--ig-blue) inset;
}
.pillar-badge {
position: absolute;
top: -12px;
left: 28px;
padding: 6px 14px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
border-radius: 999px;
background: var(--ig-blue);
color: #fff;
}
.pillar-icon {
width: 56px;
height: 56px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
background: rgba(45, 123, 201, 0.12);
border: 1px solid rgba(45, 123, 201, 0.3);
margin-bottom: 4px;
}
.pillar-card h3 {
font-size: 1.35rem;
margin: 0;
color: var(--ig-text);
}
.pillar-tagline {
font-size: .98rem;
color: var(--ig-text-muted);
line-height: 1.55;
margin: 0 0 4px;
}
.pillar-features {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: grid;
gap: 8px;
}
.pillar-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .92rem;
color: var(--ig-text-muted);
line-height: 1.5;
}
.pillar-features .bullet {
color: var(--ig-blue);
font-size: .6rem;
margin-top: 7px;
flex-shrink: 0;
}
.pillar-footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--ig-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pillar-status {
font-size: .8rem;
color: var(--ig-text-muted);
font-weight: 500;
}
.pillar-status--flagship .pillar-status {
color: var(--ig-blue-deep);
font-weight: 600;
}
.pillar-cta {
font-size: .92rem;
font-weight: 600;
color: var(--ig-blue-deep);
text-decoration: none;
white-space: nowrap;
}
.pillar-cta:hover {
color: var(--ig-blue);
text-decoration: underline;
}
/* ---------- Flagship AI section ---------- */
.flagship-ai-section {
padding-top: 80px;
}
.flagship-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 48px;
max-width: var(--ig-max-w);
margin: 0 auto;
align-items: stretch;
}
/* When the transcript on the right is taller than the content stack on the
left, distribute the left column's vertical rhythm so the CTA buttons sit
flush with the transcript footer instead of leaving a big white block. */
.flagship-content {
display: flex;
flex-direction: column;
}
.flagship-content .flagship-cta {
margin-top: auto;
padding-top: 12px;
}
.flagship-content h2 {
font-size: clamp(1.75rem, 2.4vw, 2.4rem);
line-height: 1.15;
margin: 18px 0 14px;
}
.flagship-lead {
font-size: 1.05rem;
color: var(--ig-text-muted);
line-height: 1.65;
margin: 0 0 28px;
}
.flagship-features {
list-style: none;
padding: 0;
margin: 0 0 32px;
/* Flex + space-around so the 4 features distribute vertically and fill
the column height alongside the (taller) transcript on the right. The
bullets stay the same size; just gain breathing room between each one. */
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 18px;
}
.flagship-features li {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
align-items: flex-start;
}
.flagship-feature-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(45, 123, 201, 0.12);
border: 1px solid rgba(45, 123, 201, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.flagship-features h3 {
font-size: 1.05rem;
margin: 0 0 4px;
color: var(--ig-text);
}
.flagship-features p {
font-size: .92rem;
color: var(--ig-text-muted);
line-height: 1.6;
margin: 0;
}
.flagship-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
/* ---------- Transcript card ---------- */
.flagship-transcript {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 20px;
padding: 20px;
position: sticky;
top: 96px;
box-shadow: 0 20px 48px -30px rgba(15, 23, 42, 0.18);
}
.transcript-header {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ig-border);
margin-bottom: 14px;
}
.transcript-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--ig-green, #059669);
box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.18);
}
.transcript-title {
font-size: .88rem;
font-weight: 600;
color: var(--ig-text);
}
.transcript-time {
margin-left: auto;
font-size: .8rem;
color: var(--ig-text-muted);
font-variant-numeric: tabular-nums;
}
.transcript-body {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.transcript-line {
display: grid;
gap: 4px;
padding: 10px 14px;
border-radius: 12px;
font-size: .9rem;
line-height: 1.5;
}
.transcript-line--ai {
background: rgba(45, 123, 201, 0.10);
border: 1px solid rgba(45, 123, 201, 0.25);
}
.transcript-line--caller {
background: rgba(15, 23, 42, 0.03);
border: 1px solid var(--ig-border);
}
.transcript-who {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
color: var(--ig-text-muted);
}
.transcript-line--ai .transcript-who {
color: var(--ig-blue-deep);
}
.transcript-line p {
margin: 0;
color: var(--ig-text);
}
.transcript-footer {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ig-border);
font-size: .82rem;
color: var(--ig-text-muted);
}
/* ---------- Mobile ---------- */
@media (max-width: 900px) {
.value-prop-grid,
.pillars-grid {
grid-template-columns: 1fr;
}
.flagship-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.flagship-transcript {
position: static;
}
.pillar-badge {
left: 20px;
}
.pillar-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
Consultation CTA + dedicated consultation page
Appended by: add GHL form to dedicated page with CTA link.
Uses --ig-indigo / --ig-indigo-soft / --ig-indigo-border,
which resolve to purple in the base theme and brand-blue in
intelligents-blue / intelligents-ops via legacy aliases.
============================================================ */
/* ---------- CTA card (homepage + industry) ---------- */
.consultation-cta {
max-width: 960px;
margin: 32px auto 0;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
align-items: center;
padding: 36px 40px;
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 20px;
box-shadow: 0 20px 48px -30px rgba(15, 23, 42, 0.15);
}
.consultation-cta-content h3 {
font-size: clamp(1.3rem, 1.6vw, 1.55rem);
margin: 0 0 10px;
color: var(--ig-text);
line-height: 1.2;
}
.consultation-cta-content p {
color: var(--ig-text-muted, #64748b);
font-size: 1rem;
line-height: 1.6;
margin: 0 0 16px;
}
.consultation-cta-points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.consultation-cta-points li {
display: flex;
align-items: center;
gap: 10px;
font-size: .93rem;
color: var(--ig-text-muted, #64748b);
}
.consultation-cta-points li span {
font-size: 1rem;
}
.consultation-cta-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.btn-lg {
font-size: 1.05rem;
padding: 16px 28px;
}
.consultation-cta-fallback {
font-size: .88rem;
color: var(--ig-text-muted, #64748b);
text-decoration: none;
border-bottom: 1px dashed transparent;
}
.consultation-cta-fallback:hover {
color: var(--ig-text, #0f172a);
border-bottom-color: var(--ig-indigo, #2d7bc9);
}
@media (max-width: 780px) {
.consultation-cta {
grid-template-columns: 1fr;
padding: 28px 24px;
gap: 20px;
}
.consultation-cta-action {
align-items: stretch;
}
.btn-lg {
width: 100%;
text-align: center;
}
}
/* ---------- Dedicated consultation page ---------- */
.consultation-page {
padding-bottom: 64px;
}
.consultation-hero .section-header {
max-width: 780px;
}
.consultation-hero .section-header h1 {
font-size: clamp(2rem, 3.2vw, 2.75rem);
line-height: 1.15;
margin: 14px 0 16px;
}
.consultation-intro {
max-width: 780px;
margin: 8px auto 36px;
color: var(--ig-text-muted, #64748b);
font-size: 1rem;
line-height: 1.7;
}
/* Tighter vertical rhythm on the consultation page — the hero and the
"What to expect" card were separated by ~176px of stacked padding (hero
bottom + section-base top). Pull them closer for a more natural flow. */
/* Compound selector intentional — `.section-base { padding-top: 96px }` sits
later in the file (umbrella vertical-rhythm block) and beats a plain
`.consultation-body` rule on source order. Doubling up on .section-base
raises specificity above the global rule without using !important. */
.consultation-hero {
padding-bottom: 24px;
}
.section-base.consultation-body {
padding-top: 16px;
padding-bottom: 64px;
}
/* Same tightening for the /industries/ index page — the hero (h1 + lead) sat
way above the carousel because of stacked section padding. */
.industries-index-hero {
padding-bottom: 16px;
}
#industries-grid {
padding-top: 8px;
}
#industries-grid .industries-carousel {
margin-top: 16px;
}
.consultation-grid {
display: block;
max-width: 720px;
margin: 0 auto;
}
.consultation-points {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 20px;
padding: 28px 28px 24px;
max-width: 640px;
margin: 0 auto 32px;
}
.consultation-points h2 {
font-size: 1.1rem;
margin: 0 0 18px;
color: var(--ig-text);
text-transform: uppercase;
letter-spacing: .08em;
}
.consultation-points ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 18px;
}
.consultation-points li {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: flex-start;
}
.consultation-point-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--ig-indigo-soft, rgba(45, 123, 201, 0.12));
border: 1px solid var(--ig-indigo-border, rgba(45, 123, 201, 0.3));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.consultation-points h3 {
font-size: .98rem;
margin: 0 0 4px;
color: var(--ig-text);
text-transform: none;
letter-spacing: 0;
}
.consultation-points p {
font-size: .88rem;
color: var(--ig-text-muted, #64748b);
line-height: 1.55;
margin: 0;
}
.consultation-form-wrap {
min-width: 0;
}
/* This is the key fix — bound the GHL iframe to a sensible max height
and let its internal form_embed.js script handle the precise sizing.
Previously the 100%-height iframe was rendering enormous. */
.consultation-form-embed {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: 20px;
padding: 8px;
min-height: 620px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.consultation-form-embed iframe {
width: 100% !important;
max-width: 100% !important;
min-height: 600px !important;
border: 0 !important;
border-radius: 16px !important;
display: block;
}
/* Stacked-by-default consultation layout — earlier 2-column grid removed. */
/* ============================================================
Vertical rhythm refinements — umbrella homepage
Gives the hero, section headers, and between-section gaps
consistent breathing room so content isn't tight.
============================================================ */
/* Hero — space between the lead paragraph and the highlight
bullets, and between bullets and the button row. */
.hero-ops .hero-lead {
margin: 22px auto 0;
}
.hero-ops .hero-highlights {
margin-top: 44px;
row-gap: 14px;
}
.hero-ops .hero-buttons {
margin-top: 44px;
}
.hero-ops .hero-subtle {
margin-top: 36px;
}
/* Section headers — generous top + bottom margins around the
h2, and more space between the pill-badge / h2 / lead paragraph
so nothing feels crammed. Applied to every section that uses
the shared .section-header block. */
.section-base {
padding-top: 96px;
padding-bottom: 24px;
}
.section-base .section-header {
margin-bottom: 56px;
}
.section-base .section-header .pill-badge {
margin-bottom: 22px;
}
.section-base .section-header h2 {
margin-top: 0;
margin-bottom: 18px;
}
.section-base .section-header p {
max-width: 720px;
margin-left: auto;
margin-right: auto;
line-height: 1.65;
}
/* Give the pillar + value-prop grids a bit more breathing
room above the cards. */
.value-prop-grid,
.pillars-grid {
margin-top: 12px;
}
/* Flagship section — the hero-ish headline wants space below
the lead paragraph before the feature list starts. */
.flagship-content h2 {
margin-top: 22px;
}
.flagship-lead {
margin-bottom: 36px;
}
.flagship-features {
margin-bottom: 40px;
}
/* Numbered steps — space below the lead before the step cards. */
.steps-section .step-cards,
.steps-section .step-cards--inline {
margin-top: 16px;
}
/* Umbrella CTA partial — give it room to breathe at both
ends of the section when it's the only thing in a section. */
.umbrella-cta-section {
padding: 80px 24px;
}
@media (max-width: 780px) {
.section-base {
padding-top: 64px;
}
.section-base .section-header {
margin-bottom: 40px;
}
.hero-ops .hero-highlights {
margin-top: 32px;
}
.hero-ops .hero-buttons {
margin-top: 32px;
}
}
/* ==========================================================================
Tree Services — niche hub
--------------------------------------------------------------------------
Styles for page-tree-services.php (the v3 hub at /tree-services/) and
page-missed-call-audit.php (the calculator wrapper). All component classes
inherit the global --ig-* token system; nothing is hardcoded except the
tree-domain green accent (--ig-green) referenced from inc/industries.php.
Component groups in this section, top to bottom:
1. Hub sub-navigation (sticky bar)
2. Hub hero — trust strip + dual CTA
3. Problem section — prose + 3 cards + 4-stat strip
4. Lead-magnet card (calculator route)
5. Hormozi offer stack
6. Customer journey timeline
7. Founder-signed guarantee card
8. "Hear it work" demo card
9. Three-path CTA ladder
10. Calculator page hero + section wrapper + back-to-hub strip
========================================================================== */
/* ---------- 1. Hub sub-navigation ---------- */
.tree-services-subnav {
position: sticky;
top: 64px; /* sits below the main site header (.site-header is sticky at top: 0) */
z-index: 40;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ig-border);
}
.tree-services-subnav .subnav-inner {
max-width: var(--ig-max-w);
margin: 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.tree-services-subnav .subnav-home {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .95rem;
font-weight: 700;
color: var(--ig-text);
text-decoration: none;
letter-spacing: -.01em;
}
.tree-services-subnav .subnav-home:hover { color: var(--ig-blue-deep); }
.tree-services-subnav .subnav-links {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.tree-services-subnav .subnav-links a {
display: inline-flex;
align-items: center;
padding: 8px 14px;
font-size: .88rem;
font-weight: 600;
color: var(--ig-text-secondary);
text-decoration: none;
border-radius: var(--ig-r-md);
transition: background .2s ease, color .2s ease;
}
.tree-services-subnav .subnav-links a:hover {
background: var(--ig-blue-soft);
color: var(--ig-blue-deep);
}
.tree-services-subnav .subnav-links a.is-current {
background: var(--ig-blue-soft);
color: var(--ig-blue-deep);
}
.tree-services-subnav .subnav-cta {
background: var(--ig-blue);
color: #fff !important;
padding: 10px 18px !important;
border-radius: var(--ig-r-pill) !important;
font-weight: 700 !important;
}
.tree-services-subnav .subnav-cta:hover {
background: var(--ig-blue-deep) !important;
color: #fff !important;
}
@media (max-width: 720px) {
.tree-services-subnav .subnav-inner {
padding: 10px 16px;
flex-wrap: wrap;
gap: 8px;
}
.tree-services-subnav .subnav-links a {
padding: 6px 10px;
font-size: .84rem;
}
}
/* ---------- 2. Hub hero (page-tree-services.php) ---------- */
.tree-hub-hero .hero-trust-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 14px;
margin-bottom: 36px;
color: var(--ig-text-muted);
font-size: .92rem;
font-weight: 500;
}
.tree-hub-hero .hero-trust-strip span[aria-hidden="true"] { color: var(--ig-text-dim); }
/* ---------- 3. Problem section ---------- */
.tree-problem-section .tree-problem-prose {
max-width: 720px;
margin: 0 auto 48px;
color: var(--ig-text-secondary);
font-size: 1.05rem;
line-height: 1.75;
text-align: center;
}
.tree-problem-section .tree-problem-prose p { margin-bottom: 18px; }
.tree-problem-section .tree-problem-prose p:last-child { margin-bottom: 0; }
.tree-problem-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 56px;
}
.tree-problem-card {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 32px 28px;
transition: transform .25s ease, box-shadow .25s ease;
}
.tree-problem-card:hover { transform: translateY(-3px); box-shadow: var(--ig-shadow-card); }
.tree-problem-card .tree-problem-icon {
font-size: 2rem;
margin-bottom: 16px;
line-height: 1;
/* Center the emoji horizontally within the card. Heading + body copy
below stay left-aligned for readability — only the icon is centered. */
text-align: center;
}
.tree-problem-card h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--ig-text);
margin: 0 0 10px;
}
.tree-problem-card p {
font-size: .92rem;
color: var(--ig-text-muted);
line-height: 1.65;
margin: 0;
}
.tree-stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 980px;
margin: 0 auto;
}
.tree-stat {
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-lg);
padding: 22px 20px;
text-align: center;
}
.tree-stat--negative {
background: rgba(220, 38, 38, 0.05);
border-color: rgba(220, 38, 38, 0.15);
}
.tree-stat--positive {
background: var(--ig-blue-soft);
border-color: var(--ig-blue-border);
}
.tree-stat-number {
font-size: 1.85rem;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 6px;
}
.tree-stat--negative .tree-stat-number { color: var(--ig-red); }
.tree-stat--positive .tree-stat-number { color: var(--ig-blue-deep); }
.tree-stat-text {
font-size: .85rem;
color: var(--ig-text-secondary);
line-height: 1.5;
}
@media (max-width: 900px) {
.tree-problem-cards { grid-template-columns: 1fr; }
.tree-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.tree-stat-strip { grid-template-columns: 1fr; }
}
/* ---------- 4. Lead-magnet CTA card ---------- */
.tree-leadmagnet-section { padding-top: 48px; padding-bottom: 48px; }
.tree-leadmagnet-card {
max-width: 720px;
margin: 0 auto;
background: linear-gradient(135deg, var(--ig-blue-soft) 0%, rgba(45, 123, 201, 0.04) 100%);
border: 1.5px solid var(--ig-blue-border);
border-radius: var(--ig-r-2xl);
padding: 44px 36px;
text-align: center;
box-shadow: 0 10px 30px rgba(45, 123, 201, 0.08);
}
.tree-leadmagnet-card .pill-badge { margin-bottom: 18px; }
.tree-leadmagnet-card h2 {
font-size: 2rem;
font-weight: 800;
color: var(--ig-text);
margin: 0 0 14px;
letter-spacing: -.02em;
}
.tree-leadmagnet-card p {
color: var(--ig-text-secondary);
font-size: 1.02rem;
line-height: 1.7;
max-width: 540px;
margin: 0 auto 28px;
}
.tree-leadmagnet-card .btn-primary { margin-bottom: 16px; }
.tree-leadmagnet-trust {
font-size: .85rem;
color: var(--ig-text-muted);
margin: 0;
}
.tree-leadmagnet-trust em { font-style: italic; }
/* ---------- 5. Hormozi offer stack ---------- */
.intelligents-offer-stack {
max-width: 880px;
margin: 0 auto 32px;
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
overflow: hidden;
box-shadow: var(--ig-shadow-card);
}
.offer-stack-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
padding: 18px 24px;
border-bottom: 1px solid var(--ig-border);
}
.offer-stack-row:last-child { border-bottom: none; }
.offer-stack-row--bonus {
background: linear-gradient(90deg, rgba(45, 123, 201, 0.04) 0%, transparent 100%);
}
.offer-stack-row--bonus .offer-stack-what strong {
color: var(--ig-blue-deep);
letter-spacing: .02em;
}
.offer-stack-what {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: .98rem;
color: var(--ig-text);
line-height: 1.55;
}
.offer-stack-what .offer-check {
flex-shrink: 0;
font-size: 1.05rem;
margin-top: 1px;
}
.offer-stack-value {
white-space: nowrap;
font-size: 1rem;
font-weight: 700;
color: var(--ig-text);
font-feature-settings: "tnum";
}
.offer-stack-value-note {
/* "ONE-TIME" label sits to the LEFT of the dollar amount — markup order
was flipped 2026-05-06 so dollar amounts right-align cleanly across
all rows in the offer stack. margin-right adds the gap between label
and price (instead of margin-left, which made sense when the label
trailed the price). */
display: inline-block;
margin-right: 8px;
font-size: .72rem;
font-weight: 600;
color: var(--ig-text-muted);
text-transform: uppercase;
letter-spacing: .06em;
vertical-align: baseline;
}
.offer-stack-totals {
max-width: 880px;
margin: 0 auto;
padding: 28px 32px;
background: var(--ig-blue-soft);
border: 1.5px solid var(--ig-blue-border);
border-radius: var(--ig-r-2xl);
text-align: center;
}
.offer-stack-total-line {
font-size: 1.05rem;
color: var(--ig-text-secondary);
margin-bottom: 14px;
}
.offer-stack-total-line strong { color: var(--ig-text); }
.offer-stack-price {
font-size: 1.15rem;
color: var(--ig-text);
margin-bottom: 12px;
font-weight: 600;
}
.offer-stack-price-amount {
display: inline-block;
margin-left: 6px;
font-size: 2.2rem;
font-weight: 800;
color: var(--ig-blue-deep);
letter-spacing: -.02em;
vertical-align: baseline;
}
.offer-stack-setup {
font-size: .92rem;
color: var(--ig-text-secondary);
margin: 0 0 8px;
}
.offer-stack-source {
margin: 8px 0 0;
font-size: .8rem;
color: var(--ig-text-muted);
}
.offer-stack-source em { font-style: italic; }
.offer-stack-reasonwhy {
max-width: 720px;
margin: 28px auto 0;
padding: 22px 28px;
background: var(--ig-bg-elevated);
border-left: 3px solid var(--ig-blue);
border-radius: var(--ig-r-md);
}
.offer-stack-reasonwhy p {
margin: 0;
color: var(--ig-text-secondary);
font-size: .95rem;
line-height: 1.7;
}
@media (max-width: 600px) {
.offer-stack-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 16px 18px;
}
.offer-stack-value { font-size: .95rem; }
.offer-stack-totals { padding: 24px 22px; }
.offer-stack-price-amount { font-size: 1.85rem; }
}
/* ---------- 6. Customer journey timeline ---------- */
.intelligents-journey-timeline {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 820px;
position: relative;
}
.intelligents-journey-timeline::before {
content: '';
position: absolute;
left: 78px;
top: 12px;
bottom: 12px;
width: 2px;
background: linear-gradient(180deg, var(--ig-blue-border), var(--ig-border) 90%);
}
.journey-step {
display: grid;
grid-template-columns: 156px 1fr;
gap: 24px;
margin-bottom: 28px;
position: relative;
}
.journey-step:last-child { margin-bottom: 0; }
.journey-marker {
display: flex;
align-items: center;
justify-content: center;
height: 56px;
background: var(--ig-bg-card);
border: 1.5px solid var(--ig-blue-border);
border-radius: var(--ig-r-pill);
color: var(--ig-blue-deep);
font-weight: 700;
font-size: .95rem;
position: relative;
z-index: 2;
transition: border-color .2s ease, background .2s ease;
}
.journey-marker--milestone {
background: var(--ig-blue);
border-color: var(--ig-blue);
color: #fff;
box-shadow: 0 6px 18px rgba(45, 123, 201, 0.25);
}
.journey-day { letter-spacing: -.01em; }
.journey-body {
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-xl);
padding: 22px 26px;
box-shadow: var(--ig-shadow-card);
}
.journey-body h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--ig-text);
margin: 0 0 12px;
letter-spacing: -.01em;
}
.journey-body ul {
margin: 0;
padding: 0;
list-style: none;
}
.journey-body li {
position: relative;
padding-left: 22px;
margin-bottom: 8px;
font-size: .92rem;
color: var(--ig-text-secondary);
line-height: 1.6;
}
.journey-body li:last-child { margin-bottom: 0; }
.journey-body li::before {
content: '';
position: absolute;
left: 4px;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ig-blue);
}
@media (max-width: 720px) {
.intelligents-journey-timeline::before {
left: 24px;
}
.journey-step {
grid-template-columns: 1fr;
gap: 14px;
padding-left: 56px;
}
.journey-marker {
justify-content: flex-start;
padding-left: 18px;
height: 44px;
font-size: .88rem;
position: absolute;
left: 0;
top: 0;
width: auto;
min-width: 110px;
}
.journey-body { padding: 18px 20px; }
}
/* ---------- 7. Guarantee card ---------- */
.tree-guarantee-section {
display: flex;
justify-content: center;
}
.intelligents-guarantee-card {
max-width: 720px;
width: 100%;
background: linear-gradient(180deg, #fff 0%, var(--ig-blue-soft) 100%);
border: 1.5px solid var(--ig-blue-border);
border-radius: var(--ig-r-2xl);
padding: 48px 44px;
text-align: center;
box-shadow: 0 12px 40px rgba(45, 123, 201, 0.10);
position: relative;
}
.intelligents-guarantee-card .guarantee-badge {
font-size: 2.4rem;
margin-bottom: 14px;
line-height: 1;
}
.intelligents-guarantee-card .pill-badge { margin-bottom: 16px; }
.intelligents-guarantee-card h2 {
font-size: 2rem;
font-weight: 800;
color: var(--ig-text);
margin: 0 0 18px;
letter-spacing: -.02em;
}
.intelligents-guarantee-card p {
color: var(--ig-text-secondary);
font-size: 1rem;
line-height: 1.75;
margin: 0 0 16px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.guarantee-reasonwhy {
font-size: .95rem;
color: var(--ig-text-muted);
}
.guarantee-reasonwhy em { font-style: italic; }
.guarantee-signature {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--ig-blue-border);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.guarantee-signature-name {
font-size: 1.15rem;
font-weight: 700;
color: var(--ig-text);
letter-spacing: -.01em;
}
.guarantee-signature-title {
font-size: .85rem;
color: var(--ig-text-muted);
font-weight: 500;
}
@media (max-width: 600px) {
.intelligents-guarantee-card { padding: 36px 24px; }
.intelligents-guarantee-card h2 { font-size: 1.65rem; }
}
/* ---------- 8. Demo card (Hear it work) ---------- */
.tree-demo-card {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
overflow: hidden;
box-shadow: var(--ig-shadow-card);
}
.tree-demo-prompts { padding: 36px 32px; }
.tree-demo-prompts h3 {
font-size: 1rem;
font-weight: 700;
color: var(--ig-text);
margin: 0 0 18px;
letter-spacing: -.01em;
}
.tree-demo-prompts ul {
list-style: none;
margin: 0;
padding: 0;
}
.tree-demo-prompts li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
font-size: .92rem;
color: var(--ig-text-secondary);
line-height: 1.55;
flex-wrap: wrap;
}
.tree-demo-prompts li:last-child { margin-bottom: 0; }
.tree-demo-prompts li em {
font-style: italic;
color: var(--ig-text);
}
.demo-prompt-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.demo-prompt-tag {
display: inline-block;
background: var(--ig-blue-soft);
color: var(--ig-blue-deep);
font-size: .72rem;
font-weight: 600;
padding: 2px 10px;
border-radius: var(--ig-r-pill);
text-transform: uppercase;
letter-spacing: .04em;
}
.tree-demo-call {
background: linear-gradient(135deg, var(--ig-blue-deep) 0%, var(--ig-blue) 100%);
color: #fff;
padding: 36px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.tree-demo-phone {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
font-weight: 800;
margin-bottom: 14px;
transition: transform .2s ease;
}
.tree-demo-phone:hover {
color: #fff;
transform: translateY(-2px);
}
.tree-demo-phone-icon {
font-size: 1.4rem;
display: inline-flex;
width: 44px; height: 44px;
align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.18);
border-radius: 50%;
animation: ring 4s ease-in-out infinite;
}
.tree-demo-phone-number {
font-size: 1.6rem;
letter-spacing: -.01em;
}
.tree-demo-meta {
color: rgba(255, 255, 255, 0.85);
font-size: .88rem;
margin: 0;
line-height: 1.5;
}
@media (max-width: 760px) {
.tree-demo-card { grid-template-columns: 1fr; }
.tree-demo-prompts { padding: 28px 24px; }
.tree-demo-call { padding: 32px 24px; }
.tree-demo-phone-number { font-size: 1.4rem; }
}
/* ---------- 9. CTA ladder (final section) ---------- */
.intelligents-cta-ladder {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1080px;
margin: 0 auto 40px;
}
.cta-ladder-rung {
display: flex;
flex-direction: column;
background: var(--ig-bg-card);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-2xl);
padding: 32px 28px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cta-ladder-rung:hover {
transform: translateY(-3px);
box-shadow: var(--ig-shadow-card);
}
.cta-ladder-rung--primary {
background: linear-gradient(180deg, #fff 0%, var(--ig-blue-soft) 100%);
border-color: var(--ig-blue-border);
box-shadow: 0 10px 30px rgba(45, 123, 201, 0.12);
}
.cta-ladder-rung--primary:hover {
box-shadow: 0 14px 36px rgba(45, 123, 201, 0.18);
}
.cta-ladder-marker {
font-size: .72rem;
font-weight: 700;
color: var(--ig-blue-deep);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 6px;
}
.cta-ladder-tag {
display: inline-block;
font-size: .72rem;
font-weight: 600;
color: var(--ig-text-muted);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 16px;
}
.cta-ladder-rung h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--ig-text);
margin: 0 0 12px;
letter-spacing: -.01em;
}
.cta-ladder-rung p {
color: var(--ig-text-muted);
font-size: .92rem;
line-height: 1.6;
margin: 0 0 22px;
flex-grow: 1;
}
.cta-ladder-rung .btn-primary,
.cta-ladder-rung .btn-secondary {
width: 100%;
justify-content: center;
}
.tree-final-cta-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 14px;
color: var(--ig-text-muted);
font-size: .9rem;
font-weight: 500;
text-align: center;
}
.tree-final-cta-trust span[aria-hidden="true"] { color: var(--ig-text-dim); }
@media (max-width: 900px) {
.intelligents-cta-ladder { grid-template-columns: 1fr; }
}
/* ---------- 10. Calculator page (page-missed-call-audit.php) ---------- */
.calculator-hero { padding-bottom: 32px; }
.calculator-section {
padding: 24px 24px 80px;
max-width: var(--ig-max-w-narrow);
margin: 0 auto;
}
.calculator-back-cta {
max-width: 720px;
margin: 32px auto 0;
padding: 24px 28px;
background: var(--ig-bg-elevated);
border: 1px solid var(--ig-border);
border-radius: var(--ig-r-xl);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.calculator-back-cta p {
margin: 0;
color: var(--ig-text-secondary);
font-size: .95rem;
line-height: 1.55;
}
.calculator-back-cta .calc-back-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.calculator-back-cta { flex-direction: column; align-items: stretch; text-align: center; }
.calculator-back-cta .calc-back-actions { justify-content: center; }
}