/* ===========================================================================
   SpaceAce landing page — reuses the app's design tokens verbatim so the site
   matches the tool (warm-white, bronze/taupe accent, 8px radii, Segoe UI).
   Tokens mirror src/SpaceAce.App/wwwroot/styles.css :root.
   =========================================================================== */
:root {
  --bg-canvas:   #FAF9F6;
  --bg-sidebar:  #F2F0EA;
  --bg-toolbar:  #FBFAF7;
  --bg-elevated: #FFFFFF;
  --bg-row-hover:    rgba(0,0,0,0.045);

  --text-primary:   #1D1D1F;
  --text-secondary: #4B4B50;
  --text-muted:     #67676C; /* WCAG AA ≥ 4.5:1 on canvas, white, sidebar and selected rows (was #86868B = 3.4:1) */

  --accent:    #8A6A3C;
  --accent-2:  #B8966A;
  --accent-gradient: linear-gradient(135deg, #8A6A3C 0%, #B8966A 100%);
  --accent-tint: rgba(138,106,60,0.12);

  --cta-bg: linear-gradient(180deg, #EFE9DE 0%, #E1D8C8 100%);
  --cta-text: #4A4334;

  --border-hairline: rgba(0,0,0,0.09);
  --border-divider:  rgba(0,0,0,0.06);
  --border-control:  rgba(0,0,0,0.16);

  --danger: #B24A48; --success: #248A3D; --focus-ring: #8A6A3C;

  --cat-video: #C2724E; --cat-images: #CDA15C; --cat-audio: #B07F9C;
  --cat-documents: #7B9FB8; --cat-archives: #C4B976; --cat-code: #6E9E83;
  --cat-executables: #6C88A6; --cat-system: #A8A096; --cat-other: #8E8678;

  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-2xl: 32px; --s-3xl: 56px;
  --radius: 8px; --radius-lg: 14px;
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 30px rgba(0,0,0,0.06);
  --shadow-float: 0 18px 50px rgba(60,48,30,0.16);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--accent); text-decoration: none; }
img, svg { display: block; }

/* ---- shared brand wordmark ---- */
.brand { display: inline-flex; align-items: center; gap: var(--s-sm); color: inherit; }
.brand-logo { color: var(--accent); display: inline-flex; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: -0.2px; }
.brand-name b { font-weight: 600; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- buttons (mirrors the app .btn family) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  height: var(--h, 38px); padding: 0 var(--s-lg);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background .15s, filter .15s, border-color .15s;
}
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-primary { color: var(--cta-text); background: var(--cta-bg); border-color: var(--border-control); }
.btn-primary:hover { filter: brightness(0.98); }
.btn-ghost { color: var(--text-primary); background: transparent; border-color: var(--border-control); }
.btn-ghost:hover { background: var(--bg-row-hover); }
.btn-lg { --h: 46px; padding: 0 var(--s-xl); font-size: 15px; }
.btn-xl { --h: 56px; padding: 0 var(--s-2xl); font-size: 17px; border-radius: var(--radius-lg); }
.dl-ic { display: inline-flex; }

/* ===========================================================================
   Header
   =========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-lg); height: 60px; padding: 0 var(--s-xl);
  background: rgba(251,250,247,0.82); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border-divider);
}
.site-nav { display: flex; align-items: center; gap: var(--s-xl); }
.site-nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.site-nav a:hover { color: var(--text-primary); }

.lang-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-canvas); border: 1px solid var(--border-control); border-radius: var(--radius); }
.lang-seg button {
  min-width: 34px; height: 26px; padding: 0 var(--s-sm);
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-muted); background: transparent; border: none; border-radius: 6px; cursor: pointer;
}
.lang-seg button[aria-pressed="true"] { color: var(--text-primary); background: var(--accent-tint); }
.lang-seg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s-3xl) var(--s-xl) var(--s-2xl);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3xl); align-items: center;
}
.hero-title { font-size: clamp(44px, 7vw, 76px); font-weight: 600; letter-spacing: -2px; margin: 0 0 var(--s-sm); }
.hero-title span { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-tagline { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; color: var(--text-primary); margin: 0 0 var(--s-md); letter-spacing: -0.4px; }
.hero-sub { font-size: 17px; color: var(--text-secondary); margin: 0 0 var(--s-xl); max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-bottom: var(--s-md); }
.hero-meta { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ---- screenshot showcase carousel ---- */
/* The slides are laptop mockups on a transparent background (device shadow included) — no frame of their own; the
   full screenshot opens in the lightbox. */
.sc { display: flex; flex-direction: column; gap: var(--s-sm); }
.sc-viewport { position: relative; cursor: zoom-in; border-radius: var(--radius-lg); }
.sc-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.sc-zoom {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary); background: rgba(255,255,255,0.86);
  border: 1px solid var(--border-hairline); border-radius: 8px; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s;
}
.sc-viewport:hover .sc-zoom, .sc-zoom:focus-visible { opacity: 1; }
.sc-zoom svg { width: 18px; height: 18px; }
/* Captions change per slide: all of them share one grid cell (only .active visible), so the box always has the height
   of the longest one — a fixed min-height guessed 2 lines (2.6em < 2 × 1.5em) and the page jumped. */
