/* ============================================================
   Авито Гид — «Мастерская продавца»
   Слой поверх redesign.css. Все классы с префиксом .t-
   ============================================================ */

:root{
  --t-ink:#14172a;
  --t-soft:#4b5068;
  --t-faint:#858ba3;
  --t-accent:#5b6cf0;
  --t-accent2:#4aa8ff;
  --t-deep:#4235c9;
  --t-grad:linear-gradient(135deg,#6d5efc,#4aa8ff);
  --t-gold:#c97a12;
  --t-gold-ink:#8a5106;
  --t-gold-wash:rgba(224,145,47,.14);
  --t-gold-line:rgba(201,122,18,.32);
  --t-ok:#0b8f62;
  --t-danger:#c2362f;

  --t-panel:rgba(255,255,255,.62);
  --t-panel-solid:rgba(255,255,255,.88);
  --t-edge:rgba(255,255,255,.72);
  --t-line:rgba(30,40,90,.11);
  --t-line-hard:rgba(30,40,90,.2);
  --t-blur:saturate(1.6) blur(20px);
  --t-shadow:0 10px 34px rgba(24,32,72,.10);
  --t-shadow-lg:0 26px 64px rgba(24,32,72,.18);
  --t-r:20px; --t-r-sm:13px; --t-r-lg:30px; --t-pill:999px;
}

.t-page{ font-family:"Onest",system-ui,-apple-system,sans-serif; }
.t-page *{ box-sizing:border-box; }

/* мелкая точечная текстура — «бумага» под стеклом */
.t-page::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(40,50,90,.13) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 62%);
}

.t-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.24em;
  font-size:.66rem; font-weight:800; color:var(--t-deep);
}

/* ============================================================
   1. ГЕРОЙ — асимметричный: слева текст, справа живая карточка
   ============================================================ */
