:root {
  --green: #173c2a;
  --green-2: #1f5139;
  --mint: #dce8df;
  --paper: #f8f7f1;
  --white: #fffef9;
  --ink: #183126;
  --muted: #64736b;
  --line: rgba(23, 60, 42, .13);
  --accent: #d9ee83;
  --shadow: 0 28px 90px rgba(23, 60, 42, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--white); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.nav { display: flex; align-items: center; gap: 32px; color: rgba(255,255,255,.72); font-size: 14px; }
.nav a, .header-action { transition: color .2s, opacity .2s; }
.nav a:hover { color: var(--white); }
.header-action { justify-self: end; padding: 9px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 13px; font-weight: 700; }
.header-action:hover { background: rgba(255,255,255,.1); }

.hero { position: relative; min-height: 780px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); align-items: center; gap: clamp(40px, 7vw, 110px); overflow: hidden; padding: 140px max(24px, calc((100vw - 1220px) / 2)) 100px; color: var(--white); background: var(--green); }
.hero::before { content: ""; position: absolute; width: 740px; height: 740px; top: -360px; right: -180px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.02); }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--green-2); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.hero .eyebrow, .eyebrow.light { color: #b9d7c6; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(52px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.07em; }
h1 em { color: var(--accent); font-style: normal; }
.hero-lead { max-width: 570px; margin: 28px 0 0; color: rgba(255,255,255,.7); font-size: clamp(17px, 2vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 800; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: var(--green); background: var(--accent); }
.button.secondary { border-color: rgba(255,255,255,.22); color: var(--white); background: rgba(255,255,255,.06); }
.availability { margin: 17px 0 0; color: rgba(255,255,255,.45); font-size: 13px; }

.product-stage { position: relative; z-index: 2; min-height: 520px; display: grid; place-items: center; }
.glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(217,238,131,.16), transparent 68%); filter: blur(10px); }
.app-window { position: relative; width: min(690px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: #f5f5ef; box-shadow: 0 45px 120px rgba(4,17,10,.5); transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.window-top { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; color: #758078; border-bottom: 1px solid #e1e4de; background: rgba(255,255,255,.9); font-size: 11px; }
.traffic { display: flex; gap: 6px; }.traffic i { width: 9px; height: 9px; border-radius: 50%; background: #d8ddd7; }.traffic i:first-child { background: #f2b09a; }.traffic i:nth-child(2) { background: #eed580; }.traffic i:last-child { background: #a9d5b7; }
.window-name { font-weight: 700; }.sync-dot { justify-self: end; color: #508264; }.sync-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #63a478; vertical-align: 1px; }
.app-body { min-height: 380px; display: grid; grid-template-columns: 38% 62%; }
.sidebar { padding: 20px 15px; color: #385044; border-right: 1px solid #e0e3dd; background: #edf0ea; }
.profile { display: flex; align-items: center; gap: 9px; padding: 5px; font-size: 12px; }.profile > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: white; background: var(--green); font-size: 9px; }
.sidebar button { width: 100%; margin: 18px 0 12px; padding: 10px 12px; border: 0; border-radius: 8px; color: white; background: var(--green); text-align: left; font: inherit; font-size: 11px; font-weight: 700; }
.sidebar ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }.sidebar li { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 9px; font-size: 10px; }.sidebar li.active { background: white; box-shadow: 0 5px 15px rgba(23,60,42,.06); }.sidebar li i { width: 5px; height: 5px; margin-top: 5px; border-radius: 50%; background: #a7b3aa; }.sidebar li.active i { background: #4a8a62; }.sidebar li span { display: grid; }.sidebar li strong { font-size: 10px; }.sidebar li small { color: #8c978f; }
.editor { position: relative; padding: 58px 46px; color: #273c31; background: #fffefa; }.document-type { color: #7e8c83; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.editor h2 { margin: 13px 0 30px; font-size: 25px; letter-spacing: -.04em; }.editor p { margin: 11px 0; color: #68766e; font-size: 11px; }.cursor-line { color: #40594b !important; }.cursor { display: inline-block; width: 1px; height: 13px; margin-left: 3px; background: #315a43; vertical-align: -2px; animation: blink 1.2s infinite; }.cloud-mark { position: absolute; right: 28px; bottom: 24px; color: #dce7df; font-size: 35px; }
@keyframes blink { 50% { opacity: 0; } }
.floating-note { position: absolute; padding: 11px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: var(--green); background: rgba(255,255,255,.92); box-shadow: 0 15px 38px rgba(3,15,8,.2); backdrop-filter: blur(10px); font-size: 12px; font-weight: 800; }.floating-note b { margin-left: 18px; color: #54926b; }.floating-note span { color: #5ba676; }.note-a { top: 28px; right: -12px; }.note-b { left: -28px; bottom: 26px; }

.statement { padding: 120px 24px; text-align: center; background: var(--white); }.statement p { margin: 0 0 18px; color: #78877e; font-size: 14px; }.statement h2 { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.2; letter-spacing: -.055em; }
.section { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 110px 0; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: end; gap: 70px; }.section-heading h2, .editors h2 { margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.08; letter-spacing: -.055em; }.section-heading > p { max-width: 480px; margin: 0 0 6px; color: var(--muted); font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: 50px; }.feature-card { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }.feature-card.featured { color: var(--white); background: var(--green); }.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--green); background: var(--mint); font-size: 25px; }.feature-card > div:last-child > span { color: #8b9a91; font-size: 11px; font-weight: 800; }.feature-card h3 { margin: 10px 0; font-size: 27px; letter-spacing: -.04em; }.feature-card p { margin: 0; color: var(--muted); font-size: 15px; }.feature-card.featured p { color: rgba(255,255,255,.65); }.feature-card.featured .feature-icon { background: var(--accent); }

.editors { padding: 110px max(24px, calc((100vw - 1160px) / 2)); color: var(--white); background: #102e20; }.editors-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 9vw, 130px); }.editors-copy > p:last-child { max-width: 430px; margin: 28px 0 0; color: rgba(255,255,255,.56); font-size: 16px; }.editor-list { border-top: 1px solid rgba(255,255,255,.15); }.editor-list article { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 24px; min-height: 140px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.15); }.editor-number { color: #91a99a; font-size: 11px; }.editor-list h3 { margin: 0; font-size: 25px; }.editor-list p { margin: 4px 0 0; color: rgba(255,255,255,.5); font-size: 14px; }.editor-list b { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: var(--accent); font-size: 10px; }

.section-heading.compact { grid-template-columns: 1fr minmax(280px, 420px); }.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }.platform-grid article { min-height: 270px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }.platform-grid article > div { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 55px; border-radius: 15px; color: white; background: var(--green); font-size: 22px; }.platform-grid h3 { margin: 0; font-size: 25px; }.platform-grid p { margin: 5px 0 18px; color: var(--muted); }.platform-grid span, .platform-grid a { color: #668075; font-size: 12px; font-weight: 800; }.platform-grid a { color: var(--green); border-bottom: 1px solid var(--green); }
.final-cta { display: flex; flex-direction: column; align-items: center; padding: 110px 24px; color: white; text-align: center; background: var(--green); }.final-cta > img { width: 82px; height: 82px; margin-bottom: 28px; border-radius: 21px; }.final-cta h2 { max-width: 840px; margin: 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: -.06em; }.final-cta > p:not(.eyebrow) { margin: 20px 0 30px; color: rgba(255,255,255,.6); }.button.bright { color: var(--green); background: var(--accent); }
.footer { width: min(1160px, calc(100% - 48px)); min-height: 150px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 55px; margin: 0 auto; color: var(--muted); font-size: 12px; }.footer-brand { color: var(--ink); }.footer div { display: grid; gap: 3px; }.footer div a { color: var(--green); font-weight: 700; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }.nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 150px; }.hero-copy { max-width: 750px; }.product-stage { width: min(760px, 100%); margin: 0 auto; }.app-window { transform: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }.feature-card.featured { grid-column: span 2; min-height: 280px; }
  .editors-inner { grid-template-columns: 1fr; }.editors-copy { max-width: 680px; }
  .footer { grid-template-columns: 1fr 1fr; }.footer > div:last-child { display: none; }
}

@media (max-width: 700px) {
  .site-header { width: calc(100% - 32px); padding-top: 16px; }.header-action { padding: 8px 12px; }.brand img { width: 34px; height: 34px; }
  .hero { min-height: auto; padding: 120px 16px 72px; }.hero::before { display: none; } h1 { font-size: 50px; }.hero-actions, .button { width: 100%; }.product-stage { min-height: auto; margin-top: 40px; }.floating-note { display: none; }.app-body { grid-template-columns: 34% 66%; }.sidebar { padding: 14px 8px; }.sidebar li { padding: 8px 5px; }.editor { padding: 42px 22px; }
  .statement { padding: 80px 20px; }.section { width: calc(100% - 32px); padding: 78px 0; }.section-heading, .section-heading.compact { grid-template-columns: 1fr; gap: 24px; }.section-heading > p { font-size: 15px; }
  .feature-grid, .platform-grid { grid-template-columns: 1fr; }.feature-card.featured { grid-column: auto; }.feature-card { min-height: 280px; }
  .editors { padding: 78px 16px; }.editor-list article { grid-template-columns: 32px 1fr auto; gap: 12px; }.editor-list p { font-size: 12px; }.platform-grid article { min-height: 230px; }.platform-grid article > div { margin-bottom: 40px; }
  .final-cta { padding: 80px 20px; }.footer { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 20px; padding: 34px 0; }.footer > div { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.cursor { animation: none; }.button { transition: none; } }