:root {
  --night:#0F2740; --lapis:#163A5F; --tile:#3FB9C4; --ochre:#E0A458; --anor:#E0546A;
  --paper:#F3ECDD; --ink:#0B1B2B; --mute:rgba(243,236,221,.62); --sage:#A8C686; --sky:#8FB3E8;
}
* { box-sizing:border-box; }
html { background:var(--night); }
body {
  margin:0; min-height:100vh; color:var(--paper);
  font-family:'Manrope',system-ui,sans-serif; font-size:15px; line-height:1.55;
  background: radial-gradient(900px 500px at 70% -150px, #1E5A7A 0%, transparent 60%), var(--night);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1, h2, .big { font-family:'Unbounded','Manrope',sans-serif; }
.wrap { max-width:720px; margin:0 auto; padding:44px 18px 60px; position:relative; }
h1 { font-size:clamp(24px,6vw,36px); font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
.sub { color:var(--mute); margin:0 0 30px; }
a.back { color:var(--tile); text-decoration:none; font-size:14px; }

/* 3D-пол: решётка восьмиконечных звёзд (гирих), уходящая в перспективу */
.floor { position:fixed; left:-30%; right:-30%; top:35%; bottom:-40%; z-index:-1; perspective:700px; perspective-origin:50% 0; pointer-events:none; }
.floor::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6l9 22 22-9-9 22 22 9-22 9 9 22-22-9-9 22-9-22-22 9 9-22-22-9 22-9-9-22 22 9z' fill='none' stroke='%233FB9C4' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='50' r='7' fill='none' stroke='%23E0A458' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/110px 110px;
  transform:rotateX(72deg); transform-origin:50% 0; opacity:.16;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 55%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 55%,transparent);
  animation:drift 22s linear infinite;
}
@keyframes drift { to { background-position:0 220px; } }

/* плитки */
.stage { perspective:1200px; perspective-origin:50% 30%; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; transform-style:preserve-3d; transform:rotateX(12deg); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tile { display:block; text-decoration:none; color:var(--ink); transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1); animation:rise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 120ms); }
.tile-in {
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  aspect-ratio:1/1.05; padding:16px; border-radius:18px; background:var(--c);
  transform-style:preserve-3d; box-shadow:0 34px 44px -20px rgba(0,0,0,.65);
  animation:float 7s ease-in-out infinite; animation-delay:calc(var(--i) * -1.7s);
}
.tile-in::after { content:''; position:absolute; inset:0; border-radius:18px; background:color-mix(in srgb,var(--c) 55%,#000); transform:translateZ(-16px); }
.tile-in::before { content:''; position:absolute; inset:0; border-radius:18px; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.38),transparent 45%,rgba(0,0,0,.12)); }
.tile:hover, .tile:focus-visible { transform:translateZ(36px) translateY(-6px) rotateX(-5deg); outline:none; }
.tile:focus-visible .tile-in { box-shadow:0 0 0 3px var(--paper), 0 34px 44px -20px rgba(0,0,0,.65); }
.tile.go { transform:translateZ(60px) rotateY(90deg); transition-duration:.35s; }
.tile .ico { width:40px; height:40px; color:var(--ink); }
.tile .ico svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tile .name { font-family:'Unbounded'; font-weight:700; font-size:clamp(14px,3.8vw,18px); line-height:1.15; }
.tile .hint { display:block; font-size:12px; opacity:.75; margin-top:4px; }
.tile .big { font-size:clamp(28px,8vw,40px); font-weight:800; line-height:1; }
.tile .big small { font-size:11px; font-weight:600; margin-left:4px; }
@keyframes rise { from { opacity:0; transform:translateZ(-80px) translateY(50px) rotateX(-40deg); } }
@keyframes float { 0%,100% { transform:translateZ(0) rotateX(0) rotateZ(0); } 50% { transform:translateZ(14px) rotateX(2.5deg) rotateZ(-.6deg); } }

footer { margin-top:36px; color:var(--mute); font-size:12px; }
@media (max-width:380px) { .grid { gap:12px; } }
@media (prefers-reduced-motion:reduce) { .tile, .tile-in, .floor::before { animation:none; } .tile, .grid { transition:none; } }