/* Base styles */
:root{
  --bg:#f0fbff;
  --primary:#0ea5e9;
  --secondary:#22d3ee;
  --text:#093044;
  --muted:#5b7684;
  --foam:#e0f7ff;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 600px at 70% -100px, #dff7ff 0%, #f8feff 35%, var(--bg) 100%);
  overflow-x:hidden;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;height:auto;display:block}

.container{width:min(1100px, 92%);margin:0 auto}

/* Header */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #e6f3f8;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:44px;height:44px}
.brand-name{font-weight:800;font-size:1.2rem;color:var(--primary)}

.menu{display:flex;gap:14px;flex-wrap:wrap}
.menu-toggle{display:none;border:1px solid #cbeefb;background:#fff;border-radius:8px;padding:6px 10px;font-weight:800;color:#065373}
.menu a{
  padding:8px 12px;border-radius:999px;
  color:var(--text);font-weight:600;
}
.menu a.active, .menu a:hover{
  background:linear-gradient(135deg, var(--foam), #ffffff);
  box-shadow:0 1px 0 rgba(14,165,233,.15) inset;
}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  padding:60px 0 30px;
  background:linear-gradient(180deg, #effaff 0%, #ffffff 100%);
}
.hero-canvas{position:absolute;inset:0;pointer-events:none}
.hero-canvas canvas{width:100%;height:100%;display:block}
.hero:before{
  content:"";position:absolute;left:0;right:0;top:-40px;height:120px;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%) 10% 40%/120px 60px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%) 30% 30%/160px 80px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%) 55% 45%/140px 70px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%) 78% 35%/180px 90px no-repeat;
  filter:blur(1px);
}
.hero .grid{
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
}
.hero h1{
  font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem);
  margin:0 0 10px 0;
}
.hero p{color:var(--muted);font-size:1.05rem}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid #cbeefb;
  background:linear-gradient(180deg, #e6f7ff 0%, #dff6ff 49%, #ffffff 100%);
  color:#065373;font-weight:800;box-shadow:0 1px 0 #fff inset,0 8px 24px rgba(14,165,233,.15);
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#ffffff}

.bubble{position:absolute;border-radius:999px;pointer-events:none;opacity:.65;
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #c9f2ff 30%, #a8ebff 55%, rgba(174,247,255,0.4) 70%, rgba(255,255,255,0) 72%);
  box-shadow:inset 0 0 10px rgba(255,255,255,.7);
  animation:float 18s ease-in-out infinite;
}
@keyframes float{
  0%{transform:translateY(0) translateX(0) scale(1)}
  50%{transform:translateY(-30px) translateX(10px) scale(1.05)}
  100%{transform:translateY(0) translateX(0) scale(1)}
}

/* Cards */
.section{padding:38px 0}
.cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.card{
  background:var(--card);border:1px solid #e6f3f8;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 30px rgba(14,165,233,.06);
}
.card .media{display:none}
.card .content{padding:14px}
.card h3{margin:0 0 6px 0}
.card p{margin:0;color:var(--muted)}
.card .actions{display:flex;gap:10px;margin-top:12px}

/* Footer */
footer.site-footer{
  border-top:1px solid #e6f3f8;background:#fbfeff;color:#436678;margin-top:30px
}
.footer-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:20px 0}
.copyright{font-size:.9rem;color:#6a8694}

/* Utilities */
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#ecfdff;color:#0b6b92;font-weight:700;font-size:.85rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Foam separators */
.foam-section{position:relative;padding-top:60px}
.foam-section:before{
  content:"";position:absolute;left:0;right:0;top:-30px;height:70px;pointer-events:none;
  background:
    radial-gradient(closest-side, #ffffff, rgba(255,255,255,0) 65%) 5% 50%/120px 60px no-repeat,
    radial-gradient(closest-side, #ffffff, rgba(255,255,255,0) 65%) 18% 40%/150px 70px no-repeat,
    radial-gradient(closest-side, #ffffff, rgba(255,255,255,0) 65%) 35% 35%/110px 55px no-repeat,
    radial-gradient(closest-side, #ffffff, rgba(255,255,255,0) 65%) 55% 45%/140px 70px no-repeat,
    radial-gradient(closest-side, #ffffff, rgba(255,255,255,0) 65%) 75% 38%/160px 80px no-repeat,
    radial-gradient(closest-side, #ffffff, rgba(255,255,255,0) 65%) 92% 46%/120px 60px no-repeat;
  filter:drop-shadow(0 2px 0 rgba(14,165,233,.06));
}

/* Comparison table */
.compare{display:grid;gap:8px;margin-top:14px}
.compare-header,.compare-row{display:grid;grid-template-columns:2fr 3fr 1fr 2fr;gap:10px;align-items:center}
.compare-header{font-weight:800;color:#065373}
.compare-row{background:#ffffff;border:1px solid #e6f3f8;border-radius:12px;padding:10px}
.compare-row .c-product{display:flex;align-items:center;gap:10px}
.compare-row .c-product img{width:54px;height:54px;object-fit:contain;background:#f5fdff;border:1px solid #e6f7ff;border-radius:8px}
.compare-row .c-name{font-weight:700}
.compare-row .c-pros{color:#436678}
.compare-row .c-price{font-weight:800;color:#0b6b92}
.compare-row .c-shops{display:flex;gap:8px;flex-wrap:wrap}

/* Responsive */
@media (max-width: 900px){
  .hero .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .compare-header{display:none}
  .compare-row{grid-template-columns:1fr;align-items:start}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .menu{gap:6px}
}
@media (max-width: 760px){
  .nav{flex-direction:column;align-items:flex-start;gap:8px}
  .menu-toggle{display:inline-block}
  .menu{display:none;flex-direction:column;width:100%}
  .menu.show{display:flex}
}
@media (max-width: 640px){
  .hero{padding:40px 0 20px}
  .brand img{width:36px;height:36px}
  .menu a{padding:6px 10px}
  .cta-row{gap:8px}
  .cta-row .btn{flex:1 1 160px;justify-content:center}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width: 420px){
  .brand-name{display:none}
}

/* Text wrapping helpers */
.compare-row .c-name, .compare-row .c-pros{overflow-wrap:anywhere}