/*
 * HMM Digital Marketing — custom visual and animation system
 * Written specifically for this website. Loaded after the Digimax template.
 */

:root {
    --hmm-violet: #7c2ee6;
    --hmm-indigo: #4528dc;
    --hmm-cyan: #12c6df;
    --hmm-coral: #ff665a;
    --hmm-ink: #160d2c;
    --hmm-muted: #6f6980;
    --hmm-paper: #ffffff;
    --hmm-mist: #f7f4fc;
    --hmm-line: rgba(69, 40, 220, .12);
    --hmm-shadow: 0 24px 70px rgba(29, 15, 65, .14);
    --hmm-shadow-soft: 0 12px 38px rgba(29, 15, 65, .10);
    --hmm-radius: 20px;
    --hmm-ease: cubic-bezier(.18, .8, .25, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--hmm-muted);
    background: var(--hmm-paper);
}

body::before {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: var(--page-progress, 0%);
    height: 3px;
    background: linear-gradient(90deg, var(--hmm-cyan), var(--hmm-violet), var(--hmm-coral));
    box-shadow: 0 0 16px rgba(124, 46, 230, .65);
    content: '';
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hmm-ink);
    letter-spacing: -.025em;
}

p {
    line-height: 1.72;
}

/* Glass navigation */
#header .navbar {
    transition: padding .35s ease, background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

#header .navbar.sticky,
#header .navbar.navbar-sticky {
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 10px 35px rgba(25, 12, 59, .09);
    backdrop-filter: blur(18px) saturate(150%);
}

.navbar-brand img {
    max-width: 180px;
    transition: transform .35s var(--hmm-ease), filter .35s ease;
}

.navbar-brand:hover img {
    transform: scale(1.055) rotate(-1deg);
    filter: drop-shadow(0 7px 14px rgba(69, 40, 220, .2));
}

.navbar-nav.items .nav-link {
    position: relative;
}

.navbar-nav.items .nav-link::after {
    position: absolute;
    right: 18px;
    bottom: 7px;
    left: 18px;
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--hmm-cyan), var(--hmm-violet));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .32s var(--hmm-ease);
    content: '';
}

.navbar-nav.items .nav-link:hover::after,
.navbar-nav.items .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Buttons */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .28s var(--hmm-ease), box-shadow .28s ease, color .28s ease !important;
}

.btn::before {
    position: absolute;
    z-index: -1;
    top: -120%;
    left: -45%;
    width: 38%;
    height: 340%;
    background: rgba(255, 255, 255, .32);
    transform: rotate(28deg) translateX(-250%);
    transition: transform .6s ease;
    content: '';
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(69, 40, 220, .22);
}

.btn:hover::before {
    transform: rotate(28deg) translateX(620%);
}

.hmm-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .48);
    transform: scale(0);
    animation: hmmRipple .7s linear;
    pointer-events: none;
}

/* Hero */
.welcome-area {
    background-image:
        radial-gradient(circle at 18% 24%, rgba(18, 198, 223, .28), transparent 30%),
        radial-gradient(circle at 84% 28%, rgba(255, 102, 90, .2), transparent 26%),
        linear-gradient(125deg, rgba(24, 9, 61, .96), rgba(84, 30, 172, .9)),
        url('../img/bg/welcome_bg.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    animation: hmmHeroGradient 14s ease-in-out infinite alternate;
}

.welcome-area::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .36) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: .16;
    animation: hmmGridDrift 18s linear infinite;
    content: '';
    pointer-events: none;
}

.welcome-area .container,
.welcome-area .welcome-shape {
    z-index: 2;
}

.welcome-intro h1 {
    text-shadow: 0 15px 40px rgba(0, 0, 0, .24);
}

.package-badge {
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 10px 30px rgba(0, 0, 0, .12);
    backdrop-filter: blur(12px);
    animation: hmmBadgePulse 3s ease-in-out infinite;
}

.welcome-thumb-wrapper {
    transform-style: preserve-3d;
    animation: hmmHeroFloat 6s ease-in-out infinite;
}

.welcome-thumb-wrapper img {
    filter: drop-shadow(0 25px 30px rgba(0, 0, 0, .2));
}

