/* ============================================================
   beecoffee — "Editorial Roastery"
   Typographic, hairline-ruled editorial layout. Squared geometry,
   flat panels, mono numerals, one accent per screen.
   Mobile-first: base = phone, then min-width 480 / 768 / 1024 / 1280.
   Class & id names preserved 1:1 — JS and markup depend on them.
   Requires tokens.css (loaded first).
   ============================================================ */

/* ---------------- reset ---------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
    -webkit-tap-highlight-color: rgba(234, 91, 30, 0.18);
}
/* anchor targets clear the sticky header */
[id] {
    scroll-margin-top: 88px;
}
/* long emails / urls / codes must never push the layout */
p,
li,
td,
th,
dd,
figcaption,
a[href^="mailto:"],
a[href^="http"],
a[href^="tel:"],
.legal,
.crumbs {
    overflow-wrap: break-word;
}
a[href^="mailto:"],
a[href^="http"],
.legal {
    overflow-wrap: anywhere;
}
body {
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}
img,
svg,
video {
    max-width: 100%;
    display: block;
    height: auto;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}
ul,
ol {
    list-style: none;
}
::selection {
    background: var(--honey-soft);
    color: var(--ink);
}

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: var(--z-modal);
    transform: translateY(-160%);
    background: var(--ink);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-2);
    font-weight: 600;
    font-size: var(--t-sm);
    transition: transform var(--d-2) var(--ease);
}
.skip-link:focus-visible {
    transform: none;
}

/* ---------------- typography ---------------- */
h1,
h2,
h3,
h4 {
    font-family: var(--display);
    color: var(--ink);
    text-wrap: balance;
    letter-spacing: -0.03em;
}
h1 {
    font-size: var(--t-4xl);
    font-weight: 800;
    line-height: var(--lh-tight);
}
h2 {
    font-size: var(--t-3xl);
    font-weight: 800;
    line-height: 1.08;
}
h3 {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: -0.02em;
}
h4 {
    font-size: var(--t-md);
    font-weight: 700;
    line-height: var(--lh-snug);
}
p {
    text-wrap: pretty;
    max-width: var(--measure);
}
strong {
    font-weight: 700;
    color: var(--brand-ink);
}
.dark strong,
.hero strong,
.page-hero strong {
    color: var(--honey);
}
em {
    font-style: italic;
}

.lead {
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    color: var(--ink-soft);
    max-width: 62ch;
}
.dark .lead,
.hero .lead,
.page-hero .lead {
    color: var(--on-dark-soft);
}
.measure {
    max-width: var(--measure);
}
.center {
    text-align: center;
}
.center p,
.center .lead {
    margin-left: auto;
    margin-right: auto;
}

/* ---------------- layout primitives ---------------- */
.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.section {
    padding-block: var(--sec-y);
    position: relative;
}
.section + .section:not(.dark):not(.cream) {
    border-top: var(--bw) solid var(--line);
}
.cream {
    background: var(--paper-2);
}
.dark {
    background: var(--ink);
    color: var(--on-dark);
}
.dark h1,
.dark h2,
.dark h3,
.dark h4 {
    color: #fff;
}

/* ---------------- section head — editorial, ruled ---------------- */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-ink);
    margin-bottom: var(--sp-4);
}
.kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--brand);
}
.dark .kicker,
.hero .kicker,
.page-hero .kicker {
    color: var(--honey);
}
.dark .kicker::before,
.hero .kicker::before,
.page-hero .kicker::before {
    background: var(--honey);
}

.sec-head {
    margin-bottom: var(--stack);
    padding-top: var(--sp-4);
    border-top: 2px solid var(--ink);
}
.dark .sec-head {
    border-top-color: var(--honey);
}
.sec-head h2 {
    margin-bottom: var(--sp-4);
    max-width: 24ch;
}
.sec-head.center h2 {
    max-width: none;
}
.sec-head .lead {
    margin-bottom: 0;
}
.sec-head.center {
    border-top: 0;
    padding-top: 0;
    max-width: 760px;
    margin-inline: auto;
}
.sec-head.center::before {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--brand);
    margin: 0 auto var(--sp-5);
}

