:root {
            --bg: #e9e5f1;
            --bg2: #f2eff7;
            --sh-d: #c9c2d5;
            --sh-d2: #beb6cb;
            --sh-l: #ffffff;
            --ink: #383247;
            --muted: #81788f;
            --accent: #8b5dcc;
            --accent-2: #7044ad;
            --grad: linear-gradient(135deg, #b184e4 0%, #7951bd 100%);
            --gold: #d49b3d;
            --green: #4b9d83;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--bg);
            color: var(--ink);
            overflow-x: hidden;
            min-height: 100vh;
            line-height: 1.65;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -2;
            background:
                radial-gradient(600px 400px at 8% 4%, rgba(239, 138, 162, .10), transparent 60%),
                radial-gradient(700px 500px at 95% 90%, rgba(221, 92, 128, .08), transparent 60%),
                radial-gradient(500px 400px at 80% 10%, rgba(233, 161, 59, .06), transparent 60%);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Sora', sans-serif;
            color: var(--ink);
        }

        section[id] {
            scroll-margin-top: 110px;
        }

        a {
            text-decoration: none;
        }

        button {
            font-family: inherit;
        }

        ::selection {
            background: rgba(221, 92, 128, .3);
        }

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

        ::-webkit-scrollbar-track {
            background: var(--bg);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--sh-d);
            border-radius: 10px;
            border: 2px solid var(--bg);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        .nm {
            background: var(--bg);
            box-shadow: 9px 9px 22px rgba(150, 130, 142, .30), -9px -9px 22px var(--sh-l);
        }

        .nm-in {
            background: var(--bg);
            box-shadow: inset 6px 6px 12px var(--sh-d2), inset -6px -6px 12px var(--sh-l);
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 40px;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            font-weight: 600;
            font-size: .84rem;
            color: var(--ink);
        }

        .chip i {
            color: var(--accent);
        }

        .eyebrow {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: .74rem;
            color: var(--accent-2);
        }

        .chip-sm {
            padding: 6px 14px;
            font-size: .74rem;
        }

        .ib {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: var(--bg);
            box-shadow: 6px 6px 12px var(--sh-d), -6px -6px 12px var(--sh-l);
            color: var(--accent);
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .ib.grad {
            background: var(--grad);
            color: #fff;
            box-shadow: 6px 6px 14px rgba(199, 69, 104, .4), -4px -4px 10px var(--sh-l);
        }

        .grad-text {
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .groove-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-top: 20px;
        }

        .groove-divider::before,
        .groove-divider::after {
            content: '';
            height: 8px;
            width: 110px;
            border-radius: 8px;
            box-shadow: inset 2px 2px 4px var(--sh-d2), inset -2px -2px 4px var(--sh-l);
        }

        .groove-divider .hdot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            display: grid;
            place-items: center;
            color: var(--accent);
        }

        .sec {
            padding: 70px 0;
        }

        .sec-head.center {
            text-align: center;
        }

        .sec-title {
            font-weight: 700;
            font-size: clamp(1.9rem, 3.4vw, 2.6rem);
            margin-top: 18px;
            line-height: 1.25;
        }

        .sec-sub {
            color: var(--muted);
            max-width: 640px;
            margin: 16px auto 0;
            font-size: .98rem;
        }

        .btn-grad {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--grad);
            color: #fff;
            border: none;
            padding: 14px 30px;
            border-radius: 50px;
            font-weight: 600;
            font-size: .95rem;
            cursor: pointer;
            box-shadow: 8px 8px 18px rgba(199, 69, 104, .38), -6px -6px 14px var(--sh-l);
            transition: all .3s ease;
        }

        .btn-grad:hover {
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 10px 12px 24px rgba(199, 69, 104, .48), -6px -6px 14px var(--sh-l);
        }

        .btn-grad:active {
            transform: translateY(1px);
            box-shadow: 4px 4px 10px rgba(199, 69, 104, .4);
        }

        .btn-nm {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--bg);
            color: var(--ink);
            border: none;
            padding: 13px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: .95rem;
            cursor: pointer;
            box-shadow: 7px 7px 14px var(--sh-d), -7px -7px 14px var(--sh-l);
            transition: all .3s ease;
        }

        .btn-nm:hover {
            color: var(--accent-2);
            transform: translateY(-2px);
        }

        .btn-nm:active {
            transform: translateY(1px);
            box-shadow: inset 5px 5px 10px var(--sh-d2), inset -5px -5px 10px var(--sh-l);
        }

        .spin {
            display: none;
            width: 18px;
            height: 18px;
            border: 2.5px solid rgba(255, 255, 255, .4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: rot .7s linear infinite;
        }

        @keyframes rot {
            to {
                transform: rotate(360deg);
            }
        }

        #orbBg {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 12px 12px 28px rgba(150, 130, 142, .26), -12px -12px 28px rgba(255, 255, 255, .7);
            animation: drift ease-in-out infinite alternate;
        }

        @keyframes drift {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(34px, -50px);
            }
        }

        /* ---------- Navbar ---------- */
        .nav-wrap {
            position: fixed;
            top: 16px;
            left: 0;
            right: 0;
            z-index: 1200;
            padding: 0 20px;
        }

        .nav-inner {
            max-width: 1160px;
            margin: auto;
            position: relative;
        }

        .nav-shell {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 11px 12px 11px 20px;
            border-radius: 60px;
            background: var(--bg);
            box-shadow: 10px 10px 24px rgba(150, 130, 142, .3), -10px -10px 24px var(--sh-l);
            position: relative;
            z-index: 2;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Sora';
            font-weight: 700;
            font-size: 1.22rem;
            color: var(--ink);
        }

        .brand .b-ic {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--grad);
            color: #fff;
            display: grid;
            place-items: center;
            box-shadow: 4px 4px 10px rgba(199, 69, 104, .45), -3px -3px 8px var(--sh-l);
            transition: transform .3s;
        }

        .brand:hover .b-ic {
            transform: scale(1.12) rotate(-10deg);
        }

        .n-links {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-left: auto;
        }

        .n-link {
            padding: 9px 15px;
            border-radius: 40px;
            font-size: .9rem;
            font-weight: 500;
            color: var(--ink);
            transition: all .25s ease;
        }

        .n-link:hover {
            color: var(--accent-2);
        }

        .n-link.active {
            color: var(--accent-2);
            box-shadow: inset 4px 4px 8px var(--sh-d2), inset -4px -4px 8px var(--sh-l);
        }

        .nav-cta {
            margin-left: 8px;
            padding: 11px 24px !important;
            font-size: .88rem !important;
        }

        .burger {
            display: none;
            margin-left: auto;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: none;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            color: var(--ink);
            font-size: 1.25rem;
            cursor: pointer;
            position: relative;
            z-index: 3;
        }

        /* NEW ADDITION: Hides mobile menu by default on large screens */
        .nav-menu {
            display: none;
        }

        @media (max-width: 991px) {
            .n-links {
                display: none;
            }

            .burger {
                display: grid;
                place-items: center;
            }

            .nav-menu {
                position: absolute;
                top: calc(100% + 12px);
                left: 0;
                right: 0;
                display: flex;
                /* This overrides display: none on mobile */
                flex-direction: column;
                padding: 14px;
                border-radius: 26px;
                background: var(--bg);
                box-shadow: 12px 12px 30px rgba(150, 130, 142, .35), -10px -10px 24px var(--sh-l);
                opacity: 0;
                visibility: hidden;
                transform: translateY(-12px) scale(.98);
                transition: all .28s cubic-bezier(.4, .1, .2, 1);
                z-index: 1;
            }

            .nav-menu.open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
            }

            .nav-menu .n-link {
                padding: 13px 18px;
                border-radius: 16px;
            }

            .nav-menu .nav-cta {
                margin: 8px 0 0;
                justify-content: center;
            }
        }

        /* ---------- Hero ---------- */
        #home {
            padding: 160px 0 50px;
        }

        .h-title {
            font-weight: 800;
            font-size: clamp(2.2rem, 4.6vw, 3.4rem);
            line-height: 1.15;
            margin: 22px 0 18px;
        }

        .h-sub {
            color: var(--muted);
            font-size: 1.03rem;
            max-width: 480px;
        }

        .prefs {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            margin-top: 28px;
        }

        .pref {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .88rem;
            font-weight: 500;
            color: var(--muted);
        }

        .sw {
            width: 52px;
            height: 28px;
            border-radius: 20px;
            background: var(--bg);
            box-shadow: inset 4px 4px 8px var(--sh-d2), inset -4px -4px 8px var(--sh-l);
            position: relative;
            cursor: pointer;
            flex-shrink: 0;
            transition: all .3s;
        }

        .sw::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 2px 2px 5px var(--sh-d), -2px -2px 5px var(--sh-l);
            transition: all .3s ease;
        }

        .sw.on::after {
            left: 27px;
            background: var(--grad);
        }

        .proof {
            display: flex;
            align-items: center;
            gap: 26px;
            flex-wrap: wrap;
            margin-top: 32px;
        }

        .av-stack {
            display: flex;
        }

        .mini-av {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: #fff;
            font-weight: 600;
            font-size: .9rem;
            box-shadow: 4px 4px 10px var(--sh-d);
            border: 3px solid var(--bg);
        }

        .mini-av+.mini-av {
            margin-left: -12px;
        }

        .proof-txt {
            font-size: .88rem;
            color: var(--muted);
        }

        .proof-txt b {
            color: var(--ink);
        }

        .dot-on {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green);
            margin-right: 6px;
            box-shadow: 0 0 0 3px rgba(63, 174, 134, .2);
        }

        .stars-row {
            color: var(--gold);
            font-size: .85rem;
            letter-spacing: 2px;
        }

        /* ---- Match Card ---- */
        .match-stage {
            position: relative;
            max-width: 420px;
            margin: auto;
            padding: 26px 14px;
        }

        .match-card {
            border-radius: 34px;
            padding: 20px;
            position: relative;
            z-index: 2;
            transition: transform .45s cubic-bezier(.4, .1, .2, 1), opacity .45s ease;
        }

        .match-card.fly-l {
            transform: translateX(-130%) rotate(-16deg);
            opacity: 0;
        }

        .match-card.fly-r {
            transform: translateX(130%) rotate(16deg);
            opacity: 0;
        }

        .match-card.enter {
            transition: none;
            transform: translateX(55%) rotate(9deg);
            opacity: 0;
        }

        .match-photo {
            border-radius: 26px;
            padding: 12px;
            position: relative;
        }

        .match-photo img {
            width: 100%;
            height: 275px;
            object-fit: cover;
            border-radius: 18px;
            display: block;
        }

        .match-dist {
            position: absolute;
            left: 26px;
            bottom: 26px;
            padding: 7px 14px;
            border-radius: 30px;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            font-size: .78rem;
            font-weight: 600;
            color: var(--ink);
        }

        .match-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 16px 4px 4px;
        }

        .match-head h4 {
            font-size: 1.3rem;
            font-weight: 700;
        }

        .verified {
            color: var(--accent);
            font-size: 1.25rem;
        }

        .mc-bio {
            color: var(--muted);
            font-size: .88rem;
            margin: 2px 4px 12px;
        }

        .match-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0 4px 16px;
        }

        .mtag {
            padding: 6px 13px;
            border-radius: 30px;
            background: var(--bg);
            box-shadow: 4px 4px 8px var(--sh-d), -4px -4px 8px var(--sh-l);
            font-size: .76rem;
            font-weight: 600;
            color: var(--ink);
        }

        .meter-head {
            display: flex;
            justify-content: space-between;
            font-size: .78rem;
            font-weight: 600;
            color: var(--muted);
            margin: 0 4px 7px;
        }

        .meter-head b {
            color: var(--accent-2);
        }

        .meter {
            height: 12px;
            border-radius: 12px;
            overflow: hidden;
            margin: 0 4px;
        }

        .meter i {
            display: block;
            height: 100%;
            width: 0;
            border-radius: 12px;
            background: var(--grad);
            box-shadow: 2px 2px 6px rgba(199, 69, 104, .5);
            transition: width .9s cubic-bezier(.3, .8, .3, 1);
        }

        /* ---- Mode Switcher (NEW) ---- */
        .mode-switcher {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 14px 4px 0;
            padding: 9px 16px;
            border-radius: 30px;
            background: var(--bg);
            box-shadow: inset 3px 3px 6px var(--sh-d2), inset -3px -3px 6px var(--sh-l);
            font-size: .76rem;
            font-weight: 700;
            color: var(--accent-2);
            cursor: pointer;
            transition: all .25s;
            user-select: none;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .mode-switcher:hover {
            color: var(--accent);
            transform: translateY(-1px);
        }

        .mode-switcher i {
            font-size: .9rem;
            transition: transform .4s ease;
        }

        .mode-switcher:hover i {
            transform: rotate(180deg);
        }

        .match-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 14px;
        }

        .act {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: none;
            background: var(--bg);
            box-shadow: 6px 6px 12px var(--sh-d), -6px -6px 12px var(--sh-l);
            font-size: 1.15rem;
            cursor: pointer;
            transition: all .25s ease;
        }

        .act:hover {
            transform: translateY(-4px);
        }

        .act:active {
            box-shadow: inset 4px 4px 8px var(--sh-d2), inset -4px -4px 8px var(--sh-l);
        }

        .act-skip {
            color: #a3939c;
        }

        .act-super {
            color: var(--gold);
        }

        .act-love {
            width: 64px;
            height: 64px;
            background: var(--grad);
            color: #fff;
            font-size: 1.4rem;
            box-shadow: 8px 8px 18px rgba(199, 69, 104, .48), -5px -5px 12px var(--sh-l);
        }

        .act-love:hover {
            transform: translateY(-4px) scale(1.05);
        }

        .float-chip {
            position: absolute;
            z-index: 3;
            background: var(--bg);
            box-shadow: 7px 7px 14px rgba(150, 130, 142, .35), -7px -7px 14px var(--sh-l);
            padding: 10px 16px;
            border-radius: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .82rem;
            font-weight: 600;
            color: var(--ink);
            animation: floaty 4s ease-in-out infinite;
        }

        .fc1 {
            top: 4px;
            right: -4px;
            color: var(--accent-2);
        }

        .fc2 {
            bottom: 16px;
            left: -8px;
            animation-delay: 1.5s;
        }

        @keyframes floaty {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        /* ---------- Stats rail ---------- */
        .stats-rail {
            display: flex;
            border-radius: 34px;
            padding: 28px 14px;
        }

        .stat {
            flex: 1;
            text-align: center;
            padding: 8px 16px;
            position: relative;
        }

        .stat+.stat::before {
            content: '';
            position: absolute;
            left: -3px;
            top: 16%;
            bottom: 16%;
            width: 6px;
            border-radius: 6px;
            box-shadow: inset 2px 2px 4px var(--sh-d2), inset -2px -2px 4px var(--sh-l);
        }

        .stat-num {
            font-family: 'Sora';
            font-weight: 800;
            font-size: clamp(1.7rem, 3vw, 2.4rem);
        }

        .stat-label {
            color: var(--muted);
            font-size: .88rem;
            font-weight: 500;
            margin-top: 2px;
        }

        @media (max-width: 767px) {
            .stats-rail {
                flex-wrap: wrap;
            }

            .stat {
                flex: 1 1 45%;
            }

            .stat+.stat::before {
                display: none;
            }
        }

        /* ---------- About — orbiting symbols (NEW) ---------- */
        .orbit-frame {
            position: relative;
            width: 100%;
            max-width: 460px;
            aspect-ratio: 1;
            margin: auto;
            padding: 30px;
        }

        .orbit-ring-bg {
            position: absolute;
            inset: 18%;
            border-radius: 50%;
            border: 2px dashed rgba(221, 92, 128, .25);
        }

        .orbit-ring-bg::before {
            content: '';
            position: absolute;
            inset: -10%;
            border-radius: 50%;
            border: 1px dotted rgba(221, 92, 128, .15);
        }

        .orbit-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 170px;
            height: 170px;
            border-radius: 50%;
            background: var(--grad);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 8px 8px 18px rgba(199, 69, 104, .45), -5px -5px 12px var(--sh-l);
            z-index: 3;
            text-align: center;
        }

        .orbit-center i {
            font-size: 3.6rem;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
        }

        .orbit-center .oc-label {
            font-family: 'Sora';
            font-weight: 700;
            font-size: .76rem;
            margin-top: 4px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        .orbit-center .oc-sub {
            font-size: .65rem;
            opacity: .85;
            margin-top: 2px;
        }

        .orbit-item {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 84px;
            height: 84px;
            margin: -42px 0 0 -42px;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 7px 7px 14px var(--sh-d), -7px -7px 14px var(--sh-l);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 1.55rem;
            z-index: 4;
            animation: orbitMove 22s linear infinite;
        }

        .orbit-item i {
            line-height: 1;
        }

        .orbit-item small {
            font-size: .58rem;
            color: var(--muted);
            font-weight: 700;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .orbit-item.i1 {
            animation-delay: 0s;
        }

        .orbit-item.i2 {
            animation-delay: -7.33s;
        }

        .orbit-item.i3 {
            animation-delay: -14.67s;
        }

        .orbit-item.i1 {
            color: var(--accent);
        }

        .orbit-item.i2 {
            color: var(--gold);
        }

        .orbit-item.i3 {
            color: var(--green);
        }

        @keyframes orbitMove {
            from {
                transform: rotate(0deg) translateX(170px) rotate(0deg);
            }

            to {
                transform: rotate(360deg) translateX(170px) rotate(-360deg);
            }
        }

        .orbit-pulse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 170px;
            height: 170px;
            border-radius: 50%;
            border: 2px solid rgba(221, 92, 128, .3);
            z-index: 1;
            animation: pulseRing 2.4s ease-out infinite;
        }

        @keyframes pulseRing {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: .8;
            }

            100% {
                transform: translate(-50%, -50%) scale(1.8);
                opacity: 0;
            }
        }

        .feat-row {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 15px 20px;
            border-radius: 20px;
            margin-bottom: 14px;
            transition: transform .3s ease;
        }

        .feat-row:hover {
            transform: translateX(8px);
        }

        .feat-row .ib {
            width: 48px;
            height: 48px;
            border-radius: 15px;
            font-size: 1.15rem;
        }

        .feat-row h6 {
            font-size: .98rem;
            margin-bottom: 1px;
        }

        .feat-row small {
            color: var(--muted);
            font-size: .8rem;
        }

        /* ---------- Services ---------- */
        .tabs {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 9px;
            border-radius: 50px;
            background: var(--bg);
            box-shadow: inset 5px 5px 12px var(--sh-d2), inset -5px -5px 12px var(--sh-l);
            margin-top: 36px;
            scrollbar-width: none;
        }

        .tabs::-webkit-scrollbar {
            display: none;
        }

        .tab {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 11px 20px;
            border-radius: 40px;
            border: none;
            background: transparent;
            font-size: .88rem;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            white-space: nowrap;
            transition: all .25s ease;
        }

        .tab i {
            color: var(--accent);
        }

        .tab:hover {
            color: var(--accent-2);
        }

        .tab.active {
            background: var(--bg);
            box-shadow: 5px 5px 12px var(--sh-d), -5px -5px 12px var(--sh-l);
            color: var(--accent-2);
        }

        .svc-panel {
            border-radius: 34px;
            padding: 36px;
            margin-top: 30px;
        }

        .svc-head {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .svc-head h3 {
            font-size: 1.45rem;
            font-weight: 700;
            margin: 0;
        }

        .svc-head p {
            color: var(--muted);
            font-size: .92rem;
            margin: 2px 0 0;
            max-width: 540px;
        }

        .svc-head .chip {
            margin-left: auto;
        }

        .svc-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
            margin-top: 28px;
        }

        .svc-card {
            padding: 26px 24px;
            border-radius: 24px;
            background: var(--bg);
            box-shadow: inset 5px 5px 12px var(--sh-d2), inset -5px -5px 12px var(--sh-l);
            transition: all .35s ease;
            display: flex;
            flex-direction: column;
        }

        .svc-card:hover {
            transform: translateY(-7px);
            box-shadow: 9px 9px 20px rgba(150, 130, 142, .32), -9px -9px 20px var(--sh-l);
        }

        .svc-card .ib {
            width: 48px;
            height: 48px;
            border-radius: 15px;
            font-size: 1.15rem;
            margin-bottom: 15px;
        }

        .svc-card h5 {
            font-size: 1.04rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .svc-card p {
            color: var(--muted);
            font-size: .86rem;
            margin-bottom: 14px;
            line-height: 1.65;
            flex: 1;
        }

        .svc-link {
            color: var(--accent-2);
            font-weight: 600;
            font-size: .87rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
        }

        .svc-link i {
            transition: margin-left .25s ease;
        }

        .svc-link:hover {
            color: var(--accent);
        }

        .svc-link:hover i {
            margin-left: 5px;
        }

        .svc-anim {
            animation: fadeUp .45s ease;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        @media (max-width: 767px) {
            .svc-grid {
                grid-template-columns: 1fr;
            }

            .svc-panel {
                padding: 26px 20px;
            }
        }

        /* ---------- Timeline ---------- */
        .timeline {
            position: relative;
            max-width: 880px;
            margin: 30px auto 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 10px;
            bottom: 10px;
            width: 7px;
            transform: translateX(-50%);
            border-radius: 7px;
            box-shadow: inset 2px 2px 5px var(--sh-d2), inset -2px -2px 5px var(--sh-l);
        }

        .t-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            position: relative;
            margin-bottom: 64px;
        }

        .t-item:last-child {
            margin-bottom: 0;
        }

        .t-node {
            position: absolute;
            left: 50%;
            top: 26px;
            transform: translateX(-50%);
            width: 66px;
            height: 66px;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 7px 7px 14px var(--sh-d), -7px -7px 14px var(--sh-l);
            display: grid;
            place-items: center;
            font-family: 'Sora';
            font-weight: 800;
            font-size: 1.3rem;
            color: var(--accent-2);
            z-index: 2;
        }

        .t-card {
            border-radius: 28px;
            padding: 32px 30px;
        }

        .t-item.left .t-card {
            grid-column: 1;
            grid-row: 1;
        }

        .t-item.right .t-card {
            grid-column: 2;
            grid-row: 1;
        }

        .t-card h4 {
            font-size: 1.22rem;
            margin: 16px 0 8px;
        }

        .t-card p {
            color: var(--muted);
            font-size: .93rem;
            margin: 0;
        }

        @media (max-width: 767px) {
            .timeline::before {
                left: 27px;
            }

            .t-item {
                grid-template-columns: 1fr;
                padding-left: 80px;
                gap: 0;
                margin-bottom: 44px;
            }

            .t-node {
                left: 27px;
                top: 8px;
                width: 56px;
                height: 56px;
                font-size: 1.1rem;
            }

            .t-item.left .t-card,
            .t-item.right .t-card {
                grid-column: 1;
                grid-row: auto;
            }
        }

        /* ---------- Success stories — initials design (NEW) ---------- */
        .story-stage {
            border-radius: 36px;
            padding: 26px;
        }

        .story-inner {
            transition: opacity .3s ease, transform .3s ease;
        }

        .story-stage.switching .story-inner {
            opacity: 0;
            transform: translateY(16px);
        }

        .story-photo {
            border-radius: 28px;
            padding: 16px;
            position: relative;
            height: 100%;
        }

        .story-initials {
            height: 385px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            position: relative;
            background:
                radial-gradient(circle at 30% 40%, rgba(239, 138, 162, .12), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(221, 92, 128, .08), transparent 50%),
                var(--bg);
            overflow: hidden;
        }

        .story-initials::before,
        .story-initials::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(221, 92, 128, .2);
            pointer-events: none;
        }

        .story-initials::before {
            width: 250px;
            height: 250px;
            animation: spinSlow 30s linear infinite;
        }

        .story-initials::after {
            width: 330px;
            height: 330px;
            border-style: dotted;
            border-color: rgba(233, 161, 59, .15);
            animation: spinSlow 45s linear infinite reverse;
        }

        @keyframes spinSlow {
            to {
                transform: rotate(360deg);
            }
        }

        .init-circle {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-family: 'Sora';
            font-weight: 800;
            font-size: 4.5rem;
            position: relative;
            z-index: 2;
            transition: transform .35s ease;
        }

        .init-circle:hover {
            transform: scale(1.05);
        }

        .init-circle.left {
            background: linear-gradient(135deg, #ef8aa2, #d7557c);
            color: #fff;
            box-shadow: 6px 6px 14px rgba(199, 69, 104, .45), -6px -6px 14px var(--sh-l);
        }

        .init-circle.right {
            background: var(--bg);
            color: var(--accent-2);
            box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l);
        }

        .init-heart-mid {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: var(--grad);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 1.7rem;
            box-shadow: 5px 5px 12px rgba(199, 69, 104, .5), -3px -3px 8px var(--sh-l);
            animation: heartbeat 1.4s ease-in-out infinite;
            z-index: 3;
        }

        @keyframes heartbeat {

            0%,
            100% {
                transform: scale(1);
            }

            25% {
                transform: scale(1.18);
            }

            50% {
                transform: scale(1);
            }

            75% {
                transform: scale(1.1);
            }
        }

        .init-deco {
            position: absolute;
            color: rgba(221, 92, 128, .35);
            font-size: 1.2rem;
            animation: floaty 4s ease-in-out infinite;
        }

        .init-deco.d1 {
            top: 12%;
            left: 15%;
        }

        .init-deco.d2 {
            top: 75%;
            right: 18%;
            animation-delay: 1s;
            color: rgba(233, 161, 59, .4);
        }

        .init-deco.d3 {
            bottom: 15%;
            left: 22%;
            animation-delay: 2s;
        }

        .init-deco.d4 {
            top: 22%;
            right: 14%;
            animation-delay: 1.5s;
        }

        .story-meta-chip {
            position: absolute;
            left: 26px;
            bottom: 26px;
            padding: 8px 16px;
            border-radius: 30px;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            font-size: .78rem;
            font-weight: 600;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 7px;
            z-index: 4;
        }

        .story-meta-chip i {
            color: var(--accent);
        }

        .story-copy {
            padding: 26px 8px 26px 42px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .q-mark {
            font-family: 'Sora';
            font-size: 4.4rem;
            line-height: .6;
            font-weight: 800;
        }

        .story-quote {
            font-size: 1.06rem;
            font-style: italic;
            line-height: 1.8;
            color: var(--ink);
            margin: 14px 0 18px;
        }

        .st-stars {
            color: var(--gold);
            letter-spacing: 3px;
            font-size: .9rem;
        }

        .st-names {
            font-size: 1.35rem;
            margin: 14px 0 10px;
        }

        .schip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 15px;
            border-radius: 30px;
            background: var(--bg);
            box-shadow: 4px 4px 8px var(--sh-d), -4px -4px 8px var(--sh-l);
            font-size: .78rem;
            font-weight: 600;
            color: var(--muted);
        }

        .schip i {
            color: var(--accent);
        }

        .story-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 22px;
            margin-top: 28px;
        }

        .s-btn {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: none;
            background: var(--bg);
            box-shadow: 6px 6px 12px var(--sh-d), -6px -6px 12px var(--sh-l);
            color: var(--ink);
            font-size: 1.05rem;
            cursor: pointer;
            transition: all .25s;
        }

        .s-btn:hover {
            color: var(--accent-2);
            transform: translateY(-3px);
        }

        .s-btn:active {
            box-shadow: inset 4px 4px 8px var(--sh-d2), inset -4px -4px 8px var(--sh-l);
        }

        .dots {
            display: flex;
            gap: 10px;
        }

        .s-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            padding: 0;
            cursor: pointer;
            background: var(--bg);
            box-shadow: inset 2px 2px 4px var(--sh-d2), inset -2px -2px 4px var(--sh-l);
            transition: all .3s;
        }

        .s-dot.active {
            background: var(--grad);
            box-shadow: 3px 3px 6px rgba(199, 69, 104, .4);
            transform: scale(1.2);
        }

        @media (max-width: 991px) {
            .story-copy {
                padding: 10px 14px 6px;
            }

            .story-initials {
                height: 320px;
            }

            .init-circle {
                width: 110px;
                height: 110px;
                font-size: 3.6rem;
            }

            .init-heart-mid {
                width: 58px;
                height: 58px;
                font-size: 1.4rem;
            }
        }

        /* ---------- Safety ---------- */
        .shield-wrap {
            position: relative;
            width: fit-content;
            margin: auto;
            padding: 30px 40px;
        }

        .shield-ring {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            display: grid;
            place-items: center;
        }

        .shield-core {
            width: 236px;
            height: 236px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        .shield-core>i {
            font-size: 2.4rem;
            color: var(--accent);
            margin-bottom: 8px;
        }

        .shield-pct {
            font-family: 'Sora';
            font-weight: 800;
            font-size: 2.3rem;
            line-height: 1;
        }

        .shield-core span {
            font-size: .8rem;
            color: var(--muted);
            margin-top: 6px;
            font-weight: 500;
        }

        .orbit {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: var(--bg);
            box-shadow: 6px 6px 12px var(--sh-d), -6px -6px 12px var(--sh-l);
            display: grid;
            place-items: center;
            color: var(--accent);
            font-size: 1.1rem;
            animation: floaty 4s ease-in-out infinite;
        }

        .o1 {
            top: 0;
            left: 6%;
        }

        .o2 {
            bottom: 8%;
            right: 0;
            color: var(--gold);
            animation-delay: 1.2s;
        }

        .o3 {
            top: 38%;
            left: -14px;
            color: var(--green);
            animation-delay: 2.2s;
        }

        .safe-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 28px 18px;
            margin-top: 34px;
        }

        .safe-item {
            text-align: center;
        }

        .safe-ic {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            margin: 0 auto 13px;
            display: grid;
            place-items: center;
            background: var(--bg);
            box-shadow: 7px 7px 14px var(--sh-d), -7px -7px 14px var(--sh-l);
            color: var(--accent);
            font-size: 1.5rem;
            transition: all .3s ease;
        }

        .safe-item:hover .safe-ic {
            background: var(--grad);
            color: #fff;
            transform: translateY(-6px) rotate(-6deg);
            box-shadow: 7px 7px 16px rgba(199, 69, 104, .45), -5px -5px 12px var(--sh-l);
        }

        .safe-item h6 {
            font-size: .92rem;
            margin-bottom: 4px;
        }

        .safe-item p {
            font-size: .78rem;
            color: var(--muted);
            margin: 0;
        }

        /* ---------- FAQ ---------- */
        .chat-shell {
            max-width: 780px;
            margin: 36px auto 0;
            border-radius: 32px;
            padding: 20px;
        }

        .chat-top {
            display: flex;
            align-items: center;
            gap: 13px;
            border-radius: 22px;
            padding: 13px 18px;
        }

        .chat-ava {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--grad);
            color: #fff;
            display: grid;
            place-items: center;
            box-shadow: 4px 4px 10px rgba(199, 69, 104, .4);
            flex-shrink: 0;
        }

        .chat-top b {
            font-family: 'Sora';
            font-size: .95rem;
            display: block;
        }

        .chat-top .online {
            font-size: .75rem;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .chat-top .online i {
            width: 8px;
            height: 8px;
            background: var(--green);
            border-radius: 50%;
            display: inline-block;
        }

        .chat-reset {
            margin-left: auto;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--bg);
            box-shadow: 4px 4px 8px var(--sh-d), -4px -4px 8px var(--sh-l);
            color: var(--muted);
            cursor: pointer;
            transition: all .25s;
        }

        .chat-reset:hover {
            color: var(--accent-2);
            transform: rotate(-40deg);
        }

        .chat-mid {
            border-radius: 22px;
            margin-top: 14px;
        }

        .chat-body {
            height: 330px;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .msg {
            max-width: 80%;
            padding: 12px 17px;
            font-size: .9rem;
            line-height: 1.55;
            border-radius: 18px;
            animation: pop .35s ease;
        }

        @keyframes pop {
            from {
                opacity: 0;
                transform: translateY(10px) scale(.96);
            }
        }

        .msg.bot {
            align-self: flex-start;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            border-bottom-left-radius: 6px;
            color: var(--ink);
        }

        .msg.user {
            align-self: flex-end;
            background: var(--grad);
            color: #fff;
            box-shadow: 5px 5px 12px rgba(199, 69, 104, .38);
            border-bottom-right-radius: 6px;
            font-weight: 500;
        }

        .msg.typing {
            display: flex;
            gap: 5px;
            padding: 16px 20px;
        }

        .msg.typing span {
            width: 7px;
            height: 7px;
            background: var(--accent);
            border-radius: 50%;
            animation: tp 1s infinite;
        }

        .msg.typing span:nth-child(2) {
            animation-delay: .15s;
        }

        .msg.typing span:nth-child(3) {
            animation-delay: .3s;
        }

        @keyframes tp {

            0%,
            60%,
            100% {
                transform: translateY(0);
                opacity: .45;
            }

            30% {
                transform: translateY(-6px);
                opacity: 1;
            }
        }

        .chat-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 16px 6px 4px;
        }

        .q-chip {
            padding: 9px 16px;
            border-radius: 30px;
            border: none;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            font-size: .82rem;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            transition: all .25s;
        }

        .q-chip:hover {
            color: var(--accent-2);
            transform: translateY(-2px);
        }

        .q-chip.used {
            box-shadow: inset 4px 4px 8px var(--sh-d2), inset -4px -4px 8px var(--sh-l);
            color: var(--muted);
            pointer-events: none;
        }

        .faq-note {
            text-align: center;
            color: var(--muted);
            font-size: .88rem;
            margin-top: 22px;
        }

        .faq-note a {
            color: var(--accent-2);
            font-weight: 600;
        }

        /* ---------- Newsletter ---------- */
        .news-panel {
            border-radius: 38px;
            padding: 54px 48px;
        }

        .mail-badge {
            width: 92px;
            height: 92px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--accent);
            font-size: 2rem;
            position: relative;
            margin-bottom: 24px;
        }

        .mail-badge::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(221, 92, 128, .35);
            animation: ping 2.4s infinite;
        }

        @keyframes ping {
            70% {
                box-shadow: 0 0 0 24px rgba(221, 92, 128, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(221, 92, 128, 0);
            }
        }

        .news-panel h3 {
            font-size: 1.9rem;
            font-weight: 700;
            margin-bottom: 14px;
        }

        .news-panel .n-sub {
            color: var(--muted);
            font-size: .96rem;
        }

        .readers {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 24px;
        }

        .readers .mini-av {
            width: 34px;
            height: 34px;
            font-size: .75rem;
        }

        .readers small {
            color: var(--muted);
            font-size: .84rem;
        }

        .readers small b {
            color: var(--ink);
        }

        .inset-field {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 18px;
            border-radius: 18px;
            background: var(--bg);
            box-shadow: inset 5px 5px 10px var(--sh-d2), inset -5px -5px 10px var(--sh-l);
            position: relative;
        }

        .inset-field>i {
            color: var(--accent);
            font-size: 1.05rem;
        }

        .inset-field input,
        .inset-field select,
        .inset-field textarea {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            padding: 13px 0;
            font: inherit;
            font-size: .93rem;
            color: var(--ink);
        }

        .inset-field input::placeholder,
        .inset-field textarea::placeholder {
            color: #a99aa3;
        }

        .inset-field select {
            appearance: none;
            cursor: pointer;
            padding-right: 34px;
        }

        .inset-field textarea {
            resize: vertical;
            min-height: 118px;
        }

        .f-chev {
            position: absolute;
            right: 16px;
            pointer-events: none;
            color: var(--muted);
            font-size: .85rem;
        }

        .check-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            margin: 4px 0 18px;
        }

        .check-row input {
            display: none;
        }

        .cbox {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background: var(--bg);
            box-shadow: inset 3px 3px 6px var(--sh-d2), inset -3px -3px 6px var(--sh-l);
            display: grid;
            place-items: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .cbox i {
            font-size: .8rem;
            color: var(--accent);
            opacity: 0;
            transform: scale(.4);
            transition: all .25s;
        }

        .check-row input:checked~.cbox i {
            opacity: 1;
            transform: scale(1);
        }

        .check-row span.ctext {
            font-size: .82rem;
            color: var(--muted);
            line-height: 1.5;
        }

        /* ---------- Contact ---------- */
        .contact-medals {
            display: flex;
            justify-content: center;
            gap: 44px;
            flex-wrap: wrap;
            margin-bottom: 54px;
        }

        .medal {
            text-align: center;
            width: 200px;
        }

        .medal a {
            width: 108px;
            height: 108px;
            border-radius: 50%;
            margin: 0 auto 16px;
            display: grid;
            place-items: center;
            background: var(--bg);
            box-shadow: 8px 8px 18px var(--sh-d), -8px -8px 18px var(--sh-l);
            color: var(--accent);
            font-size: 1.9rem;
            transition: all .3s ease;
        }

        .medal a:hover {
            background: var(--grad);
            color: #fff;
            transform: translateY(-7px);
            box-shadow: 9px 10px 22px rgba(199, 69, 104, .45), -6px -6px 14px var(--sh-l);
        }

        .medal h6 {
            font-size: 1rem;
            margin-bottom: 3px;
        }

        .medal p {
            font-size: .84rem;
            color: var(--muted);
            margin: 0;
        }

        .c-panel {
            border-radius: 32px;
            padding: 36px;
            height: 100%;
        }

        .c-panel h4 {
            font-size: 1.35rem;
            margin-bottom: 6px;
        }

        .c-panel .c-sub {
            color: var(--muted);
            font-size: .9rem;
            margin-bottom: 24px;
        }

        .h-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 18px;
            border-radius: 16px;
            background: var(--bg);
            box-shadow: inset 4px 4px 8px var(--sh-d2), inset -4px -4px 8px var(--sh-l);
            margin-bottom: 12px;
            font-size: .88rem;
        }

        .h-row b {
            font-weight: 600;
        }

        .h-row span {
            color: var(--muted);
        }

        .h-row .live {
            color: var(--green);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .follow-row {
            display: flex;
            gap: 14px;
            margin-top: 6px;
        }

        .soc {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--bg);
            box-shadow: 5px 5px 10px var(--sh-d), -5px -5px 10px var(--sh-l);
            color: var(--accent);
            font-size: 1.05rem;
            transition: all .3s;
        }

        .soc:hover {
            background: var(--grad);
            color: #fff;
            transform: translateY(-5px);
            box-shadow: 6px 6px 14px rgba(199, 69, 104, .45);
        }

        .side-card {
            border-radius: 28px;
            padding: 28px;
        }

        .side-card h5 {
            font-size: 1.08rem;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .side-card h5 i {
            color: var(--accent);
        }

        /* ---------- Footer ---------- */
        footer {
            padding: 76px 0 30px;
            margin-top: 30px;
        }

        .foot-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 44px;
        }

        .f-brand p {
            color: var(--muted);
            font-size: .92rem;
            margin: 16px 0 20px;
            max-width: 300px;
        }

        .f-col h6 {
            font-size: .95rem;
            margin-bottom: 18px;
            color: var(--ink);
        }

        .f-col ul {
            list-style: none;
            padding: 0;
        }

        .f-col li {
            margin-bottom: 11px;
        }

        .f-col a {
            color: var(--muted);
            font-size: .9rem;
            transition: all .25s;
            display: inline-block;
        }

        .f-col a:hover {
            color: var(--accent-2);
            transform: translateX(6px);
        }

        .f-col .legal-note {
            color: var(--muted);
            font-size: .82rem;
            margin-bottom: 14px;
        }

        .foot-bar {
            margin-top: 54px;
            border-radius: 22px;
            padding: 17px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            font-size: .85rem;
            color: var(--muted);
        }

        .foot-bar i {
            color: var(--accent);
        }

        .foot-bar a {
            color: var(--muted);
            font-weight: 600;
        }

        .foot-bar a:hover {
            color: var(--accent-2);
        }

        @media (max-width: 991px) {
            .foot-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 575px) {
            .foot-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
        }

        /* ---------- Modals — Z-INDEX FIX ---------- */
        .modal-backdrop {
            z-index: 1990 !important;
        }

        .modal {
            z-index: 2000 !important;
        }

        .modal-content {
            background: var(--bg);
            border: none;
            border-radius: 30px;
            box-shadow: 20px 20px 60px rgba(120, 100, 112, .4);
        }

        .modal-header {
            border-bottom: none;
            padding: 26px 30px 6px;
        }

        .modal-title {
            font-family: 'Sora';
            font-weight: 700;
            color: var(--accent-2);
        }

        .modal-body {
            padding: 10px 30px 18px;
        }

        .modal-body h6 {
            color: var(--ink);
            margin-top: 20px;
        }

        .modal-body p {
            color: var(--muted);
        }

        .modal-footer {
            border-top: none;
            padding: 8px 26px 26px;
        }

        /* ---------- Toast ---------- */
        .toast-nm {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 3000;
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--bg);
            padding: 16px 22px;
            border-radius: 22px;
            box-shadow: 12px 12px 30px rgba(120, 100, 112, .4), -8px -8px 20px var(--sh-l);
            max-width: 340px;
            transform: translateX(calc(100% + 50px));
            transition: transform .55s cubic-bezier(.55, -.25, .3, 1.3);
        }

        .toast-nm.show {
            transform: none;
        }

        .t-ic {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--grad);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 1.2rem;
            flex-shrink: 0;
            box-shadow: 4px 4px 10px rgba(199, 69, 104, .4);
        }

        .toast-nm h6 {
            margin: 0;
            font-size: .95rem;
        }

        .toast-nm p {
            margin: 0;
            color: var(--muted);
            font-size: .82rem;
        }

        #toTop {
            position: fixed;
            bottom: 26px;
            right: 26px;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: none;
            background: var(--bg);
            box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l);
            color: var(--accent);
            font-size: 1.15rem;
            cursor: pointer;
            z-index: 1500;
            opacity: 0;
            visibility: hidden;
            transform: translateY(18px);
            transition: all .35s ease;
        }

        #toTop.show {
            opacity: 1;
            visibility: visible;
            transform: none;
        }

        #toTop:hover {
            color: var(--accent-2);
            transform: translateY(-4px);
        }

        .flatpickr-day.selected,
        .flatpickr-day.selected:hover {
            background: var(--accent);
            border-color: var(--accent);
        }

        .flatpickr-day.today {
            border-color: var(--accent);
        }

        .flatpickr-day:hover {
            background: rgba(221, 92, 128, .12);
        }

        @media (max-width: 575px) {
            #home {
                padding-top: 130px;
            }

            .float-chip {
                display: none;
            }

            .news-panel {
                padding: 36px 24px;
            }

            .c-panel {
                padding: 26px 20px;
            }

            .shield-ring {
                width: 250px;
                height: 250px;
            }

            .shield-core {
                width: 196px;
                height: 196px;
            }

            .story-copy {
                padding-left: 6px;
            }

            .contact-medals {
                gap: 30px;
            }

            .orbit-frame {
                max-width: 340px;
            }

            .orbit-item {
                width: 70px;
                height: 70px;
                margin: -35px 0 0 -35px;
                font-size: 1.3rem;
            }

            .orbit-center {
                width: 140px;
                height: 140px;
            }

            .orbit-center i {
                font-size: 2.8rem;
            }
        }

/* Extracted from original homepage sections */
#home {
                position: relative;
                padding: 200px 0 120px;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                overflow: hidden;
            }

            /* Ambient CSS Background Shapes */
            .nx-ambient-shape {
                position: absolute;
                border-radius: 50%;
                filter: blur(80px);
                z-index: -1;
                animation: nx-pulse 8s infinite alternate ease-in-out;
            }

            .nx-shape-1 {
                width: 400px;
                height: 400px;
                background: rgba(221, 92, 128, 0.2);
                top: 10%;
                left: 10%;
            }

            .nx-shape-2 {
                width: 500px;
                height: 500px;
                background: rgba(233, 161, 59, 0.15);
                bottom: -10%;
                right: 5%;
                animation-delay: -4s;
            }

            @keyframes nx-pulse {
                0% {
                    transform: scale(1) translate(0, 0);
                }

                100% {
                    transform: scale(1.2) translate(30px, -30px);
                }
            }

            .nx-hero-content {
                position: relative;
                z-index: 10;
                max-width: 900px;
                margin: 0 auto;
            }

            .nx-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 24px;
                background: var(--sh-l);
                border-radius: 50px;
                font-size: 0.85rem;
                font-weight: 700;
                color: var(--accent-2);
                text-transform: uppercase;
                letter-spacing: 2px;
                box-shadow: 0 10px 30px rgba(150, 130, 142, 0.15);
                margin-bottom: 30px;
                border: 1px solid rgba(221, 92, 128, 0.1);
            }

            .nx-title {
                font-size: clamp(3rem, 6vw, 5.5rem);
                font-family: 'Sora', sans-serif;
                font-weight: 800;
                line-height: 1.1;
                color: var(--ink);
                margin-bottom: 24px;
                letter-spacing: -1.5px;
            }

            .nx-title span {
                background: var(--grad);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                display: inline-block;
                position: relative;
            }

            .nx-subtitle {
                font-size: 1.15rem;
                color: var(--muted);
                max-width: 600px;
                margin: 0 auto 48px;
                line-height: 1.7;
            }

            /* Interactive Finder Bar */
            .nx-finder-bar {
                display: flex;
                align-items: center;
                background: var(--sh-l);
                padding: 12px;
                border-radius: 60px;
                box-shadow: 0 20px 40px rgba(150, 130, 142, 0.2);
                max-width: 750px;
                margin: 0 auto;
                border: 1px solid rgba(221, 92, 128, 0.15);
                flex-wrap: wrap;
            }

            .nx-finder-segment {
                flex: 1;
                display: flex;
                flex-direction: column;
                text-align: left;
                padding: 10px 24px;
                border-right: 1px solid var(--bg);
                min-width: 150px;
            }

            .nx-finder-segment:last-of-type {
                border-right: none;
            }

            .nx-finder-label {
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                color: var(--muted);
                margin-bottom: 4px;
                letter-spacing: 1px;
            }

            .nx-finder-input {
                border: none;
                background: transparent;
                font-family: 'Poppins', sans-serif;
                font-size: 1rem;
                font-weight: 600;
                color: var(--ink);
                outline: none;
                width: 100%;
                cursor: pointer;
                appearance: none;
            }

            .nx-finder-btn {
                background: var(--grad);
                color: #fff;
                border: none;
                height: 60px;
                width: 60px;
                border-radius: 50%;
                font-size: 1.5rem;
                display: grid;
                place-items: center;
                cursor: pointer;
                transition: transform 0.3s, box-shadow 0.3s;
                box-shadow: 0 10px 20px rgba(221, 92, 128, 0.4);
                flex-shrink: 0;
            }

            .nx-finder-btn:hover {
                transform: scale(1.05);
                box-shadow: 0 15px 25px rgba(221, 92, 128, 0.5);
            }

            /* Floating UI Cards */
            .nx-float-card {
                position: absolute;
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(16px);
                border: 1px solid rgba(255, 255, 255, 0.6);
                padding: 16px 24px;
                border-radius: 20px;
                box-shadow: 0 15px 35px rgba(150, 130, 142, 0.15);
                display: flex;
                align-items: center;
                gap: 16px;
                z-index: 5;
                animation: nx-float 6s ease-in-out infinite;
                text-align: left;
            }

            .nx-fc-1 {
                top: 20%;
                left: 5%;
                animation-delay: 0s;
            }

            .nx-fc-2 {
                top: 30%;
                right: 5%;
                animation-delay: -2s;
            }

            .nx-fc-3 {
                bottom: 15%;
                left: 15%;
                animation-delay: -4s;
            }

            .nx-fc-icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: var(--bg2);
                color: var(--accent);
                display: grid;
                place-items: center;
                font-size: 1.4rem;
            }

            .nx-fc-text h5 {
                font-size: 0.95rem;
                margin: 0 0 2px;
                font-weight: 700;
                font-family: 'Poppins', sans-serif;
            }

            .nx-fc-text p {
                font-size: 0.8rem;
                margin: 0;
                color: var(--muted);
            }

            @keyframes nx-float {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-15px);
                }
            }

            @media (max-width: 991px) {
                .nx-float-card {
                    display: none;
                }

                .nx-finder-bar {
                    border-radius: 24px;
                    flex-direction: column;
                    padding: 20px;
                    gap: 15px;
                }

                .nx-finder-segment {
                    border-right: none;
                    border-bottom: 1px solid var(--bg);
                    width: 100%;
                    padding: 10px 0;
                }

                .nx-finder-segment:last-of-type {
                    border-bottom: none;
                }

                .nx-finder-btn {
                    width: 100%;
                    border-radius: 16px;
                    height: 55px;
                    margin-top: 10px;
                }
            }

