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

/* CUSTOM DESIGN SYSTEM TOKENS */
:root {
    --primary: #DCC7F7;
    --secondary: #C9A6F0;
    --accent: #DCC7F7;
    --dark-bg: #0f172a;
    --light-text: #ffffff;
    --muted-text: #94a3b8;
    
    --glass-bg: rgba(15, 23, 42, 0.65);
    --glass-border: rgba(220, 199, 247, 0.12);
    --glass-glow: rgba(220, 199, 247, 0.18);
    --glass-glow-hover: rgba(220, 199, 247, 0.30);
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease;

    --header-h: 88px;
}

/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-bg);
    color: var(--light-text);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
    padding-top: var(--header-h);
}

/* Hero and subpage-hero already handle their own top padding — remove the body offset for those */
body:has(.hero-section),
body:has(.subpage-hero) {
    padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

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

/* GLOBAL RESPONSIVE IMAGE SAFETY NET
   Without this, any image inserted via WP (custom logo, content images,
   etc.) can render at its native pixel size and overflow on small
   screens. Specific components below override max-width where a
   precise size is required (e.g. .custom-logo, .logo-img). */
img {
    max-width: 100%;
    height: auto;
}

/* ANTI-GRAVITY BACKGROUND GRID */
.anti-gravity-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.8) 0%, #080d1a 100%);
    z-index: -10;
    overflow: hidden;
}

.anti-gravity-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--glass-border) 1px, transparent 1px),
        radial-gradient(var(--glass-border) 1.5px, transparent 1.5px);
    background-size: 40px 40px, 80px 80px;
    background-position: 0 0, 20px 20px;
    opacity: 0.15;
}

/* CUSTOM CURSOR — Purple Bottle Cap */
*, *::before, *::after {
    cursor: url('../images/cursor_bottle_cap.svg') 16 16, auto !important;
}
a, button, [role="button"], input[type="submit"], .btn, label {
    cursor: url('../images/cursor_bottle_cap.svg') 16 16, pointer !important;
}

/* CUSTOM SCROLLBAR — Bottle Cap Style */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--dark-bg);
    border-left: 1px solid rgba(220, 199, 247, 0.1);
}
::-webkit-scrollbar-thumb {
    background: radial-gradient(circle at 35% 35%, #DCC7F7, #9B59D0 60%, #6B2FA0);
    border-radius: 50px;
    border: 2px solid rgba(220, 199, 247, 0.4);
    box-shadow: inset 0 0 4px rgba(255,255,255,0.3), 0 0 6px rgba(155, 89, 208, 0.6);
}
::-webkit-scrollbar-thumb:hover {
    background: radial-gradient(circle at 35% 35%, #ffffff, #C9A6F0 40%, #9B59D0);
    box-shadow: inset 0 0 6px rgba(255,255,255,0.4), 0 0 10px rgba(220, 199, 247, 0.8);
}

/* PREMIUM GLASSMORPHISM WRAPPERS */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.glass-panel:hover {
    border-color: rgba(220, 199, 247, 0.25);
    box-shadow: 0 12px 40px 0 var(--glass-glow-hover);
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    outline: none;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--light-text);
    box-shadow: 0 4px 15px rgba(201, 166, 240, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 199, 247, 0.5);
    background: linear-gradient(135deg, var(--secondary), var(--accent));
}

.btn-glass {
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-glass:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--secondary);
    color: var(--secondary);
    transform: translateY(-3px);
}

.btn-whatsapp {
    background: #25d366;
    color: white;
}

.btn-whatsapp:hover {
    background: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

/* HEADER / NAVIGATION */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition-smooth);
    padding: 20px 0;
    background: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header-wrapper.scrolled {
    padding: 10px 0;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-wrap: nowrap;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(220, 199, 247, 0.3));
}

/* Custom logo uploaded via WordPress Customizer (Site Identity).
   the_custom_logo() prints its own <a class="custom-logo-link"> wrapper,
   so we size the image directly and constrain it the same way as the
   fallback .logo-img — otherwise an uploaded image renders at its raw
   native size and can blow out the header on any screen size. */
