/* ==========================================================================
   Future Makers Academy
   A brighter, softer register than the college site — rounder corners, warmer
   accents and more movement — while staying on the same navy + red identity so
   the two read as one institution.
   ========================================================================== */

.academy {
    --fma-red: #d8242a;
    --fma-red-dark: #ab181d;
    --fma-amber: #f5a524;
    --fma-sky: #2b7cd3;
    --fma-mint: #14b881;
    --fma-violet: #7c5cd6;
    --fma-ink: #0c1f33;
    --radius-fun: 26px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.fma-hero {
    position: relative; margin-top: var(--header-h); overflow: hidden;
    padding: 92px 0 104px; color: #fff;
    background:
        radial-gradient(1100px 600px at 82% 12%, rgba(216, 36, 42, .38) 0%, transparent 60%),
        radial-gradient(900px 520px at 8% 88%, rgba(43, 124, 211, .34) 0%, transparent 62%),
        linear-gradient(140deg, #08182a 0%, #0c1f33 48%, #14304f 100%);
}
.fma-hero::before {
    content: ''; position: absolute; inset: 0;
    background: var(--fma-hero-image, none) center/cover no-repeat;
    opacity: .2;
}
.fma-hero .container { position: relative; z-index: 3; }

/* Floating shapes. Purely decorative and never intercept a click. */
.fma-blob {
    /* Behind the copy (the container sits at z-index 3) and blurred well past
       legibility, so they read as atmosphere rather than shapes on the text.
       Positions hug the outer edges to stay clear of the headline column. */
    position: absolute; z-index: 1; border-radius: 50%;
    filter: blur(46px); opacity: .55; pointer-events: none;
    animation: fma-float 9s ease-in-out infinite;
}
.fma-blob.a { width: 200px; height: 200px; background: var(--fma-amber); top: 6%;  inset-inline-start: -60px; }
.fma-blob.b { width: 150px; height: 150px; background: var(--fma-mint);  bottom: 4%; inset-inline-start: -40px; animation-delay: -3s; }
.fma-blob.c { width: 260px; height: 260px; background: var(--fma-sky);   top: 8%;  inset-inline-end: -80px; animation-delay: -5s; }
.fma-blob.d { width: 180px; height: 180px; background: var(--fma-violet); bottom: 6%; inset-inline-end: 4%; animation-delay: -1.5s; }

@keyframes fma-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-26px) scale(1.07); }
}

.fma-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; }

.fma-seal { width: 168px; height: auto; margin-bottom: 22px; animation: fma-seal-in .9s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes fma-seal-in {
    from { opacity: 0; transform: scale(.7) rotate(-12deg); }
    to   { opacity: 1; transform: none; }
}

.fma-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 18px; border-radius: 100px; margin-bottom: 20px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .26);
    font-size: 13px; font-weight: 800; color: #fff;
}

