:root { --ink:#18362a; --deep:#113127; --green:#376c4c; --sage:#dce7db; --cream:#f4f0e7; --paper:#fbfaf5; --clay:#bd7551; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 max(5vw,32px); border-bottom:1px solid rgba(24,54,42,.12); background:rgba(251,250,245,.9); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; font-family:Georgia,serif; font-weight:700; font-size:21px; letter-spacing:-.02em; }
.app-icon { width:36px; height:36px; border-radius:9px; object-fit:cover; box-shadow:0 3px 10px rgba(17,49,39,.16); }
.brand-mark { width:34px; height:34px; border-radius:50%; background:var(--deep); display:flex; align-items:flex-end; justify-content:center; gap:2px; padding:8px 7px; overflow:hidden; }
.brand-mark i { width:5px; border-radius:9px 9px 2px 2px; background:#f7f0dc; transform:rotate(-8deg); }
.brand-mark i:nth-child(1) { height:11px; }.brand-mark i:nth-child(2) { height:18px; }.brand-mark i:nth-child(3) { height:14px; transform:rotate(8deg); }
nav { display:flex; align-items:center; gap:32px; font-size:14px; font-weight:600; }
.nav-cta { border:1px solid var(--ink); border-radius:99px; padding:12px 18px; }
.hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:1.02fr .98fr; }
.hero-copy { padding:clamp(70px,9vw,130px) max(6vw,44px) 80px max(7vw,52px); display:flex; flex-direction:column; align-items:flex-start; }
.pilot-label { display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid rgba(24,54,42,.18); border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.pilot-label span { width:7px; height:7px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 4px rgba(189,117,81,.12); }
.mode-intro { display:flex; align-items:baseline; gap:10px; margin-top:44px; }
.mode-intro strong { font:500 18px Georgia,serif; }
.mode-intro span { color:#718078; font-size:13px; }
.mode-switch { display:flex; margin-top:48px; padding:4px; border-radius:99px; background:#e9e7df; }
.mode-intro + .mode-switch { margin-top:14px; }
.mode-switch button { border:0; background:transparent; color:#66756e; padding:10px 15px; border-radius:99px; cursor:pointer; font-size:13px; font-weight:700; transition:.2s ease; }
.mode-switch button.active { background:white; color:var(--ink); box-shadow:0 2px 9px rgba(28,48,38,.09); }
.eyebrow { margin:48px 0 12px; color:var(--clay); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.15em; }
h1 { margin:0; font-family:Georgia,serif; font-size:clamp(56px,6.5vw,96px); line-height:.92; letter-spacing:-.055em; font-weight:500; }
.hero-body { max-width:600px; margin:28px 0 0; font-size:clamp(17px,1.3vw,20px); line-height:1.6; color:#53655d; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; border-radius:99px; padding:15px 22px; font-size:14px; font-weight:750; }
.button.primary { background:var(--deep); color:white; box-shadow:0 12px 25px rgba(17,49,39,.16); }
.text-link { font-size:14px; font-weight:700; border-bottom:1px solid rgba(24,54,42,.3); padding-bottom:3px; }
.text-link span { margin-left:5px; }
.platform-note { margin-top:20px; color:#819087; font-size:12px; }
.product-stage { position:relative; min-height:720px; overflow:hidden; display:flex; align-items:center; justify-content:center; transition:background .3s ease; background:#cadac9; }
.product-stage.farm { background:#e3d7c3; }
.contour { position:absolute; border:1px solid rgba(24,54,42,.14); border-radius:50%; }
.contour-one { width:720px; height:460px; transform:rotate(-25deg); }
.contour-two { width:560px; height:760px; transform:rotate(38deg); }
.phone { position:relative; z-index:2; width:min(330px,68%); min-height:640px; border:8px solid #142a21; border-radius:48px; background:#f5f5f1; box-shadow:0 45px 90px rgba(20,42,33,.27), inset 0 0 0 1px rgba(255,255,255,.5); padding:22px 18px; transform:rotate(1.7deg); transition:.3s ease; }
.farm .phone { transform:rotate(-1.2deg); }
.screenshot-phone { min-height:0; padding:0; overflow:hidden; background:#f8f7f2; }
.screenshot-phone img { display:block; width:100%; height:auto; }
.phone-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:800; padding:0 8px 22px; }
.phone-top i { width:58px; height:17px; border-radius:99px; background:#101b16; position:absolute; top:12px; left:50%; transform:translateX(-50%); }
.app-head { padding:8px 10px 20px; }
.app-head small { display:block; color:var(--green); font-size:9px; font-weight:800; letter-spacing:.14em; margin-bottom:8px; }
.app-head strong { display:block; font-family:Georgia,serif; font-size:28px; font-weight:500; }
.app-head p { margin:5px 0 0; color:#748078; font-size:12px; }
.summary-card { background:var(--deep); color:white; border-radius:22px; padding:18px; display:grid; grid-template-columns:1fr auto; gap:5px; box-shadow:0 12px 24px rgba(17,49,39,.14); }
.summary-card span { grid-column:1/-1; font-family:Georgia,serif; font-size:26px; }.summary-card b { font-size:11px; }.summary-card em { font-style:normal; font-size:10px; opacity:.75; }
.app-section-title { font-size:11px; color:#7d8881; font-weight:800; margin:23px 4px 10px; }
.task-card { background:white; border-radius:17px; padding:15px; display:flex; align-items:center; gap:12px; box-shadow:0 6px 17px rgba(28,48,38,.06); }
.task-card .task-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:var(--sage); color:var(--green); font-weight:800; }
.task-card div { flex:1; }.task-card b,.task-card small { display:block; }.task-card b { font-size:12px; }.task-card small { color:#879087; font-size:9px; margin-top:4px; }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.mini-grid div { background:white; border-radius:16px; padding:16px; }.mini-grid b,.mini-grid small { display:block; }.mini-grid b { font-family:Georgia,serif; font-size:22px; }.mini-grid small { margin-top:4px; font-size:9px; color:#7b887f; }
.stage-note { position:absolute; z-index:3; right:7%; bottom:8%; background:rgba(251,250,245,.92); backdrop-filter:blur(10px); border-radius:14px; padding:13px 16px; box-shadow:0 10px 28px rgba(24,54,42,.12); }.stage-note span,.stage-note b { display:block; }.stage-note span { font-size:9px; color:var(--clay); text-transform:uppercase; letter-spacing:.12em; font-weight:800; }.stage-note b { margin-top:4px; font-family:Georgia,serif; font-size:14px; }
@media (max-width:900px) { nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:64px 7vw 70px}.product-stage{min-height:700px}.phone{width:min(330px,76%)} }
@media (max-width:560px) { .site-header{height:74px;padding:0 20px}.brand{font-size:18px}.app-icon{width:32px;height:32px}.nav-cta{padding:10px 13px;font-size:12px}.hero{min-height:auto}.hero-copy{padding:44px 22px 56px}.mode-intro{margin-top:34px;align-items:flex-start;flex-direction:column;gap:4px}.mode-switch{margin-top:36px;width:100%}.mode-intro + .mode-switch{margin-top:12px}.mode-switch button{flex:1;padding:10px 8px;font-size:12px}.eyebrow{margin-top:38px}h1{font-size:54px}.hero-body{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.product-stage{min-height:650px}.phone{width:78%;min-height:585px}.stage-note{right:4%;bottom:4%} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }

.section-kicker { margin:0 0 18px; color:var(--clay); font-size:11px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.section-kicker.light { color:#d9b18e; }
h2 { margin:0; font:500 clamp(44px,5.2vw,76px)/.98 Georgia,serif; letter-spacing:-.045em; }
h3 { font-family:Georgia,serif; font-weight:500; letter-spacing:-.025em; }
.principles { padding:120px max(7vw,52px); background:var(--cream); }
.principles > h2 { max-width:820px; }
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:78px; border-top:1px solid rgba(24,54,42,.2); }
.principle-grid article { padding:30px 9% 10px 0; border-right:1px solid rgba(24,54,42,.15); }
.principle-grid article+article { padding-left:9%; }
.principle-grid article:last-child { border-right:0; }
.principle-grid span,.feature-grid span { color:var(--clay); font-size:11px; font-weight:800; letter-spacing:.12em; }
.principle-grid h3 { margin:32px 0 13px; font-size:25px; }
.principle-grid p,.feature-grid p { margin:0; color:#66756e; font-size:15px; line-height:1.65; }
.product-detail { padding:130px max(7vw,52px); }
.detail-heading { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:end; }
.detail-heading h2 { max-width:610px; }
.detail-heading > div:last-child { max-width:560px; }
.detail-heading > div:last-child > p { margin:25px 0 0; color:#607169; font-size:17px; line-height:1.65; }
.mode-switch.compact { display:inline-flex; margin-top:0; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(24,54,42,.14); margin-top:84px; border:1px solid rgba(24,54,42,.14); }
.feature-grid article { background:var(--paper); padding:44px 45px 48px; min-height:245px; }
.feature-grid h3 { font-size:29px; margin:42px 0 12px; }
.feature-grid p { max-width:480px; }
.screenshot-showcase { margin-top:82px; padding:62px 0 18px; border-top:1px solid rgba(24,54,42,.16); }
.showcase-heading { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; margin-bottom:48px; }
.showcase-heading h3 { margin:0; font-size:38px; }
.showcase-heading > p { margin:0; max-width:520px; color:#607169; font-size:16px; line-height:1.65; }
.screen-strip { display:grid; grid-template-columns:repeat(5,minmax(170px,1fr)); gap:20px; align-items:start; overflow-x:auto; padding:12px 3px 28px; scrollbar-color:#99a89f transparent; }
.screen-strip figure { margin:0; min-width:190px; }
.screen-frame { padding:7px; background:#17251f; border-radius:28px; box-shadow:0 20px 40px rgba(24,54,42,.16); }
.screen-frame img { display:block; width:100%; height:auto; border-radius:22px; }
.screen-strip figcaption { padding:22px 4px 0; }
.screen-strip figcaption b,.screen-strip figcaption span { display:block; }
.screen-strip figcaption b { font:500 20px Georgia,serif; }
.screen-strip figcaption span { margin-top:7px; color:#718078; font-size:12px; line-height:1.5; }
.journey-card { margin-top:30px; padding:64px; border-radius:28px; color:#f8f3e8; background:var(--deep); overflow:hidden; position:relative; }
.journey-card:after { content:""; position:absolute; width:580px; height:580px; right:-260px; top:-350px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018); pointer-events:none; }
.journey-copy { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:9vw; align-items:end; }
.journey-copy h3 { max-width:600px; font-size:42px; line-height:1.05; margin:0; color:#fffdf7; }
.journey-copy > p { max-width:480px; color:#b9c9c1; font-size:16px; line-height:1.65; margin:0; }
.journey-card ol { list-style:none; position:relative; z-index:1; margin:68px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.journey-card ol:before { content:""; position:absolute; left:5%; right:5%; top:24px; height:1px; background:rgba(232,239,232,.3); }
.journey-card li { min-width:0; position:relative; padding:0 24px 0 0; }
.journey-card li span { position:relative; z-index:1; width:49px; height:49px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.36); border-radius:50%; background:var(--deep); color:#e1b184; font-size:10px; font-weight:850; letter-spacing:.1em; box-shadow:0 0 0 9px var(--deep); }
.journey-card li:first-child span { color:var(--deep); border-color:#f4eee1; background:#f4eee1; }
.journey-card li b,.journey-card li small { display:block; }
.journey-card li b { margin-top:24px; color:#fffdf7; font:500 20px/1.25 Georgia,serif; }
.journey-card li small { max-width:160px; margin-top:9px; color:#9eb1a8; font-size:12px; line-height:1.5; }
.connection { background:var(--deep); color:#f8f3e8; padding:130px max(7vw,52px); display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:center; }
.connection-copy > p:not(.section-kicker) { max-width:540px; margin:28px 0 34px; color:#b8c8c0; font-size:17px; line-height:1.7; }
.button.pale { border:1px solid #9db4aa; color:#f8f3e8; }
.connection-diagram { position:relative; min-height:440px; display:grid; grid-template-columns:1fr 90px 1fr; align-items:center; }
.connection-diagram:before { content:""; position:absolute; inset:40px -7vw 40px 10%; border:1px solid rgba(255,255,255,.11); border-radius:50%; transform:rotate(-8deg); }
.diagram-card { z-index:1; padding:30px; min-height:230px; display:flex; flex-direction:column; justify-content:center; background:#f7f3e9; color:var(--ink); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.18); }
.diagram-card:first-of-type { transform:rotate(-3deg); }.diagram-card:last-of-type { transform:rotate(3deg); }
.diagram-card span { color:var(--clay); font-size:10px; letter-spacing:.14em; font-weight:850; }.diagram-card b { font:500 27px Georgia,serif; margin-top:28px; }.diagram-card p { margin:12px 0 0; color:#718078; font-size:13px; line-height:1.55; }
.handover { z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; }
.handover i { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--clay); color:white; font-style:normal; font-weight:900; box-shadow:0 0 0 8px var(--deep); }
.handover span { width:75px; text-align:center; font-size:9px; color:#b8c8c0; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
.security { padding:125px max(7vw,52px); display:grid; grid-template-columns:1fr 1fr; gap:10vw; background:#eef1e9; }
.security h2 { max-width:650px; }
.security-copy > p { font-size:18px; color:#596a62; line-height:1.7; margin:0 0 30px; }
.security-copy ul { list-style:none; margin:0; padding:0; border-top:1px solid rgba(24,54,42,.16); }
.security-copy li { display:flex; gap:14px; padding:17px 0; border-bottom:1px solid rgba(24,54,42,.16); font-size:14px; line-height:1.45; font-weight:650; }
.security-copy li span { color:var(--green); }
.security-copy small { display:block; color:#819087; line-height:1.55; margin-top:22px; }
.pilot { padding:24px; background:var(--paper); }
.pilot-inner { text-align:center; display:flex; flex-direction:column; align-items:center; padding:110px 30px; border-radius:28px; color:white; background:var(--green); position:relative; overflow:hidden; }
.pilot-inner:before,.pilot-inner:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; width:800px; height:420px; transform:rotate(14deg); }
.pilot-inner:after { transform:rotate(-27deg); width:610px; height:700px; }
.pilot-inner > * { position:relative; z-index:1; }
.pilot-inner h2 { max-width:900px; }
.pilot-inner > p:not(.section-kicker) { max-width:690px; margin:28px 0 0; color:#dce8df; font-size:17px; line-height:1.7; }
.pilot-points { display:flex; gap:10px; margin:30px 0; flex-wrap:wrap; justify-content:center; }
.pilot-points span { border:1px solid rgba(255,255,255,.26); border-radius:99px; padding:9px 13px; font-size:11px; font-weight:750; }
.button.cream { background:#f7f0df; color:var(--deep); }
.pilot-inner > small { margin-top:17px; color:#c5d6cb; }
.faq { padding:130px max(7vw,52px); display:grid; grid-template-columns:.65fr 1.35fr; gap:10vw; }
.faq-intro { max-width:420px; color:#65766d; line-height:1.65; font-size:16px; margin-top:24px; }
.faq-list { border-top:1px solid rgba(24,54,42,.2); }
.faq-list article { border-bottom:1px solid rgba(24,54,42,.2); }
.faq-list button { width:100%; border:0; background:transparent; color:var(--ink); padding:24px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; text-align:left; font:500 22px Georgia,serif; }
.faq-list button i { font:400 25px ui-sans-serif,sans-serif; color:var(--clay); }
.faq-list article p { margin:-4px 45px 25px 0; color:#65766d; line-height:1.65; }
.faq-list details { border-bottom:1px solid rgba(24,54,42,.2); }
.faq-list summary { width:100%; padding:24px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; text-align:left; font:500 22px Georgia,serif; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary i:after { content:"+"; font:400 25px ui-sans-serif,sans-serif; color:var(--clay); }
.faq-list details[open] summary i:after { content:"−"; }
.faq-list details p { margin:-4px 45px 25px 0; color:#65766d; line-height:1.65; }
footer { padding:70px max(7vw,52px) 30px; background:#eee9dd; }
.footer-brand { display:flex; align-items:center; gap:14px; }.footer-brand div b,.footer-brand div small { display:block; }.footer-brand div b { font:600 24px Georgia,serif; }.footer-brand div small { color:#748078; margin-top:4px; font-size:12px; }
.footer-links { display:flex; gap:30px; justify-content:flex-end; margin-top:-35px; font-size:13px; font-weight:650; }
.footer-base { margin-top:70px; padding-top:24px; border-top:1px solid rgba(24,54,42,.15); display:flex; justify-content:space-between; color:#7e8b84; font-size:11px; }
.button:hover,.nav-cta:hover { transform:translateY(-1px); }.mode-switch button:focus-visible,.faq-list button:focus-visible,a:focus-visible { outline:3px solid #d39469; outline-offset:3px; }
@media (max-width:1000px) { .connection{grid-template-columns:1fr}.security{grid-template-columns:1fr;gap:55px}.journey-card{padding:48px}.journey-copy{gap:5vw}.journey-card li{padding-right:16px}.journey-card li b{font-size:17px}.journey-card li small{font-size:11px}.detail-heading{gap:5vw}.faq{grid-template-columns:1fr;gap:55px} }
@media (max-width:760px) { .principles,.product-detail,.connection,.security,.faq{padding:85px 24px}.principle-grid{grid-template-columns:1fr;margin-top:50px}.principle-grid article,.principle-grid article+article{padding:28px 0;border-right:0;border-bottom:1px solid rgba(24,54,42,.15)}.detail-heading{grid-template-columns:1fr;gap:45px}.feature-grid{grid-template-columns:1fr;margin-top:55px}.feature-grid article{padding:34px 28px;min-height:220px}.showcase-heading{grid-template-columns:1fr;gap:22px}.screenshot-showcase{margin-top:60px;padding-top:48px}.screen-strip{margin-right:-24px}.journey-card{padding:42px 28px}.journey-copy{grid-template-columns:1fr;gap:24px}.journey-copy > p{margin:0}.journey-card ol{grid-template-columns:1fr;margin:42px 0 0;padding:0;gap:0}.journey-card ol:before{left:23px;right:auto;top:24px;bottom:24px;width:1px;height:auto}.journey-card li{min-height:94px;padding:0 0 24px 76px}.journey-card li:last-child{min-height:49px;padding-bottom:0}.journey-card li span{position:absolute;left:0;top:0}.journey-card li b{margin-top:0;padding-top:3px;font-size:19px}.journey-card li small{max-width:none;margin-top:6px;font-size:12px}.connection-diagram{grid-template-columns:1fr;gap:0}.diagram-card{min-height:190px}.handover{margin:-10px 0;transform:rotate(90deg)}.handover span{display:none}.pilot{padding:12px}.pilot-inner{padding:82px 22px}.footer-links{justify-content:flex-start;flex-wrap:wrap;margin-top:42px}.footer-base{gap:12px;flex-direction:column} }
@media (max-width:560px) { .principles,.product-detail,.connection,.security,.faq{padding:72px 22px}h2{font-size:44px}.journey-copy h3{font-size:30px}.connection-diagram{min-height:520px}.faq-list button{font-size:19px}.footer-links{gap:18px} }