:root{
  --background:oklch(0.16 0.008 255);
  --foreground:oklch(0.96 0.003 250);
  --muted-foreground:oklch(0.68 0.012 250);
  --secondary:oklch(0.26 0.012 255);
  --accent:oklch(0.78 0.13 205);
  --accent-foreground:oklch(0.16 0.008 255);
  --border:oklch(0.32 0.012 255);
  --card:oklch(0.2 0.01 255);
  --radius:0.9rem;
  --gradient-chrome:linear-gradient(180deg,oklch(0.98 0.003 250) 0%,oklch(0.82 0.01 250) 28%,oklch(0.55 0.012 255) 52%,oklch(0.88 0.008 250) 74%,oklch(0.65 0.012 255) 100%);
  --gradient-accent:linear-gradient(135deg,oklch(0.82 0.13 205),oklch(0.7 0.15 280));
  --glow-accent:0 0 60px -10px oklch(0.78 0.13 205 / 0.55);
  --shadow-elevate:0 30px 60px -20px oklch(0.05 0.01 255 / 0.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:"Manrope",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Sora",sans-serif;line-height:1.05}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:80rem;margin:0 auto;padding:0 1.25rem}

.bg-grid{background-image:linear-gradient(oklch(1 0 0 / 0.035) 1px,transparent 1px),linear-gradient(90deg,oklch(1 0 0 / 0.035) 1px,transparent 1px);background-size:46px 46px}
.text-chrome{background:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;color:transparent}

/* HEADER */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;padding:1.25rem 0;transition:all .3s ease}
.site-header.scrolled{padding:.75rem 0;background:oklch(0.16 0.008 255 / 0.7);backdrop-filter:blur(14px);border-bottom:1px solid oklch(0.32 0.012 255 / 0.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-logo{height:2rem;width:auto}
.brand-tag{font-size:.75rem;text-transform:uppercase;letter-spacing:.35em;color:var(--muted-foreground)}
.nav{display:none;gap:2rem}
.nav a{font-size:.875rem;font-weight:500;color:var(--muted-foreground);transition:color .2s}
.nav a:hover{color:var(--foreground)}
@media(min-width:768px){.nav{display:flex}}
.btn-ghost{border:1px solid var(--border);background:oklch(0.26 0.012 255 / 0.6);padding:.5rem 1.25rem;border-radius:999px;font-size:.875rem;font-weight:600;transition:all .2s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:7rem}
.glow-orb{position:absolute;top:-8rem;left:50%;transform:translateX(-50%);width:36rem;height:36rem;border-radius:999px;filter:blur(120px);background:var(--gradient-accent);opacity:.35;animation:pulse 9s ease-in-out infinite}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,transparent,var(--background))}
.hero-grid{position:relative;display:grid;gap:3rem;align-items:center;padding-bottom:5rem}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:oklch(0.26 0.012 255 / 0.5);padding:.375rem 1rem;border-radius:999px;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.25em;color:var(--muted-foreground)}
.pill-dot{width:.375rem;height:.375rem;border-radius:999px;background:var(--accent)}
.hero-title{margin-top:1.5rem;font-size:clamp(3rem,8vw,4.5rem);font-weight:800}
.hero-sub{margin-top:1.5rem;max-width:28rem;font-size:1.125rem;color:var(--muted-foreground)}
.hero-cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:1rem}
.btn-accent{background:var(--accent);color:var(--accent-foreground);padding:.75rem 1.75rem;border-radius:999px;font-size:.875rem;font-weight:600;box-shadow:var(--glow-accent);transition:transform .2s}
.btn-accent:hover{transform:scale(1.03)}
.btn-outline{border:1px solid var(--border);padding:.75rem 1.75rem;border-radius:999px;font-size:.875rem;font-weight:600;transition:border-color .2s}
.btn-outline:hover{border-color:var(--foreground)}
.hero-art{display:flex;justify-content:center}
.hero-art img{width:clamp(16rem,32vw,28rem);filter:drop-shadow(0 25px 40px oklch(0 0 0 / 0.5))}
.float{animation:float 6s ease-in-out infinite}

