/*==================================================
    GERMAINE — AI COURSE DETAIL PAGES, VISUAL REFRESH V3
    Frontend-only additions layered on top of ai-courses-v2.css.
    Adds: two-column hero media + floating tech-icon badges,
    Apply Now hero CTA, compact 4-stat info row, "What You Will
    Learn" skill grid, "Invest in Your Future" pricing section,
    and the 3-card Practical Skills / Expert Guidance / Career
    Focus band near the footer. No existing selectors are
    redefined destructively — this file only adds new classes
    and extends the hero grid that already exists in v2.
    Palette: pink-dominant (--ai-pink) + blue-secondary accent
    (#3B82F6), white/light backgrounds, glassmorphism, rounded.
==================================================*/

:root{
    --ai-blue-accent:#3B82F6;
}

/* ================= HERO: APPLY NOW CTA ================= */
.aic-hero2-links{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.aic-hero2-apply{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 26px; border-radius:999px; font-weight:700; font-size:.9rem;
    background:linear-gradient(115deg,var(--ai-pink) 0%,var(--ai-blue-accent) 130%);
    color:#fff; text-decoration:none; border:1px solid transparent;
    box-shadow:0 14px 32px rgba(236,72,153,.32); transition:transform .3s ease, box-shadow .3s ease;
    white-space:nowrap;
}
.aic-hero2-apply:hover{ transform:translateY(-2px); box-shadow:0 20px 42px rgba(236,72,153,.42); }
.aic-hero2-apply i{ font-size:.8rem; }

/* ================= HERO: MEDIA COLUMN ================= */
.aic-hero2-media{ position:relative; }
.aic-hero2-media .gwf-wrap{ padding:10px 10px 34px 44px; }

/* Floating tech-icon badges — small decorative pills orbiting the
   hero image, driven entirely by presentation data (category-based
   icon lookup in the renderer), never invented course content. */
.aic-float-icons{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.aic-float-icon{
    position:absolute; display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:14px;
    background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 12px 26px rgba(16,42,92,.18);
    font-size:1.15rem; color:var(--ai-navy);
    animation:aicFloatIcon 5.5s ease-in-out infinite;
    pointer-events:auto;
}
.aic-float-icon:nth-child(1){ top:4%;  left:-6%;  color:var(--ai-pink); animation-delay:0s; }
.aic-float-icon:nth-child(2){ top:20%; right:-8%; color:var(--ai-blue-accent); animation-delay:.6s; }
.aic-float-icon:nth-child(3){ top:52%; left:-10%; color:var(--ai-navy); animation-delay:1.2s; }
.aic-float-icon:nth-child(4){ bottom:16%; right:-6%; color:var(--ai-pink); animation-delay:1.8s; }
.aic-float-icon:nth-child(5){ bottom:-2%; left:14%; color:var(--ai-blue-accent); animation-delay:2.4s; }
.aic-float-icon:nth-child(6){ top:-4%; left:32%; color:var(--ai-navy); animation-delay:3s; }
@keyframes aicFloatIcon{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-9px); }
}

/* ================= STATS BAND (4 compact facts) ================= */
.aic-stats-band{ position:relative; margin-top:-26px; z-index:3; }
.aic-stats-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    background:#fff; border-radius:22px; padding:22px 18px;
    box-shadow:0 24px 60px rgba(16,42,92,.14); border:1px solid var(--ai-line);
}
.aic-stat-item{ text-align:center; padding:6px 8px; position:relative; }
.aic-stat-item + .aic-stat-item::before{
    content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px;
    background:var(--ai-line);
}
.aic-stat-icon{
    width:38px; height:38px; margin:0 auto 8px; border-radius:11px;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    background:rgba(236,72,153,.09); color:var(--ai-pink);
}
.aic-stats-row-5{ grid-template-columns:repeat(5,1fr); }
.aic-stat-item:nth-child(2) .aic-stat-icon{ background:rgba(236,25,104,.1); color:var(--ai-hero-pink-2,var(--ai-pink)); }
.aic-stat-item:nth-child(3) .aic-stat-icon{ background:rgba(59,130,246,.1); color:var(--ai-blue-accent); }
.aic-stat-item:nth-child(5) .aic-stat-icon{ background:rgba(16,42,92,.08); color:var(--ai-navy); }
.aic-stat-value{ display:block; font-size:.94rem; font-weight:800; color:var(--ai-navy); line-height:1.3; }
.aic-stat-label{ display:block; font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ai-navy-mut); margin-top:2px; }

