/* Cursors - use browser defaults */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Account for fixed navbar height and top padding */
}

/* ========================================
   DARK THEME - Hafiz Mustafa x Majorelle
   Ottoman luxury meets Moroccan elegance
   ======================================== */

/* Color Palette Variables */
html.dark {
    --hm-bg-deep: #0d0908; /* Deep warm black */
    --hm-bg-primary: #1a1210; /* Rich burgundy-black */
    --hm-bg-secondary: #261c18; /* Warm brown */
    --hm-bg-elevated: #2d221d; /* Lighter brown */
    --hm-gold: #1433d2; /* Ottoman gold */
    --hm-gold-light: #4a66e6; /* Light gold */
    --hm-gold-dim: #8b7355; /* Muted gold */
    --hm-majorelle: #4169e1; /* Majorelle blue */
    --hm-majorelle-light: #6b8ef0; /* Light Majorelle */
    --hm-majorelle-deep: #2e4da7; /* Deep Majorelle */
    --hm-burgundy: #6b2c2c; /* Rich burgundy */
    --hm-burgundy-light: #8b4545; /* Light burgundy */
    --hm-cream: #f5ede0; /* Warm cream */
    --hm-cream-dim: #c9bba8; /* Muted cream */
    --hm-border: #3d2e26; /* Warm border */
    --hm-border-gold: rgb(212 175 55 / 30%); /* Gold border */

    color-scheme: dark;
}

html.dark body {
    background-color: var(--hm-bg-deep);
    color: var(--hm-cream);
}

html.dark .majorelle-bg {
    background: var(--hm-bg-deep) !important;
}

/* Moroccan geometric pattern overlay for hero */
html.dark .paper-grid-bg {
    background-color: var(--hm-bg-primary) !important;
    background-image:
        /* Moroccan star pattern */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0L33 12L45 12L36 19.5L39 31.5L30 24L21 31.5L24 19.5L15 12L27 12Z' fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.12'/%3E%3Cpath d='M0 30L3 42L15 42L6 49.5L9 61.5L0 54L-9 61.5L-6 49.5L-15 42L-3 42Z' fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.12' transform='translate(0,-30)'/%3E%3Cpath d='M60 30L63 42L75 42L66 49.5L69 61.5L60 54L51 61.5L54 49.5L45 42L57 42Z' fill='none' stroke='%23D4AF37' stroke-width='0.5' opacity='0.12' transform='translate(0,-30)'/%3E%3C/svg%3E"),
        /* Subtle grid */ linear-gradient(rgb(212 175 55 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(212 175 55 / 4%) 1px, transparent 1px) !important;
    background-size:
        120px 120px,
        60px 60px,
        60px 60px !important;
}

/* Navigation with gold accents */
html.dark nav {
    background: linear-gradient(135deg, rgb(26 18 16 / 95%), rgb(38 28 24 / 95%)) !important;
    border: 1px solid var(--hm-border-gold) !important;
    border-radius: 9999px !important;
    box-shadow:
        0 4px 20px rgb(0 0 0 / 40%),
        inset 0 1px 0 rgb(212 175 55 / 10%) !important;
}

html.dark #navLogo {
    filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(10deg);
}

html.dark nav a,
html.dark nav button,
html.dark nav span {
    color: var(--hm-cream) !important;
}

html.dark nav a:hover {
    color: var(--hm-gold) !important;
}

/* Headings with gold gradient */
html.dark h1 {
    background: linear-gradient(
        135deg,
        var(--hm-gold) 0%,
        var(--hm-gold-light) 50%,
        var(--hm-gold) 100%
    ) !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: var(--hm-cream) !important;
}

html.dark .text-blue-600 {
    color: var(--hm-gold) !important;
}

/* Text color overrides */
html.dark .text-gray-900 {
    color: var(--hm-cream) !important;
}

html.dark .text-gray-800 {
    color: #ede5d8 !important;
}

html.dark .text-gray-700 {
    color: var(--hm-cream-dim) !important;
}

html.dark .text-gray-600 {
    color: #a89a87 !important;
}