.welcome-thumb-1 img { animation: hmmFloatA 5.6s ease-in-out infinite; }
.welcome-thumb-2 img { animation: hmmFloatB 6.4s ease-in-out infinite .35s; }
.welcome-thumb-3 img { animation: hmmFloatA 5.2s ease-in-out infinite .7s; }
.welcome-thumb-4 img { animation: hmmFloatB 6s ease-in-out infinite 1s; }

/* Every section receives its own graphical stage */
.main > .hmm-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.main > .hmm-section > .container {
    position: relative;
    z-index: 3;
}

.main > .hmm-section:not(.welcome-area):not(.breadcrumb-area):not(.bg-overlay)::before {
    position: absolute;
    z-index: 0;
    top: -115px;
    right: -115px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(124, 46, 230, .11);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(124, 46, 230, .09), transparent 63%),
        url('../img/bg/stars.svg') center/70% no-repeat;
    animation: hmmOrbSpin 24s linear infinite;
    content: '';
}

.main > .hmm-section:not(.welcome-area):not(.breadcrumb-area):not(.bg-overlay)::after {
    position: absolute;
    z-index: 0;
    bottom: -90px;
    left: -90px;
    width: 240px;
    height: 240px;
    border-radius: 45% 55% 65% 35%;
    background: linear-gradient(135deg, rgba(18, 198, 223, .08), rgba(124, 46, 230, .08));
    animation: hmmMorph 9s ease-in-out infinite alternate;
    content: '';
}

.hmm-orb {
    position: absolute;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(18, 198, 223, .18), rgba(124, 46, 230, .18));
    filter: blur(1px);
    animation: hmmOrbit 9s ease-in-out infinite;
    pointer-events: none;
}

.hmm-orb.orb-a { top: 18%; left: 4%; }
.hmm-orb.orb-b { right: 5%; bottom: 14%; width: 44px; height: 44px; animation-delay: -3s; }

.section-heading h2 {
    position: relative;
    display: inline-block;
}

.section-heading h2::after {
    display: block;
    width: 58px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--hmm-cyan), var(--hmm-violet), var(--hmm-coral));
    transform: scaleX(.35);
    transition: transform .8s var(--hmm-ease), width .8s var(--hmm-ease);
    content: '';
}

.hmm-section.is-shown .section-heading h2::after {
    width: 88px;
    transform: scaleX(1);
}

.breadcrumb-area {
    background-image: linear-gradient(120deg, rgba(20, 8, 48, .92), rgba(76, 32, 154, .78)), url('../img/bg/inner_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

.breadcrumb-content {
    animation: hmmBreadcrumbFloat 5s ease-in-out infinite;
}

/* Scroll reveal: a different direction for each visual element */
.hmm-js .hmm-section .hmm-reveal {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 45px, 0) scale(.97);
    transition:
        opacity .82s var(--hmm-ease) var(--hmm-delay, 0ms),
        transform .82s var(--hmm-ease) var(--hmm-delay, 0ms),
        filter .82s ease var(--hmm-delay, 0ms);
}

.hmm-js .hmm-section .hmm-reveal.from-left { transform: translate3d(-55px, 0, 0) rotate(-1.5deg); }
.hmm-js .hmm-section .hmm-reveal.from-right { transform: translate3d(55px, 0, 0) rotate(1.5deg); }
.hmm-js .hmm-section .hmm-reveal.zoom-in { transform: scale(.86); }

.hmm-js .hmm-section.is-shown .hmm-reveal {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

/* Image-led cards */
.visual-card,
.image-service-card,
.client-stat,
.client-list-card,
.portfolio-card,
.lead-ad-card,
.performance-card,
.contact-box,
.package-summary,
.single-price-plan {
    position: relative;
    border: 1px solid rgba(69, 40, 220, .08);
    border-radius: var(--hmm-radius) !important;
    box-shadow: var(--hmm-shadow-soft);
    transform-style: preserve-3d;
    will-change: transform;
}

.visual-card::before,
.image-service-card::before,
.client-stat::before,
.client-list-card::before,
.portfolio-card::before,
.lead-ad-card::before,
.contact-box::before {
    position: absolute;
    z-index: 6;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, .45), transparent 38%);
    opacity: 0;
    transition: opacity .3s ease;
    content: '';
    pointer-events: none;
}

