@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --ink: #171427;
    --muted: #6c6980;
    --paper: #fffdfa;
    --violet: #7c3aed;
    --pink: #ec4899;
    --amber: #f59e0b;
    --cyan: #06b6d4;
    --green: #10b981;
    --red: #ef4444;
    --emerald: #10B981;
    --line: rgba(35, 25, 68, .1);
    --shadow: 0 20px 60px rgba(50, 30, 94, .12);
    --radius: 28px;
    --paper: #FBF9FF;
    --grad-main: linear-gradient(120deg, var(--violet), var(--pink) 45%, var(--amber) 100%);
    --grad-cool: linear-gradient(120deg, var(--cyan), var(--violet));
    --grad-warm: linear-gradient(120deg, var(--pink), var(--red));
    --grad-full: linear-gradient(120deg, var(--violet), var(--pink), var(--amber), var(--cyan), var(--emerald));
    --radius-lg: 28px;
    --radius-md: 22px;
    --radius-sm: 16px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Manrope, Arial, sans-serif;
    overflow-x: hidden
}

.display-font,
h1,
h2,
h3,
h4,
.navbar-brand {
    font-family: Outfit, Arial, sans-serif
}

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

img {
    max-width: 100%
}

.section {
    padding: 80px 0;
    position: relative
}

.section-sm {
    padding: 60px 0
}

.eyebrow {
    align-items: center;
    color: var(--violet);
    display: flex;
    font-size: .73rem;
    font-weight: 800;
    gap: 8px;
    letter-spacing: .15em;
    text-transform: uppercase
}

.eyebrow:before {
    background: linear-gradient(90deg, var(--violet), var(--pink));
    border-radius: 999px;
    content: "";
    height: 7px;
    width: 27px
}

.section-title {
    font-size: clamp(2.4rem, 4vw, 4.3rem);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.02;
    margin: 16px 0 18px
}

.section-copy {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.85;
    max-width: 570px
}

.text-gradient {
    background: linear-gradient(95deg, #8b37ee 5%, #e93c9b 45%, #f19a17 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.gradient-text-alt {
    background: linear-gradient(90deg, #00b8d4, #0fc17e, #e7b217);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.btn {
    align-items: center;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    gap: 9px;
    justify-content: center;
    letter-spacing: .025em;
    padding: 15px 21px;
    position: relative;
    transition: .3s
}

.btn-gradient {
    background: linear-gradient(125deg, var(--violet), var(--pink) 55%, #f2931d);
    background-size: 180%;
    box-shadow: 0 12px 25px rgba(180, 58, 171, .26);
    color: #fff
}

.btn-gradient:hover {
    background-position: 100%;
    box-shadow: 0 15px 32px rgba(180, 58, 171, .36);
    color: #fff;
    transform: translateY(-3px)
}

.btn-light {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09)
}

.btn-light:hover {
    color: var(--violet);
    transform: translateY(-3px)
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--violet)
}

.btn-ghost {
    background: #f2effa;
    color: var(--violet)
}

.btn-ghost:hover {
    background: #e9e1ff;
    color: var(--violet);
    transform: translateY(-2px)
}

/* loader / cursor */
.page-loader {
    align-items: center;
    background: #171427;
    display: flex;
    height: 100vh;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 10000
}

.loader-mark {
    height: 72px;
    position: relative;
    width: 72px
}

.loader-mark:before,
.loader-mark:after {
    border: 4px solid transparent;
    border-radius: 50%;
    content: "";
    inset: 0;
    position: absolute
}

.loader-mark:before {
    border-top-color: var(--pink);
    border-right-color: var(--amber);
    animation: spin .8s linear infinite
}

.loader-mark:after {
    border-bottom-color: var(--cyan);
    inset: 13px;
    animation: spin 1.1s linear reverse infinite
}

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

.cursor-dot,
.cursor-ring {
    border-radius: 50%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 10001
}

.cursor-dot {
    background: var(--pink);
    height: 7px;
    width: 7px
}

.cursor-ring {
    border: 1px solid rgba(236, 72, 153, .55);
    height: 32px;
    transition: width .22s, height .22s, background .22s;
    width: 32px
}

.cursor-grow {
    background: rgba(236, 72, 153, .12);
    height: 48px;
    width: 48px
}

@media(pointer:coarse) {

    .cursor-dot,
    .cursor-ring {
        display: none
    }
}

/* navbar */
.progress-line {
    background: linear-gradient(90deg, var(--violet), var(--pink), var(--amber), var(--cyan));
    height: 3px;
    left: 0;
    position: fixed;
    top: 0;
    width: 0;
    z-index: 9999
}

.site-nav {
    background: transparent;
    left: 0;
    padding: 8px 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .35s;
    z-index: 1000
}

.site-nav.fixed {
    background: rgba(255, 253, 250, .9);
    box-shadow: 0 8px 28px rgba(37, 20, 68, .08);
    backdrop-filter: blur(16px);
    position: fixed
}

.navbar-brand {
    align-items: center;
    display: inline-flex;
    margin: 0
}

.brand-logo {
    background: #fff;
    border-radius: 12px;
    object-fit: contain;
    padding: 8px 12px;
    width: 170px;
}

.nav-link {
    color: rgba(255, 255, 255, .86) !important;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .035em;
    margin: 0 8px;
    padding: 8px 12px !important;
    position: relative
}

.fixed .nav-link,
.inner-nav .nav-link {
    color: var(--ink) !important
}

.nav-link:after {
    background: currentColor;
    bottom: 3px;
    content: "";
    height: 2px;
    left: 4px;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: .25s;
    width: calc(100% - 8px)
}

.nav-link:hover:after,
.nav-link.active:after {
    transform: scaleX(1)
}

.nav-cta {
    font-size: .72rem;
    padding: 12px 17px
}

.navbar-toggler {
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important
}

.fixed .navbar-toggler,
.inner-nav .navbar-toggler {
    color: var(--ink) !important
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1)
}

.fixed .navbar-toggler-icon,
.inner-nav .navbar-toggler-icon {
    filter: none
}

@media(max-width:991px) {
    .site-nav {
        padding: 13px 0
    }

    .navbar-collapse {
        background: #fff;
        border-radius: 20px;
        box-shadow: var(--shadow);
        margin-top: 12px;
        padding: 13px 18px
    }

    .nav-link {
        color: var(--ink) !important;
        margin: 2px 0
    }

    .nav-cta {
        margin: 8px 0 3px
    }

    .navbar-toggler-icon {
        filter: brightness(0) invert(1)
    }

    .navbar-collapse .btn {
        width: 100%
    }
}

/* hero (homepage) */
.hero {
    align-items: center;
    background: #251653;
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    padding: 125px 0 55px;
    position: relative
}

.hero:before {
    background: linear-gradient(90deg, rgba(20, 11, 45, .93) 0%, rgba(35, 19, 76, .78) 39%, rgba(74, 18, 93, .29) 72%, rgba(239, 72, 153, .2));
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1
}

.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1606800052052-a08af7148866?auto=format&fit=crop&w=2200&q=90');
    background-position: center;
    background-size: cover;
    inset: 0;
    position: absolute;
    opacity: .92
}

.hero:after {
    background: radial-gradient(circle at 18% 21%, rgba(244, 152, 20, .45), transparent 21%), radial-gradient(circle at 78% 70%, rgba(6, 182, 212, .37), transparent 25%);
    content: "";
    inset: 0;
    mix-blend-mode: screen;
    position: absolute;
    z-index: 1
}

.hero .container {
    position: relative;
    z-index: 2
}

.hero .eyebrow {
    color: #f6d9ff
}