.t-hero{ padding:44px 0 8px; }
.t-hero-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:38px; align-items:center;
  background:var(--t-panel);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur);
  border:1px solid var(--t-edge); border-radius:var(--t-r-lg);
  box-shadow:var(--t-shadow-lg);
  padding:46px 46px 44px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.4),transparent 42%);
  position:relative; overflow:hidden;
}
/* световое пятно в углу */
.t-hero-grid::after{
  content:""; position:absolute; width:420px; height:420px; right:-140px; top:-190px;
  background:radial-gradient(circle,rgba(109,94,252,.20),transparent 68%);
  border-radius:50%; pointer-events:none;
}
.t-hero h1{
  font-size:clamp(2.1rem,4.1vw,3.15rem); line-height:1.08; letter-spacing:-.03em;
  font-weight:800; color:var(--t-ink); margin:14px 0 0; max-width:15ch;
}
.t-hero h1 em{
  font-style:normal; background:var(--t-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.t-hero-lead{
  font-size:1.06rem; color:var(--t-soft); line-height:1.62;
  max-width:44ch; margin:18px 0 26px;
}
.t-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.t-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.92rem; line-height:1;
  padding:14px 24px; border-radius:var(--t-pill); border:1px solid transparent;
  text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s, color .15s;
}
.t-btn:active{ transform:translateY(1px); }
.t-btn-primary{
  background:var(--t-grad); color:#fff !important;
  box-shadow:0 10px 26px rgba(91,108,240,.36);
  border-color:rgba(255,255,255,.36);
}
.t-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(91,108,240,.46); }
.t-btn-ghost{
  background:rgba(255,255,255,.6); color:var(--t-ink) !important;
  border-color:var(--t-line-hard);
}
.t-btn-ghost:hover{ background:#fff; transform:translateY(-2px); }
.t-btn-gold{
  background:linear-gradient(135deg,#f0a63c,#e0761f); color:#fff !important;
  box-shadow:0 10px 26px rgba(214,124,30,.34); border-color:rgba(255,255,255,.36);
}
.t-btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(214,124,30,.44); }
.t-btn[disabled]{ opacity:.5; pointer-events:none; }

/* счётчик лимита */
.t-quota{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; color:var(--t-soft);
  background:rgba(255,255,255,.62); border:1px solid var(--t-line);
  padding:9px 15px; border-radius:var(--t-pill);
}
.t-quota b{ color:var(--t-deep); font-weight:800; }
.t-quota.is-pro{ border-color:var(--t-gold-line); background:var(--t-gold-wash); color:var(--t-gold-ink); }
.t-quota.is-pro b{ color:var(--t-gold-ink); }
.t-dot{ width:7px; height:7px; border-radius:50%; background:var(--t-ok); flex:none; }
.t-quota.is-empty .t-dot{ background:var(--t-danger); }

/* правая карточка — демонстрация «было / стало» */
.t-demo{
  background:var(--t-panel-solid); border:1px solid var(--t-edge);
  border-radius:var(--t-r); box-shadow:var(--t-shadow); padding:24px 24px 22px;
  position:relative; z-index:1;
}
.t-demo-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--t-line);
}
.t-demo-title{ font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--t-faint); }
.t-demo-row{ display:flex; gap:13px; padding:13px 0; }
.t-demo-row + .t-demo-row{ border-top:1px dashed var(--t-line); }
.t-demo-tag{
  flex:none; width:52px; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding-top:3px;
}
.t-demo-row.bad .t-demo-tag{ color:var(--t-danger); }
.t-demo-row.good .t-demo-tag{ color:var(--t-ok); }
.t-demo-text{ font-size:.95rem; line-height:1.5; color:var(--t-ink); }
.t-demo-row.bad .t-demo-text{ color:var(--t-faint); text-decoration:line-through; text-decoration-thickness:1px; }
.t-demo-note{ display:block; margin-top:5px; font-size:.76rem; color:var(--t-faint); text-decoration:none; }
.t-demo-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--t-line);
  display:flex; gap:20px;
}
.t-demo-stat b{ display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.02em;
  background:var(--t-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.t-demo-stat span{ font-size:.72rem; color:var(--t-faint); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }

/* ============================================================
   2. ЗАГОЛОВКИ СЕКЦИЙ
   ============================================================ */
.t-section{ padding:52px 0 0; }
.t-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; flex-wrap:wrap; }
.t-sec-head h2{
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; letter-spacing:-.02em;
  color:var(--t-ink); margin:8px 0 0; line-height:1.2;
}
.t-sec-head p{ color:var(--t-soft); font-size:.98rem; margin:8px 0 0; max-width:52ch; }

/* ============================================================
   3. БЕНТО-СЕТКА ИНСТРУМЕНТОВ
   ============================================================ */
/* 9 инструментов ровно ложатся в 3×3 — без рваных рядов */
.t-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.t-card{
  display:flex; flex-direction:column; gap:11px; text-align:left; cursor:pointer;
  font-family:inherit; position:relative; overflow:hidden;
  background:var(--t-panel); -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur);
  border:1px solid var(--t-edge); border-radius:var(--t-r);
  box-shadow:var(--t-shadow); padding:22px 22px 20px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s;
}
.t-card:hover{ transform:translateY(-5px); box-shadow:var(--t-shadow-lg); background:rgba(255,255,255,.82); }
.t-card:focus-visible{ outline:2px solid var(--t-accent); outline-offset:3px; }
/* тонкая цветная полоса сверху проявляется на ховере */
.t-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--t-grad); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.t-card:hover::before{ transform:scaleX(1); }
.t-card.is-pro::before{ background:linear-gradient(135deg,#f0a63c,#e0761f); }

.t-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.t-ico{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,rgba(109,94,252,.16),rgba(74,168,255,.10));
  border:1px solid rgba(109,94,252,.2); color:var(--t-deep);
}
.t-card.is-pro .t-ico{
  background:linear-gradient(160deg,rgba(240,166,60,.2),rgba(224,118,31,.1));
  border-color:var(--t-gold-line); color:var(--t-gold-ink);
}
.t-ico svg{ width:21px; height:21px; }

.t-badge{
  font-size:.6rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--t-pill); flex:none; white-space:nowrap;
}
.t-badge-free{ background:rgba(11,143,98,.11); color:var(--t-ok); border:1px solid rgba(11,143,98,.24); }
.t-badge-pro{ background:var(--t-gold-wash); color:var(--t-gold-ink); border:1px solid var(--t-gold-line); }
.t-badge-instant{ background:rgba(91,108,240,.1); color:var(--t-deep); border:1px solid rgba(91,108,240,.22); }

