/* ============================================================
   vivarlex — 2026 black/white minimal marketing site
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:"cv11","ss03","ss01","cv02";
  background:#fff;color:#0a0a0a;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:root{
  --ink:#0a0a0a;--paper:#ffffff;--rule:#e8e8e8;--muted:#5a5a5a;
  --maxw:1240px;
  --pad-x:clamp(20px,4vw,48px);
  --section-pad:clamp(72px,10vw,140px);
}

@media (prefers-color-scheme: dark){
  body{background:#0a0a0a;color:#f5f5f5}
  :root{--ink:#f5f5f5;--paper:#0a0a0a;--rule:#222;--muted:#a0a0a0}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ----------- TYPOGRAPHY ----------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.025em;line-height:1.07}
h1{font-size:clamp(40px,5.6vw,76px);font-weight:800;letter-spacing:-0.035em}
h1 em{font-style:normal;color:var(--muted);font-weight:300}
h2{font-size:clamp(30px,4.2vw,52px);font-weight:700}
h3{font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-0.018em}
h4{font-size:13px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted)}
p{margin:0 0 0.6em}
.eyebrow,.section-tag{font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.section-tag.light{color:#bbb}
.lede{font-size:clamp(16px,1.5vw,20px);color:var(--muted);max-width:62ch;line-height:1.5;font-weight:400}
.lede.light{color:#bbb}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.05em;color:var(--muted)}

/* ----------- NAV ----------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--pad-x);
  background:color-mix(in oklch,var(--paper) 78%,transparent);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.nav.scrolled{border-bottom-color:var(--rule)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-0.02em;font-size:18px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink);opacity:0.75;transition:opacity 0.15s}
.nav-links a:hover{opacity:1}
.nav-links a.cta{background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:999px;opacity:1;font-weight:600}
.nav-links a.cta:hover{opacity:0.9}
@media (max-width:880px){.nav-links a:not(.cta){display:none}}

/* ----------- BUTTONS ----------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-0.005em;transition:transform 0.15s ease,background 0.15s ease;border:1px solid transparent}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.big{padding:18px 38px;font-size:16px}

/* ----------- HERO ----------- */
.hero{padding:clamp(64px,10vw,120px) var(--pad-x) clamp(48px,7vw,72px);position:relative;overflow:hidden}
.hero-inner{max-width:var(--maxw);margin:0 auto}
.hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
@media (max-width:960px){.hero-split{grid-template-columns:1fr;gap:32px}.hero-illus{order:-1;max-width:480px}}
.hero h1{margin:0 0 24px}
.hero .lede{margin:0 0 32px;max-width:48ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.hero-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.hero-bullets .check{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:10px;text-align:center;line-height:18px;margin-right:8px;font-weight:700;vertical-align:middle}
.hero-illus{background:#fafafa;border:1px solid var(--rule);border-radius:14px;padding:18px}
.hero-illus img{width:100%;height:auto;display:block;color:#0a0a0a}
@media (prefers-color-scheme: dark){
  .hero-illus{background:#f5f5f5;border-color:transparent}
  .hero-illus img{color:#0a0a0a}
}

.hero-marquee{margin-top:64px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0;overflow:hidden;mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}
.marquee-row{display:flex;gap:64px;animation:marquee 36s linear infinite;white-space:nowrap;width:max-content}
.marquee-row span{font-size:14px;font-weight:500;letter-spacing:-0.005em;color:var(--muted)}
.marquee-row span:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;background:currentColor;border-radius:50%;margin-left:64px;vertical-align:middle;opacity:0.5}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----------- LOGOS ----------- */
.logos{padding:clamp(40px,6vw,72px) var(--pad-x);border-bottom:1px solid var(--rule);text-align:center}
.logos .section-tag{text-align:center;margin:0 0 32px}
.logo-row{display:flex;gap:clamp(32px,6vw,80px);align-items:center;justify-content:center;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto}
.logo-row img{height:clamp(26px,3vw,36px);width:auto;filter:grayscale(1) brightness(0.5);opacity:0.85;transition:opacity 0.2s,filter 0.2s}
@media (prefers-color-scheme: dark){.logo-row img{filter:grayscale(1) brightness(2.4) invert(1);opacity:0.85}}
.logo-row img:hover{opacity:1;filter:grayscale(0) brightness(1)}
.logo-text{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(16px,2vw,22px);color:var(--ink);opacity:0.7;letter-spacing:-0.02em;transition:opacity 0.2s}
.logo-text:hover{opacity:1}

/* ----------- PLATFORM (features grid) ----------- */
.platform{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto}
.section-head{margin-bottom:64px;max-width:62ch}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.feature{background:var(--paper);padding:36px 32px;display:flex;flex-direction:column;gap:14px;transition:background 0.2s}
.feature:hover{background:color-mix(in oklch,var(--ink) 4%,var(--paper))}
.feature-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.1em}
.feature h3{margin-bottom:0}
.feature p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

/* ----------- INDUSTRY & PROCESS ----------- */
.industry{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto;color:var(--ink)}
.flow-figure{margin:48px 0 64px}
.flow-wrap{
  margin:0 calc(50% - 50vw);
  padding:32px var(--pad-x);
  background:#fafafa;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.flow-wrap img{width:100%;min-width:1100px;max-width:1400px;margin:0 auto;display:block;color:#0a0a0a}
.flow-figure figcaption{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  letter-spacing:0.04em;text-align:center;margin-top:18px;
}
.industry-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.ifig{margin:0;background:var(--paper);display:flex;flex-direction:column}
.ifig-inner{
  padding:0;
  border-bottom:1px solid var(--rule);
  background:#fafafa;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ifig-inner img{width:100%;height:100%;object-fit:contain;color:#0a0a0a;padding:18px}
.ifig figcaption{padding:28px 28px 32px;display:flex;flex-direction:column;gap:10px}
.ifig figcaption h3{margin:0}
.ifig figcaption p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* Dark mode: keep illustrations on light cards so the linework reads */
@media (prefers-color-scheme: dark){
  .flow-wrap{background:#f5f5f5}
  .flow-wrap img{color:#0a0a0a}
  .ifig-inner{background:#f5f5f5}
  .ifig-inner img{color:#0a0a0a}
}

/* ----------- PRODUCT SHOWCASE BLOCKS ----------- */
.showcase{padding:var(--section-pad) var(--pad-x)}
.showcase-dark{background:var(--ink);color:var(--paper)}
.showcase-dark .lede,.showcase-dark .section-tag{color:#aaa}
.showcase-dark .bullets li::before{color:var(--paper)}
.showcase-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
.showcase-inner.reverse{grid-template-columns:1.2fr 1fr}
.showcase-inner.reverse .showcase-illus{order:-1}
@media (max-width:980px){.showcase-inner,.showcase-inner.reverse{grid-template-columns:1fr;gap:40px}.showcase-inner.reverse .showcase-illus{order:0}}
.showcase-illus img{
  width:100%;height:auto;display:block;
  color:#0a0a0a;
  background:#fafafa;
  border-radius:12px;
  border:1px solid var(--rule);
  padding:18px;
}
@media (prefers-color-scheme: dark){
  .showcase-illus img{background:#f5f5f5;border-color:transparent}
}
.showcase-dark .showcase-illus img{background:#f5f5f5;border-color:transparent}
.bullets{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.bullets li{padding-left:28px;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:1px;background:currentColor}

/* ----------- NUMBERS BAND ----------- */
.numbers{padding:clamp(48px,8vw,80px) var(--pad-x);background:var(--ink);color:var(--paper);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:48px;text-align:left}
.numbers .num{display:flex;flex-direction:column;gap:8px}
.num .n{font-size:clamp(40px,5vw,64px);font-weight:300;letter-spacing:-0.04em;line-height:1;font-feature-settings:"tnum"}
.num .l{font-size:13px;color:#999;max-width:18ch;line-height:1.45}

/* ----------- HOW IT WORKS ----------- */
.how{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto}
.how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:48px}
.step{position:relative;padding:32px 0;border-top:1px solid var(--ink)}
.step-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.1em;display:block;margin-bottom:16px}
.step h3{margin-bottom:12px}
.step p{color:var(--muted);font-size:15px;margin-bottom:8px}
.step-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink);font-weight:600;margin-top:8px}

/* ----------- VERTICALS ----------- */
.verticals{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto}
.vert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px}
.vert{background:var(--paper);padding:32px;display:flex;flex-direction:column;gap:14px}
.vert svg{color:var(--ink);opacity:0.85}
.vert h3{margin:0}
.vert p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}

/* ----------- TESTIMONIAL ----------- */
.testimonial{padding:var(--section-pad) var(--pad-x);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.testimonial figure{max-width:900px;margin:0 auto;text-align:center}
.testimonial blockquote{margin:0 0 32px}
.testimonial p{font-size:clamp(22px,2.6vw,32px);font-weight:400;letter-spacing:-0.02em;line-height:1.32;color:var(--ink)}
.testimonial figcaption{font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.testimonial figcaption strong{color:var(--ink);font-weight:600}

/* ----------- INTEGRATIONS ----------- */
.integrations{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto;text-align:center}
.integrations .section-head{margin-left:auto;margin-right:auto;text-align:center}
.integrations .lede{margin-left:auto;margin-right:auto;text-align:center}
.integ-row{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;font-size:14px;color:var(--muted)}
.integ-row span:nth-child(even){opacity:0.5}

/* ----------- SERVICES ----------- */
.services{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:48px}
.service{padding:0;border-top:1px solid var(--ink);padding-top:24px}
.service h3{margin-bottom:8px}
.service p{color:var(--muted);font-size:15px}

/* ----------- PRICING ----------- */
.pricing{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.price{padding:36px 32px;border:1px solid var(--rule);border-radius:12px;display:flex;flex-direction:column;gap:16px;position:relative;background:var(--paper);transition:border-color 0.2s}
.price:hover{border-color:var(--ink)}
.price.featured{border-color:var(--ink);background:color-mix(in oklch,var(--ink) 3%,var(--paper))}
.price .badge{position:absolute;top:-12px;left:32px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.price h3{margin:0}
.price-amount{font-size:clamp(36px,4vw,46px);font-weight:300;letter-spacing:-0.04em;line-height:1;margin:8px 0 0}
.price-amount .cur{font-size:0.6em;vertical-align:0.3em;margin-right:2px;color:var(--muted)}
.price-amount .per{font-size:0.34em;vertical-align:0.3em;margin-left:6px;color:var(--muted);font-weight:500;letter-spacing:0}
.price-amount.custom{font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-0.03em}
.price-desc{font-size:14px;color:var(--muted);margin:0}
.price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px;flex:1}
.price li{padding-left:22px;position:relative}
.price li::before{content:"✓";position:absolute;left:0;color:var(--ink);font-weight:700}
.price .btn{margin-top:auto}

/* ----------- COMPLIANCE ----------- */
.compliance{padding:var(--section-pad) var(--pad-x);background:color-mix(in oklch,var(--ink) 3%,var(--paper))}
@media (prefers-color-scheme: dark){.compliance{background:color-mix(in oklch,var(--paper) 4%,#000)}}
.compliance-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:880px){.compliance-grid{grid-template-columns:1fr}}
.compliance ul{list-style:none;padding:0;margin:24px 0 0}
.compliance li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;display:flex;align-items:center;gap:12px}
.compliance li::before{content:"✓";color:var(--ink);font-weight:700;display:inline-block;width:16px}
.compliance-cards{display:flex;flex-direction:column;gap:16px}
.ccard{padding:24px;border:1px solid var(--rule);background:var(--paper);border-radius:8px}
.ccard h3{font-size:16px;font-weight:600;margin-bottom:6px}
.ccard p{margin:0;color:var(--muted);font-size:14px}

/* ----------- FAQ ----------- */
.faq{padding:var(--section-pad) var(--pad-x);max-width:var(--maxw);margin:0 auto}
.faq-list{margin-top:32px}
.faq details{padding:24px 0;border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-0.01em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:24px;color:var(--muted);transition:transform 0.2s}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.6;max-width:75ch}

/* ----------- CTA BAND ----------- */
.cta-band{padding:var(--section-pad) var(--pad-x);text-align:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cta-band h2{margin-bottom:16px;max-width:18ch;margin-left:auto;margin-right:auto}
.cta-band p{margin:0 auto 32px;color:var(--muted);max-width:50ch}
.cta-fine{margin-top:24px!important;font-size:13px;max-width:60ch!important}

/* ----------- FOOTER ----------- */
.footer{padding:clamp(64px,8vw,96px) var(--pad-x) 32px;max-width:var(--maxw);margin:0 auto}
.foot-top{margin-bottom:64px}
.foot-top .brand{font-size:24px;margin-bottom:8px}
.foot-top p{color:var(--muted);font-size:15px;max-width:38ch}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:48px;padding-bottom:48px;border-bottom:1px solid var(--rule)}
.foot-cols h4{margin-bottom:14px}
.foot-cols ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.foot-cols a{font-size:14px;color:var(--ink);opacity:0.7;transition:opacity 0.15s}
.foot-cols a:hover{opacity:1}
.foot-bot{display:flex;justify-content:space-between;padding-top:24px;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:16px}

/* ----------- SCROLL-IN ANIMATION ----------- */
.feature,.service,.ccard,.num,.step,.vert,.price,.section-head,.hero-cta,.faq details{
  animation:fadein 0.6s ease both;
  animation-timeline:view();
  animation-range:entry 0% cover 30%;
}
@keyframes fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ----------- SELECTION ----------- */
::selection{background:var(--ink);color:var(--paper)}