/* ============================================================
   brand.css — общий дизайн-каркас сайта-дома «Александра Моц»
   Меняешь бренд ЗДЕСЬ — меняется на всех страницах платформы.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,560;0,9..144,660;1,9..144,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#ECEBE4; --ink:#1B1A17; --pine:#1E6B49; --amber:#B87519;
  --muted:#6E6A60; --line:#D6D4CB; --card:#F6F5F0; --paper2:#E4E3DB;
  --disp:"Fraunces",Georgia,serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* уровни продуктов (tiers) */
  --t-free:#1E6B49; --t-cheap:#2B6CB0; --t-consult:#B87519; --t-premium:#1B1A17;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);font-weight:500}
.vc{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--amber);border:1px solid var(--amber);border-radius:20px;padding:1px 8px;letter-spacing:.03em}

/* ---- Шапка ---- */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid var(--line)}
.brand .bn{font-family:var(--disp);font-weight:660;font-size:19px;letter-spacing:-.01em;line-height:1.05}
.brand .bs{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em}
.site-nav .links{display:flex;gap:24px;font-size:14.5px;color:var(--muted)}
.site-nav .links a{text-decoration:none}
.site-nav .links a:hover{color:var(--ink)}

/* ---- Кнопки ---- */
.btn{font-family:var(--body);font-weight:600;font-size:15px;border:none;border-radius:2px;padding:12px 22px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-pri{background:var(--ink);color:var(--paper)}
.btn-pri:hover{background:var(--pine)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:10.5px 20px}
.btn-ghost:hover{border-color:var(--pine);color:var(--pine)}

/* ---- Плашки уровней ---- */
.tier{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;padding:3px 10px;border-radius:20px;color:#fff;display:inline-block}
.tier.free{background:var(--t-free)} .tier.cheap{background:var(--t-cheap)}
.tier.consult{background:var(--t-consult)} .tier.premium{background:var(--t-premium)}

/* ---- Каталог карточек ---- */
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:8px 0 40px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--pine);transform:translateY(-2px)}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pcard h3{font-family:var(--disp);font-weight:560;font-size:22px;letter-spacing:-.01em;margin:2px 0 0}
.pcard p{color:var(--muted);font-size:14.5px;margin:0;flex:1}
.pcard .foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.pcard .price{font-family:var(--mono);font-size:17px;font-weight:500}
.pcard .price.free{color:var(--pine)}
.pcard .go{font-family:var(--mono);font-size:12.5px;color:var(--pine)}
.pcard.soon{opacity:.62}
.pcard.soon .go{color:var(--muted)}

/* ---- Секции ---- */
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin:52px 0 22px}
.sec-head h2{font-family:var(--disp);font-weight:560;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.015em;margin:0}
.sec-head .n{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* ---- Футер ---- */
.site-foot{background:var(--paper2);margin-top:60px;font-size:13.5px;color:var(--muted)}
.site-foot .wrap{padding:40px 28px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.site-foot h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 11px;font-weight:600}
.site-foot a{color:var(--muted);text-decoration:none;display:block;padding:3px 0}
.site-foot a:hover{color:var(--pine)}
.site-foot .req{font-family:var(--mono);font-size:12px;line-height:1.85}
.fill{color:var(--amber)}

/* ---- Манифест-полоса (тёмная панель) ---- */
.band{background:var(--ink);color:var(--paper);border-radius:14px;padding:48px 44px;margin:48px 0}
.band .eyebrow{color:var(--amber)}
.band h2{font-family:var(--disp);font-weight:560;font-size:clamp(26px,4vw,40px);line-height:1.1;letter-spacing:-.015em;margin:12px 0 0;max-width:22ch}
.band p{color:#C9C7BE;max-width:58ch;font-size:18px;margin-top:18px}

/* ---- Почему я ---- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin:56px 0 8px}
.why .avatar-lg{width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid var(--card);box-shadow:0 8px 24px rgba(27,26,23,.15);display:block;margin-bottom:18px}
.why .big{font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(23px,3vw,30px);line-height:1.3;letter-spacing:-.01em}
.why .big u{text-decoration:none;background:linear-gradient(transparent 60%,#E7C98A 60%)}
.why ul{list-style:none;padding:0;margin:0;font-size:16px}
.why li{padding:12px 0 12px 26px;border-top:1px solid var(--line);position:relative;color:var(--muted)}
.why li:before{content:"→";position:absolute;left:0;color:var(--pine)}
.why li b{color:var(--ink);font-weight:600}

@media(max-width:720px){
  .site-nav .links{display:none}
  .site-foot .wrap{grid-template-columns:1fr}
  .why{grid-template-columns:1fr;gap:24px}
  .band{padding:34px 24px}
}