/* Start:/local/templates/rina/css/main.css?178943472340981*/
  /* ============ FONTS (local) ============ */
  @font-face{
    font-family:'Exo 2';
    font-style:normal;
    font-weight:300 600;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-cyrillic-ext.woff2') format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:normal;
    font-weight:300 600;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-cyrillic.woff2') format('woff2');
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:normal;
    font-weight:300 600;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-vietnamese.woff2') format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:normal;
    font-weight:300 600;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:normal;
    font-weight:300 600;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-italic-cyrillic-ext.woff2') format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-italic-cyrillic.woff2') format('woff2');
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-italic-vietnamese.woff2') format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-italic-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face{
    font-family:'Exo 2';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/exo2-italic-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Orbitron';
    font-style:normal;
    font-weight:500 800;
    font-display:swap;
    src:url('/local/templates/rina/css/../fonts/orbitron.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root{
    /* Colors */
    --bg-top:#070a12;
    --bg-bottom:#0b1220;
    --surface:rgba(255,255,255,0.04);
    --surface-strong:rgba(255,255,255,0.07);
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.16);
    --text-primary:#f8fafc;
    --text-secondary:#94a3b8;
    --text-muted:#64748b;
    --accent:#38bdf8;
    --accent-2:#29a8e2;
    --accent-violet:#7c3aed;
    --accent-cyan:#06b6d4;

    /* Fire palette (primary brand accent) */
    --fire-yellow:#FBBF24;
    --fire-orange:#F97316;
    --fire-red:#DC2626;
    --gradient-fire: linear-gradient(135deg, var(--fire-yellow) 0%, var(--fire-orange) 50%, var(--fire-red) 100%);
    --gradient-fire-wide: linear-gradient(90deg, var(--fire-yellow), var(--fire-orange), var(--fire-red), var(--fire-orange), var(--fire-yellow));

    /* Type */
    --font-head:'Orbitron', sans-serif;
    --font-body:'Exo 2', 'Inter', sans-serif;

    /* Radii & shadows */
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --shadow-glow: 0 0 60px rgba(56,189,248,0.18);
    --shadow-card: 0 20px 60px -20px rgba(0,0,0,0.6);

    /* Motion */
    --dur-fast:180ms;
    --dur-med:280ms;
    --dur-slow:600ms;
    --ease-out: cubic-bezier(.16,1,.3,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:var(--font-body);
    color:var(--text-primary);
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(56,189,248,0.12), transparent 60%),
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    background-attachment:fixed;
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img,svg{display:block;max-width:100%;}

  a{color:inherit;text-decoration:none;}

  ul{list-style:none;}

  h1,h2,h3,h4{
    font-family:var(--font-head);
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.2;
  }

  /* Focus visibility */
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:6px;
  }

  button{font-family:inherit;cursor:pointer;}

  .container{
    max-width:1240px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ============ UTILS ============ */
  .gradient-text{
    background:linear-gradient(90deg, var(--accent) 0%, var(--accent-violet) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }

  /* Fire gradient text — primary brand accent, animated "breathing" gradient */
  .gradient-text-fire{
    background:var(--gradient-fire-wide);
    background-size:300% 100%;
    background-position:0% 50%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:fireTextShift 8s ease-in-out infinite;
  }
  @keyframes fireTextShift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
  }

  /* ============ SCROLL PROGRESS BAR ============ */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:3px;
    width:0%;
    background:var(--gradient-fire);
    z-index:1100;
    transition:width 80ms linear;
    pointer-events:none;
  }

  /* ============ CUSTOM CURSOR ============ */
  .cursor-dot,
  .cursor-ring{
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    z-index:1500;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:6px;height:6px;
    background:var(--fire-orange);
    transition:background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  }
  .cursor-dot.is-active{
    width:10px;height:10px;
    box-shadow:0 0 10px var(--fire-orange), 0 0 24px rgba(249,115,22,0.55);
  }
  .cursor-ring{
    width:36px;height:36px;
    border:1px solid var(--border-strong);
    transition:width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor [data-tilt]{
    cursor:none;
  }
  @media (pointer: coarse){
    .cursor-dot, .cursor-ring{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .cursor-dot, .cursor-ring{display:none;}
    html.has-custom-cursor,
    html.has-custom-cursor a,
    html.has-custom-cursor button,
    html.has-custom-cursor [data-tilt]{
      cursor:auto;
    }
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-head);
    font-size:0.72rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
  }
  .eyebrow::before{
    content:'';
    display:block;
    width:24px;height:1px;
    background:linear-gradient(90deg, transparent, var(--accent));
  }

  .section{
    padding:120px 0;
    position:relative;
  }
  @media (max-width:768px){
    .section{padding:80px 0;}
  }

  .section-head{
    text-align:center;
    max-width:680px;
    margin:0 auto 64px;
  }
  .section-head h2{
    font-size:clamp(1.9rem, 4vw, 2.8rem);
    margin-bottom:16px;
  }
  .section-head p{
    color:var(--text-secondary);
    font-size:1.05rem;
  }

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 32px;
    border-radius:999px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    border:1px solid transparent;
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--gradient-fire);
    color:#1a0b03;
    box-shadow:0 8px 30px -8px rgba(249,115,22,0.55);
  }
  .btn-primary:hover{
    box-shadow:0 12px 44px -6px rgba(249,115,22,0.75), 0 4px 24px -4px rgba(220,38,38,0.5);
    transform:translateY(-2px);
  }
  .btn-primary:active{transform:scale(0.97);}

  .btn-ghost{
    background:rgba(255,255,255,0.03);
    border-color:var(--border-strong);
    color:var(--text-primary);
    backdrop-filter:blur(8px);
  }
  .btn-ghost:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.3);
    transform:translateY(-2px);
  }

  .btn-icon{width:18px;height:18px;}

  /* ============ NAVBAR ============ */
  .navbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    padding:18px 0;
    transition:background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
    border-bottom:1px solid transparent;
  }
  .navbar.scrolled{
    background:rgba(7,10,18,0.72);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 8px 32px -16px rgba(0,0,0,0.6);
    border-bottom-color:var(--border);
    padding:12px 0;
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .logo{
    font-family:var(--font-head);
    font-size:1.4rem;
    font-weight:800;
    letter-spacing:0.04em;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .logo-mark{
    width:38px;height:38px;
    object-fit:contain;
    flex-shrink:0;
  }
  .logo-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1;
  }
  .logo-text .logo-name{
    font-family:var(--font-head);
    font-size:1.4rem;
    font-weight:800;
    letter-spacing:0.04em;
  }
  .logo .sub{
    font-family:var(--font-body);
    font-size:0.6rem;
    font-weight:600;
    letter-spacing:0.18em;
    color:var(--text-muted);
    text-transform:uppercase;
    display:none;
  }
  @media (min-width:640px){
    .logo .sub{display:inline;}
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:36px;
  }
  .nav-links a{
    font-size:0.92rem;
    font-weight:500;
    color:var(--text-secondary);
    position:relative;
    transition:color var(--dur-fast) var(--ease-out);
    padding:6px 2px;
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:100%;height:1px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--dur-med) var(--ease-out);
  }
  .nav-links a:hover{color:var(--text-primary);}
  .nav-links a:hover::after{transform:scaleX(1);}

  .nav-cta{display:none;}
  @media (min-width:900px){
    .nav-cta{display:inline-flex;}
  }
  @media (max-width:899px){
    .nav-links{display:none;}
  }

  /* Burger */
  .burger{
    display:none;
    width:44px;height:44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.03);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    transition:background var(--dur-fast) var(--ease-out);
  }
  .burger:hover{background:rgba(255,255,255,0.08);}
  @media (max-width:899px){
    .burger{display:flex;}
  }
  .burger span{
    display:block;
    width:18px;height:2px;
    background:var(--text-primary);
    border-radius:2px;
    transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-menu{
    position:fixed;
    inset:0;
    top:0;
    z-index:999;
    background:rgba(7,10,18,0.97);
    backdrop-filter:blur(20px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:36px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
  }
  .mobile-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .mobile-menu a{
    font-family:var(--font-head);
    font-size:1.6rem;
    font-weight:600;
    color:var(--text-primary);
    transition:color var(--dur-fast) var(--ease-out), letter-spacing var(--dur-fast) var(--ease-out);
  }
  .mobile-menu a:hover{color:var(--accent); letter-spacing:0.04em;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding-top:120px;
    /* Внизу первого экрана стоит подсказка прокрутки (.scroll-cue). Она
       прижата к низу, поэтому отступ должен быть не меньше её высоты
       вместе с отбивкой — иначе на невысоких окнах она наезжает на
       строку счётчиков. 28px отступ + 40px линия + 8px зазор + строка. */
    padding-bottom:116px;
  }
  #network-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    opacity:0.85;
  }
  .hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    z-index:0;
    pointer-events:none;
    mix-blend-mode:screen;
    will-change:transform;
  }
  .glow-1{
    width:520px;height:520px;
    background:radial-gradient(circle, rgba(56,189,248,0.35), transparent 70%);
    top:-10%; left:-8%;
    animation:float1 22s ease-in-out infinite;
  }
  .glow-2{
    width:600px;height:600px;
    background:radial-gradient(circle, rgba(124,58,237,0.32), transparent 70%);
    bottom:-15%; right:-10%;
    animation:float2 26s ease-in-out infinite;
  }
  .glow-3{
    width:380px;height:380px;
    background:radial-gradient(circle, rgba(6,182,212,0.28), transparent 70%);
    top:35%; right:20%;
    animation:float3 18s ease-in-out infinite;
  }
  @keyframes float1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(60px,80px) scale(1.15);}
  }
  @keyframes float2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-70px,-60px) scale(1.1);}
  }
  @keyframes float3{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-40px,50px) scale(0.9);}
  }

  .hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    align-items:center;
    gap:48px;
  }
  .hero-content{
    max-width:760px;
  }

  /* ============ HERO EMBLEM (logo mark) ============ */
  .hero-emblem{
    position:absolute;
    top:50%;
    right:-6%;
    transform:translateY(-50%);
    width:min(46vw, 560px);
    z-index:0;
    pointer-events:none;
    display:none;
  }
  @media (min-width:1024px){
    .hero-emblem{display:block;}
  }
  .hero-emblem-img{
    width:100%;
    height:auto;
    opacity:0.85;
    filter:drop-shadow(0 0 35px rgba(249,115,22,0.45)) drop-shadow(0 0 70px rgba(220,38,38,0.25));
    animation:emblemGlow 6s ease-in-out infinite;
  }
  @keyframes emblemGlow{
    0%,100%{
      filter:drop-shadow(0 0 35px rgba(249,115,22,0.45)) drop-shadow(0 0 70px rgba(220,38,38,0.25));
    }
    50%{
      filter:drop-shadow(0 0 60px rgba(251,191,36,0.65)) drop-shadow(0 0 110px rgba(220,38,38,0.4));
    }
  }

  /* Ember particles rising from the emblem */
  .ember-field{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
  }
  .ember{
    position:absolute;
    bottom:38%;
    border-radius:50%;
    will-change:transform, opacity;
    animation-name:emberRise;
    animation-timing-function:ease-out;
    animation-iteration-count:infinite;
  }
  @keyframes emberRise{
    0%{
      transform:translate(0, 0) scale(1);
      opacity:0;
    }
    12%{
      opacity:1;
    }
    100%{
      transform:translate(var(--drift, 30px), -340px) scale(0.3);
      opacity:0;
    }
  }

  @media (max-width:1023px){
    .ember-field{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .hero-emblem-img{animation:none; filter:drop-shadow(0 0 45px rgba(249,115,22,0.5)) drop-shadow(0 0 85px rgba(220,38,38,0.3));}
    .ember-field{display:none;}
  }
  .hero-content h1{
    font-size:clamp(2.4rem, 6.5vw, 4.6rem);
    margin-bottom:24px;
    letter-spacing:0.005em;
  }
  .hero-content .lead{
    font-size:clamp(1rem, 1.6vw, 1.25rem);
    color:var(--text-secondary);
    max-width:600px;
    margin-bottom:40px;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:80px;
  }

  .hero-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px 40px;
    max-width:680px;
    border-top:1px solid var(--border);
    padding-top:36px;
  }
  @media (min-width:768px){
    .hero-stats{grid-template-columns:repeat(4,1fr);}
  }
  .stat-value{
    font-family:var(--font-head);
    font-size:clamp(1.7rem, 3vw, 2.4rem);
    font-weight:700;
    color:var(--text-primary);
    display:flex;
    align-items:baseline;
    gap:2px;
  }
  .stat-value .unit{
    font-size:0.55em;
    color:var(--accent);
    font-weight:600;
  }
  .stat-label{
    font-size:0.82rem;
    color:var(--text-muted);
    margin-top:6px;
    letter-spacing:0.02em;
  }

  .scroll-cue{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    font-size:0.72rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    opacity:0.7;
  }
  .scroll-cue .line{
    width:1px;height:40px;
    background:linear-gradient(180deg, var(--accent), transparent);
    animation:scrollline 2.2s ease-in-out infinite;
  }
  @keyframes scrollline{
    0%{transform:scaleY(0.3); opacity:0.3;}
    50%{transform:scaleY(1); opacity:1;}
    100%{transform:scaleY(0.3); opacity:0.3;}
  }

  /* ============ REVEAL ANIMATIONS ============ */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ============ SERVICES ============ */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:24px;
    grid-auto-flow:dense;
  }
  @media (min-width:768px){
    .services-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (min-width:1100px){
    .services-grid{grid-template-columns:repeat(4, 1fr);}
  }

  .service-card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:32px 26px;
    overflow:hidden;
    transform:perspective(800px) rotateX(0) rotateY(0);
    transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
    will-change:transform;
  }
  .service-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(420px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(56,189,248,0.16), transparent 60%);
    opacity:0;
    transition:opacity var(--dur-med) var(--ease-out);
    pointer-events:none;
  }
  .service-card:hover{
    border-color:var(--border-strong);
    background:var(--surface-strong);
  }
  .service-card:hover::before{opacity:1;}

  .service-icon{
    width:52px;height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(56,189,248,0.18), rgba(124,58,237,0.18));
    border:1px solid var(--border-strong);
    color:var(--accent);
    margin-bottom:22px;
    position:relative;
    z-index:1;
  }
  .service-icon i{width:26px;height:26px;}

  .service-card h3{
    font-family:var(--font-body);
    font-size:1.12rem;
    font-weight:600;
    margin-bottom:10px;
    position:relative;
    z-index:1;
    letter-spacing:0;
  }
  .service-card p{
    font-size:0.92rem;
    color:var(--text-secondary);
    position:relative;
    z-index:1;
  }
  .service-card .index-num{
    position:absolute;
    top:18px; right:22px;
    font-family:var(--font-head);
    font-size:0.75rem;
    color:var(--text-muted);
    letter-spacing:0.1em;
    z-index:1;
  }

  /* Featured card — wider bento tile with rotating fire border */
  @media (min-width:768px){
    .service-card.featured{grid-column:span 2;}
  }
  .service-card.featured{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .service-card.featured .service-icon{
    background:linear-gradient(135deg, rgba(251,191,36,0.18), rgba(220,38,38,0.18));
    color:var(--fire-orange);
  }
  .service-card.featured h3{font-size:1.28rem;}
  .service-card.featured p{font-size:0.96rem; max-width:520px;}

  /* ============ MARQUEE ============ */
  .marquee-section{
    overflow:hidden;
    padding:28px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:var(--surface);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    gap:0;
    animation:marqueeScroll 38s linear infinite;
  }
  .marquee-section:hover .marquee-track{
    animation-play-state:paused;
  }
  .marquee-item{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-family:var(--font-head);
    font-size:1rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-secondary);
    padding:0 28px;
    white-space:nowrap;
  }
  .marquee-item .sep{
    color:var(--fire-orange);
    font-weight:700;
  }
  @keyframes marqueeScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;}
    .marquee-section{overflow-x:auto;}
  }

  /* ============ PROCESS ============ */
  .process-wrap{
    position:relative;
  }
  .process-steps{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    position:relative;
  }
  @media (min-width:900px){
    .process-steps{
      grid-template-columns:repeat(5, 1fr);
      gap:24px;
    }
  }
  .process-line-wrap{
    position:absolute;
    top:34px; left:0; right:0;
    height:2px;
    display:none;
  }
  @media (min-width:900px){
    .process-line-wrap{display:block;}
  }
  .process-line-wrap svg{width:100%; height:4px; display:block; overflow:visible;}
  .process-line-wrap path{
    stroke:var(--accent);
    stroke-width:2;
    fill:none;
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    transition:stroke-dashoffset 1.6s var(--ease-out);
  }
  .process-line-wrap.is-visible path{stroke-dashoffset:0;}

  .process-step{
    text-align:center;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .process-num{
    width:68px;height:68px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(56,189,248,0.16), rgba(124,58,237,0.16));
    border:1px solid var(--border-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-head);
    font-size:1.3rem;
    font-weight:700;
    color:var(--accent);
    margin-bottom:20px;
    position:relative;
    z-index:2;
    background-color:var(--bg-bottom);
    box-shadow:0 0 0 8px var(--bg-bottom);
  }
  .process-step h3{
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:8px;
    font-family:var(--font-body);
  }
  .process-step p{
    font-size:0.88rem;
    color:var(--text-secondary);
    max-width:220px;
  }

  /* ============ PORTFOLIO ============ */
  .portfolio-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }
  @media (min-width:680px){
    .portfolio-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (min-width:1100px){
    .portfolio-grid{grid-template-columns:repeat(3, 1fr);}
    .portfolio-grid .pf-item:nth-child(1){grid-column:span 2;}
  }

  .pf-card{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--border);
    aspect-ratio:4/3;
    cursor:pointer;
  }
  @media (min-width:1100px){
    .pf-item:nth-child(1) .pf-card{aspect-ratio:16/9;}
  }
  .pf-media{
    position:absolute;
    inset:0;
    transition:transform 0.6s var(--ease-out);
  }
  .pf-card:hover .pf-media{transform:scale(1.08);}

  .pf-grad-1{background:linear-gradient(135deg, #0c2a44 0%, #1b4b6b 40%, #29a8e2 100%);}
  .pf-grad-2{background:linear-gradient(135deg, #1a0e3d 0%, #4c1d95 45%, #7c3aed 100%);}
  .pf-grad-3{background:linear-gradient(135deg, #03242b 0%, #0e5a66 45%, #06b6d4 100%);}
  .pf-grad-4{background:linear-gradient(135deg, #07101f 0%, #16324f 45%, #38bdf8 100%);}
  .pf-grad-5{background:linear-gradient(135deg, #1f0a33 0%, #5b21b6 45%, #38bdf8 100%);}

  .pf-media::after{
    content:'';
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 48px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 48px);
    opacity:0.5;
  }

  /* ---- Portfolio illustrations ---- */
  .pf-illustration{
    position:absolute; inset:0;
    width:100%; height:100%;
    display:block;
  }

  /* Card 1: Data center — LED blink */
  .pf-led{
    animation:ledPulse 2s ease-in-out infinite;
  }
  @keyframes ledPulse{
    0%, 100%{opacity:1;}
    50%{opacity:0.35;}
  }

  /* Card 2: CCTV — detection box pulse */
  .pf-detect{
    transform-box:fill-box;
    transform-origin:center;
    animation:detectPulse 2.4s ease-in-out infinite;
  }
  @keyframes detectPulse{
    0%, 100%{transform:scale(0.97);}
    50%{transform:scale(1.03);}
  }

  /* Card 3: Access control — RFID wave ping */
  .pf-wave{
    transform-box:fill-box;
    transform-origin:center;
    animation:waveExpand 2.4s ease-out infinite;
  }
  @keyframes waveExpand{
    0%{transform:scale(0.6); opacity:0.8;}
    100%{transform:scale(1.4); opacity:0;}
  }

  /* Card 4: SCS — running data on cables */
  .pf-cable-flow{
    animation:cableFlow 2s linear infinite;
  }
  @keyframes cableFlow{
    to{stroke-dashoffset:-24;}
  }

  /* Card 5: Cloud — sync flow + breathing glow */
  .pf-sync-flow{
    animation:syncFlow 1.6s linear infinite;
  }
  @keyframes syncFlow{
    to{stroke-dashoffset:-16;}
  }
  .pf-cloud-glow{
    animation:cloudBreathe 4.5s ease-in-out infinite;
  }
  @keyframes cloudBreathe{
    0%, 100%{opacity:0.85; filter:drop-shadow(0 0 6px rgba(56,189,248,0.35));}
    50%{opacity:1; filter:drop-shadow(0 0 16px rgba(56,189,248,0.65));}
  }

  .pf-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(5,7,13,0) 30%, rgba(5,7,13,0.92) 100%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    opacity:0;
    transition:opacity var(--dur-med) var(--ease-out);
  }
  .pf-card:hover .pf-overlay, .pf-card:focus-within .pf-overlay{opacity:1;}

  .pf-tag{
    display:inline-flex;
    align-self:flex-start;
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--accent);
    border:1px solid var(--border-strong);
    border-radius:999px;
    padding:5px 12px;
    margin-bottom:14px;
    background:rgba(5,7,13,0.5);
    transform:translateY(12px);
    opacity:0;
    transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
    transition-delay:0.05s;
  }
  .pf-card:hover .pf-tag{transform:translateY(0); opacity:1;}

  .pf-overlay h3{
    font-family:var(--font-body);
    font-size:1.2rem;
    font-weight:600;
    margin-bottom:8px;
    transform:translateY(12px);
    opacity:0;
    transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
    transition-delay:0.1s;
  }
  .pf-card:hover .pf-overlay h3{transform:translateY(0); opacity:1;}

  .pf-overlay p{
    font-size:0.88rem;
    color:var(--text-secondary);
    margin-bottom:14px;
    transform:translateY(12px);
    opacity:0;
    transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
    transition-delay:0.15s;
  }
  .pf-card:hover .pf-overlay p{transform:translateY(0); opacity:1;}

  .pf-link{
    font-size:0.88rem;
    font-weight:600;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:6px;
    transform:translateY(12px);
    opacity:0;
    transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), gap var(--dur-fast) var(--ease-out);
    transition-delay:0.2s;
  }
  .pf-card:hover .pf-link{transform:translateY(0); opacity:1;}
  .pf-link:hover{gap:10px;}
  .pf-link i{width:16px;height:16px;}

  /* Always-visible label for touch devices */
  .pf-static-label{
    position:absolute;
    top:20px; left:20px;
    font-family:var(--font-head);
    font-size:0.78rem;
    letter-spacing:0.12em;
    color:rgba(255,255,255,0.85);
    background:rgba(5,7,13,0.4);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    padding:6px 14px;
    backdrop-filter:blur(6px);
  }

  /* ============ CTA SECTION ============ */
  .cta-panel{
    position:relative;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-strong);
    background:var(--surface);
    padding:80px 32px;
    text-align:center;
    overflow:hidden;
    isolation:isolate;
  }
  .cta-panel::before{
    content:'';
    position:absolute;
    width:140%;
    height:140%;
    left:-20%; top:-60%;
    background:radial-gradient(ellipse at center, rgba(56,189,248,0.28), rgba(124,58,237,0.18) 45%, transparent 75%);
    filter:blur(60px);
    z-index:-1;
    animation:ctaglow 16s ease-in-out infinite;
  }
  @keyframes ctaglow{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    50%{transform:translate(6%,8%) rotate(8deg);}
  }
  .cta-panel h2{
    font-size:clamp(1.9rem, 4.5vw, 3.2rem);
    margin-bottom:18px;
  }
  .cta-panel p{
    color:var(--text-secondary);
    font-size:1.05rem;
    max-width:520px;
    margin:0 auto 36px;
  }
  .cta-panel .btn{padding:18px 40px; font-size:1rem;}

  /* ============ CONTACT MODAL ============ */
  .modal-overlay{
    position:fixed;
    inset:0;
    z-index:1400;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(5,7,13,0.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
  }
  .modal-overlay.open{
    opacity:1;
    visibility:visible;
  }
  .modal{
    position:relative;
    width:100%;
    max-width:460px;
    max-height:90vh;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-strong);
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--bg-bottom);
    padding:40px 32px;
    isolation:isolate;
    box-shadow:var(--shadow-card);
    transform:translateY(24px) scale(0.96);
    opacity:0;
    transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-med) var(--ease-out);
  }
  .modal-overlay.open .modal{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  .modal::before{
    content:'';
    position:absolute;
    width:140%;
    height:140%;
    left:-20%; top:-60%;
    background:radial-gradient(ellipse at center, rgba(249,115,22,0.22), rgba(56,189,248,0.16) 45%, transparent 75%);
    filter:blur(60px);
    z-index:-1;
    pointer-events:none;
  }
  .modal-close{
    position:absolute;
    top:16px; right:16px;
    width:40px; height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    color:var(--text-secondary);
    transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .modal-close:hover{
    background:rgba(255,255,255,0.08);
    color:var(--text-primary);
    border-color:var(--border-strong);
    transform:rotate(90deg);
  }
  .modal-close i{width:18px; height:18px;}
  .modal-header{margin-bottom:28px;}
  .modal-header .eyebrow{margin-bottom:14px;}
  .modal-header h3{
    font-size:1.6rem;
    margin-bottom:8px;
  }
  .modal-header p{
    color:var(--text-secondary);
    font-size:0.92rem;
  }
  .modal-form{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .form-field label{
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-secondary);
  }
  .form-field input{
    font-family:var(--font-body);
    font-size:0.95rem;
    color:var(--text-primary);
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:13px 16px;
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .form-field input::placeholder{color:var(--text-muted);}
  .form-field input:hover{border-color:var(--border-strong);}
  .form-field input:focus{
    outline:none;
    border-color:var(--accent-2);
    background:rgba(255,255,255,0.05);
    box-shadow:0 0 0 3px rgba(56,189,248,0.15);
  }
  .form-checkbox{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    font-size:0.85rem;
    color:var(--text-secondary);
    line-height:1.5;
  }
  .form-checkbox input{
    position:absolute;
    opacity:0;
    width:1px;height:1px;
  }
  .checkbox-box{
    position:relative;
    flex-shrink:0;
    width:20px;height:20px;
    margin-top:2px;
    border-radius:6px;
    border:1px solid var(--border-strong);
    background:rgba(255,255,255,0.03);
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .checkbox-box::after{
    content:'';
    position:absolute;
    inset:3px;
    border-radius:3px;
    background:var(--gradient-fire);
    opacity:0;
    transform:scale(0.5);
    transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .form-checkbox input:checked ~ .checkbox-box{border-color:transparent;}
  .form-checkbox input:checked ~ .checkbox-box::after{
    opacity:1;
    transform:scale(1);
  }
  .form-checkbox input:focus-visible ~ .checkbox-box{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .form-checkbox a{
    color:var(--accent-2);
    text-decoration:underline;
    text-decoration-color:rgba(56,189,248,0.4);
  }
  .form-checkbox a:hover{color:var(--accent);}
  .modal-submit{width:100%; margin-top:4px;}
  .modal-success{
    text-align:center;
    padding:20px 0 4px;
  }
  .modal-success i{
    width:52px; height:52px;
    color:var(--fire-orange);
    margin:0 auto 18px;
  }
  .modal-success h3{font-size:1.4rem; margin-bottom:8px;}
  .modal-success p{color:var(--text-secondary); font-size:0.92rem;}

  /* Requisites modal */
  .modal.modal-wide{max-width:640px;}
  .req-group-title{
    font-family:var(--font-body);
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--fire-orange);
    margin:24px 0 8px;
  }
  .req-group-title:first-of-type{margin-top:0;}
  .req-list{
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--border);
  }
  .req-row{
    display:flex;
    gap:8px 24px;
    padding:11px 0;
    border-bottom:1px solid var(--border);
  }
  .req-row dt{
    flex:0 0 190px;
    font-size:0.85rem;
    color:var(--text-secondary);
  }
  .req-row dd{
    flex:1;
    font-size:0.92rem;
    color:var(--text-primary);
  }
  @media (max-width:560px){
    .req-row{flex-direction:column; gap:4px;}
    .req-row dt{flex:none;}
  }

  /* ============ FOOTER ============ */
  footer{
    border-top:1px solid var(--border);
    padding:64px 0 32px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    margin-bottom:48px;
  }
  @media (min-width:768px){
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}
  }
  .footer-brand .logo{margin-bottom:14px;}
  .footer-brand .logo .logo-mark{width:34px;height:34px;}
  .footer-brand p{
    color:var(--text-secondary);
    font-size:0.9rem;
    max-width:280px;
  }
  /* Колонки подвала: h2, а не h4. Уровень заголовка — про структуру
     документа, а не про размер: после h1 и h2 страницы h4 в подвале
     выглядит пропуском ступени, и проверка доступности это отмечает.
     Размер задаём здесь. */
  .footer-col h2{
    font-family:var(--font-body);
    font-size:0.85rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:18px;
    font-weight:600;
  }
  .footer-col ul{display:flex; flex-direction:column; gap:12px;}
  .footer-col a{
    color:var(--text-secondary);
    font-size:0.92rem;
    transition:color var(--dur-fast) var(--ease-out);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .footer-col a:hover{color:var(--accent);}
  .footer-col a i{width:16px; height:16px; color:var(--accent); flex-shrink:0;}

  .footer-bottom{
    border-top:1px solid var(--border);
    padding-top:28px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:space-between;
    align-items:center;
    color:var(--text-muted);
    font-size:0.82rem;
  }
  .footer-social{display:flex; gap:14px;}
  .footer-social a{
    width:38px;height:38px;
    border-radius:10px;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .footer-social a:hover{color:var(--accent); border-color:var(--accent); transform:translateY(-2px);}
  .footer-social a i{width:18px;height:18px;}

  /* Stagger helper */
  .stagger > *{transition-delay:calc(var(--i, 0) * 60ms);}

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
    .reveal{opacity:1; transform:none;}
    .hero-glow{display:none;}
    #network-canvas{opacity:0.25;}

    .pf-led, .pf-detect, .pf-wave, .pf-cable-flow, .pf-sync-flow, .pf-cloud-glow{
      animation:none !important;
    }
    .pf-led{opacity:1;}
    .pf-detect{transform:scale(1);}
    .pf-wave{opacity:0; transform:scale(1.4);}
    .pf-cable-flow{stroke-dashoffset:0;}
    .pf-sync-flow{stroke-dashoffset:0;}
    .pf-cloud-glow{opacity:1; filter:drop-shadow(0 0 10px rgba(56,189,248,0.5));}

    .modal{transform:none;}
    .modal-close:hover{transform:none;}
  }

/* End */


/* Start:/local/templates/rina/css/template.css?179045585129557*/
/* ============================================================
   RinA — дополнения к дизайну концепта.
   main.css  — концепт в неизменном виде.
   template.css — всё, чего в одностраничнике не было:
   внутренние страницы, крошки, выпадающие меню, списки, каталог.
   ============================================================ */

/* Атрибут hidden должен побеждать наши display:flex и display:grid —
   иначе скрытые поля калькуляторов остаются на виду */
[hidden]{display:none !important;}

/* ---------- Доступность ---------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1600;
  padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0;
  background:var(--fire-orange);
  color:#1a0b03;
  font-weight:600;
}
.skip-link:focus{left:0;}

/* ---------- Выпадающие разделы в шапке ---------- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-caret{
  width:14px;height:14px;
  margin-left:4px;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav-item.has-children:hover .nav-caret,
.nav-item.has-children:focus-within .nav-caret{transform:rotate(180deg);}

.nav-dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,8px);
  padding-top:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.nav-item.has-children:hover .nav-dropdown,
.nav-item.has-children:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-dropdown-inner{
  min-width:270px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:rgba(11,18,32,0.96);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--shadow-card);
}
.nav-dropdown-inner .nav-sub{
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-dropdown-inner .nav-sub:hover,
.nav-dropdown-inner .nav-sub.is-active{
  background:var(--surface-strong);
  color:var(--text-primary);
}

/* ---------- Мобильное меню: два уровня ---------- */
.mobile-menu{overflow-y:auto;padding:96px 24px 48px;gap:0;justify-content:flex-start;}
.mm-item{
  width:100%;
  max-width:420px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.mm-level-2{
  padding-left:18px;
  font-size:0.92rem;
  color:var(--text-secondary);
  border-bottom-style:dashed;
}
.mm-item.is-active{color:var(--fire-orange);}

/* ---------- Шапка внутренней страницы ---------- */
body.is-inner{padding-top:0;}
.page-head{
  position:relative;
  padding:160px 0 56px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.page-head-glow{
  position:absolute;
  top:-40%;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,110vw);
  aspect-ratio:2/1;
  background:radial-gradient(ellipse at center, rgba(249,115,22,0.16), transparent 65%);
  pointer-events:none;
}
.page-title{
  position:relative;
  font-size:clamp(1.8rem,4vw,2.9rem);
  margin-top:14px;
}
@media (max-width:768px){
  .page-head{padding:120px 0 40px;}
}

/* ---------- Хлебные крошки ---------- */
.breadcrumbs ol{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  font-size:0.82rem;
  color:var(--text-muted);
}
.breadcrumbs li{display:flex;align-items:center;gap:8px;}
.breadcrumbs li + li::before{
  content:'/';
  color:var(--border-strong);
}
.breadcrumbs a{
  color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-out);
}
.breadcrumbs a:hover{color:var(--fire-orange);}
.breadcrumbs .is-current{color:var(--text-muted);}

/* ---------- Подвал ---------- */
.site-footer{padding-top:80px;}

/* ============================================================
   ЛИЦЕНЗИИ И СЕРТИФИКАТЫ
   Сканы документов — светлые. На тёмном фоне им нужна «бумажная»
   подложка, иначе белый лист выглядит дырой в макете.
   ============================================================ */
.lic-section + .lic-section{margin-top:72px;}

.lic-group-head{margin-bottom:32px;max-width:760px;}
.lic-group-head h2{
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  margin-bottom:12px;
}
.lic-group-head p{color:var(--text-secondary);font-size:0.98rem;}

.lic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:24px;
}

.lic-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  overflow:hidden;
  transition:transform var(--dur-med) var(--ease-out),
             border-color var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out);
}
.lic-card:hover,
.lic-card:focus-within{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.lic-media{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  background:#e9eef5;                 /* «бумага» под скан */
  overflow:hidden;
  cursor:zoom-in;
}
.lic-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform var(--dur-slow) var(--ease-out);
}
.lic-card:hover .lic-media img{transform:scale(1.04);}

/* Тёплый отблеск поверх скана — связывает документ с палитрой сайта,
   но не искажает сам документ: полупрозрачный слой поверх, не фильтр. */
.lic-media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(249,115,22,0) 55%, rgba(11,18,32,0.55) 100%);
  pointer-events:none;
}

.lic-zoom{
  position:absolute;
  right:12px;bottom:12px;
  z-index:2;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:rgba(11,18,32,0.72);
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.lic-card:hover .lic-zoom,
.lic-card:focus-within .lic-zoom{opacity:1;transform:translateY(0);}
.lic-zoom svg{width:18px;height:18px;}

.lic-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.lic-body h3{font-size:1rem;line-height:1.35;}
.lic-body h3 a{transition:color var(--dur-fast) var(--ease-out);}
.lic-body h3 a:hover{color:var(--fire-orange);}
.lic-body p{
  color:var(--text-secondary);
  font-size:0.88rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lic-meta{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  font-size:0.78rem;
  color:var(--text-muted);
}
.lic-meta span{display:inline-flex;align-items:center;gap:5px;}
.lic-meta svg{width:14px;height:14px;}

/* ---------- Просмотр скана ---------- */
.lb-overlay{
  position:fixed;inset:0;z-index:1400;
  display:flex;align-items:center;justify-content:center;
  padding:32px 16px;
  background:rgba(7,10,18,0.92);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.lb-overlay.is-open{opacity:1;visibility:visible;}
.lb-figure{
  max-width:min(1000px,92vw);
  max-height:86vh;
  display:flex;flex-direction:column;gap:16px;
}
.lb-figure img{
  max-height:72vh;
  width:auto;margin:0 auto;
  border-radius:var(--radius-sm);
  background:#e9eef5;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.8);
}
.lb-caption{text-align:center;}
.lb-caption h3{font-size:1.05rem;margin-bottom:6px;}
.lb-caption p{color:var(--text-secondary);font-size:0.88rem;}
.lb-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,0.12);}
.lb-close{top:20px;right:20px;}
.lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.lb-next{right:20px;top:50%;transform:translateY(-50%);}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06);}
@media (max-width:640px){
  .lb-prev,.lb-next{display:none;}
}

/* ============================================================
   СПИСКИ РАЗДЕЛОВ: услуги и проекты
   Карточка с фотографией — в отличие от карточек концепта,
   которые построены на иконках и SVG-иллюстрациях.
   ============================================================ */
.sec-block + .sec-block{margin-top:64px;}
.sec-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:28px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.sec-head h2{font-size:clamp(1.3rem,2.4vw,1.7rem);}
.sec-head .sec-count{
  font-family:var(--font-head);
  font-size:0.8rem;
  color:var(--text-muted);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}

.ent-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  overflow:hidden;
  transition:transform var(--dur-med) var(--ease-out),
             border-color var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out);
}
.ent-card:hover,
.ent-card:focus-within{
  transform:translateY(-5px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.ent-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(56,189,248,0.10), rgba(124,58,237,0.10));
}
.ent-card.is-case .ent-media{aspect-ratio:4/3;}
.ent-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.ent-card:hover .ent-media img{transform:scale(1.05);}
.ent-media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,10,18,0) 45%, rgba(7,10,18,0.75) 100%);
  pointer-events:none;
}

