/* Megatrans — cinematic 4K pass (5-C1 PREVIEW, loads after style.css).
   Direction: Maersk-grade hero (deep grade + docked action bar) × Flexport editorial
   (mono eyebrows, bigger lighter display type). Palette, copy, bilingual untouched. */

:root{
  --mono:'Cascadia Mono','Segoe UI Mono',ui-monospace,Consolas,'Courier New',monospace;
  --grade-a:rgba(3,16,32,.92);  /* deep navy-black */
  --grade-b:rgba(4,30,58,.46);
  --grade-c:rgba(10,40,72,.05);
}

/* ---- 1. deeper cinematic grade on every hero/scene ---- */
.hero .veil{background:linear-gradient(102deg,var(--grade-a) 0%,var(--grade-b) 48%,var(--grade-c) 100%),
            linear-gradient(to top,rgba(3,14,28,.55) 0%,transparent 26%)}
.sveil{background:linear-gradient(102deg,var(--grade-a) 0%,var(--grade-b) 48%,var(--grade-c) 100%),
       linear-gradient(to top,rgba(3,14,28,.6) 0%,transparent 28%)!important}

/* film grain — masks 1080p softness on 4K glass, adds texture (pure CSS, no asset) */
.hero::after,.scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.085;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>")}
@media (prefers-reduced-motion:no-preference){
  .hero::after,.scene::after{animation:grain 1.2s steps(3) infinite}
  @keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-18px,9px)}66%{transform:translate(12px,-14px)}100%{transform:translate(0,0)}}
}

/* ---- 2. display type: bigger, lighter, tighter (field-leader scale) ---- */
.hero h1,.ktitle h1,.ktitle h2{font-weight:500;font-size:clamp(38px,5.8vw,66px);line-height:1.02;
  letter-spacing:-.022em;text-transform:none}
.hero .inner{max-width:min(860px,92vw)}
.ktitle{max-width:min(880px,92vw)}
h2.sec{font-weight:500;font-size:clamp(30px,4vw,52px);letter-spacing:-.02em}

/* mono eyebrows — technical, logistics-operations voice */
.kick,.kicker{font-family:var(--mono)!important;font-weight:500;font-size:11.5px;
  letter-spacing:.28em;text-transform:uppercase;color:#8fd0f8}
.kick::before,.kicker::before{content:"/// ";letter-spacing:0;color:rgba(143,208,248,.55)}

/* ---- 3. docked action bar under the home hero (Maersk pattern) ---- */
.actionbar{position:relative;z-index:5;margin:-46px auto 0;max-width:min(980px,92vw);
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px rgba(4,24,46,.25)}
.actionbar a{display:flex;flex-direction:column;gap:5px;padding:22px 26px;text-decoration:none;
  border-right:1px solid var(--hair);transition:background .25s}
.actionbar a:last-child{border-right:0}
.actionbar a:hover{background:var(--tint)}
.actionbar .ab-k{font:500 10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.actionbar .ab-t{font:500 18px/1.25 var(--hd);letter-spacing:-.01em;color:var(--navy)}
.actionbar .ab-t::after{content:" →";color:var(--blue)}
@media(max-width:760px){.actionbar{grid-template-columns:1fr;margin-top:-30px}
  .actionbar a{border-right:0;border-bottom:1px solid var(--hair)}.actionbar a:last-child{border-bottom:0}}

/* ---- 4. operations strip — verifiable facts only, mono voice ---- */
.opstrip{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;align-items:center;
  padding:18px var(--pad);background:var(--navy);color:#9fc4e4;
  font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.opstrip span{white-space:nowrap}
.opstrip span::before{content:"▸ ";color:var(--sky)}

/* ---- 5. quiet refinements ---- */
.card{border-radius:10px}
.btn{border-radius:8px}
.gen-tag{font-family:var(--mono);letter-spacing:.16em}