/* ═══════════════════════════════════════════════════════
   Digital Wheel — Main Stylesheet
   "Serving Solutions" | White · Red · Blue Palette
   ═══════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── CSS VARIABLES ─── */
:root {
  --blue: #1E6FE8;
  --blue-dark: #1550C4;
  --blue-light: #E8F1FD;
  --navy: #0f1f4e;
  --navy-mid: #1a2b6b;
  --red: #E63329;
  --white: #ffffff;
  --off-white: #f6f8fb;
  --gray: #64748b;
  --dark-text: #0d1733;
}

/* ── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'DM Sans', sans-serif; color: var(--dark-text); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ── TYPOGRAPHY ─── */
.display { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; }
h2.section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3.5vw, 2.8rem); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }

/* ── LAYOUT ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }

/* ════════════════════════════════════════
   NAV
   ════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(8,14,32,0.97); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30,111,232,0.2); transition: all .3s;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.nav-logo { display: flex; align-items: center; gap: .6rem; }
.logo-mark { width: 36px; height: 36px; }
.logo-img { width: auto; display: block; object-fit: contain; }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-text-top { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; color: var(--blue); text-transform: uppercase; letter-spacing: .1em; }
.logo-text-bottom { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .08em; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { color: rgba(255,255,255,0.75); font-size: .9rem; font-weight: 500; text-decoration: none; transition: color .2s; letter-spacing: .02em; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--blue); transition: width .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { background: var(--blue) !important; color: #fff !important; padding: .5rem 1.4rem !important; border-radius: 4px !important; font-weight: 700 !important; transition: background .2s !important; }
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--red) !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: .5rem; }
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu { display: none; position: fixed; top: 56px; left: 0; right: 0; background: rgba(8,14,32,0.99); backdrop-filter: blur(14px); padding: 1.5rem 2rem; z-index: 999; border-bottom: 1px solid rgba(30,111,232,0.2); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: .85rem 0; color: rgba(255,255,255,0.8); font-size: 1rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color .2s; }
.mobile-menu a:hover { color: var(--blue); }
.mobile-menu .nav-cta { display: inline-block; margin-top: 1rem; padding: .8rem 2rem !important; border-radius: 5px; }

/* ════════════════════════════════════════
   SHARED COMPONENTS
   ════════════════════════════════════════ */
.section-header { text-align: center; margin-bottom: 4rem; max-width: 540px; margin-left: auto; margin-right: auto; }
.section-tag { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--blue); margin-bottom: .8rem; }
.section-sub { font-size: 1.05rem; color: var(--gray); max-width: 560px; margin: 1rem auto 0; line-height: 1.7; }

/* Buttons */
.btn-primary { background: var(--blue); color: #fff; font-weight: 700; padding: .9rem 2rem; border-radius: 6px; text-decoration: none; font-size: .95rem; letter-spacing: .03em; transition: all .22s; border: 2px solid var(--blue); display: inline-block; box-shadow: 0 4px 22px rgba(30,111,232,.32), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(30,111,232,.5), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-secondary { background: transparent; color: #fff; font-weight: 600; padding: .9rem 2rem; border-radius: 5px; text-decoration: none; font-size: .95rem; border: 2px solid rgba(255,255,255,0.3); transition: all .2s; display: inline-block; }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; font-weight: 700; padding: .9rem 2rem; border-radius: 5px; text-decoration: none; font-size: .95rem; transition: all .2s; border: 2px solid var(--navy); display: inline-block; }
.btn-navy:hover { background: #fff; color: var(--navy); }
.btn-outline-navy { background: transparent; color: var(--navy); font-weight: 700; padding: .9rem 2rem; border-radius: 5px; text-decoration: none; font-size: .95rem; transition: all .2s; border: 2px solid var(--navy); display: inline-block; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* Page hero (inner pages) */
.page-hero { background: var(--navy); padding: 9rem 0 5rem; position: relative; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(30,111,232,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.05) 1px, transparent 1px); background-size: 60px 60px; }
.page-hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; width: 500px; height: 500px; background: radial-gradient(circle, rgba(30,111,232,0.2) 0%, transparent 70%); top: -200px; right: -100px; }
.page-hero-blob-2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(230,51,41,0.12) 0%, transparent 70%); bottom: -100px; left: 5%; top: auto; }
.page-hero-content { position: relative; z-index: 2; text-align: center; }
.page-hero-tag { display: inline-flex; align-items: center; gap: .5rem; background: rgba(30,111,232,0.12); border: 1px solid rgba(30,111,232,0.3); color: var(--blue); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1rem; border-radius: 20px; margin-bottom: 1.5rem; }
.page-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; color: #fff; line-height: 0.95; margin-bottom: 1.2rem; letter-spacing: -0.02em; }
.page-hero h1 .accent { color: var(--blue); }
.page-hero h1 .accent-red { color: var(--red); }
.page-hero > .container > .page-hero-content > p { font-size: 1.1rem; color: rgba(255,255,255,0.65); max-width: 580px; margin: 0 auto 2rem; line-height: 1.7; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; justify-content: center; font-size: .8rem; color: rgba(255,255,255,0.4); margin-top: 2rem; }
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: rgba(255,255,255,0.2); }

/* CTA Banner */
#cta-banner { background: var(--blue); padding: 4rem 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-text h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.5rem); text-transform: uppercase; color: #fff; line-height: 1; }
.cta-text p { color: rgba(255,255,255,0.75); font-size: .95rem; margin-top: .5rem; }
.cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
#cta-banner .btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
#cta-banner .btn-navy:hover { background: #fff; color: var(--navy); }
#cta-banner .btn-outline-navy { border-color: rgba(255,255,255,0.5); color: #fff; }
#cta-banner .btn-outline-navy:hover { background: rgba(255,255,255,0.15); }

/* Footer */
footer { background: var(--navy); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand-text { font-size: .88rem; color: rgba(255,255,255,0.45); line-height: 1.7; margin: 1rem 0 1.5rem; }
.footer-socials { display: flex; gap: .8rem; }
.social-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); text-decoration: none; font-size: .85rem; transition: all .2s; }
.social-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.footer-col-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.5); margin-bottom: 1.2rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { font-size: .87rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--blue); }
.footer-contact-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: rgba(255,255,255,0.55); margin-bottom: .7rem; }
.footer-contact-icon { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-size: .8rem; color: rgba(255,255,255,0.3); }
.footer-copy span { color: var(--blue); }
.footer-tagline { font-size: .78rem; color: rgba(255,255,255,0.25); font-style: italic; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Keyframe animations */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }
@keyframes floatUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes growBar { from{width:0} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulseRing { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.4);opacity:0} }
@keyframes heroBlobDrift { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.08)} }

/* ════════════════════════════════════════
   INDEX PAGE — HERO SLIDER
   ════════════════════════════════════════ */
#hero { min-height: 100vh; background: linear-gradient(170deg, #060f2a 0%, var(--navy) 50%, #0a1535 100%); display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 56px; flex-direction: column; justify-content: center; }
#hero::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:120%; height:320px; background:radial-gradient(ellipse at center bottom, rgba(30,111,232,.14) 0%, transparent 65%); pointer-events:none; z-index:0; }
.hero-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(30,111,232,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.06) 1px, transparent 1px); background-size: 56px 56px; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero-blob-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(30,111,232,0.32) 0%, transparent 68%); top: -280px; right: -180px; animation: heroBlobDrift 8s ease-in-out infinite; }
.hero-blob-2 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(230,51,41,0.18) 0%, transparent 68%); bottom: -120px; left: 5%; animation: heroBlobDrift 10s ease-in-out infinite reverse; }

/* Slider wrapper */
.hero-slider-wrap { position: relative; z-index: 2; width: 100%; }
.hero-slides { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); width: 100%; }
.hero-slide { min-width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; width: 100%; }
.hero-slide-single { min-width: 100%; width: 100%; }

