/* ============================================================
   ULTRA landing page
   Editorial, type-driven design. Purple accent.
   ============================================================ */

:root {
  --purple: #6d28d9;
  --purple-deep: #4c1d95;
  --purple-soft: #ede9fe;
  --ink: #131217;
  --paper: #faf9f7;
  --grey: #6b6a72;
  --line: rgba(19, 18, 23, 0.12);
  --line-light: rgba(250, 249, 247, 0.16);

  --font-display: "Anton", sans-serif;
  --font-serif: "Instrument Serif", serif;
  --font-body: "Inter", sans-serif;

  --pad-x: clamp(20px, 5vw, 80px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--purple); color: #fff; }

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
}

/* ============ NAV ============ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 20px var(--pad-x);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.nav.is-scrolled { border-bottom-color: var(--line); }

.nav__logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.nav__logo-dot { color: var(--purple); }

.nav__links {
  display: flex;
  gap: clamp(14px, 2.5vw, 32px);
  margin-left: auto;
}

.nav__links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.nav__cta:hover { background: var(--purple); transform: translateY(-1px); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  margin-left: auto;
}

.nav__burger span {
  display: block;
  width: 28px; height: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-x);
  gap: 8px;
}

.mobile-menu.is-open { display: flex; }

.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(36px, 9vw, 56px);
  text-transform: uppercase;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.mobile-menu a:hover { color: var(--purple); }

.mobile-menu__cta { color: var(--purple); }

body.menu-open { overflow: hidden; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ============ HERO ============ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px var(--pad-x) 80px;
}

.hero > * { position: relative; z-index: 1; }

.hero__canvas {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-40px, 2vw, 80px);
  transform: translateY(-50%);
  width: clamp(320px, 44vw, 700px);
  height: clamp(320px, 44vw, 700px);
  pointer-events: none;
}

.hero__kicker {
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: clamp(36px, 5vh, 56px);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8.6vw, 150px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.hero__title em {
  font-size: 0.96em;
  text-transform: none;
  letter-spacing: 0;
}

.hero__line {
  display: block;
  overflow: hidden;
  padding: 0.18em 0 0.08em;
  margin: -0.18em 0 -0.08em;
}

.hero__word {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__line:nth-child(1) .hero__word { animation-delay: 0.1s; }
.hero__line:nth-child(2) .hero__word { animation-delay: 0.22s; }
.hero__line:nth-child(3) .hero__word { animation-delay: 0.34s; }

@keyframes hero-rise {
  to { transform: translateY(0); }
}

.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vh, 72px);
}

.hero__sub {
  max-width: 520px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--grey);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  right: calc(var(--pad-x) / 2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero__scroll span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey);
  writing-mode: vertical-rl;
}

.hero__scroll i {
  width: 1px;
  height: 72px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.hero__scroll i::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--purple);
  animation: scroll-drip 2s ease-in-out infinite;
}

@keyframes scroll-drip {
  to { top: 110%; }
}

/* page hero: shorter, no ambient canvas */
.hero--page {
  min-height: 76svh;
  padding-top: 160px;
}

/* ============ BUTTONS / LINKS ============ */

.btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 20px 40px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--purple); transform: translateY(-2px); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--purple-soft); transform: translateY(-2px); }

.btn--outline {
  background: none;
  border: 1px solid rgba(19, 18, 23, 0.35);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--purple);
  color: var(--purple);
  transform: translateY(-2px);
}

.link-arrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

.link-arrow::after {
  content: "→";
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.25s ease;
}

.link-arrow:hover::after { transform: translateX(6px); }
.link-arrow:hover { color: var(--purple); }

/* ============ MARQUEE ============ */

.marquee {
  background: var(--purple);
  color: #fff;
  overflow: hidden;
  padding: 18px 0;
  transform: rotate(-1deg) scale(1.02);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.marquee__track i {
  font-style: normal;
  font-size: 10px;
  opacity: 0.6;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============ SECTIONS ============ */

.section {
  padding: clamp(90px, 12vh, 160px) var(--pad-x);
}

.section__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.section__label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--purple);
}