html.dark .text-gray-500 {
    color: #8b7d6b !important;
}

/* Backgrounds */
html.dark .bg-white {
    background-color: var(--hm-bg-primary) !important;
}

html.dark .bg-gray-50 {
    background-color: var(--hm-bg-deep) !important;
}

html.dark .bg-gray-100 {
    background-color: var(--hm-bg-secondary) !important;
}

/* Features section with ornate styling */
html.dark #features-section {
    background: var(--hm-bg-deep) !important;
}

/* Bento cards with gold borders */
html.dark .bento-card {
    background: linear-gradient(145deg, var(--hm-bg-primary), var(--hm-bg-secondary)) !important;
    border: 1px solid var(--hm-border-gold) !important;
    box-shadow:
        0 4px 20px rgb(0 0 0 / 40%),
        inset 0 1px 0 rgb(212 175 55 / 5%) !important;
}

html.dark .bento-card:hover {
    border-color: var(--hm-gold) !important;
    box-shadow:
        0 20px 40px rgb(0 0 0 / 50%),
        0 0 30px rgb(212 175 55 / 10%) !important;
}

/* Pricing section */
#pricing-section {
    background: transparent !important;
}

html.dark #pricing-section {
    background: transparent !important;
}

html.dark .pricing-card {
    background: linear-gradient(145deg, var(--hm-bg-primary), var(--hm-bg-secondary)) !important;
    border: 1px solid var(--hm-border-gold) !important;
}

html.dark .pricing-card:hover {
    border-color: var(--hm-gold) !important;
}

/* Inputs with warm styling */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: var(--hm-bg-secondary) !important;
    border: 1px solid var(--hm-border) !important;
    color: var(--hm-cream) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--hm-gold) !important;
    box-shadow: 0 0 0 3px rgb(212 175 55 / 15%) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--hm-gold-dim) !important;
}

/* Footer with pattern */
html.dark footer {
    background: var(--hm-bg-deep) !important;
    border-top: 1px solid var(--hm-border-gold) !important;
}

/* Buttons in dark mode - Majorelle blue accent */
html.dark button[style*='background: #2563EB'],
html.dark button[style*='background:#2563EB'] {
    background: linear-gradient(135deg, var(--hm-majorelle), var(--hm-majorelle-light)) !important;
}

/* CTA buttons with gold accent */
html.dark .pricing-toggle-btn.active {
    background: linear-gradient(135deg, var(--hm-majorelle), var(--hm-majorelle-deep)) !important;
    box-shadow: 0 4px 15px rgb(65 105 225 / 30%) !important;
}

/* Video carousel in dark mode */
html.dark #videoCarousel .rounded-2xl {
    border-color: var(--hm-border-gold) !important;
}

/* Ornate decorative corner for major sections */
html.dark .paper-grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--hm-gold) 20%,
        var(--hm-majorelle) 50%,
        var(--hm-gold) 80%,
        transparent 100%
    );
    opacity: 0.6;
}

/* Scroll bar styling */
html.dark::-webkit-scrollbar {
    width: 10px;
}

html.dark::-webkit-scrollbar-track {
    background: var(--hm-bg-deep);
}

html.dark::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--hm-gold-dim), var(--hm-border));
    border-radius: 5px;
}

html.dark::-webkit-scrollbar-thumb:hover {
    background: var(--hm-gold);
}

/* Selection color */
html.dark ::selection {
    background: rgb(212 175 55 / 30%);
    color: var(--hm-cream);
}

/* Theme toggle animation */
#themeToggle svg {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

#themeToggle:hover svg {
    transform: rotate(15deg);
}

/* Cursors - use browser defaults */

/* Critical CSS - immediate load without fade */
body {
    font-family: Inter, sans-serif;
    color: #1a1a1a;
    background: #fff;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    opacity: 0;
}

body.loaded {
    opacity: 1;
    transition: opacity 0.15s ease-out;
}

/* Nav appears instantly with body.loaded - no separate float-in needed */
.nav-float-in {
    opacity: 1;
}