.hero .eyebrow:before {
    background: linear-gradient(90deg, #f5c01d, #ed53c2)
}

.hero h1 {
    color: #fff;
    font-size: clamp(3.2rem, 5.5vw, 5.9rem);
    font-weight: 700;
    margin: 18px 0 28px
}

.hero h1 em {
    color: #ffcf45;
    font-style: normal
}

.hero-copy {
    color: rgba(255, 255, 255, .8);
    font-size: clamp(.97rem, 1.25vw, 1.15rem);
    line-height: 1.4;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 35px
}

.hero-trust {
    align-items: center;
    color: rgba(255, 255, 255, .78);
    display: flex;
    font-size: .74rem;
    font-weight: 700;
    gap: 13px;
    margin-top: 45px
}

.avatar-stack {
    display: flex
}

.avatar-stack img {
    border: 2px solid #3d1d67;
    border-radius: 50%;
    height: 34px;
    margin-left: -8px;
    object-fit: cover;
    width: 34px
}

.avatar-stack img:first-child {
    margin-left: 0
}

.hero-info-card {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 20px;
    bottom: 8%;
    color: #fff;
    padding: 17px;
    position: absolute;
    right: 4%;
    width: 190px;
    z-index: 3;
    backdrop-filter: blur(12px);
    animation: float 4s ease-in-out infinite
}

.hero-info-card span {
    display: block;
    font-size: .7rem;
    letter-spacing: .08em;
    opacity: .7;
    text-transform: uppercase
}

.hero-info-card strong {
    display: block;
    font-family: Outfit;
    font-size: 1.6rem;
    margin: 3px 0
}

.hero-info-card small {
    color: #ffd247
}

.album-float {
    bottom: 6%;
    height: 300px;
    position: absolute;
    right: 16%;
    transform: rotate(-12deg);
    width: 230px;
    z-index: 2;
    animation: albumFloat 5s ease-in-out infinite
}

.album-float img {
    border: 10px solid #f7f1e6;
    border-radius: 7px;
    box-shadow: -20px 28px 35px rgba(9, 0, 30, .38);
    height: 100%;
    object-fit: cover;
    width: 100%
}

.album-float:after {
    background: #e7c193;
    border-radius: 0 0 6px 6px;
    bottom: -13px;
    box-shadow: -20px 29px 34px rgba(9, 0, 30, .28);
    content: "";
    height: 13px;
    left: 0;
    position: absolute;
    width: 100%
}

@keyframes float {
    50% {
        transform: translateY(-16px)
    }
}

@keyframes albumFloat {
    50% {
        transform: translateY(-19px) rotate(-9deg)
    }
}

.scroll-indicator {
    bottom: 25px;
    color: rgba(255, 255, 255, .7);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    position: absolute;
    text-transform: uppercase;
    z-index: 2
}

.scroll-indicator:after {
    background: #fff;
    border-radius: 999px;
    content: "";
    display: block;
    height: 42px;
    margin: 10px auto 0;
    width: 1px
}

@media(max-width:991px) {
    .hero {
        min-height: 820px
    }

    .album-float {
        height: 230px;
        right: 12%;
        width: 175px
    }

    .hero-info-card {
        bottom: 6%;
        right: 3%
    }
}

@media(max-width:575px) {
    .hero {
        min-height: 780px;
        padding-bottom: 125px
    }

    .hero h1 {
        font-size: 3.25rem
    }

    .hero-info-card,
    .album-float {
        display: none
    }

    .hero-trust {
        margin-top: 33px
    }

    .scroll-indicator {
        display: none
    }
}

/* accent orbs */
.color-orb {
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
    position: absolute
}

.orb-pink {
    background: linear-gradient(140deg, #f6a9d6, #ec4899);
    height: 260px;
    opacity: .22;
    right: -100px;
    top: 10%;
    width: 260px
}

.orb-cyan {
    background: linear-gradient(140deg, #72e4f1, #06b6d4);
    bottom: 8%;
    height: 210px;
    left: -120px;
    opacity: .18;
    width: 210px
}

/* why / collage (legacy inner-page block) */
.why-section {
    overflow: hidden
}

.why-image {
    min-height: 560px;
    position: relative
}

.why-image .main-img {
    border-radius: var(--radius);
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    width: 87%
}

.why-image .mini-img {
    border: 7px solid #fff;
    border-radius: 20px;
    bottom: 42px;
    box-shadow: var(--shadow);
    height: 190px;
    object-fit: cover;
    position: absolute;
    right: 0;
    width: 190px
}

.quality-stamp {
    align-items: center;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    border: 5px solid #fff;
    border-radius: 50%;
    bottom: 218px;
    color: #fff;
    display: flex;
    font-family: Outfit;
    font-size: .73rem;
    font-weight: 700;
    height: 106px;
    justify-content: center;
    line-height: 1.25;
    position: absolute;
    right: 10px;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(12deg);
    width: 106px
}

.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
    margin-top: 32px
}

.feature-item {
    align-items: center;
    color: #464058;
    display: flex;
    font-size: .78rem;
    font-weight: 800;
    gap: 10px
}

.feature-item i {
    align-items: center;
    background: linear-gradient(135deg, #e8dbff, #fee2ed);
    border-radius: 9px;
    color: var(--violet);
    display: inline-flex;
    height: 29px;
    justify-content: center;
    width: 29px
}

.feature-item:nth-child(3n+2) i {
    background: #dcf8f6;
    color: #009fae
}

.feature-item:nth-child(3n) i {
    background: #fff0d6;
    color: #db8a00
}

@media(max-width:991px) {
    .why-image {
        min-height: 420px;
        margin-bottom: 48px
    }

    .why-image .main-img {
        min-height: 420px
    }

    .feature-list {
        grid-template-columns: 1fr
    }
}

/* categories (legacy) */
.category-area {
    background: #1c1434;
    color: #fff;
    overflow: hidden
}

.category-area:before {
    background: radial-gradient(circle at 0% 10%, rgba(124, 58, 237, .6), transparent 28%), radial-gradient(circle at 95% 90%, rgba(236, 72, 153, .5), transparent 23%);
    content: "";
    inset: 0;
    position: absolute
}

.category-area .container {
    position: relative
}

.category-area .eyebrow {
    color: #ffaedc
}

.category-card {
    position: relative;
    height: 350px;
    border-radius: 26px;
    overflow: hidden;
    color: #fff;
    isolation: isolate
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .55s
}

.category-card:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(17, 6, 31, .82), transparent 65%)
}

.category-card:hover img {
    transform: scale(1.1)
}

.category-card .label {
    position: absolute;
    left: 25px;
    bottom: 22px
}

.category-card h3 {
    margin: 0;
    font-size: 1.4rem
}

.category-card small {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: #f6cdf2
}

.category-card:hover .category-title span {
    transform: translateY(0)
}

.category-large {
    height: 490px
}

@media(max-width:767px) {
    .category-large {
        height: 360px
    }
}

/* process steps (legacy) */
.process-step {
    padding: 25px 11px;
    position: relative;
    text-align: center
}

.process-step:after {
    background: linear-gradient(90deg, var(--violet), var(--pink), var(--amber));
    content: "";
    height: 2px;
    left: 60%;
    position: absolute;
    top: 57px;
    width: 78%
}

.process-step:last-child:after {
    display: none
}

.process-num {
    align-items: center;
    background: #fff;
    border: 2px solid #eee6fb;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(72, 31, 125, .09);
    color: var(--violet);
    display: flex;
    font-family: Outfit;
    font-size: .86rem;
    font-weight: 800;
    height: 64px;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    width: 64px;
    z-index: 1
}

.process-step:nth-child(2n) .process-num {
    border-color: #ffd5e8;
    color: var(--pink)
}

.process-step:nth-child(3n) .process-num {
    border-color: #ffebc4;
    color: #e99700
}

.process-step h4 {
    font-size: .81rem;
    font-weight: 800;
    margin: 0
}

.process-step p {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.55;
    margin: 8px auto 0;
    max-width: 125px
}

@media(max-width:991px) {
    .process-step:after {
        display: none
    }

    .process-step {
        padding: 18px 8px
    }
}

/* filter nav (legacy gallery) */
.filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 35px
}

.filter-btn {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #5c576b;
    font-size: .72rem;
    font-weight: 800;
    padding: 10px 15px;
    transition: .25s
}

.filter-btn.active,
.filter-btn:hover {
    background: linear-gradient(110deg, var(--violet), var(--pink));
    border-color: transparent;
    color: #fff
}

/* testimonial + marquee (legacy) */
.section-pad {
    padding: 110px 0;
}

