/* ============================================================
   Starbit — hlavní web starbit.cz
   ------------------------------------------------------------
   Vizuální jazyk převzat 1:1 z login screenu support.starbit.cz
   (modules/CustomUI/public/css/login.css): tokeny, kompas, Polárka,
   particle systém, sunrise, tmavý default + světlý přepínač.
   Sem doplněny marketingové sekce (hero, služby, o nás, kontakt).
   ============================================================ */

/* ============================================================
   BRAND TOKENS (z login.css — zdroj pravdy)
   ============================================================ */
:root {
  --brand-white: #FFFFFF;
  --brand-100: #B7BFFF;
  --brand-200: #7F8EFF;
  --brand-300: #5D6FFF;
  --brand-400: #5064FF;
  --brand-500: #3744b0;
  --brand-600: #283382;
  --brand-700: #1C235A;
  --brand-800: #121639;
  --brand-900: #080842;
  --brand-ink: #000014;

  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', monospace;

  /* === DARK (default) === */
  --bg-visual: radial-gradient(ellipse at 50% 60%, #11163A 0%, #05051F 55%, #010109 100%);
  --bg-solid: #010109;
  --bg-card: rgba(20, 24, 70, 0.45);
  --bg-card-border: rgba(127, 142, 255, 0.18);

  --text-primary: #FFFFFF;
  --text-secondary: #B7BFFF;
  --text-muted: rgba(183, 191, 255, 0.55);
  --text-on-muted: rgba(199, 206, 255, 0.92);

  --compass-ring: rgba(183, 191, 255, 0.15);
  --compass-ring-soft: rgba(183, 191, 255, 0.08);
  --compass-marker: var(--brand-100);
  --compass-marker-n: var(--brand-200);

  --polaris-color: #FFFFFF;
  --polaris-glow-1: rgba(255, 255, 255, 0.9);
  --polaris-glow-2: rgba(127, 142, 255, 0.7);
  --polaris-glow-3: rgba(80, 100, 255, 0.5);

  --particle-color: rgba(255, 255, 255, 0.7);
  --particle-color-accent: rgba(127, 142, 255, 0.8);

  --card-bg: rgba(255, 255, 255, 0.06);
  --card-bd: rgba(80, 100, 255, 0.22);
  --input-bg: rgba(255, 255, 255, 0.085);
  --input-bd: rgba(160, 172, 255, 0.42);

  --submit-bg: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-300) 100%);
  --submit-shadow: 0 10px 30px -8px rgba(80, 100, 255, 0.55);

  --divider: rgba(190, 198, 255, 0.14);
  --link-color: var(--brand-200);
  --link-hover: var(--brand-white);

  --nav-bg: rgba(5, 6, 22, 0.55);
  --nav-bd: rgba(255, 255, 255, 0.07);

  --logo-src-h: url("../img/Starbit_Logo_C_H_Negative_RGB.svg");
  --logo-src-s: url("../img/Starbit_Logo_C_S_Negative_RGB.svg");
  --symbol-src: url("../img/Starbit_Symbol_C_Colour_RGB.svg");
}

[data-theme="light"] {
  --bg-visual: radial-gradient(ellipse at 50% 80%, #DDE2FF 0%, #EFF1FF 50%, #FFFFFF 100%);
  --bg-solid: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.65);
  --bg-card-border: rgba(80, 100, 255, 0.14);

  --text-primary: #080842;
  --text-secondary: #283382;
  --text-muted: rgba(8, 8, 66, 0.55);
  --text-on-muted: rgba(8, 8, 66, 0.62);

  --compass-ring: rgba(80, 100, 255, 0.2);
  --compass-ring-soft: rgba(80, 100, 255, 0.1);
  --compass-marker: var(--brand-500);
  --compass-marker-n: var(--brand-400);

  --polaris-color: var(--brand-400);
  --polaris-glow-1: rgba(80, 100, 255, 0.9);
  --polaris-glow-2: rgba(80, 100, 255, 0.55);
  --polaris-glow-3: rgba(80, 100, 255, 0.3);

  --particle-color: rgba(80, 100, 255, 0.5);
  --particle-color-accent: rgba(80, 100, 255, 0.85);

  --card-bg: rgba(80, 100, 255, 0.05);
  --card-bd: rgba(80, 100, 255, 0.28);
  --input-bg: #FFFFFF;
  --input-bd: rgba(80, 100, 255, 0.35);

  --submit-bg: var(--brand-400);
  --submit-shadow: 0 10px 28px -8px rgba(80, 100, 255, 0.4);

  --divider: rgba(8, 8, 66, 0.1);
  --link-color: var(--brand-400);
  --link-hover: var(--brand-700);

  --nav-bg: rgba(255, 255, 255, 0.62);
  --nav-bd: rgba(0, 0, 20, 0.07);

  --logo-src-h: url("../img/Starbit_Logo_C_H_Positive_RGB.svg");
  --logo-src-s: url("../img/Starbit_Logo_C_S_Positive_RGB.svg");
  --symbol-src: url("../img/Starbit_Symbol_C_Positive_RGB.svg");
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-solid);
  overflow-x: hidden;
  transition: color 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Plná šířka „do krajů" — sjednoceno se split layoutem support loginu (jen boční padding) */
