:root{
  --paper:#f6f2ea; --paper-2:#efe9dd; --ink:#181410; --ink-soft:#5d564c;
  --verm:#d0421b; --verm-dark:#a83415; --hairline:#d8d0c2;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif; --disp:'Unbounded',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;
  background-image:radial-gradient(rgba(24,20,16,.035) 1px,transparent 1px);background-size:22px 22px}
::selection{background:var(--verm);color:var(--paper)}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* header */
header{border-bottom:1px solid var(--hairline)}
.hrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.logo em{color:var(--verm);font-style:normal}
nav{display:flex;gap:22px;align-items:center;font-size:.92rem}
nav a{text-decoration:none;color:var(--ink-soft)}
nav a:hover{color:var(--verm)}
.btn{display:inline-block;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:.92rem;padding:9px 20px;border-radius:2px;cursor:pointer;
  transition:all .18s;text-decoration:none}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-verm{border-color:var(--verm);background:var(--verm);color:#fff}
.btn-verm:hover{background:var(--verm-dark);border-color:var(--verm-dark);color:#fff}
.btn-ghost{border-color:var(--hairline);color:var(--ink-soft);padding:9px 14px}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}

/* hero */
.hero{padding:72px 0 30px}
.hero-page{padding-top:44px}
.crumbs{font-family:var(--mono);font-size:.76rem;color:#9a8f7d;margin-bottom:22px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--verm)}
.crumbs span{margin:0 6px;color:var(--verm)}
.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--verm);margin-bottom:18px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.12;letter-spacing:-.02em;max-width:860px}
h1 .under{box-shadow:inset 0 -0.28em 0 rgba(208,66,27,.28)}
.sub{margin-top:22px;font-size:1.12rem;color:var(--ink-soft);max-width:640px}
.sub b{color:var(--ink)}

/* widget */
.widget{margin:46px 0 0;background:#fffdf8;border:1px solid var(--hairline);border-radius:4px;
  box-shadow:0 1px 0 var(--hairline),0 14px 40px -18px rgba(24,20,16,.25);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--hairline)}
.tab{flex:1;text-align:center;padding:14px;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;
  cursor:pointer;color:var(--ink-soft);border-bottom:2px solid transparent;user-select:none}