.custom-logo-link {
    display: flex;
    align-items: center;
}

.custom-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(220, 199, 247, 0.3));
}

.logo-text {
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111111;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #111111;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: clamp(6px, 1.2vw, 22px);
    flex-wrap: nowrap;
}

/* Force black color on all nav menu links — covers all WordPress menu class structures */
.nav-menu a,
.nav-menu a:link,
.nav-menu a:visited,
.nav-menu li a,
.nav-menu li a:link,
.nav-menu li a:visited,
.nav-menu > li > a,
.primary-nav a,
.primary-nav a:link,
.primary-nav a:visited,
.primary-nav li a,
.header-wrapper a.nav-link,
.header-wrapper .nav-menu a,
.header-container .nav-menu a,
.header-container .primary-nav a,
ul.nav-menu li a,
ul.nav-menu li a:link,
ul.nav-menu li a:visited {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 1 !important;
}

@media (min-width: 1025px) and (max-width: 1180px) {
    .header-actions .btn span,
    .header-actions .btn {
        font-size: 0.85rem;
        padding: 10px 18px;
    }
}

/* Nudge the "Contact" nav item slightly left for better visual balance
   against the header-actions buttons. Position-only change: size, color,
   and link behavior are untouched. Scoped to desktop nav (min-width: 1025px)
   so the mobile drawer layout is unaffected. */
@media (min-width: 1025px) {
    .nav-menu li:last-child {
        margin-right: 14px;
    }
}

.nav-link {
    font-size: clamp(0.78rem, 1.1vw, 0.93rem);
    font-weight: 600;
    position: relative;
    padding: 8px 0;
    color: #111111 !important;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    transition: var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover,
.nav-menu a:hover,
.nav-menu li a:hover,
.nav-menu > li > a:hover,
.primary-nav a:hover,
.header-container .nav-menu a:hover,
ul.nav-menu li a:hover {
    color: var(--secondary) !important;
    -webkit-text-fill-color: var(--secondary) !important;
}

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

.nav-toggle {
    display: none;
    background: none;
    border: 1.5px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    color: #111111;
    font-size: 1.5rem;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

/* FLOATING FLOATER BACKGROUND ELEMENTS */
.floating-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.floater {
    position: absolute;
    filter: drop-shadow(0 8px 24px rgba(220, 199, 247, 0.25));
    animation: antiGravityFloat 8s ease-in-out infinite alternate;
}

.floater-droplet {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 35% 35%, rgba(220, 199, 247, 0.8), rgba(201, 166, 240, 0.4) 70%);
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), inset 4px 4px 12px rgba(255,255,255,0.6);
}

.floater-ice {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    transform: rotate(15deg);
    box-shadow: 0 4px 15px rgba(220, 199, 247, 0.15);
}

/* HERO SECTION */
.hero-section {
    position: relative;
    padding: calc(var(--header-h) + 80px) 0 100px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
    z-index: 0;
    pointer-events: none;
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 60px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-badge {
    background: rgba(220, 199, 247, 0.1);
    border: 1px solid rgba(220, 199, 247, 0.3);
    color: var(--secondary);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ffffff 30%, #DCC7F7 70%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subheadline {
    font-size: 1.15rem;
    color: var(--muted-text);
    margin-bottom: 40px;
    max-width: 580px;
}

.hero-ctas {
    display: flex;
    gap: 16px;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-circle-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 199, 247, 0.25) 0%, transparent 70%);
    filter: blur(30px);
    z-index: -1;
    animation: pulseGlow 4s infinite alternate;
}

.hero-main-image {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
    animation: antiGravityFloat 6s ease-in-out infinite alternate;
}

/* ============================================================
   HERO ANIMATED POURING BOTTLE VISUAL
   Replaces/accompanies the static hero image with a lightweight
   SVG animation: bottle tilts, water streams and drips into a
   glass, which fills with a gentle shimmer. Pure CSS, no extra
   image assets, respects prefers-reduced-motion.
   ============================================================ */
