@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
:root{
  --brand:#0061ff;--brand-2:#00d4ff;--ink:#0f172a;--muted:#475569;--bg:#f7fafc;--surface:#ffffff;--cream:#fffdf7;
  --border:#e2e8f0;--radius:16px;--shadow:0 12px 40px rgba(2,6,23,.12);--shadow-s:0 6px 18px rgba(2,6,23,.08);
  --max:1200px;--cont-pad:clamp(16px,2vw,24px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--cream),var(--bg));color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/***** Layout *****/
.container{width:min(var(--max),92%);margin-inline:auto}
section{padding-block:56px}
.section-head{display:grid;gap:8px;margin-bottom:20px}
.eyebrow{font:700 .85rem/1 Inter,system-ui;color:var(--brand);letter-spacing:.4px;text-transform:uppercase}
.section-head h1, .section-head h2{margin:0}
.section-head h1{font:700 clamp(2rem,4.5vw,3.2rem)/1.1 "Playfair Display",serif;letter-spacing:-.4px}
.section-head h2{font:800 clamp(1.4rem,3.5vw,2rem)/1.1 Inter,system-ui;letter-spacing:-.3px}
.subtle{color:#94a3b8}
.meta{color:var(--muted)}

.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.cols-3,.cols-2{grid-template-columns:1fr}}

/***** Components *****/
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-s)}
.card-pad{padding:clamp(14px,2vw,20px)}
.card--hover{transition:transform .25s ease, box-shadow .25s ease}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

.pill,.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#f8fafc;font-weight:700;font-size:.9rem}
.chip{cursor:pointer;user-select:none}
.chip.is-active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}

.btn{appearance:none;border:none;cursor:pointer;font-weight:800;border-radius:999px;padding:12px 18px;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 10px 28px rgba(0,97,255,.28)}
.btn-ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn-quiet{background:transparent;color:var(--brand);text-decoration:underline}

.badge{display:inline-block;background:#ecfeff;color:#0369a1;border:1px solid #bae6fd;border-radius:999px;padding:6px 10px;font-weight:700}
.stars{color:#f59e0b}

.media-frame{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block}

/***** Hero *****/
.hero{position:relative;min-height:340px;padding-block:56px;overflow:clip}
.hero .cover{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(105%) contrast(105%)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(600px 240px at 20% 20%, rgba(0,212,255,.20), transparent 60%), radial-gradient(700px 280px at 80% 20%, rgba(0,97,255,.18), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.30))}
.hero > .container{position:relative}
.hero__content{display:grid;gap:16px;max-width:760px}
.hero__kicker{font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.4px}
.hero__title{font:700 clamp(2.2rem,5vw,3.6rem)/1.05 "Playfair Display",serif;margin:0}
.hero__subtitle{color:var(--muted);font-size:clamp(1rem,2.1vw,1.15rem)}

/***** Product Cards *****/
.product-card{display:grid;gap:12px}
.product-card .thumb{height:180px}
.product-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.price{font-weight:800;font-size:1.1rem}
.ribbon{position:absolute;top:12px;left:12px;background:#22c55e;color:#fff;font-weight:800;font-size:.8rem;padding:6px 10px;border-radius:999px}

/***** Tool / Forms *****/
.tool label{font-weight:800}
.tool input,.tool select,.tool textarea{padding:12px 14px;border-radius:12px;border:1px solid var(--border);width:100%;background:#fff}
.result{padding:12px;border-radius:12px;background:#f0f9ff;border:1px solid #dbeafe}

/***** Reveal *****/
.reveal{opacity:0;transform:translateY(12px);transition:all .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/***** CTA band *****/
.cta-band{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:28px;border-radius:var(--radius);display:grid;gap:10px;align-items:center;grid-template-columns:1fr auto;box-shadow:0 16px 42px rgba(0,97,255,.35)}
@media (max-width:700px){.cta-band{grid-template-columns:1fr;gap:12px}}