#about {
                padding: 100px 0;
                background: var(--bg2);
                position: relative;
            }

            .nb-header {
                text-align: center;
                margin-bottom: 60px;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }

            .nb-title {
                font-size: clamp(2rem, 4vw, 3rem);
                font-weight: 800;
                margin-top: 16px;
                line-height: 1.2;
            }

            /* Bento Grid Container */
            .nb-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: minmax(280px, auto);
                gap: 24px;
            }

            /* Bento Cards */
            .nb-card {
                background: var(--sh-l);
                border-radius: 32px;
                padding: 40px;
                box-shadow: 0 15px 35px rgba(150, 130, 142, 0.08);
                display: flex;
                flex-direction: column;
                position: relative;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.8);
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .nb-card:hover {
                transform: translateY(-8px);
            }

            /* Big Feature Card (Spans 2 columns) */
            .nb-card.featured {
                grid-column: span 2;
                background: var(--grad);
                color: white;
            }

            /* Tall Feature Card (Spans 2 rows) */
            .nb-card.tall {
                grid-row: span 2;
                justify-content: center;
                text-align: center;
                background: linear-gradient(180deg, var(--sh-l) 0%, var(--bg) 100%);
            }

            .nb-card-icon {
                font-size: 2.5rem;
                margin-bottom: 24px;
                display: inline-block;
            }

            .featured .nb-card-icon {
                color: rgba(255, 255, 255, 0.9);
                font-size: 3rem;
            }

            .nb-card.tall .nb-card-icon {
                font-size: 4.5rem;
                background: var(--grad);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: 30px;
            }

            .nb-card h3 {
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: 12px;
            }

            .featured h3 {
                color: white;
                font-size: 2rem;
            }

            .nb-card p {
                color: var(--muted);
                font-size: 0.95rem;
                line-height: 1.7;
                margin: 0;
            }

            .featured p {
                color: rgba(255, 255, 255, 0.85);
                font-size: 1.05rem;
                max-width: 400px;
            }

            /* Decorative elements inside cards */
            .nb-deco-circle {
                position: absolute;
                right: -10%;
                bottom: -20%;
                width: 300px;
                height: 300px;
                border-radius: 50%;
                border: 40px solid rgba(255, 255, 255, 0.1);
                pointer-events: none;
            }

            .nb-stat {
                font-family: 'Sora', sans-serif;
                font-size: 4rem;
                font-weight: 800;
                color: var(--accent);
                line-height: 1;
                margin-bottom: 10px;
            }

            @media (max-width: 991px) {
                .nb-grid {
                    grid-template-columns: repeat(2, 1fr);
                }

                .nb-card.tall {
                    grid-row: auto;
                    grid-column: span 2;
                }
            }

            @media (max-width: 767px) {
                .nb-grid {
                    grid-template-columns: 1fr;
                }

                .nb-card.featured,
                .nb-card.tall {
                    grid-column: span 1;
                }

                .nb-card {
                    padding: 30px;
                }
            }

