@import url("/css/nippo.css");
html { scroll-behavior:smooth; }

::selection{
  background: var(--a);
  color: var(--w);
}

::-moz-selection{
  background: var(--a);
  color: var(--w);
}

:root{
  --px:32px; --cols:5; --gap:32px; --max:1440px;
  --bg:#000; --surface:#111; --line:#333;
  --t:#808080; --w:#fff; --a:#ff9500;
  --font:"Roboto Mono", monospace;
  --font-h:"Nippo-Bold", sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0; font:16px/24px var(--font);
  color:var(--t); background:var(--bg);
}

.hero__title,
.h2,
.h3{
  font-family: var(--font-h);
  font-weight: 400; /* u webfontu Nippo-Bold neřešíme weight, už je “bold” součást family */
}

.page{ min-height:100vh; display:flex; flex-direction:column; }

.container{ max-width:var(--max); margin:0 auto; padding:0 var(--px); width:100%; }
.grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--gap); }

section{ padding:64px 0; }
a{ color:inherit; }

/* Helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.divider{ height:1px; background:var(--line); margin:32px 0; }
.h2{ margin:0; font-size:64px; line-height:72px; color:var(--w); }
.h3{ margin:0; font-size:48px; line-height:56px; color:var(--w); }
.label{
  margin:0 0 4px; font-size:16px; line-height:24px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--line);
}
.label--sp{ margin-top:56px; }

/* Header / nav */
.header{
  position:sticky; top:0; z-index:30;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; padding:16px 0; gap:32px; }
.logo{ height:56px; width:auto; display:block; }

.nav__menu{ margin-left:auto; display:flex; gap:32px; }
.nav__link{
  display:inline-flex; gap:4px; align-items:baseline;
  text-decoration:none; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase;
}
.nav__i{ color:var(--t); }
.nav__link{ color:var(--w); }
.nav__link:hover{ color:var(--a); }
.nav__link:hover .nav__i{ color:var(--w); }
.nav__link:focus-visible{ outline:1px solid var(--a); outline-offset:4px; }

.nav__toggle{
  margin-left:auto; display:none;
  width:40px; height:40px; padding:0;
  border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__icon{ display:none; }
.nav__icon svg{ width:24px; height:24px; display:block; }
.nav__icon--menu{ display:inline-block; }
body.menu-open .nav__icon--menu{ display:none; }
body.menu-open .nav__icon--close{ display:inline-block; }



/* Overlay menu */
.nav-overlay{
  position:fixed; inset:0; z-index:20;
  background:var(--bg); color:var(--w);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease-out;
}
body.menu-open .nav-overlay{ opacity:1; pointer-events:auto; }

.nav-overlay__inner{ display:flex; flex-direction:column; gap:24px; align-items:center; }
.nav-overlay__link{
  display:inline-flex; gap:4px; align-items:baseline;
  text-decoration:none; font-size:18px;
  letter-spacing:.12em; text-transform:uppercase;
}
.nav-overlay__link .nav__i{ color:var(--t); }
.nav-overlay__link:hover{ color:var(--a); }
.nav-overlay__link:hover .nav__i{ color:var(--w); }

/* Language switch */
.lang{
  position:relative;
  margin-left:24px;
  display:flex;
  align-items:center;
}

.lang__btn{
  font-size:20px;
  background:transparent;
  border:0;
  cursor:pointer;
  line-height:1;
  padding:4px;
  color:var(--w);
}

.lang__list{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:40;

  background:var(--bg);
  border:1px solid var(--line);
  list-style:none;
  margin:0;
  padding:8px 0;
  min-width:108px;

  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
}

.lang__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  text-decoration:none;
  color:var(--w);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.lang__item:hover,
.lang__item:focus-visible{
  background:var(--a);
  color:var(--bg);
  outline:none;
}

.lang.is-open .lang__list{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* CTA (sdílené) */
.cta{
  display:inline-flex; align-items:center; gap:24px;
  font:16px/24px var(--font);
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--w); text-decoration:none;
}
.cta__icon{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px; border:2px solid var(--w);
}
.cta__icon svg{ width:24px; height:24px; display:block; }
.cta__icon svg path{ fill:var(--w); transition:fill .2s ease-out; }
.cta:hover,.cta:focus-visible{ color:var(--a); }
.cta:hover .cta__icon,.cta:focus-visible .cta__icon{
  border-color:var(--a); background:var(--a);
}
.cta:hover .cta__icon svg path,.cta:focus-visible .cta__icon svg path{ fill:var(--bg); }
.cta:focus-visible{ outline:1px solid var(--a); outline-offset:4px; }

/* Hero */
.hero{ position:relative; padding:112px 0; overflow:hidden; --hero-overlay:.9; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:url('https://img.youtube.com/vi/JVkqNiMFTcs/maxresdefault.jpg') center/cover no-repeat; }
.hero__yt-wrap{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100%,calc(100vh * 16/9)); height:max(100%,calc(100vw * 9/16)); }
#hero-yt,
#hero-yt iframe{ display:block; width:100%; height:100%; border:0; pointer-events:none; }
.hero__yt-cover{ position:absolute; inset:0; z-index:1; background:var(--bg); transition:opacity .8s ease; }
.hero__yt-cover.is-gone{ opacity:0; pointer-events:none; }
.hero__overlay{ position:absolute; inset:0; background:rgba(0,0,0,var(--hero-overlay)); }
.hero .container{ position:relative; z-index:1; }

