/* ===== AeRoCAD Learners — Template C (angular light) + Dark mode ===== */
:root{
  --purple:#5b3a8c; --purple-dk:#3d2560; --purple-lt:#7a57ad;
  --lav:#ede5f5; --lav2:#d9c7ef;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#faf8fd;
  --text:#2c2440; --muted:#6a6280; --border:#ede5f5;
  --num:#d9c7ef;                 /* big step numerals */
  --header-bg:rgba(255,255,255,.92);
  --enrol-bg:#3d2560;            /* deep purple, stays dark in both themes */
  --radius:16px; --maxw:1300px;
  --shadow:0 14px 40px rgba(45,20,70,.14);
}
/* Dark palette — applied ONLY when the user picks dark via the toggle.
   The site always starts in light mode regardless of the device setting. */
:root[data-theme="dark"]{
  --purple:#8a63c9; --purple-dk:#6f4bad; --purple-lt:#a884de;
  --lav:#241c38; --lav2:#3a2d59;
  --bg:#141019; --surface:#1e1830; --surface-2:#191324;
  --text:#f1ecf8; --muted:#b6abc9; --border:#2f2545;
  --num:#5a4a80;
  --header-bg:rgba(20,16,25,.9);
  --enrol-bg:#221a34;
  --shadow:0 14px 40px rgba(0,0,0,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.55;overflow-x:hidden;
  transition:background .3s,color .3s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:78px 0}
.alt-bg{background:var(--surface-2)}
.eyebrow{font-weight:700;letter-spacing:3px;font-size:13px;text-transform:uppercase;color:var(--purple-lt)}
h2.title{font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.08;letter-spacing:-.5px;margin:8px 0 10px;color:var(--text)}
.lead{color:var(--muted);font-size:18px;max-width:640px}
.hl{background:var(--purple);color:#fff;padding:2px 10px;border-radius:6px;white-space:nowrap;
  margin-left:-10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:40px;border:2px solid transparent;cursor:pointer;transition:.2s}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:var(--purple-dk)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{filter:brightness(.93)}
.btn-ghost{background:transparent;color:var(--purple);border-color:var(--lav2)}
.btn-ghost:hover{background:var(--lav)}
.btn svg{width:20px;height:20px;fill:currentColor}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;border-radius:50%;border:2px solid var(--lav2)}
.brand b{font-family:'Lobster',cursive;font-weight:400;font-style:normal;font-size:26px;
  letter-spacing:.3px;color:var(--purple)}