.soft-bg {
    background: linear-gradient(130deg, #fdf7ff, #f4fcff 50%, #fff9ee);
    position: relative;
    overflow: hidden;
}

.testimonial {
    border-radius: 24px;
    padding: 28px;
    height: 100%;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 15px 38px rgba(64, 35, 110, .08)
}

.stars {
    color: var(--amber);
    font-size: .8rem
}

.quote {
    font-size: .87rem;
    line-height: 1.8;
    color: #555066
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover
}

.logo-run {
    white-space: nowrap;
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding: 25px 0
}

.logo-track {
    align-items: center;
    animation: marquee 22s linear infinite;
    display: flex;
    gap: 68px;
    width: max-content
}

.logo-track span {
    margin: 0 35px;
    font: 800 1.12rem Outfit;
    color: #514a5e
}

.trusted-strip {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    margin-top: 88px;
    overflow: hidden;
    padding: 28px 0
}

.logo-name {
    color: #817c8e;
    font-family: Outfit;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.06em;
    white-space: nowrap
}

.logo-name i {
    color: var(--pink);
    font-size: 1rem;
    margin-right: 5px
}

@keyframes marquee {
    to {
        transform: translateX(-35%)
    }
}

/* accordion (legacy faq) */
.accordion-item {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(66, 42, 111, .09) !important;
    border-radius: 15px !important;
    margin-bottom: 12px;
    overflow: hidden
}

.accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-family: Outfit;
    font-size: .95rem;
    font-weight: 700;
    padding: 20px
}

.accordion-button:not(.collapsed) {
    color: var(--violet) !important
}

.accordion-button:after {
    background-size: 1rem
}

.accordion-body {
    color: var(--muted);
    font-size: .83rem;
    line-height: 1.75;
    padding: 0 20px 20px
}

/* cta band */
.cta-band {
    background: linear-gradient(115deg, #6f32e2, #d839a1 53%, #ee9822);
    border-radius: 32px;
    color: #fff;
    overflow: hidden;
    padding: 68px 7%;
    position: relative
}

.cta-band:before,
.cta-band:after {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    content: "";
    height: 320px;
    position: absolute;
    width: 320px
}

.cta-band:before {
    right: -100px;
    top: -170px
}

.cta-band:after {
    bottom: -205px;
    left: 32%;
    width: 410px
}

.cta-band>* {
    position: relative
}

.cta-band h2 {
    font-size: clamp(2rem, 3.7vw, 3.6rem);
    letter-spacing: -.06em;
    line-height: 1.04;
    max-width: 650px
}

.cta-band p {
    color: rgba(255, 255, 255, .8);
    font-size: .93rem;
    max-width: 520px
}

/* ==========================================================
   FOOTER — split layout (logo left, addresses right)
   ========================================================== */
.site-footer {
    background:
        radial-gradient(circle at 12% 20%, rgba(124, 58, 237, .28), transparent 45%),
        radial-gradient(circle at 88% 78%, rgba(236, 72, 153, .22), transparent 48%),
        #0f0d1a;
    color: #fff;
    margin-top: 60px;
    padding: 90px 0 24px;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 25%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 90px);
    pointer-events: none;
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
    gap: 60px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto 56px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand-link {
    display: inline-block;
    transition: transform .35s ease;
}

.footer-brand-link:hover {
    transform: translateY(-3px);
}

.footer-logo {
    background: #fff;
    border-radius: 16px;
    height: 62px;
    object-fit: contain;
    padding: 8px 14px;
    width: auto;
    max-width: 220px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.footer-tagline {
    font-family: Outfit, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.35;
    margin: 26px 0 8px;
    color: #fff;
}

.footer-subline {
    font-size: .86rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .68);
    margin: 0;
    max-width: 320px;
}

.footer-divider {
    width: 62px;
    height: 3px;
    border-radius: 999px;
    margin-top: 26px;
    background: linear-gradient(90deg, #a855f7, #ec4899 50%, #f59e0b);
}

.footer-addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.footer-address-block {
    position: relative;
    border-radius: 20px;
    padding: 30px 26px 28px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
    transition: transform .4s ease, box-shadow .4s ease;
    isolation: isolate;
    min-height: 220px;
}

.footer-address-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(440px 200px at 100% 0%, rgba(255, 255, 255, .22), transparent 62%);
    pointer-events: none;
    z-index: -1;
}

.footer-address-block:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 65px rgba(0, 0, 0, .55);
}

.fab-delhi {
    background: linear-gradient(140deg, #5b21b6 0%, #9333ea 45%, #db2777 100%);
}

.fab-kolkata {
    background: linear-gradient(140deg, #b45309 0%, #db2777 50%, #7c3aed 100%);
}

.fab-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.fab-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .34);
    display: grid;
    place-items: center;
    font-size: 1.18rem;
    color: #fff;
    flex: 0 0 auto;
}

.footer-title {
    font-family: Outfit, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
    color: #fff;
}

.footer-contact {
    color: rgba(255, 255, 255, .95);
    font-size: .88rem;
    line-height: 1.75;
    margin: 9px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
}

.footer-contact i {
    color: #fff;
    opacity: .9;
    margin-top: 3px;
    flex: 0 0 auto;
    font-size: .95rem;
}

.footer-contact a {
    color: #fff;
    font-weight: 600;
    transition: color .25s ease, opacity .25s ease;
    word-break: break-word;
}

.footer-contact a:hover {
    color: #fde68a;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
    margin-top: 0;
    padding-top: 24px;
    text-align: center;
    letter-spacing: .01em;
}

.footer-bottom a {
    color: #c0b6d5;
}

@media(max-width:991px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .footer-brand {
        align-items: center;
        text-align: center;
    }

    .footer-tagline,
    .footer-subline {
        max-width: 100%;
        text-align: center;
    }

    .footer-divider {
        margin-left: auto;
        margin-right: auto;
    }
}

