/* ============================================================
   VASOLAI — Design tokens
   Palette: deep signal-ink base + bioluminescent fluid gradient
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
   Signature: morphing "liquid signal" mesh — nodes of a system
   flowing into one another, echoing agent-to-agent communication
   ============================================================ */

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

:root{
  --ink:        #0a0f1c;
  --ink-2:      #0d1526;
  --surface:    #101b30;
  --surface-2:  #16233c;
  --surface-3:  #1c2c48;
  --line:       #263a5c;
  --foam:       #eaf2fa;
  --muted:      #8ea0bd;
  --muted-2:    #5f759a;

  --cyan:       #4fd8e8;
  --violet:     #8b7ff5;
  --magenta:    #e85fa0;
  --amber:      #f5b45c;

  --grad-fluid: linear-gradient(120deg, var(--cyan), var(--violet) 55%, var(--magenta));
  --grad-soft:  radial-gradient(circle at 30% 20%, rgba(79,216,232,.22), transparent 55%),
                radial-gradient(circle at 75% 65%, rgba(139,127,245,.20), transparent 55%),
                radial-gradient(circle at 50% 100%, rgba(232,95,160,.12), transparent 60%);

  --radius-lg:  28px;
  --radius-md:  18px;
  --radius-sm:  12px;
  --radius-pill: 999px;

  --shadow-1: 0 20px 60px -20px rgba(0,0,0,.55);
  --shadow-2: 0 8px 30px -10px rgba(79,216,232,.25);

  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
::selection{ background: var(--violet); color: var(--ink); }

body{
  margin:0;
  background: var(--ink);
  background-image: var(--grad-soft);
  background-attachment: fixed;
  color: var(--foam);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; color: var(--muted); }
a{ color: var(--cyan); text-decoration: none; }
code, .mono{ font-family: 'JetBrains Mono', monospace; }

.eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: 1em;
}
.eyebrow::before{
  content:'';
  width: 18px; height: 1px;
  background: var(--grad-fluid);
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.section{ padding: 100px 0; position: relative; }
.section-tight{ padding: 60px 0; }
.center{ text-align: center; }

/* ---------- Liquid canvas backdrop ---------- */
#liquid-bg{
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: .55;
  pointer-events: none;
}

/* ---------- Floating liquid nav ---------- */
.nav{
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 6px;
  padding: 8px;
  background: rgba(16,27,48,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-1);
  max-width: calc(100vw - 24px);
}
.nav .brand{
  display:flex; align-items:center; gap:8px;
  padding: 8px 14px 8px 10px;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size: 1rem;
  color: var(--foam);
  white-space: nowrap;
}
.nav .brand-mark{
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-fluid);
  position: relative;
  animation: brandPulse 5s ease-in-out infinite;
  flex: none;
}
@keyframes brandPulse{
  0%,100%{ filter: hue-rotate(0deg) saturate(1); }
  50%{ filter: hue-rotate(35deg) saturate(1.3); }
}
.nav-links{
  display:flex; align-items:center; gap: 2px;
  position: relative;
}
.nav-links a{
  position: relative;
  display: inline-flex; align-items:center;
  padding: 9px 16px;
  font-size: .87rem; font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition: color .35s var(--ease);
  white-space: nowrap;
  z-index: 2;
}
.nav-links a:hover{ color: var(--foam); }
.nav-links a.active{ color: var(--ink); font-weight: 600; }
.nav-pill-glide{
  position: absolute; top: 0; height: 100%;
  background: var(--grad-fluid);
  border-radius: var(--radius-pill);
  z-index: 1;
  transition: left .5s var(--ease), width .5s var(--ease);
  filter: drop-shadow(0 4px 14px rgba(139,127,245,.4));
}
.nav-toggle{
  display:none;
  width: 40px; height:40px; border-radius:50%;
  align-items:center; justify-content:center;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--foam); cursor:pointer; margin-right: 4px;
}
.nav-cta{
  padding: 9px 18px !important;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  color: var(--foam) !important;
  border: 1px solid var(--line);
  margin-left: 4px;
}

@media (max-width: 880px){
  .nav{ left: 12px; right: 12px; transform: none; width: auto; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; top: 78px; left: 12px; right: 12px;
    flex-direction: column; align-items: stretch;
    background: rgba(16,27,48,.96);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md);
    padding: 8px;
    display: none;
    backdrop-filter: blur(18px);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ text-align: left; }
  .nav-pill-glide{ display:none; }
  .nav-links a.active{ background: var(--grad-fluid); color: var(--ink); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: .92rem;
  cursor: pointer; border: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);
  font-family: inherit;
}
.btn-primary{
  background: var(--grad-fluid);
  background-size: 200% 200%;
  color: var(--ink);
  box-shadow: var(--shadow-2);
  animation: gradShift 6s ease infinite;
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); filter: brightness(1.08); }
@keyframes gradShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.btn-ghost{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--foam);
}
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.btn-sm{ padding: 10px 18px; font-size: .82rem; }

/* ---------- Cards ---------- */
.card{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card::before{
  content:'';
  position: absolute; inset: -1px;
  background: var(--grad-fluid);
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
  transition: opacity .5s var(--ease);
}
.card:hover{ transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-1); }
.card:hover::before{ opacity: .55; }
.card > *{ position: relative; }
.card-inner{
  background: var(--surface);
  border-radius: calc(var(--radius-lg) - 1px);
}
.icon-blob{
  width: 52px; height: 52px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-3);
  margin-bottom: 18px;
  border: 1px solid var(--line);
}
.icon-blob svg{ width: 26px; height: 26px; }

.grid{ display:grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.tag{
  display:inline-flex; align-items:center;
  padding: 5px 12px; font-size: .72rem; font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--cyan);
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .03em;
}

hr.div{ border:0; height:1px; background: var(--line); margin: 60px 0; }

/* ---------- Hero / carousel ---------- */
.hero{
  padding: 170px 0 90px;
  position: relative;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items:center; }
@media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; } }

.carousel{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 4/3.1;
  box-shadow: var(--shadow-1);
}
.carousel-track{ position:relative; width:100%; height:100%; }
.carousel-slide{
  position:absolute; inset:0;
  opacity:0; transform: scale(1.04);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
  display:flex; flex-direction: column;
}
.carousel-slide.active{ opacity:1; transform: scale(1); }
.carousel-slide svg{ width:100%; height:100%; flex:1; }
.carousel-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px 22px;
  background: linear-gradient(0deg, rgba(10,15,28,.92), transparent);
}
.carousel-caption .k{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--cyan); letter-spacing:.12em; text-transform:uppercase; }
.carousel-caption .t{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; margin-top:4px;}
.carousel-dots{
  position:absolute; top: 18px; right: 18px; z-index: 5;
  display:flex; gap:6px;
}
.carousel-dots button{
  width:7px; height:7px; border-radius:50%; border:none;
  background: rgba(255,255,255,.25); cursor:pointer;
  transition: all .4s var(--ease);
}
.carousel-dots button.active{ width:20px; border-radius:4px; background: var(--grad-fluid); }

/* ---------- Stats strip ---------- */
.stats{ display:flex; flex-wrap:wrap; gap: 40px; margin-top: 40px; }
.stat b{ font-family:'Space Grotesk',sans-serif; font-size:2rem; display:block; background: var(--grad-fluid); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ font-size:.82rem; color:var(--muted-2); }

/* ---------- Timeline / process ---------- */
.flow{ display:flex; flex-direction:column; gap: 0; }
.flow-step{ display:flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.flow-step:last-child{ border-bottom: none; }
.flow-num{
  font-family:'JetBrains Mono',monospace; font-size:.78rem; color: var(--muted-2);
  width: 44px; flex:none; padding-top: 4px;
}

/* ---------- Forms ---------- */
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:8px; color: var(--foam); }
.field .hint{ font-size:.76rem; color: var(--muted-2); margin-top:6px; }
input[type=text], input[type=email], input[type=tel], textarea, select{
  width:100%; padding: 13px 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--foam);
  font-family: inherit; font-size: .92rem;
  transition: border-color .3s, box-shadow .3s;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(79,216,232,.15);
}
textarea{ resize: vertical; min-height: 110px; }
.dropzone{
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 34px 20px;
  text-align:center;
  cursor:pointer;
  transition: border-color .3s, background .3s;
  background: var(--surface-2);
}
.dropzone:hover, .dropzone.drag{ border-color: var(--cyan); background: var(--surface-3); }
.dropzone .filename{ margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:.8rem; color: var(--cyan); }

