/* MADMAXON — zdieľaný základ návrhov (tokeny a komponenty podľa www/src/app/globals.css) */
@import url("fonts/fonts.css");

:root {
  --void: #030308;
  --obsidian: #0c0c12;
  --slag: #16161f;
  --ash: #8a8590;
  --ember: #ff1a3d;
  --emberdim: #8f1a2e;
  --holo: #7af0ff;
  --gold: #d4af56;
  --fg: #ffffff;
  --line: rgba(255, 255, 255, 0.1);
  --display: "Orbitron", system-ui, sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: clamp(20px, 6.6vw, 96px);
  /* výška hlavičky a hero: na MacBooku Air sa zmestí do okna prehliadača */
  --hdr: 112px;
  --hero-h: clamp(640px, calc(100svh - var(--hdr)), 860px);
  --full-h: clamp(720px, 100svh, 960px);
}
/* snímky do PDF držia pôvodné rozmery */
.shot { --hero-h: 788px; --full-h: 900px; }
[data-theme="light"] {
  --void: #f8f9fc;
  --obsidian: #eceef5;
  --slag: #e2e6f0;
  --ash: #5c5864;
  --ember: #d2203a;
  --holo: #00829b;
  --fg: #111016;
  --line: rgba(17, 16, 22, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--void);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; }
::selection { background: rgba(255, 26, 61, 0.35); color: #fff; }

/* obrázkové sloty */
[data-img] { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--slag); }
[data-img].is-cutout { background-color: transparent; background-size: contain; background-position: center bottom; }

/* atmosféra webu */
.noise::after {
  content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 90; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.holo-grid {
  background-image:
    linear-gradient(rgba(122, 240, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 240, 255, 0.038) 1px, transparent 1px);
  background-size: 52px 52px;
}
.vignette::before { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 140px 40px rgba(0, 0, 0, 0.55); }

/* typografia */
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.mono { font-family: var(--mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; }
.chroma { animation: chroma 8s ease-in-out infinite; }
@keyframes chroma {
  0%, 100% { text-shadow: 0.02em 0 0 rgba(255, 26, 61, 0.45), -0.02em 0 0 rgba(122, 240, 255, 0.3); }
  33% { text-shadow: -0.03em 0 0 rgba(255, 26, 61, 0.35), 0.03em 0 0 rgba(122, 240, 255, 0.4); }
  66% { text-shadow: 0.04em -0.01em 0 rgba(255, 26, 61, 0.3), -0.04em 0.01em 0 rgba(122, 240, 255, 0.35); }
}

/* tlačidlá */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 28px; border-radius: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--ember); color: #fff; border: 1px solid var(--ember); position: relative; overflow: hidden;
  box-shadow: 0 0 40px -8px rgba(255, 26, 61, 0.6); transition: transform 0.25s, box-shadow 0.25s;
}
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-160%) skewX(-12deg); animation: sweep 3.5s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(320%) skewX(-12deg); } }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 60px -6px rgba(255, 26, 61, 0.85); }
.btn-ghost { background: transparent; color: var(--fg); border-color: rgba(122, 240, 255, 0.35); box-shadow: none; }
.btn-ghost::after { display: none; }
.btn-ghost:hover { border-color: var(--holo); color: var(--holo); box-shadow: 0 0 30px -10px var(--holo); }
.arrow { font-family: var(--body); font-size: 18px; line-height: 1; }

