/* =========================================================
   VERF.MOSCOW — Premium electric vessel landing
   Design tokens + global
========================================================= */
:root{
  --bg-0:#071948;
  --bg-1:#0a2058;
  --bg-2:#0d2a67;
  --bg-3:#143a7a;
  --surface:rgba(15,45,103,0.58);
  --line:rgba(134,184,255,0.16);
  --line-strong:rgba(156,202,255,0.32);
  --text:#edf6ff;
  --text-dim:#c9dbf4;
  --text-mute:#7fa4d5;
  --accent:#17b7ff;
  --accent-2:#78d9ff;
  --accent-glow:rgba(23,183,255,0.42);
  --silver:#d3e3f8;

  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
  --radius-pill:999px;

  --container:1560px;
  --pad-x:clamp(20px, 3vw, 48px);

  --h1:clamp(44px, 9vw, 148px);
  --h2:clamp(32px, 5.5vw, 84px);
  --h3:clamp(22px, 2.6vw, 34px);
  --lead:clamp(15px, 1.15vw, 18px);
  --body:clamp(14px, 1vw, 16px);
  --small:12px;
}
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
html{
  background:var(--bg-0);
  color:var(--text);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  font-family:'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight:300;
  font-size:var(--body);
  line-height:1.55;
  background:
    radial-gradient(circle at 68% 18%, rgba(28,108,255,0.2), transparent 32vw),
    linear-gradient(180deg, #081a49 0%, #0a2058 48%, #06163f 100%);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:0.01em;
}

img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font:inherit; color:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--pad-x);
}

.mono{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--text-mute);
}
.small{ font-size:var(--small); }

.h2{
  font-size:var(--h2);
  font-weight:200;
  line-height:0.98;
  letter-spacing:-0.02em;
  margin:0 0 0.4em;
}
.h2 em{
  font-style:normal;
  font-weight:300;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  color:var(--text-dim);
  font-size:var(--lead);
  max-width:60ch;
  font-weight:300;
  line-height:1.55;
}

.tag-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  display:inline-block;
  box-shadow:0 0 10px var(--accent-glow);
}

/* =========================================================
   Custom cursor (desktop only)
========================================================= */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:opacity 300ms var(--ease);
  opacity:0;
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px;height:6px;border-radius:50%;background:#fff;
  transition:transform 200ms var(--ease), opacity 300ms var(--ease);
}
.cursor-ring{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.4);
  transition:transform 500ms var(--ease), opacity 300ms var(--ease), width 300ms var(--ease), height 300ms var(--ease);
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{ opacity:1; }
body.cursor-hover .cursor-ring{ width:56px; height:56px; border-color:var(--accent); }
body.cursor-hover .cursor-dot{ transform:translate(-50%,-50%) scale(0); }
@media (hover:none),(max-width:1024px){ .cursor-dot,.cursor-ring{ display:none; } }

/* =========================================================
   Preloader
========================================================= */
.preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg-0);
  display:grid;place-items:center;
  transition:opacity 800ms var(--ease), visibility 800ms var(--ease);
}
.preloader.is-done{
  opacity:0;visibility:hidden;pointer-events:none;
}
.preloader__inner{
  width:min(420px, 80vw);
  display:flex;flex-direction:column;gap:28px;
  text-align:left;
}
.preloader__brand{
  font-size:clamp(28px, 4vw, 40px);
  letter-spacing:0.25em;
  font-weight:200;
  color:var(--text);
}
.preloader__bar{
  height:1px;
  background:rgba(255,255,255,0.1);
  overflow:hidden;
  position:relative;
}
.preloader__fill{
  position:absolute;inset:0;width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width 200ms linear;
}
.preloader__meta{
  display:flex;justify-content:space-between;align-items:center;
}

/* =========================================================
   Header
========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background 400ms var(--ease), border-color 400ms var(--ease), backdrop-filter 400ms var(--ease);
  border-bottom:1px solid transparent;
  background:rgba(7,25,72,0.56);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
}
.header.is-scrolled{
  background:rgba(7,25,72,0.68);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--line);
}
.header__inner{
  height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header__logo{
  display:flex;align-items:center;gap:10px;
  font-weight:400;letter-spacing:0.25em;font-size:13px;
  color:var(--text);
}
.header__logo img{
  width:143px;
  height:40px;
  object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,10,40,0.42));
}
.header__logo svg{ color:var(--accent); }
.header__nav{
  display:flex;gap:28px;align-items:center;
}
.nav-link{
  font-size:13px;font-weight:400;color:var(--text-dim);
  position:relative;padding:8px 2px;
  transition:color 300ms var(--ease);
  letter-spacing:0.02em;
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--accent);
  transition:width 400ms var(--ease);
}
.nav-link:hover{ color:var(--text); }
.nav-link:hover::after{ width:100%; }

.header__cta{ min-height:40px; padding:10px 18px; font-size:12px; }

.burger{
  display:none;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);
  position:relative;
}
.burger span{
  position:absolute;left:12px;right:12px;height:1px;background:var(--text);
  transition:transform 400ms var(--ease), top 400ms var(--ease), opacity 300ms var(--ease);
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:24px; }
.burger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ top:21px; transform:rotate(-45deg); }

@media (max-width:1023px){
  .header__nav, .header__cta{ display:none; }
  .burger{ display:block; }
}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:rgba(7,25,72,0.97);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  padding:120px var(--pad-x) 48px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;
  transition:opacity 500ms var(--ease), visibility 500ms var(--ease);
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu__nav{ display:flex;flex-direction:column;gap:18px; }
.mobile-menu__link{
  font-size:clamp(28px,7vw,44px);font-weight:200;letter-spacing:-0.01em;
  border-bottom:1px solid var(--line);padding-bottom:14px;
  display:flex;gap:20px;align-items:baseline;
  opacity:0;transform:translateY(20px);
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
.mobile-menu.is-open .mobile-menu__link{
  opacity:1;transform:none;
  transition-delay:calc(var(--i, 0) * 60ms + 200ms);
}
.mobile-menu__link .mono{ color:var(--accent); }
.mobile-menu__footer{ display:flex;flex-direction:column;gap:16px; }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;min-height:44px;
  border-radius:var(--radius-pill);
  font-size:13px;font-weight:500;letter-spacing:0.02em;
  border:1px solid var(--line);
  color:var(--text);
  background:transparent;
  transition:transform 500ms var(--ease), background 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease), box-shadow 500ms var(--ease);
  position:relative;overflow:hidden;
  cursor:pointer;
  white-space:nowrap;
}
.btn svg{ transition:transform 400ms var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--primary{
  background:var(--text);
  color:var(--bg-0);
  border-color:var(--text);
}
.btn--primary:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#071020;
  box-shadow:0 10px 40px -12px var(--accent-glow);
}
.btn--ghost{
  background:transparent;border-color:var(--line-strong);
}
.btn--ghost:hover{
  border-color:var(--text);
  background:rgba(255,255,255,0.03);
}
.btn--accent{
  background:var(--accent);color:#071020;border-color:var(--accent);
}
.btn--pill{ border-radius:var(--radius-pill); }
.btn--full{ width:100%; justify-content:space-between; }

/* =========================================================
   Sections
========================================================= */
.section{
  padding:clamp(80px, 11vw, 160px) 0;
  position:relative;
}
.section.intro {
  padding-top: clamp(48px, 6vw, 80px);
}
.section-head{
  display:flex;align-items:center;gap:20px;
  margin-bottom:clamp(40px, 5vw, 72px);
}
.section-head__num{ flex-shrink:0; color:var(--accent); }
.section-head__line{
  flex:1;height:1px;background:var(--line);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  padding-top:0;padding-bottom:0;
  display:flex;align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 42%, rgba(23,183,255,0.18), transparent 26vw),
    linear-gradient(180deg, #071948 0%, #0b2158 58%, #06163e 100%);
}
.hero__inner{ position:relative; }
.hero__bg{ position:absolute;inset:0;z-index:0; pointer-events:none; }
.hero__glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120vw;height:120vw;max-width:1400px;max-height:1400px;
  background:radial-gradient(circle at center, rgba(23,183,255,0.2), transparent 56%);
  filter:blur(20px);
  opacity:0.7;
  animation:heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:0.6; }
  100%{ transform:translate(-50%,-55%) scale(1.1); opacity:0.9; }
}
.hero__grid{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(120,217,255,0.055) 1px, transparent 1px) 0 0/ 76px 76px,
    linear-gradient(90deg, rgba(120,217,255,0.055) 1px, transparent 1px) 0 0/ 76px 76px;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.hero__inner{
  position:relative;z-index:2;
  width:100%;
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "meta"
    "title"
    "sub"
    "actions";
  gap:clamp(16px, 2.5vw, 28px);
  align-content:start;
  padding-top: clamp(120px, 14vh, 160px);
  padding-bottom: clamp(24px, 4vw, 48px);
}
.hero__inner > .hero__visual{ grid-area:unset; }
.hero__meta,.hero__title,.hero__sub,.hero__actions{ position:relative; z-index:3; }
.hero__meta{
  grid-area:meta;
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(12px);
  animation:fadeUp 900ms var(--ease) 800ms forwards;
}
.hero__title{
  grid-area:title;
  font-size:var(--h1);
  font-weight:200;
  line-height:0.92;
  letter-spacing:-0.035em;
  margin:0;
  max-width:14ch;
}
.hero__title .word{
  display:inline-block;
  overflow:hidden;
  padding-right:0.15em;
}
.hero__title .word em{
  font-style:normal;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:300;
}
.hero__title .word > *{
  display:inline-block;
  transform:translateY(110%);
  animation:wordIn 1100ms var(--ease) forwards;
}
.hero__title .word:nth-child(1) > *{ animation-delay:1000ms; }
.hero__title .word:nth-child(2) > *{ animation-delay:1150ms; }
.hero__title .word:nth-child(3) > *{ animation-delay:1300ms; }
@keyframes wordIn{ to{ transform:translateY(0); } }

