:root { color-scheme: dark; --bg: #07090a; --surface: #101416; --surface-2: #171d20; --ink: #f7f8f5; --muted: #a8b0ad; --line: rgba(255,255,255,.14); --orange: #ff861f; --orange-soft: rgba(255,134,31,.12); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: 0; margin: 0; }
a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; letter-spacing: 0; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.site-header { align-items: center; backdrop-filter: blur(14px); background: rgba(7,9,10,.9); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 76px; padding: 14px max(24px,calc((100vw - 1220px) / 2)); position: sticky; top: 0; z-index: 10; }
.brand { align-items: center; display: flex; flex: 0 1 auto; gap: 14px; max-width: 100%; min-width: 0; }.brand img { flex: 0 1 auto; height: auto; max-width: min(212px,100%); width: min(212px,44vw); }.brand span { border-left: 1px solid var(--line); color: var(--muted); flex: 0 0 auto; font-weight: 800; padding-left: 14px; }.page-nav { align-items: center; color: var(--muted); display: flex; font-size: 14px; font-weight: 750; gap: 20px; }.page-nav a:hover,footer a:hover { color: var(--orange); }.page-nav .client-link { color: var(--ink); }
main { margin: 0 auto; max-width: 1220px; padding: 0 24px 88px; }.hero { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: clamp(34px,6vw,90px); grid-template-columns: minmax(0,1.1fr) minmax(280px,.62fr); min-height: min(760px,calc(100vh - 76px)); padding: 76px 0; }.product-logo { margin-bottom: 28px; max-width: min(355px,78vw); }
.status-label,.eyebrow,.guide-label { color: var(--orange); font-size: 13px; font-weight: 900; letter-spacing: .08em; margin: 0 0 13px; text-transform: uppercase; }h1,h2,h3,p { margin-top: 0; }h1 { font-size: clamp(44px,6.4vw,78px); line-height: 1.01; margin-bottom: 24px; max-width: 790px; }h2 { font-size: clamp(31px,4vw,51px); line-height: 1.08; margin-bottom: 18px; }h3 { font-size: 21px; line-height: 1.18; }.hero-lead { font-size: clamp(18px,2vw,22px); line-height: 1.55; margin-bottom: 13px; max-width: 720px; }.availability-note,.section-heading > p,.section-heading-split > p { color: var(--muted); line-height: 1.6; }.availability-note { font-size: 15px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }.button { align-items: center; border: 1px solid var(--line); border-radius: 6px; display: inline-flex; font-weight: 850; justify-content: center; min-height: 46px; padding: 11px 17px; }.button-primary { background: var(--orange); border-color: var(--orange); color: #12100e; }.button-primary:hover { background: #ff9a45; }.button-secondary { background: transparent; color: var(--ink); }.button-secondary:hover { border-color: var(--orange); color: var(--orange); }.hero-visual { background: var(--surface); border: 1px solid var(--line); margin: 0; overflow: hidden; padding: 12px; }.hero-visual img { aspect-ratio: 9 / 15.9; margin: 0 auto; max-height: 550px; object-fit: cover; }.hero-visual figcaption { color: var(--muted); font-size: 13px; padding: 13px 4px 2px; }
.section { border-bottom: 1px solid var(--line); padding: 94px 0; }.section-heading { max-width: 760px; }.section-heading.centered { margin-left: auto; margin-right: auto; text-align: center; }.section-heading-split { align-items: end; display: grid; gap: 36px; grid-template-columns: 1fr minmax(270px,.64fr); max-width: none; }.section-heading-split h2 { margin-bottom: 0; }.video-section { padding-top: 76px; }.video-frame { aspect-ratio: 1672 / 941; background: #000; border: 1px solid var(--line); overflow: hidden; position: relative; }.video-frame iframe { border: 0; height: 100%; width: 100%; }.video-poster { background: #000; border: 0; cursor: pointer; height: 100%; padding: 0; position: relative; width: 100%; }.video-poster img { display: block; height: 100%; object-fit: contain; opacity: .72; transition: opacity .2s ease; width: 100%; }.video-poster:hover img,.video-poster:focus-visible img { opacity: .88; }.video-play { align-items: center; background: var(--orange); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 8px 26px rgba(0,0,0,.4); display: flex; height: 82px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 82px; }.video-play span { border-bottom: 13px solid transparent; border-left: 20px solid #17120e; border-top: 13px solid transparent; margin-left: 5px; }.video-poster:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }
.intro-grid { align-items: start; display: grid; gap: clamp(34px,8vw,110px); grid-template-columns: 1.1fr .9fr; }.intro-lead { font-size: clamp(23px,3vw,36px); line-height: 1.23; margin: 0; }.intro-points { border-left: 2px solid var(--orange); display: grid; gap: 18px; padding-left: 23px; }.intro-points p { color: var(--muted); line-height: 1.55; margin: 0; }
.feature-grid { display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(0,1fr)); }.feature-grid article { background: var(--surface); border: 1px solid var(--line); min-height: 230px; padding: 23px; }.feature-grid span { color: var(--orange); display: block; font-size: 13px; font-weight: 900; margin-bottom: 38px; }.feature-grid h3 { margin-bottom: 10px; }.feature-grid p,.scenario-grid p { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 0; }
.workflow-section { display: grid; gap: 48px; grid-template-columns: .72fr 1.28fr; }.workflow-copy { align-self: center; }.workflow-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }.text-link { border-bottom: 1px solid var(--orange); color: var(--ink); font-weight: 800; padding-bottom: 3px; }.workflow-gallery { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }.workflow-gallery figure { background: var(--surface); border: 1px solid var(--line); margin: 0; overflow: hidden; }.workflow-gallery .gallery-main { grid-row: span 2; }.workflow-gallery img { height: 100%; min-height: 210px; object-fit: cover; width: 100%; }.workflow-gallery figcaption { color: var(--muted); font-size: 13px; padding: 10px 12px; }
.scenario-grid { display: grid; gap: 14px; grid-template-columns: repeat(4,minmax(0,1fr)); }.scenario-grid article { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }.scenario-grid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }.scenario-grid h3 { margin: 19px 19px 8px; }.scenario-grid p { margin: 0 19px 20px; }.guide-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }.guide-card { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(150px,.5fr) 1fr; min-height: 270px; overflow: hidden; }.guide-card img { height: 100%; min-height: 270px; object-fit: cover; width: 100%; }.guide-card > div { padding: 28px; }.guide-card h3 { margin-bottom: 12px; }.guide-card p:not(.guide-label) { color: var(--muted); line-height: 1.55; }.guide-status { color: var(--orange); font-size: 13px; font-weight: 800; }
.plan-grid { display: grid; gap: 14px; grid-template-columns: repeat(4,minmax(0,1fr)); }.plan-card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 318px; padding: 23px; }.plan-card.featured { border-color: var(--orange); }.plan-card h3 { margin-bottom: 19px; }.price { font-size: 34px; font-weight: 900; margin-bottom: 20px; }.price span { color: var(--muted); font-size: 13px; font-weight: 750; margin-left: 4px; }.plan-card ul { color: var(--muted); line-height: 1.7; margin: 0 0 25px; padding-left: 18px; }.plan-card button { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); cursor: not-allowed; font-weight: 850; margin-top: auto; min-height: 44px; opacity: .75; }.terms-section { border: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 42px; overflow: hidden; }.terms-section > div { background: var(--surface); display: grid; gap: 7px; min-height: 124px; padding: 18px; }.terms-section span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.final-cta { background: var(--orange-soft); border: 1px solid rgba(255,134,31,.44); margin-top: 80px; padding: clamp(34px,6vw,72px); }.final-cta h2 { max-width: 700px; }.final-cta > p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.55; }footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 27px 24px; }.checkout-closed main { max-width: 780px; padding-top: 92px; text-align: center; }.checkout-closed .product-logo { margin-left: auto; margin-right: auto; }.checkout-closed .hero-actions { justify-content: center; }.checkout-closed .closed-message { background: var(--orange-soft); border: 1px solid rgba(255,134,31,.42); line-height: 1.6; margin: 30px auto; max-width: 640px; padding: 20px; }
@media (max-width: 980px) { .hero,.workflow-section,.section-heading-split,.intro-grid { grid-template-columns: 1fr; } .hero { min-height: 0; } .hero-visual { max-width: 430px; } .feature-grid,.scenario-grid,.plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .site-header { padding: 14px 18px; } .brand img { width: min(170px,44vw); } .page-nav { display: none; } main { padding-left: 18px; padding-right: 18px; } .hero { padding: 54px 0; } .section { padding: 66px 0; } .feature-grid,.scenario-grid,.plan-grid,.terms-section,.guide-grid { grid-template-columns: 1fr; } .guide-card { grid-template-columns: 1fr; } .guide-card img { aspect-ratio: 16 / 9; min-height: 0; } .workflow-gallery { grid-template-columns: 1fr; } .workflow-gallery .gallery-main { grid-row: auto; } .workflow-gallery img { max-height: 360px; } .hero-actions { align-items: stretch; flex-direction: column; } .hero-actions .button { width: 100%; } }
.hero-top { align-items: center; display: grid; gap: clamp(34px,5vw,72px); grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr); }.hero-video { margin-top: 48px; width: 100%; }.hero-video:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; }.hero-app-visual { background: transparent; border: 0; margin: 0; max-width: 780px; overflow: hidden; padding: 0; }.hero-app-visual img { display: block; height: auto; max-height: 900px; object-fit: contain; width: 100%; }
.hero { display: block; min-height: 0; padding: 76px 0; }.hero-copy { max-width: 900px; }.hero-video { margin-top: 48px; width: 100%; }.hero-video .video-frame { width: 100%; }
.ease-section { background: var(--surface-2); }.ease-grid { align-items: center; display: grid; gap: clamp(34px,7vw,90px); grid-template-columns: .9fr 1.1fr; margin-top: 42px; }.ease-copy > p { font-size: clamp(20px,2.7vw,32px); line-height: 1.3; }.ease-copy ul { color: var(--muted); line-height: 1.8; padding-left: 20px; }.ease-visual { background: var(--surface); border: 1px solid var(--line); margin: 0; overflow: hidden; padding: 12px; }.ease-visual img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
@media (max-width: 980px) { .hero-top,.ease-grid { grid-template-columns: 1fr; }.hero-app-visual { max-width: 620px; }.ease-visual { max-width: 760px; } }
.hero-app-visual { background: transparent; border: 0; overflow: visible; padding: 0; }.hero-app-visual img { display: block; height: auto; max-height: 780px; object-fit: contain; transform: scale(1.35); transform-origin: center center; width: 100%; }
@media (max-width: 700px) { .hero-app-visual img { transform: scale(1.35); } }
.virtues-section { padding-bottom: 70px; }.virtues-heading { max-width: 820px; }.virtues-heading h2 { margin-bottom: 38px; }.virtues-primary,.virtues-secondary { display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }.virtues-primary article { border-top: 2px solid var(--orange); min-height: 150px; padding: 18px 18px 12px 0; }.virtues-secondary { border-top: 1px solid var(--line); margin-top: 10px; }.virtues-secondary article { min-height: 105px; padding: 18px 18px 10px 0; }.virtues-primary span,.virtues-secondary span { color: var(--orange); display: block; font-size: 12px; font-weight: 900; letter-spacing: .08em; margin-bottom: 16px; }.virtues-primary h3,.virtues-secondary h3 { margin-bottom: 8px; }.virtues-primary p,.virtues-secondary p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 0; }.virtues-secondary h3 { font-size: 17px; }.virtues-link { border-bottom: 1px solid var(--orange); display: inline-flex; gap: 8px; margin-top: 28px; padding-bottom: 4px; font-size: 14px; font-weight: 800; }.virtues-link:hover { color: var(--orange); }
@media (max-width: 980px) { .virtues-primary,.virtues-secondary { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .virtues-section { padding-bottom: 58px; }.virtues-heading h2 { margin-bottom: 26px; }.virtues-primary,.virtues-secondary { grid-template-columns: 1fr; }.virtues-primary article,.virtues-secondary article { min-height: 0; padding-right: 0; }.virtues-secondary { margin-top: 4px; } }
.virtues-mockup { margin: -12px auto 0; max-width: 1220px; padding: 0 24px 18px; }.virtues-mockup img { display: block; height: auto; margin: 0 auto; max-width: 100%; width: 100%; }
@media (max-width: 700px) { .virtues-mockup { margin-top: -4px; padding-left: 18px; padding-right: 18px; } }
.virtues-primary h3,.virtues-secondary h3 { font-size: 19px; font-weight: 800; line-height: 1.2; }.virtues-primary p,.virtues-secondary p { font-size: 16px; line-height: 1.5; }
.virtues-primary h3,.virtues-secondary h3 { color: var(--ink); display: inline-block; padding-bottom: 5px; position: relative; }.virtues-primary h3::after,.virtues-secondary h3::after { background: var(--orange); bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 100%; }
.virtues-primary article { border-top: 0; }.virtues-secondary { border-top: 0; }
.virtues-primary h3,.virtues-secondary h3 { font-size: clamp(24px,2.5vw,30px); line-height: 1.12; }
.virtues-link { border-bottom: 0; flex-wrap: wrap; }
.virtues-link-cta { border-bottom: 1px solid var(--orange); padding-bottom: 4px; }
.plan-card li.plan-highlight { color: var(--orange); font-weight: 850; }
.terms-heading { margin: 42px 0 14px; }
.guide-card { min-width: 0; }
.guide-card img { min-width: 0; }
@media (max-width: 700px) {
  .virtues-primary h3,.virtues-secondary h3 { font-size: clamp(24px,7vw,30px); }
  .plan-card { min-height: 0; }
  .guide-card { display: block; min-height: 0; }
  .guide-card img { aspect-ratio: 16 / 9; height: auto; min-height: 0; object-fit: contain; }
  .guide-card > div { padding: 22px; }
  .terms-heading { margin-top: 34px; }
}