/*
Theme Name: RepairME Coming Soon
Theme URI: https://repairme.in
Author: RepairME
Author URI: https://repairme.in
Description: Premium black Coming Soon WordPress theme for RepairME with countdown, live effects, WhatsApp button and email notify form.
Version: 1.0
License: GPLv2 or later
Text Domain: repairme-coming-soon
*/

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  background:#000;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
.bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,0,0,.30),transparent 28%),
    radial-gradient(circle at 80% 75%,rgba(255,255,255,.10),transparent 25%),
    #000;
}
.particles span{
  position:absolute;
  width:4px;height:4px;
  background:#ff1717;
  border-radius:50%;
  box-shadow:0 0 18px #ff1717;
  animation:float 8s linear infinite;
}
.particles span:nth-child(1){left:10%;animation-delay:0s}
.particles span:nth-child(2){left:25%;animation-delay:2s}
.particles span:nth-child(3){left:40%;animation-delay:4s}
.particles span:nth-child(4){left:65%;animation-delay:1s}
.particles span:nth-child(5){left:82%;animation-delay:3s}
.wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  position:relative;
  z-index:2;
}
.card{
  max-width:1050px;
  width:100%;
  padding:55px 25px;
  border-radius:35px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);
  box-shadow:0 0 80px rgba(255,0,0,.18);
  animation:fadeUp 1s ease;
}
.logo{
  font-size:clamp(58px,10vw,120px);
  font-weight:900;
  letter-spacing:-4px;
  animation:glow 2.5s ease-in-out infinite alternate;
}
.logo .repair{color:#fff}
.logo .me{
  background:#ff0808;
  color:#fff;
  padding:0 20px 8px;
  border-radius:18px;
  margin-left:10px;
  box-shadow:0 0 40px rgba(255,0,0,.9);
}
h1{
  margin:30px 0 10px;
  font-size:clamp(28px,5vw,54px);
  letter-spacing:12px;
  font-weight:300;
}
.subtitle{
  color:#cfcfcf;
  font-size:20px;
  margin-bottom:35px;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  max-width:780px;
  margin:0 auto 32px;
}
.box{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  padding:22px 10px;
  border-radius:22px;
  box-shadow:inset 0 0 20px rgba(255,255,255,.03),0 0 28px rgba(255,0,0,.18);
  transition:.3s;
}
.box:hover{transform:translateY(-6px);box-shadow:0 0 40px rgba(255,0,0,.35)}
.num{
  font-size:clamp(42px,7vw,72px);
  color:#ff2626;
  font-weight:900;
  text-shadow:0 0 25px rgba(255,0,0,.85);
}
small{color:#ddd;font-size:15px}
.actions{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  color:white;
  padding:15px 26px;
  border-radius:15px;
  text-decoration:none;
  font-weight:800;
  transition:.25s;
}
.whatsapp{background:#25D366;box-shadow:0 0 30px rgba(37,211,102,.35)}
.notify{background:#ff0808;box-shadow:0 0 30px rgba(255,0,0,.35);border:0;cursor:pointer}
.btn:hover,.notify:hover{transform:translateY(-4px) scale(1.03)}
.email-form{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.email-form input{
  width:min(360px,100%);
  padding:15px 18px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
}
.email-form input::placeholder{color:#aaa}
.features{
  margin-top:42px;
  color:#e8e8e8;
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  font-size:18px;
}
.features span{color:#ff2020;text-shadow:0 0 18px #ff2020}
.footer-note{margin-top:28px;color:#888;font-size:14px}
@keyframes float{
  from{bottom:-10px;opacity:0;transform:translateX(0)}
  20%{opacity:1}
  to{bottom:110%;opacity:0;transform:translateX(80px)}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow{from{text-shadow:0 0 18px rgba(255,255,255,.18)}to{text-shadow:0 0 45px rgba(255,255,255,.48)}}
@media(max-width:700px){
  .countdown{grid-template-columns:repeat(2,1fr)}
  h1{letter-spacing:7px}
  .card{padding:38px 18px}
  .features{font-size:16px}
}