/* ---------------- buttons ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: var(--sp-3) var(--sp-5);
    border: 2px solid transparent;
    border-radius: var(--r-2);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-align: center;
    transition:
        background var(--d-2) var(--ease),
        color var(--d-2) var(--ease),
        border-color var(--d-2) var(--ease),
        transform var(--d-1) var(--ease);
}
.btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}
.btn-primary {
    background: var(--brand-strong);
    color: #fff;
    border-color: var(--brand-strong);
}
.btn-primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.btn-primary:active {
    transform: translateY(1px);
}
.btn-outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--n-500);
}
.btn-outline:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}
.btn-cream {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.btn-cream:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}
.dark .btn-outline,
.hero .btn-outline,
.page-hero .btn-outline,
.cta-banner .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.34);
}
.dark .btn-outline:hover,
.hero .btn-outline:hover,
.page-hero .btn-outline:hover,
.cta-banner .btn-outline:hover {
    background: var(--honey);
    border-color: var(--honey);
    color: var(--ink);
}
.btn-lg {
    min-height: 56px;
    padding: var(--sp-4) var(--sp-6);
    font-size: 1.05rem;
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ---------------- header ---------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--paper);

    border-bottom: var(--bw) solid var(--line);
    transition:
        box-shadow var(--d-2) var(--ease),
        transform var(--d-3) var(--ease);
}
.brand img {
    height: 35px;
    width: auto;
}

@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    .site-header {
        background: rgba(250, 248, 244, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}
/* smart header: retracts on the way down, returns on the way up (phones only) */
.site-header.hide {
    transform: translateY(-100%);
}
@media (min-width: 1024px) {
    .site-header.hide {
        transform: none;
    }
}
.site-header.scrolled {
    background: rgba(250, 248, 244, 0.97);
    box-shadow: var(--sh-2);
    border-bottom-color: var(--n-300);
}
.nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 60px;
}
.brand {
    display: inline-flex;
    align-items: center;
    font-family: "Fredoka", var(--display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--brand-strong);
    white-space: nowrap;
    letter-spacing: 0.004em;
}
.brand .bean {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin: 0 0.012em;
    position: relative;
    background: var(--brand-strong);
    border-radius: 50%/58% 58% 42% 42%;
    transform: rotate(-10deg);
    --bean-split: var(--paper);
}
.brand .bean::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 13%;
    width: 14%;
    height: 74%;
    background: var(--bean-split);
    border-radius: 40%;
    transform: translateX(-50%) rotate(26deg);
}
.nav-menu {
    display: none;
}
html:not(.js) .nav {
    flex-wrap: wrap;
    padding-block: var(--sp-2);
}
html:not(.js) .nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    width: 100%;
    padding-top: var(--sp-3);
    border-top: var(--bw) solid var(--line);
    font-weight: 600;
}
html:not(.js) .nav-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
}
html:not(.js) .burger {
    display: none;
}
.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.nav-phone {
    display: none;
}
.site-header .nav-right .btn {
    display: none;
}
.nav-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--brand-strong);
    border-radius: var(--r-2);
    background: var(--brand-strong);
    color: #fff;
    transition:
        background var(--d-2) var(--ease),
        border-color var(--d-2) var(--ease);
}
.nav-call:hover {
    background: var(--ink);
    border-color: var(--ink);
}
.nav-call svg {
    width: 20px;
    height: 20px;
}
.burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    border: var(--bw) solid var(--n-500);
    border-radius: var(--r-2);
    background: var(--n-0);
    cursor: pointer;
    transition: border-color var(--d-2) var(--ease);
}
.burger:hover {
    border-color: var(--ink);
}
.burger span {
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform var(--d-2) var(--ease);
}

/* ---------------- drawer ---------------- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    visibility: hidden;
    pointer-events: none;
}
.drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(22, 17, 13, 0.6);
    opacity: 0;
    transition: opacity var(--d-2) var(--ease);
}
.drawer-panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-left: var(--bw) solid var(--line);
    box-shadow: var(--sh-3);
    padding: var(--sp-5) var(--sp-5) max(var(--sp-6), env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform var(--d-3) var(--ease);
}
.drawer.open {
    visibility: visible;
    pointer-events: auto;
}
.drawer.open .drawer-scrim {
    opacity: 1;
}
.drawer.open .drawer-panel {
    transform: none;
}
.drawer-close {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) var(--sp-3) auto;
    font-size: 1.9rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
}
.drawer-panel a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-block: var(--sp-3);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    border-bottom: var(--bw) solid var(--line);
    transition: color var(--d-1) var(--ease);
}
.drawer-panel a:hover {
    color: var(--brand-ink);
}
.drawer-panel a.btn {
    justify-content: center;
    border-bottom: 0;
    font-family: var(--sans);
    font-size: 1rem;
}

/* ---------------- hero ---------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-dark);
}
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-media img,
.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.26;
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 17, 13, 0.94), rgba(22, 17, 13, 0.72) 55%, rgba(22, 17, 13, 0.96));
}
.hero-inner {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-8) var(--sp-7);
}
.hero h1,
.hero-points {
    max-width: 22ch;
}
.hero h1 {
    color: #fff;
    margin-bottom: var(--sp-5);
}
.hero h1 em {
    font-style: normal;
    color: var(--honey);
}
.hero-sub {
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    color: var(--on-dark-soft);
    max-width: 46ch;
    margin-bottom: var(--sp-6);
}
.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-7);
    max-width: 420px;
}
.hero-points {
    display: grid;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: var(--bw) solid rgba(255, 255, 255, 0.16);
}
.hero-points li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--mono);
    font-size: var(--t-sm);
    letter-spacing: -0.01em;
    color: var(--on-dark);
}
.hero-points .ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: var(--bw) solid rgba(246, 166, 9, 0.45);
    border-radius: var(--r-1);
    color: var(--honey);
}
.hero-points svg {
    width: 15px;
    height: 15px;
}

@media (prefers-reduced-motion: no-preference) {
    .hero h1,
    .hero-sub,
    .hero-cta,
    .hero-points {
        opacity: 0;
        animation: rise var(--d-3) var(--ease) forwards;
    }
    .hero h1 {
        animation-delay: 60ms;
    }
    .hero-sub {
        animation-delay: 140ms;
    }
    .hero-cta {
        animation-delay: 220ms;
    }
    .hero-points {
        animation-delay: 300ms;
    }
}
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------- page hero / crumbs ---------------- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-dark);
}
.page-hero .bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-hero .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.22;
}
.page-hero .bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 17, 13, 0.9), rgba(22, 17, 13, 0.7) 60%, rgba(22, 17, 13, 0.95));
}
.page-hero .inner {
    position: relative;
    z-index: 1;
    padding-bottom: var(--sp-7);
}
.page-hero h1 {
    color: #fff;
    margin-bottom: var(--sp-4);
    max-width: 22ch;
}
.page-hero p {
    color: var(--on-dark-soft);
    font-size: var(--t-md);
    line-height: var(--lh-loose);
    max-width: 56ch;
}
.crumbs {
    font-family: var(--mono);
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
    color: var(--on-dark-faint);
    padding-block: var(--sp-5) var(--sp-6);
}
.crumbs a {
    color: var(--on-dark-soft);
}
.crumbs a:hover {
    color: var(--honey);
    text-decoration: underline;
}
.crumbs .sep {
    margin-inline: var(--sp-2);
    opacity: 0.6;
}

/* ---------------- grids ---------------- */
.grid {
    display: grid;
    gap: var(--sp-4);
}
.g-2,
.g-3,
.g-4,
.auto {
    grid-template-columns: 1fr;
}