/* ================= WHAT YOU WILL LEARN ================= */
.aic-skills-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px;
}
.aic-skill-card{
    background:#fff; border:1px solid var(--ai-line); border-radius:20px;
    padding:26px 22px; box-shadow:0 10px 28px rgba(16,42,92,.06);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.aic-skill-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 44px rgba(236,72,153,.16);
    border-color:rgba(236,72,153,.28);
}
.aic-skill-ic{
    width:46px; height:46px; border-radius:14px; margin-bottom:14px;
    display:flex; align-items:center; justify-content:center; font-size:1.15rem;
    background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(59,130,246,.1));
    color:var(--ai-pink);
}
.aic-skill-card h4{ margin:0 0 8px; font-size:1rem; font-weight:800; color:var(--ai-navy); }
.aic-skill-card p{ margin:0; font-size:.86rem; line-height:1.55; color:var(--ai-navy-mut); }

/* ================= INVEST IN YOUR FUTURE ================= */
.aic-invest-wrap{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center;
}
.aic-invest-text h2{ margin:0 0 12px; font-size:1.7rem; font-weight:800; color:var(--ai-navy); }
.aic-invest-text p{ margin:0; font-size:.96rem; line-height:1.7; color:var(--ai-navy-mut); }
.aic-invest-cards{ display:flex; flex-direction:column; gap:14px; }
.aic-invest-card{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:#fff; border:1px solid var(--ai-line); border-radius:18px;
    padding:18px 22px; box-shadow:0 10px 26px rgba(16,42,92,.06);
}
.aic-invest-card-mode{ display:flex; align-items:center; gap:12px; }
.aic-invest-card-mode i{
    width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:rgba(16,42,92,.06); color:var(--ai-navy); font-size:.95rem; flex-shrink:0;
}
.aic-invest-card-mode strong{ display:block; font-size:.88rem; color:var(--ai-navy); }
.aic-invest-card-mode span{ display:block; font-size:.72rem; color:var(--ai-navy-mut); margin-top:1px; }
.aic-invest-card-fee{ font-size:1.05rem; font-weight:800; color:var(--ai-pink); white-space:nowrap; }

