@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==== TWEAKABLE DEFAULTS ==== */
:root{
  --teal-0:#053b3a;
  --teal-1:#0d7775;
  --teal-2:#14b8a6;
  --teal-3:#2dd4bf;
  --teal-4:#67e8f0;
  --bg-0:#04070a;
  --bg-1:#070c12;
  --bg-2:#0b131b;
  --bg-3:#111c27;
  --ink-0:#eaf6f5;
  --ink-1:#b6c6cc;
  --ink-2:#6b7d87;
  --ink-3:#3f4f58;
  --glass:rgba(16,28,38,.55);
  --glass-brd:rgba(45,212,191,.14);
  --glow: 0 0 80px rgba(20,184,166,.18), 0 0 24px rgba(45,212,191,.08);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1280px;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--bg-0);
  color:var(--ink-0);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}

/* ——— Ambient background ——— */
.bg-mesh{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(700px 500px at 10% 20%, rgba(13,119,117,.16), transparent 60%),
    radial-gradient(800px 700px at 50% 100%, rgba(45,212,191,.09), transparent 70%),
    linear-gradient(180deg, #04070a 0%, #060b11 50%, #04070a 100%);
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(103,232,240,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,240,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 90%);
}
.bg-noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.7  0 0 0 0 0.7  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.spotlight{
  position:fixed; width:620px;height:620px; pointer-events:none; z-index:-1;
  left:var(--mx,50%); top:var(--my,40%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(45,212,191,.14), transparent 60%);
  filter:blur(20px);
  transition: opacity .3s;
}

/* ——— Layout ——— */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
section{position:relative; padding: 120px 0}
@media (max-width: 720px){ section{padding: 84px 0} .wrap{padding:0 20px} }

/* ——— Nav ——— */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:100; width:calc(100% - 40px); max-width:1160px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 10px 20px;
  background:rgba(7,12,18,.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border:1px solid rgba(103,232,240,.10);
  border-radius:999px;
  transition: all .3s ease;
}
.nav.scrolled{ background:rgba(7,12,18,.82); border-color:rgba(103,232,240,.16); box-shadow:0 10px 40px rgba(0,0,0,.4) }
.nav-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-0)}
.nav-brand img{height:28px; width:auto; filter: drop-shadow(0 0 10px rgba(45,212,191,.35))}
.nav-brand .wm{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.02em}
.nav-brand .wm em{font-style:normal; color:var(--teal-3)}
.nav-links{display:flex; gap:4px; align-items:center}
.nav-links a{
  color:var(--ink-1); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:8px 14px; border-radius:999px; transition:all .2s;
}
.nav-links a:hover{color:var(--ink-0); background:rgba(45,212,191,.08)}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background:linear-gradient(135deg, var(--teal-2), var(--teal-1));
  color:#04131a !important; font-weight:600; font-size:13px;
  box-shadow: 0 0 0 1px rgba(103,232,240,.35) inset, 0 8px 24px rgba(20,184,166,.28);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow: 0 0 0 1px rgba(103,232,240,.55) inset, 0 12px 30px rgba(20,184,166,.45) }
.nav-toggle{display:none; background:none; border:none; color:var(--ink-0); padding:8px; cursor:pointer}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{
    display:flex; flex-direction:column; gap:0; align-items:stretch;
    position:absolute; top:58px; left:0; right:0;
    padding:10px; border-radius:20px;
    background:rgba(7,12,18,.95); backdrop-filter:blur(20px);
    border:1px solid rgba(103,232,240,.12);
  }
  .nav.open .nav-links a{padding:12px 14px; border-radius:12px}
  .nav-cta{padding:8px 14px; font-size:12.5px}
}

/* ——— Hero ——— */
.hero{
  min-height:100vh; padding: 140px 0 80px; display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns: 1.15fr .9fr; gap:64px; align-items:center;
  width:100%;
}
@media (max-width: 1000px){ .hero-inner{grid-template-columns:1fr; gap:48px} }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border-radius:999px;
  background:rgba(20,184,166,.08);
  border:1px solid rgba(45,212,191,.2);
  color:var(--teal-3);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:24px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--teal-3);
  box-shadow:0 0 0 4px rgba(45,212,191,.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(45,212,191,0); } }

