/* ============================================================
   QUANTIUM SECURITY — design tokens
   ============================================================ */
:root{
  --bg-void:      #05080d;
  --bg-panel:     #0a1019;
  --bg-panel-2:   #0e1622;
  --line:         rgba(126,196,255,0.14);
  --line-strong:  rgba(126,196,255,0.28);

  --cyan:         #5fd4ff;
  --cyan-soft:    #8fe3ff;
  --cyan-dim:     rgba(95,212,255,0.12);

  --gold:         #f0b23f;
  --gold-soft:    #ffd479;
  --gold-glow:    rgba(240,178,63,.65);
  --steel:        #aab2bd;
  --steel-dim:    rgba(170,178,189,0.16);

  --danger:       #ff5b6a;
  --ok:           #37d68a;

  --text-hi:      #ffffff;
  --text-mid:     #d7e2f0;
  --text-dim:     #9db0c6;

  --shadow-txt:   0 2px 4px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.55);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 14px;
  --container: 1180px;

  --ease: cubic-bezier(.16,.84,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
}
html,body{ background:var(--bg-void); }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-mid);
  background:var(--bg-void);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); color:var(--text-hi); margin:0; line-height:1.12; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
  position:relative;
  z-index:2;
}

::selection{ background:var(--cyan); color:#05121a; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   Ambient HUD chrome — signature framing element
   ============================================================ */
.hud{ position:fixed; inset:0; pointer-events:none; z-index:60; }
.hud-corner{
  position:absolute;
  width:26px; height:26px;
  border-color:rgba(95,212,255,0.35);
  border-style:solid;
  border-width:0;
  opacity:.7;
}
.hud-tl{ top:16px; left:16px; border-top-width:1.5px; border-left-width:1.5px; }
.hud-tr{ top:16px; right:16px; border-top-width:1.5px; border-right-width:1.5px; }
.hud-bl{ bottom:16px; left:16px; border-bottom-width:1.5px; border-left-width:1.5px; }
.hud-br{ bottom:16px; right:16px; border-bottom-width:1.5px; border-right-width:1.5px; }
@media (max-width:720px){ .hud{ display:none; } }

.scanline{
  position:fixed; left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(95,212,255,.55), transparent);
  z-index:59;
  pointer-events:none;
  animation:scan 9s linear infinite;
  opacity:.55;
}
@keyframes scan{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(100vh); }
}
@media (prefers-reduced-motion: reduce){ .scanline{ animation:none; display:none; } }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(5,8,13,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.is-scrolled{
  background:rgba(5,8,13,0.78);
  border-bottom-color:var(--line);
  backdrop-filter:blur(10px);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:16px 28px;
  display:flex;
  align-items:center;
  gap:32px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text-hi);
  margin-right:auto;
}
.brand-logo{
  height:52px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 16px rgba(240,178,63,.55)) drop-shadow(0 0 34px rgba(240,178,63,.25));
  animation:logoGlow 4.5s ease-in-out infinite;
  transition:filter .25s;
}
.brand:hover .brand-logo{
  filter:drop-shadow(0 0 22px rgba(240,178,63,.75)) drop-shadow(0 0 46px rgba(240,178,63,.4));
}
@keyframes logoGlow{
  0%, 100%{ filter:drop-shadow(0 0 16px rgba(240,178,63,.55)) drop-shadow(0 0 34px rgba(240,178,63,.25)); }
  50%{ filter:drop-shadow(0 0 20px rgba(240,178,63,.7)) drop-shadow(0 0 42px rgba(240,178,63,.35)); }
}
@media (prefers-reduced-motion: reduce){ .brand-logo{ animation:none; } }

.brand-footer .brand-logo{ height:44px; }

.nav-links{ display:flex; gap:28px; }
.nav-links a{
  font-size:.86rem;
  color:var(--text-mid);
  transition:color .2s;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--cyan-soft); }

.nav-cta{ flex:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:22px; height:1.5px; background:var(--text-hi); display:block;
}

@media (max-width:900px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column;
    background:rgba(6,10,16,0.98);
    border-bottom:1px solid var(--line);
    padding:18px 28px 26px;
    gap:16px;
    transform:translateY(-140%);
    opacity:0;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-links.is-open{ transform:translateY(0); opacity:1; }
  .nav .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 26px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.9rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#26170a;
  box-shadow:0 8px 24px -8px rgba(232,185,94,.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(232,185,94,.7); }

.btn-outline{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--text-hi);
}
.btn-outline:hover{ border-color:var(--cyan); color:var(--cyan-soft); }

.btn-ghost{
  background:var(--cyan-dim);
  border-color:var(--line-strong);
  color:var(--cyan-soft);
  padding:10px 20px;
  font-size:.84rem;
}
.btn-ghost:hover{ background:rgba(95,212,255,.2); }

/* ============================================================
   Parallax layers
   ============================================================ */
