/* ===== ИИ может всё · sales editorial system ===== */
:root{
  --paper:#fff8ec;
  --paper-2:#ffeed1;
  --ink:#0c0c0c;
  --ink-2:#2a2823;
  --mute:#79716a;
  --line:#0c0c0c1a;
  --line-strong:#0c0c0c33;

  --brand:#5d2cf0;
  --lime:#d4ff3a;
  --coral:#ff4d2e;

  --claude:#e8348a;
  --cursor:#2962ff;
  --chatgpt:#ff9a1f;
  --gpts:#5d2cf0;
  --idea:#0b9963;
  --skills:#0c0c0c;

  --maxw: 1320px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Onest", system-ui, sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, #00000010, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #00000010, transparent 60%);
  z-index:0;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1 }

/* TOPBAR */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0 18px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:"Unbounded", sans-serif;
  font-weight:600; letter-spacing:-0.01em;
  font-size:15px;
}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #b394ff, var(--brand) 70%);
  box-shadow:0 0 0 4px #5d2cf022;
}
.topnav{ display:flex; gap:28px; font-size:14px; color:var(--ink-2)}
.topnav a{ position:relative; padding:4px 0 }
.topnav a:hover{ color:var(--ink) }
.topnav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-19px; height:1px; background:var(--ink);
}
.live{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; color:var(--mute);
  display:flex; align-items:center; gap:8px;
}
.live .pulse{
  width:7px; height:7px; border-radius:50%; background:#1c8b58;
  box-shadow:0 0 0 0 #1c8b58aa; animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 #1c8b5866}
  70%{box-shadow:0 0 0 8px #1c8b5800}
  100%{box-shadow:0 0 0 0 #1c8b5800}
}

/* COMMON BITS */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"JetBrains Mono", monospace;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--mute);
}
.eyebrow .tick{ width:14px; height:1px; background:currentColor }

.sticker{
  display:inline-block;
  background:var(--lime); color:var(--ink);
  font-family:"Unbounded", sans-serif;
  font-weight:600;
  padding:2px 12px 4px;
  border-radius:999px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 0 #0c0c0c;
}

.serif-em{
  font-style:italic; font-family:"Instrument Serif", serif; font-weight:400;
  color:var(--brand);
  background:var(--lime);
  display:inline-block;
  padding:0 0.1em;
  line-height:0.78;
  vertical-align:-0.06em;
  border-radius:0.06em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* CTAs */
.cta-primary{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--paper);
  padding:18px 26px;
  border-radius:999px;
  font-family:"Unbounded", sans-serif;
  font-weight:600; font-size:16px; letter-spacing:-0.01em;
  border:2px solid var(--ink);
  transition: transform .15s ease, background .15s ease;
}
.cta-primary:hover{ background:var(--brand); border-color:var(--brand); transform: translateY(-2px) }
.cta-primary .arr{ transition: transform .2s ease }
.cta-primary:hover .arr{ transform: translateX(4px) }

.cta-alt{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 22px; border-radius:999px;
  border:2px solid var(--ink); background:transparent;
  font-family:"Unbounded", sans-serif; font-weight:600; font-size:15px;
  transition: background .15s ease;
}
.cta-alt:hover{ background:var(--ink); color:var(--paper) }

.cta-lime{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--lime); color:var(--ink);
  padding:18px 26px; border-radius:999px;
  font-family:"Unbounded", sans-serif; font-weight:700; font-size:16px;
  border:2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-lime:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink) }

/* SECTION */
section{ padding:120px 0 80px; border-bottom:1px solid var(--line); position:relative }
.section-head{
  display:grid; grid-template-columns: 80px 1fr auto;
  gap:32px; align-items:end; margin-bottom:48px;
}
.section-no{
  font-family:"JetBrains Mono", monospace;
  font-size:14px; color:var(--mute);
}
.section-kicker{
  font-family:"JetBrains Mono", monospace;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mute); margin-bottom:14px;
}
.section-title{
  font-family:"Unbounded", sans-serif;
  font-weight:600;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height:0.95; letter-spacing:-0.03em;
  margin:0;
}
.section-aside{
  font-size:14px; color:var(--mute); max-width:280px; text-align:right;
}