h1.hero-h{
  font-family:var(--display); font-weight:500;
  font-size: clamp(44px, 6.4vw, 88px); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 24px;
}
h1.hero-h .grad{
  background: linear-gradient(120deg, #eaf6f5 0%, #67e8f0 40%, #14b8a6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1.hero-h .line{display:block; overflow:hidden; line-height:1.35; margin-bottom:-0.15em}
h1.hero-h .line > span{display:inline-block; transform:translateY(100%); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards}
h1.hero-h .line:nth-child(2) > span{animation-delay:.12s}
h1.hero-h .line:nth-child(3) > span{animation-delay:.24s}
@keyframes rise{ to{ transform:translateY(0) } }

.hero-sub{
  color:var(--ink-1); font-size:18px; line-height:1.6; max-width: 560px;
  margin: 0 0 36px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:14px;
  font-weight:600; font-size:14.5px; text-decoration:none;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
  cursor:pointer; border:0;
}
.btn-primary{
  background: linear-gradient(135deg, #2dd4bf, #0d9488);
  color:#02161a;
  box-shadow: 0 0 0 1px rgba(103,232,240,.4) inset, 0 10px 30px rgba(20,184,166,.3);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 0 0 1px rgba(103,232,240,.6) inset, 0 18px 40px rgba(20,184,166,.42) }
.btn-ghost{
  background: rgba(255,255,255,.03);
  color:var(--ink-0);
  border:1px solid rgba(103,232,240,.14);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{ border-color:rgba(103,232,240,.35); background:rgba(20,184,166,.07) }
.btn .arr{ transition: transform .25s }
.btn:hover .arr{ transform: translateX(3px) }

.hero-metrics{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; max-width:560px;
}
.metric{
  padding:16px 14px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(14px);
  border-radius:14px;
  position:relative; overflow:hidden;
}
.metric::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(45,212,191,.1), transparent 40%);
  opacity:0; transition:opacity .3s;
}
.metric:hover::before{opacity:1}
.metric .n{font-family:var(--display); font-size:26px; font-weight:600; color:var(--teal-3); letter-spacing:-.02em}
.metric .l{font-size:11.5px; color:var(--ink-2); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; margin-top:2px}

/* ——— Hero viz ——— */
.hero-viz{
  position:relative; aspect-ratio: 1 / 1.05;
  max-width:540px; justify-self:end; width:100%;
}
@media (max-width:1000px){ .hero-viz{justify-self:center} }
.viz-card{
  position:absolute; border-radius:20px; padding:18px 20px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: float 8s ease-in-out infinite;
}
.viz-card.big{
  inset: 6% 6% 22% 6%;
  animation-duration: 10s;
}
.viz-card.sm1{
  top: 4%; right: -4%; width:200px;
  animation-delay:-2s;
}
.viz-card.sm2{
  bottom: 2%; left: -2%; width:220px;
  animation-delay:-4s;
}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}
.vc-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.vc-head .t{font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.1em; text-transform:uppercase}
.vc-head .d{display:flex; gap:4px}
.vc-head .d i{width:6px;height:6px;border-radius:50%;background:rgba(103,232,240,.25); display:block}
.vc-big-num{font-family:var(--display); font-size:40px; font-weight:600; letter-spacing:-.02em; line-height:1}
.vc-big-num .c{color:var(--teal-3)}
.vc-delta{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--teal-3); font-family:var(--mono)}

