@font-face { font-family: "Bebas Neue"; font-weight: 400; font-display: swap; src: url("/fonts/bebas-neue-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }

/* Modern surf look. Every size inside a page is in cqw (1% of the page width), so a page looks the same on a phone, a desktop and printed A4. */
:root {
  --paper: #f6f4ef; --card: #ffffff; --ink: #0b1f2a; --soft: #4d6470; --line: #e3e0d8;
  --ocean: #0a4f63; --deep: #06222f; --teal: #13a3a0; --sun: #ffb11f; --orange: #ff5a1f; --coral: #ff3d6e;
  --sunset: linear-gradient(100deg, var(--sun), var(--orange) 50%, var(--coral));
  --display: "Bebas Neue", Impact, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: Inter, system-ui, sans-serif; background: #11181c; color: var(--ink); }
img { display: block; max-width: 100%; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; background: rgba(6,34,47,.92); backdrop-filter: blur(8px); font-size: .9rem; }
.bar a { color: #bcd4dc; text-decoration: none; white-space: nowrap; }
.bar a:hover { color: #fff; }
.bar__actions { display: flex; gap: .6rem; align-items: center; }
.bar button, .bar__ghost { font: inherit; font-weight: 700; padding: .55rem 1.1rem; border-radius: 99px; border: 0; cursor: pointer; white-space: nowrap; }
.bar button { background: var(--orange); color: #fff; }
.bar .bar__ghost { color: #fff; border: 1px solid rgba(255,255,255,.3); }
@media (max-width: 480px) { .bar { font-size: .8rem; padding: .6rem .7rem; } .bar button, .bar__ghost { padding: .5rem .8rem; } }

main { display: grid; gap: 2rem; justify-items: center; padding: 1.5rem 1rem 3rem; }
.pg {
  container-type: inline-size;
  position: relative; overflow: hidden; isolation: isolate;
  width: min(210mm, 100%); aspect-ratio: 210 / 297;
  padding: 11cqw 6.5cqw 9cqw;
  display: flex; flex-direction: column;
  background: var(--paper);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.8);
}
.pg > * { position: relative; }

/* Type */
.eyebrow { font-size: 1.55cqw; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .9; letter-spacing: .005em; }
h2 { font-size: 9.4cqw; margin: 1.2cqw 0 3.4cqw; }
h1 em, h2 em { font-style: normal; color: var(--orange); }
.lead { font-size: 2cqw; line-height: 1.6; color: var(--soft); }
.pg__head { position: absolute; top: 4.4cqw; left: 6.5cqw; right: 6.5cqw; display: flex; justify-content: space-between; font-size: 1.35cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8a989e; padding-bottom: 1.6cqw; border-bottom: .2cqw solid var(--line); }
.pg__foot { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 3.6cqw; display: flex; gap: 4cqw; align-items: center; font-size: 1.4cqw; font-weight: 700; letter-spacing: .1em; color: #8a989e; }
.pg__foot b { margin-left: auto; font-family: var(--display); font-weight: 400; font-size: 3.2cqw; letter-spacing: 0; color: var(--ink); }

/* Shared */
.lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1.2; }
.lines--dim { stroke: rgba(255,255,255,.05); }
.card__glow { position: absolute; left: 50%; top: 52%; width: 82%; height: 70%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 34%, transparent), transparent); }
.tag { display: inline-block; font-size: 1.2cqw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .55cqw 1.3cqw; border-radius: 99px; margin-right: .8cqw; }
.tag--proven { background: var(--ink); color: #fff; }
.tag--glow { background: #d9ff3a; color: var(--ink); }
.tag--out { background: var(--coral); color: #fff; }
.is-out img { opacity: .45; filter: grayscale(.7); }

/* Cover */
.pg--cover { padding: 6cqw 6.5cqw 0; color: #fff; background: radial-gradient(120% 70% at 50% 42%, #0e6a80 0%, var(--ocean) 30%, var(--deep) 75%); }
.cover__top { display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.cover__top img { width: 22cqw; height: auto; }
.cover__top span { font-size: 1.6cqw; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; text-align: right; color: #bcd4dc; }
.cover__top b { display: block; font-family: var(--display); font-weight: 400; font-size: 7cqw; letter-spacing: .02em; color: #fff; line-height: .9; }
.cover__sun { position: absolute; z-index: 0; left: 50%; top: 22cqw; width: 70cqw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: linear-gradient(180deg, var(--sun), var(--orange) 55%, var(--coral)); opacity: .95; }
.cover__sun::after { content: ""; position: absolute; inset: -25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,120,60,.35), transparent); z-index: -1; }
.cover__lure { position: absolute; z-index: 2; left: 4cqw; right: 4cqw; top: 36cqw; width: 92cqw; height: auto; transform: rotate(-10deg); }
.cover__copy { margin-top: auto; z-index: 2; padding-bottom: 4cqw; }
.cover__copy .eyebrow { color: var(--sun); }
.pg--cover h1 { font-size: 16cqw; margin: 1.4cqw 0 2.4cqw; }
.cover__sub { font-size: 2.2cqw; line-height: 1.55; color: #cfe2e8; max-width: 70cqw; }
.cover__bar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.7fr; margin: 0 -6.5cqw; border-top: .2cqw solid rgba(255,255,255,.14); z-index: 2; }
.cover__bar > div { padding: 3cqw 0 3.6cqw 6.5cqw; font-size: 1.45cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fc0ca; }
.cover__bar b { display: block; font-family: var(--display); font-weight: 400; font-size: 6.4cqw; letter-spacing: 0; color: #fff; line-height: 1; margin-bottom: .4cqw; }
.cover__cta { background: var(--sunset); color: #fff !important; padding-right: 6.5cqw !important; }
.cover__cta small { font-size: 1.45cqw; }
.cover__cta b { display: inline !important; margin-left: 1.2cqw; }
.cover__cta span { display: block; margin-top: .8cqw; color: #fff; }

/* Why */
.why { display: grid; grid-template-columns: 40cqw 1fr; gap: 5cqw; flex: 1; min-height: 0; }
.why__photo { position: relative; border-radius: 3cqw; overflow: hidden; min-height: 0; }
.why__photo img { width: 100%; height: 100%; object-fit: cover; }
figcaption { position: absolute; left: 2cqw; bottom: 2cqw; padding: 1cqw 2cqw; border-radius: 99px; background: rgba(255,255,255,.94); font-size: 1.5cqw; color: var(--soft); }
figcaption b { color: var(--ink); margin-right: 1cqw; }
.why__copy h2 { font-size: 8cqw; }
.why__copy .lead { font-size: 1.85cqw; margin-bottom: 3.4cqw; }
.benefits { list-style: none; display: grid; gap: 2.6cqw; }
.benefits li { display: grid; grid-template-columns: 6.4cqw 1fr; gap: 2.2cqw; align-items: start; }
.benefits__icon { width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.benefits svg { width: 3.4cqw; height: 3.4cqw; fill: none; stroke: var(--sun); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefits h3 { font-size: 3.2cqw; margin-bottom: .6cqw; }
.benefits p { font-size: 1.7cqw; line-height: 1.5; color: var(--soft); }
.trust { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; margin-top: 4cqw; padding-top: 3.4cqw; border-top: .2cqw solid var(--line); }
.trust li { font-size: 1.5cqw; line-height: 1.4; color: var(--soft); }
.trust b { display: block; font-family: var(--display); font-weight: 400; font-size: 4cqw; color: var(--ink); line-height: 1; margin-bottom: .6cqw; }

/* Size guide */
.ruler { padding: 2.4cqw 3cqw 1cqw; border-radius: 3cqw; background: var(--card); margin-bottom: 3cqw;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 .2cqw, transparent .2cqw 4.5cqw); background-size: 100% 1.6cqw; background-repeat: no-repeat; background-position: 0 100%; }
.ruler__row { display: grid; grid-template-columns: 1fr 17cqw; align-items: center; gap: 3cqw; padding: 1.4cqw 0; border-bottom: .2cqw dashed var(--line); }
.ruler__row:last-child { border-bottom: 0; }
.ruler__lure img { width: 100%; height: auto; }
.ruler__label { text-align: right; }
.ruler__label b { display: block; font-family: var(--display); font-weight: 400; font-size: 6cqw; line-height: .9; }
.ruler__label span { font-family: var(--display); font-size: 4.4cqw; color: var(--orange); }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; flex: 1; }
.spec { padding: 2.6cqw; border-radius: 3cqw; background: var(--card); border: .2cqw solid var(--line); }
.spec:nth-child(2) { background: var(--ink); color: #fff; border-color: var(--ink); }
.spec__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1.6cqw; margin-bottom: 1.8cqw; border-bottom: .2cqw solid var(--line); }
.spec:nth-child(2) .spec__top { border-color: rgba(255,255,255,.15); }
.spec h3 { font-size: 5cqw; }
.spec__top b { font-family: var(--display); font-weight: 400; font-size: 5cqw; color: var(--orange); }
.spec dl { display: grid; gap: 1.6cqw; }
.spec dt { font-size: 1.2cqw; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: .3cqw; }
.spec dd { font-size: 1.65cqw; line-height: 1.45; }

/* Collection cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.cards--full { margin-top: 1cqw; }
.cards--intro .card__img { height: 31cqw; }
.card { --c: #13a3a0; position: relative; padding: 2.2cqw 2.6cqw 2.4cqw; border-radius: 3cqw; background: var(--card); box-shadow: 0 .4cqw 1.6cqw rgba(11,31,42,.06); }
.card__tags { position: absolute; top: 2cqw; left: 2.4cqw; z-index: 2; }
.card__img { position: relative; height: 22cqw; display: grid; place-items: center; margin: 1.6cqw 0 1cqw; }
.card__img img { position: relative; max-width: 92%; max-height: 82%; width: auto; height: auto; transform: rotate(-7deg); }
.card__info { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
.card h3 { font-size: 4.6cqw; }
.card__price { font-family: var(--display); font-size: 3.4cqw; color: var(--orange); white-space: nowrap; }
.card__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-top: 1.4cqw; }
.card__sizes span { text-align: center; padding: .8cqw .4cqw; border-radius: 1.4cqw; background: var(--paper); font-size: 1.35cqw; color: var(--soft); }
.card__sizes b { color: var(--ink); }
.band { margin-top: auto; margin-bottom: 1cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 2.8cqw 3.4cqw; border-radius: 3cqw; background: var(--ink); color: #bcd4dc; font-size: 1.75cqw; line-height: 1.5; }
.band__title { font-family: var(--display); font-size: 5cqw; line-height: 1; margin-bottom: .8cqw; color: var(--sun); }
.band b { color: #fff; }
.band__qr { flex-shrink: 0; width: 13cqw; text-align: center; }
.band__qr svg, .qr svg { display: block; width: 100%; height: auto; border-radius: 1.4cqw; }
.band__qr span { display: block; margin-top: .8cqw; font-size: 1.2cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }

/* Guzz */
.pg--dark { color: #fff; background: radial-gradient(90% 60% at 50% 45%, #0e5d70, var(--deep) 75%); }
.pg--dark .pg__head { border-color: rgba(255,255,255,.12); color: #7fa3ae; }
.pg--dark .pg__foot { color: #7fa3ae; }
.pg--dark .pg__foot b { color: #fff; }
.pg--dark .eyebrow { color: var(--sun); }
.pg--dark .lead { color: #cfe2e8; max-width: 80cqw; margin-bottom: 2.4cqw; }
.chips { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin-bottom: 3cqw; }
.chips span { font-size: 1.5cqw; font-weight: 600; padding: 1cqw 2cqw; border-radius: 99px; border: .2cqw solid rgba(255,255,255,.22); color: #e3f0f4; }
.guzz { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.guzz__item { --c: #ffb11f; padding: 2cqw 3cqw 3cqw; border-radius: 3cqw; background: rgba(255,255,255,.06); border: .2cqw solid rgba(255,255,255,.12); }
.guzz__img { position: relative; height: 26cqw; display: grid; place-items: center; }
.guzz__img img { position: relative; max-width: 90%; max-height: 80%; width: auto; height: auto; transform: rotate(-8deg); }
.guzz__info { display: flex; justify-content: space-between; align-items: baseline; }
.guzz__info h3 { font-size: 6cqw; }
.guzz__info b { font-family: var(--display); font-weight: 400; font-size: 6cqw; color: var(--sun); }
.guzz__photo { position: relative; flex: 1; min-height: 0; margin-top: 3cqw; border-radius: 3cqw; overflow: hidden; }
.guzz__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* Order */
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-bottom: 3cqw; }
.steps li { counter-increment: s; padding: 2.6cqw; border-radius: 3cqw; background: var(--card); font-size: 1.65cqw; line-height: 1.5; color: var(--soft); }
.steps li::before { content: "0" counter(s); display: block; font-family: var(--display); font-size: 6cqw; line-height: 1; color: var(--orange); }
.steps b { display: block; font-family: var(--display); font-weight: 400; font-size: 4cqw; color: var(--ink); margin: .4cqw 0 .6cqw; }
.qrs { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-bottom: 3cqw; }
.qr { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw; border-radius: 3cqw; background: var(--ink); color: #bcd4dc; }
.qr svg { width: 17cqw; flex-shrink: 0; }
.qr b { display: block; font-family: var(--display); font-weight: 400; font-size: 4.4cqw; color: #fff; line-height: 1; margin-bottom: .6cqw; }
.qr span { display: block; font-size: 1.5cqw; line-height: 1.4; }
.qr em { display: inline-block; margin-top: 1.4cqw; font-style: normal; font-weight: 800; font-size: 1.5cqw; color: var(--ink); background: var(--sunset); padding: .6cqw 1.4cqw; border-radius: 99px; }
.qr--wa { background: var(--ocean); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.contact h3 { font-size: 3.6cqw; margin-bottom: 1.4cqw; }
.contact p { display: grid; grid-template-columns: 16cqw 1fr; font-size: 1.6cqw; line-height: 1.45; color: var(--soft); padding: .7cqw 0; border-bottom: .2cqw solid var(--line); }
.contact b { color: var(--ink); }
.catches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; flex: 1; min-height: 0; margin-top: 3cqw; }
.catches figure { position: relative; border-radius: 3cqw; overflow: hidden; min-height: 0; }
.catches img { width: 100%; height: 100%; object-fit: cover; }
.catches figcaption { font-weight: 700; color: var(--ink); }

@media print {
  @page { size: A4; margin: 0; }
  body { background: none; }
  .bar { display: none; }
  main { display: block; padding: 0; }
  .pg { width: 210mm; height: 297mm; aspect-ratio: auto; box-shadow: none; break-after: page; }
  .pg:last-child { break-after: auto; }
}