.fma-hero h1 {
    color: #fff; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; margin-bottom: 18px;
}
.fma-hero h1 .pop {
    background: linear-gradient(120deg, var(--fma-amber), var(--fma-red) 60%, var(--fma-violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fma-slogan { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; color: var(--fma-amber); margin-bottom: 16px; }
.fma-hero p.lead { font-size: 17px; color: rgba(255, 255, 255, .88); max-width: 580px; margin-bottom: 30px; }

.fma-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

.btn-fma {
    background: linear-gradient(120deg, var(--fma-red), #f0534f);
    color: #fff; border: none; box-shadow: 0 10px 28px rgba(216, 36, 42, .4);
    border-radius: 100px;
}
.btn-fma:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(216, 36, 42, .5); }

.btn-fma-ghost {
    background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff; border-radius: 100px; backdrop-filter: blur(6px);
}
.btn-fma-ghost:hover { background: #fff; color: var(--fma-ink); border-color: #fff; }

/* Hero collage */
.fma-collage { position: relative; aspect-ratio: 1; }
.fma-collage img {
    position: absolute; border-radius: var(--radius-fun); object-fit: cover;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .38); border: 4px solid rgba(255, 255, 255, .16);
}
.fma-collage img:nth-child(1) { width: 62%; aspect-ratio: 4/3; top: 0; inset-inline-start: 0; animation: fma-float 11s ease-in-out infinite; }
.fma-collage img:nth-child(2) { width: 50%; aspect-ratio: 1;   top: 26%; inset-inline-end: 0; animation: fma-float 13s ease-in-out -2s infinite; }
.fma-collage img:nth-child(3) { width: 56%; aspect-ratio: 4/3; bottom: 0; inset-inline-start: 12%; animation: fma-float 12s ease-in-out -5s infinite; }

/* ── Section furniture ──────────────────────────────────────────────────── */
.fma-section { padding: 88px 0; }

/* Deep navy bands in the site's own colour, alternating with the white
   sections. Built in layers: a navy gradient base carrying a colour mesh,
   drifting auras beneath, and a confetti layer on top that clears the centre
   column so nothing crosses the copy. */
.fma-section.deep {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(58% 48% at 4% 2%,   rgba(245, 165, 36, .20), transparent 70%),
        radial-gradient(54% 46% at 96% 8%,  rgba(43, 124, 211, .34), transparent 70%),
        radial-gradient(50% 44% at 86% 98%, rgba(124, 92, 214, .26), transparent 70%),
        radial-gradient(48% 42% at 10% 99%, rgba(20, 184, 129, .10), transparent 70%),
        radial-gradient(70% 56% at 50% 44%, rgba(216, 36, 42, .12), transparent 76%),
        linear-gradient(168deg, #143050 0%, #0c1f33 48%, #081422 100%);
}

/* Two oversized blurred auras on a long drift, faded out top and bottom. */
.fma-section.deep::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side, rgba(43, 124, 211, .42), transparent) 12% 22% / 52% 60% no-repeat,
        radial-gradient(closest-side, rgba(216, 36, 42, .26), transparent) 88% 78% / 48% 56% no-repeat;
    filter: blur(70px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
    animation: fma-aura 24s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Confetti and dot grid above the auras. Two SVG tiles of different sizes
   overlap so the repeat period is long enough to read as scattered. */
.fma-section.deep::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='720'%3E%3Ccircle%20cx='84'%20cy='128'%20r='7'%20fill='%23ffc25c'%20opacity='.62'/%3E%3Ccircle%20cx='398'%20cy='58'%20r='11'%20fill='none'%20stroke='%235aa3e8'%20stroke-width='3'%20opacity='.55'/%3E%3Cpath%20d='M612%20214%20v24%20M600%20226%20h24'%20stroke='%23ff6b6f'%20stroke-width='3.4'%20stroke-linecap='round'%20opacity='.55'/%3E%3Ccircle%20cx='236'%20cy='330'%20r='5.5'%20fill='%23a68cf0'%20opacity='.6'/%3E%3Cpath%20d='M470%20402%20q11%20-13%2022%200%20q11%2013%2022%200'%20fill='none'%20stroke='%232ee0a2'%20stroke-width='3'%20stroke-linecap='round'%20opacity='.5'/%3E%3Cpath%20d='M118%20520%20l15%20-26%20l15%2026%20z'%20fill='%232ee0a2'%20opacity='.48'/%3E%3Ccircle%20cx='660'%20cy='596'%20r='9'%20fill='none'%20stroke='%23ffc25c'%20stroke-width='3'%20opacity='.58'/%3E%3Ccircle%20cx='330'%20cy='664'%20r='6'%20fill='%23ff6b6f'%20opacity='.5'/%3E%3Cpath%20d='M540%20690%20v20%20M530%20700%20h20'%20stroke='%23a68cf0'%20stroke-width='3'%20stroke-linecap='round'%20opacity='.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='540'%20height='540'%3E%3Cpath%20d='M62%2096%20l14%20-25%20l14%2025%20z'%20fill='%23ffc25c'%20opacity='.5'/%3E%3Ccircle%20cx='430'%20cy='176'%20r='6'%20fill='%23ff6b6f'%20opacity='.5'/%3E%3Ccircle%20cx='188'%20cy='268'%20r='9'%20fill='none'%20stroke='%23a68cf0'%20stroke-width='3'%20opacity='.56'/%3E%3Cpath%20d='M498%20352%20q11%20-13%2022%200'%20fill='none'%20stroke='%235aa3e8'%20stroke-width='3'%20stroke-linecap='round'%20opacity='.5'/%3E%3Ccircle%20cx='96'%20cy='430'%20r='5'%20fill='%232ee0a2'%20opacity='.6'/%3E%3Cpath%20d='M336%20486%20v20%20M326%20496%20h20'%20stroke='%23ffc25c'%20stroke-width='3'%20stroke-linecap='round'%20opacity='.54'/%3E%3C/svg%3E"),
        radial-gradient(circle, rgba(255, 255, 255, .13) 1.2px, transparent 1.4px);
    background-size: 720px 720px, 540px 540px, 24px 24px;
    background-position: 0 0, 260px 170px, 0 0;
    -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 46%, transparent 31%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .9) 67%, rgba(0, 0, 0, .9) 79%, transparent 100%);
            mask-image: radial-gradient(ellipse 76% 72% at 50% 46%, transparent 31%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .9) 67%, rgba(0, 0, 0, .9) 79%, transparent 100%);
    animation: fma-confetti 90s linear infinite;
    pointer-events: none;
}

