/* ─────────────────────────────────────────────────────────────────────────────
   Certus Prospect — landing.css  v2
   Background: #020c45  |  Nav: sticky pill, white glass, fits content
   ───────────────────────────────────────────────────────────────────────── */

/* ── TOKENS ── */
:root {
  --bg:           #09102e;
  --royal:        #3d52c4;
  --royal-dim:    rgba(61,82,196,0.28);
  --teal:         #2f7e79;
  --teal-light:   #7ec8c4;
  --white:        #ffffff;

  /* glass whites */
  --g-bg:         rgba(255,255,255,0.82);
  --g-border:     rgba(255,255,255,0.92);
  --g-blur:       blur(36px) saturate(160%);

  /* text on white nav */
  --nav-ink:      #09102e;
  --nav-ink-soft: rgba(9,16,46,0.66);

  /* cards */
  --card-bg:      #f7f8ff;
  --card-text:    #000000;
  --card-muted:   #37404d;

  /* chat dark */
  --chat-bg:      rgba(4,9,36,0.96);

  /* spacing */
  --pg:           clamp(0.9rem,2.2vw,1.6rem);
  --max:          1160px;
  --nh:           54px;
  --nt:           1rem;

  /* radius */
  --r-pill:       999px;
  --r-lg:         28px;
  --r-md:         18px;
  --r-sm:         12px;

  /* shadows — single --sh-blue, using the new muted value */
  --sh-blue:      0 16px 52px rgba(61,82,196,0.32);
  --sh-card:      0 16px 48px rgba(0,0,0,0.22);
  --sh-glass:     0 22px 72px rgba(0,0,0,0.32);
  --sh-nav:
    0 12px 48px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,0.4);

  /* typography */
  --display:      'Playfair Display', Georgia, serif;
  --body:         'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  color:#fff;
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { border:0; cursor:pointer; }
:focus-visible { outline:3px solid rgba(36,87,255,0.55); outline-offset:3px; }

/* ── BACKGROUND TEXTURE — subtle white lines over deep navy ── */
/* ── WATER FLOW BACKGROUND ── */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(61,82,196,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(47,126,121,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 55% 10%, rgba(100,80,200,0.13) 0%, transparent 50%);
  animation: flow-a 12s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(ellipse 70% 70% at 70% 60%, rgba(61,82,196,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 15% 25%, rgba(47,126,121,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 75% at 85% 40%, rgba(100,80,200,0.12) 0%, transparent 50%);
  animation: flow-b 15s ease-in-out infinite alternate-reverse;
}

@keyframes flow-a {
  0%   { opacity: 1;    transform: scale(1)    translateY(0px);  }
  50%  { opacity: 0.55; transform: scale(1.08) translateY(-18px);}
  100% { opacity: 1;    transform: scale(0.96) translateY(12px); }
}

@keyframes flow-b {
  0%   { opacity: 0.7;  transform: scale(1.05) translateY(10px); }
  50%  { opacity: 1;    transform: scale(0.97) translateY(-12px);}
  100% { opacity: 0.6;  transform: scale(1.1)  translateY(6px);  }
}

#particle-net {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* every section sits above texture */
main, header, footer, .help-button, .chat-widget, #mirror-overlay { position:relative; z-index:1; }

/* ── LAYOUT ── */
.container { width:min(100%, var(--max)); margin-inline:auto; }
.section-pad { padding:clamp(5rem,9vw,8rem) var(--pg); }

/* ─────────────────────────────────────────────────────────────────────────────
   NAVBAR — sticky, centered pill, fits content
   ───────────────────────────────────────────────────────────────────────── */
.site-header {
  position:sticky;
  top:var(--nt);
  z-index:1000;
  width:100%;
  padding-inline:var(--pg);
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.navbar {
  /* width auto — shrinks to fit content */
  width:max-content;
  max-width:calc(100vw - (var(--pg) * 2));
  min-height:var(--nh);
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.38rem 0.48rem;
  border-radius:var(--r-pill);
  border:1px solid var(--g-border);
  background:var(--g-bg);
  backdrop-filter:var(--g-blur);
  -webkit-backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-nav);
  pointer-events:auto;
  /* discrete glass sheen — single white highlight stripe */
  background-image:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.06) 55%,
      rgba(255,255,255,0.22) 100%
    );
  background-color:var(--g-bg);
}

