:root {
  --paper: #f6f3ea;
  --white: #fffefa;
  --ink: #20221f;
  --muted: #6d7069;
  --line: #d9d6cc;
  --orange: #ed5b2a;
  --orange-dark: #cf4014;
  --green: #65ba75;
  --font: "Avenir Next", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site-header { position: sticky; top: 0; z-index: 20; display: grid; height: 72px; padding: 0 clamp(24px, 5vw, 78px); grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgb(217 214 204 / 85%); background: rgb(246 243 234 / 90%); backdrop-filter: blur(18px); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.035em; }
.wordmark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wordmark .accent { stroke: var(--orange); stroke-width: 3; }
.site-header nav { display: flex; gap: 30px; color: #5f625c; font-size: 12px; font-weight: 600; }
.site-header nav a:hover { color: var(--orange-dark); }
.site-header > .button { justify-self: end; }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid #c8c5bb; border-radius: 7px; background: var(--white); font-size: 12px; font-weight: 700; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-small { min-height: 36px; padding: 0 15px; }
.button-primary { border-color: var(--orange); color: white; background: var(--orange); box-shadow: 0 8px 24px rgb(237 91 42 / 22%); }
.button-primary:hover { background: var(--orange-dark); }

.hero { position: relative; display: grid; min-height: 680px; padding: 100px clamp(24px, 7vw, 112px) 160px; grid-template-columns: minmax(0, 650px) 1fr; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(58px, 7vw, 104px); font-weight: 650; letter-spacing: -.07em; line-height: .94; }
.hero p { max-width: 590px; margin: 35px 0 28px; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.text-link { font-size: 13px; font-weight: 700; }
.requirements { margin-top: 19px; color: #8b8d86; font-size: 11px; letter-spacing: .025em; }
.hero-mark { position: absolute; top: 40px; right: -80px; width: min(48vw, 650px); aspect-ratio: 1; }
.hero-mark svg { position: absolute; inset: 24%; width: 52%; height: 52%; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-mark svg .accent { stroke: var(--orange); stroke-width: 5; }
.ring { position: absolute; border: 1px solid #d5d1c5; border-radius: 50%; }
.ring-one { inset: 7%; }
.ring-two { inset: 19%; border-style: dashed; animation: rotate 24s linear infinite; }

.product-stage { position: relative; margin: -95px clamp(18px, 4vw, 64px) 0; padding: clamp(26px, 4vw, 58px); border-radius: 16px; background: #21231f; box-shadow: 0 40px 100px rgb(42 39 31 / 22%); }
.product-stage::before { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 20% 20%, rgb(237 91 42 / 11%), transparent 35%); content: ""; pointer-events: none; }
.product-stage img { position: relative; display: block; width: 100%; border: 1px solid #595b56; border-radius: 8px; box-shadow: 0 18px 60px rgb(0 0 0 / 42%); }
.stage-note { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #d4d6cf; font-size: 11px; letter-spacing: .03em; }
.stage-note span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

.statement { padding: 150px clamp(24px, 8vw, 130px) 80px; }
.statement p { margin: 0 0 22px; color: var(--orange-dark); font-size: 13px; font-weight: 700; }
.statement h2 { max-width: 980px; margin: 0; font-size: clamp(42px, 6vw, 84px); font-weight: 600; letter-spacing: -.06em; line-height: 1.02; }

.workflow-grid { display: grid; margin: 0 clamp(24px, 8vw, 130px) 140px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.workflow-grid article { min-height: 320px; padding: 26px 38px 40px 0; border-right: 1px solid var(--line); }
.workflow-grid article + article { padding-left: 38px; }
.workflow-grid article:last-child { border-right: 0; }
.step { color: var(--orange); font-family: "SFMono-Regular", monospace; font-size: 11px; }
.workflow-grid h3 { margin: 82px 0 14px; font-size: 20px; letter-spacing: -.03em; }
.workflow-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.security-band { display: grid; padding: 110px clamp(24px, 8vw, 130px); grid-template-columns: 1.1fr .9fr; gap: 100px; color: #f4f2ea; background: var(--ink); }
.security-band h2 { max-width: 620px; margin: 0 0 24px; font-size: clamp(43px, 5vw, 74px); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.security-band p { max-width: 610px; margin: 0; color: #b8bbb3; font-size: 16px; line-height: 1.7; }
.security-band dl { margin: 0; border-top: 1px solid #4a4c47; }
.security-band dl div { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #4a4c47; }
.security-band dt { color: #92968e; font-size: 11px; }
.security-band dd { margin: 0; font-family: "SFMono-Regular", monospace; font-size: 11px; }

.compatibility { display: grid; padding: 130px clamp(24px, 8vw, 130px); grid-template-columns: .8fr 1.2fr; gap: 100px; }
.compatibility h2 { margin: 0 0 22px; font-size: clamp(44px, 5vw, 72px); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.compatibility p { max-width: 430px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.operation-list { border-top: 1px solid var(--line); }
.operation-list div { display: grid; min-height: 76px; grid-template-columns: 140px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.operation-list span { color: var(--muted); font-size: 11px; }
.operation-list strong { font-size: 14px; font-weight: 650; }

.final-cta { padding: 110px 24px 125px; text-align: center; border-top: 1px solid var(--line); background: var(--white); }
.final-cta h2 { margin: 0; font-size: clamp(54px, 7vw, 98px); font-weight: 600; letter-spacing: -.07em; }
.final-cta p { margin: 18px 0 30px; color: var(--muted); font-size: 17px; }
footer { display: grid; min-height: 92px; padding: 0 clamp(24px, 5vw, 78px); grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
footer span:last-child { justify-self: end; }

@keyframes rotate { to { transform: rotate(360deg); } }
@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { min-height: auto; padding-top: 85px; padding-bottom: 150px; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(54px, 15vw, 78px); }
  .hero-mark { top: 300px; right: -180px; width: 520px; opacity: .25; }
  .product-stage { margin-top: -80px; padding: 20px; overflow: hidden; }
  .product-stage img { width: 1100px; max-width: none; transform: translateX(-40px); }
  .statement { padding-top: 110px; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-grid article, .workflow-grid article + article { min-height: 240px; padding: 26px 0 38px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workflow-grid h3 { margin-top: 45px; }
  .security-band, .compatibility { grid-template-columns: 1fr; gap: 65px; }
  footer { grid-template-columns: 1fr 1fr; }
  footer span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ring-two { animation: none; } }