/* =========================================================
   IT HelpMen — style.css
   - Modern landing page skeleton (Grid/Flex)
   - Indie sunset palette (orange/blue)
   - Sticky header + klikací tel/mail
   - Hero jako rozcestník přes celý viewport
   - Single-section view (po kliknutí na dlaždici se zobrazí jen jedna sekce)
   ========================================================= */

:root{
  --bg-0: #071427;
  --bg-1: #0b2a4a;
  --accent-0: #ff7a18;
  --accent-1: #2aa8ff;
  --accent-2: #ffb84d;
  --text: #eaf2ff;
  --muted: rgba(234,242,255,.72);
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 1120px;

  --nav-h: 72px;
  --focus: 0 0 0 4px rgba(42,168,255,.25);

  /* Background image (photo) blend */
  --bg-img-opacity: .10;
}

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

body{
  margin:0;
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg-0);
  overflow-x:hidden;
}

.container{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

/* =========================================================
   Background (animated gradient + grain)
   ========================================================= */
.bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: linear-gradient(120deg, var(--bg-0), var(--bg-1));
  filter: saturate(1.15) contrast(1.05);
  transform: translateZ(0);
  animation: drift 14s ease-in-out infinite alternate;
}

/* Photo background (subtle) */
.bg::before{
  content:"";
  position:absolute;
  inset: 0;
  background-image: url("bg-it-support.png");
  background-image: image-set(
    url("bg-it-support.webp") type("image/webp"),
    url("bg-it-support.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--bg-img-opacity);
  filter: saturate(.9) contrast(1.05) brightness(.75);
  pointer-events:none;
}

/* Animated gradient overlay */
.bg::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1200px 800px at var(--mx, 20%) var(--my, 20%), rgba(255,122,24,.28), transparent 60%),
    radial-gradient(1100px 700px at calc(var(--mx, 20%) + 15%) calc(var(--my, 20%) + 10%), rgba(42,168,255,.22), transparent 62%),
    radial-gradient(1000px 700px at 75% 70%, rgba(255,184,77,.18), transparent 60%);
  pointer-events:none;
}


.grain{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .18;
}

@keyframes drift{
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(1.05) translate3d(-14px, -10px, 0); }
}

/* =========================================================
   Header
   ========================================================= */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(7,20,39,.55);
  border-bottom: 1px solid var(--stroke);
}

.nav{
  height: var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}

.logo{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(42,168,255,.95));
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
}
.logo::after{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%);
  transform: rotate(20deg);
}

.brand h1{
  font-size: 16px;
  line-height: 1.1;
  margin:0;
  letter-spacing:.2px;
}
.brand small{
  display:block;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}

/* Header contact links (tel/mail) */
.header-contact{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  white-space: nowrap;
}
.hlink{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, opacity .2s ease;
}
.hlink:hover{
  opacity: .92;
  transform: translateY(-1px);
}
.sep{
  color: rgba(234,242,255,.55);
  font-weight: 800;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  font-weight: 700;
  letter-spacing:.2px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.btn.primary{
  border-color: rgba(255,122,24,.35);
  background: linear-gradient(135deg, rgba(255,122,24,.9), rgba(42,168,255,.65));
}
.btn.primary:hover{
  border-color: rgba(255,122,24,.55);
  filter: brightness(1.02);
}
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow: var(--focus);
}

/* =========================================================
   Main + sections
   ========================================================= */
main{ padding-bottom: 72px; }

section{
  scroll-margin-top: calc(var(--nav-h) + 18px);
  padding: 22px 0;
}

/* =========================================================
   HERO = rozcestník přes celý viewport
   ========================================================= */
.hero{
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 24px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  align-items: stretch;
}

.hero-card{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  position: relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(255,122,24,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(42,168,255,.18), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.hero-card > *{ position: relative; z-index: 1; }

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,20,39,.25);
  color: var(--muted);
  font-weight: 650;
  letter-spacing:.2px;
  font-size: 13px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,.05));
  box-shadow: 0 0 0 3px rgba(255,122,24,.18);
}

.hero h2{
  margin: 14px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.5px;
}
.hero p{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  max-width: 62ch;
}
.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Pravý sloupec rozcestník */
.side{
  display:grid;
  gap: 14px;
  grid-auto-rows: 1fr;
}

/* Klikací dlaždice (rozcestník) */
.tile{
  display:block;
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.tile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.tile h3{
  margin:0 0 6px;
  font-size: 14px;
  letter-spacing:.2px;
}
.tile p{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}

/* =========================================================
   Section cards + UNDER CONSTRUCTION block
   ========================================================= */
.section-card{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.section-head h2{
  margin:0;
  font-size: 20px;
  letter-spacing:.2px;
}

.badge{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  color: rgba(234,242,255,.88);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.uc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(7,20,39,.25);
  color: var(--muted);
}
.uc strong{
  color: var(--text);
  letter-spacing:.3px;
}
.uc-start{ align-items:flex-start; }

.spacer-sm{ height: 8px; }

/* Back button row */
.back-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 10px;
}

/* =========================================================
   Contact section + form
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  align-items:start;
}

form{
  display:grid;
  gap: 10px;
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

label{
  display:block;
  font-size: 13px;
  color: rgba(234,242,255,.85);
  margin-bottom: 6px;
  font-weight: 650;
  letter-spacing:.2px;
}

input, textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 12px 12px;
  font: inherit;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
input::placeholder, textarea::placeholder{ color: rgba(234,242,255,.45); }
textarea{ min-height: 120px; resize: vertical; }

.form-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.status{
  font-size: 13px;
  color: var(--muted);
}
.status.ok{ color: rgba(46,229,157,.95); }
.status.bad{ color: rgba(255,90,122,.95); }

.honeypot{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-note{
  margin: 10px 0 0;
  color: rgba(234,242,255,.55);
  font-size:12px;
}

/* =========================================================
   Footer
   ========================================================= */
footer{
  padding: 24px 0 40px;
  color: rgba(234,242,255,.55);
  font-size: 13px;
}
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 14px;
}

/* =========================================================
   Single-section view (rozcestník -> jen jedna sekce)
   ========================================================= */
body.single-view .hero{ display:none; }
body.single-view section{ display:none; }
body.single-view section.active{
  display:block;
  padding-top: 28px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .brand{ min-width: 0; }

  .header-contact{
    gap:8px;
    padding: 8px 10px;
    white-space: normal;
  }
  .sep{ display:none; }

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