/* Bright & shiny (Robert, 28 Oct 2026: "brighter, shiny colours, attractive looks"; it looked "found in an
   antique shop"). Big blocks of strong colour, Eisa front and centre, chunky round glossy buttons, bubbles,
   sparkles and wavy edges. Loaded after style.css and overrides it. */

:root {
  --page: #fff3fa;
  --yellow: #ffd23f; --orange: #ff7a1a; --pink: #ff3d7f; --green: #1fc96a; --blue: #3b6bff; --purple: #8f3dff; --sky: #22bfff;
  --night: #5b1fd1;
  --gloss: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 46%, rgba(255,255,255,0) 52%, rgba(0,0,0,.06) 100%);
  --shine: inset 0 -5px 0 rgba(0,0,0,.14), inset 0 3px 0 rgba(255,255,255,.55);
}
body { background: var(--page); }
main { padding-bottom: 0; }
/* The footer always sits at the bottom of the screen, even on short pages (Robert, 28 Oct 2026). */
body:not(.colouring) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.colouring) > main { flex: 1 0 auto; width: 100%; padding-bottom: 40px; }
body:not(.colouring) > main.bands { padding-bottom: 0; }
body:not(.colouring) > .foot { margin-top: auto; }
body:not(.colouring) > .eisa { width: 100%; flex: 1 0 auto; }

