/* ===============================

   COLOR USAGE CHEAT SHEET
================================ */

/* PRIMARY (#F2B400 - golden yellow)
- Use for: buttons, CTAs, highlights
- Avoid: large backgrounds (too strong)
- Best on: dark backgrounds
Example:
.my-btn-primary { }
.my-text-primary { }
*/

/* DARK (#0F172A - deep navy)
- Use for: hero sections, header, footer
- Creates strong contrast with yellow
- Gives “tech + trust” feeling
Example:
.my-bg-dark-main { }
*/

/* DARK SOFT (#1E293B - blue-gray)
- Use for: cards, secondary sections
- Softer than main dark, adds depth
Example:
.my-bg-dark-soft { }
*/

/* LIGHT (#F8FAFC - off-white)
- Use for: main background
- Keeps site clean and readable
Example:
.my-bg-light { }
*/

/* GRAY (#E2E8F0 - light gray)
- Use for: borders, subtle sections, dividers
- Good for alternating sections
Example:
.my-bg-gray { }
*/

/* ACCENT (#38BDF8 - blue)
- Use for: links, small highlights
- Don’t overuse (secondary accent only)
Example:
.my-text-accent { }
*/

/* ===============================
   COMBINATIONS (IMPORTANT)
================================ */

/*
GOOD:
- Dark bg + yellow text/button
- Light bg + dark text
- Gray bg + dark text
- Dark bg + white text + yellow CTA

AVOID:
- Yellow text on white (low contrast)
- Blue + yellow everywhere (too noisy)
- Too many dark sections in a row
*/

/* ===============================
   LAYOUT FLOW
================================ */

/*
Hero:
.my-bg-dark-main + .my-text-light + .my-btn-primary

Section 1:
.my-bg-light

Section 2:
.my-bg-gray

CTA section:
.my-bg-dark-soft + .my-btn-primary

Footer:
.my-bg-dark-main
*/

/* ===============================
   BUTTON RULES
================================ */

/*
Primary action:
.my-btn-primary (yellow)

Secondary:
.my-btn-dark

Tip:
- Always have 1 main CTA per section
*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

:root {
  --primary: #F2B400;
  --dark: #0F172A;
  --dark-soft: #1E293B;
  --light: #F8FAFC;
  --gray: #E2E8F0;
  --accent: #38BDF8;
}

/* ===== BODY ===== */
body {
  background-color: var(--light);
  color: var(--dark);
  font-family: 'Inter', sans-serif;
}

/* ===== BACKGROUNDS ===== */
.my-bg-dark-main {
  background-color: var(--dark);
  color: var(--light);
}

.my-bg-dark-soft {
  background-color: var(--dark-soft);
  color: var(--light);
}

.my-bg-light {
  background-color: var(--light);
  color: var(--dark);
}

.my-bg-gray {
  background-color: var(--gray);
  color: var(--dark);
}

.my-bg-primary {
  background-color: var(--primary);
  color: var(--dark);
}

/* ===== TEXT COLORS ===== */
.my-text-dark {
  color: var(--dark);
}

.my-text-light {
  color: var(--light);
}

.my-text-primary {
  color: var(--primary);
}

.my-text-accent {
  color: var(--accent);
}

/* ===== LINKS ===== */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== BUTTONS ===== */
.my-btn-primary {
  background-color: var(--primary);
  color: var(--dark);
  border: none;
}

.my-btn-primary:hover {
  background-color: #d99f00;
}

.my-btn-dark {
  background-color: var(--dark);
  color: var(--light);
  border: none;
}

.my-btn-dark:hover {
  background-color: var(--dark-soft);
}
.my-circle {
    width: 40px;
    height: 40px;
    display: flex;           /* use flex to center number */
    align-items: center;     /* vertical center */
    justify-content: center; /* horizontal center */
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    flex-shrink: 0;          /* prevent shrinking */
}