/* ---------------- THEME SYSTEM ---------------- */
html[data-theme="dark"]{
    --bg:#000000;
    --fg:#ffffff;
}
html[data-theme="light"]{
    --bg:#ffffff;
    --fg:#111111;
}
html[data-theme="light"] .zingy-theme-toggle{
    background:#ffffff;
    border-color:#e5e5e5;
    color:#000;
}

/* ---------------- THEME BUTTON ---------------- */

.zingy-theme-toggle{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid #1f1f1f;
    background:#0c0c0c;
    color:#ffd202;
    cursor:pointer;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
}

.zingy-theme-toggle span{
    position:absolute;
    transition:.25s ease;
}

.zingy-theme-toggle .moon{
    opacity:0;
    transform:translateY(8px);
}

html[data-theme="light"] .zingy-theme-toggle .sun{
    opacity:0;
    transform:translateY(-8px);
}

html[data-theme="light"] .zingy-theme-toggle .moon{
    opacity:1;
    transform:none;
}

/* ---------------- MOBILE TOGGLE ---------------- */

.zingy-mobile-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.zingy-mobile-toggle span{
    width:24px;
    height:2px;
    background:#fff;
}

/* ---------------- MOBILE MENU ---------------- */

@media(max-width:960px){

    .zingy-mobile-toggle{display:flex;}

    .main-nav{
        position:fixed;
        inset:0;
        background:#050505;
        padding:110px 26px 40px;
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        transform:translateX(100%);
        transition:.35s cubic-bezier(.2,.8,.2,1);
        z-index:9999;
    }

    .main-nav.open{
        transform:translateX(0);
    }

    .main-nav .nav-indicator{display:none;}

    .nav-submenu{
        position:relative;
        transform:none!important;
        left:auto;
        top:auto;
        opacity:1;
        pointer-events:auto;
        margin-top:8px;
        background:#0c0c0c;
        display:none;
    }

    .has-sub.open .nav-submenu{
        display:block;
    }

}
:root{
  --yellow:#ffd202;
  --black:#000000;
}
*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,system-ui;
  background:var(--bg,#000);
  color:var(--fg,#fff);
  transition:.3s;
}

/* HERO */

.hero{
  height:70vh;
  position:relative;
  overflow:hidden;
}

.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.85));
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 90px;
}

.hero-box{
  max-width:720px;
}

.hero-box h1{
  font-size:64px;
  line-height:1.05;
  margin:0;
  font-weight:900;
}

.hero-box h1 span{
  color:var(--yellow);
}

.hero-box p{
  margin-top:20px;
  font-size:20px;
  color:#ddd;
}

.hero-actions{
  margin-top:36px;
  display:flex;
  gap:18px;
}

.btn{
  padding:16px 26px;
  border-radius:14px;
  border:none;
  font-weight:700;
  cursor:pointer;
}

.btn-primary{
  background:var(--yellow);
  color:#000;
}

.btn-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
}

/* COMMON */

section{
  padding:90px 90px;
}

.section-title{
  font-size:28px;
  font-weight:800;
  margin-bottom:28px;
}

/* DESTINATIONS */

.dest-row{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding-bottom:10px;
}

.dest{
  min-width:260px;
  height:320px;
  border-radius:26px;
  position:relative;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.dest::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.9));
}

.dest span{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  font-size:20px;
  font-weight:800;
}

/* EXPERIENCES */

.exp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.exp{
  padding:28px;
  border-radius:24px;
  background:linear-gradient(135deg,#0f0f0f,#070707);
  border:1px solid #1a1a1a;
}

.exp h4{
  margin:0 0 8px;
  font-size:18px;
  color:var(--yellow);
}

.exp p{
  margin:0;
  color:#bbb;
  font-size:14px;
}

/* FEATURED */

.featured-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:26px;
}

.big-stay{
  height:480px;
  border-radius:30px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

.small-stays{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:26px;
}

.small-stay{
  border-radius:26px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

.stay-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.9));
}

.stay-info{
  position:absolute;
  bottom:20px;
  left:20px;
}

.stay-info h4{
  margin:0 0 4px;
  font-size:22px;
}

.stay-info span{
  font-size:14px;
  color:#ddd;
}

/* WHY */

.why{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.why ul{
  margin:0;
  padding-left:18px;
  line-height:2;
  font-size:16px;
  color:#ddd;
}

/* COMMUNITY */

.community-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.community-grid img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:18px;
}

/* PARTNER */

