/* USAII — AI for Modern Project Managers */

:root {
  --bg: #fafafa;
  --fg: #0f1525;
  --card: #ffffff;
  --border: #e6e8ef;
  --secondary: #f1f3f9;
  --muted: #5b6478;
  --primary: #1f2a64;
  --primary-fg: #ffffff;
  --primary-glow: #3b4bb8;
  --accent: #d4a13a;
  --accent-fg: #1a1303;
  --gradient-hero: linear-gradient(135deg, #131a3d 0%, #1f2a64 55%, #2b3a8a 100%);
  --gradient-gold: linear-gradient(135deg, #f5cf6a 0%, #d4a13a 50%, #a87618 100%);
  --shadow-elegant: 0 25px 60px -20px rgba(20, 28, 70, 0.35);
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif !important;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
header .brand-name img {
    width: 50%;
}
footer .footer-brand img {
    width: 30%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.gradient-hero { background: var(--gradient-hero); }
.gold-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--muted); }
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary-glow);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: opacity .2s, background .2s, transform .1s;
  text-align: center;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-glow); }
.btn-accent { background: var(--accent); color: var(--accent-fg); }
.btn-accent:hover { opacity: .92; }
.btn-outline-light { border: 1px solid rgba(255,255,255,.4); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); }
.btn-block { display: block; width: 100%; }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--primary); color: var(--primary-fg);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.brand-name { font-weight: 700; font-size: 12px; letter-spacing: .04em; line-height: 1.1; }
.brand-sub { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; }
.nav-links { display: none; gap: 28px; font-size: 16px; font-weight: 600; }
.nav-links a:hover { color: var(--primary-glow); }
.nav-cta {
  padding: 6px 14px; font-size: 14px; font-weight: 600; border-radius: 6px;
  background: var(--primary); color: var(--primary-fg);
}
.nav-cta:hover { background: var(--primary-glow); }
@media (min-width: 768px) { .nav-links { display: flex; } }

/* HERO */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 48px;
  color: #fff;
}
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .25;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,20,50,.85), rgba(30,40,90,.7));
}
.hero-grid {
  position: relative;
  display: grid; gap: 32px;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(212,161,58,.15); border: 1px solid rgba(212,161,58,.3);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 20px;
}
.hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; }
.hero-sub { margin-top: 20px; font-size: 18px; color: rgba(255,255,255,.8); max-width: 540px; }
.hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px;font-weight:600; color: rgba(255,255,255,.75); }

/* Enrollment card */
.enroll-card {
  background: var(--card); color: var(--fg);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-elegant);
  border: 1px solid rgba(212,161,58,.3);
}
.enroll-head { display: flex; align-items: baseline; justify-content: space-between; }
.enroll-date { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--primary-glow); }
.enroll-title { margin-top: 4px; font-size: 22px; font-weight: 700; }
.enroll-price { font-size: 24px; font-weight: 700; color: var(--primary); text-align: right; }
.enroll-strike { font-size: 15px; color: var(--muted); text-decoration: line-through; text-align: right; }
.enroll-meta { margin-top: 4px; display: flex; gap: 12px; font-size: 14px;font-weight:600; color: var(--muted); }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.feature-list li { display: flex; gap: 8px; font-size: 14px; margin-bottom: 10px;font-weight:600; }
.feature-list .check { color: var(--accent); }
.enroll-footnote { margin-top: 12px; font-size: 11px; text-align: center; color: var(--muted);font-weight:600; }
.seats { color: var(--fg); font-weight: 600; }

/* Logo bar */
.logo-bar { background: rgba(241,243,249,.5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 0; }
.logo-bar-label { font-size: 12px;font-weight:700; text-transform: uppercase; letter-spacing: .18em;  color:var(--primary-glow); text-align: center; margin-bottom: 16px; }
.logo-bar-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 40px; color: #000; font-weight: 600; font-size: 14px;  }
.logo-bar-row span { letter-spacing: .12em; }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background: rgba(241,243,249,.4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-title { margin-top: 8px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.section-lead { margin-top: 16px; color: var(--muted);font-size: 16px; }

/* Who it's for */
.who-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .who-grid { grid-template-columns: 4fr 8fr; } }
.who-img { margin-top: 24px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-elegant); }
.who-img img { width: 100%; height: 224px; object-fit: cover; }
.who-cards { display: grid; gap: 16px; }
@media (min-width: 640px) { .who-cards { grid-template-columns: 1fr 1fr; } }
.card {
  padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card);
}
.card-icon {
  width: 36px; height: 36px; border-radius: 6px;
  background: rgba(31,42,100,.1); color: var(--primary);
  display: grid; place-items: center; margin-bottom: 12px;
}
.card-title { font-size: 16px;font-weight: 700; }
.card-body { font-size: 16px; color: var(--muted); margin-top: 4px; }

/* Outcomes */
.outcomes-head { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) { .outcomes-head { grid-template-columns: 7fr 5fr; } }
.outcomes-img { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-elegant); }
.outcomes-img img { width: 100%; height: 192px; object-fit: cover; }
.outcomes-grid {
  margin-top: 48px; display: grid; gap: 16px;
}
@media (min-width: 768px) { .outcomes-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .outcomes-grid { grid-template-columns: repeat(3, 1fr); } }
.outcome-card { padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.outcome-card .o-icon { width: 40px; height: 40px; border-radius: 6px; background: rgba(31,42,100,.1); color: var(--primary); display: grid; place-items: center; margin-bottom: 16px; }
.outcome-card.flagship {
  background: var(--primary); color: var(--primary-fg); border-color: var(--primary);
}
@media (min-width: 1024px) { .outcome-card.flagship { grid-row: span 3; } }
.outcome-card.flagship .o-icon { background: var(--accent); color: var(--accent-fg); }
.outcome-card h3 { font-size: 18px; font-weight: 700; }
.outcome-card p { margin-top: 8px; font-size: 16px; color: var(--muted); line-height: 1.55; }
.outcome-card.flagship p { color: rgba(255,255,255,.8); }
.flagship-footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); font-size: 16px; color: rgba(255,255,255,.7); }
.flagship-footer b { color: var(--accent); }