/* ---------------- cards ---------------- */
.card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    padding: var(--sp-5);
    transition:
        border-color var(--d-2) var(--ease),
        box-shadow var(--d-2) var(--ease);
}
.card.lift:hover {
    border-color: var(--ink);
    box-shadow: var(--sh-2);
}
.dark .card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line-ink);
}
.feat .ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--sp-4);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-1);
    background: var(--paper-2);
    color: var(--brand-ink);
    transition:
        background var(--d-2) var(--ease),
        color var(--d-2) var(--ease);
}
.card.lift:hover .ic {
    background: var(--ink);
    color: var(--honey);
    border-color: var(--ink);
}
.feat .ic svg {
    width: 22px;
    height: 22px;
}
.feat h3 {
    margin-bottom: var(--sp-2);
}
.feat p {
    color: var(--ink-soft);
    font-size: var(--t-sm);
    line-height: var(--lh-body);
}
.svg-ic {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- flow (numbered sequence) ---------------- */
.flow {
    display: grid;
    gap: 0;
    border-top: var(--bw) solid var(--line);
}
.flow .node {
    position: relative;
    padding: var(--sp-5) 0;
    border-bottom: var(--bw) solid var(--line);
}
.flow .n {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--n-300);
    letter-spacing: -0.04em;
    margin-bottom: var(--sp-3);
}
.flow .node h3 {
    margin-bottom: var(--sp-2);
    padding-right: 44px;
}
.flow .node p {
    color: var(--ink-soft);
    font-size: var(--t-sm);
}
.flow .node .ic {
    position: absolute;
    top: var(--sp-5);
    right: 0;
    color: var(--brand);
}
.flow .node .ic svg {
    width: 26px;
    height: 26px;
}

.note-bar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--r-2);
    padding: var(--sp-5);
    font-size: var(--t-sm);
    line-height: var(--lh-body);
}
.note-bar p {
    max-width: none;
}
.note-bar a {
    color: var(--honey);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}
.note-bar .badge {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: var(--bw) solid rgba(246, 166, 9, 0.4);
    border-radius: var(--r-1);
    color: var(--honey);
}
.note-bar .badge svg {
    width: 18px;
    height: 18px;
}

/* ---------------- steps ---------------- */
.steps {
    display: grid;
    gap: 0;
    margin-top: var(--stack);
    border-top: 2px solid var(--ink);
}
.step {
    position: relative;
    padding: var(--sp-5) 0 var(--sp-5) 56px;
    border-bottom: var(--bw) solid var(--line);
}
.step .num {
    position: absolute;
    left: 0;
    top: var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-1);
    background: var(--brand-strong);
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1rem;
}
.step h3 {
    margin-bottom: var(--sp-2);
}
.step p {
    color: var(--ink-soft);
    font-size: var(--t-sm);
}
.dark .step {
    border-bottom-color: var(--line-ink);
}
.dark .step p {
    color: var(--on-dark-soft);
}

/* ---------------- catalog (static grid) ---------------- */
.cat {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}
.prod {
    display: flex;
    flex-direction: column;
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    transition:
        border-color var(--d-2) var(--ease),
        box-shadow var(--d-2) var(--ease);
}
.prod:hover {
    border-color: var(--ink);
    box-shadow: var(--sh-2);
}
.prod .ph {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--paper-2);
    overflow: hidden;
}
.prod .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--d-3) var(--ease);
}
.prod:hover .ph img {
    transform: scale(1.03);
}
.prod .tag {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    background: var(--ink);
    color: var(--honey);
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--r-1);
}
.prod .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5);
}
.prod h3 {
    margin-bottom: var(--sp-1);
}
.prod .type,
.cat-slide .type {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-ink);
    margin-bottom: var(--sp-4);
}
.prod .specs {
    margin-bottom: var(--sp-4);
}
.prod .specs li {
    display: flex;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    border-bottom: var(--bw) solid var(--line);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.prod .specs li:last-child {
    border-bottom: 0;
}
.prod .specs b {
    margin-left: auto;
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--ink);
}
.prod .foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: var(--bw) solid var(--line);
}
.prod .price,
.cat-slide .price {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.2;
}
.prod .price span,
.cat-slide .price span {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--t-xs);
    color: var(--ink-soft);
}

/* ---------------- tariffs ---------------- */
.tariffs {
    display: grid;
    gap: var(--sp-4);
}
.tariff {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    padding: var(--sp-6) var(--sp-5);
    transition:
        border-color var(--d-2) var(--ease),
        box-shadow var(--d-2) var(--ease);
}
.tariff:hover {
    border-color: var(--ink);
}
.tariff.feat-card {
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
    box-shadow: var(--sh-2);
}
.tariff.feat-card h3 {
    color: #fff;
}
.tariff.feat-card .desc {
    color: var(--on-dark-soft);
}
.tariff.feat-card .price {
    color: var(--honey);
}
.tariff.feat-card .price small {
    color: var(--on-dark-soft);
}
.tariff .ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--honey);
    color: var(--ink);
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-bottom-left-radius: var(--r-2);
}
.tariff h3 {
    margin-bottom: var(--sp-1);
}
.tariff .price {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin: var(--sp-4) 0 var(--sp-1);
    line-height: 1;
}
.tariff .price small {
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-soft);
}
.tariff .desc {
    color: var(--ink-soft);
    font-size: var(--t-sm);
    margin-bottom: var(--sp-5);
}
.tariff ul {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: var(--bw) solid var(--line);
}
.tariff.feat-card ul {
    border-top-color: var(--line-ink);
}
.tariff li {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--t-sm);
}
.tariff li svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--ok);
}
.tariff.feat-card li {
    color: var(--on-dark);
}
.tariff.feat-card li svg {
    color: var(--honey);
}
.tariff .btn {
    margin-top: auto;
    width: 100%;
}

/* ---------------- calculator (signature panel) ---------------- */
.calc {
    display: grid;
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: var(--sh-3);
}
.calc-l {
    padding: var(--sp-6) var(--sp-5);
}
.calc-l h2 {
    color: #fff;
    margin-bottom: var(--sp-3);
}
.calc-l > p {
    color: var(--on-dark-soft);
    font-size: var(--t-sm);
    margin-bottom: var(--sp-6);
    max-width: 52ch;
}
.ctrl {
    margin-bottom: var(--sp-5);
}
.ctrl label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--on-dark-soft);
    margin-bottom: var(--sp-3);
}
.ctrl label b {
    font-family: var(--mono);
    font-size: 1.05rem;
    color: var(--honey);
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;
    background: transparent;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.2);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -11px;
    border-radius: var(--r-1);
    background: var(--honey);
    border: 3px solid var(--ink);
    box-shadow: 0 0 0 1px var(--honey);
}
input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.2);
}
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: var(--r-1);
    background: var(--honey);
    border: 3px solid var(--ink);
}
.ctrl select {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    font-size: 1rem;
    background: var(--n-0);
    color: var(--ink);
    border: var(--bw) solid var(--n-500);
    border-radius: var(--r-2);
}
.calc-r {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6) var(--sp-5);
    background: var(--n-950);
    border-top: var(--bw) solid var(--line-ink);
}
.calc-r .rows {
    margin-bottom: var(--sp-4);
}
.calc-r .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding-block: var(--sp-3);
    border-bottom: var(--bw) solid rgba(255, 255, 255, 0.08);
    font-size: var(--t-sm);
}
.calc-r .row span {
    color: var(--on-dark-faint);
}
.calc-r .row b {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--on-dark);
}
.econ {
    padding: var(--sp-5) 0;
    margin-bottom: var(--sp-4);
    border-top: 2px solid var(--honey);
    border-bottom: var(--bw) solid rgba(255, 255, 255, 0.08);
}
.econ .l {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--honey);
}
.econ .v {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(2.4rem, 10vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--honey);
    margin-top: var(--sp-3);
}
.econ .v small {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--on-dark-soft);
}
.calc-r .fine {
    font-size: var(--t-xs);
    color: var(--on-dark-faint);
    margin-block: auto var(--sp-4);
    line-height: 1.6;
}
.calc-r .btn {
    width: 100%;
}

/* ---------------- compare ---------------- */
.vs {
    display: grid;
    gap: var(--sp-4);
}
.vs-card {
    padding: var(--sp-6) var(--sp-5);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    background: var(--n-0);
}
.vs-card.win {
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
}
.vs-card .lab {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--r-1);
    margin-bottom: var(--sp-4);
}
.vs-card.win .lab {
    background: var(--honey);
    color: var(--ink);
}
.vs-card.lose .lab {
    background: var(--paper-2);
    color: var(--ink-soft);
}
.vs-card .big {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: var(--bw) solid var(--line);
}
.vs-card.win .big {
    color: var(--honey);
    border-bottom-color: var(--line-ink);
}
.vs-card ul {
    display: grid;
    gap: var(--sp-3);
}
.vs-card li {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--t-sm);
    color: var(--n-700);
}
.vs-card.win li {
    color: var(--on-dark);
}
.vs-card li svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}
.vs-card.win li svg {
    color: var(--honey);
}
.vs-card.lose li svg {
    color: var(--n-400);
}

