/* ═══════════════════════════════════════════
   WSEvolves — styles.css  IMPROVED
   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) }
.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__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 { 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) }

.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) }

.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) }

.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-grid-layout { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; 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(--r4); padding:24px; box-shadow:var(--sh1); transition:all var(--fast) }
.svc-card:hover { box-shadow:var(--sh2); transform:translateY(-3px) }
.svc-wide { grid-column:span 2 }
.svc-icon-wrap { width:44px; height:44px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; margin-bottom:12px; transition:all var(--fast) }
.svc-blue  .svc-icon-wrap { background:rgba(59,130,246,.12);   color:#3b82f6 }
.svc-sky   .svc-icon-wrap { background:rgba(14,165,233,.12);  color:#0ea5e9 }
.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-rose  .svc-icon-wrap { background:rgba(244,63,94,.12);   color:#f43f5e }
.svc-blue:hover  .svc-icon-wrap { background:#3b82f6; color:#fff }
.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-rose:hover  .svc-icon-wrap { background:#f43f5e; color:#fff }
.svc-card h4 { font-size:.98rem; font-weight:600; margin-bottom:8px; color:var(--t1) }
.svc-card p { font-size:.85rem; color:var(--t2); line-height:1.6; margin-bottom:14px; transition:color var(--mid) }
.svc-link { margin-top:auto }

.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) }

.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) }
.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) }
.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%}
.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) }
.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 }
.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 / 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 }
[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-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 — REDESIGNED  (replaces old .team-grid styles)
   ═══════════════════════════════════════════════════════ */
.team { background:var(--bg2); position:relative; overflow:hidden }

/* Ambient gradient behind the team section */
.team::before {
  content:'';
  position:absolute;
  width:800px; height:800px;
  top:-200px; left:-200px;
  background:radial-gradient(circle,rgba(79,70,229,.06) 0%,transparent 70%);
  pointer-events:none;
}
.team::after {
  content:'';
  position:absolute;
  width:600px; height:600px;
  bottom:-100px; right:-100px;
  background:radial-gradient(circle,rgba(168,85,247,.06) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Main grid layout ── */
.team-grid-new {
  display:grid;
  grid-template-columns: 5fr 7fr 4fr 4fr 4fr;
  grid-template-rows: auto auto;
  gap:18px;
  position:relative;
  z-index:1;
}

/* Founder spans full height, 1 col */
.tcard-founder {
  grid-column:1;
  grid-row:1 / span 2;
}

/* Side col (CTO + AI) stacked in col 2 */
.team-side-col {
  grid-column:2;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* 3 compact cards in cols 3-5, row 1-2 merged */
.tcard-compact { grid-row:1 / span 2; }
.tcard-ux { grid-column:3; }
.tcard-fe { grid-column:4; }
.tcard-cs { grid-column:5; }

/* ── BASE CARD ── */
.tcard {
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:var(--r5);
  overflow:hidden;
  box-shadow:var(--sh0);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Per-card glow on hover via pseudo */
.tcard::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
  z-index:0;
  border-radius:inherit;
}
.tcard:hover { transform:translateY(-6px); }
.tcard:hover::before { opacity:1; }
.tcard-founder::before  { background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(168,85,247,.04)); }
.tcard-founder:hover     { box-shadow:0 24px 60px rgba(99,102,241,.18); border-color:rgba(99,102,241,.2); }
.tcard-cto::before       { background:linear-gradient(135deg,rgba(6,182,212,.08),rgba(99,102,241,.04)); }
.tcard-cto:hover         { box-shadow:0 20px 50px rgba(6,182,212,.14); border-color:rgba(6,182,212,.2); }
.tcard-ai::before        { background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(244,63,94,.04)); }
.tcard-ai:hover          { box-shadow:0 20px 50px rgba(168,85,247,.14); border-color:rgba(168,85,247,.2); }
.tcard-ux::before        { background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(244,63,94,.04)); }
.tcard-ux:hover          { box-shadow:0 20px 50px rgba(245,158,11,.12); border-color:rgba(245,158,11,.2); }
.tcard-fe::before        { background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.04)); }
.tcard-fe:hover          { box-shadow:0 20px 50px rgba(16,185,129,.12); border-color:rgba(16,185,129,.2); }
.tcard-cs::before        { background:linear-gradient(135deg,rgba(244,63,94,.08),rgba(245,158,11,.04)); }
.tcard-cs:hover          { box-shadow:0 20px 50px rgba(244,63,94,.12); border-color:rgba(244,63,94,.2); }