.parallax-layer{
  position:absolute;
  inset:0;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--bg-void);
  will-change:transform;
  z-index:0;
  transform:translate3d(0,0,0) scale(1);
  filter:saturate(1.12) contrast(1.02) brightness(1.16);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 200px, black calc(100% - 200px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, black 200px, black calc(100% - 200px), transparent 100%);
}
.parallax-layer--dim{ opacity:.78; }
.parallax-layer--fore{
  opacity:.2;
  mix-blend-mode:screen;
  transform-origin:center;
}
/* Softer, farther-away treatment — use on sections where the source photo
   reads as too close / too "zoomed" (e.g. .diferencia). Pulls contrast and
   saturation back down so the image reads sharp and distant instead of
   like a cropped macro shot. */
.parallax-layer--natural{
  filter:saturate(1.06) contrast(1.0) brightness(1.08) blur(0px);
}
.parallax-layer--tight{
  inset:0;
  background-position:center;
}

/* fondo1-pc reads a touch low on desktop — nudge the visible crop upward */
@media (min-width:721px){
  [data-bg-desktop="assets/fondo1-pc.jpg"]{ background-position:center 32%; }
}

/* ============================================================
   Certification strip — a compact, standalone badge between the
   Problema and Demo sections. Deliberately not a full .section
   (no matching background layer, no 110px rhythm) — it's a slim
   accent strip, so it gets its own lighter vertical padding and
   its own pair of seams above/below to keep the usual breathing
   room against the sections on either side.
   ============================================================ */
.cert-strip{
  position:relative;
  padding:64px 0;
  overflow:hidden;
  background:transparent;
}
.cert-card{
  display:flex;
  align-items:center;
  gap:28px;
  max-width:780px;
  margin:0 auto;
  padding:32px 38px;
  border:1px solid rgba(240,178,63,.3);
  border-radius:var(--radius);
  background:
    linear-gradient(150deg, rgba(240,178,63,.08), transparent 60%),
    rgba(10,16,25,.6);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  box-shadow:0 0 0 1px rgba(240,178,63,.08), 0 18px 48px rgba(240,178,63,.14);
}
.cert-icon{
  flex:none;
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--gold);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:0 0 0 1px rgba(240,178,63,.3), 0 8px 24px rgba(240,178,63,.28);
}
.cert-icon svg{ width:30px; height:30px; }
.cert-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:8px;
}
.cert-text{
  font-size:.94rem;
  color:var(--text-mid);
  line-height:1.7;
}
.cert-text strong{ color:var(--text-hi); font-weight:600; }
@media (max-width:640px){
  .cert-strip{ padding:48px 0; }
  .cert-card{ flex-direction:column; align-items:flex-start; padding:28px 24px; gap:18px; }
}

/* ============================================================
   Section seams — sits exactly on the border between two
   sections and heavily blurs that thin band, so whatever hard
   edge two independent backgrounds/masks create at the seam
   dissolves into a soft, uniform transition instead of a line.
   ============================================================ */
.section-seam{
  position:relative;
  height:1px;
  margin:-36px 0;
  pointer-events:none;
  z-index:1;
  overflow:visible;
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  background:rgba(5,8,13,.16);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);
}
@media (max-width:720px){
  .section-seam{ margin:-22px 0; backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); }
}

/* The hero uses an isolated stacking context (for its blend-mode layers),
   which means anything bleeding upward into its box gets painted over its
   own content (buttons, badges, the monitoring card) instead of blending
   behind it. So this seam only bleeds downward into the next section. */
.section-seam--after-hero{ margin-top:0; }

/* ============================================================
   Eyebrow / typography helpers
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:14px;
  padding:7px 14px;
  border-radius:999px;
  background:
    linear-gradient(120deg, rgba(240,178,63,.24), rgba(255,255,255,.09) 45%, rgba(170,178,189,.13) 75%, rgba(240,178,63,.24)),
    linear-gradient(135deg, rgba(8,9,11,.62), rgba(8,9,11,.4));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 12s ease-in-out infinite;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(240,178,63,.32);
  box-shadow:inset 0 1px 0 rgba(255,212,121,.4), 0 0 22px rgba(240,178,63,.14);
  text-shadow:0 0 12px rgba(240,178,63,.5), 0 1px 4px rgba(0,0,0,.7);
}
.eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 14px 3px rgba(240,178,63,.85);
  flex:none;
}
.section-title{
  font-size:clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight:600;
  max-width:18ch;
  margin-bottom:18px;
  background:
    linear-gradient(120deg, rgba(240,178,63,.22), rgba(255,255,255,.08) 45%, rgba(170,178,189,.12) 75%, rgba(240,178,63,.22)),
    linear-gradient(120deg, rgba(8,9,11,.56), rgba(8,9,11,.36));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 14s ease-in-out infinite;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  padding:.14em .34em;
  border-radius:12px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:inset 0 1px 0 rgba(255,212,121,.4), 0 0 26px rgba(240,178,63,.1);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.section-lead{
  font-size:1.02rem;
  color:var(--text-mid);
  max-width:56ch;
  line-height:1.8;
  margin-bottom:44px;
  background:
    linear-gradient(120deg, rgba(240,178,63,.15), rgba(255,255,255,.06) 45%, rgba(170,178,189,.09) 75%, rgba(240,178,63,.15)),
    linear-gradient(120deg, rgba(8,9,11,.5), rgba(8,9,11,.3));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 16s ease-in-out infinite;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:.12em .32em;
  border-radius:8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.text-accent{
  color:var(--gold-soft);
  text-shadow:0 0 18px var(--gold-glow), 0 0 40px rgba(240,178,63,.3);
}
.text-accent-soft{ color:var(--gold-soft); text-shadow:0 0 14px rgba(240,178,63,.4); }

/* Subtle iridescent shimmer used behind readable text — a slow drift
   across a cyan → violet → gold gradient, like light on a hologram.
   Never fast or flashy; it should read as ambient polish. */
