/* BETVIA — landing 2027 v0.2 (SK / CZ / EN). Samostatná, statická úvodná stránka. */
:root {
  color-scheme: dark;
  --bg: #04151c;
  --navy: #071d29;
  --white: #fbfdff;
  --muted: #9bb1be;
  --gold: #d3ab31;
  --gold-bright: #f0ca55;
  --gold-deep: #765819;
  --edge: rgba(215, 181, 73, 0.19);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; background: var(--bg); }
body { margin: 0; color: var(--white); }
.page {
  isolation: isolate;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 47% at 50% 62%, rgba(11, 70, 82, 0.46), transparent 76%),
    radial-gradient(ellipse 31% 39% at 4% 51%, rgba(15, 43, 57, 0.55), transparent 90%),
    radial-gradient(ellipse 33% 41% at 96% 30%, rgba(52, 48, 19, 0.34), transparent 83%),
    linear-gradient(128deg, #030e14 0%, #051923 52%, #030b11 100%);
}
.ambient { pointer-events: none; position: absolute; z-index: -1; border-radius: 50%; filter: blur(84px); }
.ambient--one { width: 410px; height: 410px; left: 17%; top: 23%; background: rgba(10, 50, 71, .31); }
.ambient--two { width: 500px; height: 380px; right: 5%; top: 17%; background: rgba(117, 83, 15, .12); }
.fine-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .26;
  pointer-events: none;
  background-image: linear-gradient(rgba(155, 183, 188, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 183, 188, .045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 63% 52% at center, #000, transparent);
  mask-image: radial-gradient(ellipse 63% 52% at center, #000, transparent);
}
.site-header { position: relative; flex: 0 0 auto; border-bottom: 1px solid rgba(231, 206, 104, .12); background: rgba(2, 11, 17, .56); }
.header-inner { max-width: 1440px; min-height: 76px; padding: 11px 42px; margin: auto; display: flex; justify-content: space-between; gap: 22px; align-items: center; }
.brand { display: flex; gap: 11px; align-items: center; }
.brand img { display: block; width: 41px; height: auto; filter: drop-shadow(0 1px 9px rgba(206, 171, 50, .1)); }
.brand-word { display: flex; flex-direction: column; color: var(--gold-bright); font-weight: 900; font-size: 17px; line-height: 1.08; letter-spacing: .1em; }
.brand-sub { font-size: 12px; font-weight: 750; color: #819eac; letter-spacing: .35em; margin-top: 6px; }
.year-chip { display: inline-flex; gap: 7px; align-items: center; color: #a9b6be; font-size: 12px; font-weight: 800; letter-spacing: .11em; border: 1px solid var(--edge); border-radius: 8px; padding: 11px 13px; white-space: nowrap; }
.year-chip strong { color: var(--gold-bright); font-size: 13px; letter-spacing: .045em; }
.chip-dot { width: 5px; height: 5px; background: #d4ad38; border-radius: 50%; box-shadow: 0 0 10px #cda02e; }
.hero { flex: 1 0 auto; position: relative; display: grid; place-items: center; text-align: center; padding: 34px 22px 44px; min-height: 595px; }
.hero-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.halo { position: absolute; border-radius: 50%; left: 50%; top: 52%; transform: translate(-50%, -50%); }
.halo--outer { width: min(77vw, 800px); aspect-ratio: 1; border: 1px solid rgba(209, 172, 54, .082); box-shadow: 0 0 0 62px rgba(215, 180, 46, .016), 0 0 0 135px rgba(215, 180, 46, .012); }
.halo--inner { width: min(60vw, 590px); aspect-ratio: 1; border: 1px dashed rgba(222, 191, 94, .11); }
.gold-streak { position: absolute; left: 50%; width: 1200px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(180, 151, 53, .16) 35%, rgba(216, 185, 83, .25) 50%, rgba(180, 151, 53, .16) 65%, transparent); }
.gold-streak--top { top: 20%; }.gold-streak--bottom { bottom: 19%; }
.ambient-year { position: absolute; left: 50%; bottom: -21%; transform: translateX(-50%); font-size: clamp(220px, 28vw, 530px); white-space: nowrap; letter-spacing: -.11em; font-weight: 950; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(203, 176, 77, .065); user-select: none; }
.hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 1060px; width: 100%; margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 17px; margin: 0 0 18px; color: var(--gold-bright); font-size: 12px; font-weight: 850; letter-spacing: .16em; line-height: 1.7; }
.eyebrow-line { display: block; width: 35px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.eyebrow-line:last-child { transform: scaleX(-1); }
.hero-logo { display: block; width: clamp(74px, 6vw, 98px); height: auto; filter: drop-shadow(0 0 26px rgba(209, 167, 40, .19)); margin: 0 0 19px; }
h1 { display: flex; flex-direction: column; font-size: clamp(56px, 7.5vw, 119px); font-weight: 950; letter-spacing: -.068em; line-height: .95; margin: 0; text-transform: uppercase; text-wrap: balance; }
.title-white { color: #fff; text-shadow: 0 16px 34px rgba(0, 0, 0, .28); }
.title-gold { background: linear-gradient(180deg, #f4d46c 3%, #d5a927 48%, #bf8f20 100%); color: transparent; -webkit-background-clip: text; background-clip: text; padding-bottom: .1em; }
.launch-line { margin: 17px 0 14px; color: #f5f6f6; letter-spacing: .165em; font-weight: 850; font-size: clamp(16px, 2.3vw, 27px); }
.launch-line span { color: #f0c24c; }
.statement-rule { display: flex; gap: 11px; align-items: center; margin: 7px 0 19px; }
.statement-rule span { height: 1px; width: 83px; background: linear-gradient(90deg, transparent, rgba(219, 181, 55, .58)); }
.statement-rule span:last-child { transform: scaleX(-1); }
.statement-rule b { width: 5px; height: 5px; transform: rotate(45deg); background: #deba43; }
.description { max-width: 740px; font-size: clamp(17px, 1.65vw, 22px); line-height: 1.53; font-weight: 520; color: #dfebed; margin: 0; text-wrap: balance; }
.second-line { max-width: 820px; margin: 10px 0 0; color: #92adb9; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; text-wrap: balance; }
.coming-soon { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; border: 1px solid rgba(215, 180, 67, .28); background: rgba(195, 153, 37, .08); border-radius: 6px; padding: 12px 17px; color: #e5c357; font-size: 12px; font-weight: 850; letter-spacing: .16em; }
.coming-soon span { width: 6px; height: 6px; background: #e9c858; border-radius: 100%; box-shadow: 0 0 12px rgba(235, 191, 73, .62); }
.site-footer { flex: 0 0 auto; min-height: 51px; border-top: 1px solid rgba(231, 206, 104, .13); background: rgba(2, 12, 17, .65); }
.footer-inner { max-width: 1440px; min-height: 51px; margin: 0 auto; padding: 12px 42px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #a2b5bd; font-size: 12px; font-weight: 560; letter-spacing: .015em; }
.footer-center { text-align: center; }.footer-responsibility { color: #b5a66c; white-space: nowrap; }.footer-dot { display: inline-block; margin: 0 6px 2px; width: 3px; height: 3px; border-radius: 50%; background: #b6a360; }
@media (min-width: 1100px) and (min-height: 800px) { .hero { min-height: 720px; } }
@media (max-height: 820px) and (min-width: 780px) { .hero { min-height: 560px; padding-block: 20px 28px; } .hero-logo { width: 73px; margin-bottom: 14px; } .eyebrow { margin-bottom: 12px; } h1 { font-size: clamp(50px, 7vw, 92px); } .coming-soon { margin-top: 18px; } }
@media (max-width: 720px) {
  .header-inner { min-height: 66px; padding: 9px 17px; }
  .brand img { width: 34px; } .brand-word { font-size: 14px; }
  .year-chip { padding: 9px; font-size: 12px; letter-spacing: .015em; }
  .hero { min-height: calc(100dvh - 170px); padding: 24px 20px 34px; }
  .hero-logo { width: 90px; margin-bottom: 25px; }
  .eyebrow { font-size: 12px; letter-spacing: .055em; gap: 9px; margin-bottom: 16px; }
  .eyebrow-line { width: 15px; }
  h1 { font-size: clamp(44px, 12vw, 75px); letter-spacing: -.06em; }
  .launch-line { font-size: clamp(15px, 4.2vw, 22px); margin-top: 19px; }
  .description { max-width: 570px; line-height: 1.5; }
  .second-line { max-width: 480px; }
  .coming-soon { font-size: 12px; letter-spacing: .07em; margin-top: 24px; }
  .halo--outer { width: 120vw; } .halo--inner { width: 92vw; }
  .footer-inner { padding: 15px 20px; flex-wrap: wrap; justify-content: center; gap: 8px 24px; text-align: center; font-size: 12px; }
  .footer-center { order: 3; width: 100%; }
}
@media (max-width: 380px) {
  .year-chip { font-size: 12px; } .brand-sub { font-size: 12px; letter-spacing: .1em; }
  .hero { padding-inline: 14px; } h1 { font-size: 13vw; }
  .description { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* v0.2: no text smaller than 12px at any breakpoint. */
.brand-sub { letter-spacing: .13em; }
.chip-dot { flex: 0 0 6px; }
.year-chip { flex-shrink: 0; }
.footer-inner { line-height: 1.5; }
.eyebrow { justify-content: center; max-width: 100%; }
@media (max-width: 480px) {
  .year-chip .chip-label { display: none; }
  .year-chip { padding: 9px 11px; }
  .year-chip strong { font-size: 14px; }
  .eyebrow-line { display: none; }
  .hero { padding-inline: 16px; }
  .brand-word { font-size: 14px; }
  .brand { gap: 8px; }
  .footer-inner { font-size: 12px; }
}
/* Headline lengths differ by language; visual identity remains consistent. */
html[lang="en"] h1 { font-size: clamp(52px, 7.4vw, 112px); }
html[lang="en"] .eyebrow { letter-spacing: .14em; }
@media (max-width: 720px) {
  html[lang="en"] h1 { font-size: clamp(42px, 11vw, 74px); }
}
@media (max-width: 380px) {
  html[lang="en"] h1 { font-size: 12.5vw; }
}