/* ---------- TOKENS ---------- */
:root {
  --navy-950: #05102A;
  --navy-900: #0A1A3A;
  --navy-800: #0E2148;
  --navy-700: #152A5C;
  --navy-600: #1E3A75;
  --teal: #4ACCC0;
  --cyan: #5AB8E8;
  --accent-gradient: linear-gradient(135deg, #5AB8E8 0%, #4ACCC0 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(90,184,232,.18) 0%, rgba(74,204,192,.18) 100%);

  --ink-100: #F4F6FB;
  --ink-200: #D8DEEC;
  --ink-300: #A6B0C8;
  --ink-400: #6B7691;
  --ink-500: #48526B;
  --ink-600: #2B3346;
  --ink-700: #1A2036;

  --bg: var(--navy-900);
  --bg-2: var(--navy-800);
  --bg-3: var(--navy-700);
  --fg: var(--ink-100);
  --fg-2: var(--ink-300);
  --fg-3: var(--ink-400);
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --pad-section: clamp(80px, 10vw, 160px);
  --pad-x: clamp(24px, 5vw, 96px);
  --gap: 24px;

  --max-w: 1440px;
}

[data-theme="light"] {
  --bg: #F4F6FB;
  --bg-2: #FFFFFF;
  --bg-3: #EAEEF7;
  --fg: #0A1A3A;
  --fg-2: #3A4561;
  --fg-3: #6B7691;
  --line: rgba(10,26,58,.08);
  --line-2: rgba(10,26,58,.14);
}

[data-density="compact"] {
  --pad-section: clamp(56px, 7vw, 110px);
  --pad-x: clamp(20px, 4vw, 72px);
  --gap: 16px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
em{font-style:normal}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,h5,p{margin:0}

::selection{background:var(--teal);color:var(--navy-900)}

/* ---------- UTILS ---------- */
.container{
  width:100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section{
  padding: var(--pad-section) 0;
  position: relative;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.display{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: .92;
}
.hairline{
  height:1px;
  background: var(--line);
  width: 100%;
}
.grad-text{
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--fg-3)}

/* ---------- NAV ---------- */
.nav{
  position: fixed;
  top:0;left:0;right:0;
  z-index: 50;
  padding: 18px var(--pad-x);
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
  transition: padding .2s ease;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:var(--max-w);margin:0 auto}
.nav-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:18px}
.nav-brand .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
.nav-brand small{font-family:var(--font-mono);font-weight:400;color:var(--fg-3);font-size:11px;letter-spacing:.08em;margin-top:2px}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{
  padding:8px 14px;font-size:13px;color:var(--fg-2);border-radius:999px;transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--fg);background:var(--line)}
.nav-cta{
  padding: 10px 18px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: transform .15s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-cta:hover{transform:translateY(-1px)}

@media (max-width: 880px){
  .nav-links{display:none}
}

/* ---------- HERO ---------- */
.hero{
  padding-top: 140px;
  padding-bottom: var(--pad-section);
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.hero-eyebrow{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:32px}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-2);
}
.hero-tag .live{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

.hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 10vw, 168px);
  line-height: .86;
  letter-spacing: -0.045em;
  color: var(--fg);
}
.hero h1 .line{display:block}
.hero h1 em{font-style:normal;position:relative;display:inline-block}
.hero h1 .grad{
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}
.hero h1 .amp{font-family:var(--font-display);font-weight:300;color:var(--teal);margin:0 .05em}

