/* =========================================================
   O MAMĂ — FINAL GLOBAL STABLE UI 2026
   Homepage + Petition + Header + Footer
   Production Ready
   ========================================================= */


/* ================= RESET ================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  background:#f4f1eb;
  color:#1b1b1f;
}

img{
  display:block;
  max-width:100%;
}

a{
  text-decoration:none;
  color:inherit;
}



/* =====================================================
   CONTAINER
   ===================================================== */

.container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}



/* =====================================================
   🔥 HEADER (fix culoare + nav vizibil)
   ===================================================== */

.header,
.topbar{
  position:sticky;
  top:0;
  z-index:1000;

  height:82px;

  display:flex;
  align-items:center;

  background:linear-gradient(135deg,#2b1f45,#3d2c57,#1f2540);

  backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-inner,
.topbar .inner{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* brand */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  height:60px!important;
}

.brand .name{
  color:#fff;
  font-weight:700;
}



/* =====================================================
   🔥 NAVBAR PREMIUM
   ===================================================== */

.nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav a{
  color:#fff;

  font-size:15px;
  font-weight:600;

  padding:10px 16px;

  border-radius:14px;

  background:rgba(255,255,255,.06);

  transition:.18s;
}

.nav a:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.nav a.active{
  background:#fff;
  color:#2b1f45;
}



/* =====================================================
   🔥 HERO — PREMIUM IMPACT CENTERED
   ===================================================== */

.hero{
  min-height:18vh;              /* 🔥 aproape fullscreen */

  display:flex;
  align-items:center;           /* centru vertical */
  justify-content:center;       /* centru orizontal */

  text-align:center;

  padding:120px 0;

  color:#fff;

  position:relative;
  overflow:hidden;

  background:
    linear-gradient(135deg,#3f2b63,#5f43a5,#c87b4d);
}

/* glow cinematic */

.hero::before{
  content:"";
  position:absolute;
  inset:-30%;

  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.12),transparent 55%),
    radial-gradient(circle at 80% 80%,rgba(255,255,255,.10),transparent 60%);

  filter:blur(90px);
  pointer-events:none;
}

/* content wrapper */

.hero .content{
  position:relative;
  z-index:2;

  max-width:860px;
  margin:auto;
}

/* titlu mare impact */

.h1{
  font-size:clamp(40px,6vw,64px);
  font-weight:800;
  letter-spacing:-.02em;

  margin-bottom:18px;
}

/* subtitlu */

.hero-sub{
  font-size:38px;
  opacity:.92;

  max-width:680px;
  margin:0 auto 36px auto;
}

/* butoane centru */

.cta-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}


/* =====================================================
   GRID (homepage)
   ===================================================== */

.grid{
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}



/* =====================================================
   CARDS
   Natural image rendering, no cropping, no forced ratio
   ===================================================== */

.card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}


/* media container */

.card-media{
  overflow:hidden;
  line-height:0; /* removes inline image baseline gap */
}


/* natural image size */

.card-media img{
  display:block;
  width:100%;
  height:auto;
}


/* big card uses same behavior */

.card.big .card-media{
  height:auto;
}


.pad{
  padding:24px;
}

.meta{
  font-size:13px;
  color:#6b7280;
}

.hr{
  height:1px;
  background:#eee;
  margin:18px 0;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  cursor:pointer;
}

.btn.primary{
  background:#4b2e83;
  color:#fff;
  padding:14px 20px;
  border-radius:14px;
}



/* =====================================================
   INPUTS
   ===================================================== */

input,
textarea,
select{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #ddd;
  margin-bottom:14px;
}



/* =====================================================
   🔥 FOOTER — PREMIUM MINIMAL CIVIC
   ===================================================== */

footer{
  margin-top:110px;

  padding:70px 0;

  background:#1f2540;
  color:#cbd5e1;

  text-align:center;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

/* links */

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}

.footer-links a{
  font-size:14px;
  opacity:.85;

  padding:6px 12px;
  border-radius:10px;

  transition:.18s;
}

.footer-links a:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
}

/* copyright */

.footer-copy{
  font-size:13px;
  opacity:.7;
}



/* =====================================================
   =====================================================
   🔥 PETITION PAGE (DOAR ADĂUGAT)
   =====================================================
   ===================================================== */

.petition-wrap{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:40px;
  align-items:start;
  margin-top:40px;
}

.petition-hero{
  max-height:420px;
  overflow:hidden;
}

.petition-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.petition-sign{
  position:sticky;
  top:110px;

  background:#fff;
  border-radius:24px;
  padding:26px;

  box-shadow:0 14px 40px rgba(0,0,0,.12);
}



/* 🔥 BUTON MEGA + PULSE */

.btn.mega{
  width:100%;
  padding:20px;
  font-size:18px;
  font-weight:700;
  border-radius:18px;
  background:#4b2e83;
  color:#fff;
  animation:pulse 2.2s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(75,46,131,.45)}
  70%{box-shadow:0 0 0 18px rgba(75,46,131,0)}
  100%{box-shadow:0 0 0 0 rgba(75,46,131,0)}
}



/* share */

.share-btn{
  display:block;
  width:100%;
  padding:18px;
  border-radius:18px;
  background:#1877f2;
  color:#fff;
  text-align:center;
  font-weight:700;
  margin-top:18px;
}



/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:980px){

  .petition-wrap{
    grid-template-columns:1fr;
  }

  .petition-sign{
    position:relative;
    top:0;
  }

}


/* =====================================================
   🔥 SUPPORT BOOK — FANCY PREMIUM CARD
   ===================================================== */

.support-card.fancy{
  margin-top:30px;

  position:relative;

  padding:22px;

  border-radius:24px;

  background:
    linear-gradient(145deg,#ffffff,#faf7ff);

  box-shadow:
    0 14px 40px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.8) inset;

  text-align:center;

  transition:.35s cubic-bezier(.2,.8,.2,1);

  animation:fadeUp .6s ease both;
}

/* hover lift */

.support-card.fancy:hover{
  transform:translateY(-6px);
  box-shadow:
    0 26px 60px rgba(75,46,131,.18);
}


/* badge */

.support-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);

  font-size:12px;
  font-weight:700;

  padding:6px 14px;

  border-radius:999px;

  background:#4b2e83;
  color:#fff;
}


/* imagine */

.support-media{
  overflow:hidden;
  border-radius:16px;
  margin-bottom:14px;
}

.support-media img{
  transition:.4s;
}

.support-card:hover .support-media img{
  transform:scale(1.05);
}


/* titlu */

.support-title{
  font-size:16px;
  font-weight:700;
  margin:6px 0 4px;
}


/* pret */

.price{
  font-size:24px;
  font-weight:800;
  margin:12px 0 16px;
  color:#4b2e83;
}


/* buton full */

.buy-btn{
  width:100%;
}


/* shine animation */

.shine{
  position:relative;
  overflow:hidden;
}

.shine::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.4),
    transparent
  );

  transform:skewX(-20deg);
}

.shine:hover::after{
  animation:shineMove .9s ease;
}

@keyframes shineMove{
  to{ left:140% }
}


/* fade in */

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