/* Feature marquee scrolling animation */
.feature-marquee {
    animation: marqueeScroll 35s linear infinite;
    width: max-content;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.feature-marquee:hover {
    animation-play-state: paused;
}

/* Textured patchy gradient background */
body.majorelle-bg {
    background:
        radial-gradient(ellipse 80% 60% at 15% 8%, rgb(0 0 0 / 6%) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 15%, rgb(0 0 0 / 4%) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 60% 35%, rgb(0 0 0 / 5%) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 10% 50%, rgb(0 0 0 / 3%) 0%, transparent 50%),
        radial-gradient(ellipse 60% 45% at 90% 55%, rgb(0 0 0 / 6%) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 40% 75%, rgb(0 0 0 / 4%) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 75% 90%, rgb(0 0 0 / 5%) 0%, transparent 50%),
        radial-gradient(ellipse 45% 40% at 25% 95%, rgb(0 0 0 / 3%) 0%, transparent 50%), #fff;
    background-attachment: fixed;
}

/* Hand-drawn brush stroke underline effect - organic tapered brush strokes */
.hand-underline {
    position: relative;
    display: inline-block;
}

.hand-underline::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -4px;
    height: 12px;

    /* Black brush stroke with tapered ends and organic wave */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M1 9c8-3 18-5 32-4.5 20 .8 38 3.5 58 4.5 22 1 40 0 56-2 14-1.8 26-3.5 36-4.5 6-.6 12-.8 16-.5' stroke='%23000000' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    transform: rotate(-0.5deg);
}

/* Enable scrolling */
body,
html {
    overflow: hidden auto;
    min-height: 100vh;
    width: 100%;
}

/* Animated background with floating orbs */
.animated-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a35 100%);
    overflow: hidden;
}

.animated-bg::before,
.animated-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 20s ease-in-out infinite;
}

.animated-bg::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgb(37 99 235 / 40%), transparent);
    top: -100px;
    left: -100px;
    animation-delay: -5s;
}

.animated-bg::after {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgb(37 99 235 / 30%), transparent);
    bottom: -150px;
    right: -150px;
    animation-delay: -10s;
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, -50px) scale(1.1);
    }

    50% {
        transform: translate(-30px, 30px) scale(0.9);
    }

    75% {
        transform: translate(30px, 50px) scale(1.05);
    }
}

/* Navigation bar styling - pill/stadium shape with proper spacing */
nav {
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
    border-radius: 9999px !important;
}

/* Nav link color transitions */
nav a {
    transition: color 0.3s ease;
}

/* Logo container */
nav a {
    display: flex;
    align-items: center;
    color: #1a1a1a;
    text-decoration: none;
}

nav a img:not(#navLogoLight, #navLogoDark) {
    height: 32px !important;
    width: 32px !important;
    margin-right: 8px !important;
    transition: filter 0.3s ease;
    filter: none; /* Keep logo in its original color */
}

/* Pricing Slider Styles */
#pricing-slider {
    appearance: none;
    background: #e5e7eb;
    outline: none;
    height: 8px;
}

#pricing-slider::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    background: #2563eb;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(37 99 235 / 40%);
}

#pricing-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #2563eb;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 8px rgb(37 99 235 / 40%);
}

/* Pricing Card States */
.pricing-card {
    opacity: 1;
    transform: scale(1);
}

.pricing-card-active {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Slider Labels */
.slider-label {
    font-size: 0.875rem;
    opacity: 0.5;
}

.slider-label.active {
    opacity: 1;
    color: #2563eb;
    font-weight: 600;
}

/* Mobile Optimizations */
@media (width <= 640px) {
    /* Hero Section */
    h1,
    h2 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Pricing Slider Labels - Stack vertically on mobile */
    .slider-label {
        font-size: 0.65rem;
        line-height: 1.2;
        padding: 0 2px;
    }

    /* Pricing Section Heading */
    #pricing-section h2 {
        font-size: 2rem !important;
    }

    /* Navigation - Hide some links on very small screens */
    .nav-link {
        font-size: 0.75rem;
    }

    /* CTA Buttons */
    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (width <= 768px) {
    /* Pricing slider container */
    #pricing-slider + div {
        padding: 0 0.5rem;
    }

    /* Testimonial section - improve spacing */
    .testimonial-section {
        padding: 3rem 1rem;
    }

    /* Footer - better mobile layout */
    footer .grid {
        gap: 2rem !important;
    }
}

