body { background-color: #06102a; }
.bg-hero {
  background-image:
    radial-gradient(ellipse 65% 55% at 85% 5%, rgba(224,36,63,.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 5% 20%, rgba(31,63,138,.65), transparent 62%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(22,48,106,.6), transparent 65%);
}
.bg-stars {
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px), radial-gradient(rgba(255,255,255,.28) 1px, transparent 1.4px);
  background-size: 56px 56px, 23px 23px; background-position: 0 0, 11px 17px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 20%, transparent 75%);
  opacity: .5;
}
/* Finnish flag stripe: white / blue */
.stripe-bar { height: 6px; background: repeating-linear-gradient(90deg, #ffffff 0 28px, #003580 28px 42px); }
.text-shine { background: linear-gradient(100deg, #ffffff 10%, #dce8ff 45%, #7fb2ff 80%, #3d7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card { background: linear-gradient(170deg, rgba(15,33,73,.85), rgba(6,16,42,.8)); backdrop-filter: blur(10px); }
.hairline { border: 1px solid rgba(207,224,255,.12); }
.vip-frame { position: relative; }
.vip-frame::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px;
  background: linear-gradient(150deg, #e0243f, #ffffff 35%, #7fb2ff 65%, #e0243f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.ch-tile { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: .6rem; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -14px rgba(0,0,0,.9); transition: transform .2s ease; }
.ch-tile:hover { transform: translateY(-2px); }
.ch-tile b { font-weight: 900; letter-spacing: -.02em; }
.ch-big { font-size: 15px; } .ch-mid { font-size: 11.5px; letter-spacing: .01em !important; }
.btn-pulse { animation: btn-pulse 1.6s ease-in-out infinite; }
.btn-pulse:hover { animation-play-state: paused; }
@keyframes btn-pulse {
  0%,100% { scale: 1; box-shadow: 0 10px 34px -8px rgba(37,211,102,.65), 0 0 0 0 rgba(37,211,102,.7); }
  50% { scale: 1.05; box-shadow: 0 10px 34px -8px rgba(37,211,102,.65), 0 0 0 14px rgba(37,211,102,0); }
}
.vip-badge {
  background: linear-gradient(110deg, #b31942 0%, #e0243f 25%, #ff6b7f 40%, #e0243f 55%, #b31942 100%);
  background-size: 220% 100%; color: #fff; border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 28px -12px rgba(224,36,63,.9);
  animation: vip-shine 5s linear infinite, vip-pulse 2.6s ease-in-out infinite;
}
@keyframes vip-shine { to { background-position: -220% 0; } }
@keyframes vip-pulse { 0%,100% { scale: 1; } 50% { scale: 1.05; } }
.btn-gold {
  background: linear-gradient(110deg, #e0a93a 0%, #ffd66b 30%, #fff1b8 45%, #ffd66b 60%, #e0a93a 100%);
  background-size: 220% 100%; color: #06102a; border: 1px solid rgba(255,241,184,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 34px -12px rgba(255,214,107,.75);
  animation: vip-shine 4s linear infinite; transition: filter .2s ease, transform .2s ease;
}
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-gold i { color: #06102a; }
#site-header.is-solid { background: rgba(4,11,30,.88); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -20px rgba(0,0,0,.9); }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
.safe-bottom { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.tap { transition: transform .12s ease, filter .2s ease; } .tap:active { transform: scale(.97); }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
@media (min-width: 520px) { .app-shell { border-left: 1px solid rgba(207,224,255,.1); border-right: 1px solid rgba(207,224,255,.1); box-shadow: 0 0 80px -20px rgba(31,63,138,.8); } }
@media (prefers-reduced-motion: reduce) {
  .btn-pulse, .vip-badge, .btn-gold { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}