/* ===== SECTIONS — all page section styles ===== */

/* MARQUEE */
.marqueeStrip { background: linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2)); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marqueeInner { display: inline-block; animation: marqueeScroll 30s linear infinite; }
html[lang=en] .marqueeInner { animation-direction: reverse; }
.marqueeItem { display: inline-block; color: var(--black); font-weight: 700; font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; padding: 0 40px; }
.marqueeItem span { margin-left: 40px; opacity: .6; }

/* HERO */
#hero { position: relative; height: 100vh; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
@supports (height: 100dvh) { #hero { height: 100dvh; } }
@media(max-width:768px){ .heroTitle { font-size: clamp(2rem,8vw,3.5rem); } .heroSub { font-size: .95rem; } .heroBtns { gap: 10px; } .btnGold, .btnOutline { padding: 13px 28px; font-size: .88rem; } }
.heroBg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: kenBurns 18s ease infinite alternate; transition: opacity 1.4s ease; }
.heroOverlay { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(5,5,5,.3) 0%,rgba(5,5,5,.6) 60%,rgba(5,5,5,.95) 100%); }
.heroContent { position: relative; z-index: 1; text-align: center; max-width: 900px; padding: 0 24px; }
.heroEyebrow { font-size: .8rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; opacity: 0; animation: fadeUp .8s ease forwards .5s; }
.heroTitle { font-family: var(--ff); font-size: clamp(2.8rem,7vw,6rem); font-weight: 700; line-height: 1.1; margin-bottom: 24px; opacity: 0; animation: fadeUp .8s ease forwards .8s; }
.heroTitle span { display: block; background: linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.heroSub { font-size: 1.1rem; font-weight: 300; color: rgba(255,255,255,.75); max-width: 600px; margin: 0 auto 40px; opacity: 0; animation: fadeUp .8s ease forwards 1.1s; }
.heroBtns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s ease forwards 1.4s; }
.heroScroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.4); font-size: .75rem; letter-spacing: 2px; }
.scrollArrow { width: 20px; height: 20px; border-right: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); transform: rotate(45deg); animation: bounce 2s ease infinite; }