/* Bento Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.bento-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgb(0 0 0 / 30%);
}

.bento-card-wide {
    grid-column: span 2;
}

/* Alternating Bento Grid - 2 per row with alternating wide/narrow */
.bento-grid-alt {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
}

.bento-grid-alt > div {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bento-grid-alt > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgb(0 0 0 / 8%);
}

/* Row 1 & 3: wide left, narrow right (default 3fr 2fr) */
.bento-wide-left {
    grid-column: 1;
}

.bento-narrow-right {
    grid-column: 2;
}

/* Row 2 & 4: narrow left, wide right (swap proportions) */
.bento-narrow-left {
    grid-column: 1;
}

.bento-wide-right {
    grid-column: 2;
}

/* Row 2 & 4 need reversed proportions: narrow left (2fr), wide right (3fr) */

/* We achieve this by placing items on a 5-column grid */
.bento-grid-alt {
    grid-template-columns: repeat(5, 1fr);
}

.bento-wide-left {
    grid-column: 1 / 4;
}

.bento-narrow-right {
    grid-column: 4 / 6;
}

.bento-narrow-left {
    grid-column: 1 / 3;
}

.bento-wide-right {
    grid-column: 3 / 6;
}

/* Row 4: Three equal columns spanning the full 5-col grid */

/* Use subgrid math: cols 1-2 ≈ 33%, cols 2-4 ≈ 33%, cols 4-6 ≈ 33% is uneven.
   Instead, we break into 15 sub-columns for clean thirds within a 5-col grid. */
.bento-third {
    /* Fallback - overridden by nth-child selectors below */
    grid-column: span 1;
}

/* Target the 3 bento-third items: they are children 7, 8, 9 of the grid */
.bento-grid-alt > .bento-third:nth-child(7) {
    grid-column: 1 / 3;
}

.bento-grid-alt > .bento-third:nth-child(8) {
    grid-column: 3 / 5;
}

.bento-grid-alt > .bento-third:nth-child(9) {
    grid-column: 5 / 6;
}

/* Better approach: switch to 3-col for the last row using a separate wrapper isn't
   possible here, so we use a 15-column grid for perfect thirds + the 3:2 / 2:3 splits */
.bento-grid-alt {
    grid-template-columns: repeat(15, 1fr);
}

.bento-wide-left {
    grid-column: 1 / 10; /* 9/15 = 60% */
}

.bento-narrow-right {
    grid-column: 10 / 16; /* 6/15 = 40% */
}

.bento-narrow-left {
    grid-column: 1 / 7; /* 6/15 = 40% */
}

.bento-wide-right {
    grid-column: 7 / 16; /* 9/15 = 60% */
}

.bento-grid-alt > .bento-third:nth-child(7) {
    grid-column: 1 / 6; /* 5/15 = 33.3% */
}

.bento-grid-alt > .bento-third:nth-child(8) {
    grid-column: 6 / 11; /* 5/15 = 33.3% */
}

.bento-grid-alt > .bento-third:nth-child(9) {
    grid-column: 11 / 16; /* 5/15 = 33.3% */
}

/* 3D Model Bento Box */
.bento-model-box {
    padding: 0;
    background: #fff;
    position: relative;
}

.bento-model-box model-viewer {
    display: block;
}

.bento-model-box model-viewer::part(default-progress-bar) {
    display: none;
}

/* Responsive bento grid */
@media (width <= 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-card-wide {
        grid-column: span 2;
    }
}