@media(max-width:767px) {
    .site-footer {
        padding: 70px 0 20px;
    }

    .footer-inner {
        gap: 34px;
        margin-bottom: 36px;
    }

    .footer-addresses {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .footer-address-block {
        padding: 24px 20px;
        min-height: auto;
    }

    .footer-contact {
        font-size: .82rem;
    }

    .footer-logo {
        height: 54px;
    }

    .footer-tagline {
        font-size: 1.05rem;
    }
}

/* ==========================================================
   FLOATING ACTIONS — WhatsApp + Back to top
   ========================================================== */
.whatsapp-float,
.back-to-top {
    align-items: center;
    border-radius: 50%;
    bottom: 26px;
    color: #fff;
    display: flex;
    height: 52px;
    width: 52px;
    justify-content: center;
    position: fixed;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, opacity .3s ease;
    z-index: 999;
    text-decoration: none;
}

.whatsapp-float {
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
    font-size: 1.5rem;
    left: 25px;
}

.whatsapp-float:hover {
    background: linear-gradient(135deg, #1ebe5b, #0e7c6e);
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 34px rgba(37, 211, 102, .55);
}

.back-to-top {
    background: linear-gradient(135deg, var(--violet, #7c3aed), var(--pink, #ec4899));
    box-shadow: 0 10px 26px rgba(124, 58, 237, .4);
    font-size: 1rem;
    right: 25px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: linear-gradient(135deg, var(--pink, #ec4899), var(--violet, #7c3aed));
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 34px rgba(236, 72, 153, .5);
}

.whatsapp-float i,
.back-to-top i {
    line-height: 1;
    pointer-events: none;
}

@media(max-width:575px) {
    .whatsapp-float,
    .back-to-top {
        height: 46px;
        width: 46px;
        bottom: 20px;
    }

    .whatsapp-float {
        font-size: 1.3rem;
        left: 16px;
    }

    .back-to-top {
        font-size: .9rem;
        right: 16px;
    }
}

/* inner pages */
.inner-nav {
    background: rgba(255, 253, 250, .94);
    position: relative
}

.breadcrumb {
    font-size: .75rem;
    margin: 0
}

.breadcrumb-item+.breadcrumb-item:before {
    color: #fff
}

.breadcrumb-item.active,
.breadcrumb-item a {
    color: rgba(255, 255, 255, .68)
}

/* inner-page images */
.inner-intro-img {
    border-radius: 28px;
    height: 500px;
    object-fit: cover;
    width: 100%
}

/* inner-page service-detail cards (legacy but kept for reuse) */
.service-detail-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 25px;
    box-shadow: 0 10px 31px rgba(57, 37, 90, .06);
    height: 100%;
    padding: 20px
}

.service-detail-card .service-icon {
    margin-bottom: 23px
}

.service-detail-card h3 {
    font-size: 1.4rem;
    letter-spacing: -.04em
}

.service-detail-card p {
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.75
}

/* inner-page gallery link */
.gallery-link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    color: #fff;
    text-decoration: none;
}

.gallery-link .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-link:hover .gallery-image,
.gallery-link:focus-visible .gallery-image {
    transform: scale(1.1);
}

/* check-list / about-value (legacy inner-page helpers) */
.check-list {
    list-style: none;
    margin: 19px 0 0;
    padding: 0
}

.check-list li {
    color: #5f596c;
    font-size: .76rem;
    margin: 10px 0
}

.check-list i {
    color: var(--green);
    margin-right: 8px
}

.about-value {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 9px 27px rgba(57, 37, 90, .06);
    height: 100%;
    padding: 24px
}

.about-value span {
    color: var(--pink);
    font-family: Outfit;
    font-size: 2rem;
    font-weight: 700
}

.about-value h4 {
    font-size: 1rem;
    margin: 7px 0
}

.about-value p {
    color: var(--muted);
    font-size: .77rem;
    line-height: 1.65;
    margin: 0
}

/* team / contact / map (legacy inner-page helpers) */
.team-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.team-card img {
    height: 330px;
    object-fit: cover;
    width: 100%
}

.team-card-info {
    background: #fff;
    margin: -45px 16px 0;
    padding: 17px;
    position: relative;
    text-align: center
}

.team-card-info h4 {
    font-size: 1rem;
    margin: 0
}

.team-card-info p {
    color: var(--pink);
    font-size: .67rem;
    font-weight: 700;
    margin: 4px 0 0
}

.contact-info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    height: 100%;
    padding: 24px
}

.contact-info-icon {
    align-items: center;
    background: linear-gradient(135deg, #e9deff, #fde0ee);
    border-radius: 13px;
    color: var(--violet);
    display: flex;
    font-size: 1rem;
    height: 44px;
    justify-content: center;
    margin-bottom: 17px;
    width: 44px
}

.contact-info-card h4 {
    font-size: 1rem
}

.contact-info-card p,
.contact-info-card a {
    color: var(--muted);
    font-size: .79rem;
    line-height: 1.75
}

.contact-form {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(44, 26, 78, .1);
    padding: 42px
}

.form-label {
    font-size: .72rem;
    font-weight: 800
}

.form-control,
.form-select {
    border: 1px solid #e5e0ee;
    border-radius: 11px;
    font-size: .8rem;
    padding: 13px
}

.form-control:focus,
.form-select:focus {
    border-color: #bf9af8;
    box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .11)
}

.map-frame {
    border: 0;
    border-radius: 25px;
    height: 390px;
    width: 100%
}

@media(max-width:767px) {
    .section {
        padding: 75px 0
    }

    .site-footer {
        margin-top: 74px
    }

    .contact-form {
        padding: 24px
    }

    .inner-intro-img {
        height: 330px
    }
}

/* ==========================================================
   PRINTER-LED HERO
   ========================================================== */
.hero-printer {
    background: #1e1c1a;
    min-height: 850px;
    background-image: url('../images/hero-printer.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.hero-printer:before {
    background: linear-gradient(90deg,
            rgba(15, 12, 20, .96) 0%,
            rgba(20, 16, 26, .90) 30%,
            rgba(30, 22, 40, .55) 60%,
            rgba(30, 22, 40, .15) 100%);
    z-index: 1
}

.hero-printer:after {
    background: radial-gradient(circle at 15% 24%, rgba(6, 182, 212, .18), transparent 27%),
                radial-gradient(circle at 56% 81%, rgba(245, 158, 11, .17), transparent 24%);
    mix-blend-mode: screen;
    z-index: 1
}

.hero-printer .hero-bg {
    display: none;
}

.hero-printer h1 {
    font-size: clamp(2.3rem, 3.4vw, 3.9rem);
}

.hero-printer h1 em {
    color: #ffc642
}

.hero-printer .hero-copy {
    max-width: 560px
}

@media(max-width:991px) {
    .hero-printer {
        min-height: 820px;
        background-position: 70% center;
    }

    .hero-printer:before {
        background: linear-gradient(90deg,
                rgba(15, 12, 20, .94) 0%,
                rgba(20, 16, 26, .82) 55%,
                rgba(30, 22, 40, .35) 100%)
    }
}

@media(max-width:575px) {
    .hero-printer {
        min-height: 850px;
        background: #181614;
        background-image:
            linear-gradient(180deg, rgba(15, 12, 20, .82) 0%, rgba(15, 12, 20, .92) 100%),
            url('../images/hero-printer.png');
        background-size: cover;
        background-position: center;
        padding-bottom: 75px
    }

    .hero-printer:before {
        background: linear-gradient(180deg,
                rgba(15, 12, 20, .35) 0%,
                rgba(15, 12, 20, .82) 55%,
                rgba(15, 12, 20, .95) 100%)
    }

    .hero-printer h1 {
        font-size: 3.2rem
    }
}

/* ==========================================================
   Quote modal + thank-you page
   ========================================================== */
.quote-modal .modal-content { background: transparent; border: 0; border-radius: 28px; }
.quote-modal .contact-form { box-shadow: 0 30px 80px rgba(33, 21, 61, .35); }
.quote-close { position: absolute; top: 18px; right: 18px; z-index: 5; background-color: #f2effa; border-radius: 50%; padding: 11px; opacity: 1; }
.quote-close:hover { background-color: #e9e1ff; }
.modal-backdrop { --bs-backdrop-bg: #21153d; --bs-backdrop-opacity: .72; }
.quote-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-right: 38px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: .82rem; font-weight: 600; }
.form-note { color: var(--muted); font-size: .68rem; }
.form-success { text-align: center; padding: 34px 8px 10px; }
.form-success h3 { font-family: Outfit, Arial, sans-serif; font-weight: 700; font-size: 1.7rem; letter-spacing: -.04em; margin: 22px 0 10px; }
.form-success p { color: var(--muted); font-size: .92rem; line-height: 1.8; max-width: 420px; margin: 0 auto 22px; }
.success-mark { width: 78px; height: 78px; border-radius: 50%; background: var(--grad-main); color: #fff; display: grid; place-items: center; font-size: 2.1rem; margin: 0 auto; box-shadow: 0 14px 30px rgba(180, 58, 171, .3); }
.thanks-section { min-height: 62vh; display: flex; align-items: center; }
.thanks-section h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -.05em; margin: 26px 0 14px; }
.thanks-section a.tel { color: var(--violet); font-weight: 700; }

/* ==========================================================
   HOME SECTIONS
   Your Photography / Who We Serve / Our Products /
   Quality / Simple Process / Why PrintoBUFFET
   ========================================================== */

/* ---------- Your Photography. Our Printing. ---------- */
.your-craft-section {
    background: linear-gradient(180deg, var(--paper) 0%, #f6f0ff 55%, var(--paper) 100%);
    position: relative;
}

.your-craft-section .section-copy {
    margin-bottom: 14px;
}

.craft-taglines {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--violet), var(--pink), var(--amber)) 1;
}

.craft-line {
    font-family: Outfit, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
}

.craft-line.highlight span {
    background: linear-gradient(95deg, #8b37ee, #e93c9b, #f19a17);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    font-size: 1.15rem;
}

.craft-visual {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px 14px;
    max-width: 480px;
    margin: 0 auto;
}

.craft-card {
    background: #fff;
    border-radius: 22px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 14px 34px rgba(53, 30, 95, .12);
    border: 1px solid rgba(124, 58, 237, .08);
    transition: transform .4s ease, box-shadow .4s ease;
    text-align: center;
    min-height: 130px;
}

.craft-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(91, 47, 133, .18);
}

.craft-card i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
}

.craft-card span {
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
    letter-spacing: -.01em;
}

.craft-card-main i {
    background: linear-gradient(135deg, var(--violet), var(--pink));
    box-shadow: 0 10px 22px rgba(124, 58, 237, .28);
}

.craft-card-print i {
    background: linear-gradient(135deg, var(--cyan), #3b82f6);
    box-shadow: 0 10px 22px rgba(6, 182, 212, .28);
}

.craft-card-result {
    grid-column: 1 / -1;
    grid-row: 2;
    background: linear-gradient(135deg, #fef7ff 0%, #fff7ed 100%);
    border: 1px dashed rgba(124, 58, 237, .3);
    flex-direction: row;
    gap: 16px;
    min-height: auto;
    padding: 22px 26px;
    justify-content: center;
}

.craft-card-result i {
    background: linear-gradient(135deg, var(--amber), var(--pink));
    box-shadow: 0 10px 22px rgba(245, 158, 11, .28);
}

.craft-card-result span {
    font-size: 1.05rem;
    font-weight: 800;
}

.craft-plus {
    font-family: Outfit, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--violet);
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(124, 58, 237, .18);
    border: 1px solid rgba(124, 58, 237, .15);
}

@media(max-width:575px) {
    .craft-visual {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .craft-plus {
        margin: 0 auto;
    }
    .craft-card-result {
        grid-column: auto;
    }
}

/* ---------- Who We Serve ---------- */
.who-serve-section {
    background: var(--paper);
    position: relative;
}

.serve-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px 26px;
    height: 100%;
    border: 1px solid rgba(124, 58, 237, .08);
    box-shadow: 0 12px 32px rgba(53, 30, 95, .06);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    position: relative;
    overflow: hidden;
}

.serve-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--violet), var(--pink), var(--amber));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.serve-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 26px 55px rgba(91, 47, 133, .16);
    border-color: transparent;
}

.serve-card:hover::before {
    transform: scaleX(1);
}

.serve-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    color: #fff;
    margin-bottom: 22px;
    transition: transform .4s ease;
}

.serve-card:hover .serve-icon {
    transform: rotate(-8deg) scale(1.06);
}

.sc-1 .serve-icon {
    background: linear-gradient(135deg, var(--violet), #a855f7);
    box-shadow: 0 12px 24px rgba(124, 58, 237, .25);
}
.sc-2 .serve-icon {
    background: linear-gradient(135deg, var(--pink), #f472b6);
    box-shadow: 0 12px 24px rgba(236, 72, 153, .25);
}
.sc-3 .serve-icon {
    background: linear-gradient(135deg, var(--amber), var(--pink));
    box-shadow: 0 12px 24px rgba(245, 158, 11, .28);
}
.sc-4 .serve-icon {
    background: linear-gradient(135deg, var(--cyan), #3b82f6);
    box-shadow: 0 12px 24px rgba(6, 182, 212, .25);
}

.serve-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 10px;
}

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

/* ---------- Our Products ---------- */
.album-types-section {
    background: linear-gradient(180deg, var(--paper) 0%, #f6f0ff 60%, var(--paper) 100%);
    position: relative;
}

.album-type-card {
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .08);
    border-radius: 24px;
    padding: 32px 26px 30px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(53, 30, 95, .06);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.album-type-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--pink), var(--amber));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.album-type-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 55px rgba(91, 47, 133, .18);
}

.album-type-card:hover::before { opacity: 1; }

.album-type-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    box-shadow: 0 12px 24px rgba(124, 58, 237, .25);
    transition: transform .4s ease;
}