.spark{ width:100%; height:100px; margin-top:14px }
.spark path.line{ stroke:url(#sparkG); stroke-width:2.2; fill:none; stroke-linecap:round; filter: drop-shadow(0 0 6px rgba(45,212,191,.5)) }
.spark path.fill{ fill:url(#sparkF); opacity:.8 }
.spark .dot{ fill:#2dd4bf; filter: drop-shadow(0 0 8px rgba(45,212,191,.8)) }
.spark-path-anim{ stroke-dasharray: 800; stroke-dashoffset:800; animation: drawline 2.8s ease-out forwards .5s }
@keyframes drawline{ to { stroke-dashoffset:0 } }

.mini-chart{display:flex; align-items:flex-end; gap:5px; height:60px; margin-top:8px}
.mini-chart i{
  flex:1; background:linear-gradient(180deg, var(--teal-3), rgba(20,184,166,.15));
  border-radius:3px 3px 0 0; transform-origin:bottom; animation: grow .9s cubic-bezier(.2,.8,.2,1) forwards;
  transform:scaleY(0);
}
@keyframes grow{ to{ transform:scaleY(1) } }

.ring{
  position:relative; width:92px; height:92px;
}
.ring svg{transform:rotate(-90deg)}
.ring .trk{stroke: rgba(103,232,240,.12); stroke-width:8; fill:none}
.ring .arc{stroke:url(#ringG); stroke-width:8; fill:none; stroke-linecap:round;
  stroke-dasharray: 260; stroke-dashoffset:260; animation: ringFill 1.6s ease-out forwards .6s;}
@keyframes ringFill{ to{ stroke-dashoffset: 70 } }
.ring .v{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-size:22px; font-weight:600; color:var(--ink-0);
}

/* brand logos strip */
.trust{
  margin-top:72px; padding-top:32px;
  border-top:1px dashed rgba(103,232,240,.12);
}
.trust-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:18px;
}
.trust-row{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; align-items:center;
}
@media (max-width:720px){ .trust-row{grid-template-columns: repeat(2, 1fr) } }
.trust-row .c{
  font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:.01em;
  color:var(--ink-2); text-align:center; opacity:.75; transition:opacity .2s, color .2s;
}
.trust-row .c:hover{opacity:1; color:var(--ink-1)}

/* ——— Section heads ——— */
.sec-head{ max-width: 780px; margin: 0 auto 64px; text-align:center }
.sec-kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-3); margin-bottom:16px;
}
.sec-title{
  font-family:var(--display); font-weight:500;
  font-size: clamp(32px, 4.2vw, 54px); line-height:1.05; letter-spacing:-.02em; margin:0 0 18px;
}
.sec-title .grad{
  background: linear-gradient(100deg, #eaf6f5, #67e8f0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; padding-bottom:.15em;
}
.sec-sub{ color:var(--ink-1); font-size:17px; line-height:1.6 }

/* ——— AI Quote band ——— */
.ai-quote{ padding: 48px 0; text-align:center }
.ai-quote-text{
  font-family:var(--display); font-weight:500;
  font-size: clamp(22px, 3.2vw, 42px); line-height:1.2;
  margin:0; letter-spacing:-.015em;
}
.ai-lead{ color:var(--ink-2) }
.ai-colon{ color:var(--ink-2) }
.ai-accent{
  font-weight:700;
  background: linear-gradient(120deg, #67e8f0, #2dd4bf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 18px rgba(45,212,191,.35));
}
.ai-mid{ color:var(--ink-0) }
.ai-integrity{
  font-weight:700; font-style:italic;
  background: linear-gradient(110deg, #eaf6f5 0%, #67e8f0 50%, #14b8a6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ——— Value prop ——— */
.vp{display:grid; grid-template-columns: 1.1fr 1fr; gap:72px; align-items:center}
@media (max-width:1000px){ .vp{grid-template-columns:1fr; gap:48px} }
.vp-kicker{ font-family:var(--mono); color:var(--teal-3); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px }
.vp h2{
  font-family:var(--display); font-weight:500;
  font-size: clamp(30px, 3.8vw, 48px); line-height:1.08; letter-spacing:-.02em; margin:0 0 20px;
}
.vp p{ color:var(--ink-1); font-size:16.5px; line-height:1.7; margin:0 0 16px }
.vp .pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.vp .pill-list span{
  padding:7px 13px; border-radius:999px;
  background:rgba(20,184,166,.06); border:1px solid rgba(45,212,191,.18);
  color:var(--ink-0); font-size:13px; font-family:var(--mono);
}

.vp-right{ position:relative; min-height:420px }
.stat-card{
  position:relative;
  padding:28px;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter: blur(18px);
  border-radius:22px;
  overflow:hidden;
}
.stat-card + .stat-card{ margin-top:16px }
.stat-card::after{
  content:""; position:absolute; top:-40%; right:-20%;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(45,212,191,.25), transparent 65%);
  filter: blur(30px);
}
.stat-card .k{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px }
.stat-card .v{ font-family:var(--display); font-size:clamp(36px,4.5vw,56px); font-weight:600; line-height:1; letter-spacing:-.02em }
.stat-card .v .grad{ background:linear-gradient(110deg, #eaf6f5, #2dd4bf); -webkit-background-clip:text; background-clip:text; color:transparent }
.stat-card .d{ color:var(--ink-1); margin-top:10px; font-size:14.5px; max-width:340px }

/* ——— Services ——— */
.svc-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px }
@media (max-width:860px){ .svc-grid{grid-template-columns:1fr} }
.svc-grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:24px }
@media (max-width:700px){ .svc-grid-2{grid-template-columns:1fr} }
.svc-card .svc-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.engage-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin:40px 0 }
@media (max-width:700px){ .engage-grid{grid-template-columns:1fr} }
.engage-card{ padding:20px 24px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:16px }
.engage-card h4{ font-size:13px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal-2); margin:0 0 8px }
.engage-card p{ font-size:14px; color:var(--ink-1); line-height:1.6; margin:0 }
.tableau-card{ grid-column:1/-1 }
@media (max-width:860px){ .tableau-card{grid-column:auto} }
.svc-card{
  position:relative; padding:32px;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter: blur(18px);
  border-radius:22px;
  overflow:hidden; transition: transform .3s, border-color .3s;
}
.svc-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(400px 200px at var(--px,50%) var(--py,50%), rgba(45,212,191,.15), transparent 60%);
  opacity:0; transition: opacity .3s; pointer-events:none;
}
.svc-card:hover{ transform: translateY(-4px); border-color: rgba(45,212,191,.3) }
.svc-card:hover::before{ opacity:1 }
.svc-num{ font-family:var(--mono); color:var(--teal-3); font-size:12px; letter-spacing:.2em; margin-bottom:20px }
.svc-icon{
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(20,184,166,.06));
  border:1px solid rgba(45,212,191,.25);
  display:grid; place-items:center; margin-bottom:20px;
}
.svc-icon svg{ width:26px; height:26px; stroke:var(--teal-3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.svc-card h3{ font-family:var(--display); font-size:24px; font-weight:500; margin:0 0 10px; letter-spacing:-.01em }
.svc-card p{ color:var(--ink-1); font-size:14.5px; line-height:1.6; margin:0 0 18px }
.svc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.svc-list li{ font-size:13.5px; color:var(--ink-1); display:flex; gap:10px; align-items:flex-start }
.svc-list li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--teal-3); margin-top:8px; flex:0 0 auto;
  box-shadow: 0 0 8px rgba(45,212,191,.5);
}

/* ——— Use Cases Carousel ——— */
.uc-section{ padding: 0 0 80px }
.uc-carousel{ position:relative }
.uc-track-outer{ overflow:hidden }
.uc-track{
  display:flex; gap:20px; flex-wrap:nowrap;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.uc-tile{
  flex: 0 0 calc(25% - 15px);
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px); border-radius:18px;
  padding:28px 24px; cursor:default;
  transition: border-color .3s, transform .3s;
  position:relative; overflow:hidden;
}
.uc-tile::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(300px 200px at 50% 0%, rgba(45,212,191,.1), transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.uc-tile:hover{ border-color:rgba(45,212,191,.3); transform:translateY(-3px) }
.uc-tile:hover::before{ opacity:1 }
.uc-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(20,184,166,.06));
  border:1px solid rgba(45,212,191,.25);
  display:grid; place-items:center; margin-bottom:16px;
}
.uc-icon svg{ width:22px; height:22px; stroke:var(--teal-3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.uc-tile h4{ font-family:var(--display); font-size:17px; font-weight:500; margin:0 0 8px; letter-spacing:-.01em; color:var(--ink-0) }
.uc-tile p{ font-size:13.5px; color:var(--ink-1); line-height:1.55; margin:0 }
.uc-dots{ display:flex; gap:8px; justify-content:center; margin-top:28px }
.uc-dot{
  width:8px; height:8px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(45,212,191,.2); transition: all .3s;
}
.uc-dot.active{ background:var(--teal-3); box-shadow:0 0 10px rgba(45,212,191,.5); transform:scale(1.25) }
@media(max-width:860px){ .uc-tile{ flex-basis:calc(50% - 10px) } }
@media(max-width:540px){ .uc-tile{ flex-basis:82% } }

/* ——— Testimonials carousel (reuses uc-* mechanics, overrides sizing/content) ——— */
#voices .uc-tile{ flex:0 0 calc(50% - 10px) !important; padding:32px; border-radius:22px }
#voices .uc-tile .qm{ font-family:var(--display); font-size:72px; line-height:.6; color:var(--teal-3); opacity:.35; position:absolute; top:22px; right:26px; pointer-events:none }
#voices .uc-tile blockquote{ font-family:var(--display); font-weight:400; font-size:13.5px; line-height:1.6; margin:0 0 12px; letter-spacing:-.005em; max-width:98% }
#voices .uc-tile footer{ display:flex; align-items:center; gap:12px; border-top:1px dashed rgba(103,232,240,.14); padding-top:16px }
#voices .uc-tile cite{ font-style:normal; font-weight:600; font-size:13px; color:var(--ink-0) }
#voices .uc-tile .role{ font-size:12px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.04em }
@media(max-width:860px){ #voices .uc-tile{ flex:0 0 88% } }
@media(max-width:540px){ #voices .uc-tile{ flex:0 0 92% } }
@media(max-width:540px){
  #voices .uc-tile blockquote{ font-size:6px; line-height:1.5 }
  #voices .uc-tile cite{ font-size:12px }
  #voices .uc-tile .role{ font-size:11px }
  #voices .uc-tile{ padding:14px 16px }
  #voices .uc-tile footer{ padding-top:12px }
}

/* ——— WAVES methodology (interactive stepper) ——— */
.waves{
  background:
    radial-gradient(700px 500px at 80% 0%, rgba(20,184,166,.12), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(13,119,117,.12), transparent 70%);
  border-radius: 32px;
  border: 1px solid rgba(103,232,240,.08);
  padding: 80px 48px;
  position:relative; overflow:hidden;
}
@media (max-width:720px){ .waves{ padding: 56px 22px; border-radius:22px } }
.waves::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'><path d='M0,200 Q300,50 600,200 T1200,200' fill='none' stroke='rgba(45,212,191,.08)' stroke-width='2'/><path d='M0,240 Q300,90 600,240 T1200,240' fill='none' stroke='rgba(45,212,191,.05)' stroke-width='2'/><path d='M0,160 Q300,10 600,160 T1200,160' fill='none' stroke='rgba(45,212,191,.05)' stroke-width='2'/></svg>") center/cover;
  opacity:.8;
}
.waves-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:48px; position:relative; z-index:2 }
@media (max-width:860px){ .waves-head{flex-direction:column; align-items:flex-start} }
.waves-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(30px,3.8vw,46px); line-height:1.05; letter-spacing:-.02em; margin:10px 0 0; max-width:640px }
.waves-head .grad{ background:linear-gradient(110deg, #eaf6f5, #2dd4bf); -webkit-background-clip:text; background-clip:text; color:transparent }

.waves-stepper{ display:flex; gap:10px; flex-wrap:wrap }
.waves-step{
  padding:10px 16px; border-radius:999px;
  background:rgba(4,10,14,.5); border:1px solid rgba(103,232,240,.12);
  color:var(--ink-1); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition: all .25s;
}
.waves-step:hover{ border-color: rgba(45,212,191,.3); color: var(--ink-0) }
.waves-step.active{
  background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(20,184,166,.08));
  border-color: rgba(45,212,191,.5); color:#eaf6f5;
  box-shadow: 0 0 30px rgba(20,184,166,.2);
}
.waves-step b{ color:var(--teal-3); margin-right:6px; font-weight:600 }

.waves-body{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:40px; align-items:center;
  position:relative; z-index:2;
}
@media (max-width:960px){ .waves-body{grid-template-columns:1fr} }
.waves-text .letter{
  font-family:var(--display); font-weight:600; font-size:clamp(110px, 18vw, 200px); line-height:.8; letter-spacing:-.04em; padding-bottom:0.15em;
  background:linear-gradient(160deg, #2dd4bf 0%, #0d7775 70%, #053b3a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0; display:block;
}
.waves-text h3{ font-family:var(--display); font-weight:500; font-size:32px; margin:16px 0 12px; letter-spacing:-.01em }
.waves-text p{ color:var(--ink-1); font-size:16px; line-height:1.65; max-width:520px; margin:0 0 16px }
.waves-points{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:10px }
.waves-points li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--ink-1) }
.waves-points li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; stroke:var(--teal-3); fill:none; stroke-width:2 }

.waves-vis{
  aspect-ratio: 1/1; border-radius:24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(20,184,166,.15), transparent 70%),
    linear-gradient(180deg, rgba(7,12,18,.6), rgba(11,19,27,.4));
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(12px);
  display:grid; place-items:center;
  position:relative; overflow:hidden;
}
.waves-vis svg{ width:90%; height:90% }
.ripple{ fill:none; stroke:rgba(45,212,191,.4); stroke-width:1.5 }
.ripple.r1{ animation: rippleout 3s ease-out infinite }
.ripple.r2{ animation: rippleout 3s ease-out infinite .8s }
.ripple.r3{ animation: rippleout 3s ease-out infinite 1.6s }
@keyframes rippleout{
  0%{ r: 30; opacity:.9 }
  100%{ r: 160; opacity:0 }
}

