/* BH Agency v2.0 — join.css: лише сторінка /join «Співпраця» (21.10.2026).
   Мова сайту: графіт / лайм #C8FF3E, скло (--card-glass), hairline (--card-line, --hair), радіуси 16–24 як .tgcard / .pk / .pg-card,
   Inter Tight (заголовки, числа) + Inter (текст) + Manrope (кікери). Нових брендових кольорів нуль; дві теми через токени tokens.css.
   Рух: hover/фокус 200 мс --ease-out-q; поява карток — [data-reveal] (pages.js); prefers-reduced-motion — без руху. */

:root{--jn-field:#fff;--jn-line:rgba(20,20,19,.14);--jn-line2:rgba(20,20,19,.32);--jn-err:#c62828;--jn-soft:rgba(107,143,0,.12);--jn-ring:#9fd21f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--jn-field:rgba(8,9,10,.42);--jn-line:rgba(255,255,255,.12);--jn-line2:rgba(255,255,255,.32);--jn-err:#ff7a7a;--jn-soft:rgba(200,255,62,.12);--jn-ring:#c8ff3e}}
:root[data-theme="dark"]{--jn-field:rgba(8,9,10,.42);--jn-line:rgba(255,255,255,.12);--jn-line2:rgba(255,255,255,.32);--jn-err:#ff7a7a;--jn-soft:rgba(200,255,62,.12);--jn-ring:#c8ff3e}

/* ───────── перший екран ───────── */
.jn-hero{padding-block:clamp(36px,6vw,84px) clamp(20px,3vw,40px)}
.jn-hero__head{max-width:900px}
.jn-hero .pg-eyebrow{color:var(--accent-text-sm)}
.jn-hero .pg-eyebrow i{background:var(--accent-text)}
.jn-title{margin-top:18px;font-weight:700;font-size:clamp(46px,6.8vw,100px);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.jn-title span{display:inline-block;padding-bottom:.06em}
.jn-hero .jn-title.pg-title{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.jn-lime{color:var(--accent-text);-webkit-text-fill-color:var(--accent-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .jn-metal{background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.jn-lead{max-width:640px;margin-top:22px}

/* ───────── двері: дві великі кнопки-входи (вони ж перемикач) ───────── */
.jn-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,48px)}
.jn-door{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:16px;min-height:300px;padding:clamp(22px,2.6vw,32px);border-radius:24px;
  background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi);color:var(--ink);text-decoration:none;
  transition:box-shadow .25s var(--ease-out-q),translate .25s var(--ease-out-q)}
.jn-door::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--card-glow);background:radial-gradient(ellipse 360px 160px at 100% 0%,#C8FF3E,transparent 70%);transition:opacity .25s var(--ease-out-q)}
.jn-door__top{display:flex;align-items:center;gap:14px}
.jn-door__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--lime);color:#111110;box-shadow:0 8px 24px -10px rgba(200,255,62,.6)}
.jn-door__ic .jn-ic{width:26px;height:26px}
.jn-door__k{font:700 13px/1.25 var(--f-manrope);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jn-door__big{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-top:auto;font:700 clamp(44px,5.4vw,76px)/1 var(--f-tight);letter-spacing:-.045em;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.jn-door__sep{display:block;align-self:center;width:10px;height:10px;border-radius:3px;background:var(--lime)}
.jn-door__u{font:500 clamp(18px,1.7vw,24px)/1.1 var(--f-tight);letter-spacing:-.015em;color:var(--muted)}
.jn-door__p{max-width:44ch;font:400 16px/1.5 var(--f-inter);color:var(--muted)}
.jn-door__cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:52px;padding:0 22px;border-radius:16px;
  font:600 16px/1 var(--f-inter);letter-spacing:-.005em;color:var(--ink);background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi);
  transition:background-color .2s var(--ease-out-q),color .2s var(--ease-out-q),box-shadow .2s var(--ease-out-q)}
.jn-door__cta svg{width:18px;height:18px;transition:transform .2s var(--ease-out-q)}
.jn-door.is-on{box-shadow:inset 0 0 0 1.5px var(--jn-ring),0 0 0 5px var(--jn-soft),var(--card-hi)}
.jn-door.is-on::before{opacity:calc(var(--card-glow) * 1.6)}
.jn-door.is-on .jn-door__cta{background:var(--lime-btn);color:#000;box-shadow:none}
.jn-door:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .jn-door:hover{translate:0 -3px}
  .jn-door:hover .jn-door__cta{background:var(--lime);color:#000;box-shadow:none}
  .jn-door:hover .jn-door__cta svg{transform:translateX(3px)}
}
.jn-door:active{translate:0 0;scale:.995}
@media (max-width:767.98px){
  .jn-doors{grid-template-columns:minmax(0,1fr);gap:12px}
  .jn-door{min-height:0;gap:14px}
  .jn-door__cta{width:100%;justify-content:center}
}
@media (max-width:480px){
  .jn-door__p{display:none}                  /* на телефоні двері компактні: суть — у числах і кнопці, деталі — в панелі нижче */
  .jn-door__ic{width:44px;height:44px;border-radius:13px}
  .jn-door__ic .jn-ic{width:22px;height:22px}
  .jn-door__big{font-size:42px}
}

/* ───────── панель доріжки ───────── */
.jn-panel{padding-top:clamp(56px,7vw,104px);scroll-margin-top:var(--pg-sticky)}
.jn-panel + .jn-panel{border-top:1px solid var(--pg-hair);margin-top:clamp(56px,7vw,104px)}
.jn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"head side" "body side";gap:40px clamp(32px,4.4vw,64px);align-items:start}
.jn-head{grid-area:head}
.jn-side{grid-area:side}
.jn-body{grid-area:body}
@media (max-width:991.98px){.jn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "body";gap:32px}}
.jn-k{display:flex;align-items:center;gap:10px}
.jn-k span{color:var(--accent-text-sm)}
.jn-head .pg-h2{margin-top:14px}
.jn-p{max-width:56ch;margin:18px 0 0;font:400 clamp(17px,1.35vw,19px)/1.55 var(--f-inter);color:var(--muted)}
.jn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0 0;padding:0;list-style:none;border-radius:22px;overflow:hidden;background:var(--card-glass);box-shadow:var(--hair)}
.jn-stats li{display:grid;gap:6px;align-content:start;padding:18px 20px}
.jn-stats li + li{border-left:1px solid var(--card-line)}
.jn-stats b{font:700 clamp(24px,2.5vw,34px)/1 var(--f-tight);letter-spacing:-.035em;color:var(--ink-strong);white-space:nowrap}
.jn-stats span{font:400 14px/1.35 var(--f-inter);color:var(--muted)}
@media (max-width:599.98px){
  .jn-stats{grid-template-columns:minmax(0,1fr)}
  .jn-stats li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px}
  .jn-stats li + li{border-left:0;border-top:1px solid var(--card-line)}
  .jn-stats b{font-size:24px}
  .jn-stats span{text-align:right}
}

