/* --- CORE VARIABLE STYLES --- */
:root {
  --color-primary: #8b5cf6; /* Tailwind violet-500 */
  --color-secondary: #6366f1; /* Tailwind indigo-500 */
  --highlight-color-hue: 210deg;
}

/* --- CUSTOM FONT CLASS & UTILITIES --- */
.font-geist { font-family: 'Geist', sans-serif !important; }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }

/* --- HEADER MASK (Restored for Logo and used for Contact H2) --- */
.header-mask, 
.text-4xl.font-bold.tracking-tighter.font-geist.text-white,
.contact-mask {
  mask-image: linear-gradient(150deg, transparent, black 30%, black 50%, transparent);
  -webkit-mask-image: linear-gradient(150deg, transparent, black 30%, black 50%, transparent);
}

/* --- FIX FOR JUMPING H1 HEIGHT (applied to container for fixed height) --- */
#hero-heading-container {
    /* Base height for text-7xl on mobile (~4.5rem/72px, plus extra for margin/tracking) */
    height: 8rem; 
    min-height: 8rem;
}
@media (min-width: 768px) {
    #hero-heading-container {
        /* Height for md:text-8xl/lg:text-9xl */
        height: 10.5rem; /* Slightly larger to be safer with the masking effect */
        min-height: 10.5rem;
    }
}
#hero-heading {
    /* Ensure H1 inside container can occupy the full height */
    margin: 0;
    line-height: 1; /* Critical for large fonts to stay within the container height */
}


/* --- BUTTON STYLES (Extensively Customized with animations) --- */
.btn-wrapper { 
    position: relative; 
    display: inline-block; 
    /* NEW: Allow buttons to grow to fill space */
    flex-grow: 1; 
    min-width: 0;
}
.btn {
--border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; --highlight-color-hue: 210deg; 
user-select: none; display: flex; align-items: center; justify-content: center; background-color: var(--button-color);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08);
border: solid 1px #ffffff22; border-radius: var(--border-radius); cursor: pointer;
transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 1.25rem; padding-right: 1.25rem; 
/* NEW: Ensure button content can shrink on small screens */
width: 100%;
min-width: 0;
}
@media (min-width: 768px) { .btn.md\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .btn.md\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } }
.btn::before {
content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none;
background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition);
box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.btn::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background-image: linear-gradient(0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent);
background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition);
}
.btn-letter {
position: relative; display: inline-block; color: #ffffff55; animation: letter-anim 2s ease-in-out infinite;
transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}
@keyframes letter-anim { 50% { text-shadow: 0 0 3px #ffffff88; color: #fff; } }
.btn-svg {
flex-grow: 0; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite;
animation-delay: 0.5s; filter: drop-shadow(0 0 2px #ffffff99); transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}
.txt-wrapper { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* MIN-WIDTH DECREASED for small screens */
    min-width: 6em !important; 
    white-space: nowrap;
}
.txt-1, .txt-2 { position: absolute; word-spacing: -1em; white-space: nowrap; }
.txt-1 { animation: appear-anim 1s ease-in-out forwards; }
.txt-2 { opacity: 0; }
@keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } }
.btn-letter:nth-child(1) { animation-delay: 0s; }
.btn-letter:nth-child(2) { animation-delay: 0.08s; }
.btn-letter:nth-child(3) { animation-delay: 0.16s; }
.btn-letter:nth-child(4) { animation-delay: 0.24s; }
.btn-letter:nth-child(5) { animation-delay: 0.32s; }
.btn-letter:nth-child(6) { animation-delay: 0.40s; }
.btn-letter:nth-child(7) { animation-delay: 0.48s; }
/* Hover States */
.btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4); }
.btn:hover::after { opacity: 1; -webkit-mask-image: linear-gradient(0deg, #fff, transparent); mask-image: linear-gradient(0deg, #fff, transparent); }
.btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }

/* FEATURE ICONS - Horizontal Layout Fix */
.feature-icons-container {
    display: flex;
    flex-direction: row; /* Force horizontal */
    flex-wrap: nowrap; /* Prevent wrapping unless absolutely necessary */
    justify-content: center;
    gap: 5px; /* Reduced gap for smaller screens */
    overflow-x: auto; /* Optional: adds horizontal scroll if content is too wide */
    padding-bottom: 0.5rem; /* Space below if it scrolls */
}
.feature-icons-container > div {
    flex-shrink: 0;
}

/* Mobile Menu Custom Style */
.mobile-menu-open {
    transform: translateX(0);
}