/* ——— Process / Outcomes ——— */
.outcomes{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:32px }
@media (max-width:860px){ .outcomes{grid-template-columns:1fr} }
.outcome{
  padding:26px; background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter: blur(14px); border-radius:18px;
  position:relative; overflow:hidden;
}
.outcome .n{ font-family:var(--mono); font-size:11.5px; color:var(--teal-3); letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px }
.outcome h4{ font-family:var(--display); font-weight:500; font-size:19px; margin:0 0 8px; letter-spacing:-.005em }
.outcome p{ color:var(--ink-1); font-size:14px; line-height:1.6; margin:0 }

/* ——— Testimonials ——— */
.quote-row{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px}
@media (max-width:860px){ .quote-row{grid-template-columns:1fr} }
.quote{
  padding:32px; background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter: blur(18px); border-radius:22px; position:relative;
}
.quote .qm{
  font-family:var(--display); font-size:72px; line-height:.6; color:var(--teal-3); opacity:.35;
  position:absolute; top:22px; right:26px; pointer-events:none;
}
.quote blockquote{ font-family:var(--display); font-weight:400; font-size:19px; line-height:1.45; margin:0 0 22px; letter-spacing:-.005em; max-width:92% }
.quote footer{ display:flex; align-items:center; gap:12px; border-top:1px dashed rgba(103,232,240,.14); padding-top:16px }
.avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal-2), var(--teal-0));
  display:grid; place-items:center; font-family:var(--display); font-weight:600; color:#02161a;
}
.quote cite{ font-style:normal; font-weight:600; font-size:14px; color:var(--ink-0) }
.quote .role{ font-size:12.5px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.04em }