.confirm-box{
  display:none;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, rgba(79,216,232,.12), rgba(139,127,245,.10));
  border: 1px solid rgba(79,216,232,.35);
}
.confirm-box.show{ display:block; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 60px 0 30px;
  margin-top: 60px;
  background: var(--ink-2);
}
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted-2); margin-bottom: 14px;}
.footer-grid a{ display:block; color: var(--muted); font-size:.88rem; padding: 5px 0; transition: color .3s; }
.footer-grid a:hover{ color: var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted-2); }
.footer-bottom a{ color: var(--muted-2); }
.footer-bottom a:hover{ color: var(--cyan); }

/* ---------- Floating chat widget ---------- */
#chat-launcher{
  position: fixed; bottom: 26px; right: 26px; z-index: 950;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--grad-fluid); background-size: 200% 200%;
  animation: gradShift 6s ease infinite;
  border: none; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-2);
  transition: transform .4s var(--ease);
}
#chat-launcher:hover{ transform: scale(1.08) translateY(-2px); }
#chat-launcher svg{ width: 26px; height: 26px; color: var(--ink); }
#chat-panel{
  position: fixed; bottom: 100px; right: 26px; z-index: 950;
  width: 360px; max-width: calc(100vw - 40px);
  height: 480px; max-height: 70vh;
  background: rgba(16,27,48,.97);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(.97); opacity:0; pointer-events:none;
  transition: all .4s var(--ease);
}
#chat-panel.open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.chat-head{
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.chat-head .who{ display:flex; align-items:center; gap:10px; }
.chat-head .dot{ width:9px; height:9px; border-radius:50%; background: var(--grad-fluid); }
.chat-head b{ font-family:'Space Grotesk',sans-serif; font-size:.92rem; }
.chat-head .sub{ font-size:.7rem; color: var(--muted-2); }
.chat-head button{ background:none; border:none; color: var(--muted); cursor:pointer; font-size: 1.1rem; }
.chat-body{ flex:1; overflow-y:auto; padding: 16px 18px; display:flex; flex-direction:column; gap: 12px; }
.msg{ max-width: 85%; padding: 11px 14px; border-radius: 14px; font-size: .85rem; line-height:1.5; }
.msg.bot{ background: var(--surface-2); border: 1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user{ background: var(--grad-fluid); color: var(--ink); align-self:flex-end; border-bottom-right-radius:4px; font-weight:500; }
.msg a{ color: var(--ink); text-decoration: underline; }
.msg.bot a{ color: var(--cyan); }
.chat-chips{ display:flex; flex-wrap:wrap; gap:6px; padding: 0 18px 12px; }
.chip{
  font-size:.72rem; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--surface-2); border:1px solid var(--line); color: var(--muted);
  cursor:pointer; transition: all .3s;
}
.chip:hover{ border-color: var(--cyan); color: var(--cyan); }
.chat-input{ display:flex; gap:8px; padding: 14px; border-top: 1px solid var(--line); }
.chat-input input{ flex:1; padding: 10px 14px; font-size:.85rem; }
.chat-input button{
  width:40px; height:40px; border-radius:50%; border:none; flex:none;
  background: var(--grad-fluid); color: var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Cookie banner ---------- */
#cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 999;
  max-width: 620px; margin: 0 auto;
  background: rgba(16,27,48,.97);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(18px);
  transform: translateY(140%);
  transition: transform .6s var(--ease);
}
#cookie-banner.show{ transform: translateY(0); }
#cookie-banner p{ font-size: .82rem; margin-bottom: 14px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- misc ---------- */
.pill-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--surface-2); border:1px solid var(--line);
  font-size: .78rem; color: var(--muted); margin-bottom: 20px;
}
.pill-badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.code-block{
  background: var(--ink-2); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 20px 22px; overflow-x:auto; font-family:'JetBrains Mono',monospace; font-size:.82rem;
  color: var(--foam); line-height: 1.7;
}
.code-block .c1{ color: var(--muted-2); }
.code-block .c2{ color: var(--cyan); }
.code-block .c3{ color: var(--violet); }
.code-block .c4{ color: var(--amber); }

table.legal{ width:100%; border-collapse: collapse; margin: 20px 0; }
table.legal th, table.legal td{ text-align:left; padding: 12px 14px; border: 1px solid var(--line); font-size: .86rem; vertical-align: top; }
table.legal th{ background: var(--surface-2); color: var(--cyan); font-family:'JetBrains Mono',monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--cyan); outline-offset: 2px;
}