/* ================= 3 CONNECTED GLASS CARDS ================= */
.aic-trio-wrap{ position:relative; }
.aic-trio-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    background:linear-gradient(120deg,var(--ai-navy) 0%,#123A92 100%);
    border-radius:26px; overflow:hidden;
    box-shadow:0 30px 70px rgba(16,42,92,.28);
}
.aic-trio-card{
    padding:34px 26px; text-align:center; position:relative;
    border-right:1px solid rgba(255,255,255,.12);
}
.aic-trio-card:last-child{ border-right:none; }
.aic-trio-ic{
    width:52px; height:52px; margin:0 auto 16px; border-radius:16px;
    display:flex; align-items:center; justify-content:center; font-size:1.3rem;
    background:rgba(255,255,255,.12); color:#F472B6;
    backdrop-filter:blur(6px);
}
.aic-trio-card h4{ margin:0 0 8px; font-size:1.02rem; font-weight:800; color:#fff; }
.aic-trio-card p{ margin:0; font-size:.84rem; line-height:1.55; color:rgba(255,255,255,.72); }

/* ================= RESPONSIVE ================= */
@media (max-width:991px){
    .aic-stats-row{ grid-template-columns:repeat(2,1fr); row-gap:18px; }
    .aic-stat-item:nth-child(3)::before{ display:none; }
    .aic-skills-grid{ grid-template-columns:repeat(2,1fr); }
    .aic-invest-wrap{ grid-template-columns:1fr; gap:26px; }
    .aic-trio-row{ grid-template-columns:1fr; border-radius:22px; }
    .aic-trio-card{ border-right:none; border-bottom:1px solid rgba(255,255,255,.12); }
    .aic-trio-card:last-child{ border-bottom:none; }
}
@media (max-width:768px){
    .aic-hero2-links{ flex-direction:column; align-items:stretch; }
    .aic-hero2-apply, .aic-hero2-back{ justify-content:center; text-align:center; }
    .aic-float-icon{ width:38px; height:38px; font-size:.95rem; border-radius:12px; }
    .aic-stats-row{ grid-template-columns:repeat(2,1fr); border-radius:18px; padding:18px 14px; }
    .aic-skills-grid{ grid-template-columns:1fr; }
}
@media (max-width:576px){
    .aic-float-icon:nth-child(4),
    .aic-float-icon:nth-child(5),
    .aic-float-icon:nth-child(6){ display:none; }
    .aic-stats-row{ grid-template-columns:1fr; }
    .aic-stat-item + .aic-stat-item::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
    .aic-float-icon{ animation:none; }
}

/*==================================================
    V4 ADDITIONS — MASTER REFERENCE ALIGNMENT
    Pink-hero system, dark-navy course nav w/ pink active
    indicator, "Why This Bootcamp?" cards, numbered "What
    You Will Learn" grid, 4-card Learn/Build/Career band,
    and a merged Requirements + Programme Details + Invest
    3-column section. All content still comes from real
    course data (course.gain, course.skills, course.modes,
    course.format, course.whoFor) — only the presentation
    changes here.
==================================================*/

:root{
    --ai-hero-pink-1:#FF2A85;
    --ai-hero-pink-2:#EC1968;
    --ai-hero-pink-3:#C41260;
    --ai-hero-navy-1:#071A52;
    --ai-hero-navy-2:#0B1B4D;
}

/* ---- Hero: pink gradient background ---- */
.aic-hero2{
    background:linear-gradient(135deg, var(--ai-hero-pink-1) 0%, var(--ai-hero-pink-2) 55%, var(--ai-hero-pink-3) 100%) !important;
}
.aic-hero2::before{
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.16), transparent 55%),
        radial-gradient(circle at 88% 20%, rgba(11,27,77,.28), transparent 50%) !important;
}
.aic-hero2-title .ai-pink-text{ color:#fff; text-shadow:0 2px 18px rgba(7,26,82,.45); }

/* Cyber Security hero heading only — larger, bolder, more breathing
   room, underline artifact removed. Scoped to .aic-hero2-title-cyber
   (added only on ai-course-cyber-security.html) so no other course
   page's heading is affected. */
.aic-hero2-title-cyber{
    font-size:clamp(2.3rem, 4.6vw, 3.4rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.01em;
    margin:0 0 22px;
}
.aic-hero2-title-cyber .ai-pink-text{
    text-decoration:none;
}
@media(max-width:640px){
    .aic-hero2-title-cyber{
        font-size:clamp(1.9rem, 8vw, 2.4rem);
        margin:0 0 16px;
    }
}
.aic-hero2-back{ border-color:rgba(255,255,255,.4); }
.aic-hero2-back:hover{ border-color:#fff; }
.aic-intake-badge{ background:rgba(7,26,82,.28); border-color:rgba(255,255,255,.3); }
.aic-hero2-apply{ background:linear-gradient(115deg, var(--ai-hero-navy-1) 0%, var(--ai-hero-navy-2) 100%); box-shadow:0 14px 32px rgba(7,26,82,.35); }
.aic-hero2-apply:hover{ box-shadow:0 20px 42px rgba(7,26,82,.45); }
.aic-float-icon:nth-child(3n+1){ color:var(--ai-hero-pink-2); }
.aic-float-icon:nth-child(3n+2){ color:var(--ai-hero-navy-1); }
.aic-float-icon:nth-child(3n){ color:var(--ai-blue-accent); }

/* ---- Sticky course nav: dark navy + pink active indicator ---- */
.aic-detail-nav{
    background:linear-gradient(120deg, var(--ai-hero-navy-1) 0%, #123A92 100%) !important;
    border-bottom:none !important;
}
.aic-detail-nav-link{ color:rgba(255,255,255,.68) !important; }
.aic-detail-nav-link:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
.aic-detail-nav-link.is-active{
    color:#fff !important;
    background:linear-gradient(115deg, var(--ai-hero-pink-2) 0%, var(--ai-hero-pink-1) 100%) !important;
}

/* ---- "Why This Bootcamp?" (renderGain repurposed) ---- */
.aic-why-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px;
}
.aic-why-card{
    background:#fff; border:1px solid var(--ai-line); border-radius:18px;
    padding:22px 18px; text-align:center; box-shadow:0 10px 26px rgba(16,42,92,.06);
    transition:transform .3s ease, box-shadow .3s ease;
}
.aic-why-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(236,25,104,.14); }
.aic-why-ic{
    width:44px; height:44px; margin:0 auto 12px; border-radius:13px;
    display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    background:linear-gradient(135deg, var(--ai-hero-pink-2), var(--ai-hero-navy-1)); color:#fff;
}
.aic-why-card p{ margin:0; font-size:.84rem; line-height:1.5; color:var(--ai-navy-mut); font-weight:600; }

/* ---- Numbered "What You Will Learn" cards ---- */
.aic-skill-card{ position:relative; padding-top:34px; }
.aic-skill-num{
    position:absolute; top:16px; right:18px; font-size:.72rem; font-weight:800;
    color:rgba(236,25,104,.35); letter-spacing:.02em;
}

/*==================================================
    V5 — CURRICULUM HIGHLIGHTS: COMPACT GLASS CARDS
    WITH TRAVELLING MARGIN LIGHTS
    Section gets a subtle navy background with a faint pink
    glow + dot grid; cards become translucent glass (readable
    white-ish glass, not dark) with a thin pink border and a
    single soft pink light that continuously travels around
    the card's EDGE only (conic-gradient border mask, not a
    neon flash and never crossing the text). Real course
    content (icon/title/desc from course.skills) is unchanged —
    presentation only. ---- */
#aicSkills{
    position:relative; overflow:hidden;
    background:linear-gradient(180deg, var(--ai-hero-navy-1) 0%, #0F2158 100%);
    padding:44px 0 50px;
}
#aicSkills::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(circle at 84% 10%, rgba(236,25,104,.18), transparent 55%),
        radial-gradient(circle at 6% 92%, rgba(236,25,104,.12), transparent 50%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:auto, auto, 34px 34px, 34px 34px;
}
#aicSkills > .ai-wrap{ position:relative; z-index:1; }
#aicSkills .aic-detail-section-head{ margin-bottom:26px; }
#aicSkills .aic-detail-section-head .ai-eyebrow{
    color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26);
}
#aicSkills .aic-detail-section-head h2{ color:#fff; }
#aicSkills .aic-detail-section-head p{ color:rgba(255,255,255,.7); }