/* ——— CTA ——— */
.cta{
  position:relative; padding:72px 48px; border-radius:28px;
  background: linear-gradient(135deg, rgba(20,184,166,.14), rgba(5,9,13,.7));
  border:1px solid rgba(45,212,191,.22);
  backdrop-filter: blur(20px);
  overflow:hidden; text-align:center;
}
.cta::before{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(circle at 50% 50%, rgba(45,212,191,.2), transparent 60%);
  filter: blur(40px);
  animation: rot 18s linear infinite;
}
@keyframes rot{ to{ transform:rotate(360deg) } }
.cta-inner{position:relative; z-index:2}
.cta h2{ font-family:var(--display); font-weight:500; font-size:clamp(30px,4.2vw,52px); line-height:1.05; letter-spacing:-.02em; margin:0 auto 20px; max-width:780px }
.cta h2 .grad{ background:linear-gradient(110deg, #eaf6f5, #67e8f0); -webkit-background-clip:text; background-clip:text; color:transparent }
.cta p{ color:var(--ink-1); font-size:17px; max-width:560px; margin:0 auto 32px; line-height:1.6 }
@media (max-width:720px){ .cta{padding:48px 22px} }

/* ——— Footer ——— */
footer.site{ padding: 64px 0 48px; border-top:1px solid rgba(103,232,240,.08); margin-top:80px }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px }
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px} }
.footer-brand{ display:flex; flex-direction:column; gap:14px; max-width:320px }
.footer-brand img{ max-width:160px; width:100%; height:auto; filter: drop-shadow(0 0 12px rgba(45,212,191,.35)) }
.footer-brand p{ color:var(--ink-2); font-size:13.5px; line-height:1.6; margin:0 }
.footer-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-3); margin:0 0 14px }
.footer-col a{ display:block; color:var(--ink-1); font-size:14px; text-decoration:none; padding:4px 0; transition:color .15s }
.footer-col a:hover{ color:var(--ink-0) }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px dashed rgba(103,232,240,.1); font-size:12.5px; color:var(--ink-2); font-family:var(--mono) }

