/* ===================================================================
   Samnvay — shared stylesheet
   =================================================================== */

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

:root{
  --ink:        #14101F;
  --ink-soft:   #1D1832;
  --ink-softer: #251E3D;
  --paper:      #F6F3EE;
  --paper-dim:  #EBE6DC;
  --text-hi:    #F3EFFB;
  --text-mid:   #C9C0E3;
  --text-muted: #8B81A9;
  --text-inkbody: #322A46;
  --text-inkmuted:#6B6284;

  --purple:     #6D3CD0;
  --purple-lite:#8A5EE0;
  --orange:     #E8622E;
  --green:      #1F8A4C;

  --line:       rgba(243,239,251,0.12);
  --line-soft:  rgba(50,42,70,0.12);

  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-hi);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-0.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--purple-lite);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px;height:1px;background:var(--purple-lite);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,16,31,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:19px;}
.brand .mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(150deg,var(--purple),var(--purple-lite));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display); font-weight:700; font-size:18px; color:#fff;
}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--text-mid);
  transition:color .18s ease; position:relative;
}
.nav-links a:hover{color:var(--text-hi);}
.nav-links a.active{color:var(--text-hi);}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-25px;height:2px;background:var(--purple-lite);
}
.nav-cta{
  padding:11px 20px;border-radius:100px;
  background:var(--text-hi); color:var(--ink) !important;
  font-size:14px; font-weight:600;
  transition:transform .18s ease, background .18s ease;
}
.nav-cta:hover{background:var(--purple-lite); color:#fff !important; transform:translateY(-1px);}
.nav-toggle{display:none;}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{
    display:flex; width:40px;height:40px;border-radius:8px;
    border:1px solid var(--line); align-items:center; justify-content:center;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:15px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--purple); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(109,60,208,0.55);}
.btn-ghost{border-color:var(--line); color:var(--text-hi); background:transparent;}
.btn-ghost:hover{border-color:var(--purple-lite); background:rgba(138,94,224,0.08);}
.btn-ink{background:var(--ink); color:#fff;}
.btn-ink:hover{transform:translateY(-2px);}
.btn-arrow{transition:transform .18s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- sections ---------- */
section{padding:112px 0;}
section.tight{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,42px); margin-top:16px;}
.section-head p{margin-top:16px; color:var(--text-mid); font-size:17px;}

.on-paper{background:var(--paper); color:var(--text-inkbody);}
.on-paper .eyebrow{color:var(--purple);}
.on-paper .section-head p{color:var(--text-inkmuted);}
.on-paper h1,.on-paper h2,.on-paper h3{color:var(--ink);}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-soft); border-top:1px solid var(--line); padding:64px 0 32px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line);}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:16px; font-weight:500;}
.footer-col a{display:block; color:var(--text-mid); font-size:14.5px; margin-bottom:10px;}
.footer-col a:hover{color:var(--text-hi);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; color:var(--text-muted); font-size:13px; flex-wrap:wrap; gap:12px;}

/* ===================================================================
   PIPELINE — signature component
   Reused (with different node counts/states) across every page.
   =================================================================== */
.pipeline{
  display:flex; align-items:stretch; gap:0;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg,var(--ink-soft),var(--ink));
  overflow:hidden; position:relative;
}
.pipeline-track{
  display:flex; width:100%; overflow-x:auto; scrollbar-width:none;
}
.pipeline-track::-webkit-scrollbar{display:none;}
.pnode{
  flex:1 0 180px; padding:28px 22px; position:relative;
  border-right:1px solid var(--line);
}
.pnode:last-child{border-right:none;}
.pnode .pnum{
  font-family:var(--mono); font-size:11px; color:var(--purple-lite);
  letter-spacing:0.08em;
}
.pnode h4{font-size:16px; margin-top:10px; color:var(--text-hi);}
.pnode p{font-size:13px; color:var(--text-muted); margin-top:8px; line-height:1.5;}
.pnode::after{
  content:'→'; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--text-muted); background:var(--ink); width:20px; text-align:center; z-index:2;
}
.pnode:last-child::after{content:none;}

.pipeline-pulse{
  position:absolute; top:0; left:0; height:2px; width:100%;
  background:linear-gradient(90deg,transparent,var(--purple-lite) 18%,var(--purple-lite) 22%,transparent 40%);
  background-size:280% 100%;
  animation:pulseflow 5.5s linear infinite;
  opacity:0.9;
}
@keyframes pulseflow{
  0%{background-position:120% 0;}
  100%{background-position:-40% 0;}
}

@media (max-width:760px){
  .pipeline-track{overflow-x:visible; flex-direction:column;}
  .pnode{border-right:none; border-bottom:1px solid var(--line); flex:1 1 auto;}
  .pnode:last-child{border-bottom:none;}
  .pnode::after{content:'↓'; right:auto; left:22px; top:auto; bottom:-11px; transform:none;}
  .pnode:last-child::after{content:none;}
}

/* ---------- cards ---------- */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){ .grid-5{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;} }

.card{
  border:1px solid var(--line); border-radius:18px; padding:32px;
  background:var(--ink-soft);
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:rgba(138,94,224,0.4); transform:translateY(-3px);}
.card .tag{font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; color:var(--purple-lite); text-transform:uppercase;}
.card h3{font-size:20px; margin-top:14px;}
.card p{color:var(--text-mid); font-size:14.5px; margin-top:10px;}

.on-paper .card{background:#fff; border-color:var(--line-soft);}
.on-paper .card p{color:var(--text-inkmuted);}
.on-paper .card:hover{border-color:rgba(109,60,208,0.35);}

/* keyword strip */
.strip{
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center;
  font-family:var(--mono); font-size:13px; color:var(--text-muted); letter-spacing:0.03em;
}
.strip span{position:relative; padding-right:28px;}
.strip span::after{content:'•'; position:absolute; right:8px; color:var(--purple-lite);}
.strip span:last-child::after{content:none;}
.strip span:last-child{padding-right:0;}

/* form */
.field{margin-bottom:20px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--text-inkmuted);}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:10px; border:1px solid var(--line-soft);
  font-family:var(--body); font-size:15px; background:#fff; color:var(--text-inkbody);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--purple); outline-offset:1px; border-color:var(--purple);
}

.divider{height:1px; background:var(--line); margin:0;}
.on-paper .divider{background:var(--line-soft);}

.badge-dot{width:8px;height:8px;border-radius:50%; display:inline-block; margin-right:8px;}