/* ==========================================================================
   vavada0979.com — «электрик-бирюза и слоновая кость»
   Шаблон B: редакционная лента в одну узкую колонку.
   Префикс классов: .reef-
   Шрифты: Poiret One (заголовки) / Open Sans (текст)
   ========================================================================== */

:root{
  --reef-bg:#0b1113;
  --reef-panel:#141b1e;
  --reef-panel-2:#182226;
  --reef-line:#243135;
  --reef-line-soft:#1c262a;
  --reef-acc:#25c9d6;
  --reef-acc-dim:rgba(37,201,214,.14);
  --reef-ivory:#efe9dd;
  --reef-txt:#e6eef0;
  --reef-mut:#8fa0a4;
  --reef-col:68ch;
  --reef-col-wide:84ch;
  --reef-fh:"Poiret One","Trebuchet MS",Verdana,sans-serif;
  --reef-fb:"Open Sans","Segoe UI",Tahoma,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--reef-bg);
  color:var(--reef-txt);
  font-family:var(--reef-fb);
  font-weight:300;
  font-size:17px;
  line-height:1.76;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
a{color:var(--reef-acc);text-decoration:none}
a:hover{color:var(--reef-ivory)}
::selection{background:var(--reef-acc);color:#04191c}
:focus-visible{outline:2px solid var(--reef-acc);outline-offset:3px}

/* ------------------------------------------------------------- skip-ссылка */
.reef-skip{
  position:absolute;left:-9999px;top:0;z-index:80;
  padding:11px 20px;background:var(--reef-acc);color:#04191c;
  font-weight:600;
}
.reef-skip:focus{left:14px;top:14px}

/* ------------------------------------------------------------------ шапка */
.reef-bar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:26px;
  padding:11px 30px;
  background:rgba(11,17,19,.93);
  border-bottom:1px solid var(--reef-line);
  backdrop-filter:saturate(140%) blur(10px);
}
.reef-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.reef-logo svg{width:34px;height:34px;display:block}
.reef-logo__t{display:flex;flex-direction:column;line-height:1.15}
.reef-logo__n{
  font-family:var(--reef-fh);font-size:25px;color:var(--reef-ivory);
  letter-spacing:.10em;
}
.reef-logo__s{
  font-size:10.5px;color:var(--reef-mut);
  text-transform:uppercase;letter-spacing:.19em;
}
.reef-nav{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.reef-nav a{
  font-size:14px;color:var(--reef-mut);
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.reef-nav a:hover{color:var(--reef-ivory);border-bottom-color:var(--reef-acc)}

/* -------------------------------------------------------------------- CTA */
.reef-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 24px;
  border:1px solid var(--reef-acc);
  border-radius:999px 999px 999px 4px;
  background:var(--reef-acc);color:#04191c;
  font-family:var(--reef-fb);font-weight:600;font-size:14.5px;
  letter-spacing:.015em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.reef-cta:hover{
  background:#4ddfe9;color:#04191c;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(37,201,214,.22);
}
.reef-cta--big{padding:16px 38px;font-size:16.5px}
.reef-cta--ghost{
  background:transparent;color:var(--reef-ivory);
  border-color:var(--reef-line);
}
.reef-cta--ghost:hover{background:var(--reef-acc-dim);color:var(--reef-ivory);border-color:var(--reef-acc);box-shadow:none}

/* ----------------------------------------------------------------- каркас */
.reef-wrap{width:100%;max-width:var(--reef-col-wide);margin:0 auto;padding:0 30px}
main{display:block;padding-bottom:80px}

.reef-sec{
  padding-top:54px;margin-top:54px;
  border-top:1px solid var(--reef-line-soft);
}

.reef-ovr{
  margin:0 0 10px;
  font-size:11px;color:var(--reef-acc);
  text-transform:uppercase;letter-spacing:.24em;
}

h1{
  font-family:var(--reef-fh);font-weight:400;
  font-size:clamp(31px,5vw,50px);line-height:1.16;
  margin:0 0 20px;color:var(--reef-ivory);letter-spacing:.01em;
}
h2{
  font-family:var(--reef-fh);font-weight:400;
  font-size:clamp(25px,3.4vw,35px);line-height:1.22;
  margin:0 0 20px;color:var(--reef-ivory);
}
h3{
  font-family:var(--reef-fb);font-weight:600;
  font-size:18px;line-height:1.4;
  margin:32px 0 12px;color:var(--reef-acc);
  letter-spacing:.005em;
}
p{margin:0 0 18px;max-width:var(--reef-col)}

/* ------------------------------------------------------------------- hero */
.reef-hero{
  padding:64px 0 6px;
  text-align:center;
}
.reef-hero .reef-ovr,.reef-hero h1,.reef-hero .reef-lead{margin-left:auto;margin-right:auto}
.reef-hero h1{max-width:22ch}
.reef-lead{
  max-width:var(--reef-col);
  font-size:18.5px;color:var(--reef-txt);opacity:.92;
  margin-bottom:28px;
}
.reef-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}

.reef-kpi{
  display:flex;justify-content:center;gap:0;
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--reef-line);
  border-bottom:1px solid var(--reef-line);
}
.reef-kpi li{
  flex:1 1 0;padding:18px 10px;
  display:flex;flex-direction:column;gap:3px;
  border-left:1px solid var(--reef-line-soft);
}
.reef-kpi li:first-child{border-left:0}
.reef-kpi__v{font-family:var(--reef-fh);font-size:29px;color:var(--reef-acc);line-height:1.1}
.reef-kpi__l{font-size:12.5px;color:var(--reef-mut);letter-spacing:.03em}

