/* 7k699.lol — «Витражная мастерская» · префикс .pennant- */

:root{
  --pn-bg:#0e0c14;
  --pn-surf:#17141f;
  --pn-line:#241f2f;
  --pn-acc:#5a72d8;
  --pn-acc2:#8ea0ea;
  --pn-lead:#b8bcc4;
  --pn-txt:#eae8f2;
  --pn-mut:#948fa3;
  --pn-head:'Golos Text','Segoe UI',Arial,sans-serif;
  --pn-body:'Merriweather',Georgia,'Times New Roman',serif;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--pn-bg);
  color:var(--pn-txt);
  font-family:var(--pn-body);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* — заголовочный шрифт задан явным правилом, в body только Merriweather — */
h1,h2,h3,h4,
.pennant-logo__t,.pennant-kpi__n,.pennant-qbox__h,.pennant-card__n,.pennant-card__big,
.pennant-slot__p,.pennant-step__t,.pennant-step__c,.pennant-cta,.pennant-chip,
.pennant-tbl th,.pennant-faq summary,.pennant-rev__a,.pennant-ovrline,
.pennant-nav a,.pennant-foot__nav a,.pennant-foot__brand,.pennant-pre__h{
  font-family:var(--pn-head);
  font-weight:700;
  letter-spacing:-0.01em;
}

h1{font-size:2.05rem;line-height:1.22;margin:0 0 18px}
h2{font-size:1.5rem;line-height:1.3;margin:0 0 16px;padding-left:16px;border-left:5px solid var(--pn-acc)}
h3{font-size:1.06rem;line-height:1.36;margin:0 0 8px}

p{margin:0 0 14px}
a{color:var(--pn-acc2);text-decoration:none}
a:hover{text-decoration:underline}

