@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500&display=swap");

:root {
  --forest: #183c32;
  --forest-deep: #0d2821;
  --lime: #b8d867;
  --coral: #ef7652;
  --cream: #fbf7ed;
  --paper: #f1eadc;
  --ink: #15231f;
  --muted: #6d756f;
  --line: #cec8bb;
  --white: #fffdf8;
  --display: "Newsreader", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", sans-serif;
  --mono: "DM Mono", monospace;
  --shell: min(1180px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: var(--sans); line-height: 1.7; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 10px 14px; background: var(--forest); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }

.site-header { position: fixed; z-index: 50; top: 0; right: 0; left: 0; color: var(--forest); transition: background .3s, box-shadow .3s; }
.site-header.is-scrolled { background: rgb(251 247 237 / 92%); box-shadow: 0 1px 0 rgb(24 60 50 / 12%); backdrop-filter: blur(16px); }
.header-inner { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { width: 29px; height: auto; filter: drop-shadow(0 4px 7px rgb(24 60 50 / 12%)); }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: .76rem; font-weight: 700; }
.main-nav a { text-decoration: none; }
.main-nav a:not(.nav-contact) { position: relative; }
.main-nav a:not(.nav-contact)::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: var(--forest); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-contact { padding: 8px 16px; border: 1px solid var(--forest); border-radius: 99px; }

.hero { position: relative; min-height: 920px; overflow: hidden; padding: 145px 0 84px; background: var(--cream); }
.paper-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgb(24 60 50 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(24 60 50 / 7%) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, transparent, #000 30%, #000); }
.hero::before { position: absolute; top: 160px; right: -130px; width: 680px; height: 680px; border: 1px solid rgb(24 60 50 / 12%); border-radius: 45% 55% 62% 38%; content: ""; transform: rotate(13deg); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 48px; }
.hero-copy { padding-top: 32px; }
.product-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 52px; }
.product-lockup img { width: 68px; border-radius: 16px; box-shadow: 0 15px 35px rgb(24 60 50 / 20%); }
.product-lockup div { display: grid; }
.product-lockup span, .eyebrow { color: var(--muted); font: 500 .61rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-lockup strong { font-size: 1.18rem; letter-spacing: -.035em; }
.eyebrow { margin: 0 0 13px; color: var(--coral); }
.hero h1 { max-width: 660px; margin: 0; font-family: var(--display); font-size: clamp(4rem, 6.3vw, 6.9rem); font-weight: 500; letter-spacing: -.065em; line-height: .87; }
.hero h1 em { color: var(--forest); font-weight: 500; }
.hero-lead { max-width: 540px; margin: 34px 0 0; color: #4f5c57; font-size: 1.03rem; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 32px; }
.store-button { display: inline-flex; min-width: 178px; align-items: center; gap: 10px; padding: 10px 17px; border-radius: 10px; background: var(--forest-deep); color: white; text-decoration: none; box-shadow: 7px 7px 0 var(--lime); transition: transform .2s, box-shadow .2s; }
.store-button:hover { box-shadow: 10px 10px 0 var(--lime); transform: translate(-2px, -2px); }
.store-button svg { width: 27px; fill: currentColor; }
.store-button span { font-size: 1.05rem; font-weight: 600; line-height: 1.1; }
.store-button small { display: block; font-size: .58rem; font-weight: 400; }
.text-link { display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid currentColor; color: var(--forest); font-size: .78rem; font-weight: 700; text-decoration: none; }
.text-link span { color: var(--coral); }
.hero-facts { display: flex; gap: 24px; margin: 42px 0 0; padding: 0; color: var(--muted); font: 500 .62rem var(--mono); list-style: none; text-transform: uppercase; }
.hero-facts li::before { margin-right: 9px; color: var(--lime); content: "●"; }

.hero-visual { position: relative; min-height: 690px; }
.phone { position: absolute; z-index: 2; width: 292px; margin: 0; overflow: hidden; border: 8px solid #101b18; border-radius: 42px; background: #101b18; box-shadow: 0 38px 70px rgb(24 60 50 / 25%); }
.phone img { width: 100%; height: auto; border-radius: 34px; }
.phone-primary { top: 6px; right: 45px; transform: rotate(3deg); }
.phone-secondary { z-index: 1; top: 78px; left: -12px; width: 270px; opacity: .96; transform: rotate(-3deg); }
.file-tab { position: absolute; z-index: 3; padding: 11px 15px; border: 1px solid var(--forest); background: var(--cream); color: var(--forest); font: .68rem var(--mono); box-shadow: 5px 5px 0 var(--coral); }
.file-tab-one { top: 35px; left: 42px; }.file-tab-two { right: -20px; bottom: 106px; }
.syntax-card { position: absolute; z-index: 4; bottom: 35px; left: 95px; padding: 24px 28px; background: var(--forest); color: var(--cream); font: 1rem/1.7 var(--mono); box-shadow: 9px 9px 0 var(--lime); transform: rotate(-2deg); }
.syntax-card > span:first-child { color: var(--coral); }.cursor { margin-left: 3px; color: var(--lime); animation: blink .9s steps(1) infinite; }
.hero-strip { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 16px; border-block: 1px solid rgb(24 60 50 / 14%); background: var(--lime); color: var(--forest); font: 500 .7rem var(--mono); text-transform: uppercase; }
.hero-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }

.section-label { display: flex; align-items: center; gap: 12px; color: var(--forest); font: 500 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.section-label::after { width: 54px; height: 1px; background: currentColor; content: ""; opacity: .35; }
.section-label span { color: var(--coral); }.section-label.light { color: var(--cream); }
.display-title { margin: 0; font-family: var(--display); font-size: clamp(3.1rem, 5.7vw, 6rem); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.display-title em { color: var(--coral); font-weight: 500; }

.about-section { padding: 150px 0 165px; background: var(--white); }
.about-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; }
.about-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; margin-top: 55px; padding-top: 28px; border-top: 1px solid var(--line); }
.about-copy p { margin: 0; color: var(--muted); font-size: .95rem; }

.manifesto-section { padding: 140px 0; background: var(--forest); color: var(--cream); }
.manifesto-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 100px; }
.document-window { border: 1px solid rgb(251 247 237 / 25%); background: #123128; box-shadow: 18px 18px 0 var(--lime); }
.window-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid rgb(251 247 237 / 18%); }
.window-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }.window-bar i:nth-child(2) { background: var(--lime); }.window-bar i:nth-child(3) { background: #e8c466; }
.window-bar span { margin-left: 10px; color: #8da39b; font: .62rem var(--mono); }
.window-copy { display: grid; grid-template-columns: 32px 1fr; padding: 55px 48px 62px; }
.window-copy > span:first-child { color: var(--coral); font: 1.4rem var(--mono); }
.window-copy strong { font-family: var(--display); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 500; line-height: 1.12; }
.window-copy .rule { grid-column: 2; width: 65px; height: 3px; margin: 32px 0; background: var(--lime); }
.window-copy small { grid-column: 2; color: #9eb1aa; font: .72rem/1.8 var(--mono); }
.manifesto-copy h2 { margin: 48px 0 25px; font-family: var(--display); font-size: clamp(3rem, 4.6vw, 5rem); font-weight: 500; letter-spacing: -.05em; line-height: .98; }
.manifesto-copy p { max-width: 470px; color: #b5c4bf; }

.features-section { padding: 150px 0; background: var(--paper); }
.features-heading { display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 85px; }
.feature-card { position: relative; min-height: 375px; overflow: hidden; padding: 35px; border: 1px solid var(--line); background: var(--white); }
.feature-card::after { position: absolute; right: -60px; bottom: -90px; width: 225px; height: 225px; border: 1px solid rgb(24 60 50 / 10%); border-radius: 50%; content: ""; }
.feature-card > span { color: var(--coral); font: 500 .63rem var(--mono); }
.feature-card > b { position: absolute; top: 29px; right: 32px; color: var(--forest); font-family: var(--display); font-size: 1.75rem; font-weight: 500; }
.feature-card h3 { max-width: 390px; margin: 130px 0 12px; font-family: var(--display); font-size: 2.4rem; font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.feature-card p { max-width: 430px; margin: 0; color: var(--muted); font-size: .86rem; }
.feature-accent { background: var(--lime); }.feature-dark { background: var(--forest-deep); color: var(--cream); }.feature-dark p { color: #aebdb8; }.feature-dark > b { color: var(--lime); }

.screens-section { overflow: hidden; padding: 150px 0 160px; background: var(--forest-deep); color: var(--cream); }
.screens-heading { display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; }
.screens-heading .display-title em { color: var(--lime); }
.screen-reel { display: flex; width: min(1220px, calc(100% - 40px)); align-items: flex-start; justify-content: center; gap: clamp(20px, 4vw, 65px); margin: 100px auto 0; }
.screen-reel figure { width: min(27vw, 310px); margin: 0; }
.screen-reel figure:nth-child(2) { margin-top: 75px; }.screen-reel figure:nth-child(3) { margin-top: 15px; }
.screen-reel span { display: block; margin-bottom: 15px; color: var(--lime); font: .65rem var(--mono); text-transform: uppercase; }
.screen-reel img { border: 7px solid #071713; border-radius: 39px; box-shadow: 0 30px 55px rgb(0 0 0 / 35%); }

.privacy-section { padding: 150px 0; background: var(--cream); }
.privacy-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 100px; }
.privacy-grid .display-title { margin-top: 50px; }.privacy-grid .display-title em { color: var(--forest); }
.privacy-copy { padding: 36px; border: 1px solid var(--forest); background: var(--white); box-shadow: 10px 10px 0 var(--lime); }
.privacy-copy > p { margin-top: 0; font-family: var(--display); font-size: 1.4rem; line-height: 1.35; }
.privacy-copy ul { margin: 28px 0; padding: 0; list-style: none; }
.privacy-copy li { padding: 11px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }.privacy-copy li::before { margin-right: 10px; color: var(--coral); content: "✓"; }

.contact-section { position: relative; overflow: hidden; padding: 130px 0; background: var(--coral); color: var(--forest-deep); }
.contact-section::before { position: absolute; inset: 0; background-image: radial-gradient(rgb(24 60 50 / 30%) .7px, transparent .7px); background-size: 9px 9px; content: ""; opacity: .28; }
.contact-mark { position: absolute; top: -180px; right: -20px; color: rgb(251 247 237 / 16%); font: 650 38rem/.8 var(--mono); }
.contact-inner { position: relative; z-index: 2; text-align: center; }
.contact-icon { width: 82px; margin: 0 auto 24px; border-radius: 19px; box-shadow: 0 16px 30px rgb(24 60 50 / 18%); }
.contact-kicker { margin: 0 0 18px; font: 500 .65rem var(--mono); letter-spacing: .13em; }
.contact-inner h2 { margin: 0; font-family: var(--display); font-size: clamp(3.6rem, 6.2vw, 6.7rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.contact-inner h2 em { color: var(--cream); font-weight: 500; }
.contact-inner > p:not(.contact-kicker) { margin: 27px auto 30px; }
.contact-actions { display: flex; justify-content: center; gap: 20px; }
.store-button-light { background: var(--cream); color: var(--forest); box-shadow: 7px 7px 0 var(--forest); }.store-button-light:hover { box-shadow: 10px 10px 0 var(--forest); }
.outline-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border: 1px solid var(--forest); border-radius: 10px; font-size: .78rem; font-weight: 700; text-decoration: none; }
.email-link { display: block; width: max-content; margin: 29px auto 0; border-bottom: 1px solid var(--forest); font: 500 .72rem var(--mono); text-decoration: none; }

.site-footer { padding: 52px 0 30px; background: var(--forest-deep); color: var(--cream); }
.footer-top { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; padding-bottom: 42px; border-bottom: 1px solid rgb(251 247 237 / 14%); }
.footer-brand { color: var(--cream); }.footer-top > p { margin: 0; color: #82958e; font: .6rem var(--mono); text-transform: uppercase; }
.footer-top nav { display: flex; gap: 23px; }.footer-top nav a { color: #bdcac5; font-size: .72rem; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 25px; color: #70867e; font-size: .62rem; }.footer-bottom p { margin: 0; }.footer-bottom a { text-decoration: none; }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.25,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .hero-copy .reveal:nth-child(2) { transition-delay: .06s; }.js .hero-copy .reveal:nth-child(3) { transition-delay: .12s; }.js .hero-copy .reveal:nth-child(4) { transition-delay: .18s; }.js .hero-copy .reveal:nth-child(5) { transition-delay: .24s; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 20px; }.phone-primary { right: 0; }.phone-secondary { left: -15px; }.file-tab-one { left: 5px; }
  .manifesto-grid { gap: 55px; }.privacy-grid { gap: 55px; }
}
@media (max-width: 820px) {
  :root { --shell: min(100% - 38px, 680px); }
  .hero { padding-top: 120px; }.hero-grid { grid-template-columns: 1fr; }.hero-visual { min-height: 710px; margin-top: 40px; }.phone-primary { right: 65px; }.phone-secondary { left: 45px; }
  .about-grid, .features-heading, .screens-heading, .privacy-grid { grid-template-columns: 1fr; }.about-grid, .features-heading, .screens-heading { gap: 48px; }
  .manifesto-grid { grid-template-columns: 1fr; }.document-window { max-width: 590px; }.manifesto-copy { order: -1; }
  .privacy-grid { gap: 60px; }.footer-top { grid-template-columns: 1fr auto; }.footer-top > p { display: none; }
}
@media (max-width: 720px) {
  :root { --shell: calc(100% - 30px); }
  html { scroll-padding-top: 70px; }.header-inner { min-height: 70px; }.main-nav { gap: 13px; }.main-nav a:nth-child(2), .main-nav a:nth-child(3) { display: none; }.nav-contact { padding: 6px 12px; }
  .hero { min-height: auto; padding: 105px 0 75px; }.product-lockup { margin-bottom: 40px; }.hero h1 { font-size: clamp(3.6rem, 17vw, 5.2rem); }.hero-lead { font-size: .95rem; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-facts { flex-wrap: wrap; gap: 12px 18px; }
  .hero-visual { min-height: 600px; }.phone { width: 235px; border-width: 6px; border-radius: 34px; }.phone img { border-radius: 28px; }.phone-primary { right: 15px; }.phone-secondary { top: 100px; left: 4px; width: 190px; }.file-tab-one { top: 5px; left: 0; }.file-tab-two { right: 0; bottom: 85px; }.syntax-card { bottom: 18px; left: 30px; padding: 18px 20px; font-size: .76rem; }.hero-strip { gap: 12px; justify-content: space-around; padding-inline: 8px; font-size: .52rem; }
  .about-section, .manifesto-section, .features-section, .screens-section, .privacy-section { padding: 100px 0; }.about-copy { grid-template-columns: 1fr; gap: 22px; }.display-title { font-size: clamp(3rem, 13vw, 4.5rem); }
  .window-copy { padding: 38px 25px 44px; }.window-copy strong { font-size: 2rem; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 55px; }.feature-card { min-height: 330px; }.feature-card h3 { margin-top: 105px; font-size: 2rem; }
  .screen-reel { width: calc(100% - 30px); align-items: center; flex-direction: column; gap: 50px; }.screen-reel figure { width: min(78vw, 310px); }.screen-reel figure:nth-child(2), .screen-reel figure:nth-child(3) { margin-top: 0; }
  .privacy-copy { padding: 27px; }.contact-section { padding: 100px 0; }.contact-inner h2 { font-size: clamp(3.4rem, 15vw, 5rem); }.contact-actions { align-items: center; flex-direction: column; }.contact-mark { font-size: 25rem; }
  .footer-top { grid-template-columns: 1fr; }.footer-top nav { flex-wrap: wrap; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 380px) {
  :root { --shell: calc(100% - 24px); }.brand { font-size: .86rem; }.hero-visual { min-height: 550px; }.phone { width: 215px; }.phone-secondary { width: 170px; }.file-tab { font-size: .55rem; }.syntax-card { left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}