/* ═══════════════════════════════════════════════════════════
   ASIA BRIDGE ADVISORS v3 — Editorial B2B Design
   Color palette: #0D1B2A #162232 #0A1520 #2B3E50 #7E9FBF #A8C4DB #C8DCF0
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: rgba(126,159,191,.28); color: #fff; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A1520; }
::-webkit-scrollbar-thumb { background: #2B3E50; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7E9FBF; }

html { scroll-behavior: smooth; }

/* ── Grain texture overlay ────────────────────────────────── */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Custom cursor ────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 40px; height: 40px;
  border: 1px solid rgba(126,159,191,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  top: -20px; left: -20px;
  transition: transform .18s ease, opacity .3s ease, border-color .3s ease, width .3s ease, height .3s ease;
  mix-blend-mode: difference;
}
#cursor-dot {
  position: fixed;
  width: 5px; height: 5px;
  background: #7E9FBF;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  top: -2.5px; left: -2.5px;
  transition: transform .08s ease;
}
#cursor.hovered { width: 56px; height: 56px; border-color: rgba(168,196,219,.7); }
#cursor.clicking { transform: scale(.8); }
body.no-cursor #cursor, body.no-cursor #cursor-dot { opacity: 0; }

/* ── Nav ──────────────────────────────────────────────────── */
#nav { background: #0D1B2A; }
#nav.scrolled {
  background: rgba(13,27,42,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Burger open state */
#burger.open .burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); background: white; }
#burger.open .burger-line:nth-child(2) { opacity: 0; transform: translateX(-8px); }
#burger.open .burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 24px; background: white; }
#mobile-menu.open { max-height: 320px; }

/* ── Section tags ─────────────────────────────────────────── */
.section-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7E9FBF;
}

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="150"] { transition-delay: .15s; }
.reveal[data-delay="300"] { transition-delay: .3s; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero-img { transform-origin: center; }

.hero-overline {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeSlideRight .9s cubic-bezier(.16,1,.3,1) .2s both;
}
.hero-title {
  opacity: 0;
  animation: revealUp 1s cubic-bezier(.16,1,.3,1) .4s both;
}
.hero-sub {
  opacity: 0;
  animation: fadeSlideRight .9s cubic-bezier(.16,1,.3,1) .8s both;
}
.hero-actions {
  opacity: 0;
  animation: fadeSlideRight .9s cubic-bezier(.16,1,.3,1) 1s both;
}

.text-outline {
  -webkit-text-stroke: 2px white;
  color: transparent;
}

.stat-item {
  opacity: 0;
  transform: translateY(16px);
}
.stat-item.visible {
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both;
}
.stat-item:nth-child(1) { animation-delay: .05s; }
.stat-item:nth-child(2) { animation-delay: .15s; }
.stat-item:nth-child(3) { animation-delay: .25s; }
.stat-item:nth-child(4) { animation-delay: .35s; }

/* ── Services accordion ───────────────────────────────────── */
.svc-panel { position: relative; }
.svc-body { max-height: 0; overflow: hidden; }
.svc-body.open { max-height: 1200px; }

.svc-trigger[aria-expanded="true"] .svc-num { color: #7E9FBF; }
.svc-trigger[aria-expanded="true"] .svc-icon { color: #7E9FBF; }
.svc-trigger[aria-expanded="true"] .svc-icon-h { transform: scaleX(0); opacity: 0; }

.svc-card {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .45s ease, transform .45s ease, background .3s, border-color .3s;
}
.svc-body.open .svc-card { opacity: 1; transform: translateY(0) scale(1); }
.svc-body.open .svc-card:nth-child(1) { transition-delay: .06s; }
.svc-body.open .svc-card:nth-child(2) { transition-delay: .12s; }
.svc-body.open .svc-card:nth-child(3) { transition-delay: .18s; }
.svc-body.open .svc-card:nth-child(4) { transition-delay: .24s; }
.svc-body.open .svc-card:nth-child(5) { transition-delay: .30s; }
.svc-body.open .svc-card:nth-child(6) { transition-delay: .36s; }

/* ── Process steps ────────────────────────────────────────── */
.step-row {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.step-row.visible { opacity: 1; transform: translateY(0); }

.step-circle {
  transition: all .4s ease;
}
.step-row:hover .step-circle {
  border-color: #7E9FBF;
  color: #7E9FBF;
  box-shadow: 0 0 32px rgba(126,159,191,.18);
}

/* ── Marquee / Capabilities ───────────────────────────────── */
.marquee-wrap { position: relative; }
.marquee-wrap::before, .marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, #f8fafc, transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left, #f8fafc, transparent); }

@keyframes marquee     { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRtl  { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.marquee-track { animation: marquee 28s linear infinite; }
.marquee-track.marquee-rtl { animation: marqueeRtl 32s linear infinite; }

.cap-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #94A3B8;
  transition: all .3s;
  cursor: default;
}
.cap-pill.active {
  border-color: rgba(126,159,191,.35);
  background: rgba(126,159,191,.08);
  color: #C8DCF0;
}

/* ── About ────────────────────────────────────────────────── */
.about-img { transition: transform .9s cubic-bezier(.25,.46,.45,.94); }
.about-img:hover { transform: scale(1.03); }

.swot-block {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.swot-block.visible { opacity: 1; transform: translateY(0); }
.swot-block:nth-child(2) { transition-delay: .15s; }

.swot-item { transition: background .3s ease; }

/* ── Contact form ─────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 6px;
}
.form-input {
  display: block;
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  color: white;
  outline: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.form-input::placeholder { color: rgba(255,255,255,.22); }
.form-input:focus {
  border-color: rgba(126,159,191,.5);
  background: rgba(126,159,191,.07);
  box-shadow: 0 0 0 3px rgba(126,159,191,.1);
}

.submit-btn { border-radius: 4px; }
.submit-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(126,159,191,.25); }
.submit-btn:active { transform: translateY(0); }

.contact-line { border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 16px; }
.contact-link { position: relative; }
.contact-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: #7E9FBF;
  transition: width .3s ease;
}
.contact-link:hover::after { width: 100%; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(60px) skewY(2deg); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0) skewY(0); clip-path: inset(0 0 0% 0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 768px) {
  .text-outline { -webkit-text-stroke: 1.5px white; }
  #cursor, #cursor-dot { display: none; }
}