/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:239 84% 67%;
  --primary-fg:0 0% 100%;
  --gold:38 92% 50%;
  --gold-light:38 92% 65%;
  --cosmic-dark:222 47% 11%;
  --cosmic-deep:217 33% 17%;
  --starry:222 64% 5%;
  --bg:210 20% 98%;
  --fg:215 28% 17%;
  --card:0 0% 100%;
  --border:214 32% 91%;
  --muted-fg:215 16% 47%;
  --radius:.75rem;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:hsl(var(--bg));
  color:hsl(var(--fg));
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}
input,select,textarea{font:inherit}

/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:640px}
.center{text-align:center}
.grid-3{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.mb-4{margin-bottom:1rem}
.mb-12{margin-bottom:3rem}
.full{width:100%;display:block;text-align:center}

/* ===== Sections ===== */
.section-light{background:hsl(var(--bg));padding:6rem 0}
.section-dark{
  background:linear-gradient(180deg,hsl(var(--cosmic-dark)),hsl(var(--starry)));
  color:hsl(0 0% 95%);
  padding:6rem 0;
}

/* ===== Navbar ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s}
.navbar.scrolled{background:hsla(var(--cosmic-dark)/.95);backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,.3)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.nav-brand{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:hsl(var(--primary-fg))}
.nav-icon{width:28px;height:28px;color:hsl(var(--gold))}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{font-size:.875rem;font-weight:500;color:hsla(var(--primary-fg)/.8);transition:color .2s}
.nav-links a:hover{color:hsl(var(--gold))}
@media(min-width:768px){.nav-links{display:flex}.hamburger{display:none!important}}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;gap:5px;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:hsl(var(--primary-fg));border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile menu */
.mobile-menu{display:none;flex-direction:column;gap:1rem;padding:1rem 1.5rem 1.5rem;background:hsla(var(--cosmic-dark)/.98);backdrop-filter:blur(16px);border-top:1px solid hsla(var(--primary)/.2)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1rem;font-weight:500;color:hsla(var(--primary-fg)/.8);transition:color .2s}
.mobile-menu a:hover{color:hsl(var(--gold))}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,hsla(var(--cosmic-dark)/.6),hsla(var(--cosmic-dark)/.4),hsla(var(--cosmic-dark)/.8))}
.hero-stars{position:absolute;inset:0;pointer-events:none}
.hero-star{position:absolute;border-radius:50%;background:hsla(var(--gold)/.6);animation:twinkle 3s ease-in-out infinite}
.hero-content{position:relative;z-index:10;text-align:center;padding:0 1.5rem;max-width:900px}
.hero-tagline{color:hsl(var(--gold));font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.25em;margin-bottom:1.5rem}
.hero h1{font-size:clamp(2.5rem,8vw,5rem);font-weight:900;color:hsl(var(--primary-fg));line-height:1.1;margin-bottom:1.5rem}
.hero-sub{font-size:1.125rem;color:hsla(var(--primary-fg)/.7);max-width:600px;margin:0 auto 2.5rem}
.hero-login{margin-top:2rem;font-size:.875rem;color:hsla(var(--primary-fg)/.5)}
.hero-login a:hover{text-decoration:underline}

/* ===== Typography ===== */
.heading-cosmic{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:700;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--gold)));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:4rem;
}
h2.heading-cosmic{font-size:clamp(2rem,5vw,3rem)}
.heading-light{font-size:clamp(2rem,5vw,3rem);font-weight:700;color:hsl(var(--primary-fg));margin-bottom:1rem}
.gold-text{color:hsl(var(--gold))}
.muted{color:hsl(var(--muted-fg));line-height:1.7}
.muted-light{color:hsla(var(--primary-fg)/.5)}
.sub-light{color:hsla(var(--primary-fg)/.6);line-height:1.7;margin-bottom:1rem}
.small{font-size:.875rem}
h3{font-size:1.25rem;font-weight:700;margin-bottom:.75rem}

/* ===== Buttons ===== */
.btn-cosmic{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:.5rem;padding:1rem 2rem;font-size:1.125rem;font-weight:600;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(239 84% 55%));
  color:hsl(var(--primary-fg));border:none;
  box-shadow:0 0 20px hsla(var(--primary)/.3),0 4px 15px hsla(var(--primary)/.2);
  transition:all .3s;
}
.btn-cosmic:hover{
  box-shadow:0 0 30px hsla(var(--primary)/.5),0 0 60px hsla(var(--gold)/.2),0 8px 25px hsla(var(--primary)/.3);
  transform:translateY(-2px);
}
.btn-cosmic-outline{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;
  border:2px solid hsl(var(--gold));color:hsl(var(--gold));
  transition:all .3s;background:transparent;
}
.btn-cosmic-outline:hover{background:hsl(var(--gold));color:hsl(var(--cosmic-dark));box-shadow:0 0 20px hsla(var(--gold)/.3)}
.btn-cosmic-outline.sm{font-size:.875rem;padding:.5rem 1rem}

