/* ============================================================
   Borys Finance - main.css
   Frosted Pixel design system (base: frosted-pixel-hero_1.html)
   Author: Kamil Nagorski, ErynVorn Technologies
   ============================================================ */

/* ---------- Self-hosted Montserrat (variable font, weights 100-900) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2-variations');
}

/* ---------- Tokens ---------- */
:root {
  --anthracite-950: #15171a;
  --anthracite-900: #1c1f23;
  --anthracite-800: #262a2f;
  --anthracite-600: #3d434a;
  --ink: #eef2f4;
  --ink-muted: #9aa4ad;
  --cyan-500: #22c7d9;
  --cyan-300: #8be6f0;
  --cyan-900: #0d3a41;
  --orange-500: #ff7a1a;
  --orange-300: #ffa766;
  --on-cyan: #0f1215;
  --glass-fill: rgba(32, 36, 41, 0.52);
  --glass-sheen: rgba(255, 255, 255, 0.07);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --radius-sm: 4px;
  --radius-frame: 7px;
  --radius-lg: 14px;
  --panel-depth: 0 12px 40px rgba(0, 0, 0, 0.35);
  --glow-cyan: 0 0 28px rgba(34, 199, 217, 0.35);
  --glass-blur: 16px;
  --frame-width: 1px;
  --font-sans: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--anthracite-900); -webkit-font-smoothing: antialiased; }

/* ---------- Glass panel: frosted fill, thin orange frame, 7px corners ---------- */
.fp-glass {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--orange-500);
  border-radius: var(--radius-frame);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: inset 0 1px 0 0 var(--glass-sheen), var(--panel-depth);
  color: var(--ink);
}
.fp-glass--bar { padding: 12px var(--space-4); }
.fp-glass--quiet { padding: 20px var(--space-4); box-shadow: inset 0 1px 0 0 var(--glass-sheen); }
.fp-glass--soft { border-color: rgba(255, 122, 26, 0.45); }

/* ---------- Type helpers ---------- */
.fp-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-300); margin: 0 0 var(--space-2); }
.fp-display { font-size: 60px; line-height: 64px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fp-display em { font-style: normal; color: var(--cyan-500); }
.fp-h2 { font-size: 30px; line-height: 38px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.fp-h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.fp-lead { font-size: 18px; line-height: 30px; color: var(--ink-muted); margin: 0; }
.fp-bio { font-size: 15px; line-height: 25px; color: var(--ink-muted); margin: 0; }
.fp-small { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }
.fp-tiny { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }

/* ---------- Links ---------- */
.fp-link { color: var(--orange-500); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255,122,26,.5); }
.fp-link:hover { color: var(--orange-300); text-decoration-color: currentColor; }

/* ---------- Buttons ---------- */
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--radius-frame);
  font: 700 14px/20px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: box-shadow .15s, background-color .15s, color .15s, border-color .15s;
}
.fp-btn--primary { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--on-cyan); }
.fp-btn--primary:hover { background: var(--cyan-300); border-color: var(--cyan-300); box-shadow: var(--glow-cyan); }
.fp-btn--ghost { background: rgba(21,23,26,.35); border-color: var(--orange-500); color: var(--ink); }
.fp-btn--ghost:hover { background: rgba(255,122,26,.12); color: var(--orange-300); }
.fp-btn:focus-visible, .fp-link:focus-visible, .fp-chip:focus-visible, .fp-nav a:focus-visible, .fp-burger:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 3px; }
.fp-btn--block { width: 100%; }

/* ---------- Form ---------- */
.fp-field { display: grid; gap: 6px; }
.fp-field label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.fp-input {
  font: 500 15px/22px var(--font-sans); color: var(--ink);
  padding: 11px 14px; border: 1px solid var(--anthracite-600); border-radius: var(--radius-frame);
  background: rgba(38,42,47,.72); outline: none; transition: border-color .15s;
  min-width: 0; width: 100%;
}
.fp-input::placeholder { color: #7d8790; }
.fp-input:focus { border-color: var(--orange-500); }
select.fp-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
textarea.fp-input { resize: vertical; min-height: 96px; }
.fp-input[type="file"] { padding: 9px 14px; }
.fp-input[type="file"]::file-selector-button { font: 700 12px/18px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--orange-300); background: rgba(21,23,26,.35); border: 1px solid var(--orange-500); border-radius: var(--radius-frame); padding: 7px 12px; margin-right: 12px; cursor: pointer; }

.fp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
.fp-field--full { grid-column: 1 / -1; }
.fp-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px var(--space-3); }
.fp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); cursor: pointer; }
.fp-check input { accent-color: var(--orange-500); width: 16px; height: 16px; flex: none; margin-top: 2px; cursor: pointer; }
.fp-radios { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fp-radio { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); cursor: pointer; }
.fp-radio input { accent-color: var(--orange-500); width: 16px; height: 16px; cursor: pointer; }
.fp-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.fp-consent input { accent-color: var(--orange-500); width: 16px; height: 16px; flex: none; margin-top: 2px; cursor: pointer; }
.fp-req { color: var(--orange-500); }
.fp-form-note { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.fp-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Tag ---------- */
.fp-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(21,23,26,.5); border: 1px solid var(--orange-500); border-radius: var(--radius-frame); }
.fp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--cyan-500); }