/* STATS */
#stats { padding: 60px 0; background: var(--dark); border-top: 1px solid rgba(201,168,76,.1); border-bottom: 1px solid rgba(201,168,76,.1); }
.statWrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.statItem { flex: 1; min-width: 140px; text-align: center; padding: 24px 16px; position: relative; }
@media(max-width:480px){ .statItem { min-width: 45%; padding: 18px 10px; } .statNum { font-size: 2.6rem; } }
.statItem:not(:last-child)::after { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: rgba(201,168,76,.2); }
html[lang=en] .statItem:not(:last-child)::after { left: auto; right: 0; }
.statNum { font-family: var(--ff); font-size: 3.5rem; font-weight: 700; background: linear-gradient(135deg,var(--gold3),var(--gold2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 8px; }
.statLabel { font-size: .85rem; font-weight: 300; color: var(--gray); letter-spacing: 1px; text-transform: uppercase; }

/* SERVICES */
#services { background: var(--black); }
.serviceGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 20px; }
@media(max-width:600px){ .serviceGrid { grid-template-columns: 1fr; gap: 14px; } }
.serviceCard { background: var(--dark2); border: 1px solid rgba(201,168,76,.1); border-radius: var(--radius); padding: 36px 28px; position: relative; overflow: hidden; transition: all var(--tr); cursor: default; }
@media(max-width:600px){ .serviceCard { padding: 26px 20px; } }
.serviceCard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(201,168,76,.05),transparent); opacity: 0; transition: opacity var(--tr); }
.serviceCard:hover { transform: translateY(-6px); border-color: rgba(201,168,76,.35); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.serviceCard:hover::before { opacity: 1; }
.svcNum { font-family: var(--ff); font-size: 4rem; font-weight: 700; color: rgba(201,168,76,.1); position: absolute; top: 16px; left: 24px; transition: color var(--tr); line-height: 1; }
html[lang=en] .svcNum { left: auto; right: 24px; }
.serviceCard:hover .svcNum { color: rgba(201,168,76,.25); }
.svcIcon { font-size: 2.2rem; margin-bottom: 20px; display: block; }
.svcTitle { font-family: var(--ff); font-size: 1.4rem; font-weight: 700; margin-bottom: 12px; color: var(--gold); }
.svcDesc { font-size: .9rem; color: var(--gray); line-height: 1.7; }
.svcBadge { display: inline-block; margin-top: 16px; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: rgba(201,168,76,.15); color: var(--gold); border: 1px solid rgba(201,168,76,.3); }

/* WHY US */
#whyus { background: var(--dark2); }
.whyGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: rgba(201,168,76,.08); }
.whyCard { background: var(--dark2); padding: 40px 28px; text-align: center; transition: background var(--tr); }
.whyCard:hover { background: rgba(201,168,76,.04); }
.whyIcon { font-size: 2.4rem; margin-bottom: 16px; display: block; }
.whyTitle { font-family: var(--ff); font-size: 1.2rem; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.whyDesc { color: var(--gray); font-size: .88rem; line-height: 1.65; }
@media(max-width:768px){ .whyGrid { grid-template-columns: repeat(2,1fr); } .whyCard { padding: 28px 18px; } }
@media(max-width:480px){ .whyGrid { grid-template-columns: 1fr; } }

/* VIDEO PRESENTATION */
#videoSec { background: var(--black); }
.vpWrap {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  border: 1px solid rgba(201,168,76,.15);
  max-width: 960px; margin: 0 auto;
}
.vpScreen { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; cursor: pointer; }
.vpSlide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.2s ease;
}
.vpSlide.active { opacity: 1; }
.vpSlide img { width: 100%; height: 100%; object-fit: cover; animation: vpKenBurns 8s ease forwards; }
.vpGrad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.1) 100%); }
.vpTextBox {
  position: absolute; bottom: 60px; right: 0; left: 0;
  padding: 0 24px; z-index: 2;
  animation: vpFadeIn .6s ease;
}
@media(max-width:600px){ .vpTextBox { bottom: 50px; padding: 0 14px; } .vpSlideTitle { font-size: 1.3rem; } .vpSlideSub { font-size: .82rem; } .vpControls { padding: 10px 12px; gap: 6px; } .vpBtn { width: 32px; height: 32px; font-size: .85rem; } .vpPlayBtn { width: 38px; height: 38px; } .vpTimer, .vpLangBtn { display: none; } }
html[lang=en] .vpTextBox { text-align: left; }
.vpSlideLabel { font-size: .75rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.vpSlideTitle { font-family: var(--ff); font-size: clamp(1.6rem,3vw,2.6rem); font-weight: 700; color: #fff; margin-bottom: 8px; }
.vpSlideSub { font-size: .95rem; color: rgba(255,255,255,.7); }
.vpBar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 3; }
.vpBarFill { height: 100%; background: linear-gradient(90deg,var(--gold3),var(--gold)); width: 0; transition: width .1s linear; }
.vpControls {
  background: rgba(5,5,5,.97); padding: 16px 24px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(201,168,76,.1);
}
.vpBtn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.2);
  color: var(--gold); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tr); flex-shrink: 0;
}
.vpBtn:hover { background: var(--gold); color: var(--black); }
.vpPlayBtn { width: 46px; height: 46px; font-size: 1.2rem; }
.vpTimer { font-size: .8rem; color: var(--gray); letter-spacing: 1px; margin: 0 4px; }
.vpDots { display: flex; gap: 6px; margin: 0 auto; }
.vpDot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: all var(--tr); }
.vpDot.active { background: var(--gold); transform: scale(1.3); }
.vpLangBtn { font-size: .75rem; font-weight: 700; letter-spacing: 2px; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(201,168,76,.3); color: var(--gold); transition: all var(--tr); }
.vpLangBtn:hover { background: var(--gold); color: var(--black); }
.vpNarration {
  background: var(--dark); padding: 24px 32px;
  border-top: 1px solid rgba(201,168,76,.08);
  font-size: .95rem; color: rgba(255,255,255,.75); line-height: 1.8;
  text-align: center; min-height: 72px;
  transition: opacity .5s ease;
}

/* GALLERY */
#gallery { background: var(--dark); }
.galleryGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.galleryItem { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; aspect-ratio: 16/10; }
.galleryItem img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .5s ease; }
.galleryItem:hover img { transform: scale(1.07); }
.galleryOverlay { position: absolute; inset: 0; background: rgba(5,5,5,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--tr); }
.galleryItem:hover .galleryOverlay { opacity: 1; }
.galleryOverlay span { font-size: 2rem; color: var(--gold); }
@media(max-width:768px){
  .galleryGrid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .galleryItem { aspect-ratio: 4/3; }
}
@media(max-width:480px){
  .galleryGrid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .galleryItem { aspect-ratio: 1/1; }
}
#lightbox { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.96); align-items: center; justify-content: center; }
#lightbox.open { display: flex; }
#lbImg { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow); }
#lbClose { position: absolute; top: 20px; left: 20px; font-size: 2.5rem; color: var(--gold); cursor: pointer; line-height: 1; z-index: 1; }
#lbPrev, #lbNext { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--gold); padding: 20px; cursor: pointer; background: rgba(0,0,0,.5); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; transition: background var(--tr); }
#lbPrev:hover, #lbNext:hover { background: rgba(201,168,76,.3); }
#lbPrev { right: 20px; } #lbNext { left: 20px; }
html[lang=en] #lbPrev { right: auto; left: 20px; }
html[lang=en] #lbNext { left: auto; right: 20px; }

