/* ============================================================
   Rozpędzeni — landing styles
   Design tokens, base, motion-gating, hover components, FAQ, a11y
   ============================================================ */

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

:root{
  --ink:#0E0E12;
  --ink2:#16161C;
  --ink3:#1E1E26;
  --volt:#FFD400;
  --volt-rgb:255,212,0;
  --coral:#FF4D2E;
  --paper:#F7F5F0;
  --inkText:#1A1A17;
  --mute:#9A958A;

  /* ===== AZ Widgets theming (pierces the widget Shadow DOM) =====
     Consent bar, newsletter popup and contact form — all on dark surfaces.
     Fonts are loaded in the host document (Fontshare + Google), so they cross
     the shadow boundary. Volt accent with ink text on the fills (--az-on-accent),
     matching the site's own volt pills. */

  /* color · surface · shape */
  --az-accent:#FFD400;                        /* volt — buttons, toggles, focus */
  --az-on-accent:#0E0E12;                     /* ink text ON volt fills (volt is light → must override the default white) */
  --az-link:#FFD400;                          /* inline links on the dark surfaces */
  --az-surface:#16161C;                       /* ink-2 card / bar background */
  --az-ink:#F7F5F0;                           /* paper — primary text */
  --az-muted:#9A958A;                         /* secondary / helper text */
  --az-field:#1E1E26;                         /* ink-3 input background */
  --az-border:rgba(247,245,240,.12);          /* hairlines */
  --az-border-width:1px;
  --az-radius:14px;                           /* matches the site's card radius */

  /* typography — brand roles */
  --az-font:'General Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --az-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --az-font-size:16px;
  --az-heading-font:'Clash Display','General Sans',sans-serif;
  --az-heading-weight:600;
  --az-heading-color:#F7F5F0;
  --az-label-font:'JetBrains Mono',ui-monospace,monospace;
  --az-label-size:12px; --az-label-weight:500; --az-label-color:#9A958A;
  --az-button-font:'General Sans',system-ui,sans-serif; --az-button-weight:600;
  --az-copy-font:'General Sans',system-ui,sans-serif; --az-copy-color:rgba(247,245,240,.78);
  --az-input-font:'General Sans',system-ui,sans-serif; --az-input-color:#F7F5F0;
  --az-control-height:52px;

  /* per-widget sizing + badge */
  --az-contact-width:560px;                   /* fill the #kontakt-form column */
  --az-leadbox-width:360px;
  --az-leadbox-header-bg:#FFD400; --az-leadbox-header-fg:#0E0E12;  /* volt header band, ink text */
  --az-badge-color:#9A958A; --az-badge-mark:#FFD400;
}

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:'General Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,picture{display:block}
img{max-width:100%}
picture{display:contents}
a{color:inherit}

::selection{background:var(--volt);color:var(--ink)}

/* ---------- keyframes ---------- */
@keyframes rz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rz-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes rz-blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes rz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rz-faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- reveal gating (only hide when JS is active; no-JS shows content) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(34px)}
.js [data-bb]{opacity:0}
[data-reveal]{will-change:opacity,transform}

/* ---------- responsive: header + timeline ---------- */
@media(max-width:760px){
  header[data-header]{padding-left:18px !important;padding-right:18px !important}
  header nav{gap:0 !important}
  header nav a:not(:last-child){display:none !important}
  [data-timeline],[data-timeline-track]{display:none !important}
  /* shorter travel = snappier reveal that never feels like loading */
  .js [data-reveal]{transform:translateY(16px)}
}

/* ============================================================
   Hover "kick" components (overshoot easing).
   !important on :hover targets so they beat the inline transform
   that the reveal/countup JS writes onto the same elements.
   ============================================================ */
.btn{transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.btn:hover{transform:translateY(-2px) scale(1.04) !important}
.btn--lg:hover{transform:translateY(-3px) scale(1.04) !important;box-shadow:0 14px 40px rgba(var(--volt-rgb),.28) !important}

.btn-ghost{transition:border-color .3s,transform .3s}
.btn-ghost:hover{border-color:var(--volt) !important;transform:translateY(-2px) !important}

.link-pill{transition:border-color .3s,transform .3s}
.link-pill:hover{border-color:var(--coral) !important;transform:translateY(-2px) !important}

.lift-volt,.lift-coral,.lift-soft{transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .35s}
.lift-shadow{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.lift-plain{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}

.lift-volt:hover{transform:translateY(-6px) !important;border-color:rgba(var(--volt-rgb),.4) !important}
.lift-coral:hover{transform:translateY(-5px) !important;border-color:rgba(255,77,46,.4) !important}
.lift-soft:hover{transform:translateY(-6px) !important;border-color:rgba(247,245,240,.22) !important}
.lift-shadow:hover{transform:translateY(-6px) !important;box-shadow:0 22px 50px rgba(26,26,23,.16) !important}
.lift-plain:hover{transform:translateY(-8px) !important}

/* ============================================================
   FAQ — native <details> accordion
   ============================================================ */
.faq-list{border-top:1px solid rgba(26,26,23,.14)}
.faq{border-bottom:1px solid rgba(26,26,23,.14)}
.faq summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;cursor:pointer;
  font-family:'Clash Display',sans-serif;font-weight:600;
  font-size:clamp(19px,2.1vw,24px);color:var(--inkText);
}
.faq summary::-webkit-details-marker{display:none}
.faq-q{flex:1}
.faq-icon{
  flex-shrink:0;font-family:'Clash Display',sans-serif;font-size:30px;line-height:1;
  color:var(--coral);transition:transform .3s ease;
}
.faq[open] .faq-icon{transform:rotate(45deg)}
.faq-a p{font-size:17px;color:#55514a;line-height:1.6;margin:0 0 24px;max-width:680px}
.faq[open] .faq-a{animation:rz-faq .35s ease}

/* ============================================================
   Accessibility — visible focus
   ============================================================ */
a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* ============================================================
   Reduced motion — ship the static, assembled version
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .js [data-bb]{opacity:1 !important;transform:none !important}
  [data-marquee]{animation:none !important}
}