/* Pipd landing page — extends colors_and_type.css */

@import url("colors_and_type.css");

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--ink-950);
  color: var(--ink-100);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain — premium texture */
body::before{
  content:"";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none; z-index: 200;
  mix-blend-mode: overlay; opacity: .5;
}

::selection{ background: var(--signal-500); color: var(--ink-950); }

.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media(max-width: 720px){ .wrap{ padding: 0 20px; } }

/* ─────────── Buttons ─────────── */
.btn{
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  padding: 14px 22px; border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  transition: all .2s var(--ease-out);
  letter-spacing: -.005em; white-space: nowrap;
}
.btn.primary{
  background: var(--signal-500); color: var(--ink-950); font-weight: 700;
}
.btn.primary:hover{ background: var(--signal-300); transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(184,226,41,.12); }
.btn.primary:active{ transform: scale(.98); }
.btn.ghost{ background: transparent; color: var(--ink-100); border-color: var(--ink-700); }
.btn.ghost:hover{ border-color: var(--ink-400); background: var(--ink-800); }
.btn.lg{ padding: 18px 28px; font-size: 16px; border-radius: 10px; }
.btn .arrow{ width: 16px; height: 16px; }

/* ─────────── Nav ─────────── */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 10, 11, .72);
  border-bottom: 1px solid var(--ink-800);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-left{ display: flex; align-items: center; gap: 28px; }
.nav-logo{ height: 22px; width: auto; display: block; }
.nav-region{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-500);
  padding-left: 14px; border-left: 1px solid var(--ink-700);
  display: flex; gap: 6px; align-items: center;
}
.nav-region .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal-500);
  box-shadow: 0 0 8px var(--signal-500);
}
.nav-links{
  display: flex; gap: 28px; align-items: center;
  font-size: 14px; color: var(--ink-300);
}
.nav-links a{
  color: inherit; text-decoration: none; font-weight: 500;
  letter-spacing: -.005em; transition: color .2s;
}
.nav-links a:hover{ color: var(--ink-50); }
.nav-right{ display: flex; gap: 12px; align-items: center; }
.nav-cta{
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 8px;
  background: var(--signal-500); color: var(--ink-950);
  text-decoration: none;
  display: inline-flex; gap: 6px; align-items: center;
  transition: all .2s var(--ease-out);
  letter-spacing: -.005em; white-space: nowrap;
}
.nav-cta:hover{ background: var(--signal-300); transform: translateY(-1px); }
@media(max-width: 1080px){ .nav-region{ display: none; } }
@media(max-width: 860px){ .nav-links{ display: none; } }

/* ─────────── Hero ─────────── */
.hero{
  min-height: 100vh;
  padding: 160px 0 96px;
  position: relative;
  display: flex; align-items: center;
}
.hero-bloom{
  position: absolute; inset: 0;
  background:
    radial-gradient(at 15% 30%, rgba(79,51,224,.55) 0%, transparent 50%),
    radial-gradient(at 85% 20%, rgba(34,163,191,.30) 0%, transparent 45%),
    radial-gradient(at 70% 90%, rgba(184,226,41,.18) 0%, transparent 40%);
  filter: blur(80px);
  z-index: 0; pointer-events: none;
}
.hero-inner{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 80px;
  align-items: center;
}
.hero-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal-500);
  margin-bottom: 24px;
  display: inline-flex; gap: 10px; align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  background: rgba(184,226,41,.04);
}
.hero-eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal-500);
  box-shadow: 0 0 10px var(--signal-500);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hero h1{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: .92; letter-spacing: -.04em;
  margin-bottom: 28px;
}
.hero h1 .ed{
  font-family: var(--font-editorial); font-weight: 300; font-style: italic;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  color: var(--ink-300); letter-spacing: -.02em;
}
.hero h1 .lime{ color: var(--signal-500); }
.hero h1 .underline{
  display: inline-block; position: relative;
}
.hero h1 .underline::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 12px; background: var(--signal-500); opacity: .35; z-index: -1;
  transform: skewX(-8deg);
}

.hero-sub{
  font-family: var(--font-editorial);
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 300; line-height: 1.5;
  color: var(--ink-300);
  max-width: 540px; margin-bottom: 36px;
}
.hero-sub strong{ color: var(--ink-100); font-weight: 500; font-style: normal; font-family: var(--font-display); }
.hero-actions{
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero-trust{
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500);
}
.hero-trust .check{ color: var(--signal-500); }