/* Метка категории поверх обложки */
.ent-tag{
  position:absolute;
  left:14px;top:14px;
  z-index:2;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:0.66rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-primary);
  background:rgba(7,10,18,0.68);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(8px);
}

/* Заглушка, когда фотографии нет — вместо пустого серого прямоугольника */
.ent-media.is-empty{
  display:grid;
  place-items:center;
}
.ent-media.is-empty span{
  font-family:var(--font-head);
  font-size:2.4rem;
  font-weight:800;
  letter-spacing:0.08em;
  background:var(--gradient-fire);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0.55;
}

.ent-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  flex:1;
}
.ent-body h3{font-size:1.05rem;line-height:1.35;}
.ent-body h3 a{transition:color var(--dur-fast) var(--ease-out);}
.ent-body h3 a:hover{color:var(--fire-orange);}
.ent-body p{
  color:var(--text-secondary);
  font-size:0.9rem;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ent-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:0.86rem;
  font-weight:600;
  color:var(--fire-orange);
}
.ent-more svg{
  width:15px;height:15px;
  transition:transform var(--dur-fast) var(--ease-out);
}
.ent-card:hover .ent-more svg{transform:translateX(4px);}

/* Ссылка на всю карточку, но заголовок остаётся отдельной целью для скринридера */
.ent-card .ent-stretch::after{content:'';position:absolute;inset:0;z-index:1;}


