/* konopsiakk.online, shared styles.
   Based on the konopsiakk portfolio look (Space Grotesk, glass pill navbar, colour blobs),
   upgraded with a "liquid glass" layer: translucent panels with a specular sheen,
   a bright rim of light and a soft inner glow. Each page can override the palette tokens. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #eeebe3;
  --text: #0a0a0a;
  --muted: #6f6c66;
  --accent: #e2231a;
  --accent-2: #7c3aed;
  --accent-ink: #fff;
  --blob-1: rgba(226,35,26,.55);
  --blob-2: rgba(124,58,237,.5);
  --blob-3: rgba(201,162,39,.45);
  --blob-4: rgba(14,165,210,.42);
  --blob-5: rgba(16,185,129,.32);
  --blob-opacity: .6;

  /* liquid glass */
  --glass-tint: rgba(255,255,255,.42);
  --glass-tint-2: rgba(255,255,255,.18);
  --glass-rim: rgba(255,255,255,.85);
  --glass-rim-2: rgba(255,255,255,.15);
  --glass-edge: rgba(10,10,10,.07);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.08);
  --glass-blur: blur(26px) saturate(185%);
  --sheen: rgba(255,255,255,.55);
  --chip: rgba(255,255,255,.55);
  --logo: #0a0a0a;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0f0e0c;
  --text: #f5f4f0;
  --muted: #8d8a84;
  --accent: #ff5c45;
  --accent-2: #a78bfa;
  --blob-opacity: .95;
  --glass-tint: rgba(255,255,255,.075);
  --glass-tint-2: rgba(255,255,255,.02);
  --glass-rim: rgba(255,255,255,.28);
  --glass-rim-2: rgba(255,255,255,.04);
  --glass-edge: rgba(255,255,255,.08);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.35);
  --sheen: rgba(255,255,255,.12);
  --chip: rgba(255,255,255,.08);
  --logo: #f5f4f0;
  color-scheme: dark;
}

html { scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: color .3s ease;
}
body::before {
  content: '';
  position: fixed; inset: -15%;
  background:
    radial-gradient(circle at 14% 18%, var(--blob-1), transparent 40%),
    radial-gradient(circle at 86% 14%, var(--blob-2), transparent 44%),
    radial-gradient(circle at 50% 92%, var(--blob-3), transparent 44%),
    radial-gradient(circle at 88% 80%, var(--blob-4), transparent 42%),
    radial-gradient(circle at 8% 74%, var(--blob-5), transparent 42%);
  filter: blur(100px) saturate(190%);
  opacity: var(--blob-opacity);
  z-index: -1; pointer-events: none;
}
body::after { /* faint grid, like the portfolio */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--glass-edge) 1px, transparent 1px), linear-gradient(90deg, var(--glass-edge) 1px, transparent 1px);
  background-size: 80px 80px; opacity: .5;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- liquid glass ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--glass-tint), var(--glass-tint-2));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),          /* top rim of light */
    inset 0 -1px 0 var(--glass-rim-2),       /* bottom inner edge */
    inset 0 0 24px rgba(255,255,255,.04),    /* soft inner glow */
    var(--glass-shadow);
}
.glass::before { /* curved specular sheen across the top-left */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 70% at 10% -10%, var(--sheen), transparent 55%);
}
.glass::after { /* light catching the rim: brighter at the corners */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim), transparent 30%, transparent 70%, var(--glass-rim-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- logos (white SVGs recoloured with a mask, so they work in light and dark) ---------- */
.logo-mark, .logo-word {
  display: inline-block; background: var(--logo);
  -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain;
}
.logo-mark { --src: url('brand/konopsiakk-mark.svg'); width: 22px; aspect-ratio: 94 / 133; }
.logo-word { --src: url('brand/konopsiakk-wordmark.svg'); height: 26px; aspect-ratio: 2000 / 455; }

/* ---------- navbar ---------- */
.navbar {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 30px;
  padding: 8px 8px 8px 22px; border-radius: 999px; max-width: calc(100% - 24px);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand .logo-word { height: 22px; }
.nav-brand .logo-mark { display: none; }
.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link {
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: .55rem 1rem; border-radius: 999px; transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--chip); }
.nav-link.active { color: var(--text); background: var(--chip); box-shadow: inset 0 1px 0 var(--glass-rim); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--chip);
  display: grid; place-items: center; cursor: pointer; color: var(--text); font-size: 16px;
  box-shadow: inset 0 1px 0 var(--glass-rim); transition: transform .2s;
}
.icon-btn:hover { transform: scale(1.06); }

