.sweetmate-fluffy-page {
    --sweetmate-purple: #6c38d5;
    --sweetmate-purple-deep: #2f225c;
    --sweetmate-cyan: #74e1e8;
    --sweetmate-cyan-soft: #e9fbfc;
    --sweetmate-coral: #ff7d6e;
    --sweetmate-ink: #211b3f;
    --sweetmate-muted: #6c6680;
    --sweetmate-line: rgba(108, 56, 213, 0.14);
    --sweetmate-shadow: 0 18px 44px rgba(47, 34, 92, 0.14);
    background:
        linear-gradient(180deg, #fbfdff 0%, #ffffff 36%, #fbf9ff 100%);
    color: var(--sweetmate-ink);
}

.sweetmate-fluffy-page .text-primary,
.sweetmate-fluffy-page .uil-check-circle {
    color: var(--sweetmate-purple) !important;
}

.sweetmate-fluffy-page .bg-primary,
.sweetmate-fluffy-page .text-bg-primary {
    background-color: var(--sweetmate-purple) !important;
}

.sweetmate-fluffy-page .btn-primary {
    background: var(--sweetmate-purple);
    border-color: var(--sweetmate-purple);
    box-shadow: 0 12px 24px rgba(108, 56, 213, 0.22);
}

.sweetmate-fluffy-page .btn-primary:hover,
.sweetmate-fluffy-page .btn-primary:focus {
    background: #5d2fc1;
    border-color: #5d2fc1;
}

.sweetmate-fluffy-page .btn-dark {
    background: var(--sweetmate-purple-deep);
    border-color: var(--sweetmate-purple-deep);
    box-shadow: 0 12px 24px rgba(47, 34, 92, 0.2);
}

.sweetmate-fluffy-page #topnav {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--sweetmate-line);
    backdrop-filter: blur(14px);
}

.sweetmate-fluffy-page #topnav .container {
    min-height: 82px;
}

.sweetmate-fluffy-page #topnav .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 82px;
}

.sweetmate-fluffy-page #topnav .logo img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(108, 56, 213, 0.22));
}

.sweetmate-wordmark {
    color: var(--sweetmate-purple-deep);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0;
}

.sweetmate-fluffy-page #topnav .navigation-menu > li > a {
    color: var(--sweetmate-purple-deep);
    font-weight: 700;
}

.sweetmate-fluffy-page #topnav .navigation-menu > li.active > a,
.sweetmate-fluffy-page #topnav .navigation-menu > li:hover > a {
    color: var(--sweetmate-purple) !important;
}

.sweetmate-fluffy-page .navbar-toggle span {
    background-color: var(--sweetmate-purple-deep);
}

.sweetmate-hero {
    position: relative;
    min-height: 620px;
    padding: 92px 0 34px;
    background:
        linear-gradient(135deg, #ffffff 0%, var(--sweetmate-cyan-soft) 48%, #f5eeff 100%);
}

.sweetmate-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        linear-gradient(rgba(108, 56, 213, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108, 56, 213, 0.055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 78%);
    pointer-events: none;
}

.sweetmate-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    border: 1px solid rgba(116, 225, 232, 0.65);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 30px rgba(116, 225, 232, 0.24);
    color: var(--sweetmate-purple-deep);
    font-size: 0.9rem;
    font-weight: 800;
}

.sweetmate-kicker img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.sweetmate-fluffy-page .title-heading .heading {
    max-width: 690px;
    color: var(--sweetmate-ink);
    letter-spacing: 0;
}

.sweetmate-fluffy-page .title-heading strong {
    color: var(--sweetmate-purple-deep);
}

.sweetmate-fluffy-page .text-muted {
    color: var(--sweetmate-muted) !important;
}

.sweetmate-actions img {
    border-radius: 8px;
    box-shadow: 0 14px 28px rgba(47, 34, 92, 0.16);
}

.sweetmate-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.sweetmate-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--sweetmate-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--sweetmate-purple-deep);
    font-size: 0.9rem;
    font-weight: 700;
}

.sweetmate-hero-points .sweetmate-icon {
    width: 18px;
    height: 18px;
    color: var(--sweetmate-coral);
    stroke: currentColor;
    stroke-width: 2.4;
}

.sweetmate-fluffy-page i[class*="uil-"]::before {
    display: inline-block;
    font-style: normal;
    line-height: 1;
}

.sweetmate-fluffy-page .uil-cloud-check::before {
    content: "\2601";
}

.sweetmate-fluffy-page .uil-user-md::before,
.sweetmate-fluffy-page .uil-user::before {
    content: "\25CF";
}