.album-type-card:nth-child(2) .album-type-icon {
    background: linear-gradient(135deg, var(--cyan), #3b82f6);
    box-shadow: 0 12px 24px rgba(6, 182, 212, .25);
}

.album-type-card:nth-child(3) .album-type-icon {
    background: linear-gradient(135deg, var(--amber), var(--pink));
    box-shadow: 0 12px 24px rgba(245, 158, 11, .28);
}

.album-type-card:nth-child(4) .album-type-icon {
    background: linear-gradient(135deg, var(--emerald), var(--cyan));
    box-shadow: 0 12px 24px rgba(16, 185, 129, .25);
}

.album-type-card:hover .album-type-icon {
    transform: rotate(-8deg) scale(1.06);
}

.album-type-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 10px;
}

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

/* ---------- Quality ---------- */
.quality-section {
    background: #1c1434;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.quality-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 5% 15%, rgba(124, 58, 237, .55), transparent 30%),
        radial-gradient(circle at 95% 85%, rgba(236, 72, 153, .45), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, .18), transparent 40%);
    pointer-events: none;
}

.quality-section .container { position: relative; z-index: 1; }
.quality-section .section-title,
.quality-section h3 { color: #fff; }
.quality-section .text-gradient {
    background: linear-gradient(95deg, #ffd57a 5%, #f2a3c9 55%, #c08cff 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.quality-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    padding: 28px 24px;
    height: 100%;
    backdrop-filter: blur(6px);
    transition: transform .4s ease, border-color .4s ease, background .4s ease;
    position: relative;
    overflow: hidden;
}

.quality-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 120px at 50% 0%, rgba(255, 255, 255, .08), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.quality-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
}

.quality-card:hover::after { opacity: 1; }

.quality-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    margin-bottom: 20px;
    color: #fff;
}

.q-icon-1 { background: linear-gradient(135deg, #f472b6, #ec4899); box-shadow: 0 10px 22px rgba(236, 72, 153, .35); }
.q-icon-2 { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 10px 22px rgba(124, 58, 237, .35); }
.q-icon-3 { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 10px 22px rgba(245, 158, 11, .35); }
.q-icon-4 { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 10px 22px rgba(6, 182, 212, .35); }
.q-icon-5 { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 10px 22px rgba(16, 185, 129, .35); }

.quality-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.quality-card p {
    color: rgba(255, 255, 255, .68);
    font-size: .85rem;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Simple Process ---------- */
.simple-process-section {
    background: linear-gradient(135deg, #fdf7ff 0%, #f4fcff 50%, #fff9ee 100%);
    position: relative;
    overflow: hidden;
}

.process-flow {
    display: grid;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

.process-flow-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: #fff;
    border-radius: 22px;
    padding: 24px 28px;
    box-shadow: 0 10px 30px rgba(53, 30, 95, .06);
    border: 1px solid rgba(124, 58, 237, .07);
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease;
}

.process-flow-item:hover {
    transform: translateX(6px);
    box-shadow: 0 16px 40px rgba(91, 47, 133, .14);
}

.pf-num {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: Outfit, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    box-shadow: 0 10px 22px rgba(124, 58, 237, .28);
    position: relative;
}

.process-flow-item:nth-child(2) .pf-num {
    background: linear-gradient(135deg, var(--pink), var(--amber));
    box-shadow: 0 10px 22px rgba(236, 72, 153, .28);
}

.process-flow-item:nth-child(3) .pf-num {
    background: linear-gradient(135deg, var(--amber), #f97316);
    box-shadow: 0 10px 22px rgba(245, 158, 11, .3);
}

.process-flow-item:nth-child(4) .pf-num {
    background: linear-gradient(135deg, var(--cyan), #3b82f6);
    box-shadow: 0 10px 22px rgba(6, 182, 212, .28);
}

.process-flow-item:nth-child(5) .pf-num {
    background: linear-gradient(135deg, var(--emerald), var(--cyan));
    box-shadow: 0 10px 22px rgba(16, 185, 129, .28);
}

.pf-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 4px 0 6px;
}

.pf-body p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.65;
    margin: 0;
}

.process-tagline {
    font-family: Outfit, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
}

.process-tagline span {
    background: linear-gradient(95deg, #8b37ee, #e93c9b, #f19a17);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Why PrintoBUFFET ---------- */
.why-buffet-section {
    background: var(--paper);
    position: relative;
}

.partner-card {
    border-radius: 24px;
    padding: 30px 26px;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #fff;
    transition: transform .4s ease, box-shadow .4s ease;
    box-shadow: 0 14px 34px rgba(53, 30, 95, .12);
}

.partner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 160px at 100% 0%, rgba(255, 255, 255, .18), transparent 65%);
    pointer-events: none;
}

.partner-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 26px 50px rgba(53, 30, 95, .22);
}

.pc-1 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.pc-2 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.pc-3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.pc-4 { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.pc-5 { background: linear-gradient(135deg, #10b981, #34d399); }
.pc-6 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

.pc-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 20px;
}

.partner-card h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 8px;
}

.partner-card p {
    color: rgba(255, 255, 255, .88);
    font-size: .87rem;
    line-height: 1.65;
    margin: 0;
    position: relative;
    z-index: 1;
}

@media(max-width:767px) {
    .process-flow-item { padding: 20px 20px; gap: 16px; }
    .pf-num { width: 48px; height: 48px; font-size: .9rem; }
    .pf-body h3 { font-size: 1rem; }
    .album-type-card,
    .quality-card,
    .partner-card,
    .serve-card { padding: 24px 20px; }
}

/* ==========================================================
   GALLERY — wardrobe shelf layout
   ========================================================== */
.gallery-showcase-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, .18), transparent 55%),
        linear-gradient(180deg, #1a1424 0%, #2a1e3a 50%, #1a1424 100%);
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
}

.gallery-showcase-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .012) 0 1px,
            transparent 1px 4px),
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, .18) 0 1px,
            transparent 1px 90px),
        radial-gradient(600px 300px at 50% 0%, rgba(255, 210, 160, .10), transparent 70%);
    pointer-events: none;
    opacity: .9;
}