.hero-tag { display: inline-flex; align-items: center; gap: .5rem; background: rgba(30,111,232,0.12); border: 1px solid rgba(30,111,232,0.3); color: var(--blue); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1rem; border-radius: 20px; margin-bottom: 1.5rem; }
.hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulse 2s infinite; }
.hero-h1 { font-size: clamp(1rem, 2.5vw, 2.5rem); color: var(--white); margin-bottom: 1.5rem; }
.hero-h1 .accent { background: linear-gradient(120deg, #7ab3ff 0%, #1E6FE8 55%, #1550C4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-h1 .accent-red { background: linear-gradient(120deg, #ff8a84 0%, var(--red) 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1.1rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 2.5rem; max-width: 500px; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.hero-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(30,111,232,.18); border-radius: 10px; padding: .85rem 1rem; border-left: 3px solid var(--blue); transition: border-color .2s; }
.hero-stat:hover { border-left-color: var(--red); border-color: rgba(30,111,232,.35); }
.hero-stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.85rem; color: var(--blue); line-height: 1; }
.hero-stat-label { font-size: .72rem; color: rgba(255,255,255,0.5); margin-top: .18rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Hero visual / cards */
.hero-visual { position: relative; }
.hero-card-stack { position: relative; height: 420px; }
.hero-card { position: absolute; background: rgba(255,255,255,0.04); border: 1px solid rgba(30,111,232,0.2); border-radius: 12px; padding: 1.5rem; backdrop-filter: blur(10px); }
.hero-card-main { width: 100%; top: 0; left: 0; background: linear-gradient(135deg, rgba(30,111,232,0.14), rgba(15,31,78,0.88)); box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 60px rgba(30,111,232,.12); }
.hero-card-float-1 { width: 200px; bottom: 20px; right: -20px; background: rgba(15,31,78,0.9); border-color: rgba(230,51,41,0.3); animation: floatUp 3s ease-in-out infinite; }
.hero-card-float-2 { width: 180px; top: 40%; left: -30px; background: rgba(15,31,78,0.9); animation: floatUp 3.5s ease-in-out infinite reverse; }
.metric-label { font-size: .7rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .1em; }
.metric-value { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.2rem; color: var(--blue); line-height: 1.1; }
.metric-value.red { color: var(--red); }
.metric-sub { font-size: .78rem; color: rgba(255,255,255,0.6); margin-top: .2rem; }
.chart-bar-row { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.chart-bar-name { font-size: .7rem; color: rgba(255,255,255,0.6); margin-bottom: .2rem; }
.chart-bar-track { background: rgba(255,255,255,0.08); border-radius: 3px; height: 6px; overflow: hidden; }
.chart-bar-fill { height: 100%; border-radius: 3px; background: var(--blue); animation: growBar 2s ease forwards; }
.chart-bar-fill.red-bar { background: var(--red); }

/* Video placeholder for hero slides */
.hero-video-box { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(30,111,232,0.15), rgba(15,31,78,0.9)); border-radius: 16px; border: 1px solid rgba(30,111,232,0.3); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; position: relative; overflow: hidden; background-size: cover; background-position: center; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(30,111,232,.2); }
.hero-video-box::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,111,232,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.04) 1px, transparent 1px); background-size: 30px 30px; z-index: 0; }
.hero-play-btn { width: 70px; height: 70px; border-radius: 50%; background: rgba(30,111,232,0.92); border: 3px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .22s; position: relative; z-index: 1; box-shadow: 0 0 0 0 rgba(30,111,232,.6); }
.hero-play-btn::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(30,111,232,.55); animation: pulseRing 2.4s ease-out infinite; pointer-events: none; }
.hero-play-btn:hover { background: var(--red); transform: scale(1.1); border-color: rgba(255,255,255,.6); }
.hero-play-btn::after { content: '▶'; color: #fff; font-size: 1.25rem; margin-left: 5px; }
.hero-video-label { font-size: .85rem; color: rgba(255,255,255,0.6); position: relative; z-index: 1; }

/* Slider controls */
.hero-slider-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; position: relative; z-index: 2; padding-bottom: .5rem; }
.hero-slider-dots { display: flex; gap: .6rem; align-items: center; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: all .3s; border: none; padding: 0; }
.hero-dot.active { background: var(--blue); width: 24px; border-radius: 4px; }
.hero-prev, .hero-next { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(30,111,232,0.3); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; transition: all .2s; }
.hero-prev:hover, .hero-next:hover { background: var(--blue); border-color: var(--blue); }

/* Trust bar */
.trust-bar { background: rgba(255,255,255,0.025); border-top: 1px solid rgba(30,111,232,0.15); padding: 1.1rem 0; position: relative; z-index: 2; backdrop-filter: blur(6px); margin: 10px 0;}
.trust-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.trust-label { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; padding-right: 1.5rem; border-right: 1px solid rgba(255,255,255,0.1); }
.trust-clients { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; flex: 1; }
.client-chip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 700; padding: .32rem 1rem; border-radius: 20px; letter-spacing: .03em; transition: all .22s; display: inline-flex; align-items: center; gap: .35rem; }
.client-chip:hover { background: rgba(30,111,232,.12); border-color: rgba(30,111,232,.5); color: #fff; transform: translateY(-1px); }

/* Stats section */
#stats { background: var(--off-white); padding: 4rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stat-card { text-align: center; padding: 2rem 1.5rem; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; transition: all .3s; }
.stat-card:hover { border-color: var(--blue); box-shadow: 0 12px 32px rgba(30,111,232,0.12); transform: translateY(-4px); }
.stat-icon { font-size: 2rem; margin-bottom: .8rem; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 3rem; color: var(--navy); line-height: 1; }
.stat-num .stat-suffix { color: var(--blue); }
.stat-desc { font-size: .85rem; color: var(--gray); margin-top: .4rem; }

/* Problem / Solution */
#problem { background: #fff; }
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.problem-side { padding: 3rem; border-radius: 12px; background: var(--off-white); border: 1px solid #e2e8f0; }
.solution-side { padding: 3rem; border-radius: 12px; background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.solution-side::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(30,111,232,0.3), transparent 70%); border-radius: 50%; }
.pain-tag { display: inline-block; background: #fff0ef; color: var(--red); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .8rem; border-radius: 20px; margin-bottom: 1.5rem; border: 1px solid rgba(230,51,41,0.2); }
.solution-tag { display: inline-block; background: rgba(30,111,232,0.15); color: var(--blue); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .8rem; border-radius: 20px; margin-bottom: 1.5rem; border: 1px solid rgba(30,111,232,0.3); }
.problem-items, .solution-items { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.problem-item, .solution-item { display: flex; align-items: flex-start; gap: .8rem; font-size: .92rem; line-height: 1.5; }
.problem-item { color: #475569; }
.solution-item { color: rgba(255,255,255,0.75); }
.problem-icon { width: 22px; height: 22px; border-radius: 50%; background: #fff0ef; color: var(--red); display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; margin-top: .1rem; }
.solution-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(30,111,232,0.2); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; margin-top: .1rem; }

/* Services overview */
#services { background: var(--off-white); }
.services-cluster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
.service-cluster { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; transition: transform .3s, box-shadow .3s; }
.service-cluster:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.cluster-header { padding: 1.8rem 1.8rem 1.4rem; position: relative; overflow: hidden; }
.cluster-growth .cluster-header { background: linear-gradient(135deg, var(--navy), #1a2b6b); }
.cluster-product .cluster-header { background: linear-gradient(135deg, #0d1f50, #162e7c); }
.cluster-experience .cluster-header { background: linear-gradient(135deg, #0f1f4e, #1E3A8A); }
.cluster-emoji { font-size: 2rem; margin-bottom: .8rem; display: block; }
.cluster-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; color: #fff; letter-spacing: .05em; }
.cluster-desc { font-size: .82rem; color: rgba(255,255,255,0.6); margin-top: .3rem; }
.cluster-body { padding: 1.5rem 1.8rem; background: #fff; }
.service-item { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem; color: #374151; }
.service-item:last-child { border-bottom: none; }
.service-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.service-dot.red { background: var(--red); }
.service-dot.blue2 { background: #1E3A8A; }
.services-cta-row { text-align: center; }

/* Featured case studies */
#featured-work { background: #fff; }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.cs-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; transition: all .3s; }
.cs-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,0.1); transform: translateY(-4px); }
.cs-card-top { padding: 1.5rem 1.8rem; display: flex; align-items: center; gap: 1rem; }
.cs-color-1 { background: linear-gradient(135deg, #0f1f4e, #1a2b6b); }
.cs-color-2 { background: linear-gradient(135deg, #0d1f50, #1a2b6b); }
.cs-icon-wrap { width: 50px; height: 50px; border-radius: 10px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.cs-client { font-size: .75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .1em; }
.cs-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; }
.cs-body { padding: 1.8rem; }
.cs-section-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gray); margin-bottom: .4rem; }
.cs-text { font-size: .88rem; color: #475569; line-height: 1.6; margin-bottom: 1.2rem; }
.cs-results { display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem; background: var(--off-white); border-radius: 8px; }
.cs-metric { flex: 1; min-width: 80px; text-align: center; }
.cs-metric-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--blue); line-height: 1; }
.cs-metric-label { font-size: .7rem; color: var(--gray); margin-top: .2rem; }
.work-cta { text-align: center; margin-top: 2.5rem; }

/* Testimonials */
#testimonials { background: var(--navy); overflow: hidden; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testi-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 2rem; transition: all .3s; }
.testi-card:hover { border-color: rgba(30,111,232,0.4); background: rgba(30,111,232,0.06); }
.testi-stars { color: #fbbf24; margin-bottom: 1rem; font-size: 1.1rem; }
.testi-quote { font-size: .92rem; color: rgba(255,255,255,0.8); line-height: 1.7; font-style: italic; margin-bottom: 1.5rem; }
.testi-quote::before { content: '\201C'; color: var(--blue); font-size: 1.5rem; line-height: 1; }
.testi-author { display: flex; align-items: center; gap: .8rem; }
/* Photo frame for testimonial avatars */
.testi-avatar-frame { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--blue); overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), var(--navy)); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.testi-avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
.testi-avatar-frame .avatar-initials { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; color: #fff; }
.testi-avatar-upload { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(30,111,232,0.7); opacity: 0; transition: opacity .2s; border-radius: 50%; font-size: .6rem; color: #fff; text-align: center; cursor: pointer; }
.testi-avatar-frame:hover .testi-avatar-upload { opacity: 1; }
.testi-name { font-weight: 600; font-size: .9rem; color: #fff; }
.testi-role { font-size: .78rem; color: rgba(255,255,255,0.45); }

/* Why section */
#why { background: var(--off-white); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.why-left h2 { color: var(--navy); margin-bottom: 1rem; }
.why-left > p { color: var(--gray); line-height: 1.7; margin-bottom: 2rem; }
.why-items { display: flex; flex-direction: column; gap: 1rem; }
.why-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: 8px; border: 1px solid #e8edf5; transition: all .2s; background: #fff; }
.why-item:hover { border-color: rgba(30,111,232,0.4); background: rgba(30,111,232,0.04); }
.why-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(30,111,232,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.why-item-text h4 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }
.why-item-text p { font-size: .83rem; color: var(--gray); line-height: 1.5; }
.why-right { background: var(--navy); border-radius: 16px; padding: 3rem; position: relative; overflow: hidden; }
.why-right::before { content: 'DW'; position: absolute; right: -10px; bottom: -20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 8rem; color: rgba(30,111,232,0.07); line-height: 1; pointer-events: none; }
.why-right h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.8rem; color: #fff; text-transform: uppercase; margin-bottom: 1.5rem; }
.prefer-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.prefer-item { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: rgba(255,255,255,0.75); padding: .7rem; border-radius: 8px; background: rgba(255,255,255,0.04); }
.prefer-check { color: var(--blue); font-size: 1rem; flex-shrink: 0; }

/* ════════════════════════════════════════
   SERVICES PAGE
   ════════════════════════════════════════ */
.services-intro { background: var(--off-white); padding: 4rem 0; }
.services-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.intro-text h2 { color: var(--navy); margin-bottom: 1rem; }
.intro-text p { color: var(--gray); line-height: 1.8; margin-bottom: 1.2rem; }
.intro-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.intro-badge { background: rgba(30,111,232,0.1); border: 1px solid rgba(30,111,232,0.3); color: var(--blue); font-size: .78rem; font-weight: 600; padding: .3rem .8rem; border-radius: 20px; letter-spacing: .06em; }
.intro-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.intro-stat { background: #fff; border-radius: 12px; padding: 1.5rem; border: 1px solid #e2e8f0; text-align: center; }
.intro-stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.5rem; color: var(--blue); line-height: 1; }
.intro-stat-label { font-size: .82rem; color: var(--gray); margin-top: .3rem; }

.service-section { padding: 5rem 0; }
.service-section:nth-child(odd) { background: #fff; }
.service-section:nth-child(even) { background: var(--off-white); }
.service-section-navy { background: var(--navy) !important; }
.service-section-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 4rem; align-items: start; }
.service-section-grid.reverse { grid-template-columns: 1.35fr 1fr; }
.service-section-grid.reverse .service-info { order: 2; }
.service-section-grid.reverse .service-media-showcase { order: 1; }
.service-cluster-tag { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; padding: .35rem .9rem; border-radius: 20px; margin-bottom: 1rem; }
.tag-teal, .tag-blue { background: rgba(30,111,232,0.12); color: var(--blue); border: 1px solid rgba(30,111,232,0.3); }
.tag-red { background: rgba(230,51,41,0.1); color: var(--red); border: 1px solid rgba(230,51,41,0.25); }
.tag-purple, .tag-blue2 { background: rgba(30,58,138,0.12); color: #1E3A8A; border: 1px solid rgba(30,58,138,0.25); }
.tag-white { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.service-info h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2rem, 3.5vw, 3rem); text-transform: uppercase; line-height: 1; margin-bottom: 1rem; }
.service-info h2.light { color: #fff; }
.service-info h2.dark { color: var(--navy); }
.service-info > p { font-size: .95rem; line-height: 1.8; margin-bottom: 2rem; }
.service-info > p.light { color: rgba(255,255,255,0.65); }
.service-info > p.dark { color: var(--gray); }
.service-detail-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.service-detail-item { display: flex; gap: 1rem; }
.sdl-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.sdl-icon-teal, .sdl-icon-blue { background: rgba(30,111,232,0.15); }
.sdl-icon-red { background: rgba(230,51,41,0.12); }
.sdl-icon-purple, .sdl-icon-blue2 { background: rgba(30,58,138,0.12); }
.sdl-icon-white { background: rgba(255,255,255,0.08); }
.sdl-text h4 { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
.sdl-text h4.light { color: #fff; }
.sdl-text h4.dark { color: var(--navy); }
.sdl-text p { font-size: .83rem; line-height: 1.5; }
.sdl-text p.light { color: rgba(255,255,255,0.55); }
.sdl-text p.dark { color: var(--gray); }
.service-cards-col { display: flex; flex-direction: column; gap: 1rem; }
.svc-card { border-radius: 10px; padding: 1.4rem 1.6rem; transition: all .3s; }
.svc-card-light { background: #fff; border: 1px solid #e2e8f0; }
.svc-card-light:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(30,111,232,0.1); transform: translateX(4px); }
.svc-card-dark { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.svc-card-dark:hover { border-color: rgba(30,111,232,0.4); background: rgba(30,111,232,0.08); transform: translateX(4px); }
.svc-card-header { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.svc-card-icon { font-size: 1.3rem; }
.svc-card-name { font-weight: 700; font-size: .95rem; }
.svc-card-name.light { color: #fff; }
.svc-card-name.dark { color: var(--navy); }
.svc-card-desc { font-size: .83rem; line-height: 1.5; }
.svc-card-desc.light { color: rgba(255,255,255,0.6); }
.svc-card-desc.dark { color: var(--gray); }
.svc-card-tag { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .2rem .6rem; border-radius: 12px; margin-top: .5rem; }
.svc-tag-teal, .svc-tag-blue { background: rgba(30,111,232,0.12); color: var(--blue); }
.svc-tag-red { background: rgba(230,51,41,0.1); color: var(--red); }
.svc-tag-purple, .svc-tag-blue2 { background: rgba(30,58,138,0.1); color: #1E3A8A; }

/* Tech / Tools grid */
#tech { background: var(--off-white); padding: 5rem 0; }
.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.tech-col-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; color: var(--navy); margin-bottom: 1.5rem; padding-bottom: .8rem; border-bottom: 2px solid var(--blue); }
.tech-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.tech-pill { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: .9rem; text-align: center; transition: all .2s; }
.tech-pill:hover { border-color: var(--blue); box-shadow: 0 4px 12px rgba(30,111,232,0.12); transform: translateY(-2px); }
.tech-pill-icon { font-size: 1.6rem; margin-bottom: .4rem; }
.tech-pill-name { font-size: .78rem; font-weight: 600; color: #374151; }
/* Digital Tools column */
.tech-col-dt .tech-pills { grid-template-columns: 1fr 1fr; }
.dt-pill { background: linear-gradient(135deg, #fff, var(--blue-light)); border: 1px solid rgba(30,111,232,0.2); display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; text-align: left; }
.dt-pill:hover { border-color: var(--blue); background: linear-gradient(135deg, var(--blue-light), #dbeafe); }
.dt-pill-icon { font-size: 1.4rem; flex-shrink: 0; }
.dt-pill-body { flex: 1; min-width: 0; }
.dt-pill-name { font-size: .78rem; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-pill-sub { font-size: .67rem; color: var(--gray); line-height: 1.3; }
.dt-affiliate-badge { flex-shrink: 0; display: inline-block; background: rgba(30,111,232,0.12); color: var(--blue); font-size: .62rem; font-weight: 700; padding: .15rem .45rem; border-radius: 8px; cursor: pointer; transition: background .2s; }
.dt-affiliate-badge:hover { background: var(--blue); color: #fff; }

/* Service media / video blocks (legacy) */
.service-media-block { background: linear-gradient(135deg, var(--navy), #1a2b6b); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(30,111,232,0.2); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .8rem; min-height: 160px; margin-bottom: 1rem; }
.service-media-block .play-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(30,111,232,0.8); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; padding-left: 3px; }
.service-media-label { font-size: .8rem; color: rgba(255,255,255,0.6); text-align: center; }

/* ── NAV DROPDOWN ─────────────────────────────────────── */
.nav-has-dropdown { position: relative; }
.nav-chevron { font-size: .52rem; transition: transform .2s; display: inline-block; vertical-align: middle; margin-left: .2rem; opacity: .55; }
.nav-has-dropdown:hover .nav-chevron,
.nav-has-dropdown.open .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-dropdown { display: none; position: absolute; top: calc(100% + 3px); left: -16px; width: 310px; background: rgba(7,13,35,0.97); backdrop-filter: blur(20px); border: 1px solid rgba(30,111,232,0.22); border-radius: 14px; padding: .5rem; z-index: 500; box-shadow: 0 28px 70px rgba(0,0,0,0.55); }
.nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 28px; width: 11px; height: 11px; background: rgba(7,13,35,0.97); border-top: 1px solid rgba(30,111,232,0.22); border-left: 1px solid rgba(30,111,232,0.22); transform: rotate(45deg); }
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown.open .nav-dropdown { display: block; }
.nav-dropdown-inner { display: flex; flex-direction: column; gap: .1rem; }
.nav-dd-item { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem .75rem; border-radius: 9px; text-decoration: none; transition: background .15s; }
.nav-dd-item:hover { background: rgba(30,111,232,0.13); }
.nav-dd-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
.nav-dd-text { display: flex; flex-direction: column; gap: .1rem; }
.nav-dd-text strong { font-size: .85rem; color: #fff; font-weight: 700; display: block; line-height: 1.2; }
.nav-dd-text span { font-size: .72rem; color: rgba(255,255,255,0.38); display: block; line-height: 1.4; }
.nav-dd-divider { height: 1px; background: rgba(255,255,255,0.07); margin: .3rem .75rem; }
.nav-dd-footer { padding: .4rem .75rem .2rem; }
.nav-dd-footer a { font-size: .78rem; font-weight: 700; color: var(--blue); text-decoration: none; letter-spacing: .02em; }
.nav-dd-footer a:hover { color: #fff; }

/* ── SERVICE MEDIA SHOWCASE ───────────────────────────── */
.service-media-showcase { display: flex; flex-direction: column; gap: .9rem; }
.sms-main { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; }
.sms-main-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.sms-play-btn { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.13); border: 2px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; backdrop-filter: blur(6px); transition: all .25s; padding-left: 4px; }
.sms-main:hover .sms-play-btn { background: var(--blue); border-color: var(--blue); transform: scale(1.1); }
.sms-main-label { font-size: .74rem; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: .05em; }
.sms-main-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.2rem .85rem; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); }
.sms-main-caption-tag { font-size: .65rem; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .12em; margin-bottom: .2rem; }
.sms-main-caption-title { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.3; }
.sms-reels-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.sms-reel-tall { aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; position: relative; transition: transform .2s; background-size: cover; background-position: center; }
.sms-reel-tall:hover { transform: translateY(-3px); }
.sms-reel-play { font-size: 1.5rem; opacity: .85; }
.sms-reel-label { font-size: .65rem; color: rgba(255,255,255,0.8); font-weight: 700; }
.sms-reel-badge { position: absolute; top: 8px; right: 8px; font-size: .55rem; font-weight: 800; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; }
.sms-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sms-thumb { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; display: flex; align-items: flex-end; transition: transform .2s; background-size: cover; background-position: center; }
.sms-thumb:hover { transform: translateY(-2px); }
.sms-thumb-label { width: 100%; padding: .35rem .45rem; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); font-size: .65rem; font-weight: 700; color: #fff; }
.sms-thumb-badge { position: absolute; top: 6px; right: 6px; background: var(--red); color: #fff; font-size: .52rem; padding: 2px 5px; border-radius: 3px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sms-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,0.1); }
.sms-stats-light { border-top-color: #e2e8f0; }
.sms-stat { display: flex; flex-direction: column; gap: .08rem; }
.sms-stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.35rem; color: var(--blue); line-height: 1; }
.sms-stat-label { font-size: .68rem; color: rgba(255,255,255,0.4); line-height: 1.3; }
.sms-stats-light .sms-stat-label { color: var(--gray); }
.svc-info-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; font-size: .83rem; font-weight: 700; color: var(--blue); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s; }
.svc-info-link:hover { border-bottom-color: var(--blue); }
.svc-info-link-light { color: rgba(255,255,255,0.7); }
.svc-info-link-light:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }

/* ── DIGITAL TOOLS SECTION ────────────────────────────── */
.service-section-tools { padding: 5rem 0; background: var(--navy); }
.tools-why-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; padding: 1.5rem 2rem; background: rgba(255,255,255,0.04); border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); }
.tools-why-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.tools-why-icon { font-size: 1.8rem; }
.tools-why-title { font-size: .88rem; font-weight: 700; color: #fff; }
.tools-why-desc { font-size: .77rem; color: rgba(255,255,255,0.42); line-height: 1.5; max-width: 200px; }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.tool-category { display: flex; flex-direction: column; gap: .7rem; }
.tool-cat-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .88rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,0.35); padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: .1rem; }
.tool-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: .85rem .95rem; display: flex; gap: .65rem; align-items: flex-start; transition: all .2s; }
.tool-card:hover { background: rgba(30,111,232,0.1); border-color: rgba(30,111,232,0.3); transform: translateY(-2px); }
.tool-card-icon { font-size: 1.35rem; flex-shrink: 0; line-height: 1; margin-top: .05rem; }
.tool-card-body { flex: 1; min-width: 0; }
.tool-card-name { font-size: .84rem; font-weight: 700; color: #fff; margin-bottom: .1rem; }
.tool-card-desc { font-size: .72rem; color: rgba(255,255,255,0.38); line-height: 1.4; margin-bottom: .4rem; }
.tool-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.tool-cat-tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; background: rgba(30,111,232,0.15); color: var(--blue); padding: 2px 6px; border-radius: 4px; }
.tool-affiliate-btn { font-size: .68rem; font-weight: 700; color: var(--blue); text-decoration: none; border: 1px solid rgba(30,111,232,0.3); padding: 2px 7px; border-radius: 4px; transition: all .15s; white-space: nowrap; }
.tool-affiliate-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.tools-cta-strip { margin-top: 3rem; text-align: center; padding: 2rem 2.5rem; background: rgba(30,111,232,0.08); border-radius: 14px; border: 1px solid rgba(30,111,232,0.2); }
.tools-cta-strip h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: #fff; margin-bottom: .4rem; letter-spacing: .02em; }
.tools-cta-strip p { font-size: .88rem; color: rgba(255,255,255,0.5); margin-bottom: 1.2rem; max-width: 500px; margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════
   WORK PAGE
   ════════════════════════════════════════ */
.work-stats-bar { background: var(--blue); padding: 2rem 0; }
.work-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.ws-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.5rem; color: #fff; line-height: 1; }
.ws-label { font-size: .82rem; color: rgba(255,255,255,0.75); margin-top: .3rem; font-weight: 600; }
.filter-row { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-bottom: 3rem; }
.filter-btn { background: #fff; border: 2px solid #e2e8f0; color: var(--gray); font-size: .85rem; font-weight: 600; padding: .5rem 1.2rem; border-radius: 30px; cursor: pointer; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { border-color: var(--blue); color: var(--blue); background: rgba(30,111,232,0.06); }
#portfolio { background: var(--off-white); }
.cs-full-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.cs-full-grid .cs-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; transition: all .3s; }
.cs-full-grid .cs-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,0.12); transform: translateY(-5px); }
.cs-full-grid .cs-card-top { padding: 1.8rem; display: flex; align-items: center; gap: 1.2rem; }
.cs-color-3 { background: linear-gradient(135deg, #3d1a0d, #5a2a10); }
.cs-color-4 { background: linear-gradient(135deg, #0f1f4e, #1a2b6b); }
.cs-color-5 { background: linear-gradient(135deg, #0d1f4e, #162960); }
.cs-color-6 { background: linear-gradient(135deg, #0f1f4e, #1e3a8a); }
.cs-color-7 { background: linear-gradient(135deg, #1a0d3d, #162e7c); }
.cs-meta { flex: 1; }
.cs-category { font-size: .72rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.cs-period { font-size: .75rem; color: rgba(255,255,255,0.4); margin-top: .2rem; }
.cs-service-type { font-size: .78rem; color: rgba(30,111,232,0.9); font-weight: 600; margin-top: .2rem; letter-spacing: .03em; }
.cs-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin-bottom: .4rem; }
.cs-challenge { font-size: .88rem; color: #475569; line-height: 1.6; margin-bottom: 1rem; }
.cs-approach { font-size: .88rem; color: #475569; line-height: 1.6; margin-bottom: 1.2rem; }
.cs-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.cs-tag { background: rgba(30,111,232,0.08); border: 1px solid rgba(30,111,232,0.2); color: var(--blue); font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 12px; }
.cs-full-grid .cs-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; background: var(--off-white); border-radius: 10px; padding: 1rem; }
.cs-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.7rem; color: var(--blue); line-height: 1; }
.cs-num.red { color: var(--red); }
.cs-desc { font-size: .7rem; color: var(--gray); margin-top: .2rem; }
.cs-card-featured { grid-column: span 2; }
.cs-card-featured .cs-results { grid-template-columns: repeat(5, 1fr) !important; }
#clients { background: #fff; padding: 4rem 0; }
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.client-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.5rem; text-align: center; transition: all .2s; }
.client-card:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgba(30,111,232,0.1); transform: translateY(-3px); }
.client-emoji { font-size: 2.5rem; margin-bottom: .7rem; }
.client-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--navy); text-transform: uppercase; }
.client-type { font-size: .78rem; color: var(--gray); margin-top: .2rem; }
.client-since { font-size: .72rem; color: var(--blue); font-weight: 600; margin-top: .3rem; }
#work-testi { background: var(--navy); }

/* ════════════════════════════════════════
   PROCESS PAGE — Horizontal Steps
   ════════════════════════════════════════ */
#process-steps { background: #fff; }

/* Media column on left */
.process-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; }
.process-intro-text h2 { color: var(--navy); margin-bottom: 1rem; }
.process-intro-text p { color: var(--gray); line-height: 1.8; margin-bottom: 1.2rem; }
.process-highlights { display: flex; flex-direction: column; gap: 1rem; }
.ph-item { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; background: var(--off-white); border-radius: 8px; border-left: 3px solid var(--blue); }
.ph-icon { font-size: 1.2rem; }
.ph-text { font-size: .88rem; color: var(--navy); font-weight: 600; }

/* Process media block */
.process-media-col { display: flex; flex-direction: column; gap: 1.5rem; }
.process-video-block { background: linear-gradient(135deg, var(--navy), #162e7c); border-radius: 14px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border: 1px solid rgba(30,111,232,0.25); position: relative; overflow: hidden; }
.process-video-block::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,111,232,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.05) 1px, transparent 1px); background-size: 30px 30px; }
.process-play-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(30,111,232,0.9); border: 3px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; position: relative; z-index: 1; }
.process-play-btn:hover { background: var(--red); transform: scale(1.1); }
.process-play-btn::after { content: '▶'; color: #fff; font-size: 1.1rem; margin-left: 4px; }
.process-video-label { font-size: .85rem; color: rgba(255,255,255,0.6); text-align: center; position: relative; z-index: 1; }
.process-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.process-mini-stat { background: var(--off-white); border-radius: 10px; padding: 1rem; border: 1px solid #e2e8f0; text-align: center; }
.process-mini-stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.8rem; color: var(--blue); }
.process-mini-stat-label { font-size: .76rem; color: var(--gray); margin-top: .2rem; }

/* ── PROCESS VIDEO BOX ─────────────────────────────────── */
.process-vid-box { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; }
.process-vid-box .pvb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -62%); width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; backdrop-filter: blur(8px); transition: all .25s; padding-left: 4px; z-index: 2; }
.process-vid-box:hover .pvb-play { background: var(--blue); border-color: var(--blue); transform: translate(-50%, -62%) scale(1.1); }

/* ── PROCESS VERTICAL TIMELINE ─────────────────────────── */
.process-vsteps { position: relative; padding-left: 1.4rem; }
.process-vsteps::before { content: ''; position: absolute; left: 18px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(to bottom, var(--blue), rgba(30,111,232,.08)); border-radius: 2px; }
.process-vstep { display: flex; gap: 1.2rem; padding: 1.1rem 0; align-items: flex-start; }
.process-vstep:not(:last-child) { border-bottom: 1px solid #eef2f8; }
.pvs-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-light); border: 2px solid rgba(30,111,232,.28); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 900; color: var(--blue); font-family: 'Barlow Condensed', sans-serif; flex-shrink: 0; position: relative; z-index: 1; }
.process-vstep.pvs-active .pvs-dot { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 5px rgba(30,111,232,.14); }
.pvs-content { flex: 1; padding-top: .08rem; }
.pvs-badge { display: inline-block; font-size: .62rem; background: var(--blue-light); color: var(--blue); font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .04em; margin-bottom: .28rem; }
.process-vstep.pvs-active .pvs-badge { background: var(--blue); color: #fff; }
.pvs-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; color: var(--navy); line-height: 1.2; margin-bottom: .22rem; }
.process-vstep.pvs-active .pvs-title { color: var(--blue); }
.pvs-desc { font-size: .78rem; color: var(--gray); line-height: 1.55; }
.pvs-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.pvs-chip { font-size: .62rem; background: #f1f5f9; color: var(--navy); font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.process-vstep.pvs-active .pvs-chip { background: rgba(30,111,232,.12); color: var(--blue); }

/* Old vertical timeline (kept for reference, hidden on process page) */
.steps-timeline { position: relative; padding-left: 3rem; }
.steps-timeline::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--blue), var(--navy)); border-radius: 2px; }
.step-block { position: relative; margin-bottom: 3rem; }
.step-block:last-child { margin-bottom: 0; }
.step-dot { position: absolute; left: -3rem; top: 1rem; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--blue); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: .85rem; color: #fff; }
.step-content { background: var(--off-white); border-radius: 12px; padding: 2rem; border: 1px solid #e2e8f0; transition: all .3s; }
.step-content:hover { border-color: rgba(30,111,232,0.4); box-shadow: 0 8px 24px rgba(30,111,232,0.1); }
.step-week { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin-bottom: .4rem; }
.step-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--navy); margin-bottom: .6rem; }
.step-desc { font-size: .9rem; color: var(--gray); line-height: 1.7; margin-bottom: 1rem; }

/* Lifecycle / SaaS build */
#lifecycle { background: var(--navy); position: relative; overflow: hidden; }
#lifecycle::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(30,111,232,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.04) 1px, transparent 1px); background-size: 50px 50px; }
.lifecycle-inner { position: relative; z-index: 1; }
.lifecycle-track { display: flex; gap: 0; margin-bottom: 4rem; overflow-x: auto; }
.lifecycle-step { flex: 1; min-width: 180px; padding: 2rem 1.5rem; position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); text-align: center; transition: all .3s; cursor: default; }
.lifecycle-step:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--blue); z-index: 2; }
.lifecycle-step:hover { background: rgba(30,111,232,0.08); border-color: rgba(30,111,232,0.3); }
.lifecycle-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 3rem; color: rgba(30,111,232,0.15); line-height: 1; margin-bottom: .5rem; }
.lifecycle-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; }
.lifecycle-desc { font-size: .8rem; color: rgba(255,255,255,0.5); margin-top: .4rem; line-height: 1.5; }
.method-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }
.method-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(30,111,232,0.15); border-radius: 10px; padding: 2rem; transition: all .3s; }
.method-card:hover { background: rgba(30,111,232,0.08); border-color: rgba(30,111,232,0.4); transform: translateY(-4px); }
.method-icon { font-size: 2.2rem; margin-bottom: 1rem; }
.method-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: #fff; margin-bottom: .6rem; }
.method-text { font-size: .88rem; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* Tools / How we stay accountable */
#tools { background: var(--off-white); }
#tools .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
#tools .tool-card { display: block; background: #fff; border-radius: 12px; padding: 1.6rem; border: 1px solid #e2e8f0; transition: all .2s; }
#tools .tool-card:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(30,111,232,0.1); transform: translateY(-3px); }
#tools .tool-card-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: .95rem; }
.tool-category { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin-bottom: .35rem; }
.tool-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: var(--navy); margin-bottom: .4rem; }
.tool-desc { font-size: .83rem; color: var(--gray); line-height: 1.5; }

/* FAQ */
#faq { background: #fff; }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; transition: border-color .2s; }
.faq-item.open { border-color: rgba(30,111,232,0.4); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; cursor: pointer; gap: 1rem; }
.faq-q-text { font-weight: 600; font-size: .95rem; color: var(--navy); }
.faq-chevron { width: 24px; height: 24px; border-radius: 50%; background: rgba(30,111,232,0.1); display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: .8rem; transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--blue); color: #fff; }
.faq-answer { padding: 0 1.5rem; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; }
.faq-item.open .faq-answer { max-height: 300px; padding: 0 1.5rem 1.2rem; }
.faq-answer p { font-size: .9rem; color: var(--gray); line-height: 1.7; }

/* ════════════════════════════════════════
   PRICING PAGE
   ════════════════════════════════════════ */
#pricing { background: var(--off-white); }
.billing-toggle { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 3rem; }
.toggle-label { font-size: .9rem; font-weight: 600; color: var(--gray); }
.toggle-label.active { color: var(--navy); }
.toggle-switch { width: 52px; height: 28px; background: var(--blue); border-radius: 14px; cursor: pointer; position: relative; border: none; transition: background .2s; }
.toggle-switch::after { content: ''; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; top: 4px; left: 4px; transition: left .2s; }
.toggle-switch.yearly::after { left: 28px; }
.toggle-badge { background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; padding: .2rem .6rem; border-radius: 10px; text-transform: uppercase; letter-spacing: .06em; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.pricing-card { background: #fff; border-radius: 14px; overflow: hidden; border: 2px solid #e2e8f0; transition: all .3s; display: flex; flex-direction: column; }
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.1); }
.pricing-card.popular { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30,111,232,0.12); transform: translateY(-8px); }
.pricing-card.popular:hover { transform: translateY(-14px); }
.popular-badge { background: var(--blue); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; text-align: center; padding: .4rem; }
.pricing-header { padding: 2rem; border-bottom: 1px solid #f1f5f9; }
.pricing-tier { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin-bottom: .4rem; }
.pricing-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--navy); margin-bottom: .8rem; }
.pricing-tagline { font-size: .84rem; color: var(--gray); line-height: 1.5; margin-bottom: 1.2rem; }
.pricing-price { display: flex; align-items: baseline; gap: .3rem; }
.price-currency { font-size: .9rem; color: var(--gray); font-weight: 500; }
.price-amount { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.8rem; color: var(--navy); line-height: 1; }
.price-period { font-size: .8rem; color: var(--gray); }
.price-yearly { display: none; }
.price-save { display: inline-block; background: rgba(30,111,232,0.1); color: var(--blue); font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 10px; margin-top: .4rem; }
.pricing-body { padding: 1.5rem 2rem; flex: 1; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.pricing-feature { display: flex; gap: .7rem; font-size: .85rem; color: #374151; align-items: flex-start; }
.pf-check { color: var(--blue); flex-shrink: 0; font-size: .9rem; margin-top: .05rem; }
.pf-x { color: #cbd5e1; flex-shrink: 0; font-size: .9rem; margin-top: .05rem; }
.pricing-footer { padding: 1.5rem 2rem; display: flex; gap: .75rem; }
.pricing-footer .pdp-cta,
.pricing-footer .btn-plan { flex: 1; text-align: center; margin-top: 0; }
.btn-plan { display: block; text-align: center; padding: .9rem; border-radius: 6px; font-weight: 700; font-size: .9rem; text-decoration: none; transition: all .2s; }
.btn-plan-outline { border: 2px solid var(--blue); color: var(--blue); background: transparent; }
.btn-plan-outline:hover { background: var(--blue); color: #fff; }
.btn-plan-solid { background: var(--blue); color: #fff; border: 2px solid var(--blue); }
.btn-plan-solid:hover { background: var(--navy); border-color: var(--navy); }

/* Comparison table */
#comparison { background: #fff; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th { padding: 1.2rem 1rem; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; color: var(--navy); border-bottom: 2px solid #e2e8f0; }
.compare-table th:first-child { text-align: left; color: var(--gray); font-size: .85rem; font-family: 'DM Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.compare-table th.highlight { color: var(--blue); }
.compare-table td { padding: 1rem; text-align: center; border-bottom: 1px solid #f1f5f9; font-size: .88rem; color: var(--gray); }
.compare-table td:first-child { text-align: left; color: var(--dark-text); font-weight: 500; }
.compare-table tr:hover td { background: rgba(30,111,232,0.03); }
.compare-table .check { color: var(--blue); font-size: 1.1rem; }
.compare-table .cross { color: #e2e8f0; font-size: 1.1rem; }
.compare-table .category-row td { background: var(--off-white); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); padding: .7rem 1rem; }
.compare-table .category-row td:first-child { text-align: left; }
.compare-table-wrap { overflow-x: auto; }

/* Add-Ons — service-aligned */
#addons { background: var(--off-white); }
.addons-intro { text-align: center; margin-bottom: 1.5rem; }
.addons-intro p { font-size: .88rem; color: var(--gray); }
.addons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.addon-card { background: #fff; border-radius: 12px; padding: 1.8rem; border: 1px solid #e2e8f0; transition: all .2s; position: relative; overflow: hidden; }
.addon-card:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(30,111,232,0.1); transform: translateY(-3px); }
.addon-card.featured-addon { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,111,232,0.1); }
.addon-badge { position: absolute; top: 1rem; right: 1rem; background: var(--red); color: #fff; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .6rem; border-radius: 10px; }
.addon-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.addon-icon-wrap { width: 48px; height: 48px; border-radius: 10px; background: rgba(30,111,232,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.addon-icon-wrap.red { background: rgba(230,51,41,0.1); }
.addon-title-group { flex: 1; }
.addon-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: var(--navy); margin-bottom: .2rem; }
.addon-tagline { font-size: .76rem; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; }
.addon-desc { font-size: .83rem; color: var(--gray); line-height: 1.6; margin-bottom: 1rem; }
.addon-price { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--navy); }
.addon-period { font-size: .78rem; color: var(--gray); font-weight: 400; }
.addon-price-note { font-size: .75rem; color: var(--blue); font-weight: 600; margin-top: .2rem; }
.addon-details-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .82rem; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--blue); padding-bottom: .1rem; transition: color .2s, border-color .2s; }
.addon-details-link:hover { color: var(--blue); }
.addon-pkg-trigger { display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: .82rem; font-weight: 700; color: var(--blue); cursor: pointer; border: 1px solid rgba(30,111,232,0.3); padding: .4rem .9rem; border-radius: 20px; transition: all .2s; }
.addon-pkg-trigger:hover { background: rgba(30,111,232,0.08); }
.addon-pkg-panel { display: none; margin-top: 1rem; padding: 1.2rem; background: var(--blue-light); border-radius: 10px; border: 1px solid rgba(30,111,232,0.2); }
.addon-pkg-panel.open { display: block; }
.addon-pkg-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; text-transform: uppercase; color: var(--navy); margin-bottom: 1rem; }
/* Promotional package detail cards */
.addon-pkg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.addon-pkg-card { background: #fff; border-radius: 10px; padding: 1.1rem; border: 1px solid #e2e8f0; transition: all .2s; display: flex; flex-direction: column; gap: .6rem; }
.addon-pkg-card:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(30,111,232,0.1); }
.addon-pkg-card.apk-featured { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(30,111,232,0.15); position: relative; }
.apk-badge { position: absolute; top: -10px; right: 12px; background: var(--red); color: #fff; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 10px; }
.apk-header { display: flex; align-items: center; gap: .6rem; }
.apk-icon { font-size: 1.5rem; flex-shrink: 0; }
.apk-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .95rem; text-transform: uppercase; color: var(--navy); line-height: 1.1; }
.apk-price { font-size: 1.1rem; font-weight: 800; color: var(--blue); line-height: 1; }
.apk-price span { font-size: .72rem; color: var(--gray); font-weight: 500; }
.apk-features { list-style: none; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.apk-features li { font-size: .74rem; color: var(--gray); padding-left: 1rem; position: relative; line-height: 1.4; }
.apk-features li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; font-size: .7rem; }
.apk-cta { display: block; text-align: center; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 700; padding: .5rem; border-radius: 6px; text-decoration: none; margin-top: auto; transition: background .2s; }
.apk-cta:hover { background: var(--blue); }
.addon-pkg-card.apk-featured .apk-cta { background: var(--blue); }
.addon-pkg-card.apk-featured .apk-cta:hover { background: var(--red); }
/* Plan detail panels */
.plan-details-panel { display: none; border-top: 1px solid #e2e8f0; padding: 1.5rem 2rem 1.2rem; background: var(--off-white); }
.plan-details-panel.open { display: block; }
.pdp-section { margin-bottom: 1rem; }
.pdp-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--blue); margin-bottom: .4rem; }
.pdp-list { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.pdp-list li { font-size: .8rem; color: var(--gray); padding-left: 1.1rem; position: relative; line-height: 1.5; }
.pdp-list li::before { content: '→'; position: absolute; left: 0; color: var(--navy); font-size: .7rem; font-weight: 700; }
.pdp-cta { display: inline-block; margin-top: .8rem; background: var(--navy); color: #fff; font-size: .82rem; font-weight: 700; padding: .6rem 1.4rem; border-radius: 6px; text-decoration: none; transition: background .2s; text-align: center; }
.pdp-cta:hover { background: var(--red); }
.btn-view-details { background: none; border: 1px solid var(--blue); color: var(--blue); font-size: .8rem; font-weight: 700; padding: .5rem 1rem; border-radius: 6px; cursor: pointer; transition: all .2s; font-family: 'DM Sans', sans-serif; }
.btn-view-details:hover, .btn-view-details.open { background: var(--blue); color: #fff; }
/* addon-pkg-options kept for legacy */
.addon-pkg-options { display: flex; flex-direction: column; gap: .5rem; }
.addon-pkg-option { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; background: #fff; border-radius: 6px; border: 1px solid #e2e8f0; font-size: .82rem; }
.addon-pkg-option-name { font-weight: 600; color: var(--navy); }
.addon-pkg-option-price { color: var(--blue); font-weight: 700; }

/* Pricing FAQ */
#pricing-faq { background: #fff; }

/* ════════════════════════════════════════
   INSIGHTS PAGE
   ════════════════════════════════════════ */
#featured-article { background: var(--off-white); }
.featured-post { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.featured-thumb { height: 100%; min-height: 360px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.fp-bg { width: 100%; height: 100%; background: linear-gradient(135deg, var(--navy), #1a2b6b); }
.fp-category-badge { position: absolute; top: 1.5rem; left: 1.5rem; background: var(--blue); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .8rem; border-radius: 20px; }
.fp-read-badge { position: absolute; bottom: 1.5rem; right: 1.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: .75rem; padding: .3rem .7rem; border-radius: 20px; backdrop-filter: blur(8px); }
.featured-body { padding: 2.5rem; }
.featured-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.featured-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); }
.featured-dot { width: 4px; height: 4px; background: #e2e8f0; border-radius: 50%; }
.featured-date { font-size: .78rem; color: var(--gray); }
.featured-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2rem; text-transform: uppercase; color: var(--navy); line-height: 1.1; margin-bottom: 1rem; }
.featured-excerpt { font-size: .9rem; color: var(--gray); line-height: 1.75; margin-bottom: 1.5rem; }
.featured-author { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; }
.author-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--navy)); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .9rem; color: #fff; }
.author-name { font-size: .88rem; font-weight: 600; color: var(--navy); }
.author-role { font-size: .76rem; color: var(--gray); }
.read-more-btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 700; color: var(--blue); text-decoration: none; transition: gap .2s; }
.read-more-btn:hover { gap: .9rem; }
#blog-grid { background: #fff; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card { border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; transition: all .3s; }
.blog-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.1); transform: translateY(-5px); }
.blog-thumb { height: 190px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f1f4e, #1a2b6b); }
.blog-cat-badge { position: absolute; top: 1rem; left: 1rem; background: var(--blue); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: .25rem .7rem; border-radius: 20px; }
.blog-read-time { position: absolute; bottom: 1rem; right: 1rem; background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.8); font-size: .72rem; padding: .2rem .6rem; border-radius: 12px; backdrop-filter: blur(4px); }
.blog-body { padding: 1.5rem; }
.blog-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.blog-date { font-size: .76rem; color: var(--gray); }
.blog-author-chip { font-size: .74rem; color: var(--blue); font-weight: 600; }
.blog-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--navy); line-height: 1.2; margin-bottom: .6rem; text-transform: uppercase; }
.blog-excerpt { font-size: .84rem; color: var(--gray); line-height: 1.6; margin-bottom: 1rem; }
.blog-footer { display: flex; align-items: center; justify-content: space-between; }
.blog-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.blog-tag { background: rgba(30,111,232,0.08); color: var(--blue); font-size: .7rem; font-weight: 600; padding: .18rem .55rem; border-radius: 10px; border: 1px solid rgba(30,111,232,0.2); }
.blog-read-link { font-size: .82rem; font-weight: 700; color: var(--blue); text-decoration: none; white-space: nowrap; }
.blog-read-link:hover { text-decoration: underline; }
#categories { background: var(--off-white); padding: 2.5rem 0; }
.cats-inner { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.cat-chip { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 30px; padding: .5rem 1.2rem; font-size: .85rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: all .2s; }
.cat-chip:hover, .cat-chip.active { border-color: var(--blue); color: var(--blue); background: rgba(30,111,232,0.05); }
.cat-count { background: rgba(30,111,232,0.15); color: var(--blue); font-size: .72rem; padding: .1rem .5rem; border-radius: 10px; font-weight: 700; }
/* ── NEWSLETTER ── */
#newsletter { background: linear-gradient(150deg, #060f1e 0%, var(--navy) 55%, #091530 100%); position: relative; overflow: hidden; }
.nl-bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(30,111,232,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.045) 1px, transparent 1px); background-size: 44px 44px; }
.nl-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.nl-blob-1 { width: 550px; height: 550px; background: radial-gradient(circle, rgba(30,111,232,0.18) 0%, transparent 70%); top: -220px; right: -80px; }
.nl-blob-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(230,51,41,0.1) 0%, transparent 70%); bottom: -160px; left: -60px; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; }
/* Left text */
.newsletter-text { margin-bottom: .5rem; }
.newsletter-text h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2rem, 3.8vw, 3rem); text-transform: uppercase; color: #fff; line-height: 1.0; margin-bottom: 1rem; }
.newsletter-text h2 span { color: var(--blue); }
.newsletter-text p { font-size: .95rem; color: rgba(255,255,255,0.6); line-height: 1.7; }
/* Subscriber avatar row */
.nl-sub-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; padding: .9rem 1.2rem; background: rgba(30,111,232,0.08); border: 1px solid rgba(30,111,232,0.22); border-radius: 10px; }
.nl-avatars { display: flex; }
.nl-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #0f1f4e; margin-left: -8px; letter-spacing: 0; }
.nl-avatars .nl-avatar:first-child { margin-left: 0; }
.nl-avatar-plus { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.45); font-size: .78rem; }
.nl-sub-text { font-size: .85rem; color: rgba(255,255,255,0.6); }
.nl-sub-text strong { color: #fff; }
/* Perks */
.newsletter-perks { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.newsletter-perk { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: rgba(255,255,255,0.7); }
.newsletter-perk-icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(30,111,232,0.22); color: var(--blue); font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Form card */
.newsletter-form { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 2.2rem; box-shadow: 0 28px 70px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(12px); }
.nl-form-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nl-form-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 6px 18px rgba(30,111,232,0.35); }
.nl-form-header h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; color: #fff; margin-bottom: .2rem; }
.nl-form-header p { font-size: .78rem; color: rgba(255,255,255,0.38); }
/* Inputs */
.newsletter-form .form-group { margin-bottom: 1.1rem; }
.newsletter-form .form-group label { display: block; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,0.52); margin-bottom: .45rem; letter-spacing: .03em; text-transform: uppercase; }
.label-optional { color: rgba(255,255,255,0.28); font-weight: 400; text-transform: none; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: .9rem; font-size: .88rem; pointer-events: none; z-index: 1; line-height: 1; }
.newsletter-form .form-control { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: .82rem 1rem .82rem 2.7rem; color: #fff; font-size: .9rem; font-family: 'DM Sans', sans-serif; transition: border-color .2s, background .2s, box-shadow .2s; }
.newsletter-form .form-control::placeholder { color: rgba(255,255,255,0.22); }
.newsletter-form .form-control:focus { outline: none; border-color: var(--blue); background: rgba(30,111,232,0.07); box-shadow: 0 0 0 3px rgba(30,111,232,0.16); }
/* Subscribe button */
.btn-subscribe { width: 100%; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color: #fff; font-weight: 700; font-size: .97rem; padding: .95rem; border-radius: 8px; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .22s; margin-top: .6rem; letter-spacing: .02em; box-shadow: 0 6px 22px rgba(30,111,232,.4); }
.btn-subscribe:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,111,232,.55); filter: brightness(1.08); }
.newsletter-note { font-size: .76rem; color: rgba(255,255,255,0.28); text-align: center; margin-top: .9rem; }

/* ════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════ */
#contact-main { background: var(--off-white); padding: 3.5rem 0; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.contact-form-card { background: #fff; border-radius: 16px; padding: 2.5rem; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.form-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--navy); margin-bottom: .4rem; }
.form-subtitle { font-size: .85rem; color: var(--gray); margin-bottom: 1.5rem; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.form-group label .req { color: var(--red); }
.form-control { width: 100%; background: var(--off-white); border: 1.5px solid #e2e8f0; border-radius: 7px; padding: .8rem 1rem; color: var(--dark-text); font-size: .9rem; font-family: 'DM Sans', sans-serif; transition: all .2s; }
.form-control:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(30,111,232,0.1); }
.form-control::placeholder { color: #94a3b8; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 120px; }
.budget-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .2rem; }
.budget-option { position: relative; }
.budget-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.budget-option label { display: block; text-align: center; padding: .6rem .4rem; border: 1.5px solid #e2e8f0; border-radius: 6px; font-size: .78rem; font-weight: 600; color: var(--gray); cursor: pointer; transition: all .2s; }
.budget-option input:checked + label { border-color: var(--blue); color: var(--blue); background: rgba(30,111,232,0.07); }
.budget-option label:hover { border-color: rgba(30,111,232,0.5); color: var(--blue); }
.form-checkbox { display: flex; align-items: flex-start; gap: .7rem; }
.form-checkbox input { margin-top: 3px; accent-color: var(--blue); flex-shrink: 0; }
.form-checkbox label { font-size: .83rem; color: var(--gray); line-height: 1.5; }
.btn-submit { width: 100%; background: var(--blue); color: #fff; font-weight: 700; font-size: 1rem; padding: 1rem; border-radius: 7px; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; margin-top: 1rem; letter-spacing: .03em; }
.btn-submit:hover { background: var(--navy); }
.form-success { display: none; text-align: center; padding: 2rem; }
.form-success-icon { font-size: 3rem; margin-bottom: 1rem; }
.form-success h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.8rem; text-transform: uppercase; color: var(--navy); margin-bottom: .5rem; }
.form-success p { color: var(--gray); font-size: .9rem; line-height: 1.6; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.info-card { background: #fff; border-radius: 12px; padding: 1.8rem; border: 1px solid #e2e8f0; transition: all .2s; }
.info-card:hover { border-color: rgba(30,111,232,0.4); box-shadow: 0 6px 20px rgba(30,111,232,0.1); }
.info-card-header { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.info-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(30,111,232,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.info-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; color: var(--navy); }
.info-detail { font-size: .9rem; color: var(--gray); line-height: 1.6; }
.info-detail a { color: var(--blue); text-decoration: none; }
.info-detail a:hover { text-decoration: underline; }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .5rem; }
.hours-row { display: flex; justify-content: space-between; font-size: .82rem; }
.hours-day { color: var(--navy); font-weight: 500; }
.hours-time { color: var(--gray); }
.hours-row.closed .hours-time { color: var(--red); }
.contact-socials { display: flex; gap: .7rem; flex-wrap: wrap; }
.contact-social { display: flex; align-items: center; gap: .5rem; background: var(--off-white); border: 1px solid #e2e8f0; color: var(--navy); font-size: .82rem; font-weight: 600; padding: .5rem 1rem; border-radius: 6px; text-decoration: none; transition: all .2s; }
.contact-social:hover { border-color: var(--blue); color: var(--blue); background: rgba(30,111,232,0.05); }
.map-placeholder { background: linear-gradient(135deg, var(--navy), #1a2b6b); border-radius: 12px; height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .7rem; margin-top: .5rem; }
.map-pin { font-size: 2rem; }
.map-label { font-size: .85rem; color: rgba(255,255,255,0.6); text-align: center; }
.map-address { font-size: .78rem; color: var(--blue); text-align: center; }
#why-contact { background: var(--navy); padding: 4rem 0; }
.why-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.wc-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 2rem; text-align: center; transition: all .3s; }
.wc-card:hover { border-color: rgba(30,111,232,0.4); background: rgba(30,111,232,0.06); transform: translateY(-3px); }
.wc-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.wc-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.2rem; text-transform: uppercase; color: #fff; margin-bottom: .5rem; }
.wc-text { font-size: .85rem; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* ════════════════════════════════════════
   ARTICLE / BLOG DETAIL PAGES
   ════════════════════════════════════════ */
.article-hero { background: linear-gradient(160deg, #060f1e 0%, var(--navy) 60%, #091530 100%); padding: 9rem 0 4rem; position: relative; overflow: hidden; }
.article-hero-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(30,111,232,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30,111,232,0.05) 1px, transparent 1px); background-size: 56px 56px; }
.article-hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; width: 600px; height: 600px; background: radial-gradient(circle, rgba(30,111,232,0.2) 0%, transparent 70%); top: -280px; right: -120px; }
.article-hero-blob-2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(230,51,41,0.1) 0%, transparent 70%); bottom: -100px; left: 5%; top: auto; }
.article-hero-content { position: relative; z-index: 2; max-width: 820px; }
.article-back { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,0.45); font-size: .8rem; font-weight: 600; text-decoration: none; margin-bottom: 2rem; transition: color .2s; letter-spacing: .04em; text-transform: uppercase; }
.article-back:hover { color: var(--blue); }
.article-hero-cat { display: inline-flex; align-items: center; gap: .45rem; background: rgba(30,111,232,0.15); border: 1px solid rgba(30,111,232,0.3); color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .32rem .9rem; border-radius: 20px; margin-bottom: 1.2rem; }
.article-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2rem, 5vw, 3.6rem); text-transform: uppercase; color: #fff; line-height: 1.0; margin-bottom: 1.8rem; letter-spacing: -0.02em; }
.article-hero h1 .accent { color: var(--blue); }
.article-hero-meta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.article-author-inline { display: flex; align-items: center; gap: .65rem; }
.article-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(30,111,232,0.35); flex-shrink: 0; }
.article-author-name { font-size: .88rem; font-weight: 600; color: #fff; line-height: 1.2; }
.article-author-role { font-size: .73rem; color: rgba(255,255,255,0.42); }
.article-meta-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.14); }
.article-meta-item { font-size: .8rem; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: .35rem; }

/* Article body layout */
#article-body { background: var(--off-white); }
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.8rem; align-items: start; padding: 4rem 0 5rem; }

/* Article content prose */
.article-content { background: #fff; border-radius: 16px; padding: 2.8rem; box-shadow: 0 2px 24px rgba(0,0,0,0.06); }
.article-lead { font-size: 1.1rem; color: #374151; line-height: 1.85; font-weight: 400; margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 2px solid var(--blue-light); }
.article-content h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.65rem; text-transform: uppercase; color: var(--navy); margin: 2.5rem 0 .85rem; letter-spacing: -0.01em; }
.article-content h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; color: var(--navy); margin: 1.8rem 0 .65rem; }
.article-content p { font-size: .97rem; color: #374151; line-height: 1.82; margin-bottom: 1.2rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.3rem; }
.article-content li { font-size: .96rem; color: #374151; line-height: 1.78; margin-bottom: .45rem; }
.article-content strong { color: var(--navy); font-weight: 700; }

/* Pull quote */
.article-quote { border-left: 4px solid var(--blue); background: var(--blue-light); border-radius: 0 12px 12px 0; padding: 1.3rem 1.8rem; margin: 2.2rem 0; }
.article-quote p { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--navy); line-height: 1.38; margin: 0; font-style: italic; }
.article-quote cite { display: block; font-size: .76rem; color: var(--blue); font-weight: 700; margin-top: .55rem; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }

/* Callout / stats box */
.article-callout { background: linear-gradient(135deg, var(--navy) 0%, #162255 100%); border-radius: 14px; padding: 2rem 2.2rem; margin: 2.2rem 0; border: 1px solid rgba(30,111,232,0.2); }
.article-callout-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; text-transform: uppercase; color: var(--blue); margin-bottom: 1.2rem; letter-spacing: .08em; }
.callout-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.callout-stat { text-align: center; padding: .5rem; }
.callout-stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.1rem; color: #fff; line-height: 1; }
.callout-stat-label { font-size: .7rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .08em; margin-top: .25rem; }

/* Tip / info box */
.article-tip { background: #f0f7ff; border: 1px solid rgba(30,111,232,0.2); border-radius: 10px; padding: 1.1rem 1.4rem; margin: 1.6rem 0; display: flex; gap: .8rem; align-items: flex-start; }
.article-tip-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }
.article-tip p { font-size: .9rem; color: var(--navy); line-height: 1.65; margin: 0; }
.article-tip strong { color: var(--blue); }

/* Article footer tags */
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid #f1f5f9; }
.article-tag-label { font-size: .78rem; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .06em; margin-right: .2rem; }
.article-tag { font-size: .75rem; font-weight: 600; background: var(--blue-light); color: var(--blue); padding: .3rem .9rem; border-radius: 20px; }

/* Share row */
.article-share { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid #f1f5f9; }
.article-share-label { font-size: .8rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .06em; }
.share-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .45rem 1rem; border-radius: 6px; text-decoration: none; transition: all .2s; border: 1.5px solid #e2e8f0; color: var(--gray); background: #fff; }
.share-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Sidebar */
.article-sidebar { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 1.4rem; }
.sidebar-card { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 2px 16px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; }
.sidebar-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .95rem; text-transform: uppercase; color: var(--navy); margin-bottom: 1.1rem; letter-spacing: .05em; padding-bottom: .75rem; border-bottom: 2px solid var(--blue-light); }
/* Author card */
.sidebar-author { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sidebar-author-avatar { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: .8rem; border: 3px solid var(--blue-light); }
.sidebar-author-name { font-weight: 700; font-size: .98rem; color: var(--navy); margin-bottom: .2rem; }
.sidebar-author-role { font-size: .78rem; color: var(--blue); font-weight: 600; margin-bottom: .6rem; }
.sidebar-author-bio { font-size: .81rem; color: var(--gray); line-height: 1.65; }
/* Related articles */
.related-item { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid #f8fafc; text-decoration: none; }
.related-item:last-child { border-bottom: none; padding-bottom: 0; }
.related-thumb { width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; flex-shrink: 0; }
.rt-1 { background: #fef3c7; }
.rt-2 { background: #dcfce7; }
.rt-3 { background: #ede9fe; }
.rt-4 { background: #fee2e2; }
.rt-5 { background: #e0f2fe; }
.rt-6 { background: #fce7f3; }
.related-title { font-size: .82rem; font-weight: 600; color: var(--navy); line-height: 1.45; display: block; transition: color .2s; }
.related-item:hover .related-title { color: var(--blue); }
.related-meta { font-size: .7rem; color: var(--gray); margin-top: .2rem; display: block; }
/* Sidebar newsletter */
.sidebar-nl-form { display: flex; flex-direction: column; gap: .7rem; }
.sidebar-nl-input { background: var(--off-white); border: 1.5px solid #e2e8f0; border-radius: 7px; padding: .72rem 1rem; color: var(--dark-text); font-size: .88rem; font-family: 'DM Sans', sans-serif; width: 100%; transition: border-color .2s; }
.sidebar-nl-input:focus { outline: none; border-color: var(--blue); }
.sidebar-nl-input::placeholder { color: #94a3b8; }
.sidebar-nl-btn { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; font-weight: 700; font-size: .88rem; padding: .72rem; border-radius: 7px; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; }
.sidebar-nl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Related posts section at bottom */
#related-posts { background: #fff; border-top: 1px solid #f1f5f9; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }

/* ════════════════════════════════════════
   GALLERY PAGE
   ════════════════════════════════════════ */
#gallery-filters { padding: 2rem 0 0; background: var(--off-white); }
.gallery-filter-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.gallery-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: .45rem 1.1rem; font-size: .82rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: all .2s; user-select: none; }
.gallery-chip:hover { border-color: var(--blue); color: var(--blue); }
.gallery-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.gf-count { font-size: .7rem; padding: .1rem .45rem; border-radius: 10px; background: rgba(255,255,255,.22); }
.gallery-chip:not(.active) .gf-count { background: rgba(30,111,232,.12); color: var(--blue); }

/* Albums grid */
#gallery-main { background: var(--off-white); padding: 2rem 0 5rem; }
.albums-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.album-card { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.06); cursor: pointer; transition: all .3s; border: 1px solid #f1f5f9; }
.album-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.album-card.hidden { display: none; }
.album-cover { height: 220px; position: relative; overflow: hidden; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.album-card:hover .album-cover img { transform: scale(1.06); }
.album-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,10,30,.65) 0%, transparent 55%); }
.album-count-badge { position: absolute; top: .75rem; right: .75rem; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); color: #fff; font-size: .72rem; font-weight: 700; padding: .28rem .75rem; border-radius: 20px; letter-spacing: .04em; }
.album-has-video { position: absolute; top: .75rem; left: .75rem; background: rgba(30,111,232,.88); color: #fff; font-size: .65rem; font-weight: 800; padding: .22rem .65rem; border-radius: 20px; text-transform: uppercase; letter-spacing: .08em; }
.album-open-hint { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .9rem; border-radius: 20px; border: 1px solid rgba(255,255,255,.2); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.album-card:hover .album-open-hint { opacity: 1; }
.album-info { padding: 1rem 1.2rem 1.3rem; }
.album-cat-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin-bottom: .35rem; }
.album-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: var(--navy); line-height: 1.1; margin-bottom: .28rem; }
.album-date { font-size: .76rem; color: var(--gray); }

/* Album detail view */
#view-album { display: none; }
.album-nav-bar { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid #e8edf5; flex-wrap: wrap; }
.back-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--blue-light); color: var(--blue); font-size: .82rem; font-weight: 700; padding: .6rem 1.2rem; border-radius: 7px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; transition: all .2s; font-family: 'DM Sans', sans-serif; flex-shrink: 0; }
.back-btn:hover { background: var(--blue); color: #fff; }
.album-detail-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.7rem; text-transform: uppercase; color: var(--navy); line-height: 1; }
.album-detail-meta { font-size: .8rem; color: var(--gray); margin-top: .25rem; }

/* Masonry grid */
.masonry-grid { columns: 4 200px; column-gap: 10px; }
.masonry-item { break-inside: avoid; margin-bottom: 10px; border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; display: block; }
.masonry-item img { width: 100%; height: auto; display: block; transition: transform .35s; }
.masonry-item:hover img { transform: scale(1.04); }
.masonry-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,10,30,.7) 0%, transparent 50%); opacity: 0; transition: opacity .25s; display: flex; flex-direction: column; justify-content: flex-end; padding: .75rem; }
.masonry-item:hover .masonry-item-overlay { opacity: 1; }
.masonry-item-caption { font-size: .75rem; color: rgba(255,255,255,.88); font-weight: 500; line-height: 1.3; }
.masonry-video-badge { position: absolute; top: .55rem; left: .55rem; background: rgba(30,111,232,.9); color: #fff; font-size: .62rem; font-weight: 800; padding: .18rem .55rem; border-radius: 20px; text-transform: uppercase; letter-spacing: .08em; }
.masonry-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 20px rgba(0,0,0,.3); transition: transform .2s, opacity .2s; }
.masonry-item.is-video .masonry-play-btn { opacity: .88; }
.masonry-item:hover .masonry-play-btn { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
.masonry-item:not(.is-video) .masonry-play-btn { display: none; }

/* Lightbox */
.lb-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .28s; }
.lb-overlay.lb-active { opacity: 1; pointer-events: all; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(4,6,16,.96); }
.lb-close { position: absolute; top: 1.1rem; right: 1.4rem; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.6rem; border: none; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background .2s; line-height: 1; }
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.7rem; border: none; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background .2s; line-height: 1; }
.lb-arr:hover { background: rgba(255,255,255,.22); }
#lbPrev { left: 1.2rem; }
#lbNext { right: 1.2rem; }
.lb-inner { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 92vw; }
.lb-inner img { max-width: 88vw; max-height: 78vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; display: block; }
.lb-inner iframe { width: min(880px,88vw); aspect-ratio: 16/9; border-radius: 8px; border: none; }
.lb-footer { text-align: center; }
.lb-caption-text { font-size: .88rem; color: rgba(255,255,255,.78); margin-bottom: .35rem; }
.lb-counter-text { font-size: .73rem; color: rgba(255,255,255,.35); }