/* Agenda */
.agenda-head { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .agenda-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.day-tabs { display: inline-flex; padding: 4px; border-radius: 10px; background: var(--secondary); border: 1px solid var(--border); align-self: flex-start; }
.day-tab {
  padding: 8px 20px; font-size: 14px; font-weight: 600; border-radius: 6px;
  color: var(--muted); transition: background .2s, color .2s;
}
.day-tab.active { background: var(--primary); color: var(--primary-fg); }
.agenda-list { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.agenda-row { display: grid; gap: 16px; }
@media (min-width: 768px) { .agenda-row { grid-template-columns: 120px 1fr; gap: 32px; align-items: start; } }
.agenda-time {
   font-family: 'Segoe UI', sans-serif !important;
  font-size: 16px; font-weight: 800; color: var(--primary-glow);
}
@media (min-width: 768px) { .agenda-time { padding-top: 20px; } }
.agenda-card { padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); display: flex; gap: 16px; align-items: flex-start; }
.agenda-num { font-size: 28px; font-weight: 700; color: var(--accent); width: 40px; flex-shrink: 0; line-height: 1; }
.agenda-card h3 { font-weight: 700; font-size: 17px; }
.agenda-card p { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* Instructor */
.instructor-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .instructor-grid { grid-template-columns: 320px 1fr; } }
.instructor-photo { position: relative; margin: 0 auto; }
.instructor-glow { position: absolute; inset: -12px; border-radius: 16px; background: var(--gradient-gold); filter: blur(40px); opacity: .4; }
.instructor-photo img { position: relative; height: auto; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow-elegant); }
.instructor-name { position: relative; margin-top: 16px; text-align: center; }
.instructor-name .role { font-size: 16px; color: var(--muted); }
.instructor-name .name { font-weight: 700; font-size: 18px; margin-top: 2px; }
@media (min-width: 1024px) { .instructor-photo, .instructor-name { text-align: center; margin-left: 0; } }
.instructor-stats { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .instructor-stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); }
.stat-num { font-size: 20px; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 16px; color: var(--muted); margin-top: 2px; }
.tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 10px; border-radius: 999px; background: rgba(31,42,100,.1); color: var(--primary); font-size: 14px; font-weight: 600; }

/* Pricing */
.pricing-wrap { max-width: 960px; margin: 0 auto; }
.pricing-card { overflow: hidden; border: 1px solid rgba(212,161,58,.4); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-elegant); }
.pricing-grid { display: grid; }
@media (min-width: 768px) { .pricing-grid { grid-template-columns: 1.4fr 1fr; } }
.pricing-left { padding: 40px; }
.pricing-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.pricing-tag .pill { padding: 4px 8px; border-radius: 4px; background: var(--accent); color: var(--accent-fg); }
.pricing-tag .meta { color: var(--muted); }
.pricing-features { margin-top: 24px; display: grid; gap: 10px; font-size: 14px; }
@media (min-width: 640px) { .pricing-features { grid-template-columns: 1fr 1fr; } }
.pricing-features li { display: flex; gap: 8px; }
.pricing-features .check { color: var(--accent); }
.pricing-right { padding: 40px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.tuition-label { font-size: 14px; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.7); font-weight: 600; }
.tuition-row { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.tuition-price { font-size: 48px; font-weight: 700; }
.tuition-strike { font-size: 18px; color: rgba(255,255,255,.6); text-decoration: line-through; }
.tuition-save { font-size: 14px; color: var(--accent); margin-top: 4px; }
.tuition-meta { margin-top: 24px; font-size: 14px; color: rgba(255,255,255,.8); display: grid; gap: 4px; }
.group-note { margin-top: 12px; font-size: 12px; text-align: center; color: rgba(255,255,255,.6); }
.group-note u { text-decoration: underline; }

/* FAQ */
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-list { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; cursor: pointer; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { color: var(--muted); transition: transform .2s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-answer { padding-bottom: 20px; color: var(--muted); }

/* Final CTA */
.final-cta { padding: 80px 0; color: #fff; text-align: center; }
.final-cta .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(212,161,58,.15); border: 1px solid rgba(212,161,58,.3);
  color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  margin-bottom: 24px;
}
.final-cta h2 { font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; }
.final-cta p { margin: 20px auto 0; font-size: 18px; color: rgba(255,255,255,.8); max-width: 640px; }
.final-cta-buttons { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Footer */
.footer { background: var(--primary); color: var(--primary-fg); padding: 20px 0; }
.footer-inner { display: grid; gap: 16px; font-size: 14px; }
@media (min-width: 640px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .mark { width: 32px; height: 32px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; }
.footer-brand .sub { font-size: 11px; color: rgba(255,255,255,.6); }
.footer-right { font-size: 14px; color: rgba(255,255,255,.7); }
@media (min-width: 640px) { .footer-right { text-align: right; } }

/* Section heading center variant */
.center { text-align: center; }
.mt-12 { margin-top: 48px; }
.mb-10 { margin-bottom: 40px; }
@media (max-width: 47.9375em) {
    header .brand-name img {
        width: 70% !important;
    }
    .nav-cta {
        width: 60% !important;
    }
    .instructor-glow .instructor-photo img {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;
    }
}