/* ============================================================
   ДЕТАЛЬНАЯ СТРАНИЦА: услуга, проект, публикация
   ============================================================ */
.detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;
  align-items:start;
}
@media (max-width:980px){
  .detail-layout{grid-template-columns:1fr;gap:36px;}
}

.detail-cover{
  margin:0 0 32px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(56,189,248,0.10), rgba(124,58,237,0.10));
}
.detail-cover img{width:100%;height:auto;display:block;}
.detail-credit{
  padding:8px 14px;
  font-size:0.78rem;
  color:var(--text-secondary);
  border-top:1px solid var(--border);
}
.detail-facts-title{
  font-size:1.15rem;
  margin:32px 0 10px;
}
.detail-facts{margin-bottom:32px;}

.detail-lead{
  font-size:1.12rem;
  line-height:1.65;
  color:var(--text-primary);
  padding-left:18px;
  border-left:2px solid var(--fire-orange);
  margin-bottom:28px;
}

.detail-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:36px;
  font-size:0.9rem;
  font-weight:600;
  color:var(--fire-orange);
}
.detail-back svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-out);}
.detail-back:hover svg{transform:translateX(-4px);}

/* Боковая колонка с заявкой липнет к экрану при длинном тексте */
.detail-aside{position:sticky;top:104px;}
@media (max-width:980px){
  .detail-aside{position:static;}
}
.detail-cta{
  padding:28px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:
    radial-gradient(ellipse at top right, rgba(249,115,22,0.14), transparent 70%),
    var(--surface-strong);
}
.detail-cta h3{font-size:1.2rem;margin:6px 0 12px;}
.detail-cta p{color:var(--text-secondary);font-size:0.92rem;line-height:1.6;margin-bottom:20px;}
.detail-cta .btn{width:100%;}
.detail-phone{
  display:block;
  margin-top:16px;
  text-align:center;
  font-family:var(--font-head);
  font-size:1.02rem;
  color:var(--text-primary);
}
.detail-phone:hover{color:var(--fire-orange);}

