/* ===== ИИ может всё · 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;
  }
}

/* ============================================================
   VIBE & CHILL — ANIMATIONS PACK
   reveal · counter · typewriter · live-rings · breathing CTA
   blobs · ticker · tilt · glitch · confetti particle
   ============================================================ */

/* 1. Reveal-on-scroll (auto-applied by animations.js) */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}

/* 2. Counter — keeps inherited font-size so it works in any context */
.count{ display:inline-block; font-variant-numeric: tabular-nums }
.count.big{
  font-family:"Unbounded",sans-serif; font-weight:800;
  font-size: clamp(48px, 12vw, 96px);
  color:var(--brand); letter-spacing:-0.04em; line-height:1;
}

/* 3. Typewriter */
.type-loop{
  font-family:"Unbounded",sans-serif; font-weight:700;
  font-size: clamp(24px, 6vw, 40px); line-height:1.1;
  margin:0;
}
.type-target{
  display:inline-block; min-width:7ch;
  color:var(--brand); background:var(--lime);
  padding:0 0.1em; position:relative;
}
.type-target::after{
  content:""; position:absolute; right:-0.08em; top:8%;
  width:0.06em; height:84%;
  background:var(--ink); animation: blink .9s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* 4. Live-dot with ripple rings — enhances existing .pulse */
.live-rings{
  position:relative; display:inline-block; width:10px; height:10px; vertical-align:middle;
}
.live-rings::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#7cff5b; box-shadow:0 0 10px #7cff5b;
}
.live-rings .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid #7cff5b; opacity:0;
  animation: liveRipple 2.2s ease-out infinite;
}
.live-rings .ring:nth-child(2){ animation-delay:1.1s }
@keyframes liveRipple{
  0%{ transform:scale(1); opacity:.8 }
  100%{ transform:scale(3.6); opacity:0 }
}

/* 5. Breathing CTA — apply to .cta-lime, .cta-fire, .cta-tg automatically */
.cta-lime, .cta-fire, .cta-tg{
  animation: cta-breathe 2.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.cta-lime:active, .cta-fire:active, .cta-tg:active{
  transform:scale(.96); transition:transform .1s;
}
@keyframes cta-breathe{
  0%,100%{ transform:scale(1);    box-shadow: 0 0 0 0  var(--cta-glow, #d4ff3a55) }
  50%    { transform:scale(1.03); box-shadow: 0 0 0 14px transparent }
}
.cta-fire{ --cta-glow: #ff4d2e55 }
.cta-tg  { --cta-glow: #229ED955 }
@media (prefers-reduced-motion: reduce){
  .cta-lime, .cta-fire, .cta-tg{ animation: none }
}

/* 6. Floating gradient blobs background — wrap section in position:relative */
.blob-bg{
  position:absolute; inset:0; pointer-events:none;
  overflow:hidden; z-index:0;
}
.blob-bg + *{ position:relative; z-index:1 }
.blob-bg .blob{
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.5; will-change: transform;
}
.blob-bg .blob.b1{ width:280px; height:280px; background:var(--brand); top:-80px; left:-80px; animation: blobF1 16s ease-in-out infinite }
.blob-bg .blob.b2{ width:240px; height:240px; background:var(--lime);  top:30%; right:-60px;   animation: blobF2 22s ease-in-out infinite }
.blob-bg .blob.b3{ width:260px; height:260px; background:var(--coral); bottom:-100px; left:30%; animation: blobF3 18s ease-in-out infinite }
@keyframes blobF1{ 50%{ transform: translate(50px, 40px) scale(1.1) } }
@keyframes blobF2{ 50%{ transform: translate(-40px, 70px) scale(.95) } }
@keyframes blobF3{ 50%{ transform: translate(30px, -50px) scale(1.05) } }
@media (prefers-reduced-motion: reduce){
  .blob-bg .blob{ animation: none }
}

/* 7. Marquee ticker */
.ticker{
  overflow:hidden; background:var(--ink); color:var(--paper);
  border-radius:99px; padding:14px 0;
  margin: 24px 0;
}
.ticker-track{
  display:flex; gap:32px; white-space:nowrap; width:max-content;
  font-family:"JetBrains Mono",monospace; font-size:13.5px;
  animation: marquee 30s linear infinite;
}
.ticker-track span{ flex:none }
@keyframes marquee{ to{ transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none }
}

/* 8. Tilt card */
.tilt, .tilt-card{
  perspective: 1000px; transform-style: preserve-3d;
  transition: transform .15s ease-out;
  will-change: transform;
}

/* 9. Glitch text on tap */
.glitch{
  position:relative; display:inline-block;
  cursor:pointer; user-select:none;
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  opacity:0; pointer-events:none;
}
.glitch::before{ color: var(--coral); transform: translate(2px,0); mix-blend-mode: multiply }
.glitch::after { color: var(--brand); transform: translate(-2px,0); mix-blend-mode: multiply }
.glitch.on{ animation: glitchShake .35s linear }
.glitch.on::before{ animation: glitchR .35s steps(8); opacity:1 }
.glitch.on::after { animation: glitchL .35s steps(8); opacity:1 }
@keyframes glitchShake{
  25%{ transform: translate(-2px, 1px) }
  50%{ transform: translate(2px, -1px) }
  75%{ transform: translate(-1px, 2px) }
}
@keyframes glitchR{ 50%{ transform: translate(6px, 0) } }
@keyframes glitchL{ 50%{ transform: translate(-6px, 0) } }

/* 10. Confetti particle */
.particle{
  position:fixed; width:8px; height:8px; border-radius:2px;
  pointer-events:none; z-index:9999;
}