/* Water Me(ow) – strona. Tokeny przepisane z WaterCat/Theme.swift i DESIGN.md: zmiana w apce = zmiana tutaj. */
:root {
  color-scheme: light;
  /* Kolory (Theme) */
  --accent: #298CF2;
  --sky: #D9EDFF;
  --mist: #F7FCFF;
  --streak: #6D9F3D;
  --freeze: #339EC7;
  --nose: #E05770;
  --warning: #D9402B;
  --water: #9ED6FA;
  --water-ink: #2980E6;
  --outline: #B3C7E6;
  --shadow: rgba(51, 102, 179, 0.12);
  --tint: rgba(41, 140, 242, 0.12);
  --ink: #13284A;
  --text: #13284A;
  --secondary: #5B6B85;
  --accent-text: #1C6FD1;
  --gold: #C9962B;
  --hairline: rgba(19, 40, 74, 0.05);
  --lift: rgba(41, 100, 180, 0.10);
  --white: #FFFFFF;
  /* Napoje (Drink.color) */
  --water-drink: #5CB8ED;
  --tea: #85C24A;
  --coffee: #784F3D;
  --juice: #FAAD38;
  --sparkling: #2BB5C9;
  --milk: #8C9EE0;
  --cola: #E0473D;
  --lemonade: #E3B31C;
  --sports: #5C6EE8;
  --energy: #8F54D9;
  --smoothie: #ED6B99;
  /* Spacing */
  --xxs: 2px; --xs: 4px; --s: 8px; --m: 12px; --l: 16px; --xl: 24px; --xxl: 32px;
  /* Radius / Size */
  --r-card: 18px; --r-large: 24px;
  --tap: 44px; --button: 56px; --badge: 24px; --drink: 60px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(var(--sky), var(--mist) 900px) var(--mist);
  line-height: 1.45;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--l); }
@media (min-width: 640px) { .wrap { padding: 0 var(--xl); } }

/* Nagłówek */
.top { display: flex; align-items: center; gap: var(--m); padding-block: var(--l); }
.brand { display: flex; align-items: center; gap: var(--s); color: var(--text); font-weight: 800; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px var(--shadow); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: var(--s); }
.top nav a:not(.lang) { display: none; padding: 0 var(--s); line-height: var(--tap); }
@media (min-width: 720px) { .top nav a:not(.lang) { display: inline-block; } }
.lang {
  display: inline-flex; align-items: center; gap: var(--xs);
  height: var(--tap); padding: 0 var(--l); border-radius: 999px;
  background: var(--white); color: var(--accent); font-weight: 700;
  box-shadow: 0 2px 10px var(--shadow);
}
.lang:hover { text-decoration: none; }
.lang svg { width: 18px; height: 18px; }

/* Typografia (role Font) */
h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
h3 { font-size: 1.1rem; font-weight: 700; }
.lead { font-size: 1.2rem; color: var(--secondary); margin: var(--l) 0 0; max-width: 34em; }
.note { color: var(--secondary); margin: var(--xxs) 0 0; }
.eyebrow { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s); }

/* Przyciski (Components.swift) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s);
  height: var(--button); padding: 0 var(--xl); border-radius: 999px;
  font: 700 1.05rem var(--font); border: 0; cursor: pointer;
  transition: transform .15s, opacity .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-secondary { background: var(--tint); color: var(--accent); }
.btn svg { width: 22px; height: 22px; }
.btn[aria-disabled="true"] { cursor: default; }

.card { background: var(--white); border-radius: var(--r-card); padding: var(--l); box-shadow: 0 0 0 1px var(--hairline), 0 6px 18px var(--lift); }

/* Hero */
.hero { display: grid; gap: var(--xxl); align-items: center; padding-block: var(--xl) var(--xxl); }
@media (min-width: 880px) { .hero { grid-template-columns: 1.1fr 0.9fr; padding-block: var(--xxl) 64px; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--m); margin-top: var(--xl); align-items: center; }
.hero-cta small { color: var(--secondary); font-size: .9rem; }
.bubble {
  position: relative; display: inline-block; background: var(--white); border-radius: var(--r-large);
  padding: var(--m) var(--l); margin-bottom: var(--xl); font-weight: 700; box-shadow: 0 8px 24px var(--shadow);
}
.bubble::after {
  content: ""; position: absolute; left: 32px; bottom: -11px; width: 24px; height: 12px;
  background: var(--white); clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Telefon z makietą ekranu */
.phone {
  position: relative; width: min(320px, 100%); aspect-ratio: 9 / 19.2; margin: 0 auto;
  border-radius: 48px; padding: 10px; background: var(--white);
  box-shadow: 0 30px 60px rgba(51, 102, 179, .22), 0 0 0 1px rgba(51, 102, 179, .08);
}
.screen {
  position: relative; height: 100%; border-radius: 38px; overflow: hidden;
  background: linear-gradient(var(--sky), var(--mist));
  display: flex; flex-direction: column; padding: 46px 14px 14px;
  font-size: 13px;
}
.screen::before { /* Dynamic Island */
  content: ""; position: absolute; top: 10px; left: 50%; translate: -50% 0;
  width: 88px; height: 26px; border-radius: 999px; background: #111;
}
.screen-top { display: flex; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 5px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-weight: 800; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--hairline), 0 6px 14px var(--lift);
}
.chip-drop { width: 24px; height: 24px; border-radius: 50%; background: var(--streak); color: var(--white); display: grid; place-items: center; }
.chip-drop svg { width: 12px; height: 12px; }
.pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 6px; border-radius: 999px; background: var(--white); color: var(--accent);
  box-shadow: 0 0 0 1px var(--hairline), 0 6px 14px var(--lift);
}
.pill span { width: 30px; display: grid; place-items: center; }
.pill svg { width: 15px; height: 15px; }
.spacer { flex: 1; }
.total { margin-top: 14px; text-align: center; font-weight: 900; font-size: 54px; line-height: 1; letter-spacing: -2px; color: var(--accent); font-variant-numeric: tabular-nums; }
.total small { font-size: 18px; font-weight: 900; letter-spacing: 0; margin-left: 4px; }
.sub { text-align: center; font-weight: 700; color: var(--secondary); margin-top: 8px; font-size: 12.5px; }
.sub b { color: var(--ink); font-weight: 900; font-size: 14px; margin-right: 2px; }

