/*
Theme Name: ExpeIT Theme
Theme URI: https://expeit.com
Author: ExpeIT Ltd
Author URI: https://expeit.com
Description: A professional dark-mode corporate theme for ExpeIT — AI-forward, modern, trustworthy.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: expeit-theme
Tags: corporate, business, it-services, responsive, dark, ai, professional
*/

/* ============================================================
   DESIGN TOKENS — Claude-inspired dark palette
   ============================================================ */
:root {
  /* Core dark palette */
  --bg-base:        #1a1a2e;   /* deep navy-dark */
  --bg-surface:     #16213e;   /* slightly lighter panel */
  --bg-elevated:    #0f3460;   /* elevated card */
  --bg-card:        #1e2a45;   /* standard card bg */
  --bg-input:       #162038;   /* form inputs */

  /* Accent — warm Claude-style coral/amber */
  --accent:         #e8896a;   /* Claude coral */
  --accent-light:   #f0a882;
  --accent-dark:    #c96b48;
  --accent-2:       #7c6af5;   /* secondary purple */
  --accent-2-light: #9d8ff7;

  /* Text */
  --text-primary:   #f0ede8;   /* warm off-white */
  --text-secondary: #b8b2a8;   /* muted warm gray */
  --text-muted:     #7a7570;
  --text-inverse:   #1a1a2e;

  /* Borders */
  --border:         rgba(255,255,255,.08);
  --border-accent:  rgba(232,137,106,.25);

  /* Gradients */
  --grad-hero:      linear-gradient(135deg, #0d1b2a 0%, #1a1a2e 40%, #0f3460 100%);
  --grad-accent:    linear-gradient(135deg, #e8896a 0%, #c96b48 100%);
  --grad-purple:    linear-gradient(135deg, #7c6af5 0%, #5a4ed4 100%);
  --grad-card:      linear-gradient(145deg, #1e2a45 0%, #162038 100%);

  /* Shadows */
  --shadow-sm:      0 1px 4px rgba(0,0,0,.4);
  --shadow-md:      0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:      0 16px 64px rgba(0,0,0,.6);
  --shadow-accent:  0 8px 32px rgba(232,137,106,.2);
  --shadow-glow:    0 0 40px rgba(232,137,106,.15);

  /* Layout */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --max-w: 1200px;
  --section-py: 96px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-light); }
ul { list-style: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.25rem,5vw,3.75rem); }
h2 { font-size: clamp(1.75rem,3.5vw,2.625rem); }
h3 { font-size: clamp(1.2rem,2.5vw,1.625rem); }
h4 { font-size: 1.125rem; }
p  { color: var(--text-secondary); margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text-primary); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section    { padding: var(--section-py) 0; }
.section--surface  { background: var(--bg-surface); }
.section--elevated { background: var(--bg-elevated); }
.section--card     { background: var(--bg-card); }
.text-center  { text-align: center; }
.text-center .section-subtitle { margin-left:auto; margin-right:auto; }

.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}
.section-title   { margin-bottom: 1rem; }
.section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 3rem;
  line-height: 1.8;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.875rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition);
}
.btn:hover::after { background: rgba(255,255,255,.06); }

.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(232,137,106,.35); color:#fff; }

.btn-secondary {
  background: rgba(255,255,255,.06);
  color: var(--text-primary);
  border-color: var(--border);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-accent);
  padding: .625rem 1.375rem;
}
.btn-ghost:hover { background: rgba(232,137,106,.1); color: var(--accent-light); }

.btn-sm  { padding: .625rem 1.25rem; font-size: .875rem; }
.btn-lg  { padding: 1.125rem 2.375rem; font-size: 1.0625rem; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
}
.card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: translateY(-4px);
}
.card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: rgba(232,137,106,.12);
  border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--accent);
}

/* ============================================================
   BADGE / TAG
   ============================================================ */