/* Калькуляторы под услугу: карточка под блоком заявки.
   Нарочно скромнее, чем заявка, — это подсказка, а не призыв */
.detail-tools{
  margin-top:20px;
  padding:24px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
}
.detail-tools h3{font-size:1.05rem;margin-bottom:14px;}
.detail-tool{
  display:block;
  padding:12px 0;
  border-top:1px solid var(--border);
}
.detail-tool:first-of-type{border-top:none;padding-top:0;}
.detail-tool-name{
  display:block;
  font-size:0.96rem;
  color:var(--text-primary);
}
.detail-tool-note{
  display:block;
  margin-top:2px;
  font-size:0.84rem;
  line-height:1.45;
  color:var(--text-muted);
}
.detail-tool:hover .detail-tool-name{color:var(--fire-orange);}

/* ---------- Текст из редактора ---------- */
.rich-text{color:var(--text-secondary);font-size:1rem;line-height:1.75;}
.rich-text > * + *{margin-top:18px;}
.rich-text h2,
.rich-text h3,
.rich-text h4{color:var(--text-primary);margin-top:36px;}
.rich-text h2{font-size:1.5rem;}
.rich-text h3{font-size:1.22rem;}
.rich-text h4{font-size:1.05rem;}
/* Отступы задаём прямо у типов: правило .rich-text > * + * по весу
   слабее, чем .rich-text p, и само по себе до абзацев не доходит */