.pennant-skip{position:absolute;left:-9999px}
.pennant-skip:focus{left:12px;top:12px;background:var(--pn-acc);color:#fff;padding:10px 16px;z-index:99}

/* ============ ШАПКА ============ */
.pennant-bar{
  display:flex;align-items:center;gap:22px;
  padding:14px 34px;
  background:rgba(14,12,20,.94);
  border-bottom:1px solid var(--pn-line);
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(7px);
}
.pennant-logo{display:flex;align-items:center;gap:11px;color:var(--pn-txt)}
.pennant-logo:hover{text-decoration:none}
.pennant-logo__svg{width:36px;height:36px;flex:0 0 36px}
.pennant-logo__t{display:flex;flex-direction:column;font-size:1.04rem;line-height:1.2}
.pennant-logo__sub{font-size:.63rem;font-weight:500;color:var(--pn-mut);letter-spacing:.06em;text-transform:uppercase}
.pennant-nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.pennant-nav a{font-size:.82rem;font-weight:500;color:var(--pn-mut);letter-spacing:.02em}
.pennant-nav a:hover{color:var(--pn-txt);text-decoration:none}

/* ============ КНОПКИ ============ */
.pennant-cta{
  display:inline-block;
  padding:13px 26px;
  background:var(--pn-acc);
  color:#fff;
  font-size:.9rem;
  border:2px solid var(--pn-acc);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.pennant-cta:hover{background:#4a60c4;border-color:#4a60c4;text-decoration:none;color:#fff}
.pennant-cta--sm{padding:9px 17px;font-size:.79rem}
.pennant-cta--xs{padding:7px 14px;font-size:.73rem}
.pennant-cta--lg{padding:16px 30px;font-size:.98rem}
.pennant-cta--ghost{background:transparent;color:var(--pn-txt);border-color:var(--pn-lead)}
.pennant-cta--ghost:hover{background:rgba(184,188,196,.12);border-color:var(--pn-lead);color:var(--pn-txt)}

/* ============ HERO — split с вертикальной чертой ============ */
.pennant-hero{
  display:grid;
  grid-template-columns:1fr 3px 400px;
  gap:38px;
  align-items:center;
  padding:52px 34px 46px;
  max-width:1320px;margin:0 auto;
}
.pennant-hero__rule{background:linear-gradient(180deg,transparent,var(--pn-lead) 14%,var(--pn-lead) 86%,transparent);height:100%;min-height:340px}
.pennant-chip{
  display:inline-block;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pn-acc2);
  border:1px solid var(--pn-line);
  padding:6px 13px;margin:0 0 18px;
}
.pennant-hero__sub{color:#cfcbdc;font-size:1.02rem;max-width:63ch}
.pennant-hero__btns{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 30px}
.pennant-kpi{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0}
.pennant-kpi li{background:var(--pn-surf);border-top:3px solid var(--pn-acc);padding:14px 15px}
.pennant-kpi__n{display:block;font-size:1.32rem;color:var(--pn-txt)}
.pennant-kpi__c{display:block;font-size:.76rem;color:var(--pn-mut);line-height:1.5;margin-top:4px}
.pennant-art{width:100%;height:auto;display:block;filter:drop-shadow(0 0 34px rgba(90,114,216,.28))}

/* ============ QUICK ============ */
.pennant-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  max-width:1320px;margin:0 auto 8px;padding:0 34px;
}
.pennant-qbox{background:var(--pn-surf);border:1px solid var(--pn-line);padding:20px 20px 8px}
.pennant-qbox__h{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pn-acc2);margin:0 0 8px}
.pennant-qbox p{font-size:.85rem;line-height:1.62;color:#c6c2d4}

/* ============ СЕКЦИИ ============ */
.pennant-sec{max-width:1320px;margin:0 auto;padding:52px 34px}
.pennant-sec--tint{background:var(--pn-surf);max-width:none}
.pennant-sec--tint > *{max-width:1252px;margin-left:auto;margin-right:auto}
.pennant-sec p{max-width:96ch}
.pennant-sec h3{margin-top:22px;color:var(--pn-acc2)}
.pennant-mid-cta{margin:26px 0 0}

/* ============ КАРТОЧКИ ПАКЕТА ============ */
.pennant-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 8px}
.pennant-card{background:var(--pn-bg);border:1px solid var(--pn-line);border-bottom:4px solid var(--pn-acc);padding:22px}
.pennant-sec--tint .pennant-card{background:var(--pn-bg)}
.pennant-card__n{font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pn-mut);margin:0 0 6px}
.pennant-card__big{font-size:1.22rem;color:var(--pn-txt);margin:0 0 10px}
.pennant-card p:last-child{font-size:.87rem;color:#c6c2d4;margin:0;line-height:1.62}

/* ============ ВИТРИНА СЛОТОВ ============ */
.pennant-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 20px}
.pennant-slot{
  background:var(--pn-bg);
  border:1px solid var(--pn-line);
  padding:18px 18px 16px;
  display:flex;flex-direction:column;
  border-top:3px solid var(--pn-lead);
}
.pennant-slot h3{font-size:.98rem;margin:0 0 3px;color:var(--pn-txt)}
.pennant-slot__p{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--pn-acc2);margin:0 0 9px}
.pennant-slot p{font-size:.83rem;line-height:1.6;color:#c2bed1;margin:0}
.pennant-slot__b{margin-top:14px !important}

/* ============ ТАБЛИЦЫ ============ */
.pennant-tablewrap{overflow-x:auto;margin:24px 0 18px;border:1px solid var(--pn-line)}
.pennant-tbl{width:100%;border-collapse:collapse;min-width:660px;font-size:.86rem}
.pennant-tbl th{
  text-align:left;padding:13px 16px;
  background:var(--pn-line);color:var(--pn-txt);
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
}
.pennant-tbl td{padding:12px 16px;border-top:1px solid var(--pn-line);color:#c9c5d7;vertical-align:top}
.pennant-tbl tr:nth-child(even) td{background:rgba(90,114,216,.05)}

/* ============ ЛЕСТНИЦА СТЁКОЛ ============ */
.pennant-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 8px}
.pennant-step{background:var(--pn-bg);border:1px solid var(--pn-line);padding:20px;position:relative}
.pennant-step::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:linear-gradient(90deg,var(--pn-acc),var(--pn-acc2))}
.pennant-step__t{font-size:1.06rem;margin:6px 0 2px;color:var(--pn-txt)}
.pennant-step__c{font-size:1.5rem;color:var(--pn-acc2);margin:0 0 8px}
.pennant-step p:last-child{font-size:.84rem;line-height:1.6;color:#c2bed1;margin:0}

/* ============ ОТЗЫВЫ ============ */
.pennant-rev{background:var(--pn-bg);border:1px solid var(--pn-line);padding:22px;border-left:4px solid var(--pn-acc2)}
.pennant-rev__stars{color:#e0b64a;letter-spacing:.16em;margin:0 0 10px;font-size:1rem}
.pennant-rev p{font-size:.87rem;line-height:1.66;color:#c6c2d4}
.pennant-rev__a{font-size:.78rem;color:var(--pn-mut);margin:12px 0 0 !important;letter-spacing:.03em}

/* ============ FAQ ============ */
.pennant-faq{margin:24px 0 0;border-top:1px solid var(--pn-line)}
.pennant-faq details{border-bottom:1px solid var(--pn-line)}
.pennant-faq summary{
  cursor:pointer;padding:15px 40px 15px 2px;position:relative;
  font-size:.95rem;color:var(--pn-txt);list-style:none;
}
.pennant-faq summary::-webkit-details-marker{display:none}
.pennant-faq summary::after{
  content:"+";position:absolute;right:8px;top:12px;
  color:var(--pn-acc2);font-size:1.3rem;line-height:1;
}
.pennant-faq details[open] summary::after{content:"–"}
.pennant-faq details p{padding:0 30px 17px 2px;margin:0;font-size:.88rem;color:#c6c2d4;line-height:1.7}

/* ============ PRE-FOOTER ============ */
.pennant-pre{
  background:linear-gradient(135deg,#191527 0%,#0e0c14 68%);
  border-top:1px solid var(--pn-line);border-bottom:1px solid var(--pn-line);
  padding:52px 34px;text-align:center;
}
.pennant-pre__h{font-size:1.42rem;line-height:1.3;margin:0 auto 16px;max-width:52ch}
.pennant-pre p{max-width:82ch;margin:0 auto 12px;color:#c6c2d4}
.pennant-pre__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ============ AUTHOR NOTE ============ */
.pennant-note{max-width:1320px;margin:0 auto;padding:44px 34px 52px}
.pennant-ovrline{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--pn-acc2);margin:0 0 8px}
.pennant-note h3{font-size:1.16rem;margin:0 0 12px}
.pennant-note p{font-size:.9rem;color:#b9b5c8;line-height:1.78;max-width:104ch}

/* ============ ПОДВАЛ ============ */
.pennant-foot{border-top:1px solid var(--pn-line);padding:34px;background:var(--pn-surf)}
.pennant-foot__row{max-width:1252px;margin:0 auto}
.pennant-foot__brand{font-size:1rem;margin:0 0 10px}
.pennant-foot p{font-size:.8rem;color:var(--pn-mut);line-height:1.68;max-width:110ch}
.pennant-foot__nav{max-width:1252px;margin:20px auto 0;display:flex;gap:20px;flex-wrap:wrap}
.pennant-foot__nav a{font-size:.78rem;font-weight:500;color:var(--pn-mut)}

/* ============ АДАПТИВ 1080 ============ */
@media (max-width:1080px){
  .pennant-hero{grid-template-columns:1fr 3px 300px;gap:26px;padding:40px 24px 36px}
  .pennant-sec,.pennant-note{padding:42px 24px}
  .pennant-quick{padding:0 24px;grid-template-columns:repeat(2,1fr);gap:2px}
  .pennant-grid4{grid-template-columns:repeat(3,1fr)}
  .pennant-bar{padding:12px 24px;gap:16px}
  h1{font-size:1.78rem}
}

/* ============ АДАПТИВ 860 ============ */
@media (max-width:860px){
  .pennant-hero{grid-template-columns:1fr;gap:26px}
  .pennant-hero__rule{display:none}
  .pennant-hero__right{max-width:330px}
  .pennant-kpi{grid-template-columns:repeat(2,1fr)}
  .pennant-grid3,.pennant-ladder{grid-template-columns:repeat(2,1fr)}
  .pennant-grid4{grid-template-columns:repeat(2,1fr)}
  .pennant-nav{order:3;width:100%;margin-left:0;gap:14px}
  .pennant-bar{flex-wrap:wrap}
  .pennant-cta--sm{margin-left:auto}
  h2{font-size:1.32rem}
}

/* ============ АДАПТИВ 620 ============ */
@media (max-width:620px){
  body{font-size:15px}
  h1{font-size:1.46rem}
  h2{font-size:1.16rem;padding-left:12px;border-left-width:4px}
  .pennant-hero,.pennant-sec,.pennant-note,.pennant-pre{padding-left:16px;padding-right:16px}
  .pennant-quick{padding:0 16px;grid-template-columns:1fr}
  .pennant-bar{padding:11px 16px}
  .pennant-foot{padding:26px 16px}
  .pennant-kpi,.pennant-grid3,.pennant-grid4,.pennant-ladder{grid-template-columns:1fr}
  .pennant-hero__btns .pennant-cta,.pennant-pre__btns .pennant-cta{width:100%;text-align:center}
  .pennant-logo__sub{display:none}
  .pennant-tbl{min-width:600px}
}