/* The site: the floating bar, centred content, glass cards, on pearl and dark blue (Simo,
   04.11.2026). Nothing moves behind the text, and the colour behind the cards is painted and stays still.
   Every colour is a token here, so a colour change happens in this one place. */
:root {
  --gutter: 64px;
  --section: 128px;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --bg: #eceef3; --ink: #0b0d14; --ink-2: rgba(11, 13, 20, 0.74); --ink-3: rgba(11, 13, 20, 0.66); --line: rgba(11, 13, 20, 0.14);
  --accent: #0f2f7a; --accent-text: #0f2f7a; --button: #0f2f7a; --button-on: #fff; --button-hover: #163a9c; --button-glow: rgba(15, 47, 122, 0.32);
  --glass: rgba(255, 255, 255, 0.7); --glass-edge: rgba(255, 255, 255, 0.86); --glass-inset: rgba(255, 255, 255, 0.6); --shadow: rgba(24, 28, 52, 0.09); --shadow-hover: rgba(24, 28, 52, 0.15);
  --bar: rgba(255, 255, 255, 0.58); --bar-edge: rgba(255, 255, 255, 0.8); --bar-shadow: rgba(24, 28, 52, 0.08);
  --pill: rgba(255, 255, 255, 0.78); --tag: rgba(11, 13, 20, 0.05); --field: rgba(255, 255, 255, 0.72); --footer: rgba(255, 255, 255, 0.5);
  --thread: rgba(15, 47, 122, 0.5); --focus: rgba(15, 47, 122, 0.2); --error: #a4161a;
  --glow-top: #fbfbfe; --glow-bottom: #dfe2ec; --tint-a: rgba(190, 208, 240, 0.55); --tint-b: rgba(208, 218, 240, 0.6); --tint-c: rgba(170, 195, 235, 0.4);
}

body { color: var(--ink); font: 400 17px/1.55 var(--font-body); background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; height: 100lvh;
  background:
    radial-gradient(70% 60% at 85% 8%, var(--glow-top) 0%, transparent 70%),
    radial-gradient(60% 50% at 8% 95%, var(--glow-bottom) 0%, transparent 70%);
}

/* The logo. The symbol comes from src/brand/pantiq-symbol.svg through the template. */
.brand { display: inline-flex; align-items: center; gap: 0.36em; line-height: 1; white-space: nowrap; color: var(--ink); }
.brand svg { flex: none; max-width: none; height: 1.5em; width: auto; fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.brand .tail { stroke: var(--accent); }
.brand .word { font: 700 0.86em/1 var(--font-display); letter-spacing: 0.02em; }
.brand .word b { font-weight: 300; margin-left: 0.05em; }

/* Navigation floats as a single glass bar. */
.nav {
  position: fixed; top: 16px; left: 50%; z-index: 20; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  width: min(1160px, calc(100% - 32px)); padding: 8px 8px 8px 24px;
  background: var(--bar); border: 1px solid var(--bar-edge); border-radius: 999px;
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 8px 32px var(--bar-shadow);
}
.logo { font-size: 18px; }
.nav nav { display: flex; gap: 32px; margin: 0 auto 0 16px; }
.nav nav a { font-size: 15px; color: var(--ink-2); transition: color 150ms ease; }
.nav nav a:hover { color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; gap: 2px; font-size: 13px; }
.lang b { color: var(--ink); font-weight: 600; }
.lang b, .lang a { display: inline-block; padding: 6px 4px; }
.lang a { color: var(--ink-3); transition: color 150ms ease; }
.lang a:hover { color: var(--accent-text); }
.nav-cta { padding: 10px 20px; font-size: 15px; font-weight: 500; color: var(--button-on); background: var(--button); border-radius: 999px; transition: background 150ms ease; }
.nav-cta:hover { background: var(--button-hover); }

/* Hero: the logo is the headline, and the sentence under it is the page's h1. */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 104px var(--gutter) 56px; text-align: center;
}
.hero-logo { margin-bottom: 32px; font-size: min(10vw, 18svh, 180px); }

/* The P is written once by one pen stroke, then the tail of the Q, while the word arrives. Then it rests.
   Reduced motion: base.css shortens these to nothing, so the logo simply appears finished. */