.visual-card:hover::before,
.image-service-card:hover::before,
.client-stat:hover::before,
.client-list-card:hover::before,
.portfolio-card:hover::before,
.lead-ad-card:hover::before,
.contact-box:hover::before {
    opacity: 1;
}

.hmm-tilt {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
    transition: transform .18s ease-out, box-shadow .32s ease !important;
}

.hmm-tilt:hover {
    --lift: -9px;
    box-shadow: var(--hmm-shadow) !important;
}

.card-cover,
.market-cover,
.lead-visual,
.contact-visual,
.portfolio-frame {
    overflow: hidden;
}

.card-cover img,
.market-cover img,
.lead-visual img,
.contact-visual img {
    transform: scale(1.02) translateY(var(--image-shift, 0px));
    transition: transform .8s var(--hmm-ease), filter .6s ease;
}

.visual-card:hover img,
.image-service-card:hover img,
.client-list-card:hover img,
.lead-ad-card:hover img,
.contact-visual:hover img {
    transform: scale(1.1) translateY(var(--image-shift, 0px));
    filter: saturate(1.08) contrast(1.03);
}

.card-cover::after {
    background: linear-gradient(180deg, transparent 35%, rgba(18, 8, 41, .78));
}

.card-cover .cover-badge {
    box-shadow: 0 9px 25px rgba(0, 0, 0, .2);
}

.service-icon,
.stat-icon,
.market-icon,
.offer-count {
    animation: hmmIconBreath 3.4s ease-in-out infinite;
}

.image-service-card:nth-child(2n) .service-icon,
.client-stat:nth-child(2n) .stat-icon {
    animation-delay: -1.2s;
}

.offer-promise-card {
    border: 0;
    border-radius: var(--hmm-radius);
}

.offer-promise-card .promo-wrapper {
    min-height: 215px;
}

.offer-promise-card.active,
.offer-promise-card:hover {
    background: linear-gradient(135deg, var(--hmm-violet), var(--hmm-indigo));
}

.commitment-strip {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--hmm-radius);
    background:
        radial-gradient(circle at 20% 50%, rgba(18, 198, 223, .2), transparent 28%),
        radial-gradient(circle at 85% 25%, rgba(255, 102, 90, .18), transparent 25%),
        linear-gradient(125deg, #160b38, #321070);
}

.commitment-strip::after {
    position: absolute;
    inset: -80% -20%;
    background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .09) 50%, transparent 58%);
    animation: hmmStripShine 5s linear infinite;
    content: '';
}

.commitment-item strong {
    font-size: 18px;
}

.client-number,
.performance-number,
.price-hero,
.counter {
    background: linear-gradient(90deg, var(--hmm-indigo), var(--hmm-violet), var(--hmm-coral));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: hmmTextGradient 4s linear infinite;
}

