/* ===== Quswaa Marine — main stylesheet ===== */
:root{
  --navy:#0A2342; --navy-deep:#061a32; --teal:#007B7F; --teal-light:#00A3A8;
  --surface:#F4F7F9; --line:#eef1f4; --muted:#51607a; --faint:#8a97a8;
  --wa:#25D366; --green:#2ECC71; --orange:#F39C12; --red:#E74C3C;
  --max:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--navy);background:#fff;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3,p{margin:0;}
.wrap{max-width:var(--max);margin:0 auto;padding-left:28px;padding-right:28px;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;border-radius:9px;cursor:pointer;border:none;font-family:inherit;transition:filter .15s ease,transform .15s ease;}
.btn:hover{filter:brightness(1.06);}
.btn-wa{background:var(--wa);color:#fff;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent;}
.btn-lg{font-size:17px;padding:16px 28px;}
.btn-xl{font-size:19px;padding:20px 40px;border-radius:12px;}
.btn-sm{font-size:14px;padding:11px 18px;border-radius:8px;}
.btn-block{display:flex;width:100%;justify-content:center;}
.wa-ico{width:1.15em;height:1.15em;fill:currentColor;flex:none;}

/* ===== language bar ===== */
.langbar{background:var(--navy-deep);color:#9fb0c4;font-size:12px;}
.langbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:7px;padding-bottom:7px;gap:12px;}
.langbar .flags{display:flex;align-items:center;gap:6px;position:relative;}
.langbar .flags > span[data-lang]{cursor:pointer;font-size:14px;line-height:1;opacity:.8;transition:opacity .12s;}
.langbar .flags > span[data-lang]:hover{opacity:1;}
.langbar .meta{display:flex;gap:18px;align-items:center;}
.langbar .meta a{color:inherit;}
.lang-label{margin-right:4px;letter-spacing:.04em;}

/* ===== nav ===== */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(10,35,66,.05);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand .name{font-size:18px;font-weight:800;letter-spacing:.02em;white-space:nowrap;}
.brand .name span{color:var(--teal);}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600;color:var(--muted);}
.nav-links a{transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--navy);}
.nav-links a.active{color:var(--navy);}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{width:24px;height:2px;background:var(--navy);border-radius:2px;}

/* mobile overlay */
.mobile-nav{position:fixed;inset:0;z-index:200;background:var(--navy);color:#fff;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav .mn-top{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-nav .mn-close{font-size:26px;background:none;border:none;color:#fff;cursor:pointer;line-height:1;}
.mobile-nav .mn-links{padding:24px;display:flex;flex-direction:column;}
.mobile-nav .mn-links a{font-size:24px;font-weight:700;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-nav .mn-links a:last-of-type{border-bottom:none;}
.mobile-nav .mn-links .btn{margin-top:22px;justify-content:center;font-size:16px;padding:15px;}

/* ===== hero ===== */
.hero{background:linear-gradient(155deg,#0A2342 0%,#0d2d54 60%,#0a3a55 100%);color:#fff;position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:1;}
.hero-home .wrap{padding-top:84px;padding-bottom:92px;}
.hero-photo{position:absolute;inset:0;z-index:0;opacity:.16;background-size:cover;background-position:center;}
.hero-watermark{position:absolute;right:-80px;top:-30px;opacity:.07;z-index:0;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,163,168,.16);border:1px solid rgba(0,163,168,.4);color:#5fd6da;font-size:13px;font-weight:600;letter-spacing:.04em;padding:7px 15px;border-radius:30px;}
.hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--wa);}
.hero h1{font-size:58px;font-weight:800;line-height:1.04;letter-spacing:-.02em;margin-top:24px;max-width:800px;}
.hero h1 .accent{color:var(--teal-light);}
.hero p.lede{font-size:19px;color:#bcc9da;line-height:1.55;margin-top:22px;max-width:600px;}
.hero .cta-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.page-hero .wrap{padding-top:60px;padding-bottom:60px;}
.breadcrumb{font-size:13px;font-weight:600;color:#9fb0c4;}
.breadcrumb a:hover{color:#fff;}
.page-hero h1{font-size:48px;font-weight:800;letter-spacing:-.02em;margin-top:12px;margin-bottom:10px;line-height:1.06;}
.page-hero p{font-size:18px;color:#bcc9da;max-width:600px;line-height:1.5;}
.page-hero.center{text-align:center;}
.page-hero.center p{margin-left:auto;margin-right:auto;}

/* ===== stats strip ===== */
.stats{background:var(--teal);color:#fff;}
.stats .grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);}
.stats .cell{padding:30px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.16);}
.stats .cell:last-child{border-right:none;}
.stats .num{font-size:38px;font-weight:800;line-height:1;}
.stats .lbl{font-size:14px;opacity:.88;margin-top:6px;}

/* ===== sections ===== */
.section{padding-top:84px;padding-bottom:84px;}
.section.tight{padding-top:70px;padding-bottom:70px;}
.eyebrow-text{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);}
.section h2{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-top:8px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.section-head .link{font-size:15px;font-weight:700;color:var(--navy);}
.section-head .link:hover{color:var(--teal);}
.center{text-align:center;}

/* ===== product cards ===== */
.card-grid{display:grid;gap:24px;margin-top:38px;}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,35,66,.16);border-color:var(--teal);}
.pcard .photo{height:180px;background-size:cover;background-position:center;background-color:var(--navy);position:relative;}
.pcard.sm .photo{height:160px;}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;color:#fff;padding:4px 10px;border-radius:20px;}
.badge.new{background:var(--green);}
.badge.used{background:var(--orange);}
.badge.overhaul{background:var(--red);}
.pcard .body{padding:20px;flex:1;}
.pcard .sku{font-size:11px;font-family:ui-monospace,monospace;color:var(--faint);}
.pcard .title{font-size:17px;font-weight:700;line-height:1.3;margin:6px 0 8px;}
.pcard .spec{font-size:14px;color:var(--muted);}
.pcard .foot{padding:0 20px 20px;}

/* ===== two-column blocks ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.two-col.media-lg{grid-template-columns:1fr 1.2fr;gap:40px;}
.media{border-radius:14px;overflow:hidden;background:var(--surface);}
.media img{width:100%;height:100%;object-fit:cover;}
.media.h-380{height:380px;}
.media.h-420{height:420px;}
.media.h-340{height:340px;}
.prose p{font-size:17px;color:var(--muted);line-height:1.65;margin-bottom:16px;}
.prose h2{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:10px 0 18px;line-height:1.15;}

/* ===== dark band (we buy teaser) ===== */
.band-dark{background:linear-gradient(135deg,#0A2342,#0a3a55);color:#fff;}
.band-dark .wrap{padding-top:64px;padding-bottom:64px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.band-dark h2{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px;line-height:1.15;}
.band-dark p{font-size:17px;color:#bcc9da;line-height:1.6;max-width:640px;}
.band-dark .eyebrow-text{color:var(--teal-light);}

/* ===== why us ===== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px;}
.why-item{text-align:center;padding:14px;}
.why-item .ic{width:64px;height:64px;border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:center;margin:0 auto;}
.why-item .ic svg{width:30px;height:30px;stroke:var(--teal);fill:none;stroke-width:2;}
.why-item h3{font-size:18px;font-weight:700;margin-top:16px;}
.why-item p{font-size:14px;color:var(--muted);line-height:1.5;margin-top:7px;}

/* ===== CTA surface ===== */
.cta-surface{background:var(--surface);}
.cta-surface .wrap{padding-top:74px;padding-bottom:74px;text-align:center;}
.cta-surface h2{font-size:40px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}
.cta-surface p{font-size:18px;color:var(--muted);margin:0 auto 30px;max-width:540px;}

/* ===== filters ===== */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.chip{font-size:14px;font-weight:600;background:var(--surface);color:var(--muted);padding:9px 18px;border-radius:30px;cursor:pointer;border:none;font-family:inherit;transition:background .12s,color .12s;}
.chip:hover{background:#e6edf2;}
.chip.active{background:var(--navy);color:#fff;font-weight:700;}

/* ===== product single ===== */
.gallery .main{height:420px;border-radius:14px;background-size:cover;background-position:center;background-color:var(--navy);}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
.gallery .thumbs .t{height:84px;border-radius:9px;border:2px solid var(--line);background-size:cover;background-position:center;cursor:pointer;transition:border-color .15s;}
.gallery .thumbs .t:hover,.gallery .thumbs .t.active{border-color:var(--teal);}
.spec-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px;}
.spec-table .head{background:var(--surface);padding:12px 18px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
.spec-table .rows{display:grid;grid-template-columns:1fr 1fr;}
.spec-table .r{padding:14px 18px;border-bottom:1px solid #f1f4f7;}
.spec-table .r:nth-child(odd){border-right:1px solid #f1f4f7;}
.spec-table .r .k{font-size:12px;color:var(--faint);}
.spec-table .r .v{font-size:15px;font-weight:600;}
.trust-row{display:flex;gap:20px;margin-top:18px;font-size:13px;color:var(--faint);flex-wrap:wrap;}

/* ===== category cards (we buy) ===== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px;}
.cat{border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s;}
.cat:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,35,66,.16);border-color:var(--teal);}
.cat .ic{width:54px;height:54px;border-radius:13px;background:var(--surface);margin:0 auto;display:flex;align-items:center;justify-content:center;}
.cat .ic svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:2;}
.cat h3{font-size:16px;font-weight:700;margin-top:14px;}
.brands-box{background:var(--surface);border-radius:16px;padding:44px;}
.brands{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:24px;}
.brands span{font-size:19px;font-weight:800;color:var(--navy);background:#fff;padding:14px 26px;border-radius:10px;box-shadow:0 1px 3px rgba(10,35,66,.06);}
.highlight{background:linear-gradient(135deg,#007B7F,#00A3A8);color:#fff;border-radius:16px;padding:40px 44px;display:flex;align-items:center;justify-content:between;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.highlight h2{font-size:28px;font-weight:800;margin:8px 0;line-height:1.2;}
.highlight p{font-size:16px;opacity:.92;line-height:1.55;max-width:680px;}
.highlight .eyebrow-text{color:#fff;opacity:.85;}

/* ===== team ===== */
.team-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:420px;margin:42px auto 0;}
.team-card{background:#fff;border-radius:14px;padding:30px;box-shadow:0 1px 3px rgba(10,35,66,.06);text-align:center;}
.team-card .avatar{width:120px;height:120px;border-radius:50%;margin:0 auto;background:var(--surface);background-size:cover;background-position:center;}
.team-card h3{font-size:21px;font-weight:800;margin-top:18px;}
.team-card .role{font-size:14px;font-weight:600;color:var(--teal);margin-top:4px;}
.team-card .socials{display:flex;gap:10px;justify-content:center;margin-top:18px;}
.team-card .socials a{display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:700;padding:9px 15px;border-radius:8px;}
.s-wa{background:var(--wa);}
.s-li{background:#0A66C2;}

/* ===== contact ===== */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ccard{border:1px solid var(--line);border-radius:14px;padding:28px;}
.ccard .ic{width:48px;height:48px;border-radius:12px;background:var(--surface);display:flex;align-items:center;justify-content:center;}
.ccard .ic svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:2;}
.ccard .k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-top:16px;}
.ccard .v{font-size:15px;line-height:1.6;color:var(--muted);margin-top:8px;}
.form-card{border:1px solid var(--line);border-radius:16px;padding:34px;}
.form-card h2{font-size:26px;font-weight:800;margin-bottom:6px;}
.form-card .sub{font-size:15px;color:var(--faint);margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{font-size:13px;font-weight:600;color:var(--muted);display:block;margin-bottom:7px;}
.input{width:100%;font-family:inherit;font-size:15px;padding:13px 15px;border:1px solid #d9e0e7;border-radius:9px;color:var(--navy);background:#fff;outline:none;transition:border-color .15s;}
.input:focus{border-color:var(--teal);}
.input::placeholder{color:#a7b2c0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.map{min-height:520px;height:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);}
.map iframe{width:100%;height:100%;min-height:520px;border:0;display:block;}
.or-divider{text-align:center;font-size:13px;color:var(--faint);margin-top:14px;}

/* ===== footer ===== */
.footer{background:var(--navy-deep);color:#9fb0c4;}
.footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:60px;padding-bottom:30px;}
.footer .brand .name{color:#fff;}
.footer p{font-size:14px;line-height:1.7;margin-top:18px;max-width:330px;}
.footer h4{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.footer .addr{font-size:14px;line-height:1.7;}
.footer .contact-lines{font-size:14px;line-height:1.9;margin-top:10px;}
.footer .links{display:flex;flex-direction:column;gap:9px;font-size:14px;}
.footer .links a:hover{color:var(--teal);}
.footer .social{display:flex;gap:12px;margin-top:18px;}
.footer .social a{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.footer .social a svg{width:20px;height:20px;fill:#fff;}
.footer .copy{border-top:1px solid rgba(255,255,255,.1);padding:20px 28px;text-align:center;font-size:13px;}

/* ===== floating whatsapp ===== */
.wa-float{position:fixed;bottom:26px;right:26px;z-index:120;width:62px;height:62px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .18s ease;cursor:pointer;border:none;}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:32px;height:32px;fill:#fff;position:relative;z-index:1;}
.wa-float .ring{position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:wapulse 2s infinite;}
@keyframes wapulse{0%{transform:scale(1);opacity:.55;}70%{transform:scale(2.1);opacity:0;}100%{opacity:0;}}

/* ===== whatsapp popup ===== */
.wa-popup{position:fixed;bottom:100px;right:26px;z-index:121;width:320px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(10,35,66,.28);transform:translateY(14px) scale(.96);opacity:0;pointer-events:none;transform-origin:bottom right;transition:opacity .2s ease,transform .2s ease;}
.wa-popup.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.wa-popup .ph{background:#075E54;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.wa-popup .ph .av{width:40px;height:40px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;}
.wa-popup .ph .av svg{width:22px;height:22px;fill:#fff;}
.wa-popup .ph .who{color:#fff;}
.wa-popup .ph .who .n{font-size:15px;font-weight:700;}
.wa-popup .ph .who .s{font-size:12px;opacity:.8;}
.wa-popup .pb{padding:18px;background:#ECE5DD;}
.wa-popup .bubble{background:#fff;border-radius:0 10px 10px 10px;padding:11px 14px;font-size:13px;color:var(--navy);box-shadow:0 1px 1px rgba(0,0,0,.08);max-width:230px;}
.wa-popup .quicks{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.wa-popup .quicks a{background:#fff;border:1px solid #d9e0e7;border-radius:20px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--teal);}
.wa-popup .pf{padding:12px 14px;background:#fff;display:flex;gap:9px;align-items:center;border-top:1px solid var(--line);}
.wa-popup .pf input{flex:1;background:var(--surface);border:none;border-radius:20px;padding:9px 14px;font-size:13px;font-family:inherit;outline:none;}
.wa-popup .pf button{width:38px;height:38px;border-radius:50%;background:var(--wa);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.wa-popup .pf button svg{width:18px;height:18px;fill:#fff;}

/* ===== responsive ===== */
@media(max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr);}
  .stats .grid{grid-template-columns:repeat(2,1fr);}
  .stats .cell:nth-child(2){border-right:none;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .two-col,.two-col.media-lg{grid-template-columns:1fr;gap:32px;}
  .contact-cards{grid-template-columns:1fr;}
  .cols-3{grid-template-columns:repeat(2,1fr);}
  .footer .top{grid-template-columns:1fr;gap:30px;}
  .langbar .meta{display:none;}
}
@media(max-width:560px){
  .wrap{padding-left:18px;padding-right:18px;}
  .hero h1{font-size:34px;}
  .hero p.lede{font-size:16px;}
  .hero-home .wrap{padding-top:48px;padding-bottom:54px;}
  .page-hero h1{font-size:32px;}
  .section h2,.cta-surface h2{font-size:26px;}
  .section{padding-top:48px;padding-bottom:48px;}
  .cols-3,.cols-4,.card-grid{grid-template-columns:1fr;}
  .why-grid,.cat-grid{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
  .btn-xl{font-size:16px;padding:16px 24px;}
  .hero h1 br{display:none;}
  .stats .num{font-size:30px;}
  .wa-popup{right:14px;width:calc(100vw - 28px);max-width:340px;}
  .wa-float{bottom:18px;right:18px;}
  .gallery .main{height:280px;}
}