/* =========================================
   1. CSS VARIABLES & RESET
   ========================================= */
:root {
    --color-navy:   #0f172a;
    --color-blue:   #0EA5E9;
    --color-blue-dark: #0284C7;
    --color-amber:  #F59E0B;
    --color-light:  #F8FAFC;
    --color-white:  #FFFFFF;
    --color-text:   #1e293b;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;

    --gradient-hero:   linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-accent: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);

    --font-display: 'Exo 2', sans-serif;
    --font-body:    'DM Sans', sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-glow: 0 0 20px rgba(14,165,233,0.3);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-light); line-height:1.6; overflow-x:hidden; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight:700; line-height:1.1; color: var(--color-navy); }
a { text-decoration:none; color:inherit; transition:0.2s; }
ul { list-style:none; }
img { display:block; max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }
.text-center { text-align:center; }
.text-blue { color: var(--color-blue); }
.text-amber { color: var(--color-amber); }
.text-muted { color: var(--color-text-muted); }
.bg-navy { background-color: var(--color-navy); color:white; }
.mb-2 { margin-bottom:1rem; }
.mb-4 { margin-bottom:2rem; }
.section { padding: 4rem 0; }

/* ─── BUTTONS ─── */
.btn {
    display: inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding: 0.8rem 2rem; border-radius: var(--radius-sm);
    font-weight:700; cursor:pointer; border:none;
    font-family: var(--font-display); text-transform:uppercase; letter-spacing:0.5px;
    transition: transform 0.2s, box-shadow 0.2s; font-size:0.9rem;
}
.btn-primary { background: var(--gradient-accent); color:white; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(14,165,233,0.4); }
.btn-secondary { background:white; color: var(--color-navy); border:2px solid var(--color-navy); }
.btn-secondary:hover { background: var(--color-navy); color:white; }
.btn-whatsapp { background:#25D366; color:white; }
.btn-whatsapp:hover { background:#22c55e; transform:translateY(-2px); }

/* ─── NAVBAR ─── */
.navbar {
    position: sticky; top:0; z-index:1000;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    height: 78px; display:flex; align-items:center;
}
.nav-inner { display:flex; justify-content:space-between; align-items:center; width:100%; }
.logo { font-family: var(--font-display); font-weight:800; font-size:1.1rem; color: var(--color-navy); display:flex; align-items:center; gap:0.75rem; letter-spacing:-0.01em; }
.logo img { height:42px; width:auto; }
.logo-text { line-height:1.2; color: #000000; }
.logo-text span { color: #000000; }
.nav-links { display:flex; gap:1.75rem; align-items:center; }
.nav-links a { font-weight:500; color: var(--color-navy); font-size:0.9rem; }
.nav-links a:hover { color: var(--color-blue); }
.hamburger { display:none; cursor:pointer; font-size:1.5rem; color: var(--color-navy); background:none; border:none; padding:4px; }

/* Mobile Nav */
.mobile-nav {
    display:none; position:fixed; top:78px; left:0; right:0;
    background:white; border-bottom:2px solid var(--color-blue);
    padding:1.5rem; z-index:999; flex-direction:column; gap:0;
    box-shadow: var(--shadow-lg);
}
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:0.85rem 0; font-weight:600; color: var(--color-navy); border-bottom:1px solid var(--color-border); font-size:0.95rem; }
.mobile-nav a:hover { color: var(--color-blue); }
.mobile-nav a:last-child { border:none; margin-top:0.75rem; }

/* ─── HERO ─── */
.hero {
    background: var(--gradient-hero);
    background-image:
        linear-gradient(135deg, rgba(15,23,42,0.88) 0%, rgba(30,41,59,0.82) 100%),
        url('../../assets/Image/imgi_47_Gashi-Transporte_Flotte.jpg');
    background-size: cover;
    background-position: center;
    color:white;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    position:relative; overflow:hidden;
}
.hero-pattern {
    position:absolute; inset:0;
    background-image: radial-gradient(circle at 15% 50%, rgba(14,165,233,0.12) 0%, transparent 55%);
    pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1.4fr 0.6fr; gap:4rem; align-items:center; position:relative; z-index:1; }
.hero h1 { color:white; font-size:clamp(2rem, 5vw, 4rem); margin-bottom:1.25rem; line-height:1.1; text-transform:uppercase; }
.hero-sub { font-size:1.1rem; color:#cbd5e1; margin-bottom:1.75rem; max-width:650px; line-height:1.6; }
.hero-badges {
    display:flex; flex-wrap:wrap; gap:1.25rem;
    margin-bottom:2rem; padding:1rem 0;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.badge-item { display:flex; align-items:center; gap:0.5rem; font-weight:500; font-size:0.9rem; }
.badge-icon { color: var(--color-amber); }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }

/* Status card */
.hero-visual { position:relative; height:380px; display:flex; align-items:center; justify-content:center; }
.status-card {
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.2);
    padding:2rem; border-radius: var(--radius-lg);
    width:100%; max-width:360px;
    box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
}
.driving-animation { height:4px; width:100%; background:rgba(255,255,255,0.1); border-radius:2px; margin:1.5rem 0; overflow:hidden; position:relative; }
.driving-bar { height:100%; width:30%; background: var(--color-blue); position:absolute; animation:drive 2.2s ease-in-out infinite; border-radius:2px; }
@keyframes drive { 0%{left:-30%} 100%{left:100%} }

/* ─── LOGO SLIDER (inside hero) ─── */
.logo-slider-section {border-top:1px solid rgba(255,255,255,0.08); padding:1.75rem 0; overflow:hidden; }
.logo-slider-label { text-align:center; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:rgba(255,255,255,0.4); margin-bottom:1.4rem; font-family:var(--font-display); }
.logo-track-wrap { position:relative; overflow:hidden; }
.logo-track-wrap::before,
.logo-track-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.logo-track-wrap::before { left:0;  background:linear-gradient(to right, rgba(0,0,0,0.38), transparent); }
.logo-track-wrap::after  { right:0; background:linear-gradient(to left,  rgba(0,0,0,0.38), transparent); }
.logo-track { display:flex; gap:0; width:max-content; animation:logoScroll 32s linear infinite; }
.logo-track:hover { animation-play-state:paused; }
@keyframes logoScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-25%)} }
.logo-item { display:flex; align-items:center; justify-content:center; padding:0 0.9rem; height:92px; flex-shrink:0; }
.logo-pill { display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:0.5rem 1.25rem; white-space:nowrap; transition:opacity 0.2s, transform 0.2s; height:48px; }
.logo-pill:hover { opacity:0.85; transform:scale(1.04); }
.logo-pill img { height:28px; width:auto; max-width:140px; object-fit:contain; display:block; }
.logo-pill-icon { font-size:1.1rem; flex-shrink:0; }
.logo-pill-name { font-size:0.8rem; font-weight:700; color:rgba(255,255,255,0.88); font-family:var(--font-display); letter-spacing:0.01em; }
.logo-pill-sector { font-size:0.66rem; color:rgba(255,255,255,0.4); margin-left:0.05rem; }