.hero-bottle-visual {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.hero-bottle-visual svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
}

.pour-bottle {
    animation: bottleSway 5s ease-in-out infinite alternate;
    transform-origin: 60% 30%;
}
@keyframes bottleSway {
    0%   { transform: rotate(-3deg) translateY(0px); }
    100% { transform: rotate(2deg) translateY(-6px); }
}

.pour-stream {
    stroke-dasharray: 14 10;
    animation: streamFlow 0.6s linear infinite, streamWobble 1.4s ease-in-out infinite;
}
@keyframes streamFlow {
    to { stroke-dashoffset: -48; }
}
@keyframes streamWobble {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2px); }
}

.splash-ring {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ripple 1.8s ease-out infinite;
}
.splash-ring.r2 { animation-delay: 0.6s; }
.splash-ring.r3 { animation-delay: 1.2s; }
@keyframes ripple {
    0%   { transform: scale(0.3); opacity: 0.7; }
    80%  { opacity: 0.08; }
    100% { transform: scale(1.6); opacity: 0; }
}

.droplet {
    opacity: 0;
    animation: dropletFall 1.2s ease-in infinite;
}
.droplet.d2 { animation-delay: 0.4s; }
.droplet.d3 { animation-delay: 0.8s; }
@keyframes dropletFall {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(58px) scale(0.6); opacity: 0; }
}

.glass-water {
    animation: waterRise 3s ease-in-out infinite alternate;
    transform-origin: bottom;
}
@keyframes waterRise {
    0%   { transform: scaleY(0.94); }
    100% { transform: scaleY(1); }
}

.water-shimmer {
    animation: shimmerMove 2.5s ease-in-out infinite;
}
@keyframes shimmerMove {
    0%, 100% { opacity: 0.25; transform: translateX(-4px); }
    50%      { opacity: 0.55; transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .pour-bottle, .pour-stream, .splash-ring, .droplet, .glass-water, .water-shimmer {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .hero-bottle-visual {
        max-width: 320px;
    }
}

/* ============================================================
   HERO ANIMATED MOUNTAIN SPRING WATER VISUAL
   Fresh water cascading down a mountainside into a pool below.
   Shares the same droplet/splash-ring building blocks as the
   bottle visual above. Pure CSS + SVG, respects
   prefers-reduced-motion.
   ============================================================ */
.hero-mountain-visual {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.hero-mountain-visual svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
}

.flow-stream {
    stroke-dasharray: 12 9;
    animation: streamFlow 0.7s linear infinite, streamWobble 1.6s ease-in-out infinite;
}
.flow-stream.fs2 { animation-duration: 0.85s, 1.8s; }
.flow-stream.fs3 { animation-duration: 0.6s, 1.4s; }

.mist {
    animation: mistDrift 7s ease-in-out infinite alternate;
}
.mist.mist2 {
    animation-delay: 1.5s;
    animation-duration: 8.5s;
}
@keyframes mistDrift {
    0%   { transform: translateX(-6px) translateY(0); opacity: 0.16; }
    50%  { opacity: 0.28; }
    100% { transform: translateX(8px) translateY(-3px); opacity: 0.16; }
}

.sparkle {
    animation: sparkleTwinkle 2.2s ease-in-out infinite;
}
.sparkle.sp2 { animation-delay: 0.4s; }
.sparkle.sp3 { animation-delay: 0.8s; }
.sparkle.sp4 { animation-delay: 1.2s; }
.sparkle.sp5 { animation-delay: 1.6s; }
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50%      { opacity: 0.9;  transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .flow-stream, .mist, .sparkle, .splash-ring, .droplet {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .hero-mountain-visual {
        max-width: 320px;
    }
}

/* SECTION COMMON STYLES */
.section-padding {
    padding: 100px 0;
    position: relative;
}

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

.section-subtitle {
    color: var(--secondary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    display: block;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff, #DCC7F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-description {
    color: var(--muted-text);
}

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

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 35px;
}

.about-feature-box {
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    transition: var(--transition-smooth);
}

.about-feature-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--secondary);
    transform: translateY(-5px);
}

.feature-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.feature-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.feature-desc {
    font-size: 0.9rem;
    color: var(--muted-text);
}

/* DIVISIONS SECTION */
.divisions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.division-card {
    position: relative;
    overflow: hidden;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.division-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(201, 166, 240, 0.2), rgba(220, 199, 247, 0.2));
    border: 1px solid rgba(220, 199, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
    color: var(--accent);
    box-shadow: 0 8px 20px rgba(220, 199, 247, 0.15);
}

.division-title {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: var(--light-text);
}

.division-text {
    color: var(--muted-text);
    font-size: 0.95rem;
    margin-bottom: 30px;
    flex-grow: 1;
}

.division-bullets {
    list-style: none;
    margin-bottom: 30px;
}

.division-bullets li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 10px;
}

