:root {
  --derivio-black: #050505;
  --derivio-line: #2b2b2b;
  --derivio-white: #f7f7f4;
  --derivio-muted: #9b9b98;
  --derivio-pink: #ed75fb;
  --derivio-emerald: #9bfaf6;
  --derivio-violet: #6106fc;
  --derivio-display: "Chakra Petch", "Inter Tight", sans-serif;
}

body.nudge.derivio-body {
  color: var(--derivio-white);
  background: var(--derivio-black);
  background-image: none;
}

.derivio-main { padding-top: var(--nav-h); overflow: hidden; }
.derivio-wrap { width: min(100% - 48px, 1240px); margin-inline: auto; }
.derivio-body h1, .derivio-body h2, .derivio-body h3 { font-family: var(--derivio-display); }
.derivio-body figure { margin: 0; }

.derivio-hero {
  min-height: calc(100vh - var(--nav-h));
  padding: 76px 0 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(237, 117, 251, 0.13), transparent 28%),
    radial-gradient(circle at 18% 70%, rgba(97, 6, 252, 0.16), transparent 30%),
    #050505;
}

.derivio-eyebrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--derivio-line);
  color: #bfbfbd;
  font: 11px/1.2 "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.derivio-kicker, .derivio-section-label {
  font-family: "DM Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.derivio-kicker { margin: 44px 0 18px; color: var(--derivio-emerald); font-size: 12px; }

.derivio-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #fff;
  font-size: clamp(64px, 10.5vw, 150px);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-transform: uppercase;
}