.rich-text p{margin:0 0 18px;}
.rich-text > :last-child{margin-bottom:0;}
.rich-text a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.rich-text a:hover{color:var(--fire-orange);}
.rich-text strong,
.rich-text b{color:var(--text-primary);}
.rich-text ul,
.rich-text ol{margin:0 0 18px;padding-left:22px;list-style:disc;}
.rich-text ol{list-style:decimal;}
.rich-text li + li{margin-top:8px;}
.rich-text li::marker{color:var(--fire-orange);}
.rich-text img{
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  height:auto;
}
.rich-text blockquote{
  margin:0 0 18px;
  padding:18px 22px;
  border-left:2px solid var(--fire-orange);
  background:var(--surface);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-primary);
}
/* Таблицы в статьях бывают широкие — пусть прокручиваются внутри себя */
.rich-text table{
  width:100%;
  border-collapse:collapse;
  font-size:0.92rem;
  display:block;
  overflow-x:auto;
}
.rich-text th,
.rich-text td{
  padding:10px 14px;
  border:1px solid var(--border);
  text-align:left;
}
.rich-text th{
  background:var(--surface-strong);
  color:var(--text-primary);
  font-family:var(--font-head);
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}


/* Дата публикации в карточке */
.ent-date{
  font-family:var(--font-head);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}


