/* =========================================================
   IRSAN ANUGRAH — Portfolio
   Tema: "Drafting Paper" — kertas gambar teknik, tinta navy,
   aksen biru laut & oranye keselamatan.
   ========================================================= */

:root{
  --paper:#f4f1ea;
  --paper-2:#fffefb;
  --paper-3:#eceadf;
  --ink:#0e2436;
  --ink-2:#3f596e;
  --muted:#7b8fa0;
  --rule:#ddd6c7;
  --rule-2:#c6d6e4;
  --blue:#0d5c94;
  --blue-deep:#08395e;
  --blue-soft:#e6eff7;
  --teal:#0d7f7f;
  --orange:#cf5a28;
  --orange-soft:#fbeade;
  --shadow-sm:0 1px 2px rgba(14,36,54,.05);
  --shadow:0 2px 4px rgba(14,36,54,.05),0 14px 34px -22px rgba(14,36,54,.45);
  --radius:3px;
  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --ff-display:"Archivo","Arial Narrow",sans-serif;
  --ff-body:"IBM Plex Sans",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:400;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0; }
strong,b{ font-weight:600; color:var(--ink); }
em{ font-style:italic; color:var(--blue); font-weight:500; }
::selection{ background:var(--blue); color:#fff; }

.mono{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500; }
.dim{ color:var(--muted); }

/* ---------- LATAR KERTAS ---------- */
.paper{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(13,92,148,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,92,148,.055) 1px,transparent 1px),
    linear-gradient(rgba(13,92,148,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,92,148,.03) 1px,transparent 1px);
  background-size:128px 128px,128px 128px,32px 32px,32px 32px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 20%,rgba(0,0,0,.4) 65%,transparent 100%);
}

main,.nav,.foot{ position:relative; z-index:2; }

/* ---------- PROGRESS ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:rgba(14,36,54,.06); }
.progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue-deep),var(--blue)); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:22px;
  padding:13px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(244,241,234,.9);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom-color:var(--rule);
  box-shadow:var(--shadow-sm);
}
.nav__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav__mark{ width:26px; height:26px; color:var(--blue); flex:none; }
.nav__mark svg{ width:100%; height:100%; animation:spin 34s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.nav__name{ font-family:var(--ff-display); font-weight:800; font-size:.84rem; letter-spacing:.17em; }

.nav__links{ display:flex; gap:2px; }
.nav__links a{
  display:flex; align-items:center; gap:7px;
  padding:8px 11px; font-size:.79rem; color:var(--ink-2);
  border:1px solid transparent; border-radius:var(--radius);
  transition:color .25s,border-color .25s,background .25s;
}
.nav__links a i{ font-style:normal; font-family:var(--ff-mono); font-size:.58rem; color:var(--muted); letter-spacing:.08em; }
.nav__links a:hover{ color:var(--blue-deep); border-color:var(--rule-2); background:var(--blue-soft); }
.nav__links a.is-active{ color:var(--blue-deep); border-color:var(--rule-2); background:var(--blue-soft); }
.nav__links a.is-active i{ color:var(--blue); }

.lang-switch{
  display:flex; align-items:center; padding:3px; flex:none;
  border:1px solid var(--rule-2); background:rgba(255,254,251,.76); box-shadow:var(--shadow-sm);
}
.lang-switch button,.lang-switch a{
  min-width:31px; height:28px; padding:0 7px; border:0; color:var(--muted); background:transparent;
  font-family:var(--ff-mono); font-size:.56rem; font-weight:600; letter-spacing:.1em; cursor:pointer;
  transition:color .2s,background .2s,box-shadow .2s;
}
.lang-switch button:hover,.lang-switch a:hover{ color:var(--blue-deep); }
.lang-switch button[aria-pressed="true"],.lang-switch a[aria-current="page"]{ color:#fff; background:var(--blue-deep); box-shadow:0 3px 10px rgba(8,57,94,.2); }

.nav__toggle{ display:none; }

/* ---------- BUTTON ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:var(--radius);
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); transform:translateY(101%); transition:transform .36s var(--ease);
}
.btn:hover{ color:var(--paper-2); }
.btn:hover::after{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(3px); }
.btn--solid{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.btn--solid::after{ background:var(--ink); }
.btn--ghost{ background:var(--paper-2); border-color:var(--rule); color:var(--ink-2); }
.btn--ghost::after{ background:var(--ink); }
.nav__cv{ padding:10px 15px; }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:clamp(112px,15vh,170px) var(--pad) 0; max-width:var(--maxw); margin:0 auto; }
.hero__inner{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:clamp(28px,5vw,64px); align-items:center; }

.tag{ display:inline-flex; align-items:center; gap:10px; margin:0 0 24px; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.tag__dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(207,90,40,.45); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(207,90,40,0);} 100%{ box-shadow:0 0 0 0 rgba(207,90,40,0);} }

.hero__title{ font-size:clamp(3rem,10.5vw,8.4rem); line-height:.88; letter-spacing:-.045em; margin-bottom:20px; color:var(--ink); }
.hero__title span{ display:block; }
.hero__title--alt{ color:transparent; -webkit-text-stroke:1.3px var(--blue); }
.hero__role{
  font-family:var(--ff-mono); font-size:clamp(.72rem,1.2vw,.84rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); margin:0 0 24px;
}
.hero__role .sep{ color:var(--orange); margin:0 6px; }
.hero__lede{ max-width:58ch; color:var(--ink-2); margin:0 0 32px; font-size:1.02rem; }
.hero__lede strong{ color:var(--blue-deep); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }

.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px); margin:0; padding-top:24px; border-top:1px solid var(--rule); }
.hero__stats dt{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.hero__stats dd{ margin:0; font-family:var(--ff-display); font-size:1.62rem; font-weight:800; letter-spacing:-.02em; }
.hero__stats dd b{ color:var(--blue-deep); font-weight:800; }
.hero__stats dd span{ font-size:.74rem; color:var(--muted); font-family:var(--ff-mono); letter-spacing:.07em; }

/* Portrait */
.portrait{ margin:0; }
.portrait__frame{
  position:relative; border:1px solid var(--rule-2); padding:10px; background:var(--paper-2);
  box-shadow:var(--shadow);
}
.portrait__frame::before{
  content:""; position:absolute; inset:10px; z-index:0;
  background:
    linear-gradient(180deg,var(--blue-soft),rgba(230,239,247,.25) 70%,transparent),
    linear-gradient(rgba(13,92,148,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,92,148,.07) 1px,transparent 1px);
  background-size:auto,20px 20px,20px 20px;
}
.portrait img{ position:relative; z-index:1; width:100%; max-height:clamp(360px,54vh,520px); object-fit:cover; object-position:50% 12%; }
.c{ position:absolute; width:14px; height:14px; border:1.5px solid var(--orange); z-index:3; }
.c--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.c--tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.c--bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.c--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.portrait figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:12px; }
.portrait figcaption .mono{ font-size:.58rem; }

/* Marquee */
.marquee{ margin-top:clamp(52px,8vh,92px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; padding:12px 0; background:var(--paper-3); }
.marquee__track{ display:flex; gap:24px; white-space:nowrap; width:max-content; animation:slide 48s linear infinite; }
.marquee__track span{ font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.18em; color:var(--ink-2); }
.marquee__track span:nth-child(even){ color:var(--orange); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- SECTION ---------- */
.section{ position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(66px,10vh,116px) var(--pad); }
.section--alt{ max-width:none; background:var(--paper-3); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.section--alt > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }

.section__head{ display:flex; align-items:center; gap:16px; margin-bottom:clamp(28px,4.5vh,48px); }
.section__num{ color:var(--orange); font-size:.72rem; }
.section__title{ font-size:clamp(1.6rem,4vw,2.9rem); letter-spacing:-.03em; }
.section__line{ flex:1; height:1px; background:var(--rule); }
.section__intro{ max-width:74ch; color:var(--ink-2); font-size:1.03rem; margin:0 0 clamp(30px,5vh,48px); }

/* ---------- PROFIL ---------- */
.profil{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr); gap:clamp(24px,4vw,52px); align-items:start; }
.profil p{ color:var(--ink-2); margin:0 0 16px; max-width:66ch; }
.lead{ font-size:1.12rem; color:var(--ink) !important; border-left:3px solid var(--orange); padding-left:18px; }

.card{ border:1px solid var(--rule); background:var(--paper-2); padding:24px; box-shadow:var(--shadow-sm); }
.card--data h3{ font-family:var(--ff-mono); font-size:.62rem; color:var(--muted); font-weight:500; margin-bottom:14px; }
.datalist li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-top:1px dashed var(--rule); }
.datalist li:first-child{ border-top:0; padding-top:0; }
.datalist span{ font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); flex:none; }
.datalist b{ text-align:right; font-size:.9rem; font-weight:600; }

.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:1px; margin-top:clamp(36px,5vh,60px); background:var(--rule); border:1px solid var(--rule); }
.pillar{ background:var(--paper-2); padding:26px 22px 28px; transition:background .3s var(--ease); }
.pillar:hover{ background:var(--blue-soft); }
.pillar__ico{ display:block; width:28px; height:28px; color:var(--blue); margin-bottom:16px; }
.pillar__ico svg{ width:100%; height:100%; }
.pillar h3{ font-size:1rem; margin-bottom:8px; }
.pillar p{ margin:0; font-size:.87rem; color:var(--ink-2); }

/* ---------- ALUR KERJA ---------- */
.viz__title{ color:var(--muted); font-weight:500; font-size:.62rem; margin:0 0 16px; }

.flow{ margin-bottom:clamp(40px,6vh,68px); }
.flow__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.step{ position:relative; background:var(--paper-2); padding:22px 18px 24px; transition:background .3s var(--ease); }
.step:hover{ background:var(--blue-soft); }
.step__no{ display:inline-block; color:var(--blue); font-size:.62rem; margin-bottom:10px; }
.step h4{ font-size:.95rem; margin-bottom:8px; letter-spacing:-.01em; }
.step p{ margin:0; font-size:.82rem; color:var(--ink-2); line-height:1.6; }
.step::after{
  content:""; position:absolute; top:26px; right:-1px; width:7px; height:7px;
  border-top:1.5px solid var(--rule-2); border-right:1.5px solid var(--rule-2);
  transform:translateX(50%) rotate(45deg); background:var(--paper-2);
}
.step:last-child::after{ display:none; }
.step--accent{ background:var(--orange-soft); }
.step--accent .step__no{ color:var(--orange); }
.step--accent::after{ background:var(--orange-soft); }

/* Skema kapal */
.viz{ margin:0 0 clamp(40px,6vh,68px); }
.viz__canvas{
  position:relative; border:1px solid rgba(7,29,44,.18);
  background:
    radial-gradient(circle at 54% 52%,rgba(11,108,141,.07),transparent 34rem),
    linear-gradient(180deg,#fffefb 0%,#f7f6f0 100%);
  padding:clamp(14px,2.2vw,28px); padding-top:clamp(34px,4vw,48px);
  box-shadow:0 28px 70px -42px rgba(7,29,44,.54);
  overflow:hidden;
}
.viz__canvas::before{
  content:"VESSEL SYSTEM MAP  /  SIDE ELEVATION";
  position:absolute; top:16px; left:clamp(14px,2.2vw,28px); z-index:2;
  font-family:var(--ff-mono); font-size:.52rem; font-weight:600; letter-spacing:.18em;
  color:var(--blue); opacity:.76;
}
.viz__canvas::after{
  content:"IA / TECH–02";
  position:absolute; top:16px; right:clamp(14px,2.2vw,28px); z-index:2;
  font-family:var(--ff-mono); font-size:.5rem; letter-spacing:.16em;
  color:var(--muted);
}
.viz__canvas svg{ width:100%; height:auto; display:block; }
.viz__cap{ margin-top:12px; font-size:.84rem; color:var(--muted); }

/* Realistic Ro-Ro cutaway visual */
.viz--real .viz__canvas{ padding:clamp(42px,5vw,62px) clamp(14px,2.2vw,28px) clamp(18px,2.8vw,34px); }
.viz--real .ship{ display:none; }
.ship-photo{ position:relative; overflow:hidden; padding:clamp(28px,3.5vw,44px) clamp(34px,5vw,68px); border:1px solid rgba(7,52,72,.2); background:#eef1f0; box-shadow:0 26px 55px -34px rgba(7,29,44,.7); }
.ship-photo::after{ content:"REALISTIC CUTAWAY / RO-RO FERRY"; position:absolute; right:15px; bottom:12px; padding:6px 8px; color:#fff; background:rgba(4,29,44,.82); font-family:var(--ff-mono); font-size:.48rem; letter-spacing:.12em; }
.ship-photo img{ display:block; width:100%; height:auto; object-fit:contain; }
.ship-marker{ position:absolute; z-index:2; display:grid; place-items:center; width:30px; height:30px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; color:#fff; background:#087c94; box-shadow:0 0 0 5px rgba(8,124,148,.2),0 5px 15px rgba(4,29,44,.3); font-family:var(--ff-mono); font-size:.55rem; font-weight:700; }
.ship-marker:nth-of-type(even){ background:var(--orange); box-shadow:0 0 0 5px rgba(232,101,47,.2),0 5px 15px rgba(4,29,44,.3); }
.ship-marker--01{ left:68.7%; top:28.5%; }.ship-marker--02{ left:30.5%; top:27%; }.ship-marker--03{ left:86.5%; top:55.5%; }.ship-marker--04{ left:13%; top:70%; }
.ship-marker--05{ left:23.5%; top:67.5%; }.ship-marker--06{ left:34%; top:63%; }.ship-marker--07{ left:50%; top:65%; }.ship-marker--08{ left:76.5%; top:62%; }
.ship-map{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:1px; background:#c9d4d6; border:1px solid #c9d4d6; }
.ship-map li{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; min-height:104px; padding:17px 15px; background:#f8faf7; transition:background .25s var(--ease),transform .25s var(--ease); }
.ship-map li:hover{ position:relative; z-index:1; background:#fff; transform:translateY(-3px); }
.ship-map > li > span{ display:grid; place-items:center; width:28px; height:28px; color:#fff; background:#087c94; font-family:var(--ff-mono); font-size:.52rem; }
.ship-map li:nth-child(even) > span{ background:var(--orange); }
.ship-map b{ display:block; margin:1px 0 5px; color:#092d40!important; font-size:.72rem; line-height:1.3; }
.ship-map small{ display:block; color:#5d7580; font-size:.61rem; line-height:1.48; }

.ship__grid{ stroke:rgba(11,108,141,.075); stroke-width:1; fill:none; }
.ship__water{ fill:none; }
.ship__waterline{ stroke:var(--blue); stroke-width:1.2; opacity:.55; }
.ship__water .wave{ stroke:var(--blue); stroke-width:1.15; opacity:.36; }
.ship__water .wave--soft{ opacity:.16; }
.ship__shadow{ fill:rgba(6,31,49,.12); }
.ship__hull{ stroke:#061f31; stroke-width:2.2; }
.ship__hull-top{ stroke:#f1f5f5; stroke-width:3; fill:none; opacity:.92; }
.ship__boot-line{ stroke:#e8652f; stroke-width:5; fill:none; }
.ship__bow-line{ stroke:rgba(255,255,255,.35); stroke-width:1.2; fill:none; }
.ship__plate-lines{ stroke:rgba(255,255,255,.11); stroke-width:1; fill:none; }
.ship__super,.ship__bridge{ stroke:var(--ink); stroke-width:1.65; }
.ship__deck{ stroke:rgba(7,29,44,.48); stroke-width:1.15; fill:none; }
.ship__window path,.ship__window rect{ fill:url(#glassGradient); stroke:#062c43; stroke-width:.7; }
.ship__mast path,.ship__radar path,.ship__rail path{ stroke:var(--ink); stroke-width:1.35; fill:none; }
.ship__mast circle,.ship__radar rect{ fill:var(--orange); stroke:var(--ink); stroke-width:1; }
.ship__funnel path:first-child{ fill:var(--blue-deep); stroke:var(--ink); stroke-width:1.4; }
.ship__funnel .ship__funnel-band{ stroke:var(--orange); stroke-width:8; fill:none; }
.ship__smoke{ stroke:var(--muted); stroke-width:1.3; stroke-dasharray:3 4; fill:none; opacity:.55; }
.ship__lifeboat path{ fill:var(--orange); stroke:#a8431f; stroke-width:1; }
.ship__lifeboat path:nth-child(2){ fill:var(--orange-soft); }
.ship__lifeboat circle{ fill:var(--paper-2); stroke:#a8431f; stroke-width:1; }
.ship__doors rect{ fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.32); stroke-width:1; }
.ship__doors path{ stroke:rgba(255,255,255,.18); stroke-width:1; }
.ship__room{ fill:rgba(224,239,243,.13); stroke:#7bc2d1; stroke-width:1.25; stroke-dasharray:7 5; }
.ship__room-label{ font-family:var(--ff-mono); font-size:8px; letter-spacing:.16em; fill:#9fd2db; }
.ship__engine rect{ fill:#f6d7c7; stroke:var(--orange); stroke-width:1.4; }
.ship__engine path{ stroke:var(--orange); stroke-width:1.2; fill:none; }
.ship__engine circle{ fill:var(--blue-deep); stroke:#8cc7d1; stroke-width:1; }
.ship__generator rect{ fill:#d9edf0; stroke:#56a3b2; stroke-width:1.2; }
.ship__generator circle{ fill:#56a3b2; }
.ship__generator path{ stroke:#56a3b2; stroke-width:1; }
.ship__shaft{ stroke:#f2a077; stroke-width:4; fill:none; }
.ship__bearing rect{ fill:#b9d3da; stroke:#06263a; stroke-width:1; }
.ship__bearing circle{ fill:#06263a; }
.ship__prop{ fill:var(--orange); stroke:#8e3d1e; stroke-width:1.2; transform-box:fill-box; transform-origin:center; }
.ship__rudder{ fill:#45667a; stroke:#06263a; stroke-width:1; }
.ship__valve path:first-child{ fill:var(--orange); stroke:#a8431f; stroke-width:1; }
.ship__valve path:not(:first-child),.ship__valve circle{ stroke:var(--orange); stroke-width:1.8; fill:none; }
.ship__anchor circle{ fill:var(--orange); stroke:#fff; stroke-width:1; }
.ship__anchor path{ stroke:#173f56; stroke-width:2; fill:none; }
.ship__chain{ stroke-dasharray:5 5; }
.ship__identity text{ font-family:var(--ff-mono); font-size:8px; letter-spacing:.16em; fill:rgba(255,255,255,.72); }
.ship__identity path{ stroke:var(--orange); stroke-width:1.5; }

.cal path{ stroke:#9bb8c4; stroke-width:1.15; fill:none; }
.cal circle{ fill:var(--blue); stroke:#fff; stroke-width:1.5; }
.cal text{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.055em; fill:var(--ink-2); }
.cal .cal__index{ font-size:8px; font-weight:600; letter-spacing:.17em; fill:var(--blue); }
.cal .cal__strong{ fill:var(--ink); font-size:10.5px; font-weight:600; letter-spacing:.08em; }
.cal .cal__sub{ font-size:9px; fill:var(--muted); letter-spacing:.035em; }
.cal--accent path{ stroke:var(--orange); opacity:.76; }
.cal--accent circle{ fill:var(--orange); }
.cal--accent .cal__index{ fill:var(--orange); }
.ship__scale text{ font-family:var(--ff-mono); font-size:8px; letter-spacing:.14em; fill:var(--muted); }
.ship__scale path{ stroke:var(--rule-2); stroke-width:1; }

@media (hover:hover){
  .ship__engine-room{ transition:filter .35s var(--ease); }
  .ship__engine-room:hover{ filter:drop-shadow(0 0 9px rgba(232,101,47,.32)); }
}

/* Siklus */
.cycle__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.cycle__list li{ background:var(--paper-2); padding:20px 18px; }
.cycle__list span{ display:block; color:var(--teal); font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.14em; margin-bottom:8px; }
.cycle__list b{ display:block; font-family:var(--ff-display); font-size:.96rem; font-weight:700; margin-bottom:5px; }
.cycle__list p{ margin:0; font-size:.81rem; color:var(--ink-2); line-height:1.55; }

/* ---------- TIMELINE ---------- */
.timeline{ display:flex; flex-direction:column; gap:clamp(30px,4.5vh,50px); }
.tl{ display:grid; grid-template-columns:196px minmax(0,1fr); gap:clamp(18px,3vw,40px); position:relative; padding-left:24px; }
.tl::before{ content:""; position:absolute; left:0; top:8px; bottom:-30px; width:1px; background:var(--rule-2); }
.tl:last-child::before{ bottom:auto; height:36px; }
.tl::after{ content:""; position:absolute; left:-4px; top:7px; width:9px; height:9px; background:var(--paper); border:1.6px solid var(--orange); border-radius:50%; }

.tl__meta{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.tl__period{ color:var(--ink-2); font-size:.65rem; }
.badge{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid var(--rule-2); border-radius:999px; font-family:var(--ff-mono); font-size:.57rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-deep); background:var(--blue-soft); }
.badge__dot{ width:5px; height:5px; border-radius:50%; background:var(--teal); animation:pulse 2.2s infinite; }
.badge--gold{ border-color:#e5c9a4; color:#8a5a1d; background:#fbf1e2; }

.tl__body h3{ font-size:clamp(1.14rem,2.3vw,1.55rem); }
.tl__body h3 .slash{ color:var(--orange); font-weight:500; }
.tl__org{ margin:6px 0 18px; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); }

.ticks li{ position:relative; padding-left:22px; margin-bottom:10px; color:var(--ink-2); font-size:.92rem; }
.ticks li::before{ content:""; position:absolute; left:2px; top:.68em; width:9px; height:1.5px; background:var(--orange); }
.ticks li i{ font-style:italic; color:var(--ink); }
.ticks--tight li{ font-size:.87rem; margin-bottom:7px; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.chips span{
  padding:5px 11px; border:1px solid var(--rule-2); border-radius:999px; background:var(--paper-2);
  font-family:var(--ff-mono); font-size:.59rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
  transition:color .25s,border-color .25s,background .25s;
}
.chips span:hover{ color:#fff; background:var(--blue-deep); border-color:var(--blue-deep); }
.chips--gold span:hover{ background:#8a5a1d; border-color:#8a5a1d; }
.chips--tech span{ border-color:var(--rule); }
.chips--tech span:hover{ background:var(--teal); border-color:var(--teal); }

/* ---------- APLIKASI ---------- */
.app{ border:1px solid var(--rule); background:var(--paper-2); box-shadow:var(--shadow); }
.app__head{
  position:relative; overflow:hidden;
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-start;
  padding:clamp(28px,4vw,48px); border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,var(--blue-soft),var(--paper-2));
}
.app__head::after{
  content:"DATA SYSTEM"; position:absolute; right:28px; bottom:-24px;
  font-family:var(--ff-display); font-size:5.4rem; font-weight:900; line-height:1;
  color:rgba(255,255,255,.045); letter-spacing:-.07em; pointer-events:none;
}
.app__head > *{ position:relative; z-index:1; }
.app__head > div:first-child{ padding-right:190px; }
.app__head > .badge{ position:absolute; top:clamp(28px,4vw,48px); right:clamp(28px,4vw,48px); }
.app__head h3{ font-size:clamp(1.35rem,2.8vw,2rem); margin:9px 0 8px; }
.app__sub{ margin:0; color:var(--ink-2); font-size:.97rem; max-width:62ch; }
.app__metrics{ display:flex; flex-wrap:wrap; gap:0; margin:25px 0 0; border:1px solid rgba(255,255,255,.16); width:max-content; max-width:100%; }
.app__metrics div{ min-width:126px; padding:11px 15px 12px; border-left:1px solid rgba(255,255,255,.16); }
.app__metrics div:first-child{ border-left:0; }
.app__metrics dt{ font-family:var(--ff-mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:#8fb0bf; }
.app__metrics dd{ margin:2px 0 0; font-family:var(--ff-display); font-size:1.16rem; font-weight:800; color:#fff; }

.app__body{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); }
.app__viz{
  display:grid; align-items:center;
  padding:clamp(14px,2vw,25px); border-right:1px solid var(--rule);
  background:#061b29;
}
.app__viz svg{ width:100%; height:auto; }
.app__detail{ padding:clamp(24px,3vw,38px); background:var(--paper-2); }
.app__detail h4{ color:var(--muted); font-weight:500; font-size:.6rem; margin:0 0 12px; }
.app__detail h4 + *{ margin-bottom:24px; }

.arch__shell{ stroke:rgba(121,188,207,.25); stroke-width:1.2; }
.arch__topline{ stroke:rgba(121,188,207,.18); stroke-width:1; }
.arch text{ font-family:var(--ff-mono); }
.scroll-hint{ display:none; }

.arch__chrome circle{ fill:var(--orange); }
.arch__chrome circle:nth-child(2){ fill:#d7a94a; }
.arch__chrome circle:nth-child(3){ fill:#2fa89d; }
.arch__chrome text{ font-size:8.5px; font-weight:600; letter-spacing:.13em; fill:#99b8c6; }
.arch__chrome rect{ fill:rgba(47,168,157,.12); stroke:rgba(82,201,190,.45); stroke-width:1; }
.arch__chrome rect + circle{ fill:#52c9be; }
.arch__chrome rect ~ text{ fill:#8be0d7; font-size:7.5px; }
.arch__section-label text{ font-size:7.5px; font-weight:600; letter-spacing:.17em; fill:#62899a; }
.arch__flow path{
  stroke:var(--orange); stroke-width:1.7; fill:none; opacity:.88;
  stroke-dasharray:7 7; animation:archFlow 8s linear infinite;
}
@keyframes archFlow{ to{ stroke-dashoffset:-84; } }
.arch__node > rect:first-of-type{ stroke:rgba(138,190,207,.27); stroke-width:1; }
.arch__iconbox,.arch__output-icon{ fill:rgba(11,108,141,.2); stroke:rgba(102,181,200,.35); stroke-width:1; }
.arch__form-icon path,.arch__scan-icon path,.arch__scan-icon rect,
.arch__doc-icon,.arch__chart-icon path,.arch__radar-icon circle,.arch__radar-icon path{
  stroke:#72c6d1; stroke-width:1.25; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.arch__scan-icon rect{ fill:rgba(114,198,209,.07); }
.arch__eyebrow{ font-size:7px; font-weight:600; letter-spacing:.14em; fill:#6e9aad; }
.arch__t{ font-size:10px; font-weight:600; letter-spacing:.08em; fill:#f5f8f7; }
.arch__s{ font-size:8px; letter-spacing:.025em; fill:#8eabba; }
.arch__core > rect{ stroke:#3aa7b4; stroke-width:1.15; }
.arch__core-grid{ stroke:rgba(255,255,255,.08); stroke-width:1; }
.arch__database ellipse,.arch__database path{ fill:rgba(5,34,49,.28); stroke:#8de0df; stroke-width:1.5; }
.arch__t--core,.arch__s--core{ text-anchor:middle; }
.arch__t--core{ fill:#fff; font-size:9px; }
.arch__s--core{ fill:#b4dce1; font-size:7.5px; }
.arch__core-stat text{ font-size:6.5px; letter-spacing:.08em; fill:#9bc9d2; }
.arch__core-stat text:nth-child(2){ fill:#fff; font-weight:600; }
.arch__core-stat circle{ fill:#54d3c5; }
.arch__packet circle{ fill:var(--orange); filter:drop-shadow(0 0 4px rgba(232,101,47,.72)); animation:packetPulse 1.8s ease-in-out infinite alternate; }
.arch__packet circle:last-child{ animation-delay:.5s; }
@keyframes packetPulse{ to{ opacity:.35; transform:scale(.72); } }
.arch__footer path{ stroke:rgba(121,188,207,.18); stroke-width:1; }
.arch__footer text{ font-size:6.8px; letter-spacing:.09em; fill:#668b9a; }
.arch__footer circle{ fill:#52c9be; }
.arch__footer circle + text{ fill:#89d7d0; }

.modlist{ counter-reset:module; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.modlist li{
  position:relative; counter-increment:module; min-height:94px;
  padding:14px 13px 13px 42px; border:1px solid var(--rule); background:#fbfaf5;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.modlist li::before{
  content:counter(module,decimal-leading-zero); position:absolute; left:13px; top:14px;
  font-family:var(--ff-mono); font-size:.56rem; letter-spacing:.08em; color:var(--orange);
}
.modlist li:first-child{ padding-top:14px; border-top:1px solid var(--rule); }
.modlist li:hover{ transform:translateY(-2px); border-color:var(--rule-2); box-shadow:var(--shadow-sm); }
.modlist b{ font-family:var(--ff-display); font-size:.92rem; font-weight:700; display:block; margin-bottom:3px; }
.modlist span{ display:block; font-size:.78rem; line-height:1.45; color:var(--ink-2); }

/* ---------- KOMPETENSI ---------- */
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(234px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.skill{ background:var(--paper-2); padding:26px 22px 30px; transition:background .3s var(--ease); }
.skill:hover{ background:var(--blue-soft); }
.skill__num{ color:var(--orange); font-size:.62rem; }
.skill h3{ font-size:1.08rem; margin:10px 0 16px; }
.skill ul li{ padding:8px 0; border-top:1px dashed var(--rule); color:var(--ink-2); font-size:.86rem; }
.skill ul li:first-child{ border-top:0; }
.skill .sw li{ font-family:var(--ff-mono); font-size:.75rem; letter-spacing:.03em; }

.langs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(22px,4vw,52px); margin-top:clamp(32px,5vh,50px); padding-top:28px; border-top:1px solid var(--rule); }
.lang__row{ display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; }
.bar{ height:4px; background:var(--rule); overflow:hidden; border-radius:2px; }
.bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue-deep),var(--blue)); transition:width 1.4s var(--ease); }
.bar.is-in span{ width:var(--w); }
.lang__note{ margin:12px 0 0; font-size:.84rem; color:var(--muted); }

/* ---------- SERTIFIKASI ---------- */
.certs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cert{ border:1px solid var(--rule); background:var(--paper-2); padding:24px; box-shadow:var(--shadow-sm); transition:border-color .3s var(--ease),transform .3s var(--ease); }
.cert:hover{ border-color:var(--rule-2); transform:translateY(-3px); }
.cert--hero{ grid-column:1/-1; border-color:#e5c9a4; background:linear-gradient(140deg,#fdf6ec,var(--paper-2) 60%); }
.cert__top{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cert h3{ font-size:clamp(1.08rem,2.3vw,1.5rem); }
.cert__org{ margin:8px 0 0; color:var(--ink-2); font-size:.92rem; }
.cert__lbl{ margin:22px 0 10px; color:var(--muted); font-size:.58rem; }

.regs{ margin-top:clamp(32px,5vh,50px); padding-top:28px; border-top:1px solid var(--rule); }
.regs__title{ color:var(--muted); font-weight:500; margin-bottom:16px; font-size:.6rem; }
.regs__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.reg{ background:var(--paper-2); padding:16px 18px; transition:background .3s var(--ease); }
.reg:hover{ background:var(--blue-soft); }
.reg span{ color:var(--blue); display:block; margin-bottom:5px; font-size:.6rem; }
.reg p{ margin:0; font-size:.83rem; color:var(--ink-2); }
.regs__note{ margin:20px 0 0; max-width:82ch; color:var(--ink-2); font-size:.91rem; }

/* ---------- PENDIDIKAN ---------- */
.edu{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,52px); align-items:start; }
.edu__main{ border:1px solid var(--rule); background:var(--paper-2); padding:28px; box-shadow:var(--shadow-sm); }
.edu__main .mono{ color:var(--orange); }
.edu__main h3{ font-size:clamp(1.18rem,2.5vw,1.65rem); margin:10px 0 6px; }
.edu__org{ margin:0 0 22px; color:var(--blue); font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; }
.edu__facts{ display:flex; gap:36px; padding-top:18px; border-top:1px dashed var(--rule); }
.edu__facts span{ display:block; margin-bottom:4px; }
.edu__facts b{ font-family:var(--ff-display); font-size:1.18rem; }

.org h3{ color:var(--muted); font-weight:500; margin-bottom:16px; font-size:.6rem; }
.orglist li{ padding:16px 0; border-top:1px solid var(--rule); }
.orglist li:first-child{ border-top:0; padding-top:0; }
.orglist .mono{ display:block; margin-bottom:6px; font-size:.58rem; }
.orglist b{ font-family:var(--ff-display); font-size:1rem; font-weight:700; }
.orglist p{ margin:5px 0 0; color:var(--ink-2); font-size:.87rem; }

/* ---------- KONTAK ---------- */
.section--contact{ padding-bottom:clamp(50px,7vh,80px); }
.contact{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(26px,5vw,60px); align-items:start; }
.contact__lead h3{ font-size:clamp(1.3rem,3vw,2.1rem); letter-spacing:-.025em; }
.contact__lead p{ color:var(--ink-2); margin-top:14px; }

.contact__list li{ border-top:1px solid var(--rule); }
.contact__list li:last-child{ border-bottom:1px solid var(--rule); }
.contact__list a{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 16px;
  padding:18px 4px; transition:padding .3s var(--ease),background .3s var(--ease);
}
.contact__list a span{ grid-column:1; font-size:.57rem; }
.contact__list a b{ grid-column:1; font-family:var(--ff-display); font-size:clamp(1rem,2vw,1.24rem); font-weight:700; transition:color .3s; }
.contact__list a svg{ grid-column:2; grid-row:1/3; width:18px; height:18px; color:var(--muted); transition:color .3s var(--ease),transform .3s var(--ease); }
.contact__list a:hover{ padding-left:14px; background:var(--blue-soft); }
.contact__list a:hover b{ color:var(--blue-deep); }
.contact__list a:hover svg{ color:var(--orange); transform:translate(3px,-3px); }

/* ---------- FOOTER ---------- */
.foot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:24px var(--pad) 34px; border-top:1px solid var(--rule);
}
.foot a{ color:var(--ink-2); transition:color .25s; }
.foot a:hover{ color:var(--blue); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s } .reveal[data-d="2"]{ transition-delay:.14s }
.reveal[data-d="3"]{ transition-delay:.21s } .reveal[data-d="4"]{ transition-delay:.28s }
.reveal[data-d="5"]{ transition-delay:.35s } .reveal[data-d="6"]{ transition-delay:.42s }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1140px){
  .nav__links{ display:none; }
  .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:38px; border:1px solid var(--rule-2); background:var(--paper-2); cursor:pointer; border-radius:var(--radius);
  }
  .nav__toggle span{ display:block; width:18px; height:1.5px; background:var(--ink); margin:0 auto; transition:transform .3s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0; padding:14px var(--pad) 20px;
    background:rgba(244,241,234,.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--rule);
  }
  .nav.is-open .nav__links a{ padding:12px 4px; font-size:.92rem; }
  .hero__inner{ grid-template-columns:1fr; }
  .portrait{ max-width:320px; }
  .profil,.edu,.contact{ grid-template-columns:1fr; }
  .app__body{ grid-template-columns:1fr; }
  .app__viz{ border-right:0; border-bottom:1px solid var(--rule); }
}
@media (max-width:760px){
  .nav__cv{ display:none; }
  .tl{ grid-template-columns:1fr; gap:14px; }
  .tl__meta{ flex-direction:row; align-items:center; gap:12px; }
  .hero__title--alt{ -webkit-text-stroke-width:1px; }
  .hero__stats{ gap:20px 28px; }
  .hero__stats dd{ font-size:1.38rem; }
  .edu__facts{ gap:24px; }
  .step::after{ display:none; }
}
@media (max-width:640px){ .certs{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .bar span{ width:var(--w); }
}

/* ---------- PRINT ---------- */
@media print{
  .nav,.progress,.paper,.marquee,.hero__cta,.foot{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
  .section{ page-break-inside:avoid; }
  .section--alt{ background:none; }
}

/* =========================================================
   2026 VISUAL REFINEMENT — "NAVAL ENGINEERING DOSSIER"
   A more confident, editorial treatment that preserves the
   original technical-paper identity and all existing content.
   ========================================================= */

:root{
  --paper:#f1eee6;
  --paper-2:#fffdf7;
  --paper-3:#e8e3d8;
  --ink:#071d2c;
  --ink-2:#405969;
  --muted:#728794;
  --rule:#d6d0c3;
  --rule-2:#b8cbd5;
  --blue:#0b6c8d;
  --blue-deep:#06263a;
  --blue-soft:#deedf1;
  --teal:#087d78;
  --orange:#e8652f;
  --orange-soft:#f8e1d4;
  --shadow-sm:0 1px 2px rgba(7,29,44,.05),0 7px 22px rgba(7,29,44,.04);
  --shadow:0 2px 3px rgba(7,29,44,.06),0 28px 70px -36px rgba(7,29,44,.5);
  --radius:2px;
  --maxw:1380px;
  --pad:clamp(20px,4.7vw,70px);
}

body{
  background:
    radial-gradient(circle at 92% 4%,rgba(232,101,47,.09),transparent 25rem),
    radial-gradient(circle at 5% 34%,rgba(11,108,141,.07),transparent 28rem),
    var(--paper);
}

.paper{
  opacity:.72;
  background-size:144px 144px,144px 144px,24px 24px,24px 24px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.18) 84%,transparent 100%);
}

.progress{ height:3px; background:rgba(7,29,44,.08); }
.progress span{ position:relative; background:linear-gradient(90deg,var(--blue),var(--orange)); box-shadow:0 0 16px rgba(232,101,47,.28); }
.progress span::after{ content:""; position:absolute; right:-2px; top:-2px; width:7px; height:7px; border-radius:50%; background:var(--orange); }

/* Navigation as a precise instrument panel */
.nav{ padding-top:15px; padding-bottom:15px; }
.nav.is-stuck{
  background:rgba(241,238,230,.92);
  backdrop-filter:blur(18px) saturate(125%);
  border-bottom-color:rgba(7,29,44,.13);
  box-shadow:0 10px 30px rgba(7,29,44,.06);
}
.nav__brand{ gap:12px; }
.nav__mark{
  width:29px; height:29px; padding:4px;
  border:1px solid var(--rule-2); border-radius:50%;
  background:rgba(255,253,247,.68);
}
.nav__name{ font-size:.78rem; letter-spacing:.22em; }
.nav__links{ padding:3px; border:1px solid transparent; }
.nav__links a{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.04em; border-radius:1px; }
.nav__links a i{ opacity:.66; }
.nav__links a:hover,.nav__links a.is-active{ background:var(--paper-2); box-shadow:var(--shadow-sm); }
.nav__cv{ box-shadow:0 8px 24px rgba(7,29,44,.07); }

/* Hero: editorial on the left, technical portrait plate on the right */
.hero{
  padding-top:clamp(104px,13vh,142px);
}
.hero::before{
  content:"TECHNICAL PORTFOLIO  /  2026";
  position:absolute; top:108px; right:var(--pad);
  writing-mode:vertical-rl;
  font-family:var(--ff-mono); font-size:.52rem; letter-spacing:.24em;
  color:var(--muted); opacity:.7;
}
.hero__inner{
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  gap:clamp(34px,5vw,78px);
  min-height:calc(100svh - 190px);
  align-items:center;
}
.hero__text{ position:relative; z-index:2; }
.tag{
  margin-bottom:clamp(18px,3vh,30px);
  padding:7px 11px 7px 9px;
  border:1px solid rgba(7,29,44,.13);
  background:rgba(255,253,247,.62);
  box-shadow:var(--shadow-sm);
  font-size:.61rem;
}
.hero__title{
  font-size:clamp(4rem,8.7vw,7.85rem);
  line-height:.82; letter-spacing:-.058em;
  margin:0 0 28px;
  text-wrap:balance;
}
.hero__title span{ width:max-content; max-width:100%; }
.hero__title--alt{
  color:transparent;
  -webkit-text-stroke:1.55px var(--blue);
  filter:drop-shadow(8px 10px 0 rgba(11,108,141,.055));
}
.hero__role{
  max-width:60ch; margin-bottom:20px;
  font-size:clamp(.66rem,1vw,.78rem); line-height:1.75;
}
.hero__lede{
  max-width:61ch; margin-bottom:28px;
  font-size:clamp(.96rem,1.05vw,1.08rem); line-height:1.76;
}
.hero__cta{ margin-bottom:34px; }
.btn{ min-height:47px; padding:13px 21px; box-shadow:0 9px 25px rgba(7,29,44,.06); }
.btn--solid{ background:var(--blue-deep); border-color:var(--blue-deep); box-shadow:0 15px 34px rgba(6,38,58,.18); }
.hero__stats{
  width:min(100%,690px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  padding-top:0; border:1px solid var(--rule); background:rgba(255,253,247,.55);
}
.hero__stats > div{ padding:16px 20px 17px; border-left:1px solid var(--rule); }
.hero__stats > div:first-child{ border-left:0; }
.hero__stats dt{ margin-bottom:2px; font-size:.55rem; }
.hero__stats dd{ font-size:clamp(1.28rem,2vw,1.66rem); }

.portrait{ position:relative; margin:0; justify-self:end; width:min(100%,470px); }
.portrait::before{
  content:"MACHINERY / SURVEY";
  position:absolute; z-index:4; left:-34px; top:48px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:var(--orange); color:#fff;
  font-family:var(--ff-mono); font-size:.52rem; letter-spacing:.18em;
  transform:rotate(-90deg) translateX(-100%); transform-origin:left top;
}
.portrait__frame{
  isolation:isolate; overflow:hidden;
  border:1px solid rgba(7,29,44,.2); padding:11px;
  background:var(--blue-deep);
  box-shadow:0 35px 75px -38px rgba(7,29,44,.76),14px 16px 0 rgba(11,108,141,.08);
}
.portrait__frame::before{
  inset:11px;
  background:
    radial-gradient(circle at 50% 30%,rgba(11,108,141,.54),transparent 44%),
    linear-gradient(180deg,rgba(6,38,58,.08),rgba(6,38,58,.55)),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:auto,auto,26px 26px,26px 26px;
}
.portrait__frame::after{
  content:"01"; position:absolute; z-index:2; right:25px; top:7px;
  font-family:var(--ff-display); font-size:6rem; font-weight:900; line-height:1;
  color:rgba(255,255,255,.055); letter-spacing:-.08em;
}
.portrait img{
  height:clamp(430px,64vh,650px); width:100%; max-height:none;
  object-fit:cover; object-position:50% 14%;
  filter:saturate(.75) contrast(1.05);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.portrait:hover img{ transform:scale(1.018); filter:saturate(.9) contrast(1.06); }
.portrait .c{ width:18px; height:18px; border-color:var(--orange); }
.portrait figcaption{
  display:grid; grid-template-columns:1fr; gap:3px;
  margin-top:0; padding:15px 16px 14px;
  border:1px solid rgba(7,29,44,.16); border-top:0;
  background:rgba(255,253,247,.8);
}
.portrait figcaption .mono:first-child{ color:var(--blue-deep); font-weight:600; }
.marquee{ margin-top:58px; padding:14px 0; background:var(--blue-deep); border:0; }
.marquee__track span{ color:rgba(255,255,255,.72); }
.marquee__track span:nth-child(even){ color:var(--orange); }

/* Section rhythm and stronger typography */
.section{ padding-top:clamp(74px,10vh,118px); padding-bottom:clamp(74px,10vh,118px); }
.section__head{ gap:18px; margin-bottom:clamp(34px,5vh,56px); }
.section__num{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border:1px solid currentColor; color:var(--orange); font-size:.59rem;
}
.section__title{ font-size:clamp(1.9rem,4vw,3.25rem); letter-spacing:-.045em; }
.section__line{ background:linear-gradient(90deg,var(--rule),transparent); }
.section__intro{ font-size:clamp(1rem,1.28vw,1.16rem); line-height:1.75; }

.profil{ grid-template-columns:minmax(0,1.42fr) minmax(300px,.78fr); }
.profil__main{ columns:2; column-gap:clamp(28px,4vw,52px); }
.profil__main .lead{ column-span:all; max-width:78ch; margin-bottom:28px; }
.lead{ border-left:0; padding:0 0 0 24px; position:relative; font-size:clamp(1.08rem,1.5vw,1.3rem); }
.lead::before{ content:""; position:absolute; left:0; top:.3em; bottom:.25em; width:4px; background:linear-gradient(var(--orange),var(--blue)); }
.card--data{ border-top:4px solid var(--blue); padding:26px; box-shadow:var(--shadow); }
.datalist li{ padding:12px 0; }
.pillars{ margin-top:64px; gap:12px; background:transparent; border:0; }
.pillar{
  position:relative; overflow:hidden; min-height:225px;
  border:1px solid var(--rule); padding:28px 24px;
  box-shadow:var(--shadow-sm);
}
.pillar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.pillar:nth-child(2)::after,.pillar:nth-child(4)::after{ background:var(--orange); }
.pillar:hover{ background:var(--paper-2); transform:translateY(-5px); box-shadow:var(--shadow); }
.pillar:hover::after{ transform:scaleX(1); }
.pillar__ico{ width:42px; height:42px; padding:9px; border:1px solid var(--rule-2); background:var(--blue-soft); }
.pillar h3{ margin-top:24px; font-size:1.12rem; }

/* The workflow section becomes the dark technical centrepiece */
.section--alt{
  color:#f8f5ed; background:
    radial-gradient(circle at 78% 12%,rgba(11,108,141,.3),transparent 30rem),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    var(--blue-deep);
  background-size:auto,32px 32px,32px 32px,auto;
  border-color:rgba(255,255,255,.1);
}
.section--alt .section__title,.section--alt strong,.section--alt b{ color:#fff; }
.section--alt .section__line{ background:linear-gradient(90deg,rgba(255,255,255,.24),transparent); }
.section--alt .section__intro{ color:#d5e1e6; }
.section--alt .viz__title{ color:#c9dbe2; }
.section--alt .flow__steps,.section--alt .cycle__list{ gap:1px; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.12); }
.section--alt .step,.section--alt .cycle__list li{ background:rgba(8,42,61,.94); }
.section--alt .step:hover,.section--alt .cycle__list li:hover{ background:#103b52; }
.section--alt .step p,.section--alt .cycle__list p{ color:#cedbe1; }
.section--alt .step h4,.section--alt .cycle__list b{ color:#fff; }
.section--alt .step::after{ border-color:#527181; background:#082a3d; }
.section--alt .step--accent{ background:var(--orange); }
.section--alt .step--accent .step__no,.section--alt .step--accent p{ color:#fff4ed; }
.section--alt .step--accent::after{ background:var(--orange); border-color:#ffd4c1; }
.section--alt .viz__canvas{ border-color:rgba(255,255,255,.18); box-shadow:0 32px 80px -42px #000; }
.section--alt .viz__cap{ color:#c5d4da; }
.section--alt .cycle__list span{ color:#81e0da; }
.section--alt .regs__note{ color:#d7e2e7; }

/* Detailed docking journey — an engineering dossier, not a generic timeline */
.dock-detail{
  position:relative; overflow:hidden; margin:0 0 clamp(58px,8vw,96px);
  border:1px solid rgba(255,255,255,.17);
  background:
    radial-gradient(circle at 50% 12%,rgba(17,119,146,.18),transparent 30rem),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:0 38px 90px -52px #000;
}
.dock-detail::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 38%);
}
.dock-detail__head{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end;
  padding:clamp(28px,4vw,48px); border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(100deg,rgba(5,28,42,.92),rgba(8,58,78,.76));
}
.dock-detail__eyebrow{ display:block; margin-bottom:12px; color:#66c7cf; font-size:.66rem; letter-spacing:.2em; }
.dock-detail__head h3{ max-width:760px; margin:0; color:#fff; font-size:clamp(1.65rem,3.2vw,2.7rem); line-height:1.05; letter-spacing:-.04em; }
.dock-detail__head p{ max-width:720px; margin:14px 0 0; color:#cad8de; font-size:.94rem; line-height:1.7; }
.dock-legend,.dock-card__actors{ display:flex; flex-wrap:wrap; gap:7px; }
.dock-legend{ max-width:290px; justify-content:flex-end; }
.actor{ display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid currentColor; border-radius:999px; font-family:var(--ff-mono); font-size:.57rem; line-height:1; letter-spacing:.08em; text-transform:uppercase; }
.actor::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.actor--owner{ color:#79d6d0; background:rgba(8,125,120,.11); }
.actor--crew{ color:#91bcd0; background:rgba(80,149,182,.1); }
.actor--yard{ color:#ffc39e; background:rgba(232,101,47,.1); }
.actor--class{ color:#f1d37a; background:rgba(220,177,51,.1); }

.dock-phases{ position:relative; padding:clamp(38px,5vw,64px) clamp(24px,4vw,52px); }
.dock-phases::before{
  content:""; position:absolute; top:52px; bottom:52px; left:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(#43b9bd 0 42%,var(--orange) 52% 68%,#43b9bd 82% 100%);
  box-shadow:0 0 20px rgba(67,185,189,.28);
}
.dock-phase{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr); align-items:start; margin-bottom:24px; }
.dock-phase:last-child{ margin-bottom:0; }
.dock-card{ grid-column:1; grid-row:1; min-width:0; padding:25px 25px 0; border:1px solid rgba(255,255,255,.15); border-top:3px solid #259ca2; background:linear-gradient(145deg,rgba(14,62,80,.96),rgba(7,39,56,.98)); box-shadow:0 24px 46px -34px #000; transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease); }
.dock-phase:nth-child(even) .dock-card{ grid-column:3; border-top-color:#dd6b39; }
.dock-card:hover{ transform:translateY(-4px); border-color:rgba(116,213,216,.48); box-shadow:0 28px 58px -34px #000; }
.dock-phase--class .dock-card{ border:1px solid rgba(244,133,78,.5); border-top:3px solid var(--orange); background:linear-gradient(145deg,rgba(95,47,31,.82),rgba(9,44,60,.98) 72%); }
.dock-card__top{ display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:center; }
.dock-card__icon{ display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(115,218,214,.32); background:rgba(74,191,191,.08); color:#64d0ca; }
.dock-phase:nth-child(even) .dock-card__icon{ border-color:rgba(244,133,78,.34); background:rgba(232,101,47,.09); color:#fa9564; }
.dock-card__icon svg{ width:25px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.dock-card__stage{ display:block; margin-bottom:5px; color:#77c9cb; font-size:.56rem; letter-spacing:.13em; }
.dock-phase:nth-child(even) .dock-card__stage{ color:#f5a076; }
.dock-card h4{ margin:0; color:#fff; font-size:clamp(1rem,1.7vw,1.23rem); line-height:1.18; }
.dock-card__summary{ margin:17px 0 14px; color:#dde7eb; font-size:.84rem; line-height:1.65; }
.dock-card__tasks{ display:grid; gap:9px; margin-bottom:18px; }
.dock-card__tasks li{ position:relative; padding-left:17px; color:#c6d5dc; font-size:.77rem; line-height:1.55; }
.dock-card__tasks li::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:2px; background:var(--orange); }
.dock-card__actors{ margin-bottom:20px; }
.dock-card__actors .actor{ padding:5px 8px; font-size:.52rem; }
.dock-card__output{ display:flex; gap:11px; align-items:flex-start; margin:0 -25px; padding:13px 25px; border-top:1px solid rgba(255,255,255,.12); color:#d6e5e9; background:rgba(2,24,36,.58); font-size:.7rem; line-height:1.45; }
.dock-card__output span{ flex:0 0 auto; color:#61cbc6; font-size:.54rem; letter-spacing:.12em; }
.dock-phase:nth-child(even) .dock-card__output span{ color:#fa9564; }
.dock-node{ position:relative; z-index:2; grid-column:2; grid-row:1; justify-self:center; display:grid; place-items:center; width:52px; height:52px; margin-top:22px; border:1px solid rgba(130,219,219,.56); border-radius:50%; color:#fff; background:#082e42; box-shadow:0 0 0 8px #07283a,0 0 30px rgba(62,183,187,.24); font-family:var(--ff-mono); font-size:.7rem; }
.dock-phase:nth-child(even) .dock-node,.dock-phase--class .dock-node{ border-color:#f59161; box-shadow:0 0 0 8px #07283a,0 0 30px rgba(232,101,47,.25); }
.dock-node i{ position:absolute; width:12px; height:2px; right:-15px; background:currentColor; opacity:.65; }
.dock-phase:nth-child(odd) .dock-node i{ right:auto; left:-15px; }

.dock-gates{ position:relative; padding:clamp(28px,4vw,44px); border-top:1px solid rgba(255,255,255,.14); background:rgba(2,24,36,.78); }
.dock-gates__intro{ display:flex; justify-content:space-between; gap:24px; align-items:baseline; margin-bottom:20px; }
.dock-gates__intro span{ color:#f29a70; font-size:.63rem; letter-spacing:.18em; }
.dock-gates__intro p{ margin:0; color:#c3d3da; font-size:.8rem; }
.dock-gates ol{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.13); }
.dock-gates li{ position:relative; min-height:122px; padding:19px; background:#082f43; }
.dock-gates li:not(:last-child)::after{ content:""; position:absolute; z-index:2; top:50%; right:-6px; width:11px; height:11px; border-top:2px solid #ee7a44; border-right:2px solid #ee7a44; transform:translateY(-50%) rotate(45deg); background:#082f43; }
.dock-gates li b{ display:block; margin-bottom:12px; color:#63889a; font-family:var(--ff-mono); font-size:.55rem; }
.dock-gates li span{ display:block; margin-bottom:7px; color:#fff; font-family:var(--ff-mono); font-weight:700; font-size:.68rem; letter-spacing:.08em; }
.dock-gates li small{ color:#c1d1d8; font-size:.68rem; line-height:1.5; }
.dock-gates__note{ margin:15px 0 0; color:#abc0c9; font-size:.65rem; text-align:right; }
.section--alt .app__detail,
.section--alt .app__detail b,
.section--alt .app__detail strong,
.section--alt .cert,
.section--alt .cert h3,
.section--alt .cert b,
.section--alt .cert strong,
.section--alt .reg,
.section--alt .reg b,
.section--alt .reg strong{ color:var(--ink); }
.section--alt .app__detail h4,.section--alt .cert__lbl{ color:var(--muted); }
.section--alt .app__detail span,.section--alt .cert__org,.section--alt .reg p{ color:var(--ink-2); }

/* Experience reads as a deliberate project log */
.timeline{ gap:26px; }
.tl{ grid-template-columns:205px minmax(0,1fr); padding-left:30px; }
.tl::before{ left:4px; background:linear-gradient(var(--orange),var(--rule-2)); }
.tl::after{ left:-2px; width:13px; height:13px; background:var(--paper-2); box-shadow:0 0 0 5px var(--paper); }
.tl__body{
  padding:28px clamp(24px,3vw,38px) 30px;
  border:1px solid var(--rule); border-left:3px solid var(--blue);
  background:rgba(255,253,247,.74); box-shadow:var(--shadow-sm);
}
.tl:first-child .tl__body{ border-left-color:var(--orange); box-shadow:var(--shadow); }
.tl__body h3{ font-size:clamp(1.25rem,2.3vw,1.72rem); }
.ticks li{ margin-bottom:11px; }

/* Digital project, skills and credentials */
.app{ border-color:rgba(7,29,44,.18); box-shadow:0 35px 80px -44px rgba(7,29,44,.7); }
.app__head{ color:#fff; background:linear-gradient(112deg,var(--blue-deep),#0a4760); border-bottom:0; }
.app__head .mono,.app__head .app__sub{ color:#bdd1dc; }
.app__head h3{ color:#fff; }
.app__head .badge{ border-color:rgba(255,255,255,.26); color:#fff; background:rgba(255,255,255,.08); }
.app__viz{ background:#061b29; }

/* SAP cost-control story — financial control room */
.sap{
  position:relative; overflow:hidden; margin-top:clamp(48px,7vw,82px);
  color:var(--ink); background:#edf1ef; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 38px 86px -46px #000;
}
.sap::before{ content:"SAP"; position:absolute; right:-18px; top:-28px; color:rgba(6,83,113,.035); font-family:var(--ff-display); font-size:13rem; line-height:1; font-weight:900; letter-spacing:-.09em; pointer-events:none; }
.sap__head{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:start; padding:clamp(28px,4vw,48px); border-bottom:1px solid #bfcdd1; background:linear-gradient(115deg,#f8faf7 0%,#e5edef 68%,#d9e8eb 100%); }
.sap__eyebrow{ display:block; margin-bottom:11px; color:#09759a; font-size:.63rem; letter-spacing:.18em; }
.sap__head h3{ margin:0; max-width:780px; color:#06263a; font-size:clamp(1.55rem,3vw,2.5rem); line-height:1.08; letter-spacing:-.035em; }
.sap__head p{ max-width:790px; margin:14px 0 0; color:#46616f; font-size:.92rem; line-height:1.72; }
.sap__status{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #82aebb; color:#275b70; background:rgba(255,255,255,.6); font-size:.56rem; letter-spacing:.1em; white-space:nowrap; }
.sap__status i,.sap-console__live i{ width:7px; height:7px; border-radius:50%; background:#0fa69a; box-shadow:0 0 0 4px rgba(15,166,154,.12); }
.sap__body{ position:relative; display:grid; grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr); }
.sap-flow{ padding:clamp(28px,3.5vw,44px); border-right:1px solid #bfcdd1; background:#f9faf6; }
.sap-panel-title span{ color:#61808e; font-size:.57rem; letter-spacing:.14em; }
.sap-panel-title h4{ margin:7px 0 25px; color:#06263a; font-size:1.15rem; }
.sap-flow__list{ position:relative; display:grid; gap:8px; }
.sap-flow__list::before{ content:""; position:absolute; top:28px; bottom:28px; left:20px; width:1px; background:linear-gradient(#1291aa,var(--orange)); }
.sap-flow__list li{ position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:13px; align-items:start; min-height:88px; padding:15px 14px 15px 0; border:1px solid transparent; transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease); }
.sap-flow__list li:hover{ transform:translateX(4px); border-color:#ccd9dc; background:#fff; }
.sap-flow__no{ position:relative; z-index:1; display:grid; place-items:center; width:40px; height:40px; color:#fff; background:#0b6380; font-size:.58rem; box-shadow:0 0 0 5px #f9faf6; }
.sap-flow__list li:nth-child(n+4) .sap-flow__no{ background:var(--orange); }
.sap-flow__list b{ display:block; margin:1px 0 5px; color:#123749; font-size:.85rem; }
.sap-flow__list p{ margin:0; color:#647b86; font-size:.72rem; line-height:1.52; }
.sap-flow__tag{ margin-top:2px; padding:5px 6px; border:1px solid #bdd0d4; color:#53717e; font-family:var(--ff-mono); font-size:.47rem; letter-spacing:.08em; }

.sap-console{ position:relative; padding:clamp(24px,3.2vw,42px); color:#e7f1f3; background:
  linear-gradient(rgba(95,169,190,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(95,169,190,.055) 1px,transparent 1px),
  linear-gradient(145deg,#082d42,#041d2d 72%);
  background-size:24px 24px,24px 24px,auto;
}
.sap-console__chrome{ display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.13); }
.sap-console__mark{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#fff; background:linear-gradient(145deg,#11a1c3,#086485); font-family:var(--ff-display); font-size:1.2rem; font-weight:900; box-shadow:0 0 24px rgba(17,161,195,.28); }
.sap-console__chrome > div span{ display:block; margin-bottom:3px; color:#5ea5b8; font-size:.49rem; letter-spacing:.13em; }
.sap-console__chrome > div b{ color:#fff; font-size:.91rem; }
.sap-console__live{ display:flex; align-items:center; gap:8px; color:#80b6c4; font-size:.48rem; letter-spacing:.1em; }
.sap-chain{ display:grid; grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr); gap:8px; padding:25px 0 22px; }
.sap-chain__lane > span{ display:block; margin-bottom:10px; color:#638e9d; font-size:.48rem; letter-spacing:.12em; }
.sap-chain__lane > div{ display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:9px; align-items:center; padding:8px 9px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); }
.sap-chain__lane i{ grid-row:1/3; display:grid; place-items:center; width:23px; height:23px; border:1px solid #257f98; border-radius:50%; color:#6bc0d0; font-family:var(--ff-mono); font-size:.45rem; font-style:normal; }
.sap-chain__lane b{ color:#dcebee; font-size:.67rem; }
.sap-chain__lane small{ color:#a9bec6; font-size:.55rem; }
.sap-chain__lane--right i{ border-color:#cf774e; color:#ef9c73; }
.sap-chain__core{ position:relative; display:grid; grid-template-rows:repeat(4,1fr); align-items:center; padding-top:23px; }
.sap-chain__core::before{ content:""; position:absolute; top:47px; bottom:23px; left:50%; width:1px; background:linear-gradient(#2b9eb0,var(--orange)); }
.sap-chain__core span{ position:relative; height:1px; background:linear-gradient(90deg,#2b9eb0,var(--orange)); }
.sap-chain__core span::after{ content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-top:1px solid var(--orange); border-right:1px solid var(--orange); transform:rotate(45deg); }
.sap-chain__core b{ position:absolute; z-index:2; left:50%; top:50%; display:grid; place-items:center; width:42px; height:42px; transform:translate(-50%,-38%); border:1px solid #3c9bb1; border-radius:50%; color:#fff; background:#075675; font-family:var(--ff-display); font-size:.7rem; box-shadow:0 0 0 5px #06283b,0 0 24px rgba(47,171,190,.3); }
.sap-ledger{ border:1px solid rgba(255,255,255,.13); background:rgba(2,18,28,.48); }
.sap-ledger__head,.sap-ledger > div{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(76px,.6fr) minmax(92px,.75fr); gap:12px; align-items:center; }
.sap-ledger__head{ padding:8px 12px; color:#578596; background:rgba(255,255,255,.05); font-size:.44rem; letter-spacing:.1em; }
.sap-ledger > div:not(.sap-ledger__head){ padding:10px 12px; border-top:1px solid rgba(255,255,255,.07); color:#a9c0c9; font-size:.6rem; }
.sap-ledger > div > span{ display:flex; align-items:center; gap:7px; }
.sap-ledger > div > b{ color:#d8e8ec; font-size:.58rem; font-weight:500; }
.sap-ledger em{ display:block; height:4px; background:rgba(255,255,255,.09); }
.sap-ledger em i{ display:block; width:var(--w); height:100%; background:linear-gradient(90deg,#168aa4,#e87543); }
.sap-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; }
.sap-dot--blue{ background:#3bb4cd; }.sap-dot--orange{ background:#ef8251; }.sap-dot--teal{ background:#4dc0b8; }.sap-dot--gold{ background:#d8bb61; }
.sap-console__caption{ margin:11px 0 0; color:#a3bac4; font-size:.57rem; line-height:1.5; }
.sap-controls{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #bfcdd1; background:#fff; }
.sap-controls > div{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; padding:21px 18px; border-left:1px solid #d5dfe1; }
.sap-controls > div:first-child{ border-left:0; }
.sap-controls > div > span{ color:var(--orange); font-family:var(--ff-mono); font-size:.54rem; }
.sap-controls p{ margin:0; color:#687d86; font-size:.65rem; line-height:1.5; }
.sap-controls b{ display:block; margin-bottom:4px; color:#173b4c!important; font-size:.7rem; }
.sap__note{ margin:0; padding:12px 18px; border-top:1px solid #d8e1e3; color:#71858d!important; background:#e7edef; font-size:.58rem; text-align:right; }
.skills{ gap:12px; background:transparent; border:0; }
.skill{ min-height:292px; border:1px solid var(--rule); box-shadow:var(--shadow-sm); }
.skill:hover{ background:var(--paper-2); transform:translateY(-5px); box-shadow:var(--shadow); }
.skill__num{ display:inline-block; padding-bottom:8px; border-bottom:2px solid currentColor; }
.bar{ height:7px; border-radius:0; }
.bar span{ background:linear-gradient(90deg,var(--blue-deep),var(--teal),var(--orange)); }
.cert{ padding:28px; }
.cert--hero{
  position:relative; overflow:hidden; padding:34px;
  border-color:rgba(232,101,47,.35);
  background:linear-gradient(130deg,#fff5e9 0%,var(--paper-2) 58%,var(--blue-soft) 100%);
}
.cert--hero::after{ content:"BKI"; position:absolute; right:-10px; bottom:-34px; font-family:var(--ff-display); font-size:9rem; line-height:1; font-weight:900; color:rgba(11,108,141,.055); letter-spacing:-.08em; }
.regs__grid{ gap:8px; background:transparent; border:0; }
.reg{ border:1px solid var(--rule); border-top:3px solid var(--blue); }
.reg:nth-child(even){ border-top-color:var(--orange); }

.edu__main{ border-top:4px solid var(--orange); padding:32px; box-shadow:var(--shadow); }

/* Machinery reliability system — an engine-control-room dossier */
.machinery-care{
  margin-top:clamp(38px,6vw,72px); overflow:hidden;
  border:1px solid rgba(119,171,189,.44); background:#f6f4ee; color:#102b3a;
  box-shadow:0 38px 80px -46px rgba(0,0,0,.72);
}
.machinery-care__head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:end;
  padding:clamp(30px,4.5vw,58px); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
  background:
    radial-gradient(circle at 87% 15%,rgba(29,184,178,.2),transparent 25rem),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#061f2e;
  background-size:auto,32px 32px,32px 32px,auto;
}
.machinery-care__eyebrow{ margin:0 0 13px; color:#75d9d3; }
.machinery-care__head h3{ max-width:850px; color:#fff; font-size:clamp(1.8rem,3.2vw,3.25rem); letter-spacing:-.045em; }
.machinery-care__head h3 i{ color:#f07b45; font-style:normal; }
.machinery-care__head > div > p:last-child{ max-width:780px; margin:18px 0 0; color:#c7d8df; font-size:.92rem; line-height:1.7; }
.machinery-care__modes{ display:grid; grid-template-columns:1fr 1fr; min-width:260px; border:1px solid rgba(255,255,255,.16); }
.machinery-care__modes li{ display:flex; align-items:center; gap:8px; padding:11px 13px; color:#dce9ed; border:1px solid rgba(255,255,255,.07); font-family:var(--ff-mono); font-size:.53rem; letter-spacing:.08em; text-transform:uppercase; }
.machinery-care__modes i{ width:7px; height:7px; border-radius:50%; background:#2ac3bc; box-shadow:0 0 0 3px rgba(42,195,188,.12); }
.machinery-care__modes li:nth-child(3) i{ background:#ef7842; box-shadow:0 0 0 3px rgba(239,120,66,.14); }
.machinery-care__body{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr); }
.maintenance-loop{ padding:clamp(28px,3.5vw,46px); border-right:1px solid #c7d1d2; }
.panel-label{ display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:24px; padding-bottom:13px; border-bottom:1px solid #c8d2d2; }
.panel-label span{ color:#176b7e; }
.panel-label b{ color:#173748; font-family:var(--ff-display); font-size:.86rem; }
.maintenance-loop__steps{ position:relative; }
.maintenance-loop__steps::before{ content:""; position:absolute; top:30px; bottom:30px; left:26px; width:1px; background:linear-gradient(#19a9a4,#19a9a4 49%,#df6631 50%,#df6631); }
.maintenance-loop__steps > li{ position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); gap:17px; padding-bottom:19px; }
.maintenance-loop__steps > li:last-child{ padding-bottom:0; }
.maintenance-loop__no{ position:relative; z-index:1; display:grid; place-items:center; align-self:start; width:54px; height:54px; border:1px solid #76aeb3; border-radius:50%; color:#0b6a77; background:#eef6f3; box-shadow:0 0 0 6px #f6f4ee; }
.maintenance-loop__steps > li:nth-child(n+4) .maintenance-loop__no{ color:#b84417; border-color:#e58e68; background:#fff0e8; }
.maintenance-loop__copy{ padding:4px 0 20px; border-bottom:1px solid #d5dddd; }
.maintenance-loop__steps > li:last-child .maintenance-loop__copy{ border-bottom:0; }
.maintenance-loop__title{ display:flex; justify-content:space-between; gap:14px; align-items:center; }
.maintenance-loop__title h4{ color:#102d3c!important; font-size:1.03rem; }
.maintenance-loop__title > span{ flex:none; padding:4px 7px; color:#176b7e; border:1px solid #b9d0d0; font-family:var(--ff-mono); font-size:.48rem; letter-spacing:.09em; }
.maintenance-loop__steps > li:nth-child(n+4) .maintenance-loop__title > span{ color:#b64b21; border-color:#e5b69f; }
.maintenance-loop__copy > p{ margin:8px 0; color:#4c626d!important; font-size:.75rem; line-height:1.55; }
.maintenance-loop__copy ul{ display:flex; flex-wrap:wrap; gap:5px 15px; }
.maintenance-loop__copy li{ position:relative; padding-left:11px; color:#647882; font-size:.62rem; }
.maintenance-loop__copy li::before{ content:""; position:absolute; top:.64em; left:0; width:4px; height:4px; background:#1b9f9b; transform:rotate(45deg); }
.maintenance-loop__copy em{ display:block; margin-top:10px; color:#9f451f; font-family:var(--ff-mono); font-size:.52rem; font-style:normal; letter-spacing:.08em; }
.machinery-console{ padding:clamp(24px,3vw,38px); color:#d9e8ec; background:
  linear-gradient(rgba(103,162,179,.075) 1px,transparent 1px),
  linear-gradient(90deg,rgba(103,162,179,.075) 1px,transparent 1px),#092b3d;
  background-size:24px 24px,24px 24px,auto;
}
.machinery-console__chrome{ display:grid; grid-template-columns:13px minmax(0,1fr) auto; gap:12px; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.16); }
.machinery-console__lamp{ width:10px; height:10px; border-radius:50%; background:#36d0c6; box-shadow:0 0 0 4px rgba(54,208,198,.12),0 0 17px rgba(54,208,198,.7); }
.machinery-console__chrome div{ display:flex; flex-direction:column; line-height:1.3; }
.machinery-console__chrome div span{ color:#6699a9; font-size:.48rem; }
.machinery-console__chrome div b{ color:#fff!important; font-size:.76rem; }
.machinery-console__state{ padding:6px 8px; color:#9eece6; border:1px solid rgba(90,212,204,.35); font-size:.44rem; }
.powertrain{ margin:22px 0 19px; padding:15px 12px 12px; border:1px solid rgba(255,255,255,.13); background:rgba(2,16,25,.54); }
.powertrain svg{ display:block; width:100%; height:auto; }
.powertrain__shaft{ fill:none; stroke:#385a68; stroke-width:8; }
.powertrain__flow{ fill:none; stroke:url(#machineGlow); stroke-width:2; stroke-dasharray:9 8; animation:shaftFlow 8s linear infinite; }
@keyframes shaftFlow{ to{ stroke-dashoffset:-136; } }
.powertrain__unit rect,.powertrain__unit circle{ fill:#103f55; stroke:#67b9bc; stroke-width:2; }
.powertrain__unit path{ fill:#e46936; stroke:none; }
.powertrain text{ fill:#87aab6; font-family:var(--ff-mono); font-size:11px; letter-spacing:1px; }
.powertrain__prop circle{ fill:#ef743e; stroke:#ffd1bd; stroke-width:2; }
.powertrain__prop path{ fill:#ef743e; stroke:#ffd1bd; stroke-width:1.5; }
.powertrain__support path{ fill:none; stroke:#d06c3e; stroke-width:1.5; stroke-dasharray:4 4; }
.powertrain__support text{ fill:#e68a62; font-size:9px; }
.powertrain figcaption{ margin:5px 3px 0; color:#88a5b0; font-size:.56rem; line-height:1.5; }
.asset-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.asset-grid article{ min-width:0; padding:16px; border:1px solid rgba(255,255,255,.13); background:rgba(7,31,45,.82); }
.asset-grid__id{ display:block; color:#5ecac6; font-size:.48rem; }
.asset-grid h4{ margin:5px 0 8px; color:#fff!important; font-size:.78rem; letter-spacing:0; }
.asset-grid p{ min-height:62px; margin:0 0 11px; color:#b8cbd2!important; font-size:.61rem; line-height:1.5; }
.asset-grid article > div{ display:flex; flex-wrap:wrap; gap:5px 8px; color:#7298a5; font-family:var(--ff-mono); font-size:.43rem; text-transform:uppercase; }
.asset-grid article > div i{ align-self:center; width:5px; height:5px; border-radius:50%; background:#e87441; }
.condition-ladder{ margin-top:8px; border:1px solid rgba(255,255,255,.13); background:rgba(3,21,31,.64); }
.panel-label--dark{ margin:0; padding:15px 16px; border-color:rgba(255,255,255,.12); }
.panel-label--dark span{ color:#62c5c1; font-size:.48rem; }
.panel-label--dark b{ color:#fff!important; font-size:.72rem; }
.condition-ladder ol{ display:grid; grid-template-columns:repeat(3,1fr); }
.condition-ladder li{ position:relative; min-width:0; padding:15px 12px; border-left:1px solid rgba(255,255,255,.11); }
.condition-ladder li:first-child{ border-left:0; }
.condition-ladder li::before{ content:""; display:block; width:100%; height:3px; margin-bottom:10px; background:#32bdb5; }
.condition-ladder .is-watch::before{ background:#d6ad4f; }
.condition-ladder .is-alert::before{ background:#ed7040; }
.condition-ladder li > span{ color:#7ddbd5; font-family:var(--ff-mono); font-size:.44rem; letter-spacing:.06em; }
.condition-ladder .is-watch > span{ color:#e7c778; }.condition-ladder .is-alert > span{ color:#f29770; }
.condition-ladder b{ display:block; margin:4px 0; color:#fff!important; font-size:.58rem; }
.condition-ladder p{ margin:0; color:#88a6b0!important; font-size:.49rem; line-height:1.4; }
.overhaul-scope{ padding:clamp(28px,3.5vw,46px); border-top:1px solid #c7d1d2; background:#ebece7; }
.overhaul-scope__grid{ display:grid; grid-template-columns:1fr 1fr .78fr; border:1px solid #c4cece; }
.overhaul-scope__grid > *{ padding:clamp(20px,2.5vw,30px); border-left:1px solid #c4cece; background:#fffefa; }
.overhaul-scope__grid > *:first-child{ border-left:0; }
.overhaul-scope__grid > article:nth-child(2){ border-top:3px solid var(--orange); }
.overhaul-scope__grid > article:first-child{ border-top:3px solid var(--teal); }
.overhaul-scope__grid > aside{ color:#d9e6eb; background:#103648; }
.overhaul-scope__grid span{ color:#176f79; font-size:.49rem; }
.overhaul-scope__grid aside span{ color:#7ad8d2; }
.overhaul-scope__grid h4{ margin:8px 0; color:#153447!important; font-size:.95rem; }
.overhaul-scope__grid aside h4{ color:#fff!important; }
.overhaul-scope__grid p{ margin:0 0 13px; color:#566b75!important; font-size:.7rem; line-height:1.55; }
.overhaul-scope__grid aside p{ color:#bfd0d6!important; }
.overhaul-scope__grid li{ position:relative; padding:5px 0 5px 15px; color:#4f6671; border-top:1px solid #e3e7e4; font-size:.63rem; }
.overhaul-scope__grid li::before{ content:"+"; position:absolute; left:0; color:#d65f2e; font-family:var(--ff-mono); }
.maintenance-pack{ color:#d8e6ea; border-top:1px solid rgba(255,255,255,.14); background:#061f2e; }
.maintenance-pack__intro{ display:flex; justify-content:space-between; gap:20px; padding:22px clamp(24px,3.5vw,44px); border-bottom:1px solid rgba(255,255,255,.12); }
.maintenance-pack__intro span{ color:#6dd4cf; font-size:.5rem; }
.maintenance-pack__intro b{ color:#fff!important; font-size:.76rem; }
.maintenance-pack ol{ display:grid; grid-template-columns:repeat(4,1fr); }
.maintenance-pack li{ display:grid; grid-template-columns:32px minmax(0,1fr); padding:21px clamp(15px,2vw,24px); border-left:1px solid rgba(255,255,255,.12); }
.maintenance-pack li:first-child{ border-left:0; }
.maintenance-pack li > span{ grid-row:1/3; color:#ef7540; font-family:var(--ff-mono); font-size:.55rem; }
.maintenance-pack li b{ color:#eef7f8!important; font-size:.65rem; }
.maintenance-pack li small{ color:#829faa; font-size:.53rem; }
.maintenance-pack > p{ display:flex; justify-content:center; align-items:center; gap:12px; margin:0; padding:12px; color:#73d7d1; border-top:1px solid rgba(255,255,255,.09); font-family:var(--ff-mono); font-size:.49rem; letter-spacing:.08em; }
.maintenance-pack > p span{ color:#f07843; font-size:1rem; }.maintenance-pack > p i{ width:70px; border-top:1px dashed #547b89; }
.machinery-care__note{ margin:0!important; padding:12px 18px; color:#687f89!important; background:#dfe5e3; font-size:.57rem!important; text-align:right; }

/* Contact becomes a decisive closing panel */
#kontak{
  max-width:calc(var(--maxw) - (var(--pad) * 1.4));
  margin-top:44px; margin-bottom:44px;
  padding-left:clamp(28px,5vw,76px); padding-right:clamp(28px,5vw,76px);
  color:#fff;
  background:
    radial-gradient(circle at 18% 18%,rgba(11,108,141,.48),transparent 26rem),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    var(--blue-deep);
  background-size:auto,28px 28px,28px 28px,auto;
  box-shadow:0 40px 90px -48px rgba(7,29,44,.86);
}
#kontak .section__title,#kontak .contact__lead h3,#kontak .contact__list a b{ color:#fff; }
#kontak .section__line{ background:linear-gradient(90deg,rgba(255,255,255,.24),transparent); }
#kontak .contact__lead p{ color:#b7ccd7; }
#kontak .contact__list li{ border-color:rgba(255,255,255,.15); }
#kontak .contact__list a{ padding:20px 14px; }
#kontak .contact__list a span{ color:#7fa2b4; }
#kontak .contact__list a svg{ color:var(--orange); }
#kontak .contact__list a:hover{ padding-left:22px; background:rgba(255,255,255,.07); }
#kontak .contact__list a:hover b{ color:#fff; }

.foot{ border-top:0; padding-bottom:38px; }

@media (min-width:1141px) and (max-width:1320px){
  .nav__links a{ padding-inline:8px; }
  .nav__links a i{ display:none; }
}

@media (min-width:960px){
  .flow__steps{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .flow__steps .step{ grid-column:span 3; }
  .flow__steps .step:nth-child(n+5){ grid-column:span 4; }
  .flow__steps .step:nth-child(4)::after{ display:none; }
}

@media (max-width:1140px){
  .nav.is-open .nav__links{
    padding:18px var(--pad) 24px;
    background:rgba(241,238,230,.98);
    box-shadow:0 20px 40px rgba(7,29,44,.1);
  }
  .nav.is-open .nav__links a{ border-bottom:1px solid var(--rule); }
  .nav__toggle{ border-color:var(--rule); background:var(--paper-2); box-shadow:var(--shadow-sm); }
  .profil__main{ columns:1; }
}

@media (max-width:880px){
  .hero::before{ display:none; }
  .hero__inner{ grid-template-columns:minmax(0,1.08fr) minmax(270px,.72fr); gap:30px; }
  .hero__title{ font-size:clamp(3.65rem,8.2vw,5.2rem); }
  .hero__lede{ font-size:.96rem; }
  .portrait img{ height:clamp(410px,57vh,530px); }
  .portrait::before{ left:-29px; }
  .dock-detail__head{ grid-template-columns:1fr; }
  .dock-legend{ max-width:none; justify-content:flex-start; }
  .dock-phases{ padding-inline:24px; }
  .dock-phases::before{ left:49px; }
  .dock-phase{ grid-template-columns:50px minmax(0,1fr); margin-bottom:22px; }
  .dock-card,.dock-phase:nth-child(even) .dock-card{ grid-column:2; grid-row:1; }
  .dock-node{ grid-column:1; grid-row:1; width:44px; height:44px; margin-top:18px; box-shadow:0 0 0 6px #07283a; }
  .dock-phase:nth-child(even) .dock-node,.dock-phase--class .dock-node{ box-shadow:0 0 0 6px #07283a; }
  .dock-node i,.dock-phase:nth-child(odd) .dock-node i{ left:auto; right:-10px; width:9px; }
  .dock-gates ol{ grid-template-columns:1fr 1fr; }
  .dock-gates li:nth-child(2)::after{ display:none; }
  .sap__head{ grid-template-columns:1fr; }
  .sap__status{ justify-self:start; }
  .sap__body{ grid-template-columns:1fr; }
  .sap-flow{ border-right:0; border-bottom:1px solid #bfcdd1; }
  .sap-controls{ grid-template-columns:1fr 1fr; }
  .sap-controls > div:nth-child(3){ border-left:0; border-top:1px solid #d5dfe1; }
  .sap-controls > div:nth-child(4){ border-top:1px solid #d5dfe1; }
  .ship-map{ grid-template-columns:1fr 1fr; }
  .machinery-care__head{ grid-template-columns:1fr; align-items:start; }
  .machinery-care__modes{ width:min(100%,520px); }
  .machinery-care__body{ grid-template-columns:1fr; }
  .maintenance-loop{ border-right:0; border-bottom:1px solid #c7d1d2; }
  .overhaul-scope__grid{ grid-template-columns:1fr 1fr; }
  .overhaul-scope__grid > aside{ grid-column:1/-1; border-left:0; border-top:1px solid #c4cece; }
  .maintenance-pack ol{ grid-template-columns:1fr 1fr; }
  .maintenance-pack li:nth-child(3){ border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  .maintenance-pack li:nth-child(4){ border-top:1px solid rgba(255,255,255,.12); }
}

@media (max-width:760px){
  .hero{ padding-top:105px; }
  .hero__inner{ grid-template-columns:1fr; min-height:0; }
  .hero__title{ font-size:clamp(3.55rem,17vw,6rem); }
  .hero__stats{ grid-template-columns:1fr 1fr; }
  .hero__stats > div{ border-left:1px solid var(--rule); }
  .hero__stats > div:nth-child(odd){ border-left:0; }
  .hero__stats > div:last-child{ grid-column:1/-1; border-left:0; border-top:1px solid var(--rule); }
  .portrait{ justify-self:start; width:min(88vw,430px); margin:12px auto 0; }
  .portrait img{ height:min(132vw,590px); }
  .marquee{ margin-top:46px; }
  .profil,.edu,.contact{ grid-template-columns:1fr; }
  .tl{ grid-template-columns:1fr; gap:16px; padding-left:24px; }
  .tl__meta{ align-items:flex-start; }
  .tl__body{ padding:24px 20px 26px; }
  .app__head > div:first-child{ padding-right:0; }
  .app__head > .badge{ position:static; }
  .viz__canvas{ overflow-x:auto; overscroll-behavior-inline:contain; }
  .viz__canvas .ship{ width:820px; max-width:none; }
  .app__viz{ overflow-x:auto; overscroll-behavior-inline:contain; justify-items:start; }
  .app__viz .arch{ width:680px; max-width:none; }
  [data-scrollable="true"] > .scroll-hint{
    display:block; position:sticky; left:0; width:max-content; margin-top:10px;
    font-size:.56rem; letter-spacing:.14em; color:var(--muted);
  }
  .app__viz .scroll-hint{ color:#8fb3c4; }
  #kontak{ margin:24px 14px; max-width:none; }
}

@media (max-width:520px){
  .nav{ padding-inline:16px; }
  .nav__brand{ gap:7px; }
  .nav__name{ font-size:.66rem; letter-spacing:.14em; }
  .lang-switch{ margin-left:auto; }
  .lang-switch button,.lang-switch a{ min-width:28px; height:26px; padding-inline:5px; }
  .hero{ padding-inline:18px; }
  .tag{ letter-spacing:.12em; }
  .hero__title{ font-size:clamp(3.1rem,16.2vw,4.8rem); }
  .hero__role{ letter-spacing:.13em; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  .section{ padding-inline:20px; }
  .section__head{ align-items:flex-start; }
  .section__line{ margin-top:17px; }
  .portrait::before{ display:none; }
  .portrait{ width:100%; }
  .pillar{ min-height:0; }
  .dock-detail{ margin-inline:-20px; }
  .dock-detail__head{ padding:27px 20px; }
  .dock-detail__head h3{ font-size:1.75rem; }
  .dock-phases{ padding:34px 14px; }
  .dock-phases::before{ left:35px; }
  .dock-phase{ grid-template-columns:42px minmax(0,1fr); }
  .dock-node{ width:38px; height:38px; margin-top:17px; font-size:.6rem; box-shadow:0 0 0 5px #07283a; }
  .dock-phase:nth-child(even) .dock-node,.dock-phase--class .dock-node{ box-shadow:0 0 0 5px #07283a; }
  .dock-card{ padding:20px 17px 0; }
  .dock-card__top{ grid-template-columns:40px minmax(0,1fr); gap:11px; }
  .dock-card__icon{ width:40px; height:40px; }
  .dock-card__output{ margin-inline:-17px; padding-inline:17px; flex-direction:column; gap:5px; }
  .dock-gates{ padding:26px 18px; }
  .dock-gates__intro{ display:block; }
  .dock-gates__intro p{ margin-top:7px; }
  .dock-gates ol{ grid-template-columns:1fr; }
  .dock-gates li:not(:last-child)::after{ top:auto; right:50%; bottom:-6px; transform:translateX(50%) rotate(135deg); }
  .dock-gates li:nth-child(2)::after{ display:block; }
  .dock-gates__note{ text-align:left; }
  .sap{ margin-inline:-20px; }
  .sap__head{ padding:27px 20px; }
  .sap__head h3{ font-size:1.72rem; }
  .sap-flow,.sap-console{ padding:26px 18px; }
  .sap-flow__list li{ grid-template-columns:38px minmax(0,1fr); }
  .sap-flow__tag{ display:none; }
  .sap-flow__no{ width:36px; height:36px; }
  .sap-flow__list::before{ left:18px; }
  .sap-console__chrome{ grid-template-columns:38px minmax(0,1fr); }
  .sap-console__mark{ width:38px; height:38px; }
  .sap-console__live{ grid-column:1/-1; }
  .sap-chain{ grid-template-columns:1fr; gap:14px; }
  .sap-chain__core{ display:none; }
  .sap-chain__lane--right{ border-top:1px dashed rgba(255,255,255,.18); padding-top:14px; }
  .sap-ledger__head,.sap-ledger > div{ grid-template-columns:minmax(0,1fr) 72px; }
  .sap-ledger__head span:last-child,.sap-ledger em{ display:none; }
  .sap-controls{ grid-template-columns:1fr; }
  .sap-controls > div{ border-left:0; border-top:1px solid #d5dfe1; }
  .sap-controls > div:first-child{ border-top:0; }
  .sap__note{ text-align:left; }
  .viz--real .viz__canvas{ margin-inline:-20px; padding-inline:10px; }
  .ship-photo{ overflow:hidden; padding:24px 12px; }
  .ship-photo img{ width:100%; max-width:100%; }
  .ship-photo::after{ display:none; }
  .ship-marker{ display:none; }
  .ship-map{ grid-template-columns:1fr; }
  .ship-map li{ min-height:0; }
  .machinery-care{ margin-inline:-20px; }
  .machinery-care__head{ padding:28px 20px; gap:24px; }
  .machinery-care__head h3{ font-size:1.72rem; }
  .machinery-care__head > div > p:last-child{ font-size:.78rem; }
  .machinery-care__modes{ min-width:0; grid-template-columns:1fr; }
  .maintenance-loop,.machinery-console,.overhaul-scope{ padding:25px 17px; }
  .panel-label{ display:block; }
  .panel-label b{ display:block; margin-top:5px; }
  .maintenance-loop__steps::before{ left:19px; }
  .maintenance-loop__steps > li{ grid-template-columns:40px minmax(0,1fr); gap:13px; }
  .maintenance-loop__no{ width:40px; height:40px; box-shadow:0 0 0 5px #f6f4ee; font-size:.54rem; }
  .maintenance-loop__title{ align-items:flex-start; }
  .maintenance-loop__title h4{ font-size:.9rem; }
  .maintenance-loop__title > span{ display:none; }
  .maintenance-loop__copy > p{ font-size:.69rem; }
  .machinery-console__chrome{ grid-template-columns:11px minmax(0,1fr); }
  .machinery-console__state{ grid-column:1/-1; width:max-content; }
  .powertrain{ margin-inline:-2px; overflow:hidden; }
  .asset-grid{ grid-template-columns:1fr; }
  .asset-grid p{ min-height:0; }
  .condition-ladder ol{ grid-template-columns:1fr; }
  .condition-ladder li{ border-left:0; border-top:1px solid rgba(255,255,255,.11); }
  .condition-ladder li:first-child{ border-top:0; }
  .overhaul-scope__grid{ grid-template-columns:1fr; }
  .overhaul-scope__grid > *{ border-left:0; border-top:1px solid #c4cece; }
  .overhaul-scope__grid > *:first-child{ border-top:3px solid var(--teal); }
  .overhaul-scope__grid > aside{ grid-column:auto; }
  .maintenance-pack__intro{ display:block; padding:20px 17px; }
  .maintenance-pack__intro b{ display:block; margin-top:5px; }
  .maintenance-pack ol{ grid-template-columns:1fr; }
  .maintenance-pack li{ border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  .maintenance-pack li:first-child{ border-top:0; }
  .maintenance-pack__note{ text-align:left; }
  .machinery-care__note{ padding-inline:17px; text-align:left; }
  .app__metrics{ width:100%; }
  .app__metrics div{ flex:1; min-width:92px; padding-inline:10px; }
  .modlist{ grid-template-columns:1fr; }
  .cert--hero{ padding:26px 22px; }
  #kontak{ padding-inline:22px; }
}