/* ============================================================
   ZEPTUNE GLOBAL — Design System
   Palette: customs-seal gold on ink navy, with a cool steel-blue
   secondary and a paper-toned section for document contrast.
   Display type: Space Grotesk (legible, modern, corporate)
   Body/utility: IBM Plex Sans / IBM Plex Mono (ledger & manifest feel)
   ============================================================ */

:root{
  --ink:        #0A0E17;
  --ink-2:      #0D1220;
  --panel:      #131B2C;
  --panel-2:    #1A2438;
  --line:       rgba(233,228,216,0.14);
  --line-soft:  rgba(233,228,216,0.08);

  --gold:       #C9982E;
  --gold-light: #E7C36E;
  --gold-dim:   rgba(201,152,46,0.16);

  --steel:      #6B84A8;
  --steel-light:#A7BEDD;
  --steel-ink:  #3E5A82;
  --steel-dim:  rgba(107,132,168,0.18);

  --paper:      #F3EEE2;
  --paper-2:    #EAE2CE;
  --ink-text:   #16181D;
  --ink-mute:   #5B5A50;

  --off-white:  #ECE7DA;
  --mist:       #ADB8C9;

  --radius-s: 3px;
  --radius-m: 6px;
  --container: 1220px;

  --display: "Space Grotesk", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-stamp: cubic-bezier(.2,1.6,.4,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--off-white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--gold); color:var(--ink); padding:10px 16px;
  z-index:1000; border-radius:var(--radius-s); font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--steel-light);
  outline-offset:3px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  margin:0;
  color:var(--off-white);
  letter-spacing:0;
}
.section-light h1,.section-light h2,.section-light h3,.section-light h4{ color:var(--ink-text); }

h1,h2{ text-transform:uppercase; letter-spacing:0.005em; line-height:1; }
h1{ font-size:clamp(2.6rem, 6vw, 5.2rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.4rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:600; }
h4{ font-weight:600; }

p{ margin:0 0 1em; color:var(--mist); }
.section-light p{ color:var(--ink-mute); }

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-light);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold-light);
  display:inline-block;
}
.section-light .eyebrow{ color:#8A6A17; }
.section-light .eyebrow::before{ background:#8A6A17; }

.lede{ font-size:1.1rem; max-width:640px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:#1A1300; }
.btn-gold:hover{ background:var(--gold-light); }
.btn-outline{ background:transparent; color:var(--off-white); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.section-light .btn-outline{ color:var(--ink-text); border-color:rgba(20,20,20,0.18); }
.section-light .btn-outline:hover{ border-color:var(--gold); color:#8A6A17; }
.btn-sm{ padding:10px 18px; font-size:0.75rem; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:18px 0;
  transition:background .25s ease, padding .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(10,14,23,0.92);
  backdrop-filter:blur(10px);
  padding:12px 0;
  border-bottom-color:var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:34px; height:34px; color:var(--gold); flex:none; }
.brand-word{
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--off-white);
  line-height:1;
}
.brand-word span{ color:var(--gold-light); }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav ul{ display:flex; gap:28px; }
.main-nav a{
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--mist);
  position:relative;
  padding:4px 0;
  transition:color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--off-white); }
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold);
}
.nav-cta{ display:flex; align-items:center; gap:14px; }

.menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:transparent; cursor:pointer; align-items:center;
}
.menu-toggle span{ width:18px; height:2px; background:var(--off-white); transition:transform .2s ease, opacity .2s ease; }
@media (min-width:1040px){ .menu-toggle{ display:none; } }
.main-nav{ display:none; }
@media (min-width:1040px){ .main-nav{ display:flex; } }

body.nav-open .main-nav{
  display:flex; position:fixed; inset:0; top:0; padding:100px 24px 40px;
  background:var(--ink); flex-direction:column; align-items:flex-start; z-index:400;
}
body.nav-open .main-nav ul{ flex-direction:column; gap:22px; }
body.nav-open .main-nav a{ font-size:1.1rem; }
body.nav-open .nav-cta{ margin-top:30px; }
body.nav-open .nav-cta .btn{ display:inline-flex; }
body.nav-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
body.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
body.nav-open{ overflow:hidden; }

/* ---------- Sections ---------- */
section{ position:relative; padding:100px 0; overflow:clip; }
.section-tight{ padding:64px 0; }
.section-light{ background:var(--paper); color:var(--ink-text); }
.section-panel{ background:var(--panel); }
.section-ink{ background:var(--ink); }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:56px; flex-wrap:wrap;
}
.section-head .lede{ margin:0; }

/* ═══════════════════════════════════════
   CINEMATIC HERO
═══════════════════════════════════════ */
.hero-cinematic{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(201,152,46,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%,  rgba(107,132,168,0.11) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 60%,  rgba(201,152,46,0.07) 0%, transparent 40%),
    var(--ink);
  padding:0;
}

/* Logistics routes animation - professional transport */
.logistics-routes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:0.7;
}

.route-path{
  opacity:0;
  animation:routeFadeIn 2s ease 1.5s forwards;
}

@keyframes routeFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.transport-icon{
  opacity:0;
  animation:iconFadeIn 0.8s ease forwards;
}

.ship-icon{
  animation:iconFadeIn 0.8s ease 2.5s forwards, moveAlongSea 35s linear 3s infinite;
  transform-origin:center;
}

.plane-icon{
  animation:iconFadeIn 0.8s ease 2.8s forwards, moveAlongAir 25s linear 3.3s infinite;
  transform-origin:center;
}

.truck-icon{
  animation:iconFadeIn 0.8s ease 3.1s forwards, moveAlongGround 30s linear 3.6s infinite;
  transform-origin:center;
}

@keyframes iconFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Animate ship along sea route */
@keyframes moveAlongSea{
  0%{ offset-path:path('M 50,400 Q 300,380 600,400 T 1150,400'); offset-distance:0%; }
  100%{ offset-path:path('M 50,400 Q 300,380 600,400 T 1150,400'); offset-distance:100%; }
}

/* Animate plane along air route */
@keyframes moveAlongAir{
  0%{ offset-path:path('M 100,200 Q 400,150 600,180 T 1100,220'); offset-distance:0%; }
  100%{ offset-path:path('M 100,200 Q 400,150 600,180 T 1100,220'); offset-distance:100%; }
}

/* Animate truck along ground route */
@keyframes moveAlongGround{
  0%{ offset-path:path('M 150,600 Q 400,580 700,590 T 1100,600'); offset-distance:0%; }
  100%{ offset-path:path('M 150,600 Q 400,580 700,590 T 1100,600'); offset-distance:100%; }
}