/* ---------------- terms ---------------- */
.terms {
    display: grid;
    gap: var(--sp-4);
}
.terms-col {
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    padding: var(--sp-5);
}
.terms-col h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: var(--bw) solid var(--line);
}
.terms-col .dot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-1);
    color: #fff;
}
.terms-col .dot svg {
    width: 16px;
    height: 16px;
}
.terms-col.inc .dot {
    background: var(--ok);
}
.terms-col.pay .dot {
    background: var(--brand-strong);
}
.terms-col li {
    padding-block: var(--sp-3);
    border-bottom: var(--bw) solid var(--line);
    font-size: var(--t-sm);
    color: var(--n-700);
}
.terms-col li:last-child {
    border-bottom: 0;
}
.terms-col li b {
    color: var(--ink);
}

/* ---------------- stats ---------------- */
.stats {
    display: grid;
    gap: 0;
    border-top: 2px solid rgba(246, 166, 9, 0.5);
}
.stat {
    padding-block: var(--sp-5);
    border-bottom: var(--bw) solid rgba(255, 255, 255, 0.1);
}
.stat .num {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--honey);
}
.stat .cap {
    margin-top: var(--sp-2);
    font-size: var(--t-sm);
    color: var(--on-dark-soft);
    max-width: 22ch;
}

/* ---------------- cases ---------------- */
.cases {
    display: grid;
    gap: var(--sp-4);
}
.case {
    display: flex;
    flex-direction: column;
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    transition:
        border-color var(--d-2) var(--ease),
        box-shadow var(--d-2) var(--ease);
}
.case:hover {
    border-color: var(--ink);
    box-shadow: var(--sh-2);
}
.case .ph {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--paper-2);
}
.case .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--d-3) var(--ease);
}
.case:hover .ph img {
    transform: scale(1.03);
}
.case .seg {
    position: absolute;
    left: var(--sp-3);
    bottom: var(--sp-3);
    background: var(--ink);
    color: var(--honey);
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--r-1);
}
.case .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5);
}
.case h3 {
    margin-bottom: var(--sp-3);
}
.case .pr {
    font-size: var(--t-sm);
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}
.case .pr b {
    color: var(--ink);
}
.case .metric {
    margin-block: var(--sp-4);
    padding-block: var(--sp-3);
    border-top: var(--bw) solid var(--line);
    border-bottom: var(--bw) solid var(--line);
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--t-sm);
    color: var(--brand-ink);
    letter-spacing: -0.02em;
}
.case .quote {
    margin-top: auto;
    font-size: var(--t-sm);
    font-style: italic;
    color: var(--ink-soft);
}

/* ---------------- team ---------------- */
.team {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(2, 1fr);
}
.member .ph {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--paper-2);
    border-radius: var(--r-2);
    margin-bottom: var(--sp-3);
}
.member .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.35) contrast(1.04);
    transition:
        filter var(--d-3) var(--ease),
        transform var(--d-3) var(--ease);
}
.member:hover .ph img {
    filter: none;
    transform: scale(1.03);
}
.member b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
}
.member .role {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-ink);
    margin-block: var(--sp-1);
}
.member span {
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

/* ---------------- brands ---------------- */
.brands {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
}
.brand-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    background: var(--n-0);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--n-500);
    transition:
        color var(--d-2) var(--ease),
        border-color var(--d-2) var(--ease);
}
.brand-chip:hover {
    color: var(--ink);
    border-color: var(--ink);
}
.dark .brand-chip {
    background: transparent;
    border-color: var(--line-ink);
    color: var(--on-dark-soft);
}
.dark .brand-chip:hover {
    color: #fff;
    border-color: var(--honey);
}

/* ---------------- reviews ---------------- */
.reviews {
    display: grid;
    gap: var(--sp-4);
}
.review {
    display: flex;
    flex-direction: column;
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    padding: var(--sp-5);
    transition: border-color var(--d-2) var(--ease);
}
.review:hover {
    border-color: var(--ink);
}
.stars {
    color: var(--brand-ink);
    letter-spacing: 2px;
    font-size: 0.95rem;
    margin-bottom: var(--sp-4);
}
.review p {
    font-size: var(--t-sm);
    line-height: var(--lh-loose);
    color: var(--n-700);
    margin-bottom: var(--sp-5);
}
.review .who {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: var(--bw) solid var(--line);
}
.review .av {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-1);
    background: var(--ink);
    color: var(--honey);
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--t-sm);
}
.review .who b {
    display: block;
    font-size: var(--t-sm);
}
.review .who span {
    font-size: var(--t-xs);
    color: var(--ink-soft);
}
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    background: var(--n-0);
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--brand-ink);
}
.rating-badge b {
    font-family: var(--mono);
    font-size: 1.2rem;
    color: var(--ink);
}