/* score gauge */
.hero-gauge{
  background: linear-gradient(160deg, var(--ink-900), var(--ink-800) 70%);
  border: 1px solid var(--ink-800);
  border-radius: 20px;
  padding: 28px;
  position: relative; overflow: hidden;
  box-shadow: 0 32px 64px -32px rgba(0,0,0,.6);
}
.hero-gauge::before{
  content: ""; position: absolute;
  top: -30%; right: -20%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--primary-500), transparent 70%);
  opacity: .25; filter: blur(40px);
  pointer-events: none;
}
.gauge-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-400);
  position: relative; z-index: 1;
}
.gauge-head .live{
  display: inline-flex; gap: 6px; align-items: center;
  color: var(--signal-500);
}
.gauge-head .live .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal-500);
  box-shadow: 0 0 8px var(--signal-500); animation: pulse 1.6s ease-in-out infinite;
}
.gauge-body{
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  position: relative; z-index: 1;
}
.gauge-arc{ position: relative; width: 200px; height: 200px; }
.gauge-arc svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-arc-track{ stroke: var(--ink-800); fill: none; stroke-width: 14; }
.gauge-arc-fill{
  stroke: var(--signal-500); fill: none; stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.gauge-arc-label{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.gauge-arc-label .num{
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; line-height: 1; letter-spacing: -.04em;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.gauge-arc-label .denom{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
  letter-spacing: .15em; text-transform: uppercase;
}
.gauge-stat{ display: flex; flex-direction: column; gap: 18px; }
.gauge-stat .row{ display: grid; grid-template-columns: 60px 1fr 56px; gap: 10px; align-items: center; }
.gauge-stat .row .lab{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-500); }
.gauge-stat .row .bar{ height: 6px; background: var(--ink-800); border-radius: 99px; overflow: hidden; position: relative; }
.gauge-stat .row .bar i{ position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-600); border-radius: 99px; }
.gauge-stat .row.after .bar i{ background: linear-gradient(90deg, var(--signal-600), var(--signal-500)); }
.gauge-stat .row .v{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-100); text-align: right; font-variant-numeric: tabular-nums; }
.gauge-stat .row.after .v{ color: var(--signal-500); }
.gauge-stat .delta{
  margin-top: 4px; padding-top: 14px;
  border-top: 1px dashed var(--ink-700);
  display: flex; justify-content: space-between; align-items: baseline;
}
.gauge-stat .delta .l{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-500); }
.gauge-stat .delta .v{
  font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--signal-500);
  letter-spacing: -.02em;
}
.gauge-foot{
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--ink-800);
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-500);
  position: relative; z-index: 1;
}
.gauge-foot strong{ color: var(--ink-200); font-weight: 500; }

@media(max-width: 980px){
  .hero{ padding: 140px 0 64px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 48px; }
  .gauge-body{ grid-template-columns: 1fr; }
  .gauge-arc{ margin: 0 auto; }
}

