/* ============================================================
   Jonáš Světlík - osobní web
   Aesthetic: "builder's dossier" - ink + bone + electric lime
   ============================================================ */

:root{
  --ink:      #0c0c0e;
  --ink-2:    #131316;
  --ink-3:    #1a1a1e;
  --bone:     #ECE7DB;
  --bone-dim: #8f8c83;
  --bone-2:   #b9b5ab;
  --lime:     #D8FF47;
  --lime-deep:#bce82a;
  --line:     rgba(236,231,219,.10);
  --line-2:   rgba(236,231,219,.16);

  --display: 'Bricolage Grotesque', sans-serif;
  --body:    'Schibsted Grotesk', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.55rem + .55vw,1.12rem);
  line-height:1.65;
  overflow-x:hidden;
}
::selection{ background:var(--lime); color:#000; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

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

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(12,12,14,.72);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:700; }
.brand__mark{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--lime); color:#000; font-family:var(--mono); font-weight:700;
  font-size:.95rem; letter-spacing:-.02em; transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }
.brand__mark--img{ background:none; border-radius:0; width:auto; height:44px; object-fit:contain; padding:0; }
.brand__name{ font-size:1.02rem; letter-spacing:-.01em; }

.nav__menu{ display:flex; align-items:center; gap:2.1rem; }
.nav__menu a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--bone-2);
  display:flex; align-items:center; gap:.4rem; transition:color .2s; position:relative;
}
.nav__menu a .idx{ color:var(--lime); opacity:.65; font-size:.7rem; }
.nav__menu a:hover{ color:var(--bone); }
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--lime); transition:width .25s;
}
.nav__menu a:hover::after{ width:100%; }
.nav__contact{ color:var(--bone) !important; }

.burger{
  display:none; flex-direction:column; gap:5px; width:42px; height:42px;
  border:1px solid var(--line-2); border-radius:11px; background:transparent;
  align-items:center; justify-content:center; cursor:pointer;
}
.burger span{ width:18px; height:2px; background:var(--bone); border-radius:2px; transition:transform .3s,opacity .3s; }
.nav.open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{ position:relative; padding:clamp(8rem,18vh,12rem) 0 0; overflow:hidden; }
.hero__grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 62%);
          mask-image:radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 62%);
  opacity:.6;
}
/* colored "pie" behind the bento - each wedge points toward its tile & echoes its palette */
.hero__zones{
  position:absolute; inset:-15% -15% -8%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg at 50% 60%,
    rgba(56,232,255,.20)    0deg  68deg,   /* cyan   → 02 AI aplikace (vpravo nahoře) */
    rgba(74,246,144,.20)   68deg 150deg,   /* zelená → 05 Agenti (vpravo dole)        */
    rgba(107,63,244,.26)  150deg 210deg,   /* violet → 04 Robin (uprostřed dole)      */
    rgba(216,255,71,.22)  210deg 292deg,   /* limetka→ 03 Weby (vlevo dole)           */
    rgba(200,119,46,.28)  292deg 360deg    /* jantar → 01 O mně (vlevo)               */
  );
  filter:blur(38px) saturate(125%);
  -webkit-mask-image:radial-gradient(82% 74% at 50% 60%, #000 16%, transparent 74%);
          mask-image:radial-gradient(82% 74% at 50% 60%, #000 16%, transparent 74%);
  opacity:.85;
}
.hero .wrap{ position:relative; z-index:2; }

.kicker{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--bone-dim);
  display:flex; align-items:center; gap:.55rem; margin-bottom:clamp(1.4rem,4vh,2.4rem);
  flex-wrap:wrap;
}
.kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(216,255,71,.16); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.hero__name{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3rem, 9.5vw, 7rem);
  line-height:.92; letter-spacing:-.045em;
  margin-bottom:1.1rem;
}
.hero__tag{
  font-size:clamp(1.15rem,.7rem + 1vw,1.85rem); line-height:1.42;
  color:var(--bone-2); max-width:30ch;
}
.hero__tag .hl{ color:var(--bone); font-weight:500; }
.cursor{ font-style:normal; color:var(--lime); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

/* ---- router / bento tiles - each tile is a MINI of its page ---- */
.router{ margin-top:clamp(2.6rem,6vh,4.2rem); }
.router__label{ font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--bone-dim); display:block; margin-bottom:1.2rem; }