/* ---------------- table ---------------- */
.table-wrap {
    position: relative;
    overflow-x: auto;
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    background: var(--n-0);
    background-image: linear-gradient(to right, rgba(22, 17, 13, 0.08), transparent 24px);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 24px 100%;
    background-attachment: local;
}
table.cmp {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
table.cmp th,
table.cmp td {
    padding: var(--sp-4);
    text-align: left;
    font-size: var(--t-sm);
    border-bottom: var(--bw) solid var(--line);
}
table.cmp thead th {
    background: var(--ink);
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
table.cmp td:first-child {
    font-weight: 600;
}
table.cmp tbody tr:hover {
    background: var(--paper-2);
}
table.cmp .hl {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--brand-ink);
}

/* ---------------- faq ---------------- */
.faq {
    max-width: var(--maxw-narrow);
    margin-inline: auto;
    border-top: 2px solid var(--ink);
}
.faq details {
    border-bottom: var(--bw) solid var(--line);
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 60px;
    padding-block: var(--sp-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--t-md);
    letter-spacing: -0.02em;
    color: var(--ink);
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary:hover {
    color: var(--brand-ink);
}
.faq summary .pm {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: var(--bw) solid var(--line);
    border-radius: var(--r-1);
    background: var(--n-0);
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--brand-ink);
    transition:
        background var(--d-2) var(--ease),
        color var(--d-2) var(--ease);
}
.faq details[open] .pm {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--honey);
}
.faq .ans {
    padding-bottom: var(--sp-5);
    color: var(--ink-soft);
    font-size: var(--t-sm);
    line-height: var(--lh-loose);
    max-width: 70ch;
}
@media (prefers-reduced-motion: no-preference) {
    .faq details[open] .ans {
        animation: ansin var(--d-2) var(--ease);
    }
}
@keyframes ansin {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------- forms ---------------- */
.field {
    width: 100%;
    min-height: 48px;
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: 1rem;
    background: var(--n-0);
    color: var(--ink);
    border: var(--bw) solid var(--n-500);
    border-radius: var(--r-2);
    transition:
        border-color var(--d-1) var(--ease),
        box-shadow var(--d-1) var(--ease);
}
.field::placeholder {
    color: var(--n-500);
    opacity: 1;
}
.field:hover {
    border-color: var(--ink);
}
.field:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}
.field[aria-invalid="true"],
.field:user-invalid {
    border-color: var(--err);
    box-shadow: inset 0 0 0 1px var(--err);
}
.lead-card {
    background: var(--n-0);
    border: var(--bw) solid var(--ink);
    border-radius: var(--r-2);
    padding: var(--sp-5);
    box-shadow: var(--sh-2);
}
.lead-card h3 {
    margin-bottom: var(--sp-1);
}
.lead-card .sub {
    font-size: var(--t-sm);
    color: var(--ink-soft);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: var(--bw) solid var(--line);
}
.lead-card .btn {
    width: 100%;
}
.fine-print {
    font-size: var(--t-xs);
    color: var(--ink-soft);
    text-align: center;
    margin-top: var(--sp-3);
    line-height: 1.5;
}

/* ---------------- split ---------------- */
.split {
    display: grid;
    gap: var(--stack);
    align-items: center;
}
.split .media {
    overflow: hidden;
    border-radius: var(--r-2);
    aspect-ratio: 4/3;
    background: var(--paper-2);
}
.split .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--d-3) var(--ease);
}
.split .media:hover img {
    transform: scale(1.03);
}
.check-list {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}
.check-list li {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--t-sm);
    font-weight: 500;
}
.check-list li svg {
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    color: var(--ok);
}
.dark .check-list li svg,
.page-hero .check-list li svg {
    color: var(--honey);
}

/* ---------------- coffee / supplies ---------------- */
.coffee {
    display: grid;
    gap: var(--sp-5);
    align-items: stretch;
}
.coffee .panel {
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--r-2);
    padding: var(--sp-6) var(--sp-5);
}
.coffee .panel h3 {
    color: #fff;
    margin-bottom: var(--sp-3);
}
.coffee .panel > p {
    color: var(--on-dark-soft);
    font-size: var(--t-sm);
}
.coffee .row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--bw) solid var(--line-ink);
}
.coffee .row .ic {
    grid-row: 1 / span 2;
    color: var(--honey);
}
.coffee .row b {
    display: block;
    color: #fff;
    font-size: var(--t-sm);
}
.coffee .row span {
    font-size: var(--t-xs);
    color: var(--on-dark-soft);
}
.supplies {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(2, 1fr);
}
.supply {
    background: var(--n-0);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-2);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    transition: border-color var(--d-2) var(--ease);
}
.supply:hover {
    border-color: var(--ink);
}
.supply .ic {
    display: flex;
    justify-content: center;
    color: var(--brand);
    margin-bottom: var(--sp-3);
}
.supply b {
    display: block;
    font-size: var(--t-sm);
}
.supply span {
    font-size: var(--t-xs);
    color: var(--ink-soft);
}

