/* ═══════════════════════════════════════════
   WSEvolves — styles.css  CLEAN REBUILD
   Fonts: Cabinet Grotesk + Instrument Sans
   ═══════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --bg:        #ffffff;
  --bg2:       #f6f6f4;
  --bg3:       #eeede8;
  --card:      #ffffff;
  --glass:     rgba(255,255,255,0.80);
  --inp:       #f2f2f0;
  --t1:        #111110;
  --t2:        #484846;
  --t3:        #9a9a96;
  --bdr:       rgba(17,17,16,0.08);
  --bdr2:      rgba(17,17,16,0.05);
  --pri:       #4f46e5;
  --pri-soft:  #ede9fe;
  --grn:       #10b981;
  --amb:       #f59e0b;
  --grad:      linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#0ea5e9 100%);
  --grad-t:    linear-gradient(135deg,#4f46e5,#a855f7,#0ea5e9);
  --sh0:       0 1px 3px rgba(0,0,0,0.05);
  --sh1:       0 2px 8px rgba(0,0,0,0.07);
  --sh2:       0 8px 24px rgba(0,0,0,0.09);
  --sh3:       0 24px 48px rgba(79,70,229,0.14),0 8px 24px rgba(0,0,0,0.08);
  --r1: 8px; --r2: 14px; --r3: 20px; --r4: 28px; --r5: 36px;
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: .2s; --mid: .42s;
}
[data-theme="dark"] {
  --bg: #0b0b0a; --bg2: #141413; --bg3: #1c1b1a;
  --card: #161614; --glass: rgba(18,18,17,.88); --inp: #1c1b1a;
  --t1: #f0eeeb; --t2: #a6a6a2; --t3: #575754;
  --bdr: rgba(240,238,235,.08); --bdr2: rgba(240,238,235,.04);
  --pri: #6366f1; --pri-soft: #1e1b4b;
  --grad-t: linear-gradient(135deg,#818cf8,#c084fc,#38bdf8);
  --sh3: 0 24px 48px rgba(99,102,241,.2),0 8px 24px rgba(0,0,0,.45);
}

/* ─── BASE ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'Instrument Sans',sans-serif; background:var(--bg); color:var(--t1); line-height:1.6; overflow-x:hidden; transition:background var(--mid) var(--ease),color var(--mid) var(--ease) }
img { max-width:100%; height:auto; display:block }
a { text-decoration:none; color:inherit }
button { cursor:pointer; font-family:inherit; background:none; border:none }
input,textarea,select { font-family:inherit }
h1,h2,h3,h4,h5 { font-family:'Cabinet Grotesk',sans-serif; font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--t1); transition:color var(--mid) }
h1 { font-size:clamp(2.6rem,6.5vw,5.8rem) }
h2 { font-size:clamp(1.9rem,3.8vw,3.3rem) }
h3 { font-size:1.25rem; font-weight:700 }
h4 { font-size:1rem; font-weight:700 }
.gradient-text { background:var(--grad-t); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px }
.section { padding:96px 0 }

/* Logo theme switch */
.logo-dark {
  display: none;
}

[data-theme="dark"] .logo-light {
  display: none;
}

[data-theme="dark"] .logo-dark {
  display: block;
}

/* ─── AMBIENT BG ─── */
.ambient { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.ambient__orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:.28; animation:orbF 20s ease-in-out infinite }
[data-theme="dark"] .ambient__orb { opacity:.16 }
.orb1 { width:700px; height:700px; background:radial-gradient(circle,rgba(79,70,229,.3),transparent); top:-200px; right:-80px }
.orb2 { width:500px; height:500px; background:radial-gradient(circle,rgba(124,58,237,.22),transparent); bottom:8%; left:-130px; animation-delay:-7s }
.orb3 { width:380px; height:380px; background:radial-gradient(circle,rgba(14,165,233,.18),transparent); top:42%; left:44%; animation-delay:-14s }
@keyframes orbF { 0%,100%{transform:translate(0,0)} 33%{transform:translate(24px,-32px)} 66%{transform:translate(-16px,26px)} }