.wrap { width: 100%; margin: 0; padding: 0 40px; }

/* ============================================================
   BACKGROUND LAYERS (fixed — sdílená obloha přes celý web)
   ============================================================ */
.bg-visual {
  position: fixed; inset: 0; z-index: -3;
  background: var(--bg-visual);
  transition: background 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.bg-noise {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.4; mix-blend-mode: overlay;
}
.bg-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* Parallax vrstvy — každá se při scrollu posouvá jinou rychlostí (3D hloubka) */
.bg-particles .player { position: absolute; inset: 0; will-change: transform; }
.bg-particles .particle {
  position: absolute; border-radius: 50%;
  transition: background 1s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 1s cubic-bezier(0.65, 0, 0.35, 1);
}
[data-theme="dark"] .bg-particles .particle.star {
  background: var(--particle-color); animation: starTwinkle 4s ease-in-out infinite;
}
[data-theme="dark"] .bg-particles .particle.accent {
  background: var(--particle-color-accent); box-shadow: 0 0 8px var(--particle-color-accent);
}
[data-theme="dark"] .bg-particles .particle.bright {
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 16px var(--particle-color-accent);
  animation: starTwinkle 5s ease-in-out infinite;
}
[data-theme="light"] .bg-particles .particle { background: var(--particle-color); animation: none; box-shadow: none; }
[data-theme="light"] .bg-particles .particle.accent { background: var(--particle-color-accent); box-shadow: 0 0 12px rgba(80,100,255,0.3); }
[data-theme="light"] .bg-particles .particle.bright { background: var(--particle-color-accent); box-shadow: 0 0 14px rgba(80,100,255,0.45); }
@keyframes starTwinkle { 0%,100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

.sunrise-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,220,180,0.18) 0%, rgba(127,142,255,0.10) 40%, transparent 70%);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.6, 1);
}
body.theme-transitioning .sunrise-overlay { opacity: 1; }

/* text-shadow na tmavém režimu, ať texty nesplývají s hvězdami (jako na loginu) */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .svc-d,
[data-theme="dark"] .foot,
[data-theme="dark"] .divider-txt {
  text-shadow: 0 1px 6px rgba(0, 0, 12, 0.8), 0 0 2px rgba(0, 0, 12, 0.9);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-bd);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 0.8s ease, border-color 0.8s ease;
}
.nav-in { display: flex; align-items: center; justify-content: space-between; padding: 10px 40px; width: 100%; margin: 0; }
/* Logo velké, vlevo nahoře ve výšce menu (sjednoceno s login topbarem) */
.logo { height: 60px; width: 240px; background-image: var(--logo-src-h); background-size: contain; background-repeat: no-repeat; background-position: left center; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; }
.nav-links a.lnk { color: var(--text-secondary); opacity: 0.85; transition: color 0.2s, opacity 0.2s; }
.nav-links a.lnk:hover { color: var(--text-primary); opacity: 1; }
/* Přepínač režimu úplně vpravo v rohu (stejně jako support login) */
.nav-links .theme-toggle { order: 3; }

/* theme toggle (z loginu) */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border: 1px solid var(--bg-card-border); background: var(--bg-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 100px; cursor: pointer; transition: all 0.3s ease;
}
.theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0,0,30,0.15); }
.theme-toggle-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); transition: all 0.3s ease;
}
.theme-toggle-btn svg { width: 15px; height: 15px; }
.theme-toggle-btn.active { background: var(--brand-400); color: #fff; }
.theme-toggle-btn:not(.active):hover { color: var(--text-secondary); }

.cta {
  background: var(--submit-bg); color: #fff; padding: 9px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; display: inline-block; transition: transform 0.25s, box-shadow 0.25s;
}
.cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(80,100,255,0.4); }
.ghost {
  border: 1px solid var(--input-bd); color: var(--text-primary); padding: 13px 26px; border-radius: 12px;
  font-size: 15px; font-weight: 500; display: inline-block; transition: all 0.25s;
}
.ghost:hover { color: var(--text-primary); background: rgba(80,100,255,0.1); transform: translateY(-1px); }

