:root {
            --navy: #6a0dad;
            --navy-dark: #4a0a78;
            --navy-pale: #f3e8fb;
            --gold: #ff7a1a;
            --gold-light: #ff9a4d;
            --gold-pale: #fff0e3;
            --pink: #e91e7a;
            --pink-dark: #c4156a;
            --pink-pale: #fde8f1;
            --cream: #fffaf9;
            --paper: #fdf6f8;
            --dark: #1a1a1a;
            --text: #3d3d3d;
            --muted: #737373;
            --border: #f0dde8;
            --white: #ffffff;
            --radius: 16px;
            --shadow: 0 8px 30px rgba(106,13,173,0.10);
            --shadow-lg: 0 22px 60px rgba(106,13,173,0.16);
            --brand-gradient: linear-gradient(120deg,#6a0dad 0%,#e91e7a 55%,#ff7a1a 100%);
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Outfit',sans-serif;
            color: var(--text);
            background: var(--cream);
            overflow-x: hidden
        }

        a {
            text-decoration: none;
            color: inherit
        }

        ul {
            list-style: none
        }

        img {
            max-width: 100%
        }

        ::-webkit-scrollbar {
            width: 6px
        }

        ::-webkit-scrollbar-track {
            background: var(--navy-pale)
        }

        ::-webkit-scrollbar-thumb {
            background: var(--navy);
            border-radius: 10px
        }

        /* ── HEADER ── */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(253,250,244,0.96);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: 12px 5%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 20px rgba(30,58,95,.05);
        }

        .logo-wrap {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .logo-mark {
            width: 46px;
            height: 46px;
            border-radius: 11px;
            overflow: hidden;
            flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(106,13,173,.25)
        }

            .logo-mark img {
                width: 100%;
                height: 100%;
                object-fit: cover
            }

        .logo-text {
            font-family: 'Fraunces',serif;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: var(--navy);
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

            .logo-text span {
                color: var(--gold);
                -webkit-text-fill-color: var(--gold)
            }

        .logo-sub {
            font-size: .62rem;
            color: var(--muted);
            font-weight: 600;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            margin-top: 1px
        }

        nav {
            display: flex;
            gap: 26px;
            align-items: center
        }

            nav a {
                font-size: .88rem;
                font-weight: 600;
                color: var(--text);
                transition: color .2s;
                position: relative
            }

                nav a::after {
                    content: '';
                    position: absolute;
                    bottom: -4px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background: var(--gold);
                    border-radius: 2px;
                    transition: width .25s
                }

                nav a:hover::after {
                    width: 100%
                }

                nav a:hover {
                    color: var(--navy)
                }

        .header-actions {
            display: flex;
            gap: 9px;
            align-items: center
        }

        .btn-call, .btn-wa {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 9px 17px;
            border-radius: 8px;
            font-weight: 700;
            font-size: .83rem;
            transition: all .2s;
            border: none;
            cursor: pointer;
            font-family: 'Outfit',sans-serif
        }

        .btn-call {
            background: var(--navy);
            color: #fff
        }

            .btn-call:hover {
                background: var(--navy-dark);
                transform: translateY(-2px);
                box-shadow: 0 6px 18px rgba(30,58,95,.3)
            }

        .btn-wa {
            background: #25d366;
            color: #fff
        }

            .btn-wa:hover {
                background: #1ebe5d;
                transform: translateY(-2px);
                box-shadow: 0 6px 18px rgba(37,211,102,.35)
            }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px
        }

            .hamburger span {
                width: 22px;
                height: 2px;
                background: var(--navy);
                border-radius: 2px
            }

        .mob-nav {
            display: none;
            position: fixed;
            top: 68px;
            left: 0;
            right: 0;
            background: #fff;
            border-bottom: 1px solid var(--border);
            padding: 16px 5%;
            z-index: 999;
            flex-direction: column;
            gap: 2px;
            box-shadow: 0 10px 30px rgba(0,0,0,.08)
        }

            .mob-nav.open {
                display: flex
            }

            .mob-nav a {
                padding: 11px 0;
                font-weight: 700;
                color: var(--text);
                border-bottom: 1px solid var(--border);
                font-size: .92rem
            }

                .mob-nav a:last-child {
                    border: none
                }

        /* ── HERO ── */
        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            gap: 60px;
            padding: 120px 5% 60px;
            background: linear-gradient(135deg,#f6eefb 0%,var(--cream) 45%,var(--gold-pale) 100%);
            position: relative;
            overflow: hidden;
        }

            #hero::before {
                content: '';
                position: absolute;
                top: -130px;
                right: -160px;
                width: 560px;
                height: 560px;
                border-radius: 50%;
                background: radial-gradient(circle,rgba(106,13,173,.08) 0%,transparent 70%)
            }

            #hero::after {
                content: '';
                position: absolute;
                bottom: -90px;
                left: -100px;
                width: 380px;
                height: 380px;
                border-radius: 50%;
                background: radial-gradient(circle,rgba(255,122,26,.10) 0%,transparent 70%)
            }

        .hero-text {
            flex: 1.05;
            z-index: 1
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--navy-pale);
            border: 1.5px solid rgba(30,58,95,.18);
            color: var(--navy);
            padding: 6px 15px;
            border-radius: 50px;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 20px;
            animation: fadeUp .55s ease both
        }

            .hero-badge i {
                color: var(--gold)
            }

        .hero-title {
            font-family: 'Fraunces',serif;
            font-size: clamp(2.1rem,4.6vw,3.5rem);
            font-weight: 700;
            line-height: 1.16;
            color: var(--dark);
            animation: fadeUp .6s .08s ease both
        }

            .hero-title em {
                font-style: normal;
                color: var(--pink-dark)
            }

            .hero-title .accent {
                color: var(--gold)
            }

        .hero-desc {
            margin-top: 18px;
            font-size: 1.05rem;
            color: var(--muted);
            line-height: 1.75;
            max-width: 500px;
            animation: fadeUp .6s .16s ease both
        }

        .hero-btns {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            animation: fadeUp .6s .24s ease both
        }

        .btn-primary {
            background: var(--navy);
            color: #fff;
            padding: 14px 27px;
            border-radius: 9px;
            font-weight: 700;
            font-size: .93rem;
            display: flex;
            align-items: center;
            gap: 9px;
            transition: all .25s;
            box-shadow: 0 8px 22px rgba(30,58,95,.28)
        }

            .btn-primary:hover {
                background: var(--navy-dark);
                transform: translateY(-3px);
                box-shadow: 0 12px 30px rgba(30,58,95,.35)
            }

        .btn-secondary {
            background: #fff;
            color: var(--gold);
            padding: 14px 27px;
            border-radius: 9px;
            font-weight: 700;
            font-size: .93rem;
            border: 2px solid var(--gold);
            display: flex;
            align-items: center;
            gap: 9px;
            transition: all .25s
        }

            .btn-secondary:hover {
                background: var(--gold);
                color: #fff;
                transform: translateY(-3px)
            }

        .btn-ghost {
            background: transparent;
            color: var(--navy);
            padding: 14px 24px;
            border-radius: 9px;
            font-weight: 700;
            font-size: .93rem;
            border: 2px solid var(--navy-pale);
            display: flex;
            align-items: center;
            gap: 9px;
            transition: all .25s
        }

            .btn-ghost:hover {
                background: var(--navy-pale);
                transform: translateY(-3px)
            }

        .hero-stats {
            margin-top: 42px;
            display: flex;
            gap: 38px;
            flex-wrap: wrap;
            animation: fadeUp .6s .32s ease both
        }

        .stat {
            text-align: left
        }

        .stat-num {
            font-family: 'Fraunces',serif;
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--navy);
            line-height: 1
        }

            .stat-num.gold {
                color: var(--gold)
            }

        .stat-label {
            font-size: .78rem;
            color: var(--muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .4px;
            margin-top: 3px
        }

        .hero-visual {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            animation: fadeIn .8s .25s ease both
        }

        .desk-mock {
            width: 300px;
            background: #fff;
            border-radius: 22px;
            border: 1.5px solid var(--border);
            box-shadow: var(--shadow-lg);
            padding: 26px;
            position: relative;
            animation: float 4.5s ease-in-out infinite
        }

        @keyframes float {
            0%,100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-14px)
            }
        }

        .desk-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px
        }

        .desk-brand {
            font-family: 'Fraunces',serif;
            font-weight: 700;
            color: var(--navy);
            font-size: 1.05rem;
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
        }

            .desk-brand span {
                color: var(--gold);
                -webkit-text-fill-color: var(--gold)
            }

        .desk-cart {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            background: var(--navy);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem
        }

        .desk-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

        .desk-item {
            background: var(--paper);
            border-radius: 12px;
            padding: 14px 10px;
            text-align: center;
            border: 1px solid var(--border)
        }

            .desk-item .emoji {
                font-size: 1.7rem
            }

            .desk-item p {
                font-size: .68rem;
                font-weight: 700;
                color: var(--dark);
                margin-top: 5px
            }

            .desk-item .price {
                font-size: .66rem;
                color: var(--gold);
                font-weight: 800;
                margin-top: 2px
            }

        .desk-btn {
            margin-top: 14px;
            background: var(--gold);
            color: #fff;
            border: none;
            border-radius: 10px;
            width: 100%;
            padding: 11px;
            font-size: .85rem;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Outfit',sans-serif
        }

        .floating-badge {
            position: absolute;
            background: #fff;
            border-radius: 13px;
            padding: 9px 13px;
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: .78rem;
            font-weight: 700;
            z-index: 3
        }

            .floating-badge.top {
                top: 0;
                right: -30px;
                animation: float2 3.6s 1s ease-in-out infinite
            }

            .floating-badge.bottom {
                bottom: 30px;
                left: -44px;
                animation: float2 4s .5s ease-in-out infinite
            }

        .fb-icon {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem
        }

        .fb-navy {
            background: var(--navy-pale)
        }

        .fb-gold {
            background: var(--gold-pale)
        }

        @keyframes float2 {
            0%,100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-9px)
            }
        }

        /* ── SECTION COMMONS ── */
        section {
            padding: 84px 5%
        }

        .section-tag {
            display: inline-block;
            background: var(--navy-pale);
            color: var(--navy);
            padding: 5px 16px;
            border-radius: 50px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 14px
        }

            .section-tag.gold-tag {
                background: var(--gold-pale);
                color: var(--gold)
            }

        .section-title {
            font-family: 'Fraunces',serif;
            font-size: clamp(1.8rem,3.4vw,2.6rem);
            font-weight: 700;
            color: var(--dark);
            line-height: 1.22
        }

        .section-desc {
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.75;
            max-width: 560px;
            margin-top: 12px
        }

        .center {
            text-align: center
        }

            .center .section-desc {
                margin: 12px auto 0
            }

        /* ── ABOUT ── */
        #about {
            background: #fff
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
            max-width: 1120px;
            margin: 52px auto 0
        }

        .about-card {
            background: linear-gradient(150deg,var(--navy),var(--pink-dark) 60%,var(--navy-dark));
            border-radius: var(--radius);
            padding: 42px;
            color: #fff;
            position: relative;
            overflow: hidden
        }

            .about-card::before {
                content: '📚';
                position: absolute;
                font-size: 8.5rem;
                opacity: .09;
                bottom: -22px;
                right: -14px
            }

            .about-card h3 {
                font-family: 'Fraunces',serif;
                font-size: 1.6rem;
                font-weight: 700
            }

            .about-card p {
                margin-top: 10px;
                opacity: .85;
                line-height: 1.7;
                font-size: .95rem
            }

        .about-nums {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 26px
        }

        .about-num {
            background: rgba(255,255,255,.12);
            border-radius: 12px;
            padding: 15px;
            text-align: center
        }

            .about-num strong {
                font-family: 'Fraunces',serif;
                font-size: 1.5rem;
                font-weight: 700;
                display: block
            }

            .about-num span {
                font-size: .74rem;
                opacity: .8
            }

        .about-point {
            display: flex;
            gap: 15px;
            margin-top: 24px;
            align-items: flex-start
        }

        .ap-icon {
            width: 46px;
            height: 46px;
            border-radius: 13px;
            background: var(--navy-pale);
            color: var(--navy);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0
        }

            .ap-icon.gold {
                background: var(--gold-pale);
                color: var(--gold)
            }

        .ap-text h4 {
            font-weight: 700;
            font-size: .96rem;
            color: var(--dark)
        }

        .ap-text p {
            font-size: .86rem;
            color: var(--muted);
            margin-top: 4px;
            line-height: 1.6
        }

        /* ── PRODUCTS/SERVICES ── */
        #services {
            background: var(--paper)
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(330px,1fr));
            gap: 24px;
            max-width: 1120px;
            margin: 52px auto 0
        }

        .service-card {
            background: #fff;
            border-radius: var(--radius);
            padding: 32px 26px;
            text-align: center;
            border: 1.5px solid var(--border);
            transition: all .3s
        }

            .service-card:hover {
                border-color: var(--navy);
                transform: translateY(-6px);
                box-shadow: var(--shadow-lg)
            }

        .sc-icon {
            width: 66px;
            height: 66px;
            border-radius: 18px;
            margin: 0 auto 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem
        }

        .sc-navy {
            background: var(--navy-pale)
        }

        .sc-gold {
            background: var(--gold-pale)
        }

        .service-card h3 {
            font-family: 'Fraunces',serif;
            font-size: 1.12rem;
            font-weight: 700;
            color: var(--dark)
        }

        .service-card p {
            font-size: .86rem;
            color: var(--muted);
            margin-top: 9px;
            line-height: 1.65
        }

        /* ── FEATURES ── */
        #features {
            background: linear-gradient(125deg,var(--navy-dark) 0%,var(--navy) 35%,var(--pink) 68%,var(--gold) 100%);
            color: #fff
        }

        .features-inner {
            max-width: 1120px;
            margin: 0 auto
        }

        #features .section-tag {
            background: rgba(255,255,255,.16);
            color: #fff
        }

        #features .section-title {
            color: #fff
        }

        #features .section-desc {
            color: rgba(255,255,255,.78)
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(245px,1fr));
            gap: 24px;
            margin-top: 52px
        }

        .feature-card {
            background: rgba(255,255,255,.09);
            backdrop-filter: blur(10px);
            border-radius: var(--radius);
            padding: 28px 22px;
            border: 1.5px solid rgba(255,255,255,.13);
            transition: all .3s
        }

            .feature-card:hover {
                background: rgba(255,255,255,.16);
                transform: translateY(-4px)
            }

        .fc-icon {
            font-size: 2rem;
            margin-bottom: 14px
        }

        .feature-card h3 {
            font-family: 'Fraunces',serif;
            font-size: 1.1rem;
            font-weight: 700
        }

        .feature-card p {
            font-size: .85rem;
            opacity: .78;
            margin-top: 7px;
            line-height: 1.65
        }

        /* ── PRODUCT SHOWCASE ── */
        #showcase {
            background: #fff
        }

        .showcase-inner {
            max-width: 1120px;
            margin: 0 auto
        }

        .catalog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
            gap: 22px;
            margin-top: 52px
        }

        .cat-card {
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: all .3s;
            background: var(--paper)
        }

            .cat-card:hover {
                transform: translateY(-8px);
                box-shadow: var(--shadow-lg);
                border-color: var(--navy)
            }

        .cat-visual {
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.4rem;
            background: linear-gradient(150deg,var(--navy-pale),var(--gold-pale))
        }

        .cat-label {
            padding: 18px;
            background: #fff
        }

            .cat-label h4 {
                font-family: 'Fraunces',serif;
                font-weight: 700;
                color: var(--dark);
                font-size: .98rem
            }

            .cat-label p {
                font-size: .8rem;
                color: var(--muted);
                margin-top: 5px;
                line-height: 1.55
            }

        .cat-tag {
            display: inline-block;
            margin-top: 10px;
            background: var(--gold-pale);
            color: var(--gold);
            padding: 3px 10px;
            border-radius: 20px;
            font-size: .7rem;
            font-weight: 700
        }

        .catalog-download {
            margin-top: 46px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 16px
        }

        .dl-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--navy);
            color: #fff;
            padding: 13px 26px;
            border-radius: 11px;
            transition: all .25s;
            font-weight: 700;
            font-size: .9rem
        }

            .dl-btn:hover {
                background: var(--navy-dark);
                transform: translateY(-3px)
            }

            .dl-btn.alt {
                background: var(--gold)
            }

                .dl-btn.alt:hover {
                    background: #a86f0a
                }