.hero__sub{
  grid-area:sub;
  color:var(--text-dim);
  font-size:var(--lead);
  max-width:44ch;
  margin:0;
  opacity:0;transform:translateY(12px);
  animation:fadeUp 900ms var(--ease) 1400ms forwards;
}

.hero__visual{
  grid-area:visual;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw; height:100%;
  margin:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;transform:translateX(-50%) scale(1.02);
  animation:heroRise 1800ms var(--ease) 600ms forwards;
}
@keyframes heroRise{ to{ opacity:1; transform:translateX(-50%) scale(1); } }

.hero__boat{
  position:absolute;
  inset:-32px;
  display:block;
  filter:drop-shadow(0 40px 100px rgba(0,8,30,0.78)) drop-shadow(0 0 90px rgba(23,183,255,0.14));
  transform:translate3d(var(--hero-mx, 0px), var(--hero-my, 0px), 0);
  transition:transform 220ms var(--ease);
  will-change:transform;
}
@keyframes boatFloat{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-14px); }
}
.hero__boat svg{ width:100%; height:100%; }
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  transform:scale(1.08);
  object-fit:cover;
  object-position:58% center;
  filter:saturate(1.12) contrast(1.04) brightness(0.9) hue-rotate(3deg);
  animation:heroZoom 22s ease-out forwards;
}

@media (max-width: 1023px){
  .hero__boat{
    inset:-12px -26px -26px -26px;
  }
  .hero__img{
    transform:scale(1.03);
    object-position:64% 46%;
    filter:saturate(1.08) contrast(1.03) brightness(0.88);
  }
  .hero__visual::after{
    background:
      linear-gradient(180deg, rgba(7,25,72,0.76) 0%, rgba(7,25,72,0.38) 34%, rgba(7,25,72,0.78) 100%),
      linear-gradient(90deg, rgba(7,25,72,0.88) 0%, rgba(7,25,72,0.24) 45%, rgba(7,25,72,0.82) 100%);
  }
}

@media (max-width: 640px){
  .hero__boat{
    inset:8px -50px -18px -46px;
  }
  .hero__img{
    transform:scale(1);
    object-position:70% 48%;
  }
}
@keyframes heroZoom{
  0%{ transform:scale(1.1); }
  100%{ transform:scale(1.06); }
}

/* Gradient overlay for readability */
.hero__visual::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,25,72,0.96) 0%, rgba(7,25,72,0.76) 34%, rgba(7,25,72,0.24) 70%, rgba(7,25,72,0.44) 100%),
    radial-gradient(ellipse at 64% 48%, transparent 26%, rgba(5,18,52,0.46) 76%, rgba(5,18,52,0.86) 100%),
    linear-gradient(180deg, rgba(7,25,72,0.48) 0%, transparent 26%, transparent 62%, rgba(6,18,52,0.82) 100%);
  z-index:1;
  pointer-events:none;
}
/* Badges must sit above the overlay */
.hero__visual .hero__badge { z-index: 5; }

.hero__label{
  position:absolute;
  display:flex;align-items:center;gap:8px;
  color:var(--text-mute);
  opacity:0;
  z-index:3;
  animation:fadeUp 900ms var(--ease) 1800ms forwards;
  pointer-events:none;
}
.hero__label .dash{ width:24px;height:1px;background:var(--line-strong); }
.hero__label--tl{ top:90px; left:var(--pad-x); }
.hero__label--tr{ top:90px; right:var(--pad-x); }
.hero__label--bl{ bottom:28px; left:var(--pad-x); }
.hero__label--br{ bottom:28px; right:var(--pad-x); }
@media (max-width:640px){
  .hero__label--tr,.hero__label--br{ display:none; }
}

.hero__actions{
  grid-area:actions;
  display:flex;flex-wrap:wrap;gap:14px;
  opacity:0;transform:translateY(12px);
  animation:fadeUp 900ms var(--ease) 1600ms forwards;
}
.hero__scroll{
  position:absolute;
  bottom: clamp(20px, 3vw, 36px);
  left: var(--pad-x);
  display:flex;align-items:center;gap:12px;
  opacity:0;
  animation:fadeUp 900ms var(--ease) 2000ms forwards;
  z-index: 3;
}
.hero__scroll-line{
  display:block;width:80px;height:1px;background:linear-gradient(90deg, var(--text-mute), transparent);
  position:relative;overflow:hidden;
}
.hero__scroll-line::after{
  content:'';position:absolute;left:-30%;top:0;width:30%;height:100%;
  background:var(--accent);
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ to{ left:130%; } }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

@media (min-width:1024px){
  .hero{ min-height:100vh; padding-top:80px; }
  .hero__inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "meta"
      "title"
      "sub"
      "actions"
      "scroll";
    row-gap:22px;
  }
  .hero__title{ max-width:16ch; }
}

/* =========================================================
   INTRO
========================================================= */
.intro__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px, 4vw, 60px);
  align-items:center;
}
.intro__tags{
  list-style:none;padding:0;margin:32px 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:520px;
}
.intro__tags li{
  display:flex;align-items:center;gap:10px;
  color:var(--text-dim);font-size:13px;
  letter-spacing:0.02em;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
}
.intro__visual{ position:relative; }
.intro__frame{
  position:relative;
  aspect-ratio:5/6;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:linear-gradient(155deg, rgba(16,58,129,0.8), rgba(5,20,58,0.96));
}
.intro__frame svg{ width:100%; height:100%; }

/* Blueprint frame (chertej) */
.intro__frame--blueprint{
  background:linear-gradient(160deg, #0d2a67 0%, #06163e 100%);
}
.intro__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  mix-blend-mode:screen;
  opacity:0.9;
  filter:hue-rotate(6deg) saturate(1.15) contrast(1.18) brightness(1.08);
  transition:transform 1400ms var(--ease), opacity 900ms var(--ease);
  transform:scale(1.02);
}
.intro__visual.is-in .intro__img{ transform:scale(1); opacity:0.9; }

.intro__scanline{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.6;
  animation:scan 4.8s linear infinite;
  pointer-events:none;
}
@keyframes scan{
  0%{ top:0; opacity:0; }
  15%{ opacity:0.6; }
  85%{ opacity:0.6; }
  100%{ top:100%; opacity:0; }
}

.intro__corners{ position:absolute; inset:0; pointer-events:none; }
.intro__corners span{
  position:absolute; width:18px; height:18px;
  border-color:var(--accent); border-style:solid;
}
.intro__corners span:nth-child(1){ top:12px; left:12px; border-width:1px 0 0 1px; }
.intro__corners span:nth-child(2){ top:12px; right:12px; border-width:1px 1px 0 0; }
.intro__corners span:nth-child(3){ bottom:12px; left:12px; border-width:0 0 1px 1px; }
.intro__corners span:nth-child(4){ bottom:12px; right:12px; border-width:0 1px 1px 0; }

.intro__stamp{
  position:absolute;left:18px;bottom:18px;
  color:var(--accent-2);
  background:rgba(7,25,72,0.58);
  padding:6px 10px; border:1px solid var(--line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.intro__stamp--tr{
  left:auto; right:18px; bottom:auto; top:18px;
}

@media (min-width:1024px){
  .intro__grid{ grid-template-columns:1.2fr 1fr; }
}

/* =========================================================
   SHOWCASE / HOTSPOTS
========================================================= */
.showcase__title{ max-width:18ch; }
.showcase__stage{
  position:relative;
  margin-top:clamp(30px, 4vw, 60px);
  width:min(100%, 1040px);
  margin-inline:auto;
  padding:clamp(10px, 1.2vw, 18px);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:linear-gradient(150deg, #071948, #0b2a68 58%, #06143a);
  box-shadow:0 36px 100px -56px rgba(23,183,255,0.65);
  overflow:hidden;
}
.showcase__stage .hotspot{ z-index:5; }
.showcase__boat{
  position:relative;
  display:block;
  filter:drop-shadow(0 30px 70px rgba(0,9,40,0.72));
  will-change:transform;
}
.showcase__boat svg{ width:92%; height:auto; }
.showcase__img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  filter:saturate(0.98) contrast(1.04) brightness(0.88);
  transition:transform 1600ms var(--ease);
  transform:scale(1.01);
}
.showcase__stage.is-in .showcase__img{ transform:scale(1); }
.showcase__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(6,21,61,0.54) 100%),
    linear-gradient(180deg, rgba(7,25,72,0.36), transparent 22%, transparent 78%, rgba(6,18,52,0.62));
  z-index:2;
}

