/* ============================================================
   NETMA - sdilena vrstva pro vsechny stranky
   Fonty, barvy, reset, kurzor, prilet pri scrollu a paticka.
   Vse ostatni si nese kazda stranka sama.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo Black';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo Black';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --mint:#66FCF1;
  --ink:#08090b;
  --paper:#fff;
  --muted:#a0a0a0;
  /* jedna rodina na celý web: Archivo (400-700) + Archivo Black na display */
  --font-body:Archivo,system-ui,-apple-system,sans-serif;
  --font-display:"Archivo Black",Archivo,sans-serif;
  --gutter:clamp(1.25rem,12.03vw,142px);      /* obsahový sloupec */
  --edge:clamp(1.25rem,4.3vw,80px);           /* header a CTA u kraje */
  /* POTENCIÁL: 144px @937, 152px @1280 — a nikdy širší než viewport */
  --h1:min(calc(15.6vw - 6px),184px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);scroll-behavior:smooth}
body{
  background:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  color:var(--paper);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============ Custom kurzor ============ */
/* 60px mint kruh, mix-blend-mode:difference. Nad bílým textem vyjde
   rgb(153,3,14) — přesně ta červená, co má originál. Nad nadpisem scale(5). */
/* Dotykove zarizeni zadny vlastni kurzor nema. */
@media (hover:none),(pointer:coarse){
  .cursor,.cursor-dot,.cursor-ring{display:none}
}
.cursor{
  position:fixed;
  top:0; left:0;
  width:300px; height:300px;
  margin:-150px 0 0 -150px;
  border-radius:50%;
  background:var(--mint);
  mix-blend-mode:difference;
  pointer-events:none;
  z-index:60;
  opacity:0;
  will-change:transform;
}
.cursor.is-live{opacity:1}

/* ============ Kurzor pro zbytek webu ============ */
/* Koule je efekt hera. Níž na stránce jen tečka na hrotu a kroužek,
   který ji dohání - nic se neprolíná, nic se nenafukuje přes půl obrazovky. */
.cursor-dot,.cursor-ring{
  position:fixed;
  top:0; left:0;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  will-change:transform;
  transition:opacity .25s;
}
.cursor-dot{
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:var(--mint);
  z-index:61;
}
.cursor-ring{
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border:1px solid rgba(102,252,241,.45);
  z-index:60;
  transition:opacity .25s,border-color .3s,background-color .3s;
}
.cursor-dot.is-live,.cursor-ring.is-live{opacity:1}
.cursor-ring.is-over{border-color:var(--mint);background:rgba(102,252,241,.08)}
/* nad karuselem kroužek napoví, že se dá táhnout */
.cursor-ring::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  opacity:0;
  transition:opacity .25s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%2366fcf1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2 1 6l4 4M19 2l4 4-4 4'/%3E%3C/svg%3E") center / 11px auto no-repeat;
}
.cursor-ring.je-tah::after{opacity:1}
/* prolnutí mezi kurzory na hranici hera */
.cursor{transition:opacity .25s}

@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button{cursor:none}
  /* v textovém poli je kurzor systemu potřeba - bez něj není vidět, kam se píše */
  input,textarea{cursor:text}
}
@media (hover:none),(pointer:coarse){
  /* na dotyku koule sleduje prst, kurzor systemu se neschovava */
  body{cursor:auto}
}

/* Přílet při scrollu. Hero má vlastní .reveal (mintová diagonála),
   proto tady jiný název - jinak by se obě animace překryly. */