/* ─── BUTTONS ─── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:12px 22px; border-radius:100px; font-family:'Cabinet Grotesk',sans-serif; font-size:.92rem; font-weight:700; transition:all var(--fast) var(--ease); white-space:nowrap; cursor:pointer; border:none }
.btn--primary { background:var(--t1); color:var(--bg); box-shadow:var(--sh1) }
.btn--primary:hover { transform:translateY(-2px); box-shadow:var(--sh2) }
.btn--ghost { background:transparent; color:var(--t2); border:1.5px solid var(--bdr) }
.btn--ghost:hover { border-color:var(--t2); color:var(--t1); transform:translateY(-1px) }
.btn--hire { background:var(--pri); color:#fff; padding:9px 18px; font-size:.85rem; box-shadow:0 2px 14px rgba(79,70,229,.35) }
.btn--hire:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(79,70,229,.45) }
.btn--outline-sm { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:100px; border:1.5px solid var(--bdr); font-size:.85rem; font-weight:600; color:var(--t2); white-space:nowrap; transition:all var(--fast) }
.btn--outline-sm:hover { border-color:var(--pri); color:var(--pri) }
.btn--full { width:100%; justify-content:center; padding:14px; font-size:1rem }

/* ─── NAVBAR ─── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:100; background:var(--glass); backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--bdr); transition:all var(--mid) }
.navbar.scrolled { box-shadow:var(--sh1) }
.navbar__inner { display:flex; align-items:center; height:64px; gap:20px }
.navbar__logo { display:flex; align-items:center; gap:9px; font-family:'Cabinet Grotesk',sans-serif; font-size:1.05rem; font-weight:800; color:var(--t1); flex-shrink:0; transition:color var(--mid) }
.logo-pill { width:30px; height:30px; border-radius:8px; background:var(--t1); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:900; transition:background var(--mid),color var(--mid) }
.logo-text { transition:color var(--mid) }
.logo-badge { font-size:.62rem; font-weight:700; background:var(--pri-soft); color:var(--pri); padding:2px 6px; border-radius:100px; letter-spacing:.04em }
.navbar__links { display:flex; align-items:center; gap:4px; flex:1; justify-content:center }
.navbar__links a { font-size:.87rem; font-weight:500; color:var(--t2); padding:6px 13px; border-radius:100px; transition:all var(--fast) }
.navbar__links a:hover,.navbar__links a.active { color:var(--t1); background:var(--bg2) }
.navbar__controls { display:flex; align-items:center; gap:10px; margin-left:auto }
.theme-toggle { width:36px; height:36px; border-radius:50%; border:1.5px solid var(--bdr); background:var(--card); color:var(--t2); display:flex; align-items:center; justify-content:center; transition:all var(--fast) }
.theme-toggle:hover { border-color:var(--pri); color:var(--pri) }
.hamburger { display:none; flex-direction:column; gap:5px; width:36px; height:36px; align-items:center; justify-content:center }
.hamburger span { display:block; width:20px; height:2px; background:var(--t1); border-radius:2px; transition:all var(--fast) }
.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; flex-direction:column; padding:16px 24px 20px; gap:2px; border-top:1px solid var(--bdr); background:var(--glass); backdrop-filter:blur(20px) }
.mobile-menu.open { display:flex }
.mobile-link { font-size:1rem; font-weight:500; color:var(--t2); padding:11px 13px; border-radius:10px; transition:all var(--fast) }
.mobile-link:hover { background:var(--bg2); color:var(--t1) }
.mobile-cta { margin-top:8px; color:var(--pri); font-weight:700 }

/* ─── HERO ─── */
.hero { padding:118px 0 0; position:relative; z-index:1; overflow:hidden }
.hero-bg { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.hbg-grid { position:absolute; inset:0; background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px); background-size:54px 54px; opacity:.7 }
.hbg-rings { position:absolute; top:50%; right:-6%; transform:translateY(-50%); width:58%; max-width:680px; stroke:var(--pri); opacity:.55 }
.hbg-glow { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none }
.hbg-glow-a { width:500px; height:500px; background:radial-gradient(circle,rgba(79,70,229,.18),transparent); top:-100px; right:5% }
.hbg-glow-b { width:360px; height:360px; background:radial-gradient(circle,rgba(124,58,237,.14),transparent); bottom:10%; right:25% }
.hbg-dot { position:absolute; border-radius:50%; animation:dotP 4s ease-in-out infinite }
#hd1 { width:9px; height:9px; background:#4f46e5; top:22%; right:38%; box-shadow:0 0 0 4px rgba(79,70,229,.15),0 0 16px rgba(79,70,229,.3); animation-delay:0s }
#hd2 { width:7px; height:7px; background:#7c3aed; top:58%; right:24%; box-shadow:0 0 0 3px rgba(124,58,237,.15),0 0 12px rgba(124,58,237,.25); animation-delay:1.2s }
#hd3 { width:6px; height:6px; background:#0ea5e9; top:34%; right:62%; box-shadow:0 0 0 3px rgba(14,165,233,.15),0 0 10px rgba(14,165,233,.2); animation-delay:2.1s }
#hd4 { width:8px; height:8px; background:#10b981; top:71%; right:47%; box-shadow:0 0 0 3px rgba(16,185,129,.15),0 0 12px rgba(16,185,129,.2); animation-delay:.7s }
#hd5 { width:6px; height:6px; background:#f59e0b; top:17%; right:53%; box-shadow:0 0 0 3px rgba(245,158,11,.15),0 0 10px rgba(245,158,11,.2); animation-delay:1.8s }
@keyframes dotP { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.5);opacity:1} }
.hbg-lines { position:absolute; top:0; right:0; width:70%; height:80%; stroke:rgba(79,70,229,.12) }

.hero__inner { display:grid; grid-template-columns:1fr 1.05fr; gap:52px; align-items:center; position:relative; z-index:1; padding-bottom:52px }

/* Hero left */
.hero__tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px }
.hero-tag { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:100px; font-size:.78rem; font-weight:600; color:var(--t2); border:1px solid var(--bdr); background:var(--card); box-shadow:var(--sh0); transition:all var(--mid) }
.hero-tag.green { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.2); color:var(--grn) }
.hero-tag.outline { background:transparent }
.tag-pulse { width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 0 3px rgba(16,185,129,.2); animation:pulse 2s infinite; flex-shrink:0 }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.2)} 50%{box-shadow:0 0 0 7px rgba(16,185,129,.06)} }

.hero__h1 { display:flex; flex-direction:column; gap:0; margin-bottom:18px }
.h1-muted  { display:block; font-size:.5em; color:var(--t3); letter-spacing:-.01em; transition:color var(--mid) }
.h1-main   { display:block; font-size:1em }
.h1-light  { display:block; font-size:.72em; color:var(--t2); transition:color var(--mid) }
.h1-stroke { display:block; font-size:.82em; -webkit-text-stroke:2px var(--t2); -webkit-text-fill-color:transparent; transition:-webkit-text-stroke-color var(--mid) }
.hero__h1 em { background:var(--grad-t); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-style:normal; position:relative }
.hero__h1 em::after { content:'|'; -webkit-text-fill-color:var(--pri); color:var(--pri); animation:blink .7s step-end infinite; font-weight:300; margin-left:2px }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero__sub { font-size:1.01rem; color:var(--t2); max-width:460px; line-height:1.75; margin-bottom:26px; transition:color var(--mid) }
.hero__ctas { display:flex; gap:11px; margin-bottom:26px; flex-wrap:wrap }
.hero__proof { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap }
.proof-avs { display:flex }
.proof-avs img { width:32px; height:32px; border-radius:50%; border:2px solid var(--bg); margin-right:-9px; object-fit:cover; transition:border-color var(--mid) }
.proof-div { width:1px; height:18px; background:var(--bdr) }
.proof-txt { font-size:.82rem; color:var(--t2); transition:color var(--mid) }
.proof-txt strong { color:var(--t1); transition:color var(--mid) }
.proof-stars { font-size:.82rem; color:var(--amb); font-weight:700 }
.proof-stars strong { color:var(--t1); transition:color var(--mid) }

.tz-row { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 18px; background:var(--card); border:1px solid var(--bdr); border-radius:100px; box-shadow:var(--sh0); transition:all var(--mid) }
.tz-item { display:flex; align-items:center; gap:5px; font-size:.75rem }
.tz-dot { width:6px; height:6px; border-radius:50%; background:var(--grn); flex-shrink:0 }
.tz-city { font-weight:700; color:var(--t1); transition:color var(--mid) }
.tz-time { color:var(--pri); font-weight:600; font-variant-numeric:tabular-nums }
.tz-sep { color:var(--t3); font-size:.9rem }

/* Hero right – dashboard */
.hero__right { position:relative; display:flex; flex-direction:column; gap:0; align-items:center }
.hdash { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r4); box-shadow:var(--sh3); overflow:hidden; width:100%; max-width:450px; animation:floatY 6s ease-in-out infinite; transition:all var(--mid) }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.hdash-chrome { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--bg2); border-bottom:1px solid var(--bdr); transition:all var(--mid) }
.hdc-dots { display:flex; gap:5px }
.hdc-dots span { width:10px; height:10px; border-radius:50%; display:block }
.hdc-url { flex:1; text-align:center; font-size:.68rem; color:var(--t3); display:flex; align-items:center; justify-content:center; gap:4px; transition:color var(--mid) }

