/* Base Variables & Reset */
:root {
    --bg: #030304;
    --text-primary: #f8f9fa;
    --text-secondary: #a0aab2;
    --gold: #d4af37;
    --gold-glow: rgba(212, 175, 55, 0.5);
    --whatsapp: #25D366;
    --whatsapp-glow: rgba(37, 211, 102, 0.4);
    --phone: #007BFF;
    --phone-glow: rgba(0, 123, 255, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; cursor: none !important; }

body { background-color: var(--bg); color: var(--text-primary); overflow-x: hidden; line-height: 1.8; }
a, button { cursor: none !important; }

/* 1. Cinematic Noise Overlay */
.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9998; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 2. Custom Magnetic Cursor */
.cursor-dot, .cursor-outline {
    position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none;
    z-index: 10000; transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background-color: var(--gold); }
.cursor-outline {
    width: 40px; height: 40px; border: 1px solid var(--gold-glow);
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
    will-change: transform, width, height;
}
body.cursor-hover .cursor-outline {
    width: 80px; height: 80px; background-color: rgba(212, 175, 55, 0.1); border-color: transparent;
}

/* 4. Fluid Text Reveal Logic */
.reveal-wrapper { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-inner { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.active .reveal-inner { transform: translateY(0); }
.fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: 0.5s; }
.active.fade-in-up { opacity: 1; transform: translateY(0); }

/* Typography & Layout Basics */
h1, h2, h3, h4, h5, h6 { line-height: 1.3; color: #ffffff; }

/* Parallax Orbs */
.ambient-orbs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; background: radial-gradient(circle at center, #0a0a0f 0%, var(--bg) 100%); }
.orb { position: absolute; border-radius: 50%; opacity: 0.3; }
.orb-gold { width: 60vw; height: 60vw; background: radial-gradient(circle, var(--gold) 0%, transparent 60%); top: -20%; right: -20%; }
.orb-dark { width: 70vw; height: 70vw; background: radial-gradient(circle, #151525 0%, transparent 70%); bottom: -30%; left: -20%; }
.orb-accent { width: 50vw; height: 50vw; background: radial-gradient(circle, #001f3f 0%, transparent 70%); top: 40%; left: 30%; }

.brand { font-family: 'Great Vibes', cursive; font-size: 5.5rem; color: var(--gold); text-align: center; }
.main-nav { padding: 4vh 0; width: 100%; display: flex; justify-content: center; position: relative; z-index: 10;}

/* Hero Section */
.hero { min-height: 80vh; display: flex; align-items: center; padding: 0 5vw; position: relative; z-index: 5;}
.hero-content { max-width: 1400px; margin: 0 auto; width: 100%; }
.main-title { font-size: clamp(3.5rem, 7vw, 6.5rem); font-weight: 900; letter-spacing: -2px; margin-bottom: 2rem; }
.gradient-text { background: linear-gradient(to right, #fff, var(--gold), #fff); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 4s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
.hero-details { display: flex; flex-direction: column; gap: 3rem; }
.description { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 200; color: var(--text-secondary); max-width: 900px; }

/* 5. Infinite Marquee */
.marquee-container { width: 100vw; overflow: hidden; white-space: nowrap; padding: 10vh 0; border-top: 1px solid rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.02); margin: 5vh 0;}
.marquee-content { display: inline-block; animation: scroll-left 25s linear infinite; font-size: 6rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.1); }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Magnetic Contact Buttons */
.contact-cluster { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }
.organic-btn {
    display: flex; align-items: center; text-decoration: none; padding: 1.5rem 2.5rem; border-radius: 100px; 
    transition: transform 0.2s ease, background 0.5s ease; /* fast transform for magnetic feel */
    width: fit-content; position: relative; overflow: hidden;
}
.organic-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: 100px; padding: 3px; 
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.organic-btn .btn-icon { font-size: 3.5rem; margin-right: 2rem; transition: transform 0.2s ease; }
.organic-btn .btn-text { display: flex; flex-direction: column; }
.action-label { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; opacity: 0.9; }
.phone-number { font-size: 3.2rem; font-weight: 900; letter-spacing: 1px; }

.whatsapp-btn { color: var(--whatsapp); box-shadow: 0 0 50px var(--whatsapp-glow); }
.call-btn { color: var(--phone); box-shadow: 0 0 50px var(--phone-glow); }
.organic-btn:hover { background: rgba(255,255,255,0.03); }

/* Staggered Sections */
.story-section { padding: 15vh 5vw; position: relative; z-index: 5;}
.sub-title { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 15vh; font-weight: 700; color: var(--gold); }
.staggered-layout { display: flex; flex-direction: column; gap: 15vh; }
.text-node { max-width: 700px; position: relative; }
.text-node h3 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #fff; font-weight: 600; }
.text-node p { font-size: 1.25rem; font-weight: 200; color: var(--text-secondary); }
.left-node { align-self: flex-start; }
.right-node { align-self: flex-end; text-align: right; }

/* Deep Dive SEO Typography Section */
.deep-dive-section { padding: 10vh 5vw; position: relative; z-index: 5;}
.typographic-container { max-width: 1100px; margin: 0 auto; }
.typographic-container h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 1.5rem; color: var(--gold); }
.lead-text { font-size: 1.5rem; color: #fff; margin-bottom: 5rem; font-style: italic; opacity: 0.8; }
.fluid-text-group { border-left: 2px solid var(--gold); padding-left: 3rem; }
.fluid-item h3 { font-size: 2.2rem; margin-bottom: 1rem; color: #fff; }
.fluid-item p { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; }
.fluid-item h4 { font-size: 1.8rem; margin-bottom: 1rem; margin-top: 2rem; color: #eee; }
.deep-indent { margin-top: 3rem; padding-left: 2rem; border-left: 1px dashed rgba(255,255,255,0.2); }
.deep-indent h5 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--gold); }
.deep-indent h6 { font-size: 1.2rem; margin-bottom: 1rem; margin-top: 2rem; text-transform: uppercase; letter-spacing: 2px; color: #ccc; }

/* Outline Text Section */
.faq-section { padding: 15vh 5vw; position: relative; z-index: 5;}
.outline-text { font-size: clamp(4rem, 12vw, 10rem); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.15); text-transform: uppercase; margin-bottom: 5rem; line-height: 0.9; text-align: center; }
.text-center { text-align: center; }
.large-desc { font-size: 1.5rem; max-width: 900px; margin: 0 auto; color: var(--text-secondary); }
.justify-center { flex-direction: row; justify-content: center; align-items: center; }
.mt-5 { margin-top: 5rem; }

/* Footer */
.organic-footer { padding: 15vh 0 10vh; text-align: center; border-top: 1px solid rgba(255,255,255,0.03); position: relative; z-index: 5;}
.footer-brand { font-size: 4.5rem; margin-bottom: 1rem; }
.footer-tagline { font-size: 1.3rem; color: var(--text-secondary); letter-spacing: 1px; }
.footer-links a { transition: color 0.3s ease; font-size: 1rem; }
.footer-links a:hover { color: var(--gold) !important; }

/* Generic Text Pages */
.page-content { padding: 20vh 5vw; max-width: 1000px; margin: 0 auto; z-index: 5; position: relative; }
.page-title { color: var(--gold); margin-bottom: 3rem; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; }
.text-content p { color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.8; }
.text-content h2, .text-content h3 { color: #fff; margin-top: 3rem; margin-bottom: 1.5rem; font-size: 1.8rem; font-weight: 600; }
.text-content ul { color: var(--text-secondary); margin-bottom: 1.5rem; padding-left: 1.5rem; font-size: 1.1rem; line-height: 1.8; }
.text-content li { margin-bottom: 0.5rem; }

/* Responsive */
@media (min-width: 1024px) {
    .contact-cluster { flex-direction: row; gap: 3rem; }
}
@media (max-width: 768px) {
    /* Hide custom cursor on mobile */
    .cursor-dot, .cursor-outline { display: none; }
    * { cursor: auto !important; }
    a, button { cursor: pointer !important; }
    
    .brand { font-size: 4rem; }
    .phone-number { font-size: 2.2rem; }
    .organic-btn .btn-icon { font-size: 2.5rem; }
    .staggered-layout { gap: 8vh; }
    .right-node { text-align: left; }
    .fluid-text-group { padding-left: 1.5rem; border-width: 1px; }
    .deep-indent { padding-left: 1rem; }
    .justify-center { flex-direction: column; }
    .marquee-content { font-size: 4rem; }
}