/* Layout: shipping-manifest motif. Wide expanded display type, HS codes as cargo labels.
   Wolfexim navy (from the business card) as the brand ink, amber as the single accent. */
:root {
  --paper: #f3f4f8;
  --surface: #ffffff;
  --ink: #07194c;
  --text: #1a2340;
  --muted: #5a6380;
  --line: #d5d9e5;
  --amber: #c97a12;
  --amber-soft: #f6ead6;
  --band: #07194c;
  --band-text: #e8ecf6;
  --band-muted: #a3aed0;
  --ph-bg: #fff1c2;
  --ph-line: #c99a1a;
  --ok: #2f7d5b;
  --mark-filter: none;
  --intro-bg: #b8894a;
  --intro-fg: #07194c;
  --intro-dim: #2a2410;

  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 4rem);

  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a1126;
    --surface: #111a36;
    --ink: #e8ecf6;
    --text: #d5dbea;
    --muted: #96a1c0;
    --line: #26315a;
    --amber: #eba23d;
    --amber-soft: #3a2b14;
    --band: #0d2266;
    --band-text: #e8ecf6;
    --band-muted: #a3aed0;
    --ph-bg: #4a3a0e;
    --ph-line: #d9a93a;
    --ok: #5cc196;
    --mark-filter: brightness(0) invert(0.93);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a1126;
  --surface: #111a36;
  --ink: #e8ecf6;
  --text: #d5dbea;
  --muted: #96a1c0;
  --line: #26315a;
  --amber: #eba23d;
  --amber-soft: #3a2b14;
  --band: #0d2266;
  --band-text: #e8ecf6;
  --band-muted: #a3aed0;
  --ph-bg: #4a3a0e;
  --ph-line: #d9a93a;
  --ok: #5cc196;
  --mark-filter: brightness(0) invert(0.93);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--ink);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 118%; letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); font-weight: 750; font-stretch: 112%; }
h3 { font-size: var(--step-1); font-weight: 650; font-stretch: 100%; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.9rem;
}

/* Placeholder marker */
.ph {
  background: var(--ph-bg);
  box-shadow: inset 0 -2px 0 var(--ph-line);
  border-radius: 2px;
  padding-inline: 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.draft-bar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); padding-block: 0.45rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 650; font-stretch: 108%;
  font-size: 1rem; text-decoration: none;
  background: var(--amber); color: #1a1205;
  border: 2px solid var(--amber); border-radius: var(--radius);
  padding: 0.75rem 1.35rem; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: none; object-fit: contain; filter: var(--mark-filter); }
.brand-name { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 1.25rem; color: var(--ink); letter-spacing: 0.02em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; white-space: nowrap; }
.site-nav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: 0.98rem; color: var(--text); }
.site-nav a:not(.btn):hover { color: var(--amber); }
.nav-toggle {
  display: none;
  font: 600 0.95rem var(--f-body); color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.4rem 0.8rem; cursor: pointer;
}
@media (max-width: 1120px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding-block: 0.7rem; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 0.9rem; }
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) 2.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy { min-width: 0; }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 34em; margin-top: 1.4rem; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.manifest {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(7, 25, 76, 0.35);
}
.manifest-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.tag { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ok); border: 1px solid currentColor; border-radius: 99px; padding: 0.1rem 0.55rem; text-transform: uppercase; letter-spacing: 0.08em; }
.container-id { display: grid; gap: 0.15rem; margin-block: 1.2rem; padding-block: 1rem; border-block: 1px dashed var(--line); }
.container-id .label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.container-id strong { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); color: var(--ink); letter-spacing: 0.04em; }
.manifest-rows { margin: 0; display: grid; gap: 0.55rem; }
.manifest-rows div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.manifest-rows dt { color: var(--muted); }
.manifest-rows dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); min-width: 0; }
.track { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.track li { font-family: var(--f-mono); font-size: 0.66rem; color: var(--muted); padding-top: 0.55rem; border-top: 4px solid var(--line); text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.track li.done { border-top-color: var(--ink); color: var(--text); }
.track li.now { border-top-color: var(--amber); color: var(--amber); }

.terms-strip {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  font-family: var(--f-mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em;
}
.terms-strip li { display: flex; align-items: center; gap: 0.5rem; }
.terms-strip li::before { content: ""; width: 6px; height: 6px; background: var(--amber); border-radius: 1px; }

/* Sections */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 46rem; display: grid; gap: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 + p { margin-top: 1rem; color: var(--muted); max-width: 40em; }
.note { margin-top: 1.5rem; font-size: var(--step--1); color: var(--muted); }

.about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about-grid > div { display: grid; gap: 1.1rem; max-width: 38em; }
.about-grid h2 { margin-bottom: 0.3rem; }
.figures { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.figures div { padding: 1.2rem 0.4rem 1.2rem 0; border-bottom: 1px solid var(--line); }
.figures dt { font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.figures dd { margin: 0.35rem 0 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 2.3rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Cargo lists (FMCG + IT) */
.cargo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cargo { min-width: 0; padding: 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 0.55rem; align-content: start; transition: background-color .15s ease; }
.cargo:hover { background: var(--amber-soft); }
.cargo .hs { color: var(--amber); }
.cargo p { color: var(--muted); font-size: 0.98rem; }
.section-alt .cargo-list, .section-alt .cargo { border-color: var(--line); }

/* Services band */
.section-ink { background: var(--band); color: var(--band-text); }
.section-ink h2, .section-ink h3 { color: var(--band-text); }
.section-ink .eyebrow { color: var(--amber); }
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.services article { display: grid; gap: 0.7rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--amber); }
.services p { color: var(--muted); font-size: 0.98rem; }
.section-ink .ph { color: var(--band-text); background: color-mix(in srgb, var(--ph-line) 30%, transparent); }

/* IT division */
.it-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.it-head h2 { font-size: var(--step-4); font-stretch: 118%; }
.it-lede { color: var(--band-muted); font-size: var(--step-1); line-height: 1.5; max-width: 32em; }
.it-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); overflow: hidden; }
.it-card { background: var(--band); padding: clamp(1.25rem, 2.5vw, 1.8rem); display: grid; gap: 0.6rem; align-content: start; min-width: 0; transition: background-color .2s ease; }
.it-card:hover { background: color-mix(in srgb, var(--band) 88%, #ffffff); }
.it-key { color: var(--amber); text-transform: uppercase; letter-spacing: 0.08em; }
.it-card h3 { font-size: var(--step-1); }
.it-card p { color: var(--band-muted); font-size: 0.98rem; }
.it-promise { margin-top: clamp(2rem, 4vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.it-promise ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }
.it-promise li { color: var(--band-muted); max-width: 17rem; line-height: 1.45; }
.it-promise strong { display: block; color: var(--band-text); font-family: var(--f-display); font-stretch: 112%; font-size: var(--step-1); margin-bottom: 0.15rem; }
.it-hs { margin-top: 1.75rem; color: var(--band-muted); opacity: 0.8; }
@media (max-width: 1000px) { .it-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .it-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .it-grid { grid-template-columns: minmax(0, 1fr); } }

/* Process */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.steps li { counter-increment: step; display: grid; gap: 0.5rem; align-content: start; position: relative; padding-top: 3.2rem; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  color: var(--ink); border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper);
}
.steps li::after { content: ""; position: absolute; top: 1.15rem; left: 2.8rem; right: -0.8rem; border-top: 2px dashed var(--line); }
.steps li:last-child::after { display: none; }
.steps p { color: var(--muted); font-size: 0.98rem; }

.incoterms { margin-top: clamp(3rem, 6vw, 4.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.incoterms h3 { margin-bottom: 1.2rem; }
.incoterms dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
.incoterms div { display: flex; gap: 0.9rem; align-items: baseline; }
.incoterms dt { font-family: var(--f-mono); font-weight: 500; color: var(--amber); min-width: 2.6rem; }
.incoterms dd { margin: 0; color: var(--text); font-size: 0.98rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-info { display: grid; gap: 1rem; }
.contact-info > p { color: var(--muted); }
.contact-list { margin: 0.8rem 0 0; display: grid; }
.contact-list div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
.contact-list dt { font-family: var(--f-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 0.2rem; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.copy { font: 500 0.72rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 0.15rem 0.5rem; cursor: pointer; }
.copy:hover { color: var(--ink); border-color: var(--ink); }

.quote-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.65rem 0.75rem;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
.field [aria-invalid="true"] { border-color: #c0392b; }
.quote-form .btn { justify-self: start; }
.form-status { font-size: 0.95rem; color: var(--muted); min-height: 1.5em; }
.form-status.ok { color: var(--ok); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 2rem; font-size: var(--step--1); color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.site-footer a { color: var(--muted); }

/* Responsive */
@media (max-width: 1000px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .steps li::after { display: none; }
  .incoterms dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .cargo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cargo-list, .services, .steps, .incoterms dl, .field-row { grid-template-columns: minmax(0, 1fr); }
  .figures dd { font-size: 1.9rem; }
  .contact-list div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* Intro screen: one fixed navy look in both themes */
body.intro-open { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) var(--gutter) env(safe-area-inset-bottom, 0px);
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 243, 214, 0.28) 45%, transparent 60%) 0 0 / 250% 100% no-repeat,
    radial-gradient(110% 85% at 50% 38%, #f1d9a4 0%, #d4ab69 32%, var(--intro-bg) 58%, #6e4b22 88%, #3e2a12 100%);
  animation: intro-sheen 7s ease-in-out infinite;
  color: var(--intro-fg);
  overflow: hidden;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro.leaving { transform: translateY(-100%); }
.intro[hidden] { display: none; }
.intro-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 42%), rgba(255, 240, 205, 0.32), transparent 62%);
}
.intro-stage { position: relative; display: grid; justify-items: center; text-align: center; gap: 1.1rem; perspective: 900px; }
.intro-logo {
  position: relative; display: grid; place-items: center;
  width: clamp(130px, 26vw, 200px); aspect-ratio: 1; max-width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
}
.intro-logo img {
  position: relative; width: 100%; height: auto;
  filter: drop-shadow(0 1px 0 rgba(255, 236, 196, 0.6)) drop-shadow(0 18px 30px rgba(62, 38, 10, 0.4));
  animation: logo-in 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.intro-logo:hover img { filter: drop-shadow(0 0 22px rgba(235, 162, 61, 0.6)); }
.intro-ring {
  position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid rgba(7, 25, 76, 0.35);
  animation: ring 3.2s ease-out 1.1s infinite both;
}
.intro-ring + .intro-ring { animation-delay: 2.7s; }
.intro-name {
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(2rem, 1.2rem + 5vw, 4.4rem); letter-spacing: 0.08em; line-height: 1;
  margin-top: 0.6rem; position: relative; padding-bottom: 0.9rem;
  text-shadow: 0 1px 0 rgba(255, 236, 196, 0.55);
}
.intro-name::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px;
  background: #07194c; transform-origin: left; animation: line-in 0.8s ease 1.9s both;
}
.intro-name .ch { display: inline-block; animation: letter-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.9s + var(--i) * 75ms); }
.intro-tag { font-family: var(--f-mono); font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.85rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--intro-dim); animation: fade-up 0.8s ease 2.2s both; }
.intro-enter {
  margin-top: 1rem; font: 650 1rem var(--f-display); font-stretch: 108%;
  color: var(--intro-fg); background: transparent;
  border: 1.5px solid rgba(7, 25, 76, 0.55); border-radius: 99px;
  padding: 0.75rem 1.8rem; cursor: pointer;
  animation: fade-up 0.8s ease 2.6s both;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.intro-enter:hover { background: #07194c; border-color: #07194c; color: #f1d9a4; }
.intro :focus-visible { outline-color: #eba23d; }

@keyframes logo-in {
  from { clip-path: inset(100% -40% -40% -40%); transform: translateY(24px) scale(0.92); opacity: 0.2; }
  to { clip-path: inset(-40% -40% -40% -40%); transform: none; opacity: 1; }
}
@keyframes letter-in { from { opacity: 0; transform: translateY(0.55em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-sheen { 0%, 100% { background-position: 120% 0, 0 0; } 50% { background-position: -20% 0, 0 0; } }
@keyframes ring { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro-logo { transition: none; }
  .intro, .intro *, .intro-name::after { animation: none !important; }
  .intro-ring { display: none; }
}

.footer-links { display: inline-flex; gap: 1.25rem; align-items: center; }
.link-btn { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* Choice screen: two divisions side by side, fixed dark look in both themes */
.chooser {
  position: fixed; inset: 0; z-index: 99;
  display: flex; background: #050b1f; color: #ffffff;
  transition: opacity 0.5s ease;
}
.chooser.closing { opacity: 0; pointer-events: none; }
.chooser:focus { outline: none; }
.chooser[hidden] { display: none; }
.chooser-brand {
  position: absolute; z-index: 3; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 1.1rem); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.9rem; pointer-events: none; white-space: nowrap;
  color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.chooser-brand img { width: 64px; height: 64px; padding: 6px; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.chooser-brand > div { display: grid; gap: 0.2rem; }
.chooser-name { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); letter-spacing: 0.06em; line-height: 1; }
.chooser-line { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #eba23d; }
.choice {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: end;
  padding: 9.5rem clamp(1.25rem, 4vw, 3.5rem) calc(env(safe-area-inset-bottom, 0px) + 2.2rem);
  color: #ffffff; text-decoration: none; text-align: center;
  transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1), filter 0.4s ease;
}
.choice-fmcg { background: radial-gradient(90% 70% at 50% 40%, #3a3d44 0%, #15161a 55%, #050506 100%); }
.choice-it { background: radial-gradient(90% 70% at 50% 40%, #0f2c80 0%, #07194c 55%, #030b26 100%); border-left: 1px solid rgba(255, 255, 255, 0.12); }
.choice-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.choice-art, .choice-copy { position: relative; z-index: 1; }
.choice-art { align-self: center; display: grid; justify-items: center; perspective: 700px; }
.choice-copy { display: grid; gap: 0.6rem; justify-items: center; max-width: 26rem; }
.choice-eyebrow { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff6b70; }
.choice-it .choice-eyebrow { color: #7cc4ff; }
.choice-logo { line-height: 0; display: flex; justify-content: center; align-items: center; margin-top: 1.1rem; }
.choice-logo img { display: block; }
.choice-logo img { height: clamp(38px, 1.6vw + 26px, 50px); width: auto; background: #ffffff; border-radius: 3px; padding: 4px 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.choice-title { color: #ffffff; font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); font-weight: 800; font-stretch: 118%; line-height: 1; }
.choice-sub { color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; }
.choice-dist { display: grid; justify-items: center; gap: 0.45rem; margin-top: 0.6rem; }
.choice-dist span {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.choice-dist span::before, .choice-dist span::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #c9a25a); }
.choice-dist span::after { transform: scaleX(-1); }
.choice-dist strong {
  font-family: var(--f-display); font-weight: 700; font-stretch: 125%; line-height: 1;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem); letter-spacing: 0.22em; padding-left: 0.22em;
  background: linear-gradient(180deg, #f7e7bf 0%, #d9b46a 48%, #a9793a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.choice-fmcg, .choice-it, .choice-commod { grid-template-rows: auto 1fr auto; padding-top: 6.8rem; }
.choice .choice-tag { margin-bottom: 0.7rem; }
.choice-it .tag-main { --trail: 124, 196, 255; }
.choice-it .tag-from { color: #7cc4ff; }
.ph-stage, .it-stage { height: 390px; }
.tag-main { white-space: nowrap; }
.choice { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
.choice .tag-main { font-size: clamp(0.95rem, 4.9cqi, 2.4rem); }
.choice .choice-tag { height: 3.9rem; align-content: start; }
@media (max-width: 760px) { .choice .choice-tag { height: auto; } }
.choice .tag-from { font-size: clamp(0.6rem, 1.9cqi, 0.92rem); }
.choice-plate {
  display: inline-flex; align-items: center; height: clamp(38px, 1.6vw + 26px, 50px); padding: 0 clamp(14px, 1.2vw, 20px);
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 3px; color: #ffffff;
  font-family: var(--f-display); font-weight: 600; font-stretch: 125%; text-transform: uppercase; line-height: 1;
  font-size: clamp(0.85rem, 0.5vw + 0.65rem, 1.05rem); letter-spacing: 0.26em; padding-left: calc(clamp(14px, 1.2vw, 20px) + 0.26em);
}
.choice-tag { position: relative; z-index: 2; margin: 0; align-self: start; display: grid; justify-items: center; gap: 0.15rem; line-height: 1; }
.tag-main {
  --trail: 216, 38, 47;
  position: relative; display: block;
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-style: italic; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.7vw, 2.5rem); letter-spacing: 0.01em; color: #ffffff;
  text-shadow: -7px 0 0 rgba(var(--trail), 0.55), -14px 0 0 rgba(var(--trail), 0.32), -21px 0 0 rgba(var(--trail), 0.16), -28px 0 0 rgba(var(--trail), 0.07);
}
.chooser.ready .tag-main { animation: tag-dash 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.35s; }
.tag-from {
  font-family: var(--f-mono); font-size: 0.92rem; letter-spacing: 0.42em; text-transform: uppercase; color: #ff6b72;
}
.chooser.ready .tag-from { animation: tag-fade 0.8s ease both 1.05s; }
@keyframes tag-dash {
  0% { opacity: 0; transform: translateX(-60px) skewX(-12deg); text-shadow: -30px 0 0 rgba(var(--trail), 0.6), -60px 0 0 rgba(var(--trail), 0.35), -90px 0 0 rgba(var(--trail), 0.18), -120px 0 0 rgba(var(--trail), 0.08); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes tag-fade { from { opacity: 0; letter-spacing: 0.9em; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chooser.ready .tag-main, .chooser.ready .tag-from { animation: none; } }
.choice-go {
  margin-top: 0.6rem; font-family: var(--f-display); font-weight: 650; font-stretch: 108%;
  border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 99px; padding: 0.65rem 1.5rem;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.choice-fmcg:hover .choice-go, .choice-fmcg:focus-visible .choice-go { background: #d8262f; border-color: #d8262f; color: #ffffff; }
.choice-it:hover .choice-go, .choice-it:focus-visible .choice-go { background: #7cc4ff; border-color: #7cc4ff; color: #04112f; }
.choice-commod:hover .choice-go, .choice-commod:focus-visible .choice-go { background: #c8b48a; border-color: #c8b48a; color: #15120b; }
.choice:focus-visible { outline: 3px solid #eba23d; outline-offset: -6px; }
@media (hover: hover) and (min-width: 761px) {
  .chooser:hover .choice { filter: saturate(0.6) brightness(0.75); }
  .chooser .choice:hover { flex-grow: 1.2; filter: none; }
}
.chooser.picked-fmcg .choice-fmcg, .chooser.picked-it .choice-it, .chooser.picked-commod .choice-commod { flex-grow: 12; filter: none; }
.chooser-skip {
  position: absolute; z-index: 3; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem); transform: translateX(-50%);
  font: 600 0.9rem var(--f-body); color: rgba(255, 255, 255, 0.8);
  background: rgba(5, 11, 31, 0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 99px; padding: 0.45rem 1rem; cursor: pointer;
}
.chooser-skip:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.chooser:not(.ready) .choice-copy, .chooser:not(.ready) .choice-art { opacity: 0; transform: translateY(16px); }
.choice-copy, .choice-art { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.choice-it .choice-copy, .choice-it .choice-art { transition-delay: 0.12s; }

/* Power Horse stage: lifestyle cards orbit the can (stand-in can until official artwork arrives) */
.ph-stage { position: relative; width: 460px; max-width: 100%; height: 390px; perspective: 1000px; transform-style: preserve-3d; display: grid; place-items: center; }
.orbit { position: absolute; inset: 0; transform-style: preserve-3d; }
.orbit-card {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 92px; margin: 40px 0 0 -37px;
  border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2);
  background: #111317; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.orbit-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orbit-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.orbit-word {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0.45rem; text-align: center;
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff;
}
.orbit-card-text { display: grid; place-items: center; align-content: center; background: linear-gradient(160deg, #2a0c10, #0d0e11); }
.orbit-card-text::after { display: none; }
.orbit-card-text .orbit-word { position: static; }
.orbit-big { font-family: var(--f-display); font-weight: 800; font-stretch: 118%; font-size: 1.3rem; color: #ffffff; line-height: 1; margin-bottom: 0.4rem; }
.orbit-word::before { content: ""; display: block; width: 16px; height: 2px; margin: 0 auto 0.25rem; background: #d8262f; }
.orbit-can { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }

.ph-can {
  margin: -200px 0 0 -78px;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
}
.can-shadow { position: absolute; bottom: 6px; left: 50%; width: 140px; height: 16px; margin-left: -70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
@keyframes can-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.rack + .can-shadow { position: static; margin: 18px auto 0; }

/* IT stage: solution cards orbit the rack */
.orbit-card-it {
  display: grid; place-items: center; align-content: center; gap: 0.45rem;
  background: linear-gradient(160deg, rgba(36, 74, 170, 0.92), rgba(8, 20, 62, 0.95));
  border-color: rgba(124, 196, 255, 0.45); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.orbit-card-it::after { display: none; }
.orbit-card-it svg { width: 30px; height: 30px; fill: none; stroke: #9fd3ff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(124, 196, 255, 0.6)); }
.orbit-card-it .orbit-word { position: static; font-size: 0.56rem; padding-inline: 4px; }
.orbit-card-it .orbit-word::before { background: #7cc4ff; }
.it-core { margin: -190px 0 0 -112px; transform-style: preserve-3d; }
.it-core .rack { animation: none; }
.it-stage::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 340px; height: 70px; margin-left: -170px; border-radius: 50%; border: 1px solid rgba(124, 196, 255, 0.35); box-shadow: 0 0 40px rgba(124, 196, 255, 0.25), inset 0 0 30px rgba(124, 196, 255, 0.18); }

/* Server rack: enterprise cabinet with a visible side panel, glass door and live drive LEDs */
.rack {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
}
.cab { position: relative; width: 224px; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) - 22deg)); }
.cab-front {
  position: relative; display: grid; gap: 2px; padding: 8px 9px 10px;
  background: linear-gradient(180deg, #1c2236, #0b0f1d); border: 2px solid #2b3550; border-radius: 6px;
  box-shadow: 0 0 0 1px #05070e, 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(124, 196, 255, 0.22);
}
.cab-front::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 40%, transparent 70%, rgba(124, 196, 255, 0.08) 100%);
}
.cab-side {
  position: absolute; top: 0; right: 0; width: 80px; height: 100%; transform-origin: right center; transform: rotateY(-90deg);
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(0, 0, 0, 0.35) 9px 11px), linear-gradient(90deg, #0d1222, #1a2034);
  border: 1px solid #2b3550; border-radius: 4px;
}
.cab-top { position: absolute; top: 0; left: 0; width: 100%; height: 80px; transform-origin: center top; transform: rotateX(-90deg); background: linear-gradient(180deg, #232b42, #121726); border: 1px solid #2b3550; }
.cab-head { display: flex; align-items: center; justify-content: space-between; height: 18px; padding: 0 4px 4px; font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.16em; color: #9fb4dd; }
.cab-head i { width: 5px; height: 5px; border-radius: 50%; background: #5ee0a0; box-shadow: 0 0 6px #5ee0a0; animation: blink 1.6s steps(2, jump-none) infinite; }
.u { --uh: 15px; position: relative; height: var(--uh); display: flex; align-items: center; gap: 5px; padding: 0 5px; border-radius: 2px; background: linear-gradient(180deg, #2a3147, #171c2c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6); }
.u-sv { height: calc(var(--uh) * 2 + 2px); }
.u-st { height: calc(var(--uh) * 3 + 4px); }
.u-ups { height: calc(var(--uh) * 2 + 2px); background: linear-gradient(180deg, #20263a, #10141f); }
.u .bays { flex: 1; align-self: stretch; margin: 3px 0; border-radius: 1px;
  background:
    radial-gradient(circle at 50% 82%, #5ee0a0 0 1.2px, transparent 1.8px) 0 0 / 14px 100%,
    repeating-linear-gradient(90deg, #3a4360 0 12px, #0b0e18 12px 14px);
  animation: bays 2.4s steps(3) infinite;
}
.u-st .bays { background:
    radial-gradient(circle at 50% 88%, #7cc4ff 0 1.2px, transparent 1.8px) 0 0 / 14px 50%,
    repeating-linear-gradient(180deg, transparent 0 calc(50% - 1px), #0b0e18 calc(50% - 1px) 50%),
    repeating-linear-gradient(90deg, #3a4360 0 12px, #0b0e18 12px 14px);
  animation-duration: 1.7s;
}
.u-sv:nth-child(5) .bays { animation-delay: 0.4s; } .u-sv:nth-child(6) .bays { animation-delay: 0.9s; animation-duration: 3.1s; }
.u-sv:nth-child(9) .bays { animation-delay: 1.3s; } .u-sv:nth-child(10) .bays { animation-delay: 0.2s; animation-duration: 1.9s; }
.u .pwr { width: 6px; height: 6px; border-radius: 50%; background: #7cc4ff; box-shadow: 0 0 6px #7cc4ff, 0 0 2px #fff inset; }
.u-sw .ports { flex: 1; height: 6px; background: repeating-linear-gradient(90deg, #05070d 0 5px, #3a4360 5px 7px); border-radius: 1px; }
.u-sw .leds { width: 34px; height: 3px; background: repeating-linear-gradient(90deg, #f2b13c 0 3px, transparent 3px 5px); filter: drop-shadow(0 0 2px #f2b13c); animation: blink 0.7s steps(2, jump-none) infinite; }
.u-sw:nth-child(3) .leds { animation-duration: 1.1s; background: repeating-linear-gradient(90deg, #5ee0a0 0 3px, transparent 3px 5px); filter: drop-shadow(0 0 2px #5ee0a0); }
.u-pp { background: repeating-linear-gradient(90deg, #1a1f2f 0 8px, #0e1220 8px 10px); }
.u-ups .lcd { font-family: var(--f-mono); font-size: 7px; color: #5ee0a0; background: #061a12; padding: 2px 4px; border-radius: 2px; text-shadow: 0 0 4px #5ee0a0; margin-right: auto; }
@keyframes bays { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.25; } }

@media (max-width: 760px) {
  .chooser { flex-direction: column; }
  .choice { padding-block: 3.8rem 1.6rem; grid-template-rows: auto auto; align-content: center; gap: 0.6rem; }
  .choice-it { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.4rem); }
  .choice-fmcg { flex-grow: 1.15; padding-top: calc(env(safe-area-inset-top, 0px) + 6rem); padding-bottom: 1rem; align-content: end; gap: 0.4rem; }
  .chooser-brand { padding: 0.5rem 0.9rem 0.5rem 0.7rem; gap: 0.6rem; top: calc(env(safe-area-inset-top, 0px) + 0.7rem); }
  .chooser-brand img { width: 44px; height: 44px; padding: 4px; border-radius: 11px; }
  .chooser-name { font-size: 1.35rem; }
  .chooser-line { font-size: 0.6rem; }
  .ph-stage { width: 460px; max-width: none; height: 390px; transform: scale(0.38); margin: -106px -142px -128px; }
  .choice-fmcg .choice-sub, .choice-it .choice-sub { display: none; }
  .tag-from { display: none; }
  .choice-dist { display: flex; align-items: baseline; gap: 0.5rem; }
  .choice-dist span { font-size: 0.5rem; letter-spacing: 0.16em; }
  .choice-dist span::before, .choice-dist span::after { display: none; }
  .choice-dist strong { font-size: 1rem; letter-spacing: 0.16em; }
  .choice-eyebrow { display: none; }
  .choice-fmcg .choice-tag { margin-bottom: 0.4rem; }
  .choice-fmcg { grid-template-rows: auto auto auto; }
  .tag-main { font-size: 1.15rem; text-shadow: -4px 0 0 rgba(var(--trail), 0.55), -8px 0 0 rgba(var(--trail), 0.3), -12px 0 0 rgba(var(--trail), 0.14); }
  .tag-from { font-size: 0.6rem; letter-spacing: 0.32em; }
  .choice .choice-tag { margin-bottom: 0.4rem; }
  .choice-title { font-size: 2rem; }
  .choice-logo { margin-top: 0.5rem; }
  .choice-logo img { height: 34px; }
  .choice-plate { height: 34px; font-size: 0.8rem; }
  .choice-sub { font-size: 0.92rem; }
  .choice-go { margin-top: 0.2rem; padding: 0.5rem 1.2rem; font-size: 0.95rem; }
  .choice-eyebrow { font-size: 0.66rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .choice-sub { display: none; }
}

/* Power Horse feature in the FMCG section */
.ph-feature {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius); color: #ffffff;
  background: radial-gradient(80% 120% at 85% 50%, #3a3d44 0%, #15161a 60%, #050506 100%);
}
.ph-feature-copy { display: grid; gap: 0.9rem; justify-items: start; min-width: 0; }
.ph-feature h3 { color: #ffffff; font-size: var(--step-3); font-stretch: 115%; font-weight: 800; }
.ph-feature p { color: rgba(255, 255, 255, 0.78); max-width: 34em; }
.ph-feature .eyebrow { color: #ff6b70; margin: 0; }
.ph-feature .btn { background: #d8262f; border-color: #d8262f; color: #ffffff; }
.ph-feature .ph { color: #ffffff; background: rgba(216, 38, 47, 0.3); }
.ph-feature-art { display: grid; place-items: center; }
.ph-feature-art img { width: min(100%, 260px); height: auto; border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }
.ph-logo { display: inline-block; background: #ffffff; border-radius: 6px; padding: 0.35rem 0.6rem; }
.ph-logo img { display: block; height: 40px; width: auto; }
@media (max-width: 700px) { .ph-feature { grid-template-columns: minmax(0, 1fr); } .ph-feature-art img { width: min(100%, 220px); } }

@media (prefers-reduced-motion: reduce) {
  .chooser *, .chooser { animation: none !important; transition: none !important; }
}

/* Premium FMCG: one fixed dark, champagne-accented look in both themes */
.lux {
  --lux-bg: #0b0c0e; --lux-panel: #131518; --lux-text: #ece7dc; --lux-muted: #a7a194; --lux-gold: #c9a86a; --lux-line: rgba(201, 168, 106, 0.28);
  --f-lux: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  background: radial-gradient(120% 60% at 50% 0%, #1a1c20 0%, var(--lux-bg) 60%);
  color: var(--lux-text); padding-block: clamp(4rem, 9vw, 7.5rem);
}
.lux h2, .lux h3 { color: var(--lux-text); font-family: var(--f-lux); font-stretch: 100%; font-weight: 600; letter-spacing: 0; }
.lux-head { max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.lux-eyebrow, .lux-tag { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lux-gold); }
.lux-head h2 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.02; }
.lux-head p { color: var(--lux-muted); font-size: var(--step-1); line-height: 1.6; max-width: 38em; }
.lux-head::after { content: ""; width: 64px; height: 1px; background: var(--lux-gold); margin-top: 0.6rem; }

.lux-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--lux-line); }
.lux-gas .lux-media { order: 2; }
.lux-copy { display: grid; gap: 1rem; justify-items: start; min-width: 0; }
.lux-copy h3 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.05; }
.lux-copy > p { color: var(--lux-muted); max-width: 34em; }
.lux-logo img { display: block; height: 54px; width: auto; }
.lux-logo-ph { background: #ffffff; border-radius: 4px; padding: 6px 10px; }
.lux-logo-ph img { height: 44px; }
.lux-facts { margin: 0.4rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-block: 1px solid var(--lux-line); }
.lux-facts div { padding: 1rem 0.8rem 1rem 0; display: grid; gap: 0.2rem; align-content: start; }
.lux-facts div + div { padding-left: 0.9rem; border-left: 1px solid var(--lux-line); }
.lux-facts dt { font-family: var(--f-lux); font-weight: 600; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); color: var(--lux-gold); line-height: 1.05; }
.lux-facts dd { margin: 0; color: var(--lux-muted); font-size: 0.88rem; line-height: 1.35; }
.lux-source { font-size: 0.75rem; color: var(--lux-muted); opacity: 0.75; }
.lux-range { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; color: var(--lux-muted); font-size: 0.95rem; }
.lux-range strong { color: var(--lux-text); font-weight: 600; margin-right: 0.4rem; }
.lux-btn {
  margin-top: 0.6rem; display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: #15120b; background: var(--lux-gold); border: 1px solid var(--lux-gold); padding: 0.95rem 1.5rem; border-radius: 2px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.lux-btn:hover { background: transparent; color: var(--lux-gold); }
.lux .ph { color: var(--lux-text); background: rgba(201, 168, 106, 0.22); }

.lux-media { position: relative; min-width: 0; display: grid; place-items: center; }
.lux-ph-stage { position: relative; display: grid; place-items: center; padding-block: 1rem; }
.lux-ph-stage::before { content: ""; position: absolute; width: 360px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(216, 38, 47, 0.35), transparent); }
.lux-ph-stage .can-photo { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7)); }
@media (max-width: 520px) { .lux-ph-stage .can-photo { --h: 340px !important; } }
.lux-gas-media { aspect-ratio: 4 / 5; max-height: 560px; width: 100%; overflow: hidden; border-radius: 4px; isolation: isolate; }
.lux-gas-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(0.85); z-index: -2; transform: scale(1.08); animation: lux-drift 18s ease-in-out infinite alternate; }
.lux-gas-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 12, 14, 0) 30%, rgba(11, 12, 14, 0.85) 100%); }
.lux-gas-splash { position: absolute; left: -10%; right: -10%; width: 120%; max-width: none; top: 30%; opacity: 0.85; z-index: 0; pointer-events: none; }
.lux-cans { position: absolute; z-index: 1; left: 5%; right: 5%; bottom: 7%; }
.lux-cans img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)); animation: lux-float 6s ease-in-out infinite; }
@keyframes lux-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lux-drift { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.08) translateX(2%); } }

.lux-cta { margin-top: clamp(1rem, 3vw, 2rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--lux-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.lux-cta p { color: var(--lux-muted); max-width: 40em; }
.lux-cta strong { color: var(--lux-text); font-family: var(--f-lux); font-size: 1.4rem; font-weight: 600; margin-right: 0.4rem; }
.lux-link { color: var(--lux-gold); font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--lux-line); padding-bottom: 0.3rem; }
.lux-link:hover { border-color: var(--lux-gold); }
.lux :focus-visible { outline-color: var(--lux-gold); }

@media (max-width: 880px) {
  .lux-brand { grid-template-columns: minmax(0, 1fr); }
  .lux-gas .lux-media { order: 0; }
  .lux-gas-media { max-height: 460px; }
}
@media (max-width: 520px) {
  .lux-facts { grid-template-columns: minmax(0, 1fr); }
  .lux-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--lux-line); }
}
@media (prefers-reduced-motion: reduce) { .lux-cans img, .lux-gas-bg, .can-photo { animation: none; } }

/* Power Horse can: cut out from a photo of the real can */
.can-photo { --h: 400px; display: block; height: var(--h); width: auto; max-width: none; }
.lux-ph-stage .can-photo { position: relative; animation: can-float 6s ease-in-out infinite; }

/* Short desktop screens: shrink the choice stages so both buttons stay on screen */
.choice .ph-stage { --s: calc(var(--sh, 1) * var(--sw, 1)); transform: scale(var(--s)); margin-block: calc(195px * (var(--s) - 1)); }
@media (min-width: 761px) and (max-height: 860px) { .chooser { --sh: 0.86; } }
@media (min-width: 761px) and (max-width: 1500px) { .chooser { --sw: 0.84; } }
@media (min-width: 761px) and (min-height: 980px) { .chooser { --sh: 1.18; } }

/* Commodities: graphite and brushed-steel variant of the luxury section */
.lux-steel {
  --lux-gold: #c8b48a; --lux-line: rgba(200, 180, 138, 0.26);
  background: radial-gradient(120% 70% at 50% 0%, #22252b 0%, #101114 62%), #101114;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.steel-facts { margin: 0 0 clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--lux-line); }
.steel-facts div { padding: 1.4rem 1.2rem; display: grid; gap: 0.35rem; text-align: center; justify-items: center; }
.steel-facts div + div { border-left: 1px solid var(--lux-line); }
.steel-facts dt { font-family: var(--f-lux); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1; color: var(--lux-gold); }
.steel-facts dt span { font-size: 0.42em; margin-left: 0.3em; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--f-mono); }
.steel-facts dd { margin: 0; color: var(--lux-muted); font-size: 0.92rem; max-width: 18em; }
.steel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.steel-card {
  position: relative; overflow: hidden; isolation: isolate; min-height: 300px;
  display: grid; align-content: end; gap: 0.6rem; padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--lux-line); border-radius: 4px;
}
.steel-card::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.steel-al::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), linear-gradient(135deg, #8f959d 0%, #d9dde2 22%, #6e747c 45%, #c3c8ce 68%, #5c6269 100%); }
.steel-al::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 13, 16, 0.15) 0%, rgba(12, 13, 16, 0.88) 70%); }
.steel-c::before { background: conic-gradient(from 210deg at 70% 30%, #26282c, #0d0e10 18%, #33363b 32%, #111215 50%, #2a2c31 66%, #08090a 82%, #26282c); }
.steel-c::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.85) 75%); }
.steel-sym { position: absolute; top: 1.2rem; right: 1.4rem; font-family: var(--f-lux); font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: 1; color: rgba(255, 255, 255, 0.16); font-weight: 600; }
.steel-card h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.05; }
.steel-card > p:last-child { color: #c9c4b8; max-width: 32em; }
.steel-strengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.steel-strengths h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); margin-bottom: 0.5rem; }
.steel-strengths h3::before { content: ""; display: block; width: 40px; height: 1px; background: var(--lux-gold); margin-bottom: 1rem; }
.steel-strengths p { color: var(--lux-muted); max-width: 34em; }
@media (max-width: 760px) {
  .steel-facts, .steel-grid, .steel-strengths { grid-template-columns: 1fr; }
  .steel-facts div + div { border-left: 0; border-top: 1px solid var(--lux-line); }
  .steel-card { min-height: 240px; }
}

/* Dealership and partnership */
.partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.partner-card { background: var(--surface); padding: clamp(1.4rem, 2.5vw, 2rem); display: grid; gap: 0.7rem; align-content: start; grid-template-rows: auto auto 1fr auto; min-width: 0; transition: background-color 0.2s ease; }
.partner-card:hover { background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.partner-num { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--amber); }
.partner-card h3 { font-size: var(--step-1); }
.partner-card p { color: var(--muted); font-size: 0.98rem; }
.partner-link { font-weight: 650; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: 0.4rem; }
.partner-link:hover { color: var(--amber); }
.partner-steps { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; counter-reset: pstep; }
.partner-steps li { counter-increment: pstep; display: grid; gap: 0.3rem; padding-top: 1rem; border-top: 2px solid var(--amber); }
.partner-steps li::before { content: "0" counter(pstep); font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); }
.partner-steps strong { font-family: var(--f-display); font-stretch: 112%; font-size: 1.1rem; }
.partner-steps span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 960px) { .partner-grid, .partner-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partner-grid, .partner-steps { grid-template-columns: 1fr; } }

/* Division views */
body[data-view="fmcg"] .v-it, body[data-view="fmcg"] .v-trade,
body[data-view="it"] .v-fmcg, body[data-view="it"] .v-trade { display: none !important; }
.view-bar { background: #0b0c0e; color: #ece7dc; border-bottom: 1px solid rgba(201, 168, 106, 0.28); font-size: 0.85rem; }
.view-bar[hidden] { display: none; }
.view-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.55rem; }
.view-now { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #a7a194; }
.view-now strong { color: #c9a86a; font-weight: 500; }
.view-switch { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.view-switch button { font: 600 0.8rem var(--f-body); color: #ece7dc; background: transparent; border: 1px solid rgba(201, 168, 106, 0.35); border-radius: 99px; padding: 0.3rem 0.85rem; cursor: pointer; }
.view-switch button:hover, .view-switch button[aria-pressed="true"] { background: #c9a86a; border-color: #c9a86a; color: #15120b; }
body[data-view="it"] .view-bar { background: #07194c; border-bottom-color: rgba(124, 196, 255, 0.3); }
body[data-view="it"] .view-now strong { color: #7cc4ff; }
body[data-view="it"] .view-switch button { border-color: rgba(124, 196, 255, 0.4); }
body[data-view="it"] .view-switch button:hover, body[data-view="it"] .view-switch button[aria-pressed="true"] { background: #7cc4ff; border-color: #7cc4ff; color: #07194c; }

/* Commodities choice: bulk carrier loaded with aluminium and coal */
.choice-commod { background: radial-gradient(90% 70% at 50% 40%, #2c2f35 0%, #121316 55%, #060607 100%); border-left: 1px solid rgba(255, 255, 255, 0.12); }
.choice-commod .tag-main { --trail: 200, 180, 138; }
.choice-commod .tag-from { color: #c8b48a; }
.choice-commod .choice-plate { border-color: rgba(200, 180, 138, 0.7); }
.ship-scene { -webkit-mask-image: radial-gradient(62% 58% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(62% 58% at 50% 50%, #000 62%, transparent 100%); position: absolute; left: 50%; top: 50%; width: 580px; height: 396px; margin: -185px 0 0 -290px; overflow: visible; }
.ship-stage::before { content: ""; position: absolute; left: 50%; top: 40%; width: 380px; height: 220px; margin: -110px 0 0 -190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 180, 138, 0.22), transparent); }
.ship { animation: ship-bob 5s ease-in-out infinite; transform-origin: 220px 210px; }
.ship-far { animation: ship-far 40s linear infinite; }
.wave { animation: wave-roll 6s linear infinite; }
.wave-front { animation-duration: 4.5s; animation-direction: reverse; }
.wave-front2 { animation-duration: 8s; }
.al-sheen { animation: al-sheen 3.6s ease-in-out infinite; }
.smoke circle { fill: rgba(200, 205, 214, 0.25); animation: smoke 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke circle:nth-child(2) { animation-delay: 1s; } .smoke circle:nth-child(3) { animation-delay: 2s; }
.mast-light { animation: blink 1.2s steps(2, jump-none) infinite; }
.tag-chip { animation: chip-float 4s ease-in-out infinite; }
.chip-2 { animation-delay: 1.3s; }
@keyframes ship-bob { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-3px) rotate(0.6deg); } }
@keyframes ship-far { from { transform: translateX(460px); } to { transform: translateX(-120px); } }
@keyframes wave-roll { from { transform: translateX(0); } to { transform: translateX(-440px); } }
@keyframes al-sheen { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(140px); } }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 6px) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px) scale(1.4); } }
@keyframes chip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
body[data-view="fmcg"] .v-commod, body[data-view="it"] .v-commod,
body[data-view="commod"] .v-fmcg, body[data-view="commod"] .v-it, body[data-view="commod"] .v-trade { display: none !important; }

/* Phones: three stacked divisions, each with the animation beside its text */
@media (max-width: 760px) {
  .chooser { padding-top: calc(env(safe-area-inset-top, 0px) + 4.6rem); background: #050b1f; }
  .chooser .choice, .chooser .choice-fmcg, .chooser .choice-it, .chooser .choice-commod {
    flex: 1 1 0; padding: 0.6rem 1rem; gap: 0.2rem 0.6rem;
    grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "art tag" "art copy"; align-content: center; align-items: center; text-align: center;
  }
  .chooser .choice-commod { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 3.6rem); border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .chooser .choice-it { padding-bottom: 0.6rem; }
  .choice .choice-tag { grid-area: tag; height: auto; margin: 0; align-self: end; }
  .choice .ph-stage { grid-area: art; --s: 0.29; margin: -138px -164px; justify-self: center; }
  .choice-copy { grid-area: copy; gap: 0.35rem; align-self: start; }
  .choice .tag-main { font-size: clamp(0.8rem, 4.2vw, 1rem); white-space: normal; }
  .choice-logo { margin-top: 0.2rem; }
  .choice-logo img, .choice-plate { height: 30px; }
  .choice-plate { font-size: 0.66rem; letter-spacing: 0.18em; }
  .choice-dist { flex-wrap: wrap; justify-content: center; gap: 0 0.4rem; margin-top: 0.1rem; }
  .choice-dist strong { font-size: 0.85rem; }
  .choice-go { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
  .chooser-brand { top: calc(env(safe-area-inset-top, 0px) + 0.6rem); }
  .chooser-skip { bottom: calc(env(safe-area-inset-bottom, 0px) + 0.8rem); font-size: 0.8rem; }
}

.choice-go, .choice-dist span { white-space: nowrap; }
@media (min-width: 761px) {
  .chooser-skip { left: auto; right: 1.5rem; top: calc(env(safe-area-inset-top, 0px) + 1.6rem); bottom: auto; transform: none; }
}

/* Language switch (EN / TR / RU) */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; flex: none; }
.lang-switch button {
  font: 600 0.72rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--muted);
  background: transparent; border: 0; border-radius: 999px; padding: 0.42rem 0.55rem; cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-switch button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
@media (max-width: 1120px) {
  .header-inner { justify-content: flex-end; }
  .header-inner .brand { margin-right: auto; }
  .lang-header { order: 2; }
  .nav-toggle { order: 3; }
}
.lang-float {
  display: none; position: fixed; z-index: 101;
  top: calc(env(safe-area-inset-top, 0px) + 1.1rem); left: calc(env(safe-area-inset-left, 0px) + 1.1rem);
  background: rgba(7, 25, 76, 0.55); border-color: rgba(214, 178, 110, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body:has(#intro:not([hidden])) .lang-float,
body:has(#chooser:not([hidden])) .lang-float { display: inline-flex; }
.lang-float button { color: rgba(240, 222, 186, 0.75); }
.lang-float button:hover { color: #f3e3bf; }
.lang-float button[aria-pressed="true"] { background: linear-gradient(135deg, #e9cf98, #b8894a); color: #07194c; }

/* Long Turkish and Russian labels on the choice screen may wrap */
html[data-lang="tr"] .choice .tag-main, html[data-lang="ru"] .choice .tag-main { font-size: clamp(0.9rem, 4.3cqi, 2.1rem); }
@media (max-width: 700px) {
  .lang-float { top: auto; left: auto; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem); }
}
/* Turkish and Russian menu labels are longer: tighten, then collapse to the menu button earlier */
@media (min-width: 1121px) and (max-width: 1500px) {
  .site-nav { gap: 1.05rem; }
  .site-nav a:not(.btn) { font-size: 0.92rem; }
  .header-inner { gap: 0.8rem; }
}
@media (min-width: 1121px) and (max-width: 1200px) { .site-nav { gap: 0.8rem; } }

/* Commodity sea-route map */
.route-figure { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.route-frame { position: relative; border: 1px solid var(--lux-line, rgba(214,178,110,.25)); border-radius: 4px; overflow: hidden; background: #07090d; box-shadow: 0 30px 80px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02); }
.route-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 30px rgba(4,5,8,.85); }
.route-map { display: block; width: 100%; height: auto; }
.rm-land { fill: #171b22; stroke: rgba(214, 178, 110, 0.18); stroke-width: 0.8; stroke-linejoin: round; }
.rm-ru { fill: #1c2029; }
.rm-tr { fill: #232016; stroke: rgba(232, 199, 127, 0.45); stroke-width: 1; }
.rm-route-glow { fill: none; stroke: #d4a85a; stroke-width: 6; opacity: 0; filter: url(#rm-blur); transition: opacity 2s ease 2s; }
.route-figure.is-in .rm-route-glow { opacity: 0.14; }
.rm-route { fill: none; stroke: url(#rm-gold); stroke-width: 1.6; stroke-linecap: round; opacity: 0.9;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.rm-flow { fill: none; stroke: #fff2cc; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.012 0.988; opacity: 0; }
.route-figure.is-in .rm-route { animation: rm-draw 2.6s cubic-bezier(.6,.05,.25,1) var(--d) forwards; }
.route-figure.is-in .rm-flow { animation: rm-flow 6s linear calc(var(--d) + 2.6s) infinite; }
@keyframes rm-draw { to { stroke-dashoffset: 0; } }
@keyframes rm-flow { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: .9; } 85% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.rm-dot { fill: #fff3d1; }
.rm-pulse { fill: none; stroke: #e8c77f; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: rm-pulse 2.8s ease-out infinite; }
.rm-origin .rm-pulse { animation-duration: 2.2s; }
.rm-halo { animation: rm-twinkle 3.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes rm-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes rm-twinkle { from { opacity: .55; transform: scale(.85); } to { opacity: 1; transform: scale(1.1); } }
.rm-port text { font: 600 15px var(--f-mono, monospace); letter-spacing: .12em; text-transform: uppercase; fill: #efe2c2; paint-order: stroke; stroke: rgba(7,9,13,.85); stroke-width: 4px; }
.rm-origin text { font-size: 18px; fill: #f3dfaa; }
.rm-country { font: 600 15px var(--f-mono, monospace); letter-spacing: .5em; fill: rgba(214, 178, 110, 0.32); }
.rm-country-tr { fill: rgba(232, 199, 127, 0.5); font-size: 20px; }
.rm-sea-label { font: italic 500 22px var(--f-lux, serif); letter-spacing: .3em; fill: rgba(200, 210, 230, 0.22); }
.route-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 1rem; color: var(--lux-muted, #a59f90); font-size: .9rem; }
.route-cap strong { font-family: var(--f-lux, serif); font-weight: 600; font-size: 1.35rem; color: var(--lux-gold, #d6b26e); }
.route-key { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-mono, monospace); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.route-key i { width: 26px; height: 1.5px; background: linear-gradient(90deg, #f3dfaa, #b8894a); }
.route-key b { width: 8px; height: 8px; border-radius: 50%; background: #fff3d1; box-shadow: 0 0 10px 3px rgba(232,199,127,.6); margin-left: .8rem; }
@media (max-width: 700px) {
  .rm-port text { font-size: 27px; stroke-width: 6px; } .rm-origin text { font-size: 30px; }
  .rm-country { font-size: 24px; } .rm-country-tr { font-size: 30px; } .rm-sea-label { font-size: 30px; }
  .rm-dot { r: 5px; } .rm-origin .rm-dot { r: 7px; } .rm-route { stroke-width: 2.6; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-route { stroke-dashoffset: 0; marker-end: url(#rm-head); } .route-figure.is-in .rm-route, .rm-flow, .rm-pulse, .rm-halo { animation: none !important; }
}
.route-figure.is-drawn .rm-route { marker-end: url(#rm-head); }

/* Choice screen: commodity route map in place of the ship */
.map-stage::before { content: ""; position: absolute; left: 50%; top: 48%; width: 420px; height: 300px; margin: -150px 0 0 -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 178, 110, 0.16), transparent); }
.chooser-map { position: absolute; left: 50%; top: 50%; width: 530px; height: 492px; margin: -246px 0 0 -265px; overflow: visible;
  -webkit-mask-image: radial-gradient(74% 72% at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(74% 72% at 50% 50%, #000 66%, transparent 100%); }
.chooser-map > rect:first-of-type { fill: transparent; }
.chooser-map .rm-route-glow { filter: url(#cm-blur); }
.chooser.ready .chooser-map .rm-route { animation: rm-draw 2.4s cubic-bezier(.6,.05,.25,1) calc(var(--d) + .6s) forwards; }
.chooser.ready .chooser-map .rm-flow { animation: rm-flow 6s linear calc(var(--d) + 3s) infinite; }
.chooser .chooser-map .rm-route-glow { opacity: 0.16; transition: none; }
.chooser-map.is-drawn .rm-route { marker-end: url(#cm-head); }
.chooser-map .rm-port text { font-size: 16px; }
.chooser-map .rm-origin text { font-size: 18px; }
.chooser-map .rm-country { font-size: 13px; }
.chooser-map .rm-country-tr { font-size: 17px; }
.chooser-map .rm-sea-label { font-size: 17px; }
@media (max-width: 700px) {
  .chooser-map text { display: none; }
  .chooser-map .rm-route { stroke-width: 3; } .chooser-map .rm-dot { r: 6px; } .chooser-map .rm-origin .rm-dot { r: 8px; }
}

/* IT panel: still service cards in a column that light up in turn, rack units mounted from outside */
#it-orbit { inset: auto; left: calc(50% - 178px); top: 50%; transform: translateY(-58%); display: flex; flex-direction: column; gap: 10px; transform-style: flat; }
#it-orbit .orbit-card-it { position: relative; left: auto; top: auto; margin: 0; width: 84px; height: 66px; gap: 0.3rem; opacity: 1; transform: none;
  animation: it-flash 4.8s ease-in-out infinite; }
#it-orbit .orbit-card-it:nth-child(2) { animation-delay: 1.2s; }
#it-orbit .orbit-card-it:nth-child(3) { animation-delay: 2.4s; }
#it-orbit .orbit-card-it:nth-child(4) { animation-delay: 3.6s; }
#it-orbit .orbit-card-it svg { width: 24px; height: 24px; transition: none; }
@keyframes it-flash {
  0%, 30%, 100% { border-color: rgba(124, 196, 255, 0.3); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); filter: brightness(0.72) saturate(0.8); }
  8% { border-color: rgba(190, 228, 255, 1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 26px rgba(124, 196, 255, 0.85), inset 0 0 18px rgba(124, 196, 255, 0.45); filter: brightness(1.35) saturate(1.1); }
  18% { border-color: rgba(124, 196, 255, 0.7); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(124, 196, 255, 0.4); filter: brightness(1.05); }
}
.it-stage .orbit-can { left: calc(50% + 52px); }
.it-stage::before { margin-left: -120px; width: 300px; }
.chooser.ready .cab-front .u { animation: u-mount 0.9s cubic-bezier(.2, .7, .2, 1) both; }
.chooser.ready .cab-front .u:nth-child(2) { animation-delay: 0.45s; }
.chooser.ready .cab-front .u:nth-child(3) { animation-delay: 0.6s; }
.chooser.ready .cab-front .u:nth-child(4) { animation-delay: 0.75s; }
.chooser.ready .cab-front .u:nth-child(5) { animation-delay: 0.9s; }
.chooser.ready .cab-front .u:nth-child(6) { animation-delay: 1.05s; }
.chooser.ready .cab-front .u:nth-child(7) { animation-delay: 1.2s; }
.chooser.ready .cab-front .u:nth-child(8) { animation-delay: 1.35s; }
.chooser.ready .cab-front .u:nth-child(9) { animation-delay: 1.5s; }
.chooser.ready .cab-front .u:nth-child(10) { animation-delay: 1.65s; }
.chooser.ready .cab-front .u:nth-child(11) { animation-delay: 1.8s; }
.chooser.ready .cab-front .u:nth-child(12) { animation-delay: 1.95s; }
@keyframes u-mount {
  0% { transform: translate(-170px, -6px) scale(1.22); opacity: 0; box-shadow: none; }
  18% { opacity: 1; }
  62% { transform: translate(4px, 0) scale(1.03); }
  80% { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(124, 196, 255, 0.9); }
  100% { transform: none; opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .chooser.ready .cab-front .u, #it-orbit .orbit-card-it { animation: none; } }

/* Online order and dealer request */
.order-grid { display: flex; align-items: flex-start; gap: clamp(1rem, 2.5vw, 1.75rem); }
.order-card { flex: 1.35 1 0; min-width: 0; display: grid; gap: 1.1rem; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--amber); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.dealer-card { flex: 1 1 0; }
.order-card-head { display: grid; gap: 0.35rem; }
.order-num { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--amber); }
.order-card-head h3 { font-size: var(--step-2); font-stretch: 112%; }
.order-card-head p { color: var(--muted); font-size: 0.95rem; }
.prod-list { list-style: none; margin: 0; padding: 0; display: grid; border-block: 1px solid var(--line); }
.prod { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.75rem 0; }
.prod + .prod { border-top: 1px solid var(--line); }
.prod-thumb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(160deg, #1b1d22, #0b0c0e); overflow: hidden; }
.prod-thumb img { height: 40px; width: auto; }
.prod-dot { width: 14px; height: 30px; border-radius: 4px; background: linear-gradient(180deg, #f4f4f4 0 22%, var(--c) 22% 100%); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.prod-info { display: grid; gap: 0.15rem; min-width: 0; }
.prod-info strong { font-size: 0.98rem; color: var(--ink); }
.prod-info .mono { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.qty-btn { width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink); font: 600 1.1rem/1 var(--f-body); cursor: pointer; border-radius: 50%; }
.qty-btn:hover { color: var(--amber); }
.qty input { width: 3.2rem; text-align: center; border: 0; background: transparent; font: 600 1rem var(--f-mono); color: var(--ink); -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 2px solid var(--amber); border-radius: 4px; }
.prod.has-qty .qty { border-color: var(--amber); }
.order-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--muted); }
.order-total strong { font-family: var(--f-display); font-stretch: 112%; font-size: var(--step-1); color: var(--ink); }
.order-card .btn { justify-self: start; }
.checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.checks legend { font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.45rem; padding: 0; }
.checks label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; cursor: pointer; }
.checks input { accent-color: var(--amber); width: 16px; height: 16px; }
@media (max-width: 960px) { .order-grid { flex-direction: column; align-items: stretch; } }
@media (max-width: 560px) { .order-card .field-row { grid-template-columns: minmax(0, 1fr); } .prod { grid-template-columns: 40px minmax(0, 1fr); } .prod .qty { grid-column: 2; justify-self: start; } }

/* Coming soon (Gasteiner, until sales start) */
.lux-logo-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.soon-badge { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.68rem/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 0.8rem; border-radius: 999px; color: #e9cf98; border: 1px solid rgba(214, 178, 110, 0.55); background: rgba(214, 178, 110, 0.08); white-space: nowrap; }
.soon-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e9cf98; box-shadow: 0 0 8px #e9cf98; animation: blink 1.8s ease-in-out infinite; }
.prod-soon .soon-badge { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.prod-soon .soon-badge::before { background: var(--amber); box-shadow: none; }
.prod-soon .prod-thumb, .prod-soon .prod-info { opacity: 0.6; }
@media (max-width: 560px) { .prod-soon .soon-badge { grid-column: 2; justify-self: start; } }
/* Dealer request on its own (online order removed) */
.order-grid .dealer-card { flex: 0 1 760px; }

/* Choice screen header: a dark band keeps the panel colours off the WOLFEXIM name; name larger, lower names smaller */
@media (min-width: 761px) {
  .chooser::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 7.6rem); pointer-events: none;
    background: linear-gradient(180deg, #050b1f 0%, #050b1f 62%, rgba(5, 11, 31, 0.85) 80%, rgba(5, 11, 31, 0) 100%); }
  .chooser::after { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6.2rem); width: min(520px, 60vw); height: 1px; transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(214, 178, 110, 0.55), transparent); }
  .chooser-brand { top: calc(env(safe-area-inset-top, 0px) + 1rem); gap: 1.1rem; }
  .chooser-brand img { width: 74px; height: 74px; border-radius: 18px; }
  .chooser-name { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }
  .chooser-line { font-size: 0.78rem; letter-spacing: 0.2em; }
  .choice { padding-top: 10.5rem; }
}
.choice-dist strong { font-size: clamp(1.15rem, 0.85rem + 0.8vw, 1.5rem); }
html[data-lang="ru"] #it-orbit .orbit-word, html[data-lang="tr"] #it-orbit .orbit-word { font-size: 0.5rem; letter-spacing: 0.04em; padding-inline: 2px; }
/* Choice screen logo tile in the intro's bronze-gold */
.chooser-brand img {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 243, 214, 0.35) 45%, transparent 60%) 0 0 / 250% 100% no-repeat,
    radial-gradient(120% 110% at 40% 30%, #f1d9a4 0%, #d4ab69 40%, #b8894a 72%, #8a6230 100%);
  animation: intro-sheen 7s ease-in-out infinite;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 236, 196, 0.45);
}
/* Choice screen name: navy like the intro, with a fine white edge and a soft lift */
.chooser-name {
  color: transparent;
  background: linear-gradient(180deg, #2c4fa8 0%, #16348a 38%, #0b2366 62%, #07194c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0.9px rgba(255, 255, 255, 0.92);
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(90, 130, 230, 0.28));
  letter-spacing: 0.08em;
}
/* Choice screen logo: no gold tile, larger, navy with a fine white contour like the WOLFEXIM name */
.chooser-brand img {
  width: 92px; height: 92px; padding: 0; border-radius: 0; background: none; animation: none; box-shadow: none;
  filter: drop-shadow(0.8px 0 0 #fff) drop-shadow(-0.8px 0 0 #fff) drop-shadow(0 0.8px 0 #fff) drop-shadow(0 -0.8px 0 #fff)
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 20px rgba(90, 130, 230, 0.3));
}
@media (max-width: 760px) { .chooser-brand img { width: 52px; height: 52px; padding: 0; } }
@media (min-width: 761px) {
  .chooser::before { height: calc(env(safe-area-inset-top, 0px) + 8.4rem); }
  .chooser::after { top: calc(env(safe-area-inset-top, 0px) + 7.25rem); }
  .chooser-brand { top: calc(env(safe-area-inset-top, 0px) + 0.85rem); }
  .choice { padding-top: 11rem; }
}

/* Commodities: Russia office, two-way supply and logistics partnership */
.corridor { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--lux-line); display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.corridor-head { max-width: 44rem; display: grid; gap: 0.7rem; }
.corridor-head .lux-eyebrow { margin: 0; }
.corridor-head h3 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.05; }
.corridor-head p:last-child { color: var(--lux-muted); }
.corridor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.corridor-card { position: relative; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--lux-line); border-radius: 4px; display: grid; gap: 0.7rem; align-content: start;
  background: linear-gradient(160deg, rgba(214, 178, 110, 0.07), rgba(255, 255, 255, 0.015) 55%, transparent); }
.corridor-route { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.8rem; font: 600 0.72rem/1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--lux-gold); }
.corridor-route i { position: relative; flex: 0 1 90px; height: 1px; background: linear-gradient(90deg, rgba(214, 178, 110, 0.2), var(--lux-gold)); overflow: visible; }
.corridor-route i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--lux-gold); border-right: 1px solid var(--lux-gold); transform: rotate(45deg); }
.corridor-route i::before { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff3d1; box-shadow: 0 0 8px #e8c77f; animation: corridor-run 3.2s ease-in-out infinite; }
@keyframes corridor-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
.corridor-card h4 { font-family: var(--f-lux); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem); line-height: 1.1; }
.corridor-card p:last-child { color: #c9c4b8; }
.corridor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.corridor-list li { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 0.74rem/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lux-muted); }
.corridor-list li::before { content: ""; width: 14px; height: 1px; background: var(--lux-gold); }
@media (max-width: 760px) { .corridor-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .corridor-route i::before { animation: none; } }
.corridor-card h4 { color: var(--lux-text); margin: 0; }

/* Power Horse range tiles */
.ph-range { margin: 2.5rem 0 4.5rem; }
.ph-range-head { text-align: center; margin-bottom: 2rem; }
.ph-range-head h3 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--lux-text); margin: .4rem 0 0; }
.ph-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ph-tile { margin: 0; border: 1px solid var(--lux-line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease; }
.ph-tile:hover { transform: translateY(-6px); border-color: rgba(201, 168, 106, .55); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ph-tile-art { position: relative; height: 420px; display: grid; place-items: center; overflow: hidden; }
.ph-tile-art img { height: 388px; width: auto; max-width: none; transition: transform .7s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.ph-tile:hover .ph-tile-art img { transform: scale(1.04); }
.ph-t-orig .ph-tile-art { background: radial-gradient(closest-side at 50% 50%, rgba(216, 38, 47, .28), transparent 80%), linear-gradient(180deg, #1b1d22, #0c0d10); }
.ph-t-orig .ph-tile-art img { height: 360px; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)); }
.ph-t-zero .ph-tile-art { background: radial-gradient(ellipse 70% 60% at 50% 45%, #050505, #000 70%), #000; }
.ph-t-red .ph-tile-art { background: linear-gradient(180deg, #600108 0%, #4a020a 55%, #33040a 100%); }
.ph-tile figcaption { padding: 1.3rem 1.4rem 1.5rem; border-top: 1px solid var(--lux-line); background: rgba(255, 255, 255, .02); display: grid; gap: .35rem; flex: 1; }
.ph-tile figcaption strong { font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 1rem; color: var(--lux-text); }
.ph-tile figcaption span { color: var(--lux-muted); font-size: .95rem; line-height: 1.5; }
.ph-tile figcaption .ph-tile-fmt { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lux-gold); }
@media (max-width: 860px) { .ph-tiles { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .ph-tile-art { height: 380px; } .ph-tile-art img { height: 350px; } .ph-t-orig .ph-tile-art img { height: 326px; } }
.ph-range-ing { margin: .7rem 0 0; font-family: "JetBrains Mono", monospace; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lux-muted); }
.ph-tile figcaption .ph-tile-badges { margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--lux-line); font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lux-gold); }
.ph-tile figcaption { display: flex; flex-direction: column; }
.ph-tile figcaption .ph-tile-badges { margin-top: auto; }
.ph-tile figcaption > span[data-i18n^="k30"]:not(.ph-tile-badges):not(.ph-tile-fmt) { margin-bottom: .9rem; }

/* Privacy notice dialog, cookie bar, form note */
.form-legal { margin: .9rem 0 0; font-size: .85rem; color: var(--muted, #6b7280); }
.form-legal .link-btn, .cookie-bar .link-btn { text-decoration: underline; text-underline-offset: 3px; }
.legal-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 1px solid rgba(201, 168, 106, .35); border-radius: 4px; background: #0e0f12; color: #ece7dc; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.legal-dialog::backdrop { background: rgba(4, 8, 20, .72); backdrop-filter: blur(4px); }
.legal-inner { position: relative; max-height: min(86vh, 900px); overflow-y: auto; padding: 2.6rem clamp(1.25rem, 4vw, 3rem) 2.4rem; }
.legal-close { position: sticky; top: 0; float: right; margin: -1.4rem -1rem 0 0; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(201, 168, 106, .4); border-radius: 50%; background: #0e0f12; color: #c9a86a; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.legal-close:hover { background: #c9a86a; color: #0e0f12; }
.lb { display: none; }
html:not([data-lang="tr"]):not([data-lang="ru"]) .lb-en, html[data-lang="tr"] .lb-tr, html[data-lang="ru"] .lb-ru { display: block; }
.lb .legal-eyebrow { font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #c9a86a; margin: 0 0 .6rem; }
.lb h2 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.15; margin: 0 0 .5rem; color: #ece7dc; }
.lb .legal-meta { font-size: .82rem; color: #9a958b; margin: 0 0 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(201, 168, 106, .2); }
.lb h3 { font-family: "Archivo", sans-serif; font-stretch: 112%; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #c9a86a; margin: 1.6rem 0 .5rem; scroll-margin-top: 1rem; }
.lb p, .lb li { font-size: .95rem; line-height: 1.65; color: #cfc9bd; }
.lb ul { padding-left: 1.1rem; margin: .4rem 0; }
.lb a { color: #e4c88f; }
.lb strong { color: #ece7dc; }
.cookie-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; width: min(760px, calc(100vw - 32px)); display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.2rem 1rem 1.4rem; background: rgba(14, 15, 18, .96); border: 1px solid rgba(201, 168, 106, .35); border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); color: #cfc9bd; backdrop-filter: blur(8px); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: .86rem; line-height: 1.5; flex: 1; }
.cookie-bar .link-btn { color: #e4c88f; }
.cookie-ok { flex: none; padding: .65rem 1.2rem; border: 1px solid #c9a86a; background: transparent; color: #e4c88f; font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
.cookie-ok:hover { background: #c9a86a; color: #0e0f12; }
@media (max-width: 600px) { .cookie-bar { flex-direction: column; align-items: stretch; gap: .8rem; bottom: 12px; } }
.site-footer .reg { display: block; margin-top: .25rem; font-size: .8rem; opacity: .8; }

/* Russia gateway block */
.gateway { border-top: 1px solid var(--lux-line); margin-top: clamp(2rem, 4vw, 3rem); }
.gateway .corridor-head p strong { color: var(--lux-gold); font-weight: 600; }
.gw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gw-num { font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .2em; color: var(--lux-gold); }
@media (max-width: 900px) { .gw-grid { grid-template-columns: minmax(0, 1fr); } }
#commodities .steel-grid { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Commodities track record */
.track-record { margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); max-width: 860px; padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1rem, 4vw, 3rem); text-align: center; position: relative; }
.track-record::before, .track-record::after { content: ""; position: absolute; left: 50%; width: 120px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--lux-gold), transparent); }
.track-record::before { top: 0; } .track-record::after { bottom: 0; }
.track-record .lux-eyebrow { margin: 0 0 .9rem; }
.tr-quote { margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem); line-height: 1.35; color: var(--lux-text); }

/* ===== Luxury theme for the whole site (user, 2026-10-11): navy-black, ivory, champagne gold ===== */
html:root:not(#wx-none) {
  --paper: #0a0f1e;
  --surface: #10172b;
  --ink: #f1ece1;
  --text: #d3d6df;
  --muted: #959cb0;
  --line: #242b40;
  --amber: #c9a86a;
  --amber-soft: #2a2417;
  --band: #081233;
  --band-text: #ece7dc;
  --band-muted: #a0a8c0;
  --ph-bg: #3d3110;
  --ph-line: #c9a86a;
  --ok: #6fc59b;
  --mark-filter: drop-shadow(0.6px 0 0 #fff) drop-shadow(-0.6px 0 0 #fff) drop-shadow(0 0.6px 0 #fff) drop-shadow(0 -0.6px 0 #fff);
  color-scheme: dark;
}
body { background: var(--paper); color: var(--text); }
.section-alt { background: #0d1325; }
.section, .hero { position: relative; }
.section-alt, .section + .section { border-top: 1px solid var(--line); }

/* Typography: same serif voice as the brand divisions */
.hero h1, .section h2:not(.it-head h2) {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-stretch: normal; letter-spacing: -0.005em; color: var(--ink);
}
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.6rem); line-height: 1.04; }
.section h2:not(.it-head h2) { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.1; }
.eyebrow { color: var(--amber); letter-spacing: 0.2em; }
.lede { color: var(--muted); }

/* Header: dark glass */
.site-header { background: rgba(8, 12, 24, 0.78); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(201, 168, 106, 0.14); }
.site-header.scrolled { border-bottom-color: rgba(201, 168, 106, 0.22); }
.brand-name { color: var(--ink); letter-spacing: 0.08em; font-stretch: 125%; }
.site-nav a:not(.btn) { color: #c9ccd6; font-weight: 500; letter-spacing: 0.01em; }
.site-nav a:not(.btn):hover { color: var(--amber); }
.draft-bar { background: #070b16; color: #8a91a6; border-bottom-color: var(--line); }

/* Buttons: champagne gold, sharp corners */
.btn {
  background: linear-gradient(135deg, #ecd39d 0%, #c9a86a 48%, #a67f3f 100%); color: #0b0f1a;
  border: 1px solid #c9a86a; border-radius: 2px;
  font-family: var(--f-mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 1.5rem; box-shadow: 0 10px 30px -14px rgba(201, 168, 106, 0.6);
}
.btn:hover { filter: brightness(1.06); }
.btn-small { padding: 0.65rem 1rem; font-size: 0.72rem; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(201, 168, 106, 0.45); box-shadow: none; }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

/* Cards and panels */
.manifest, .order-card, .quote-form, .partner-card, .contact-card { background: linear-gradient(180deg, #121a30, #0e1528); border-color: var(--line); }
.manifest { border: 1px solid rgba(201, 168, 106, 0.22); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.field input, .field select, .field textarea { background: #0b1122; color: var(--text); border-color: #2a3248; }
.field input::placeholder, .field textarea::placeholder { color: #6b7288; }
.lang-switch { border-color: rgba(201, 168, 106, 0.3); }
.section h3, .order-card h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-stretch: normal; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.15; color: var(--ink); letter-spacing: 0; }
.section-ink h3, .it-card h3 { font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: var(--step-1); }
.figures { border-top: 1px solid var(--amber); }
.figures dd { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-stretch: normal; font-size: 3rem; color: #e4c88f; }
.steps li::before { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.15rem; color: var(--amber); border: 1px solid rgba(201, 168, 106, 0.6); }
.steps li::after { border-top: 1px solid rgba(201, 168, 106, 0.25); }
.services article, .partner-steps li { border-top: 1px solid var(--amber); }
@media (min-width: 961px) {
  .order-sec .wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .order-sec .section-head { margin-bottom: 0; position: sticky; top: 110px; }
  .order-grid .dealer-card { flex: 1 1 auto; }
}
.partner-steps strong { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-stretch: normal; font-size: 1.3rem; color: var(--ink); }
@media (max-width: 480px) { .header-inner { gap: 0.5rem; } .brand { gap: 0.45rem; min-width: 0; } .brand-name { font-size: 1.02rem; letter-spacing: 0.05em; font-stretch: 112%; } .brand-mark { width: 34px; height: 34px; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }