/* MAGAI Theme v1.0.4 — FIXED centering — WordPress-proof with !important overrides */

:root {
  --bg: #FAFAF7; --bg-warm: #F3F0EA; --bg-dark: #1A1A2E;
  --accent: #E86A33; --accent-hover: #D45A25; --accent-light: #FFF0E8;
  --green: #2D8F5E; --green-light: #E8F5EE;
  --blue: #3B6CB5; --blue-light: #E8EFF8;
  --purple: #7C5CBF; --purple-light: #F0EBF8;
  --text: #2C2C3A; --text-secondary: #5E5E72; --text-light: #8A8A9A;
  --border: #E2E0DA; --border-hover: #CCC9C0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --radius: 16px; --radius-sm: 10px;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* === NUCLEAR RESET === */
*, *::before, *::after { box-sizing: border-box !important; }
html { scroll-behavior: smooth !important; }
body {
  font-family: var(--font-body) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body ul, body ol, body li, body figure, body blockquote {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
body a { color: inherit !important; text-decoration: none !important; }
body img { max-width: 100% !important; }

/* === LAYOUT === */
body .container { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; width: 100% !important; }
body .section-pad { padding-top: 6rem !important; padding-bottom: 6rem !important; }

/* === NAV === */
body nav#navbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; padding-top: 1rem !important; padding-bottom: 1rem !important; background: rgba(250,250,247,.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid transparent !important; transition: all .3s var(--ease) !important; margin: 0 !important; }
body nav#navbar.scrolled { border-bottom-color: var(--border) !important; box-shadow: var(--shadow-sm) !important; }
body nav#navbar > .container { display: flex !important; align-items: center !important; justify-content: space-between !important; }
body .nav-logo { font-family: var(--font-display) !important; font-size: 1.4rem !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: .4rem !important; }
body .nav-logo-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; background: var(--accent) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 1rem !important; font-weight: 800 !important; }
body .nav-links { display: flex !important; gap: 2rem !important; align-items: center !important; list-style: none !important; }
body .nav-links a { font-size: .9rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; }
body .nav-links a:hover { color: var(--text) !important; }
body a.nav-cta { padding: .6rem 1.4rem !important; background: var(--accent) !important; color: #fff !important; border-radius: 100px !important; font-weight: 700 !important; font-size: .88rem !important; box-shadow: 0 2px 8px rgba(232,106,51,.25) !important; }
body a.nav-cta:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 16px rgba(232,106,51,.35) !important; background: var(--accent-hover) !important; color: #fff !important; }
body .nav-toggle { display: none !important; background: none !important; border: none !important; cursor: pointer !important; padding: .5rem !important; }
body .nav-toggle span { display: block !important; width: 22px !important; height: 2px !important; background: var(--text) !important; margin-top: 5px !important; margin-bottom: 5px !important; border-radius: 2px !important; }

/* === HERO === */
body section.hero { min-height: 100vh !important; display: flex !important; align-items: center !important; position: relative !important; padding-top: 5rem !important; overflow: hidden !important; }
body .hero-bg-shape { position: absolute !important; border-radius: 50% !important; filter: blur(100px) !important; opacity: .4 !important; z-index: 0 !important; }
body .hero-bg-shape.s1 { width: 700px !important; height: 700px !important; background: rgba(232,106,51,.12) !important; top: -20% !important; right: -10% !important; }
body .hero-bg-shape.s2 { width: 700px !important; height: 700px !important; background: rgba(45,143,94,.08) !important; bottom: -30% !important; left: -15% !important; }
body section.hero > .container { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: 1.1fr .9fr !important; gap: 4rem !important; align-items: center !important; }
body .hero-content { max-width: 580px !important; }
body .hero-badge { display: inline-flex !important; align-items: center !important; gap: .5rem !important; padding: .45rem 1rem !important; background: var(--accent-light) !important; color: var(--accent) !important; border-radius: 100px !important; font-size: .82rem !important; font-weight: 700 !important; margin-bottom: 1.5rem !important; opacity: 0; animation: fadeUp .6s var(--ease) .2s forwards; }
body section.hero h1 { font-family: var(--font-display) !important; font-size: clamp(2.4rem,5vw,3.4rem) !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.02em !important; margin-bottom: 1.25rem !important; opacity: 0; animation: fadeUp .6s var(--ease) .35s forwards; }
body .hero h1 .highlight { color: var(--accent) !important; position: relative !important; }
body .hero h1 .highlight::after { content: '' !important; position: absolute !important; bottom: 2px !important; left: 0 !important; right: 0 !important; height: 6px !important; background: rgba(232,106,51,.2) !important; border-radius: 3px !important; z-index: -1 !important; margin: 0 !important; padding: 0 !important; }
body .hero-text { font-size: 1.12rem !important; color: var(--text-secondary) !important; line-height: 1.8 !important; margin-bottom: 2rem !important; opacity: 0; animation: fadeUp .6s var(--ease) .5s forwards; }
body .hero-actions { display: flex !important; gap: .75rem !important; flex-wrap: wrap !important; opacity: 0; animation: fadeUp .6s var(--ease) .65s forwards; }

/* === BUTTONS === */
body a.btn-primary, body button.btn-primary { display: inline-flex !important; align-items: center !important; gap: .5rem !important; padding: .9rem 1.8rem !important; background: var(--accent) !important; color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; border-radius: 100px !important; border: none !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(232,106,51,.3) !important; font-family: var(--font-body) !important; transition: all .25s var(--ease-spring) !important; }
body a.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(232,106,51,.35) !important; background: var(--accent-hover) !important; color: #fff !important; }
body a.btn-secondary { display: inline-flex !important; align-items: center !important; gap: .5rem !important; padding: .9rem 1.8rem !important; background: #fff !important; color: var(--text) !important; font-weight: 600 !important; font-size: 1rem !important; border-radius: 100px !important; border: 1.5px solid var(--border) !important; font-family: var(--font-body) !important; }
body a.btn-secondary:hover { border-color: var(--border-hover) !important; background: var(--bg-warm) !important; }

/* === HERO CARDS === */
body .hero-visual { position: relative !important; opacity: 0; animation: fadeUp .8s var(--ease) .5s forwards; }
body .hero-card-stack { position: relative !important; height: 420px !important; }
body .hero-float-card { position: absolute !important; background: #fff !important; border-radius: var(--radius) !important; border: 1.5px solid var(--border) !important; box-shadow: var(--shadow-md) !important; padding: 1.25rem 1.5rem !important; animation: float 6s ease-in-out infinite; }
body .hero-float-card.c1 { top: 0 !important; left: 10% !important; }
body .hero-float-card.c2 { top: 35% !important; right: 0 !important; animation-delay: -2s; }
body .hero-float-card.c3 { bottom: 5% !important; left: 5% !important; animation-delay: -4s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
body .float-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important; margin-bottom: .75rem !important; }
body .float-label { font-size: .78rem !important; color: var(--text-light) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: .2rem !important; }
body .float-value { font-family: var(--font-display) !important; font-size: 1.3rem !important; font-weight: 700 !important; }
body .float-bar { height: 6px !important; border-radius: 3px !important; background: var(--bg-warm) !important; margin-top: .75rem !important; overflow: hidden !important; }
body .float-bar-fill { height: 100% !important; border-radius: 3px !important; animation: fillBar 2s var(--ease) forwards; }
@keyframes fillBar { from{width:0} }
body .float-bar-fill.green { background: var(--green) !important; width: 72% !important; }
body .float-bar-fill.accent { background: var(--accent) !important; width: 85% !important; }
body .float-bar-fill.blue { background: var(--blue) !important; width: 60% !important; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* === TRUST BAR === */
body .trust-bar { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; border-bottom: 1px solid var(--border) !important; }
body .trust-inner { display: flex !important; align-items: center !important; justify-content: center !important; gap: 3rem !important; flex-wrap: wrap !important; }
body .trust-item { display: flex !important; align-items: center !important; gap: .6rem !important; font-size: .88rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; }
body .trust-check { width: 22px !important; height: 22px !important; min-width: 22px !important; background: var(--green-light) !important; color: var(--green) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: .7rem !important; font-weight: 800 !important; }

/* === SECTION HEADINGS === */
body .section-label { display: inline-flex !important; align-items: center !important; gap: .5rem !important; font-size: .82rem !important; font-weight: 700 !important; color: var(--accent) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin-bottom: .75rem !important; }
body .section-title { font-family: var(--font-display) !important; font-size: clamp(1.8rem,3.5vw,2.6rem) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; margin-bottom: .75rem !important; }
body p.section-desc { font-size: 1.05rem !important; color: var(--text-secondary) !important; line-height: 1.7 !important; max-width: 560px !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
   CASE STUDY — the main layout that was breaking
   ============================================================ */
body section.case-hero { background: var(--bg-warm) !important; }
body .case-study-inner { background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: 20px !important; padding: 2.5rem !important; box-shadow: var(--shadow-md) !important; position: relative !important; overflow: hidden !important; }
body .case-study-inner::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg,var(--accent),var(--green),var(--blue)) !important; border-radius: 20px 20px 0 0 !important; margin: 0 !important; padding: 0 !important; }
body .case-study-badge { display: inline-block !important; padding: .35rem .9rem !important; background: var(--accent-light) !important; color: var(--accent) !important; font-size: .78rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; border-radius: 100px !important; margin-bottom: 1.25rem !important; }

/* THIS IS THE KEY FIX — side-by-side grid */
body .case-study-grid {
  display: grid !important;
  grid-template-columns: 1fr 260px !important;
  gap: 2.5rem !important;
  align-items: start !important;
  width: 100% !important;
}
body .case-study-content { min-width: 0 !important; }
body .case-study-content h3 { font-family: var(--font-display) !important; font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1.3 !important; margin-bottom: 1rem !important; }
body .case-study-content > p { font-size: .95rem !important; color: var(--text-secondary) !important; line-height: 1.7 !important; margin-bottom: .75rem !important; }
body .case-initiatives { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; margin-top: 1.5rem !important; }
body .case-initiative { display: flex !important; flex-direction: row !important; gap: 1rem !important; align-items: flex-start !important; padding: 1.25rem !important; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; }
body .case-initiative:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; }
body .case-initiative-icon { flex-shrink: 0 !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important; }
body .case-initiative h4 { font-size: .95rem !important; font-weight: 700 !important; margin-bottom: .2rem !important; }
body .case-initiative p { font-size: .88rem !important; color: var(--text-secondary) !important; line-height: 1.6 !important; }

/* Stats sidebar */
body .case-study-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  position: sticky !important;
  top: 6rem !important;
  min-width: 260px !important;
  width: 260px !important;
}
body .case-stat { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; padding: 1.15rem !important; text-align: center !important; }
body .case-stat.highlight-stat { background: var(--accent) !important; border-color: var(--accent) !important; }
body .case-stat.highlight-stat .case-stat-number { color: #fff !important; font-size: 2.2rem !important; }
body .case-stat.highlight-stat .case-stat-label { color: rgba(255,255,255,.85) !important; }
body .case-stat-number { font-family: var(--font-display) !important; font-size: 1.6rem !important; font-weight: 800 !important; color: var(--accent) !important; line-height: 1.1 !important; margin-bottom: .2rem !important; }
body .case-stat:nth-child(2) .case-stat-number { color: var(--green) !important; }
body .case-stat:nth-child(3) .case-stat-number { color: var(--blue) !important; }
body .case-stat:nth-child(4) .case-stat-number { color: var(--purple) !important; }
body .case-stat:nth-child(5) .case-stat-number { color: var(--accent) !important; }
body .case-stat-label { font-size: .78rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
body .case-cta { margin-top: 2rem !important; padding-top: 2rem !important; border-top: 1px solid var(--border) !important; text-align: center !important; }
body .case-cta p { font-size: 1rem !important; color: var(--text-secondary) !important; line-height: 1.7 !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }

/* === WHY === */
body section.why-section { background: var(--bg-warm) !important; }
body .why-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem !important; align-items: center !important; margin-top: 3rem !important; }
body .why-points { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; }
body .why-point { display: flex !important; flex-direction: row !important; gap: 1rem !important; align-items: flex-start !important; }
body .why-point-icon { flex-shrink: 0 !important; width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.4rem !important; }
body .why-point h3 { font-family: var(--font-display) !important; font-size: 1.15rem !important; font-weight: 700 !important; margin-bottom: .25rem !important; }
body .why-point p { font-size: .95rem !important; color: var(--text-secondary) !important; line-height: 1.7 !important; }

/* === SERVICES === */
body .services-grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 1.5rem !important; margin-top: 3rem !important; }
body .service-card { background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius) !important; padding: 2rem !important; transition: all .3s var(--ease) !important; }
body .service-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--border-hover) !important; }
body .service-emoji { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.6rem !important; margin-bottom: 1.25rem !important; }
body .service-card:nth-child(1) .service-emoji { background: var(--accent-light) !important; }
body .service-card:nth-child(2) .service-emoji { background: var(--blue-light) !important; }
body .service-card:nth-child(3) .service-emoji { background: var(--green-light) !important; }
body .service-card:nth-child(4) .service-emoji { background: var(--purple-light) !important; }
body .service-card h3 { font-family: var(--font-display) !important; font-size: 1.3rem !important; font-weight: 700 !important; margin-bottom: .5rem !important; }
body .service-card p { font-size: .95rem !important; color: var(--text-secondary) !important; line-height: 1.7 !important; margin-bottom: 1.25rem !important; }
body .service-includes { display: flex !important; flex-direction: column !important; gap: .4rem !important; }
body .service-includes span { display: flex !important; align-items: center !important; gap: .5rem !important; font-size: .88rem !important; color: var(--text-secondary) !important; font-weight: 500 !important; }
body .service-includes .check { color: var(--green) !important; font-weight: 800 !important; font-size: .85rem !important; }

