/* Sonya AI — Modernist redesign. Shared stylesheet for /, /business, /experts, /agencies. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap');

:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-text:#201e1d;
  --color-accent:#ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100:#f8f4f4;
  --color-neutral-200:#eae7e7;
  --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6;
  --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d;
  --color-neutral-800:#444141;

  --color-accent-100:#fff2ef;
  --color-accent-600:#dd2b0f;
  --color-accent-700:#ae1800;
  --color-accent-800:#7c1405;

  --font: "Archivo", system-ui, sans-serif;
  --edge: clamp(16px, 4vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font); font-size:15px; line-height:1.6; font-weight:400;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3,h4{font-family:var(--font); font-weight:800; margin:0; line-height:1.05}
p{margin:0}
ul{margin:0; padding:0}
img{display:block; max-width:100%}
a{color:inherit}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}

.tnum{font-feature-settings:"tnum" 1}

/* — rules — */
.rule{height:2px; background:var(--color-divider); border:0; margin:0}
.rule-strong{border-top:2px solid var(--color-text)}

/* — buttons — */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:800; font-size:15px; line-height:1.2;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  padding:15px 22px; border-radius:0; border:1px solid transparent;
  background:transparent; color:var(--color-text);
}
.btn-primary{background:var(--color-accent); color:#f3f2f2}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-primary:active{background:var(--color-accent-700)}
.btn-secondary{border-color:var(--color-text)}
.btn-secondary:hover{background:color-mix(in srgb, var(--color-text) 7%, transparent)}
.btn-ghost-invert{color:#f3f2f2; border:1px solid #f3f2f2; background:transparent}
.btn-ghost-invert:hover{background:color-mix(in srgb, #f3f2f2 14%, transparent)}
.btn-ghost{color:var(--color-accent-700); padding-inline:6px}
.btn-ghost:hover{background:color-mix(in srgb, var(--color-accent) 10%, transparent)}

/* — tags — */
.tag{display:inline-flex; align-items:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px}
.tag-accent{background:var(--color-accent-100); color:var(--color-accent-800)}

/* ═══════════════ Header ═══════════════ */
.site-header{border-top:6px solid var(--color-text); padding:18px var(--edge) 0}
.meta-bar{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-neutral-700); padding-bottom:12px; border-bottom:2px solid var(--color-divider);
}
.meta-live{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.meta-dot-wrap{display:inline-flex; align-items:center; gap:10px; color:var(--color-text); font-weight:600}
.meta-dot{width:8px; height:8px; background:var(--color-accent); flex:none; animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.meta-nav{display:flex; gap:24px; flex-wrap:wrap}
.meta-nav a{text-decoration:none; color:inherit}
.meta-nav a:hover, .meta-nav a[aria-current="page"]{color:var(--color-accent-700); font-weight:600}

.masthead{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px 32px; padding:20px 0 22px}
.wordmark{font-weight:800; font-size:clamp(36px,6vw,72px); line-height:.9; letter-spacing:-.045em; margin-left:-.06em; text-decoration:none; color:var(--color-text)}
.wordmark .dot{color:var(--color-accent)}
.masthead-hero .wordmark{font-size:clamp(56px,13vw,200px); letter-spacing:-.045em}
.masthead-lede{display:flex; flex-direction:column; gap:14px; align-items:flex-start; max-width:280px}
.masthead-lede p{font-size:14px; line-height:1.5; color:var(--color-neutral-800)}

/* ═══════════════ Boxed cell grids (Знакомо?/Тарифы/Почему/Для кого/…) ═══════════════ */
.cell-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr)); border-top:2px solid var(--color-text); border-left:2px solid var(--color-text)}
.cell-grid--sm{grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr))}
.cell{padding:24px 24px 32px; border-right:2px solid var(--color-text); border-bottom:2px solid var(--color-text); display:flex; flex-direction:column; gap:14px; box-sizing:border-box}
.cell--tall{min-height:240px}
.cell--accent{background:var(--color-accent-100)}
.cell-num{font-weight:800; font-size:14px}
.cell h3{font-size:24px; letter-spacing:-.015em; line-height:1.05}
.cell p{font-size:15px; line-height:24px; color:var(--color-neutral-800)}
.cell-stat{font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.02em; color:var(--color-neutral-400)}

.cell--wide{grid-column:1 / -1}

/* — pricing cards — */
.price-head{display:flex; justify-content:space-between; gap:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-neutral-700)}
.price-hit{color:var(--color-accent-800); font-weight:400}
.price{font-weight:800; font-size:clamp(36px,4vw,56px); line-height:1; letter-spacing:-.03em; color:var(--color-text)}
.price span{font-size:15px; font-weight:400; letter-spacing:0; color:var(--color-neutral-700)}
.cell--accent .price{color:var(--color-accent)}
.price-list{list-style:none; margin:0; padding:16px 0 0; display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:22px; border-top:2px solid var(--color-divider)}
.price-list li{display:flex; gap:10px}
.price-list li::before{content:""; width:8px; height:8px; background:var(--color-accent); flex:none; margin-top:7px}
.cell .btn{margin-top:auto; align-self:flex-start}