.hotspot{
  position:absolute;
  left:var(--x); top:var(--y);
  width:34px;height:34px;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(9,33,88,0.64);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(143,192,255,0.5);
  color:var(--accent);
  transition:background 300ms var(--ease), transform 400ms var(--ease), border-color 300ms var(--ease);
  z-index:5;
  cursor:pointer;
}
.hotspot::before{
  content:'';
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--accent-glow);
  transition:opacity 300ms var(--ease);
}
.hotspot__num{
  font-size:10px; color:var(--accent-2);
  opacity:0;
  transition:opacity 300ms var(--ease);
}
.hotspot__pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--accent);
  opacity:0.8;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:0.7; }
  100%{ transform:scale(2); opacity:0; }
}
.hotspot:hover,.hotspot.is-active{
  background:var(--accent);
  border-color:var(--accent);
  transform:translate(-50%,-50%) scale(1.2);
}
.hotspot:hover::before,.hotspot.is-active::before{ opacity:0; }
.hotspot:hover .hotspot__num,.hotspot.is-active .hotspot__num{
  color:#071020;
  opacity:1;
}

/* Callout label — always visible with a leader line */
.hotspot__tip{
  position:absolute;
  white-space:nowrap;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  background:rgba(9,33,88,0.68);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding:5px 10px;
  border:1px solid rgba(143,192,255,0.25);
  border-radius:3px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity 600ms var(--ease) 200ms, transform 600ms var(--ease) 200ms, border-color 300ms var(--ease);
  pointer-events:none;
}
.hotspot__tip::before{
  content:'';
  position:absolute;
  background:rgba(143,192,255,0.45);
  transition:background 300ms var(--ease);
}

/* Direction: top (line goes up from dot) */
.hotspot[data-dir="t"] .hotspot__tip{
  left:50%; bottom:calc(100% + 42px);
  transform:translate(-50%, 4px);
}
.hotspot[data-dir="t"] .hotspot__tip::before{
  left:50%; top:100%;
  width:1px; height:36px;
  transform:translateX(-50%);
}
.hotspot[data-dir="t"].is-in .hotspot__tip{ transform:translate(-50%, 0); }

/* Direction: top-left (line goes up-left from dot) */
.hotspot[data-dir="tl"] .hotspot__tip{
  right:calc(100% + 44px); bottom:calc(100% + 14px);
}
.hotspot[data-dir="tl"] .hotspot__tip::before{
  left:100%; bottom:-20px;
  width:46px; height:1px;
  transform:rotate(35deg); transform-origin:left center;
}

/* Direction: top-right */
.hotspot[data-dir="tr"] .hotspot__tip{
  left:calc(100% + 44px); bottom:calc(100% + 14px);
}
.hotspot[data-dir="tr"] .hotspot__tip::before{
  right:100%; bottom:-20px;
  width:46px; height:1px;
  transform:rotate(-35deg); transform-origin:right center;
}

/* Direction: bottom-left */
.hotspot[data-dir="bl"] .hotspot__tip{
  right:calc(100% + 44px); top:calc(100% + 14px);
}
.hotspot[data-dir="bl"] .hotspot__tip::before{
  left:100%; top:-20px;
  width:46px; height:1px;
  transform:rotate(-35deg); transform-origin:left center;
}

/* Direction: bottom-right */
.hotspot[data-dir="br"] .hotspot__tip{
  left:calc(100% + 44px); top:calc(100% + 14px);
}
.hotspot[data-dir="br"] .hotspot__tip::before{
  right:100%; top:-20px;
  width:46px; height:1px;
  transform:rotate(35deg); transform-origin:right center;
}

/* Show when stage is in view */
.showcase__stage.is-in .hotspot__tip{ opacity:1; }
.showcase__stage.is-in .hotspot[data-dir="t"] .hotspot__tip{ transform:translate(-50%, 0); }
.showcase__stage.is-in .hotspot:not([data-dir="t"]) .hotspot__tip{ transform:translateY(0); }

/* Stagger appearance */
.showcase__stage.is-in .hotspot:nth-of-type(1) .hotspot__tip{ transition-delay:300ms; }
.showcase__stage.is-in .hotspot:nth-of-type(2) .hotspot__tip{ transition-delay:450ms; }
.showcase__stage.is-in .hotspot:nth-of-type(3) .hotspot__tip{ transition-delay:600ms; }
.showcase__stage.is-in .hotspot:nth-of-type(4) .hotspot__tip{ transition-delay:750ms; }
.showcase__stage.is-in .hotspot:nth-of-type(5) .hotspot__tip{ transition-delay:900ms; }

.hotspot:hover .hotspot__tip,
.hotspot.is-active .hotspot__tip{
  color:var(--accent);
  border-color:var(--accent);
}
.hotspot:hover .hotspot__tip::before,
.hotspot.is-active .hotspot__tip::before{
  background:var(--accent);
}

@media (max-width:900px){
  /* Tooltips могут выходить за край — скрываем подписи, оставляем только номера */
  .hotspot__tip{ display:none; }
}

.hotspot-info{
  position:absolute;left:24px;bottom:24px;
  max-width:360px;
  padding:18px 22px;
  background:rgba(10,12,16,0.72);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-m);
  display:flex;gap:14px;align-items:flex-start;
  transition:opacity 400ms var(--ease), transform 400ms var(--ease), border-color 400ms var(--ease);
  z-index:4;
}
.hotspot-info.is-swapping{
  opacity:0.82;
  border-color:var(--accent);
}
.hotspot-info__num,
.hotspot-info__title,
.hotspot-info__desc{
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.hotspot-info.is-swapping .hotspot-info__num,
.hotspot-info.is-swapping .hotspot-info__title,
.hotspot-info.is-swapping .hotspot-info__desc{
  opacity:0.64;
}
.hotspot-info__num{ color:var(--accent); flex-shrink:0; padding-top:2px; }
.hotspot-info__title{ display:block; font-weight:500; font-size:15px; margin-bottom:4px; }
.hotspot-info__desc{ margin:0; color:var(--text-dim); font-size:13px; line-height:1.5; }

.hotspot-list{
  display:none;
  list-style:none;padding:0;margin:24px 0 0;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.hotspot-list li{
  flex:0 0 78%;
  scroll-snap-align:start;
  padding:18px;border:1px solid var(--line);border-radius:var(--radius-m);
  background:var(--bg-2);
  display:flex;flex-direction:column;gap:6px;
}
.hotspot-list .mono{ color:var(--accent); }
.hotspot-list strong{ font-weight:500; font-size:15px; }
.hotspot-list p{ margin:0; color:var(--text-dim); font-size:13px; }

@media (max-width:767px){
  .showcase__stage .hotspot,
  .showcase__stage .hotspot-info{ display:none; }
  .hotspot-list{ display:flex; }
  .showcase__stage{ width:100%; padding:8px; }
}

/* =========================================================
   FEATURES
========================================================= */
.features__grid{
  margin-top:clamp(30px, 4vw, 60px);
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.feature-card{
  position:relative;
  padding:clamp(22px, 2.3vw, 32px);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%), var(--surface);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform 600ms var(--ease), border-color 400ms var(--ease), box-shadow 500ms var(--ease);
  min-height:280px;
  display:flex;flex-direction:column;gap:16px;
}
.feature-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(143,192,255,0.1), transparent 40%);
  opacity:0;transition:opacity 500ms var(--ease);
  pointer-events:none;
}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong);
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(143,192,255,0.08);
}
.feature-card:hover::before{ opacity:1; }
.feature-card__icon{
  width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--accent);
  background:rgba(143,192,255,0.05);
}
.feature-card__num{
  position:absolute;top:22px;right:22px;
  color:var(--text-mute);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.15em;
}
.feature-card__title{
  font-size:20px;font-weight:400;margin:0;
  letter-spacing:-0.01em;
}
.feature-card__desc{
  margin:0;color:var(--text-dim);font-size:14px;line-height:1.55;
}
.feature-card__meta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--text-mute);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
}

@media (min-width:640px){ .features__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .features__grid{ grid-template-columns:repeat(4,1fr); } }