.hero-sub{
  margin-top: 40px;
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-2);
}
.hero-meta{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.hero-meta .cell{grid-column: span 3}
.hero-meta .cell .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.hero-meta .cell .value{font-family:var(--font-display);font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.02em}
.hero-meta .cta-cell{grid-column: span 3;display:flex;justify-content:flex-end}
@media(max-width:780px){
  .hero-meta .cell,.hero-meta .cta-cell{grid-column: span 6}
}
.btn-primary{
  display:inline-flex;align-items:center;gap:12px;
  background: var(--accent-gradient);
  color: var(--navy-900);
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .2s;
  box-shadow: 0 8px 24px rgba(74,204,192,.25);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(74,204,192,.4)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border:1px solid var(--line-2);
  border-radius:999px;
  font-size:14px;color:var(--fg);
  transition:background .15s;
}
.btn-ghost:hover{background:var(--line)}

.hero-bg{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  opacity:.6;
}
.hero-bg svg{width:100%;height:100%}
.hero > .container{position:relative;z-index:1}

.marquee{
  margin-top: 80px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  display:flex;gap:48px;
}
.marquee-track{display:inline-flex;gap:48px;padding-right:48px;animation:marquee 38s linear infinite;font-family:var(--font-mono);font-size:13px;color:var(--fg-3);flex-shrink:0}
.marquee-track span{display:inline-flex;gap:48px}
.marquee-track em{font-style:normal;color:var(--teal)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SECTION HEAD ---------- */
.sec-head{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:end;margin-bottom:64px;
}
.sec-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(36px, 5.5vw, 84px);
  letter-spacing:-.035em;line-height:.95;
}
.sec-head .body{color:var(--fg-2);font-size:17px;line-height:1.55;max-width:480px}
@media(max-width:780px){.sec-head{grid-template-columns:1fr}}

/* ---------- SERVICES ---------- */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.svc-card{
  background: var(--bg);
  padding: 36px 32px;
  min-height: 340px;
  display:flex;flex-direction:column;
  position:relative;
  transition: background .25s ease;
  cursor: pointer;
}
.svc-card:hover{background: var(--bg-2)}
.svc-card .num{font-family:var(--font-mono);font-size:12px;color:var(--fg-3);letter-spacing:.1em}
.svc-card .icon{
  width:56px;height:56px;margin-top:28px;
  border:1px solid var(--line-2);
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--teal);
  transition:transform .3s ease, border-color .25s;
}
.svc-card:hover .icon{transform:rotate(-4deg) scale(1.05);border-color:var(--teal)}
.svc-card h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:26px;letter-spacing:-.02em;
  margin-top: auto;
  line-height:1.1;
}
.svc-card p{
  color:var(--fg-2);font-size:14px;line-height:1.55;margin-top:12px;
  max-width: 280px;
}
.svc-card .arrow{
  position:absolute;top:32px;right:32px;
  opacity:0;transform:translate(-6px,6px);
  transition:opacity .2s, transform .2s;
  color:var(--teal);
}
.svc-card:hover .arrow{opacity:1;transform:translate(0,0)}

@media(max-width: 1040px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width: 640px){.svc-grid{grid-template-columns:1fr}}