/* ─────────── Logo strip ─────────── */
.logobar{
  padding: 32px 0;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  background: var(--ink-900);
}
.logobar-inner{
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center; gap: 48px;
}
.logobar-label{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-500);
  line-height: 1.4;
}
.logobar-label .accent{ color: var(--signal-500); }
.logobar-logos{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px;
  align-items: center;
}
.logobar-logo-wrap{
  display: flex; align-items: center; justify-content: center;
  filter: brightness(0) invert(1);
  opacity: .45;
  transition: opacity .25s var(--ease-out);
}
.logobar-logo-wrap:hover{ opacity: .72; }
.logobar-logo-wrap svg{ display: block; max-width: 100%; }
@media(max-width: 980px){
  .logobar-inner{ grid-template-columns: 1fr; gap: 24px; }
  .logobar-logos{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ─────────── Section base ─────────── */
.section{
  padding: 128px 0;
  border-top: 1px solid var(--ink-800);
  position: relative;
}
.section.tight{ padding: 96px 0; }
.section-head{
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 64px;
}
.section-num{
  font-family: var(--font-mono); font-size: 11px; color: var(--signal-500);
  letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-num::before{
  content: ""; width: 24px; height: 1px; background: var(--signal-500);
}
.section h2{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: .98; letter-spacing: -.035em;
  margin-top: 14px; max-width: 720px;
}
.section h2 .ed{
  font-family: var(--font-editorial); font-weight: 300; font-style: italic;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  color: var(--ink-400); letter-spacing: -.01em;
}
.section h2 .lime{ color: var(--signal-500); }
.section-desc{
  font-family: var(--font-editorial);
  font-size: 19px; font-weight: 300; line-height: 1.55;
  color: var(--ink-300); max-width: 460px;
}
@media(max-width: 900px){
  .section{ padding: 96px 0; }
  .section-head{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
}

/* ─────────── Cost-of-doing-nothing band ─────────── */
.cost-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--ink-800);
  border-radius: 16px;
  overflow: hidden;
}
.cost-cell{
  padding: 32px 28px;
  border-right: 1px solid var(--ink-800);
  background: var(--ink-900);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.cost-cell:last-child{ border-right: 0; }
.cost-cell .lab{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-500);
  display: flex; align-items: center; gap: 8px;
}
.cost-cell .lab::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--error); box-shadow: 0 0 8px rgba(229,62,62,.5);
}
.cost-cell .num{
  font-family: var(--font-display); font-weight: 900;
  font-size: 52px; line-height: 1; letter-spacing: -.04em;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.cost-cell .num .u{ font-size: 26px; color: var(--ink-400); font-weight: 500; }
.cost-cell .desc{
  font-size: 14px; color: var(--ink-400); line-height: 1.5;
  margin-top: 4px;
}
.cost-cell .src{
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
@media(max-width: 980px){
  .cost-grid{ grid-template-columns: 1fr 1fr; }
  .cost-cell{ border-right: 0; border-bottom: 1px solid var(--ink-800); }
  .cost-cell:nth-child(odd){ border-right: 1px solid var(--ink-800); }
  .cost-cell:nth-last-child(-n+2){ border-bottom: 0; }
}
@media(max-width: 640px){
  .cost-grid{ grid-template-columns: 1fr; }
  .cost-cell{ border-right: 0 !important; border-bottom: 1px solid var(--ink-800); }
  .cost-cell:last-child{ border-bottom: 0; }
}

/* ─────────── DRMM 5-dimension visualization ─────────── */
.drmm-frame{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  background: var(--ink-900);
  border: 1px solid var(--ink-800);
  border-radius: 20px;
  padding: 40px;
  align-items: center;
}
.drmm-radar{ position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; margin: 0 auto; }
.drmm-radar svg{ width: 100%; height: 100%; }
.drmm-dims{ display: flex; flex-direction: column; gap: 18px; }
.drmm-dim{
  display: grid; grid-template-columns: 28px 1fr auto; gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--ink-800);
  border-radius: 10px;
  background: var(--ink-950);
  transition: all .2s var(--ease-out);
  cursor: pointer;
}
.drmm-dim:hover{ border-color: var(--primary-500); transform: translateY(-1px); }
.drmm-dim.active{ border-color: var(--signal-500); background: rgba(184,226,41,.04); }
.drmm-dim .ic{
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--ink-800); color: var(--signal-500);
  display: flex; align-items: center; justify-content: center;
}
.drmm-dim .ic svg{ width: 14px; height: 14px; }
.drmm-dim .ttl{
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--ink-100); letter-spacing: -.005em;
}
.drmm-dim .sub{
  font-size: 12px; color: var(--ink-500); margin-top: 2px;
}
.drmm-dim .pts{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-400);
  letter-spacing: .1em;
}
.drmm-dim .pts strong{ color: var(--signal-500); font-weight: 500; }
@media(max-width: 900px){
  .drmm-frame{ grid-template-columns: 1fr; gap: 32px; padding: 24px; }
}

