/* EDEN product site. Horizon tokens (design/horizon/README.md) so the site
   and the app read as one family: canvas, ink, glass cards, the soft lens.
   Orange accent to match the EDEN mark (Cameron, 25 September): #b04a14 for
   text, links and buttons (5.5:1 under white text, 4.9:1 on the canvas);
   brand orange #F06723 only as logo artwork. No web-font service: the
   bundled Manrope (OFL) is the only face; system monospace for key chips. */

@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --canvas: #f1f3f1;
  --canvas-deep: #e6ebe8;
  --ink: #283530;
  --muted: #5b6862;
  --line: rgba(46, 65, 55, .13);
  --glass: rgba(255, 255, 255, .66);
  --glass-edge: rgba(255, 255, 255, .85);
  --accent: #b04a14;
  --glow: 226, 150, 102;
  --orange: #f06723;
  --shadow: 0 2px 4px rgba(30, 50, 41, .03), 0 18px 40px -24px rgba(30, 50, 41, .22);
  --ease: cubic-bezier(.32, .72, .28, 1);
  --font: Manrope, 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.6 var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse 70% 45% at 50% 12%, rgba(var(--glow), .18), transparent 70%),
    linear-gradient(170deg, #f7f7f2, var(--canvas) 40%, var(--canvas-deep));
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 550; letter-spacing: -.035em; line-height: 1.12; }
h2 { font-size: clamp(28px, 3.3vw, 42px); max-width: 22ch; }
h3 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }
kbd { font: 600 .7em var(--mono); padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff9; white-space: nowrap; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 5; padding: 10px 14px; border-radius: 10px; background: #fff; }
.skip:focus { top: 12px; }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.tile-icon svg, .search-bar svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- header ---- */
.site-header { padding-top: env(safe-area-inset-top); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand img { width: 121px; height: auto; }
.site-nav { display: flex; gap: 24px; margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 550; padding: 10px 0; }
.site-nav a:hover { color: var(--accent); }
.byline { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); font-size: 12px; padding: 8px 0; }
.byline img { width: 92px; height: auto; }

/* ---- hero: EDEN's own Home ---- */
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 6vw, 80px); overflow: hidden; } /* the lens glow is wider than a phone */
.hero-stage { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; align-items: center; gap: 32px; }
.lens { position: relative; isolation: isolate; text-align: center; padding: 48px 12px; }
.lens::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(640px, 118vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid #fff9;
  background: radial-gradient(circle at 34% 25%, #fffc, rgba(var(--glow), .14) 58%, rgba(var(--glow), .26));
  box-shadow: inset 0 2px 12px #ffffffa0, 0 50px 90px -60px rgba(var(--glow), .95);
  animation: breathe 9s var(--ease) infinite alternate;
}
@keyframes breathe { from { scale: .97; opacity: .82; } to { scale: 1.02; opacity: 1; } }
.lens h1 { font-size: clamp(40px, 6.2vw, 74px); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; margin: 0 auto 20px; max-width: 12ch; }
.lens .lead { max-width: 34em; margin: 0 auto; font-size: 18px; color: var(--muted); }
.lens .eyebrow { color: var(--accent); }

.demo-search { position: relative; max-width: 480px; margin: 30px auto 0; text-align: left; }
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 15px;
  background: #ffffffd9;
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px #fff, 0 14px 30px -16px rgba(var(--glow), .85);
  cursor: text;
  transition: box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.search-bar:hover { transform: translateY(-1px); background: #fff; }
.search-bar:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.search-bar svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent); }
.search-bar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 16px 0; outline: none; -webkit-appearance: none; appearance: none; }
.search-bar input::placeholder { color: var(--muted); opacity: 1; }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-bar kbd { font: 550 11px var(--font); color: var(--muted); }
.demo-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px;
  border-radius: 16px;
  background: rgba(251, 253, 251, .97);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 60px -30px #20372e55, inset 0 1px #fff;
}
.demo-results li { display: flex; align-items: baseline; gap: 12px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; animation: result-in 220ms var(--ease) both; }
.demo-results li strong { font-size: 15px; font-weight: 600; margin-right: auto; }
.demo-results li span { font-size: 13px; color: var(--muted); text-align: right; }
.demo-results li[aria-selected="true"], .demo-results li:hover { background: rgba(var(--glow), .16); border-color: rgba(var(--glow), .28); }
@keyframes result-in { from { opacity: 0; translate: 0 -4px; } }
.demo-note { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.demo-note em { font-style: normal; font-weight: 650; color: var(--ink); }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); background: #ffffffb3; border: 1px solid var(--line); transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.button:hover { background: #fff; border-color: rgba(var(--glow), .5); }
.button.primary { background: var(--accent); border-color: transparent; color: #fff; }
.button.primary:hover { background: #8f3c10; }

.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stack li {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 18px 16px;
  border-radius: 15px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px #fff, var(--shadow);
  animation: settle 700ms var(--ease) both;
}
.stack li:nth-child(2) { animation-delay: 90ms; }
.stack li:nth-child(3) { animation-delay: 180ms; }
.stack-right li { animation-name: settle-right; }
@keyframes settle { from { opacity: 0; translate: -14px 6px; } }
@keyframes settle-right { from { opacity: 0; translate: 14px 6px; } }
.stack strong { display: block; font-size: 15px; font-weight: 650; }
.stack small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tile-icon { flex: 0 0 36px; width: 36px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--glow), .13); color: var(--accent); }
.tile-icon svg { width: 23px; height: 23px; }

