@charset "utf-8";
/* CSS Document */
/* ================= RESET ================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
  background:#0b1220;
  color:#e5e7eb;
}

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

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

ul{
  margin:0;
  padding:0;
  list-style:none;
}

h1,h2,h3,p{
  margin:0;
}

html,body{
  overflow-x:hidden;
}

/* ================= VARIABILE ================= */
:root{
  --bg:#0b1220;
  --bg-soft:#111827;
  --card:#162033;
  --card-2:#1b263b;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --line:rgba(255,255,255,0.08);
  --white:#ffffff;
  --accent:#38bdf8;
  --accent-dark:#0ea5e9;
  --accent-soft:rgba(56,189,248,0.14);
  --radius:20px;
  --shadow:0 18px 50px rgba(0,0,0,0.35);
}

/* ================= UTILITARE ================= */
.container{
  width:min(1200px, calc(100% - 32px));
  margin:0 auto;
}
.logo{
	 font-size:1rem;
  font-weight:700;
	 color:#fff;
}
.logo span{
	color:var(--accent);
}
.section{
  padding:64px 0;
}
.section-subtitle{
  display:inline-block;
  margin-bottom:12px;
  font-size:0.9rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.section-title{
  margin-bottom:16px;
  font-size:2rem;
  line-height:1.2;
  color:var(--white);
}
.section-heading{
  max-width:760px;
  margin:0 auto 36px;
  text-align:center;
}
.section-heading p{
  color:var(--muted);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  transition:0.25s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--accent);
  color:#06121d;
}

.btn-primary:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
}
.btn-secondary{
  border-color:rgba(255,255,255,0.18);
  background:transparent;
  color:var(--white);
}
.btn-secondary:hover{
  background:rgba(255,255,255,0.06);
  transform:translateY(-2px);
}

/* ================= HEADER ================= */
.nav{ position: relative; }
/* butoane */
.hamburger,
.close-btn{
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}
.hamburger{
  color: var(--accent);
  display: block;
}
/* close ascuns implicit */
.close-btn{
  display: none;
  position: fixed;
  top: 18px;
  right: 18px;
  color: #fff;
  z-index: 2100;
}
/* meniu overlay */
.nav-menu{
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--bg), #071527);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;

  transform: translateY(-100%);
  transition: transform .35s ease;

  z-index: 2000;
  padding: 90px 18px 40px;
  min-height: 100vh;
}
.nav-menu a{
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-radius: 12px;
}
.nav-menu a.active{
  color: #fff;
  background: var(--accent);
}
.nav-cta{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
}




/* stare deschis */
.nav.is-open .nav-menu{ transform: translateY(0); }
.nav.is-open .hamburger{ display: none; }
.nav.is-open .close-btn{ display: block; }

/* ================= HERO ================= */
.hero{
  padding:72px 0 64px;
  background:
    linear-gradient(rgba(11,18,32,0.80), rgba(11,18,32,0.92)),
    url("../images/hero.jpg") center/cover no-repeat;
}
.hero-grid{
  display:grid;
  gap:28px;
}
.hero-content h1{
  margin-bottom:18px;
  font-size:2.3rem;
  line-height:1.15;
  color:var(--white);
}
.hero-content p{
  max-width:620px;
  color:#cbd5e1;
}
.hero-actions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.hero-card{
  padding:24px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
}
.hero-card h2{
  margin-bottom:16px;
  font-size:1.3rem;
  color:var(--white);
}
.hero-list{
  display:grid;
  gap:12px;
}
.hero-list li{
  position:relative;
  padding-left:24px;
  color:#dbe4ee;
}
.hero-list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:700;
}

/* ================= CARDURI ================= */
.cards-grid{
  display:grid;
  gap:20px;
}
.card{
	 position:relative;
  padding:24px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.card::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%
  );
  transition:left 0.7s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(56,189,248,0.35);
}
.card:hover::before{
  left:130%;
}
.card-icon{
  width:56px;
  height:56px;
  margin-bottom:18px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  background:var(--accent-soft);
}
.card:hover .card-icon{
  transform: scale(1.15);
  box-shadow: 0 0 18px rgba(56,189,248,0.4);
}
.card h3{
  margin-bottom:12px;
  font-size:1.2rem;
  color:var(--white);
}
.card p{
  color:var(--muted);
}
.featured-card{
  border-color:rgba(56,189,248,0.45);
  background:linear-gradient(180deg, rgba(56,189,248,0.14), rgba(22,32,51,1));
}