@keyframes holoShift{
  0%{   background-position:0% 50%, 0% 0%; }
  50%{  background-position:100% 50%, 0% 0%; }
  100%{ background-position:0% 50%, 0% 0%; }
}
@media (prefers-reduced-motion: reduce){
  .eyebrow, .section-title, .section-lead,
  .hero-title, .hero-sub, .hero-note, .problem-close,
  .trust-strip li, .footer-legal{
    animation:none;
  }
}

/* Elements that drift at their own speed as the page scrolls */
[data-parallax]{
  will-change:transform;
}

/* Floating decorative hex accents — extra depth layer per section */
.drift{
  position:absolute;
  pointer-events:none;
  color:var(--cyan);
  opacity:.22;
  z-index:0;
  will-change:transform;
}
.drift svg{ width:100%; height:100%; }
.drift--gold{ color:var(--gold); }
@media (max-width:900px){ .drift{ display:none; } }

/* ============================================================
   Matrix rain — ambient cyber-code animation behind every
   section, fixed to the viewport so it reads as one continuous
   backdrop instead of a per-section effect.
   ============================================================ */
.matrix-rain{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:screen;
}
@media (max-width:720px){ .matrix-rain{ opacity:.32; } }
@media (prefers-reduced-motion: reduce){ .matrix-rain{ display:none; } }

/* ============================================================
   Security constellation — a slow, sparse network of glowing
   nodes and connecting threads drifting behind the content.
   The "elegant" companion to the matrix rain: no falling code,
   just quiet signal — closer to a live network map than a
   hacker-movie effect.
   ============================================================ */
.network-rain{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;
}
@media (max-width:720px){ .network-rain{ opacity:.4; } }
@media (prefers-reduced-motion: reduce){ .network-rain{ display:none; } }

.hero, .section-dark, .section-cta{ perspective:1400px; }

/* ============================================================
   Sections (generic)
   ============================================================ */
.section{
  position:relative;
  padding:110px 0;
  overflow:hidden;
  background:transparent;
}
#capas, #faq{ padding-bottom:150px; }
@media (max-width:720px){
  #capas, #faq{ padding-bottom:104px; }
}
.section-dark{ background:transparent; }
.section-dark::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(95,212,255,.07), transparent 55%),
    radial-gradient(90% 85% at 50% 42%, rgba(5,8,13,.12), rgba(5,8,13,.36) 78%),
    linear-gradient(180deg, rgba(5,8,13,.5) 0%, transparent 24%, transparent 76%, rgba(5,8,13,.5) 100%);
  z-index:0;
}

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}

