:root{--navy:#0b2447;--navy2:#143e72;--gold:#d8b46a;--sea:#4cc9f0;--paper:#f7fbff;--text:#102033;--muted:#66728a;--line:#dbe8f5;--shadow:0 22px 60px rgba(11,36,71,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:linear-gradient(180deg,#eaf7ff 0,#fff 58%,#f6fbff 100%);color:var(--text)}.hero{position:relative;overflow:hidden;text-align:center;padding:34px 16px 42px;background:radial-gradient(circle at 50% -15%,#2e6ba5 0,#123d70 40%,#0b2447 100%);color:#fff;border-radius:0 0 42px 42px;box-shadow:0 24px 70px rgba(11,36,71,.32)}.hero:after{content:"";position:absolute;inset:auto -10% -45px -10%;height:115px;background:radial-gradient(ellipse at center,rgba(76,201,240,.25),transparent 65%)}.glow{position:absolute;border-radius:999px;filter:blur(22px);opacity:.34;animation:move 8s ease-in-out infinite}.glow-one{width:240px;height:240px;background:#49d3ff;left:-80px;top:-50px}.glow-two{width:280px;height:280px;background:#d8b46a;right:-100px;bottom:-120px;animation-delay:1.2s}.topline{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;align-items:center;font-weight:800;letter-spacing:.02em;color:#e6f7ff}.topline span+span:before{content:"·";margin-right:8px;color:var(--gold)}.logo{position:relative;z-index:2;width:min(270px,66vw);margin:12px auto 10px;display:block;filter:drop-shadow(0 18px 28px rgba(0,0,0,.28));animation:float 4.5s ease-in-out infinite}.subtitle{position:relative;z-index:2;margin:6px 0 10px;color:#dff8ff;text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:700}.hero h1{position:relative;z-index:2;margin:0 0 18px;font-size:clamp(28px,4.5vw,52px);line-height:1.05}.langs{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}.langs button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff;border-radius:999px;padding:9px 13px;font-weight:900;cursor:pointer;backdrop-filter:blur(12px)}.langs button.active{background:linear-gradient(135deg,#fff,#eaf9ff);color:var(--navy);box-shadow:0 12px 30px rgba(0,0,0,.18)}.search-wrap{position:relative;z-index:2}#search{width:min(560px,92vw);border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:15px 20px;font-size:16px;outline:0;background:rgba(255,255,255,.95);box-shadow:0 18px 40px rgba(0,0,0,.16)}main{max-width:1180px;margin:auto;padding:30px 16px 44px}.tabs{position:sticky;top:0;z-index:5;display:flex;gap:12px;overflow:auto;padding:10px 2px 18px;margin-bottom:12px;scrollbar-width:thin;background:linear-gradient(180deg,rgba(247,251,255,.96),rgba(247,251,255,.82));backdrop-filter:blur(12px)}.tabs button{white-space:nowrap;border:1px solid #e0ebf6;background:rgba(255,255,255,.9);color:var(--navy);padding:14px 18px;border-radius:18px;box-shadow:0 12px 26px rgba(11,36,71,.08);font-weight:900;cursor:pointer;transition:.2s}.tabs button.active,.tabs button:hover{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;transform:translateY(-1px);box-shadow:0 16px 35px rgba(11,36,71,.18)}.category-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:18px 0}.category-head h2{font-size:clamp(26px,4vw,42px);margin:0}.eyebrow{color:#0b6d88;background:#e6faff;border:1px solid #c9f2ff;padding:8px 12px;border-radius:999px;font-weight:900}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.card{position:relative;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid rgba(219,232,245,.9);border-radius:28px;padding:20px;box-shadow:var(--shadow);transition:.22s;min-height:150px}.card:before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--gold),var(--sea))}.card:hover{transform:translateY(-5px)}.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.card h3{font-size:20px;margin:0 0 10px;line-height:1.2}.card p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}.muted{opacity:.62}.price{flex:0 0 auto;background:linear-gradient(135deg,#eafcff,#d9f6ff);color:#075e78;padding:10px 13px;border-radius:999px;font-weight:950;box-shadow:inset 0 0 0 1px rgba(76,201,240,.28)}.notice,.loading{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow);font-weight:800}.footer{padding:34px 16px 44px;text-align:center;color:#62718c}.footer-card{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:14px 22px;box-shadow:0 18px 45px rgba(11,36,71,.08)}.footer-card img{width:80px}.footer-card div{display:grid;text-align:left}.footer-card strong{color:var(--navy)}.footer-card span{font-size:14px}.powered{margin-top:14px}@keyframes float{50%{transform:translateY(-7px)}}@keyframes move{50%{transform:scale(1.2) translate(20px,-12px)}}@media(max-width:640px){.hero{padding-top:24px;border-radius:0 0 32px 32px}.topline{font-size:13px}.grid{grid-template-columns:1fr}.card{border-radius:24px}.card-top{display:block}.price{display:inline-flex;margin-top:6px}.footer-card{display:grid;text-align:center}.footer-card div{text-align:center}.tabs{margin-left:-16px;margin-right:-16px;padding-left:16px}}

/* Premium slime animations */
.lang-btn, .tab-btn, .card, .price { will-change: transform, border-radius; }
.lang-btn{position:relative;overflow:hidden;border-radius:999px;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
.lang-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 35px rgba(66,199,232,.22);animation:slimeSoft 2.6s ease-in-out infinite;}
.tab-btn{position:relative;overflow:hidden;border-radius:22px!important;transition:transform .28s ease, box-shadow .28s ease, background .28s ease;}
.tab-btn::before{content:"";position:absolute;inset:-60%;background:radial-gradient(circle,rgba(66,199,232,.35),transparent 55%);transform:translateX(-70%) rotate(18deg);transition:.65s ease;}
.tab-btn:hover::before{transform:translateX(20%) rotate(18deg)}
.tab-btn:hover{transform:translateY(-5px) scale(1.025);animation:slimeTab 2.8s ease-in-out infinite;box-shadow:0 20px 45px rgba(16,43,82,.16);}
.tab-btn span{position:relative;z-index:2}.tab-btn.active{animation:slimeActive 3.4s ease-in-out infinite;}
.card{position:relative;overflow:hidden;animation:cardRise .55s ease both;transition:transform .28s ease, box-shadow .28s ease, border-radius .28s ease;}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#d2b45f,#42c7e8,#0f2d52);}
.card::after{content:"";position:absolute;width:140px;height:140px;border-radius:45% 55% 60% 40%;right:-80px;bottom:-90px;background:rgba(66,199,232,.13);filter:blur(2px);transition:.5s ease;}
.card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 28px 70px rgba(16,43,82,.20);border-radius:34px;}
.card:hover::after{right:-35px;bottom:-45px;animation:slimeBlob 3s ease-in-out infinite;}
.price{transition:.25s ease}.card:hover .price{transform:scale(1.08) rotate(-1deg)}
@keyframes cardRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slimeSoft{0%,100%{border-radius:999px}50%{border-radius:46% 54% 57% 43% / 50% 43% 57% 50%}}
@keyframes slimeTab{0%,100%{border-radius:22px}50%{border-radius:30px 18px 28px 20px}}
@keyframes slimeActive{0%,100%{transform:translateY(0);border-radius:22px}50%{transform:translateY(-2px);border-radius:28px 20px 30px 18px}}
@keyframes slimeBlob{0%,100%{border-radius:45% 55% 60% 40%;transform:scale(1)}50%{border-radius:62% 38% 42% 58%;transform:scale(1.18) translate(-8px,-6px)}}
@media (prefers-reduced-motion: reduce){.card,.tab-btn,.lang-btn,.tab-btn.active{animation:none!important;transition:none!important}}


/* FIX CATEGORIES DESKTOP + MOBILE */
.tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 14px 16px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tabs button {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  white-space: nowrap;
  padding: 14px 22px;
  border-radius: 20px;
  scroll-snap-align: start;
}

.tabs::-webkit-scrollbar {
  height: 6px;
}

.tabs::-webkit-scrollbar-thumb {
  background: rgba(16, 43, 82, 0.35);
  border-radius: 20px;
}

@media (max-width: 600px) {
  .hero {
    padding: 36px 18px 28px;
    border-radius: 0 0 28px 28px;
  }

  .hero h1 {
    font-size: 30px;
    line-height: 1.1;
  }

  .langs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tabs {
    margin-top: 14px;
    padding: 12px 14px 16px;
  }

  .tabs button {
    font-size: 14px;
    padding: 13px 18px;
  }

  main {
    padding: 18px 12px;
  }

  .category h2 {
    font-size: 34px;
    text-align: left;
  }
}