/* home.css — стили главной страницы, вынесены из inline-атрибутов main.html.
   Подключать ПОСЛЕ main.css и production.css.
   Цвета — переменные из :root в main.css. */

/* ============ Каркас и шапка ============ */
.page {
    position:relative;
    width:100%;
    overflow-x:hidden;
    background:#11151B;
    font-family:'Inter',system-ui,sans-serif;
  }
  .site-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:60;
    transition:background 400ms cubic-bezier(.22,1,.36,1), backdrop-filter 400ms, border-color 400ms;
    border-bottom:1px solid transparent;
    background:transparent;
  }
  .site-header__inner {
    max-width:1520px;
    margin:0 auto;
    padding:16px clamp(20px,4vw,56px);
    display:flex;
    align-items:center;
    gap:32px;
  }
  .brand {
    display:flex;
    align-items:center;
    gap:9px;
    color:#E9E9ED;
  }
  .brand__logo {
    height:56px;
    width:auto;
    display:block;
  }
  .site-nav {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:clamp(14px,2vw,30px);
    font-size:13px;
    letter-spacing:.04em;
    color:#B2B6CA;
    white-space:nowrap;
  }
  .nav-link {
    color:inherit;
  }
  .nav-cta {
    flex:none;
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent-text);
    border:1px solid rgba(var(--accent-rgb),.55);
    padding:10px 16px;
    transition:background 250ms, color 250ms;
  }
  .nav-link--panel {
    color: var(--accent-text);
  }
  
  /* ============ Hero ============ */
  .hero {
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    background:#11151B;
  }
  .hero__grid-bg {
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(147,151,171,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(147,151,171,.055) 1px, transparent 1px);
    background-size:88px 88px;
    background-position:center;
  }
  .hero__canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  .hero__vignette {
    position:absolute;
    inset:0;
    background:radial-gradient(120% 90% at 50% 55%, transparent 35%, rgba(17,21,27,.72) 100%);
  }
  .hero-grid {
    position:relative;
    z-index:2;
    max-width:1520px;
    width:100%;
    margin:0 auto;
    padding:0 clamp(20px,4vw,56px) clamp(40px,6vh,72px);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:40px;
    align-items:end;
  }
  .hero__text {
    max-width:820px;
  }
  .hero__eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.28em;
    color:#75798C;
    margin-bottom:26px;
  }
  .hero__eyebrow-line {
    width:34px;
    height:1px;
    background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),0));
  }
  .hero__title {
    margin:0;
    font-size:clamp(52px,9.5vw,148px);
    line-height:.9;
    font-weight:500;
    letter-spacing:-.03em;
    text-wrap:balance;
  }
  .text-dim {
    color:#75798C;
  }
  .text-accent {
    color:var(--accent-text);
  }
  .hero__lead {
    margin:22px 0 0;
    font-size:clamp(19px,2.1vw,29px);
    line-height:1.25;
    font-weight:400;
    color:#E9E9ED;
    max-width:640px;
    letter-spacing:-.01em;
  }
  .hero__desc {
    margin:18px 0 0;
    font-size:15.5px;
    line-height:1.6;
    color:#B2B6CA;
    max-width:520px;
    text-wrap:pretty;
  }
  .hero__actions {
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .btn-outline {
    font-size:14px;
    letter-spacing:.02em;
    color:#E9E9ED;
    border:1px solid #3F424D;
    padding:15px 30px;
    transition:border-color 250ms, background 250ms;
  }
  .hero__bottom-bar {
    position:relative;
    z-index:2;
    border-top:1px solid #23262E;
    background:rgba(17,21,27,.5);
  }
  
  /* ============ Схема: тепловая труба ============ */
  .section-diagram {
    position:relative;
    padding:clamp(80px,11vh,140px) clamp(20px,4vw,56px);
    background:#171C23;
    border-bottom:1px solid #1D2129;
  }
  .container {
    max-width:1520px;
    margin:0 auto;
  }
  .heatpipe-grid {
    margin-top:clamp(56px,8vh,96px);
  }
  .eyebrow-accent {
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:.26em;
    color:var(--accent-text);
    margin-bottom:20px;
  }
  .heatpipe__title {
    margin:0;
    font-size:clamp(26px,3.2vw,42px);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.02em;
    text-wrap:balance;
  }
  .accent-rule {
    width:56px;
    height:2px;
    background:var(--accent);
    margin:20px 0;
  }
  .heatpipe__text {
    margin:0;
    font-size:15.5px;
    line-height:1.65;
    color:#B2B6CA;
    text-wrap:pretty;
  }
  .heatpipe__text strong {
    color:#E9E9ED;
    font-weight:600;
  }
  .heatpipe__limits-label {
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.2em;
    color:#595D6C;
    margin-top:32px;
  }
  .heatpipe-diagram svg {
    width:100%;
    height:auto;
    display:block;
  }
  .heatpipe__legend-label {
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:.2em;
    color:#595D6C;
    margin-top:22px;
  }
  .heatpipe-dot--evap {
    background:var(--accent);
  }
  .heatpipe-legend__name {
    font-size:14.5px;
    font-weight:500;
    color:#E9E9ED;
  }
  .heatpipe-legend__desc {
    font-size:13px;
    line-height:1.5;
    color:#9397AB;
    margin-top:3px;
  }
  .heatpipe-dot--transport {
    background:#9C8A6E;
  }
  .heatpipe-dot--cond {
    background:var(--cool);
  }
  .heatpipe-dot--power {
    background:var(--cool-light);
  }
  
  /* ============ Цифры ============ */
  .section-stats {
    position:relative;
    padding:clamp(72px,9vh,120px) clamp(20px,4vw,56px);
    background:#171C23;
    border-bottom:1px solid #1D2129;
  }
  .section-title {
    margin:0 0 20px;
    font-size:clamp(28px,3.6vw,46px);
    line-height:1.06;
    font-weight:500;
    letter-spacing:-.025em;
  }
  .accent-rule--wide {
    width:64px;
    height:2px;
    background:var(--accent);
    margin-bottom:clamp(32px,5vh,56px);
  }
  .stat__value-row {
    font-family:'JetBrains Mono',monospace;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
  }
  .stat__value {
    font-size:clamp(36px,4vw,54px);
    line-height:1;
    color:#E9E9ED;
    letter-spacing:-.02em;
  }
  .stat__index {
    font-size:11px;
    color:#595D6C;
  }
  .stat__label {
    margin-top:14px;
    font-size:14.5px;
    color:#9397AB;
  }
  
  /* ============ CTA ============ */
  .cta-section {
    position:relative;
    padding:clamp(96px,16vh,190px) clamp(20px,4vw,56px);
    background:#0E1116;
    overflow:hidden;
  }
  .cta__lines {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.6;
  }
  .flow-9s {
    animation:dashflow-slow 9s linear infinite;
  }
  .flow-11s {
    animation:dashflow-slow 11s linear infinite;
  }
  .flow-13s {
    animation:dashflow-slow 13s linear infinite;
  }
  .flow-10s {
    animation:dashflow-slow 10s linear infinite;
  }
  .flow-12s {
    animation:dashflow-slow 12s linear infinite;
  }
  .flow-14s {
    animation:dashflow-slow 14s linear infinite;
  }
  .cta__glow {
    position:absolute;
    left:50%;
    top:50%;
    width:min(60vw,760px);
    height:min(60vw,760px);
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(var(--accent-rgb),.09), rgba(0,102,255,.07) 45%, transparent 70%);
  }
  .cta__inner {
    position:relative;
    max-width:1000px;
    margin:0 auto;
    text-align:center;
  }
  .eyebrow {
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:.28em;
    color:#75798C;
    margin-bottom:26px;
  }
  .cta__title {
    margin:0;
    font-size:clamp(32px,5.4vw,80px);
    line-height:1;
    font-weight:500;
    letter-spacing:-.032em;
    text-wrap:balance;
  }
  .cta__text {
    margin:24px auto 0;
    max-width:560px;
    font-size:16.5px;
    line-height:1.6;
    color:#B2B6CA;
    text-wrap:pretty;
  }
  .cta__actions {
    margin-top:38px;
    display:flex;
    justify-content:center;
  }
  .btn-fill--lg {
    font-size:15px;
    color:var(--on-accent);
    background:var(--accent);
    padding:17px 38px;
    font-weight:500;
    transition:background 250ms, transform 250ms;
  }
  
  /* ============ Футер ============ */
  .site-footer {
    background:#0E1116;
    border-top:1px solid #1D2129;
    padding:clamp(44px,6vh,72px) clamp(20px,4vw,56px) 34px;
  }
  .site-footer__grid {
    max-width:1520px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:clamp(28px,4vw,60px);
  }
  .footer-brand {
    display:flex;
    align-items:baseline;
    gap:9px;
  }
  .footer-brand__name {
    font-size:17px;
    letter-spacing:.16em;
    font-weight:600;
  }
  .footer-brand__suffix {
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:.22em;
    color:var(--accent-text);
  }
  .footer-brand__tagline {
    margin:14px 0 0;
    font-size:14px;
    line-height:1.6;
    color:#9397AB;
    max-width:280px;
  }
  .footer-col {
    font-size:14px;
    display:grid;
    gap:11px;
    align-content:start;
  }
  .footer-col__title {
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:.22em;
    color:#595D6C;
    margin-bottom:6px;
  }
  .footer-link {
    color:#B2B6CA;
  }
  .site-footer__bottom {
    max-width:1520px;
    margin:clamp(34px,5vh,56px) auto 0;
    padding-top:20px;
    border-top:1px solid #1D2129;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:.16em;
    color:#595D6C;
  }
  
  /* ============ Форма заявки ============ */
  .hp-field {
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .btn-fill--form {
    border:none;
    cursor:pointer;
    font-size:14px;
    letter-spacing:.02em;
    color:var(--on-accent);
    background:var(--accent);
    padding:14px 30px;
    font-weight:500;
    transition:background 250ms, transform 250ms;
  }