:root{
  --snow:#F4F7FB;
  --paper:#FFFFFF;
  --ink:#181B22;
  --ink-soft:#5A6070;
  --ice:#3E8FDB;
  --ice-deep:#2C6FB4;
  --ice-tint:#E4EFFA;
  --violet:#7A63E8;
  --mint:#2FA88C;
  --line:#DFE4EC;
  --radius:18px;
  --blob1:#C7E0F8;
  --blob2:#DCD5F9;
  --blob3:#CFF0E6;
  --ticker-bg:rgba(255,255,255,.6);
  --card-shadow:rgba(44,111,180,.13);
}
html[data-theme="dark"]{
  --snow:#0E1118;
  --paper:#171C26;
  --ink:#EDF1F7;
  --ink-soft:#9AA3B2;
  --ice-deep:#6FB4F2;
  --ice-tint:rgba(111,180,242,.12);
  --line:rgba(255,255,255,.10);
  --blob1:#1D3A5E;
  --blob2:#2E2A57;
  --blob3:#173D36;
  --ticker-bg:rgba(255,255,255,.05);
  --card-shadow:rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Manrope',sans-serif;
  background:var(--snow);
  color:var(--ink);
  line-height:1.55;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .6s ease,color .6s ease;
}

/* ================= РУХОМИЙ ФОН ================= */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg span{
  position:absolute;
  width:55vmax;height:55vmax;
  border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  will-change:transform;
}
.bg span:nth-child(1){
  background:radial-gradient(closest-side,var(--blob1),transparent 70%);
  animation:orbit1 21s ease-in-out infinite alternate;
  top:-20vmax;left:-15vmax;
}
.bg span:nth-child(2){
  background:radial-gradient(closest-side,var(--blob2),transparent 70%);
  animation:orbit2 27s ease-in-out infinite alternate;
  bottom:-25vmax;right:-15vmax;
}
.bg span:nth-child(3){
  background:radial-gradient(closest-side,var(--blob3),transparent 70%);
  animation:orbit3 24s ease-in-out infinite alternate;
  top:35%;left:-25vmax;
  opacity:.45;
}
html[data-theme="dark"] .bg span{mix-blend-mode:screen;opacity:.6}
@keyframes orbit1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(20vw,10vh,0) scale(1.2)}
  100%{transform:translate3d(6vw,24vh,0) scale(.95)}
}
@keyframes orbit2{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-16vw,-14vh,0) scale(1.15)}
  100%{transform:translate3d(-4vw,-26vh,0) scale(1.05)}
}
@keyframes orbit3{
  0%{transform:translate3d(0,0,0) rotate(0)}
  100%{transform:translate3d(30vw,-12vh,0) rotate(20deg)}
}

/* лапки, що спливають — canvas */
#paws{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ================= LAYOUT ================= */
.page{
  position:relative;
  z-index:1;
  max-width:520px;
  margin:0 auto;
  padding:44px 20px 40px;
}

/* ================= HEAD ================= */
.head{text-align:center;margin-bottom:10px}
.avatar-ring{
  width:122px;height:122px;
  margin:0 auto 16px;
  border-radius:50%;
  padding:4px;
  background:conic-gradient(from var(--a,0deg),var(--ice),var(--mint),var(--violet),var(--ice));
  animation:ringspin 6s linear infinite, pop .7s cubic-bezier(.2,1.4,.4,1) both;
}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ringspin{to{--a:360deg}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.avatar-ring .inner{width:100%;height:100%;border-radius:50%;padding:4px;background:var(--snow)}
.avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

.head h1{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(1.3rem,6vw,1.65rem);
  font-weight:900;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ice-deep) 30%,var(--violet) 50%,var(--ice-deep) 70%,var(--ink) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}