/* FLEET */
#fleet { background: var(--black); }
.fleetCardsGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.fleetCard { background: var(--dark2); border: 1px solid rgba(201,168,76,.12); border-radius: 16px; overflow: hidden; transition: all .4s cubic-bezier(.4,0,.2,1); }
.fleetCard:hover { transform: translateY(-10px); border-color: rgba(201,168,76,.45); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.15); }
.fleetCardImg { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.fleetCardImg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .6s ease; }
.fleetCard:hover .fleetCardImg img { transform: scale(1.08); }
.fleetCardBadge { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); border: 1px solid rgba(201,168,76,.4); border-radius: 20px; padding: 5px 12px; font-size: .72rem; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
html[lang=en] .fleetCardBadge { right: auto; left: 14px; }
.fleetCardBody { padding: 28px 24px; }
.fleetCardTitle { font-family: var(--ff); font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; color: #fff; }
.fleetCardTitle span { color: var(--gold); }
.fleetCardDesc { font-size: .88rem; color: var(--gray); line-height: 1.65; margin-bottom: 18px; }
.fleetCardFeats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 22px; }
.fleetCardFeats span { font-size: .78rem; color: rgba(201,168,76,.8); }
.fleetCardBtn { display: block; text-align: center; background: linear-gradient(135deg,var(--gold3),var(--gold)); color: var(--black); font-weight: 700; font-size: .85rem; letter-spacing: 1px; padding: 12px 20px; border-radius: 50px; transition: all .3s; }
.fleetCardBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,168,76,.4); }
@media(max-width:640px){ .fleetCardsGrid { grid-template-columns: 1fr; } }
@media(min-width:641px) and (max-width:1050px){ .fleetCardsGrid { grid-template-columns: repeat(2,1fr); } }

.fleetEye { font-size: .75rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.fleetTitle { font-family: var(--ff); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 700; margin-bottom: 20px; }
.fleetDesc { color: var(--gray); line-height: 1.7; margin-bottom: 30px; }
.fleetFeatures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
.ff2 { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.ff2::before { content: '✦'; color: var(--gold); font-size: .7rem; flex-shrink: 0; }

/* CTA STRIP */
.ctaStrip { background: linear-gradient(135deg,var(--gold3) 0%,var(--gold) 50%,var(--gold2) 100%); padding: 80px 24px; text-align: center; position: relative; overflow: hidden; }
.ctaStrip::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); }
.ctaStrip h2 { font-family: var(--ff); font-size: clamp(2rem,4vw,3.2rem); font-weight: 700; color: var(--black); margin-bottom: 12px; position: relative; }
.ctaStrip p { color: rgba(0,0,0,.65); font-size: 1.1rem; margin-bottom: 36px; position: relative; }
.ctaBtns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }

/* HOW IT WORKS */
#how { background: var(--dark); }
.howGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.howCard { text-align: center; padding: 40px 24px; }
.howNum { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg,var(--gold3),var(--gold)); color: var(--black); font-family: var(--ff); font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; box-shadow: 0 8px 30px rgba(201,168,76,.3); }
.howTitle { font-family: var(--ff); font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.howDesc { color: var(--gray); font-size: .9rem; line-height: 1.7; }

/* TESTIMONIALS */
#testimonials { background: var(--black); }
.testGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 24px; }
.testCard { background: var(--dark2); border: 1px solid rgba(201,168,76,.1); border-radius: var(--radius); padding: 36px; position: relative; transition: all var(--tr); }
.testCard:hover { border-color: rgba(201,168,76,.3); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.testStars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 20px; }
.testText { font-size: 1rem; line-height: 1.75; margin-bottom: 24px; color: rgba(255,255,255,.85); font-style: italic; }
.testAuthor { display: flex; align-items: center; gap: 14px; }
.testAvatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--gold3),var(--gold)); display: flex; align-items: center; justify-content: center; font-family: var(--ff); font-size: 1.3rem; font-weight: 700; color: var(--black); flex-shrink: 0; }
.testName { font-weight: 700; font-size: .95rem; }
.testRole { font-size: .8rem; color: var(--gray); }
.testQuote { position: absolute; top: 24px; left: 24px; font-family: var(--ff); font-size: 5rem; line-height: 1; color: rgba(201,168,76,.1); font-weight: 700; }
html[lang=en] .testQuote { left: auto; right: 24px; }