/* ============================================================
   TYPO helpers
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.5; }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; color: var(--text-primary); margin: 0; }
.display em { font-style: italic; font-weight: 400; color: var(--brand-300); }
[data-theme="light"] .display em { color: var(--brand-400); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding: 60px 0 86px; }
/* Kompas vlevo, text vpravo — mirror support loginu (bod 1). Pořadí řídí DOM. */
.hero-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 48px; }
.hero-h1 { font-size: clamp(42px, 5.2vw, 60px); margin: 18px 0 22px; }
.hero-sub { color: var(--text-secondary); opacity: 0.82; font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0 0 30px; }

/* AI chat (zatím statický) */
.chat {
  display: flex; align-items: center; gap: 12px; max-width: 460px;
  background: var(--input-bg); border: 1px solid var(--input-bd); border-radius: 14px;
  padding: 13px 13px 13px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat:hover { border-color: var(--brand-400); }
.chat .ph { flex: 1; color: var(--text-muted); font-size: 15.5px; }
.chat .send {
  flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--submit-bg);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(80,100,255,0.35); cursor: pointer;
}
.chat .send svg { width: 17px; height: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip {
  font-size: 13.5px; padding: 8px 15px; border-radius: 999px; background: var(--card-bg);
  border: 1px solid var(--card-bd); color: var(--text-secondary); cursor: default;
  white-space: nowrap; transition: all 0.25s;
}
.chip:hover { border-color: var(--brand-400); color: var(--text-primary); background: rgba(80,100,255,0.12); }

.hero-left { order: 2; }
.hero-right { order: 1; display: flex; justify-content: center; }

/* ============================================================
   COMPASS + POLÁRKA (1:1 z login.css)
   ============================================================ */
.compass-dial { position: relative; width: 380px; height: 380px; }
.compass-dial.sm { width: 260px; height: 260px; }
.compass-ring { position: absolute; border-radius: 50%; border: 1px solid var(--compass-ring); transition: border-color 1s cubic-bezier(0.65,0,0.35,1); }
.compass-ring-1 { inset: 0; }
.compass-ring-2 { inset: 42px; border-color: var(--compass-ring-soft); }
.compass-ring-3 { inset: 84px; border-color: var(--compass-ring-soft); opacity: 0.6; }
.compass-marker {
  position: absolute; font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--compass-marker); opacity: 0.85;
  transition: color 1s cubic-bezier(0.65,0,0.35,1);
}
.compass-marker.n { top: -40px; left: 50%; transform: translateX(-50%); color: var(--compass-marker-n); opacity: 1; font-weight: 700; font-size: 14px; letter-spacing: 0.16em; }
.compass-marker.e { right: -30px; top: 50%; transform: translateY(-50%); }
.compass-marker.s { bottom: -30px; left: 50%; transform: translateX(-50%); }
.compass-marker.w { left: -30px; top: 50%; transform: translateY(-50%); }
.compass-symbol {
  position: absolute; inset: 70px; background-image: var(--symbol-src);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 0 22px rgba(80,100,255,0.4));
}
.compass-dial.sm .compass-symbol { inset: 48px; }