.derivio-hero h1 span { color: transparent; -webkit-text-stroke: 1.5px #fff; }

.derivio-lede {
  max-width: 650px;
  margin: 34px 0 0 auto;
  color: #c5c5c2;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
}

body.nudge .derivio-jump {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin: 42px 0 46px;
  padding: 13px 18px;
  color: #000;
  background: var(--derivio-emerald);
  font: 500 12px/1.2 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.derivio-cover { border-top: 1px solid var(--derivio-line); background: #000; }
.derivio-cover img { width: 100%; max-height: 920px; object-fit: cover; }

.derivio-overview, .derivio-identity, .derivio-product, .derivio-growth { padding-block: 120px; }

.derivio-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 52px;
  color: #5a5a58;
  font-size: 11px;
}

.derivio-section-label span { color: var(--derivio-violet); }
.derivio-section-label::after { content: ""; flex: 1; height: 1px; background: #d8d8d3; }
.derivio-section-label--light { color: #8f8f8d; }
.derivio-section-label--light span { color: var(--derivio-pink); }
.derivio-section-label--light::after { background: var(--derivio-line); }

.derivio-overview, .derivio-identity, .derivio-application, .derivio-product,
.derivio-growth, .derivio-next, .derivio-footer {
  position: relative;
  color: #111;
  background: #f7f7f4;
  box-shadow: 0 0 0 100vmax #f7f7f4;
  clip-path: inset(0 -100vmax);
}

.derivio-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 80px;
}

.derivio-overview h2, .derivio-split-heading h2, .derivio-product-intro h2,
.derivio-growth-head h2, .derivio-contribution h2 {
  margin: 0;
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.derivio-overview-copy {
  align-self: end;
  color: #555551;
  font-size: 17px;
  line-height: 1.58;
}

.derivio-overview-copy p { margin: 0; }
.derivio-overview-copy p + p { margin-top: 18px; }

.derivio-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 80px 0 0;
  background: #d8d8d3;
  border: 1px solid #d8d8d3;
}

.derivio-facts div { min-height: 132px; padding: 24px; background: #fff; }
.derivio-facts dt { margin-bottom: 20px; color: #777773; font: 10px/1.4 "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.derivio-facts dd { margin: 0; font-weight: 600; }

.derivio-concept, .derivio-solver, .derivio-contribution { background: var(--derivio-black); }
.derivio-concept { padding-block: 120px 96px; }

.derivio-concept-head, .derivio-solver-head, .derivio-split-heading,
.derivio-product-intro, .derivio-growth-head {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: end;
}

.derivio-concept-head h2, .derivio-solver-head h2 {
  margin: 0;
  font-size: clamp(42px, 6.5vw, 86px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.93;
}

.derivio-concept-head p, .derivio-solver-head > p {
  margin: 0;
  color: var(--derivio-muted);
  font-size: 17px;
  line-height: 1.6;
}

.derivio-principles, .derivio-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid var(--derivio-line);
  border-bottom: 1px solid var(--derivio-line);
}

.derivio-principles article, .derivio-feature-row article {
  min-height: 240px;
  padding: 28px;
  border-right: 1px solid var(--derivio-line);
}

.derivio-principles article:last-child, .derivio-feature-row article:last-child { border-right: 0; }
.derivio-principles article > span, .derivio-feature-row article > span { color: var(--derivio-pink); font: 11px/1.2 "DM Mono", monospace; text-transform: uppercase; }
.derivio-principles h3, .derivio-feature-row h3 { margin: 46px 0 12px; font-size: 24px; line-height: 1.05; }
.derivio-principles p, .derivio-feature-row p { margin: 0; color: var(--derivio-muted); line-height: 1.55; }
.derivio-wide-frame { margin-top: 72px; border: 1px solid var(--derivio-line); }
.derivio-wide-frame img { width: 100%; }

.derivio-split-heading > p, .derivio-product-intro > p, .derivio-growth-head > p {
  margin: 0;
  color: #61615d;
  font-size: 17px;
  line-height: 1.6;
}

.derivio-identity-grid, .derivio-guideline-grid, .derivio-application-grid,
.derivio-application-more, .derivio-product-pair, .derivio-solver-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 64px;
}

.derivio-identity-grid figure, .derivio-guideline-grid figure, .derivio-application-grid figure,
.derivio-application-more figure, .derivio-product-hero, .derivio-product-pair figure,
.derivio-solver-grid figure { overflow: hidden; background: #090909; }
.derivio-identity-grid img, .derivio-guideline-grid img, .derivio-application-grid img,
.derivio-application-more img, .derivio-product-hero img, .derivio-product-pair img,
.derivio-solver-grid img { width: 100%; }

.derivio-identity-grid figcaption, .derivio-guideline-grid figcaption,
.derivio-application-grid figcaption, .derivio-application-more figcaption,
.derivio-product-hero figcaption, .derivio-product-pair figcaption,
.derivio-solver-grid figcaption {
  padding: 14px 16px;
  color: #aaa;
  background: #090909;
  font: 10px/1.4 "DM Mono", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.derivio-guideline-grid {
  margin-top: 20px;
}

.derivio-application { padding-block: 0 120px; }
.derivio-application-grid figure:first-child { transform: translateY(40px); }
.derivio-application-more {
  margin-top: 60px;
}
.derivio-application-more--wide,
.derivio-application-more figure:nth-child(2) {
  grid-column: 1 / -1;
}
.derivio-product { padding-top: 120px; border-top: 1px solid #d8d8d3; }
.derivio-product-hero { margin-top: 72px; }
.derivio-product-hero figcaption span, .derivio-product-pair figcaption span { color: var(--derivio-pink); margin-right: 12px; }

.derivio-solver { padding-block: 120px; }
.derivio-solver-head .derivio-kicker { margin-top: 0; }
.derivio-solver-grid figure { border: 1px solid var(--derivio-line); }
.derivio-solver-grid img { aspect-ratio: 1.4 / 1; object-fit: cover; object-position: top left; }
.derivio-feature-row { margin-top: 40px; }
.derivio-feature-row article { min-height: 210px; }

.derivio-phone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 76px; }
.derivio-phone-grid figure { position: relative; padding: 48px 18px 20px; background: #111; }
.derivio-phone-grid figure > span { position: absolute; top: 16px; left: 18px; color: var(--derivio-emerald); font: 10px/1.2 "DM Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.derivio-phone-grid img { width: min(100%, 392px); margin-inline: auto; }
.derivio-phone-grid figcaption { min-height: 58px; padding-top: 16px; color: #aaa; font-size: 13px; }

.derivio-growth-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.derivio-growth-detail figure {
  display: grid;
  grid-template-columns: minmax(240px, 0.68fr) minmax(220px, 0.32fr);
  align-items: end;
  min-height: 650px;
  padding: 42px 32px 32px;
  background: #111;
}

.derivio-growth-detail img {
  width: min(100%, 392px);
  margin: 0 auto;
}

.derivio-growth-detail figcaption {
  padding: 0 0 8px 24px;
  color: #aaa;
  font-size: 14px;
  line-height: 1.55;
}

.derivio-growth-detail figcaption span {
  display: block;
  margin-bottom: 14px;
  color: var(--derivio-emerald);
  font: 10px/1.2 "DM Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.derivio-contribution { padding-block: 112px; }
.derivio-contribution-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 100px; }
.derivio-contribution-grid > div:last-child { align-self: end; }
.derivio-contribution-grid > div:last-child > p { margin: 0; color: #b1b1ae; font-size: 18px; line-height: 1.65; }
.derivio-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.derivio-tags span { padding: 9px 12px; color: var(--derivio-emerald); border: 1px solid #333; font: 10px/1.2 "DM Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; }

.derivio-next { padding-block: 112px; }
.derivio-next > p { margin: 0 0 22px; color: #777; font: 10px/1.2 "DM Mono", monospace; text-transform: uppercase; }
body.nudge .derivio-next a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 30px 0; color: #111; border-top: 1px solid #111; border-bottom: 1px solid #111; }
.derivio-next a span { font-family: var(--derivio-display); font-size: clamp(36px, 6vw, 72px); font-weight: 600; letter-spacing: -0.045em; }
.derivio-next a small { color: #666; }
.derivio-next a b { font-size: 32px; }

.derivio-footer { padding-block: 0 40px; color: #777; font-size: 12px; }
.derivio-footer p { margin: 0; padding-top: 24px; border-top: 1px solid #ddd; }

@media (max-width: 900px) {
  .derivio-wrap { width: min(100% - 36px, 1240px); }
  .derivio-overview-grid, .derivio-concept-head, .derivio-split-heading, .derivio-product-intro,
  .derivio-solver-head, .derivio-growth-head, .derivio-contribution-grid { grid-template-columns: 1fr; gap: 30px; }
  .derivio-facts, .derivio-principles, .derivio-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .derivio-principles article:nth-child(2), .derivio-feature-row article:nth-child(2) { border-right: 0; }
  .derivio-principles article:last-child, .derivio-feature-row article:last-child { grid-column: 1 / -1; border-top: 1px solid var(--derivio-line); }
  .derivio-phone-grid { gap: 16px; }
  .derivio-growth-detail figure { grid-template-columns: 1fr; min-height: 0; }
  .derivio-growth-detail figcaption { padding: 24px 0 0; }
}

@media (max-width: 720px) {
  .derivio-wrap { width: min(100% - 28px, 1240px); }
  .derivio-hero { min-height: auto; padding-top: 48px; }
  .derivio-eyebrow { grid-template-columns: 1fr auto; }
  .derivio-eyebrow span:nth-child(2) { display: none; }
  .derivio-kicker { margin-top: 34px; }
  .derivio-hero h1 { font-size: clamp(52px, 17vw, 84px); line-height: 0.88; }
  .derivio-lede { margin-left: 0; font-size: 18px; }
  .derivio-cover img { min-height: 330px; object-fit: cover; object-position: 52% center; }
  .derivio-overview, .derivio-identity, .derivio-product, .derivio-growth, .derivio-concept, .derivio-solver { padding-block: 82px; }
  .derivio-section-label { margin-bottom: 38px; }
  .derivio-facts, .derivio-principles, .derivio-feature-row, .derivio-identity-grid,
  .derivio-guideline-grid, .derivio-application-grid, .derivio-application-more,
  .derivio-product-pair, .derivio-solver-grid, .derivio-phone-grid,
  .derivio-growth-detail { grid-template-columns: 1fr; }
  .derivio-facts div { min-height: 108px; }
  .derivio-principles article, .derivio-feature-row article { min-height: 190px; border-right: 0; border-top: 1px solid var(--derivio-line); }
  .derivio-principles article:first-child, .derivio-feature-row article:first-child { border-top: 0; }
  .derivio-principles article:last-child, .derivio-feature-row article:last-child { grid-column: auto; }
  .derivio-principles h3, .derivio-feature-row h3 { margin-top: 28px; }
  .derivio-application { padding-bottom: 82px; }
  .derivio-application-grid figure:first-child { transform: none; }
  .derivio-application-more--wide,
  .derivio-application-more figure:nth-child(2) { grid-column: auto; }
  .derivio-phone-grid { max-width: 430px; margin-inline: auto; margin-top: 56px; }
  .derivio-contribution, .derivio-next { padding-block: 82px; }
  body.nudge .derivio-next a { grid-template-columns: 1fr auto; }
  .derivio-next a small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .derivio-body * { scroll-behavior: auto !important; }
}