.partner{
  border-radius:34px;
  padding:70px;
  background:
    radial-gradient(circle at top right,rgba(255,210,2,.15),transparent 40%),
    linear-gradient(135deg,#000,#0a0a0a);
  border:1px solid #1c1c1c;
  text-align:center;
}

.partner h2{
  margin:0 0 10px;
  color:var(--yellow);
  font-size:34px;
}

.partner p{
  color:#ccc;
  font-size:18px;
}
/* ============================
   DESTINATION STATUS BADGES
============================ */

.dest{
  position:relative;
}

/* badge base */

.dest-badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 12px;
  border-radius:999px;

  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;

  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.25);
}

/* live */

.dest-badge.live{
  background:rgba(255,210,2,.95);
  color:#000;
  border-color:var(--yellow);
  box-shadow:0 8px 24px rgba(255,210,2,.35);
}

/* launching soon */

.dest-badge.soon{
  background:rgba(0,0,0,.6);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}

/* subtle dim for coming soon cards */

.dest.is-soon{
  filter:saturate(.75) brightness(.85);
}

/* micro hover polish */

.dest.is-live:hover{
  transform:translateY(-2px);
}

.dest{
  transition:.25s ease;
}
/* ===============================
   SIGNATURE EXPERIENCES – CREATIVE
=============================== */

.exp-section{
  position:relative;
}

.exp-subtitle{
  margin:-14px 0 36px;
  font-size:15px;
  color:#aaa;
  max-width:520px;
}

/* denser modern grid */

.exp-grid.creative{
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

/* upgraded card */

.exp.pro{
  position:relative;
  overflow:hidden;

  padding:28px 26px 30px;
  border-radius:22px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),
    linear-gradient(135deg,#0f0f0f,#070707);

  border:1px solid rgba(255,255,255,.08);

  transition:.35s cubic-bezier(.2,.8,.2,1);
}

/* animated ambient glow */

.exp.pro::before{
  content:"";
  position:absolute;
  inset:-40% -40%;

  background:
    radial-gradient(circle at 20% 30%,
      rgba(255,210,2,.18),
      transparent 40%),
    radial-gradient(circle at 80% 70%,
      rgba(255,210,2,.12),
      transparent 40%);

  opacity:.0;
  transition:.4s ease;
  pointer-events:none;
}

/* scanning highlight */

.exp.pro::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(120deg,
      transparent 35%,
      rgba(255,210,2,.20),
      transparent 60%);

  opacity:0;
  transform:translateX(-120%);
  pointer-events:none;
}

/* badge */

.exp-badge{
  display:inline-block;
  margin-bottom:12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.6px;
  color:var(--yellow);
}

/* title polish */

.exp.pro h4{
  font-size:18px;
  margin-bottom:8px;
  transition:.3s ease;
}

/* hover effect */

.exp.pro:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(255,210,2,.45);
  box-shadow:
    0 18px 40px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,210,2,.15);
}

.exp.pro:hover::before{
  opacity:1;
}

.exp.pro:hover::after{
  opacity:.6;
  animation: expScan 1.2s ease forwards;
}

.exp.pro:hover h4{
  color:var(--yellow);
}

/* staggered entrance (subtle) */

.exp-grid.creative .exp{
  animation: expEnter .6s ease both;
}

.exp-grid.creative .exp:nth-child(2){animation-delay:.05s}
.exp-grid.creative .exp:nth-child(3){animation-delay:.1s}
.exp-grid.creative .exp:nth-child(4){animation-delay:.15s}
.exp-grid.creative .exp:nth-child(5){animation-delay:.2s}
.exp-grid.creative .exp:nth-child(6){animation-delay:.25s}
.exp-grid.creative .exp:nth-child(7){animation-delay:.3s}
.exp-grid.creative .exp:nth-child(8){animation-delay:.35s}

/* animations */

