/* Academy design-system layer: structured visual depth without generic stock imagery. */
:root {
  --primary-dark: #172554;
  --blue-900: #1e3a8a;
  --text: #172033;
  --text-light: #526079;
  --border: #dbe4f0;
  --bg-alt: #f8fafc;
  --gold: #f59e0b;
  --shadow-soft: 0 14px 34px rgb(23 37 84 / 10%);
}

body { line-height: 1.65; }
.announcement-bar { background: var(--primary); }
.announcement-bar .track { animation: none; display: flex; justify-content: center; width: 100%; }
.announcement-bar .track span[aria-hidden="true"] { display: none; }
.hero {
  background-color: var(--primary-dark);
  background-image: linear-gradient(rgb(30 64 175 / 18%) 1px, transparent 1px), linear-gradient(90deg, rgb(30 64 175 / 18%) 1px, transparent 1px), linear-gradient(135deg, var(--primary-dark), var(--blue-900));
  background-size: 44px 44px, 44px 44px, auto;
}
.hero-bg { display: block; z-index: 1; inset: 0; background: url('command-console.svg') right 8% center / min(58vw, 760px) auto no-repeat; opacity: 0.9; }
.hero::after { display: none; }
.hero::before { background: linear-gradient(90deg, rgb(23 37 84 / 98%) 0%, rgb(23 37 84 / 88%) 42%, rgb(30 64 175 / 40%) 100%); opacity: 1; z-index: 1; }
.hero .container { position: relative; z-index: 2; }
.hero .row { position: relative; z-index: 2; }
.hero h1 { max-width: 760px; letter-spacing: -0.045em; }
.hero h1 br { display: none; }
.hero h1::after { content: ''; display: block; width: 74px; height: 5px; margin-top: 24px; background: var(--gold); border-radius: 99px; }
.cta-section .btn-lg {
  border-radius: 12px !important;
}
.section-title { position: relative; padding-bottom: 16px; }
.section-title::after { content: ''; display: block; width: 48px; height: 4px; margin: 14px auto 0; background: var(--gold); border-radius: 99px; }
#about, #skills, #bonuses, #guarantee, #faq, #testimonials { position: relative; }
#about, #bonuses, #testimonials { background: var(--bg-alt); }
#skills, #faq { background: var(--bg); }
.method-section, .qualification-section { background: var(--bg); }
.method-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.qualification-section { background: var(--gold-wash, #fffbeb); }
.eyebrow { display: inline-block; margin-bottom: 14px; color: var(--primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.method-section .section-title { margin-bottom: 20px; }
.method-section .section-title::after { margin-left: 0; }
.method-list { border-left: 3px solid var(--gold); padding-left: 24px; }
.method-step { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.method-step:last-child { border-bottom: 0; }
.method-step strong { color: var(--primary-dark); font-family: 'Raleway', sans-serif; font-size: 1.15rem; }
.method-step span { color: var(--text-light); }
.skill-card, .bonus-card, .question-box { box-shadow: var(--shadow-soft) !important; border: 1px solid var(--border); }
.skill-card .card-bg, .bonus-card .card-bg { display: none; }
.section-art { display: block; width: calc(100% + 48px); height: 142px; object-fit: cover; margin: -24px -24px 22px; border-radius: 12px 12px 0 0; }
.skill-card .section-art { height: 116px; }
.bonus-card .section-art { height: 124px; margin-bottom: 18px; }
.skill-card .card-content h3, .skill-card .card-content p, .bonus-card .card-content h3, .bonus-card .card-content p { text-shadow: none; }
.skill-card { border-radius: 12px; border-top: 4px solid var(--primary); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.skill-card:hover { border-color: var(--primary); box-shadow: 0 18px 38px rgb(23 37 84 / 16%) !important; transform: translateY(-4px); }
.skill-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--blue-wash, #eff6ff); color: var(--primary); border: 1px solid rgb(30 64 175 / 16%); }
#about .skill-card:nth-child(2) { border-top-color: var(--gold); }
#about .skill-card:nth-child(3) { border-top-color: var(--blue-900); }
#skills .skill-card:nth-child(2n) { border-left: 4px solid var(--gold); border-top: 1px solid var(--border); }
.bonus-card { border-radius: 12px; border-left: 5px solid var(--gold); background: linear-gradient(135deg, #fff, #fffbeb); }
.question-box { border-radius: 12px; background: #fff; }
.question-box strong, .question-box h3 { color: var(--primary-dark); }
.cta-section { background: linear-gradient(135deg, var(--primary-dark), var(--blue-900)); position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; opacity: 0.18; background-image: linear-gradient(rgb(255 255 255 / 18%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 18%) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.cta-section .container { position: relative; z-index: 1; }
.btn-primary, .btn-outline-primary, .cta-section .btn-lg { transition: filter 0.2s ease !important; transform: none !important; }
.btn-primary:hover, .btn-outline-primary:hover, .cta-section .btn-lg:hover { filter: brightness(1.06); transform: none !important; }
@media (max-width: 575.98px) {
  .announcement-bar { white-space: normal; text-align: center; }
  .announcement-bar .track { padding: 6px 16px; }
  .hero { padding: 76px 0 64px; }
  .hero-bg { background-position: center 24px; background-size: 680px auto; opacity: 0.28; }
  .hero::before { background: linear-gradient(180deg, rgb(23 37 84 / 93%), rgb(23 37 84 / 97%)); }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: 1.02; }
  .hero h1::after { margin-top: 18px; }
  .hero-cta .btn { width: 100%; }
  .section-art { height: 128px; }
  .skill-card .section-art, .bonus-card .section-art { height: 104px; }
  .method-list { padding-left: 16px; }
  .method-step { grid-template-columns: 1fr; gap: 4px; }
}