.division-bullets li::before {
    content: '✦';
    color: var(--accent);
    font-size: 0.8rem;
}

.division-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--secondary);
}

.division-card:hover .division-link {
    color: var(--accent);
}

.division-card:hover .division-link span {
    transform: translateX(4px);
    transition: var(--transition-fast);
}

/* WHY CHOOSE US & STATISTICS */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.why-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.why-item {
    display: flex;
    gap: 20px;
    padding: 24px;
}

.why-item-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(220, 199, 247, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-weight: bold;
    border: 1px solid rgba(220, 199, 247, 0.2);
}

.why-item-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.why-item-desc {
    color: var(--muted-text);
    font-size: 0.92rem;
}

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

.stat-box {
    padding: 40px 30px;
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--secondary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--light-text);
}

/* SERVICE AREAS SECTION */
.service-map-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.map-visual {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.map-mock-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(201, 166, 240, 0.15) 0%, transparent 60%);
}

.map-point {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(220, 199, 247, 0.25), 0 0 20px rgba(220, 199, 247, 0.8);
    cursor: pointer;
    animation: ripple 2s infinite;
}

.map-point::after {
    content: attr(data-name);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--glass-border);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.9;
}

.point-kannur { top: 40%; left: 35%; }
.point-kasaragod { top: 20%; left: 20%; }
.point-kozhikode { top: 65%; left: 55%; }

.area-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.area-card {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.area-icon {
    font-size: 1.5rem;
    color: var(--secondary);
}

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

.area-desc {
    color: var(--muted-text);
    font-size: 0.85rem;
}

/* CONTACT PAGE / COMMON FORM */
.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-info-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.info-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(220, 199, 247, 0.1);
    border: 1px solid rgba(220, 199, 247, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-details h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.info-details p,
.info-details a {
    color: var(--muted-text);
    font-size: 0.92rem;
}

.info-details a:hover {
    color: var(--secondary);
}

.contact-form-panel {
    padding: 40px;
}

.form-title {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.form-subtitle {
    color: var(--muted-text);
    margin-bottom: 30px;
    font-size: 0.92rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--light-text);
}

.form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--light-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 10px rgba(220, 199, 247, 0.25);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* FOOTER SECTION */
.footer {
    border-top: 1px solid var(--glass-border);
    background: #090e1a;
    padding: 80px 0 30px 0;
    position: relative;
    z-index: 10;
}

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

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-desc {
    color: var(--muted-text);
    font-size: 0.92rem;
    max-width: 320px;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-title {
    font-size: 1.15rem;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--secondary);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--muted-text);
    font-size: 0.92rem;
}

.footer-links a:hover {
    color: var(--secondary);
    transform: translateX(5px);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--muted-text);
    font-size: 0.92rem;
}

.footer-contact-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.footer-contact-item span {
    color: var(--secondary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted-text);
    font-size: 0.85rem;
}

