/* SharkClub.win — brand redesign (logo-driven)
   Big circular logo + big type, light-blue brand palette from the logo.
   Mobile-first, high contrast, playful but trustworthy. */

/* ---------- Fonts (self-hosted, no external calls) ---------- */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-latinext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF;
}

/* ---------- Palette (from the SharkClub logo) ---------- */
:root {
  --ink:        #162e4c;   /* logo navy — headings, high contrast */
  --ink-soft:   #3d5a80;
  --sea:        #2a6f92;   /* logo teal — links, secondary */
  --sea-deep:   #1c4a66;
  --sky:        #abcce1;   /* logo light blue */
  --mist:       #e8f2f9;   /* pale page background */
  --card:       #ffffff;
  --coral:      #ff5a5f;   /* playful action accent */
  --coral-dark: #e03e46;
  --sun:        #ffcf3f;
  --sun-dark:   #eda90f;
  --line:       rgba(22, 46, 76, .14);
  --shadow-lg:  0 22px 45px rgba(22, 46, 76, .18), 0 6px 0 rgba(22, 46, 76, .06);
  --shadow-sm:  0 8px 0 rgba(22, 46, 76, .08), 0 14px 24px rgba(22, 46, 76, .10);
  --radius:     30px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Fredoka', 'Segoe UI Rounded', 'Comic Sans MS', ui-rounded,
               'Trebuchet MS', sans-serif;
  color: var(--ink);
  line-height: 1.5;
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(171,204,225,.55), rgba(232,242,249,0) 70%),
    linear-gradient(180deg, #ffffff 0%, var(--mist) 34%, #dcebf6 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.page { max-width: 620px; margin: 0 auto; padding: 0 18px 64px; }

/* ---------- Top bar (interior pages) ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  max-width: 620px; margin: 0 auto;
  padding: 14px 18px 6px;
}
.logo { display: inline-block; text-decoration: none; }
.logo-img {
  display: block;
  width: clamp(96px, 26vw, 148px);
  height: auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.logo-img:hover { transform: rotate(-3deg) scale(1.03); }
.logo-img:active { transform: translateY(2px); }

.nav-links { display: flex; gap: 8px; }
.nav-btn {
  color: #fff; text-decoration: none; font-weight: 600;
  background: var(--sea); border: none;
  border-radius: 999px; padding: 11px 20px; font-size: 1rem;
  box-shadow: 0 4px 0 var(--sea-deep);
}
.nav-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sea-deep); }
.nav-btn--light { background: var(--coral); box-shadow: 0 4px 0 var(--coral-dark); }
.nav-btn--light:active { box-shadow: 0 1px 0 var(--coral-dark); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: #fff;
  border-radius: 0 0 46px 46px;
  box-shadow: 0 18px 40px rgba(22, 46, 76, .10);
  padding: 48px 22px 52px;
  margin: 0 -18px;            /* full-bleed white band inside .page gutters */
  text-align: center;
}
.hero-nav { position: absolute; top: 18px; right: 18px; }
.hero-logo {
  width: clamp(210px, 62vw, 400px);
  height: auto;
  border-radius: 50%;
  margin: 0 auto 26px;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(22,46,76,.20));
}
.hero-title {
  font-size: clamp(2.9rem, 13.5vw, 5rem);
  line-height: 1.0;
  letter-spacing: .5px;
  margin: 6px 0 4px;
  font-weight: 700;
  color: var(--ink);
}
.hero-title .t2 { color: var(--sea); }
.hero-sub {
  font-size: clamp(1.2rem, 4.6vw, 1.5rem);
  color: var(--ink-soft);
  font-weight: 500;
  max-width: 34ch; margin: 14px auto 0;
}
.hero-tag {
  display: inline-block;
  background: var(--mist);
  color: var(--sea-deep);
  font-weight: 700; font-size: .95rem;
  border-radius: 999px; padding: 7px 18px;
  border: 2px solid rgba(42,111,146,.25);
}

