/* AddiNova — site styles
   Palette from the catalogue: navy #14287A, royal #1A47D4, azure #0B8CF5, sky #D1E8FF */

@property --fil   { syntax: '<color>'; inherits: true; initial-value: #1f4fd1; }
@property --fil-l { syntax: '<color>'; inherits: true; initial-value: #5f8cff; }
@property --fil-d { syntax: '<color>'; inherits: true; initial-value: #0f2c85; }

:root {
  --ink: #0a1030;
  --ink-2: #434d70;
  --ink-3: #6f7896;
  --bg: #ffffff;
  --bg-2: #f3f6fb;
  --bg-3: #e6effa;
  --navy: #14287a;
  --night: #050b24;
  --night-2: #0a1438;
  --royal: #1a47d4;
  --azure: #0b8cf5;
  --sky: #d1e8ff;
  --blue: #0a66d6;
  --blue-h: #0853b0;
  --on-dark: #e9eeff;
  --on-dark-2: rgba(233, 238, 255, .68);
  --on-dark-link: #6cc0ff;
  --line: rgba(10, 16, 48, .1);
  --line-dark: rgba(255, 255, 255, .12);
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 18px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --f: 'Fira Sans', 'Myriad Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: 22px;
  --wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.53 var(--f); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 16px; }
.nowrap { white-space: nowrap; }

.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(900px + var(--gutter) * 2); }

/* ---------------------------------------------------------------- type */
.h-display {
  font-size: clamp(40px, 7vw, 96px); font-weight: 700; line-height: 1.02; letter-spacing: -.013em;
  text-wrap: balance;
}
.h1 { font-size: clamp(32px, 4.8vw, 64px); font-weight: 700; line-height: 1.06; letter-spacing: -.011em; text-wrap: balance; }
.h2 { font-size: clamp(26px, 2.9vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.008em; text-wrap: balance; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; }
.lead { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.42; color: var(--ink-2); font-weight: 400; letter-spacing: -.004em; text-wrap: pretty; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--blue); letter-spacing: 0; margin-bottom: 14px; }
.eyebrow--light, .eyebrow .eyebrow--light { color: var(--on-dark-link); }
.muted { color: var(--ink-3); font-size: 15px; }

/* section heads */
.sh { max-width: 820px; }
.sh .lead { margin-top: 20px; max-width: 720px; }
.sh-sub { margin-top: 12px; font-size: 19px; color: var(--ink-3); }
.sh--center { margin: 0 auto; text-align: center; }
.sh--center .lead { margin-inline: auto; }
.sh--light .h1 { color: #fff; }
.sh--light .lead { color: var(--on-dark-2); }
.sh--light .eyebrow { color: var(--on-dark-link); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: 980px;
  background: var(--blue); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0;
  transition: background-color .2s, transform .12s var(--ease), box-shadow .2s;
}
.btn:hover { background: var(--blue-h); }
.btn:active { transform: scale(.97); }
.btn .ic { width: 20px; height: 20px; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: #e6f1ff; }
.btn--ghost { background: rgba(10, 102, 214, .09); color: var(--blue); }
.btn--ghost:hover { background: rgba(10, 102, 214, .15); }
.btn--lg { height: 54px; padding: 0 32px; }
.link-arrow { display: inline-flex; align-items: center; gap: 2px; color: var(--blue); font-size: 17px; font-weight: 500; }
.link-arrow .ic { width: 18px; height: 18px; stroke-width: 2; transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover .ic, a:hover > .link-arrow .ic { transform: translateX(3px); }
.link-arrow--light { color: var(--on-dark-link); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 36px; }

/* ---------------------------------------------------------------- logo */
.logo { display: inline-flex; align-items: center; gap: 11px; color: inherit; }
.logo-mark { width: 30px; height: 30px; }
.logo-rule { width: 1px; height: 20px; background: currentColor; opacity: .4; }
.logo-word { width: 104px; height: 12px; }

/* ---------------------------------------------------------------- global nav (dark translucent) */
.gnav { position: relative; z-index: 60; background: rgba(8, 12, 34, .84); color: #fff; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .gnav { background: rgba(8, 12, 34, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.gnav--sticky { position: sticky; top: 0; }
.gnav-inner { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 52px; display: flex; align-items: center; gap: 24px; }
.gnav-logo { display: flex; align-items: center; height: 52px; opacity: .96; }
.gnav-logo:hover { opacity: 1; }
.gnav-links { display: flex; gap: 30px; margin: 0 auto; }
.gnav-links a { font-size: 13.5px; color: rgba(255, 255, 255, .74); letter-spacing: 0; transition: color .2s; }
.gnav-links a:hover, .gnav-links a[aria-current] { color: #fff; }
.gnav-cta { font-size: 13px; font-weight: 600; color: #fff; background: var(--blue); padding: 6px 14px; border-radius: 980px; transition: background-color .2s; white-space: nowrap; }
.gnav-cta:hover { background: #1878e6; }
.gnav-burger { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.gnav-burger span { position: absolute; left: 13px; width: 18px; height: 1.6px; background: #fff; border-radius: 1px; transition: transform .35s var(--ease), top .35s var(--ease); }
.gnav-burger span:first-child { top: 18px; }
.gnav-burger span:last-child { top: 25px; }
.gnav-burger[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.gnav-burger[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }
.gmenu {
  position: fixed; left: 0; right: 0; top: 52px; bottom: 0; z-index: 59; padding: 24px var(--gutter) 40px;
  background: rgba(8, 12, 34, .97); overflow-y: auto; opacity: 0; transition: opacity .3s var(--ease);
}
.gmenu.is-open { opacity: 1; }
.gmenu li { opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 40ms + 60ms); }
.gmenu.is-open li { opacity: 1; transform: none; }
.gmenu a { display: block; padding: 10px 0; font-size: 28px; font-weight: 700; letter-spacing: -.007em; color: #fff; }
.gmenu-contacts { margin-top: 32px; display: grid; gap: 8px; }
.gmenu-contacts a { font-size: 17px; font-weight: 400; color: var(--on-dark-link); padding: 0; }
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- local nav (light translucent, sticky) */
.lnav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lnav { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.lnav-inner { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 56px; display: flex; align-items: center; gap: 22px; position: relative; }
.lnav-title { font-size: 20px; font-weight: 700; letter-spacing: -.007em; margin-right: auto; white-space: nowrap; }
.lnav-links { display: flex; gap: 22px; }
.lnav-links a { font-size: 13px; color: var(--ink-2); transition: color .2s; white-space: nowrap; }
.lnav-links a:hover, .lnav-links a.is-active { color: var(--ink); }
.lnav-links a.is-active { font-weight: 600; }
.lnav-cta { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--blue); padding: 5px 13px; border-radius: 980px; white-space: nowrap; transition: background-color .2s; }
.lnav-cta:hover { background: var(--blue-h); }
.lnav-toggle { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--ink-2); }
.lnav-toggle .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.lnav.is-open .lnav-toggle .ic { transform: rotate(180deg); }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(84px, 11vw, 160px) 0; position: relative; }
.section--tight { padding: 56px 0 clamp(72px, 9vw, 120px); }
.section--alt { background: var(--bg-2); }
.section--dark { background: radial-gradient(900px 500px at 85% 0%, #16307f 0%, rgba(22, 48, 127, 0) 70%), var(--night-2); color: var(--on-dark); }
.section--night { background: radial-gradient(1000px 600px at 15% 0%, #0f2366 0%, rgba(15, 35, 102, 0) 70%), var(--night); color: var(--on-dark); }
.section--dark h3, .section--night h3 { color: #fff; }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- home hero */
.hero-home {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  min-height: calc(min(100svh, 980px) - 52px); display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(1100px 720px at 76% 42%, #123086 0%, #081545 42%, #040a24 100%);
  padding: 96px 0 0;
}
.hero-home-glow { position: absolute; inset: auto -10% -40% -10%; height: 60%; background: radial-gradient(closest-side, rgba(11, 140, 245, .22), transparent); z-index: -1; }
.molecule { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-home-inner { position: relative; width: 100%; }
.hero-home .h-display { max-width: 780px; }
.hero-home .lead { color: rgba(233, 238, 255, .74); max-width: 560px; margin-top: 26px; }
.hero-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: auto; padding-top: 72px; padding-bottom: 44px; width: 100%; }
.hero-foot li { border-top: 1px solid var(--line-dark); padding-top: 18px; display: flex; align-items: baseline; gap: 12px; }
.hero-foot b { font-size: 36px; font-weight: 700; letter-spacing: -.01em; line-height: 1; background: linear-gradient(120deg, #bfe3ff, #5cb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-foot span { font-size: 14px; color: rgba(233, 238, 255, .62); line-height: 1.35; }

/* ---------------------------------------------------------------- statement (scroll-lit text) */
.statement { height: 210vh; background: #fff; }
.statement-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.statement-text { font-size: clamp(30px, 4.3vw, 58px); font-weight: 700; line-height: 1.14; letter-spacing: -.01em; color: var(--ink); }
.js .statement-text .w { color: rgba(10, 16, 48, .14); transition: color .45s var(--ease); }
.js .statement-text .w.on { color: var(--ink); }
.js .statement-text .w.on.hl { background: linear-gradient(100deg, var(--azure), var(--royal)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- catalog tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); min-height: 580px;
  display: flex; flex-direction: column; padding: 52px 52px 0; color: var(--ink);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -44px rgba(10, 30, 90, .45); }
.tile:active { transform: scale(.992); transition-duration: .15s; }
.tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 520px; padding: 52px 64px; gap: 40px; }
.tile-copy { position: relative; z-index: 2; max-width: 440px; }
.tile-copy p { color: var(--ink-2); margin: 14px 0 22px; }
.tile--light { background: #fff; }
.tile--dark { background: radial-gradient(600px 400px at 70% 90%, #1a3a9a 0%, rgba(26, 58, 154, 0) 70%), linear-gradient(170deg, #0c1a4f, #050b24); color: #fff; }
.tile--dark .tile-copy p { color: var(--on-dark-2); }
.tile--sky { background: linear-gradient(165deg, #eef6ff 0%, #d4e7fc 100%); }
.tile--grauts { background: linear-gradient(120deg, #faf9fd 0%, #eeeaf6 100%); }
.tile-bottles { flex: 1; position: relative; height: 440px; align-self: stretch; }
.tb { position: absolute; bottom: 20px; left: 50%; width: 170px; transition: transform .8s var(--ease); }
.tb .bottle { width: 100%; }
.tb0 { transform: translateX(-190%) scale(.78); z-index: 1; transform-origin: bottom; }
.tb1 { transform: translateX(-125%) scale(.88); z-index: 2; transform-origin: bottom; }
.tb2 { transform: translateX(-50%); z-index: 4; }
.tb3 { transform: translateX(25%) scale(.88); z-index: 2; transform-origin: bottom; }
.tb4 { transform: translateX(90%) scale(.78); z-index: 1; transform-origin: bottom; }
.tile:hover .tb0 { transform: translateX(-205%) scale(.78) rotate(-2deg); }
.tile:hover .tb1 { transform: translateX(-133%) scale(.88) rotate(-1deg); }
.tile:hover .tb2 { transform: translateX(-50%) translateY(-8px); }
.tile:hover .tb3 { transform: translateX(33%) scale(.88) rotate(1deg); }
.tile:hover .tb4 { transform: translateX(105%) scale(.78) rotate(2deg); }
.tile-visual { margin-top: auto; }
.tile-visual--pellets { margin: auto -20px 0; transform: translateY(18px); }
.tile-visual--pellets .pellets { width: 100%; }
.tile-spools { display: flex; justify-content: center; align-items: flex-end; padding-bottom: 30px; }
.tile-spools .spool-wrap { width: 58%; transition: transform .8s var(--ease); }
.tile-spools .spool-wrap + .spool-wrap { margin-left: -22%; transform: translateY(18px) scale(.86); transform-origin: bottom; }
.tile:hover .tile-spools .spool-wrap:first-child { transform: rotate(-4deg); }
.tile-spools--grauts { flex: 1; padding: 0; }
.tile-spools--grauts .spool-wrap { width: 46%; max-width: 300px; }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; margin-top: 64px; }
.stats--3 { margin-top: 0; }
.stat { border-top: 1px solid var(--line); padding-top: 26px; }
.stat-num {
  font-size: clamp(44px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.016em; line-height: 1;
  background: linear-gradient(100deg, var(--azure) 0%, var(--royal) 55%, var(--navy) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.stat-num small { font-size: .4em; letter-spacing: 0; font-weight: 600; }
.stat-label { color: var(--ink-2); margin-top: 16px; max-width: 32ch; font-size: 16px; }

/* ---------------------------------------------------------------- process steps */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 72px; position: relative; }
.steps::before, .steps::after { content: ''; position: absolute; top: 22px; left: 0; right: 0; height: 1px; background: var(--line-dark); }
.steps::after { height: 2px; top: 21.5px; background: linear-gradient(90deg, var(--azure), #7cc4ff 60%, #8f7bff); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease) .2s; }
.steps.is-in::after { transform: scaleX(1); }
.step { padding-right: 22px; position: relative; }
.step-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--night); border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
  transition: border-color .6s, box-shadow .6s; transition-delay: calc(var(--d, 0) * 300ms + 200ms);
}
.steps.is-in .step-num { border-color: #5cb6ff; box-shadow: 0 0 0 6px rgba(11, 140, 245, .12), 0 0 24px rgba(11, 140, 245, .45); }
.step h3 { margin: 24px 0 8px; font-size: 19px; }
.step p { font-size: 15px; color: var(--on-dark-2); line-height: 1.5; }
.dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.dir h3 { font-size: 19px; margin-bottom: 8px; }
.dir p { font-size: 15.5px; color: var(--on-dark-2); }

/* ---------------------------------------------------------------- lab */
.lab { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.checks { margin: 36px 0 28px; }
.checks li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.45; }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks .ic { color: var(--azure); width: 22px; height: 22px; margin-top: 2px; stroke-width: 2.2; }
.docs { position: relative; height: 470px; max-width: 480px; margin-left: auto; width: 100%; }
.doc {
  position: absolute; left: 0; right: 0; height: 270px; border-radius: 24px; padding: 26px 28px;
  display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-content: start;
  background: linear-gradient(160deg, #ffffff 0%, #f3f7fd 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px -30px rgba(10, 30, 90, .35), 0 0 0 1px rgba(10, 16, 48, .07);
  transform-origin: top center; transition: transform 1.1s var(--ease), opacity .9s var(--ease);
}
.doc .ic { grid-row: span 2; width: 52px; height: 52px; padding: 12px; border-radius: 15px; color: #fff; stroke-width: 1.7; background: linear-gradient(135deg, var(--azure), var(--royal)); }
.doc b { font-size: 20px; font-weight: 700; letter-spacing: -.005em; align-self: end; }
.doc span { color: var(--ink-3); font-size: 14px; }
.doc i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--bg-3); margin-top: 14px; }
.doc i:first-of-type { margin-top: 44px; }
.doc i:nth-of-type(2) { width: 82%; }
.doc i:nth-of-type(3) { width: 58%; }
.doc--1 { top: 0; transform: scale(.9); z-index: 1; }
.doc--2 { top: 100px; transform: scale(.95); z-index: 2; }
.doc--3 { top: 200px; z-index: 3; }
.doc--1 .ic { background: linear-gradient(135deg, #5a7bff, var(--navy)); }
.doc--3 .ic { background: linear-gradient(135deg, #2cc0ff, var(--azure)); }
.js .docs .doc { opacity: 0; transform: translateY(60px) scale(.96); }
.js .docs.is-in .doc { opacity: 1; }
.js .docs.is-in .doc--1 { transform: scale(.9); transition-delay: .05s; }
.js .docs.is-in .doc--2 { transform: scale(.95); transition-delay: .17s; }
.js .docs.is-in .doc--3 { transform: none; transition-delay: .29s; }
.js .docs.is-in:hover .doc--1 { transform: translateY(-14px) scale(.9); transition-delay: 0s; }
.js .docs.is-in:hover .doc--3 { transform: translateY(14px); transition-delay: 0s; }

/* ---------------------------------------------------------------- carousel */
.section--carousel { overflow: hidden; }
.carousel { margin-top: 56px; }
.carousel-track {
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 10px var(--edge) 30px;
  scrollbar-width: none; cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.carousel-track.is-drag a { pointer-events: none; }
.ccard { flex: 0 0 min(372px, 82vw); scroll-snap-align: start; height: 580px; border-radius: 28px; background: #fff; position: relative; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.ccard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10, 30, 90, .4); }
.ccard a { display: flex; flex-direction: column; height: 100%; padding: 34px 32px 0; -webkit-user-drag: none; user-select: none; }
.ccard-kicker { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ccard h3 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin-top: 8px; text-wrap: balance; }
.ccard-text { color: var(--ink-2); font-size: 16px; margin-top: 12px; }
.ccard-visual { margin-top: auto; height: 270px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 20px; }
.ccard--bottle .bottle { width: 150px; }
.ccard--spool .spool-wrap, .ccard--grauts .spool-wrap { width: 260px; }
.ccard--pellets { background: linear-gradient(170deg, #0c1a4f, #050b24); color: #fff; }
.ccard--pellets .ccard-kicker { color: rgba(255, 255, 255, .55); }
.ccard--pellets .ccard-text { color: var(--on-dark-2); }
.ccard--pellets .ccard-visual { padding: 0; margin-inline: -32px; }
.ccard--pellets .pellets { width: 100%; }
.ccard-plus { position: absolute; right: 22px; bottom: 22px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform .3s var(--ease); }
.ccard--pellets .ccard-plus { background: #fff; color: var(--ink); }
.ccard-plus .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.ccard:hover .ccard-plus { transform: rotate(90deg); }
.carousel-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.carousel-dots { display: flex; gap: 8px; }
.cdot { width: 8px; height: 8px; border-radius: 4px; background: rgba(10, 16, 48, .2); transition: width .45s var(--ease), background-color .3s; }
.cdot.on { width: 26px; background: var(--ink); }
.carousel-btns { display: flex; gap: 12px; }
.cbtn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 16, 48, .07); color: var(--ink); transition: background-color .2s, opacity .2s, transform .12s; }
.cbtn:hover { background: rgba(10, 16, 48, .12); }
.cbtn:active { transform: scale(.94); }
.cbtn:disabled { opacity: .35; cursor: default; }
.cbtn .ic { width: 20px; height: 20px; stroke-width: 2; }

/* ---------------------------------------------------------------- industries */
.inds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.ind { background: var(--bg-2); border-radius: var(--r-lg); padding: 32px; }
.ind-ic { width: 50px; height: 50px; border-radius: 15px; background: #fff; display: grid; place-items: center; color: var(--royal); box-shadow: 0 1px 2px rgba(10, 16, 48, .06); }
.ind-ic .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.ind h3 { margin: 22px 0 6px; }
.ind p { color: var(--ink-2); font-size: 15.5px; }
.ind ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ind li { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 980px; background: #fff; color: var(--navy); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- formats & clients */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.format { position: relative; padding: 36px 34px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid var(--line-dark); }
.format-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--azure), var(--royal)); box-shadow: 0 10px 30px -10px rgba(11, 140, 245, .6); }
.format-ic .ic { width: 26px; height: 26px; }
.format-n { position: absolute; top: 30px; right: 32px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .38); font-variant-numeric: tabular-nums; }
.format h3 { margin: 30px 0 10px; font-size: 23px; }
.format p { color: var(--on-dark-2); font-size: 16px; }
.formats--light .format { background: var(--bg-2); border-color: transparent; }
.formats--light .format h3 { color: var(--ink); }
.formats--light .format p { color: var(--ink-2); }
.formats--light .format-n { color: var(--ink-3); }
.clients { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 56px 0 40px; }
.clients > p { font-size: 14px; color: rgba(233, 238, 255, .5); }
.clients ul { display: flex; flex-wrap: wrap; gap: 10px; }
.clients li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 980px; background: rgba(255, 255, 255, .07); color: #dfe6ff; font-size: 14.5px; }
.clients .ic { width: 18px; height: 18px; color: var(--on-dark-link); }

/* ---------------------------------------------------------------- quote */
.section--quote { text-align: center; }
.about-mark { width: 88px; margin: 0 auto 36px; color: var(--navy); }
.about-logo { width: 100%; height: auto; }
.quote { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
.quote-sub { margin: 28px auto 0; color: var(--ink-2); font-size: 18px; max-width: 64ch; }

/* ---------------------------------------------------------------- CTA band */
.cta-band { background: linear-gradient(135deg, #eef6ff 0%, #d1e8ff 100%); padding: clamp(80px, 9vw, 128px) 0; }
.cta-band-inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: center; }
.cta-band .lead { margin-top: 18px; }
.cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cta-contact { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.cta-contact .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #fff; color: var(--blue); }
.cta-contact:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- product hero (inner pages) */
.hero-product { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0 0; isolation: isolate; }
.hero-product-copy { text-align: center; }
.hero-product-copy .lead { max-width: 720px; margin: 24px auto 0; }
.hero-product--resins { background: linear-gradient(180deg, #f8fbff 0%, #e8f0fb 100%); }
.hero-product--dark { color: #fff; background: radial-gradient(900px 620px at 72% 30%, #14318a 0%, #081444 48%, #040a24 100%); }
.hero-product--dark .lead { color: rgba(233, 238, 255, .72); }

.lineup { display: flex; justify-content: center; align-items: flex-end; margin-top: 48px; padding: 0 var(--gutter) 36px; }
.lu { width: clamp(84px, 13vw, 200px); margin: 0 -1.4vw; transform-origin: bottom center; transform: scale(var(--s, 1)); position: relative; }
.lu .bottle { width: 100%; }
.lu0, .lu6 { --s: .72; z-index: 1; }
.lu1, .lu5 { --s: .84; z-index: 2; }
.lu2, .lu4 { --s: .93; z-index: 3; }
.lu3 { --s: 1; z-index: 4; }
.js .lineup .lu { opacity: 0; transform: translateY(90px) scale(var(--s)); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
.js .lineup.is-in .lu { opacity: 1; transform: scale(var(--s)); }
.lu3 { transition-delay: .05s !important; }
.lu2, .lu4 { transition-delay: .15s !important; }
.lu1, .lu5 { transition-delay: .25s !important; }
.lu0, .lu6 { transition-delay: .35s !important; }

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat { position: relative; display: block; padding: 30px 56px 30px 30px; border-radius: 22px; background: var(--bg-2); transition: background-color .25s; }
.cat:hover { background: var(--bg-3); }
.cat h3 { font-size: 20px; margin-bottom: 8px; }
.cat p { color: var(--ink-2); font-size: 15.5px; }
.cat .ic { position: absolute; right: 24px; top: 31px; width: 20px; height: 20px; color: var(--ink-3); transition: transform .25s var(--ease); }
.cat:hover .ic { transform: translateX(3px); color: var(--blue); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 72px; }
.fact .ic { width: 34px; height: 34px; color: var(--azure); stroke-width: 1.5; }
.fact h3 { font-size: 18px; margin: 16px 0 6px; }
.fact p { font-size: 15px; color: var(--ink-2); }

/* products (resin panels) */
.products { display: grid; gap: 28px; margin-top: 64px; }
.product { display: grid; grid-template-columns: 5fr 7fr; background: #fff; border-radius: var(--r-xl); overflow: hidden; }
.section:not(.section--alt) .product { background: var(--bg-2); }
.product-media { display: flex; align-items: flex-end; justify-content: center; padding: 64px 40px 40px; background: radial-gradient(90% 70% at 50% 78%, #ffffff 0%, #eef3fa 72%); }
.section:not(.section--alt) .product-media { background: radial-gradient(90% 70% at 50% 78%, #ffffff 0%, #e6eef9 72%); }
.product-media .bottle { width: min(240px, 72%); transition: transform 1s var(--ease); }
.product:hover .product-media .bottle { transform: translateY(-6px) rotate(-1.5deg); }
.product--rev .product-media { order: 2; }
.product-body { padding: 52px 56px; }
.product-body > p { color: var(--ink-2); }
.product-lead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 18px 0 18px; }
.product-lead b { font-size: clamp(42px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.016em; line-height: 1; background: linear-gradient(100deg, var(--azure), var(--royal) 60%, var(--navy)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.product-lead span { color: var(--ink-3); font-size: 15px; }
.product-apps, .card-apps, .gpanel-apps { margin-top: 16px; color: var(--ink-2); font-size: 15.5px; }
.product-apps span, .card-apps span, .gpanel-apps span { display: block; font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 2px; }
.spec-title { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; margin: 30px 0 8px; }
.spec div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.spec dt { color: var(--ink-2); }
.spec dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* bottle label text (inline svg) */
.bl-name { font-family: var(--f); font-weight: 800; letter-spacing: 0; }
.bl-sub { font-family: var(--f); font-size: 10.5px; font-weight: 500; }
.bl-kicker { font-family: var(--f); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.bl-kg { font-family: var(--f); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.sp-g { font-family: var(--f); font-size: 10px; font-weight: 800; letter-spacing: .06em; fill: #3b2466; }
.sp-l { font-family: var(--f); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; fill: #14287a; }
.spool-wrap { transition: --fil .7s var(--ease), --fil-l .7s var(--ease), --fil-d .7s var(--ease); }
.spool, .bottle, .pellets { width: 100%; height: auto; overflow: visible; }

/* cards */
.cards { display: grid; gap: 18px; margin-top: 64px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--5 { grid-template-columns: repeat(5, 1fr); }
.card { background: #fff; border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.section:not(.section--alt):not(.section--night):not(.section--dark) .card { background: var(--bg-2); }
.card .eyebrow { margin: 6px 0 0; font-size: 13.5px; }
.card h3 { font-size: 21px; }
.card > p { color: var(--ink-2); font-size: 15.5px; }
.card-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--royal); background: linear-gradient(135deg, #e8f2ff, #d1e8ff); }
.card-ic .ic { width: 24px; height: 24px; }
.chip-data { font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--navy) !important; background: var(--bg-3); border-radius: 12px; padding: 10px 13px; font-variant-numeric: tabular-nums; }
.card-apps { margin-top: auto; padding-top: 6px; }
.card--note { background: linear-gradient(160deg, #13286f, #0a1438) !important; color: #fff; }
.card--note h3 { color: #fff; margin-bottom: 4px; }
.card--note li { padding: 12px 0; border-top: 1px solid var(--line-dark); font-size: 15px; color: rgba(255, 255, 255, .78); }
.card--note b { color: #fff; }
.card--glass { background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--line-dark); }
.card--glass .eyebrow { color: var(--on-dark-link); }
.card--glass > p { color: var(--on-dark-2); }
.card--glass .chip-data { background: rgba(108, 192, 255, .12); color: #cbe8ff !important; }
.card--glass .card-apps { color: var(--on-dark-2); }
.card--glass .card-apps span { color: var(--on-dark-link); }

.note { margin-top: 40px; padding: 24px 28px; border-radius: 20px; background: var(--bg-2); border-left: 3px solid var(--royal); }
.section--alt .note, .gpanel .note { background: #fff; }
.note h3, .note h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0; }
.note p { color: var(--ink-2); font-size: 15.5px; }
.note--light { background: rgba(255, 255, 255, .05); border-left-color: var(--on-dark-link); }
.note--light h3 { color: #fff; }
.note--light p { color: var(--on-dark-2); }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
.flow li { position: relative; padding: 18px 20px 0 0; font-size: 18px; font-weight: 600; color: #fff; border-top: 2px solid var(--line-dark); }
.flow li span { display: block; font-size: 13px; color: var(--on-dark-link); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.flow li::before { content: ''; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: linear-gradient(90deg, var(--azure), #7cc4ff); transition: width 1s var(--ease); }
.flow.is-in li::before { width: 100%; }
.flow li:nth-child(2)::before { transition-delay: .35s; }
.flow li:nth-child(3)::before { transition-delay: .7s; }
.flow li:nth-child(4)::before { transition-delay: 1.05s; }
.workflow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.workflow li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 980px; background: var(--bg-2); font-size: 15px; font-weight: 500; }
.workflow span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--azure), var(--royal)); }

/* ---------------------------------------------------------------- charts */
.chart { margin-top: 56px; background: #fff; border-radius: 28px; padding: 32px 36px 28px; }
.section:not(.section--alt) .chart { background: var(--bg-2); }
.chart-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 26px; }
.chart-unit { font-size: 13.5px; color: var(--ink-3); }
.seg { display: inline-flex; position: relative; padding: 3px; border-radius: 980px; background: rgba(10, 16, 48, .065); max-width: 100%; }
.seg--scroll { overflow-x: auto; scrollbar-width: none; }
.seg--scroll::-webkit-scrollbar { display: none; }
.seg-btn { position: relative; z-index: 1; padding: 8px 16px; border-radius: 980px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color .25s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { color: var(--ink); }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 980px; background: #fff; box-shadow: 0 1px 3px rgba(10, 16, 48, .12), 0 6px 16px -6px rgba(10, 16, 48, .18); transition: left .5s var(--ease), width .5s var(--ease); }
.bars { display: grid; gap: 2px; position: relative; }
.bar-row { display: grid; grid-template-columns: 190px 1fr 124px; align-items: center; gap: 18px; padding: 8px 12px; margin: 0 -12px; border-radius: 12px; cursor: default; transition: background-color .2s; }
.bar-row[data-href] { cursor: pointer; }
.bar-row:hover, .bar-row:focus-visible { background: rgba(11, 140, 245, .07); outline: none; }
.bar-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.bar-name small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.bar-track { position: relative; height: 14px; }
.bar { position: absolute; top: 0; bottom: 0; left: var(--x0, 0%); width: var(--w, 0%); background: var(--azure); border-radius: 0 4px 4px 0; transition: width .9s var(--ease), left .9s var(--ease), background-color .2s; }
.bar--range { border-radius: 4px; }
.bar-row:hover .bar, .bar-row:focus-visible .bar { background: var(--royal); }
.bar-zero { position: absolute; top: -8px; bottom: -8px; left: var(--z, 0%); width: 1px; background: rgba(10, 16, 48, .25); opacity: 0; transition: opacity .3s; }
.chart.is-range .bar-zero { opacity: 1; }
.bar-val { font-size: 14.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-val.na { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.chart-axis { display: grid; grid-template-columns: 190px 1fr 124px; gap: 18px; height: 0; overflow: hidden; opacity: 0; transition: opacity .3s; }
.chart.is-range .chart-axis { height: 22px; opacity: 1; margin-top: 6px; }
.axis { position: relative; grid-column: 2; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.chart-note { margin-top: 22px; font-size: 13px; color: var(--ink-3); }
.tip { position: fixed; z-index: 100; left: 0; top: 0; pointer-events: none; max-width: 280px; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: #fff; background: rgba(10, 14, 32, .92); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; font-size: 14px; font-weight: 700; }
.tip i { font-style: normal; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- thermoplastics */
.hero-thermo { min-height: 780px; padding-bottom: 96px; display: flex; flex-direction: column; justify-content: center; }
.hero-thermo .hero-product-copy { text-align: left; position: relative; z-index: 2; width: 100%; }
.hero-thermo .hero-product-copy .lead { margin-left: 0; max-width: 560px; }
.hero-thermo-visual { position: absolute; right: -4%; top: 0; bottom: 0; width: min(60vw, 820px); z-index: 0; pointer-events: none; }
.orbit { position: absolute; top: 4%; right: 6%; width: 86%; opacity: .95; }
.orb { transform-origin: 300px 300px; }
.orb1 { transform: rotate(-24deg); }
.orb2 { transform: rotate(36deg); }
.orb3 { transform: rotate(96deg); }
.orb1 { animation: orb1 36s linear infinite; }
.orb2 { animation: orb2 44s linear infinite; }
.orb3 { animation: orb3 52s linear infinite; }
@keyframes orb1 { from { transform: rotate(-24deg); } to { transform: rotate(336deg); } }
@keyframes orb2 { from { transform: rotate(36deg); } to { transform: rotate(396deg); } }
@keyframes orb3 { from { transform: rotate(96deg); } to { transform: rotate(456deg); } }
.hero-pellets { position: absolute; left: 30%; right: 0; bottom: 36px; }
.hero-kpis { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 56px; }
.hero-kpis b { display: block; font-size: 36px; font-weight: 700; letter-spacing: -.012em; line-height: 1.05; }
.hero-kpis small { font-size: .5em; font-weight: 600; color: rgba(255, 255, 255, .6); letter-spacing: 0; }
.hero-kpis span { font-size: 14px; color: rgba(233, 238, 255, .6); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 20px; }
.fchip { padding: 9px 17px; border-radius: 980px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); transition: background-color .25s, color .25s, transform .12s; }
.fchip:hover { background: var(--bg-3); }
.fchip:active { transform: scale(.96); }
.fchip.is-on { background: var(--ink); color: #fff; }

.table-wrap { overflow-x: auto; border-radius: 20px; background: #fff; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 15px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { border-top: 0; background: var(--bg-2); font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; vertical-align: bottom; }
.table tbody th { font-weight: 600; }
.table tbody th a { color: var(--navy); }
.table tbody th a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.table--overview tbody th { white-space: nowrap; }
.table--overview td:last-child { color: var(--ink-2); min-width: 260px; }
.table tbody tr { transition: background-color .2s; }
.table tbody tr:hover { background: rgba(11, 140, 245, .035); }
.fill { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.fill--cf { background: #23252b; box-shadow: none; }
.fill--bf { background: #7a6656; box-shadow: none; }
.table--spec th { font-weight: 400; color: var(--ink-2); }
.table--spec td { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table--spec thead th:last-child { text-align: right; }
.table--tds td:nth-child(2) { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table--tds td:nth-child(3) { color: var(--ink-3); font-size: 13.5px; white-space: nowrap; }
.table--tds tbody th { font-weight: 400; color: var(--ink-2); }

.grade { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; margin-top: 28px; padding: 44px; border-radius: 28px; background: #fff; scroll-margin-top: 80px; }
.sh + .grade { margin-top: 56px; }
.section:not(.section--alt) .grade { background: var(--bg-2); }
.grade-visual { width: 190px; margin: -6px 0 18px -8px; }
.grade-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.grade-tags span { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 980px; background: var(--bg-3); color: var(--navy); }
.section--alt .grade-tags span { background: var(--bg-2); }
.grade-main > p { color: var(--ink-2); font-size: 16px; }
.grade-apps { margin-top: 20px; border-top: 1px solid var(--line); }
.grade-apps summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--blue); }
.grade-apps summary::-webkit-details-marker { display: none; }
.grade-apps summary .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.grade-apps[open] summary .ic { transform: rotate(180deg); }
.grade-apps p { color: var(--ink-2); font-size: 15px; padding-bottom: 4px; }
.grade-specs { border-radius: 18px; overflow: hidden; background: #fff; }
.section--alt .grade-specs { background: var(--bg-2); }
.grade-specs .table thead th { background: transparent; }
.grade-specs .table th, .grade-specs .table td { padding: 13px 18px; }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.cmp-col { background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); border-radius: 28px; padding: 30px; }
.cmp-select {
  -webkit-appearance: none; appearance: none; width: 100%; padding: 14px 44px 14px 16px; border-radius: 14px;
  font: 600 17px var(--f); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.cmp-select option { color: var(--ink); }
.cmp-visual { height: 120px; margin: 22px 0 6px; display: flex; align-items: flex-end; }
.cmp-visual svg { width: 230px; height: auto; }
.cmp-card h3 { font-size: 26px; font-weight: 700; letter-spacing: -.009em; }
.cmp-sub { color: var(--on-dark-2); font-size: 15px; margin-top: 4px; }
.cmp-rows { margin: 22px 0; }
.cmp-row { padding: 13px 0 12px; border-top: 1px solid var(--line-dark); }
.cmp-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.cmp-row span { color: var(--on-dark-2); }
.cmp-row b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-row b.win { color: var(--on-dark-link); }
.cmp-row b.win::after { content: ' ●'; font-size: 9px; vertical-align: 2px; }
.cmp-bar { height: 4px; margin-top: 9px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, var(--azure), #7cc4ff); transition: width .8s var(--ease); }
.cmp-dirs { color: var(--on-dark-2); font-size: 14.5px; margin-bottom: 14px; }

/* ---------------------------------------------------------------- filaments */
.hero-fil { background: linear-gradient(180deg, #f8fbff 0%, #e7eff9 100%); padding-bottom: 72px; }
.hero-fil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-fil .hero-product-copy { text-align: left; }
.hero-fil .hero-product-copy .lead { margin-left: 0; }
.hero-fil-visual { display: flex; justify-content: center; }
.hero-fil-visual .spool-wrap { width: min(100%, 540px); }
.picker { margin-top: 40px; }
.picker-label { font-size: 17px; margin-bottom: 14px; color: var(--ink-2); }
.picker-label b { color: var(--ink); font-weight: 700; }
.picker-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.picker-row > span { width: 50px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), inset 0 -6px 10px rgba(0, 0, 0, .14), inset 0 4px 8px rgba(255, 255, 255, .4); transition: transform .15s var(--ease); }
.swatch::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; transition: border-color .25s; }
.swatch:hover { transform: scale(1.08); }
.swatch:active { transform: scale(.92); }
.swatch.is-on::after { border-color: var(--blue); }
.vs { margin-top: 56px; background: #fff; border-radius: 28px; padding: 36px 36px 16px; }
.vs-head { display: grid; grid-template-columns: 38% 31% 31%; align-items: end; padding-bottom: 16px; }
.vs-col { text-align: center; }
.vs-col .spool-wrap { width: 150px; margin: 0 auto; }
.vs-col h3 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin-top: 10px; }
.vs .table-wrap { border: 0; border-radius: 0; }
.table--vs { table-layout: fixed; }
.table--vs th:first-child { width: 38%; }
.table--vs td { text-align: center; font-weight: 600; }
.table--vs tbody th { font-weight: 400; color: var(--ink-2); }
.dot { display: inline-block; width: 18px; height: 18px; margin: 2px 3px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 -4px 6px rgba(0, 0, 0, .12); vertical-align: middle; }
.dots-t { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.choice-item { background: #fff; border-radius: 22px; padding: 30px; }
.choice-item h3 { font-size: 20px; }
.choice-item p { color: var(--ink-2); font-size: 15.5px; margin-top: 6px; }

.section--grauts { background: linear-gradient(180deg, #ffffff 0%, #f7f5fc 100%); }
.grauts-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-bottom: 56px; }
.grauts-spools { display: flex; justify-content: center; align-items: flex-end; }
.grauts-spools .spool-wrap { width: 44%; margin: 0 -7%; }
.grauts-spools .spool-wrap:nth-child(2) { width: 52%; z-index: 2; position: relative; }
.sh + .seg { margin-top: 44px; }
.gpanels { margin-top: 24px; }
.gpanel { background: var(--bg-2); border-radius: 28px; padding: 44px; }
.js .gpanel[hidden] { display: none; }
.gpanel + .gpanel { margin-top: 20px; }
.js .gpanel + .gpanel { margin-top: 0; }
.gpanel-head { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center; margin-bottom: 12px; }
.gpanel-copy > p { color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 18px; }
.meta dt { font-size: 12px; color: var(--ink-3); }
.meta dd { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gpanel .note { margin-top: 20px; }
.gpanel .table-wrap { border: 0; }
.js .gpanel:not([hidden]) { animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- partnership */
.hero-partner { min-height: 660px; display: flex; align-items: center; padding-bottom: 110px; }
.hero-partner .hero-product-copy { text-align: left; position: relative; z-index: 2; width: 100%; }
.hero-partner .hero-product-copy .lead { margin-left: 0; max-width: 600px; }
.hero-partner-rings { position: absolute; right: -12%; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); z-index: 0; }
.hero-partner-rings i { position: absolute; inset: calc(var(--k, 0) * 90px); border-radius: 50%; border: 1px solid rgba(108, 192, 255, .16); animation: ring 8s var(--ease) infinite; animation-delay: calc(var(--k, 0) * -1.6s); }
.hero-partner-rings i:nth-child(1) { --k: 0; }
.hero-partner-rings i:nth-child(2) { --k: 1; }
.hero-partner-rings i:nth-child(3) { --k: 2; }
.hero-partner-rings i:nth-child(4) { --k: 3; }
.hero-partner-rings i:nth-child(5) { --k: 4; background: radial-gradient(circle, rgba(11, 140, 245, .35), rgba(11, 140, 245, 0) 70%); border-color: rgba(108, 192, 255, .4); }
@keyframes ring { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }

.pilot { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line-dark); }
.timeline li:last-child { border-bottom: 1px solid var(--line-dark); }
.timeline span { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1; background: linear-gradient(120deg, #bfe3ff, #5cb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.timeline p { font-size: 18px; color: #dfe6ff; }

.request { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.request-side { position: sticky; top: 88px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 32px 0 28px; }
.quick li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.quick .ic { width: 16px; height: 16px; color: var(--azure); stroke-width: 2.4; }
.contacts a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.contacts .ic { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--bg-2); color: var(--blue); }
.contacts small { display: block; font-size: 12px; color: var(--ink-3); }
.contacts span { font-size: 17px; font-weight: 600; }
.contacts a:hover span { color: var(--blue); }
.form { background: var(--bg-2); border-radius: 28px; padding: 38px; }
.form fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.form legend { padding: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field > span i { color: #c0262d; font-style: normal; }
.field input, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--f); color: var(--ink); background: #fff; border: 1px solid rgba(10, 16, 48, .13);
  border-radius: 12px; padding: 13px 14px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #9aa2bb; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 102, 214, .15); }
.field.is-err input { border-color: #c0262d; box-shadow: 0 0 0 4px rgba(192, 38, 45, .1); }
.field-err { font-style: normal; font-size: 12.5px; color: #c0262d; min-height: 0; }
.field--wide { grid-column: 1 / -1; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.form-hint { font-size: 13px; color: var(--ink-3); max-width: 34ch; }
.form-done { margin-top: 26px; padding: 26px; border-radius: 20px; background: #fff; }
.form-done h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin-bottom: 8px; }
.form-done h3 .ic { color: #1a9f4a; stroke-width: 2.4; }
.form-done p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 16px; }
.form-done a { color: var(--blue); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; padding: 36px 0 26px; }
.footer-notes p { color: var(--ink-3); max-width: 120ch; padding-bottom: 10px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-top: 18px; padding: 30px 0; border-top: 1px solid var(--line); }
.footer-logo { display: inline-block; color: var(--navy); margin-bottom: 14px; }
.footer-brand p { color: var(--ink-3); }
.footer h3 { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: 0; }
.footer li { padding: 3px 0; }
.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .lnav-links { gap: 16px; }
  .inds { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--5 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .steps::before, .steps::after { display: none; }
  .product-body { padding: 44px 40px; }
  .tile { padding: 44px 40px 0; }
  .tile--wide { padding: 44px; }
}

@media (max-width: 1024px) {
  .lnav-toggle { display: inline-flex; }
  .lnav-title { margin-right: 0; }
  .lnav-inner { justify-content: space-between; }
  .lnav-cta { margin-left: auto; }
  .lnav-links {
    position: absolute; left: 0; right: 0; top: 56px; flex-direction: column; gap: 0; padding: 8px var(--gutter) 18px;
    background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
  }
  .lnav.is-open .lnav-links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .lnav-links a { display: block; padding: 11px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .lnav-links li:last-child a { border-bottom: 0; }
}

@media (max-width: 900px) {
  .gnav-links, .gnav-cta { display: none; }
  .gnav-burger { display: block; margin-left: auto; }
  .tiles { grid-template-columns: 1fr; }
  .tile--wide { flex-direction: column; align-items: stretch; padding: 40px 32px 0; }
  .tile-bottles { flex: none; height: 380px; }
  .tile-spools--grauts { padding-bottom: 30px; }
  .product, .product--rev { grid-template-columns: 1fr; }
  .product--rev .product-media { order: 0; }
  .product-media { padding: 48px 24px 28px; }
  .product-media .bottle { width: 190px; }
  .lab, .pilot, .request, .cta-band-inner, .grauts-intro, .hero-fil-grid { grid-template-columns: 1fr; gap: 40px; }
  .request-side { position: static; }
  .docs { margin-left: 0; }
  .grade { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .gpanel { padding: 28px; }
  .gpanel-head { grid-template-columns: 1fr; gap: 12px; }
  .gpanel-visual { width: 220px; }
  .cmp { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats--3 { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  .formats { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .choice { grid-template-columns: 1fr; }
  .hero-thermo-visual { width: 90vw; right: -20%; opacity: .55; }
  .hero-partner-rings { right: -45%; opacity: .7; }
  .bar-row, .chart-axis { grid-template-columns: 150px 1fr 96px; gap: 12px; }
  .dirs { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .section { padding: 76px 0; }
  .hero-home { padding-top: 64px; min-height: 640px; }
  .hero-foot { grid-template-columns: 1fr; gap: 0; padding-top: 48px; padding-bottom: 28px; }
  .hero-foot li { padding: 14px 0; }
  .hero-foot b { font-size: 30px; min-width: 44px; }
  .statement { height: 180vh; }
  .tiles { margin-top: 40px; }
  .tile { min-height: 520px; padding: 34px 26px 0; border-radius: 26px; }
  .tile--wide { padding: 34px 26px 0; }
  .tile-bottles { height: 300px; }
  .tb { width: 124px; }
  .stats, .stats--3 { grid-template-columns: 1fr; gap: 34px; }
  .inds, .cards--3, .cards--4, .cards--5 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 28px; margin-top: 52px; }
  .cats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 0; margin-top: 48px; }
  .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 0 0 28px; }
  .step-num { grid-row: span 2; }
  .step h3 { margin: 10px 0 4px; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .docs { height: 400px; }
  .doc { height: 230px; padding: 22px; }
  .doc--2 { top: 84px; }
  .doc--3 { top: 168px; }
  .product-body { padding: 32px 24px 36px; }
  .grade { padding: 26px 20px; border-radius: 24px; }
  .gpanel { padding: 22px 18px; }
  .table th, .table td { padding: 12px 14px; }
  .table--spec td, .table--tds td:nth-child(2) { white-space: normal; }
  .chart { padding: 22px 18px 20px; border-radius: 24px; }
  .bar-row { grid-template-columns: 1fr auto; grid-template-areas: 'name val' 'track track'; row-gap: 8px; padding: 10px 12px; }
  .bar-name { grid-area: name; }
  .bar-val { grid-area: val; }
  .bar-track { grid-area: track; }
  .chart-axis { grid-template-columns: 1fr; }
  .axis { grid-column: 1; }
  .ccard { height: 540px; }
  .ccard h3 { font-size: 26px; }
  .vs { padding: 24px 14px 8px; }
  .vs-col .spool-wrap { width: 96px; }
  .vs-col h3 { font-size: 22px; }
  .form { padding: 24px 18px; border-radius: 24px; }
  .form-grid, .quick { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .lnav-title { font-size: 17px; }
  .lnav-cta { padding: 5px 11px; }
  .hero-kpis { gap: 18px 32px; }
  .hero-kpis b { font-size: 28px; }
  .hero-thermo { min-height: 700px; }
  .hero-thermo-visual { top: auto; height: 60%; width: 130vw; right: -40%; opacity: .45; }
  .clients li { font-size: 13.5px; }
  .picker-row .swatch { width: 28px; height: 28px; }
  .lnav-cta { display: none; }
  .lnav-inner { gap: 6px; }
  .chart-top .seg { overflow-x: auto; scrollbar-width: none; }
  .chart-top .seg::-webkit-scrollbar { display: none; }
  .tb { width: 112px; }
  .tb0 { transform: translateX(-178%) scale(.78); }
  .tb4 { transform: translateX(78%) scale(.78); }
  .docs { height: 420px; }
  .doc { height: 240px; }
  .doc--2 { top: 92px; }
  .doc--3 { top: 184px; }
  /* tables become stacked cards */
  .table-wrap { overflow: visible; }
  .table--overview thead, .table--tds thead, .table--spec thead { display: none; }
  .table--overview tr, .table--tds tr { display: block; padding: 14px 16px; border-top: 1px solid var(--line); }
  .table--overview tbody tr:first-child, .table--tds tbody tr:first-child { border-top: 0; }
  .table--overview th, .table--overview td, .table--tds th, .table--tds td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0 !important; }
  .table--overview th { font-size: 16px; margin-bottom: 4px; }
  .table--overview td { font-size: 14px; color: var(--ink-2); }
  .table--overview td + td { margin-top: 2px; }
  .table--overview td:last-child { color: var(--ink-3); }
  .table--tds tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; }
  .table--tds th { grid-column: 1 / -1; font-size: 14px; }
  .table--tds td:nth-child(2) { font-size: 16px; }
  .table--tds td:nth-child(3) { text-align: right; align-self: end; font-size: 12px; }
  .table--spec th { font-size: 14px; }
  .table--vs th, .table--vs td { padding: 12px 8px; font-size: 13.5px; }
  .table--vs td { word-break: break-word; }
}

/* ---------------------------------------------------------------- motion & static preview */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .lineup .lu, .js .docs .doc { transform: none !important; transition: opacity .4s ease !important; }
  .orb1, .orb2, .orb3, .hero-partner-rings i { animation: none; }
  .statement { height: auto; }
  .statement-sticky { position: static; height: auto; padding: 110px 0; }
  .steps::after { transition: none; }
}
html.static .reveal, html.static .lineup .lu, html.static .docs .doc { opacity: 1 !important; transition: none !important; }
html.static .reveal { transform: none !important; }
html.static .lineup .lu { transform: scale(var(--s)) !important; }
html.static .statement { height: auto; }
html.static .statement-sticky { position: static; height: auto; padding: 120px 0; }
html.static .orb1, html.static .orb2, html.static .orb3, html.static .hero-partner-rings i { animation: none; }
@media (prefers-reduced-transparency: reduce) {
  .gnav { background: #0a0f2a; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lnav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media print {
  .gnav, .lnav, .cta-band, .carousel-nav, .molecule { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   v2 — catalogue structure: flyouts, dividers, section heads, stages
   ===================================================================== */

/* ---------- global nav flyouts */
.gnav { z-index: 70; }
.gnav-links { gap: 4px; align-items: center; }
.gnav-links > li { position: static; display: flex; align-items: center; }
.gnav-link { display: block; padding: 0 11px; line-height: 52px; font-size: 13px; color: rgba(255, 255, 255, .76); transition: color .2s; }
.gnav-link:hover, .has-fly.is-open .gnav-link, .gnav-link[aria-current] { color: #fff; }
.fly-trigger { width: 14px; height: 52px; margin-left: -10px; margin-right: -4px; opacity: 0; color: #fff; display: grid; place-items: center; }
.fly-trigger .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.fly-trigger:focus-visible { opacity: 1; }
.fly {
  position: absolute; left: 0; right: 0; top: 52px; overflow: hidden;
  background: rgba(10, 14, 36, .96); visibility: hidden; opacity: 0;
  clip-path: inset(0 0 100% 0); transition: clip-path .42s var(--ease), opacity .3s, visibility 0s .42s;
}
.has-fly.is-open .fly { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .5s var(--ease), opacity .2s, visibility 0s; }
.fly-inner { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 36px var(--gutter) 48px; display: grid; grid-template-columns: 1fr 360px; gap: 56px; }
.fly-h { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .5); margin-bottom: 14px; }
.fly-list ul { columns: 2; column-gap: 40px; }
.fly-list li { break-inside: avoid; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .45s var(--ease); }
.has-fly.is-open .fly-list li { opacity: 1; transform: none; transition-delay: .06s; }
.fly-list a { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 19px; font-weight: 600; letter-spacing: -.005em; color: #eef2ff; line-height: 1.25; }
.fly-list a:hover { color: var(--on-dark-link); }
.fly-n { flex: none; width: 30px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums; }
.fly-promo { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; align-self: start; }
.fly-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fly-promo:hover .fly-img { transform: scale(1.04); }
.fly-promo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; font-size: 14px; line-height: 1.4; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.fly-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(4, 8, 24, .45); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; pointer-events: none; }
body.fly-dim .fly-scrim { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }

/* mobile menu groups */
.gm-home { display: block; padding: 6px 0 14px; font-size: 15px !important; font-weight: 600; color: var(--on-dark-link) !important; }
.gm-group { border-bottom: 1px solid var(--line-dark); opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 40ms + 60ms); }
.gmenu.is-open .gm-group { opacity: 1; transform: none; }
.gm-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 21px; font-weight: 700; letter-spacing: -.007em; color: #fff; }
.gm-group summary::-webkit-details-marker { display: none; }
.gm-group summary .ic { width: 18px; height: 18px; color: rgba(255, 255, 255, .6); transition: transform .35s var(--ease); }
.gm-group[open] summary .ic { transform: rotate(180deg); }
.gm-group ul { padding: 0 0 14px; }
.gmenu .gm-group ul a { display: flex; gap: 12px; padding: 8px 0; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .82); letter-spacing: 0; }
.gm-group ul a span { width: 30px; flex: none; color: rgba(255, 255, 255, .42); font-size: 13px; padding-top: 2px; }
.gmenu .gm-cta { margin-top: 26px; display: flex; font-size: 17px; }

/* local nav for section pages */
.lnav--pages .lnav-links { gap: 2px; }
.lnav--pages .lnav-links a { padding: 6px 10px; border-radius: 980px; transition: background-color .2s, color .2s; }
.lnav--pages .lnav-links a small { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-right: 5px; font-variant-numeric: tabular-nums; }
.lnav--pages .lnav-links a[aria-current] { background: var(--ink); color: #fff; font-weight: 600; }
.lnav--pages .lnav-links a[aria-current] small { color: rgba(255, 255, 255, .6); }
.lnav--pages .lnav-links a:not([aria-current]):hover { background: rgba(10, 16, 48, .06); }

/* ---------- divider heroes (catalogue group pages) */
.divider { --p: 0; position: relative; min-height: calc(min(100svh, 940px) - 108px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #050b24; isolation: isolate; }
.divider-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.divider-img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform: translate3d(0, calc(var(--p) * 8%), 0) scale(calc(1.06 - var(--p) * .06)); will-change: transform; }
.divider-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 11, 36, .05) 30%, rgba(5, 11, 36, .8) 100%), linear-gradient(90deg, rgba(5, 11, 36, .55), rgba(5, 11, 36, 0) 60%); }
.divider-copy { width: 100%; padding-bottom: clamp(72px, 10vh, 118px); padding-top: 140px; opacity: calc(1 - var(--p) * 1.6); }
.divider-copy .h-display { max-width: 920px; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.divider-copy .lead { color: rgba(255, 255, 255, .88); max-width: 620px; margin-top: 20px; }
.divider-down { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .16); transition: background-color .2s; }
.divider-down:hover { background: rgba(255, 255, 255, .26); }
.divider-down .ic { width: 20px; height: 20px; stroke-width: 2; }
.page-resins .divider-img { object-position: center 40%; }
.page-hobby .divider-img { object-position: center 62%; }
.page-grauts .divider-img { object-position: center 28%; }
.page-eng .divider-img { object-position: center 45%; }

/* ---------- section head with big catalogue number */
.sec-head { padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 64px); scroll-margin-top: 56px; }
.sec-head-inner { display: grid; grid-template-columns: auto 1fr; gap: 12px clamp(24px, 4vw, 56px); align-items: start; }
.sec-num {
  font-size: clamp(72px, 11vw, 160px); font-weight: 700; line-height: .84; letter-spacing: -.019em; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--azure) 0%, var(--royal) 55%, var(--navy) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.sec-head-copy { max-width: 820px; padding-top: 6px; }
.sec-head-copy .eyebrow { margin-bottom: 10px; }
.sec-sub { margin-top: 14px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.sec-head .lead { margin-top: 22px; }
.sec-head .workflow { margin-top: 28px; }
.sec-head .meta { margin-top: 26px; }

/* ---------- product stage with real bottle photos */
.bimg { display: block; width: 100%; height: auto; }
.stage-wrap { padding: 0 var(--gutter); }
.stage {
  position: relative; max-width: var(--wrap); margin: 0 auto; border-radius: 36px; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 48px);
  padding: clamp(48px, 7vw, 96px) 24px clamp(40px, 5vw, 64px);
  background: radial-gradient(60% 70% at 30% 100%, color-mix(in srgb, var(--t1) 30%, transparent), transparent 70%),
              radial-gradient(60% 70% at 70% 100%, color-mix(in srgb, var(--t2) 30%, transparent), transparent 70%),
              linear-gradient(180deg, #f7f9fc 0%, #e9eef6 100%);
}
.stage-b { position: relative; z-index: 1; width: clamp(120px, 21vw, 270px); transition: transform 1.2s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.stage--3 .stage-b { width: clamp(96px, 17vw, 230px); }
.stage-b .bimg { filter: drop-shadow(0 30px 28px rgba(10, 20, 60, .22)); }
.stage-floor { position: absolute; left: 12%; right: 12%; bottom: clamp(30px, 4vw, 52px); height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 20, 60, .2), transparent); }
.js .stage .stage-b { opacity: 0; transform: translateY(60px) scale(.96); }
.js .stage.is-in .stage-b { opacity: 1; transform: none; }

.product-media { align-items: center !important; background: radial-gradient(80% 60% at 50% 85%, color-mix(in srgb, var(--t) 26%, #fff), #eef3fa 75%) !important; }
.product-media .bimg { width: min(250px, 66%); filter: drop-shadow(0 26px 26px rgba(10, 20, 60, .2)); transition: transform 1s var(--ease); }
.product:hover .product-media .bimg { transform: translateY(-6px) rotate(-1.2deg); }

.lineup { margin-top: 8px; padding-bottom: 72px; }
.lu { width: clamp(70px, 12vw, 190px); margin: 0 -.6vw; }
.lu img { width: 100%; filter: drop-shadow(0 22px 22px rgba(10, 20, 60, .2)); }

/* three-up dental product cards */
.p3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p3-card { background: var(--bg-2); border-radius: 28px; padding: 0 28px 28px; display: flex; flex-direction: column; overflow: hidden; }
.p3-media { margin: 0 -28px 22px; padding: 36px 0 24px; display: flex; justify-content: center; background: radial-gradient(80% 70% at 50% 85%, color-mix(in srgb, var(--t) 24%, #fff), #eef3fa 75%); }
.p3-media .bimg { width: 58%; filter: drop-shadow(0 22px 22px rgba(10, 20, 60, .2)); transition: transform 1s var(--ease); }
.p3-card:hover .p3-media .bimg { transform: translateY(-6px); }
.p3-card .eyebrow { margin-bottom: 4px; font-size: 13.5px; }
.p3-card h3 { font-size: 22px; }
.p3-lead { margin: 10px 0; color: var(--ink-3); font-size: 14px; }
.p3-lead b { font-size: 30px; font-weight: 700; letter-spacing: -.012em; margin-right: 4px; background: linear-gradient(100deg, var(--azure), var(--royal) 60%, var(--navy)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p3-desc { color: var(--ink-2); font-size: 15.5px; }

/* ---------- index: three direction bands */
.bands { display: grid; gap: 4px; background: #050b24; }
.band { position: relative; display: block; height: clamp(260px, 38vh, 420px); overflow: hidden; color: #fff; isolation: isolate; }
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.6s var(--ease); }
.band:hover .band-img { transform: scale(1.04); }
.band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 11, 36, .8) 0%, rgba(5, 11, 36, .25) 50%, rgba(5, 11, 36, 0) 75%); }
.band-copy { position: absolute; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); bottom: clamp(28px, 5vh, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.band-copy small { font-size: 14px; font-weight: 600; color: var(--on-dark-link); }
.band-copy b { font-size: clamp(30px, 4.2vw, 56px); font-weight: 700; letter-spacing: -.012em; line-height: 1.02; max-width: 13ch; }
.band-copy i { font-style: normal; display: inline-flex; align-items: center; gap: 2px; font-size: 16px; color: rgba(255, 255, 255, .82); margin-top: 6px; }
.band-copy i .ic { width: 16px; height: 16px; stroke-width: 2; transition: transform .25s var(--ease); }
.band:hover .band-copy i .ic { transform: translateX(3px); }
.js .bands .band.reveal { transform: none; }

.statement-foot { margin-top: 32px; font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-3); max-width: 60ch; }
.hero-foot li { align-items: flex-start; }
.hero-foot span strong { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 2px; }
a.dir { display: block; }
a.dir h3 { display: flex; align-items: center; gap: 4px; }
a.dir h3 .ic { width: 18px; height: 18px; color: var(--on-dark-link); transition: transform .25s var(--ease); }
a.dir:hover h3 .ic { transform: translateX(3px); }

/* ---------- table of contents */
.toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; align-items: start; }
.toc-card { background: #fff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.toc-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; color: #fff; }
.toc-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.toc-media:hover .toc-img { transform: scale(1.05); }
.toc-shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(5, 11, 36, .82)); }
.toc-h { position: absolute; left: 24px; right: 24px; bottom: 18px; font-size: 22px; font-weight: 700; letter-spacing: -.007em; line-height: 1.15; }
.toc-list { padding: 8px 12px 14px; }
.toc-list a { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 12px; font-size: 15px; line-height: 1.35; transition: background-color .2s; }
.toc-list a:hover { background: var(--bg-2); }
.toc-n { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.toc-t { font-weight: 500; }
.toc-p { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* carousel with photos */
.ccard--bottle { background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--t) 22%, #fff), #fff 70%); }
.ccard--bottle .bimg { width: 150px; filter: drop-shadow(0 20px 20px rgba(10, 20, 60, .2)); transition: transform 1s var(--ease); }
.ccard--bottle:hover .bimg { transform: translateY(-6px); }
.ccard--photo { background: #050b24; color: #fff; }
.ccard--photo .ccard-kicker { color: rgba(255, 255, 255, .55); }
.ccard--photo .ccard-text { color: var(--on-dark-2); }
.ccard--photo .ccard-visual { margin: auto -32px 0; padding: 0; height: 290px; }
.ccard-photo { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.ccard--photo .ccard-plus { background: #fff; color: var(--ink); }
.section--carousel { background: var(--bg-2); }

/* future triptych */
.future { background: #03061a; color: #fff; padding: clamp(84px, 10vw, 140px) 0 0; overflow: hidden; }
.future .h1 { background: linear-gradient(100deg, #fff 20%, #7cc4ff 60%, #3a6dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.future-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 4px; margin-top: 56px; }
.future-f { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.future-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.future-f:hover .future-img { transform: scale(1.05); }

/* ---------- resins overview: sub-section cards */
.subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.subs--2 { grid-template-columns: 1fr 1fr; }
.sub { display: flex; flex-direction: column; background: #fff; border-radius: 28px; padding: 0 30px 28px; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.sub:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10, 30, 90, .4); }
.sub-vis { margin: 0 -30px 22px; height: 250px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, #f6f8fc, #e7edf6); }
.sub-bottles { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-top: 28px; height: 100%; }
.sub-bottles .bimg { width: auto; height: 88%; filter: drop-shadow(0 16px 16px rgba(10, 20, 60, .2)); transition: transform 1s var(--ease); }
.sub:hover .sub-bottles .bimg:first-child { transform: translateY(-5px) rotate(-2deg); }
.sub:hover .sub-bottles .bimg:last-child { transform: translateY(-5px) rotate(2deg); }
.sub-bottles--3 .bimg { height: 80%; }
.sub-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.sub:hover .sub-photo { transform: scale(1.05); }
.sub-n { font-size: 14px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.sub h3 { font-size: 22px; }
.sub > p:not(.sub-n) { color: var(--ink-2); font-size: 15.5px; margin: 6px 0 16px; }
.sub .link-arrow { margin-top: auto; font-size: 15px; }
.sub--wide .sub-vis { height: 300px; }

/* photos */
.ph { position: relative; border-radius: 28px; overflow: hidden; background: #0a1030; margin: 0; }
.ph-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--light { background: #fff; }
.ph-contain { object-fit: contain; padding: 24px; }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 26px 22px; font-size: 15px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .66)); }
.ph--light figcaption { color: var(--ink-2); background: linear-gradient(transparent, rgba(255, 255, 255, .96) 55%); }
.gallery2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.gallery2 .ph { aspect-ratio: 16 / 11; }
.audio-hero { padding: 0 0 clamp(64px, 8vw, 110px); }
.audio-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ph--tall { aspect-ratio: 1 / 1; }
.wide-photo { padding-bottom: 8px; }
.ph--wide { aspect-ratio: 21 / 9; }

/* ---------- engineering families */
.fams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.fam { position: relative; display: block; aspect-ratio: 4 / 3.2; border-radius: 28px; overflow: hidden; color: #fff; isolation: isolate; }
.fam-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.fam:hover .fam-img { transform: scale(1.05); }
.fam-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 25%, rgba(5, 11, 36, .88)); }
.fam-copy { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.fam-copy small { font-size: 13px; font-weight: 600; color: var(--on-dark-link); }
.fam-copy b { font-size: 22px; font-weight: 700; letter-spacing: -.007em; line-height: 1.15; }
.fam-copy i { font-style: normal; font-size: 14px; color: rgba(255, 255, 255, .74); }
.grade-apps-open { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.grade-apps-open h4 { font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.grade-apps-open p { color: var(--ink-2); font-size: 15px; }
.section--tight .grade:first-child { margin-top: 0; }

/* ---------- PLA / PETG */
.fil-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.fil-picker .h2 { margin-top: 4px; }
.fil-visual { display: flex; justify-content: center; }
.fil-visual .spool-wrap { width: min(100%, 520px); }
.prints { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.print { background: #fff; border-radius: 28px; padding: 32px; display: grid; grid-template-columns: 44% 1fr; gap: 28px; align-items: center; margin: 0; }
.print-img { width: 100%; height: auto; mix-blend-mode: multiply; }
.print figcaption { color: var(--ink-2); font-size: 16px; }
.print figcaption b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.choice-item h3 { font-size: 19px; }

/* ---------- GRAUTS */
.table-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.gcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.gcard { display: flex; flex-direction: column; background: #fff; border-radius: 26px; padding: 22px 24px 24px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.gcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10, 30, 90, .4); }
.gcard-vis { width: 70%; margin: 0 auto 10px; }
.gcard h3 { font-size: 20px; }
.gcard > p:not(.sub-n) { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.gcard-key { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--navy); font-weight: 600; }
.g-top { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; margin-bottom: 56px; }
.g-top .note { margin-top: 0; }
.tds-title { margin-bottom: 24px; }
.apps-block { margin-top: 48px; padding: 36px 40px; border-radius: 28px; background: var(--bg-2); }
.apps-block .lead { color: var(--ink); }

/* ---------- pager */
.pager { border-top: 1px solid var(--line); background: #fff; }
.pager-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; padding-top: 28px; padding-bottom: 28px; }
.pager-a { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 20px; background: var(--bg-2); transition: background-color .2s; }
.pager-a:hover { background: var(--bg-3); }
.pager-a .ic { width: 22px; height: 22px; color: var(--blue); flex: none; transition: transform .25s var(--ease); }
.pager-prev:hover .ic { transform: translateX(-3px); }
.pager-next:hover .ic { transform: translateX(3px); }
.pager-a span { font-size: 17px; font-weight: 600; letter-spacing: -.004em; line-height: 1.25; }
.pager-a small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 2px; }
.pager-next { justify-content: flex-end; text-align: right; grid-column: 3; }
.pager-toc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 18px; font-size: 12.5px; color: var(--ink-3); border-radius: 20px; }
.pager-toc .ic { width: 24px; height: 24px; color: var(--ink-2); }
.pager-toc:hover { color: var(--blue); }

/* ---------- CTA with molecule */
.cta-band { background: linear-gradient(180deg, #f5f9ff 0%, #deedfd 100%); overflow: hidden; }
.cta-band-inner { grid-template-columns: 1.1fr .9fr; }
.cta-band-actions { flex-direction: row; margin-top: 30px; }
.cta-contacts-h { margin-top: 44px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.cta-contacts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }
.cta-contacts a { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.cta-contacts .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #fff; color: var(--blue); }
.cta-contacts a:hover span { color: var(--blue); }
.cta-band-visual { display: flex; justify-content: center; }
.cta-mol { width: 100%; max-width: 520px; mix-blend-mode: multiply; }

/* ---------- footer v2 */
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding: 26px 0 8px; border-top: 1px solid var(--line); }
.footer-top .footer-logo { margin: 0; }
.footer-contacts { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.footer .footer-grid { grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 0; border-top: 0; }
.footer-grid h3 a { color: var(--ink); }

/* ---------- responsive v2 */
@media (max-width: 1180px) {
  .gnav-link { padding: 0 7px; font-size: 12.5px; }
  .gnav-inner { gap: 14px; }
}
@media (max-width: 1100px) {
  .gcards { grid-template-columns: repeat(3, 1fr); }
  .footer .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .fly-inner { grid-template-columns: 1fr 280px; }
}
@media (max-width: 1024px) {
  .lnav--pages .lnav-links a { padding: 11px 0; border-radius: 0; }
  .lnav--pages .lnav-links a[aria-current] { background: none; color: var(--blue); }
  .lnav--pages .lnav-links a[aria-current] small { color: var(--blue); }
}
@media (max-width: 900px) {
  .fly, .fly-scrim, .fly-trigger { display: none !important; }
  .toc { grid-template-columns: 1fr 1fr; }
  .subs, .fams { grid-template-columns: 1fr 1fr; }
  .p3 { grid-template-columns: 1fr; }
  .p3-media .bimg { width: 40%; }
  .gallery2, .audio-hero-grid, .prints, .fil-grid, .g-top { grid-template-columns: 1fr; }
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band-visual { order: -1; }
  .cta-mol { max-width: 340px; }
  .future-grid { grid-template-columns: 1fr 1fr; }
  .future-f:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .ph--wide { aspect-ratio: 16 / 9; }
  .g-spool { max-width: 220px; }
}
@media (max-width: 640px) {
  .divider { min-height: 76svh; }
  .divider-copy { padding-bottom: 86px; }
  .sec-head-inner { grid-template-columns: 1fr; }
  .sec-num { font-size: 84px; }
  .toc, .subs, .subs--2, .fams { grid-template-columns: 1fr; }
  .gcards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gcard { padding: 16px; border-radius: 22px; }
  .gcard h3 { font-size: 17px; }
  .gcard-key { display: none; }
  .stage { border-radius: 26px; padding-top: 40px; }
  .stage-b { width: 40vw; }
  .stage--3 .stage-b { width: 28vw; }
  .band { height: 240px; }
  .band-shade { background: linear-gradient(0deg, rgba(5, 11, 36, .82), rgba(5, 11, 36, .1) 70%); }
  .pager-inner { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pager-toc { display: none; }
  .pager-next { grid-column: 2; }
  .pager-a { padding: 14px; gap: 8px; }
  .pager-a span { font-size: 14px; }
  .print { grid-template-columns: 1fr; padding: 24px; }
  .print-img { max-width: 220px; margin: 0 auto; }
  .apps-block { padding: 24px 20px; }
  .footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band-actions .btn { width: 100%; }
  .ph--tall { aspect-ratio: 4 / 3.4; }
  .lu { width: 16vw; }
  .product-media .bimg { width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .divider-img { transform: none !important; }
  .js .stage .stage-b { opacity: 1; transform: none; }
}
html.static .stage .stage-b { opacity: 1 !important; transform: none !important; transition: none !important; }
html.static .divider-img { transform: none; }

/* ---------- v2 fixes: direction cards, masonry contents, even triptych */
.bands { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.band { height: auto; aspect-ratio: 3 / 4; max-height: 88vh; }
.band-shade { background: linear-gradient(180deg, rgba(5, 11, 36, 0) 40%, rgba(5, 11, 36, .85) 100%); }
.band-copy { left: 32px; right: 32px; bottom: 32px; }
.band-copy b { font-size: clamp(26px, 2.6vw, 40px); }
.toc { display: block; columns: 3; column-gap: 20px; }
.toc-card { break-inside: avoid; margin-bottom: 20px; }
.future-f { aspect-ratio: auto; height: clamp(220px, 28vw, 420px); }
.cta-mol { mix-blend-mode: normal; filter: drop-shadow(0 30px 40px rgba(10, 60, 160, .18)); }
@media (max-width: 900px) {
  .bands { grid-template-columns: 1fr; }
  .band { aspect-ratio: 16 / 10; }
  .toc { columns: 2; }
  .future-f { height: 46vw; }
}
@media (max-width: 640px) {
  .toc { columns: 1; }
}
.section--flush { padding: 0 0 clamp(72px, 9vw, 120px); }
.section--flush .products { margin-top: 0; }
.p3-card { padding-top: 0; }
.p3-bar { display: block; height: 6px; margin: 0 -28px 26px; background: var(--t); }
.stage-wrap + .section--tight { padding-top: 28px; }
.fly { background: #0a0e26; }
.h-display--long { font-size: clamp(38px, 5.4vw, 76px); }
/* mobile menu lives outside the blurred header (backdrop-filter would trap position:fixed) */
.gmenu { z-index: 69; top: 52px; padding-bottom: max(40px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.gnav--sticky + .gmenu { top: 52px; }
.gmenu { background: #080c22; }

/* =====================================================================
   v3 — typography from the printed catalogue (Myriad Pro → Fira Sans)
   bold black titles · dark-blue numbers & product names ·
   cyan semibold subtitles · UPPERCASE labels · "Применение:" inline
   ===================================================================== */
:root {
  --ink: #0b0d14;
  --ink-2: #30343f;
  --ink-3: #676d7c;
  --cat-blue: #0d4f9f;
  --cat-cyan: #1596c9;
  --cat-cyan-ink: #0a7fb3;
}
body { font-size: 17px; line-height: 1.5; letter-spacing: 0; font-feature-settings: "kern", "liga"; }
.h-display, .h1, .h2, h3 { font-weight: 700; }
.lead { font-weight: 400; }

/* labels: catalogue running header / «ГЛАВНАЯ ИДЕЯ» */
.eyebrow { text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--cat-blue); }
.eyebrow--light, .eyebrow .eyebrow--light, .sh--light .eyebrow { color: var(--on-dark-link); }

/* section heads: big blue number, black bold title, cyan subtitle */
.sec-num { font-weight: 700; letter-spacing: -.01em; background: linear-gradient(180deg, #1766b8 0%, var(--cat-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-sub { color: var(--cat-cyan); font-weight: 600; }
.stat-num, .product-lead b, .p3-lead b { background: linear-gradient(180deg, #1766b8, var(--cat-blue)); -webkit-background-clip: text; background-clip: text; }

/* product kicker (БАЗИСЫ ПРОТЕЗОВ) + blue product name (AddiNova Dental Base) */
.product-body .eyebrow, .p3-card .eyebrow, .card .eyebrow { color: var(--cat-cyan-ink); font-size: 12.5px; }
.card--glass .eyebrow { color: var(--on-dark-link); }
.product-body .h2, .p3-card h3, article.card h3, .grade .h2, .gcard h3 { color: var(--cat-blue); }
.card--glass h3 { color: #fff !important; }

/* «Применение:» — cyan bold, inline, as in the catalogue */
.product-apps span, .card-apps span, .gpanel-apps span { display: inline; font-size: inherit; font-weight: 700; color: var(--cat-cyan-ink); margin: 0; }
.product-apps span::after, .card-apps span::after, .gpanel-apps span::after { content: ": "; }
.card--glass .card-apps span { color: var(--on-dark-link); }

/* КЛЮЧЕВЫЕ ДАННЫЕ / ПРИМЕНЕНИЕ ПО ТЕХНИЧЕСКОМУ ПАСПОРТУ */
.spec-title, .grade-apps-open h4, .apps-block .eyebrow { text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--cat-cyan-ink); }
.spec dt { color: var(--ink); font-weight: 700; }
.spec dd { font-weight: 400; }

/* КЛЮЧЕВЫЕ ОСОБЕННОСТИ — dark-blue caps with the blue side bar */
.note h3, .note h4 { text-transform: uppercase; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--cat-blue); }
.note { border-left-color: var(--cat-blue); }
.note--light h3 { color: var(--on-dark-link); }

/* tables: blue caps on light-blue header */
.table thead th { background: #e3eff9; color: var(--cat-blue); font-weight: 700; letter-spacing: .04em; }
.grade-specs .table thead th { background: #e3eff9; }
.table--spec th, .table--tds tbody th { color: var(--ink); }
.table--tds td:nth-child(3) { color: var(--ink-3); }

/* step and format names in caps (ИССЛЕДОВАНИЕ, ГОТОВЫЙ МАТЕРИАЛ) */
.step h3, .format h3, .flow li { text-transform: uppercase; letter-spacing: .03em; }
.step h3 { font-size: 16px; }
.format h3 { font-size: 18px; }
.formats--light .format h3 { color: var(--cat-blue); }

/* quiet details */
.lnav-title, .toc-h, .fam-copy b, .band-copy b { font-weight: 700; }
.pager-a small, .toc-p, .sub-n, .p3-lead, .product-lead span { letter-spacing: 0; }
.sub-n, .toc-n { color: var(--cat-blue); }
.spec-title, .grade-apps-open h4, .apps-block .eyebrow { font-size: 14px; }
.product-body .eyebrow, .p3-card .eyebrow, .card .eyebrow { font-size: 13.5px; }

/* =====================================================================
   v4 — «Шесть шагов»: calm glass cards; subgrid keeps rows aligned
   ===================================================================== */
.step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.step-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 30px 30px 24px; scroll-margin-top: 90px; transition: opacity .9s var(--ease), transform 1.1s var(--ease), border-color .3s; }
.step-card:hover { border-color: rgba(255, 255, 255, .2); }
.step-card-n { font-size: 40px; font-weight: 700; line-height: 1; margin-bottom: 22px; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #bfe3ff, #5cb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; }
.step-card h3 { margin: 0 0 10px; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.step-card-text { margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-2); }
.step-card .card-apps { align-self: end; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-dark); }
.step-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 48px; }
.step-links span { font-size: 15px; color: var(--on-dark-2); }
@media (max-width: 900px) { .step-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .step-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; } .step-card { padding: 24px 22px 20px; } .step-links { gap: 10px 20px; } .step-links span { width: 100%; } }
.step-card .card-apps { align-self: start; }

/* «Шесть шагов» — entrance + steps light up one after another (01 → 06) */
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span { display: block; }
.js .reveal .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .reveal .ln + .ln > span { transition-delay: .12s; }
.js .reveal.is-in .ln > span { transform: none; }

.step-card { position: relative; overflow: hidden; }
.js .step-card.reveal { opacity: 0; transform: translate3d(0, 56px, 0) scale(.96); filter: blur(10px);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease), border-color .3s; transition-delay: calc(var(--d) * 150ms); }
.js .step-card.reveal.is-in { opacity: 1; transform: none; filter: none; }
.step-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--azure), #7cc4ff); opacity: .8; transform-origin: left; }
.js .step-card::before { transform: scaleX(0); }
.js .step-card-n { opacity: .22; }
@keyframes stepBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stepLit {
  0%   { opacity: .22; filter: drop-shadow(0 0 0 rgba(92, 182, 255, 0)); }
  45%  { opacity: 1;   filter: drop-shadow(0 0 16px rgba(92, 182, 255, .9)); }
  100% { opacity: 1;   filter: drop-shadow(0 0 0 rgba(92, 182, 255, 0)); }
}
.js .step-card.lit::before { animation: stepBar .55s cubic-bezier(.4, 0, .2, 1) both; }
.js .step-card.lit .step-card-n { animation: stepLit 1s var(--ease) .25s both; }
@media (max-width: 640px) { .step-card { --d: 0 !important; } }
@media (prefers-reduced-motion: reduce) {
  .js .step-card.reveal { filter: none; transform: none; }
  .js .reveal .ln > span { transform: none; transition: none; }
  .js .step-card::before, .js .step-card-n { animation: none !important; transform: none; opacity: 1; }
}
html.static .step-card.reveal { filter: none !important; }
html.static .reveal .ln > span { transform: none !important; }
html.static .step-card::before { animation: none !important; transform: none !important; }
html.static .step-card-n { animation: none !important; opacity: 1 !important; }
.logo-mark { width: 34px; height: 34px; }

/* =====================================================================
   v5 — group heroes like the catalogue divider pages, colours, partnership
   ===================================================================== */
.gh { position: relative; overflow: hidden; color: #fff; padding: clamp(56px, 7vw, 104px) 0;
  background: radial-gradient(900px 620px at 85% 30%, #16358f 0%, rgba(22, 53, 143, 0) 70%), radial-gradient(700px 500px at 0% 100%, rgba(45, 188, 225, .10), transparent 70%), var(--night); }
.gh-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.gh-title { font-size: clamp(40px, 5.2vw, 76px); }
.gh .lead { color: var(--on-dark-2); max-width: 540px; margin-top: 22px; }
.gh-toc { margin-top: 40px; max-width: 560px; border-top: 1px solid var(--line-dark); }
.gh-toc a { display: grid; grid-template-columns: 48px 1fr 18px; gap: 8px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 17px; font-weight: 500; color: #e9eeff; transition: color .2s; }
.gh-toc a span { font-size: 14px; font-weight: 700; color: var(--on-dark-link); font-variant-numeric: tabular-nums; }
.gh-toc a .ic { width: 16px; height: 16px; align-self: center; color: var(--on-dark-2); transition: transform .25s var(--ease), color .2s; }
.gh-toc a:hover { color: #fff; }
.gh-toc a:hover .ic { transform: translateX(3px); color: var(--on-dark-link); }
.gh-go { margin-top: 36px; }
.gh-poster { margin: 0; justify-self: end; width: min(100%, 500px); aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; display: grid; gap: 4px; background: #03061a;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.gh-poster--3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.gh-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 1.6s var(--ease); }
.gh-poster:hover .gh-img { transform: scale(1.03); }
.js .gh-poster.reveal { transform: translate3d(0, 40px, 0) scale(.97); }
.js .gh-poster.reveal.is-in { transform: none; }
@media (max-width: 900px) {
  .gh-inner { grid-template-columns: 1fr; }
  .gh-poster { justify-self: stretch; width: 100%; max-width: 520px; aspect-ratio: 4 / 5; }
  .gh-poster--3 { aspect-ratio: 4 / 5; }
}

/* PLA / PETG colours */
.colors { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: center; padding: 44px 48px; border-radius: 28px; background: var(--bg-2); }
.colors-head .h2 { margin-top: 2px; }
.colors-row + .colors-row { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.colors-mat { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--cat-blue); margin-bottom: 14px; }
.colors-row ul { display: flex; flex-wrap: wrap; gap: 18px 22px; }
.colors-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; font-size: 13px; color: var(--ink-2); text-align: center; }
.sw { width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 78%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 6px 14px -8px rgba(10, 20, 60, .5); transition: transform .3s var(--ease); }
.colors-row li:hover .sw { transform: translateY(-3px) scale(1.06); }
.prints { gap: 20px; }
.print { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
.print-img { width: 100%; height: 360px; object-fit: contain; padding: 36px; mix-blend-mode: normal; background: radial-gradient(70% 70% at 50% 55%, #ffffff, #eef3fa); }
.print figcaption { padding: 26px 32px 30px; }
.vs-col p { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.vs-col h3 { margin-top: 0; }
@media (max-width: 900px) { .colors { grid-template-columns: 1fr; padding: 32px 26px; } }
@media (max-width: 640px) { .print-img { height: 260px; padding: 24px; } .colors-row li { width: 56px; } .print { padding: 0; } }

/* GRAUTS overview: 7 photo cards (4 + 3) */
.fams--7 { grid-template-columns: repeat(12, 1fr); }
.fams--7 .fam { grid-column: span 3; aspect-ratio: 4 / 3.4; }
.fams--7 .fam:nth-child(n+5) { grid-column: span 4; aspect-ratio: 16 / 10; }
@media (max-width: 900px) { .fams--7 { grid-template-columns: 1fr 1fr; } .fams--7 .fam, .fams--7 .fam:nth-child(n+5) { grid-column: auto; aspect-ratio: 4 / 3.4; } }
@media (max-width: 640px) { .fams--7 { grid-template-columns: 1fr; } }
.stats--4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; margin-bottom: 40px; }
.g-stats .stat-num { font-size: clamp(36px, 4vw, 56px); }
@media (max-width: 900px) { .stats--4 { grid-template-columns: 1fr 1fr; } }

/* partnership: three formats as editorial columns */
.fmt { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.fmt-item { padding: 36px 40px 8px 0; }
.fmt-item + .fmt-item { padding-left: 40px; border-left: 1px solid var(--line); }
.fmt-n { display: block; font-size: 52px; font-weight: 700; line-height: 1; background: linear-gradient(180deg, #1766b8, var(--cat-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.fmt-item h3 { margin: 22px 0 10px; font-size: 24px; color: var(--ink); }
.fmt-item p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .fmt { grid-template-columns: 1fr; } .fmt-item, .fmt-item + .fmt-item { padding: 28px 0; border-left: 0; } .fmt-item + .fmt-item { border-top: 1px solid var(--line); } }

/* partnership: who we work with, as a clean list */
.clients-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 80px; align-items: start; }
.clients-head { position: sticky; top: 110px; }
.clients-list { border-top: 1px solid var(--line); }
.clients-list li { display: grid; grid-template-columns: 220px 1fr; gap: 6px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.clients-list b { font-size: 20px; font-weight: 700; color: var(--ink); }
.clients-list span { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .clients-grid { grid-template-columns: 1fr; } .clients-head { position: static; } }
@media (max-width: 640px) { .clients-list li { grid-template-columns: 1fr; padding: 20px 0; } }
.page-partner .divider-img { object-position: center 64%; }

/* no catalogue section numbers */
.sec-head-inner { grid-template-columns: 1fr; }
.sec-head-copy { padding-top: 0; }
.toc-list a { grid-template-columns: 1fr 18px; }
.toc-list a .ic { width: 16px; height: 16px; color: var(--ink-3); align-self: center; transition: transform .25s var(--ease), color .2s; }
.toc-list a:hover .ic { transform: translateX(3px); color: var(--blue); }
.fly-list a { gap: 0; }


/* =====================================================================
   Intro video — once per session, before the site
   ===================================================================== */
.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 1000; background: #ececec; cursor: pointer;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
  animation: introFailsafe .01s linear 16s forwards;           /* if scripts never run, still let people in */
}
html.intro-portrait .intro { background: #ededed; }
.intro-v { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .9s var(--ease); }
html.intro-portrait .intro-v { object-fit: contain; }
.intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro.is-out .intro-v { transform: scale(1.06); filter: blur(6px); }
.intro-skip {
  position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  padding: 10px 18px; border-radius: 980px; font-size: 14px; font-weight: 600; color: #0a1030;
  background: rgba(10, 16, 48, .07); border: 1px solid rgba(10, 16, 48, .1);
  opacity: 0; animation: introSkipIn .6s var(--ease) 1.2s forwards; transition: background-color .2s;
}
.intro-skip:hover { background: rgba(10, 16, 48, .13); }
@keyframes introSkipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 640px) { .intro-skip { right: 50%; transform: translateX(50%); animation-name: introSkipInC; } }
@keyframes introSkipInC { from { opacity: 0; transform: translate(50%, 6px); } to { opacity: 1; transform: translateX(50%); } }

/* intro controls: sound (left) + skip (right) */
.intro-bar { position: absolute; left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; pointer-events: none; z-index: 20; }
.intro-bar button { pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.intro-bar .intro-skip { position: static; margin-left: auto; transform: none; animation: introSkipIn .6s var(--ease) 1.2s forwards; min-height: 44px; padding: 11px 22px; display: inline-flex; align-items: center; justify-content: center; }
.intro-sound { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 148px; padding: 12px 22px 12px 18px; border-radius: 980px; font-size: 14px; font-weight: 600; color: #fff;
  background: #0a66d6; box-shadow: 0 8px 22px -10px rgba(10, 102, 214, .8); transition: background-color .2s, transform .12s var(--ease); animation: introSkipIn .5s var(--ease) both; position: relative; z-index: 30; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.intro-sound::before { content: ''; position: absolute; inset: -14px -16px; cursor: pointer; }
.intro-sound[hidden] { display: none; }
.intro-sound:hover { background: #0853b0; }
.intro-sound:active { transform: scale(.96); }
.intro-sound .ic { width: 18px; height: 18px; stroke-width: 2; }
.intro-sound .ic-on { display: none; }
.intro-sound.is-on { color: #0a1030; background: rgba(10, 16, 48, .07); box-shadow: none; border: 1px solid rgba(10, 16, 48, .1); }
.intro-sound.is-on .ic-on { display: block; }
.intro-sound.is-on .ic-off { display: none; }
.intro-sound:not(.is-on)::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(10, 102, 214, .45); animation: introPulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes introPulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
html.intro-on .intro { cursor: default; }
@media (max-width: 640px) { .intro-bar { left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); } .intro-bar .intro-skip { right: auto; } }
/* phone intro: bars exactly the colour of the video edges + soft blend, no visible seam */
html.intro-portrait .intro { background: linear-gradient(180deg, #f1f2f2 0%, #f0f1f1 100%); }
html.intro-portrait .intro-v { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
html.intro-land .intro { background: linear-gradient(180deg, #d9d7d8 0%, #f0f1f1 100%); }

/* while the intro video plays the page is not rendered, so its images do not compete with the video */
html.intro-hold main, html.intro-hold .footer, html.intro-hold .cta-band, html.intro-hold .pager { display: none; }

/* comfortable tap areas for text links on touch screens (no visual change) */
@media (pointer: coarse) {
  .link-arrow, .lnav-title { padding-block: 9px; margin-block: -9px; }
  .table tbody th a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .gh-toc a, .toc-list a { min-height: 44px; }
}
.table--vs td, .table--vs th { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }

/* =====================================================================
   v6 — header of eight sections, resin categories, about / blog / contacts
   ===================================================================== */
.gnav-links { gap: 0; }
.gnav-link { padding: 0 10px; white-space: nowrap; }
@media (max-width: 1280px) { .gnav-link { padding: 0 7px; font-size: 12.5px; } .fly-trigger { margin-left: -7px; } }
@media (max-width: 1100px) {
  .gnav-links { display: none; }
  .gnav-burger { display: block; margin-left: auto; }
}

/* resins flyout: three category columns */
.fly-inner--cols { grid-template-columns: 1fr 300px; }
.fly-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.fly-col { opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .45s var(--ease); }
.has-fly.is-open .fly-col { opacity: 1; transform: none; transition-delay: .06s; }
.fly-cat { display: block; padding: 4px 0 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 19px; font-weight: 700; letter-spacing: -.005em; line-height: 1.25; color: #fff; }
.fly-cat:hover { color: var(--on-dark-link); }
.fly-col li a { display: block; padding: 6px 0; font-size: 15px; line-height: 1.35; color: rgba(238, 242, 255, .78); transition: color .2s; }
.fly-col li a:hover { color: #fff; }

/* mobile menu: plain links + nested resin categories */
.gmenu .gm-link { display: block; padding: 16px 0; font-size: 21px; font-weight: 600; letter-spacing: -.005em; border-bottom: 1px solid var(--line-dark);
  opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 40ms + 60ms); }
.gmenu.is-open .gm-link { opacity: 1; transform: none; }
.gmenu .gm-group ul a b { font-weight: 600; color: #fff; }
.gmenu .gm-group .gm-sub a { padding-top: 14px; }
.gmenu .gm-group .gm-subitem a { padding: 6px 0 6px 16px; font-size: 15px; color: rgba(255, 255, 255, .66); border-left: 1px solid rgba(255, 255, 255, .14); }

/* index: four direction cards, two-column contents, four hero figures */
.bands--4 { grid-template-columns: repeat(4, 1fr); }
.bands--4 .band { aspect-ratio: 3 / 4.2; }
.bands--4 .band-copy { left: 26px; right: 20px; bottom: 28px; }
.bands--4 .band-copy b { font-size: clamp(24px, 2.1vw, 34px); }
.toc--4 { columns: 2; }
.hero-foot--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.about-more { margin-top: 22px; }
@media (max-width: 1100px) {
  .bands--4 { grid-template-columns: 1fr 1fr; }
  .bands--4 .band { aspect-ratio: 4 / 3.3; }
  .hero-foot--4 { grid-template-columns: 1fr 1fr; row-gap: 0; }
}
@media (max-width: 640px) {
  .bands--4 { grid-template-columns: 1fr; }
  .bands--4 .band { aspect-ratio: 16 / 11; }
  .toc--4 { columns: 1; }
  .hero-foot--4 { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .hero-foot--4 li { flex-direction: column; gap: 8px; padding: 14px 0 12px; }
  .hero-foot--4 b { font-size: 28px; }
  .hero-foot--4 span { font-size: 12.5px; }
  .hero-foot--4 span strong { font-size: 14px; }
}

/* resins: three category cards, engineering lineup */
.subs--cats .sub-vis { height: 270px; }
.lineup--6 .lu5 { --s: .72; }

/* footer: five columns */
.footer-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 28px; }
@media (max-width: 1024px) { .footer-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .footer-grid--5 { grid-template-columns: 1fr 1fr; } }

/* filaments: growing range */
.note--grow { max-width: 860px; }
.note--grow p + p { margin-top: 12px; }

/* GRAUTS: industries */
.future-grid--wrap { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.future-grid--wrap .future-f { border-radius: 22px; height: clamp(220px, 24vw, 360px); }
.future-f figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 22px 18px; font-size: 19px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(3, 6, 26, .78)); }
@media (max-width: 900px) { .future-grid--wrap { grid-template-columns: 1fr; } .future-grid--wrap .future-f { height: 56vw; } }

/* contacts */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { display: flex; flex-direction: column; gap: 4px; padding: 28px; border-radius: 24px; background: var(--bg-2); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(10, 30, 90, .45); }
.contact-card .ic { width: 26px; height: 26px; color: var(--blue); margin-bottom: 18px; }
.contact-card small { font-size: 13px; color: var(--ink-3); }
.contact-card b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.005em; overflow-wrap: anywhere; }
@media (max-width: 900px) { .contact-cards { grid-template-columns: 1fr; gap: 12px; } .contact-card { padding: 22px 24px; } .contact-card .ic { margin-bottom: 10px; } }

/* blog */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.posts--2 { grid-template-columns: 1fr 1fr; margin-top: 48px; }
.post { display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.section--alt .post { box-shadow: none; }
.post:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10, 30, 90, .4); }
.post-media { aspect-ratio: 16 / 10; overflow: hidden; background: #050b24; }
.post-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.post:hover .post-img { transform: scale(1.04); }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; flex: 1; }
.post-kicker { font-size: 13px; font-weight: 600; color: var(--blue); }
.post h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.007em; }
.post-body > p:not(.post-kicker):not(.post-meta) { color: var(--ink-2); font-size: 15.5px; }
.post-meta { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 1024px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .posts, .posts--2 { grid-template-columns: 1fr; } }

.wrap--article { max-width: calc(760px + var(--gutter) * 2); }
.art-head { padding: clamp(96px, 11vw, 150px) 0 clamp(28px, 4vw, 44px); }
.art-head .eyebrow a { color: inherit; }
.art-head .eyebrow a:hover { text-decoration: underline; text-underline-offset: 2px; }
.art-head .post-meta { margin-top: 16px; font-size: 14px; }
.art-hero { border-radius: 26px; overflow: hidden; }
.article { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(72px, 9vw, 110px); }
.article > p, .article li { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.article > p + p { margin-top: 16px; }
.article .art-lead { font-size: clamp(20px, 1.8vw, 23px); line-height: 1.5; color: var(--ink); }
.article h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.01em; margin: 48px 0 14px; }
.article ul, .article ol { margin-top: 14px; padding-left: 0; display: grid; gap: 8px; list-style: none; }
.article ul li { position: relative; padding-left: 22px; }
.article ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.article ol { counter-reset: n; }
.article ol li { position: relative; padding-left: 36px; counter-increment: n; }
.article ol li::before { content: counter(n); position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--blue); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.article b { color: var(--ink); font-weight: 600; }
.article .table-wrap { margin-top: 20px; }
.art-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .article > p, .article li { font-size: 17px; } .art-hero { border-radius: 18px; } }

.dirs--4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 1100px) { .dirs--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .dirs--4 { grid-template-columns: 1fr; } }
.art-head .eyebrow a { display: inline-block; padding: 10px 6px 10px 0; margin: -10px 0; }
.fly-list--1 ul { columns: 1; }

/* =====================================================================
   v7 — gallery: bento grid by material direction + lightbox
   ===================================================================== */
.gal-sec { padding: clamp(64px, 8vw, 112px) 0; scroll-margin-top: 108px; }
.gal-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; margin-bottom: 36px; }
.gal-head .eyebrow { margin-bottom: 8px; }
.gal-head .lead { max-width: 640px; margin-top: 14px; }
.gal-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 52px 0 18px; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.005em; }
.gal-head + .gal-sub { margin-top: 8px; }
.gal-sub a { display: inline-flex; align-items: center; gap: 2px; }
.gal-sub a .ic { width: 18px; height: 18px; color: var(--blue); transition: transform .25s var(--ease); }
.gal-sub a:hover .ic { transform: translateX(3px); }
.gal-sub span { font-size: 14px; font-weight: 500; color: var(--ink-3); }

.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 220px); grid-auto-flow: dense; gap: 12px; }
.gal-grid--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(240px, 30vw, 420px); }
.gi { position: relative; display: block; overflow: hidden; border-radius: 20px; background: #0b1030; isolation: isolate; }
.gi--w { grid-column: span 2; }
.gi--t, .gi--b { grid-row: span 2; }
.gal-grid--2 .gi { grid-column: auto; grid-row: auto; }
.gi img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gi:hover img { transform: scale(1.04); }
.gi--b { background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--t) 24%, #fff), #f5f7fb 72%); }
.section--alt .gi--b { background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--t) 24%, #fff), #fff 72%); }
.gi--b img { object-fit: contain; padding: 24px 18px 64px; filter: drop-shadow(0 18px 18px rgba(10, 20, 60, .2)); }
.gi--b:hover img { transform: translateY(-6px); }
.gi--c { background: linear-gradient(180deg, #f6f8fc, #e6ecf5); }
.section--alt .gi--c { background: linear-gradient(180deg, #fff, #edf1f8); }
.gi--c img { object-fit: contain; padding: 22px 22px 56px; }
.gi-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: 13.5px; line-height: 1.3; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(3, 6, 26, .74)); }
.gi--b .gi-cap, .gi--c .gi-cap { color: var(--ink); background: none; padding-top: 0; font-weight: 600; }
.gi:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 900px) {
  .gal-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 30vw; gap: 10px; }
  .gal-grid--2 { grid-auto-rows: 46vw; }
}
@media (max-width: 640px) {
  .gal-grid { grid-auto-rows: 42vw; gap: 8px; }
  .gal-grid--2 { grid-auto-rows: 52vw; }
  .gi { border-radius: 16px; }
  .gi-cap { padding: 28px 10px 10px; font-size: 12px; }
  .gi--b img { padding: 16px 10px 58px; }
  .gi--c img { padding: 14px 14px 46px; }
  .gal-head { margin-bottom: 24px; }
  .gal-sub { margin-top: 40px; }
}

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(3, 6, 20, .96); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px max(16px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); }
.lb-count { font-size: 14px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.lb-close, .lb-nav { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .2s; }
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .2); }
.lb-close { width: 44px; height: 44px; }
.lb-close .ic { width: 18px; height: 18px; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 84px; touch-action: pan-y; }
.lb-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; transition: opacity .25s, transform .35s var(--ease); }
.lb-img.is-loading { opacity: 0; transform: scale(.985); }
.lb.is-light .lb-img { background: radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, var(--t, #9ab) 24%, #fff), #f5f7fb 72%); padding: 4vh 5vw; border-radius: 22px; }
.lb-nav { position: absolute; top: 50%; width: 52px; height: 52px; transform: translateY(-50%); }
.lb-nav .ic { width: 22px; height: 22px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-foot { padding: 16px 20px max(22px, env(safe-area-inset-bottom)); text-align: center; }
.lb-cap { font-size: 17px; font-weight: 600; max-width: 760px; margin: 0 auto; }
.lb-more { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; font-size: 15px; color: var(--on-dark-link); }
.lb-more .ic { width: 16px; height: 16px; }
html.lb-lock, html.lb-lock body { overflow: hidden; }
@media (max-width: 640px) {
  .lb-stage { padding: 0 8px; }
  .lb-nav { width: 40px; height: 40px; background: rgba(3, 6, 20, .45); }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .lb-cap { font-size: 15px; }
  .lb.is-light .lb-img { padding: 3vh 8vw; }
}
@media (max-width: 1140px) { .gnav-links { display: none; } .gnav-burger { display: block; margin-left: auto; } }
.gi--x { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { .gal-grid:not(.gal-grid--2) .gi--c:not(.gi--x) { grid-row: span 2; } }
.gal-head .link-arrow, .gal-sub a { padding: 9px 0; margin: -9px 0; }

.future-grid--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .future-grid--wrap { grid-template-columns: minmax(0, 1fr); } }
.gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.future-grid--wrap .future-f:first-child { aspect-ratio: auto; grid-column: auto; }

/* hero: catalogue molecule renders instead of the canvas drawing */
.mol-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mol { position: absolute; height: auto; user-select: none; will-change: transform; }
.mol--main { right: max(-2vw, calc((100vw - 1280px) / 2 - 40px)); top: 50%; width: min(46vw, 640px); margin-top: calc(min(46vw, 640px) * -.42); filter: drop-shadow(0 30px 60px rgba(5, 40, 160, .5)); animation: molFloat 16s ease-in-out infinite; }
.mol--far1 { right: 2%; top: 4%; width: min(20vw, 260px); opacity: .55; animation: molFloat2 22s ease-in-out infinite; }
.mol--far2 { right: 34%; bottom: 3%; width: min(18vw, 230px); opacity: .45; animation: molFloat2 26s ease-in-out -9s infinite reverse; }
@keyframes molFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(-10px, -18px, 0) rotate(3deg); } }
@keyframes molFloat2 { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(14px, 12px, 0) rotate(-6deg); } }
@media (max-width: 900px) {
  .mol--main { right: -22vw; top: 8%; margin-top: 0; width: 86vw; opacity: .5; }
  .mol--far1 { right: 4%; top: auto; bottom: 24%; width: 30vw; opacity: .4; }
  .mol--far2 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mol { animation: none; } }
html.static .mol { animation: none; }
.mol--far2 { right: 41%; bottom: 20%; width: min(15vw, 190px); opacity: .3; }
@media (max-width: 900px) {
  .mol--main { right: -28vw; top: 3%; width: 82vw; opacity: .3; }
  .mol--far1 { opacity: .28; bottom: 30%; }
}
/* pager: long titles must wrap, not widen the page */
.pager-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pager-a span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 900px) { .pager-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* very narrow phones: long Russian words in headings */
@media (max-width: 380px) { .h1, .h-display { overflow-wrap: break-word; hyphens: auto; } .sh .h1, .sec-head .h1 { font-size: clamp(25px, 8vw, 30px); } }

/* =====================================================================
   v8 — life: motion that only touches transform / opacity
   ===================================================================== */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #1596c9, #0a6cff 60%, #7cc4ff); pointer-events: none; }

/* ticker under the hero */
.ticker { overflow: hidden; background: #050b24; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 16px 0; }
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; will-change: transform; }
.ticker-row { display: flex; flex: none; }
.ticker-row span { flex: none; display: inline-flex; align-items: center; font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: .01em; color: rgba(190, 215, 255, .72); white-space: nowrap; }
.ticker-row span::after { content: ""; width: 6px; height: 6px; margin: 0 clamp(22px, 3vw, 40px); border-radius: 50%; background: linear-gradient(135deg, #5cb6ff, #0a6cff); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translate3d(-50%, 0, 0); } }

/* hero glow breathes; molecule layer eases to the pointer */
.hero-home-glow { animation: glowBreath 9s ease-in-out infinite; }
@keyframes glowBreath { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.mol-art { will-change: transform; }

/* eyebrow gets a drawn accent line */
.js .sh .eyebrow.reveal::before, .js .sec-head .eyebrow.reveal::before, .js .gal-head .eyebrow.reveal::before {
  content: ""; display: inline-block; vertical-align: middle; width: 0; height: 2px; margin: -2px 10px 0 0; border-radius: 2px; background: currentColor; opacity: .55; transition: width .9s var(--ease) .25s; }
.js .sh .eyebrow.reveal.is-in::before, .js .sec-head .eyebrow.reveal.is-in::before, .js .gal-head .eyebrow.reveal.is-in::before { width: 26px; }
.sh--center .eyebrow::before { margin-left: 0; }

/* bottles float gently once the lineup / stage has appeared */
.lineup.is-in .lu .bimg { animation: bob 7s ease-in-out infinite; }
.lineup.is-in .lu1 .bimg, .lineup.is-in .lu5 .bimg { animation-delay: -1.4s; }
.lineup.is-in .lu2 .bimg, .lineup.is-in .lu4 .bimg { animation-delay: -2.8s; }
.lineup.is-in .lu3 .bimg { animation-delay: -4.2s; animation-duration: 8s; }
.stage.is-in .stage-b .bimg { animation: bob 8s ease-in-out infinite; animation-delay: calc(var(--i) * -2.2s); }
@keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } }

/* primary buttons: light sweep on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg) translate3d(0, 0, 0); opacity: 0; }
.btn:hover::after { opacity: 1; transform: skewX(-18deg) translate3d(430%, 0, 0); transition: transform .9s var(--ease), opacity .2s; }
.btn:active { transform: scale(.98); }

/* cards react to the pointer */
.toc-card, .ccard, .fam, .sub, .contact-card, .post, .fact, .stat { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
@media (hover: hover) {
  .toc-card:hover, .fam:hover, .fact:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 34px 60px -38px rgba(10, 30, 90, .45); }
  .ccard:hover { transform: translate3d(0, -6px, 0); }
  .stat:hover .stat-num { color: var(--blue); }
}

/* header links: underline slides in */
@media (hover: hover) and (min-width: 1141px) {
  .gnav-link { position: relative; }
  .gnav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 11px; height: 1.5px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
  .gnav-link:hover::after, .gnav-link[aria-current]::after { transform: scaleX(1); }
}

/* slow breathing zoom on direction cards and gallery photos while hovered is already there; heroes drift */
.band-img { animation: drift 28s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.2%, -1%, 0); } }
.band:hover .band-img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .hero-home-glow, .lineup .lu .bimg, .stage .stage-b .bimg, .band-img { animation: none !important; }
  .progress { display: none; }
}
html.static .ticker-track, html.static .hero-home-glow, html.static .band-img, html.static .lineup .lu .bimg, html.static .stage-b .bimg { animation: none !important; }
html.intro-hold .ticker { display: none; }
@media print { .ticker, .progress { display: none !important; } }

/* heading levels: card/note titles under the page h1 are h2 now - same look as the former h3 */
.card h2, .p3-card h2, .note h2 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; }
.p3-card h2 { font-size: 22px; }
.card--note h2 { color: #fff; margin-bottom: 4px; }
.note h2 { text-transform: uppercase; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--cat-blue); margin-bottom: 6px; }
.note--light h2 { color: var(--on-dark-link); }
.p3-card h2, article.card h2 { color: var(--cat-blue); }
.card--glass h2 { color: #fff !important; }

/* spec sub-titles are h3 now - keep the former h4 look */
h3.spec-title, .grade-apps-open h3 { line-height: inherit; letter-spacing: .04em; }
.grade-apps-open h3 { font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 4px; text-transform: uppercase; color: var(--cat-cyan-ink); font-weight: 700; }
h3.spec-title { font-size: 14px; }
.grade-apps-open h3 { font-size: 14px; }
.p3-card h3.spec-title, article.card h3.spec-title, .product-body h3.spec-title { color: var(--cat-cyan-ink); font-size: 14px; line-height: inherit; }

/* =====================================================================
   v9 — language switcher (RU / EN / UZ) in the header
   ===================================================================== */
.lang-sw { display: flex; flex: none; gap: 2px; margin-left: 14px; padding: 3px; border-radius: 980px; background: rgba(255, 255, 255, .1); }
.lang-sw a { padding: 3px 9px; border-radius: 980px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.5; color: rgba(255, 255, 255, .72); transition: background-color .2s, color .2s; }
.lang-sw a:hover { color: #fff; }
.lang-sw a[aria-current] { background: #fff; color: var(--ink); }
@media (max-width: 1140px) { .lang-sw { margin-left: auto; } .lang-sw + .gnav-burger { margin-left: 8px; } }
@media (pointer: coarse) { .lang-sw a { padding: 9px 11px; } }
.gnav-logo { flex: none; }
/* Uzbek labels are longer: use the burger menu a bit earlier */
@media (max-width: 1260px) {
  html[lang="uz"] .gnav-links { display: none; }
  html[lang="uz"] .gnav-burger { display: block; }
  html[lang="uz"] .lang-sw { margin-left: auto; }
  html[lang="uz"] .lang-sw + .gnav-burger { margin-left: 8px; }
}
@media (max-width: 380px) {
  .gnav-inner { gap: 6px; }
  .logo-rule { display: none; }
  .logo { gap: 8px; }
  .logo-word { width: 86px; }
  .lang-sw { margin-left: auto; padding: 2px; }
  .lang-sw a { padding: 9px 7px; font-size: 11px; letter-spacing: 0; }
  .lang-sw + .gnav-burger, html[lang="uz"] .lang-sw + .gnav-burger { margin-left: 2px; margin-right: -10px; }
}


/* =====================================================================
   v10 — TDS Document Lightbox & Product Action Buttons
   ===================================================================== */
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.p3-card .product-actions { margin-top: auto; padding-top: 18px; }

.btn--tds {
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--royal));
  color: #fff !important;
  border: none;
  font-family: inherit;
  box-shadow: 0 8px 20px -6px rgba(10, 102, 214, .45);
}
.btn--tds:hover {
  background: linear-gradient(135deg, var(--blue-h), #0c57c2);
  box-shadow: 0 12px 24px -4px rgba(10, 102, 214, .6);
}
.btn--tds .ic { width: 19px; height: 19px; flex: none; }
.btn--tds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 980px;
  background: rgba(255, 255, 255, .2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* Lightbox Modal */
.tds-lb {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility 0s .28s;
}
.tds-lb.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s var(--ease);
}
.tds-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 22, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tds-lb-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 960px);
  height: 90vh;
  max-height: 880px;
  background: #0c1427;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(.96) translateY(12px);
  transition: transform .3s var(--ease);
}
.tds-lb.is-open .tds-lb-dialog {
  transform: scale(1) translateY(0);
}

.tds-lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(15, 23, 42, .95);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.tds-lb-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tds-lb-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(39, 179, 201, .15);
  color: var(--t, #27b3c9);
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  flex: none;
}
.tds-lb-icon .ic { width: 20px; height: 20px; }
.tds-lb-title-wrap { min-width: 0; }
.tds-lb-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tds-lb-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tds-lb-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 12px;
  flex: none;
}
.tds-lb-tab {
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.tds-lb-tab:hover { color: #fff; }
.tds-lb-tab.is-active {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.tds-lb-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.tds-lb-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color .2s, transform .12s;
}
.tds-lb-dl:hover { background: var(--blue-h); }
.tds-lb-dl:active { transform: scale(.96); }
.tds-lb-dl .ic { width: 16px; height: 16px; }

.tds-lb-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s, transform .12s;
}
.tds-lb-close:hover { background: rgba(255, 255, 255, .2); }
.tds-lb-close:active { transform: scale(.92); }
.tds-lb-close .ic { width: 18px; height: 18px; }

.tds-lb-body {
  flex: 1;
  background: #070d1e;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 20px;
  display: flex;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
}
.tds-lb-stage {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.tds-lb-sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .08);
}
.tds-lb-sheet[hidden] { display: none !important; }

.tds-lb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(15, 23, 42, .85);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}
.tds-lb-foot kbd {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .8);
  font-family: inherit;
  font-size: 11px;
}

@media (max-width: 768px) {
  .tds-lb { padding: 0; }
  .tds-lb-dialog { border-radius: 0; height: 100vh; max-height: 100vh; border: none; }
  .tds-lb-head { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .tds-lb-meta { width: 100%; }
  .tds-lb-tabs { order: 3; width: 100%; justify-content: center; }
  .tds-lb-acts { order: 2; margin-left: auto; }
  .tds-lb-body { padding: 14px 10px; }
  .tds-lb-foot { display: none; }
}