:root {
  --ink: #fff;
  --muted: #d8dbe8;
  --amber: #ffb454;
  --magenta: #e04fa0;
  --night: #0b0d1a;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 64px;
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--night);
}
main { width: 100%; max-width: 440px; margin-top: 6vh; text-align: center; }
h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- home page ---------- */
body.home { background: transparent; }
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(to bottom, #0b0d1a 0%, #1b1535 55%, #3a1a44 100%); }
.backdrop::before {            /* the photo, drifting slowly */
  content: "";
  position: absolute; inset: -4%;
  background: url(/bg.jpg) 42% 100% / cover no-repeat;
  animation: drift 50s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.backdrop::after {             /* dark sky for the text, warm neon haze on the horizon */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 34% at 50% 100%, rgba(255,150,70,.30), rgba(240,70,130,.14) 45%, transparent 75%),
    linear-gradient(to bottom, rgba(7,9,20,.86) 0%, rgba(7,9,20,.70) 45%, rgba(7,9,20,.28) 74%, rgba(7,9,20,.10) 100%);
}
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.09) translateX(-1.5%); } }

.avatar {
  position: relative;
  width: 104px; height: 104px;
  margin: 0 auto 16px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, #ffb454, #ff5d8f, #39c6ff, #ffb454);
  box-shadow: 0 0 28px rgba(255,120,100,.45);
}
.avatar::before {              /* rotating sheen on the ring only */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.9) 85%, transparent 100%);
  animation: spin 6s linear infinite;
}
.avatar img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--night); }
@keyframes spin { to { transform: rotate(360deg); } }

.glow {
  background: linear-gradient(100deg, #ffd27a 0%, #ff8a5c 45%, #ff4f93 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255,110,120,.65));
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 50% { filter: drop-shadow(0 0 18px rgba(255,150,90,.95)); } }
.handle {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px;
  font-size: .85rem;
  letter-spacing: .03em;
  color: #ffd9a8;
  background: rgba(255,180,84,.12);
  border: 1px solid rgba(255,180,84,.35);
  border-radius: 999px;
}
.tagline { margin: 0 0 22px; color: var(--muted); text-shadow: 0 1px 8px rgba(0,0,0,.7); }

.links { display: flex; flex-direction: column; gap: 12px; }
.btn {
  --brand: var(--amber);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 10px 14px 10px 10px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: linear-gradient(120deg, rgba(20,22,44,.78), rgba(10,12,26,.62));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.btn::after {                  /* light sweep on hover */
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-within::after { left: 120%; transition: left .7s ease; }
.btn:hover, .btn:focus-visible, .btn:focus-within {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 22px -4px var(--brand);
}
.btn:active { transform: translateY(0) scale(.985); }
.ico {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  color: #fff;
  background: var(--tile, rgba(255,255,255,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.ico svg { width: 24px; height: 24px; }
.txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.txt strong { font-size: 1.05rem; font-weight: 700; }
.txt small { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go { flex: none; width: 20px; height: 20px; color: rgba(255,255,255,.55); transition: transform .18s, color .18s; }
.btn:hover .go { transform: translateX(4px); color: #fff; }

.tiktok { --brand: #25f4ee; --tile: #000; }
.tiktok .ico svg { filter: drop-shadow(1.5px 1.5px 0 #fe2c55) drop-shadow(-1.5px -1.5px 0 #25f4ee); }
.instagram { --brand: #ff5d8f; --tile: radial-gradient(circle at 30% 110%, #fdc468 0%, #fa7e1e 25%, #d62976 55%, #4f5bd5 100%); }
.youtube { --brand: #ff3b30; --tile: #ff0000; }
.facebook { --brand: #4a9bff; --tile: #1877f2; }
.mail { --brand: var(--amber); --tile: linear-gradient(135deg, #ffb454, #ff7a59); }
.mail .ico { color: #1a1020; }
.cover { position: absolute; inset: 0; border-radius: inherit; }
.copy {
  position: relative; z-index: 1;
  flex: none;
  min-width: 54px; height: 44px;
  padding: 0 10px;
  color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s;
}
.copy:hover { background: rgba(255,255,255,.2); }
.copy[hidden] { display: none; }

.foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .85rem; }
.foot span { color: rgba(255,255,255,.75); font-size: .75rem; text-shadow: 0 1px 6px rgba(0,0,0,.95); }
.foot a, .notice a { color: var(--ink); text-underline-offset: 3px; }

/* entrance, once on load */
.home .hero > *, .home .links > *, .home .foot { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.home .hero > :nth-child(2) { animation-delay: .06s; }
.home .hero > :nth-child(3) { animation-delay: .12s; }
.home .hero > :nth-child(4) { animation-delay: .18s; }
.home .links > :nth-child(1) { animation-delay: .26s; }
.home .links > :nth-child(2) { animation-delay: .33s; }
.home .links > :nth-child(3) { animation-delay: .40s; }
.home .links > :nth-child(4) { animation-delay: .47s; }
.home .links > :nth-child(5) { animation-delay: .54s; }
.home .foot { animation-delay: .66s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--muted);
  background: rgba(7,9,20,.94);
  border-top: 1px solid rgba(255,255,255,.14);
}
.notice[hidden] { display: none; }
.foot a, .notice a { display: inline-block; padding: 12px 8px; }
.foot a { background: rgba(7,9,20,.55); border-radius: 999px; padding: 10px 16px; }
/* short screens (landscape phones): keep the notice in the flow so it never covers a link */
@media (max-height: 600px), (max-width: 300px) { .notice { position: static; } }
.notice button {
  flex: none;
  width: 44px; height: 44px;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
}

/* plain pages (privacy, 404) */
body.plain { background-image: linear-gradient(to bottom, #0b0d1a 0%, #1b1535 100%); }
.doc { margin-top: 32px; max-width: 620px; text-align: left; }
.doc h1 { font-size: 1.7rem; }
.doc h2 { margin: 24px 0 4px; font-size: 1.05rem; color: var(--amber); }
.doc p { margin: 0 0 8px; color: var(--muted); }
.doc a { color: var(--ink); text-underline-offset: 3px; }
.updated { font-size: .85rem; }
.back { margin-top: 28px !important; }

/* small phones: tighten so all four links sit above the notice */
@media (max-height: 720px) {
  main { margin-top: 20px; }
  .avatar { width: 76px; height: 76px; margin-bottom: 10px; }
  h1 { font-size: 1.7rem; }
  .tagline { margin-bottom: 14px; font-size: .95rem; }
  .links { gap: 9px; }
  .btn { min-height: 60px; padding-top: 7px; padding-bottom: 7px; }
  .ico { width: 42px; height: 42px; }
}
@media (max-width: 380px) { .mail .txt small { font-size: .76rem; } }
@media (min-width: 700px) {
  main { margin-top: 8vh; }
  h1 { font-size: 2.4rem; }
  .backdrop::before { background-position: center 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}