*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:#0A2540; --navy-mid:#0D3060; --blue:#0066CC; --blue-lt:#E8F2FF;
  --orange:#FF6B35; --orange-lt:#FFF0EB; --gray-900:#1A2B4A; --gray-700:#4A5568;
  --gray-500:#718096; --gray-100:#F4F7FC; --white:#FFFFFF; --border:#D6E0F0;
  --font:'Plus Jakarta Sans', sans-serif;
}
html { scroll-behavior: smooth; }
body { background:var(--white); color:var(--gray-900); font-family:var(--font); font-weight:400; line-height:1.7; overflow-x:hidden; }
.mw { max-width:1120px; margin:0 auto; width:100%; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--gray-100); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:99px; }
nav { position:fixed; top:0; left:0; right:0; z-index:200; height:68px; padding:0 6vw; background:rgba(255,255,255,0.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
nav .mw { display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:var(--font); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; color:var(--navy); text-decoration:none; display:flex; align-items:center; gap:.5rem; }
.logo-mark { width:30px; height:30px; border-radius:7px; background:var(--navy); display:flex; align-items:center; justify-content:center; }
.logo-mark svg { width:16px; height:16px; fill:white; }
.logo span { color:var(--blue); }
.nav-links { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav-links a { text-decoration:none; color:var(--gray-700); font-size:.875rem; font-weight:500; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--navy); }
.nav-btn { background:var(--orange)!important; color:white!important; padding:.48rem 1.25rem; border-radius:6px; font-size:.875rem!important; font-weight:600!important; }
.nav-btn:hover { opacity:.88; transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:22px; height:2px; background:var(--gray-700); display:block; border-radius:2px; }
.nav-links.open { display:flex; flex-direction:column; position:fixed; top:68px; left:0; right:0; background:white; padding:1.5rem 6vw; gap:1.2rem; border-bottom:1px solid var(--border); z-index:199; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.page-hero { background:linear-gradient(160deg,#0A2540 0%,#0D3060 60%,#0A2540 100%); padding:100px 6vw 52px; position:relative; overflow:hidden; }
.page-hero[style*="background-image"]::after { content:''; position:absolute; inset:0; background:rgba(6,18,38,.78); z-index:0; }
.page-hero .page-hero-pattern { z-index:1; }
.page-hero .mw { position:relative; z-index:2; }
.page-hero-pattern { position:absolute; inset:0; opacity:.04; background-image:radial-gradient(circle,#fff 1px,transparent 1px); background-size:32px 32px; }
.page-hero .mw { position:relative; z-index:2; }
.page-hero-tag { display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.2); padding:.28rem .85rem; border-radius:99px; margin-bottom:1rem; }
.page-hero-tag::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--orange); }
.page-hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; color:white; line-height:1.1; }
.page-hero h1 em { font-style:normal; color:#60A5FA; }
.page-hero p { color:rgba(255,255,255,.65); max-width:560px; margin-top:.9rem; font-size:.97rem; font-weight:300; }
.section { padding:5.5rem 6vw; }
.section-gray { background:var(--gray-100); }
.sec-head { margin-bottom:3rem; }
.sec-tag { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:600; display:block; margin-bottom:.55rem; }
h2 { font-size:clamp(1.75rem,3vw,2.4rem); font-weight:800; letter-spacing:-.025em; color:var(--navy); }
.sec-desc { color:var(--gray-500); max-width:480px; margin-top:.55rem; font-size:.93rem; }
.btn-orange { background:var(--orange); color:white; padding:.82rem 1.9rem; border-radius:7px; font-weight:600; font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 14px rgba(255,107,53,.3); }
.btn-orange:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(255,107,53,.4); }
.btn-outline-white { border:1.5px solid rgba(255,255,255,.25); color:white; padding:.82rem 1.9rem; border-radius:7px; font-size:.9rem; font-weight:500; text-decoration:none; transition:background .2s,border-color .2s; }
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); }
.btn-navy { background:var(--navy); color:white; padding:.82rem 1.9rem; border-radius:7px; font-weight:600; font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:opacity .2s,transform .2s; }
.btn-navy:hover { opacity:.88; transform:translateY(-2px); }
.btn-outline { border:1.5px solid var(--border); color:var(--navy); padding:.82rem 1.9rem; border-radius:7px; font-weight:600; font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:border-color .2s; }
.btn-outline:hover { border-color:var(--navy); }
.svc-card { background:white; border:1px solid var(--border); border-radius:14px; padding:1.8rem; transition:transform .28s,box-shadow .28s,border-color .28s; }
.svc-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,37,64,.1); border-color:var(--blue); }
.svc-icon { width:44px; height:44px; border-radius:10px; background:var(--blue-lt); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.1rem; }
.svc-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.svc-card p { color:var(--gray-500); font-size:.87rem; line-height:1.7; }
.svc-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem; }
.svc-tag { font-size:.67rem; font-weight:600; background:var(--gray-100); color:var(--gray-700); padding:.18rem .55rem; border-radius:99px; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.why-card { border-radius:14px; padding:1.8rem; background:white; border:1px solid var(--border); }
.why-num { font-size:2.2rem; font-weight:800; color:var(--blue); line-height:1; margin-bottom:.8rem; }
.why-card h4 { font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.why-card p { font-size:.84rem; color:var(--gray-500); }
.feature-list { display:flex; flex-direction:column; gap:1.1rem; margin-top:1.8rem; }
.feature-item { display:flex; gap:.9rem; align-items:flex-start; }
.fi-icon { width:36px; height:36px; min-width:36px; border-radius:8px; background:var(--blue-lt); display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.feature-item h4 { font-size:.92rem; font-weight:700; color:var(--navy); }
.feature-item p { font-size:.83rem; color:var(--gray-500); margin-top:.1rem; }
.map-wrap { background:var(--navy); border-radius:18px; padding:1.5rem; aspect-ratio:4/3; overflow:hidden; }
.map-wrap svg { width:100%; height:100%; }
.trust-bar { background:var(--gray-100); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.1rem 6vw; }
.trust-bar .mw { display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.trust-bar span { font-size:.8rem; color:var(--gray-500); font-weight:500; }
.trust-bar strong { color:var(--navy); }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; }
.contact-card { background:white; border:1px solid var(--border); border-radius:14px; padding:1.6rem; text-align:center; }
.contact-card .icon { font-size:1.6rem; margin-bottom:.8rem; }
.contact-card h4 { font-size:.9rem; font-weight:700; color:var(--navy); }
.contact-card p,.contact-card a { font-size:.85rem; color:var(--blue); margin-top:.3rem; font-weight:500; text-decoration:none; display:block; }
.contact-card a:hover { text-decoration:underline; }
.form-wrap { max-width:740px; margin:0 auto; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.fg { display:flex; flex-direction:column; gap:.35rem; }
.fg.full { grid-column:1/-1; }
label { font-size:.73rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-700); font-weight:600; }
input,select,textarea { background:var(--gray-100); border:1.5px solid var(--border); border-radius:8px; padding:.78rem 1rem; color:var(--gray-900); font-family:var(--font); font-size:.92rem; transition:border-color .2s,background .2s; outline:none; -webkit-appearance:none; }
input::placeholder,textarea::placeholder { color:var(--gray-500); }
input:focus,select:focus,textarea:focus { border-color:var(--blue); background:white; }
select option { background:white; }
textarea { resize:vertical; min-height:100px; }
.form-submit { text-align:center; margin-top:1.5rem; }
.btn-submit { background:var(--orange); color:white; padding:.9rem 2.8rem; border-radius:8px; font-family:var(--font); font-weight:700; font-size:.95rem; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 14px rgba(255,107,53,.3); }
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(255,107,53,.4); }
.form-note { font-size:.73rem; color:var(--gray-500); margin-top:.7rem; }
.form-success { display:none; text-align:center; padding:2rem; background:#E8F5E9; border:1px solid #A5D6A7; border-radius:12px; margin-top:1.5rem; color:#2E7D32; }
.faq-cats { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.faq-cat { font-size:.75rem; font-weight:600; padding:.4rem 1rem; border-radius:99px; cursor:pointer; border:1.5px solid var(--border); color:var(--gray-700); background:white; transition:all .2s; }
.faq-cat.active,.faq-cat:hover { background:var(--navy); color:white; border-color:var(--navy); }
.faq-group { display:none; flex-direction:column; gap:.6rem; }
.faq-group.active { display:flex; }
.faq-item { background:white; border:1.5px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:var(--blue); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.4rem; cursor:pointer; user-select:none; }
.faq-q span { font-size:.92rem; font-weight:600; color:var(--navy); line-height:1.4; }
.faq-icon { width:24px; height:24px; min-width:24px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--blue); font-weight:700; transition:background .2s,transform .3s; }
.faq-item.open .faq-icon { background:var(--blue); color:white; transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner { padding:0 1.4rem 1.2rem; font-size:.88rem; color:var(--gray-700); line-height:1.75; }
.faq-a-inner strong { color:var(--navy); }
.faq-item.open .faq-a { max-height:500px; }
.route-card { background:white; border-radius:16px; padding:1.8rem; box-shadow:0 24px 60px rgba(0,0,0,.2); }
.rc-label { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); }
.route-row { display:flex; align-items:center; gap:.8rem; margin:1rem 0; }
.route-port { flex:1; background:var(--gray-100); border-radius:10px; padding:.9rem 1rem; border:1px solid var(--border); }
.port-code { font-size:1.4rem; font-weight:800; color:var(--navy); line-height:1; }
.port-name { font-size:.75rem; color:var(--gray-500); margin-top:.18rem; }
.arrow-mid { display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.arrow-mid svg { width:26px; color:var(--blue); }
.arrow-mid span { font-size:.65rem; color:var(--orange); font-weight:600; white-space:nowrap; }
.svc-pills { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.pill { font-size:.68rem; font-weight:600; padding:.22rem .65rem; border-radius:99px; background:var(--blue-lt); color:var(--blue); }
.pill.orange { background:var(--orange-lt); color:var(--orange); }
.rc-meta { display:flex; gap:1rem; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--border); }
.rc-meta-item .val { font-size:.9rem; font-weight:700; color:var(--navy); }
.rc-meta-item .lbl { font-size:.7rem; color:var(--gray-500); }
.cert-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1.5rem; }
.cert-card { background:white; border:1px solid var(--border); border-radius:12px; padding:1.4rem; display:flex; gap:.9rem; align-items:flex-start; }
.cert-icon { font-size:1.4rem; }
.cert-card h4 { font-size:.88rem; font-weight:700; color:var(--navy); }
.cert-card p { font-size:.8rem; color:var(--gray-500); margin-top:.15rem; }
.info-table { width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.87rem; }
.info-table th { background:var(--navy); color:white; text-align:left; padding:.8rem 1rem; font-size:.82rem; font-weight:600; }
.info-table th:first-child { border-radius:8px 0 0 0; } .info-table th:last-child { border-radius:0 8px 0 0; }
.info-table td { padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.info-table tr:last-child td { border-bottom:none; }
.info-table tr:nth-child(even) td { background:var(--gray-100); }
.badge { display:inline-block; font-size:.68rem; font-weight:600; padding:.18rem .6rem; border-radius:99px; }
.badge-blue { background:var(--blue-lt); color:var(--blue); }
.badge-orange { background:var(--orange-lt); color:var(--orange); }
.badge-green { background:#E8F5E9; color:#2E7D32; }
.cta-banner { background:linear-gradient(135deg,#0A2540 0%,#0D3060 100%); border-radius:20px; padding:3.5rem; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; inset:0; opacity:.04; background-image:radial-gradient(circle,#fff 1px,transparent 1px); background-size:28px 28px; }
.cta-banner h2 { color:white; position:relative; }
.cta-banner p { color:rgba(255,255,255,.65); margin:.6rem auto 2rem; max-width:480px; position:relative; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }
footer { background:var(--navy); color:rgba(255,255,255,.7); padding:4rem 6vw 2rem; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-brand p { font-size:.84rem; max-width:240px; line-height:1.7; margin-top:.75rem; }
.footer-col h5 { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.9rem; }
.footer-col a { display:block; text-decoration:none; color:rgba(255,255,255,.65); font-size:.84rem; margin-bottom:.5rem; transition:color .2s; }
.footer-col a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.78rem; }
.footer-bottom a { color:rgba(255,255,255,.5); text-decoration:none; margin-left:1.2rem; font-size:.78rem; transition:color .2s; }
.footer-bottom a:hover { color:white; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }
@media(max-width:900px) { .two-col { grid-template-columns:1fr; gap:2.5rem; } .three-col { grid-template-columns:1fr 1fr; } .footer-top { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .nav-links { display:none; } .hamburger { display:flex; } .form-grid { grid-template-columns:1fr; } .fg.full { grid-column:1; } .footer-top { grid-template-columns:1fr; gap:2rem; } .three-col { grid-template-columns:1fr; } .cta-banner { padding:2.5rem 1.5rem; } }

/* ── IMAGES & VISUAL SECTIONS ── */
.hero-img-overlay {
  position: absolute; inset: 0;
  background-image: url('images/hero-bg.jpg');
  background-size: cover; background-position: center;
  opacity: .12;
}
.img-card {
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/3; position: relative;
}
.img-card img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .5s ease;
}
.img-card:hover img { transform: scale(1.04); }
.img-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,37,64,.7) 0%, transparent 55%);
}
.img-card-label {
  position: absolute; bottom: 1.2rem; left: 1.4rem;
  color: white; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em;
}
.img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.img-grid .img-card:first-child {
  grid-row: 1 / 3;
  aspect-ratio: 3/4;
}
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 3rem;
}
.photo-strip .img-card { aspect-ratio: 16/10; }
.bg-img-section {
  position: relative; overflow: hidden;
  padding: 6rem 6vw;
}
.bg-img-section .bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .18;
}
.bg-img-section .bg-overlay {
  position: absolute; inset: 0;
  background: var(--navy);
  opacity: .88;
}
.bg-img-section .mw { position: relative; z-index: 1; }
.service-hero-img {
  width: 100%; border-radius: 18px; overflow: hidden;
  aspect-ratio: 21/9; margin-bottom: 3rem;
}
.service-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img-wrap {
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/3; position: relative;
  box-shadow: 0 24px 60px rgba(10,37,64,.18);
}
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-img-badge {
  position: absolute; bottom: 1.5rem; right: 1.5rem;
  background: var(--orange); color: white;
  border-radius: 12px; padding: .9rem 1.2rem;
  text-align: center;
}
.about-img-badge .ab-num { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.about-img-badge .ab-lbl { font-size: .72rem; font-weight: 500; opacity: .85; margin-top: .15rem; }



/* ── SOCIAL ICONS ── */
.social-bar {
  display: flex; align-items: center; gap: .5rem;
}
.social-icon-wrap { display: inline-flex; }
.social-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .2s, transform .2s;
  color: white;
}
.social-icon:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.social-icon.whatsapp:hover { background: #25D366; border-color: #25D366; }
.social-icon.facebook:hover { background: #1877F2; border-color: #1877F2; }
.social-icon.reddit:hover   { background: #FF4500; border-color: #FF4500; }
.social-icon.wechat:hover   { background: #07C160; border-color: #07C160; }

/* ── WECHAT MODAL ── */
#wechat-modal {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.wechat-modal-box {
  background: white; border-radius: 20px; padding: 2rem;
  text-align: center; max-width: 300px; width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.wechat-modal-box h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.wechat-modal-box p { font-size: .82rem; color: var(--gray-500); margin-bottom: 1.2rem; }
.wechat-modal-box img { width: 200px; height: 200px; border-radius: 12px; }
.wechat-modal-box .wc-id { font-size: .85rem; color: #07C160; font-weight: 600; margin-top: .8rem; }
.wechat-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.15); border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 1rem;
  color: white; display: flex; align-items: center; justify-content: center;
}

/* ── FOOTER SOCIAL ROW ── */
.footer-social { display: flex; gap: .5rem; margin-top: 1rem; }
.footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-contact-list li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: rgba(255,255,255,.65); }
.footer-contact-list a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
.footer-contact-list a:hover { color: white; }
.fc-icon { font-size: .9rem; flex-shrink: 0; }

/* ── CONTACT PAGE SOCIAL ── */
.contact-social-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.contact-social-card {
  border-radius: 14px; padding: 1.4rem; text-align: center;
  text-decoration: none; transition: transform .2s, box-shadow .2s;
  border: 1.5px solid var(--border); background: white;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.contact-social-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-social-card .cs-ico { font-size: 1.6rem; }
.contact-social-card h5 { font-size: .85rem; font-weight: 700; color: var(--navy); }
.contact-social-card p { font-size: .78rem; color: var(--gray-500); }
.contact-social-card.wa:hover  { border-color: #25D366; }
.contact-social-card.fb:hover  { border-color: #1877F2; }
.contact-social-card.rd:hover  { border-color: #FF4500; }
.contact-social-card.wc:hover  { border-color: #07C160; }