/* ===== Cards ===== */
.card-cosmic{
  border-radius:1rem;padding:2rem;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  box-shadow:0 4px 20px hsla(var(--cosmic-dark)/.05);
  transition:all .3s;
}
.card-cosmic:hover{transform:translateY(-4px);box-shadow:0 8px 30px hsla(var(--primary)/.1)}
.card-dark{
  border-radius:1rem;padding:2rem;
  background:linear-gradient(145deg,hsl(var(--cosmic-dark)),hsl(var(--cosmic-deep)));
  border:1px solid hsla(var(--primary)/.2);color:hsl(var(--primary-fg));
  transition:all .3s;
}
.card-dark:hover{transform:translateY(-4px);border-color:hsla(var(--gold)/.4);box-shadow:0 8px 30px hsla(var(--primary)/.2)}

/* Icon wrap */
.icon-wrap{width:4rem;height:4rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.bg-primary-10{background:hsla(var(--primary)/.1)}
.bg-primary-20{background:hsla(var(--primary)/.2)}
.icon{width:2rem;height:2rem}
.text-primary{color:hsl(var(--primary))}

/* Price */
.price{font-size:1.875rem;font-weight:700;color:hsl(var(--gold));margin-bottom:1.5rem}

/* Stars */
.stars{color:hsl(var(--gold));font-size:1.25rem;margin-bottom:1rem;letter-spacing:2px}

/* Testimonials */
.testimonial-text{color:hsla(var(--primary-fg)/.8);font-style:italic;margin-bottom:1.5rem;line-height:1.7}
.testimonial-author{font-weight:600;color:hsl(var(--primary-fg))}

/* Blog cards */
.card-blog{padding:0;overflow:hidden}
.card-img{overflow:hidden}
.card-img img{width:100%;height:12rem;object-fit:cover;transition:transform .5s}
.card-blog:hover .card-img img{transform:scale(1.1)}
.card-body{padding:1.5rem}

/* ===== Gallery Masonry ===== */
.masonry{columns:2;gap:1rem;column-gap:1rem}
@media(min-width:768px){.masonry{columns:3}}
@media(min-width:1024px){.masonry{columns:4}}
.masonry-item{break-inside:avoid;margin-bottom:1rem;overflow:hidden;border-radius:.75rem}
.masonry-item img{width:100%;height:auto;transition:transform .5s}
.masonry-item:hover img{transform:scale(1.1)}

/* ===== Form ===== */
.form-stack{display:flex;flex-direction:column;gap:1.25rem}
.form-stack input,.form-stack select,.form-stack textarea{
  width:100%;border-radius:.5rem;border:1px solid hsl(var(--border));
  background:hsl(var(--card));padding:.75rem 1rem;color:hsl(var(--fg));
  transition:all .2s;outline:none;
}
.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus{
  border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsla(var(--primary)/.2);
}
.form-stack textarea{resize:none;min-height:120px}

/* ===== Footer ===== */
.footer{border-top:1px solid hsla(var(--primary)/.1)}
.footer .container{padding-top:4rem;padding-bottom:4rem}
.footer-grid{align-items:start}
.footer-heading{font-weight:600;color:hsl(var(--primary-fg));margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:.5rem}
.footer-links a{font-size:.875rem;color:hsla(var(--primary-fg)/.5);transition:color .2s}
.footer-links a:hover{color:hsl(var(--gold))}
.social-icons{display:flex;gap:1rem}
.social-btn{
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:hsla(var(--primary)/.2);
  display:flex;align-items:center;justify-content:center;
  color:hsla(var(--primary-fg)/.6);transition:all .2s;
}
.social-btn:hover{background:hsla(var(--gold)/.2);color:hsl(var(--gold))}
.footer-bottom{border-top:1px solid hsla(var(--primary)/.1);padding:1.5rem 0}
.footer-bottom-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:.75rem;color:hsla(var(--primary-fg)/.4)}
@media(min-width:768px){.footer-bottom-inner{flex-direction:row;justify-content:space-between}}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{color:hsla(var(--primary-fg)/.4);transition:color .2s}
.footer-legal a:hover{color:hsl(var(--gold))}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:hsl(142 71% 45%);color:#fff;padding:1rem 2rem;border-radius:.75rem;
  font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.3);
  opacity:0;transition:all .4s;z-index:100;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Scroll Animation ===== */
.scroll-anim>*{opacity:0;transform:translateY(30px);transition:opacity .7s ease-out,transform .7s ease-out}
.scroll-anim.visible>*{opacity:1;transform:translateY(0)}
.scroll-anim .grid-3>*{transition-delay:var(--delay,0s)}

/* ===== Animations ===== */
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}