.app-detail { display: grid; gap: 100px; grid-template-columns: .85fr 1.15fr; padding-top: 0; }
.app-detail h2 em { color: var(--green); font-style: normal; }
.detail-list { border-top: 1px solid var(--line); }
.detail-list > div { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: 40px 1fr; padding: 20px 0; }
.detail-list b { color: var(--green); font: 500 .7rem var(--mono); }
.detail-list strong, .detail-list small { display: block; }
.detail-list strong { font-size: 1rem; margin-bottom: 7px; }
.detail-list small { color: var(--muted); font-size: .84rem; line-height: 1.55; }
.owner-portal { background: var(--deep); color: #fff; padding: 120px 0; }
.portal-layout { align-items: center; display: grid; gap: 100px; grid-template-columns: 1.1fr .9fr; }
.portal-copy .eyebrow { color: var(--lime); }
.portal-copy h2 { margin-bottom: 25px; }
.portal-copy .muted { color: #b8cabe; }
.portal-points { border-top: 1px solid #ffffff3d; margin: 30px 0; }
.portal-points span { border-bottom: 1px solid #ffffff3d; display: block; font-size: .83rem; padding: 14px 0; }
.portal-points span:before { color: var(--yellow); content: "↗"; margin-right: 12px; }
.portal-copy .underlink { color: #fff; }
.portal-window { background: var(--white); box-shadow: 18px 22px 0 #0c2a1e; color: var(--ink); transform: rotate(-2deg); }
.portal-bar { border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font: 500 .62rem var(--mono); justify-content: space-between; padding: 17px 20px; }
.portal-live { color: var(--green); }
.portal-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; font-size: 1rem; font-weight: 700; justify-content: space-between; padding: 24px 20px; }
.portal-heading b { background: var(--green); border-radius: 999px; color: #fff; font-size: .65rem; padding: 10px 12px; }
.portal-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 13px; grid-template-columns: 34px 1fr auto; padding: 18px 20px; }
.portal-row:last-child { border: 0; }
.portal-row > i { align-items: center; background: #dcead4; border-radius: 50%; color: var(--green); display: flex; font: 500 .62rem var(--mono); font-style: normal; height: 30px; justify-content: center; width: 30px; }
.portal-row strong, .portal-row small { display: block; }
.portal-row strong { font-size: .82rem; }
.portal-row small { color: var(--muted); font-size: .68rem; margin-top: 4px; }
.portal-row > b { color: var(--green); font: 500 .62rem var(--mono); }
@media (max-width: 800px) {
  .app-detail, .portal-layout { display: block; }
  .app-detail .detail-list { margin-top: 50px; }
  .owner-portal { padding: 80px 0; }
  .portal-copy { margin-top: 60px; }
  .portal-window { transform: none; }
}
.slogan { color: var(--green); font: 500 .82rem var(--mono); letter-spacing: .02em; margin: -12px 0 0; }
.platform-availability { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; margin-top: 26px; max-width: 475px; padding-bottom: 14px; }
.platform-availability span { color: var(--muted); font: .62rem var(--mono); margin-right: 8px; text-transform: uppercase; }
.platform-availability strong, .platform-availability b { border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; padding: 7px 11px; }
.platform-availability b { background: var(--deep); border-color: var(--deep); color: #fff; font-weight: 600; }
.about-hero { padding-bottom: 125px; padding-top: 95px; }
.about-hero h1 em { color: var(--green); font-style: normal; }
.about-lede { color: var(--muted); font-size: 1.15rem; line-height: 1.7; max-width: 650px; }
.about-story { background: var(--deep); color: #fff; padding: 115px 0; }
.about-grid { display: grid; gap: 100px; grid-template-columns: .85fr 1.15fr; }
.about-story .eyebrow { color: var(--lime); }
.about-story h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
.about-story p:not(.eyebrow) { color: #b8cabe; font-size: 1rem; line-height: 1.8; max-width: 520px; }
.value-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 60px; }
.value-grid article { border-top: 1px solid var(--line); padding-top: 18px; }
.value-grid b { color: var(--green); font: 500 .7rem var(--mono); }
.value-grid h3 { font-size: 1.2rem; margin: 55px 0 10px; }
.value-grid p { color: var(--muted); font-size: .88rem; line-height: 1.65; max-width: 260px; }
.about-cta { background: var(--yellow); padding: 100px 0; }
.about-cta h2 { margin-bottom: 32px; }
@media (max-width: 800px) {
  .about-hero { padding-bottom: 80px; padding-top: 55px; }
  .about-grid { display: block; }
  .about-story { padding: 80px 0; }
  .about-story p:not(.eyebrow) { margin-top: 40px; }
  .value-grid { grid-template-columns: 1fr; margin-top: 35px; }
  .value-grid article { padding-bottom: 20px; }
  .value-grid h3 { margin-top: 25px; }
}
.field-satellite { background: var(--deep); padding: 0 36px 120px; }
.satellite-image { min-height: 650px; overflow: hidden; position: relative; }
.satellite-image > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.satellite-image:after { background: linear-gradient(90deg, #102e24dd 0%, #102e2470 36%, transparent 70%), linear-gradient(0deg, #102e244d, transparent 45%); content: ""; inset: 0; position: absolute; }
.seed-grid { background: repeating-linear-gradient(0deg, transparent 0 34px, #e8d47a9e 35px 37px); inset: 4% 3%; opacity: .85; position: absolute; transform: rotate(-4deg) scale(1.1); z-index: 1; }
.seed-grid:after { background: repeating-linear-gradient(90deg, transparent 0 72px, #ffffff55 73px 75px); content: ""; inset: 0; position: absolute; }
.field-label { color: #fff; font: 500 .62rem var(--mono); letter-spacing: .08em; position: absolute; z-index: 2; }
.field-label-a { left: 6%; top: 12%; } .field-label-b { right: 10%; top: 28%; }
.field-marker { align-items: center; background: var(--yellow); border: 4px solid #fff8b8; border-radius: 50% 50% 50% 0; color: var(--deep); display: flex; font: 500 .63rem var(--mono); height: 38px; justify-content: center; position: absolute; transform: rotate(-45deg); width: 38px; z-index: 3; }
.marker-a { left: 42%; top: 46%; } .marker-b { right: 22%; top: 31%; } .marker-c { bottom: 19%; left: 64%; }
.satellite-caption { color: #fff; left: max(36px, calc((100% - 1168px) / 2)); max-width: 390px; position: absolute; top: 26%; z-index: 3; }
.satellite-caption .eyebrow { color: var(--lime); } .satellite-caption h2 { margin-bottom: 20px; } .satellite-caption h2 em { color: var(--yellow); font-style: normal; } .satellite-caption p:last-child { color: #d4e0d5; font-size: .94rem; line-height: 1.7; }
@media (max-width: 800px) {
  .field-satellite { padding: 0 22px 80px; }
  .satellite-image { min-height: 540px; }
  .satellite-caption { left: 24px; right: 24px; top: 20%; }
  .seed-grid { transform: rotate(-4deg) scale(1.5); }
}
.contact-page { display: grid; gap: 90px; grid-template-columns: 1.2fr .8fr; padding-bottom: 130px; }
.contact-page-form > p { color: var(--muted); font-size: .95rem; line-height: 1.6; margin-bottom: 20px; max-width: 620px; }
.contact-page-form .contact-form { max-width: 620px; }
.contact-page-form .contact-form input, .contact-page-form .contact-form textarea { font-size: 1rem; padding: 15px 16px; }
.contact-page-form .contact-form textarea { min-height: 160px; }
.contact-page-direct { border-left: 1px solid var(--line); padding-left: 50px; }
.contact-page-direct .eyebrow:not(:first-child) { margin-top: 40px; }
.contact-page-direct .muted { color: var(--muted); font-size: .88rem; line-height: 1.6; margin: 10px 0 14px; max-width: 300px; }
@media (max-width: 800px) {
  .contact-page { display: block; padding-bottom: 80px; }
  .contact-page-direct { border-left: 0; border-top: 1px solid var(--line); margin-top: 50px; padding-left: 0; padding-top: 40px; }
}
.screenshot-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 55px; }
.screenshot-grid figure { margin: 0; min-width: 0; }
.screenshot-grid img { aspect-ratio: 9 / 19.5; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px #10241926; display: block; height: auto; max-width: 100%; object-fit: cover; object-position: top; width: 100%; }
.screenshot-grid figcaption { margin-top: 14px; }
.screenshot-grid figcaption strong { display: block; font-size: .88rem; }
.screenshot-grid figcaption small { color: var(--muted); display: block; font-size: .78rem; line-height: 1.5; margin-top: 3px; }
@media (max-width: 1000px) {
  .screenshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.join-notice { background: color-mix(in srgb, var(--yellow) 18%, var(--white)); border: 1px solid color-mix(in srgb, var(--yellow) 55%, var(--line)); border-radius: 12px; color: var(--ink); font-size: .92rem; line-height: 1.55; margin-bottom: 22px; padding: 16px 18px; }
.contact-form .cf-turnstile { margin: 4px 0; }
@media (max-width: 800px) {
  .screenshot-grid { gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 35px; }
}