:root {
      --orange: #F47B20;
      --navy: #082F49;
      --water: #1598D4;
      --ice: #ECF8FF;
      --white: #FFFFFF;
      --ink-soft: oklch(0.36 0.05 242);
      --line: oklch(0.85 0.035 230);
      --shadow: 0 20px 45px oklch(0.19 0.05 242 / .16);
      --font: "Manrope", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; min-width: 320px; color: var(--navy); background: var(--white); font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.6; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
    .shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
    .eyebrow { margin: 0 0 15px; color: var(--orange); font-size: .75rem; font-weight: 600; letter-spacing: .075em; line-height: 1.3; text-transform: uppercase; }
    .button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 23px; overflow: hidden; border: 1px solid transparent; border-radius: 999px; font-size: .94rem; font-weight: 600; transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; cursor: pointer; isolation: isolate; }
    .button > span { position: relative; z-index: 1; }
    .button.primary::after { content: ""; position: absolute; inset: -40% auto -40% -35%; width: 34%; background: linear-gradient(90deg, transparent, oklch(1 0 0 / .46), transparent); transform: translateX(-185%) skewX(-20deg); transition: transform .45s ease; pointer-events: none; }
    .button.primary:hover::after { transform: translateX(480%) skewX(-20deg); }
    .button:hover { transform: translateY(-2px); box-shadow: 0 9px 18px oklch(0.19 0.05 242 / .2); }
    .button:active { transform: translateY(0) scale(.98); }
    .button.primary { background: var(--orange); color: var(--navy); }
    .button.primary:hover { background: oklch(0.7 0.17 53); }
    .button.secondary { border-color: var(--white); color: var(--white); background: transparent; }
    .button.secondary:hover { color: var(--navy); background: var(--white); }
    .button.dark { background: var(--navy); color: var(--white); }
    .button.dark:hover { background: oklch(0.29 0.055 242); }
    .topbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; color: var(--white); }
    .nav { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 24px; }
    .brand { display: flex; align-items: baseline; gap: 7px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.045em; }
    .brand b { color: var(--orange); }
    .brand small { font-size: .65rem; font-weight: 600; letter-spacing: .035em; line-height: 1; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: 25px; font-size: .94rem; font-weight: 500; }
    .nav-links > a:not(.button) { position: relative; }
    .nav-links > a:not(.button)::after { content: ""; position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .22s ease; }
    .nav-links > a:not(.button):hover::after { transform: scaleX(1); transform-origin: left; }
    .nav-cta { min-height: 42px; padding: 0 17px; font-size: .88rem; }
    .menu { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid oklch(1 0 0 / .35); border-radius: 50%; color: var(--white); background: transparent; font-size: 1.2rem; }
    .hero { position: relative; overflow: hidden; min-height: max(680px, 100vh); min-height: max(680px, 100svh); padding: 0; color: var(--white); background: var(--navy); isolation: isolate; }
    .hero::before { content: ""; position: absolute; inset: 0; z-index: -4; background: linear-gradient(90deg, oklch(0.2 0.06 242 / .95) 0%, oklch(0.2 0.06 242 / .74) 48%, oklch(0.2 0.06 242 / .42) 100%), url("../img/hero.png") center / cover; }
    .hero::after { content: ""; position: absolute; z-index: -1; left: -8%; right: -8%; bottom: -83px; height: 165px; background: var(--white); border-radius: 50% 50% 0 0 / 45% 45% 0 0; transform: rotate(-1.5deg); }
    .water-plane { position: absolute; z-index: -2; right: -6%; bottom: -34px; left: -6%; height: 235px; background: linear-gradient(180deg, oklch(0.77 0.1 224 / .06), oklch(0.59 0.13 225 / .35) 42%, oklch(0.37 0.08 240 / .5)); border-radius: 52% 48% 0 0 / 20% 22% 0 0; box-shadow: inset 0 18px 28px oklch(0.9 0.06 220 / .18), 0 -16px 30px oklch(0.62 0.12 225 / .14); pointer-events: none; }
    .water-plane::before { content: ""; position: absolute; inset: 12px 8% auto; height: 35px; border-top: 1px solid oklch(0.95 0.03 220 / .55); border-radius: 50%; box-shadow: 0 13px 0 -1px oklch(0.8 0.08 220 / .18), 0 27px 0 -1px oklch(0.8 0.08 220 / .12); }
    .water-caustics { position: absolute; z-index: -1; width: 76%; height: 57%; right: -16%; bottom: 0; overflow: visible; opacity: .58; pointer-events: none; }
    .water-caustics path { fill: none; stroke: oklch(0.9 0.05 220 / .58); stroke-width: 2; }
    .water-caustics .soft { stroke: oklch(0.65 0.12 220 / .44); stroke-width: 8; filter: blur(4px); }
    .hero.is-active .water-caustics { animation: drift-caustics 9s ease-in-out infinite alternate; }
    .hero .shell { display: grid; min-height: max(680px, 100vh); min-height: max(680px, 100svh); align-content: center; justify-items: center; padding: 144px 0 108px; text-align: center; }
    .hero-copy { max-width: 800px; }
    .hero .eyebrow { color: var(--orange); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 720px; margin: 0 auto 20px; font-size: clamp(3.15rem, 6.6vw, 5.85rem); font-weight: 700; line-height: 1.02; letter-spacing: -.048em; }
    h1 span { display: block; }
    .lead { max-width: 590px; margin: 0 auto; font-size: clamp(1rem, 1.55vw, 1.125rem); font-weight: 400; line-height: 1.6; }
    .hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
    .hero-mark { width: min(570px, 70%); height: 48px; margin-top: 42px; background: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 18px, oklch(0.77 0.1 224 / .24) 19px 21px, transparent 22px 40px); opacity: .7; }
    .products { position: relative; overflow: hidden; padding: 80px 0 94px; background: var(--white); }
    .products::after { content: ""; position: absolute; width: 255px; height: 255px; top: 30px; right: 11%; border: 1px solid oklch(0.68 0.11 220 / .28); border-radius: 50%; box-shadow: 0 0 0 22px oklch(0.75 0.08 220 / .08), 0 0 0 53px oklch(0.75 0.08 220 / .045); pointer-events: none; }
    .products-head { display: grid; grid-template-columns: 1fr minmax(270px, 420px); gap: 48px; align-items: end; }
    h2 { margin-bottom: 0; font-size: clamp(2.1rem, 4.2vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; }
    .products-head p:last-child { margin-bottom: 3px; color: var(--ink-soft); line-height: 1.7; }
    .catalog-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 39px; padding: 27px 31px; border-top: 2px solid var(--water); background: var(--ice); font-weight: 600; transition: background .22s ease, box-shadow .22s ease, transform .22s ease; }
    .catalog-link:hover { background: oklch(0.94 0.025 230); box-shadow: 0 12px 24px oklch(0.19 0.05 242 / .1); transform: translateY(-2px); }
    .catalog-link:active { transform: scale(.99); }
    .catalog-link span:first-child { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.035em; }
    .catalog-link span:last-child { color: var(--water); white-space: nowrap; }
    .about { overflow: hidden; padding: 100px 0; background: var(--ice); }
    .about-grid { display: grid; grid-template-columns: .94fr 1.16fr; gap: 64px; align-items: center; }
    .about-copy { max-width: 430px; padding-left: 8%; }
    .about-copy p:last-child { margin: 25px 0 0; color: var(--ink-soft); line-height: 1.75; }
    .photo-composition { position: relative; min-height: 525px; }
    .photo { position: absolute; display: block; object-fit: cover; box-shadow: var(--shadow); }
    .photo.front { width: 76%; height: 302px; top: 0; right: 0; object-position: center; }
    .photo.van { width: 49%; height: 247px; bottom: 0; left: 0; object-position: 30% center; }
    .photo.stock { width: 46%; height: 220px; right: 2%; bottom: 30px; object-position: center; }
    .photo-caption { position: absolute; z-index: 1; left: 18px; bottom: 16px; padding: 8px 11px; color: var(--white); background: var(--navy); font-size: .7rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
    .conditions { position: relative; overflow: hidden; padding: 88px 0; color: var(--navy); background: var(--orange); }
    .conditions::after { content: ""; position: absolute; width: 420px; height: 230px; right: -80px; top: -102px; background: radial-gradient(ellipse at center, oklch(0.95 0.07 66 / .3), transparent 58%); border: 1px solid oklch(0.95 0.07 66 / .42); border-radius: 50%; box-shadow: 0 18px 0 -8px oklch(0.95 0.07 66 / .13), 0 35px 0 -16px oklch(0.95 0.07 66 / .08); pointer-events: none; }
    .conditions-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr auto; gap: 48px; align-items: center; }
    .conditions .eyebrow { color: var(--navy); }
    .conditions h2 { max-width: 730px; }
    .conditions p:last-child { max-width: 650px; margin: 19px 0 0; font-size: 1.05rem; line-height: 1.65; font-weight: 400; }
    .contact { padding: 94px 0 68px; background: var(--white); }
    .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
    .contact-copy p:last-child { margin: 24px 0 0; color: var(--ink-soft); line-height: 1.7; }
    .address { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .address strong, .address span { display: block; }
    .address strong { margin-bottom: 9px; font-size: 1rem; font-weight: 600; }
    .address span { color: var(--ink-soft); line-height: 1.6; }
    .route { display: inline-flex; margin-top: 21px; color: var(--water); font-size: .9rem; font-weight: 600; }
    .route { transition: color .22s ease, transform .22s ease; }
    .route:hover { color: var(--navy); transform: translateX(3px); }
    footer { padding: 27px 0; color: oklch(0.84 0.03 230); background: var(--navy); }
    .footer-inner { display: flex; justify-content: space-between; gap: 24px; font-size: .78rem; }
    .footer-inner strong { color: var(--white); font-weight: 600; }
    .neoeffex-credit { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    .notice { display: none; position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: 330px; padding: 16px 19px; color: var(--white); background: var(--navy); box-shadow: var(--shadow); font-size: .88rem; line-height: 1.5; }
    .notice.show { display: block; }
    section[id] { scroll-margin-top: 24px; }
    .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .58s cubic-bezier(.22, 1, .36, 1), transform .58s cubic-bezier(.22, 1, .36, 1); }
    .js .reveal.photo-reveal { transform: translateY(18px) scale(.98); }
    .js .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
    .delay-1 { transition-delay: .08s; }
    .delay-2 { transition-delay: .16s; }
    @keyframes drift-caustics { from { transform: translate3d(-10px, 6px, 0) scale(1); opacity: .48; } to { transform: translate3d(16px, -8px, 0) scale(1.04); opacity: .7; } }
    @media (max-width: 760px) {
      .shell { width: min(100% - 36px, 560px); }
      .nav { min-height: 70px; }
      .nav-links { position: absolute; top: 70px; left: 18px; right: 18px; display: none; align-items: stretch; gap: 0; padding: 12px 17px; background: var(--navy); box-shadow: var(--shadow); }
      .nav-links.open { display: grid; }
      .nav-links a { padding: 12px 0; }
      .nav-links .nav-cta { margin: 7px 0 4px; }
      .menu { display: grid; place-items: center; }
      .hero { min-height: max(600px, 90vh); min-height: max(600px, 90svh); }
      .hero .shell { min-height: max(600px, 90vh); min-height: max(600px, 90svh); padding: 108px 0 80px; }
      .hero::before { background: linear-gradient(0deg, oklch(0.2 0.06 242 / .93), oklch(0.2 0.06 242 / .52)), url("../img/hero.png") 58% center / cover; }
      .water-plane { right: -26%; bottom: -34px; left: -26%; height: 210px; }
      .water-caustics { width: 130%; height: 48%; right: -44%; opacity: .6; }
      h1 { font-size: clamp(2.85rem, 13vw, 4.1rem); line-height: 1.04; }
      .hero-actions { flex-direction: column; width: min(100%, 330px); margin-left: auto; margin-right: auto; }
      .hero-mark { width: 78%; height: 34px; margin-top: 31px; }
      .products, .about, .conditions, .contact { padding: 68px 0; }
      .products-head, .about-grid, .conditions-grid, .contact-grid { grid-template-columns: 1fr; gap: 29px; }
      .catalog-link { margin-top: 35px; padding: 23px 21px; }
      .about-copy { padding-left: 0; }
      .photo-composition { min-height: 440px; }
      .photo.front { width: 88%; height: 242px; }
      .photo.van { width: 56%; height: 204px; }
      .photo.stock { width: 46%; height: 165px; right: 0; bottom: 25px; }
      .conditions .button { width: 100%; }
      .footer-inner { display: grid; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } }

/* ==========================================================
   Neoeffex motion layer — additive, preserves Open Design UI
   ========================================================== */
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 260ms;
  --motion-medium: 680ms;
  --motion-slow: 1200ms;
  --hero-parallax-y: 0px;
}