#aicSkills .aic-skills-grid{ gap:14px; margin-top:0; }
#aicSkills .aic-skill-card{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,80,150,.28);
    border-radius:18px;
    padding:18px 18px 16px;
    padding-top:32px;
    box-shadow:0 14px 30px rgba(5,16,50,.35);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}
#aicSkills .aic-skill-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 42px rgba(236,25,104,.3);
}
#aicSkills .aic-skill-ic{
    width:38px; height:38px; margin-bottom:10px; border-radius:12px; font-size:1rem;
}
#aicSkills .aic-skill-card h4{ font-size:.92rem; margin:0 0 6px; }
#aicSkills .aic-skill-card p{ font-size:.8rem; line-height:1.48; }
#aicSkills .aic-skill-num{ color:rgba(236,25,104,.4); }

@media (max-width:576px){
    #aicSkills{ padding:36px 0 40px; }
}

/* ---- Learn / Build / Grow Your Career: 4-card band ---- */
.aic-trio-row{ grid-template-columns:repeat(4,1fr) !important; }
.aic-trio-card:nth-child(4){ border-right:none; }

/* ---- Merged Requirements + Programme Details + Invest (3-col) ---- */
.aic-progtri-wrap{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;
}
.aic-progtri-card{
    background:#fff; border:1px solid var(--ai-line); border-radius:20px;
    padding:26px 24px; box-shadow:0 10px 28px rgba(16,42,92,.06); display:flex; flex-direction:column;
}
.aic-progtri-card h3{
    display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:.98rem; font-weight:800; color:var(--ai-navy);
}
.aic-progtri-card h3 i{ color:var(--ai-hero-pink-2); }
.aic-progtri-req-item{ display:flex; align-items:flex-start; gap:8px; font-size:.82rem; line-height:1.5; color:var(--ai-navy-mut); margin-bottom:8px; }
.aic-progtri-req-item:last-child{ margin-bottom:0; }
.aic-progtri-req-item i{ color:var(--ai-hero-pink-2); margin-top:3px; flex-shrink:0; font-size:.78rem; }
.aic-progtri-req-group + .aic-progtri-req-group{ margin-top:16px; padding-top:14px; border-top:1px dashed rgba(236,25,104,.2); }
.aic-progtri-req-group h4{
    margin:0 0 10px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ai-hero-pink-2);
}
.aic-progtri-detail-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--ai-line); font-size:.82rem; }
.aic-progtri-detail-row:last-child{ border-bottom:none; }
.aic-progtri-detail-row span{ color:var(--ai-navy-mut); }
.aic-progtri-detail-row strong{ color:var(--ai-navy); text-align:right; }
.aic-progtri-invest-tagline{ font-size:.82rem; color:var(--ai-navy-mut); margin-bottom:14px; }
.aic-progtri-invest-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.aic-progtri-invest-row{ display:flex; justify-content:space-between; align-items:center; font-size:.84rem; padding:8px 0; border-bottom:1px dashed var(--ai-line); }
.aic-progtri-invest-row:last-child{ border-bottom:none; }
.aic-progtri-invest-row span{ color:var(--ai-navy-mut); }
.aic-progtri-invest-row strong{ color:var(--ai-hero-pink-2); font-size:.98rem; }
.aic-progtri-card .ai-btn{ margin-top:auto; width:100%; justify-content:center; }