.badge {
  display: inline-block;
  padding: .3rem .875rem;
  background: rgba(232,137,106,.12);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.badge-purple {
  background: rgba(124,106,245,.12);
  border-color: rgba(124,106,245,.25);
  color: var(--accent-2-light);
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--accent); color: #fff;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  z-index: 9999; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: all var(--transition);
}
#site-header.transparent { background: transparent; }
#site-header.scrolled {
  background: rgba(22,33,62,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 1.5rem;
}

/* Logo */
.nav-logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.nav-logo-mark {
  width: 38px; height: 38px;
  background: var(--grad-accent);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: .9rem; letter-spacing: -.05em;
  box-shadow: var(--shadow-accent);
}
.nav-logo-text { font-size: 1.375rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.04em; }
.nav-logo-text span { color: var(--accent); }

/* Nav items */
.nav-links { display: flex; align-items: center; gap: .25rem; }

.nav-item { position: relative; }

.nav-link {
  display: flex; align-items: center; gap: .3rem;
  color: var(--text-secondary);
  font-weight: 500; font-size: .9rem;
  padding: .5rem .875rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--text-primary); background: rgba(255,255,255,.06); }
.nav-link svg.chevron { width:14px; height:14px; transition: transform var(--transition); }
.nav-item:hover .nav-link svg.chevron { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  background: rgba(22,33,62,.98);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  padding-top: calc(1rem + 8px); /* invisible 8px hover bridge at the top */
  min-width: 260px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all var(--transition);
  pointer-events: none;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all;
}

/* Wide dropdown (mega) */
.nav-dropdown--wide { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }

.dropdown-item {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: .875rem;
  transition: all var(--transition);
}
.dropdown-item:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.dropdown-item-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(232,137,106,.1); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: .9rem;
  transition: background var(--transition);
}
.dropdown-item:hover .dropdown-item-icon { background: rgba(232,137,106,.2); }
.dropdown-item-title { font-weight: 600; color: var(--text-primary); margin-bottom: .15rem; font-size: .875rem; }
.dropdown-item-desc  { font-size: .775rem; color: var(--text-muted); line-height: 1.4; }
.dropdown-divider { border-top: 1px solid var(--border); margin: .5rem 0; grid-column: 1/-1; }
.dropdown-footer {
  grid-column: 1/-1;
  padding: .75rem 1rem;
  background: rgba(232,137,106,.06);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border-accent);
  margin-top: .25rem;
}
.dropdown-footer-text { font-size: .8rem; color: var(--text-secondary); }
.dropdown-footer-text strong { color: var(--accent); }

/* Nav right */
.nav-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: all var(--transition);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
  background: var(--grad-hero);
}

.hero-media {
  position: absolute; inset: 0; z-index: 0;
}
.hero-video { width:100%; height:100%; object-fit:cover; opacity:.18; }
.hero-img   { width:100%; height:100%; object-fit:cover; opacity:.18; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(13,27,42,.96) 0%,rgba(26,26,46,.88) 50%,rgba(15,52,96,.7) 100%);
}

/* Animated mesh background */
.hero-mesh {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(232,137,106,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(124,106,245,.07) 0%, transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
}

/* Glowing orbs */
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none;
}
.hero-orb-1 { width:500px; height:500px; background:var(--accent-dark); top:-10%; left:-10%; }
.hero-orb-2 { width:400px; height:400px; background:var(--accent-2); bottom:-5%; right:5%; }

.hero-content { position:relative; z-index:1; padding:130px 0 90px; max-width:760px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(232,137,106,.1);
  border: 1px solid var(--border-accent);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  padding: .4rem 1rem .4rem .625rem;
  color: var(--text-secondary);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 1.75rem;
}
.hero-badge-pill {
  background: var(--grad-accent);
  color: #fff; border-radius: var(--radius-full);
  padding: .15rem .625rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.hero-title { color: var(--text-primary); margin-bottom: 1.5rem; }
.hero-title em {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.1875rem; color: var(--text-secondary);
  margin-bottom: 2.5rem; max-width: 540px; line-height: 1.8;
}

.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.5rem; }

.hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.hero-stat-num { font-size:2.125rem; font-weight:800; color:var(--text-primary); line-height:1; }
.hero-stat-num span { color:var(--accent); }
.hero-stat-label { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; letter-spacing:.03em; }

/* Floating side card */
.hero-side {
  position:absolute; right:4%; top:50%; transform:translateY(-50%);
  z-index:1; width:300px;
  background:rgba(22,33,62,.7);
  backdrop-filter:blur(24px);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:1.75rem;
  animation: heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100%{transform:translateY(-50%) translateY(0)}
  50%{transform:translateY(-50%) translateY(-14px)}
}
.hero-side-title { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1rem; }
.hero-side-item {
  display:flex; align-items:center; gap:.875rem;
  padding:.7rem 0; border-bottom:1px solid var(--border);
  color:var(--text-secondary); font-size:.875rem;
}
.hero-side-item:last-child{border:none;}
.hero-side-icon {
  width:32px; height:32px; border-radius:var(--radius-sm); flex-shrink:0;
  background:rgba(232,137,106,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent); font-size:.85rem;
}
.hero-side-check { color:var(--accent); margin-left:auto; font-size:.8rem; }

/* Scroll indicator */
.scroll-cue {
  position:absolute; bottom:2.25rem; left:50%; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--text-muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.scroll-cue-line {
  width:1px; height:44px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim{
  0%{transform:scaleY(0);transform-origin:top;opacity:1}
  50%{transform:scaleY(1);transform-origin:top;opacity:1}
  51%{transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}

/* ============================================================
   LOGO BAR
   ============================================================ */
.logobar {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.logobar-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.logobar-label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); flex-shrink:0; }
.logobar-logos { display:flex; align-items:center; gap:3rem; flex-wrap:wrap; }
.logobar-logo { font-weight:700; font-size:.9375rem; color:var(--text-muted); letter-spacing:-.01em; transition:color var(--transition); }
.logobar-logo:hover { color:var(--text-secondary); }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.service-tile {
  background:var(--bg-card);
  padding:2.25rem;
  transition:all var(--transition);
  position:relative;
}
.service-tile::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--grad-accent); transform:scaleX(0); transition:transform var(--transition);
}
.service-tile:hover { background:var(--bg-elevated); }
.service-tile:hover::after { transform:scaleX(1); }
.service-tile-icon { font-size:2rem; margin-bottom:1.25rem; }
.service-tile h3 { font-size:1.125rem; margin-bottom:.75rem; }
.service-tile p   { font-size:.9rem; margin-bottom:1.25rem; }
.service-tile-link {
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:.875rem; font-weight:600; color:var(--accent);
}
.service-tile-link svg { transition:transform var(--transition); }
.service-tile-link:hover svg { transform:translateX(4px); }

/* ============================================================
   STATS BAR
   ============================================================ */