/* =========================================================
   MODELS
========================================================= */
.models{
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(23,98,255,0.25), transparent 34vw),
    radial-gradient(circle at 74% 20%, rgba(23,183,255,0.16), transparent 28vw),
    linear-gradient(180deg, #06143a 0%, #09245f 48%, #06163e 100%);
}
.models::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(120,217,255,0.035) 1px, transparent 1px) 0 0/ 72px 72px,
    linear-gradient(90deg, rgba(120,217,255,0.035) 1px, transparent 1px) 0 0/ 72px 72px;
  mask-image:radial-gradient(ellipse at center, #000 35%, transparent 84%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 84%);
  pointer-events:none;
}
.models-catalog{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:300px minmax(360px, 1fr) 360px;
  grid-template-areas:
    "intro visual panel"
    "list visual panel"
    "benefits benefits benefits";
  gap:28px 34px;
  align-items:center;
}
.models-catalog__intro{
  grid-area:intro;
  align-self:end;
}
.models-catalog__intro .section-head{
  margin-bottom:18px;
}
.models-catalog__intro .lead{
  max-width:28ch;
  margin:0;
  padding-left:18px;
  border-left:2px solid rgba(23,183,255,0.42);
  font-size:15px;
}
.models-catalog__list{
  grid-area:list;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:rgba(9,33,88,0.46);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.models-catalog__item{
  min-height:82px;
  width:100%;
  display:grid;
  grid-template-columns:34px 1fr 34px;
  gap:16px;
  align-items:center;
  padding:16px 18px;
  border:0;
  border-bottom:1px solid rgba(134,184,255,0.12);
  color:var(--text-dim);
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.models-catalog__item:last-child{ border-bottom:0; }
.models-catalog__item.is-active,
.models-catalog__item:hover{
  color:var(--text);
  background:linear-gradient(135deg, rgba(23,98,255,0.88), rgba(17,78,198,0.62));
  box-shadow:inset 0 0 0 1px rgba(120,217,255,0.42), 0 20px 44px -30px rgba(23,183,255,0.8);
}
.models-catalog__num{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
}
.models-catalog__item strong,
.models-catalog__item small{
  display:block;
}
.models-catalog__item strong{
  font-size:16px;
  color:var(--text);
}
.models-catalog__item small{
  margin-top:4px;
  color:var(--text-mute);
}
.models-catalog__item.is-active small,
.models-catalog__item:hover small{
  color:rgba(237,246,255,0.76);
}
.models-catalog__item i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  font-style:normal;
  color:var(--text);
}
.models-catalog__visual{
  grid-area:visual;
  position:relative;
  min-height:610px;
  display:grid;
  place-items:center;
}
.models-catalog__visual::before{
  content:'';
  position:absolute;
  width:min(760px, 92%);
  aspect-ratio:1;
  border:1px solid rgba(120,217,255,0.16);
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(23,183,255,0.12), transparent 54%),
    conic-gradient(from 0deg, transparent 0 18%, rgba(23,98,255,0.18) 18% 21%, transparent 21% 100%);
  opacity:0.9;
}
.models-catalog__main-img{
  position:relative;
  z-index:1;
  width:min(790px, 105%);
  max-width:none;
  filter:drop-shadow(0 50px 90px rgba(0,8,30,0.75)) saturate(1.04) contrast(1.04);
  transition:opacity 260ms var(--ease), filter 360ms var(--ease);
}
.models-catalog__main-img.is-changing{
  opacity:0.82;
  filter:drop-shadow(0 50px 90px rgba(0,8,30,0.75)) saturate(0.98) contrast(1.02);
}
.models-catalog__image-ghost{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:min(790px, 105%);
  max-width:none;
  pointer-events:none;
  transform:translate(-50%, -50%);
  filter:drop-shadow(0 50px 90px rgba(0,8,30,0.75)) saturate(1.04) contrast(1.04);
  animation:catalogGhostFade 460ms var(--ease) forwards;
}
@keyframes catalogGhostFade{
  to{ opacity:0; }
}
.models-catalog__arrow{
  position:absolute;
  z-index:3;
  top:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--text);
  background:rgba(8,29,78,0.64);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform 250ms var(--ease), border-color 250ms var(--ease), background 250ms var(--ease);
}
.models-catalog__arrow:hover{
  transform:translateY(-50%) scale(1.06);
  border-color:var(--accent);
  background:rgba(23,98,255,0.5);
}
.models-catalog__arrow--prev{ left:20px; transform:translateY(-50%); }
.models-catalog__arrow--next{ right:20px; transform:translateY(-50%); }
.models-catalog__arrow--prev:hover{ transform:translateY(-50%) translateX(-2px) scale(1.06); }
.models-catalog__arrow--next:hover{ transform:translateY(-50%) translateX(2px) scale(1.06); }
.models-catalog__panel h3,
.models-catalog__panel p,
.models-catalog__panel dl,
.models-catalog__panel .mono,
.models-catalog__thumbs{
  transition:opacity 240ms var(--ease);
}
.models-catalog__panel.is-changing h3,
.models-catalog__panel.is-changing p,
.models-catalog__panel.is-changing dl,
.models-catalog__panel.is-changing .mono,
.models-catalog__thumbs.is-changing{
  opacity:0.72;
}
.models-catalog__radar{
  position:absolute;
  inset:30px 30px auto;
  height:100px;
  z-index:0;
  color:rgba(201,219,244,0.28);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
}
.models-catalog__radar span{
  position:absolute;
}
.models-catalog__radar span:nth-child(1){ left:50%; top:0; }
.models-catalog__radar span:nth-child(2){ right:8%; top:42px; }
.models-catalog__radar span:nth-child(3){ left:8%; top:42px; }
.models-catalog__thumbs{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
}
.models-catalog__thumbs button{
  width:132px;
  height:76px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:rgba(9,33,88,0.5);
  -webkit-appearance:none;
  appearance:none;
  padding:0;
  cursor:pointer;
  transition:border-color 300ms var(--ease), transform 300ms var(--ease);
}
.models-catalog__thumbs button.is-active,
.models-catalog__thumbs button:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
}
.models-catalog__thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.models-catalog__panel{
  grid-area:panel;
  padding:34px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-m);
  background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 58%), rgba(9,33,88,0.64);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 36px 90px -54px rgba(23,183,255,0.65);
}
.models-catalog__panel .mono{
  color:var(--accent-2);
}
.models-catalog__panel h3{
  margin:0;
  padding-top:18px;
  font-size:clamp(34px, 3.2vw, 52px);
  line-height:1;
  letter-spacing:-0.03em;
}
.models-catalog__panel p{
  margin:22px 0;
  color:var(--text-dim);
}
.models-catalog__panel dl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin:0 0 28px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(14,48,116,0.42);
}
.models-catalog__panel dl div{
  padding:14px;
}
.models-catalog__panel dt{
  font-size:24px;
  color:var(--text);
}
.models-catalog__panel dd{
  margin:4px 0 0;
  color:var(--text-mute);
  text-transform:uppercase;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
}
.models-catalog__benefits{
  grid-area:benefits;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:rgba(9,33,88,0.42);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  overflow:hidden;
}
.models-catalog__benefits div{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:16px;
  padding:24px;
  border-right:1px solid rgba(134,184,255,0.12);
}
.models-catalog__benefits div:last-child{ border-right:0; }
.models-catalog__benefits span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:12px;
  color:var(--accent);
  background:rgba(23,98,255,0.12);
  font-size:21px;
}
.models-catalog__benefits strong,
.models-catalog__benefits small{
  grid-column:2;
}
.models-catalog__benefits strong{
  align-self:end;
}
.models-catalog__benefits small{
  color:var(--text-mute);
  line-height:1.45;
}
@media (max-width:1180px){
  .models-catalog{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "visual" "list" "panel" "benefits";
  }
  .models-catalog__intro .lead{ max-width:54ch; }
  .models-catalog__visual{ min-height:520px; }
}
@media (max-width:767px){
  .models-catalog__visual{ min-height:380px; }
  .models-catalog__main-img{
    width:min(680px, 132%);
  }
  .models-catalog__arrow{
    top:auto;
    bottom:116px;
  }
  .models-catalog__arrow--prev{ left:0; }
  .models-catalog__arrow--next{ right:0; }
  .models-catalog__thumbs{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin-top:16px;
    overflow-x:auto;
    width:100%;
    justify-content:flex-start;
  }
  .models-catalog__thumbs button{ flex:0 0 120px; }
  .models-catalog__benefits{ grid-template-columns:1fr; }
  .models-catalog__benefits div{ border-right:0; border-bottom:1px solid rgba(134,184,255,0.12); }
  .models-catalog__benefits div:last-child{ border-bottom:0; }
  .models-catalog__panel{ padding:24px; }
  .models-catalog__panel dl{ grid-template-columns:1fr; }
}
/* =========================================================
   SPECS
========================================================= */
.specs{
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(7,25,72,0.92), rgba(8,31,86,0.86) 45%, rgba(6,18,52,0.95)),
    var(--bg-0);
}
.specs::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:url("../images/pict/Moscow3_0/3.0_1.png") center 42% / cover no-repeat;
  opacity:0.36;
  filter:saturate(1.08) contrast(1.04) brightness(0.78);
  transform:scale(1.02);
}
.specs::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(120,217,255,0.052) 1px, transparent 1px) 0 0/ 72px 72px,
    linear-gradient(90deg, rgba(120,217,255,0.052) 1px, transparent 1px) 0 0/ 72px 72px,
    radial-gradient(circle at 78% 20%, rgba(23,183,255,0.28), transparent 26vw),
    linear-gradient(90deg, rgba(7,25,72,0.96), rgba(7,25,72,0.78) 48%, rgba(7,25,72,0.56));
  pointer-events:none;
}
.specs .section-head,
.specs .specs__head,
.specs .specs-tabs,
.specs .specs-panel{
  position:relative;
  z-index:1;
}
.specs .section-head__num{
  color:var(--accent-2);
}
.specs__head{
  display:grid;gap:18px;
  grid-template-columns:1fr;
  margin-bottom:clamp(30px, 4vw, 50px);
}
@media (min-width:1024px){
  .specs__head{ grid-template-columns:1.2fr 1fr; align-items:end; gap:60px; }
}
.specs__grid{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
}
.spec-row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.spec-row__label{
  display:flex;align-items:baseline;gap:12px;
  color:var(--text-mute);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
}
.spec-row__value{
  font-size:clamp(28px, 4.5vw, 56px);
  font-weight:200;letter-spacing:-0.02em;line-height:1;
  color:var(--text);
  display:flex;align-items:baseline;gap:8px;
}
.spec-row__unit{
  font-size:clamp(14px, 1.1vw, 18px);
  color:var(--text-mute);
  font-weight:300;letter-spacing:0;
}
.spec-row__desc{
  margin:0;color:var(--text-dim);font-size:13px;max-width:54ch;
}