/* ═══════════════ Divider strip (stats, funnel steps) ═══════════════ */
.strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr)); border-top:2px solid var(--color-text)}
.strip--boxed{border-bottom:2px solid var(--color-text)}
.strip-col{padding:28px var(--edge) 32px; border-left:2px solid var(--color-divider)}
.strip-col:first-child{border-left:none}
.strip--boxed .strip-col{padding:28px var(--edge) 32px}
.stat-num{font-weight:800; font-size:clamp(40px,4.5vw,64px); line-height:1; letter-spacing:-.03em; color:var(--color-accent); margin-left:-.04em}
.stat-label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-top:16px; color:var(--color-neutral-800)}

/* step row without outer box shading, small numerals for funnel */
.step-strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,140px),1fr)); border-top:2px solid var(--color-text)}
.step-strip .strip-col{padding:24px 20px 28px 0}
.step-strip .strip-col:first-child{padding-left:0}
.step-num{font-weight:800; font-size:clamp(28px,3.2vw,40px); color:var(--color-accent); letter-spacing:-.02em}
.step-name{font-weight:800; font-size:16px; margin-top:4px}
.step-note{font-size:13px; color:var(--color-neutral-700); margin-top:4px; line-height:1.4}

/* boxed 3-step "as it works" row, own border box */
.steps-box{border:2px solid var(--color-text); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr))}
.steps-box .step-col{padding:32px 28px; border-left:2px solid var(--color-divider)}
.steps-box .step-col:first-child{border-left:none}
.steps-box .step-num{font-size:clamp(40px,4.5vw,64px); font-weight:800; color:var(--color-accent); letter-spacing:-.02em}
.steps-box h4{font-size:20px; margin-top:8px}
.steps-box p{font-size:15px; line-height:24px; color:var(--color-neutral-800); margin-top:10px}

/* ═══════════════ Board (pipeline) ═══════════════ */
.board-section{border-top:2px solid var(--color-text); border-bottom:2px solid var(--color-text)}
.board-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.board-col{
  padding:20px var(--edge) 0; border-left:2px solid var(--color-divider);
  display:flex; flex-direction:column; min-height:260px; position:relative;
}
.board-col:first-child{border-left:none}
.board-col.is-active{background:var(--color-accent-100)}
.board-num{font-weight:800; font-size:clamp(48px,9vw,144px); line-height:.9; letter-spacing:-.04em; margin-left:-.04em; color:var(--color-neutral-400)}
.board-col.is-active .board-num{color:var(--color-accent)}
.board-col.is-done .board-num{color:var(--color-text)}
.board-name{font-weight:800; font-size:clamp(16px,2vw,26px); letter-spacing:-.01em; margin-top:18px; line-height:1.05}
.board-role{font-size:clamp(11px,1.1vw,14px); line-height:1.4; color:var(--color-neutral-700); margin-top:6px}
.board-status{
  margin-top:auto; padding-top:20px; padding-bottom:12px; font-size:clamp(10px,1vw,12px);
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-neutral-600);
  display:flex; justify-content:space-between; gap:8px;
}
.board-col.is-active .board-status{color:var(--color-accent-700)}
.board-bar{height:6px; background:var(--color-neutral-300); margin:0 calc(-1 * var(--edge))}
.board-bar i{display:block; height:100%; width:0%; background:var(--color-accent); transition:width .3s linear}
.board-journal{border-top:2px solid var(--color-divider); padding:10px var(--edge); display:flex; gap:28px; flex-wrap:wrap; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-neutral-700); min-height:20px}
.board-journal .label{color:var(--color-text); font-weight:600}
.board-journal .entry{display:flex; gap:10px; align-items:center}
.board-journal .entry i{width:6px; height:6px; background:var(--color-accent); display:inline-block; flex:none}

/* ═══════════════ Front page (2-col hero content) ═══════════════ */
.frontpage{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,420px),1fr)); gap:48px clamp(32px,5vw,96px); padding:64px var(--edge) 80px; align-items:start}
.kicker{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-700); font-weight:600}
.kicker-muted{color:var(--color-neutral-600); font-weight:400}
.frontpage h2{font-size:clamp(40px,5.4vw,80px); line-height:.98; letter-spacing:-.03em; margin-top:14px}
.frontpage p.lede{font-size:17px; line-height:28px; color:var(--color-neutral-800); margin-top:20px; max-width:46ch}
.frontpage .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.frontpage .example{margin-top:28px; padding-top:20px; border-top:2px solid var(--color-divider); font-size:14px; color:var(--color-neutral-700)}
.frontpage .example b{color:var(--color-text); font-weight:600}