.brand b span{color:var(--text)}
.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.nav-links a{font-weight:500;color:var(--text);white-space:nowrap}
.nav-links a:hover{color:var(--purple)}
.nav-cta{display:inline-flex;color:#fff}
.nav-links a.nav-cta{color:#fff}
/* fun sliding sun/moon theme switch */
.theme-switch{position:relative;width:64px;height:32px;border-radius:20px;border:none;cursor:pointer;
  padding:0;flex:none;background:linear-gradient(120deg,#ffd05e,#ffb347);transition:background .3s}
.theme-switch:hover{filter:brightness(1.04)}
.theme-switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.5,1.6,.5,1);
  box-shadow:0 2px 6px rgba(0,0,0,.28)}
.theme-switch .knob svg{width:16px;height:16px}
.theme-switch .knob .sun{fill:#f59e0b;display:block}
.theme-switch .knob .moon{fill:#5b3a8c;display:none}
:root[data-theme="dark"] .theme-switch{background:linear-gradient(120deg,#3d2560,#7a57ad)}
:root[data-theme="dark"] .theme-switch .knob{left:35px}
:root[data-theme="dark"] .theme-switch .knob .sun{display:none}
:root[data-theme="dark"] .theme-switch .knob .moon{display:block}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:26px;height:3px;background:var(--text);border-radius:2px;margin:5px 0}

/* ===== hero ===== */
.hero{position:relative;padding:64px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-160px;right:-160px;width:460px;height:460px;
  background:var(--lav);transform:rotate(45deg);z-index:0}
.hero::after{content:"";position:absolute;top:-200px;right:-210px;width:380px;height:380px;
  background:var(--lav2);transform:rotate(45deg);z-index:0}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.hero h1{font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-1px;margin:14px 0 18px;color:var(--text)}
.hero .lead{font-size:19px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-media{position:relative}
.hero-media .frame{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero-media img{width:100%;height:440px;object-fit:cover}
.hero-media .tri{position:absolute;left:0;bottom:0;width:0;height:0;
  border-left:190px solid var(--purple);border-top:96px solid transparent}
.hero-media .chip{position:absolute;left:20px;bottom:20px;color:#fff;font-weight:700;
  letter-spacing:2px;font-size:14px}
.hero-media .chip span{color:var(--lav2)}

/* ===== mission & vision ===== */
.mv{background:var(--lav)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv-card{background:var(--surface);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);
  border-top:5px solid var(--purple)}
.mv-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:14px;background:var(--lav);margin-bottom:16px}
.mv-ico svg{width:30px;height:30px;fill:var(--purple)}
.mv-card h3{font-size:24px;color:var(--purple);margin-bottom:8px}
.mv-card p{color:var(--muted);font-size:17px}

/* ===== steps ===== */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 6px 20px rgba(45,20,70,.05)}
.step-img{width:calc(100% + 56px);height:184px;object-fit:cover;
  margin:-28px -28px 20px;border-radius:15px 15px 0 0;display:block}
.step .no{font-weight:800;font-size:34px;color:var(--num)}
.step h3{font-size:22px;color:var(--purple);margin:2px 0 8px}
.step p{color:var(--muted)}

/* ===== team ===== */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.member{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;text-align:center;box-shadow:0 6px 20px rgba(45,20,70,.05)}
.avatar{width:92px;height:92px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:30px;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--purple-lt))}
.member h3{font-size:20px;color:var(--text);margin-bottom:2px}
.member .role{font-weight:600;color:var(--purple);font-size:14px;letter-spacing:.5px;margin-bottom:10px}
.member p{color:var(--muted);font-size:15px}

/* ===== showcase video ===== */
.showcase .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.showcase video{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);background:#000}
.showcase .badge{display:inline-block;background:var(--lav);color:var(--purple);font-weight:600;
  padding:6px 14px;border-radius:30px;font-size:14px;margin-bottom:14px}

/* ===== programs ===== */
.pills{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px}
.pill{background:var(--purple);color:#fff;font-weight:600;padding:10px 20px;border-radius:30px}
.pill.alt{background:var(--lav2);color:var(--purple-lt)}
.prog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
.prog{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--purple);
  border-radius:14px;padding:24px}
.prog h3{font-size:20px;margin-bottom:6px;color:var(--text)}
.prog p{color:var(--muted)}

/* ===== gallery ===== */
.gallery{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:26px}
.gallery img{width:100%;height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:0 8px 24px rgba(45,20,70,.10)}
/* creative masonry gallery — varied heights */
.masonry{column-count:3;column-gap:16px;margin-top:26px}
.masonry img{width:100%;margin:0 0 16px;border-radius:14px;display:block;
  break-inside:avoid;box-shadow:0 8px 24px rgba(45,20,70,.10)}

/* ===== enrol (white text on deep purple) ===== */
.enrol{background:var(--enrol-bg)}
.enrol .eyebrow{color:var(--lav2)}
.enrol .title{color:#ffffff}
.enrol .lead{color:#e3d7f2}
.enrol-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:34px;align-items:stretch}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field.full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--text)}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:10px;background:var(--surface);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(138,99,201,.25)}
textarea{min-height:96px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0}
/* white, high-visibility submit button inside the purple enrol section */
#submitBtn{background:#ffffff;color:var(--purple);border:2px solid var(--purple);
  box-shadow:0 6px 18px rgba(45,20,70,.12)}