/* ---------- Page / background / shell ---------- */
.fp-page { position: relative; min-height: 100vh; background: var(--anthracite-950); animation: fp-in .32s ease; }
body.fp-leaving .fp-page { animation: fp-out .24s ease forwards; }
@keyframes fp-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fp-out { to { opacity: 0; } }

/* ---------- Element reveal (assigned by JS; hidden state exists only with JS) ---------- */
.fp-rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; }
.fp-rv.is-in { opacity: 1; transform: none; will-change: auto; }
.fp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fp-bg canvas { display: block; width: 100%; height: 100%; }
.fp-shell { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-6); }
.fp-shell--wide { padding-bottom: 0; }

/* ---------- Nav (sticky: always on top, identical on every page) ---------- */
.fp-nav { display: flex; align-items: center; gap: var(--space-4); position: sticky; top: 16px; z-index: 60; }
.fp-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.fp-brand small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.fp-mark { width: 34px; height: 34px; flex: none; }
.fp-menu { display: flex; gap: 24px; list-style: none; margin: 0 0 0 auto; padding: 0; align-items: center; }
.fp-menu a, .fp-menu .fp-dd-btn { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.fp-menu a:hover, .fp-menu .fp-dd-btn:hover { color: var(--orange-500); }
.fp-menu > li { position: relative; }
.fp-menu .is-active > a, .fp-menu .is-active > .fp-dd-btn { color: var(--cyan-300); }

.fp-dd-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fp-dd-btn::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-muted); transition: transform .15s; }
.fp-dd-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Dropdown: menu box starts flush at the li bottom (top:100%) so the pointer
   never crosses a gap that would fire mouseleave and close it mid-hover.
   The 10px visual gap is the menu's own padding; the glass panel sits inside. */
.fp-dd-menu { position: absolute; top: 100%; left: -12px; min-width: 240px; padding-top: 10px; z-index: 40; }
/* Dropdown panel: near-solid frosted fill. It sits INSIDE the nav, which itself
   has a backdrop-filter; a nested backdrop-filter cannot sample the page behind
   the nav (backdrop root), so relying on blur here renders as a plain see-through
   wash. The solid glass-family fill keeps the frosted look in every browser. */
.fp-dd-panel {
  padding: 10px;
  display: grid;
  gap: 2px;
  background: rgba(26, 29, 33, 0.97);
  border: 1px solid var(--orange-500);
  border-radius: var(--radius-frame);
  box-shadow: inset 0 1px 0 0 var(--glass-sheen), var(--panel-depth);
}
.fp-dd-panel a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.fp-dd-panel a:hover { background: rgba(255,122,26,.12); color: var(--orange-300); }
.fp-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.fp-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 1px; transition: transform .2s, opacity .2s; }

/* ---------- Hero ---------- */
.fp-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-6); align-items: center; padding-top: 72px; }
.fp-hero-copy { display: grid; gap: var(--space-4); justify-items: start; }
.fp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Photo frames ---------- */
.fp-photo { padding: 10px; }
.fp-photo img { display: block; width: 100%; height: auto; border-radius: 3px; }
.fp-photo--right { max-width: 460px; justify-self: end; width: 100%; }
.fp-duo { position: relative; }
.fp-duo img { transition: opacity .45s ease; }
.fp-duo .fp-duo-color { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; opacity: 0; border-radius: 3px; }
.fp-duo:hover .fp-duo-color, .fp-duo:focus-within .fp-duo-color { opacity: 1; }
.fp-photo-caption { margin-top: 10px; }

/* ---------- Cosmic hero stage (warp starfield behind Ola's cut-out) ---------- */
.fp-cosmic-stage { position: relative; width: 100%; aspect-ratio: 975 / 1300; border-radius: 3px; overflow: hidden; background: #101216; }
.fp-cosmic-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp-cosmic-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; z-index: 1; pointer-events: none; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 24px rgba(34, 199, 217, 0.30)); }
.fp-cosmic .fp-photo-caption { color: var(--ink); }

/* ---------- Sections ---------- */
.fp-main { display: grid; gap: var(--space-5); padding-top: var(--space-6); }
.fp-section { display: grid; gap: var(--space-4); }
.fp-section-head { display: grid; gap: var(--space-2); }
.fp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.fp-cards--3 { grid-template-columns: repeat(3, 1fr); }
.fp-card { display: grid; gap: var(--space-2); align-content: start; }
.fp-card .fp-h3 em { font-style: normal; color: var(--cyan-500); }
.fp-card ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fp-card ul li { position: relative; padding-left: 18px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.fp-card ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 1px; background: var(--orange-500); }

.fp-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

.fp-cta { display: grid; gap: var(--space-3); justify-items: start; }
.fp-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Quote option cards ---------- */
.fp-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.fp-opt { display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.fp-opt:hover { transform: translateY(-3px); }
.fp-opt .fp-h3::after { content: "\2192"; display: block; margin-top: 10px; font-size: 18px; color: var(--orange-500); }
.fp-backlink { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); }
.fp-backlink:hover { color: var(--orange-300); }

