/* =========================
   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;
  --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 }

/* 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:grid; gap: var(--tile-gap);
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  margin: 6px 0 28px; 
  align-items: stretch;
}
.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;
}

/* 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);
}

.lang-switcher {
  display: flex;
  gap: 6px;
  align-items: center;
}

.lang-btn {
  background: none;
  border: 1px solid #d8e1f0;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.lang-btn[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand-ink);
}