:root {
    --navy: #0b1e4d;
    --navy-600: #10317a;
    --orange: #e76d41;
    --text: #222;
    --muted: #6b7280;
}

html, body {
    font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color: var(--text);
}

a {
    color: var(--navy);
}

    a:hover {
        color: var(--orange);
    }
/* Top strip */
.top-strip {
    background: var(--navy);
    color: #fff;
    font-size: .9rem
}

    .top-strip a {
        color: #fff;
        text-decoration: none
    }

        .top-strip a:hover {
            color: var(--orange)
        }

    .top-strip i {
        color: var(--orange);
        margin-right: .35rem
    }

/* Navbar */
.navbar {
    box-shadow: 0 6px 24px rgba(11,30,77,.08)
}

.navbar-brand span {
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--navy)
}

.navbar-brand .hi {
    color: var(--orange)
}

.navbar-light .navbar-nav .nav-link {
    color: var(--navy) !important;
    font-weight: 500;
    padding: .75rem 1rem
}

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active {
        color: var(--orange) !important;
        font-weight: 600
    }

.btn-brand {
    background: linear-gradient(135deg,var(--navy),var(--orange));
    color: #fff;
    border: none;
    border-radius: .6rem;
    font-weight: 700;
    padding: .55rem 1rem
}

    .btn-brand:hover {
        background: linear-gradient(135deg,var(--orange),var(--navy));
        color: #fff
    }

/* Hero */
.hero {
    position: relative;
    background: linear-gradient(135deg,var(--navy),#1f3d8b);
    color: #fff;
    padding: 110px 0 90px;
    overflow: hidden
}

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url('images/bg/01.jpg') center/cover no-repeat;
        mix-blend-mode: overlay;
        opacity: .25;
    }

    .hero h1 {
        font-weight: 800;
        line-height: 1.1
    }

    .hero p {
        font-size: 1.1rem;
        color: #e8edff
    }

.hero-img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 40px rgba(0,0,0,.35));
}

/* Section spacing */
section {
    padding: 70px 0
}

.section-title {
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 18px
}

.section-sub {
    color: var(--muted);
    margin-bottom: 34px
}

/* How it works */
.step-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 8px 34px rgba(11,30,77,.08);
    padding: 26px
}

.step-badge {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    margin-bottom: 10px
}

.demo-card {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    background: #fff;
    transition: transform .3s ease, box-shadow .3s ease;
}

    .demo-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(11,30,77,.15);
    }

.demo-img {
    position: relative;
    overflow: hidden;
}

    .demo-img img {
        width: 100%;
        transition: transform .35s ease;
    }

.demo-card:hover img {
    transform: scale(1.08);
}

.demo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(11,30,77,.05) 0%,rgba(11,30,77,.65) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    padding: 1rem;
}

.demo-card:hover .demo-overlay {
    opacity: 1;
}


/* Features */
.feature {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 8px 34px rgba(11,30,77,.06);
    padding: 22px;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}

.fea-ico {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 12px;
    transition: transform .25s ease;
}

    .fea-ico:hover {
        transform: scale(1.15);
    }

/* Colors */
.circle.navy {
    background: var(--navy);
}

.circle.orange {
    background: var(--orange);
}

.circle.whatsapp {
    background: #25D366;
}

.circle.blue {
    background: #1877f2;
}

.circle.teal {
    background: #14b8a6;
}

.circle.purple {
    background: #9333ea;
}

.circle.pink {
    background: #ec4899;
}

.circle.red {
    background: #ef4444;
}

.circle.green {
    background: #22c55e;
}

.circle.yellow {
    background: #eab308;
}



.feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(11,30,77,.15);
}

.price-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(11,30,77,.08);
    transition: transform .3s ease;
    background: #fff;
}

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

