/* ==========================================================================
   mplusvoice shared brand design system
   Teal/neumorphic system matching mplusvoice.com/founders
   Loaded once in layouts/guest.blade.php — available on every public page
   ========================================================================== */
:root {
    --bg: #E7EBF1;
    --bg-soft: #EDF1F6;
    --shadow-dark: rgba(160, 174, 195, 0.55);
    --shadow-light: rgba(255, 255, 255, 0.9);
    --shadow-dark-sm: rgba(160, 174, 195, 0.45);
    --shadow-light-sm: rgba(255, 255, 255, 0.85);
    --ink: #242C3D;
    --ink-soft: #5B6477;
    --ink-faint: #8893A4;
    --teal: #11645F;
    --teal-2: #1A8A82;
    --teal-glow: rgba(17, 100, 95, 0.28);
    --blue: #12508f;
    --blue-2: #2571c4;
    --blue-glow: rgba(37, 113, 196, 0.28);
    --vault: #0D2628;
    --vault-2: #123833;
    --vault-light: rgba(255,255,255,0.07);
    --vault-dark: rgba(0,0,0,0.5);
    --vault-text: #DCEDE9;
    --vault-text-soft: #9FBDB7;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

body { background: var(--bg) !important; font-family: var(--font-body); color: var(--ink); }
h1, h2, h3, .mp-eyebrow, .mp-btn { font-family: var(--font-display); }

/* Eyebrow label */
.mp-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.mp-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-glow); }
.mp-eyebrow.on-dark{ color:#6FE3C9; }
.mp-eyebrow.on-dark::before{ background:#6FE3C9; box-shadow:0 0 0 4px rgba(111,227,201,.25); }

/* Neumorphic primitives */
.mp-neu-raised{ background:var(--bg); border-radius:var(--radius-lg); box-shadow:9px 9px 20px var(--shadow-dark), -9px -9px 20px var(--shadow-light); }
.mp-neu-raised-sm{ background:var(--bg); border-radius:var(--radius-md); box-shadow:6px 6px 14px var(--shadow-dark-sm), -6px -6px 14px var(--shadow-light-sm); }
.mp-neu-pressed{ background:var(--bg); border-radius:var(--radius-lg); box-shadow:inset 6px 6px 14px var(--shadow-dark), inset -6px -6px 14px var(--shadow-light); }
.mp-neu-pressed-sm{ background:var(--bg); border-radius:var(--radius-md); box-shadow:inset 4px 4px 9px var(--shadow-dark-sm), inset -4px -4px 9px var(--shadow-light-sm); }

/* Buttons */
.mp-btn{ font-family:var(--font-body); font-weight:600; font-size:15px; padding:14px 28px; border-radius:999px; display:inline-flex; align-items:center; gap:9px; transition:transform .18s ease, box-shadow .18s ease; text-decoration:none; }
.mp-btn:hover{ text-decoration:none; }
.mp-btn-primary{ color:#F4FBFA !important; background:linear-gradient(155deg, var(--teal-2), var(--teal)); box-shadow:0 10px 20px var(--teal-glow); border:none; }
.mp-btn-primary:hover{ color:#F4FBFA !important; transform:translateY(-1px); box-shadow:0 14px 26px var(--teal-glow); }
.mp-btn-primary-blue{ color:#F4FBFA !important; background:linear-gradient(145deg, #2571c4, #12508f); box-shadow:0 10px 20px var(--blue-glow); border:none; }
.mp-btn-primary-blue:hover{ color:#F4FBFA !important; transform:translateY(-1px); box-shadow:0 14px 26px var(--blue-glow); }
.mp-btn-ghost{ color:var(--ink) !important; background:var(--bg); box-shadow:6px 6px 14px var(--shadow-dark-sm), -6px -6px 14px var(--shadow-light-sm); border:none; }
.mp-btn-ghost:hover{ color:var(--ink) !important; box-shadow:3px 3px 8px var(--shadow-dark-sm), -3px -3px 8px var(--shadow-light-sm); }
.mp-btn-ghost.on-dark{ background:rgba(255,255,255,.08); color:#F4FBFA !important; box-shadow:none; border:1px solid rgba(255,255,255,.18); }

/* Section shell */
.mp-section{ padding:76px 0; }
.mp-section-head{ max-width:600px; margin:0 auto 46px; }
.mp-section-title{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700; color:var(--ink); line-height:1.18; margin-bottom:10px; }
.mp-section-sub{ font-size:15px; color:var(--ink-soft); line-height:1.65; }

/* Signature "vault ring" waveform graphic */
.mp-vault-graphic{ position:relative; display:flex; justify-content:center; align-items:center; }
.mp-vault-ring{ width:300px; height:300px; border-radius:50%; background:var(--bg); box-shadow:inset 9px 9px 20px var(--shadow-dark), inset -9px -9px 20px var(--shadow-light); display:flex; align-items:center; justify-content:center; position:relative; }
.mp-vault-ring::before{ content:""; position:absolute; inset:24px; border-radius:50%; border:1.5px dashed rgba(17,100,95,.28); }
.mp-vault-inner{ width:210px; height:210px; border-radius:50%; background:var(--bg); box-shadow:6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.mp-waveform{ display:flex; align-items:center; gap:4px; height:34px; }
.mp-waveform span{ width:4px; border-radius:3px; background:linear-gradient(180deg, var(--teal-2), var(--teal)); animation:mpwave 1.6s ease-in-out infinite; }
.mp-waveform span:nth-child(1){ height:12px; animation-delay:-1.2s; }
.mp-waveform span:nth-child(2){ height:22px; animation-delay:-.9s; }
.mp-waveform span:nth-child(3){ height:32px; animation-delay:-.6s; }
.mp-waveform span:nth-child(4){ height:18px; animation-delay:-.3s; }
.mp-waveform span:nth-child(5){ height:26px; animation-delay:0s; }
.mp-waveform span:nth-child(6){ height:14px; animation-delay:-.45s; }
.mp-waveform span:nth-child(7){ height:20px; animation-delay:-.75s; }
@keyframes mpwave{ 0%,100%{transform:scaleY(.5);} 50%{transform:scaleY(1);} }
.mp-note-lines{ width:120px; display:flex; flex-direction:column; gap:6px; }
.mp-note-lines i{ display:block; height:5px; border-radius:3px; background:rgba(36,44,61,.16); font-style:normal; }
.mp-note-lines i:nth-child(1){ width:100%; }
.mp-note-lines i:nth-child(2){ width:80%; }
.mp-note-lines i:nth-child(3){ width:58%; background:var(--teal); opacity:.5; }
.mp-vault-badge{ position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11.5px; color:var(--teal); background:var(--bg); padding:8px 16px; border-radius:999px; white-space:nowrap; box-shadow:5px 5px 12px var(--shadow-dark-sm), -5px -5px 12px var(--shadow-light-sm); }

/* Dark "vault" trust/CTA treatment */
.mp-trust{ background:radial-gradient(circle at 25% 15%, var(--vault-2), var(--vault) 70%); border-radius:36px; margin:0 24px; padding:64px 44px; position:relative; overflow:hidden; }
.mp-trust::before{ content:""; position:absolute; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, rgba(111,227,201,.12), transparent 70%); top:-180px; right:-140px; }
.mp-trust-grid{ position:relative; z-index:2; }
.mp-trust h2{ font-family:var(--font-display); color:#F4FBFA; font-size:clamp(1.5rem,2.8vw,2rem); line-height:1.18; margin-bottom:14px; }
.mp-trust p.lede{ color:var(--vault-text-soft); font-size:15px; line-height:1.65; max-width:460px; margin-bottom:8px; }
.mp-trust-card{ background:var(--vault-2); border-radius:22px; padding:8px 26px; box-shadow:inset 5px 5px 12px var(--vault-dark), inset -5px -5px 12px var(--vault-light); }
.mp-trust-row{ display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mp-trust-row:last-child{ border-bottom:none; }
.mp-trust-icon{ width:38px; height:38px; border-radius:11px; background:rgba(111,227,201,.12); display:flex; align-items:center; justify-content:center; color:#6FE3C9; font-family:var(--font-mono); font-size:14px; font-weight:700; flex-shrink:0; }
.mp-trust-row-title{ font-size:14px; font-weight:600; color:#F4FBFA; margin-bottom:2px; }
.mp-trust-row-sub{ font-size:12.5px; color:var(--vault-text-soft); line-height:1.5; }

.mp-cta{ background:radial-gradient(circle at 30% 20%, var(--vault-2), var(--vault) 70%); color:var(--vault-text); border-radius:36px; margin:0 24px; padding:64px 40px; text-align:center; position:relative; overflow:hidden; }
.mp-cta::before{ content:""; position:absolute; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, rgba(111,227,201,.1), transparent 70%); bottom:-200px; left:-140px; }
.mp-cta h2{ font-family:var(--font-display); color:#F4FBFA; font-size:clamp(1.6rem,2.8vw,2.1rem); margin-bottom:12px; position:relative; z-index:2; }
.mp-cta p{ color:var(--vault-text-soft); margin-bottom:26px; font-size:15.5px; position:relative; z-index:2; }
.mp-cta-fine{ margin-top:18px; color:var(--vault-text-soft); font-size:12px; position:relative; z-index:2; }

/* Colombia flag glyph */
.mp-co-flag{ width:16px; height:12px; border-radius:2px; overflow:hidden; display:inline-flex; flex-direction:column; vertical-align:middle; margin-right:5px; }
.mp-co-flag .y{ background:#FCD116; flex:2; }
.mp-co-flag .b{ background:#003087; flex:1; }
.mp-co-flag .r{ background:#CE1126; flex:1; }