@media (min-width:768px){
  .spec-row{
    grid-template-columns:1fr 1.4fr 1fr;
    align-items:center;
    gap:30px;
  }
}

/* =========================================================
   EXPERIENCE
========================================================= */
.experience{ padding:0; }
.experience__bg{
  position:relative;min-height:min(80vh, 720px);
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(7,25,72,0.94), rgba(7,25,72,0.64) 50%, rgba(7,25,72,0.22)),
    linear-gradient(180deg, rgba(7,25,72,0.42), transparent 30%, transparent 70%, rgba(6,18,52,0.68)),
    url("../images/img/bgmaps.png") center / cover no-repeat,
    var(--bg-0);
}
.experience__waves{ position:absolute;inset:0; z-index:0; }
.experience__waves svg{ width:100%; height:100%; }
.experience__media{
  position:absolute; inset:-5% -5%; z-index:0;
  overflow:hidden;
  will-change:transform;
}
.experience__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(0.72) saturate(1.04) contrast(1.06) hue-rotate(4deg);
  animation:slowZoom 26s ease-in-out infinite alternate;
}
@keyframes slowZoom{
  0%{ transform:scale(1.05); }
  100%{ transform:scale(1.12); }
}
.experience__inner{
  position:relative;z-index:2;
  min-height:inherit;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: clamp(40px, 6vw, 100px);
  padding-block: clamp(80px, 10vw, 140px);
}
@media (max-width: 768px) {
  .experience__inner { grid-template-columns: 1fr; }
}
.experience__content{
  max-width:560px;
  display:flex;flex-direction:column;gap:22px;
}
.experience__bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(7,25,72,0.94), rgba(7,25,72,0.64) 50%, rgba(7,25,72,0.22)),
    linear-gradient(180deg, rgba(7,25,72,0.42), transparent 30%, transparent 70%, rgba(6,18,52,0.68));
  z-index:1;pointer-events:none;
}