.rise-in{
  opacity:0;
  transform:translateY(50px) scale(.95);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.rise-in.is-in{opacity:1;transform:none}
.rise-in--d1{transition-delay:.1s}
.rise-in--d2{transition-delay:.25s}
.rise-in--d3{transition-delay:.4s}

/* ============================================================
   PATIČKA
   ============================================================ */
.site-footer{
  position:relative;
  padding:6rem 0 0;
  background:var(--ink);
  border-top:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
/* záře na horní hraně oddělí patičku od kontaktní sekce */
.site-footer::before{
  content:'';
  position:absolute;top:0;left:50%;
  width:50%;height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  opacity:.3;
  box-shadow:0 0 20px var(--mint);
}
/* vodoznak na pozadí */
.footer-bg-text{
  position:absolute;bottom:-5%;left:50%;z-index:0;
  transform:translateX(-50%);
  font-family:var(--font-display);font-weight:400;
  font-size:18vw;
  white-space:nowrap;
  color:rgba(255,255,255,.012);
  pointer-events:none;user-select:none;
}

.footer-container{
  position:relative;z-index:2;
  width:100%;max-width:1600px;
  margin:0 auto;
  padding:0 4rem;
}
.footer-grid{
  display:grid;grid-template-columns:auto auto auto;
  justify-content:space-between;
  gap:4rem;
  margin-bottom:5rem;
}

.footer-brand{display:flex;flex-direction:column;align-items:flex-start;max-width:450px}
/* Značka místo vysázeného "NETMA." - velké NETMA v pozadí patičky
   to slovo říká už samo, takže tady působilo jako ozvěna. */
.footer-logo{
  display:inline-block;
  margin-bottom:1rem;
  text-decoration:none;
}
.footer-logo img{
  display:block;
  height:88px;width:auto;
  /* značka je skleněný tyrkys, na tmavém potřebuje trochu odlepit */
  filter:drop-shadow(0 0 12px rgba(102,252,241,.3));
  transition:filter .3s ease;
}
.footer-logo:hover img,.footer-logo:focus-visible img{filter:drop-shadow(0 0 20px rgba(102,252,241,.55))}
.footer-logo:focus-visible{outline:2px solid var(--mint);outline-offset:6px;border-radius:4px}
.footer-slogan{
  max-width:350px;margin-bottom:2rem;
  font-size:1.1rem;line-height:1.6;
  color:var(--muted);
}

.footer-widget h3{
  margin:0 0 2rem;
  font-weight:700;font-size:1.2rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);
}
.footer-widget ul{
  list-style:none;
  display:flex;flex-direction:column;gap:1rem;
}
.footer-widget a,.footer-widget span{
  display:inline-flex;align-items:center;gap:10px;
  font-size:1rem;
  color:var(--muted);
  text-decoration:none;
  transition:color .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);
}
.footer-widget a:hover,.footer-widget a:focus-visible{color:var(--mint);transform:translateX(8px)}
.contact-icon{
  flex-shrink:0;
  width:18px;height:18px;
  fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.7;
  transition:opacity .3s ease;
}
.footer-widget a:hover .contact-icon{opacity:1}
.company-id{font-size:.9rem;opacity:.75;margin-top:1rem}

.footer-bottom{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:2rem 0;
  border-top:1px solid rgba(255,255,255,.05);
  /* vodoznak NETMA sahal 78 px do listy a copyright se cetl pres pismena;
     lista si proto nese vlastni podklad a pismo za ni mizi na hrane */
  background:var(--ink);
}
.copyright{font-size:.95rem;color:var(--muted)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:.85rem;color:var(--muted);text-decoration:none;transition:color .3s ease}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--mint)}

/* Odznak stoji u loga, ne ve spodni liste. V rade s drobnym pravnim
   pismem byl nejhlasitejsi prvek paticky (19,9:1, verzalky, pilulka). */
.availability-status{
  display:flex;align-items:center;gap:8px;
  padding:.4rem 1rem;
  border:1px solid rgba(102,252,241,.1);
  border-radius:50px;
  background:rgba(102,252,241,.05);
  font-weight:500;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 10px var(--mint);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%  {box-shadow:0 0 0 0 rgba(102,252,241,.4)}
  70% {box-shadow:0 0 0 10px rgba(102,252,241,0)}
  100%{box-shadow:0 0 0 0 rgba(102,252,241,0)}
}

.social-links{display:flex;gap:1rem}
.social-btn{
  display:grid;place-items:center;
  width:45px;height:45px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:50%;
  background:rgba(255,255,255,.03);
  color:var(--paper);
  text-decoration:none;
  transition:background .4s cubic-bezier(.2,.8,.2,1),border-color .4s cubic-bezier(.2,.8,.2,1),color .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.social-btn svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.social-btn:hover,.social-btn:focus-visible{
  background:rgba(102,252,241,.1);
  border-color:var(--mint);
  color:var(--mint);
  transform:translateY(-5px);
  box-shadow:0 10px 20px rgba(102,252,241,.15);
}

@media (max-width:1024px){
  .footer-container{padding:0 3rem}
  .footer-grid{grid-template-columns:1fr 1fr;justify-content:start}
  .footer-brand{grid-column:span 2;align-items:center;text-align:center;max-width:100%}
  .footer-slogan{max-width:100%}
}
@media (max-width:768px){
  .site-footer{padding:4rem 1.5rem 0}
  .footer-container{padding:0}
  .footer-grid{grid-template-columns:1fr;gap:3rem;text-align:center}
  .footer-brand{grid-column:span 1}
  .footer-widget a,.footer-widget span{justify-content:center}
  .footer-widget a:hover{transform:translateY(-3px)}
  .footer-bottom{flex-direction:column;text-align:center;gap:2rem}
  .footer-legal{flex-direction:column;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .status-dot{animation:none}
}