/* Summary: styles for the lubsoft.cloud homepage. Colours follow the LubSoft Manager tokens (accent #1f5f8b,
   navy sidebar #16324a, light tile #9cc8e6). System fonts only, nothing external.
   Keywords: css, homepage, logo, tiles, dark mode */

:root {
  --bg: #f4f6f9;
  --bg-glow: #e3eef7;
  --text: #16324a;
  --muted: #64748b;
  --accent: #1f5f8b;
  --tile-a: #ffffff;
  --tile-b: #9cc8e6;
  --tile-bg: #1f5f8b;
  --grid: rgba(31, 95, 139, .07);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1322;
    --bg-glow: #16324a;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --accent: #4f9fd6;
    --grid: rgba(156, 200, 230, .06);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font: 16px/1.5 var(--font);
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, var(--bg-glow), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg);
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
}

/* The LubSoft mark, built from four tiles so it can animate in. Same proportions as img/icon.svg. */
.tiles {
  --size: clamp(96px, 22vw, 136px);
  width: var(--size);
  height: var(--size);
  padding: calc(var(--size) * .21875);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--size) * .0625);
  border-radius: calc(var(--size) * .21875);
  background: var(--tile-bg);
  box-shadow: 0 18px 50px -12px rgba(22, 50, 74, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  margin-bottom: 32px;
}
.tiles span {
  border-radius: calc(var(--size) * .0625);
  background: var(--tile-a);
  animation: tile-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
.tiles span:nth-child(2) { background: var(--tile-b); animation-delay: .08s; }
.tiles span:nth-child(3) { background: var(--tile-b); animation-delay: .16s; }
.tiles span:nth-child(4) { animation-delay: .24s; }

@keyframes tile-in {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}

.wordmark {
  margin: 0;
  font-size: clamp(40px, 9vw, 72px);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.05;
  animation: fade-up .7s .3s cubic-bezier(.2, .8, .2, 1) both;
}
.wordmark span { color: var(--accent); font-weight: 500; }

.tagline {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2.4vw, 19px);
  max-width: 32ch;
  text-wrap: balance;
  animation: fade-up .7s .42s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.footer {
  padding: 24px 16px 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tiles span, .wordmark, .tagline { animation: none; }
}