@keyframes expScan{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

@keyframes expEnter{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* responsive */

@media(max-width:1100px){
  .exp-grid.creative{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .exp-grid.creative{
    grid-template-columns:1fr;
  }
}

/* ---------- 4 live cards layout ---------- */

.exp-live-only{
  grid-template-columns:repeat(4,1fr);
}

/* icon container */

.exp-icon-card{
  padding-top:56px; /* space for icon */
}

.exp-ico{
  position:absolute;
  top:18px;
  right:18px;

  width:34px;
  height:34px;
  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,210,2,.12);
  border:1px solid rgba(255,210,2,.35);
}

/* icon svg */

.exp-ico svg{
  width:18px;
  height:18px;
  fill:var(--yellow);
}

/* ----------------
   animations
----------------- */

/* soft pulse */

.exp-ico.pulse{
  animation: expPulse 2.6s ease-in-out infinite;
}

/* scanning glow */

.exp-ico.scan::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:12px;

  background:
    linear-gradient(120deg,
      transparent 30%,
      rgba(255,210,2,.35),
      transparent 60%);
  animation: expScan 2.8s linear infinite;
}

/* wifi wave */

.exp-ico.wave{
  animation: expWave 1.8s ease-in-out infinite;
}

/* location bounce */

.exp-ico.bounce{
  animation: expBounce 2s ease-in-out infinite;
}

/* keyframes */

@keyframes expPulse{
  0%,100%{box-shadow:0 0 0 rgba(255,210,2,0)}
  50%{box-shadow:0 0 18px rgba(255,210,2,.45)}
}

@keyframes expScan{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

@keyframes expWave{
  0%{transform:scale(1)}
  50%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@keyframes expBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* responsive */

@media(max-width:1100px){
  .exp-live-only{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .exp-live-only{
    grid-template-columns:1fr;
  }
}
/* ===============================
   WHY ZINGY – CREATIVE SECTION
=============================== */

.why-zingy{
  position:relative;
}

.why-intro{
  max-width:620px;
  font-size:17px;
  color:#ccc;
  margin:-12px 0 40px;
}

/* grid */

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* card */

.why-card{
  position:relative;
  padding:28px 26px 32px;
  border-radius:22px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),
    linear-gradient(135deg,#0f0f0f,#070707);

  border:1px solid rgba(255,255,255,.08);

  overflow:hidden;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}

/* soft ambient glow */

.why-card::before{
  content:"";
  position:absolute;
  inset:-40% -40%;
  background:
    radial-gradient(circle at 20% 30%,
      rgba(255,210,2,.18),
      transparent 40%),
    radial-gradient(circle at 80% 70%,
      rgba(255,210,2,.12),
      transparent 40%);
  opacity:0;
  transition:.4s ease;
  pointer-events:none;
}

/* badge */

.why-badge{
  display:inline-block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.6px;
  color:var(--yellow);
}

/* title */

.why-card h4{
  margin:0 0 10px;
  font-size:18px;
}

/* paragraph */

.why-card p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:#bcbcbc;
}

/* pulse dot (brand detail) */

.why-pulse{
  position:absolute;
  top:18px;
  right:18px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 12px rgba(255,210,2,.6);
  animation: whyPulse 2.8s ease-in-out infinite;
}

/* hover */

.why-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,210,2,.45);
  box-shadow:
    0 18px 40px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,210,2,.15);
}

.why-card:hover::before{
  opacity:1;
}

.why-card:hover h4{
  color:var(--yellow);
}

/* animation */

@keyframes whyPulse{
  0%,100%{opacity:.4; transform:scale(1)}
  50%{opacity:1; transform:scale(1.8)}
}

/* responsive */

@media(max-width:1100px){
  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .why-grid{
    grid-template-columns:1fr;
  }
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:120;
  pointer-events:auto;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0));
  transition: background .3s ease, backdrop-filter .3s ease, padding .3s ease;
}
.site-header-inner{
  padding:20px 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  font-weight:900;
  font-size:22px;
  color:var(--yellow);
  letter-spacing:.4px;
}

.main-nav a{
  color:#ddd;
  text-decoration:none;
  margin-left:28px;
  font-weight:600;
  font-size:14px;
  transition:.2s;
}

.main-nav a:hover{
  color:var(--yellow);
}

/* ==============================
   ZINGY – CREATIVE FOOTER
================================ */

.site-footer{
  position:relative;
  background:#000;
  color:#cfcfcf;
  padding:100px 90px 40px;
  overflow:hidden;
  border-top:1px solid #1c1c1c;
}

/* soft yellow glow */
.site-footer::before{
  content:"";
  position:absolute;
  inset:auto -20% 60% -20%;
  height:300px;
  background:radial-gradient(circle, rgba(255,210,2,.15), transparent 60%);
  pointer-events:none;
}

.footer-wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:2fr repeat(6,1fr);
  gap:48px 40px;
}

/* blocks */

.footer-block h4{
  margin:0 0 14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.4px;
  color:#fff;
}

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

.footer-block ul li{
  margin-bottom:8px;
}

.footer-block a{
  color:#bdbdbd;
  text-decoration:none;
  font-size:13px;
  transition:.2s;
}

.footer-block a:hover{
  color:var(--yellow);
}

/* brand column */

.footer-brand{
  max-width:420px;
}

.footer-logo{
  font-size:26px;
  font-weight:900;
  color:var(--yellow);
  margin-bottom:8px;
  letter-spacing:.5px;
}

