:root{
    --bg-base:#07080c;
    --bg-base-2:#0b0d15;
    --surface: rgba(255,255,255,0.035);
    --surface-strong: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.18);
    --overlay: rgba(255,255,255,.08);
    --overlay-strong: rgba(255,255,255,.12);
    --indigo:#e4e4e7;
    --indigo-deep:#71717a;
    --cyan:#f4f4f5;
    --gold:#a1a1aa;
    --gold-deep:#52525b;
    --text-1:#f4f5fa;
    --text-2:#96a0b5;
    --text-3:#666f85;
    --nequi:#a1a1aa;
    --bancolombia:#d4d4d8;
    --daviplata:#71717a;
    --qr-accent: var(--indigo);
    --on-accent:#0b0c10;
    color-scheme: dark;
  }

  html[data-theme="light"]{
    --bg-base:#fafafa;
    --bg-base-2:#f2f2f3;
    --surface: rgba(0,0,0,0.03);
    --surface-strong: rgba(0,0,0,0.05);
    --border: rgba(0,0,0,0.09);
    --border-strong: rgba(0,0,0,0.16);
    --overlay: rgba(0,0,0,.05);
    --overlay-strong: rgba(0,0,0,.1);
    --indigo:#3f3f46;
    --indigo-deep:#18181b;
    --cyan:#52525b;
    --gold:#52525b;
    --gold-deep:#18181b;
    --text-1:#18181b;
    --text-2:#52525b;
    --text-3:#84848c;
    --nequi:#3f3f46;
    --bancolombia:#52525b;
    --daviplata:#18181b;
    --on-accent:#fafafa;
    color-scheme: light;
  }

  html, body{ transition: background-color .35s ease, color .35s ease; }

  html{ scroll-behavior:smooth; }

  body{
    background-color:var(--bg-base);
    color:var(--text-1);
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    overflow-x:hidden;
  }

  h1,h2,h3,.font-display{ font-family:'Outfit', system-ui, sans-serif; }
  .font-serif-accent{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; }

  section{ scroll-margin-top: 96px; }

  /* ================= BACKGROUND ================= */
  .bg-mesh{
    position:fixed; inset:0; z-index:-30;
    background-image:
      linear-gradient(rgba(228,228,231,.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(228,228,231,.09) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
  }
  .bg-base-fade{
    position:fixed; inset:0; z-index:-29;
    background: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(228,228,231,.14), transparent 60%),
                var(--bg-base-2);
    opacity:.9;
  }
  .orb{ position:absolute; border-radius:9999px; filter: blur(90px); pointer-events:none; }
  @keyframes floatOrb{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(26px,-30px) scale(1.07); }
  }
  @keyframes pulseGlowOrb{ 0%,100%{ opacity:.45; } 50%{ opacity:.8; } }
  .orb-anim{ animation: floatOrb 17s ease-in-out infinite, pulseGlowOrb 7.5s ease-in-out infinite; }

  .particle{
    position:absolute; border-radius:9999px; pointer-events:none;
    animation: particleFloat linear infinite;
  }
  @keyframes particleFloat{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:.7; }
    90%{ opacity:.5; }
    100%{ transform:translateY(-120px) translateX(14px); opacity:0; }
  }

  /* ================= TYPE TREATMENT ================= */
  @keyframes gradientShift{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  .gradient-text{
    background-image: linear-gradient(100deg, var(--indigo), var(--cyan) 45%, var(--gold) 78%, var(--indigo));
    background-size:300% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: gradientShift 10s ease infinite;
  }

  .hero-title{
    color:var(--text-1);
    letter-spacing:-0.025em;
    text-wrap: balance;
  }

  /* ================= THEME TOGGLE ================= */
  .theme-toggle{
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--surface);
    color:var(--text-1); transition: all .25s ease; flex-shrink:0;
  }
  .theme-toggle:hover{ border-color:var(--border-strong); background:var(--surface-strong); }
  .theme-toggle .icon-sun{ display:none; }
  html[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
  html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }

  /* ================= GLASS ================= */
  .glass{ background: var(--surface); border:1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .glass-strong{ background: var(--surface-strong); border:1px solid var(--border-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

  /* ================= BADGE (hero, pulsing gradient ring) ================= */
  .badge-chip{ position:relative; isolation:isolate; }
  .badge-chip::before{
    content:''; position:absolute; inset:0; border-radius:9999px; padding:1.4px;
    background: linear-gradient(120deg, var(--indigo), var(--cyan) 45%, var(--gold) 78%, var(--indigo));
    background-size:300% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: gradientShift 7s ease infinite; pointer-events:none; z-index:0;
  }
  .badge-chip::after{
    content:''; position:absolute; inset:-10px; border-radius:9999px; z-index:-1;
    background: radial-gradient(circle, rgba(228,228,231,.35), transparent 70%);
    filter: blur(12px); animation: pulseSoft 3.4s ease-in-out infinite; pointer-events:none;
  }
  @keyframes pulseSoft{ 0%,100%{ opacity:.5; transform:scale(.94); } 50%{ opacity:.95; transform:scale(1.04); } }

  /* ================= SPOTLIGHT (cursor glow on cards) ================= */
  .spotlight{ position:relative; overflow:hidden; }
  .spotlight::before{
    content:''; position:absolute; inset:0; z-index:0; opacity:0;
    background: radial-gradient(480px circle at var(--mx,50%) var(--my,50%), rgba(228,228,231,.16), transparent 45%);
    transition: opacity .4s ease; pointer-events:none;
  }
  .spotlight:hover::before{ opacity:1; }
  .spotlight > *{ position:relative; z-index:1; }

  /* ================= TILT WRAPPER ================= */
  .tilt-wrap{ perspective:1400px; }
  .tilt-card{ transition: transform .5s cubic-bezier(.16,1,.3,1); transform-style:preserve-3d; will-change:transform; }

  /* ================= BUTTONS ================= */
  .btn-lift{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
  .btn-lift:hover{ transform: translateY(-3px); }
  .btn-primary{ background: linear-gradient(100deg, var(--indigo-deep), var(--indigo) 55%, var(--cyan)); box-shadow: 0 8px 24px -8px rgba(228,228,231,.55); }
  .btn-primary:hover{ box-shadow: 0 16px 36px -10px rgba(228,228,231,.75); }
  .btn-gold{ background: linear-gradient(100deg, var(--gold-deep), var(--gold) 60%, #d4d4d8); box-shadow: 0 8px 24px -8px rgba(161,161,170,.45); }
  .btn-gold:hover{ box-shadow: 0 16px 36px -10px rgba(161,161,170,.65); }

  /* ================= AMOUNTS ================= */
  .amount-btn{ transition: all .2s ease; }
  .amount-btn.active{ background: linear-gradient(100deg, var(--indigo-deep), var(--indigo)); border-color: transparent; color:#fff; box-shadow: 0 8px 20px -6px rgba(228,228,231,.55); }
  .amount-field.active{ border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(228,228,231,.18); }

  .preview-panel{ display:grid; grid-template-rows:0fr; opacity:0; transition: grid-template-rows .45s ease, opacity .35s ease; }
  .preview-panel.open{ grid-template-rows:1fr; opacity:1; }
  .preview-panel > div{ overflow:hidden; }

  /* ================= TABS ================= */
  .tab-btn{ transition: all .25s ease; }
  .tab-btn[aria-selected="true"]{ background: var(--surface-strong); border-color: var(--border-strong); color:#fff; }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; animation: fadeIn .35s ease; }
  @keyframes fadeIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }

  .provider-pill{ transition: all .2s ease; }
  .provider-pill.active{ background: var(--overlay-strong); border-color: var(--border-strong); color:#fff; box-shadow: 0 0 0 1px var(--pill-accent, transparent), 0 8px 18px -8px var(--pill-accent, transparent); }

  /* ================= QR NEON MODULE ================= */
  .qr-neon{ position:relative; border-radius:18px; padding:2px; background: linear-gradient(135deg, var(--qr-accent), transparent 60%, var(--qr-accent)); transition: background .4s ease; }
  .qr-neon-inner{ background:#0a0b11; border-radius:16px; padding:14px; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 1px var(--border) inset; }
  .qr-neon::after{ content:''; position:absolute; inset:-14px; border-radius:26px; z-index:-1; background: var(--qr-accent); opacity:.22; filter: blur(20px); transition: background .4s ease; }
  #qr-box canvas, #qr-box img{ border-radius:10px; display:block; }

  .copy-check{ transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .copy-check.show{ transform: scale(1); }
  .copy-default.hide{ transform: scale(0); }
  .copy-default{ transition: transform .25s cubic-bezier(.34,1.56,.64,1); }

  /* ================= PROGRESS (two-layer) ================= */
  .progress-track{ background: var(--overlay); border:1px solid var(--border); position:relative; }
  .progress-fill{ background: linear-gradient(90deg, var(--indigo), var(--cyan)); width:0%; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
  .progress-preview{ background: repeating-linear-gradient(115deg, rgba(161,161,170,.55) 0 6px, rgba(161,161,170,.25) 6px 12px); width:0%; transition: width .5s cubic-bezier(.16,1,.3,1); }

  /* ================= FUND RINGS ================= */
  .ring-fill{ transition: stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1); }

  /* ================= TIER CARDS ================= */
  .tier-card{ position:relative; }
  .tier-card::before{ content:''; position:absolute; inset:-1px; border-radius:22px; z-index:-1; opacity:.5; background: linear-gradient(160deg, var(--tier-color), transparent 55%); }

  /* ================= FAQ ================= */
  .faq-panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s ease; }
  .faq-item.open .faq-panel{ grid-template-rows:1fr; }
  .faq-panel > div{ overflow:hidden; }
  .faq-item.open .faq-chevron{ transform: rotate(180deg); }
  .faq-chevron{ transition: transform .35s ease; }

  /* ================= DONOR WALL ================= */
  .donor-card{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .donor-card.visible{ opacity:1; transform: translateY(0); }
  .donor-card.fresh{ animation: freshCard .8s ease; }
  @keyframes freshCard{ from{ opacity:0; transform: translateY(-10px) scale(.97); } to{ opacity:1; transform: translateY(0) scale(1); } }

  /* ================= TOAST ================= */
  #toast{ position:fixed; left:50%; bottom:28px; transform: translate(-50%,16px); opacity:0; pointer-events:none; z-index:100; transition: opacity .3s ease, transform .3s ease; }
  #toast.show{ opacity:1; transform: translate(-50%,0); pointer-events:auto; }

  /* ================= NAV ================= */
  #site-nav{ transition: background-color .3s ease, border-color .3s ease; }

  /* ================= MISC ================= */
  ::selection{ background: rgba(228,228,231,.35); }
  input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
  ::-webkit-scrollbar{ width:10px; }

  /* Text sitting on accent-gradient backgrounds must flip with theme */
  .btn-primary, .btn-gold, .amount-btn.active, .tab-btn[aria-selected="true"], .provider-pill.active{
    color: var(--on-accent) !important;
  }
  nav a:hover{ color: var(--text-1) !important; }
  #copy-btn:hover, #download-qr:hover{ color: var(--text-1) !important; }
  ::-webkit-scrollbar-thumb{ background: var(--overlay-strong); border-radius:8px; }

  /* ================= APP-LIKE: no text selection / no copy popup ================= */
  *{
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS: no "Copy/Share" long-press menu */
    -webkit-tap-highlight-color: transparent; /* no flash gray box on tap */
  }
  input, textarea{
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    .tilt-card{ transform:none !important; }
  }
  @keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0); }
    25% { box-shadow: 0 0 0 6px rgba(255, 200, 87, 0.35); }
    50% { box-shadow: 0 0 0 2px rgba(255, 200, 87, 0.55); }
    75% { box-shadow: 0 0 0 6px rgba(255, 200, 87, 0.35); }
  }
  .highlight-pulse {
    animation: highlightPulse 0.9s ease-in-out 2;
    border-radius: 14px;
  }

/* ===========================================================
   COOKIE CONSENT BANNER
=========================================================== */
.cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border-radius: 18px;
  padding: 18px 20px;
  max-width: 640px;
  margin: 0 auto;
  transform: translateY(140%);
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.cookie-banner.visible{ transform: translateY(0); }
.cookie-banner-inner{ display:flex; flex-direction:column; gap:14px; }
.cookie-banner-text{ font-size:13px; line-height:1.5; color: var(--text-2); }
.cookie-banner-text a{ color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions{ display:flex; gap:10px; }
.cookie-btn{ flex:1; padding:10px 16px; border-radius:12px; font-size:13px; font-weight:600; }
.cookie-btn-ghost{ background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.cookie-btn-primary{ background: var(--gold); color:#1a1206; border:none; }
@media (min-width: 640px){
  .cookie-banner-inner{ flex-direction: row; align-items:center; }
  .cookie-banner-actions{ flex-shrink:0; }
  .cookie-btn{ flex:none; }
}

/* ===========================================================
   LEGAL PAGES CONTENT
=========================================================== */
.legal-content a{ color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.legal-content ul{ list-style: disc; }

/* ===========================================================
   LEGAL PAGES — table + smooth-scroll for TOC anchors
=========================================================== */
html{ scroll-behavior: smooth; }
.legal-content table{ background: var(--surface); border-radius: 12px; overflow: hidden; }
.legal-content th, .legal-content td{ vertical-align: top; }