/* ───────────────────────────────────────────────
VISION SECTION
─────────────────────────────────────────────── */
.vision-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.vision-big-card {
background: var(--white);
border-radius: 16px;
padding: 36px 30px;
border: 1px solid var(--gray-100);
position: relative;
transition: var(--t);
overflow: hidden;
}
.vision-big-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--orange), var(--orange-dark));
transform: scaleX(0); transform-origin: left;
transition: transform 0.4s ease;
}
.vision-big-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,0.10); border-color: var(--orange-mid); }
.vision-big-card:hover::before { transform: scaleX(1); }
.vbc-icon {
width: 56px; height: 56px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.vbc-num {
font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
color: var(--orange); text-transform: uppercase;
margin-bottom: 10px; font-family: var(--font);
}
.vision-big-card h3 {
font-size: 18px; font-weight: 800; color: var(--black);
margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.25;
}
.vision-big-card p {
font-size: 14px; color: var(--gray-500);
line-height: 1.8; margin-bottom: 20px;
}
.vbc-tag {
display: inline-flex; align-items: center;
background: var(--orange-pale); color: var(--orange);
font-size: 11.5px; font-weight: 700;
padding: 5px 14px; border-radius: 50px;
border: 1px solid var(--orange-mid);
letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.vision-cards-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
.vision-big-card { padding: 26px 22px; }
.vision-big-card h3 { font-size: 16px; }
}
/* ───────────────────────────────────────────────
ROOT & RESET
─────────────────────────────────────────────── */
:root {
--orange: #E8481A;
--orange-dark: #C93A10;
--orange-light: #FF6B35;
--orange-pale: #FFF0EB;
--orange-mid: #FDDCCC;
--white: #FFFFFF;
--off-white: #F9F9F7;
--gray-50: #F5F5F5;
--gray-100: #EBEBEB;
--gray-200: #D8D8D8;
--gray-400: #9B9B9B;
--gray-500: #6B6B6B;
--gray-700: #3A3A3A;
--gray-900: #1A1A1A;
--black: #111111;
--font: 'Inter', sans-serif;
--nav-h: 70px;
--max-w: 1240px;
--t: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--black); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* ───────────────────────────────────────────────
NAVBAR — matches prototype exactly
─────────────────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gray-100);
height: var(--nav-h);
}
.nav-inner {
max-width: var(--max-w); margin: 0 auto;
padding: 0 32px;
height: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Logo — actual PNG image */
.logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo-img {
height: 48px;
width: auto;
display: block;
object-fit: contain;
}
.footer-logo-img {
height: 56px;
width: auto;
/* Transparent PNG — white text shows perfectly on dark footer */
display: block;
object-fit: contain;
}
/* ── Active nav state ── */
.nav-links a.nav-active { color: var(--orange); }
.nav-links .has-dropdown.nav-active > a { color: var(--orange); }
.dropdown a.nav-active { background: var(--orange-pale); color: var(--orange); }
.mobile-nav a.nav-active { background: var(--orange-pale); color: var(--orange); }
/* Nav links — horizontal flex row */
.nav-links {
display: flex; align-items: center; gap: 6px; list-style: none;
}
.nav-links a {
padding: 8px 14px;
font-size: 14.5px; font-weight: 500; color: var(--gray-700);
border-radius: 6px; transition: var(--t);
display: flex; align-items: center; gap: 4px;
}
.nav-links a:hover { color: var(--orange); }
.nav-links .has-dropdown { position: relative; }
.dropdown-arrow {
width: 14px; height: 14px; stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
transition: transform 0.2s;
}
.nav-links .has-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
/* Dropdown */
.dropdown {
position: absolute; top: calc(100% + 8px); left: 0;
background: var(--white); border: 1px solid var(--gray-100);
border-radius: 10px; padding: 8px; min-width: 220px;
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: var(--t);
z-index: 100;
}
.nav-links .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
display: block; padding: 9px 14px; font-size: 13.5px; color: var(--gray-700);
border-radius: 6px; transition: var(--t);
}
.dropdown a:hover { background: var(--orange-pale); color: var(--orange); }
.nav-cta {
flex-shrink: 0;
background: var(--orange); color: var(--white);
padding: 11px 22px; border-radius: 6px;
font-size: 14.5px; font-weight: 600;
transition: var(--t); cursor: pointer; border: none;
white-space: nowrap;
}
.nav-cta:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,72,26,0.35); }
/* Hamburger */
.hamburger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--gray-700); border-radius: 2px; }
/* Mobile menu */
.mobile-nav {
display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
background: var(--white); border-bottom: 1px solid var(--gray-100);
padding: 16px 24px 24px; z-index: 999;
flex-direction: column; gap: 4px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
padding: 11px 14px; font-size: 15px; font-weight: 500; color: var(--gray-700);
border-radius: 6px; transition: var(--t);
}
.mobile-nav a:hover { background: var(--orange-pale); color: var(--orange); }
.mobile-nav .nav-cta { margin-top: 10px; text-align: center; display: block; }
/* ───────────────────────────────────────────────
HERO — matches prototype layout
─────────────────────────────────────────────── */
/* ─── HERO — Full-screen landscape carousel ─── */
.hero {
position: relative; padding-top: var(--nav-h);
height: 100vh; min-height: 560px; overflow: hidden;
}
.hero-carousel { position: absolute; inset: 0; overflow: hidden; }
.hc-slides { display: flex; height: 100%; transition: transform 0.85s cubic-bezier(0.77,0,0.175,1); will-change: transform; }
.hc-slide { min-width: 100%; height: 100%; position: relative; overflow: hidden; flex-shrink: 0; }
.hc-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 8s ease; transform: scale(1.05); }
.hc-slide.active .hc-img { transform: scale(1.0); }
.hc-overlay { position: absolute; inset: 0; background: linear-gradient(105deg,rgba(10,10,20,0.72) 0%,rgba(10,10,20,0.42) 55%,rgba(10,10,20,0.12) 100%); pointer-events: none; }
.hc-overlay--dark { background: linear-gradient(to right,rgba(5,5,15,0.85) 0%,rgba(5,5,15,0.48) 55%,rgba(5,5,15,0.1) 100%); }
.hc-overlay--gradient { background: linear-gradient(160deg,rgba(10,10,30,0.80) 0%,rgba(10,10,30,0.48) 45%,rgba(10,10,30,0.18) 100%); }
.hc-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 7vw; max-width: 700px; z-index: 2; }
.hc-content--right { left: auto; right: 0; align-items: flex-start; padding: 0 7vw; }
.hc-content--left { left: 0; align-items: flex-start; }
.hc-content--center { left: 0; right: 0; max-width: 840px; align-items: flex-start; }
.hc-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(232,72,26,0.18); border: 1px solid rgba(232,72,26,0.55); color: #FFBBA0; backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 16px; border-radius: 50px; margin-bottom: 22px; }
.hc-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: blink 2s ease-in-out infinite; }
.hc-title { font-family: var(--font); font-size: clamp(32px,4.8vw,62px); font-weight: 900; color: #fff; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.hc-title--large { font-size: clamp(36px,5.5vw,72px); line-height: 1.04; }
.hc-accent { color: var(--orange); }
.hc-sub { font-size: clamp(14px,1.5vw,17px); color: rgba(255,255,255,0.82); line-height: 1.7; max-width: 500px; margin-bottom: 32px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
/* Animated words */
.hc-word { display: inline-block; opacity: 0; transform: translateY(40px); }
.hc-slide.active .hc-word-1 { animation: wordIn 0.7s 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.hc-slide.active .hc-word-2 { animation: wordIn 0.7s 0.55s cubic-bezier(0.4,0,0.2,1) forwards; }
.hc-slide.active .hc-word-3 { animation: wordIn 0.7s 0.8s cubic-bezier(0.4,0,0.2,1) forwards; } /* s3 now 2 words */
@keyframes wordIn { to { opacity:1; transform:translateY(0); } }
/* Pill tags */
.hc-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.hc-pill { padding: 6px 16px; border-radius: 50px; font-size: 12.5px; font-weight: 700; opacity: 0; transform: translateY(18px); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(8px); }
.hc-slide.active .hc-pill-1 { animation: wordIn 0.6s 0.9s ease forwards; }
.hc-slide.active .hc-pill-2 { animation: wordIn 0.6s 1.1s ease forwards; }
.hc-slide.active .hc-pill-3 { animation: wordIn 0.6s 1.3s ease forwards; }
/* Buttons */
.hc-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hc-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; padding: 13px 26px; border-radius: 7px; font-size: 14.5px; font-weight: 700; font-family: var(--font); text-decoration: none; transition: var(--t); border: none; }
.hc-btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,72,26,0.4); }
.hc-btn-outline { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); color: #fff; padding: 13px 26px; border-radius: 7px; font-size: 14.5px; font-weight: 600; font-family: var(--font); text-decoration: none; transition: var(--t); border: 1.5px solid rgba(255,255,255,0.5); backdrop-filter: blur(8px); }
.hc-btn-outline:hover { background: rgba(255,255,255,0.22); border-color: #fff; transform: translateY(-2px); }
/* Content entry animations */
.animate-fadein { opacity:0; }
.animate-slideup { opacity:0; transform:translateY(36px); }
.animate-fadeup { opacity:0; transform:translateY(24px); }
.animate-fadeup-delay { opacity:0; transform:translateY(20px); }
.hc-slide.active .animate-fadein { animation: fadeIn 0.7s 0.2s ease forwards; }
.hc-slide.active .animate-slideup { animation: slideUp 0.8s 0.35s cubic-bezier(0.4,0,0.2,1) forwards; }
.hc-slide.active .animate-fadeup { animation: slideUp 0.8s 0.55s ease forwards; }
.hc-slide.active .animate-fadeup-delay { animation: slideUp 0.7s 0.75s ease forwards; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
/* Arrows */
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; z-index: 10; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(255,255,255,0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t); }
.hc-arrow:hover { background: var(--orange); border-color: var(--orange); }
.hc-arrow svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hc-prev { left: 24px; }
.hc-next { right: 24px; }
/* Dots */
.hc-dots { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.hc-dot { width: 8px; height: 8px; border-radius: 4px; border: none; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s; padding: 0; }
.hc-dot.active { background: #fff; width: 28px; }
/* Counter */
.hc-counter { position: absolute; bottom: 44px; right: 28px; z-index: 10; font-family: var(--font); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7); }
#hcCurrent { color: #fff; font-size: 22px; font-weight: 900; }
.hc-sep { margin: 0 4px; }
/* Progress bar */
.hc-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.15); z-index: 10; }
.hc-progress-bar { height: 100%; background: var(--orange); width: 0%; border-radius: 0 2px 2px 0; }
/* Mobile */
@media (max-width: 768px) {
.hero { height: 90vh; min-height: 500px; }
.hc-content,.hc-content--right,.hc-content--left,.hc-content--center { left:0;right:0;padding:0 20px 80px;max-width:100%;justify-content:flex-end; }
.hc-title { font-size: clamp(22px,6.5vw,36px); }
.hc-sub { display:none; }
.hc-title { font-size: clamp(26px,7vw,36px); }
.hc-sub { font-size:13.5px;max-width:100%; }
.hc-btn-primary,.hc-btn-outline { padding:11px 20px;font-size:13.5px; }
.hc-arrow { width:38px;height:38px; }
.hc-prev { left:12px; } .hc-next { right:12px; }
}
/* ───────────────────────────────────────────────
IMPACT QUOTE SECTION
─────────────────────────────────────────────── */
/* ───────────────────────────────────────────────
IMPACT QUOTE — full-bleed dark centred
─────────────────────────────────────────────── */
.impact-quote {
background: #0F0F0F;
padding: 80px 32px;
position: relative;
overflow: hidden;
}
.impact-quote::before {
content: '';
position: absolute; top: -120px; left: -60px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(232,72,26,0.10) 0%, transparent 65%);
pointer-events: none;
}
.impact-quote::after {
content: '';
position: absolute; bottom: -100px; right: -60px;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle, rgba(232,72,26,0.07) 0%, transparent 65%);
pointer-events: none;
}
.impact-quote-inner {
max-width: 820px; margin: 0 auto;
text-align: center;
position: relative; z-index: 1;
display: flex; flex-direction: column;
align-items: center; gap: 24px;
}
/* Eyebrow row with lines */
.iq-eyebrow-row { display: flex; align-items: center; gap: 14px; }
.iq-line { width: 40px; height: 1.5px; background: var(--orange); border-radius: 1px; flex-shrink: 0; opacity: 0.7; }
.iq-eyebrow-text { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
/* Quote text */
.impact-quote-text {
font-size: clamp(21px, 2.8vw, 34px);
font-weight: 800; color: #FFFFFF;
line-height: 1.38; letter-spacing: -0.025em; margin: 0;
}
.impact-quote-text .iq-accent { color: var(--orange); }
.impact-quote-text .iq-underline { position: relative; display: inline-block; }
.impact-quote-text .iq-underline::after {
content: ''; position: absolute; bottom: -5px; left: 0; right: 0;
height: 3px; background: var(--orange); border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform 0.9s ease 0.4s;
}
.impact-quote-inner.visible .iq-underline::after { transform: scaleX(1); }
/* Thin horizontal rule */
.impact-divider { width: 48px; height: 1px; background: rgba(255,255,255,0.15); border-radius: 1px; margin: 0; }
/* Sub text */
.impact-quote-sub {
font-size: 15.5px; color: rgba(255,255,255,0.5);
line-height: 1.85; font-weight: 400; margin: 0; max-width: 600px;
}
/* Attribution pill */
.impact-attribute {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(232,72,26,0.12);
border: 1px solid rgba(232,72,26,0.3);
border-radius: 50px; padding: 10px 22px;
}
.impact-attribute .attr-icon {
width: 28px; height: 28px; border-radius: 50%;
background: var(--orange);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.impact-attribute .attr-icon svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.impact-attribute .attr-text { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 0.02em; }
/* Unused 2-col leftovers */
.impact-quote-left, .impact-quote-right,
.impact-quote-mark, .impact-quote-eyebrow,
.impact-quote-label { display: none; }
@media (max-width: 600px) {
.impact-quote { padding: 56px 20px; }
.impact-quote-text { font-size: 20px; }
.impact-quote-sub { font-size: 14px; }
}
/* ───────────────────────────────────────────────
SECTION SHARED
─────────────────────────────────────────────── */
.section { padding: 88px 32px; }
.section-alt { background: var(--off-white); }
.container { max-width: var(--max-w); margin: 0 auto; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--orange);
margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--orange); border-radius: 2px; }
.sec-title {
font-size: clamp(28px, 3vw, 38px);
font-weight: 800; color: var(--black); line-height: 1.18;
letter-spacing: -0.025em; margin-bottom: 16px;
}
.sec-sub {
font-size: 16px; line-height: 1.75; color: var(--gray-500); max-width: 560px;
}
.tc { text-align: center; }
.tc .eyebrow { justify-content: center; }
.tc .eyebrow::before { display: none; }
.tc .sec-sub { margin: 0 auto; }
/* ───────────────────────────────────────────────
SERVICES SECTION
─────────────────────────────────────────────── */
.services-header { margin-bottom: 52px; }
/* ── 3-column × 2-row grid ── */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* ── Base card ── */
.svc-card {
border-radius: 16px;
padding: 30px 26px 28px;
border: 1.5px solid transparent;
transition: var(--t); cursor: default;
position: relative; overflow: hidden;
display: flex; flex-direction: column;
}
.svc-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}
.svc-num { display: none; }
/* ── Per-card tinted backgrounds + matching border on hover ── */
.svc-card.svc-blue { background: #EFF6FF; border-color: #DBEAFE; }
.svc-card.svc-blue:hover { border-color: #93C5FD; box-shadow: 0 14px 40px rgba(59,130,246,0.12); }
.svc-card.svc-amber { background: #FFFBEB; border-color: #FDE68A; }
.svc-card.svc-amber:hover { border-color: #FCD34D; box-shadow: 0 14px 40px rgba(217,119,6,0.12); }
.svc-card.svc-teal { background: #ECFDF5; border-color: #A7F3D0; }
.svc-card.svc-teal:hover { border-color: #6EE7B7; box-shadow: 0 14px 40px rgba(16,185,129,0.12); }
.svc-card.svc-orange { background: #FFF7F4; border-color: #FDDCCC; }
.svc-card.svc-orange:hover { border-color: #FCA780; box-shadow: 0 14px 40px rgba(232,72,26,0.12); }
.svc-card.svc-purple { background: #F5F3FF; border-color: #DDD6FE; }
.svc-card.svc-purple:hover { border-color: #C4B5FD; box-shadow: 0 14px 40px rgba(124,58,237,0.12); }
.svc-card.svc-indigo { background: #EEF2FF; border-color: #C7D2FE; }
.svc-card.svc-indigo:hover { border-color: #A5B4FC; box-shadow: 0 14px 40px rgba(79,70,229,0.12); }
/* ── Icon wrapper — small, 40px, pill-shaped, white bg ── */
.svc-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(255,255,255,0.85);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; flex-shrink: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.svc-icon svg {
width: 18px; height: 18px;
fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Per-card icon stroke colours */
.svc-card.svc-blue .svc-icon svg { stroke: #2563EB; }
.svc-card.svc-amber .svc-icon svg { stroke: #B45309; }
.svc-card.svc-teal .svc-icon svg { stroke: #059669; }
.svc-card.svc-orange .svc-icon svg { stroke: var(--orange); }
.svc-card.svc-purple .svc-icon svg { stroke: #6D28D9; }
.svc-card.svc-indigo .svc-icon svg { stroke: #4338CA; }
.svc-card h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 10px; line-height: 1.3; }
.svc-card p { font-size: 13.5px; color: var(--gray-500); line-height: 1.75; margin-bottom: 18px; flex: 1; }
/* ── Tag pills ── */
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.svc-tag {
padding: 3px 10px; border-radius: 50px;
font-size: 11.5px; font-weight: 500; color: var(--gray-700);
background: rgba(255,255,255,0.75);
border: 1px solid rgba(0,0,0,0.08);
white-space: nowrap;
}
/* ── Learn more link ── */
.svc-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; font-weight: 600; color: var(--orange);
transition: gap 0.2s; text-decoration: none; margin-top: auto;
}
.svc-link:hover { gap: 10px; }
.svc-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* ───────────────────────────────────────────────
ABOUT
─────────────────────────────────────────────── */
.about-grid { display: flex; flex-direction: column; gap: 0; }
/* Intro strip: eyebrow + heading left, two paragraphs right */
.about-intro {
display: grid;
grid-template-columns: 0.65fr 1.35fr; /* narrower heading col, wider content col */
gap: 56px;
align-items: start; /* both cols top-aligned — no space below heading */
margin-bottom: 40px;
}
/* Image fills natural aspect ratio — no cropping */
.about-visual-wrap {
border-radius: 14px; overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,0.14);
background: #080808;
margin-bottom: 28px;
}
.about-visual-wrap::after { display: none; }
.about-pyramid-img {
width: 100%; height: auto; display: block;
border-radius: 14px; transition: transform 0.6s ease;
}
.about-visual-wrap:hover .about-pyramid-img { transform: scale(1.015); }
.about-svg-wrap { display: none; }
/* 4 value cards in one row */
.about-values {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 28px;
}
.about-val-card {
background: var(--white);
border-radius: 12px; padding: 20px 18px;
border-left: 3px solid var(--orange);
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
transition: var(--t);
}
.about-val-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(232,72,26,0.10); }
.about-val-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.about-val-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; }
/* Value tags row */
.about-tags {
display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px;
}
/* Consistency full block */
.about-consistency-block {
margin-top: 0;
}
.about-consistency-intro {
text-align: center;
padding: 40px 0 32px;
}
.about-consistency-intro h3 {
font-size: clamp(20px, 2.5vw, 30px);
font-weight: 800; color: var(--black);
letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.2;
}
.about-consistency-intro h3 span { color: var(--orange); }
.about-consistency-intro p {
font-size: 15px; color: var(--gray-500);
max-width: 640px; margin: 0 auto; line-height: 1.75;
}
/* Image with rounded corners and depth */
.about-consistent-wrap {
border-radius: 16px; overflow: hidden;
box-shadow: 0 12px 48px rgba(0,0,0,0.18);
position: relative;
}
.about-consistent-img {
width: 100%; height: auto; display: block;
border-radius: 16px; transition: transform 0.6s ease;
}
.about-consistent-wrap:hover .about-consistent-img { transform: scale(1.01); }
/* 3 quote cards below image */
.about-quote-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
}
.about-quote-card {
background: var(--white);
border-radius: 12px;
padding: 24px 22px;
border: 1px solid var(--gray-100);
position: relative;
transition: var(--t);
}
.about-quote-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(232,72,26,0.09);
border-color: var(--orange-mid);
}
.about-quote-card::before {
content: '"';
font-family: Georgia, serif;
font-size: 56px; line-height: 0.8;
color: var(--orange); opacity: 0.25;
position: absolute; top: 14px; left: 16px;
pointer-events: none;
}
.about-quote-card blockquote {
font-size: 14px; font-weight: 600;
color: var(--black); line-height: 1.65;
margin-bottom: 14px; padding-top: 22px;
font-style: italic;
}
.about-quote-card .aqc-author {
display: flex; align-items: center; gap: 10px;
}
.about-quote-card .aqc-dot {
width: 28px; height: 28px; border-radius: 50%;
background: var(--orange); display: flex;
align-items: center; justify-content: center; flex-shrink: 0;
}
.about-quote-card .aqc-dot svg {
width: 13px; height: 13px;
stroke: #fff; fill: none; stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round;
}
.about-quote-card .aqc-label {
font-size: 11.5px; font-weight: 700;
color: var(--orange); letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 700px) {
.about-quote-row { grid-template-columns: 1fr; }
.about-consistency-intro { padding: 28px 0 20px; }
}
/* Vision list kept for compatibility */
.vision-list { display: none; }
.vision-item { display: none; }
.vision-dot { display: none; }
.about-visual-wrap {
border-radius: 16px; overflow: hidden; position: relative;
box-shadow: 0 12px 48px rgba(0,0,0,0.10);
background: #0a0a0a;
flex-shrink: 0;
}
.about-visual-wrap::after { display: none; }
.about-pyramid-img {
width: 100%; height: auto; display: block;
border-radius: 16px;
transition: transform 0.6s ease;
}
.about-consistent-wrap {
margin-top: 40px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 48px rgba(0,0,0,0.18);
}
.about-consistent-img {
width: 100%; height: auto;
display: block;
border-radius: 16px;
transition: transform 0.6s ease;
}
.about-consistent-wrap:hover .about-consistent-img { transform: scale(1.01); }
.about-top { display: contents; }
.about-bottom { display: contents; }
.vision-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.vision-item {
display: flex; align-items: flex-start; gap: 12px;
background: var(--white); border-radius: 10px; padding: 14px 16px;
border-left: 3px solid var(--orange); box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.vision-dot { width: 8px; height: 8px; min-width: 8px; background: var(--orange); border-radius: 50%; margin-top: 6px; }
.vision-item h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.vision-item p { font-size: 13.5px; color: var(--gray-500); line-height: 1.6; }
/* ───────────────────────────────────────────────
WHY US — Pillars
─────────────────────────────────────────────── */
.pillars-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
margin-top: 52px;
}
.pillar {
background: var(--white); border-radius: 14px;
padding: 28px 20px; border: 1px solid var(--gray-100);
text-align: center; transition: var(--t);
}
.pillar:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(232,72,26,0.1); border-color: var(--orange-mid); }
.pillar-icon {
width: 52px; height: 52px; background: var(--orange-pale);
border-radius: 12px; display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.pillar-icon svg { width: 24px; height: 24px; stroke: var(--orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 8px; line-height: 1.3; }
.pillar p { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; }
/* ───────────────────────────────────────────────
INDUSTRIES
─────────────────────────────────────────────── */
.industries-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
margin-top: 52px;
}
.ind-card {
border-radius: 14px; padding: 28px 22px;
border: 1px solid var(--gray-100); background: var(--white);
transition: var(--t); cursor: default;
}
.ind-card:hover {
background: #F0F9FF;
border-color: #BAE6FD;
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(14,165,233,0.12);
}
.ind-card:hover h3 { color: #0369A1; }
.ind-card:hover p { color: #0284C7; opacity: 0.85; }
.ind-card:hover .ind-icon { background: #E0F2FE; }
.ind-card:hover .ind-icon svg { stroke: #0284C7; }
.ind-icon {
width: 48px; height: 48px; background: var(--orange-pale);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
margin-bottom: 16px; transition: var(--t);
}
.ind-icon svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: var(--t); }
.ind-card h3 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; transition: var(--t); }
.ind-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; transition: var(--t); }
/* ───────────────────────────────────────────────
PROCESS — 5-step visual timeline
─────────────────────────────────────────────── */
.process-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
margin-top: 64px;
position: relative;
}
/* Horizontal connector line running through icon centres */
.process-row::before {
content: '';
position: absolute;
top: 52px; /* vertically centred on 88px icon */
left: calc(10% + 44px);
right: calc(10% + 44px);
height: 2px;
background: var(--gray-100);
z-index: 0;
}
/* Each step */
.proc-step {
flex: 1;
text-align: center;
padding: 0 10px;
position: relative;
z-index: 1;
cursor: default;
}
/* Number badge — top-right of tile */
.proc-badge {
position: absolute;
top: -8px; right: calc(50% - 52px);
width: 24px; height: 24px;
background: var(--white);
border: 1.5px solid var(--gray-100);
border-radius: 50%;
font-size: 11px; font-weight: 700; color: var(--gray-500);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
z-index: 3;
}
/* Big gradient icon tile */
.proc-tile {
width: 88px; height: 88px;
border-radius: 22px;
margin: 0 auto 20px;
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 2;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 4px 18px rgba(0,0,0,0.14);
}
.proc-step:hover .proc-tile {
transform: translateY(-6px) scale(1.05);
box-shadow: 0 12px 32px rgba(0,0,0,0.20);
}
.proc-tile svg {
width: 34px; height: 34px;
stroke: #fff; fill: none;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* Per-step gradient colours matching prototype */
.proc-step-1 .proc-tile { background: linear-gradient(135deg, #5B9CF6 0%, #3B7DE8 100%); }
.proc-step-2 .proc-tile { background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%); }
.proc-step-3 .proc-tile { background: linear-gradient(135deg, #FB923C 0%, #E8481A 100%); }
.proc-step-4 .proc-tile { background: linear-gradient(135deg, #34D399 0%, #059669 100%); }
.proc-step-5 .proc-tile { background: linear-gradient(135deg, #F472B6 0%, #DB2777 100%); }
/* Step title */
.proc-step h3 {
font-size: 16px; font-weight: 700;
color: var(--black); margin-bottom: 6px; line-height: 1.2;
}
/* Sub-label — coloured per step */
.proc-sublabel {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 0;
}
.proc-step-1 .proc-sublabel { color: #3B7DE8; }
.proc-step-2 .proc-sublabel { color: #7C3AED; }
.proc-step-3 .proc-sublabel { color: #E8481A; }
.proc-step-4 .proc-sublabel { color: #059669; }
.proc-step-5 .proc-sublabel { color: #DB2777; }
/* Hover tooltip card */
.proc-tooltip {
position: absolute;
bottom: calc(100% + 14px);
left: 50%; transform: translateX(-50%);
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 12px;
padding: 16px 18px;
width: 210px;
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
opacity: 0; visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease;
transform: translateX(-50%) translateY(6px);
z-index: 100; text-align: left;
pointer-events: none;
}
.proc-tooltip::after {
content: '';
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: var(--white);
}
.proc-step:hover .proc-tooltip {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
}
.proc-tooltip h4 { font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.proc-tooltip p { font-size: 12px; color: var(--gray-500); line-height: 1.6; margin: 0; }
/* Hint text below steps */
.process-hint {
text-align: center; margin-top: 48px;
font-size: 13px; color: var(--gray-400); font-style: italic;
}
/* Responsive */
@media (max-width: 900px) {
.process-row { flex-wrap: wrap; gap: 32px; }
.process-row::before { display: none; }
.proc-step { flex: 0 0 calc(33.33% - 22px); }
}
@media (max-width: 600px) {
.proc-step { flex: 0 0 calc(50% - 16px); }
.proc-tooltip { display: none; }
}
/* ───────────────────────────────────────────────
CTA BANNER
─────────────────────────────────────────────── */
.cta-section {
background: var(--orange);
padding: 72px 32px; position: relative; overflow: hidden;
}
.cta-section::before {
content: ''; position: absolute; top: -60%; right: -8%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
pointer-events: none;
}
.cta-inner {
max-width: var(--max-w); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
position: relative; z-index: 1;
}
.cta-text h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #fff; margin-bottom: 10px; }
.cta-text p { font-size: 16px; color: rgba(255,255,255,0.82); }
.cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-cta-white {
background: #fff; color: var(--orange);
padding: 12px 24px; border-radius: 6px;
font-size: 15px; font-weight: 600; transition: var(--t);
border: 2px solid #fff; cursor: pointer;
}
.btn-cta-white:hover { background: transparent; color: #fff; }
.btn-cta-outline {
background: transparent; color: #fff;
padding: 12px 24px; border-radius: 6px;
font-size: 15px; font-weight: 600; border: 2px solid rgba(255,255,255,0.5);
transition: var(--t); cursor: pointer;
}
.btn-cta-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
/* ───────────────────────────────────────────────
CONTACT — matches new prototype exactly
─────────────────────────────────────────────── */
/* Header */
.contact-header { text-align: center; margin-bottom: 52px; }
.contact-header .eyebrow { justify-content: center; }
.contact-header .eyebrow::before { display: none; }
.contact-header h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: var(--black); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 0; }
.contact-header h2 .orange { color: var(--orange); display: block; }
.contact-header p { font-size: 15px; color: var(--gray-500); line-height: 1.7; max-width: 500px; margin: 14px auto 0; }
/* 4-card info strip */
.contact-cards-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 16px; margin-bottom: 52px;
}
.contact-info-card {
border: 1px solid var(--gray-100); border-radius: 12px;
padding: 22px 20px; background: var(--white);
transition: var(--t);
}
.contact-info-card:hover { border-color: var(--orange-mid); box-shadow: 0 4px 20px rgba(232,72,26,0.07); transform: translateY(-2px); }
.cic-icon {
width: 40px; height: 40px; background: var(--orange-pale);
border-radius: 9px; display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.cic-icon svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-info-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 5px; }
.contact-info-card .cic-main { font-size: 13.5px; font-weight: 600; color: var(--gray-700); line-height: 1.4; }
.contact-info-card .cic-sub { font-size: 12px; color: var(--gray-400); margin-top: 3px; line-height: 1.4; }
/* Two-column: form left, sidebar right */
.contact-body {
display: grid; grid-template-columns: 1fr 360px;
gap: 32px; align-items: start;
}
/* Left: form panel */
.contact-form-panel { }
.contact-form-panel h3 { font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.contact-form-panel > p { font-size: 13.5px; color: var(--gray-500); margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.fg input, .fg select, .fg textarea {
width: 100%; padding: 10px 13px;
font-family: var(--font); font-size: 13.5px; color: var(--black);
background: var(--white); border: 1.5px solid var(--gray-200);
border-radius: 7px; outline: none; transition: var(--t); resize: vertical;
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--gray-400); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
border-color: var(--orange); background: var(--white);
box-shadow: 0 0 0 3px rgba(232,72,26,0.08);
}
.fg textarea { min-height: 110px; }
.fg select { cursor: pointer; color: var(--gray-400); }
.fg select:focus { color: var(--black); }
.btn-submit {
display: inline-flex; align-items: center; gap: 9px;
background: var(--orange); color: #fff;
padding: 12px 24px; border-radius: 7px;
font-size: 14.5px; font-weight: 600; font-family: var(--font);
border: none; cursor: pointer; transition: var(--t);
}
.btn-submit:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,72,26,0.3); }
.btn-submit svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Right sidebar: 3 stacked cards */
.contact-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card {
border: 1px solid var(--gray-100); border-radius: 12px;
padding: 24px; background: var(--white);
}
.sidebar-card.tinted { background: var(--orange-pale); border-color: var(--orange-mid); }
/* Why Partner card */
.why-partner h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 16px; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.why-list li {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; color: var(--gray-700); font-weight: 500;
}
.why-dot {
width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
background: var(--orange); display: flex; align-items: center; justify-content: center;
}
.why-dot svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Office Location card */
.office-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 12px; }
.office-card p { font-size: 13px; color: var(--gray-500); line-height: 1.75; margin-bottom: 16px; }
.btn-linkedin {
display: inline-flex; align-items: center; gap: 8px;
background: #0A66C2; color: #fff;
padding: 9px 16px; border-radius: 7px;
font-size: 13px; font-weight: 600; font-family: var(--font);
border: none; cursor: pointer; transition: var(--t);
text-decoration: none;
}
.btn-linkedin:hover { background: #084b91; }
.btn-linkedin svg { width: 14px; height: 14px; fill: #fff; }
/* Careers card */
.careers-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.careers-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin-bottom: 16px; }
.btn-careers {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 10px 16px;
background: var(--white); color: var(--black);
border: 1.5px solid var(--gray-200); border-radius: 7px;
font-size: 13.5px; font-weight: 600; font-family: var(--font);
cursor: pointer; transition: var(--t);
}
.btn-careers:hover { border-color: var(--orange); color: var(--orange); }
.btn-careers svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* ───────────────────────────────────────────────
TEAM SECTION
─────────────────────────────────────────────── */
.team-header { text-align: center; margin-bottom: 56px; }
.team-header .eyebrow { justify-content: center; }
.team-header .eyebrow::before { display: none; }
.team-header h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: var(--black); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 14px; }
.team-header h2 .orange { color: var(--orange); }
.team-header p { font-size: 15px; color: var(--gray-500); line-height: 1.7; max-width: 500px; margin: 0 auto; }
/* Leadership sub-header */
.team-sub-header { text-align: center; margin-bottom: 36px; }
.team-badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--orange-pale); color: var(--orange);
font-size: 12px; font-weight: 600; padding: 5px 14px;
border-radius: 50px; border: 1px solid var(--orange-mid);
margin-bottom: 16px;
}
.team-sub-header h3 { font-size: 26px; font-weight: 800; color: var(--black); margin-bottom: 8px; }
.team-sub-header p { font-size: 14px; color: var(--gray-500); }
/* Founders grid */
.founders-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 24px; max-width: 760px; margin: 0 auto 72px;
}
.founder-card {
border: 1px solid var(--gray-100); border-radius: 16px;
padding: 36px 28px 28px;
background: var(--white); text-align: center;
transition: var(--t);
}
.founder-card:hover { box-shadow: 0 12px 40px rgba(232,72,26,0.09); transform: translateY(-4px); border-color: var(--orange-mid); }
/* Avatar circle */
.founder-avatar {
width: 80px; height: 80px; border-radius: 18px;
background: var(--orange-pale); border: 1px solid var(--orange-mid);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
}
.founder-avatar span {
font-size: 22px; font-weight: 800; color: var(--orange);
font-family: var(--font); letter-spacing: 0.04em;
}
.founder-card h4 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.founder-role {
display: inline-block; font-size: 13px; font-weight: 600; color: var(--orange);
margin-bottom: 14px;
}
.founder-card p { font-size: 13px; color: var(--gray-500); line-height: 1.7; margin-bottom: 20px; }
.founder-li {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 8px;
background: #0A66C2; transition: var(--t);
}
.founder-li:hover { background: #084b91; transform: scale(1.08); }
.founder-li svg { width: 16px; height: 16px; fill: white; }
/* Culture / quote band */
.team-culture {
background: var(--off-white); border-radius: 20px;
padding: 56px 48px; text-align: center;
position: relative; overflow: hidden;
}
.team-culture::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 48px; height: 4px; background: var(--orange); border-radius: 2px;
top: 32px;
}
.team-culture blockquote {
font-size: clamp(18px, 2.5vw, 24px); font-weight: 800;
color: var(--black); line-height: 1.4;
max-width: 640px; margin: 28px auto 20px;
letter-spacing: -0.01em;
}
.team-culture .culture-body {
font-size: 14px; color: var(--gray-500); line-height: 1.75;
max-width: 500px; margin: 0 auto 28px;
}
.culture-tags { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.culture-tag {
padding: 6px 16px; border-radius: 50px; font-size: 12.5px; font-weight: 600;
border: 1.5px solid; cursor: default;
}
.tag-orange { color: var(--orange); border-color: var(--orange-mid); background: var(--orange-pale); }
.tag-teal { color: #0d9488; border-color: #99f6e4; background: #f0fdfa; }
.tag-green { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
.tag-purple { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
/* ───────────────────────────────────────────────
TEAM MEMBERS GRID
─────────────────────────────────────────────── */
.team-members-header {
text-align: center; margin: 72px 0 40px;
}
.team-members-header .team-badge { margin-bottom: 14px; }
.team-members-header h3 {
font-size: 32px; font-weight: 800; color: var(--black);
margin-bottom: 10px; letter-spacing: -0.02em;
}
.team-members-header p { font-size: 14.5px; color: var(--gray-500); }
.team-members-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.member-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 14px;
padding: 32px 20px 24px;
text-align: center;
transition: var(--t);
}
.member-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 32px rgba(232,72,26,0.08);
border-color: var(--orange-mid);
}
/* Avatar */
.member-avatar {
width: 64px; height: 64px;
border-radius: 14px;
background: var(--orange-pale);
border: 1px solid var(--orange-mid);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.member-avatar span {
font-size: 17px; font-weight: 800;
color: var(--orange); font-family: var(--font);
letter-spacing: 0.03em;
}
.member-card h4 {
font-size: 15px; font-weight: 700;
color: var(--black); margin-bottom: 8px;
}
/* Role row with icon */
.member-role {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--gray-500); font-weight: 500;
}
.member-role svg {
width: 13px; height: 13px;
stroke: var(--gray-400); fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* Role icon colour variants */
.role-dev .member-role svg { stroke: #3B82F6; }
.role-design .member-role svg { stroke: #8B5CF6; }
.role-marketing .member-role svg { stroke: #10B981; }
.role-trainee .member-role svg { stroke: var(--orange); }
@media (max-width: 900px) {
.team-members-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.team-members-grid { grid-template-columns: 1fr; }
}
/* ───────────────────────────────────────────────
PRODUCT DEVELOPMENT PAGE SECTION
─────────────────────────────────────────────── */
.pd-back { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--orange);text-decoration:none;margin-bottom:22px;transition:gap 0.2s; }
.pd-back:hover { gap:10px; }
.pd-back svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.pd-hero { margin-bottom:68px; }
.pd-hero h1 { font-size:clamp(38px,6vw,60px);font-weight:900;color:var(--black);letter-spacing:-0.03em;line-height:1.08;margin-bottom:18px; }
.pd-hero h1 span { color:var(--orange); }
.pd-hero p { font-size:16px;color:var(--gray-500);line-height:1.75;max-width:560px;margin-bottom:30px; }
.pd-hero-btns { display:flex;gap:14px;flex-wrap:wrap; }
.btn-pd-primary { display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;padding:13px 26px;border-radius:7px;font-size:14.5px;font-weight:600;font-family:var(--font);border:none;cursor:pointer;transition:var(--t);text-decoration:none; }
.btn-pd-primary:hover { background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,72,26,0.32); }
.btn-pd-primary svg { width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.btn-pd-outline { display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--black);padding:13px 26px;border-radius:7px;font-size:14.5px;font-weight:600;font-family:var(--font);border:1.5px solid var(--gray-200);cursor:pointer;transition:var(--t);text-decoration:none; }
.btn-pd-outline:hover { border-color:var(--orange);color:var(--orange);transform:translateY(-2px); }
.pd-eyebrow { font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:10px; }
.pd-section-title { font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--black);letter-spacing:-0.02em;margin-bottom:32px; }
/* Capability grid */
.pd-caps-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:72px; }
.pd-cap-card { background:var(--white);border:1px solid var(--gray-100);border-radius:12px;padding:24px 20px;transition:var(--t); }
.pd-cap-card:hover { border-color:var(--orange-mid);box-shadow:0 6px 24px rgba(232,72,26,0.07);transform:translateY(-3px); }
.pd-cap-icon { width:40px;height:40px;background:var(--orange-pale);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
.pd-cap-icon svg { width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.pd-cap-card h4 { font-size:14.5px;font-weight:700;color:var(--black);margin-bottom:7px; }
.pd-cap-card p { font-size:13px;color:var(--gray-500);line-height:1.65; }
/* Process */
.pd-process-wrap { margin-bottom:72px; }
.pd-process-header { text-align:center;margin-bottom:40px; }
.pd-process-header h2 { font-size:clamp(24px,3.5vw,36px);font-weight:800;color:var(--black);letter-spacing:-0.02em;margin-bottom:10px; }
.pd-process-header p { font-size:14.5px;color:var(--gray-500);max-width:480px;margin:0 auto; }
.pd-process-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px; }
.pd-step { border-radius:14px;padding:22px 18px 20px;position:relative;transition:var(--t);cursor:default;display:flex;flex-direction:column;align-items:flex-start;border:1.5px solid transparent; }
.pd-step:hover { transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,0.09); }
.pd-step-num { position:absolute;top:-10px;right:14px;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font); }
/* Per-step tints */
.pd-step-1{background:#FFF7ED;border-color:#FED7AA;} .pd-step-1:hover{border-color:#FDBA74;box-shadow:0 8px 28px rgba(249,115,22,0.12);}
.pd-step-1 .pd-step-num{background:#F97316;} .pd-step-1 .pd-step-icon{background:rgba(249,115,22,0.12);} .pd-step-1 .pd-step-icon svg{stroke:#EA6C10;}
.pd-step-2{background:#EFF6FF;border-color:#BFDBFE;} .pd-step-2:hover{border-color:#93C5FD;box-shadow:0 8px 28px rgba(59,130,246,0.12);}
.pd-step-2 .pd-step-num{background:#3B82F6;} .pd-step-2 .pd-step-icon{background:rgba(59,130,246,0.12);} .pd-step-2 .pd-step-icon svg{stroke:#2563EB;}
.pd-step-3{background:#F5F3FF;border-color:#DDD6FE;} .pd-step-3:hover{border-color:#C4B5FD;box-shadow:0 8px 28px rgba(139,92,246,0.12);}
.pd-step-3 .pd-step-num{background:#8B5CF6;} .pd-step-3 .pd-step-icon{background:rgba(139,92,246,0.12);} .pd-step-3 .pd-step-icon svg{stroke:#7C3AED;}
.pd-step-4{background:#FDF2F8;border-color:#FBCFE8;} .pd-step-4:hover{border-color:#F9A8D4;box-shadow:0 8px 28px rgba(236,72,153,0.12);}
.pd-step-4 .pd-step-num{background:#EC4899;} .pd-step-4 .pd-step-icon{background:rgba(236,72,153,0.12);} .pd-step-4 .pd-step-icon svg{stroke:#DB2777;}
.pd-step-5{background:#F0FDF4;border-color:#BBF7D0;} .pd-step-5:hover{border-color:#86EFAC;box-shadow:0 8px 28px rgba(34,197,94,0.12);}
.pd-step-5 .pd-step-num{background:#22C55E;} .pd-step-5 .pd-step-icon{background:rgba(34,197,94,0.12);} .pd-step-5 .pd-step-icon svg{stroke:#16A34A;}
.pd-step-6{background:#ECFDF5;border-color:#A7F3D0;} .pd-step-6:hover{border-color:#6EE7B7;box-shadow:0 8px 28px rgba(16,185,129,0.12);}
.pd-step-6 .pd-step-num{background:#10B981;} .pd-step-6 .pd-step-icon{background:rgba(16,185,129,0.12);} .pd-step-6 .pd-step-icon svg{stroke:#059669;}
.pd-step-7{background:#ECFEFF;border-color:#A5F3FC;} .pd-step-7:hover{border-color:#67E8F9;box-shadow:0 8px 28px rgba(6,182,212,0.12);}
.pd-step-7 .pd-step-num{background:#06B6D4;} .pd-step-7 .pd-step-icon{background:rgba(6,182,212,0.12);} .pd-step-7 .pd-step-icon svg{stroke:#0891B2;}
.pd-step-8{background:#FFFBEB;border-color:#FDE68A;} .pd-step-8:hover{border-color:#FCD34D;box-shadow:0 8px 28px rgba(245,158,11,0.12);}
.pd-step-8 .pd-step-num{background:#F59E0B;} .pd-step-8 .pd-step-icon{background:rgba(245,158,11,0.12);} .pd-step-8 .pd-step-icon svg{stroke:#D97706;}
.pd-step-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0; }
.pd-step-icon svg { width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.pd-step h4 { font-size:13.5px;font-weight:700;color:var(--black);margin-bottom:7px;line-height:1.35; }
.pd-step p { font-size:12.5px;color:var(--gray-500);line-height:1.65; }
/* Timeline */
.pd-timeline { display:flex;align-items:center;justify-content:center;gap:0;margin-top:28px;position:relative;padding:0 24px; }
.pd-timeline::before { content:'';position:absolute;top:50%;left:5%;right:5%;height:2px;background:var(--gray-100);transform:translateY(-50%);z-index:0; }
.pd-tl-dot { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;position:relative;z-index:1;flex-shrink:0;margin:0 auto;font-family:var(--font); }
.pd-tl-seg { flex:1;height:2px;background:var(--gray-100); }
.pd-tl-1{background:#F97316;} .pd-tl-2{background:#3B82F6;} .pd-tl-3{background:#8B5CF6;} .pd-tl-4{background:#EC4899;}
.pd-tl-5{background:#22C55E;} .pd-tl-6{background:#10B981;} .pd-tl-7{background:#06B6D4;} .pd-tl-8{background:#F59E0B;}
/* Working Closely section */
.pd-collab { margin-top:80px; }
.pd-collab-inner { display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center; }
.pd-collab-badge { display:inline-flex;align-items:center;background:var(--orange-pale);color:var(--orange);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:5px 14px;border-radius:50px;border:1px solid var(--orange-mid);margin-bottom:18px; }
.pd-collab-left h2 { font-size:clamp(26px,4vw,38px);font-weight:800;color:var(--black);letter-spacing:-0.025em;line-height:1.15;margin-bottom:20px; }
.pd-collab-left p { font-size:14.5px;color:var(--gray-500);line-height:1.8;margin-bottom:14px; }
.pd-collab-right { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.pd-collab-card { background:var(--white);border:1px solid var(--gray-100);border-radius:12px;padding:20px 18px;transition:var(--t); }
.pd-collab-card:hover { border-color:var(--orange-mid);box-shadow:0 6px 20px rgba(232,72,26,0.07);transform:translateY(-3px); }
.pd-collab-icon { width:36px;height:36px;border-radius:9px;background:var(--orange-pale);display:flex;align-items:center;justify-content:center;margin-bottom:12px; }
.pd-collab-icon svg { width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.pd-collab-card h4 { font-size:13.5px;font-weight:700;color:var(--black);margin-bottom:6px; }
.pd-collab-card p { font-size:12.5px;color:var(--gray-500);line-height:1.65; }
/* Responsive */
@media (max-width: 900px) {
.pd-caps-grid { grid-template-columns: 1fr 1fr; }
.pd-process-grid { grid-template-columns: 1fr 1fr; }
.pd-timeline { display: none; }
.pd-collab-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
.pd-caps-grid { grid-template-columns: 1fr; }
.pd-process-grid { grid-template-columns: 1fr; }
.pd-hero-btns { flex-direction: column; }
.pd-collab-right { grid-template-columns: 1fr; }
}
/* ───────────────────────────────────────────────
ZYNCQ CASE STUDY SECTION
─────────────────────────────────────────────── */
.zyncq-section { margin-top: 88px; }
/* Hero banner */
.zyncq-hero-banner {
background: linear-gradient(135deg, #1E0F5C 0%, #3B1FA8 50%, #5B3FD0 100%);
border-radius: 20px; padding: 52px 48px;
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
position: relative; overflow: hidden; margin-bottom: 56px;
}
.zyncq-hero-banner::before {
content: ''; position: absolute; top: -60px; right: -60px;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,0.04); pointer-events: none;
}
.zyncq-hero-banner::after {
content: ''; position: absolute; bottom: -80px; left: 20%;
width: 250px; height: 250px; border-radius: 50%;
background: rgba(255,255,255,0.03); pointer-events: none;
}
.zyncq-hero-left { position: relative; z-index: 1; }
.zyncq-phase-badge {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.12); color: #C7B8FF;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2);
margin-bottom: 18px;
}
.zyncq-phase-badge .dot { width: 7px; height: 7px; background: #7EE787; border-radius: 50%; animation: blink 2s ease-in-out infinite; }
.zyncq-logo-txt {
font-size: clamp(36px, 5vw, 52px); font-weight: 900;
color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; line-height: 1;
}
.zyncq-logo-txt span { color: #A78BFA; }
.zyncq-tagline {
font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.9);
margin-bottom: 16px; line-height: 1.3;
}
.zyncq-hero-desc {
font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.75; margin-bottom: 28px; max-width: 420px;
}
.zyncq-checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.zyncq-checklist li {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; color: rgba(255,255,255,0.85); font-weight: 500;
}
.zyncq-checklist li svg { width: 16px; height: 16px; stroke: #7EE787; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.zyncq-use-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.zyncq-badge {
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.85); font-size: 11.5px; font-weight: 600;
padding: 5px 12px; border-radius: 50px;
}
.zyncq-hero-right { position: relative; z-index: 1; }
/* QR Scanning Carousel */
.zyncq-carousel-wrap {
border-radius: 18px; overflow: hidden;
position: relative; aspect-ratio: 4/3;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
background: #1a1040;
}
.zyncq-carousel-slides {
display: flex; height: 100%;
transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.zyncq-carousel-slide {
min-width: 100%; height: 100%;
position: relative; overflow: hidden; flex-shrink: 0;
}
.zyncq-carousel-slide img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.6s ease;
}
.zyncq-carousel-slide:hover img { transform: scale(1.03); }
/* Dark gradient overlay so label is always readable */
.zq-slide-overlay {
position: absolute; inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.08) 0%,
rgba(0,0,0,0.15) 50%,
rgba(0,0,0,0.55) 100%
);
pointer-events: none;
}
/* Slide nav buttons */
.zq-car-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.2s; z-index: 10;
}
.zq-car-btn:hover { background: rgba(255,255,255,0.4); }
.zq-car-btn svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.zq-car-prev { left: 14px; }
.zq-car-next { right: 14px; }
.zq-car-dots { position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.zq-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.5); border: none; cursor: pointer; transition: all 0.25s; padding: 0; }
.zq-dot.active { background: #fff; width: 22px; }
/* Slide label */
.zq-slide-label {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
background: rgba(30,15,92,0.75);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
color: #fff; font-size: 13px; font-weight: 600;
padding: 8px 20px; border-radius: 50px; white-space: nowrap; z-index: 10;
border: 1px solid rgba(255,255,255,0.25);
font-family: var(--font);
}
/* Use Cases */
.zyncq-usecases-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 56px;
}
.zyncq-uc-card {
background: var(--white); border: 1px solid var(--gray-100);
border-radius: 12px; padding: 20px 16px; text-align: center; transition: var(--t);
}
.zyncq-uc-card:hover { border-color: #A78BFA; box-shadow: 0 6px 24px rgba(91,63,208,0.1); transform: translateY(-3px); }
.zyncq-uc-icon {
width: 44px; height: 44px; border-radius: 11px;
background: #F5F3FF; display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px;
}
.zyncq-uc-icon svg { width: 20px; height: 20px; stroke: #6D28D9; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zyncq-uc-card h4 { font-size: 12.5px; font-weight: 700; color: var(--black); margin-bottom: 5px; line-height: 1.3; }
.zyncq-uc-card p { font-size: 11.5px; color: var(--gray-500); line-height: 1.55; }
/* Tech stack table */
/* ── ZyncQ shared block styles ── */
.zq-block { }
.zq-block-header { text-align: center; margin-bottom: 44px; }
.zq-eyebrow {
display: inline-block; font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: #7C3AED; background: #F5F3FF; border: 1px solid #DDD6FE;
padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
}
.zq-block-title {
font-size: clamp(24px, 3.5vw, 36px); font-weight: 800;
color: var(--black); letter-spacing: -0.025em; margin-bottom: 12px;
}
.zq-block-sub {
font-size: 15px; color: var(--gray-500); line-height: 1.75;
max-width: 560px; margin: 0 auto;
}
/* Use cases grid */
.zq-usecases-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.zq-uc-card {
background: var(--white); border: 1px solid var(--gray-100);
border-radius: 14px; padding: 24px 18px; text-align: center; transition: var(--t);
}
.zq-uc-card:hover { border-color: #C4B5FD; box-shadow: 0 8px 28px rgba(124,58,237,0.1); transform: translateY(-4px); }
.zq-uc-icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 14px;
}
.zq-uc-icon svg { width: 22px; height: 22px; }
.zq-uc-card h4 { font-size: 13.5px; font-weight: 700; color: var(--black); margin-bottom: 7px; line-height: 1.3; }
.zq-uc-card p { font-size: 12.5px; color: var(--gray-500); line-height: 1.65; }
/* Why grid — 3x2 horizontal cards */
.zq-why-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.zq-why-card {
background: var(--white); border: 1px solid var(--gray-100);
border-radius: 14px; padding: 24px 22px;
display: flex; align-items: flex-start; gap: 16px;
transition: var(--t);
}
.zq-why-card:hover { border-color: #C4B5FD; box-shadow: 0 8px 28px rgba(124,58,237,0.08); transform: translateY(-4px); }
.zq-why-icon {
width: 44px; height: 44px; min-width: 44px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
}
.zq-why-icon svg { width: 20px; height: 20px; }
.zq-why-card h4 { font-size: 14.5px; font-weight: 700; color: var(--black); margin-bottom: 7px; line-height: 1.3; }
.zq-why-card p { font-size: 13px; color: var(--gray-500); line-height: 1.7; }
/* Who Benefits grid — 3x2 */
.zq-benefits-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.zq-benefit-card {
background: var(--white); border: 1.5px solid var(--gray-100);
border-radius: 16px; padding: 28px 24px; transition: var(--t);
}
.zq-benefit-card:hover {
border-color: var(--accent-pale, #F5F3FF);
box-shadow: 0 10px 32px rgba(0,0,0,0.08);
transform: translateY(-5px);
}
.zq-benefit-header {
display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.zq-benefit-icon {
width: 44px; height: 44px; min-width: 44px;
border-radius: 11px; background: var(--accent-pale, #F5F3FF);
display: flex; align-items: center; justify-content: center;
}
.zq-benefit-icon svg { width: 20px; height: 20px; }
.zq-benefit-card h3 { font-size: 15px; font-weight: 700; color: var(--black); line-height: 1.3; }
.zq-benefit-list {
list-style: none; display: flex; flex-direction: column; gap: 9px;
}
.zq-benefit-list li {
display: flex; align-items: flex-start; gap: 9px;
font-size: 13px; color: var(--gray-500); line-height: 1.6;
}
.zq-benefit-list li::before {
content: '';
width: 16px; height: 16px; min-width: 16px;
border-radius: 50%; background: var(--accent-pale, #F5F3FF);
border: 1.5px solid var(--accent, #7C3AED);
display: flex; align-items: center; justify-content: center;
margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 10px; background-repeat: no-repeat; background-position: center;
}
/* Purple CTA Banner */
.zq-purple-banner {
background: linear-gradient(135deg, #1E0F5C 0%, #3B1FA8 55%, #6D28D9 100%);
border-radius: 20px; overflow: hidden; position: relative;
}
.zq-purple-banner::before {
content: '';
position: absolute; top: -80px; right: -80px;
width: 320px; height: 320px; border-radius: 50%;
background: rgba(255,255,255,0.05); pointer-events: none;
}
.zq-purple-banner::after {
content: '';
position: absolute; bottom: -60px; left: 10%;
width: 240px; height: 240px; border-radius: 50%;
background: rgba(255,255,255,0.04); pointer-events: none;
}
.zq-banner-inner {
position: relative; z-index: 1;
text-align: center; padding: 64px 48px;
}
.zq-banner-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.12); color: #C4B5FD;
font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2);
margin-bottom: 20px;
}
.zq-banner-inner h2 {
font-size: clamp(26px, 4vw, 40px); font-weight: 800;
color: #fff; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 16px;
}
.zq-banner-inner p {
font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.75;
max-width: 540px; margin: 0 auto 28px;
}
.zq-banner-tags {
display: flex; gap: 10px; flex-wrap: wrap;
justify-content: center; margin-bottom: 32px;
}
.zq-banner-tags span {
background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
font-size: 12px; font-weight: 600; padding: 5px 14px;
border-radius: 50px; border: 1px solid rgba(255,255,255,0.2);
}
.zq-banner-cta {
display: inline-flex; align-items: center; gap: 9px;
background: #fff; color: #3B1FA8;
font-size: 15px; font-weight: 700; font-family: var(--font);
padding: 14px 30px; border-radius: 8px;
text-decoration: none; transition: var(--t);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.zq-banner-cta:hover { background: #F5F3FF; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
.zq-banner-cta svg { width: 16px; height: 16px; }
/* Responsive */
@media (max-width: 1024px) {
.zq-usecases-grid { grid-template-columns: repeat(3, 1fr); }
.zq-why-grid { grid-template-columns: repeat(2, 1fr); }
.zq-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.zq-usecases-grid { grid-template-columns: 1fr 1fr; }
.zq-benefits-grid { grid-template-columns: 1fr; }
.zq-why-grid { grid-template-columns: 1fr; }
.zq-benefits-grid { grid-template-columns: 1fr; }
.zq-banner-inner { padding: 40px 24px; }
.zq-why-card { flex-direction: column; }
}
.zyncq-usecases-grid { grid-template-columns: repeat(3, 1fr); }
.zyncq-table { font-size: 11.5px; }
}
@media (max-width: 600px) {
.zyncq-hero-banner { padding: 32px 22px; }
.zyncq-usecases-grid { grid-template-columns: 1fr 1fr; }
.zyncq-arch-flow { flex-direction: column; align-items: flex-start; }
}
/* ───────────────────────────────────────────────
IT STAFFING PAGE SECTION
─────────────────────────────────────────────── */
.staffing-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--orange);
text-decoration: none; margin-bottom: 24px; transition: gap 0.2s;
}
.staffing-back:hover { gap: 10px; }
.staffing-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.staffing-hero { margin-bottom: 72px; }
.staffing-hero h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; color: var(--black); margin-bottom: 20px; }
.staffing-hero h1 span { color: var(--orange); }
.staffing-hero p { font-size: 16px; color: var(--gray-500); line-height: 1.75; max-width: 540px; margin-bottom: 32px; }
.staffing-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-staffing-primary {
display: inline-flex; align-items: center; gap: 9px;
background: var(--orange); color: #fff; padding: 13px 26px; border-radius: 7px;
font-size: 14.5px; font-weight: 600; font-family: var(--font);
border: none; cursor: pointer; transition: var(--t); text-decoration: none;
}
.btn-staffing-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,72,26,0.32); }
.btn-staffing-primary svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-staffing-outline {
display: inline-flex; align-items: center; gap: 9px;
background: transparent; color: var(--black); padding: 13px 26px; border-radius: 7px;
font-size: 14.5px; font-weight: 600; font-family: var(--font);
border: 1.5px solid var(--gray-200); cursor: pointer; transition: var(--t); text-decoration: none;
}
.btn-staffing-outline:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
.staffing-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; display: block; }
.staffing-section-title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--black); margin-bottom: 32px; letter-spacing: -0.02em; }
.engagement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 72px; }
.engagement-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; padding: 28px 26px; transition: var(--t); }
.engagement-card:hover { box-shadow: 0 10px 32px rgba(0,0,0,0.08); transform: translateY(-3px); border-color: var(--orange-mid); }
.eng-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.eng-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 10px; background: var(--orange-pale); display: flex; align-items: center; justify-content: center; }
.eng-icon svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.engagement-card h4 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.engagement-card > p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin-bottom: 16px; }
.eng-features { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; list-style: none; }
.eng-features li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #555; font-weight: 500; }
.eng-features li svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.roles-section { margin-bottom: 72px; text-align: center; }
.roles-section .staffing-section-title { margin-bottom: 8px; }
.roles-subtitle { font-size: 14px; color: var(--gray-500); margin-bottom: 32px; }
.roles-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.role-tag { padding: 8px 18px; border-radius: 50px; font-size: 13.5px; font-weight: 500; color: var(--gray-700); background: var(--white); border: 1.5px solid var(--gray-200); transition: var(--t); cursor: default; }
.role-tag:hover { background: var(--orange-pale); border-color: var(--orange); color: var(--orange); }
.hiring-section { margin-bottom: 72px; text-align: center; }
.hiring-section .staffing-section-title { margin-bottom: 8px; }
.hiring-subtitle { font-size: 14px; color: var(--gray-500); margin-bottom: 48px; }
.hiring-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; position: relative; }
.hiring-steps::before { content: ''; position: absolute; top: 28px; left: calc(12.5% + 28px); right: calc(12.5% + 28px); height: 2px; background: var(--orange-mid); z-index: 0; }
.hiring-step { flex: 1; text-align: center; padding: 0 10px; position: relative; z-index: 1; }
.hiring-num { width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 4px 14px rgba(232,72,26,0.3); transition: var(--t); }
.hiring-step:hover .hiring-num { transform: scale(1.1); box-shadow: 0 6px 20px rgba(232,72,26,0.4); }
.hiring-step h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.hiring-step p { font-size: 13px; color: var(--gray-500); line-height: 1.65; max-width: 160px; margin: 0 auto; }
.staffing-cta-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 20px; padding: 64px 48px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
.staffing-cta-card h3 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 800; color: var(--black); margin-bottom: 14px; letter-spacing: -0.02em; }
.staffing-cta-card p { font-size: 14.5px; color: var(--gray-500); max-width: 420px; margin: 0 auto 28px; line-height: 1.75; }
@media (max-width: 700px) {
.engagement-grid { grid-template-columns: 1fr; }
.eng-features { grid-template-columns: 1fr; }
.hiring-steps { flex-wrap: wrap; gap: 32px; }
.hiring-steps::before { display: none; }
.hiring-step { flex: 0 0 calc(50% - 20px); }
.staffing-cta-card { padding: 40px 24px; }
.staffing-hero-btns { flex-direction: column; }
}
/* Hero header */
.careers-hero { text-align: center; margin-bottom: 72px; }
.careers-hero .eyebrow { justify-content: center; }
.careers-hero .eyebrow::before { display: none; }
.careers-hero h2 { font-size: clamp(30px, 4.5vw, 50px); font-weight: 800; color: var(--black); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 16px; }
.careers-hero h2 .orange { color: var(--orange); display: block; }
.careers-hero p { font-size: 15px; color: var(--gray-500); line-height: 1.75; max-width: 520px; margin: 0 auto; }
/* Why Work at DIAN */
.careers-why { margin-bottom: 80px; }
.careers-why-header { text-align: center; margin-bottom: 40px; }
.careers-why-header h3 { font-size: 26px; font-weight: 800; color: var(--black); margin-bottom: 10px; letter-spacing: -0.02em; }
.careers-why-header p { font-size: 14.5px; color: var(--gray-500); }
.perks-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.perk-card {
border: 1px solid var(--gray-100); border-radius: 12px;
padding: 26px 22px; background: var(--white); transition: var(--t);
}
.perk-card:hover { border-color: var(--orange-mid); box-shadow: 0 6px 24px rgba(232,72,26,0.07); transform: translateY(-3px); }
.perk-icon {
width: 44px; height: 44px; background: var(--orange-pale);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.perk-icon svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.perk-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 7px; }
.perk-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; }
/* Our Values */
.careers-values { margin-bottom: 80px; }
.careers-values-header { text-align: center; margin-bottom: 36px; }
.careers-values-header h3 { font-size: 26px; font-weight: 800; color: var(--black); margin-bottom: 10px; letter-spacing: -0.02em; }
.careers-values-header p { font-size: 14.5px; color: var(--gray-500); }
.values-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px;
}
.value-card {
border: 1px solid var(--gray-100); border-radius: 12px;
padding: 28px 26px; background: var(--white); transition: var(--t);
}
.value-card:hover { border-color: var(--orange-mid); box-shadow: 0 6px 24px rgba(232,72,26,0.07); transform: translateY(-3px); }
.value-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 9px; }
.value-card p { font-size: 13.5px; color: var(--gray-500); line-height: 1.7; }
/* Life at DIAN */
.careers-life { margin-bottom: 64px; }
.careers-life-header { text-align: center; margin-bottom: 32px; }
.careers-life-header h3 { font-size: 26px; font-weight: 800; color: var(--black); margin-bottom: 10px; letter-spacing: -0.02em; }
.careers-life-header p { font-size: 14.5px; color: var(--gray-500); }
.life-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.life-card {
border: 1px solid var(--gray-100); border-radius: 12px;
padding: 26px 22px; background: var(--white); transition: var(--t);
}
.life-card:hover { border-color: var(--orange-mid); box-shadow: 0 6px 24px rgba(232,72,26,0.07); transform: translateY(-3px); }
.life-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.life-card p { font-size: 13px; color: var(--gray-500); line-height: 1.7; }
/* Ready to Join CTA band */
.careers-join {
background: var(--orange-pale); border: 1px solid var(--orange-mid);
border-radius: 20px; padding: 56px 48px; text-align: center;
}
.careers-join h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--black); margin-bottom: 14px; letter-spacing: -0.02em; }
.careers-join p { font-size: 14.5px; color: var(--gray-500); line-height: 1.75; max-width: 500px; margin: 0 auto 28px; }
.careers-join-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-resume {
display: inline-flex; align-items: center; gap: 9px;
background: var(--orange); color: #fff;
padding: 12px 24px; border-radius: 7px;
font-size: 14.5px; font-weight: 600; font-family: var(--font);
border: none; cursor: pointer; transition: var(--t);
}
.btn-resume:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,72,26,0.32); }
.btn-resume svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-follow-li {
display: inline-flex; align-items: center; gap: 9px;
background: var(--white); color: var(--black);
padding: 12px 24px; border-radius: 7px;
font-size: 14.5px; font-weight: 600; font-family: var(--font);
border: 1.5px solid var(--gray-200); cursor: pointer; transition: var(--t);
}
.btn-follow-li:hover { border-color: #0A66C2; color: #0A66C2; transform: translateY(-2px); }
/* ───────────────────────────────────────────────
FOOTER
─────────────────────────────────────────────── */
footer {
background: #111111;
padding: 72px 0 0;
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1.2fr 0.9fr 1fr;
gap: 40px;
padding-bottom: 52px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Brand column */
.footer-brand { }
.footer-logo-wrap {
margin-bottom: 20px;
}
.footer-logo-img {
height: 56px;
width: auto;
display: block;
object-fit: contain;
}
.footer-brand p {
font-size: 13.5px;
line-height: 1.75;
color: #777;
max-width: 280px;
margin-bottom: 24px;
}
.footer-socials {
display: flex;
gap: 10px;
}
.social-btn {
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: var(--t);
text-decoration: none;
}
.social-btn:hover { background: var(--orange); border-color: var(--orange); }
.social-btn svg {
width: 15px; height: 15px;
stroke: #888; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.social-btn:hover svg { stroke: #fff; }
/* Link columns */
.footer-col h4 {
font-size: 13px; font-weight: 700;
color: var(--white); margin-bottom: 18px;
letter-spacing: 0.04em;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 13.5px; color: #777; transition: color 0.2s; text-decoration: none; }
.footer-col ul li a:hover { color: var(--orange-light); }
/* Bottom bar */
.footer-bottom {
padding: 24px 0;
display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 12.5px; color: #555; }
.footer-bottom a { color: var(--orange-light); text-decoration: none; }
/* ───────────────────────────────────────────────
SCROLL FADE
─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }
/* ───────────────────────────────────────────────
RESPONSIVE
─────────────────────────────────────────────── */
@media (max-width: 1100px) {
.pillars-grid { grid-template-columns: repeat(3, 1fr); }
.industries-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {
/* Nav */
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
/* Hero */
.hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; }
.hero-visual { display: none; }
/* Stats */
.stats-inner { grid-template-columns: 1fr 1fr; }
/* About */
.about-intro { grid-template-columns: 1fr; gap: 24px; }
.about-intro > div:last-child > div[style*="grid-template-columns"] { grid-template-columns: 1fr; }
.about-values { grid-template-columns: 1fr 1fr; }
.about-quote-row { grid-template-columns: 1fr; }
/* Services */
.services-grid { grid-template-columns: 1fr 1fr; }
/* Pillars */
.pillars-grid { grid-template-columns: repeat(3, 1fr); }
/* Industries */
.industries-grid { grid-template-columns: 1fr 1fr; }
/* Process */
.process-row { flex-wrap: wrap; gap: 32px; }
.process-row::before { display: none; }
.proc-step { flex: 0 0 calc(33.33% - 22px); }
/* Contact */
.contact-cards-row { grid-template-columns: 1fr 1fr; }
.contact-body { grid-template-columns: 1fr; }
.contact-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
/* Team */
.founders-grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
.team-culture { padding: 40px 28px; }
.team-members-grid { grid-template-columns: repeat(2, 1fr); }
/* Careers */
.perks-grid { grid-template-columns: 1fr 1fr; }
.life-grid { grid-template-columns: 1fr 1fr; }
.careers-join { padding: 40px 28px; }
.values-grid { grid-template-columns: 1fr 1fr; }
/* Product Development */
.pd-caps-grid { grid-template-columns: 1fr 1fr; }
.pd-process-grid { grid-template-columns: 1fr 1fr; }
.pd-timeline { display: none; }
.pd-collab-inner { grid-template-columns: 1fr; gap: 36px; }
.pd-hero-btns { flex-wrap: wrap; }
/* IT Staffing */
.engagement-grid { grid-template-columns: 1fr 1fr; }
.hiring-steps { flex-wrap: wrap; gap: 32px; }
.hiring-steps::before { display: none; }
.hiring-step { flex: 0 0 calc(50% - 16px); }
/* ZyncQ */
.zyncq-hero-banner { grid-template-columns: 1fr; }
.zq-usecases-grid { grid-template-columns: repeat(3, 1fr); }
.zq-why-grid { grid-template-columns: 1fr 1fr; }
.zq-benefits-grid { grid-template-columns: 1fr 1fr; }
/* Footer */
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
}
/* ── MOBILE (≤600px) ── */
@media (max-width: 600px) {
/* Global */
.section { padding: 60px 0; }
.container { padding: 0 16px; }
/* Nav */
.nav-inner { padding: 0 16px; }
/* Hero */
.hero-inner { padding: 32px 16px; }
.hero-title { font-size: 30px; letter-spacing: -0.02em; }
.hero-badge { font-size: 12px; }
.hero-actions { flex-direction: column; }
.hero-actions .btn { justify-content: center; }
.hero-stats { gap: 20px; }
/* Stats bar */
.stats-inner { grid-template-columns: 1fr 1fr; gap: 0; }
/* Services */
.services-grid { grid-template-columns: 1fr; }
/* Pillars */
.pillars-grid { grid-template-columns: 1fr 1fr; }
/* Industries */
.industries-grid { grid-template-columns: 1fr; }
/* Section headers */
.sec-title { font-size: 26px; }
.tc .sec-sub { font-size: 14px; }
/* Process – hero steps */
.process-row { gap: 24px; }
.proc-step { flex: 0 0 calc(50% - 12px); }
.proc-tile { width: 72px; height: 72px; border-radius: 18px; }
.proc-tile svg { width: 28px; height: 28px; }
.proc-badge { right: calc(50% - 44px); }
.proc-tooltip { display: none; }
.process-hint { font-size: 12px; }
/* CTA banner */
.cta-inner { flex-direction: column; text-align: center; }
.cta-btns { justify-content: center; flex-direction: column; align-items: center; }
/* Contact */
.contact-header h2 { font-size: 28px; }
.contact-cards-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.cic-main { font-size: 12px; }
.cic-sub { font-size: 11px; }
.contact-body { grid-template-columns: 1fr; }
.contact-sidebar { grid-template-columns: 1fr; }
.contact-form-panel h3 { font-size: 18px; }
.form-row { grid-template-columns: 1fr; }
/* Team */
.team-header h2 { font-size: 26px; }
.founders-grid { grid-template-columns: 1fr; max-width: 100%; }
.team-members-grid { grid-template-columns: 1fr; }
.team-culture { padding: 32px 20px; }
.team-culture blockquote { font-size: 18px; }
.culture-tags { gap: 8px; }
/* Careers */
.careers-hero h2 { font-size: 28px; }
.perks-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
.life-grid { grid-template-columns: 1fr; }
.careers-join { padding: 32px 20px; }
.careers-join-btns { flex-direction: column; align-items: center; }
.hiring-step { flex: 0 0 calc(50% - 16px); }
/* Product Development */
.pd-hero h1 { font-size: 32px; }
.pd-hero-btns { flex-direction: column; align-items: flex-start; }
.pd-caps-grid { grid-template-columns: 1fr; }
.pd-process-grid { grid-template-columns: 1fr 1fr; }
.pd-timeline { display: none; }
.pd-collab-inner { grid-template-columns: 1fr; gap: 28px; }
.pd-collab-right { grid-template-columns: 1fr 1fr; }
.pd-process-header h2 { font-size: 22px; }
/* IT Staffing */
.staffing-hero h1 { font-size: 32px; }
.staffing-hero-btns { flex-direction: column; }
.engagement-grid { grid-template-columns: 1fr; }
.eng-features { grid-template-columns: 1fr; }
.hiring-steps::before { display: none; }
.roles-tags { gap: 8px; }
.role-tag { font-size: 12.5px; padding: 6px 14px; }
.staffing-cta-card { padding: 32px 20px; }
.staffing-cta-card h3 { font-size: 22px; }
/* ZyncQ */
.zyncq-hero-banner { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
.zyncq-logo-txt { font-size: 36px; }
.zyncq-tagline { font-size: 16px; }
.zyncq-use-badges { gap: 6px; }
.zyncq-badge { font-size: 10.5px; padding: 4px 10px; }
.zq-usecases-grid { grid-template-columns: 1fr 1fr; }
.zq-why-grid { grid-template-columns: 1fr; }
.zq-why-card { flex-direction: column; }
.zq-benefits-grid { grid-template-columns: 1fr; }
.zq-banner-inner { padding: 36px 20px; }
.zq-banner-inner h2 { font-size: 24px; }
.zq-banner-tags { gap: 6px; }
.zq-banner-tags span { font-size: 11px; padding: 4px 10px; }
.zq-block-title { font-size: 22px; }
/* Footer */
.footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
.footer-bottom p { font-size: 11.5px; }
.footer-inner { padding: 0 16px; }
footer { padding: 52px 0 0; }
/* Floating buttons */
.floating-btns { bottom: 20px; right: 16px; }
.fab-whatsapp { width: 48px; height: 48px; }
.fab-whatsapp svg { width: 24px; height: 24px; }
.fab-top { width: 38px; height: 38px; }
/* General spacing */
.staffing-back, .pd-back { margin-bottom: 16px; }
.careers-why-header h3 { font-size: 20px; }
.careers-values-header h3 { font-size: 20px; }
.careers-life-header h3 { font-size: 20px; }
.zyncq-section { margin-top: 56px; }
}
/* ── SMALL MOBILE (≤400px) ── */
@media (max-width: 400px) {
.hero-title { font-size: 26px; }
.contact-cards-row { grid-template-columns: 1fr; }
.proc-step { flex: 0 0 100%; text-align: center; }
.pd-process-grid { grid-template-columns: 1fr; }
.pd-collab-right { grid-template-columns: 1fr; }
.zq-usecases-grid { grid-template-columns: 1fr; }
.hiring-step { flex: 0 0 100%; }
}
/* ═══════════════════════════════════════════════
SHARED SERVICE PAGE STYLES
═══════════════════════════════════════════════ */
.sp-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--orange);
text-decoration: none; margin-bottom: 22px; transition: gap 0.2s;
}
.sp-back:hover { gap: 10px; }
.sp-back svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
/* Hero */
.sp-hero { margin-bottom: 72px; }
.sp-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sp-hero-badge {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 14px; border-radius: 50px; border: 1px solid; margin-bottom: 18px;
}
.sp-hero h1 { font-size: clamp(32px,5vw,52px); font-weight:900; line-height:1.08; letter-spacing:-0.03em; color:var(--black); margin-bottom:18px; }
.sp-hero h1 .sp-accent { }
.sp-hero p { font-size:16px; color:var(--gray-500); line-height:1.75; max-width:480px; margin-bottom:28px; }
.sp-hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.sp-btn-primary { display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;padding:13px 24px;border-radius:7px;font-size:14.5px;font-weight:600;font-family:var(--font);border:none;cursor:pointer;transition:var(--t);text-decoration:none; }
.sp-btn-primary:hover { background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,72,26,0.32); }
.sp-btn-primary svg { width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.sp-btn-outline { display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--black);padding:13px 24px;border-radius:7px;font-size:14.5px;font-weight:600;font-family:var(--font);border:1.5px solid var(--gray-200);cursor:pointer;transition:var(--t);text-decoration:none; }
.sp-btn-outline:hover { transform:translateY(-2px); }
/* Visual panel on hero right */
.sp-visual { border-radius:18px; overflow:hidden; position:relative; }
.sp-vis-card { border-radius:18px; padding:36px; position:relative; overflow:hidden; }
/* Stats row */
.sp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--gray-100); border-radius:14px; overflow:hidden; margin-bottom:72px; }
.sp-stat { padding:28px 24px; text-align:center; border-right:1px solid var(--gray-100); }
.sp-stat:last-child { border-right:none; }
.sp-stat-num { font-size:2.2rem; font-weight:900; line-height:1; margin-bottom:6px; }
.sp-stat-label { font-size:13px; color:var(--gray-500); font-weight:500; }
/* Section eyebrow + title */
.sp-eyebrow { font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;display:block;margin-bottom:10px; }
.sp-sec-title { font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--black);letter-spacing:-0.02em;margin-bottom:12px; }
.sp-sec-sub { font-size:14.5px;color:var(--gray-500);line-height:1.75;max-width:560px; }
.sp-header { margin-bottom:44px; }
.sp-header.tc { text-align:center; }
.sp-header.tc .sp-sec-sub { margin:0 auto; }
/* Generic 3-col capability grid */
.sp-grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:64px; }
.sp-grid-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:64px; }
.sp-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:64px; }
/* Service capability card */
.sp-cap-card { background:var(--white);border:1px solid var(--gray-100);border-radius:14px;padding:26px 22px;transition:var(--t); }
.sp-cap-card:hover { transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,0.08); }
.sp-cap-icon { width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
.sp-cap-icon svg { width:19px;height:19px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.sp-cap-card h4 { font-size:14.5px;font-weight:700;color:var(--black);margin-bottom:8px;line-height:1.3; }
.sp-cap-card p { font-size:13px;color:var(--gray-500);line-height:1.7; }
/* Process / steps row */
.sp-steps { display:flex;align-items:flex-start;justify-content:center;gap:0;position:relative;margin-bottom:64px; }
.sp-steps::before { content:'';position:absolute;top:28px;left:calc(12.5% + 28px);right:calc(12.5% + 28px);height:2px;background:var(--gray-100);z-index:0; }
.sp-step { flex:1;text-align:center;padding:0 10px;position:relative;z-index:1; }
.sp-step-num { width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:18px;font-weight:800;font-family:var(--font);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,0.2);transition:var(--t); }
.sp-step:hover .sp-step-num { transform:scale(1.1); }
.sp-step h4 { font-size:14.5px;font-weight:700;color:var(--black);margin-bottom:7px; }
.sp-step p { font-size:12.5px;color:var(--gray-500);line-height:1.65;max-width:150px;margin:0 auto; }
/* Two-col info block */
.sp-two-col { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px; }
.sp-two-col.reverse { }
.sp-info-list { list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px; }
.sp-info-list li { display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--gray-700);line-height:1.65; }
.sp-info-list li .sp-li-icon { width:22px;height:22px;min-width:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px; }
.sp-info-list li .sp-li-icon svg { width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
/* CTA footer card for each service */
.sp-cta-card { border-radius:18px;padding:52px 48px;text-align:center;position:relative;overflow:hidden; }
.sp-cta-card h3 { font-size:clamp(22px,3.5vw,34px);font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-0.02em; }
.sp-cta-card p { font-size:15px;color:rgba(255,255,255,0.8);max-width:480px;margin:0 auto 28px;line-height:1.75; }
.sp-cta-btns { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
.sp-cta-white { display:inline-flex;align-items:center;gap:8px;background:#fff;padding:13px 26px;border-radius:7px;font-size:14.5px;font-weight:700;font-family:var(--font);border:none;cursor:pointer;transition:var(--t);text-decoration:none; }
.sp-cta-white:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2); }
.sp-cta-outline { display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;padding:13px 26px;border-radius:7px;font-size:14.5px;font-weight:600;font-family:var(--font);border:1.5px solid rgba(255,255,255,0.5);cursor:pointer;transition:var(--t);text-decoration:none; }
.sp-cta-outline:hover { border-color:#fff;background:rgba(255,255,255,0.1);transform:translateY(-2px); }
/* Testimonial / quote block */
.sp-quote { border-radius:14px;padding:36px;position:relative;margin-bottom:64px; }
.sp-quote blockquote { font-size:clamp(16px,2vw,20px);font-weight:700;line-height:1.5;margin-bottom:16px; }
.sp-quote-author { display:flex;align-items:center;gap:12px; }
.sp-quote-avatar { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800; }
.sp-quote-author h5 { font-size:14px;font-weight:700;color:var(--black);margin-bottom:2px; }
.sp-quote-author p { font-size:12.5px;color:var(--gray-500); }
/* Tag cloud */
.sp-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }
.sp-tag { padding:6px 14px;border-radius:50px;font-size:12.5px;font-weight:500;color:var(--gray-700);background:var(--white);border:1.5px solid var(--gray-200);transition:var(--t);cursor:default; }
.sp-tag:hover { background:var(--orange-pale);border-color:var(--orange);color:var(--orange); }
/* Responsive for service pages */
@media (max-width: 900px) {
.sp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.sp-grid-3 { grid-template-columns: 1fr 1fr; }
.sp-grid-4 { grid-template-columns: 1fr 1fr; }
.sp-steps { gap: 24px; }
.sp-step { flex: 0 0 calc(50% - 12px); }
.sp-two-col { grid-template-columns: 1fr; gap: 36px; }
.sp-stats { grid-template-columns: 1fr 1fr 1fr; }
.sp-steps { flex-wrap: wrap; gap: 32px; }
.sp-steps::before { display: none; }
.sp-step { flex: 0 0 calc(50% - 16px); }
.sp-cta-card { padding: 40px 28px; }
}
@media (max-width: 600px) {
.sp-grid-3 { grid-template-columns: 1fr; }
.sp-grid-2 { grid-template-columns: 1fr; }
.sp-grid-4 { grid-template-columns: 1fr 1fr; }
.sp-stats { grid-template-columns: 1fr 1fr; }
.sp-stat:nth-child(3) { border-right: none; border-top: 1px solid var(--gray-100); grid-column: 1/-1; }
.sp-hero-btns { flex-direction: column; }
.sp-step { flex: 0 0 calc(50% - 16px); }
.sp-cta-btns { flex-direction: column; align-items: center; }
.sp-cta-card { padding: 32px 20px; }
}
/* ───────────────────────────────────────────────
FLOATING BUTTONS — WhatsApp + Scroll to Top
─────────────────────────────────────────────── */
.floating-btns {
position: fixed;
bottom: 28px; right: 24px;
display: flex; flex-direction: column;
align-items: center; gap: 12px;
z-index: 9999;
}
/* WhatsApp */
.fab-whatsapp {
width: 54px; height: 54px;
background: #25D366;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 18px rgba(37,211,102,0.45);
cursor: pointer; transition: transform 0.25s, box-shadow 0.25s;
text-decoration: none;
animation: waBounce 3s ease-in-out infinite;
}
.fab-whatsapp:hover {
transform: scale(1.12);
box-shadow: 0 8px 28px rgba(37,211,102,0.55);
animation: none;
}
.fab-whatsapp svg { width: 28px; height: 28px; fill: #fff; flex-shrink: 0; }
@keyframes waBounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Scroll to top — hidden until scrolled */
.fab-top {
width: 44px; height: 44px;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
cursor: pointer; transition: var(--t);
opacity: 0; visibility: hidden; transform: translateY(10px);
}
.fab-top.visible {
opacity: 1; visibility: visible; transform: translateY(0);
}
.fab-top:hover {
background: var(--orange); border-color: var(--orange);
box-shadow: 0 4px 18px rgba(232,72,26,0.28);
transform: translateY(-2px);
}
.fab-top svg {
width: 18px; height: 18px;
stroke: var(--gray-700); fill: none;
stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
transition: stroke 0.2s;
}
.fab-top:hover svg { stroke: #fff; }
/* Tooltip labels on hover */
.fab-whatsapp::before,
.fab-top::before {
content: attr(data-tip);
position: absolute;
right: calc(100% + 10px);
background: var(--gray-900); color: #fff;
font-size: 12px; font-weight: 500; font-family: var(--font);
padding: 5px 10px; border-radius: 6px;
white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity 0.2s;
}
.fab-whatsapp:hover::before,
.fab-top:hover::before { opacity: 1; }
/* ═══════════════════════════════════════════════
GLOBAL QUALITY IMPROVEMENTS
═══════════════════════════════════════════════ */
/* Smooth scroll */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
/* Better touch targets on mobile */
@media (max-width: 600px) {
.btn, .btn-hero, .hc-btn-primary, .hc-btn-outline,
.sp-btn-primary, .sp-btn-outline,
.btn-staffing-primary, .btn-staffing-outline,
.btn-pd-primary, .btn-pd-outline { min-height: 44px; }
/* Larger tap areas for nav */
.mobile-nav a { padding: 14px 20px; font-size: 15px; }
/* Better card spacing on mobile */
.svc-card { padding: 24px 18px; }
.svc-card h3 { font-size: 15px; }
.svc-tag { font-size: 11px; padding: 3px 9px; }
/* Prevent content overflow */
.container { overflow-x: hidden; }
img { max-width: 100%; }
/* Fix process steps on mobile */
.process-row { padding: 0 8px; }
.proc-step { flex: 0 0 calc(50% - 8px); }
.proc-tile { width: 64px; height: 64px; border-radius: 16px; }
/* Contact cards on small mobile */
.contact-cards-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-info-card { padding: 16px 12px; }
.cic-icon { width: 34px; height: 34px; }
.cic-main { font-size: 12px; }
/* Footer brand */
.footer-logo-img { height: 44px; }
.footer-brand p { font-size: 12.5px; }
/* Careers */
.careers-hero h2 { font-size: 26px; }
/* Section padding tighter */
.section { padding: 52px 0; }
/* IT Staffing */
.hiring-steps { gap: 20px; }
.hiring-num { width: 48px; height: 48px; font-size: 18px; }
}
/* ── Image lazy-load blur-in ── */
img { transition: opacity 0.3s ease; }
img:not([src]) { opacity: 0; }
/* ── Focus rings for accessibility ── */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 3px;
border-radius: 4px;
}
/* ── Better link underlines in content ── */
.contact-form-panel p a,
.sidebar-card p a { text-decoration: underline; text-decoration-color: rgba(232,72,26,0.3); }
/* ── Prevent iOS font-size zoom on input focus ── */
@media (max-width: 600px) { input, select, textarea { font-size: 16px !important; } }
/* ── Fix mobile nav CTA button style ── */
.mobile-nav .nav-cta {
margin: 8px 16px 16px;
border-radius: 7px;
text-align: center;
background: var(--orange);
color: #fff !important;
font-weight: 700;
padding: 13px 20px;
}
.mobile-nav .nav-cta:hover { background: var(--orange-dark) !important; }
/* ── Team member card mobile ── */
@media (max-width: 600px) {
.team-members-grid { grid-template-columns: 1fr 1fr; }
.member-card { padding: 20px 14px; }
.member-avatar { width: 52px; height: 52px; }
}
/* ── Industries grid on small tablet ── */
@media (max-width: 700px) {
.industries-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Service page hero on mobile ── */
@media (max-width: 600px) {
.sp-hero-inner { grid-template-columns: 1fr; }
.sp-vis-card { display: none; } /* hide complex visual on small screens */
.sp-hero h1 { font-size: 28px; }
.sp-stats { grid-template-columns: 1fr 1fr; }
.sp-stat:last-child { grid-column: 1/-1; border-top: 1px solid var(--gray-100); border-right: none; }
.pd-process-grid { grid-template-columns: 1fr; }
.zyncq-hero-banner { padding: 24px 16px; }
}
/* ── ZyncQ section mobile ── */
@media (max-width: 500px) {
.zyncq-logo-txt { font-size: 30px; }
.zq-banner-inner { padding: 32px 16px; }
.zq-banner-inner h2 { font-size: 20px; }
}
/* ── Footer final mobile ── */
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}