.footer-tagline{
  font-size:14px;
  color:#fff;
  margin-bottom:18px;
  font-weight:600;
}

.footer-description{
  font-size:13px;
  line-height:1.7;
  color:#bcbcbc;
  margin-bottom:14px;
}

/* newsletter */

.footer-newsletter{
  grid-column:span 2;
}

.footer-newsletter p{
  font-size:13px;
  line-height:1.6;
  color:#bcbcbc;
  margin-bottom:14px;
}

.footer-form{
  display:flex;
  gap:8px;
}

.footer-form input{
  flex:1;
  background:#0d0d0d;
  border:1px solid #1f1f1f;
  border-radius:10px;
  padding:10px 12px;
  color:#fff;
  outline:none;
  font-size:13px;
}

.footer-form input::placeholder{
  color:#777;
}

.footer-form button{
  background:var(--yellow);
  color:#000;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}

/* bottom top row */

.footer-bottom-top{
  position:relative;
  z-index:2;
  margin-top:80px;
  padding-top:40px;
  border-top:1px solid #1c1c1c;
  display:grid;
  grid-template-columns:2fr 2fr 1.5fr;
  gap:40px;
}

.footer-bottom-top h5{
  margin:0 0 10px;
  font-size:13px;
  color:#fff;
  font-weight:700;
  letter-spacing:.4px;
}

.footer-contact p{
  font-size:13px;
  line-height:1.7;
  color:#bdbdbd;
  margin:0;
}

.footer-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
}

.footer-social-links a{
  font-size:13px;
  color:#bdbdbd;
  text-decoration:none;
}

.footer-social-links a:hover{
  color:var(--yellow);
}

.footer-app-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-app-buttons a{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background:#0d0d0d;
  border:1px solid #1f1f1f;
  color:#fff;
  font-size:13px;
  text-decoration:none;
  text-align:center;
}

.footer-app-buttons a:hover{
  border-color:var(--yellow);
}

/* legal row */

.footer-bottom{
  margin-top:50px;
  padding-top:22px;
  border-top:1px solid #1c1c1c;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:12px;
  color:#888;
}

.footer-legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.footer-legal-links a{
  color:#888;
  text-decoration:none;
}

.footer-legal-links a:hover{
  color:var(--yellow);
}

.footer-copy{
  text-align:right;
}

/* ==============================
   RESPONSIVE
================================ */

@media(max-width:1200px){

  .site-footer{
    padding:80px 40px 40px;
  }

  .footer-wrap{
    grid-template-columns:1.5fr repeat(3,1fr);
  }

  .footer-newsletter{
    grid-column:span 1;
  }

}

@media(max-width:768px){

  .footer-wrap{
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
  }

  .footer-brand{
    grid-column:span 2;
  }

  .footer-newsletter{
    grid-column:span 2;
  }

  .footer-bottom-top{
    grid-template-columns:1fr;
  }

  .footer-copy{
    text-align:left;
  }

}
/* ===============================
   FUTURISTIC FOOTER STRIP
================================ */

.footer-future-zone{
  margin-top:80px;
  padding-top:60px;
  border-top:1px solid #1c1c1c;

  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
}

/* shared panel */

.future-panel{
  position:relative;
  padding:36px 34px 40px;
  border-radius:26px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),
    linear-gradient(135deg,#0b0b0b,#050505);

  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

/* animated glow border */

.future-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  pointer-events:none;

  background:
    linear-gradient(120deg,
      transparent 30%,
      rgba(255,210,2,.25),
      transparent 70%);

  opacity:.15;
}

/* small signal label */

.future-badge{
  display:inline-block;
  margin-bottom:14px;
  font-size:11px;
  letter-spacing:2px;
  font-weight:800;
  color:var(--yellow);
}

/* headline */

.future-panel h3{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.15;
  font-weight:900;
  color:#fff;
}

.future-panel h3 span{
  color:var(--yellow);
}

/* paragraph */

.future-panel p{
  font-size:13px;
  line-height:1.7;
  color:#bcbcbc;
  margin-bottom:18px;
}

/* contact buttons */

.future-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.future-cta-row a{
  padding:8px 14px;
  border-radius:999px;
  background:#0d0d0d;
  border:1px solid #1f1f1f;
  color:#fff;
  font-size:12px;
  text-decoration:none;
}

.future-cta-row a:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}

/* social strip */

.future-social-strip{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.future-social-strip a{
  font-size:12px;
  color:#dcdcdc;
  text-decoration:none;
  position:relative;
}

.future-social-strip a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--yellow);
  transition:.3s;
}

