/*
   RefugeBot homepage — deliberately small first-visit surface.
   Product detail, screenshots, and feature examples belong on /monitor and
   /companion. This file owns only the landing-page shell and its three jobs:
   explain the core, show the optional tools, and get a server connected.
*/

.home-simple {
  --simple-max: 1160px;
  --simple-pad: clamp(22px, 4vw, 52px);
  background: var(--bg-0);
}

.home-simple a { color: inherit; }
.simple-container { width: min(var(--simple-max), calc(100% - (var(--simple-pad) * 2))); margin: 0 auto; }

/* Navigation */
.simple-nav {
  position: sticky;
  top: var(--strip-total);
  z-index: 40;
  background: rgba(7, 9, 13, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.simple-nav-inner { min-height: 70px; display: flex; align-items: center; gap: 24px; }
.simple-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink) !important; min-width: max-content; }
.simple-brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--signal); color: var(--signal);
  font: 700 12px var(--display); letter-spacing: .05em;
  clip-path: var(--chamfer-sm);
}
.simple-brand b { display: block; font: 600 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.simple-brand small { display: block; margin-top: 4px; color: var(--ink-3); font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.simple-nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); margin-left: auto; }
.simple-nav-links a { color: var(--ink-2) !important; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.simple-nav-links a:hover { color: var(--signal) !important; }
.simple-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--signal); color: var(--on-signal) !important; clip-path: var(--chamfer-sm); font: 600 11px var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.simple-nav-cta:hover { background: var(--signal-hi); }

/* Shared landing primitives */
.simple-kicker { display: inline-block; color: var(--signal); font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.simple-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.simple-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 18px; border: 1px solid var(--line-hi); font: 600 12px var(--display); letter-spacing: .08em; text-transform: uppercase; transition: background var(--fast), border-color var(--fast), color var(--fast); }
.simple-button.primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal) !important; clip-path: var(--chamfer-sm); }
.simple-button.primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.simple-button.quiet { color: var(--ink) !important; background: rgba(13, 17, 23, .72); }
.simple-button.quiet:hover { border-color: var(--signal); color: var(--signal) !important; }
.simple-text-link { color: var(--scan) !important; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.simple-text-link:hover { color: var(--ink) !important; }

/* Hero */
.simple-hero { position: relative; min-height: min(720px, calc(100vh - var(--strip-total) - 70px)); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.simple-hero-art { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(7,9,13,.98) 0%, rgba(7,9,13,.9) 38%, rgba(7,9,13,.64) 100%), linear-gradient(0deg, rgba(7,9,13,.96) 0%, rgba(7,9,13,.15) 65%), url('/landing/art/hero-city.webp'); background-position: center; background-size: cover; opacity: .78; }
.simple-hero-art::after { content: ''; position: absolute; inset: 0; background-image: var(--grid-img); background-size: 56px 56px; opacity: .28; }
.simple-hero-grid { position: relative; z-index: 1; padding-top: clamp(72px, 12vh, 144px); padding-bottom: clamp(72px, 12vh, 144px); }
.simple-hero-copy { max-width: 820px; }
.simple-hero h1 { max-width: 820px; margin: 18px 0 14px; color: var(--signal); font: 700 clamp(64px, 10vw, 128px)/.88 var(--display); letter-spacing: -.02em; }
.simple-hero-tagline { max-width: 700px; margin-bottom: 22px; color: var(--ink); font: 600 clamp(25px, 3.4vw, 43px)/1.08 var(--display); letter-spacing: -.01em; }
.simple-hero-lead { max-width: 640px; color: var(--ink-2); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; }
.simple-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
.simple-hero-meta p { margin: 0; color: var(--ink-3); font: 500 11px var(--mono); letter-spacing: .04em; }
.simple-hero-meta p strong { color: var(--ink-2); }
.simple-release-link { color: var(--scan) !important; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.simple-release-link span:first-child { color: var(--ink-2); }
.simple-release-link:hover { color: var(--ink) !important; }

/* Sections */
.simple-section { padding: clamp(74px, 9vw, 126px) 0; border-bottom: 1px solid var(--line); }
.products-section { background: var(--bg-1); }
.simple-section-heading { max-width: 740px; margin-bottom: 42px; }
.simple-section-heading h2 { margin: 14px 0 12px; font: 700 clamp(32px, 4vw, 52px)/1.05 var(--display); letter-spacing: -.01em; }
.simple-section-heading p { max-width: 650px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* Product cards */
.simple-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.simple-product { display: flex; flex-direction: column; min-height: 360px; padding: 24px; background: var(--srf-0); border: 1px solid var(--line); border-top: 2px solid var(--line-hi); }
.simple-product.core-product { border-top-color: var(--signal); }
.simple-product.monitor-product { border-top-color: var(--ok); }
.simple-product.companion-product { border-top-color: var(--scan); }
.simple-product-label { color: var(--ink-3); font: 500 9px var(--mono); letter-spacing: .14em; }
.simple-product-title { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; }
.simple-product-title h3 { font: 600 25px var(--display); letter-spacing: .03em; }
.product-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-hi); font: 700 13px var(--display); clip-path: var(--chamfer-sm); }
.core-mark { border-color: var(--signal); color: var(--signal); background: var(--signal-dim); }
.monitor-mark { border-color: var(--ok); color: var(--ok); background: var(--ok-dim); }
.companion-mark { border-color: var(--scan); color: var(--scan); background: var(--scan-dim); }
.simple-product > p { min-height: 76px; color: var(--ink-2); line-height: 1.55; }
.simple-product ul { display: grid; gap: 8px; margin: 18px 0 26px; padding: 17px 0 0; border-top: 1px solid var(--line); list-style: none; }
.simple-product li { color: var(--ink-2); font-size: 13px; }
.simple-product li::before { content: '—'; margin-right: 8px; color: var(--signal); font-family: var(--mono); }
.monitor-product li::before { color: var(--ok); }
.companion-product li::before { color: var(--scan); }
.simple-card-link { margin-top: auto; color: var(--ink) !important; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.simple-card-link span { margin-left: 6px; color: var(--signal); }
.simple-card-link:hover { color: var(--signal) !important; }

/* Setup */
.setup-section { background: var(--bg-0); }
.setup-heading { margin-bottom: 34px; }
.simple-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi); border-bottom: 1px solid var(--line-hi); }
.simple-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; min-width: 0; padding: 25px 24px 28px 0; }
.simple-steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.simple-steps li > span { color: var(--signal); font: 600 22px var(--mono); }
.simple-steps small { color: var(--ink-3); font: 500 9px var(--mono); letter-spacing: .14em; }
.simple-steps h3 { margin: 9px 0 7px; font: 600 19px var(--display); }
.simple-steps p { color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.simple-setup-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 18px 20px; background: var(--srf-0); border: 1px solid var(--line); }
.simple-setup-bar > div:first-child { min-width: 0; }
.simple-setup-bar strong, .simple-setup-bar span { display: block; }
.simple-setup-bar strong { color: var(--ink); font: 600 14px var(--display); }
.simple-setup-bar span { margin-top: 4px; color: var(--ink-3); font: 500 10px var(--mono); }
.simple-setup-bar i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.simple-actions.compact { flex: 0 0 auto; }

