@font-face  {
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:local('Inter Variable'),local('Inter'),url('fonts/InterVariable.ttf') format('truetype-variations'),url('fonts/Inter-Regular.ttf') format('truetype');

}

  @font-face  {
  font-family:'Inter Display';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:local('InterDisplay Variable'),url('fonts/InterDisplay-Regular.ttf') format('truetype');

}

  @font-face  {
  font-family:'Inter Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:local('InterDisplay Bold'),url('fonts/InterDisplay-Bold.ttf') format('truetype');

}

  @font-face  {
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:local('Inter Bold'),url('fonts/Inter-Bold.ttf') format('truetype');

}

  @font-face  {
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:local('JetBrains Mono'),url('fonts/JetBrainsMono-Regular.ttf') format('truetype');

}

  :root  {
  --bg:#FBFCFD;
  --fg:#0E1217;
  --muted:#6A6F76;
  --border:#E2E5E8;
  --accent:#026FD7;
  --accent-soft:rgba(2,111,215,0.10);
  --surface:#FFFFFF;
  --bg-dark:#080C10;
  --fg-dark:#F7F9FA;
  --muted-dark:#A8ADB4;
  --border-dark:#25292F;
  --danger:#CF4040;
  --success:#3A8F42;
  --font-display:'Inter Display','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;

}

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

  html {
  scroll-behavior:smooth
}

  body {
  background:var(--bg);
  color:var(--fg);
  font:16px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden
}

  /* ─── Reveal animation ─── */
  .reveal {
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1)
}

  .reveal.in {
  opacity:1;
  transform:translateY(0)
}

  .reveal-delay-1 {
  transition-delay:0.1s
}

  .reveal-delay-2 {
  transition-delay:0.2s
}

  .reveal-delay-3 {
  transition-delay:0.3s
}

  .reveal-delay-4 {
  transition-delay:0.4s
}

  .reveal-delay-5 {
  transition-delay:0.5s
}

  .reveal-delay-6 {
  transition-delay:0.6s
}

  /* ─── Nav ─── */
  .nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  transform:translateY(-100%);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),background 0.3s,box-shadow 0.3s,backdrop-filter 0.3s
}

  .nav.visible {
  transform:translateY(0)
}

  .nav.scrolled {
  background:rgba(251,252,253,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--border)
}

  .nav-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px
}

  .nav-brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none
}

  .nav-brand svg {
  width:28px;
  height:28px
}

  .nav-brand .wm {
  font:600 20px/1 var(--font-display);
  letter-spacing:-0.03em;
  color:var(--fg)
}

  .nav-brand .wm .deca {
  font-weight:400
}
  .nav-brand .wm .now {
  font-weight:700
}

  .nav-links {
  display:flex;
  gap:28px;
  align-items:center
}

  .nav-links a {
  font:500 14px/1 var(--font-body);
  color:var(--muted);
  text-decoration:none;
  transition:color 0.2s
}

  .nav-links a:hover {
  color:var(--fg)
}

  .nav-links .nav-cta {
  font:600 14px/1 var(--font-body);
  color:#fff;
  background:var(--accent);
  padding:10px 20px;
  border-radius:8px;
  text-decoration:none;
  transition:transform 0.2s,box-shadow 0.2s
}

  .nav-links .nav-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(2,111,215,0.3);
  color:#fff
}

