:root { --ink: #0f3a66; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100%; overflow: hidden; display: grid; place-items: center;
    padding: env(safe-area-inset-top) 1rem env(safe-area-inset-bottom);
    background: #0a1020;
  }

  /* ================= scenery ================= */
  .scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
  .scene > * { position: absolute; inset: 0; }

  .sky.day   { background: linear-gradient(180deg, #1f6fd0 0%, #3f92e0 26%, #7cc2ef 56%, #c4e7fb 80%, #eefaff 100%); }
  .sky.dusk  { background: linear-gradient(180deg, #2a3f86 0%, #7a4f9f 22%, #d76a6a 50%, #ff9d5c 74%, #ffd98f 100%); opacity: 0; animation: duskCycle 80s linear infinite; }
  .sky.night { background: linear-gradient(180deg, #03060f 0%, #081234 38%, #14265c 68%, #253f77 100%); opacity: 0; animation: nightCycle 80s linear infinite; }
  @keyframes duskCycle  { 0%,8% { opacity:0 } 42% { opacity:0 } 50% { opacity:1 } 60% { opacity:0 } 86% { opacity:0 } 93% { opacity:1 } 100% { opacity:0 } }
  @keyframes nightCycle { 0% { opacity:0 } 56% { opacity:0 } 64% { opacity:1 } 80% { opacity:1 } 88% { opacity:0 } 100% { opacity:0 } }

  .stars {
    opacity: 0;
    background-image:
      radial-gradient(1.6px 1.6px at 40px 60px, rgba(255,255,255,0.95), transparent),
      radial-gradient(1.3px 1.3px at 140px 26px, rgba(255,255,255,0.8), transparent),
      radial-gradient(1.9px 1.9px at 186px 118px, rgba(255,255,255,0.95), transparent),
      radial-gradient(1.2px 1.2px at 74px 150px, rgba(255,255,255,0.7), transparent),
      radial-gradient(1.5px 1.5px at 226px 88px, rgba(255,255,255,0.85), transparent),
      radial-gradient(1.1px 1.1px at 108px 96px, rgba(255,255,255,0.7), transparent);
    background-size: 260px 200px;
    animation: starsCycle 80s linear infinite, twinkle 4s ease-in-out infinite;
  }
  @keyframes starsCycle { 0%,58% { opacity:0 } 66% { opacity:1 } 80% { opacity:1 } 87% { opacity:0 } 100% { opacity:0 } }
  @keyframes twinkle { 0%,100% { filter: brightness(1) } 50% { filter: brightness(1.4) } }

  .sun {
    inset: auto; top: 0; left: 0; width: 50vmin; height: 50vmin; border-radius: 50%;
    margin: -20vmin 0 0 -11vmin;
    background: radial-gradient(circle, #ffffff 0 14%, #fffef0 19%, rgba(255,242,175,0.8) 32%, rgba(255,222,140,0.3) 52%, rgba(255,255,255,0) 70%);
    animation: sunCycle 80s linear infinite;
  }
  /* 0 = dawn · 25 = noon · 50 = sunset · 56-92 = night (hidden) · 100 = dawn */
  @keyframes sunCycle {
    0%   { transform: translate(10vw, 20vh); opacity: 1; }
    25%  { transform: translate(40vw, 4vh);  opacity: 1; }
    50%  { transform: translate(72vw, 30vh); opacity: 1; }
    56%  { transform: translate(78vw, 36vh); opacity: 0; }
    92%  { transform: translate(-8vw, 34vh); opacity: 0; }
    100% { transform: translate(10vw, 20vh); opacity: 1; }
  }
  .moon {
    inset: auto; top: 0; left: 0; width: 24vmin; height: 24vmin; border-radius: 50%;
    margin: -8vmin 0 0 -4vmin;
    background:
      radial-gradient(circle at 36% 34%, rgba(255,255,255,0.55) 0 8%, transparent 9%),
      radial-gradient(circle at 62% 58%, rgba(210,220,240,0.4) 0 6%, transparent 7%),
      radial-gradient(circle, #ffffff 0 44%, #e8eefc 62%, rgba(230,238,255,0.25) 76%, rgba(230,238,255,0) 82%);
    box-shadow: 0 0 46px rgba(210,230,255,0.6);
    opacity: 0; animation: moonCycle 80s linear infinite;
  }
  @keyframes moonCycle {
    0%,56% { transform: translate(-6vw, 40vh); opacity: 0; }
    64%    { transform: translate(18vw, 10vh); opacity: 1; }
    78%    { transform: translate(48vw, -2vh); opacity: 1; }
    88%    { transform: translate(76vw, 34vh); opacity: 0; }
    100%   { transform: translate(76vw, 34vh); opacity: 0; }
  }

  /* sun rays live inside .sun, so they move and fade WITH the sun */
  .sun-rays {
    position: absolute; left: 50%; top: 50%; width: 190vmin; height: 190vmin;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg,
      rgba(255,255,255,0) 0deg 4.5deg, rgba(255,255,255,0.13) 4.5deg 6deg);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.85) 0 3%, rgba(0,0,0,0.32) 15%, transparent 44%);
    mask-image: radial-gradient(circle, rgba(0,0,0,0.85) 0 3%, rgba(0,0,0,0.32) 15%, transparent 44%);
    mix-blend-mode: screen; pointer-events: none;
    animation: rayspin 120s linear infinite;
  }
  @keyframes rayspin { to { transform: translate(-50%, -50%) rotate(360deg) } }

  .flare { animation: flareCycle 80s linear infinite; }
  .flare i { position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(255,235,190,0.38) 45%, rgba(255,255,255,0) 70%); mix-blend-mode: screen; }
  .flare i:nth-child(1) { width: 6%;  height: 6%;  top: 22%; left: 52%; }
  .flare i:nth-child(2) { width: 3.4%;height: 3.4%;top: 34%; left: 40%; }
  .flare i:nth-child(3) { width: 10%; height: 10%; top: 46%; left: 30%; opacity: 0.8; }
  .flare i:nth-child(4) { width: 2.6%;height: 2.6%;top: 58%; left: 22%; }
  .flare i:nth-child(5) { width: 5%;  height: 5%;  top: 68%; left: 14%; opacity: 0.7; }
  @keyframes flareCycle { 0%,50% { opacity: 1 } 58% { opacity: 0 } 90% { opacity: 0 } 100% { opacity: 1 } }

  .clouds { inset: 0; }
  .cloud { position: absolute; left: -32%; border-radius: 50%; background: #fff; filter: blur(15px); opacity: 0.85; animation: cloudDrift linear infinite; }
  .cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
  .cloud::before { width: 60%; height: 130%; left: 14%; top: -50%; }
  .cloud::after  { width: 46%; height: 110%; right: 10%; top: -34%; }
  .c1 { width: 300px; height: 90px;  top: 14%; animation-duration: 90s; }
  .c2 { width: 200px; height: 64px;  top: 24%; animation-duration: 130s; opacity: 0.6; animation-delay: -30s; }
  .c3 { width: 380px; height: 104px; top: 8%;  animation-duration: 160s; opacity: 0.55; animation-delay: -80s; }
  .c4 { width: 150px; height: 52px;  top: 32%; animation-duration: 110s; opacity: 0.5; animation-delay: -55s; }
  .c5 { width: 240px; height: 74px;  top: 20%; animation-duration: 145s; opacity: 0.65; animation-delay: -110s; }
  .c6 { width: 180px; height: 58px;  top: 38%; animation-duration: 120s; opacity: 0.45; animation-delay: -20s; }
  .c7 { width: 320px; height: 86px;  top: 5%;  animation-duration: 175s; opacity: 0.5; animation-delay: -140s; }
  @keyframes cloudDrift { from { transform: translateX(0) } to { transform: translateX(185vw) } }

  .hill { top: auto; bottom: 0; height: 44vh; }
  .hill svg { width: 100%; height: 100%; display: block; }

  .veil { background: #0a1846; mix-blend-mode: multiply; opacity: 0; animation: veilCycle 80s linear infinite; }
  @keyframes veilCycle { 0% { opacity:0 } 56% { opacity:0 } 64% { opacity:0.62 } 80% { opacity:0.62 } 88% { opacity:0 } 100% { opacity:0 } }

  .bokeh { border-radius: 50%; filter: blur(6px); mix-blend-mode: screen;
    background: radial-gradient(circle at 32% 32%, rgba(255,255,255,0.95), rgba(190,230,255,0.25) 55%, rgba(255,255,255,0) 72%); }
  .bokeh.b1 { width: 90px;  height: 90px;  top: 60%; left: 8%;  animation: float1 14s ease-in-out infinite; }
  .bokeh.b2 { width: 60px;  height: 60px;  top: 70%; left: 26%; animation: float2 18s ease-in-out infinite; }
  .bokeh.b3 { width: 120px; height: 120px; top: 54%; right: 10%; animation: float1 20s ease-in-out infinite; }
  .bokeh.b4 { width: 44px;  height: 44px;  top: 78%; right: 30%; animation: float2 12s ease-in-out infinite; }
  .bokeh.b5 { width: 74px;  height: 74px;  top: 66%; left: 44%; animation: float1 17s ease-in-out infinite; }
  .bokeh.b6 { width: 52px;  height: 52px;  top: 46%; left: 62%; animation: float2 15s ease-in-out infinite; }
  .bokeh.b7 { width: 100px; height: 100px; top: 80%; left: 70%; animation: float1 22s ease-in-out infinite; }
  @keyframes float1 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
  @keyframes float2 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(14px) } }

  .bubbles { inset: 0; }
  .bubble { position: absolute; bottom: -16vh; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.98), rgba(185,232,255,0.35) 42%, rgba(120,200,255,0.16) 66%, rgba(255,255,255,0.06) 100%);
    box-shadow: inset -3px -4px 10px rgba(255,255,255,0.8), inset 3px 4px 14px rgba(120,190,255,0.5), 0 6px 18px rgba(40,110,180,0.22);
    border: 1px solid rgba(255,255,255,0.65); animation: rise linear infinite; }
  @keyframes rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.95; } 90% { opacity: 0.95; }
    100% { transform: translateY(-120vh) translateX(24px); opacity: 0; }
  }
  .bubble:nth-child(1){ left: 6%;  width: 46px; height: 46px; animation-duration: 17s; animation-delay: 0s; }
  .bubble:nth-child(2){ left: 18%; width: 24px; height: 24px; animation-duration: 22s; animation-delay: 3s; }
  .bubble:nth-child(3){ left: 31%; width: 64px; height: 64px; animation-duration: 19s; animation-delay: 7s; }
  .bubble:nth-child(4){ left: 46%; width: 18px; height: 18px; animation-duration: 25s; animation-delay: 1s; }
  .bubble:nth-child(5){ left: 58%; width: 38px; height: 38px; animation-duration: 16s; animation-delay: 9s; }
  .bubble:nth-child(6){ left: 70%; width: 54px; height: 54px; animation-duration: 21s; animation-delay: 4s; }
  .bubble:nth-child(7){ left: 82%; width: 28px; height: 28px; animation-duration: 18s; animation-delay: 6s; }
  .bubble:nth-child(8){ left: 91%; width: 40px; height: 40px; animation-duration: 23s; animation-delay: 2s; }
  .bubble:nth-child(9){ left: 12%; width: 32px; height: 32px; animation-duration: 20s; animation-delay: 11s; }
  .bubble:nth-child(10){left: 38%; width: 22px; height: 22px; animation-duration: 24s; animation-delay: 5s; }
  .bubble:nth-child(11){left: 52%; width: 48px; height: 48px; animation-duration: 17s; animation-delay: 13s; }
  .bubble:nth-child(12){left: 64%; width: 20px; height: 20px; animation-duration: 26s; animation-delay: 8s; }
  .bubble:nth-child(13){left: 76%; width: 42px; height: 42px; animation-duration: 19s; animation-delay: 15s; }
  .bubble:nth-child(14){left: 88%; width: 26px; height: 26px; animation-duration: 21s; animation-delay: 10s; }
  /* moving sheen on each bubble */
  .bubble::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,0.95) 0 7%, rgba(255,255,255,0) 27%),
      radial-gradient(circle at 70% 74%, rgba(255,255,255,0.5) 0 5%, rgba(255,255,255,0) 20%);
  }

  /* sparkles */
  .sparkle { position: absolute; width: 16px; height: 16px; opacity: 0; animation: twinkle2 3.4s ease-in-out infinite; }
  .sparkle::before, .sparkle::after { content: ""; position: absolute; background: #fff; border-radius: 3px; box-shadow: 0 0 10px #fff, 0 0 22px rgba(180,230,255,0.9); }
  .sparkle::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
  .sparkle::after  { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
  @keyframes twinkle2 { 0%,100% { opacity: 0; transform: scale(0.6) rotate(0deg) } 50% { opacity: 1; transform: scale(1.1) rotate(45deg) } }
  .sp1 { top: 22%; left: 24%; animation-delay: 0s; }
  .sp2 { top: 30%; left: 70%; animation-delay: 0.8s; }
  .sp3 { top: 16%; left: 52%; animation-delay: 1.6s; }
  .sp4 { top: 58%; left: 14%; animation-delay: 0.4s; }
  .sp5 { top: 48%; left: 84%; animation-delay: 2.1s; }
  .sp6 { top: 66%; left: 60%; animation-delay: 1.2s; }

  .iridescence {
    background: linear-gradient(115deg,
      rgba(0, 200, 255, 0.14) 0%, rgba(120, 255, 210, 0.08) 20%,
      rgba(255, 255, 255, 0) 40%, rgba(255, 120, 220, 0.11) 62%,
      rgba(255, 230, 140, 0.09) 82%, rgba(0, 200, 255, 0.14) 100%);
    background-size: 220% 220%; mix-blend-mode: screen;
    animation: irid 18s ease-in-out infinite;
  }
  @keyframes irid { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }

  /* ================= Aero glass panel ================= */
  main { position: relative; z-index: 2; text-align: center; width: min(92vw, 560px); animation: pop 0.7s cubic-bezier(.2,.9,.3,1.3) both; }
  @keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.94) } to { opacity: 1; transform: none } }

  .panel {
    position: relative;
    padding: clamp(2rem, 6vw, 3rem) clamp(1.6rem, 6vw, 3.2rem);
    border-radius: 30px;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.78) 0%,
        rgba(224,243,255,0.5) 26%,
        rgba(188,226,255,0.4) 46%,
        rgba(150,205,255,0.36) 60%,
        rgba(196,228,255,0.5) 78%,
        rgba(255,255,255,0.66) 100%);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow:
      0 30px 70px rgba(18,58,99,0.42),
      0 0 80px rgba(130,205,255,0.45),
      0 2px 6px rgba(18,58,99,0.22),
      inset 0 2px 0 rgba(255,255,255,1),
      inset 0 -26px 42px rgba(255,255,255,0.45),
      inset 0 0 60px rgba(150,210,255,0.4);
    -webkit-backdrop-filter: blur(11px) saturate(1.7);
    backdrop-filter: blur(11px) saturate(1.7);
    overflow: hidden;
  }
  .panel::before {
    content: "";
    position: absolute; left: 1px; right: 1px; top: 1px; height: 50%;
    border-radius: 29px 29px 60% 60% / 29px 29px 100% 100%;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.06));
    pointer-events: none;
  }
  /* brightens the glass only at night so it stays lit + readable */
  .panel-night {
    position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(232,244,255,0.5), rgba(196,224,255,0.36));
    opacity: 0; animation: nightCycle 80s linear infinite;
  }
  .panel-sweep {
    position: absolute; top: -60%; left: -40%; width: 50%; height: 220%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(22deg); mix-blend-mode: screen; pointer-events: none;
    animation: sweep 6.5s ease-in-out infinite;
  }
  @keyframes sweep {
    0% { transform: translateX(-40vw) rotate(22deg); opacity: 0; }
    15% { opacity: 1; }
    55% { transform: translateX(70vw) rotate(22deg); opacity: 0; }
    100% { transform: translateX(70vw) rotate(22deg); opacity: 0; }
  }

  .inner { position: relative; z-index: 2; }

  .shine {
    display: inline-block;
    font-size: clamp(5.5rem, 23vw, 11.5rem);
    font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
    background: linear-gradient(180deg, #ffffff 0%, #eefaff 18%, #b6e2ff 34%, #4aa6e8 50%, #0f62b4 74%, #0a4a8c 100%);
    background-size: 100% 220%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow:
      0 -1px 1px rgba(255,255,255,0.95),
      0 1px 0 #ffffff,
      0 2px 0 #cfe6f7,
      0 3px 0 #a9cfe9,
      0 4px 1px #7fb2d8,
      0 6px 9px rgba(10,60,120,0.45),
      0 12px 26px rgba(10,60,120,0.32);
    animation: textShine 5s ease-in-out infinite;
  }
  @keyframes textShine { 0%,100% { background-position: 50% 0% } 50% { background-position: 50% 100% } }

  h1 {
    font-size: clamp(1.35rem, 4.6vw, 1.9rem); color: var(--ink); margin-top: 0.7rem; font-weight: 700;
    text-shadow:
      0 1px 0 #ffffff, 0 2px 2px rgba(255,255,255,0.7),
      0 -1px 1px rgba(10,50,100,0.35), 0 3px 7px rgba(10,50,100,0.3);
  }
  p {
    color: #23577f; margin-top: 0.45rem; font-size: clamp(0.95rem, 2.7vw, 1.08rem); font-weight: 600;
    text-shadow: 0 1px 0 #ffffff, 0 2px 3px rgba(255,255,255,0.6), 0 -1px 1px rgba(10,50,100,0.25);
  }

  .actions { margin-top: 1.8rem; }
  .btn {
    position: relative; display: inline-block; padding: 0.85rem 2.1rem; border-radius: 999px;
    font-weight: 700; font-size: 1rem; color: #fff; text-decoration: none;
    background: linear-gradient(180deg, #b3e6ff 0%, #63bbf2 42%, #1a7fce 50%, #0a5aa0 100%);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 12px 24px rgba(10,60,120,0.48), 0 0 24px rgba(120,200,255,0.5),
      inset 0 2px 0 rgba(255,255,255,1), inset 0 -12px 18px rgba(255,255,255,0.32);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.3);
    overflow: hidden; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease;
  }
  .btn::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: 6%; height: 44%; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.12)); pointer-events: none;
  }
  .btn::after {
    content: ""; position: absolute; top: -60%; left: -50%; width: 40%; height: 220%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
    transform: rotate(20deg); animation: btnSweep 3.4s ease-in-out infinite; pointer-events: none;
  }
  @keyframes btnSweep { 0% { transform: translateX(-30px) rotate(20deg); opacity: 0 } 20% { opacity: 1 } 60% { transform: translateX(200px) rotate(20deg); opacity: 0 } 100% { opacity: 0 } }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(10,60,120,0.55), 0 0 30px rgba(120,200,255,0.6), inset 0 2px 0 rgba(255,255,255,1), inset 0 -12px 18px rgba(255,255,255,0.32); }
  .btn:active { transform: translateY(1px) scale(0.99); }

  footer {
    position: relative; z-index: 2; margin-top: 1.8rem; text-align: center;
    font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700;
    color: #0b3862;
    text-shadow: 0 1px 0 #ffffff, 0 2px 3px rgba(255,255,255,0.7), 0 -1px 1px rgba(10,50,100,0.3), 0 0 16px rgba(255,255,255,0.7);
  }

  @media (prefers-reduced-motion: reduce) {
    .sky.dusk, .sky.night, .stars, .sun, .sun-rays, .moon, .flare, .cloud, .veil, .bokeh, .bubble,
    .iridescence, .sparkle, .panel-sweep, .shine, .btn::after, main { animation: none !important; }
    .sky.day { background: linear-gradient(180deg,#1f6fd0,#7cc2ef,#eefaff); }
  }


/* ================= landing ================= */
  body { place-items: start center; }
  main { width: min(96vw, 1080px); padding-top: clamp(1.2rem, 7vh, 4rem); }
  .hero {
    position: relative; overflow: hidden;
    padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2.6rem);
    border-radius: 30px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.8) 0%, rgba(224,243,255,0.52) 30%,
      rgba(188,226,255,0.42) 52%, rgba(150,205,255,0.38) 64%,
      rgba(255,255,255,0.62) 100%);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 30px 70px rgba(18,58,99,0.4), 0 0 80px rgba(130,205,255,0.4),
      inset 0 2px 0 rgba(255,255,255,1), inset 0 -26px 42px rgba(255,255,255,0.45);
    -webkit-backdrop-filter: blur(11px) saturate(1.7);
    backdrop-filter: blur(11px) saturate(1.7);
  }
  .hero::before {
    content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 50%;
    border-radius: 29px 29px 60% 60% / 29px 29px 100% 100%;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.05)); pointer-events: none;
  }
  .hero-night {
    position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(232,244,255,0.5), rgba(196,224,255,0.36));
    opacity: 0; animation: nightCycle var(--cycle, 80s) linear infinite;
  }
  .hero-sweep {
    position: absolute; top: -60%; left: -40%; width: 50%; height: 220%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
    transform: rotate(22deg); mix-blend-mode: screen; pointer-events: none;
    animation: sweep 6.5s ease-in-out infinite;
  }
  .hero-inner { position: relative; z-index: 2; text-align: center; }
  .wordmark {
    font-size: clamp(2.4rem, 9vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95;
    background: linear-gradient(180deg,#ffffff 0%,#eefaff 18%,#b6e2ff 34%,#4aa6e8 50%,#0f62b4 74%,#0a4a8c 100%);
    background-size: 100% 220%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.95), 0 1px 0 #fff, 0 2px 0 #cfe6f7, 0 3px 0 #a9cfe9, 0 5px 9px rgba(10,60,120,0.45);
    animation: textShine 5s ease-in-out infinite;
  }
  .sub {
    margin-top: 0.55rem; color: #000; font-weight: 800;
    letter-spacing: 0.42em; text-transform: uppercase;
    font-size: clamp(0.8rem, 2.4vw, 1.15rem);
    text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 -1px 1px rgba(255,255,255,0.6);
  }

  /* ---------- cards ---------- */
  .cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem; margin-top: 1.4rem;
  }
  .card {
    position: relative; overflow: hidden; text-decoration: none; color: var(--ink);
    padding: 1.3rem 1.4rem; border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(224,243,255,0.48) 34%, rgba(176,220,255,0.42) 60%, rgba(255,255,255,0.58) 100%);
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 16px 36px rgba(18,58,99,0.34), inset 0 2px 0 rgba(255,255,255,1), inset 0 -16px 26px rgba(255,255,255,0.4);
    -webkit-backdrop-filter: blur(9px) saturate(1.6); backdrop-filter: blur(9px) saturate(1.6);
    transition: transform 0.16s ease, box-shadow 0.2s ease;
  }
  .card::before {
    content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 48%;
    border-radius: 21px 21px 60% 60% / 21px 21px 100% 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.05)); pointer-events: none;
  }
  .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(232,244,255,0.5), rgba(196,224,255,0.36));
    opacity: 0; animation: nightCycle var(--cycle, 80s) linear infinite;
  }
  .card > * { position: relative; z-index: 2; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(18,58,99,0.44), 0 0 30px rgba(130,205,255,0.5), inset 0 2px 0 rgba(255,255,255,1), inset 0 -16px 26px rgba(255,255,255,0.4); }
  .card .icon { display: block; font-size: 1.9rem; margin-bottom: 0.6rem; filter: drop-shadow(0 2px 3px rgba(10,60,120,0.3)); }
  .card .name { display: block; font-size: 1.15rem; font-weight: 800; color: #0d3a63;
    text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 -1px 1px rgba(10,50,100,0.25); }
  .card .desc { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: #2a5a86;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
  .card.soon { pointer-events: none; opacity: 0.6; border-style: dashed; }
  .card.soon .desc { font-style: italic; }


  /* ---------- games section ---------- */
  .page-games { place-items: start center; overflow-y: auto; overflow-x: hidden; }
  .page-games main { width: min(96vw, 1080px); padding-top: clamp(1.2rem, 7vh, 4rem); padding-bottom: 3rem; }
  .page-game { place-items: safe center; overflow-y: auto; overflow-x: hidden; }
  .page-game main { width: min(96vw, 760px); padding: 1rem 0 clamp(1.6rem, 5vh, 3rem); }

  .crumb {
    display: flex; width: fit-content; margin: 0 auto 1.15rem;
    align-items: center; gap: 0.4rem;
    padding: 0.5rem 1.1rem; border-radius: 999px;
    color: #0d3a63; font-weight: 800; font-size: 0.9rem; text-decoration: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(216,239,255,0.86));
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 10px 22px rgba(18,58,99,0.35), 0 0 22px rgba(130,205,255,0.4), inset 0 1px 0 rgba(255,255,255,1);
    -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.85); transition: transform 0.14s ease;
  }
  .crumb:hover { transform: translateY(-1px); }
  .page-games .crumb { margin-top: 1rem; }

  .game-title { font-size: clamp(1.7rem, 5.5vw, 2.6rem); }
  .hud { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 0.5rem;
    font-weight: 700; color: #123a63; text-shadow: 0 1px 0 rgba(255,255,255,0.85); }
  .hud b { color: #0a4a8c; }
  canvas#game {
    display: block; width: min(78vw, 500px, 42vh); aspect-ratio: 1 / 1; height: auto;
    margin: 0.9rem auto 0; border-radius: 18px; touch-action: none; cursor: pointer;
    background: rgba(8, 26, 46, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 2px 8px rgba(0,0,0,0.3), 0 12px 30px rgba(10,40,80,0.42);
  }
  canvas#game.wide { width: min(86vw, 680px, 44vh); aspect-ratio: 8 / 5; }
  canvas#game.tall { width: min(30vw, 250px, 44vh); aspect-ratio: 1 / 2; }
  .controls { margin-top: 1rem; text-align: left;
    background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.7);
    border-radius: 16px; padding: 0.8rem 1rem; }
  .controls h2 { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: #2a5a86; margin-bottom: 0.5rem; }
  .controls ul { list-style: none; }
  .controls li { color: #16436b; font-size: 0.94rem; padding: 0.17rem 0; }
  kbd { display: inline-block; min-width: 1.5em; text-align: center; padding: 0.12em 0.45em;
    margin: 0 0.1em; font: inherit; font-weight: 700; font-size: 0.82em; color: #0d3a63;
    background: linear-gradient(180deg, #ffffff, #d7ecff); border: 1px solid rgba(120,170,220,0.8);
    border-bottom-width: 2px; border-radius: 7px; box-shadow: 0 1px 0 rgba(255,255,255,0.9); }