/* SUBPAGE HEADER (HERO FOR INNER PAGES) */
.subpage-hero {
    position: relative;
    padding: calc(var(--header-h) + 60px) 0 80px 0;
    background: linear-gradient(180deg, #090e1a 0%, var(--dark-bg) 100%);
    border-bottom: 1px solid var(--glass-border);
}

.subpage-hero-title {
    font-size: 2.8rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffffff, var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subpage-hero-desc {
    color: var(--muted-text);
    font-size: 1.1rem;
    max-width: 700px;
}

/* Y LINE AQUA PRODUCTS & PROCESS */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
}

.product-card {
    overflow: hidden;
    transition: var(--transition-smooth);
}

.product-img-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: var(--transition-smooth);
}

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

/* ICE CUBE CARD ANIMATION */
.ice-cube-card .product-img-wrapper {
    position: relative;
}

.ice-cube-card .product-img {
    animation: yline-ice-bob 4s ease-in-out infinite;
}

.ice-cube-card:hover .product-img {
    transform: scale(1.08);
    animation-play-state: paused;
}

@keyframes yline-ice-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.015); }
}

.ice-cube-sparkle {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(220, 199, 247, 0.8));
    animation: yline-ice-sparkle 3.2s ease-in-out infinite;
}

.ice-cube-sparkle.s1 { top: 18%; left: 14%; animation-delay: 0s; }
.ice-cube-sparkle.s2 { top: 60%; left: 78%; animation-delay: 1s; font-size: 0.85rem; }
.ice-cube-sparkle.s3 { top: 75%; left: 30%; animation-delay: 2s; font-size: 0.7rem; }
.ice-cube-sparkle.s4 { top: 25%; left: 70%; animation-delay: 1.6s; font-size: 0.75rem; }

@keyframes yline-ice-sparkle {
    0%   { opacity: 0; transform: translateY(0) scale(0.6) rotate(0deg); }
    20%  { opacity: 1; }
    50%  { opacity: 0.9; transform: translateY(-14px) scale(1) rotate(15deg); }
    80%  { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-26px) scale(0.6) rotate(30deg); }
}

.product-info {
    padding: 30px;
}

.product-name {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--light-text);
}

.product-desc {
    color: var(--muted-text);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.aqua-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.aqua-feature-card {
    padding: 30px 20px;
    text-align: center;
}

.aqua-feature-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.aqua-feature-name {
    font-size: 1.05rem;
    font-weight: 600;
}

/* DIVISION BANNERS & IMAGES */
.division-showcase-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.showcase-banner-img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* QUICK FLOATING WHATSAPP & PHONE TRIGGERS */
.floating-actions {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

.floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.floating-btn:hover {
    transform: scale(1.1) translateY(-5px);
}

.floating-whatsapp {
    background-color: #25d366;
    color: white;
}

.floating-call {
    background-color: var(--primary);
    color: white;
}

/* MAP WRAPPER */
.map-wrapper {
    width: 100%;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

/* ANIMATIONS KEYFRAMES */
@keyframes antiGravityFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(2deg);
    }
    100% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 199, 247, 0.4), 0 0 0 10px rgba(220, 199, 247, 0.1);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(220, 199, 247, 0), 0 0 0 30px rgba(220, 199, 247, 0);
    }
}