/* ── Photo ── */
.tcard-img-wrap {
  position:relative;
  overflow:hidden;
  height:260px;
  flex-shrink:0;
}
.tcard-img-sm { height:170px; }

.tcard-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
  filter:saturate(.9);
  transition:transform .5s, filter .5s;
}
.tcard:hover .tcard-img-wrap img {
  transform:scale(1.05);
  filter:saturate(1.1);
}

/* Gradient fade at bottom of photo */
.tcard-img-wrap::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Accent stripe */
.tcard-stripe {
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  z-index:2;
  transition:height .3s;
}
.tcard:hover .tcard-stripe { height:4px; }
.tcs-indigo { background:linear-gradient(90deg,#6366f1,#8b5cf6,#a855f7); }
.tcs-cyan   { background:linear-gradient(90deg,#06b6d4,#6366f1); }
.tcs-purple { background:linear-gradient(90deg,#8b5cf6,#f43f5e); }
.tcs-amber  { background:linear-gradient(90deg,#f59e0b,#f43f5e); }
.tcs-emerald{ background:linear-gradient(90deg,#10b981,#06b6d4); }
.tcs-rose   { background:linear-gradient(90deg,#f43f5e,#f59e0b); }

/* Flag */
.tcard-flag {
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  font-size:18px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:100px;
  padding:3px 9px;
  line-height:1;
}

/* Status badge */
.tcard-status {
  position:absolute;
  top:14px; left:14px;
  z-index:3;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:100px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(16,185,129,.15);
  border:1px solid rgba(16,185,129,.3);
  color:#10b981;
  backdrop-filter:blur(8px);
}
.tcard-pulse {
  width:6px; height:6px;
  background:#10b981;
  border-radius:50%;
  flex-shrink:0;
  animation:tcPulse 2s infinite;
}
@keyframes tcPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* ── Card body ── */
.tcard-body {
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  position:relative;
  z-index:1;
}
.tcard-body-sm {
  padding:16px 18px 18px;
  gap:8px;
}

/* Role badge */
.tcard-role-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:100px;
  border:1px solid;
  align-self:flex-start;
}
.trb-indigo { color:#6366f1; border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.08); }
.trb-cyan   { color:#06b6d4; border-color:rgba(6,182,212,.3);  background:rgba(6,182,212,.08); }
.trb-purple { color:#a855f7; border-color:rgba(168,85,247,.3); background:rgba(168,85,247,.08); }
.trb-amber  { color:#f59e0b; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.08); }
.trb-emerald{ color:#10b981; border-color:rgba(16,185,129,.3); background:rgba(16,185,129,.08); }
.trb-rose   { color:#f43f5e; border-color:rgba(244,63,94,.3);  background:rgba(244,63,94,.08); }

/* Name */
.tcard-name {
  font-family:'Cabinet Grotesk',sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--t1);
  line-height:1.1;
  transition:color var(--mid);
}
.tcard-name-sm { font-size:17px; }

/* Bio */
.tcard-bio {
  font-size:13px;
  color:var(--t2);
  line-height:1.6;
  flex:1;
  transition:color var(--mid);
}

/* Stats row */
.tcard-stats {
  display:flex;
  align-items:center;
  gap:0;
  padding:12px 0;
  border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);
  transition:border-color var(--mid);
}
.tcard-stat { flex:1; text-align:center; }
.tsn {
  display:block;
  font-family:'Cabinet Grotesk',sans-serif;
  font-size:17px;
  font-weight:900;
  background:var(--grad-t);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
}
.tsl {
  display:block;
  font-size:10px;
  color:var(--t3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:color var(--mid);
}
.tcard-stat-div {
  width:1px; height:32px;
  background:var(--bdr);
}

/* Chips */
.tcard-chips {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.tcard-chips span {
  font-size:11px;
  font-weight:600;
  padding:3px 10px;
  border-radius:100px;
  background:var(--bg2);
  border:1px solid var(--bdr);
  color:var(--t2);
  transition:color .2s, border-color .2s, background .2s;
}
.tcard:hover .tcard-chips span {
  border-color:rgba(79,70,229,.2);
  color:var(--t1);
}

/* Social */
.tcard-social {
  display:flex;
  gap:7px;
  padding-top:12px;
  border-top:1px solid var(--bdr);
  transition:border-color var(--mid);
}
.tsoc-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid var(--bdr);
  background:transparent;
  color:var(--t3);
  cursor:pointer;
  text-decoration:none;
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.tsoc-btn:hover {
  color:var(--pri);
  border-color:rgba(99,102,241,.3);
  background:rgba(99,102,241,.06);
  transform:translateY(-2px);
}

/* ── Hiring Bar ── */
.team-hire-bar {
  margin-top:24px;
  padding:28px 36px;
  border-radius:var(--r5);
  border:1px solid var(--bdr);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  overflow:hidden;
  flex-wrap:wrap;
  z-index:1;
}
/* Top gradient line */
.team-hire-bar::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#6366f1,#a855f7,transparent);
  opacity:.6;
}
/* Subtle background glow */
.team-hire-bar::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.04) 0%,rgba(168,85,247,.02) 50%,transparent 100%);
  pointer-events:none;
}
.thb-left {
  display:flex;
  align-items:center;
  gap:18px;
  position:relative;
  z-index:1;
  flex:1;
  min-width:260px;
}
.thb-icon {
  width:48px; height:48px;
  border-radius:var(--r2);
  background:var(--pri-soft);
  color:var(--pri);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all var(--fast);
}
.team-hire-bar:hover .thb-icon { background:var(--pri); color:#fff; }
.thb-left h3 {
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--t1);
  margin-bottom:4px;
  transition:color var(--mid);
}
.thb-left p {
  font-size:13px;
  color:var(--t2);
  line-height:1.5;
  transition:color var(--mid);
}
.thb-right {
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:1;
  flex-wrap:wrap;
}
.thb-avs { display:flex; }
.thb-avs img {
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid var(--card);
  margin-left:-10px;
  object-fit:cover;
  transition:border-color var(--mid);
}
.thb-avs img:first-child { margin-left:0; }
.thb-av-count {
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid var(--card);
  margin-left:-10px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
}

/* ─── 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:linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); border-color:transparent; box-shadow:0 12px 40px rgba(79,70,229,.25) }
.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,.85) }
.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,.65) }
.testi-hi .tc-stars { color:#fbbf24 }
.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); margin-top: 5px; padding-top: 50px; 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(3,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) }
.footer-contact { display:flex; flex-direction:column; gap:12px }
.contact-item { display:flex; flex-direction:column; gap:4px }
.contact-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pri); margin-bottom:2px }
.contact-item a { font-size:.82rem; color:var(--t3); text-decoration:none; transition:color var(--fast) }
.contact-item a:hover { color:var(--pri) }
.contact-item p { font-size:.82rem; color:var(--t3); margin:0; line-height:1.5 }
.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 BREAKPOINTS
   ═══════════════════════════════════════ */
@media(max-width:1200px) {
  .team-grid-new {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .tcard-founder { grid-column:1; grid-row:1; }
  .team-side-col  { grid-column:2 / span 2; grid-row:1; flex-direction:row; gap:18px; }
  .team-side-col .tcard { flex:1; }
  .tcard-ux  { grid-column:1; grid-row:2; }
  .tcard-fe  { grid-column:2; grid-row:2; }
  .tcard-cs  { grid-column:3; grid-row:2; }
  .tcard-compact { grid-row:2; }
}

@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-grid-layout { 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:900px) {
  .team-grid-new {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .tcard-founder { grid-column:1 / span 2; grid-row:1; flex-direction:row; }
  .tcard-founder .tcard-img-wrap { width:220px; height:auto; flex-shrink:0; }
  .team-side-col  { grid-column:1 / span 2; grid-row:2; flex-direction:row; }
  .team-side-col .tcard { flex:1; }
  .tcard-ux  { grid-column:1; grid-row:3; }
  .tcard-fe  { grid-column:2; grid-row:3; }
  .tcard-cs  { grid-column:1 / span 2; grid-row:4; flex-direction:row; }
  .tcard-cs .tcard-img-wrap { width:160px; height:auto; border-radius:var(--r5) 0 0 var(--r5); }
  .tcard-compact { grid-row:auto; }
}

@media(max-width:768px) {
  .section { padding:64px 0 }
  .navbar__links { display:none }
  .hamburger { display:flex }
  .services-grid-layout { grid-template-columns:1fr }
  .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 }
  .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 }

  /* Team mobile */
  .team-grid-new {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .tcard-founder { grid-column:1; grid-row:auto; flex-direction:column; }
  .tcard-founder .tcard-img-wrap { width:100%; height:220px; }
  .team-side-col { grid-column:1; grid-row:auto; flex-direction:column; }
  .tcard-ux,.tcard-fe,.tcard-cs { grid-column:1; grid-row:auto; flex-direction:column; }
  .tcard-cs .tcard-img-wrap { width:100%; height:auto; border-radius:var(--r5) var(--r5) 0 0; }
  .team-hire-bar { flex-direction:column; align-items:flex-start; padding:22px 24px; }
  .thb-right { width:100%; justify-content:space-between; }
}

@media(max-width:600px) {
  .team-grid-new { gap:14px; }
  .team-side-col { gap:14px; }
  .thb-right { flex-direction:column; align-items:flex-start; gap:12px; }
  .thb-right .btn { width:100%; justify-content: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 }
}
/* ── TOKENS ── */
    :root {
      --bg:      #f8f7f5;
      --card:    #ffffff;
      --bdr:     rgba(17,17,16,.07);
      --t1:      #0e0e0d;
      --t2:      #52524f;
      --t3:      #9a9a96;
      --pri:     #4f46e5;
      --grad:    linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);
      --grad-b:  linear-gradient(135deg,#06b6d4,#6366f1);
      --grad-c:  linear-gradient(135deg,#f43f5e,#a855f7);
      --grad-d:  linear-gradient(135deg,#10b981,#06b6d4);
      --grad-e:  linear-gradient(135deg,#f59e0b,#f43f5e);
      --grad-f:  linear-gradient(135deg,#f43f5e,#f59e0b);
      --ease:    cubic-bezier(.4,0,.2,1);
      --font-h:  'Cabinet Grotesk', sans-serif;
      --font-b:  'Instrument Sans', sans-serif;
    }
    [data-theme="dark"] {
      --bg: #080808;
      --card: #111110;
      --bdr: rgba(255,255,255,.07);
      --t1: #f0eeeb;
      --t2: #a6a6a2;
      --t3: #525250;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-b);
      background: var(--bg);
      color: var(--t1);
      overflow-x: hidden;
    }

    /* ─── SECTION SHELL ─── */
    .team-section {
      padding: 100px 0 120px;
      position: relative;
      overflow: hidden;
    }

    /* Animated mesh gradient background */
    .team-mesh {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .team-mesh::before {
      content: '';
      position: absolute;
      width: 900px; height: 900px;
      top: -300px; left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse at center,
        rgba(99,102,241,.13) 0%,
        rgba(168,85,247,.08) 35%,
        transparent 70%);
      animation: meshDrift 12s ease-in-out infinite alternate;
    }
    .team-mesh::after {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      bottom: -100px; right: -100px;
      background: radial-gradient(ellipse at center,
        rgba(6,182,212,.1) 0%,
        transparent 60%);
      animation: meshDrift 15s ease-in-out infinite alternate-reverse;
    }
    @keyframes meshDrift {
      from { transform: translateX(-50%) scale(1) rotate(0deg); }
      to   { transform: translateX(-50%) scale(1.15) rotate(8deg); }
    }

    /* Animated grid pattern */
    .team-grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }

    .container { max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

    /* ─── HEADER ─── */
    .team-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 80px;
      flex-wrap: wrap;
      gap: 20px;
    }
    .sec-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--pri);
      margin-bottom: 14px;
    }
    .sec-eyebrow::before {
      content: '';
      display: block;
      width: 24px; height: 2px;
      border-radius: 2px;
      background: var(--grad);
    }
    .sec-title {
      font-family: var(--font-h);
      font-size: clamp(36px, 5vw, 58px);
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: -.03em;
      color: var(--t1);
    }
    .gradient-text {
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .btn-hire {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 100px;
      background: var(--grad);
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 4px 20px rgba(99,102,241,.35);
      white-space: nowrap;
    }
    .btn-hire:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,.45); }

    /* ─── CENTRAL FOUNDER ─── */
    .team-universe {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 72px;
    }

    /* Rotating orbital ring */
    .orbit-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px dashed rgba(99,102,241,.25);
      pointer-events: none;
    }
    .orbit-ring-1 {
      width: 320px; height: 320px;
      animation: spin 40s linear infinite;
    }
    .orbit-ring-2 {
      width: 440px; height: 440px;
      animation: spin 60s linear infinite reverse;
      border-color: rgba(168,85,247,.15);
    }
    .orbit-ring-3 {
      width: 560px; height: 560px;
      animation: spin 90s linear infinite;
      border-color: rgba(6,182,212,.1);
    }
    @keyframes spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

    /* Orbiting tech icon dots */
    .orbit-dot {
      position: absolute;
      top: 50%; left: 50%;
      pointer-events: none;
    }
    .orbit-dot-inner {
      width: 38px; height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 800;
      font-family: var(--font-h);
      box-shadow: 0 4px 16px rgba(0,0,0,.15);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.2);
      /* Counter-rotate so icons stay upright */
    }

    /* Place orbit dots on the rings */
    /* Ring 1 dots (r=160) */
    .od-r1-a { animation: orbitR1 40s linear infinite; }
    .od-r1-b { animation: orbitR1 40s linear infinite; animation-delay: -20s; }
    @keyframes orbitR1 {
      from { transform: translate(-50%,-50%) rotate(0deg) translate(160px,0) rotate(0deg); }
      to   { transform: translate(-50%,-50%) rotate(360deg) translate(160px,0) rotate(-360deg); }
    }

    /* Ring 2 dots (r=220) */
    .od-r2-a { animation: orbitR2 60s linear infinite; }
    .od-r2-b { animation: orbitR2 60s linear infinite; animation-delay: -15s; }
    .od-r2-c { animation: orbitR2 60s linear infinite; animation-delay: -30s; }
    @keyframes orbitR2 {
      from { transform: translate(-50%,-50%) rotate(0deg) translate(220px,0) rotate(0deg); }
      to   { transform: translate(-50%,-50%) rotate(-360deg) translate(220px,0) rotate(360deg); }
    }

    /* Ring 3 dots (r=280) */
    .od-r3-a { animation: orbitR3 90s linear infinite; }
    .od-r3-b { animation: orbitR3 90s linear infinite; animation-delay: -30s; }
    .od-r3-c { animation: orbitR3 90s linear infinite; animation-delay: -60s; }
    .od-r3-d { animation: orbitR3 90s linear infinite; animation-delay: -15s; }
    @keyframes orbitR3 {
      from { transform: translate(-50%,-50%) rotate(0deg) translate(280px,0) rotate(0deg); }
      to   { transform: translate(-50%,-50%) rotate(360deg) translate(280px,0) rotate(-360deg); }
    }

    /* ── Founder hero card ── */
    .founder-hero {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding-bottom: 36px;
    }

    /* Animated gradient ring around founder avatar */
    .founder-ring-wrap {
      position: relative;
      width: 180px; height: 180px;
      margin-bottom: 24px;
    }
    .founder-ring-wrap::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: var(--grad);
      animation: rotateBorder 4s linear infinite;
      z-index: 0;
    }
    .founder-ring-wrap::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: var(--grad);
      filter: blur(16px);
      opacity: .5;
      z-index: 0;
      animation: rotateBorder 4s linear infinite reverse;
    }
    @keyframes rotateBorder {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .founder-avatar {
      position: relative;
      z-index: 2;
      width: 172px; height: 172px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid var(--bg);
      top: 4px; left: 4px;
    }
    .founder-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top;
    }

    /* Status pulse */
    .founder-status {
      position: absolute;
      bottom: 8px; right: 8px;
      z-index: 3;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: #10b981;
      border: 3px solid var(--bg);
      box-shadow: 0 0 0 0 rgba(16,185,129,.4);
      animation: statusPulse 2s ease-out infinite;
    }
    @keyframes statusPulse {
      0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
      70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
      100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    }

    .founder-info { text-align: center; }
    .founder-name {
      font-family: var(--font-h);
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -.025em;
      margin-bottom: 4px;
    }
    .founder-role {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 100px;
      background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
      border: 1px solid rgba(99,102,241,.25);
      color: var(--pri);
      display: inline-block;
      margin-bottom: 12px;
    }
    .founder-bio {
      font-size: 14px;
      color: var(--t2);
      max-width: 320px;
      line-height: 1.65;
      margin: 0 auto 16px;
    }
    .founder-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 16px;
    }
    .fchip {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 100px;
      background: var(--bdr-bg, rgba(99,102,241,.07));
      border: 1px solid rgba(99,102,241,.15);
      color: var(--pri);
    }
    .founder-socials { display: flex; gap: 8px; justify-content: center; }
    .fsoc {
      width: 32px; height: 32px;
      border-radius: 10px;
      border: 1px solid var(--bdr);
      background: var(--card);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--t3);
      transition: color .2s, border-color .2s, transform .2s;
      cursor: pointer;
    }
    .fsoc:hover { color: var(--pri); border-color: rgba(99,102,241,.3); transform: translateY(-2px); }
    .fsoc svg { width: 14px; height: 14px; }

    /* ─── STATS ROW (founder) ─── */
    .founder-stats {
      display: flex;
      gap: 0;
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: 100px;
      padding: 0;
      margin: 20px auto 0;
      width: fit-content;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,.06);
    }
    .fstat {
      padding: 12px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .fstat + .fstat { border-left: 1px solid var(--bdr); }
    .fstat-n {
      font-family: var(--font-h);
      font-size: 20px;
      font-weight: 900;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .fstat-l {
      font-size: 10px;
      font-weight: 600;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    /* ─── TEAM CONSTELLATION (5 members) ─── */
    .team-constellation {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      max-width: 1000px;
      margin: 0 auto;
    }

    /* ── Member card ── */
    .member-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: 28px;
      padding: 28px 24px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      width: 200px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s;
    }

    /* Per-card gradient glow on hover */
    .member-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
      border-radius: inherit;
    }
    .member-card:hover { transform: translateY(-8px) scale(1.03); }
    .member-card:hover::before { opacity: 1; }

    .mc-indigo::before { background: linear-gradient(160deg, rgba(99,102,241,.1), transparent 60%); }
    .mc-indigo:hover   { box-shadow: 0 20px 60px rgba(99,102,241,.2); border-color: rgba(99,102,241,.25); }
    .mc-cyan::before   { background: linear-gradient(160deg, rgba(6,182,212,.1), transparent 60%); }
    .mc-cyan:hover     { box-shadow: 0 20px 60px rgba(6,182,212,.18); border-color: rgba(6,182,212,.25); }
    .mc-purple::before { background: linear-gradient(160deg, rgba(168,85,247,.1), transparent 60%); }
    .mc-purple:hover   { box-shadow: 0 20px 60px rgba(168,85,247,.18); border-color: rgba(168,85,247,.25); }
    .mc-amber::before  { background: linear-gradient(160deg, rgba(245,158,11,.1), transparent 60%); }
    .mc-amber:hover    { box-shadow: 0 20px 60px rgba(245,158,11,.16); border-color: rgba(245,158,11,.25); }
    .mc-emerald::before{ background: linear-gradient(160deg, rgba(16,185,129,.1), transparent 60%); }
    .mc-emerald:hover  { box-shadow: 0 20px 60px rgba(16,185,129,.16); border-color: rgba(16,185,129,.25); }
    .mc-rose::before   { background: linear-gradient(160deg, rgba(244,63,94,.1), transparent 60%); }
    .mc-rose:hover     { box-shadow: 0 20px 60px rgba(244,63,94,.16); border-color: rgba(244,63,94,.25); }

    /* Animated gradient stripe at top */
    .member-card-stripe {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 28px 28px 0 0;
      background-size: 200% 100%;
      animation: stripeShimmer 3s ease-in-out infinite;
    }
    @keyframes stripeShimmer {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .stripe-indigo { background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1); }
    .stripe-cyan   { background: linear-gradient(90deg, #06b6d4, #6366f1, #06b6d4); }
    .stripe-purple { background: linear-gradient(90deg, #8b5cf6, #f43f5e, #8b5cf6); }
    .stripe-amber  { background: linear-gradient(90deg, #f59e0b, #f43f5e, #f59e0b); }
    .stripe-emerald{ background: linear-gradient(90deg, #10b981, #06b6d4, #10b981); }
    .stripe-rose   { background: linear-gradient(90deg, #f43f5e, #fb7185, #f43f5e); }

    /* ── Circular avatar with animated ring ── */
    .member-avatar-wrap {
      position: relative;
      width: 96px; height: 96px;
      margin-bottom: 16px;
    }
    /* Spinning gradient ring */
    .member-avatar-ring {
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      background-size: 200% 200%;
      animation: ringRotate 4s linear infinite;
      opacity: .85;
    }
    @keyframes ringRotate {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .ring-indigo { background: conic-gradient(#6366f1, #a855f7, #06b6d4, #6366f1); }
    .ring-cyan   { background: conic-gradient(#06b6d4, #6366f1, #a855f7, #06b6d4); }
    .ring-purple { background: conic-gradient(#8b5cf6, #f43f5e, #f59e0b, #8b5cf6); }
    .ring-amber  { background: conic-gradient(#f59e0b, #ef4444, #a855f7, #f59e0b); }
    .ring-emerald{ background: conic-gradient(#10b981, #06b6d4, #6366f1, #10b981); }
    .ring-rose   { background: conic-gradient(#f43f5e, #fb7185, #f472b6, #f43f5e); }

    .member-avatar {
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid var(--bg);
      z-index: 2;
    }
    .member-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top;
    }
    .member-flag {
      position: absolute;
      bottom: -2px; right: -2px;
      z-index: 3;
      font-size: 16px;
      background: var(--card);
      border-radius: 50%;
      width: 26px; height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--bg);
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }

    /* Animated role icon chip */
    .member-icon-chip {
      position: absolute;
      top: 14px; right: 14px;
      width: 32px; height: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border: 1px solid rgba(255,255,255,.25);
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
      animation: iconFloat 3s ease-in-out infinite;
      z-index: 2;
    }
    .mic-indigo { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
    .mic-cyan   { background: linear-gradient(135deg,#06b6d4,#0ea5e9); }
    .mic-purple { background: linear-gradient(135deg,#8b5cf6,#a855f7); }
    .mic-amber  { background: linear-gradient(135deg,#f59e0b,#f43f5e); }
    .mic-emerald{ background: linear-gradient(135deg,#10b981,#06b6d4); }
    .mic-rose   { background: linear-gradient(135deg,#f43f5e,#fb7185); }
    @keyframes iconFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-4px) rotate(5deg); }
    }

    .member-name {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--t1);
      margin-bottom: 4px;
      text-align: center;
    }
    .member-role {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 10px;
      text-align: center;
    }
    .member-bio {
      font-size: 12px;
      color: var(--t2);
      line-height: 1.6;
      text-align: center;
      margin-bottom: 14px;
      flex: 1;
    }

    /* Member skill dots */
    .member-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
      margin-bottom: 14px;
    }
    .mskill {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 100px;
      background: rgba(0,0,0,.04);
      border: 1px solid var(--bdr);
      color: var(--t2);
      transition: background .2s, border-color .2s, color .2s;
    }
    .member-card:hover .mskill { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.2); color: var(--pri); }

    /* Social row */
    .member-socials {
      display: flex;
      gap: 6px;
      justify-content: center;
      padding-top: 12px;
      border-top: 1px solid var(--bdr);
      width: 100%;
    }
    .msoc {
      width: 28px; height: 28px;
      border-radius: 8px;
      border: 1px solid var(--bdr);
      background: transparent;
      color: var(--t3);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: color .2s, border-color .2s, transform .2s;
      cursor: pointer;
    }
    .msoc:hover { color: var(--pri); border-color: rgba(99,102,241,.3); transform: translateY(-2px); }
    .msoc svg { width: 12px; height: 12px; }

    /* ─── HIRING BAR ─── */
    .team-hire-bar {
      margin-top: 56px;
      padding: 30px 40px;
      border-radius: 28px;
      border: 1px solid var(--bdr);
      background: var(--card);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
      overflow: hidden;
      flex-wrap: wrap;
      z-index: 1;
    }
    /* Animated top gradient line */
    .team-hire-bar::before {
      content: '';
      position: absolute;
      top: 0; left: -100%; right: -100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #6366f1, #a855f7, #06b6d4, transparent);
      animation: barLine 4s linear infinite;
    }
    @keyframes barLine {
      from { transform: translateX(-100%); }
      to   { transform: translateX(100%); }
    }
    .team-hire-bar::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(99,102,241,.04), rgba(168,85,247,.02), transparent);
      pointer-events: none;
    }
    .thb-left {
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
      z-index: 1;
      flex: 1;
      min-width: 260px;
    }
    .thb-icon-wrap {
      position: relative;
      flex-shrink: 0;
    }
    .thb-icon {
      width: 52px; height: 52px;
      border-radius: 16px;
      background: var(--grad);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 20px rgba(99,102,241,.35);
      animation: iconFloat 3s ease-in-out infinite;
    }
    .thb-left h3 {
      font-family: var(--font-h);
      font-size: clamp(18px, 2.5vw, 24px);
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: 5px;
    }
    .thb-left p {
      font-size: 13.5px;
      color: var(--t2);
      line-height: 1.5;
      max-width: 380px;
    }
    .thb-right {
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      z-index: 1;
      flex-wrap: wrap;
    }
    .thb-avs { display: flex; }
    .thb-avs img {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2px solid var(--card);
      margin-left: -10px;
      object-fit: cover;
      transition: border-color .2s;
    }
    .thb-avs img:first-child { margin-left: 0; }
    .thb-av-count {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2px solid var(--card);
      margin-left: -10px;
      background: var(--grad);
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    /* ─── REVEAL ANIMATIONS ─── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-scale {
      opacity: 0;
      transform: scale(.92);
      transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
    }
    .reveal-scale.visible { opacity: 1; transform: scale(1); }

    /* Stagger delays */
    .d1 { transition-delay: .05s; }
    .d2 { transition-delay: .12s; }
    .d3 { transition-delay: .19s; }
    .d4 { transition-delay: .26s; }
    .d5 { transition-delay: .33s; }
    .d6 { transition-delay: .40s; }
    .d7 { transition-delay: .47s; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      .orbit-ring-3 { display: none; }
      .od-r3-a,.od-r3-b,.od-r3-c,.od-r3-d { display: none; }
    }
    @media (max-width: 680px) {
      .team-section { padding: 70px 0 90px; }
      .team-header { margin-bottom: 50px; }
      .orbit-ring-1,.orbit-ring-2,.orbit-ring-3 { display: none; }
      .orbit-dot { position: relative; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; animation: none !important; }
      .founder-hero { display: flex !important; }
      .founder-ring-wrap { width: 148px; height: 148px; }
      .founder-avatar { width: 140px; height: 140px; }
      .team-hire-bar { flex-direction: column; align-items: flex-start; padding: 24px 24px; }
      .thb-right { width: 100%; }
      .thb-right .btn-hire { width: 100%; justify-content: center; }
    }
    @media (max-width: 500px) {
      .member-card { width: 100%; max-width: 360px; flex-direction: row; align-items: flex-start; padding: 20px; gap: 16px; border-radius: 20px; }
      .member-avatar-wrap { width: 72px; height: 72px; flex-shrink: 0; margin-bottom: 0; }
      .member-icon-chip { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 12px; }
      .member-name,.member-role,.member-bio,.member-skills { text-align: left; }
      .member-skills { justify-content: flex-start; }
      .member-socials { justify-content: flex-start; }
      .team-constellation { gap: 12px; }
    }