.future-social-strip a:hover::after{
  width:100%;
}

/* app buttons */

.future-app-strip{
  display:flex;
  gap:14px;
}

.future-app-strip a{
  padding:12px 18px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.future-app-strip .primary{
  background:var(--yellow);
  color:#000;
}

.future-app-strip .ghost{
  background:#0d0d0d;
  border:1px solid #1f1f1f;
  color:#fff;
}

.future-app-strip .ghost:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}

/* animated bottom line */

.future-glow-line{
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  height:2px;

  background:
    linear-gradient(90deg,
      transparent,
      var(--yellow),
      transparent);

  opacity:.35;
  animation: zingyPulse 3.5s linear infinite;
}

@keyframes zingyPulse{
  0%{opacity:.1}
  50%{opacity:.6}
  100%{opacity:.1}
}

/* responsive */

@media(max-width:1000px){
  .footer-future-zone{
    grid-template-columns:1fr;
  }
}
/* icon buttons */

.future-social-icons{
  gap:14px;
}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,#0c0c0c,#070707);
  border:1px solid #1f1f1f;

  transition:.25s ease;
}

.icon-btn svg{
  width:18px;
  height:18px;
  fill:#e5e5e5;
  transition:.25s ease;
}

.icon-btn:hover{
  border-color:var(--yellow);
  box-shadow:0 0 0 1px rgba(255,210,2,.25),
             0 10px 30px rgba(255,210,2,.15);
  transform:translateY(-2px);
}

.icon-btn:hover svg{
  fill:var(--yellow);
}


.site-header.is-scrolled{
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
}
/* ===============================
   HEADER WITH OFFER BAR
================================ */


/* ---------- offer bar ---------- */

.header-offer-bar{
  height:36px;
  background:
    linear-gradient(90deg,#000,#111,#000);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
  align-items:center;
}

.offer-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  padding-left:100%;
  animation: zingyTicker 22s linear infinite;
  font-size:12px;
  font-weight:600;
  color:#fff;
}

.offer-track span{
  color:var(--yellow);
}

@keyframes zingyTicker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}

/* ---------- main header ---------- */

.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 64px;
  background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,0));
  transition:all .3s ease;
}

/* logo */

.logo{
  font-size:22px;
  font-weight:900;
  color:#fff;
  letter-spacing:.5px;
}

.logo span{
  color:var(--yellow);
}

/* nav */

.main-nav{
  display:flex;
  gap:34px;
}

.main-nav a{
  color:#ddd;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  position:relative;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:var(--yellow);
  transition:.25s;
}

.main-nav a:hover{
  color:#fff;
}

.main-nav a:hover::after{
  width:100%;
}

/* right actions */

.header-actions{
  display:flex;
  align-items:center;
  gap:20px;
}

.login-link{
  color:#ccc;
  font-size:13px;
  text-decoration:none;
}

.login-link:hover{
  color:#fff;
}

.header-cta{
  padding:10px 16px;
  border-radius:12px;
  background:var(--yellow);
  color:#000;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

/* ---------- scrolled state (connects with your JS) ---------- */

.site-header.is-scrolled .site-header-inner{
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(10px);
  padding-top:12px;
  padding-bottom:12px;
}

/* ---------- responsive ---------- */

@media(max-width:900px){

  .main-nav{
    display:none;
  }

  .site-header-inner{
    padding:16px 22px;
  }

  .offer-track{
    font-size:11px;
  }

}
/* ================================
   FUTURISTIC SLIDE OFFER BAR
================================ */

.zingy-offer-bar{
  position:relative;
  height:44px;
  overflow:hidden;
  background:
    linear-gradient(180deg,#050505,#000);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* glow stays same */

.zingy-glow-layer{
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,210,2,.18), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(255,210,2,.12), transparent 40%);
  animation: zingyGlowMove 14s linear infinite;
  pointer-events:none;
}

@keyframes zingyGlowMove{
  0%{transform:translateX(0)}
  50%{transform:translateX(-120px)}
  100%{transform:translateX(0)}
}

.zingy-offer-slider{
  position:relative;
  z-index:2;
  width:100%;
  max-width:900px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.zingy-slide{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;

  padding:8px 16px;
  border-radius:999px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.10);

  font-size:12px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;

  opacity:0;
  transform:translateY(14px) scale(.98);
  transition:all .5s ease;
}

.zingy-slide.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* dots */

.zingy-slide .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--yellow);
  opacity:.8;
}

.zingy-slide .dot.live{
  animation: zingyPulseDot 1.4s ease infinite;
}