#submitBtn:hover{background:var(--purple);color:#ffffff}
.form-note{font-size:13px;color:var(--muted);margin-top:6px}
.form-msg{display:none;margin-top:14px;padding:14px 16px;border-radius:10px;font-weight:600}
.form-msg.ok{display:block;background:#e6f7ec;color:#1b7a41;border:1px solid #bfe9cd}
.form-msg.err{display:block;background:#fdecec;color:#b3261e;border:1px solid #f6c9c6}
.aside{background:var(--purple);color:#fff;border-radius:var(--radius);padding:32px}
.aside h3{font-size:24px;margin-bottom:10px;color:#fff}
.aside p{color:var(--lav2);margin-bottom:18px}
.aside .contact{display:flex;flex-direction:column;gap:12px;margin-top:20px;font-weight:500}
.aside .contact a{display:flex;align-items:center;gap:10px;color:#fff}
.aside .contact svg{width:20px;height:20px;fill:var(--lav2);flex:none}
.aside .btn-wa{width:100%;justify-content:center;margin-top:8px}

/* ===== footer ===== */
.site-footer{background:var(--purple-dk);color:#fff;padding:48px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.site-footer .brand b{color:#fff}.site-footer .brand b span{color:var(--lav2)}
.site-footer p{color:var(--lav2);margin-top:12px;max-width:340px}
.site-footer h4{font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--lav2);margin-bottom:12px}
.site-footer a{display:block;color:#efe7f8;margin-bottom:9px}
.site-footer a:hover{color:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;
  text-align:center;color:var(--lav2);font-size:14px}

/* ===== hero liveliness ===== */
.hero{background:radial-gradient(1100px 480px at 88% -8%, var(--lav), transparent 62%)}
.hl{background:linear-gradient(120deg,var(--purple),var(--purple-lt))}
/* heavy display font used for playful accents in a few places */
.step .no, .hero-media .chip{font-family:'Titan One','Poppins',sans-serif;font-weight:400}
.hero-media .chip{letter-spacing:1px}

/* faded plane silhouettes in the hero background */
.hero-plane{position:absolute;fill:var(--purple);opacity:.06;z-index:0;pointer-events:none}
.hero-plane.p1{width:300px;top:38px;left:-46px;transform:rotate(-6deg)}
.hero-plane.p2{width:170px;bottom:24px;left:40%;transform:rotate(14deg);opacity:.05}
.hero-trail{position:absolute;top:70px;left:-10px;width:600px;height:220px;z-index:0;
  stroke:var(--purple);opacity:.16;pointer-events:none}
:root[data-theme="dark"] .hero-plane{opacity:.09}
:root[data-theme="dark"] .hero-trail{opacity:.22}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip-skill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1.5px solid var(--border);color:var(--text);font-weight:600;font-size:14px;
  padding:8px 15px;border-radius:30px;box-shadow:0 4px 14px rgba(45,20,70,.06)}
.chip-skill i{width:8px;height:8px;border-radius:50%;background:var(--purple);display:inline-block}
.hero-badge{position:absolute;top:-18px;left:-18px;background:var(--surface);border-radius:16px;
  box-shadow:var(--shadow);padding:13px 18px;display:flex;align-items:center;gap:13px;z-index:4;
  animation:floaty 5s ease-in-out infinite}
.hero-badge .ic{width:44px;height:44px;border-radius:50%;background:var(--purple);display:flex;
  align-items:center;justify-content:center;flex:none}
.hero-badge .ic svg{width:23px;height:23px;fill:#fff}
.hero-badge b{display:block;font-size:14px;color:var(--text);line-height:1.15}
.hero-badge span{font-size:12px;color:var(--muted)}
.hero-stat{position:absolute;right:-14px;bottom:60px;background:var(--purple);color:#fff;
  border-radius:16px;box-shadow:var(--shadow);padding:14px 20px;text-align:center;z-index:4;
  animation:floaty 6.5s ease-in-out infinite}
.hero-stat{text-align:left;max-width:180px}
.hero-stat b{display:block;font-size:19px;line-height:1.1;font-weight:800}
.hero-stat span{font-size:12px;color:var(--lav2)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.hero-badge,.hero-stat{animation:none}}

/* discipline tool tags on the step cards */
.step .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.step .tags span{font-size:12px;font-weight:600;color:var(--purple);background:var(--lav);
  padding:4px 11px;border-radius:20px}

/* team photos + credential */
.team-grid{grid-template-columns:repeat(2,1fr);max-width:860px;margin-left:auto;margin-right:auto}
.member .photo{width:158px;height:158px;border-radius:50%;object-fit:cover;
  margin:0 auto 18px;display:block;border:5px solid var(--lav)}
.member .role{margin-bottom:12px}
.member .cred{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--purple);
  background:var(--lav);padding:7px 13px;border-radius:20px}

/* competencies chips */
.comp-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.comp{display:inline-flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-weight:600;color:var(--text)}
.comp svg{width:20px;height:20px;fill:var(--purple);flex:none}

/* impact / SDG band */
.impact{background:var(--purple)}
.impact .eyebrow{color:var(--lav2)}
.impact .title{color:#fff}
.impact .lead{color:#e8ddf6}
.sdg{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sdg span{background:rgba(255,255,255,.15);color:#fff;font-weight:600;padding:10px 17px;
  border-radius:30px;font-size:14.5px}

/* language selector */
.lang{display:inline-flex;gap:2px;background:var(--lav);border-radius:20px;padding:3px;flex:none}
.lang button{border:none;background:transparent;color:var(--muted);font:inherit;font-weight:600;
  font-size:13px;padding:5px 10px;border-radius:16px;cursor:pointer;transition:.2s}
.lang button.active{background:var(--purple);color:#fff}

/* footer socials */
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;margin:0;transition:.2s}
.socials a:hover{background:var(--purple-lt)}
.socials svg{width:19px;height:19px;fill:#fff}

/* faded decorative shapes on plain white sections */
.softbg{position:relative;overflow:hidden}
.softbg > .container{position:relative;z-index:2}
.softbg::before,.softbg::after{content:"";position:absolute;border-radius:50%;
  background:var(--lav);opacity:.55;z-index:0;pointer-events:none}
.softbg::before{width:360px;height:360px;top:-130px;right:-100px}
.softbg::after{width:240px;height:240px;bottom:-110px;left:-90px}
.softbg .splane{position:absolute;fill:var(--purple);opacity:.05;z-index:0;pointer-events:none;
  width:180px;bottom:20px;right:8%}
:root[data-theme="dark"] .softbg::before,:root[data-theme="dark"] .softbg::after{opacity:.4}

/* centre the founders (team) section header */
#team .eyebrow,#team .title{text-align:center}
#team .lead{text-align:center;margin-left:auto;margin-right:auto}

/* ===== responsive ===== */
@media (max-width:900px){
  .hero .container,.showcase .container,.enrol-grid,.mv-grid{grid-template-columns:1fr}
  .hero::before,.hero::after{display:none}
  .steps-grid,.prog-grid,.team-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .nav-links{position:fixed;inset:72px 0 auto 0;background:var(--bg);flex-direction:column;
    gap:0;padding:8px 0;border-bottom:1px solid var(--border);transform:translateY(-140%);
    transition:.28s;box-shadow:var(--shadow)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 22px;width:100%}
  .nav-links .nav-cta{margin:10px 22px}
  .nav-links .theme-switch{margin:10px 22px}
  .nav-links .lang{margin:8px 22px}
  .hero-plane.p2{display:none}
  .masonry{column-count:2}
  .hamburger{display:block}
  .hero-media img{height:320px}
  .hero-badge,.hero-stat{display:none}
  .team-grid{grid-template-columns:1fr;max-width:420px}
  .form-row{grid-template-columns:1fr}
}

/* Collapse the menu into the hamburger below 1180px, so the Student login link
   and the longer French and Portuguese labels never run off the screen. */
@media (max-width:1180px){
  .nav-links{position:fixed;inset:72px 0 auto 0;background:var(--bg);flex-direction:column;
    gap:0;padding:8px 0;border-bottom:1px solid var(--border);transform:translateY(-140%);
    transition:.28s;box-shadow:var(--shadow)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 22px;width:100%}
  .nav-links .nav-cta{margin:10px 22px}
  .nav-links .theme-switch{margin:10px 22px}
  .nav-links .lang{margin:8px 22px}
  .hamburger{display:block}
}