:root {
  --ink: #111314;
  --paper: #f4f1ea;
  --line: rgba(17, 19, 20, .16);
  --muted: #706f69;
  --mint: #b7ee88;
  --coral: #ff725e;
  --blue: #9dd8dc;
  --white: #fffdf9;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.page-shell { overflow: hidden; }
.section-pad { padding-left: clamp(24px, 6vw, 96px); padding-right: clamp(24px, 6vw, 96px); }
.site-header { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.brand, .footer-brand { display: flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: -.05em; font-size: 18px; }
.brand-dot { color: var(--coral); }
.brand-mark { display: inline-flex; gap: 3px; align-items: flex-end; height: 18px; }
.brand-mark span { width: 4px; background: var(--ink); display: block; }
.brand-mark span:nth-child(1) { height: 10px; }.brand-mark span:nth-child(2) { height: 16px; }.brand-mark span:nth-child(3) { height: 13px; background: var(--coral); }
.site-nav { display: flex; gap: 34px; margin-left: 100px; font-size: 13px; color: var(--muted); }
.site-nav a, .footer-links a { transition: color .2s ease; }.site-nav a:hover, .footer-links a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 13px; }
.language-picker { position: relative; }
.language-picker::after { content: "⌄"; position: absolute; right: 11px; top: 8px; pointer-events: none; color: var(--muted); font-size: 12px; }
.language-picker select { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; min-width: 112px; height: 34px; padding: 0 28px 0 12px; cursor: pointer; font: 10px var(--mono); transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.language-picker select:hover, .language-picker select:focus { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.header-cta, .button { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; font-weight: 700; font-size: 13px; transition: transform .2s ease, background-color .2s ease; }
.presale-nav-status { display: inline-flex; align-items: center; gap: 7px; color: #5a6a55; font: 9px var(--mono); letter-spacing: .08em; white-space: nowrap; }.presale-nav-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,107,91,.14); }
.header-cta { padding: 11px 16px; border: 1px solid var(--ink); }.header-cta:hover, .button:hover { transform: translateY(-2px); }
.presale-ribbon { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 24px; background: var(--coral); color: var(--ink); font: 10px var(--mono); letter-spacing: .03em; }.presale-ribbon strong { letter-spacing: .1em; }.presale-ribbon a { margin-left: 12px; border-bottom: 1px solid var(--ink); font-weight: 700; }.presale-ribbon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.hero { display: grid; grid-template-columns: minmax(300px, .83fr) minmax(460px, 1.17fr); gap: clamp(40px, 8vw, 130px); align-items: center; padding-top: clamp(64px, 9vw, 125px); padding-bottom: clamp(70px, 9vw, 130px); }
.eyebrow { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; margin: 0 0 25px; text-transform: uppercase; }
.status-dot, .preview-status i, .pulse-dot { width: 7px; height: 7px; display: inline-block; border-radius: 100%; background: #70bd48; margin-right: 8px; box-shadow: 0 0 0 4px rgba(112, 189, 72, .13); }
h1, h2, h3, p { margin-top: 0; } h1, h2 { letter-spacing: -.07em; line-height: .98; font-weight: 800; }
h1 { font-size: clamp(46px, 6vw, 82px); margin-bottom: 29px; }.hero h1 em, .promise-intro h2 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 450px; color: var(--muted); font-size: 16px; line-height: 1.8; }.eyebrow-divider { margin: 0 8px; color: var(--line); }.eyebrow strong { color: var(--coral); font-weight: 700; }
.presale-callout { display: grid; grid-template-columns: 32px 1fr 20px; gap: 12px; align-items: start; max-width: 500px; margin-top: 25px; padding: 15px 17px; border: 1px solid var(--ink); background: var(--mint); box-shadow: 5px 5px 0 var(--ink); }.presale-callout-mark { font: 11px var(--mono); color: var(--coral); }.presale-callout b { display: block; font: 10px var(--mono); letter-spacing: .08em; }.presale-callout p { margin-top: 7px; color: #536451; font-size: 12px; line-height: 1.55; }.presale-arrow { align-self: center; color: var(--coral); font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin: 37px 0 24px; }.button { min-height: 49px; padding: 0 22px; }.button-primary { background: var(--coral); color: var(--ink); }.button-primary:hover { background: #ff806d; }.button-dark { background: var(--ink); color: var(--paper); width: 100%; }.text-link { font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }.text-link span { margin-left: 6px; }
.trust-line { color: var(--muted); font-size: 11px; }.trust-line span { color: #70bd48; font-weight: 800; }
.hero-stage { background: #1a1d1d; color: #f6f3eb; padding: 18px; min-height: 535px; position: relative; box-shadow: 14px 14px 0 #d7d2c8; }.stage-topline, .control-row, .preview-header, .panel-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: #a3a7a2; }.stage-time { color: var(--mint); }.stage-canvas { height: 425px; margin-top: 14px; position: relative; overflow: hidden; background: #343d3a; }.stage-image { position: absolute; inset: 0; background-position: center; background-size: cover; }.stage-image-original { width: 50%; z-index: 2; background-image: url("https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1200&q=85"); filter: saturate(.78) contrast(1.08); }.stage-image-result { background-image: url("https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=1200&q=85"); filter: saturate(1.05) contrast(1.06); }.split-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--mint); z-index: 3; }.split-line span { position: absolute; top: 14px; font: 9px var(--mono); color: var(--mint); background: #1a1d1d; padding: 5px 7px; white-space: nowrap; }.split-line span:first-child { right: 8px; }.split-line span:last-child { left: 8px; }.play-button { position: absolute; z-index: 4; left: calc(50% - 26px); top: calc(50% - 26px); width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: grid; place-items: center; background: rgba(17, 19, 20, .3); }.play-button span { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff; margin-left: 3px; }.scan-label { position: absolute; z-index: 4; bottom: 13px; left: 13px; font: 9px var(--mono); color: #fff; letter-spacing: .08em; }.scan-label .pulse-dot { background: var(--mint); box-shadow: none; margin-right: 5px; }.stage-controls { padding-top: 15px; }.timeline { height: 3px; background: #4b514d; position: relative; }.timeline-progress { display: block; width: 72%; height: 100%; background: var(--mint); }.timeline-handle { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); top: -3px; left: 72%; }.control-row { margin-top: 13px; font-size: 9px; color: #e6e1d6; }.control-divider { width: 1px; height: 13px; background: #555b56; margin-left: auto; }.floating-note { position: absolute; z-index: 8; display: flex; align-items: center; gap: 9px; color: var(--ink); background: var(--mint); padding: 10px 13px; box-shadow: 5px 5px 0 rgba(17,19,20,.27); }.floating-note b, .floating-note small { display: block; }.floating-note b { font-size: 11px; }.floating-note small { font-size: 9px; margin-top: 3px; color: #41523e; }.note-one { top: 120px; right: -26px; }.note-two { bottom: 90px; left: -27px; background: var(--coral); }.note-icon { font-size: 18px; }.note-icon-warm { color: #6b2f27; }
.signal-bar { padding: 23px clamp(24px, 6vw, 96px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }.signal-item { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; font-size: 11px; color: var(--muted); }.signal-item b { grid-column: 2; font-size: 13px; color: var(--ink); margin-top: 5px; }.signal-index { color: var(--coral); font: 11px var(--mono); }
.commitment-strip { display: grid; grid-template-columns: .72fr 1.14fr 1.14fr; gap: 16px; align-items: stretch; padding-top: 46px; padding-bottom: 46px; background: #e8e3d9; border-bottom: 1px solid var(--line); }.commitment-heading { padding: 12px 24px 12px 0; }.commitment-heading .eyebrow { margin-bottom: 18px; }.commitment-heading h2 { font-size: clamp(28px, 3.2vw, 45px); margin: 0; }.commitment-heading h2 em { color: var(--coral); font-style: normal; }.commitment-card { position: relative; min-height: 210px; padding: 24px 28px 23px 62px; border: 1px solid var(--ink); background: var(--white); box-shadow: 6px 6px 0 var(--ink); }.commitment-card-refund { background: var(--coral); box-shadow: 6px 6px 0 var(--ink); }.commitment-number { position: absolute; top: 24px; left: 24px; font: 12px var(--mono); color: var(--coral); }.commitment-card-refund .commitment-number { color: var(--ink); }.commitment-kicker { margin-bottom: 18px; color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }.commitment-card-refund .commitment-kicker { color: #6c3028; }.commitment-card h3 { max-width: 280px; margin-bottom: 13px; font-size: clamp(20px, 2vw, 27px); line-height: 1.05; letter-spacing: -.05em; }.commitment-card p:not(.commitment-kicker) { max-width: 340px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.commitment-card-refund p:not(.commitment-kicker) { color: #5b2a25; }.commitment-mark { position: absolute; right: 20px; bottom: 17px; font-size: 18px; }
.workflow { padding-top: 130px; padding-bottom: 135px; }.section-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8vw; align-items: end; margin-bottom: 65px; }.section-heading .eyebrow { grid-column: 1 / -1; }.section-heading h2 { font-size: clamp(38px, 5vw, 65px); margin: 0; }.section-heading h2 span { color: var(--coral); }.section-heading > p:last-child { color: var(--muted); max-width: 360px; font-size: 14px; line-height: 1.8; margin: 0; }.workflow-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; align-items: start; }.step-list { display: grid; gap: 12px; }.step-card { appearance: none; border: 1px solid var(--line); background: transparent; text-align: left; min-height: 92px; padding: 19px 20px; display: grid; grid-template-columns: 38px 1fr 20px; gap: 12px; align-items: center; cursor: pointer; color: var(--ink); transition: background .2s ease, border-color .2s ease, transform .2s ease; }.step-card:hover { transform: translateX(4px); }.step-card.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }.step-number { font: 11px var(--mono); color: var(--coral); }.step-content b, .step-content small { display: block; }.step-content b { font-size: 15px; }.step-content small { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 5px; }.step-card.is-active .step-content small { color: #a3a7a2; }.step-arrow { font-size: 17px; }.workflow-preview { background: #1a1d1d; color: #f6f3eb; padding: 15px; box-shadow: 11px 11px 0 #d7d2c8; }.preview-header { padding: 3px 2px 14px; }.preview-title { color: #fff; }.preview-status { color: var(--mint); }.preview-status i { margin-right: 4px; width: 5px; height: 5px; box-shadow: none; background: var(--mint); }.preview-body { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 305px; }.preview-visual { background: #39413e center/cover url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=85"); transition: background-image .2s ease; }.preview-panel { border-left: 1px solid #414744; padding: 28px 22px; display: flex; flex-direction: column; }.panel-kicker { font: 9px var(--mono); color: var(--mint); letter-spacing: .09em; margin-bottom: 24px; }.preview-panel h3 { font-size: 23px; letter-spacing: -.05em; line-height: 1.08; margin-bottom: 15px; }.preview-panel > p:not(.panel-kicker) { color: #a3a7a2; font-size: 12px; line-height: 1.7; }.meter { height: 3px; background: #444a46; margin-top: auto; }.meter span { display: block; height: 100%; background: var(--mint); width: 28%; transition: width .3s ease; }.panel-meta { margin-top: 10px; font-size: 9px; }
.promise-band { background: var(--ink); color: var(--paper); }.promise-inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; padding-top: 125px; padding-bottom: 125px; }.promise-intro .eyebrow { color: #9aa09a; }.promise-intro h2 { font-size: clamp(41px, 5vw, 70px); margin-bottom: 25px; }.promise-intro > p:last-child { color: #9aa09a; max-width: 260px; font-size: 13px; line-height: 1.8; }.promise-list { display: grid; gap: 13px; }.promise-card { border-top: 1px solid #424744; padding: 26px 0; display: grid; grid-template-columns: 62px 1fr; gap: 12px; }.promise-num { color: var(--coral); font: 11px var(--mono); }.promise-card h3 { font-size: 21px; letter-spacing: -.04em; margin-bottom: 9px; }.promise-card p { max-width: 500px; color: #a3a7a2; font-size: 13px; line-height: 1.75; margin-bottom: 13px; }.promise-tag { border: 1px solid #58605a; color: var(--mint); padding: 5px 7px; font: 9px var(--mono); letter-spacing: .08em; }.promise-card-bonus .promise-num { color: var(--mint); }
.pricing { display: grid; grid-template-columns: 1fr .9fr; gap: 9vw; align-items: center; padding-top: 135px; padding-bottom: 135px; }.pricing-copy h2 { font-size: clamp(43px, 5.2vw, 72px); margin-bottom: 24px; }.pricing-copy > p:last-child { color: var(--muted); max-width: 340px; font-size: 14px; line-height: 1.8; }.pricing-card { border: 2px solid var(--ink); background: var(--white); padding: 30px; box-shadow: 10px 10px 0 var(--coral); }.price-top, .price-value, .price-includes { display: flex; align-items: center; justify-content: space-between; }.price-label { font-size: 14px; font-weight: 700; }.price-badge { color: var(--ink); background: var(--coral); padding: 7px 9px; font: 9px var(--mono); font-weight: 700; letter-spacing: .06em; }.price-value { margin: 38px 0 12px; align-items: flex-end; }.price-value span { font-size: 12px; color: var(--muted); }.price-value strong { font-size: 43px; letter-spacing: -.08em; }.pricing-card > p { font-size: 12px; color: var(--muted); }.price-includes { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 26px 0; padding: 16px 0; display: grid; gap: 9px; font-size: 12px; }.pricing-footnote { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; font: 10px var(--mono); color: var(--muted); line-height: 1.5; }.pricing-footnote-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--coral); }
.plan-selector { margin: 0 0 18px; }.plan-selector label { display: block; margin-bottom: 8px; font-size: 11px; color: var(--muted); }.plan-selector select { width: 100%; height: 42px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0 12px; font-size: 12px; }
.contact-section { border-top: 1px solid var(--line); padding-top: 95px; padding-bottom: 115px; }.contact-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: end; }.contact-wrap h2 { font-size: clamp(41px, 5vw, 65px); margin-bottom: 20px; }.contact-wrap > div > p:last-child { color: var(--muted); line-height: 1.8; font-size: 14px; max-width: 320px; }.contact-form label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 10px; }.email-row { display: flex; gap: 10px; }.email-row input { flex: 1; border: 1px solid var(--ink); background: var(--white); min-height: 49px; padding: 0 17px; outline: none; }.email-row input:focus { box-shadow: 4px 4px 0 var(--mint); }.email-row .button { border: 0; cursor: pointer; white-space: nowrap; }.contact-form small { display: block; color: var(--muted); font-size: 10px; margin-top: 10px; }.site-footer { min-height: 85px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 30px; }.footer-copy { color: var(--muted); font: 10px var(--mono); }.footer-links { margin-left: auto; display: flex; gap: 20px; color: var(--muted); font-size: 10px; }
.auth-modal[hidden] { display: none; }.auth-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; }.auth-modal-backdrop { position: absolute; inset: 0; background: rgba(17,19,20,.6); }.auth-card { position: relative; width: min(480px,100%); padding: 32px; background: var(--white); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--coral); }.auth-card h2 { margin-bottom: 14px; font-size: clamp(30px,5vw,45px); }.auth-copy { color: var(--muted); font-size: 13px; line-height: 1.6; }.auth-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 28px; cursor: pointer; }.auth-tabs { display: flex; gap: 8px; margin: 24px 0 18px; border-bottom: 1px solid var(--line); }.auth-tab { border: 0; background: transparent; padding: 9px 0; margin-right: 18px; color: var(--muted); cursor: pointer; font: 11px var(--mono); }.auth-tab.is-active { color: var(--ink); border-bottom: 2px solid var(--coral); }.auth-card label { display: block; margin-top: 13px; font-size: 11px; font-weight: 700; }.auth-card input { width: 100%; height: 43px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); }.auth-submit { width: 100%; border: 0; margin-top: 22px; cursor: pointer; }.auth-note { min-height: 18px; margin-top: 12px; color: #b44938; font-size: 11px; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; }.hero-stage { max-width: 680px; width: 100%; justify-self: center; }.commitment-strip { grid-template-columns: 1fr 1fr; }.commitment-heading { grid-column: 1 / -1; padding: 0 0 15px; }.workflow-grid, .promise-inner, .pricing, .contact-wrap { grid-template-columns: 1fr; gap: 50px; }.promise-inner { padding-top: 90px; padding-bottom: 90px; }.section-heading { gap: 25px; }.pricing { padding-top: 90px; padding-bottom: 95px; }.contact-section { padding-top: 75px; } }
@media (max-width: 650px) { .site-header { height: 70px; }.site-nav { display: none; }.header-actions { gap: 8px; }.presale-nav-status { display: none; }.header-cta { font-size: 11px; padding: 9px 12px; }.presale-ribbon { justify-content: flex-start; overflow: hidden; white-space: nowrap; font-size: 9px; }.presale-ribbon > span:nth-of-type(2) { display: none; }.presale-ribbon a { margin-left: auto; }.hero { padding-top: 64px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-stage { min-height: 410px; padding: 12px; box-shadow: 7px 7px 0 #d7d2c8; }.stage-canvas { height: 300px; }.note-one { right: -9px; top: 74px; }.note-two { left: -9px; bottom: 70px; }.presale-callout { box-shadow: 4px 4px 0 var(--ink); }.commitment-strip { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 42px; }.commitment-heading { grid-column: auto; }.commitment-card { min-height: 0; padding-right: 26px; }.signal-bar { grid-template-columns: 1fr; gap: 14px; }.workflow { padding-top: 85px; padding-bottom: 90px; }.section-heading { display: block; margin-bottom: 40px; }.section-heading h2 { margin-bottom: 24px; }.preview-body { grid-template-columns: 1fr; }.preview-visual { min-height: 220px; }.preview-panel { border-left: 0; border-top: 1px solid #414744; min-height: 245px; }.promise-card { grid-template-columns: 40px 1fr; }.promise-card h3 { font-size: 18px; }.pricing-card { padding: 22px; box-shadow: 6px 6px 0 var(--coral); }.price-value strong { font-size: 34px; }.email-row { flex-direction: column; }.email-row .button { width: 100%; }.site-footer { padding-top: 25px; padding-bottom: 25px; align-items: flex-start; flex-direction: column; gap: 12px; }.footer-links { margin-left: 0; flex-wrap: wrap; gap: 10px 18px; } }