:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #717876;
  --line: #dcd8cf;
  --paper: #f4f1ea;
  --panel: #fffdf8;
  --accent: #dd6048;
  --accent-dark: #bd4835;
  --green: #dfeadd;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.site-shell { max-width: 1540px; margin: 0 auto; padding: 0 34px; }

.site-nav { height: 94px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px 12px 12px 3px; background: var(--ink); color: #fff; font-size: 18px; font-weight: 800; }
.brand strong { display: block; font-size: 18px; letter-spacing: -.04em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font: 600 8px/1 var(--font-mono); letter-spacing: .08em; }
.nav-links { display: flex; gap: 31px; margin-left: auto; margin-right: 34px; }
.nav-links a { color: var(--muted); font-size: 12px; font-weight: 700; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.language-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); }
.language-switch button { min-width: 37px; height: 27px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 10px/1 var(--font-mono); }
.language-switch button.active { background: var(--ink); color: #fff; }
.nav-cta { min-height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 800; transition: .2s; }
.nav-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }

.hero-section { min-height: 710px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 5vw; padding: 74px 2vw 80px; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font: 700 10px/1 var(--font-mono); letter-spacing: .14em; }
.eyebrow.light { color: #f4b9a9; }
.hero-copy h1 { margin: 0 0 24px; font-size: clamp(54px, 6.4vw, 94px); line-height: .92; letter-spacing: -.075em; font-weight: 800; }
.hero-copy h1 em { color: var(--accent); font-style: normal; }
.hero-description { max-width: 580px; margin: 0 0 31px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.primary-cta { min-width: 174px; min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 18px; border-radius: 12px; color: #fff; background: var(--ink); font-size: 12px; font-weight: 800; box-shadow: 0 13px 30px rgba(23,32,42,.15); transition: .2s; }
.primary-cta:hover { background: var(--accent); transform: translateY(-2px); }
.primary-cta > span:last-child { font-size: 19px; font-weight: 400; }
.text-cta { padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 800; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; color: var(--muted); font-size: 10px; font-weight: 700; }
.trust-row > span { display: flex; align-items: center; gap: 7px; }
.trust-row i { width: 6px; height: 6px; border-radius: 50%; background: #65a36d; box-shadow: 0 0 0 4px rgba(101,163,109,.12); }

.product-visual { position: relative; }
.product-visual::before { content: ''; position: absolute; inset: 13% -2% -7% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(221,96,72,.18), rgba(221,96,72,0) 68%); filter: blur(12px); }
.visual-window { position: relative; overflow: hidden; border: 1px solid #cbc7bd; border-radius: 24px; background: var(--panel); box-shadow: 0 28px 80px rgba(27,34,38,.14); transform: rotate(1.2deg); }
.visual-topbar { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 8px/1 var(--font-mono); letter-spacing: .11em; }
.visual-dots { display: flex; gap: 5px; }
.visual-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dad6cc; }
.local-badge { justify-self: end; padding: 5px 7px; border-radius: 5px; color: #4c7254; background: var(--green); font-size: 7px; }
.visual-body { min-height: 455px; display: grid; grid-template-columns: 150px 1fr; }
.visual-controls { padding: 24px 17px; border-right: 1px solid var(--line); background: #faf8f3; }
.mini-label { display: block; margin: 0 0 7px; color: var(--muted); font: 700 7px/1 var(--font-mono); letter-spacing: .08em; }
.mini-label:not(:first-child) { margin-top: 20px; }
.fake-input { min-height: 31px; display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 7px; font-weight: 800; }
.fake-range { position: relative; height: 3px; margin-top: 13px; border-radius: 3px; background: #d8d4cb; }
.fake-range::before { content: ''; position: absolute; width: 43%; height: 100%; border-radius: inherit; background: var(--accent); }
.fake-range i { position: absolute; left: 41%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translate(-50%,-50%); }
.fake-range.angle::before { width: 32%; }
.fake-range.angle i { left: 32%; }
.fake-button { min-height: 35px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 31px; border-radius: 8px; color: #fff; background: var(--accent); font-size: 7px; font-weight: 800; }
.fake-button span:first-child { font-size: 6px; }
.visual-canvas { display: grid; place-items: center; padding: 31px; background-color: #e8e5de; background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.35) 75%), linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.35) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.sample-card { position: relative; width: min(100%, 390px); aspect-ratio: 4/3; overflow: hidden; padding: 34px; color: #f9f8f3; background: linear-gradient(150deg,#173942,#27655f 58%,#c36a50); box-shadow: 0 18px 38px rgba(20,32,36,.18); }
.sample-card::after { content: ''; position: absolute; right: -20%; bottom: -45%; width: 76%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 37px rgba(255,255,255,.04), 0 0 0 72px rgba(255,255,255,.035); }
.sample-kicker { position: relative; z-index: 2; font: 600 7px/1 var(--font-mono); letter-spacing: .12em; opacity: .65; }
.sample-card strong { position: relative; z-index: 2; display: block; margin-top: 58px; font-size: clamp(27px,3vw,41px); line-height: .9; letter-spacing: -.06em; white-space: pre-line; }
.sample-card small { position: absolute; left: 34px; bottom: 29px; z-index: 2; font-size: 7px; opacity: .65; }
.sample-watermarks { position: absolute; inset: -40%; z-index: 3; display: grid; grid-template-columns: repeat(2,1fr); align-content: center; gap: 44px 22px; transform: rotate(-28deg); color: rgba(255,255,255,.16); font: 800 13px/1 var(--font-sans); white-space: nowrap; }
.sample-card b { position: absolute; right: 12px; bottom: 10px; z-index: 4; padding: 4px 6px; border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.7); font: 700 6px/1 var(--font-mono); letter-spacing: .08em; }

.signal-strip { min-height: 68px; display: flex; align-items: center; justify-content: space-around; gap: 18px; margin: 0 -34px; padding: 0 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font: 700 8px/1 var(--font-mono); letter-spacing: .12em; }
.signal-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

.features-section { padding: 125px 2vw 120px; }
.section-intro { max-width: 750px; margin-bottom: 50px; }
.section-intro h2, .workflow-heading h2, .access-section h2 { margin: 0 0 17px; font-size: clamp(39px,5vw,67px); line-height: .97; letter-spacing: -.065em; }
.section-intro > p:last-child { max-width: 570px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.feature-card { min-height: 420px; display: flex; flex-direction: column; padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.feature-card.feature-dark { color: #f8f6f0; background: var(--ink); border-color: var(--ink); }
.feature-card.feature-accent { color: #fff; background: var(--accent); border-color: var(--accent); }
.feature-number { font: 700 9px/1 var(--font-mono); opacity: .55; }
.feature-card h3 { margin: auto 0 11px; font-size: 20px; letter-spacing: -.04em; }
.feature-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.feature-dark p, .feature-accent p { color: rgba(255,255,255,.62); }
.privacy-graphic, .tile-graphic, .batch-graphic { position: relative; height: 170px; display: grid; place-items: center; margin: 31px 0 10px; }
.privacy-graphic { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.privacy-graphic::before, .privacy-graphic::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.privacy-graphic::before { width: 72%; height: 72%; }
.privacy-graphic::after { width: 42%; height: 42%; }
.privacy-graphic span { font: 700 9px/1 var(--font-mono); letter-spacing: .16em; }
.privacy-graphic i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #8bc393; }
.privacy-graphic i:nth-of-type(1) { top: 22%; left: 24%; }
.privacy-graphic i:nth-of-type(2) { right: 18%; bottom: 31%; }
.tile-graphic { grid-template-columns: 1fr 1fr; gap: 8px; transform: rotate(-19deg); }
.tile-graphic span { padding: 12px 8px; border: 1px solid #d8d3c8; border-radius: 6px; color: rgba(23,32,42,.34); text-align: center; font: 800 11px/1 var(--font-sans); }
.batch-graphic i { position: absolute; width: 124px; height: 86px; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; background: rgba(255,255,255,.08); }
.batch-graphic i:nth-child(1) { transform: translate(-18px,-14px) rotate(-7deg); }
.batch-graphic i:nth-child(2) { transform: translate(16px,-5px) rotate(7deg); }
.batch-graphic i:nth-child(3) { transform: translate(0,18px); background: rgba(255,255,255,.18); }
.batch-graphic b { z-index: 2; display: grid; place-items: center; width: 39px; height: 39px; margin-top: 36px; border-radius: 50%; color: var(--accent); background: #fff; font: 800 11px/1 var(--font-mono); }

.workflow-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; padding: 120px 2vw; border-top: 1px solid var(--line); }
.workflow-heading { align-self: start; position: sticky; top: 35px; }
.workflow-list { margin: 0; padding: 0; list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 37px 0; border-bottom: 1px solid var(--line); }
.workflow-list li:first-child { border-top: 1px solid var(--line); }
.workflow-list > li > span { color: var(--accent); font: 700 10px/1 var(--font-mono); }
.workflow-list h3 { margin: -5px 0 10px; font-size: 24px; letter-spacing: -.045em; }
.workflow-list p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.access-section { display: grid; grid-template-columns: 1fr .8fr; gap: 8vw; margin: 0 0 100px; padding: 76px 6vw; border-radius: 26px; color: #fff; background: var(--ink); }
.access-section h2 { margin-bottom: 0; }
.access-section h2 { white-space: pre-line; }
.access-copy { align-self: center; }
.access-copy > p { margin: 0 0 23px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.75; }
.access-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 28px; }
.access-tags span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.75); font-size: 9px; font-weight: 700; }
.light-cta { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-radius: 10px; color: var(--ink); background: #fff; font-size: 11px; font-weight: 800; transition: .2s; }
.light-cta:hover { background: var(--accent); color: #fff; }

footer { min-height: 120px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); color: var(--muted); }
.footer-brand { justify-self: start; color: var(--ink); }
footer p { justify-self: center; margin: 0; font-size: 10px; }
footer > span { justify-self: end; font: 700 8px/1 var(--font-mono); letter-spacing: .08em; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .hero-section { grid-template-columns: 1fr; padding-top: 65px; }
  .hero-copy { max-width: 760px; }
  .product-visual { max-width: 760px; margin: 0 auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 350px; }
  .workflow-section { grid-template-columns: 1fr; gap: 40px; }
  .workflow-heading { position: static; }
  .access-section { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-shell { padding: 0 18px; }
  .site-nav { height: 78px; }
  .brand small, .nav-cta { display: none; }
  .hero-section { min-height: 0; padding: 55px 0 60px; }
  .hero-copy h1 { font-size: 51px; }
  .hero-description { font-size: 13px; }
  .trust-row { display: grid; }
  .visual-body { grid-template-columns: 105px 1fr; min-height: 355px; }
  .visual-controls { padding: 18px 10px; }
  .visual-canvas { padding: 15px; }
  .sample-card { padding: 22px; }
  .sample-card strong { margin-top: 44px; }
  .sample-card small { left: 22px; bottom: 20px; }
  .signal-strip { margin: 0 -18px; overflow: hidden; justify-content: flex-start; white-space: nowrap; }
  .features-section, .workflow-section { padding: 85px 0; }
  .access-section { margin-bottom: 65px; padding: 46px 25px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { display: none; }
}