/* AREAS */
#areas { background: var(--black); }
.areasGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media(max-width:640px){ .areasGrid { grid-template-columns: repeat(2,1fr); gap: 10px; } }
.areaCard { background: var(--dark2); border: 1px solid rgba(201,168,76,.1); border-radius: var(--radius); padding: 28px 20px; text-align: center; transition: all var(--tr); }
.areaCard:hover { border-color: rgba(201,168,76,.4); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.areaEmoji { font-size: 2rem; margin-bottom: 12px; display: block; }
.areaName { font-family: var(--ff); font-size: 1.1rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.areaDesc { font-size: .8rem; color: var(--gray); }

/* FAQ */
#faq { background: var(--dark); }
.faqWrap { max-width: 800px; margin: 0 auto; }
.faqItem { border-bottom: 1px solid rgba(201,168,76,.1); }
.faqQ { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; font-size: 1rem; gap: 16px; transition: color var(--tr); }
.faqQ:hover { color: var(--gold); }
.faqArrow { width: 28px; height: 28px; border-radius: 50%; background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .7rem; color: var(--gold); transition: all var(--tr); }
.faqItem.open .faqArrow { background: var(--gold); color: var(--black); transform: rotate(180deg); }
.faqA { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; color: var(--gray); line-height: 1.7; font-size: .95rem; }
.faqItem.open .faqA { max-height: 300px; padding-bottom: 22px; }

/* CONTACT */
#contact { background: var(--black); }
.contactGrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
@media(max-width:768px){ .contactGrid { grid-template-columns: 1fr; gap: 32px; } .contactForm { padding: 24px 20px; } }
.contactEye { font-size: .75rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.contactTitle { font-family: var(--ff); font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 700; margin-bottom: 24px; }
.cInfoItem { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cInfoIcon { width: 44px; height: 44px; border-radius: 50%; background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.cInfoText strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.cInfoText span { font-size: .85rem; color: var(--gray); }
.contactForm { background: var(--dark2); border: 1px solid rgba(201,168,76,.1); border-radius: var(--radius); padding: 40px; }
.formRow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media(max-width:560px){ .formRow { grid-template-columns: 1fr; gap: 0; } }
.formGroup { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.formGroup label { font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }
.formGroup input, .formGroup select, .formGroup textarea { background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.15); border-radius: 8px; padding: 12px 16px; color: var(--light); font-family: var(--fh); font-size: .9rem; transition: border-color var(--tr); }
.formGroup input:focus, .formGroup select:focus, .formGroup textarea:focus { outline: none; border-color: rgba(201,168,76,.5); background: rgba(201,168,76,.04); }
.formGroup select option { background: var(--dark2); }
.formGroup textarea { resize: vertical; min-height: 100px; }
.formSubmit { width: 100%; padding: 16px; border-radius: 50px; background: linear-gradient(135deg,var(--gold3),var(--gold)); color: var(--black); font-weight: 700; font-size: 1rem; letter-spacing: 1px; transition: all var(--tr); box-shadow: 0 6px 24px rgba(201,168,76,.3); margin-top: 8px; }
.formSubmit:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(201,168,76,.5); }

/* AI CHAT WIDGET */
#chatWidget { position: fixed; bottom: 178px; left: 30px; z-index: 889; }
html[lang=en] #chatWidget { left: auto; right: 30px; }
/* mobile: phone button tops at 82+56=138px, so chat starts at 148px */
@media(max-width:768px){ #chatWidget { bottom: 148px; left: 16px; } html[lang=en] #chatWidget { left: auto; right: 16px; } }
#chatTrigger {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg,#6C63FF,#9B59B6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 30px rgba(108,99,255,.5);
  transition: all var(--tr); font-size: 1.8rem; cursor: pointer;
  animation: waEntrance .6s cubic-bezier(.34,1.56,.64,1) forwards 4.6s;
  opacity: 0; transform: scale(0);
}
@media(max-width:768px){ #chatTrigger { width: 56px; height: 56px; font-size: 1.5rem; } .chatTriggerTooltip { display: none; } }
#chatTrigger:hover { transform: scale(1.12); box-shadow: 0 12px 48px rgba(108,99,255,.7); }
.chatTriggerTooltip {
  position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%);
  background: rgba(5,5,5,.92); backdrop-filter: blur(16px);
  border: 1px solid rgba(108,99,255,.4);
  padding: 10px 18px; border-radius: 10px;
  font-size: .85rem; white-space: nowrap; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity var(--tr); color: #9B59B6;
}
html[lang=en] .chatTriggerTooltip { left: auto; right: calc(100% + 16px); }
#chatTrigger:hover .chatTriggerTooltip { opacity: 1; }
#chatPanel {
  position: absolute; bottom: 80px; left: 0;
  width: 340px; max-height: 500px;
  background: var(--dark2); border: 1px solid rgba(108,99,255,.25);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display: none; flex-direction: column; overflow: hidden;
  animation: chatSlideUp .3s ease;
}
html[lang=en] #chatPanel { left: auto; right: 0; }
#chatPanel.open { display: flex; }
.chatHeader {
  background: linear-gradient(135deg,#6C63FF,#9B59B6);
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
}
.chatAvatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.chatHeaderText { flex: 1; }
.chatHeaderName { font-weight: 700; font-size: .95rem; color: #fff; }
.chatHeaderStatus { font-size: .75rem; color: rgba(255,255,255,.7); }
.chatHeaderClose { font-size: 1.3rem; color: rgba(255,255,255,.7); cursor: pointer; transition: color var(--tr); }
.chatHeaderClose:hover { color: #fff; }
.chatMessages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 320px; }
.chatMessages::-webkit-scrollbar { width: 4px; }
.chatMessages::-webkit-scrollbar-track { background: transparent; }
.chatMessages::-webkit-scrollbar-thumb { background: rgba(108,99,255,.3); border-radius: 2px; }
.chatMsg { max-width: 85%; animation: chatBubbleIn .25s ease; }
.chatMsg.bot { align-self: flex-start; }
.chatMsg.user { align-self: flex-end; }
.chatBubble {
  padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.5;
}
.chatMsg.bot .chatBubble { background: rgba(255,255,255,.07); color: var(--light); border-radius: 14px 14px 14px 4px; }
.chatMsg.user .chatBubble { background: linear-gradient(135deg,#6C63FF,#9B59B6); color: #fff; border-radius: 14px 14px 4px 14px; }
.chatOptions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.chatOpt {
  padding: 7px 13px; border-radius: 20px; font-size: .82rem; font-weight: 600;
  border: 1px solid rgba(108,99,255,.4); color: #9B59B6;
  background: rgba(108,99,255,.08); cursor: pointer; transition: all var(--tr);
}
.chatOpt:hover { background: linear-gradient(135deg,#6C63FF,#9B59B6); color: #fff; border-color: transparent; }
.chatTyping { display: flex; gap: 4px; align-items: center; padding: 10px 14px; background: rgba(255,255,255,.07); border-radius: 14px 14px 14px 4px; width: fit-content; }
.chatTyping span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); animation: chatTyping 1.2s ease infinite; }
.chatTyping span:nth-child(2) { animation-delay: .2s; }
.chatTyping span:nth-child(3) { animation-delay: .4s; }
.chatFooter { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 8px; }
.chatInput { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(108,99,255,.2); border-radius: 20px; padding: 9px 14px; color: var(--light); font-family: var(--fh); font-size: .85rem; }
.chatInput:focus { outline: none; border-color: rgba(108,99,255,.5); }
.chatSend { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#6C63FF,#9B59B6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; transition: all var(--tr); flex-shrink: 0; }
.chatSend:hover { transform: scale(1.1); }

/* Responsive sections */
@media(max-width: 1024px) {
  .fleetGrid { grid-template-columns: 1fr; gap: 40px; }
  .contactGrid { grid-template-columns: 1fr; gap: 40px; }
  .areasGrid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width: 768px) {
  .galleryGrid { grid-template-columns: repeat(2,1fr); }
  .howGrid { grid-template-columns: 1fr; gap: 0; }
  .howCard { padding: 30px 16px; }
  .whyGrid { grid-template-columns: 1fr; gap: 0; }
  .whyCard { padding: 36px 24px; }
  .formRow { grid-template-columns: 1fr; }
  .fleetFeatures { grid-template-columns: 1fr; }
  .vpTextBox { padding: 0 20px; bottom: 56px; }
  .vpControls { padding: 12px 16px; gap: 8px; }
  #chatPanel { width: 300px; }
  #chatWidget { bottom: 262px; }
}
@media(max-width: 480px) {
  .galleryGrid { grid-template-columns: 1fr; }
  .statWrap { flex-direction: column; gap: 0; }
  .statItem::after { display: none !important; }
  .navLogoText { font-size: 1rem; }
  .heroTitle { font-size: 2.2rem; }
  .areasGrid { grid-template-columns: 1fr 1fr; }
}