/* ========== BratisJob • Global (mobile-first) ========== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Palette & motion */
:root{
  --bg-0:#081423;
  --ink:#eaf3ff;
  --ink-d:#b8c7e3;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.05);
  --p-1:#62b2ff;
  --p-2:#7dd3ff;
  --p-3:#94e0ff;
  --radius:18px;
  --t-fast:.18s cubic-bezier(.2,.7,.2,1);
  --t-med:.35s cubic-bezier(.2,.7,.2,1);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*,
*::before,
*::after{box-sizing:border-box}
html,body{height:100%}
body.bj-body{
  margin:0;
  background:
    radial-gradient(1000px 360px at 14% -8%, rgba(61,138,224,.28), transparent 60%),
    radial-gradient(900px 320px at 90% -12%, rgba(78,198,255,.22), transparent 55%),
    var(--bg-0);
  color:var(--ink);
  font:400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
}

/* A11y */
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);height:1px!important;width:1px!important;overflow:hidden}
.bj-skip{position:absolute;left:12px;top:-40px;z-index:1000;background:#0b1526;color:#fff;padding:10px 14px;border-radius:10px;transition:transform var(--t-fast)}
.bj-skip:focus{top:12px;outline:2px solid var(--p-2)}

/* Layout */
.bj-wrap{width:min(1100px,92vw);margin-inline:auto}
.bj-main{padding-top:74px}
img{display:block;width:100%;height:auto;max-width:350px;border-radius:14px}

/* Header */
.bj-header{
  position:fixed;inset:0 0 auto 0;height:64px;z-index:500;
  background:linear-gradient(180deg, rgba(9,17,31,.78), rgba(9,17,31,.54));
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-med), background var(--t-med);
}
.bj-header[data-elev="1"]{box-shadow:var(--shadow);background:rgba(9,17,31,.86)}
.bj-header .bj-wrap{height:100%;display:flex;align-items:center;gap:12px}

.bj-logo{
  color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.4px;
  padding:8px 10px; border-radius:12px;
}
.bj-logo span{color:var(--p-2)}

/* Stripes underline */
.bj-stripes{position:absolute;inset:auto 0 0 0;height:2px;background:
  repeating-linear-gradient(90deg, rgba(98,178,255,.0), rgba(98,178,255,.65) 20%, rgba(98,178,255,.0) 40%)}
  
/* Nav */
.bj-burger{
  margin-left:auto;display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--glass);cursor:pointer;position:relative;
}
.bj-burger-bar{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);transition:transform var(--t-med), top var(--t-med), opacity var(--t-med)}
.bj-burger-bar:nth-child(1){top:12px}
.bj-burger-bar:nth-child(2){top:20px}
.bj-burger-bar:nth-child(3){top:28px}
.bj-burger[aria-expanded="true"] .bj-burger-bar:nth-child(1){top:20px;transform:rotate(45deg)}
.bj-burger[aria-expanded="true"] .bj-burger-bar:nth-child(2){opacity:0}
.bj-burger[aria-expanded="true"] .bj-burger-bar:nth-child(3){top:20px;transform:rotate(-45deg)}

.bj-nav{
  position:absolute;inset:64px 0 auto 0;display:none;background:rgba(8,16,30,.96);
  border-bottom:1px solid var(--line);
}
.bj-nav.is-open{display:block}
.bj-menu{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:6px}
.bj-link{
  display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--ink);border:1px solid transparent;
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.bj-link:hover{transform:translateY(-2px);background:rgba(255,255,255,.05);border-color:var(--line)}
.bj-link.is-active{border-color:rgba(125,211,255,.45);box-shadow:inset 0 0 0 1px rgba(125,211,255,.25)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;text-decoration:none;font-weight:700;
  border:1px solid var(--line);transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast)
}
.btn.primary{background:linear-gradient(180deg,#2a6ecb,#1e4f96);border-color:rgba(125,211,255,.35)}
.btn.primary:hover{transform:translateY(-2px);background:linear-gradient(180deg,#337ce2,#255ba9)}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}

/* Footer */
.bj-footer{border-top:1px solid var(--line);margin-top:60px}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0}
.brandline{margin:0;color:var(--ink-d)}
.bj-footmenu{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.bj-footmenu a{color:var(--ink-d);text-decoration:none;padding:6px 10px;border-radius:10px}
.bj-footmenu a:hover{color:var(--ink);background:var(--glass)}

/* Reveal baseline */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Body lock when menu open (без дёрганий) */
.no-scroll{overflow:hidden;touch-action:none}

/* ====== Breakpoints (progressive enhancement) ====== */
@media (min-width: 860px){
  .bj-burger{display:none}
  .bj-nav{position:static;display:block;background:transparent;border:0}
  .bj-menu{flex-direction:row;gap:10px;padding:0}
}
@media (min-width: 1040px){
  .bj-main{padding-top:78px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}
.bj-footmenu { list-style:none; display:flex; gap:12px; margin:0; padding:0; flex-wrap:wrap; }
@media (max-width:560px){
  .footer-grid { flex-direction:column; align-items:flex-start; gap:10px; }
}