@keyframes fma-aura {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 2.5%, 0) scale(1.12); }
}

@keyframes fma-confetti {
    from { background-position: 0 0, 260px 170px, 0 0; }
    to   { background-position: 720px -720px, -280px 710px, 0 0; }
}

/* Content rides above every layer. */
.fma-section.deep > .container { position: relative; z-index: 1; }

/* Copy inverts on the dark ground. */
.fma-section.deep .fma-head h2 { color: #fff; }
.fma-section.deep .fma-head p { color: rgba(255, 255, 255, .74); }
.fma-section.deep .fma-head .kicker { background: rgba(216, 36, 42, .28); color: #ffb3b6; }

/* The age cards are dark themselves, so they need a rim to lift off navy. */
.fma-section.deep .age-card {
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
}
.fma-section.deep .age-card:hover { box-shadow: 0 30px 62px rgba(0, 0, 0, .5); }

.fma-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.fma-head .kicker {
    display: inline-block; padding: 6px 16px; border-radius: 100px;
    background: rgba(216, 36, 42, .1); color: var(--fma-red-dark);
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 14px;
}
html[dir="rtl"] .fma-head .kicker { letter-spacing: 0; }
.fma-head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 12px; }
.fma-head p { font-size: 16.5px; color: var(--body); }

/* ── Age groups ─────────────────────────────────────────────────────────── */
.age-card {
    position: relative; border-radius: var(--radius-fun); overflow: hidden;
    min-height: 330px; display: flex; align-items: flex-end;
    color: #fff; transition: transform .35s cubic-bezier(.2,.8,.3,1.2), box-shadow .35s;
}
.age-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 26px 54px rgba(12, 31, 51, .3); }
.age-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.age-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8, 24, 42, .93) 8%, rgba(8, 24, 42, .35) 55%, transparent 100%);
}
.age-card-body { position: relative; z-index: 2; padding: 26px; width: 100%; }
.age-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 15px; border-radius: 100px; margin-bottom: 12px;
    font-size: 13px; font-weight: 800; color: #fff;
    background: var(--age-colour, var(--fma-red));
}
.age-card h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.age-card p { color: rgba(255, 255, 255, .86); font-size: 14.5px; }

/* ── Track cards ────────────────────────────────────────────────────────── */
.track-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-fun);
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
    transition: transform .32s cubic-bezier(.2,.8,.3,1.2), box-shadow .32s, border-color .32s;
}
.track-card:hover {
    transform: translateY(-7px); box-shadow: 0 24px 48px rgba(12, 31, 51, .16);
    border-color: rgba(216, 36, 42, .35);
}
.track-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--navy-50); }
.track-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.track-card:hover .track-media img { transform: scale(1.07); }
.track-icon {
    position: absolute; inset-block-start: -26px; inset-inline-start: 20px;
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(130deg, var(--fma-red), #f0534f); color: #fff;
    display: grid; place-items: center; font-size: 24px;
    box-shadow: 0 8px 20px rgba(216, 36, 42, .4); border: 3px solid #fff;
}
.track-body { position: relative; padding: 34px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.track-body h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.4; }
.track-body p { font-size: 14px; color: var(--body); flex: 1; margin-bottom: 14px; }

/* ── Programme cards ────────────────────────────────────────────────────── */
.prog-card {
    display: grid; grid-template-columns: 300px 1fr; gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-fun);
    overflow: hidden; transition: transform .32s, box-shadow .32s;
}
.prog-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(12, 31, 51, .18); }
.prog-media { position: relative; min-height: 240px; }
.prog-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prog-body { padding: 28px; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.prog-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px; border-radius: 100px; font-size: 12px; font-weight: 700;
    background: var(--navy-50); color: var(--navy);
}
.prog-chip.age { background: rgba(216, 36, 42, .1); color: var(--fma-red-dark); }
.prog-body h3 { font-size: 22px; margin-bottom: 6px; }
.prog-tagline { color: var(--fma-red-dark); font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }

/* ── Safety panel ───────────────────────────────────────────────────────── */
.safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.safety-item {
    display: flex; gap: 14px; padding: 22px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.safety-item i {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: rgba(20, 184, 129, .12); color: var(--fma-mint);
    display: grid; place-items: center; font-size: 21px;
}
.safety-item h4 { font-size: 15.5px; margin-bottom: 5px; }
.safety-item p { font-size: 13.8px; color: var(--body); }

/* ── Journey steps ──────────────────────────────────────────────────────── */
.journey { position: relative; display: grid; gap: 20px; }
.journey-step {
    display: flex; gap: 18px; padding: 20px 22px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .25s, border-color .25s;
}
.journey-step:hover { transform: translateX(4px); border-color: rgba(216, 36, 42, .4); }
html[dir="rtl"] .journey-step:hover { transform: translateX(-4px); }
.journey-num {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(130deg, var(--fma-red), #f0534f); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 16px;
}

/* ── Dashboard preview ──────────────────────────────────────────────────── */
.panel-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.panel-tile {
    padding: 24px; border-radius: var(--radius); background: #fff;
    border: 1px solid var(--line); transition: transform .28s, box-shadow .28s;
}
.panel-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.panel-tile i {
    width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px;
    display: grid; place-items: center; font-size: 23px;
    background: var(--tile-bg, var(--navy-50)); color: var(--tile-fg, var(--navy));
}
.panel-tile h4 { font-size: 16px; margin-bottom: 6px; }
.panel-tile p { font-size: 14px; color: var(--body); }

/* ── Enrolment form ─────────────────────────────────────────────────────── */
.fma-enrol {
    background: linear-gradient(140deg, #08182a, #0c1f33 55%, #14304f);
    border-radius: var(--radius-fun); padding: 44px; color: #fff;
    position: relative; overflow: hidden;
}
.fma-enrol::after {
    content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 36, 42, .35), transparent 70%);
    inset-inline-end: -140px; top: -160px;
}
.fma-enrol > * { position: relative; z-index: 2; }
.fma-enrol h2 { color: #fff; }
.fma-enrol .field-label { color: rgba(255, 255, 255, .9); }
.fma-enrol .input, .fma-enrol .select, .fma-enrol .textarea {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff;
}
.fma-enrol .input::placeholder, .fma-enrol .textarea::placeholder { color: rgba(255, 255, 255, .55); }
.fma-enrol .input:focus, .fma-enrol .select:focus, .fma-enrol .textarea:focus {
    border-color: var(--fma-amber); box-shadow: 0 0 0 3px rgba(245, 165, 36, .25);
}
.fma-enrol .select option { color: var(--fma-ink); background: #fff; }
.fma-enrol .checkbox-row { color: rgba(255, 255, 255, .9); font-size: 13.8px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .fma-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .fma-collage { max-width: 460px; margin-inline: auto; }
    .prog-card { grid-template-columns: 1fr; }
    .prog-media { min-height: 200px; }
}

@media (max-width: 700px) {
    .fma-hero { padding: 60px 0 70px; }
    .fma-section { padding: 56px 0; }
    .fma-enrol { padding: 26px 20px; }
    .fma-blob { display: none; }
}

/* Motion is decoration here; remove it entirely when asked to. */
@media (prefers-reduced-motion: reduce) {
    .fma-blob, .fma-collage img, .fma-seal,
    .fma-section.deep::before,
    .fma-section.deep::after { animation: none !important; }
}