.hdash-body { display:flex; min-height:290px }

.hd-sidebar { width:50px; background:var(--bg2); border-right:1px solid var(--bdr); display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px; transition:all var(--mid) }
.hds-logo { width:28px; height:28px; border-radius:7px; background:var(--pri); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Cabinet Grotesk',sans-serif; font-size:.75rem; font-weight:900; margin-bottom:10px }
.hds-item { width:34px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--t3); transition:all var(--fast) }
.hds-item.active { background:var(--pri-soft); color:var(--pri) }
.hds-item:hover { background:var(--bg3); color:var(--t1) }

.hd-main { flex:1; padding:14px; display:flex; flex-direction:column; gap:11px; overflow:hidden }
.hdm-header { display:flex; align-items:center; justify-content:space-between }
.hdm-title { font-family:'Cabinet Grotesk',sans-serif; font-size:.78rem; font-weight:700; color:var(--t1); transition:color var(--mid) }
.hdm-live { display:flex; align-items:center; gap:4px; font-size:.63rem; font-weight:700; color:var(--grn); background:rgba(16,185,129,.1); padding:3px 8px; border-radius:100px }
.hdm-live-dot { width:5px; height:5px; border-radius:50%; background:var(--grn); animation:pulse 2s infinite }

.hdm-kpis { display:flex; gap:7px }
.hdm-kpi { flex:1; border-radius:var(--r1); padding:8px 10px; border:1px solid var(--bdr2); transition:all var(--mid) }
.kpi-blue  { background:rgba(79,70,229,.07) }
.kpi-purple{ background:rgba(124,58,237,.07) }
.kpi-green { background:rgba(16,185,129,.07) }
.kpi-val { font-family:'Cabinet Grotesk',sans-serif; font-size:.88rem; font-weight:800; color:var(--t1); transition:color var(--mid) }
.kpi-key { font-size:.58rem; color:var(--t3); transition:color var(--mid) }
.kpi-delta { font-size:.58rem; font-weight:700; margin-top:2px; color:var(--t3) }
.kpi-delta.up { color:var(--grn) }

.hdm-chart { background:var(--bg2); border-radius:var(--r1); padding:8px; border:1px solid var(--bdr2); transition:all var(--mid) }
.hdmc-label { font-size:.6rem; font-weight:700; color:var(--t3); margin-bottom:6px; transition:color var(--mid) }
.hdmc-inner { position:relative; height:72px }
.hdmc-bars { position:absolute; inset:0; display:flex; align-items:flex-end; gap:3px; padding:0 2px }
.hdmc-bar { flex:1; background:var(--bdr); border-radius:3px 3px 0 0; height:var(--h,50%); position:relative; transition:background var(--mid) }
.hdmc-bar span { position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); font-size:.5rem; color:var(--t3); font-weight:600; transition:color var(--mid) }
.hdmc-hi { background:rgba(79,70,229,.35) }
.hdmc-line { position:absolute; inset:0; width:100%; height:calc(100% - 0px) }

.hdm-tasks { display:flex; flex-direction:column; gap:5px }
.hdmt-row { display:flex; align-items:center; gap:7px; font-size:.68rem; color:var(--t2); transition:color var(--mid) }
.hdmt-dot { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--bdr); flex-shrink:0; transition:all var(--mid) }
.hdmt-dot.done   { background:var(--grn); border-color:var(--grn) }
.hdmt-dot.active { background:var(--pri); border-color:var(--pri); animation:pulse 2s infinite }
.hdmt-row > span:first-of-type { flex:1 }
.hdmt-progress { flex:1; height:4px; background:var(--bdr); border-radius:2px; overflow:hidden }
.hdmt-progress div { height:100%; background:var(--grad); border-radius:2px; transition:width 1.4s var(--ease) }
.hdmt-pct { font-size:.6rem; font-weight:700; color:var(--t3); width:26px; text-align:right; flex-shrink:0; transition:color var(--mid) }
.pct-done   { color:var(--grn) }
.pct-active { color:var(--pri) }

