/* NeatSpace identity v2: light city / digital horizon.
   Kept separate so the first visual proposal remains easy to compare. */
:root {
  --ink: #11294d;
  --muted: #526780;
  --paper: #f5f9ff;
  --line: #dbe5f3;
  --blue: #1f63e5;
  --mint: #d1f7f7;
  --green: #096c79;
  --night: #071831;
  --cyan: #71e6f3;
}
body { background: linear-gradient(180deg, #eaf5ff 0, #fff 850px, #f5f9ff 1600px); }
.brand { letter-spacing: -1.2px; gap: 0; }
.brand .brand-word { font-weight: 750; color: #122d54; }
.brand-word > span { color: #007d8b; font-weight: 650; }
.brand .brand-mark, .mini-brand {
  /* A sharp 50% split, not a gradient fade: one light half, one dark half. */
  color: #164886;
  background: linear-gradient(90deg, #164886 0 50%, #11b9d0 50% 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: -4px;
  font-size: 40px;
  border-radius: 0;
  width: 36px;
  height: 43px;
  padding: 0 4px 0 0;
  line-height: 1;
}
.mini-brand { display: inline-block; width: 24px; height: 27px; font-size: 27px; letter-spacing: -2px; }
.header { height: 106px; }
.header .dark { background: #143769; }
.hero {
  background: radial-gradient(ellipse at 83% 12%, #104568 0, transparent 48%),
    linear-gradient(120deg, #07132d, #092742);
  color: #f6fbff;
  padding: 64px 52px;
  gap: 32px;
  border: 1px solid #19436a;
  border-radius: 24px;
  box-shadow: 0 28px 65px #153b6218;
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-image: linear-gradient(#5895bd10 1px, transparent 1px), linear-gradient(90deg, #5895bd10 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.hero h1 { font-size: clamp(48px, 4.7vw, 68px); letter-spacing: -3px; }
.hero h1 > span { color: var(--cyan); }
.hero .eyebrow { color: #a0dbea; font-size: 10px; }
.hero .lead, .hero-note { color: #bdd0e3; }
.hero .status-dot { background: #5de2e7; }
.hero-note span { color: #6eeaf1; }
.hero .dark { background: #71e6f3; color: #082340; }
.hero .dark:hover { background: #a1f2fa; }
.hero .text-link { color: #e5f4ff; }
.hero .text-link:hover { color: #71e6f3; }
.hero .actions { gap: 20px; flex-wrap: wrap; }
.hero-art {
  background: radial-gradient(ellipse at center, #25578b90, #10284430 70%);
  border: 1px solid #70b4ec30;
  height: 440px;
  border-radius: 18px;
}
.orbit { border-color: #3cc7ee45; }
.art-label, .art-footnote { color: #add5e7; }
.product-window { color: var(--ink); border-color: #afddf2; box-shadow: 0 26px 50px #01081280; }
.window-bar { color: #597594; }
.floating-tag { color: #183f68; border-color: #cbebfc; }
.tag-icon { background: #e9f6ff; }
.check-circle { background: #daf9fc; color: #087582; }
.window-bottom { color: #456b88; }
.next-tile { border-color: #c4dbea; }
.next-tile small, .next-tile > span { color: #607a94; }
.status-dot { background: #0b8390; }
.principles { margin-top: 38px; }
.catalog { padding-block: 82px; }
.catalog .eyebrow { color: #215fab; }
.product-card { border-color: #c8dff5; box-shadow: 0 22px 55px #254e8510; }
.product-banner { grid-column: 1 / -1; background: #d7efff; }
.product-banner img, .future-banner img { display: block; width: 100%; height: auto; }
.banner-caption { display: flex; justify-content: space-between; gap: 15px; padding: 17px 28px; background: #edf8ff; border-block: 1px solid #c5e3f5; font-size: 10px; color: #285b84; letter-spacing: 1.2px; }
.banner-caption > span:last-child { letter-spacing: 0; }
.badge { background: #e2f8fa; color: #17636e; }
.product-preview { background: linear-gradient(145deg, #edf5ff, #eaf9fc); }
.mode-buttons { background: #dceaf8; }
.preview-tip { color: #17576b; background: #d7f0f5; }
.coming-next { border-color: #aec6e2; background: #edf5fc; }
.next-icon { color: #4678b8; }
.journey { background: #050f26; color: #edf6ff; padding-block: 0 76px; border-block: 1px solid #1d3d63; }
.future-banner { margin-bottom: 42px; border-bottom: 1px solid #234268; }
.journey .section-heading { padding-top: 4px; }
.journey .eyebrow, .step-number { color: #72ddf5; }
.journey .text-link { color: #85e6f6; }
.steps article { border-top: 1px solid #244965; padding-top: 23px; }
.steps p { color: #b6cce0; }
.help { padding-block: 82px; }
.closing { background: linear-gradient(115deg, #ddecff, #daf8f9); border: 1px solid #bcdbea; }
.closing .dark { background: #153b70; }
.footer .brand-mark { font-size: 35px; }
@media (max-width: 1050px) {
  .hero { padding: 40px 30px; gap: 25px; }
  .hero-art { height: 425px; }
}
@media (max-width: 740px) {
  .header { height: 88px; }
  .header .brand { font-size: 23px; }
  .brand .brand-mark { font-size: 34px; height: 36px; width: 30px; margin-right: 6px; }
  .hero { padding: 34px 22px 22px; border-radius: 18px; gap: 28px; }
  .hero h1 { font-size: clamp(39px, 10vw, 58px); letter-spacing: -1.9px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.1px; line-height: 1.6; }
  .hero .lead { font-size: 15px; }
  .hero-art { height: 365px; }
  .product-window { width: 85%; }
  .window-body { padding: 15px; }
  .window-title { font-size: 17px; }
  .tag-top { top: 42px; right: 7px; padding: 9px; font-size: 9px; }
  .tag-bottom { left: 6px; bottom: 34px; padding: 9px; }
  .art-label { left: 14px; font-size: 8px; }
  .art-footnote { font-size: 8px; right: 10px; }
  .catalog { padding-block: 50px; }
  .banner-caption { padding: 12px 17px; flex-direction: column; gap: 5px; font-size: 9px; line-height: 1.6; }
  .future-banner { margin-bottom: 28px; }
  .journey { padding-bottom: 48px; }
  .help { padding-block: 50px; }
}
@media (forced-colors: active) {
  .brand .brand-mark, .mini-brand { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
}