/* hlavička (kópia štruktúry webu) */
.mm-top { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: rgba(3, 3, 8, 0.85); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ash); position: relative; z-index: 40; }
.mm-top b { color: var(--ember); font-weight: 500; }
.mm-nav { height: 74px; display: flex; align-items: center; gap: 36px; padding: 0 var(--pad); position: relative; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(3, 3, 8, 0.55); backdrop-filter: blur(14px); }
.mm-nav .logo { height: 34px; width: auto; display: block; }
.mm-nav nav { display: flex; gap: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.mm-nav nav a:hover { color: var(--ember); }
.mm-nav .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.mm-nav .pill { white-space: nowrap; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.85); }
.mm-nav .search { width: 210px; color: var(--ash); justify-content: space-between; }
.mm-nav .pill kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.mm-nav.is-overlay, .mm-top.is-overlay { background: transparent; border-color: rgba(255,255,255,.08); backdrop-filter: none; }
[data-theme="light"] .mm-top { background: rgba(248,249,252,.9); }
[data-theme="light"] .mm-nav { background: rgba(248,249,252,.75); }
[data-theme="light"] .mm-nav nav, [data-theme="light"] .mm-nav .pill { color: #333; }

/* pás pod hero – kategórie + dôvera */
.trio { padding: 56px var(--pad) 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 2; }
.trio a { position: relative; height: 220px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 24px; isolation: isolate; }
.trio a [data-img] { position: absolute; inset: 0; z-index: -2; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.trio a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(3,3,8,.95), rgba(3,3,8,.2) 70%); }
.trio a:hover [data-img] { transform: scale(1.07); }
.trio a:hover { border-color: rgba(255, 26, 61, 0.6); }
.trio .n { position: absolute; top: 18px; left: 22px; font-family: var(--mono); font-size: 11px; color: var(--ember); letter-spacing: .2em; }
.trio h3 { font-size: 24px; font-weight: 500; }
.trio p { font-size: 14px; color: rgba(255,255,255,.65); margin-top: 4px; }
.trio a > div { min-width: 0; flex: 1; }
.trio .go { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--holo); text-transform: uppercase; white-space: nowrap; }
.trust { display: flex; gap: 34px; padding: 0 var(--pad) 40px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash); }
.trust span::before { content: "✓ "; color: var(--ember); }
[data-theme="light"] .trio a::before { background: linear-gradient(to top, rgba(10,10,16,.88), rgba(10,10,16,.1) 70%); }
[data-theme="light"] .trio a { color: #fff; }

/* vstupné animácie */
.rv { opacity: 0; transform: translateY(24px); animation: rv 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
.rv.d1 { animation-delay: .1s } .rv.d2 { animation-delay: .2s } .rv.d3 { animation-delay: .32s } .rv.d4 { animation-delay: .45s } .rv.d5 { animation-delay: .6s }
@keyframes rv { to { opacity: 1; transform: none; } }
.static .rv { animation: none; opacity: 1; transform: none; }

/* štítok návrhu – vpravo dole, v PDF sa skryje */
.design-tag { position: fixed; right: 18px; bottom: 18px; z-index: 100; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); background: rgba(3,3,8,.7); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; backdrop-filter: blur(8px); }
.design-tag a { color: var(--holo); margin-left: 10px; }
.shot .design-tag { display: none; }
[data-theme="light"] .design-tag { background: rgba(255,255,255,.85); color: #55525c; }
[data-theme="light"] .design-tag a { color: var(--ember); }

/* mobilné menu */
.burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; padding: 0; place-items: center; }
.burger i, .burger i::before, .burger i::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .3s, background .3s; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; }
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.menu-open .burger i { background: transparent; }
.menu-open .burger i::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger i::after { transform: translateY(-6px) rotate(-45deg); }
.mm-drawer { display: none; }

/* malé notebooky */
@media (max-width: 1280px) {
  .mm-nav { gap: 24px; }
  .mm-nav nav { gap: 18px; font-size: 11px; letter-spacing: .16em; }
  .mm-nav .search { width: 160px; }
  .mm-nav .search kbd { display: none; }
}

/* tablet */
@media (max-width: 1100px) {
  .mm-nav nav, .mm-nav .search, .mm-top .links { display: none; }
  .burger { display: grid; }
  .mm-drawer { display: block; position: absolute; left: 0; right: 0; z-index: 39; padding: 8px var(--pad) 24px; background: rgba(3,3,8,.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .3s, opacity .3s, visibility .3s; }
  .mm-drawer nav { display: grid; }
  .mm-drawer nav a { font-family: var(--display); font-size: 22px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .mm-drawer nav a::after { content: "→"; float: right; color: var(--ember); font-family: var(--body); }
  .mm-drawer .search { display: flex; margin-top: 18px; height: 48px; padding: 0 16px; align-items: center; border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 12px; color: var(--ash); }
  .menu-open .mm-drawer { transform: none; opacity: 1; visibility: visible; }
  [data-theme="light"] .mm-drawer { background: rgba(248,249,252,.97); color: #111016; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .trio a { height: 190px; padding: 18px; }
  .trio h3 { font-size: 19px; }
  .trio .go { display: none; }
  .trust { flex-wrap: wrap; gap: 12px 24px; }
}

/* mobil */
@media (max-width: 700px) {
  :root { --hdr: 92px; }
  body { font-size: 16px; }
  .mm-top { height: 32px; font-size: 9.5px; letter-spacing: .2em; }
  .mm-top .x { display: none; }
  .mm-nav { height: 60px; gap: 12px; }
  .mm-nav .logo { height: 24px; }
  .mm-nav .right { gap: 8px; }
  .mm-nav .pill { height: 40px; padding: 0 12px; }
  .mm-nav .pill.lang, .mm-nav .pill.fav { display: none; }
  .btn { height: 50px; padding: 0 22px; letter-spacing: .18em; }
  .ctas { flex-wrap: wrap; }
  .ctas .btn { flex: 1 1 auto; justify-content: center; }
  .eyebrow { font-size: 10.5px; letter-spacing: .26em; }
  .trio { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
  .trio a { height: 168px; }
  .trio h3 { font-size: 21px; }
  .trio .go { display: block; }
  .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 10px; letter-spacing: .16em; }
  .design-tag { right: 10px; bottom: 10px; padding: 6px 10px; font-size: 9px; letter-spacing: .14em; }
  .design-tag .nm { display: none; }
  .design-tag { opacity: .85; }
  .design-tag a { margin-left: 8px; }
}
@media (max-width: 400px) {
  .mm-nav .cart .cart-t { display: none; }
  .trio .go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
:where(header[data-mm-header]) { display: block; position: relative; }
header[data-mm-header] { z-index: 60; }