/* ============================================================
   CRASH SMP — styles.css
   Paletă oficială: #D532D7 (magenta) / #99018F (purpuriu)
   ============================================================ */

:root{
  /* culori principale */
  --primary:    #D532D7;
  --primary-2:  #99018F;
  --primary-rgb: 213, 50, 215;
  --primary2-rgb: 153, 1, 143;

  /* fundal & suprafețe */
  --bg:#0b0612;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);
  --border-hover:rgba(var(--primary-rgb),.55);

  /* accente secundare */
  --gold:#fbbf24;
  --cyan:#67e8f9;

  /* text */
  --text:#f6f1fb;
  --muted:#a597b5;

  --radius:20px;
  --grad:linear-gradient(135deg,var(--primary),var(--primary-2));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary);color:#fff}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif}

/* ------------------------------------------------------------
   FUNDAL: canvas de particule + glow + grilă
   ------------------------------------------------------------ */
#particles{
  position:fixed;inset:0;z-index:-3;
  width:100%;height:100%;
}
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none}
.bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(620px 440px at 18% 8%,  rgba(var(--primary-rgb),.16), transparent 65%),
    radial-gradient(720px 500px at 85% 22%, rgba(var(--primary2-rgb),.18), transparent 65%),
    radial-gradient(620px 520px at 50% 105%, rgba(var(--primary-rgb),.10), transparent 65%);
}
.bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 100%);
}
.orb{
  position:fixed;border-radius:50%;
  filter:blur(80px);opacity:.4;z-index:-1;pointer-events:none;
  animation:drift 16s ease-in-out infinite alternate;
}
.orb.p1{width:360px;height:360px;background:rgba(var(--primary-rgb),.28);top:-90px;left:-90px}
.orb.p2{width:320px;height:320px;background:rgba(var(--primary2-rgb),.30);top:32%;right:-110px;animation-delay:4s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(44px,52px)}}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------
   NAVBAR (sticky + stare la scroll, gestionată din JS)
   ------------------------------------------------------------ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(11,6,18,.5);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
nav.scrolled{
  background:rgba(11,6,18,.78);
  border-bottom-color:var(--border);
}
.nav-in{
  max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  font-weight:700;font-size:19px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);
}
.brand .dot{
  width:12px;height:12px;border-radius:4px;
  background:var(--grad);
  box-shadow:0 0 16px rgba(var(--primary-rgb),.9);
}
.brand .crash{color:var(--primary)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--text)}

/* hamburger (vizibil doar pe mobil) */
.burger{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:8px;
}
.burger span{
  width:24px;height:2.5px;border-radius:2px;
  background:var(--text);
  transition:transform .3s, opacity .3s;
}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px}

