/* =========================================================
   UKZ Accountants — shared stylesheet
   Design tokens + signature "ledger rule" motif
   ========================================================= */

:root{
  --primary:#0D1F3D;
  --primary-dark:#081428;
  --primary-tint:#EFF2F6;
  --secondary:#0D1F3D;
  --accent:#C89A3C;
  --success:#C89A3C;
  --bg:#FFFFFF;
  --bg-soft:#F7F6F3;
  --border:#E4E2DC;
  --text:#0D1F3D;
  --text-muted:#5B6472;
  --shadow-soft: 0 4px 24px -4px rgba(13,31,61,0.10), 0 2px 8px -2px rgba(13,31,61,0.07);
  --shadow-lift: 0 20px 48px -12px rgba(13,31,61,0.26);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,h4,.font-display{
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}
.font-serif-num, .stat-num, .price-num{
  font-feature-settings:"tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Ledger rule signature ---------- */
.ledger-rule{
  display:block;
  width:64px;
  height:6px;
  margin-top:14px;
  position:relative;
}
.ledger-rule::before, .ledger-rule::after{
  content:"";
  position:absolute;
  left:0;
  height:1.5px;
  background:var(--accent);
}
.ledger-rule::before{ top:0; width:100%; }
.ledger-rule::after{ top:5px; width:64px; }
.ledger-rule.center{ margin-left:auto; margin-right:auto; }
.ledger-rule.center::before, .ledger-rule.center::after{ left:50%; transform:translateX(-50%); }
.ledger-rule.on-dark::before, .ledger-rule.on-dark::after{ background:#D9B96B; }

.ledger-underline{
  position:relative;
  padding-bottom:10px;
}
.ledger-underline::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:36px; height:1.5px; background:var(--accent);
  box-shadow:0 5px 0 -0.5px var(--accent);
}

/* Subtle ledger-paper grid texture (hero backgrounds) */
.ledger-texture{
  background-image:
    linear-gradient(rgba(11,79,140,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,79,140,0.05) 1px, transparent 1px);
  background-size: 100% 42px, 88px 100%;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.95rem;
  padding:14px 28px; border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-soft); }
.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-outline{ background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.btn-outline:hover{ background:var(--primary-tint); transform:translateY(-2px); }
.btn-outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.55); }
.btn-outline-light:hover{ background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 8px 24px -6px rgba(42,167,226,0.5); }
.btn-accent:hover{ background:#2394cb; transform:translateY(-2px); }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:#cfe3f3; }

.glass{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.5);
}
.glass-dark{
  background:rgba(30,41,59,0.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
}

/* ---------- Nav ---------- */
#site-nav{ transition:box-shadow .3s ease, background .3s ease; }
#site-nav.scrolled{ box-shadow:0 2px 20px rgba(15,23,42,0.08); background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); }
.nav-link{ position:relative; color:var(--secondary); font-weight:500; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--accent);
  transition:width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--primary); font-weight:600; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.stagger > * { transition-delay:calc(var(--i,0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .card, .btn{ transition:none !important; transform:none !important; opacity:1 !important; }
}

/* ---------- Misc ---------- */
.eyebrow{
  font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent);
}
.badge-soft{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--primary-tint); color:var(--primary);
  font-size:0.8rem; font-weight:600; padding:6px 14px; border-radius:999px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff;
  padding:12px 20px; z-index:100; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px;
}
.faq-item[open] summary .chev{ transform:rotate(180deg); }
summary::-webkit-details-marker{ display:none; }
summary{ list-style:none; cursor:pointer; }

.software-badge{
  display:flex; align-items:center; justify-content:center;
  height:64px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:#fff; font-family:'Montserrat',sans-serif; font-weight:700; color:var(--secondary);
  transition:all .3s ease;
}
.software-badge:hover{ border-color:var(--accent); box-shadow:var(--shadow-soft); transform:translateY(-3px); }

img{ max-width:100%; height:auto; display:block; }