/* FOX FINANCE — Dizayn tokenləri (:root), reset, tipoqrafiya, düymələr
   (index.html-dən çıxarılıb; sıra vacibdir — layout.php-dəki yükləmə sırasını dəyişmə) */
/* ============================================================
   FOX FINANCE — DESIGN TOKENS
   Signature concept: "Gauge Cluster" — automotive dashboard
   gauges reused as the visual language for financial progress
   (speedometer → payment progress, tachometer → savings rate).
   ============================================================ */
:root{
  --orange: #FF6B00;
  --orange-dark: #E35A00;
  --ink: #111111;
  --ink-soft: #2B2A28;
  --bg: #FAFAFA;
  --white: #FFFFFF;
  --gold: #FFD36A;
  --grey-100: #F1F1EF;
  --grey-200: #E5E4E1;
  --grey-400: #A9A7A2;
  --grey-600: #6B6965;
  --green: #1FAA59;
  --yellow: #E8A800;
  --red: #E14A3B;

  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 40px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --shadow-soft: 0 20px 60px -20px rgba(17,17,17,.18);
  --shadow-tight: 0 8px 24px -8px rgba(17,17,17,.12);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;}
::selection{background:var(--orange);color:var(--white);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2.5px solid var(--orange); outline-offset:3px; border-radius:4px;}

.container{max-width:1280px; margin:0 auto; padding:0 32px;}
@media (max-width:768px){.container{padding:0 20px;}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;align-items:center;gap:10px;
  font-weight:600;
  margin-bottom:18px;
}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--orange);display:inline-block;border-radius:2px;}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-.01em;}
.section-title{font-size:clamp(32px,4.4vw,54px); font-weight:700; color:var(--ink);}
.section-sub{font-size:17px; color:var(--grey-600); max-width:560px; line-height:1.6; margin-top:14px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap;}

.section{padding:120px 0;}
@media (max-width:768px){.section{padding:80px 0;}}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 34px; border-radius:100px; font-weight:600; font-size:15px;
  transition: all .45s var(--ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn-primary{background:var(--orange); color:var(--white);}
.btn-primary:hover{background:var(--ink); transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(17,17,17,.4);}
.btn-outline{background:transparent; color:var(--ink); border:1.5px solid rgba(17,17,17,.18);}
.btn-outline:hover{border-color:var(--ink); background:var(--ink); color:var(--white); transform:translateY(-3px);}
.btn-light{background:var(--white); color:var(--ink);}
.btn-light:hover{background:var(--gold); transform:translateY(-3px);}
.btn-sm{padding:12px 22px; font-size:13.5px;}