.hub-markers{
  opacity:0;
  animation:routeFadeIn 1.5s ease 3s forwards;
}

.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ── Stage: two-phase layout ── */
.hero-stage{
  position:relative; z-index:2;
  width:100%; max-width:1100px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;

  /* Phase 1 defaults — centered, single column */
  flex-direction:column;
  gap:0;
  transition:gap 0.8s ease;
}

/* Phase 1: everything centered */
.hero-stage.phase-intro{
  flex-direction:column;
}

/* Phase 2: side by side */
.hero-stage.phase-split{
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:clamp(40px, 6vw, 90px);
}

/* ── Logo side ── */
.hero-logo-side{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  /* Phase 1: centered + full intro size */
  transition: transform 0.9s cubic-bezier(.4,0,.2,1);
}

/* Phase 2: logo shrinks slightly to leave room */
.phase-split .hero-logo-side{
  transform: scale(0.82);
}

/* ── Professional logistics animation container ── */
.logo-container{
  position:relative;
  width:280px; height:280px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.world-lines{
  position:absolute;
  inset:-20px;
  width:calc(100% + 40px);
  height:calc(100% + 40px);
  opacity:0;
  animation:worldReveal 1.5s ease 0.3s forwards;
}

@keyframes worldReveal{
  from{ opacity:0; transform:scale(0.9); }
  to{ opacity:1; transform:scale(1); }
}

/* ── Logo core with professional reveal ── */
.logo-core{
  position:relative;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
}

.logo-ring{
  position:absolute;
  width:160px; height:160px;
  border:2px solid var(--gold);
  border-radius:50%;
  opacity:0;
  animation:ringExpand 1s ease 0.5s forwards;
}

@keyframes ringExpand{
  from{ opacity:0; transform:scale(0.7); border-width:4px; }
  to{ opacity:0.3; transform:scale(1); border-width:2px; }
}

.logo-img-reveal{
  width:130px; height:130px; object-fit:contain;
  position:relative; z-index:3; border-radius:50%;
  opacity:0; animation:logoReveal 0.8s ease 0.8s forwards;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}
@keyframes logoReveal{
  from{ opacity:0; transform:scale(0.85); }
  to  { opacity:1; transform:scale(1);    }
}

/* Status indicators - professional tracking dots */
.status-indicators{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.status-dot{
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(201,152,46,0.6);
  opacity:0;
}

.status-1{
  top:15%; right:20%;
  animation:statusPulse 2s ease 2s infinite, statusFadeIn 0.6s ease 2s forwards;
}
.status-2{
  bottom:20%; left:15%;
  animation:statusPulse 2s ease 2.3s infinite, statusFadeIn 0.6s ease 2.3s forwards;
}
.status-3{
  top:50%; right:10%;
  animation:statusPulse 2s ease 2.6s infinite, statusFadeIn 0.6s ease 2.6s forwards;
}

@keyframes statusFadeIn{
  from{ opacity:0; transform:scale(0); }
  to{ opacity:0.8; transform:scale(1); }
}

@keyframes statusPulse{
  0%, 100%{ box-shadow:0 0 12px rgba(201,152,46,0.6); opacity:0.8; }
  50%{ box-shadow:0 0 20px rgba(201,152,46,0.9); opacity:1; }
}

/* ── Text block ── */
.hero-text-block{
  /* Phase 1: invisible, collapsed */
  opacity:0;
  pointer-events:none;
  transform:translateX(40px);
  max-width:520px;
  transition: none; /* JS drives phase change, CSS handles the reveal */
}

/* Phase 2: text revealed via class added by JS */
.hero-text-block.text-reveal{
  animation:textSlideIn 0.85s cubic-bezier(.25,0,.2,1) forwards;
  pointer-events:auto;
}
@keyframes textSlideIn{
  from{ opacity:0; transform:translateX(48px); }
  to  { opacity:1; transform:translateX(0);    }
}

.hero-badges-center{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.pill{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:7px 13px; border:1px solid var(--line); border-radius:99px; color:var(--mist);
  display:inline-flex; align-items:center; gap:7px;
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-light); flex:none; }

.hero-headline{
  font-size:clamp(2.4rem, 5vw, 4rem);
  line-height:1.13; margin-bottom:20px;
  display:flex; flex-direction:column; gap:4px;
}
.hl-line{ display:block; }
.hero-headline em{
  font-style:normal; color:var(--gold-light);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:10px; text-decoration-thickness:3px;
}
.hero-lede{
  color:var(--mist); font-size:1.05rem; line-height:1.7; margin-bottom:8px;
}
.hero-actions-center{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;
}

/* ── Scroll cue ── */
.hero-scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:0.65rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--mist);
  opacity:0; pointer-events:none;
  transition:opacity 0.8s ease;
}
.hero-scroll-cue.cue-show{ opacity:0.5; }
.scroll-line{
  width:1px; height:36px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{ opacity:0.4; transform:scaleY(1);    }
  50%     { opacity:1;   transform:scaleY(1.18); }
}

/* hide old elements */
.hero-cinematic .hero-panel,
.hero-cinematic .seal-float,
.hero-cinematic .hero-logo-card,
.hero-cinematic .hero-floats{ display:none; }

/* ── Responsive ── */
@media (max-width:760px){
  .hero-stage.phase-split{
    flex-direction:column;
    gap:32px;
  }
  .phase-split .hero-logo-side{ transform:scale(0.75); }
  .logo-container{ width:220px; height:220px; }
  .logo-img-reveal{ width:100px; height:100px; }
  .hero-text-block{ text-align:center; }
  .hero-headline{ font-size:clamp(2rem,9vw,3rem); }
  .hero-actions-center{ justify-content:center; }
  .hero-badges-center{ justify-content:center; }
  @keyframes textSlideIn{
    from{ opacity:0; transform:translateY(32px); }
    to  { opacity:1; transform:translateY(0);    }
  }
  
  .logistics-routes{
    opacity:0.4;
  }
}