@media(max-width:768px) {
  .nav-links a:not(.nav-cta) {
  display:none
  }

}

  /* ─── Hero ─── */
  .hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  position:relative;
  padding:120px 24px 80px;
  background:var(--bg-dark);
  color:var(--fg-dark);
  overflow:hidden
}

  .hero-inner {
  max-width:1200px;
  width:100%;
  margin:0 auto
}

  .hero-logo {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:40px
}

  .hero-logo svg {
  width:48px;
  height:48px;
  color:var(--fg-dark)
}

  .hero-logo .wm {
  font:700 44px/1 var(--font-display);
  letter-spacing:-0.03em;
  color:var(--fg-dark)
}

  .hero-logo .wm .deca {
  font-weight:400
}
  .hero-logo .wm .now {
  font-weight:700
}

  .hero-eyebrow {
  font:600 13px/1 var(--font-mono);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:24px
}

  .hero h1 {
  font:700 clamp(40px,7vw,76px)/1.05 var(--font-display);
  letter-spacing:-0.03em;
  color:var(--fg-dark);
  max-width:18ch;
  margin-bottom:24px
}

  .hero h1 .accent {
  color:var(--accent)
}

  .hero p {
  font:400 clamp(18px,2.5vw,24px)/1.5 var(--font-body);
  color:var(--muted-dark);
  max-width:60ch;
  margin-bottom:40px
}

  .hero-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}

  .btn-primary {
  font:600 17px/1 var(--font-body);
  color:#fff;
  background:var(--accent);
  padding:16px 32px;
  border-radius:10px;
  text-decoration:none;
  transition:transform 0.2s,box-shadow 0.2s
}

  .btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(2,111,215,0.3)
}

  .btn-secondary {
  font:600 17px/1 var(--font-body);
  color:var(--fg-dark);
  background:transparent;
  border:1px solid var(--border-dark);
  padding:16px 32px;
  border-radius:10px;
  text-decoration:none;
  transition:transform 0.2s,box-shadow 0.2s
}

  .btn-secondary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  border-color:var(--accent)
}

  .hero-bg {
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  z-index:0;
  opacity:0.15;
  overflow:hidden;
  pointer-events:none
}

  .hero-bg svg {
  position:absolute;
  top:50%;
  right:-10%;
  transform:translateY(-50%);
  width:80%;
  height:auto;
  animation:float 8s ease-in-out infinite
}

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

  @keyframes float {
  0%,100% {
  transform:translateY(-50%)
}
  50% {
  transform:translateY(-54%)
}

}

  /* ─── Hero animated background ─── */
  .hero-particles {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none
}

  .hero-particles .dot {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(2,111,215,0.7);
  opacity:0;
  transform:translate(-50%,-50%);
  will-change:transform,opacity
}

  /* Route trails (SVG, hidden — only used for dot paths) */
  .hero-routes {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none
}

  .hero-routes svg {
  width:100%;
  height:100%;
  display:block
}

  .hero-routes path {
  fill:none;
  stroke:none
}

  .hero-grid {
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.06;
  background-image:linear-gradient(var(--fg-dark) 1px,transparent 1px),linear-gradient(90deg,var(--fg-dark) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  animation:gridShift 20s linear infinite
}

  @keyframes gridShift {
  0% {
  transform:translateY(0)
}
  100% {
  transform:translateY(60px)
}

}

  .hero-glow {
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(80px)
}

  .hero-glow.g1 {
  width:500px;
  height:500px;
  background:var(--accent);
  opacity:0.18;
  top:-120px;
  right:5%;
  animation:glowPulse 6s ease-in-out infinite
}

  .hero-glow.g2 {
  width:400px;
  height:400px;
  background:var(--accent);
  opacity:0.12;
  bottom:-80px;
  left:15%;
  animation:glowPulse 8s ease-in-out infinite 2s
}

  @keyframes glowPulse {
  0%,100% {
  opacity:0.12;
  transform:scale(1)
}
  50% {
  opacity:0.3;
  transform:scale(1.2)
}

}

  /* ─── Section base ─── */
  .section {
  padding:100px 24px;
  max-width:1200px;
  margin:0 auto
}

  .section-eyebrow {
  font:600 13px/1 var(--font-mono);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px
}

  .section h2 {
  font:700 clamp(32px,5vw,48px)/1.1 var(--font-display);
  letter-spacing:-0.025em;
  color:var(--fg);
  margin-bottom:16px
}

  .section-lede {
  font:400 clamp(17px,2vw,20px)/1.5 var(--font-body);
  color:var(--muted);
  max-width:72ch;
  margin-bottom:48px
}

  /* ─── Value props ─── */
  .value-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden
}

  .value-cell {
  background:var(--surface);
  padding:48px 48px
}

  .value-cell .v-label {
  font:600 12px/1 var(--font-mono);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px
}

  .value-cell h3 {
  font:600 24px/1.2 var(--font-display);
  letter-spacing:-0.015em;
  margin-bottom:12px
}

  .value-cell p {
  font:400 17px/1.55 var(--font-body);
  color:var(--muted)
}

  .value-cell p strong {
  color:var(--fg);
  font-weight:600
}