/* ============================================================
   КАТАЛОГ ОБОРУДОВАНИЯ
   Корзины нет: модулей «Торговый каталог» и «Интернет-магазин»
   в системе не установлено, поэтому вместо покупки — запрос цены.
   ============================================================ */

/* Товар снят на белом фоне — под него светлая подложка, как у сканов */
.ent-media.is-product{
  aspect-ratio:1/1;
  background:#eef2f7;
}
.ent-media.is-product img{object-fit:contain;padding:18px;}
.ent-media.is-product::after{display:none;}

.prod-status{
  position:absolute;
  left:12px;top:12px;
  z-index:2;
  padding:5px 11px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:0.64rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1px solid transparent;
  backdrop-filter:blur(6px);
}
.prod-status.is-instock{background:rgba(16,185,129,0.16);border-color:rgba(16,185,129,0.5);color:#6ee7b7;}
.prod-status.is-order  {background:rgba(56,189,248,0.16);border-color:rgba(56,189,248,0.5);color:#7dd3fc;}
.prod-status.is-pending{background:rgba(251,191,36,0.16);border-color:rgba(251,191,36,0.5);color:#fcd34d;}
.prod-status.is-nostock{background:rgba(148,163,184,0.16);border-color:rgba(148,163,184,0.45);color:#cbd5e1;}

.prod-brand{
  font-family:var(--font-head);
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.prod-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:auto;}
.prod-price-now{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-primary);
}
.prod-price-old{
  font-size:0.9rem;
  color:var(--text-muted);
  text-decoration:line-through;
}

/* ---------- Карточка товара ---------- */
.prod-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
}
@media (max-width:900px){
  .prod-layout{grid-template-columns:1fr;gap:32px;}
}

.prod-photo{
  position:relative;
  margin:0;
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:#eef2f7;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.prod-photo img{width:100%;height:100%;object-fit:contain;padding:28px;}
.prod-photo.is-empty span{
  font-family:var(--font-head);
  font-size:2rem;
  font-weight:800;
  background:var(--gradient-fire);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.prod-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.prod-thumb{
  width:72px;height:72px;
  padding:6px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#eef2f7;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.prod-thumb img{width:100%;height:100%;object-fit:contain;}
.prod-thumb:hover{transform:translateY(-2px);}
.prod-thumb.is-active{border-color:var(--fire-orange);}

.prod-buy{
  padding:26px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:
    radial-gradient(ellipse at top right, rgba(249,115,22,0.13), transparent 70%),
    var(--surface-strong);
}
.prod-buy .prod-price{margin:0 0 20px;}
.prod-buy .prod-price-now{font-size:1.6rem;}
.prod-buy .btn{width:100%;}
.prod-note{
  margin-top:14px;
  font-size:0.86rem;
  line-height:1.55;
  color:var(--text-secondary);
}

.prod-specs{
  width:100%;
  margin-top:28px;
  border-collapse:collapse;
  font-size:0.92rem;
}
.prod-specs caption{
  text-align:left;
  font-family:var(--font-head);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding-bottom:12px;
}
.prod-specs th,
.prod-specs td{padding:11px 0;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.prod-specs th{width:44%;font-weight:500;color:var(--text-secondary);}
.prod-specs td{color:var(--text-primary);}

.prod-docs{margin-top:28px;}
.prod-docs h3{font-size:0.95rem;margin-bottom:12px;}
.prod-docs a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 0;
  font-size:0.9rem;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border);
}
.prod-docs a:hover{color:var(--fire-orange);}
.prod-docs svg{width:16px;height:16px;}

.prod-description{margin-top:56px;max-width:820px;}
.prod-description h2{font-size:1.4rem;margin-bottom:20px;}


/* ============================================================
   КАЛЬКУЛЯТОРЫ: подсети и кабель в гофре
   ============================================================ */
.calc-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);
  gap:48px;
  align-items:start;
}
@media (max-width:900px){
  .calc-layout{grid-template-columns:1fr;gap:36px;}
}

.calc{
  padding:28px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:
    radial-gradient(ellipse at top left, rgba(56,189,248,0.10), transparent 70%),
    var(--surface-strong);
}
.calc-form{display:flex;flex-direction:column;gap:20px;}
.calc-field{display:flex;flex-direction:column;gap:8px;}
.calc-field label{
  font-family:var(--font-head);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.calc-field input,
.calc-field select{
  width:100%;
  padding:13px 15px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(7,10,18,0.55);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:0.98rem;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.calc-field input:focus,
.calc-field select:focus{outline:none;border-color:var(--fire-orange);}
.calc-field select option{background:#0b1220;color:var(--text-primary);}
.calc-hint{font-size:0.84rem;line-height:1.5;color:var(--text-muted);}

/* Список оборудования с количеством: десяток обычных полей .calc-field
   растянул бы форму на два экрана, а тут строка помещается в одну */
.calc-rows{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--border);
}
.calc-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
}
.calc-field .calc-row-name{
  /* Селектор с двумя классами намеренно: одного .calc-row-name не хватает,
     правило .calc-field label специфичнее и возвращало бы капс.
     Восемь строк подряд заглавными читаются тяжело */
  flex:1;
  font-family:var(--font-body);
  font-size:0.92rem;
  letter-spacing:normal;
  text-transform:none;
  color:var(--text-primary);
}
.calc-row-watt{
  display:block;
  font-size:0.8rem;
  letter-spacing:normal;
  text-transform:none;
  color:var(--text-muted);
}
.calc-row input{flex:0 0 84px;width:84px;text-align:center;}

.calc-submit{margin-top:4px;align-self:flex-start;}

.calc-error{
  margin-top:20px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(220,38,38,0.45);
  background:rgba(220,38,38,0.12);
  color:#fca5a5;
  font-size:0.92rem;
}

/* Крупный ответ калькулятора гофры */
.calc-answer{
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.calc-answer-num{
  font-family:var(--font-head);
  font-size:3.4rem;
  font-weight:800;
  line-height:1;
  background:var(--gradient-fire);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.calc-answer-label{
  margin-left:10px;
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--text-secondary);
}
.calc-answer-note{margin-top:12px;font-size:0.9rem;color:var(--text-muted);}

.calc-result{
  width:100%;
  margin-top:26px;
  border-collapse:collapse;
  font-size:0.95rem;
}
.calc-result caption{
  text-align:left;
  font-family:var(--font-head);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding-bottom:12px;
}
.calc-result th,
.calc-result td{padding:11px 0;border-bottom:1px solid var(--border);text-align:left;}
.calc-result th{width:46%;font-weight:500;color:var(--text-secondary);}
.calc-result td{
  color:var(--text-primary);
  font-family:var(--font-head);
  font-size:0.95rem;
}

.calc-aside h2{font-size:1.25rem;margin-bottom:12px;}
.calc-aside > p{color:var(--text-secondary);font-size:0.94rem;line-height:1.6;margin-bottom:20px;}

.calc-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
  display:block;
  max-height:460px;
  overflow-y:auto;
}
.calc-table thead th{
  position:sticky;
  top:0;
  background:#0b1220;
  font-family:var(--font-head);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border-strong);
}
.calc-table td{
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.calc-table tbody tr:hover td{background:var(--surface);color:var(--text-primary);}
.calc-aside .calc-hint{margin-top:16px;}

/* Адрес в подвале — не ссылка, но выглядит как соседние пункты */
.footer-col ul li > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-secondary);
}

/* Пункты меню выравниваем по центру: у части из них внутри значок стрелки,
   и на inline-разметке они уезжали по базовой линии */
.nav-item > a{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

/* Страница «не найдено» */
.notfound{max-width:560px;padding:40px 0;}
.notfound h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px;}
.notfound p{color:var(--text-secondary);line-height:1.65;}
.notfound-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}