.app-download {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dark);
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 14px;
    transition: all .25s;
}

    .store-btn:hover {
        background: #333;
        transform: translateY(-3px);
    }

    .store-btn i {
        font-size: 1.4rem;
    }

    .store-btn div small {
        display: block;
        font-size: .65rem;
        opacity: .7;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .store-btn div strong {
        font-size: .95rem;
        font-family: 'Baloo 2',cursive;
        font-weight: 700;
    }
        /* ── TESTIMONIALS ── */
        #testimonials {
            background: var(--paper)
        }

        .testi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
            gap: 24px;
            max-width: 1120px;
            margin: 52px auto 0
        }

        .testi-card {
            background: #fff;
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: 0 4px 22px rgba(30,58,95,.06);
            transition: all .3s;
            border: 1.5px solid transparent
        }

            .testi-card:hover {
                border-color: var(--navy-pale);
                transform: translateY(-4px);
                box-shadow: var(--shadow)
            }

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

        .testi-text {
            font-size: .93rem;
            color: var(--text);
            line-height: 1.75;
            margin-top: 13px;
            font-style: italic
        }

        .testi-author {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-top: 20px
        }

        .ta-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0
        }

        .ta-navy {
            background: var(--navy)
        }

        .ta-gold {
            background: var(--gold)
        }

        .ta-dark {
            background: var(--navy-dark)
        }

        .ta-info strong {
            font-size: .9rem;
            color: var(--dark)
        }

        .ta-info span {
            font-size: .76rem;
            color: var(--muted);
            display: block
        }

        /* ── FAQ ── */
        #faq {
            background: #fff
        }

        .faq-inner {
            max-width: 760px;
            margin: 52px auto 0
        }

        .faq-item {
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 12px;
            overflow: hidden;
            transition: border-color .2s
        }

            .faq-item.open {
                border-color: var(--navy)
            }

        .faq-q {
            padding: 19px 23px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 700;
            color: var(--dark);
            gap: 12px;
            font-size: .95rem
        }

        .faq-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--navy-pale);
            color: var(--navy);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .78rem;
            flex-shrink: 0;
            transition: all .3s
        }

        .faq-item.open .faq-icon {
            background: var(--navy);
            color: #fff;
            transform: rotate(45deg)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease,padding .3s;
            padding: 0 23px;
            font-size: .9rem;
            color: var(--muted);
            line-height: 1.75
        }

        .faq-item.open .faq-a {
            max-height: 200px;
            padding: 0 23px 19px
        }

        /* ── CONTACT ── */
        #contact {
            background: var(--paper)
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 52px;
            max-width: 1120px;
            margin: 52px auto 0;
            align-items: start
        }

        .contact-item {
            display: flex;
            gap: 15px;
            margin-bottom: 23px;
            align-items: flex-start
        }

        .ci-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: var(--navy-pale);
            color: var(--navy);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            flex-shrink: 0
        }

            .ci-icon.gold {
                background: var(--gold-pale);
                color: var(--gold)
            }

        .ci-text strong {
            font-size: .92rem;
            color: var(--dark);
            font-weight: 700
        }

        .ci-text p, .ci-text a {
            font-size: .88rem;
            color: var(--muted);
            margin-top: 3px;
            display: block;
            transition: color .2s
        }

            .ci-text a:hover {
                color: var(--navy)
            }

        .map-placeholder {
            background: linear-gradient(150deg,var(--navy-pale),var(--gold-pale));
            border-radius: var(--radius);
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 22px;
            font-size: 3rem;
            border: 1.5px solid var(--border)
        }

        .contact-form {
            background: #fff;
            border-radius: var(--radius);
            padding: 38px;
            box-shadow: var(--shadow-lg);
            border: 1.5px solid var(--border)
        }

            .contact-form h3 {
                font-family: 'Fraunces',serif;
                font-size: 1.42rem;
                font-weight: 700;
                color: var(--dark);
                margin-bottom: 22px
            }

        .form-group {
            margin-bottom: 17px
        }

            .form-group label {
                display: block;
                font-size: .82rem;
                font-weight: 700;
                color: var(--dark);
                margin-bottom: 7px
            }

            .form-group input, .form-group textarea, .form-group select {
                width: 100%;
                padding: 12px 14px;
                border: 1.5px solid var(--border);
                border-radius: 9px;
                font-family: 'Outfit',sans-serif;
                font-size: .9rem;
                color: var(--text);
                background: var(--paper);
                transition: border-color .2s;
                outline: none
            }

                .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
                    border-color: var(--navy);
                    background: #fff
                }

            .form-group textarea {
                resize: vertical;
                min-height: 100px
            }

        .btn-submit {
            width: 100%;
            padding: 14px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 9px;
            font-family: 'Outfit',sans-serif;
            font-size: .95rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .25s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px
        }

            .btn-submit:hover {
                background: var(--navy-dark);
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(30,58,95,.3)
            }

        .wa-float {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 1000;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #25d366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            box-shadow: 0 8px 28px rgba(37,211,102,.5);
            animation: pulse 2.5s ease-in-out infinite;
            transition: transform .2s
        }

            .wa-float:hover {
                transform: scale(1.15)
            }

        @keyframes pulse {
            0%,100% {
                box-shadow: 0 8px 28px rgba(37,211,102,.5)
            }

            50% {
                box-shadow: 0 8px 40px rgba(37,211,102,.8)
            }
        }

        /* ── FOOTER ── */
        footer {
            background: var(--navy-dark);
            color: rgba(255,255,255,.78);
            padding: 64px 5% 0
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 42px;
            max-width: 1120px;
            margin: 0 auto;
            padding-bottom: 50px;
            border-bottom: 1px solid rgba(255,255,255,.08)
        }

        .footer-brand .logo-text {
            color: #fff;
            background: none;
            -webkit-text-fill-color: #fff
        }

            .footer-brand .logo-text span {
                color: var(--gold-light);
                -webkit-text-fill-color: var(--gold-light)
            }

        .footer-brand .logo-sub {
            color: rgba(255,255,255,.4)
        }

        .footer-brand p {
            font-size: .86rem;
            margin-top: 13px;
            line-height: 1.7;
            opacity: .65;
            max-width: 300px
        }

        .social-links {
            display: flex;
            gap: 10px;
            margin-top: 18px
        }

            .social-links a {
                width: 36px;
                height: 36px;
                border-radius: 10px;
                background: rgba(255,255,255,.08);
                color: rgba(255,255,255,.65);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .2s;
                font-size: .9rem
            }

                .social-links a:hover {
                    background: var(--gold);
                    color: #fff;
                    transform: translateY(-3px)
                }

        .footer-col h4 {
            font-family: 'Fraunces',serif;
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 17px
        }

        .footer-col ul li {
            margin-bottom: 10px
        }

            .footer-col ul li a {
                color: rgba(255,255,255,.6);
                font-size: .85rem;
                transition: color .2s
            }

                .footer-col ul li a:hover {
                    color: var(--gold-light)
                }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,.08);
            margin-top: 0;
            padding: 24px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            max-width: 1120px;
            margin-left: auto;
            margin-right: auto
        }

            .footer-bottom p {
                font-size: .82rem;
                opacity: .45
            }

        .footer-bottom-links {
            display: flex;
            gap: 20px
        }

            .footer-bottom-links a {
                color: rgba(255,255,255,.5);
                font-size: .78rem;
                transition: color .2s
            }

                .footer-bottom-links a:hover {
                    color: var(--gold-light)
                }

        /* ── ANIMATIONS ── */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(24px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .7s ease,transform .7s ease
        }

            .reveal.visible {
                opacity: 1;
                transform: translateY(0)
            }

        /* ── RESPONSIVE ── */
        @media(max-width:900px) {
            nav {
                display: none
            }

            .hamburger {
                display: flex
            }

            .header-actions .btn-call span {
                display: none
            }

            .about-grid {
                grid-template-columns: 1fr
            }

            .contact-grid {
                grid-template-columns: 1fr
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr
            }

            #hero {
                flex-direction: column;
                text-align: center
            }

            .hero-desc {
                margin: 18px auto 0
            }

            .hero-btns {
                justify-content: center
            }

            .hero-stats {
                justify-content: center
            }

            .floating-badge {
                display: none
            }
        }

        @media(max-width:580px) {
            .footer-grid {
                grid-template-columns: 1fr
            }

            section {
                padding: 60px 5%
            }

            .desk-mock {
                width: 240px
            }

            .hero-btns {
                flex-direction: column;
                align-items: center
            }
        }
 
        /* TERMS & CONDITIONS */
         

        .policy-content {
            max-width: 1000px;
            margin: auto;
        }

        .policy-box {
            background: #fff;
            padding: 30px;
            border-radius: 16px;
            margin-bottom: 25px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: 0.3s ease;
        }

            .policy-box:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px rgba(46,125,50,0.1);
            }

            .policy-box h3 {
                color: #2e7d32;
                margin-bottom: 15px;
                font-size: 24px;
                font-family: 'Baloo 2', cursive;
            }

            .policy-box p {
                color: #555;
                line-height: 1.8;
                margin-bottom: 15px;
                font-family: 'Nunito', sans-serif;
            }

            .policy-box ul {
                padding-left: 20px;
            }

                .policy-box ul li {
                    margin-bottom: 12px;
                    color: #444;
                    line-height: 1.7;
                    font-family: 'Nunito', sans-serif;
                }

        .contact-box {
            background: #f3f8f3;
            padding: 20px;
            border-radius: 12px;
            margin-top: 15px;
        }

            .contact-box p {
                margin-bottom: 8px;
            }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

            .section-title h2 {
                font-size: 42px;
                color: #2e7d32;
                margin-bottom: 10px;
                font-family: 'Baloo 2', cursive;
            }

            .section-title p {
                color: #777;
                font-size: 16px;
                font-family: 'Nunito', sans-serif;
            }

        @media(max-width:768px) {
            .section-title h2 {
                font-size: 32px;
            }

            .policy-box {
                padding: 22px;
            }

                .policy-box h3 {
                    font-size: 21px;
                }
        }