@media(max-width:768px) {
  .value-grid {
  grid-template-columns:1fr
  }
  .value-cell {
  padding:32px 24px
}

}

  /* ─── Normative ─── */
  .norm-table {
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden
}

  .norm-row {
  display:grid;
  grid-template-columns:240px 1fr;
  border-bottom:1px solid var(--border)
}

  .norm-row:last-child {
  border-bottom:0
}

  .norm-cell {
  padding:18px 28px;
  font-size:17px
}

  .norm-key {
  font:600 13px/1.3 var(--font-mono);
  color:var(--muted);
  letter-spacing:0.04em;
  text-transform:uppercase
}

  .norm-val {
  font:500 17px/1.4 var(--font-body);
  color:var(--fg)
}

@media(max-width:768px) {
  .norm-row {
  grid-template-columns:1fr
  }
  .norm-key {
  padding-bottom:4px
}
  .norm-val {
  padding-top:0
}

}

  /* ─── Funcionalidades grid ─── */
  .feat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}

  .feat-card {
  border:1px solid var(--border);
  border-radius:14px;
  padding:36px 32px;
  background:var(--surface);
  transition:transform 0.3s,box-shadow 0.3s
}

  .feat-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.06)
}

  .feat-card .feat-icon {
  width:40px;
  height:40px;
  margin-bottom:20px
}

  .feat-card h3 {
  font:600 22px/1.15 var(--font-display);
  letter-spacing:-0.02em;
  color:var(--fg);
  margin-bottom:10px
}

  .feat-card p {
  font:400 15px/1.45 var(--font-body);
  color:var(--muted)
}

@media(max-width:960px) {
  .feat-grid {
  grid-template-columns:1fr 1fr
  }

}

@media(max-width:640px) {
  .feat-grid {
  grid-template-columns:1fr
  }

}

  /* ─── Funcionalidades tabs ─── */
  .feat-tabs-section {
  background:#F0F2F5;
  color:var(--fg);
  padding:100px 48px;
  max-width:1200px;
  margin:0 auto;
  border-radius:24px
}

  .feat-tabs-section .section-eyebrow {
  color:var(--accent)
}

  .feat-tabs-section h2 {
  color:var(--fg)
}

  .feat-tabs-section .section-lede {
  color:var(--muted)
}

  .feat-tabs {
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:0
}

  .feat-item {
  display:flex;
  flex-direction:column
}

  .feat-tab {
  display:flex;
  align-items:center;
  gap:12px;
  font:600 16px/1.2 var(--font-body);
  color:var(--muted);
  background:rgba(14,18,23,0.03);
  border:1px solid var(--border);
  border-radius:0;
  cursor:pointer;
  transition:all 0.25s;
  width:100%;
  text-align:left;
  padding:18px 24px
}

  .feat-item:first-child .feat-tab {
  border-radius:12px 12px 0 0
}

  .feat-item:last-child .feat-tab {
  border-radius:0 0 12px 12px
}

  .feat-item:last-child .feat-tab.active {
  border-radius:0
}

  .feat-item:not(:first-child) .feat-tab {
  border-top:0
}

  .feat-tab:hover {
  color:var(--fg);
  background:rgba(14,18,23,0.06)
}

  .feat-tab.active {
  color:var(--accent);
  background:rgba(2,111,215,0.06);
  border-color:var(--accent)
}

  .feat-item:not(:first-child) .feat-tab.active {
  border-top:1px solid var(--accent)
}

  .feat-tab svg {
  width:22px;
  height:22px;
  flex-shrink:0
}

  .feat-tab .chevron {
  margin-left:auto;
  width:18px;
  height:18px;
  transition:transform 0.3s
}

  .feat-tab.active .chevron {
  transform:rotate(90deg)
}

  .feat-tab-content {
  flex:none;
  animation:tabFade 0.4s ease;
  padding:0;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease
}

  .feat-tab-content.open {
  max-height:2000px
}

  .feat-tab-content .inner {
  padding:32px 32px 40px;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:0;
  border-radius:0
}

  .feat-item:last-child .feat-tab-content.open .inner {
  border-radius:0 0 12px 12px
}

