/* Critical CSS - Base reset and layout - prevents CLS */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth;height:100%;-webkit-overflow-scrolling:touch;background:#050614}
/* Base page visibility: keep body visible by default.
   All loading effects are handled via JS and the .loading/.loaded classes
   to avoid browser-specific quirks (especially in Chrome). */
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#050614;
  color:#FFF8F0;
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  visibility:visible;
  opacity:1;
}
body.loading{
  opacity:1; /* no global fade; JS can still adjust specific elements if needed */
}
body.loaded{
  opacity:1;
}

/* Critical: Mobile header bar - visible <768px */
#mobile-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;padding-top:calc(0.75rem + env(safe-area-inset-top));min-height:56px;background:rgba(5,6,20,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:768px){#mobile-header{display:none}}

/* Critical: Mobile menu panel - closed by default */
#mobile-menu{position:fixed;left:0;right:0;z-index:40;top:calc(56px + env(safe-area-inset-top));max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .3s ease,opacity .2s ease,visibility .2s}
#mobile-menu[aria-hidden="false"]{max-height:85vh;opacity:1;visibility:visible}
@media(min-width:768px){#mobile-menu{display:none}}

/* Critical: Desktop header - hidden on mobile, visible md+ */
#header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:0.75rem;padding-left:0.75rem;padding-right:0.75rem;display:none;justify-content:center;transition:padding .3s ease,opacity .3s ease;opacity:1;visibility:visible}
@media(min-width:768px){#header{display:flex;padding-top:1.5rem;padding-left:1rem;padding-right:1rem}}
#header.scrolled{padding-top:0.5rem}
@media(min-width:768px){#header.scrolled{padding-top:1rem}}

/* Critical: Hero - padding for mobile bar on mobile, desktop header on desktop */
section:first-of-type{min-height:calc(100vh - 5rem);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;padding-top:5.5rem;position:relative}
@media(min-width:768px){section:first-of-type{min-height:calc(100vh - 9rem);padding:2.5rem 1rem;padding-top:7rem}}
@media(min-width:1024px){section:first-of-type{padding:3rem 1rem;padding-top:8rem}}

/* Critical: Icon placeholder dimensions - prevents shift when icons load */
i[data-lucide]{display:inline-block;vertical-align:middle;flex-shrink:0;opacity:0;transition:opacity 0.2s ease-in}
i[data-lucide][data-loaded="true"]{opacity:1}
i[data-lucide="ice-cream"]{width:5rem;height:5rem;fill:none;stroke:currentColor;stroke-width:2}
@media(min-width:640px){i[data-lucide="ice-cream"]{width:6rem;height:6rem}}
@media(min-width:768px){i[data-lucide="ice-cream"]{width:7rem;height:7rem}}
@media(min-width:1024px){i[data-lucide="ice-cream"]{width:8rem;height:8rem}}

/* Critical: Button dimensions - prevents CLS */
button,a[role="button"],[data-action],[data-nav],[data-scroll],[data-currency],[data-faq]{min-height:44px;min-width:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button[aria-label*="instant access"],a[aria-label*="instant access"]{min-height:56px;padding:0.75rem 1.5rem;display:flex;align-items:center;justify-content:center}

/* Critical: Typography - prevents font swap shift */
h1{font-weight:700;line-height:1.1;letter-spacing:-0.02em;font-size:3rem}
@media(min-width:640px){h1{font-size:3.75rem}}
@media(min-width:768px){h1{font-size:4.5rem}}
@media(min-width:1024px){h1{font-size:6rem}}

/* Critical: Pricing cards - fixed dimensions */
article[role="listitem"]:not(.faq-item){min-height:500px;display:flex;flex-direction:column}
@media(min-width:1024px){article[role="listitem"]:not(.faq-item){min-height:550px}}

/* Critical: Loading overlay - visible until JS hides it (prevents FOUC/reload flash) */
.app-loading{position:fixed;inset:0;z-index:99999;background:#050614;pointer-events:none;transition:opacity .25s ease-out;opacity:1;visibility:visible}
.app-loading.app-loading--hidden{opacity:0!important;visibility:hidden}

/* Critical: GPU acceleration for smooth animations */
.animate-float,[class*="hover:scale"],[class*="transition"]{will-change:transform;transform:translateZ(0);backface-visibility:hidden}

/* Design tokens / CSS variables */
:root {
    --primary: #F5A962;
    --secondary: #FFB6C1;
    --bg: #050614;
    --bg-rgb: 5, 6, 20;
    --text: #FFF8F0;
    
    /* Unified Spacing Scale - Reduced */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
    
    /* Typography Scale */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;
    --font-5xl: 3rem;
    --font-6xl: 3.75rem;
    --font-7xl: 4.5rem;
    --font-8xl: 6rem;
    --font-9xl: 8rem;
    
    /* Motion System */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
}


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

/* Clean scrolling setup - only html scrolls - cross-browser */
html {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    min-height: 100%;
    /* iOS viewport height fix */
    min-height: -webkit-fill-available;
}

/* Body styles consolidated above in critical CSS */

/* Clean scrollbar - only on html element */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Animated gradient background for buttons */
.bg-size-200 {
    background-size: 200% 200%;
}

.bg-pos-0 {
    background-position: 0% 50%;
}

.bg-pos-100 {
    background-position: 100% 50%;
}

html::-webkit-scrollbar {
    display: block;
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Ensure content fits within viewport on smaller screens (prevents horizontal scroll)
   Keep desktop layouts flexible by only constraining max-width up to 1024px. */
@media (max-width: 1024px) {
    *:not(html):not(body) {
        max-width: 100%;
    }
}

/* Smooth icon fade-in to prevent glitches */
i[data-lucide] {
    opacity: 0;
    transition: opacity 0.25s ease-in;
    visibility: visible;
}

i[data-lucide][data-loaded="true"] {
    opacity: 1;
}

/* Ice cream icon: border/stroke only, no fill - Fixed dimensions prevent CLS */
i[data-lucide="ice-cream"] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    width: 5rem !important;
    height: 5rem !important;
    flex-shrink: 0 !important;
}
@media (min-width: 640px) {
    i[data-lucide="ice-cream"] {
        width: 6rem !important;
        height: 6rem !important;
    }
}
@media (min-width: 768px) {
    i[data-lucide="ice-cream"] {
        width: 7rem !important;
        height: 7rem !important;
    }
}
@media (min-width: 1024px) {
    i[data-lucide="ice-cream"] {
        width: 8rem !important;
        height: 8rem !important;
    }
}

/* Mobile menu bar and panel - cross-browser */
#mobile-header {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.mobile-menu-btn {
    -webkit-tap-highlight-color: transparent;
}
#mobile-menu {
    -webkit-overflow-scrolling: touch;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
@media (min-width: 768px) {
    #mobile-header,
    #mobile-menu {
        display: none !important;
    }
}
body.mobile-menu-open {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
#mobile-menu[aria-hidden="false"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu-btn:focus-visible,
.mobile-nav-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    #mobile-menu {
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }
}

/* Skip link - screen-reader only, visible on focus (all browsers) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only:focus,
.focus\:not-sr-only:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Mobile-first click optimization - ensure all interactive elements are 44x44px minimum */
@media (max-width: 768px) {
    /* All buttons and clickable elements must be at least 44x44px for mobile */
    button, a, [onclick], [role="button"], input[type="button"], input[type="submit"] {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Remove click delays on mobile */
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Optimize touch response - no delays */
    button:active, a:active, [onclick]:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    html {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto;
        overscroll-behavior-y: contain;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: visible;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
        position: relative;
        width: 100%;
        min-height: 100vh;
    }
    
    body {
        position: relative;
        overflow-x: hidden;
        overflow-y: visible;
    }
    
    /* Prevent horizontal overflow and scroll locking */
    * {
        max-width: 100vw;
    }
    
    /* Ensure no element blocks scrolling */
    main, section, div, article {
        overflow: visible;
        touch-action: pan-y;
    }
    
    /* Center buttons on mobile */
    .flex.flex-col {
        align-items: center;
    }
    
    /* Responsive media */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Optimize mobile scrolling performance */
    html {
        scroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent scroll jank - hardware acceleration for smooth scrolling */
    body, main {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Optimize scroll performance - reduce repaints */
    section {
        contain: layout style paint;
    }
}

/* SINGLE CONTINUOUS BACKGROUND - NO SEAMS */
/* This is the ONLY background layer - all sections inherit from this */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* CRITICAL: Use 100vh for fixed position - covers entire viewport */
    /* Fixed position means it stays in place while scrolling - this is correct */
    /* Base color - exact match across all sections */
    background-color: #050614;
    background-image: 
        /* Single radial gradient from top-center - warm desaturated brown-gold spotlight */
        radial-gradient(ellipse 140% 120% at 50% 15%, 
            rgba(200, 170, 130, 0.12) 0%, 
            rgba(180, 150, 110, 0.08) 20%,
            rgba(140, 110, 85, 0.05) 40%,
            rgba(80, 65, 50, 0.025) 60%,
            rgba(30, 25, 20, 0.01) 80%,
            transparent 100%);
    background-size: 100% 100%;
    background-position: 0% 0%;
    /* FIXED attachment ensures continuous background while scrolling */
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Mobile: Use scroll attachment for smooth scrolling */
@media (max-width: 768px) {
    body::before {
        background-attachment: scroll;
        position: absolute;
        height: auto;
        min-height: 100%;
    }
}

/* Body base layer - consolidated in critical CSS */

html {
    min-height: 100%;
    height: auto;
}

/* Sections - transparent and seamless */
section {
    position: relative;
    z-index: 1;
    background-color: transparent;
    background-image: none;
    border: none;
    margin: 0;
    overflow: visible;
}

/* No nested scrolling - only html scrolls */
div, article, aside, nav, header, footer, main, section {
    overflow: visible;
}

/* Desktop header scroll fallback (Chrome + all) – compact when scrolled, works without Tailwind */
@media (min-width: 768px) {
    #header.scrolled #header-content {
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
    }
    /* Scroll-to-top target: avoid fixed header covering #main-content */
    #main-content {
        scroll-margin-top: 6rem;
    }
}

/* Performance optimizations - minimal containment */
section {
    contain: layout;
}

/* Prevent layout shifts */
img, video, iframe {
    display: block;
}

/* Sections connect seamlessly */
section + section {
    margin-top: 0;
    border-top: none;
}

/* Unified Section Spacing System - Reduced */
section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* Hero section - padding for mobile bar on mobile, desktop header on desktop */
section:first-of-type {
    padding-top: 5.5rem;
    padding-bottom: var(--space-md);
}

@media (min-width: 768px) {
    section:first-of-type {
        padding-top: 7rem;
    }
}

@media (min-width: 1024px) {
    section:first-of-type {
        padding-top: 8rem;
    }
}

/* Key sections - moderate spacing */
section[id="pricing"],
section[id="how-it-works"] {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Features section - more generous spacing to match design */
section[id="features"] {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
    
    section[id="pricing"],
    section[id="how-it-works"] {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
    
    section[id="features"] {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* No visual separators */
section::before,
section::after {
    display: none;
    content: none;
}

hr {
    display: none;
}

/* Footer - transparent and seamless */
footer {
    background-color: transparent;
    background-image: none;
    border: none;
    margin: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    footer {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-lg);
    }
}

/* Main and footer connect seamlessly */
main {
    margin-bottom: 0;
    padding-bottom: 0;
}

footer::before,
footer::after {
    display: none;
    content: none;
}

/* Optimized backdrop blur - performance-focused */
[class*="backdrop-blur"] {
    background-color: rgba(5, 6, 20, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* Container transparency */
div[class*="max-w"],
div[class*="container"],
div[class*="mx-auto"],
main > div,
section > div {
    background-color: transparent;
    background-image: none;
}

/* Exception: Only allow backgrounds on specific card/article elements */
/* Cards and modals with backgrounds are intentional - no override needed */

/* Unified spacing within sections - Reduced */
/* Only apply margin to divs that are NOT container divs */
section > div:not([class*="max-w"]):not([class*="container"]):not([class*="mx-auto"]) {
    margin-bottom: var(--space-md);
}

section > div:last-child {
    margin-bottom: 0;
}

/* Exclude features section container from margin rules */
section[id="features"] > div[class*="max-w"] {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Ensure features section h2 and grid have proper spacing */
section[id="features"] > div[class*="max-w"] > h2 {
    margin-bottom: 3rem !important;
}

section[id="features"] > div[class*="max-w"] > .grid {
    margin-top: 0 !important;
}

.grid > * {
    margin-bottom: var(--space-sm);
}

/* Exclude features section grid from margin rules */
section[id="features"] .grid > * {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    section > div:not([class*="max-w"]):not([class*="container"]):not([class*="mx-auto"]) {
        margin-bottom: var(--space-lg);
    }
    .grid > * {
        margin-bottom: var(--space-md);
    }
    
    /* Exclude features section grid from margin rules on desktop too */
    section[id="features"] .grid > * {
        margin-bottom: 0 !important;
    }
}

/* FAQ items - seamless accordion */
.faq-item {
    margin: 0;
    padding: 0;
    display: block;
}

.faq-item button {
    border-radius: 0;
    margin: 0;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-item:first-child button {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item:last-child button {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item + .faq-item {
    margin-top: 0;
}


/* Add spacing between pricing cards - exclude FAQ items */
article[role="listitem"]:not(.faq-item) {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

article[role="listitem"]:not(.faq-item) > div:last-child {
    margin-top: auto;
}

/* Features section articles - no margin, spacing handled by grid gap */
section[id="features"] article[role="listitem"] {
    margin-bottom: 0 !important;
    min-height: auto !important;
}

@media (min-width: 1024px) {
    article[role="listitem"]:not(.faq-item) {
        margin-bottom: 2rem;
        min-height: 550px;
    }
    
    /* Features section articles - no margin on desktop */
    section[id="features"] article[role="listitem"] {
        margin-bottom: 0 !important;
        min-height: auto !important;
    }
}

/* Unified Typography Spacing */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--space-sm);
}

/* Features section heading - preserve Tailwind mb-12 */
section[id="features"] h2 {
    margin-bottom: 3rem !important;
}

h1 + p,
h2 + p,
h3 + p {
    margin-top: var(--space-md);
}

p + p {
    margin-top: var(--space-sm);
}

button + button {
    margin-left: var(--space-sm);
}

ul, ol {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

li + li {
    margin-top: var(--space-xs);
}

/* Content spacing utilities - Reduced */
.space-y-8 > * + * {
    margin-top: var(--space-md);
}

.space-y-6 > * + * {
    margin-top: var(--space-sm);
}

.space-y-10 > * + *,
.space-y-12 > * + * {
    margin-top: var(--space-lg);
}

/* HTML base layer */
html {
    background-color: #050614;
    height: 100%;
    min-height: 100%;
    background-image: none;
    margin: 0;
    padding: 0;
}

/* Main container */
main {
    background-color: transparent;
    background-image: none;
    position: relative;
    z-index: 1;
    overflow: visible;
    width: 100%;
}

/* Optimized image rendering */
img, video, iframe {
    image-rendering: auto;
}


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

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

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}


/* Optimized animations - GPU accelerated for 60fps */
.animate-float {
    animation: float 4s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.fade-in-up {
    animation: fadeInUp 0.6s var(--ease-out);
}

/* Loading overlay - visible until JS hides it (prevents FOUC on reload/first load) */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #050614;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease-out;
}

.app-loading.app-loading--hidden {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .app-loading {
        transition: none;
    }
}

/* Smooth page reveal after loading */
html {
    visibility: visible;
    background: #050614;
}

/* Body loading states - consolidated in critical CSS above */

/* Unified motion system - GPU accelerated */
button, a, [role="button"], .transition-all, [class*="hover:scale"], [class*="transition"] {
    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
    transition-timing-function: var(--ease-base);
    transition-duration: var(--transition-base);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    /* Improve touch targets */
    button, a[role="button"], [role="button"], a.button {
        min-height: 44px;
    }
    
    /* Better text readability */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        line-height: 1.6;
    }
    
    /* Prevent zoom on input focus */
    input, textarea, select {
        font-size: 16px;
    }
    
    /* Reduce animation complexity on mobile */
    .animate-float {
        animation-duration: 5s;
    }
    
    
    /* Better spacing for small screens */
    section {
        scroll-margin-top: 80px;
    }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
    h1 {
        font-size: 2rem;
    }
    
    .text-5xl {
        font-size: 2.5rem;
    }
}

/* Unified Typography System */
h1 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h3 {
    font-weight: 600;
    line-height: 1.3;
}

p {
    line-height: 1.6;
    font-weight: 400;
}

/* Consistent button typography */
button, a[role="button"] {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Touch manipulation for better mobile performance */
.touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


/* Optimize button rendering - minimal hardware acceleration */
button, a[class*="min-h"], a[aria-label*="instant access"] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Touch device optimizations */
@media (hover: none) {
    section[id="features"] article:hover {
        border-color: rgba(255, 255, 255, 0.1);
        background-color: rgba(5, 6, 20, 0.4);
    }
}

@media (max-width: 768px) {
    section[id="features"] article {
        outline: none;
    }
    
    section[id="features"] article:focus,
    section[id="features"] article:focus-within {
        border-color: rgba(255, 255, 255, 0.1);
        outline: none;
    }
}

/* Consistent button sizes - all CTA buttons */
button[aria-label*="instant access"],
a[aria-label*="instant access"],
button[aria-label*="Get instant"],
a[aria-label*="Get instant"],
a[href*="xyzxo.com"] {
    min-height: 56px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

@media (min-width: 640px) {
    button[aria-label*="instant access"],
    a[aria-label*="instant access"],
    button[aria-label*="Get instant"],
    a[aria-label*="Get instant"],
    a[href*="xyzxo.com"] {
        min-height: 56px;
        padding: 1.25rem 2rem;
    }
}

/* Secondary button font weights */
button[aria-label*="Learn more"],
button[aria-label*="How it works"],
button[aria-label*="How It Works"] {
    font-weight: 600;
}

html {
    scroll-behavior: smooth;
}

/* Mobile: Disable smooth scroll for better performance and native feel */
@media (max-width: 768px) {
    html {
        scroll-behavior: auto;
    }
}

/* Currency Selector Bar Styling - matches image design */
.currency-btn {
    background-color: transparent;
    color: rgba(255, 248, 240, 0.5);
    border: none;
    cursor: pointer;
    position: relative;
    min-width: 60px;
    font-weight: 500;
    transition: all var(--transition-base) var(--ease-base);
    outline: none;
}

.currency-btn:hover:not(.active) {
    color: rgba(255, 248, 240, 0.7);
}

.currency-btn.active {
    background-color: rgba(245, 169, 98, 0.3);
    color: #FFF8F0;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 169, 98, 0.2);
}

.currency-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.currency-btn:active {
    transform: scale(0.95);
    transition: transform var(--transition-fast) var(--ease-base);
}

/* Currency selector container - dark pill shape - Fixed dimensions prevent CLS */
[role="tablist"] {
    background-color: rgba(5, 6, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
}

/* Price update animation */
.price-amount, .price-original {
    transition: opacity var(--transition-base) var(--ease-base);
}

.price-amount.updating, .price-original.updating {
    opacity: 0.5;
}

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

/* Section entrance animation - optimized - GPU accelerated */
.section-enter {
    opacity: 0;
    transform: translateY(10px) translateZ(0);
}

.section-visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    transition: opacity var(--transition-slow) var(--ease-out), transform var(--transition-slow) var(--ease-out);
    will-change: transform, opacity;
}

/* FAQ Answer - Collapsed State (Default) - Fixed height prevents CLS */
.faq-item .faq-answer {
    display: block;
    max-height: 0;
    padding: 0 1.5rem;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    opacity: 0;
}

/* FAQ Answer - Expanded State */
.faq-item .faq-answer.open {
    max-height: 500px;
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    opacity: 1;
}

/* FAQ button - fixed dimensions prevent CLS */
.faq-item button {
    min-height: 3rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

/* FAQ answer - fixed max-height prevents CLS */
.faq-item .faq-answer {
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.faq-item .faq-answer.open {
    max-height: 500px;
    opacity: 1;
    padding: 0.5rem 1.5rem 1rem 1.5rem;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Button active states */
button:active, a:active {
    transform: scale(0.98);
}

/* Pricing card hover - unified motion - GPU accelerated - Fixed dimensions prevent CLS */
article[role="listitem"]:not(.faq-item) {
    transition: transform var(--transition-slow) var(--ease-out), box-shadow var(--transition-slow) var(--ease-out);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    article[role="listitem"]:not(.faq-item) {
        min-height: 550px;
    }
}

article[role="listitem"]:not(.faq-item):hover {
    transform: translateY(-2px) translateZ(0);
}

/* FAQ icon rotation */
.faq-item button .shrink-0 {
    transition: transform 0.15s ease-out;
}

.faq-item button[aria-expanded="true"] .shrink-0 {
    transform: rotate(180deg);
}

/* Smooth link hover underline */
a:not(button):hover {
    text-decoration-thickness: 2px;
}

/* Focus ring improvements */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Remove focus ring on mouse click, keep for keyboard */
.faq-item button:focus:not(:focus-visible) {
    outline: none;
}

/* Selection color */
::selection {
    background-color: rgba(245, 169, 98, 0.3);
    color: var(--text);
}

/* Disable text selection on FAQ buttons */
.faq-item button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.faq-item button:active {
    -webkit-tap-highlight-color: transparent;
}

/* Remove highlight on click */
.faq-item button:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.1);
}

.faq-item button:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.1);
}

.faq-item button:active {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Smooth scroll indicator */
@keyframes scroll-indicator {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Loading state for external links */
a[target="_blank"] {
    position: relative;
}

a[target="_blank"]:hover::after {
    content: '↗';
    position: absolute;
    right: -1.2em;
    opacity: 0.6;
    font-size: 0.8em;
}

/* Pricing card badge animation */
.relative > div[aria-label*="percent"] {
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1) translateZ(0); }
    50% { transform: scale(1.05) translateZ(0); }
}

/* Feature card icon hover - GPU accelerated */
.group:hover i[data-lucide] {
    transform: scale(1.1) translateZ(0);
    transition: transform 0.3s ease-out;
    will-change: transform;
    backface-visibility: hidden;
}

/* Smooth text selection */
p, span, li {
    user-select: text;
    -webkit-user-select: text;
}

/* Button loading state */
button.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg) translateZ(0); }
}

/* GPU acceleration for all animations */
button.loading::after {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* Pricing card interactions - GPU accelerated */
@media (min-width: 769px) {
    article[role="listitem"]:not(.faq-item):focus-within {
        transform: scale(1.02) translateZ(0);
    }
}

@media (max-width: 768px) {
    article[role="listitem"]:not(.faq-item):focus-within {
        transform: none;
    }
}

/* Pulse animation - GPU accelerated */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* No-JS: hide loading overlay so content is visible when JS is disabled */
.no-js .app-loading { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* No-JS message (content inside <noscript> - only in DOM when JS disabled) */
.no-script-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #F5A962;
    color: #050614;
    padding: 1rem;
    text-align: center;
    z-index: 9999;
    font-weight: bold;
}