/* Якорь контактов: отступ, чтобы прилипшая шапка не накрывала верх подвала */
#contacts{scroll-margin-top:90px;}

/* Ловушка для роботов: поле должно остаться в разметке, но человек его
   не видит и не может на него перейти. display:none не годится — часть
   роботов такие поля пропускает. */
.form-trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* Сообщение об ошибке отправки заявки */
.form-error{
  margin:-4px 0 4px;
  padding:10px 12px;
  border:1px solid rgba(220,38,38,0.35);
  border-radius:10px;
  background:rgba(220,38,38,0.08);
  color:#fca5a5;
  font-size:.92rem;
  line-height:1.45;
}

/* Длинный документ: ограничиваем длину строки, иначе текст расползается
   на всю ширину и читать его тяжело */
.legal-doc{max-width:840px;}

/* ============ ОТЗЫВЫ ============ */
/* Карточка: слева скан письма, справа цитата. На узком экране скан
   уезжает наверх и становится узкой полосой — читать всё равно будут
   цитату, а письмо откроют по клику. */
.rev-grid{
  display:grid;
  gap:24px;
}
.rev-card{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:24px;
  align-items:start;
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  transition:border-color var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out);
}
.rev-card:hover,
.rev-card:focus-within{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.rev-scan{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border-radius:var(--radius-sm);
  background:#e9eef5;                 /* «бумага» под скан */
  overflow:hidden;
  cursor:zoom-in;
}
.rev-scan img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform var(--dur-med) var(--ease-out);
}
.rev-card:hover .rev-scan img{transform:scale(1.04);}
.rev-zoom{
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(7,10,18,0.72);
  color:#fff;
  opacity:0;
  transition:opacity var(--dur-med) var(--ease-out);
}
.rev-zoom svg{width:17px;height:17px;}
.rev-card:hover .rev-zoom,
.rev-scan:focus-visible .rev-zoom{opacity:1;}