.polaris {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; z-index: 3;
  animation: polarisRise 4.8s cubic-bezier(0.22,1,0.36,1) both, polarisPulse 4s ease-in-out 4.8s infinite;
}
@keyframes polarisRise {
  0%   { top: calc(50% - 14px); opacity: 0; transform: translateX(-50%) scale(0.3); }
  12%  { top: calc(50% - 14px); opacity: 1; transform: translateX(-50%) scale(4.6); }
  30%  { top: calc(50% - 14px); opacity: 1; transform: translateX(-50%) scale(4.6); }
  100% { top: -14px; opacity: 1; transform: translateX(-50%) scale(1); }
}
.polaris::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, var(--polaris-glow-3) 60%, transparent 100%);
  animation: polarisHalo 3s ease-in-out infinite;
}
.polaris-glow { position: absolute; inset: 20%; background: var(--polaris-color); border-radius: 50%; filter: blur(8px); opacity: 0.65; transition: background 1s cubic-bezier(0.65,0,0.35,1); }
.polaris-star {
  position: relative; width: 100%; height: 100%; color: var(--polaris-color); fill: currentColor;
  filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2));
  transition: color 1s cubic-bezier(0.65,0,0.35,1), filter 1s cubic-bezier(0.65,0,0.35,1);
  animation: polarisIgnite 1s ease-out 0.5s both, polarisArrive 1.2s ease-out 4.85s forwards, polarisSparkle 6s ease-in-out 6.2s infinite;
}
@keyframes polarisIgnite {
  0%   { transform: scale(1); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
  45%  { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--polaris-glow-1)) drop-shadow(0 0 26px var(--polaris-glow-1)) drop-shadow(0 0 52px var(--polaris-glow-2)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
}
@keyframes polarisArrive {
  0%   { transform: scale(1); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
  55%  { transform: scale(1.28); filter: drop-shadow(0 0 10px var(--polaris-glow-1)) drop-shadow(0 0 26px var(--polaris-glow-1)) drop-shadow(0 0 50px var(--polaris-glow-2)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
}
@keyframes polarisSparkle {
  0%,78% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
  89%    { transform: rotate(45deg) scale(1.5); filter: drop-shadow(0 0 12px var(--polaris-glow-1)) drop-shadow(0 0 32px var(--polaris-glow-1)) drop-shadow(0 0 64px var(--polaris-glow-2)); }
  100%   { transform: rotate(90deg) scale(1); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
}
@keyframes polarisPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.18); } }
@keyframes polarisHalo { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(2.6); opacity: 0; } }
body.theme-transitioning .polaris-star { animation: polarisTwinkle 1.2s cubic-bezier(0.4,0,0.2,1); }
@keyframes polarisTwinkle {
  0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
  40%  { transform: scale(1.8) rotate(45deg); filter: drop-shadow(0 0 12px var(--polaris-glow-1)) drop-shadow(0 0 32px var(--polaris-glow-1)) drop-shadow(0 0 64px var(--polaris-glow-2)); }
  100% { transform: scale(1) rotate(90deg); filter: drop-shadow(0 0 4px var(--polaris-glow-1)) drop-shadow(0 0 12px var(--polaris-glow-2)); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { padding: 92px 0; border-top: 1px solid var(--divider); position: relative; }
.sec-head { max-width: 56ch; }
.sec-h2 { font-size: clamp(30px, 3.6vw, 40px); margin: 12px 0 12px; }
.sec-lead { color: var(--text-secondary); opacity: 0.82; font-size: 16px; line-height: 1.6; margin: 0 0 30px; }

/* Služby — editoriální číslovaný seznam */
.svc-row {
  display: grid; grid-template-columns: 52px 1fr 1.15fr 28px; align-items: center; gap: 24px;
  padding: 24px 6px; border-top: 1px solid var(--divider); color: inherit; transition: padding-left 0.25s;
}
.svc-row:last-child { border-bottom: 1px solid var(--divider); }
.svc-n { font-family: var(--font-mono); font-size: 12px; color: var(--brand-200); }
.svc-t { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); }
.svc-d { color: var(--text-secondary); opacity: 0.8; font-size: 14px; line-height: 1.5; }
.svc-ar { color: var(--text-muted); text-align: right; transition: transform 0.25s, color 0.25s; }
.svc-row:hover { padding-left: 16px; }
.svc-row:hover .svc-ar { color: var(--brand-400); transform: translateX(4px); }

/* O nás */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); }
.about-p { color: var(--text-secondary); opacity: 0.85; font-size: 16px; line-height: 1.65; max-width: 46ch; }
.about-founder { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--text-muted); }

/* Kontakt */
.contact { text-align: center; }
.contact .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.contact .cta { padding: 14px 26px; font-size: 15px; }

/* Footer */
.foot {
  border-top: 1px solid var(--divider); padding: 26px 0 46px;
  display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--text-muted);
}
.foot .wordmark { font-size: 18px; letter-spacing: normal; }
.foot a { color: var(--text-muted); transition: color 0.2s; }
.foot a:hover { color: var(--text-primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .wrap, .nav-in { padding-left: 24px; padding-right: 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .hero .eyebrow, .hero .chips { justify-content: center; }
  .hero .chat { margin: 0 auto; text-align: left; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .compass-dial { width: 300px; height: 300px; }
  .compass-symbol { inset: 56px; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .logo { height: 44px; width: 180px; }
  .nav-links a.lnk { display: none; }
  .svc-row { grid-template-columns: 34px 1fr; gap: 6px 14px; }
  .svc-d { grid-column: 2; }
  .svc-ar { display: none; }
}
@media (max-width: 420px) {
  .compass-dial { width: 250px; height: 250px; }
  .compass-symbol { inset: 44px; }
  .foot { justify-content: center; text-align: center; }
}

/* ============================================================
   VELKÉ MONITORY — kompas, logo i typografie vyrostou (jako login),
   ať scéna vyplní širokou obrazovku a sedí se support loginem.
   ============================================================ */
@media (min-width: 1600px) {
  .wrap { padding: 0 56px; }
  .nav-in { padding: 12px 56px; }
  .logo { height: 68px; width: 280px; }
  .compass-dial { width: 460px; height: 460px; }
  .compass-symbol { inset: 85px; }
  .hero-h1 { font-size: clamp(54px, 4.4vw, 70px); }
  .sec-h2 { font-size: clamp(36px, 3vw, 48px); }
  .hero-sub, .sec-lead, .about-p { font-size: 17px; }
}
@media (min-width: 2200px) {
  .compass-dial { width: 540px; height: 540px; }
  .compass-symbol { inset: 104px; }
  .hero-h1 { font-size: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .sunrise-overlay { display: none; }
}