.price-head {
    background: linear-gradient(135deg, var(--navy), var(--navy-600));
    color: #fff;
    padding: 20px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

    .price-head.gold {
        background: linear-gradient(135deg, #e76d41, #ff944d);
    }

    .price-head.premium {
        background: linear-gradient(135deg, #1f3d8b, #e76d41);
    }

.price-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-body li {
    padding: 8px 0;
    border-bottom: 1px dashed #eaeef7;
}

    .price-body li:last-child {
        border-bottom: 0;
    }


/* Testimonials */
.testimonial {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 34px rgba(11,30,77,.08);
    padding: 26px
}

    .testimonial p {
        color: #111;
        font-size: 1.02rem
    }

.testi-author {
    color: var(--navy);
    font-weight: 700
}

/* FAQ */
.accordion-button {
    font-weight: 600;
    color: var(--navy)
}

    .accordion-button:not(.collapsed) {
        color: var(--orange);
        background: #fff5f0
    }

/* Contact */
.contact-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(11,30,77,.08)
}

/* Footer */
footer {
    background: #0a173a;
    color: #cfd8ea
}

    footer a {
        color: #fff
    }

        footer a:hover {
            color: var(--orange)
        }

.social a {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    margin-right: 8px
}

/* Utilities */
.rounded-2xl {
    border-radius: 1.25rem
}

.shadow-soft {
    box-shadow: 0 10px 40px rgba(11,30,77,.08)
}

.muted {
    color: var(--muted)
}

.fea-ico {
    font-size: 32px;
    color: #fff;
    background: linear-gradient(135deg,#0b1e4d,#e76d41);
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 15px;
}

.accordion-button {
    font-weight: 600;
    color: var(--navy);
}

    .accordion-button:not(.collapsed) {
        color: var(--orange);
        background: #fff5f0;
    }

.accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(11,30,77,.08);
}

.testimonial img {
    object-fit: cover;
    border: 3px solid var(--orange);
}

.testimonial p {
    font-size: 1.05rem;
    color: #333;
}

.testi-author {
    color: var(--navy);
    font-weight: 700;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}
/* Android-style phone frame */
.mobile-frame {
    position: relative;
    width: 220px; /* phone width */
    height: 440px; /* phone height */
    margin: 0 auto;
    border: 14px solid #222; /* phone bezel */
    border-radius: 28px; /* rounded corners */
    background: #000; /* screen background */
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

    /* Top speaker (Android style) */
    .mobile-frame::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 6px;
        background: #444;
        border-radius: 3px;
    }

    /* Bottom home button */
    .mobile-frame::after {
        content: "";
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 6px;
        background: #444;
        border-radius: 3px;
    }

    /* Screenshot inside phone */
    .mobile-frame img.demo-screenshot {
        width: 100%;
        height: 100%;
        object-fit: cover; /* fills the screen */
        border-radius: 14px;
    }
.hero-screens {
    position: relative;
    gap: 20px;
    flex-wrap: wrap;
}

.demo-card-img {
    width: 240px; /* adjust size */
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

/* Tilted effect */
.tilt-left {
    transform: rotate(-8deg);
}

.tilt-right {
    transform: rotate(8deg);
}

.center {
    transform: scale(1.05);
    z-index: 2;
}

.demo-card-img:hover {
    transform: rotate(0deg) scale(1.08);
    z-index: 3;
}

/* Responsive: stack vertically */
@media (max-width: 768px) {
    .hero-screens {
        flex-direction: column;
        align-items: center;
    }

    .demo-card-img {
        width: 50%; /* full width on mobile */
        margin-bottom: 20px;
    }
}
.demo-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .demo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

.demo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.demo-card:hover .demo-overlay {
    opacity: 1;
}
.template-card {
    border: 2px solid #ddd;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .template-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* When radio is checked → highlight card */
    .template-radio:checked ~ label::before,
    .template-card.selected {
        border: 2px solid #007bff !important; /* blue border */
        background-color: #f0f8ff; /* light blue background */
    }