.rev-body{
  margin:0;
  position:relative;
}
.rev-mark{
  display:block;
  color:var(--accent);
  opacity:0.5;
  margin-bottom:10px;
}
.rev-mark svg{width:26px;height:26px;}
.rev-body p{
  margin:0 0 18px;
  color:var(--text-primary);
  font-size:1.02rem;
  line-height:1.7;
}
.rev-author{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rev-name{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--text-primary);
}
.rev-post{color:var(--text-secondary);font-size:0.92rem;}
.rev-date{color:var(--text-muted);font-size:0.86rem;}

@media (max-width:719px){
  .rev-card{
    grid-template-columns:1fr;
    padding:18px;
  }
  .rev-scan{
    aspect-ratio:16/7;
    max-width:none;
  }
}

/* End */


/* Start:/local/templates/rina/styles.css?178943474556*/
/* Классы, доступные редактору в визуальном редакторе */
/* End */


/* Start:/local/templates/rina/template_styles.css?178943474694*/
/* Стили визуального редактора Битрикса. Основные стили — в css/main.css и css/template.css */
/* End */
/* /local/templates/rina/css/main.css?178943472340981 */
/* /local/templates/rina/css/template.css?179045585129557 */
/* /local/templates/rina/styles.css?178943474556 */
/* /local/templates/rina/template_styles.css?178943474694 */