:root{
  --accent:#00e5ff;
  --secondary:#ff6b9d;
  --gold:#ffd700;
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(0,229,255,.3)}50%{box-shadow:0 0 40px rgba(0,229,255,.6),0 0 60px rgba(255,107,157,.4)}}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}


*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}
body{background:linear-gradient(135deg,#050814,#0b0f1a,#1a0f2e);background-size:200% 200%;animation:gradient 15s ease infinite;color:#fff;overflow-x:hidden;}

.glass{background:rgba(255,255,255,.12);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);position:relative;overflow:hidden;}
.glass::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:.8s;}
.glass:hover::before{left:100%}


nav{position:fixed;top:0;width:100%;padding:15px 40px;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;z-index:999;border-bottom:1px solid rgba(255,255,255,.1);}

nav h2{background:linear-gradient(90deg,var(--accent),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.5rem;}
/* Footer brand: uppercase and match navbar gradient color (with solid-color fallback) */
.site-footer .brand h4 {
  text-transform: uppercase;                   /* make it ALL CAPS */
  color: var(--accent);                        /* accessible fallback if gradient not supported */

  /* match the nav gradient clipped into text */
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;       /* shows the clipped gradient */
  background-clip: text;

  /* keep original sizing/weight/spacing unchanged */
  font-weight: 700;
  font-size: 1.06rem;                          /* keep same size as existing rule */
  margin: 0;
}


nav ul{display:flex;gap:25px;}
nav ul li{list-style:none;}
nav ul li a{color:#fff;text-decoration:none;font-weight:500;transition:.3s;position:relative;}
nav ul li a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--secondary));transition:.3s;}
nav ul li a:hover::after{width:100%}
.menu-btn{display:none;font-size:28px;cursor:pointer;}
@media(max-width:900px){nav ul{position:fixed;top:70px;right:-100%;width:250px;height:100vh;background:#000;flex-direction:column;padding:40px;transition:.4s;}nav ul.show{right:0}.menu-btn{display:block}}


.hero{height:100vh;display:flex;overflow:hidden;position:relative;}
.slide{min-width:100%;height:100%;background-size:cover;background-position:center;transition:1.2s ease;}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.65);z-index:1;}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;}
.hero h1{font-size:3.5rem;background:linear-gradient(90deg,var(--accent),var(--secondary),var(--accent));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient 3s ease infinite;}
.hero p{margin:15px 0;font-size:1.2rem;color:#cbd6e6}
.hero button{padding:16px 40px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--accent),var(--secondary));background-size:200% 200%;color:#000;font-weight:bold;font-size:1.05rem;cursor:pointer;box-shadow:0 20px 50px rgba(0,229,255,.5);animation:glow 2s ease-in-out infinite;transition:.3s;}
.hero button:hover{transform:scale(1.08);box-shadow:0 25px 60px rgba(0,229,255,.7);}


.hero-sub {
  display: inline-block;
  color: #d7e7f4;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.6;
  font-size: 1.08rem;
  padding: 10px 18px;
  border-radius: 12px;
  position: relative;
  background: linear-gradient(90deg, rgba(0,229,255,0.04), rgba(255,107,157,0.03));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px rgba(0,229,255,0.03);
  margin-top: 12px;
  max-width: 880px;
  text-align: center;
}
/* hero-highlight: match the hero H1 gradient text style */
.hero-highlight {
  display: inline-block;
  font-weight: 800;
  font-size: 1.28rem; /* slightly larger than body text so it stands out */
  line-height: 1.15;
  padding: 0 6px; /* small breathing room so it doesn't break layout */
  border-radius: 8px;
  /* same gradient & clip technique as .hero h1 */
  background: linear-gradient(90deg, var(--accent), var(--secondary), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* subtle glow to make it pop on the dark hero */
  text-shadow: 0 6px 22px rgba(0,229,255,0.08);
  transition: transform .2s ease, text-shadow .2s ease;
}

/* micro-interaction on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .hero-highlight:hover {
    transform: translateY(-3px) scale(1.02);
    text-shadow: 0 12px 30px rgba(0,229,255,0.12);
  }
}

/* keep it readable on small screens */
@media (max-width:420px) {
  .hero-highlight { font-size: 1.05rem; padding: 0 4px; }
}



section{padding:110px 8%;opacity:0;transform:translateY(60px);transition:1s ease;}
section.show{opacity:1;transform:translateY(0)}
h2{text-align:center;font-size:2.6rem;background:linear-gradient(90deg,var(--accent),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:50px;}


.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;}
.card{padding:30px;border-radius:20px;text-align:center;transition:.4s;cursor:pointer;font-size:1.1rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:250px;}
.card:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 30px 60px rgba(0,229,255,.35),0 0 40px rgba(255,107,157,.2);border-color:var(--accent);}
.card-icon{font-size:3rem;margin-bottom:5px;display:block;}
.card .card-title{font-weight:700;font-size:1.05rem;}
.card .card-desc{color:#cbd6e6;font-size:.95rem;line-height:1.45;margin-top:6px;}
.card .read-more{padding:8px 14px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--accent),var(--secondary));color:#021;font-weight:700;cursor:pointer;transition:transform .18s,box-shadow .18s;margin-top:auto;}
.card .read-more:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,229,255,.18);}