/* ---------- layout ---------- */
.page { padding: 104px 16px 40px; }
.panel { max-width: 1000px; margin: 0 auto 24px; border-radius: 28px; padding: 72px 56px; }
.label { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.title { font-weight: 700; font-size: clamp(36px, 6vw, 56px); letter-spacing: -1.5px; line-height: 1; }
.title em { font-style: italic; color: var(--accent); }
.sub { color: var(--muted); font-size: 15.5px; line-height: 1.65; max-width: 520px; }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }
.head { margin-bottom: 44px; }

.hero { text-align: center; padding: 100px 48px; }
.hero h1 { line-height: .9; margin-bottom: 20px; }
.hero h1 span { display: block; font-size: clamp(56px, 10vw, 120px); letter-spacing: -3px; font-weight: 700; }
.hero h1 .i { font-style: italic; font-weight: 600; color: var(--accent); }
.hero h1 .c { color: var(--accent-2); font-weight: 600; }
.hero .sub { margin: 0 auto 40px; }

.btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 999px;
  font: 600 12.5px 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--text); border: 1px solid var(--text); background: transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn .arr { font-size: 17px; transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.solid:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.glassy { border-color: var(--glass-edge); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-rim);
}
.chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform .3s ease; }
a.card:hover { transform: translateY(-4px); }
.card h3 { font-size: 20px; letter-spacing: -.3px; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* contact */
.contact-row { display: flex; gap: 14px; max-width: 640px; margin: 0 auto; }
.contact-card { flex: 1; border-radius: 18px; padding: 22px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 0; text-align: left; font: inherit; color: inherit; }
.contact-card .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.contact-card .v { font-size: 16.5px; font-weight: 700; }
.contact-card .h { font-size: 11.5px; color: var(--muted); }

/* footer */
footer.foot {
  max-width: 1000px; margin: 0 auto 28px; padding: 18px 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.foot-left { display: flex; align-items: center; gap: 12px; }
.foot p { font-size: 12px; color: var(--muted); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 20px); opacity: 0; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; z-index: 300; transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* cookie card (same idea as the portfolio) */
.cookie-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.cookie-overlay.visible { opacity: 1; pointer-events: auto; }
.cookie-card { max-width: 400px; border-radius: 26px; padding: 34px 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--bg); }
.cookie-card .logo-mark { width: 34px; }
.cookie-card h4 { font-size: 23px; letter-spacing: -.3px; }
.cookie-card h4 em { color: var(--accent); font-style: normal; }
.cookie-card p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.link-btn { background: none; border: 0; color: var(--muted); font: 500 12px 'Space Grotesk', sans-serif; cursor: pointer; }
.link-btn:hover { color: var(--text); }

/* ---------- mobile: compact top bar + floating liquid-glass tab bar ---------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .navbar { top: 12px; gap: 12px; padding: 6px 6px 6px 16px; width: calc(100% - 24px); justify-content: space-between; }
  .nav-links { display: none; }
  .nav-brand .logo-word { height: 18px; }
  .page { padding: 84px 12px 120px; }
  .panel { padding: 52px 22px; border-radius: 24px; margin-bottom: 14px; }
  .hero { padding: 64px 22px; }
  .hero h1 span { letter-spacing: -2px; }
  .btns { flex-direction: column; }
  .btns .btn { width: 100%; max-width: 300px; justify-content: center; }
  .contact-row { flex-direction: column; }
  footer.foot { flex-direction: column; border-radius: 24px; text-align: center; margin: 0 12px 110px; }
  .foot-left { flex-direction: column; }
  .tabbar {
    display: flex; position: fixed; z-index: 120; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%); width: calc(100% - 28px); max-width: 420px; padding: 6px; border-radius: 999px;
    justify-content: space-around;
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 999px;
    text-decoration: none; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    transition: background .2s, color .2s;
  }
  .tab svg { width: 21px; height: 21px; }
  .tab.active { color: var(--accent); background: var(--chip); box-shadow: inset 0 1px 0 var(--glass-rim); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }