:root{
  --ink:#1c211f;
  --kraft:#ddd5c1;
  --kraft-deep:#c9bfa6;
  --panel:#15201d;
  --panel-deep:#0e1614;
  --orange:#ff5a1f;
  --orange-dim:#c94515;
  --teal:#2e8b7c;
  --grid-line:rgba(28,33,31,0.10);
  --grid-line-dark:rgba(221,213,193,0.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--kraft);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  margin:0;
  letter-spacing:0.01em;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ================= NAV ================= */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(221,213,193,0.92);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }

/* ---- LOGO SLOT (nav) -----------------------------------------------
   Replace the contents of .logo-slot with your <img> tag, e.g.:
   <img src="logo.png" alt="Viniti-AI" style="height:32px;width:auto;">
   This is identical on both index.html and products.html — update both.
------------------------------------------------------------------------*/
.logo-slot{
  width:34px; height:34px;
  border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:var(--orange);
}
.logo-slot svg{ width:18px; height:18px; }
.wordmark{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:21px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
nav ul{ list-style:none; display:flex; gap:30px; margin:0; padding:0; font-size:14px; font-weight:500; }
nav ul li a{ text-decoration:none; color:var(--ink); opacity:0.75; }
nav ul li a:hover, nav ul li a.active{ opacity:1; }
nav ul li a.active{ border-bottom:2px solid var(--orange); }
@media (max-width:760px){ nav ul{ display:none; } }
.nav-cta{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  background:var(--ink); color:var(--kraft);
  padding:10px 18px;
  text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--orange); color:var(--ink); }