@keyframes zingyPulseDot{
  0%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.8);opacity:1}
  100%{transform:scale(1);opacity:.6}
}
/* ===================================
   ZINGY HEADER CANVAS (CREATIVE TOP)
=================================== */

.zingy-header-canvas{
  position:relative;
  height:42px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:0 32px;

  background:
    linear-gradient(180deg,#060606,#000);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  font-size:12px;
}

/* ambient glow */

.zingy-canvas-glow{
  position:absolute;
  inset:-60% -30%;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,210,2,.20), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(255,210,2,.12), transparent 40%);
  animation: zingyCanvasGlow 16s linear infinite;
  pointer-events:none;
}

@keyframes zingyCanvasGlow{
  0%{transform:translateX(0)}
  50%{transform:translateX(-120px)}
  100%{transform:translateX(0)}
}

/* left */

.zingy-canvas-left{
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2;
  white-space:nowrap;
}

.canvas-badge{
  font-size:10px;
  padding:3px 9px;
  border-radius:999px;
  letter-spacing:1px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.15);
}

.canvas-badge.live{
  background:var(--yellow);
  color:#000;
  border-color:var(--yellow);
}

.canvas-text{
  font-weight:600;
  color:#fff;
}

/* center */

.zingy-canvas-center{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.zingy-canvas-slide{
  position:absolute;
  opacity:0;
  transform:translateY(10px);
  transition:.45s ease;
  font-weight:700;
  color:#fff;
  text-align:center;
  white-space:nowrap;
    display:flex;
  align-items:center;
  gap:10px;
}

.zingy-canvas-slide.active{
  opacity:1;
  transform:translateY(0);
}

/* right */

.zingy-canvas-right{
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2;
  white-space:nowrap;
  color:#dcdcdc;
  font-weight:600;
}

.zingy-canvas-right .sep{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--yellow);
  opacity:.7;
}

/* responsive */

@media(max-width:900px){
  .zingy-header-canvas{
    grid-template-columns:auto 1fr;
  }

  .zingy-canvas-right{
    display:none;
  }

  .zingy-canvas-center{
    justify-content:flex-start;
  }
}

/* ===== live signal with real center dot ===== */

.zingy-signal{
  position:relative;
  width:14px;
  height:14px;
  margin-right:10px;
  flex-shrink:0;
}

.zingy-signal::before,
.zingy-signal::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--yellow);
  opacity:.6;
  animation: zingySignalPulse 1.6s ease-out infinite;
}

.zingy-signal::after{
  animation-delay:.8s;
}

/* real center dot */

.zingy-signal span{
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  background:var(--yellow);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(255,210,2,.8);
}

/* animation */

@keyframes zingySignalPulse{
  0%{
    transform:scale(.2);
    opacity:.9;
  }
  100%{
    transform:scale(1.4);
    opacity:0;
  }
}
/* ============================
   ZINGY SMART NAV
============================ */

.zingy-nav{
  position:relative;
  display:flex;
  gap:34px;
  align-items:center;
}

.zingy-nav a{
  position:relative;
  padding:8px 2px;
  font-size:14px;
  font-weight:700;
  color:#dcdcdc;
  text-decoration:none;
  letter-spacing:.2px;
  transition:.2s ease;
}

.zingy-nav a:hover{
  color:#fff;
}

/* moving indicator */

.zingy-nav .nav-indicator{
  position:absolute;
  bottom:-10px;
  height:2px;
  width:40px;
  background:var(--yellow);
  border-radius:2px;

  transform:translateX(0);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    width .35s cubic-bezier(.2,.8,.2,1);

  box-shadow:
    0 0 10px rgba(255,210,2,.6);
  pointer-events:none;
}
/* -------------------------------
   submenu
-------------------------------- */

.nav-item{
  position:relative;
}

.has-sub > a{
  padding-right:10px;
}

/* dropdown container */

.nav-submenu{
  position:absolute;
  top:130%;
  left:50%;
  transform:translateX(-50%) translateY(8px);

  min-width:220px;

  padding:10px;
  border-radius:14px;

  background:
    linear-gradient(180deg,rgba(15,15,15,.95),rgba(5,5,5,.95));
  backdrop-filter: blur(12px);

  border:1px solid rgba(255,255,255,.08);

  opacity:0;
  pointer-events:none;

  transition:.25s ease;
  z-index:200;
}

/* submenu links */

.nav-submenu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;

  font-size:13px;
  font-weight:600;
  color:#e6e6e6;
  text-decoration:none;

  transition:.2s;
}

