:root{
  --purple-deep:#3f1a49;
  --purple:#602a6d;
  --purple-soft:#8a5a92;
  --teal:#4fb8a0;
  --teal-light:#7fd6bf;
  --cream:#f8e4d3;
  --cream-dim:#e9d3c0;
  --ink:#2a1530;
  --radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  min-height:100vh;
  font-family:'Manrope',sans-serif;
  color:var(--cream);
  background:
    radial-gradient(120% 90% at 15% 0%, var(--purple-deep) 0%, var(--purple) 42%, var(--teal) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
}

/* subtle grain for texture, so the gradient doesn't feel flat/AI-generated */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  padding:22px clamp(20px,5vw,56px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.topbar__logo{
  height:26px;
  width:auto;
}

.tabs{
  display:flex;
  gap:6px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(248,228,211,.18);
  padding:5px;
  border-radius:999px;
  backdrop-filter:blur(10px);
}
.tab{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--cream-dim);
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.02em;
  padding:9px 18px;
  border-radius:999px;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.tab:hover{color:var(--cream);}
.tab.is-active{
  background:var(--cream);
  color:var(--purple-deep);
}

/* ---------- layout ---------- */
main{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 90px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.panel{
  width:100%;
  min-height:calc(100vh - 90px);
  display:none;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:40px 24px;
}
.panel.is-active{display:flex;}

/* ---------- hero / home ---------- */
.hero{
  text-align:center;
  position:relative;
  z-index:3;
}
.hero__logo{
  width:min(88vw,760px);
  height:auto;
}
.hero__tagline{
  margin-top:24px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-style:normal;
  font-size:clamp(1.3rem,3.4vw,2.1rem);
  color:var(--cream);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.hero__amazon{
  margin-top:14px;
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.03em;
  color:var(--cream-dim);
  opacity:.85;
}
.hero__amazon.reveal{animation-delay:.45s;}
.dots span{
  display:inline-block;
  opacity:0;
  animation:dotFade 1.6s var(--ease) infinite;
}
.dots span:nth-child(1){animation-delay:0s;}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}
@keyframes dotFade{
  0%,20%{opacity:0;}
  40%{opacity:1;}
  80%,100%{opacity:0;}
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  animation:revealUp 1s var(--ease) forwards;
}
.hero__tagline.reveal{animation-delay:.25s;}
@keyframes revealUp{
  to{opacity:1;transform:translateY(0);}
}

/* decorative paws */
.paw{
  position:absolute;
  width:120px;
  height:120px;
  opacity:.10;
  z-index:1;
  pointer-events:none;
}
.paw svg{width:100%;height:100%;fill:var(--cream);}
.paw--1{top:8%;left:6%;transform:rotate(-18deg);width:90px;height:90px;}
.paw--2{bottom:12%;right:8%;transform:rotate(22deg);width:150px;height:150px;}
.paw--3{top:55%;left:82%;transform:rotate(-6deg);width:70px;height:70px;display:none;}
@media(min-width:900px){
  .paw--3{display:block;}
}

/* ---------- contact ---------- */
.contact{
  width:100%;
  max-width:520px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(248,228,211,.16);
  backdrop-filter:blur(14px);
  border-radius:var(--radius);
  padding:clamp(28px,5vw,44px);
}
.contact__title{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(1.6rem,4vw,2.1rem);
  margin-bottom:8px;
}
.contact__sub{
  color:var(--cream-dim);
  font-size:.95rem;
  margin-bottom:26px;
}
.contact__form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.82rem;
  color:var(--cream-dim);
}
.field input,
.field textarea{
  font-family:'Manrope',sans-serif;
  font-size:.95rem;
  color:var(--cream);
  background:rgba(0,0,0,.15);
  border:1px solid rgba(248,228,211,.25);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:rgba(248,228,211,.4);}
.field input:focus,
.field textarea:focus{
  border-color:var(--teal-light);
  background:rgba(0,0,0,.22);
}

.btn{
  margin-top:6px;
  appearance:none;
  border:none;
  cursor:pointer;
  background:var(--cream);
  color:var(--purple-deep);
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:.95rem;
  padding:13px 20px;
  border-radius:12px;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover{
  background:var(--teal-light);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}

.contact__note{
  margin-top:4px;
  font-size:.75rem;
  color:rgba(248,228,211,.55);
  text-align:center;
}

.contact__success{
  text-align:center;
  font-family:'Fraunces',serif;
  font-size:1.2rem;
}

/* ---------- footer ---------- */
.footer{
  position:relative;
  z-index:2;
  text-align:center;
  padding:22px;
  font-size:.75rem;
  color:rgba(248,228,211,.4);
}

@media(max-width:560px){
  .topbar__inner{flex-direction:column;gap:14px;}
}