.sweetmate-fluffy-page .uil-users-alt::before {
    content: "\25C6";
}

.sweetmate-fluffy-page .uil-heart-medical::before,
.sweetmate-fluffy-page .uil-comment-heart::before {
    content: "\2665";
}

.sweetmate-fluffy-page .uil-bluetooth-b::before {
    content: "B";
}

.sweetmate-fluffy-page .uil-chart-line::before {
    content: "\2197";
}

.sweetmate-fluffy-page .uil-check-circle::before {
    content: "\2713";
}

.sweetmate-fluffy-page .uil-google-play::before {
    content: "\25B6";
}

.sweetmate-phone-stage {
    min-height: 470px;
    padding: 28px 18px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(233, 251, 252, 0.62));
    box-shadow: var(--sweetmate-shadow);
}

.sweetmate-phone-stage::after {
    position: absolute;
    right: 34px;
    bottom: 34px;
    left: 34px;
    height: 28px;
    content: "";
    border-radius: 50%;
    background: rgba(47, 34, 92, 0.16);
    filter: blur(16px);
    z-index: -1;
}

.sweetmate-phone-stage > .img-fluid {
    position: relative;
    z-index: 2;
    max-height: 450px;
    filter: drop-shadow(0 24px 30px rgba(47, 34, 92, 0.18));
}

.sweetmate-mascot-float {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 16px 18px rgba(108, 56, 213, 0.28));
}

.sweetmate-fluffy-page .section {
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #fbf9ff 100%);
}

.sweetmate-content {
    position: relative;
    padding-top: 84px;
}

.sweetmate-content::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 360px;
    content: "";
    background:
        linear-gradient(180deg, rgba(245, 238, 255, 0.58), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.sweetmate-section {
    position: relative;
}

.sweetmate-section + .sweetmate-section {
    margin-top: 96px;
}

.sweetmate-section-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(116, 225, 232, 0.62);
    border-radius: 999px;
    background: rgba(233, 251, 252, 0.78);
    color: var(--sweetmate-purple-deep);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sweetmate-fluffy-page .section-title .title,
.sweetmate-fluffy-page .sweetmate-feature-card h3,
.sweetmate-fluffy-page .sweetmate-person-card h3 {
    color: var(--sweetmate-ink);
    letter-spacing: 0;
}

.sweetmate-soft-visual,
.sweetmate-person-card,
.sweetmate-feature-card,
.sweetmate-phone-card,
.sweetmate-stats-visual,
.sweetmate-download-panel {
    border-radius: 8px !important;
}

.sweetmate-soft-visual {
    position: relative;
    padding: 22px;
    border: 1px solid var(--sweetmate-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(233, 251, 252, 0.7));
    box-shadow: var(--sweetmate-shadow);
}

.sweetmate-soft-visual img {
    border-radius: 8px;
    box-shadow: 0 18px 34px rgba(47, 34, 92, 0.12);
}

.sweetmate-floating-note {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 28px rgba(47, 34, 92, 0.12);
    color: var(--sweetmate-purple-deep);
    font-weight: 800;
}

.sweetmate-floating-note .sweetmate-icon {
    width: 18px;
    height: 18px;
    color: var(--sweetmate-coral);
    stroke: currentColor;
    stroke-width: 2.4;
}

.sweetmate-note-top {
    top: 34px;
    right: -12px;
}

.sweetmate-note-bottom {
    left: -12px;
    bottom: 36px;
}

.sweetmate-check-list {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.sweetmate-check-list div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--sweetmate-purple-deep);
    font-weight: 700;
}

.sweetmate-check-list .sweetmate-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--sweetmate-coral);
    stroke: currentColor;
    stroke-width: 2.5;
}

.sweetmate-person-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sweetmate-line);
    background: #ffffff;
    box-shadow: var(--sweetmate-shadow);
}

.sweetmate-person-card img {
    width: 100%;
    aspect-ratio: 1 / 0.78;
    object-fit: cover;
}

.sweetmate-person-card div {
    padding: 22px;
}

.sweetmate-person-card .sweetmate-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: var(--sweetmate-cyan-soft);
    color: var(--sweetmate-purple-deep);
    stroke: currentColor;
    stroke-width: 2.3;
}

.sweetmate-person-card h3,
.sweetmate-feature-card h3 {
    margin-bottom: 9px;
    font-size: 1.08rem;
    font-weight: 800;
}

.sweetmate-person-card p,
.sweetmate-feature-card p {
    margin-bottom: 0;
    color: var(--sweetmate-muted);
}