/* ─── STATS ─── */
.stats-section { background:white; border-bottom:1px solid var(--color-border); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-box {
    padding:2rem; text-align:center;
    border-right:1px solid var(--color-border);
    border-bottom:3px solid transparent;
    transition:0.2s;
}
.stat-box:last-child { border-right:none; }
.stat-box:hover { border-bottom-color: var(--color-blue); }
.stat-value { font-size:2.5rem; font-weight:800; color: var(--color-navy); display:block; margin-bottom:0.4rem; font-family: var(--font-display); }
.stat-label { font-size:0.8rem; color: var(--color-text-muted); text-transform:uppercase; letter-spacing:0.06em; }

/* ─── SECTION HEADINGS ─── */
.section-eyebrow { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color: var(--color-blue); margin-bottom:0.5rem; display:block; }
.section-title { font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:1rem; }
.section-sub { color: var(--color-text-muted); max-width:620px; font-size:1rem; margin-bottom:2.5rem; }

/* ─── ÜBER UNS ─── */
.about-section { background: var(--color-light); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-img { position:relative; }
.about-img img { width:100%; height:auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.about-img-badge {
    position:absolute; bottom:-16px; right:-16px;
    background: var(--color-blue); color:white;
    font-family: var(--font-display); font-weight:700; font-size:0.82rem;
    padding:1rem 1.4rem; border-radius: var(--radius-sm); text-transform:uppercase; letter-spacing:0.03em;
    box-shadow: var(--shadow-glow);
}
.about-points { display:flex; flex-direction:column; gap:1.25rem; margin-top:1.75rem; }
.about-point { display:flex; gap:0.9rem; align-items:flex-start; }
.about-check { width:22px; height:22px; background: var(--gradient-accent); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:0.7rem; font-weight:700; flex-shrink:0; margin-top:2px; }
.about-point h4 { font-size:0.95rem; color: var(--color-navy); margin-bottom:0.25rem; }
.about-point p { font-size:0.85rem; color: var(--color-text-muted); line-height:1.6; }

/* ─── SERVICES ─── */
.services-section { background:white; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; }
.service-card { background:white; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition:0.3s; display:flex; flex-direction:column; border:1px solid var(--color-blue-dark); position:relative; }
.service-card:hover { transform:translateY(-5px); box-shadow: var(--shadow-lg); }
.service-header { background: var(--color-blue-dark); color:white; padding:1.25rem 1.5rem; display:flex; align-items:center; gap:0.9rem; }
.service-icon { font-size:1.8rem; }
img.service-icon { width:2.4rem; height:2.4rem; object-fit:contain; flex-shrink:0; }
.service-header h3 { color:white; font-size:1rem; }
.service-card-badge {
    position:absolute; top:10px; right:10px;
    background:#EF4444; color:#fff;
    font-size:0.6rem; font-weight:800; padding:3px 8px;
    border-radius:20px; letter-spacing:0.08em; text-transform:uppercase;
    font-family:var(--font-display); box-shadow:0 2px 6px rgba(239,68,68,0.4);
}
.service-body { padding:1.5rem; flex:1; }
.service-body p { font-size:0.88rem; color: var(--color-text-muted); line-height:1.65; }
.service-details { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--color-border); }
.service-detail-item { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; font-size:0.82rem; color: var(--color-text-muted); }

/* ─── HOW IT WORKS ─── */
.process-section { background: var(--color-light); }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; }

/* Animated timeline line */
.process-line-track {
    position:absolute; top:26px;
    left:calc(12.5% + 26px); right:calc(12.5% - 26px);
    height:3px; background:rgba(14,165,233,0.12);
    border-radius:99px; z-index:0; overflow:visible;
}
.process-line-fill {
    height:100%; width:0;
    background:linear-gradient(to right, #0ea5e9 0%, #38bdf8 50%, #22c55e 100%);
    border-radius:99px;
    transition:width 2.6s cubic-bezier(0.4,0,0.2,1);
}
.process-line-fill.go { width:100%; }
.process-line-dot {
    position:absolute; top:50%; left:0;
    width:13px; height:13px; border-radius:50%;
    background:#0ea5e9;
    box-shadow:0 0 0 4px rgba(14,165,233,0.25), 0 0 16px rgba(14,165,233,0.7);
    transform:translate(-50%,-50%);
    transition:left 2.6s cubic-bezier(0.4,0,0.2,1), background 0.5s, box-shadow 0.5s;
    z-index:2;
}
.process-line-dot.go {
    left:100%; background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,0.3), 0 0 16px rgba(34,197,94,0.7);
}

/* Step states */
.step-item { text-align:center; position:relative; z-index:1; }
.step-number {
    width:52px; height:52px;
    background:linear-gradient(135deg,#cbd5e1,#94a3b8);
    color:white; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.3rem; margin:0 auto 1.25rem;
    box-shadow:0 0 0 10px rgba(148,163,184,0.08);
    font-family:var(--font-display);
    transition:background 0.5s, box-shadow 0.5s, transform 0.4s;
}
.step-item.active .step-number {
    background:var(--gradient-accent);
    box-shadow:0 0 0 10px rgba(14,165,233,0.15);
    animation:stepPop 0.45s ease forwards;
}
.step-item:last-child.active .step-number {
    background:linear-gradient(135deg,#16a34a,#22c55e);
    box-shadow:0 0 0 12px rgba(34,197,94,0.2);
}
@keyframes stepPop {
    0%   { transform:scale(1); }
    50%  { transform:scale(1.22); }
    100% { transform:scale(1.08); }
}
.step-title { font-weight:700; margin-bottom:0.5rem; color:var(--color-navy); font-size:1rem; }
.step-text  { font-size:0.85rem; color:var(--color-text-muted); }

/* Delivery reveal card */
.delivery-reveal {
    display:flex; justify-content:center;
    margin-top:2.5rem;
    opacity:0; transform:translateY(22px) scale(0.96);
    transition:opacity 0.65s ease, transform 0.65s ease;
    pointer-events:none;
}
.delivery-reveal.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.delivery-card {
    background:white;
    border:2px solid rgba(34,197,94,0.3);
    border-radius:20px; padding:1.25rem 2rem;
    display:flex; align-items:center; gap:1.25rem;
    box-shadow:0 8px 40px rgba(34,197,94,0.15);
}
.delivery-icon {
    font-size:3rem; line-height:1; flex-shrink:0;
    animation:thumbIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes thumbIn {
    0%   { transform:rotate(-25deg) scale(0.5); opacity:0; }
    70%  { transform:rotate(8deg) scale(1.15); opacity:1; }
    100% { transform:rotate(0deg) scale(1); }
}
.delivery-info { display:flex; flex-direction:column; gap:0.2rem; }
.delivery-title { font-weight:800; font-size:1.05rem; color:#16a34a; font-family:var(--font-display); }
.delivery-sub   { font-size:0.83rem; color:var(--color-text-muted); }

/* Mobile: hide line, show static circles */
@media (max-width:700px) {
    .process-steps { grid-template-columns:1fr 1fr; }
    .process-line-track { display:none; }
    .step-number { background:var(--gradient-accent) !important; transform:none !important; box-shadow:0 0 0 10px rgba(14,165,233,0.1) !important; }
    .step-item:last-child .step-number { background:linear-gradient(135deg,#16a34a,#22c55e) !important; }
}

/* ─── PRICING ─── */
.pricing-section { background: var(--color-navy); color:white; padding-bottom:5rem; }
.pricing-section h2 { color:white; }
/* ─── PRICE CALCULATOR ─── */
.calc-box { background:white; border-radius:var(--radius-lg); overflow:hidden; color:var(--color-text); margin-top:2.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,0.45); }
.calc-grid { display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
.calc-inputs { padding:2rem 2.25rem; }
.calc-inputs h3 { font-size:1.1rem; margin-bottom:1.75rem; color:var(--color-navy); }
.calc-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--color-navy); margin-bottom:0.4rem; display:block; font-family:var(--font-display); }
.calc-select { width:100%; border:2px solid var(--color-border); border-radius:var(--radius-sm); padding:0.65rem 0.85rem; font-size:0.88rem; font-family:var(--font-body); color:var(--color-text); background:white; outline:none; transition:border-color 0.2s; margin-bottom:1.25rem; cursor:pointer; }
.calc-select:focus { border-color:var(--color-blue); }
.calc-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background: linear-gradient(to right, var(--color-blue) 0%, var(--color-border) 0%); outline:none; transition:background 0.15s; cursor:pointer; }
.calc-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--color-blue); cursor:pointer; box-shadow:0 2px 8px rgba(14,165,233,0.5); }
.calc-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--color-blue); cursor:pointer; border:none; box-shadow:0 2px 8px rgba(14,165,233,0.5); }
.calc-range-row { display:flex; justify-content:space-between; align-items:center; margin:0.4rem 0 1.35rem; font-size:0.78rem; color:var(--color-text-muted); }
.calc-range-val { font-size:1rem; font-weight:800; color:var(--color-blue); font-family:var(--font-display); }
.calc-check-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:1.25rem; }
.calc-check-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--color-blue); cursor:pointer; flex-shrink:0; }
.calc-check-row label { font-size:0.85rem; color:var(--color-text); cursor:pointer; }
.calc-footer-note { font-size:0.74rem; color:var(--color-text-muted); line-height:1.55; border-top:1px solid var(--color-border); padding-top:1rem; margin-top:0.25rem; }
/* Result panel */
.calc-result { background:var(--color-navy); padding:2rem 2.25rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:0; }
.calc-zone-pill { display:inline-block; background:var(--color-blue); color:white; font-size:0.68rem; font-weight:800; padding:4px 14px; border-radius:20px; margin-bottom:1rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.06em; }
.calc-price-label { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.45); margin-bottom:0.35rem; }
.calc-price-main { font-size:3.2rem; font-weight:800; color:white; font-family:var(--font-display); line-height:1; margin-bottom:0.3rem; }
.calc-price-vat { font-size:0.75rem; color:rgba(255,255,255,0.4); margin-bottom:1.25rem; }
.calc-breakdown { width:100%; background:rgba(255,255,255,0.06); border-radius:8px; padding:0.85rem 1rem; font-size:0.8rem; color:rgba(255,255,255,0.75); line-height:2; text-align:left; margin-bottom:1.25rem; }
.calc-breakdown-row { display:flex; justify-content:space-between; gap:1rem; }
.calc-breakdown-row.total { border-top:1px solid rgba(255,255,255,0.15); margin-top:0.4rem; padding-top:0.4rem; font-weight:700; color:white; }
.calc-disclaimer { font-size:0.7rem; color:rgba(255,255,255,0.3); line-height:1.5; margin-bottom:1.25rem; }
.calc-cta-col { display:flex; flex-direction:column; gap:0.55rem; width:100%; }
.price-value { font-weight:800; color: var(--color-blue); font-size:1.05rem; font-family: var(--font-display); }
.price-zone { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color: var(--color-blue); display:block; margin-bottom:2px; }
.business-box { margin-top:2.5rem; background:rgba(255,255,255,0.08); padding:2rem; border-radius: var(--radius-lg); border:1px solid rgba(255,255,255,0.15); }
.business-box h3 { color:white; margin-bottom:0.75rem; font-size:1.1rem; }
.business-box p { color:#cbd5e1; margin-bottom:1.25rem; font-size:0.9rem; }
.business-perks { display:flex; gap:2rem; flex-wrap:wrap; }
.business-perk { display:flex; align-items:center; gap:0.5rem; color:white; font-size:0.9rem; }

/* ─── QUOTES SLIDER ─── */
.quotes-section { background:var(--color-navy); padding:5rem 0; overflow:hidden; }
.quotes-section h2 { color:white; }
.quotes-section .section-eyebrow { color:var(--color-blue); }
.quotes-viewport { overflow:hidden; position:relative; }
.quotes-track { display:flex; transition:transform 0.55s cubic-bezier(0.4,0,0.2,1); will-change:transform; }
.quote-slide { flex:0 0 100%; padding:0 0.5rem; box-sizing:border-box; }
.quote-card {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius-lg);
    padding:2.5rem 2.75rem;
    position:relative;
    max-width:780px;
    margin:0 auto;
}
.quote-mark {
    font-size:5rem; line-height:0.6; color:var(--color-blue);
    font-family:Georgia,serif; position:absolute; top:1.5rem; left:2rem;
    opacity:0.35; pointer-events:none;
}
.quote-text {
    font-size:1.15rem; color:rgba(255,255,255,0.9);
    line-height:1.75; font-style:italic;
    margin-bottom:2rem; padding-top:1.25rem;
    font-family:var(--font-body);
}
.quote-author { display:flex; align-items:center; gap:1rem; }
.quote-avatar {
    width:48px; height:48px; border-radius:50%;
    background:var(--gradient-accent);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; flex-shrink:0;
}
.quote-author-info { display:flex; flex-direction:column; gap:0.15rem; }
.quote-author-name { color:white; font-weight:700; font-size:0.9rem; font-family:var(--font-display); }
.quote-author-role { color:rgba(255,255,255,0.45); font-size:0.78rem; }
.quote-stars { color:var(--color-amber); font-size:0.9rem; letter-spacing:0.05em; margin-left:auto; align-self:center; }
/* Controls */
.quotes-controls { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:2.5rem; }
.quotes-btn {
    width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,0.2);
    background:transparent; color:white; font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s, border-color 0.2s;
}
.quotes-btn:hover { background:var(--color-blue); border-color:var(--color-blue); }
.quotes-dots { display:flex; gap:0.5rem; }
.quotes-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,0.25); border:none; padding:0;
    cursor:pointer; transition:background 0.25s, transform 0.25s;
}
.quotes-dot.active { background:var(--color-blue); transform:scale(1.35); }

