:root {
  --tm-pink:#ff5c80;
  --tm-pink-600:#ff3e6e;
  --tm-dark:#13141a;
  --tm-text:#25262b;
  --tm-muted:#6b6f76;
  --tm-bg:#fff;
  --tm-card:#fafafb;
  --tm-border:#e8e9ee;
  --radius:14px;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}

html {scroll-behavior:smooth}
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--tm-text);
  background:var(--tm-bg);
  line-height:1.6;
  font-size:16px;
}

/* Top bar */
.topbar {
  padding: 3%;
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.8));
  border-bottom:1px solid var(--tm-border);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.container {max-width:1100px; margin:0 auto; padding:0 20px}
.flex {display:flex; align-items:center; justify-content:space-between;flex-direction: row;}

.brand h1 {font-size:19px; letter-spacing:.4px; margin:0; font-weight:800}

nav a {
  position:relative;
  display: inline;
  color:var(--tm-text);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  transition:.25s;
}
nav a::after {
  content:""; position:absolute; bottom:0; left:50%;
  width:0%; height:2px; background:var(--tm-pink);
  transition:.25s; transform:translateX(-50%);
}
nav a:hover::after {width:70%}
nav a.active {color:var(--tm-pink-600)}
nav a.active::after {width:70%}

/* Hero */
.hero {
  background:linear-gradient(135deg, #ffd1dc 0%, #ffe3ea 50%, #ffffff 100%);
  border-bottom:1px solid var(--tm-border);
  text-align:center;
}
.hero .wrap {padding:60px 0}
.hero h2 {margin:0 0 14px; font-size:38px; font-weight:800; line-height:1.2}
.hero p {margin:0; color:var(--tm-muted); font-size:17px}
.kicker {font-size:12px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; color:var(--tm-pink-600); display:block; margin-bottom:10px}

/* Sections */
section {padding:60px 0}
.card {
  background:var(--tm-card);
  border:1px solid var(--tm-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  transition:transform .25s, box-shadow .25s;
}
.card:hover {transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1)}
h3 {margin:0 0 16px; font-size:20px}

/* Grid */
.grid {display:grid; gap:24px}
@media(min-width:900px)
{ 
  .grid-2{grid-template-columns:1fr 1fr} ;
  
}



/* Accordion (FAQ) */
details {
  background:#fff; border:1px solid var(--tm-border);
  border-radius:12px;
  padding:14px 16px; transition:all .2s;
}
details[open] {border-color:var(--tm-pink-600); background:#fff7f9}
details+details {margin-top:10px}
summary {
  list-style:none; cursor:pointer; font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
}
summary::-webkit-details-marker{display:none}
summary::after {content:"+"; font-size:18px; color:var(--tm-muted); transition:.2s}
details[open] summary::after {content:"–"; color:var(--tm-pink-600)}
.muted {color:var(--tm-muted)}

/* Contact Pills */
.contact {display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.contact .pill {
  display:inline-block; padding:10px 14px;
  border-radius:999px; border:1px solid var(--tm-border);
  background:#fff;
  transition:.2s; cursor:pointer;
}
.contact .pill:hover {background:var(--tm-pink); color:#fff; border-color:var(--tm-pink)}

/* Buttons */
.btn {
  display: inline;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid var(--tm-border);
  background:#fff;
  text-decoration:none;
  color:var(--tm-text);
  font-weight:600;
  margin-left: 100%;
  transition:.25s;
}
.backtoshop{
  color: #b01743;
}

.btn:hover {box-shadow:0 4px 12px rgba(0,0,0,.08)}
.btn.primary {background:var(--tm-pink); color:#fff; border-color:transparent}
.btn.primary:hover {background:var(--tm-pink-600)}

/* Badges */
.badge {
  background:#ffe3ea; color:#b01743;
  font-weight:700; padding:4px 10px;
  border-radius:999px; font-size:12px;
}

/* Footer */
footer {
  border-top:1px solid var(--tm-border);
  padding:30px 0;
  color:var(--tm-muted);
  text-align:center;
  font-size:14px;
}
footer a {color:var(--tm-muted); text-decoration:none; margin:0 8px}
footer a:hover {color:var(--tm-pink)}

@media (max-width:680px) {
  .backtoshop{
    display: none;
  }
  .btn.primary.hi {
    height: 0.9rem;
    width: 30%;
    margin-top: -13%;
    position: relative;
    left: 8%;
    display: flex;
    font-size: 13px;
    flex-direction: row;
    align-items: center;
  }
}