.hero__title{ grid-column:1 / span 3; margin:0 0 40px; font-size:80px; line-height:88px; color:var(--w); }
.hero__outline{
  color: transparent;
  -webkit-text-stroke: 2px var(--a);
  text-stroke: 2px var(--a); /* fallback */
  white-space: nowrap;
}
.hero__text{ grid-column:1 / span 2; margin:0; max-width:34rem; color: var(--w); }
.hero__cta{ grid-column:4 / span 2; justify-self:end; }

/* Keywords */
.keywords{ padding:0; background:var(--line); }
.keywords__viewport{ overflow:hidden; padding:16px 0; }
.keywords__track{ display:inline-flex; white-space:nowrap; animation:scroll 40s linear infinite; }
.keywords__group{ display:inline-flex; align-items:center; gap:16px; margin-right:112px; color:var(--w); font-size:14px; }
.dot{ color:var(--w); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Eyebrow */
.eyebrow{
  grid-column:1 / -1; display:flex; align-items:center; gap:16px;
  font-size:16px; line-height:24px; text-transform:uppercase;
  margin-bottom:56px;
}
.eyebrow__i{ color:var(--a); }
.eyebrow__line{
  position:relative;
  width:80px;
  height:1px;
  background: var(--t); /* #808080 – naznačená celá čára */
  overflow:hidden;
}

/* oranžová “loading” čára přes šedou */
.eyebrow__line::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms ease-out;
}

/* když je sekce v záběru */
.eyebrow.is-inview .eyebrow__line::after{
  transform: scaleX(1);
}

/* respektuj reduced motion */
@media (prefers-reduced-motion: reduce){
  .eyebrow__line::after{ transition:none; transform:scaleX(1); }
}
.eyebrow__t{ color:var(--w); }

/* About */
.about{ padding:112px 0; }
.about__left{ grid-column:1 / span 2; }
.about__right{ grid-column:4 / span 2; }

.stats{ display:flex; flex-direction:column; gap:16px; }
.stats__row{ display:flex; justify-content:space-between; align-items:baseline; column-gap:32px; }
.stats__label{ text-transform:uppercase; color:var(--t); }
.stats__value{ font-size:32px; line-height:40px; color:var(--w); display:inline-flex; gap:4px; align-items:baseline; }

/* Services */
.services{ padding:112px 0; }
.services__list{ grid-column:1 / -1; }

.card{ padding:0 0 56px; }
.card--last{ padding-bottom:0; }
.card__line{ height:1px; background:var(--line); margin-bottom:56px; }
.card__line--bottom{ margin:56px 0 0; }

.card__grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:var(--gap); }
.card__left{ grid-column:1 / span 3; }
.card__right{ grid-column:4 / span 2; }