@media(max-width:768px) {
  .feat-tab-content .inner {
  padding:16px 16px 24px
  }

}

@media(max-width:768px) {
  .feat-tab {
  padding:14px 16px;
  font-size:14px
  }

}

  @keyframes tabFade {
  from {
  opacity:0;
  transform:translateY(12px)
}
  to {
  opacity:1;
  transform:translateY(0)
}

}

  @keyframes tabFade {
  from {
  opacity:0;
  transform:translateY(12px)
}
  to {
  opacity:1;
  transform:translateY(0)
}

}

  .feat-tab-content .tab-lede {
  font:400 17px/1.5 var(--font-body);
  color:var(--muted);
  max-width:72ch;
  margin-bottom:32px
}

  .feat-tab-content .flow-container {
  margin-top:8px
}

  .feat-tab-content .flow-step {
  background:var(--surface);
  border-color:var(--border)
}

  .feat-tab-content .flow-step .step-body {
  color:var(--muted)
}

  .feat-tab-content .flow-step .step-body strong {
  color:var(--fg)
}

  .feat-tab-content .flow-step .step-title {
  color:var(--fg)
}

  .feat-tab-content .flow-arrow {
  color:var(--accent)
}

@media(max-width:900px) {
  .feat-tab-content .flow-container {
  flex-direction:column
  }
  .feat-tab-content .flow-arrow {
  transform:rotate(90deg);
  width:100%;
  height:40px
}

}

  /* ─── FAQ ─── */
  .faq-accordion {
  display:flex;
  flex-direction:column;
  gap:0
}

  .faq-item {
  display:flex;
  flex-direction:column
}

  .faq-q {
  display:flex;
  align-items:center;
  gap:12px;
  font:600 17px/1.3 var(--font-body);
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0;
  cursor:pointer;
  transition:all 0.25s;
  width:100%;
  text-align:left;
  padding:20px 24px
}

  .faq-item:first-child .faq-q {
  border-radius:12px 12px 0 0
}

  .faq-item:last-child .faq-q {
  border-radius:0 0 12px 12px
}

  .faq-item:not(:first-child) .faq-q {
  border-top:0
}

  .faq-item:last-child .faq-q.active {
  border-radius:0
}

  .faq-q:hover {
  background:rgba(14,18,23,0.03)
}

  .faq-q.active {
  color:var(--accent);
  border-color:var(--accent)
}

  .faq-item:not(:first-child) .faq-q.active {
  border-top:1px solid var(--accent)
}

  .faq-q .chevron {
  margin-left:auto;
  width:18px;
  height:18px;
  transition:transform 0.3s;
  flex-shrink:0
}

  .faq-q.active .chevron {
  transform:rotate(90deg)
}

  .faq-a {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease
}

  .faq-a.open {
  max-height:500px
}

  .faq-a .inner {
  padding:24px 24px 32px;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:0;
  border-radius:0
}

  .faq-item:last-child .faq-a.open .inner {
  border-radius:0 0 12px 12px
}

  .faq-a .inner p {
  font:400 16px/1.6 var(--font-body);
  color:var(--muted)
}

  .faq-a .inner p strong {
  color:var(--fg);
  font-weight:600
}

  /* ─── Flow steps ─── */
  .flow-container {
  display:flex;
  align-items:stretch;
  gap:0
}

  .flow-step {
  flex:1;
  border:1px solid var(--border);
  border-radius:14px;
  padding:36px 28px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:12px
}

  .flow-step .step-icon {
  width:44px;
  height:44px;
  color:var(--accent);
  margin-bottom:8px
}

  .flow-step .step-num {
  font:600 13px/1 var(--font-mono);
  color:var(--accent);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:4px
}

  .flow-step .step-title {
  font:600 22px/1.15 var(--font-display);
  letter-spacing:-0.015em;
  color:var(--fg);
  margin-bottom:6px
}

  .flow-step .step-body {
  font:400 14px/1.45 var(--font-body);
  color:var(--muted)
}

  .flow-step .step-body strong {
  color:var(--fg);
  font-weight:600
}

  .flow-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  flex-shrink:0;
  color:var(--accent)
}

  .flow-arrow svg {
  width:24px;
  height:24px
}