.t-card h3{ font-size:1.06rem; font-weight:700; color:var(--t-ink); margin:0; letter-spacing:-.01em; line-height:1.3; }
.t-card p{ font-size:.885rem; color:var(--t-soft); margin:0; line-height:1.52; flex:1; }
.t-card-go{
  font-size:.78rem; font-weight:800; color:var(--t-deep);
  display:inline-flex; align-items:center; gap:6px; margin-top:2px;
}
.t-card.is-pro .t-card-go{ color:var(--t-gold-ink); }
.t-card-go svg{ width:13px; height:13px; transition:transform .18s; }
.t-card:hover .t-card-go svg{ transform:translateX(4px); }

/* ============================================================
   4. РАБОЧАЯ ПАНЕЛЬ
   ============================================================ */
.t-workspace{
  margin-top:26px; display:none;
  background:var(--t-panel-solid);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur);
  border:1px solid var(--t-edge); border-radius:var(--t-r-lg);
  box-shadow:var(--t-shadow-lg); overflow:hidden;
  animation:t-in .32s cubic-bezier(.2,.7,.3,1);
}
.t-workspace.open{ display:block; }
@keyframes t-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.t-ws-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px 26px; border-bottom:1px solid var(--t-line);
  background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);
}
.t-ws-bar .t-ico{ width:36px; height:36px; border-radius:10px; }
.t-ws-bar .t-ico svg{ width:18px; height:18px; }
.t-ws-name{ font-weight:800; font-size:1.05rem; color:var(--t-ink); letter-spacing:-.01em; }
.t-ws-sub{ font-size:.8rem; color:var(--t-faint); margin-top:2px; }
.t-ws-close{
  margin-left:auto; background:none; border:1px solid var(--t-line-hard); cursor:pointer;
  width:34px; height:34px; border-radius:50%; color:var(--t-soft); font-family:inherit;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.t-ws-close:hover{ background:#fff; color:var(--t-ink); border-color:var(--t-ink); }
.t-ws-close svg{ width:15px; height:15px; }

.t-ws-body{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
.t-ws-form{ padding:26px; border-right:1px solid var(--t-line); }
.t-ws-out{ padding:26px; background:rgba(248,249,254,.6); min-height:340px; display:flex; flex-direction:column; }

/* поля */
.t-field{ margin-bottom:16px; }
.t-field label{
  display:block; font-size:.76rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-faint); margin-bottom:7px;
}
.t-field input[type=text], .t-field input[type=number], .t-field textarea, .t-field select{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--t-ink);
  background:#fff; border:1.5px solid var(--t-line-hard); border-radius:var(--t-r-sm);
  padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.t-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23858ba3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px;
  padding-right:36px;
}
.t-field textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.t-field input:focus, .t-field textarea:focus, .t-field select:focus{
  border-color:var(--t-accent); box-shadow:0 0 0 4px rgba(91,108,240,.13);
}
.t-field .t-hint{ font-size:.76rem; color:var(--t-faint); margin-top:6px; line-height:1.45; }
.t-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* загрузка фото */
.t-drop{
  border:2px dashed var(--t-line-hard); border-radius:var(--t-r-sm); background:#fff;
  padding:30px 20px; text-align:center; cursor:pointer; transition:all .18s;
}
.t-drop:hover, .t-drop.over{ border-color:var(--t-accent); background:rgba(91,108,240,.05); }
.t-drop svg{ width:28px; height:28px; color:var(--t-faint); margin-bottom:9px; }
.t-drop b{ display:block; font-size:.92rem; color:var(--t-ink); font-weight:700; }
.t-drop span{ font-size:.78rem; color:var(--t-faint); }
.t-drop img{ max-height:190px; border-radius:10px; margin:0 auto; display:block; }

.t-run{ width:100%; justify-content:center; margin-top:6px; }

/* результат */
.t-out-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--t-line);
}
.t-out-head .t-eyebrow{ color:var(--t-faint); }
.t-copy{
  background:#fff; border:1px solid var(--t-line-hard); border-radius:var(--t-pill);
  padding:7px 14px; font-family:inherit; font-size:.76rem; font-weight:700;
  color:var(--t-soft); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:all .15s;
}
.t-copy:hover{ border-color:var(--t-accent); color:var(--t-deep); }
.t-copy.done{ border-color:var(--t-ok); color:var(--t-ok); }
.t-copy svg{ width:13px; height:13px; }

