/* ============================================================
   debete.pl — landing
   Brand: navy #0B1F37 · copper #BD7A5F
   ============================================================ */

:root{
  --navy-900:#07142a;
  --navy-800:#0B1F37;
  --navy-700:#132a47;
  --copper:#BD7A5F;
  --paper:#eef3f9;
  --font:'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  background:var(--navy-800);
  color:var(--paper);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--copper); outline-offset:4px; border-radius:4px}

/* ── Background ────────────────────────────────────────── */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(ellipse 120% 90% at 50% 0%, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
}
.grid-lines{
  position:absolute; inset:-20%;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 55% 55% at 50% 45%, #000 5%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 45%, #000 5%, transparent 72%);
}
.glow{position:absolute; border-radius:50%; filter:blur(110px)}
.glow-a{
  width:min(82vw,820px); aspect-ratio:1; background:rgba(189,122,95,.42);
  left:50%; top:38%; translate:-50% -50%;
  animation:drift-a 18s ease-in-out infinite;
}
.glow-b{
  width:min(70vw,660px); aspect-ratio:1; background:rgba(29,58,92,.85);
  left:12%; bottom:-18%;
  animation:drift-b 22s ease-in-out infinite;
}
.vignette{position:absolute; inset:0; background:radial-gradient(ellipse 90% 80% at 50% 45%, transparent 40%, rgba(4,10,20,.6) 100%)}

@keyframes drift-a{
  0%,100%{transform:translate(0,0) scale(1); opacity:.85}
  50%    {transform:translate(3%,-5%) scale(1.1); opacity:1}
}
@keyframes drift-b{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(-6%,4%) scale(1.08)}
}

/* ── Stage ─────────────────────────────────────────────── */
.stage{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem;
}
.logo{
  width:min(80vw, 460px);
  filter:drop-shadow(0 24px 60px rgba(4,10,20,.6));
  animation:rise .9s cubic-bezier(.22,1,.36,1) both;
}

/* ── Footer ────────────────────────────────────────────── */
.foot{
  position:relative; z-index:1;
  padding:1.6rem; text-align:center;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(238,243,249,.26);
  animation:rise .9s .25s cubic-bezier(.22,1,.36,1) both;
}

@keyframes rise{
  from{opacity:0; transform:translateY(16px)}
  to  {opacity:1; transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.001ms !important}
}