.head .tag{color:var(--ink-soft);font-size:.95rem;margin-top:6px}
.head .remus{
  font-family:'Caveat',cursive;
  font-size:1.3rem;
  color:var(--ice-deep);
  display:inline-block;
  transform:rotate(-2deg);
  margin-top:8px;
  animation:wiggle 5s ease-in-out infinite;
}
@keyframes wiggle{
  0%,100%{transform:rotate(-2deg)}
  50%{transform:rotate(1.5deg)}
}

/* ================= БІЖУЧИЙ РЯДОК ================= */
.ticker{
  overflow:hidden;
  margin:18px -20px 6px;
  padding:10px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ticker-bg);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker 22s linear infinite;
}
.ticker-track span{
  font-family:'Unbounded',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:0 14px;
  white-space:nowrap;
}
.ticker-track span b{color:var(--ice-deep)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ================= СЕКЦІЇ ================= */
.sec{margin-top:26px}
.sec-label{
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ice-deep);
  font-weight:700;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ================= КАРТКИ ================= */
.links{display:grid;gap:12px}
.link{
  position:relative;
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper);
  text-decoration:none;
  color:var(--ink);
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  opacity:0;
  animation:rise .6s cubic-bezier(.2,.9,.3,1) forwards;
}
/* каскадна поява карток */
.link:nth-of-type(1){animation-delay:.15s}
.link:nth-of-type(2){animation-delay:.24s}
.link:nth-of-type(3){animation-delay:.33s}
.link:nth-of-type(4){animation-delay:.42s}
@keyframes rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
.link::before{
  content:"";
  position:absolute;
  top:0;left:-80%;
  width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(62,143,219,.10),transparent);
  transform:skewX(-20deg);
  transition:left .5s ease;
}
.link:hover{transform:translateY(-3px);border-color:var(--ice);box-shadow:0 10px 26px var(--card-shadow)}
.link:hover::before{left:120%}
.link:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
.link:active{transform:scale(.98)}
.link .ico{
  width:44px;height:44px;
  flex:0 0 44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:var(--ice-tint);
  transition:transform .25s cubic-bezier(.2,1.4,.4,1);
}
.link:hover .ico{transform:scale(1.12) rotate(-6deg)}
.link .ico svg{width:21px;height:21px;fill:var(--ice-deep)}
.link b{display:block;font-family:'Unbounded',sans-serif;font-size:.9rem;font-weight:700}
.link small{color:var(--ink-soft);font-size:.83rem}
.link .arr{
  margin-left:auto;
  color:var(--ink-soft);
  font-size:1.1rem;
  transition:transform .22s ease,color .22s ease;
}
.link:hover .arr{transform:translateX(4px);color:var(--ice-deep)}

/* благодійна картка — кольоровий акцент */
.link.charity{
  background:linear-gradient(135deg,var(--ice) 0%,#5B4FBF 100%);
  border:none;
  color:#fff;
  padding:20px 18px;
  box-shadow:0 12px 32px rgba(62,143,219,.35);
}
.link.charity small{color:rgba(255,255,255,.85)}
.link.charity .ico{background:rgba(255,255,255,.18)}
.link.charity .ico svg{fill:#fff}
.link.charity .arr{color:rgba(255,255,255,.85)}
.link.charity:hover{box-shadow:0 16px 40px rgba(62,143,219,.45);border:none}
.link.charity::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  box-shadow:0 0 0 0 rgba(62,143,219,.45);
  animation:pulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(62,143,219,.40)}
  70%{box-shadow:0 0 0 14px rgba(62,143,219,0)}
  100%{box-shadow:0 0 0 0 rgba(62,143,219,0)}
}

footer{
  text-align:center;
  margin-top:34px;
  font-size:.8rem;
  color:var(--ink-soft);
  opacity:0;
  animation:rise .6s ease .9s forwards;
}

@media (prefers-reduced-motion:reduce){
  .bg span,.avatar-ring,.head h1,.head .remus,.ticker-track{animation:none}
  .link,footer{animation:none;opacity:1}
  .link .ico,.link .arr{transition:none}
  .link::before{display:none}
  .link.charity::after{animation:none}
  #paws{display:none}
}