/* =========================================
POWERED BY DATA - PREMIUM BRAND SYSTEM
========================================= */
:root {
--navy: #0A192F;
--navy-light: #112240;
--blue: #2563EB;
--teal: #14B8A6;
--cyan: #06B6D4;
--green: #10B981;
--mint: #F0FDFA;
--white: #FFFFFF;
--gray-light: #F3F4F6;
--gray: #9CA3AF;
--gray-dark: #4B5563;
--text-main: #1E293B;
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.4);
--glass-dark-bg: rgba(10, 25, 47, 0.6);
--glass-dark-border: rgba(20, 184, 166, 0.2);
--shadow-soft: 0 10px 40px -10px rgba(10, 25, 47, 0.08);
--shadow-hover: 0 20px 40px -10px rgba(20, 184, 166, 0.15);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--text-main);
line-height: 1.6;
background-color: var(--white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.bg-pattern { background-image: radial-gradient(var(--gray-light) 1px, transparent 1px); background-size: 40px 40px; }
.data-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--gray-light) 1px, transparent 1px), linear-gradient(90deg, var(--gray-light) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; z-index: -1; }
.bg-navy { background-color: var(--navy); }
.bg-mint { background-color: var(--mint); }
.text-white { color: var(--white) !important; }
.text-teal { color: var(--teal); }
.text-cyan { color: var(--cyan); }
.text-gray { color: #CBD5E1; }
.text-gray-dark { color: var(--gray-dark); }
.text-navy { color: var(--navy); }
.font-bold { font-weight: 700; }
.border-y { border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }
.border-t { border-top: 1px solid #E2E8F0; }
.container { width: min(100% - 48px, 1240px); margin: 0 auto; padding: 0; }
.section-pad { padding: 100px 0; }
.pt-120 { padding-top: 120px; } .pb-80 { padding-bottom: 80px; }
.pt-20 { padding-top: 20px; } .pt-30 { padding-top: 30px; }
.p-40 { padding: 40px; }
.mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-80 { margin-top: 80px; }
.mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-50 { margin-bottom: 50px; }
.mx-auto { margin-inline: auto; }
.max-w-900 { max-width: 900px; } .max-w-800 { max-width: 800px; } .max-w-700 { max-width: 700px; } .max-w-600 { max-width: 600px; } .max-w-500 { max-width: 500px; } .max-w-300 { max-width: 300px; }
.w-100 { width: 100%; } .block { display: block; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-align { display: flex; align-items: center; }
.gap-20 { gap: 20px; }
.relative { position: relative; } .absolute { position: absolute; } .z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }
.rounded-16 { border-radius: 16px; }
h1, h2, h3, h4, h5 { color: var(--navy); font-weight: 700; line-height: 1.2; }
.hero-title {
max-width: 850px;
font-size: clamp(3.2rem, 6.2vw, 5.2rem);
line-height: 0.98;
letter-spacing: -0.055em;
font-weight: 800;
text-wrap: balance;
}
.section-title { font-size: 2.75rem; letter-spacing: -0.02em; }
.section-subtitle { font-size: 1.125rem; color: var(--gray-dark); margin-top: 15px; }
.eyebrow {
font-size: 1.25rem;
font-weight: 800;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 0.13em;
line-height: 1.35;
display: block;
}
.text-gradient { background: linear-gradient(135deg, var(--teal), var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-xl { font-size: 1.4rem; }
.text-center { text-align: center; }
.tracking-wide { letter-spacing: 0.05em; }
.leading-tight { line-height: 1.3; }
.leading-relaxed { line-height: 1.6; }
.shadow-hover { transition: var(--transition); }
.shadow-hover:hover { box-shadow: var(--shadow-hover); }
.btn-primary, .btn-primary-nav, .btn-secondary, .btn-secondary-outline, .btn-text {
display: inline-block; font-weight: 600; text-decoration: none; border-radius: 6px; transition: var(--transition); cursor: pointer; text-align: center; border: none; font-size: 0.95rem;
}
.btn-primary { background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--white); padding: 14px 32px; box-shadow: 0 4px 14px rgba(10,25,47,0.2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10,25,47,0.3); background: var(--navy); }
.btn-primary-nav { background-color: #0A192F !important; color: #FFFFFF !important; padding: 10px 24px; margin-left: 20px; }
.btn-primary-nav:hover { background-color: #14B8A6 !important; color: #FFFFFF !important; }
.btn-secondary { background: transparent; color: var(--navy); border: 1px solid var(--gray); padding: 13px 32px; }
.btn-secondary:hover { border-color: var(--navy); background: rgba(10,25,47,0.03); }
.btn-secondary-outline { background: transparent; color: var(--text-main); border: 1px solid #CBD5E1; padding: 12px 24px; width: 100%; }
.btn-secondary-outline:hover { border-color: var(--teal); color: var(--teal); background: rgba(20,184,166,0.03); }
.btn-text { color: var(--teal); font-size: 0.9rem; letter-spacing: 0.05em; }
.btn-text:hover { color: var(--navy); }
.glass-panel { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-soft); transition: var(--transition); }
.glass-panel:hover { box-shadow: var(--shadow-hover); border-color: rgba(20,184,166,0.3); }
.glass-card { background: var(--white); border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: var(--shadow-soft); transition: var(--transition); padding: 40px; }
.glass-panel-dark { background: var(--glass-dark-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-dark-border); border-radius: 16px; padding: 32px; }
/* NAVBAR */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 1) !important;
border-bottom: 1px solid #E2E8F0;
padding: 10px 0 !important;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
.navbar.scrolled {
background-color: rgba(255, 255, 255, 0.78) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(226, 232, 240, 0.5);
box-shadow: 0 4px 20px -5px rgba(10, 25, 47, 0.08);
padding: 6px 0 !important;
}
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.nav-logo { height: 80px !important; width: auto !important; max-height: none !important; margin: 0; object-fit: contain; }
.nav-links a { color: var(--navy); text-decoration: none; font-weight: 500; font-size: 0.9rem; margin-left: 24px; transition: color 0.2s; }
.nav-links a:hover { color: var(--teal); }
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
.hamburger span { width: 25px; height: 2px; background: var(--navy); transition: 0.3s; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.service-pills { display: flex; gap: 10px; flex-wrap: wrap; opacity: 0.8; max-width: 600px; }
.pill { font-size: 0.75rem; font-weight: 600; padding: 6px 12px; background: var(--gray-light); border-radius: 20px; color: var(--gray-dark); border: 1px solid #E2E8F0; transition: var(--transition); }
.pill:hover { background: var(--white); border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.visual-composition { position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; }
.radial-glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(20,184,166,0.15) 0%, transparent 70%); border-radius: 50%; z-index: 0; animation: pulseGlow 4s infinite alternate; }
.data-strip { padding: 16px 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--gray-dark); background: rgba(240, 253, 250, 0.8); }
.dot { width: 4px; height: 4px; background: var(--teal); border-radius: 50%; }
.transform-composition { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to right, #ffffff, #F0FDFA, #ffffff); }
.card-mini { background: var(--white); padding: 16px 24px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; border: 1px solid #E2E8F0; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.raw-card { color: var(--gray-dark); opacity: 0.7; }
.clean-card { color: var(--teal); border-color: var(--teal); box-shadow: 0 4px 20px rgba(20,184,166,0.15); }
.workflow-img-balanced { width: 100%; max-width: 650px !important; height: auto; display: block; margin: 0 auto; object-fit: contain; }
.glow-bg-subtle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, transparent 70%); z-index: 0; filter: blur(20px); }
.process-system { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; position: relative; z-index: 10; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; }
.process-box { flex: 1; min-width: 150px; }
.process-box .num { font-size: 0.85rem; color: var(--teal); font-weight: 700; margin-bottom: 8px; display: block; }
.process-box h4 { color: var(--white); font-size: 1rem; }
.highlight-box h4 { color: var(--teal); }
/* ABOUT SECTION */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: stretch; }
.simple-flow { display: flex; flex-direction: column; gap: 15px; text-align: center; padding: 24px; font-weight: 600; font-size: 0.9rem; color: var(--navy); }
@media (min-width: 768px) {
.simple-flow { flex-direction: row; justify-content: space-between; align-items: center; }
}
.flow-arrow { color: var(--teal); opacity: 0.6; }
.trust-blocks { display: flex; flex-direction: column; gap: 20px; }
.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.principle { background: var(--white); border: 1px solid #E2E8F0; padding: 20px; border-radius: 8px; border-left: 3px solid var(--teal); box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: var(--transition); }
.principle:hover { transform: translateX(4px); box-shadow: var(--shadow-soft); border-color: rgba(20,184,166,0.3); }
.p-num { font-size: 0.75rem; font-weight: 800; color: var(--teal); margin-bottom: 8px; display: block; letter-spacing: 0.1em; }
.principle h5 { font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.principle p { font-size: 0.85rem; color: var(--gray-dark); margin: 0; }
.about-logo { height: 60px; width: auto; object-fit: contain; }
/* Dynamic Ecosystem Service Panel Styles */
.ecosystem-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.category-panel { background: var(--white); border: 1px solid #E2E8F0; border-radius: 16px; padding: 40px; box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; transition: var(--transition); }
.category-panel:hover { box-shadow: var(--shadow-hover); border-color: rgba(20,184,166,0.3); }
.cat-header { margin-bottom: 24px; }
.cat-num { font-size: 0.85rem; font-weight: 800; color: var(--teal); letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
.cat-title { font-size: 1.5rem; color: var(--navy); margin-bottom: 8px; }
.cat-desc { font-size: 0.95rem; color: var(--gray-dark); }
.service-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.schip { font-size: 0.85rem; font-weight: 600; padding: 8px 16px; background: var(--gray-light); color: var(--navy); border-radius: 6px; border: 1px solid transparent; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; }
.schip:hover { background: var(--white); border-color: var(--teal); box-shadow: 0 4px 12px rgba(20,184,166,0.1); }
.schip.expanding { background: rgba(20,184,166,0.05); color: var(--teal); border: 1px dashed rgba(20,184,166,0.4); }
.schip.expanding::before { content: '✦'; font-size: 0.75rem; }
.ecosystem-legend { font-size: 0.85rem; font-weight: 600; color: var(--gray-dark); }
.dot-core { display: inline-block; width: 10px; height: 10px; background: var(--navy); border: 1px solid var(--navy); border-radius: 2px; }
.dot-expanding { display: inline-block; width: 10px; height: 10px; background: rgba(20,184,166,0.1); border: 1px dashed var(--teal); border-radius: 2px; }
.analytics-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cyan-glow { background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 60%); }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kpi-card { background: rgba(255,255,255,0.03); padding: 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.kpi-label { display: block; font-size: 0.8rem; color: var(--gray); text-transform: uppercase; margin-bottom: 4px; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--white); }
.badge { background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 4px; color: var(--gray); }
.port-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.port-image-wrapper { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #E2E8F0; }
.port-img { width: 100%; height: auto; display: block; object-fit: cover; }
.port-overlay { position: absolute; inset: 0; background: rgba(10,25,47,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); backdrop-filter: blur(2px); }
.port-image-wrapper:hover .port-overlay { opacity: 1; }
.view-btn { color: var(--white); border: 1px solid var(--white); padding: 10px 20px; border-radius: 4px; font-weight: 600; font-size: 0.9rem; }
.port-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 0.75rem; background: var(--gray-light); padding: 4px 10px; border-radius: 4px; color: var(--navy); font-weight: 500; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.input-group { display: flex; flex-direction: column; text-align: left; }
.full-width { grid-column: 1 / -1; }
.input-group label { font-size: 0.85rem; font-weight: 600; color: var(--gray); margin-bottom: 8px; }
.input-group input, .input-group select, .input-group textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 12px; color: var(--white); font-family: inherit; font-size: 0.95rem; transition: var(--transition); }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,0.1); background: rgba(255,255,255,0.1); }
.input-group select option { color: var(--navy); }
.form-success { background: rgba(16,185,129,0.1); border: 1px solid var(--green); color: var(--green); padding: 12px; border-radius: 6px; text-align: center; }
.hidden { display: none; }
/* =========================================================
PREMIUM B2B FOOTER
========================================================= */
.site-footer {
background-color: #F8FAFC;
border-top: 1px solid #E3E8EF;
padding: 80px 20px 32px;
font-family: 'Inter', sans-serif;
color: #0A1628;
}
.sf-container {
max-width: 1200px;
margin: 0 auto;
}
.sf-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 48px;
margin-bottom: 64px;
}
/* Brand Column */
.sf-logo {
height: 75px;
width: auto;
margin-bottom: 20px;
display: block;
}
.sf-tagline {
display: block;
font-size: 0.75rem;
font-weight: 800;
color: #12B5A6;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 8px;
}
.sf-meta {
font-size: 0.85rem;
font-weight: 600;
color: #0A1628;
margin: 0 0 16px 0;
}
.sf-desc {
font-size: 0.9rem;
color: #52606D;
line-height: 1.6;
margin: 0 0 20px 0;
}
.sf-link-cta {
display: inline-block;
font-size: 0.9rem;
font-weight: 700;
color: #12B5A6;
text-decoration: none;
transition: color 0.2s ease;
}
.sf-link-cta:hover {
color: #0A1628;
}
/* Standard Columns */
.sf-heading {
font-size: 0.85rem;
font-weight: 800;
color: #0A1628;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 24px 0;
}
.sf-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.sf-link {
font-size: 0.95rem;
color: #52606D;
text-decoration: none;
transition: color 0.2s ease;
font-weight: 500;
}
.sf-link:hover {
color: #12B5A6;
}
/* Contact Column */
.sf-contact-info {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.sf-contact-link {
font-size: 0.95rem;
font-weight: 600;
color: #0A1628;
text-decoration: none;
transition: color 0.2s ease;
}
.sf-contact-link:hover {
color: #12B5A6;
}
.sf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background-color: #0A1628;
color: #FFFFFF;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.sf-btn:hover {
background-color: #12B5A6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(18,181,166,0.15);
}
/* Bottom Bar */
.sf-bottom {
border-top: 1px solid #E3E8EF;
padding-top: 32px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.sf-bottom p {
margin: 0;
font-size: 0.85rem;
color: #8793A3;
}
/* Responsive Breakpoints */
@media (max-width: 992px) {
.sf-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
@media (max-width: 576px) {
.sf-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.sf-btn {
width: 100%;
}
}
.img-3d {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.hero-img {
position: relative;
z-index: 2;
width: min(100%, 700px);
max-height: 540px;
object-fit: contain;
}
.floating { animation: float 6s ease-in-out infinite; }
.floating-slow { animation: float 8s ease-in-out infinite; }
.delay-1 { animation-delay: 1s; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } }
@keyframes pulseGlow { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.1); opacity: 0.8; } }
.particle { position: absolute; width: 6px; height: 6px; background: var(--teal); border-radius: 50%; opacity: 0.5; }
.p1 { top: 20%; left: 10%; animation: float 4s infinite; }
.p2 { bottom: 30%; right: 15%; animation: float 5s infinite 1s; width: 4px; height: 4px; background: var(--blue); }
.p3 { top: 50%; right: 5%; animation: float 6s infinite 2s; width: 8px; height: 8px; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.fade-up-anim { animation: fadeUp 0.8s ease-out forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.floating, .floating-slow, .reveal, .fade-up-anim, .radial-glow, .particle, .navbar { animation: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
}
/* =========================================================
PBD STYLE V2 - RESPONSIVE SYSTEM
========================================================= */
@media (max-width: 1100px) {
.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
gap: 34px;
}
.hero-title {
font-size: clamp(2.75rem, 5vw, 3.55rem) !important;
}
.nav-links a {
margin-left: 17px;
}
.sf-grid {
grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
gap: 30px;
}
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 18px;
text-align: center;
}
.hero-text {
max-width: 760px;
margin: 0 auto;
}
.hero-title,
.subheading {
margin-left: auto;
margin-right: auto;
}
.hero-ctas,
.service-pills {
justify-content: center;
}
.visual-composition {
min-height: 350px;
max-width: 760px;
margin: 0 auto;
}
.hero-img {
max-width: 650px;
max-height: 470px;
}
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.analytics-composition,
.port-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.ecosystem-grid,
.who-we-help-grid,
.engagement-grid {
grid-template-columns: 1fr;
}
.sf-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
html {
scroll-padding-top: 88px;
}
.container {
width: min(100% - 40px, 1240px);
}
.section-pad {
padding: 64px 0;
}
.pt-120 {
padding-top: 72px;
}
.pb-80 {
padding-bottom: 58px;
}
.p-40,
.glass-card {
padding: 24px;
}
.glass-panel,
.glass-panel-dark {
padding: 24px;
}
.navbar,
.navbar.scrolled {
padding: 6px 0 !important;
}
.nav-logo {
height: 58px !important;
}
.hamburger {
display: flex;
width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--white);
flex-direction: column;
padding: 12px 20px 20px;
border-bottom: 1px solid #E2E8F0;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
display: none;
}
.nav-links.active {
display: flex;
background-color: rgba(255,255,255,0.98) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.nav-links a,
.btn-primary-nav {
width: 100%;
margin: 4px 0;
padding: 12px 16px;
display: block;
text-align: center;
}
.hero-title {
font-size: clamp(2.35rem, 9.5vw, 3rem) !important;
line-height: 1.05;
}
.section-title {
font-size: clamp(1.9rem, 7.5vw, 2.3rem);
line-height: 1.15;
}
.section-subtitle {
font-size: 1rem;
}
.hero-ctas {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.hero-ctas .btn-primary,
.hero-ctas .btn-secondary {
width: 100%;
}
.service-pills {
justify-content: center;
}
.visual-composition {
min-height: 300px;
}
.hero-img {
max-width: 100%;
max-height: 360px;
}
.data-strip .container {
gap: 9px;
flex-wrap: wrap;
font-size: 0.68rem;
line-height: 1.35;
justify-content: center;
text-align: center;
}
.transform-composition {
flex-direction: column;
background: transparent;
}
.service-card {
min-height: 0;
padding: 24px 20px;
}
.service-card h3 {
font-size: 1.18rem;
}
.service-card p {
font-size: 0.9rem;
}
.category-panel {
padding: 24px 20px;
gap: 24px;
border-radius: 12px;
}
.cat-title {
font-size: 1.3rem;
}
.service-chips {
gap: 8px;
}
.schip,
.schip.expanding {
padding: 7px 10px;
font-size: 0.78rem;
}
.principles-grid {
gap: 14px;
}
.principle {
padding: 18px;
}
.process-system {
flex-direction: column;
align-items: center;
text-align: center;
gap: 22px;
padding-top: 28px;
}
.process-box {
min-width: 0;
width: 100%;
text-align: center;
}
div.workflow-visual {
width: 100% !important;
max-width: 100%;
}
div.workflow-visual > img.workflow-visual {
width: 100%;
max-width: 100%;
margin: 18px auto;
}
.form-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.input-group input,
.input-group select,
.input-group textarea {
min-height: 48px;
}
.input-group textarea {
min-height: 120px;
}
.contact-grid .btn-primary,
.final-cta .btn-primary {
width: 100%;
}
.faq-grid {
gap: 12px;
}
.faq-item summary {
padding: 18px 20px;
font-size: 0.98rem;
}
.faq-item > p {
padding: 14px 20px 20px;
font-size: 0.9rem;
}
.site-footer {
padding: 56px 20px 28px;
}
.sf-grid {
grid-template-columns: 1fr;
gap: 34px;
margin-bottom: 40px;
}
.sf-heading {
margin-bottom: 14px;
}
.sf-btn {
width: 100%;
}
.sf-bottom {
padding-top: 24px;
}
}
@media (max-width: 480px) {
.container {
width: min(100% - 32px, 1240px);
}
.hero-title {
font-size: clamp(2.1rem, 10.5vw, 2.7rem) !important;
}
.hero-ctas {
width: 100%;
}
.pill {
font-size: 0.7rem;
padding: 5px 9px;
}
.p-40,
.glass-card,
.glass-panel,
.glass-panel-dark {
padding: 20px;
}
.visual-composition {
min-height: 260px;
}
.hero-img {
max-height: 310px;
}
.simple-flow {
padding: 20px;
gap: 10px;
}
.sf-logo {
height: 64px;
}
}
/* ACCESSIBILITY / INTERACTION POLISH */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(20,184,166,0.35);
outline-offset: 3px;
}
input::placeholder,
textarea::placeholder {
color: rgba(203,213,225,0.62);
}
.data-grid-bg,
.radial-glow,
.glow-bg-subtle,
.particle {
pointer-events: none;
}
@media (hover: hover) {
.service-card,
.help-card,
.engagement-card,
.principle,
.faq-item {
will-change: transform;
}
}
/* FINAL FAQ SELECTOR FIX
Updated homepage uses: ... ... ...
*/
.faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 900px;
margin: 0 auto;
}
details.faq-item {
background: var(--white);
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition);
}
details.faq-item:hover {
border-color: rgba(20,184,166,0.3);
}
details.faq-item > summary {
padding: 22px 28px;
font-weight: 700;
font-size: 1.05rem;
color: var(--navy);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
user-select: none;
}
details.faq-item > summary::-webkit-details-marker {
display: none;
}
details.faq-item > summary::after {
content: '+';
flex: 0 0 auto;
font-size: 1.4rem;
font-weight: 400;
color: var(--teal);
transition: transform 0.3s ease;
}
details.faq-item[open] {
border-color: rgba(20,184,166,0.35);
box-shadow: 0 18px 40px -18px rgba(10,25,47,0.18);
}
details.faq-item[open] > summary::after {
transform: rotate(45deg);
}
details.faq-item > p {
margin: 0;
padding: 16px 28px 24px;
border-top: 1px solid #F1F5F9;
color: var(--gray-dark);
font-size: 0.95rem;
line-height: 1.65;
}
@media (max-width: 768px) {
details.faq-item > summary {
padding: 18px 20px;
font-size: 0.98rem;
}
details.faq-item > p {
padding: 14px 20px 20px;
font-size: 0.9rem;
}
}
/* =========================================================
WORKFLOW VISUAL - 3 STAGE TRANSFORMATION
========================================================= */
.workflow-visual {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
div.workflow-visual {
position: relative;
display: block;
overflow: visible;
padding-inline: 10px;
}
div.workflow-visual > img.workflow-visual {
width: min(100%, 620px);
max-width: 620px;
height: auto;
object-fit: contain;
margin: 18px auto 0;
display: block;
position: relative;
z-index: 2;
}
.workflow .section-title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.workflow .text-gray {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/* Workflow visual responsive refinement */
@media (min-width: 1200px) {
div.workflow-visual > img.workflow-visual {
width: 620px;
max-width: 620px;
}
}
@media (max-width: 900px) {
div.workflow-visual > img.workflow-visual {
width: min(100%, 680px);
max-width: 680px;
}
}
@media (max-width: 768px) {
.section-title {
font-size: clamp(2rem, 8.2vw, 2.5rem);
line-height: 1.12;
}
.eyebrow {
font-size: 0.99rem;
letter-spacing: 0.11em;
}
div.workflow-visual {
padding-inline: 0;
}
div.workflow-visual > img.workflow-visual {
width: 100%;
max-width: 100%;
margin-top: 12px;
}
}
@media (max-width: 480px) {
.section-title {
font-size: clamp(1.9rem, 9vw, 2.3rem);
}
}
/* =========================================================
PBD PREMIUM SERVICE SYSTEM — PRODUCTIZED CAPABILITIES
========================================================= */
.services {
position: relative;
overflow: hidden;
}
.services::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 8%, rgba(20,184,166,0.07), transparent 28%),
radial-gradient(circle at 88% 74%, rgba(37,99,235,0.06), transparent 30%);
pointer-events: none;
}
.services .container {
position: relative;
z-index: 1;
}
.services-intro {
position: relative;
z-index: 1;
}
.service-system {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.service-card {
position: relative;
min-width: 0;
background: rgba(255,255,255,0.96);
border: 1px solid #DCE5EC;
border-radius: 18px;
box-shadow: 0 14px 40px -22px rgba(10,25,47,0.24);
overflow: hidden;
isolation: isolate;
transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.service-card:hover {
transform: translateY(-6px);
border-color: rgba(20,184,166,0.38);
box-shadow: 0 26px 50px -24px rgba(10,25,47,0.24), 0 14px 30px -20px rgba(20,184,166,0.20);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--navy), var(--teal), var(--cyan));
z-index: 2;
}
.service-card--featured {
grid-column: span 1;
}
.service-card--support {
min-height: 440px;
padding: 30px;
}
.service-card--artwork::before {
background: linear-gradient(90deg, #0A192F, #2563EB, #14B8A6);
}
.service-card--managed {
grid-column: 1 / -1;
background: linear-gradient(135deg, #07152A 0%, #0A2344 55%, #0B2D3D 100%);
border-color: rgba(20,184,166,0.26);
color: var(--white);
min-height: 300px;
}
.service-card--managed::before {
background: linear-gradient(90deg, var(--teal), var(--cyan), var(--blue));
}
.service-card-main {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
min-height: 430px;
}
.service-card-copy {
padding: 34px 32px 30px;
display: flex;
flex-direction: column;
min-width: 0;
}
.service-card-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 26px;
background: linear-gradient(135deg, rgba(240,253,250,0.70), rgba(255,255,255,0.15));
border-left: 1px solid #EDF2F7;
overflow: hidden;
}
.service-card--reporting .service-card-visual {
background: linear-gradient(135deg, rgba(239,246,255,0.85), rgba(240,253,250,0.30));
}
.service-visual-glow {
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(20,184,166,0.17), transparent 70%);
filter: blur(4px);
}
.service-visual-glow--blue {
background: radial-gradient(circle, rgba(37,99,235,0.14), transparent 70%);
}
.service-3d {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 300px;
max-height: 270px;
object-fit: contain;
}
.service-card-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.service-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 28px;
padding: 0 8px;
border-radius: 7px;
background: #EAF2F8;
color: var(--navy);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.service-tier {
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-dark);
}
.service-tier--core { color: var(--teal); }
.service-tier--special { color: var(--blue); }
.service-tier--expanding { color: #0A8F83; }
.service-card-title {
margin: 0;
font-size: clamp(1.45rem, 2vw, 1.85rem);
line-height: 1.12;
letter-spacing: -0.028em;
}
.service-card-description {
margin: 14px 0 0;
color: var(--gray-dark);
font-size: 0.96rem;
line-height: 1.66;
max-width: 58ch;
}
.service-card-label {
margin-top: 24px;
margin-bottom: 10px;
font-size: 0.69rem;
color: #64748B;
font-weight: 800;
letter-spacing: 0.12em;
}
.service-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-content: flex-start;
}
.service-tag {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 10px;
border-radius: 7px;
background: #F3F6F8;
border: 1px solid #E3EAF0;
color: var(--navy);
font-size: 0.73rem;
line-height: 1.2;
font-weight: 650;
transition: var(--transition);
}
.service-tag:hover {
border-color: rgba(20,184,166,0.35);
background: #FFFFFF;
}
.service-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: auto;
padding-top: 25px;
}
.service-engagement {
color: #7B8794;
font-size: 0.65rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: 0.10em;
}
.service-cta,
.managed-cta {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--teal);
font-size: 0.77rem;
font-weight: 800;
letter-spacing: 0.03em;
text-decoration: none;
white-space: nowrap;
transition: var(--transition);
}
.service-cta:hover,
.managed-cta:hover {
color: var(--navy);
gap: 11px;
}
.service-card--support .service-card-title {
font-size: 1.35rem;
max-width: 16ch;
}
.service-card--support .service-card-description {
font-size: 0.92rem;
}
.service-icon-orb {
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
margin: 2px 0 20px;
border-radius: 17px;
border: 1px solid rgba(20,184,166,0.2);
background: linear-gradient(145deg, #FFFFFF, #EAFBF8);
box-shadow: 0 12px 26px -18px rgba(20,184,166,0.5);
color: var(--teal);
font-size: 2rem;
font-weight: 700;
}
.service-icon-orb--analytics {
color: var(--blue);
border-color: rgba(37,99,235,0.18);
background: linear-gradient(145deg, #FFFFFF, #EDF4FF);
}
.service-artwork-visual {
position: relative;
width: 94px;
height: 76px;
margin: 2px 0 18px;
}
.artwork-sheet {
position: absolute;
width: 64px;
height: 48px;
border-radius: 7px;
border: 1px solid rgba(37,99,235,0.18);
box-shadow: 0 12px 24px -14px rgba(10,25,47,0.35);
transform: skewY(-9deg) rotate(-4deg);
}
.artwork-sheet--back {
top: 6px;
left: 22px;
background: linear-gradient(145deg, #DCEBFF, #FFFFFF);
}
.artwork-sheet--mid {
top: 13px;
left: 10px;
background: linear-gradient(145deg, #E6FBF7, #FFFFFF);
}
.artwork-sheet--front {
top: 20px;
left: 0;
background: linear-gradient(145deg, #0A192F, #174E7A);
border-color: rgba(20,184,166,0.35);
transform: skewY(-9deg) rotate(2deg);
display: flex;
align-items: flex-end;
gap: 5px;
padding: 8px;
}
.artwork-sheet--front span {
display: block;
width: 10px;
border-radius: 3px 3px 1px 1px;
background: linear-gradient(to top, var(--teal), var(--cyan));
}
.artwork-sheet--front span:nth-child(1) { height: 16px; }
.artwork-sheet--front span:nth-child(2) { height: 25px; }
.artwork-sheet--front span:nth-child(3) { height: 20px; }
.managed-content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
gap: 48px;
align-items: center;
padding: 38px 42px;
}
.service-number--light {
background: rgba(255,255,255,0.10);
color: #DDFBF7;
border: 1px solid rgba(255,255,255,0.10);
}
.service-tier--managed { color: var(--teal); }
.service-card-title--light { color: var(--white); max-width: 18ch; }
.service-card-description--light { color: #B9C7D7; max-width: 62ch; }
.managed-cta {
margin-top: 26px;
padding-bottom: 2px;
}
.managed-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 12px;
}
.managed-node {
min-height: 108px;
padding: 20px 18px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 13px;
background: rgba(255,255,255,0.045);
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
text-align: center;
}
.managed-node strong {
color: #FFFFFF;
font-size: 0.82rem;
letter-spacing: 0.10em;
}
.managed-node span {
color: #95A8BC;
font-size: 0.75rem;
}
.managed-node.is-highlighted {
background: linear-gradient(145deg, rgba(20,184,166,0.18), rgba(6,182,212,0.08));
border-color: rgba(20,184,166,0.42);
box-shadow: 0 18px 35px -25px rgba(20,184,166,0.55);
}
.managed-node.is-highlighted strong { color: var(--teal); }
.managed-arrow { color: var(--teal); font-size: 1.35rem; font-weight: 700; }
/* Keep legacy dynamic service styles available for any older page using them. */
/* =========================================================
STRONGER GENERAL SECTION HIERARCHY
========================================================= */
.section-title {
font-size: clamp(2.3rem, 4.4vw, 3.2rem);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 800;
text-wrap: balance;
}
.services .section-title {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.services .section-subtitle {
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
/* Make the process methodology secondary to the 3-stage workflow visual. */
#workflow .process-system {
margin-top: 34px;
padding-top: 30px;
opacity: 0.96;
}
#workflow .process-box {
padding: 18px 12px;
border-top: 1px solid rgba(255,255,255,0.06);
}
#workflow .process-box h4 {
font-size: 0.95rem;
letter-spacing: 0.015em;
}
#workflow .process-box p {
font-size: 0.83rem;
line-height: 1.55;
color: #AEBCCD;
}
#workflow .workflow-visual {
margin-top: 36px;
}
/* =========================================================
SERVICE SYSTEM — RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
.service-card-main {
grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.8fr);
}
.service-card-copy {
padding: 30px 26px;
}
.service-card-visual {
padding: 20px;
}
.managed-content {
grid-template-columns: 1fr;
gap: 30px;
}
}
@media (max-width: 900px) {
.service-system {
grid-template-columns: 1fr;
}
.service-card--featured,
.service-card--managed {
grid-column: auto;
}
.service-card-main {
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
}
.service-card--support {
min-height: 0;
}
.managed-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.service-card-main {
grid-template-columns: 1fr;
}
.service-card-copy {
padding: 28px 24px 24px;
}
.service-card-visual {
min-height: 220px;
border-left: 0;
border-top: 1px solid #EDF2F7;
}
.service-3d {
max-width: 290px;
max-height: 220px;
}
.service-card-title {
font-size: 1.55rem;
}
.service-card--support {
padding: 26px 24px;
}
.service-card-footer {
align-items: flex-start;
flex-direction: column;
}
.managed-content {
padding: 30px 24px;
}
.managed-flow {
grid-template-columns: 1fr;
}
.managed-arrow {
transform: rotate(90deg);
justify-self: center;
}
#workflow .process-system {
gap: 8px;
}
}
@media (max-width: 480px) {
.service-card-title,
.service-card--support .service-card-title {
font-size: 1.35rem;
max-width: none;
}
.service-card-description {
font-size: 0.9rem;
}
.service-tag {
font-size: 0.69rem;
padding: 5px 8px;
}
.service-tier {
font-size: 0.63rem;
}
.service-number {
min-width: 31px;
height: 26px;
}
.managed-node {
min-height: 86px;
}
}
/* =========================================================
ACCESSIBILITY / POLISH
========================================================= */
.service-card a:focus-visible,
.service-card button:focus-visible,
.service-card input:focus-visible,
.service-card select:focus-visible,
.service-card textarea:focus-visible,
.service-card summary:focus-visible {
outline: 3px solid rgba(20,184,166,0.38);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.service-card,
.service-3d,
.service-card:hover {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* =========================================================
PBD OPERATIONS STACK — EXPERIMENTAL SERVICE SYSTEM
Visual goal: one operating partner, multiple workflows.
========================================================= */
.operations-stack-section {
position: relative;
overflow: hidden;
}
.operations-stack-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 10%, rgba(20,184,166,0.10), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(37,99,235,0.08), transparent 24%),
radial-gradient(circle at 50% 85%, rgba(6,182,212,0.06), transparent 30%);
pointer-events: none;
}
.operations-stack-section .container {
position: relative;
z-index: 1;
}
.operations-stack-section .section-title {
max-width: 840px;
margin-inline: auto;
}
.operations-stack {
display: grid;
grid-template-columns: minmax(250px, 1fr) minmax(340px, 0.95fr) minmax(250px, 1fr);
gap: 22px;
align-items: stretch;
}
.ops-core-card {
position: relative;
background: rgba(255,255,255,0.96);
border: 1px solid #D9E4EB;
border-radius: 18px;
padding: 30px;
box-shadow: 0 18px 46px -28px rgba(10,25,47,0.30);
min-height: 390px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: var(--transition);
}
.ops-core-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--navy), var(--teal));
}
.ops-core-card--right::before {
background: linear-gradient(90deg, var(--blue), var(--teal));
}
.ops-core-card:hover {
transform: translateY(-5px);
border-color: rgba(20,184,166,0.36);
box-shadow: 0 28px 56px -28px rgba(10,25,47,0.28), 0 14px 28px -22px rgba(20,184,166,0.22);
}
.ops-card-topline {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ops-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 30px;
padding: 0 8px;
border-radius: 8px;
background: #EAF2F8;
color: var(--navy);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.ops-tier {
font-size: 0.68rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
}
.ops-tier--special { color: var(--blue); }
.ops-tier--expand { color: #0A8F83; }
.ops-tier--managed { color: var(--teal); }
.ops-mini-label {
margin-top: 22px;
color: #66788A;
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ops-core-card h3 {
margin: 8px 0 0;
color: var(--navy);
font-size: clamp(1.5rem, 2vw, 1.9rem);
line-height: 1.14;
letter-spacing: -0.03em;
}
.ops-core-card p {
margin: 14px 0 0;
color: var(--gray-dark);
font-size: 0.95rem;
line-height: 1.65;
}
.capability-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 22px;
padding: 12px;
border: 1px solid #E4ECF1;
border-radius: 11px;
background: #F8FBFC;
color: var(--navy);
font-size: 0.7rem;
font-weight: 800;
}
.capability-flow span {
padding: 3px 5px;
}
.capability-flow i {
color: var(--teal);
font-style: normal;
}
.ops-tags,
.ops-support-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.ops-tags {
margin-top: 18px;
}
.ops-tags span,
.ops-support-list span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 9px;
border-radius: 7px;
background: #F2F6F8;
border: 1px solid #E0E8ED;
color: var(--navy);
font-size: 0.7rem;
line-height: 1.2;
font-weight: 650;
}
.ops-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
padding-top: 22px;
color: var(--teal);
text-decoration: none;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.02em;
transition: var(--transition);
}
.ops-link:hover {
color: var(--navy);
gap: 11px;
}
/* Central PBD hub */
.operations-hub {
position: relative;
min-height: 390px;
border-radius: 24px;
border: 1px solid rgba(20,184,166,0.28);
background: linear-gradient(150deg, #07172E 0%, #0B2743 53%, #093E49 100%);
box-shadow: 0 30px 70px -36px rgba(6,182,212,0.50);
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
}
.operations-hub::before {
content: '';
position: absolute;
inset: 1px;
border-radius: 23px;
background: radial-gradient(circle at 50% 50%, rgba(20,184,166,0.18), transparent 52%);
pointer-events: none;
}
.hub-grid {
position: absolute;
inset: 0;
opacity: 0.28;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 28px 28px;
}
.hub-glow {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, rgba(6,182,212,0.28), transparent 70%);
filter: blur(8px);
animation: pulseGlow 4s infinite alternate;
}
.hub-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(20,184,166,0.18);
pointer-events: none;
}
.hub-ring--one {
width: 280px;
height: 280px;
}
.hub-ring--two {
width: 205px;
height: 205px;
border-color: rgba(37,99,235,0.22);
}
.hub-object {
position: relative;
z-index: 3;
width: min(84%, 350px);
filter: drop-shadow(0 25px 30px rgba(0,0,0,0.32));
animation: float 7s ease-in-out infinite;
}
.hub-object img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.hub-core-label {
position: absolute;
z-index: 5;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
display: flex;
align-items: baseline;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(7,21,42,0.78);
border: 1px solid rgba(20,184,166,0.30);
box-shadow: 0 12px 24px rgba(0,0,0,0.18);
color: #DDFBF7;
white-space: nowrap;
backdrop-filter: blur(8px);
}
.hub-core-label span {
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.hub-core-label strong {
color: var(--teal);
font-size: 0.88rem;
letter-spacing: 0.10em;
}
.hub-badge {
position: absolute;
z-index: 5;
padding: 6px 9px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
color: #FFFFFF;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
backdrop-filter: blur(8px);
box-shadow: 0 10px 22px rgba(0,0,0,0.16);
}
.hub-badge--data { left: 12%; top: 23%; color: #DDFBF7; }
.hub-badge--mis { right: 12%; top: 19%; color: #DCEBFF; }
.hub-badge--ops { left: 14%; bottom: 25%; color: #DCEBFF; }
.hub-badge--qa { right: 12%; bottom: 27%; color: #DDFBF7; }
/* Supporting capability row */
.ops-support-intro {
max-width: 760px;
margin-inline: auto;
}
.ops-support-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ops-support-card {
position: relative;
background: rgba(255,255,255,0.96);
border: 1px solid #DCE5EC;
border-radius: 15px;
padding: 22px;
min-height: 275px;
display: flex;
flex-direction: column;
box-shadow: 0 12px 32px -22px rgba(10,25,47,0.25);
transition: var(--transition);
overflow: hidden;
}
.ops-support-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--teal);
}
.ops-support-card:hover {
transform: translateY(-4px);
border-color: rgba(20,184,166,0.34);
box-shadow: var(--shadow-hover);
}
.ops-support-card--artwork::before {
background: var(--blue);
}
.ops-support-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 14px;
background: linear-gradient(145deg, #FFFFFF, #EAFBF8);
border: 1px solid rgba(20,184,166,0.18);
box-shadow: 0 12px 26px -20px rgba(20,184,166,0.5);
color: var(--teal);
font-size: 1.55rem;
font-weight: 700;
}
.ops-support-icon--art { color: var(--blue); background: linear-gradient(145deg, #FFFFFF, #EDF4FF); }
.ops-support-icon--auto { color: #0A8F83; }
.ops-support-icon--back { color: var(--navy); }
.ops-support-card .ops-tier {
margin-bottom: 7px;
}
.ops-support-card h3 {
margin: 0;
font-size: 1.16rem;
line-height: 1.18;
letter-spacing: -0.018em;
}
.ops-support-card p {
margin: 10px 0 0;
color: var(--gray-dark);
font-size: 0.86rem;
line-height: 1.58;
}
.ops-support-list {
margin-top: auto;
padding-top: 18px;
}
.ops-support-list span {
font-size: 0.65rem;
}
/* Managed model */
.ops-managed {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
gap: 34px;
align-items: center;
padding: 34px 38px;
border-radius: 20px;
background: linear-gradient(135deg, #07152A 0%, #0A2344 58%, #0B3140 100%);
border: 1px solid rgba(20,184,166,0.26);
box-shadow: 0 28px 60px -32px rgba(10,25,47,0.55);
overflow: hidden;
position: relative;
}
.ops-managed::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
right: -120px;
top: -180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(20,184,166,0.12), transparent 70%);
pointer-events: none;
}
.ops-managed-copy,
.ops-managed-flow {
position: relative;
z-index: 2;
}
.ops-number--light {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.10);
color: #DDFBF7;
}
.ops-managed h3 {
margin: 12px 0 0;
color: var(--white);
font-size: clamp(1.55rem, 2.3vw, 2rem);
line-height: 1.14;
letter-spacing: -0.03em;
}
.ops-managed p {
margin: 12px 0 0;
color: #B9C7D7;
font-size: 0.92rem;
line-height: 1.62;
max-width: 62ch;
}
.managed-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
color: var(--teal);
text-decoration: none;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.04em;
transition: var(--transition);
}
.managed-cta:hover {
color: #FFFFFF;
gap: 12px;
}
.ops-managed-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.managed-step {
min-height: 100px;
padding: 18px 14px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
text-align: center;
border-radius: 12px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.10);
}
.managed-step strong {
color: #FFFFFF;
font-size: 0.78rem;
letter-spacing: 0.10em;
}
.managed-step span {
color: #93A8BC;
font-size: 0.7rem;
}
.managed-step--active {
background: linear-gradient(145deg, rgba(20,184,166,0.18), rgba(6,182,212,0.08));
border-color: rgba(20,184,166,0.42);
box-shadow: 0 18px 34px -25px rgba(20,184,166,0.60);
}
.managed-step--active strong { color: var(--teal); }
.managed-arrow { color: var(--teal); font-size: 1.25rem; font-weight: 700; }
/* =========================================================
OPERATIONS STACK - RESPONSIVE
========================================================= */
@media (max-width: 1080px) {
.operations-stack {
grid-template-columns: 1fr 1fr;
}
.operations-hub {
grid-column: 1 / -1;
order: -1;
min-height: 330px;
}
.ops-core-card {
min-height: 360px;
}
.ops-support-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-managed {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.operations-stack {
grid-template-columns: 1fr;
gap: 16px;
}
.operations-hub {
grid-column: auto;
min-height: 300px;
}
.ops-core-card {
min-height: 0;
padding: 24px;
}
.ops-support-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.ops-support-card {
min-height: 0;
}
.ops-managed {
padding: 28px 22px;
gap: 28px;
}
.ops-managed-flow {
grid-template-columns: 1fr;
}
.managed-arrow {
transform: rotate(90deg);
justify-self: center;
}
.hub-object {
width: min(76%, 300px);
}
.hub-badge--data { left: 7%; }
.hub-badge--mis { right: 7%; }
.hub-badge--ops { left: 8%; }
.hub-badge--qa { right: 7%; }
}
@media (max-width: 480px) {
.operations-stack-section .section-title {
font-size: 2.05rem;
}
.capability-flow {
gap: 4px;
font-size: 0.66rem;
}
.ops-tags span {
font-size: 0.67rem;
}
.operations-hub {
min-height: 270px;
border-radius: 19px;
}
.hub-ring--one {
width: 220px;
height: 220px;
}
.hub-ring--two {
width: 164px;
height: 164px;
}
.hub-badge {
font-size: 0.55rem;
padding: 5px 7px;
}
.hub-core-label {
bottom: 14px;
}
}
/* =========================================================
FINAL PBD PRODUCTION OVERRIDES
These rules intentionally come last so the visual system
remains compatible with the existing stylesheet while the
current homepage receives the final hierarchy corrections.
========================================================= */
.container {
width: min(calc(100% - 48px), 1240px);
margin-inline: auto;
}
.hero-grid {
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
gap: clamp(34px, 5vw, 72px);
align-items: center;
}
.hero-title {
font-size: clamp(2.8rem, 5.45vw, 4.2rem) !important;
line-height: 1.04;
letter-spacing: -0.045em;
font-weight: 800;
text-wrap: balance;
max-width: 780px;
}
.section-title {
font-size: clamp(2.3rem, 4.35vw, 3.25rem);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: 800;
text-wrap: balance;
}
.subheading {
max-width: 680px;
font-size: clamp(1rem, 1.28vw, 1.16rem);
line-height: 1.68;
}
.service-pills {
max-width: 720px;
gap: 8px;
}
.visual-composition {
min-height: 405px;
}
.hero-img {
width: min(100%, 670px);
max-height: 500px;
object-fit: contain;
}
.data-strip {
background: rgba(240,253,250,0.82);
}
.transform-composition {
justify-content: center;
overflow: hidden;
}
/* Three-stage workflow artwork: intentionally restrained on desktop. */
#workflow .workflow-visual {
width: min(100%, 620px) !important;
max-width: 620px !important;
height: auto !important;
object-fit: contain;
display: block;
margin: 0 auto;
}
#workflow .workflow-visual + * {
max-width: 760px;
margin-inline: auto;
}
#workflow .section-title {
max-width: 920px;
margin-inline: auto;
}
/* The central hub should remain the strongest service visual. */
.operations-hub {
min-height: 390px;
}
.ops-core-card {
box-shadow: 0 24px 48px -30px rgba(10,25,47,0.28);
}
.ops-core-card h3 {
font-size: clamp(1.55rem, 2.2vw, 2.05rem);
letter-spacing: -0.03em;
}
.ops-support-card {
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ops-support-card:hover {
transform: translateY(-4px);
}
.ops-support-card--artwork {
background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(247,250,252,0.98));
}
.ops-managed {
box-shadow: 0 30px 66px -42px rgba(10,25,47,0.58);
}
/* FAQ: actual HTML is */
.faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
max-width: 900px;
margin-inline: auto;
}
details.faq-item {
background: var(--white);
border: 1px solid #E2E8F0;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
details.faq-item:hover,
details.faq-item[open] {
border-color: rgba(20,184,166,0.34);
}
details.faq-item[open] {
box-shadow: 0 18px 40px -25px rgba(10,25,47,0.18);
}
details.faq-item > summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 21px 25px;
color: var(--navy);
font-size: 1rem;
font-weight: 700;
}
details.faq-item > summary::-webkit-details-marker {
display: none;
}
details.faq-item > summary::after {
content: '+';
flex: 0 0 auto;
color: var(--teal);
font-size: 1.35rem;
font-weight: 400;
transition: transform 0.25s ease;
}
details.faq-item[open] > summary::after {
transform: rotate(45deg);
}
details.faq-item > p {
margin: 0;
padding: 14px 25px 23px;
border-top: 1px solid #EDF2F7;
color: var(--gray-dark);
font-size: 0.9rem;
line-height: 1.65;
}
/* Lead form */
.input-group input,
.input-group select,
.input-group textarea {
width: 100%;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}
/* Accessibility */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(20,184,166,0.34);
outline-offset: 3px;
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 18px;
text-align: center;
}
.hero-text {
max-width: 760px;
margin-inline: auto;
}
.hero-title,
.subheading {
margin-inline: auto;
}
.hero-ctas,
.service-pills {
justify-content: center;
}
.visual-composition {
min-height: 330px;
}
.hero-img {
max-width: 640px;
max-height: 430px;
}
.ops-managed {
grid-template-columns: 1fr;
}
#workflow .workflow-visual {
max-width: 650px !important;
}
}
@media (max-width: 700px) {
.container {
width: min(calc(100% - 36px), 1240px);
}
.section-pad {
padding: 68px 0;
}
.hero-title {
font-size: clamp(2.25rem, 9.5vw, 3rem) !important;
line-height: 1.05;
}
.section-title {
font-size: clamp(2rem, 8vw, 2.55rem);
}
.visual-composition {
min-height: 285px;
}
.hero-img {
max-height: 340px;
}
.operations-stack {
gap: 16px;
}
.ops-support-grid {
grid-template-columns: 1fr;
}
#workflow .workflow-visual {
width: 100% !important;
max-width: 620px !important;
}
.process-system {
grid-template-columns: 1fr;
text-align: center;
}
.form-grid {
grid-template-columns: 1fr;
}
.full-width {
grid-column: auto;
}
.sf-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container {
width: min(calc(100% - 30px), 1240px);
}
.hero-title {
font-size: clamp(2rem, 10.3vw, 2.55rem) !important;
}
.section-title {
font-size: clamp(1.85rem, 9vw, 2.3rem);
}
#workflow .workflow-visual {
max-width: 100% !important;
}
}
/* =========================================================
FINAL CARD VISUAL POLISH — PBD OPERATIONS STACK
Applied to the current homepage without changing the
central PBD Operations Hub artwork/container.
========================================================= */
/* ---------------------------------------------------------
CORE CAPABILITY CARDS — LEFT / RIGHT
--------------------------------------------------------- */
.operations-stack .ops-core-card {
min-height: 475px;
padding: 32px;
background:
linear-gradient(
145deg,
rgba(255,255,255,0.98) 0%,
rgba(248,251,253,0.98) 100%
);
border: 1px solid #DCE5EB;
border-radius: 20px;
box-shadow:
0 18px 42px -30px rgba(10,25,47,0.28),
0 4px 12px rgba(10,25,47,0.035);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
overflow: hidden;
}
.operations-stack .ops-core-card::before {
height: 3px;
background:
linear-gradient(
90deg,
var(--teal) 0%,
var(--cyan) 48%,
rgba(37,99,235,0.8) 100%
);
}
.operations-stack .ops-core-card--right::before {
background:
linear-gradient(
90deg,
var(--blue) 0%,
var(--teal) 100%
);
}
.operations-stack .ops-core-card::after {
content: '';
position: absolute;
width: 220px;
height: 220px;
top: -105px;
right: -85px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(20,184,166,0.075) 0%,
rgba(20,184,166,0.025) 42%,
transparent 72%
);
pointer-events: none;
}
.operations-stack .ops-core-card:hover {
transform: translateY(-5px);
border-color: rgba(20,184,166,0.38);
box-shadow:
0 28px 52px -32px rgba(10,25,47,0.32),
0 10px 26px -18px rgba(20,184,166,0.16);
}
.operations-stack .ops-card-topline,
.operations-stack .ops-core-card > * {
position: relative;
z-index: 2;
}
.operations-stack .ops-number {
width: 31px;
min-width: 31px;
height: 31px;
padding: 0;
border-radius: 9px;
background: linear-gradient(145deg,#F0F7FA,#E6F1F4);
border: 1px solid #D9E5EA;
color: var(--navy);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.08em;
}
.operations-stack .ops-tier {
font-size: 0.63rem;
font-weight: 900;
letter-spacing: 0.13em;
line-height: 1.35;
}
.operations-stack .ops-mini-label {
margin-top: 21px;
margin-bottom: 0;
color: #526477;
font-size: 0.60rem;
font-weight: 900;
letter-spacing: 0.13em;
line-height: 1.35;
}
.operations-stack .ops-core-card h3 {
margin-top: 15px;
color: var(--navy);
font-size: clamp(1.85rem, 2.25vw, 2.25rem);
line-height: 1.04;
letter-spacing: -0.045em;
font-weight: 800;
}
.operations-stack .ops-core-card p {
margin-top: 11px;
color: #526275;
font-size: 0.94rem;
line-height: 1.62;
font-weight: 500;
}
.operations-stack .capability-flow {
margin-top: 21px;
padding: 14px 15px;
gap: 5px;
background: linear-gradient(135deg,#F3FBFA,#EFF8FA);
border: 1px solid rgba(20,184,166,0.15);
border-radius: 12px;
color: #16263D;
font-size: 0.64rem;
font-weight: 800;
line-height: 1.5;
}
.operations-stack .capability-flow i {
color: var(--teal);
font-weight: 900;
}
.operations-stack .ops-tags {
margin-top: 14px;
gap: 7px;
}
.operations-stack .ops-tags span {
min-height: 30px;
padding: 5px 10px;
border-radius: 7px;
background: #F3F6F8;
border: 1px solid #E3EAF0;
color: var(--navy);
font-size: 0.70rem;
font-weight: 650;
line-height: 1.2;
}
.operations-stack .ops-tags span:hover {
border-color: rgba(20,184,166,0.35);
background: #FFFFFF;
}
.operations-stack .ops-link {
margin-top: auto;
padding-top: 23px;
color: var(--navy);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.06em;
}
.operations-stack .ops-link:hover {
color: var(--teal);
}
/* ---------------------------------------------------------
CORE CARD MINI VISUAL PANELS
--------------------------------------------------------- */
.operations-stack .ops-core-card .service-card-visual,
.operations-stack .ops-core-card .ops-card-visual {
background:
radial-gradient(
circle at 50% 45%,
rgba(20,184,166,0.10),
transparent 58%
),
linear-gradient(145deg,#F7FAFC,#EDF7F7);
border-color: #DCE8EC;
border-radius: 16px;
}
.operations-stack .ops-core-card--right .service-card-visual,
.operations-stack .ops-core-card--right .ops-card-visual {
background:
radial-gradient(
circle at 50% 45%,
rgba(37,99,235,0.09),
transparent 58%
),
linear-gradient(145deg,#F7FAFC,#EEF6FF);
}
.operations-stack .ops-core-card .service-card-visual::after,
.operations-stack .ops-core-card .ops-card-visual::after {
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba(20,184,166,0.08);
border-radius: 12px;
pointer-events: none;
}
/* ---------------------------------------------------------
SUPPORTING CAPABILITY CARDS
--------------------------------------------------------- */
.operations-stack .ops-support-grid {
gap: 17px;
}
.operations-stack .ops-support-card {
min-height: 330px;
padding: 24px 22px 68px;
background:
linear-gradient(
145deg,
rgba(255,255,255,0.95),
rgba(247,250,252,0.97)
);
border: 1px solid #DCE5EB;
border-radius: 16px;
box-shadow:
0 14px 34px -27px rgba(10,25,47,0.28);
transition:
transform 0.28s ease,
border-color 0.28s ease,
box-shadow 0.28s ease;
overflow: hidden;
}
.operations-stack .ops-support-card::before {
width: 3px;
background:
linear-gradient(
to bottom,
var(--teal),
rgba(20,184,166,0.15)
);
}
.operations-stack .ops-support-card::after {
content: '';
position: absolute;
width: 150px;
height: 150px;
top: -75px;
right: -70px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(20,184,166,0.08),
transparent 68%
);
pointer-events: none;
}
.operations-stack .ops-support-card:hover {
transform: translateY(-5px);
border-color: rgba(20,184,166,0.34);
box-shadow:
0 24px 44px -28px rgba(10,25,47,0.36),
0 7px 18px -14px rgba(20,184,166,0.12);
}
.operations-stack .ops-support-card:nth-child(1)::before {
background: linear-gradient(
to bottom,
var(--blue),
rgba(37,99,235,0.12)
);
}
.operations-stack .ops-support-card:nth-child(2)::before {
background: linear-gradient(
to bottom,
var(--teal),
rgba(20,184,166,0.12)
);
}
.operations-stack .ops-support-card:nth-child(3)::before {
background: linear-gradient(
to bottom,
#8B5CF6,
rgba(139,92,246,0.10)
);
}
.operations-stack .ops-support-card:nth-child(4)::before {
background: linear-gradient(
to bottom,
var(--cyan),
rgba(6,182,212,0.10)
);
}
.operations-stack .ops-support-icon {
position: relative;
z-index: 2;
width: 52px;
height: 52px;
margin-bottom: 16px;
border-radius: 14px;
background: linear-gradient(145deg,#FFFFFF,#EAFBF8);
border: 1px solid rgba(20,184,166,0.16);
box-shadow: 0 12px 26px -20px rgba(20,184,166,0.48);
color: var(--teal);
font-size: 1.45rem;
}
.operations-stack .ops-support-icon--art {
color: #7C3AED;
border-color: rgba(124,58,237,0.15);
background: linear-gradient(145deg,#FFFFFF,#F5F1FF);
}
.operations-stack .ops-support-icon--auto {
color: var(--cyan);
border-color: rgba(6,182,212,0.16);
background: linear-gradient(145deg,#FFFFFF,#ECFBFE);
}
.operations-stack .ops-support-icon--back {
color: var(--navy);
border-color: rgba(10,25,47,0.10);
background: linear-gradient(145deg,#FFFFFF,#F1F5F8);
}
.operations-stack .ops-support-card .ops-tier {
position: relative;
z-index: 2;
margin-bottom: 7px;
font-size: 0.58rem;
letter-spacing: 0.11em;
}
.operations-stack .ops-support-card h3 {
position: relative;
z-index: 2;
margin: 0;
color: var(--navy);
font-size: 1.25rem;
line-height: 1.15;
letter-spacing: -0.032em;
font-weight: 800;
}
.operations-stack .ops-support-card p {
position: relative;
z-index: 2;
margin-top: 9px;
color: #56677A;
font-size: 0.80rem;
line-height: 1.57;
font-weight: 500;
}
.operations-stack .ops-support-list {
position: relative;
z-index: 2;
margin-top: auto;
padding-top: 18px;
gap: 7px;
}
.operations-stack .ops-support-list span {
min-height: 28px;
padding: 5px 9px;
border-radius: 7px;
background: #F3F6F8;
border: 1px solid #E3EAF0;
color: #16263D;
font-size: 0.64rem;
font-weight: 700;
line-height: 1.2;
}
.operations-stack .ops-support-list span:first-child {
border-color: rgba(20,184,166,0.17);
background: #F0FAF8;
}
/* ---------------------------------------------------------
CATEGORY / SUPPORTING DIVIDER
--------------------------------------------------------- */
.operations-stack-section .ops-support-intro {
max-width: 800px;
}
.operations-stack-section .ops-support-intro .eyebrow {
color: #0E9F91;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.13em;
}
/* ---------------------------------------------------------
CENTER HUB — LEAVE ARTWORK SCALE / STYLE INTACT,
ONLY REINFORCE ITS VISUAL PRIORITY.
--------------------------------------------------------- */
.operations-stack .operations-hub {
box-shadow:
0 30px 70px -36px rgba(6,182,212,0.46),
0 8px 24px -18px rgba(10,25,47,0.30);
}
.operations-stack .operations-hub .hub-object {
filter: drop-shadow(0 25px 30px rgba(0,0,0,0.34));
}
/* ---------------------------------------------------------
RESPONSIVE REFINEMENT
--------------------------------------------------------- */
@media (max-width: 1080px) {
.operations-stack .ops-core-card {
min-height: 400px;
}
.operations-stack .ops-support-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.operations-stack .ops-core-card {
min-height: 390px;
}
}
@media (max-width: 760px) {
.operations-stack .ops-core-card {
min-height: 0;
padding: 25px 21px;
}
.operations-stack .ops-core-card h3 {
font-size: 1.8rem;
}
.operations-stack .ops-support-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.operations-stack .ops-support-card {
min-height: 0;
padding: 22px 20px 66px;
}
.operations-stack .ops-support-card h3 {
font-size: 1.23rem;
}
}
@media (max-width: 480px) {
.operations-stack .ops-core-card h3 {
font-size: 1.66rem;
}
.operations-stack .capability-flow {
font-size: 0.60rem;
}
.operations-stack .ops-tags span,
.operations-stack .ops-support-list span {
font-size: 0.62rem;
}
}
/* =========================================================================
PBD OPERATIONS STACK — PREMIUM CARD REFINEMENT (DEFINITIVE OVERRIDE)
-------------------------------------------------------------------------
Confirmed against the actual index.html markup. The visible cards in
the Operations Stack section use these exact classes:
.operations-stack > .ops-core-card (.ops-core-card--left / --right)
.operations-stack > .ops-support-grid > .ops-support-card
(.ops-support-card--artwork), .ops-support-icon, .ops-support-list,
.ops-card-topline, .ops-number, .ops-tier, .ops-mini-label,
.capability-flow, .ops-tags, .ops-link
.pbd-service-feature / .pbd-support-card do NOT exist in this file and
are not referenced anywhere below.
This block is placed last in the file and pins its critical visual
properties (background, border, radius, shadow, typography, color)
with !important so it wins the cascade unconditionally — regardless
of any earlier rule, specificity collision, or stale duplicate block
elsewhere in the stylesheet. This guarantees the change is visible.
.operations-hub (center artwork) is NOT touched by this block.
========================================================================= */
/* -------------------------------------------------------------------------
1. CORE CAPABILITY CARDS — LEFT ("Data Operations & Cleaning")
and RIGHT ("Excel, MIS & Reporting")
------------------------------------------------------------------------- */
.operations-stack > .ops-core-card {
background:
radial-gradient(circle at 22% 0%, rgba(20,184,166,0.06), transparent 48%),
linear-gradient(180deg, #FFFFFF 0%, #FAFCFD 100%) !important;
border: 1.5px solid #D3DFE8 !important;
border-radius: 20px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 26px 50px -28px rgba(10,25,47,0.34),
0 6px 16px -8px rgba(10,25,47,0.07) !important;
padding: 34px !important;
}
/* thin premium top accent line — tonal L/R difference */
.operations-stack > .ops-core-card::before {
height: 3px !important;
background: linear-gradient(90deg, var(--navy) 0%, var(--teal) 100%) !important;
opacity: 1 !important;
}
.operations-stack > .ops-core-card--right::before {
background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 55%, var(--teal) 100%) !important;
}
/* subtle internal radial glow */
.operations-stack > .ops-core-card::after {
content: '' !important;
position: absolute !important;
width: 260px !important;
height: 260px !important;
top: -130px !important;
right: -100px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(20,184,166,0.06) 0%, transparent 68%) !important;
pointer-events: none !important;
}
.operations-stack > .ops-core-card--right::after {
background: radial-gradient(circle, rgba(37,99,235,0.055) 0%, transparent 68%) !important;
}
.operations-stack > .ops-core-card:hover {
transform: translateY(-5px) !important;
border-color: #C2D5E0 !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 34px 58px -28px rgba(10,25,47,0.36),
0 12px 24px -14px rgba(20,184,166,0.16) !important;
}
/* --- top meta: number badge + tier label --- */
.operations-stack > .ops-core-card .ops-card-topline .ops-number {
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 9px !important;
background: linear-gradient(150deg, #F0F6F9 0%, #E5EDF2 100%) !important;
border: 1px solid #D2E0E8 !important;
color: var(--navy) !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
}
.operations-stack > .ops-core-card .ops-card-topline .ops-tier {
font-size: 0.65rem !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--teal) !important;
}
.operations-stack > .ops-core-card--right .ops-card-topline .ops-tier {
color: var(--blue) !important;
}
/* --- mini label: technical section marker --- */
.operations-stack > .ops-core-card .ops-mini-label {
margin-top: 24px !important;
color: #5B6B7D !important;
font-size: 0.66rem !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
}
/* --- main service title --- */
.operations-stack > .ops-core-card h3 {
margin: 9px 0 0 0 !important;
color: var(--navy) !important;
font-weight: 800 !important;
font-size: clamp(1.75rem, 2.2vw, 2.15rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.04em !important;
}
/* --- description --- */
.operations-stack > .ops-core-card p {
margin: 12px 0 0 0 !important;
color: #526275 !important;
font-weight: 400 !important;
font-size: 0.94rem !important;
line-height: 1.6 !important;
}
/* --- process flow strip --- */
.operations-stack > .ops-core-card .capability-flow {
margin-top: 22px !important;
padding: 16px 14px !important;
gap: 4px !important;
background: linear-gradient(135deg, #F1FBF9 0%, #EEF6FC 100%) !important;
border: 1px solid rgba(20,184,166,0.18) !important;
border-radius: 11px !important;
color: var(--navy) !important;
font-size: 0.66rem !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
}
.operations-stack > .ops-core-card .capability-flow span {
padding: 3px 4px !important;
}
.operations-stack > .ops-core-card .capability-flow i {
color: var(--teal) !important;
font-weight: 800 !important;
opacity: 0.9 !important;
}
/* --- capability tags --- */
.operations-stack > .ops-core-card .ops-tags {
margin-top: 16px !important;
gap: 7px !important;
}
.operations-stack > .ops-core-card .ops-tags span {
background: #F4F6F8 !important;
border: 1px solid #E1E8ED !important;
color: var(--navy) !important;
border-radius: 6px !important;
padding: 5px 10px !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
}
.operations-stack > .ops-core-card .ops-tags span:hover {
border-color: rgba(20,184,166,0.32) !important;
background: #FFFFFF !important;
}
/* --- CTA --- */
.operations-stack > .ops-core-card .ops-link {
padding-top: 22px !important;
color: var(--navy) !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
.operations-stack > .ops-core-card .ops-link span {
display: inline-block !important;
color: var(--teal) !important;
transition: transform 0.25s ease !important;
}
.operations-stack > .ops-core-card .ops-link:hover {
color: var(--teal) !important;
}
.operations-stack > .ops-core-card .ops-link:hover span {
transform: translateX(4px) !important;
color: var(--teal) !important;
}
/* -------------------------------------------------------------------------
2. LOWER SUPPORTING CAPABILITY CARDS
Reconciliation / Artwork & Production / Automation & BI / Back-office
------------------------------------------------------------------------- */
.operations-stack .ops-support-grid > .ops-support-card {
background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFD 100%) !important;
border: 1.5px solid #DBE4EA !important;
border-radius: 16px !important;
padding: 24px 22px 66px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 16px 34px -24px rgba(10,25,47,0.30) !important;
}
.operations-stack .ops-support-grid > .ops-support-card::before {
width: 3px !important;
background: var(--blue) !important;
}
.operations-stack .ops-support-grid > .ops-support-card::after {
content: '' !important;
position: absolute !important;
width: 140px !important;
height: 140px !important;
top: -70px !important;
right: -65px !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(20,184,166,0.07), transparent 70%) !important;
pointer-events: none !important;
}
.operations-stack .ops-support-grid > .ops-support-card:hover {
transform: translateY(-4px) !important;
border-color: #C9D8E1 !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 24px 42px -26px rgba(10,25,47,0.34),
0 9px 20px -14px rgba(20,184,166,0.14) !important;
}
/* card 1 — Reconciliation: blue accent */
.operations-stack .ops-support-grid > .ops-support-card:nth-child(1)::before {
background: var(--blue) !important;
}
/* card 2 — Creative & Artwork Production: blue / restrained violet accent */
.operations-stack .ops-support-grid > .ops-support-card:nth-child(2)::before,
.operations-stack .ops-support-grid > .ops-support-card--artwork::before {
background: linear-gradient(to bottom, var(--blue), #8B7FE8) !important;
}
/* card 3 — Automation & Business Intelligence: cyan / teal accent */
.operations-stack .ops-support-grid > .ops-support-card:nth-child(3)::before {
background: linear-gradient(to bottom, var(--cyan), var(--teal)) !important;
}
/* card 4 — Back-office Support: teal accent */
.operations-stack .ops-support-grid > .ops-support-card:nth-child(4)::before {
background: var(--teal) !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-support-icon {
width: 50px !important;
height: 50px !important;
border-radius: 13px !important;
margin-bottom: 16px !important;
background: linear-gradient(150deg, #FFFFFF 0%, #EEF6F5 100%) !important;
border: 1px solid rgba(20,184,166,0.18) !important;
box-shadow: 0 10px 22px -18px rgba(20,184,166,0.5) !important;
color: var(--teal) !important;
font-size: 1.35rem !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-support-icon--art {
color: var(--blue) !important;
border-color: rgba(37,99,235,0.16) !important;
background: linear-gradient(150deg, #FFFFFF 0%, #EEF2FE 100%) !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-support-icon--auto {
color: var(--cyan) !important;
border-color: rgba(6,182,212,0.18) !important;
background: linear-gradient(150deg, #FFFFFF 0%, #EAFBFE 100%) !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-support-icon--back {
color: var(--navy) !important;
border-color: rgba(10,25,47,0.12) !important;
background: linear-gradient(150deg, #FFFFFF 0%, #F1F4F7 100%) !important;
}
/* --- category / title / description hierarchy --- */
.operations-stack .ops-support-grid > .ops-support-card > .ops-tier {
font-size: 0.6rem !important;
font-weight: 800 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
display: inline-block !important;
}
.operations-stack .ops-support-grid > .ops-support-card h3 {
color: var(--navy) !important;
font-weight: 800 !important;
font-size: clamp(1.15rem, 1.4vw, 1.3rem) !important;
line-height: 1.16 !important;
letter-spacing: -0.025em !important;
margin: 0 !important;
}
.operations-stack .ops-support-grid > .ops-support-card p {
margin-top: 9px !important;
color: #5A6B7D !important;
font-size: 0.8rem !important;
line-height: 1.55 !important;
font-weight: 400 !important;
}
/* --- capability tags (list) --- */
.operations-stack .ops-support-grid > .ops-support-card .ops-support-list {
margin-top: auto !important;
padding-top: 16px !important;
gap: 6px !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-support-list span {
background: #F4F6F8 !important;
border: 1px solid #E1E8ED !important;
color: var(--navy) !important;
border-radius: 6px !important;
padding: 5px 9px !important;
font-size: 0.66rem !important;
font-weight: 600 !important;
}
/* --- CTA anchored consistently at card bottom --- */
.operations-stack .ops-support-grid > .ops-support-card .ops-link {
position: absolute !important;
left: 22px !important;
right: 22px !important;
bottom: 22px !important;
padding-top: 0 !important;
margin-top: 0 !important;
color: var(--navy) !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-link:hover {
color: var(--teal) !important;
}
/* -------------------------------------------------------------------------
3. RESPONSIVE — preserves existing 3-col → stacked → 1-col behavior
------------------------------------------------------------------------- */
@media (max-width: 900px) {
.operations-stack > .ops-core-card::after,
.operations-stack .ops-support-grid > .ops-support-card::after {
opacity: 0.7 !important;
}
}
@media (max-width: 760px) {
.operations-stack > .ops-core-card {
padding: 25px 21px !important;
}
.operations-stack > .ops-core-card h3 {
font-size: clamp(1.55rem, 6vw, 1.9rem) !important;
}
.operations-stack .ops-support-grid > .ops-support-card {
padding: 22px 20px 64px !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-link {
left: 20px !important;
right: 20px !important;
bottom: 20px !important;
}
}
@media (max-width: 480px) {
.operations-stack > .ops-core-card h3 {
font-size: clamp(1.4rem, 7vw, 1.7rem) !important;
}
.operations-stack > .ops-core-card .capability-flow {
padding: 13px 11px !important;
font-size: 0.6rem !important;
}
.operations-stack > .ops-core-card .ops-tags span,
.operations-stack .ops-support-grid > .ops-support-card .ops-support-list span {
font-size: 0.62rem !important;
}
.operations-stack .ops-support-grid > .ops-support-card .ops-link {
font-size: 0.64rem !important;
}
}
.ops-support-intro > .eyebrow {
font-size: 1.5rem !important;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0.10em;
}
.ops-support-intro > .eyebrow {
font-size: 1.5rem !important;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0.10em;
}
/* =========================================================
FINAL UI POLISH
1) Reduce the large gap between navbar and hero text.
2) Disable page text selection, but keep form fields selectable/editable.
========================================================= */
.hero.pt-120 {
padding-top: 45px !important;
}
body, body * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
input,
textarea,
select,
option,
[contenteditable="true"] {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}