:root {
  --navy: #061a31;
  --navy-2: #0b2c5a;
  --ink: #08213a;
  --blue: #087fab;
  --cyan: #31b7e8;
  --sky: #eaf7fc;
  --paper: #f4f8fa;
  --white: #fff;
  --muted: #5f7080;
  --line: rgba(8,33,58,.16);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--white); font-family: Inter, "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.wrap { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.wrap-wide { width: min(calc(100% - 48px), 1380px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 16px; background: white; padding: 10px 14px; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 84px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { width: 168px; height: 62px; overflow: hidden; display: grid; place-items: center; }
.brand img { width: 168px; height: 70px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-links a:not(.nav-cta) { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-color: var(--cyan); }
.lang { color: var(--blue); }
.nav-cta { color: white; background: var(--navy); padding: 13px 20px; border-radius: 8px; }
.menu-button { display: none; min-width: 82px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 11px 15px; color: var(--navy); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.hero { min-height: 790px; position: relative; padding-top: 84px; display: grid; grid-template-columns: minmax(0, 56%) minmax(0, 44%); background: white; overflow: hidden; }
.hero-copy-panel { min-height: 706px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 84px clamp(38px, 7vw, 118px) 42px max(36px, calc((100vw - 1380px)/2)); color: var(--ink); overflow: hidden; }
.hero-copy { position: relative; z-index: 1; max-width: 760px; }
.kicker, .eyebrow { margin: 0 0 20px; color: var(--blue); font-size: .75rem; line-height: 1.2; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.kicker::before, .eyebrow::before { content: ""; display: inline-block; width: 32px; height: 4px; margin: 0 12px 2px 0; border-radius: 4px; background: var(--cyan); }
.cyan { color: var(--cyan); }
h1, h2, h3 { font-family: Inter, "Arial Narrow", Arial, Helvetica, sans-serif; }
.hero h1 { margin: 0; max-width: 780px; font-size: clamp(3.15rem, 5.65vw, 5.9rem); line-height: .97; letter-spacing: -.055em; font-weight: 850; }
.hero h1 em { display: block; color: var(--blue); font-style: normal; font-weight: 850; }
.hero-lead { max-width: 650px; margin: 29px 0 34px; color: var(--muted); font-size: clamp(1.04rem, 1.35vw, 1.18rem); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; padding: 0 23px; border: 1px solid transparent; border-radius: 8px; font-size: .78rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6,26,49,.16); }
.button-primary { color: white; background: var(--navy-2); border-color: var(--navy-2); }
.hero .button-primary { color: white; background: var(--navy); border-color: var(--navy); }
.text-link { display: inline-block; color: var(--navy); border-bottom: 2px solid var(--cyan); padding-bottom: 4px; font-size: .84rem; font-weight: 900; letter-spacing: .03em; }
.text-link.dark { color: var(--navy); margin-top: 24px; }
.hero-signature { position: relative; z-index: 1; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.hero-signature span { color: var(--blue); font-size: .7rem; line-height: 1; font-weight: 900; letter-spacing: .14em; }
.hero-signature strong { text-align: right; color: var(--navy); font-size: .94rem; line-height: 1.35; font-weight: 750; }
.hero-visual { min-height: 706px; position: relative; margin: 34px 0 34px; border-radius: 120px 0 0 120px; background: linear-gradient(180deg, rgba(6,26,49,.05), rgba(6,26,49,.55)), url('/assets/hero-zafmar-v3.webp') center/cover no-repeat; box-shadow: -24px 28px 60px rgba(6,26,49,.13); overflow: hidden; }
.hero-visual { animation: hero-breathe 10s ease-in-out infinite alternate; transform-origin: right center; }
.coordinate-tag { position: absolute; z-index: 2; top: 34px; left: 34px; display: grid; min-width: 210px; padding: 19px 22px; color: var(--navy); background: rgba(255,255,255,.94); border-left: 5px solid var(--cyan); border-radius: 0 12px 12px 0; box-shadow: 0 12px 36px rgba(6,26,49,.16); }
.coordinate-tag { animation: tag-drift 5.5s ease-in-out infinite alternate; }
.coordinate-tag span { font-size: 1.12rem; line-height: 1.45; font-weight: 850; }
.coordinate-tag small { margin-top: 8px; color: var(--blue); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.visual-caption { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 34px; padding: 18px 20px; color: white; background: rgba(6,26,49,.84); border-radius: 12px; backdrop-filter: blur(9px); }
.visual-caption span { display: block; color: var(--cyan); font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.visual-caption strong { display: block; margin-top: 5px; font-size: 1.1rem; line-height: 1.35; font-weight: 800; }
.port-ribbon { display: grid; grid-template-columns: 1.2fr 1.1fr .8fr; padding: 0 max(24px, calc((100vw - 1380px)/2)); color: white; background: var(--navy); }
.port-ribbon span { padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.16); font-size: .73rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.port-ribbon span:first-child { border-top: 5px solid var(--cyan); }

.section { position: relative; padding: 108px 0 174px; }
.section > .wrap { position: relative; z-index: 2; }
.flow-arc {
  --arc-color: #d8e0e5;
  --flow-progress: 0;
  --flow-opacity: 0;
  --flow-x: 0px;
  --flow-y: 54px;
  --flow-rotate: 0deg;
  position: absolute;
  z-index: 1;
  bottom: -126px;
  width: clamp(470px, 42vw, 680px);
  opacity: var(--flow-opacity);
  transform: translate3d(var(--flow-x), var(--flow-y), 0) rotate(var(--flow-rotate));
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
}
.hero > .flow-arc { top: auto; bottom: -118px; }
.flow-arc--left { left: clamp(-390px, -24vw, -260px); }
.flow-arc--right { right: clamp(-390px, -24vw, -260px); }
.flow-arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow-arc path {
  fill: none;
  stroke: var(--arc-color);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--flow-progress));
  vector-effect: non-scaling-stroke;
}
.flow-arc--right path { stroke-dashoffset: calc(-1 + var(--flow-progress)); }
.flow-arc--soft { --arc-color: #d8e0e5; }
.flow-arc--pale { --arc-color: #bde9f7; }
.flow-arc--cyan { --arc-color: var(--cyan); }
.section h2 { margin: 0; max-width: 800px; font-size: clamp(2.35rem, 4.3vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 850; }
.section-lead { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 1.06rem; }
.manifesto { background: var(--sky); }
.manifesto-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: end; }
.manifesto-copy { max-width: 520px; color: var(--muted); font-size: 1.08rem; }
.manifesto-copy p:first-child { margin-top: 0; }
.service-ledger { margin-top: 70px; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.service-ledger a { min-height: 220px; padding: 27px; background: white; border-top: 5px solid var(--cyan); border-radius: 0 0 16px 16px; box-shadow: 0 10px 30px rgba(8,33,58,.07); transition: transform .2s ease, box-shadow .2s ease; }
.service-ledger a:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(8,33,58,.13); }
.service-ledger h3 { margin: 12px 0 10px; font-size: clamp(1.45rem,2.2vw,2rem); line-height: 1.05; font-weight: 850; }
.service-ledger p { margin: 0; color: var(--muted); }
.service-ledger b { display: block; margin-top: 24px; color: var(--blue); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }

.operation { position: relative; color: white; background: var(--navy); overflow: hidden; }
.operation-head { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.operation-head > p { max-width: 440px; margin: 0; color: #b9cad7; font-size: 1.06rem; }
.operation-line { position: relative; list-style: none; margin: 68px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.operation-line::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 3px; background: linear-gradient(90deg,var(--cyan),#1c80b5); }
.operation-line li { position: relative; min-height: 220px; padding: 48px 16px 20px 0; }
.operation-line span { position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -48px; color: var(--navy); background: var(--cyan); border: 5px solid var(--navy); border-radius: 50%; font-size: .67rem; font-weight: 900; }
.operation-line h3 { margin: 48px 0 10px; font-size: 1.24rem; line-height: 1.1; font-weight: 850; }
.operation-line p { margin: 0; color: #afc2d1; font-size: .9rem; }

.brand-process { color: white; background: var(--navy); }
.brand-process::before { opacity: .08; }
.brand-process-head { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; color: white; }
.brand-process-head > p { max-width: 510px; margin: 0; color: #c8d7e2; font-size: 1.06rem; }
.brand-art-integrated { position: relative; z-index: 1; margin: 58px 0 0; overflow: hidden; background: #f5f8fb; border-radius: 10px; }
.brand-art-integrated img { display: block; width: 100%; height: auto; }
.brand-art-integrated::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(90deg,var(--cyan),var(--blue),var(--navy-2)); transform: scaleX(0); transform-origin: left; }
.brand-art-integrated.is-visible::after { animation: route-progress 1.35s .2s cubic-bezier(.22,.8,.3,1) forwards; }
.motion-ready .brand-art-integrated.reveal-item img { opacity: .3; clip-path: inset(0 100% 0 0); }
.motion-ready .brand-art-integrated.reveal-item.is-visible img { animation: artwork-reveal 1.15s .08s cubic-bezier(.22,.8,.3,1) forwards; }
.flow-motion, .differentials-motion { position: absolute; inset: 0; pointer-events: none; }
.flow-motion span, .differentials-motion span { position: absolute; left: var(--x); top: var(--y); width: clamp(9px,1.15vw,16px); aspect-ratio: 1; border: 2px solid white; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(49,183,232,.6); opacity: 0; transform: translate(-50%,-50%); }
.brand-art-integrated.is-visible .flow-motion span { animation: node-pulse 7.2s ease-in-out var(--delay) infinite; }
.brand-art-integrated.is-visible .differentials-motion span { animation: node-pulse 5.5s ease-in-out var(--delay) infinite; }
.flow-motion i { position: absolute; left: 29%; top: 25%; width: clamp(7px,.9vw,12px); aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: 0 0 0 5px rgba(49,183,232,.4), 0 0 18px 7px rgba(49,183,232,.8); opacity: 0; transform: translate(-50%,-50%); }
.brand-art-integrated.is-visible .flow-motion i { animation: flow-trace 7.2s .9s linear infinite; }
.process-native { position: relative; z-index: 1; list-style: none; margin: 62px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.process-native li { position: relative; min-height: 230px; padding: 28px; color: var(--ink); background: white; border-top: 5px solid var(--cyan); border-radius: 0 0 18px 18px; overflow: hidden; box-shadow: 0 18px 38px rgba(0,9,20,.18); }
.process-native li:nth-child(even) { background: #eaf7fc; }
.process-native span { display: grid; place-items: center; width: 52px; height: 52px; color: white; background: var(--navy-2); border: 6px solid #dff4fc; border-radius: 50%; font-size: .74rem; font-weight: 900; letter-spacing: .08em; box-shadow: 0 0 0 1px rgba(8,33,58,.08); }
.process-native h3 { margin: 34px 0 10px; font-size: 1.45rem; line-height: 1.05; }
.process-native p { position: relative; z-index: 1; margin: 0; color: var(--muted); }
.process-signature { position: relative; z-index: 1; max-width: 720px; margin: 34px auto 0; color: #bcd0df; text-align: center; font-weight: 700; }

.process-experience { position: relative; z-index: 1; margin-top: 34px; }
.process-stage { position: relative; min-height: 760px; isolation: isolate; }
.process-ring { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(56vw,620px); height: min(56vw,620px); transform: translate(-50%,-50%) rotate(-90deg); overflow: visible; }
.process-ring-base, .process-ring-route { fill: none; stroke-width: 3; }
.process-ring-base { stroke: rgba(150,205,230,.22); stroke-dasharray: 5 10; }
.process-ring-route { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 1407; stroke-dashoffset: 1407; filter: drop-shadow(0 0 7px rgba(49,183,232,.35)); }
.process-experience.sequence-running .process-ring-route { animation: process-route 11.4s linear infinite; }
.process-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(31vw,330px); aspect-ratio: 1; padding: 56px 42px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transform: translate(-50%,-50%); border: 1px solid rgba(49,183,232,.32); border-radius: 50%; background: radial-gradient(circle at 35% 25%,rgba(21,72,110,.98),rgba(5,23,43,.98) 68%); box-shadow: 0 28px 70px rgba(0,7,17,.42), inset 0 0 0 12px rgba(255,255,255,.025); }
.process-core::before { content: ""; position: absolute; inset: -13px; border: 1px dashed rgba(49,183,232,.22); border-radius: 50%; }
.process-core > span { color: var(--cyan); font-size: 2rem; line-height: 1; font-weight: 850; }
.process-core > p { margin: 14px 0 5px; color: #86dafa; font-size: .67rem; font-weight: 900; letter-spacing: .18em; }
.process-core h3 { margin: 0; color: white; font-size: clamp(1.75rem,3vw,2.7rem); line-height: 1; }
.process-core small { display: block; max-width: 245px; margin-top: 15px; color: #c4d6e3; font-size: .86rem; line-height: 1.45; }
.process-node { position: absolute; z-index: 3; width: 154px; padding: 0; border: 0; color: white; background: transparent; text-align: center; cursor: pointer; transform: translate(-50%,-50%); }
.process-node::after { content: ""; position: absolute; left: 50%; top: 58px; width: 1px; height: 24px; background: linear-gradient(var(--cyan),transparent); opacity: .35; }
.process-node .process-icon { width: 88px; height: 88px; margin: 0 auto 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #a9c7da; background: #0a294b; box-shadow: 0 16px 34px rgba(0,8,20,.3); transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.process-node svg, .differential-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.process-node b { display: inline-block; margin-right: 6px; color: var(--cyan); font-size: .66rem; letter-spacing: .08em; }
.process-node strong { font-size: .95rem; }
.process-node small { display: none; }
.process-node.is-active .process-icon, .process-node:hover .process-icon, .process-node:focus-visible .process-icon { color: var(--navy); background: white; border-color: var(--cyan); transform: translateY(-5px) scale(1.04); box-shadow: 0 0 0 7px rgba(49,183,232,.14),0 18px 40px rgba(0,8,20,.38); }
.process-node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: 8px; }
.process-node.node-1 { left: 27%; top: 16%; }
.process-node.node-2 { left: 73%; top: 16%; }
.process-node.node-3 { left: 91%; top: 50%; }
.process-node.node-4 { left: 73%; top: 84%; }
.process-node.node-5 { left: 27%; top: 84%; }
.process-node.node-6 { left: 9%; top: 50%; }
.sequence-hint { margin: -4px 0 0; color: #86a5bb; text-align: center; font-size: .78rem; letter-spacing: .04em; }
.sequence-hint.dark { color: var(--muted); }
.sequence-original { position: absolute; z-index: 8; inset: 10px; margin: 0; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(247,250,252,.985); opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .7s ease,transform .8s cubic-bezier(.22,.8,.3,1),visibility 0s .8s; pointer-events: none; box-shadow: 0 28px 80px rgba(0,8,20,.28); }
.sequence-original::before { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(8,33,58,.09); border-radius: inherit; pointer-events: none; }
.sequence-original img { width: 100%; height: 100%; object-fit: contain; }
.sequence-original figcaption { position: absolute; z-index: 2; left: 18px; bottom: 16px; padding: 8px 11px; color: white; background: rgba(6,26,49,.88); border-radius: 5px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
[data-sequence].is-finale .sequence-original { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }

@keyframes process-route {
  0% { stroke-dashoffset: 1407; }
  86%,100% { stroke-dashoffset: 0; }
}

.ports { background: white; }
.ports-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.ports-intro { position: sticky; top: 120px; align-self: start; }
.ports-intro > p:not(.eyebrow) { max-width: 560px; margin-top: 25px; color: var(--muted); }
.port-coordinates { display: grid; gap: 12px; }
.port-coordinates article { padding: 26px 28px; background: var(--paper); border-left: 5px solid var(--cyan); border-radius: 0 12px 12px 0; }
.port-coordinates span { color: var(--blue); font-size: .69rem; font-weight: 900; letter-spacing: .12em; }
.port-coordinates h3 { margin: 13px 0 6px; font-size: clamp(1.5rem,2.2vw,2.05rem); line-height: 1.05; font-weight: 850; }
.port-coordinates p { margin: 0; color: var(--muted); }

.standards { background: var(--paper); }
.standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.standards-list { margin: 0; display: grid; gap: 12px; }
.standards-list div { display: grid; grid-template-columns: 145px 1fr; gap: 24px; padding: 24px; background: white; border-radius: 12px; }
.standards-list dt { color: var(--navy); font-weight: 900; }
.standards-list dd { margin: 0; color: var(--muted); }
.brand-differentials { background: #f7fafc; }
.differentials-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; }
.differentials-intro > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 1.06rem; }
.differentials-native { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-top: 58px; }
.differentials-native article { grid-column: span 2; min-height: 230px; padding: 28px; background: white; border: 1px solid rgba(8,33,58,.08); border-radius: 18px; box-shadow: 0 14px 34px rgba(8,33,58,.08); }
.differentials-native article:nth-child(4) { grid-column: 2 / span 2; }
.differentials-native article:nth-child(5) { grid-column: 4 / span 2; }
.differentials-native .differential-feature { color: white; background: linear-gradient(135deg,var(--navy-2),#075e91); border-color: transparent; }
.differentials-native span { color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.differentials-native .differential-feature span { color: var(--cyan); }
.differentials-native h3 { margin: 54px 0 10px; font-size: 1.35rem; line-height: 1.08; }
.differentials-native p { margin: 0; color: var(--muted); }
.differentials-native .differential-feature p { color: #c7dae7; }
.process-native.print-art-mobile-copy, .differentials-native.print-art-mobile-copy { display: none; }

.differentials-experience { position: relative; margin-top: 54px; }
.differentials-track { position: relative; display: grid; gap: 13px; max-width: 980px; min-height: 615px; margin-inline: auto; padding: 18px 0; isolation: isolate; }
.differentials-track::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 26px; bottom: 26px; width: 3px; transform: translateX(-50%); background: linear-gradient(var(--navy-2),var(--cyan),var(--blue)); opacity: .18; }
.differential-step { position: relative; width: 72%; min-height: 102px; padding: 20px 28px; display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: center; background: white; border: 1px solid rgba(8,33,58,.09); border-radius: 18px; box-shadow: 0 12px 34px rgba(8,33,58,.07); transition: transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease; }
.differential-step:nth-child(even) { justify-self: end; grid-template-columns: 1fr 84px; text-align: right; }
.differential-step:nth-child(even) .differential-icon { grid-column: 2; }
.differential-step:nth-child(even) > div { grid-column: 1; grid-row: 1; }
.differential-step::after { content: ""; position: absolute; top: 50%; width: 39%; height: 2px; background: linear-gradient(90deg,var(--cyan),transparent); opacity: .2; }
.differential-step:nth-child(odd)::after { left: 100%; }
.differential-step:nth-child(even)::after { right: 100%; transform: scaleX(-1); }
.differential-icon { width: 74px; height: 74px; display: grid; place-items: center; color: var(--blue); background: var(--sky); border: 1px solid rgba(49,183,232,.35); border-radius: 18px; transition: color .3s ease,background .3s ease,transform .3s ease; }
.differential-step h3 { margin: 3px 0 5px; font-size: 1.25rem; line-height: 1.08; }
.differential-step p { margin: 0; color: var(--muted); font-size: .89rem; }
.differential-step.is-active { border-color: rgba(49,183,232,.62); transform: translateY(-2px); box-shadow: 0 18px 42px rgba(8,62,99,.15); }
.differential-step.is-active .differential-icon { color: white; background: linear-gradient(145deg,var(--navy-2),var(--blue)); transform: scale(1.05); }
.differential-step:first-child { color: white; background: linear-gradient(100deg,var(--navy-2),#075d8e); border-color: transparent; }
.differential-step:first-child p { color: #d0e1ec; }
.differentials-track .sequence-original { inset: 0; }

.motion-ready .reveal-item { opacity: 0; transform: translateY(24px); }
.motion-ready .reveal-item.reveal-scale { transform: translateY(18px) scale(.985); }
.motion-ready .reveal-item.is-visible { opacity: 1; transform: translateY(0) scale(1); transition: opacity .65s ease var(--reveal-delay,0ms), transform .75s cubic-bezier(.22,.8,.3,1) var(--reveal-delay,0ms); }

@keyframes hero-breathe {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(0,-4px,0) scale(1.008); }
}
@keyframes tag-drift {
  from { transform: translateY(0); }
  to { transform: translateY(7px); }
}
@keyframes route-progress {
  to { transform: scaleX(1); }
}
@keyframes artwork-reveal {
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes node-pulse {
  0%, 11%, 100% { opacity: 0; box-shadow: 0 0 0 0 rgba(49,183,232,.55); }
  3%, 8% { opacity: 1; box-shadow: 0 0 0 11px rgba(49,183,232,0); }
}
@keyframes flow-trace {
  0% { left: 29%; top: 25%; opacity: 0; }
  3%, 97% { opacity: 1; }
  16.66% { left: 51%; top: 23%; }
  33.33% { left: 59%; top: 44%; }
  50% { left: 51%; top: 72%; }
  66.66% { left: 30%; top: 72%; }
  83.33% { left: 19.5%; top: 44%; }
  100% { left: 29%; top: 25%; opacity: 0; }
}
.differentials-en-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 58px; }
.differentials-en-grid article { min-height: 240px; padding: 26px 22px; color: white; background: linear-gradient(145deg,var(--navy-2),var(--blue)); border-radius: 18px; box-shadow: 0 14px 34px rgba(8,33,58,.12); }
.differentials-en-grid article:nth-child(even) { color: var(--ink); background: linear-gradient(145deg,#e8f7fd,#c6ebfa); }
.differentials-en-grid h3 { margin: 20px 0 10px; font-size: 1.22rem; line-height: 1.1; }
.differentials-en-grid p { margin: 0; color: inherit; opacity: .82; font-size: .9rem; }

.rfq-section { position: relative; color: white; background: var(--navy-2); overflow: hidden; }
.rfq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 78px; align-items: start; }
.rfq-intro > p:not(.eyebrow) { max-width: 470px; color: #c2d0db; }
.contact-data { margin-top: 36px; display: grid; gap: 8px; color: var(--cyan); font-weight: 750; }
.form { color: var(--ink); background: white; padding: 34px; border-radius: 16px; box-shadow: 0 22px 60px rgba(1,12,25,.25); }
.form-head { display: flex; justify-content: space-between; margin-bottom: 28px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.form-head span { color: var(--blue); font-size: .74rem; font-weight: 900; letter-spacing: .13em; }
.form-head small { color: var(--muted); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1/-1; }
.field label { color: var(--navy-2); font-size: .82rem; font-weight: 850; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #c6d2da; border-radius: 8px; padding: 11px 12px; color: var(--ink); background: white; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(49,183,232,.2); border-color: var(--cyan); }
.form .button { width: 100%; margin-top: 24px; }
.form-note { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: .76rem; }

.site-footer { padding: 42px 0; color: #a9bac7; background: #030f1e; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.footer-logo { width: 188px; height: auto; padding: 0; object-fit: contain; background: transparent; border: 0; }
.footer-grid small { display: block; margin-top: 10px; max-width: 300px; color: #9fb0bf; font-size: .78rem; }
.footer-links { display: flex; gap: 24px; font-size: .82rem; }

.legal, .subpage { padding: 150px 0 100px; }
.legal article, .subpage .content { max-width: 850px; }
.legal h1, .subpage h1 { margin: 0; font-size: clamp(3rem,6vw,5.8rem); line-height: .98; letter-spacing: -.05em; font-weight: 850; }
.legal h2 { margin-top: 42px; }
.legal p, .legal li { color: var(--muted); }
.subhero { position: relative; padding: 170px 0 90px; color: white; background: linear-gradient(110deg,var(--navy),var(--navy-2)); overflow: hidden; }
.subhero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -260px; bottom: -240px; border: 58px solid var(--cyan); border-radius: 50%; opacity: .16; }
.subhero h1 { max-width: 920px; margin: 0; font-size: clamp(3rem,6vw,6rem); line-height: .96; letter-spacing: -.052em; font-weight: 850; }
.subhero p { max-width: 670px; color: #c1d0dc; font-size: 1.13rem; }
.detail-list article { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 35px 0; border-top: 1px solid var(--line); }
.detail-list article:last-child { border-bottom: 1px solid var(--line); }
.detail-list h2 { margin: 0 0 12px; font-size: 2.2rem; font-weight: 850; }
.detail-list p { max-width: 720px; margin: 0; color: var(--muted); }
.sub-cta { margin-top: 60px; }

@media (max-width: 1050px) {
  .site-header, .nav { height: 74px; }
  .brand { width: 150px; height: 58px; }
  .brand img { width: 150px; }
  .menu-button { display: block; }
  .nav-links { display: none; position: absolute; inset: 74px 0 auto; padding: 24px; background: white; flex-direction: column; align-items: stretch; box-shadow: 0 22px 40px rgba(6,26,49,.14); }
  .nav-links.open { display: flex; }
  .hero { padding-top: 74px; grid-template-columns: 1fr; }
  .hero-copy-panel { min-height: 620px; padding: 82px 28px 34px; }
  .hero-visual { min-height: 500px; margin: 0 0 28px 28px; border-radius: 90px 0 0 90px; }
  .manifesto-grid, .operation-head, .brand-process-head, .ports-layout, .standards-grid, .differentials-intro, .rfq-grid { grid-template-columns: 1fr; gap: 48px; }
  .service-ledger { grid-template-columns: repeat(2,1fr); }
  .operation-line { grid-template-columns: repeat(3,1fr); row-gap: 28px; }
  .operation-line::before { display: none; }
  .operation-line li { min-height: 190px; padding-top: 10px; border-top: 3px solid rgba(49,183,232,.5); }
  .operation-line span { margin-top: -32px; }
  .ports-intro { position: static; }
  .process-native { grid-template-columns: repeat(2,1fr); }
  .differentials-native { grid-template-columns: repeat(2,1fr); }
  .differentials-native article, .differentials-native article:nth-child(4), .differentials-native article:nth-child(5) { grid-column: auto; }
  .differentials-en-grid { grid-template-columns: repeat(2,1fr); }
  .process-stage { min-height: 720px; }
  .process-ring { width: 560px; height: 560px; }
  .process-node.node-1 { left: 25%; }
  .process-node.node-2 { left: 75%; }
  .process-node.node-3 { left: 90%; }
  .process-node.node-4 { left: 75%; }
  .process-node.node-5 { left: 25%; }
  .process-node.node-6 { left: 10%; }
}
@media (max-width: 640px) {
  .wrap, .wrap-wide { width: min(calc(100% - 30px), var(--max)); }
  .section { padding: 78px 0 138px; }
  .flow-arc { top: auto; bottom: -54px; width: 318px; }
  .hero > .flow-arc { top: auto; bottom: -48px; }
  .flow-arc--left { left: -196px; }
  .flow-arc--right { right: -196px; }
  .flow-arc path { stroke-width: 8; }
  .hero h1 { font-size: clamp(2.85rem,13vw,4.1rem); }
  .hero-copy-panel { min-height: 600px; padding-top: 68px; }
  .hero-visual { min-height: 410px; margin-left: 15px; border-radius: 64px 0 0 64px; }
  .coordinate-tag { top: 18px; left: 18px; min-width: 190px; }
  .visual-caption { left: 18px; right: 18px; bottom: 18px; }
  .hero-signature { align-items: start; flex-direction: column; }
  .hero-signature strong { text-align: left; }
  .port-ribbon { grid-template-columns: 1fr; padding: 0; }
  .port-ribbon span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .service-ledger { grid-template-columns: 1fr; }
  .service-ledger a { min-height: 195px; }
  .operation-line { grid-template-columns: 1fr; gap: 30px; }
  .operation-line li { min-height: 140px; }
  .brand-process-head { gap: 26px; }
  .brand-art-integrated { width: calc(100% + 30px); margin: 38px -15px 0; border-radius: 0; }
  .process-native.print-art-mobile-copy { display: grid; }
  .differentials-native.print-art-mobile-copy { display: grid; }
  .process-native { grid-template-columns: 1fr; margin-top: 42px; gap: 12px; }
  .process-native li { min-height: 0; padding: 22px; border-radius: 0 0 14px 14px; }
  .process-native span { width: 46px; height: 46px; }
  .process-native h3 { margin: 24px 0 8px; }
  .process-signature { margin-top: 28px; text-align: left; }
  .differentials-intro { gap: 24px; }
  .differentials-native { grid-template-columns: 1fr; margin-top: 38px; gap: 12px; }
  .differentials-native article, .differentials-native article:nth-child(4), .differentials-native article:nth-child(5) { grid-column: auto; min-height: 0; padding: 24px; }
  .differentials-native h3 { margin: 28px 0 8px; }
  .differentials-en-grid { grid-template-columns: 1fr; }
  .differentials-en-grid article { min-height: 190px; }
  .differentials-en-grid h3 { margin-top: 36px; }
  .standards-list div { grid-template-columns: 1fr; gap: 6px; }
  .fields { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .form { padding: 25px 18px; border-radius: 12px; }
  .footer-grid, .footer-links { align-items: flex-start; flex-direction: column; }
  .footer-links { gap: 16px; }
  .detail-list article { grid-template-columns: 1fr; }

  .process-experience { margin-top: 42px; }
  .process-stage { min-height: 0; display: grid; gap: 12px; }
  .process-ring, .process-core { display: none; }
  .process-node { position: relative; left: auto!important; top: auto!important; width: 100%; min-height: 108px; padding: 17px 18px; display: grid; grid-template-columns: 62px 44px 1fr; grid-template-rows: auto 1fr; gap: 0 12px; align-items: center; color: var(--ink); background: white; border: 1px solid rgba(49,183,232,.16); border-radius: 14px; text-align: left; transform: none; box-shadow: 0 12px 30px rgba(0,8,20,.14); }
  .process-node::after { left: 48px; top: 100%; width: 2px; height: 13px; background: var(--cyan); opacity: .45; }
  .process-node .process-icon { grid-row: 1 / span 2; width: 58px; height: 58px; margin: 0; color: #a9c7da; background: var(--navy-2); }
  .process-node svg { width: 31px; height: 31px; }
  .process-node b { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--blue); font-size: .74rem; }
  .process-node strong { grid-column: 3; font-size: 1.08rem; }
  .process-node small { grid-column: 3; display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
  .process-node.is-active { border-color: var(--cyan); background: #f5fbfe; }
  .process-node.is-active .process-icon { color: var(--navy); background: white; transform: none; box-shadow: 0 0 0 5px rgba(49,183,232,.11); }
  .sequence-hint { display: none; }
  .sequence-original, [data-sequence].is-finale .sequence-original { position: relative; inset: auto; min-height: 0; margin-top: 16px; display: block; opacity: 1; visibility: visible; transform: none; transition: none; border-radius: 10px; box-shadow: 0 16px 36px rgba(0,8,20,.18); }
  .sequence-original img { width: 100%; height: auto; object-fit: contain; }
  .sequence-original figcaption { position: static; display: block; padding: 11px 14px; color: #d8e5ed; background: var(--navy-2); border-radius: 0; }
  .process-signature { margin-top: 25px; }

  .differentials-experience { margin-top: 38px; }
  .differentials-track { min-height: 0; gap: 12px; padding: 0; }
  .differentials-track::before { left: 38px; top: 30px; bottom: 30px; transform: none; }
  .differential-step, .differential-step:nth-child(even) { width: 100%; min-height: 0; padding: 18px; grid-template-columns: 64px 1fr; gap: 15px; justify-self: stretch; text-align: left; border-radius: 14px; }
  .differential-step:nth-child(even) .differential-icon { grid-column: 1; }
  .differential-step:nth-child(even) > div { grid-column: 2; grid-row: 1; }
  .differential-step::after { display: none; }
  .differential-icon { width: 58px; height: 58px; border-radius: 14px; }
  .differential-icon svg { width: 33px; height: 33px; }
  .differential-step h3 { font-size: 1.08rem; }
  .differential-step p { font-size: .82rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms!important; animation-duration: .01ms!important; }
  .motion-ready .reveal-item, .motion-ready .reveal-item.reveal-scale { opacity: 1; transform: none; }
  .motion-ready .brand-art-integrated.reveal-item img { opacity: 1; clip-path: none; }
  .flow-motion, .differentials-motion { display: none; }
  .flow-arc { display: block; opacity: .16; transform: none; }
  .flow-arc path, .flow-arc--right path { stroke-dashoffset: 0; animation: none!important; }
  .process-experience.sequence-running .process-ring-route { animation: none; stroke-dashoffset: 0; }
  .process-stage .sequence-original { position: relative; inset: auto; margin-top: 760px; opacity: 1; visibility: visible; transform: none; }
  .differentials-track .sequence-original { position: relative; inset: auto; margin-top: 16px; opacity: 1; visibility: visible; transform: none; }
}