*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {

  --gold: #e8a020;

  --gold-dark: #c98010;

  --dark: #0a0a0a;

  --dark2: #141414;

  --dark3: #1e1e1e;

  --text: #e8e8e8;

  --text-muted: #888;

  --border: rgba(255,255,255,.08);

  --radius: 12px;

}



html { scroll-behavior: smooth; }



body {

  font-family: 'Inter', 'Segoe UI', sans-serif;

  background: #f4f4f6;

  color: #1a1a1a;

  line-height: 1.6;

}



.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }



/* ── NAVIGACE ─────────────────────────────── */

.topbar {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(10,10,10,.95);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);

}



.topbar-inner {

  max-width: 960px;

  margin: 0 auto;

  padding: 0 24px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.brand { display: flex; align-items: center; gap: 10px; }

.brand-icon { font-size: 1.5em; color: var(--gold); }

.brand-name { font-size: 1.05em; font-weight: 700; color: #fff; letter-spacing: .5px; }

.brand-name span { color: var(--gold); }



.nav-cta {

  background: var(--gold);

  color: #000;

  padding: 8px 20px;

  border-radius: 6px;

  font-weight: 700;

  font-size: .88em;

  text-decoration: none;

  letter-spacing: .3px;

  transition: background .2s, transform .15s;

}

.nav-cta:hover { background: var(--gold-dark); transform: translateY(-1px); }



/* ── HERO ─────────────────────────────────── */

.hero {

  background:

    linear-gradient(160deg, rgba(10,10,10,.97) 0%, rgba(20,14,0,.95) 100%),

    repeating-linear-gradient(

      45deg,

      rgba(255,255,255,.015) 0px,

      rgba(255,255,255,.015) 1px,

      transparent 1px,

      transparent 8px

    );

  color: var(--text);

  padding: 80px 24px 0;

  text-align: center;

  border-bottom: 1px solid var(--border);

}



.hero-content { max-width: 720px; margin: 0 auto; }



.hero-badge {

  display: inline-block;

  background: rgba(232,160,32,.12);

  border: 1px solid rgba(232,160,32,.3);

  color: var(--gold);

  padding: 6px 16px;

  border-radius: 100px;

  font-size: .82em;

  font-weight: 600;

  letter-spacing: .5px;

  margin-bottom: 24px;

}



.hero h1 {

  font-size: clamp(2em, 5vw, 3.2em);

  font-weight: 900;

  line-height: 1.15;

  color: #fff;

  margin-bottom: 18px;

  letter-spacing: -1px;

}



.hero h1 span { color: var(--gold); }



.hero p {

  font-size: 1.05em;

  color: var(--text-muted);

  margin-bottom: 36px;

  letter-spacing: .5px;

}



.hero-btn {

  display: inline-block;

  background: linear-gradient(135deg, var(--gold), var(--gold-dark));

  color: #000;

  padding: 14px 36px;

  border-radius: 8px;

  font-weight: 800;

  font-size: 1em;

  text-decoration: none;

  letter-spacing: .3px;

  transition: transform .2s, box-shadow .2s;

  margin-bottom: 56px;

}

.hero-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 32px rgba(232,160,32,.35);

}



.hero-stats {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0;

  border-top: 1px solid var(--border);

  padding: 24px 0;

  flex-wrap: wrap;

}



.stat { padding: 8px 40px; text-align: center; }

.stat strong { display: block; font-size: 1.6em; font-weight: 900; color: var(--gold); }

.stat span { font-size: .78em; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }

.stat-divider { width: 1px; height: 40px; background: var(--border); }



/* ── FEATURES ─────────────────────────────── */

.features { background: #fff; padding: 64px 0; }



.features-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



.feature-card {

  background: #f8f8f8;

  border-radius: var(--radius);

  padding: 28px;

  border: 1px solid #ebebeb;

  border-top: 3px solid var(--gold);

  opacity: 0;

  transform: translateY(20px);

  transition: opacity .5s ease, transform .5s ease, box-shadow .2s;

}

.feature-card.visible { opacity: 1; transform: translateY(0); }

.feature-card:nth-child(2) { transition-delay: .1s; }

.feature-card:nth-child(3) { transition-delay: .2s; }

.feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }



.feature-icon { font-size: 2em; margin-bottom: 14px; }

.feature-card h3 { font-size: 1em; font-weight: 700; margin-bottom: 8px; color: #111; }

.feature-card p { font-size: .88em; color: #666; line-height: 1.65; }



/* ── FORMULÁŘ SEKCE ───────────────────────── */

.form-section {

  background: linear-gradient(180deg, #f4f4f6 0%, #ebebed 100%);

  padding: 72px 0 80px;

}



.form-header { text-align: center; margin-bottom: 40px; }

.form-header h2 {

  font-size: 2em;

  font-weight: 900;

  color: #111;

  letter-spacing: -0.5px;

  margin-bottom: 10px;

}

.form-header p { color: #777; font-size: .95em; }



/* ── ALERTS ───────────────────────────────── */

.alert {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  padding: 18px 22px;

  border-radius: var(--radius);

  margin-bottom: 24px;

  font-size: .95em;

}

.alert-icon { font-size: 1.4em; flex-shrink: 0; }

.alert-ok  { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

.alert-err { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }



/* ── FORM CARD ────────────────────────────── */

.form-card {

  background: #fff;

  border-radius: 16px;

  box-shadow: 0 8px 40px rgba(0,0,0,.10);

  overflow: hidden;

  opacity: 0;

  transform: translateY(24px);

  transition: opacity .6s ease, transform .6s ease;

}

.form-card.visible { opacity: 1; transform: translateY(0); }



.form-block {

  padding: 32px 36px;

  border-bottom: 1px solid #f0f0f0;

}



.form-block-title {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 1em;

  font-weight: 800;

  color: #111;

  margin-bottom: 24px;

  text-transform: uppercase;

  letter-spacing: .8px;

}



.block-num {

  width: 28px;

  height: 28px;

  background: var(--gold);

  color: #000;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: .85em;

  font-weight: 900;

  flex-shrink: 0;

}



.fields-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-bottom: 16px;

}



.field { display: flex; flex-direction: column; gap: 6px; }

.field-full { grid-column: 1 / -1; }



label {

  font-size: .78em;

  font-weight: 700;

  color: #555;

  text-transform: uppercase;

  letter-spacing: .6px;

}

.unit { font-weight: 400; color: #999; text-transform: none; }

small { font-size: .75em; color: #aaa; }



input, select, textarea {

  width: 100%;

  padding: 11px 14px;

  border: 1.5px solid #e5e5e5;

  border-radius: 8px;

  font-size: .93em;

  font-family: inherit;

  background: #fafafa;

  color: #111;

  transition: border-color .2s, box-shadow .2s, background .2s;

}

input::placeholder, textarea::placeholder { color: #bbb; }



input:hover, select:hover, textarea:hover { border-color: #ccc; background: #fff; }

input:focus, select:focus, textarea:focus {

  outline: none;

  border-color: var(--gold);

  background: #fff;

  box-shadow: 0 0 0 4px rgba(232,160,32,.1);

}



/* ── FORM FOOTER ──────────────────────────── */

.form-footer {

  padding: 28px 36px;

  background: #fafafa;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}



.form-note { font-size: .78em; color: #aaa; max-width: 420px; line-height: 1.5; }



button[type="submit"] {

  display: flex;

  align-items: center;

  gap: 10px;

  background: linear-gradient(135deg, var(--gold), var(--gold-dark));

  color: #000;

  border: none;

  border-radius: 8px;

  padding: 14px 32px;

  font-size: 1em;

  font-weight: 800;

  font-family: inherit;

  cursor: pointer;

  letter-spacing: .3px;

  transition: transform .15s, box-shadow .15s;

  white-space: nowrap;

}

button[type="submit"]:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(232,160,32,.4);

}

.btn-arrow { font-size: 1.1em; transition: transform .2s; }

button[type="submit"]:hover .btn-arrow { transform: translateX(4px); }



/* ── FOOTER ───────────────────────────────── */

footer {

  background: var(--dark);

  border-top: 3px solid var(--gold);

  padding: 36px 0;

}



.footer-inner {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 24px;

}



.footer-brand {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #fff;

  font-weight: 700;

  font-size: 1em;

  margin-bottom: 10px;

}



.footer-company {

  color: #777;

  font-size: .82em;

  line-height: 1.8;

}



.footer-right {

  display: flex;

  flex-direction: column;

  gap: 10px;

  align-items: flex-end;

}



.footer-right a {

  color: var(--gold);

  text-decoration: none;

  font-size: .9em;

  font-weight: 600;

}



.footer-right a:hover { text-decoration: underline; }



.footer-copy {

  width: 100%;

  text-align: center;

  color: #444;

  font-size: .78em;

  padding-top: 16px;

  border-top: 1px solid rgba(255,255,255,.06);

}



@media (max-width: 600px) {

  .header-inner { flex-direction: column; text-align: center; gap: 12px; }

  .info-section { flex-direction: column; }

  .fields-row { grid-template-columns: 1fr; }

  .form-block { padding: 24px 20px; }

  .form-footer { flex-direction: column; align-items: stretch; }

  button[type="submit"] { justify-content: center; }

  .hero { padding: 56px 20px 0; }

  .stat { padding: 8px 20px; }

  .stat-divider { display: none; }

  .footer-right { align-items: flex-start; }

}





/* ── RESPONZIVITA ─────────────────────────── */

@media (max-width: 768px) {

  .features-grid { grid-template-columns: 1fr; }

  .fields-row { grid-template-columns: 1fr; }

  .form-block { padding: 24px 20px; }

  .form-footer { flex-direction: column; align-items: stretch; }

  button[type="submit"] { justify-content: center; }

  .hero { padding: 56px 20px 0; }

  .stat { padding: 8px 20px; }

  .stat-divider { dis