/* Art direction layer: industrial precision, restrained motion, no extra payload. */
:root {
  --glow: rgba(58,195,189,.22);
  --glass: rgba(7,25,29,.72);
  --ember: #f05a28;
  --ember-bright: #ff6b35;
  --ember-soft: rgba(240,90,40,.14);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.brand-logo { display:block; width:210px; height:auto; }
.footer-logo { display:block; width:min(300px,100%); height:auto; }

.topbar {
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  background: rgba(237,243,241,.88);
  border-bottom-color: rgba(11,37,42,.11);
}

.navlinks a, .brand, .btn, .service, .intent-card, .mode, .insight-card, .chain-step, .network-grid > *, .renew-card {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

.navlinks a { position: relative; }
.navlinks a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .24s ease;
}
.navlinks a:hover::after, .navlinks a:focus-visible::after { transform: scaleX(1); }

.hero::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .32;
  background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 48%, transparent 88%);
}
.hero-grid { isolation: isolate; }
.hero-proof { position: relative; }
.hero-proof::before { content:"LIVE / OPERATIONS"; display:block; margin-bottom:7px; color:var(--teal); font:600 9px var(--mono); letter-spacing:.14em; }
body .hero h1 em { color:var(--ember-bright); text-shadow:0 0 30px rgba(240,90,40,.18); }
.hero-lede strong { color:var(--ember-bright); font-weight:700; }
.hero-tags span:first-child { border-color:rgba(255,116,83,.72); color:#ffd4ca; background:rgba(232,93,63,.09); }
.hero-cap i { background:linear-gradient(90deg,var(--ember),var(--teal)); }

.hero .btn-primary, header .nav-cta { background:var(--ember); color:#fff; }
.hero .btn-primary:hover, header .nav-cta:hover { background:#d94a1c; color:#fff; }
.hero .eyebrow::before { background:var(--ember); height:2px; }

.btn { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(4,18,21,.12); }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(4,18,21,.22), 0 0 0 3px var(--glow); }

.ink, #van-chuyen-lng, #gastwin {
  background-image: linear-gradient(135deg, rgba(58,195,189,.045), transparent 34%), radial-gradient(circle at 84% 14%, rgba(58,195,189,.10), transparent 25%);
}

.section-head { position: relative; }
.section-head::after { content:""; display:block; width:56px; height:2px; margin-top:22px; background:var(--teal); }

.intent-card:hover, .intent-card:focus-visible, .service:hover, .service:focus-visible, .insight-card:hover, .insight-card:focus-visible {
  transform: translateY(-5px); box-shadow: 0 18px 36px rgba(5,29,34,.14);
}
.service { overflow: hidden; }
.service-thumb { transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.service:hover .service-thumb { transform: scale(1.045); filter: saturate(1.08) contrast(1.03); }
.service:first-child .service-code,
.service:nth-child(2) .service-code { color:var(--ember-bright); }
.service:first-child .service-code small,
.service:nth-child(2) .service-code small { background:var(--ember); color:#fff; }
.service:first-child:hover,
.service:nth-child(2):hover { background:linear-gradient(90deg,var(--ember-soft),transparent 74%); }
.service:first-child .service-arrow,
.service:nth-child(2) .service-arrow { color:var(--ember-bright); }

.intent-card:first-child::before,
.intent-card:nth-child(4)::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ember);
}
.intent-card:first-child .intent-num,
.intent-card:nth-child(4) .intent-num { color:var(--ember); }

.mode { overflow:hidden; }
.mode::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg, var(--teal), transparent 72%); opacity:.65; }
.mode:hover { transform: translateY(-5px); box-shadow: 0 18px 32px rgba(5,29,34,.12); z-index:1; }
.mode-img { display:block; filter:saturate(.9) contrast(1.04); transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.mode:hover .mode-img { transform:scale(1.035); filter:saturate(1.08) contrast(1.05); }
.mode.lead { outline-color:var(--ember); }
.mode.lead::after { background:linear-gradient(90deg,var(--ember),var(--teal) 58%,transparent); opacity:1; }
.mode.lead .index, .mode.lead .mode-foot { color:var(--ember); }

.chain-step.active { box-shadow: 0 16px 32px rgba(7,25,29,.18); }
.chain-step:hover { transform: translateX(5px); }

.network-grid > * { position:relative; overflow:hidden; }
.network-grid > *::before { content:""; position:absolute; width:180px; height:180px; right:-75px; top:-95px; border:1px solid rgba(58,195,189,.25); border-radius:50%; }
.network-grid > *:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(5,29,34,.11); }

.metric:first-child { border-color:rgba(255,116,83,.65); background:linear-gradient(135deg,rgba(232,93,63,.18),rgba(4,17,20,.82)); }
.metric:first-child b { color:var(--ember-bright); }
.pulse { background:var(--ember); box-shadow:0 0 0 5px rgba(232,93,63,.14); }

.context-visual { position:relative; min-height:clamp(280px,38vw,500px); margin:28px 0 0; overflow:hidden; background:var(--ink); }
.context-visual img { width:100%; height:100%; min-height:inherit; object-fit:cover; }
.context-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,19,22,.82),rgba(4,19,22,.08) 70%); }
.context-visual figcaption { position:absolute; z-index:1; left:clamp(22px,4vw,52px); bottom:clamp(20px,4vw,42px); max-width:23ch; color:#fff; font:700 clamp(28px,3.5vw,52px)/.95 var(--disp); text-transform:uppercase; }
.ops-visual { min-height:480px; margin:0; }
.ops-visual figcaption { font-size:clamp(26px,3vw,44px); }

.route path { stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(58,195,189,.55)); }
.motion-ready .reveal { opacity:0; transform:translate3d(0,22px,0); transition:opacity .62s ease,transform .62s cubic-bezier(.2,.8,.2,1); }
.motion-ready .reveal.is-visible { opacity:1; transform:none; }
.motion-ready .context-visual img { transform:translate3d(0,var(--visual-shift,0px),0) scale(1.045); will-change:transform; }

.cta a[download] {
  display:inline-flex; align-items:center; gap:8px; padding:11px 15px;
  background:var(--ember); color:#fff; text-decoration:none; box-shadow:0 10px 24px rgba(85,25,15,.16);
}
.cta a[download]:hover, .cta a[download]:focus-visible { background:#d94e32; transform:translateY(-2px); }
body .contact-form button { background:linear-gradient(90deg,var(--ember),var(--ember-bright)); color:#fff; }
.contact-form button:hover { filter:brightness(1.06); }

.faq-item, details { border-left: 2px solid transparent; transition: border-color .2s ease, background .2s ease; }
.faq-item:hover, details:hover { border-left-color: var(--teal); background: rgba(58,195,189,.035); }

::selection { background: var(--teal); color: var(--ink); }
:focus-visible { outline: 3px solid rgba(58,195,189,.7); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .motion-ready .reveal { opacity:1; transform:none; }
  .motion-ready .context-visual img { transform:none; }
}
@media (max-width: 700px) {
  .brand-logo { width:172px; }
  .hero::before { background-size:48px 48px; opacity:.18; }
  .section-head::after { margin-top:16px; }
  .context-visual { min-height:300px; }
  .ops-visual { min-height:390px; }
  .intent-card:hover, .service:hover, .insight-card:hover, .mode:hover, .network-grid > *:hover { transform:none; }
}