.section__label--light { color: rgba(255, 255, 255, 0.75); }
.section__label--light::before { background: rgba(255, 255, 255, 0.4); }

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 88px);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: 32px;
}

.section__title em { text-transform: none; }

.section__title--xl {
  font-size: clamp(44px, 7.5vw, 110px);
  max-width: 16ch;
}

.section__intro {
  max-width: 560px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--grey);
  margin-bottom: clamp(48px, 7vh, 80px);
}

.section__intro--center {
  margin: 0 auto;
  text-align: center;
}

/* dark sections */

.section--dark {
  background: var(--ink);
  color: var(--paper);
}

.section--dark .section__intro { color: rgba(250, 249, 247, 0.65); }
.section--dark em { color: #a78bfa; }
.section--dark .section__label { color: #a78bfa; }
.section--dark .section__label::before { background: #a78bfa; }
.section--dark ::selection { background: #a78bfa; color: var(--ink); }

/* ============ FEATURE LIST ============ */

.feature-list {
  border-top: 1px solid var(--line);
}

.feature-list__item {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: clamp(24px, 3.5vh, 40px) 0;
  border-bottom: 1px solid var(--line);
}

.feature-list__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--purple);
}

.feature-list__item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 44px);
  text-transform: uppercase;
  line-height: 1.2;
}

.feature-list__item p {
  color: var(--grey);
  font-size: clamp(14px, 1.4vw, 17px);
}

/* ============ VERTICALE ============ */

.vertical-list {
  border-top: 1px solid var(--line);
}

.vertical-list__item {
  display: grid;
  grid-template-columns: 1fr 1.4fr 60px;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s ease;
}

.vertical-list__item:hover { padding-left: 16px; }

.vertical-list__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 64px);
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.vertical-list__item:hover .vertical-list__name { color: var(--purple); }

.vertical-list__desc {
  color: var(--grey);
  font-size: clamp(14px, 1.4vw, 17px);
}

.vertical-list__arrow {
  font-size: clamp(24px, 3vw, 40px);
  justify-self: end;
  color: var(--purple);
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.vertical-list__item:hover .vertical-list__arrow { transform: rotate(0deg); }

/* ============ STATS ============ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(48px, 7vh, 80px) 0;
}

.stats__item {
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}

.stats__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(52px, 6.5vw, 100px);
  line-height: 1;
  color: var(--purple);
  margin-bottom: 16px;
}

.stats__label {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.5;
  display: block;
  max-width: 24ch;
}

.stats__note {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.35;
  max-width: 26ch;
}

.stats__note em { color: var(--purple); }

/* ============ SECURITY GRID ============ */

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  margin-top: clamp(48px, 7vh, 80px);
}

.security-grid__item {
  background: var(--ink);
  padding: clamp(28px, 4vw, 48px);
  transition: background 0.3s ease;
}

.security-grid__item:hover { background: #1c1a22; }

.security-grid__item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.security-grid__item p {
  color: rgba(250, 249, 247, 0.6);
  font-size: clamp(14px, 1.4vw, 16px);
}

/* ============ SPLIT LAYOUT (text + graphic) ============ */

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.split__figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

.split__figure svg {
  width: 100%;
  height: auto;
  display: block;
}

.split--ai .section__intro { margin-bottom: 0; }

.split__cta { margin-top: 36px; }

.split--reverse { grid-template-columns: 0.85fr 1.15fr; }
.split--reverse .split__text { order: 2; }
.split--reverse .split__figure { order: 1; }

@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__text { order: 0; }
  .split--reverse .split__figure { order: 1; }
  .split__figure { max-width: 340px; margin: 0 auto; }
}

/* ============ AI FLOW GRAPHIC (document to structured data) ============ */

.aiflow { max-width: 460px; }

