/* =========================================================
   B2EEN LAUNDRY CLEANING SERVICES — Modern Industrial Website
   Brand: Navy / Silver / White / Gold
   ========================================================= */

:root {
  --navy: #07182f;
  --navy-2: #0b2343;
  --navy-3: #102f55;
  --gold: #f5b719;
  --gold-2: #ffd45a;
  --silver: #bfc5cc;
  --silver-light: #e8edf2;
  --white: #ffffff;
  --dark: #050b15;
  --muted: #9ba8b8;
  --border: rgba(255,255,255,.11);
  --shadow: 0 25px 70px rgba(0,0,0,.35);
  --radius: 22px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", sans-serif;
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button, input, textarea, select { font: inherit; }

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--navy);
  transition: opacity .7s ease, visibility .7s ease;
}
.page-loader.hide { opacity: 0; visibility: hidden; }
.loader-logo img { width: 170px; max-height: 120px; object-fit: contain; }
.loader-line { width: 180px; height: 2px; background: rgba(255,255,255,.15); margin-top: 25px; overflow: hidden; }
.loader-line span { display: block; width: 45%; height: 100%; background: var(--gold); animation: loader 1s infinite ease-in-out; }
@keyframes loader { from { transform: translateX(-100%); } to { transform: translateX(330%); } }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: .35s ease;
}
.site-header.scrolled {
  background: rgba(5,11,21,.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand img { width: 130px; max-height: 65px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nav-links a { color: #d9e0e8; transition: .25s; }
.nav-links a:hover { color: var(--gold); }
.nav-cta { padding: 13px 19px; border: 1px solid var(--gold); color: var(--gold) !important; border-radius: 999px; }
.nav-cta:hover { background: var(--gold); color: var(--navy) !important; }

.menu-toggle { display: none; background: none; border: 0; width: 42px; }
.menu-toggle span { display:block; height:2px; background:#fff; margin:7px 0; transition:.3s; }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,11,21,.98) 0%, rgba(7,24,47,.92) 48%, rgba(7,24,47,.56) 100%),
    url("https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?auto=format&fit=crop&w=2200&q=90") center/cover;
  transform: scale(1.04);
}
.hero-grid {
  position:absolute; inset:0; opacity:.15;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 65px 65px;
  mask-image: linear-gradient(to right, black, transparent);
}
.hero-content { position:relative; z-index:2; display:grid; grid-template-columns: 1.08fr .92fr; align-items:center; gap:30px; padding-top:90px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.17em; }
.eyebrow span { width:32px; height:2px; background:var(--gold); display:inline-block; }
.hero h1 {
  font-family:"Oswald", sans-serif;
  font-size: clamp(48px, 6vw, 86px);
  line-height:.98;
  letter-spacing:-.025em;
  margin:22px 0 25px;
}
.hero h1 strong { color:var(--gold); font-weight:700; }
.hero-copy > p { max-width:650px; color:#c5ced9; font-size:17px; line-height:1.75; }
.hero-buttons { display:flex; gap:13px; flex-wrap:wrap; margin:32px 0; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:18px;
  padding:16px 23px; border-radius:8px; border:1px solid transparent;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  transition:.3s ease; cursor:pointer;
}
.btn span { font-size:20px; line-height:0; transition:.3s; }
.btn:hover span { transform:translateX(4px); }
.btn-gold { background:var(--gold); color:var(--navy); box-shadow:0 12px 30px rgba(245,183,25,.18); }
.btn-gold:hover { background:var(--gold-2); transform:translateY(-2px); }
.btn-outline { border-color:rgba(255,255,255,.3); color:#fff; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.hero-trust { color:#b7c0ca; font-size:11px; letter-spacing:.16em; font-weight:700; }
.mini-star { color:var(--gold); margin-right:8px; }

.hero-machine { position:relative; display:grid; place-items:center; min-height:570px; }
.machine-glow { position:absolute; width:450px; height:450px; border-radius:50%; background:radial-gradient(circle, rgba(245,183,25,.18), transparent 65%); filter:blur(8px); }
.machine-card {
  position:relative; width:min(390px,80vw); height:455px; padding:25px 24px;
  border:5px solid #7d8791; border-radius:18px 18px 26px 26px;
  background:linear-gradient(145deg,#eef1f4,#737c85 44%,#cbd1d7);
  box-shadow: inset 0 0 0 3px #1a2736, 0 35px 80px rgba(0,0,0,.5);
  animation: machineFloat 5s ease-in-out infinite;
}
@keyframes machineFloat { 50% { transform:translateY(-10px) rotate(.4deg); } }
.machine-top { height:60px; background:linear-gradient(#15263a,#334a61); border-radius:8px; display:flex; align-items:center; justify-content:space-around; padding:0 15px; box-shadow:inset 0 0 0 2px #687685; }
.machine-top span { width:17px; height:17px; border-radius:50%; background:#e5e8eb; box-shadow:0 0 0 3px #102038; }
.machine-door { width:275px; height:275px; border-radius:50%; margin:32px auto 18px; background:radial-gradient(circle at 40% 30%,#263e5b 0 24%,#07182f 26% 63%,#a8b0b8 64% 70%,#283342 71% 76%,#d7dce0 77%); border:8px solid #626b74; box-shadow:inset 0 0 30px #000, 0 4px 10px rgba(0,0,0,.35); position:relative; overflow:hidden; }
.machine-inner { position:absolute; inset:35px; border-radius:50%; background:radial-gradient(circle at 65% 65%, #08172b, #132e4e 48%, #020812); }
.machine-reflection { position:absolute; width:100px; height:35px; background:rgba(255,255,255,.28); transform:rotate(-35deg); top:60px; left:50px; filter:blur(2px); border-radius:50%; }
.machine-label { text-align:center; font-family:"Oswald"; color:#10213a; font-size:24px; letter-spacing:.1em; }
.machine-label b { color:#9b7100; }
.machine-badge { position:absolute; right:-25px; bottom:70px; width:105px; height:105px; border-radius:50%; display:grid; place-items:center; text-align:center; background:var(--gold); color:var(--navy); font-family:"Oswald"; font-size:24px; line-height:.85; box-shadow:0 12px 30px rgba(0,0,0,.35); border:5px solid var(--navy); }
.machine-badge small { font:800 9px Inter; letter-spacing:.12em; }
.floating-gear { position:absolute; color:rgba(245,183,25,.18); font-size:170px; }
.gear-one { right:-30px; top:13%; animation:spin 25s linear infinite; }
.gear-two { left:-65px; bottom:-80px; font-size:250px; animation:spinReverse 32s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { to { transform:rotate(-360deg); } }
.scroll-down { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.2em; color:#91a0b2; display:flex; gap:10px; align-items:center; }
.scroll-down span { width:30px; height:1px; background:var(--gold); }

.trust-strip { background:#0b1e37; border-block:1px solid var(--border); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item { display:flex; gap:15px; align-items:center; padding:24px 18px; border-right:1px solid var(--border); }
.trust-item:last-child { border:0; }
.trust-icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(245,183,25,.45); color:var(--gold); border-radius:10px; font-size:19px; }
.trust-item strong { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.trust-item span { display:block; color:#8492a4; font-size:11px; margin-top:4px; }

.section { padding:120px 0; }
.about { background:#071321; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.image-frame { position:relative; padding:14px; border:1px solid rgba(245,183,25,.35); }
.image-frame img { width:100%; height:550px; object-fit:cover; filter:saturate(.8); }
.image-corner { position:absolute; inset:0; border:1px solid rgba(255,255,255,.13); transform:translate(14px,14px); pointer-events:none; }
.experience-card { position:absolute; left:-25px; bottom:40px; background:var(--gold); color:var(--navy); padding:20px 25px; display:flex; gap:18px; align-items:center; box-shadow:var(--shadow); }
.experience-card span { font-family:Oswald; font-size:35px; }
.experience-card strong { font-size:10px; letter-spacing:.12em; }
.about h2, .section-heading h2, .center-heading h2, .contact h2, .cta h2, .video-content h2 {
  font-family:Oswald; font-size:clamp(42px,5vw,68px); line-height:1.02; margin:20px 0 25px; letter-spacing:-.02em;
}
h2 em { color:var(--gold); font-style:normal; }
.about-copy > p { color:#aeb9c6; line-height:1.8; margin-bottom:15px; max-width:590px; }
.check-list { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:27px 0; }
.check-list div { font-size:12px; color:#d7dee6; }
.check-list span { color:var(--gold); margin-right:7px; }
.text-link { display:inline-flex; gap:15px; color:var(--gold); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.1em; }
.text-link span { transition:.3s; }
.text-link:hover span { transform:translateX(5px); }

.services { background:linear-gradient(180deg,#081a31,#050b15); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:55px; }
.section-heading > p { max-width:350px; color:#8997a9; line-height:1.7; font-size:14px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-card { min-height:285px; padding:30px; background:linear-gradient(145deg,#0d2748,#08182d); border:1px solid var(--border); position:relative; overflow:hidden; transition:.35s ease; }
.service-card:before { content:""; position:absolute; top:0; left:0; width:0; height:3px; background:var(--gold); transition:.4s; }
.service-card:hover { transform:translateY(-8px); border-color:rgba(245,183,25,.35); box-shadow:var(--shadow); }
.service-card:hover:before { width:100%; }
.service-number { position:absolute; right:22px; top:20px; color:rgba(255,255,255,.08); font-family:Oswald; font-size:45px; }
.service-icon { width:52px; height:52px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(245,183,25,.35); color:var(--gold); font-size:23px; margin-bottom:35px; }
.service-card h3 { font-size:18px; margin-bottom:12px; }
.service-card p { color:#8f9cae; font-size:13px; line-height:1.7; }
.service-card a { display:inline-block; margin-top:22px; color:var(--gold); font-size:10px; text-transform:uppercase; font-weight:800; letter-spacing:.12em; }
.service-card.featured { background:linear-gradient(145deg,#16365b,#0a1d36); }

.process { background:#0a1c33; }
.center-heading { text-align:center; }
.center-heading .eyebrow { justify-content:center; }
.process-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:65px; }
.process-line { position:absolute; top:29px; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.55; }
.process-step { text-align:center; position:relative; }
.step-no { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:0 auto 25px; background:var(--navy); border:1px solid var(--gold); color:var(--gold); font-family:Oswald; font-size:20px; position:relative; z-index:2; }
.process-step h3 { font-size:15px; margin-bottom:10px; text-transform:uppercase; }
.process-step p { color:#8998aa; font-size:12px; line-height:1.6; max-width:200px; margin:auto; }

.work { background:#050b15; }
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.gallery-item {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 6px;
  background: #081a31;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s ease, filter 0.5s ease;
  filter: saturate(0.75);
}

.gallery-item:hover img {
  transform: scale(1.08);
  filter: saturate(1);
}

.gallery-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 25px 20px 20px;
  background: linear-gradient(
    transparent,
    rgba(3, 8, 18, 0.95)
  );
}

.gallery-overlay span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
}

.gallery-overlay h3 {
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  margin-top: 5px;
}

.video-section { min-height:620px; position:relative; display:grid; place-items:center; text-align:center; overflow:hidden; }
.video-bg { position:absolute; inset:0; background:linear-gradient(rgba(4,13,25,.72),rgba(4,13,25,.9)), url("https://images.unsplash.com/photo-1594736797933-d0501ba2fe65?auto=format&fit=crop&w=2200&q=85") center/cover; }
.video-bg:after { content:""; position:absolute; inset:0; background:radial-gradient(circle,transparent 0%,rgba(7,24,47,.55) 80%); }
.video-content { position:relative; z-index:2; max-width:750px; }
.play-btn { width:85px; height:85px; border-radius:50%; border:1px solid var(--gold); background:rgba(245,183,25,.1); color:var(--gold); display:grid; place-items:center; margin:0 auto 30px; font-size:24px; cursor:pointer; transition:.3s; padding-left:5px; }
.play-btn:hover { background:var(--gold); color:var(--navy); transform:scale(1.08); }
.play-btn.small { width:65px; height:65px; }
.video-content p { color:#aeb9c6; line-height:1.7; }



.why-us { background:#081a31; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:55px; }
.why-card { padding:35px 25px; border:1px solid var(--border); background:rgba(255,255,255,.02); position:relative; transition:.3s; }
.why-card:hover { border-color:rgba(245,183,25,.4); transform:translateY(-5px); }
.why-card > span { color:rgba(255,255,255,.2); font-family:Oswald; font-size:12px; }
.why-icon { color:var(--gold); font-size:25px; margin:30px 0 18px; }
.why-card h3 { font-size:15px; text-transform:uppercase; margin-bottom:10px; }
.why-card p { color:#8998aa; font-size:12px; line-height:1.7; }

.cta { padding:70px 0; background:var(--gold); color:var(--navy); }
.cta .eyebrow { color:var(--navy); }
.cta .eyebrow span { background:var(--navy); }
.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.cta h2 { max-width:750px; margin:15px 0 10px; }
.cta h2 em { color:#5c4300; }
.cta p { font-size:14px; opacity:.72; }
.cta .btn-gold { background:var(--navy); color:#fff; box-shadow:none; white-space:nowrap; }
.cta .btn-gold:hover { background:#102b4e; }

.contact { background:#050b15; }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; }
.contact-info > p { color:#929eae; line-height:1.7; max-width:450px; margin-bottom:35px; }
.contact-method { display:flex; gap:15px; align-items:center; margin:22px 0; }
.contact-method > span { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(245,183,25,.3); color:var(--gold); border-radius:10px; }
.contact-method small { display:block; color:#6f7d90; font-size:9px; letter-spacing:.14em; margin-bottom:4px; }
.contact-method strong { font-size:13px; }
.contact-note { margin-top:35px; border-left:2px solid var(--gold); padding:10px 15px; color:#6f7d90; font-size:11px; line-height:1.6; }
.contact-form { padding:35px; border:1px solid var(--border); background:#091a30; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.contact-form label { display:block; color:#9da9b8; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.contact-form input, .contact-form textarea, .contact-form select {
  display:block; width:100%; margin-top:8px; padding:14px 15px; background:#061225; border:1px solid rgba(255,255,255,.12); color:#fff; outline:none; border-radius:6px;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,183,25,.08); }
.contact-form textarea { resize:vertical; }
.full { width:100%; }
.form-message { color:var(--gold); font-size:12px; margin-top:14px; min-height:18px; }

.footer { background:#030812; border-top:1px solid var(--border); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; padding:65px 0; }
.footer-brand img { width:180px; max-height:100px; object-fit:contain; }
.footer-title { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.14em; margin-bottom:18px; }
.footer-top > div:not(:first-child) a { display:block; color:#788699; font-size:11px; margin:12px 0; transition:.2s; }
.footer-top > div:not(:first-child) a:hover { color:#fff; }
.footer-bottom { padding:20px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:20px; color:#596678; font-size:9px; letter-spacing:.08em; }

.modal { position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.85); backdrop-filter:blur(12px); display:none; place-items:center; padding:20px; }
.modal.open { display:grid; }
.modal-inner { width:min(900px,100%); position:relative; }
.modal-close { position:absolute; right:-5px; top:-50px; background:none; border:0; color:#fff; font-size:40px; cursor:pointer; }
.video-placeholder { min-height:480px; background:linear-gradient(145deg,#0b2343,#050b15); border:1px solid rgba(245,183,25,.3); display:grid; place-items:center; align-content:center; text-align:center; padding:40px; }
.video-placeholder h3 { font-family:Oswald; font-size:34px; margin:20px 0 8px; }
.video-placeholder p { color:#8795a8; font-size:13px; }
/* REAL B2EEN LAUNDRY CLEANING SERVICES VIDEO */

.bila-video {
  display: block;

  width: 100%;
  max-height: 80vh;

  background: #000;

  border: 1px solid rgba(245, 183, 25, 0.35);

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);

  object-fit: contain;
}

.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }
.delay-3 { transition-delay:.36s; }

@media (max-width: 950px) {
  .nav-links { gap:15px; font-size:11px; }
  .hero-content { grid-template-columns:1fr; }
  .hero-machine { display:none; }
  .hero-copy { padding:70px 0; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .two-col, .contact-grid { grid-template-columns:1fr; gap:55px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item {
    height: 260px;
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery-item {
    height: 280px;
  }
  .cta-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 700px) {
  .container { width:min(100% - 28px,1180px); }
  .nav { min-height:72px; }
  .brand img { width:105px; max-height:52px; }
  .menu-toggle { display:block; }
  .nav-links { position:absolute; top:72px; left:14px; right:14px; padding:20px; background:#07182f; border:1px solid var(--border); border-radius:12px; flex-direction:column; align-items:stretch; gap:0; opacity:0; visibility:hidden; transform:translateY(-10px); transition:.25s; }
  .nav-links.open { opacity:1; visibility:visible; transform:none; }
  .nav-links a { padding:14px 8px; border-bottom:1px solid var(--border); }
  .nav-links .nav-cta { text-align:center; margin-top:10px; border:1px solid var(--gold); }
  .hero h1 { font-size:clamp(45px,14vw,68px); }
  .hero-copy > p { font-size:14px; }
  .scroll-down { display:none; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-item { border-right:0; border-bottom:1px solid var(--border); }
  .section { padding:80px 0; }
  .about h2, .section-heading h2, .center-heading h2, .contact h2, .cta h2, .video-content h2 { font-size:43px; }
  .image-frame img { height:390px; }
  .experience-card { left:10px; bottom:25px; }
  .check-list { grid-template-columns:1fr; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:20px; }
  .services-grid, .why-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:1fr; gap:35px; }
  .process-line { display:none; }
  .gallery { grid-template-columns:1fr; grid-auto-rows:270px; }
  .gallery-item.large, .gallery-item.wide { grid-column:auto; grid-row:auto; }
  .gallery-item.wide { grid-column:auto; }
  .video-section { min-height:530px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .contact-form { padding:22px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:35px 20px; }
  .footer-brand { grid-column:span 2; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}