.post-card{border-top:6px solid var(--color-text); padding-top:12px}
.post-meta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.post-photo{margin-top:14px; aspect-ratio:16/8; background:var(--color-neutral-300); display:flex; align-items:flex-end; padding:12px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-neutral-700)}
.post-text{font-weight:800; font-size:clamp(20px,2vw,26px); line-height:1.25; letter-spacing:-.015em; margin-top:18px; min-height:130px}
.post-text .cursor{display:inline-block; width:10px; height:1em; background:var(--color-accent); vertical-align:-.1em; animation:cursor-blink .9s steps(1) infinite}
.post-text.is-done .cursor{display:none}
@keyframes cursor-blink{50%{opacity:0}}
.post-stats{display:flex; gap:20px; margin-top:18px; padding-top:12px; border-top:2px solid var(--color-divider); font-size:13px; color:var(--color-neutral-700)}

/* ═══════════════ Audience rows ═══════════════ */
.audience-row{display:grid; grid-template-columns:minmax(56px,120px) minmax(0,1fr) auto; gap:12px clamp(20px,4vw,72px); align-items:start; padding:32px 0; border-top:2px solid var(--color-text); text-decoration:none; color:var(--color-text)}
.audience-row:last-of-type{border-bottom:2px solid var(--color-text)}
.audience-row:hover{background:var(--color-accent-100)}
.audience-num{font-weight:800; font-size:clamp(36px,4vw,56px); line-height:1; letter-spacing:-.03em}
.audience-body{display:flex; flex-direction:column; gap:12px}
.audience-body h3{font-size:clamp(24px,3vw,40px); letter-spacing:-.02em; line-height:1.05}
.audience-body p{font-size:15px; line-height:24px; color:var(--color-neutral-800); max-width:60ch}
.audience-go{color:var(--color-accent-700); font-weight:600; font-size:15px; white-space:nowrap}

/* ═══════════════ Generic section shell ═══════════════ */
.section{padding:56px var(--edge)}
.section-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.section-head h2{font-size:32px; letter-spacing:-.02em}
.section-head .kicker{margin:0}
.section-note{font-size:14px; color:var(--color-neutral-700); margin-top:16px; max-width:60ch}

/* — hero (inner pages) — */
.hero{padding:56px var(--edge) 40px}
.hero h1{font-size:clamp(44px,7vw,112px); line-height:.98; letter-spacing:-.03em; margin-top:16px}
.hero h1 .accent{color:var(--color-accent)}
.hero-body{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,360px),1fr)); gap:32px; align-items:end; margin-top:8px}
.hero-body p.lede{font-size:16px; line-height:26px; color:var(--color-neutral-800)}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.hero-note{margin-top:24px; padding-top:16px; border-top:2px solid var(--color-divider); font-size:14px; color:var(--color-neutral-700)}

/* ═══════════════ FAQ ═══════════════ */
.faq-section{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,320px),1fr)); gap:24px clamp(32px,5vw,96px); padding:88px var(--edge) 96px}
.faq-list details{border-top:2px solid var(--color-divider)}
.faq-list details:last-child{border-bottom:2px solid var(--color-divider)}
.faq-list summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-weight:800; font-size:18px; letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .ico{color:var(--color-accent); font-weight:400; flex:none}
.faq-list summary .ico::before{content:"+"}
.faq-list details[open] summary .ico::before{content:"−"}
.faq-list p{margin:0; padding:0 0 20px; font-size:15.5px; line-height:26px; color:var(--color-neutral-800)}

/* ═══════════════ Poster close ═══════════════ */
.poster-close{background:var(--color-accent); color:#f3f2f2; padding:72px var(--edge) 64px; display:flex; flex-direction:column; gap:48px}
.poster-meta{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
.poster-close h2{font-size:clamp(48px,11vw,168px); line-height:.9; letter-spacing:-.045em; margin-left:-.06em}
.poster-close.is-home h2{font-size:clamp(48px,11vw,168px)}
.poster-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.poster-actions .left{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.poster-sub{font-size:14px; opacity:.85}

/* ═══════════════ Footer ═══════════════ */
.site-footer{padding:28px var(--edge); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.06em; text-transform:uppercase; line-height:20px; color:var(--color-neutral-700); margin-top:auto}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--color-accent-700)}
.footer-links{display:flex; gap:16px; flex-wrap:wrap}

main{flex:1 0 auto}

/* ═══════════════ Channel feed ═══════════════ */
.feed-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr)); border-top:2px solid var(--color-text); border-left:2px solid var(--color-text)}
.feed-cell{border-right:2px solid var(--color-text); border-bottom:2px solid var(--color-text); display:flex; flex-direction:column; text-decoration:none; color:var(--color-text)}
.feed-cell:hover{background:var(--color-accent-100)}
.feed-photo{aspect-ratio:16/10; background:var(--color-neutral-300); filter:grayscale(1) contrast(1.08)}
.feed-body{padding:20px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.feed-text{font-size:14.5px; line-height:22px; color:var(--color-neutral-800); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.feed-meta{margin-top:auto; padding-top:12px; border-top:2px solid var(--color-divider); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-neutral-600); display:flex; justify-content:space-between}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}