/* RESPONSIVE LAYOUTS - MOBILE FIRST */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero-content {
        align-items: center;
    }
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-subheadline {
        margin-left: auto;
        margin-right: auto;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .why-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .service-map-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .division-showcase-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

@media (max-width: 1024px) {
    .nav-toggle {
        display: flex;
    }
    .logo-img,
    .custom-logo {
        height: 38px;
        max-height: 38px;
        max-width: 130px;
    }
    .nav-menu {
        position: fixed;
        top: var(--header-h, 80px);
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--header-h, 80px));
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 50px 0;
        transition: var(--transition-smooth);
        border-top: 1px solid var(--glass-border);
    }
    .nav-menu.open {
        left: 0;
    }
    .header-actions {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    .btn {
        width: 100%;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .about-features {
        grid-template-columns: 1fr;
    }
    .subpage-hero-title {
        font-size: 2.2rem;
    }
    .contact-form-panel {
        padding: 24px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* ============================================================
   Y LINE GROUP THEME v2.0 — ENHANCED ADDITIONS
   Mobile drawer, social links, Font Awesome icons, accessibility
   ============================================================ */

/* MOBILE NAVIGATION DRAWER */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: var(--header-h, 70px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-h, 70px));
    background: rgba(9, 14, 26, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    overflow-y: auto;
    border-top: 1px solid var(--glass-border);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-drawer.is-open {
    display: block;
    transform: translateX(0);
}

.mobile-nav-inner {
    padding: 32px 24px 60px;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu li {
    width: 100%;
}

.mobile-nav-menu li a,
.mobile-nav-menu li a:link,
.mobile-nav-menu li a:visited {
    display: block;
    width: 100%;
    padding: 16px 0;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    opacity: 1;
    border-bottom: 1px solid var(--glass-border);
    transition: var(--transition-fast);
}

.mobile-nav-menu li a:hover,
.mobile-nav-menu li a:focus,
.mobile-nav-menu li a.active {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent);
    padding-left: 12px;
}

/* HAMBURGER ICON LINES */
.hamburger-line {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #111111;
    border-radius: 2px;
    transition: var(--transition-smooth);
}

.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* SOCIAL LINKS */
.social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    color: var(--muted-text);
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.social-facebook:hover  { background: #1877f2; border-color: #1877f2; }
.social-instagram:hover { background: linear-gradient(135deg,#e1306c,#fd8e16); border-color: #e1306c; }
.social-youtube:hover   { background: #ff0000; border-color: #ff0000; }
.social-twitter:hover   { background: #1da1f2; border-color: #1da1f2; }
.social-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }

/* FOOTER LOGO NAME */
.footer-logo-name {
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-powered {
    display: flex;
    gap: 12px;
    align-items: center;
}

.footer-powered a {
    color: var(--muted-text);
    font-size: 0.8rem;
    transition: var(--transition-fast);
}

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

/* ACCESSIBLE FOCUS STYLES */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* SKIP LINK (Accessibility) */
.skip-to-content {
    position: absolute;
    top: -999px;
    left: 20px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    z-index: 9999;
    font-weight: 600;
}

.skip-to-content:focus {
    top: 20px;
}

/* LAZY-LOADED IMAGE PLACEHOLDER */
img[loading="lazy"] {
    transition: opacity 0.4s ease;
}

/* FORM CONTROL RESET (compatible with WP) */
.form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px 18px;
    color: var(--light-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-top: 8px;
    transition: var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(220, 199, 247, 0.12);
}

.form-control::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* PRINT STYLES */
@media print {
    .header-wrapper,
    .floating-actions,
    .anti-gravity-grid,
    .floating-bg-container,
    .nav-toggle,
    .mobile-nav-drawer { display: none !important; }
    body { background: white; color: black; }
    .glass-panel { border: 1px solid #ddd; box-shadow: none; }
}

/* EXTRA SMALL MOBILE (< 480px) */
@media (max-width: 480px) {
    .hero-title { font-size: 1.85rem; }
    .subpage-hero-title { font-size: 1.7rem; }
    .section-title { font-size: 1.6rem; }
    .divisions-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .floating-btn { width: 48px; height: 48px; font-size: 1.2rem; }
    .floating-actions { bottom: 20px; right: 16px; }
    .logo-img,
    .custom-logo {
        height: 32px;
        max-height: 32px;
        max-width: 110px;
    }
    .logo-text {
        font-size: 1rem;
    }
}

/* WORDPRESS DEFAULT ALIGNMENTS */
.alignleft  { float: left; margin-right: 20px; margin-bottom: 10px; }
.alignright { float: right; margin-left: 20px; margin-bottom: 10px; }
.aligncenter { display: block; margin: 0 auto 10px; }
.wp-caption { max-width: 100%; }

/* SODA POSTER SECTION */
.soda-poster-section {
    background: linear-gradient(135deg, rgba(0,20,60,0.6) 0%, rgba(0,40,100,0.3) 100%);
}
.soda-poster-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.soda-poster-img {
    width: 100%;
    max-width: 680px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 48px rgba(0, 120, 255, 0.25), 0 2px 16px rgba(0,0,0,0.5);
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.soda-poster-img:hover {
    transform: scale(1.015);
    box-shadow: 0 16px 64px rgba(0, 140, 255, 0.35), 0 4px 24px rgba(0,0,0,0.6);
}
.soda-poster-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Promotional Posters Grid */
@media (max-width: 768px) {
    .promo-posters-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 600px) {
    .soda-poster-cta { flex-direction: column; align-items: center; }
    .soda-poster-cta .btn { width: 100%; max-width: 320px; text-align: center; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Gallery grids & page gaps
   ============================================================ */

/* Contact form fields: stack on tablets/phones instead of staying cramped
   side-by-side (inline style has no responsive fallback otherwise). */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* Force single-column on mobile for all inline 2-col/3-col grids */
@media (max-width: 768px) {
    /* Gallery rows in front-page and subpages */
    .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Photo caption text size */
    .container > div[style*="grid-template-columns"] span {
        font-size: 0.78rem !important;
    }
    /* Fix subpage hero text */
    .subpage-hero-title {
        font-size: 1.8rem;
    }
    /* Fix hero section on small phones */
    .hero-section {
        padding: calc(var(--header-h) + 40px) 0 80px 0;
    }
    /* Ensure section padding scales down */
    .section-padding {
        padding: 60px 0;
    }
}

/* Fix mobile drawer top position to match actual header height */
@media (max-width: 1024px) {
    .mobile-nav-drawer {
        top: var(--header-h, 88px);
        height: calc(100vh - var(--header-h, 88px));
    }
}

/* ============================================================
   HERO CAROUSEL  (Bisleri-style full-width slider)
   ============================================================ */

/* Remove old body offset rule for hero-section (carousel uses its own) */
body:has(.hero-carousel-section) {
    padding-top: 0;
}

.hero-carousel-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
}

/* ---------- Track & Slides ---------- */
.hc-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0s 0.9s;
    will-change: opacity;
}

.hc-slide--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease;
    z-index: 1;
}

/* ---------- Background image ---------- */
.hc-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    transition: transform 6s ease;
}
.hc-slide--active .hc-bg {
    transform: scale(1);
}

/* ---------- Dark overlay ---------- */
.hc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 14, 30, 0.82) 0%,
        rgba(10, 14, 30, 0.55) 55%,
        rgba(10, 14, 30, 0.18) 100%
    );
}

/* ---------- Content ---------- */
.hc-content-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-top: var(--header-h, 80px);
    z-index: 2;
}

.hc-content {
    max-width: 640px;
}

.hc-badge {
    display: inline-block;
    background: rgba(220, 199, 247, 0.12);
    border: 1px solid var(--hc-accent, #DCC7F7);
    color: var(--hc-accent, #DCC7F7);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 22px;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.hc-slide--active .hc-badge {
    opacity: 1;
    transform: translateY(0);
}

.hc-title {
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease 0.35s, transform 0.65s ease 0.35s;
}

.hc-slide--active .hc-title {
    opacity: 1;
    transform: translateY(0);
}

.hc-sub {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 36px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease 0.5s, transform 0.65s ease 0.5s;
}

.hc-slide--active .hc-sub {
    opacity: 1;
    transform: translateY(0);
}

.hc-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease 0.65s, transform 0.6s ease 0.65s;
}

.hc-slide--active .hc-ctas {
    opacity: 1;
    transform: translateY(0);
}

.hc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hc-accent, var(--accent));
    color: #0f172a;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.2s, transform 0.2s;
}
.hc-btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* ---------- Arrows ---------- */
.hc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.2s;
}
.hc-arrow:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-50%) scale(1.08);
}
.hc-arrow--prev { left: 28px; }
.hc-arrow--next { right: 28px; }

