/* === Font fallbacks with size-adjust to prevent CLS === */
@font-face{font-family:'Inter-fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:107.64%;ascent-override:90%;descent-override:22.48%;line-gap-override:0%}
@font-face{font-family:'Outfit-fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:108%;ascent-override:100%;descent-override:28%;line-gap-override:0%}
/* === Reset + base === */
:root{--bg:220 60% 4%;--fg:210 40% 98%;--primary:160 84% 45%;--muted:215 20% 65%;--border:220 30% 16%;--card:220 50% 7%;--cyan:185 100% 50%}
*{margin:0;padding:0;box-sizing:border-box}
body{background:hsl(var(--bg));color:hsl(var(--fg));font-family:'Inter Variable',Inter,'Inter-fallback',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:'Outfit Variable',Outfit,'Outfit-fallback',system-ui,sans-serif}
#root{min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* === Shell: header === */
.sh-hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:hsla(220,60%,4%,0.95);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid hsla(220,30%,16%,0.3)}
.sh-c{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.sh-c{padding:0 1.5rem}}
@media(min-width:1024px){.sh-c{padding:0 2rem}}
.sh-hdr-in{display:flex;align-items:center;justify-content:space-between;height:4rem}
.sh-logo{display:flex;align-items:center;gap:0.75rem}
.sh-logo-ic{width:2.25rem;height:2.25rem;border-radius:0.75rem;background:linear-gradient(135deg,hsl(160,84%,45%),hsl(185,100%,50%));display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px hsla(160,84%,45%,0.3)}
.sh-logo-tx{font-size:1.25rem;font-weight:700;letter-spacing:-0.025em;font-family:'Outfit Variable',Outfit,'Outfit-fallback',system-ui,sans-serif}
.sh-nav{display:none}
@media(min-width:1024px){.sh-nav{display:flex;align-items:center;gap:0.5rem}}
.sh-nav a{padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;color:hsl(var(--muted));transition:color 0.15s}
.sh-cta-wrap{display:none}
@media(min-width:1024px){.sh-cta-wrap{display:flex;align-items:center;gap:1rem}}
.sh-cta{display:inline-flex;align-items:center;padding:0.5rem 1rem;background:linear-gradient(135deg,hsl(160,84%,45%),hsl(185,100%,50%));color:hsl(var(--bg));border-radius:0.5rem;font-weight:600;font-size:0.875rem;border:none;cursor:pointer}

/* === Shell: hero === */
.sh-hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;padding-top:5rem}
.sh-hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,hsl(var(--bg)),hsl(var(--bg)))}
.sh-hero-glow{position:absolute;top:25%;left:0;width:500px;height:500px;background:hsla(160,84%,45%,0.1);border-radius:50%;filter:blur(150px)}
.sh-hero-ct{position:relative;z-index:10;padding:4rem 0}
.sh-hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.sh-hero-grid{grid-template-columns:1fr 1fr;gap:4rem}}

/* Hero heading */
.sh-h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:700;line-height:1.1;letter-spacing:-0.025em;margin-bottom:1rem;opacity:0;animation:sh-fi .4s ease-out .1s forwards}
.sh-h1 .acc{color:hsl(var(--primary))}

/* Hero subtitle */
.sh-sub{font-size:clamp(1.125rem,2.5vw,1.5rem);color:hsl(var(--muted));margin-bottom:1.5rem;opacity:0;animation:sh-fi .4s ease-out .15s forwards}
.sh-sub b{color:hsl(var(--fg));font-weight:600}

/* Feature pills */
.sh-feats{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:2rem;opacity:0;animation:sh-fi .4s ease-out .2s forwards}
.sh-feat{display:flex;align-items:center;gap:0.75rem;font-size:0.875rem;color:hsl(var(--muted))}
.sh-feat svg{flex-shrink:0;color:hsl(var(--primary))}

/* CTA button */
.sh-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 2rem;background:linear-gradient(135deg,hsl(160,84%,45%),hsl(185,100%,50%));color:hsl(var(--bg));border-radius:0.75rem;font-weight:700;font-size:0.875rem;border:none;cursor:pointer;box-shadow:0 0 30px hsla(160,84%,45%,0.4);opacity:0;animation:sh-fi .4s ease-out .25s forwards}

/* Pricing cards (desktop only) */
.sh-cards{display:none}
@media(min-width:1024px){.sh-cards{display:flex;align-items:start;justify-content:center;gap:1rem;position:relative;opacity:0;animation:sh-fi .4s ease-out .3s forwards}}
.sh-card{width:14rem;background:hsla(220,50%,7%,0.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid hsla(220,30%,16%,0.5);border-radius:0.75rem;padding:1.25rem}
.sh-card-pro{border-color:hsla(185,100%,50%,0.3);box-shadow:0 0 30px hsla(188,95%,43%,0.15)}
.sh-card-badge{display:inline-block;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.625rem;font-weight:700;text-transform:uppercase}
.sh-card-badge-lite{background:hsla(160,84%,45%,0.2);color:hsl(var(--primary))}
.sh-card-badge-pro{background:linear-gradient(135deg,hsl(185,100%,50%),hsl(var(--primary)));color:#fff;position:absolute;top:-0.75rem;left:50%;transform:translateX(-50%);padding:0.25rem 0.75rem;box-shadow:0 0 20px hsla(160,84%,45%,0.3)}
.sh-card-ram{font-size:2.25rem;font-weight:700;font-family:'Outfit Variable',Outfit,'Outfit-fallback',system-ui,sans-serif}
.sh-card-price{font-size:1.5rem;font-weight:700;font-family:'Outfit Variable',Outfit,'Outfit-fallback',system-ui,sans-serif;color:hsl(var(--primary))}
.sh-card-price-pro{color:hsl(var(--cyan))}

@keyframes sh-fi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}