.card, .feature, .step, .fit-card, .layer, .founder-block, .faq-item{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.card.is-visible, .feature.is-visible, .step.is-visible, .fit-card.is-visible,
.layer.is-visible, .founder-block.is-visible, .faq-item.is-visible{
  opacity:1; transform:translateY(0);
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:140px 0 60px;
  overflow:hidden;
  isolation:isolate;
}
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(75% 62% at 50% 32%, rgba(5,8,13,.16), rgba(5,8,13,.42) 70%),
    linear-gradient(180deg, rgba(5,8,13,.34) 0%, transparent 20%, transparent 74%, var(--bg-void) 100%);
}
.hero-content{ text-align:center; margin:0 auto; }
.hero-content .eyebrow{ justify-content:center; }
.hero-title{
  font-size:clamp(2.3rem, 6vw, 4.3rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 auto 22px;
  max-width:23ch;
  line-height:1.28;
  color:var(--text-hi);
  background:
    linear-gradient(120deg, rgba(240,178,63,.24), rgba(255,255,255,.09) 45%, rgba(170,178,189,.1) 75%, rgba(240,178,63,.24)),
    linear-gradient(120deg, rgba(8,9,11,.54), rgba(8,9,11,.32));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 15s ease-in-out infinite;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:.1em .32em;
  border-radius:16px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:inset 0 1px 0 rgba(255,212,121,.42), 0 0 30px rgba(240,178,63,.12);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero-sub{
  font-size:1.08rem;
  color:var(--text-mid);
  max-width:52ch;
  margin:0 auto 36px;
  line-height:1.9;
  background:
    linear-gradient(120deg, rgba(240,178,63,.15), rgba(255,255,255,.06) 45%, rgba(170,178,189,.09) 75%, rgba(240,178,63,.15)),
    linear-gradient(120deg, rgba(8,9,11,.48), rgba(8,9,11,.28));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 17s ease-in-out infinite;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:.12em .32em;
  border-radius:8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero-actions{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin-bottom:28px;
}
.hero-note{
  font-family:var(--font-display);
  font-size:.72rem;
  color:var(--text-hi);
  letter-spacing:.01em;
  max-width:100%;
  width:fit-content;
  margin:28px auto 0;
  padding:.5em .9em;
  border-radius:999px;
  background:
    linear-gradient(120deg, rgba(240,178,63,.26), rgba(255,255,255,.11) 45%, rgba(170,178,189,.14) 75%, rgba(240,178,63,.26)),
    linear-gradient(135deg, rgba(6,7,9,.68), rgba(6,7,9,.5));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 13s ease-in-out infinite;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,212,121,.4), 0 0 22px rgba(240,178,63,.12);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* Small trust signals under the hero note — quiet, factual, not another
   loud pill; just fine-print with a thin gold-lit icon per line. */
.trust-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  list-style:none;
  margin:22px auto 0;
  max-width:640px;
  padding:0;
}
.trust-strip li{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.01em;
  color:var(--text-hi);
  padding:.5em .9em;
  border-radius:999px;
  background:
    linear-gradient(120deg, rgba(240,178,63,.18), rgba(255,255,255,.07) 45%, rgba(170,178,189,.1) 75%, rgba(240,178,63,.18)),
    linear-gradient(135deg, rgba(6,7,9,.62), rgba(6,7,9,.44));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 14s ease-in-out infinite;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,212,121,.3), 0 0 16px rgba(240,178,63,.1);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.trust-strip svg{
  width:15px; height:15px; flex:none;
  color:var(--gold);
  filter:drop-shadow(0 0 5px rgba(240,178,63,.5));
}
@media (max-width:640px){
  .trust-strip{ flex-direction:column; align-items:center; gap:10px; }
}

/* The "bancaria" trust badge gets its own brighter gold treatment —
   a stronger border, deeper glow, and a slow breathing pulse — so it
   reads as the standout credential among the trust-strip pills. */
.trust-highlight{
  color:var(--gold-soft) !important;
  border:1px solid rgba(240,178,63,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,212,121,.5),
    0 0 22px rgba(240,178,63,.35),
    0 0 44px rgba(240,178,63,.16) !important;
  animation:holoShift 14s ease-in-out infinite, trustGlowPulse 3.2s ease-in-out infinite !important;
}
.trust-highlight svg{
  color:var(--gold-soft);
  filter:drop-shadow(0 0 7px rgba(240,178,63,.85));
}
@keyframes trustGlowPulse{
  0%, 100%{
    box-shadow:
      inset 0 1px 0 rgba(255,212,121,.5),
      0 0 22px rgba(240,178,63,.35),
      0 0 44px rgba(240,178,63,.16);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,212,121,.65),
      0 0 30px rgba(240,178,63,.55),
      0 0 60px rgba(240,178,63,.26);
  }
}
@media (prefers-reduced-motion: reduce){
  .trust-highlight{ animation:none !important; }
}

/* Featured row: holds only the banking-credential badge, sized up close
   to the primary CTA button so it reads as the lead trust signal, with
   generous breathing room above and below so nothing touches it. */
.trust-strip--featured{
  margin:32px auto 0;
}
.trust-highlight--big{
  font-size:1.05rem;
  font-weight:600;
  padding:17px 34px;
  gap:14px;
  border-width:1.5px !important;
  line-height:1.3;
}
.trust-highlight--big svg{
  width:26px; height:26px;
}
@media (max-width:640px){
  .trust-strip--featured{ margin-top:26px; }
  .trust-highlight--big{
    font-size:.95rem;
    padding:15px 24px;
    text-align:center;
    white-space:normal;
  }
}

/* Second row (windows/mac pill) — pushed further down so it never
   crowds the hero-note above it. */
.trust-strip:not(.trust-strip--featured){
  margin-top:26px;
}

.hero-shield{
  position:static;
  z-index:2;
  display:flex;
  justify-content:center;
  margin-top:38px;
  margin-bottom:34px;
}
@media (min-width:721px){
  .hero-shield{ margin-bottom:64px; }
}
.hero-shield img{
  width:clamp(150px, 20vw, 240px);
  height:auto;
  display:block;
  filter:drop-shadow(0 0 26px rgba(95,212,255,.35)) drop-shadow(0 0 60px rgba(95,212,255,.15));
}

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1.4px solid var(--line-strong); border-radius:14px;
  z-index:2;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:7px; border-radius:2px; background:var(--cyan);
  animation:cue 1.8s ease infinite;
}
@keyframes cue{
  0%{ opacity:1; top:6px; }
  70%{ opacity:0; top:18px; }
  100%{ opacity:0; top:18px; }
}
@media (prefers-reduced-motion: reduce){ .scroll-cue span{ animation:none; } }