/* meniu mobil */
.mobile-menu{
  display:none;
  flex-direction:column;gap:6px;
  padding:10px 24px 22px;
  border-top:1px solid var(--border);
  background:rgba(11,6,18,.92);
  backdrop-filter:blur(16px);
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  color:var(--text);text-decoration:none;
  font-size:16px;font-weight:500;
  padding:13px 6px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mobile-menu a.btn{margin-top:12px;justify-content:center;border-bottom:none}

@media(max-width:760px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ------------------------------------------------------------
   BUTOANE
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:14px;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.btn.primary{
  background:var(--grad);
  color:#fff;
  box-shadow:0 8px 26px rgba(var(--primary2-rgb),.4);
}
.btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(var(--primary-rgb),.55), 0 12px 32px rgba(var(--primary2-rgb),.45);
}
.btn.ghost{
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--border-hover);background:var(--surface-2)}
.btn.small{padding:9px 18px;font-size:14px;border-radius:11px}
.btn:focus-visible,.ip-chip:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
header{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:140px 24px 90px;position:relative;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--primary);
  background:rgba(var(--primary-rgb),.09);
  border:1px solid rgba(var(--primary-rgb),.3);
  padding:8px 16px;border-radius:999px;
  margin-bottom:28px;
}
.pill .live{
  width:8px;height:8px;border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 10px var(--primary);
  animation:pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{50%{opacity:.4}}
h1{
  font-size:clamp(44px,8vw,86px);
  font-weight:700;letter-spacing:-.03em;line-height:1.05;
}
h1 .grad{
  position:relative;
  background:linear-gradient(120deg,var(--primary) 5%,#f49bf5 45%,var(--primary-2) 95%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.tagline{
  margin-top:24px;max-width:640px;
  font-size:clamp(15.5px,2vw,18px);color:var(--muted);
}
.cta-row{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.chip-row{
  margin-top:30px;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}
.ip-chip{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Space Grotesk',monospace;font-weight:600;font-size:16px;
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  padding:14px 22px;border-radius:16px;
  cursor:pointer;transition:border-color .2s, transform .15s;
  user-select:all;
  color:var(--text);text-decoration:none;
}
.ip-chip:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.ip-chip .lab{font-family:'Inter';font-size:12px;font-weight:500;color:var(--muted);user-select:none}
.ip-chip .copy-ico{opacity:.6;font-size:15px;user-select:none;transition:color .2s}
.ip-chip.copied .copy-ico{color:var(--primary);opacity:1}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  animation:hint 2s ease-in-out infinite;
}
@keyframes hint{50%{transform:translate(-50%,8px);opacity:.5}}

/* ------------------------------------------------------------
   SECȚIUNI
   ------------------------------------------------------------ */
section{padding:110px 0}
.kicker{
  display:inline-block;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);margin-bottom:16px;
}
h2{
  font-size:clamp(30px,4.4vw,44px);
  font-weight:700;letter-spacing:-.025em;line-height:1.15;
  margin-bottom:18px;
}
.lead{color:var(--muted);max-width:620px;font-size:17px}

/* carduri glass */
.grid{display:grid;gap:18px;margin-top:48px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px 30px;
  backdrop-filter:blur(12px);
  transition:transform .25s, border-color .25s, background .25s;
  overflow:hidden;
}
/* glow care urmărește mouse-ul — coordonate setate din JS */
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(var(--primary-rgb),.14), transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.card:hover{transform:translateY(-6px);border-color:var(--border-hover);background:var(--surface-2)}
.card:hover::before{opacity:1}
.ico{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:20px;
  background:rgba(var(--primary-rgb),.10);
  border:1px solid rgba(var(--primary-rgb),.28);
}
.card h3{font-size:21px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15px}
.tag{
  position:absolute;top:22px;right:22px;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:rgba(var(--primary-rgb),.12);color:var(--primary);
  border:1px solid rgba(var(--primary-rgb),.3);
}
.tag.alt{background:rgba(var(--primary2-rgb),.18);color:#f08ae9;border-color:rgba(var(--primary-rgb),.35)}

/* ------------------------------------------------------------
   STAFF
   ------------------------------------------------------------ */
.role-head{display:flex;align-items:center;gap:12px;margin:54px 0 20px}
.role-badge{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;
}
.role-badge.f{background:rgba(251,191,36,.12);color:var(--gold);border:1px solid rgba(251,191,36,.3)}
.role-badge.c{background:rgba(var(--primary-rgb),.10);color:var(--primary);border:1px solid rgba(var(--primary-rgb),.32)}
.role-badge.d{background:rgba(103,232,249,.10);color:var(--cyan);border:1px solid rgba(103,232,249,.3)}
.member{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 24px;
  backdrop-filter:blur(12px);
  transition:transform .25s, border-color .25s;
}
.member:hover{transform:translateY(-5px);border-color:var(--border-hover)}
.avatar{
  width:50px;height:50px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:19px;
  color:#fff;margin-bottom:16px;
  background:var(--grad);
  box-shadow:0 4px 18px rgba(var(--primary2-rgb),.45);
}
.member .nick{font-family:'Space Grotesk';font-weight:600;font-size:17.5px;display:block;margin-bottom:6px}
.member .desc{color:var(--muted);font-size:14px;line-height:1.6}

/* ------------------------------------------------------------
   CONECTARE
   ------------------------------------------------------------ */
.connect{
  position:relative;
  background:linear-gradient(160deg, rgba(var(--primary-rgb),.10), rgba(var(--primary2-rgb),.12));
  border:1px solid var(--border);
  border-radius:28px;
  padding:64px 32px;
  text-align:center;
  margin-top:50px;
  overflow:hidden;
  backdrop-filter:blur(12px);
}
.connect::before{
  content:"";position:absolute;width:440px;height:440px;border-radius:50%;
  background:rgba(var(--primary-rgb),.16);filter:blur(95px);
  top:-190px;left:50%;transform:translateX(-50%);
}
.connect h2{margin-bottom:10px}
.connect .lead{margin:0 auto}
.connect .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px;position:relative}
.connect .final{margin-top:30px;font-size:15px;color:var(--muted)}
.connect .final b{color:var(--text)}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
footer{
  border-top:1px solid var(--border);
  padding:44px 24px;text-align:center;
  color:var(--muted);font-size:14px;
}
footer .brand{justify-content:center;margin-bottom:10px;font-size:17px}
footer .copy{margin-top:8px;font-size:12.5px;opacity:.65}

/* ------------------------------------------------------------
   ANIMAȚII
   ------------------------------------------------------------ */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.pill{animation:riseIn .6s ease-out both}
h1{animation:riseIn .7s .12s ease-out both}
.tagline{animation:riseIn .7s .24s ease-out both}
.cta-row{animation:riseIn .7s .36s ease-out both}
header .chip-row{animation:riseIn .7s .48s ease-out both}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  #particles{display:none}
}

/* ------------------------------------------------------------
   RESPONSIVE — tabletă & telefon
   ------------------------------------------------------------ */
@media (max-width:900px){
  section{padding:84px 0}
  .grid.three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

@media (max-width:760px){
  header{min-height:92vh;padding:120px 20px 80px}
  .tagline{font-size:15px}
  .connect{padding:48px 22px;border-radius:22px}
  .scroll-hint{display:none}
}

@media (max-width:520px){
  .wrap{padding:0 18px}
  section{padding:68px 0}
  h1{font-size:clamp(38px,11vw,52px)}
  h2{font-size:clamp(26px,7vw,32px)}
  .grid{gap:14px;margin-top:36px}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .tag{position:static;display:inline-block;margin-bottom:14px}

  /* chip-urile devin full-width și ușor de apăsat cu degetul */
  .chip-row, .connect .row{flex-direction:column;align-items:stretch}
  .ip-chip{justify-content:center;font-size:15px;padding:15px 18px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{justify-content:center}

  .orb{display:none} /* economisim bateria pe telefon */
}

/* ecrane foarte mici (telefoane vechi) */
@media (max-width:360px){
  h1{font-size:34px}
  .ip-chip{font-size:13.5px;gap:8px}
}

/* ecrane foarte late (monitoare mari) */
@media (min-width:1600px){
  .wrap{max-width:1200px}
}