@media (width <= 640px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-card-wide {
        grid-column: span 1;
    }

    .bento-grid-alt {
        grid-template-columns: 1fr;
    }

    .bento-wide-left,
    .bento-narrow-right,
    .bento-narrow-left,
    .bento-wide-right,
    .bento-grid-alt > .bento-third:nth-child(7),
    .bento-grid-alt > .bento-third:nth-child(8),
    .bento-grid-alt > .bento-third:nth-child(9) {
        grid-column: 1;
    }
}

/* Hero Tab Bar - Dark Theme */
.hero-tab-btn {
    padding: 8px 14px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: rgb(255 255 255 / 50%);
    font-size: 13px;
    font-weight: 500;
    font-family: Inter, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hero-tab-btn:hover {
    color: rgb(255 255 255 / 80%);
    background: rgb(255 255 255 / 6%);
}

.hero-tab-btn.active {
    background: #2563eb;
    color: white;
}

@media (width <= 640px) {
    .hero-tab-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Nav scroll state - handled via .site-nav inline styles */

/* USP fade-in animation */
.usp-item {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.usp-item.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Sequential animation delays */
.usp-item:nth-child(1).fade-in {
    transition-delay: 0.2s;
}

.usp-item:nth-child(2).fade-in {
    transition-delay: 0.5s;
}

.usp-item:nth-child(3).fade-in {
    transition-delay: 0.8s;
}

/* Sticky "Just do your work" heading */
.sticky-heading {
    position: sticky;
    top: 80px;
    z-index: 5;
    background: white;
    padding-bottom: 2rem;
}

/* Mobile menu removed - simplified navigation */

/* Enhanced form styles */
.auth-card {
    background: rgb(255 255 255 / 3%);
    backdrop-filter: blur(20px);
    border: 1px solid rgb(255 255 255 / 10%);
    box-shadow:
        0 8px 32px 0 rgb(31 38 135 / 37%),
        inset 0 1px 0 0 rgb(255 255 255 / 10%);
}

.google-btn {
    background: white;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgb(255 255 255 / 20%);
}

.continue-btn {
    background: #2563eb;
    transition: all 0.3s ease;
}

.continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgb(37 99 235 / 40%);
}

.continue-btn:disabled {
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
}

/* Email verification code input */
.code-inputs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 16px 0;
}

.code-input {
    width: 42px;
    height: 48px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    background: rgb(255 255 255 / 5%);
    border: 2px solid rgb(255 255 255 / 10%);
    border-radius: 8px;
    color: white;
    transition: all 0.3s ease;
}

.code-input:focus {
    border-color: #2563eb;
    background: rgb(37 99 235 / 10%);
    outline: none;
}

/* Hero content is revealed instantly with body.loaded - no per-element fade needed */
.fadeIn {
    opacity: 1;
}

/* Text gradient for headings */
.text-gradient {
    background: #2563eb;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Citron yellow accent gradient for highlights */
.text-accent-yellow {
    color: #facc15;
}

.text-gradient-yellow {
    background: linear-gradient(135deg, #facc15 0%, #fde047 50%, #fef08a 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Paper grid background for hero section - subtle like canvas view */
.paper-grid-bg {
    background-color: #fff;
    background-image:
        linear-gradient(rgb(37 99 235 / 10%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(37 99 235 / 10%) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Hero text enhancements */
#mainLanding h1 {
    font-weight: 800;
}

#mainLanding h2 {
    font-weight: 800;
}

/* Loading spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgb(255 255 255 / 30%);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

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

/* Carousel button styles */
.carousel-btn {
    background: rgb(37 99 235 / 15%) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgb(255 255 255 / 30%) !important;
    box-shadow:
        0 8px 32px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 20%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.carousel-btn:hover {
    background: rgb(37 99 235 / 30%) !important;
    border-color: rgb(37 99 235 / 60%) !important;
    box-shadow:
        0 12px 48px rgb(37 99 235 / 25%),
        inset 0 1px 0 rgb(255 255 255 / 30%) !important;
    transform: scale(1.08);
}

.carousel-btn:active {
    transform: scale(0.95);
}

/* Subtle shake animation for first card */
@keyframes subtleShake {
    0%,
    100% {
        translate: 0 0;
    }

    25% {
        translate: 2px 0;
    }

    75% {
        translate: -2px 0;
    }
}

.shake-hint {
    animation: subtleShake 2s ease-in-out 3;
}

/* Button Pop/Explosion Animation */
@keyframes popBurst {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0;
    }
}

@keyframes buttonPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

.power-up-glow {
    position: absolute;
    pointer-events: none;
    animation: popBurst 0.4s ease-out forwards;
    z-index: 1;
    border-radius: 12px;
    background: rgb(37 99 235 / 60%);
    box-shadow: 0 0 20px rgb(37 99 235 / 60%);
}

.power-up-glow::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    background: rgb(37 99 235 / 50%);
    animation: popBurst 0.4s ease-out 0.05s forwards;
    box-shadow: 0 0 25px rgb(37 99 235 / 50%);
}

.power-up-glow::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 14px;
    background: rgb(37 99 235 / 40%);
    animation: popBurst 0.4s ease-out 0.1s forwards;
    box-shadow: 0 0 30px rgb(37 99 235 / 40%);
}

.button-power-up {
    animation: buttonPulse 0.5s ease-out !important;
}

/* Prevent mobile tap highlight on buttons */
button {
    -webkit-tap-highlight-color: transparent;
}

/* Navigation link styles */
.nav-link,
.nav-link-visible {
    position: relative;
}

.nav-link::after,
.nav-link-visible::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #2563eb;
    transition: width 0.3s ease;
}

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

/* Mobile navigation - hide on small screens except login */
@media (width <= 1024px) {
    .nav-link {
        display: none;
    }

    /* Keep login and signup visible on mobile */
    .nav-link-visible {
        display: block;
    }
}

/* ========== Hero Section Responsive Styles ========== */
@media (width <= 768px) {
    #mainLanding {
        padding: 120px 5% 130px !important;
        gap: 24px !important;
    }

    #mainLanding > div:first-child {
        margin-top: 0 !important;
    }

    #mainLanding h1 {
        font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important;
        margin-bottom: 0 !important;
    }

    #mainLanding p.text-xl {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    #mainLanding h2 {
        font-size: 1.71rem !important;
        margin-top: 4px !important;
    }

    #interfaceCarousel {
        height: 286px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .carousel-nav {
        bottom: -70px !important;
        position: absolute !important;
    }

    .carousel-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
    }

    /* Make UI cards 10% larger on mobile */
    .ui-card {
        width: 209px !important;
        height: 286px !important;
    }

    .ui-card h3 {
        font-size: 17px !important;
    }

    .ui-card p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .ui-card button {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    /* Reduce preview container on mobile */
    .ui-card > div > div:first-of-type {
        height: 110px !important;
        margin-bottom: 10px !important;
    }
}

/* PC-specific adjustments */
@media (width >= 769px) {
    #mainLanding {
        gap: 48px !important;
        padding-top: 140px !important;
        padding-bottom: 100px !important;
    }

    #mainLanding h1 {
        font-size: clamp(2.7rem, 5.5vw, 4.95rem) !important;
    }

    #mainLanding h2 {
        font-size: 3.6rem !important;
    }

    /* Move carousel lower on desktop, keep text where it is */
    #interfaceCarousel {
        margin-top: 24px !important;
    }

    /* Position carousel buttons on sides for desktop */
    .carousel-nav {
        position: absolute !important;
        inset: 50% 0 auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        justify-content: space-between !important;
        width: calc(100% + 100px) !important;
        margin-left: -50px !important;
        gap: 0 !important;
        pointer-events: none !important;
    }

    .carousel-btn {
        pointer-events: auto !important;
    }
}

/* ========== Dashboard Preview Responsive Styles ========== */
@media (width <= 768px) {
    #dashboard-preview-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #dashboard-preview-section h2 {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    #dashboard-preview-section .dashboard-preview-container > div:first-child {
        margin-bottom: 16px !important;
    }

    #dashboard-preview-section .dashboard-preview-container > div:first-child > div {
        gap: 12px !important;
    }

    #dashboard-preview-section .dashboard-preview-container > div:first-child svg,
    #dashboard-preview-section .dashboard-preview-container > div:first-child img {
        width: 24px !important;
        height: 24px !important;
    }

    .dashboard-preview-img {
        border-radius: 8px !important;
        border: 1px solid rgb(37 99 235 / 15%) !important;
        box-shadow:
            0 0 0 0.5px rgb(37 99 235 / 8%),
            0 10px 30px -5px rgb(37 99 235 / 20%),
            0 5px 20px -5px rgb(37 99 235 / 15%),
            0 0 40px -10px rgb(37 99 235 / 10%) !important;
    }

    .dashboard-sparkle {
        opacity: 0.6;
        filter: blur(40px) !important;
        top: 60px !important;
    }
}