.t-result{ font-size:.95rem; line-height:1.68; color:var(--t-ink); flex:1; overflow-wrap:anywhere; }
.t-result h4{ font-size:.98rem; font-weight:800; margin:20px 0 8px; color:var(--t-ink); letter-spacing:-.01em; }
.t-result h4:first-child{ margin-top:0; }
.t-result p{ margin:0 0 11px; }
.t-result ul, .t-result ol{ margin:0 0 12px; padding-left:20px; }
.t-result li{ margin-bottom:6px; }
.t-result strong{ font-weight:700; }
.t-result code{
  background:rgba(91,108,240,.09); padding:2px 6px; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
}
.t-result table{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:.88rem; }
.t-result th, .t-result td{ border:1px solid var(--t-line); padding:8px 10px; text-align:left; }
.t-result th{ background:rgba(91,108,240,.07); font-weight:700; }

.t-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--t-faint); gap:10px; padding:30px 20px;
}
.t-empty svg{ width:38px; height:38px; opacity:.45; }
.t-empty b{ color:var(--t-soft); font-size:.95rem; font-weight:700; }
.t-empty span{ font-size:.84rem; max-width:32ch; line-height:1.5; }

/* скелет загрузки */
.t-skel div{
  height:12px; border-radius:6px; margin-bottom:11px;
  background:linear-gradient(90deg,rgba(91,108,240,.09) 25%,rgba(91,108,240,.19) 50%,rgba(91,108,240,.09) 75%);
  background-size:220% 100%; animation:t-shim 1.3s linear infinite;
}
.t-skel div:nth-child(2){ width:88%; } .t-skel div:nth-child(3){ width:72%; }
.t-skel div:nth-child(5){ width:93%; } .t-skel div:nth-child(6){ width:64%; }
@keyframes t-shim{ to{ background-position:-220% 0; } }