.sc-cap { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); text-align: center; display: grid; }
.cap-item { grid-area: 1 / 1; visibility: hidden; }
.cap-item.active { visibility: visible; }
.sc-bar { display: flex; align-items: center; justify-content: center; gap: var(--s-md); }
.sc-nav {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  color: var(--text-secondary);
  background: var(--bg-elevated); border: 1px solid var(--border-control); border-radius: 50%; cursor: pointer;
}
.sc-nav svg { width: 14px; height: 14px; }
.sc-pause { margin-left: var(--s-sm); }       /* its own group: the slide controls are prev · dots · next */
.sc-pause .ic-play, .sc-pause.is-paused .ic-pause { display: none; }
.sc-pause.is-paused .ic-play { display: block; }
.sc-pause[hidden] { display: none; }
.sc-nav:hover { color: var(--text-primary); background: var(--bg-row-hover); }
.sc-dots { display: inline-flex; align-items: center; }
/* 24 × 24 px target (WCAG 2.5.8), 8 px dot drawn inside */
.sc-dot { width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sc-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-control); transition: background .15s, transform .15s; }
.sc-dot.active::before { background: var(--accent); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .sc-dot::before { transition: none; } }
.sc-single .sc-bar { display: none; }
.sc-nav:focus-visible, .sc-dot:focus-visible, .sc-zoom:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- lightbox (full-size screenshot) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-md);
  padding: var(--s-xl); background: rgba(20,16,10,0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox.hidden { display: none; }
.lb-img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lb-cap { max-width: 60ch; color: rgba(255,255,255,0.92); font-size: 14px; text-align: center; display: grid; } /* .cap-item stack, see .sc-cap */
.lb-close, .lb-nav {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%; cursor: pointer; line-height: 1;
}
.lb-close { top: 16px; right: 20px; width: 40px; height: 40px; padding: 0; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; padding: 0; }
.lb-close svg { width: 18px; height: 18px; }
.lb-nav svg { width: 20px; height: 20px; }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 24px; } .lb-next { right: 24px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,0.24); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 620px) { .lb-nav { width: 38px; height: 38px; } .lb-prev { left: 8px; } .lb-next { right: 8px; } }
body.lb-open { overflow: hidden; } /* no page scroll behind the dialog */

/* ---- app window mockup (fallback until a real screenshot is dropped in) ---- */
.mockup {
  background: var(--bg-toolbar); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden;
}
.mockup-bar { display: flex; align-items: center; gap: var(--s-sm); height: 40px; padding: 0 var(--s-md); border-bottom: 1px solid var(--border-divider); }
.mockup-logo { color: var(--accent); display: inline-flex; }
.mockup-title { font-weight: 600; font-size: 13px; }
.mockup-title b { font-weight: 600; color: var(--accent); }
.mockup-winbtns { margin-left: auto; display: inline-flex; gap: 7px; }
.mockup-winbtns i { width: 11px; height: 2px; background: var(--text-disabled, #AEAEB2); border-radius: 2px; }
.mockup-tools { display: flex; align-items: center; gap: var(--s-md); height: 44px; padding: 0 var(--s-md); border-bottom: 1px solid var(--border-divider); }
.mockup-pill { font-size: 12px; font-weight: 600; color: var(--cta-text); background: var(--cta-bg); border: 1px solid var(--border-control); border-radius: var(--radius); padding: 6px 12px; }
.mockup-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-canvas); border: 1px solid var(--border-control); border-radius: var(--radius); }
.mockup-seg i { width: 16px; height: 16px; border-radius: 5px; background: transparent; }
.mockup-seg i.on { background: var(--accent-tint); }
.mockup-body { height: 300px; padding: 8px; background: var(--bg-canvas); }
.mockup-body svg { width: 100%; height: 100%; border-radius: var(--radius); }

/* ===========================================================================
   Features
   =========================================================================== */