/* ——— Scroll reveal ——— */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.05s } .reveal.d2{transition-delay:.15s} .reveal.d3{transition-delay:.25s} .reveal.d4{transition-delay:.35s}

/* ——— Tweaks panel ——— */
.tweaks-panel{
  position:fixed; right:20px; bottom:20px; z-index:999;
  width:280px; padding:16px;
  background:rgba(7,12,18,.92); border:1px solid rgba(45,212,191,.3);
  border-radius:16px; backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); color:var(--ink-0);
  font-family:var(--body); display:none;
}
.tweaks-panel.open{display:block}
.tweaks-panel h4{font-family:var(--display); font-size:14px; margin:0 0 12px; letter-spacing:.02em; display:flex; align-items:center; justify-content:space-between}
.tweaks-panel h4 button{ background:none; border:none; color:var(--ink-2); cursor:pointer; font-size:16px }
.tweaks-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:12.5px; color:var(--ink-1) }
.tweaks-row input[type=color]{ width:38px; height:26px; background:none; border:1px solid rgba(103,232,240,.2); border-radius:6px; cursor:pointer }
.tweaks-row input[type=range]{ width:130px }
.tweaks-row select{ background:rgba(4,10,14,.8); color:var(--ink-0); border:1px solid rgba(103,232,240,.2); border-radius:6px; padding:4px 6px; font-size:12px }
/* ===== BLOG / ARTICLE STYLES ===== */
.page-hero{ padding: 120px 0 64px; text-align:center }
.page-hero .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-3); margin:0 0 18px }
.page-hero h1{ font-family:var(--display); font-size:clamp(32px,5vw,58px); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink-0) }
.page-hero .byline{ color:var(--ink-2); font-size:14px; display:flex; gap:16px; justify-content:center; align-items:center }
.page-hero .byline span{ color:var(--ink-2) }