@media (max-width:720px){
  .hero{ min-height:0; padding-top:110px; padding-bottom:48px; }
  .scroll-cue{ display:none; }
  .hero-shield img{ width:clamp(120px, 32vw, 180px); }
  .brand-logo{ height:40px; }
}

/* ============================================================
   Problem section
   ============================================================ */
.problem-grid{ margin-bottom:40px; }
.card{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
  overflow:hidden;
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .25s;
}
.card-risk{ padding-top:0; }
.card-risk:hover{ border-color:rgba(240,178,63,.32); }
.card-media{
  display:block;
  margin:0 -26px 22px;
  aspect-ratio:16/9;
  overflow:hidden;
  position:relative;
  border-bottom:1px solid rgba(240,178,63,.16);
}
.card-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,18,23,.85) 100%);
}
.card-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease);
}
.card-risk:hover .card-media img{ transform:scale(1.045); }
.card h3{ font-size:1.08rem; margin-bottom:10px; }
.card p{ font-size:.92rem; line-height:1.6; }

.problem-close{
  text-align:center;
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--text-hi);
  max-width:44ch;
  margin:0 auto;
  line-height:1.7;
  background:
    linear-gradient(120deg, rgba(240,178,63,.17), rgba(255,255,255,.07) 45%, rgba(170,178,189,.1) 75%, rgba(240,178,63,.17)),
    linear-gradient(120deg, rgba(8,9,11,.48), rgba(8,9,11,.28));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 16s ease-in-out infinite;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:.16em .36em;
  border-radius:10px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:inset 0 1px 0 rgba(255,212,121,.34), 0 0 20px rgba(240,178,63,.09);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* ============================================================
   Demo window
   ============================================================ */
.demo-container{ text-align:center; }
.demo-container .eyebrow{ justify-content:center; }
.demo-container .section-title,
.demo-container .section-lead{ margin-left:auto; margin-right:auto; }

.demo-window{
  text-align:left;
  max-width:640px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:#070b11;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(95,212,255,.05);
}
.demo-titlebar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:#0c131d;
  border-bottom:1px solid var(--line);
}
.demo-dot{ width:9px; height:9px; border-radius:50%; }
.demo-dot--r{ background:#ff5f57; }
.demo-dot--y{ background:#febc2e; }
.demo-dot--g{ background:#28c840; }
.demo-titlebar-text{
  margin-left:8px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-dim);
}

.demo-body{
  position:relative;
  height:280px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #0d1520, #05080d 75%);
}
.demo-idle, .demo-alert{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  transition:opacity .5s ease;
}
.demo-idle{ padding:0 30px; }
.demo-playbar{
  width:70%; height:5px; border-radius:3px; background:rgba(95,212,255,.15); position:relative; overflow:hidden;
}
.demo-playbar::after{
  content:''; position:absolute; inset:0; width:38%;
  background:var(--cyan);
  border-radius:3px;
}
.demo-idle-text{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim); }

.demo-alert{ opacity:0; background:#0c0507; }
.demo-window.is-alert .demo-idle{ opacity:0; }
.demo-window.is-alert .demo-alert{ opacity:1; }

.alert-shield{ width:44px; height:44px; color:var(--danger); }
.alert-title{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:600; color:var(--danger);
  font-size:.98rem; letter-spacing:.03em;
}
.alert-blip{
  width:8px; height:8px; border-radius:50%; background:var(--danger);
  box-shadow:0 0 0 0 rgba(255,91,106,.6);
  animation:blip 1.2s ease-out infinite;
}
@keyframes blip{
  0%{ box-shadow:0 0 0 0 rgba(255,91,106,.6); }
  100%{ box-shadow:0 0 0 10px rgba(255,91,106,0); }
}
.alert-sub{ font-size:.86rem; color:var(--text-mid); }
.alert-meta{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-dim); }

.demo-footer{
  display:flex; justify-content:space-between;
  padding:12px 18px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.66rem; color:var(--text-dim);
  background:#0c131d;
}

@media (max-width:560px){
  .demo-footer{ flex-direction:column; gap:4px; }
}

/* ============================================================
   Steps
   ============================================================ */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-bottom:48px;
}
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{
  padding:0 26px 30px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(10,16,25,.55);
  backdrop-filter:blur(4px);
  overflow:hidden;
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .25s;
}
.step:hover{ border-color:rgba(240,178,63,.32); }
.step-media{
  display:block;
  position:relative;
  margin:0 -26px 22px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid rgba(240,178,63,.16);
}
.step-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,18,23,.85) 100%);
}
.step-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease);
}
.step:hover .step-media img{ transform:scale(1.045); }
.step-index{
  position:absolute;
  top:14px; left:14px;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--bg-void);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:0 0 0 1px rgba(240,178,63,.35), 0 6px 18px rgba(0,0,0,.4);
}
.step h3{ font-size:1.1rem; margin-bottom:10px; }
.step p{ font-size:.92rem; line-height:1.6; }