/* Floating cards */
.hfloat { position:absolute; display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r3); padding:9px 13px; box-shadow:var(--sh3); font-size:.75rem; white-space:nowrap; z-index:20; transition:all var(--mid) }
.hf-tl { top:-16px; left:-22px; animation:floatY 5s .5s ease-in-out infinite }
.hf-tr { top:16px; right:-20px; animation:floatY 4.5s 1s ease-in-out infinite }
.hf-bl { bottom:56px; left:-24px; animation:floatY 6s 1.5s ease-in-out infinite }
.hf-ic { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.hf-ic.green  { background:rgba(16,185,129,.12); color:var(--grn) }
.hf-ic.purple { background:rgba(124,58,237,.12); color:#7c3aed }
.hf-ic.blue   { background:rgba(79,70,229,.12);  color:var(--pri) }
.hf-body strong { display:block; font-weight:700; font-size:.75rem; color:var(--t1); transition:color var(--mid) }
.hf-body span   { font-size:.67rem; color:var(--t3); transition:color var(--mid) }

/* Code card */
.hero-code-card { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); background:#1a1a2e; border-radius:var(--r2); padding:11px 16px; font-family:monospace; font-size:.68rem; z-index:20; box-shadow:var(--sh3); animation:floatY 7s 2s ease-in-out infinite; white-space:nowrap; border:1px solid rgba(255,255,255,.08) }
.hcc-dots { display:flex; gap:4px; margin-bottom:8px }
.hcc-dots span { width:8px; height:8px; border-radius:50%; display:block }
.hcc-body { display:flex; flex-direction:column; gap:3px }
.hcc-body div { color:#94a3b8 }
.ck { color:#93c5fd }
.cv { color:#a5f3fc }
.cn { color:#86efac }
.cf { color:#6ee7b7 }
.cd { color:rgba(148,163,184,.55) }

/* Mini stats strip */
.hero-mini-stats { display:flex; align-items:center; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r4); padding:12px 20px; gap:0; position:absolute; bottom:-52px; left:50%; transform:translateX(-50%); box-shadow:var(--sh1); white-space:nowrap; transition:all var(--mid) }
.hms { display:flex; flex-direction:column; align-items:center; padding:4px 20px }
.hms-n { font-family:'Cabinet Grotesk',sans-serif; font-size:1.3rem; font-weight:900; background:var(--grad-t); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1 }
.hms-n sup { font-size:.55em }
.hms-l { font-size:.65rem; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; transition:color var(--mid) }
.hms-sep { width:1px; height:30px; background:var(--bdr) }

/* ─── TICKER ─── */
.ticker { border-top:1px solid var(--bdr); overflow:hidden; padding:13px 0; background:var(--bg2); position:relative; transition:all var(--mid) }
.ticker::before,.ticker::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none }
.ticker::before { left:0; background:linear-gradient(to right,var(--bg2),transparent) }
.ticker::after  { right:0; background:linear-gradient(to left,var(--bg2),transparent) }
.ticker-track { display:flex; gap:26px; width:max-content; animation:tickerA 36s linear infinite }
.ticker-track span { font-size:.8rem; font-weight:600; color:var(--t3); white-space:nowrap; transition:color var(--mid) }
.ticker-track .td { color:var(--pri) }
@keyframes tickerA { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── STATS BAND ─── */
.stats-band { background:var(--card); padding:30px 0; position:relative; z-index:1; transition:all var(--mid) }
.stats-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap }
.sstat { display:flex; flex-direction:column; align-items:center; padding:12px 44px; gap:2px }
.sn { font-family:'Cabinet Grotesk',sans-serif; font-size:2.3rem; font-weight:900; color:#7c3aed; line-height:1 }
.ss { font-size:1.4rem; font-weight:900; color:var(--t3) }
.sl { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); margin-top:2px }
.sdiv { width:1px; height:40px; background:rgba(255,255,255,.1) }

/* ─── SECTION HEADERS ─── */
.sec-header { margin-bottom:52px }
.sec-split { display:flex; align-items:flex-end; justify-content:space-between; gap:20px }
.sec-eyebrow { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--pri); margin-bottom:10px; display:block }
.sec-title { margin-bottom:0 }

/* ─── SERVICES ─── */
.services { background:var(--bg) }
.services-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; margin-bottom:32px }
.svc-feature { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r5); padding:32px; box-shadow:var(--sh1); transition:all var(--fast) }
.svc-feature:hover { box-shadow:var(--sh3) }
.svc-feat-icon { width:52px; height:52px; border-radius:var(--r2); background:var(--pri-soft); color:var(--pri); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:all var(--fast) }
.svc-feature:hover .svc-feat-icon { background:var(--pri); color:#fff }
.svc-feature h3 { font-size:1.45rem; margin-bottom:10px }
.svc-feature p { color:var(--t2); line-height:1.7; margin-bottom:18px; font-size:.93rem; transition:color var(--mid) }
.svc-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px }
.svc-tags span { font-size:.73rem; font-weight:600; padding:4px 10px; border-radius:100px; background:var(--bg2); border:1px solid var(--bdr); color:var(--t2); transition:all var(--mid) }
.svc-link { display:inline-flex; align-items:center; gap:5px; font-size:.88rem; font-weight:700; color:var(--pri); transition:gap var(--fast) }
.svc-link:hover { gap:9px }

.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.svc-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r3); padding:18px; box-shadow:var(--sh0); transition:all var(--fast) }
.svc-card:hover { box-shadow:var(--sh2); transform:translateY(-3px) }
.svc-wide { grid-column:span 2 }
/* Icon wrappers — fixed: no color-mix, explicit per-variant */
.svc-icon-wrap { width:38px; height:38px; border-radius:var(--r1); display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:all var(--fast) }
.svc-sky   .svc-icon-wrap { background:rgba(14,165,233,.12);  color:#0ea5e9 }
.svc-violet.svc-icon-wrap,.svc-violet .svc-icon-wrap { background:rgba(124,58,237,.12); color:#7c3aed }
.svc-cyan  .svc-icon-wrap { background:rgba(6,182,212,.12);   color:#06b6d4 }
.svc-amber .svc-icon-wrap { background:rgba(245,158,11,.12);  color:#f59e0b }
.svc-green .svc-icon-wrap { background:rgba(16,185,129,.12);  color:#10b981 }
.svc-sky:hover   .svc-icon-wrap { background:#0ea5e9; color:#fff }
.svc-violet:hover .svc-icon-wrap { background:#7c3aed; color:#fff }
.svc-cyan:hover  .svc-icon-wrap { background:#06b6d4; color:#fff }
.svc-amber:hover .svc-icon-wrap { background:#f59e0b; color:#fff }
.svc-green:hover .svc-icon-wrap { background:#10b981; color:#fff }
.svc-card h4 { font-size:.93rem; margin-bottom:6px }
.svc-card p { font-size:.82rem; color:var(--t2); line-height:1.6; transition:color var(--mid) }

.process-strip { display:flex; align-items:center; background:var(--bg2); border:1px solid var(--bdr); border-radius:var(--r4); padding:22px 28px; flex-wrap:wrap; transition:all var(--mid) }
.process-step { display:flex; flex-direction:column; gap:2px; flex:1; min-width:120px; padding:8px 14px }
.ps-n { font-family:'Cabinet Grotesk',sans-serif; font-size:.67rem; font-weight:900; color:var(--pri); letter-spacing:.1em }
.process-step strong { font-size:.9rem; font-weight:700; color:var(--t1); transition:color var(--mid) }
.process-step span { font-size:.77rem; color:var(--t3); transition:color var(--mid) }
.process-arr { color:var(--t3); flex-shrink:0 }

/* ─── WORK ─── */
.work { background:var(--bg2) }
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px }
.work-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r5); overflow:hidden; box-shadow:var(--sh1); transition:all var(--fast); cursor:pointer }
.work-card:hover { box-shadow:var(--sh3); transform:translateY(-4px) }
.work-wide { grid-column:span 2; display:grid; grid-template-columns:1.3fr 1fr }
.wc-visual { background:linear-gradient(135deg,var(--g1),var(--g2)); height:240px; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; position:relative }
.work-wide .wc-visual { height:auto; min-height:220px }
.wc-info { padding:22px; display:flex; flex-direction:column; gap:9px; justify-content:center }
.wc-tag { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); transition:color var(--mid) }
.wc-info h3 { font-size:1.2rem; margin-bottom:2px }
.wc-info p { font-size:.86rem; color:var(--t2); line-height:1.65; transition:color var(--mid) }
.wc-meta { display:flex; flex-wrap:wrap; gap:10px }
.wc-meta span { display:flex; align-items:center; gap:4px; font-size:.76rem; color:var(--t3); transition:color var(--mid) }
.wc-cta { display:inline-flex; align-items:center; gap:5px; padding:8px 16px; border-radius:100px; background:var(--bg2); border:1px solid var(--bdr); font-size:.79rem; font-weight:700; color:var(--t1); transition:all var(--fast); cursor:pointer; align-self:flex-start; margin-top:4px }
.wc-cta:hover { background:var(--pri); color:#fff; border-color:var(--pri); transform:translateY(-1px) }

/* Work card visuals */
.wv-dash { background:rgba(255,255,255,.1); border-radius:10px; width:100%; max-width:330px; overflow:hidden; border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(8px) }
.wvd-top { display:flex; align-items:center; gap:8px; padding:8px 11px; background:rgba(0,0,0,.18) }
.wvd-dots { display:flex; gap:4px }
.wvd-dots span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); display:block }
.wvd-url { font-size:.62rem; color:rgba(255,255,255,.45) }
.wvd-body { display:flex; height:136px }
.wvd-side { width:40px; background:rgba(0,0,0,.12); display:flex; flex-direction:column; gap:4px; padding:8px 6px }
.wvds { height:5px; border-radius:3px; background:rgba(255,255,255,.2) }
.wvds.on { background:rgba(255,255,255,.7) }
.wvd-main { flex:1; padding:9px; display:flex; flex-direction:column; gap:7px }
.wvd-kpis { display:flex; gap:5px }
.wvdk { flex:1; background:rgba(255,255,255,.1); border-radius:6px; padding:5px 7px }
.wvdk b { display:block; font-size:.78rem; font-weight:800; color:#fff }
.wvdk s { display:block; font-size:.5rem; color:rgba(255,255,255,.45); text-decoration:none }
.wvd-chart { flex:1; display:block }

.wv-mobile { display:flex; justify-content:center }
.wvm-frame { width:90px; height:165px; border-radius:16px; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); overflow:hidden; backdrop-filter:blur(8px) }
.wvm-notch { width:24px; height:5px; background:rgba(0,0,0,.25); border-radius:3px; margin:7px auto 0 }
.wvm-screen { padding:5px }
.wvms-hdr { font-size:.5rem; font-weight:800; color:#fff; text-align:center; margin-bottom:4px }
.wvm-ring { width:50px; height:50px; display:block; margin:0 auto 3px }
.wvms-row { display:flex; justify-content:space-around }
.wvms-row b { display:block; font-size:.62rem; font-weight:800; color:#fff; text-align:center }
.wvms-row span { display:block; font-size:.4rem; color:rgba(255,255,255,.5); text-align:center }

.wv-chat { background:rgba(255,255,255,.1); border-radius:11px; width:100%; max-width:185px; overflow:hidden; border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(8px) }
.wvc-hdr { display:flex; align-items:center; gap:6px; padding:8px 10px; background:rgba(0,0,0,.15) }
.wvc-av { width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.4) }
.wvc-hdr span { font-size:.62rem; font-weight:700; color:rgba(255,255,255,.85) }
.wvc-on { width:5px; height:5px; border-radius:50%; background:#4ade80; margin-left:auto }
.wvc-msgs { display:flex; flex-direction:column; gap:5px; padding:8px }
.wvc-m { max-width:80%; font-size:.58rem; border-radius:8px; padding:4px 7px; color:#fff }
.wvc-m.ai { background:rgba(255,255,255,.15); align-self:flex-start }
.wvc-m.usr { background:rgba(255,255,255,.3); align-self:flex-end }
.wvc-m.typing { display:flex; gap:3px; align-items:center; padding:6px 8px; background:rgba(255,255,255,.1); align-self:flex-start; border-radius:8px }
.wvc-m.typing span { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.6); animation:typ 1.2s ease-in-out infinite }
.wvc-m.typing span:nth-child(2){animation-delay:.2s} .wvc-m.typing span:nth-child(3){animation-delay:.4s}
@keyframes typ{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.wv-map { background:rgba(255,255,255,.08); border-radius:11px; width:100%; overflow:hidden; border:1px solid rgba(255,255,255,.12); position:relative }
.wvmap-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px }
.wvmap-svg { width:100%; display:block; position:relative; z-index:1 }
.wvmap-stats { display:flex; border-top:1px solid rgba(255,255,255,.1); position:relative; z-index:1 }
.wvmap-stats div { flex:1; padding:8px 11px; border-right:1px solid rgba(255,255,255,.1) }
.wvmap-stats div:last-child { border-right:none }
.wvmap-stats b { display:block; font-family:'Cabinet Grotesk',sans-serif; font-size:.82rem; font-weight:800; color:#fff }
.wvmap-stats span { font-size:.58rem; color:rgba(255,255,255,.45) }

/* ─── MODAL ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(10px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease) }
.modal-overlay.open { opacity:1; pointer-events:all }
.modal-box { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r5); width:100%; max-width:880px; max-height:92vh; overflow-y:auto; position:relative; box-shadow:0 40px 80px rgba(0,0,0,.35); transform:scale(.95) translateY(18px); transition:all .3s var(--ease) }
.modal-overlay.open .modal-box { transform:scale(1) translateY(0) }
.modal-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--bdr); background:var(--card); color:var(--t2); display:flex; align-items:center; justify-content:center; z-index:10; transition:all var(--fast) }
.modal-close:hover { background:var(--bg2); color:var(--t1) }

/* Modal internals */
.m-hero { height:260px; border-radius:var(--r5) var(--r5) 0 0; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center }
.m-hero-badge { position:absolute; top:18px; left:22px; background:rgba(255,255,255,.18); backdrop-filter:blur(12px); color:#fff; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:5px 13px; border-radius:100px; border:1px solid rgba(255,255,255,.25) }
.m-body { padding:30px 36px }
.m-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px }
.m-chip { font-size:.73rem; font-weight:600; padding:4px 11px; border-radius:100px; background:var(--bg2); border:1px solid var(--bdr); color:var(--t2) }
.m-chip-hi { background:var(--pri-soft); color:var(--pri); border-color:transparent }
.m-body h2 { font-size:1.75rem; margin-bottom:10px }
.m-body p { font-size:.91rem; color:var(--t2); line-height:1.75; margin-bottom:18px; transition:color var(--mid) }
.m-section-label { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); margin-bottom:11px; margin-top:22px; display:block; transition:color var(--mid) }
.m-results { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px }
.m-result { background:var(--bg2); border-radius:var(--r3); padding:14px; text-align:center; border:1px solid var(--bdr) }
.m-result strong { display:block; font-family:'Cabinet Grotesk',sans-serif; font-size:1.55rem; font-weight:900; background:var(--grad-t); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.m-result span { font-size:.75rem; color:var(--t3); transition:color var(--mid) }
.m-stack { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px }
.m-stack span { font-size:.73rem; font-weight:600; padding:4px 11px; border-radius:100px; background:var(--bg2); border:1px solid var(--bdr); color:var(--t2) }
/* Mock screens inside modal */
.m-screens { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px }
.m-screen { border-radius:var(--r3); overflow:hidden; border:1px solid var(--bdr); background:var(--bg2) }
.ms-browser { padding:0; display:flex; flex-direction:column }
.ms-chrome { display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--bg3); border-bottom:1px solid var(--bdr); transition:all var(--mid) }
.ms-chrome-dots { display:flex; gap:3px }
.ms-chrome-dots span { width:8px; height:8px; border-radius:50%; display:block }
.ms-chrome-url { font-size:.6rem; color:var(--t3); flex:1; text-align:center; transition:color var(--mid) }
.ms-content { padding:12px; display:flex; flex-direction:column; gap:8px }
.ms-kpi-row { display:flex; gap:7px }
.ms-kpi { flex:1; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r1); padding:8px; transition:all var(--mid) }
.ms-kpi strong { display:block; font-family:'Cabinet Grotesk',sans-serif; font-size:.88rem; font-weight:800; color:var(--t1); transition:color var(--mid) }
.ms-kpi span { font-size:.58rem; color:var(--t3); transition:color var(--mid) }
.ms-chart { height:48px; display:flex; align-items:flex-end; gap:2px; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r1); padding:6px }
.ms-bar { flex:1; background:var(--pri); opacity:.2; border-radius:2px 2px 0 0 }
.ms-bar:nth-child(1){opacity:.15}.ms-bar:nth-child(2){opacity:.25;height:65%}.ms-bar:nth-child(3){opacity:.2;height:50%}.ms-bar:nth-child(4){opacity:.45;height:80%}.ms-bar:nth-child(5){opacity:.3;height:60%}.ms-bar:nth-child(6){opacity:.65;height:90%}.ms-bar:nth-child(7){opacity:.35;height:70%}
.ms-rows { display:flex; flex-direction:column; gap:5px }
.ms-row { height:8px; background:var(--bdr); border-radius:4px }
.ms-row:nth-child(1){width:75%}.ms-row:nth-child(2){width:55%}.ms-row:nth-child(3){width:65%}
/* Mobile mockup inside modal */
.ms-mobile-wrap { display:flex; justify-content:center; align-items:center; padding:16px; background:var(--bg2); min-height:180px }
.ms-mob { width:100px; height:180px; border-radius:18px; background:linear-gradient(135deg,#0ea5e9,#06b6d4); border:3px solid rgba(255,255,255,.3); overflow:hidden; position:relative }
.ms-mob-notch { width:28px; height:6px; background:rgba(0,0,0,.25); border-radius:3px; margin:8px auto 0 }
.ms-mob-content { padding:8px; text-align:center }
.ms-mob-hdr { font-size:.6rem; font-weight:800; color:#fff; margin-bottom:5px }
.ms-mob-ring { width:60px; height:60px; display:block; margin:0 auto 5px }
.ms-mob-stat { font-size:.55rem; color:rgba(255,255,255,.7) }
/* AI chat inside modal */
.ms-chat-wrap { background:linear-gradient(135deg,#7c3aed,#a855f7); padding:14px; min-height:180px; display:flex; flex-direction:column; gap:6px }
.ms-chat-msg { max-width:80%; font-size:.68rem; border-radius:10px; padding:6px 10px; color:#fff }
.ms-chat-msg.ai  { background:rgba(255,255,255,.15); align-self:flex-start }
.ms-chat-msg.usr { background:rgba(255,255,255,.3); align-self:flex-end }
/* Map inside modal */
.ms-map-wrap { background:linear-gradient(135deg,#10b981,#0ea5e9); padding:14px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between }
.ms-map-svg { width:100%; display:block }
.ms-map-stats { display:flex; gap:10px }
.ms-map-stat { flex:1; background:rgba(255,255,255,.15); border-radius:8px; padding:6px; text-align:center }
.ms-map-stat b { display:block; font-size:.75rem; font-weight:800; color:#fff }
.ms-map-stat span { font-size:.55rem; color:rgba(255,255,255,.6) }

.m-cta { display:flex; gap:10px; flex-wrap:wrap }

/* ─── GLOBAL / LEAFLET MAP ─── */
.global { background:var(--bg) }
.global-layout { display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start }
.map-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r5); overflow:hidden; box-shadow:var(--sh1); transition:all var(--mid) }
.map-topbar { display:flex; align-items:center; justify-content:space-between; padding:13px 20px; border-bottom:1px solid var(--bdr); transition:all var(--mid) }
.map-live-badge { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; color:var(--grn) }
.map-live-dot { width:7px; height:7px; border-radius:50%; background:var(--grn); animation:pulse 2s infinite; display:inline-block }
.map-hint-txt { display:inline-flex; align-items:center; gap:5px; font-size:.71rem; color:var(--t3); transition:color var(--mid) }
#leafletMap { height:380px; width:100%; z-index:1 }
/* Leaflet dark mode tile inversion */
[data-theme="dark"] .leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) }
[data-theme="dark"] .leaflet-container { background:#141413 }
/* Leaflet popup styling */
.leaflet-popup-content-wrapper { background:var(--card) !important; color:var(--t1) !important; border:1px solid var(--bdr) !important; border-radius:var(--r3) !important; box-shadow:var(--sh3) !important; padding:0 !important }
.leaflet-popup-content { margin:0 !important; padding:14px 16px !important; font-family:'Instrument Sans',sans-serif !important; font-size:.84rem !important }
.leaflet-popup-tip { background:var(--card) !important }
.lp-name { font-family:'Cabinet Grotesk',sans-serif; font-weight:800; font-size:.95rem; color:var(--t1); margin-bottom:3px }
.lp-sub { font-size:.76rem; color:var(--t3); margin-bottom:6px }
.lp-status { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; background:rgba(16,185,129,.12); color:var(--grn); padding:3px 8px; border-radius:100px }
.map-legend { display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 20px; border-top:1px solid var(--bdr); transition:border-color var(--mid) }
.ml-item { display:flex; align-items:center; gap:5px; font-size:.73rem; color:var(--t2); transition:color var(--mid) }
.ml-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

.global-perks { display:flex; flex-direction:column; gap:13px }
.perk-card { display:flex; gap:13px; align-items:flex-start; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r3); padding:17px 19px; box-shadow:var(--sh0); transition:all var(--fast) }
.perk-card:hover { box-shadow:var(--sh2); transform:translateX(4px); border-color:rgba(79,70,229,.2) }
.perk-icon { width:40px; height:40px; border-radius:var(--r1); background:var(--pri-soft); color:var(--pri); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--fast) }
.perk-card:hover .perk-icon { background:var(--pri); color:#fff }
.perk-card strong { display:block; font-size:.93rem; font-weight:700; color:var(--t1); margin-bottom:3px; transition:color var(--mid) }
.perk-card p { font-size:.81rem; color:var(--t2); line-height:1.55; transition:color var(--mid) }

/* ─── TEAM ─── */
.team { background:var(--bg2) }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.team-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r5); overflow:hidden; box-shadow:var(--sh0); transition:all var(--fast) }
.team-card:hover { box-shadow:var(--sh3); transform:translateY(-4px) }
.team-img { height:140px; overflow:hidden; background:var(--bg2) }
.team-img img { width:100%; height:100%; object-fit:cover; object-position:top }
.team-featured .team-img { height:170px }
.team-body { padding:15px 17px }
.tf { font-size:1rem; margin-bottom:5px }
.team-body h3 { font-size:1rem; margin-bottom:2px }
.team-role { font-size:.75rem; font-weight:700; color:var(--pri); display:block; margin-bottom:7px }
.team-body p { font-size:.81rem; color:var(--t2); line-height:1.6; margin-bottom:10px; transition:color var(--mid) }
.team-chips { display:flex; flex-wrap:wrap; gap:5px }
.team-chips span { font-size:.67rem; font-weight:700; padding:3px 8px; border-radius:100px; background:var(--bg2); border:1px solid var(--bdr); color:var(--t2); transition:all var(--mid) }

/* ─── TRUST ─── */
.trust { background:var(--bg) }
.logo-scroll-wrap { overflow:hidden; margin-bottom:42px; position:relative }
.logo-scroll-wrap::before,.logo-scroll-wrap::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2 }
.logo-scroll-wrap::before { left:0; background:linear-gradient(to right,var(--bg),transparent) }
.logo-scroll-wrap::after  { right:0; background:linear-gradient(to left,var(--bg),transparent) }
.logo-scroll { display:flex; animation:logoS 24s linear infinite }
.logo-item { flex-shrink:0; padding:12px 25px; font-size:.85rem; font-weight:700; color:var(--t3); white-space:nowrap; border-right:1px solid var(--bdr); transition:color var(--fast) }
.logo-item:hover { color:var(--t1) }
@keyframes logoS { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.trust-bento { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:42px }
.trust-metric { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r4); padding:21px; box-shadow:var(--sh0); transition:all var(--fast) }
.trust-metric:hover { box-shadow:var(--sh2); transform:translateY(-3px) }
.trust-wide { grid-column:span 2 }
.tm-icon { width:42px; height:42px; border-radius:var(--r1); background:var(--pri-soft); color:var(--pri); display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:all var(--fast) }
.trust-metric:hover .tm-icon { background:var(--pri); color:#fff }
.tm-score { font-family:'Cabinet Grotesk',sans-serif; font-size:2rem; font-weight:900; color:var(--t1); line-height:1; margin-bottom:3px; transition:color var(--mid) }
.tm-label { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); margin-bottom:2px; transition:color var(--mid) }
.tm-label-lg { font-size:.96rem; font-weight:700; color:var(--t1); margin-bottom:9px; transition:color var(--mid) }
.tm-source { font-size:.71rem; color:var(--t3); transition:color var(--mid) }
.tm-badges { display:flex; flex-wrap:wrap; gap:5px }
.tm-badges span { font-size:.69rem; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--bg2); border:1px solid var(--bdr); color:var(--t2); transition:all var(--mid) }
.tm-bar-row { display:flex; align-items:center; gap:10px }
.tm-bar { flex:1; height:6px; background:var(--bg2); border-radius:100px; overflow:hidden }
.tm-bar-fill { height:100%; width:0; background:var(--grad); border-radius:100px; transition:width 1.4s var(--ease) }
.tm-bar-row span { font-size:.83rem; font-weight:800; color:var(--pri) }
.trust-metric p { font-size:.83rem; color:var(--t2); line-height:1.65; margin-top:5px; transition:color var(--mid) }

.testi-wrap { overflow:hidden }
.testi-track { display:flex; gap:16px; transition:transform .5s var(--ease) }
.testi-card { min-width:340px; flex-shrink:0; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r4); padding:22px; box-shadow:var(--sh0); transition:all var(--fast) }
.testi-hi { background:var(--t1); border-color:transparent; box-shadow:var(--sh2) }
.tc-stars { font-size:.8rem; color:var(--amb); letter-spacing:2px; margin-bottom:11px }
.testi-card p { font-size:.89rem; color:var(--t2); line-height:1.75; margin-bottom:16px; font-style:italic; transition:color var(--mid) }
.testi-hi p { color:rgba(255,255,255,.7) }
.testi-card footer { display:flex; align-items:center; gap:10px }
.testi-card footer img { width:38px; height:38px; border-radius:50%; object-fit:cover }
.testi-card footer strong { display:block; font-size:.85rem; font-weight:700; color:var(--t1); transition:color var(--mid) }
.testi-hi footer strong { color:#fff }
.testi-card footer span { font-size:.73rem; color:var(--t3); transition:color var(--mid) }
.testi-hi footer span { color:rgba(255,255,255,.42) }
.testi-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px }
.testi-btn { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--bdr); background:var(--card); color:var(--t2); display:flex; align-items:center; justify-content:center; transition:all var(--fast) }
.testi-btn:hover { border-color:var(--pri); color:var(--pri) }
.testi-dots { display:flex; gap:6px }
.testi-dot { width:7px; height:7px; border-radius:50%; background:var(--bdr); cursor:pointer; transition:all var(--fast) }
.testi-dot.active { width:22px; border-radius:4px; background:var(--pri) }

/* ─── WHY ─── */
.why { background:var(--bg2) }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.why-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r4); padding:24px; box-shadow:var(--sh0); transition:all var(--fast); position:relative; overflow:hidden }
.why-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transition:transform var(--fast) }
.why-card:hover { box-shadow:var(--sh3); transform:translateY(-4px) }
.why-card:hover::after { transform:scaleX(1) }
.why-icon { width:50px; height:50px; border-radius:var(--r2); background:var(--bg2); color:var(--pri); display:flex; align-items:center; justify-content:center; margin-bottom:15px; transition:all var(--fast) }
.why-card:hover .why-icon { background:var(--pri); color:#fff }
.why-card h4 { margin-bottom:7px }
.why-card p { font-size:.85rem; color:var(--t2); line-height:1.65; margin-bottom:15px; transition:color var(--mid) }
.why-num { font-family:'Cabinet Grotesk',sans-serif; font-size:1.05rem; font-weight:900; background:var(--grad-t); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* ─── CONTACT ─── */
.contact { background:var(--bg) }
.contact-card { display:grid; grid-template-columns:1fr 1.2fr; background:var(--card); border:1px solid var(--bdr); border-radius:var(--r5); overflow:hidden; box-shadow:var(--sh3); transition:all var(--mid) }
.contact-left { padding:46px 40px; background:var(--bg2); border-right:1px solid var(--bdr); display:flex; flex-direction:column; gap:17px; transition:all var(--mid) }
.contact-left h2 { font-size:clamp(1.5rem,2.7vw,2.2rem); line-height:1.15 }
.contact-left p { font-size:.92rem; color:var(--t2); line-height:1.7; transition:color var(--mid) }
.contact-trust { display:flex; flex-direction:column; gap:8px }
.ct-item { display:flex; align-items:center; gap:7px; font-size:.84rem; color:var(--t2); transition:color var(--mid) }
.ct-item i { color:var(--grn); flex-shrink:0 }
.contact-avs { display:flex; align-items:center; gap:11px }
.ca-stack { display:flex }
.ca-stack img { width:31px; height:31px; border-radius:50%; border:2px solid var(--bg2); margin-right:-8px; object-fit:cover; transition:border-color var(--mid) }
.contact-avs span { font-size:.79rem; color:var(--t2); font-weight:500; transition:color var(--mid) }
.contact-right { padding:46px 40px }
form { display:flex; flex-direction:column; gap:14px }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.cf-field { display:flex; flex-direction:column; gap:5px }
.cf-field label { font-size:.77rem; font-weight:700; color:var(--t2); transition:color var(--mid) }
.cf-field input,.cf-field textarea,.cf-field select { background:var(--inp); border:1.5px solid var(--bdr); border-radius:var(--r2); padding:11px 14px; font-size:.89rem; color:var(--t1); outline:none; transition:all var(--fast); resize:vertical; -webkit-appearance:none }
.cf-field input::placeholder,.cf-field textarea::placeholder { color:var(--t3) }
.cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus { border-color:var(--pri); background:var(--bg); box-shadow:0 0 0 3px rgba(79,70,229,.1) }
.cf-note { font-size:.71rem; color:var(--t3); text-align:center; transition:color var(--mid) }

/* ─── FOOTER ─── */
.footer { background:var(--bg2); border-top:1px solid var(--bdr); transition:all var(--mid) }
.footer-inner { display:grid; grid-template-columns:1.8fr 2fr; gap:54px; padding:54px 24px 40px }
.footer-brand p { font-size:.85rem; color:var(--t2); margin-top:12px; margin-bottom:13px; max-width:285px; line-height:1.7; transition:color var(--mid) }
.footer-flags { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:1rem; margin-bottom:14px }
.flag-more { font-size:.61rem; font-weight:700; background:var(--pri-soft); color:var(--pri); padding:2px 6px; border-radius:100px }
.footer-socials { display:flex; gap:7px }
.footer-socials a { width:32px; height:32px; border-radius:8px; border:1.5px solid var(--bdr); display:flex; align-items:center; justify-content:center; color:var(--t3); transition:all var(--fast) }
.footer-socials a:hover { border-color:var(--pri); color:var(--pri) }
.footer-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.footer-col h5 { font-family:'Cabinet Grotesk',sans-serif; font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; color:var(--t1); transition:color var(--mid) }
.footer-col a { display:flex; align-items:center; gap:5px; font-size:.82rem; color:var(--t3); margin-bottom:8px; transition:color var(--fast) }
.footer-col a:hover { color:var(--pri) }
.hire-dot { font-size:.61rem; font-weight:700; background:rgba(16,185,129,.12); color:var(--grn); padding:2px 6px; border-radius:100px }
.footer-bottom { border-top:1px solid var(--bdr); padding:15px 24px; transition:border-color var(--mid) }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; font-size:.77rem; color:var(--t3); transition:color var(--mid) }

/* ─── TOAST ─── */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--t1); color:var(--bg); border-radius:100px; padding:11px 20px; display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; opacity:0; pointer-events:none; z-index:9999; box-shadow:var(--sh2); white-space:nowrap; transition:all .3s var(--ease) }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .52s var(--ease),transform .52s var(--ease) }
.reveal.in { opacity:1; transform:translateY(0) }

