/* ===== Purivo — Design System ===== */
:root{
  --navy: #0F3D5C;
  --navy-deep: #0A2A40;
  --navy-light: #1B5578;
  --cyan: #1E9BA8;
  --cyan-pale: #E4F3F4;
  --bg: #F7F9FA;
  --bg-alt: #EFF3F5;
  --card-bg: #FFFFFF;
  --ink: #16232C;
  --ink-soft: #56707D;
  --line: #DCE6EA;
  --red: #E63946;
  --red-dark: #C22633;
  --green: #25D366;
  --green-dark: #1EB558;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px -22px rgba(15,61,92,0.35);
}

/* Culoarea vizibilă în spatele paginii când telefonul "sare" peste capătul
   conținutului la scroll (bounce) — o potrivim cu footer-ul, nu alb. */
html{background:var(--navy-deep);}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; height:100%;}
body{
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .9s ease;
}
body.loaded{opacity:1;}
body.no-transition{transition:none !important;}
body.menu-open{overflow:hidden;}
h1,h2,h3,.display{font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
section{position:relative;}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,249,250,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:16px;}
.logo img{height:34px; width:auto;}
.nav-links{display:flex; gap:30px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
.nav-links a:hover{color:var(--navy);}
.nav-cta{display:flex; gap:10px; flex-shrink:0;}
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; color:var(--navy); flex-shrink:0;
}
.nav-toggle svg{width:18px; height:18px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.open .icon-menu{display:none;}
.nav-toggle.open .icon-close{display:block;}
.mobile-menu{
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 16px 24px -18px rgba(15,61,92,0.25);
  padding:6px 24px 12px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  padding:13px 2px; font-size:15px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{border-bottom:none;}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:480px){
  .logo img{height:26px;}
  .nav{gap:10px;}
  .nav-cta{gap:8px;}
  .nav-cta .btn{padding:0; width:38px; height:38px;}
  .nav-cta .btn svg{width:16px; height:16px;}
  .nav-cta .btn-text{display:none;}
}

/* ===== Buttons ===== */
.btn{
  padding:13px 22px; border-radius:100px; font-weight:600; font-size:14.5px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; white-space:nowrap;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn svg{width:16px; height:16px; flex-shrink:0;}
.btn-call{background:var(--red); color:#fff;}
.btn-call:hover{background:var(--red-dark); transform:translateY(-1px);}
.btn-wa{background:var(--green); color:#fff;}
.btn-wa:hover{background:var(--green-dark); transform:translateY(-1px);}
.btn-outline{background:#fff; color:var(--navy); border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--navy);}
.btn-ghost-white{background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.35);}
.btn-ghost-white:hover{background:rgba(255,255,255,0.2);}
.btn-sm{padding:9px 14px; font-size:12.5px;}
.btn-block{width:100%; justify-content:center;}

.pulse-red{animation:pulseRed 2.2s infinite;}
.pulse-green{animation:pulseGreen 2.2s infinite;}
@keyframes pulseRed{
  0%{box-shadow:0 0 0 0 rgba(230,57,70,0.45);}
  70%{box-shadow:0 0 0 13px rgba(230,57,70,0);}
  100%{box-shadow:0 0 0 0 rgba(230,57,70,0);}
}
@keyframes pulseGreen{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.45);}
  70%{box-shadow:0 0 0 13px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:540px; display:flex; align-items:center;
  overflow:hidden; color:#fff; background:var(--navy-deep);
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center right; z-index:0;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,42,64,0.96) 0%, rgba(10,42,64,0.85) 32%, rgba(10,42,64,0.35) 52%, rgba(10,42,64,0.05) 68%, rgba(10,42,64,0) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width:min(480px, 36vw);
  padding:80px 24px 80px clamp(24px, 4vw, 60px);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,0.14); padding:6px 14px; border-radius:100px; margin-bottom:20px;
  color:#fff;
}
.eyebrow::before{content:'●'; font-size:7px; color:var(--cyan);}
.hero h1{font-size:clamp(30px,4.2vw,46px); font-weight:700; line-height:1.1; margin-bottom:18px;}
.hero p{font-size:16px; color:rgba(255,255,255,0.85); max-width:44ch; margin-bottom:28px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
/* Sub 1200px, imaginea trece în modul "cover pe înălțime" (obiectul se scalează după
   min-height, nu după lățime), care mută proporția zonei libere — de-aia comutăm la
   layout stivuit + overlay puternic, ca textul să nu ajungă niciodată peste produse. */
@media (max-width:1200px){
  .hero{min-height:520px;}
  .hero-overlay{background:linear-gradient(180deg, rgba(10,42,64,0.35) 0%, rgba(10,42,64,0.72) 55%, rgba(10,42,64,0.85) 100%);}
  .hero-inner{max-width:640px; padding:130px 24px 40px; align-self:flex-end;}
  .hero-bg{object-fit:contain; object-position:center 0%; filter:blur(2px);}
}
@media (max-width:760px){
  .hero{min-height:480px;}
  .hero-inner{padding:120px 20px 36px;}
  .hero-bg{object-fit:contain; object-position:center 0%;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%; justify-content:center;}
}

.trust{background:var(--bg); padding:18px 0; border-bottom:1px solid var(--line);}
.trust .wrap{display:flex; justify-content:center; gap:32px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); font-weight:500;}
.trust span{display:flex; align-items:center; gap:8px;}
.trust .dot{width:5px; height:5px; border-radius:50%; background:var(--cyan); flex-shrink:0;}
@media (max-width:560px){
  .trust .wrap{flex-direction:column; align-items:flex-start; gap:10px;}
}

/* ===== Section heads ===== */
.section{padding:72px 0;}
.section-alt{background:var(--bg-alt);}
.section-head{max-width:640px; margin:0 auto 42px; text-align:center;}
.section-head h2{font-size:clamp(26px,3.2vw,34px); font-weight:700; margin-bottom:12px;}
.section-head p{color:var(--ink-soft); font-size:15.5px;}

/* ===== Product grid ===== */
.grid-products{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){ .grid-products{grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .grid-products{grid-template-columns:1fr;} }

.card-wrap{display:flex; flex-direction:column;}
.card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; position:relative; flex:1;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-wrap:hover .card{transform:translateY(-4px); box-shadow:var(--shadow);}
.card-media{aspect-ratio:1/1; overflow:hidden; background:var(--bg-alt);}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.card:hover .card-media img{transform:scale(1.04);}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan);}
.card-title{font-size:15px; font-weight:600; line-height:1.3; color:var(--navy-deep);}
.card-desc{font-size:12.5px; color:var(--ink-soft); flex:1;}
.card-price{font-weight:700; font-size:17px; font-family:'Space Grotesk',sans-serif; color:var(--navy-deep); margin:4px 0 2px;}
.card-actions{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.card-actions .btn{justify-content:center; padding:9px 10px; font-size:12px;}
.card-actions .btn svg{width:13px; height:13px;}
.card-actions-row{display:flex; gap:8px;}
.card-actions-row .btn{flex:1;}

/* ===== Package cards ===== */
.grid-packages{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){ .grid-packages{grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .grid-packages{grid-template-columns:1fr;} }
.grid-packages.biz{grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){ .grid-packages.biz{grid-template-columns:1fr;} }

.show-more-wrap{text-align:center; margin-top:26px;}
.btn-show-more{
  background:none; border:1.5px solid var(--line); color:var(--navy);
  padding:11px 24px; border-radius:100px; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; transition:border-color .15s ease, transform .15s ease;
}
.btn-show-more svg{width:15px; height:15px;}
.btn-show-more:hover{border-color:var(--navy); transform:translateY(1px);}

.pkg-card{position:relative;}
.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--cyan); color:#fff; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:100px; letter-spacing:.02em;
}
.badge-neutral{background:var(--navy);}
.pkg-items-link{display:block; flex:1;}
.pkg-items{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; line-height:1.5;}
.price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:4px;}
.price-old{font-size:13px; color:var(--ink-soft); text-decoration:line-through;}
.price-new{font-weight:700; font-size:19px; font-family:'Space Grotesk',sans-serif; color:var(--navy-deep);}

/* ===== Business section ===== */
.biz-tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px; position:relative; padding-bottom:10px;
}
.biz-tag::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:40px; height:2px; background:var(--cyan);
}
.biz-cta{text-align:center; margin-top:36px;}
.biz-cta p{color:var(--ink-soft); margin-bottom:16px; font-size:14.5px;}
.biz-cta .btn-outline{background:var(--navy); color:#fff; border-color:var(--navy);}
.biz-cta .btn-outline:hover{background:var(--navy-deep);}

/* ===== Why section ===== */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:780px){ .why-grid{grid-template-columns:1fr;} }
.why-item{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px;
}
.why-icon{
  width:44px; height:44px; border-radius:12px; background:var(--cyan-pale);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.why-icon svg{width:22px; height:22px; color:var(--cyan);}
.why-item h3{font-size:16px; font-weight:600; margin-bottom:8px; color:var(--navy-deep);}
.why-item p{font-size:13.5px; color:var(--ink-soft);}

/* ===== FAQ ===== */
.faq{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; background:none; border:none; text-align:left; padding:18px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:15px; font-weight:600; color:var(--navy-deep);
}
.faq-q .plus{font-size:20px; color:var(--cyan); transition:transform .25s ease; flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a-inner{padding:0 4px 18px; font-size:14px; color:var(--ink-soft); line-height:1.6;}

/* ===== Footer ===== */
footer{background:var(--navy-deep); color:rgba(255,255,255,0.85); padding:44px 0 calc(26px + env(safe-area-inset-bottom));}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px; margin-bottom:28px;}
.footer-brand img{height:30px; margin-bottom:10px;}
.footer-brand p{font-size:13px; color:rgba(255,255,255,0.55); max-width:32ch;}
.footer-links{display:flex; gap:40px; flex-wrap:wrap;}
.footer-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.5); margin-bottom:12px;}
.footer-col a{display:block; font-size:14px; color:rgba(255,255,255,0.8); margin-bottom:8px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; font-size:12.5px; color:rgba(255,255,255,0.45); text-align:center;}
.footer-legal{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.footer-legal-logo{width:34px; height:34px; border-radius:50%; flex-shrink:0;}
.footer-legal span{font-size:12px; color:rgba(255,255,255,0.55);}
@media (max-width:600px){
  .footer-top{flex-direction:column; gap:32px;}
  .footer-links{flex-direction:column; gap:26px;}
}

/* ===== Floating WhatsApp ===== */
.fab{
  position:fixed; bottom:20px; right:20px; z-index:200;
  background:var(--green); width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -6px rgba(37,211,102,0.55);
}
.fab svg{width:26px; height:26px;}

/* ===== Product detail page ===== */
.breadcrumb{font-size:13.5px; color:var(--ink-soft); margin-bottom:24px;}
.breadcrumb a{color:var(--cyan); font-weight:600;}
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:820px){ .product-detail{grid-template-columns:1fr;} }
.pd-media{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-alt);}
.pd-media img{width:100%; display:block; transition:transform .5s ease;}
.pd-media:hover img{transform:scale(1.03);}
.pd-info{display:flex; flex-direction:column;}
.pd-info .cum-comand{margin-top:auto;}
@media (max-width:820px){ .pd-info{height:auto !important;} .pd-info .cum-comand{margin-top:26px;} }
.pd-tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan); margin-bottom:10px;}
.pd-title{font-size:clamp(24px,3vw,32px); font-weight:700; color:var(--navy-deep); margin-bottom:12px;}
.pd-price{font-size:26px; font-weight:700; font-family:'Space Grotesk',sans-serif; color:var(--navy-deep); margin-bottom:18px;}
.pd-desc{font-size:15px; color:var(--ink-soft); margin-bottom:26px; line-height:1.7;}
.pd-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
.pd-back{margin-top:18px; display:inline-block; font-size:13.5px; color:var(--cyan); font-weight:600;}

.related-title{font-size:20px; font-weight:700; color:var(--navy-deep); margin:64px 0 20px;}

/* ===== Checks (bife) ===== */
.checks{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-bottom:22px;}
@media (max-width:480px){ .checks{grid-template-columns:1fr;} }
.checks li{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft);}
.checks li svg{width:16px; height:16px; color:var(--cyan); flex-shrink:0;}

/* ===== Cum comand? ===== */
.pd-lower{max-width:820px; margin:56px 0 0;}
.pd-lower h2{font-size:20px; font-weight:700; color:var(--navy-deep); margin-bottom:14px;}
.pd-lower-desc{font-size:14.5px; color:var(--ink-soft); line-height:1.75;}
.cum-comand{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; margin-top:26px;
}
.cum-comand h3{font-size:16px; font-weight:700; color:var(--navy-deep); margin-bottom:16px;}
.cum-comand ol{list-style:none; display:flex; flex-direction:column; gap:14px;}
.cum-comand li{display:flex; align-items:flex-start; gap:12px; font-size:13.5px; color:var(--ink-soft);}
.cc-num{
  width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  flex-shrink:0; font-family:'Space Grotesk',sans-serif;
}