@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',sans-serif;background:linear-gradient(180deg,#05021a 0%, #0f0830 60%);color:#e6eefb;min-height:100vh}
body.dark{background:linear-gradient(180deg,var(--bg1) 0%, #e0e0e0 60%);}

.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));backdrop-filter:blur(6px);border-radius:10px;margin:12px 20px}

/* animated glowing border around navigation */
.nav::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:14px;
  pointer-events:none;
  background: conic-gradient(from 0deg, rgba(79,195,255,0.0) 0deg, rgba(79,195,255,0.8) 40deg, rgba(79,195,255,0.0) 80deg);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, black 89%);
  mask: radial-gradient(closest-side, transparent 88%, black 89%);
  animation: spin 8s linear infinite;
  z-index:0;
}

/* animated glowing separator under navigation */
.nav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:4px;
  border-radius:4px;
  background: linear-gradient(90deg, transparent 0%, rgba(79,195,255,0.0) 20%, rgba(124,58,237,0.9) 50%, rgba(79,195,255,0.0) 80%, transparent 100%);
  background-size:200% 100%;
  filter:blur(6px);
  pointer-events:none;
  animation: nav-slide 3.8s linear infinite;
  z-index:2;
}

@keyframes nav-slide{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.nav > *{position:relative;z-index:1}
.social-icons{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center}
.social-icons a{transition:transform 0.3s}
.social-icons a:hover{transform:scale(1.1)}
.brand .logo{height:56px;border-radius:10px;padding:6px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));box-shadow:0 8px 30px rgba(79,195,255,0.06);transition:transform 220ms, box-shadow 220ms}
.brand .logo:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 40px rgba(79,195,255,0.16)}

