/* V2 Color: интерфейсный дизайн с цветовым ритмом */
:root{
  --green:#0b9860;
  --green-d:#08764b;
  --forest:#0d5d49;
  --forest-deep:#084536;
  --petrol:#1c5065;
  --petrol-deep:#123947;
  --copper:#c56832;
  --copper-soft:#fff0e6;
  --grid-green:rgba(13,93,73,.10);
}
body{
  background:#edf0f2;
  background-image:radial-gradient(#d1d7dc 1px,transparent 1px);
}
header{
  background:rgba(249,251,251,.94);
  border-bottom:1px solid #bfc9c8;
  box-shadow:0 4px 18px rgba(23,48,57,.07);
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--green) 0 42%,var(--petrol) 42% 76%,var(--copper) 76%);
}
.brand .led{background:var(--green);box-shadow:0 0 10px rgba(11,152,96,.75)}
nav a:hover{color:var(--green-d)}
.hphone:hover{color:var(--green-d)}

/* Первый экран: светлая инженерная сетка в палитре V2 */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:#edf5f2;
  background-image:
    linear-gradient(var(--grid-green) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-green) 1px,transparent 1px);
  background-size:32px 32px;
  border-bottom:1px solid #bed0ca;
}
.hero::before,.hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none;
}
.hero::before{
  width:480px;height:480px;right:-180px;top:-220px;
  background:radial-gradient(circle,rgba(28,80,101,.14),transparent 68%);
}
.hero::after{
  width:440px;height:440px;left:-210px;bottom:-270px;
  background:radial-gradient(circle,rgba(11,152,96,.13),transparent 68%);
}
.hero h1{color:#152832;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.hero h1 .g{color:var(--copper)}
.hero .lead{color:#50636b}
.hero .app{
  border-color:#9aabae;
  box-shadow:0 28px 70px rgba(20,55,64,.20),0 5px 16px rgba(20,55,64,.10);
}
.titlebar{
  background:linear-gradient(180deg,#fff,#e9efef);
  border-bottom-color:#c3cece;
}
.titlebar::before{
  content:"ONLINE";font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  color:var(--green-d);background:#e3f6ed;border:1px solid #9fd8be;border-radius:4px;padding:2px 6px;
  order:3;
}
.titlebar .v{margin-left:auto}
.cw-tab.on{box-shadow:inset 0 -3px 0 var(--green)}
.cw-run,.btn--run{
  background:linear-gradient(135deg,#0caf6d,var(--green-d));
  box-shadow:0 7px 18px rgba(8,118,75,.20);
}
.cw-run:hover,.btn--run:hover{background:linear-gradient(135deg,#0dc47a,#08744a)}
.hero .btn:not(.btn--run){border-color:#7895a1;color:#274857;background:rgba(255,255,255,.72)}
.hero .btn:not(.btn--run):hover{border-color:var(--petrol);background:#fff}
.hero .stats{position:relative}
.hero .stat{
  background:rgba(255,255,255,.86);border-color:#becbc9;
  box-shadow:0 8px 24px rgba(25,65,74,.08);backdrop-filter:blur(5px);
}
.hero .stat:nth-child(2) b i{color:var(--petrol)}
.hero .stat:nth-child(3) b i{color:var(--copper)}
.hero .chip{border-color:#c1cfcd;background:#fff}

/* Общий ритм полноширинных цветных блоков */
body>section:nth-of-type(2){background:#f8faf9}
body>section:nth-of-type(3){
  color:#fff;background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(135deg,var(--forest),var(--forest-deep));
  background-size:28px 28px,28px 28px,auto;
  border-top:1px solid #286f5c;border-bottom:1px solid #073b2f;
}
body>section:nth-of-type(3) h2{color:#fff}
body>section:nth-of-type(3) .lead{color:#cce7dd}
body>section:nth-of-type(3) .cap{color:#8de0bd}
body>section:nth-of-type(3) .panel{border-color:#79a99a;box-shadow:0 24px 60px rgba(3,33,26,.28)}
body>section:nth-of-type(4){background:#edf0f2}
body>section:nth-of-type(5){
  color:#fff;background:
    radial-gradient(circle at 82% 18%,rgba(197,104,50,.18),transparent 30%),
    linear-gradient(135deg,var(--petrol-deep),var(--petrol));
  border-top:1px solid #356b7e;border-bottom:1px solid #102f3b;
}
body>section:nth-of-type(5) h2{color:#fff}
body>section:nth-of-type(5) .lead{color:#c8dce3}
body>section:nth-of-type(5) .cap{color:#7dd9b2}
body>section:nth-of-type(5) .why{gap:20px}
body>section:nth-of-type(5) .wcard{
  color:#fff;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.20);
  box-shadow:0 14px 32px rgba(5,29,38,.20);
}
body>section:nth-of-type(5) .wcard .k{color:#8ce0bd}
body>section:nth-of-type(5) .wcard p{color:#d0e0e5}
body>section:nth-of-type(5) .wcard:nth-child(3){border-top:3px solid var(--copper)}
body>section:nth-of-type(6){background:#f5f7f6}
body>section:nth-of-type(7){background:#e8efef}
body>section:nth-of-type(8){
  color:#fff;background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(135deg,#0c4e3e,#143f4c);
  background-size:30px 30px,30px 30px,auto;
}
body>section:nth-of-type(8) h2{color:#fff}
body>section:nth-of-type(8) .cap{color:#8de0bd}
body>section:nth-of-type(8)>.wrap>.panel{border-color:#6f9b91;box-shadow:0 24px 60px rgba(3,27,23,.28)}

/* Цветные вертикальные рейки у рабочих панелей */
.panel{position:relative}
.panel::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--green);pointer-events:none;
}
body>section:nth-of-type(3) .panel::after{background:var(--copper)}
.case:nth-child(2) .panel::after,.cases .case:nth-child(2)::after{background:var(--petrol)}
.case:nth-child(3) .panel::after,.cases .case:nth-child(3)::after{background:var(--copper)}
.cases .case{transition:transform .2s,box-shadow .2s}
.cases .case:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(25,52,62,.13)}
.cases .case:nth-child(2) .pbar::before{background:var(--petrol)}
.cases .case:nth-child(3) .pbar::before{background:var(--copper)}
.cases .case:nth-child(2) .k{color:var(--petrol)}
.cases .case:nth-child(3) .k{color:#a84f21}
.cases .case:nth-child(2) .tag--g{border-color:var(--petrol);color:var(--petrol)}
.cases .case:nth-child(3) .tag--g{border-color:var(--copper);color:#a84f21}
.price b{color:var(--copper)}
.cap{font-weight:700}
footer{
  color:#c8d9dc;background:#102c36;border-top:1px solid #315260;
}
footer a{color:#fff}

@media(max-width:900px){
  body>section:nth-of-type(3),body>section:nth-of-type(8){background-size:24px 24px,24px 24px,auto}
}
@media(max-width:640px){
  .hero{background-size:24px 24px}
  .hero::before{width:320px;height:320px}
  .titlebar::before{display:none}
  body>section:nth-of-type(5) .wcard{background:rgba(255,255,255,.09)}
}