@media(max-width:900px) {
  .flow-container {
  flex-direction:column
  }
  .flow-arrow {
  transform:rotate(90deg);
  width:100%;
  height:40px
}

}

  /* ─── Pricing ─── */
  .price-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}

  .price-card {
  border:1px solid var(--border);
  border-radius:14px;
  padding:48px 36px;
  background:var(--surface)
}

  .price-card .p-label {
  font:600 13px/1 var(--font-mono);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:24px
}

  .price-card .p-big {
  font:600 64px/1 var(--font-display);
  letter-spacing:-0.03em;
  color:var(--fg);
  margin-bottom:8px
}

  .price-card .p-sub {
  font:500 16px/1.4 var(--font-body);
  color:var(--muted)
}

@media(max-width:768px) {
  .price-grid {
  grid-template-columns:1fr
  }

}

  /* ─── Contact / CTA ─── */
  .cta-section {
  background:#F0F2F5;
  color:var(--fg);
  padding:100px 24px;
  text-align:center
}

  .cta-section h2 {
  color:var(--fg);
  font:700 clamp(32px,5vw,48px)/1.1 var(--font-display);
  letter-spacing:-0.025em;
  margin-bottom:24px
}

  .cta-section p {
  font:400 clamp(17px,2vw,20px)/1.5 var(--font-body);
  color:var(--muted);
  max-width:60ch;
  margin:0 auto 40px
}

  .contact-form {
  max-width:560px;
  margin:0 auto;
  text-align:left
}

  .form-row {
  display:flex;
  gap:20px
}

  .form-field {
  margin-bottom:20px;
  flex:1
}

  .form-field label {
  display:block;
  font:600 12px/1 var(--font-mono);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px
}

  .form-field label .req {
  color:var(--accent)
}

  .form-field input,.form-field textarea {
  width:100%;
  font:400 16px/1.5 var(--font-body);
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  transition:border-color 0.2s,box-shadow 0.2s
}

  .form-field input::placeholder,.form-field textarea::placeholder {
  color:var(--muted);
  opacity:0.6
}

  .form-field input:focus,.form-field textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(2,111,215,0.1)
}

  .form-field textarea {
  resize:vertical;
  min-height:100px
}

  .form-submit {
  font:600 17px/1 var(--font-body);
  color:#fff;
  background:var(--accent);
  border:none;
  padding:16px 40px;
  border-radius:10px;
  cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s;
  width:100%
}

  .form-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(2,111,215,0.3)
}

  .form-submit:disabled {
  opacity:0.6;
  cursor:default;
  transform:none
}

  .form-status {
  margin-top:16px;
  font:500 15px/1.4 var(--font-body);
  color:var(--muted);
  text-align:center
}

  .form-status.success {
  color:var(--success)
}

  .form-status.error {
  color:var(--danger)
}

@media(max-width:640px) {
  .form-row {
  flex-direction:column;
  gap:0
  }

}

  /* ─── Footer ─── */
  .footer {
  padding:48px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  background:var(--bg-dark);
  color:var(--fg-dark)
}

  .footer-inner {
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px
}

  .footer-brand {
  display:flex;
  align-items:center;
  gap:10px
}

  .footer-brand svg {
  width:24px;
  height:24px;
  color:var(--fg-dark)
}

  .footer-brand .wm {
  font:600 14px/1 var(--font-display);
  letter-spacing:-0.03em;
  color:var(--fg-dark)
}

  .footer-brand .wm .deca {
  font-weight:400
}
  .footer-brand .wm .now {
  font-weight:700
}

  .footer-claim {
  font:500 13px/1 var(--font-mono);
  color:var(--muted-dark);
  letter-spacing:0.04em
}

  .footer-legal {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:12px
}

  .footer-legal a {
  font:500 13px/1 var(--font-body);
  color:var(--muted-dark);
  text-decoration:none;
  transition:color 0.2s
}

  .footer-legal a:hover {
  color:var(--fg-dark)
}

  /* ─── Cookie banner ─── */
  .cookie-banner {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:200;
  background:var(--bg-dark);
  color:var(--fg-dark);
  border-top:1px solid var(--border-dark);
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  transform:translateY(100%);
  transition:transform 0.4s ease
}

  .cookie-banner.show {
  transform:translateY(0)
}

  .cookie-banner p {
  font:400 14px/1.5 var(--font-body);
  color:var(--muted-dark);
  max-width:60ch;
  margin:0
}

  .cookie-banner p a {
  color:var(--accent);
  text-decoration:none
}

  .cookie-actions {
  display:flex;
  gap:12px;
  flex-shrink:0
}

  .cookie-btn {
  font:600 14px/1 var(--font-body);
  padding:12px 24px;
  border-radius:8px;
  cursor:pointer;
  border:none;
  transition:all 0.2s
}

  .cookie-btn.accept {
  background:var(--accent);
  color:#fff
}

  .cookie-btn.accept:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(2,111,215,0.3)
}

  .cookie-btn.reject {
  background:transparent;
  color:var(--muted-dark);
  border:1px solid var(--border-dark)
}

  .cookie-btn.reject:hover {
  color:var(--fg-dark);
  border-color:var(--fg-dark)
}

