:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#121417;
  --line:#e7e9ee;
  --brand:#f4cf2e;
  --brand-2:#d8f26a;
  --mint:#c9ffe8;
  --ice:#ddf4ff;
  --shadow:0 12px 34px rgba(16,24,40,.08);
  --shadow-sm:0 6px 18px rgba(16,24,40,.06);
  --radius:18px;
  --radius-lg:26px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(800px 360px at 92% -5%, rgba(244,207,46,.18), transparent 60%),
    radial-gradient(700px 320px at 5% 0%, rgba(201,255,232,.2), transparent 58%),
    var(--bg);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 32px));margin-inline:auto}
.hidden{display:none !important}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(12px);
  background:rgba(247,248,250,.8);
  border-bottom:1px solid rgba(18,20,23,.06);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:800;
}
.brand-badge{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(140deg, var(--brand), #ffe989);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), var(--shadow-sm);
  border:1px solid rgba(0,0,0,.04);
  font-weight:900;
}
.brand-name{display:flex; flex-direction:column; line-height:1}
.brand-name b{font-size:1rem; letter-spacing:-.02em}
.brand-name span{font-size:.73rem; color:var(--muted); font-weight:600}

.nav{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.nav a{
  padding:10px 12px;border-radius:12px; color:#1f2937; font-weight:600; font-size:.94rem;
}
.nav a:hover{background:#fff; box-shadow:var(--shadow-sm)}
.nav a.active{background:#fff; border:1px solid var(--line)}
.header-actions{
  display:flex; align-items:center; gap:10px;
}
.menu-toggle{
  display:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; font-weight:700;
}
.cart-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line); background:#fff; padding:9px 12px; border-radius:999px;
  font-weight:700; box-shadow:var(--shadow-sm);
}
.cart-badge{
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  display:grid; place-items:center; background:var(--brand); font-size:.8rem;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--text); padding:12px 16px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg, var(--brand), #ffe27a); border-color:#efce2a}
.btn.secondary{background:linear-gradient(135deg, #effdf5, #ffffff); border-color:#cfeedd}
.btn.ghost{background:transparent; box-shadow:none}
.btn.full{width:100%}
.btn.small{padding:9px 12px; border-radius:12px; font-size:.9rem}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}

/* Hero */
.hero{
  padding:52px 0 28px;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-weight:700; color:#374151; box-shadow:var(--shadow-sm);
  font-size:.86rem;
}
.kicker-dot{width:8px;height:8px;border-radius:50%; background:var(--brand)}
.hero h1{
  margin:14px 0 12px; font-size:clamp(2rem, 5vw, 3.75rem); line-height:1.02; letter-spacing:-.03em;
}
.hero h1 .mark{
  background:linear-gradient(135deg, #c7e954, #f4cf2e 55%, #ffd86c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{
  margin:0 0 20px; color:var(--muted); font-size:1.05rem; max-width:58ch;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.hero-bullets{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
}
.hero-bullets .pill{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--line); background:#fff; border-radius:14px; padding:11px 12px;
  color:#374151; font-weight:600; font-size:.92rem;
}
.hero-bullets .pill i{
  width:20px;height:20px;border-radius:50%; background:rgba(244,207,46,.25); display:grid;place-items:center;
  font-style:normal; font-size:.7rem; font-weight:800;
}

.media-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px;
  box-shadow:var(--shadow);
}
.media-card .top{
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin:4px 4px 10px;
}
.media-title{font-weight:800}
.tag{
  padding:7px 10px; border-radius:999px;
  background:linear-gradient(135deg, #f7ffd8, #fff8d3);
  border:1px solid #f0e09a; font-size:.78rem; font-weight:800;
}
.media-card img{
  border-radius:18px; border:1px solid rgba(0,0,0,.04);
  aspect-ratio: 16 / 10; object-fit:cover; width:100%;
}
.media-caption{color:var(--muted); font-size:.85rem; margin:10px 4px 2px}

/* Sections */
.section{padding:38px 0}
.section.tight{padding-top:18px}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:16px;
}
.section-head h2{
  margin:0; font-size:clamp(1.45rem, 3vw, 2.15rem); letter-spacing:-.02em;
}
.section-head p{
  margin:6px 0 0; color:var(--muted); max-width:64ch;
}
.surface{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}

.grid{
  display:grid; gap:16px;
}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm);
}
.card.pad{padding:18px}
.card h3{margin:0 0 8px; font-size:1.07rem}
.card p{margin:0; color:var(--muted)}
.stat{
  display:flex; flex-direction:column; gap:4px; min-height:120px; justify-content:center;
}
.stat .num{font-size:1.65rem; font-weight:900; letter-spacing:-.03em}
.stat .label{font-weight:700}
.stat .hint{font-size:.9rem; color:var(--muted)}

/* Product cards */
.product-card{
  overflow:hidden; display:flex; flex-direction:column;
}
.product-card .thumb{
  aspect-ratio: 1 / 1;
  border-bottom:1px solid var(--line);
  background:#fafafa;
}
.product-card .thumb img{width:100%;height:100%;object-fit:cover}
.product-card .body{padding:14px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:#f9fafb; border-radius:999px; padding:5px 9px;
  font-size:.75rem; font-weight:700; color:#374151;
}
.price-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  margin:10px 0 12px;
}
.price{
  display:flex; align-items:baseline; gap:7px;
}
.price strong{font-size:1.25rem; letter-spacing:-.02em}
.price s{font-size:.88rem; color:#9ca3af}
.qty{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:#fff;
}
.qty button{
  border:none; background:#f3f4f6; width:22px; height:22px; border-radius:999px; cursor:pointer; font-weight:800;
}
.qty span{min-width:14px; text-align:center; font-weight:800}

/* Promo strips / feature list */
.feature-list{display:grid; gap:10px}
.feature-item{
  display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:flex-start;
  border:1px solid var(--line); background:#fff; border-radius:16px; padding:12px;
}
.feature-item .ico{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center; font-weight:900;
  background:linear-gradient(135deg,#fff6c9,#eafff5);
  border:1px solid #ece7bc;
}
.feature-item h4{margin:1px 0 2px}
.feature-item p{margin:0; color:var(--muted); font-size:.92rem}

/* Step cards */
.step-card{overflow:hidden}
.step-card .thumb{aspect-ratio: 3/2; border-bottom:1px solid var(--line)}
.step-card .thumb img{width:100%; height:100%; object-fit:cover}
.step-card .body{padding:14px}
.step-card .step{font-size:.8rem; font-weight:800; color:#7c6f1c; margin-bottom:6px}

/* Split layouts */
.split{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:20px; align-items:start;
}
.split.reverse{grid-template-columns:.95fr 1.05fr}
.panel{
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm);
  padding:18px;
}
.panel img{border-radius:14px; border:1px solid rgba(0,0,0,.04)}
.panel h3{margin:0 0 8px}
.panel p{margin:0; color:var(--muted)}
.panel .stack{display:grid; gap:12px}
.list{margin:0; padding-left:18px}
.list li{margin:7px 0; color:#374151}
.notice{
  border:1px dashed #e1d28d;
  background:linear-gradient(135deg,#fffbe8,#fcfff1);
  border-radius:16px;
  padding:12px 13px;
  color:#4b5563; font-weight:600;
}

/* Forms */
.form-grid{
  display:grid; gap:12px;
}
.input, select, textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  color:inherit;
}
textarea{min-height:120px; resize:vertical}
.input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:#dec44e;
  box-shadow:0 0 0 4px rgba(244,207,46,.18);
}
.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.form-help{font-size:.9rem;color:var(--muted)}
.form-success{
  margin-top:12px; display:none;
  border:1px solid #cdeacd; background:#f4fff4; color:#215f31;
  border-radius:14px; padding:12px 14px; font-weight:700;
}
.form-success.show{display:block}
.chip-row{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:.87rem; font-weight:700;
}

/* Filters */
.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.toolbar .left, .toolbar .right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.seg{
  display:flex; gap:6px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
}
.seg button{
  border:none; background:transparent; border-radius:10px; padding:9px 12px; font-weight:700; cursor:pointer;
}
.seg button.active{background:#f4f5f7; border:1px solid var(--line)}
.search{
  position:relative;
}
.search input{padding-left:36px; min-width:240px}
.search span{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af; font-weight:800;
}

/* Footer */
.footer{
  margin-top:34px; padding:28px 0 40px;
  border-top:1px solid rgba(18,20,23,.06);
}
.footer-grid{
  display:grid; gap:16px; grid-template-columns:1.4fr 1fr 1fr;
}
.footer h4{margin:0 0 8px; font-size:1rem}
.footer p,.footer li{color:var(--muted); font-size:.94rem}
.footer ul{margin:0; padding-left:18px}
.copy{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:#6b7280; font-size:.9rem;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* Toast */
.toast{
  position:fixed; right:16px; bottom:16px; z-index:60;
  background:#111827; color:#fff; border-radius:14px; padding:12px 14px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease;
  max-width:min(94vw, 380px);
}
.toast.show{opacity:1; transform:translateY(0)}
.toast small{display:block; opacity:.8; margin-top:2px}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid, .split, .split.reverse{grid-template-columns:1fr}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 860px){
  .menu-toggle{display:inline-flex}
  .nav{
    display:none; position:absolute; left:16px; right:16px; top:72px;
    flex-direction:column; align-items:stretch;
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:10px}
  .header-actions .btn.small{display:none}
  .hero-bullets{grid-template-columns:1fr}
  .grid.cols-4, .grid.cols-3, .grid.cols-2, .two-col, .footer-grid{grid-template-columns:1fr}
  .toolbar{align-items:stretch}
  .toolbar .right{justify-content:space-between}
  .search input{min-width:unset; width:100%}
}