/* ------------------- GLOBAL + VARS ------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --bg: #050508;
  --grid: rgba(255,255,255,0.04);
  --text: #f3f4f6;
  --muted: rgba(243,244,246,0.78);
  --accent: #7c3aed;
  --accent-2: #a78bfa;
  --primaryPurpleA: #8b5cf6;
  --primaryPurpleB: #7c3aed;
  --ring: #93c5fd;
  --radius: 14px;
  --shadow: 0 10px 40px rgba(0,0,0,0.45);
  --shellBorder: rgba(255,255,255,0.08);
  --shellBg: rgba(17,17,20,0.72);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-smooth: cubic-bezier(.2,.8,.2,1);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ------------------- TŁO ------------------- */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(124,58,237,0.08), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 35% 65%, rgba(0,0,0,0.55)),
    repeating-linear-gradient(to right, transparent 0 78px, var(--grid) 78px 79px),
    repeating-linear-gradient(to bottom, transparent 0 78px, var(--grid) 78px 79px);
  mask-image: radial-gradient(80% 80% at 50% 40%, black 30%, transparent 100%);
  animation: gridDrift 12s linear infinite;
}
@keyframes gridDrift { to { background-position: 0 0,0 0,30px 0,0 30px; } }

.blob { position: fixed; filter: blur(50px); opacity: .5; z-index: 0; }
.blob-a{width:640px;height:640px;left:-120px;top:-120px;background:radial-gradient(closest-side,rgba(124,58,237,.7),transparent);}
.blob-b{width:520px;height:520px;right:-140px;top:22%;background:radial-gradient(closest-side,rgba(167,139,250,.55),transparent);}
.blob-c{width:460px;height:460px;left:18%;bottom:-160px;background:radial-gradient(closest-side,rgba(99,102,241,.5),transparent);}