.nav-submenu a:hover{
  background:rgba(255,210,2,.12);
  color:var(--yellow);
}

/* show on hover */

.has-sub:hover .nav-submenu{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* ==============================
   CREATIVE MENU ICON SYSTEM
============================== */

.zingy-nav .nav-link{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}

/* icon wrapper */
.nav-ico{
  width:18px;
  height:18px;
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
}

/* main icon */
.nav-ico svg{
  width:16px;
  height:16px;
  fill:#bdbdbd;
  transition:.35s cubic-bezier(.2,.9,.2,1);
  z-index:2;
}

/* orbit ring */
.nav-ico::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,210,2,.25);
  opacity:0;
  transform:scale(.6);
}

/* scanning beam */
.nav-ico::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,210,2,.45),
      transparent 60%
    );
  opacity:0;
  filter:blur(2px);
}

/* hover / active */
.zingy-nav .nav-link:hover .nav-ico svg,
.zingy-nav .nav-link.active .nav-ico svg{
  fill:var(--yellow);
  transform:scale(1.08);
}

/* activate orbit + beam */
.zingy-nav .nav-link:hover .nav-ico::before,
.zingy-nav .nav-link.active .nav-ico::before{
  opacity:1;
  transform:scale(1);
  animation: zingyOrbit .8s ease;
}

.zingy-nav .nav-link:hover .nav-ico::after,
.zingy-nav .nav-link.active .nav-ico::after{
  opacity:.9;
  animation: zingySweep 1.1s linear infinite;
}

/* tiny pop */
.zingy-nav .nav-link:hover .nav-ico{
  animation: zingyIconPop .35s ease;
}

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

@keyframes zingyOrbit{
  0%{ transform:scale(.4); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:scale(1); }
}

@keyframes zingyIconPop{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}
/* ===========================
   MY ACCOUNT – HEADER
=========================== */

.account-zone{
  position:relative;
}

/* trigger */

.account-trigger{
  cursor:pointer;
}

.account-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;

  color:#000;
  background:var(--yellow);

  box-shadow:
    0 6px 18px rgba(255,210,2,.35);
}

/* dropdown */

.account-dropdown{
  position:absolute;
  right:0;
  top:120%;
  min-width:220px;

  padding:12px;

  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(15,15,15,.95),rgba(5,5,5,.95));
  backdrop-filter: blur(12px);

  border:1px solid rgba(255,255,255,.08);

  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:.25s ease;
  z-index:300;
}

/* show on hover */

.account-zone:hover .account-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* head */

.account-head{
  padding:6px 8px 10px;
}

.account-head strong{
  display:block;
  font-size:13px;
  color:#fff;
}

.account-head span{
  font-size:11px;
  color:#9b9b9b;
}

/* links */

.account-dropdown a{
  display:block;
  padding:9px 10px;
  border-radius:10px;

  font-size:13px;
  text-decoration:none;
  color:#e6e6e6;
  transition:.2s;
}

.account-dropdown a:hover{
  background:rgba(255,210,2,.12);
  color:var(--yellow);
}

/* separator */

.account-sep{
  height:1px;
  background:#1c1c1c;
  margin:8px 0;
}

/* logout */

.account-dropdown .logout{
  color:#ffb3b3;
}

.account-dropdown .logout:hover{
  background:rgba(255,80,80,.12);
  color:#ff6b6b;
}
/* avatar + name row */

.account-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

/* user name */

.account-name{
  font-size:13px;
  font-weight:700;
  color:#fff;
  letter-spacing:.2px;
  max-width:140px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* subtle hover polish */

.account-zone:hover .account-name{
  color:var(--yellow);
}

/* ===============================
   ACCOUNT ZONE – ANIMATED HIGHLIGHT
================================ */

.account-zone{
  position:relative;
}

/* soft living glow behind the trigger */

.account-trigger{
  position:relative;
  padding:6px 10px;
  border-radius:999px;
  transition:.25s ease;
  z-index:1;
}

/* ambient glow layer */

.account-trigger::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;

  background:
    radial-gradient(circle at 30% 50%,
      rgba(255,210,2,.25),
      transparent 60%);

  opacity:.35;
  filter:blur(10px);
  z-index:-1;

  animation: accountGlowPulse 3.5s ease-in-out infinite;
}

/* subtle scan highlight on hover */

/* automatic scan highlight (no hover needed) */

.account-trigger::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;

  background:
    linear-gradient(120deg,
      transparent 30%,
      rgba(255,210,2,.35),
      transparent 60%);

  opacity:.6;
  transform:translateX(-120%);
  pointer-events:none;

  animation: accountScan 4.5s ease-in-out infinite;
}