/* ─── WHY US ─── */
.why-section { background:white; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:2rem; }
.why-card { text-align:center; padding:2rem; border-radius: var(--radius-md); border:1px solid var(--color-border); transition:0.3s; }
.why-card:hover { border-color: var(--color-blue); box-shadow: var(--shadow-md); transform:translateY(-3px); }
.why-icon { font-size:2.8rem; margin-bottom:1rem; }
.why-card h3 { font-size:1.1rem; margin-bottom:0.5rem; }
.why-card p { font-size:0.85rem; color: var(--color-text-muted); }

/* ─── FLEET ─── */
.fleet-section { background: hsl(222, 47%, 11%); }
.fleet-section .section-eyebrow { color: var(--color-blue); }
.fleet-section .section-title { color: white; }
.fleet-section .section-sub { color: #94a3b8; }
.fleet-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.5rem; margin-top:2.5rem; }
.fleet-card { background:rgba(255,255,255,0.05); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid rgba(14,165,233,0.2); transition:0.3s; }
.fleet-card:hover { transform:translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-blue); }
.fleet-card img { width:100%; height:auto; object-fit:contain; }
.fleet-card-body { padding:1.25rem; }
.fleet-card-body h3 { font-size:0.9rem; color: white; margin-bottom:0.75rem; }
.fleet-specs { display:flex; flex-direction:column; gap:0.3rem; }
.fleet-spec { display:flex; justify-content:space-between; font-size:0.78rem; }
.fleet-spec span:first-child { color: #94a3b8; }
.fleet-spec span:last-child { font-weight:700; color: var(--color-blue); }

/* ─── FAQ ─── */
.faq-section { background:white; }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--color-border); }
.faq-btn { width:100%; text-align:left; padding:1.25rem 0; background:none; border:none; cursor:pointer; font-weight:700; font-size:1rem; color: var(--color-navy); display:flex; justify-content:space-between; align-items:center; font-family: var(--font-display); }
.faq-btn span { font-size:1.2rem; transition:0.3s; }
.faq-btn.open span { transform:rotate(45deg); }
.faq-panel { max-height:0; overflow:hidden; transition:0.3s ease-out; }
.faq-panel p { padding-bottom:1.25rem; color: var(--color-text-muted); font-size:0.92rem; line-height:1.7; }

