/* 7k071.fun — архетип funicular: две встречные наклонные линии, блоки-вагоны на них.
   namespace: fnk */

:root{
  --bg:#0E1012;
  --surface:#171A1D;
  --line:#23282C;
  --red:#D42335;
  --gold:#DDB055;
  --green:#37DB9E;

  --ink:#E7EAEE;
  --ink-dim:#9AA3AC;
  --radius:10px;
  --rail-up:-2.6deg;
  --rail-down:2.6deg;
  --display:"Kelly Slab",Georgia,serif;
  --body:"Nunito Sans","Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* ---------- два встречных пути через всю страницу ---------- */
.fnk-track{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(212,35,53,.16) 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom left,transparent calc(50% - 1px),rgba(221,176,85,.13) 50%,transparent calc(50% + 1px));
}

.fnk-shell{
  position:relative;
  z-index:1;
  max-width:1060px;
  margin:0 auto;
  padding:0 22px 64px;
}

/* ---------- шапка: фуникулёр, кнопки на встречных путях ---------- */
.fnk-mast{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(14,16,18,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(7px);
}

.fnk-mast-in{
  max-width:1060px;
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.fnk-word{
  font-family:var(--display);
  font-size:25px;
  letter-spacing:.4px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.fnk-word span{color:var(--red)}
.fnk-word em{
  display:block;
  font-family:var(--body);
  font-style:normal;
  font-size:10.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.fnk-rails{
  display:flex;
  align-items:center;
  gap:10px;
}

.fnk-rail{position:relative;padding:4px 0}
.fnk-rail::before{
  content:"";
  position:absolute;
  left:-14px;
  right:-6px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line));
}
.fnk-rail--up{transform:rotate(var(--rail-up))}
.fnk-rail--down{transform:rotate(var(--rail-down))}
.fnk-rail--up::before{background:linear-gradient(90deg,transparent,rgba(221,176,85,.45))}
.fnk-rail--down::before{background:linear-gradient(90deg,transparent,rgba(212,35,53,.45))}

.fnk-btn{
  position:relative;
  display:inline-block;
  padding:9px 17px;
  border-radius:var(--radius);
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid var(--red);
  line-height:1.2;
}
.fnk-btn--ghost{color:var(--ink);background:transparent}
.fnk-btn--solid{color:#fff;background:var(--red)}
.fnk-btn--wide{padding:14px 30px;font-size:17px}

/* ---------- первый экран ---------- */
.fnk-hero{
  margin-top:30px;
  padding:30px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 46px) 100%,0 100%);
}

h1{
  font-family:var(--display);
  font-weight:400;
  font-size:33px;
  line-height:1.22;
  margin:0 0 14px;
}
h1 span{color:var(--gold)}

.fnk-lead{font-size:18px;color:var(--ink);margin:0 0 22px}

.fnk-kpi{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}
.fnk-kpi li{
  background:var(--bg);
  border:1px solid var(--line);
  border-bottom:2px solid var(--gold);
  padding:13px 12px 17px;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
}
.fnk-kpi .fnk-num{
  display:block;
  font-family:var(--display);
  font-size:22px;
  color:var(--gold);
  line-height:1.15;
}
.fnk-kpi small{display:block;font-size:12px;color:var(--ink-dim);margin-top:5px}

/* ---------- секции-вагоны ---------- */
.fnk-car{
  position:relative;
  margin:34px 0 0;
  padding:24px 26px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.fnk-car::before{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  top:-18px;
  height:1px;
  background:linear-gradient(90deg,rgba(212,35,53,.5),rgba(221,176,85,.5));
  transform:rotate(var(--rail-up));
}
.fnk-car--down::before{transform:rotate(var(--rail-down))}

h2{
  font-family:var(--display);
  font-weight:400;
  font-size:25px;
  line-height:1.3;
  margin:0 0 14px;
  padding-left:15px;
  border-left:3px solid var(--red);
}
h3{
  font-family:var(--display);
  font-weight:400;
  font-size:19px;
  margin:22px 0 8px;
  color:var(--gold);
}
p{margin:0 0 13px}

.fnk-accent{color:var(--gold);font-weight:700}
.fnk-yes{color:var(--green);font-weight:700}
.fnk-mark{color:var(--red);font-weight:700}

ul,ol{margin:0 0 13px;padding-left:22px}
li{margin:0 0 7px}

.fnk-steps{list-style:none;padding-left:0}
.fnk-steps li{
  position:relative;
  padding:9px 0 9px 42px;
  border-bottom:1px dashed var(--line);
}
.fnk-steps li::before{
  content:"";
  position:absolute;
  left:12px;
  top:17px;
  width:12px;
  height:12px;
  background:var(--red);
  transform:rotate(45deg);
}

/* ---------- таблицы ---------- */
.fnk-scroll{overflow-x:auto;margin:0 0 15px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
caption{
  caption-side:top;
  text-align:left;
  font-size:13px;
  color:var(--ink-dim);
  padding:0 0 8px;
}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
thead th{background:var(--bg);color:var(--gold);font-weight:700;font-size:14px}
tbody tr:nth-child(even) td{background:rgba(35,40,44,.32)}

/* ---------- графика ---------- */
.fnk-draw{
  margin:18px 0;
  padding:16px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.fnk-draw svg{display:block;width:100%;max-width:100%;height:auto}
.fnk-cap{font-size:13px;color:var(--ink-dim);margin:9px 0 0}

/* ---------- отзыв, FAQ, CTA ---------- */
.fnk-voice{
  margin:18px 0;
  padding:16px 18px;
  border-left:3px solid var(--gold);
  background:var(--bg);
}
.fnk-voice cite{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--ink-dim)}

details{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:11px 15px;
  margin:0 0 9px;
  background:var(--bg);
}
summary{cursor:pointer;font-weight:700;color:var(--ink)}
summary::marker{color:var(--red)}
details p{margin:10px 0 0;color:var(--ink-dim)}

.fnk-cta{
  margin:26px 0 0;
  padding:22px;
  text-align:center;
  background:var(--bg);
  border:1px dashed var(--red);
  border-radius:var(--radius);
}
.fnk-cta p{color:var(--ink-dim);font-size:15px;margin:11px 0 0}

/* ---------- подвал ---------- */
.fnk-base{
  margin-top:40px;
  padding:24px 26px;
  background:var(--surface);
  border-top:2px solid var(--red);
  font-size:14px;
  color:var(--ink-dim);
}
.fnk-base p{margin:0 0 8px}
.fnk-age{color:var(--gold);font-weight:700}

/* ---------- 640 px ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .fnk-shell{padding:0 14px 44px}
  .fnk-mast-in{padding:9px 14px;gap:8px}
  .fnk-word{font-size:19px}
  .fnk-word em{font-size:9px;letter-spacing:1.6px}
  .fnk-rails{gap:6px}
  .fnk-rail::before{display:none}
  .fnk-rail--up,.fnk-rail--down{transform:none}
  .fnk-btn{padding:8px 11px;font-size:13px}
  .fnk-btn--wide{padding:12px 20px;font-size:15px}
  h1{font-size:25px}
  h2{font-size:21px;padding-left:11px}
  h3{font-size:17px}
  .fnk-hero{padding:20px 16px;clip-path:none}
  .fnk-car{padding:18px 16px 20px}
  .fnk-car::before{left:16px;right:16px}
  .fnk-kpi{grid-template-columns:repeat(2,1fr)}
  .fnk-kpi li:last-child{grid-column:1 / -1}
  .fnk-draw{padding:10px}
  .fnk-base{padding:18px 16px}
  table{font-size:14px;min-width:460px}
}