/* ─── RESPONSIVE ─── */
@media(max-width:1100px) {
  .hero__inner { grid-template-columns:1fr; gap:40px }
  .hero__right { display:none }
  .hbg-rings,.hbg-glow,.hbg-dot,.hbg-lines { display:none }
  .global-layout { grid-template-columns:1fr }
}
@media(max-width:1024px) {
  .services-layout { grid-template-columns:1fr }
  .team-grid { grid-template-columns:repeat(2,1fr) }
  .trust-bento { grid-template-columns:repeat(2,1fr) }
  .trust-wide { grid-column:span 2 }
  .why-grid { grid-template-columns:repeat(2,1fr) }
  .contact-card { grid-template-columns:1fr }
  .contact-left { border-right:none; border-bottom:1px solid var(--bdr) }
  .footer-inner { grid-template-columns:1fr; gap:32px }
  .footer-cols { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px) {
  .section { padding:64px 0 }
  .navbar__links { display:none }
  .hamburger { display:flex }
  .hero { padding:100px 0 0 }
  .hero__ctas { flex-direction:column; align-items:flex-start }
  .work-grid { grid-template-columns:1fr }
  .work-wide { grid-column:span 1; grid-template-columns:1fr }
  .work-wide .wc-visual { height:200px }
  .team-grid { grid-template-columns:1fr }
  .why-grid { grid-template-columns:1fr 1fr }
  .trust-bento { grid-template-columns:1fr }
  .trust-wide { grid-column:span 1 }
  .testi-card { min-width:280px }
  .cf-row { grid-template-columns:1fr }
  .contact-left,.contact-right { padding:28px 22px }
  .sec-split { flex-direction:column; align-items:flex-start }
  .process-arr { display:none }
  .process-step { min-width:100px }
  .m-screens { grid-template-columns:1fr }
  .m-results { grid-template-columns:1fr 1fr }
  .footer-bottom-inner { flex-direction:column; gap:5px; text-align:center }
}
@media(max-width:480px) {
  h1 { font-size:2.2rem } h2 { font-size:1.75rem }
  .hero__ctas .btn { width:100%; justify-content:center }
  .why-grid { grid-template-columns:1fr }
  .footer-cols { grid-template-columns:1fr 1fr }
  .sstat { padding:12px 20px }
  .m-results { grid-template-columns:1fr }
}