/* Радио Причал — общий стиль */
html{background:#15120f}
body{margin:0;color:#e8e1d5;font:15px/1.65 Verdana,Geneva,sans-serif;background:#15120f}
a{color:#ff8a33}
a:hover{color:#ffb27a}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* шапка */
.top{border-bottom:1px solid #2e2822}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:16px;padding-bottom:16px}
.top__logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.top__logo:hover{color:#fff}
.top__logo svg{width:44px;height:44px}
.top__name{font:20px/1 "Arial Black","Arial Bold",Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase}
.top__name small{display:block;margin-top:7px;font:11px/1 Verdana,Geneva,sans-serif;letter-spacing:.3px;text-transform:none;color:#9b9184}
.top__nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-left:auto;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.top__nav a{padding:6px 0;border-bottom:2px solid transparent;color:#cfc6b8;text-decoration:none}
.top__nav a:hover{color:#fff}
.top__nav a.is-here{border-color:#ff7a1a;color:#fff}
.top__lk{padding:8px 16px;border:1px solid #ff7a1a;border-radius:20px;font-size:12px;color:#ff8a33;text-decoration:none;white-space:nowrap}
.top__lk:hover{background:#ff7a1a;color:#15120f}
.onair{border-bottom:1px solid #2e2822;background:#1e1a16;font-size:13px;color:#b9afa1}
.onair .wrap{padding-top:9px;padding-bottom:9px}
.onair__dot{display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#ff7a1a;animation:blink 1.6s infinite}
.onair b{font-weight:normal;color:#fff}
@keyframes blink{50%{opacity:.25}}

/* первый экран */
.hero{padding:58px 0 52px;border-bottom:1px solid #2e2822}
.hero .wrap{display:flex;align-items:center;gap:48px}
.hero__text{flex:1 1 0}
.hero h1{margin:0 0 18px;font:42px/1.14 "Arial Black","Arial Bold",Arial,sans-serif;color:#fff}
.hero h1 em{font-style:normal;color:#ff7a1a}
.hero p{max-width:610px;margin:0 0 26px;font-size:16px;color:#cfc6b8}
.hero__eq{display:flex;flex:none;align-items:flex-end;gap:7px;width:300px;height:190px}
.hero__eq i{flex:1;height:100%;background:linear-gradient(#ff7a1a,#a8430a);transform-origin:bottom;animation:eq 1.3s ease-in-out infinite alternate}
.hero__eq i:nth-child(2n){animation-duration:.9s}
.hero__eq i:nth-child(3n){animation-duration:1.7s;animation-delay:-.6s}
.hero__eq i:nth-child(5n){animation-duration:1.1s;animation-delay:-.3s}
@keyframes eq{from{transform:scaleY(.16)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hero__eq i,.onair__dot{animation:none}}
.btn{display:inline-block;margin:0 10px 10px 0;padding:12px 22px;border:1px solid #ff7a1a;border-radius:24px;background:#ff7a1a;color:#15120f;font-weight:bold;text-decoration:none}
.btn:hover{border-color:#ffa257;background:#ffa257;color:#15120f}
.btn--line{border-color:#6b6156;background:none;color:#e8e1d5;font-weight:normal}
.btn--line:hover{border-color:#e8e1d5;background:none;color:#fff}

/* разделы */
.band{padding:46px 0;border-bottom:1px solid #2e2822}
.kicker{margin:0 0 8px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#ff8a33}
h1{margin:0 0 16px;font:36px/1.15 "Arial Black","Arial Bold",Arial,sans-serif;color:#fff}
h2{margin:0 0 16px;font:25px/1.2 "Arial Black","Arial Bold",Arial,sans-serif;color:#fff}
.band p + h2,.band ul + h2,.band div + h2,.band ol + h2{margin-top:38px}
.band .kicker + h2{margin-top:0}
h3{margin:0 0 8px;font-size:16px;color:#fff}
.lead{max-width:760px;margin:0 0 8px;font-size:16px;color:#cfc6b8}
.facts{display:flex;gap:30px}
.facts div{flex:1;font-size:13px;color:#b9afa1}
.facts b{display:block;margin-bottom:4px;font:34px/1.1 "Arial Black","Arial Bold",Arial,sans-serif;color:#ff7a1a}
.steps{margin:0;padding:0;list-style:none;counter-reset:n}
.steps li{position:relative;max-width:780px;margin:0 0 16px;padding-left:58px;counter-increment:n}
.steps li:before{content:"0" counter(n);position:absolute;left:0;top:-2px;font:bold 22px/1.4 "Courier New",Courier,monospace;color:#ff7a1a}
.steps b{color:#fff}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px 34px}
.cols p{margin:0;color:#cfc6b8}
.two{display:grid;grid-template-columns:1.25fr 1fr;align-items:start;gap:50px}
.log{margin:0;padding:0;list-style:none}
.log li{margin-bottom:14px;padding-left:16px;border-left:2px solid #ff7a1a;color:#cfc6b8}
.log time{display:block;font:12px/1.6 "Courier New",Courier,monospace;color:#9b9184}

/* потоки */
.stream{display:grid;grid-template-columns:46px 210px 1fr 250px;gap:6px 22px;padding:20px 0;border-top:1px solid #2e2822}
.stream__no{font:bold 15px/1.9 "Courier New",Courier,monospace;color:#ff7a1a}
.stream__name{font:19px/1.3 "Arial Black","Arial Bold",Arial,sans-serif;color:#fff}
.stream__name small{display:block;margin-top:4px;font:12px/1.5 Verdana,Geneva,sans-serif;color:#9b9184}
.stream__about{color:#cfc6b8}
.stream__for{font-size:13px;color:#9b9184}
.stream__for b{display:block;font-weight:normal;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#ff8a33}
.ticks{margin:0;padding:0;list-style:none}
.ticks li{max-width:800px;margin-bottom:10px;padding-left:26px;background:linear-gradient(#ff7a1a,#ff7a1a) 0 .75em/14px 2px no-repeat;color:#cfc6b8}
.ticks b{color:#fff}

/* сетка эфира */
.day{display:flex;height:56px;margin:24px 0 6px;border-radius:6px;overflow:hidden}
.day span{display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:12px;white-space:nowrap;color:#15120f}
.day__scale{display:flex;margin-bottom:26px;font:12px/1 "Courier New",Courier,monospace;color:#9b9184}
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:8px 14px 8px 0;font-size:11px;font-weight:normal;letter-spacing:1px;text-align:left;text-transform:uppercase;color:#9b9184}
.tbl td{padding:12px 14px 12px 0;border-top:1px solid #2e2822;vertical-align:top;color:#cfc6b8}
.tbl td.t{font-family:"Courier New",Courier,monospace;white-space:nowrap;color:#ff8a33}
.tbl td.r{padding-right:0;text-align:right;white-space:nowrap;color:#fff}
.tbl td b{color:#fff}

/* цены */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0 8px}
.plan{padding:24px 24px 14px;border:1px solid #2e2822;border-radius:10px;background:#1e1a16}
.plan--main{border-color:#ff7a1a}
.plan__for{margin:0 0 14px;font-size:13px;color:#9b9184}
.plan__price{margin:0 0 14px;font:30px/1.1 "Arial Black","Arial Bold",Arial,sans-serif;color:#fff}
.plan__price small{font:13px/1 Verdana,Geneva,sans-serif;color:#9b9184}
.plan ul{margin:0;padding-left:18px;color:#cfc6b8}
.plan li{margin-bottom:6px}
.note{max-width:780px;color:#cfc6b8}

/* контакты и вход */
.card{padding:24px;border:1px solid #2e2822;border-radius:10px;background:#1e1a16}
.card dl{margin:0}
.card dt{margin-top:14px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9b9184}
.card dt:first-child{margin-top:0}
.card dd{margin:2px 0 0;color:#fff}
.card dd small{display:block;color:#9b9184}
.faq dt{margin-top:14px;color:#fff}
.faq dd{margin:2px 0 0;color:#cfc6b8}
.login label{display:block;margin-bottom:14px;font-size:13px;color:#b9afa1}
.login input{display:block;box-sizing:border-box;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #4a4138;border-radius:6px;background:#15120f;color:#fff;font:15px Verdana,Geneva,sans-serif}
.login input:focus{border-color:#ff7a1a;outline:none}
.login button{padding:12px 30px;border:0;border-radius:24px;background:#ff7a1a;color:#15120f;font:bold 15px Verdana,Geneva,sans-serif;cursor:pointer}
.login__msg{min-height:1.65em;margin:14px 0 0;font-size:13px;color:#ffb27a}

/* подвал */
.foot{padding:30px 0 36px;background:#0f0d0b;font-size:13px;color:#9b9184}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px 50px}
.foot div div{flex:1 1 220px}
.foot b{color:#e8e1d5}
.foot a{color:#cfc6b8}

@media (max-width:860px){
.top__nav{order:3;flex-basis:100%;margin-left:0}
.top__lk{margin-left:auto}
.hero{padding:36px 0}
.hero .wrap{display:block}
.hero h1{font-size:30px}
.hero__eq{width:auto;height:70px;margin-top:20px}
h1{font-size:28px}
h2{font-size:21px}
.facts{flex-wrap:wrap}
.facts div{flex:1 1 40%}
.two,.plans{display:block}
.two > div + div,.plan + .plan{margin-top:26px}
.stream{grid-template-columns:38px 1fr}
.stream__about,.stream__for{grid-column:2}
.day span{font-size:0}
}
