@charset "UTF-8";
:root {
    color-scheme: dark;

    --sfpd-teal: #14f1d9;
    --sfpd-teal-soft: rgba(20, 241, 217, .16);
    --sfpd-primary-light: #14f1d9;
    --sfpd-primary: #10c9b4;
    --sfpd-primary-dark: #0d8577;
    --sfpd-accent: #14f1d9;
    --sfpd-grad-teal: linear-gradient(135deg, #0d8577, #14f1d9);
    --sfpd-on-teal: #ffffff;
    --sfpd-on-teal-hover: #e8fffc;
    --sfpd-navy-1: #08111d;
    --sfpd-navy-2: #0d1b2c;
    --sfpd-navy-3: #121f2d;
    --sfpd-panel: #101e30;
    --sfpd-panel-deep: #0c1929;
    --sfpd-pink: #ff5b89;
    --sfpd-text: rgba(255, 255, 255, .82);
    --sfpd-text-strong: #ffffff;
    --sfpd-text-muted: rgba(255, 255, 255, .55);
    --sfpd-text-subtle: rgba(255, 255, 255, .62);
    --sfpd-glass: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    --sfpd-glass-border: rgba(255, 255, 255, .07);
    --sfpd-border: rgba(255, 255, 255, .12);
    --sfpd-border-soft: rgba(255, 255, 255, .07);
    --sfpd-bg-soft: rgba(255, 255, 255, .05);
    --sfpd-bg-zebra: rgba(255, 255, 255, .03);

    --sfpd-success: #4ade80;
    --sfpd-danger: #f87171;
    --sfpd-warning: #fbbf24;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 8px 20px rgba(0, 0, 0, .25);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, .32);
    --shadow-lg: 0 20px 44px rgba(0, 0, 0, .45);
}

body {
    background-color: var(--sfpd-navy-3);
    color: var(--sfpd-text);
}

::selection {
    background: rgba(20, 241, 217, .25);
    color: #ffffff;
}


::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: var(--sfpd-navy-1);
}

::-webkit-scrollbar-thumb {
    background: #1d3149;
    border-radius: 8px;
    border: 2px solid var(--sfpd-navy-1);
}

::-webkit-scrollbar-thumb:hover {
    background: #29435f;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--sfpd-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.section-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--sfpd-teal), transparent);
}

.section-heading {
    margin-bottom: 24px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.15;
}

.section-heading .accent {
    color: var(--sfpd-teal);
}

@media (max-width: 768px) {
    .section-heading {
        font-size: 30px;
    }
}


.sfpd-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, var(--sfpd-navy-1) 0%, var(--sfpd-navy-2) 100%);
    overflow: hidden;
}


.sfpd-section--last {
    background: linear-gradient(180deg, var(--sfpd-navy-1) 0%, var(--sfpd-navy-3) 100%);
}


.sfpd-section--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(20, 241, 217, .08), transparent 45%);
    pointer-events: none;
}


.sfpd-section--grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(58, 140, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 140, 255, 0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 0%, black 20%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 0%, black 20%, transparent 70%);
    opacity: .5;
    pointer-events: none;
}

.sfpd-section > .container {
    position: relative;
    z-index: 1;
}


.sfpd-card {
    position: relative;
    border-radius: 20px;
    background: var(--sfpd-glass);
    border: 1px solid var(--sfpd-glass-border);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.sfpd-card--hover:hover {
    transform: translateY(-6px);
    border-color: rgba(20, 241, 217, .22);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}


.sfpd-card--edge {
    overflow: hidden;
}

.sfpd-card--edge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20, 241, 217, .55), transparent);
    opacity: 0;
    transition: opacity .35s ease;
}

.sfpd-card--edge:hover::before {
    opacity: 1;
}


.sfpd-text {
    color: var(--sfpd-text);
    line-height: 1.85;
}

.sfpd-text-strong {
    color: var(--sfpd-text-strong);
}

.sfpd-text-muted {
    color: var(--sfpd-text-muted);
}

.sfpd-link {
    color: var(--sfpd-teal);
    transition: color .25s ease;
}

.sfpd-link:hover {
    color: #7df5e7;
}


.sfpd-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(20, 241, 217, .16), rgba(20, 241, 217, .04));
    border: 1px solid rgba(20, 241, 217, .20);
    color: var(--sfpd-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(20, 241, 217, .10);
}

.sfpd-pill--dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sfpd-teal);
    box-shadow: 0 0 10px rgba(20, 241, 217, .8);
    animation: sfpdPulse 1.6s ease-in-out infinite;
}

@keyframes sfpdPulse {
    0%, 100% {
        opacity: .55;
        transform: scale(.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


@media (prefers-reduced-motion: reduce) {
    .sfpd-pill--dot::before {
        animation: none;
    }

    .sfpd-card,
    .sfpd-btn {
        transition: none;
    }
}


.swal2-popup {
    background: var(--sfpd-panel) !important;
    color: var(--sfpd-text) !important;
    border: 1px solid var(--sfpd-glass-border);
    border-radius: 20px !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .5) !important;
}

.swal2-title {
    color: #ffffff !important;
}

.swal2-html-container {
    color: rgba(255, 255, 255, .78) !important;
}

.swal2-styled {
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 12px 26px !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(20, 241, 217, .25) !important;
}


.swal2-confirm {
    background: linear-gradient(135deg, #0d8577, #10c9b4) !important;
    color: #ffffff !important;
}


.swal2-cancel {
    background: rgba(255, 255, 255, .09) !important;
    color: rgba(255, 255, 255, .85) !important;
}

.swal2-cancel:hover {
    background: rgba(255, 255, 255, .14) !important;
}


.swal2-confirm.swal2-confirm--danger {
    background: linear-gradient(135deg, #7e1f2b, #c0334a) !important;
    color: #ffe3e8 !important;
}


.swal2-input, .swal2-textarea, .swal2-select {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
}