/* ═══════════════════════════════════════════
   COMPONENTS — Nav, Buttons, Preloader, Cursor
   ═══════════════════════════════════════════ */

/* ─── Preloader ─── */
.preloader{
  position:fixed;inset:0;z-index:10001;
  background:var(--c-bg);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease-out),visibility .8s var(--ease-out);
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:24px;min-width:260px}
.pre-mark{
  width:56px;height:56px;color:var(--c-gold);
  border:1px solid var(--c-line-2);border-radius:14px;
  display:grid;place-items:center;
}
.pre-mark svg{width:26px;height:26px}
.pre-name{
  font-family:var(--f-display);font-size:2rem;font-weight:900;color:#fff;
  letter-spacing:.05em;
}
.pre-bar{
  width:100%;height:1px;background:var(--c-line);
  position:relative;overflow:hidden;
}
.pre-bar span{
  position:absolute;inset-inline-start:0;top:0;height:100%;width:0%;
  background:var(--c-gold);transition:width .3s var(--ease-out);
}
.pre-count{
  font-family:var(--f-body);font-size:11px;letter-spacing:.3em;
  color:var(--c-muted);
}

/* ─── NAVBAR ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;transition:all var(--d-base) var(--ease-out);
}
.nav::before{
  content:'';position:absolute;inset:0;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--c-line);
  opacity:0;transition:opacity var(--d-base) var(--ease-out);
  pointer-events:none;
}
.nav.is-scrolled{padding:14px 0}
.nav.is-scrolled::before{opacity:1}

.nav__inner{
  max-width:var(--container);margin:0 auto;
  padding:0 var(--sp-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  position:relative;z-index:1;
}

.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display)}
.brand__mark{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--c-line-2);border-radius:10px;
  color:var(--c-gold);background:rgba(200,155,92,.05);
  transition:all var(--d-base) var(--ease-out);
}
.brand__mark svg{width:18px;height:18px}
.brand:hover .brand__mark{background:var(--c-gold);color:var(--c-bg);border-color:var(--c-gold)}
.brand__text{
  font-size:20px;font-weight:900;color:#fff;letter-spacing:.02em;
  display:flex;align-items:baseline;gap:6px;
}
.brand__text em{
  font-style:normal;font-size:11px;font-weight:400;color:var(--c-muted);
  letter-spacing:.24em;text-transform:uppercase;
}

.nav__links{display:flex;gap:6px;margin-inline-start:auto}
.nav__links a{
  padding:8px 16px;font-size:14px;color:var(--c-text-2);
  position:relative;transition:color var(--d-fast) var(--ease-out);
  font-weight:400;border-radius:100px;
}
.nav__links a::before{
  content:'';position:absolute;inset:0;border-radius:100px;
  background:rgba(255,255,255,.04);
  transform:scale(.85);opacity:0;
  transition:all var(--d-fast) var(--ease-out);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::before{transform:scale(1);opacity:1}

.nav__side{display:flex;align-items:center;gap:14px}
.nav__phone{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--c-text-2);font-weight:400;
  padding:8px 14px;border-radius:100px;transition:color var(--d-fast) var(--ease-out);
}
.nav__phone svg{width:14px;height:14px;color:var(--c-gold)}
.nav__phone:hover{color:#fff}

.nav__progress{
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:transparent;
}
.nav__progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--c-gold-3),var(--c-gold),var(--c-gold-2));
  transition:width .15s linear;
}

.burger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:2}
.burger span{
  width:24px;height:1.5px;background:#fff;
  transition:transform var(--d-base) var(--ease-out);
}
.burger.is-active span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.is-active span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;border-radius:100px;
  font-size:14px;font-weight:500;letter-spacing:.02em;
  position:relative;overflow:hidden;
  transition:all var(--d-base) var(--ease-out);
  white-space:nowrap;
  will-change:transform;
}
.btn svg{width:15px;height:15px;transition:transform var(--d-base) var(--ease-out)}
.btn:hover svg{transform:translate(-3px,-3px)}
.btn--sm{padding:11px 20px;font-size:13px}
.btn--lg{padding:20px 38px;font-size:15px}

.btn--gold{
  background:var(--c-gold);color:var(--c-bg);font-weight:600;
  box-shadow:0 10px 34px -10px var(--c-gold-glow), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn--gold::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--ease-out);
}
.btn--gold:hover{background:var(--c-gold-2);box-shadow:0 18px 46px -12px var(--c-gold-glow)}
.btn--gold:hover::before{transform:translateX(120%)}

.btn--ghost{
  border:1px solid var(--c-line-2);color:var(--c-text);
  background:rgba(255,255,255,.02);backdrop-filter:blur(10px);
}
.btn--ghost:hover{
  border-color:var(--c-gold);color:var(--c-gold);
  background:rgba(200,155,92,.06);
}

/* ─── Section heading row ─── */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
}