:root {
  --ink: #121212;
  --paper: #f4f0e8;
  --orange: #ff5c35;
  --lime: #c7e84b;
  --blue: #8dbcf8;
  --muted: #716d67;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.grain { position: fixed; inset: 0; opacity: .045; pointer-events: none; z-index: 8; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.site-header, main, footer { max-width: 1320px; margin: auto; }
.site-header { height: 86px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9d4cb; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.06em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ink); font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: -2px; }
nav { display: flex; gap: 30px; color: #494641; font-size: 13px; font-weight: 700; }
nav a:hover, footer a:hover { color: var(--orange); }
.cart-button { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 10px 14px; border-radius: 22px; font-size: 12px; font-weight: 800; }
.cart-button span { padding-left: 5px; color: var(--orange); }

.hero { min-height: 655px; padding: 92px 8.5% 68px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 36px; overflow: hidden; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #5f5b55; font-family: "DM Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.eyebrow span { width: 7px; height: 7px; display: inline-block; background: var(--orange); border-radius: 50%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.075em; line-height: .98; }
h1 { margin-bottom: 26px; font-size: clamp(52px, 6.3vw, 88px); font-weight: 800; }
h1 em, h2 em { font-weight: 500; font-family: Georgia, serif; }
.hero-text { max-width: 490px; color: var(--muted); line-height: 1.75; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 20px; border-radius: 3px; font-size: 13px; font-weight: 800; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { gap: 26px; color: white; background: var(--ink); }
.button-primary span { color: var(--lime); font-size: 18px; }.button-quiet { border: 1px solid #c8c1b7; }
.trust-row { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 58px; }
.trust-row div { display: grid; gap: 3px; }.trust-row strong { font-size: 17px; letter-spacing: -.05em; }.trust-row span { color: #77726b; font-size: 10px; font-weight: 700; }

.hero-art { position: relative; width: min(100%, 485px); aspect-ratio: 1; margin-left: auto; border-radius: 50%; background: #e4ddd0; isolation: isolate; overflow: hidden; }
.orb { position: absolute; display: grid; place-items: center; border-radius: 50%; }.orb-main { width: 57%; aspect-ratio: 1; inset: 0; margin: auto; z-index: 2; color: #161616; background: var(--orange); box-shadow: inset -19px -15px 0 rgba(0,0,0,.08); }.orb-main span { font: 800 clamp(54px, 7vw, 94px) "DM Mono", monospace; letter-spacing: -13px; transform: translateX(-5px); }
.orbit { position: absolute; border: 1px solid rgba(18,18,18,.35); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-26deg); }.orbit-one { width: 92%; height: 33%; }.orbit-two { width: 91%; height: 66%; transform: translate(-50%,-50%) rotate(53deg); }
.signal { position: absolute; z-index: 3; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #171717; font: 11px "DM Mono", monospace; }.signal-one { top: 20%; right: 12%; width: 38px; height: 38px; }.signal-two { bottom: 15%; left: 15%; width: 33px; height: 33px; color: #191919; background: var(--lime); font-size: 16px; }
.floating-card { position: absolute; z-index: 4; padding: 15px 17px; background: #f9f6ef; box-shadow: 0 13px 35px rgba(35,27,19,.15); }.card-top { left: 0; top: 29%; transform: rotate(-4deg); }.card-top small { display: block; margin-bottom: 5px; color: #888077; font: 9px "DM Mono", monospace; }.card-top strong { font-size: 13px; line-height: 1.25; }.card-bottom { right: 1%; bottom: 18%; display: flex; gap: 8px; align-items: center; padding: 11px 14px; font-size: 10px; font-weight: 800; }.pulse { width: 7px; height: 7px; border-radius: 50%; background: #57ba62; box-shadow: 0 0 0 4px #d7efd8; }

.solutions { padding: 100px 8.5%; background: #e7e1d7; }.section-heading h2, .catalog h2, .cta h2 { margin-bottom: 37px; font-size: clamp(40px, 5vw, 65px); }.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.solution-card { min-height: 275px; padding: 23px; position: relative; border-right: 1px solid rgba(0,0,0,.35); }.solution-card:last-child { border: 0; }.solution-no { color: rgba(0,0,0,.5); font: 11px "DM Mono", monospace; }.solution-icon { display: block; margin: 51px 0 31px; font-size: 42px; font-weight: 500; }.solution-card h3 { margin-bottom: 10px; font-size: 17px; letter-spacing: -.04em; }.solution-card p { max-width: 220px; margin: 0; font-size: 12px; line-height: 1.55; }.orange { background: var(--orange); }.lime { background: var(--lime); }.blue { background: var(--blue); }.dark { color: #fff; background: var(--ink); }.dark .solution-no { color: #aaa; }

.catalog { padding: 116px 8.5%; }.catalog-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; }.catalog-top > p { max-width: 310px; color: var(--muted); font-size: 13px; line-height: 1.7; }.filters { display: flex; gap: 9px; overflow-x: auto; padding: 7px 0 36px; }.filter { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #c9c3b8; border-radius: 20px; background: transparent; color: #625e57; font-size: 11px; font-weight: 800; }.filter span { margin-left: 5px; color: #99938b; }.filter.active { color: #fff; background: var(--ink); border-color: var(--ink); }.filter.active span { color: var(--lime); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.product { min-height: 365px; display: flex; flex-direction: column; padding: 18px; background: #fffdf8; border: 1px solid #e2dcd2; }.product-top { display: flex; align-items: flex-start; justify-content: space-between; }.product-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%; font-size: 23px; }.product-tag { padding: 6px 8px; color: #625e57; border: 1px solid #ded7cb; border-radius: 15px; font: 9px "DM Mono", monospace; }.product h3 { margin: auto 0 10px; font-size: 20px; letter-spacing: -.055em; }.product p { min-height: 57px; margin-bottom: 18px; color: var(--muted); font-size: 11px; line-height: 1.65; }.product-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid #e5ded4; }.price small { display: block; margin-bottom: 2px; color: #89837b; font-size: 9px; }.price strong { font-size: 14px; letter-spacing: -.04em; }.add { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border: 0; border-radius: 50%; background: var(--ink); font-size: 20px; }

.process { display: grid; grid-template-columns: .9fr 1.1fr; padding: 100px 8.5%; color: white; background: var(--ink); }.light { color: #9e9e9e; }.light span { background: var(--lime); }.process h2 { font-size: clamp(42px, 5.1vw, 66px); }.process-intro > p:last-child { max-width: 380px; color: #b7b5b1; line-height: 1.75; font-size: 13px; }.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }.steps li { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 27px 0; border-top: 1px solid #4a4a4a; }.steps li:last-child { border-bottom: 1px solid #4a4a4a; }.steps span { color: var(--lime); font: 13px "DM Mono", monospace; }.steps h3 { margin-bottom: 8px; font-size: 19px; letter-spacing: -.05em; }.steps p { max-width: 350px; margin: 0; color: #b7b5b1; font-size: 12px; line-height: 1.6; }
.cta { padding: 130px 8.5%; text-align: center; }.cta .eyebrow { justify-content: center; }.cta h2 { margin-bottom: 32px; }.cta .button { margin: auto; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 27px 30px; border-top: 1px solid #d9d4cb; color: #77726b; font-size: 11px; } footer .brand { color: var(--ink); }

dialog { width: min(520px, calc(100% - 30px)); padding: 0; color: var(--ink); border: 0; background: #fdfaf4; box-shadow: 0 25px 90px rgba(0,0,0,.28); }.dialog-close { position: absolute; top: 13px; right: 15px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eee8dd; font-size: 22px; }.dialog-body { padding: 42px; }.dialog-body h2 { margin-bottom: 10px; font-size: 32px; letter-spacing: -.06em; }.dialog-body > p { color: var(--muted); font-size: 13px; line-height: 1.6; }.order-summary { margin: 25px 0; padding: 15px; background: #e9e3d9; }.order-summary span { display: block; color: #746e66; font-size: 10px; }.order-summary strong { display: block; margin-top: 4px; font-size: 16px; }.order-form { display: grid; gap: 13px; }.order-form label { display: grid; gap: 7px; font-size: 11px; font-weight: 800; }.order-form input { padding: 13px; border: 1px solid #cfc7bb; background: #fffdf8; }.notice { padding: 13px; color: #30592f; background: #dcefcf; font-size: 12px; line-height: 1.55; }

@media (max-width: 800px) { .site-header { height: 70px; padding: 0 18px; } nav { display: none; }.hero { min-height: auto; padding: 65px 7% 75px; grid-template-columns: 1fr; }.hero-art { width: min(100%, 420px); margin: 12px auto 0; }.solutions, .catalog, .process, .cta { padding: 75px 7%; }.solution-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }.solution-card { border-bottom: 1px solid rgba(0,0,0,.35); }.solution-card:nth-child(2) { border-right: 0; }.catalog-top, .process { display: block; }.catalog-top > p { margin-bottom: 25px; }.process-intro { margin-bottom: 45px; } footer { padding: 24px 18px; flex-wrap: wrap; } }
@media (max-width: 480px) { h1 { font-size: 51px; }.hero { padding-top: 52px; }.trust-row { gap: 16px; }.solution-grid, .product-grid { grid-template-columns: 1fr; }.solution-card { border-right: 0; }.product { min-height: 310px; }.card-top { left: -4%; }.dialog-body { padding: 35px 22px; } footer p { order: 3; width: 100%; } }