/* =========================================================
   CTA
========================================================= */
.cta{
  background:linear-gradient(180deg, var(--bg-0), #06163e);
  border-top:1px solid var(--line);
}
.cta__inner{
  display:grid;grid-template-columns:1fr;gap:clamp(40px, 5vw, 80px);
}
.cta__left{ display:flex;flex-direction:column;gap:20px; max-width:560px; }
.cta__form{
  display:flex;flex-direction:column;gap:22px;
  padding:clamp(24px, 3vw, 36px);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.field{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding-top:10px;
}
.field label{
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-mute);
  font-family:'JetBrains Mono',monospace;
}
.field input,.field textarea{
  width:100%;background:transparent;
  border:none;border-bottom:1px solid var(--line);
  padding:8px 0 12px;
  color:var(--text);font-size:15px;
  transition:border-color 300ms var(--ease);
  resize:none;
  font-family:inherit;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
}
.field__line{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 500ms var(--ease);
  pointer-events:none;
}
.field:focus-within .field__line{ transform:scaleX(1); }

.checkbox{
  display:flex;gap:12px;align-items:flex-start;
  cursor:pointer;font-size:13px;color:var(--text-dim);
  user-select:none;
}
.checkbox input{
  position:absolute;opacity:0;pointer-events:none;
}
.checkbox__box{
  width:18px;height:18px;border:1px solid var(--line-strong);
  border-radius:4px;flex-shrink:0;margin-top:2px;
  position:relative;
  transition:background 300ms var(--ease), border-color 300ms var(--ease);
}
.checkbox__box::after{
  content:'';position:absolute;left:5px;top:1px;
  width:5px;height:10px;
  border:solid var(--bg-0);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(0);
  transition:transform 300ms var(--ease);
}
.checkbox input:checked ~ .checkbox__box{
  background:var(--accent);border-color:var(--accent);
}
.checkbox input:checked ~ .checkbox__box::after{ transform:rotate(45deg) scale(1); }
.checkbox__label a{ color:var(--accent); border-bottom:1px solid rgba(143,192,255,0.4); }

.form__note{
  margin:0;padding:14px 16px;
  border:1px solid rgba(143,192,255,0.4);
  border-radius:var(--radius-s);
  color:var(--accent);font-size:13px;
  background:rgba(143,192,255,0.06);
}

@media (min-width:1024px){
  .cta__inner{ grid-template-columns:1fr 1fr; align-items:start; gap:80px; }
  .cta__inner.cta__inner--single{ grid-template-columns:1fr; }
}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  padding:clamp(60px, 7vw, 100px) 0 28px;
  border-top:1px solid var(--line);
  background:var(--bg-0);
}
.footer__inner{
  display:grid;grid-template-columns:1fr;
  gap:40px;
}
.footer__brand .footer__logo{
  font-size:clamp(36px, 6vw, 72px);
  font-weight:200;letter-spacing:0.1em;
  line-height:1;
  background:linear-gradient(120deg, var(--text), var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer__brand p{ margin:14px 0 0; color:var(--text-mute); }
.footer__cols{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:30px;
}
.footer__cols > div{ display:flex;flex-direction:column;gap:10px; }
.footer__cols h4{
  margin:0 0 8px;color:var(--accent);
  font-weight:400;
}
.footer__cols a, .footer__cols span{
  color:var(--text-dim);font-size:14px;
  transition:color 300ms var(--ease);
}
.footer__cols a:hover{ color:var(--text); }

.footer__legal{
  margin-top:60px;padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--text-mute);gap:14px;flex-wrap:wrap;
}

@media (min-width:768px){
  .footer__inner{ grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; }
  .footer__cols{ grid-template-columns:repeat(3, 1fr); }
}

/* =========================================================
   PRODUCT PAGE
========================================================= */
.product-page{
  background:
    radial-gradient(circle at 70% 4%, rgba(23,183,255,0.2), transparent 32vw),
    linear-gradient(180deg, #06163e 0%, #081f56 42%, #06143a 100%);
}
.product-page .header:not(.is-scrolled){
  background:rgba(7,25,72,0.56);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
  border-bottom-color:rgba(116,168,230,0.2);
}
.product-page .header.is-scrolled{
  background:rgba(7,25,72,0.82);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom-color:rgba(126,176,236,0.34);
}
.product-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:118px 0 46px;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:
    radial-gradient(circle at 74% 42%, rgba(23,183,255,0.18), transparent 26vw),
    linear-gradient(180deg, #071948 0%, #0b2158 58%, #06163e 100%);
}
.product-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(rgba(120,217,255,0.055) 1px, transparent 1px) 0 0/ 76px 76px,
    linear-gradient(90deg, rgba(120,217,255,0.055) 1px, transparent 1px) 0 0/ 76px 76px;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
  pointer-events:none;
}
.product-hero::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:120vw;
  height:120vw;
  max-width:1400px;
  max-height:1400px;
  transform:translate(-50%,-50%);
  z-index:1;
  background:radial-gradient(circle at center, rgba(23,183,255,0.2), transparent 56%);
  filter:blur(20px);
  opacity:0.7;
  pointer-events:none;
}
.product-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.product-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% center;
  filter:saturate(1.06) contrast(1.05) brightness(0.78);
}
.product-hero__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,25,72,0.96) 0%, rgba(7,25,72,0.76) 34%, rgba(7,25,72,0.24) 70%, rgba(7,25,72,0.44) 100%),
    radial-gradient(ellipse at 64% 48%, transparent 26%, rgba(5,18,52,0.46) 76%, rgba(5,18,52,0.86) 100%),
    linear-gradient(180deg, rgba(7,25,72,0.48) 0%, transparent 26%, transparent 62%, rgba(6,18,52,0.82) 100%);
}
.product-hero__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:56px;
}
.product-breadcrumbs{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent-2);
}
.product-breadcrumbs a{
  color:var(--text-mute);
}
.product-hero__content{
  max-width:620px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.product-pill{
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:rgba(9,33,88,0.64);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--accent-2);
}
.product-hero__title{
  margin:0;
  font-size:clamp(58px, 8vw, 122px);
  line-height:0.9;
  letter-spacing:-0.045em;
  font-weight:600;
}
.product-hero__lead{
  margin:0;
  max-width:560px;
  color:var(--text);
  font-size:clamp(18px, 1.55vw, 24px);
  line-height:1.38;
}
.product-hero__text{
  margin:0;
  max-width:54ch;
  color:var(--text-dim);
}
.product-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:10px;
}
.product-stats{
  width:100%;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  border-top:1px solid rgba(255,255,255,0.08);
  border-left:0;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
}
.product-stat{
  position:relative;
  padding:14px 28px 20px;
  border-right:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden;
  min-width:0;
}
.product-stat:last-child{ border-right:0; }
.product-stat__icon{
  display:none;
}
.product-stat__icon svg{
  width:100%;
  height:100%;
  display:block;
  stroke-width:1.2;
}
.product-stat__value{
  font-size:clamp(22px, 2.6vw, 42px);
  line-height:1;
  font-weight:300;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
  z-index:1;
}
.product-stat__label{
  color:var(--text-mute);
  font-size:10px;
  letter-spacing:0.15em;
  margin-top:3px;
  position:relative;
  z-index:1;
}
.product-section{
  position:relative;
  padding:clamp(64px, 8vw, 116px) 0;
  background:linear-gradient(180deg, rgba(7,25,72,0.14), rgba(7,25,72,0));
}
.product-section__head{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:32px;
}
.product-section__head--inline{
  max-width:none;
  display:grid;
  grid-template-columns:0.72fr 1fr;
  align-items:end;
  gap:48px;
}
.product-section__head--compact{
  margin-bottom:24px;
}
.product-feature-grid,
.product-spec-grid,
.product-drawing-grid,
.product-related__grid{
  display:grid;
  gap:16px;
}
.product-feature-grid{
  grid-template-columns:repeat(3, 1fr);
}
.product-feature-intro{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:clamp(30px, 4vw, 48px);
}
@media (min-width:1024px){
  .product-feature-intro{
    grid-template-columns:1fr 0.86fr;
    align-items:end;
    gap:70px;
  }
}
.product-card,
.product-spec-card,
.product-drawing-grid article,
.product-summary,
.product-related-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:linear-gradient(160deg, rgba(255,255,255,0.025), transparent 60%), var(--surface);
  box-shadow:0 28px 70px -46px rgba(0,8,30,0.9);
}
.product-card{
  position:relative;
  padding:28px;
  min-height:250px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(38,112,190,0.15), transparent 36%),
    linear-gradient(135deg, rgba(16,49,106,0.52), rgba(8,27,71,0.74));
  border-color:rgba(116,168,230,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 40px rgba(0,0,0,0.18);
  transition:
    transform 350ms var(--ease),
    border-color 350ms var(--ease),
    background 350ms var(--ease),
    box-shadow 350ms var(--ease);
}
.product-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:0.22;
  pointer-events:none;
}
.product-card::after{
  content:'';
  position:absolute;
  right:-52px;
  top:-72px;
  width:150px;
  height:150px;
  border:1px solid rgba(126,176,236,0.2);
  border-radius:50%;
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(132,186,248,0.46);
  background:
    radial-gradient(circle at 18% 0%, rgba(47,128,205,0.2), transparent 38%),
    linear-gradient(135deg, rgba(21,61,120,0.62), rgba(9,31,78,0.79));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -1px 0 rgba(58,146,231,0.16),
    0 18px 44px rgba(0,0,0,0.22);
}
.product-card__icon{
  position:absolute;
  top:24px;
  left:24px;
  width:48px;
  height:48px;
  border:1px solid rgba(109,166,234,0.42);
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  background:rgba(8,30,78,0.44);
  color:rgba(96,191,255,0.92);
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
}
.product-card h3,
.product-spec-card h3,
.product-comfort__content h2,
.product-related-card strong{
  position:relative;
  z-index:1;
  margin:0;
}
.product-card p{
  position:relative;
  z-index:1;
  margin:12px 0 0;
  color:rgba(175,198,228,0.88);
}
.product-card__indicator{
  position:absolute;
  right:24px;
  bottom:24px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(221,178,95,0.72);
  opacity:0;
  transform:scale(0.86);
  transition:opacity 250ms ease, transform 250ms ease;
  pointer-events:none;
}
.product-card__indicator::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:#deb465;
}
.product-card:hover .product-card__indicator{
  opacity:1;
  transform:scale(1);
}
.product-spec-grid{
  grid-template-columns:repeat(3, 1fr);
  margin-bottom:16px;
}
.product-spec-card{
  padding:26px;
  overflow:hidden;
  min-height:0;
}
.product-spec-card dl,
.product-summary dl{
  margin:22px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-spec-card dl div,
.product-summary dl div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid rgba(134,184,255,0.1);
}
.product-spec-card dt,
.product-summary dt{
  color:var(--text-mute);
}
.product-spec-card dd,
.product-summary dd{
  margin:0;
  color:var(--text);
}
.product-comfort__grid{
  display:grid;
  grid-template-columns:1.25fr 0.75fr;
  gap:40px;
  align-items:center;
}
.product-comfort__media{
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--line);
  min-height:420px;
}
.product-comfort__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.03) contrast(1.04) brightness(0.92);
}
.product-comfort__content{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.product-checklist{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.product-checklist li{
  position:relative;
  padding-left:30px;
  color:var(--text-dim);
}
.product-checklist li::before{
  content:'';
  position:absolute;
  left:0;
  top:0.48em;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px var(--accent-glow);
}
.product-gallery__grid{
  display:grid;
  grid-template-columns:1.5fr 0.8fr 0.8fr 0.8fr;
  gap:14px;
}
.product-gallery__item{
  display:block;
  padding:0;
  border:0;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--bg-2);
  cursor:pointer;
}
.product-gallery__item img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  filter:saturate(1.04) contrast(1.04) brightness(0.9);
  transition:transform 700ms var(--ease), filter 400ms var(--ease);
}
.product-gallery__item:hover img{
  transform:scale(1.04);
  filter:saturate(1.08) contrast(1.06) brightness(1);
}
.product-gallery__wide{
  min-height:260px;
}
.product-drawing-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:16px;
}
.product-drawing-grid article,
.product-summary{
  padding:0;
  overflow:hidden;
}
.product-drawing-grid article{
  position:relative;
  min-height:340px;
  background:#06143a;
}
.product-drawing-item{
  display:block;
  width:100%;
  height:100%;
  min-height:340px;
  position:relative;
  border:0;
  padding:0;
  border-radius:inherit;
  cursor:pointer;
  overflow:hidden;
}
.product-drawing-item span{
  position:absolute;
  top:16px;
  left:18px;
  z-index:2;
  color:var(--accent-2);
  text-shadow:0 1px 14px rgba(0,8,30,0.8);
}
.product-drawing-item img{
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
  margin:0;
  opacity:0.84;
  filter:saturate(0.95) contrast(1.06) brightness(0.78);
  transition:transform 700ms var(--ease), filter 400ms var(--ease);
}
.product-drawing-item:hover img{
  transform:scale(1.03);
  filter:saturate(1.02) contrast(1.08) brightness(0.82);
}
.product-related__grid{
  grid-template-columns:repeat(4, 1fr);
}
.product-related-card{
  position:relative;
  min-height:250px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  transition:transform 400ms var(--ease), border-color 400ms var(--ease);
}
.product-related-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
}
.product-related-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  grid-row:auto;
  opacity:0.58;
  filter:saturate(1.04) contrast(1.06) brightness(0.68);
  transition:transform 700ms var(--ease), opacity 400ms var(--ease);
}
.product-related-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,18,52,0.12), rgba(6,18,52,0.88));
  z-index:1;
}
.product-related-card:hover img{
  transform:scale(1.06);
  opacity:0.78;
}
.product-related-card strong,
.product-related-card span{
  position:relative;
  z-index:2;
  grid-column:auto;
}
.product-related-card span{
  color:var(--text-mute);
  font-size:13px;
  margin-top:8px;
  line-height:1.45;
}
.product-empty-state{
  border:1px dashed rgba(134,184,255,0.35);
  background:rgba(7,28,84,0.35);
  border-radius:14px;
  padding:18px 20px;
}
.product-empty-state h3{
  margin:0 0 8px;
  font-size:18px;
}
.product-empty-state p{
  margin:0;
  color:var(--text-mute);
  line-height:1.5;
}
.is-empty{
  color:var(--text-mute) !important;
}
.product-lightbox{
  position:fixed;
  inset:0;
  z-index:220;
  display:none;
  place-items:center;
  padding:32px;
  background:rgba(5,18,52,0.92);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.product-lightbox.is-open{ display:grid; }
.product-lightbox img{
  max-width:min(1180px, 100%);
  max-height:86vh;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-m);
  background:var(--bg-0);
  object-fit:contain;
}
.product-lightbox__close{
  position:absolute;
  top:20px;
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  color:var(--text);
  font-size:22px;
  background:rgba(9,33,88,0.7);
}
.maintenance-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(34,92,255,0.28), transparent), #061741;
}
.maintenance-screen__panel{
  width:min(680px, 100%);
  border:1px solid rgba(134,184,255,0.28);
  border-radius:16px;
  padding:28px;
  background:rgba(7,28,84,0.6);
  box-shadow:0 20px 40px rgba(0,0,0,0.26);
}
.maintenance-screen__panel h1{
  margin:0 0 10px;
  font-size:clamp(26px, 4.4vw, 40px);
}
.maintenance-screen__panel p{
  margin:0;
  color:var(--text-mute);
}
body[data-maintenance-pending="1"] header,
body[data-maintenance-pending="1"] main,
body[data-maintenance-pending="1"] footer{
  visibility:hidden;
}
body[data-product-pending="1"] .product-hero__media img,
body[data-product-pending="1"] .product-gallery__grid img,
body[data-product-pending="1"] .product-drawing-grid img,
body[data-product-pending="1"] .product-comfort__media img,
body[data-product-pending="1"] .product-related__grid img{
  visibility:hidden;
}
.media-placeholder{
  width:100%;
  min-height:180px;
  border:1px dashed rgba(134,184,255,0.35);
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(7,28,84,0.25);
  color:var(--text-mute);
  font-size:14px;
  text-align:center;
  padding:18px;
}