/* hover lift + scan */

.account-zone:hover .account-trigger{
  transform:translateY(-1px);
}

.account-zone:hover .account-trigger::after{
  opacity:1;
  transform:translateX(120%);
}

/* stronger glow when user focuses there */

.account-zone:hover .account-trigger::before{
  opacity:.6;
}

/* tiny avatar pulse (product feel) */

.account-avatar{
  animation: avatarIdle 4s ease-in-out infinite;
}

/* stop idle pulse when hovering */

.account-zone:hover .account-avatar{
  animation:none;
}

/* name highlight */

.account-zone:hover .account-name{
  text-shadow:0 0 12px rgba(255,210,2,.35);
}

/* -------------------------------- */

@keyframes accountGlowPulse{
  0%{opacity:.25}
  50%{opacity:.55}
  100%{opacity:.25}
}

@keyframes avatarIdle{
  0%{ box-shadow:0 0 0 rgba(255,210,2,.0); }
  50%{ box-shadow:0 0 18px rgba(255,210,2,.35); }
  100%{ box-shadow:0 0 0 rgba(255,210,2,.0); }
}
@keyframes accountScan{
  0%{
    transform:translateX(-120%);
    opacity:0;
  }
  15%{
    opacity:.6;
  }
  45%{
    transform:translateX(120%);
    opacity:.6;
  }
  60%{
    opacity:0;
  }
  100%{
    transform:translateX(120%);
    opacity:0;
  }
}

/* ============================
   HERO SEARCH (AFTER HERO)
============================ */

.zingy-hero-search{
  position:relative;
  z-index:3;

  margin-top:-60px; /* pulls it into hero edge (premium look) */
  padding:0 24px 60px;
}

.zingy-search-form{
  max-width:1100px;
  margin:0 auto;

  padding:18px 20px;

  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr auto;
  gap:14px;
  align-items:end;

  border-radius:18px;

  background:
    linear-gradient(180deg,rgba(18,18,18,.95),rgba(8,8,8,.95));
  backdrop-filter: blur(14px);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 20px 50px rgba(0,0,0,.6);
}

/* fields */

.search-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.search-field label{
  font-size:11px;
  color:#9c9c9c;
  font-weight:600;
  letter-spacing:.4px;
}

.search-field input,
.search-field select{
  height:42px;
  padding:0 12px;

  background:#0c0c0c;
  border:1px solid #1f1f1f;
  border-radius:12px;

  color:#fff;
  font-size:13px;
  outline:none;
}

.search-field input::placeholder{
  color:#777;
}

.search-field input:focus,
.search-field select:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 1px rgba(255,210,2,.25);
}

/* button */

.search-btn{
  height:42px;
  padding:0 20px;
  border-radius:12px;

  background:var(--yellow);
  color:#000;

  border:none;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

/* mobile */

@media(max-width:900px){

  .zingy-search-form{
    grid-template-columns:1fr 1fr;
  }

  .search-btn{
    grid-column:span 2;
  }

  .zingy-hero-search{
    margin-top:-30px;
  }

}
/* Hide header canvas side blocks on mobile */

@media (max-width: 900px){

    .zingy-canvas-left,
    .zingy-canvas-right{
        display: none !important;
    }

    /* keep only the sliding message centered */
    .zingy-header-canvas{
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0 14px;
    }

    .zingy-canvas-center{
        justify-content: center;
        text-align: center;
    }

}

/* ===============================
   FIX – mobile menu showing by default
=============================== */

@media (max-width: 900px){

    #zingyMainNav{
        display:flex !important;
        position:fixed;
        inset:0;
        background:#050505;

        padding:110px 26px 40px;

        flex-direction:column;
        align-items:flex-start;
        gap:20px;

        transform:translateX(100%);
        transition:.35s cubic-bezier(.2,.8,.2,1);

        z-index:9999;
    }

    #zingyMainNav.open{
        transform:translateX(0);
    }

}
/* mobile close button */

.zingy-menu-close{
    display:none;
}

@media (max-width:900px){

    .zingy-menu-close{
        display:flex;
        align-items:center;
        justify-content:center;

        position:absolute;
        top:22px;
        right:22px;

        width:42px;
        height:42px;

        border-radius:12px;
        border:1px solid #1f1f1f;
        background:#0c0c0c;

        color:#fff;
        font-size:22px;
        cursor:pointer;
    }

}
@media (max-width:900px){

  .zingy-canvas-left,
  .zingy-canvas-right, 
  .account-zone,
  .header-actions {
    display:none !important;
  }

}