.gallery-showcase-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 200, 130, .10), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(120, 80, 200, .15), transparent 35%);
    pointer-events: none;
    mix-blend-mode: screen;
}

.wardrobe-shell {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 30px;
    background: linear-gradient(180deg, #3a2a1f 0%, #2b1e16 60%, #1d140e 100%);
    border-radius: 28px;
    box-shadow:
        inset 0 1px 0 rgba(255, 210, 160, .25),
        inset 0 -60px 80px rgba(0, 0, 0, .55),
        0 40px 80px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(255, 200, 140, .12);
    overflow: hidden;
}

.wardrobe-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(88deg,
            rgba(0, 0, 0, .12) 0 1px,
            transparent 1px 3px,
            rgba(255, 220, 180, .03) 3px 4px,
            transparent 4px 8px),
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, .08) 0 1px,
            transparent 1px 60px);
    opacity: .55;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.wardrobe-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
        inset 60px 0 80px rgba(0, 0, 0, .55),
        inset -60px 0 80px rgba(0, 0, 0, .55),
        inset 0 40px 60px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.wardrobe-inner {
    position: relative;
    z-index: 2;
}

.wardrobe-row { padding: 0 10px; }

.wardrobe-shelf {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 10px;
}

.wardrobe-shelf-shadow {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 0;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, #6e4a30 0%, #4a3120 55%, #2a1c12 100%);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(255, 200, 150, .28),
        inset 0 -1px 0 rgba(0, 0, 0, .55);
    z-index: 0;
}

.wardrobe-shelf-shadow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 6px;
    background: linear-gradient(180deg, #3a2417, #1a0f08);
    border-radius: 0 0 3px 3px;
}

.wardrobe-shelf::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 8%;
    bottom: 40px;
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
    filter: blur(15px);
    z-index: 0;
    pointer-events: none;
}

.wardrobe-shelf .portfolio-thumb {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    border-radius: 14px;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, .55),
        0 4px 0 rgba(0, 0, 0, .35);
}

.portfolio-thumb {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #f2eefb;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1),
                box-shadow .45s cubic-bezier(.2, .7, .2, 1);
    isolation: isolate;
    transform-origin: bottom center;
}

.portfolio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
    will-change: transform;
}

.portfolio-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(23, 20, 39, .85) 0%,
        rgba(23, 20, 39, .35) 45%,
        transparent 70%);
    opacity: 0;
    transition: opacity .45s ease;
    z-index: 1;
}

.portfolio-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--violet), var(--pink), var(--amber));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s ease;
    z-index: 3;
    pointer-events: none;
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
    color: #fff;
}

.portfolio-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    font-size: 1.35rem;
    transition: transform .4s ease, background .4s ease, border-color .4s ease;
}

.portfolio-label {
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.wardrobe-shelf .portfolio-thumb:hover {
    transform: translateY(-8px) rotate(.4deg);
    box-shadow:
        0 30px 55px rgba(0, 0, 0, .7),
        0 8px 0 rgba(0, 0, 0, .35);
}

.portfolio-thumb:hover img {
    transform: scale(1.12);
    filter: saturate(1.08);
}

.portfolio-thumb:hover::after { opacity: 1; }
.portfolio-thumb:hover::before { opacity: 1; }

.portfolio-thumb:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-thumb:hover .portfolio-icon {
    transform: scale(1.08);
    background: rgba(255, 255, 255, .28);
    border-color: #fff;
}

.portfolio-thumb:focus-visible {
    outline: 2px solid #ffd9a8;
    outline-offset: 4px;
}

@media (max-width: 991px) {
    .wardrobe-shell {
        padding: 50px 20px 40px;
        border-radius: 22px;
    }
    .wardrobe-shelf-shadow { height: 16px; }
}

@media (max-width: 767px) {
    .gallery-showcase-section { padding: 60px 0 70px; }
    .wardrobe-shell {
        padding: 40px 14px 30px;
        border-radius: 18px;
    }
    .wardrobe-shelf { padding-bottom: 22px; }
    .wardrobe-shelf-shadow {
        height: 12px;
        left: 6%;
        right: 6%;
    }
    .wardrobe-shelf .portfolio-thumb {
        margin-bottom: 14px;
        border-radius: 10px;
    }
    .portfolio-icon {
        width: 48px;
        height: 48px;
        font-size: 1.05rem;
    }
    .portfolio-label { font-size: .72rem; }
}

/* ==========================================================
   COMPACT PAGE BANNER (used on inner pages)
   ========================================================== */
.hero.hero-printer.hero-page-banner {
    min-height: 0;
    height: auto;
    padding: 150px 0 60px;
    background-image: url('../images/hero-printer.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    background-color: #1e1c1a;
    display: block;
}

.hero.hero-printer.hero-page-banner::before {
    background: linear-gradient(90deg,
        rgba(15, 12, 20, .96) 0%,
        rgba(20, 16, 26, .90) 30%,
        rgba(30, 22, 40, .55) 60%,
        rgba(30, 22, 40, .15) 100%);
    z-index: 1;
}

.hero.hero-printer.hero-page-banner::after {
    background:
        radial-gradient(circle at 15% 24%, rgba(6, 182, 212, .18), transparent 27%),
        radial-gradient(circle at 56% 81%, rgba(245, 158, 11, .17), transparent 24%);
    mix-blend-mode: screen;
    z-index: 1;
}

.hero.hero-printer.hero-page-banner .container {
    position: relative;
    z-index: 2;
}

.hero.hero-printer.hero-page-banner .eyebrow {
    color: #f6d9ff;
    font-size: .68rem;
}

.hero.hero-printer.hero-page-banner .eyebrow::before {
    background: linear-gradient(90deg, #f5c01d, #ed53c2);
}

.hero.hero-printer.hero-page-banner h1 {
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    margin: 12px 0 14px;
    line-height: 1.1;
    color: #fff;
}

.hero.hero-printer.hero-page-banner h1 em {
    color: #ffc642;
    font-style: normal;
}

.hero.hero-printer.hero-page-banner .hero-copy {
    color: rgba(255, 255, 255, .82);
    font-size: .96rem;
    line-height: 1.55;
    max-width: 540px;
    margin: 0;
}

.hero.hero-printer.hero-page-banner .hero-actions {
    margin-top: 24px;
    gap: 10px;
}

.hero.hero-printer.hero-page-banner .hero-actions .btn {
    padding: 12px 18px;
    font-size: .78rem;
}

@media (max-width: 991px) {
    .hero.hero-printer.hero-page-banner {
        padding: 130px 0 55px;
        background-position: 70% center;
    }
    .hero.hero-printer.hero-page-banner h1 {
        font-size: 1.85rem;
    }
}

@media (max-width: 575px) {
    .hero.hero-printer.hero-page-banner {
        padding: 120px 0 45px;
        background-image:
            linear-gradient(180deg, rgba(15, 12, 20, .78) 0%, rgba(15, 12, 20, .92) 100%),
            url('../images/hero-printer.png');
        background-position: center;
        background-size: cover;
    }
    .hero.hero-printer.hero-page-banner h1 {
        font-size: 1.65rem;
    }
    .hero.hero-printer.hero-page-banner .hero-copy {
        font-size: .9rem;
    }
    .hero.hero-printer.hero-page-banner .hero-actions .btn {
        padding: 11px 16px;
        font-size: .74rem;
    }
}

/* Breadcrumb inside the hero banner */
.hero-breadcrumb .breadcrumb {
    margin: 0;
    font-size: .78rem;
    background: transparent;
    padding: 0;
}

.hero-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, .78);
    transition: color .25s ease;
}

.hero-breadcrumb .breadcrumb-item a:hover {
    color: #ffc642;
}

.hero-breadcrumb .breadcrumb-item.active {
    color: #ffc642;
}

.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .45);
}

/* ==========================================================
   SERVICES PAGE — homepage-style headings + colorful cards
   ========================================================== */