/* legacy hero (other pages) */
.hero:not(.hero-cinematic){
  min-height:100vh; display:flex; align-items:center;
  padding:150px 0 80px;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(107,132,168,0.14), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(201,152,46,0.12), transparent 50%),
    var(--ink);
}
.hero:not(.hero-cinematic) .hero-grid{
  display:grid; grid-template-columns:1fr; gap:50px; align-items:center; position:relative;
}
@media (min-width:960px){ .hero:not(.hero-cinematic) .hero-grid{ grid-template-columns:1.15fr 0.85fr; } }
.hero:not(.hero-cinematic) h1{ margin-bottom:22px; }
.hero:not(.hero-cinematic) h1 em{
  font-style:normal; color:var(--gold-light);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:8px; text-decoration-thickness:3px;
}
.hero:not(.hero-cinematic) .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-panel{
  position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius-m); padding:30px;
}
.hero-panel-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line-soft); font-family:var(--mono);
}
.hero-panel-row:last-child{ border-bottom:none; }
.hero-panel-row .label{ color:var(--mist); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; }
.hero-panel-row .value{ color:var(--off-white); font-size:1.05rem; font-weight:600; }
.hero-panel-row .value.accent{ color:var(--gold-light); }
.seal-float{
  position:absolute; top:-40px; right:-20px; width:150px; height:150px;
  color:var(--gold); opacity:0.35;
  animation:stampIn .7s var(--ease-stamp) both; animation-delay:.2s;
}
@keyframes stampIn{
  0%{ transform:scale(1.6) rotate(-18deg); opacity:0; }
  100%{ transform:scale(1) rotate(-10deg); opacity:0.35; }
}

/* ---------- Stat strip ---------- */
.stat-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.stat-strip .wrap{
  display:grid; grid-template-columns:repeat(2,1fr); gap:30px; padding:40px 24px;
}
@media (min-width:760px){ .stat-strip .wrap{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:left; border-left:2px solid var(--gold); padding-left:16px; }
.stat .num{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--off-white); line-height:1; }
.stat .cap{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--mist); margin-top:8px; }

/* ---------- Intro / pull statement ---------- */
.intro-statement{ padding:110px 0; }
.intro-statement blockquote{
  font-family:var(--display); font-weight:700; text-transform:none;
  font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.3; color:var(--off-white);
  max-width:920px; margin:0; letter-spacing:0.005em;
}
.intro-statement blockquote strong{ color:var(--gold-light); font-weight:700; }
.intro-statement cite{ display:block; margin-top:26px; font-family:var(--mono); font-size:0.8rem; color:var(--mist); font-style:normal; letter-spacing:0.04em; }

/* ---------- Service cards ---------- */
.service-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:rgba(20,20,20,0.10); border:1px solid rgba(20,20,20,0.10); }
@media (min-width:640px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .service-grid{ grid-template-columns:repeat(3,1fr); } }
.service-card{
  background:var(--paper); padding:34px 28px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .2s ease;
}
.service-card:hover{ background:var(--paper-2); }
.service-code{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; color:#8A6A17; }
.service-icon{ width:34px; height:34px; color:var(--steel-ink); }
.service-card h3{ font-size:1.15rem; letter-spacing:0.01em; }
.service-card .tagline{ font-family:var(--mono); font-size:0.78rem; color:#8A6A17; text-transform:none; letter-spacing:0; margin:-8px 0 0; }
.service-card p{ font-size:0.95rem; margin:0; flex:1; }
.service-card .more{ font-family:var(--mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--steel-ink); }

/* ---------- Differentiators ---------- */
.diff-grid{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--line); }
@media (min-width:760px){ .diff-grid{ grid-template-columns:repeat(4,1fr); } }
.diff-card{ background:var(--panel); padding:30px 26px; }
.diff-card .num{ font-family:var(--mono); font-size:0.78rem; color:var(--gold-light); margin-bottom:14px; display:block; }
.diff-card h3{ margin-bottom:10px; font-size:1.05rem; }
.diff-card p{ font-size:0.92rem; margin:0; }

/* ---------- Process ---------- */
.process{ position:relative; }
.process-track{
  display:grid; grid-template-columns:1fr; gap:36px; position:relative;
}
@media (min-width:640px){
  .process-track{ grid-template-columns:repeat(2,1fr); gap:32px 28px; }
}
@media (min-width:960px){
  .process-track{ grid-template-columns:repeat(3,1fr); gap:40px 32px; }
}
.process-step{ position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:26px 24px; }
.process-step .step-num{
  font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--ink);
  background:var(--gold); width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; z-index:2;
}
.process-step h3{ font-size:1.05rem; margin-bottom:10px; }
.process-step p{ font-size:0.92rem; margin:0; }
.am-tag{
  display:inline-block; margin-top:16px; font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-light);
  border:1px solid var(--gold-dim); background:var(--gold-dim); border-radius:99px; padding:5px 11px;
}