.article-body{ max-width:740px; margin:0 auto; padding:0 24px 96px }
.article-body h2{ font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:600; color:var(--ink-0); margin:48px 0 16px; letter-spacing:-.01em }
.article-body h3{ font-family:var(--display); font-size:20px; font-weight:600; color:var(--ink-0); margin:36px 0 12px }
.article-body p{ color:var(--ink-1); font-size:17px; line-height:1.75; margin:0 0 24px }
.article-body ul,.article-body ol{ color:var(--ink-1); font-size:17px; line-height:1.75; margin:0 0 24px; padding-left:24px }
.article-body li{ margin-bottom:8px }
.article-body strong{ color:var(--ink-0); font-weight:600 }
.article-back{ display:inline-flex; align-items:center; gap:8px; color:var(--teal-3); text-decoration:none; font-size:14px; font-family:var(--mono); letter-spacing:.06em; margin-bottom:48px; transition:color .15s }
.article-back:hover{ color:var(--teal-4) }
.article-back svg{ width:16px; height:16px; flex-shrink:0 }

/* Blog index cards */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; margin-top:48px }
.blog-card{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:32px; text-decoration:none; transition:border-color .2s, box-shadow .2s; display:flex; flex-direction:column }
.blog-card:hover{ border-color:rgba(45,212,191,.35); box-shadow:var(--glow) }
.blog-card .bc-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-3); margin:0 0 14px }
.blog-card h2{ font-family:var(--display); font-size:20px; font-weight:600; color:var(--ink-0); margin:0 0 12px; line-height:1.3 }
.blog-card p{ color:var(--ink-1); font-size:15px; line-height:1.6; margin:0 0 24px; flex:1 }
.blog-card .bc-read{ color:var(--teal-3); font-size:13px; font-family:var(--mono); letter-spacing:.06em }