/* Section background alternation (matches homepage rhythm) */
.svcx-section {
    background: linear-gradient(180deg, var(--paper) 0%, #f6f0ff 55%, var(--paper) 100%);
}

.svcx-section.alt {
    background: var(--paper);
}

/* ---------- Card ---------- */
.svcx-card {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 32px 30px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .08);
    box-shadow: 0 12px 32px rgba(53, 30, 95, .06);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    overflow: hidden;
    isolation: isolate;
}

.svcx-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--violet), var(--pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.svcx-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 55px rgba(91, 47, 133, .16);
    border-color: transparent;
}

.svcx-card:hover::before { transform: scaleX(1); }

.svcx-card.accent-violet::before { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.svcx-card.accent-amber::before  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.svcx-card.accent-cyan::before   { background: linear-gradient(90deg, #06b6d4, #22d3ee); }

.svcx-icon {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.55rem;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 12px 24px rgba(124, 58, 237, .28);
    transition: transform .4s ease;
}

.svcx-card.accent-amber .svcx-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 12px 24px rgba(245, 158, 11, .28);
}

.svcx-card.accent-cyan .svcx-icon {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    box-shadow: 0 12px 24px rgba(6, 182, 212, .28);
}

.svcx-card:hover .svcx-icon {
    transform: rotate(-8deg) scale(1.06);
}

.svcx-body { flex: 1; min-width: 0; }

.svcx-body p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.75;
    margin: 0 0 16px;
}

.svcx-subhead {
    font-family: Outfit, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 8px;
}

.svcx-note {
    margin: 16px 0 0 !important;
    font-size: .88rem !important;
    opacity: .8;
    font-style: italic;
}

.svcx-chips {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.svcx-chips li {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: #5b21b6;
    background: linear-gradient(135deg, #f4ecff, #fbe9ff);
    border: 1px solid rgba(124, 58, 237, .16);
    padding: 7px 14px;
    border-radius: 999px;
    transition: transform .25s ease, box-shadow .25s ease;
    white-space: nowrap;
}

.svcx-chips li:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(124, 58, 237, .2);
}

.svcx-chips.chips-gold li {
    color: #92400e;
    background: linear-gradient(135deg, #fff5e1, #ffe9c7);
    border-color: rgba(245, 158, 11, .28);
}

.svcx-chips.chips-cyan li {
    color: #0e7490;
    background: linear-gradient(135deg, #e0f7fb, #dbf3fa);
    border-color: rgba(6, 182, 212, .28);
}

@media (max-width: 575px) {
    .svcx-card {
        flex-direction: column;
        gap: 18px;
        padding: 26px 22px;
    }
    .svcx-chips li { font-size: .74rem; padding: 6px 11px; }
    .svcx-icon { width: 54px; height: 54px; font-size: 1.35rem; }
}
/* Services page — section titles always gradient */
.svcx-section .section-title {
    background: linear-gradient(95deg, #8b37ee 5%, #e93c9b 45%, #f19a17 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* ==========================================================
   SERVICES PAGE — tighter vertical rhythm
   ========================================================== */

/* Reduce the default .section padding on the services page only */
.svcx-section {
    padding: 50px 0;
}

/* Reduce the gap between the heading and the cards below */
.svcx-section .text-center.mb-5 {
    margin-bottom: 1.5rem !important;
}

/* Slightly smaller heading so it feels tighter */
.svcx-section .section-title {
    font-size: clamp(1.9rem, 2.8vw, 2.4rem);
    margin: 0;
}

/* Tighten card padding */
.svcx-section .svcx-card {
    padding: 26px 26px;
}

/* Mobile — even tighter */
@media (max-width: 991px) {
    .svcx-section {
        padding: 40px 0;
    }
    .svcx-section .text-center.mb-5 {
        margin-bottom: 1.25rem !important;
    }
}

@media (max-width: 575px) {
    .svcx-section {
        padding: 32px 0;
    }
    .svcx-section .section-title {
        font-size: 1.75rem;
    }
    .svcx-section .svcx-card {
        padding: 22px 20px;
    }
}
/* ==========================================================
   PRICE CHART PAGE — matches Services page rhythm
   ========================================================== */

/* Uses .svcx-section for the shared background + spacing.
   Adds a tighter top padding since this page has a single section. */
.pricing-section {
    padding: 60px 0 90px;
}

/* White card with a gradient top bar */
.pricing-card {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(124, 58, 237, .08);
    box-shadow: 0 24px 55px rgba(53, 30, 95, .1);
    position: relative;
    overflow: hidden;
}

.pricing-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #7c3aed, #ec4899 55%, #f59e0b);
}

.pricing-card-inner {
    padding: 46px 48px;
}

/* Elegant lead line, with gradient on the strong text */
.pricing-lead {
    font-family: Outfit, sans-serif;
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.55;
    color: var(--ink);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}

.pricing-lead strong {
    background: linear-gradient(95deg, #8b37ee 5%, #e93c9b 55%, #f19a17 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* ---------- Phone cards ---------- */
.phone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.phone-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f6f0ff 0%, #fbe9ff 100%);
    border: 1px solid rgba(124, 58, 237, .14);
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.phone-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(320px 120px at 100% 0%, rgba(255, 255, 255, .5), transparent 65%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
}

.phone-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(124, 58, 237, .2);
    background: linear-gradient(135deg, #ffffff 0%, #fbe9ff 100%);
    border-color: rgba(124, 58, 237, .3);
}

.phone-card:hover::after { opacity: 1; }

.phone-card:nth-child(2) {
    background: linear-gradient(135deg, #fff7ed 0%, #ffe9c7 100%);
    border-color: rgba(245, 158, 11, .24);
}
.phone-card:nth-child(2):hover {
    box-shadow: 0 22px 45px rgba(245, 158, 11, .22);
    border-color: rgba(245, 158, 11, .4);
}

.phone-card:nth-child(3) {
    background: linear-gradient(135deg, #e0f7fb 0%, #dbf3fa 100%);
    border-color: rgba(6, 182, 212, .24);
}
.phone-card:nth-child(3):hover {
    box-shadow: 0 22px 45px rgba(6, 182, 212, .22);
    border-color: rgba(6, 182, 212, .4);
}

.phone-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 12px 24px rgba(124, 58, 237, .3);
    transition: transform .4s ease;
}

.phone-card:nth-child(2) .phone-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 12px 24px rgba(245, 158, 11, .3);
}

.phone-card:nth-child(3) .phone-icon {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    box-shadow: 0 12px 24px rgba(6, 182, 212, .3);
}

.phone-card:hover .phone-icon {
    transform: rotate(-8deg) scale(1.06);
}

.phone-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.phone-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--violet);
}

.phone-card:nth-child(2) .phone-label { color: #b45309; }
.phone-card:nth-child(3) .phone-label { color: #0e7490; }

.phone-number {
    font-family: Outfit, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-top: 2px;
    white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .pricing-section { padding: 50px 0 70px; }
    .pricing-card-inner { padding: 36px 28px; }
    .phone-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .pricing-lead { margin-bottom: 28px; }
}

@media (max-width: 575px) {
    .pricing-section { padding: 40px 0 60px; }
    .pricing-card { border-radius: 20px; }
    .pricing-card-inner { padding: 28px 20px; }
    .phone-card { padding: 18px 18px; }
    .phone-icon { width: 46px; height: 46px; font-size: 1.15rem; }
    .phone-number { font-size: 1.05rem; }
}
/* ==========================================================
   PRICE CHART — force centered gradient heading
   ========================================================== */
.pricing-section .pricing-heading {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 40px !important;
    text-align: center;
}

.pricing-section .pricing-heading .section-title {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: clamp(2.1rem, 3.4vw, 3rem);
}

.pricing-section .pricing-heading .section-title .text-gradient {
    display: inline-block;
    background: linear-gradient(95deg, #8b37ee 5%, #e93c9b 45%, #f19a17 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* ==========================================================
   FLOATING CONTACT US BUTTON + ADDRESS MODAL
   ========================================================== */

/* ---------- Floating button ---------- */
.contact-float {
    position: fixed;
    right: 25px;
    bottom: 96px;                    /* sits above the back-to-top button */
    z-index: 998;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-family: Outfit, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 55%, #f59e0b 100%);
    background-size: 200% 100%;
    box-shadow: 0 14px 34px rgba(124, 58, 237, .42);
    transition: transform .3s ease, box-shadow .3s ease, background-position .5s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.contact-float i {
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
}

.contact-float-label {
    pointer-events: none;
    white-space: nowrap;
}

.contact-float:hover,
.contact-float:focus-visible {
    background-position: 100% 0;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 44px rgba(236, 72, 153, .5);
    outline: none;
    color: #fff;
}

/* Gentle attention pulse (keeps it noticeable without being noisy) */
@keyframes cf-pulse {
    0%   { box-shadow: 0 14px 34px rgba(124, 58, 237, .42), 0 0 0 0   rgba(236, 72, 153, .35); }
    70%  { box-shadow: 0 14px 34px rgba(124, 58, 237, .42), 0 0 0 14px rgba(236, 72, 153, 0); }
    100% { box-shadow: 0 14px 34px rgba(124, 58, 237, .42), 0 0 0 0   rgba(236, 72, 153, 0); }
}

.contact-float {
    animation: cf-pulse 3.2s ease-in-out infinite;
}

.contact-float:hover {
    animation-play-state: paused;
}

/* ---------- Modal ---------- */
.contact-float-modal .modal-content {
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(33, 21, 61, .35);
    position: relative;
}

/* Top gradient strip */
.contact-float-modal .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #7c3aed, #ec4899 55%, #f59e0b);
    z-index: 2;
}

.contact-float-head {
    padding: 30px 32px 16px;
    text-align: center;
}

.contact-float-head .eyebrow {
    justify-content: center;
}

.contact-float-head h3 {
    font-family: Outfit, sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}

.contact-float-head p {
    color: var(--muted);
    font-size: .92rem;
    margin-top: 6px;
}

.contact-float-body {
    padding: 8px 28px 34px;
}

/* Two address blocks inside the modal — reuse the footer's look */
.contact-float-body .footer-addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: none;
    margin: 0;
}

.contact-float-body .footer-address-block {
    min-height: 220px;
    padding: 26px 22px 24px;
    border-radius: 18px;
}

.contact-float-body .footer-title { font-size: 1.05rem; }
.contact-float-body .footer-contact { font-size: .84rem; }
.contact-float-body .fab-icon { width: 40px; height: 40px; font-size: 1.05rem; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .contact-float {
        right: 16px;
        bottom: 82px;
        padding: 12px 14px;
    }

    .contact-float-label {
        display: none;      /* icon-only pill on mobile */
    }

    .contact-float i {
        font-size: 1.25rem;
    }

    .contact-float-modal .modal-content {
        border-radius: 22px;
    }

    .contact-float-head {
        padding: 24px 20px 12px;
    }

    .contact-float-body {
        padding: 8px 18px 26px;
    }

    .contact-float-body .footer-addresses {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-float-body .footer-address-block {
        min-height: auto;
        padding: 22px 18px;
    }
}
/* ==========================================================
   FLOATING CONTACT US BUTTON + ADDRESS MODAL
   ========================================================== */

/* ---------- Floating button ---------- */
.contact-float {
    position: fixed;
    right: 25px;
    bottom: 100px;
    z-index: 998;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-family: Outfit, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #ec4899 100%);
    background-size: 200% 100%;
    box-shadow:
        0 14px 32px rgba(124, 58, 237, .5),
        0 0 0 0 rgba(236, 72, 153, .55);
    transition: transform .3s ease, box-shadow .3s ease, background-position .5s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    animation: contact-pulse 2.8s ease-in-out infinite;
}

.contact-float i {
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
}

.contact-float-label {
    pointer-events: none;
    white-space: nowrap;
    display: inline-block;      /* always visible, even on mobile */
}

.contact-float:hover,
.contact-float:focus-visible {
    background-position: 100% 0;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 22px 48px rgba(236, 72, 153, .55);
    outline: none;
    color: #fff;
    animation-play-state: paused;
}

/* Attention ring */
@keyframes contact-pulse {
    0%   { box-shadow: 0 14px 32px rgba(124, 58, 237, .5), 0 0 0 0   rgba(236, 72, 153, .55); }
    70%  { box-shadow: 0 14px 32px rgba(124, 58, 237, .5), 0 0 0 16px rgba(236, 72, 153, 0);   }
    100% { box-shadow: 0 14px 32px rgba(124, 58, 237, .5), 0 0 0 0   rgba(236, 72, 153, 0);   }
}

/* ---------- Modal ---------- */
.contact-float-modal .modal-content {
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(33, 21, 61, .35);
    position: relative;
    padding: 6px 0 8px;
}

.contact-float-modal .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #7c3aed, #ec4899 55%, #f59e0b);
    z-index: 2;
}

.contact-float-body {
    padding: 32px 28px 34px;
}

.contact-float-body .footer-addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: none;
    margin: 0;
}

.contact-float-body .footer-address-block {
    min-height: 220px;
    padding: 26px 22px 24px;
    border-radius: 18px;
}

.contact-float-body .footer-title { font-size: 1.05rem; }
.contact-float-body .footer-contact { font-size: .84rem; }
.contact-float-body .fab-icon { width: 40px; height: 40px; font-size: 1.05rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .contact-float {
        right: 20px;
        bottom: 92px;
        padding: 15px 22px;
        font-size: .92rem;
    }
    .contact-float i { font-size: 1.15rem; }
}

@media (max-width: 575px) {
    .contact-float {
        right: 14px;
        bottom: 84px;
        padding: 14px 20px;
        font-size: .82rem;
        letter-spacing: .03em;
        gap: 8px;
        border-radius: 14px;             /* rounded rectangle, easier to read on mobile */
        animation: contact-pulse 2.8s ease-in-out infinite;
    }

    .contact-float i {
        font-size: 1.1rem;
    }

    .contact-float-label {
        display: inline-block;           /* keep text visible on mobile */
        font-size: .82rem;
    }

    .contact-float-modal .modal-content {
        border-radius: 22px;
    }

    .contact-float-body {
        padding: 26px 18px 26px;
    }

    .contact-float-body .footer-addresses {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-float-body .footer-address-block {
        min-height: auto;
        padding: 22px 18px;
    }
}
/* ==========================================================
   QUOTE MODAL — fix mobile submit + desktop clipping
   ========================================================== */

/* The modal grows with its content; only scroll if it exceeds the viewport */
.quote-modal .modal-dialog {
    max-height: calc(100vh - 40px);
    margin: 20px auto;
}

.quote-modal .modal-content {
    max-height: calc(100vh - 40px);
    overflow: visible;      /* don't clip the button */
    display: flex;
    flex-direction: column;
}

/* Make the form area scrollable if the modal is taller than the viewport */
.quote-modal .contact-form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;  /* smooth scroll on iOS */
    padding: 34px 36px 30px;            /* slightly tighter than the default 42px */
    scrollbar-width: thin;              /* thin scrollbar, less intrusive */
}

/* Chrome / Edge / Safari thin scrollbar */
.quote-modal .contact-form::-webkit-scrollbar { width: 8px; }
.quote-modal .contact-form::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, .35);
    border-radius: 999px;
}
.quote-modal .contact-form::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, .55);
}

/* Make sure the submit row never sits at the very bottom of the scroll area */
.quote-modal form .col-12.pt-2 {
    padding-top: 1rem !important;
    padding-bottom: .5rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .quote-modal .modal-dialog {
        max-height: 100vh;
        margin: 0;
    }

    .quote-modal .modal-content {
        max-height: 100vh;
        border-radius: 20px 20px 0 0;     /* sheet-style on mobile */
    }

    .quote-modal .contact-form {
        max-height: 100vh;
        padding: 26px 20px 26px;
        border-radius: 20px 20px 0 0;
    }

    .quote-modal .quote-head {
        margin-bottom: 16px;
        padding-right: 30px;             /* clear the close button */
    }

    .quote-modal .quote-head h3 {
        font-size: 1.25rem !important;
    }

    /* Submit button — full width, extra bottom padding */
    .quote-modal form .col-12.pt-2 {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem;
    }

    .quote-modal form .col-12.pt-2 .btn {
        width: 100%;
        padding: 14px 18px;
        font-size: .9rem;
    }

    .quote-modal form .form-note {
        display: block !important;
        margin-top: .75rem !important;
        text-align: center;
    }
}

/* Very small screens — even tighter */
@media (max-width: 400px) {
    .quote-modal .contact-form {
        padding: 22px 16px 22px;
    }
}