/* =========================
   Tag Me Maybe — Landing CSS
   (tylko dla strony powitalnej)
   ========================= */

:root{
  /* Paleta TMM */
  --bg: #f7f9fc;
  --ink: #1f2937;
  --sub: #5a677b;
  --card: #ffffff;
  --line: #cfd8ea;
  --brand: #3a63ff;
  --brand-ink: #1739c7;
  --brand-accent: #FCAE1E;
  --shadow: 0 8px 30px rgba(15,23,42,.06);
  --radius: 14px;
  --radius-lg: 20px;
  --tile-gap: 14px;
}

*{ box-sizing: border-box }
html,body { height:100% }

body {
  margin:0;
  display: flex;
  height: 100%;
  flex-direction: column;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background: #f7f9fc url("images/1.jpg") repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  width: 100%;
}

footer {
  margin-top: auto;
  padding:24px;
  border-top:1px solid var(--line);
  color:#6f7d91;
  text-align:center;
  background:#fff;
}

a { color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* Pasek górny */
#toolbar{
  position: sticky; top: 0; z-index: 2000;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e4e8f0;
  box-shadow: 0 6px 22px rgba(15,23,42,.07);
}
#toolbar .toolbar-inner{
  max-width: 1100px; margin: 0 auto;
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Brand po lewej */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo {
  height: 140px;
  width: auto;
  margin-top: -45px;
  margin-bottom: -45px;
}
.brand-name{ font-weight:800; color:#222; letter-spacing:.2px; }
.brand:hover .brand-name{ color: var(--brand); }

/* Linki po prawej */
.nav-links{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.nav-links a{ color:#2f3640; text-decoration:none; font-weight:500; }
.nav-links a:hover{ color: var(--brand); }

/* HERO */
.hero{
  padding: 64px 24px 22px;
  text-align:center;
  max-width: 900px;
  margin: 0 auto;
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(28px, 6vw, 52px);
  line-height:1.12;
  padding-bottom: .1em;
  font-weight:900;
  letter-spacing:.2px;
}
.hero p.lead{
  margin:0 auto 18px; color:var(--sub);
  max-width: 720px;
  font-size:clamp(16px,2.2vw,19px);
}
.cta-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.hero .meta{ margin-top:10px; font-size:.92rem; color:#6f7d91 }

.hero .browser-note{
  margin-top: 6px;
  font-size: .9rem;
  color: #5f6f86;
}

/* Animacja tytułu */
.title-anim{ display:inline-block; contain: content; --delay-step: 40ms; }
.title-anim .ch{
  display:inline-block; transform-origin: 50% 80%;
  transition: transform .25s ease, color .25s ease;
}
.title-anim:hover .ch{
  transform: translateY(-1px) rotate(-2deg);
  color: var(--brand-ink);
}
.title-anim .ch:nth-child(odd){ transition-delay: var(--delay-step) }
.title-anim .ch:nth-child(3n){ transition-delay: calc(var(--delay-step) * 2) }

/* KAFLE – kompaktowe */
.tiles {
  display: flex;
  justify-content: center;      /* wyśrodkowanie poziome */
  align-items: stretch;         /* zachowanie jednakowej wysokości */
  flex-wrap: wrap;
  gap: var(--tile-gap);
  margin: 6px 0 28px;
}

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
  text-decoration: none;
  color: inherit;
  gap: 6px;
}
.tile h3 { margin: .2rem 0 .4rem; font-size: 1.06rem; }
.tile p  { margin: 0 0 .6rem; color: #5a677b; font-size: .94rem; }
.tile .tile-cta { margin-top: auto; padding-top: .45rem; }
.tile:hover {
  box-shadow: 0 10px 34px rgba(15,23,42,.08);
  transform: translateY(-1px);
  text-decoration: none;
}

.tile {
  flex: 1 1 230px;
  max-width: 250px;
  min-height: 220px;
}

/* Kafel narzędzi wydania datasetu */
.tile-release {
  border-color: rgba(58, 99, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(58, 99, 255, 0.035), rgba(255, 255, 255, 0) 42%),
    var(--card);
}

.tile-release .tile-cta {
  border-color: #d8e1f0;
}

/* PRZYCISKI – kompaktowe */
.btn{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius: 10px;
  border:1px solid #d8e1f0;
  background:#f7f9fe;
  color:#334;
  font-weight:600;
  text-decoration:none;
}
.btn-primary{
  background: var(--brand);
  color:#fff;
  border-color:#325ff6;
  box-shadow: 0 4px 12px rgba(58,99,255,.16);
}
.btn:hover{ transform:none; filter:none; }

/* Sekcja O projekcie */
section#about{
  margin: 14px 0 60px; padding: 16px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}
.about-head{
  font-weight:900;
  font-size: clamp(22px, 4.5vw, 34px);
  margin: 4px 0 10px;
  letter-spacing:.2px;
}
.about-copy{ color:var(--sub); max-width: 85ch }

/* Mobile */
@media (max-width: 420px){
  .tile{ padding:12px }
  .hero .cta-row .btn{ padding:.6rem .8rem }
}

/* Druk */
@media print{ #toolbar{ display:none } }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:.5rem .75rem;
  background:#fff; border:1px solid #325ff6; border-radius:8px; z-index:2000;
}

.tile-img img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tile-img:hover img {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(15,23,42,.12);
}

.ch.accent {
  color: var(--brand-accent);
}

#hero-title .ch.accent {
  color: var(--brand-accent);
}
#hero-title .ch.accent:hover {
  color: var(--brand-accent); /* zachowuje kolor także na hoverze */
}

.text-orange {
  color: var(--brand-accent);
}

.text-orange:hover {
  color: #d38a00;
}

/* --- Nadpisanie ustawienia grida z global.css dla strony powitalnej --- */
#toolbar {
  display: block !important; /* usuwamy grid */
}

