/* ==========================================================
   DzipHomefix – index.css
   Simple, responsive “coming soon” splash
   ========================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --color-primary:#0a7a38;      /* deep Dzip green */
  --color-highlight:#ffcf00;    /* warm gold for accents */
  --color-accent:#d72638;       /* red accent (matches logo bar) */
  --color-bg:#f8f9fa;           /* light neutral background */
  --color-text:#212529;

  --ff-base:'Roboto',sans-serif;
  --ff-heading:'Poppins',sans-serif;
}

/* ---------- 2. RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--ff-base);
  color:var(--color-text);
  background:var(--color-bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background .3s,color .3s;
  line-height:1.6;
}

/* ---------- 3. PRELOADER ---------- */
#preloader{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-bg);
  z-index:9999;
  transition:opacity .6s,visibility .6s;
}
#preloader.loaded{opacity:0;visibility:hidden}
.spinner{
  width:60px;height:60px;
  border:6px solid rgba(0,0,0,.1);
  border-top-color:var(--color-primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 4. HEADER ---------- */
.site-header{
  padding:1.5rem 1rem;
  text-align:center;
}
.logo{
  width:210px;
  max-width:85%;
  height:auto;
}

/* ---------- 5. MAIN HERO ---------- */
.coming-soon{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem 3rem;
}

.headline{
  font-family:var(--ff-heading);
  font-weight:700;
  font-size:clamp(2.25rem,5.5vw,3.5rem);
  color:var(--color-primary);
  margin-bottom:.4rem;
}
.tagline{
  font-size:1.15rem;
  margin-bottom:1.8rem;
}

/* ---------- 6. FEATURE LIST ---------- */
.features{
  list-style:none;
  max-width:680px;
  width:100%;
  text-align:left;
  margin-bottom:2rem;
}
.features li{
  display:flex;align-items:flex-start;
  gap:.5rem;
  margin-bottom:.8rem;
}
.features li::before{
  content:"✔";
  color:var(--color-highlight);
  flex:none;
  font-weight:700;
}

/* ---------- 7. NOTIFY‑ME FORM ---------- */
.notify-form{
  width:100%;
  max-width:460px;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:2rem;
}
.notify-form input{
  flex:1 1 220px;
  padding:.75rem 1rem;
  border:2px solid var(--color-primary);
  border-radius:4px;
  font-size:1rem;
  outline:none;
}
.notify-form button{
  padding:.75rem 1.4rem;
  background:var(--color-primary);
  color:#fff;
  border:none;
  border-radius:4px;
  font-weight:600;
  cursor:pointer;
  transition:background .3s,transform .2s;
}
.notify-form button:hover{background:var(--color-highlight)}
.notify-form button:active{transform:scale(.97)}

/* ---------- 8. SOCIAL LINKS ---------- */
.social-links{
  display:flex;
  gap:1.2rem;
  margin-bottom:1.6rem;
}
.social-links a{
  font-size:1.3rem;
  color:var(--color-primary);
  transition:color .3s,transform .2s;
}
.social-links a:hover{
  color:var(--color-accent);
  transform:translateY(-3px);
}

/* ---------- 9. FOOTER ---------- */
.site-footer{
  background:var(--color-primary);
  color:#fff;
  text-align:center;
  padding:.9rem 1rem;
  font-size:.9rem;
}

/* ---------- 10. RESPONSIVE TWEAKS ---------- */
@media(max-width:480px){
  .features{text-align:left}
  .notify-form{flex-direction:column}
  .notify-form button{width:100%}
}