/* Stefan napełniany wodą (CatView z waterLevel) */
.cat { position: relative; container-type: size; flex: 1; min-height: 0; margin: 10px 8px; filter: drop-shadow(0 8px 16px var(--shadow)); }
.cat > img, .cat .fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cat .fill {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc((1 - var(--level, 0)) * 100% - 10px);
  overflow: hidden; transition: top .8s ease-in-out;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10'%3E%3Cpath d='M0 5 Q20 0 40 5 T80 5 V10 H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 10px,
                linear-gradient(#000, #000) no-repeat 0 10px / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10'%3E%3Cpath d='M0 5 Q20 0 40 5 T80 5 V10 H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 10px,
                linear-gradient(#000, #000) no-repeat 0 10px / 100% 100%;
  animation: wave 1.6s linear infinite;
}
.cat .fill img { top: auto; bottom: 0; height: 100cqh; }
.cat .color { opacity: 0; transition: opacity .6s; }
.cat.done .color { opacity: 1; }
.cat.done .fill, .cat.done .empty, .cat.done .pace { opacity: 0; }
.cat .pace {
  position: absolute; left: -4px; right: -4px; top: calc((1 - var(--pace, .5)) * 100%);
  display: flex; align-items: center; gap: 4px; color: var(--secondary); font-weight: 700; font-size: 10px;
  transition: opacity .4s;
}
.cat .pace::before { content: ""; flex: 1; border-top: 2px dashed currentColor; }
@keyframes wave { to { -webkit-mask-position: 80px 0, 0 10px; mask-position: 80px 0, 0 10px; } }
.breathe { animation: breathe 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.015, 0.99); } }

/* Rząd napojów w białej karcie (HomeView) */
.dock { background: var(--white); border-radius: 22px; padding: 12px 12px 10px; margin: 0 -6px -6px; box-shadow: 0 0 0 1px var(--hairline), 0 -6px 18px var(--lift); }
.dock-title { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); margin: 0 0 8px 4px; }
.drinks { display: flex; gap: 4px; overflow: hidden; }
.drink {
  flex: none; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink);
}
.drink-icon { position: relative; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); display: grid; place-items: center; transition: transform .15s; }
.drink:active .drink-icon { transform: scale(.94); }
.drink-icon svg { width: 24px; height: 24px; }
.drink-icon .plus {
  position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--c); border: 2px solid var(--white); color: var(--white); display: grid; place-items: center;
  font-weight: 800; font-size: 12px; line-height: 1;
}
.drink-icon .plus.lock { background: var(--secondary); }
.drink-icon .plus.lock svg { width: 9px; height: 9px; }
.drink span { font-size: 9px; font-weight: 800; text-transform: uppercase; text-align: center; line-height: 1.15; }

/* Sekcje */
section { padding: 56px 0; }
.section-head { max-width: 40em; margin-bottom: var(--xxl); }
.shots { display: grid; gap: var(--xxl); }
.shot figcaption { text-align: center; margin-top: var(--l); }
.shot figcaption b { display: block; font-size: 1.1rem; }
.shot { margin: 0; }
.shots .phone { width: min(280px, 100%); }
.shots .screen { font-size: 12px; }