/* brand / favicon */
.navbar-brand {
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(2,12,69,0.1);
  margin-right:0.2rem;
}
.navbar-brand img {
  width:24px;
  height:24px;
  object-fit:contain;
}

/* nav links */
.navbar-links {
  display:inline-flex;
  align-items:center;
  gap:0.1rem;
}
.navbar-links a {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-inline:clamp(0.65rem,1vw,0.95rem);
  border-radius:var(--r-pill);
  color:var(--nav-ink-soft);
  font-size:0.9rem;
  font-weight:700;
  white-space:nowrap;
  transition:color 160ms ease, background 160ms ease;
}
.navbar-links a:hover,
.navbar-links a:focus-visible {
  color:var(--nav-ink);
  background:rgba(2,12,69,0.07);
}

/* LOGIN BUTTON inside nav — lock icon + text */
.nav-login-btn {
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:0.42rem;
  min-height:38px;
  padding-inline:1.05rem;
  border-radius:var(--r-pill);
  background:var(--royal);
  color:#fff;
  font-size:0.88rem;
  font-weight:800;
  white-space:nowrap;
  box-shadow:var(--sh-blue);
  transition:background 160ms ease, transform 160ms ease;
  margin-left:0.25rem;
}
.nav-login-btn:hover { background:#1a46e0; transform:scale(1.04); }

/* lock SVG icon inside login btn */
.nav-login-btn svg { flex-shrink:0; }

/* ripple */
.nav-login-btn .ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  transform:scale(0);
  animation:ripple 0.52s linear;
  pointer-events:none;
}
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* hamburger (mobile only) */
.navbar-toggle {
  display:none;
  width:38px;
  height:38px;
  flex:0 0 auto;
  position:relative;
  border-radius:50%;
  background:rgba(2,12,69,0.07);
}
.navbar-toggle span {
  position:absolute;
  left:10px;
  right:10px;
  height:2px;
  border-radius:var(--r-pill);
  background:var(--nav-ink);
}
.navbar-toggle span:first-child { top:13px; }
.navbar-toggle span:last-child  { bottom:13px; }

/* ── MIRROR OVERLAY ── */
#mirror-overlay {
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  background:var(--bg);
  transition:opacity 0.45s cubic-bezier(.4,0,.2,1);
}
#mirror-overlay.show { opacity:1; pointer-events:all; }