/* Services — List layout */
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:60px 1fr 1fr 40px;
  gap:24px;align-items:center;
  padding:28px 4px;
  border-bottom:1px solid var(--line);
  cursor:pointer;transition:padding-left .2s, background .2s;
}
.svc-row:hover{padding-left:20px;background:linear-gradient(90deg,var(--line) 0%,transparent 60%)}
.svc-row .num{font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
.svc-row h3{font-family:var(--font-display);font-size:clamp(24px,3vw,44px);font-weight:500;letter-spacing:-.02em}
.svc-row p{color:var(--fg-2);font-size:14px;line-height:1.5}
.svc-row .arr{color:var(--teal);opacity:.5;transition:opacity .2s,transform .2s}
.svc-row:hover .arr{opacity:1;transform:translateX(4px)}
@media(max-width:780px){.svc-row{grid-template-columns:40px 1fr 24px}.svc-row p{display:none}}

/* Services — Bento */
.svc-bento{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:14px;
}
.svc-bento .b{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .25s,border-color .25s;position:relative;overflow:hidden;
  cursor:pointer;
}
.svc-bento .b:hover{transform:translateY(-4px);border-color:var(--line-2)}
.svc-bento .b-1{grid-column:span 3;grid-row:span 2}
.svc-bento .b-2{grid-column:span 3}
.svc-bento .b-3{grid-column:span 2}
.svc-bento .b-4{grid-column:span 2}
.svc-bento .b-5{grid-column:span 2}
.svc-bento .b-6{grid-column:span 3}
.svc-bento .b-7{grid-column:span 3}
.svc-bento .b h3{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.02em}
.svc-bento .b .big{font-size:42px;letter-spacing:-.04em}
.svc-bento .b p{font-size:13px;color:var(--fg-2);line-height:1.5;margin-top:6px}
.svc-bento .b .icon{color:var(--teal)}
@media(max-width:900px){.svc-bento{grid-template-columns:repeat(2,1fr)}.svc-bento .b,.svc-bento .b-1{grid-column:span 2;grid-row:auto}}

/* ---------- CONNECT CASE ---------- */
.connect{
  background: linear-gradient(180deg, transparent 0%, var(--bg-2) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 96px);
  border: 1px solid var(--line);
  position:relative;overflow:hidden;
}
.connect::before{
  content:"";position:absolute;inset:0;
  background: radial-gradient(800px circle at 20% 0%, rgba(74,204,192,.12), transparent 60%),
              radial-gradient(600px circle at 100% 100%, rgba(90,184,232,.1), transparent 60%);
  pointer-events:none;
}
.connect-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;position:relative}
.connect-info .badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--font-mono);font-size:11px;color:var(--fg-2);letter-spacing:.06em;margin-bottom:24px;
}
.connect-info h2{
  font-family:var(--font-display);font-size:clamp(40px,5vw,72px);font-weight:500;letter-spacing:-.035em;line-height:.95;
}
.connect-info h2 em{font-weight:400;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.connect-info p{color:var(--fg-2);font-size:16px;line-height:1.6;margin-top:24px;max-width:440px}
.connect-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.connect-stats .stat .n{font-family:var(--font-display);font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.03em;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.connect-stats .stat .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-top:8px}
.connect-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

/* Mockup */
.mockup{
  background:var(--navy-950);
  border-radius:20px;
  border:1px solid var(--line-2);
  box-shadow: 0 40px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(74,204,192,.1);
  overflow:hidden;
  transform: perspective(2000px) rotateY(-6deg) rotateX(2deg);
  transition: transform .6s ease;
}
.connect:hover .mockup{transform: perspective(2000px) rotateY(-2deg) rotateX(0deg)}
.mockup-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.mockup-bar .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.mockup-bar .url{margin-left:14px;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.5)}
.mockup-body{display:grid;grid-template-columns:220px 1fr;min-height:360px}
.mockup-side{padding:16px 12px;border-right:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015)}
.mockup-side .s-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.35);text-transform:uppercase;padding:0 8px;margin:14px 0 6px}
.conv{display:flex;gap:10px;align-items:center;padding:10px 8px;border-radius:10px;cursor:pointer}
.conv:hover{background:rgba(255,255,255,.04)}
.conv.active{background:rgba(74,204,192,.1);border:1px solid rgba(74,204,192,.3)}
.conv .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#5AB8E8,#4ACCC0);flex-shrink:0;font-size:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.conv .cv-meta{flex:1;min-width:0}
.conv .cv-meta .n{font-size:12px;color:rgba(255,255,255,.9);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .cv-meta .m{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .time{font-size:10px;color:rgba(255,255,255,.35);font-family:var(--font-mono)}
.mockup-chat{padding:20px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent)}
.msg{max-width:70%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.4}
.msg.in{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);border-top-left-radius:4px;align-self:flex-start}
.msg.out{background:var(--accent-gradient);color:var(--navy-900);border-top-right-radius:4px;align-self:flex-end;font-weight:500}
.msg.bot{background:rgba(74,204,192,.1);color:rgba(255,255,255,.9);border:1px solid rgba(74,204,192,.2);border-top-left-radius:4px;align-self:flex-start;position:relative}
.msg.bot::before{content:"🤖 Auto";position:absolute;top:-16px;left:0;font-family:var(--font-mono);font-size:9px;color:var(--teal);letter-spacing:.08em}
.mockup-input{margin-top:auto;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.02);font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.35)}
.mockup-input .send{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:var(--navy-900)}

@media(max-width:1040px){
  .connect-grid{grid-template-columns:1fr}
  .mockup{transform:none}
  .mockup-body{grid-template-columns:1fr}
  .mockup-side{display:none}
}

/* ---------- PROCESS ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.process .p{background:var(--bg);padding:36px 28px;min-height:260px;display:flex;flex-direction:column;position:relative}
.process .p .n{font-family:var(--font-mono);font-size:11px;color:var(--teal);letter-spacing:.1em}
.process .p h3{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.02em;margin-top:24px}
.process .p p{color:var(--fg-2);font-size:13px;line-height:1.55;margin-top:10px}
.process .p .tick{margin-top:auto;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);padding-top:20px;border-top:1px dashed var(--line)}
@media(max-width:880px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.process{grid-template-columns:1fr}}

/* ---------- CASES ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .25s,border-color .25s;cursor:pointer;
}
.case:hover{transform:translateY(-4px);border-color:var(--line-2)}
.case-img{aspect-ratio: 16/10;position:relative;overflow:hidden}
.case-img svg{width:100%;height:100%}
.case-body{padding:28px}
.case-body .tag{font-family:var(--font-mono);font-size:11px;color:var(--teal);letter-spacing:.08em}
.case-body h3{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.02em;margin-top:12px}
.case-body p{color:var(--fg-2);font-size:14px;line-height:1.55;margin-top:10px}
.case-body .meta{display:flex;gap:18px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
@media(max-width:780px){.cases{grid-template-columns:1fr}}

/* ---------- STACK ---------- */
.stack-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.stack-pill{
  padding:16px 14px;border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  background:var(--bg-2);transition:border-color .2s, transform .2s;
}
.stack-pill:hover{border-color:var(--teal);transform:translateY(-2px)}
.stack-pill .nm{font-family:var(--font-display);font-weight:500;font-size:15px}
.stack-pill .cat{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);letter-spacing:.08em}
@media(max-width:900px){.stack-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.stack-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- TESTIMONIALS ---------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;
  display:flex;flex-direction:column;gap:20px;
}
.testi .q{font-family:var(--font-display);font-size:20px;line-height:1.35;letter-spacing:-.015em;font-weight:400;flex:1}
.testi .au{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.testi .av{width:40px;height:40px;border-radius:50%;background:var(--accent-gradient);color:var(--navy-900);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.testi .nm{font-weight:500;font-size:14px}
.testi .ro{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.06em}
@media(max-width:900px){.testis{grid-template-columns:1fr}}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about-visual{aspect-ratio:1;border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;position:relative;background:var(--bg-2)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:48px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.team .mb{background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:14px;min-height:200px}
.team .ph{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,var(--navy-700),var(--navy-600));position:relative;overflow:hidden}
.team .ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,255,255,.03) 6px 7px)}
.team .mb .nm{font-family:var(--font-display);font-weight:500;font-size:16px}
.team .mb .rl{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.06em}
@media(max-width:900px){.about{grid-template-columns:1fr}.team{grid-template-columns:repeat(2,1fr)}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:32px;height:32px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .2s,border-color .2s,background .2s;flex-shrink:0}
.faq details[open] summary .plus{transform:rotate(45deg);border-color:var(--teal);background:var(--teal);color:var(--navy-900)}
.faq .ans{color:var(--fg-2);font-size:15px;line-height:1.6;padding-top:16px;max-width:680px}

/* ---------- CONTACT ---------- */
.contact{
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  padding: clamp(48px,6vw,96px);
  position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:0;
  background: radial-gradient(900px circle at 80% -20%, rgba(74,204,192,.18), transparent 60%);
  pointer-events:none;
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative}
.contact h2{font-family:var(--font-display);font-size:clamp(40px,5vw,72px);font-weight:500;letter-spacing:-.035em;line-height:.95}
.contact h2 em{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact .sub{color:var(--fg-2);font-size:16px;line-height:1.55;margin-top:24px;max-width:420px}
.contact-info{margin-top:40px;display:flex;flex-direction:column;gap:18px}
.contact-info .it{display:flex;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:13px;color:var(--fg-2)}
.contact-info .it:last-child{border-bottom:1px solid var(--line)}
.contact-info .it .lb{color:var(--fg-3);width:80px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:12px 0;color:var(--fg);font-family:var(--font-body);font-size:15px;
  transition:border-color .15s;
  resize:none;
}
.field select{background:transparent;color:var(--fg);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234ACCC0' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
[data-theme="light"] .field select option{color:#0A1A3A}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal)}
.field .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;transition:all .15s;cursor:pointer}
.chip.active{background:var(--accent-gradient);color:var(--navy-900);border-color:transparent;font-weight:500}
.form .submit{margin-top:12px;align-self:flex-start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
.footer{padding:80px 0 40px;border-top:1px solid var(--line);margin-top:80px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:18px}
.footer a{display:block;padding:6px 0;color:var(--fg-2);font-size:14px;transition:color .15s}
.footer a:hover{color:var(--fg)}
.footer .brand p{color:var(--fg-2);font-size:14px;line-height:1.55;margin-top:18px;max-width:360px}
.footer-base{display:flex;justify-content:space-between;align-items:center;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.06em}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}.footer .brand{grid-column:span 2}.footer-base{flex-direction:column;gap:12px;text-align:center}}

/* ---------- TWEAKS PANEL ---------- */
.tweaks{
  position:fixed;bottom:20px;right:20px;z-index:100;
  background:var(--navy-950);border:1px solid var(--line-2);border-radius:16px;
  padding:16px;
  min-width:260px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  font-family:var(--font-mono);font-size:11px;color:#F4F6FB;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;
}
.tweaks.on{opacity:1;transform:translateY(0);pointer-events:auto}
.tweaks h4{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.tweaks .field{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.tweaks .field > .lb{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tweaks .seg{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:3px;border-radius:8px}
.tweaks .seg button{flex:1;padding:8px 10px;border-radius:6px;font-size:11px;color:rgba(255,255,255,.7);transition:all .15s}
.tweaks .seg button.on{background:var(--accent-gradient);color:var(--navy-900);font-weight:600}

/* ---------- MOTION ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* section dividers */
.sec-num{position:absolute;top:var(--pad-section);right:var(--pad-x);font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.1em}