/* ---- device frames ---- */
.showcase { padding-bottom: 8px; }
.showcase-row { position: relative; padding-right: clamp(0px, 9vw, 120px); }
.window { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #fff; box-shadow: 0 2px 6px rgba(30, 50, 41, .05), 0 40px 80px -40px rgba(30, 50, 41, .45); }
.window-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: #f7f8f6; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.window-bar b { order: -1; margin-right: auto; font-weight: 600; }
/* Windows caption buttons: minimise, maximise, close */
.window-bar span { width: 10px; height: 10px; margin-left: 12px; border-top: 1.5px solid #8a948f; }
.window-bar span:nth-child(2) { border: 1.5px solid #8a948f; }
.window-bar span:nth-child(3) { border: 0; background: linear-gradient(45deg, transparent 45%, #8a948f 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #8a948f 45% 55%, transparent 55%); }
.window img { width: 100%; height: auto; }
.phone {
  position: absolute;
  right: var(--gutter);
  bottom: -40px;
  width: clamp(150px, 20vw, 250px);
  margin: 0;
  padding: 9px;
  border-radius: 38px;
  background: #1e2723;
  box-shadow: 0 30px 60px -24px rgba(20, 35, 28, .55);
}
.phone img { width: 100%; height: auto; border-radius: 30px; }
.caption { margin-top: 64px; font-size: 13px; color: var(--muted); }

/* ---- sections ---- */
.section { padding: clamp(56px, 8vw, 110px) 0 0; }
.section h2 + * { margin-top: 36px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.steps li { position: relative; padding: 26px 24px 28px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px #fff, var(--shadow); counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 50%; font-weight: 650; font-size: 14px; color: var(--accent); background: rgba(var(--glow), .16); }
.steps h3 { margin-bottom: 8px; }
.steps p, .modules p, .platform p, .security dd, .split p:not(.eyebrow) { color: var(--muted); font-size: 16px; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split h2 { margin-bottom: 18px; }

.modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.modules li { grid-column: span 2; padding: 24px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px #fff, var(--shadow); scroll-margin-top: 24px; }
.modules li:nth-child(4) { grid-column: 2 / span 2; }
.modules .tile-icon { margin-bottom: 18px; }
.modules h3 { margin-bottom: 6px; }
.module-shot { max-width: 920px; margin: 40px auto 0; }
.modules li:target { outline: 2px solid rgba(var(--glow), .7); outline-offset: 3px; }

.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.platform { padding: 28px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px #fff, var(--shadow); scroll-margin-top: 24px; }
.platform h3 { margin-bottom: 8px; }
.platform .soon { margin-top: 14px; font-size: 14px; color: var(--ink); padding-left: 12px; border-left: 3px solid rgba(var(--glow), .6); }

.security { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin: 0; }
.security div { padding-top: 20px; border-top: 1px solid var(--line); }
.security dt { font-weight: 650; font-size: 18px; letter-spacing: -.015em; margin-bottom: 8px; }
.security dd { margin: 0; }

.contact { padding-bottom: clamp(56px, 8vw, 110px); }
.contact-card { position: relative; isolation: isolate; max-width: 820px; padding-top: 56px; padding-bottom: 56px; text-align: center; }
.contact-card::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 28px; background: radial-gradient(ellipse at 50% 0%, rgba(var(--glow), .22), transparent 70%), var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px #fff, var(--shadow); }
.contact-card h2 { margin: 0 auto 14px; }
.contact-card > p:not(.eyebrow) { color: var(--muted); }
.contact-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.contact-list li { display: flex; flex-direction: column; align-items: center; }
.contact-list span { font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-list a { font-weight: 600; font-size: 17px; padding: 6px 0; }

.site-footer { border-top: 1px solid var(--line); padding: 28px 0 max(28px, env(safe-area-inset-bottom)); font-size: 13px; color: var(--muted); }
.footer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.footer-mark { width: 34px; height: 34px; }
.footer-legal { margin-left: auto; }

/* scroll reveals: only when JS runs and motion is welcome (site.js adds .motion) */
.motion .reveal { opacity: 0; translate: 0 18px; transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
.motion .reveal.in { opacity: 1; translate: 0 0; }

@media (max-width: 1080px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr); }
  .stack { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .site-nav { display: none; }
  .byline { margin-left: auto; }
  .steps, .security, .platforms { grid-template-columns: minmax(0, 1fr); }
  .security { gap: 24px; }
  .modules { grid-template-columns: minmax(0, 1fr); }
  .modules li, .modules li:nth-child(4) { grid-column: auto; }
  .showcase-row { padding-right: 0; }
  .phone { position: relative; right: auto; bottom: auto; width: min(260px, 70%); margin: -90px 16px 0 auto; }
  .caption { margin-top: 20px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .header-row { min-height: 64px; gap: 12px; }
  .brand img { width: 100px; }
  .byline span { display: none; }
  .lens { padding: 28px 0; }
  .lens .lead { font-size: 16px; }
  .footer-legal { margin-left: 0; }
}
@media (hover: none), (pointer: coarse) {
  .search-bar kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .lens::before, .contact-card::before { display: none; }
  .stack li, .steps li, .modules li, .platform, .search-bar, .demo-results, .window { border: 1px solid CanvasText; }
}