/* === STEPS === */
body section.how-section { background: var(--bg-warm) !important; }
body .steps-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1.5rem !important; margin-top: 3rem !important; }
body .step-card { text-align: center !important; padding: 2rem 1.25rem !important; background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius) !important; position: relative !important; }
body .step-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important; }
body .step-num { font-family: var(--font-display) !important; font-size: 2.5rem !important; font-weight: 800 !important; color: var(--accent) !important; opacity: .25 !important; line-height: 1 !important; margin-bottom: .75rem !important; }
body .step-icon { font-size: 2rem !important; margin-bottom: .75rem !important; }
body .step-card h3 { font-family: var(--font-display) !important; font-size: 1.15rem !important; font-weight: 700 !important; margin-bottom: .5rem !important; }
body .step-card p { font-size: .9rem !important; color: var(--text-secondary) !important; line-height: 1.65 !important; }
body .step-arrow { position: absolute !important; right: -20px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--border-hover) !important; font-size: 1.2rem !important; z-index: 2 !important; }

/* === RESULTS === */
body .results-strip { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1.5rem !important; margin-top: 3rem !important; }
body .result-box { background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius) !important; padding: 2rem !important; text-align: center !important; }
body .result-box:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }
body .result-big { font-family: var(--font-display) !important; font-size: 3rem !important; font-weight: 800 !important; line-height: 1 !important; margin-bottom: .35rem !important; }
body .result-box:nth-child(1) .result-big { color: var(--accent) !important; }
body .result-box:nth-child(2) .result-big { color: var(--green) !important; }
body .result-box:nth-child(3) .result-big { color: var(--blue) !important; }
body .result-name { font-weight: 700 !important; font-size: 1rem !important; margin-bottom: .35rem !important; }
body .result-explain { font-size: .88rem !important; color: var(--text-secondary) !important; line-height: 1.6 !important; }