.performance-card .performance-number {
    background: linear-gradient(90deg, #fff, #b8f7ff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
}

.client-stat {
    background: linear-gradient(145deg, #fff, #faf8ff);
}

.client-stat:hover .stat-icon,
.client-list-card:hover .market-icon {
    transform: scale(1.12) rotate(8deg);
}

.market-cover {
    height: 135px;
}

.performance-card {
    background:
        radial-gradient(circle at 80% 20%, rgba(18, 198, 223, .28), transparent 28%),
        linear-gradient(135deg, var(--hmm-violet), var(--hmm-indigo));
}

.lead-ad-card,
.contact-box {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.photo-price-card {
    overflow: hidden;
}

.photo-price-card::after {
    position: absolute;
    top: -70px;
    right: -65px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(18, 198, 223, .15), rgba(124, 46, 230, .18));
    animation: hmmOrbit 7s ease-in-out infinite;
    content: '';
}

.portfolio-card {
    background: #fff;
}

.portfolio-frame .play,
.play-btn {
    animation: hmmPlayPulse 2.2s ease-in-out infinite;
}

.work-filter .btn.active {
    box-shadow: 0 10px 24px rgba(69, 40, 220, .22);
}

.work-item {
    transition: opacity .35s ease, transform .35s var(--hmm-ease);
}

.work-item.hmm-filter-out {
    opacity: 0;
    transform: scale(.86) translateY(20px);
}

.package-summary {
    background:
        radial-gradient(circle at 85% 12%, rgba(18, 198, 223, .25), transparent 28%),
        linear-gradient(135deg, var(--hmm-violet), var(--hmm-indigo));
}

.form-control {
    border: 1px solid var(--hmm-line) !important;
    border-radius: 12px !important;
    background: #fbfaff !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

.form-control:focus {
    border-color: rgba(124, 46, 230, .55) !important;
    box-shadow: 0 0 0 4px rgba(124, 46, 230, .1) !important;
    transform: translateY(-1px);
}

.brief-item,
.visual-pill {
    transition: transform .32s var(--hmm-ease), color .32s ease, background .32s ease, box-shadow .32s ease;
}

.brief-item:hover,
.visual-pill:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--hmm-violet), var(--hmm-indigo));
    box-shadow: 0 16px 35px rgba(69, 40, 220, .23);
    transform: translateY(-7px);
}

.brief-item:hover strong,
.brief-item:hover i,
.visual-pill:hover i {
    color: #fff;
}

.graphic-cta {
    background-attachment: fixed !important;
}

.graphic-cta::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    animation: hmmGridDrift 18s linear infinite;
    content: '';
}

.hmm-cursor-glow {
    position: fixed;
    z-index: 9997;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 46, 230, .09), transparent 68%);
    transform: translate(-50%, -50%);
    transition: opacity .25s ease;
    pointer-events: none;
}

/* Keyframes */
@keyframes hmmRipple { to { transform: scale(4); opacity: 0; } }
@keyframes hmmHeroGradient { from { background-position: 45% 50%; } to { background-position: 58% 45%; } }
@keyframes hmmGridDrift { to { background-position: 60px 60px; } }
@keyframes hmmBadgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes hmmHeroFloat { 0%,100% { transform: translateY(0) rotateZ(0); } 50% { transform: translateY(-11px) rotateZ(.4deg); } }
@keyframes hmmFloatA { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(0,-13px,0) rotate(1deg); } }
@keyframes hmmFloatB { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(8px,10px,0) rotate(-1deg); } }
@keyframes hmmOrbSpin { to { transform: rotate(360deg); } }
@keyframes hmmMorph { 0% { border-radius: 45% 55% 65% 35%; transform: rotate(0); } 100% { border-radius: 65% 35% 45% 55%; transform: rotate(20deg); } }
@keyframes hmmOrbit { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(16px,-18px,0); } }
@keyframes hmmBreadcrumbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hmmIconBreath { 0%,100% { box-shadow: 0 8px 18px rgba(69,40,220,.18); } 50% { box-shadow: 0 10px 28px rgba(69,40,220,.35); } }
@keyframes hmmStripShine { to { transform: translateX(65%); } }
@keyframes hmmTextGradient { to { background-position: 200% center; } }
@keyframes hmmPlayPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(124,46,230,0)); } 50% { filter: drop-shadow(0 0 16px rgba(124,46,230,.55)); } }

@media (max-width: 991px) {
    .graphic-cta { background-attachment: scroll !important; }
    .hmm-cursor-glow { display: none; }
    .hmm-tilt { transform: none !important; }
}

@media (max-width: 767px) {
    :root { --hmm-radius: 16px; }
    .main > .hmm-section:not(.welcome-area):not(.breadcrumb-area):not(.bg-overlay)::before { width: 220px; height: 220px; }
    .hmm-orb { display: none; }
    .offer-promise-card .promo-wrapper { min-height: auto; }
    .welcome-area { animation: none; }
    .section-heading h2::after { margin-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    .hmm-js .hmm-section .hmm-reveal { opacity: 1 !important; filter: none !important; transform: none !important; }
    .hmm-cursor-glow { display: none; }
}