.features { display: grid; gap: var(--s); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { display: flex; gap: var(--l); align-items: flex-start; }
.feature .dot {
  flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--c);
  color: var(--white); display: grid; place-items: center;
}
.feature .dot svg { width: 22px; height: 22px; }
.feature p { margin: var(--xxs) 0 0; color: var(--secondary); }
.premium-tag {
  display: inline-block; margin-left: var(--xs); padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--accent); color: var(--white); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

/* Premium */
.premium { display: grid; gap: var(--xxl); align-items: center; }
@media (min-width: 880px) { .premium { grid-template-columns: 0.8fr 1.2fr; } }
.premium-cat { width: min(260px, 70%); margin: 0 auto; filter: drop-shadow(0 12px 24px var(--shadow)); }
.plans { display: grid; gap: var(--s); grid-template-columns: 1fr 1fr; margin-top: var(--xl); }
.plan { position: relative; text-align: center; padding: var(--xl) var(--l) var(--l); }
.plan.best { box-shadow: 0 0 0 2.5px var(--accent); }
.plan .ribbon {
  position: absolute; top: -12px; left: 50%; translate: -50% 0; white-space: nowrap;
  background: var(--accent); color: var(--white); border-radius: 999px; padding: 3px 10px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
}
.plan b { display: block; font-size: 1.15rem; }

/* Prywatność w skrócie */
.privacy-points { display: grid; gap: var(--s); }
@media (min-width: 720px) { .privacy-points { grid-template-columns: repeat(2, 1fr); } }
.privacy-points .card { display: flex; gap: var(--m); align-items: flex-start; }
.privacy-points svg { flex: none; width: 24px; height: 24px; color: var(--accent); margin-top: 1px; }

/* Stopka */
footer { padding: var(--xxl) 0 48px; color: var(--secondary); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: var(--l) var(--xl); align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--xs) var(--l); }
footer nav a { line-height: var(--tap); }
footer .copy { margin-left: auto; }

/* Polityka prywatności (PrivacyView) */
.doc { max-width: 720px; margin: 0 auto; padding-block: var(--l) var(--xxl); }
.doc h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: var(--s); }
.doc h2 { font-size: 1.25rem; margin: var(--xxl) 0 var(--s); }
.doc .card + .card { margin-top: var(--s); }
.doc .card p { margin: 0; }
.doc .card p + p { margin-top: var(--m); }
.doc ul.summary { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m); }
.doc ul.summary li { display: flex; gap: var(--m); }
.doc ul.summary svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.doc .updated { color: var(--secondary); margin-top: var(--xl); font-size: .95rem; }
.ext::after { content: " ↗"; }

/* Konfetti z demo */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translate(var(--dx), 720px) rotate(var(--rot)); } }

@media (prefers-reduced-motion: reduce) {
  .cat .fill, .breathe { animation: none; }
  .confetti { display: none; }
  html { scroll-behavior: auto; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kolumny siatek mogą się zwężać (bez tego makieta telefonu rozpycha stronę na wąskim ekranie). */
.hero, .shots, .features, .premium, .privacy-points { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .privacy-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
  .premium { grid-template-columns: 0.8fr 1.2fr; }
}
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#premium .features { grid-template-columns: minmax(0, 1fr); }

/* Prawdziwe zrzuty: trzy w rzędzie na szerokim ekranie, dwa na średnim. */
@media (min-width: 560px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xl); } }
.phone.real { aspect-ratio: auto; padding: 8px; border-radius: 40px; }
.phone.real img { width: 100%; height: auto; border-radius: 32px; }
.shots .phone.real { width: min(260px, 100%); }

/* Stroje Stefana (SkinPickerView): siatka kart, nowy strój z plakietką */
.skins { display: grid; gap: var(--m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .skins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skin { margin: 0; text-align: center; position: relative; padding: var(--l) var(--m) var(--l); }
.skin img { width: min(210px, 80%); aspect-ratio: 1; object-fit: contain; margin: 0 auto var(--s); }
.skin b { display: block; font-size: 1.1rem; }
.skin .note { display: block; font-size: .95rem; }
.skin-how {
  display: inline-flex; align-items: center; gap: var(--xs); margin-top: var(--m); padding: 3px 10px; border-radius: 999px;
  background: var(--tint); color: var(--accent-text); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.skin-how.premium { background: #FFF3D6; color: #8A6100; }
.skin-how svg { width: 14px; height: 14px; }
.skin.new { box-shadow: 0 0 0 2.5px var(--streak), 0 6px 18px var(--lift); }
.skin.new::before {
  content: attr(data-new); position: absolute; top: -11px; left: 50%; translate: -50% 0; background: var(--streak); color: var(--white);
  border-radius: 999px; padding: 2px 10px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}