/* Explainer film */
.band-film { background: linear-gradient(180deg, #ffe0ef, #ffd0e6); }
.film { max-width: 860px; margin: 0 auto; border-radius: 26px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 0 0 4px var(--purple), 0 14px 30px rgba(45,42,74,.22); background: #5b1fd1; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.text-page .film { margin: 18px auto 8px; }

/* Sticker icons inside the round header buttons (Eisa page) */
.ui-btn { padding: 4px; }
.ui-btn img { width: 42px; height: 42px; display: block; }
.eisa-hello .btn-icon { width: 46px; height: 46px; }

/* Story time band on the home page */
.band-stories { background: linear-gradient(180deg, #efe1ff, #e2cbff); }
.band-lead { text-align: center; font-size: 19px; font-weight: 600; color: #4b1fa0; margin: -6px auto 16px; }
.story-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.story-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 5px solid #fff; border-radius: 24px;
  padding: 8px 8px 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 18px; text-align: center;
  box-shadow: 0 0 0 4px var(--purple), 0 10px 20px rgba(143,61,255,.25);
}
.story-card img { border-radius: 16px; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 8px; }
.story-card-play {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; padding-left: 4px;
  background: var(--gloss), radial-gradient(circle at 50% 30%, #b47bff, #8f3dff); border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.story-card:hover .story-card-play { transform: translate(-50%, -50%) scale(1.1); }

/* Story time with Eisa */
.listen-btn { background: var(--gloss), linear-gradient(180deg, #b47bff, #8f3dff); color: #fff; }
.story-listen { margin: -4px 0 14px; }
.story-book { display: grid; gap: 22px; align-items: start; }
@media (min-width: 820px) { .story-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.story-pic { margin: 0; background: #fff; border: 5px solid #fff; border-radius: 26px; padding: 10px; box-shadow: 0 0 0 4px var(--purple), 0 12px 24px rgba(45,42,74,.18); }
.story-pic img { display: block; width: 100%; border-radius: 14px; transition: opacity .3s ease; }
.story-side { display: flex; flex-direction: column; gap: 14px; }
.story-eisa { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; color: #4b1fa0; }
.story-eisa img { width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 4px #ffd23f; object-fit: cover; }
.story.reading .story-eisa img { animation: float 2.4s ease-in-out infinite; box-shadow: 0 0 0 4px #ffd23f, 0 0 26px 8px rgba(255,210,63,.6); }
.story-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.story-controls .big-btn { flex: 1 1 180px; }
.story-dots { display: flex; gap: 10px; }
.story-dot { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; background: #d9c6ff; box-shadow: 0 0 0 2px #b47bff; cursor: pointer; padding: 0; }
.story-dot.on { background: var(--purple); transform: scale(1.15); }
.story-words { background: #fff; border-radius: 22px; padding: 16px 20px; font-size: 20px; line-height: 1.55; box-shadow: 0 6px 0 rgba(143,61,255,.2), 0 12px 24px rgba(45,42,74,.08); min-height: 120px; }
.story-words p { margin: 0 0 10px; }
.story-end { margin-top: 26px; }
.story-end[hidden] { display: none; }

/* Buy us a coffee: grown-ups only, small and calm */
.foot-coffee { margin: 6px 0 14px; }
.coffee-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  background: #ffdd57; color: #2d2a4a !important; font-weight: 600; text-decoration: none; border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.coffee-btn:hover { transform: translateY(-1px); }
.text-page .coffee-btn { border-color: #2d2a4a; }
.yt-btn { background: #ff4d4d; color: #fff !important; margin-left: 8px; }
.foot-coffee { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.foot-coffee .yt-btn { margin-left: 0; }

/* "New to colour" band at the top of the home page */
.band-new { background: linear-gradient(180deg, #fff6c9, #ffe9a8); }
.band-new .section-title { color: #c2410c; }
.new-badge {
  display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: .7em; letter-spacing: 1px; color: #fff;
  background: var(--gloss), linear-gradient(180deg, #ff6b9d, #ff2d6f); border: 3px solid #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2);
  box-shadow: var(--shine), 0 4px 0 rgba(255,45,111,.35); animation: twinkle 2.4s ease-in-out infinite;
}

/* ---------- the colourful hero band (home) and the header band (other pages) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22) 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.16) 0 1.5px, transparent 2.5px) 0 0 / 31px 31px,
    radial-gradient(ellipse at 80% 10%, #ff5fb0 0, transparent 45%),
    radial-gradient(ellipse at 5% 90%, #22bfff 0, transparent 40%),
    linear-gradient(160deg, #7a2cff 0%, var(--night) 45%, #c42dd8 100%);
  padding-bottom: 70px;
}
.hero-small { padding-bottom: 54px; }
.hero .wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; display: block; }
.hero-small .wave { height: 50px; }

/* shiny bubbles drifting up */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles i {
  position: absolute; bottom: -80px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.25) 22%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.35) 100%);
  box-shadow: inset 0 0 12px rgba(255,255,255,.5);
  animation: rise 14s linear infinite;
}
.bubbles i:nth-child(1) { left: 6%; width: 46px; height: 46px; animation-duration: 13s; }
.bubbles i:nth-child(2) { left: 22%; width: 22px; height: 22px; animation-duration: 9s; animation-delay: -4s; }
.bubbles i:nth-child(3) { left: 41%; width: 64px; height: 64px; animation-duration: 17s; animation-delay: -9s; }
.bubbles i:nth-child(4) { left: 58%; width: 30px; height: 30px; animation-duration: 11s; animation-delay: -2s; }
.bubbles i:nth-child(5) { left: 74%; width: 54px; height: 54px; animation-duration: 15s; animation-delay: -6s; }
.bubbles i:nth-child(6) { left: 88%; width: 26px; height: 26px; animation-duration: 10s; animation-delay: -7s; }
.bubbles i:nth-child(7) { left: 95%; width: 40px; height: 40px; animation-duration: 16s; animation-delay: -12s; }
@keyframes rise { from { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(-50vh) translateX(18px); } to { transform: translateY(-110vh) translateX(-10px); opacity: .9; } }

/* ---------- header: bubble letters in rainbow colours, twinkling stars ---------- */
.top { position: relative; z-index: 1; padding-top: 20px; }
.brand-text { letter-spacing: 1px; font-size: clamp(30px, 7.4vw, 60px); }
.top-small .brand-text { font-size: clamp(24px, 5.6vw, 36px); }
.brand-text .word { white-space: nowrap; display: inline-block; }
.brand-text .word span { display: inline-block; animation: letter-bob 3s ease-in-out infinite; }
.brand-text .word span:nth-child(2n) { animation-delay: -1.5s; }
.brand-text span.l0 { color: #ff4f8f; } .brand-text span.l1 { color: #ff9a1f; } .brand-text span.l2 { color: #ffd23f; }
.brand-text span.l3 { color: #3fe08a; } .brand-text span.l4 { color: #4fd2ff; } .brand-text span.l5 { color: #c79bff; }
.brand-text {
  text-shadow: 3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff,
    0 8px 0 rgba(40, 0, 90, .35);
}
@keyframes letter-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
.mascot svg { filter: drop-shadow(0 4px 0 rgba(40,0,90,.35)); }
.free-ribbon {
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); transform: rotate(-1.5deg);
  background: var(--gloss), linear-gradient(90deg, var(--pink), var(--orange), #f5b800, var(--green), var(--sky), #b36bff);
  border: 3px solid #fff; box-shadow: var(--shine), 0 6px 14px rgba(40, 0, 90, .35);
}
.twinkle { position: absolute; font-size: 30px; pointer-events: none; animation: twinkle 2.4s ease-in-out infinite; text-shadow: 0 0 12px rgba(255,255,255,.8); }
.twinkle.t1 { left: 5%; top: 16px; color: var(--yellow); }
.twinkle.t2 { right: 7%; top: 22px; color: #7fe3ff; font-size: 36px; animation-delay: -.8s; }
.twinkle.t3 { right: 16%; top: 96px; color: #ff9cc7; font-size: 22px; animation-delay: -1.6s; }
.twinkle.t4 { left: 13%; top: 100px; color: #ffe27a; font-size: 24px; animation-delay: -1.2s; }
.top-small .twinkle.t3, .top-small .twinkle.t4 { display: none; }
@keyframes twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.2) rotate(20deg); opacity: 1; } }

/* ---------- home hero: Eisa front and centre + big round buttons ---------- */
.hero-main {
  position: relative; z-index: 1; max-width: 1040px; margin: 10px auto 0; padding: 0 16px;
  display: grid; gap: 18px; align-items: center; justify-items: center;
}
@media (min-width: 800px) { .hero-main { grid-template-columns: 1.1fr 1fr; } }
.hero-eisa { position: relative; display: block; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.hero-eisa-pic {
  display: block; width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 6px solid #fff; box-shadow: 0 0 0 6px #ffd23f, 0 0 0 14px rgba(255,255,255,.25), 0 0 60px 20px rgba(255,180,255,.5);
  animation: float 3.4s ease-in-out infinite;
}
.hero-eisa-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 18%; }
.hero-bubble {
  position: absolute; left: 62%; top: 4%; width: max-content; max-width: 210px;
  background: #fff; border-radius: 24px; padding: 10px 16px; font-weight: 700; font-size: 19px; line-height: 1.25;
  box-shadow: 0 6px 0 rgba(40,0,90,.3); animation: pop .5s .3s ease backwards;
}
.hero-bubble::after { content: ""; position: absolute; left: 14px; bottom: -12px; border: 8px solid transparent; border-top: 12px solid #fff; border-left-width: 4px; }
@media (max-width: 520px) {
  .hero-eisa { display: flex; flex-direction: column; align-items: center; }
  .hero-eisa-pic { width: 210px; }
  .hero-bubble { position: relative; left: auto; top: auto; margin-top: 14px; max-width: 300px; font-size: 18px; text-align: center; }
  .hero-bubble::after { left: 50%; top: -18px; bottom: auto; transform: translateX(-50%); border-top-color: transparent; border-bottom: 12px solid #fff; border-left-width: 8px; }
}
.hero-eisa:hover .hero-eisa-pic { animation: bounce .6s ease; }

.hero-buttons { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; padding-top: 10px; }
.round-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 168px; height: 168px; border-radius: 50%; border: 6px solid #fff; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 700; font-size: 20px; line-height: 1.1; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25);
  box-shadow: var(--shine), 0 9px 0 rgba(40,0,90,.4), 0 16px 30px rgba(40,0,90,.35);
  transition: transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.round-btn span { max-width: 128px; text-align: center; font-size: 18px; }
.round-btn img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); }
.round-btn:hover { transform: translateY(-4px) rotate(-3deg) scale(1.04); }
.round-btn:active { transform: translateY(4px) scale(.97); }
.rb-eisa { background: var(--gloss), radial-gradient(circle at 50% 30%, #ff7fc0, #ff2d7f); }
.rb-eisa img { border: 3px solid #fff; }
.rb-surprise { background: var(--gloss), radial-gradient(circle at 50% 30%, #ffe066, #ff9a1f); }
.rb-story { background: var(--gloss), radial-gradient(circle at 50% 30%, #b47bff, #7a2cff); }
.rb-story img { border-radius: 0; }
.soon-note { font-weight: 600; color: #4b1fa0; margin-top: 26px; }
.rb-surprise img { border-radius: 0; }
.round-btn[hidden], .hero-eisa[hidden] { display: none; }

/* ---------- colour bands ---------- */
.bands { max-width: none; padding: 0; }
.band { position: relative; padding: 26px 16px 46px; }
.band > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.band-themes { background: linear-gradient(180deg, #ffd23f, #ffbf1f); }
.band-0 { background: linear-gradient(180deg, #d9f7ff, #bdebff); }
.band-1 { background: linear-gradient(180deg, #ffe0ef, #ffcce4); }
.band-2 { background: linear-gradient(180deg, #e4ffd9, #c9f5bb); }
.band-3 { background: linear-gradient(180deg, #efe1ff, #e0c9ff); }
.band + .band::before { /* soft wavy join */
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px; max-width: none;
  background: inherit; -webkit-mask: radial-gradient(22px 24px at 50% 100%, #000 98%, transparent) 0 0 / 44px 24px repeat-x;
  mask: radial-gradient(22px 24px at 50% 100%, #000 98%, transparent) 0 0 / 44px 24px repeat-x;
}
.band-themes .section-title { color: #fff; text-shadow: 0 3px 0 #e08a00, 0 6px 0 rgba(0,0,0,.12); font-size: clamp(28px, 6vw, 40px); }
.soon { background: linear-gradient(180deg, #e0c9ff, #d3b3ff); margin: 0; padding: 26px 16px 34px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #4b1fa0; }

/* shiny buttons */
.big-btn, .mid-btn { border-color: #fff; box-shadow: var(--shine), 0 6px 0 rgba(45,42,74,.2), 0 10px 18px rgba(45,42,74,.14); }
.big-btn { background: var(--gloss), linear-gradient(180deg, #ffe066, #ffbf1f); }
.surprise { background: var(--gloss), linear-gradient(180deg, #ff6b9d, #ff2d6f); color: #fff; }
.colour-btn { background: var(--gloss), linear-gradient(180deg, #3fe08a, #12b358); }
.print-btn { background: var(--gloss), linear-gradient(180deg, #6b8dff, #2f5bff); }
.mid-btn { background: var(--gloss), linear-gradient(180deg, #ffffff, #eef0ff); border-color: var(--ink); }
.btn-icon { width: 44px; height: 44px; margin: -8px 0; filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }

/* theme tiles: glossy gradients with our own icons */
.themes { gap: 18px; }
.theme {
  position: relative; overflow: hidden; border: 4px solid #fff; border-radius: 30px; padding: 14px 10px;
  background: var(--gloss), linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 70%);
  box-shadow: var(--shine), 0 8px 0 color-mix(in srgb, var(--c) 65%, #000), 0 14px 22px rgba(0,0,0,.18);
}
.theme-icon { width: 108px; height: 108px; filter: drop-shadow(0 5px 4px rgba(0,0,0,.25)); transition: transform .2s ease; }
.theme:hover .theme-icon, .theme:active .theme-icon { transform: scale(1.12) rotate(-7deg); }
.theme-name { font-size: 23px; text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.theme-count { background: rgba(255,255,255,.32); border-radius: 999px; padding: 1px 10px; font-weight: 600; }

/* section titles */
.section-title { display: flex; align-items: center; justify-content: center; gap: 10px; color: #4b1fa0; text-shadow: 0 3px 0 #fff; margin-top: 6px; }
.title-icon { width: 60px; height: 60px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.page-title { display: flex; align-items: center; justify-content: center; gap: 12px; text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(45,42,74,.15); }
.page-title .title-icon { width: 76px; height: 76px; }

/* picture cards: bright borders in turn */
.pic { border-width: 5px; --bc: var(--pink); border-color: var(--bc); box-shadow: 0 7px 0 var(--bc), 0 12px 20px rgba(45,42,74,.14); }
.pic:nth-child(6n+2) { --bc: var(--orange); } .pic:nth-child(6n+3) { --bc: #f2b400; } .pic:nth-child(6n+4) { --bc: var(--green); }
.pic:nth-child(6n+5) { --bc: var(--blue); } .pic:nth-child(6n) { --bc: var(--purple); }
.sheet { border: 5px solid #fff; box-shadow: 0 0 0 4px var(--c, var(--purple)), 0 12px 24px rgba(45,42,74,.18); }
.back { color: #4b1fa0; }

/* footer */
.foot { background: linear-gradient(180deg, #4b1fa0, #2d0f6e); color: #e8dcff; margin-top: 0; padding-top: 30px; }
.foot a { color: #fff; }
.family-note { background: rgba(255,255,255,.1); }
.link-btn { color: #d6c4ff; }

/* ---------- Eisa page ---------- */
body.eisa-page { background: radial-gradient(ellipse at 50% 0, #ffd6f0 0, transparent 60%), linear-gradient(180deg, #fbe9ff, #e6f4ff); }
.eisa-face { width: 190px; height: 190px; border-color: #fff; box-shadow: 0 0 0 6px #ffd23f, 0 0 0 16px rgba(143,61,255,.18), 0 0 50px 14px rgba(255,150,230,.45); }
.eisa-face.talking { box-shadow: 0 0 0 6px #ffd23f, 0 0 0 18px rgba(255,210,63,.55), 0 0 60px 22px rgba(255,210,63,.6); }
.eisa-bubble { border: 0; box-shadow: 0 6px 0 rgba(143,61,255,.3), 0 12px 24px rgba(143,61,255,.2); }
.eisa-tile { border: 4px solid #fff; --tc: #ffd6e8; background: var(--gloss), linear-gradient(180deg, #fff, var(--tc)); box-shadow: var(--shine), 0 7px 0 rgba(45,42,74,.16), 0 12px 18px rgba(45,42,74,.12); }
.eisa-grid .eisa-tile:nth-child(6n+2) { --tc: #ffe0c2; } .eisa-grid .eisa-tile:nth-child(6n+3) { --tc: #fff0a6; } .eisa-grid .eisa-tile:nth-child(6n+4) { --tc: #c9f5d9; }
.eisa-grid .eisa-tile:nth-child(6n+5) { --tc: #cfe0ff; } .eisa-grid .eisa-tile:nth-child(6n) { --tc: #e6d1ff; }
.eisa-tile img.e { width: 86px; height: 86px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.22)); transition: transform .2s ease; }
.eisa-tile:hover img.e { transform: scale(1.12) rotate(-7deg); }
.eisa-tile.picked { background: var(--gloss), linear-gradient(180deg, #ffe066, #ffbf1f); }
.surprise-tile { background: var(--gloss), linear-gradient(180deg, #ff6b9d, #ff2d6f); }
.eisa-chosen .eisa-tile img.e { width: 40px; height: 40px; }
.eisa .bar .icon-btn { font-size: 24px; }

/* ---------- colouring screen ---------- */
body.colouring { background: radial-gradient(ellipse at 50% 0, #ffe0f2 0, transparent 60%), linear-gradient(180deg, #fff3fa, #eaf3ff); }
.paper { border: 5px solid #fff; box-shadow: 0 0 0 4px var(--purple), 0 12px 24px rgba(45,42,74,.18); }
.icon-btn { border-color: #fff; background: var(--gloss), linear-gradient(180deg, #fff, #eef0ff); box-shadow: var(--shine), 0 0 0 3px var(--ink), 0 6px 0 rgba(45,42,74,.2); }
.done-btn { background: var(--gloss), linear-gradient(180deg, #ffe066, #ffbf1f); }
.finish-card { border: 5px solid #fff; box-shadow: 0 0 0 4px var(--purple), 0 16px 40px rgba(45,42,74,.3); background: linear-gradient(180deg, #fff, #fff4fb); }
.finish-title { background: linear-gradient(90deg, var(--pink), var(--orange), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swatch::after { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), inset 3px 0 0 rgba(255,255,255,.45); }

/* story groups on a theme page, "See all" on the home page */
.story-title {
  display: table; margin: 34px auto 14px; padding: 6px 22px; border-radius: 999px; font-size: clamp(20px, 4.6vw, 26px);
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); border: 3px solid #fff;
  background: var(--gloss), linear-gradient(90deg, var(--purple), var(--pink));
  box-shadow: var(--shine), 0 6px 0 rgba(143,61,255,.3);
}
.see-all { margin: 22px 0 0; }

@media (max-width: 520px) {
  .hero-buttons { gap: 8px; flex-wrap: nowrap; }
  .round-btn { width: 108px; height: 108px; border-width: 4px; gap: 2px; }
  .round-btn img { width: 46px; height: 46px; }
  .round-btn span { font-size: 13.5px; max-width: 86px; }
}
@media (min-width: 521px) { .hero-buttons { flex-wrap: nowrap; gap: 14px; } .round-btn { width: 146px; height: 146px; } .round-btn img { width: 64px; height: 64px; } .round-btn span { font-size: 16.5px; max-width: 112px; } }
@media print { .hero, .foot { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .bubbles { display: none; } }