.cta-inline{ display:flex; justify-content:center; }

/* ============================================================
   Security layers — connected vertical timeline. A glowing gold
   line runs down the middle; each layer sits alternately left
   and right of it, joined by a lit node, like a signal passing
   from one stage to the next.
   ============================================================ */
.layers{
  position:relative;
  max-width:840px;
  margin:52px auto 8px;
  padding:4px 0;
}
.layers::before{
  content:'';
  position:absolute;
  left:50%; top:6px; bottom:6px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    transparent,
    rgba(240,178,63,.55) 8%,
    rgba(240,178,63,.55) 92%,
    transparent);
  box-shadow:0 0 16px 1px rgba(240,178,63,.25);
}
.layer{
  position:relative;
  width:calc(50% - 46px);
  padding:26px 26px;
  margin-bottom:34px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(120deg, rgba(240,178,63,.05), transparent 60%),
    rgba(10,16,25,.6);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .25s;
}
.layer:hover{ border-color:rgba(240,178,63,.35); }
.layer:last-child{ margin-bottom:0; }
.layer:nth-child(odd){ margin-right:auto; text-align:right; }
.layer:nth-child(even){ margin-left:auto; }
.layer-node{
  position:absolute; top:30px;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 5px var(--bg-void), 0 0 18px 4px rgba(240,178,63,.65);
}
.layer:nth-child(odd) .layer-node{ right:-53px; }
.layer:nth-child(even) .layer-node{ left:-53px; }
.layer-thumb{
  display:inline-block;
  width:52px; height:52px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid rgba(240,178,63,.35);
  box-shadow:0 0 0 4px rgba(240,178,63,.06), 0 0 18px rgba(240,178,63,.22);
}
.layer-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.layer-index{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--gold-soft);
  margin-bottom:10px;
}
.layer h3{ font-size:1.05rem; margin-bottom:9px; }
.layer p{ font-size:.9rem; line-height:1.65; color:var(--text-mid); }

@media (max-width:760px){
  .layers{ margin-top:40px; padding-left:8px; }
  .layers::before{ left:5px; }
  .layer{
    width:100%;
    margin-left:34px !important;
    margin-right:0 !important;
    text-align:left !important;
  }
  .layer:nth-child(odd) .layer-node,
  .layer:nth-child(even) .layer-node{ left:-30px; right:auto; }
}

/* ============================================================
   Feature grid
   ============================================================ */
.feature-grid{ margin-top:6px; }
.feature{
  padding:28px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-panel-2);
  transition:border-color .25s, transform .25s;
}
.feature:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.feature-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--cyan-dim); color:var(--cyan-soft);
  margin-bottom:16px;
}
.feature-icon svg{ width:19px; height:19px; }
.feature h3{ font-size:1rem; margin-bottom:8px; }
.feature p{ font-size:.88rem; line-height:1.6; }

/* Arsenal cards use a full illustration instead of the small icon —
   same edge-to-edge media treatment as the risk/step cards, so the
   whole grid reads as one coherent visual language. */
.feature--media{
  padding:0 24px 28px;
  overflow:hidden;
}
.feature-media{
  display:block;
  position:relative;
  margin:0 -24px 20px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid rgba(240,178,63,.16);
}
.feature-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,18,23,.85) 100%);
}
.feature-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease);
}
.feature--media:hover .feature-media img{ transform:scale(1.045); }

