/* Inter font-face (critical - only 3 files: 400, 600, 700; map 500→400, 800→700) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../vendor/fonts/inter/inter-400.0fe692eae35e.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("../vendor/fonts/inter/inter-400.0fe692eae35e.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../vendor/fonts/inter/inter-600.1bf8bc88e871.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/fonts/inter/inter-700.d1f00f171f83.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url("../vendor/fonts/inter/inter-700.d1f00f171f83.woff2") format('woff2')}
/* Critical layout - header, body, main structure */
*,::after,::before{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;min-height:100vh;display:flex;flex-direction:column}
.flex-1{flex:1 1 0%}
.flex{display:flex}
.flex-col{flex-direction:column}
.min-h-screen{min-height:100vh}
.bg-white{background-color:#fff}
/* Header critical styles (always visible above fold) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(226,232,240,0.6);transition:all .3s ease}
.header-inner{max-width:1280px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:64px}
.header-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.header-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.125rem}
.header-logo-text{font-weight:700;font-size:1.125rem;color:#0f172a;letter-spacing:-0.02em}
.header-nav{display:none;align-items:center;gap:2px}
.header-actions{display:flex;align-items:center;gap:6px}
.header-hamburger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:#475569;background:transparent;border:none;cursor:pointer}
@media(min-width:640px){.header-inner{padding:0 1.5rem}}
@media(min-width:1024px){.header-nav{display:flex}.header-hamburger{display:none}}
/* Prevent layout shift for hero text */
.hero-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1.1;color:#f8fafc;letter-spacing:-0.03em;margin-bottom:1.5rem}
.hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:#94a3b8;line-height:1.7;max-width:580px;margin:0 auto 2.5rem;font-weight:400}
/* Prevent CLS for quick-tags row */
.quick-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:36px}
.quick-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:0.8125rem;font-weight:500;text-decoration:none;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#94a3b8}
/* Hero search bar dimensions to prevent layout shift */
.hero-search-wrap{max-width:640px;margin:0 auto 3rem;position:relative}
.hero-search-input{width:100%;padding:18px 140px 18px 52px;border-radius:16px;font-size:1rem;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06);color:#f1f5f9;outline:none}
/* Hero badge CLS prevention */
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:100px;font-size:0.8125rem;font-weight:600;color:#93c5fd;margin-bottom:2rem}
/* Hero section critical dimensions (prevents CLS 0.634 from hero-section + main) */
.hero-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);padding:4rem 1rem 3rem;text-align:center}
@media(min-width:640px){.hero-section{padding:5rem 1.5rem 4rem}}
@media(min-width:768px){.hero-section{padding:6rem 2rem 5rem}}
/* Hero glow orbs: reserve space, prevent layout shift */
.hero-glow-1,.hero-glow-2,.hero-glow-3{position:absolute;border-radius:50%;pointer-events:none}
.hero-glow-1{width:500px;height:500px;top:-100px;right:-100px}
.hero-glow-2{width:400px;height:400px;bottom:-80px;left:-100px}
.hero-glow-3{width:300px;height:200px;bottom:20%;left:50%}
/* Hero content wrapper */
.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
/* Search button CLS prevention */
.hero-search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:10px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:12px;font-size:0.875rem;font-weight:600;cursor:pointer}
.hero-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#64748b;font-size:1.125rem;pointer-events:none}
/* Additional critical Tailwind utilities used in hero/body/main (prevent CLS when Tailwind loads) */
.max-w-7xl{max-width:80rem}.max-w-5xl{max-width:64rem}.mx-auto{margin-inline:auto}
.px-4{padding-inline:1rem}.text-center{text-align:center}
.w-full{width:100%}.py-16{padding-block:4rem}
.relative{position:relative}.overflow-hidden{overflow:hidden}
@media(min-width:640px){.sm\:px-6{padding-inline:1.5rem}}
@media(min-width:1024px){.lg\:px-8{padding-inline:2rem}}
/* Below-fold content: improve initial render by skipping off-screen layout */
.site-footer{content-visibility:auto;contain-intrinsic-size:auto 500px}
/* Hero grid pattern: MUST be absolute from first paint to prevent CLS 0.321 */
.hero-grid-pattern{position:absolute;inset:0;pointer-events:none}
/* Share popup/fab: MUST be fixed positioned from first paint to prevent CLS 0.121 */
.share-popup{position:fixed;bottom:88px;right:24px;z-index:44;opacity:0;visibility:hidden;transform:translateY(12px) scale(0.95)}
.share-fab{position:fixed;bottom:24px;right:24px;z-index:45;width:52px;height:52px;border-radius:50%}
.share-overlay{position:fixed;inset:0;z-index:43;display:none}
/* Mobile drawer: MUST be fixed + off-screen from first paint to prevent CLS 0.008 */
.mobile-drawer{position:fixed;top:0;bottom:0;left:0;width:320px;max-width:85vw;z-index:70;transform:translateX(-100%)}
.mobile-drawer-overlay{position:fixed;inset:0;z-index:60;opacity:0;visibility:hidden}
.drawer-auth{padding:0 12px 20px}
/* Suppress ALL transitions during initial load to prevent non-composited animation warnings.
   When async CSS loads and changes styles (border-radius, padding, font-size), transitions
   cause the browser to animate those non-GPU properties. This class is removed after CSS loads. */
.no-transitions,.no-transitions *,.no-transitions *::before,.no-transitions *::after{transition:none!important;animation:none!important}