/* Pricing */
.pricing-section { background: var(--bg-1); }
.pricing-heading { margin-bottom: 30px; }
.simple-pricing-grid { border-top: 1px solid var(--line-hi); }
.simple-price-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 100px; align-items: center; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.simple-price-row > div { display: flex; align-items: baseline; gap: 12px; }
.simple-price { color: var(--ink); font: 600 31px var(--display); }
.simple-price-label { color: var(--ink-3); font: 500 9px var(--mono); letter-spacing: .14em; }
.simple-price-row p { color: var(--ink-2); font-size: 15px; }
.simple-price-state { justify-self: end; color: var(--ink-3); font: 500 10px var(--mono); letter-spacing: .12em; }
.featured-price .simple-price { color: var(--signal); }
.featured-price a { justify-self: end; color: var(--signal) !important; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.featured-price a:hover { color: var(--ink) !important; }

/* Final handoff + footer */
.simple-final { padding: clamp(72px, 9vw, 112px) 0; background: var(--console); border-bottom: 1px solid var(--line); }
.simple-final-inner { display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.simple-final h2 { max-width: 650px; margin: 13px 0 12px; font: 700 clamp(34px, 4.4vw, 58px)/1.02 var(--display); }
.simple-final p { max-width: 580px; color: var(--ink-2); font-size: 17px; }
.simple-footer { background: var(--bg-1); }
.simple-footer-inner { display: flex; align-items: center; gap: 26px; min-height: 100px; }
.simple-footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.simple-footer-links a { color: var(--ink-2) !important; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.simple-footer-links a:hover { color: var(--signal) !important; }
.simple-footer-inner > small { color: var(--ink-3); font: 500 9px var(--mono); white-space: nowrap; }

/* Responsive */
@media (max-width: 980px) {
  .simple-hero { min-height: auto; }
  .simple-hero-copy { max-width: 820px; }
  .simple-product-grid { grid-template-columns: 1fr; }
  .simple-product { min-height: 0; }
  .simple-product > p { min-height: 0; max-width: 680px; }
  .simple-steps { grid-template-columns: 1fr; }
  .simple-steps li, .simple-steps li + li { padding: 22px 0; border-left: 0; }
  .simple-steps li + li { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .simple-nav-inner { min-height: 62px; gap: 12px; }
  .simple-nav-links { display: none; }
  .simple-nav-cta { margin-left: auto; }
  .simple-hero-grid { padding-top: 64px; padding-bottom: 68px; }
  .simple-hero h1 { font-size: clamp(42px, 12vw, 64px); }
  .simple-setup-bar, .simple-final-inner { align-items: flex-start; flex-direction: column; }
  .simple-actions.compact { align-items: flex-start; }
  .simple-price-row { grid-template-columns: 1fr; gap: 10px; }
  .simple-price-state, .featured-price a { justify-self: start; }
  .simple-footer-inner { align-items: flex-start; flex-direction: column; padding-top: 26px; padding-bottom: 26px; }
  .simple-footer-links { margin-left: 0; }
  .simple-footer-inner > small { white-space: normal; }
}

@media (max-width: 480px) {
  .simple-actions:not(.compact) .simple-button { width: 100%; }
  .simple-actions:not(.compact) { align-items: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .simple-nav, .simple-button, .simple-nav-cta { transition: none; }
}