.sweetmate-phone-card {
    display: inline-block;
    padding: 18px;
    border: 1px solid var(--sweetmate-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 238, 255, 0.7));
    box-shadow: var(--sweetmate-shadow);
}

.sweetmate-phone-card img {
    max-height: 640px;
    border-radius: 8px;
    filter: drop-shadow(0 22px 30px rgba(47, 34, 92, 0.16));
}

.sweetmate-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sweetmate-feature-card {
    min-height: 184px;
    padding: 24px;
    border: 1px solid var(--sweetmate-line);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 32px rgba(47, 34, 92, 0.08);
}

.sweetmate-feature-card .sweetmate-icon {
    width: 42px;
    height: 42px;
    padding: 10px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(116, 225, 232, 0.2);
    color: var(--sweetmate-purple);
    stroke: currentColor;
    stroke-width: 2.3;
}

.sweetmate-stats-section {
    padding: 54px;
    border: 1px solid var(--sweetmate-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(233, 251, 252, 0.68) 52%, rgba(245, 238, 255, 0.92));
    box-shadow: var(--sweetmate-shadow);
}

.sweetmate-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.sweetmate-stat-pills span {
    padding: 8px 12px;
    border: 1px solid var(--sweetmate-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--sweetmate-purple-deep);
    font-weight: 800;
}

.sweetmate-stats-visual {
    padding: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.sweetmate-stats-visual img {
    filter: drop-shadow(0 20px 28px rgba(47, 34, 92, 0.16));
}

.sweetmate-download-panel {
    padding: 56px;
    border: 1px solid rgba(116, 225, 232, 0.52);
    background:
        radial-gradient(circle at 16% 26%, rgba(116, 225, 232, 0.32), transparent 28%),
        linear-gradient(135deg, #ffffff, #f5eeff);
    box-shadow: var(--sweetmate-shadow);
}

.sweetmate-download-mascot {
    display: inline-grid;
    width: min(230px, 70vw);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 20px 42px rgba(108, 56, 213, 0.16);
}

.sweetmate-download-mascot img {
    width: 78%;
    filter: drop-shadow(0 18px 22px rgba(108, 56, 213, 0.24));
}

.sweetmate-fluffy-page .shadow,
.sweetmate-fluffy-page .shadow-md {
    box-shadow: var(--sweetmate-shadow) !important;
}

@media (max-width: 991.98px) {
    .sweetmate-hero {
        min-height: auto;
        padding: 82px 0 56px;
    }

    .sweetmate-phone-stage {
        min-height: auto;
        margin-top: 20px;
    }

    .sweetmate-mascot-float {
        width: 86px;
        height: 86px;
    }

    .sweetmate-section + .sweetmate-section {
        margin-top: 72px;
    }

    .sweetmate-feature-grid {
        grid-template-columns: 1fr;
    }

    .sweetmate-stats-section,
    .sweetmate-download-panel {
        padding: 34px;
    }

    .sweetmate-note-top {
        right: 10px;
    }

    .sweetmate-note-bottom {
        left: 10px;
    }
}

@media (max-width: 767.98px) {
    .sweetmate-fluffy-page #topnav .container,
    .sweetmate-fluffy-page #topnav .logo {
        min-height: 72px;
    }

    .sweetmate-fluffy-page #topnav .logo img {
        width: 48px;
        height: 48px;
    }

    .sweetmate-wordmark {
        font-size: 1rem;
    }

    .sweetmate-hero {
        padding-top: 80px;
        padding-bottom: 28px;
    }

    .sweetmate-hero-points {
        display: flex;
    }

    .sweetmate-hero-points span {
        flex: 1 1 150px;
    }

    .sweetmate-phone-stage {
        max-height: 180px;
        padding: 18px 10px;
        overflow: hidden;
    }

    .sweetmate-phone-stage > .img-fluid {
        max-height: 220px;
    }

    .sweetmate-mascot-float {
        width: 64px;
        height: 64px;
    }

    .sweetmate-content {
        padding-top: 64px;
    }

    .sweetmate-section + .sweetmate-section {
        margin-top: 58px;
    }

    .sweetmate-soft-visual,
    .sweetmate-phone-card,
    .sweetmate-stats-section,
    .sweetmate-download-panel {
        padding: 18px;
    }

    .sweetmate-floating-note {
        position: static;
        margin-top: 12px;
    }

    .sweetmate-person-card img {
        aspect-ratio: 1 / 0.66;
    }

    .sweetmate-feature-card {
        min-height: auto;
        padding: 20px;
    }

    .sweetmate-stat-pills {
        display: grid;
        grid-template-columns: 1fr;
    }
}