body { overflow-x: clip; }

.topbar {
  transform: translateY(0);
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.topbar.is-scrolled {
  position: fixed;
  background: oklch(0.2 0.06 242 / .82);
  box-shadow: 0 10px 34px oklch(0.12 0.03 242 / .2);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.js .topbar .brand,
.js .topbar .nav-links > a,
.js .topbar .menu {
  opacity: 0;
  transform: translateY(-12px);
  animation: header-enter .72s var(--ease-out-expo) forwards;
}
.js .topbar .nav-links > a:nth-child(1) { animation-delay: .08s; }
.js .topbar .nav-links > a:nth-child(2) { animation-delay: .12s; }
.js .topbar .nav-links > a:nth-child(3) { animation-delay: .16s; }
.js .topbar .nav-links > a:nth-child(4) { animation-delay: .2s; }

.hero::before {
  transform: translate3d(0, var(--hero-parallax-y), 0) scale(1.035);
  will-change: transform;
  transition: transform .16s linear;
}
.hero.is-active::before { animation: hero-breathe 15s ease-in-out infinite alternate; }

.hero-copy .eyebrow,
.hero-copy h1 span,
.hero-copy .lead,
.hero-actions .button,
.hero-mark {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-enter .9s var(--ease-out-expo) forwards;
}
.hero-copy .eyebrow { animation-delay: .13s; }
.hero-copy h1 span:first-child { animation-delay: .2s; }
.hero-copy h1 span:last-child { animation-delay: .28s; }
.hero-copy .lead { animation-delay: .38s; }
.hero-actions .button:first-child { animation-delay: .48s; }
.hero-actions .button:last-child { animation-delay: .56s; }
.hero-mark { animation-delay: .66s; }

.water-plane { transform-origin: 50% 100%; }
.hero.is-active .water-plane { animation: water-plane-drift 8s ease-in-out infinite alternate; }
.hero.is-active .hero-mark { animation: hero-enter .9s var(--ease-out-expo) .66s forwards, ripple-breathe 5.8s ease-in-out 1.7s infinite; }

.products::after { animation: orbit-pulse 8s ease-in-out infinite alternate; }
.catalog-link span:last-child { transition: transform .3s var(--ease-out-expo); }
.catalog-link:hover span:last-child { transform: translateX(7px); }

.photo-composition { perspective: 900px; }
.photo {
  will-change: transform;
  transition: transform .75s var(--ease-out-expo), box-shadow .75s var(--ease-out-expo), filter .4s ease;
}
.photo-composition:hover .photo.front { transform: translate3d(0,-7px,18px) rotate(.15deg); }
.photo-composition:hover .photo.van { transform: translate3d(-5px,5px,28px) rotate(-.35deg); }
.photo-composition:hover .photo.stock { transform: translate3d(6px,4px,38px) rotate(.3deg); }
.photo-composition:hover .photo { box-shadow: 0 28px 54px oklch(0.19 0.05 242 / .2); }
.photo-caption { animation: caption-float 4.8s ease-in-out infinite alternate; }

.conditions::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 90px;
  left: -70px;
  bottom: -28px;
  border: 1px solid oklch(0.95 0.07 66 / .28);
  border-radius: 50%;
  box-shadow: 0 0 0 18px oklch(0.95 0.07 66 / .08), 0 0 0 42px oklch(0.95 0.07 66 / .04);
  pointer-events: none;
  animation: condition-wave 7s ease-in-out infinite alternate;
}
.conditions::after { animation: condition-orbit 9s ease-in-out infinite alternate; }

.address { position: relative; overflow: hidden; }
.address::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--water), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.address.is-visible::before { opacity: 1; animation: address-scan 2.4s var(--ease-out-expo) .25s 1; }