.btn-readmore{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--secondary));
  color:#021;
  margin-top:auto;
  transition:transform .18s,box-shadow .18s,opacity .12s;
}
.btn-readmore:hover{ opacity:0.95; transform: translateY(-4px); box-shadow:0 14px 34px rgba(0,229,255,.18); }

.btn-readmore:focus, .read-more:focus { outline:3px solid rgba(0,229,255,.18); outline-offset:3px; }

@media (max-width:420px){
  .card{padding:22px;min-height:230px;}
  .hero h1{font-size:2rem;}
}


.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-top:60px;}
.stat-box{text-align:center;padding:30px;}
.stat-number{font-size:3rem;font-weight:bold;background:linear-gradient(90deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-label{color:#cbd6e6;margin-top:10px;}


.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;}
.feature-box{padding:35px;text-align:center;}
.feature-box h3{color:var(--accent);margin:15px 0;font-size:1.3rem;}


.testimonials{padding:60px 0;}
.testimonial-slider{max-width:800px;margin:auto;overflow:hidden;position:relative;}
.testimonial{padding:40px;text-align:center;display:none;}
.testimonial.active{display:block;animation:fadeIn .6s;}
.testimonial p{font-size:1.1rem;font-style:italic;margin-bottom:20px;}
.testimonial-author{color:var(--accent);font-weight:bold;}
.testimonial-nav{text-align:center;margin-top:20px;}
.testimonial-nav button{background:rgba(255,255,255,.2);border:none;width:12px;height:12px;border-radius:50%;margin:0 5px;cursor:pointer;transition:.3s;}
.testimonial-nav button.active{background:var(--accent);width:30px;border-radius:10px;}


.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.gallery img{width:100%;border-radius:15px;cursor:pointer;transition:.4s;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.gallery img:hover{transform:scale(1.08);box-shadow:0 20px 50px rgba(0,229,255,.4);}


.contact-form{max-width:600px;margin:auto}
.contact-form input,.contact-form textarea{width:100%;padding:15px;margin-bottom:15px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;transition:.3s;}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 20px rgba(0,229,255,.3);}
.contact-form button{width:100%;padding:15px;border:none;border-radius:30px;background:linear-gradient(135deg,var(--accent),var(--secondary));font-weight:bold;cursor:pointer;transition:.3s;}
.contact-form button:hover{transform:scale(1.02);box-shadow:0 15px 40px rgba(0,229,255,.5);}


.float{position:fixed;right:20px;z-index:999;transition:.3s}
.whatsapp{bottom:90px;background:#25D366}
.call{bottom:20px;background:var(--accent)}
.float a{display:block;padding:15px 18px;color:#000;border-radius:50%;font-size:22px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.float:hover{transform:scale(1.1)}


.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s;}
.modal{width:90%;max-width:500px;padding:35px;border-radius:20px;background:rgba(20,25,40,.98);border:1px solid rgba(255,255,255,.15);box-shadow:0 30px 70px rgba(0,0,0,.7);animation:slideUp .4s;position:relative;}
.modal-close{position:absolute;top:15px;right:20px;font-size:28px;cursor:pointer;color:#fff;transition:.3s;}
.modal-close:hover{color:var(--accent);transform:rotate(90deg);}
.modal h3{margin-bottom:20px;font-size:2rem;background:linear-gradient(90deg,var(--accent),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.modal input,.modal textarea,.modal select{width:100%;padding:12px;margin-bottom:12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;transition:.3s;}
.modal input:focus,.modal textarea:focus,.modal select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 15px rgba(0,229,255,.3);}
.modal button{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--secondary));font-weight:bold;cursor:pointer;transition:.3s;margin-top:10px;}
.modal button:hover{transform:scale(1.05);box-shadow:0 10px 30px rgba(0,229,255,.5);}


.popup{position:fixed;bottom:30px;right:30px;width:320px;padding:20px;background:rgba(20,25,40,.98);border:1px solid rgba(255,255,255,.2);border-radius:15px;box-shadow:0 20px 50px rgba(0,0,0,.7);z-index:1500;display:none;animation:slideUp .5s;}
.popup-close{position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;color:#fff;}
.popup h4{color:var(--accent);margin-bottom:10px;}
.popup button{width:100%;padding:10px;margin-top:10px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--secondary));font-weight:bold;cursor:pointer;}


.toast{position:fixed;right:20px;bottom:20px;background:linear-gradient(135deg,var(--accent),var(--secondary));color:#000;padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:float 2s ease-in-out infinite;z-index:3000;}


.newsletter{padding:50px;text-align:center;margin:60px 0;}
.newsletter input{padding:15px;width:300px;max-width:100%;border:1px solid rgba(255,255,255,.2);border-radius:30px 0 0 30px;background:rgba(255,255,255,.1);color:#fff;border-right:none;}
.newsletter button{padding:15px 30px;border:none;border-radius:0 30px 30px 0;background:var(--accent);font-weight:bold;cursor:pointer;}


footer{background:rgba(0,0,0,.5);padding:40px 8%;text-align:center;border-top:1px solid rgba(255,255,255,.1);}
.footer-links{display:flex;justify-content:center;gap:30px;margin:20px 0;flex-wrap:wrap;}
.footer-links a{color:#fff;text-decoration:none;transition:.3s;}
.footer-links a:hover{color:var(--accent)}


.site-footer { --accent: var(--accent); --secondary: var(--secondary); --muted: #b8cfe6; font-family: 'Segoe UI', sans-serif; color: #e6f2ff; background: linear-gradient(180deg, rgba(6,8,12,0.88), rgba(6,8,12,0.94)); padding:36px 20px; box-sizing:border-box; border-top:1px solid rgba(255,255,255,0.04); }
.site-footer .inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:28px 32px; align-items:start; }
.site-footer .brand { display:flex; gap:12px; align-items:flex-start; }
.site-footer .brand img { width:64px; height:auto; border-radius:8px; object-fit:contain; background:#fff; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,0.6); }
.site-footer .brand h4 { margin:0; color:#fff; font-size:1.06rem; }
.site-footer .tag { margin-top:6px; color:var(--muted); font-size:0.95rem; line-height:1.45; }
.site-footer h4 { margin:0 0 12px 0; color:var(--accent); font-size:1.03rem; }

.site-footer nav.quick-links ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.site-footer nav.quick-links a { color:#d6e9ff; text-decoration:none; font-weight:600; transition:color .12s ease, transform .12s ease; }
.site-footer nav.quick-links a:focus, .site-footer nav.quick-links a:hover { color:var(--secondary); transform:translateX(4px); outline:none; }
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }


.site-footer .contact p { margin:6px 0; color:var(--muted); font-size:0.96rem; display:flex; gap:10px; align-items:center; }
.site-footer .contact a { color:#e6f2ff; text-decoration:none; }
.site-footer .contact a:focus, .site-footer .contact a:hover { color:var(--accent); text-decoration:underline; }


.site-footer .newsletter { grid-column:1 / -1; margin:18px 0 12px 0; display:flex; gap:10px; justify-content:center; }
.site-footer .newsletter form { display:flex; gap:8px; width:100%; max-width:780px; margin:0 auto; }
.site-footer .newsletter input[type="email"] { flex:1; padding:12px 14px; border-radius:30px 0 0 30px; border:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color:#fff; }
.site-footer .newsletter button { padding:12px 18px; border-radius:0 30px 30px 0; border:none; background:linear-gradient(135deg,var(--accent),var(--secondary)); color:#021; font-weight:700; cursor:pointer; }
.site-footer .newsletter input:focus, .site-footer .newsletter button:focus { outline:3px solid rgba(0,229,255,0.18); outline-offset:3px; }


.site-footer .social { display:flex; gap:10px; margin-top:8px; }
.site-footer .social a { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:999px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); text-decoration:none; color:#fff; transition:transform .14s ease, background .14s ease; }
.site-footer .social a:hover, .site-footer .social a:focus { transform:translateY(-4px); background:linear-gradient(135deg,var(--accent),var(--secondary)); }


.site-footer .legal { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.03); margin-top:12px; color:var(--muted); font-size:0.92rem; }
.site-footer .back-top { text-decoration:none; background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px; color:#fff; font-weight:600; cursor:pointer; transition:background .12s ease, transform .12s ease; }
.site-footer .back-top:hover, .site-footer .back-top:focus { background: rgba(255,255,255,0.02); transform:translateY(-3px); outline:none; }


@media (max-width:980px) {
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
  .site-footer .newsletter { order:99; }
}
@media (max-width:640px) {
  .site-footer .inner { grid-template-columns: 1fr; padding:22px; }
  .site-footer .legal { flex-direction:column; text-align:center; gap:8px; }
  .site-footer .brand { align-items:center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer nav.quick-links a, .site-footer .social a, .site-footer .back-top { transition: none !important; transform:none !important; }
}

.site-footer {
  position: relative;
  z-index: 1200; 
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


.site-footer .glass::before,
.site-footer .glass::after { display: none !important; opacity: 0 !important; transform: none !important; }
.site-footer * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }


.site-footer-toast { position:fixed; right:20px; bottom:20px; border-radius:12px; padding:12px 18px; font-weight:700; z-index:20000; box-shadow:0 12px 30px rgba(0,0,0,.5); }