.tab.act{color:var(--verm);border-bottom-color:var(--verm);background:var(--paper)}
.pane{padding:34px}
.drop{border:1.5px dashed #b9ae9b;border-radius:4px;padding:52px 24px;text-align:center;cursor:pointer;transition:all .18s;background:var(--paper)}
.drop:hover,.drop.over{border-color:var(--verm);background:#fbf6ee}
.drop .big{font-size:2rem}
.drop p{margin-top:10px;color:var(--ink-soft)}
.drop p b{color:var(--ink)}
.drop small{display:block;margin-top:8px;font-family:var(--mono);font-size:.72rem;color:#9a8f7d}
.urlrow{display:flex;gap:12px}
.urlrow input{flex:1;border:1.5px solid var(--hairline);background:var(--paper);padding:13px 16px;font-family:var(--mono);font-size:.92rem;border-radius:2px;outline:none}
.urlrow input:focus{border-color:var(--verm)}
.hint{display:block;margin-top:10px;font-family:var(--mono);font-size:.72rem;color:#9a8f7d}
.meter{display:flex;justify-content:space-between;align-items:center;padding:12px 34px;background:var(--paper-2);
  font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);border-top:1px solid var(--hairline);gap:10px;flex-wrap:wrap}
.meter b{color:var(--verm)}

/* progress */
.stage{display:none;padding:44px 34px;text-align:center}
.stage .tw{font-family:var(--mono);font-size:1.05rem}
.tw::after{content:'▌';color:var(--verm);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bar{height:4px;background:var(--paper-2);border-radius:2px;margin:26px auto 10px;max-width:420px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--verm);width:5%;transition:width .8s}
.steps{display:flex;justify-content:center;gap:24px;margin-top:18px;font-family:var(--mono);font-size:.76rem;color:#9a8f7d;flex-wrap:wrap}
.steps span.done{color:var(--verm)}
.elapsed{margin-top:14px;font-family:var(--mono);font-size:.72rem;color:#9a8f7d}

/* result */
.result{display:none;padding:0}
.res-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 34px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.res-title{font-family:var(--disp);font-weight:600;font-size:1rem}
.res-meta{font-family:var(--mono);font-size:.72rem;color:#9a8f7d;margin-top:4px}
.res-actions{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:.78rem;border:1px solid var(--hairline);background:var(--paper);
  padding:7px 14px;border-radius:2px;cursor:pointer;transition:all .15s;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--verm);color:var(--verm)}
.chip.busy{opacity:.5;pointer-events:none}
.res-search{padding:12px 34px;border-bottom:1px solid var(--hairline);background:var(--paper)}
.res-search input{width:100%;border:none;background:transparent;font-family:var(--mono);font-size:.85rem;outline:none;color:var(--ink)}
.transcript{font-family:var(--mono);font-size:.9rem;line-height:1.75;padding:30px 34px;white-space:pre-wrap;max-height:460px;overflow-y:auto}
.transcript mark{background:rgba(208,66,27,.25);color:inherit}
.errbox{display:none;padding:40px 34px;text-align:center}
.errbox .em{font-size:1.8rem}
.errbox p{margin-top:12px;color:var(--ink-soft)}

/* sections */
section{padding:78px 0;border-top:1px solid var(--hairline)}
.sec-num{font-family:var(--mono);color:var(--verm);font-size:.8rem;letter-spacing:.2em}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);margin:10px 0 34px;letter-spacing:-.01em}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.cell{background:var(--paper);padding:28px}
.cell .n{font-family:var(--disp);font-weight:800;color:var(--verm);font-size:1.4rem}
.cell h3{font-family:var(--sans);font-weight:600;margin:10px 0 6px}
.cell p{color:var(--ink-soft);font-size:.94rem}
.prose p{max-width:720px;color:var(--ink-soft);margin-bottom:16px;font-size:1.02rem}
.cta-line{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.plan{border:1px solid var(--hairline);background:#fffdf8;padding:28px 24px;border-radius:4px;display:flex;flex-direction:column}
.plan.hot{border:2px solid var(--verm);position:relative}
.plan.hot::before{content:'выгодно';position:absolute;top:-11px;left:20px;background:var(--verm);color:#fff;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;padding:3px 10px;border-radius:2px}
.plan h3{font-family:var(--disp);font-weight:600;font-size:.95rem}
.price{font-family:var(--disp);font-weight:800;font-size:1.7rem;margin:14px 0 2px}
.price small{font-size:.85rem;font-weight:400;color:var(--ink-soft)}
.per{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin-bottom:16px}
.plan ul{list-style:none;margin:0 0 22px;font-size:.9rem;color:var(--ink-soft)}
.plan li{padding:4px 0 4px 20px;position:relative}
.plan li::before{content:'—';position:absolute;left:0;color:var(--verm)}
.plan .btn{margin-top:auto;text-align:center}

/* faq */
details{border-bottom:1px solid var(--hairline)}
summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::after{content:'+';font-family:var(--mono);color:var(--verm);font-size:1.2rem}
details[open] summary::after{content:'–'}
details p{padding:0 0 18px;color:var(--ink-soft);max-width:720px}

/* seo links + footer */
.seolinks{border-top:1px solid var(--hairline);padding:56px 0}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.linkgrid a{font-size:.92rem;color:var(--ink-soft);text-decoration:none;padding:10px 14px;border:1px solid var(--hairline);border-radius:3px;background:#fffdf8;transition:all .15s}
.linkgrid a:hover{border-color:var(--verm);color:var(--verm)}
footer{border-top:1px solid var(--hairline);padding:34px 0;font-family:var(--mono);font-size:.76rem;color:#9a8f7d}
.frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* modal */
.modal{display:none;position:fixed;inset:0;background:rgba(24,20,16,.5);z-index:50;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.mbox{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;max-width:420px;width:100%;padding:34px}
.mbox h3{font-family:var(--disp);font-weight:600;margin-bottom:8px}
.mbox p{color:var(--ink-soft);font-size:.92rem;margin-bottom:18px}
.mbox input{width:100%;border:1.5px solid var(--hairline);background:#fffdf8;padding:12px 14px;font-family:var(--mono);font-size:.9rem;border-radius:2px;outline:none;margin-bottom:14px}
.mbox input:focus{border-color:var(--verm)}
.mnote{font-family:var(--mono);font-size:.76rem;margin-top:12px;word-break:break-all;color:var(--ink-soft)}
.mnote a{color:var(--verm)}

/* history drawer */
.drawer{position:fixed;top:0;right:-360px;width:340px;max-width:92vw;height:100vh;background:var(--paper);
  border-left:1px solid var(--hairline);z-index:55;transition:right .25s;display:flex;flex-direction:column;
  box-shadow:-18px 0 40px -20px rgba(24,20,16,.3)}
.drawer.open{right:0}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--hairline);font-family:var(--disp);font-size:.9rem}
.dlist{flex:1;overflow-y:auto;padding:10px 0}
.dlist a{display:block;padding:12px 20px;text-decoration:none;border-bottom:1px solid var(--paper-2)}
.dlist a:hover{background:#fffdf8}
.dlist .dt{font-family:var(--mono);font-size:.68rem;color:#9a8f7d}
.dlist .dp{font-size:.85rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist .empty{padding:30px 20px;color:#9a8f7d;font-size:.85rem;text-align:center}
.dnote{padding:14px 20px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:.68rem;color:#9a8f7d}

/* reveal + toast */
.rv{opacity:0;transform:translateY(14px);animation:rv .7s forwards}
@keyframes rv{to{opacity:1;transform:none}}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.82rem;padding:11px 22px;border-radius:3px;transition:transform .3s;z-index:60}
#toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:640px){
  nav .hide-m{display:none}
  .pane{padding:22px}
  .res-head,.transcript,.res-search{padding-left:22px;padding-right:22px}
  .meter{padding:12px 22px}
}