@keyframes write { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-logo .pen, .hero-logo .tail { stroke-dasharray: 1 1; }
.hero-logo .pen { animation: write 1200ms cubic-bezier(0.55, 0, 0.25, 1) 200ms both; }
.hero-logo .tail { animation: write 320ms cubic-bezier(0.4, 0, 0.2, 1) 1400ms both; }
.hero-logo .word { animation: arrive 600ms ease-out 900ms both; }

.eyebrow, .label { margin-bottom: 24px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--accent-text); }
.eyebrow { margin-bottom: 16px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 3.5vw, 3.75rem); line-height: 1.12; font-weight: 300; letter-spacing: -0.04em; }
h1 span { display: block; }
.lead { max-width: 640px; margin-top: 24px; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.45; color: var(--ink-2); }
.hero .btn { margin-top: 32px; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 0 32px;
  font: 500 17px/1 var(--font-body); color: var(--button-on); background: var(--button); border: 0; border-radius: 999px; cursor: pointer;
  transition: transform 150ms ease, box-shadow 200ms ease, background 150ms ease;
}
.btn:hover { background: var(--button-hover); box-shadow: 0 12px 40px var(--button-glow); transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

/* Sections. A few large still pools of colour behind the cards, so the glass keeps something to catch. */
.block { position: relative; padding: var(--section) var(--gutter); }
.block::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tint-1::before {
  background:
    radial-gradient(38% 42% at 24% 60%, var(--tint-a) 0%, transparent 100%),
    radial-gradient(34% 40% at 78% 42%, var(--tint-b) 0%, transparent 100%);
}
.tint-2::before {
  background:
    radial-gradient(40% 34% at 72% 34%, var(--tint-b) 0%, transparent 100%),
    radial-gradient(40% 34% at 26% 58%, var(--tint-a) 0%, transparent 100%);
}
.tint-3::before {
  background:
    radial-gradient(40% 44% at 50% 62%, var(--tint-c) 0%, transparent 100%),
    radial-gradient(26% 34% at 88% 30%, var(--tint-a) 0%, transparent 100%);
}

/* A thin thread down the centre of the page, joining each section to the next. Drawn once. */
.thread {
  position: absolute; top: 0; left: 50%; width: 1px; height: calc(var(--section) - 28px);
  background: linear-gradient(to bottom, transparent, var(--thread));
}
.thread::after { content: ''; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.center { width: fit-content; max-width: min(1000px, 100%); margin: 0 auto 40px; padding: 32px 48px; text-align: center; }
.center, .glass {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--glass-inset), 0 20px 56px var(--shadow);
}
.center .label { margin-bottom: 12px; font-size: clamp(1rem, 1.3vw, 1.125rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 3.25rem); line-height: 1.12; font-weight: 300; letter-spacing: -0.04em; }
h3 { font-size: 20px; line-height: 1.25; font-weight: 400; letter-spacing: -0.025em; }

.num { display: block; font: 300 13px/1 var(--font-display); color: var(--ink-3); margin-bottom: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1280px; margin: 0 auto; }


.group { max-width: 1280px; margin: 40px auto 0; }
.group-name { display: inline-block; margin-bottom: 12px; padding: 4px 12px; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--pill); border-radius: 999px; }
.card { display: flex; flex-direction: column; padding: 24px; min-height: 340px; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms ease, opacity 450ms cubic-bezier(0, 0, 0.2, 1); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; }
.card-top .num { margin: 0; }
.icon { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.icon .a { stroke: var(--accent); }
.icon > * { stroke-dasharray: 1 1; }
.card h3 { font-size: clamp(1.1rem, 1.5vw, 1.45rem); margin-bottom: 12px; }
.card p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
@media (hover: hover) { .js .card.in:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--glass-inset), 0 28px 64px var(--shadow-hover); } }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.tags li { padding: 4px 12px; font-size: 13px; color: var(--ink-2); background: var(--tag); border-radius: 999px; }

.text-link { color: var(--ink); border-bottom: 1px solid var(--ink-3); transition: border-color 150ms ease, color 150ms ease; }
.text-link:hover { color: var(--accent-text); border-color: var(--accent-text); }

.steps li { padding: 24px; min-height: 212px; }
.steps .num { font-size: 13px; margin-bottom: 32px; }
.plain > * { padding: 24px; }
.steps h3, .plain h3 { margin-bottom: 8px; }
.steps p, .plain p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.plain dt { font: 400 16px/1.3 var(--font-display); letter-spacing: -0.025em; margin-bottom: 8px; }
.plain dd { color: var(--ink-2); line-height: 1.5; }

.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; }
.person-photo { margin-top: 24px; }
.portrait { display: block; width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 32px var(--shadow-hover); }
.portrait-empty { display: flex; align-items: center; justify-content: center; font-size: 56px; background: var(--pill); }
.person-name { margin-top: 16px; font: 400 clamp(1.1rem, 1.6vw, 1.5rem)/1.25 var(--font-display); letter-spacing: -0.025em; }
.person-role { margin-top: 4px; color: var(--ink-2); }

