:root {
    --ink: #17181d;
    --ink-soft: #4d5059;
    --surface: #f7f7f5;
    --white: #ffffff;
    --line: #deded8;
    --yellow: #ffd338;
    --yellow-deep: #eab900;
    --green: #12805c;
    --shadow: 0 24px 70px rgba(23, 24, 29, .12);
    --radius: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 104px 0; }

.skip-link {
    position: fixed; left: 16px; top: 12px; z-index: 100;
    padding: 10px 16px; color: var(--white); background: var(--ink);
    border-radius: 8px; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #0b63ce; outline-offset: 4px; border-radius: 4px; }

.site-header { position: relative; z-index: 10; background: var(--surface); border-bottom: 1px solid rgba(23, 24, 29, .08); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.brand img, .footer-brand img { border-radius: 12px; box-shadow: 0 5px 15px rgba(23,24,29,.15); }
.brand strong { color: #7d5d00; }
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: .91rem; font-weight: 650; }
.site-header nav a:not(.nav-cta):hover { color: #705400; }
.nav-cta { padding: 11px 17px; background: var(--ink); color: var(--white); border-radius: 10px; }
.nav-cta:hover { background: #31333b; }

.hero { position: relative; overflow: hidden; background: var(--surface); padding: 82px 0 98px; }
.hero::before {
    content: ""; position: absolute; width: 440px; height: 440px; right: -170px; top: -260px;
    background: var(--yellow); border-radius: 50%; opacity: .72;
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow {
    display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #705400;
    font-size: .75rem; line-height: 1.2; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow > span { width: 28px; height: 3px; background: var(--yellow-deep); border-radius: 9px; }
.hero h1 { margin-bottom: 24px; font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1.03; letter-spacing: -.065em; max-width: 720px; }
.hero h1 em { color: #755800; font-style: normal; }
.hero-lead { max-width: 610px; margin-bottom: 24px; color: var(--ink-soft); font-size: clamp(1.04rem, 2vw, 1.22rem); line-height: 1.7; }
.trust-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; color: var(--ink-soft); font-size: .95rem; }
.trust-line svg { width: 22px; height: 22px; margin-right: 4px; padding: 4px; color: var(--white); background: var(--green); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 3; }
.trust-line strong { color: var(--ink); }
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-button {
    min-width: 178px; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
    padding: 11px 16px; color: var(--white); background: var(--ink); border: 1px solid var(--ink);
    border-radius: 12px; transition: transform .2s ease, background-color .2s ease;
}
.store-button:hover { transform: translateY(-2px); background: #2e3037; }
.store-button svg { width: 27px; height: 27px; fill: currentColor; }
.store-button span { display: flex; flex-direction: column; font-size: 1.03rem; font-weight: 720; line-height: 1.08; }
.store-button small { margin-bottom: 4px; font-size: .66rem; font-weight: 500; letter-spacing: .03em; }

.hero-visual { position: relative; z-index: 1; }
.visual-card { position: relative; padding: 24px; background: var(--white); border: 1px solid #e1e1db; border-radius: 28px; box-shadow: var(--shadow); transform: rotate(1deg); }
.visual-topline { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
.visual-topline img { border-radius: 18px; }
.visual-topline div { display: flex; flex-direction: column; }
.visual-topline strong { font-size: .94rem; }
.visual-topline span { color: var(--ink-soft); font-size: .77rem; }
.inventory-illustration { width: 100%; aspect-ratio: 1120/635; object-fit: contain; }
.visual-steps { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px 2px; color: var(--ink-soft); font-size: .72rem; font-weight: 700; }
.visual-steps span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.visual-steps b { width: 22px; height: 22px; display: inline-grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 50%; }
.visual-steps i { flex: 1; height: 1px; background: var(--line); }
.floating-note { position: absolute; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 12px 28px rgba(23,24,29,.13); font-size: .76rem; font-weight: 750; }
.floating-note span { width: 24px; height: 24px; display: grid; place-items: center; color: var(--white); background: var(--green); border-radius: 7px; }
.note-top { top: 13%; right: -7%; }
.note-bottom { left: -8%; bottom: 17%; }
.note-bottom span { color: var(--ink); background: var(--yellow); }

.section-heading { max-width: 650px; margin-bottom: 54px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2, .final-cta h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.12; letter-spacing: -.05em; }
.section-heading > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 1.04rem; }

.workflow { background: var(--white); }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.workflow-grid li { position: relative; min-height: 270px; padding: 30px; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); }
.workflow-grid li:hover { border-color: #d7d7d0; }
.step-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 42px; color: var(--ink); background: var(--yellow); border-radius: 16px; }
.step-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-number { position: absolute; top: 30px; right: 30px; color: #777972; font-size: .76rem; font-weight: 800; letter-spacing: .08em; }
.workflow-grid h3 { margin-bottom: 8px; font-size: 1.32rem; letter-spacing: -.025em; }
.workflow-grid p { margin-bottom: 0; color: var(--ink-soft); }

.pricing { background: var(--surface); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; }
.price-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.price-card.featured { border: 2px solid var(--ink); box-shadow: 0 18px 48px rgba(23,24,29,.1); }
.price-badge { position: absolute; right: 20px; top: -15px; margin: 0; padding: 6px 12px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 99px; font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.price-card-heading { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.price-card h3 { margin-bottom: 12px; color: var(--ink-soft); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; margin: 0; font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.price > span { align-self: flex-start; margin: 4px 3px 0 0; font-size: .84rem; letter-spacing: 0; }
.price small { margin-left: 7px; color: var(--ink-soft); font-size: .82rem; font-weight: 600; letter-spacing: 0; }
.capacity { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.capacity p { margin: 0; }
.capacity strong, .capacity span { display: block; }
.capacity strong { font-size: 1.34rem; letter-spacing: -.04em; }
.capacity span { color: var(--ink-soft); font-size: .72rem; }
.price-card ul { flex: 1; margin: 24px 0 28px; padding: 0; list-style: none; }
.price-card li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 13px; color: var(--ink-soft); font-size: .89rem; }
.price-card li svg { flex: 0 0 20px; width: 20px; height: 20px; padding: 3px; color: var(--green); background: #e6f5ef; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.4; }
.plan-button { display: block; padding: 12px 15px; text-align: center; background: var(--surface); border: 1px solid #c7c7c0; border-radius: 10px; font-size: .9rem; font-weight: 750; }
.plan-button:hover { background: var(--yellow); border-color: var(--yellow-deep); }
.featured .plan-button { background: var(--ink); border-color: var(--ink); color: var(--white); }
.featured .plan-button:hover { background: #33353c; }
.pricing-note { max-width: 820px; margin: 24px auto 0; color: #5e6068; font-size: .76rem; text-align: center; }

.final-cta { padding: 76px 0; color: var(--white); background: var(--ink); }
.final-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.final-cta .eyebrow { color: #ffe996; }
.final-cta h2 { max-width: 700px; margin-bottom: 10px; }
.final-cta p:not(.eyebrow) { margin: 0; color: #c9cbd1; }
.store-button.light { color: var(--ink); background: var(--white); border-color: var(--white); }
.store-button.light:hover { background: var(--yellow); border-color: var(--yellow); }

.site-footer { padding: 34px 0; background: #101115; color: #cfd0d4; border-top: 1px solid #303138; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 34px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand div { display: flex; flex-direction: column; }
.footer-brand strong { color: var(--white); font-size: .9rem; }
.footer-brand span { color: #9d9fa7; font-size: .76rem; }
.footer-brand a, .site-footer nav a:hover { color: #ffe078; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: .76rem; }
.copyright { margin: 0; color: #858790; font-size: .72rem; white-space: nowrap; }

@media (max-width: 920px) {
    .hero-grid { grid-template-columns: 1fr; gap: 58px; }
    .hero-copy { max-width: 720px; }
    .hero-visual { width: min(620px, 94%); margin-inline: auto; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
    .price-card { padding: 28px; }
    .final-cta-inner { grid-template-columns: 1fr; gap: 28px; }
    .footer-grid { grid-template-columns: 1fr auto; }
    .copyright { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .container { width: min(100% - 28px, 620px); }
    .section { padding: 76px 0; }
    .header-inner { min-height: 70px; }
    .site-header nav a:not(.nav-cta) { display: none; }
    .nav-cta { padding: 9px 12px; font-size: .78rem; }
    .brand span { font-size: .9rem; }
    .brand img { width: 38px; height: 38px; }
    .hero { padding: 60px 0 72px; }
    .hero h1 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
    .hero-lead { font-size: 1rem; }
    .store-buttons { flex-direction: column; align-items: stretch; }
    .store-button { width: 100%; }
    .hero-visual { width: 100%; }
    .visual-card { padding: 17px; border-radius: 20px; }
    .visual-topline img { width: 54px; height: 54px; }
    .floating-note { display: none; }
    .visual-steps { gap: 5px; font-size: .61rem; }
    .visual-steps b { width: 19px; height: 19px; }
    .workflow-grid { grid-template-columns: 1fr; }
    .workflow-grid li { min-height: 220px; }
    .step-icon { margin-bottom: 28px; }
    .section-heading { margin-bottom: 38px; }
    .section-heading.centered { text-align: left; }
    .section-heading.centered .eyebrow { justify-content: flex-start; }
    .capacity { gap: 8px; }
    .final-cta { padding: 62px 0; }
    .footer-grid { grid-template-columns: 1fr; }
    .site-footer nav { flex-direction: column; gap: 10px; }
    .copyright { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}