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

:root {
    --primary: #904820;
    --primary-container: #af6036;
    --background: #fcf9f4;
    --on-surface: #1c1c19;
    --surface-variant: #e5e2dd;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    overflow-x: hidden;
}

/* ── Mobile Menu Button (global fix) ── */
#mobile-menu-btn {
    display: none;
}
@media (max-width: 1023px) {
    #mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(144, 72, 32, 0.2); }
    50% { box-shadow: 0 0 40px rgba(144, 72, 32, 0.4); }
}

.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(50px); }
.reveal-right { transform: translateX(-50px); }

.glass {
    background: rgba(252, 249, 244, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-header.scrolled {
    background: #fcf9f4;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(144, 72, 32, 0.1);
}

#main-header.scrolled nav {
    height: 64px; /* h-16 */
}

@media (max-width: 767px) {
    #main-header.scrolled nav {
        height: 64px;
    }
}

.organic-blob {
    border-radius: 40% 60% 50% 50% / 50% 50% 50% 50%;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .organic-blob {
    border-radius: 40px;
    transform: scale(1.01);
}

@keyframes breathingArea {
    0%, 100% { 
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: scale(1);
    }
    50% { 
        border-radius: 40px;
        transform: scale(1.02);
    }
}

@media (max-width: 768px) {
    .organic-blob {
        animation: breathingArea 6s infinite ease-in-out;
    }
}

.btn-premium {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-premium::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%) rotate(45deg) translateY(100%);
    transition: all 0.6s ease;
}

.btn-premium:hover::after {
    transform: translate(-50%, -50%) rotate(45deg) translateY(-100%);
}

.gradient-text {
    background: linear-gradient(135deg, #904820 0%, #af6036 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-image-container::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(144, 72, 32, 0.15) 0%, transparent 70%);
    z-index: -1;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Global Button Rounding */
.rounded-pill, 
button.bg-primary,
.btn-premium {
    border-radius: 9999px !important;
}

/* Ensure all interactive elements have smooth transitions */
button, a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RGB Color Cycling Animation */
@keyframes rgbCycle {
    0%   { filter: hue-rotate(0deg) drop-shadow(0 0 40px #00f0ff) drop-shadow(0 0 80px #00f0ff); }
    16%  { filter: hue-rotate(60deg) drop-shadow(0 0 40px #00ff66) drop-shadow(0 0 80px #00ff66); }
    33%  { filter: hue-rotate(120deg) drop-shadow(0 0 40px #ff0066) drop-shadow(0 0 80px #ff0066); }
    50%  { filter: hue-rotate(180deg) drop-shadow(0 0 40px #ff3300) drop-shadow(0 0 80px #ff3300); }
    66%  { filter: hue-rotate(240deg) drop-shadow(0 0 40px #aa00ff) drop-shadow(0 0 80px #aa00ff); }
    83%  { filter: hue-rotate(330deg) drop-shadow(0 0 40px #0066ff) drop-shadow(0 0 80px #0066ff); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 40px #00f0ff) drop-shadow(0 0 80px #00f0ff); }
}

@keyframes rgbBgCycle {
    0%   { background: #00f0ff; }
    16%  { background: #00ff66; }
    33%  { background: #ff0066; }
    50%  { background: #ff3300; }
    66%  { background: #aa00ff; }
    83%  { background: #0066ff; }
    100% { background: #00f0ff; }
}

.rgb-glow-container {
    animation: rgbCycle 6s ease-in-out infinite;
}

.rgb-glow-bg {
    animation: rgbBgCycle 6s ease-in-out infinite;
}

/* Flashlight - Origin Point */
.flashlight-origin {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    width: 500px;
    height: 400px;
    transform: translate(-100%, -50%);
}

/* Mirrored flashlight for the side-view image */
.flashlight-right {
    left: auto !important;
    transform: translate(100%, -50%) scaleX(-1);
}

/* Flashlight - Light Cone */
.flashlight-cone {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 100% 50%,
        transparent 0deg,
        rgba(255,255,255,0.0) 140deg,
        rgba(255,255,255,0.15) 160deg,
        rgba(255,255,255,0.35) 178deg,
        rgba(255,255,255,0.35) 182deg,
        rgba(255,255,255,0.15) 200deg,
        rgba(255,255,255,0.0) 220deg,
        transparent 360deg
    );
    filter: blur(6px);
    animation: beamPulse 3s ease-in-out infinite;
}

/* Bright core of the beam */
.flashlight-cone::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.3) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
}

@keyframes beamPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Floating Dust Particles */
.dust {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 3px rgba(255,255,255,0.5);
}

@keyframes dustFloat {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: 0.7; }
    85% { opacity: 0.5; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.d1 { width: 2px; height: 2px; right: 50px; top: 45%; --dx: -180px; --dy: -30px; animation: dustFloat 5s infinite 0s; }
.d2 { width: 3px; height: 3px; right: 80px; top: 55%; --dx: -200px; --dy: 40px; animation: dustFloat 6s infinite 1s; }
.d3 { width: 2px; height: 2px; right: 30px; top: 48%; --dx: -150px; --dy: -15px; animation: dustFloat 4s infinite 0.5s; }
.d4 { width: 2px; height: 1px; right: 100px; top: 52%; --dx: -220px; --dy: 20px; animation: dustFloat 7s infinite 2s; }
.d5 { width: 3px; height: 1px; right: 60px; top: 42%; --dx: -190px; --dy: -50px; animation: dustFloat 5.5s infinite 1.5s; }
/* Border Trace Animation */
@keyframes border-trace {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.btn-trace-container {
    position: relative;
    padding: 2px;
    border-radius: 9999px;
    overflow: hidden;
    z-index: 1;
}

.btn-trace-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 40%, #00ffff 50%, transparent 60%, transparent 100%);
    animation: border-trace 4s linear infinite;
    z-index: -1;
}

.btn-trace-inner {
    position: relative;
    z-index: 2;
    background: #1a1a1a;
    border-radius: 9999px;
}