.statsbar {
  padding:72px 0;
  background:linear-gradient(135deg,var(--bg-elevated) 0%,var(--bg-card) 100%);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.statsbar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-num {
  font-size:3rem; font-weight:900; line-height:1; margin-bottom:.5rem;
  background:var(--grad-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:.9rem; color:var(--text-secondary); }
.stat-sep { width:1px; background:var(--border); align-self:stretch; }

/* ============================================================
   FEATURE / WHY SECTION
   ============================================================ */
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.feature-visual {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border);
}
.feature-img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.feature-img-placeholder {
  width:100%; aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--bg-elevated),var(--bg-card));
  display:flex; align-items:center; justify-content:center;
}
.feature-badge-overlay {
  position:absolute; bottom:1.5rem; left:1.5rem;
  background:rgba(22,33,62,.9); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:.875rem 1.25rem; display:flex; align-items:center; gap:.75rem;
}
.feature-badge-icon { width:36px; height:36px; background:var(--grad-accent); border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; color:#fff; font-size:1rem; flex-shrink:0; }
.fbo-label { font-size:.7rem; color:var(--text-muted); }
.fbo-value { font-size:1.125rem; font-weight:800; color:var(--text-primary); }

.feature-list { display:flex; flex-direction:column; gap:1.125rem; margin-top:2rem; }
.feature-item { display:flex; gap:1rem; }
.feature-item-icon { width:34px; height:34px; border-radius:50%; background:rgba(232,137,106,.12); border:1px solid var(--border-accent); display:flex;align-items:center;justify-content:center; color:var(--accent); flex-shrink:0; margin-top:.1rem; }
.feature-item-title { font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:.25rem; }
.feature-item-text  { font-size:.9rem; color:var(--text-secondary); margin:0; }

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border); max-width:900px; margin:3rem auto 0;
}
.video-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; }
.video-thumb-placeholder { width:100%; aspect-ratio:16/9; background:var(--grad-hero); display:flex;align-items:center;justify-content:center; }
.video-play-btn {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); transition:background var(--transition); cursor:pointer;
}
.video-play-btn:hover { background:rgba(0,0,0,.5); }
.video-play-circle {
  width:72px; height:72px; border-radius:50%;
  background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-accent);
  transition:transform var(--transition);
}
.video-play-btn:hover .video-play-circle { transform:scale(1.1); }

/* ============================================================
   CLIENTS / PARTNERS
   ============================================================ */
.clients-wrap {
  display:grid; grid-template-columns:repeat(5,1fr);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
}
.client-tile {
  padding:2.5rem 1.5rem; display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:1px solid var(--border);
  transition:all var(--transition);
}
.client-tile:hover { background:var(--bg-elevated); border-color:var(--border-accent); }
.client-name { font-weight:700; font-size:1rem; color:var(--text-muted); text-align:center; transition:color var(--transition); }
.client-tile:hover .client-name { color:var(--text-primary); }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; }
.testimonial-stars { color:var(--accent); font-size:1rem; margin-bottom:1rem; letter-spacing:.1rem; }
.testimonial-text { font-size:.9375rem; color:var(--text-secondary); font-style:italic; margin-bottom:1.5rem; line-height:1.8; }
.testimonial-author { display:flex; align-items:center; gap:.875rem; }
.testimonial-avatar { width:40px;height:40px; border-radius:50%; background:var(--grad-accent); display:flex;align-items:center;justify-content:center; font-weight:700; color:#fff; font-size:.875rem; flex-shrink:0; }
.testimonial-name   { font-size:.9rem; font-weight:700; color:var(--text-primary); }
.testimonial-role   { font-size:.8rem; color:var(--text-muted); }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  position:relative; overflow:hidden;
  padding:96px 0; text-align:center;
  background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-card) 100%);
  border-top:1px solid var(--border);
}
.cta-section::before {
  content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(232,137,106,.08) 0%,transparent 70%);
  pointer-events:none;
}
.cta-content { position:relative; z-index:1; }
.cta-section h2 { margin-bottom:1rem; }
.cta-section p  { max-width:580px; margin:0 auto 2.5rem; font-size:1.0625rem; }
.cta-actions    { display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  position:relative; overflow:hidden;
  padding:140px 0 80px;
  background:linear-gradient(135deg,var(--bg-base) 0%,var(--bg-surface) 50%,var(--bg-elevated) 100%);
  border-bottom:1px solid var(--border);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse 70% 60% at 10% 50%,rgba(232,137,106,.06) 0%,transparent 60%),
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:100%,64px 64px,64px 64px;
}
.page-hero-content { position:relative; z-index:1; }
.page-hero h1     { margin-bottom:1rem; }
.page-hero p      { color:var(--text-secondary); font-size:1.125rem; max-width:600px; margin:0; }

