/* ============ TROPHIC — bază: variabile, reset, componente comune ============ */

:root{
  --bg:#070708;
  --surface:#101012;
  --surface-2:#17171a;
  --line:#232328;
  --orange:#FF6A00;
  --orange-hot:#FF8A2A;
  --orange-dim:rgba(255,106,0,.14);
  --text:#F2F0EC;
  --muted:#8E8C92;
  --danger:#ff4d4d;
  --mono:'JetBrains Mono',monospace;
  --disp:'Unbounded',sans-serif;
  --body:'Space Grotesk',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden}
::selection{background:var(--orange);color:#000}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img,svg{max-width:100%}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--orange);color:#000;border:none;
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;padding:13px 24px;
  position:relative;overflow:hidden;transition:.25s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn:hover{background:var(--orange-hot);box-shadow:0 0 28px rgba(255,106,0,.45)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--orange);color:var(--orange)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,48px);
  background:rgba(7,7,8,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:.08em}
.logo b{color:var(--orange);font-weight:800}
.nav-links{display:flex;gap:30px;font-family:var(--mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--orange)}
#navAccount .dot{width:8px;height:8px;border-radius:50%;background:#3ddc7a;box-shadow:0 0 10px #3ddc7a;display:none}
#navAccount.logged .dot{display:block}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:44px clamp(20px,6vw,80px);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:18px;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
footer .m{color:var(--orange)}

/* ---------- toast ---------- */
#toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(80px);
  z-index:900;background:var(--surface-2);border:1px solid var(--orange);
  color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.15em;
  padding:14px 24px;opacity:0;transition:.4s cubic-bezier(.2,.7,.2,1);pointer-events:none;
  max-width:min(92vw,520px);text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--danger)}

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

@media(max-width:860px){
  .nav-links{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}