.card__head{ display:flex; gap:112px; align-items:flex-start; }
.card__i{ color:var(--t); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-size:12px; line-height:16px; padding:8px 9px; border:1px solid var(--line); color:var(--t); }

.card:hover .card__line{ background:var(--a); }
.card:hover .h3{ color:var(--a); }
.card:hover .tag{ border-color:var(--a); color:var(--w); }

.services__bottom{
  grid-column:1 / -1; margin-top:56px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:var(--gap); align-items:center;
}
.services__bottom-text{ grid-column:1 / span 2; margin:0; max-width:32rem; }
.services__bottom .cta{ grid-column:4 / span 2; justify-self:end; }

/* Contact */
.contact{ padding:112px 0; }
.contact__title{ grid-column:1 / span 3; }
.contact__left{ grid-column:1 / span 2; margin-top:56px; }
.contact__right{ grid-column:4 / span 2; margin-top:56px; }

.contact__big{ display:inline-block; font-size:32px; line-height:40px; text-decoration:none; color:var(--w); }
.contact__big:hover,.addr__link:hover{ color:var(--a); }
.addr__link{ font-weight:700; text-decoration:none; color:var(--w); display:inline-block; }
.fact p{ margin:0; }

/* Footer */
.footer{ border-top:1px solid var(--line); padding:56px 0; }
.footer__grid{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
}
.footer__copy,.footer__design{ margin:0; color:var(--t); }
.footer__design{ text-align:right; white-space:nowrap; }
.footer__design a{ color:var(--w); text-decoration:none; }
.footer__design a:hover,.footer__design a:focus-visible{ color:var(--a); }

/* Tablet */
@media (max-width:1023px){
  :root{ --cols:3; --gap:24px; --px:24px; }
  .nav__menu{ display:none; } .nav__toggle{ display:inline-flex; }
  section{ padding:48px 0; }
  .hero{ padding:96px 0; }
  .hero__title{ grid-column:1 / -1; font-size:56px; line-height:64px; }
  .hero__text{ grid-column:1 / -1; margin-bottom:24px; }
  .hero__cta{ grid-column:1 / -1; justify-self:start; }
  .h2{ font-size:48px; line-height:56px; }
  .h3{ font-size:36px; line-height:44px; }

  .about{ padding:96px 0; }
  .about__left,.about__right{ grid-column:1 / -1; }
  .services{ padding:96px 0; }
  .card__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .card__left,.card__right{ grid-column:1 / -1; }
  .card__right{ margin-top:24px; }

  .services__bottom{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .services__bottom-text,.services__bottom .cta{ grid-column:1 / -1; justify-self:start; }
  .services__bottom .cta{ margin-top:24px; }
  .card__i{ display:none; }

  .contact{ padding:96px 0; }
  .contact__title,.contact__left,.contact__right{ grid-column:1 / -1; }
  .footer__grid{ grid-template-columns:1fr; row-gap:16px; }
  .footer__design{ text-align:left; white-space:normal; }
}

/* Mobile */
@media (max-width:767px){
  :root{ --cols:2; --gap:16px; --px:16px; }
  .nav{ padding:24px 0; }
  section{ padding:40px 0; }
  .hero{ padding:72px 0; }
  .hero__title{ font-size:40px; line-height:44px; margin-bottom:32px; }
  .h2{ font-size:32px; line-height:40px; }
  .h3{ font-size:24px; line-height:32px; }
  .keywords__group{ font-size:13px; }
  .about{ padding:72px 0; }
  .eyebrow{ margin-bottom:40px; }
  .divider{ margin:20px 0; }
  .stats__value{ font-size:24px; line-height:32px; }
  .label--sp{ margin-top:32px; }
  .card__head{ gap:32px; }
  .card{ padding-bottom:32px; }
  .card__line{ margin-bottom:32px; }
  .card__line--bottom{ margin:32px 0 0; }
  .services{ padding:40px 0; }
  .services__bottom{ margin-top:32px; }
  .contact{ padding:72px 0; }
  .contact__title{ grid-column:1 / -1; }
  .contact__big{ font-size:24px; line-height:32px; }
  .contact__left,.contact__right{ margin-top:32px; }
}