/* ============================================================
   photodigitizer US — общий стиль
   Дизайн-язык взят из макета Андрея (Claude Design):
   кремовая бумага, графит, оранжевый, зелёный акцент,
   Archivo + IBM Plex Mono, круглые кнопки, жёсткие тени.
   ============================================================ */

:root{
  --paper:#faf6ef;
  --paper-2:#f6f0e5;
  --paper-3:#f2ede3;
  --card:#fffdf8;
  --ink:#171310;
  --ink-2:#4d453d;
  --ink-3:#6d655b;
  --line:rgba(23,19,16,.16);
  --orange:#e0532e;
  --orange-d:#c23a17;
  --orange-l:#e85c36;
  --green:#0b5f55;
  --dark:#171310;
  --dark-2:#100e0c;
  --dim:#b7ada0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--orange-d);text-decoration:none}
a:hover{color:var(--orange)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.w{max-width:1220px;margin:0 auto;padding:0 32px}

@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-4%,0) scale(1.08)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulsering{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ---------- шапка ---------- */
header{position:sticky;top:0;z-index:60;background:var(--paper-2);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(23,19,16,.18);box-shadow:0 10px 24px -22px rgba(23,19,16,.9)}
.nav{display:flex;align-items:center;gap:38px;height:70px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
/* Метка: деталь лекала с правленой кривой. Высота ведёт себя как у буквы,
   поэтому задана в em - в подвале и в шапке размер разный. */
.brand img{width:auto;height:30px;display:block}
.brand b{font-size:17.5px;font-weight:800;letter-spacing:-.03em}
.brand b em{font-style:normal;color:var(--orange)}
/* В подвале фон тёмный: там стоит отдельный светлый вариант метки. */
footer .brand b em{color:var(--orange-l)}
.menu{display:flex;gap:26px;align-items:center}
.menu a{font-size:14.5px;color:var(--ink-2);text-decoration:none;transition:color .18s}
.menu a:hover,.menu a.on{color:var(--orange)}

/* Выпадающий список страниц аудиторий: без него многостраничника не видно,
   из шапки вели одни якоря на блоки главной. */
.menu-drop{position:relative}
.menu-drop .menu-top::after{content:"";display:inline-block;margin-left:6px;
  border:4px solid transparent;border-top-color:currentColor;vertical-align:2px}
.menu-list{position:absolute;top:100%;left:-14px;min-width:232px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -22px rgba(23,19,16,.85);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.menu-drop:hover .menu-list,.menu-drop:focus-within .menu-list{
  opacity:1;visibility:visible;transform:translateY(0)}
.menu-list a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;color:var(--ink-2)}
.menu-list a:hover{background:var(--paper-2);color:var(--orange)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-right .ghost{font-size:14.5px;color:var(--ink-2)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:16.5px;font-weight:600;padding:17px 30px;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,var(--orange-l),#d1481f);color:#fff;border:0;cursor:pointer;
  box-shadow:0 0 26px -4px rgba(224,83,46,.5),0 8px 20px -10px rgba(209,72,31,.9);
  transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);color:#fff;
  box-shadow:0 0 34px -2px rgba(224,83,46,.62),0 12px 26px -10px rgba(209,72,31,.95)}
.btn-sm{font-size:14.5px;padding:11px 20px;
  box-shadow:0 0 16px -3px rgba(224,83,46,.45),0 5px 12px -7px rgba(209,72,31,.85)}
.btn-sm:hover{box-shadow:0 0 22px -2px rgba(224,83,46,.58),0 8px 16px -8px rgba(209,72,31,.9)}
.btn-2{background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:5px 5px 0 rgba(23,19,16,.16)}
.btn-2:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(23,19,16,.22)}
.btn-dark{background:var(--ink);box-shadow:none}
.btn-dark:hover{background:var(--orange-d)}

/* ---------- значки и подписи ---------- */
.badge{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#a53413;
  background:linear-gradient(180deg,#fdece5,#fbdfd4);border:1px solid #f3cbbb;padding:7px 13px;border-radius:999px}
.badge .dot{position:relative;width:7px;height:7px;display:block}
.badge .dot span{position:absolute;inset:0;border-radius:999px;background:var(--orange);display:block}
.badge .dot span:last-child{animation:pulsering 2.4s ease-out infinite}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.09em;color:#7a7166}

/* ---------- герой ---------- */
.hero{position:relative;overflow:hidden}
.blob{position:absolute;border-radius:999px;filter:blur(6px);pointer-events:none}
.blob-1{top:-220px;left:-160px;width:760px;height:760px;
  background:radial-gradient(circle at 40% 40%,rgba(224,83,46,.22),rgba(224,83,46,0) 62%);animation:drift 22s ease-in-out infinite}
.blob-2{top:60px;right:-220px;width:680px;height:680px;
  background:radial-gradient(circle at 50% 50%,rgba(11,95,85,.18),rgba(11,95,85,0) 64%);animation:drift 28s ease-in-out infinite reverse}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center;padding:76px 0 46px}
h1{font-size:62px;line-height:1.0;letter-spacing:-.04em;font-weight:800;margin:22px 0 0}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--orange),var(--orange-d) 55%,var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;line-height:1.55;color:var(--ink-2);margin:22px 0 0;max-width:520px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-meta{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-3)}

.shot{position:relative}
.shot-main{border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.55));
  border:1.5px solid var(--ink);padding:12px;
  box-shadow:0 1px 3px rgba(23,19,16,.08),0 8px 18px -10px rgba(23,19,16,.3),0 40px 70px -44px rgba(23,19,16,.7);
  animation:floaty 9s ease-in-out infinite}
