:root {
/*=====================================================
SEMANTIC COLOR TOKENS — naam ke hisaab se (source of truth)
=====================================================*/
/* Background */
--color-bg-primary: #f8f6f2; /* Warm Off White */
--color-bg-primary-rgb: 248, 246, 242;
/* Secondary Background */
--color-bg-secondary: #eae3d9a3; /* Soft Cream */
--color-bg-secondary-rgb: 250, 248, 245;
/* Primary Text */
--color-text-primary: #1e1e1e; /* Dark Charcoal */
--color-text-primary-rgb: 30, 30, 30;
/* Secondary Text */
--color-text-secondary: #4b5563; /* Medium Charcoal */
--color-text-secondary-rgb: 75, 85, 99;
/* Card Background */
--color-card-bg: #ffffff; /* White */
--color-card-bg-rgb: 255, 255, 255;
/* Borders */
--color-border: #e8e5df; /* Soft Gray */
--color-border-rgb: 232, 229, 223;
/* Accent */
--color-accent: #d97706; /* Burnt Orange */
--color-accent-rgb: 217, 119, 6;
/* Accent Hover */
--color-accent-hover: #c96b1a; /* Deep Orange */
--color-accent-hover-rgb: 201, 107, 26;
/* Success / Highlight (very limited use) */
--color-highlight: #2e7d32; /* Soft Green */
--color-highlight-rgb: 46, 125, 50;
/*=====================================================
LEGACY ALIASES — poori file inhi purane naamon se chalti hai.
Inhe mat hataana; ye sirf upar wale naye naamon ki taraf point
karte hain, taaki kahin bhi color break na ho.
=====================================================*/
/* Brand — primary (dark charcoal panels) */
--color-primary: var(--color-text-primary);
--color-primary-rgb: var(--color-text-primary-rgb);
--color-primary-dark: #141414;
--color-primary-darker: #171717;
--color-landscape-bg: #181818;
--color-navy-deep: #121212;
--color-navy-alt: #1a1a1a;
--color-navy-slide: #1c1c1c;
/* Brand — secondary (accent orange) */
--color-secondary: var(--color-accent);
--color-secondary-rgb: var(--color-accent-rgb);
--color-secondary-light: var(--color-accent);
--color-secondary-alt: #e3922f;
--color-secondary-hover: var(--color-accent-hover);
/* Status colors */
--color-success: var(--color-highlight);
--color-success-rgb: var(--color-highlight-rgb);
--color-success-alt: #4caf50;
--color-danger: #dc3545;
--color-danger-hover: #bb2d3b;
/* Neutrals */
--color-white: var(--color-card-bg);
--color-white-rgb: var(--color-card-bg-rgb);
--color-black-rgb: 0, 0, 0;
--color-bg-light: var(--color-bg-primary);
--color-bg-lighter: var(--color-bg-secondary);
--color-border-light: var(--color-border);
--color-border-lighter: #efede8;
--color-chip-bg: var(--color-bg-secondary);
--color-badge-bg: #fdf0e4;
--color-card-border: var(--color-border);
--color-text-muted: var(--color-text-secondary);
--color-text-muted-2: #6b7280;
--color-text-muted-3: #9ca3af;
--color-text-gray: var(--color-text-secondary);
/* Misc accent tints */
--color-accent-blue-rgb: var(--color-accent-rgb);
--color-tag-bg-rgb: 20, 20, 20;
--color-overlay-1-rgb: 18, 18, 18;
--color-overlay-2-rgb: 24, 24, 24;
--color-overlay-3-rgb: 21, 21, 21;
/* Typography */
--font-heading: "Playfair Display", serif;
--font-body: "Inter", sans-serif;
/*=====================================================
BUTTON TOKENS — do hi button type: Primary aur Secondary
=====================================================*/
--btn-radius: 40px;
--btn-padding-y: 15px;
--btn-padding-x: 28px;
--btn-font-size: 15px;
--btn-font-weight: 700;
--btn-gap: 10px;
--btn-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
/*=====================================================
THEME TOKENS (Dynamic Theme Variables)
In variables ko hi poori website me use karo.
=====================================================*/
/* Active Theme (Default = Light) */
--theme-bg: var(--color-bg-primary);
--theme-bg-secondary: var(--color-bg-secondary);
--theme-surface: var(--color-card-bg);
--theme-surface-secondary: #fcfbf8;
--theme-heading: var(--color-text-primary);
--theme-text: var(--color-text-secondary);
--theme-border: var(--color-border);
--theme-accent: var(--color-accent);
--theme-accent-hover: var(--color-accent-hover);
--theme-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
--theme-overlay: rgba(255, 255, 255, 0.65);
}
/*=========================================================
HERO SECTION — Bootstrap complement styles only
=========================================================*/
/* Global Font Family */
/*=========================================================
BUTTONS — Primary + Secondary (do hi type, poori site me)
Purani classes yahin alias hain, HTML kahin badalne ki
zaroorat nahi. Naya button banate waqt sirf class="btn-primary"
ya class="btn-secondary" use karo.
=========================================================*/
/*=====================================================
LIGHT THEME
=====================================================*/
.theme-light {
--theme-bg: var(--color-bg-primary);
--theme-bg-secondary: var(--color-bg-secondary);
--theme-surface: var(--color-card-bg);
--theme-surface-secondary: #fcfbf8;
--theme-heading: var(--color-text-primary);
--theme-text: var(--color-text-secondary);
--theme-border: var(--color-border);
--theme-accent: var(--color-accent);
--theme-accent-hover: var(--color-accent-hover);
--theme-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
--theme-overlay: rgba(255, 255, 255, 0.65);
}
/*=====================================================
DARK THEME
=====================================================*/
.theme-dark {
--theme-bg: #111111;
--theme-bg-secondary: #181818;
--theme-surface: #1b1b1b;
--theme-surface-secondary: #242424;
--theme-heading: #ffffff;
--theme-text: rgba(255, 255, 255, 0.78);
--theme-border: rgba(255, 255, 255, 0.1);
--theme-accent: var(--color-accent);
--theme-accent-hover: var(--color-accent-hover);
--theme-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
--theme-overlay: rgba(0, 0, 0, 0.45);
}
.btn-primary,
.hero-alt-cta,
.case-btn,
.contact-submit,
.testimonials-cta,
.header-btn,
.mobile-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
background: var(--color-accent);
color: var(--color-card-bg) !important;
text-decoration: none;
font-family: "Cormorant Garamond", sans-serif;
font-weight: var(--btn-font-weight);
font-size: var(--btn-font-size);
padding: var(--btn-padding-y) var(--btn-padding-x);
border-radius: var(--btn-radius);
border: none;
cursor: pointer;
/* box-shadow:0 16px 36px rgba(var(--color-accent-rgb),.28); */
transition: var(--btn-transition);
}
.btn-primary:hover,
.hero-alt-cta:hover,
.case-btn:hover,
.contact-submit:hover,
.testimonials-cta:hover,
.header-btn:hover,
.mobile-cta:hover {
color: var(--color-card-bg) !important;
background: var(--color-accent-hover);
transform: translateY(-3px);
/* box-shadow:0 20px 44px rgba(var(--color-accent-rgb),.38); */
}
.btn-primary i,
.hero-alt-cta i,
.case-btn i,
.contact-submit i,
.testimonials-cta i {
font-size: 13px;
transition: transform 0.3s ease;
}
.btn-primary:hover i,
.hero-alt-cta:hover i,
.case-btn:hover i,
.contact-submit:hover i,
.testimonials-cta:hover i {
transform: translateX(3px);
}
/*---------------------------------------------------------
SECONDARY — outline style
---------------------------------------------------------*/
.btn-secondary,
.faq-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
background: transparent;
color: var(--color-text-primary);
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: var(--btn-font-weight);
font-size: 14.5px;
padding: 13px 22px;
border-radius: var(--btn-radius);
border: 1.5px solid var(--color-text-primary);
cursor: pointer;
transition: 0.3s;
}
.btn-secondary:hover,
.faq-cta:hover {
background: var(--color-text-primary);
color: var(--color-card-bg) !important;
}
.btn-secondary i,
.faq-cta i {
font-size: 12px;
transition: transform 0.3s ease;
}
.btn-secondary:hover i,
.faq-cta:hover i {
transform: translateX(3px);
}
/*=========================================================
HERO ALT — CTA row (button + text link side by side)
=========================================================*/
.hero-alt-cta-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 28px;
margin-top: 6px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-card-bg);
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 15px;
text-decoration: none;
border-bottom:1.5px solid rgba(var(--color-card-bg-rgb),.35);
padding-bottom: 2px;
transition: 0.3s;
}
.text-link i {
font-size: 12px;
transition: transform 0.3s ease;
}
.text-link:hover {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.text-link:hover i {
transform: translateX(4px);
}
@media (max-width: 576px) {
.hero-alt-cta-row {
flex-direction: column;
gap: 18px;
}
}
body {
font-family: "Inter", sans-serif !important;
}
h1 {
font-family: var(--font-heading);
color: var(--color-text-primary);
font-weight: 700;
font-size: clamp(28px, 3.2vw, 64px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--theme-heading);
margin-bottom: 22px;
}
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--color-text-primary);
font-weight: 600;
font-size: clamp(28px, 3.2vw, 54px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--theme-heading);
margin-bottom: 22px;
}
em{
font-family: var(--font-heading);
color: var(--color-accent);
}
p,
a,
span,
button,
input,
textarea {
font-family: "Inter", sans-serif !important;
color: var(--theme-text);
line-height: 1.85;
}
li{
line-height: 1.55;
}
.btn,
button {
font-family: "Manrope", sans-serif !important;
font-weight: 600;
}
/*=========================================================
HERO — ALT (Cinematic / "Live Results" variant)
New, additional hero. Does not touch .hero-section.
=========================================================*/
.hero-alt-section {
position: relative;
overflow: hidden;
background: var(--color-primary-darker);
padding: 0 0 100px;
font-family: "Manrope", sans-serif;
isolation: isolate;
z-index: 1;
}
/* ---- background photo + dark overlay (swap the image URL for the real one) ---- */
.hero-alt-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-alt-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-alt-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(var(--color-overlay-1-rgb), 0.88) 59%,
rgba(var(--color-overlay-2-rgb), 0.55) 100%,
rgba(var(--color-overlay-3-rgb), 0.72) 100%,
rgba(var(--color-overlay-1-rgb), 0.95) 100%
),
radial-gradient(
ellipse 800px 500px at 50% 8%,
rgba(var(--color-secondary-rgb), 0.14),
transparent 88%
);
}
.hero-alt-section::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-alt-section .container {
position: relative;
z-index: 2;
}
p.hero-subtext {
color: var(--color-white);
}
/*=========================================================
HEADLINE BLOCK
=========================================================*/
.hero-alt-intro {
text-align: center;
max-width: 780px;
margin: 56px auto 0;
padding: 0 16px;
}
.hero-alt-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary-light);
padding: 7px 16px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.14);
border: 1px solid rgba(var(--color-secondary-rgb), 0.32);
margin-bottom: 40px;
backdrop-filter: blur(6px);
}
.hero-alt-eyebrow i {
font-size: 11px;
}
.hero-alt-headline {
color: var(--color-white);
font-weight: 700;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.14;
letter-spacing: -0.02em;
margin: 0 0 22px;
text-shadow: 0 4px 30px rgba(var(--color-black-rgb), 0.35);
}
.hero-alt-headline em {
font-family: "Fraunces", serif;
font-style: italic;
font-weight: 600;
color: var(--color-secondary);
}
.hero-alt-subtext {
color: rgba(var(--color-white-rgb), 0.68);
font-size: 17px;
line-height: 1.7;
max-width: 560px;
margin: 40px auto 20px auto;
}
.hero-alt-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-secondary);
color: var(--color-white);
text-decoration: none;
font-weight: 700;
font-size: 15px;
padding: 15px 28px;
border-radius: 40px;
box-shadow: 0 18px 40px rgba(var(--color-secondary-rgb), 0.32);
transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-alt-cta:hover {
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 22px 50px rgba(var(--color-secondary-rgb), 0.44);
}
.hero-alt-cta i {
font-size: 13px;
transition: transform 0.3s ease;
}
.hero-alt-cta:hover i {
transform: translateX(3px);
}
/*=========================================================
SIGNATURE — sliding results carousel (coverflow)
Center slide = full "card" size. Side slides = smaller.
Swap the ![]()
src on each .result-slide for a real
client screenshot; the list can hold any number of slides.
=========================================================*/
.hero-alt-stage {
margin: 20px auto 0;
max-width: 1100px;
}
.result-carousel {
position: relative;
height: 420px;
}
.result-slide {
position: absolute;
top: 50%;
left: 50%;
width: 560px;
max-width: 82vw;
border-radius: 20px;
overflow: hidden;
background: var(--color-navy-slide);
border: 1px solid rgba(var(--color-white-rgb), 0.14);
box-shadow: 0 40px 90px rgba(var(--color-black-rgb), 0.55);
cursor: pointer;
transition:
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.6s ease,
filter 0.6s ease;
will-change: transform;
}
.result-slide img {
display: block;
width: 100%;
height: 380px;
object-fit: cover;
}
.result-slide-tag {
position: absolute;
top: 14px;
left: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(var(--color-tag-bg-rgb), 0.75);
backdrop-filter: blur(8px);
border: 1px solid rgba(var(--color-white-rgb), 0.14);
color: var(--color-white);
font-size: 12.5px;
font-weight: 700;
padding: 6px 12px;
border-radius: 20px;
display: none;
}
.result-slide-tag i {
color: var(--color-secondary);
font-size: 11px;
}
.result-slide-tag .verified-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-success);
color: var(--color-navy-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
margin-left: 2px;
}
.result-slide.is-active {
z-index: 5;
}
/* dot navigation */
.carousel-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 28px;
}
.carousel-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(var(--color-white-rgb), 0.25);
padding: 0;
cursor: pointer;
transition: 0.3s;
}
.carousel-dots button.is-active {
background: var(--color-secondary);
width: 22px;
border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
.result-slide {
transition: none;
}
}
/*=========================================================
TRUST ROW + BLURB
=========================================================*/
.hero-alt-footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
max-width: 1040px;
margin: 70px auto 0;
padding: 28px 20px 0;
border-top: 1px solid rgba(var(--color-white-rgb), 0.1);
}
.hero-alt-trust-label {
color: rgba(var(--color-white-rgb), 0.5);
font-size: 13px;
font-weight: 600;
margin-bottom: 14px;
}
.hero-alt-trust-icons {
display: flex;
align-items: center;
gap: 14px;
}
.hero-alt-trust-icons span {
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(var(--color-white-rgb), 0.06);
border: 1px solid rgba(var(--color-white-rgb), 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(var(--color-white-rgb), 0.6);
font-size: 15px;
transition: 0.3s;
}
.hero-alt-trust-icons span:hover {
color: var(--color-secondary);
border-color: rgba(var(--color-secondary-rgb), 0.4);
transform: translateY(-3px);
}
.hero-alt-blurb {
max-width: 380px;
color: rgba(var(--color-white-rgb), 0.6);
font-size: 14.5px;
line-height: 1.8;
}
.hero-alt-blurb a {
color: var(--color-secondary-light);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.hero-alt-blurb a:hover {
text-decoration: underline;
}
@media (max-width: 767px) {
.hero-alt-footer {
flex-direction: column;
gap: 28px;
}
.hero-alt-blurb {
max-width: 100%;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 767px) {
.hero-alt-section {
padding-bottom: 80px;
}
.hero-alt-intro {
margin-top: 36px;
}
.hero-alt-stage {
margin-top: 44px;
}
.result-carousel {
height: 300px;
}
.result-slide {
width: 280px;
}
.result-slide img {
height: 220px;
}
}
/*=========================================================
SECTION 2 — "The Way Customers Choose Businesses Is Changing"
Left ~45% text / Right ~55% before-after infographic
=========================================================*/
.change-section {
/* background: var(--theme-bg); */
background: var(--color-bg-secondary);
padding: 120px 0;
overflow: hidden;
}
.change-grid {
display: grid;
grid-template-columns: 0.85fr 1fr; /* ~45% / 55% */
gap: 64px;
align-items: center;
}
/*---------------------------------------------------------
LEFT — text
---------------------------------------------------------*/
.change-text {
max-width: 520px;
}
/* .change-heading{
font-family:'Manrope', sans-serif;
font-weight:700;
font-size:clamp(28px,3.2vw,40px);
line-height:1.22;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin-bottom:22px;
} */
/* .change-body p{
color:var(--color-text-secondary);
font-size:16px;
line-height:1.85;
margin-bottom:18px;
}
.change-body p:last-child{
margin-bottom:0;
} */
.recommend-closing {
margin: 28px 0 0;
padding-top: 24px;
/* border-top:1px solid var(--color-border); */
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--theme-heading);
}
/*---------------------------------------------------------
RIGHT — infographic
---------------------------------------------------------*/
.change-visual {
position: relative;
}
.change-visual-img {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
border: 1px solid var(--color-border);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
object-fit: cover;
}
@media (max-width: 991px) {
.change-visual-img {
border-radius: 18px;
}
}
.change-infographic {
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: 24px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 0;
}
/* panels */
.ci-panel {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ci-panel.is-visible {
opacity: 1;
transform: translateY(0);
}
.ci-label {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-secondary);
background: var(--color-card-bg);
border: 1px solid var(--color-border);
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 18px;
}
.ci-label-accent {
color: var(--color-accent);
background: rgba(var(--color-accent-rgb), 0.1);
border-color: rgba(var(--color-accent-rgb), 0.3);
}
.ci-flow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.ci-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 76px;
}
.ci-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
font-size: 18px;
transition: 0.3s;
}
.ci-step-text {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary);
text-align: center;
}
.ci-arrow {
color: var(--color-border);
font-size: 13px;
flex-shrink: 0;
}
/* accent (Now) variant */
.ci-icon-accent {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-card-bg);
box-shadow: 0 10px 24px rgba(var(--color-accent-rgb), 0.28);
}
.ci-step-accent .ci-step-text {
color: var(--color-text-primary);
font-weight: 700;
}
.ci-arrow-accent {
color: var(--color-accent);
}
/* connector between panels */
.ci-divider {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 22px 0;
}
.ci-divider-line {
width: 1.5px;
height: 22px;
background: var(--color-border);
}
.ci-divider-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
font-size: 11px;
}
/* stat chip */
.ci-stat-chip {
display: flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding: 14px 18px;
border-radius: 14px;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.ci-stat-chip.is-visible {
opacity: 1;
transform: translateY(0);
}
.ci-stat-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
flex-shrink: 0;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.change-section {
padding: 90px 0;
}
.change-grid {
grid-template-columns: 1fr;
gap: 44px;
}
.change-text {
max-width: 100%;
}
.change-infographic {
padding: 28px;
}
}
@media (max-width: 576px) {
.change-section {
padding: 70px 0;
}
.change-infographic {
padding: 22px;
}
.ci-flow {
gap: 8px;
}
.ci-step {
min-width: 64px;
}
.ci-icon {
width: 44px;
height: 44px;
font-size: 16px;
}
.ci-arrow {
display: none;
} /* mobile pe arrows clutter karte hain, wrap ke saath */
.change-closing {
font-size: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.ci-panel,
.ci-stat-chip {
opacity: 1 !important;
transform: none !important;
transition: none;
}
}
/*=========================================================
SECTION 3 — "When Customers Ask AI, Will It Recommend Your Business?"
Image Left / Text Right — mirror layout of Section 2, distinct styling
=========================================================*/
.recommend-section {
background: var(--color-bg-primary);
padding: 120px 0;
overflow: hidden;
}
.recommend-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 50/50, mirror of change-grid */
gap: 64px;
align-items: center;
}
/*---------------------------------------------------------
LEFT — image
---------------------------------------------------------*/
.recommend-visual {
position: relative;
}
.recommend-visual-img {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
object-fit: cover;
}
/*---------------------------------------------------------
RIGHT — text
---------------------------------------------------------*/
.recommend-text {
max-width: 6650px;
}
.recommend-heading {
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: clamp(28px, 3.2vw, 54px);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-text-primary);
margin-bottom: 22px;
}
/* .recommend-body p{
color:var(--color-text-secondary);
font-size:16px;
line-height:1.85;
margin-bottom:18px;
} */
/* .recommend-body p:last-child{
margin-bottom:0;
} */
/* Distinct from Section 2's border-top style: here it's a highlighted box */
.recommend-closing-box {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
padding: 22px 24px;
border-radius: 16px;
background: rgba(var(--color-accent-rgb), 0.05);
border: 1px solid rgba(var(--color-accent-rgb), 0.18);
border-left: 4px solid var(--color-accent);
box-shadow:
0 8px 30px rgba(var(--color-accent-rgb), 0.08),
inset 0 1px 0 rgba(255,255,255,0.05);
transition: all .3s ease;
}
.recommend-closing-box:hover{
transform: translateY(-2px);
box-shadow:
0 14px 40px rgba(var(--color-accent-rgb), 0.12);
}
.recommend-closing-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-card-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.recommend-closing {
margin: 0;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: clamp(18px, 2vw, 18px);
line-height: 1.6;
letter-spacing: -0.01em;
color: var(--theme-heading);
padding-top: 2px;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.recommend-section {
padding: 90px 0;
}
.recommend-grid {
grid-template-columns: 1fr;
gap: 40px;
}
/* Image left/right dono mobile pe hamesha upar aayegi (natural reading order) */
.recommend-visual {
order: 2;
}
.recommend-text {
order: 1;
max-width: 100%;
}
}
@media (max-width: 576px) {
.recommend-section {
padding: 70px 0;
}
.recommend-visual-img {
border-radius: 18px;
}
.recommend-closing-box {
padding: 18px 20px;
gap: 12px;
}
.recommend-closing {
font-size: 18px;
}
}
.recommend-heading-accent {
font-style: normal;
color: var(--color-accent);
}
/*=========================================================
SECTION 4 — "Your Marketing Isn't Broken. It's Disconnected."
Text Left ~45% / Infographic Right ~55%
Prefix: cw- (Connected Web) — unique, no clash with other sections
=========================================================*/
.cw-section {
background: var(--color-bg-secondary);
padding: 120px 0;
overflow: hidden;
}
.cw-grid {
display: grid;
grid-template-columns: 0.75fr 1fr;
gap: 64px;
align-items: center;
}
/*---------------------------------------------------------
LEFT — text
---------------------------------------------------------*/
.cw-text {
max-width: 520px;
}
/* .cw-heading{
font-family:'Manrope', sans-serif;
font-weight:800;
font-size:clamp(28px,3.2vw,40px);
line-height:1.22;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin-bottom:22px;
} */
.cw-body p {
color: var(--color-text-secondary);
font-size: 16px;
line-height: 1.85;
margin-bottom: 16px;
}
.cw-body p:last-child {
margin-bottom: 0;
}
.cw-closing {
margin: 28px 0 0;
padding-top: 24px;
border-top: 1px solid var(--color-border);
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
/*---------------------------------------------------------
RIGHT — image
---------------------------------------------------------*/
.cw-visual {
position: relative;
}
.cw-visual-img {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
object-fit: cover;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.cw-section {
padding: 90px 0;
}
.cw-grid {
grid-template-columns: 1fr;
gap: 44px;
}
.cw-text {
max-width: 100%;
}
.cw-infographic {
padding: 28px;
min-height: 420px;
}
.cw-lines {
inset: 28px;
width: calc(100% - 56px);
height: calc(100% - 56px);
}
.node-title {
order: 2;
}
}
@media (max-width: 576px) {
.cw-section {
padding: 70px 0;
}
.cw-infographic {
padding: 20px;
min-height: 380px;
}
.cw-channels {
gap: 14px;
}
.cw-node {
padding: 10px 12px;
}
.cw-node-text {
font-size: 11px;
}
.cw-node-icon {
width: 28px;
height: 28px;
font-size: 12px;
}
.cw-center-card {
width: 104px;
height: 104px;
}
.cw-center-ring {
width: 136px;
height: 136px;
}
.cw-center-label {
font-size: 10.5px;
}
.cw-closing {
font-size: 20px;
}
/* mobile pe scattered offsets clutter karte hain, clean grid rakho */
.cw-node[data-node] {
margin-top: 0 !important;
justify-self: stretch !important;
}
.node-title {
order: 2;
}
}
/*=========================================================
SECTION 2 — Proof Before Promises
=========================================================*/
/* .proof-promises-section{
background:var(--color-white);
padding:100px 0;
}
.logo-strip-item{
opacity:.85;
transition:.3s;
}
.logo-strip-item:hover{
opacity:1;
transform:translateY(-2px);
}
.logo-strip-icon{
width:200px;
height:50px;
object-fit:contain;
}
.logo-strip-label{
color:var(--color-primary);
font-size:15px;
} */
/*=========================================================
SECTION 3 — Real AI Visibility Proof Wall
=========================================================*/
/* .proof-wall-section{
background:var(--color-bg-light);
padding:100px 0;
}
.wall-card{
background:var(--color-white);
border:1px solid rgba(var(--color-primary-rgb),.08);
box-shadow:0 10px 30px rgba(var(--color-primary-rgb),.05);
transition:.35s;
}
.wall-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(var(--color-primary-rgb),.1);
}
.wall-card-thumb{
aspect-ratio:4/3;
background:var(--color-white);
}
.wall-card-icon{
position:absolute;
bottom:10px;
right:10px;
width:34px;
height:34px;
border-radius:50%;
background:var(--color-secondary);
color:var(--color-white);
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
box-shadow:0 6px 16px rgba(var(--color-secondary-rgb),.35);
}
.wall-card-body h6{
color:var(--color-primary);
} */
/*=========================================================
SECTION 4 — Watch The Proof Live (Video Case Study)
=========================================================*/
.video-case-section {
background: var(--color-bg-secondary--);
}
.video-thumb-wrapper {
border: 1px solid rgba(var(--color-white-rgb), 0.1);
box-shadow: 0 20px 60px rgba(var(--color-black-rgb), 0.3);
}
.video-thumb-wrapper::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(var(--color-primary-rgb), 0) 40%,
rgba(var(--color-primary-rgb), 0.7) 100%
);
}
.video-play-btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--color-secondary);
color: var(--color-white);
padding: 14px 26px;
border-radius: 50px;
z-index: 2;
box-shadow: 0 15px 40px rgba(var(--color-secondary-rgb), 0.4);
transition: 0.3s;
text-decoration: none;
}
.video-play-btn:hover {
color: var(--color-white);
transform: translate(-50%, -50%) scale(1.05);
}
.video-play-btn i {
font-size: 20px;
}
.video-case-section {
background: var(--color-bg-secondary);
padding: 90px 0;
}
.video-wrapper {
position: relative;
max-width: 1100px;
margin: auto;
border-radius: 24px;
overflow: hidden;
background: var(--color-navy-alt);
padding: 16px;
}
.proof-video {
width: 100%;
display: block;
border-radius: 18px;
}
.custom-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95px;
height: 95px;
border-radius: 50%;
border: none;
background: var(--color-secondary);
color: var(--color-white);
font-size: 34px;
cursor: pointer;
z-index: 10;
transition: 0.3s;
box-shadow: 0 20px 40px rgba(var(--color-black-rgb), 0.25);
}
.custom-play-btn:hover {
transform: translate(-50%, -50%) scale(1.08);
}
.video-box {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.proof-video {
width: 100%;
display: block;
border-radius: 20px;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
border: none;
border-radius: 50%;
background: var(--color-secondary);
color: var(--color-white);
font-size: 34px;
cursor: pointer;
z-index: 10;
transition: 0.3s;
}
.play-overlay:hover {
transform: translate(-50%, -50%) scale(1.08);
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
border-radius: 50%;
border: none;
background: var(--color-secondary);
color: var(--color-white);
font-size: 34px;
transition: 0.3s;
}
.play-btn:hover {
transform: translate(-50%, -50%) scale(1.08);
}
/*=========================================================
SECTION 5 — Brands We Made Visible (Case Studies)
=========================================================*/
section.real-business-sec.theme-light
{
padding: 120px 0;
}
.geo-case-card {
background: var(--color-white);
border: 1px solid var(--color-card-border);
border-radius: 24px;
padding: 30px;
height: 100%;
transition: 0.35s;
box-shadow:
rgba(var(--color-black-rgb), 0.12) 0px 1px 3px,
rgba(var(--color-black-rgb), 0.24) 0px 1px 2px;
}
.geo-case-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 70px rgba(var(--color-primary-rgb), 0.08);
}
.case-top {
display: flex;
align-items: center;
gap: 18px;
}
.case-logo {
width: fit-content;
height: 70px;
object-fit: contain;
border-radius: 16px;
background: var(--color-white);
border: 1px solid var(--color-border-lighter);
padding: 10px;
}
.industry-badge {
display: inline-block;
background: var(--color-badge-bg);
color: var(--color-primary);
padding: 6px 14px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
}
.case-section {
margin: 22px 0;
}
.case-section h6 {
color: var(--color-secondary);
font-size: 13px;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 700;
}
.case-studies-section {
background: var(--color-bg-secondary);
}
.case-section p {
color: var(--color-text-gray);
line-height: 1.8;
}
.platform-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 24px 0;
}
.platform-chip {
padding: 10px 10px;
background: var(--color-chip-bg);
border-radius: 30px;
font-size: 14px;
font-weight: 600;
}
.before-after {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-top: 25px;
}
.before-after h6 {
color: var(--color-secondary);
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
}
.before-after ul {
margin: 0;
padding-left: 0px;
}
.case-btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 30px;
padding: 14px 24px;
border-radius: 40px;
background: var(--color-secondary);
color: var(--color-white);
text-decoration: none;
font-weight: 600;
}
.case-btn:hover {
color: var(--color-white);
background: var(--color-secondary-hover);
}
@media (max-width: 991px) {
.case-top {
display: block;
align-items: center;
gap: 18px;
}
}
/*=========================================================
SECTION 6 — AI Search Landscape (hub diagram)
=========================================================*/
/*==================================================
AI LANDSCAPE
==================================================*/
/*==================================================
AI SEARCH LANDSCAPE — SECTION
==================================================*/
/*==================================================
AI SEARCH LANDSCAPE — SECTION
==================================================*/
.landscape-section {
position: relative;
overflow: hidden;
background: var(--theme-bg);
/* background: var(--color-bg-secondary); */
padding: 120px 0 120px;
isolation: isolate;
font-family: "Manrope", sans-serif;
}
/* subtle grain so the deep navy never looks flat/plastic */
.landscape-section::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.035;
mix-blend-mode: overlay;
pointer-events: none;
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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.landscape-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
circle at 20% 20%,
rgba(var(--color-secondary-rgb), 0.1),
transparent 38%
),
radial-gradient(
circle at 82% 78%,
rgba(var(--color-white-rgb), 0.06),
transparent 42%
);
}
/* floating blurred orbs — ambient depth, kept quiet */
.landscape-section .glow-orb {
position: absolute;
z-index: 0;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
opacity: 0.55;
will-change: transform;
}
.landscape-section .glow-orb--a {
width: 380px;
height: 380px;
left: -120px;
top: 8%;
background: radial-gradient(
circle,
rgba(var(--color-secondary-rgb), 0.35),
transparent 70%
);
animation: orbDrift 16s ease-in-out infinite;
}
.landscape-section .glow-orb--b {
width: 460px;
height: 460px;
right: -160px;
bottom: 0%;
background: radial-gradient(
circle,
rgba(var(--color-accent-blue-rgb), 0.45),
transparent 70%
);
animation: orbDrift 20s ease-in-out infinite reverse;
}
@keyframes orbDrift {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(30px, -25px) scale(1.08);
}
}
.landscape-section .container {
position: relative;
z-index: 2;
}
/*==================================================
HEADER
==================================================*/
/* .section-eyebrow-dark {
display: inline-flex !important;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary-alt);
padding: 7px 16px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.1);
border: 1px solid rgba(var(--color-secondary-rgb), 0.28);
} */
.section-heading {
font-weight: 600;
font-size: clamp(30px, 4vw, 46px);
letter-spacing: -0.02em;
line-height: 1.15;
}
.section-subheading {
max-width: 640px;
font-size: 17px;
line-height: 1.8;
color:rgba(var(--color-white-rgb),.55);
}
.section-header.mb-5 {
margin-bottom: 80px !important;
}
/*==================================================
NETWORK WRAPPER
==================================================*/
.ai-network-wrapper {
position: relative;
max-width: 1150px;
height: 520px;
margin: auto;
}
/*==================================================
SVG CONNECTIONS
==================================================*/
.network-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
/* overflow:visible; */
}
.network-line {
stroke: url(#lineGradient);
stroke-width: 1.6;
stroke-linecap: round;
fill: none;
opacity: 0.7;
}
.network-lines .flow-particle {
filter: drop-shadow(0 0 6px rgba(var(--color-secondary-rgb), 0.9))
drop-shadow(0 0 12px rgba(var(--color-secondary-rgb), 0.5));
}
/*==================================================
CENTER NODE
==================================================*/
.network-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 20;
}
.center-float {
position: relative;
animation: centerFloat 6s ease-in-out infinite;
}
.center-ring {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 250px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
animation: ringRotate 22s linear infinite;
}
.center-ring::before {
content: "";
position: absolute;
inset: 22px;
border-radius: 50%;
border: 1px dashed rgba(var(--color-white-rgb), 0.14);
}
.center-ring::after {
content: "";
position: absolute;
inset: -30px;
border-radius: 50%;
border: 1px solid rgba(var(--color-white-rgb), 0.06);
}
.center-card {
position: relative;
width: 190px;
height: 190px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 50%;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
background:
radial-gradient(
circle at 35% 25%,
rgba(var(--color-white-rgb), 0.14),
rgba(var(--color-white-rgb), 0.03) 60%
),
rgba(var(--color-white-rgb), 0.05);
border: 1px solid rgba(var(--color-white-rgb), 0.14);
box-shadow:
0 0 0 1px rgba(var(--color-secondary-rgb), 0.08),
0 0 60px rgba(var(--color-secondary-rgb), 0.22),
0 30px 70px rgba(var(--color-black-rgb), 0.45),
inset 0 1px 0 rgba(var(--color-white-rgb), 0.18);
animation: centerPulse 3.2s ease-in-out infinite;
}
.center-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
padding: 1px;
background: linear-gradient(
140deg,
rgba(var(--color-secondary-rgb), 0.55),
transparent 40%,
transparent 60%,
rgba(var(--color-white-rgb), 0.25)
);
-webkit-mask:
linear-gradient(var(--color-white) 0 0) content-box,
linear-gradient(var(--color-white) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.center-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--theme-heading);
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
}
.center-label small {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-secondary-alt);
}
/*==================================================
SIDES
==================================================*/
.network-left,
.network-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 26px;
z-index: 10;
width: 236px;
}
.network-left {
left: 0;
align-items: flex-start;
}
.network-right {
right: 0;
align-items: flex-end;
}
/*==================================================
NODE CARD
==================================================*/
.network-node {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 24px;
border-radius: 60px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(var(--color-white-rgb), 0.05);
border: 1px solid rgba(var(--color-white-rgb), 0.09);
color: var(--color-white);
box-shadow: 0 14px 34px rgba(var(--color-black-rgb), 0.28);
cursor: pointer;
/* transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease,
box-shadow 0.35s ease,
background 0.35s ease;
animation: floating 6s ease-in-out infinite; */
will-change: transform;
}
.network-node:hover {
transform: translateY(-7px) scale(1.03);
border-color: rgba(var(--color-secondary-rgb), 0.55);
background: rgba(var(--color-white-rgb), 0.08);
box-shadow:
0 20px 45px rgba(var(--color-black-rgb), 0.35),
0 0 0 1px rgba(var(--color-secondary-rgb), 0.25),
0 0 35px rgba(var(--color-secondary-rgb), 0.28);
}
.network-node:hover .node-icon {
background: rgba(var(--color-secondary-rgb), 0.22);
transform: scale(1.08);
}
.node-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(var(--color-secondary-rgb), 0.13);
color: var(--color-secondary);
font-size: 18px;
flex-shrink: 0;
transition:
transform 0.35s ease,
background 0.35s ease;
}
.network-node span {
font-weight: 700;
font-size: 15px;
white-space: nowrap;
letter-spacing: -0.01em;
}
/* small connector dot glued to the card, matches the SVG anchor */
.network-node::after {
content: "";
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-secondary);
box-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.8);
transform: translateY(-50%);
}
.network-left .network-node::after {
right: -4px;
}
.network-right .network-node::after {
left: -4px;
}
/*==================================================
FLOW TEXT
==================================================*/
.network-bottom {
margin-top: 56px;
}
.network-flow-text {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(var(--color-white-rgb), 0.5);
font-size: 15px;
letter-spacing: 0.03em;
padding: 10px 22px;
border-radius: 30px;
border: 1px solid rgba(var(--color-white-rgb), 0.08);
background: rgba(var(--color-white-rgb), 0.03);
}
/*==================================================
ANIMATIONS
==================================================*/
@keyframes ringRotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes centerFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes centerPulse {
0%,
100% {
box-shadow:
0 0 0 0 rgba(var(--color-secondary-rgb), 0.28),
0 0 60px rgba(var(--color-secondary-rgb), 0.22),
0 30px 70px rgba(var(--color-black-rgb), 0.45),
inset 0 1px 0 rgba(var(--color-white-rgb), 0.18);
}
50% {
box-shadow:
0 0 0 18px rgba(var(--color-secondary-rgb), 0),
0 0 70px rgba(var(--color-secondary-rgb), 0.3),
0 30px 70px rgba(var(--color-black-rgb), 0.45),
inset 0 1px 0 rgba(var(--color-white-rgb), 0.18);
}
}
@keyframes floating {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.network-left .network-node:nth-child(2) {
animation-delay: 0.5s;
}
.network-left .network-node:nth-child(3) {
animation-delay: 1s;
}
.network-right .network-node:nth-child(2) {
animation-delay: 0.4s;
}
.network-right .network-node:nth-child(3) {
animation-delay: 0.9s;
}
.network-right .network-node:nth-child(4) {
animation-delay: 1.4s;
}
@media (prefers-reduced-motion: reduce) {
.center-float,
.center-card,
.center-ring,
.network-node,
.glow-orb {
animation: none !important;
}
}
/*==================================================
RESPONSIVE
==================================================*/
@media (max-width: 991px) {
.landscape-section {
padding: 100px 0 90px;
}
.ai-network-wrapper {
height: auto;
}
.network-lines {
z-index: 1;
}
.network-line {
stroke-width: 1.4;
opacity: 0.55;
}
.network-center {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 0 auto 48px;
width: fit-content;
}
.network-left,
.network-right {
position: relative;
left: auto;
right: auto;
top: auto;
transform: none;
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 16px;
margin-bottom: 16px;
}
.network-node {
width: calc(50% - 8px);
justify-content: flex-start;
}
.network-node::after {
display: none;
}
}
@media (max-width: 576px) {
.center-card {
width: 150px;
height: 150px;
}
.center-ring {
width: 200px;
height: 200px;
}
.center-label {
font-size: 16px;
}
.network-node {
width: 100%;
}
.section-header.mb-5 {
margin-bottom: 56px !important;
}
}
/*==========================================
THREE PRINCIPLES
==========================================*/
.growth-principles{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin: 90px 0;
}
.principle-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:35px;
text-align:center;
transition:.35s ease;
backdrop-filter:blur(10px);
}
.principle-card:hover{
transform:translateY(-8px);
border-color:rgba(var(--color-secondary-rgb),.45);
box-shadow:0 20px 50px rgba(0,0,0,.30);
}
.principle-icon{
width:70px;
height:70px;
margin:0 auto 25px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(var(--color-secondary-rgb),.12);
color:var(--color-secondary);
font-size:24px;
display: none;
}
.principle-card h3{
color:#fff;
font-size:28px;
font-family:var(--font-heading);
margin-bottom:14px;
}
.principle-card p{
color:rgba(255,255,255,.75);
line-height:1.8;
margin:0;
}
/*==========================================
OUTCOME
==========================================*/
.growth-outcome{
max-width:900px;
margin:90px auto 0;
text-align:center;
}
.growth-outcome h3{
font-family:var(--font-heading);
font-size:42px;
line-height:1.4;
color:#fff;
font-weight:600;
}
.growth-outcome h3::after{
content:"";
display:block;
width:90px;
height:4px;
margin:28px auto 0;
border-radius:50px;
background:var(--color-secondary);
}
/*==========================================
CTA
==========================================*/
.growth-cta{
margin-top:55px;
text-align:center;
}
.growth-cta .btn-primary{
display:inline-flex;
align-items:center;
gap:12px;
padding:18px 34px;
}
.growth-cta .btn-primary i{
transition:.3s;
}
.growth-cta .btn-primary:hover i{
transform:translateX(5px);
}
/*==========================================
RESPONSIVE
==========================================*/
@media(max-width:991px){
.growth-principles{
grid-template-columns:1fr;
}
.growth-outcome h3{
font-size:34px;
}
}
@media(max-width:576px){
.growth-principles{
gap:20px;
margin-top:70px;
}
.principle-card{
padding:28px;
}
.growth-outcome{
margin-top:60px;
}
.growth-outcome h3{
font-size:28px;
}
}
.change-visual path{
fill:none;
stroke:#d97706;
stroke-width:4;
}
/*=========================================================
SECTION 5 — AI PROOF WALL — peek-drag carousel
(Dribbble "Carousel experimentation" reference: center card
full, neighbors peek at the edges, draggable with snap.)
Card visual DNA still matches the hero's .result-slide img
(rounded corners, navy fill, border, shadow, object-fit:contain
so screenshots never get cropped) — only the layout mechanism
(peek + drag instead of a static grid) is new here.
=========================================================*/
.ai-proof-wall-section{
--proof-card-w: 760px;
background:var(--theme-bg);
color:var(--theme-text);
padding:120px 0;
overflow:hidden;
}
.ai-proof-wall-intro{
max-width:640px;
margin:0 auto 56px;
text-align:center;
}
.ai-proof-wall-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-secondary);
padding:7px 16px;
border-radius:30px;
background:rgba(var(--color-secondary-rgb),.08);
border:1px solid rgba(var(--color-secondary-rgb),.22);
margin-bottom:24px;
}
.ai-proof-wall-eyebrow i{
font-size:11px;
}
.ai-proof-wall-heading{
color:var(--theme-heading);
margin-bottom:16px;
}
.ai-proof-wall-subtext{
color:var(--theme-text);
font-size:15.5px;
line-height:1.75;
margin:0 auto;
max-width:460px;
}
/*---------------------------------------------------------
VIEWPORT — clips the track; padding-inline is what creates
the "peek" (equal to half the leftover space either side of
one centered card). cursor:grab signals it's draggable.
---------------------------------------------------------*/
.ai-proof-wall-viewport{
overflow:hidden;
cursor:grab;
padding:0 calc((100% - var(--proof-card-w)) / 2);
}
.ai-proof-wall-viewport.is-dragging{
cursor:grabbing;
}
.ai-proof-wall-track{
display:flex;
gap:32px;
will-change:transform;
}
/*---------------------------------------------------------
CARD — fixed width so the drag math is predictable; the
image itself still carries the hero's exact visual language.
---------------------------------------------------------*/
.ai-proof-wall-item{
position:relative;
flex:0 0 var(--proof-card-w);
width:var(--proof-card-w);
opacity:.55;
transform:scale(.94);
transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.ai-proof-wall-item.is-active{
opacity:1;
transform:scale(1);
}
.ai-proof-wall-img{
display:block;
width:100%;
height:440px;
object-fit:contain;
background:var(--color-navy-slide);
border-radius:20px;
border:1px solid rgba(var(--color-white-rgb),.14);
box-shadow:0 40px 90px rgba(var(--color-black-rgb),.55);
pointer-events:none; /* dragging is handled on the track, not the img */
}
.ai-proof-wall-tag{
position:absolute;
top:14px;
left:14px;
z-index:2;
display:inline-flex;
align-items:center;
gap:7px;
background:rgba(var(--color-tag-bg-rgb),.75);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(var(--color-white-rgb),.14);
color:var(--color-white);
font-size:12.5px;
font-weight:700;
padding:6px 12px;
border-radius:20px;
}
.ai-proof-wall-tag i{
color:var(--color-secondary);
font-size:11px;
}
.ai-proof-wall-verified-dot{
width:14px;
height:14px;
border-radius:50%;
background:var(--color-success);
color:var(--color-navy-deep);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:8px;
margin-left:2px;
}
/*---------------------------------------------------------
CONTROLS — arrows + dots, centered under the carousel
---------------------------------------------------------*/
.ai-proof-wall-controls{
display:flex;
align-items:center;
justify-content:center;
gap:24px;
margin-top:36px;
}
.ai-proof-wall-arrow{
width:44px;
height:44px;
border-radius:50%;
border:1px solid var(--theme-border);
background:var(--theme-surface);
color:var(--theme-heading);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:14px;
cursor:pointer;
transition:.3s;
flex-shrink:0;
}
.ai-proof-wall-arrow:hover{
background:var(--color-accent);
border-color:var(--color-accent);
color:var(--color-card-bg);
}
.ai-proof-wall-arrow:disabled{
opacity:.35;
cursor:default;
pointer-events:none;
}
.ai-proof-wall-dots{
display:flex;
align-items:center;
gap:9px;
}
.ai-proof-wall-dots button{
width:8px;
height:8px;
border-radius:50%;
border:none;
background:var(--theme-border);
padding:0;
cursor:pointer;
transition:.3s;
}
.ai-proof-wall-dots button.is-active{
background:var(--color-accent);
width:22px;
border-radius:5px;
}
.ai-proof-wall-empty{
text-align:center;
color:var(--theme-text);
font-size:15px;
padding:40px 0;
}
.ai-proof-wall-cta-wrap{
display:flex;
justify-content:center;
margin-top:56px;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media(max-width:991px){
.ai-proof-wall-section{
--proof-card-w: 560px;
padding:90px 0;
}
.ai-proof-wall-img{ height:380px; }
}
@media(max-width:576px){
.ai-proof-wall-section{
--proof-card-w: 86vw;
padding:70px 0;
}
.ai-proof-wall-intro{ margin-bottom:40px; }
.ai-proof-wall-track{ gap:18px; }
.ai-proof-wall-img{ height:300px; }
.ai-proof-wall-cta-wrap{ margin-top:36px; }
.ai-proof-wall-controls{ gap:16px; }
}
@media(prefers-reduced-motion:reduce){
.ai-proof-wall-item{ transition:none; }
}
/* Hero intro (eyebrow + heading + subtext) */
.ds-hero-intro {
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: 0px 24px 32px;
}
.ds-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary-light);
padding: 7px 16px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.14);
border: 1px solid rgba(var(--color-secondary-rgb), 0.32);
margin-bottom: 26px;
backdrop-filter: blur(6px);
}
.ds-hero-subtext {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #555;
}
/* CTA below the slider */
.ds-hero-cta-wrap {
display: flex;
justify-content: center;
padding: 32px 0px 0px;
}
/* .ds-hero-cta-wrap .btn-primary:hover { background: #333; } */
/*=========================================================
SECTION 7 — Google Ads Performance dashboard
=========================================================*/
.ads-performance-section {
background: var(--color-bg-light);
}
.ads-dashboard-wrapper {
border: 1px solid rgba(var(--color-primary-rgb), 0.08);
box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), 0.08);
}
/*=========================================================
SECTION 8 — Why Rank Stellar (feature cards)
=========================================================*/
.why-section {
background: var(--color-white);
}
.feature-card {
background: var(--color-bg-light);
border: 1px solid rgba(var(--color-primary-rgb), 0.06);
transition: 0.3s;
}
.feature-card:hover {
background: var(--color-white);
box-shadow: 0 15px 35px rgba(var(--color-primary-rgb), 0.08);
transform: translateY(-4px);
}
.feature-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(var(--color-secondary-rgb), 0.1);
color: var(--color-secondary);
font-size: 18px;
}
.feature-card h6 {
color: var(--color-primary);
}
/*=========================================================
SECTION 9 — Final CTA
=========================================================*/
.final-cta-section {
background: var(--color-primary);
min-height: 420px;
}
.cta-star {
font-size: 32px;
color: var(--color-secondary);
}
/*=========================================================
RESPONSIVE — paired rows stack on mobile
=========================================================*/
@media (max-width: 991px) {
.video-case-section,
.case-studies-section,
.landscape-section,
.ads-performance-section,
.why-section,
.final-cta-section {
padding: 70px 0;
}
}
/*=========================================================
CONTACT SECTION — split card (details left, form right)
=========================================================*/
.contact-section {
position: relative;
background: var(--color-bg-light);
padding: 110px 0;
overflow: hidden;
}
.contact-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
circle at 8% 15%,
rgba(var(--color-secondary-rgb), 0.06),
transparent 40%
),
radial-gradient(
circle at 95% 85%,
rgba(var(--color-primary-rgb), 0.05),
transparent 40%
);
}
.contact-section .container {
position: relative;
z-index: 2;
}
.contact-header {
text-align: center;
max-width: 620px;
margin: 0 auto 56px;
}
/*=========================================================
CARD SHELL
=========================================================*/
.contact-card {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
background: var(--color-white);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 40px 90px rgba(var(--color-primary-rgb), 0.12);
border: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
/*=========================================================
LEFT — INFO PANEL
=========================================================*/
.contact-info {
position: relative;
overflow: hidden;
background:
radial-gradient(
ellipse 500px 400px at 15% 0%,
rgba(var(--color-secondary-rgb), 0.22),
transparent 60%
),
linear-gradient(
160deg,
var(--color-primary) 0%,
var(--color-primary-dark) 100%
);
padding: 56px 48px;
display: flex;
flex-direction: column;
color: var(--color-white);
}
.contact-info::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.05;
mix-blend-mode: overlay;
pointer-events: none;
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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.contact-info > * {
position: relative;
z-index: 1;
}
.contact-info-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary-light);
padding: 7px 14px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.14);
border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
margin-bottom: 22px;
}
.contact-info-heading {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.01em;
margin-bottom: 14px;
}
.contact-info-text {
color: rgba(var(--color-white-rgb), 0.6);
font-size: 15px;
line-height: 1.75;
margin-bottom: 36px;
max-width: 380px;
}
/* contact detail rows */
.contact-info-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 36px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 14px;
text-decoration: none;
color: inherit;
}
.contact-info-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(var(--color-white-rgb), 0.06);
border: 1px solid rgba(var(--color-white-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
font-size: 16px;
transition: 0.3s;
}
.contact-info-item:hover .contact-info-icon {
background: rgba(var(--color-secondary-rgb), 0.18);
border-color: rgba(var(--color-secondary-rgb), 0.4);
transform: translateY(-2px);
}
.contact-info-label {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(var(--color-white-rgb), 0.4);
margin-bottom: 3px;
}
.contact-info-value {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--color-white);
}
/* response-time badge */
.contact-response-badge {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 16px;
background: rgba(var(--color-white-rgb), 0.05);
border: 1px solid rgba(var(--color-white-rgb), 0.1);
margin-top: auto;
}
.contact-response-dot {
position: relative;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-success);
flex-shrink: 0;
}
.contact-response-dot::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid var(--color-success);
animation: contactPulse 2.2s ease-out infinite;
}
@keyframes contactPulse {
0% {
transform: scale(0.6);
opacity: 0.9;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.contact-response-text strong {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--color-white);
}
.contact-response-text span {
font-size: 12.5px;
color: rgba(var(--color-white-rgb), 0.5);
}
/* social row */
.contact-social {
display: flex;
align-items: center;
gap: 10px;
margin-top: 24px;
}
.contact-social a {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(var(--color-white-rgb), 0.05);
border: 1px solid rgba(var(--color-white-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
color: rgba(var(--color-white-rgb), 0.6);
font-size: 14px;
text-decoration: none;
transition: 0.3s;
}
.contact-social a:hover {
color: var(--color-secondary);
border-color: rgba(var(--color-secondary-rgb), 0.4);
transform: translateY(-2px);
}
/*=========================================================
RIGHT — FORM PANEL
=========================================================*/
.contact-form-panel {
padding: 56px 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-form-heading {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--color-primary);
margin-bottom: 8px;
}
.contact-form-subtext {
color: var(--color-text-muted);
font-size: 14.5px;
margin-bottom: 32px;
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-field {
position: relative;
grid-column: span 1;
}
.contact-field.is-full {
grid-column: 1 / -1;
}
.contact-field input,
.contact-field textarea {
width: 100%;
background: var(--color-bg-lighter);
border: 1.5px solid var(--color-border-light);
border-radius: 12px;
padding: 20px 16px 8px;
font-family: "Manrope", sans-serif;
font-size: 14.5px;
font-weight: 600;
color: var(--color-primary);
transition: 0.25s;
outline: none;
}
.contact-field textarea {
min-height: 120px;
resize: vertical;
padding-top: 22px;
}
.contact-field label {
position: absolute;
left: 17px;
top: 18px;
font-size: 14.5px;
font-weight: 500;
color: var(--color-text-muted-2);
pointer-events: none;
transition: 0.2s ease;
background: transparent;
}
.contact-field input:focus,
.contact-field textarea:focus {
border-color: var(--color-secondary);
background: var(--color-white);
box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.1);
}
.contact-field input:focus ~ label,
.contact-field textarea:focus ~ label,
.contact-field input:not(:placeholder-shown) ~ label,
.contact-field textarea:not(:placeholder-shown) ~ label {
top: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-secondary);
}
.contact-submit {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--color-secondary);
color: var(--color-white);
border: none;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 15px;
padding: 16px 28px;
border-radius: 14px;
cursor: pointer;
box-shadow: 0 16px 36px rgba(var(--color-secondary-rgb), 0.28);
transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-submit:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(var(--color-secondary-rgb), 0.38);
}
.contact-submit:active {
transform: translateY(-1px);
}
.contact-submit i {
font-size: 13px;
transition: transform 0.3s ease;
}
.contact-submit:hover i {
transform: translateX(3px);
}
.contact-form-note {
grid-column: 1 / -1;
font-size: 12.5px;
color: var(--color-text-muted-3);
text-align: center;
margin-top: -4px;
}
.contact-form-note a {
color: var(--color-secondary);
font-weight: 600;
text-decoration: none;
}
/* success state */
.contact-success {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 10px;
}
.contact-success.is-visible {
display: flex;
}
.contact-form.is-hidden {
display: none;
}
.contact-success-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(var(--color-success-rgb), 0.12);
border: 1px solid rgba(var(--color-success-rgb), 0.3);
color: var(--color-success);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin-bottom: 18px;
}
.contact-success h4 {
font-family: "Manrope", sans-serif;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 8px;
}
.contact-success p {
color: var(--color-text-muted);
font-size: 14.5px;
max-width: 320px;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.contact-card {
grid-template-columns: 1fr;
}
.contact-info {
padding: 44px 36px;
}
.contact-form-panel {
padding: 44px 36px;
}
}
@media (max-width: 576px) {
.contact-section {
padding: 80px 0;
}
.contact-info,
.contact-form-panel {
padding: 36px 22px;
}
.contact-form {
grid-template-columns: 1fr;
}
.contact-field {
grid-column: 1 / -1;
}
.contact-info-heading {
font-size: 24px;
}
}
/*=========================================================
FAQ SECTION — sticky intro + numbered accordion
Distinct from cta-section: plain white bg, no split card.
=========================================================*/
.faq-section {
position: relative;
background: var(--color-white);
padding: 120px 0;
overflow: hidden;
}
.faq-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(
ellipse 700px 500px at 88% 10%,
rgba(var(--color-secondary-rgb), 0.05),
transparent 55%
);
}
.faq-section .container {
position: relative;
z-index: 2;
}
.faq-wrapper {
display: grid;
grid-template-columns: 0.85fr 1.55fr;
gap: 64px;
align-items: start;
}
/*=========================================================
LEFT — sticky intro
=========================================================*/
.faq-intro {
position: sticky;
top: 60px;
}
.faq-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary);
padding: 7px 16px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.08);
border: 1px solid rgba(var(--color-secondary-rgb), 0.22);
margin-bottom: 24px;
}
.faq-heading {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-primary);
margin-bottom: 16px;
}
.faq-subtext {
color: var(--color-text-muted);
font-size: 15.5px;
line-height: 1.75;
margin-bottom: 32px;
max-width: 360px;
}
/* decorative watermark glyph */
.faq-glyph {
position: relative;
width: 100%;
max-width: 280px;
aspect-ratio: 1.1;
border-radius: 24px;
background: linear-gradient(
160deg,
var(--color-primary) 0%,
var(--color-primary-dark) 100%
);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
}
.faq-glyph::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 25% 20%,
rgba(var(--color-secondary-rgb), 0.35),
transparent 60%
);
}
.faq-glyph i {
position: relative;
z-index: 1;
font-size: 76px;
color: rgba(var(--color-white-rgb), 0.14);
}
.faq-glyph-stat {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 2;
color: var(--color-white);
}
.faq-glyph-stat strong {
display: block;
font-family: "Manrope", sans-serif;
font-size: 22px;
font-weight: 800;
}
.faq-glyph-stat span {
font-size: 12px;
color: rgba(var(--color-white-rgb), 0.55);
font-weight: 600;
}
.faq-cta {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--color-primary);
font-weight: 700;
font-size: 14.5px;
text-decoration: none;
padding: 13px 22px;
border-radius: 40px;
border: 1.5px solid var(--color-primary);
transition: 0.3s;
}
.faq-cta:hover {
background: var(--color-primary);
color: var(--color-white);
}
.faq-cta i {
font-size: 12px;
transition: transform 0.3s ease;
}
.faq-cta:hover i {
transform: translateX(3px);
}
/*=========================================================
RIGHT — numbered accordion
=========================================================*/
.faq-list {
display: flex;
flex-direction: column;
}
.faq-item {
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
}
.faq-item:first-child {
border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
}
.faq-question {
width: 100%;
display: flex;
align-items: flex-start;
gap: 22px;
background: none;
border: none;
text-align: left;
cursor: pointer;
padding: 26px 4px;
position: relative;
}
.faq-number {
flex-shrink: 0;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 15px;
color: rgba(var(--color-primary-rgb), 0.28);
padding-top: 3px;
min-width: 26px;
transition: color 0.3s ease;
}
.faq-question-text {
flex: 1;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.5;
color: var(--color-primary);
transition: color 0.3s ease;
}
.faq-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-bg-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 12px;
transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon i {
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-answer-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-answer-inner {
overflow: hidden;
}
.faq-answer {
padding: 0 4px 28px 48px;
color: var(--color-text-muted);
font-size: 15px;
line-height: 1.8;
max-width: 640px;
}
/* open state */
.faq-item.is-open .faq-number,
.faq-item.is-open .faq-question-text {
color: var(--color-secondary);
}
.faq-item.is-open .faq-icon {
background: var(--color-secondary);
color: var(--color-white);
transform: rotate(180deg);
}
.faq-item.is-open .faq-icon i {
transform: rotate(45deg);
}
.faq-item.is-open .faq-answer-wrap {
grid-template-rows: 1fr;
}
.faq-question:hover .faq-question-text {
color: var(--color-secondary);
}
.faq-question:focus-visible {
outline: 2px solid var(--color-secondary);
outline-offset: 4px;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
.faq-answer-wrap,
.faq-icon,
.faq-icon i {
transition: none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.faq-wrapper {
grid-template-columns: 1fr;
gap: 44px;
}
.faq-intro {
position: static;
}
.faq-glyph {
max-width: 100%;
aspect-ratio: 2.4;
}
.faq-subtext {
max-width: 100%;
}
}
@media (max-width: 576px) {
.faq-section {
padding: 80px 0;
}
.faq-question {
gap: 14px;
padding: 22px 2px;
}
.faq-question-text {
font-size: 15.5px;
}
.faq-answer {
padding-left: 0;
padding-right: 0;
}
.faq-number {
min-width: 20px;
font-size: 13px;
}
}
/*=========================================================
SECTION — TESTIMONIALS ("Verification Feed")
One stacked proof panel per testimonial — client story on the
left, a real results screenshot on the right.
Matches existing tokens: var(--primary,var(--color-primary)), var(--secondary,var(--color-secondary)),
Manrope/Inter globals, grain-overlay dark panels (see contact-info /
hero-alt-section), platform-chip + case-btn + faq-eyebrow patterns.
=========================================================*/
.testimonials-section {
position: relative;
background: var(--color-bg-light);
padding: 120px 0;
overflow: hidden;
}
.testi-stack {
display: flex;
flex-direction: column;
gap: 32px;
}
.testimonials-section .container {
position: relative;
z-index: 2;
}
/*---------------------------------------------------------
Intro — reuses the eyebrow/heading/subtext spec already
established by .faq-eyebrow / .section-heading / .faq-subtext
---------------------------------------------------------*/
.testimonials-intro {
max-width: 640px;
margin: 0 auto 64px;
text-align: center;
}
.testimonials-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary);
padding: 7px 16px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.08);
border: 1px solid rgba(var(--color-secondary-rgb), 0.22);
margin-bottom: 24px;
}
.testimonials-heading {
font-weight: 800;
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-primary);
margin-bottom: 16px;
}
.testimonials-subtext {
color: var(--color-text-muted);
font-size: 15.5px;
line-height: 1.75;
margin: 0 auto;
max-width: 460px;
}
/*---------------------------------------------------------
Spotlight panel — reuses the exact dark-panel recipe from
.contact-info: navy gradient + orange radial glow + grain
---------------------------------------------------------*/
.testi-spotlight {
position: relative;
overflow: hidden;
background:
radial-gradient(
ellipse 550px 420px at 12% 0%,
rgba(var(--color-secondary-rgb), 0.22),
transparent 60%
),
linear-gradient(
160deg,
var(--color-primary) 0%,
var(--color-primary-dark) 100%
);
border-radius: 28px;
padding: clamp(28px, 4vw, 52px);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 44px;
box-shadow: 0 40px 90px rgba(var(--color-primary-rgb), 0.18);
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.testi-spotlight.is-visible {
opacity: 1;
transform: translateY(0);
}
.testi-spotlight::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.05;
mix-blend-mode: overlay;
pointer-events: none;
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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.testi-spotlight-main,
.testi-spotlight-side {
position: relative;
z-index: 1;
}
.testi-spotlight-side {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 28px;
border-left: 1px solid rgba(var(--color-white-rgb), 0.1);
padding-left: 40px;
}
/* Person row */
.testi-person {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.testi-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(var(--color-white-rgb), 0.2);
flex-shrink: 0;
}
.testi-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-secondary);
color: var(--color-white);
font-weight: 800;
font-size: 20px;
}
.testi-person-info {
display: flex;
flex-direction: column;
}
.testi-name {
font-weight: 700;
font-size: 17px;
color: var(--color-white);
}
.testi-company {
font-size: 13px;
color: rgba(var(--color-white-rgb), 0.6);
}
/* Rating */
.testi-rating {
display: flex;
gap: 4px;
margin-bottom: 18px;
color: var(--color-secondary);
font-size: 14px;
}
.testi-rating .is-empty {
color: rgba(var(--color-white-rgb), 0.2);
}
.testi-rating-sm {
font-size: 12px;
color: var(--color-secondary);
}
/* Quote */
.testi-quote {
font-size: clamp(18px, 2vw, 21px);
line-height: 1.55;
font-weight: 600;
color: var(--color-white);
margin: 0 0 24px;
}
/*---------------------------------------------------------
Platform pills — mirrors the existing .platform-chip spec
from the case-studies section (Section 5)
---------------------------------------------------------*/
.testi-platforms {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.testi-platform-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 30px;
background: rgba(var(--color-white-rgb), 0.08);
border: 1px solid rgba(var(--color-white-rgb), 0.14);
font-size: 13px;
font-weight: 600;
color: var(--color-white);
}
.testi-platform-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-secondary);
flex-shrink: 0;
}
/*---------------------------------------------------------
Citation block — the section's one signature element.
Monospace is intentional here only; overrides the global
Inter !important rule locally to read as captured data.
---------------------------------------------------------*/
.testi-citation {
background: rgba(var(--color-black-rgb), 0.28);
border: 1px solid rgba(var(--color-secondary-rgb), 0.32);
border-left: 3px solid var(--color-secondary);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 22px;
}
.testi-citation-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.testi-citation-dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
flex-shrink: 0;
}
.testi-citation-dot::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid var(--color-success);
animation: testiCitationPulse 2.2s ease-out infinite;
}
@keyframes testiCitationPulse {
0% {
transform: scale(0.6);
opacity: 0.9;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.testi-citation-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: rgba(var(--color-white-rgb), 0.5);
}
.testi-citation-body p {
font-family: "Courier New", ui-monospace, monospace !important;
font-size: 13px;
line-height: 1.8;
color: rgba(var(--color-white-rgb), 0.85);
margin: 0;
}
.testi-citation-prompt {
color: var(--color-secondary);
margin-right: 4px;
}
.testi-citation-status {
color: var(--color-success-alt);
}
/* Verified badge — mirrors .contact-response-badge / faq-cta pill logic */
.testi-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(var(--color-secondary-rgb), 0.14);
color: var(--color-secondary-light);
border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
padding: 8px 16px;
border-radius: 30px;
font-size: 13px;
font-weight: 700;
}
/*---------------------------------------------------------
Results screenshot — replaces the gauge/before-after with
real captured proof, framed to sit naturally in the dark panel.
---------------------------------------------------------*/
.testi-screenshot {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: var(--color-white);
border: 1px solid rgba(var(--color-white-rgb), 0.14);
box-shadow: 0 24px 50px rgba(var(--color-black-rgb), 0.35);
}
.testi-screenshot img {
display: block;
width: 100%;
height: auto;
}
.testi-screenshot-empty {
aspect-ratio: 4/3;
background: rgba(var(--color-white-rgb), 0.04);
border: 1px dashed rgba(var(--color-white-rgb), 0.18);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(var(--color-white-rgb), 0.35);
box-shadow: none;
}
.testi-screenshot-empty i {
font-size: 26px;
}
.testi-screenshot-empty span {
font-size: 12.5px;
font-weight: 600;
text-align: center;
max-width: 180px;
}
/*---------------------------------------------------------
CTA — reuses the .case-btn / .contact-submit pill spec
---------------------------------------------------------*/
.testimonials-cta-wrap {
display: flex;
justify-content: center;
margin-top: 44px;
}
.testimonials-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-secondary);
color: var(--color-white);
font-weight: 700;
font-size: 15px;
padding: 14px 28px;
border-radius: 40px;
text-decoration: none;
box-shadow: 0 16px 36px rgba(var(--color-secondary-rgb), 0.28);
transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.testimonials-cta:hover {
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(var(--color-secondary-rgb), 0.38);
}
.testimonials-cta i {
font-size: 13px;
transition: transform 0.3s ease;
}
.testimonials-cta:hover i {
transform: translateX(3px);
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.testimonials-section {
padding: 90px 0;
}
.testi-spotlight {
grid-template-columns: 1fr;
gap: 32px;
}
.testi-spotlight-side {
border-left: none;
border-top: 1px solid rgba(var(--color-white-rgb), 0.1);
padding-left: 0;
padding-top: 28px;
flex-direction: row;
justify-content: space-around;
}
}
@media (max-width: 767px) {
.testimonials-section {
padding: 70px 0;
}
}
@media (max-width: 576px) {
.testimonials-intro {
text-align: left;
margin-bottom: 40px;
}
.testi-spotlight {
padding: 24px;
border-radius: 22px;
}
.testi-spotlight-side {
flex-direction: column;
gap: 24px;
}
.testi-quote {
font-size: 17px;
}
}
@media (prefers-reduced-motion: reduce) {
.testi-spotlight {
opacity: 1 !important;
transform: none !important;
}
.testi-citation-dot::after {
animation: none;
}
}
/* ------------------------------------------------------------------------------------- */
/* ============================================================
TRAVEL HERO — DOUBLE SLIDER SECTION — STYLES
(design tokens match baaki site: accent orange, Inter/Manrope,
24px radius cards, existing shadow/overlay language)
============================================================ */
#dsHero, #dsHero * { box-sizing: border-box; }
.ds-hero {
position: relative;
width: 100%;
max-width: 1150px;
height: 650px;
min-height: 520px;
overflow: hidden;
font-family: var(--font-body);
color: var(--color-white);
/* background: var(--color-primary-darker); */
margin: 0 auto;
border-radius: 24px;
box-shadow: 0 7px 30px rgb(0 0 0 / 25%);
}
/* ---- background crossfade layers ---- */
.ds-hero__bgs { position: absolute; inset: 0; }
.ds-hero__bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
transition: opacity 1.1s ease, transform 6s ease;
}
.ds-hero__bg.is-active {
opacity: 1;
transform: scale(1);
z-index: 1;
}
.ds-hero__logo {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-heading);
font-weight: 700; letter-spacing: .5px; font-size: 18px;
color: var(--color-white);
}
.ds-hero__menu {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(var(--color-white-rgb), .06);
border: 1px solid rgba(var(--color-white-rgb), .14);
cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
transition: .3s;
}
.ds-hero__menu:hover { background: rgba(var(--color-white-rgb), .12); }
.ds-hero__menu span { width: 18px; height: 2px; background: var(--color-white); display: block; }
/* ---- center content — play button only ---- */
.ds-hero__content {
position: relative; z-index: 5;
height: calc(100% - 190px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 0 24px;
}
.ds-hero__play {
width: 84px; height: 84px; border-radius: 50%;
background: var(--color-accent);
border: none;
color: var(--color-white);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 20px 44px rgba(var(--color-accent-rgb), .4);
transition: transform .3s ease, box-shadow .3s ease;
}
.ds-hero__play:hover {
transform: scale(1.08);
box-shadow: 0 24px 54px rgba(var(--color-accent-rgb), .5);
}
/* ---- bottom bar ---- */
.ds-hero__bottom {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 40px 34px;
gap: 20px;
}
.ds-hero__arrows { display: flex; gap: 12px; flex-shrink: 0; }
.ds-hero__arrow {
width: 44px; height: 44px; border-radius: 50%;
color: #ffff;
display: flex; align-items: center; justify-content: center;
transition: .3s;
background: var(--color-accent);
border-color: var(--color-accent);
}
.ds-hero__arrow:hover {
background: rgba(var(--color-white-rgb), .06);
border: 1px solid var(--color-accent);
color: var(--color-accent); cursor: pointer;
}
.ds-hero__thumbs {
position: relative;
width: 350px;
height: 108px;
overflow: hidden;
border-radius: 14px;
flex-shrink: 0;
}
.ds-hero__thumbs-track {
display: flex;
height: 100%;
gap: 10px;
transform: translateX(-80px); /* current thumb ko center me laata hai */
}
.ds-hero__thumb-mini {
position: relative;
flex: 0 0 160px;
height: 100%;
border-radius: 14px;
background-size: cover;
background-position: center;
overflow: hidden;
border: 1px solid rgba(var(--color-white-rgb), .14);
cursor: pointer;
transition: filter .3s ease;
padding: 0;
filter: saturate(.75) brightness(.85);
}
.ds-hero__thumb-mini::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
}
.ds-hero__thumb-mini.is-current {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
cursor: default;
filter: saturate(1) brightness(1);
z-index: 2;
}
.ds-hero__thumb {
position: relative;
width: 160px; height: 100px;
border-radius: 14px;
background-size: cover; background-position: center;
cursor: pointer;
overflow: hidden;
border: 1px solid rgba(var(--color-white-rgb), .14);
box-shadow: 0 14px 34px rgba(var(--color-black-rgb), .3);
filter: saturate(.85);
transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease, border-color .35s ease;
padding: 0;
}
.ds-hero__thumb:hover {
transform: translateY(-5px);
filter: saturate(1);
border-color: rgba(var(--color-accent-rgb), .55);
}
.ds-hero__thumb::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(var(--color-black-rgb),0) 45%, rgba(var(--color-black-rgb),.7) 100%);
}
.ds-hero__thumb-label {
position: absolute; left: 10px; bottom: 8px; z-index: 2;
font-family: var(--font-body);
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--color-white);
}
/* ---- responsive ---- */
@media (max-width: 991px) {
.ds-hero { border-radius: 18px; }
}
@media (max-width: 760px) {
.ds-hero { height: 40vh; min-height: 400px; }
.ds-hero__nav { padding: 20px 20px; }
.ds-hero__bottom { flex-direction: column-reverse; align-items: center; gap: 16px; padding: 0 16px 20px; }
/* .ds-hero__thumbs { display: none; } thumbnails hide on small screens, arrows remain */
}
@media (prefers-reduced-motion: reduce) {
.ds-hero__bg { transition: none !important; }
}
/*=========================================================
SECTION 6 — AI Visibility Ecosystem (text-left / illustration-right)
Prefix: avs- (AI Visibility System) — apna khud ka namespace,
baaki sections se clash nahi karega. Layout wahi grid pattern
hai jo .change-section / .recommend-section / .cw-section
already use kar rahe hain.
=========================================================*/
.avs-section {
background: var(--color-bg-primary);
padding: 120px 0;
/* overflow: hidden; */
}
.avs-grid {
display: grid;
grid-template-columns: 0.85fr 1fr; /* ~45% / 55%, jaisa change-grid/cw-grid */
gap: 64px;
align-items: stretch; /* zaroori hai: .avs-visual ko poori row height milni chahiye taaki sticky wrapper ke paas move karne ki jagah ho */
}
/*---------------------------------------------------------
LEFT — text
---------------------------------------------------------*/
.avs-text {
max-width: 560px;
}
.avs-heading em {
font-family: "Fraunces", serif;
font-style: italic;
font-weight: 600;
color: var(--color-secondary);
}
.avs-supporting p {
color: var(--color-text-secondary);
font-size: 16px;
line-height: 1.85;
margin-bottom: 16px;
}
.avs-supporting p:last-child {
margin-bottom: 0;
}
/* philosophy rows — compact icon+text list (fits the narrow column,
unlike a 3-across card grid) */
.avs-philosophy-list {
margin-top: 8px;
}
.avs-philosophy-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 0;
border-top: 1px solid var(--color-border);
}
.avs-philosophy-item:last-child {
border-bottom: 1px solid var(--color-border);
}
.avs-philosophy-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(var(--color-accent-rgb), 0.1);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.avs-philosophy-title {
font-size: 16px;
color: var(--color-text-primary);
margin-bottom: 4px;
font-family: 'Inter' !important;
}
.avs-philosophy-text {
font-size: 14px;
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0;
}
/* closing statement — same recipe as .cw-closing / .recommend-closing */
.avs-closing {
margin: 28px 0 0;
padding-top: 24px;
border-top: 1px solid var(--color-border);
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(19px, 2vw, 23px);
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
.avs-cta-wrap {
margin-top: 24px;
}
/* .text-link default color is white (for dark sections) — this section
is light, so override just the color here, everything else (hover,
icon transition) is inherited from the shared .text-link rule */
.avs-cta-link {
color: var(--color-accent) !important;
}
.avs-cta-link:hover {
color: var(--color-accent-hover) !important;
}
/*---------------------------------------------------------
RIGHT — illustration, sticky wrapper
.avs-visual poori row height leta hai (align-items:stretch se);
.avs-visual-sticky us height ke andar top:Npx pe pinned rehta hai
jab tak parent ka bottom na aa jaaye — us point pe khud-ba-khud
"un-stick" hoke column ke bottom se chipak jaata hai.
---------------------------------------------------------*/
.avs-visual {
height: 100%;
}
.avs-visual-sticky {
position: sticky;
top: 110px; /* apne fixed header ki height ke hisaab se adjust karo */
}
.avs-illustration-img {
display: block;
width: 100%;
height: auto;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}
.avs-visual-panel {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 24px;
padding: 32px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}
.avs-diagram {
position: relative;
width: 100%;
aspect-ratio: 480 / 420;
}
.avs-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.avs-line {
stroke: rgba(var(--color-accent-rgb), 0.35);
stroke-width: 1.6;
stroke-dasharray: 4 5;
}
.avs-hub {
position: absolute;
left: 50%;
top: 45.2%;
transform: translate(-50%, -50%);
width: 130px;
height: 130px;
border-radius: 50%;
background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
box-shadow: 0 20px 45px rgba(var(--color-accent-rgb), 0.28);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 2;
}
.avs-hub span {
color: var(--color-white);
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 13.5px;
line-height: 1.35;
letter-spacing: -0.01em;
}
.avs-node {
position: absolute;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 40px;
padding: 10px 16px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
font-size: 12.5px;
font-weight: 700;
color: var(--color-text-primary);
white-space: nowrap;
z-index: 3;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.avs-node:hover {
transform: translate(-50%, -50%) translateY(-3px);
border-color: rgba(var(--color-accent-rgb), 0.4);
}
.avs-node i {
color: var(--color-accent);
font-size: 13px;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.avs-section { padding: 90px 0; }
.avs-grid { grid-template-columns: 1fr; gap: 48px; }
.avs-text { max-width: 100%; }
.avs-visual { order: 2; height: auto; }
.avs-visual-sticky { position: static; } /* single-column layout pe sticky ka koi matlab nahi */
}
@media (max-width: 576px) {
.avs-section { padding: 70px 0; }
.avs-visual-panel { padding: 20px; }
.avs-node { font-size: 11px; padding: 8px 12px; }
.avs-node span { display: none; } /* mobile pe sirf icon, label clutter karega */
.avs-hub { width: 100px; height: 100px; }
.avs-hub span { font-size: 11.5px; }
.avs-closing { font-size: 19px; }
}
/*=========================================================
SECTION 7 — WHO SHOULD INVEST IN AI VISIBILITY?
Prefix: wsi- (Who Should Invest) — apna khud ka namespace.
Design tokens same as baaki site (accent orange, Inter/Manrope,
24px radius cards, existing shadow language — matches
.feature-card / .avs-philosophy-item / .recommend-closing-box).
=========================================================*/
.wsi-section {
/* background: var(--color-bg-primary); */
padding: 120px 0;
overflow: hidden;
}
/*---------------------------------------------------------
INTRO — centered heading + supporting copy
---------------------------------------------------------*/
.wsi-intro {
max-width: 680px;
margin: 0 auto 48px;
text-align: center;
}
.wsi-heading {
margin-bottom: 16px;
}
.wsi-supporting {
color: var(--color-text-secondary);
font-size: 16.5px;
line-height: 1.8;
margin: 0 auto;
}
/*---------------------------------------------------------
SMALL LABEL — "AI Visibility Is Most Valuable When..."
---------------------------------------------------------*/
.wsi-cards-label {
display: block;
text-align: center;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 32px;
}
/*---------------------------------------------------------
CARD GRID
---------------------------------------------------------*/
.wsi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 56px;
}
.wsi-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 24px;
padding: 32px 26px;
transition: 0.35s;
box-shadow:
rgba(var(--color-black-rgb), 0.04) 0px 1px 3px,
rgba(var(--color-black-rgb), 0.06) 0px 1px 2px;
}
.wsi-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px rgba(var(--color-primary-rgb), 0.08);
border-color: rgba(var(--color-accent-rgb), 0.3);
}
.wsi-card-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(var(--color-accent-rgb), 0.1);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
margin-bottom: 20px;
}
.wsi-card-title {
font-size: 18px;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 14px;
line-height: 1.3;
}
.wsi-card-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.wsi-card-list li {
position: relative;
padding-left: 20px;
font-size: 14.5px;
line-height: 1.6;
color: var(--color-text-secondary);
}
.wsi-card-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent);
}
.wsi-card-text {
font-size: 14.5px;
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0;
}
/* 4th card — slightly distinct so it doesn't blend as "just another list" */
.wsi-card-growing {
background: rgba(var(--color-accent-rgb), 0.04);
border-color: rgba(var(--color-accent-rgb), 0.22);
}
/*---------------------------------------------------------
CLOSING LINE — same recipe as .recommend-closing-box
---------------------------------------------------------*/
.wsi-closing-box {
display: flex;
align-items: center;
/* justify-content: center; */
gap: 14px;
max-width: 720px;
margin: 0 auto;
padding: 22px 28px;
border-radius: 16px;
background: rgba(var(--color-accent-rgb), 0.06);
border: 1px solid rgba(var(--color-accent-rgb), 0.22);
text-align: center;
border-left: 4px solid var(--color-accent);
}
.wsi-closing-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-card-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.wsi-closing {
margin: 0;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: clamp(16px, 1.8vw, 18px);
line-height: 1.6;
letter-spacing: -0.01em;
color: var(--color-text-primary);
text-align: left;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 991px) {
.wsi-section { padding: 90px 0; }
.wsi-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 576px) {
.wsi-section { padding: 70px 0; }
.wsi-grid {
grid-template-columns: 1fr;
}
.wsi-intro { margin-bottom: 36px; }
.wsi-closing-box {
flex-direction: column;
text-align: center;
padding: 24px 20px;
}
.wsi-closing { text-align: center; }
}
/*=========================================================
SECTION 8 — LET'S DISCOVER HOW AI SEES YOUR BUSINESS
Prefix: assess- — apna khud ka namespace.
Dark "premium finale" panel — same recipe as .landscape-section
(grain overlay + glow orbs + radial gradient) so this reads as
the site's signature closing moment before the footer.
=========================================================*/
.assess-section {
position: relative;
overflow: hidden;
background: var(--theme-bg);
padding: 120px 0;
isolation: isolate;
}
.assess-section::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.assess-section .glow-orb--a {
left: -140px;
top: 0%;
}
.assess-section .glow-orb--b {
right: -160px;
bottom: -10%;
}
.assess-section .container {
position: relative;
z-index: 2;
}
/*---------------------------------------------------------
CENTERED WRAP
---------------------------------------------------------*/
.assess-wrap {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.assess-heading {
color: var(--color-white);
margin-bottom: 18px;
}
.assess-supporting {
color: rgba(var(--color-white-rgb), 0.65);
font-size: 16.5px;
line-height: 1.8;
margin: 0 auto 48px;
}
/*---------------------------------------------------------
PREMIUM OFFER CARD — glassmorphic, matches .center-card /
.testi-spotlight recipe used elsewhere in dark sections
---------------------------------------------------------*/
.assess-card {
position: relative;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background:
radial-gradient(
circle at 30% 15%,
rgba(var(--color-white-rgb), 0.1),
rgba(var(--color-white-rgb), 0.02) 60%
),
rgba(var(--color-white-rgb), 0.04);
border: 1px solid rgba(var(--color-white-rgb), 0.14);
border-radius: 24px;
padding: 40px 36px;
box-shadow:
0 0 0 1px rgba(var(--color-accent-rgb), 0.08),
0 30px 70px rgba(var(--color-black-rgb), 0.4);
margin-bottom: 40px;
text-align: left;
}
.assess-intro{
margin:0 0 18px;
font-size:16px;
line-height:1.7;
color:rgba(255,255,255,.82);
max-width:520px;
}
.assess-card-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-secondary-light);
padding: 6px 14px;
border-radius: 30px;
background: rgba(var(--color-secondary-rgb), 0.14);
border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
margin-bottom: 22px;
}
.assess-card-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.assess-card-list li {
display: flex;
align-items: center;
gap: 14px;
font-size: 16px;
font-weight: 600;
color: var(--color-white);
}
.assess-check {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(var(--color-secondary-rgb), 0.16);
color: var(--color-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
/*---------------------------------------------------------
PRIMARY CTA — the first major button since the hero,
deliberately larger/brighter than the standard .btn-primary
---------------------------------------------------------*/
.assess-cta-primary-wrap {
margin-bottom: 20px;
}
.assess-cta-primary {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--color-accent);
color: var(--color-white) !important;
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 17px;
padding: 20px 40px;
border-radius: 50px;
box-shadow: 0 22px 50px rgba(var(--color-accent-rgb), 0.4);
transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.assess-cta-primary:hover {
background: var(--color-accent-hover);
color: var(--color-white) !important;
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(var(--color-accent-rgb), 0.5);
}
.assess-cta-primary i {
font-size: 14px;
transition: transform 0.3s ease;
}
.assess-cta-primary:hover i {
transform: translateX(4px);
}
/*---------------------------------------------------------
SECONDARY CTA — quiet text link, reuses global .text-link
recipe (default white, orange on hover)
---------------------------------------------------------*/
.assess-cta-secondary {
display: inline-block;
color: rgba(var(--color-white-rgb), 0.75);
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
border-bottom: 1.5px solid rgba(var(--color-white-rgb), 0.25);
padding-bottom: 3px;
transition: 0.3s;
margin-bottom: 28px;
}
.assess-cta-secondary:hover {
color: var(--color-secondary);
border-bottom-color: var(--color-secondary);
}
/*---------------------------------------------------------
REASSURANCE LINE
---------------------------------------------------------*/
.assess-reassurance {
color: rgba(var(--color-white-rgb), 0.45);
font-size: 13.5px;
line-height: 1.7;
max-width: 460px;
margin: 0 auto;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 767px) {
.assess-section { padding: 100px 0; }
.assess-card { padding: 32px 24px; }
.assess-supporting { margin-bottom: 36px; }
}
@media (max-width: 576px) {
.assess-section { padding: 80px 0; }
.assess-card-list li { font-size: 14.5px; }
.assess-cta-primary {
width: 100%;
justify-content: center;
padding: 18px 24px;
font-size: 15.5px;
}
}
/* -----------------------------------------------how ai page css--------------------------------------- */
/*=========================================================
HERO — How AI Chooses Businesses
File: assets/css/hic-hero.css
Prefix: hic- (How It Chooses) — apna khud ka namespace,
koi clash nahi baaki theme classes se.
Colors seedha theme ke root variables se aa rahe hain
(:root me already defined --color-accent, --color-text-primary, etc.)
=========================================================*/
.hic-section{
padding:110px 0 90px;
background:var(--color-bg-primary);
overflow:hidden;
}
.hic-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
/*---------------------------------------------------------
LEFT — copy
---------------------------------------------------------*/
.hic-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-accent);
padding:8px 16px;
border-radius:30px;
background:rgba(var(--color-accent-rgb),.1);
border:1px solid rgba(var(--color-accent-rgb),.28);
margin-bottom:26px;
}
.hic-eyebrow i{ font-size:11px; }
.hic-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(38px,4.6vw,64px);
line-height:1.1;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 24px;
}
.hic-heading em{
font-style:normal;
color:var(--color-accent);
}
.hic-subtext{
font-size:17px;
line-height:1.85;
color:var(--color-text-secondary);
max-width:520px;
margin:0 0 36px;
}
.hic-cta-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-bottom:44px;
}
.hic-btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--color-accent);
color:#fff !important;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
padding:16px 28px;
border-radius:var(--btn-radius,40px);
box-shadow:0 16px 36px rgba(var(--color-accent-rgb),.28);
transition:.35s cubic-bezier(.22,1,.36,1);
}
.hic-btn-primary:hover{
background:var(--color-accent-hover);
color:#fff !important;
transform:translateY(-3px);
box-shadow:0 20px 44px rgba(var(--color-accent-rgb),.38);
}
.hic-btn-primary i{ font-size:13px; transition:transform .3s ease; }
.hic-btn-primary:hover i{ transform:translateX(3px); }
.hic-btn-secondary{
display:inline-flex;
align-items:center;
gap:10px;
background:transparent;
color:var(--color-text-primary);
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14.5px;
padding:14px 24px;
border-radius:var(--btn-radius,40px);
border:1.5px solid var(--color-border);
transition:.3s;
}
.hic-btn-secondary:hover{
border-color:var(--color-text-primary);
background:var(--color-text-primary);
color:#fff !important;
}
.hic-btn-secondary i{ font-size:13px; }
.hic-reassurance{
display:flex;
align-items:flex-start;
gap:16px;
padding:22px 24px;
border-radius:18px;
background:var(--color-card-bg);
border:1px solid var(--color-border);
max-width:520px;
}
.hic-reassurance-icon{
flex-shrink:0;
width:42px;
height:42px;
border-radius:12px;
background:rgba(var(--color-accent-rgb),.1);
color:var(--color-accent) !important;
display:flex;
align-items:center;
justify-content:center;
font-size:25px !important;
}
.hic-reassurance strong{
display:block;
font-size:14.5px;
font-weight:700;
color:var(--color-text-primary);
margin-bottom:4px;
}
.hic-reassurance span{
font-size:16.5px;
line-height:1.65;
color:var(--color-text-secondary);
}
/*---------------------------------------------------------
RIGHT — ACF image
Simple framed image, same radius/shadow language jo
baaki site ke visual panels (change-visual-img,
recommend-visual-img, avs-illustration-img) already use
karte hain — taaki ye section bhi consistent lage.
---------------------------------------------------------*/
.hic-visual{
position:relative;
}
.hic-visual-img{
display:block;
width:100%;
height:auto;
border-radius:24px;
border:1px solid var(--color-border);
box-shadow:0 30px 70px rgba(0,0,0,.12);
object-fit:cover;
}
/* placeholder jab ACF image field khaali ho, dev/preview ke liye */
.hic-visual-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:4/3;
border-radius:24px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-size:13.5px;
font-weight:600;
}
.hic-visual-placeholder i{ font-size:26px; opacity:.6; }
/*=========================================================
SCROLL REVEAL — hic-hero.js is-visible class toggle karta hai
=========================================================*/
.hic-text,
.hic-visual{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.hic-visual{ transition-delay:.1s; }
.hic-text.is-visible,
.hic-visual.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.hic-text,.hic-visual{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:991px){
.hic-grid{
grid-template-columns:1fr;
gap:48px;
}
.hic-visual{
order:2;
}
.hic-text{
order:1;
}
}
@media (max-width:576px){
.hic-section{ padding:80px 0 60px; }
.hic-heading{ font-size:34px; }
.hic-cta-row{ flex-direction:column; align-items:stretch; }
.hic-btn-primary,.hic-btn-secondary{ justify-content:center; }
.hic-visual-img{ border-radius:18px; }
}
/*=========================================================
CHAPTER 1 — The Way People Find Businesses Has Changed
File: assets/css/chapter-1.css
Prefix: ch1- — apna khud ka namespace.
3 blocks:
1) .ch1-top — badge + heading + subheading (left-aligned)
2) .ch1-image-wrap — ek hi full-width comparison image (aapka apna asset)
3) .ch1-bottom — closing bar, agle chapter ki taraf point karta hai
=========================================================*/
.ch1-section{
background:var(--color-bg-secondary);
padding:110px 0 100px;
}
/*---------------------------------------------------------
TOP — badge + heading + subheading
---------------------------------------------------------*/
.ch1-top{
max-width:760px;
margin:0 0 48px;
}
.ch1-badge{
display:inline-flex;
align-items:center;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12.5px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--color-accent);
padding:8px 18px;
border-radius:30px;
background:rgba(var(--color-accent-rgb),.08);
border:1px solid rgba(var(--color-accent-rgb),.3);
margin-bottom:22px;
}
.ch1-heading{
font-family:var(--font-heading);
font-weight:800;
font-size:clamp(30px,3.6vw,44px);
line-height:1.18;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 18px;
}
.ch1-heading em{
font-style:normal;
color:var(--color-accent);
}
.ch1-subheading p{
font-size:17px;
line-height:1.7;
color:var(--color-text-secondary);
margin:0 0 4px;
}
.ch1-subheading p:last-child{ margin-bottom:0; }
/*---------------------------------------------------------
MIDDLE — single comparison image
---------------------------------------------------------*/
.ch1-image-wrap{
margin:0 0 48px;
}
.ch1-image{
display:block;
width:100%;
height:auto;
border-radius:24px;
}
.ch1-image-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:16/9;
border-radius:24px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-size:14px;
font-weight:600;
}
.ch1-image-placeholder i{ font-size:28px; opacity:.6; }
/*---------------------------------------------------------
BOTTOM — closing bar
---------------------------------------------------------*/
.ch1-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
padding:26px 30px;
border-radius:20px;
background:rgba(var(--color-accent-rgb),.06);
border:1px solid rgba(var(--color-accent-rgb),.2);
}
.ch1-bottom-left{
display:flex;
align-items:flex-start;
gap:16px;
flex:1;
min-width:260px;
}
.ch1-bottom-icon{
flex-shrink:0;
width:40px;
height:40px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.14);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:16.5px;
}
.ch1-bottom-text p{
margin:0 0 3px;
font-size:16.5px;
font-weight:600;
line-height:1.6;
color:var(--color-text-secondary);
}
.ch1-bottom-text p:last-child{
margin-bottom:0;
color:var(--color-accent);
font-weight:700;
}
.ch1-bottom-next{
display:inline-flex;
align-items:center;
gap:10px;
flex-shrink:0;
background:var(--color-accent);
color:#fff !important;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14.5px;
padding:14px 24px;
border-radius:40px;
box-shadow:0 14px 30px rgba(var(--color-accent-rgb),.3);
transition:.3s;
}
.ch1-bottom-next:hover{
background:var(--color-accent-hover);
color:#fff !important;
transform:translateY(-2px);
}
.ch1-bottom-next i{ font-size:12px; }
/*=========================================================
SCROLL REVEAL — chapter-1.js is-visible class toggle karta hai
=========================================================*/
.ch1-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ch1-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ch1-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:576px){
.ch1-section{ padding:80px 0; }
.ch1-heading{ font-size:28px; }
.ch1-image{ border-radius:18px; }
.ch1-bottom{
flex-direction:column;
align-items:stretch;
text-align:left;
}
.ch1-bottom-next{ justify-content:center; }
}
/*=========================================================
CHAPTER 2 — How AI Chooses Businesses?
File: assets/css/chapter-2.css
Prefix: ch2- — apna khud ka namespace.
Layout: left text / right sticky illustration — same grid
ratio (0.85fr / 1fr) jo theme ke change-section / cw-section /
avs-section already use kar rahe hain, taaki visually consistent lage.
=========================================================*/
.ch2-section{
background:var(--color-bg-primary);
padding:120px 0;
/* overflow:hidden; */
}
.ch2-grid{
display:grid;
grid-template-columns:0.85fr 1fr;
gap:64px;
align-items:stretch;
}
/*---------------------------------------------------------
LEFT — text
---------------------------------------------------------*/
.ch2-text{
max-width:560px;
}
.ch2-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(28px,3.2vw,42px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 16px;
}
.ch2-subheading{
font-size:16.5px;
line-height:1.75;
color:var(--color-text-secondary);
margin:0 0 32px;
}
.ch2-opening p{
font-size:16px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 16px;
}
.ch2-opening p:last-child{
margin-bottom:0;
}
.ch2-questions-title{
font-family:"Manrope",sans-serif !important;
font-weight:800;
font-size:13px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-accent);
margin:40px 0 8px;
}
/*---------------------------------------------------------
QUESTIONS LIST
---------------------------------------------------------*/
.ch2-questions{
display:flex;
flex-direction:column;
}
.ch2-question{
padding:26px 0;
border-top:1px solid var(--color-border);
}
.ch2-question:last-child{
border-bottom:1px solid var(--color-border);
}
.ch2-q-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;
}
.ch2-q-number{
flex-shrink:0;
width:34px;
height:34px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.1);
border:1px solid rgba(var(--color-accent-rgb),.3);
color:var(--color-accent);
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:12.5px;
display:flex;
align-items:center;
justify-content:center;
}
.ch2-q-title{
margin:0;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:17.5px;
line-height:1.4;
color:var(--color-text-primary);
}
.ch2-q-body{
padding-left:48px;
}
.ch2-q-body p{
font-size:15px;
line-height:1.8;
color:var(--color-text-secondary);
margin:0 0 10px;
}
.ch2-q-body p:last-child{
margin-bottom:0;
}
.ch2-q-bullets{
list-style:none;
margin:0 0 10px;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
}
.ch2-q-bullets li{
position:relative;
padding-left:20px;
font-size:15px;
line-height:1.7;
color:var(--color-text-secondary);
}
.ch2-q-bullets li::before{
content:"";
position:absolute;
left:0;
top:9px;
width:6px;
height:6px;
border-radius:50%;
background:var(--color-accent);
}
/*---------------------------------------------------------
IMPORTANT BOX — same recipe as recommend-closing-box /
wsi-closing-box (accent tint), already established elsewhere.
---------------------------------------------------------*/
.ch2-important{
display:flex;
align-items:center;
gap:16px;
margin-top:36px;
padding:24px 26px;
border-radius:18px;
background:rgba(var(--color-accent-rgb),.06);
border:1px solid rgba(var(--color-accent-rgb),.22);
}
.ch2-important-icon{
flex-shrink:0;
width:36px;
height:36px;
border-radius:50%;
background:var(--color-accent);
color:var(--color-card-bg);
display:flex;
align-items:center;
justify-content:center;
font-size:16.5px;
margin-top:2px;
}
.ch2-important-text p{
margin:0 0 8px;
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:18px;
line-height:1.6;
color:var(--color-text-primary);
}
.ch2-important-text p:last-child{
margin-bottom:0;
}
/*---------------------------------------------------------
RIGHT — sticky illustration image
---------------------------------------------------------*/
.ch2-visual{
height:100%;
}
.ch2-visual-sticky{
position:sticky;
top:110px;
}
.ch2-visual-img{
display:block;
width:100%;
height:auto;
border-radius:24px;
border:1px solid var(--color-border);
box-shadow:0 30px 70px rgba(0,0,0,.12);
object-fit:cover;
}
.ch2-visual-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:4/5;
border-radius:24px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-size:13.5px;
font-weight:600;
}
.ch2-visual-placeholder i{ font-size:26px; opacity:.6; }
/*=========================================================
SCROLL REVEAL — chapter-2.js is-visible class toggle karta hai
=========================================================*/
.ch2-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ch2-visual.ch2-reveal{ transition-delay:.1s; }
.ch2-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ch2-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:991px){
.ch2-section{ padding:90px 0; }
.ch2-grid{
grid-template-columns:1fr;
gap:44px;
}
.ch2-text{ max-width:100%; }
.ch2-visual{ order:2; height:auto; }
.ch2-visual-sticky{ position:static; }
}
@media (max-width:576px){
.ch2-section{ padding:70px 0; }
.ch2-heading{ font-size:26px; }
.ch2-q-body{ padding-left:0; margin-top:2px; }
.ch2-important{
flex-direction:column;
padding:20px;
}
}
/*=========================================================
CHAPTER 3 — Why Some Businesses Get Recommended
File: assets/css/chapter-3.css
Prefix: ch3- — apna khud ka namespace, koi clash nahi
home.css ke .change-section/.recommend-section/.cw-section se,
bhale hi visual pattern wahi hai (mirror-alternating grid).
=========================================================*/
/* shared image treatment across all ch3 sections */
.ch3-visual-img{
display:block;
width:100%;
height:auto;
border-radius:24px;
border:1px solid var(--color-border);
box-shadow:0 30px 70px rgba(0,0,0,.12);
object-fit:cover;
}
.ch3-visual-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:4/3;
border-radius:24px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-size:13.5px;
font-weight:600;
}
.ch3-visual-placeholder i{ font-size:26px; opacity:.6; }
/*=========================================================
SHARED WRAPPER — poora Chapter 3 ek hi section/background me
rehta hai; blocks ke beech section-jump ki jagah subtle
divider lines hain, taaki ek hi chapter jaisa flow lage.
=========================================================*/
.ch3-section{
background:var(--color-bg-secondary);
padding:110px 0 100px;
overflow:hidden;
}
.ch3-kicker{
display:block;
text-align:center;
font-family:"Manrope",sans-serif;
font-size:12.5px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:56px;
}
.ch3-block{
padding:64px 0;
}
.ch3-block:first-of-type{
padding-top:0;
}
.ch3-block:last-of-type{
padding-bottom:0;
}
/* har naye block ke upar ek hairline rule — sections ko
"ek dusre se juda hua" dikhata hai, alag page jaisa nahi */
.ch3-divider{
border-top:1px solid var(--color-border);
}
/*=========================================================
BLOCK 2 VISUAL — Before/After flow card (built, no image)
=========================================================*/
.ch3-flow-card{
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:24px;
padding:36px 32px;
box-shadow:0 30px 70px rgba(0,0,0,.08);
}
.ch3-flow-row{
display:flex;
align-items:center;
gap:20px;
}
.ch3-flow-label{
flex-shrink:0;
width:64px;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--color-text-secondary);
}
.ch3-flow-label-accent{
color:var(--color-accent);
}
.ch3-flow-steps{
flex:1;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.ch3-flow-step{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
min-width:74px;
}
.ch3-flow-icon{
width:46px;
height:46px;
border-radius:14px;
background:var(--color-bg-secondary);
border:1px solid var(--color-border);
display:flex;
align-items:center;
justify-content:center;
color:var(--color-text-secondary);
font-size:16px;
}
.ch3-flow-icon-accent{
background:var(--color-accent);
border-color:var(--color-accent);
color:#fff;
box-shadow:0 10px 22px rgba(var(--color-accent-rgb),.28);
}
.ch3-flow-text{
font-size:11.5px;
font-weight:700;
color:var(--color-text-secondary);
text-align:center;
}
.ch3-flow-step-accent .ch3-flow-text{
color:var(--color-text-primary);
}
.ch3-flow-arrow{
color:var(--color-border);
font-size:12px;
flex-shrink:0;
}
.ch3-flow-arrow-accent{
color:var(--color-accent);
}
.ch3-flow-divider{
display:flex;
align-items:center;
justify-content:center;
color:var(--color-border);
font-size:14px;
padding:16px 0;
padding-left:64px;
}
.ch3-flow-stat{
display:flex;
align-items:center;
gap:10px;
margin-top:28px;
padding:14px 18px;
border-radius:14px;
background:var(--color-bg-secondary);
border:1px solid var(--color-border);
font-size:13.5px;
font-weight:600;
color:var(--color-text-primary);
}
.ch3-flow-stat-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--color-accent);
flex-shrink:0;
}
/*=========================================================
BLOCK 3 VISUAL — AI answer mockup card (built, no image)
=========================================================*/
.ch3-ai-card{
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:24px;
padding:32px;
box-shadow:0 30px 70px rgba(0,0,0,.08);
}
.ch3-ai-query{
display:flex;
align-items:center;
gap:14px;
padding-bottom:24px;
margin-bottom:24px;
border-bottom:1px solid var(--color-border);
}
.ch3-ai-query-avatar{
flex-shrink:0;
width:40px;
height:40px;
border-radius:50%;
background:linear-gradient(160deg,var(--color-text-primary),#000);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
}
.ch3-ai-query p{
margin:0;
font-size:14.5px;
font-weight:600;
color:var(--color-text-primary);
line-height:1.5;
}
.ch3-ai-answer-badge{
display:inline-flex;
align-items:center;
gap:8px;
font-size:11.5px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--color-accent);
background:rgba(var(--color-accent-rgb),.1);
border:1px solid rgba(var(--color-accent-rgb),.28);
padding:6px 14px;
border-radius:30px;
margin-bottom:18px;
}
.ch3-ai-result{
display:flex;
align-items:center;
gap:14px;
padding:16px 18px;
border-radius:16px;
margin-bottom:12px;
}
.ch3-ai-result:last-child{ margin-bottom:0; }
.ch3-ai-result-yes{
background:rgba(var(--color-highlight-rgb),.08);
border:1px solid rgba(var(--color-highlight-rgb),.25);
}
.ch3-ai-result-no{
background:var(--color-bg-secondary);
border:1px solid var(--color-border);
opacity:.7;
}
.ch3-ai-result-icon{
flex-shrink:0;
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
}
.ch3-ai-result-yes .ch3-ai-result-icon{
background:var(--color-highlight);
color:#fff;
}
.ch3-ai-result-no .ch3-ai-result-icon{
background:var(--color-border);
color:var(--color-text-secondary);
}
.ch3-ai-result-text{
display:flex;
flex-direction:column;
gap:2px;
}
.ch3-ai-result-text strong{
font-size:14.5px;
font-weight:700;
color:var(--color-text-primary);
}
.ch3-ai-result-text span{
font-size:12.5px;
color:var(--color-text-secondary);
}
/*=========================================================
BLOCK 4 VISUAL — connected hub diagram (built, no image)
=========================================================*/
.ch3-hub-card{
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:24px;
padding:32px;
box-shadow:0 30px 70px rgba(0,0,0,.08);
}
.ch3-hub-diagram{
position:relative;
width:100%;
aspect-ratio:480/420;
}
.ch3-hub-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.ch3-hub-lines path{
fill:none;
stroke:rgba(var(--color-accent-rgb),.32);
stroke-width:1.6;
stroke-dasharray:4 5;
}
.ch3-hub-center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:128px;
height:128px;
border-radius:50%;
background:linear-gradient(160deg,var(--color-text-primary) 0%,#000 100%);
box-shadow:0 20px 45px rgba(var(--color-accent-rgb),.25);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
z-index:2;
}
.ch3-hub-center i{
color:var(--color-accent);
font-size:22px;
}
.ch3-hub-center span{
color:#fff;
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:12.5px;
line-height:1.3;
text-align:center;
}
.ch3-hub-node{
position:absolute;
display:flex;
align-items:center;
gap:8px;
background:var(--color-bg-secondary);
border:1px solid var(--color-border);
border-radius:40px;
padding:9px 14px;
font-size:12px;
font-weight:700;
color:var(--color-text-primary);
white-space:nowrap;
z-index:3;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.ch3-hub-node i{
color:var(--color-accent);
font-size:12px;
}
.ch3-hub-node-tl{ left:0; top:6%; }
.ch3-hub-node-ml{ left:-4%; top:47%; transform:translateY(-50%); }
.ch3-hub-node-bl{ left:0; bottom:6%; }
.ch3-hub-node-tr{ right:0; top:6%; }
.ch3-hub-node-mr{ right:-4%; top:47%; transform:translateY(-50%); }
.ch3-hub-node-br{ right:0; bottom:6%; }
/*=========================================================
BLOCK 1 — INTRO (right text | left illustration, 1fr / 0.85fr)
=========================================================*/
.ch3-intro-grid{
display:grid;
grid-template-columns:1fr 0.85fr;
gap:64px;
align-items:center;
}
.ch3-intro-text{
max-width:560px;
}
.ch3-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(28px,3.2vw,42px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 16px;
}
.ch3-subheading{
font-size:16.5px;
line-height:1.75;
color:var(--color-text-secondary);
margin:0 0 28px;
}
.ch3-opening p{
font-size:16px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 14px;
}
.ch3-opening p:last-child{ margin-bottom:0; }
.ch3-important{
display:flex;
align-items:center;
gap:16px;
margin-top:32px;
padding:24px 26px;
border-radius:18px;
background:rgba(var(--color-accent-rgb),.06);
border:1px solid rgba(var(--color-accent-rgb),.22);
}
.ch3-important-icon{
flex-shrink:0;
width:36px;
height:36px;
border-radius:50%;
background:var(--color-accent);
color:var(--color-card-bg);
display:flex;
align-items:center;
justify-content:center;
font-size:16.5px;
margin-top:2px;
}
.ch3-important-text p{
margin:0 0 6px;
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:18px;
line-height:1.6;
color:var(--color-text-primary);
}
.ch3-important-text p:last-child{ margin-bottom:0; }
/*=========================================================
BLOCK 2 — PROOF 1: text left ~45% (0.85fr) | image right ~55% (1fr)
=========================================================*/
.ch3-s1-grid{
display:grid;
grid-template-columns:0.85fr 1fr;
gap:64px;
align-items:center;
}
.ch3-s1-text{ max-width:520px; }
.ch3-s1-heading{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:clamp(26px,3vw,36px);
line-height:1.25;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 20px;
}
.ch3-s1-body p{
font-size:16px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 16px;
}
.ch3-s1-body p:last-child{ margin-bottom:0; }
.ch3-s1-closing{
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--color-border);
}
.ch3-s1-closing p{
margin:0 0 4px;
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:clamp(20px,2.2vw,26px);
line-height:1.4;
letter-spacing:-.01em;
color:var(--color-text-primary);
}
.ch3-s1-closing p:last-child{ margin-bottom:0; }
/*=========================================================
BLOCK 3 — PROOF 2: image left | text right, 50/50 (mirror)
=========================================================*/
.ch3-s2-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
}
.ch3-s2-heading{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:clamp(26px,3vw,36px);
line-height:1.25;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 20px;
}
.ch3-s2-body p{
font-size:16px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 16px;
}
.ch3-s2-body p:last-child{ margin-bottom:0; }
.ch3-s2-closing-box{
display:flex;
align-items:center;
gap:14px;
margin-top:28px;
padding:22px 24px;
border-radius:16px;
background:rgba(var(--color-accent-rgb),.06);
border:1px solid rgba(var(--color-accent-rgb),.22);
}
.ch3-s2-closing-icon{
flex-shrink:0;
width:34px;
height:34px;
border-radius:50%;
background:var(--color-accent);
color:var(--color-card-bg);
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
}
.ch3-s2-closing p{
margin:0;
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:clamp(17px,1.9vw,18px);
line-height:1.6;
letter-spacing:-.01em;
color:var(--color-text-primary);
}
.ch3-s2-closing p + p{ margin-top:2px; }
/*=========================================================
BLOCK 4 — PROOF 3: text left ~45% (0.85fr) | image right ~55% (1fr)
=========================================================*/
.ch3-s3-grid{
display:grid;
grid-template-columns:0.85fr 1fr;
gap:64px;
align-items:center;
}
.ch3-s3-text{ max-width:520px; }
.ch3-s3-heading{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:clamp(26px,3vw,36px);
line-height:1.25;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 20px;
}
.ch3-s3-body p{
font-size:16px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 16px;
}
.ch3-s3-body p:last-child{ margin-bottom:0; }
.ch3-s3-closing{
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--color-border);
}
.ch3-s3-closing p{
margin:0 0 4px;
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:clamp(20px,2.2vw,26px);
line-height:1.4;
letter-spacing:-.01em;
color:var(--color-text-primary);
}
.ch3-s3-closing p:last-child{ margin-bottom:0; }
/*=========================================================
SCROLL REVEAL — chapter-3.js is-visible class toggle karta hai
=========================================================*/
.ch3-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ch3-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ch3-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE — sab 4 blocks ek hi pattern follow karte hain:
single column, image hamesha text ke baad (natural reading order)
=========================================================*/
@media (max-width:991px){
.ch3-section{ padding:90px 0 80px; }
.ch3-kicker{ margin-bottom:44px; }
.ch3-block{ padding:48px 0; }
.ch3-intro-grid,
.ch3-s1-grid,
.ch3-s2-grid,
.ch3-s3-grid{
grid-template-columns:1fr;
gap:40px;
}
.ch3-intro-text,
.ch3-s1-text,
.ch3-s3-text{
max-width:100%;
}
/* text hamesha upar, image hamesha neeche — chahe design me
"left"/"right" kuch bhi ho, mobile pe reading order fix hai */
.ch3-intro-text{ order:1; }
.ch3-intro-visual{ order:2; }
.ch3-s2-visual{ order:2; }
.ch3-s2-text{ order:1; }
}
@media (max-width:576px){
.ch3-section{ padding:70px 0 60px; }
.ch3-block{ padding:40px 0; }
.ch3-visual-img{ border-radius:18px; }
.ch3-important,
.ch3-s2-closing-box{
flex-direction:column;
padding:20px;
}
/* built infographics — chhote screens pe compact */
.ch3-flow-card,
.ch3-ai-card,
.ch3-hub-card{
padding:22px;
}
.ch3-flow-label{ width:52px; font-size:10.5px; }
.ch3-flow-icon{ width:38px; height:38px; font-size:14px; }
.ch3-flow-text{ font-size:10.5px; }
.ch3-flow-divider{ padding-left:52px; }
.ch3-hub-node{ font-size:10.5px; padding:7px 11px; }
.ch3-hub-node span{ display:none; } /* mobile pe sirf icon, label clutter karega */
.ch3-hub-center{ width:96px; height:96px; }
.ch3-hub-center span{ font-size:11px; }
}
/*=========================================================
CHAPTER 4 — Why Traditional Marketing Isn't Enough
File: assets/css/chapter-4.css
Prefix: ch4- — apna khud ka namespace.
Layout: Chapter 1 jaisa center-aligned narrow column, closing
ki jagah ek highlighted pull-quote card (Playfair italic,
bada accent quote mark) — ye chapter ka signature moment hai.
=========================================================*/
.ch4-section{
background:var(--theme-bg);
padding:110px 0;
}
.ch4-wrap{
/* max-width:720px; */
margin:0 auto;
text-align:center;
}
/*---------------------------------------------------------
HEADING BLOCK
---------------------------------------------------------*/
.ch4-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(30px,3.6vw,46px);
line-height:1.2;
letter-spacing:-.01em;
/* color:var(--color-text-primary); */
margin:0 0 18px;
}
.ch4-subheading{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:clamp(17px,1.8vw,20px);
line-height:1.6;
color:var(--color-accent);
max-width:580px;
margin:0 auto 44px;
}
/*==============================
BODY POINTS
===============================*/
.ch4-body{
display: grid;
text-align: left;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, auto);
gap: 20px;
grid-auto-flow: column;
margin-bottom: 45px;
}
.ch4-point{
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
background: #eae3d900;
border: 1px solid #efe7df21;
border-radius: 16px;
transition: .35s;
}
.ch4-point:hover{
transform:translateY(-4px);
border-color:var(--color-accent);
box-shadow:0 18px 40px rgba(0,0,0,.06);
}
.ch4-icon{
width:30px;
height:30px;
min-width:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(var(--color-accent-rgb),0.12);
color:var(--color-accent);
font-size:15px;
}
.ch4-content p{
margin:0;
font-size:17px;
line-height:1.8;
/* color:var(--color-text-secondary); */
}
/*---------------------------------------------------------
PULL-QUOTE — takeaway, distinct from the bold "closing
statement" style used in Ch1/Ch3 (that's a conclusion line;
this is a standalone highlighted quote).
---------------------------------------------------------*/
.ch4-quote{
position:relative;
margin:52px 0 0;
padding:44px 40px 36px;
border-radius:22px;
background:var(--color-card-bg);
border:1px solid var(--color-border);
box-shadow:0 24px 60px rgba(0,0,0,.06);
}
.ch4-quote-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:67px;
height:67px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.1);
color:var(--color-accent);
font-size:30px;
}
.ch4-quote-text p{
margin: 0 0 6px;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.6;
/* color: var(--color-text-primary); */
text-align: start;
}
/*=========================================================
SCROLL REVEAL — chapter-4.js is-visible class toggle karta hai
=========================================================*/
.ch4-reveal{
opacity:0;
transform:translateY(20px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ch4-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ch4-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:576px){
.ch4-section{ padding:80px 0; }
.ch4-heading{ font-size:28px; }
.ch4-subheading{ font-size:16px; margin-bottom:32px; }
.ch4-quote{
padding:32px 24px 28px;
margin-top:40px;
}
}
/*=========================================================
CHAPTER 5 — How to Become Easier for AI to Recommend?
File: assets/css/chapter-5.css
Prefix: ch5- — apna khud ka namespace.
Layout: text left (0.85fr) / sticky illustration right (1fr) —
same recipe jo Chapter 2 me use hui thi. "Four Simple Questions"
ki jagah yahan "Four Simple Principles" ek 2x2 card grid hai,
aur end me Chapter 4 jaisa hi pull-quote + ek primary CTA button.
=========================================================*/
.ch5-section{
background:var(--color-bg-secondary);
padding:120px 0;
overflow:hidden;
}
.ch5-grid{
display:grid;
grid-template-columns:0.85fr 1fr;
gap:64px;
align-items:stretch;
}
/*---------------------------------------------------------
LEFT — text
---------------------------------------------------------*/
.ch5-text{
max-width:580px;
}
.ch5-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(28px,3.2vw,42px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 20px;
}
.ch5-subheading p{
font-size:16.5px;
line-height:1.75;
color:var(--color-text-secondary);
margin:0 0 10px;
}
.ch5-subheading p:last-child{
margin-bottom:0;
font-weight:700;
color:var(--color-accent);
}
.ch5-opening{
margin-top:28px;
}
.ch5-opening p{
font-size:16px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 16px;
}
.ch5-opening p:last-child{
margin-bottom:0;
}
.ch5-principles-title{
font-family:"Manrope",sans-serif !important;
font-weight:800;
font-size:13px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-accent);
margin:40px 0 20px;
}
/*---------------------------------------------------------
PRINCIPLES — 2x2 card grid
---------------------------------------------------------*/
.ch5-principles{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:18px;
}
.ch5-principle{
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:18px;
padding:24px 22px;
transition:.3s;
}
.ch5-principle:hover{
transform:translateY(-4px);
box-shadow:0 20px 40px rgba(0,0,0,.06);
border-color:rgba(var(--color-accent-rgb),.3);
}
.ch5-principle-icon{
width:42px;
height:42px;
border-radius:12px;
background:rgba(var(--color-accent-rgb),.1);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:17px;
margin-bottom:16px;
}
.ch5-principle-title{
margin:0 0 10px;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16.5px;
color:var(--color-text-primary);
}
.ch5-principle-lead{
margin:0 0 8px;
font-size:15.5px;
font-weight:600;
color:var(--color-text-secondary);
}
.ch5-principle-text{
margin:0 0 6px;
font-size:15.5px;
line-height:1.7;
color:var(--color-text-secondary);
}
.ch5-principle-text:last-child{
margin-bottom:0;
}
.ch5-principle-bullets{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:6px;
}
.ch5-principle-bullets li{
position:relative;
padding-left:18px;
font-size:15.5px;
line-height:1.6;
color:var(--color-text-secondary);
}
.ch5-principle-bullets li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:5px;
height:5px;
border-radius:50%;
background:var(--color-accent);
}
/*---------------------------------------------------------
TAKEAWAY — pull-quote, same recipe as Chapter 4's .ch4-quote
---------------------------------------------------------*/
.ch5-quote{
position:relative;
margin:40px 0 0;
padding:36px 32px 30px;
border-radius:22px;
background:var(--color-card-bg);
border:1px solid var(--color-border);
box-shadow:0 24px 60px rgba(0,0,0,.06);
display: flex;
gap: 20px;
align-items: center;
}
.ch5-quote-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:67px;
height:67px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.1);
color:var(--color-accent);
font-size:35px;
margin-bottom:16px;
}
.ch5-quote-text p{
margin: 0 0 6px;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.6;
color: var(--color-text-primary);
}
.ch5-important {
display: flex;
align-items: center;
gap: 16px;
margin-top: 32px;
padding: 24px 26px;
border-radius: 18px;
background: rgba(var(--color-accent-rgb), .06);
border: 1px solid rgba(var(--color-accent-rgb), .22);
}
/* .ch5-quote-text p:last-child{
margin-bottom:0;
font-style:normal;
font-family:"Inter",sans-serif;
font-weight:400;
font-size:15.5px;
color:var(--color-text-secondary);
} */
/*---------------------------------------------------------
CTA
---------------------------------------------------------*/
.ch5-cta-wrap{
margin-top:32px;
text-align: center;
}
.ch5-btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--color-accent);
color:#fff !important;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
padding:16px 28px;
border-radius:40px;
box-shadow:0 16px 36px rgba(var(--color-accent-rgb),.28);
transition:.35s cubic-bezier(.22,1,.36,1);
}
.ch5-btn-primary:hover{
background:var(--color-accent-hover);
color:#fff !important;
transform:translateY(-3px);
box-shadow:0 20px 44px rgba(var(--color-accent-rgb),.38);
}
.ch5-btn-primary i{
font-size:13px;
transition:transform .3s ease;
}
.ch5-btn-primary:hover i{
transform:translateX(3px);
}
/*---------------------------------------------------------
RIGHT — sticky illustration image
---------------------------------------------------------*/
.ch5-visual{
height:100%;
}
.ch5-visual-sticky{
position:sticky;
top:110px;
}
.ch5-visual-img{
display:block;
width:100%;
height:auto;
border-radius:24px;
border:1px solid var(--color-border);
box-shadow:0 30px 70px rgba(0,0,0,.12);
object-fit:cover;
}
.ch5-visual-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:4/5;
border-radius:24px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-size:13.5px;
font-weight:600;
}
.ch5-visual-placeholder i{ font-size:26px; opacity:.6; }
/*=========================================================
SCROLL REVEAL — chapter-5.js is-visible class toggle karta hai
=========================================================*/
.ch5-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ch5-visual.ch5-reveal{ transition-delay:.1s; }
.ch5-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ch5-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:991px){
.ch5-section{ padding:90px 0; }
.ch5-grid{
grid-template-columns:1fr;
gap:44px;
}
.ch5-text{ max-width:100%; }
.ch5-visual{ order:2; height:auto; }
.ch5-visual-sticky{ position:static; }
}
@media (max-width:576px){
.ch5-section{ padding:70px 0; }
.ch5-heading{ font-size:26px; }
.ch5-principles{
grid-template-columns:1fr;
}
.ch5-quote{ padding:26px 22px 22px; }
.ch5-cta-wrap{ text-align:center; }
.ch5-btn-primary{ width:100%; justify-content:center; }
}
/*=========================================================
CHAPTER 6 — Ready to Become Easier for AI to Recommend?
File: assets/css/chapter-6.css
Prefix: ch6- — apna khud ka namespace.
Redesigned to match the "end of guide" moment: ek hi light
section jisme —
1) closing kicker + heading + supporting copy
2) "book handoff" illustration: closed guide (learned) →
4-step dotted path (Learn/Understand/Improve/Grow) →
open book (next step / AI Visibility Growth System)
3) do action cards (Assessment + Growth System)
Note: is file ko load karne se pehle theme me Google Font
"Caveat" enqueue kar dena (handwritten captions ke liye).
Agar enqueue nahi karna, to niche wala @import use ho jayega.
=========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');
:root{
--ch6-script-font: 'Caveat', cursive;
--ch6-border: rgba(15,15,15,.08);
--ch6-card-bg: #ffffff;
--ch6-soft-bg: #FBF9F6;
}
/*=========================================================
SECTION SHELL
=========================================================*/
.ch6-section{
background:#fefdfb;
padding:130px 0 140px;
overflow-x:hidden;
}
.ch6-section *{
box-sizing:border-box;
}
.ch6-section .container{
width:100%;
}
/*=========================================================
BLOCK 1 — CLOSING INTRO
=========================================================*/
.ch6-intro-wrap{
max-width:700px;
margin:0 auto;
text-align:center;
}
.ch6-intro-kicker{
display:inline-flex;
align-items:center;
gap:8px;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:22px;
}
.ch6-intro-kicker i{
font-size:13px;
color:var(--color-accent);
}
.ch6-intro-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(30px,4vw,50px);
line-height:1.2;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 26px;
}
.ch6-intro-heading .ch6-highlight{
color:var(--color-accent);
}
.ch6-intro-supporting p{
font-size:17px;
line-height:1.85;
color:var(--color-text-secondary);
margin:0 0 10px;
}
.ch6-intro-supporting p:last-child{
margin-bottom:0;
font-weight:700;
color:var(--color-text-primary);
}
.ch6-intro-supporting p .ch6-highlight{
color:var(--color-accent);
font-weight:700;
}
/*=========================================================
BLOCK 2 — HANDOFF ILLUSTRATION
(closed book → dotted path with 4 icon-nodes → open book)
=========================================================*/
.ch6-handoff{
margin-top:96px;
}
.ch6-handoff-row{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:28px;
max-width:1120px;
margin:0 auto;
}
/* -------- closed book (left) -------- */
.ch6-book-col{
display:flex;
flex-direction:column;
align-items:center;
}
.ch6-book-closed{
position:relative;
width:190px;
max-width:100%;
height:240px;
}
.ch6-book-closed .ch6-book-spine{
position:absolute;
left:-10px;
top:6px;
bottom:6px;
width:14px;
border-radius:4px 0 0 4px;
background:linear-gradient(180deg,#d9d9d9,#c3c3c3);
box-shadow:inset -2px 0 3px rgba(0,0,0,.12);
}
.ch6-book-closed .ch6-book-cover{
position:relative;
width:100%;
height:100%;
border-radius:3px 8px 8px 3px;
background:#ffffff;
border:1px solid var(--ch6-border);
box-shadow:0 24px 50px -20px rgba(20,20,20,.28),
0 2px 0 rgba(0,0,0,.03);
padding:26px 22px;
display:flex;
flex-direction:column;
}
.ch6-book-cover-title{
font-family:var(--font-heading);
font-weight:700;
font-size:19px;
line-height:1.32;
color:var(--color-text-primary);
}
.ch6-book-cover-rule{
width:34px;
height:3px;
border-radius:2px;
background:var(--color-accent);
margin-top:14px;
}
.ch6-book-cover-lines{
margin-top:auto;
display:flex;
flex-direction:column;
gap:7px;
opacity:.5;
}
.ch6-book-cover-lines span{
display:block;
height:2px;
border-radius:2px;
background:#dcdcdc;
}
.ch6-book-cover-lines span:nth-child(1){ width:70%; }
.ch6-book-cover-lines span:nth-child(2){ width:45%; }
.ch6-book-badge{
position:absolute;
right:-12px;
bottom:-12px;
width:38px;
height:38px;
border-radius:50%;
background:var(--color-accent);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
box-shadow:0 10px 22px rgba(var(--color-accent-rgb),.4);
border:3px solid var(--ch6-soft-bg, #fff);
}
.ch6-book-caption{
margin-top:22px;
font-family:var(--ch6-script-font);
font-size:22px;
color:var(--color-text-secondary);
position:relative;
}
.ch6-book-caption::after{
content:"";
display:block;
width:56px;
height:2px;
background:rgba(15,15,15,.18);
margin:4px auto 0;
}
.ch6-book-caption--accent{
color:var(--color-accent);
}
.ch6-book-caption--accent::after{
background:rgba(var(--color-accent-rgb),.35);
}
/* -------- dotted path with 4 icon nodes (center) -------- */
.ch6-path{
position:relative;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:4px;
padding-top:36px;
}
.ch6-path::before{
content:"";
position:absolute;
left:36px;
right:36px;
top:56px;
border-top:2px dashed rgba(15,15,15,.18);
z-index:0;
}
.ch6-path-arrow{
position:absolute;
right:-6px;
top:44px;
color:rgba(15,15,15,.3);
font-size:15px;
z-index:1;
}
.ch6-path-step{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
flex:0 1 96px;
min-width:60px;
max-width:96px;
}
.ch6-path-icon{
width:56px;
height:56px;
border-radius:50%;
background:#fff;
border:1px solid var(--ch6-border);
box-shadow:0 14px 28px -14px rgba(20,20,20,.25);
display:flex;
align-items:center;
justify-content:center;
font-size:19px;
color:var(--color-accent);
}
.ch6-path-label{
margin-top:14px;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--color-text-secondary);
text-align:center;
}
/* -------- open book (right) -------- */
.ch6-book-col--open{
align-items:center;
}
.ch6-book-open{
position:relative;
width:320px;
max-width:100%;
height:230px;
filter:drop-shadow(0 26px 46px rgba(20,20,20,.22));
}
.ch6-book-open-pages{
position:absolute;
inset:0;
display:flex;
border-radius:6px;
overflow:hidden;
border:1px solid var(--ch6-border);
}
.ch6-book-open-page{
flex:1;
background:#ffffff;
padding:22px;
position:relative;
}
.ch6-book-open-page--left{
background:linear-gradient(90deg,#f4f2ee,#ffffff);
display:flex;
align-items:flex-end;
justify-content:center;
}
.ch6-book-open-page--right{
display:flex;
flex-direction:column;
}
.ch6-book-open-spine{
position:absolute;
left:50%;
top:0;
bottom:0;
width:10px;
transform:translateX(-50%);
background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,0) 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.10));
z-index:2;
pointer-events:none;
}
/* simple bar-chart mini illustration on the left page */
.ch6-mini-chart{
display:flex;
align-items:flex-end;
gap:6px;
height:70px;
}
.ch6-mini-chart span{
width:12px;
border-radius:3px 3px 0 0;
background:linear-gradient(180deg,#e2e2e2,#cfcfcf);
}
.ch6-mini-chart span:nth-child(1){ height:30%; }
.ch6-mini-chart span:nth-child(2){ height:55%; }
.ch6-mini-chart span:nth-child(3){ height:40%; }
.ch6-mini-chart span:nth-child(4){ height:80%; background:linear-gradient(180deg,rgba(var(--color-accent-rgb),.65),var(--color-accent)); }
.ch6-mini-chart i{
position:relative;
top:-56px;
left:-18px;
color:var(--color-accent);
font-size:14px;
}
.ch6-book-eyebrow{
font-size:11px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:8px;
}
.ch6-book-open-title{
font-family:var(--font-heading);
font-weight:700;
font-size:18px;
color:var(--color-text-primary);
margin:0 0 4px;
line-height:1.25;
}
.ch6-book-open-sub{
font-size:13.5px;
color:var(--color-text-secondary);
line-height:1.4;
margin:0 0 16px;
}
.ch6-book-open-btn{
align-self:flex-start;
display:inline-flex;
align-items:center;
gap:8px;
background:var(--color-accent);
color:#fff !important;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:13.5px;
padding:10px 18px;
border-radius:40px;
box-shadow:0 12px 26px rgba(var(--color-accent-rgb),.35);
transition:.3s cubic-bezier(.22,1,.36,1);
}
.ch6-book-open-btn:hover{
background:var(--color-accent-hover);
color:#fff !important;
transform:translateY(-2px);
}
.ch6-book-open-btn i{ font-size:11px; }
.ch6-book-ribbon{
position:absolute;
left:50%;
bottom:-14px;
transform:translateX(-50%);
width:14px;
height:26px;
background:var(--color-accent);
clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
z-index:3;
}
/*=========================================================
BLOCK 3 — ACTION CARDS
=========================================================*/
.ch6-cards{
margin-top:88px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
max-width:1120px;
margin-left:auto;
margin-right:auto;
}
.ch6-card{
background:var(--ch6-card-bg);
border:1px solid var(--ch6-border);
border-radius:18px;
padding:34px 32px;
display:flex;
gap:20px;
align-items:flex-start;
}
.ch6-card-icon{
flex:none;
width:56px;
height:56px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.12);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.ch6-card-title{
font-family:var(--font-heading);
font-weight:700;
font-size:19px;
color:var(--color-text-primary);
margin:0 0 8px;
}
.ch6-card-body{
font-size:14.5px;
line-height:1.7;
color:var(--color-text-secondary);
margin:0 0 18px;
}
.ch6-btn-outline{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--color-accent);
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14px;
padding:11px 20px;
border-radius:40px;
border:1.5px solid rgba(var(--color-accent-rgb),.4);
transition:.3s;
}
.ch6-btn-outline:hover{
background:var(--color-accent);
color:#fff !important;
border-color:var(--color-accent);
}
.ch6-btn-outline i{
font-size:12px;
transition:transform .3s ease;
}
.ch6-btn-outline:hover i{
transform:translateX(3px);
}
/*=========================================================
SCROLL REVEAL — chapter-6.js is-visible class toggle karta hai
=========================================================*/
.ch6-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .8s cubic-bezier(.22,1,.36,1),
transform .8s cubic-bezier(.22,1,.36,1);
}
.ch6-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ch6-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
/* ---- tablet: stack closed book / path / open book ---- */
@media (max-width:991px){
.ch6-handoff-row{
grid-template-columns:1fr;
justify-items:center;
row-gap:44px;
}
.ch6-book-col--closed{ order:1; }
.ch6-path{
order:2;
width:100%;
max-width:460px;
padding-top:40px;
}
.ch6-path-arrow{ display:none; } /* pointed "right" only makes sense in the horizontal desktop row */
.ch6-book-col--open{ order:3; }
.ch6-cards{ grid-template-columns:1fr; max-width:520px; }
}
/* ---- small tablet / large phone ---- */
@media (max-width:767px){
.ch6-section{ padding:90px 0 100px; }
.ch6-handoff{ margin-top:70px; }
.ch6-cards{ margin-top:64px; gap:20px; }
.ch6-intro-heading{ font-size:30px; }
.ch6-path{
flex-wrap:wrap;
justify-content:center;
row-gap:28px;
column-gap:28px;
padding-top:0;
max-width:360px;
}
.ch6-path::before{ display:none; }
.ch6-path-step{ flex:0 0 auto; width:76px; min-width:0; max-width:none; }
}
/* ---- phone ---- */
@media (max-width:576px){
.container{ padding:0 20px; }
.ch6-intro-heading{ font-size:25px; }
.ch6-intro-kicker{ font-size:11.5px; }
.ch6-intro-supporting p{ font-size:15px; line-height:1.7; }
.ch6-handoff{ margin-top:56px; }
.ch6-handoff-row{ row-gap:36px; }
.ch6-book-closed{ width:150px; height:190px; }
.ch6-book-closed .ch6-book-cover{ padding:18px 16px; }
.ch6-book-cover-title{ font-size:15.5px; }
.ch6-book-badge{ width:32px; height:32px; font-size:12px; }
.ch6-book-caption{ font-size:19px; margin-top:16px; }
.ch6-path{ column-gap:20px; row-gap:24px; }
.ch6-path-step{ width:64px; }
.ch6-path-icon{ width:46px; height:46px; font-size:16px; }
.ch6-path-label{ font-size:10.5px; margin-top:10px; }
/* .ch6-book-open{ width:100%; max-width:300px; height:200px; } */
.ch6-book-open-page{ padding:16px; }
.ch6-book-open-title{ font-size:16px; }
.ch6-book-open-sub{ font-size:12.5px; }
.ch6-book-open-btn{ padding:9px 15px; font-size:12.5px; }
.ch6-cards{ margin-top:52px; gap:16px; }
.ch6-card{ flex-direction:column; padding:26px 22px; gap:14px; }
.ch6-card-icon{ width:48px; height:48px; font-size:18px; }
.ch6-card-title{ font-size:17.5px; }
}
/* ---- small phone ---- */
@media (max-width:400px){
.ch6-book-closed{ width:130px; height:165px; }
.ch6-book-open{ height:190px; }
.ch6-path-step{ width:56px; }
.ch6-path-icon{ width:42px; height:42px; font-size:15px; }
.ch6-path-label{ font-size:10px; }
}
/* Handoff Image */
.ch6-handoff-image{
margin:70px auto;
text-align:center;
}
.ch6-handoff-image img{
width:100%;
/* max-width:1100px; */
height:auto;
display:block;
margin:auto;
}
/*=========================================================
HERO — A Smarter Approach to Becoming the Business AI Recommends
Prefix: sh- (Smarter Hero)
REPLACE INSTRUCTIONS: home.css me jahan se
"/* HERO — A Smarter Approach..." comment start hota hai, wahan se
file ke END tak wala poora block DELETE karo, aur ye poora block
uski jagah paste kar do.
WHY THIS VERSION IS DIFFERENT: Purana version .btn-primary aur
.text-link (global, poori site me shared classes) reuse kar raha
tha + overrides deta tha — isi wajah se buttons stack ho rahe the
aur heading loose dikh rahi thi (kisi cascade/specificity clash
ki wajah se). Ab ye hero bilkul .hic-hero jaisa **self-contained**
hai — apni khud ki .sh-btn-primary / .sh-btn-secondary classes,
koi global button class reuse nahi. Isse ye hero kabhi kisi aur
section ke CSS change se break nahi hoga.
UPDATE: Reassurance strip ab hic- hero jaisa hi bordered card
hai (icon circle + bold title + description line) — pehle sirf
ek chhoti single-line strip thi.
=========================================================*/
.sh-section{
padding:110px 0 60px;
background:var(--color-bg-primary);
overflow:hidden;
}
.sh-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
/*---------------------------------------------------------
LEFT — copy
---------------------------------------------------------*/
.sh-heading{
font-family:"Playfair Display",serif;
font-weight:700;
font-size:clamp(38px,4.6vw,58px);
line-height:1.1;
letter-spacing:-.01em;
color:var(--color-text-primary);
margin:0 0 24px;
}
.sh-highlight{
color:var(--color-accent);
font-style: normal;
}
.sh-subheading p{
font-family:"Inter",sans-serif;
font-size:17px;
line-height:1.75;
font-weight:400;
color:var(--color-text-secondary);
max-width:520px;
margin:0 0 16px;
}
.sh-subheading p:last-child{
margin-bottom:0;
}
.sh-cta-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-top:36px;
}
.sh-btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--color-accent);
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
line-height:1;
padding:16px 28px;
border-radius:40px;
border:none;
box-shadow:0 16px 36px rgba(var(--color-accent-rgb),.28);
transition:.35s cubic-bezier(.22,1,.36,1);
white-space:nowrap;
}
.sh-btn-primary:hover{
background:var(--color-accent-hover);
color:#fff;
transform:translateY(-3px);
box-shadow:0 20px 44px rgba(var(--color-accent-rgb),.38);
}
.sh-btn-primary i{
font-size:13px;
transition:transform .3s ease;
}
.sh-btn-primary:hover i{
transform:translateX(3px);
}
.sh-btn-secondary{
display:inline-flex;
align-items:center;
gap:9px;
background:transparent;
color:var(--color-text-primary);
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14.5px;
line-height:1;
padding:14px 24px;
border-radius:40px;
border:1.5px solid var(--color-border);
transition:.3s;
white-space:nowrap;
}
.sh-btn-secondary:hover{
border-color:var(--color-text-primary);
background:var(--color-text-primary);
color:#fff;
}
.sh-btn-secondary i{
font-size:12px;
transition:transform .3s ease;
}
.sh-btn-secondary:hover i{
transform:translateY(2px);
}
/*---------------------------------------------------------
RIGHT — hero illustration (ACF image)
---------------------------------------------------------*/
.sh-visual{
position:relative;
}
.sh-visual-img{
display:block;
width:100%;
height:auto;
border-radius:24px;
object-fit:cover;
}
.sh-visual-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:4/3;
border-radius:24px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-family:"Inter",sans-serif;
font-size:13.5px;
font-weight:600;
line-height:1.5;
text-align:center;
padding:24px;
}
.sh-visual-placeholder i{
font-size:26px;
opacity:.6;
}
/*=========================================================
REASSURANCE CARD — sits between the hero and Chapter 1
(icon circle + bold title + description, bordered card —
same recipe as .hic-reassurance, apna khud ka "sh-" namespace)
=========================================================*/
.sh-reassurance-strip{
padding:22px 0 34px;
background:var(--color-bg-primary);
}
.sh-reassurance-strip .container{
display:flex;
justify-content:flex-start;
}
.sh-reassurance{
display:flex;
align-items:flex-start;
gap:16px;
padding:22px 24px;
border-radius:18px;
background:var(--color-card-bg);
border:1px solid var(--color-border);
max-width:520px;
margin-top: 36px;
}
.sh-reassurance-icon{
flex-shrink:0;
width:42px;
height:42px;
border-radius:12px;
background:rgba(var(--color-accent-rgb),.1);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:25px;
}
.sh-reassurance-body strong{
display:block;
font-family:"Manrope",sans-serif;
font-size:14.5px;
font-weight:700;
color:var(--color-text-primary);
margin-bottom:4px;
}
.sh-reassurance-body span{
display:block;
font-family:"Inter",sans-serif;
font-size:14.5px;
line-height:1.6;
color:var(--color-text-secondary);
}
/*=========================================================
SCROLL REVEAL — home.js is-visible class toggle karta hai
=========================================================*/
.sh-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.sh-visual.sh-reveal{ transition-delay:.1s; }
.sh-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.sh-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:991px){
.sh-section{ padding:90px 0 40px; }
.sh-grid{
grid-template-columns:1fr;
gap:48px;
}
.sh-visual{ order:2; }
.sh-text{ order:1; }
.sh-subheading p{ max-width:100%; }
}
@media (max-width:576px){
.sh-section{ padding:80px 0 32px; }
.sh-heading{ font-size:32px; }
.sh-cta-row{ flex-direction:column; align-items:stretch; }
.sh-btn-primary,
.sh-btn-secondary{ justify-content:center; }
.sh-visual-img{ border-radius:18px; }
.sh-reassurance-strip .container{ justify-content:center; }
.sh-reassurance{ max-width:100%; }
}
/*=========================================================
SECTION 2 — How AI Builds Confidence
Prefix: hbc- (How AI Builds Confidence)
=========================================================*/
.hbc-section{
padding:80px 0;
background: var(--color-bg-primary);
overflow:hidden;
}
.hbc-grid{
display:grid;
grid-template-columns:60% 40%; /* Left illustration 60% | Right text 40% */
gap:60px;
align-items:center;
}
/*---------------------------------------------------------
LEFT — diagram / infographic image (ACF field)
---------------------------------------------------------*/
.hbc-visual{
position:relative;
}
.hbc-visual-img{
display:block;
width:100%;
height:auto;
border-radius:16px;
object-fit:contain;
}
.hbc-visual-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:4/3;
border-radius:16px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-family:"Inter",sans-serif;
font-size:13.5px;
font-weight:600;
line-height:1.5;
text-align:center;
padding:24px;
}
.hbc-visual-placeholder i{
font-size:26px;
opacity:.6;
}
/*---------------------------------------------------------
RIGHT — copy
---------------------------------------------------------*/
.hbc-eyebrow{
display:inline-flex;
flex-direction:column;
gap:10px;
font-family:"Manrope",sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--color-accent);
margin:0 0 18px;
}
.hbc-eyebrow::after{
content:"";
display:block;
width:34px;
height:2px;
background:var(--color-accent);
}
/* h2 tag khud unclassed hai — sirf accent dot scoped hai */
.hbc-highlight{
color:var(--color-accent);
font-style:normal;
}
.hbc-subheading p{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.8;
font-weight:400;
color:var(--color-text-secondary);
max-width:560px;
margin:0 0 16px;
}
.hbc-subheading p:last-child{
margin-bottom:0;
}
/*---------------------------------------------------------
Feature list (3 items, repeater)
---------------------------------------------------------*/
.hbc-features{
margin-top:32px;
display:flex;
flex-direction:column;
}
.hbc-feature{
display:flex;
align-items:flex-start;
gap:18px;
padding:20px 0;
border-top:1px solid var(--color-border);
}
.hbc-feature:first-child{
border-top:none;
padding-top:0;
}
.hbc-feature-icon{
flex:0 0 auto;
width:52px;
height:52px;
border-radius:50%;
border:1px solid var(--color-border);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:var(--color-card-bg);
}
.hbc-feature-icon img{
width:26px;
height:26px;
object-fit:contain;
}
.hbc-feature-icon i{
font-size:20px;
color:var(--color-accent);
}
.hbc-feature-body h4{
margin:0 0 6px;
font-family:"Manrope",sans-serif;
font-size:15px;
font-weight:700;
letter-spacing:.01em;
text-transform:uppercase;
color:var(--color-text-primary);
}
.hbc-feature-body h4 .hbc-highlight{
color:var(--color-accent);
}
.hbc-feature-body p{
margin:0;
font-family:"Inter",sans-serif;
font-size:15px;
line-height:1.75;
color:var(--color-text-secondary);
}
/*---------------------------------------------------------
Quote strip — full width, below the grid
---------------------------------------------------------*/
.hbc-quote{
margin-top:56px;
background:var(--color-bg-secondary);
border-radius:20px;
padding:44px 48px;
text-align:center;
}
.hbc-quote-mark{
font-family:"Playfair Display",serif;
font-size:52px;
line-height:1;
color:var(--color-accent);
opacity:.35;
display:block;
margin-bottom:4px;
}
.hbc-quote-line{
margin:0;
font-family:"Playfair Display",serif;
font-size:clamp(20px,2.2vw,30px);
line-height:1.4;
color:var(--color-text-primary);
}
.hbc-quote-line-highlight{
margin:6px 0 0;
font-family:"Playfair Display",serif;
font-weight:700;
font-size:clamp(20px,2.2vw,30px);
line-height:1.4;
color:var(--color-accent);
}
/*=========================================================
SCROLL REVEAL — home.js ka wahi is-visible toggle reuse hoga
=========================================================*/
.hbc-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.hbc-text.hbc-reveal{ transition-delay:.1s; }
.hbc-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.hbc-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:991px){
.hbc-section{ padding:60px 0; }
.hbc-grid{
grid-template-columns:1fr;
gap:40px;
}
.hbc-visual{ order:1; }
.hbc-text{ order:2; }
.hbc-subheading p{ max-width:100%; }
.hbc-quote{ padding:36px 28px; }
}
@media (max-width:576px){
.hbc-eyebrow{ font-size:12px; }
.hbc-feature{ gap:14px; }
.hbc-feature-icon{ width:44px; height:44px; }
.hbc-quote{ padding:28px 20px; border-radius:16px; }
}
/*=========================================================
SECTION 3 — Our Philosophy: We Don't Optimize for Algorithms.
We Build Understanding.
Prefix: ophi- (Our Philosophy)
NOTE: Pehle ye "ch1-" prefix use kar raha tha, lekin aapke
home.css me "ch1-" already ek DUSRE section (Chapter 1 — "The
Way People Find Businesses Has Changed", badge/image-wrap wala)
ke liye use ho raha hai. Same stylesheet me dono classes clash
kar jaate — isliye is section ka apna alag namespace "ophi-"
rakha gaya hai, koi clash nahi hoga ab.
ADD INSTRUCTIONS: is poore block ko home.css ke end me paste
kar do (Section 2 / hbc- wale block ke baad).
LAYOUT: Center-aligned. Label -> Heading -> 3 paragraphs -> ek
hi ACF image field (jisme aap khud "Traditional vs RankStellar's
Approach" wala poora VS diagram graphic upload karoge — us
poore box ko HTML/CSS me alag se banaya nahi gaya, bas ek image
slot diya gaya hai).
HEADING RULE: h2 tag par yahan bhi jaan-bujh kar koi class nahi
di gayi — root CSS ki global h2 styling (font, color, size)
hi single source of truth se lagegi.
=========================================================*/
.ophi-section{
padding:90px 0;
background:var(--color-bg-secondary);
text-align:center;
}
.ophi-container{
max-width:900px;
margin:0 auto;
}
.ophi-eyebrow{
display:inline-block;
font-family:"Manrope",sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--color-accent);
margin:0 0 14px;
}
/* h2 khud unclassed — root styling hi lega */
.ophi-container h2{
margin-left:auto;
margin-right:auto;
}
.ophi-divider{
width:46px;
height:2px;
background:var(--color-accent);
margin:0 auto 28px;
}
.ophi-subheading p{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.85;
font-weight:400;
color:var(--color-text-secondary);
max-width:680px;
margin:0 auto 10px;
}
.ophi-subheading p:last-child{
margin-bottom:0;
}
/*---------------------------------------------------------
Diagram — single ACF image (Traditional vs RankStellar box)
---------------------------------------------------------*/
.ophi-diagram{
margin-top:48px;
}
.ophi-diagram-img{
display:block;
width:100%;
height:auto;
max-width:1140px;
margin:0 auto;
border-radius:16px;
}
.ophi-diagram-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
aspect-ratio:16/7;
max-width:1140px;
margin:0 auto;
border-radius:16px;
border:1.5px dashed var(--color-border);
background:var(--color-card-bg);
color:var(--color-text-secondary);
font-family:"Inter",sans-serif;
font-size:13.5px;
font-weight:600;
line-height:1.5;
text-align:center;
padding:24px;
}
.ophi-diagram-placeholder i{
font-size:26px;
opacity:.6;
}
/*=========================================================
SCROLL REVEAL — home.js ka wahi is-visible toggle reuse hoga
=========================================================*/
.ophi-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ophi-diagram.ophi-reveal{ transition-delay:.1s; }
.ophi-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.ophi-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:768px){
.ophi-section{ padding:60px 0; }
.ophi-subheading p{ font-size:15px; }
}
/*=========================================================
PROOF IN ACTION — What AI Actually Recommends
Prefix: cp- (Case Proof) — apna khud ka namespace.
Dark premium panel, 5 AI-platform cards, ek business ke
consistent recommendations dikhata hai.
Append this block to the END of assets/css/home.css.
=========================================================*/
.cp-section{
background:#0d0d0d;
padding:100px 0;
overflow:hidden;
}
.cp-section *{
box-sizing:border-box;
/* max-width: 1600px; */
}
/*---------------------------------------------------------
HEADER
---------------------------------------------------------*/
.cp-header{
max-width:720px;
margin:0 auto 56px;
text-align:center;
}
.cp-badge{
display:inline-flex;
align-items:center;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12px;
letter-spacing:.1em;
color:var(--color-accent);
padding:8px 18px;
border-radius:30px;
background:rgba(var(--color-accent-rgb),.1);
border:1px solid rgba(var(--color-accent-rgb),.4);
margin-bottom:24px;
}
.cp-heading{
font-family:"Playfair Display",serif;
font-weight:700;
font-size:clamp(32px,4vw,52px);
line-height:1.18;
letter-spacing:-.01em;
color:#fff;
margin:0 0 20px;
}
.cp-heading em{
font-style:italic;
color:var(--color-accent);
}
.cp-subheading p{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.7;
color:rgba(255,255,255,.62);
margin:0 0 4px;
}
.cp-subheading p:last-child{ margin-bottom:0; }
.cp-header-rule{
display:block;
width:56px;
height:2px;
background:var(--color-accent);
margin:26px auto 0;
}
/*---------------------------------------------------------
CARDS
---------------------------------------------------------*/
.cp-cards{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-bottom:56px;
padding: 20px;
}
.cp-card{
background:#141414;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:22px;
display:flex;
flex-direction:column;
}
.cp-card-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}
/* .cp-card-icon{
flex-shrink:0;
width:34px;
height:34px;
border-radius:9px;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
} */
.cp-card-name{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
color:#fff;
}
.cp-card-quote{
position:relative;
background:#1c1c1c;
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
padding:14px 16px 18px;
margin-bottom:16px;
}
.cp-card-quote::after{
content:"";
position:absolute;
left:20px;
bottom:-7px;
width:14px;
height:14px;
background:#1c1c1c;
border-right:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
transform:rotate(45deg);
}
.cp-card-quote p{
margin:0;
font-family:"Inter",sans-serif;
font-size:13px;
line-height:1.6;
color:rgba(255,255,255,.75);
}
.cp-quote-highlight{
color:var(--color-accent);
font-weight:600;
}
.cp-card-photo{
width:100%;
aspect-ratio:4/2.6;
border-radius:10px;
overflow:hidden;
margin-bottom:14px;
background:#1c1c1c;
}
.cp-card-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.cp-card-photo-placeholder{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,.25);
font-size:22px;
}
.cp-card-business{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15.5px;
color:#fff;
margin:0 0 3px;
line-height:1.3;
}
.cp-card-category{
display:block;
font-family:"Inter",sans-serif;
font-size:12.5px;
color:rgba(255,255,255,.5);
margin-bottom:16px;
}
.cp-card-badge{
display:inline-flex;
align-items:center;
gap:7px;
align-self:flex-start;
margin-top:auto;
background:rgba(var(--color-accent-rgb),.12);
border:1px solid rgba(var(--color-accent-rgb),.35);
color:var(--color-accent);
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12.5px;
padding:7px 14px;
border-radius:30px;
}
.cp-card-badge i{ font-size:11px; }
/*---------------------------------------------------------
STRIP
---------------------------------------------------------*/
.cp-strip{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:40px;
max-width:1000px;
margin:0 auto 44px;
padding:22px 32px;
border-radius:50px;
border:1px solid rgba(var(--color-accent-rgb),.3);
background:rgba(var(--color-accent-rgb),.04);
}
.cp-strip-item{
display:flex;
align-items:center;
gap:12px;
}
.cp-strip-icon{
flex-shrink:0;
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(var(--color-accent-rgb),.4);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
}
.cp-strip-text{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16px;
color:#fff;
white-space:nowrap;
}
.cp-strip-divider{
width:1px;
height:24px;
background:rgba(255,255,255,.15);
}
/*---------------------------------------------------------
CTA
---------------------------------------------------------*/
.cp-cta-wrap{
text-align:center;
}
.cp-cta-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:var(--color-accent);
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16px;
padding:19px 36px;
border-radius:50px;
box-shadow:0 20px 44px rgba(var(--color-accent-rgb),.35);
transition:.35s cubic-bezier(.22,1,.36,1);
}
.cp-cta-btn:hover{
background:var(--color-accent-hover);
color:#fff;
transform:translateY(-3px);
box-shadow:0 26px 54px rgba(var(--color-accent-rgb),.45);
}
.cp-cta-btn i{ font-size:14px; }
.cp-footer-text{
margin:20px 0 0;
font-family:"Inter",sans-serif;
font-size:14px;
color:rgba(255,255,255,.55);
}
.cp-footer-text a{
color:var(--color-accent);
font-weight:700;
text-decoration:none;
}
.cp-footer-text a:hover{
text-decoration:underline;
}
/* .cp-footer-text a i{ font-size:11px; }
.cp-card-icon{
background:rgba(255,255,255,.07); default — jab logo image ho (koi inline bg nahi milta)
}
*/
.cp-card-icon img.cp-card-icon-img {
width: 70%;
height: 70%;
object-fit: contain;
display: block;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:1200px){
.cp-cards{
grid-template-columns:repeat(3,1fr);
}
}
@media (max-width:767px){
.cp-section{ padding:80px 0; }
.cp-cards{
grid-template-columns:repeat(2,1fr);
gap:16px;
}
.cp-strip{
flex-direction:column;
align-items:flex-start;
border-radius:24px;
gap:16px;
}
.cp-strip-divider{
width:100%;
height:1px;
}
}
@media (max-width:576px){
.cp-heading{ font-size:28px; }
.cp-cards{
grid-template-columns:1fr;
}
.cp-cta-btn{
width:100%;
justify-content:center;
padding:18px 24px;
font-size:15px;
}
}
/*=========================================================
FINAL CTA — Your Next Step / AI Visibility Assessment
Prefix: nxt- (Your Next Step) — apna khud ka unique namespace,
koi clash nahi baaki sections se.
Append this block to the END of assets/css/home.css.
=========================================================*/
.nxt-section{
background:#0d0d0d;
padding:110px 0 90px;
overflow:hidden;
}
.nxt-section *{ box-sizing:border-box; }
/*---------------------------------------------------------
TOP — badge + heading + supporting copy
---------------------------------------------------------*/
.nxt-top{
max-width:840px;
margin:0 auto 52px;
text-align:center;
}
.nxt-badge{
display:inline-flex;
align-items:center;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12px;
letter-spacing:.12em;
color:var(--color-accent);
padding:8px 20px;
border-radius:30px;
background:rgba(var(--color-accent-rgb),.08);
border:1px solid rgba(var(--color-accent-rgb),.4);
margin-bottom:26px;
}
.nxt-heading{
font-family:"Playfair Display",serif;
font-weight:700;
font-size:clamp(28px,3.6vw,46px);
line-height:1.22;
letter-spacing:-.01em;
color:#fff;
margin:0;
}
.nxt-heading-accent{
font-style:italic;
color:var(--color-accent);
}
.nxt-heading-divider{
width:46px;
height:2px;
background:var(--color-accent);
margin:22px auto 24px;
}
.nxt-supporting p{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.8;
color:rgba(255,255,255,.62);
max-width:740px;
margin:0 auto 4px;
}
.nxt-supporting p:last-child{ margin-bottom:0; }
/*---------------------------------------------------------
PANEL — the big bordered box (signals | card | checklist)
---------------------------------------------------------*/
.nxt-panel{
position:relative;
max-width:1320px;
margin:0 auto 44px;
border:1px solid rgba(var(--color-accent-rgb),.25);
border-radius:28px;
background:linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%);
padding:52px 48px;
}
.nxt-panel-grid{
display:grid;
grid-template-columns:0.85fr 1fr 1.15fr;
gap:40px;
align-items:center;
}
/*---------------------------------------------------------
LEFT — signal chips + converging connector lines
---------------------------------------------------------*/
.nxt-signals-wrap{
position:relative;
}
.nxt-signal-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1;
overflow:visible;
}
.nxt-signal-lines path{
fill:none;
stroke:var(--color-accent);
stroke-width:1.2;
opacity:.3;
vector-effect:non-scaling-stroke;
}
.nxt-signal-lines path.is-flowing{
opacity:.55;
filter:drop-shadow(0 0 3px rgba(var(--color-accent-rgb),.6));
animation:nxtLineFlow 2.6s linear infinite;
}
@keyframes nxtLineFlow{
to{
stroke-dashoffset:-1000; /* JS ne dash+gap set kiya hai, ye bas offset ko continuously negative direction me loop karta hai — chip se card ki taraf flow ka effect */
}
}
@media (prefers-reduced-motion:reduce){
.nxt-signal-lines path.is-flowing{
animation:none;
}
}
.nxt-signals{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap:12px;
}
.nxt-signal{
display:inline-flex;
align-items:center;
gap:10px;
width:fit-content;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
border-radius:30px;
padding:10px 16px;
}
.nxt-signal-icon{
flex-shrink:0;
width:26px;
height:26px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.15);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:11.5px;
}
.nxt-signal-text{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:13.5px;
color:#fff;
white-space:nowrap;
}
/*---------------------------------------------------------
CENTER — AI Visibility Assessment card + gauge
---------------------------------------------------------*/
.nxt-card{
position:relative;
z-index:2;
background:#141414;
border:1px solid rgba(var(--color-accent-rgb),.3);
border-radius:22px;
padding:32px 28px;
box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.nxt-card-label{
display:block;
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:12.5px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:22px;
}
.nxt-card-business{
display:flex;
align-items:center;
gap:12px;
padding-bottom:20px;
margin-bottom:22px;
border-bottom:1px solid rgba(255,255,255,.1);
}
.nxt-card-business-icon{
flex-shrink:0;
width:38px;
height:38px;
border-radius:10px;
background:rgba(255,255,255,.06);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
}
.nxt-card-business-text{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
letter-spacing:.04em;
text-transform:uppercase;
color:#fff;
}
.nxt-readiness-label{
display:block;
text-align:center;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:11.5px;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(255,255,255,.45);
margin-bottom:22px;
}
.nxt-gauge-wrap{
display:flex;
justify-content:center;
margin-bottom:22px;
}
.nxt-gauge{
width:172px;
height:172px;
border-radius:50%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.nxt-gauge::before{
content:"";
position:absolute;
inset:13px;
border-radius:50%;
background:#141414;
}
.nxt-gauge-inner{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
}
.nxt-gauge-percent{
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:36px;
line-height:1;
color:#fff;
}
.nxt-gauge-label{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:13px;
color:var(--color-accent);
margin-top:6px;
}
.nxt-card-footnote{
margin:0;
text-align:center;
font-family:"Inter",sans-serif;
font-size:12.5px;
line-height:1.65;
color:rgba(255,255,255,.45);
}
/*---------------------------------------------------------
RIGHT — "Your Assessment Reveals" checklist
---------------------------------------------------------*/
.nxt-reveals-badge{
display:inline-flex;
align-items:center;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:11.5px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-accent);
padding:7px 16px;
border-radius:20px;
background:rgba(var(--color-accent-rgb),.1);
border:1px solid rgba(var(--color-accent-rgb),.3);
margin-bottom:24px;
}
.nxt-reveals{
display:flex;
flex-direction:column;
}
.nxt-reveal-item{
display:flex;
gap:16px;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.08);
}
.nxt-reveal-item:first-child{
border-top:none;
padding-top:0;
}
.nxt-reveal-item:last-child{
padding-bottom:0;
}
.nxt-reveal-icon{
flex-shrink:0;
width:42px;
height:42px;
border-radius:12px;
border:1px solid rgba(var(--color-accent-rgb),.3);
background:rgba(var(--color-accent-rgb),.08);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
}
.nxt-reveal-title{
display:block;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16.5px;
color:#fff;
margin-bottom:4px;
}
.nxt-reveal-desc{
margin:0;
font-family:"Inter",sans-serif;
font-size:14px;
line-height:1.65;
color:rgba(255,255,255,.55);
}
/*---------------------------------------------------------
QUICK POINTS ROW — below the panel
---------------------------------------------------------*/
.nxt-quick-row{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:22px;
max-width:920px;
margin:0 auto 40px;
}
.nxt-quick-item{
display:flex;
align-items:center;
gap:10px;
}
.nxt-quick-icon{
flex-shrink:0;
width:36px;
height:36px;
border-radius:50%;
border:1px solid rgba(var(--color-accent-rgb),.35);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
}
.nxt-quick-text{
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:15px;
line-height:1.4;
color:rgba(255,255,255,.85);
}
.nxt-quick-divider{
width:1px;
height:26px;
background:rgba(255,255,255,.15);
}
/*---------------------------------------------------------
CTA
---------------------------------------------------------*/
.nxt-cta-wrap{
text-align:center;
margin-bottom:18px;
}
.nxt-cta-primary{
display:inline-flex;
align-items:center;
gap:12px;
background:var(--color-accent);
color:#fff !important;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16px;
padding:19px 36px;
border-radius:50px;
box-shadow:0 20px 44px rgba(var(--color-accent-rgb),.35);
transition:.35s cubic-bezier(.22,1,.36,1);
}
.nxt-cta-primary:hover{
background:var(--color-accent-hover);
color:#fff !important;
transform:translateY(-3px);
box-shadow:0 26px 54px rgba(var(--color-accent-rgb),.45);
}
.nxt-cta-primary i{ font-size:14px; transition:transform .3s ease; }
.nxt-cta-primary:hover i{ transform:translateX(3px); }
.nxt-cta-secondary-wrap{
text-align:center;
margin-bottom:44px;
}
.nxt-cta-secondary{
display:inline-flex;
align-items:center;
gap:9px;
color:var(--color-accent);
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14.5px;
border-bottom:1.5px solid rgba(var(--color-accent-rgb),.5);
padding-bottom:3px;
transition:.3s;
}
.nxt-cta-secondary:hover{
color:var(--color-accent-hover);
border-bottom-color:var(--color-accent-hover);
}
.nxt-cta-secondary i{ font-size:11px; transition:transform .3s ease; }
.nxt-cta-secondary:hover i{ transform:translateX(3px); }
/*---------------------------------------------------------
BOTTOM QUOTE — icon + 2-line text, flanked by hairlines
---------------------------------------------------------*/
.nxt-bottom{
text-align:center;
}
.nxt-bottom-icon{
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(var(--color-accent-rgb),.4);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
margin:0 auto 16px;
}
.nxt-bottom-row{
display:flex;
align-items:center;
justify-content:center;
gap:24px;
max-width:820px;
margin:0 auto;
}
.nxt-bottom-deco{
flex:1;
height:1px;
background:rgba(255,255,255,.15);
}
.nxt-bottom-text p{
margin:0 0 4px;
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:15.5px;
line-height:1.5;
color:rgba(255,255,255,.8);
}
.nxt-bottom-text p:last-child{
margin-bottom:0;
font-weight:700;
color:var(--color-accent);
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:1100px){
.nxt-panel{ padding:44px 32px; }
.nxt-panel-grid{
grid-template-columns:1fr;
gap:44px;
}
.nxt-signal-lines{ display:none; } /* converging lines sirf 3-column desktop layout ke liye maani rakhti hain */
.nxt-signals{
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
.nxt-card{ max-width:420px; margin:0 auto; }
}
@media (max-width:767px){
.nxt-section{ padding:80px 0 70px; }
.nxt-top{ margin-bottom:40px; }
.nxt-panel{ padding:32px 22px; border-radius:22px; }
.nxt-quick-row{
flex-direction:column;
align-items:flex-start;
gap:16px;
}
.nxt-quick-divider{ display:none; }
.nxt-bottom-row{ flex-direction:column; gap:14px; }
.nxt-bottom-deco{ width:60px; height:1px; flex:none; }
}
@media (max-width:576px){
.nxt-heading{ font-size:26px; }
.nxt-signals{ gap:10px; }
.nxt-signal{ padding:8px 13px; }
.nxt-signal-text{ font-size:12.5px; }
.nxt-gauge{ width:150px; height:150px; }
.nxt-gauge-percent{ font-size:30px; }
.nxt-cta-primary{ width:100%; justify-content:center; padding:18px 24px; font-size:15px; }
}
/* --------------------------------------------------------------- */
/*=========================================================
THE AI VISIBILITY GROWTH SYSTEM™
Prefix: av- (AI Visibility) — apna khud ka namespace.
Dark theme: 6-step process bar + signals/center-image/results
panel, taglines, CTA.
Append this block to the END of assets/css/home.css.
=========================================================*/
.av-section{
background:#0a0a0a;
padding:100px 0;
overflow:hidden;
}
.av-section *{
box-sizing:border-box;
}
/*---------------------------------------------------------
HEADER
---------------------------------------------------------*/
.av-header{
/* max-width:820px; */
margin:0 auto 44px;
text-align:center;
}
.av-badge{
display:inline-flex;
align-items:center;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12px;
letter-spacing:.14em;
color:var(--color-accent);
padding:8px 20px;
border-radius:30px;
border:1px solid rgba(var(--color-accent-rgb),.4);
margin-bottom:22px;
}
/* .av-heading{
font-family:"Playfair Display",serif;
font-weight:700;
font-size:clamp(32px,4.2vw,54px);
line-height:1.2;
letter-spacing:-.01em;
color:#fff;
margin:0 0 20px;
} */
.av-accent{
color:var(--color-accent);
}
.av-heading sup{
font-size:.4em;
top:-1.2em;
}
.av-subheading p{
font-family:"Inter",sans-serif;
font-size:16.5px;
line-height:1.7;
color:rgba(255,255,255,.6);
margin:0 0 4px;
}
.av-subheading p:last-child{ margin-bottom:0; }
/*---------------------------------------------------------
MAIN PANEL SHELL
---------------------------------------------------------*/
.av-panel{
border:1px solid rgba(255,255,255,.1);
border-radius:28px;
padding:36px 30px 44px;
background: rgb(0 0 0);
}
/*---------------------------------------------------------
6-STEP PROCESS
---------------------------------------------------------*/
.av-steps{
display:flex;
align-items:flex-start;
flex-wrap:wrap;
gap:14px;
margin-bottom:25px;
padding-bottom:36px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.av-step{
display:flex;
align-items:flex-start;
gap:12px;
flex:1 1 150px;
min-width:140px;
}
.av-step-num{
flex-shrink:0;
width:30px;
height:30px;
border-radius:50%;
background:rgba(255,255,255,.08);
color:rgba(255,255,255,.85);
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:13px;
display:flex;
align-items:center;
justify-content:center;
}
.av-step-accent .av-step-num{
background:var(--color-accent);
color:#fff;
}
.av-step-text{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.av-step-text strong{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14px;
color:#fff;
}
.av-step-accent .av-step-text strong{
color:var(--color-accent);
}
.av-step-text span{
font-family:"Inter",sans-serif;
font-size:12px;
line-height:1.4;
color:rgba(255,255,255,.5);
}
.av-step-arrow{
align-self:center;
color:rgba(255,255,255,.2);
font-size:12px;
flex-shrink:0;
}
/*---------------------------------------------------------
BODY — signals / center image / results
---------------------------------------------------------*/
/* .av-body{
display:grid;
grid-template-columns:280px 1fr 280px;
gap:28px;
align-items:center;
margin-bottom:40px;
} */
/* ---- left signals ---- */
.av-signals{
display:flex;
flex-direction:column;
gap:10px;
}
.av-signal{
position:relative;
display:flex;
align-items:center;
gap:12px;
padding:12px 16px;
border-radius:12px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.02);
}
.av-signal-icon{
flex-shrink:0;
width:32px;
height:32px;
border-radius:50%;
border:1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.85);
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
}
.av-signal-text{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
}
.av-signal-text strong{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:13.5px;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.av-signal-text span{
font-family:"Inter",sans-serif;
font-size:11.5px;
color:rgba(255,255,255,.5);
}
.av-signal-dot{
position:absolute;
right:-5px;
top:50%;
transform:translateY(-50%);
width:8px;
height:8px;
border-radius:50%;
background:var(--color-accent);
box-shadow:0 0 8px rgba(var(--color-accent-rgb),.8);
}
/* ---- center image ---- */
/* .av-center{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
} */
.av-center-img{
display:block;
width:100%;
/* max-width:420px; */
height:auto;
}
.av-center-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
max-width:420px;
aspect-ratio:1/1;
border-radius:50%;
border:1.5px dashed rgba(255,255,255,.18);
color:rgba(255,255,255,.4);
font-family:"Inter",sans-serif;
font-size:12.5px;
font-weight:600;
text-align:center;
padding:24px;
}
.av-center-placeholder i{ font-size:24px; opacity:.6; }
.av-center-caption{
margin-top:18px;
}
.av-center-caption strong{
display:block;
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:15px;
letter-spacing:.06em;
color:#fff;
margin-bottom:8px;
}
.av-center-caption p{
margin:0;
font-family:"Inter",sans-serif;
font-size:13px;
line-height:1.6;
color:rgba(255,255,255,.55);
}
/* ---- right results ---- */
.av-results{
display:flex;
flex-direction:column;
gap:14px;
}
.av-result{
display:flex;
align-items:flex-start;
gap:14px;
padding:16px 18px;
border-radius:14px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.02);
}
.av-result-accent{
border-color:rgba(var(--color-accent-rgb),.5);
background:rgba(var(--color-accent-rgb),.06);
}
.av-result-icon{
flex-shrink:0;
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(255,255,255,.18);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
}
.av-result-accent .av-result-icon{
border-color:var(--color-accent);
color:var(--color-accent);
}
.av-result-text{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.av-result-text strong{
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:13.5px;
letter-spacing:.03em;
color:#fff;
}
.av-result-accent .av-result-text strong{
color:var(--color-accent);
}
.av-result-text span{
font-family:"Inter",sans-serif;
font-size:12.5px;
line-height:1.5;
color:rgba(255,255,255,.55);
}
/*---------------------------------------------------------
TAGLINE PILL
---------------------------------------------------------*/
.av-tagline{
text-align:center;
}
.av-tagline p{
display:inline-block;
margin:0;
padding:16px 32px;
border-radius:40px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.02);
font-family:"Playfair Display",serif;
font-size:18px;
font-weight:600;
color:#fff;
}
.av-highlight{
color:var(--color-accent);
}
/*---------------------------------------------------------
CLOSING STATEMENT
---------------------------------------------------------*/
.av-closing{
max-width:820px;
margin:52px auto 0;
text-align:center;
}
.av-closing p{
margin:0 0 6px;
font-family:"Playfair Display",serif;
font-size:clamp(22px,2.6vw,32px);
font-weight:700;
line-height:1.5;
color:#fff;
}
.av-closing p:last-child{ margin-bottom:0; }
.av-closing .av-highlight{
font-style:italic;
}
/*---------------------------------------------------------
CTA
---------------------------------------------------------*/
.av-cta-row{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:24px;
margin-top:40px;
}
.av-btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--color-accent);
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15.5px;
padding:18px 32px;
border-radius:40px;
box-shadow:0 18px 40px rgba(var(--color-accent-rgb),.3);
transition:.35s cubic-bezier(.22,1,.36,1);
white-space:nowrap;
}
.av-btn-primary:hover{
background:var(--color-accent-hover);
color:#fff;
transform:translateY(-3px);
box-shadow:0 22px 48px rgba(var(--color-accent-rgb),.4);
}
.av-btn-primary i{ font-size:13px; }
.av-btn-secondary{
display:inline-flex;
align-items:center;
gap:9px;
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:14.5px;
border-bottom:1.5px solid rgba(255,255,255,.3);
padding-bottom:3px;
transition:.3s;
white-space:nowrap;
}
.av-btn-secondary:hover{
color:var(--color-accent);
border-bottom-color:var(--color-accent);
}
.av-btn-secondary i{ font-size:12px; }
/*=========================================================
SCROLL REVEAL — home.js is-visible class toggle karta hai
=========================================================*/
.av-reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.av-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
.av-reveal{
opacity:1 !important;
transform:none !important;
transition:none;
}
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:1100px){
.av-body{
grid-template-columns:1fr;
}
.av-signals,
.av-results{
order:2;
}
.av-center{
order:1;
margin-bottom:12px;
}
.av-signal-dot{ display:none; }
}
@media (max-width:767px){
.av-section{ padding:80px 0; }
.av-panel{ padding:28px 22px 32px; }
.av-steps{
flex-direction:column;
gap:18px;
}
.av-step-arrow{ display:none; }
.av-tagline p{
font-size:15px;
padding:14px 22px;
}
.av-step{
display:flex;
align-items:flex-start;
flex:1 1 55px;
}
}
@media (max-width:576px){
.av-heading{ font-size:28px; }
.av-cta-row{
flex-direction:column;
align-items:stretch;
}
.av-btn-primary,
.av-btn-secondary{ justify-content:center; }
}
/*=========================================================
OUR APPROACH PAGE — CHAPTERS 3 THROUGH 8 + FINAL SECTION
File: assets/css/our-approach-chapters.css
Append this whole file to the END of home.css (after the
existing .sh- / .ophi- / .hbc- blocks for this page).
Prefixes used here (all new, no clashes with existing site
classes):
.sys- Chapter 3 — One System
.fnd- Chapter 4 — Four Foundations
.loop- Chapter 5 — Recommendation Loop
.dots- Chapter 6 — Connects The Dots
.nat- Chapter 7 — Natural Recommendations
.cmp- Chapter 8 — Traditional vs AI Visibility
.fin- Final Section — Future Of Search
All colors/fonts pull from the existing :root tokens
(--color-accent, --color-text-primary, --font-heading, etc.)
so this stays visually identical to the rest of the site.
=========================================================*/
/*=========================================================
SHARED HELPERS (reused across several chapters below)
=========================================================*/
.sys-eyebrow,
.fnd-eyebrow,
.loop-eyebrow,
.dots-eyebrow,
.nat-eyebrow,
.cmp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Manrope", sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
padding: 7px 16px;
border-radius: 30px;
background: rgba(var(--color-accent-rgb), 0.1);
border: 1px solid rgba(var(--color-accent-rgb), 0.28);
margin-bottom: 22px;
}
/*=========================================================
CHAPTER 3 — ONE SYSTEM (center layout)
=========================================================*/
.sys-section {
background: var(--color-bg-secondary);
padding: 110px 0;
text-align: center;
}
.sys-container {
max-width: 780px;
margin: 0 auto;
}
.sys-heading {
margin-left: auto;
margin-right: auto;
}
.sys-supporting p {
font-family: "Inter", sans-serif;
font-size: 16.5px;
line-height: 1.85;
color: var(--color-text-secondary);
max-width: 700px;
margin: 0 auto 12px;
}
.sys-supporting p:last-child {
margin-bottom: 0;
}
.sys-diagram {
margin-top: 52px;
}
.sys-diagram-img {
display: block;
width: 100%;
height: auto;
max-width: 1100px;
margin: 0 auto;
border-radius: 20px;
border: 1px solid var(--color-border);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}
.sys-closing {
max-width: 720px;
margin: 56px auto 0;
}
.sys-closing p {
margin: 0 0 4px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(19px, 2.1vw, 24px);
line-height: 1.5;
/* color: var(--color-text-primary); */
}
.sys-closing p:last-child {
margin-bottom: 0;
}
.sys-closing-accent {
color: var(--color-accent);
}
@media (max-width: 767px) {
.sys-section { padding: 80px 0; }
.sys-diagram { margin-top: 36px; }
.sys-closing { margin-top: 40px; }
}
/*=========================================================
CHAPTER 4 — FOUR FOUNDATIONS (numbered pillar flow)
=========================================================*/
.fnd-section {
background: var(--color-bg-primary);
padding: 110px 0;
}
.fnd-intro {
max-width: 720px;
margin: 0 auto 64px;
text-align: center;
}
.fnd-supporting p {
font-family: "Inter", sans-serif;
font-size: 16.5px;
line-height: 1.85;
color: var(--color-text-secondary);
margin: 0 0 10px;
}
.fnd-supporting p:last-child {
margin-bottom: 0;
}
.fnd-flow {
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
max-width: 1100px;
margin: 0 auto;
}
.fnd-pillar {
flex: 1 1 220px;
max-width: 250px;
text-align: center;
padding: 8px 14px;
}
.fnd-pillar-icon {
width: 68px;
height: 68px;
margin: 0 auto 20px;
border-radius: 50%;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--color-accent);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}
.fnd-pillar-num {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 20px;
color: var(--color-accent);
}
.fnd-pillar-title {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 17px;
color: var(--color-text-primary);
margin: 0 0 8px;
}
.fnd-pillar-text {
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 1.65;
color: var(--color-text-secondary);
margin: 0;
}
.fnd-flow-connector {
align-self: center;
margin-top: 34px;
color: var(--color-border);
font-size: 16px;
flex-shrink: 0;
}
.fnd-closing {
max-width: 720px;
margin: 64px auto 0;
text-align: center;
}
.fnd-closing p {
margin: 0 0 4px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(19px, 2.1vw, 24px);
line-height: 1.5;
/* color: var(--color-text-primary); */
}
.fnd-closing p:last-child {
margin-bottom: 0;
}
.fnd-closing-accent {
color: var(--color-accent);
}
@media (max-width: 767px) {
.fnd-section { padding: 80px 0; }
.fnd-intro { margin-bottom: 44px; }
.fnd-flow { flex-direction: column; align-items: center; }
.fnd-flow-connector { transform: rotate(90deg); margin-top: 8px; margin-bottom: 8px; }
.fnd-pillar { max-width: 320px; }
.fnd-closing { margin-top: 44px; }
}
/*=========================================================
CHAPTER 5 — RECOMMENDATION LOOP (illustration + 6 columns)
=========================================================*/
.loop-section {
background: var(--color-bg-secondary);
padding: 110px 0;
}
.loop-intro {
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
}
.loop-heading {
margin-left: auto;
margin-right: auto;
}
.loop-heading-accent {
display: block;
color: var(--color-accent);
}
.loop-supporting p {
font-family: "Inter", sans-serif;
font-size: 16.5px;
line-height: 1.85;
color: var(--color-text-secondary);
margin: 0 0 10px;
}
.loop-supporting p:last-child {
margin-bottom: 0;
}
.loop-illustration {
margin-bottom: 56px;
}
.loop-illustration-img {
display: block;
width: 100%;
height: auto;
max-width: 900px;
margin: 0 auto;
border-radius: 24px;
}
.loop-columns {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.loop-column {
text-align: center;
padding: 12px 10px;
}
.loop-column-icon {
width: 46px;
height: 46px;
margin: 0 auto 16px;
border-radius: 50%;
background: rgba(var(--color-accent-rgb), 0.1);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.loop-column-title {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14.5px;
color: var(--color-text-primary);
margin: 0 0 8px;
}
.loop-column-text {
font-family: "Inter", sans-serif;
font-size: 13px;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0;
}
.loop-insight {
max-width: 780px;
margin: 64px auto 0;
text-align: center;
}
.loop-insight p {
margin: 0 0 4px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(19px, 2.1vw, 24px);
line-height: 1.5;
/* color: var(--color-text-primary); */
}
.loop-insight p:last-child {
margin-bottom: 0;
}
.loop-insight-accent {
color: var(--color-accent);
}
@media (max-width: 991px) {
.loop-columns { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
}
@media (max-width: 767px) {
.loop-section { padding: 80px 0; }
.loop-intro { margin-bottom: 40px; }
.loop-illustration { margin-bottom: 40px; }
.loop-columns { grid-template-columns: repeat(2, 1fr); }
.loop-insight { margin-top: 44px; }
}
/*=========================================================
CHAPTER 6 — CONNECTS THE DOTS (plain editorial)
=========================================================*/
.dots-section {
background: var(--color-bg-primary);
padding: 110px 0;
}
.dots-wrap {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.dots-body p {
font-family: "Inter", sans-serif;
font-size: 17px;
line-height: 1.9;
color: var(--color-text-secondary);
margin: 0 0 16px;
}
.dots-body p:last-child {
margin-bottom: 0;
}
.dots-insight {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--color-border);
}
.dots-insight p {
margin: 0 0 4px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(19px, 2.1vw, 24px);
line-height: 1.5;
/* color: var(--color-text-primary); */
}
.dots-insight p:last-child {
margin-bottom: 0;
}
.dots-insight-accent {
color: var(--color-accent);
}
@media (max-width: 767px) {
.dots-section { padding: 80px 0; }
.dots-body p { font-size: 15.5px; }
}
/*=========================================================
CHAPTER 7 — NATURAL RECOMMENDATIONS (text left / image right)
=========================================================*/
.nat-section {
background: var(--color-bg-secondary);
padding: 110px 0;
overflow: hidden;
}
.nat-grid {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 64px;
align-items: center;
}
.nat-text {
max-width: 560px;
}
.nat-supporting p {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.85;
color: var(--color-text-secondary);
margin: 0 0 16px;
}
.nat-supporting p:last-child {
margin-bottom: 0;
}
.nat-outcomes {
display: flex;
flex-direction: column;
margin-top: 8px;
}
.nat-outcome-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 0;
border-top: 1px solid var(--color-border);
}
.nat-outcome-card:first-child {
border-top: none;
padding-top: 0;
}
.nat-outcome-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(var(--color-accent-rgb), 0.1);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.nat-outcome-title {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--color-text-primary);
margin: 0 0 4px;
}
.nat-outcome-text {
font-family: "Inter", sans-serif;
font-size: 14.5px;
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0;
}
.nat-cta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 36px;
}
.nat-visual-img {
display: block;
width: 100%;
height: auto;
border-radius: 24px;
border: 1px solid var(--color-border);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
object-fit: cover;
}
@media (max-width: 991px) {
.nat-section { padding: 90px 0; }
.nat-grid { grid-template-columns: 1fr; gap: 44px; }
.nat-text { max-width: 100%; order: 1; }
.nat-visual { order: 2; }
}
@media (max-width: 576px) {
.nat-section { padding: 70px 0; }
.nat-cta-row { flex-direction: column; align-items: stretch; }
.nat-visual-img { border-radius: 18px; }
}
/*=========================================================
CHAPTER 8 — TRADITIONAL VS AI VISIBILITY (decision cards)
=========================================================*/
.cmp-section {
background: var(--color-bg-primary);
padding: 110px 0;
}
.cmp-intro {
max-width: 720px;
margin: 0 auto 56px;
text-align: center;
}
.cmp-heading {
margin-left: auto;
margin-right: auto;
}
.cmp-cards {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 1080px;
margin: 0 auto;
}
.cmp-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 24px;
padding: 40px 36px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}
.cmp-card-accent {
border-color: rgba(var(--color-accent-rgb), 0.35);
background: rgba(var(--color-accent-rgb), 0.035);
}
.cmp-card-title {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 1.4;
color: var(--color-text-primary);
margin: 0 0 24px;
}
.cmp-card-list {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 13px;
}
.cmp-card-list li {
position: relative;
padding-left: 24px;
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--color-text-secondary);
}
.cmp-card-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-text-secondary);
opacity: 0.4;
}
.cmp-card-list-accent li::before {
background: var(--color-accent);
opacity: 1;
}
.cmp-card-list-accent li {
color: var(--color-text-primary);
}
.cmp-card-status {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 13.5px;
padding: 9px 16px;
border-radius: 30px;
}
.cmp-card-status-muted {
color: var(--color-text-secondary);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
}
.cmp-card-status-accent {
color: var(--color-accent);
background: rgba(var(--color-accent-rgb), 0.1);
border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}
.cmp-vs {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 14px;
color: var(--color-text-secondary);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
z-index: 2;
}
.cmp-closing {
max-width: 680px;
margin: 56px auto 0;
text-align: center;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.6;
color: var(--color-text-primary);
}
@media (max-width: 767px) {
.cmp-section { padding: 80px 0; }
.cmp-intro { margin-bottom: 40px; }
.cmp-cards { grid-template-columns: 1fr; gap: 56px; }
.cmp-vs {
top: auto;
bottom: 47%;
left: 50%;
transform: translateX(-50%);
}
.cmp-card { padding: 30px 26px; }
.cmp-closing { margin-top: 44px; }
}
/*=========================================================
FINAL SECTION — FUTURE OF SEARCH (quiet, typography-led)
=========================================================*/
.fin-section {
position: relative;
background: var(--color-bg-secondary);
padding: 50px 0 120px;
overflow: hidden;
text-align: center;
}
/* Very faint constellation of dots, per the brief ("almost none,
just a subtle background, think Apple"). Pure CSS radial-dot
grid at low opacity — no illustration file needed. */
.fin-dots {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
background-image: radial-gradient(rgba(var(--color-accent-rgb), 0.14) 1.4px, transparent 1.4px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 75%);
}
.fin-section .container {
position: relative;
z-index: 1;
}
.fin-wrap {
max-width: 760px;
margin: 0 auto;
}
.fin-heading {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.28;
letter-spacing: -0.01em;
color: var(--color-text-primary);
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 6px;
}
.fin-heading-muted {
color: var(--color-text-secondary);
font-size: 1.62em;
font-family: "Manrope", sans-serif;
font-weight: 600;
}
.fin-supporting p {
font-family: "Inter", sans-serif;
font-size: 16.5px;
line-height: 1.85;
color: var(--color-text-secondary);
margin: 0 0 10px;
}
.fin-supporting p:last-child {
margin-bottom: 0;
}
/* Trust highlights — brief is explicit: "No icons larger than
24px. No cards. Just quiet confidence." — plain inline row. */
.fin-highlights {
list-style: none;
margin: 44px 0 40px;
padding: 0;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(2, 1fr);
gap: 14px 32px;
}
.fin-highlights li {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 14.5px;
color: var(--color-text-primary);
}
.fin-highlights li i {
color: var(--color-accent);
font-size: 13px;
}
.fin-cta-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 26px;
}
.fin-reassurance {
max-width: 520px;
margin: 0 auto;
font-family: "Inter", sans-serif;
font-size: 13.5px;
line-height: 1.7;
color: var(--color-text-secondary);
opacity: 0.85;
}
@media (max-width: 767px) {
.fin-section { padding: 100px 0 80px; }
.fin-highlights { flex-direction: column; gap: 14px; margin: 36px 0 32px; }
.fin-cta-row { flex-direction: column; align-items: stretch; }
}
/*=========================================================
ICON FIELDS — image OR font-awesome fallback
(fnd_pillar_N_icon, loop_col_N_icon, nat_outcome_N_icon,
cmp_left/right_status_icon can each be an uploaded image
instead of an icon font — size the ![]()
to match the )
=========================================================*/
.fnd-pillar-icon img,
.loop-column-icon img,
.nat-outcome-icon img {
width: 26px;
height: 26px;
object-fit: contain;
}
.cmp-card-status img {
width: 15px;
height: 15px;
object-fit: contain;
}
/*=========================================================
SCROLL REVEAL — shared across all chapters above
(reuses the same opacity/translateY recipe + "-reveal" +
"is-visible" pattern already established by .sh-reveal,
.hbc-reveal, .ophi-reveal elsewhere in this stylesheet)
=========================================================*/
.sys-reveal,
.fnd-reveal,
.loop-reveal,
.dots-reveal,
.nat-reveal,
.cmp-reveal,
.fin-reveal {
opacity: 1;
transform: translateY(22px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sys-reveal.is-visible,
.fnd-reveal.is-visible,
.loop-reveal.is-visible,
.dots-reveal.is-visible,
.nat-reveal.is-visible,
.cmp-reveal.is-visible,
.fin-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.sys-reveal,
.fnd-reveal,
.loop-reveal,
.dots-reveal,
.nat-reveal,
.cmp-reveal,
.fin-reveal {
opacity: 1 !important;
transform: none !important;
transition: none;
}
}
/*=========================================================
CONTACT PAGE
File: assets/css/contact-page.css
Append is poore file ko home.css (ya jo bhi global stylesheet
hai) ke END me paste kar do.
Prefixes (sab naye, koi clash nahi):
.cthero- Hero (dark, world map bg)
.ctc- Contact Form + "Prefer to talk?" info
.ctrust- Trusted by brands strip
.coff- Our Offices
.cqa- FAQ Quick Answers (2-column accordion)
.rdy- Final CTA bar ("Ready to Get Discovered by AI?")
Sab colors/fonts existing :root tokens se aa rahe hain.
=========================================================*/
/*=========================================================
HERO — dark, world map background
=========================================================*/
.cthero-section{
position:relative;
overflow:hidden;
background:#0e0c0b;
padding:70px 0 90px;
isolation:isolate;
}
.cthero-section::after{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:.04;
mix-blend-mode:overlay;
pointer-events:none;
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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cthero-section .container{
position:relative;
z-index:2;
}
.cthero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:center;
}
.cthero-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-family:"Manrope",sans-serif;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:20px;
}
.cthero-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(30px,4vw,48px);
line-height:1.18;
letter-spacing:-.01em;
color:#fff;
margin:0 0 20px;
}
/* .cthero-heading em{
font-style:italic;
color:var(--color-accent);
display:block;
} */
.cthero-subtext{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.75;
color:rgba(255,255,255,.65);
max-width:460px;
margin:0 0 32px;
}
.cthero-cta-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:24px;
}
.cthero-btn-primary{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--color-accent);
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
padding:15px 28px;
border-radius:40px;
box-shadow:0 16px 36px rgba(var(--color-accent-rgb),.3);
transition:.3s;
}
.cthero-btn-primary:hover{
background:var(--color-accent-hover);
color:#fff;
transform:translateY(-3px);
}
.cthero-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
border-bottom:1.5px solid rgba(255,255,255,.3);
padding-bottom:2px;
transition:.3s;
}
.cthero-link:hover{
color:var(--color-accent);
border-bottom-color:var(--color-accent);
}
.cthero-link i{ font-size:12px; transition:transform .3s ease; }
.cthero-link:hover i{ transform:translateX(3px); }
.cthero-visual-img{
display:block;
width:100%;
height:auto;
border-radius:16px;
}
@media (max-width:991px){
.cthero-grid{ grid-template-columns:1fr; gap:36px; }
.cthero-visual{ order:2; }
.cthero-text{ order:1; }
}
@media (max-width:576px){
.cthero-section{ padding:56px 0 60px; }
.cthero-cta-row{ flex-direction:column; align-items:flex-start; gap:16px; }
}
/*=========================================================
CONTACT FORM + "Prefer to talk?" INFO — light split layout
=========================================================*/
.ctc-section{
background:var(--color-bg-primary);
padding:80px 0;
}
.ctc-grid{
display:grid;
grid-template-columns:1.35fr 1fr;
gap:60px;
align-items:start;
}
.ctc-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-family:"Manrope",sans-serif;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:16px;
}
.ctc-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(26px,3vw,36px);
line-height:1.2;
color:var(--color-text-primary);
margin:0 0 12px;
}
.ctc-subtext{
font-family:"Inter",sans-serif;
font-size:15px;
line-height:1.7;
color:var(--color-text-secondary);
max-width:440px;
margin:0 0 32px;
}
/*---------------------------------------------------------
FORM
---------------------------------------------------------*/
.ctc-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.ctc-field{ grid-column:span 1; }
.ctc-field.is-full{ grid-column:1/-1; }
.ctc-field input,
.ctc-field select,
.ctc-field textarea{
width:100%;
background:var(--color-card-bg);
border:1.5px solid var(--color-border);
border-radius:12px;
padding:15px 16px;
font-family:"Inter",sans-serif !important;
font-size:14.5px;
color:var(--color-text-primary);
transition:.25s;
outline:none;
}
.ctc-field textarea{ min-height:110px; resize:vertical; }
.ctc-field input:focus,
.ctc-field select:focus,
.ctc-field textarea:focus{
border-color:var(--color-accent);
box-shadow:0 0 0 4px rgba(var(--color-accent-rgb),.1);
}
.ctc-submit{
grid-column:1/-1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
background:var(--color-text-primary);
color:#fff !important;
border:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
padding:16px 28px;
border-radius:14px;
cursor:pointer;
transition:.3s;
}
.ctc-submit:hover{ background:var(--color-accent); }
.ctc-submit i{ font-size:13px; }
.ctc-privacy{
grid-column:1/-1;
display:flex;
align-items:center;
gap:8px;
font-size:12.5px;
color:var(--color-text-secondary);
margin-top:-2px;
}
.ctc-privacy i{ font-size:11px; }
/*---------------------------------------------------------
RIGHT — "Prefer to talk?" method cards
---------------------------------------------------------*/
.ctc-info-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:22px;
color:var(--color-text-primary);
margin:0 0 8px;
}
.ctc-info-subtext{
font-family:"Inter",sans-serif;
font-size:14.5px;
color:var(--color-text-secondary);
margin:0 0 24px;
}
.ctc-methods{
display:flex;
flex-direction:column;
gap:14px;
}
.ctc-method{
display:flex;
align-items:flex-start;
gap:16px;
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:18px;
padding:18px 20px;
}
.ctc-method-icon{
flex-shrink:0;
width:44px;
height:44px;
border-radius:50%;
background:var(--color-text-primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
}
.ctc-method-icon img{ width:20px; height:20px; object-fit:contain; }
.ctc-method-title{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
color:var(--color-text-primary);
margin:0 0 3px;
}
.ctc-method-line{
font-family:"Inter",sans-serif;
font-size:13.5px;
line-height:1.6;
color:var(--color-text-secondary);
margin:0;
}
.ctc-method-line-accent{
color:var(--color-text-primary);
font-weight:600;
}
@media (max-width:991px){
.ctc-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:576px){
.ctc-section{ padding:60px 0; }
.ctc-form{ grid-template-columns:1fr; }
.ctc-field{ grid-column:1/-1; }
}
/*=========================================================
TRUSTED BY — logo strip
=========================================================*/
.ctrust-section{
background:var(--color-bg-primary);
padding:36px 0 48px;
}
.ctrust-label{
display:block;
text-align:center;
font-family:"Manrope",sans-serif;
font-size:12.5px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-text-secondary);
margin-bottom:28px;
}
.ctrust-logos{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:40px 52px;
}
.ctrust-logo{
max-height:32px;
width:auto;
object-fit:contain;
opacity:.75;
filter:grayscale(1);
transition:.3s;
}
.ctrust-logo:hover{ opacity:1; filter:grayscale(0); }
@media (max-width:576px){
.ctrust-logos{ gap:28px 36px; }
.ctrust-logo{ max-height:24px; }
}
/*=========================================================
OUR OFFICES
=========================================================*/
.coff-section{
background:var(--color-bg-primary);
padding:70px 0 80px;
border-top:1px solid var(--color-border);
}
.coff-intro{
max-width:560px;
margin:0 auto 44px;
text-align:center;
}
.coff-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-family:"Manrope",sans-serif;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:14px;
}
.coff-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(24px,3vw,34px);
color:var(--color-text-primary);
margin:0 0 10px;
}
.coff-subtext{
font-family:"Inter",sans-serif;
font-size:15px;
color:var(--color-text-secondary);
margin:0;
}
.coff-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
max-width:1080px;
margin:0 auto;
}
.coff-card{
position:relative;
overflow:hidden;
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:22px;
padding:36px 28px;
text-align:center;
}
.coff-icon{
width:56px;
height:56px;
margin:0 auto 20px;
border-radius:50%;
background:#fff;
border:1px solid var(--color-border);
box-shadow:0 10px 24px rgba(0,0,0,.05);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:var(--color-accent);
}
.coff-icon img{ width:24px; height:24px; object-fit:contain; }
.coff-city{
font-family:var(--font-heading);
font-weight:700;
font-size:19px;
color:var(--color-text-primary);
margin:0 0 10px;
}
.coff-address{
font-family:"Inter",sans-serif;
font-size:14px;
line-height:1.6;
color:var(--color-text-secondary);
margin:0 0 10px;
}
.coff-phone{
display:block;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14.5px;
color:var(--color-text-primary);
text-decoration:none;
}
@media (max-width:991px){
.coff-grid{ grid-template-columns:1fr; max-width:440px; }
}
/*=========================================================
FAQ — QUICK ANSWERS (2-column accordion grid)
=========================================================*/
.cqa-section{
background:var(--color-bg-primary);
padding:70px 0 80px;
}
.cqa-intro{
max-width:560px;
margin:0 auto 40px;
text-align:center;
}
.cqa-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-family:"Manrope",sans-serif;
font-size:12.5px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--color-accent);
margin-bottom:14px;
}
.cqa-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(24px,3vw,34px);
color:var(--color-text-primary);
margin:0 0 10px;
}
.cqa-subtext{
font-family:"Inter",sans-serif;
font-size:15px;
color:var(--color-text-secondary);
margin:0;
}
.cqa-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
max-width:1080px;
margin:0 auto;
}
.cqa-item{
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:16px;
overflow:hidden;
align-self:start;
}
.cqa-item.is-open{
border-color:rgba(var(--color-accent-rgb),.4);
}
.cqa-question{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
background:none;
border:none;
text-align:left;
cursor:pointer;
padding:18px 20px;
}
.cqa-item.is-open .cqa-question{ color:var(--color-accent); }
.cqa-question-text{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
color:inherit;
}
.cqa-item.is-open .cqa-question-text{ color:var(--color-accent); }
.cqa-icon{
flex-shrink:0;
width:26px;
height:26px;
border-radius:50%;
background:var(--color-bg-secondary);
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
color:var(--color-text-primary);
transition:.3s;
}
.cqa-item.is-open .cqa-icon{
background:var(--color-accent);
color:#fff;
transform:rotate(180deg);
}
.cqa-answer-wrap{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1);
}
.cqa-item.is-open .cqa-answer-wrap{ grid-template-rows:1fr; }
.cqa-answer-inner{ overflow:hidden; }
.cqa-answer{
padding:0 20px 20px;
font-family:"Inter",sans-serif;
font-size:14px;
line-height:1.75;
color:var(--color-text-secondary);
margin:0;
}
@media (max-width:767px){
.cqa-grid{ grid-template-columns:1fr; }
}
/*=========================================================
FINAL CTA BAR — "Ready to Get Discovered by AI?"
=========================================================*/
.rdy-section{
position:relative;
overflow:hidden;
background:var(--color-primary-darker);
border-radius:28px;
max-width:1200px;
margin:0 auto 70px;
padding:36px 40px;
}
.rdy-section::after{
content:"";
position:absolute;
inset:0;
z-index:0;
background:radial-gradient(ellipse 500px 300px at 90% 100%, rgba(var(--color-accent-rgb),.25), transparent 70%);
}
.rdy-inner{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
flex-wrap:wrap;
}
.rdy-left{
display:flex;
align-items:center;
gap:20px;
flex:1;
min-width:280px;
}
.rdy-icon{
flex-shrink:0;
width:46px;
height:46px;
border-radius:50%;
border:1.5px solid rgba(var(--color-accent-rgb),.5);
color:var(--color-accent);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}
.rdy-heading{
font-family:var(--font-heading);
font-weight:700;
font-size:21px;
color:#fff;
margin:0 0 4px;
}
.rdy-subtext{
font-family:"Inter",sans-serif;
font-size:13.5px;
line-height:1.6;
color:rgba(255,255,255,.6);
margin:0;
max-width:420px;
}
.rdy-cta-row{
display:flex;
align-items:center;
gap:14px;
flex-shrink:0;
}
.rdy-btn-primary{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--color-accent);
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14px;
padding:13px 24px;
border-radius:40px;
white-space:nowrap;
transition:.3s;
}
.rdy-btn-primary:hover{ background:var(--color-accent-hover); transform:translateY(-2px); }
.rdy-btn-secondary{
display:inline-flex;
align-items:center;
gap:8px;
background:transparent;
color:#fff;
text-decoration:none;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:14px;
padding:12px 22px;
border-radius:40px;
border:1.5px solid rgba(255,255,255,.3);
white-space:nowrap;
transition:.3s;
}
.rdy-btn-secondary:hover{ border-color:var(--color-accent); color:var(--color-accent); }
@media (max-width:767px){
.rdy-section{ margin:0 20px 56px; padding:28px 24px; }
.rdy-inner{ flex-direction:column; align-items:flex-start; }
.rdy-cta-row{ width:100%; }
.rdy-btn-primary,.rdy-btn-secondary{ flex:1; justify-content:center; }
}
/*=========================================================
FORMINATOR STYLING OVERRIDE — ctc-forminator-wrap
Contact page CSS file (contact-page.css) ke end me ye block
paste kar do. Forminator apni khud ki generic classes use
karta hai (.forminator-row, .forminator-field, .forminator-input,
.forminator-button-submit waghera) — inhe site ke design tokens
se match kar rahe hain.
=========================================================*/
.ctc-forminator-wrap{
margin-top: 4px;
}
.ctc-forminator-wrap .forminator-row{
margin-bottom: 16px !important;
}
.ctc-forminator-wrap .forminator-label{
font-family:"Manrope",sans-serif !important;
font-weight:600 !important;
font-size:13.5px !important;
color:var(--color-text-primary) !important;
margin-bottom:6px !important;
}
.ctc-forminator-wrap input[type="text"],
.ctc-forminator-wrap input[type="email"],
.ctc-forminator-wrap input[type="tel"],
.ctc-forminator-wrap input[type="number"],
.ctc-forminator-wrap select,
.ctc-forminator-wrap textarea{
width:100% !important;
background:var(--color-card-bg) !important;
/* border:1.5px solid var(--color-border) !important; */
border-radius:12px !important;
padding:15px 16px !important;
font-family:"Inter",sans-serif !important;
font-size:14.5px !important;
color:var(--color-text-primary) !important;
transition:.25s !important;
box-shadow:none !important;
}
.ctc-forminator-wrap textarea{
min-height:110px !important;
}
#forminator-module-1148.forminator-design--material .forminator-input:focus, #forminator-module-1148.forminator-design--material .forminator-input:active, #forminator-module-1148.forminator-design--material .forminator-iti-input:focus-within .iti__selected-dial-code, #forminator-module-1148.forminator-design--material .forminator-iti-input:active .iti__selected-dial-code
{
border: none;
outline: none;
}
.forminator-ui.forminator-custom-form[data-design=material] .forminator-floating--textarea {
width: 100%;
max-height: 140px;
overflow-y: hidden;
position: unset !important;
z-index: 1;
}
#forminator-module-1148.forminator-design--material .forminator-field-textarea .forminator-is_active .forminator-label[class*="forminator-floating-"] {
transform: translateY(calc(0% + 10px)) !important;
}
/* .ctc-forminator-wrap input:focus,
.ctc-forminator-wrap select:focus,
.ctc-forminator-wrap textarea:focus{
border-color:var(--color-accent) !important;
box-shadow:0 0 0 4px rgba(var(--color-accent-rgb),.1) !important;
outline:none !important;
} */
.ctc-forminator-wrap .forminator-button-submit,
.ctc-forminator-wrap button[type="submit"]{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
width:100% !important;
background:var(--color-text-primary) !important;
color:#fff !important;
border:none !important;
font-family:"Manrope",sans-serif !important;
font-weight:700 !important;
font-size:15px !important;
padding:16px 28px !important;
border-radius:14px !important;
cursor:pointer !important;
transition:.3s !important;
}
.ctc-forminator-wrap .forminator-button-submit:hover,
.ctc-forminator-wrap button[type="submit"]:hover{
background:var(--color-accent) !important;
}
/* Forminator ki apni success/error messages ko bhi thoda site jaisa banate hain */
.ctc-forminator-wrap .forminator-response-message{
border-radius:12px !important;
font-family:"Inter",sans-serif !important;
font-size:14px !important;
}
/*=========================================================
ABOUT US PAGE — SCOPED STYLES
File: assets/css/about.css
Append this whole file to the END of home.css.
All classes are prefixed "ab-" (unique to this page) so
nothing here can conflict with Home, Our Approach, or How
AI Chooses page CSS. Colors/fonts pull from the existing
:root tokens (--color-accent, --color-text-primary,
--font-heading, etc.) so this page matches the rest of the
site automatically.
=========================================================*/
/*---------------------------------------------------------
SHARED BUTTONS (page-scoped so they never fight the
site-wide .btn-primary / .btn-secondary rules)
---------------------------------------------------------*/
.ab-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-accent);
color: #fff !important;
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 15px;
padding: 16px 28px;
border-radius: 40px;
border: none;
box-shadow: 0 16px 36px rgba(var(--color-accent-rgb), .28);
transition: .35s cubic-bezier(.22,1,.36,1);
white-space: nowrap;
}
.ab-btn-primary:hover {
background: var(--color-accent-hover);
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(var(--color-accent-rgb), .38);
}
.ab-btn-secondary {
display: inline-flex;
align-items: center;
gap: 9px;
background: transparent;
color: var(--color-text-primary);
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14.5px;
padding: 14px 24px;
border-radius: 40px;
border: 1.5px solid var(--color-border);
transition: .3s;
white-space: nowrap;
}
.ab-btn-secondary:hover {
border-color: var(--color-text-primary);
background: var(--color-text-primary);
color: #fff !important;
}
.ab-btn-outline {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--color-accent);
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14.5px;
padding: 13px 24px;
border-radius: 40px;
border: 1.5px solid rgba(var(--color-accent-rgb), .4);
transition: .3s;
}
.ab-btn-outline:hover {
background: var(--color-accent);
color: #fff !important;
border-color: var(--color-accent);
}
.ab-btn-outline-light {
display: inline-flex;
align-items: center;
gap: 9px;
color: #fff;
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14.5px;
padding: 15px 26px;
border-radius: 40px;
border: 1.5px solid rgba(255,255,255,.35);
transition: .3s;
white-space: nowrap;
}
.ab-btn-outline-light:hover {
background: #fff;
color: var(--color-text-primary) !important;
border-color: #fff;
}
/*---------------------------------------------------------
SCROLL REVEAL (shared across every section on this page)
---------------------------------------------------------*/
.ab-reveal {
opacity: 1;
transform: translateY(22px);
transition: opacity .7s cubic-bezier(.22,1,.36,1),
transform .7s cubic-bezier(.22,1,.36,1);
}
.ab-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.ab-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}
/*=========================================================
1. HERO
=========================================================*/
.ab-hero-section {
background: #010101;
padding: 130px 0 90px;
overflow: hidden;
}
.ab-hero-grid {
display: grid;
grid-template-columns: 1fr 0.95fr;
gap: 60px;
align-items: center;
}
.ab-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Manrope", sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 22px;
}
.ab-hero-heading {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 1.15;
letter-spacing: -.01em;
color: #fff;
margin: 0 0 22px;
}
.ab-hero-heading-accent {
color: var(--color-accent);
display: inline;
}
.ab-hero-subheading p {
font-family: "Inter", sans-serif;
font-size: 16.5px;
line-height: 1.85;
color: rgba(255,255,255,.65);
max-width: 480px;
margin: 0 0 12px;
}
.ab-hero-subheading p:last-child { margin-bottom: 0; }
.ab-hero-cta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
.ab-hero-cta-row .ab-btn-secondary {
color: #fff;
border-color: rgba(255,255,255,.3);
}
.ab-hero-cta-row .ab-btn-secondary:hover {
background: #fff;
color: var(--color-text-primary) !important;
border-color: #fff;
}
.ab-hero-visual-img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 991px) {
.ab-hero-section { padding: 100px 0 70px; }
.ab-hero-grid { grid-template-columns: 1fr; gap: 44px; }
.ab-hero-subheading p { max-width: 100%; }
}
@media (max-width: 576px) {
.ab-hero-section { padding: 90px 0 56px; }
.ab-hero-cta-row { flex-direction: column; align-items: stretch; }
.ab-hero-cta-row a { justify-content: center; }
}
/*=========================================================
2. OUR STORY
=========================================================*/
.ab-story-section {
background: var(--color-bg-primary);
padding: 110px 0;
overflow: hidden;
}
.ab-story-grid {
display: grid;
grid-template-columns: 0.85fr 1fr;
gap: 64px;
align-items: center;
}
.ab-story-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Manrope", sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 20px;
}
.ab-story-heading {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(28px, 3.2vw, 42px);
line-height: 1.2;
letter-spacing: -.01em;
color: var(--color-text-primary);
margin: 0 0 18px;
}
.ab-story-body p {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.85;
color: var(--color-text-secondary);
margin: 0 0 14px;
}
.ab-story-body p:last-child { margin-bottom: 0; }
.ab-story-mission {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
padding: 18px 20px;
border-radius: 14px;
background: rgba(var(--color-accent-rgb), .06);
border: 1px solid rgba(var(--color-accent-rgb), .2);
}
.ab-story-mission-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.ab-story-mission-icon img { width: 16px; height: 16px; object-fit: contain; }
.ab-story-mission p {
margin: 0;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 1.5;
color: var(--color-text-primary);
}
.ab-story-visual-img {
display: block;
width: 100%;
height: auto;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(0,0,0,.12);
object-fit: cover;
}
@media (max-width: 991px) {
.ab-story-section { padding: 90px 0; }
.ab-story-grid { grid-template-columns: 1fr; gap: 40px; }
.ab-story-visual { order: -1; }
}
@media (max-width: 576px) {
.ab-story-section { padding: 70px 0; }
.ab-story-visual-img { border-radius: 18px; }
}
/*=========================================================
3. STATS BAR
=========================================================*/
.ab-stats-section {
background: var(--color-bg-primary);
padding: 0 0 100px;
}
.ab-stats-bar {
background: var(--color-text-primary);
border-radius: 24px;
padding: 40px 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.ab-stats-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.ab-stats-icon {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(var(--color-accent-rgb), .4);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
margin-bottom: 4px;
}
.ab-stats-icon img { width: 20px; height: 20px; object-fit: contain; }
.ab-stats-number {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(26px, 3vw, 34px);
color: #fff;
line-height: 1;
}
.ab-stats-label {
font-family: "Inter", sans-serif;
font-size: 13.5px;
color: rgba(255,255,255,.6);
line-height: 1.4;
}
@media (max-width: 767px) {
.ab-stats-bar { grid-template-columns: repeat(2, 1fr); row-gap: 36px; padding: 32px 22px; border-radius: 20px; }
}
/*=========================================================
4. OUR VALUES
=========================================================*/
.ab-values-section {
background: var(--color-bg-secondary);
padding: 110px 0;
}
.ab-values-intro {
max-width: 680px;
margin: 0 auto 52px;
text-align: center;
}
.ab-values-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Manrope", sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 18px;
}
.ab-values-heading {
margin-left: auto;
margin-right: auto;
}
.ab-values-subheading p {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.8;
color: var(--color-text-secondary);
margin: 0 0 8px;
}
.ab-values-subheading p:last-child { margin-bottom: 0; }
.ab-values-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.ab-values-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 30px 22px;
text-align: center;
transition: .3s;
}
.ab-values-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,.06);
border-color: rgba(var(--color-accent-rgb), .3);
}
.ab-values-card-icon {
width: 52px;
height: 52px;
margin: 0 auto 18px;
border-radius: 50%;
background: rgba(var(--color-accent-rgb), .1);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.ab-values-card-icon img { width: 24px; height: 24px; object-fit: contain; }
.ab-values-card-title {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--color-text-primary);
margin: 0 0 8px;
}
.ab-values-card-text {
font-family: "Inter", sans-serif;
font-size: 13.5px;
line-height: 1.65;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 991px) {
.ab-values-section { padding: 90px 0; }
.ab-values-grid { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
}
@media (max-width: 576px) {
.ab-values-section { padding: 70px 0; }
.ab-values-grid { grid-template-columns: repeat(2, 1fr); }
.ab-values-intro { margin-bottom: 36px; }
}
/*=========================================================
5. OUR TEAM
=========================================================*/
.ab-team-section {
background: var(--color-text-primary);
padding: 110px 0;
}
.ab-team-intro {
max-width: 680px;
margin: 0 auto 48px;
text-align: center;
}
.ab-team-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Manrope", sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 18px;
}
.ab-team-heading {
color: #fff;
margin-left: auto;
margin-right: auto;
}
.ab-team-subheading p {
font-family: "Inter", sans-serif;
font-size: 15.5px;
line-height: 1.8;
color: rgba(255,255,255,.6);
margin: 0 0 8px;
}
.ab-team-subheading p:last-child { margin-bottom: 0; }
.ab-team-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
margin-bottom: 44px;
}
.ab-team-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 20px 16px 24px;
text-align: center;
position: relative;
transition: .3s;
}
.ab-team-card:hover {
transform: translateY(-6px);
border-color: rgba(var(--color-accent-rgb), .4);
}
.ab-team-photo {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
display: block;
border: 2px solid rgba(255,255,255,.12);
}
.ab-team-name {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14.5px;
color: var(--color-accent);
margin: 0 0 4px;
}
.ab-team-role {
display: block;
font-family: "Inter", sans-serif;
font-size: 12.5px;
color: rgba(255,255,255,.55);
margin-bottom: 12px;
}
.ab-team-linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(var(--color-accent-rgb), .14);
color: var(--color-accent);
font-size: 12px;
transition: .3s;
}
.ab-team-linkedin:hover {
background: var(--color-accent);
color: #fff;
}
.ab-team-cta-wrap {
text-align: center;
}
.ab-team-cta-wrap .ab-btn-outline {
color: #fff;
border-color: rgba(255,255,255,.3);
}
.ab-team-cta-wrap .ab-btn-outline:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff !important;
}
@media (max-width: 991px) {
.ab-team-section { padding: 90px 0; }
.ab-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
.ab-team-section { padding: 70px 0; }
.ab-team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ab-team-intro { margin-bottom: 36px; }
}
/*=========================================================
ABOUT — BRANDS SLIDER (replaces the old static .ab-brands-row)
File: assets/css/about.css
Append this block to the END of about.css (or home.css,
wherever the other .ab-brands-* rules already live) — it
replaces/extends the ".6. BRANDS STRIP" section.
Shows ONE brand at a time, auto-advances every ~3.2s
(see brands.php inline script), pauses on hover, dot nav
below. Works with any number of brands (1 to 6).
Layout per slide: logo sits in its own bordered card,
name + description sit in a SEPARATE bordered card just
below it (not squeezed inside the logo card).
=========================================================*/
/*---------------------------------------------------------
INTRO — force center alignment (eyebrow + heading), same
recipe as .ab-values-intro / .ab-team-intro elsewhere
---------------------------------------------------------*/
.ab-brands-intro {
max-width: 680px;
margin: 0 auto 44px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.ab-brands-intro .hero-alt-eyebrow {
margin-left: auto;
margin-right: auto;
}
.ab-brands-heading {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/*---------------------------------------------------------
SLIDER SHELL
---------------------------------------------------------*/
.ab-brands-slider {
position: relative;
max-width: 360px;
margin: 0 auto;
}
.ab-brands-slider-track {
position: relative;
height: 300px;
}
.ab-brands-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 18px;
opacity: 0;
transform: translateY(14px) scale(.98);
pointer-events: none;
transition: opacity .5s cubic-bezier(.22,1,.36,1),
transform .5s cubic-bezier(.22,1,.36,1);
}
.ab-brands-slide.is-active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/*---------------------------------------------------------
CARD 1 — logo only
---------------------------------------------------------*/
.ab-brands-slide-logo-card {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 380px;
height: 130px;
padding: 24px 32px;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .06);
}
.ab-brands-slide-logo-card img {
max-width: 100%;
max-height: 68px;
width: auto;
height: auto;
object-fit: contain;
}
/*---------------------------------------------------------
CARD 2 — name + description, separate bordered card
---------------------------------------------------------*/
.ab-brands-slide-info-card {
width: 100%;
max-width: 380px;
padding: 18px 22px;
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .05);
text-align: center;
}
.ab-brands-slide-name {
display: block;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.ab-brands-slide-desc {
font-family: "Inter", sans-serif;
font-size: 13.5px;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0;
}
/*---------------------------------------------------------
DOT NAVIGATION — same recipe as .carousel-dots /
.ai-proof-wall-dots elsewhere on the site
---------------------------------------------------------*/
.ab-brands-slider-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 22px;
}
.ab-brands-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: var(--color-border);
padding: 0;
cursor: pointer;
transition: .3s;
}
.ab-brands-dot.is-active {
background: var(--color-accent);
width: 22px;
border-radius: 5px;
}
section.ab-brands-section {
padding: 110px 0;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 576px) {
.ab-brands-slider-track {
height: 300px;
}
.ab-brands-slide-logo-card {
height: 110px;
padding: 18px 24px;
}
.ab-brands-slide-logo-card img {
max-height: 54px;
}
.ab-brands-slide-info-card {
padding: 14px 18px;
}
.ab-brands-slide-desc {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.ab-brands-slide {
transition: none;
}
}
/*=========================================================
7. FINAL CTA BAR
=========================================================*/
.ab-cta-section {
background: var(--color-bg-primary);
padding: 70px 0 100px;
}
.ab-cta-bar {
background: var(--color-text-primary);
border-radius: 24px;
padding: 40px 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.ab-cta-left {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
min-width: 280px;
}
.ab-cta-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(var(--color-accent-rgb), .16);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.ab-cta-icon img { width: 24px; height: 24px; object-fit: contain; }
.ab-cta-heading {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(19px, 2vw, 24px);
color: #fff;
margin: 0 0 4px;
line-height: 1.3;
}
.ab-cta-subtext {
font-family: "Inter", sans-serif;
font-size: 14px;
color: rgba(255,255,255,.6);
margin: 0;
}
.ab-cta-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.ab-cta-bar { flex-direction: column; align-items: stretch; text-align: center; padding: 32px 26px; border-radius: 20px; }
.ab-cta-left { flex-direction: column; text-align: center; }
.ab-cta-right { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 576px) {
.ab-cta-section { padding: 0 0 60px; }
.ab-cta-right { flex-direction: column; align-items: stretch; width: 100%; }
.ab-cta-right a { justify-content: center; }
}
/*=========================================================
RESOURCE / ARTICLE PAGE TEMPLATE
Prefix: resource- / section- / text-eyebrow / callout-box /
stat- (all unique, no clash with existing site classes).
Ye poora block aapki master CSS file (home.css) ke END me
paste kar dena. Koi naya font ya naya color introduce nahi
kiya gaya — sab kuch :root ke already-defined tokens
(--color-accent, --font-heading, --font-body, --btn-radius,
etc.) se aa raha hai, is liye ye page site ke baaki hisson
jaisa hi lagega.
Buttons: is template ke CTAs already global .btn-primary /
.btn-secondary use karte hain (page-resource.php me), isliye
unke liye alag se kuch add karne ki zaroorat nahi.
h1/h2/h3: root CSS me already Playfair Display + color
--theme-heading globally set hai, isliye yahan font/color
dobara override nahi kiya — sirf layout (size/spacing) ka
zaroori kaam yahan hai.
=========================================================*/
/*---------------------------------------------------------
BASE
---------------------------------------------------------*/
.resource-article{
background:var(--color-bg-primary);
}
/* Wider reading container — default Bootstrap container (1140/1320px)
combined with a narrow inner column left too much dead space on
either side on real screens. This keeps text comfortably readable
while giving grid-shaped blocks (comparison/signals/before-after)
real room to breathe. */
.resource-article .container{
max-width:1180px;
}
.resource-breadcrumb a{
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:13px;
color:var(--color-text-secondary);
text-decoration:none;
}
.resource-breadcrumb a:hover{
color:var(--color-accent);
}
/* eyebrow — same pill recipe used across the site
(.hic-eyebrow / .cthero-eyebrow / .ophi-eyebrow) */
.text-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
font-size:12.5px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--color-accent);
padding:7px 16px;
border-radius:30px;
background:rgba(var(--color-accent-rgb),.08);
border:1px solid rgba(var(--color-accent-rgb),.28);
}
/*---------------------------------------------------------
HERO
---------------------------------------------------------*/
.resource-hero{
border-bottom:1px solid var(--color-border);
background:var(--color-bg-primary);
}
.resource-hero__title{
margin-bottom:18px;
font-weight: 700;
font-size: clamp(34px, 5vw, 58px);
}
.resource-hero__subtitle{
font-size:17px;
line-height:1.75;
color:var(--color-text-secondary);
max-width:42rem;
margin-left:auto;
margin-right:auto;
}
.resource-hero__meta{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:8px 0;
}
.resource-hero__meta-item{
display:inline-flex;
align-items:center;
gap:7px;
font-family:"Manrope",sans-serif;
font-weight:600;
font-size:13px;
color:var(--color-text-secondary);
padding:0 16px;
border-right:1px solid var(--color-border);
}
.resource-hero__meta-item:last-child{
border-right:none;
}
.resource-hero__meta-item i{
font-size:12px;
color:var(--color-accent);
}
@media (max-width:576px){
.resource-hero__meta-item{
padding:0 10px;
font-size:12.5px;
}
}
.resource-hero__img{
width:100%;
height:auto;
border-radius:20px;
border:1px solid var(--color-border);
box-shadow:0 30px 70px rgba(0,0,0,.1);
}
/*---------------------------------------------------------
SECTIONS — generic
---------------------------------------------------------*/
.resource-section.border-top{
border-top:1px solid var(--color-border) !important;
}
.bg-resource-subtle{
background:var(--color-bg-secondary);
}
.section-heading{
margin-bottom:16px !important;
}
.section-subheading{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16.5px;
color:var(--color-text-secondary);
}
.lead-text{
font-size:18px;
line-height:1.8;
color:var(--color-text-secondary);
}
/*---------------------------------------------------------
BODY CONTENT — from the WYSIWYG editor
---------------------------------------------------------*/
.section-body p{ margin-bottom:1.1em; }
.section-body p:last-child{ margin-bottom:0; }
.section-body ul,
.section-body ol{
padding-left:1.35em;
margin-bottom:1.1em;
}
.section-body li{
margin-bottom:.5em;
line-height:1.7;
color:var(--color-text-secondary);
}
.section-body strong{
color:var(--color-text-primary);
}
/* checklist — accent checkmark, same "signal" language as
.assess-check / .wsi-card-list bullets elsewhere on the site */
.section-body ul.checklist{
list-style:none;
padding-left:0;
}
.section-body ul.checklist li{
position:relative;
padding-left:1.9em;
font-weight:600;
color:var(--color-text-primary);
}
.section-body ul.checklist li::before{
content:"\f00c"; /* fa-check */
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:0;
top:1px;
width:20px;
height:20px;
border-radius:50%;
background:var(--color-accent);
color:#fff;
font-size:10px;
display:flex;
align-items:center;
justify-content:center;
}
/* tables — scroll instead of break */
/* .section-body{ overflow-x:auto; } */
.section-body table{
width:100%;
border-collapse:collapse;
margin-bottom:1.25em;
font-size:.95rem;
}
.section-body table thead th{
text-align:left;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12px;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--color-text-secondary);
border-bottom:2px solid var(--color-border);
padding:.75em 1em;
}
.section-body table td{
padding:.75em 1em;
border-bottom:1px solid var(--color-border);
vertical-align:top;
color:var(--color-text-secondary);
}
.section-body mark{
background:rgba(var(--color-accent-rgb),.14);
color:var(--color-text-primary);
padding:.05em .3em;
border-radius:3px;
}
.section-body blockquote{
border-left:3px solid var(--color-accent);
margin:1.5em 0;
padding:.25em 0 .25em 1.25em;
font-family:var(--font-heading);
font-size:1.15rem;
color:var(--color-text-primary);
}
/*---------------------------------------------------------
PULL-QUOTE — same recipe as .ch2-important /
.recommend-closing-box (accent tint box)
---------------------------------------------------------*/
.resource-quote{
display:flex;
flex-direction:column;
gap:8px;
border-left:4px solid var(--color-accent);
background:rgba(var(--color-accent-rgb),.06);
border-top:1px solid rgba(var(--color-accent-rgb),.2);
border-right:1px solid rgba(var(--color-accent-rgb),.2);
border-bottom:1px solid rgba(var(--color-accent-rgb),.2);
border-radius:0 16px 16px 0;
padding:22px 26px;
margin:1.5em 0;
}
.resource-quote p{
font-family:var(--font-heading);
font-size:1.2rem;
color:var(--color-text-primary);
margin-bottom:0;
}
.resource-quote__author{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:13px;
color:var(--color-text-secondary);
font-style:normal;
}
/*---------------------------------------------------------
CALLOUT BOX — same recipe as .ch5-important / .wsi-closing-box
---------------------------------------------------------*/
.callout-box{
background:rgba(var(--color-accent-rgb),.06);
border:1px solid rgba(var(--color-accent-rgb),.22);
border-radius:16px;
padding:1em 1.25em;
margin:1.5em 0;
font-size:.98rem;
color:var(--color-text-primary);
}
/*---------------------------------------------------------
STATS — Manrope bold numerals, accent color
---------------------------------------------------------*/
.stat-value{
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:2rem;
color:var(--color-accent);
line-height:1.1;
}
.stat-label{
font-size:.875rem;
color:var(--color-text-secondary);
}
/*---------------------------------------------------------
FIGURES
---------------------------------------------------------*/
.resource-figure__img{
width:100%;
height:auto;
border-radius:20px;
border:1px solid var(--color-border);
box-shadow:0 30px 70px rgba(0,0,0,.1);
}
.resource-figure__caption{
font-family:"Manrope",sans-serif;
font-size:12.5px;
color:var(--color-text-secondary);
}
/*---------------------------------------------------------
COMPARISON — e.g. "Company A" vs "Company B"
---------------------------------------------------------*/
.resource-compare__col{
height:100%;
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:20px;
padding:32px 28px;
box-shadow:0 20px 50px rgba(0,0,0,.05);
transition:.3s;
}
.resource-compare__col:hover{
transform:translateY(-4px);
box-shadow:0 26px 60px rgba(0,0,0,.08);
}
.resource-compare__col--accent{
background:rgba(var(--color-accent-rgb),.05);
border-color:rgba(var(--color-accent-rgb),.28);
}
.resource-compare__title{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:20px;
color:var(--color-text-primary);
margin-bottom:14px;
}
.resource-compare__col--accent .resource-compare__title{
color:var(--color-accent);
}
.resource-compare__list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
.resource-compare__list li{
position:relative;
padding-left:20px;
font-size:16.5px;
color:var(--color-text-secondary);
}
.resource-compare__list li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:6px;
height:6px;
border-radius:50%;
background:var(--color-text-secondary);
opacity:.4;
}
.resource-compare__col--accent .resource-compare__list li::before{
background:var(--color-accent);
opacity:1;
}
.resource-compare__closing{
margin-top:20px;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:16px;
color:var(--color-text-primary);
}
/*---------------------------------------------------------
4-SIGNAL GRID
---------------------------------------------------------*/
.resource-signal{
height:100%;
background:var(--color-card-bg);
border:1px solid var(--color-border);
border-radius:20px;
padding:30px 26px;
box-shadow:0 16px 40px rgba(0,0,0,.05);
transition:.3s;
}
.resource-signal:hover{
transform:translateY(-4px);
border-color:rgba(var(--color-accent-rgb),.3);
box-shadow:0 22px 50px rgba(0,0,0,.08);
}
.resource-signal__num{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.12);
color:var(--color-accent);
font-family:"Manrope",sans-serif;
font-weight:800;
font-size:13.5px;
margin-bottom:14px;
}
.resource-signal__title{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:20px;
color:var(--color-text-primary);
margin-bottom:8px;
}
.resource-signal__text{
font-size:14.5px;
line-height:1.7;
color:var(--color-text-secondary);
margin:0;
}
.resource-signal__list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:6px;
}
.resource-signal__list li{
position:relative;
padding-left:16px;
font-size:16.5px;
line-height:1.6;
color:var(--color-text-secondary);
}
.resource-signal__list li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:5px;
height:5px;
border-radius:50%;
background:var(--color-accent);
}
/*---------------------------------------------------------
BEFORE / AFTER
---------------------------------------------------------*/
.resource-before-after__tag{
display:inline-block;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--color-text-secondary);
background:var(--color-bg-secondary);
border:1px solid var(--color-border);
padding:5px 14px;
border-radius:20px;
margin-bottom:10px;
}
.resource-before-after__tag--accent{
color:var(--color-accent);
background:rgba(var(--color-accent-rgb),.1);
border-color:rgba(var(--color-accent-rgb),.3);
}
/*---------------------------------------------------------
CHECKLIST (structured fields, not raw HTML)
---------------------------------------------------------*/
.resource-checklist__intro{
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:15px;
color:var(--color-text-primary);
margin-bottom:12px;
}
.resource-checklist{
list-style:none;
margin:0 0 1em;
padding:0;
}
.resource-checklist li{
position:relative;
padding-left:32px;
font-weight:600;
color:var(--color-text-primary);
}
.resource-checklist li::before{
content:"✓";
font-family:"Font Awesome 6 Free";
font-weight:900;
position:absolute;
left:0;
top:1px;
width:20px;
height:20px;
border-radius:50%;
background:var(--color-accent);
color:#fff;
font-size:10px;
display:flex;
align-items:center;
justify-content:center;
}
/*---------------------------------------------------------
FAQ — Bootstrap accordion, restyled to the site's accent language
---------------------------------------------------------*/
.resource-faq .accordion-item{
background:transparent;
border:none;
border-bottom:1px solid var(--color-border);
border-radius:0;
}
.resource-faq .accordion-button{
background:transparent;
font-family:"Manrope",sans-serif;
font-weight:700;
font-size:17px;
color:var(--color-text-primary);
padding:1.1em 0;
box-shadow:none;
}
.resource-faq .accordion-button:not(.collapsed){
color:var(--color-accent);
background:transparent;
box-shadow:none;
}
.resource-faq .accordion-button::after{
background-size:1.1rem;
}
.resource-faq .accordion-body{
padding:0 0 1.5em 0;
color:var(--color-text-secondary);
}
/*---------------------------------------------------------
FINAL CTA — inset rounded panel (not an edge-to-edge bar),
same family as .rdy-section / .ab-cta-bar elsewhere on site
---------------------------------------------------------*/
.resource-final-cta{
background:var(--color-bg-primary);
}
.resource-final-cta__panel{
position:relative;
overflow:hidden;
background:linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius:28px;
padding:64px 40px;
box-shadow:0 40px 90px rgba(0,0,0,.18);
}
.resource-final-cta__panel::after{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:radial-gradient(ellipse 600px 400px at 85% 0%, rgba(var(--color-accent-rgb),.25), transparent 65%);
}
.resource-final-cta__panel > .row{
position:relative;
z-index:1;
}
.resource-final-cta__icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:50%;
background:rgba(var(--color-accent-rgb),.16);
border:1px solid rgba(var(--color-accent-rgb),.4);
color:var(--color-accent);
font-size:19px;
margin-bottom:22px;
}
.resource-final-cta h2{ color:#fff; }
.resource-final-cta .lead-text{ color:rgba(255,255,255,.72); }
@media (max-width:576px){
.resource-final-cta__panel{
padding:44px 26px;
border-radius:22px;
}
}
/*---------------------------------------------------------
MISC
---------------------------------------------------------*/
.py-lg-6{ padding-top:4.5rem; padding-bottom:4.5rem; }
.resource-section--media .section-body{ margin-top:.25rem; }
@media (prefers-reduced-motion: reduce){
.resource-article *{ transition:none !important; animation:none !important; }
}
@media (max-width:767.98px){
.py-lg-6{ padding-top:3rem; padding-bottom:3rem; }
.resource-hero__subtitle{ font-size:15.5px; }
.stat-value{ font-size:1.6rem; }
}