.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.bt{
  position:relative; overflow:hidden; border-radius:18px; padding:1.4rem 1.5rem;
  min-height:220px; display:flex; border:1px solid var(--line-2); isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.bt:hover{ transform:translateY(-5px); }
.mini{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; gap:.8rem; width:100%; }
.m-top{ display:flex; flex-direction:column; gap:.7rem; }
.m-head{ display:flex; justify-content:space-between; align-items:center; }
.bt__no{ font-family:var(--mono); font-size:.72rem; }
.bt__arr{ font-size:1rem; transition:transform .3s; }
.bt:hover .bt__arr{ transform:translate(3px,-3px); }
.m-bottom{ display:flex; flex-direction:column; gap:.45rem; }
.m-title{ line-height:1.05; }
.m-sub{ font-size:.78rem; line-height:1.4; }

/* spans */
.bt--story{ grid-column:span 3; } .bt--tech{ grid-column:span 3; }
.bt--fast{ grid-column:span 2; } .bt--robin{ grid-column:span 2; } .bt--agents{ grid-column:span 2; }

/* 01 - O MNĚ · editorial (light sand) */
.bt--story{ background:linear-gradient(150deg,#F4ECDD,#EFE3C9); border-color:rgba(176,69,31,.28); }
.bt--story .bt__no,.bt--story .bt__arr{ color:#B0451F; }
.bt--story:hover{ border-color:#C8772E; box-shadow:0 18px 44px -18px rgba(176,69,31,.4); }
.bt--story .m-eyebrow{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:#B0451F; }
.bt--story .m-title{ font-family:'Fraunces',serif; font-weight:600; color:#2B2218; font-size:clamp(1.4rem,2.6vw,2.1rem); }
.bt--story .m-title em{ font-style:italic; color:#C8772E; }
.bt--story .m-sub{ font-family:var(--body); color:#7c6d57; }
.m-frames{ display:flex; gap:.5rem; }
.m-frames i{ width:50px; height:37px; border-radius:3px; border:3px solid #fff; box-shadow:0 6px 13px -6px rgba(43,34,24,.55); display:block; }
.m-frames i:nth-child(1){ background:linear-gradient(135deg,#C8772E,#B0451F); transform:rotate(-4deg); }
.m-frames i:nth-child(2){ background:linear-gradient(135deg,#6E7340,#43492a); transform:rotate(2deg); }
.m-frames i:nth-child(3){ background:linear-gradient(135deg,#9c6b3f,#6b4423); transform:rotate(-2deg); }

/* 02 - AI APLIKACE · terminal (black) */
.bt--tech{ background:#070709; border-color:rgba(56,232,255,.22); }
.bt--tech .bt__no,.bt--tech .bt__arr{ color:#38E8FF; }
.bt--tech:hover{ border-color:#38E8FF; box-shadow:0 0 36px -8px rgba(56,232,255,.45); }
.bt--tech::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.6; background-image:linear-gradient(rgba(56,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,232,255,.06) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:linear-gradient(transparent,#000 85%); mask-image:linear-gradient(transparent,#000 85%); }
.bt--tech::after{ content:""; position:absolute; inset:0; z-index:0; background:repeating-linear-gradient(0deg,rgba(56,232,255,.05) 0 1px,transparent 1px 5px); }
.bt--tech .m-prompt{ font-family:var(--mono); font-size:.68rem; color:#38E8FF; }
.bt--tech .m-title{ font-family:var(--mono); font-weight:700; text-transform:uppercase; color:#dffaff; font-size:clamp(1.15rem,2vw,1.7rem); }
.m-term{ display:flex; flex-direction:column; gap:.12rem; font-family:var(--mono); font-size:.66rem; line-height:1.65; color:#6aa7b0; border-left:2px solid rgba(56,232,255,.35); padding-left:.6rem; }
.m-term b{ color:#8C7BFF; font-weight:500; } .m-term i{ color:#38E8FF; font-style:normal; } .m-term .ok{ color:#28c840; }
.tcursor{ color:#38E8FF; font-style:normal; animation:blink 1.1s steps(1) infinite; }

/* 03 - WEBY · poster (lime) */
.bt--fast{ background:var(--lime); border-color:var(--lime); }
.bt--fast .bt__no{ color:#000; opacity:.5; } .bt--fast .bt__arr{ color:#000; }
.bt--fast:hover{ box-shadow:0 18px 46px -16px rgba(216,255,71,.6); }
.bt__stamp{ position:absolute; top:-.7rem; right:.3rem; font-family:'Archivo Black',sans-serif; font-size:4.8rem; color:rgba(0,0,0,.10); letter-spacing:-.05em; z-index:0; }
.m-ribbon{ align-self:flex-start; font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; background:#0a0a0a; color:var(--lime); padding:.3rem .65rem; border-radius:100px; }
.bt--fast .m-title{ font-family:'Archivo Black',sans-serif; text-transform:uppercase; color:#0a0a0a; font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:.92; letter-spacing:-.02em; }
.bt--fast .m-sub{ color:#22300a; font-weight:600; }

/* 04 - ROBIN · dark violet (styl robin.html) */
.bt--robin{ background:linear-gradient(145deg,#0d0b20 0%,#131130 100%); border-color:rgba(107,63,244,.3); }
.bt--robin .bt__no,.bt--robin .bt__arr{ color:#8B62F6; }
.bt--robin:hover{ border-color:#6B3FF4; box-shadow:0 0 34px -8px rgba(107,63,244,.55); }
.m-chat{ display:flex; flex-direction:column; gap:.35rem; }
.m-bub{ font-size:.66rem; line-height:1.3; padding:.4rem .6rem; border-radius:11px; max-width:92%; }
.m-bub--u{ align-self:flex-end; background:rgba(107,63,244,.15); border:1px solid rgba(107,63,244,.3); color:rgba(255,255,255,.85); border-bottom-right-radius:3px; }
.m-bub--r{ align-self:flex-start; background:#141328; border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); border-bottom-left-radius:3px; }
.m-src{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.3rem; font-size:.56rem; font-weight:600; color:#00C9A7; background:rgba(0,201,167,.12); border:1px solid rgba(0,201,167,.2); padding:.15rem .45rem; border-radius:100px; }
.bt--robin .m-title{ font-family:var(--display); font-weight:700; color:#fff; font-size:1.55rem; display:flex; align-items:center; gap:.5rem; }
.m-owl{ width:28px; height:28px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(107,63,244,.7)) drop-shadow(0 0 5px rgba(0,201,167,.3)); }
.bt--robin .m-sub{ color:rgba(255,255,255,.5); }

/* 05 - AGENTI · systems graph (dark green) */
.bt--agents{ background:#0a0f0c; border-color:rgba(74,246,144,.22); }
.bt--agents .bt__no,.bt--agents .bt__arr{ color:#4af690; }
.bt--agents:hover{ border-color:#4af690; box-shadow:0 0 32px -8px rgba(74,246,144,.42); }
.bt--agents::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5; background-image:radial-gradient(circle at 1px 1px, rgba(74,246,144,.22) 1px, transparent 0); background-size:18px 18px; -webkit-mask-image:linear-gradient(transparent,#000); mask-image:linear-gradient(transparent,#000); }
.m-graph{ width:170px; max-width:92%; height:auto; }
.m-graph line{ stroke:#4af690; stroke-width:2; opacity:.65; }
.m-graph circle{ fill:#4af690; }
.bt--agents .m-title{ font-family:var(--mono); font-weight:700; color:#d9ffe9; font-size:1.5rem; }
.bt--agents .m-sub{ font-family:var(--mono); color:#6a9a7e; font-size:.7rem; }

/* 06 - JARVIS · HUD strip (black + glowing cyan, gold accent) */
.bt--jarvis{ grid-column:span 6; min-height:170px; background:linear-gradient(120deg,#010509 0%,#03111A 100%); border-color:rgba(43,228,255,.3); }
.bt--jarvis .bt__no,.bt--jarvis .bt__arr{ color:#2BE4FF; }
.bt--jarvis:hover{ border-color:#2BE4FF; box-shadow:0 0 36px -8px rgba(43,228,255,.55); }
.bt--jarvis::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.6; background-image:radial-gradient(circle, rgba(43,228,255,.25) 1px, transparent 1.5px),linear-gradient(rgba(43,228,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(43,228,255,.06) 1px,transparent 1px); background-size:120px 90px,30px 30px,30px 30px; -webkit-mask-image:linear-gradient(transparent,#000 80%); mask-image:linear-gradient(transparent,#000 80%); }
.jv-row{ display:flex; align-items:center; gap:1.2rem; }
.jv-ring{ width:74px; height:74px; flex-shrink:0; filter:drop-shadow(0 0 10px rgba(43,228,255,.5)); }
.jv-ring circle{ fill:none; transform-origin:center; }
.jv-ring .jr1{ stroke:rgba(43,228,255,.8); stroke-width:2.5; stroke-dasharray:.8 2.66; animation:jvspin 30s linear infinite reverse; }
.jv-ring .jr2{ stroke:#2BE4FF; stroke-width:2.5; stroke-dasharray:40 12 8 12; animation:jvspin 12s linear infinite; }
.jv-ring .jr-core{ fill:#2BE4FF; filter:drop-shadow(0 0 8px rgba(43,228,255,.9)); }
@keyframes jvspin{ to{ transform:rotate(360deg); } }
.bt--jarvis .m-title{ font-family:var(--mono); font-weight:700; color:#EAFBFF; font-size:1.5rem; text-shadow:0 0 14px rgba(43,228,255,.45); }
.bt--jarvis .m-sub{ font-family:var(--mono); color:#4E7A8A; font-size:.72rem; }
.jv-stat{ margin-left:auto; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:#2BE4FF; text-shadow:0 0 10px rgba(43,228,255,.6); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .jv-ring .jr2{ animation:none; } }
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono);
  font-size:.85rem; letter-spacing:.02em; padding:1rem 1.6rem; border-radius:100px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s;
  border:1px solid transparent; cursor:pointer;
}
.btn--primary{ background:var(--lime); color:#000; font-weight:700; }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 12px 34px -10px rgba(216,255,71,.5); }
.btn--ghost{ border-color:var(--line-2); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-3px); }
.btn .arr{ transition:transform .25s; }
.btn--primary:hover .arr{ transform:translateY(3px); }

/* ticker */
.ticker{ margin-top:clamp(3.5rem,9vh,6rem); border-block:1px solid var(--line); padding:1rem 0; overflow:hidden; position:relative; z-index:2; }
.ticker__track{ display:flex; gap:1.6rem; white-space:nowrap; width:max-content; animation:scroll 114s linear infinite; }
.ticker__track span{ font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--bone-2); }
.ticker__track .sep{ color:var(--lime); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ============ SECTION SHELL ============ */
.section{ padding:clamp(5rem,12vh,9rem) 0; position:relative; z-index:2; border-top:1px solid var(--line); scroll-margin-top:80px; }
.sec__no{ font-family:var(--mono); font-size:.8rem; color:var(--lime); letter-spacing:.1em; }
.sec__title{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1; }

.sec__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:clamp(2rem,6vw,5rem); }
.sec__head .sec__no{ display:block; margin-bottom:.8rem; }
.sec__grid .sec__title{ font-size:clamp(2.4rem,5vw,3.8rem); position:sticky; top:110px; }

.sec__head--row{ display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,6vh,4rem); }
.sec__head--row .sec__title{ font-size:clamp(2.4rem,6vw,4.4rem); }
.sec__sub{ color:var(--bone-dim); font-family:var(--mono); font-size:.82rem; margin-left:auto; }

.sec__body p{ margin-bottom:1.2rem; color:var(--bone-2); max-width:62ch; }
.sec__body p strong{ color:var(--bone); font-weight:600; }
.sec__body p em{ color:var(--lime); font-style:italic; }
.lead{ font-size:clamp(1.2rem,.8rem + .9vw,1.55rem); line-height:1.5; color:var(--bone) !important; }
.lead strong{ color:var(--lime) !important; }

/* facts */
.facts{ list-style:none; margin-top:2.4rem; display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
.facts li{ display:flex; justify-content:space-between; gap:1rem; padding:.95rem .2rem; border-bottom:1px solid var(--line); }
.facts__k{ font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--bone-dim); text-transform:uppercase; }
.facts__v{ font-weight:500; text-align:right; }

/* ============ PROJECTS ============ */
.projects{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.proj{
  background:var(--ink-2); border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column;
  transition:border-color .3s, transform .3s, background .3s; position:relative; overflow:hidden;
}
.proj::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(80% 60% at 100% 0%, rgba(216,255,71,.10), transparent 70%);
}
.proj:hover{ border-color:var(--line-2); transform:translateY(-4px); background:var(--ink-3); }
.proj:hover::before{ opacity:1; }
.proj--lead{ grid-column:1 / -1; }
.proj{ scroll-margin-top:96px; }
.proj:target{ border-color:rgba(216,255,71,.55); animation:targetflash 1.8s ease 1; }
@keyframes targetflash{ 0%{ box-shadow:0 0 0 0 rgba(216,255,71,.5); } 100%{ box-shadow:0 0 0 16px rgba(216,255,71,0); } }

.proj__top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.proj__tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--bone-dim); padding:.3rem .7rem; border:1px solid var(--line); border-radius:100px; }
.proj__tag--live{ color:var(--lime); border-color:rgba(216,255,71,.35); }
.proj__tag--done{ color:var(--bone-2); }
.proj__role{ font-family:var(--mono); font-size:.72rem; color:var(--bone-dim); }
.proj__name{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.02em; line-height:1; margin-bottom:.9rem; }
.proj__by{ color:var(--bone-dim); font-weight:400; }
.proj--lead .proj__name{ font-size:clamp(2.2rem,5vw,3.4rem); }
.proj__desc{ color:var(--bone-2); margin-bottom:1.4rem; max-width:60ch; }
.proj--lead .proj__desc{ font-size:1.12rem; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; }
.chips li{ font-family:var(--mono); font-size:.72rem; color:var(--bone-2); padding:.32rem .65rem; background:rgba(236,231,219,.05); border:1px solid var(--line); border-radius:8px; }
.proj__link{ font-family:var(--mono); font-size:.85rem; color:var(--lime); margin-top:1.4rem; display:inline-flex; gap:.4rem; align-items:center; width:max-content; }
.proj__link:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ============ STACK ============ */
.stack{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.stack__label{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--lime); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.stack__list{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.stack__list li{ display:flex; justify-content:space-between; gap:.6rem; color:var(--bone); font-size:.98rem; }
.stack__list li span{ font-family:var(--mono); font-size:.7rem; color:var(--bone-dim); align-self:center; }
.stack__note{ margin-top:2.6rem; font-style:italic; color:var(--bone-2) !important; max-width:54ch; }

/* ============ TIMELINE ============ */
.timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:clamp(3rem,7vh,5rem); }
.tl__item{ position:relative; padding-top:2rem; border-top:1px solid var(--line-2); }
.tl__node{ position:absolute; top:-5px; left:0; width:10px; height:10px; border-radius:50%; background:var(--lime); }
.tl__title{ font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.01em; margin-bottom:.7rem; }
.tl__item p{ color:var(--bone-2); font-size:.96rem; }

.principles{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.princ{ padding:clamp(1.4rem,2.5vw,2rem); border-right:1px solid var(--line); transition:background .3s; }
.princ:last-child{ border-right:none; }
.princ:hover{ background:var(--ink-2); }
.princ__no{ font-family:var(--mono); font-size:.72rem; color:var(--lime); opacity:.7; }
.princ h4{ font-family:var(--display); font-weight:700; font-size:1.25rem; margin:.6rem 0 .5rem; letter-spacing:-.01em; }
.princ p{ color:var(--bone-dim); font-size:.9rem; }

/* ============ CONTACT ============ */
.section--contact{ padding-bottom:clamp(4rem,9vh,7rem); }
.section--contact .sec__no{ display:block; margin-bottom:1.2rem; }
.contact__title{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,7vw,6rem); line-height:.96; letter-spacing:-.035em; margin-bottom:1.4rem; }
.contact__lead{ color:var(--bone-dim); font-family:var(--mono); font-size:.9rem; margin-bottom:clamp(2.5rem,6vh,4rem); }

.contact__links{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line-2); }
.clink{ display:flex; align-items:center; gap:1rem; padding:1.5rem .4rem; border-bottom:1px solid var(--line); transition:padding .3s, color .3s; }
.clink:nth-child(odd){ border-right:1px solid var(--line); padding-right:1.5rem; }
.clink:nth-child(even){ padding-left:1.5rem; }
.clink__k{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim); width:80px; flex-shrink:0; }
.clink__v{ font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,2.2vw,1.55rem); letter-spacing:-.01em; }
.clink .arr{ margin-left:auto; color:var(--lime); transition:transform .25s; }
.clink:hover{ color:var(--lime); }
.clink:hover .clink__v{ color:var(--lime); }
.clink:hover .arr{ transform:translate(3px,-3px); }

/* ---- kontaktní formulář ---- */
.cform{ max-width:760px; margin-bottom:clamp(2.6rem,6vh,3.6rem); }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cfield{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.cfield__k{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim); }
.cfield__in{
  font-family:var(--body); font-size:1rem; color:var(--bone); width:100%;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:12px;
  padding:.85rem 1rem; transition:border-color .2s, box-shadow .2s, background .2s;
}
.cfield__in::placeholder{ color:var(--bone-dim); opacity:.55; }
.cfield__in:focus{ outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(216,255,71,.14); background:var(--ink-3); }
.cfield__ta{ resize:vertical; min-height:132px; line-height:1.6; }
.cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* checkbox "Máte firmu?" */
.cfield--check{ flex-direction:row; align-items:center; margin-bottom:1rem; }
.ccheck{ display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; user-select:none; }
.ccheck__box{ position:absolute; width:1px; height:1px; opacity:0; }
.ccheck__mark{ width:22px; height:22px; flex-shrink:0; border:1px solid var(--line-2); border-radius:6px; background:var(--ink-2); display:grid; place-items:center; transition:border-color .2s, background .2s; }
.ccheck__mark::after{ content:"✓"; font-size:.8rem; font-weight:700; color:#000; opacity:0; transform:scale(.5); transition:opacity .15s, transform .15s; }
.ccheck__box:checked + .ccheck__mark{ background:var(--lime); border-color:var(--lime); }
.ccheck__box:checked + .ccheck__mark::after{ opacity:1; transform:none; }
.ccheck:hover .ccheck__mark{ border-color:var(--lime); }
.ccheck__box:focus-visible + .ccheck__mark{ box-shadow:0 0 0 3px rgba(216,255,71,.16); }
.ccheck__label{ font-family:var(--body); font-size:1rem; color:var(--bone); }

/* rozbalovací pole na název firmy */
.cfield--firma{ overflow:hidden; max-height:0; opacity:0; margin:0; transition:max-height .32s ease, opacity .24s ease, margin .32s ease; }
.cfield--firma.is-open{ max-height:120px; opacity:1; margin-bottom:1rem; }
@media (prefers-reduced-motion:reduce){ .cfield--firma{ transition:none; } }
.cform__foot{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.3rem; }
.cform__send[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.cform__status{ font-family:var(--mono); font-size:.8rem; color:var(--bone-dim); margin:0; }
.cform__status.ok{ color:var(--lime); }
.cform__status.err{ color:#ff6a5a; }
.contact__or{ font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--bone-dim); margin-bottom:1rem; }
@media (max-width:600px){ .cform__row{ grid-template-columns:1fr; } }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--line); padding:2rem 0; position:relative; z-index:2; }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.76rem; color:var(--bone-dim); }
.footer__top:hover{ color:var(--lime); }

/* ============ REVEAL ANIM ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
/* hero staggered */
.hero .reveal[data-d="0"]{ transition-delay:.05s }
.hero .reveal[data-d="1"]{ transition-delay:.15s }
.hero .reveal[data-d="2"]{ transition-delay:.27s }
.hero .reveal[data-d="3"]{ transition-delay:.42s }
.hero .reveal[data-d="4"]{ transition-delay:.55s }
.hero .reveal[data-d="5"]{ transition-delay:.7s }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .ticker__track,.cursor,.kicker .dot{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  .nav__menu{
    position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; align-items:flex-start;
    gap:1.6rem; background:rgba(12,12,14,.97); backdrop-filter:blur(16px);
    padding:6rem var(--gut) 2.5rem; transform:translateY(-105%); transition:transform .42s cubic-bezier(.5,.1,.2,1);
    border-bottom:1px solid var(--line); height:auto; z-index:-1;
  }
  .nav.open .nav__menu{ transform:translateY(0); }
  .nav__menu a{ font-size:1.4rem; font-family:var(--display); }
  .nav__menu a .idx{ font-size:.85rem; }
  .burger{ display:flex; }
  .brand__name{ display:none; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bt--story,.bt--tech,.bt--agents,.bt--jarvis{ grid-column:span 2; }
  .bt--fast,.bt--robin{ grid-column:span 1; }
  .bt{ min-height:200px; }

  .sec__grid{ grid-template-columns:1fr; gap:1.6rem; }
  .sec__grid .sec__title{ position:static; }
  .projects{ grid-template-columns:1fr; }
  .stack{ grid-template-columns:1fr; gap:2rem; }
  .timeline{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:repeat(2,1fr); }
  .princ:nth-child(2){ border-right:none; }
  .princ{ border-bottom:1px solid var(--line); }
  .princ:nth-child(3),.princ:nth-child(4){ border-bottom:none; }
  .contact__links{ grid-template-columns:1fr; }
  .clink:nth-child(odd){ border-right:none; padding-right:.4rem; }
  .clink:nth-child(even){ padding-left:.4rem; }
}
@media (max-width:520px){
  .facts{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; }
  .princ{ border-right:none; }
  .sec__sub{ margin-left:0; flex-basis:100%; }
  .bento{ grid-template-columns:1fr; }
  .bt--story,.bt--tech,.bt--fast,.bt--robin,.bt--agents,.bt--jarvis{ grid-column:span 1; }
}