.breadcrumb { display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.875rem;margin-bottom:1rem; }
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb-sep { color:var(--text-muted); }

/* ============================================================
   HERO WITH IMAGE (page hero variant)
   ============================================================ */
.page-hero-img {
  position:absolute; right:0; top:0; bottom:0; width:45%;
  object-fit:cover; opacity:.15;
  mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.8) 100%);
  -webkit-mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.8) 100%);
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.blog-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition);
}
.blog-card:hover { border-color:var(--border-accent); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; }
.blog-thumb-placeholder { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,var(--bg-elevated),var(--bg-surface)); display:flex;align-items:center;justify-content:center; }
.blog-body  { padding:1.5rem; }
.blog-cat   { font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.625rem; }
.blog-title { font-size:1.0625rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem;line-height:1.35; }
.blog-title a { color:inherit; }
.blog-title a:hover { color:var(--accent); }
.blog-excerpt { font-size:.875rem;color:var(--text-secondary);line-height:1.7;margin:0; }
.blog-read-more { display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--accent);margin-top:1rem; }

/* Blog sidebar */
.blog-layout    { display:grid; grid-template-columns:1fr 300px; gap:3rem; align-items:start; }
.blog-sidebar   { }
.sidebar-widget { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem; }
.sidebar-widget h4 { font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem; }
.sidebar-link { display:block;padding:.5rem 0;color:var(--text-secondary);font-size:.9rem;border-bottom:1px solid var(--border);transition:color var(--transition); }
.sidebar-link:hover { color:var(--accent); }
.sidebar-link:last-child { border:none; }

/* Single post */
.post-hero { padding:140px 0 60px; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.post-content { max-width:760px; margin:0 auto; padding:3rem 0; }
.post-content h2,.post-content h3 { margin:2rem 0 1rem; }
.post-content p  { margin-bottom:1.5rem; }
.post-content ul { margin:1rem 0 1.5rem 1.5rem; list-style:disc; }
.post-content ul li { color:var(--text-secondary); margin-bottom:.5rem; }
.post-content blockquote { border-left:3px solid var(--accent); padding:.75rem 1.5rem; background:rgba(232,137,106,.06); border-radius:0 var(--radius-md) var(--radius-md) 0; margin:1.5rem 0; }
.post-content blockquote p { color:var(--text-secondary); font-style:italic; margin:0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.practice-grid { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; margin-top:1.5rem; }
.practice-item { display:flex;align-items:center;gap:.625rem;font-size:.9rem;color:var(--text-secondary); }
.practice-dot  { width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0; }
.values-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.value-icon    { font-size:1.75rem; margin-bottom:1rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:56px; align-items:start; }
.contact-info-card {
  background:linear-gradient(135deg,var(--bg-elevated),var(--bg-card));
  border:1px solid var(--border); border-radius:var(--radius-xl); padding:3rem;
}
.contact-info-card h2 { margin-bottom:.75rem; }
.contact-detail { display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--border); }
.contact-detail:last-of-type{border:none;}
.contact-detail-icon { width:38px;height:38px;background:rgba(232,137,106,.12);border:1px solid var(--border-accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent); }
.contact-detail-label { font-size:.75rem;color:var(--text-muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem; }
.contact-detail-value { color:var(--text-primary);font-size:.9375rem;margin:0; }
.contact-form-wrap { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:3rem; }
.form-group { margin-bottom:1.5rem; }
.form-label { display:block;font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem;letter-spacing:.02em; }
.form-control {
  width:100%; padding:.875rem 1rem;
  background:var(--bg-input); border:1.5px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-primary);
  font-family:var(--font-sans); font-size:.9375rem; outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,137,106,.12); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:140px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }

/* ============================================================
   CAREERS
   ============================================================ */