.t-msg{
  padding:13px 16px; border-radius:var(--t-r-sm); font-size:.9rem; line-height:1.5;
  margin-bottom:14px; border:1px solid;
}
.t-msg-err{ background:rgba(194,54,47,.07); border-color:rgba(194,54,47,.26); color:#8f2820; }
.t-msg-ok{ background:rgba(11,143,98,.08); border-color:rgba(11,143,98,.26); color:#0a6f4d; }
.t-msg-pro{ background:var(--t-gold-wash); border-color:var(--t-gold-line); color:var(--t-gold-ink); }
.t-msg a{ color:inherit; font-weight:700; }

/* ============================================================
   5. КАЛЬКУЛЯТОРЫ
   ============================================================ */
.t-calc-out{
  background:#fff; border:1px solid var(--t-line); border-radius:var(--t-r-sm);
  padding:20px 22px; margin-top:4px;
}
.t-calc-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; font-size:.92rem; color:var(--t-soft);
}
.t-calc-line + .t-calc-line{ border-top:1px dashed var(--t-line); }
.t-calc-line b{ color:var(--t-ink); font-weight:700; white-space:nowrap; }
.t-calc-total{
  margin-top:14px; padding-top:16px; border-top:2px solid var(--t-line-hard);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.t-calc-total span{ font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--t-faint); }
.t-calc-total b{
  font-size:1.9rem; font-weight:800; letter-spacing:-.03em;
  background:var(--t-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.t-calc-total.neg b{ background:none; color:var(--t-danger); }
.t-calc-note{ font-size:.78rem; color:var(--t-faint); margin-top:12px; line-height:1.5; }

/* ============================================================
   5b. ВИДЕОКУРС — тёмная врезка, контраст со стеклом
   ============================================================ */
.t-course{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:38px; align-items:center;
  border-radius:var(--t-r-lg); padding:44px 46px; position:relative; overflow:hidden;
  background:#161a2e;
  background-image:
    radial-gradient(680px 420px at 88% -10%, rgba(109,94,252,.5), transparent 62%),
    radial-gradient(520px 380px at 4% 110%, rgba(74,168,255,.32), transparent 60%);
  box-shadow:0 30px 70px rgba(12,16,40,.4);
  color:#fff;
}
.t-course::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(120deg,rgba(0,0,0,.7),transparent 62%);
  -webkit-mask-image:linear-gradient(120deg,rgba(0,0,0,.7),transparent 62%);
}
.t-course > *{ position:relative; z-index:1; }
.t-course .t-eyebrow{ color:#a8b2ff; }
.t-course h2{
  font-size:clamp(1.55rem,3.1vw,2.3rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.15; margin:13px 0 0; color:#fff; max-width:19ch;
}
.t-course p{ color:rgba(255,255,255,.74); font-size:1rem; line-height:1.62; margin:15px 0 0; max-width:46ch; }
.t-course-buy{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:26px; }
.t-course-price{ line-height:1.1; }
.t-course-price b{ display:block; font-size:2rem; font-weight:800; letter-spacing:-.03em; color:#fff; }
.t-course-price span{ font-size:.78rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.t-btn-light{
  background:#fff; color:#14172a !important; border-color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.t-btn-light:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.36); color:#14172a !important; }
.t-course-note{ font-size:.79rem; color:rgba(255,255,255,.5); margin-top:14px; line-height:1.5; }

/* карточка «что потребуется» справа */
.t-course-card{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  border-radius:20px; padding:26px 26px 24px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.t-course-card h3{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin:0 0 18px;
}
.t-steps{ list-style:none; padding:0; margin:0; }
.t-steps li{
  display:flex; gap:14px; align-items:flex-start; padding:0 0 18px;
  font-size:.93rem; line-height:1.5; color:rgba(255,255,255,.86);
}
.t-steps li:last-child{ padding-bottom:0; }
.t-steps li b{ display:block; color:#fff; font-weight:700; margin-bottom:3px; }
.t-steps li span{ color:rgba(255,255,255,.6); font-size:.86rem; }
.t-step-n{
  width:27px; height:27px; flex:none; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800; color:#14172a; background:#fff;
}
.t-course-after{
  margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; gap:13px;
}
.t-course-after b{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
.t-course-after span{ font-size:.85rem; color:rgba(255,255,255,.66); line-height:1.45; }

.t-course-warn{
  margin-top:18px; padding:13px 16px; border-radius:13px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:.84rem; line-height:1.55; color:rgba(255,255,255,.82);
}
.t-course-warn b{ color:#fff; }

/* «экран» справа */
.t-screen{
  border-radius:18px; aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 20px 50px rgba(0,0,0,.34); display:flex; align-items:center; justify-content:center;
}
.t-screen::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
}
.t-play{
  width:76px; height:76px; border-radius:50%; flex:none; position:relative; z-index:1;
  background:rgba(255,255,255,.96); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(255,255,255,.42); animation:t-ring 2.8s infinite;
}
.t-play svg{ width:26px; height:26px; margin-left:4px; color:#14172a; }
@keyframes t-ring{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.4); }
  70%{ box-shadow:0 0 0 24px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.t-screen-bar{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:1;
  height:5px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden;
}
.t-screen-bar i{ display:block; height:100%; width:38%; border-radius:3px; background:var(--t-grad); }
.t-screen-tag{
  position:absolute; top:16px; left:18px; z-index:1;
  font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.22);
  padding:5px 11px; border-radius:var(--t-pill);
}

@media (max-width:1000px){
  .t-course{ grid-template-columns:1fr; padding:34px 26px; gap:26px; }
  .t-course h2{ max-width:none; }
}
@media (max-width:640px){
  .t-course{ padding:28px 20px; border-radius:22px; }
  .t-course-buy{ gap:14px; }
  .t-course-buy .t-btn{ flex:1; justify-content:center; }
}

/* ============================================================
   6. ТАРИФЫ
   ============================================================ */
.t-plans{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.t-plan{
  background:var(--t-panel); -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur);
  border:1px solid var(--t-edge); border-radius:var(--t-r-lg);
  box-shadow:var(--t-shadow); padding:32px 32px 30px; position:relative;
}
.t-plan.pro{
  border-color:var(--t-gold-line); box-shadow:0 22px 56px rgba(190,120,30,.18);
  background-image:linear-gradient(160deg,rgba(240,166,60,.13),transparent 55%);
}
.t-plan-flag{
  position:absolute; top:22px; right:26px; font-size:.6rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg,#f0a63c,#e0761f); padding:6px 13px; border-radius:var(--t-pill);
}
.t-plan h3{ font-size:1.35rem; font-weight:800; color:var(--t-ink); margin:10px 0 4px; letter-spacing:-.02em; }
.t-plan-price{ font-size:2.4rem; font-weight:800; letter-spacing:-.03em; color:var(--t-ink); margin:14px 0 2px; }
.t-plan-price small{ font-size:.9rem; font-weight:600; color:var(--t-faint); letter-spacing:0; }
.t-plan-sub{ font-size:.88rem; color:var(--t-soft); margin-bottom:22px; }
.t-plan ul{ list-style:none; padding:0; margin:0 0 26px; }
.t-plan li{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; font-size:.93rem; color:var(--t-soft); line-height:1.5; }
.t-plan li svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--t-ok); }
.t-plan li.off{ color:var(--t-faint); }
.t-plan li.off svg{ color:var(--t-faint); opacity:.6; }
.t-plan .t-btn{ width:100%; justify-content:center; }

/* покупка */
.t-buy label{
  display:block; font-size:.74rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-faint); margin-bottom:7px;
}
.t-buy input{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--t-ink);
  background:#fff; border:1.5px solid var(--t-gold-line); border-radius:var(--t-r-sm);
  padding:13px 15px; outline:none; margin-bottom:12px; transition:box-shadow .15s;
}
.t-buy input:focus{ box-shadow:0 0 0 4px var(--t-gold-wash); }
.t-buy .t-btn{ width:100%; justify-content:center; }
.t-buy-note{ font-size:.76rem; color:var(--t-faint); margin-top:10px; line-height:1.5; }

/* перенос доступа по ключу */
.t-transfer{ margin-top:18px; border-top:1px solid var(--t-line); padding-top:16px; }
.t-transfer summary{
  cursor:pointer; list-style:none; font-size:.84rem; font-weight:700;
  color:var(--t-soft); display:flex; align-items:center; gap:8px;
}
.t-transfer summary::-webkit-details-marker{ display:none; }
.t-transfer summary::after{ content:"+"; margin-left:auto; font-size:1.15rem; color:var(--t-gold-ink); line-height:1; }
.t-transfer[open] summary::after{ content:"−"; }
.t-transfer summary:hover{ color:var(--t-ink); }

.t-activate{ margin-top:14px; display:flex; gap:9px; }
.t-activate input{
  flex:1; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem; letter-spacing:.09em; text-transform:uppercase; text-align:center;
  border:1.5px solid var(--t-gold-line); border-radius:var(--t-r-sm);
  padding:12px 10px; background:#fff; color:var(--t-ink); outline:none;
}
.t-activate input:focus{ box-shadow:0 0 0 4px var(--t-gold-wash); }
.t-activate button{
  flex:none; padding:12px 20px; border-radius:var(--t-r-sm); cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.88rem;
  background:var(--t-gold-ink); color:#fff; border:none; transition:opacity .15s;
}
.t-activate button:hover{ opacity:.86; }

/* ============================================================
   7. FAQ
   ============================================================ */
.t-faq{ display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; }
.t-faq details{
  background:var(--t-panel); border:1px solid var(--t-edge); border-radius:var(--t-r-sm);
  padding:16px 20px; box-shadow:0 4px 16px rgba(24,32,72,.06);
}
.t-faq summary{
  cursor:pointer; font-weight:700; font-size:.96rem; color:var(--t-ink);
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.t-faq summary::-webkit-details-marker{ display:none; }
.t-faq summary::after{
  content:"+"; font-size:1.25rem; font-weight:400; color:var(--t-accent); flex:none; line-height:1;
}
.t-faq details[open] summary::after{ content:"−"; }
.t-faq p{ font-size:.9rem; color:var(--t-soft); line-height:1.6; margin:12px 0 0; }

/* нижний баннер */
.t-final{
  margin:56px 0 0; padding:44px 46px; border-radius:var(--t-r-lg);
  background:var(--t-panel); -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur);
  border:1px solid var(--t-edge); box-shadow:var(--t-shadow-lg);
  background-image:linear-gradient(135deg,rgba(109,94,252,.15),rgba(74,168,255,.07));
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.t-final h2{ font-size:1.6rem; font-weight:800; color:var(--t-ink); margin:0 0 8px; letter-spacing:-.02em; }
.t-final p{ color:var(--t-soft); margin:0; max-width:50ch; font-size:.98rem; }

/* ============================================================
   8. АДАПТИВ
   ============================================================ */
@media (max-width:1000px){
  .t-hero-grid{ grid-template-columns:1fr; padding:36px 28px 32px; gap:28px; }
  .t-hero h1{ max-width:none; }
  /* 9 карточек в два столбца: последняя занимает весь ряд, дыры не остаётся */
  .t-bento{ grid-template-columns:repeat(2,1fr); }
  .t-bento .t-card:last-child{ grid-column:span 2; }
  .t-ws-body{ grid-template-columns:1fr; }
  .t-ws-form{ border-right:none; border-bottom:1px solid var(--t-line); }
  .t-plans, .t-faq{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .t-hero{ padding:24px 0 0; }
  .t-hero-grid{ padding:28px 20px 26px; border-radius:22px; }
  .t-bento{ grid-template-columns:1fr; gap:12px; }
  .t-bento .t-card:last-child{ grid-column:auto; }
  .t-card{ padding:18px; }
  .t-section{ padding:40px 0 0; }
  .t-ws-form, .t-ws-out{ padding:20px; }
  .t-ws-bar{ padding:15px 18px; }
  .t-row2{ grid-template-columns:1fr; }
  .t-plan{ padding:26px 22px; }
  .t-final{ padding:30px 22px; }
  .t-final h2{ font-size:1.3rem; }
  .t-demo-foot{ gap:14px; }
  .t-btn{ padding:13px 20px; font-size:.88rem; }
  .t-hero-cta .t-btn{ flex:1; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .t-page *, .t-page *::before, .t-page *::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}