/* ---- Requirements/Details/Investment section: pink theme ----
   Pink gradient wash behind the three cards (not the whole page),
   white glass cards with a subtle pink glow + thin pink border,
   navy typography kept for readability. Overrides the generic
   light-gray .aic-detail-section-tint background for this one
   section only. ---- */
#aicRequirements{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, #FFE1EF 0%, #FFF2F8 55%, #FFFFFF 100%) !important;
}
#aicRequirements::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(circle at 10% 8%, rgba(236,25,104,.16), transparent 50%),
        radial-gradient(circle at 92% 88%, rgba(236,25,104,.12), transparent 50%);
}
#aicRequirements > .ai-wrap{ position:relative; z-index:1; }
#aicRequirements .aic-progtri-card{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    border:1px solid rgba(236,25,104,.22);
    box-shadow:0 16px 38px rgba(236,25,104,.14);
}

/* ---- Pink CTA banner (Apply section) ---- */
.aic-detail-apply{
    background:linear-gradient(120deg, var(--ai-hero-pink-1) 0%, var(--ai-hero-pink-2) 100%) !important;
    border-radius:26px; padding:44px 30px !important;
}

/* ---- Combined FAQ + "Ready to Begin Your Career?" CTA ----
   One unified glass outer card (.aic-faq-cta-outer) holds both halves
   so they read as a single premium component rather than two floating
   cards with a gap: FAQ accordion on the left, a pink gradient CTA
   panel nested inside the same container on the right, joined by a
   soft vertical divider and a slow travelling light around the OUTER
   border. Stacks to FAQ-above/CTA-below on mobile, still one card. ---- */