/* ---------- Dots ---------- */
.hc-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, width 0.3s;
    padding: 0;
}

.hc-dot--active {
    background: #ffffff;
    width: 28px;
    border-radius: 5px;
}

/* ---------- Progress bar ---------- */
.hc-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.15);
    z-index: 10;
}

.hc-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--hc-accent, #DCC7F7);
    transition: width 5s linear;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .hero-carousel-section {
        min-height: 540px;
        height: 92vh;
    }
    .hc-overlay {
        background: rgba(10, 14, 30, 0.68);
    }
    .hc-arrow { display: none; }
    .hc-content { max-width: 100%; }
    .hc-dots { bottom: 24px; }
}

@media (max-width: 480px) {
    .hc-title { font-size: 1.75rem; }
    .hc-sub   { font-size: 0.9rem; }
    .hc-btn-primary { padding: 12px 22px; font-size: 0.88rem; }
}


/* ============================================================
   HERO BANNER CAROUSEL — Full-width image-only slider
   ============================================================ */

.hero-banner-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0a0a0f;
    /* No fixed height — image determines height naturally */
    line-height: 0; /* eliminates inline-block gap */
}

/* Track */
.hbc-track {
    position: relative;
    width: 100%;
}

/* Individual slide */
.hbc-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

/* Active slide is visible and sets height */
.hbc-slide--active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* The banner image */
.hbc-img {
    display: block;
    width: 100%;
    height: auto;             /* preserve natural aspect ratio */
    max-height: 85vh;         /* never taller than viewport */
    object-fit: cover;
    object-position: center center;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 8s ease-out;
}