.jn-h3{margin:44px 0 16px;font:600 clamp(20px,1.8vw,24px)/1.2 var(--f-tight);letter-spacing:-.02em;color:var(--ink)}
.jn-body>.jn-h3:first-child{margin-top:0}
.jn-note{max-width:60ch;margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.jn-note--top{margin:-4px 0 16px}

/* кроки 01–03 */
.jn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.jn-step{display:grid;align-content:start;gap:8px;padding:20px;border-radius:20px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.jn-step__n{font:700 13px/1 var(--f-manrope);letter-spacing:.08em;color:var(--accent-text-sm)}
.jn-step__t{margin:6px 0 0;font:600 18px/1.2 var(--f-tight);letter-spacing:-.015em;color:var(--ink)}
.jn-step__d{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:767.98px){
  .jn-steps{grid-template-columns:minmax(0,1fr)}
  .jn-step{grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:16px 18px}
  .jn-step__n{grid-row:span 2;padding-top:4px}
  .jn-step__t{margin:0}
}

/* для кого — чипи */
.jn-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jn-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:100px;font:500 15px/1 var(--f-inter);color:var(--ink);background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line)}

/* що беремо на себе — svc-hover 25.10: спільний компонент рядків послуг (.pg-line* у pages.css), власних правил тут нема */

/* кого шукаємо — ролі */
.jn-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.jn-role{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start;padding:16px;border-radius:18px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.jn-role__ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--jn-soft);color:var(--accent-text)}
.jn-role__ic .jn-ic{width:22px;height:22px}
.jn-role__t{margin:2px 0 0;font:600 16px/1.25 var(--f-tight);letter-spacing:-.01em;color:var(--ink)}
.jn-role__d{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:599.98px){.jn-roles{grid-template-columns:minmax(0,1fr)}.jn-role{padding:14px}}

/* як працюємо */
.jn-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.jn-how li{padding:18px;border-radius:18px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.jn-how__t{margin:0;font:600 17px/1.2 var(--f-tight);letter-spacing:-.01em;color:var(--ink)}
.jn-how__d{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:767.98px){.jn-how{grid-template-columns:minmax(0,1fr)}}

.jn-switch{margin:36px 0 0}
.jn-switch a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 16px/1.3 var(--f-inter);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-text);text-decoration-thickness:2px;text-underline-offset:6px}
.jn-switch a svg{width:18px;height:18px;flex:none}

/* ───────── картка-форма ───────── */
.jn-card{position:relative;isolation:isolate;overflow:hidden;padding:clamp(22px,2.4vw,32px);border-radius:24px;background:var(--card-glass);
  box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi),0 40px 90px -50px rgba(0,0,0,.55)}
.jn-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--card-glow);background:radial-gradient(ellipse 380px 150px at 100% 0%,#C8FF3E,transparent 70%)}
.jn-form{display:grid;gap:16px}
.jn-form__head{margin-bottom:4px}
.jn-form__t{margin:0;font:700 clamp(24px,2.2vw,28px)/1.1 var(--f-tight);letter-spacing:-.03em;color:var(--ink-strong)}
.jn-form__n{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.jn-f{display:grid;gap:7px;min-width:0}
.jn-f__l{font:600 14px/1.35 var(--f-inter);color:var(--ink)}
.jn-in{width:100%;min-height:52px;padding:13px 16px;border-radius:14px;border:1px solid var(--jn-line);background:var(--jn-field);color:var(--ink);
  font:400 16px/1.35 var(--f-inter);-webkit-appearance:none;appearance:none;transition:border-color .2s var(--ease-out-q),box-shadow .2s var(--ease-out-q)}
.jn-in::placeholder{color:var(--muted);opacity:.75}
.jn-in:focus{outline:none;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--jn-soft)}
.jn-in:focus-visible{outline:none}
.jn-in[aria-invalid="true"]{border-color:var(--jn-err)}
.jn-in--ta{min-height:104px;resize:vertical}
.jn-sel{position:relative;display:block}
.jn-sel::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.jn-sel select{padding-right:48px;cursor:pointer}
.jn-sel select:invalid{color:var(--muted)}
.jn-sel option{color:#141413;background:#fff}
.jn-f__e{font:500 13px/1.4 var(--f-inter);color:var(--jn-err)}
.jn-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:359.98px){.jn-row2{grid-template-columns:minmax(0,1fr)}}

/* згода */
.jn-ok{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding-top:2px;cursor:pointer;font:400 14px/1.45 var(--f-inter);color:var(--muted)}
.jn-ok input{position:absolute;left:0;top:2px;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.jn-ok__box{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--jn-line2);background:var(--jn-field);color:transparent;transition:background-color .15s var(--ease-out-q),border-color .15s var(--ease-out-q)}
.jn-ok__ic{width:16px;height:16px;stroke-width:2.6}
.jn-ok input:checked + .jn-ok__box{background:var(--lime);border-color:var(--lime);color:#111110}
.jn-ok input:focus-visible + .jn-ok__box{outline:2px solid var(--accent-text);outline-offset:2px}
.jn-ok input[aria-invalid="true"] + .jn-ok__box{border-color:var(--jn-err)}
.jn-ok a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.jn-ok__t{padding-top:2px}

.jn-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.jn-form__err{margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--jn-err);font-size:14px;line-height:1.5;color:var(--ink)}
.jn-form__err a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.jn-submit{position:relative;width:100%;min-height:56px;margin-top:4px}
.jn-submit svg{width:18px;height:18px}
.jn-spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.22);border-top-color:#000;animation:jn-spin .7s linear infinite}
.is-busy .jn-submit{cursor:progress;opacity:.86}
.is-busy .jn-submit svg{display:none}
.is-busy .jn-spin{display:block}
@keyframes jn-spin{to{transform:rotate(360deg)}}
.jn-form__small{margin:0;text-align:center;font-size:13px;line-height:1.45;color:var(--muted)}

/* успіх */
.jn-done{display:grid;justify-items:start;gap:12px;padding:6px 0;outline:none}
.jn-done:not([hidden]){transition:opacity .35s var(--ease-out-q),transform .35s var(--ease-out-q)}
@starting-style{.jn-done:not([hidden]){opacity:0;transform:translateY(10px)}}
.jn-done__ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--lime);color:#111110;box-shadow:0 0 0 8px var(--jn-soft)}
.jn-done__svg{width:30px;height:30px;stroke-width:2.4}
.jn-done__t{margin:10px 0 0;font:700 clamp(26px,2.6vw,32px)/1.1 var(--f-tight);letter-spacing:-.03em;color:var(--ink-strong)}
.jn-done__p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.jn-done__b{margin-top:8px;display:flex;flex-wrap:wrap;gap:10px}
.jn-done__bot{margin:0;font-size:16px;line-height:1.55;color:var(--text,inherit)}

/* FAQ панелі */
.jn-faq{padding-top:clamp(56px,6vw,88px)}
.jn-faq .pg-h2{font-size:clamp(30px,3.4vw,48px)}

/* без JS обидві панелі видно; з JS неактивна — hidden (join.js) */
@media (prefers-reduced-motion:reduce){
  .jn-door,.jn-door::before,.jn-door__cta,.jn-door__cta svg,.jn-in,.jn-ok__box,.jn-done:not([hidden]){transition:none!important}
  .jn-spin{animation-duration:2s}
}