/* ---- block 1 ---- */

  :root{
    --bg: #0A0F1A;
    --bg-card: #0F1622;
    --bg-card-2: #131B29;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.18);
    --text: #EDEDED;
    --text-dim: #8A94A6;
    --text-mute: #5A6478;
    --accent: #2DB4F0;
    --accent-2: #1E7FB8;
    --accent-soft: rgba(45,180,240,0.14);
    --fire: #FF6B47;
    --fire-soft: rgba(255,107,71,0.14);
    --serif: 'Unbounded', sans-serif;
    --sans: 'Manrope', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --max: 1320px;
    --radius: 18px;
    --ease: cubic-bezier(.2,.7,.2,1);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; overflow-x: hidden; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    padding-top: 70px;
  }
  h1, h2, h3, h4, p { overflow-wrap: break-word; }

  /* === Background === */
  body::before{
    content:"";
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse 50% 35% at 85% 0%, rgba(45,180,240,0.045), transparent),
      radial-gradient(ellipse 40% 25% at 10% 100%, rgba(45,180,240,0.02), transparent);
    pointer-events: none; z-index: 0;
  }

  .bg-blobs{ position: fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
  .blob{
    position:absolute; border-radius:50%;
    filter: blur(160px); opacity:0.05;
    animation: float 40s ease-in-out infinite;
  }
  .blob.b1{ width:450px; height:450px;
    background: var(--accent);
    top:0; right:5%; }
  .blob.b2{ width:350px; height:350px;
    background: var(--accent);
    bottom:20%; left:0;
    animation-delay:-15s; }
  .blob.b3{ display:none; }
  @keyframes float{
    0%,100%{ transform: translate(0,0); }
    50%{ transform: translate(20px,-15px); }
  }

  .scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:100; }
  .scroll-progress-bar{
    height:100%; width:0%;
    background: linear-gradient(90deg, var(--accent), #6FD0F5);
    box-shadow: 0 0 12px var(--accent);
    transition: width .08s linear;
  }

  a{ color: inherit; text-decoration: none; }
  img, svg{ display:block; max-width:100%; }
  button{ font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
  ul{ list-style: none; }

  .container{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 32px;
    position: relative; z-index: 2;
  }

  /* Header */
  header.site{
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    backdrop-filter: blur(16px);
    background: rgba(10,15,26,0.72);
    border-bottom: 1px solid var(--line);
    transition: transform .4s var(--ease), background .3s var(--ease);
  }
  header.site.hidden{ transform: translateY(-100%); }
  header.site.scrolled{ background: rgba(10,15,26,0.92); }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 0; gap: 24px;
  }
  .logo{
    display:flex; align-items:center; gap: 12px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.02em;
    transition: transform .4s var(--ease);
    color: var(--text);
    cursor: pointer;
  }
  .logo:hover{ transform: scale(1.03); }
  .logo:hover .logo-mark{
    transform: rotate(-8deg) scale(1.05);
    box-shadow: 0 0 32px rgba(45,180,240,0.65);
  }
  .logo-mark{
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, #4ec6ff 0%, #1a72ab 100%);
    color: #f4fcff;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.24);
    font-family: var(--sans);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 20px rgba(45,180,240,0.38), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -7px 14px rgba(3,20,35,0.22);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .logo span{ letter-spacing: 0.02em; }
  .nav-links{ display:flex; gap: 32px; }
  .nav-links a{
    color: var(--text-dim);
    font-size: 14px; font-weight: 500;
    transition: color .2s var(--ease);
    position: relative;
    cursor: pointer;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px;
    height:1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .nav-links a:hover{ color: var(--text); }
  .nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
  .nav-links a.active { color: var(--text); }
  .nav-cta{ display:flex; align-items:center; gap: 20px; font-size: 14px; }
  .nav-cta .phone{ color: var(--text); font-weight: 500; white-space: nowrap; font-size: 19px; }

  /* Preloader */
  .preloader{
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 999;
    display: grid; place-items: center;
    transition: opacity .6s var(--ease), visibility .6s var(--ease);
  }
  .preloader.done{ opacity: 0; visibility: hidden; }
  .preloader-inner{
    display: flex; flex-direction: column; align-items: center; gap: 24px;
  }
  .preloader-mark{
    width: 64px; height: 64px;
    background: var(--accent);
    color: #0A0F1A;
    border-radius: 16px;
    display: grid; place-items: center;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 28px;
    box-shadow: 0 0 48px rgba(45,180,240,0.5);
    animation: preloaderPulse 1.6s var(--ease) infinite;
  }
  @keyframes preloaderPulse{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(0.92); box-shadow: 0 0 64px rgba(45,180,240,0.8); }
  }
  .preloader-label{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.2em;
    color: var(--text-mute);
    text-transform: uppercase;
  }
  .preloader-bar{
    width: 200px; height: 1px;
    background: var(--line);
    overflow: hidden;
    position: relative;
  }
  .preloader-bar::before{
    content: '';
    position: absolute; inset: 0;
    background: var(--accent);
    transform: translateX(-100%);
    animation: preloaderFill 1.6s var(--ease) infinite;
  }
  @keyframes preloaderFill{
    0%{ transform: translateX(-100%); }
    50%{ transform: translateX(0); }
    100%{ transform: translateX(100%); }
  }

  /* Hero with video */
  .hero{
    padding: 100px 0 140px;
    position: relative;
    overflow: hidden;
  }
  /* Hero video right side */
  .hero-img{
    position: absolute;
    top: 0; right: 0;
    width: 55%; height: 100%;
    z-index: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 25%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 25%);
  }
  .hero-img img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.55;
    animation: heroGlow 4s ease-in-out infinite;
  }
  @keyframes heroGlow{
    0%,100%{ filter: brightness(1) saturate(1); }
    50%{ filter: brightness(1.2) saturate(1.25); }
  }
  .hero-img::after{
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--bg) 0%, transparent 35%),
      linear-gradient(180deg, var(--bg) 0%, transparent 20%),
      linear-gradient(0deg, var(--bg) 0%, transparent 25%);
    pointer-events: none;
  }
  .hero-img::before{
    content: '';
    position: absolute;
    bottom: 15%; right: 20%;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,160,50,0.12), transparent 70%);
    animation: sparkGlow 3s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
  }
  @keyframes sparkGlow{
    0%,100%{ opacity: 0.3; transform: scale(1); }
    50%{ opacity: 1; transform: scale(1.3); }
  }
  
  .hero > .container{ position: relative; z-index: 2; }
  .hero-grid{
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 60% at 75% 40%, black 20%, transparent 70%);
    pointer-events: none; opacity: 0.7; z-index: -1;
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 16px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-dim);
    margin-bottom: 40px;
  }
  .hero-tag .dot{
    width:6px; height:6px; background: var(--accent);
    border-radius: 50%; box-shadow: 0 0 10px var(--accent);
    animation: pulse 2s infinite;
  }
  @keyframes pulse{
    0%,100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: 0.6; transform: scale(1.3); }
  }
  h1.hero-title{
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(16px, 3vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
    text-transform: uppercase;
  }
  h1.hero-title .em{ color: var(--accent); position: relative; display: inline-block; }
  h1.hero-title .em::after{
    content:""; position: absolute; left: 0; right: 0; bottom: 6%;
    height: 6%; background: var(--accent);
    opacity: 0.22; transform: scaleX(0); transform-origin: left;
    animation: underline 1.2s .9s var(--ease) forwards;
  }
  @keyframes underline{ to { transform: scaleX(1); } }
  h1.hero-title .word{
    display: inline-block;
    opacity: 0; transform: translateY(28px);
    animation: wordIn .9s var(--ease) forwards;
  }
  @keyframes wordIn{ to{ opacity: 1; transform: none; } }
  .hero-sub{
    max-width: 640px; font-size: 19px;
    color: var(--text-dim); margin-bottom: 48px;
  }
  .hero-sub strong{ color: var(--text); font-weight: 500; }
  .hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; margin-bottom: 80px;}

  .btn{
    display:inline-flex; align-items:center; gap: 10px;
    padding: 16px 26px; border-radius: 999px;
    font-weight: 500; font-size: 14px;
    letter-spacing: 0.02em;
    transition: all .25s var(--ease);
    border: 1px solid var(--line-strong);
    cursor: pointer;
  }
  .btn-primary{
    background: var(--accent); color: #0A0F1A; border-color: var(--accent);
    position: relative; overflow: hidden;
    animation: btnPulse 3s ease-in-out infinite;
  }
  @keyframes btnPulse{
    0%,100%{ box-shadow: 0 0 0 rgba(45,180,240,0); }
    50%{ box-shadow: 0 0 28px rgba(45,180,240,0.4), 0 0 60px rgba(45,180,240,0.15); }
  }
  .btn-primary::before{
    content:""; position: absolute; top:0; left:-100%; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer{
    0%{ left:-100%; }
    50%{ left:100%; }
    100%{ left:100%; }
  }
  .btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(45,180,240,0.45);
    animation: none;
  }
  .btn-primary:hover::before{ animation: none; opacity: 0; }
  .btn-ghost{ color: var(--text); }
  .btn-ghost:hover{ background: rgba(255,255,255,0.05); border-color: var(--text-dim); }
  .btn .arrow{ transition: transform .25s var(--ease); }
  .btn:hover .arrow{ transform: translate(3px, -3px); }

  /* Product link shimmer */
  .product-link{
    position: relative;
    overflow: hidden;
  }
  .product-link::after{
    content:""; position: absolute; top:0; left:-100%; width:100%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(45,180,240,0.3), transparent);
    animation: shimmer 4s ease-in-out infinite;
  }
  .product:nth-child(2) .product-link::after{ animation-delay: 1.3s; }
  .product:nth-child(3) .product-link::after{ animation-delay: 2.6s; }

  /* Hero counter */
  .hero-counter{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .hero-counter-item{ display: flex; flex-direction: column; gap: 8px; }
  .hero-counter-num{
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
  }
  .hero-counter-num .em{ color: var(--accent); }
  .hero-counter-label{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-mute);
  }

  /* Sections */
  section{ padding: 110px 0; position: relative; }
  .section-head{
    display:grid; grid-template-columns: auto 1fr;
    gap: 60px 80px; align-items: end;
    margin-bottom: 72px;
  }
  .eyebrow{
    font-size: 16px; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--accent);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px;
  }
  .eyebrow::before{
    content:""; width: 32px; height:1px;
    background: var(--accent); display:inline-block;
  }
  h2.section-title{
    font-family: var(--serif);
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 400; line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 820px;
  }
  h2.section-title .em{ color: var(--accent); }
  .section-sub{
    color: var(--text-dim); font-size: 16px;
    max-width: 420px; padding-bottom: 8px;
  }

  /* Products (3 lines) */
  .products-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .product{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px;
    position: relative; overflow: hidden;
    transition: all .35s var(--ease);
    min-height: 480px;
    display:flex; flex-direction: column;
    cursor: pointer;
  }
  .product::after{
    content:""; position:absolute; inset: 0;
    background: radial-gradient(400px 300px at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 60%);
    opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
  }
  .product:hover{
    border-color: var(--line-strong);
    transform: translateY(-4px);
  }
  .product:hover::after{ opacity: 1; }
  .product-top{
    display:flex; justify-content:space-between; align-items: flex-start;
    position: relative; z-index: 1;
  }
  .product-index{
    font-family: var(--serif);
    font-size: 19px; color: var(--text-mute);
    letter-spacing: 0.1em;
  }
  .product-icon{
    width: 44px; height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--accent);
    transition: all .3s var(--ease);
  }
  .product:hover .product-icon{
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: rotate(-5deg);
  }
  .product-visual{
    margin: 32px -36px;
    height: 200px;
    display: grid;
    place-items: center;
    background:
      linear-gradient(135deg, rgba(45,180,240,0.04), transparent 60%),
      var(--bg-card-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  .product-visual::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
  }
  .product-visual svg{ position: relative; z-index: 1; transition: transform .6s var(--ease); }
  .product:hover .product-visual svg{ transform: perspective(800px) rotateY(-15deg); }
  .product-visual img{
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.92) contrast(1.03);
    transition: transform .7s var(--ease), filter .4s var(--ease);
  }
  .product:hover .product-visual img{ transform: scale(1.07); filter: brightness(1) saturate(1.05); }
  .product-visual .pv-overlay{
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,15,26,0.12) 0%, transparent 38%, rgba(10,15,26,0.62) 100%);
  }
  .product-visual .pv-tag{
    position: absolute; left: 16px; bottom: 14px; z-index: 2;
    font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text);
    padding: 6px 11px; border-radius: 999px;
    background: rgba(10,15,26,0.62); backdrop-filter: blur(8px);
    border: 1px solid var(--line-strong);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .product-visual .pv-tag::before{
    content:""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
  }
  .product[data-page="fire"] .product-visual .pv-tag::before{ background: var(--fire); box-shadow: 0 0 8px var(--fire); }
  .product-stamp{
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.18em;
    color: var(--accent);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-block;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 16px;
    position: relative; z-index: 1;
  }
  .product h3{
    font-family: var(--serif);
    font-size: 26px; font-weight: 400;
    letter-spacing: -0.02em; line-height: 1.2;
    margin-bottom: 16px;
    position: relative; z-index: 1;
  }
  .product p{
    color: var(--text-dim); font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex: 1;
    position: relative; z-index: 1;
  }
  .product-link{
    font-family: var(--mono);
    font-size: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    display: inline-flex; align-items: center; gap: 8px;
    position: relative; z-index: 1;
    transition: color .2s var(--ease);
  }
  .product-link::after{ content: '↗'; transition: transform .25s var(--ease); }
  .product:hover .product-link{ color: var(--accent); }
  .product:hover .product-link::after{ transform: translate(3px, -3px); }

  /* Carousel */
  .carousel{
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  }
  .carousel-track{
    display: flex;
    gap: 16px;
    padding: 0 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .carousel-track::-webkit-scrollbar{ display: none; }
  .car-slide{
    flex: 0 0 320px;
    height: 240px;
    border-radius: var(--radius);
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
    border: 1px solid var(--line);
    transition: all .35s var(--ease);
    cursor: pointer;
  }
  .car-slide:hover{
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(45,180,240,0.15);
  }
  .car-slide img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease), filter .4s var(--ease);
    filter: brightness(0.85) saturate(0.9);
  }
  .car-slide:hover img{
    transform: scale(1.08);
    filter: brightness(1) saturate(1);
  }
  .car-slide::after{
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,15,26,0.6) 100%);
    pointer-events: none;
  }
  .carousel-controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding: 0 32px;
  }
  .car-btn{
    width: 44px; height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--text-dim);
    transition: all .25s var(--ease);
    background: var(--bg-card);
    cursor: pointer;
  }
  .car-btn:hover{
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
  .car-dots{
    display: flex;
    gap: 8px;
  }
  .car-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-mute);
    transition: all .3s var(--ease);
    cursor: pointer;
    border: none;
  }
  .car-dot.active{
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    width: 24px;
    border-radius: 4px;
  }

  /* Marquee */
  .marquee{
    padding: 36px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden; white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .marquee-track{
    display: inline-flex; gap: 64px;
    animation: marquee 38s linear infinite;
    font-family: var(--serif);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 300; letter-spacing: -0.02em;
    color: var(--text-dim);
  }
  .marquee-track span{ display: inline-flex; align-items:center; gap: 32px; }
  .marquee-track .dot-sep{
    display:inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 16px var(--accent);
  }
  .marquee-track .hl{ color: var(--text); }
  @keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

  /* Features (uniqueness 2x2) */
  .features-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .feature{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px;
    position: relative; overflow: hidden;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  .feature:hover{
    border-color: var(--line-strong);
    transform: translateY(-3px);
  }
  .feature::before{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(400px 300px at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 60%);
    opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
  }
  .feature:hover::before{ opacity: 1; }
  .feature.fire-highlight{
    background:
      linear-gradient(135deg, rgba(255,107,71,0.08), transparent 55%),
      var(--bg-card);
    border-color: rgba(255,107,71,0.25);
  }
  .feature-num{
    font-family: var(--serif);
    font-size: 19px; color: var(--accent);
    letter-spacing: 0.12em;
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
  }
  .feature.fire-highlight .feature-num{ color: var(--fire); }
  .feature-icon{
    width: 56px; height: 56px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    display: grid; place-items: center;
    margin-bottom: 28px;
    color: var(--accent);
    position: relative; z-index: 1;
    transition: all .3s var(--ease);
  }
  .feature.fire-highlight .feature-icon{ color: var(--fire); }
  .feature:hover .feature-icon{
    transform: rotate(-5deg) scale(1.05);
    border-color: var(--accent);
  }
  .feature.fire-highlight:hover .feature-icon{ border-color: var(--fire); }
  .feature h3{
    font-family: var(--serif);
    font-size: 24px; font-weight: 400;
    letter-spacing: -0.02em; line-height: 1.2;
    margin-bottom: 16px;
    position: relative; z-index: 1;
  }
  .feature p{
    color: var(--text-dim); font-size: 15px;
    line-height: 1.65;
    position: relative; z-index: 1;
  }

  /* Regions */
  .regions-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .regions-map{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    position: relative;
    min-height: 420px;
    overflow: hidden;
  }
  .regions-map::before{
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.4;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
  }
  .regions-map svg{ position: relative; z-index: 1; width: 100%; height: 100%; min-height: 340px; }
  .region-dot{
    fill: var(--accent);
    cursor: pointer;
    transition: all .3s var(--ease);
    filter: drop-shadow(0 0 8px var(--accent));
  }
  .region-dot.delivery{
    fill: var(--text-mute);
    filter: none;
  }
  .region-dot:hover{ r: 9; }
  .regions-info{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    display: flex; flex-direction: column;
  }
  .regions-info h4{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.18em;
    color: var(--text-mute);
    text-transform: uppercase;
    margin: 24px 0 16px;
    display: flex; align-items: center; gap: 10px;
  }
  .regions-info h4:first-child{ margin-top: 0; }
  .regions-info h4 .dot{
    width: 8px; height: 8px; border-radius: 50%;
  }
  .regions-info h4 .dot.active{ background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .regions-info h4 .dot.passive{ background: var(--text-mute); }
  .regions-info ul{ display: flex; flex-direction: column; gap: 0; }
  .regions-info li{
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    color: var(--text-dim);
    display: flex; justify-content: space-between; align-items: center;
  }
  .regions-info li:last-child{ border-bottom: none; }
  .regions-info li::after{
    content: ''; width: 16px; height: 1px;
    background: var(--text-mute);
  }

  /* Calculator */
  .calc-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .calc-card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px;
    position: relative;
    overflow: hidden;
  }
  .calc-card::after{
    content:""; position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 10px var(--accent);
    top: -1px;
    opacity: 0;
    animation: calcScan 6s ease-in-out infinite;
  }
  .calc-card:nth-child(2)::after{ animation-delay: 1.2s; }
  .calc-card:nth-child(3)::after{ animation-delay: 2.4s; }
  .calc-card:nth-child(4)::after{ animation-delay: 3.6s; }
  .calc-card:nth-child(5)::after{ animation-delay: 4.8s; }
  @keyframes calcScan{
    0%,100%{ top:-1px; opacity:0; }
    5%{ opacity:1; }
    40%{ top:calc(100% - 1px); opacity:1; }
    50%{ opacity:0; }
  }
  .calc-progress{
    display: flex; gap: 8px;
    margin-bottom: 40px;
  }
  .calc-progress-step{
    flex: 1; height: 3px;
    background: var(--line);
    border-radius: 2px;
    position: relative;
  }
  .calc-progress-step.active{
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }
  .calc-progress-step .num{
    position: absolute;
    top: -22px;
    left: 0;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-mute);
    letter-spacing: 0.1em;
  }
  .calc-progress-step.active .num{ color: var(--accent); }
  .calc-step-label{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.15em;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .calc-step-title{
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
  }
  .calc-options{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .calc-option{
    padding: 18px;
    background: var(--bg-card-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 14px;
    text-align: left;
    color: var(--text);
    transition: all .25s var(--ease);
  }
  .calc-option:hover{
    border-color: var(--line-strong);
  }
  .calc-option.selected{
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .calc-option .opt-num{
    display: block;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-mute);
    margin-bottom: 6px;
    letter-spacing: 0.1em;
  }
  .calc-option.selected .opt-num{ color: var(--accent); }
  .spec-card{
    background:
      linear-gradient(135deg, rgba(45,180,240,0.06), transparent 60%),
      var(--bg-card);
    border: 1px solid rgba(45,180,240,0.25);
    border-radius: var(--radius);
    padding: 44px;
    font-family: var(--mono);
    position: relative;
  }
  .spec-card::before{
    content: 'СПЕЦИФИКАЦИЯ';
    position: absolute;
    top: -10px;
    left: 32px;
    background: var(--bg);
    padding: 0 12px;
    font-size: 15px;
    letter-spacing: 0.2em;
    color: var(--accent);
  }
  .spec-line{
    display: flex; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 19px;
  }
  .spec-line:last-of-type{ border-bottom: none; }
  .spec-key{ color: var(--text-mute); letter-spacing: 0.05em; }
  .spec-value{ color: var(--text); }
  .spec-total{
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--accent);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .spec-total .key{
    color: var(--accent);
    letter-spacing: 0.15em;
    font-size: 16px;
  }
  .spec-total .value{
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
  }
  .spec-total .value .amount{ color: var(--accent); }

  /* Cases */
  .cases-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .case-card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .35s var(--ease);
    cursor: pointer;
    display: flex; flex-direction: column;
  }
  .case-card:hover{
    border-color: var(--line-strong);
    transform: translateY(-4px);
  }
  .case-visual{
    height: 220px;
    background: var(--bg-card-2);
    position: relative;
    overflow: hidden;
  }
  .case-visual svg{ width: 100%; height: 100%; }
  .case-visual img{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.78) saturate(0.9) contrast(1.04);
    transition: transform .7s var(--ease), filter .4s var(--ease);
  }
  .case-card:hover .case-visual img{ transform: scale(1.06); filter: brightness(0.94) saturate(1.02); }
  .case-visual::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(180deg, rgba(10,15,26,0.10) 0%, transparent 42%, rgba(10,15,26,0.72) 100%);
  }
  .case-badge{
    position: absolute;
    top: 16px; right: 16px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.15em;
    padding: 6px 12px;
    background: rgba(10,15,26,0.8);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    text-transform: uppercase;
  }
  .case-badge.premium{ color: var(--accent); border-color: rgba(45,180,240,0.4); }
  .case-badge.fire{ color: var(--fire); border-color: rgba(255,107,71,0.4); }
  .case-info{
    padding: 28px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .case-info h4{
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 20px;
    flex: 1;
  }
  .case-stats{
    display: flex; gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
  }
  .case-stat{ display: flex; flex-direction: column; gap: 4px; }
  .case-stat .label{ font-size: 15px; color: var(--text-mute); letter-spacing: 0.1em; }
  .case-stat .v{ font-size: 14px; color: var(--accent); }

  /* Timeline */
  .timeline-wrap{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 56px;
    position: relative;
  }
  .timeline-line{
    position: absolute;
    top: 88px;
    left: 56px;
    right: 56px;
    height: 1px;
    background: var(--line);
  }
  .timeline-steps{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    position: relative;
  }
  .timeline-step{
    padding-top: 56px;
    position: relative;
  }
  .timeline-step::before{
    content: '';
    position: absolute;
    top: 26px;
    left: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    transition: all .3s var(--ease);
  }
  .timeline-step:hover::before{
    background: var(--accent);
    box-shadow: 0 0 16px var(--accent);
  }
  .timeline-step .num{
    font-family: var(--serif);
    font-size: 19px;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .timeline-step h4{
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .timeline-step .duration{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--fire);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .timeline-step p{
    font-size: 19px;
    color: var(--text-dim);
    line-height: 1.5;
  }

  /* Dealers (premium block) */
  .dealers-block{
    padding: 64px;
    background:
      linear-gradient(135deg, rgba(45,180,240,0.10), transparent 50%),
      linear-gradient(225deg, rgba(255,107,71,0.06), transparent 50%),
      var(--bg-card);
    border: 1px solid rgba(45,180,240,0.25);
    border-radius: var(--radius);
    position: relative; overflow: hidden;
  }
  .dealers-block::before{
    content: ''; position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,180,240,0.2), transparent 65%);
    pointer-events: none;
  }
  .dealers-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .dealers-text > p{
    font-size: 17px;
    color: var(--text-dim);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 480px;
  }
  .dealers-points{
    display: flex; flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
  }
  .dealers-points li{
    display: flex; gap: 14px; align-items: baseline;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    color: var(--text-dim);
  }
  .dealers-points li .marker{
    font-family: var(--serif);
    font-size: 19px;
    color: var(--accent);
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .dealers-quote{
    padding: 36px;
    background: var(--bg-card-2);
    border-radius: 14px;
    border-left: 3px solid var(--accent);
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text);
    position: relative;
  }
  .dealers-quote::before{
    content: '"';
    position: absolute;
    top: -10px; left: 24px;
    font-size: 80px;
    color: var(--accent);
    opacity: 0.3;
    line-height: 1;
  }

  /* Documents */
  .docs-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
  .doc{
    aspect-ratio: 3/4;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    transition: all .3s var(--ease);
    cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
    overflow: hidden;
  }
  .doc:hover{
    border-color: var(--accent);
    transform: translateY(-4px);
  }
  .doc::before{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(200px 150px at 50% 0%, var(--accent-soft), transparent 70%);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .doc:hover::before{ opacity: 1; }
  .doc-svg{
    flex: 1;
    display: grid; place-items: center;
    position: relative; z-index: 1;
  }
  .doc-svg svg{ width: 60%; height: auto; }
  .doc-label{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    position: relative; z-index: 1;
  }

  /* Form */
  .form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .form-info h2.section-title{ margin-bottom: 24px; }
  .form-info > p{
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 40px;
  }
  .contacts-list{
    display: flex; flex-direction: column;
    gap: 0;
  }
  .contacts-list li{
    display: flex; justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 14px;
  }
  .contacts-list .key{
    color: var(--text-mute);
    letter-spacing: 0.1em;
    font-size: 16px;
    text-transform: uppercase;
  }
  .contacts-list .value{ color: var(--text); }
  form.req-form{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px;
  }
  .form-group{ margin-bottom: 24px; }
  .form-group label{
    display: block;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-mute);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .form-group input,
  .form-group textarea{
    width: 100%;
    background: var(--bg-card-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    padding: 14px 16px;
    transition: border-color .25s var(--ease);
  }
  .form-group input:focus,
  .form-group textarea:focus{
    outline: none;
    border-color: var(--accent);
  }
  .form-group textarea{ min-height: 100px; resize: vertical; }
  .form-checkbox{
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 24px;
    font-size: 19px;
    color: var(--text-dim);
  }
  .form-note{
    font-family: var(--mono);
    font-size: 16px;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-top: 20px;
    text-align: center;
  }

  /* Footer */
  footer{
    border-top: 1px solid var(--line);
    padding: 80px 0 32px;
    background: var(--bg);
  }
  .footer-top{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 64px;
  }
  .footer-brand{
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
  }
  .footer-brand .logo-mark{
    width: 48px; height: 48px;
    font-size: 18px;
    border-radius: 12px;
  }
  .footer-brand .name{
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .footer-tag{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.15em;
    color: var(--text-mute);
    margin-bottom: 24px;
  }
  .footer-col h5{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 24px;
    font-weight: 500;
  }
  .footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
  .footer-col a{
    color: var(--text-dim);
    font-size: 14px;
    transition: color .2s var(--ease);
  }
  .footer-col a:hover{ color: var(--accent); }
  .footer-bottom{
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--mono);
    font-size: 16px;
    color: var(--text-mute);
    letter-spacing: 0.1em;
  }

  /* Page system */
  .page{ display: none; }
  .page.active{ display: block; }

  /* === Production page === */
  .prod-stages{
    display: flex; flex-direction: column;
    gap: 16px;
  }
  .prod-stage{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    transition: all .35s var(--ease);
  }
  .prod-stage:hover{ border-color: var(--line-strong); }
  .prod-stage:nth-child(even){ direction: rtl; }
  .prod-stage:nth-child(even) > *{ direction: ltr; }
  .prod-stage-num{
    font-family: var(--serif);
    font-size: 19px;
    color: var(--accent);
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px;
  }
  .prod-stage-num::before{
    content: ''; width: 32px; height: 1px;
    background: var(--accent);
  }
  .prod-stage h3{
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 24px;
  }
  .prod-stage p{
    color: var(--text-dim);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 28px;
  }
  .tech-spec{
    background: var(--bg-card-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
    font-family: var(--mono);
  }
  .tech-spec .row{
    display: flex; justify-content: space-between;
    padding: 8px 0;
    font-size: 18px;
    border-bottom: 1px dashed var(--line);
  }
  .tech-spec .row:last-child{ border-bottom: none; }
  .tech-spec .k{ color: var(--text-mute); letter-spacing: 0.08em; }
  .tech-spec .v{ color: var(--accent); }
  .prod-visual{
    background: var(--bg-card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
  }
  .prod-visual::before{
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
  }
  .prod-visual svg{ width: 100%; height: 100%; position: relative; z-index: 1; }

  /* QC */
  .qc-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .qc-card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
    transition: all .3s var(--ease);
    position: relative;
    overflow: hidden;
  }
  .qc-card:hover{
    border-color: var(--accent);
    transform: translateY(-3px);
  }
  .qc-card::before{
    content: ''; position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }
  .qc-num{
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 300;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 24px;
  }
  .qc-card h4{
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 12px;
  }
  .qc-card p{
    font-size: 19px;
    color: var(--text-dim);
    line-height: 1.5;
  }

  /* === Fire doors page === */
  .fire-categories{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .fire-cat{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 32px;
    transition: all .35s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 280px;
  }
  .fire-cat::before{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(300px 200px at 50% 0%, var(--fire-soft), transparent 70%);
    opacity: 0; transition: opacity .35s var(--ease);
  }
  .fire-cat:hover{
    border-color: var(--fire);
    transform: translateY(-4px);
  }
  .fire-cat:hover::before{ opacity: 1; }
  .fire-cat-class{
    font-family: var(--serif);
    font-size: clamp(56px, 6vw, 80px);
    font-weight: 300;
    color: var(--fire);
    letter-spacing: -0.04em;
    line-height: 0.9;
    margin-bottom: 8px;
    position: relative; z-index: 1;
  }
  /* Photo banner replacing the abbreviation on model/class cards */
  .fire-cat-photo{
    position: relative;
    margin: -36px -32px 24px;
    height: 170px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .fire-cat-photo img{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.95) contrast(1.03);
    transition: transform .7s var(--ease), filter .4s var(--ease);
  }
  .fire-cat:hover .fire-cat-photo img{ transform: scale(1.06); filter: brightness(1) saturate(1.05); }
  .fire-cat-photo::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(10,15,26,0.10) 0%, transparent 42%, rgba(15,22,34,0.88) 100%);
  }
  .fire-cat-badge{
    position: absolute; left: 16px; bottom: 12px; z-index: 2;
    font-family: var(--serif); font-weight: 400;
    font-size: 30px; line-height: 1; letter-spacing: -0.02em;
    color: var(--fire);
    text-shadow: 0 2px 16px rgba(0,0,0,.65), 0 0 22px rgba(255,107,71,.4);
  }
  .fire-cat-time{
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.15em;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-bottom: 28px;
    position: relative; z-index: 1;
  }
  .fire-cat h4{
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    position: relative; z-index: 1;
  }
  .fire-cat p{
    font-size: 19px;
    color: var(--text-dim);
    line-height: 1.55;
    flex: 1;
    position: relative; z-index: 1;
  }
  .fire-cat-link{
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    display: inline-flex; align-items: center; gap: 8px;
    position: relative; z-index: 1;
  }
  .fire-cat-link::after{ content: '↗'; }

  /* Comparison table */
  .comparison{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 48px;
    position: relative;
    overflow-x: auto;
  }
  .comp-table{
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    font-family: var(--mono);
    min-width: 600px;
  }
  .comp-row{ display: contents; }
  .comp-cell{
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    font-size: 19px;
  }
  .comp-row.head .comp-cell{
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 36px);
    color: var(--fire);
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--accent);
    padding-top: 24px;
    padding-bottom: 24px;
    font-weight: 300;
  }
  .comp-row.head .comp-cell:first-child{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    align-self: end;
    padding-bottom: 32px;
  }
  .comp-cell.k{ color: var(--text-mute); }
  .comp-cell.v{ color: var(--text); }
  .comp-row:last-child .comp-cell{ border-bottom: none; }

  /* Door technical */
  .door-tech{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 64px;
  }
  .door-tech-grid{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: center;
  }
  .door-tech-svg-wrap{
    background: var(--bg-card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    position: relative;
  }
  .door-tech-svg-wrap::before{
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
    border-radius: var(--radius);
  }
  .door-tech-svg{
    width: 100%; max-width: 320px;
    margin: 0 auto;
    position: relative; z-index: 1;
  }
  .door-tech-info h3{
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .door-tech-info > p{
    color: var(--text-dim);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 32px;
  }
  .tech-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .tech-item{
    padding-left: 16px;
    border-left: 2px solid var(--accent);
  }
  .tech-item .num{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text-mute);
    letter-spacing: 0.15em;
    margin-bottom: 6px;
  }
  .tech-item h5{
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .tech-item p{
    font-size: 18px;
    color: var(--text-dim);
    line-height: 1.5;
  }

  /* Applications */
  .applications{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .app-card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px;
    transition: all .3s var(--ease);
    position: relative;
    overflow: hidden;
  }
  .app-card:hover{
    border-color: var(--line-strong);
    transform: translateY(-3px);
  }
  .app-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 32px; height: 2px;
    background: var(--fire);
  }
  .app-card h4{
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .app-card ul{ display: flex; flex-direction: column; gap: 0; }
  .app-card li{
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: baseline; gap: 12px;
  }
  .app-card li::before{
    content: '';
    width: 6px; height: 1px;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 8px;
  }
  .app-card li:last-child{ border-bottom: none; }

  /* Production hero counter */
  .prod-counter{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: -40px;
    position: relative; z-index: 5;
  }
  .prod-counter-item{ display: flex; flex-direction: column; gap: 6px; }
  .prod-counter-num{
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
  }
  .prod-counter-num .em{ color: var(--accent); }
  .prod-counter-label{
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-mute);
  }

  /* Mobile */
  @media (max-width: 1024px){
    .hero-img{ width: 100%; mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%); opacity: 0.4; }
    .nav-links{ display:none; }
    .container{ padding: 0 20px; }
    section{ padding: 70px 0; }
    .hero{ padding: 60px 0 80px; }
    .hero-sub{ font-size: 16px; }
    .hero-counter{ grid-template-columns: 1fr 1fr; gap: 20px; }
    .section-head{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .products-grid{ grid-template-columns: 1fr; }
    .features-grid{ grid-template-columns: 1fr; }
    .regions-grid{ grid-template-columns: 1fr; }
    .calc-grid{ grid-template-columns: 1fr; }
    .cases-grid{ grid-template-columns: 1fr; }
    .timeline-wrap{ padding: 32px; }
    .timeline-line{ display: none; }
    .timeline-steps{ grid-template-columns: 1fr; gap: 20px; }
    .timeline-step{ padding-top: 16px; padding-left: 24px; border-left: 1px solid var(--line); }
    .timeline-step::before{ top: 0; left: -7px; }
    .dealers-block{ padding: 32px; }
    .dealers-grid{ grid-template-columns: 1fr; gap: 28px; }
    .docs-grid{ grid-template-columns: repeat(3, 1fr); }
    .form-grid{ grid-template-columns: 1fr; gap: 28px; }
    .footer-top{ grid-template-columns: 1fr 1fr; gap: 28px; }
    .qc-grid{ grid-template-columns: 1fr 1fr; }
    .fire-categories{ grid-template-columns: 1fr; }
    .applications{ grid-template-columns: 1fr; }
    .prod-stage{ grid-template-columns: 1fr; gap: 28px; padding: 28px; direction: ltr; }
    .door-tech{ padding: 28px; }
    .door-tech-grid{ grid-template-columns: 1fr; gap: 28px; }
    .prod-counter{ grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; }
    .comp-table{ font-size: 16px; min-width: 400px; }
    .comparison{ padding: 24px; overflow-x: auto; }
    h1.hero-title{ font-size: clamp(28px, 5.6vw, 48px); }
    .slogan-pulse{ font-size: 15px; }
  }
  @media (max-width: 680px){
    .car-slide{ flex: 0 0 260px; height: 200px; }
    .hero-img img{ opacity: 0.3; }
    body{ padding-top: 60px; }
    .nav{ padding: 12px 0; }
    .hero{ padding: 40px 0 60px; }
    h1.hero-title{ font-size: 28px; margin-bottom: 20px; }
    .hero-sub{ font-size: 14px; margin-bottom: 20px; }
    .slogan-pulse{ font-size: 19px; margin-bottom: 24px; }
    .hero-counter{ grid-template-columns: 1fr; gap: 16px; }
    .hero-counter-num{ font-size: 28px; }
    .hero-tag{ font-size: 15px; padding: 6px 10px; margin-bottom: 24px; }
    .hero-actions{ flex-direction: column; }
    .hero-actions .btn{ width: 100%; justify-content: center; }
    .section-head{ margin-bottom: 32px; }
    h2.section-title{ font-size: 22px; }
    .fire-categories{ grid-template-columns: 1fr; }
    .fire-cat{ min-height: auto; padding: 28px; }
    .fire-cat-class{ font-size: 48px; }
    .qc-grid{ grid-template-columns: 1fr; }
    .footer-top{ grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom{ flex-direction: column; gap: 8px; }
    .comp-row.head .comp-cell{ font-size: 18px; padding: 12px 12px; }
    .comp-cell{ padding: 10px 12px; font-size: 16px; }
    .door-tech-svg{ max-width: 220px; }
    .tech-list{ grid-template-columns: 1fr; gap: 16px; }
    .product-card, .product{ min-height: auto; }
    .nav-cta .phone{ display: none; }
    .dealers-quote{ font-size: 18px; padding: 24px; }
    .terminal{ padding: 20px; font-size: 16px; }
  }


/* ---- block 2 ---- */

.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(10,15,26,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.2,.7,.2,1)}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-overlay.open .modal{transform:none!important}
.slogan-pulse{font-family:var(--serif);font-size:clamp(15px,2.5vw,24px);font-weight:300;color:var(--text-dim);margin-bottom:36px;max-width:700px;letter-spacing:-.01em;line-height:1.35}
.slogan-pulse .pw{display:inline-block;animation:slP 3s ease-in-out infinite;color:var(--accent)}
.slogan-pulse .pw:nth-child(2){animation-delay:.3s}
.slogan-pulse .pw:nth-child(3){animation-delay:.6s}
.slogan-pulse .pw:nth-child(4){animation-delay:.9s}
.slogan-pulse .pw:nth-child(5){animation-delay:1.2s}
@keyframes slP{0%,100%{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px);text-shadow:0 0 20px rgba(45,180,240,.6)}60%{opacity:.7}}

/* ---- block 3 ---- */

  .quiz{
    max-width: 760px; margin: 8px auto 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 48px 48px 36px;
  }
  .quiz-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:16px; }
  .quiz-eyebrow{ font-family: var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--text-dim); }
  .quiz-count{ font-family: var(--mono); font-size:12px; letter-spacing:.12em; color: var(--text-mute); white-space:nowrap; }
  .quiz-count b{ color: var(--accent); font-weight:500; }
  .quiz-bar{ height:2px; background: var(--line); border-radius:2px; overflow:hidden; margin-bottom:42px; }
  .quiz-bar-fill{ display:block; height:100%; width:20%; background: linear-gradient(90deg,var(--accent),#6FD0F5); box-shadow:0 0 12px var(--accent); transition: width .45s var(--ease); }
  .quiz-stage{ min-height:332px; transition: opacity .26s var(--ease), transform .26s var(--ease); }
  .quiz-stage.fade{ opacity:0; transform: translateY(10px); }
  .quiz-q{ font-family: var(--serif); font-weight:400; font-size: clamp(24px,3.2vw,34px); letter-spacing:-.02em; line-height:1.15; margin-bottom:30px; }
  .quiz-opts{ display:flex; flex-direction:column; gap:10px; }
  .quiz-opt{
    display:flex; align-items:center; gap:18px; width:100%; text-align:left;
    padding:20px 22px; background:transparent; border:1px solid var(--line); border-radius:14px;
    color: var(--text); font-family: var(--sans); font-size:17px; cursor:pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  }
  .quiz-opt:hover{ border-color: var(--line-strong); transform: translateX(4px); }
  .quiz-opt .qo-num{ font-family: var(--mono); font-size:13px; color: var(--text-mute); letter-spacing:.1em; min-width:18px; }
  .quiz-opt .qo-txt{ flex:1; }
  .quiz-opt .qo-check{ color: var(--accent); opacity:0; transition: opacity .2s var(--ease); }
  .quiz-opt.selected{ border-color: var(--accent); background: var(--accent-soft); transform: translateX(4px); }
  .quiz-opt.selected .qo-num{ color: var(--accent); }
  .quiz-opt.selected .qo-check{ opacity:1; }
  .quiz-opt.skip{ border-style:dashed; color: var(--text-dim); font-style:italic; }
  .quiz-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
  .quiz-back{ font-family: var(--mono); font-size:13px; letter-spacing:.08em; color: var(--text-dim); background:none; border:none; padding:6px 2px; cursor:pointer; transition: color .2s var(--ease); }
  .quiz-back:hover{ color: var(--text); }
  .quiz-back:disabled{ opacity:.3; pointer-events:none; }
  .quiz-hint{ font-family: var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--text-mute); }
  .quiz-result h3{ font-family: var(--serif); font-weight:400; font-size: clamp(22px,2.8vw,30px); letter-spacing:-.02em; margin-bottom:24px; }
  .quiz-summary{ display:flex; flex-direction:column; margin-bottom:8px; }
  .quiz-summary .row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px dashed var(--line); font-family: var(--mono); font-size:14px; }
  .quiz-summary .row .k{ color: var(--text-mute); letter-spacing:.04em; }
  .quiz-summary .row .v{ color: var(--text); text-align:right; }
  .quiz-price{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:24px; padding-top:22px; border-top:1px solid var(--accent); margin-bottom:30px; }
  .quiz-price .lbl{ font-family: var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color: var(--accent); }
  .quiz-price .amt{ font-family: var(--serif); font-size: clamp(28px,4vw,40px); font-weight:400; letter-spacing:-.02em; }
  .quiz-price .amt b{ color: var(--accent); font-weight:400; }
  .quiz-result .btn{ width:100%; justify-content:center; }
  .quiz-note{ text-align:center; margin-top:16px; font-family: var(--mono); font-size:12px; letter-spacing:.1em; color: var(--accent); }
  .quiz-restart{ display:block; margin:18px auto 0; font-family: var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); background:none; border:none; cursor:pointer; transition: color .2s var(--ease); }
  .quiz-restart:hover{ color: var(--text-dim); }
  @media (max-width:680px){
    .quiz{ padding:30px 20px 26px; }
    .quiz-stage{ min-height:300px; }
    .quiz-opt{ padding:16px 18px; font-size:16px; gap:14px; }
  }

/* ---- block 4 ---- */

  /* Lenis smooth scroll */
  html.lenis, html.lenis body{ height: auto; }
  .lenis.lenis-smooth{ scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
  .lenis.lenis-stopped{ overflow: clip; }

  /* keep header phone compact after the small-text 2× bump */
  header.site .nav-cta .phone{ font-size: 14px; }

  /* Hero live FX / Rive canvas */
  .hero-fx{
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 4; pointer-events: none;
    mix-blend-mode: screen; opacity: .92;
  }
  .hero-fx.rive-on{ mix-blend-mode: normal; opacity: 1; }
  .hero-img.rive-active img{ opacity: .18; }

  /* SplitType hero title */
  #heroTitle{ perspective: 700px; opacity: 0; }
  h1.hero-title .line{ display: block; overflow: hidden; padding-bottom: .08em; }
  h1.hero-title .char{ display: inline-block; will-change: transform, opacity; }
  h1.hero-title .line.hero-em{ color: var(--accent); text-shadow: 0 0 30px rgba(45,180,240,.45); }
  @media (prefers-reduced-motion: reduce){ #heroTitle{ opacity: 1; } }