/* === DELIVERABLES === */
body section.deliverables { background: var(--bg-warm) !important; }
body .del-grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 1rem !important; margin-top: 3rem !important; }
body .del-item { display: flex !important; flex-direction: row !important; gap: 1rem !important; padding: 1.25rem 1.5rem !important; background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius-sm) !important; align-items: flex-start !important; }
body .del-item:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-sm) !important; }
body .del-icon { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 10px !important; background: var(--accent-light) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; }
body .del-item h4 { font-size: .95rem !important; font-weight: 700 !important; margin-bottom: .15rem !important; }
body .del-item p { font-size: .85rem !important; color: var(--text-secondary) !important; line-height: 1.6 !important; }

/* === AI PROOF === */
body section.ai-proof-section { background: var(--bg-dark) !important; color: #fff !important; text-align: center !important; }
body .ai-proof-section .section-label { color: rgba(232,106,51,.9) !important; }
body .ai-proof-section .section-title { color: #fff !important; }
body .ai-proof-section .section-desc { color: rgba(255,255,255,.75) !important; max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
body .ai-proof-section a.btn-primary { margin-top: 2rem !important; }

/* === CTA === */
body section.cta-section { text-align: center !important; }
body .cta-box { background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: 24px !important; padding: 4rem 2rem !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; box-shadow: var(--shadow-md) !important; }
body .cta-box .section-desc { margin-left: auto !important; margin-right: auto !important; margin-bottom: 2rem !important; text-align: center !important; }
body .cta-actions { display: flex !important; justify-content: center !important; gap: .75rem !important; flex-wrap: wrap !important; }
body .cta-note { margin-top: 1rem !important; font-size: .82rem !important; color: var(--text-light) !important; }

/* === FOOTER === */
body footer { padding-top: 3rem !important; padding-bottom: 1.5rem !important; border-top: 1px solid var(--border) !important; }
body .footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr !important; gap: 2.5rem !important; margin-bottom: 2.5rem !important; }
body .footer-brand p { font-size: .88rem !important; color: var(--text-secondary) !important; margin-top: .75rem !important; max-width: 280px !important; line-height: 1.6 !important; }
body .footer-col h4 { font-size: .78rem !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--text-light) !important; font-weight: 700 !important; margin-bottom: .75rem !important; }
body .footer-col a { display: block !important; font-size: .9rem !important; color: var(--text-secondary) !important; padding-top: .3rem !important; padding-bottom: .3rem !important; }
body .footer-col a:hover { color: var(--text) !important; }
body .footer-bottom { border-top: 1px solid var(--border) !important; padding-top: 1.5rem !important; display: flex !important; justify-content: space-between !important; font-size: .8rem !important; color: var(--text-light) !important; }

/* === ABOUT PAGE === */
body section.about-hero { padding-top: 10rem !important; }
body .about-story-grid { display: grid !important; grid-template-columns: 1.2fr .8fr !important; gap: 3.5rem !important; align-items: start !important; }
body .about-story-content .section-desc { text-align: left !important; margin-left: 0 !important; }
body .about-body-text { font-size: .95rem !important; color: var(--text-secondary) !important; line-height: 1.8 !important; margin-top: 1rem !important; }
body .about-story-visual { display: flex !important; flex-direction: column !important; gap: 0 !important; position: sticky !important; top: 6rem !important; padding-left: 2rem !important; border-left: 3px solid var(--border) !important; }
body .about-milestone { padding: 1.25rem 0 !important; padding-left: 1.5rem !important; position: relative !important; }
body .about-milestone::before { content: '' !important; position: absolute !important; left: -9px !important; top: 1.6rem !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: var(--accent) !important; border: 3px solid var(--bg-warm) !important; margin: 0 !important; padding: 0 !important; }
body .about-milestone-year { font-family: var(--font-display) !important; font-size: 1.1rem !important; font-weight: 800 !important; color: var(--accent) !important; margin-bottom: .25rem !important; }
body .about-milestone-text { font-size: .88rem !important; color: var(--text-secondary) !important; line-height: 1.6 !important; }

body .values-grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 1.5rem !important; margin-top: 3rem !important; }
body .value-card { background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius) !important; padding: 2rem !important; transition: all .3s var(--ease) !important; }
body .value-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--border-hover) !important; }
body .value-icon { width: 52px !important; height: 52px !important; min-width: 52px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5rem !important; margin-bottom: 1.25rem !important; }
body .value-card h3 { font-family: var(--font-display) !important; font-size: 1.2rem !important; font-weight: 700 !important; margin-bottom: .5rem !important; }
body .value-card p { font-size: .92rem !important; color: var(--text-secondary) !important; line-height: 1.7 !important; }