#aicFaqs .aic-faq-cta-outer{
    position:relative; border-radius:32px; padding:40px 36px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(236,25,104,.14);
    box-shadow:0 26px 60px rgba(9,26,73,.16);
    overflow:hidden;
}
#aicFaqs .aic-faq-cta-outer::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(620px 280px at 6% -4%, rgba(236,25,104,.09), transparent 60%),
               radial-gradient(620px 280px at 102% 108%, rgba(13,42,120,.09), transparent 60%);
}
#aicFaqs .aic-faq-cta-outer::after{
    content:""; position:absolute; inset:0; border-radius:32px; padding:1.5px; pointer-events:none;
    background:conic-gradient(from 0deg, rgba(236,25,104,0) 0%, rgba(236,25,104,.55) 16%, rgba(255,255,255,0) 32%, rgba(13,42,120,.42) 54%, rgba(236,25,104,.55) 76%, rgba(236,25,104,0) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:aicTravelLight 10s linear infinite;
}
#aicFaqs .aic-faq-cta-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.65fr 1fr; gap:0; align-items:stretch;
}
#aicFaqs .aic-faq-col{ min-width:0; padding-right:36px; position:relative; }
#aicFaqs .aic-faq-col::after{
    content:""; position:absolute; top:6px; bottom:6px; right:0; width:1px;
    background:linear-gradient(180deg, transparent, rgba(236,25,104,.3), rgba(13,42,120,.22), transparent);
}
#aicFaqs .aic-faq-head{ text-align:left; margin:0 0 22px; }
#aicFaqs .aic-cta-col{ min-width:0; padding-left:36px; display:flex; }
#aicFaqs .aic-cta-col .aic-final-inner{ width:100%; }

.aic-final-inner{
    position:relative; overflow:hidden; text-align:center;
    padding:38px 28px; border-radius:22px;
    background:linear-gradient(120deg, var(--ai-hero-pink-1) 0%, var(--ai-hero-pink-2) 55%, var(--ai-hero-navy-1) 130%);
    box-shadow:0 16px 38px rgba(236,25,104,.24);
}
.aic-final-inner::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(700px 340px at 85% 10%, rgba(255,255,255,.2), transparent 60%);
}
.aic-final-particle{
    position:absolute; width:5px; height:5px; border-radius:50%;
    background:#fff; box-shadow:0 0 10px #fff; animation:aicFinalPulse 5s ease-in-out infinite;
}
.aic-final-inner .fp1{ top:16%; left:10%; }
.aic-final-inner .fp2{ top:70%; left:88%; animation-delay:1.4s; }
.aic-final-inner .fp3{ top:84%; left:20%; animation-delay:2.8s; }
@keyframes aicFinalPulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:1; transform:scale(1.6); } }
.aic-final-ic{
    width:50px; height:50px; margin:0 auto 14px; border-radius:16px; position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
}
.aic-final-inner h2{ position:relative; z-index:1; font-size:clamp(1.3rem,2.4vw,1.6rem); font-weight:800; color:#fff; margin:0 0 10px; }
.aic-final-inner p{ position:relative; z-index:1; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.9); max-width:340px; margin:0 auto 20px; }
.aic-final-apply{
    position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px;
    padding:13px 26px; border-radius:999px; font-weight:700; font-size:.86rem;
    background:#fff; color:var(--ai-hero-pink-2); text-decoration:none;
    box-shadow:0 12px 26px rgba(7,26,82,.22); transition:transform .3s ease, box-shadow .3s ease;
}
.aic-final-apply:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(7,26,82,.3); }
.aic-final-more{
    position:relative; z-index:1; display:block; margin-top:12px;
    font-size:.8rem; font-weight:600; color:rgba(255,255,255,.85); text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px; width:max-content;
    margin-left:auto; margin-right:auto;
    transition:color .25s ease, border-color .25s ease;
}
.aic-final-more:hover{ color:#fff; border-color:#fff; }

@media (max-width:991px){
    #aicFaqs .aic-faq-cta-outer{ padding:30px 22px; border-radius:26px; }
    #aicFaqs .aic-faq-cta-grid{ grid-template-columns:1fr; gap:28px; }
    #aicFaqs .aic-faq-col{ padding-right:0; }
    #aicFaqs .aic-faq-col::after{ top:auto; bottom:-14px; left:6px; right:6px; width:auto; height:1px;
        background:linear-gradient(90deg, transparent, rgba(236,25,104,.3), rgba(13,42,120,.22), transparent); }
    #aicFaqs .aic-cta-col{ padding-left:0; }
    .aic-final-inner{ position:static; }
}
@media (prefers-reduced-motion:reduce){
    .aic-final-particle{ animation:none; }
}

