/* ============================================
   HACKER'S COFFEE - B2B page styles
   Loaded after /css/style.css (tokens, nav, footer, terminal blocks).
   Prefix: .b2b  |  Bump ?v=N in b2b.html and en/b2b.html when editing.
   ============================================ */

.b2b {
    max-width: 1040px;
    margin: 0 auto;
    padding: 110px 24px 60px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.b2b * { min-width: 0; }

.b2b section { margin-top: 4rem; }
.b2b section:first-child { margin-top: 0; }
.b2b [id] { scroll-margin-top: 6rem; }

/* Headings */
.b2b__h2 {
    color: var(--amber);
    font-size: 1.15rem;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.b2b__h2::before { content: "// "; opacity: 0.7; }
.b2b__lead {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 68ch;
    margin-bottom: 1.8rem;
}
.b2b p, .b2b li { font-size: 0.875rem; line-height: 1.7; }
/* Plain links only: buttons (.b2b__btn) carry their own colours and must not be overridden
   (this rule used to win on specificity and painted green text on the green CTA). */
.b2b a:not(.b2b__btn) { color: var(--green-primary); }
.b2b a:not(.b2b__btn):hover { text-shadow: 0 0 10px var(--green-glow); }
.b2b a:focus-visible,
.b2b button:focus-visible,
.b2b summary:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

/* Buttons */
.b2b__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    border: 2px solid var(--green-primary);
    background: transparent;
    color: var(--green-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.b2b__btn:hover { background: var(--green-primary); color: var(--bg-primary); text-shadow: none; box-shadow: 0 0 24px var(--green-glow); }
.b2b__btn--primary { background: var(--green-primary); color: var(--bg-primary); }
.b2b__btn--primary:hover { background: var(--green-dim); border-color: var(--green-dim); }
.b2b__btn--ghost { border-color: var(--amber); color: var(--amber); }
.b2b__btn--ghost:hover { background: var(--amber); border-color: var(--amber); color: var(--bg-primary); }
.b2b__btn[disabled], .b2b__btn[aria-busy="true"] { opacity: 0.6; cursor: wait; }

/* Hero */
.b2b__hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--green-dim);
    border-radius: 8px;
    background: var(--bg-secondary);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.08);
}
.b2b__hero-bg { position: absolute; inset: 0; }
.b2b__hero-bg picture, .b2b__hero-bg img { display: block; width: 100%; height: 100%; }
.b2b__hero-bg img { object-fit: cover; object-position: center 70%; filter: brightness(0.22) saturate(1.2); }
.b2b__hero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.75) 55%, rgba(10,10,10,0.45) 100%);
}
.b2b__hero-body { position: relative; padding: 3.2rem 2.4rem; max-width: 720px; }
.b2b__kicker {
    color: var(--amber);
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 0.9rem;
}
.b2b__title {
    color: var(--green-primary);
    font-size: clamp(1.45rem, 3.4vw, 2.1rem);
    line-height: 1.25;
    margin-bottom: 1rem;
    text-shadow: 0 0 14px var(--green-glow);
}
.b2b__hero-text {
    color: #d8d8d8;
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 60ch;
    margin-bottom: 1.6rem;
}
.b2b__hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.b2b__trust {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    border-top: 1px solid rgba(0, 255, 0, 0.25);
    padding-top: 1rem;
}
.b2b__trust li { color: #b8b8b8; font-size: 0.78rem; line-height: 1.5; }
.b2b__trust li::before { content: "[ok] "; color: var(--green-primary); }

/* Tiles: who is it for */
.b2b__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}
.b2b__tile {
    border: 1px solid var(--text-dim);
    border-radius: 6px;
    padding: 1.4rem 1.4rem 1.2rem;
    background: var(--bg-secondary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.b2b__tile:hover { border-color: var(--green-dim); box-shadow: 0 0 20px rgba(0, 255, 0, 0.08); }
.b2b__tile-tag { color: var(--text-dim); font-size: 0.72rem; letter-spacing: 1px; margin-bottom: 0.4rem; }
.b2b__tile h3 { color: var(--green-primary); font-size: 1rem; margin-bottom: 0.8rem; line-height: 1.4; }
.b2b__tile ul { list-style: none; padding: 0; }
.b2b__tile li { position: relative; padding-left: 1.3rem; margin-bottom: 0.45rem; font-size: 0.83rem; }
.b2b__tile li::before { content: ">"; position: absolute; left: 0; color: var(--amber); }

/* Steps */
.b2b__steps {
    list-style: none;
    padding: 0;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.b2b__step {
    counter-increment: step;
    border: 1px solid var(--text-dim);
    border-radius: 6px;
    padding: 1.2rem 1.2rem 1rem;
    background: var(--bg-secondary);
    position: relative;
}
.b2b__step::before {
    content: "0" counter(step);
    display: inline-block;
    color: var(--amber);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}
.b2b__step h3 { color: var(--green-primary); font-size: 0.92rem; margin-bottom: 0.5rem; line-height: 1.4; }
.b2b__step p { font-size: 0.8rem; margin: 0; }

/* What you get */
.b2b__features {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.b2b__feature {
    border-left: 2px solid var(--green-dim);
    padding: 0.2rem 0 0.2rem 1rem;
}
.b2b__feature h3 { color: var(--green-primary); font-size: 0.9rem; margin-bottom: 0.4rem; line-height: 1.4; }
.b2b__feature p { font-size: 0.8rem; margin: 0; }

/* Quality block (reuses .about__terminal from style.css) */
.b2b__quality .about__terminal { margin-top: 1.2rem; }
.b2b__quality .about__terminal-body { padding: 1.6rem 1.6rem 1.4rem; font-size: 0.875rem; line-height: 1.75; }
.b2b__quality .about__text, .b2b__quality .about__highlight { margin-left: 0; margin-bottom: 0.7rem; }
.b2b__quality .about__highlight { margin-bottom: 1rem; }
.b2b__quality .about__qc-title { color: var(--green-primary); font-size: 1rem; margin-bottom: 0.6rem; }
.b2b__source { font-size: 0.75rem; opacity: 0.8; margin-top: 0.6rem; }
.b2b__source a { color: inherit; }

/* FAQ */
.b2b__faq { border-top: 1px solid var(--text-dim); }
.b2b__faq details { border-bottom: 1px solid var(--text-dim); }
.b2b__faq summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-height: 48px;
    padding: 0.9rem 0.2rem;
    cursor: pointer;
    color: var(--green-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
}
.b2b__faq summary::-webkit-details-marker { display: none; }
.b2b__faq summary::before { content: "[+]"; color: var(--amber); flex: 0 0 auto; font-weight: 400; }
.b2b__faq details[open] summary::before { content: "[-]"; }
.b2b__faq details p { padding: 0 0.2rem 1rem 2.6rem; margin: 0; }

/* Inquiry form */
.b2b__contact {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.b2b__form {
    border: 1px solid var(--green-dim);
    border-radius: 8px;
    background: var(--bg-secondary);
    padding: 1.6rem;
}
.b2b__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.b2b__field { display: flex; flex-direction: column; gap: 0.35rem; }
.b2b__field--full { grid-column: 1 / -1; }
.b2b__label { color: var(--green-primary); font-size: 0.8rem; letter-spacing: 0.5px; }
.b2b__label .req { color: var(--amber); }
.b2b__input, .b2b__select, .b2b__textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    background: var(--bg-primary);
    border: 1px solid var(--text-dim);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 16px; /* prevents iOS zoom on focus */
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.b2b__input::placeholder, .b2b__textarea::placeholder { color: var(--text-dim); }
.b2b__input:focus, .b2b__select:focus, .b2b__textarea:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px var(--green-glow);
}
.b2b__input[aria-invalid="true"], .b2b__select[aria-invalid="true"], .b2b__textarea[aria-invalid="true"] {
    border-color: var(--red);
}
.b2b__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--green-primary) 50%), linear-gradient(135deg, var(--green-primary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}
.b2b__textarea { min-height: 140px; resize: vertical; }
.b2b__hint { color: var(--text-dim); font-size: 0.72rem; }

.b2b__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 44px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.6;
}
/* Terminal-style checkbox: the native box is kept for accessibility but drawn by CSS as [ ] / [x] */
.b2b__consent { position: relative; padding-left: 2.6rem; }
.b2b__consent input {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 1.6rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.b2b__consent::before {
    content: "[ ]";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.2rem;
    white-space: nowrap;
    color: var(--green-primary);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.6rem;
    letter-spacing: 0;
    pointer-events: none;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}
.b2b__consent:has(input:checked)::before { content: "[x]"; text-shadow: 0 0 8px var(--green-glow); }
.b2b__consent:has(input:focus-visible)::before { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
.b2b__consent:has(input[aria-invalid="true"])::before { color: var(--red); }
.b2b__consent:hover::before { text-shadow: 0 0 8px var(--green-glow); }
/* Native dropdown list and date/number pickers follow the page theme instead of the OS */
.b2b__select, .b2b__input, .b2b__textarea { color-scheme: dark; }
[data-theme="light"] .b2b__select, [data-theme="light"] .b2b__input, [data-theme="light"] .b2b__textarea { color-scheme: light; }
.b2b__select option { background: var(--bg-primary); color: var(--text-primary); }

/* Honeypot: hidden from people, present for bots */
.b2b__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.b2b__form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.b2b__form-actions .b2b__btn { min-width: 220px; }

.b2b__status {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.6;
}
.b2b__status[hidden] { display: none; }
.b2b__status--ok { border: 1px solid var(--green-primary); color: var(--green-primary); background: rgba(0, 255, 0, 0.06); }
.b2b__status--error { border: 1px solid var(--red); color: var(--red); background: rgba(255, 51, 51, 0.06); }
.b2b__status a { color: inherit; text-decoration: underline; }

.b2b__aside {
    border: 1px solid var(--text-dim);
    border-radius: 8px;
    padding: 1.4rem;
    background: var(--bg-secondary);
}
.b2b__aside h3 { color: var(--amber); font-size: 0.95rem; margin-bottom: 0.8rem; }
.b2b__aside p { margin-bottom: 0.8rem; }
.b2b__aside-mail {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    color: var(--green-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    word-break: break-all;
}
.b2b__aside ul { list-style: none; padding: 0; margin-top: 0.4rem; }
.b2b__aside li { font-size: 0.8rem; padding-left: 1.2rem; position: relative; margin-bottom: 0.3rem; }
.b2b__aside li::before { content: ">"; position: absolute; left: 0; color: var(--amber); }

/* Footer (same as other standalone pages) */
.b2b__footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--text-dim); text-align: center; }
.b2b__footer a { color: var(--green-primary); text-decoration: none; }
.b2b__footer a:hover { text-shadow: 0 0 10px var(--green-glow); }
.b2b__footer p { color: var(--text-dim); font-size: 0.8rem; }

/* Light theme */
[data-theme="light"] .b2b__hero { box-shadow: 0 0 24px rgba(0, 0, 0, 0.12); }
[data-theme="light"] .b2b__hero-bg img { filter: brightness(0.55) saturate(1.1); }
[data-theme="light"] .b2b__hero-bg::after { background: linear-gradient(90deg, rgba(20,20,20,0.9) 0%, rgba(20,20,20,0.78) 55%, rgba(20,20,20,0.5) 100%); }
[data-theme="light"] .b2b__title { color: #5dff5d; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
[data-theme="light"] .b2b__kicker { color: #ffc14d; }
[data-theme="light"] .b2b__hero-text { color: #f0f0f0; }
[data-theme="light"] .b2b__trust li { color: #e4e4e4; }
[data-theme="light"] .b2b__trust li::before { color: #5dff5d; }
[data-theme="light"] .b2b__hero .b2b__btn--primary { background: #00c800; border-color: #00c800; color: #0a0a0a; }
[data-theme="light"] .b2b__hero .b2b__btn--ghost { border-color: #ffc14d; color: #ffc14d; }
[data-theme="light"] .b2b__hero .b2b__btn--ghost:hover { background: #ffc14d; color: #0a0a0a; }
[data-theme="light"] .b2b__status--ok { background: rgba(0, 107, 0, 0.08); }
[data-theme="light"] .b2b__status--error { background: rgba(204, 0, 0, 0.06); }

/* Responsive */
@media (max-width: 900px) {
    .b2b__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b2b__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b2b__contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .b2b { padding: 96px 16px 48px; }
    .b2b section { margin-top: 3rem; }
    .b2b__hero-body { padding: 2.2rem 1.2rem; }
    .b2b__hero-actions .b2b__btn { width: 100%; }
    .b2b__tiles, .b2b__steps, .b2b__features, .b2b__form-grid { grid-template-columns: 1fr; }
    .b2b__form { padding: 1.2rem 1rem; }
    .b2b__form-actions .b2b__btn { width: 100%; }
    .b2b__faq details p { padding-left: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .b2b * { transition: none !important; }
}

/* "Rodzaj współpracy": radio chips in the terminal style instead of the OS dropdown */
.b2b__choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.b2b__choice legend { padding: 0; margin-bottom: 0.35rem; }
.b2b__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.b2b__chip { position: relative; display: inline-flex; min-height: 44px; cursor: pointer; }
.b2b__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.b2b__chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--text-dim);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.3;
    transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.b2b__chip span::before { content: "[ ] "; white-space: pre; color: var(--green-primary); font-weight: 700; }
.b2b__chip:hover span { border-color: var(--green-dim); }
.b2b__chip input:checked + span { border-color: var(--green-primary); color: var(--green-primary); box-shadow: 0 0 0 1px var(--green-primary), 0 0 14px var(--green-glow); background: rgba(0, 255, 0, 0.06); }
.b2b__chip input:checked + span::before { content: "[x] "; }
.b2b__chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.b2b__chip input[aria-invalid="true"] + span { border-color: var(--red); }
[data-theme="light"] .b2b__chip input:checked + span { background: rgba(0, 107, 0, 0.08); }
@media (max-width: 480px) {
    .b2b__chips { flex-direction: column; }
    .b2b__chip, .b2b__chip span { width: 100%; }
}