:root{
  --bg:#fff7fb;            /* sugar-cream background */
  --card:rgba(255,255,255,.78);
  --pink:#ff5fa2;          /* candy pink */
  --mint:#22c3b6;          /* mint accent */
  --lav:#7a6cff;           /* lavender accent */
  --text:#2a2030;
  --muted:#5b5160;
  --line: rgba(255,95,162,.20);
  --shadow: 0 14px 40px rgba(23,14,26,.12);
  --radius: 18px;
  --max: 1140px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}
/* Sugar crystals + soft candy clouds background */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(700px 420px at 12% 0%, rgba(255,95,162,.14), transparent 60%),
    radial-gradient(660px 420px at 92% 10%, rgba(34,195,182,.12), transparent 60%),
    radial-gradient(900px 520px at 50% 115%, rgba(122,108,255,.10), transparent 65%),
    /* crystal sprinkles */
    radial-gradient(2px 2px at 10% 20%, rgba(255,95,162,.65), transparent 60%),
    radial-gradient(2px 2px at 40% 30%, rgba(34,195,182,.55), transparent 60%),
    radial-gradient(2px 2px at 70% 18%, rgba(122,108,255,.55), transparent 60%),
    radial-gradient(2px 2px at 80% 55%, rgba(255,95,162,.55), transparent 60%),
    radial-gradient(2px 2px at 22% 78%, rgba(34,195,182,.55), transparent 60%),
    radial-gradient(2px 2px at 55% 88%, rgba(122,108,255,.55), transparent 60%),
    radial-gradient(2px 2px at 92% 82%, rgba(255,95,162,.55), transparent 60%);
  opacity:.95;
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:-40px;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.55));
  pointer-events:none;
  z-index:-1;
}

a{color:var(--pink); text-decoration:none}
a:hover{opacity:.9; text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(255,247,251,.78);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,95,162,.55) 38%, rgba(122,108,255,.35) 74%),
    linear-gradient(135deg, rgba(255,95,162,.75), rgba(34,195,182,.45));
  border:1px solid rgba(255,95,162,.22);
  box-shadow: 0 10px 30px rgba(255,95,162,.18);
  display:grid; place-items:center;
  color:#ffffff;
  font-weight:1000;
  letter-spacing:.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.brand h1{font-size:16px; margin:0; line-height:1.1}
.brand small{display:block; color:var(--muted); font-weight:700}
.navlinks{display:flex; gap:16px; flex-wrap:wrap}
.navlinks a{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--text);
  font-weight:800;
}
.navlinks a.active, .navlinks a:hover{
  border-color: rgba(255,95,162,.26);
  background: rgba(255,95,162,.08);
  text-decoration:none;
}
.hero{padding:54px 0 20px}
.herogrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
@media(max-width:900px){.herogrid{grid-template-columns:1fr}}

.card{
  background: var(--card);
  border:1px solid rgba(255,95,162,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero .card{padding:26px}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,95,162,.22);
  background: rgba(255,95,162,.08);
  color: var(--pink);
  font-weight:900; font-size:12px;
}
h2{font-size:40px; line-height:1.1; margin:14px 0 10px}
@media(max-width:600px){h2{font-size:32px}}
.lead{color:var(--muted); font-size:16px; margin:0 0 14px}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,95,162,.22);
  background: linear-gradient(135deg, rgba(255,95,162,.95), rgba(122,108,255,.55), rgba(34,195,182,.45));
  color:#ffffff; font-weight:950;
  box-shadow: 0 12px 32px rgba(255,95,162,.18);
}
.btn.secondary{
  background: transparent;
  color: var(--text);
  border-color: rgba(255,95,162,.26);
}
.btn:hover{transform: translateY(-1px); text-decoration:none}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.section{padding:26px 0}
.section h3{margin:0 0 10px; font-size:22px}
.section p{color:var(--muted); margin:0}

.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.badge{
  border:1px solid rgba(255,95,162,.20);
  background: rgba(255,95,162,.07);
  color: var(--text);
  padding:7px 10px; border-radius: 999px;
  font-weight:900; font-size:12px;
}

.tablewrap{overflow:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid rgba(255,95,162,.14)}
th{color:rgba(42,32,48,.85); font-size:13px; letter-spacing:.2px}
td{color:var(--text)}
.muted{color:var(--muted)}

.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(255,95,162,.22);
  border-radius: 12px;
  color: var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color: rgba(122,108,255,.42)}
textarea{min-height:120px; resize:vertical}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:760px){.formgrid{grid-template-columns:1fr}}

.footer{
  margin-top:30px;
  padding:22px 0 34px;
  border-top:1px solid rgba(255,95,162,.18);
  background: rgba(255,247,251,.85);
}
.footgrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
@media(max-width:900px){.footgrid{grid-template-columns:1fr}}
.small{font-size:12px; color:var(--muted)}
hr.sep{border:none;border-top:1px solid rgba(255,95,162,.14); margin:14px 0}
.notice{
  padding:12px 14px;
  border-radius:14px;
  border:1px dashed rgba(255,95,162,.28);
  background: rgba(255,95,162,.06);
  color: var(--muted);
  font-size:13px;
}
code{
  padding:2px 6px;
  border-radius:10px;
  background: rgba(122,108,255,.10);
  border:1px solid rgba(122,108,255,.18);
}

/* --- Product card grid (Home) --- */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media(max-width:980px){ .grid3{grid-template-columns: repeat(2, 1fr);} }
@media(max-width:640px){ .grid3{grid-template-columns: 1fr;} }

.product-card{
  padding:18px 18px 18px 26px; /* extra left padding for text */
  position:relative;
}
.product-card h4{
  margin:0 0 6px;
  font-size:16px;
}
.product-card .specs{
  margin:10px 0 0;
  padding-left:18px;
  color: var(--muted);
}
.product-card .specs li{ margin:4px 0; }
.product-card .tag{
  position:absolute;
  top:14px;
  right:14px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,95,162,.22);
  background: rgba(255,95,162,.08);
  font-weight:900;
  font-size:12px;
}

/* --- Sharper contact form feel --- */
input,select,textarea{ border-radius:10px; }
.card[style*="max-width:720px"]{ box-shadow: 0 10px 26px rgba(23,14,26,.10); }