/* TAG ROW */
.tagrow{
  display:flex; flex-wrap:wrap; gap:10px;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px 9px 12px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:14px; font-weight:500;
  background:#fff8;
  transition:transform .15s ease, background .15s ease;
}
.tag:hover{ background:#fff; transform:translateY(-2px) }
.tag .glyph{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; color:#fff;
}
.tag.claude .glyph{ background:var(--claude) }
.tag.cursor .glyph{ background:var(--cursor) }
.tag.chatgpt .glyph{ background:var(--chatgpt) }
.tag.gpts .glyph{ background:var(--gpts) }
.tag.skills .glyph{ background:var(--skills) }
.tag.idea .glyph{ background:var(--idea) }

/* PRICE STRIP */
.price-strip{
  background:var(--ink); color:var(--paper);
  border-radius:20px;
  padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  box-shadow: 0 16px 40px -20px #5d2cf066;
}
.price-strip .left{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.price-strip .crossed{
  font-family:"Unbounded", sans-serif;
  font-weight:500; font-size:20px;
  color:#ffffff66;
  text-decoration: line-through; text-decoration-thickness:2px;
}
.price-strip .price{
  font-family:"Unbounded", sans-serif;
  font-weight:700; font-size:36px; letter-spacing:-0.02em; line-height:1;
  color:var(--lime);
}
.price-strip .label{
  font-size:14px; color:#ffffffaa; max-width:36ch;
}
.price-strip .right{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--lime); color:var(--ink);
  padding:14px 22px; border-radius:999px;
  font-family:"Unbounded", sans-serif; font-weight:600; font-size:15px;
  transition: transform .15s ease, filter .15s ease;
}
.price-strip .right:hover{ transform: translateY(-2px); filter:brightness(1.05) }

/* STICKY CTA BAR */
.sticky-cta{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(150%);
  z-index:100;
  display:flex; align-items:center; gap:14px;
  background:var(--ink); color:var(--paper);
  padding:10px 12px 10px 22px;
  border-radius:999px;
  box-shadow: 0 20px 50px -15px #0c0c0c66, 0 0 0 1px #ffffff10 inset;
  font-size:14px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1.2);
  max-width: calc(100vw - 32px);
}
.sticky-cta.visible{ transform: translateX(-50%) translateY(0) }
.sticky-cta .label{ display:flex; align-items:center; gap:10px; white-space:nowrap }
.sticky-cta .dot{
  width:8px;height:8px;border-radius:50%; background:var(--lime);
  animation: pulse-lime 1.6s infinite;
}
@keyframes pulse-lime{
  0%{box-shadow:0 0 0 0 #d4ff3a99}
  70%{box-shadow:0 0 0 10px #d4ff3a00}
  100%{box-shadow:0 0 0 0 #d4ff3a00}
}
.sticky-cta .go{
  background:var(--lime); color:var(--ink);
  padding:10px 18px; border-radius:999px;
  font-family:"Unbounded", sans-serif; font-weight:600;
  transition: filter .15s ease;
  white-space:nowrap; flex-shrink:0;
}
.sticky-cta .go:hover{ filter:brightness(1.05) }
.sticky-cta .close{
  width:32px; height:32px; border-radius:50%;
  background:#ffffff10; display:grid; place-items:center;
  cursor:pointer; color:#ffffff90;
  transition: background .15s ease;
}
.sticky-cta .close:hover{ background:#ffffff20; color:#fff }

/* FOOTER */
footer{
  padding:80px 0 60px;
}
.foot-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px;
  border-top:1px solid var(--line-strong); padding-top:48px;
}
.foot-grid h5{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mute); margin:0 0 14px;
}
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:15px }
.foot-grid a:hover{ color:var(--brand) }
.foot-cta{
  font-family:"Instrument Serif", serif;
  font-size:32px; line-height:1.15; letter-spacing:-0.01em;
  color:var(--ink);
  max-width:18ch;
}
.foot-cta em{ color:var(--brand); font-style:italic; background:var(--lime); padding:0 0.12em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
.copy{
  margin-top:48px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--mute);
  letter-spacing:0.04em;
}

/* responsive shared */
@media (max-width: 1000px){
  .section-head{ grid-template-columns:1fr; gap:14px }
  .section-aside{ text-align:left; max-width:none }
  .topnav{ display:none }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px }
  .price-strip{ flex-direction:column; align-items:flex-start; gap:18px }
}
@media (max-width:600px){
  .wrap{ padding:0 18px }
  section{ padding:64px 0 48px }
  .foot-grid{ grid-template-columns:1fr; gap:24px }
  .copy{ flex-direction:column; gap:8px; align-items:flex-start }

  /* topbar */
  .topbar{ flex-wrap:wrap; gap:8px; padding:14px 0 12px }
  .topbar .live{ display:none }
  .brand{ font-size:13.5px }

  /* CTAs full-bleed feel */
  .cta-primary, .cta-alt, .cta-lime{
    padding:14px 18px; font-size:14.5px;
    width:100%; justify-content:center;
  }
  .cta-lime{ box-shadow: 3px 3px 0 var(--ink) }
  .cta-lime:hover{ box-shadow: 4px 4px 0 var(--ink) }

  /* sticky cta on phone — stack & compact */
  .sticky-cta{
    left:12px; right:12px; bottom:12px;
    transform: translateY(150%);
    padding:6px 6px 6px 16px;
    font-size:13px;
    max-width: none; width: auto;
  }
  .sticky-cta.visible{ transform: translateY(0) }
  .sticky-cta .label{ font-size:12.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis }
  .sticky-cta .go{ padding:7px 14px; font-size:13px; white-space:nowrap }
  .sticky-cta .close{ width:26px; height:26px; font-size:14px }

  /* price strip compact */
  .price-strip{ padding:16px 18px; border-radius:16px }
  .price-strip .price{ font-size:30px }
  .price-strip .crossed{ font-size:16px }
  .price-strip .label{ font-size:13px }
  .price-strip .right{ width:100%; justify-content:center; padding:12px 18px }

  /* section spacing */
  .section-title{ font-size: clamp(32px, 9vw, 44px) !important }

  /* AGGRESSIVE TITLE SHRINK — prevents long Cyrillic words from overflowing */
  h1, .hero-title, .lesson-title{
    font-size: clamp(36px, 11vw, 56px) !important;
    line-height: 0.95 !important;
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .final h2{
    font-size: clamp(34px, 11vw, 56px) !important;
    line-height:0.95 !important;
  }
  .closing-cta h2{
    font-size: clamp(34px, 11vw, 56px) !important;
    line-height:0.95 !important;
  }
  /* sticker shouldn’t blow up vertical rhythm */
  .sticker{ display:inline-block; padding:1px 8px 3px; box-shadow: 0 3px 0 #0c0c0c }
  .foot-cta{ font-size:24px }
}
/* Sticky CTA — slim look on tablets too (600-900px) */
@media (min-width:601px) and (max-width:900px){
  .sticky-cta{
    left:16px; right:16px; bottom:14px;
    transform: translateY(150%);
    padding:6px 6px 6px 18px;
    font-size:13.5px;
    max-width: none; width:auto;
  }
  .sticky-cta.visible{ transform: translateY(0) }
  .sticky-cta .label{ font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis }
  .sticky-cta .go{ padding:8px 16px; font-size:13.5px; white-space:nowrap }
  .sticky-cta .close{ width:28px; height:28px; font-size:14px }
}

@media (max-width:380px){
  .wrap{ padding:0 14px }
  .brand{ font-size:12.5px }
  .brand .dot{ width:8px; height:8px }
  h1, .hero-title, .lesson-title{
    font-size: clamp(30px, 11vw, 44px) !important;
  }
}