:root{
  --bg:#050505;
  --surface:#111111;
  --surface-2:#181818;
  --border:rgba(255,255,255,.08);
  --text:#ffffff;
  --muted:rgba(255,255,255,.65);
  --accent:#E65581;
  --radius:30px;
  --max:1400px;
}

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

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  max-width:100%;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font:inherit}

section{
  padding:7rem 0;
}

.max-w-7xl{
  max-width:var(--max);
}

/* HERO */

.hero{
  min-height:90vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
  radial-gradient(circle at top,
  rgba(230,85,129,.18),
  transparent 45%);
  pointer-events:none;
}

.hero h1{
  letter-spacing:-.05em;
}

.hero p{
  color:var(--muted);
}

/* COLLECTIONS */

.collection-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:36px;
  padding:3rem;
  transition:.35s;
}

.collection-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent);
}

.featured{
  background:
  linear-gradient(180deg,#111,#090909);
}

/* PRODUCTS */

.products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:2rem;
}

.product{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:.35s;
}

.product:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.product .mockup,
.aspect-square{
  aspect-ratio:1/1;
  background:#1d1d1d;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  font-weight:600;
}

.product h3{
  font-size:1.7rem;
}

.price{
  color:var(--accent);
  font-size:2rem;
  font-weight:700;
}

button,
.btn{
  transition:.25s;
}

button:hover,
.btn:hover{
  transform:translateY(-2px);
}

button.bg\[\#E65581\]{
  box-shadow:0 10px 30px #E65581;
}

/* FAQ */

details{
  transition:.25s;
}

details summary{
  list-style:none;
}

details summary::-webkit-details-marker{
  display:none;
}

/* NEWSLETTER */

input{
  background:#101010;
  border:1px solid var(--border);
  color:white;
}

input:focus{
  outline:none;
  border-color:var(--accent);
}

/* CART */

#cartDrawer{
  transition:right .35s ease;
  box-shadow:-15px 0 40px rgba(0,0,0,.5);
}

/* UTILITIES */

.badge{
  display:inline-block;
  background:var(--accent);
  color:black;
  font-size:.7rem;
  text-transform:uppercase;
  padding:.45rem .8rem;
  border-radius:999px;
  letter-spacing:.2em;
  font-weight:700;
}

/* MOBILE */

@media(max-width:1024px){

.hero{
padding-top:5rem;
}

.hero h1{
font-size:4rem!important;
}

section{
padding:5rem 0;
}

}

@media(max-width:768px){

  .products{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .product{
    width:100%;
    max-width:100%;
    min-width:0;
  }

.hero .grid{
display:block;
}

.hero h1{
font-size:3rem!important;
}

.collection-card{
padding:2rem;
}

}

#mobile-menu{
    width:100%;
    background:#000;
    border-top:1px solid rgba(255,255,255,.1);
}

.size-btn{
    padding:12px 20px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:9999px;
    transition:.2s;
}

.size-btn:hover{
    border-color:#E65581;
}

.size-btn.active{
    background:#E65581;
    color:#000;
    border-color:#E65581;
}

.qty-btn{
    width:46px;
    height:46px;
    border-radius:9999px;
    border:1px solid rgba(255,255,255,.15);
    font-size:24px;
    transition:.2s;
}

.qty-btn:hover{
    border-color:#E65581;
}

/* ========================================
   ANNOUNCEMENT BAR
======================================== */

#announcementBar{
    background:#E65581;
    color:#000;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
}

#announcementBar .announcement-slide{
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.03em;
    transition:.5s;
}

#announcementBar strong{
    font-weight:800;
}

.hidden{
    display:none;
}
/* ========================================
   HERO BADGES
======================================== */

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:40px;
}

.hero-badges span{
    display:flex;
    align-items:center;
    gap:8px;

    background:#111;

    padding:12px 18px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.75);

    transition:.25s;
}

.hero-badges span:hover{

    border-color:#E65581;

    color:white;

    transform:translateY(-3px);

}
/* ========================================
   FOUNDING FIVE
======================================== */

.founding-card{

    background:linear-gradient(
    180deg,
    #181818,
    #111);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:36px 24px;

    transition:.35s;

    height:100%;

}

.founding-card:hover{

    transform:translateY(-8px);

    border-color:#E65581;

    box-shadow:0 20px 50px rgba(230,85,129,.18);

}

.founding-card h3{

    line-height:1.3;

}

.founding-card p{

    line-height:1.7;

}
#founding-five {
    position: relative;
    overflow: hidden;
}

#founding-five::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at center,
        rgba(230,85,129,.08),
        transparent 70%);
    pointer-events: none;
}
/* ========================================
   MISSION ICONS
======================================== */

#mission .text-5xl{

    transition:.3s;

}

#mission .text-5xl:hover{

    transform:scale(1.1);

}
/* ========================================
   FAQ
======================================== */

#faq details{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:22px;

    margin-bottom:18px;

}

#faq details:hover{

    border-color:#E65581;

}
/* ========================================
   NEWSLETTER
======================================== */

#newsletter input{

    transition:.3s;

}

#newsletter input:focus{

    box-shadow:0 0 0 4px rgba(230,85,129,.2);

}
@media(max-width:768px){

.founding-card{

padding:28px;

}

.hero-badges{

justify-content:center;

}

#announcementBar{

font-size:.85rem;

}

}