/* Shared standalone-page heading and legal layouts */
.page-heading { padding: 142px 0 54px; text-align: center; background: linear-gradient(145deg, #f2eff7, #e9e5f1); }
.page-heading .container { max-width: 920px; }
.page-heading h1 { font-family: 'Sora', sans-serif; font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 700; color: var(--ink); margin: 12px 0; }
.page-heading p { color: var(--muted); max-width: 700px; margin: 0 auto; }
.page-legal { padding: 62px 0 96px; }
.page-legal .legal-card { max-width: 920px; margin: 0 auto; padding: clamp(24px, 5vw, 52px); border-radius: 28px; background: var(--bg2); box-shadow: 12px 12px 30px var(--sh-d), -12px -12px 30px var(--sh-l); }
.page-legal h6 { margin-top: 22px; color: var(--accent-2); font-weight: 700; }
.page-legal h6:first-child { margin-top: 0; }
.page-legal p { color: var(--muted); }
.standalone-unsub { max-width: 620px; margin: 0 auto; padding: clamp(24px, 5vw, 42px); border-radius: 28px; background: var(--bg2); box-shadow: 12px 12px 30px var(--sh-d), -12px -12px 30px var(--sh-l); }
.footer-page-links { display: flex; gap: 10px 20px; flex-wrap: wrap; }
@media(max-width:767px) { .page-heading { padding: 120px 0 40px; } .page-legal { padding: 40px 0 66px; } }