/* --------------------------------------------------------- quick-действия */
.reef-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:34px;background:var(--reef-line-soft);
  border:1px solid var(--reef-line-soft);
}
.reef-quick__i{
  display:flex;flex-direction:column;gap:6px;
  padding:20px 18px 22px;
  background:var(--reef-panel);
  color:var(--reef-txt);
  transition:background .2s ease;
}
.reef-quick__i:hover{background:var(--reef-panel-2);color:var(--reef-txt)}
.reef-quick__k{
  font-family:var(--reef-fh);font-size:26px;color:var(--reef-acc);line-height:1.1;
}
.reef-quick__h{
  font-size:11px;color:var(--reef-mut);
  text-transform:uppercase;letter-spacing:.18em;
}
.reef-quick__d{font-size:14px;line-height:1.6;color:var(--reef-txt);opacity:.86}

/* -------------------------------------------------- шкала волн депозита */
.reef-scale{margin:26px 0 24px;border-top:1px solid var(--reef-line)}
.reef-scale__row{
  display:flex;align-items:baseline;gap:22px;
  padding:16px 2px;
  border-bottom:1px solid var(--reef-line-soft);
}
.reef-scale__p{
  flex:0 0 96px;
  font-family:var(--reef-fh);font-size:32px;color:var(--reef-acc);line-height:1;
}
.reef-scale__c{flex:1 1 auto;font-size:15.5px;line-height:1.62;color:var(--reef-txt)}
.reef-scale__n{
  display:block;font-size:11px;color:var(--reef-mut);
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:2px;
}

.reef-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 8px;padding:0}
.reef-chips li{
  padding:6px 14px;font-size:13px;color:var(--reef-ivory);
  border:1px solid var(--reef-line);border-radius:999px 4px 999px 4px;
  background:var(--reef-panel);
}

/* ------------------------------------------------------ дни промо-недели */
.reef-days{margin:24px 0 8px;border-top:1px solid var(--reef-line)}
.reef-day{
  display:grid;grid-template-columns:56px 1fr;
  gap:4px 20px;padding:15px 2px;
  border-bottom:1px solid var(--reef-line-soft);
}
.reef-day__d{
  grid-row:1 / span 2;
  font-family:var(--reef-fh);font-size:26px;color:var(--reef-acc);
  line-height:1.1;padding-top:2px;
}
.reef-day__t{font-size:16px;color:var(--reef-ivory);line-height:1.45}
.reef-day__x{font-size:13.5px;color:var(--reef-mut);line-height:1.55}

/* --------------------------------------------------------------- таблицы */
.reef-tblwrap{overflow-x:auto;margin:24px 0 26px;border:1px solid var(--reef-line)}
.reef-tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:600px}
.reef-tbl caption{
  caption-side:top;text-align:left;padding:14px 16px;
  font-size:11px;color:var(--reef-mut);
  text-transform:uppercase;letter-spacing:.18em;
  border-bottom:1px solid var(--reef-line);
}
.reef-tbl th{
  text-align:left;padding:12px 16px;
  font-weight:600;font-size:12.5px;color:var(--reef-acc);
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--reef-panel-2);
  border-bottom:1px solid var(--reef-line);
}
.reef-tbl td{
  padding:12px 16px;
  border-bottom:1px solid var(--reef-line-soft);
  color:var(--reef-txt);
}
.reef-tbl tbody tr:nth-child(even){background:rgba(24,34,38,.55)}
.reef-tbl tbody tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------ SVG-фигура */
.reef-fig{margin:26px 0 24px;padding:18px 16px 14px;background:var(--reef-panel);border:1px solid var(--reef-line)}
.reef-fig svg{width:100%;height:auto;display:block}
.reef-fig figcaption{margin-top:10px;font-size:13px;color:var(--reef-mut);line-height:1.6}

/* ------------------------------------------------------- полосы возврата */
.reef-bars{margin:24px 0 26px;border-top:1px solid var(--reef-line)}
.reef-bar-row{
  display:flex;align-items:center;gap:18px;
  padding:15px 2px;
  border-bottom:1px solid var(--reef-line-soft);
}
.reef-bar-row__n{
  flex:0 0 120px;
  font-family:var(--reef-fh);font-size:23px;color:var(--reef-ivory);
}
.reef-bar-row__d{flex:1 1 auto;font-size:14px;color:var(--reef-mut);line-height:1.55}
.reef-bar-row__v{
  flex:0 0 78px;text-align:right;
  font-family:var(--reef-fh);font-size:30px;color:var(--reef-acc);
}