/* ---------------- SLA ---------------- */
.sla {
    display: grid;
    gap: 0;
    border-top: var(--bw) solid var(--line-ink);
}
.sla .item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-4);
    align-items: center;
    padding-block: var(--sp-5);
    border-bottom: var(--bw) solid var(--line-ink);
}
.sla .item .ic {
    grid-row: 1 / span 2;
}
.sla .item .ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: var(--bw) solid rgba(246, 166, 9, 0.4);
    border-radius: var(--r-1);
    color: var(--honey);
}
.sla .item b {
    display: block;
    color: #fff;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}
.sla .item span {
    font-size: var(--t-sm);
    color: var(--on-dark-soft);
}

/* ---------------- CTA banner ---------------- */
.cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--r-2);
    padding: var(--sp-7) var(--sp-5);
}
.cta-banner .bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cta-banner .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}
.cta-banner .bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 17, 13, 0.9), rgba(22, 17, 13, 0.78));
}
.cta-banner .inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sp-6);
    align-items: center;
}
.cta-banner h2 {
    color: #fff;
    margin-bottom: var(--sp-3);
}
.cta-banner p {
    color: var(--on-dark-soft);
    max-width: 52ch;
}

/* ---------------- footer ---------------- */
.site-footer {
    background: var(--n-950);
    color: var(--on-dark-faint);
    padding-block: var(--sp-7) calc(var(--sp-5) + env(safe-area-inset-bottom));
}
.foot-grid {
    display: grid;
    gap: var(--sp-6);
}
.site-footer .brand {
    color: var(--honey);
    margin-bottom: var(--sp-3);
}
.site-footer .brand .bean {
    background: var(--honey);
    --bean-split: var(--n-950);
}
.site-footer p {
    font-size: var(--t-sm);
    line-height: var(--lh-loose);
    max-width: 34ch;
    margin-bottom: var(--sp-4);
}
.site-footer h4 {
    color: #fff;
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: var(--bw) solid rgba(255, 255, 255, 0.12);
}
.site-footer a:not(.soc a) {
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: var(--t-sm);
    color: var(--on-dark-faint);
    transition: color var(--d-1) var(--ease);
}
.site-footer a:hover {
    color: var(--honey);
}
.soc {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.soc a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: var(--bw) solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-1);
    color: var(--on-dark-soft);
    transition:
        background var(--d-2) var(--ease),
        color var(--d-2) var(--ease),
        border-color var(--d-2) var(--ease);
}
.soc a:hover {
    background: var(--honey);
    border-color: var(--honey);
    color: var(--ink);
}
.soc svg {
    width: 18px;
    height: 18px;
}
.legal {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: var(--bw) solid rgba(255, 255, 255, 0.12);
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--on-dark-faint);
}
.copy {
    margin-top: var(--sp-3);
    font-size: var(--t-xs);
    color: var(--on-dark-faint);
}

/* ---------------- FAB ---------------- */
.fab {
    position: fixed;
    z-index: var(--z-fab);
    display: flex;
    gap: var(--sp-2);
    right: max(var(--sp-3), env(safe-area-inset-right));
    bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}
.fab a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--r-2);
    background: var(--ink);
    color: var(--honey);
    box-shadow: var(--sh-2);
    transition:
        background var(--d-2) var(--ease),
        color var(--d-2) var(--ease);
}
.fab a:hover {
    background: var(--brand-strong);
    color: #fff;
}
.fab a[href^="tel:"] {
    display: none;
}
@media (min-width: 1024px) {
    .fab a[href^="tel:"] {
        display: flex;
    }
}
.fab svg {
    width: 22px;
    height: 22px;
}

/* ---------------- focus + reveal ---------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-1);
}
.dark a:focus-visible,
.dark button:focus-visible,
.hero a:focus-visible,
.calc input:focus-visible,
.site-footer a:focus-visible,
.page-hero a:focus-visible {
    outline-color: var(--honey);
}
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--d-3) var(--ease),
        transform var(--d-3) var(--ease);
}
.js .reveal.in {
    opacity: 1;
    transform: none;
}

/* ============================================================
   ≥480px
   ============================================================ */
@media (min-width: 480px) {
    .hero-cta {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
    }
    .supplies {
        gap: var(--sp-4);
    }
    .g-2,
    .g-3,
    .g-4,
    .auto {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid {
        gap: var(--sp-5);
    }
}

/* ============================================================
   ≥768px  — tablets: two-column editorial rhythm
   ============================================================ */
@media (min-width: 768px) {
    .flow {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border-bottom: var(--bw) solid var(--line);
    }
    .flow .node {
        padding: var(--sp-5);
        border-bottom: 0;
        border-right: var(--bw) solid var(--line);
    }
    .flow .node:last-child {
        border-right: 0;
    }
    .flow .node .ic {
        top: var(--sp-5);
        right: var(--sp-5);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        border-bottom: var(--bw) solid var(--line);
    }
    .step {
        padding: var(--sp-5) var(--sp-5) var(--sp-5) 60px;
        border-right: var(--bw) solid var(--line);
    }
    .step .num {
        left: var(--sp-4);
    }
    .step:nth-child(2n) {
        border-right: 0;
    }

    .cat,
    .cases,
    .reviews,
    .tariffs {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5);
    }
    .vs,
    .terms,
    .coffee {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
    }
    .team {
        grid-template-columns: repeat(4, 1fr);
    }
    .split {
        grid-template-columns: 1fr 1fr;
    }
    .split .media {
        order: -1;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--sp-6);
    }
    .sla {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--sp-6);
    }
    .sla .item {
        padding-inline: 0;
    }

    .calc {
        grid-template-columns: 1.05fr 0.95fr;
    }
    .calc-l {
        padding: var(--sp-7) var(--sp-6);
    }
    .calc-r {
        padding: var(--sp-7) var(--sp-6);
        border-top: 0;
        border-left: var(--bw) solid var(--line-ink);
    }

    .cta-banner {
        padding: var(--sp-8) var(--sp-7);
    }
    .cta-banner .inner {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--sp-7);
    }

    .note-bar {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
        padding: var(--sp-5) var(--sp-6);
    }
    .foot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-7) var(--sp-6);
    }
    .hero-inner {
        padding-block: var(--sp-9) var(--sp-8);
    }
    .hero h1 {
        font-size: clamp(2.6rem, 5.6vw, 4rem);
    }
    .hero h1,
    .hero-sub,
    .hero-points {
        max-width: calc(100% - 250px);
    }
    .hero-points {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4) var(--sp-5);
    }
    .lead-card,
    .vs-card,
    .tariff,
    .terms-col,
    .card,
    .review,
    .coffee .panel {
        padding: var(--sp-6);
    }
    .page-hero .inner {
        padding-bottom: var(--sp-8);
    }
}