/* raw sources, left: loose and faint */
.aiflow__src-line {
  stroke: #a78bfa;
  stroke-opacity: 0.3;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.aiflow__src-frame {
  fill: none;
  stroke: rgba(250, 249, 247, 0.4);
  stroke-width: 1.5;
}

.aiflow__src-frame-line {
  stroke: rgba(250, 249, 247, 0.4);
  stroke-width: 1.5;
}

.aiflow__src-ctrl { fill: rgba(250, 249, 247, 0.35); }

/* dots converging into the core, then flowing out refined */
.aiflow__dot {
  fill: #a78bfa;
  opacity: 0;
  animation: aiflow-drift 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes aiflow-drift {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translate(var(--tx, 60px), var(--ty, 0px)); opacity: 0; }
}

/* the intelligence */
.aiflow__core-dot {
  fill: #8b5cf6;
  animation: aiflow-core 3.6s ease-in-out infinite;
}

.aiflow__core-halo {
  fill: none;
  stroke: #8b5cf6;
  stroke-opacity: 0.35;
  stroke-width: 1;
  animation: aiflow-core 3.6s ease-in-out infinite;
  animation-delay: 0.2s;
}

@keyframes aiflow-core {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* structured result, right: crisp document */
.aiflow__doc-outline,
.aiflow__doc-fold {
  fill: none;
  stroke: rgba(250, 249, 247, 0.75);
  stroke-width: 1.5;
}

.aiflow__row circle { fill: #8b5cf6; }

.aiflow__row line {
  stroke: rgba(250, 249, 247, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ============ SERVER RACK GRAPHIC (on-premise) ============ */

.rack { max-width: 300px; }

.rack__frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.rack__foot { fill: var(--ink); }

.rack__unit-body {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.rack__unit-body--ai {
  fill: var(--ink);
}

.rack__ai-label {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.1em;
  fill: var(--paper);
  text-anchor: middle;
}

.rack__vent {
  stroke: var(--ink);
  stroke-opacity: 0.3;
  stroke-width: 1.5;
}

.rack__drive {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}

.rack__led {
  fill: var(--purple);
  animation: led-blink 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.rack__led--dim { fill: #a78bfa; }
.rack__led--soft { fill: #8b5cf6; }

@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .aiflow__dot, .aiflow__core-dot, .aiflow__core-halo, .rack__led { animation: none; }
  .aiflow__dot { opacity: 0.6; }
}

/* ============ ADOPTION GRAPHIC (training) ============ */

.adopt { max-width: 440px; }

.adopt__seed { fill: var(--purple); }

.adopt__p {
  fill: rgba(19, 18, 23, 0.16);
  animation: adopt-wave 5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes adopt-wave {
  0%, 100% { fill: rgba(19, 18, 23, 0.16); }
  30% { fill: #6d28d9; }
  60% { fill: rgba(19, 18, 23, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .adopt__p { animation: none; }
  .adopt__p--near { fill: var(--purple); }
}

/* ============ ON-PREMISE ============ */

.onprem__list {
  display: grid;
  grid-template-columns: 1fr;
}

.onprem__list li {
  position: relative;
  padding: 18px 0 18px 36px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
}

.onprem__list li:first-child { border-top: 1px solid var(--line); }

.onprem__list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}


.onprem__list--dark li { border-color: var(--line-light); }
.onprem__list--dark li:first-child { border-top-color: var(--line-light); }

/* ============ VERTICAL PAGE GRAPHICS ============ */

/* 01: productivity bar chart */
.chart { max-width: 420px; }

.chart__base {
  stroke: var(--line);
  stroke-width: 1.5;
}

.chart__bar { fill: rgba(19, 18, 23, 0.14); }
.chart__bar--hot { fill: var(--purple); }

.chart__value {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.04em;
  fill: var(--purple);
  text-anchor: middle;
}

.chart__dot { fill: var(--purple); }

/* 02: consolidation, on ink */
.consol { max-width: 440px; }

.consol__app {
  fill: none;
  stroke: rgba(250, 249, 247, 0.4);
  stroke-width: 1.5;
}

.consol__app-line {
  stroke: #a78bfa;
  stroke-opacity: 0.3;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.consol__flow {
  fill: none;
  stroke: #a78bfa;
  stroke-opacity: 0.3;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.consol__ultra {
  fill: none;
  stroke: rgba(250, 249, 247, 0.85);
  stroke-width: 2;
}

.consol__ultra-dot { fill: #8b5cf6; }

.consol__ultra-line {
  stroke: rgba(250, 249, 247, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* 03: status board */
.board { max-width: 420px; }

.board__frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.board__divider {
  stroke: var(--line);
  stroke-width: 1.5;
}

.board__title-dot { fill: var(--purple); }

.board__title-line,
.board__line {
  stroke: rgba(19, 18, 23, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.board__meta {
  stroke: rgba(19, 18, 23, 0.25);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.board__status { fill: rgba(19, 18, 23, 0.18); }
.board__status--done { fill: var(--purple); }

.board__status--active {
  fill: var(--purple);
  animation: board-pulse 2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes board-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .board__status--active { animation: none; }
}

/* notari 01: dosar folder with stage timeline */
.dosar { max-width: 420px; }

.dosar__folder {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.dosar__line {
  stroke: rgba(19, 18, 23, 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.dosar__track {
  stroke: var(--line);
  stroke-width: 2;
}

.dosar__track--done { stroke: var(--purple); }

.dosar__stage { fill: rgba(19, 18, 23, 0.18); }
.dosar__stage--done { fill: var(--purple); }

.dosar__stage--active {
  fill: var(--purple);
  animation: board-pulse 2s ease-in-out infinite;
}

/* notari 02: calendar, on ink */
.cal { max-width: 420px; }

.cal__frame {
  fill: none;
  stroke: rgba(250, 249, 247, 0.85);
  stroke-width: 2;
}

.cal__divider {
  stroke: var(--line-light);
  stroke-width: 1.5;
}

.cal__ring {
  stroke: rgba(250, 249, 247, 0.6);
  stroke-width: 2;
  stroke-linecap: round;
}

.cal__days circle { fill: rgba(250, 249, 247, 0.25); }
.cal__days .cal__day--busy { fill: #a78bfa; }
.cal__days .cal__day--due { fill: #8b5cf6; }

.cal__due-ring {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 1.5;
  animation: cal-ring 2.4s ease-in-out infinite;
  transform-origin: 209px 210px;
}

@keyframes cal-ring {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* notari 03: self-drafting act */
.draft { max-width: 420px; }

.draft__doc,
.draft__fold {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.draft__line {
  stroke: rgba(19, 18, 23, 0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 7s ease-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes draft-write {
  0% { stroke-dashoffset: 1; }
  12% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

.draft__check circle {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2;
}

.draft__check path {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 7s ease-out infinite;
  animation-delay: 2.8s;
}

@media (prefers-reduced-motion: reduce) {
  .dosar__stage--active, .cal__due-ring { animation: none; }
  .draft__line, .draft__check path { animation: none; stroke-dashoffset: 0; }
}

/* uat 01: request flow pipeline */
.flow { max-width: 420px; }

.flow__track {
  stroke: var(--line);
  stroke-width: 2;
}

.flow__node--start { fill: var(--purple); }

.flow__dept {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.flow__done circle {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2;
}

.flow__done path {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow__runner {
  fill: var(--purple);
  animation: flow-run 4s ease-in-out infinite;
}

@keyframes flow-run {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  95%, 100% { transform: translateX(300px); opacity: 0; }
}

/* uat 02: paper pile to digital, on ink */
.depile { max-width: 440px; }

.depile__paper {
  fill: none;
  stroke: rgba(250, 249, 247, 0.35);
  stroke-width: 1.5;
}

.depile__flow {
  fill: none;
  stroke: #a78bfa;
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.depile__doc {
  fill: none;
  stroke: rgba(250, 249, 247, 0.85);
  stroke-width: 2;
  stroke-linejoin: round;
}

.depile__doc-line {
  stroke: #a78bfa;
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.depile__dot { fill: #8b5cf6; }

/* uat module: debitum recovery progress */
.recov { max-width: 420px; }

.recov__id { fill: var(--ink); }

.recov__track {
  fill: rgba(19, 18, 23, 0.08);
}

.recov__fill { fill: var(--purple); }

.recov__fill--live {
  transform-box: fill-box;
  transform-origin: left center;
  animation: recov-grow 4s ease-in-out infinite;
}

@keyframes recov-grow {
  0% { transform: scaleX(0.2); }
  55% { transform: scaleX(1); }
  90% { transform: scaleX(1); }
  100% { transform: scaleX(0.2); }
}

/* uat module: site publishing, on ink */
.publish { max-width: 420px; }

.publish__frame {
  fill: none;
  stroke: rgba(250, 249, 247, 0.85);
  stroke-width: 2;
}

.publish__bar {
  stroke: var(--line-light);
  stroke-width: 1.5;
}

.publish__ctrl { fill: rgba(250, 249, 247, 0.4); }

.publish__live {
  fill: #8b5cf6;
  animation: board-pulse 2s ease-in-out infinite;
}

.publish__hcl {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
  fill: #a78bfa;
}

.publish__line {
  stroke: rgba(250, 249, 247, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.publish__line--new {
  stroke: #8b5cf6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 6s ease-out infinite;
}

/* uat module: chatbot */
.chat { max-width: 420px; }

.chat__bubble rect {
  fill: none;
  stroke-width: 2;
}

.chat__bubble line {
  stroke-width: 1.5;
  stroke-linecap: round;
}

.chat__bubble--in rect { stroke: rgba(19, 18, 23, 0.35); }
.chat__bubble--in line { stroke: rgba(19, 18, 23, 0.3); }

.chat__bubble--out rect { stroke: var(--ink); }
.chat__bubble--out line { stroke: rgba(19, 18, 23, 0.45); }

.chat__bubble--typing rect { stroke: var(--purple); }

.chat__dot {
  fill: var(--purple);
  animation: chat-type 1.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes chat-type {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .flow__runner, .recov__fill--live, .publish__live,
  .publish__line--new, .chat__dot { animation: none; }
  .flow__runner { opacity: 0; }
  .publish__line--new { stroke-dashoffset: 0; }
  .chat__dot { opacity: 0.7; }
}

/* uat module: sesizari, on ink */
.sesiz { max-width: 440px; }

.sesiz__channel {
  fill: none;
  stroke: rgba(250, 249, 247, 0.4);
  stroke-width: 1.5;
}

.sesiz__channel-line {
  stroke: #a78bfa;
  stroke-opacity: 0.35;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.sesiz__flow {
  fill: none;
  stroke: #a78bfa;
  stroke-opacity: 0.3;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.sesiz__doc {
  fill: none;
  stroke: rgba(250, 249, 247, 0.85);
  stroke-width: 2;
  stroke-linejoin: round;
}

.sesiz__doc-line {
  stroke: rgba(250, 249, 247, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.sesiz__doc-line--new {
  stroke: #8b5cf6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 6s ease-out infinite;
}

.sesiz__seal circle:first-child {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 1.5;
}

.sesiz__seal circle:last-child { fill: #8b5cf6; }

@media (prefers-reduced-motion: reduce) {
  .sesiz__doc-line--new { animation: none; stroke-dashoffset: 0; }
}

/* avocati 01: case folders with statuses */
.cases { max-width: 420px; }

.cases__outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.cases__line {
  stroke: rgba(19, 18, 23, 0.45);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.cases__line--dim { stroke: rgba(19, 18, 23, 0.25); }

.cases__status { fill: rgba(19, 18, 23, 0.18); }
.cases__status--done { fill: var(--purple); }

.cases__status--active {
  fill: var(--purple);
  animation: board-pulse 2s ease-in-out infinite;
}

/* avocati 02: court terms timeline, on ink */
.timeline { max-width: 420px; }

.timeline__track {
  stroke: var(--line-light);
  stroke-width: 2;
}

.timeline__track--past { stroke: #a78bfa; }

.timeline__tick {
  stroke: rgba(250, 249, 247, 0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.timeline__dot { fill: rgba(250, 249, 247, 0.25); }
.timeline__dot--past { fill: #a78bfa; }
.timeline__dot--next { fill: #8b5cf6; }

.timeline__ring {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 1.5;
  animation: cal-ring 2.4s ease-in-out infinite;
  transform-origin: 264px 110px;
}

/* avocati 03: case file distilled into a synthesis */
.synth { max-width: 440px; }

.synth__doc {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.synth__doc-line {
  stroke: rgba(19, 18, 23, 0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.synth__flow {
  fill: none;
  stroke: var(--purple);
  stroke-opacity: 0.45;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.synth__card {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.synth__dot { fill: var(--purple); }

.synth__card-line {
  stroke: rgba(19, 18, 23, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 6s ease-out infinite;
  animation-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .cases__status--active, .timeline__ring { animation: none; }
  .synth__card-line { animation: none; stroke-dashoffset: 0; }
}

/* avocati 04: team collaboration around a shared case, on ink */
.collab { max-width: 420px; }

.collab__doc {
  fill: none;
  stroke: rgba(250, 249, 247, 0.85);
  stroke-width: 2;
  stroke-linejoin: round;
}

.collab__doc-line {
  stroke: rgba(250, 249, 247, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.collab__link {
  fill: none;
  stroke: #a78bfa;
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.collab__p { fill: #a78bfa; }
.collab__p--lead { fill: #8b5cf6; }

/* institutii: validation checklist */
.verify { max-width: 420px; }

.verify__row circle {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2;
}

.verify__row path {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 6s ease-out infinite;
  animation-delay: var(--d, 0s);
}

.verify__row line {
  stroke: rgba(19, 18, 23, 0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* institutii: self-drafting doc, dark variant */
.draft--dark .draft__doc,
.draft--dark .draft__fold {
  stroke: rgba(250, 249, 247, 0.85);
}

.draft--dark .draft__line {
  stroke: rgba(250, 249, 247, 0.45);
}

.draft--dark .draft__check circle { stroke: #8b5cf6; }
.draft--dark .draft__check path { stroke: #8b5cf6; }

/* institutii: time back for people */
.timegain { max-width: 420px; }

.timegain__face {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.timegain__tick {
  stroke: rgba(19, 18, 23, 0.35);
  stroke-width: 2;
  stroke-linecap: round;
}

.timegain__hand {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.timegain__hand--min { stroke-width: 2; }

.timegain__sweep {
  fill: none;
  stroke: var(--purple);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: timegain-sweep 5s ease-in-out infinite;
}

@keyframes timegain-sweep {
  0% { stroke-dashoffset: 1; }
  40% { stroke-dashoffset: 0; }
  85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

.timegain__p { fill: var(--purple); }
.timegain__p--second { fill: #a78bfa; }

/* institutii: volume grid, on ink */
.volume { max-width: 420px; }

.volume__grid rect {
  fill: none;
  stroke: rgba(250, 249, 247, 0.35);
  stroke-width: 1.5;
}

.volume__grid .volume__hit {
  stroke: #8b5cf6;
  stroke-width: 2;
}

.volume__ring {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 1.5;
  animation: cal-ring 2.4s ease-in-out infinite;
  transform-origin: 220px 160px;
}

/* institutii: shield */
.shield { max-width: 420px; }

.shield__outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.shield__inner {
  fill: none;
  stroke: var(--purple);
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 4 6;
  stroke-linejoin: round;
}

.shield__check path {
  fill: none;
  stroke: var(--purple);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draft-write 6s ease-out infinite;
  animation-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
  .verify__row path, .timegain__sweep, .volume__ring, .shield__check path { animation: none; }
  .verify__row path, .timegain__sweep, .shield__check path { stroke-dashoffset: 0; }
}

/* ============ BIG QUOTE ============ */

.section--quote {
  text-align: center;
  padding-top: clamp(110px, 15vh, 190px);
  padding-bottom: clamp(110px, 15vh, 190px);
}

.bigquote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 80px);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 22ch;
  margin: 0 auto clamp(28px, 4vh, 48px);
}

.bigquote em { text-transform: none; }

/* ============ CTA ============ */

.cta {
  background: var(--purple);
  color: #fff;
  padding: clamp(100px, 14vh, 180px) var(--pad-x);
  text-align: center;
}

.cta .section__label {
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
}

.cta .section__label::before { background: rgba(255, 255, 255, 0.5); }

.cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: clamp(36px, 5vh, 56px);
}

.cta__title em { color: #fff; text-transform: none; }

.cta__actions { display: flex; justify-content: center; }

/* ============ FOOTER ============ */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 8vh, 90px) var(--pad-x) 40px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 32px;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
}

.footer__logo span { color: var(--purple); }

.footer__brand p {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(250, 249, 247, 0.6);
  max-width: 30ch;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 6px;
}

.footer__col a {
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.footer__col a:hover { opacity: 1; color: #a78bfa; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

.footer__bottom p {
  font-size: 14px;
  color: rgba(250, 249, 247, 0.6);
  max-width: 640px;
}

.footer__copy { margin-top: 12px; font-size: 12px !important; opacity: 0.6; }

/* ============ CONTENT PAGES (echipa, viziune, legal…) ============ */

.page {
  padding: 200px var(--pad-x) clamp(90px, 12vh, 160px);
  min-height: 60svh;
}

.page__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: 32px;
}

.page__title em { text-transform: none; }

.prose {
  max-width: 68ch;
  margin-top: clamp(40px, 6vh, 64px);
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 48px 0 16px;
}

.prose h2:first-child { margin-top: 0; }

.prose p {
  color: var(--grey);
  margin-bottom: 16px;
}

.prose ul {
  margin: 0 0 16px;
}

.prose ul li {
  position: relative;
  padding: 6px 0 6px 28px;
  color: var(--grey);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
}

.prose__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 48px;
}

/* team blocks */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(48px, 7vh, 72px);
}

.team-grid__item {
  background: var(--paper);
  padding: clamp(28px, 4vw, 48px);
}

.team-grid__item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 12px;
}

.team-grid__item p {
  color: var(--grey);
  font-size: 15px;
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* blog feed (noutati) */
.blog-feed {
  margin-top: clamp(48px, 7vh, 80px);
}

.blog-feed__item {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  grid-template-rows: auto auto;
  column-gap: clamp(16px, 3vw, 48px);
  row-gap: 10px;
  align-items: baseline;
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.3s ease;
}

.blog-feed__item:last-child { border-bottom: 1px solid var(--line); }
.blog-feed__item:hover { padding-left: 16px; }

.blog-feed__date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--purple);
  grid-row: 1;
}

.blog-feed__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 40px);
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.3s ease;
  grid-row: 1;
}

.blog-feed__item:hover .blog-feed__title { color: var(--purple); }

.blog-feed__excerpt {
  grid-column: 2;
  grid-row: 2;
  color: var(--grey);
  font-size: clamp(14px, 1.4vw, 17px);
  max-width: 62ch;
}

.blog-feed__arrow {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--purple);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.blog-feed__item:hover .blog-feed__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .blog-feed__item { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .blog-feed__date { grid-row: 1; }
  .blog-feed__title { grid-row: 2; grid-column: 1; }
  .blog-feed__excerpt { grid-row: 3; grid-column: 1; }
  .blog-feed__arrow { display: none; }
}

/* blog post (postare) */
.post__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 40px;
  transition: color 0.25s ease;
}

.post__back:hover { color: var(--purple); }

.post .prose a,
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--purple); }

/* process steps (proces) */
.steps {
  list-style: none;
  margin-top: clamp(48px, 7vh, 80px);
}

.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1.1fr 0.9fr;
  gap: clamp(20px, 4vw, 72px);
  align-items: center;
  min-height: 100svh;
  padding: 100px 0 60px;
  border-top: 1px solid var(--line);
  scroll-snap-align: center;
}

.steps__item:last-child { border-bottom: 1px solid var(--line); }

.steps__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(56px, 7vw, 110px);
  line-height: 1;
  color: var(--purple);
  align-self: start;
  padding-top: 0.1em;
}

.steps__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 64px);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 20px;
}

.steps__body p {
  color: var(--grey);
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 58ch;
  margin-bottom: 32px;
}

.steps__figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

.steps__figure svg {
  width: 100%;
  height: auto;
  max-width: 440px;
}

.steps__figure .rack { max-width: 280px; }

@media (max-width: 900px) {
  .steps__item {
    grid-template-columns: 1fr;
    row-gap: 16px;
    min-height: auto;
    padding: clamp(48px, 8vh, 80px) 0;
    scroll-snap-align: none;
  }
  .steps__figure { max-width: 320px; margin: 8px auto 0; }
}

/* the cycle repeats */
.loop {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(56px, 9vh, 96px);
  max-width: 880px;
}

.loop__icon {
  width: clamp(56px, 7vw, 84px);
  height: clamp(56px, 7vw, 84px);
  flex-shrink: 0;
  stroke: var(--purple);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: loop-spin 14s linear infinite;
}

@keyframes loop-spin {
  to { transform: rotate(360deg); }
}

.loop__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 12px;
}

.loop__title em { text-transform: none; }

.loop__text {
  color: var(--grey);
  max-width: 56ch;
  margin-bottom: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .loop__icon { animation: none; }
}

@media (max-width: 700px) {
  .loop { flex-direction: column; }
}

/* empty state (noutati, changelog) */
.soon {
  margin-top: clamp(56px, 9vh, 96px);
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vh, 64px);
}

.soon__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--purple);
  line-height: 1.1;
  margin-bottom: 24px;
}

.soon p {
  color: var(--grey);
  max-width: 56ch;
}

/* ============ PRODUCT PILLS + PRODUCTS PAGE ============ */

.product-strip {
  padding: 0 var(--pad-x) clamp(56px, 8vh, 96px);
}

.product-strip__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.product-strip__label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--purple);
}

.product-strip__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  padding: 20px 36px;
  background: var(--purple);
  border: 1px solid var(--purple);
  border-radius: 999px;
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

.pill:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.products {
  margin-top: clamp(48px, 7vh, 80px);
  border-top: 1px solid var(--line);
}

.product {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(40px, 6vh, 64px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}

.product__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 52px);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 14px;
}

.product__name em { text-transform: none; }

.product__summary {
  color: var(--grey);
  font-size: clamp(15px, 1.5vw, 18px);
  max-width: 46ch;
}

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; }
}

/* ============ LEAD FORM MODAL ============ */

.lead {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(19, 18, 23, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lead.is-open { display: flex; }

body.lead-open { overflow: hidden; }

.lead__dialog {
  background: var(--paper);
  width: min(680px, 100%);
  max-height: min(720px, 92svh);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 48px);
  animation: lead-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lead-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.lead__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.lead__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple);
}

.lead__close {
  background: none;
  border: 0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--grey);
  transition: color 0.2s ease;
}

.lead__close:hover { color: var(--ink); }

.lead__progress {
  height: 2px;
  background: var(--line);
  margin-bottom: clamp(24px, 4vh, 40px);
}

.lead__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--purple);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.lead__body {
  flex: 1;
  overflow-y: auto;
  min-height: 260px;
}

.lead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 10px;
}

.lead__sub {
  color: var(--grey);
  font-size: 15px;
  margin-bottom: 12px;
}

.lead__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.lead__opt {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lead__opt:hover { border-color: var(--purple); }

.lead__opt.is-on {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.lead__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-top: 20px;
}

.lead__fields label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
}

.lead__fields input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(19, 18, 23, 0.3);
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.lead__fields input:focus { border-bottom-color: var(--purple); }

.lead__error {
  margin-top: 20px;
  color: #b22234;
  font-size: 14px;
}

.lead__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 3vh, 32px);
}

.lead__foot .btn { padding: 16px 32px; cursor: pointer; border: 0; font-family: var(--font-body); }

.lead__back {
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--grey);
  transition: color 0.2s ease;
}

.lead__back:hover { color: var(--ink); }

.lead__count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--purple);
}

@media (max-width: 600px) {
  .lead__fields { grid-template-columns: 1fr; }
}

/* ============ REVEAL ANIMATIONS ============ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__word { transform: none; animation: none; }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .feature-list__item {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }

  .feature-list__item p { grid-column: 2; }

  .vertical-list__item {
    grid-template-columns: 1fr 48px;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }

  .vertical-list__desc { grid-column: 1 / -1; }

  .stats { grid-template-columns: repeat(2, 1fr); }

  .security-grid { grid-template-columns: 1fr; }

  .hero__scroll { display: none; }

  .hero__canvas {
    width: min(80vw, 420px);
    height: min(80vw, 420px);
    top: 30%;
    right: -18vw;
    opacity: 0.6;
  }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
}