.notice {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .25s ease, transform .35s var(--ease-out-expo), visibility .35s;
}
.notice.show { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }

.js .reveal {
  transform: translateY(28px);
  transition-duration: .76s;
  transition-timing-function: var(--ease-out-expo);
}
.js .reveal.reveal-left { transform: translateX(-28px); }
.js .reveal.reveal-right { transform: translateX(28px); }
.js .reveal.reveal-scale { transform: translateY(12px) scale(.965); }
.js .reveal.is-visible { transform: translate3d(0,0,0) scale(1); }

@keyframes header-enter { to { opacity: 1; transform: translateY(0); } }
@keyframes hero-enter { to { opacity: 1; transform: translateY(0); } }
@keyframes hero-breathe {
  from { transform: translate3d(0, var(--hero-parallax-y), 0) scale(1.035); }
  to { transform: translate3d(0, calc(var(--hero-parallax-y) - 7px), 0) scale(1.07); }
}
@keyframes water-plane-drift {
  from { transform: translate3d(-1.2%, 2px, 0) scaleX(1.01) rotate(-.12deg); }
  to { transform: translate3d(1.2%, -3px, 0) scaleX(1.025) rotate(.12deg); }
}
@keyframes ripple-breathe {
  0%,100% { opacity: .62; transform: translateY(0) scaleX(.98); }
  50% { opacity: .86; transform: translateY(-3px) scaleX(1.035); }
}
@keyframes orbit-pulse {
  from { transform: translate3d(0,0,0) scale(.97); opacity: .74; }
  to { transform: translate3d(-12px,12px,0) scale(1.04); opacity: 1; }
}
@keyframes caption-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes condition-wave { from { transform: translateX(-12px) scale(.96); } to { transform: translateX(18px) scale(1.05); } }
@keyframes condition-orbit { from { transform: translate3d(0,0,0) rotate(-2deg); } to { transform: translate3d(-18px,13px,0) rotate(2deg); } }
@keyframes address-scan { from { transform: translateX(0); } to { transform: translateX(650%); } }

@media (max-width: 760px) {
  .topbar.is-scrolled .nav { min-height: 64px; }
  .photo-composition:hover .photo.front,
  .photo-composition:hover .photo.van,
  .photo-composition:hover .photo.stock { transform: none; }
  .hero::before { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand,
  .topbar .nav-links > a,
  .topbar .menu,
  .hero-copy .eyebrow,
  .hero-copy h1 span,
  .hero-copy .lead,
  .hero-actions .button,
  .hero-mark {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero::before,
  .water-plane,
  .products::after,
  .conditions::before,
  .conditions::after,
  .photo-caption { animation: none !important; transform: none !important; }
}