/* Subtle Ken-Burns zoom on active image */
.hbc-slide--active .hbc-img {
    transform: scale(1.03);
}
.hbc-slide:not(.hbc-slide--active) .hbc-img {
    transform: scale(1);
}

/* Optional click link — fills the whole slide */
.hbc-link {
    display: block;
    line-height: 0;
    cursor: pointer;
}
.hbc-link:focus-visible {
    outline: 3px solid #DCC7F7;
    outline-offset: -3px;
}

/* ── Arrows ───────────────────────────────────────────────── */
.hbc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    transition: background 0.25s, transform 0.25s;
    line-height: 1;
}
.hbc-arrow:hover,
.hbc-arrow:focus-visible {
    background: rgba(220, 199, 247, 0.85);
    color: #1a0533;
    transform: translateY(-50%) scale(1.1);
    outline: none;
}
.hbc-arrow--prev { left: 20px; }
.hbc-arrow--next { right: 20px; }

/* ── Dots ─────────────────────────────────────────────────── */
.hbc-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
    align-items: center;
}
.hbc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.hbc-dot--active,
.hbc-dot:hover {
    background: #DCC7F7;
    border-color: #DCC7F7;
    transform: scale(1.3);
}
.hbc-dot:focus-visible {
    outline: 2px solid #DCC7F7;
    outline-offset: 3px;
}

/* ── Progress bar ─────────────────────────────────────────── */
.hbc-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 20;
}
.hbc-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #DCC7F7, #a78bfa);
    transition: width 5000ms linear;
    border-radius: 0 2px 2px 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .hbc-arrow {
        width: 38px;
        height: 38px;
    }
    .hbc-arrow--prev { left: 10px; }
    .hbc-arrow--next { right: 10px; }
    .hbc-img {
        max-height: 55vw; /* keep landscape ratio on mobile */
    }
}
@media (max-width: 480px) {
    .hbc-img {
        max-height: 60vw;
    }
    .hbc-dots { bottom: 10px; }
    .hbc-dot  { width: 8px; height: 8px; }
}