/* ─────────── Sprint timeline ─────────── */
.sprint{
  border: 1px solid var(--ink-800);
  border-radius: 20px;
  background: var(--ink-900);
  overflow: hidden;
}
.sprint-head{
  padding: 28px 32px;
  border-bottom: 1px solid var(--ink-800);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.sprint-head h3{
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em;
}
.sprint-head .meta{
  display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
}
.sprint-head .meta strong{ color: var(--signal-500); font-weight: 500; }
.sprint-grid{
  display: grid; grid-template-columns: 220px 1fr;
}
.sprint-rows{ border-right: 1px solid var(--ink-800); }
.sprint-row{
  padding: 18px 24px;
  border-bottom: 1px solid var(--ink-800);
  display: flex; flex-direction: column; gap: 4px;
}
.sprint-row:last-child{ border-bottom: 0; }
.sprint-row .phase{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--signal-500);
}
.sprint-row .name{
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink-100); letter-spacing: -.005em;
}
.sprint-chart{
  position: relative;
  padding: 18px 0;
}
.sprint-weeks{
  display: grid; grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px solid var(--ink-800);
  padding: 0 0 8px;
}
.sprint-weeks span{
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-500);
  letter-spacing: .1em; text-align: center;
  border-left: 1px dashed var(--ink-800);
  padding: 4px 0;
}
.sprint-weeks span:first-child{ border-left: 0; }
.sprint-bars{ position: relative; }
.sprint-bar-row{
  height: 56px;
  border-bottom: 1px solid var(--ink-800);
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr);
}
.sprint-bar-row:last-child{ border-bottom: 0; }
.sprint-bar-row::before{
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(100%/12 - 1px),
      var(--ink-800) calc(100%/12 - 1px),
      var(--ink-800) calc(100%/12));
  opacity: .5;
  pointer-events: none;
}
.sprint-bar{
  align-self: center;
  grid-row: 1;
  height: 28px;
  border-radius: 6px;
  display: flex; align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-950);
  background: var(--primary-500);
  position: relative; z-index: 1;
  white-space: nowrap; overflow: hidden;
  font-weight: 500;
}
.sprint-bar.b-signal{ background: var(--signal-500); }
.sprint-bar.b-cyan{ background: var(--cyan-500); color: var(--ink-50); }
.sprint-bar.b-primary-light{ background: var(--primary-400); color: var(--ink-50); }
.sprint-foot{
  padding: 22px 32px;
  border-top: 1px solid var(--ink-800);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
}
.sprint-foot strong{ color: var(--signal-500); font-weight: 500; }
@media(max-width: 900px){
  .sprint-grid{ grid-template-columns: 140px 1fr; }
  .sprint-row{ padding: 14px; }
  .sprint-bar{ font-size: 9px; padding: 0 6px; }
}

/* ─────────── Guarantee section ─────────── */
.guarantee{
  background:
    radial-gradient(at 80% 50%, rgba(184,226,41,.10) 0%, transparent 55%),
    radial-gradient(at 10% 20%, rgba(79,51,224,.16) 0%, transparent 55%),
    var(--ink-950);
  padding: 144px 0;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  position: relative;
  overflow: hidden;
}
.guarantee::before{
  content: ""; position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 80px, rgba(184,226,41,.04) 80px, rgba(184,226,41,.04) 81px),
    repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(184,226,41,.04) 80px, rgba(184,226,41,.04) 81px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.guarantee-inner{
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px;
  align-items: center;
  position: relative;
}
.guarantee-eyebrow{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--signal-500);
  margin-bottom: 24px;
  display: inline-flex; gap: 10px; align-items: center;
}
.guarantee-eyebrow::before{
  content: ""; width: 32px; height: 1px; background: var(--signal-500);
}
.guarantee h2{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .94; letter-spacing: -.04em;
  margin-bottom: 28px;
}
.guarantee h2 .lime{ color: var(--signal-500); }
.guarantee h2 .ed{
  font-family: var(--font-editorial); font-weight: 300; font-style: italic;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  color: var(--ink-300); letter-spacing: -.02em;
}
.guarantee p.lead{
  font-family: var(--font-editorial);
  font-size: 22px; font-weight: 300; line-height: 1.45;
  color: var(--ink-200);
  max-width: 580px; margin-bottom: 32px;
}
.guarantee p.lead strong{
  font-style: normal; font-family: var(--font-display);
  font-weight: 600; color: var(--ink-50);
}
.guarantee .terms{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 1px solid var(--ink-800);
  padding-top: 28px;
  max-width: 640px;
}
.guarantee .terms .t .lab{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px;
}
.guarantee .terms .t .v{
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--ink-100); letter-spacing: -.005em;
}

/* the stamp */
.stamp{
  width: min(380px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.stamp svg.ring{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: rotate 30s linear infinite;
}
@keyframes rotate{ to{ transform: rotate(360deg); } }
.stamp .core{
  width: 64%; height: 64%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--signal-300), var(--signal-500) 60%, var(--signal-700));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow:
    inset 0 0 0 2px var(--ink-950),
    inset 0 0 0 3px var(--signal-500),
    0 24px 64px -16px rgba(184,226,41,.4),
    0 0 0 1px var(--ink-700);
  color: var(--ink-950);
  padding: 24px;
}
.stamp .core .num{
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; line-height: 1; letter-spacing: -.05em;
}
.stamp .core .num .plus{ font-size: 28px; vertical-align: top; line-height: 1; }
.stamp .core .lab{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; margin-top: 6px; opacity: .85;
}
.stamp .core .pledge{
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -.01em; line-height: 1.05;
}
@media(max-width: 980px){
  .guarantee-inner{ grid-template-columns: 1fr; gap: 48px; }
  .guarantee .terms{ grid-template-columns: 1fr; gap: 16px; }
}

