/* Suppress all transitions during initial page load to prevent dropdown flash */
body.preload * {
    transition: none !important;
}

/* Global Reset & Variables */
:root {
    --bg-color: #0a0a0a;
    --card-bg: #111111;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --accent: #D4AF37;
    /* Gold */
    --accent-glow: rgba(212, 175, 55, 0.3);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
    --transition: all 0.3s ease;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 100px 0;
}

.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    transition: var(--transition);
}

.btn-primary:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent-glow);
}

.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    transition: var(--transition);
    margin-left: 15px;
}

.btn-secondary:hover {
    border-color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 400;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.section-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 15px;
    font-weight: 500;
}

.section-header h2 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--text-primary);
    background: none;
    /* Reset gradient */
    -webkit-text-fill-color: initial;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

.section-header h2 .highlight {
    font-style: italic;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    /* Or keep it white/gold */
    background: linear-gradient(to right, #D4AF37, #FDB931);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.line-break {
    width: 60px;
    height: 3px;
    background: var(--accent);
    margin: 0 auto 25px;
    border-radius: 2px;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
    font-weight: 300;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Playfair Display', serif; /* stable display=optional font — navbar must never swap/jerk regardless of a page's --font-heading */
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0 !important;
}

.logo img {
    height: 40px;
    width: auto;
}

.logo span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: nowrap !important;
}

.nav-links li a {
    font-family: 'Outfit', sans-serif; /* stable display=optional font — navbar must never swap/jerk regardless of a page's --font-body */
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 5px;
    white-space: nowrap !important;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--accent);
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--text-primary);
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
    width: 100%;
}

.nav-links .btn-primary {
    padding: 8px 20px;
    font-size: 0.8rem;
}

/* The Contact CTA has its own bordered style — suppress the nav underline that
   would otherwise draw a gold line through the button text. */
.nav-links li a.btn-primary::after,
.nav-links li a.btn-primary:hover::after,
.nav-links li a.btn-primary.active::after {
    content: none;
}

.hamburger {
    display: none;
    cursor: pointer;
    background: transparent;
    border: none;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    /* Space for fixed navbar */
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Zoom 150% and position to effectively crop out center text */
    background-size: 150% !important;
    background-position: center !important;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 0.4;
    /* Match the previous background opacity */
}

.text-fade {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, var(--bg-color), transparent);
    z-index: -1;
}

.hero-content h1 {
    font-size: 6rem;
    line-height: 1.05;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -1.5px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hero-gradient-text {
    background: linear-gradient(120deg, #ffffff 0%, #D4AF37 60%, #FDB931 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: 1.3rem;
    color: #e0e0e0;
    margin-bottom: 45px;
    max-width: 700px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two cards per row */
    gap: 30px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-image {
    height: 200px;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 4px;
}

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

.card-image .placeholder-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-family: var(--font-heading);
    font-size: 2rem;
}

.service-card:hover .card-image img {
    transform: scale(1.05);
}

.service-card h3,
.card-content h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: linear-gradient(120deg, #ffffff 0%, #D4AF37 60%, #FDB931 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-heading);
    letter-spacing: -0.5px;
}

.service-card p,
.card-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Portfolio */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.portfolio-item {
    position: relative;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
}

.portfolio-item.large {
    grid-row: span 2;
    height: 620px;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-item .placeholder-img-s {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.1);
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(100%);
    transition: var(--transition);
}

.portfolio-item:hover .overlay {
    transform: translateY(0);
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.overlay p {
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Studio Highlight */
.studio-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.studio-text h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.studio-text p {
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.studio-features {
    margin-bottom: 30px;
}

.studio-features li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.studio-features li::before {
    content: '•';
    color: var(--accent);
    margin-right: 10px;
    font-size: 1.5rem;
}

.studio-visual {
    position: relative;
    perspective: 1000px;
}

.studio-img-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
}

.studio-img-link img {
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

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

.studio-overlay span {
    font-size: 1.2rem;
    color: #fff;
    border: 1px solid var(--accent);
    padding: 10px 25px;
    background: rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(5px);
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.studio-img-link:hover {
    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.15);
    border-color: var(--accent);
    transform: translateY(-5px);
}

.studio-img-link:hover img {
    transform: scale(1.05);
}

.studio-img-link:hover .studio-overlay {
    opacity: 1;
}

.studio-img-link:hover .studio-overlay span {
    transform: translateY(0);
}

/* Testimonials */
.testimonial-slider {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.testimonial-card {
    background: var(--card-bg);
    padding: 40px;
    border-left: 2px solid var(--accent);
}

.testimonial-card p {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 20px;
    color: #ddd;
}

.testimonial-card h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer */
.footer {
    background: #050505;
    padding: 100px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    color: #fff;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 80px;
}

.footer-brand .footer-logo-text {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 10px;
    display: block;
    letter-spacing: 1px;
}

/* Footer brand mirrors the navbar logo exactly: icon + two-tone text (Media in gold) */
.footer-brand .footer-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); /* fluid: never oversized on large monitors */
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 10px;
}

.footer-brand .footer-brand-logo img {
    height: clamp(32px, 24px + 1.2vw, 40px);
    width: auto;
}

.footer-brand .footer-brand-logo span {
    color: var(--accent);
}

.footer-brand .footer-subtext {
    display: block;
    font-size: 0.75rem;
    color: var(--accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 500;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 30px;
    max-width: 300px;
}

.footer-social-links {
    display: flex;
    gap: 15px;
}

.footer-social-links a {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: all 0.4s ease;
}

.footer-social-links a:hover {
    background: var(--accent);
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.footer-social-links a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Brand colours */
.footer-social-links a[aria-label="Facebook"] {
    color: #1877F2;
    border-color: rgba(24, 119, 242, 0.4);
}
.footer-social-links a[aria-label="Facebook"]:hover {
    background: #1877F2;
    color: #fff;
    box-shadow: 0 10px 20px rgba(24, 119, 242, 0.3);
}
.footer-social-links a[aria-label="Instagram"] {
    color: #E1306C;
    border-color: rgba(225, 48, 108, 0.4);
}
.footer-social-links a[aria-label="Instagram"] svg {
    fill: none;
    stroke: currentColor;
}
.footer-social-links a[aria-label="Instagram"]:hover {
    background: #E1306C;
    color: #fff;
    box-shadow: 0 10px 20px rgba(225, 48, 108, 0.3);
}
.footer-social-links a[aria-label="LinkedIn"] {
    color: #0A66C2;
    border-color: rgba(10, 102, 194, 0.4);
}
.footer-social-links a[aria-label="LinkedIn"]:hover {
    background: #0A66C2;
    color: #fff;
    box-shadow: 0 10px 20px rgba(10, 102, 194, 0.3);
}
.footer-social-links a[aria-label="YouTube"] {
    color: #FF0000;
    border-color: rgba(255, 0, 0, 0.4);
}
.footer-social-links a[aria-label="YouTube"]:hover {
    background: #FF0000;
    color: #fff;
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.3);
}

.footer h3 {
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 12px;
    font-family: var(--font-body);
    font-weight: 600;
}

.footer h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.footer-links ul li {
    margin-bottom: 15px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.footer-links ul li a:hover {
    color: #fff;
    padding-left: 8px;
}

.footer-contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.footer-contact-item svg {
    color: var(--accent);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.footer-contact-item .detail p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 0;
}

.footer-contact-item .detail a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-contact-item .detail a:hover {
    color: var(--accent);
}

.footer-btn-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 20px;
    /* Increased margin for better separation from map */
    transition: all 0.4s ease;
    background: transparent;
    text-decoration: none;
    width: fit-content;
}

.footer-btn-directions:hover {
    background: var(--accent);
    color: #000;
}

.footer-map-header {
    display: none;
    /* Removed in favor of standard H3 in HTML */
}

.footer-map-container {
    margin-top: 0;
}

.footer-map-box {
    border-radius: 8px;
    overflow: hidden;
    height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.footer-map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(90%) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

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

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--accent);
}

/* Response Fixes */
@media (max-width: 1200px) {
    .footer-top {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
    }
}

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

@media (max-width: 768px) {
    .footer {
        padding: 60px 0 30px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .footer-brand p {
        margin: 0 auto 30px;
    }

    .footer-social-links {
        justify-content: center;
    }

    .footer h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links ul {
        padding: 0;
    }

    .footer-links ul li a:hover {
        padding-left: 0;
    }

    .footer-contact-item {
        justify-content: center;
        text-align: left;
        /* Keep text detail left-aligned within the centered container if preferred, or center it too */
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}


/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

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

/* Who We Serve Vertical Images */
.who-we-serve-images {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Image Wrapper for Hover */
.image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.image-wrapper:hover {
    transform: translateY(-5px);
}

.premium-vertical-img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapper:hover .premium-vertical-img {
    transform: scale(1.03);
    /* Subtle zoom */
}

/* Hover Overlay Label */
.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-wrapper:hover .image-overlay {
    opacity: 1;
}

.image-overlay span {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 1px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--accent);
}

/* About Page Styles */
.about-hero {
    height: 60vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/hero-slide-web.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    margin-top: -80px;
    /* Offset fixed navbar if any, though navbar here is static/sticky logic dependant */
    padding-top: 80px;
}

/* Handle navbar overlap if necessary, or just rely on structure. 
   In index.html hero usage: navbar is inside? No, separate. 
   Standard .hero uses 100vh. 
   Let's ensure .about-hero covers the top correctly.
*/

.about-hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    font-family: var(--font-heading);
}

.softkamck-badge {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid var(--accent);
    padding: 12px 30px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    transition: var(--transition);
}

.softkamck-badge:hover {
    background: var(--accent);
    color: #000;
}

.about-section {
    padding: 120px 0;
    background: var(--bg-color);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 30px;
}

.about-text p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.8;
}

.about-text strong {
    color: var(--text-primary);
}

.service-flex {
    display: flex;
    gap: 80px;
    /* Increased gap */
    align-items: flex-start;
    /* Align top for better reading flow */
    padding: 40px 0;
}

.service-info {
    flex: 1;
    position: relative;
}

/* Premium Typography for Service Title */
.service-info h2 {
    font-size: 2.5rem;
    /* Larger */
    margin-bottom: 20px;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

/* Subtitle styling */
.service-info h3 {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 30px;
}

.service-info p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 90%;
}

/* Premium Feature List */
.feature-list {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Two columns if space permits */
    gap: 15px 30px;
}

.feature-list li {
    margin-bottom: 0;
    padding-left: 30px;
    position: relative;
    color: #e0e0e0;
    font-weight: 300;
    line-height: 1.6;
}

.feature-list li::before {
    content: '✓';
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* Pricing Section - Integrated */
.service-pricing {
    margin-top: 40px;
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    /* Subtle gold border */
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    /* Sharper corners for premium feel */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 600px;
}

.service-pricing h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-tag {
    font-size: 2rem;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 400;
    margin: 0;
}

.price-suffix {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Visual */
.service-visual {
    flex: 0 0 40%;
    max-width: 450px;
    position: relative;
}

/* Decorative frame adjustment */
.service-visual::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(212, 175, 55, 0.3);
    z-index: -1;
    transition: var(--transition);
}

.service-visual:hover::before {
    top: -10px;
    right: -10px;
    border-color: var(--accent);
}

.service-visual img {
    width: 100%;
    height: auto;
    min-height: 450px;
    /* Taller */
    object-fit: cover;
    border-radius: 2px;
    -webkit-filter: inherit;
    filter: inherit;
    /* Reset specific filters if any */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.service-visual:hover img {
    transform: scale(1.02);
}

@media (max-width: 900px) {
    .service-flex {
        flex-direction: column;
        gap: 40px;
    }

    .service-pricing {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-visual {
        width: 100%;
        max-width: 100%;
        flex: auto;
        order: -1;
        /* Image first on mobile */
    }

    .service-visual::before {
        display: none;
        /* Hide decorative border on mobile */
    }

    .service-visual img {
        min-height: 250px;
    }
}

.about-visual img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

/* Responsive */
@media (max-width: 900px) {
    .studio-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .studio-features li {
        justify-content: center;
    }

    .about-hero h1 {
        font-size: 2.2rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-visual {
        order: -1;
        /* Image first on mobile for visually rich feel */
    }
}

/* Partnership Philosophy Styling */
.partnership-list {
    list-style: none;
    margin-top: 30px;
}

.partnership-list li {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--accent);
    padding: 20px;
    margin-bottom: 20px;
    transition: var(--transition);
}

.partnership-list li:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(10px);
}

.partnership-list strong {
    display: block;
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-family: var(--font-heading);
}


@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 72px;
        padding-bottom: 80px;
    }

    .hero-seo-h1 {
        position: relative;
        top: auto;
        left: auto;
        font-size: 1.35rem;
        padding: 22px 20px 28px;
        line-height: 1.45;
        letter-spacing: 1px;
    }

    .hero-content {
        flex: 1;
        padding-top: 24px !important;
        justify-content: center;
    }

    .hero-content h1 {
        font-size: 2.8rem;
        line-height: 1.15;
        margin-bottom: 18px;
        letter-spacing: -0.5px;
    }

    .hero-content p {
        font-size: 1.1rem;
        margin-bottom: 28px;
    }

    .hero-btns {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 0;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 16px 0;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .hero-seo-h1 {
        font-size: 1.15rem;
        padding: 18px 16px 22px;
    }

    .hero-content h1 {
        font-size: 2.1rem;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    background: #111;
    margin: 5% auto;
    width: 90%;
    max-width: 900px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
    transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.modal.show .modal-content {
    transform: translateY(0);
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 10;
    cursor: pointer;
    transition: color 0.3s;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.modal-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

.modal-title-overlay {
    position: absolute;
    bottom: 20px;
    left: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.modal-title-overlay h2 {
    font-size: 2.5rem;
    color: #fff;
    margin: 0;
    font-family: var(--font-heading);
}

.modal-body {
    padding: 40px;
    color: var(--text-secondary);
}

.modal-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.modal-section-title {
    font-size: 1.2rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-top: 30px;
}

.modal-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.modal-list li {
    position: relative;
    padding-left: 25px;
    color: #ddd;
}

.modal-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    background: rgba(212, 175, 55, 0.05);
}

.pricing-tier {
    font-size: 1rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.pricing-amount {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

.modal-actions {
    text-align: center;
    margin-top: 50px;
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {

    /* Mobile Navigation Styles */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .nav-links {
        position: fixed;
        right: 0px;
        height: 100vh;
        top: 0px;
        background-color: var(--bg-color);
        background: #0a0a0a; /* fully opaque: backdrop-filter is unreliable, page content must not bleed through */
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10001;
        padding-top: 120px;
        padding-bottom: 80px;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.6);
        overflow-y: auto;
    }

    /* Gold Divider Line below 'Home' */
    .nav-links li:first-child {
        margin-bottom: 25px;
    }

    .nav-links li a {
        font-size: 1.4rem;
        font-family: var(--font-heading);
        color: var(--text-primary);
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 300;
        display: block;
        text-align: center;
        padding: 5px 0;
        transition: color 0.3s ease;
        position: relative;
    }

    .nav-links li a:active {
        color: var(--accent);
    }

    .hamburger {
        display: block;
        z-index: 10002;
        /* Must sit above the open nav overlay (10001) so the close toggle stays clickable */
        margin-right: 0;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 28px;
        height: 2px;
        margin: 6px 0;
        background-color: var(--accent);
        /* Changed to accent for visibility */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Toggle Classes */
    .nav-active {
        transform: translateX(0%);
    }

    .toggle span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .toggle span:nth-child(2) {
        opacity: 0;
    }

    .toggle span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Responsive Improvements */
    .hero-content h1,
    .about-hero h1,
    .cap-hero h1,
    .process-hero h1,
    .service-page-hero h1 {
        font-size: 2rem;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    /* Fix for inner page hero sections overlapping with navbar on mobile */
    .about-hero,
    .service-page-hero,
    .process-hero,
    .cap-hero {
        margin-top: 0 !important;
        padding-top: 150px !important;
        /* Force override of internal styles */
        height: auto;
        min-height: 50vh;
        padding-bottom: 60px;
    }


    .hero-content p,
    .cap-hero p,
    .process-hero p {
        font-size: 1rem;
        padding: 0 10px;
        max-width: 100%;
    }

    .section-padding {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 2rem;
        padding: 0 10px;
    }

    .portfolio-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-item.large {
        grid-row: auto;
        height: 300px;
    }

    .card-image {
        height: 180px;
    }



    .testimonial-slider {
        grid-template-columns: 1fr;
    }

    .studio-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }



    .modal-list {
        grid-template-columns: 1fr;
    }

    .modal-header {
        height: 150px;
    }

    .modal-title-overlay h2 {
        font-size: 1.8rem;
    }

    /* Service Page Mobile Tweaks */
    .service-flex {
        gap: 40px;
    }

    .service-visual {
        min-height: 250px;
    }

    /* Process Page Mobile Tweaks */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-text h2 {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }

    .team-grid {
        grid-template-columns: 1fr;
        /* Force single column on mobile */
    }

    /* Fix Contact Button in Mobile Menu */
    /* Fix Contact Button in Mobile Menu */
    .nav-links .btn-primary {
        margin-top: 30px;
        /* Clear separation */
        font-size: 1rem;
        padding: 12px 35px;
        display: inline-block;
        width: auto;
        border-radius: 50px;
        /* Full rounded for button */
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }
}

/* Extra Small Devices (Phones, < 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero-content h1,
    .about-hero h1,
    .cap-hero h1,
    .process-hero h1,
    .service-page-hero h1 {
        font-size: 2rem;
        /* Even smaller for small phones */
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .softkamck-badge {
        font-size: 0.8rem;
        /* Smaller badge text */
        padding: 10px 20px;
        white-space: normal;
        /* Allow wrapping */
        line-height: 1.4;
    }



    .btn-primary,
    .btn-secondary {
        width: 100%;
        /* Full width buttons on mobile */
        text-align: center;
        margin-left: 0;
        margin-bottom: 10px;
        padding: 15px 0;
    }

    /* Ensure modal fits on small screens */
    .modal-content {
        margin: 10% auto;
        /* More margin top */
        width: 95%;
    }

    .pricing-tier {
        font-size: 0.9rem;
    }

    .pricing-amount {
        font-size: 1.5rem;
    }

    /* Partnership List Styles (About & Process Page) */
    .partnership-list {
        list-style: none;
        padding: 0;
        margin-top: 20px;
    }

    .partnership-list li {
        margin-bottom: 25px;
        position: relative;
        padding-left: 0px;
    }

    .partnership-list li strong {
        display: block;
        color: var(--accent);
        font-size: 1.1rem;
        margin-bottom: 5px;
        font-family: var(--font-heading);
    }
}


@keyframes slideInX {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Grid Layout for Philosophy Section (Replaces Slider) */
.slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 60px;
}

.slider-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two cards per row */
    gap: 30px;
    transition: none;
    /* Disable slider transition */
    transform: none !important;
    /* Prevent JS from moving it */
}

.slide {
    flex: none;
    min-width: 0;
    /* consistent grid sizing */
    width: 100%;
}

@media (max-width: 768px) {
    .slider-track {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .slide {
        flex: 0 0 calc(33.33% - 14px);
        /* 3 slides */
        min-width: calc(33.33% - 14px);
    }
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--accent);
    border: 1px solid var(--accent);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-arrow svg {
    width: 24px;
    height: 24px;
    fill: var(--accent);
    transition: fill 0.3s ease;
}

.slider-arrow:hover {
    background: var(--accent);
    color: #000;
}

.slider-arrow:hover svg {
    fill: #000;
}

.prev-arrow {
    left: 0;
}

.slider-arrow:hover svg {
    fill: #000;
}

.prev-arrow {
    left: 0;
}

.next-arrow {
    right: 0;
}

/* Hero Slideshow Arrow */
/* Hero Slideshow Arrow */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.prev-hero-arrow {
    left: 20px;
}

.next-hero-arrow {
    right: 20px;
}

.hero-arrow svg {
    width: 32px;
    height: 32px;
    fill: var(--accent);
    transition: fill 0.3s ease;
}

.hero-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.hero-arrow:hover svg {
    fill: #000;
}

@media (max-width: 768px) {
    .hero-arrow {
        width: 40px;
        height: 40px;
        top: auto;
        bottom: 25px;
        /* Aligned with dots */
        transform: none;
    }

    .prev-hero-arrow {
        left: 20px;
    }

    .next-hero-arrow {
        right: 20px;
    }

    .hero-arrow svg {
        width: 24px;
        height: 24px;
    }
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Dropdown Navigation */
.nav-item {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(15px);
    min-width: 250px;
    padding: 15px 0;
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1001;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-item a.no-click {
    pointer-events: none;
    cursor: default;
}

.dropdown-menu li {
    padding: 0;
    margin: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 25px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}

.dropdown-menu li a:hover {
    color: var(--accent);
    background: rgba(212, 175, 55, 0.05);
    padding-left: 30px;
}

/* Locations Mega Menu */
.mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #161616;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 14px;
    padding: 28px 28px 20px;
    min-width: 680px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1002;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mega-col {
    padding: 0 18px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { border-right: none; padding-right: 0; }
.mega-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    white-space: nowrap;
}
.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col ul li a {
    display: block;
    padding: 6px 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
    transition: color 0.2s, padding-left 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.mega-col ul li a:hover {
    color: var(--accent);
    padding-left: 6px;
}
.mega-footer {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    gap: 28px;
}
.mega-footer a {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
    text-decoration: none;
}
.mega-footer a:hover { opacity: 0.7; }

/* Mobile: Locations mega-menu becomes a stacked, collapsible list (like the Services dropdown) */
@media (max-width: 768px) {
    .mega-menu {
        display: block !important;        /* not the desktop 4-col grid */
        position: static !important;      /* kill absolute+translateX(-50%) so it can't overflow/slide */
        transform: none !important;
        left: auto !important;
        min-width: 0 !important;
        width: 100%;
        background: #0a0a0a;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    }
    .nav-item.active .mega-menu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 2000px !important;
        padding: 8px 0;
    }
    .mega-col {
        display: block;
        width: 100%;
        padding: 10px 0;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        text-align: center;
    }
    .mega-col:last-child { border-bottom: none; }
    .mega-col-title { text-align: center; white-space: normal; }
    .mega-col ul li a { text-align: center; white-space: normal !important; }
    .mega-footer { flex-direction: column; gap: 8px; padding: 10px 0 0; text-align: center; align-items: center; }
}

/* Premium Social Sidebar */
@keyframes sidebarSlideIn {
    from { opacity: 0; transform: translateY(-50%) translateX(90px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes sidebarGoldPulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.social-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: linear-gradient(180deg,
        rgba(6, 6, 6, 0.97) 0%,
        rgba(12, 10, 4, 0.98) 50%,
        rgba(6, 6, 6, 0.97) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-right: none;
    border-radius: 18px 0 0 18px;
    padding: 16px 9px;
    box-shadow: -8px 0 50px rgba(0, 0, 0, 0.7),
                -2px 0 0 rgba(212, 175, 55, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    animation: sidebarSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* Top gold shimmer bar */
.social-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #D4AF37 40%, #fdb931 60%, transparent 100%);
    border-radius: 2px 0 0 0;
    animation: sidebarGoldPulse 3s ease-in-out infinite;
}

/* Bottom gold shimmer bar */
.social-sidebar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    border-radius: 0 0 0 2px;
}

/* ─── Individual buttons ─── */
.social-sidebar-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.social-sidebar-btn svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.social-sidebar-btn.instagram svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Facebook ─── */
.social-sidebar-btn.facebook {
    color: #1877F2;
    background: rgba(24, 119, 242, 0.12);
    box-shadow: inset 0 0 0 1px rgba(24, 119, 242, 0.2);
}
.social-sidebar-btn.facebook:hover {
    color: #fff;
    background: #1877F2;
    box-shadow: 0 0 22px rgba(24, 119, 242, 0.6),
                0 4px 12px rgba(24, 119, 242, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: scale(1.2) translateX(-4px);
}

/* ─── Instagram ─── */
.social-sidebar-btn.instagram {
    color: #E1306C;
    background: rgba(225, 48, 108, 0.12);
    box-shadow: inset 0 0 0 1px rgba(225, 48, 108, 0.2);
}
.social-sidebar-btn.instagram:hover {
    color: #fff;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    box-shadow: 0 0 22px rgba(225, 48, 108, 0.6),
                0 4px 12px rgba(225, 48, 108, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: scale(1.2) translateX(-4px);
}

/* ─── LinkedIn ─── */
.social-sidebar-btn.linkedin {
    color: #0A66C2;
    background: rgba(10, 102, 194, 0.12);
    box-shadow: inset 0 0 0 1px rgba(10, 102, 194, 0.2);
}
.social-sidebar-btn.linkedin:hover {
    color: #fff;
    background: #0A66C2;
    box-shadow: 0 0 22px rgba(10, 102, 194, 0.6),
                0 4px 12px rgba(10, 102, 194, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: scale(1.2) translateX(-4px);
}

/* ─── WhatsApp ─── */
.social-sidebar-btn.whatsapp {
    color: #25D366;
    background: rgba(37, 211, 102, 0.12);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.2);
}
.social-sidebar-btn.whatsapp:hover {
    color: #fff;
    background: #25D366;
    box-shadow: 0 0 22px rgba(37, 211, 102, 0.6),
                0 4px 12px rgba(37, 211, 102, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: scale(1.2) translateX(-4px);
}

/* ─── Call ─── */
.social-sidebar-btn.call {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.12);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.social-sidebar-btn.call:hover {
    color: #000;
    background: linear-gradient(135deg, #D4AF37, #fdb931);
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.7),
                0 4px 12px rgba(212, 175, 55, 0.5),
                inset 0 1px 0 rgba(255,255,255,0.3);
    transform: scale(1.2) translateX(-4px);
}

/* ─── Tooltip ─── */
.sidebar-tooltip {
    position: absolute;
    right: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(12px);
    background: rgba(6, 6, 6, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #D4AF37;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(16px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(212, 175, 55, 0.08);
}

.sidebar-tooltip::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid rgba(212, 175, 55, 0.3);
}

.social-sidebar-btn:hover .sidebar-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ─── Divider ─── */
.sidebar-divider {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
    margin: 5px 0;
    flex-shrink: 0;
}

/* ─── Mobile — keep vertical sidebar, just smaller ─── */
@media (max-width: 768px) {
    .social-sidebar {
        padding: 12px 7px;
        gap: 2px;
        border-radius: 14px 0 0 14px;
    }

    .social-sidebar-btn {
        width: 38px;
        height: 38px;
        border-radius: 9px;
    }

    .social-sidebar-btn svg {
        width: 17px;
        height: 17px;
    }

    .social-sidebar-btn:hover {
        transform: scale(1.15) translateX(-3px);
    }

    .sidebar-tooltip {
        display: none;
    }

    .sidebar-divider {
        width: 22px;
        margin: 4px 0;
    }

    /* Mobile Navigation List Items */
    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-item {
        width: 100%;
    }

    /* Kill the desktop hover transform on touch, but never on a tap-opened (.active) dropdown */
    .nav-item:hover:not(.active) .dropdown-menu {
        transform: none;
        opacity: 0;
        visibility: hidden;
    }

    /* Mobile Dropdown - Revert to Toggle */
    .dropdown-menu {
        position: static !important; /* kill desktop absolute+translateX(-50%) so it can't slide left on open */
        transform: none !important;
        left: auto !important;
        opacity: 0;
        visibility: hidden;
        background: #0a0a0a; /* opaque: was rgba(255,255,255,0.03) → page content bled through the open submenu */
        box-shadow: none;
        border: none;
        border-top: 1px solid rgba(212, 175, 55, 0.15);
        border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; /* NOT 'all' — never animate transform/left */
        width: 100%;
        margin: 0;
    }

    .nav-item a.no-click {
        pointer-events: auto !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 10px 0;
    }

    .nav-item.active .dropdown-menu {
        max-height: 1000px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 5px 0;
        padding: 8px 0;
    }

    /* Chevron rotation */
    .dropdown-chevron {
        transform: rotate(0deg);
        transition: transform 0.3s ease;
    }

    .nav-item.active>a.no-click .dropdown-chevron {
        transform: rotate(180deg);
    }

    .dropdown-menu li {
        width: 100%;
        text-align: center;
    }

    .dropdown-menu li a {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.05rem;
        padding: 14px 20px;
        color: var(--text-secondary);
        font-family: var(--font-body);
        letter-spacing: 1px;
        transition: color 0.3s ease, background 0.3s ease;
        white-space: normal !important; /* beat global .nav-links li a nowrap!important so long labels wrap, not clip */
        overflow-wrap: anywhere;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a:active {
        color: var(--accent);
        background: rgba(212, 175, 55, 0.05);
    }
}



/* ==============================
   DROPDOWN CHEVRON INDICATOR
   ============================== */
.nav-item>a.no-click {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap !important;
}

.dropdown-chevron {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-item:hover>a.no-click .dropdown-chevron {
    transform: rotate(180deg);
}

/* ==============================
   RATING TRUST BAR (Service Pages)
   ============================== */
.rating-trust-bar {
    padding: 55px 0;
    background: #070707;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.rating-trust-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.rating-trust-item {
    flex: 1;
    min-width: 200px;
    padding: 20px 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
}

.rating-trust-item:last-child {
    border-right: none;
}

.rating-stars {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.rating-stars svg {
    width: 26px;
    height: 26px;
}

.trust-number {
    font-size: 2.6rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 400;
}

.trust-icon-wrap {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-icon-wrap svg {
    width: 36px;
    height: 36px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.5;
}

.trust-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.trust-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 6px;
    opacity: 1;
}

/* ==============================
   5 SERVICE CARDS (Premium)
   ============================== */
.service-cards-5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.sc-item {
    grid-column: span 2;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 38px 32px;
    border-radius: 14px;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.sc-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #FDB931);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    border-radius: 14px 14px 0 0;
}

.sc-item:hover::before {
    transform: scaleX(1);
}

.sc-item:hover {
    border-color: rgba(212, 175, 55, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.service-cards-5 .sc-item:nth-child(4) {
    grid-column: 2 / span 2;
}

.service-cards-5 .sc-item:nth-child(5) {
    grid-column: 4 / span 2;
}

.sc-icon {
    width: 56px;
    height: 56px;
    background: rgba(212, 175, 55, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background 0.3s ease;
}

.sc-item:hover .sc-icon {
    background: rgba(212, 175, 55, 0.18);
}

.sc-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.8;
}

.sc-item h3 {
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 14px;
}

.sc-item p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* ==============================
   WHY CHOOSE USHER MEDIA
   ============================== */
.why-choose-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    margin-top: 60px;
}

.why-choose-content h3 {
    font-size: 2rem;
    margin-bottom: 18px;
    line-height: 1.3;
}

.why-choose-content p {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 32px;
}

.why-list {
    list-style: none;
    padding: 0;
}

.why-list li {
    padding: 14px 18px;
    background: rgba(212, 175, 55, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.93rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.why-list li:hover {
    background: rgba(212, 175, 55, 0.07);
    border-color: rgba(212, 175, 55, 0.2);
    color: var(--text-primary);
    transform: translateX(6px);
}

.why-list .check-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: rgba(212, 175, 55, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.why-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.wc-box {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 30px 24px;
    border-radius: 14px;
    text-align: center;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.wc-box:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-4px);
}

.wc-box .wc-num {
    font-size: 2.6rem;
    font-family: var(--font-heading);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
}

.wc-box .wc-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ==============================
   PREMIUM LEAD FORM
   ============================== */
.premium-form-section {
    padding: 100px 0;
    background: #050505;
    position: relative;
    overflow: hidden;
}

.premium-form-section::before {
    content: '';
    position: absolute;
    top: -250px;
    right: -250px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
}

.premium-form-section::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
}

.premium-form-wrap {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 70px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.premium-form-wrap.stacked {
    grid-template-columns: 1fr;
    gap: 40px;
}

.premium-form-wrap.stacked .form-info-side,
.premium-form-wrap.stacked .premium-form-box {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.service-contact-btn-wrap {
    text-align: center;
    padding: 20px 0 60px;
    position: relative;
    z-index: 2;
}

.form-info-side h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.form-info-side>p {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 40px;
}

.form-trust-points {
    list-style: none;
    padding: 0;
}

.form-trust-points li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--text-secondary);
    font-size: 0.93rem;
}

.form-trust-points .pt-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(212, 175, 55, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.form-trust-points .pt-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 2;
}

.premium-form-box {
    background: #0c0c0c;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 22px;
    padding: 50px 48px;
    position: relative;
}

.premium-form-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 0 0 2px 2px;
}

.premium-form-box .pf-title {
    font-size: 1.9rem;
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: 6px;
}

.premium-form-box .pf-sub {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 36px;
    letter-spacing: 0.5px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.pf-group {
    margin-bottom: 14px;
}

.pf-group label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.pf-group input,
.pf-group textarea,
.pf-group select {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.93rem;
    transition: all 0.3s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.pf-group input:focus,
.pf-group textarea:focus,
.pf-group select:focus {
    border-color: var(--accent);
    background: rgba(212, 175, 55, 0.03);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.07);
}

.pf-group select option {
    background: #111;
    color: #fff;
}

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

.btn-pf-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #D4AF37, #FDB931);
    border: none;
    color: #000;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 6px;
}

.btn-pf-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.35);
}

.pf-privacy {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 14px;
    opacity: 1;
}

/* Phone field with country code */
.phone-input-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.phone-input-wrap .country-code-select {
    flex: 0 0 auto;
    width: 95px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
}

.phone-input-wrap .country-code-select:focus {
    border-color: var(--accent);
}

.phone-input-wrap .country-code-select option {
    background: #1a1a1a;
    color: #fff;
}

.phone-input-wrap input[type="tel"] {
    flex: 1;
}

/* ==============================
   SERVICE PAGE RESPONSIVE
   ============================== */
@media (max-width: 900px) {
    .service-cards-5 {
        grid-template-columns: 1fr 1fr;
    }

    .sc-item,
    .service-cards-5 .sc-item:nth-child(4),
    .service-cards-5 .sc-item:nth-child(5) {
        grid-column: span 1;
    }

    .why-choose-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .premium-form-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .rating-trust-item {
        min-width: 160px;
        padding: 20px 25px;
    }
}

@media (max-width: 600px) {
    .service-cards-5 {
        grid-template-columns: 1fr;
    }

    .premium-form-box {
        padding: 35px 24px;
    }

    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .rating-trust-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        padding: 20px;
        min-width: 100%;
    }

    .rating-trust-item:last-child {
        border-bottom: none;
    }

    .why-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Premium FAQ Section Styles */
.faq-section {
    padding: 100px 5%;
    background-color: var(--bg-color);
    max-width: 1000px;
    margin: 0 auto;
}

.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-item details {
    width: 100%;
}

.faq-item summary {
    padding: 24px 30px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-right: 20px;
}

.faq-icon {
    color: var(--accent);
    font-size: 1rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[open] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 30px 30px 30px;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    animation: fadeInSlide 0.5s ease;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Mobile Adjustments for FAQ */
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 20px;
    }

    .faq-item h3 {
        font-size: 1.1rem;
    }

    .faq-item summary {
        padding: 20px;
    }

    .faq-answer {
        padding: 0 20px 20px 20px;
    }
}

/* --- Premium Pricing Catalog Styles --- */
.pricing-hero {
    padding: 200px 0 100px;
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 0%, rgba(10, 10, 10, 1) 100%), url('assets/hero-bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    position: relative;
}

.pricing-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, #0a0a0a, transparent);
}

.hero-gradient-text {
    background: linear-gradient(135deg, #fff 0%, #D4AF37 50%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
    font-weight: 700;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.catalog-section {
    padding: 100px 0;
}

/* --- New Standardized Pricing Headers --- */
.section-header-premium {
    font-size: 3.5rem;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.price-card-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 700;
}

.case-study-title {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: 700;
}

.pricing-card-premium {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 24px;
    padding: 50px 60px;
    margin-bottom: 150px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.pricing-card-premium:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 40px 80px rgba(212, 175, 55, 0.05);
}

.pricing-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.card-left h2 {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 30px;
    font-family: var(--font-heading);
    letter-spacing: -2px;
}

.price-tag {
    background: linear-gradient(135deg, #D4AF37 0%, #FDB931 100%);
    padding: 30px;
    color: #000;
    border-radius: 12px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
}

.price-tag::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: reflect 3s infinite;
}

@keyframes reflect {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.price-tag .amount {
    font-size: 2.8rem;
    font-weight: 700;
    display: block;
}

.price-tag .sub {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

.incl-list h3 {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 30px;
    position: relative;
    padding-left: 20px;
}

.incl-list h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--accent);
}

.incl-list ul li {
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
}

.incl-list ul li:hover {
    color: #fff;
    transform: translateX(5px);
}

/* Redundant marker removed to fix double tick issue */

/* Case Study Section in Card */
.case-study {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
}

.case-study h2 {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    margin-bottom: 10px;
}

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.outcome-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
}

.outcome-card:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

.outcome-card .val {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 5px;
}

/* About / Report Zero Section Redesign */
.about-usher-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 150px;
    /* Increased from 120px */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.about-usher-center h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
}

.about-lead {
    color: var(--text-secondary);
    font-size: 1.25rem;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6;
}

.about-usher-grid h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
}

.about-usher-grid p {
    color: #888;
    font-size: 1.15rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.stat-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    transition: var(--transition);
}

.stat-box:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

.stat-box .num {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
}

/* Report Zero Panel */
.report-zero-container {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 30px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    position: relative;
    box-shadow: 0 0 100px rgba(212, 175, 55, 0.1);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 150px;
}

.report-zero-header {
    text-align: center;
    margin-bottom: 40px;
}

.report-zero-header h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.report-zero-header p {
    color: #bbb;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.audit-grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.highlight-accent {
    color: var(--accent);
    font-weight: 600;
}

.audit-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px 30px;
    border-radius: 15px;
    margin-bottom: 15px;
    border-left: 4px solid var(--accent);
    transition: var(--transition);
}

.audit-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(10px);
}

.audit-item .audit-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--accent);
    margin-bottom: 5px;
    display: block;
}

/* --- Animations & Refinements --- */
@keyframes gleam {
    0% {
        transform: skewX(-25deg) translateX(-300%);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: skewX(-25deg) translateX(600%);
        opacity: 0;
    }
}

.gleam-effect {
    position: relative;
    overflow: hidden;
}

.gleam-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
    transform: skewX(-25deg) translateX(-300%);
    animation: none;
}

.gleam-effect:hover::after {
    animation: gleam 0.8s ease-out;
}

/* --- Aggressive Mobile Responsiveness Fixes --- */
@media (max-width: 1024px) {
    .section-header-premium {
        font-size: 2.8rem;
    }

    .price-card-title {
        font-size: 2.8rem;
    }

    .case-study-title {
        font-size: 2.2rem;
    }

    .pricing-card-premium {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 20px !important;
        margin-bottom: 80px !important;
    }

    .about-usher-center,
    .report-zero-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 50px !important;
        margin-bottom: 80px !important;
    }

    .stats-grid,
    .audit-grid-row {
        flex-direction: column;
        grid-template-columns: 1fr !important;
    }

    .card-left h2 {
        font-size: 2.2rem !important;
    }

    .about-usher-center h2 {
        font-size: 2.5rem !important;
    }
}

/* --- High Fidelity Catalog Enhancements --- */

/* Centered Layout Support */
.text-center-wrapper {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.why-choose-section {
    text-align: center;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px;
    text-align: left;
    /* Keep content readable */
}

.pricing-summary-section {
    text-align: center;
    margin-top: 80px;
}

.advantage-item {
    display: flex;
    gap: 25px;
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.advantage-item:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateX(10px);
}

.advantage-num {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: rgba(212, 175, 55, 0.3);
    font-weight: 700;
    line-height: 1;
}

.advantage-content h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--accent);
}

.advantage-content p {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.6;
}

/* Case Study Modernization */
.case-study-header {
    margin-bottom: 40px;
}

.before-after-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.ba-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ba-box.after {
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.02);
}

.ba-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.ba-box.before .ba-label {
    color: #888;
}

.ba-box.after .ba-label {
    color: var(--accent);
}

.ba-list {
    list-style: none;
    padding: 0;
}

.ba-list li {
    font-size: 0.95rem;
    margin-bottom: 12px;
    color: #bbb;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ba-list li span:last-child {
    font-weight: 700;
    color: #fff;
}

/* Specific Feature List (What's Included) */
.incl-list ul {
    list-style: none;
    padding: 0;
}

.incl-list li {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 500;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.incl-list li i {
    color: var(--accent);
    font-size: 1.1rem;
    margin-top: 2px;
    /* Alignment with text */
}

.outcome-pill-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.outcome-pill {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.outcome-pill .val {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 5px;
}

.outcome-pill .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

.what-we-did {
    margin-top: 40px;
}

.what-we-did h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
}

.what-we-did ul {
    list-style: none;
}

.what-we-did li {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.what-we-did li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.testimonial-block {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial-block p {
    font-style: italic;
    color: #888;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.testimonial-author {
    display: block;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Google Review Card */
.google-review-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-top: 40px;
    color: #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.gr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.gr-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gr-avatar {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.gr-author-name {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    line-height: 1.2;
}

.gr-date {
    font-size: 0.8rem;
    color: #777;
}

.gr-logo {
    width: 24px;
    height: 24px;
}

.gr-stars {
    color: #fbbc04;
    font-size: 1rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.gr-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

/* Pricing Table */
.pricing-table-container {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    margin-top: 50px;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-table th {
    text-align: left;
    padding: 20px;
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-table td {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.service-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.service-price {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.2rem;
}

.min-billing-note {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    margin-top: 40px;
}

.min-billing-note p {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.1rem;
}

/* QR Code & Contact Now */
.qr-contact-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.qr-placeholder {
    width: 120px;
    height: 120px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
}

.qr-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.btn-contact-now {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
}

.pricing-table {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    border-collapse: collapse;
}

.pricing-table th {
    padding: 20px 0;
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pricing-table th:first-child {
    text-align: left;
}

.pricing-table th:last-child {
    text-align: right;
}

.pricing-table td {
    padding: 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.service-name {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left !important;
}

.service-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--accent);
    text-align: right !important;
}

.min-billing-note {
    margin: 60px auto 0;
    max-width: 700px;
    background: rgba(212, 175, 55, 0.05);
    padding: 30px;
    border: 1px dashed var(--accent);
}

@media (max-width: 768px) {
    .section-header-premium {
        font-size: 2.2rem;
    }

    .price-card-title {
        font-size: 2rem;
    }

    .case-study-title {
        font-size: 1.8rem;
    }

    .why-choose-grid,
    .before-after-grid,
    .outcome-pill-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .advantage-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .advantage-num {
        font-size: 2rem;
    }

    .pricing-table-container {
        padding: 20px;
    }

    .pricing-table thead {
        display: none;
    }

    .pricing-table td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .service-price {
        text-align: center !important;
        margin-top: 5px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .section-header-premium {
        font-size: 1.8rem;
    }

    .price-card-title {
        font-size: 1.7rem;
    }

    .case-study-title {
        font-size: 1.5rem;
    }

    .hero-gradient-text {
        font-size: 1.8rem !important;
        /* Forces fit on iPhone SE */
    }

    .card-left h2 {
        font-size: 1.6rem !important;
        margin-bottom: 20px;
    }

    .about-usher-center h2 {
        font-size: 2rem !important;
    }

    .stat-box .num {
        font-size: 2rem !important;
    }

    .pricing-card-premium {
        padding: 30px 15px !important;
        border-radius: 16px;
    }

    .price-tag {
        padding: 20px;
    }

    .price-tag .amount {
        font-size: 1.4rem !important;
    }

    .incl-list h3 {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    /* Force all grid columns to stack */
    .outcomes-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- Premium Animations & Reveal System --- */
:root {
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(12px);
}

.reveal {
    opacity: 0;
    transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.reveal.active {
    opacity: 1;
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-up.active {
    transform: translateY(0);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-left.active {
    transform: translateX(0);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-right.active {
    transform: translateX(0);
}

/* Add delays for stagger */
.reveal-stagger.active>*:nth-child(1) {
    transition-delay: 0.1s;
}

.reveal-stagger.active>*:nth-child(2) {
    transition-delay: 0.2s;
}

.reveal-stagger.active>*:nth-child(3) {
    transition-delay: 0.3s;
}

.reveal-stagger.active>*:nth-child(4) {
    transition-delay: 0.4s;
}

.reveal-stagger.active>*:nth-child(5) {
    transition-delay: 0.5s;
}

.reveal-stagger.active>*:nth-child(6) {
    transition-delay: 0.6s;
}

/* Premium Cards (Glassmorphism) */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 40px;
    transition: var(--transition);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Decorative Background Elements */
.bg-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(60px);
}

/* Hero Enhancements */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: scrollMove 2s infinite;
}

@keyframes scrollMove {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Stats Section Styles */
.stats-container {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.stat-item h3 {
    font-size: 3.5rem;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 700;
}

.stat-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* --- Process & Case Study Premium Styles --- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.process-card {
    position: relative;
    z-index: 1;
}

.process-card .step-num {
    font-size: 5rem;
    font-family: var(--font-heading);
    color: rgba(212, 175, 55, 0.05);
    position: absolute;
    top: -20px;
    right: 20px;
    z-index: -1;
    font-weight: 700;
}

.case-study-premium {
    background: linear-gradient(145deg, #111 0%, #050505 100%);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 60px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.case-study-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 40px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.case-study-body {
    padding: 60px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.case-study-visual-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.visual-list-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: var(--transition);
}

.visual-list-item:hover {
    border-color: var(--accent);
    background: rgba(212, 175, 55, 0.05);
}

.visual-list-item i,
.visual-list-item .icon {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 5px;
}

.visual-list-item h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #fff;
}

.visual-list-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 992px) {
    .case-study-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* Fancy Typography Upgrades */
.fancy-narrative {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.9;
    color: #e0e0e0;
}

.drop-cap::first-letter {
    float: left;
    font-size: 5rem;
    line-height: 0.8;
    font-weight: 700;
    margin-right: 15px;
    margin-top: 8px;
    color: var(--accent);
    font-family: var(--font-heading);
    text-shadow: 0 0 20px var(--accent-glow);
}

.gold-glow-text {
    color: var(--accent);
    font-weight: 500;
    text-shadow: 0 0 10px var(--accent-glow);
}

.editorial-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 175, 55, 0.1);
    padding: 60px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.editorial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .fancy-narrative {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .drop-cap::first-letter {
        font-size: 3.5rem;
        margin-right: 10px;
    }

    .editorial-card {
        padding: 30px;
    }
}

/* Who We Work With Grids */
.who-work-top-row {
    grid-template-columns: repeat(3, 1fr);
}

.who-work-bottom-row {
    grid-template-columns: repeat(2, 1fr);
    max-width: 67%;
    margin: 24px auto 0;
}

/* Philosophy Grid Upgrades */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.philosophy-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 50px 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.philosophy-card:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: var(--accent);
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-glow);
}

.philosophy-card:hover .step-num {
    letter-spacing: 6px;
    text-shadow: 0 0-10px var(--accent-glow);
}

.philosophy-card:hover h3 {
    color: var(--accent);
}

.philosophy-card .step-num {
    font-size: 0.85rem;
    color: var(--accent);
    letter-spacing: 4px;
    margin-bottom: 25px;
    font-weight: 600;
}

.philosophy-card h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 600;
}

.philosophy-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

@media (max-width: 1200px) {
    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .who-work-top-row,
    .who-work-bottom-row {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .philosophy-card {
        padding: 40px 30px;
    }
}

/* Industries Spotlight Styling */
.industry-grid {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 60px;
}

.industry-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    /* Large, premium gap */
    align-items: center;
    position: relative;
    margin-bottom: 40px;
}

.industry-image {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 8px;
    /* Slightly smoother corners */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.industry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.industry-info {
    position: relative;
    z-index: 2;
    padding: 50px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.industry-spotlight:hover .industry-image img {
    transform: scale(1.1);
}

.industry-spotlight:hover .industry-info {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-glow);
}

.industry-category {
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 5px;
    margin-bottom: 25px;
    display: block;
    font-weight: 600;
}

.industry-info h3 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    font-family: var(--font-heading);
}

/* Mobile Adjustments for Spotlight */
@media (max-width: 992px) {

    .industry-spotlight,
    .industry-spotlight:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .industry-image {
        height: 350px;
    }

    .industry-info {
        margin-right: 0;
        margin-top: -40px;
        padding: 40px 30px;
        width: 95%;
        margin-left: auto;
    }

    .industry-info h3 {
        font-size: 1.8rem;
    }
}

/* Premium Flagship CTA Upgrade */
.cta-premium-card {
    position: relative;
    max-width: 1000px;
    margin: 80px auto;
    padding: 80px 60px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(30px);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.cta-premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.cta-premium-card h3 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 30px;
    line-height: 1.2;
    letter-spacing: -1px;
}

.cta-premium-card p {
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.8;
}

/* Shimmering Luxury Button */
.btn-shimmer {
    position: relative;
    display: inline-block;
    padding: 20px 50px;
    background: var(--accent);
    color: var(--secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transform: rotate(25deg);
    animation: luxury-shimmer 4s infinite;
}

@keyframes luxury-shimmer {
    0% {
        left: -100%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.btn-shimmer:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--accent-glow);
    background: #fff;
    color: #000;
    /* Fixed: Text color is now black on white background */
}

.cta-premium-card:hover {
    transform: translateY(-10px) scale(1.01);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.8), 0 0 30px var(--accent-glow);
}

.cta-premium-card:hover .aura-pulse {
    animation: aura-breathing 4s infinite alternate;
    /* Speed up on hover */
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
}

/* Breathing Aura Background */
.aura-pulse {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    animation: aura-breathing 8s infinite alternate;
}

@keyframes aura-breathing {
    0% {
        opacity: 0.3;
        transform: scale(0.8) translate(-50%, -50%);
    }

    100% {
        opacity: 0.7;
        transform: scale(1.2) translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    .cta-premium-card {
        padding: 50px 30px;
        margin: 40px auto;
    }

    .cta-premium-card h3 {
        font-size: 2rem;
    }
}

/* Executive Services Grid Styles */
.premium-service {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(40px);
    padding: 60px 45px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 2px solid transparent;
    transition: all 0.6s cubic-bezier(0.2, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text */
}

.premium-service:hover {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: var(--accent);
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 20px var(--accent-glow);
}

.premium-service .service-meta {
    font-size: 0.75rem;
    color: var(--accent);
    letter-spacing: 5px;
    font-weight: 700;
    margin-bottom: 25px;
    opacity: 0.8;
}

.premium-service h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-family: var(--font-heading);
    transition: color 0.4s ease;
    letter-spacing: 1px;
}

.service-divider {
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin: 0 auto 30px;
    border-radius: 2px;
}

.premium-service:hover h3 {
    color: var(--accent);
    text-shadow: 0 0 15px var(--accent-glow);
}

.premium-service p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 320px;
    /* Constrain text width for better readability in centered layout */
}

.service-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

@media (max-width: 1200px) {
    .service-grid-premium {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-grid-premium {
        grid-template-columns: 1fr;
    }

    .premium-service {
        padding: 40px 30px;
    }
}

/* Case Study Spotlight Styles */
.case-study-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 50px;
}

.case-study-info {
    padding: 60px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.case-study-info:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.case-study-meta {
    font-size: 0.75rem;
    color: var(--accent);
    letter-spacing: 5px;
    display: block;
    margin-bottom: 30px;
    font-weight: 700;
}

.case-study-info h3 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    font-family: var(--font-heading);
}

.result-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.result-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.result-icon {
    color: var(--accent);
    font-weight: bold;
    font-size: 1.2rem;
}

.case-study-visual {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.case-study-visual img {
    width: 100%;
    height: auto;
    transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.case-study-spotlight:hover .case-study-visual img {
    transform: scale(1.08);
}

@media (max-width: 992px) {
    .case-study-spotlight {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .case-study-info {
        padding: 40px 30px;
    }
}

/* Executive FAQ Spotlight Styles */
.faq-premium-spotlight {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
    margin-top: 60px;
}

.faq-header-content {
    position: sticky;
    top: 120px;
}

.faq-item-premium {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(80px);
    /* Glassmorphism 2.0 */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.faq-item-premium summary {
    padding: 30px 40px;
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.faq-item-premium summary::-webkit-details-marker {
    display: none;
}

.faq-item-premium summary h3 {
    font-size: 1.4rem;
    font-family: var(--font-heading);
    margin: 0;
    transition: all 0.4s ease;
}

.faq-item-premium .faq-icon {
    font-size: 1.2rem;
    color: var(--accent);
    transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.faq-item-premium[open] {
    background: rgba(255, 249, 230, 0.03);
    /* Subtle gold tint when open */
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.faq-item-premium[open] summary h3 {
    color: var(--accent);
}

.faq-item-premium[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-item-premium .faq-answer {
    padding: 0 40px 30px;
    animation: slideDown 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.faq-item-premium .faq-answer p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0;
}

/* Gold Vertical Indicator on Hover */
.faq-item-premium:hover {
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@media (max-width: 1100px) {
    .faq-premium-spotlight {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .faq-header-content {
        position: relative;
        top: 0;
        text-align: center;
    }
}

/* Ultimate Flagship CTA Styles */
.ultimate-cta-container {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #050505;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ultimate-cta-card {
    position: relative;
    z-index: 2;
    padding: 80px 60px;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(60px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    text-align: center;
    transition: all 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.ultimate-cta-card:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 80px 160px rgba(0, 0, 0, 0.8);
    transform: translateY(-5px);
}

.ultimate-cta-card h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-family: var(--font-heading);
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--text-primary);
}

.ultimate-cta-card p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 750px;
    margin: 0 auto 40px;
}

/* Floating Gold Dust Particles */
.gold-dust-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.dust-particle {
    position: absolute;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(2px);
    animation: drift 20s infinite linear;
}

@keyframes drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.2;
    }

    80% {
        opacity: 0.2;
    }

    100% {
        transform: translate(100px, -100px) rotate(360deg);
        opacity: 0;
    }
}

.ultimate-cta-container .aura-pulse {
    width: 800px;
    height: 800px;
    top: 50%;
    left: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
}

@media (max-width: 768px) {
    .ultimate-cta-card {
        padding: 60px 30px;
    }

    .ultimate-cta-card h2 {
        font-size: 2.2rem;
    }

    .ultimate-cta-card p {
        font-size: 1.1rem;
    }
}

/* =====================================================================
   Pricing card polish — scoped to .pricing-card-premium
   (digital-marketing-cost-in-chennai). Layered on top to enrich the
   existing premium cards without altering their structure.
   ===================================================================== */
.pricing-card-premium {
    background:
        radial-gradient(135% 135% at 0% 0%, rgba(212, 175, 55, 0.07) 0%, transparent 45%),
        linear-gradient(160deg, rgba(30, 30, 30, 0.78) 0%, rgba(13, 13, 13, 0.88) 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
}

.pricing-card-premium:hover {
    transform: translateY(-12px) scale(1.004);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 45px 90px rgba(0, 0, 0, 0.55), 0 0 70px rgba(212, 175, 55, 0.12);
}

/* Gold top accent strengthens on hover */
.pricing-card-premium::before {
    height: 2px;
    opacity: 0.7;
    transition: opacity 0.5s ease, height 0.5s ease;
}

.pricing-card-premium:hover::before {
    opacity: 1;
    height: 3px;
}

/* Section label becomes a refined gold pill inside cards */
.pricing-card-premium .section-label {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
}

/* Price tag gains depth and lifts with the card */
.pricing-card-premium .price-tag {
    box-shadow: 0 18px 40px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s ease;
}

.pricing-card-premium:hover .price-tag {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(212, 175, 55, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Inclusion ticks glow gold */
.pricing-card-premium .incl-list ul li i {
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.45));
}

/* Before/After boxes + outcome pills react on hover */
.pricing-card-premium .ba-box {
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.pricing-card-premium .ba-box:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.3);
}

.pricing-card-premium .outcome-pill {
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.pricing-card-premium .outcome-pill:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.06);
}

/* ===== SPECIAL OFFERS / PRICING CARDS (site-wide) ===== */
.offers-section {
    padding: 90px 0;
    background: radial-gradient(ellipse at top, rgba(212, 175, 55, 0.06), transparent 60%), var(--bg-color);
}

.offers-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.offers-header h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 16px;
}

.offers-header h2 .highlight,
.offers-header h2 .hero-gradient-text {
    color: var(--accent);
}

.offers-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.offer-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 18px;
    padding: 34px 28px 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.offer-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px var(--accent-glow, rgba(212, 175, 55, 0.3));
}

.offer-tag {
    position: absolute;
    top: 18px;
    right: -42px;
    background: var(--accent);
    color: #0a0a0a;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 1px;
    padding: 6px 50px;
    transform: rotate(45deg);
    text-transform: uppercase;
}

.offer-badge {
    display: inline-block;
    align-self: flex-start;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 18px;
}

.offer-card h3 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 6px;
    color: #fff;
}

.offer-card .offer-sub {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 22px;
    min-height: 38px;
}

.offer-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.offer-new-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.offer-term {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
}

.offer-gst {
    background: var(--accent);
    color: #0a0a0a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
}

.offer-old-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
}

.offer-old-price {
    color: #ffffff;
    font-size: 2.1rem;
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-color: #8b0000;
    text-decoration-thickness: 5px;
}

.offer-save {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid #2ecc71;
    color: #2ecc71;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.offer-extra {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.offer-extra span {
    color: var(--accent);
}

.offer-features {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.offer-features li::before {
    content: "\2713";
    color: var(--accent);
    font-weight: 800;
    flex-shrink: 0;
}

.offer-cta {
    margin-top: auto;
    display: block;
    text-align: center;
    background: var(--accent);
    color: #0a0a0a;
    font-weight: 700;
    padding: 13px;
    border-radius: 10px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.offer-cta:hover {
    background: #e6c352;
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .offers-grid {
        grid-template-columns: 1fr;
    }

    .offers-header h2 {
        font-size: 2rem;
    }
}

/* =====================================================================
   Premium price-box + offer badges (catalog cards)
   ===================================================================== */
.pricing-card-premium .price-tag {
    background:
        linear-gradient(135deg, #f5d676 0%, #D4AF37 38%, #c69a2e 70%, #e8c25a 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    box-shadow:
        0 22px 45px rgba(212, 175, 55, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -10px 30px rgba(120, 85, 10, 0.18);
}

.pricing-card-premium .price-tag .amount {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    letter-spacing: -1px;
    line-height: 1.12;
}

/* Keep price + term from breaking mid-word; tight wrap if it must */
.pricing-card-premium .price-tag .amount > span {
    white-space: nowrap;
}

/* Premium positive benefit line on the gold box */
.price-tag .po-positive {
    display: block;
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #1a1407;
}

.price-tag .po-positive b {
    color: #0f5132;
    font-weight: 800;
}

/* "Per platform" emphasis pill */
.price-tag .po-perplat {
    display: inline-block;
    margin-top: 8px;
    background: linear-gradient(135deg, #1c1407, #000);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Platform list intro label */
.price-tag .po-list-label {
    display: block;
    margin-top: 16px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(40, 30, 4, 0.6);
}

/* Two-plan tier menu (Meta Ads etc.) */
.price-tag .po-tiers {
    margin-top: 14px;
    border-top: 1px solid rgba(40, 30, 4, 0.22);
}

.price-tag .po-tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(40, 30, 4, 0.14);
}

.price-tag .po-tier:last-child {
    border-bottom: none;
}

.price-tag .po-tier-name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1a1407;
}

.price-tag .po-tier-price {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1a1407;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.price-tag .po-tier-price small {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.7;
}

.price-tag .po-note {
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(40, 30, 4, 0.7);
}

/* Offer header: label + SPECIAL OFFER flag */
.price-tag .po-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.price-tag .po-label {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    color: #2a2106;
}

.price-tag .po-flag {
    position: relative;
    background: linear-gradient(135deg, #1c1407, #000);
    color: var(--accent);
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(212, 175, 55, 0.25);
    white-space: nowrap;
}

/* Regular (struck) price row */
.price-tag .po-regular {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.price-tag .po-regular-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(40, 30, 4, 0.6);
}

.price-tag .po-strike {
    font-size: 3.4rem;
    font-weight: 800;
    color: #8b1a1a;
    white-space: nowrap;
    text-decoration: line-through;
    text-decoration-color: #2a0606;
    text-decoration-thickness: 3px;
}

.price-tag .po-strike > span {
    white-space: nowrap;
}

.price-tag .po-save {
    background: linear-gradient(135deg, #0f5132, #1f8a48);
    color: #fff;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(15, 81, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Maintenance + one-time setup fee block */
.price-tag .po-maint {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(40, 30, 4, 0.7);
}

.price-tag .po-setup {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(40, 30, 4, 0.22);
}

.price-tag .po-setup-amt {
    font-size: 2.3rem;
    font-weight: 800;
    color: #1a1407;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.price-tag .po-setup-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(40, 30, 4, 0.65);
}

/* =====================================================================
   Premium pricing summary table
   ===================================================================== */
.pricing-table {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(212, 175, 55, 0.06), transparent 50%),
        linear-gradient(160deg, rgba(30, 30, 30, 0.55), rgba(13, 13, 13, 0.7));
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
}

.pricing-table th {
    padding: 22px 30px;
}

.pricing-table td {
    padding: 22px 30px;
}

.pricing-table tbody tr {
    transition: background 0.3s ease;
}

.pricing-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.05);
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

/* Highlighted bundle / flagship row */
.pricing-table tr.bundle-row {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.05)) !important;
    box-shadow: inset 4px 0 0 var(--accent);
}

.pricing-table tr.bundle-row:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.07)) !important;
}

.pricing-table tr.bundle-row .service-price {
    font-size: 1.4rem;
}

/* Premium header + zebra + highlighted notes */
.pricing-table thead th {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.02));
    font-size: 0.95rem;
}

.pricing-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.018);
}

.pricing-table .svc-note {
    color: var(--accent) !important;
    font-weight: 600 !important;
    opacity: 0.92;
}

.pricing-table .svc-note b {
    color: #fff;
    font-weight: 700;
}

/* SAVE % badge in the table */
.pricing-table .svc-save {
    display: inline-block;
    margin-left: 10px;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid #2ecc71;
    color: #2ecc71;
    -webkit-text-fill-color: #2ecc71;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Small struck-out old price in the table */
.pricing-table .svc-old {
    display: inline-block;
    margin-right: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #c98b8b;
    text-decoration: line-through;
    text-decoration-color: #8b0000;
    text-decoration-thickness: 2px;
    -webkit-text-fill-color: #c98b8b;
    opacity: 0.85;
    vertical-align: middle;
}

/* ---- Extra premium polish ---- */
.pricing-table-container {
    position: relative;
}

.pricing-table {
    border-spacing: 0;
}

/* Gold-tinted row separators */
.pricing-table td {
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    vertical-align: middle;
}

/* Refined header */
.pricing-table thead th {
    border-bottom: 2px solid var(--accent);
    text-shadow: 0 1px 8px rgba(212, 175, 55, 0.25);
}

/* Metallic gold price */
.pricing-table .service-price > span[data-inr] {
    background: linear-gradient(135deg, #f5d676 0%, #D4AF37 50%, #e8c25a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glowing service number */
.pricing-table .service-name {
    color: #fff;
}

/* Flagship row: stronger gold presence */
.pricing-table tr.bundle-row .service-name {
    color: #fff;
}

.pricing-table tr.bundle-row .service-price > span[data-inr] {
    -webkit-text-fill-color: initial;
    background: none;
    color: var(--accent);
    text-shadow: 0 1px 12px rgba(212, 175, 55, 0.5);
}

/* Subtle hover lift on the whole table */
.pricing-table:hover {
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.5), 0 0 50px rgba(212, 175, 55, 0.08);
}

/* =====================================================================
   MOBILE RESPONSIVENESS — offer/catalog/table pricing elements
   (these used large fixed sizes that overflowed narrow screens)
   ===================================================================== */
@media (max-width: 768px) {

    /* Catalog gold price box: shrink the big amount + secondary text */
    .pricing-card-premium .price-tag {
        padding: 22px !important;
    }

    .pricing-card-premium .price-tag .amount {
        font-size: 2rem !important;
        line-height: 1.18;
        word-break: break-word;
    }

    .pricing-card-premium .price-tag .amount > span[style*="1.2rem"],
    .pricing-card-premium .price-tag .amount > span[style*="1.4rem"] {
        font-size: 0.85rem !important;
    }

    /* Struck regular price: shrink and ALLOW WRAP (was nowrap @3.4rem) */
    .price-tag .po-strike,
    .price-tag .po-strike > span {
        white-space: normal;
    }

    .price-tag .po-strike {
        font-size: 1.7rem;
    }

    .price-tag .po-setup-amt {
        font-size: 1.6rem;
    }

    .price-tag .po-flag {
        font-size: 0.55rem;
        letter-spacing: 1px;
        padding: 5px 9px;
    }

    .price-tag .po-label {
        font-size: 0.82rem;
        letter-spacing: 1px;
    }

    /* Two-tier menu (Meta) */
    .price-tag .po-tier {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .price-tag .po-tier-name {
        font-size: 0.85rem;
        flex: 1 1 60%;
    }

    .price-tag .po-tier-price {
        font-size: 1.15rem;
        white-space: nowrap;
    }

    /* Top offer cards */
    .offer-new-price {
        font-size: 2rem;
    }

    .offer-old-price {
        font-size: 1.6rem;
    }

    /* Summary table (stacks at 768): keep old price + SAVE badge tidy */
    .pricing-table .svc-old {
        font-size: 0.85rem;
        margin-right: 6px;
    }

    .pricing-table .svc-save {
        margin-left: 6px;
        font-size: 0.6rem;
        padding: 2px 7px;
    }

    .pricing-table .service-price {
        font-size: 1.15rem !important;
    }
}

@media (max-width: 400px) {
    .pricing-card-premium .price-tag .amount {
        font-size: 1.65rem !important;
    }

    .price-tag .po-strike {
        font-size: 1.4rem;
    }

    .price-tag .po-setup-amt {
        font-size: 1.4rem;
    }

    .offer-new-price {
        font-size: 1.75rem;
    }

    .offer-old-price {
        font-size: 1.45rem;
    }
}

/* Final safeguard: never allow horizontal scroll on the pricing page */
body {
    overflow-x: hidden;
}

/* =====================================================================
   PREMIUM REDESIGN & RATE CARD 2026 STYLES
   ===================================================================== */

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #BF953F, #AA771C);
    border-radius: 5px;
    border: 2px solid #050505;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}

/* Glassmorphism Navbar Enhancement */
.navbar {
    background: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Rate Card General Design */
.rate-card-section {
    padding: 100px 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
}

.rate-card-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 70px;
}

.rate-card-header .section-label {
    display: inline-block;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 5px;
}

.rate-card-title {
    font-size: 3.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 15px;
}

.rate-card-title span {
    font-style: italic;
    color: var(--accent);
    background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rate-card-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.8rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
}

.rate-card-intro {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.rate-card-intro strong {
    color: #fff;
    font-weight: 600;
}

/* Rate List (Rows Layout) */
.rates-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.rate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(17, 17, 17, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 14px;
    padding: 30px 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.rate-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: transparent;
    transition: background 0.3s ease;
}

.rate-item:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.08);
}

.rate-item:hover::before {
    background: var(--accent);
}

.rate-item-details {
    flex: 1;
    padding-right: 40px;
}

.rate-item-details h3 {
    font-size: 1.6rem;
    font-family: var(--font-heading);
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.rate-item:hover h3 {
    color: var(--accent);
}

.rate-item-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.rate-item-price-wrap {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-width: 260px;
    flex-shrink: 0;
}

.rate-item-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;
}

.rate-item-price .from-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-right: 8px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.rate-item-price .currency {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
    margin-right: 2px;
}

.rate-item-price .amount {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1;
    transition: color 0.3s ease;
}

.rate-item:hover .amount {
    color: var(--accent);
}

.rate-item-price .period {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

.rate-item-price-wrap .price-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Flagship / All-in-One Partner Styling */
.rate-item.flagship {
    background: linear-gradient(145deg, rgba(30, 24, 10, 0.7) 0%, rgba(13, 13, 13, 0.85) 1005);
    background: linear-gradient(145deg, rgba(30, 24, 10, 0.7) 0%, rgba(13, 13, 13, 0.85) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(212, 175, 55, 0.05);
}

.rate-item.flagship::before {
    background: linear-gradient(to bottom, #BF953F, #AA771C);
}

.rate-item.flagship:hover {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 175, 55, 0.15);
}

.rate-item.flagship h3 {
    background: linear-gradient(135deg, #FFF 30%, #D4AF37 70%, #AA771C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.rate-item.flagship .star-icon {
    color: var(--accent);
    margin-right: 4px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

/* Rate Card Footnotes */
.rate-card-footnotes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 50px auto 70px;
    padding-top: 40px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.footnote-item {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.footnote-item .diamond-bullet {
    color: var(--accent);
    margin-right: 6px;
    font-size: 0.8rem;
}

/* Rate Card CTA */
.rate-card-cta {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.rate-card-cta .remark-text {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 30px;
}

.rate-card-cta .remark-text em {
    color: var(--accent);
    font-style: italic;
}

.rate-card-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Custom transitions and glow effect for premium buttons */
.btn-primary, .btn-secondary {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 6px;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.btn-primary:hover::after {
    width: 300%;
    height: 300%;
}

/* Premium Animations */
[data-aos] {
    pointer-events: none;
}
.aos-animate {
    pointer-events: auto;
}

/* Responsive Redesign for Rate Items */
@media (max-width: 900px) {
    .rate-card-footnotes {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .rate-card-title {
        font-size: 2.6rem;
    }
    
    .rate-card-subtitle {
        font-size: 1.4rem;
    }
    
    .rate-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
        gap: 20px;
    }
    
    .rate-item::before {
        width: 100%;
        height: 4px;
        left: 0;
        top: 0;
    }
    
    .rate-item-details {
        padding-right: 0;
    }
    
    .rate-item-price-wrap {
        align-items: flex-start;
        text-align: left;
        min-width: 100%;
        padding-top: 15px;
        border-top: 1px solid rgba(212, 175, 55, 0.1);
    }
    
    .rate-card-cta .remark-text {
        font-size: 1.8rem;
    }
    
    .rate-card-cta .cta-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .btn-secondary {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .rate-card-footnotes {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: left;
    }
    
    .footnote-item {
        text-align: left;
    }
}