body .about-stats-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1.25rem !important; margin-top: 3rem !important; }
body .about-stat-card { background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius) !important; padding: 2rem !important; text-align: center !important; transition: all .3s !important; }
body .about-stat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }
body .about-stat-num { font-family: var(--font-display) !important; font-size: 2.4rem !important; font-weight: 800 !important; line-height: 1 !important; margin-bottom: .4rem !important; }
body .about-stat-desc { font-size: .85rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; }

@media (max-width: 1024px) {
  body .about-story-grid { grid-template-columns: 1fr !important; }
  body .about-story-visual { position: static !important; }
  body .values-grid { grid-template-columns: 1fr !important; }
  body .about-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
  body section.about-hero { padding-top: 8rem !important; }
  body .about-stats-grid { grid-template-columns: 1fr !important; }
}

/* === AI TOOLS PREVIEW GRID === */
body .tools-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:1.25rem!important}
body .tool-preview-card{display:flex!important;flex-direction:column!important;background:#fff!important;border:1.5px solid var(--border)!important;border-radius:var(--radius)!important;padding:1.75rem!important;transition:all .3s var(--ease)!important;cursor:pointer!important;text-decoration:none!important;color:var(--text)!important}
body .tool-preview-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-lg)!important;border-color:var(--accent)!important}
body .tool-preview-icon{width:52px!important;height:52px!important;min-width:52px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:1.5rem!important;margin-bottom:1rem!important}
body .tool-preview-icon span{font-size:1.5rem!important}
body .tool-preview-tag{display:inline-block!important;padding:.25rem .65rem!important;font-size:.7rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;border-radius:100px!important;margin-bottom:.75rem!important;width:fit-content!important}
body .tool-preview-card h3{font-family:var(--font-display)!important;font-size:1.15rem!important;font-weight:700!important;margin-bottom:.4rem!important;text-align:left!important}
body .tool-preview-card p{font-size:.88rem!important;color:var(--text-secondary)!important;line-height:1.6!important;text-align:left!important;margin-left:0!important;max-width:100%!important;flex-grow:1!important}
body .tool-preview-cta{display:inline-flex!important;align-items:center!important;gap:.3rem!important;font-size:.88rem!important;font-weight:700!important;color:var(--accent)!important;margin-top:1rem!important}
body .tool-preview-card:hover .tool-preview-cta{text-decoration:underline!important}
@media(max-width:1024px){body .tools-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:768px){body .tools-grid{grid-template-columns:1fr!important}}

/* === AI TOOLS CATALOG === */
body .tool-card{background:#fff!important;border:1.5px solid var(--border)!important;border-radius:20px!important;overflow:hidden!important;box-shadow:var(--shadow-md)!important;transition:all .3s var(--ease)!important}
body .tool-card:hover{box-shadow:var(--shadow-lg)!important}
body .tool-card-header{display:flex!important;flex-direction:row!important;align-items:center!important;gap:1.25rem!important;padding:2rem 2.5rem!important;border-bottom:1px solid var(--border)!important;background:var(--bg)!important}
body .tool-card-icon{width:64px!important;height:64px!important;min-width:64px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}
body .tool-card-tag{display:inline-block!important;padding:.25rem .7rem!important;font-size:.72rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;border-radius:100px!important;margin-bottom:.4rem!important;width:fit-content!important}
body .tool-card-header-text h3{font-family:var(--font-display)!important;font-size:1.5rem!important;font-weight:800!important;margin-bottom:.25rem!important;text-align:left!important}
body .tool-card-tagline{font-size:.95rem!important;color:var(--text-secondary)!important;font-weight:500!important;text-align:left!important;margin-left:0!important;max-width:100%!important}
body .tool-card-body{display:grid!important;grid-template-columns:1fr 280px!important;gap:2.5rem!important;padding:2.5rem!important;align-items:start!important}
body .tool-card-content{min-width:0!important}
body .tool-card-content h4{font-family:var(--font-display)!important;font-size:1.1rem!important;font-weight:700!important;margin-bottom:.5rem!important;margin-top:1.5rem!important;text-align:left!important;color:var(--text)!important}
body .tool-card-content h4:first-child{margin-top:0!important}
body .tool-card-content p{font-size:.92rem!important;color:var(--text-secondary)!important;line-height:1.7!important;margin-bottom:.5rem!important;text-align:left!important;margin-left:0!important;max-width:100%!important}
body .tool-deliverables{display:flex!important;flex-direction:column!important;gap:.4rem!important;margin-top:.75rem!important;margin-bottom:.5rem!important}
body .tool-deliverables span{display:flex!important;align-items:flex-start!important;gap:.5rem!important;font-size:.88rem!important;color:var(--text-secondary)!important;font-weight:500!important;line-height:1.5!important}
body .tool-deliverables .check{color:var(--green)!important;font-weight:800!important;font-size:.85rem!important;flex-shrink:0!important;margin-top:.15rem!important}
body .tool-card-sidebar{display:flex!important;flex-direction:column!important;gap:.75rem!important;position:sticky!important;top:6rem!important;min-width:280px!important}
body .tool-stat-box{background:var(--bg)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;padding:1.15rem!important;text-align:center!important}
body .tool-stat-label{font-size:.72rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--text-light)!important;margin-bottom:.2rem!important}
body .tool-stat-value{font-family:var(--font-display)!important;font-size:1.6rem!important;font-weight:800!important;line-height:1.1!important;margin-bottom:.15rem!important}
body .tool-stat-desc{font-size:.78rem!important;color:var(--text-secondary)!important;font-weight:500!important}
@media(max-width:1024px){body .tool-card-body{grid-template-columns:1fr!important}body .tool-card-sidebar{position:static!important;min-width:0!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important}body .tool-card-sidebar a.btn-primary{grid-column:1/-1!important}}
@media(max-width:768px){body .tool-card-header{flex-direction:column!important;align-items:flex-start!important;padding:1.5rem!important}body .tool-card-body{padding:1.5rem!important}body .tool-card-sidebar{grid-template-columns:1fr!important}}

/* === COACHING PAGE === */
body .coaching-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:1.5rem!important;align-items:start!important}
body .coaching-card{background:#fff!important;border:1.5px solid var(--border)!important;border-radius:var(--radius)!important;padding:2rem!important;position:relative!important;transition:all .3s var(--ease)!important;display:flex!important;flex-direction:column!important}
body .coaching-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-lg)!important}
body .coaching-card.featured{border-color:var(--accent)!important;box-shadow:0 4px 24px rgba(232,106,51,.15)!important}
body .coaching-tag{display:inline-block!important;padding:.3rem .75rem!important;font-size:.72rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;border-radius:100px!important;margin-bottom:1.25rem!important;width:fit-content!important}
body .coaching-icon{width:56px!important;height:56px!important;min-width:56px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:1.6rem!important;margin-bottom:1.25rem!important}
body .coaching-card h3{font-family:var(--font-display)!important;font-size:1.35rem!important;font-weight:800!important;margin-bottom:.35rem!important;text-align:left!important}
body .coaching-subtitle{font-size:.92rem!important;font-weight:600!important;color:var(--accent)!important;margin-bottom:.75rem!important;text-align:left!important;margin-left:0!important;max-width:100%!important}
body .coaching-desc{font-size:.9rem!important;color:var(--text-secondary)!important;line-height:1.7!important;margin-bottom:1.25rem!important;text-align:left!important;margin-left:0!important;max-width:100%!important}
body .coaching-includes{display:flex!important;flex-direction:column!important;gap:.4rem!important;margin-bottom:1.25rem!important}
body .coaching-include-label{font-size:.78rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--text-light)!important;margin-bottom:.25rem!important}
body .coaching-includes span{display:flex!important;align-items:flex-start!important;gap:.5rem!important;font-size:.85rem!important;color:var(--text-secondary)!important;font-weight:500!important;line-height:1.5!important}
body .coaching-includes .check{color:var(--green)!important;font-weight:800!important;font-size:.85rem!important;flex-shrink:0!important;margin-top:.1rem!important}
body .coaching-details{display:flex!important;flex-direction:column!important;gap:.35rem!important;padding-top:1.25rem!important;border-top:1px solid var(--border)!important;margin-top:auto!important}
body .coaching-details span{font-size:.82rem!important;color:var(--text-secondary)!important;font-weight:600!important}
@media(max-width:1024px){body .coaching-grid{grid-template-columns:1fr!important}}

/* === ANIMATIONS === */
.reveal { opacity: 0; transform: translateY(30px); transition: all .7s var(--ease); }
.reveal.visible { opacity: 1 !important; transform: translateY(0) !important; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  body section.hero > .container { grid-template-columns: 1fr !important; }
  body .hero-visual { display: none !important; }
  body .why-grid { grid-template-columns: 1fr !important; }
  body .services-grid { grid-template-columns: 1fr !important; }
  body .steps-grid { grid-template-columns: repeat(2,1fr) !important; }
  body .step-arrow { display: none !important; }
  body .footer-grid { grid-template-columns: 1fr 1fr !important; }
  body .case-study-grid { grid-template-columns: 1fr !important; }
  body .case-study-stats { display: grid !important; grid-template-columns: repeat(3,1fr) !important; position: static !important; width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 768px) {
  body .section-pad { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  body .nav-links { display: none !important; }
  body .nav-toggle { display: block !important; }
  body nav#navbar.open .nav-links {
    display: flex !important; flex-direction: column !important; position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    background: rgba(250,250,247,.98) !important; backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important; padding: 1.5rem !important;
    border-bottom: 1px solid var(--border) !important; gap: 1rem !important;
  }
  body .steps-grid { grid-template-columns: 1fr !important; }
  body .results-strip { grid-template-columns: 1fr !important; }
  body .del-grid { grid-template-columns: 1fr !important; }
  body .trust-inner { gap: 1.5rem !important; }
  body .footer-grid { grid-template-columns: 1fr !important; }
  body .footer-bottom { flex-direction: column !important; gap: .5rem !important; text-align: center !important; }
  body .cta-box { padding: 3rem 1.5rem !important; }
  body .case-study-inner { padding: 1.5rem !important; }
  body .case-study-stats { grid-template-columns: repeat(2,1fr) !important; }
  body .case-study-content h3 { font-size: 1.3rem !important; }
}