/* ---------- Cards / sections ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 24px;
  border: none;
}
.card h1, .card h2, .card h3 { margin-top: 0; }

h1 { font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.06; margin: .15em 0 .2em; font-weight: 700; color: var(--ink); }
h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.12; font-weight: 700; }
.center { text-align: center; }
.lead { font-size: clamp(1.15rem, 4.6vw, 1.4rem); color: var(--ink-soft); font-weight: 500; }
.desc { color: var(--ink-soft); font-size: 1.05rem; max-width: 42ch; margin: .5em auto; }
.muted { color: #7c93ab; }
.tag {
  display: inline-block; background: var(--sun); color: var(--ink);
  border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: .95rem;
}
.spacer { height: 10px; }
.hide { display: none; }
.small-note { font-size: .85rem; color: var(--ink-soft); text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; text-align: center; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  border-radius: 999px; min-height: 62px; padding: 10px 26px;
  font-size: clamp(1.2rem, 5vw, 1.45rem); color: #fff;
  transition: transform .06s ease, box-shadow .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(5px); }
.btn-coral { background: var(--coral); box-shadow: 0 8px 0 var(--coral-dark); }
.btn-coral:active { box-shadow: 0 3px 0 var(--coral-dark); }
.btn-sun   { background: var(--sun); color: var(--ink); box-shadow: 0 8px 0 var(--sun-dark); }
.btn-sun:active   { box-shadow: 0 3px 0 var(--sun-dark); }
.btn-sea   { background: var(--sea); box-shadow: 0 8px 0 var(--sea-deep); }
.btn-sea:active   { box-shadow: 0 3px 0 var(--sea-deep); }
.btn-ghost { background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: 0 6px 0 rgba(22,46,76,.08); }
.btn-ghost:active { box-shadow: 0 1px 0 rgba(22,46,76,.08); }
.btn-lg { width: min(92%, 430px); min-height: 76px; font-size: clamp(1.4rem, 6vw, 1.8rem); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.reassure { color: var(--ink-soft); font-size: .98rem; margin-top: 22px; font-weight: 500; }

/* ---------- Forms ---------- */
.field { margin: 0 0 20px; text-align: left; }
.field label { display: block; font-weight: 700; font-size: 1.08rem; margin-bottom: 8px; }
.input {
  width: 100%; font-family: inherit; font-size: 1.2rem; font-weight: 500;
  color: var(--ink); background: var(--mist);
  border: 3px solid var(--sea); border-radius: 18px;
  padding: 15px 18px; min-height: 58px;
}
.input:focus { outline: 4px solid rgba(255,207,63,.65); background: #fff; border-color: var(--sea-deep); }
.input::placeholder { color: #9fb3c6; font-weight: 400; }
.opt { font-size: .92rem; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Shark stage (reward) ---------- */
.stage { margin: 4px auto 14px; }
.stage img.shark-big {
  width: min(78%, 300px);
  height: auto;
  display: block; margin: 0 auto;
  background: #fff;
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  animation: pop .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes pop {
  0% { transform: scale(.5) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- Collection ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.shark-card {
  background: var(--card); border-radius: 22px;
  box-shadow: 0 6px 0 rgba(22,46,76,.07), 0 12px 22px rgba(22,46,76,.09);
  padding: 16px 12px 12px; text-align: center;
  animation: pop .4s ease backwards;
}
.shark-card img { width: 82%; height: auto; margin: 0 auto 8px; display: block; border-radius: 14px; }
.shark-card .name { font-weight: 700; font-size: 1.08rem; line-height: 1.15; }
.shark-card .book { color: var(--ink-soft); font-size: .86rem; line-height: 1.25; }
.shark-card .date { color: #8ba1b7; font-size: .76rem; margin-top: 4px; }
.count-pill {
  background: var(--sun); color: var(--ink); font-weight: 700;
  border-radius: 999px; padding: 8px 18px; display: inline-block; font-size: 1.05rem;
}
.ribbon { font-size: clamp(1.25rem,5.5vw,1.6rem); font-weight: 700; color: var(--ink); }

/* ---------- Reward bits ---------- */
.confetti { font-size: 2.6rem; letter-spacing: 5px; }
.rowline { font-size: clamp(1.15rem, 4.8vw, 1.35rem); font-weight: 600; margin: .2em 0; }
.shark-name-big { font-size: clamp(1.9rem, 8.5vw, 2.6rem); font-weight: 700; color: var(--sea-deep); line-height: 1.05; }
a.inline { color: var(--sea); font-weight: 700; }

/* section headings that sit on the misty bg (collection page) */
.big-white {
  color: var(--ink);
  text-shadow: none;
  margin: 10px 0 6px;
}

/* ---------- Footer ---------- */
.foot { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 28px; padding-top: 8px; }
.foot a { color: var(--sea); font-weight: 600; }

@media (min-width: 700px) {
  .page, .topbar { max-width: 760px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}