/* Production polish: calmer surfaces, resilient KPI lines and media blocks */
.hero__statsbar,
.product-stats{
  border-top:1px solid rgba(134,184,255,0.18);
  border-bottom:0;
}
.product-stats{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:stretch;
  background:linear-gradient(180deg, rgba(10,38,98,0.18), rgba(10,38,98,0));
}
.product-stat{
  min-height:116px;
  justify-content:center;
}
.product-stat__value{
  max-width:100%;
  font-size:clamp(28px, 3vw, 46px);
  letter-spacing:-0.025em;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.product-stat__label{
  line-height:1.25;
}
.product-card,
.product-spec-card,
.product-drawing-grid article,
.product-related-card{
  background:
    linear-gradient(160deg, rgba(120,217,255,0.055), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0)),
    rgba(10,38,98,0.56);
}
.product-card,
.product-spec-card{
  border-color:rgba(134,184,255,0.18);
}
.product-card{
  background:
    radial-gradient(circle at 18% 0%, rgba(38,112,190,0.15), transparent 36%),
    linear-gradient(135deg, rgba(16,49,106,0.52), rgba(8,27,71,0.74));
  border-color:rgba(116,168,230,0.24);
}
/* Premium dark-blue refinement for product feature cards */
.product-features .product-card{
  border-radius:16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(40,109,181,0.13), transparent 35%),
    linear-gradient(138deg, rgba(17,52,108,0.5), rgba(8,28,71,0.74));
  border:1px solid rgba(112,164,227,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 36px rgba(0,0,0,0.18);
}
.product-features .product-card::before{
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:0.2;
}
.product-features .product-card::after{
  right:-56px;
  top:-74px;
  width:154px;
  height:154px;
  border:1px solid rgba(120,173,236,0.2);
}
.product-features .product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(132,186,248,0.46);
  background:
    radial-gradient(circle at 18% 0%, rgba(47,128,205,0.19), transparent 37%),
    linear-gradient(138deg, rgba(21,61,120,0.61), rgba(9,31,78,0.79));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -1px 0 rgba(58,146,231,0.15),
    0 18px 42px rgba(0,0,0,0.22);
}
.product-features .product-card__icon{
  border:1px solid rgba(108,165,234,0.42);
  background:rgba(8,30,78,0.44);
  color:rgba(98,188,248,0.9);
}
.product-features .product-card p{
  color:rgba(176,198,226,0.9);
}
.product-gallery__item,
.product-drawing-item,
.product-comfort__media{
  background:
    linear-gradient(135deg, rgba(13,42,103,0.86), rgba(6,20,58,0.92));
}
.product-gallery__item img,
.product-drawing-item img,
.product-comfort__media img{
  transform:translateZ(0);
}
.product-gallery__item{
  min-height:260px;
}
.product-gallery__item img{
  height:100%;
  min-height:260px;
}
.product-drawing-grid article,
.product-drawing-item,
.product-drawing-item img{
  min-height:clamp(260px, 28vw, 380px);
}
.media-placeholder{
  min-height:inherit;
  width:100%;
  height:100%;
  background:
    linear-gradient(135deg, rgba(23,183,255,0.08), transparent 48%),
    rgba(7,28,84,0.42);
  border-color:rgba(134,184,255,0.36);
}
.media-placeholder span{
  max-width:32ch;
}
.models-catalog__main-img{
  object-fit:contain;
  max-height:600px;
}
.models-catalog__panel,
.models-catalog__list,
.models-catalog__benefits{
  border-color:rgba(134,184,255,0.2);
}
.models-catalog__panel h3{
  overflow-wrap:anywhere;
}
.models-catalog__panel dl{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.models-catalog__panel dt{
  overflow-wrap:anywhere;
  line-height:1.08;
}
.product-cta{
  padding:56px 0;
  background:
    linear-gradient(90deg, rgba(8,31,86,0.96), rgba(10,55,126,0.78)),
    url("../images/img/footer-ship-wide.png") center 54% / cover no-repeat;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.product-cta__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
}
.product-cta h2{
  margin:0;
  font-size:clamp(30px, 4vw, 54px);
  line-height:1;
  letter-spacing:-0.03em;
}
.product-cta p{
  margin:12px 0 0;
  color:var(--text-dim);
}
@media (max-width:1023px){
  .product-hero{ min-height:auto; padding-top:110px; }
  .product-hero__media img{
    object-position:70% 50%;
    transform:scale(1.04);
  }
  .product-stats,
  .product-feature-grid,
  .product-spec-grid,
  .product-comfort__grid,
  .product-gallery__grid,
  .product-drawing-grid,
  .product-related__grid,
  .product-section__head--inline{
    grid-template-columns:1fr;
  }
  .product-stat{ border-right:0; border-bottom:1px solid var(--line); }
  .product-stat:last-child{ border-bottom:0; }
  .product-comfort__media{ min-height:300px; }
  .product-related-card{ min-height:220px; }
  .product-cta__inner{ align-items:flex-start; flex-direction:column; }
}

@media (max-width:640px){
  .product-hero__media img{
    object-position:74% 50%;
    transform:scale(1.08);
  }
}

/* =========================================================
   Reveal animations
========================================================= */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 1000ms var(--ease), transform 1000ms var(--ease);
  will-change:transform, opacity;
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--delay{ transition-delay:200ms; }

/* Split word reveal for H2 */
.h2--split .word-reveal{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  line-height:1.02;
}
.h2--split .word-reveal i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(110%) rotate(3deg);
  opacity:0;
  transition:transform 1100ms var(--ease), opacity 900ms var(--ease);
  transition-delay:var(--d, 0ms);
  will-change:transform;
}
.h2--split.is-in .word-reveal i{
  transform:translateY(0) rotate(0);
  opacity:1;
}

/* Stagger for lists inside containers that are in-view */
.intro__tags.reveal li{
  opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
}
.intro__tags.reveal.is-in li{ opacity:1; transform:none; }
.intro__tags.reveal.is-in li:nth-child(1){ transition-delay:120ms; }
.intro__tags.reveal.is-in li:nth-child(2){ transition-delay:200ms; }
.intro__tags.reveal.is-in li:nth-child(3){ transition-delay:280ms; }
.intro__tags.reveal.is-in li:nth-child(4){ transition-delay:360ms; }

/* Section-head slide in */
.section-head.reveal{
  transform:translateY(20px);
}
.section-head.reveal .section-head__line{
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1400ms var(--ease) 200ms;
}
.section-head.reveal.is-in .section-head__line{ transform:scaleX(1); }

/* Scroll-linked hero title subtle lift */
.hero__title,.hero__sub,.hero__actions{ will-change:transform, opacity; }