/* ================= HERO ================= */
.hero{ position:relative; padding:100px 0 90px; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom, black, transparent 90%);
}
.hero-inner{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; } }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--orange-dim);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange-dim); }
.hero h1{
  font-size:clamp(40px,6.2vw,74px);
  line-height:0.95;
  font-weight:800;
}
.hero h1 span{ color:var(--orange); }
.hero p.lede{ margin-top:22px; font-size:17px; color:#3c433f; max-width:46ch; }
.hero-actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary{
  background:var(--orange); color:var(--ink);
  border:2px solid var(--ink);
  padding:13px 22px; text-decoration:none;
  font-weight:600; font-size:14.5px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s;
  display:inline-block;
}
.btn-primary:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-ghost{
  border:2px solid var(--ink); color:var(--ink);
  padding:13px 22px; text-decoration:none;
  font-weight:600; font-size:14.5px;
  transition:background .12s, color .12s;
  display:inline-block;
}
.btn-ghost:hover{ background:var(--ink); color:var(--kraft); }

/* sketch-to-spec signature visual */
.sketch-card{ position:relative; border:2px solid var(--ink); background:#eae4d4; padding:6px; }
.sketch-card .tab{
  position:absolute; top:-13px; left:18px;
  background:var(--ink); color:var(--kraft);
  font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  padding:3px 10px; text-transform:uppercase; letter-spacing:0.08em;
}
.sketch-card svg{ width:100%; height:auto; display:block; }

/* ================= SECTION SHELL ================= */
section{ padding:90px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:48px; border-bottom:2px solid var(--ink); padding-bottom:18px;
}
.section-tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--orange-dim); }
.section-head h2{ font-size:clamp(28px,4vw,44px); margin-top:6px; font-weight:700; }
.section-head .count{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:#6b7069; white-space:nowrap; padding-bottom:6px; }

/* ================= WHAT WE BUILD ================= */
.build-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:2px solid var(--ink); }
@media (max-width:820px){ .build-grid{ grid-template-columns:1fr; } }
.build-card{ background:var(--kraft); padding:34px 28px; }
.build-card .idx{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--orange-dim); }
.build-card h3{ font-size:24px; margin-top:14px; font-weight:700; }
.build-card p{ font-size:14.5px; color:#4a5049; margin-top:12px; }
.build-card ul{ margin-top:16px; padding-left:0; list-style:none; font-size:13px; color:#5a6058; }
.build-card li{ padding:5px 0; border-top:1px solid rgba(28,33,31,0.14); }

/* ================= PROCESS (dark, signature sequence) ================= */
.process{ background:var(--panel-deep); color:var(--kraft); position:relative; overflow:hidden; }
.process::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size:36px 36px;
}
.process .section-head{ border-bottom-color:rgba(221,213,193,0.2); position:relative; }
.process .section-head h2{ color:var(--kraft); }
.process .count{ color:#5c6a63; }
.steps{ position:relative; display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:100px 1fr; gap:26px;
  padding:26px 0; border-top:1px solid rgba(221,213,193,0.15);
  align-items:baseline;
}
.step:last-child{ border-bottom:1px solid rgba(221,213,193,0.15); }
.step .num{ font-family:'Big Shoulders Display', sans-serif; font-size:44px; font-weight:800; color:var(--orange); line-height:1; }
.step h3{ font-size:20px; text-transform:none; font-weight:700; letter-spacing:0; }
.step p{ font-size:14px; color:#9aa39c; margin-top:8px; max-width:56ch; }
@media (max-width:600px){ .step{ grid-template-columns:56px 1fr; } .step .num{ font-size:30px; } }

/* ================= WHY / CAPABILITIES ================= */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border:2px solid var(--ink); }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } }
.why-item{ background:var(--kraft); padding:26px 28px; display:flex; gap:16px; }
.why-item .mark{ width:10px; height:10px; background:var(--teal); margin-top:6px; flex-shrink:0; transform:rotate(45deg); }
.why-item h4{ font-family:'Big Shoulders Display', sans-serif; font-size:18px; font-weight:700; text-transform:none; }
.why-item p{ font-size:14px; color:#4a5049; margin-top:6px; }

/* ================= COMING SOON (products page) ================= */
.stamp-wrap{ display:flex; justify-content:center; margin:12px 0 8px; }
.stamp{
  border:3px solid var(--orange);
  color:var(--orange);
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  font-size:clamp(28px,5vw,46px);
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:14px 34px;
  transform:rotate(-2deg);
  display:inline-block;
}
.coming-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:2px solid var(--ink); }
@media (max-width:820px){ .coming-grid{ grid-template-columns:1fr; } }
.coming-card{ background:var(--kraft); padding:34px 28px; position:relative; }
.coming-card .badge{
  position:absolute; top:18px; right:18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--ink); color:var(--kraft);
  padding:4px 9px;
}
.coming-card .idx{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--orange-dim); }
.coming-card h3{ font-size:22px; margin-top:14px; font-weight:700; }
.coming-card p{ font-size:14px; color:#4a5049; margin-top:12px; }

.notify-card{
  border:2px solid var(--ink);
  background:#eae4d4;
  padding:32px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.notify-card h3{ font-size:22px; font-weight:700; }
.notify-card p{ font-size:14px; color:#4a5049; margin-top:8px; max-width:44ch; }

/* ================= CONTACT ================= */
.contact{ background:var(--panel); color:var(--kraft); position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size:36px 36px;
}
.contact-inner{ position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .contact-inner{ grid-template-columns:1fr; } }
.contact h2{ font-size:clamp(30px,4.4vw,48px); color:var(--kraft); }
.contact p.lede{ margin-top:16px; color:#a9b2a7; max-width:44ch; font-size:15.5px; }
.contact-row{ display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid rgba(221,213,193,0.18); font-size:14px; }
.contact-row:last-child{ border-bottom:1px solid rgba(221,213,193,0.18); }
.contact-row .k{ color:var(--orange); font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
.contact-row a{ text-decoration:none; color:var(--kraft); }
.contact-row a:hover{ color:var(--orange); }
.contact-card{ border:2px solid rgba(221,213,193,0.25); padding:28px; background:rgba(0,0,0,0.15); }
.contact-card .cap{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--orange); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; }
.contact-card p{ font-size:14px; color:#a9b2a7; line-height:1.7; }
.contact-card .btn-primary{ margin-top:20px; box-shadow:4px 4px 0 rgba(221,213,193,0.4); }

footer{ background:var(--panel-deep); color:#5c6a63; font-size:12.5px; padding:24px 0; }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }
a:focus-visible, button:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }