@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   TrainingComplex shared design system.
   Loaded by every page via <link rel="stylesheet" href="assets/site.css">.
   Contains only rules that are identical (or near-identical) across pages —
   page-specific layout (heroes, accordions, wizards, admin dashboard, etc.)
   stays inline in each page's own <style> block.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --primary:#0B1F4B;
  --primary-light:#1E4374;
  --accent:#0C6E70;
  --accent-dark:#084F51;
  --accent2:#1db954;
  --gold:#CC9226;
  --light:#F5F7FA;
  --white:#fff;
  --text:#10182E;
  --muted:#47536A;
  --border:#E2E7EF;
  --card-shadow:0 4px 20px rgba(11,31,75,.07);
  --card-shadow-hover:0 22px 56px rgba(11,31,75,.17);
  --radius:14px;
  --radius-lg:20px;
  --transition:.28s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--text);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:'cv02','cv03','cv04','cv11';}
h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em;}

/* focus-visible baseline (Phase 6) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}

/* ── TOP BAR ── */
.topbar{background:var(--primary);color:#cdd8e8;font-size:.8rem;padding:.45rem 0;overflow:hidden;}
.topbar .inner{max-width:1280px;margin:auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:1.5rem;min-width:0;}
.topbar a{color:#cdd8e8;text-decoration:none;white-space:nowrap;}
.topbar a:hover{color:var(--accent);}
.top-links{display:flex;gap:2.5rem;align-items:center;white-space:nowrap;flex:1;justify-content:center;min-width:0;}
.top-links+.top-links{flex:0 0 auto;justify-content:flex-end;}
.top-links span{display:flex;align-items:center;gap:.3rem;white-space:nowrap;flex-shrink:0;}

/* ── NAV ── */
nav{background:var(--white);position:sticky;top:0;z-index:999;box-shadow:0 1px 0 rgba(11,31,75,.08),0 4px 20px rgba(11,31,75,.05);}
.nav-inner{max-width:1280px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:48px;}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1rem;letter-spacing:-.5px;}
.logo-img{height:44px;width:auto;display:block;object-fit:contain;}
.logo-text{line-height:1.15;}
.logo-text strong{display:block;font-size:1rem;color:var(--primary);font-weight:800;}
.logo-text span{font-size:.72rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.nav-links{display:flex;flex:1;gap:.1rem;list-style:none;align-items:center;justify-content:space-evenly;}
.nav-links li{position:relative;}
.nav-links a{padding:.5rem .9rem;font-size:.88rem;font-weight:600;color:var(--primary);text-decoration:none;border-radius:6px;display:flex;align-items:center;gap:.3rem;transition:background var(--transition),color var(--transition);}
.nav-links a:hover,.nav-links a.active{background:var(--light);color:var(--accent);}
.nav-link-icon{width:14px;height:14px;flex-shrink:0;vertical-align:-2px;margin-right:.35rem;}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.13);min-width:220px;z-index:999;padding:.5rem 0;border-top:3px solid var(--accent);}
.nav-links li:hover .dropdown{display:block;}
.dropdown a{padding:.55rem 1.1rem;font-weight:500;border-radius:0;display:block;}
.nav-cta{background:var(--accent);color:#fff!important;border-radius:8px!important;padding:.5rem 1.2rem!important;font-weight:700!important;}
.nav-cta:hover{background:var(--accent-dark)!important;color:#fff!important;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;}
.hamburger span{width:24px;height:2.5px;background:var(--primary);border-radius:2px;transition:var(--transition);}

/* ── MOBILE NAV ── */
.mobile-menu{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background:var(--white);z-index:1000;flex-direction:column;padding:1.5rem;overflow-y:auto;}
.mobile-menu.open{display:flex;}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;}
.close-btn{font-size:1.5rem;cursor:pointer;color:var(--primary);}
.mobile-nav-links{list-style:none;display:flex;flex-direction:column;gap:.3rem;}
.mobile-nav-links a{display:block;padding:.8rem 1rem;font-weight:600;color:var(--primary);text-decoration:none;border-radius:8px;font-size:1rem;}
.mobile-nav-links a:hover{background:var(--light);}

/* ── BREADCRUMB ── */
.breadcrumb{padding:.6rem 0;}
.breadcrumb.bc-light{background:var(--light);border-bottom:1px solid var(--border);}
.breadcrumb .inner{max-width:1280px;margin:auto;padding:0 24px;font-size:.82rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.breadcrumb .inner svg{width:13px;height:13px;flex-shrink:0;}
.breadcrumb a{display:inline-flex;align-items:center;gap:.35rem;color:var(--primary);text-decoration:none;font-weight:600;transition:color var(--transition);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{color:#c7ccd4;font-size:.72rem;}
.breadcrumb .current{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);font-weight:700;}
.breadcrumb.bc-dark{color:rgba(255,255,255,.7);}
.breadcrumb.bc-dark a{color:#fff;}
.breadcrumb.bc-dark a:hover{color:var(--accent);}
.breadcrumb.bc-dark .sep{color:rgba(255,255,255,.4);}
.breadcrumb.bc-dark .current{color:#fff;}

/* ── PAGE HERO — shared banner for every inner page, matching Home's .hero
   look (same overlay gradient, typography, wave divider) so the banner no
   longer changes style as you move between nav tabs. Home itself keeps its
   own full-height video hero in Frontend.html; this is the compact version
   used everywhere else. An optional .page-hero-media (video or image) can
   sit behind the overlay for pages that have their own footage/photo. ── */
.page-hero{color:#fff;padding:2.4rem 0 5.5rem;position:relative;overflow:hidden;background:var(--primary);}
.page-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.page-hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to right,rgba(5,14,32,.95) 0%,rgba(5,14,32,.85) 30%,rgba(5,14,32,.5) 58%,rgba(5,14,32,.25) 80%,rgba(5,14,32,.01) 100%);}
.page-hero .container{position:relative;z-index:2;}
.page-hero .breadcrumb{padding:0 0 2.2rem;}
.page-hero .breadcrumb .inner{padding:0;max-width:none;}
.page-hero-content{max-width:760px;margin:0 auto;text-align:center;}
.page-hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(12,110,112,.15);border:1px solid rgba(12,110,112,.4);color:#7dd3f8;border-radius:50px;padding:.32rem .95rem;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.2rem;}
.page-hero-badge svg{width:14px;height:14px;}
.page-hero h1{font-size:clamp(2.1rem,4.2vw,3.1rem);font-weight:900;line-height:1.18;letter-spacing:.01em;margin-bottom:1rem;}
.page-hero h1 span{
  background:linear-gradient(90deg,var(--accent) 0%,#ffd27a 30%,var(--accent) 60%,#ffd27a 90%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:pageHeroShimmer 4s linear infinite;
}
@keyframes pageHeroShimmer{0%{background-position:0% center;}100%{background-position:200% center;}}
.page-hero p{font-size:1.02rem;color:#b8cce4;line-height:1.75;max-width:640px;margin:0 auto;}
.page-hero-actions{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem;}
.page-hero-perks{display:flex;justify-content:center;gap:1.8rem;flex-wrap:wrap;margin-top:1.6rem;}
.page-hero-perk{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:#cfe0f2;}
.page-hero-perk svg{color:var(--accent2);flex-shrink:0;}
.page-hero-wave{position:absolute;left:0;bottom:-1px;width:100%;height:50px;display:block;z-index:2;}
@media(max-width:600px){
  .page-hero{padding:1.8rem 0 4.2rem;}
  .page-hero-actions{margin-top:1.4rem;}
}

/* ── SECTION COMMONS ── */
section{padding:72px 0;}
.container{max-width:1280px;margin:auto;padding:0 24px;}
.section-label{display:inline-block;background:rgba(12,110,112,.09);color:var(--accent);border-radius:50px;padding:.32rem 1rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem;border:1px solid rgba(12,110,112,.2);}
.section-title{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;color:var(--primary);margin-bottom:.65rem;line-height:1.18;letter-spacing:-0.03em;}
.section-sub{color:var(--muted);font-size:.95rem;max-width:560px;line-height:1.75;}
.section-head{margin-bottom:3rem;}

/* ── TRUST BAR (reused on Frontend, Course Details, Contact Us) ── */
.trust{background:var(--light);padding:28px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;}
.trust .inner{max-width:1280px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap;}
.trust-item{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;color:var(--primary);}
.trust-item .icon{width:32px;height:32px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.55rem;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;border:none;text-decoration:none;transition:all var(--transition);letter-spacing:-0.01em;}
.btn-primary{background:linear-gradient(135deg,#0C6E70 0%,#0d8bd4 100%);color:#fff;box-shadow:0 4px 16px rgba(12,110,112,.28);}
.btn-primary:hover{background:linear-gradient(135deg,#084F51 0%,#0a6fa6 100%);box-shadow:0 10px 28px rgba(12,110,112,.4);transform:translateY(-2px);}
.btn-outline{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);}
.btn-outline:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.65);transform:translateY(-1px);}
.btn-enroll{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:.48rem 1.05rem;font-size:.8rem;font-weight:700;cursor:pointer;transition:all var(--transition);}
.btn-enroll:hover{background:var(--accent);transform:translateY(-1px);}

/* ── COURSE / SCHEDULE CARDS ── */
.course-grid-wrap{position:relative;}
.course-grid-wrap.course-grid-expanded{max-height:72vh;overflow-y:auto;overflow-x:hidden;padding:4px 6px 12px;border-radius:var(--radius);scroll-behavior:smooth;border:1px solid rgba(11,31,75,.06);box-shadow:inset 0 -18px 30px -10px rgba(11,31,75,.06);}
.course-grid-wrap.course-grid-expanded::-webkit-scrollbar{width:6px;}
.course-grid-wrap.course-grid-expanded::-webkit-scrollbar-track{background:#f4f6fa;border-radius:99px;}
.course-grid-wrap.course-grid-expanded::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px;}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:860px){.course-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.course-grid{grid-template-columns:1fr;}}
.course-card{background:#fff;border-radius:16px;box-shadow:var(--card-shadow);overflow:hidden;transition:all .38s cubic-bezier(.22,1,.36,1);cursor:pointer;display:flex;flex-direction:column;border:1px solid rgba(11,31,75,.06);position:relative;}
.course-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--primary-light));border-radius:16px 16px 0 0;opacity:0;transition:opacity .3s ease;}
.course-card:hover{transform:translateY(-10px);box-shadow:var(--card-shadow-hover);border-color:rgba(12,110,112,.15);z-index:2;}
.course-card:hover::before{opacity:1;}
.course-thumb{height:175px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden;}
.course-thumb.has-banner{background-size:cover;background-position:center;align-items:flex-end;justify-content:flex-start;}
.course-thumb-cat-pill{position:absolute;top:10px;right:10px;background:rgba(12,110,112,.92);color:#fff;border-radius:50px;font-size:.62rem;font-weight:800;padding:.2rem .7rem;text-transform:uppercase;letter-spacing:.04em;backdrop-filter:blur(4px);}
.course-thumb-emoji-badge{position:relative;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(11,31,75,.25);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin:0 0 12px 12px;}
.course-tag{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;border-radius:50px;font-size:.62rem;font-weight:800;padding:.2rem .7rem;text-transform:uppercase;letter-spacing:.04em;}
.course-tag.online{background:#1db954;}
.course-tag.hybrid{background:#7c3aed;}
.course-body{padding:1.15rem 1.25rem 1rem;flex:1;display:flex;flex-direction:column;}
.course-cat{font-size:.67rem;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem;}
.course-body h3{font-size:.95rem;font-weight:800;color:var(--primary);margin-bottom:.42rem;line-height:1.38;letter-spacing:-0.01em;}
.course-body p{font-size:.8rem;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;}
.course-body p.desc-expanded{display:block;-webkit-line-clamp:unset;}
.desc-toggle{background:none;border:none;color:var(--accent);font-size:.74rem;font-weight:700;cursor:pointer;padding:.2rem 0 0;text-align:left;display:inline-block;}
.course-meta{display:flex;gap:.6rem;margin:.65rem 0 0;flex-wrap:wrap;}
.course-meta span{font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:.2rem;}
.course-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.78rem;border-top:1px solid rgba(11,31,75,.06);margin-top:auto;}
.course-footer .cf-label{font-size:.72rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;}
.course-footer .cf-arrow{font-size:1rem;color:var(--accent);transition:transform .28s ease;}
.course-card:hover .cf-arrow{transform:translateX(5px);}
.course-meta span.rating{color:#f5b800;font-weight:700;}

/* ── FOOTER (shared declarations; column count is a page-local override) ── */
footer{background:linear-gradient(160deg,#0B1F4B 0%,#0b2340 60%,#0d2d50 100%);color:#8fafd4;padding:64px 0 0;}
.footer-grid{max-width:1280px;margin:auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;}
.footer-grid.footer-grid--3col{grid-template-columns:2fr 1fr 1fr;}
.footer-brand p{font-size:.85rem;line-height:1.7;margin:1rem 0;}
.footer-social{display:flex;gap:.7rem;margin-top:.5rem;}
.social-btn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#8fafd4;font-size:.85rem;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);text-decoration:none;}
.social-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.25);}
.social-btn svg{width:17px;height:17px;}
footer h4{color:#fff;font-size:.9rem;font-weight:700;margin-bottom:1rem;}
footer ul{list-style:none;}
footer ul li{margin-bottom:.5rem;}
footer ul li a{color:#8fafd4;text-decoration:none;font-size:.83rem;transition:color var(--transition);}
footer ul li a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding:1.2rem 24px;max-width:1280px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:#8fafd4;}
.footer-bottom-links{display:flex;gap:1.2rem;margin-right:70px;}
.footer-bottom-links a{color:#8fafd4;text-decoration:none;}
.footer-bottom-links a:hover{color:var(--accent);}

/* Newsletter signup form */
.footer-newsletter{margin-top:1.2rem;}
.footer-newsletter form{display:flex;gap:.5rem;flex-wrap:wrap;}
.footer-newsletter input[type=email],.footer-newsletter input[type=text]{flex:1;min-width:130px;padding:.6rem .8rem;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-size:.83rem;outline:none;transition:border-color .2s;}
.footer-newsletter input[type=email]::placeholder,.footer-newsletter input[type=text]::placeholder{color:#8fafd4;}
.footer-newsletter input[type=email]:focus,.footer-newsletter input[type=text]:focus{border-color:var(--accent);}
.footer-newsletter button{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:.6rem 1rem;font-weight:700;font-size:.83rem;cursor:pointer;transition:background var(--transition);}
.footer-newsletter button:hover{background:var(--accent-dark);}
.footer-newsletter .fn-msg{font-size:.78rem;margin:0;min-height:0;padding:0;line-height:0;}
.footer-newsletter .fn-msg:not(:empty){line-height:1.4;margin-top:.4rem;}
.footer-newsletter .fn-msg.ok{color:#6ee7a0;}
.footer-newsletter .fn-msg.err{color:#fca5a5;}

/* ── AUTH MODAL (Frontend + Contact Us) ── */
body.auth-locked{overflow:hidden;}
.page-fade{transition:filter .35s ease,opacity .35s ease,transform .35s ease;}
body.auth-locked .page-fade{filter:blur(3px);opacity:.55;transform:scale(.99);}
.auth-overlay{position:fixed;inset:0;background:rgba(11,31,75,.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:2000;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;}
.auth-overlay.open{opacity:1;visibility:visible;}
.auth-wrap{position:relative;width:100%;max-width:420px;max-height:90vh;background:#fff;border-radius:18px;overflow-y:auto;overflow-x:hidden;box-shadow:0 24px 64px rgba(11,31,75,.3);transform:scale(.9) translateY(12px);transition:transform .35s cubic-bezier(.4,0,.2,1);}
.auth-overlay.open .auth-wrap{transform:scale(1) translateY(0);}
.auth-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;z-index:1;transition:background var(--transition);}
.auth-close:hover{background:rgba(255,255,255,.3);}
.auth-header{position:relative;background:linear-gradient(135deg,var(--primary) 0%,#15315F 55%,var(--primary-light) 100%);padding:2.6rem 2rem 3rem;text-align:center;color:#fff;overflow:hidden;}
.auth-header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;}
.auth-avatar{position:relative;width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-weight:900;font-size:1.2rem;color:var(--primary);box-shadow:0 8px 20px rgba(0,0,0,.18);letter-spacing:-.5px;overflow:hidden;}
.auth-avatar img{width:72%;height:72%;object-fit:contain;}
.auth-header h2{position:relative;font-size:1.55rem;font-weight:900;margin-bottom:.4rem;}
.auth-header p{position:relative;font-size:.88rem;color:#cdd8e8;margin:0;}
.auth-divider-circle{width:34px;height:34px;border-radius:50%;background:#fff;margin:-17px auto 0;box-shadow:0 4px 10px rgba(11,31,75,.12);position:relative;}
.auth-body{padding:2.1rem 2.1rem 1.8rem;}
.auth-field{margin-bottom:1.1rem;}
.auth-field.pw-field{position:relative;}
.auth-field.pw-field input{padding-right:2.8rem;}
.auth-field .pw-toggle{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;color:#9aa3af;display:flex;align-items:center;}
.auth-field .pw-toggle:hover{color:var(--accent);}
.auth-field .pw-toggle svg{width:19px;height:19px;}
.auth-field input{width:100%;padding:.9rem 1.1rem;border:1.5px solid var(--border);border-radius:10px;background:var(--light);font-size:.92rem;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;}
.auth-field input::placeholder{color:#9aa3af;}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,110,112,.15);background:#fff;}
.auth-field textarea{width:100%;padding:.9rem 1.1rem;border:1.5px solid var(--border);border-radius:10px;background:var(--light);font-size:.92rem;color:var(--text);outline:none;resize:vertical;font-family:inherit;line-height:1.5;transition:border-color .2s,box-shadow .2s,background .2s;}
.auth-field textarea::placeholder{color:#9aa3af;}
.auth-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,110,112,.15);background:#fff;}
.auth-field-row{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 1.4rem;font-size:.84rem;flex-wrap:wrap;gap:.6rem;}
.auth-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.auth-phone-row{display:flex;gap:.6rem;}
.auth-phone-row input{flex:1;}
.auth-remember{display:flex;align-items:center;gap:.55rem;color:var(--muted);cursor:pointer;}
.auth-remember input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.auth-text-link{color:var(--accent);font-weight:700;text-decoration:none;}
.auth-text-link:hover{text-decoration:underline;}
.btn-auth{width:100%;padding:.95rem;border:none;border-radius:10px;background:linear-gradient(120deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;font-weight:800;font-size:.95rem;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.btn-auth:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(12,110,112,.35);}
.btn-auth:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important;}
.auth-divider{height:1px;background:#eef0f3;margin:1.6rem 0;}
.auth-switch-text{text-align:center;font-size:.86rem;color:var(--muted);}
.auth-switch-text a{color:var(--accent);font-weight:800;text-decoration:none;cursor:pointer;}
.auth-switch-text a:hover{text-decoration:underline;}
.auth-recaptcha-note{text-align:center;font-size:.72rem;color:#aab1bb;margin-top:1.2rem;}
#authSignUpForm{display:none;}
.auth-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:.82rem;font-weight:600;padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem;}
.auth-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;font-size:.82rem;font-weight:600;padding:.6rem .9rem;border-radius:8px;text-align:center;line-height:1.6;margin-bottom:1rem;}
.auth-success a{color:#15803d;text-decoration:underline;}
.auth-terms{display:flex;align-items:flex-start;gap:.6rem;font-size:.81rem;color:var(--muted);margin-bottom:1.3rem;cursor:pointer;line-height:1.55;}
.auth-terms input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;margin-top:.15rem;}
.auth-terms a{color:var(--accent);font-weight:700;text-decoration:underline;}
.auth-terms a:hover{color:var(--accent-dark);}

/* ── COUNTRY CODE PICKER (Frontend + Course Details + Contact Us) ── */
.country-picker{position:relative;flex-shrink:0;}
.country-picker-btn{display:flex;align-items:center;gap:.4rem;height:100%;min-height:48px;padding:0 .6rem;border:1.5px solid var(--border);border-radius:10px;background:var(--light);font-size:.86rem;font-weight:600;color:var(--text);cursor:pointer;min-width:104px;transition:border-color .2s;}
.country-picker-btn:hover{border-color:var(--accent);}
.country-picker.open .country-picker-btn{border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,110,112,.15);}
.country-picker-chevron{margin-left:auto;font-size:.7rem;color:var(--muted);transition:transform .2s;}
.country-picker.open .country-picker-chevron{transform:rotate(180deg);}
.country-picker-panel{
  position:absolute;top:calc(100% + 8px);left:0;width:290px;max-width:calc(100vw - 32px);background:#fff;border-radius:12px;
  box-shadow:0 18px 44px rgba(11,31,75,.22);border:1px solid #eef0f3;z-index:50;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.country-picker.open .country-picker-panel{opacity:1;visibility:visible;transform:translateY(0);}
.country-picker-search{padding:.65rem;border-bottom:1px solid #eef0f3;display:flex;align-items:center;gap:.5rem;}
.country-picker-search svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;margin-left:.3rem;}
.country-picker-search input{width:100%;padding:.5rem .6rem;border:1.5px solid var(--border);border-radius:8px;font-size:.84rem;outline:none;background:var(--light);transition:border-color .2s;}
.country-picker-search input:focus{border-color:var(--accent);background:#fff;}
.country-picker-list{max-height:230px;overflow-y:auto;padding:.4rem;}
.country-picker-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:8px;cursor:pointer;font-size:.83rem;}
.country-picker-item:hover{background:var(--light);}
.country-picker-item .cpi-name{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.country-picker-item .cpi-abbr{font-size:.66rem;font-weight:800;color:var(--primary);background:rgba(11,31,75,.08);border-radius:5px;padding:.1rem .4rem;flex-shrink:0;}
.country-picker-item .cpi-dial{font-size:.78rem;font-weight:700;color:var(--accent);min-width:46px;text-align:right;flex-shrink:0;}
.country-picker-empty{padding:1.2rem;text-align:center;color:var(--muted);font-size:.82rem;}

/* ── STICKY CALL/WHATSAPP/EMAIL FAB ── */
.fab-stack{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:.55rem;z-index:1500;}
.fab-stack.hidden{opacity:0;transform:translateY(12px);pointer-events:none;}
.fab-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;text-decoration:none;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(11,31,75,.28);transition:transform .2s ease,box-shadow .2s ease,opacity .3s ease;}
.fab-btn:hover{transform:scale(1.12);box-shadow:0 10px 26px rgba(11,31,75,.38);}
.fab-btn.call{background:#0B1F4B;}
.fab-btn.whatsapp{background:#25d366;}
.fab-btn.email{background:#fff;border:1.5px solid #e0e0e0 !important;}
.fab-btn.fab-toggle{background:var(--accent);font-size:.95rem;font-weight:800;width:38px;height:38px;}
@keyframes fabGlow{0%,100%{box-shadow:0 0 0 0 rgba(12,110,112,.7);}50%{box-shadow:0 0 0 10px rgba(12,110,112,0);}}
.fab-glow{animation:fabGlow .6s ease-out;}
.fab-action{transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s ease,max-height .3s ease,margin .3s ease;}
.fab-collapsed .fab-action{opacity:0;max-height:0;margin-top:-.55rem;pointer-events:none;transform:scale(0.6) translateY(10px);}

/* ── TOPBAR MARQUEE (mobile only) ── */
@keyframes topbar-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  .topbar{overflow:hidden;}
  .topbar .inner{
    max-width:none;padding:0;
    width:max-content;display:flex;gap:0;
    animation:topbar-ticker 22s linear infinite;
  }
  .top-links{padding:0 2.5rem;flex-shrink:0;}
}

/* ── RESPONSIVE BASE (nav/footer collapse) ── */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom-links{margin-right:0;}
}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .6s ease both;}
.fade-up-d1{animation-delay:.1s;}
.fade-up-d2{animation-delay:.2s;}
.fade-up-d3{animation-delay:.3s;}
.fade-up-d4{animation-delay:.4s;}
.fade-up-d5{animation-delay:.5s;}

/* scroll-reveal (Phase 6 — applied via setupScrollReveal()) */
.reveal-up{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal-up.in-view{opacity:1;transform:translateY(0);}

/* ── SECTION LOADING PLACEHOLDER ──────────────────────────────────────────
   Shown the instant the page paints, before the courses/destinations fetch
   resolves — without it these sections sit completely blank (no spinner, no
   text) for however long the API takes, which on a cold API instance can be
   30-60s and reads as "broken" rather than "loading", especially on mobile. */
.section-loading{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:3rem 1.5rem;width:100%;color:var(--muted);text-align:center;}
.section-loading-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(12,110,112,.18);border-top-color:var(--accent);animation:section-loading-spin .8s linear infinite;}
@keyframes section-loading-spin{to{transform:rotate(360deg);}}
.section-loading-text{font-size:.88rem;font-weight:600;}
.section-loading-hint{font-size:.78rem;color:var(--muted);opacity:.8;}

/* ── MINI CTA BAR (shared across all pages) ── */
.mini-cta-bar{background:linear-gradient(135deg,#084F51 0%,#0e5a9e 50%,#093668 100%);padding:1.2rem 0;}
.mini-cta-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.mini-cta-text{display:flex;flex-direction:column;gap:.28rem;}
.mini-cta-text strong{font-size:1.08rem;font-weight:800;color:#fff;letter-spacing:-0.02em;}
.mini-cta-text span{font-size:.82rem;color:rgba(255,255,255,.82);}
.mini-cta-btns{display:flex;gap:.9rem;flex-shrink:0;flex-wrap:wrap;}
.mini-cta-btn{padding:.58rem 1.35rem;border-radius:9px;font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .22s ease;}
.mini-cta-btn--outline{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.mini-cta-btn--outline:hover{background:rgba(255,255,255,.22);transform:translateY(-1px);}
.mini-cta-btn--solid{background:#fff;border:1.5px solid #fff;color:#15315F;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.14);}
.mini-cta-btn--solid:hover{background:#f0f8ff;transform:translateY(-1px);}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL UPGRADE LAYER v2 — richer cards, section harmony, step upgrade,
   filter polish, trust-strip refinement, AOS-ready, card entrance animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAV CTA gradient ── */
.nav-cta{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%)!important;box-shadow:0 3px 10px rgba(12,110,112,.25)!important;}
.nav-cta:hover{background:linear-gradient(135deg,var(--accent-dark) 0%,#0a6fa6 100%)!important;}

/* ── TRUST STRIP refinement ── */
.trust-strip{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border-top:1px solid rgba(11,31,75,.06);border-bottom:1px solid rgba(11,31,75,.06);}
.trust-label{font-family:'Inter','Segoe UI',system-ui,sans-serif;letter-spacing:.1em;font-size:.78rem;font-weight:800;color:#334155;}
.tl{transition:opacity .25s,filter .25s;filter:grayscale(20%);}
.tl:hover{opacity:1!important;filter:grayscale(0%);}

/* ── ABOUT STRIP refinement ── */
.about-strip{background:linear-gradient(180deg,#f5f9fe 0%,#edf5fc 100%);}
.about-learn-btn{border-radius:8px;padding:.75rem 1.55rem;font-size:.75rem;letter-spacing:.09em;box-shadow:0 3px 12px rgba(11,31,75,.14);}
.about-learn-btn:hover{background:#1a3d6b;box-shadow:0 6px 20px rgba(11,31,75,.2);}

/* ── STEP CARDS upgrade ── */
.step{border-radius:20px;border:1px solid rgba(12,110,112,.1);box-shadow:0 4px 20px rgba(11,31,75,.06);}
.step:hover{transform:translateY(-7px);box-shadow:0 18px 44px rgba(11,31,75,.13);}
.step-num{width:60px;height:60px;font-size:1.3rem;box-shadow:0 10px 28px rgba(12,110,112,.35);}
.step h3{font-size:1.02rem;letter-spacing:-0.02em;}

/* ── CATEGORY CARD upgrade ── */
.cat-card{border-radius:18px;}
.cat-card:hover{transform:translateY(-9px) scale(1.02);}
.cat-content h3{font-size:1rem;letter-spacing:-0.02em;}
.cat-icon{border-radius:14px;}

/* ── TESTIMONIAL CARDS upgrade ── */
.testi-card{border-radius:18px;box-shadow:0 8px 28px rgba(11,31,75,.07);}
.testi-card:hover{transform:translateY(-8px);box-shadow:0 24px 52px rgba(11,31,75,.15);}
.testi-card p{font-size:.92rem;line-height:1.78;}
.stars{font-size:1rem;letter-spacing:.15em;}

/* ── CTA BANNER upgrade ── */
.cta-banner{background:linear-gradient(135deg,#0B1F4B 0%,#0e3d78 50%,#1a5294 100%);}
.cta-banner h2{letter-spacing:-0.03em;}
.cta-banner .btn-white{border-radius:12px;font-weight:800;letter-spacing:-0.01em;}

/* ── IMPACT STATS upgrade ── */
.impact-stat strong{font-size:1.85rem;letter-spacing:-0.04em;}

/* ── FILTER BUTTONS upgrade ── */
.filter-btn{font-size:.8rem;border-radius:50px;border:1.5px solid #E2E7EF;transition:all .22s ease;}
.filter-btn.active,.filter-btn:hover{box-shadow:0 4px 12px rgba(11,31,75,.18);}

/* ── TIMELINE CARDS (Upcoming Trainings) upgrade ── */
.tl-card{border-radius:16px;border:1.5px solid rgba(11,31,75,.05);transition:all .35s cubic-bezier(.22,1,.36,1);}
.tl-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(11,31,75,.15);border-color:rgba(12,110,112,.38);}

/* ── SOCIAL BUTTONS upgrade ── */
.social-btn{border-radius:10px;}

/* ── AUTH MODAL upgrade ── */
.auth-wrap{border-radius:22px;}
.btn-auth{border-radius:12px;letter-spacing:-0.01em;}

/* ── CARD ENTRANCE ANIMATION (for static HTML cards) ── */
@keyframes cardEntrance{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.card-animate{animation:cardEntrance .65s cubic-bezier(.22,1,.36,1) both;}
.card-animate:nth-child(1){animation-delay:.05s;}
.card-animate:nth-child(2){animation-delay:.15s;}
.card-animate:nth-child(3){animation-delay:.25s;}
.card-animate:nth-child(4){animation-delay:.35s;}
.card-animate:nth-child(5){animation-delay:.45s;}
.card-animate:nth-child(6){animation-delay:.55s;}

/* ── CONTACT CARDS (Contact Us page) upgrade ── */
.ccard{border-radius:18px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;}
.ccard:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(11,31,75,.18);}

/* ── DESTINATION CARDS upgrade ── */
.dest-card{border-radius:20px;}
.dest-card:hover{transform:scale(1.08) translateY(-7px);}

/* ── DATE SEARCH WIDGET (Upcoming Trainings) upgrade ── */
.date-search-widget{border-radius:18px;border:1px solid rgba(12,110,112,.18);}

/* ── HERO WAVE smoothing ── */
.hero-wave path,.page-hero-wave path{fill:#F5F7FA;}

/* ── COURSES-BG section alternation ── */
.courses-bg{background:linear-gradient(180deg,#f4f9fe 0%,#edf5fc 100%);}

/* ── STEPS-BG section alternation ── */
.steps-bg{background:linear-gradient(160deg,#fff 0%,#f8fafc 100%);}

/* ── AOS override: ensure our card hover still works while AOS transition runs ── */
[data-aos]{pointer-events:none;}
[data-aos].aos-animate{pointer-events:auto;}

/* ── MOBILE MENU upgrade ── */
.mobile-nav-links a{border-radius:10px;font-size:.98rem;}

/* ── FOOTER LINKS upgrade ── */
footer ul li a{font-size:.84rem;transition:color .2s,padding-left .2s;}
footer ul li a:hover{color:var(--accent);padding-left:3px;}
.footer-bottom{font-size:.79rem;}

/* ── PRICE CAPSULE upgrade (Course Details) ── */
.price-capsule{border-radius:20px;}