/* ============================================================
   ≥1024px — desktop navigation + 3/4-up grids
   ============================================================ */
@media (min-width: 1024px) {
    .nav {
        min-height: 76px;
        gap: var(--sp-6);
    }
    .brand {
        font-size: 1.5rem;
    }
    .nav-menu {
        display: flex;
        gap: var(--sp-4);
        margin-left: var(--sp-2);
        font-size: 0.9rem;
        font-weight: 600;
    }
    .nav-menu a {
        position: relative;
        padding-block: var(--sp-2);
        color: var(--ink);
        white-space: nowrap;
        transition: color var(--d-1) var(--ease);
    }
    .nav-menu a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: 0;
        height: 2px;
        background: var(--brand);
        transition: right var(--d-2) var(--ease);
    }
    .nav-menu a:hover,
    .nav-menu a[aria-current="page"] {
        color: var(--brand-ink);
    }
    .nav-menu a:hover::after,
    .nav-menu a[aria-current="page"]::after {
        right: 0;
    }
    .nav-phone {
        display: none;
    }
    .site-header .nav-right {
        gap: var(--sp-4);
    }
    .site-header .nav-right .btn {
        display: inline-flex;
        min-height: 44px;
        padding: var(--sp-3) var(--sp-4);
        font-size: 0.95rem;
    }
    .burger,
    .nav-call {
        display: none;
    }

    .g-3,
    .cat,
    .cases,
    .reviews,
    .tariffs {
        grid-template-columns: repeat(3, 1fr);
    }
    .g-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .steps {
        grid-template-columns: repeat(4, 1fr);
    }
    .step:nth-child(2n) {
        border-right: var(--bw) solid var(--line);
    }
    .step:last-child {
        border-right: 0;
    }
    .steps.steps-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .steps.steps-3 .step:nth-child(3n) {
        border-right: 0;
    }
    .stats,
    .sla {
        grid-template-columns: repeat(4, 1fr);
    }
    .sla .item {
        grid-template-columns: 1fr;
        row-gap: var(--sp-1);
    }
    .sla .item .ic {
        grid-row: auto;
        margin-bottom: var(--sp-3);
    }
    .foot-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    }
    .split {
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--sp-8);
    }
    .split .media {
        order: 0;
    }
    .hero-inner {
        padding-block: var(--sp-10) var(--sp-9);
    }
    .hero h1 {
        font-size: clamp(3.4rem, 6vw, 4.6rem);
    }
    .hero-points {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   ≥1280px
   ============================================================ */
@media (min-width: 1280px) {
    .nav-menu {
        gap: var(--sp-5);
        margin-left: var(--sp-4);
        font-size: 0.95rem;
    }
    .nav-phone {
        display: block;
        font-family: var(--mono);
        font-weight: 700;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    .hero h1 {
        font-size: 5.2rem;
    }
    .hero h1,
    .hero-sub,
    .hero-points {
        max-width: calc(100% - 380px);
    }
    .flow .node {
        padding: var(--sp-6);
    }
    .flow .node .ic {
        right: var(--sp-6);
        top: var(--sp-6);
    }
    .step {
        padding: var(--sp-6) var(--sp-6) var(--sp-6) 68px;
    }
    .step .num {
        left: var(--sp-5);
        top: var(--sp-6);
    }
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    .js .reveal {
        opacity: 1;
        transform: none;
    }
    .hero h1,
    .hero-sub,
    .hero-cta,
    .hero-points {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ============================================================
   print
   ============================================================ */
@media print {
    .site-header,
    .drawer,
    .fab,
    .hero-media,
    .page-hero .bg {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }
    .dark,
    .hero,
    .page-hero,
    .calc,
    .note-bar,
    .cta-banner,
    .site-footer {
        background: #fff !important;
        color: #000 !important;
    }
    .dark h1,
    .dark h2,
    .dark h3,
    .hero h1,
    .page-hero h1 {
        color: #000 !important;
    }
}