*{ margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }

:root{
    --bg:#050816; --card:#111827; --accent:#facc15;
    --text:#ffffff; --gray:#94a3b8; --footer-bg:#020617;
    --header-h:82px;
}
body.day-mode{
    --bg:#f0f4f8; --card:#ffffff; --accent:#c98f00;
    --text:#111111; --gray:#4a5568; --footer-bg:#dde3ec;
}
body{ font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; transition:background .5s,color .5s; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:20px; }

/* =====================================================
   LOGO BADGE
===================================================== */
.logo-badge{
    position:absolute; left:30px; top:0;
    height:calc(var(--header-h) + 60px);
    z-index:1200; display:flex; align-items:flex-start; padding-top:0;
}
.logo-badge-card{
    background:#ffffff; border-radius:0 0 22px 22px;
    border:2px solid rgba(250,204,21,0.70); border-top:none;
    min-width:210px; width:210px; height:100%;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; position:relative;
    box-shadow:0 0 0 2px rgba(250,204,21,0.55),0 0 20px 5px rgba(250,204,21,0.42),0 0 50px 10px rgba(250,204,21,0.18),0 10px 32px rgba(0,0,0,0.25),inset 0 0 0 3px rgba(255,255,255,0.12);
    animation:logoPulse 2.8s ease-in-out infinite;
}
.logo-badge-card::before{
    content:""; position:absolute; top:0; left:-70%;
    width:45%; height:100%;
    background:linear-gradient(105deg,transparent 25%,rgba(250,204,21,0.25) 50%,transparent 75%);
    animation:logoShine 3.5s ease-in-out infinite; pointer-events:none; z-index:3;
}
.logo-badge-card::after{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg,transparent,rgba(250,204,21,1),transparent);
    pointer-events:none; z-index:4;
}
@keyframes logoPulse{
    0%,100%{ box-shadow:0 0 0 2px rgba(250,204,21,0.55),0 0 20px 5px rgba(250,204,21,0.42),0 0 50px 10px rgba(250,204,21,0.18),0 10px 32px rgba(0,0,0,0.25),inset 0 0 0 3px rgba(255,255,255,0.12); }
    50%{ box-shadow:0 0 0 3px rgba(250,204,21,0.80),0 0 32px 10px rgba(250,204,21,0.60),0 0 70px 18px rgba(250,204,21,0.28),0 12px 36px rgba(0,0,0,0.30),inset 0 0 0 3px rgba(255,255,255,0.18); }
}
@keyframes logoShine{ 0%{ left:-70%; } 45%{ left:120%; } 100%{ left:120%; } }
body.day-mode .logo-badge-card{ background:#ffffff; border-color:rgba(201,143,0,0.70); animation:logoPulseDay 2.8s ease-in-out infinite; }
@keyframes logoPulseDay{
    0%,100%{ box-shadow:0 0 0 2px rgba(201,143,0,0.55),0 0 20px 5px rgba(201,143,0,0.38),0 0 50px 10px rgba(201,143,0,0.16),0 10px 28px rgba(0,0,0,0.14); }
    50%{ box-shadow:0 0 0 3px rgba(201,143,0,0.80),0 0 32px 10px rgba(201,143,0,0.55),0 0 70px 18px rgba(201,143,0,0.24),0 12px 32px rgba(0,0,0,0.18); }
}
.logo-badge-card img{ width:100%; height:300px; object-fit:contain; object-position:center; display:block; position:relative; z-index:2; filter:drop-shadow(0 2px 10px rgba(250,204,21,0.35)); transition:filter .3s,transform .3s; }
.logo-badge-card:hover img{ filter:drop-shadow(0 3px 16px rgba(250,204,21,0.65)); transform:scale(1.03); }
.logo-badge-fallback{ display:none; font-size:16px; font-weight:800; color:#111; letter-spacing:2px; position:relative; z-index:2; text-align:center; padding:12px; }

/* =====================================================
   HEADER
===================================================== */
header{
    position:fixed; top:0; left:0; width:100%;
    height:var(--header-h); z-index:1000;
    padding:0 60px 0 calc(30px + 230px);
    display:flex; align-items:center; justify-content:flex-end;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:2px solid rgba(250,204,21,0.22);
    box-shadow:0 4px 20px rgba(0,0,0,0.12);
    transition:background .5s; overflow:visible;
}
body.day-mode header{ background:rgba(248,250,252,0.98); }
nav{ display:flex; gap:34px; align-items:center; margin-left:auto; }
nav a{ text-decoration:none; color:#1a202c; font-weight:600; font-size:15px; letter-spacing:.3px; position:relative; transition:color .3s; }
nav a:hover{ color:#b07d00; }
nav a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0%; height:2px; background:var(--accent); transition:.35s; }
nav a:hover::after{ width:100%; }
.header-right{ display:flex; align-items:center; gap:18px; margin-left:32px; }

/* THEME TOGGLE */
.theme-toggle{ position:fixed; left:25px; bottom:25px; right:auto; z-index:1000; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; background:rgba(255,255,255,0.95); border-radius:50px; padding:8px 14px; box-shadow:0 4px 18px rgba(0,0,0,.25); border:1px solid rgba(250,204,21,.3); transition:background .4s,box-shadow .3s; }
body.day-mode .theme-toggle{ background:rgba(248,250,252,0.97); }
.theme-toggle:hover{ box-shadow:0 6px 24px rgba(250,204,21,.3); }
.toggle-icon{ font-size:16px; line-height:1; }
.toggle-track{ width:44px; height:23px; background:#d1d5db; border-radius:50px; position:relative; border:1px solid #bbb; transition:background .4s; box-shadow:inset 0 2px 4px rgba(0,0,0,.15); }
body.day-mode .toggle-track{ background:#fde68a; border-color:#f59e0b; }
.toggle-thumb{ position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#374151; transition:left .4s cubic-bezier(.4,0,.2,1),background .4s; box-shadow:0 1px 4px rgba(0,0,0,.3); }
body.day-mode .toggle-thumb{ left:23px; background:#f59e0b; }

/* HAMBURGER */
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; border-radius:8px; transition:background .2s; }
.hamburger:hover{ background:rgba(0,0,0,.06); }
.hamburger span{ display:block; width:24px; height:3px; background:#1a202c; border-radius:3px; transition:transform .35s,opacity .35s; }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.mobile-nav{ display:none; position:fixed; top:var(--header-h); right:0; width:260px; bottom:0; background:rgba(10,14,30,0.82); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); z-index:998; flex-direction:column; padding:28px 22px 32px; box-shadow:-6px 0 32px rgba(0,0,0,.35); border-left:2px solid rgba(250,204,21,.2); transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
.mobile-nav.open{ display:flex; transform:translateX(0); }
.mobile-nav a{ text-decoration:none; color:#f1f5f9; font-weight:600; font-size:17px; padding:14px 10px; border-bottom:1px solid rgba(255,255,255,.08); transition:color .3s; text-align:right; }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav a:hover{ color:var(--accent); }
.mobile-nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:997; backdrop-filter:blur(2px); }
.mobile-nav-backdrop.open{ display:block; }

/* =====================================================
   HERO
===================================================== */
.hero{ height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:var(--header-h); }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:1; pointer-events:none; transition:opacity .5s; }
body.day-mode .hero-video{ opacity:.55; }
.hero-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; transition:background .5s; background:linear-gradient(to bottom,rgba(5,8,22,.60) 0%,rgba(5,8,22,.28) 50%,rgba(5,8,22,.80) 100%); }
body.day-mode .hero-overlay{ background:linear-gradient(to bottom,rgba(10,20,50,.55) 0%,rgba(10,20,50,.28) 50%,rgba(10,20,50,.65) 100%); }
.hero-glow{ position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(ellipse at 20% 55%,rgba(250,204,21,.06) 0%,transparent 55%),radial-gradient(ellipse at 80% 30%,rgba(0,80,255,.04) 0%,transparent 55%); }
.hero-scanlines{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.4; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px); animation:scanMove 8s linear infinite; }
@keyframes scanMove{ from{ background-position:0 0; } to{ background-position:0 100px; } }
.crane-system{ position:absolute; top:var(--header-h); right:10%; z-index:5; display:flex; flex-direction:column; align-items:center; perspective:400px; }
.chain-container{ display:flex; flex-direction:column; align-items:center; height:200px; overflow:visible; }
.chain-link{ width:14px; height:20px; border:3px solid rgba(250,204,21,.55); border-radius:50%; box-shadow:1px 1px 0 rgba(0,0,0,.3),inset -1px -1px 3px rgba(0,0,0,.3),inset 1px 1px 3px rgba(255,255,255,.08),0 0 6px rgba(250,204,21,.18); background:linear-gradient(135deg,rgba(250,204,21,.10),rgba(180,140,0,.20)); opacity:.65; flex-shrink:0; transform-style:preserve-3d; }
.chain-link:nth-child(even){ transform:rotateY(90deg) scaleX(.6); }
.chain-link:nth-child(odd){ transform:rotateX(10deg); }
.chain-hook-gap{ height:36px; flex-shrink:0; display:block; }
.hook{ width:90px; display:block; margin:0 auto; filter:drop-shadow(4px 4px 8px rgba(0,0,0,.7)) drop-shadow(0 0 15px rgba(250,204,21,.15)); }
.load{ width:130px; display:block; margin:8px auto 0; filter:drop-shadow(6px 8px 12px rgba(0,0,0,.8)) drop-shadow(0 0 20px rgba(250,204,21,.12)); }
.hero-content{ position:relative; z-index:6; max-width:860px; padding:20px; }
.hero-content h1{ font-size:74px; line-height:1.1; margin-bottom:22px; font-weight:800; color:#fff; text-shadow:0 4px 40px rgba(0,0,0,.7); }
.hero-content span{ color:var(--accent); }
.hero-content p{ color:#e2e8f0; font-size:19px; line-height:1.65; text-shadow:0 2px 12px rgba(0,0,0,.5); }

/* CRANE PARADE */
.crane-parade-section{ position:relative; overflow:hidden; height:280px; margin:0; padding:0; }
.crane-parade-section::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 20px rgba(250,204,21,.4); }
.crane-runner{ position:absolute; bottom:0; display:flex; align-items:flex-end; will-change:transform; }
.crane-runner img{ height:215px; width:auto; object-fit:contain; display:block; filter:drop-shadow(6px 8px 14px rgba(0,0,0,.65)); }
.crane-dust{ position:absolute; bottom:6px; left:4px; display:flex; gap:6px; pointer-events:none; }
.crane-dust span{ width:6px; height:6px; background:var(--accent); border-radius:50%; opacity:0; animation:dustPop .11s ease-out infinite; }
.crane-dust span:nth-child(2){ animation-delay:.18s; width:4px; height:4px; }
.crane-dust span:nth-child(3){ animation-delay:.36s; width:8px; height:8px; }
@keyframes dustPop{ 0%{ opacity:.7; transform:translate(0,0) scale(1); } 100%{ opacity:0; transform:translate(16px,-26px) scale(.2); } }

section{ padding:110px 8%; }
.section-title{ text-align:center; margin-bottom:65px; }
.section-title h2{ font-size:46px; margin-bottom:14px; color:var(--text); transition:color .5s; }
.section-title p{ color:var(--gray); transition:color .5s; }

.services-images-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.service-item{ position:relative; overflow:hidden; border-radius:18px; width:calc(33.333% - 18px); aspect-ratio:4/3; background:#0d1524; flex-shrink:0; }
body.day-mode .service-item{ background:#e8edf5; }
.service-item img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:18px; padding:8px; transition:transform .5s ease; }
.service-item:hover img{ transform:scale(1.05); }
.service-item-label{ position:absolute; bottom:0; left:0; right:0; padding:30px 16px 14px; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%); border-radius:0 0 18px 18px; pointer-events:none; }
.service-item-label strong{ display:block; color:#fff; font-weight:700; font-size:15px; line-height:1.3; }
.service-item-label span{ display:block; color:var(--accent); font-size:12px; margin-top:3px; }

/* =====================================================
   FLEET SLIDER — Our Companies (unchanged)
===================================================== */
.fleet-slider-wrap{ overflow:hidden; width:100%; mask-image:linear-gradient(to right,transparent,black 7%,black 93%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,black 7%,black 93%,transparent); }
.fleet-slider-track{ display:flex; gap:28px; width:max-content; animation:fleetScroll 30s linear infinite; }
.fleet-slider-track:hover{ animation-play-state:paused; }
@keyframes fleetScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.fleet-logo-card{ flex-shrink:0; width:220px; height:150px; background:var(--card); border-radius:18px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; padding:18px; transition:border-color .4s,box-shadow .4s,background .5s; }
body.day-mode .fleet-logo-card{ border-color:rgba(0,0,0,.1); }
.fleet-logo-card:hover{ border-color:var(--accent); box-shadow:0 0 28px rgba(250,204,21,.25); }
.fleet-logo-card img{ max-width:100%; max-height:105px; object-fit:contain; display:block; }

/* =====================================================
   GALLERY — manual arrow scroll
===================================================== */
.gallery-scroll-wrap{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
}
.gallery-scroll-track{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    scrollbar-width:thin;
    scrollbar-color:var(--accent) transparent;
}
.gallery-scroll-track::-webkit-scrollbar{ height:6px; }
.gallery-scroll-track::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:20px; }
.gallery-scroll-track::-webkit-scrollbar-track{ background:transparent; }

.gallery-item{
    flex-shrink:0;
    width:320px;
    height:220px;
    overflow:hidden;
    border-radius:18px;
    background:#0d1524;
    scroll-snap-align:start;
    display:flex;
    align-items:center;
    justify-content:center;
}
body.day-mode .gallery-item{ background:#e2e8f0; }
.gallery-item img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    border-radius:14px;
    transition:transform .5s ease, filter .5s ease;
    filter:brightness(.97);
}
.gallery-item:hover img{ transform:scale(1.04); filter:brightness(1.08); }

/* Arrow buttons */
.gallery-arrow{
    flex-shrink:0;
    width:48px; height:48px;
    border-radius:50%;
    border:2px solid var(--accent);
    background:rgba(250,204,21,0.12);
    color:var(--accent);
    font-size:28px;
    line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .3s, box-shadow .3s;
    user-select:none;
}
.gallery-arrow:hover{ background:rgba(250,204,21,0.28); box-shadow:0 0 18px rgba(250,204,21,.35); }

/* =====================================================
   CTA + FOOTER
===================================================== */
.cta{ background:linear-gradient(135deg,var(--card),#0f172a); text-align:center; border-radius:28px; padding:80px 40px; border:1px solid rgba(255,255,255,.08); transition:background .5s; }
body.day-mode .cta{ background:linear-gradient(135deg,#e8edf5,#d5dce8); border-color:rgba(0,0,0,.1); }
.cta h1{ font-size:52px; margin-bottom:18px; color:var(--text); transition:color .5s; }
.cta p{ color:var(--gray); transition:color .5s; }
footer{ padding:90px 8% 50px; background:var(--footer-bg); transition:background .5s; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; }
.footer-box h3{ color:var(--accent); margin-bottom:18px; font-size:26px; }
.footer-box p{ color:var(--gray); line-height:1.8; margin-bottom:10px; transition:color .5s; }
.footer-box a{ color:var(--accent); text-decoration:none; }
.footer-box a:hover{ text-decoration:underline; }
iframe{ width:100%; height:250px; border:none; border-radius:18px; }
.whatsapp{ position:fixed; right:25px; bottom:25px; background:#25D366; color:#fff; text-decoration:none; padding:14px 22px; border-radius:50px; font-weight:700; z-index:1000; box-shadow:0 0 20px rgba(37,211,102,.5); font-size:15px; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:900px){
    :root{ --header-h:68px; }
    header{ padding:0 18px 0 calc(18px + 180px); }
    .logo-badge{ height:calc(var(--header-h) + 48px); left:18px; }
    .logo-badge-card{ min-width:170px; width:170px; }
    nav{ display:none; }
    .hamburger{ display:flex; }
    .header-right{ margin-left:0; }
    .hero-content h1{ font-size:42px; }
    .section-title h2{ font-size:32px; }
    .cta h1{ font-size:32px; }
    .crane-system{ right:2%; }
    .service-item{ width:calc(50% - 14px); }
    .theme-toggle{ left:18px; bottom:20px; }
    .gallery-item{ width:260px; height:180px; }
}
@media(max-width:560px){
    :root{ --header-h:60px; }
    .service-item{ width:100%; }
    .hero-content h1{ font-size:34px; }
    header{ padding:0 14px 0 calc(14px + 155px); }
    .logo-badge{ height:calc(var(--header-h) + 42px); left:14px; }
    .logo-badge-card{ min-width:145px; width:145px; }
    .logo-badge-card img{ padding:8px 10px; }
    .theme-toggle{ left:14px; bottom:18px; padding:6px 10px; }
    .whatsapp{ padding:12px 16px; font-size:13px; }
    .gallery-item{ width:200px; height:145px; }
    .gallery-arrow{ width:38px; height:38px; font-size:22px; }
}