/* ─── KONTAKT / AUFTRAG ─── */
.contact-section { background: hsl(222, 47%, 11%); }
.contact-section h2 { color: white; }
.contact-section .contact-item h4 { color: var(--color-blue); }
.contact-section .contact-item a, .contact-section .contact-item p { color: #94a3b8; }
.contact-section .form-label { color: #cbd5e1; }
.contact-section .form-input, .contact-section .form-select, .contact-section textarea.form-input { background: rgba(255,255,255,0.05); border-color: rgba(14,165,233,0.25); color: white; }
.contact-section .form-input::placeholder, .contact-section textarea.form-input::placeholder { color: #64748b; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info-list { display:flex; flex-direction:column; gap:1.25rem; margin-top:1.75rem; }
.contact-item { display:flex; gap:0.9rem; align-items:flex-start; }
.contact-icon { width:40px; height:40px; background: var(--gradient-accent); border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.contact-item h4 { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--color-blue); margin-bottom:0.2rem; }
.contact-item p, .contact-item a { font-size:0.92rem; color: var(--color-text); }
.contact-item a:hover { color: var(--color-blue); }
.contact-cta-row { display:flex; flex-direction:column; gap:0.75rem; margin-top:2rem; }
.contact-form-box { background:white; padding:2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:0.85rem; font-weight:700; margin-bottom:0.4rem; color: var(--color-navy); font-family: var(--font-display); }
.form-input, .form-select { width:100%; padding:0.75rem 0.9rem; border:1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size:0.95rem; color: var(--color-text); background:white; outline:none; transition:0.2s; }
.form-input:focus, .form-select:focus { border-color: var(--color-blue); box-shadow:0 0 0 3px rgba(14,165,233,0.15); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-note { text-align:center; margin-top:0.75rem; font-size:0.8rem; color: var(--color-text-muted); }

/* ─── CHATBOT SIDEBAR TAB ─── */
.chat-sidebar-tab {
    position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:9000; background:var(--gradient-accent); border:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:0.55rem; padding:1.1rem 0.65rem; border-radius:12px 0 0 12px;
    box-shadow:-4px 0 24px rgba(14,165,233,0.45); transition:padding 0.25s, box-shadow 0.25s;
}
.chat-sidebar-tab:hover { padding-left:0.9rem; box-shadow:-6px 0 32px rgba(14,165,233,0.65); }
.chat-sidebar-tab svg { width:22px; height:22px; fill:white; flex-shrink:0; }
.chat-sidebar-label {
    color:white; font-size:0.68rem; font-weight:800; letter-spacing:0.14em;
    text-transform:uppercase; font-family:var(--font-display);
    writing-mode:vertical-rl; transform:rotate(180deg);
}
.chat-sidebar-badge {
    position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    background:var(--color-amber); color:#000;
    font-size:0.58rem; font-weight:800; padding:2px 6px;
    border-radius:20px; font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;
}
/* ─── CHATBOT POPOVER ─── */
.chatbot-window {
    position:fixed; right:54px; top:50%;
    transform:translateY(-50%) translateX(16px);
    opacity:0; pointer-events:none;
    width:360px; max-width:calc(100vw - 80px);
    background:white; border-radius:var(--radius-lg);
    box-shadow:-8px 8px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    z-index:8999; display:flex; flex-direction:column; overflow:hidden;
    border:1px solid var(--color-border);
    transition:opacity 0.25s ease, transform 0.25s ease;
}
.chatbot-window.open {
    opacity:1; pointer-events:all;
    transform:translateY(-50%) translateX(0);
}
@media (max-width:600px) {
    .chat-sidebar-tab { top:auto; bottom:0; right:0; transform:none;
        flex-direction:row; padding:0.7rem 1rem; border-radius:12px 12px 0 0; border-top:none;
        box-shadow:0 -4px 24px rgba(14,165,233,0.45); }
    .chat-sidebar-tab:hover { padding-left:1rem; }
    .chat-sidebar-label { writing-mode:horizontal-tb; transform:none; }
    .chatbot-window { right:0; top:auto; bottom:54px;
        transform:translateY(16px); max-width:100vw; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
    .chatbot-window.open { transform:translateY(0); }
}
.chat-header { background: var(--gradient-accent); padding:1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; }
.chat-header-left { display:flex; align-items:center; gap:0.75rem; }
.chat-avatar { width:36px; height:36px; background:rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.chat-header-text h4 { font-size:0.85rem; font-weight:700; color:white; text-transform:none; letter-spacing:0; font-family: var(--font-body); }
.chat-header-text span { font-size:0.7rem; color:rgba(255,255,255,0.75); }
.chat-close { background:none; border:none; cursor:pointer; font-size:1.4rem; color:white; line-height:1; padding:0; }
.chat-body { padding:1.25rem; min-height:160px; display:flex; flex-direction:column; gap:0.85rem; }
.chat-msg { background: var(--color-light); border:1px solid var(--color-border); padding:0.75rem 1rem; font-size:0.85rem; line-height:1.5; border-radius:4px 12px 12px 12px; max-width:88%; }
.chat-opts { display:flex; flex-wrap:wrap; gap:0.4rem; }
.chat-opt {
    display:inline-flex; align-items:center;
    background: var(--color-light); border:1px solid var(--color-blue);
    color: var(--color-blue); padding:0.4rem 0.85rem;
    font-size:0.78rem; font-family: var(--font-display); font-weight:600;
    cursor:pointer; transition:0.2s; border-radius: var(--radius-sm); text-transform:uppercase; letter-spacing:0.03em;
}
.chat-opt:hover { background: var(--color-blue); color:white; }
.chat-input-row { display:flex; gap:0.5rem; }
.chat-input { flex:1; border:1px solid var(--color-border); padding:0.6rem 0.75rem; font-size:0.82rem; border-radius: var(--radius-sm); outline:none; font-family: var(--font-body); }
.chat-input:focus { border-color: var(--color-blue); }
.chat-submit { background: var(--gradient-accent); border:none; color:white; padding:0.6rem 1rem; font-weight:700; font-size:0.78rem; cursor:pointer; font-family: var(--font-display); border-radius: var(--radius-sm); text-transform:uppercase; transition:0.2s; }
.chat-submit:hover { opacity:0.9; }
.chat-progress { display:flex; gap:3px; padding:0 1.25rem 1rem; }
.chat-dot { flex:1; height:3px; background: var(--color-border); border-radius:2px; transition:0.3s; }
.chat-dot.active { background: var(--color-blue); }

/* ── GASHI FOOTER ── */
.gashi-footer { background:var(--color-navy); border-top:3px solid var(--color-blue); padding:3.5rem 1.5rem 2rem; font-family:var(--font-body); }
.gashi-footer-inner { max-width:1200px; margin:0 auto; }
.gashi-footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.gashi-footer-brand img { height:3rem; width:auto; margin-bottom:0.75rem; display:block; }
.gashi-footer-brand p { color:#94a3b8; font-size:0.82rem; line-height:1.65; margin-bottom:1.25rem; }
.gashi-footer-col-title { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-blue); margin-bottom:1rem; }
.gashi-footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.55rem; }
.gashi-footer-links li a { color:#94a3b8; font-size:0.83rem; text-decoration:none; transition:color 0.2s; }
.gashi-footer-links li a:hover { color:#fff; }
.gashi-footer-contact p { color:#94a3b8; font-size:0.83rem; line-height:1.7; margin:0; }
.gashi-footer-contact a { color:#94a3b8; text-decoration:none; transition:color 0.2s; }
.gashi-footer-contact a:hover { color:#fff; }
.gashi-footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.gashi-footer-copy { color:#64748b; font-size:0.78rem; margin:0; }
.gashi-footer-legal { display:flex; gap:1.5rem; }
.gashi-footer-legal a { color:#64748b; font-size:0.75rem; text-decoration:none; transition:color 0.2s; }
.gashi-footer-legal a:hover { color:#fff; }

/* ─── TEAM ─── */
.team-section { background: var(--color-navy); }
.team-section .section-title { color: white; }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.team-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; }
.team-card-bg { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.55s ease; }
.team-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 4.5rem; color: rgba(255,255,255,0.12); transition: transform 0.55s ease; }
.team-card:hover .team-card-bg,
.team-card:hover .team-placeholder { transform: scale(1.06); }
.team-card-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(8,14,32,0.97) 0%, rgba(8,14,32,0.5) 42%, transparent 100%);
    transition: background 0.45s ease;
}
.team-card:hover .team-card-overlay {
    background: linear-gradient(to top, rgba(2,66,168,0.96) 0%, rgba(14,105,210,0.62) 48%, rgba(8,18,48,0.12) 100%);
}
.team-card-role { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-blue); margin-bottom: 0.3rem; font-family: var(--font-display); transition: color 0.3s; }
.team-card:hover .team-card-role { color: #93c5fd; }
.team-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: white; line-height: 1.2; margin-bottom: 0; }
.team-card-bio { font-size: 0.81rem; color: rgba(255,255,255,0.82); line-height: 1.65; max-height: 0; overflow-y: auto; opacity: 0; margin-top: 0; transition: max-height 0.45s ease, opacity 0.4s ease, margin-top 0.3s ease; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.team-card-bio::-webkit-scrollbar { width: 3px; }
.team-card-bio::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 99px; }
.team-card:hover .team-card-bio { max-height: 180px; opacity: 1; margin-top: 0.65rem; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

/* ─── BADGE ─── */
.aijanta-badge { background:rgba(255,255,255,0.05); padding:5px 12px 5px 10px; border-radius:99px; display:flex; align-items:center; gap:8px; font-family:var(--font-body); border:1px solid rgba(255,255,255,0.12); text-decoration:none; transition:opacity 0.2s; }
.aijanta-badge:hover { opacity:0.85; }
.aijanta-badge-icon { font-size:1rem; line-height:1; }
.aijanta-badge-text { display:flex; flex-direction:column; gap:0; }
.aijanta-badge-label { color:#64748b; font-size:0.6rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; line-height:1.2; }
.aijanta-badge-name { color:#fff; font-size:0.78rem; font-weight:700; line-height:1.2; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
    .faq-cols { grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 900px) {
    .nav-links { display:none; }
    .hamburger { display:block; }
    .hero-grid { grid-template-columns:1fr; text-align:center; }
    .hero-sub, .hero-cta, .hero-badges { justify-content:center; }
    .hero-visual { display:none; }
    .about-grid, .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
    .about-img img { height:auto; }
    .about-img-badge { right:0; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .stat-box { border-right:1px solid var(--color-border); }
    .stat-box:nth-child(2) { border-right:none; }
    .gashi-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
    .form-row { grid-template-columns:1fr; }
    .faq-cols { grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 600px) {
    .calc-grid { grid-template-columns:1fr; }
    .calc-result { border-radius:0 0 var(--radius-lg) var(--radius-lg); }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .gashi-footer-grid { grid-template-columns:1fr; }
    .faq-cols { grid-template-columns:1fr !important; }
}