/* ---------- Reviews placeholder ---------- */
.fp-review-score { display: flex; align-items: baseline; gap: 10px; }
.fp-review-score b { font-size: 44px; line-height: 44px; font-weight: 800; color: var(--cyan-500); }
.fp-stars { color: var(--orange-500); letter-spacing: 3px; font-size: 16px; }
.fp-placeholder-note { border: 1px dashed var(--anthracite-600); border-radius: var(--radius-frame); padding: var(--space-4); display: grid; gap: 10px; }

/* ---------- Appointment ---------- */
.fp-cal { display: grid; gap: var(--space-3); justify-items: start; }
.fp-cal-visual { display: grid; gap: 4px; width: 100%; }
.fp-cal-visual .row { display: flex; gap: 4px; }
.fp-cal-visual .cell { flex: 1; height: 34px; border-radius: 3px; border: 1px solid var(--anthracite-600); background: rgba(38,42,47,.72); position: relative; }
.fp-cal-visual .cell.on { border-color: var(--cyan-500); background: var(--cyan-900); }
.fp-cal-visual .cell.on::after { content: ""; position: absolute; inset: 12px 8px; border-radius: 2px; background: var(--cyan-500); }

/* ---------- Compliance footer: static, always fully visible, compact type ---------- */
.fp-footer { position: relative; z-index: 1; margin-top: var(--space-6); border-top: 1px solid var(--anthracite-600); padding: 16px var(--space-5) var(--space-4); }
.fp-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 14px; }
.fp-compliance { font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); text-transform: uppercase; display: grid; gap: 8px; }
.fp-compliance p { margin: 0; }
.fp-footlinks { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 12px; }
.fp-footlinks a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
.fp-footlinks a:hover { color: var(--orange-300); }
.fp-copy { font-size: 11px; color: var(--ink-muted); }
.fp-copy a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
.fp-copy a:hover { color: var(--orange-300); }

/* ---------- Thanks / message panels ---------- */
.fp-msg { max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-6) var(--space-4); }
.fp-msg-ico { width: 54px; height: 54px; border-radius: 7px; border: 1px solid var(--orange-500); display: grid; place-items: center; font-size: 26px; color: var(--cyan-500); background: rgba(21,23,26,.5); }

/* ---------- Career hero chips ---------- */
.fp-become { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fp-become .fp-chip-lite { font: 700 12px/18px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-300); background: var(--cyan-900); border: 1px solid var(--cyan-500); border-radius: var(--radius-frame); padding: 8px 12px; }

/* ---------- Page title ---------- */
.fp-page-title { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fp-page-title em { font-style: normal; color: var(--cyan-500); }

/* ---------- Skip link ---------- */
.fp-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cyan-500); color: var(--on-cyan); font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 0 0 var(--radius-frame) 0; text-decoration: none; }
.fp-skip:focus { left: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .fp-opts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fp-nav { gap: var(--space-3); position: sticky; top: 10px; }
  .fp-menu { display: none; }
  .fp-nav .fp-btn { display: none; }
  .fp-burger { display: block; }
  .fp-hero { grid-template-columns: 1fr; gap: var(--space-5); padding-top: 40px; }
  .fp-photo--right { justify-self: center; max-width: 420px; }
  .fp-display { font-size: 38px; line-height: 44px; }
  .fp-h2 { font-size: 24px; line-height: 32px; }
  .fp-lead { font-size: 16px; line-height: 26px; }
  .fp-shell { padding: var(--space-3) var(--space-3) var(--space-5); }
  .fp-cards, .fp-cards--3, .fp-cols { grid-template-columns: 1fr; }
  .fp-opts { grid-template-columns: 1fr; }
  .fp-form-grid { grid-template-columns: 1fr; }
  .fp-checks { grid-template-columns: 1fr; }
  .fp-footer { padding-left: var(--space-3); padding-right: var(--space-3); }
  .fp-main { padding-top: var(--space-5); }

  .fp-nav-open { display: flex !important; flex-direction: column; align-items: stretch; gap: 6px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; padding: 14px; border: 1px solid var(--orange-500); border-radius: var(--radius-frame); background: var(--anthracite-900); box-shadow: var(--panel-depth); }
  .fp-nav-open li { list-style: none; }
  .fp-nav-open a, .fp-nav-open .fp-dd-btn { display: block; padding: 10px 8px; font-size: 15px; }
  .fp-nav-open .fp-dd-menu { display: block; position: static; min-width: 0; padding: 0 0 0 12px; }
  .fp-nav-open .fp-dd-panel { border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; display: grid; gap: 0; }
  .fp-nav-open .fp-btn { display: block !important; margin-top: 8px; text-align: center; }
}
@media (max-width: 420px) {
  .fp-brand small { display: none; }
  .fp-tag { font-size: 10px; letter-spacing: .1em; }
  .fp-hero-actions .fp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-rv { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation: none !important; }
}