:root{
  --bg:#f5f1e8; --panel:#fff; --text:#1f2937; --muted:#6b7280;
  --accent:#1b2a4a; --soft:#e8dcc3; --gold:#f5a623;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,sans-serif;background:var(--bg);color:var(--text)}
.app{min-height:100vh;display:flex;flex-direction:column}
.page{padding:32px;flex:0 0 auto}
.hidden{display:none}
.muted{color:var(--muted)}
.pre{white-space:pre-wrap;line-height:1.5}

/* HEADER */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;background:var(--soft);
  position:sticky;top:0;z-index:5
}
.logo{display:flex;gap:10px;align-items:center;cursor:pointer}
.logo img{height:36px}
.brand{font-family:Montserrat;font-size:22px;line-height:1.1}
.support-mini{font-size:12px;color:var(--muted)}
.support-mini a{color:var(--accent);text-decoration:none}
.support-mini a:hover{text-decoration:underline}

.nav-center{display:flex;gap:12px;justify-content:center;flex:1}
.nav-center button{
  background:none;border:none;font-weight:700;cursor:pointer;
  padding:8px 10px;border-radius:10px;
  transition:.15s ease
}
.nav-center button:hover{background:rgba(27,42,74,.08)}

.lang{display:flex;gap:8px}
.lang-btn{
  border:1px solid var(--accent);background:none;
  padding:6px 10px;border-radius:10px;cursor:pointer;
  transition:.15s ease
}
.lang-btn:hover{background:var(--accent);color:#fff}

/* HERO */
.hero{position:relative;height:300px;overflow:hidden;border-radius:18px}
.hero img{width:100%;height:100%;object-fit:cover;filter:blur(7px);transform:scale(1.08)}
.hero-text{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:rgba(0,0,0,.42);color:#fff;text-align:center;padding:18px
}
.hero-text h1{font-family:Montserrat;font-size:44px;margin:0}
.hero-text p{margin:10px 0 16px 0;opacity:.95}

/* BUTTONS */
.primary{
  background:var(--accent);color:#fff;border:none;padding:12px 26px;border-radius:12px;cursor:pointer;
  transition:.15s ease;box-shadow:0 10px 26px rgba(27,42,74,.18)
}
.primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(27,42,74,.22)}
.primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,42,74,.35)}100%{box-shadow:0 0 0 18px rgba(27,42,74,0)}}

/* CONTENT */
.section-title{font-family:Montserrat}
.about{
  max-width:980px;margin:26px auto 0 auto;background:var(--panel);
  padding:24px;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.06)
}
.support-callout{
  margin-top:14px;background:rgba(27,42,74,.06);padding:12px 14px;border-radius:14px
}
.support-callout a{color:var(--accent);text-decoration:none;font-weight:700}
.support-callout a:hover{text-decoration:underline}

/* PRICES */
.price-table{
  background:var(--panel);padding:18px;border-radius:18px;margin:18px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.06)
}
.price-title{font-family:Montserrat;margin-bottom:10px}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.price-card{background:rgba(0,0,0,.02);padding:14px;border-radius:14px}
.tiny{font-size:12px;color:var(--muted);margin-top:8px}

/* FLAVORS */
.flavors{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:16px}
.flavor{
  background:var(--panel);padding:12px;border-radius:18px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.06)
}
.flavor img{width:100%;height:150px;object-fit:contain}
.flavor img.watermelon{transform:scale(.92)}
.flavor span{display:block;font-size:13px;margin-top:6px}
.flavor input{
  width:80px;margin-top:8px;padding:8px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12)
}
.flavor input:disabled{opacity:.5}

/* ORDER */
.order-box{
  max-width:620px;margin:24px auto;background:var(--panel);padding:22px;border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06)
}
.order-head{font-family:Montserrat;font-size:18px;margin-bottom:12px}
.order-box label{font-weight:700}
.order-box select,.order-box input{
  width:100%;padding:10px;margin-top:6px;border-radius:12px;border:1px solid rgba(0,0,0,.12)
}
.wh-pack{margin:12px 0 6px 0}
.wh-pack-title{font-weight:800;margin-bottom:10px}
.wh-pack-row{display:flex;gap:10px;flex-wrap:wrap}
.wh-btn{
  border:none;border-radius:14px;padding:10px 12px;cursor:pointer;
  background:rgba(27,42,74,.08);transition:.15s ease;font-weight:800
}
.wh-btn:hover{background:rgba(27,42,74,.14);transform:translateY(-1px)}
.wh-btn.active{background:var(--accent);color:#fff}
.wh-pack-note{font-size:12px;color:var(--muted);margin-top:8px}

.hint{color:var(--muted);font-size:14px;margin-top:10px}
.total{font-size:18px;margin:12px 0}
.afterpay{margin-top:10px}

/* REVIEWS */
.reviews{margin-top:34px}
.review-viewport{overflow:hidden;border-radius:18px}
.review-track{
  display:flex;gap:14px;will-change:transform;
  animation:scroll 34s linear infinite;
}
.review{
  min-width:300px;background:var(--panel);padding:14px;border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06)
}
.stars{color:var(--gold);letter-spacing:1px;font-size:14px;margin-bottom:6px}
.review p{margin:0 0 8px 0;color:#334155}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* INFO (geresnis fontas) */
.rules-text{
  background:var(--panel);padding:20px;border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  font-family:Sora, Inter, sans-serif;
  font-size:15px;
}

/* FOOTER (visada apačioj) */
.footer{
  margin-top:auto;
  background:var(--accent);color:#fff;text-align:center;padding:16px
}

/* MOBILE */
@media(max-width:980px){
  .price-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .flavors{grid-template-columns:repeat(2,1fr)}
  .topbar{flex-wrap:wrap;gap:10px}
  .nav-center{order:3;flex:1 0 100%;justify-content:center}
}