@media(max-width:640px) {
  .cookie-banner {
  flex-direction:column;
  text-align:center;
  gap:16px
  }

}

  /* ─── Modal legal ─── */
  .legal-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(8,12,16,0.8);
  backdrop-filter:blur(4px);
  align-items:center;
  justify-content:center;
  padding:24px
}

  .legal-modal.open {
  display:flex
}

  .legal-modal-content {
  background:var(--bg);
  color:var(--fg);
  max-width:720px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  border-radius:16px;
  padding:48px
}

  .legal-modal-content h2 {
  font:700 28px/1.1 var(--font-display);
  letter-spacing:-0.02em;
  margin-bottom:24px
}

  .legal-modal-content h3 {
  font:600 18px/1.2 var(--font-display);
  margin:24px 0 8px
}

  .legal-modal-content p {
  font:400 15px/1.6 var(--font-body);
  color:var(--muted);
  margin-bottom:12px
}

  .legal-modal-content ul {
  font:400 15px/1.6 var(--font-body);
  color:var(--muted);
  margin:0 0 16px 20px
}

  .legal-modal-content ul li {
  margin-bottom:4px
}

  .legal-modal-content strong {
  color:var(--fg);
  font-weight:600
}

  .legal-modal-close {
  position:absolute;
  top:24px;
  right:24px;
  background:none;
  border:none;
  font-size:28px;
  color:var(--muted);
  cursor:pointer;
  transition:color 0.2s
}

  .legal-modal-close:hover {
  color:var(--fg)
}

  /* ─── Scroll indicator ─── */
  .scroll-indicator {
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  animation:fadeIn 1s 1.5s forwards
}

  .scroll-indicator .mouse {
  width:24px;
  height:38px;
  border:2px solid var(--muted);
  border-radius:12px;
  position:relative
}

  .scroll-indicator .mouse::after {
  content:'';
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:8px;
  background:var(--muted);
  border-radius:2px;
  animation:scrollWheel 1.5s infinite
}

  .scroll-indicator span {
  font:500 11px/1 var(--font-mono);
  color:var(--muted);
  letter-spacing:0.1em;
  text-transform:uppercase
}

  @keyframes fadeIn {
  to {
  opacity:0.6
}

}

  @keyframes scrollWheel {
  0% {
  opacity:1;
  transform:translateX(-50%) translateY(0)
}
  100% {
  opacity:0;
  transform:translateX(-50%) translateY(12px)
}

}

  /* ─── Dark section variant ─── */
  .section-dark {
  background:var(--bg-dark);
  color:var(--fg-dark)
}

  .section-dark h2 {
  color:var(--fg-dark)
}

  .section-dark .section-lede {
  color:var(--muted-dark)
}

  .section-dark .section-eyebrow {
  color:var(--accent)
}

  /* ─── Count-up badge ─── */
  .hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:500 14px/1 var(--font-mono);
  color:var(--muted);
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:8px 16px;
  margin-bottom:24px
}

  .hero-badge .dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  animation:pulse 2s infinite
}

  @keyframes pulse {
  0%,100% {
  opacity:1
}
  50% {
  opacity:0.4
}

}