/* About page */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin:64px 0 }
@media(max-width:768px){ .about-grid{ grid-template-columns:1fr; gap:40px } }
.founder-photo{ width:140px; height:140px; border-radius:50%; object-fit:cover; object-position:center top; border:3px solid rgba(45,212,191,.35); margin-bottom:24px; display:block }
.about-bio h2{ font-family:var(--display); font-size:clamp(24px,3vw,34px); font-weight:700; color:var(--ink-0); margin:0 0 20px; letter-spacing:-.02em }
.about-bio p{ color:var(--ink-1); font-size:16px; line-height:1.75; margin:0 0 18px }
.cred-list{ list-style:none; padding:0; margin:0 }
.cred-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-1); font-size:15px; line-height:1.5; padding:10px 0; border-bottom:1px solid rgba(45,212,191,.08) }
.cred-list li:last-child{ border:none }
.cred-list .ci{ color:var(--teal-3); flex-shrink:0; margin-top:2px }
.name-card{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:32px; overflow:visible }
.name-card .big-i{ font-family:Georgia,'Times New Roman',serif; font-size:80px; font-weight:400; line-height:1.8; background:linear-gradient(to bottom,#2dd4bf,#eaf6f5); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 16px; display:block }
.name-card h3{ font-family:var(--display); font-size:18px; font-weight:600; color:var(--ink-0); margin:0 0 12px }
.name-card p{ color:var(--ink-1); font-size:15px; line-height:1.6; margin:0 }
.markets-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.market-tag{ background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.18); border-radius:40px; padding:6px 16px; font-size:13px; color:var(--teal-3); font-family:var(--mono) }

/* Contact page */
.contact-wrap{ max-width:640px; margin:0 auto; padding:80px 24px }
.contact-wrap h1{ font-family:var(--display); font-size:clamp(28px,4vw,48px); font-weight:700; color:var(--ink-0); margin:0 0 16px; letter-spacing:-.02em; line-height:1.15 }
.contact-wrap .lead{ color:var(--ink-1); font-size:18px; line-height:1.6; margin:0 0 48px }
.contact-link-block{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px }
.c-link{ display:flex; align-items:center; gap:16px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius-sm); padding:20px 24px; text-decoration:none; color:var(--ink-0); transition:border-color .2s }
.c-link:hover{ border-color:rgba(45,212,191,.35) }
.c-link .c-icon{ width:40px; height:40px; border-radius:10px; background:rgba(45,212,191,.1); display:flex; align-items:center; justify-content:center; color:var(--teal-3); flex-shrink:0 }
.c-link .c-label{ font-size:13px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:4px }
.c-link .c-val{ font-size:16px; color:var(--ink-0) }
.expect-box{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--radius); padding:32px }
.expect-box h3{ font-family:var(--display); font-size:18px; font-weight:600; color:var(--ink-0); margin:0 0 20px }
.expect-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px }
.expect-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-1); font-size:15px; line-height:1.5 }
.expect-list .el-icon{ color:var(--teal-3); flex-shrink:0; margin-top:1px }