/* nav links: animated underline */
.nav-list a{position:relative;padding:6px 12px;border-radius:8px;transition:all 0.3s cubic-bezier(.2,.9,.2,1)}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:4px;background:linear-gradient(90deg,#4fc3ff,#7c3aee);transform:scaleX(0);transform-origin:left;transition:transform 300ms cubic-bezier(.2,.9,.2,1);opacity:0.95}
.nav-list a:hover::after{transform:scaleX(1)}

/* subtle hover glow for nav items */
.nav-list a:hover{color:#ffffff;text-shadow:0 6px 18px rgba(79,195,255,0.06);transform:translateY(-5px);box-shadow:0 0 15px rgba(79,195,255,0.4);background:rgba(255,255,255,0.05)}

/* hamburger animation */
.hamburger{padding:8px}
.hamburger span{transition:transform 220ms, opacity 220ms, background 220ms}
.hamburger:hover span{background:linear-gradient(90deg,#4fc3ff,#7c3aee)}
.hamburger:hover span:nth-child(1){transform:translateY(2px)}
.hamburger:hover span:nth-child(3){transform:translateY(-2px)}
.nav-list{list-style:none;display:flex;gap:18px;margin-left:auto}
.nav-list a{color:#cfe9ff;text-decoration:none;font-weight:600}
.hamburger{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:5px}
.hamburger span{width:25px;height:3px;background:var(--text);margin:3px 0;transition:0.3s}

.hero{position:relative;display:flex;align-items:center;justify-content:center;height:66vh;min-height:420px;overflow:hidden}
.starfield{position:absolute;inset:0;background-image:url('assets/background.svg');background-size:cover;background-position:center;transform:translateY(0);transition:transform 0.1s ease-out} 
.hero-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1200px;width:100%;padding:36px}
.hero-left{flex:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-logo{height:72px;margin:0;display:block}
/* place tag and CTAs on next line under logo+heading */
.hero-left .tag{flex-basis:100%;margin-top:10px}
.hero-left .hero-ctas{flex-basis:100%;margin-top:8px}
.hero-left h1{font-size:64px;margin:6px 0 10px;color:#dff4ff;text-shadow:0 10px 30px rgba(31,83,141,0.6)}
.tag{color:#d6eaff;max-width:640px}
.hero-ctas{margin-top:18px;display:flex;gap:12px}
.cta{display:inline-block;padding:12px 22px;border-radius:40px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#ffffff;text-decoration:none;font-weight:700;box-shadow:0 8px 30px rgba(79,195,255,0.12);transition:transform 0.3s, box-shadow 0.3s}
.cta:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(79,195,255,0.2)}
.cta.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#dff4ff}
.cta.primary{background:linear-gradient(90deg,var(--accent2),var(--accent));}
.hero-right{width:320px}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));padding:16px;border-radius:14px;box-shadow:0 8px 40px rgba(14,28,70,0.6)}
.hero-card h4{margin:0 0 6px;color:#e9f6ff}
.price.small{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#ffffff;padding:6px 10px;border-radius:8px;font-weight:800;margin-top:8px}

.services{padding:56px 20px;background:linear-gradient(180deg, transparent, rgba(255,255,255,0.02))}
.services h2{font-size:28px;text-align:center;margin-bottom:22px}
.cards{display:flex;gap:20px;max-width:1000px;margin:0 auto;flex-wrap:wrap;justify-content:center;padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));box-shadow:0 6px 30px rgba(4,18,48,0.35);position:relative;z-index:0;overflow:visible}
.card{background:var(--card);padding:18px;border-radius:14px;min-width:240px;flex:1 1 260px;backdrop-filter:blur(6px);box-shadow:0 4px 28px rgba(4,18,48,0.6);transition:transform 0.3s, box-shadow 0.3s, filter 0.3s}
.card:hover{transform:translateY(-10px);box-shadow:0 12px 40px rgba(79,195,255,0.4);filter:brightness(1.05)}
.card-icon{margin-bottom:12px;text-align:center;}
.card-icon img{width:120px;height:120px;object-fit:cover;border-radius:14px;display:block;margin:0 auto;box-shadow:0 8px 24px rgba(4,18,48,0.5)}
.card h3{color:#e9f6ff;margin-bottom:8px}
.card p{color:#cfe9ff;opacity:0.9}

/* pricing */
.price{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#ffffff;padding:8px 12px;border-radius:10px;font-weight:800;margin-top:8px;box-shadow:0 8px 24px rgba(79,195,255,0.08)}
.features{margin-top:12px;color:#d6eaff;list-style:disc;padding-left:18px}
.product-cta{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,0.06);color:#e6f5ff;text-decoration:none;font-weight:700;transition:transform 0.3s, box-shadow 0.3s}
.product-cta:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(79,195,255,0.3)}

.card.in{transform:translateY(0);opacity:1}
.card{transform:translateY(10px);opacity:0;transition:all 520ms cubic-bezier(.2,.9,.2,1)}

/* individual card glowing border */
.card{position:relative;z-index:1;overflow:visible}
.card::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(79,195,255,0.06), rgba(124,58,237,0.14), rgba(79,195,255,0.06));
  background-size:200% 100%;
  filter:blur(8px);
  opacity:0.9;
  z-index:0;
  animation: flow 4s linear infinite;
  -webkit-mask: radial-gradient(closest-side, transparent 82%, black 83%);
  mask: radial-gradient(closest-side, transparent 82%, black 83%);
}
.card:hover::before{filter:blur(4px);opacity:1}
.card > *{position:relative;z-index:1}

@keyframes flow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* animated wavy border around .cards */
.cards::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;
  pointer-events:none;
  background: conic-gradient(from 0deg, rgba(79,195,255,0.0) 0deg, rgba(79,195,255,0.9) 40deg, rgba(79,195,255,0.0) 80deg);
  z-index:0; /* behind content */
  -webkit-mask: radial-gradient(closest-side, transparent 84%, black 85%);
  mask: radial-gradient(closest-side, transparent 84%, black 85%);
  animation: spin 6s linear infinite;
}

.cards > .card{position:relative;z-index:1}

@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* testimonials */
.testimonials{padding:44px 20px}
.testimonial-slider{position:relative;display:flex;align-items:center;max-width:1000px;margin:0 auto;overflow:visible}
.test-list{display:flex;justify-content:space-around;gap:20px;width:100%}
.test{background:rgba(255,255,255,0.06);padding:24px;border-radius:16px;border:1px solid rgba(79,195,255,0.4);width:auto;max-width:300px;box-shadow:0 6px 30px rgba(4,18,48,0.5);color:#e8f7ff;flex-shrink:0;position:relative;z-index:1;overflow:visible}
.rating{color:#ffd700;margin-bottom:8px;font-size:1.2rem}
.test cite{display:block;margin-top:12px;color:#cfe9ff;opacity:0.85;font-size:0.95rem}
.test:nth-child(1){animation:floating1 8s ease-in-out infinite}
.test:nth-child(2){animation:floating2 10s ease-in-out infinite}
.test:nth-child(3){animation:floating3 12s ease-in-out infinite}
@keyframes floating1{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(10px,-10px) rotate(1deg)}
  50%{transform:translate(-5px,15px) rotate(-1deg)}
  75%{transform:translate(-10px,-5px) rotate(0.5deg)}
}
@keyframes floating2{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(-15px,10px) rotate(-1.5deg)}
  40%{transform:translate(20px,-20px) rotate(1deg)}
  60%{transform:translate(5px,25px) rotate(0.5deg)}
  80%{transform:translate(-10px,-15px) rotate(-0.5deg)}
}
@keyframes floating3{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  30%{transform:translate(15px,20px) rotate(2deg)}
  60%{transform:translate(-20px,-10px) rotate(-2deg)}
  90%{transform:translate(10px,15px) rotate(1deg)}
}
.rating{color:#ffd700;margin-bottom:8px;font-size:1.2rem}
.test cite{display:block;margin-top:12px;color:#cfe9ff;opacity:0.85;font-size:0.95rem}

/* vouchers: scattered flex layout with left/center/right biases */
.vouchers .voucher-grid{max-width:1400px;margin:18px auto;display:grid;grid-template-columns:repeat(5,260px);grid-auto-rows:minmax(140px,auto);gap:28px;justify-content:center}
.vouchers-list{display:block}
.voucher-item{background:rgba(255,255,255,0.06);padding:18px;border-radius:16px;border:1px solid rgba(79,195,255,0.45);width:260px;min-height:140px;box-shadow:0 8px 36px rgba(4,18,48,0.55);color:#e8f7ff;flex-shrink:0;position:relative;overflow:visible;will-change:transform;transition:transform 300ms}
.voucher-item .rating{color:#ffd700;margin-bottom:8px;font-size:1.1rem}
.voucher-item cite{display:block;margin-top:12px;color:#cfe9ff;opacity:0.85;font-size:0.95rem}

/* Bias classes: left, center, right — different horizontal/vertical ranges to keep items visually scattered */
.voucher-item.left{animation:left-float 9s ease-in-out infinite}
.voucher-item.right{animation:right-float 9s ease-in-out infinite}
.voucher-item.center{animation:center-float 8.2s ease-in-out infinite}

/* Stagger delays by position to reduce simultaneous overlap */
.voucher-item:nth-child(3n+1){animation-delay:0s}
.voucher-item:nth-child(3n+2){animation-delay:0.9s}
.voucher-item:nth-child(3n+3){animation-delay:1.8s}

@keyframes left-float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  18%{transform:translate(-22px,-10px) rotate(-0.8deg)}
  45%{transform:translate(-12px,18px) rotate(0.9deg)}
  75%{transform:translate(-18px,8px) rotate(-0.4deg)}
}
@keyframes right-float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  18%{transform:translate(22px,-10px) rotate(0.8deg)}
  45%{transform:translate(12px,18px) rotate(-0.9deg)}
  75%{transform:translate(18px,8px) rotate(0.4deg)}
}
@keyframes center-float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(0,-18px) rotate(0.6deg)}
  50%{transform:translate(0,16px) rotate(-0.6deg)}
  80%{transform:translate(0,-10px) rotate(0.3deg)}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .voucher-item{animation:none;transform:none}
}

@media (max-width:1280px){
  .vouchers .voucher-grid{grid-template-columns:repeat(4,250px)}
}
@media (max-width:980px){
  .vouchers .voucher-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .vouchers .voucher-grid{grid-template-columns:repeat(2,1fr)}
}

/* modal */
.modal{position:fixed;inset:0;background:rgba(1,6,20,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:all 300ms ease;z-index:100}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal-panel{background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));padding:24px;border-radius:16px;border:1px solid rgba(79,195,255,0.4);min-width:320px;max-width:520px;color:#eaf6ff;box-shadow:0 20px 60px rgba(0,0,0,0.6);backdrop-filter:blur(12px);transform:scale(0.95);transition:transform 300ms ease;position:relative;z-index:1}
.modal[aria-hidden="false"] .modal-panel{transform:scale(1)}
.modal-close{position:absolute;right:18px;top:18px;background:transparent;border:0;font-size:20px;color:#eaf6ff}
.modal label{display:block;margin-top:10px}
.modal input,.modal textarea{width:100%;padding:8px;margin-top:6px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#eaf6ff}
.small{font-size:0.85rem}

@media(max-width:900px){.hero-inner{flex-direction:column;align-items:flex-start}.hero-right{width:100%}}

.about,.contact,.faq{padding:36px 20px;max-width:900px;margin:0 auto;text-align:center}
.about h2{font-size:28px;margin-bottom:28px}
.about-content{text-align:left;line-height:1.8}
.about-content p{margin-bottom:16px;color:#cfe9ff;font-size:0.98rem}
.faq-list{max-width:600px;margin:0 auto;text-align:left}
.faq-item{margin-bottom:16px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:16px;background:rgba(255,255,255,0.04)}
.faq-item summary{cursor:pointer;font-weight:600;color:#e9f6ff}
.faq-item p{margin-top:8px;color:#cfe9ff}
.site-footer{padding:18px;text-align:center;color:#a8c6ff;opacity:0.8}

.cart-btn{background:none;border:1px solid rgba(255,255,255,0.1);color:#cfe9ff;padding:8px 12px;border-radius:8px;cursor:pointer;transition:0.3s;margin-left:10px}
.cart-btn:hover{background:rgba(255,255,255,0.1)}

.product-details{max-width:600px}
.product-options{margin:20px 0}
.product-guarantee{display:flex;align-items:center;gap:8px;margin:16px 0;color:#d6eaff;font-size:0.9rem;opacity:0.9}
.product-options label{display:flex;align-items:center;gap:8px;color:#eaf6ff}
.product-options input[type="number"]{width:60px;padding:6px;border-radius:6px;border:1px solid rgba(79,195,255,0.3);background:rgba(255,255,255,0.05);color:#eaf6ff;text-align:center}
.product-options input[type="number"]::-webkit-outer-spin-button,
.product-options input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.product-options input[type="number"]::-webkit-outer-spin-button{background:#4fc3ff;border-radius:0 0 6px 6px}
.product-options input[type="number"]::-webkit-inner-spin-button{background:#4fc3ff;border-radius:0}
.product-cta{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;padding:10px 16px;border-radius:10px;background:rgba(255,255,255,0.06);color:#e6f5ff;text-decoration:none;font-weight:700;transition:transform 0.3s, box-shadow 0.3s, background 0.3s}
.product-cta:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(79,195,255,0.3);background:rgba(255,255,255,0.1)}
@media(max-width:720px){
  .hero-content h1{font-size:44px}
  .nav-list{display:none;position:absolute;top:100%;left:0;width:100%;background:#05021a;flex-direction:column;padding:20px 0;text-align:center;z-index:11}
  .nav-list.open{display:flex}
  .hamburger{display:flex}
  .brand .logo{height:46px}
}

.star{position:absolute;color:#4fc3ff;font-size:12px;opacity:0;animation:twinkle 4s infinite ease-in-out;z-index:0;pointer-events:none}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1)}}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4fc3ff, #7c3aee);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7c3aee, #4fc3ff);
}

/* Custom cursor */
body {
  cursor: default;
}