:root{
    --brand:#0fb9b1; --brand-dark:#0aa79f;
    --ink:#033649; --bg:#f6fcff; --muted:#608894; --card:#ffffff; --ring:rgba(15,185,177,.25);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
  h1,h2,h3{font-family:"Manrope","Inter",sans-serif;color:#026873}
  a{text-decoration:none;color:inherit}

  /* --- Background wheels (globális) --- */
  .bg-wheels{position:fixed; inset:0; pointer-events:none; z-index:0}
  .bg-wheel{position:absolute; opacity:.12; filter:brightness(1.2) saturate(.7)}
  .bg-wheel svg{width:100%; height:100%}

  /* --- NAV --- */
  nav.navbar-custom{position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; justify-content:center}
  .nav-inner{
width:min(1200px,92%); height:56px; padding:0 .75rem; margin-top:.75rem;
background:rgba(255,255,255,.45); backdrop-filter:saturate(180%) blur(16px);
border:1px solid rgba(255,255,255,.5); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08);
display:flex; align-items:center; justify-content:space-between;

/* +++ EZ KELL A RÉTEGEZÉSHEZ +++ */
position: relative;
}

  .brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
  .brand-mark{width:28px; height:28px; border-radius:50%; background:var(--brand); display:grid; place-items:center; color:#fff; box-shadow:0 0 0 6px var(--ring)}
  .nav-links{display:flex; align-items:center; gap:1.15rem}
  .nav-links a{position:relative; padding:.25rem .1rem; font-weight:600}
  .nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; border-radius:2px}
  .nav-links a:hover::after{transform:scaleX(1)}
  .menu-toggle{display:none; font-size:1.6rem; cursor:pointer}
  /* NAV – szükséges, hogy az abszolút/fixed menü jó helyre igazodjon */
.nav-inner{ position: relative; }

@media (max-width:900px){
.menu-toggle{
  display:block;
  z-index:5000;                 /* a hamburger mindenek fölött legyen */
}

/* A lenyíló menü *fixed*, emiatt kilép minden stacking contextből
   és semmi nem fogja kitakarni. */
.nav-links{
  display:none;
  position: fixed;              /* <<< volt: absolute */
  top: 70px;                    /* a nav alá kerül */
  left: 4%;
  right: 4%;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);

  z-index: 4000;                /* <<< magasabb, mint bármi más */
  max-height: 80vh;
  overflow-y: auto;

  transform: translateY(-6px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-links.show{ display:flex; transform: translateY(0); opacity:1; }

/* Overlay-t nem használunk többé */
.nav-overlay{ display:none !important; }
}


  /* --- Kapcsolat gomb (a megadott, témához hangolva) --- */
  .button {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 10px 20px rgba(0,0,0,0.16);
    padding-block: .55rem;
    padding-inline: 1.15rem;
    background-color: var(--brand);
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 10px;
    font-weight: 800;
    border: 3px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: 14.5px;
    cursor: pointer;
    letter-spacing:.2px;
  }
  .icon { width: 22px; height: 22px; transition: all 0.3s ease-in-out; }
  .button:hover { transform: translateY(-1px) scale(1.03); border-color: #fff9; background-color: var(--brand-dark); }
  .button:hover .icon { transform: translate(4px); }
  .button:hover::before { animation: shine 1.5s ease-out infinite; }
  .button::before {
    content: ""; position: absolute; width: 100px; height: 100%;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
    top: 0; left: -100px; opacity: .6;
  }
  @keyframes shine { 0%{left:-100px} 60%{left:100%} 100%{left:100%} }

  /* --- HERO slideshow --- */
  header.hero{position:relative; min-height:88vh; display:grid; place-items:center; color:#fff; text-align:center; z-index:1; overflow:hidden}
  .hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease}
  .hero-slide.active{opacity:1}
  .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,104,115,.55) 0%, rgba(15,185,177,.35) 60%, rgba(2,104,115,.55) 100%); z-index:1}
  .hero-content{position:relative; z-index:2; width:min(1000px,90%); padding-top:90px}
  .hero-title{font-size:clamp(2rem,4.8vw,3.2rem); line-height:1.08; font-weight:800; text-shadow:0 6px 24px rgba(0,0,0,.35); color: #0aa79f;}
  .hero-sub{max-width:760px; margin:.6rem auto 1.2rem}
  .hero-ctas{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
  .btn-brand{display:inline-flex; align-items:center; gap:.45rem; background:var(--brand); color:#fff; border:0; border-radius:12px; padding:.65rem 1rem; font-weight:700; box-shadow:0 8px 22px rgba(15,185,177,.35)}
  .btn-brand:hover{background:var(--brand-dark)}
  .btn-ghost{background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:12px; padding:.65rem 1rem; font-weight:700}

  /* --- Sections --- */
  section{position:relative; z-index:1; padding:5rem 0}
  .container-narrow{width:min(1200px,92%); margin-inline:auto}

  /* --- About --- */
  .about{display:grid; grid-template-columns:320px 1fr; gap:2rem; align-items:center}
  .about img{width:100%; border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.18)}
  @media (max-width:900px){ .about{grid-template-columns:1fr} }

  /* --- Why Us --- */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
  @media (max-width:1100px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .why-grid{grid-template-columns:1fr} }
  .why-card{background:var(--card); border:1px solid rgba(2,104,115,.08); border-radius:16px; padding:1.1rem; box-shadow:0 10px 26px rgba(2,104,115,.08)}
  .why-card i{font-size:28px; color:#026873}

  /* --- Services / Pricing --- */
  .card-service{background:var(--card); border:1px solid rgba(2,104,115,.08); border-radius:16px; padding:1.2rem; box-shadow:0 10px 28px rgba(2,104,115,.08)}
  .service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
  @media (max-width:900px){ .service-grid{grid-template-columns:1fr} }
  .service-list{margin:.6rem 0 .3rem 1rem}
  .price{font-weight:800; color:#026873}
  .basic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
  @media (max-width:1150px){ .basic-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:680px){ .basic-grid{grid-template-columns:1fr} }
  .delivery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
  @media (max-width:900px){ .delivery-grid{grid-template-columns:1fr} }
  .pill{display:inline-block; background:#e8faff; color:#026873; border-radius:999px; padding:.25rem .6rem; font-weight:700; font-size:.95rem}

  /* --- Bikes --- */
  .bikes-row{display:flex; gap:12px; overflow-x:auto; padding-bottom:.5rem}
  .bikes-row .card{min-width:260px; border-radius:16px; box-shadow:0 10px 26px rgba(2,104,115,.08)}
  .bikes-row img{aspect-ratio:16/9; object-fit:cover; border-top-left-radius:16px; border-top-right-radius:16px}
  .elado img{height: 200px;}

  /* --- Gallery (8) --- */
  .gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  @media (max-width:1150px){ .gallery{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:780px){ .gallery{grid-template-columns:repeat(2,1fr)} }
  .gallery img{aspect-ratio:16/9; width:100%; object-fit:cover; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.12); transition:transform .25s ease; cursor:pointer}
  .gallery img:nth-child(odd){transform:rotate(-1deg)}
  .gallery img:nth-child(even){transform:rotate(1deg)}
  .gallery img:hover{transform:scale(1.02)}

  /* --- Certificates (egymás alatt + háttér biciklik) --- */
  #certs { overflow: hidden; }
  .certs-wrap{
    position:relative;
    width:min(900px, 92%);
    margin-inline:auto;
  }
  .certs-bg{
    position:absolute; inset:-40px 0 -40px 0; /* kicsit túl lógjon, hogy legyen tér a mozgáshoz */
    pointer-events:none; z-index:0;
  }
  .certs-stack{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
  .certs-stack img{
    width: 350px; max-width:760px;
    border-radius:12px; background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
  }
  .cert-bike{
    position:absolute; opacity:.10;
    filter: saturate(.8) brightness(1.05);
    will-change: transform;
  }

  .idoszak{
    color: var(--muted);
  }
  /* --- Testimonials Carousel + CTA --- */
  .review{background:var(--card); border:1px solid rgba(2,104,115,.08); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(2,104,115,.08); height:100%}
  .stars{color:#f5b301}
  .carousel-item{transition: transform .6s ease, opacity .6s ease}
  .carousel .row > div:last-child{display:none}
  @media (min-width:768px){ .carousel .row > div:last-child{display:block} }
  .reviews-cta{display:flex; justify-content:center; margin-top:14px}

  /* --- Contact --- */
  .contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
  @media (max-width:900px){ .contact-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .contact-grid{grid-template-columns:1fr} }
  .contact-card{background:var(--card); border:1px solid rgba(2,104,115,.08); border-radius:16px; padding:1.2rem; text-align:center; box-shadow:0 12px 32px rgba(2,104,115,.08)}
  .contact-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,104,115,.12); background:#f0fffd}
  .contact-hint{color:var(--muted)}

  /* --- FAB Cart --- */
  .fab{position:fixed; right:18px; bottom:18px; z-index:1100; width:56px; height:56px; border-radius:50%; background:var(--brand); display:grid; place-items:center; color:#fff; box-shadow:0 14px 36px rgba(15,185,177,.45), inset 0 1px 0 rgba(255,255,255,.35)}
  .fab:hover{background:var(--brand-dark)}
  .fab-badge{position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px; background:#026873; color:#fff; border-radius:999px; display:grid; place-items:center; font-size:.8rem; font-weight:800; box-shadow:0 0 0 4px var(--ring)}

  /* --- Cart Modal --- */
  .modal-backdrop-custom{position:fixed; inset:0; display:none; place-items:center; z-index:1200; background:rgba(0,0,0,.5); padding:1rem}
  .modal-backdrop-custom.show{display:grid}
  .modal-card{width:min(480px, 92%); background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.2rem 1.2rem 1rem; box-shadow:0 20px 50px rgba(0,0,0,.25)}
  #cartItems{list-style:none; margin:.4rem 0 .8rem; max-height:260px; overflow:auto}
  #cartItems li{display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:#f1fbfb; border:1px solid rgba(2,104,115,.08); border-radius:10px; padding:.55rem .7rem; margin:.35rem 0}
  #cartItems .remove{background:#ff6b6b; color:#fff; border:0; border-radius:8px; padding:.25rem .5rem; cursor:pointer}

  /* --- Vélemény CTA gomb --- */
  .bt {
    border: none; user-select: none; font-size: 16px; color: white; text-align: center;
    background-color: var(--brand);
    box-shadow: #cacaca 2px 2px 10px 1px;
    border-radius: 12px; height: 56px; line-height: 56px; width: 170px;
    transition: all 0.2s ease; position: relative; font-weight:800; letter-spacing:.2px;
  }
  .msg { height: 0; width: 0; border-radius: 2px; position: absolute; left: 15%; top: 25%; }
  .bt:active { transition: all 0.001s ease; background-color: var(--brand-dark); box-shadow: #97989a 0 0 0 0; transform: translateX(1px) translateY(1px); }
  .bt:hover .msg { animation: msgRun 2s forwards; }
  @keyframes msgRun {
    0% { border-top:#d6d6d9 0 solid; border-bottom:#f2f2f5 0 solid; border-left:#f2f2f5 0 solid; border-right:#f2f2f5 0 solid; }
    20% { border-top:#d6d6d9 14px solid; border-bottom:#f2f2f5 14px solid; border-left:#f2f2f5 20px solid; border-right:#f2f2f5 20px solid; }
    25% { border-top:#d6d6d9 12px solid; border-bottom:#f2f2f5 12px solid; border-left:#f2f2f5 18px solid; border-right:#f2f2f5 18px solid; }
    80% { border-top:transparent 12px solid; border-bottom:transparent 12px solid; border-left:transparent 18px solid; border-right:transparent 18px solid; }
    100% { transform: translateX(150px); border-top:transparent 12px solid; border-bottom:transparent 12px solid; border-left:transparent 18px solid; border-right:transparent 18px solid; }
  }

  /* --- Reveal --- */
  .reveal{opacity:0; transform:translateY(20px); transition:all .6s cubic-bezier(.2,.65,.2,1)}
  .reveal.show{opacity:1; transform:translateY(0)}