/* Cserv Labs — retro systems aesthetic.
   Palette: cream/paper, warm ochre, rust, deep plum. Thick lines. Soft shadows.
   Type: Space Grotesk (display), IBM Plex Mono (labels), Inter (body).
   No frameworks. ~300 lines. */

:root{
  /* paper + ink */
  --bg:        #f4ead3;          /* warm cream */
  --bg-2:      #ecdfb8;          /* slightly deeper cream panel */
  --bg-grid:   rgba(34, 24, 15, .06);
  --ink:       #231c14;          /* near-black with warmth */
  --ink-2:     #5a4a33;
  --ink-3:     #7a6a52;

  /* accents */
  --sun:       #e8a33d;          /* ochre */
  --sun-ink:   #3a2a0a;
  --rust:      #c65a3d;          /* tomato rust */
  --plum:      #593154;          /* deep plum */
  --moss:      #5a6f3b;          /* subtle moss */
  --sky:       #7ea3a8;          /* dusty teal */

  --line:      #231c14;
  --card:      #fbf4df;

  --radius:    16px;
  --radius-lg: 22px;
  --shadow:    6px 6px 0 0 var(--ink);
  --shadow-sm: 3px 3px 0 0 var(--ink);
  --max:       1160px;

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

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; padding:0}

body{
  background: var(--bg);
  background-image:
    radial-gradient(var(--bg-grid) 1px, transparent 1px),
    radial-gradient(var(--bg-grid) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35; mix-blend-mode:multiply;
}

a{color:var(--rust); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:2}

/* -------------------------------------------------------------------------- */
/* NAV */
.nav{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:2px solid var(--line);
}
.nav-inner{display:flex; justify-content:space-between; align-items:center; padding:16px 24px}
.brand{
  display:inline-flex; align-items:center; gap:10px; color:var(--ink);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  letter-spacing:-.01em;
}
.brand-mark{
  display:inline-grid; place-items:center; width:30px; height:30px;
  background:var(--sun); color:var(--sun-ink);
  border:2px solid var(--line); border-radius:8px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-4deg); transition: transform .3s var(--ease);
  font-weight:800;
}
.brand:hover .brand-mark{ transform:rotate(4deg) scale(1.08) }
.nav-links{display:flex; gap:6px}
.nav-links a{
  color:var(--ink-2); padding:8px 14px; border-radius:999px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.02em;
}
.nav-links a:hover{ background:var(--bg-2); color:var(--ink); text-decoration:none }

/* -------------------------------------------------------------------------- */
/* HERO */
.hero{padding:90px 0 100px; position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 22px;
}
.eyebrow::before{
  content:""; display:inline-block; width:32px; height:2px; background:var(--rust);
}
h1{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(36px, 6vw, 72px); line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 22px; max-width: 15ch;
}
h1 .hi-rust{ color:var(--rust) }
h1 .hi-plum{ color:var(--plum) }
h1 .hi-sun{ background:var(--sun); color:var(--sun-ink); padding:0 .18em; border-radius:8px; box-decoration-break:clone; -webkit-box-decoration-break:clone }

.lede{ max-width: 64ch; color:var(--ink-2); font-size: 19px; margin:0 0 28px }
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 28px}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border:2px solid var(--line); border-radius:999px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
  background: var(--card); color:var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
  cursor:pointer;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 var(--ink); text-decoration:none }
.btn:active{ transform: translate(1px,1px); box-shadow: 1px 1px 0 0 var(--ink) }
.btn-primary{ background: var(--sun); color: var(--sun-ink) }
.btn-rust{ background: var(--rust); color: #fff }
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

.micro{color:var(--ink-3); font-size:13px; font-family:'IBM Plex Mono',monospace}

/* hero stamps (floating retro stickers) */
.stamps{position:absolute; inset:0; pointer-events:none}
.stamp{
  position:absolute; background:var(--card); border:2px solid var(--line); border-radius:14px;
  box-shadow: var(--shadow);
  padding:10px 14px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  display:flex; align-items:center; gap:8px;
  animation: float 7s ease-in-out infinite;
}
.stamp b{font-family:'Space Grotesk',sans-serif; font-weight:700}
.stamp .dot{width:8px; height:8px; border-radius:50%; background:var(--moss); box-shadow:0 0 0 3px rgba(90,111,59,.2)}
.stamp.s1{ top: 14%; right: 8%; transform: rotate(4deg); animation-delay:.2s }
.stamp.s2{ top: 62%; right: 18%; transform: rotate(-6deg); background:var(--sun); animation-delay:.8s }
.stamp.s3{ top: 38%; right: -2%; transform: rotate(2deg); animation-delay:1.5s }
@media (max-width: 900px){ .stamps{display:none} }

@keyframes float{
  0%,100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%   { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}
.stamp.s1{ --r: 4deg }
.stamp.s2{ --r: -6deg }
.stamp.s3{ --r: 2deg }

/* ticker */
.ticker{
  margin-top:30px; border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  background: var(--plum); color:#f4ead3;
  overflow:hidden; white-space:nowrap; padding:12px 0;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
}
.ticker-track{ display:inline-block; animation: scroll 32s linear infinite; padding-left:100%; }
.ticker-track span{ margin:0 26px; opacity:.9 }
.ticker-track b{ color:var(--sun); font-weight:600 }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* -------------------------------------------------------------------------- */
/* SECTIONS */
.section{ padding: 90px 0; position:relative }
.section.alt{
  background: var(--bg-2);
  border-top:2px solid var(--line); border-bottom:2px solid var(--line);
}
.section h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size: clamp(28px, 3.4vw, 42px);
  margin:0 0 10px; letter-spacing:-.01em;
}
.section-lede{ color:var(--ink-2); margin:0 0 44px; max-width:64ch }
.kicker{
  display:inline-block; padding:6px 12px; border:2px solid var(--line); border-radius:999px;
  background: var(--card); box-shadow: var(--shadow-sm);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:16px;
}

/* -------------------------------------------------------------------------- */
/* PRODUCTS GRID */
.cards{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px }
@media (max-width: 1080px){ .cards{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 680px){ .cards{ grid-template-columns: 1fr } }

.card{
  background: var(--card); border:2px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 24px;
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{ transform: translate(-3px,-3px); box-shadow: 9px 9px 0 0 var(--ink) }
.card.featured{ background: var(--sun); color: var(--sun-ink) }
.card.featured .tag{ color: var(--sun-ink) }
.card.featured .card-desc{ color: var(--sun-ink); opacity:.85 }
.card.featured .card-list{ color: var(--sun-ink); opacity:.9 }
.card.featured .card-cta-note{ color: var(--sun-ink); opacity:.8 }

.card-head h3{ margin:0 0 4px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px }
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0;
}
.card-desc{ color: var(--ink-2); margin:0 }
.card-list{ color:var(--ink-2); margin:0; padding-left:20px }
.card-list li{ margin: 4px 0 }
.card-price{
  margin: auto 0 0; display:flex; align-items:baseline; gap:8px;
  font-family:'Space Grotesk',sans-serif;
}
.card-price strong{ font-size: 30px; font-weight:700 }
.card-price span{ color: var(--ink-3); font-size:13px; font-family:'IBM Plex Mono',monospace }
.card-cta-note{ margin:0; font-size:13px; color:var(--ink-3); font-family:'IBM Plex Mono',monospace }

/* featured ribbon */
.ribbon{
  position:absolute; top:14px; right:-34px; transform:rotate(30deg);
  background:var(--rust); color:#fff; padding:4px 40px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border-top:2px solid var(--line); border-bottom:2px solid var(--line);
}

.card-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:6px;
  padding:12px 16px; border:2px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.card-cta:hover{ transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 var(--ink); text-decoration:none }
.card.featured .card-cta{ background:var(--sun-ink); color:var(--sun) }

/* -------------------------------------------------------------------------- */
/* WORKFLOW SHOWCASE */
.workflow-showcase{
  margin-top:34px;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.95fr);
}
.workflow-stage{
  padding:28px;
  border-right:2px solid var(--line);
  background:linear-gradient(180deg,#fbf4df,#f2e4bf);
}
.workflow-side{
  padding:28px;
  background:var(--plum);
  color:#f4ead3;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.workflow-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:30px;
  margin:8px 0 18px;
}
.workflow-panels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.workflow-panel{
  background:#fffaf0;
  border:2px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  padding:16px;
  min-height:180px;
}
.workflow-label{ margin:0 0 8px; color:var(--ink-2) }
.workflow-panel p{ margin:0 }
.workflow-body{ margin-top:10px !important; color:var(--ink-2) }
.workflow-side-tag{ color:#f1dca8 }
.workflow-points{ margin:10px 0 0 18px; line-height:1.9 }
@media (max-width: 980px){
  .workflow-showcase{ grid-template-columns:1fr }
  .workflow-stage{ border-right:none; border-bottom:2px solid var(--line) }
}
@media (max-width: 680px){
  .workflow-panels{ grid-template-columns:1fr }
  .workflow-title{ font-size:24px }
  .workflow-panel{ min-height:unset }
}

/* -------------------------------------------------------------------------- */
/* PRICING TABLE */
.pricing-wrap{
  background: var(--card); border:2px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.pricing{ width:100%; border-collapse: collapse }
.pricing th, .pricing td{ padding:16px 20px; text-align:left; border-bottom:2px solid var(--line) }
.pricing thead th{
  background: var(--plum); color:#f4ead3;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.pricing tbody tr:last-child td{ border-bottom:none }
.pricing tbody tr:nth-child(even) td{ background: rgba(232, 163, 61, 0.08) }
.pricing tbody td:last-child{ font-family:'Space Grotesk',sans-serif; font-weight:700 }

/* -------------------------------------------------------------------------- */
/* HOW IT WORKS */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; counter-reset: step;
}
@media (max-width:780px){ .steps{ grid-template-columns: 1fr } }
.steps li{
  background: var(--card); border:2px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding:24px; counter-increment: step; position: relative;
  transition: transform .2s var(--ease);
}
.steps li:hover{ transform: translateY(-4px) }
.steps li::before{
  content: counter(step, decimal-leading-zero);
  position:absolute; top:14px; right:18px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; color: var(--ink-3);
}
.steps h3{ margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-size:19px }
.steps p{ margin:0; color:var(--ink-2) }

/* -------------------------------------------------------------------------- */
/* FAQ */
.faqs{ display:flex; flex-direction:column; gap:12px }
details{
  background: var(--card); border:2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 20px;
  transition: box-shadow .2s var(--ease);
}
details[open]{ box-shadow: 5px 5px 0 0 var(--ink) }
summary{ cursor:pointer; font-weight:600; list-style:none; font-family:'Space Grotesk',sans-serif }
summary::after{ content:'+'; float:right; color:var(--ink-3); transition: transform .2s var(--ease) }
details[open] summary::after{ content:'–' }
details p{ color:var(--ink-2); margin:10px 0 0 }

/* -------------------------------------------------------------------------- */
/* LEGAL PAGES */
.legal{ max-width: 760px; margin:0 auto; padding: 60px 24px; position:relative; z-index:2 }
.legal h1{ font-family:'Space Grotesk',sans-serif; font-size:38px; margin:0 0 8px; letter-spacing:-.01em }
.legal h2{ font-family:'Space Grotesk',sans-serif; font-size:20px; margin:28px 0 8px }
.legal p, .legal li{ color: var(--ink-2) }
.legal p strong, .legal li strong{ color: var(--ink) }
.back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  color: var(--ink-2); font-family:'IBM Plex Mono',monospace; font-size:13px;
}

/* -------------------------------------------------------------------------- */
/* FOOTER */
.foot{
  background: var(--ink); color: var(--bg);
  border-top: 2px solid var(--line);
  padding: 50px 0 24px; margin-top: 40px;
}
.foot a{ color: var(--sun) }
.foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px }
@media (max-width: 780px){ .foot-grid{ grid-template-columns: 1fr 1fr } }
.foot-head{ color: var(--bg); font-family:'Space Grotesk',sans-serif; font-weight:700; margin:0 0 10px }
.foot ul{ list-style:none; padding:0; margin:0 }
.foot li{ margin:6px 0 }
.foot .brand{ color: var(--bg) }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 20px; margin-top: 24px; border-top:1px solid rgba(244,234,211,.18);
  font-family:'IBM Plex Mono',monospace; font-size:12px;
}

/* -------------------------------------------------------------------------- */
/* SCROLL REVEAL */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.reveal.in{ opacity:1; transform: translateY(0) }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s }
.reveal.d3{ transition-delay:.18s } .reveal.d4{ transition-delay:.24s }

/* typewriter cursor on hero tagline */
.cursor{ display:inline-block; width:10px; height:1em; background: var(--ink); margin-left:4px; vertical-align:-2px; animation: blink 1s steps(2) infinite }
@keyframes blink{ 50%{opacity:0} }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition:none!important }
}