/* ============================================================
   Compare table
   ============================================================ */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  margin-bottom:36px;
  background:rgba(5,8,13,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.compare-table{
  width:100%; border-collapse:collapse; min-width:520px;
  font-size:.9rem;
}
.compare-table thead th{
  text-align:left;
  padding:16px 22px;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text-hi);
  background:rgba(95,212,255,.08);
  border-bottom:1px solid var(--line);
}
.compare-table thead th:first-child{ background:transparent; }
.compare-table tbody th{
  text-align:left;
  padding:16px 22px;
  font-weight:500;
  color:var(--text-mid);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.compare-table td{
  padding:16px 22px;
  border-bottom:1px solid var(--line);
}
.compare-table tr:last-child th, .compare-table tr:last-child td{ border-bottom:none; }
.cell-bad{ color:var(--danger); text-shadow:0 1px 8px rgba(3,6,10,.7); }
.cell-good{ color:var(--ok); font-weight:600; text-shadow:0 1px 8px rgba(3,6,10,.7); }

.cert-badge{
  display:flex; align-items:center; gap:16px;
  padding:20px 24px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:rgba(6,10,8,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.cert-icon{ width:34px; height:34px; color:var(--gold); flex:none; }
.cert-badge p{ font-size:.88rem; color:var(--text-mid); line-height:1.5; text-shadow:var(--shadow-txt); }
.cert-badge strong{ color:var(--gold-soft); }

/* ============================================================
   Founder block — a quote-led note rather than a stock "about
   us" card. A monogram avatar (no fabricated photo) sits beside
   the story, with a thin gold rule under the name for a signed,
   personal feel.
   ============================================================ */
.founder-block{
  display:flex; gap:34px;
  align-items:flex-start;
  max-width:800px;
  margin:44px auto 0;
  padding:38px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(150deg, rgba(240,178,63,.05), transparent 55%),
    rgba(10,16,25,.55);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.founder-avatar{
  flex:none;
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  color:var(--bg-void);
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:0 0 0 1px rgba(240,178,63,.3), 0 8px 24px rgba(240,178,63,.2);
}
.founder-quote{
  font-family:var(--font-display);
  font-size:1.06rem;
  color:var(--text-hi);
  line-height:1.7;
  margin-bottom:16px;
}
.founder-copy p{ font-size:.92rem; color:var(--text-mid); line-height:1.75; margin-bottom:16px; }
.founder-name{
  font-size:.92rem !important;
  color:var(--text-hi) !important;
  font-weight:600;
  padding-top:14px;
  border-top:1px solid rgba(240,178,63,.22);
  margin-bottom:0 !important;
}
.founder-name span{
  display:block;
  font-weight:400;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--gold-soft);
  margin-top:4px;
}
@media (max-width:640px){
  .founder-block{ flex-direction:column; padding:28px 24px; gap:18px; }
}

/* ============================================================
   FAQ accordion — native <details>/<summary>, styled to match.
   No JS required, so it can never fight the existing scripts.
   ============================================================ */
.faq-list{
  max-width:760px;
  margin:34px auto 0;
  display:flex; flex-direction:column; gap:10px;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(10,16,25,.58);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow:hidden;
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .25s;
}
.faq-item:hover{ border-color:rgba(240,178,63,.3); }
.faq-item[open]{ border-color:rgba(240,178,63,.35); }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:16px 22px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  color:var(--text-hi);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-toggle{
  flex:none;
  position:relative;
  width:18px; height:18px;
}
.faq-toggle::before, .faq-toggle::after{
  content:'';
  position:absolute; top:50%; left:50%;
  background:var(--gold);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-toggle::before{ width:12px; height:2px; }
.faq-toggle::after{ width:2px; height:12px; }
.faq-item[open] .faq-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item p{
  padding:0 22px 18px;
  font-size:.87rem;
  line-height:1.62;
  color:var(--text-mid);
}

/* ============================================================
   Fit grid
   ============================================================ */
.fit-grid{ gap:24px; }
.fit-card{
  padding:32px 28px;
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.fit-card--yes{ background:rgba(55,214,138,.05); border-color:rgba(55,214,138,.25); }
.fit-card--no{ background:rgba(255,91,106,.05); border-color:rgba(255,91,106,.22); }
.fit-card h3{ font-size:1.05rem; margin-bottom:18px; }
.fit-card--yes h3{ color:var(--ok); }
.fit-card--no h3{ color:var(--danger); }
.fit-card li{
  position:relative;
  padding-left:24px;
  margin-bottom:12px;
  font-size:.92rem;
  line-height:1.55;
  color:var(--text-mid);
}
.fit-card li::before{
  position:absolute; left:0; top:1px;
  font-family:var(--font-mono);
  font-size:.8rem;
}
.fit-card--yes li::before{ content:'✓'; color:var(--ok); }
.fit-card--no li::before{ content:'×'; color:var(--danger); }

/* ============================================================
   CTA final
   ============================================================ */
.section-cta{
  text-align:center;
  padding:130px 0;
}
.section-cta::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(78% 82% at 50% 32%, rgba(5,8,13,.14), rgba(5,8,13,.4) 74%),
    linear-gradient(180deg, var(--bg-void) 0%, transparent 26%, transparent 74%, var(--bg-void) 100%);
}
.cta-final-content .eyebrow{ justify-content:center; }
.cta-final-content .section-title, .cta-final-content .section-lead{
  margin-left:auto; margin-right:auto;
}
.cta-final-content .hero-actions{ margin-top:8px; }

/* ============================================================
   Footer
   ============================================================ */
.footer{
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  padding:36px 0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
}
.brand-footer{ color:var(--text-hi); }
.footer-copy{ font-size:.78rem; color:var(--text-dim); }
.footer-legal{
  flex-basis:100%;
  order:5;
  font-size:.74rem;
  color:var(--text-hi);
  line-height:1.75;
  max-width:640px;
  margin-top:6px;
  padding:.7em 1em;
  border-radius:10px;
  background:
    linear-gradient(120deg, rgba(240,178,63,.14), rgba(255,255,255,.05) 45%, rgba(170,178,189,.08) 75%, rgba(240,178,63,.14)),
    linear-gradient(120deg, rgba(6,7,9,.5), rgba(6,7,9,.34));
  background-size:240% 240%, 100% 100%;
  animation:holoShift 15s ease-in-out infinite;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  box-shadow:inset 0 1px 0 rgba(255,212,121,.22);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.footer-links{ display:flex; gap:20px; }
.footer-links a{ font-size:.8rem; color:var(--text-dim); }
.footer-links a:hover{ color:var(--gold-soft); }
.footer-email{
  color:var(--gold-soft) !important;
  font-weight:600;
  text-shadow:0 0 12px rgba(240,178,63,.45);
}
.footer-email:hover{ color:var(--gold) !important; }

@media (max-width:640px){
  .footer-inner{ flex-direction:column; text-align:center; }
}

/* ============================================================
   WhatsApp FAB
   ============================================================ */
.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; z-index:55;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#06280f;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6);
  transition:transform .25s var(--ease);
}
.whatsapp-fab svg{ width:27px; height:27px; }
.whatsapp-fab:hover{ transform:translateY(-3px) scale(1.04); }

/* ============================================================
   Compare table — mobile: stack each feature as a small card
   instead of forcing horizontal scroll, so every row reads in
   full width with nothing cut off.
   ============================================================ */
@media (max-width:640px){
  .table-wrap{ overflow-x:visible; }
  .compare-table{ min-width:0; width:100%; }
  .compare-table thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td{
    display:block; width:100%;
  }
  .compare-table tbody tr{
    padding:18px 20px;
    border-bottom:1px solid var(--line);
  }
  .compare-table tr:last-child{ border-bottom:none; }
  .compare-table tbody th{
    padding:0 0 12px;
    border:none;
    white-space:normal;
    font-family:var(--font-display);
    font-weight:600;
    font-size:1rem;
    color:var(--text-hi);
  }
  .compare-table td{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:14px;
    padding:8px 0;
    border:none;
    font-size:.9rem;
    text-align:right;
  }
  .compare-table td + td{ border-top:1px dashed var(--line); }
  .compare-table td::before{
    content:attr(data-label);
    font-family:var(--font-mono);
    font-size:.66rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-dim);
    text-align:left;
    flex:none;
  }
}

/* ============================================================
   Mobile: flatten parallax to static, per brief
   ============================================================ */
@media (max-width:720px){
  .parallax-layer{
    transform:none !important;
    inset:0;
    background-position:center;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 130px, black calc(100% - 130px), transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, black 130px, black calc(100% - 130px), transparent 100%);
  }
  .section{ padding:76px 0; }
  .section-cta{ padding:90px 0; }

  /* The radial veils read fine mid-section but stay too bright right at
     the very top/bottom edge on short mobile viewports — exactly where
     one section meets the next — which is what reads as a visible seam.
     Add a full-width linear fade at those edges so every section, photo
     or not, always resolves to the same near-black tone at its border. */
  .section-dark::before{
    background:
      radial-gradient(160% 120% at 50% 0%, rgba(95,212,255,.05), transparent 55%),
      radial-gradient(120% 90% at 50% 45%, rgba(5,8,13,.16), rgba(5,8,13,.42) 75%),
      linear-gradient(180deg, rgba(5,8,13,.72) 0%, transparent 20%, transparent 80%, rgba(5,8,13,.72) 100%);
  }
  .section-cta::before{
    background:
      radial-gradient(110% 100% at 50% 32%, rgba(5,8,13,.16), rgba(5,8,13,.44) 74%),
      linear-gradient(180deg, var(--bg-void) 0%, transparent 22%, transparent 78%, var(--bg-void) 100%);
  }
  .hero-veil{
    background:
      radial-gradient(90% 70% at 50% 32%, rgba(5,8,13,.2), rgba(5,8,13,.48) 70%),
      linear-gradient(180deg, rgba(5,8,13,.5) 0%, transparent 16%, transparent 78%, var(--bg-void) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .parallax-layer{ transform:none !important; }
  .card, .feature, .step, .fit-card{ transition:none; opacity:1; transform:none; }
}