/* ---------- Industries ---------- */
.industry-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(233,228,216,0.08); border:1px solid rgba(233,228,216,0.08); }
@media (min-width:640px){ .industry-grid{ grid-template-columns:repeat(4,1fr); } }
.industry-card{
  background:var(--ink-2); padding:26px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.industry-icon{ width:30px; height:30px; color:var(--gold-light); }
.industry-card span{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em; color:var(--off-white); }

/* ---------- Network / ports ---------- */
.network{ display:grid; grid-template-columns:1fr; gap:50px; align-items:center; }
@media (min-width:940px){ .network{ grid-template-columns:1fr 1fr; } }
.port-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
@media (min-width:520px){ .port-list{ grid-template-columns:repeat(3,1fr); } }
.port-list li{
  font-family:var(--mono); font-size:0.85rem; color:var(--off-white);
  padding:14px 4px 14px 20px; border-bottom:1px solid var(--line); position:relative;
}
.port-list li::before{ content:"\2022"; color:var(--gold-light); position:absolute; left:0; }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:760px){ .testi-grid{ grid-template-columns:repeat(3,1fr); } }
.testi-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:30px; display:flex; flex-direction:column; gap:20px;
}
.testi-mark{ font-family:var(--display); font-size:2.6rem; color:var(--gold); line-height:1; opacity:0.7; }
.testi-card p.quote{ color:var(--off-white); font-size:0.98rem; margin:0; flex:1; }
.testi-who{ font-family:var(--mono); font-size:0.78rem; color:var(--mist); border-top:1px solid var(--line-soft); padding-top:16px; }
.testi-who strong{ display:block; color:var(--off-white); font-size:0.9rem; font-family:var(--body); font-weight:600; margin-bottom:2px; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:840px; }
.faq-item{ border-bottom:1px solid var(--line); }
.section-light .faq-item{ border-bottom-color:rgba(20,20,20,0.12); }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; font-family:var(--display); font-weight:700; text-transform:none;
  font-size:1.05rem; letter-spacing:0; color:var(--off-white);
}
.section-light .faq-item summary{ color:var(--ink-text); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .icon-plus{ flex:none; width:20px; height:20px; position:relative; }
.faq-item .icon-plus::before,.faq-item .icon-plus::after{
  content:""; position:absolute; background:var(--gold); transition:transform .2s ease;
}
.faq-item .icon-plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq-item .icon-plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); }
.faq-item[open] .icon-plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-item p{ padding-bottom:24px; margin:0; max-width:700px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 100%);
  color:#1A1300; padding:70px 0;
}
.cta-banner .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:30px; }
.cta-banner h2{ color:#1A1300; font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:600px; }
.cta-banner .btn-gold{ background:#1A1300; color:var(--gold-light); }
.cta-banner .btn-gold:hover{ background:#2A2000; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:44px; margin-bottom:60px; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1.2fr; } }
.footer-brand p{ max-width:280px; font-size:0.92rem; }
.footer-col h4{ font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--mist); margin-bottom:18px; font-weight:600; }
.footer-col li{ margin-bottom:11px; }
.footer-col a{ font-size:0.92rem; color:var(--off-white); transition:color .2s ease; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-contact li{ font-size:0.92rem; color:var(--off-white); margin-bottom:12px; }
.footer-contact .lbl{ display:block; font-family:var(--mono); font-size:0.7rem; color:var(--mist); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.social-row svg{ width:16px; height:16px; }
.social-row a:hover{ border-color:var(--gold-light); color:var(--gold-light); }

.badge-row{ display:flex; flex-wrap:wrap; gap:10px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:26px; }
.badge-row .pill{ color:var(--off-white); }

.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-family:var(--mono); font-size:0.75rem; color:var(--mist); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:150px 0 70px;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(107,132,168,0.13), transparent 55%),
    var(--ink);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{ margin-bottom:20px; }
.page-hero h1{ max-width:900px; }
.page-hero .lede{ margin-top:20px; max-width:680px; }

/* ---------- Content blocks (about/services) ---------- */
.two-col{ display:grid; grid-template-columns:1fr; gap:56px; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; align-items:start; } }
.check-list li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:0.95rem; }
.section-light .check-list li{ border-bottom-color:rgba(20,20,20,0.1); }
.check-list li svg{ flex:none; width:18px; height:18px; color:var(--gold); margin-top:2px; }

.license-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); margin-top:10px; }
@media (min-width:640px){ .license-grid{ grid-template-columns:repeat(4,1fr); } }
.license-card{ background:var(--panel); padding:22px 18px; text-align:center; }
.license-card svg{ width:26px; height:26px; color:var(--gold); margin:0 auto 12px; }
.license-card span{ font-family:var(--mono); font-size:0.78rem; color:var(--off-white); }

.seal-badge{ width:110px; height:110px; color:var(--gold); margin:0 auto; }

/* ---------- Beyond-logistics add-on list (intentionally lower-key than core services) ---------- */
.addon-list{ display:grid; grid-template-columns:1fr; gap:0; margin:8px 0 22px; border-top:1px solid rgba(20,20,20,0.12); }
@media (min-width:700px){ .addon-list{ grid-template-columns:1fr 1fr; } }
.addon-list li{
  padding:18px 22px 18px 0; border-bottom:1px solid rgba(20,20,20,0.12);
  font-size:0.92rem; color:var(--ink-mute); list-style:none;
}
.addon-list li strong{
  display:block; color:var(--ink-text); font-family:var(--display); font-weight:600;
  margin-bottom:4px; font-size:0.98rem;
}

/* ---------- Services detail (accordion) ---------- */
.service-detail{ border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:18px; overflow:hidden; background:var(--panel); }
.service-detail summary{
  cursor:pointer; list-style:none; padding:26px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.service-detail summary::-webkit-details-marker{ display:none; }
.service-detail-head{ display:flex; align-items:center; gap:18px; }
.service-detail-head .service-code{ color:var(--gold-light); }
.service-detail-head h3{ font-size:1.2rem; margin:0; }
.service-detail-head .tagline{ font-family:var(--mono); font-size:0.8rem; color:var(--mist); text-transform:none; letter-spacing:0; margin-top:4px; }
.service-detail-body{ padding:0 28px 30px; border-top:1px solid var(--line-soft); }
.service-detail-body .items-list{ display:grid; grid-template-columns:1fr; gap:0; margin:22px 0; }
@media (min-width:640px){ .service-detail-body .items-list{ grid-template-columns:1fr 1fr; } }
.service-detail-body .items-list li{ font-size:0.92rem; padding:9px 0 9px 20px; position:relative; border-bottom:1px solid var(--line-soft); color:var(--off-white); }
.service-detail-body .items-list li::before{ content:"\2192"; position:absolute; left:0; color:var(--gold-light); }
.mini-faq{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:var(--radius-s); padding:18px 20px; margin-top:10px; }
.mini-faq .q{ font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold-light); margin-bottom:8px; }
.mini-faq p{ margin:0; font-size:0.92rem; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:50px; }
@media (min-width:940px){ .contact-grid{ grid-template-columns:0.9fr 1.1fr; } }
.contact-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:34px; margin-bottom:20px; }
.contact-card h3{ font-size:1rem; margin-bottom:16px; }
.contact-card a, .contact-card p{ font-size:0.98rem; }
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--mist); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:13px 14px; color:var(--off-white); font-family:var(--body); font-size:0.95rem;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
  appearance:none; -webkit-appearance:none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,152,46,0.15);
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:rgba(160,172,196,0.45); }
.form-field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0acc4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.form-field select option{ background:var(--ink-2); color:var(--off-white); }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-field .req{ color:var(--gold-light); margin-left:2px; }
.form-row{ display:grid; grid-template-columns:1fr; gap:0 20px; }
@media (min-width:600px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:0.82rem; color:var(--mist); margin-top:16px; }
.map-frame{ border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; margin-top:24px; filter:grayscale(0.3) invert(0.92) contrast(0.9); }
.map-frame iframe{ width:100%; height:280px; border:0; display:block; }

/* Submit button spinner */
.btn-spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  animation:spin 0.7s linear infinite;
  display:none; /* hidden by default, JS shows it */
  vertical-align:middle; margin-left:8px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Form feedback banners */
.form-feedback{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 20px; border-radius:var(--radius-s);
  margin-top:20px; font-size:0.9rem; line-height:1.55;
}
.form-feedback svg{ width:22px; height:22px; flex:none; margin-top:1px; }
.form-feedback strong{ display:block; margin-bottom:4px; }
.form-feedback p{ margin:0; }
.form-feedback a{ text-decoration:underline; }
.form-feedback--success{
  background:rgba(52,199,89,0.08);
  border:1px solid rgba(52,199,89,0.3);
  color:#4ade80;
}
.form-feedback--success a{ color:#4ade80; }
.form-feedback--error{
  background:rgba(255,69,58,0.08);
  border:1px solid rgba(255,69,58,0.3);
  color:#f87171;
}
.form-feedback--error a{ color:#f87171; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.small-note{ font-family:var(--mono); font-size:0.78rem; color:var(--mist); letter-spacing:0.03em; }

/* Container / manifest divider motif used between major sections */
.stencil-divider{
  display:flex; align-items:center; gap:14px; padding:26px 0;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--mist);
}
.stencil-divider::before, .stencil-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Brand refresh + motion layer ---------- */
.brand-mark-wrap{
  width:44px; height:44px; padding:4px; border-radius:10px;
  background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.16);
  display:grid; place-items:center; flex:none;
  transition:transform .28s ease, box-shadow .28s ease;
}
.brand:hover .brand-mark-wrap{ transform:translateY(-2px) rotate(-2deg); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.brand-mark-img{ width:100%; height:100%; object-fit:cover; border-radius:7px; }

/* hero atmosphere handled by .hero-cinematic */

/* Crisper page rhythm */
section{ padding:82px 0; }
.section-tight{ padding:52px 0; }
.section-head{ margin-bottom:42px; }
.lede{ font-size:1rem; line-height:1.55; }
.service-card p{ line-height:1.5; }
.diff-card p,.process-step p{ line-height:1.5; }

/* Scroll reveal: subtle, fast, professional */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.js [data-reveal].is-visible{ opacity:1; transform:none; }
.js .service-grid [data-reveal]:nth-child(2),
.js .diff-grid [data-reveal]:nth-child(2),
.js .process-track [data-reveal]:nth-child(2),
.js .testi-grid [data-reveal]:nth-child(2){ transition-delay:.07s; }
.js .service-grid [data-reveal]:nth-child(3),
.js .diff-grid [data-reveal]:nth-child(3),
.js .process-track [data-reveal]:nth-child(3),
.js .testi-grid [data-reveal]:nth-child(3){ transition-delay:.14s; }
.js .service-grid [data-reveal]:nth-child(4),
.js .diff-grid [data-reveal]:nth-child(4),
.js .process-track [data-reveal]:nth-child(4){ transition-delay:.21s; }
.js .service-grid [data-reveal]:nth-child(5),
.js .process-track [data-reveal]:nth-child(5){ transition-delay:.28s; }
.js .service-grid [data-reveal]:nth-child(6){ transition-delay:.35s; }
.js .service-grid [data-reveal]:nth-child(7){ transition-delay:.42s; }

/* More tactile interactions */
.service-card{ transform:translateY(0); transition:transform .28s ease, background .2s ease, box-shadow .28s ease; }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(10,14,23,.10); position:relative; z-index:2; }
.service-card .service-icon{ transition:transform .3s ease; }
.service-card:hover .service-icon{ transform:translateX(4px) scale(1.06); }
.diff-card,.process-step,.testi-card,.contact-card,.service-detail{ transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.diff-card:hover,.process-step:hover,.testi-card:hover,.contact-card:hover{ transform:translateY(-4px); border-color:rgba(201,152,46,.35); box-shadow:0 16px 36px rgba(0,0,0,.14); }
.port-list li{ transition:padding-left .2s ease, color .2s ease, background .2s ease; }
.port-list li:hover{ padding-left:26px; color:var(--gold-light); background:rgba(255,255,255,.025); }

/* Hero atmosphere — grid overlay handled by .hero-grid-overlay in cinematic hero */
.hero:not(.hero-cinematic)::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px; mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-panel{ box-shadow:0 22px 60px rgba(0,0,0,.18); }
.seal-float{ animation:floatSeal 5s ease-in-out infinite; }
@keyframes floatSeal{ 0%,100%{ transform:translateY(0) rotate(-10deg); } 50%{ transform:translateY(-8px) rotate(-6deg); } }

/* Buttons get a directional motion cue */
.btn::after{ content:"↗"; font-size:1rem; line-height:1; transition:transform .2s ease; }
.btn:hover::after{ transform:translate(3px,-3px); }

@media (max-width:700px){
  section{ padding:68px 0; }
  .hero:not(.hero-cinematic){ padding-top:126px; }
  h1{ font-size:clamp(2.35rem,12vw,4rem); }
}


/* ============================================================
   ZEPTUNE 2.0 — GLOBAL TRADE CONTROL TOWER
   A restrained logistics visualization: network routes, shipment
   packets and a customs clearance core. Designed to feel like
   a premium control-tower product, not a generic tech animation.
   ============================================================ */

body::before{
  content:"";
  position:fixed; inset:0 0 auto 0; height:2px; z-index:9999;
  transform:scaleX(var(--scroll-progress,0)); transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--steel-light));
  pointer-events:none;
}
.page-progress{position:fixed;top:2px;left:0;width:100%;height:1px;z-index:9998;background:rgba(255,255,255,.04);pointer-events:none}
.page-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--gold-light)}

.hero-command{
  position:relative; min-height:100vh; overflow:hidden; display:flex;
  align-items:flex-start; background:
    radial-gradient(circle at 72% 48%,rgba(201,152,46,.12),transparent 26%),
    radial-gradient(circle at 88% 80%,rgba(107,132,168,.12),transparent 34%),
    var(--ink); isolation:isolate;
}
.hero-command::after{
  content:""; position:absolute; inset:auto 0 0; height:28%;
  background:linear-gradient(transparent,var(--ink)); pointer-events:none; z-index:1;
}
.hero-noise{position:absolute;inset:0;opacity:.035;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.trade-grid{position:absolute;inset:-20%;opacity:.34;z-index:0;background-image:linear-gradient(rgba(167,190,221,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(167,190,221,.045) 1px,transparent 1px);background-size:58px 58px;transform:perspective(800px) rotateX(62deg) translateY(26%);transform-origin:center bottom}
.trade-orbit{position:absolute;border:1px solid rgba(201,152,46,.08);border-radius:50%;z-index:0;pointer-events:none}
.orbit-one{width:780px;height:780px;right:-220px;top:50%;transform:translateY(-50%) rotate(-18deg)}
.orbit-two{width:580px;height:580px;right:-120px;top:50%;transform:translateY(-50%) rotate(35deg);border-color:rgba(107,132,168,.11)}
.orbit-three{width:380px;height:380px;right:-20px;top:50%;transform:translateY(-50%) rotate(-42deg);border-color:rgba(201,152,46,.11)}
.trade-orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 18px rgba(231,195,110,.75);top:7%;left:18%;animation:orbitPulse 3s ease-in-out infinite}
.orbit-two::after{top:auto;left:auto;right:8%;bottom:19%;animation-delay:1s}
.orbit-three::after{top:43%;left:auto;right:-4px;animation-delay:1.8s}
@keyframes orbitPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.5)}}

.hero-command-inner{position:relative;z-index:3;width:min(1220px,100%);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);gap:clamp(42px,7vw,110px);align-items:center}
.hero-command-copy{animation:heroCopyIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-kicker{display:flex;align-items:center;gap:10px;font:500 .67rem var(--mono);letter-spacing:.12em;color:var(--steel-light);margin-bottom:24px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 0 5px rgba(201,152,46,.08),0 0 16px rgba(231,195,110,.4);animation:liveBlink 2s ease-in-out infinite}
@keyframes liveBlink{50%{opacity:.35;box-shadow:0 0 0 2px rgba(201,152,46,.04)}}
.kicker-rule{width:34px;height:1px;background:var(--line);margin-left:3px}
.hero-command h1{font-size:clamp(3.25rem,6vw,6.25rem);letter-spacing:-.045em;line-height:.94;max-width:720px}
.hero-command h1 span{color:var(--gold-light)}
.hero-command-lede{max-width:600px;color:var(--mist);font-size:1.08rem;line-height:1.72;margin:26px 0 0}
.hero-command-lede strong{color:var(--off-white);font-weight:600}
.hero-command .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-trust-line{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:27px;color:#7f8da2;font:500 .67rem var(--mono);letter-spacing:.04em;text-transform:uppercase}
.hero-trust-line i{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.65}

.control-tower{
  position:relative;min-height:570px;padding:18px;border:1px solid rgba(233,228,216,.13);
  background:linear-gradient(145deg,rgba(19,27,44,.9),rgba(10,14,23,.72));
  box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(8px);animation:towerIn 1.1s .15s cubic-bezier(.2,.8,.2,1) both
}
@keyframes towerIn{from{opacity:0;transform:translateX(35px) scale(.98)}to{opacity:1;transform:none}}
.type-panel{height:100%;min-height:534px;display:flex;flex-direction:column;justify-content:space-between;padding:5px 5px 2px}
.type-panel-topline,.type-panel-bottom{display:flex;align-items:center;gap:10px;color:#78869a;font:500 .62rem var(--mono);letter-spacing:.1em}
.type-panel-topline{justify-content:space-between}
.type-panel-bottom{gap:12px;color:#69778c}.type-panel-bottom i{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.7}
.type-panel-main{position:relative;padding:28px 0 38px;border-top:1px solid rgba(233,228,216,.08);border-bottom:1px solid rgba(233,228,216,.08)}
.type-panel-main::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--gold-light);animation:typeRule 1.3s cubic-bezier(.2,.8,.2,1) .55s both}
.type-panel-kicker{display:block;color:#8795aa;font:500 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;animation:typeKicker 1s cubic-bezier(.2,.8,.2,1) both}
.type-sequence{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(8px,1.4vw,18px);margin-top:22px;color:var(--off-white);font:600 clamp(2.4rem,5vw,5rem) var(--display);letter-spacing:-.04em;line-height:.98}
.type-word{display:inline-block;animation:typeWord 1.15s cubic-bezier(.2,.8,.2,1) both}.word-customs{color:var(--gold-light);animation-delay:.12s}.word-delivery{animation-delay:.24s}
.type-divider{color:rgba(233,228,216,.25);font:400 clamp(1.8rem,3vw,3rem) var(--mono);animation:typeDivider 1s ease .18s both}.type-divider:nth-of-type(4){animation-delay:.3s}
.type-panel-caption{max-width:330px;margin:26px 0 0;color:var(--mist);font-size:.95rem;line-height:1.65;animation:typeCaption 1s cubic-bezier(.2,.8,.2,1) .4s both}
@keyframes typeWord{0%{opacity:0;transform:translateY(18px);filter:blur(5px)}70%{opacity:1;transform:translateY(-2px);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes typeDivider{0%{opacity:0;transform:translateY(10px)}100%{opacity:.65;transform:none}}
@keyframes typeKicker{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:none}}
@keyframes typeCaption{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes typeRule{0%{width:0;opacity:0}100%{width:100%;opacity:1}}
.tower-topline{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 5px;color:#78869a;font:500 .62rem var(--mono);letter-spacing:.1em}
.tower-live{color:var(--gold-light)}.tower-live b,.feed-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold-light);margin-right:7px;box-shadow:0 0 10px rgba(231,195,110,.45)}
.network-map{position:relative;height:430px;overflow:hidden;border:1px solid rgba(233,228,216,.07);background:radial-gradient(circle at 50% 50%,rgba(107,132,168,.08),transparent 48%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px}
.network-map::before{content:"";position:absolute;inset:12% 10%;border:1px dashed rgba(167,190,221,.07);border-radius:50% 42% 48% 38%}
.network-map::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 35%,rgba(10,14,23,.22) 78%,rgba(10,14,23,.7));pointer-events:none}
.network-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.network-lines path{fill:none;stroke:rgba(167,190,221,.28);stroke-width:1;stroke-dasharray:3 8;stroke-linecap:round;animation:routeFlow 11s linear infinite}
.network-lines path:nth-child(2){stroke:rgba(201,152,46,.22);animation-duration:14s}
.network-lines path:nth-child(3){animation-duration:18s}
.network-lines path:nth-child(4){stroke:rgba(201,152,46,.18);animation-duration:12s}
@keyframes routeFlow{to{stroke-dashoffset:-120}}

.network-node{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;font:500 .57rem var(--mono);letter-spacing:.08em;color:#8795aa}
.network-node em{width:7px;height:7px;border:1px solid var(--steel-light);border-radius:50%;box-shadow:0 0 0 4px rgba(107,132,168,.07);background:var(--ink);font-style:normal}
.n1{left:8%;top:72%}.n2{left:38%;top:20%}.n3{left:72%;top:26%}.n4{left:52%;top:70%}.n5{left:82%;top:55%}
.n1 em,.n4 em{border-color:var(--gold-light)}
.clearance-core{position:absolute;z-index:4;left:50%;top:50%;width:146px;height:146px;transform:translate(-50%,-50%);display:grid;place-items:center}
.core-ring{position:absolute;inset:0;border:1px solid rgba(201,152,46,.28);border-radius:50%;animation:coreSpin 16s linear infinite}
.core-ring::before,.core-ring::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(107,132,168,.22);border-radius:50%}
.core-ring::after{inset:-8px;border-style:solid;border-color:rgba(201,152,46,.08);animation:corePulse 3s ease-in-out infinite}
@keyframes coreSpin{to{transform:rotate(360deg)}}@keyframes corePulse{50%{transform:scale(1.08);opacity:.5}}
.core-inner{width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,14,23,.92);border:1px solid rgba(201,152,46,.35);box-shadow:0 0 40px rgba(201,152,46,.12)}
.core-inner span{font-size:18px;color:var(--gold-light);line-height:1}.core-inner small{font:500 .47rem var(--mono);letter-spacing:.12em;color:#7e8ba0;margin-top:6px}.core-inner strong{font:600 .59rem var(--mono);letter-spacing:.1em;color:var(--off-white);margin-top:2px}
.shipment-packet{position:absolute;z-index:5;width:27px;height:27px;border:1px solid rgba(233,228,216,.2);background:rgba(10,14,23,.85);display:grid;place-items:center;color:var(--gold-light);font-size:11px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.packet-air{offset-path:path("M 35 105 C 132 142 178 230 269 267 C 354 302 416 266 478 300 C 521 323 550 343 596 356");offset-distance:0%;animation:packetMove 12s linear infinite}
.packet-sea{offset-path:path("M 68 326 C 150 258 188 132 292 122 C 375 114 407 192 470 161 C 523 135 553 86 586 70");offset-distance:25%;animation:packetMove 16s 1.8s linear infinite}
.packet-road{offset-path:path("M 96 372 C 188 348 225 318 300 322 C 389 326 418 384 523 379");offset-distance:55%;animation:packetMove 14s 3s linear infinite;color:var(--steel-light)}
@keyframes packetMove{to{offset-distance:100%}}
.map-scan{position:absolute;z-index:2;top:0;left:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(231,195,110,.2),transparent);box-shadow:0 0 22px rgba(231,195,110,.18);animation:scan 7s ease-in-out infinite}
@keyframes scan{0%,15%{left:4%;opacity:0}30%{opacity:1}85%{left:96%;opacity:.7}100%{left:96%;opacity:0}}
.tower-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.tower-feed>div{min-width:0;border:1px solid rgba(233,228,216,.07);padding:9px 8px;background:rgba(255,255,255,.018)}
.tower-feed strong{display:block;font:600 .6rem var(--mono);color:#c4ccd7;letter-spacing:.04em}.tower-feed small{display:block;margin-top:3px;font:400 .52rem var(--mono);color:#69778c;white-space:nowrap}.feed-dot{background:#8295ae;box-shadow:none}.feed-dot.gold{background:var(--gold-light);box-shadow:0 0 9px rgba(231,195,110,.45)}

.hero-command .hero-scroll-cue{position:absolute;z-index:4;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;font:500 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#718096;opacity:.8}
.hero-command .scroll-line{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{50%{height:48px;opacity:.45}}

.btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.service-card,.diff-card,.process-step{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.service-card:hover,.diff-card:hover,.process-step:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(10,14,23,.13)}
[data-reveal]{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
[data-reveal]:nth-child(2){transition-delay:.06s}[data-reveal]:nth-child(3){transition-delay:.12s}[data-reveal]:nth-child(4){transition-delay:.18s}

@media (max-width:1000px){
  .hero-command-inner{grid-template-columns:1fr;max-width:820px;padding-top:0}
  .hero-command-copy{text-align:center}.hero-kicker,.hero-trust-line,.hero-command .hero-actions{justify-content:center}
  .hero-command h1{margin-inline:auto}.hero-command-lede{margin-inline:auto}
  .control-tower{min-height:500px}.network-map{height:370px}
  .orbit-one{right:-430px}.orbit-two{right:-330px}.orbit-three{right:-230px}
}
@media (max-width:640px){
  .hero-command{min-height:auto}.hero-command-inner{padding:0 18px 82px;gap:34px}
  .hero-command h1{font-size:clamp(2.65rem,13vw,4.1rem)}
  .hero-command-lede{font-size:.96rem}.hero-kicker{font-size:.56rem;justify-content:center;flex-wrap:wrap}
  .hero-trust-line{font-size:.56rem;gap:8px}.hero-trust-line i{display:none}
  .control-tower{min-height:auto;padding:10px}.type-panel{min-height:310px;padding:5px 3px 2px}.type-panel-main{padding:22px 0 30px}.type-sequence{font-size:clamp(2rem,11vw,3.2rem);gap:7px}.type-panel-caption{font-size:.86rem;margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .trade-orbit,.hero-command-copy,.control-tower,.type-panel-main::after,.type-panel-kicker,.type-word,.type-divider,.type-panel-caption{animation:none!important;opacity:1;transform:none;filter:none}
}

/* Fine polish across the site */
body{opacity:0;transition:opacity .35s ease}
body.page-ready{opacity:1}
.site-header{will-change:background,backdrop-filter}
.site-header::after{content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);opacity:.55;pointer-events:none}
.section-light{position:relative}
.section-light::before,.section-ink::before{content:"";position:absolute;top:0;left:50%;width:min(1160px,calc(100% - 48px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:.65}
.more{transition:letter-spacing .2s ease,color .2s ease}
.more:hover{letter-spacing:.09em;color:var(--gold)!important}
@media (max-width:640px){.site-header::after{left:16px;right:16px}.section-light::before,.section-ink::before{width:calc(100% - 32px)}}

/* Enhanced Zeptune Method Section */
.control-tower{overflow:hidden}
.control-tower::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(201,152,46,.08),transparent);
  animation:shimmer 3s ease-in-out 1.5s infinite;z-index:1
}
@keyframes shimmer{0%,100%{left:-100%}50%{left:100%}}

.method-badge{
  display:inline-block;padding:6px 12px;background:rgba(201,152,46,.12);
  border:1px solid rgba(201,152,46,.25);border-radius:3px;color:var(--gold-light);
  animation:badgeFade 1s cubic-bezier(.2,.8,.2,1) .3s both;position:relative;z-index:2
}
@keyframes badgeFade{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.tower-live{display:flex;align-items:center;gap:8px;animation:liveFade 1s cubic-bezier(.2,.8,.2,1) .5s both;position:relative;z-index:2}
.pulse-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(201,152,46,.6);
  animation:pulse 2s ease-in-out infinite
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
@keyframes liveFade{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.owner-text{color:#8795aa;font:500 .62rem var(--mono);letter-spacing:.1em}

.type-panel-main::after{
  height:2px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  animation:typeRule 2s cubic-bezier(.2,.8,.2,1) .55s both
}
@keyframes typeRule{0%{transform:scaleX(0);opacity:0}50%{opacity:1}100%{transform:scaleX(1);opacity:.8}}

.type-panel-kicker{animation-delay:.2s}

.type-word{position:relative;transition:transform .3s ease,color .3s ease;z-index:2}
.type-word:hover{transform:translateY(-3px)}
.word-inner{display:inline-block}
.word-underline{
  position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--gold);animation:underlineGrow 1s cubic-bezier(.2,.8,.2,1) both
}
.word-freight{animation-delay:.4s}.word-freight .word-underline{animation-delay:1.2s}
.word-customs{animation-delay:.6s}.word-customs .word-underline{animation-delay:1.4s}
.word-delivery{animation-delay:.8s}.word-delivery .word-underline{animation-delay:1.6s}

.type-divider{animation-delay:.5s}
.type-divider:last-of-type{animation-delay:.7s}

.type-panel-caption{max-width:360px;animation-delay:1s}

@keyframes typeWord{
  0%{opacity:0;transform:translateY(24px) scale(.95);filter:blur(6px)}
  60%{opacity:1;transform:translateY(-3px) scale(1);filter:blur(0)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes underlineGrow{from{width:0}to{width:100%}}
@keyframes typeDivider{0%{opacity:0;transform:scale(.8) rotate(-5deg)}100%{opacity:.65;transform:scale(1) rotate(0)}}

.type-panel-bottom{position:relative;z-index:2}
.stage-item{
  display:flex;align-items:center;gap:6px;padding:8px 12px;
  background:rgba(233,228,216,.04);border:1px solid rgba(233,228,216,.08);
  border-radius:3px;animation:stageFade 1s cubic-bezier(.2,.8,.2,1) both;
  transition:all .3s ease
}
.stage-item:hover{background:rgba(201,152,46,.08);border-color:rgba(201,152,46,.2);transform:translateY(-2px)}
.stage-item:nth-child(1){animation-delay:1.2s}
.stage-item:nth-child(3){animation-delay:1.4s}
.stage-item:nth-child(5){animation-delay:1.6s}
.stage-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(201,152,46,.15);color:var(--gold);font-size:.58rem;font-weight:600
}
.stage-arrow{
  color:var(--gold);font-style:normal;font-size:.85rem;
  animation:arrowSlide 1s cubic-bezier(.2,.8,.2,1) both
}
.stage-arrow:nth-of-type(2){animation-delay:1.3s}
.stage-arrow:nth-of-type(4){animation-delay:1.5s}
@keyframes stageFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes arrowSlide{from{opacity:0;transform:translateX(-8px)}to{opacity:.7;transform:none}}

@media (max-width:640px){
  .method-badge{padding:4px 8px;font-size:.58rem}
  .owner-text{font-size:.58rem}
  .pulse-dot{width:6px;height:6px}
  .stage-item{padding:6px 8px;gap:4px}
  .stage-num{width:18px;height:18px;font-size:.52rem}
  .stage-arrow{font-size:.75rem}
  .type-panel-bottom{gap:6px}
}

@media (prefers-reduced-motion:reduce){
  .control-tower::before,.method-badge,.tower-live,.pulse-dot,.word-underline,.stage-item,.stage-arrow{animation:none!important;opacity:1;transform:none}
  .type-word:hover{transform:none}
}


/* Animation replay support - removes initial animation delays for replay */
.control-tower.replay-animation .method-badge{animation:badgeFade 1s cubic-bezier(.2,.8,.2,1) .3s both}
.control-tower.replay-animation .tower-live{animation:liveFade 1s cubic-bezier(.2,.8,.2,1) .5s both}
.control-tower.replay-animation .type-panel-kicker{animation:typeKicker 1s cubic-bezier(.2,.8,.2,1) .2s both}
.control-tower.replay-animation .word-freight{animation:typeWord 1.2s cubic-bezier(.2,.8,.2,1) .4s both}
.control-tower.replay-animation .word-customs{animation:typeWord 1.2s cubic-bezier(.2,.8,.2,1) .6s both}
.control-tower.replay-animation .word-delivery{animation:typeWord 1.2s cubic-bezier(.2,.8,.2,1) .8s both}
.control-tower.replay-animation .word-freight .word-underline{animation:underlineGrow 1s cubic-bezier(.2,.8,.2,1) 1.2s both}
.control-tower.replay-animation .word-customs .word-underline{animation:underlineGrow 1s cubic-bezier(.2,.8,.2,1) 1.4s both}
.control-tower.replay-animation .word-delivery .word-underline{animation:underlineGrow 1s cubic-bezier(.2,.8,.2,1) 1.6s both}
.control-tower.replay-animation .type-panel-caption{animation:typeCaption 1s cubic-bezier(.2,.8,.2,1) 1s both}
.control-tower.replay-animation .stage-item:nth-child(1){animation:stageFade 1s cubic-bezier(.2,.8,.2,1) 1.2s both}
.control-tower.replay-animation .stage-arrow:nth-of-type(2){animation:arrowSlide 1s cubic-bezier(.2,.8,.2,1) 1.3s both}
.control-tower.replay-animation .stage-item:nth-child(3){animation:stageFade 1s cubic-bezier(.2,.8,.2,1) 1.4s both}
.control-tower.replay-animation .stage-arrow:nth-of-type(4){animation:arrowSlide 1s cubic-bezier(.2,.8,.2,1) 1.5s both}
.control-tower.replay-animation .stage-item:nth-child(5){animation:stageFade 1s cubic-bezier(.2,.8,.2,1) 1.6s both}
.control-tower.replay-animation .pulse-dot{animation:pulse 2s ease-in-out infinite}
.control-tower.replay-animation .type-divider{animation:typeDivider 1s ease .5s both}
.control-tower.replay-animation .type-divider:last-of-type{animation:typeDivider 1s ease .7s both}


/* Force animation restart capability */
.control-tower *{animation-fill-mode:both}