/* ------------------------------------------------------------ CTA-полоса */
.reef-strip{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;
  margin-top:54px;padding:30px 30px;
  background:linear-gradient(100deg,var(--reef-panel) 0%,var(--reef-panel-2) 100%);
  border-left:3px solid var(--reef-acc);
}
.reef-strip p{margin:0;max-width:52ch;font-size:16.5px;color:var(--reef-ivory)}

/* --------------------------------------------------------------- цитаты */
.reef-quote{
  margin:26px 0 22px;padding:26px 28px;
  background:var(--reef-panel);
  border-left:3px solid var(--reef-acc);
}
.reef-quote p{margin:0 0 14px;max-width:none;font-size:17.5px;line-height:1.7;color:var(--reef-txt)}
.reef-quote footer{font-size:13px;color:var(--reef-mut);letter-spacing:.03em}

.reef-notes{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--reef-line)}
.reef-notes__w{
  margin:0;max-width:none;padding:15px 2px;
  font-size:14.5px;color:var(--reef-mut);line-height:1.62;
  border-bottom:1px solid var(--reef-line-soft);
}

/* ------------------------------------------------------------------ FAQ */
.reef-faq{margin-top:22px;border-top:1px solid var(--reef-line)}
.reef-faq details{border-bottom:1px solid var(--reef-line-soft)}
.reef-faq summary{
  list-style:none;cursor:pointer;
  padding:16px 42px 16px 2px;position:relative;
  font-size:16.5px;color:var(--reef-ivory);line-height:1.5;
}
.reef-faq summary::-webkit-details-marker{display:none}
.reef-faq summary::after{
  content:"+";position:absolute;right:8px;top:14px;
  font-family:var(--reef-fh);font-size:26px;color:var(--reef-acc);line-height:1;
}
.reef-faq details[open] summary::after{content:"–"}
.reef-faq summary:hover{color:var(--reef-acc)}
.reef-faq details p{
  margin:0 0 18px;padding-right:42px;
  font-size:15.5px;color:var(--reef-txt);opacity:.88;
}

/* ---------------------------------------------------------------- подвал */
.reef-foot{
  border-top:1px solid var(--reef-line);
  background:var(--reef-panel);
  padding:40px 0 34px;
}
.reef-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.reef-cols p{margin:0;max-width:none;font-size:13.5px;color:var(--reef-mut);line-height:1.68}
.reef-age{
  margin:28px 0 0;font-size:12px;color:var(--reef-mut);
  letter-spacing:.2em;text-transform:uppercase;
  padding-top:18px;border-top:1px solid var(--reef-line-soft);
}

/* ----------------------------------------------------------- адаптив 1000 */
@media (max-width:1000px){
  .reef-bar{gap:18px;padding:10px 20px}
  .reef-nav{gap:16px}
  .reef-nav a{font-size:13px}
  .reef-quick{grid-template-columns:repeat(2,1fr)}
  .reef-cols{grid-template-columns:1fr 1fr}
  .reef-hero{padding-top:48px}
  .reef-kpi__v{font-size:25px}
}

/* ------------------------------------------------------------ адаптив 760 */
@media (max-width:760px){
  body{font-size:16px;line-height:1.72}
  .reef-wrap{padding:0 18px}
  .reef-bar{flex-wrap:wrap;padding:10px 16px;gap:12px}
  .reef-bar .reef-cta{order:2;margin-left:auto;padding:9px 16px;font-size:13px}
  .reef-nav{order:3;width:100%;margin-left:0;gap:14px;justify-content:space-between}
  .reef-hero{padding-top:36px;text-align:left}
  .reef-btns{justify-content:flex-start}
  .reef-kpi{flex-wrap:wrap}
  .reef-kpi li{flex:1 1 46%;border-left:0;border-top:1px solid var(--reef-line-soft)}
  .reef-kpi li:nth-child(-n+2){border-top:0}
  .reef-quick{grid-template-columns:1fr}
  .reef-scale__row{flex-direction:column;gap:4px}
  .reef-scale__p{flex:none}
  .reef-day{grid-template-columns:44px 1fr}
  .reef-day__d{font-size:21px}
  .reef-bar-row{flex-wrap:wrap;gap:6px 14px}
  .reef-bar-row__n{flex:1 1 auto}
  .reef-bar-row__v{flex:0 0 auto}
  .reef-bar-row__d{flex:1 1 100%;order:3}
  .reef-strip{padding:24px 20px}
  .reef-quote{padding:20px 18px}
  .reef-cols{grid-template-columns:1fr}
  .reef-sec{padding-top:42px;margin-top:42px}
  .reef-faq summary{font-size:15.5px}
  .reef-faq details p{padding-right:0}
}