/* ------------------- NAWIGACJA ------------------- */
.nav {
  position: fixed;
  top: 18px; left: 0; right: 0;
  z-index: 10;
  display: grid; place-items: center;
  padding: 0 16px;
}
.nav-shell {
  width: min(1180px, 100%);
  height: 100px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 12px; padding: 10px 14px;
  border-radius: 2000px;
  background: var(--shellBg);
  border: 1px solid var(--shellBorder);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
}
.nav-shell::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(167,139,250,.18) 0%, rgba(124,58,237,.25) 50%, rgba(167,139,250,.18) 100%);
  opacity: 0; transform: translateX(-100%);
}
.nav-shell:hover::after{ animation: glowSweep 1.2s cubic-bezier(.4,0,.2,1); }
@keyframes glowSweep {
  0%{opacity:0;transform:translateX(-100%)}
  25%{opacity:.35}
  50%{opacity:.5}
  100%{opacity:0;transform:translateX(100%)}
}
.nav-brand img { width: 78px; height: 78px; border-radius: 6px; display:block; }
.nav-center { display: flex; justify-content: center; gap: 28px; }
.nav-link {
  position: relative; font-size: 15px; font-weight: 500;
  color: rgba(243,244,246,0.8); text-decoration: none;
  padding: 10px 4px;
  background: linear-gradient(90deg, rgba(167,139,250,0.9), rgba(124,58,237,0.9));
  background-size: 0% 2px; background-repeat:no-repeat;
  background-position: 0 calc(100% - 8px);
  transition: color .15s ease, background-size .25s ease;
}
.nav-link:hover { color:#fff; background-size:100% 2px; }
.nav-link.is-active { color:#fff; font-weight:600; background-size:100% 2px; }
.nav-right { display:flex; align-items:center; gap:10px; }
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);color:#e5e7eb;font-weight:600;font-size:14px;line-height:1;text-decoration:none;box-shadow:0 8px 28px rgba(0,0,0,.25);transition:.18s;}
.chip:hover{transform:translateY(-2px) scale(1.02);background:rgba(255,255,255,.09);}
.chip-round{width:38px;height:38px;justify-content:center;}
.chip-round img{width:22px;height:22px;border-radius:999px;}
.chip-pill{background:#2f3137;border-color:rgba(255,255,255,.1);}
.chip-icon{width:18px;height:18px;fill:#cbd5e1;}

/* ------------------- HERO ------------------- */
.hero { position:relative;z-index:1;min-height:44svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.25rem 1rem;gap:.6rem; }
.brand { margin:0;font-weight:900;font-size:clamp(2.4rem,7vw,4.6rem); }
.brand .brand-word{ background:linear-gradient(180deg,#fff,#e9e9ff 48%,#dcd7ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{margin:0;font-weight:600;font-size:clamp(1rem,.9rem + .6vw,1.15rem);color:var(--muted)}

/* ------------------- KONWERTER ------------------- */
.tool{position:relative;z-index:1;padding:1.2rem 16px 2rem}
.tool-shell{width:min(980px,100%);margin:0 auto;padding:1.25rem;background:var(--shellBg);border:1px solid var(--shellBorder);border-radius:calc(var(--radius) + 8px);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.tool-title{margin:.25rem 0 1rem;font-size:1.05rem;font-weight:800;text-transform:uppercase;color:#fff}
.convert-row{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}
.input{width:100%;padding:1rem;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-size:1rem;outline:none;transition:.2s}
.input::placeholder{color:rgba(243,244,246,.5)}
.input:focus{border-color:rgba(167,139,250,.45);box-shadow:0 0 0 6px rgba(167,139,250,.08);background:rgba(255,255,255,.07)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.2rem;border-radius:999px;font-weight:800;border:1px solid rgba(167,139,250,.35);background:linear-gradient(180deg,var(--primaryPurpleA),var(--primaryPurpleB));color:#fff;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn-icon{width:20px;height:20px}

/* ------------------- RESULT ------------------- */
.result{position:relative;z-index:1;padding:.5rem 16px 3rem}
.result-inner{width:min(980px,100%);margin:0 auto;display:grid;gap:.9rem}
.card{border-radius:var(--radius);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.card-title{margin:0;font-size:1.05rem;font-weight:800}
.badge{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;border:1px solid rgba(167,139,250,.45);background:rgba(124,58,237,.15);font-weight:700;font-size:.85rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:14px 16px}
.agent{border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);padding:.75rem;display:flex;flex-direction:column;gap:.35rem}
.agent-top{display:flex;align-items:center;justify-content:space-between}
.agent-name{font-weight:800}
.agent-link{font-family:ui-monospace,monospace;font-size:.92rem;color:#cfcfff;word-break:break-all;text-decoration:none}
.agent-link:hover{text-decoration:underline}
.copy{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);cursor:pointer}
.copy:hover{background:rgba(255,255,255,.08);border-color:rgba(167,139,250,.45)}
.copy svg{width:18px;height:18px;stroke:#e6e6ff;stroke-width:1.6;fill:none}

/* ------------------- ANIMACJE ------------------- */
[data-reveal]{opacity:0;transform:translateY(8px) scale(.98);transition:opacity .55s var(--ease-smooth),transform .55s var(--ease-smooth);transition-delay:var(--delay,0s)}
[data-reveal].is-visible{opacity:1;transform:none}

/* --- Oryginalny link: rząd z pastylką i kopiowaniem --- */
.link-row{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.25rem; border-radius:12px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
}
.link-icon{
  width:20px; height:20px; flex:0 0 auto;
}
.link-icon path{
  fill:none; stroke:#cfd0ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.mono-pill{
  flex:1 1 auto; min-width:200px; max-width:100%;
  display:inline-block; padding:.6rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:#e6e6ff; word-break:break-all;
}
.mono-pill:hover{ background:rgba(255,255,255,.06); text-decoration:none; }

.copy--pill{
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  display:grid; place-items:center; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.copy--pill:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); border-color:rgba(167,139,250,.45); }
.copy--pill svg{ width:18px; height:18px; }
.copy--pill svg path{ fill:none; stroke:#e6e6ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* (reszta stylów konwertera/siatki/agentów jak wcześniej) */

/* --- NAV shrink & compact (1:1 jak na stronie głównej) --- */
.nav.is-shrink .nav-center,
.nav--compact .nav-center {
  transform: translateY(-2px);
  transition: transform .25s var(--ease-smooth);
}
.nav.is-shrink .nav-shell {
  height: 64px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.36);
  transition: height .26s var(--ease-smooth),
              padding .26s var(--ease-smooth),
              box-shadow .26s var(--ease-smooth);
}
.nav .nav-shell {
  transition: height .26s var(--ease-smooth),
              padding .26s var(--ease-smooth),
              box-shadow .26s var(--ease-smooth);
}
.nav.is-shrink .nav-brand img {
  width: 56px;
  height: 56px;
  transition: width .26s var(--ease-smooth),
              height .26s var(--ease-smooth);
}
.nav .nav-brand img {
  transition: width .26s var(--ease-smooth),
              height .26s var(--ease-smooth);
}
.nav.is-shrink .nav-link {
  font-size: 14px;
}
.nav.is-shrink .chip {
  transform: translateY(0);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.nav--compact .nav-shell {
  height: 64px;
  padding: 6px 12px;
}
.nav--compact .nav-brand img {
  width: 48px;
  height: 48px;
  filter: brightness(1.1);
}
.nav--compact .nav-center {
  transform: translateY(-2px) scale(.98);
}

/* Mini przycisk Track */
.btn-small {
  padding: 0.75rem;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  justify-content: center;
}
.btn-small .btn-icon {
  width: 18px;
  height: 18px;
}