/* Spec rows: more dramatic entrance */
.spec-row.reveal{
  transform:translateY(30px);
  opacity:0;
}
.spec-row.reveal.is-in{ opacity:1; transform:none; }
.spec-row.reveal::before{
  content:'';
  position:absolute;
  left:0; top:0;
  height:1px;
  width:0;
  background:linear-gradient(90deg, var(--accent), transparent);
  transition:width 1600ms var(--ease) 200ms;
}
.spec-row.reveal.is-in::before{ width:100%; }

/* Feature cards entrance */
.feature-card.reveal{
  transform:translateY(50px) scale(0.98);
}
.feature-card.reveal.is-in{ transform:translateY(0) scale(1); }

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .word > *{ transform:none; }
  .hero__glow,.hero__boat{ animation:none; }
}

/* =========================================================
   Small utilities
========================================================= */
::selection{ background:var(--accent); color:#071020; }

/* Scrollbar (desktop) */
@media (hover:hover){
  ::-webkit-scrollbar{ width:10px;height:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg-0); }
  ::-webkit-scrollbar-thumb{ background:var(--bg-3); border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover{ background:#23262b; }
}

/* --- Architecture map full-width section --- */
.architecture{
  padding-top:clamp(58px, 7vw, 96px);
  padding-bottom:0;
  overflow:hidden;
}
.architecture > .container{
  position:relative;
  z-index:3;
}
.architecture-map{
  position:relative;
  width:100%;
  min-height:clamp(680px, 78vh, 820px);
  margin-top:24px;
  overflow:hidden;
  border-top:1px solid rgba(120,180,255,0.18);
  border-bottom:1px solid rgba(120,180,255,0.16);
  background:
    linear-gradient(90deg, rgba(4,14,45,0.92) 0%, rgba(6,26,73,0.64) 42%, rgba(5,17,52,0.88) 100%),
    radial-gradient(760px 340px at 50% 72%, rgba(23,183,255,0.18), transparent 68%),
    linear-gradient(180deg, #071944 0%, #08215d 55%, #061641 100%);
  isolation:isolate;
}
.architecture-map.reveal{
  opacity:1;
  transform:none;
}
.architecture-map::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(120,180,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,255,0.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.architecture-map::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 50% 44%, transparent 0 28%, rgba(4,12,38,0.18) 54%, rgba(2,8,30,0.42) 100%);
  pointer-events:none;
}
.architecture-map--full{
  left:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
}
.architecture-map__copy{
  position:absolute;
  top:clamp(36px, 5vw, 72px);
  left:max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x)));
  z-index:7;
  width:min(460px, 32vw);
}
.architecture-map__eyebrow{
  margin:0 0 16px;
  color:var(--accent);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.architecture-map__title{
  margin:0;
  font-size:clamp(38px, 4.5vw, 72px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:0;
  text-wrap:balance;
}
.architecture-map__subtitle{
  margin:22px 0 0;
  max-width:38ch;
  color:var(--text-dim);
  font-size:clamp(15px, 1.1vw, 18px);
}
.architecture-stage{
  position:absolute;
  inset:0;
  height:100%;
  z-index:2;
}
.architecture-orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:min(900px, 50vw);
  aspect-ratio:1.5;
  transform:translate(-50%, -38%);
}
.architecture-model-shadow{
  position:absolute;
  left:50%;
  bottom:6%;
  width:82%;
  height:20%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(1,8,25,0.74), transparent 72%);
  filter:blur(3px);
}
.architecture-vessel{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  transform:translate(-50%, -50%);
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 28px 50px rgba(0,8,30,0.42));
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.92) 12%, #000 24%, #000 76%, rgba(0,0,0,.92) 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.88) 14%, #000 26%, #000 78%, rgba(0,0,0,.88) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.92) 12%, #000 24%, #000 76%, rgba(0,0,0,.92) 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.88) 14%, #000 26%, #000 78%, rgba(0,0,0,.88) 90%, transparent 100%);
  mask-composite: intersect;
}
.architecture-hotspots{
  position:absolute;
  inset:0;
  z-index:9;
}
.architecture-hotspot{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  transform:translate(-50%, -50%);
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(120,217,255,0.94);
  background:radial-gradient(circle, rgba(23,183,255,0.95) 0 25%, rgba(11,41,104,0.86) 28% 100%);
  box-shadow:0 0 0 8px rgba(23,183,255,0.08), 0 0 26px rgba(23,183,255,0.42);
  cursor:pointer;
  transition:transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.architecture-hotspot::before{
  content:'';
  position:absolute;
  inset:-18px;
  border-radius:50%;
}
.architecture-hotspot:hover,
.architecture-hotspot.is-active{
  transform:translate(-50%, -50%) scale(1.12);
  border-color:#fff;
  box-shadow:0 0 0 13px rgba(23,183,255,0.12), 0 0 34px rgba(23,183,255,0.68);
}
.architecture-hotspot__ring{
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid rgba(120,217,255,0.28);
}
.architecture-cards{
  position:absolute;
  right:max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x)));
  top:50%;
  width:min(360px, 24vw);
  max-height:calc(100% - 120px);
  display:grid;
  gap:10px;
  transform:translateY(-50%);
  z-index:8;
}
.architecture-zone-card{
  min-height:84px;
  border:1px solid rgba(130,180,255,0.22);
  background:linear-gradient(145deg, rgba(9,31,86,0.74), rgba(4,17,51,0.58));
  color:var(--text);
  border-radius:12px;
  padding:14px 16px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 22px 42px -34px rgba(0,10,40,0.9);
  transition:transform 260ms var(--ease), border-color 260ms var(--ease), background 260ms var(--ease);
}
.architecture-zone-card:hover,
.architecture-zone-card.is-active{
  transform:translateX(-4px);
  border-color:rgba(120,217,255,0.72);
  background:linear-gradient(145deg, rgba(14,51,125,0.88), rgba(5,22,65,0.72));
}
.architecture-zone-card__meta{
  display:flex;
  gap:10px;
  align-items:baseline;
}
.architecture-zone-card__number{
  flex:0 0 auto;
  font-family:'JetBrains Mono', monospace;
  color:var(--accent);
}
.architecture-zone-card__title{
  min-width:0;
  font-weight:600;
  line-height:1.25;
}
.architecture-zone-card__text{
  margin:10px 0 0;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.5;
}
.architecture-connectors{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
}
.architecture-connector-path{
  fill:none;
  stroke:rgba(86,196,255,0.22);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.architecture-connector-path.is-active{
  stroke:rgba(86,196,255,0.78);
  stroke-width:1.4;
}
.architecture-sheet{
  display:none;
}

@media (max-width: 1180px){
  .architecture-map__copy{
    width:min(390px, 38vw);
  }
  .architecture-orbit{
    width:min(780px, 64vw);
    transform:translate(-48%, -36%);
  }
  .architecture-cards{
    width:300px;
  }
  .architecture-zone-card{
    min-height:76px;
    padding:12px 14px;
  }
  .architecture-zone-card__text{
    display:none;
  }
}

@media (max-width: 900px){
  .architecture-hotspot{
    left:calc(var(--x) * 1%);
    top:calc(var(--y) * 1%);
  }
  .architecture-map{
    min-height:800px;
  }
  .architecture-map__copy{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    max-width:560px;
    padding:34px var(--pad-x) 0;
  }
  .architecture-stage{
    inset:150px 0 190px;
    height:auto;
    z-index:9;
  }
  .architecture-orbit{
    width:min(760px, 94vw);
    transform:translate(-50%, -28%);
  }
  .architecture-cards,
  .architecture-connectors{
    display:none;
  }
  .architecture-sheet{
    display:block;
    position:absolute;
    left:var(--pad-x);
    right:var(--pad-x);
    bottom:24px;
    z-index:7;
    padding:16px 18px;
    border-radius:12px;
    border:1px solid rgba(130,180,255,0.28);
    background:linear-gradient(145deg, rgba(9,31,86,0.88), rgba(4,17,51,0.84));
    box-shadow:0 26px 64px -42px rgba(0,8,30,0.95);
    pointer-events:none;
  }
  .architecture-sheet__head{
    display:flex;
    gap:10px;
    align-items:baseline;
  }
  .architecture-sheet__number{
    font-family:'JetBrains Mono', monospace;
    color:var(--accent);
  }
  .architecture-sheet__title{
    margin:0;
    font-size:18px;
  }
  .architecture-sheet__description{
    margin:10px 0 0;
    color:var(--text-dim);
  }
}

@media (max-width: 560px){
  .architecture-map{
    min-height:710px;
  }
  .architecture-map__title{
    font-size:34px;
  }
  .architecture-map__subtitle{
    margin-top:14px;
  }
  .architecture-stage{
    inset:170px 0 195px;
  }
  .architecture-orbit{
    width:94vw;
    transform:translate(-50%, -24%);
  }
  .architecture-hotspot{
    width:20px;
    height:20px;
  }
  .architecture-hotspot::before{
    inset:-22px;
  }
  .architecture-sheet{
    bottom:18px;
    padding:14px;
  }
}