/* SECTION */
.section{padding:6rem 1.25rem}
.section-head{display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;align-items:flex-start}
@media(min-width:768px){.section-head{flex-direction:row;align-items:flex-end}}
.eyebrow{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.3em;color:var(--accent)}
.section-title{margin-top:.75rem;font-size:clamp(2.25rem,5vw,3rem);font-weight:700}
.section-desc{margin-top:.75rem;max-width:32rem;color:var(--muted-foreground)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-btn{border:1px solid var(--border);background:transparent;color:var(--muted-foreground);padding:.5rem 1rem;border-radius:999px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}
.filter-btn:hover{color:var(--foreground)}
.filter-btn.active{border-color:var(--accent);background:oklch(0.78 0.13 205 / 0.1);color:var(--accent)}

/* GRID */
.grid{margin-top:3rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.card-wrap[hidden]{display:none}
.card{display:block;overflow:hidden;border-radius:1.5rem;border:1px solid var(--border);background:oklch(0.2 0.01 255 / 0.5);backdrop-filter:blur(12px);transition:all .5s}
.card.available{box-shadow:var(--shadow-elevate)}
.card.available:hover{transform:translateY(-.5rem);border-color:oklch(0.78 0.13 205 / 0.6)}
.card.soon{opacity:.7}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden}
.card-media>img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.card.available:hover .card-media>img{transform:scale(1.05)}
.media-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;height:100%;color:var(--muted-foreground)}
.spark{font-size:2rem;color:oklch(0.78 0.13 205 / 0.7)}
.soon-label{font-size:.875rem;text-transform:uppercase;letter-spacing:.3em}
.badge{position:absolute;left:1rem;top:1rem;border:1px solid oklch(0.32 0.012 255 / 0.7);background:oklch(0.16 0.008 255 / 0.6);backdrop-filter:blur(6px);padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:500}
.corner{position:absolute;right:1rem;top:1rem;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent);color:var(--accent-foreground);opacity:0;transition:opacity .3s}
.card.available:hover .corner{opacity:1}
.card-body{padding:1.25rem}
.card-body h3{font-size:1.25rem;font-weight:600}
.card-body p{margin-top:.375rem;font-size:.875rem;color:var(--muted-foreground)}
.card-link{margin-top:1rem;display:inline-flex;gap:.375rem;font-size:.875rem;font-weight:500;color:var(--accent)}

/* ABOUT */
.about{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.about-bg{position:absolute;inset:0;opacity:.4}
.about-grid{position:relative;display:grid;gap:3.5rem;padding:6rem 1.25rem}
@media(min-width:1024px){.about-grid{grid-template-columns:repeat(2,1fr)}}
.about-p{margin-top:1.5rem;font-size:1.125rem;color:var(--muted-foreground)}
.values{display:grid;gap:1.25rem}
.value{display:flex;gap:1rem;border:1px solid var(--border);background:oklch(0.2 0.01 255 / 0.5);backdrop-filter:blur(12px);border-radius:1rem;padding:1.5rem}
.value-icon{flex-shrink:0;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:.75rem;background:oklch(0.78 0.13 205 / 0.1);color:var(--accent);font-size:1.3rem}
.value h3{font-size:1.125rem;font-weight:600}
.value p{margin-top:.25rem;color:var(--muted-foreground)}

/* FOOTER */
.footer{padding:4rem 1.25rem}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
.footer-logo{height:2.5rem;width:auto}
.footer-inner p{max-width:28rem;color:var(--muted-foreground)}
.copyright{margin-top:3rem;border-top:1px solid var(--border);padding-top:1.5rem;text-align:center;font-size:.875rem;color:var(--muted-foreground)}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.35}50%{transform:translateX(-50%) scale(1.15);opacity:.55}}
@media(prefers-reduced-motion:reduce){.float,.glow-orb{animation:none}.reveal{opacity:1;transform:none}}