@media (max-width:991px){
    .aic-why-grid{ grid-template-columns:repeat(2,1fr); }
    .aic-trio-row{ grid-template-columns:repeat(2,1fr) !important; }
    .aic-trio-card:nth-child(2){ border-right:none; }
    .aic-progtri-wrap{ grid-template-columns:1fr; }
}
@media (max-width:768px){
    .aic-why-grid{ grid-template-columns:1fr; }
    .aic-trio-row{ grid-template-columns:1fr !important; }
    .aic-trio-card{ border-right:none !important; }
}

/* ---- About / "Build Your Future" section: compact real-benefit
   checklist, folded directly under the description instead of a
   separate full-width "Why This Bootcamp?" band further down the
   page (avoids repeating the same course.gain content twice and
   keeps the About section self-contained: image + real description
   + short benefit list, matching the corrected page hierarchy). ---- */
.aic-about-benefits{
    list-style:none; margin:22px 0 0; padding:18px 0 0; display:flex; flex-direction:column; gap:12px;
    border-top:1px dashed var(--ai-line);
}
.aic-about-benefits li{ display:flex; align-items:flex-start; gap:12px; font-size:.9rem; line-height:1.55; color:var(--ai-navy-mut); font-weight:600; }
.aic-about-benefit-ic{
    width:32px; height:32px; border-radius:10px; flex-shrink:0; margin-top:1px;
    display:flex; align-items:center; justify-content:center; font-size:.86rem;
    background:linear-gradient(135deg, var(--ai-hero-pink-2), var(--ai-hero-navy-1)); color:#fff;
}

/* ---- AI Bootcamp Courses hub: soft-pink hero wash ----
   Light-touch only — the hub's existing hero layout, category pills,
   flip-card grid and all functionality are left completely untouched.
   Only a soft pink background wash + button accent are added so the
   discovery page reads as part of the same pink/navy system as the
   redesigned course detail pages. */
