:root{
  --bg: linear-gradient(135deg,#f7f9ff 0%,#eef6ff 35%,#f7fff5 100%);
  --card: #ffffff;
  --ink: #0f172a;
  --muted:#475569;
  --accent:#2563eb;
  --accent-2:#22c55e;
  --accent-3:#f59e0b;
  --border:#e5e7eb;
  --shadow: 0 8px 24px rgba(2,6,23,.08);
  --radius: 16px;
  --space: clamp(12px,2.2vw,20px);
  --maxw: 1120px;
  --click-h: 48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.55;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--space)}
/* Header */
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.7); border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{font-weight:700; letter-spacing:.2px; display:flex; gap:8px; align-items:center}
.brand-emoji{font-size:20px}
.menu{display:flex; gap:18px}
.menu a{color:var(--ink); font-weight:600}
.burger{display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:#fff}
.sheet{display:none; position:fixed; inset:0; background:rgba(15,23,42,.22)}
.sheet-panel{
  position:absolute; right:0; top:0; width:min(92vw,360px); height:100%;
  background:#fff; box-shadow:var(--shadow); padding:20px;
  display:flex; flex-direction:column; gap:14px;
}
/* Hero */
.hero{padding:48px 0}
.hero .grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space);
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(16px,2.8vw,28px);
}
.h1{font-size:clamp(22px,4.2vw,36px); margin:0 0 8px; font-weight:800}
.lead{color:var(--muted); font-size:clamp(14px,2.2vw,18px)}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.badge{ border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:13px; background:#fff; }
.cta-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px;
  height:var(--click-h); border-radius:12px; border:1px solid var(--border); background:#fff; font-weight:700;
}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn.secondary{background:#fff}
.note{font-size:13px; color:var(--muted)}
/* Sections */
.section{padding:28px 0}
.h2{font-size:clamp(18px,3.4vw,26px); margin:0 0 8px; font-weight:800}
.sub{color:var(--muted); margin:0 0 14px}
.grid-3{ display:grid; gap:var(--space); grid-template-columns:repeat(3,1fr); }
.p-card .title{font-weight:800; font-size:18px; margin:0}
.p-card .desc{color:var(--muted); font-size:14px}
.price{font-weight:800; margin:6px 0}
.qty{display:flex; gap:8px; align-items:center}
.qty input{
  width:64px; height:40px; border:1px solid var(--border); border-radius:10px; padding:0 10px; font-weight:700;
}
.full{width:100%}
/* Cart mini */
.cart-fab{
  position:fixed; right:16px; bottom:16px; z-index:9;
  height:56px; padding:0 16px; border-radius:16px; background:var(--accent); color:#fff; border:none; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px; font-weight:800;
}
.cart-fab span{background:rgba(255,255,255,.18); padding:4px 8px; border-radius:999px}
.side{
  position:fixed; right:0; top:0; height:100%; width:min(92vw,420px); background:#fff; border-left:1px solid var(--border);
  box-shadow:var(--shadow); transform:translateX(100%); transition:transform .25s ease; z-index:11; display:flex; flex-direction:column;
}
.side.open{transform:none}
.side-head{display:flex; align-items:center; justify-content:space-between; padding:16px 16px; border-bottom:1px solid var(--border)}
.side-body{padding:16px; overflow:auto; flex:1}
.cart-item{display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px 0; border-bottom:1px dashed var(--border)}
.cart-item .small{font-size:13px; color:var(--muted)}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.total{font-weight:900; font-size:18px}
.field{display:flex; flex-direction:column; gap:6px}
.input{height:48px; border:1px solid var(--border); border-radius:12px; padding:0 12px; font-size:16px}
.textarea{min-height:100px; padding:12px; border:1px solid var(--border); border-radius:12px; font-size:15px; resize:vertical}
.disclaimer{font-size:12.5px; color:var(--muted)}
/* Footer */
footer{ margin-top:32px; border-top:1px solid var(--border); background:rgba(255,255,255,.7);}
.foot{display:grid; gap:12px; padding:16px 0}
.foot .cols{display:grid; gap:12px; grid-template-columns:1fr; font-size:14px}
.foot a{color:var(--ink)}
.copy{font-size:12.5px; color:var(--muted)}
/* Thankyou page base */
.thank-bg{ background: linear-gradient(135deg,#fff7ed 0%,#f1f5ff 100%); }
.wrap-thank{max-width:760px; margin:0 auto; padding:calc(var(--space)*2) var(--space)}
.card-thank{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--space)}
.h1{font-size:clamp(22px,4vw,34px); margin:0 0 6px; font-weight:800}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.list{margin:10px 0 0 18px; color:var(--muted)}
/* Responsive */
@media (max-width: 980px){
  .hero .grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .menu{display:none}
  .burger{display:block}
  .grid-3{grid-template-columns:1fr}
  .hero{padding:28px 0}
}