/* ─────────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  min-height:100svh;
  display:grid;
  align-items:center;
  padding-top:clamp(6rem,10vw,8rem);
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,0.9fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  width:fit-content;
  margin-bottom:1.5rem;
  padding:0.35rem 1rem;
  border:1px solid rgba(126,200,196,0.3);
  border-radius:var(--r-pill);
  background:rgba(126,200,196,0.12);
  color:rgba(255,255,255,0.9);
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.hero-badge::before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal-light);
}
.hero h1 {
  max-width:700px;
  margin-bottom:1.2rem;
  font-family:var(--display);
  font-size:clamp(2.2rem,4.8vw,4.2rem);
  line-height:1.1;
  letter-spacing:-0.03em;
}
.hero h1 em { color:#d7e7e5; font-style:italic; }
.hero-sub {
  max-width:600px;
  margin-bottom:2rem;
  color:rgba(255,255,255,0.74);
  font-size:1.05rem;
}
.hero-cta-group { display:flex; flex-wrap:wrap; gap:0.9rem; margin-bottom:2.2rem; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding-inline:1.55rem;
  border-radius:var(--r-pill);
  font-weight:800;
  transition:transform 160ms ease, background 160ms ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:var(--royal); box-shadow:var(--sh-blue); }
.btn-secondary {
  color:#fff;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.28);
}
.hero-trust { display:flex; flex-wrap:wrap; gap:0.9rem 1.6rem; }
.trust-item { display:flex; align-items:center; gap:0.48rem; color:rgba(255,255,255,0.7); font-size:0.85rem; }
.check-icon { color:var(--teal-light); font-weight:900; }

/* hero visual */
.hero-visual { display:grid; gap:1rem; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.glass-card {
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(145deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:var(--sh-glass);
}
.stat-card { padding:1.2rem; }
.stat-num { font-family:var(--display); font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:0.4rem; }
.stat-label { color:rgba(255,255,255,0.68); font-size:0.83rem; }

.activity-card { padding:1.25rem; }
.activity-card h2 { margin-bottom:0.9rem; color:rgba(255,255,255,0.85); font-size:0.98rem; }
.mini-list { display:grid; gap:0.7rem; }
.mini-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.85rem;
  padding:0.7rem 0.9rem;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,0.08);
}
.mini-item strong { display:block; color:#fff; font-size:0.87rem; }
.mini-item small  { color:rgba(255,255,255,0.52); font-size:0.74rem; }
.mini-pill {
  flex-shrink:0;
  padding:0.24rem 0.62rem;
  border-radius:var(--r-pill);
  color:var(--teal-light);
  background:rgba(126,200,196,0.16);
  font-size:0.71rem;
  font-weight:800;
}

/* ── LOGO STRIP ── */
.logo-strip {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  border-left: none;
  border-right: none;
  background: rgba(255,255,255,0.93);
  box-shadow: var(--sh-card);
}
.marquee-track {
  display:flex;
  width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee-track span {
  padding:1.2rem 2.4rem;
  color:rgba(2,12,69,0.56);
  font-size:0.87rem;
  font-weight:800;
  white-space:nowrap;
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SECTION TYPOGRAPHY ── */
.section-header { max-width:700px; margin-bottom:3rem; }
.section-header.centered { margin-inline:auto; text-align:center; }
.section-header.centered .section-sub { margin-inline:auto; }
.section-label {
  margin-bottom:0.9rem;
  color:var(--teal-light);
  font-size:0.74rem;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.section-title {
  margin-bottom:1rem;
  color:#fff;
  font-family:var(--display);
  font-size:clamp(1.85rem,3.1vw,2.75rem);
  line-height:1.18;
  letter-spacing:-0.025em;
}
.section-sub { max-width:610px; color:rgba(255,255,255,0.66); font-size:1.03rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   BENEFIT CARDS
   ───────────────────────────────────────────────────────────────────────── */
.benefits-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.solid-card {
  border-radius:var(--r-lg);
  background:linear-gradient(145deg,rgba(255, 255, 255, 0.815),rgba(255, 255, 255, 0.842));
  color:var(--card-text);
  box-shadow:var(--sh-glass);
  backdrop-filter:blur(3px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(255,255,255,0.36);
}

.benefit-card {
  padding:1.65rem;
  transition:transform 160ms ease;
}
.benefit-card:hover { transform:translateY(-4px); }
.card-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  border-radius:14px;
  color:#fff;
  background:var(--royal);
  font-weight:900;
}
.benefit-card h3 { margin-bottom:0.5rem; font-size:1rem; }
.benefit-card p  { color:var(--card-muted); font-size:0.93rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────────────────────────────────────── */
.how-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,0.95fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.step-list { display:grid; gap:1rem; }
.step-card {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:1rem;
  padding:1rem;
  border-radius:var(--r-md);
  background:linear-gradient(145deg,rgba(255, 255, 255, 0.815),rgba(255, 255, 255, 0.842));
  color:var(--card-text);
  box-shadow:var(--sh-card);
}
.step-card span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--royal);
  font-weight:900;
}
.step-card h3 { margin-bottom:0.3rem; font-size:0.95rem; }
.step-card p  { color:var(--card-muted); font-size:0.88rem; }

.dashboard-preview { padding:2rem; }
.dashboard-label {
  margin-bottom:1rem;
  color:rgba(255,255,255,0.44);
  font-size:0.73rem;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.dashboard-list { display:grid; gap:0.72rem; }
.dashboard-list article {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,0.08);
}
.dashboard-list strong,
.dashboard-list small { display:block; }
.dashboard-list small { color:rgba(255,255,255,0.46); font-size:0.75rem; }
.dashboard-list span {
  padding:0.24rem 0.62rem;
  border-radius:var(--r-pill);
  color:var(--teal-light);
  background:rgba(126,200,196,0.15);
  font-size:0.73rem;
  font-weight:900;
}
.dashboard-metrics {
  display:flex;
  gap:1.5rem;
  margin-top:1.4rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,0.1);
}
.dashboard-metrics div { display:grid; gap:0.14rem; text-align:center; }
.dashboard-metrics strong { font-family:var(--display); font-size:1.5rem; }
.dashboard-metrics span  { color:rgba(255,255,255,0.46); font-size:0.73rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   DARK FEATURE CARDS
   ───────────────────────────────────────────────────────────────────────── */
.dark-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
}
.dark-card {
  display:flex;
  gap:1rem;
  padding:1.65rem;
  border-radius:var(--r-lg);
  border:1px solid rgba(255, 255, 255, 0.562);
  background:linear-gradient(145deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--sh-glass);
  transition:background 160ms ease;
}
.dark-card:hover { background:linear-gradient(145deg,rgba(255, 255, 255, 0.185),rgba(255, 255, 255, 0.493)); }
.dark-card-icon {
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:rgba(255, 255, 255, 0.397);
  font-weight:900;
}
.dark-card h3 { margin-bottom:0.4rem; font-size:1rem; }
.dark-card p  { color:rgba(255,255,255,0.6); font-size:0.91rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   PRICING
   ───────────────────────────────────────────────────────────────────────── */
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:stretch;
}
.plan-card { position:relative; padding:2rem; overflow:hidden; }

/* ── All cards: same dark glass base ── */
.plan-card {
  background:linear-gradient(145deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  color:#fff;
}

/* ── Featured: brighter border, slightly more presence ── */
.plan-card.featured {
  background:linear-gradient(145deg,rgba(61,82,196,0.22),rgba(9,16,46,0.6));
  border:1px solid rgba(61,82,196,0.55);
}

/* ── Badges ── */
.plan-badge {
  display:inline-flex;
  margin-bottom:1rem;
  padding:0.24rem 0.8rem;
  border-radius:var(--r-pill);
  color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  font-size:0.71rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.plan-card.featured .plan-badge {
  color:rgba(180,195,255,0.9);
  background:rgba(61,82,196,0.2);
  border-color:rgba(61,82,196,0.4);
}

/* ── Price ── */
.plan-price { margin-bottom:1.4rem; }
.plan-price strong { font-family:var(--display); font-size:1.95rem; color:#fff; }
.plan-price span { color:rgba(255,255,255,0.4); font-size:0.81rem; }

/* ── List ── */
.plan-card ul {
  display:grid;
  gap:0.65rem;
  margin-bottom:1.8rem;
  list-style:none;
}
.plan-card li { color:rgba(255,255,255,0.72); font-size:0.93rem; }
.plan-card li::before { content:'✓'; margin-right:0.55rem; color:rgba(255,255,255,0.3); font-weight:900; }
.plan-card.featured li { color:rgba(255,255,255,0.82); }
.plan-card.featured li::before { color:rgba(130,155,255,0.7); }

/* ── Buttons ── */
.plan-cta {
  display:block;
  padding:0.82rem 1rem;
  border-radius:var(--r-pill);
  text-align:center;
  font-weight:700;
  letter-spacing:0.04em;
  transition:background 220ms ease, color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Starter: restrained ghost */
.plan-cta.outline {
  color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
}
.plan-cta.outline:hover {
  color:#fff;
  border-color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.07);
}

/* Professional: clean royal blue — confident, not loud */
.plan-cta.solid {
  color:#fff;
  background:var(--royal);
  border:1px solid rgba(100,120,230,0.5);
  box-shadow:0 6px 24px rgba(61,82,196,0.38);
}
.plan-cta.solid:hover {
  background:#4a62d8;
  box-shadow:0 10px 32px rgba(61,82,196,0.52);
}

/* ── Disabled / sold-out ── */
.plan-card.disabled {
  background:linear-gradient(145deg,rgba(40,10,10,0.7),rgba(20,5,5,0.85));
  border:1px solid rgba(180,60,60,0.2);
  pointer-events:none;
  user-select:none;
}
.plan-card.disabled .plan-badge { color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }
.plan-card.disabled .plan-price strong { color:rgba(255,255,255,0.3); }
.plan-card.disabled .plan-price span  { color:rgba(255,255,255,0.18); }
.plan-card.disabled li { color:rgba(255,255,255,0.22); }
.plan-card.disabled li::before { color:rgba(255,255,255,0.15); }
.plan-card.disabled .plan-cta {
  color:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.08);
  background:transparent;
  cursor:not-allowed;
}

.sold-out {
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:rgba(220,180,180,0.7);
  background:rgba(40,5,5,0.45);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.78rem;
  border-radius:var(--r-lg);
  backdrop-filter:blur(3px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────────────────── */
.slim-container { max-width:740px; }
.faq-list { display:grid; gap:0.9rem; }
.faq-item { overflow:hidden; }
.faq-q {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.25rem;
  background:transparent;
  color:var(--card-text);
  text-align:left;
  font-weight:900;
}
.faq-icon {
  width:28px;
  height:28px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--royal);
  font-size:1.1rem;
  font-weight:900;
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-icon { 
  transform:rotate(45deg);
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
 }
.faq-a {
  display: none;
  padding: 0 1.25rem 1.2rem;
  color: var(--card-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}
.faq-item.open .faq-a {
  display: block;
  animation: faq-open 520ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────────────────────────────────── */
.contact-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,0.95fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.contact-copy .section-sub { margin-bottom:1.6rem; }
.contact-items { display:grid; gap:0.85rem; }
.contact-items a {
  width:fit-content;
  padding:0.62rem 1rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.76);
  transition:background 160ms ease;
}
.how-copy .section-sub {
  margin-bottom: 2rem;
}
.contact-items a:hover { background:rgba(255,255,255,0.16); }

.contact-form { display:grid; gap:1rem; padding:2rem; }
.contact-form h3 { font-family:var(--display); font-size:1.3rem; }
.contact-form label {
  display:grid;
  gap:0.38rem;
  color:rgba(255,255,255,0.6);
  font-size:0.83rem;
  font-weight:700;
}
.contact-form input,
.contact-form textarea {
  width:100%;
  min-height:48px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--r-sm);
  outline:none;
  background:rgba(255,255,255,0.07);
  color:#fff;
  padding:0.72rem 0.9rem;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.contact-form textarea { min-height:118px; resize:vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color:rgba(36,87,255,0.72);
  box-shadow:0 0 0 4px rgba(36,87,255,0.14);
}
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-feedback { display:none; padding:0.72rem 1rem; border-radius:var(--r-sm); font-size:0.9rem; }
.form-submit { width:fit-content; }

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.footer {
  padding:4rem var(--pg) 2.5rem;
  border-top:1px solid rgba(255,255,255,0.1);
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:3rem;
  margin-bottom:2.5rem;
}
.footer-brand {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  margin-bottom:0.8rem;
  font-family:var(--display);
  font-size:1.12rem;
  font-weight:800;
}
.footer-brand img { width:30px; height:30px; border-radius:8px; }
.footer p,
.footer a { color:rgba(255,255,255,0.56); font-size:0.89rem; }
.footer h3 {
  margin-bottom:0.9rem;
  color:rgba(255,255,255,0.56);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.footer nav { display:grid; align-content:start; gap:0.5rem; }
.footer a:hover { color:#fff; }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HELP BUTTON — fixed bottom-right, royal blue circle
   ───────────────────────────────────────────────────────────────────────── */
.help-button {
  position:fixed;
  right:max(var(--pg),1.2rem);
  bottom:max(var(--pg),1.2rem);
  z-index:1100;
  width:62px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--royal);
  color:#fff;
  box-shadow:var(--sh-blue);
  font-size:1.55rem;
  font-weight:900;
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.help-button:hover {
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 20px 60px rgba(36,87,255,0.52);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHAT WIDGET — opens upward from bottom-right, dark glass
   ───────────────────────────────────────────────────────────────────────── */
.chat-widget {
  position:fixed;
  right:max(var(--pg),1.2rem);
  bottom:calc(max(var(--pg),1.2rem) + 76px);
  z-index:1099;
  width:min(380px, calc(100vw - 2.4rem));
  min-height:480px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.14);
  background:var(--chat-bg);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 32px 100px rgba(0,0,0,0.55);
  /* closed state */
  opacity:0;
  transform:translateY(40px) scale(0.93);
  transform-origin:bottom right;
  pointer-events:none;
  transition:
    opacity 250ms ease,
    transform 380ms cubic-bezier(.19,1,.22,1);
}
.chat-widget.is-open {
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.chat-header {
  min-height:72px;
  display:grid;
  grid-template-columns:1fr 36px;
  align-items:center;
  gap:0.85rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.chat-header strong { display:block; font-size:1rem; }
.chat-header span   { display:block; color:rgba(255,255,255,0.48); font-size:0.8rem; }
.chat-header button {
  width:36px;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  position:relative;
}
.chat-header button::before,
.chat-header button::after {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  top:17px;
  height:2px;
  border-radius:var(--r-pill);
  background:#fff;
}
.chat-header button::before { transform:rotate(45deg);  }
.chat-header button::after  { transform:rotate(-45deg); }

.chat-body {
  display:grid;
  align-content:end;
  gap:0.85rem;
  padding:1rem;
  overflow-y:auto;
}
.chat-message {
  width:78%;
  padding:0.8rem;
  border-radius:18px;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.8);
  font-size:0.9rem;
  line-height:1.5;
}
.chat-message.bot  { justify-self:start; }
.chat-message.user { justify-self:end; background:var(--royal-dim); }
.chat-message.small { width:60%; }

.chat-input-area {
  display:grid;
  grid-template-columns:1fr 46px;
  gap:0.7rem;
  padding:1rem;
  background:rgba(255,255,255,0.04);
  border-top:1px solid rgba(255,255,255,0.09);
}
.chat-input-area input {
  width:100%;
  min-height:44px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--r-sm);
  outline:none;
  background:rgba(255,255,255,0.07);
  color:#fff;
  padding:0.6rem 0.85rem;
}
.chat-input-area input:focus {
  border-color:rgba(36,87,255,0.7);
  box-shadow:0 0 0 3px rgba(36,87,255,0.14);
}
.chat-input-area button {
  border-radius:50%;
  background:var(--royal);
  color:#fff;
  display:grid;
  place-items:center;
}

/* ── SCROLL FADE ── */
.fade-up {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.fade-up.visible { opacity:1; transform:none; }

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1020px) {
  .hero-grid,
  .how-grid,
  .contact-grid    { grid-template-columns:1fr; }
  .hero-visual,
  .dashboard-preview { max-width:520px; }
  .benefits-grid,
  .pricing-grid    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid     { grid-template-columns:1fr 1fr; }
}

@media (max-width:760px) {
  .navbar-toggle { display:inline-flex; }

  /* links drop as positioned menu */
  .navbar-links {
    position:absolute;
    top:calc(100% + 0.55rem);
    right:0;
    width:max-content;
    min-width:200px;
    display:grid;
    gap:0.2rem;
    padding:0.5rem;
    border:1px solid rgba(255,255,255,0.9);
    border-radius:22px;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(32px) saturate(200%);
    -webkit-backdrop-filter:blur(32px) saturate(200%);
    box-shadow:0 16px 52px rgba(0,0,0,0.26);
    opacity:0;
    transform:translateY(-8px) scale(0.98);
    pointer-events:none;
    transition:opacity 160ms ease, transform 160ms ease;
  }
  .navbar-links.is-open { opacity:1; transform:none; pointer-events:auto; }
  .navbar-links a  { justify-content:flex-start; min-height:42px; padding-inline:1rem; }

  /* hide login btn from nav on very small — they have the mobile menu */
  .nav-login-btn { display:none; }

  .hero { padding-top:6rem; }
  .hero-visual { display:none; }

  .benefits-grid,
  .pricing-grid,
  .dark-cards,
  .stat-grid,
  .footer-grid   { grid-template-columns:1fr; }

  .dashboard-metrics { justify-content:space-between; }
  .plan-card.featured { transform:none; }
  .chat-widget { min-height:440px; }
  .help-button { width:56px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
  .fade-up { opacity:1; transform:none; }
}

/* CERTUS_TWO_PLAN_LANDING_START */
.pricing-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing-grid--two .plan-card {
    padding: 2rem;
}

.pricing-grid--two .plan-card ul {
    display: grid;
    gap: .62rem;
    margin: 1.1rem 0 1.4rem;
}

.feature-lock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    opacity: .76;
}

.feature-lock::before {
    content: "🔒";
}

.plan-card--professional {
    border-color: rgba(255,255,255,.14);
}

.plan-card--expert {
    transform: translateY(-4px);
}

@media (max-width: 880px) {
    .pricing-grid--two {
        grid-template-columns: 1fr;
    }

    .plan-card--expert {
        transform: none;
    }
}
/* CERTUS_TWO_PLAN_LANDING_END */
/* CERTUS_COMMERCIAL_CLEANUP_PRICING_START */
.pricing-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing-grid--two .plan-card {
    padding: 2rem;
}

.pricing-grid--two .plan-card ul {
    display: grid;
    gap: .62rem;
    margin: 1.1rem 0 1.4rem;
}

.feature-lock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    opacity: .76;
}

.feature-lock::before {
    content: "🔒";
}

.plan-card--professional {
    border-color: rgba(255,255,255,.14);
}

.plan-card--expert {
    transform: translateY(-4px);
}

@media (max-width: 880px) {
    .pricing-grid--two {
        grid-template-columns: 1fr;
    }

    .plan-card--expert {
        transform: none;
    }
}
/* CERTUS_COMMERCIAL_CLEANUP_PRICING_END */
/* CERTUS_TRIAL_PAGE_CLEANUP_START */
.trial-hero {
    min-height: 100vh;
    display: grid;
    align-items: center;
}

.trial-proof-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.2rem;
}

.trial-proof-grid span {
    padding: .65rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.86);
    font-weight: 700;
    font-size: .85rem;
}

.trial-form {
    display: grid;
    gap: .9rem;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.trial-form h2 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.trial-form p {
    margin: 0;
    color: rgba(255,255,255,.72);
}

.trial-form label {
    display: grid;
    gap: .4rem;
    color: rgba(255,255,255,.82);
    font-weight: 700;
    font-size: .86rem;
}

.trial-form input,
.trial-form select,
.trial-form textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: .8rem .95rem;
    font: inherit;
}

.trial-form textarea {
    resize: vertical;
}

.trial-form input:focus,
.trial-form select:focus,
.trial-form textarea:focus {
    outline: none;
    border-color: rgba(128,162,255,.62);
    box-shadow: 0 0 0 4px rgba(36,87,255,.18);
}

.trial-form .wide {
    grid-column: 1 / -1;
}

.trial-hp {
    position: absolute;
    left: -9999px;
}

.trial-form-status {
    min-height: 1.2rem;
    font-weight: 800;
}

.trial-form-status.is-success {
    color: #a3e6d5;
}

@media (min-width: 780px) {
    .trial-form {
        grid-template-columns: 1fr 1fr;
    }

    .trial-form h2,
    .trial-form > p,
    .trial-form button,
    .trial-form-status {
        grid-column: 1 / -1;
    }
}
/* CERTUS_TRIAL_PAGE_CLEANUP_END */
/* CERTUS_NO_TRIAL_PRICE_FIX_START */
.pricing-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing-grid--two .plan-card {
    padding: 2rem;
}

.pricing-grid--two .plan-card ul {
    display: grid;
    gap: .62rem;
    margin: 1.1rem 0 1.4rem;
}

.plan-card--professional {
    border-color: rgba(255,255,255,.14);
}

.plan-card--expert {
    transform: translateY(-4px);
}

@media (max-width: 880px) {
    .pricing-grid--two {
        grid-template-columns: 1fr;
    }

    .plan-card--expert {
        transform: none;
    }
}
/* CERTUS_NO_TRIAL_PRICE_FIX_END */
/* CERTUS_EXPERT_PREFERRED_BADGE_START */
.plan-card--expert {
    position: relative;
}

.plan-preferred-badge {
    display: inline-flex;
    width: fit-content;
    margin: -0.15rem 0 0.85rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(163, 230, 213, 0.14);
    border: 1px solid rgba(163, 230, 213, 0.28);
    color: #a3e6d5;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* CERTUS_EXPERT_PREFERRED_BADGE_END */
/* CERTUS_PRO_LAUNCH_DISCOUNT_START */
.plan-discount-badge {
    display: inline-flex;
    width: fit-content;
    margin: 0.15rem 0 0.65rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: rgba(163, 230, 213, 0.14);
    border: 1px solid rgba(163, 230, 213, 0.28);
    color: #a3e6d5;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-price--old {
    opacity: 0.55;
    margin-bottom: 0.15rem !important;
}

.plan-price--old strong {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
/* CERTUS_PRO_LAUNCH_DISCOUNT_END */
/* CERTUS_EXPERT_SAME_LINE_DISCOUNT_START */
.plan-price--discounted,
.plan-choice-price.plan-price--discounted {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.plan-price-old-inline {
    display: inline-flex;
    align-items: center;
    opacity: 0.58;
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.plan-card--expert .plan-price--discounted::before,
.plan-choice-card.is-featured .plan-price--discounted::before {
    content: "Precio lanzamiento";
    display: inline-flex;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    background: rgba(163, 230, 213, 0.14);
    border: 1px solid rgba(163, 230, 213, 0.28);
    color: #a3e6d5;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* CERTUS_EXPERT_SAME_LINE_DISCOUNT_END */