/* ── Custom cursor disabled — using native cursor ── */
.cursor-blob, .cursor-label { display: none !important; }

/* ── Grain enhanced + drift ── */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); animation: grainDrift 8s steps(6) infinite; }
@keyframes grainDrift {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2%, 1%); }
    40% { transform: translate(1%, -2%); }
    60% { transform: translate(-1%, 2%); }
    80% { transform: translate(2%, 1%); }
}

/* ── Page fade-in + view transitions ── */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn 0.5s ease-out both; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.22s ease both; }
::view-transition-new(root) { animation: vtIn 0.4s ease both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Gradient mesh backdrop ── */
.mesh-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; z-index: 0; overflow: hidden; }
.mesh-bg::before, .mesh-bg::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); }
.mesh-bg::before { width: 520px; height: 520px; background: radial-gradient(circle, rgba(37,99,235,0.22), transparent 70%); top: -10%; left: -8%; animation: meshFloat 14s ease-in-out infinite; }
.mesh-bg::after { width: 460px; height: 460px; background: radial-gradient(circle, rgba(124,58,237,0.16), transparent 70%); bottom: -8%; right: -6%; animation: meshFloat 18s ease-in-out infinite reverse; }
@keyframes meshFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.08); }
    66% { transform: translate(-25px, 18px) scale(0.96); }
}

/* ── Split-text reveal (per-word mask so natural wrap works) ── */
.split-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.15; }
.split-word { display: inline-block; transform: translateY(110%); will-change: transform; }

/* ── Magnetic CTA ── */
.magnetic { display: inline-flex; position: relative; will-change: transform; }
.magnetic-inner { display: inline-flex; align-items: center; will-change: transform; }

/* ── Section reveal mask ── */
.reveal-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.reveal-mask.in { clip-path: inset(0 0 0 0); }

/* ── CTA shine sweep ── */
.cta-primary { position: relative; overflow: hidden; }
.cta-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s ease; pointer-events: none; }
.cta-primary:hover::before { transform: translateX(100%); }

/* ── Glass nav scroll polish ── */
.glass-nav { transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.glass-nav.scrolled { background: rgba(255,255,255,0.96); border-bottom-color: rgba(0,0,0,0.06); box-shadow: 0 6px 24px -8px rgba(0,0,0,0.08); }

/* ── Underline reveal on nav links ── */
nav a.transition { position: relative; }
nav a.transition::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1.5px; background: currentColor; transition: width 0.3s cubic-bezier(0.4,0,0.2,1); }
nav a.transition:hover::after { width: 100%; }

/* ── SVG arrow nudge ── */
a[href]:has(svg) svg { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
a[href]:hover svg { transform: translateX(3px); }

/* ─────────────────────────────────────────────
   Mobile optimizations (≤ 767px)
   ─────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Tighter section padding on mobile (Tailwind py-32 etc. is too much) */
    section[class*="py-32"], section[class*="py-36"], section[class*="py-40"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    section[class*="py-20"], section[class*="py-24"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    section[class*="py-16"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    /* Tighter horizontal padding */
    section[class*="px-8"], footer[class*="px-8"], nav[class*="px-8"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Reduce eyebrow / huge titles slightly */
    h1[class*="text-6xl"], h1[class*="text-7xl"], h1[class*="text-8xl"],
    h2[class*="text-6xl"], h2[class*="text-7xl"], h2[class*="text-8xl"] {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.03em !important;
    }
    h1[class*="text-5xl"], h2[class*="text-5xl"], h3[class*="text-5xl"] {
        font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
        line-height: 1.1 !important;
    }
    h2[class*="text-4xl"], h3[class*="text-4xl"] {
        font-size: clamp(1.65rem, 6vw, 2.1rem) !important;
        line-height: 1.15 !important;
    }
    .title-main {
        font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    /* Body / sub-text shrink */
    .hero-sub-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    p[class*="text-lg"], p[class*="text-xl"] {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* Tap targets — comfortable button sizing */
    a[class*="rounded-full"][class*="px-10"], button[class*="rounded-full"][class*="px-10"] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
        font-size: 0.85rem !important;
    }

    /* Floating CTA — smaller on mobile */
    #float-cta {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 10px !important;
    }

    /* Lighter visual effects (battery + perf on mobile) */
    .mesh-bg { opacity: 0.3 !important; }
    .mesh-bg::before, .mesh-bg::after { animation: none !important; filter: blur(50px) !important; }
    body::after { animation: none !important; opacity: 0.03 !important; }

    /* Marquee speed up slightly on mobile (smaller viewport) */
    .marquee-track { animation-duration: 22s !important; }
    .marquee-item { padding: 0 1.5rem !important; }

    /* Tighter container default for max-w-* sections */
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Better mobile nav menu — fade in */
    #mob-nav { animation: mobNavIn 0.22s ease both; }
    @keyframes mobNavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
}

/* ─────────────────────────────────────────────
   Very small phones (≤ 380px)
   ─────────────────────────────────────────── */
@media (max-width: 380px) {
    nav.glass-nav { padding: 0.85rem 1rem !important; }
    h1, .title-main { font-size: clamp(1.65rem, 8.5vw, 2.2rem) !important; }
}