#toolbar .toolbar-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
}

#toolbar .toolbar-inner nav {
  flex-grow: 1;
}

#toolbar .toolbar-inner .lang-switcher {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* === Styl przycisku Pobierz w kolorze akcentu (jak "TAG") === */
.btn-accent {
  background: var(--brand-accent);
  color: #fff;
  border: 1px solid #e59500;
  box-shadow: 0 4px 12px rgba(252, 174, 30, 0.25);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-accent:hover {
  background: #e59500;
  box-shadow: 0 6px 16px rgba(252, 174, 30, 0.3);
  text-decoration: none;
}

/* =========================================================
   Global Themes 5.10a — landing visual alignment
   Keeps the landing architecture, adopts the newer About-page language.
   ========================================================= */
body.home-page {
  color: var(--tmm-ink);
  background-color: var(--tmm-page-bg);
  background-image:
    radial-gradient(900px 520px at 8% -10%, rgba(255,255,255,.58), transparent 66%),
    radial-gradient(760px 500px at 96% 0%, color-mix(in oklab, var(--tmm-border-strong) 22%, transparent), transparent 70%),
    linear-gradient(color-mix(in oklab, var(--tmm-grid-line) 72%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--tmm-grid-line) 72%, transparent) 1px, transparent 1px);
  background-size:auto,auto,26px 26px,26px 26px;
  background-attachment:fixed;
}
body.home-page #toolbar {
  min-height:92px;
  background:var(--tmm-toolbar-bg);
  border-bottom:1px solid var(--tmm-border);
  box-shadow:none;
  backdrop-filter:blur(14px);
}
body.home-page #toolbar .toolbar-inner {
  width:min(calc(100% - 32px),1240px);
  max-width:none;
  min-height:92px;
  padding:0;
}
body.home-page .brand-logo {
  height:140px;
  margin-top:-44px;
  margin-bottom:-44px;
}
body.home-page .nav-links { gap:28px; }
body.home-page .nav-links a { color:var(--tmm-ink-soft); font-weight:700; }
body.home-page .nav-links a:hover { color:var(--tmm-ink); }
body.home-page .wrap { max-width:1180px; padding:30px 16px 64px; }
body.home-page .hero { padding:34px 24px 24px; }
body.home-page .hero h1 { color:var(--tmm-ink); font-size:clamp(34px,5.6vw,58px); letter-spacing:-.035em; }
body.home-page .hero p.lead { color:var(--tmm-muted); }
body.home-page .hero .meta { color:var(--tmm-muted); }
body.home-page .hero .browser-note { color:var(--tmm-ink-soft); }
body.home-page .tiles { gap:16px; margin-top:14px; }
body.home-page .tile {
  background:color-mix(in oklab,var(--tmm-surface) 96%,transparent);
  border-color:var(--tmm-border);
  border-radius:18px;
  box-shadow:var(--tmm-shadow-card);
  min-height:220px;
  padding:18px;
}
body.home-page .tile p { color:var(--tmm-muted); }
body.home-page .tile:hover { border-color:var(--tmm-border-strong); box-shadow:0 16px 36px rgba(15,23,42,.075); }
body.home-page .tile-release {
  border-color:color-mix(in oklab,var(--tmm-theme-accent-ink) 24%,var(--tmm-border));
  background:linear-gradient(180deg,color-mix(in oklab,var(--tmm-theme-accent-soft) 48%,transparent),transparent 45%),var(--tmm-surface);
}
body.home-page .btn:not(.btn-primary):not(.btn-accent) {
  background:var(--tmm-surface-soft);
  border-color:var(--tmm-border);
  color:var(--tmm-ink-soft);
}
body.home-page footer {
  background:var(--tmm-footer-bg);
  border-top-color:var(--tmm-border);
  color:var(--tmm-muted);
}
body.home-page footer a { color:var(--tmm-theme-accent-ink); }

/* Home 1.0D — more breathing room between footer items. */
body.home-page .home-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:.65rem;
  row-gap:.3rem;
}
body.home-page .home-footer .footer-separator {
  opacity:.72;
}
body.home-page .home-footer .footer-contact {
  display:inline-flex;
  align-items:baseline;
  gap:.3rem;
}