/* ================= BENEFITS ================= */
.benefits{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.benefits-grid{
  display:grid;
  gap:24px;
}
.benefits-content p{
  margin-bottom:20px;
  color:var(--muted);
}
.check-list{
  display:grid;
  gap:12px;
}
.check-list li{
  position:relative;
  padding-left:28px;
  color:#dbe4ee;
}
.check-list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:700;
}
.benefit-box{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.benefit-box h3{
  margin-bottom:12px;
  color:var(--white);
}
.benefit-box p{
  color:var(--muted);
}

/* ================= ABOUT PREVIEW ================= */
.about-grid{
  display:grid;
  gap:24px;
}
.about-content p{
  margin-bottom:22px;
  color:var(--muted);
}
.about-box{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.about-box h3{
  margin-bottom:16px;
  color:var(--white);
}

/* ================= CTA ================= */
.cta-section{
  padding-top:16px;
}
.cta-box{
  padding:32px 24px;
  text-align:center;
  border-radius:28px;
  background:
    linear-gradient(rgba(56,189,248,0.12), rgba(56,189,248,0.05)),
    linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(56,189,248,0.24);
  box-shadow:var(--shadow);
}
.cta-box h2{
  margin-bottom:14px;
  font-size:2rem;
  line-height:1.2;
  color:var(--white);
}
.cta-box p{
  max-width:700px;
  margin:0 auto 22px;
  color:var(--muted);
}

/* ================= FOOTER ================= */
.site-footer{
  margin-top:64px;
  border-top:1px solid var(--line);
  background:#09101c;
}
.footer-inner{
  padding:24px 0;
  text-align:center;
}
.footer-inner p{
  color:var(--muted);
  font-size:0.95rem;
}

/*---servicii.html---*/
.page-hero{
  padding:72px 0 64px;
  background:
    linear-gradient(rgba(11,18,32,0.82), rgba(11,18,32,0.92)),
    url("../images/page-hero.jpg") center/cover no-repeat;
  color:#fff;
}
.page-hero h1{
  max-width:760px;
  margin-bottom:18px;
  font-size:2.2rem;
  line-height:1.15;
}
.page-hero p{
  max-width:700px;
  color:#cbd5e1;
}

/*---despre.html---*/
.about-story-grid{
  display:grid;
  gap:24px;
}
.why-detailing{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

/*---contact.php---*/
.contact-grid{
  display:grid;
  gap:24px;
}
.contact-info p{
  color:var(--muted);
}
.contact-card{
  margin-top:16px;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.contact-card h3{
  margin-bottom:8px;
  color:var(--white);
  font-size:1.05rem;
}
.contact-form-wrap{
  padding:24px;
  border-radius:24px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.contact-form{
  display:grid;
  gap:18px;
}
.form-group{
  display:grid;
  gap:8px;
}
.form-group label{
  font-weight:700;
  color:var(--white);
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  color:var(--white);
  font:inherit;
  outline:none;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:rgba(56,189,248,0.55);
  box-shadow:0 0 0 3px rgba(56,189,248,0.12);
}
.form-group textarea{
  resize:vertical;
  min-height:140px;
}









/* ================= TABLETA ================= */
@media (min-width:768px){
	/* meniu desktop */
  .hamburger,
  .close-btn{ display: none !important; }
.nav-menu{
    position: static;
    inset: auto;
    background: transparent;
    transform: none;
    transition: none;

    min-height: auto;
    padding: 0;

    flex-direction: row;
    gap: 18px;
    justify-content: flex-end;
    align-items: center;
  }
	.nav-menu a{
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    padding: 8px 10px;
    border-radius: 10px;
    position: relative;
  }
	.nav-menu a.active{
    color: #fff;
    background: var(--accent);
  }
	
	
 .section-title{
    font-size:2.3rem;
  }
	.hero{
    padding:96px 0 84px;
  }
.hero-content h1{
    font-size:3.2rem;
  }
	 .cards-grid{
    grid-template-columns:repeat(2, 1fr);
  }
.benefits-grid,
  .about-grid{
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
	
	/*---servicii.html---*/
.page-hero{
    padding:96px 0 80px;
  }
.page-hero h1{
    font-size:3rem;
  }
	
/*---despre.html---*/	
.about-story-grid{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
	
	/*---contact.php---*/
	 .contact-grid{
    grid-template-columns:0.95fr 1.05fr;
    align-items:start;
  }
	
	
	
}











/* ================= DESKTOP ================= */
@media (min-width:1024px){
	.hero-content h1{
    font-size:3.6rem;
  }
 .section-title{
    font-size:2.5rem;
  }
.cards-grid{
    grid-template-columns:repeat(3, 1fr);
  }
.hero-grid{
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
	
	/*---servicii.html---*/
.page-hero{
    padding:120px 0 96px;
  }
	
	
}






.honeypot{
  position:absolute;
  left:-9999px;
}

.form-success{
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(34,197,94,0.16);
  border:1px solid rgba(34,197,94,0.35);
  color:#bbf7d0;
  font-weight:700;
}

.error-message{
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(239,68,68,0.14);
  border:1px solid rgba(239,68,68,0.35);
  color:#fecaca;
  font-weight:700;
}