.contact { padding-bottom: 96px; }
.contact-lead { margin-top: 16px; font-size: 19px; line-height: 1.4; }
.small-print { margin-top: 24px; text-align: center; color: var(--ink-2); }
.form { display: grid; gap: 16px; max-width: 640px; margin: 0 auto; padding: 32px; }
.form label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.form input, .form textarea {
  width: 100%; padding: 12px 16px; font-size: 16px; line-height: 1.4; resize: vertical;
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--focus); }
.form .btn { justify-self: start; margin-top: 8px; }
html:not(.js) .form { display: none; }
.form .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.form-note { font-size: 15px; font-weight: 500; color: var(--accent-text); }
.form-note.is-error { color: var(--error); }
.form-privacy { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.footer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px var(--gutter); font-size: 14px; line-height: 1.5; text-align: center; color: var(--ink-2); border-top: 1px solid var(--line); background: var(--footer); }
.footer-logo { margin-bottom: 8px; font-size: 18px; }
.footer p a { border-bottom: 1px solid transparent; transition: color 150ms ease, border-color 150ms ease; }
.footer p a:hover { color: var(--accent-text); border-color: var(--accent-text); }

.doc { padding: 120px var(--gutter) 80px; }
.doc-short { min-height: 70svh; }
.doc-body { max-width: 760px; margin: 0 auto; padding: 40px; }
.doc-body h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.doc-body h2 { margin-top: 32px; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -0.025em; }
.doc-body p { margin-top: 12px; color: var(--ink-2); }
.doc-updated { font-size: 14px; }
.doc-back { margin-top: 32px !important; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Arrivals are short and small: long or large ones would pull the eye off the text. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 450ms cubic-bezier(0, 0, 0.2, 1), transform 450ms cubic-bezier(0, 0, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .thread.reveal { transform: none; clip-path: inset(0 -4px 100% -4px); transition: opacity 200ms linear, clip-path 800ms cubic-bezier(0.4, 0, 0.2, 1); }
.js .thread.reveal.in { clip-path: inset(0 -4px -4px -4px); }
.js .icon > * { stroke-dashoffset: 1; transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; }
.js .in .icon > * { stroke-dashoffset: 0; }

/* A 1080p laptop at 150% leaves a window about 600 px tall. */
@media (max-height: 700px) and (min-width: 861px) {
  .hero { padding-top: 84px; padding-bottom: 16px; }
  .hero-logo { margin-bottom: 16px; }
  h1 { font-size: 2.2rem; }
  .eyebrow { margin-bottom: 8px; }
  .lead { margin-top: 12px; }
  .hero .btn { margin-top: 16px; }
}
@media (max-width: 1100px) {
  .cards, .steps, .plain.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { min-height: 300px; }
}
@media (max-width: 860px), (max-aspect-ratio: 11/10) {
  :root { --gutter: 24px; --section: 72px; }
  .nav { padding: 6px 6px 6px 16px; gap: 12px; top: 8px; width: calc(100% - 16px); }
  .nav nav { display: none; }
  .hero { padding: 80px var(--gutter) 32px; }
  .hero-logo { font-size: min(13vw, 18svh); }
  h1 { font-size: clamp(1.9rem, 5.6vw, 3rem); }
}
@media (max-width: 640px) {
  .hero-logo { font-size: min(15vw, 18svh); margin-bottom: 24px; }
  h1 { font-size: clamp(1.5rem, 6.6vw, 2.2rem); }
  h2 { font-size: clamp(1.45rem, 6.2vw, 2.6rem); letter-spacing: -0.045em; }
  .lead { margin-top: 16px; }
  .hero .btn { margin-top: 24px; }
  .cards, .steps, .quad, .plain.grid-3 { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .card-top { margin-bottom: 16px; }
  .num { margin-bottom: 16px; }
  .steps li { min-height: 0; }
  .steps .num { margin-bottom: 16px; }
  .center { width: 100%; margin-bottom: 24px; padding: 24px; }
  .btn { width: 100%; }
  .hero > .reveal:last-child { width: 100%; }
  .form { padding: 20px; }
  .doc { padding: 88px var(--gutter) 48px; }
  .doc-body { padding: 24px; }
}

/* lang="bg" turns on Bulgarian letter forms (т as m, в as ß), which read as handwriting on this page.
   !important because every `font:` shorthand silently resets font-feature-settings. */
*, *::before, *::after { font-feature-settings: "locl" 0 !important; }