/* =========================================================
   Home 1.1A — workflow-oriented landing architecture
   Keeps the established hero and quick-start visual language, while making
   the six core TMM modules visible without turning the first screen into a wall of cards.
   ========================================================= */
body.home-page .home-section {
  margin: 0 auto;
  width: 100%;
}
body.home-page .home-quick-start {
  margin-top: 2px;
}
body.home-page .tiles-quick {
  margin-bottom: 24px;
}
body.home-page .tiles-quick .tile {
  flex: 1 1 280px;
  max-width: 330px;
  min-height: 205px;
}
body.home-page .home-section-head {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}
body.home-page .home-section-head h2,
body.home-page .home-release h2 {
  margin: 9px 0 8px;
  color: var(--tmm-ink);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
body.home-page .home-section-head p {
  margin: 0 auto;
  color: var(--tmm-muted);
  font-size: 1rem;
  line-height: 1.58;
}
body.home-page .home-section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid var(--tmm-border);
  border-radius: 999px;
  background: var(--tmm-surface-soft);
  color: var(--tmm-theme-accent-ink);
  font-size: .74rem;
  font-weight: 820;
  letter-spacing: .035em;
  text-transform: uppercase;
}
body.home-page .home-workflow {
  margin-top: 8px;
  color: var(--tmm-ink-soft);
  font-size: .86rem;
  font-weight: 720;
  letter-spacing: .01em;
}
body.home-page .home-modules {
  padding: 22px 0 36px;
  border-top: 0;
}
body.home-page .home-modules .home-section-head {
  margin-bottom: 16px;
}
body.home-page .home-modules .home-section-head h2 {
  margin-top: 0;
  font-size: clamp(1.45rem, 2.25vw, 1.85rem);
}
body.home-page .home-modules .home-section-head p {
  max-width: 690px;
  font-weight: 620;
  font-size: 1.08rem;
  line-height: 1.55;
}
body.home-page .module-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
body.home-page .module-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  gap: 12px;
  align-items: start;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--tmm-border);
  border-radius: 17px;
  background: color-mix(in oklab,var(--tmm-surface) 94%,transparent);
  color: var(--tmm-ink);
  box-shadow: 0 7px 22px rgba(15,23,42,.035);
  text-decoration: none;
  transition: transform .17s ease,border-color .17s ease,box-shadow .17s ease,background-color .17s ease;
}
body.home-page .module-card:hover {
  transform: translateY(-2px);
  border-color: var(--tmm-border-strong);
  background: color-mix(in oklab,var(--tmm-surface) 88%,var(--tmm-theme-accent-soft) 12%);
  box-shadow: 0 12px 28px rgba(15,23,42,.065);
  text-decoration: none;
}
body.home-page .module-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tmm-border);
  border-radius: 12px;
  background: var(--tmm-surface-soft);
  font-size: 1.15rem;
  line-height: 1;
}
body.home-page .module-card-copy h3 {
  margin: 1px 0 6px;
  color: var(--tmm-ink);
  font-size: 1rem;
  line-height: 1.25;
}
body.home-page .module-card-copy p {
  margin: 0;
  color: var(--tmm-muted);
  font-size: .87rem;
  line-height: 1.48;
}
body.home-page .module-arrow {
  align-self: center;
  justify-self: end;
  color: var(--tmm-muted);
  font-size: 1.05rem;
  transition: transform .17s ease,color .17s ease;
}
body.home-page .module-card:hover .module-arrow {
  transform: translateX(2px);
  color: var(--tmm-theme-accent-ink);
}
body.home-page .home-release {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 4px;
  padding: 24px 26px;
  border: 1px solid var(--tmm-border);
  border-radius: 19px;
  background: color-mix(in oklab,var(--tmm-surface) 92%,var(--tmm-surface-soft) 8%);
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
body.home-page .home-release .home-section-kicker {
  border-color: color-mix(in oklab,#d88d58 35%,var(--tmm-border));
  background: color-mix(in oklab,var(--tmm-surface) 82%,#f6dfc5 18%);
  color: #7d5736;
  font-weight: 860;
}
body.home-page .home-release h2 {
  font-size: 1.34rem;
}
body.home-page .home-release p {
  max-width: 760px;
  margin: 0;
  color: var(--tmm-muted);
  font-size: .94rem;
  line-height: 1.55;
}
body.home-page .release-button {
  min-width: 154px;
  text-align: center;
  white-space: nowrap;
  color: var(--tmm-ink) !important;
  background: var(--tmm-surface-soft) !important;
}

@media (max-width: 900px) {
  body.home-page .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.home-page .home-release { grid-template-columns: 1fr; gap: 16px; }
  body.home-page .release-button { justify-self: start; }
}
@media (max-width: 620px) {
  body.home-page .module-grid { grid-template-columns: 1fr; }
  body.home-page .home-workflow { display: none; }
  body.home-page .home-modules { padding-top: 14px; }
  body.home-page .home-release { padding: 20px; }
}