.perks-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.perk-card  { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem; }
.perk-icon  { font-size:1.75rem; margin-bottom:.75rem; }
.perk-card h4 { font-size:1rem;margin-bottom:.375rem; }
.perk-card p  { font-size:.875rem;margin:0; }
.job-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.875rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.25rem;transition:all var(--transition); }
.job-card:hover { border-color:var(--border-accent);transform:translateX(4px);box-shadow:var(--shadow-md); }
.job-title { font-size:1.0625rem;font-weight:700;margin-bottom:.5rem; }
.job-meta  { display:flex;flex-wrap:wrap;gap:.75rem; }
.job-tag   { display:inline-flex;align-items:center;gap:.375rem;font-size:.8rem;color:var(--text-muted); }

/* ============================================================
   EMPLOYEE PORTAL
   ============================================================ */
.portal-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-base);
  background-image:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(232,137,106,.06) 0%,transparent 70%);
  padding:6rem 1.5rem;
}
.portal-card {
  width:100%; max-width:460px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:3rem;
  box-shadow:var(--shadow-lg);
}
.portal-logo { display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:2rem; }
.portal-logo-mark { width:42px;height:42px;background:var(--grad-accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1rem; }
.portal-logo-text { font-size:1.375rem;font-weight:800;color:var(--text-primary); }
.portal-logo-text span { color:var(--accent); }
.portal-title { font-size:1.375rem;text-align:center;margin-bottom:.375rem; }
.portal-subtitle { font-size:.9rem;text-align:center;color:var(--text-muted);margin-bottom:2rem; }
.portal-error { background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5;border-radius:var(--radius-md);padding:.875rem 1rem;font-size:.875rem;margin-bottom:1.5rem;display:none; }
.portal-help { text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.875rem;color:var(--text-muted); }
.portal-help a { color:var(--accent); }

/* ============================================================
   LEADERSHIP PAGE
   ============================================================ */
.leadership-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem; }
.leader-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;text-align:center;transition:all var(--transition); }
.leader-card:hover { border-color:var(--border-accent);transform:translateY(-4px); }
.leader-avatar { width:80px;height:80px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-weight:800;font-size:1.5rem;color:#fff; }
.leader-name   { font-size:1.0625rem;font-weight:700;margin-bottom:.25rem; }
.leader-title  { font-size:.8125rem;color:var(--text-muted);margin:0; }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem; }
.case-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition); }
.case-card:hover { border-color:var(--border-accent);transform:translateY(-4px); }
.case-thumb { width:100%;aspect-ratio:16/9;object-fit:cover;background:linear-gradient(135deg,var(--bg-elevated),var(--bg-surface)); }
.case-body { padding:2rem; }
.case-tag  { font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.625rem; }
.case-title{ font-size:1.125rem;font-weight:700;margin-bottom:.75rem; }
.case-result{ display:flex;gap:2rem;margin-top:1.25rem; }
.case-metric-num { font-size:1.75rem;font-weight:800;background:var(--grad-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.case-metric-label { font-size:.75rem;color:var(--text-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  padding:72px 0 0;
}
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.4fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--border); }
.footer-logo { display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem; }
.footer-logo-mark { width:36px;height:36px;background:var(--grad-accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:.875rem; }
.footer-logo-text { font-size:1.25rem;font-weight:800;color:var(--text-primary); }
.footer-logo-text span { color:var(--accent); }
.footer-tagline { font-size:.9rem;color:var(--text-muted);margin-bottom:1.5rem;line-height:1.7; }
.footer-contact-row { display:flex;align-items:center;gap:.625rem;color:var(--text-muted);font-size:.875rem;margin-bottom:.625rem; }
.footer-contact-row a { color:var(--text-muted); }
.footer-contact-row a:hover { color:var(--accent); }
.footer-col h4 { font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1.25rem; }
.footer-links { display:flex;flex-direction:column;gap:.625rem; }
.footer-link  { color:var(--text-muted);font-size:.875rem;transition:color var(--transition); }
.footer-link:hover { color:var(--text-primary); }
.footer-input-wrap { display:flex;gap:.5rem; }
.footer-input { flex:1;padding:.75rem 1rem;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.875rem;outline:none;transition:border-color var(--transition); }
.footer-input::placeholder { color:var(--text-muted); }
.footer-input:focus { border-color:var(--accent); }
.footer-nl-note { font-size:.75rem;color:var(--text-muted);margin-top:.75rem; }
.footer-bottom { display:flex;align-items:center;justify-content:space-between;padding:1.5rem 0;flex-wrap:wrap;gap:1rem; }
.footer-copy   { font-size:.8rem;color:var(--text-muted); }
.footer-bottom-links { display:flex;gap:1.5rem; }
.footer-bottom-link  { font-size:.8rem;color:var(--text-muted);transition:color var(--transition); }
.footer-bottom-link:hover { color:var(--text-primary); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ============================================================
   PROSE (blog content)
   ============================================================ */
.prose h2 { font-size:1.625rem;margin:2.5rem 0 1rem; }
.prose h3 { font-size:1.25rem;margin:2rem 0 .75rem; }
.prose p  { color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.85; }
.prose ul { margin:1rem 0 1.5rem 1.5rem;list-style:disc; }
.prose ul li { color:var(--text-secondary);margin-bottom:.5rem; }
.prose blockquote { border-left:3px solid var(--accent);padding:.875rem 1.5rem;background:rgba(232,137,106,.06);border-radius:0 var(--radius-md) var(--radius-md) 0;margin:2rem 0; }
.prose blockquote p { font-style:italic;color:var(--text-secondary);margin:0; }
.prose strong { color:var(--text-primary); }

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.divider { border:none;border-top:1px solid var(--border);margin:2rem 0; }
.text-accent { color:var(--accent); }
.text-muted  { color:var(--text-muted); }
.bg-gradient-text { background:var(--grad-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .statsbar-grid   { grid-template-columns:repeat(2,1fr); gap:2rem; }
  .stat-sep        { display:none; }
  .footer-grid     { grid-template-columns:1fr 1fr; }
  .clients-wrap    { grid-template-columns:repeat(3,1fr); }
  .testimonial-grid{ grid-template-columns:1fr 1fr; }
  .leadership-grid { grid-template-columns:repeat(2,1fr); }
  .hero-side       { display:none; }
  .blog-layout     { grid-template-columns:1fr; }
  .blog-sidebar    { display:none; }
}
@media(max-width:768px){
  :root{--section-py:64px}
  .nav-links,.nav-right .btn-ghost { display:none; }
  .nav-toggle { display:flex; }
  #site-header.mobile-open .nav-links {
    display:flex; flex-direction:column;
    position:fixed; top:72px; left:0; right:0; bottom:0;
    background:rgba(22,33,62,.98); backdrop-filter:blur(24px);
    padding:2rem; gap:.5rem; overflow-y:auto; align-items:stretch;
  }
  #site-header.mobile-open .nav-link { font-size:1.125rem; padding:.875rem 1rem; border-radius:var(--radius-md); color:var(--text-primary); }
  #site-header.mobile-open .nav-dropdown { display:none; }
  .feature-grid,.about-grid,.contact-grid { grid-template-columns:1fr; gap:2rem; }
  .blog-grid  { grid-template-columns:1fr; }
  .case-grid  { grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .perks-grid { grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .leadership-grid{grid-template-columns:1fr 1fr;}
  .form-row   { grid-template-columns:1fr; }
  .hero-stats { gap:1.5rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .testimonial-grid { grid-template-columns:1fr; }
  .clients-wrap { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .statsbar-grid { grid-template-columns:1fr; }
  .leadership-grid { grid-template-columns:1fr; }
  .clients-wrap { grid-template-columns:1fr 1fr; }
}