:root{
  --mint:#bfeee0;
  --peach:#ffd2c8;
  --cream:#fff7eb;
  --lav:#e3d7ff;
  --ink:#1f2937;
  --muted:#5b6474;
  --accent:#7c5cff;
  --success:#37b289;
  --shadow: 0 10px 30px rgba(31,41,55,.08);
  --radius: 18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:linear-gradient(180deg,var(--cream),#ffffff 30%, var(--mint) 120%);
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
.container{width:min(1200px,92%); margin-inline:auto}

/* Header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.7); box-shadow:0 6px 20px rgba(0,0,0,.04)
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo{
  width:42px;height:42px; border-radius:14px; background:linear-gradient(135deg,var(--mint),var(--lav));
  display:grid;place-items:center; box-shadow:var(--shadow);
}
.logo svg{width:24px;height:24px}
.brand h1{font-size:1.15rem; margin:0; font-weight:800; letter-spacing:.2px}
.nav a.link{padding:10px 14px; border-radius:12px; font-weight:700; color:var(--muted)}
.nav a.link:hover{background:var(--cream); color:var(--ink); transition:.25s}
.cta{background:var(--accent); color:white; padding:10px 16px; border-radius:14px; font-weight:800; box-shadow:0 8px 16px rgba(124,92,255,.25); transform:translateY(0); transition:.25s}
.cta:hover{transform:translateY(-2px)}

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:64px 0 40px}
.hero h2{font-size:clamp(1.8rem,3.8vw,3rem); margin:.2rem 0; font-weight:900}
.tag{display:inline-flex; align-items:center; gap:8px; background:var(--peach); padding:8px 12px; border-radius:999px; font-weight:800; color:#7a4b3f}
.hero p{font-size:1.05rem; color:var(--muted); max-width:56ch}
.hero-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:16px; font-weight:800; box-shadow:var(--shadow); border:2px solid transparent; cursor:pointer; transition:.2s}
.btn-primary{background:var(--accent); color:white}
.btn-primary:hover{filter:saturate(110%); transform:translateY(-2px)}
.btn-ghost{background:white; color:var(--ink)}
.btn-ghost:hover{border-color:var(--mint)}
.hero-visual{
  position:relative; isolation:isolate; padding:14px; border-radius:24px; background:linear-gradient(135deg,var(--lav),var(--mint)); box-shadow:var(--shadow)
}
.bubble{position:absolute; border-radius:999px; filter:blur(6px); opacity:.6}
.b1{width:110px;height:110px; background:var(--peach); top:-18px; right:20px; animation:float 6s ease-in-out infinite}
.b2{width:80px;height:80px; background:var(--cream); bottom:-14px; left:-10px; animation:float 7s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Sections */
section{padding:56px 0}
.section-title{font-size:1.8rem; margin:0 0 10px; font-weight:900}
.section-sub{margin:0 0 24px; color:var(--muted)}

/* Featured products */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.product{
  background:white; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative; transition:transform .2s, box-shadow .2s
}
.product:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(31,41,55,.12)}
.product img{aspect-ratio:4/3; object-fit:cover}
.product .meta{padding:14px 14px 18px}
.tagline{font-weight:700; color:var(--muted); font-size:.95rem}
.price-row{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
.price{font-weight:900}
.add{padding:8px 12px; border-radius:12px; background:var(--mint); font-weight:800; cursor:pointer}
.add:hover{filter:saturate(110%)}

/* Story */
.story{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.story-card{background:white; border-radius:24px; padding:24px; box-shadow:var(--shadow)}
.story-list{display:grid; gap:12px; margin-top:8px}
.story-item{display:flex; gap:12px; align-items:flex-start}
.story-item i{width:28px; height:28px; border-radius:10px; background:var(--mint); display:grid; place-items:center; font-weight:900}

/* Bundles */
.bundle{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; background:linear-gradient(135deg,var(--mint),var(--cream)); border-radius:24px; padding:20px; box-shadow:var(--shadow)}
.bundle h3{margin:.2rem 0 6px; font-size:1.4rem}
.bundle p{margin:4px 0 12px}
.bundle .items{display:flex; gap:10px; flex-wrap:wrap}
.chip{background:white; border-radius:999px; padding:8px 12px; font-weight:700; box-shadow:var(--shadow)}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tcard{background:white; border-radius:22px; padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.tcard::after{content:""; position:absolute; inset:auto -20% -40% -20%; height:60%; background:var(--lav); filter:blur(40px); opacity:.35; z-index:0}
.tmeta{display:flex; align-items:center; gap:12px; position:relative; z-index:1}
.avatar{width:40px; height:40px; border-radius:50%; object-fit:cover}
.tq{position:relative; z-index:1; color:var(--muted)}

/* Footer */
footer{background:#111827; color:#e5e7eb; border-top-left-radius:22px; border-top-right-radius:22px; margin-top:36px}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; padding:28px 0}
.news{display:flex; gap:10px}
.news input{flex:1; padding:12px 14px; border:none; border-radius:14px}
.news button{padding:12px 14px; border-radius:14px; border:none; font-weight:800; background:var(--success); color:white; cursor:pointer}
.socials{display:flex; gap:10px; margin-top:8px}
.socials a{background:#111; padding:8px 10px; border-radius:12px}

/* Utilities */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--mint); padding:8px 12px; border-radius:999px; font-weight:800}
.muted{color:var(--muted)}
.center{text-align:center}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding-top:30px}
  .story, .bundle{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid.cols-3{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
}