/* =========================================================
   MASTER / PRO CSS — TULPAR (Blue + White)
   Works with your HTML + app.js classes:
   - .side-link .is-active
   - .menu-toggle .active
   - .side.open
   - .card.show (reveal)
========================================================= */

/* --------------------------
   1) Design System
-------------------------- */
  :root{
    /* Brand */
    --blue:#004F9F;
    --blue-2:#0A66D6;          /* subtle highlight */
    --blue-soft:#EAF2FB;
  
    /* Neutral */
    --white:#FFFFFF;
    --ink:#1F2937;
    --muted:#475569;
    --line:rgba(15,23,42,.10);

    /* Photo background (replace with your own image) */
    --page-photo:url("images/mountains.jpg");
    --page-photo-focus:50% 35%;

    /* Glass surfaces */
    --glass-bg:rgba(255,255,255,.76);
    --glass-border:rgba(255,255,255,.55);
    --glass-blur:18px;
  
    /* Layout */
    --container:1120px;
    --sidew:clamp(240px, 22vw, 320px);
  
    /* Radius */
    --r-sm:14px;
    --r:18px;
    --r-lg:28px;
  
    /* Shadows (premium + soft) */
    --sh-soft:0 30px 90px rgba(0,79,159,.14);
    --sh-card:0 16px 44px rgba(2,8,23,.10);
    --sh-chip:0 10px 26px rgba(2,8,23,.10);
  
    /* Motion */
    --e-out:cubic-bezier(.2,.9,.2,1);
    --e-inout:cubic-bezier(.4,0,.2,1);
    --t-fast:.18s;
    --t:.35s;
    --t-slow:.55s;
  }
  
  /* --------------------------
     2) Base + Accessibility
  -------------------------- */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink);
    background-color:#E9EEF5;
    overflow-x:hidden;
    position:relative;
  }
  
  a{color:inherit}
  img{max-width:100%;display:block}
  
  :focus-visible{
    outline:3px solid rgba(0,79,159,.35);
    outline-offset:3px;
    border-radius:12px;
  }
  
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{transition:none !important; animation:none !important}
    html{scroll-behavior:auto}
  }
  
  /* Optional subtle grain */
  .page-bg{
    position:fixed;
    inset:0;
    z-index:0;
    background: var(--page-photo) var(--page-photo-focus) / cover no-repeat;
    filter:saturate(1.05) contrast(1.02);
    pointer-events:none;
    animation: bgDrift 26s ease-in-out infinite alternate;
    transform-origin:center;
    will-change: transform;
  }

  .page-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(1200px 520px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
      linear-gradient(180deg, rgba(250,252,255,.75) 0%, rgba(242,246,252,.42) 45%, rgba(232,238,246,.72) 100%);
  }

  .bg-grain{
    position:fixed; inset:0;
    pointer-events:none;
    opacity:.10;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(0,79,159,.20), transparent 40%),
      radial-gradient(circle at 80% 25%, rgba(10,102,214,.14), transparent 42%),
      radial-gradient(circle at 35% 80%, rgba(0,79,159,.10), transparent 45%);
    filter:saturate(1.05);
    z-index:1;
  }
  
  /* --------------------------
     3) Layout
  -------------------------- */
  .layout{
    min-height:100vh;
    display:grid;
    grid-template-columns: 1fr var(--sidew);
    position:relative;
    z-index:2;
  }
  
  .main{min-width:0}
  
  .container{
    width:min(var(--container), 92vw);
    margin-inline:auto;
    padding: 92px 0;
  }
  
  .section{
    border-top:1px solid var(--line);
  }

  .section .container > *{
    opacity:0;
    transform: translateY(22px) scale(.98);
    filter: blur(6px);
    transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out);
  }

  .section.is-visible .container > *{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  .section .h2,
  .section .lead{
    opacity:1;
    transform: translateY(8px);
    filter:none;
    transition: transform var(--t-slow) var(--e-out);
  }

  .section.is-visible .h2,
  .section.is-visible .lead{
    transform: translateY(0);
  }

  .section.is-visible .container > *:nth-child(2){ transition-delay:.06s; }
  .section.is-visible .container > *:nth-child(3){ transition-delay:.12s; }
  .section.is-visible .container > *:nth-child(4){ transition-delay:.18s; }
  
  /* --------------------------
     4) Typography
  -------------------------- */
  .title,.h2,.brand-name{
    font-family:"Playfair Display",serif;
    letter-spacing:.01em;
  }
  
  .kicker{
    margin:0 0 12px;
    color:var(--muted);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:12px;
  }
  
  .title{
    margin:0;
    font-weight:700;
    font-size:clamp(36px, 4.4vw, 64px);
    line-height:1.05;
  }
  
  .subtitle{
    margin:16px 0 0;
    color:var(--muted);
    line-height:1.7;
    font-size:clamp(15px, 1.4vw, 18px);
  }
  
  .h2{
    margin:0 0 16px;
    font-weight:700;
    font-size:clamp(30px, 2.6vw, 40px);
    line-height:1.15;
    position:relative;
    display:inline-block;
    padding-bottom:6px;
  }

  .section .h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:6px;
    background: linear-gradient(90deg, rgba(0,79,159,0), rgba(0,79,159,.35), rgba(0,79,159,0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow) var(--e-out);
  }

  .section.is-visible .h2::after{
    transform: scaleX(1);
  }
  
  .h3{
    margin:0 0 10px;
    font-size:18px;
  }
  
  .lead{
    margin:0;
    color:var(--muted);
    line-height:1.8;
    font-size:clamp(15px, 1.2vw, 18px);
    max-width: 760px;
  }
  
  .muted{color:var(--muted)}
  .small{font-size:12px}
  
  /* --------------------------
     5) Hero (premium card)
  -------------------------- */
  .hero{
    border-top:none;
    padding-top: 18px;
  }
  
  .hero .container{
    padding: 92px 0 70px;
  }
  
  .hero-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--r-lg);
    background:
      radial-gradient(130% 120% at 100% 0%, rgba(255,255,255,.8), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
    border:1px solid var(--glass-border);
    box-shadow:var(--sh-soft);
    padding: 54px 52px;
    animation: heroIn .70s var(--e-out) both;
  }
  
  .hero-card::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(700px 260px at 25% 10%, rgba(0,79,159,.12), transparent 60%),
      radial-gradient(700px 260px at 85% 25%, rgba(10,102,214,.10), transparent 55%);
    opacity:.55;
    animation: heroGlow 9s ease-in-out infinite;
    pointer-events:none;
  }
  
  /* Keep content above glow */
  .hero-card > *{position:relative; z-index:1}

  @media (min-width: 1280px){
    .hero-card{
      padding-right: clamp(220px, 30vw, 460px);
    }

    .hero-card::before{
      content:"";
      position:absolute;
      top:18px;
      right:-30px;
      width: clamp(260px, 34vw, 460px);
      height: calc(100% - 36px);
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(0,79,159,.08)),
        url("images/bus1.jpg") center/cover no-repeat;
      box-shadow: 0 24px 70px rgba(2,8,23,.18);
      opacity:.95;
      pointer-events:none;
      z-index:0;
      animation: heroImageFloat 14s ease-in-out infinite;
    }
  }

  .hero-card .kicker{
    animation: textIn .9s var(--e-out) .08s both;
  }

  .hero-card .title{
    animation: textIn 1s var(--e-out) .16s both;
  }

  .hero-card .subtitle{
    animation: textIn 1s var(--e-out) .28s both;
  }

  .hero-card .hero-actions{
    animation: textIn 1s var(--e-out) .42s both;
  }
  
  .hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:26px;
  }
  
  /* --------------------------
     6) Buttons (master)
  -------------------------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  
    padding: 14px 22px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
  
    border:1px solid transparent;
    transition:
      transform var(--t) var(--e-inout),
      box-shadow var(--t) var(--e-inout),
      background var(--t) var(--e-inout),
      border-color var(--t) var(--e-inout),
      color var(--t) var(--e-inout);
    will-change: transform;
    user-select:none;
  }
  
  .btn:active{transform: translateY(1px) scale(.99)}
  
  .btn-primary{
    color:#fff;
    background: linear-gradient(135deg, var(--blue-2), var(--blue));
    box-shadow: 0 18px 50px rgba(0,79,159,.36);
  }
  
  .btn-primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 70px rgba(0,79,159,.46);
  }
  
  .btn-ghost{
    background: rgba(255,255,255,.80);
    color: var(--ink);
    border-color: rgba(15,23,42,.10);
  }
  
  .btn-ghost:hover{
    border-color: rgba(0,79,159,.25);
    box-shadow: 0 16px 40px rgba(0,79,159,.12);
    transform: translateY(-2px);
  }
  
  .btn-secondary{
    background: rgba(0,79,159,.08);
    border-color: rgba(0,79,159,.18);
    color: var(--blue);
  }
  
  .btn-secondary:hover{
    background: rgba(0,79,159,.12);
    transform: translateY(-2px);
  }
  
  .full{width:100%}
  
  /* --------------------------
     7) Grids + Cards (sections)
  -------------------------- */
  .grid-3{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
    margin-top:18px;
  }
  
  .grid-2{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
    margin-top:18px;
  }
  
  .stack{
    display:grid;
    gap:14px;
    margin-top:18px;
  }
  
  .card{
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--r);
    padding: 22px 22px;
    box-shadow: var(--sh-card);

    /* reveal (your app.js adds .show) */
    opacity: 0;
    transform: translateY(28px) scale(.98);
    filter: blur(6px);
    transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out), box-shadow var(--t) var(--e-inout);
  }

  .card.show{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    animation: cardPop .9s var(--e-out) both;
    animation-delay: calc(var(--stagger, 0) * 0.08s);
  }
  
  .card:hover{
    box-shadow: 0 22px 70px rgba(0,79,159,.14);
  }
  
  .card-accent{
    background:
      radial-gradient(120% 100% at 100% 0%, rgba(0,79,159,.10), transparent 55%),
      var(--glass-bg);
  }
  
  /* Small text helpers */
  .note{
    margin:16px 0 0;
    color:var(--muted);
  }
  
  /* Callout */
  .callout{
    border:1px dashed rgba(0,79,159,.32);
    border-radius: var(--r);
    padding: 16px 18px;
    background: rgba(255,255,255,.6);
    color: var(--muted);
  }
  
  /* Actions row */
  .actions-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
  }
  
  /* Prices list */
  .list{
    margin:0;
    padding-left:18px;
    color:var(--muted);
    line-height:1.9;
  }
  
  .mini{
    padding: 12px 14px;
    border:1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--glass-bg);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .hero-card,
    .card,
    .info-card,
    .callout,
    .mini,
    .side{
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
      backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    }
  }
  
  /* --------------------------
     8) Bus gallery (smooth & premium)
  -------------------------- */
  .bus-scroll{
    margin-top:16px;
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding: 6px 4px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .bus-scroll::-webkit-scrollbar{height:10px}
  .bus-scroll::-webkit-scrollbar-thumb{
    background: rgba(0,79,159,.18);
    border-radius:999px;
  }
  .bus-scroll::-webkit-scrollbar-track{background: transparent}
  
  .bus-card{
    min-width: clamp(280px, 26vw, 360px);
    height: clamp(180px, 16vw, 230px);
    border-radius: 20px;
    overflow:hidden;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(234,242,251,.45);
    box-shadow: 0 16px 44px rgba(2,8,23,.10);
    scroll-snap-align: start;
    opacity:0;
    transform: translateY(18px) scale(.98);
    filter: blur(6px);
    transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out);
  }

  .bus-card.show{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    animation: cardPop .9s var(--e-out) both;
    animation-delay: calc(var(--stagger, 0) * 0.08s);
  }
  
  .bus-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform: scale(1.02);
    transition: transform var(--t-slow) var(--e-out), filter var(--t) var(--e-inout);
    filter: saturate(1.03) contrast(1.02);
  }
  
  .bus-card:hover img{
    transform: scale(1.06);
  }
  
  /* --------------------------
     9) Social chips
  -------------------------- */
  .social{
    margin-top:18px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .chip{
    padding: 10px 14px;
    border-radius: 999px;
    border:1px solid rgba(0,79,159,.18);
    background: rgba(255,255,255,.78);
    color: var(--blue);
    text-decoration:none;
    font-weight:800;
    box-shadow: var(--sh-chip);
    transition: transform var(--t) var(--e-inout), box-shadow var(--t) var(--e-inout), border-color var(--t) var(--e-inout);
  }
  
  .chip:hover{
    transform: translateY(-2px);
    border-color: rgba(0,79,159,.30);
    box-shadow: 0 18px 55px rgba(0,79,159,.18);
  }
  
  /* --------------------------
     10) Right sidebar (desktop)
  -------------------------- */
  .side{
    position: sticky;
    top:0;
    height: 100vh;
    border-left:1px solid var(--glass-border);
    background: var(--glass-bg);
  }
  
  .side-inner{
    height:100%;
    padding: 24px 18px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color: var(--ink);
  }
  
  .brand-mark{
    width:44px; height:44px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    background: linear-gradient(135deg, var(--blue-2), var(--blue));
    color: #fff;
    font-weight: 900;
    box-shadow: 0 16px 40px rgba(0,79,159,.28);
  }
  
  .brand-name{
    font-weight: 800;
    font-size: 20px;
  }
  
  .side-nav{
    display:grid;
    gap:8px;
    padding-top:6px;
  }
  
  .side-link{
    text-decoration:none;
    color: var(--ink);
    padding: 12px 12px;
    border-radius: 14px;
    border:1px solid transparent;
    transition: background var(--t) var(--e-inout), border-color var(--t) var(--e-inout), transform var(--t) var(--e-inout), color var(--t) var(--e-inout);
  }
  
  .side-link:hover{
    background: rgba(234,242,251,.75);
    border-color: rgba(0,79,159,.14);
    color: var(--blue);
    transform: translateX(2px);
  }
  
  .side-link.is-active{
    background: rgba(0,79,159,.10);
    border-color: rgba(0,79,159,.22);
    color: var(--blue);
  }
  
  .side-cta{
    margin-top:auto;
    display:grid;
    gap:10px;
  }
  
  /* --------------------------
     11) Mobile menu button + overlay
  -------------------------- */
  .menu-toggle{
    position: fixed;
    top: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--blue-2), var(--blue));
    border: 1px solid rgba(255,255,255,.30);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1101;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0,79,159,.28);
    transition: transform var(--t) var(--e-inout), box-shadow var(--t) var(--e-inout);
  }
  
  .menu-toggle:hover{
    transform: translateY(-2px);
    box-shadow: 0 28px 90px rgba(0,79,159,.34);
  }
  
  .menu-toggle span{
    position: absolute;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: transform var(--t) var(--e-inout), opacity var(--t) var(--e-inout);
  }
  
  .menu-toggle span:nth-child(1){ transform: translateY(-5px); }
  .menu-toggle span:nth-child(2){ transform: translateY(5px); }
  
  .menu-toggle.active span:nth-child(1){ transform: rotate(45deg); }
  .menu-toggle.active span:nth-child(2){ transform: rotate(-45deg); }
  
  /* Overlay (CSS-only: shown when .side has .open via sibling selector) */
  .menu-overlay{
    position: fixed;
    inset: 0;
    background: rgba(2,8,23,.45);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--e-inout);
    z-index: 1100;
  }
  
  /* If you add <div class="menu-overlay"></div> right before </body>,
     this rule will work when sidebar is open on mobile.
     If you don't want overlay, ignore it. */
  .side.open ~ .menu-overlay{ opacity: 1; pointer-events:auto; }
  
  /* --------------------------
     12) Responsive
  -------------------------- */
  @media (min-width: 1400px){
    :root{ --container: 1240px; }
  }

  @media (min-width: 1600px){
    :root{ --container: 1320px; }
  }

  @media (max-width: 1080px){
    .hero-card{ padding: 48px 38px; }
  }
  
  @media (max-width: 980px){
    .layout{ grid-template-columns: 1fr; }
  
    .menu-toggle{ display:flex; }
  
    /* Sidebar becomes full-screen panel */
    .side{
      position: fixed;
      inset: 0;
      height: 100vh;
      width: 100vw;
      border-left: none;
      background: rgba(255,255,255,.92);
      transform: translateX(110%);
      transition: transform var(--t-slow) cubic-bezier(.77,0,.18,1);
      z-index: 1102;
    }
  
    .side.open{ transform: translateX(0); }
  
    .side-inner{
      padding: 22px 18px;
      max-width: 520px;
      margin-left: auto;
      height: 100%;
    }
  
    /* Make nav bigger on mobile */
    .side-link{
      padding: 14px 14px;
      font-size: 18px;
    }
  
    /* Tighten spacing on mobile */
    .container{ padding: 72px 0; }
    .hero .container{ padding: 86px 0 56px; }
  }
  
  @media (max-width: 760px){
    :root{
      --page-photo-focus:50% 28%;
      --glass-blur:14px;
    }

    .grid-3{ grid-template-columns: 1fr; }
    .grid-2{ grid-template-columns: 1fr; }
  
    .hero-card{
      padding: 34px 22px;
      border-radius: 24px;
    }
  
    .title{ font-size: 38px; }
    .h2{ font-size: 30px; }
  
    .bus-card{
      min-width: 78vw;
      height: 190px;
    }
  }
  
  /* --------------------------
     13) Keyframes
  -------------------------- */
  @keyframes heroIn{
    from{ opacity:0; transform: translateY(26px); }
    to{ opacity:1; transform: translateY(0); }
  }

  @keyframes bgDrift{
    0%{ transform: scale(1) translate3d(0,0,0); }
    100%{ transform: scale(1.06) translate3d(-2%, -1%, 0); }
  }

  @keyframes heroGlow{
    0%{ opacity:.35; transform: translate3d(-2%, -1%, 0) scale(1); }
    50%{ opacity:.7; transform: translate3d(2%, 1%, 0) scale(1.04); }
    100%{ opacity:.35; transform: translate3d(-2%, -1%, 0) scale(1); }
  }

  @keyframes heroImageFloat{
    0%{ transform: translate3d(0,0,0); }
    50%{ transform: translate3d(0,-10px,0); }
    100%{ transform: translate3d(0,0,0); }
  }

  @keyframes textIn{
    0%{ opacity:0; transform: translateY(18px); filter: blur(4px); }
    100%{ opacity:1; transform: translateY(0); filter: blur(0); }
  }

  @keyframes cardPop{
    0%{ opacity:0; transform: translateY(28px) scale(.98); filter: blur(6px); }
    65%{ opacity:1; transform: translateY(-6px) scale(1.01); filter: blur(0); }
    100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  @keyframes sectionPulse{
    0%{ background-position: 50% 0%; }
    50%{ background-position: 50% 28%; }
    100%{ background-position: 50% 0%; }
  }

  body.menu-open{overflow:hidden}

  /* ===============================
   MAP SECTION
================================ */
.map-wrap{
    margin-top:24px;
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap:22px;
  }
  
  .map-wrap iframe{
    width:100%;
    height:clamp(320px, 30vw, 440px);
    border:0;
    border-radius:24px;
    box-shadow: var(--sh-card);
  }
  
  .map-info{
    display:grid;
    gap:16px;
  }
  
  .info-card{
    background: var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:18px;
    padding:20px;
    box-shadow: var(--sh-card);
    opacity:0;
    transform: translateY(20px) scale(.98);
    filter: blur(6px);
    transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out), filter var(--t-slow) var(--e-out);
  }

  .info-card.show{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    animation: cardPop .9s var(--e-out) both;
    animation-delay: calc(var(--stagger, 0) * 0.08s);
  }
  
  @media (max-width: 980px){
    .map-wrap{
      grid-template-columns:1fr;
    }
  
    .map-wrap iframe{
      height:320px;
    }
  }
  html{
    scroll-behavior: smooth;
  }
  
  .section{
    scroll-margin-top: 40px;
  }

  .btn{
    position: relative;
    overflow: hidden;
  }
  
  .btn::after{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at var(--x,50%) var(--y,50%), 
      rgba(255,255,255,.35), transparent 60%);
    opacity:0;
    transition:.3s;
  }
  
  .btn:hover::after{
    opacity:1;
  }

  .section{
    transition: background .6s ease;
  }
  
  .section.active{
    background: radial-gradient(
      600px 200px at 50% 0%,
      rgba(0,79,159,.06),
      transparent 60%
    );
    background-size: 140% 140%;
    animation: sectionPulse 10s ease-in-out infinite;
  }

  .bus-card img{
    transition: transform 1s ease;
  }
  
  .bus-card.show img{
    transform: scale(1.08);
  }

  .mobile-cta{
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg,#005FC2,#004F9F);
    color:#fff;
    display:none;
    align-items:center;
    justify-content:center;
    font-weight:800;
    z-index:999;
    box-shadow:0 20px 60px rgba(0,79,159,.4);
  }
  
  @media(max-width:760px){
    .mobile-cta{display:flex}
  }
  /* ===============================
   FLOATING WHATSAPP BUTTON
================================ */
.whatsapp-float{
    position: fixed;
    right: 22px;
    bottom: 50%;
    transform: translateY(50%);
  
    width: 56px;
    height: 56px;
    border-radius: 50%;
  
    background: linear-gradient(135deg, #25D366, #1EBE5D);
    box-shadow: 0 18px 45px rgba(37,211,102,.45);
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    z-index: 1200;
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  
  .whatsapp-float:hover{
    transform: translateY(50%) scale(1.08);
    box-shadow: 0 26px 70px rgba(37,211,102,.55);
  }
  
  .whatsapp-float svg{
    width: 26px;
    height: 26px;
    fill: #fff;
  }
  
  /* мобильная версия — чуть ниже */
  @media(max-width:760px){
    .whatsapp-float{
      bottom: 90px;
      right: 16px;
    }
  }