.section-title { font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; letter-spacing: -0.6px; text-align: center; margin: 0 0 var(--s-2xl); }
.features { max-width: var(--maxw); margin: 0 auto; padding: var(--s-2xl) var(--s-xl) var(--s-3xl); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.feature {
  background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  padding: var(--s-xl); box-shadow: var(--shadow-card);
}
.feature-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: var(--s-md);
  color: var(--accent); background: var(--accent-tint); border-radius: 10px;
}
.feature-ic svg { width: 22px; height: 22px; }
.feature h3 { font-size: 18px; font-weight: 600; margin: 0 0 var(--s-xs); letter-spacing: -0.2px; }
.feature p { font-size: 14.5px; color: var(--text-secondary); margin: 0; line-height: 1.55; }

.feature-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-sm); margin: var(--s-2xl) 0 0; padding: 0; }
.feature-chips li { font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-control); border-radius: var(--radius); padding: 6px 12px; }

/* ===========================================================================
   Feature spotlights (real UI close-ups)
   =========================================================================== */
.spotlight { max-width: var(--maxw); margin: 0 auto; padding: var(--s-2xl) var(--s-xl) var(--s-3xl); }
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: center; margin-bottom: var(--s-2xl); }
.spot:last-child { margin-bottom: 0; }
.spot.reverse .spot-media { order: 2; }     /* image moves to the right, text to the left */
/* Close-ups of the real UI (2× captures; width/height attributes = CSS px). All three show the UI at about the same
   scale (~0.8) — the menu crop is narrow and was blown up to 1.3× next to a context menu at 0.75×. */
.spot-media { display: flex; justify-content: center; }
.spot-media img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); }
.spot-media--portrait img { width: 300px; }
.spot-text h3 { font-size: clamp(20px, 2.4vw, 25px); font-weight: 600; letter-spacing: -0.4px; margin: 0 0 var(--s-sm); }
.spot-text p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 760px) {
  .spot, .spot.reverse { grid-template-columns: 1fr; gap: var(--s-lg); }
  .spot.reverse .spot-media { order: 0; }
  .spot-media--portrait img { max-height: 540px; }
}

/* ===========================================================================
   Download
   =========================================================================== */
.download { padding: 0 var(--s-xl) var(--s-3xl); }
.dl-card {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: var(--bg-elevated); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--s-3xl) var(--s-2xl);
}
.dl-text { font-size: 16px; color: var(--text-secondary); margin: 0 auto var(--s-xl); max-width: 38em; }
.dl-card .btn-xl { margin: 0 auto; }
.dl-meta { font-size: 13px; color: var(--text-muted); margin: var(--s-md) 0 0; }
/* Second offer (portable ZIP): its own line, twice the button→meta gap, so it doesn't read as part of the file info. */
.dl-alt { font-size: 13px; color: var(--text-muted); margin: var(--s-xl) 0 0; }
.dl-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dl-alt a:hover, .dl-alt a:focus-visible { color: var(--text-primary); }
.dl-req { text-align: left; max-width: 38em; margin: var(--s-2xl) auto 0; padding-top: var(--s-xl); border-top: 1px solid var(--border-divider); }
.dl-req h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 var(--s-sm); }
.dl-req ul { margin: 0 0 var(--s-md); padding-left: 1.2em; }
.dl-req li { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; }
.dl-note { font-size: 13px; color: var(--text-muted); margin: 0; background: var(--bg-canvas); border: 1px solid var(--border-divider); border-radius: var(--radius); padding: var(--s-md); }
.dl-firstrun { margin-top: var(--s-md); background: var(--bg-canvas); border: 1px solid var(--border-divider); border-radius: var(--radius); padding: var(--s-md) var(--s-lg); }
.dl-firstrun h4 { margin: 0 0 var(--s-xs); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dl-firstrun p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.dl-steps { margin: var(--s-sm) 0 0; padding-left: 1.3em; }
.dl-steps li { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 3px; }
.dl-steps li b { color: var(--text-primary); font-weight: 600; }
.dl-firstrun-note { margin-top: var(--s-sm) !important; font-size: 12.5px; color: var(--text-muted); }

/* ===========================================================================
   Footer
   =========================================================================== */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-sm) var(--s-md);
  padding: var(--s-2xl) var(--s-xl); border-top: 1px solid var(--border-divider);
  font-size: 13px; color: var(--text-muted);
}
.site-foot .brand-name { font-size: 14px; }
.foot-tag { color: var(--text-secondary); }
.foot-legal { color: var(--text-secondary); text-decoration: none; }
.foot-legal:hover, .foot-legal:focus-visible { color: var(--accent); text-decoration: underline; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-2xl); padding-top: var(--s-2xl); }
  .hero-copy { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .mockup { order: -1; max-width: 560px; margin: 0 auto; width: 100%; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .site-head { padding: 0 var(--s-md); }
  .site-nav { gap: var(--s-md); }
  .site-nav a { display: none; }            /* keep only the language toggle on small screens */
  .feature-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .dl-card { padding: var(--s-2xl) var(--s-lg); }
}