.shot-main img{border-radius:12px;aspect-ratio:4/5;object-fit:cover;object-position:50% 46%;width:100%}
.shot-sub{position:absolute;right:-16px;bottom:-30px;width:52%;border-radius:14px;background:#fff;
  border:1.5px solid var(--ink);padding:9px;
  box-shadow:0 1px 3px rgba(23,19,16,.08),0 8px 18px -10px rgba(23,19,16,.3),0 36px 60px -34px rgba(23,19,16,.8);
  animation:floaty 9s ease-in-out infinite;animation-delay:-4.5s}
.shot-sub img{border-radius:9px;aspect-ratio:4/5;object-fit:cover;object-position:50% 46%;width:100%}
.tag-traced{position:absolute;bottom:-12px;right:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.06em;background:var(--green);color:#eafaf5;padding:6px 10px;border-radius:999px}

/* ---------- бегущая строка ---------- */
.ticker{border-top:1px solid rgba(23,19,16,.18);border-bottom:1px solid rgba(23,19,16,.18);
  background:var(--dark);overflow:hidden}
.ticker-row{display:flex;width:max-content;animation:ticker 34s linear infinite;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;color:#c6bcae;padding:14px 0}
.ticker-row span.grp{display:flex;gap:44px;padding-right:44px}

/* ---------- полоса загрузки ---------- */
.upload-wrap{padding:70px 0 10px}
.upload-frame{border-radius:20px;padding:2px;background:linear-gradient(120deg,var(--orange),#f0a68d 35%,var(--green))}
.upload{border-radius:18px;background:linear-gradient(180deg,#fffdfa,#fbf6ee);padding:44px 36px;
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
.upload h2{font-size:28px;line-height:1.15;letter-spacing:-.025em;margin:0;font-weight:700}
.upload p{font-size:16.5px;color:var(--ink-2);margin:10px 0 0;line-height:1.5;max-width:620px}
.chips{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.chip{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-2);background:#f1ece2;
  border:1px solid #e3dccf;padding:6px 12px;border-radius:999px}
.chip-g{color:var(--green);background:#e4f2ee;border-color:#cfe6df}
.upload-side{display:flex;flex-direction:column;gap:12px;min-width:230px}
.upload-side .btn{padding:16px 30px;font-size:16px}
.upload-side a.small{font-size:15px;color:var(--ink-2);text-align:center}
.up-status{display:flex;flex-direction:column;gap:8px;align-items:center}
.up-status[hidden]{display:none}  /* иначе display:flex перебивает атрибут hidden */
.up-status .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;color:var(--ink-3);text-align:center}
.up-bar{width:100%;height:5px;border-radius:999px;background:rgba(23,19,16,.12);overflow:hidden}
.up-bar i{display:block;height:100%;width:8%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange-l),var(--orange-d));transition:width .35s ease}
.up-status.err .mono{color:var(--orange-d)}
.upload-frame{transition:transform .18s,box-shadow .18s}
.upload-frame.dragging{transform:scale(1.01);
  box-shadow:0 0 0 4px rgba(224,83,46,.18),0 18px 40px -24px rgba(23,19,16,.8)}

/* ---------- секции ---------- */
section{padding:0}
.sec{padding:92px 0}
h2{font-size:40px;letter-spacing:-.035em;font-weight:800;margin:0}
.sec-lead{font-size:18px;color:var(--ink-2);margin:14px 0 0;max-width:640px;line-height:1.55}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}

/* до и после */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:28px}
.ba figure{margin:0}
.ba .frame{border-radius:16px;overflow:hidden;background:#fff;border:1.5px solid var(--ink);padding:11px;
  box-shadow:0 1px 2px rgba(23,19,16,.06),0 6px 14px -8px rgba(23,19,16,.22),0 26px 50px -40px rgba(23,19,16,.8);
  transition:transform .25s,box-shadow .25s,border-color .25s;position:relative}
.ba .frame:hover{transform:translateY(-4px);border-color:var(--ink);
  box-shadow:0 1px 2px rgba(23,19,16,.06),0 12px 24px -10px rgba(23,19,16,.28),0 36px 60px -40px rgba(23,19,16,.9)}
.ba .frame.hot{border-color:var(--ink);
  box-shadow:0 1px 2px rgba(209,72,31,.08),0 6px 14px -8px rgba(209,72,31,.3),0 26px 50px -40px rgba(209,72,31,.8)}
.ba .frame.hot:hover{border-color:var(--ink);
  box-shadow:0 1px 2px rgba(209,72,31,.08),0 12px 24px -10px rgba(209,72,31,.36),0 36px 60px -40px rgba(209,72,31,.9)}
.ba img{border-radius:11px;aspect-ratio:3/2;object-fit:cover;object-position:50% 46%;width:100%}
.ba .lab{position:absolute;top:23px;left:23px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.06em;background:rgba(250,246,239,.92);color:var(--ink);padding:5px 10px;border-radius:999px;z-index:2}
.ba .lab.hot{background:var(--orange);color:#fff}
.ba figcaption{font-size:15px;color:var(--ink-2);margin-top:14px;line-height:1.55}

/* тёмный блок «как работает» */
.dark{position:relative;background:var(--dark);color:#f5f1ea;overflow:hidden}
.dark .blob-3{position:absolute;bottom:-260px;left:35%;width:700px;height:700px;border-radius:999px;
  background:radial-gradient(circle,rgba(224,83,46,.28),rgba(224,83,46,0) 62%);animation:drift 26s ease-in-out infinite;pointer-events:none}
.dark h2{color:#fdfbf7}
.dark .sec-lead{color:var(--dim)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px;position:relative}
.step{border:1px solid rgba(245,241,234,.12);border-radius:16px;
  background:linear-gradient(180deg,rgba(245,241,234,.07),rgba(245,241,234,.02));padding:24px;
  transition:transform .25s,border-color .25s}
.step:hover{transform:translateY(-5px);border-color:rgba(224,83,46,.6)}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#f09271;letter-spacing:.09em}
.step h3{font-size:20px;font-weight:600;margin:12px 0 8px;letter-spacing:-.015em}
.step p{font-size:15.5px;line-height:1.55;color:var(--dim);margin:0}

/* форматы */
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.file{border:1.5px solid var(--ink);border-radius:18px;background:linear-gradient(180deg,#fffdf8,#fbf6ec);padding:28px;
  box-shadow:0 1px 2px rgba(23,19,16,.06),0 6px 14px -8px rgba(23,19,16,.22),0 24px 44px -40px rgba(23,19,16,.8);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.file:hover{transform:translateY(-6px);border-color:var(--ink);
  box-shadow:0 1px 2px rgba(23,19,16,.06),0 14px 26px -10px rgba(23,19,16,.28),0 34px 54px -38px rgba(23,19,16,.85)}
.file .pill{display:inline-flex;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#fff;
  background:var(--orange);letter-spacing:.07em;padding:6px 12px;border-radius:999px}
.file .pill.d{background:var(--ink)}
.file .pill.g{background:var(--green)}
.file h3{font-size:22px;font-weight:700;margin:16px 0 8px;letter-spacing:-.02em}
.file p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
.file ul{margin:0;padding:0;list-style:none;font-size:14.5px;color:var(--ink-2)}
.file li{padding:8px 0;border-top:1px solid rgba(23,19,16,.16)}

/* редактор */
.editor-band{background:linear-gradient(180deg,var(--paper-3),#f7f2e9);
  border-top:1px solid rgba(23,19,16,.08);border-bottom:1px solid rgba(23,19,16,.08)}
.editor-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.pts{display:grid;gap:12px;margin-top:26px}
.pt{display:flex;gap:13px;align-items:flex-start;background:#fff;
  border:1.5px solid var(--ink);border-radius:12px;padding:14px 16px;
  box-shadow:0 1px 3px rgba(23,19,16,.08),0 5px 12px -7px rgba(23,19,16,.34);
  transition:border-color .2s,box-shadow .2s}
.pt:hover{border-color:var(--ink);box-shadow:0 1px 3px rgba(23,19,16,.08),0 9px 18px -8px rgba(23,19,16,.38)}
.pt i{width:8px;height:8px;border-radius:99px;background:var(--orange);margin-top:7px;flex:none;display:block}
.pt i.g{background:var(--green)}
.pt p{margin:0;font-size:16px;line-height:1.5;color:#33302c}
.editor-shot{border-radius:18px;background:#fff;border:1.5px solid var(--ink);padding:11px;
  box-shadow:0 1px 2px rgba(23,19,16,.06),0 6px 14px -8px rgba(23,19,16,.22),0 40px 70px -46px rgba(23,19,16,.9)}
.editor-shot img{border-radius:12px;width:100%}

/* кому подходит */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;align-items:stretch}
.who a{display:flex;flex-direction:column;border:1.5px solid var(--ink);border-radius:16px;background:var(--card);
  padding:26px 24px 24px;box-shadow:7px 7px 0 rgba(23,19,16,.14);color:var(--ink);text-decoration:none;
  transition:transform .2s,box-shadow .2s}
.who a:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 rgba(224,83,46,.28);color:var(--ink)}
.who h3{font-size:20px;font-weight:700;margin:10px 0 10px;letter-spacing:-.02em}
.who p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 18px}
.who .more{margin-top:auto;font-size:14px;font-weight:600;color:var(--orange-d);
  border-top:1px solid rgba(23,19,16,.12);padding-top:14px;width:100%}

/* цена */
.price-band{background:linear-gradient(180deg,#f7f2e9,var(--paper-3));border-top:1px solid rgba(23,19,16,.08)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px;align-items:stretch}
.plan{display:flex;flex-direction:column;border-radius:18px;padding:28px;background:var(--card);color:var(--ink);
  border:1.5px solid var(--ink);box-shadow:6px 6px 0 rgba(23,19,16,.2);cursor:pointer;
  transform:translateY(0);
  transition:background .38s cubic-bezier(.32,.72,0,1),color .38s cubic-bezier(.32,.72,0,1),
    border-color .38s cubic-bezier(.32,.72,0,1),box-shadow .38s cubic-bezier(.32,.72,0,1),
    transform .38s cubic-bezier(.32,.72,0,1)}
.plan:hover{border-color:var(--ink);box-shadow:8px 8px 0 rgba(23,19,16,.24)}
.plan:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.plan.on{background:var(--ink);color:#f5f1ea;border-color:var(--orange);
  box-shadow:0 26px 50px -26px rgba(224,83,46,.75);transform:translateY(-6px)}
.plan.on:hover{border-color:var(--orange);box-shadow:0 30px 56px -26px rgba(224,83,46,.85)}
.plan .top{display:flex;align-items:center;gap:9px;min-height:24px}
.plan .k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.09em;color:#7a7166;transition:color .38s}
.plan.on .k{color:#f09271}
.plan .t{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;
  background:#f1ece2;color:var(--ink-3);transition:background .38s,color .38s}
.plan.on .t{background:rgba(240,146,113,.18);color:#f4b7a3}
.plan .amt{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.plan .amt b{font-size:40px;font-weight:800;letter-spacing:-.04em;
  transition:font-size .38s cubic-bezier(.32,.72,0,1)}
.plan.on .amt b{font-size:46px}
.plan .amt span{font-size:15.5px;color:var(--ink-3);transition:color .38s}
.plan.on .amt span{color:var(--dim)}
.plan p{font-size:15px;line-height:1.55;margin:14px 0 22px;color:var(--ink-2);transition:color .38s}
.plan.on p{color:var(--dim)}
.plan .go{margin-top:auto;display:block;text-align:center;font-size:15.5px;font-weight:600;padding:14px 20px;
  border-radius:999px;background:linear-gradient(180deg,rgba(232,92,54,0),rgba(209,72,31,0));
  color:var(--orange-d);border:1px solid rgba(194,58,23,.45);
  transition:background .38s cubic-bezier(.32,.72,0,1),color .38s,border-color .38s,box-shadow .38s}
.plan.on .go{background:linear-gradient(180deg,var(--orange-l),#d1481f);color:#fff;border-color:transparent;
  box-shadow:0 0 22px -4px rgba(224,83,46,.55),0 8px 18px -10px rgba(209,72,31,.9)}
.draft-note{display:inline-block;margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:#8a5a12;background:#fdf0d5;border:1px solid #f0dcae;padding:6px 12px;border-radius:999px}
.price-foot{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-3);margin:20px 0 0}

/* вопросы */
.faq-band{background:linear-gradient(180deg,var(--paper-3),#efe8db);
  border-top:1px solid rgba(23,19,16,.08);border-bottom:1px solid rgba(23,19,16,.08)}
.faq{max-width:1020px;margin:0 auto;display:grid;gap:12px;interpolate-size:allow-keywords}
/* плавное раскрытие ответа: Chrome/Edge анимируют, Safari/Firefox открывают мгновенно */
.q::details-content{block-size:0;overflow:hidden;opacity:0;
  transition:block-size .38s cubic-bezier(.32,.72,0,1),opacity .3s ease,content-visibility .38s;
  transition-behavior:allow-discrete}
.q[open]::details-content{block-size:auto;opacity:1}
.q{border-radius:16px;background:#fffdf8;border:1.5px solid var(--ink);
  box-shadow:0 1px 3px rgba(23,19,16,.07),0 5px 12px -8px rgba(23,19,16,.3);
  overflow:hidden;transition:background .25s,border-color .25s,box-shadow .25s}
.q[open]{background:var(--card);border-color:var(--orange);box-shadow:0 24px 44px -34px rgba(23,19,16,.9)}
.q summary{display:flex;align-items:center;gap:20px;padding:22px 26px;cursor:pointer;list-style:none;user-select:none}
.q summary::-webkit-details-marker{display:none}
.q summary b{flex:1;font-size:18px;font-weight:700;letter-spacing:-.015em;transition:color .2s}
.q[open] summary b{color:var(--orange-d)}
.q summary i{flex:none;width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:20px;line-height:1;color:var(--orange-d);background:#fdece5;border:1px solid #f3cbbb;
  transition:transform .28s cubic-bezier(.4,0,.2,1),background .25s,color .25s}
.q[open] summary i{transform:rotate(45deg);background:var(--orange);color:#fff;border-color:var(--orange)}
.q p{margin:0;padding:0 60px 24px 26px;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.faq-cta{margin-top:26px;border-radius:18px;padding:2px;background:linear-gradient(120deg,var(--orange),var(--green));max-width:1020px;margin-left:auto;margin-right:auto}
.faq-cta > div{border-radius:16px;background:var(--dark);color:#f5f1ea;padding:22px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.faq-cta p{margin:0;font-size:16.5px;line-height:1.5}

/* финальный призыв */
.cta-band{position:relative;background:var(--dark);color:#f5f1ea;overflow:hidden}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:78px 0}
.cta-band h2{font-size:36px;color:#fdfbf7}
.cta-band p{font-size:17px;color:var(--dim);margin:12px 0 0}
.cta-band .btn-2{background:transparent;color:#f5f1ea;border:1px solid rgba(245,241,234,.28);box-shadow:none}
.cta-band .btn-2:hover{border-color:#f5f1ea;color:#f5f1ea;transform:translateY(-2px);box-shadow:none}

/* подвал */
footer{background:var(--dark-2);color:#8d8579;border-top:1px solid #2a2724}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:52px 0}
.foot .brand{color:#f5f1ea}
.foot p{font-size:14.5px;line-height:1.6;margin:14px 0 0;max-width:320px}
.foot .col{display:grid;gap:10px;align-content:start}
.foot .col .h{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.09em;color:#5f584f}
.foot .col a{font-size:14.5px;color:var(--dim);text-decoration:none}
.foot .col a:hover{color:var(--orange-l)}
.foot-bottom{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5f584f;padding:0 0 42px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot-by a{color:#8d8377;text-decoration:underline}
.foot-by a:hover{color:#e0532e}

/* страницы аудиторий */
.page-hero{position:relative;overflow:hidden;padding:64px 0 24px}
.page-hero h1{font-size:52px;max-width:16ch}
.page-hero .hero-grid{align-items:start}
.page-hero .shot{margin-top:8px}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs-d{color:#9d9287}
.crumbs-d a{color:#9d9287}

/* ============================================================
   Первые экраны страниц аудиторий. У каждой свой, иначе четыре
   страницы читаются как одна: одинаковая сетка и одно фото на всех.
   Общими остаются шапка, шрифты, кнопки и палитра.
   ============================================================ */

/* --- общие мелочи для тёмных экранов --- */
.badge-d{color:#f0a68d;background:linear-gradient(180deg,rgba(224,83,46,.22),rgba(224,83,46,.12));
  border-color:rgba(240,166,141,.32)}
.lead-d{color:#c9c0b5}
.hero-meta-d{color:#b0a79c}
.btn-ghost-d{background:transparent;color:#f5f1ea;border:1.5px solid rgba(245,241,234,.4);box-shadow:none}
.btn-ghost-d:hover{color:#fff;border-color:#fff;transform:translateY(-2px)}

/* --- 1. Фабрики: тёмный экран на деньгах --- */
.hero-money{background:var(--dark);color:#f5f1ea;padding:34px 0 66px}
.hero-money h1{font-size:52px;line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:20px 0 0;max-width:15ch}
.hero-money h1 em{font-style:normal;color:var(--orange-l)}
.money-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-top:26px}
.money-card{background:#211c18;border:1px solid rgba(245,241,234,.14);border-radius:20px;padding:26px 26px 20px}
.money-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.money-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:#9d9287;flex:1 1 100%}
.money-old{font-size:48px;font-weight:800;letter-spacing:-.03em;color:#7d736a;text-decoration:line-through}
.money-new{font-size:60px;font-weight:800;letter-spacing:-.035em;color:var(--orange-l)}
.money-unit{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#9d9287}
.money-vs{display:flex;align-items:center;gap:14px;margin:16px 0 14px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7d736a}
.money-vs::before,.money-vs::after{content:"";flex:1;height:1px;background:rgba(245,241,234,.14)}
.money-note{font-size:14.5px;line-height:1.55;color:#b0a79c;margin:18px 0 0;
  padding-top:16px;border-top:1px solid rgba(245,241,234,.12)}
.money-shot{margin-top:16px;border-radius:12px;overflow:hidden;border:1px solid rgba(245,241,234,.14)}
.money-shot img{width:100%;height:132px;object-fit:cover;object-position:50% 45%}

/* --- 2. Дизайнеры: центрированный экран с файлами --- */
.hero-center{padding:34px 0 60px;background:
  radial-gradient(900px 420px at 50% -8%,rgba(224,83,46,.13),rgba(224,83,46,0) 70%),var(--paper)}
.center-head{max-width:760px;margin:0 auto;text-align:center}
.center-head h1{font-size:56px;line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:18px 0 0}
/* Сплошной оранжевый, не градиент: в градиенте слово PDF уходило в зелёный
   на светлом фоне и переставало читаться. */
.center-head h1 em{font-style:normal;color:var(--orange-d)}
.center-head .lead{margin:20px auto 0}
.hero-cta-c{justify-content:center}
.center-kicker{display:block;text-align:center;margin:46px 0 16px;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#7a7166}
.deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.deliver-card{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;padding:22px 20px;
  box-shadow:5px 5px 0 rgba(23,19,16,.13)}
.deliver-card h3{font-size:18px;letter-spacing:-.02em;margin:12px 0 8px}
.deliver-card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.deliver-card .pill{display:inline-flex;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#fff;
  background:var(--orange-d);padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.deliver-card .pill.d{background:var(--ink)}

/* --- 3. Домашнее шитьё: фотография во всю ширину --- */
.hero-photo{position:relative;min-height:560px;display:flex;align-items:flex-end;
  padding:56px 0 54px;overflow:hidden;color:#f7f3ec}
.hero-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-photo-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,14,12,.92) 0%,rgba(18,14,12,.78) 44%,rgba(18,14,12,.28) 100%)}
.hero-photo-inner{position:relative;max-width:1220px}
.hero-photo h1{font-size:58px;line-height:1.02;letter-spacing:-.04em;font-weight:800;
  margin:18px 0 0;max-width:14ch}
.hero-photo h1 em{font-style:normal;color:#f0a68d}
.hero-photo .lead{max-width:560px}
.hero-photo .hero-meta{margin-top:24px}

/* --- 4. Обивка: лента лет, зелёный акцент --- */
.hero-years{padding:34px 0 58px;background:
  radial-gradient(760px 420px at 8% 0%,rgba(11,95,85,.16),rgba(11,95,85,0) 68%),var(--paper-2)}
.years-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center}
.years-shot{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--ink);
  box-shadow:8px 8px 0 rgba(23,19,16,.14)}
.years-shot img{width:100%;height:430px;object-fit:cover;object-position:50% 48%;display:block}
.years-tag{position:absolute;left:14px;bottom:14px;background:rgba(23,19,16,.82);color:#f7f3ec;
  padding:6px 12px;border-radius:999px;font-size:11.5px;letter-spacing:.06em}
.hero-years h1{font-size:48px;line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:18px 0 0}
.hero-years h1 em.g{font-style:normal;color:var(--green)}
.badge-g{display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:#0b5f55;background:#e2efec;
  border:1px solid #bcd9d3;padding:7px 13px;border-radius:999px}
.years{list-style:none;margin:24px 0 0;padding:0;border-left:2px solid rgba(11,95,85,.28)}
.years li{position:relative;padding:0 0 16px 22px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.years li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;
  border-radius:999px;background:var(--green);border:2px solid var(--paper-2)}
.years .y{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);margin-bottom:2px}

/* ============================================================
   Кабинет: вход, регистрация, список своих деталей.
   ============================================================ */
.auth-wrap{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:56px 24px;
  background:radial-gradient(800px 420px at 50% -10%,rgba(224,83,46,.12),rgba(224,83,46,0) 70%),var(--paper)}
.auth-card{width:100%;max-width:430px;background:var(--card);border:1.5px solid var(--ink);
  border-radius:20px;padding:34px 32px;box-shadow:6px 6px 0 rgba(23,19,16,.14)}
.auth-card h1{font-size:32px;letter-spacing:-.03em;font-weight:800;margin:0}
.auth-lead{font-size:15px;line-height:1.55;color:var(--ink-2);margin:10px 0 24px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#7a7166;margin-bottom:7px}
.field span i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.field input{width:100%;padding:13px 14px;border-radius:12px;background:var(--paper-2);
  color:var(--ink);border:1.5px solid var(--line);font-family:inherit;font-size:15.5px;outline:none;
  transition:border-color .16s}
.field input:focus{border-color:var(--ink)}
.form-error{margin:0 0 14px;font-size:14px;color:var(--orange-d)}
.auth-btn{width:100%;justify-content:center}
.auth-alt{margin:20px 0 0;font-size:14.5px;color:var(--ink-2);text-align:center}
.auth-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--ink-3)}

.acc-wrap{padding:38px 0 70px;min-height:70vh;background:var(--paper)}
.acc-head{display:flex;gap:28px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.acc-head h1{font-size:40px;letter-spacing:-.035em;font-weight:800;margin:12px 0 0}
@media(min-width:621px){.acc-head>div:first-child{flex:1 1 260px}}
.acc-email{font-size:13px;color:var(--ink-3);margin:8px 0 0}
.acc-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.acc-balance{display:flex;align-items:baseline;gap:12px;background:var(--card);
  border:1.5px solid var(--ink);border-radius:14px;padding:12px 18px;box-shadow:4px 4px 0 rgba(23,19,16,.13)}
.acc-balance span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#7a7166}
.acc-balance b{font-size:26px;letter-spacing:-.02em}
.acc-out{font-size:14px;color:var(--ink-3);background:none;border:0;padding:0;
  font-family:inherit;cursor:pointer;text-decoration:underline;white-space:nowrap}
.acc-out:hover{color:var(--ink)}

.job-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.job-card{display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);
  border-radius:16px;overflow:hidden;transition:border-color .16s,transform .16s}
.job-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.job-thumb{display:block;background:var(--dark);aspect-ratio:4/3;overflow:hidden}
.job-thumb img{width:100%;height:100%;object-fit:cover}
.job-thumb.no-thumb{display:flex;align-items:center;justify-content:center}
.job-thumb.no-thumb img{display:none}
.job-body{padding:16px 16px 18px}
.job-body h3{font-size:16.5px;letter-spacing:-.02em;margin:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.job-meta{font-size:12px;color:var(--ink-3);margin:6px 0 14px}
.job-acts{display:flex;gap:8px;flex-wrap:wrap}
.job-acts .btn{padding:9px 16px;font-size:13.5px}

/* Мелкие действия над деталью: переименовать, удалить. Намеренно тише
   кнопок «открыть» и «скачать» - это не то, что делают каждый день. */
.job-minor{display:flex;gap:16px;margin-top:12px}
.job-link{background:none;border:0;padding:0;font-family:inherit;font-size:13.5px;
  color:var(--ink-3);cursor:pointer;text-decoration:underline}
.job-link:hover{color:var(--ink)}
.job-link-danger:hover{color:#b4361a}
.job-link[disabled]{opacity:.5;cursor:default}

/* Карточка кабинета: почта, выход, смена пароля. Одно место вместо двух
   панелей во всю ширину - это настройки, а не главное на странице. */
/* Карточка стоит в верхнем ряду между заголовком и счётом, туда указывает
   стрелка Андрея. Обводка и тень те же, что у блока «Pieces on your account»,
   чтобы весь ряд читался единым. */
.acc-card{background:var(--card);border:1.5px solid var(--ink);
  border-radius:16px;padding:16px 18px;flex:0 1 340px;align-self:flex-start;
  box-shadow:4px 4px 0 rgba(23,19,16,.13)}
.acc-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.acc-card-h{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.acc-card-email{font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin:4px 0 0;
  overflow-wrap:anywhere}
.acc-card-acts{margin-top:14px}
.acc-pass{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.acc-pass .field{margin-bottom:14px}
.acc-pass-note{font-size:13.5px;line-height:1.5;color:var(--ink-3);margin:0 0 14px}
.form-done{font-size:14px;color:#1f7a4d;margin:0 0 12px}

.job-empty{text-align:center;padding:70px 20px}
.job-empty h2{font-size:26px;letter-spacing:-.025em;margin:0 0 10px}
.job-empty p{font-size:16px;color:var(--ink-2);max-width:460px;margin:0 auto 24px;line-height:1.55}

@media(max-width:980px){
  .job-list{grid-template-columns:repeat(2,1fr)}
  .acc-side{align-items:flex-start}
  .acc-card{flex:1 1 100%;order:3}
  .money-grid,.years-grid{grid-template-columns:1fr;gap:30px}
  .deliver{grid-template-columns:1fr}
  .hero-money h1,.center-head h1,.hero-photo h1,.hero-years h1{font-size:38px}
  .years-shot img{height:280px}
  .hero-photo{min-height:480px}
  .hero-photo-veil{background:linear-gradient(180deg,rgba(18,14,12,.7) 0%,rgba(18,14,12,.9) 70%)}
}
.crumbs a:hover{color:var(--orange)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.pain{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:26px;
  box-shadow:0 24px 44px -42px rgba(23,19,16,.8)}
.pain h3{font-size:19px;font-weight:700;margin:12px 0 8px;letter-spacing:-.02em}
.pain p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0}
.other{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.other a{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:20px;
  color:var(--ink);text-decoration:none;transition:transform .2s,border-color .2s}
.other a:hover{transform:translateY(-3px);border-color:var(--ink);color:var(--ink)}
.other b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.other span{font-size:14px;color:var(--ink-2);line-height:1.5}

/* адаптив */
@media(max-width:980px){
  .menu{display:none}
  .hero-grid,.upload,.ba,.editor-grid{grid-template-columns:1fr;gap:34px}
  .steps,.files,.who,.plans,.three,.other{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  h1{font-size:42px}
  .page-hero h1{font-size:38px}
  h2{font-size:31px}
  .sec{padding:64px 0}
  .w{padding:0 22px}
  .shot-sub{position:static;width:100%;margin-top:16px}
  .tag-traced{display:none}
  .upload-side{min-width:0}
}
@media(max-width:620px){
  .steps,.files,.who,.plans,.three,.other,.foot{grid-template-columns:1fr}
  h1{font-size:34px}
  .nav-right .ghost{display:none}
  /* Кабинет на телефоне: одна деталь в ряд, шапка в столбик, кнопки во всю
     ширину - иначе «скачать» уезжает за край и до него не дотянуться. */
  .job-list{grid-template-columns:1fr}
  .acc-head{flex-direction:column;align-items:stretch;gap:18px}
  .acc-head h1{font-size:30px}
  .acc-side{align-items:stretch}
  .acc-balance{justify-content:space-between}
  .job-acts{flex-direction:column}
  .job-acts .btn{width:100%}
  .acc-card{padding:16px;flex:0 0 auto;width:100%}
  .acc-head>div:first-child{flex:0 0 auto}
  .acc-card-top{flex-direction:column;gap:12px}
}

/* без анимаций для тех, кто их отключил в системе */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .plan,.plan .amt b,.plan .go,.plan .k,.plan .t,.plan p,.plan .amt span,
  .q::details-content,.ba .frame,.file,.pt,.btn{transition:none!important}
  .ticker-row,.blob{animation:none!important}
}