/* ─────────── Differential (Brazil → US) ─────────── */
.diff-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.diff-card{
  background: var(--ink-900);
  border: 1px solid var(--ink-800);
  border-radius: 12px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
  transition: all .4s var(--ease-out);
}
.diff-card:hover{ border-color: var(--primary-500); transform: translateY(-4px); }
.diff-card .head{ display: flex; justify-content: space-between; align-items: flex-start; }
.diff-card .ic{
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--ink-800); color: var(--signal-500);
  display: flex; align-items: center; justify-content: center;
}
.diff-card .ic svg{ width: 18px; height: 18px; }
.diff-card .num{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em;
  color: var(--ink-500); text-transform: uppercase;
}
.diff-card h3{
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; line-height: 1.15;
}
.diff-card p{
  font-size: 14px; color: var(--ink-400); line-height: 1.6;
}
.diff-card .stat{
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--ink-800);
  display: flex; justify-content: space-between; align-items: baseline;
}
.diff-card .stat .v{
  font-family: var(--font-display); font-weight: 900; font-size: 28px;
  letter-spacing: -.02em; color: var(--signal-500);
}
.diff-card .stat .l{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500);
}
@media(max-width: 900px){ .diff-grid{ grid-template-columns: 1fr; } }

/* Brazil/US split visual */
.geo{
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 32px; align-items: center;
  border: 1px solid var(--ink-800);
  border-radius: 16px;
  background: var(--ink-900);
  padding: 32px 40px;
  margin-top: 32px;
}
.geo-side .lab{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px;
}
.geo-side .name{
  font-family: var(--font-display); font-weight: 900; font-size: 32px;
  letter-spacing: -.025em; line-height: 1;
}
.geo-side .meta{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--ink-400); margin-top: 8px;
}
.geo-side.right{ text-align: right; }
.geo-arrow{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--signal-500);
}
.geo-arrow svg{ width: 80px; height: 24px; }
.geo-arrow .l{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--signal-500);
}
@media(max-width: 720px){
  .geo{ grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .geo-side.right{ text-align: left; }
  .geo-arrow svg{ transform: rotate(90deg); }
}

/* ─────────── Case study ─────────── */
.case{
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800));
  border: 1px solid var(--ink-800);
  border-radius: 20px;
  padding: 56px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  position: relative; overflow: hidden;
}
.case::before{
  content: ""; position: absolute;
  top: -30%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--primary-500), transparent 70%);
  opacity: .14; filter: blur(60px);
  pointer-events: none;
}
.case .meta{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--signal-500);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.case .meta .pipe{ width: 4px; height: 4px; border-radius: 50%; background: var(--ink-600); }
.case h3{
  font-family: var(--font-display); font-weight: 900;
  font-size: 38px; letter-spacing: -.03em; line-height: 1.05;
  margin: 16px 0 22px;
}
.case .quote{
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.5; color: var(--ink-200);
  margin-bottom: 22px;
  border-left: 2px solid var(--signal-500);
  padding-left: 18px;
}
.case .attrib{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-400);
  letter-spacing: .12em; text-transform: uppercase;
  display: flex; gap: 10px; align-items: center;
}
.case .attrib .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-500), var(--cyan-500));
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-50); font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 0;
}
.case .attrib .who{
  display: flex; flex-direction: column; gap: 2px;
}
.case .attrib .who .n{ color: var(--ink-100); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: -.005em; text-transform: none; }
.case .attrib .who .r{ font-size: 10px; }
.case-right{ display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
.case .score-before-after{
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  align-items: center;
  padding: 22px;
  background: var(--ink-950);
  border-radius: 12px;
  border: 1px solid var(--ink-800);
}
.case .ba-side .lab{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px;
}
.case .ba-side .v{
  font-family: var(--font-display); font-weight: 900; font-size: 54px;
  letter-spacing: -.04em; line-height: 1;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.case .ba-side.after .v{ color: var(--signal-500); }
.case .ba-arrow{ color: var(--ink-500); }
.case .ba-arrow svg{ width: 28px; height: 28px; }
.case .metrics{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.case .metric{
  background: var(--ink-950);
  border: 1px solid var(--ink-800);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 2px solid var(--signal-500);
}
.case .metric:nth-child(2){ border-left-color: var(--primary-500); }
.case .metric:nth-child(3){ border-left-color: var(--cyan-500); }
.case .metric:nth-child(4){ border-left-color: var(--ink-500); }
.case .metric .v{
  font-family: var(--font-display); font-weight: 900;
  font-size: 30px; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.case .metric .v .u{ font-size: 16px; color: var(--ink-400); font-weight: 500; }
.case .metric .l{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-400);
  margin-top: 6px;
}
@media(max-width: 980px){
  .case{ grid-template-columns: 1fr; padding: 32px; gap: 32px; }
}

/* ─────────── FAQ ─────────── */
.faq{
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-800);
  border-radius: 16px;
  background: var(--ink-900);
  overflow: hidden;
}
.faq-item{
  border-bottom: 1px solid var(--ink-800);
}
.faq-item:last-child{ border-bottom: 0; }
.faq-item summary{
  list-style: none;
  padding: 24px 32px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--ink-100); letter-spacing: -.005em;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover{ color: var(--signal-500); }
.faq-item summary .ic{
  width: 24px; height: 24px; flex-shrink: 0;
  color: var(--ink-500);
  transition: transform .2s, color .2s;
}
.faq-item[open] summary{ color: var(--signal-500); }
.faq-item[open] summary .ic{ transform: rotate(45deg); color: var(--signal-500); }
.faq-answer{
  padding: 0 32px 28px;
  font-size: 15px; color: var(--ink-300); line-height: 1.65;
  max-width: 760px;
}
.faq-answer strong{ color: var(--ink-100); font-weight: 600; }

/* ─────────── Final CTA ─────────── */
.final-cta{
  padding: 144px 0;
  border-top: 1px solid var(--ink-800);
  position: relative;
  text-align: center;
}
.final-cta-bloom{
  position: absolute; inset: 0;
  background:
    radial-gradient(at 50% 50%, rgba(79,51,224,.35) 0%, transparent 50%),
    radial-gradient(at 80% 60%, rgba(184,226,41,.16) 0%, transparent 45%);
  filter: blur(80px);
  z-index: 0; pointer-events: none;
}
.final-cta-inner{ position: relative; z-index: 1; }
.final-cta .eyebrow{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal-500);
  margin-bottom: 28px;
}
.final-cta h2{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: .94; letter-spacing: -.04em;
  margin: 0 auto 28px;
  max-width: 1080px;
}
.final-cta h2 .ed{
  font-family: var(--font-editorial); font-weight: 300; font-style: italic;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  color: var(--ink-300); letter-spacing: -.02em;
}
.final-cta h2 .lime{ color: var(--signal-500); }
.final-cta .sub{
  font-family: var(--font-editorial);
  font-size: 22px; font-weight: 300; line-height: 1.45;
  color: var(--ink-300);
  margin: 0 auto 40px;
  max-width: 640px;
}
.final-cta .actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.final-cta .trust{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-500);
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.final-cta .trust span{ display: flex; gap: 8px; align-items: center; }
.final-cta .trust .check{ color: var(--signal-500); }

/* ─────────── Footer ─────────── */
.footer{
  padding: 80px 0 32px;
  border-top: 1px solid var(--ink-800);
  background: var(--ink-950);
}
.footer-grid{
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand .logo{ height: 24px; width: auto; margin-bottom: 20px; display: block; }
.footer-brand p{
  font-family: var(--font-editorial); font-weight: 300; font-style: italic;
  font-size: 16px; color: var(--ink-300); line-height: 1.5;
  max-width: 360px;
}
.footer-col h4{
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 16px; font-weight: 500;
}
.footer-col a, .footer-col span{
  display: block;
  color: var(--ink-300); text-decoration: none;
  font-size: 14px; padding: 4px 0;
  transition: color .2s;
}
.footer-col a:hover{ color: var(--signal-500); }
.footer-bottom{
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--ink-800);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
  letter-spacing: .12em; text-transform: uppercase; flex-wrap: wrap; gap: 16px;
}
@media(max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media(max-width: 540px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ─────────── Animations ─────────── */
/* Animations removed — iframe-throttled rAF could leave elements stuck at opacity 0 */