/* Tablet optimization */
@media (width >= 769px) and (width <= 1024px) {
    #dashboard-preview-section h2 {
        font-size: 28px !important;
    }

    #dashboard-preview-section .dashboard-preview-container > div:first-child svg,
    #dashboard-preview-section .dashboard-preview-container > div:first-child img {
        width: 26px !important;
        height: 26px !important;
    }

    .dashboard-preview-img {
        border-radius: 12px !important;
        max-width: 900px !important;
    }

    .dashboard-sparkle {
        filter: blur(50px) !important;
        top: 70px !important;
    }
}

/* Desktop enhancement */
@media (width >= 1025px) {
    .dashboard-preview-img {
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
    }

    .dashboard-preview-container:hover .dashboard-preview-img {
        transform: translateY(-4px);
        box-shadow:
            0 0 0 1px rgb(37 99 235 / 15%),
            0 30px 80px -15px rgb(37 99 235 / 40%),
            0 15px 50px -10px rgb(37 99 235 / 25%),
            0 0 100px -20px rgb(37 99 235 / 20%) !important;
    }
}

/* ========== Pricing Section Styles ========== */
.pricing-toggle-btn {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.pricing-toggle-btn:hover {
    color: #374151;
}

.pricing-toggle-btn.active {
    background: #2563eb;
    color: white;
    box-shadow: 0 2px 8px rgb(37 99 235 / 30%);
}

.pricing-toggle-btn.active:hover {
    color: white;
}

.pricing-card {
    display: flex;
    flex-direction: column;
}

/* Ensure pricing cards align horizontally */
.pricing-card > div:first-child {
    min-height: 80px;
}

.pricing-card > div:nth-child(2) {
    min-height: 110px;
}

.pricing-card-popular {
    transform: scale(1.02);
}

.pricing-card-popular > div:first-child {
    min-height: 90px;
}

@media (width <= 1024px) {
    .pricing-card-popular {
        transform: none;
    }
}

/* Price animation on change */
.price-amount {
    transition: opacity 0.2s ease;
}

.price-amount.changing {
    opacity: 0.5;
}

/* Octopus Ink Hover Effect - Request Demo Button */
.ink-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition:
        color 0.35s ease,
        border-color 0.35s ease;
}

.ink-btn .ink-blob {
    position: absolute;
    border-radius: 50%;
    background: #0a0a0a;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: -1;
}

.ink-btn.ink-active {
    color: white;
    border-color: #0a0a0a;
}

.ink-blob.ink-animate {
    animation: inkSplat var(--ink-duration) var(--ink-ease) var(--ink-delay) forwards;
}

@keyframes inkSplat {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.85;
    }

    40% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Carousel background split - white top half, grey bottom half */
.carousel-bg-split {
    z-index: 1;
}

.carousel-bg-split::before {
    content: '';
    position: absolute;
    inset: 50% -9999px -40px;
    background: transparent;
    z-index: -1;
}

#mathPaperBg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgb(0 0 0 / 4.5%) 39px,
            rgb(0 0 0 / 4.5%) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgb(0 0 0 / 4.5%) 39px,
            rgb(0 0 0 / 4.5%) 40px
        );
}