body.aic-courses-hub .aic-hero{
    background:linear-gradient(180deg, #FFF1F7 0%, #ffffff 85%);
}
body.aic-courses-hub .aic-hero-title .ai-pink-text{ color:var(--ai-hero-pink-2, #EC1968); }
body.aic-courses-hub .aic-hero-cta .ai-btn-primary{
    background:linear-gradient(115deg, var(--ai-hero-pink-1, #FF2A85) 0%, var(--ai-hero-pink-2, #EC1968) 100%);
}

/*==================================================
    BOOTCAMP TYPOGRAPHY VISIBILITY PASS
    Centralized here (loaded last, so it wins the cascade) rather
    than duplicated per rule across ai-bootcamp.css/ai-courses.css/
    ai-courses-v2.css. Bumps body/card/list/label text roughly one
    step larger, to semi-bold where it was default weight, and
    relies on the darker --ai-navy-mut (ai-bootcamp.css :root) for
    contrast. Headings, buttons and layout are untouched. Sizes use
    rem, not fixed px, so the "one step larger" scales correctly at
    every breakpoint instead of just adding a flat px offset.
==================================================*/
.aic-skill-card p,
.aic-invest-text p,
#aicSkills .aic-skill-card p,
.aic-why-card p,
.aic-progtri-req-item,
.aic-progtri-detail-row,
.aic-progtri-invest-tagline,
.aic-progtri-invest-row,
.aic-about-benefits li,
.aic-hero2-desc,
.aic-trio-card p,
.aic-faq-a-inner,
.aic-final-inner p{
    font-size:calc(1em + .06rem);
    font-weight:600;
}
.aic-progtri-detail-row strong,
.aic-invest-card-mode strong,
.aic-stat-label,
.aic-progtri-invest-row strong{
    font-weight:700;
}
/* breadcrumb + metadata labels — noticeably stronger than before,
   still visually secondary to headings */
.aic-hero2-breadcrumb a,
.aic-hero2-breadcrumb .is-current,
.aic-intake-badge{
    font-weight:700;
}

/* ==================================================
   APPLY NOW MODAL
   Shared across every bootcamp/course-detail page. Navy + pink +
   white theme matching the rest of the course-detail template.
   ================================================== */
body.acm-lock{
    overflow:hidden;
}
.acm-backdrop{
    position:fixed;
    inset:0;
    background:rgba(9,20,46,.62);
    backdrop-filter:blur(3px);
    z-index:9998;
    animation:acmFadeIn .18s ease both;
}
.acm-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
}
/* The [hidden] attribute must always win over the display:flex/block
   rules above — without this override, an author stylesheet rule
   beats the browser's default "[hidden]{display:none}" UA rule and
   the modal/backdrop stay permanently visible and occupying page
   space, even before the user clicks Apply Now. */
.acm-backdrop[hidden],
.acm-modal[hidden]{
    display:none !important;
}
.acm-panel{
    position:relative;
    width:100%;
    max-width:520px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    background:#fff;
    border-radius:20px;
    box-shadow:0 30px 70px rgba(9,20,46,.35);
    padding:34px 32px 30px;
    animation:acmPopIn .2s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes acmFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes acmPopIn{
    from{ opacity:0; transform:translateY(14px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
.acm-close{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#F1F4FA;
    color:#102A5C;
    font-size:1.5rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, color .15s ease;
}
.acm-close:hover{
    background:#102A5C;
    color:#fff;
}
.acm-head h2{
    margin:0 0 6px;
    font-size:1.4rem;
    font-weight:800;
    color:#102A5C;
    line-height:1.25;
    padding-right:30px;
}
.acm-head #acmCourseName{
    color:#E6007E;
}
.acm-head p{
    margin:0 0 20px;
    font-size:.88rem;
    color:#5b6478;
}
.acm-field{
    margin-bottom:14px;
}
.acm-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.acm-field label{
    display:block;
    font-size:.78rem;
    font-weight:700;
    color:#102A5C;
    margin-bottom:5px;
}
.acm-req{
    color:#E6007E;
}
.acm-field input,
.acm-field select,
.acm-field textarea{
    width:100%;
    border:1.5px solid #DCE3F0;
    border-radius:10px;
    padding:10px 12px;
    font-size:.92rem;
    font-family:inherit;
    color:#102A5C;
    background:#F9FAFD;
    transition:border-color .15s ease, background .15s ease;
}
.acm-field input:focus,
.acm-field select:focus,
.acm-field textarea:focus{
    outline:none;
    border-color:#102A5C;
    background:#fff;
}
.acm-field input[readonly]{
    background:#EEF1F8;
    color:#3b4763;
    cursor:not-allowed;
}
.acm-field textarea{
    resize:vertical;
    min-height:64px;
}
.acm-status{
    background:#FDEEF5;
    color:#B3005C;
    border:1px solid #F6C8DF;
    border-radius:10px;
    padding:10px 12px;
    font-size:.82rem;
    margin:0 0 14px;
}
.acm-submit{
    width:100%;
    border:none;
    border-radius:12px;
    padding:13px 18px;
    background:linear-gradient(135deg,#102A5C,#1B3E82);
    color:#fff;
    font-size:.95rem;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.acm-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(16,42,92,.3);
}
.acm-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.acm-success{
    text-align:center;
    padding:20px 6px 6px;
}
.acm-success i{
    font-size:2.6rem;
    color:#0CA678;
    margin-bottom:12px;
}
.acm-success h3{
    margin:0 0 8px;
    color:#102A5C;
    font-size:1.2rem;
    font-weight:800;
}
.acm-success p{
    margin:0;
    color:#5b6478;
    font-size:.9rem;
    line-height:1.5;
}
@media(max-width:640px){
    .acm-panel{
        padding:26px 20px 22px;
        border-radius:16px;
        max-height:calc(100vh - 24px);
    }
    .acm-row{
        grid-template-columns:1fr;
        gap:0;
    }
    .acm-head h2{
        font-size:1.2rem;
    }
}