/* ============================================================
   iCoder Academy — Main CSS  (Dark Navy Theme)
   ============================================================ */

/* ─── CSS VARIABLES ─────────────────────────────────────────── */
:root {
    --color-bg:           #050d1a;
    --color-bg-secondary: #071525;
    --color-bg-card:      #0d1f3c;
    --color-bg-card2:     #0a1830;
    --color-navy:         #0a1628;
    --color-cyan:         #00E5FF;
    --color-lime:         #A2FF00;
    --color-orange:       #FF8C00;
    --color-white:        #ffffff;
    --color-gray:         #8b949e;
    --color-gray-light:   #b0bec5;

    --font-arabic:  'Cairo', sans-serif;
    --font-english: 'Space Grotesk', sans-serif;
    --font-mono:    'Courier New', 'Consolas', monospace;

    --navbar-height: 72px;
    --radius:        12px;
    --radius-lg:     20px;
    --transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }

body {
    background-color: var(--color-bg);
    color:            var(--color-white);
    font-family:      var(--font-arabic);
    min-height:       100vh;
    overflow-x:       hidden;
    -webkit-font-smoothing: antialiased;
}

[lang="en"] body,
[dir="ltr"] body { font-family: var(--font-english); }

h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.3; }
a { text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; }

.app-wrapper   { min-height: 100vh; display: flex; flex-direction: column; }
.main-content  { flex: 1; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; }
::-webkit-scrollbar-track    { background: var(--color-bg); }
::-webkit-scrollbar-thumb    { background: rgba(0,229,255,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-cyan); }

/* ============================================================
   NAVBAR
   ============================================================ */
.icoder-navbar {
    background:      rgba(5, 13, 26, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom:   1px solid rgba(0,229,255,.15);
    padding:         10px 0;
    transition:      var(--transition);
    z-index:         1000;
}

.icoder-navbar.scrolled {
    background:  rgba(5,13,26,.97) !important;
    border-color: rgba(0,229,255,.35);
    box-shadow:  0 4px 30px rgba(0,229,255,.08);
}

.icoder-brand { text-decoration: none; display: flex; align-items: center; padding: 0; }

.navbar-logo {
    height:      62px;
    width:       auto;
    object-fit:  contain;
    filter:      drop-shadow(0 0 6px rgba(0,229,255,.4));
    transition:  var(--transition);
}

.icoder-brand:hover .navbar-logo {
    filter:    drop-shadow(0 0 14px rgba(0,229,255,.85)) drop-shadow(0 0 28px rgba(0,229,255,.4));
    transform: scale(1.05);
}

.navbar-nav .nav-link {
    color:        rgba(255,255,255,.82) !important;
    font-weight:  500;
    font-size:    0.95rem;
    padding:      8px 14px !important;
    border-radius: 6px;
    transition:   var(--transition);
    position:     relative;
}

.navbar-nav .nav-link::after {
    content:    '';
    position:   absolute;
    bottom:     4px;
    inset-inline-start: 50%;
    inset-inline-end:   50%;
    height:     2px;
    background: var(--color-cyan);
    box-shadow: 0 0 8px var(--color-cyan);
    border-radius: 1px;
    transition: var(--transition);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    inset-inline-start: 14px;
    inset-inline-end:   14px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color:       var(--color-cyan) !important;
    text-shadow: 0 0 8px rgba(0,229,255,.5);
}

.navbar-toggler { border: 1px solid rgba(0,229,255,.3); padding: 6px 10px; }

.toggler-icon-bar {
    display: block; width: 22px; height: 2px;
    background: var(--color-cyan);
    border-radius: 2px; margin: 4px 0;
    box-shadow: 0 0 6px var(--color-cyan);
    transition: var(--transition);
}

.navbar-collapse {
    /* mobile open */
}

@media (max-width: 991px) {
    .navbar-collapse {
        background:    rgba(5,13,26,.98);
        border:        1px solid rgba(0,229,255,.15);
        border-radius: 12px;
        padding:       16px;
        margin-top:    12px;
    }
    .navbar-actions { padding-bottom: 8px; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    position:   relative;
    min-height: calc(100vh - var(--navbar-height));
    display:    flex;
    align-items: center;
    overflow:   hidden;
    background:
        radial-gradient(ellipse 80% 60% at 80% 40%, rgba(0,229,255,.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 20% 70%, rgba(162,255,0,.04) 0%, transparent 50%),
        var(--color-bg);
}

.hero-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events:  none; z-index: 0;
}

.hero-bg-glow-1 {
    position:  absolute; top: 10%; right: 5%;
    width:     500px;    height: 500px;
    background: radial-gradient(circle, rgba(0,229,255,.06) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

.hero-bg-glow-2 {
    position:  absolute; bottom: 10%; left: 10%;
    width:     400px;    height: 400px;
    background: radial-gradient(circle, rgba(162,255,0,.04) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

.min-vh-90 { min-height: calc(100vh - var(--navbar-height)); }

.hero-content {
    padding:  70px 0;
    position: relative;
    z-index:  1;
}

/* Large logo displayed inside hero section */
.hero-logo-wrap { display: inline-block; }

.hero-logo-img {
    height:      170px;
    width:       auto;
    object-fit:  contain;
    filter:      drop-shadow(0 0 12px rgba(0, 229, 255, 0.45))
                 drop-shadow(0 0 30px rgba(0, 229, 255, 0.2));
    transition:  var(--transition);
    animation:   float-logo 5s ease-in-out infinite;
}

@keyframes float-logo {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(0,229,255,.45)) drop-shadow(0 0 30px rgba(0,229,255,.2)); }
    50%       { filter: drop-shadow(0 0 20px rgba(0,229,255,.7))  drop-shadow(0 0 45px rgba(0,229,255,.35)); }
}

.hero-title {
    font-size:    clamp(2.2rem, 5.5vw, 4rem);
    font-weight:  900;
    line-height:  1.15;
    margin-bottom: 14px;
}

.hero-subtitle {
    font-size:    clamp(1.5rem, 3.5vw, 2.6rem);
    font-weight:  700;
    margin-bottom: 20px;
}

.hero-description {
    font-size:   1.05rem;
    color:       rgba(255,255,255,.72);
    line-height: 1.85;
    margin-bottom: 36px;
    max-width:   520px;
}

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

/* Hero Robot Image Side */
.hero-image-wrapper {
    justify-content: center;
    align-items:     center;
    padding:         40px 0;
    position:        relative;
    z-index:         1;
}

.hero-robot-wrap {
    position:  relative;
    width:     100%;
    max-width: 520px;
    margin:    0 auto;
}

.robot-bg-glow {
    position:  absolute; inset: 10%;
    background: radial-gradient(circle, rgba(0,229,255,.22), transparent 70%);
    filter:    blur(40px);
    animation: pulse-glow 3.5s ease-in-out infinite;
    z-index:   0;
}

@keyframes pulse-glow {
    0%,100% { opacity: .5; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.08); }
}

.hero-robot-img {
    width:     100%; height: auto;
    position:  relative; z-index: 1;
    filter:    drop-shadow(0 0 30px rgba(0,229,255,.4));
    animation: float-img 4s ease-in-out infinite;
}

@keyframes float-img {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* Fallback visual */
.hero-robot-fallback {
    position: relative;
    z-index:  1;
    padding:  20px;
}

.monitor-wrap { display: flex; justify-content: center; margin-bottom: 20px; }

.monitor {
    background:    var(--color-bg-card);
    border:        2px solid rgba(0,229,255,.3);
    border-radius: 14px;
    width:         380px;
    overflow:      hidden;
    box-shadow:    0 0 40px rgba(0,229,255,.15), 0 20px 60px rgba(0,0,0,.5);
}

.monitor-header {
    background:    rgba(0,229,255,.06);
    border-bottom: 1px solid rgba(0,229,255,.12);
    padding:       10px 16px;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.red    { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green  { background: #27c93f; }

.monitor-screen {
    padding:     20px 24px;
    font-family: var(--font-mono);
    font-size:   .88rem;
    line-height: 2;
}

.code-line.indent2 { padding-inline-start: 48px; }

.code-line          { white-space: pre; }
.code-line.indent   { padding-inline-start: 24px; }
.code-keyword { color: #ff79c6; }
.code-func    { color: #50fa7b; }
.code-string  { color: var(--color-lime); }
.code-var     { color: #8be9fd; }

.floating-icon {
    position:  absolute;
    font-size: 2.2rem;
    filter:    drop-shadow(0 0 8px rgba(0,229,255,.6));
    animation: float-badge 4s ease-in-out infinite;
}

.icon-python  { top: 0;   right: 0;   animation-delay: 0s; }
.icon-robot   { top: 40%; left: -10px; animation-delay: .8s; }
.icon-arduino { bottom: 10px; right: 10px; animation-delay: 1.6s; }
.icon-scratch { bottom: 0;  left: 30px;  animation-delay: 2.4s; }

[dir="ltr"] .icon-python  { right: auto; left: 0; }
[dir="ltr"] .icon-robot   { left: auto;  right: -10px; }
[dir="ltr"] .icon-arduino { right: auto; left: 10px; }
[dir="ltr"] .icon-scratch { left: auto;  right: 30px; }

@keyframes float-badge {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ============================================================
   FEATURE CARDS  (image inside)
   ============================================================ */
.features-section {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
}

.feat-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    var(--transition);
    border:        1px solid transparent;
    display:       flex;
    flex-direction: column;
}

.feat-card-cyan  { border-color: rgba(0,229,255,.2); }
.feat-card-lime  { border-color: rgba(162,255,0,.2); }
.feat-card-orange{ border-color: rgba(255,165,0,.2); }

.feat-card-cyan:hover  { border-color: rgba(0,229,255,.55);   box-shadow: 0 8px 40px rgba(0,229,255,.18); transform: translateY(-6px); }
.feat-card-lime:hover  { border-color: rgba(162,255,0,.55);  box-shadow: 0 8px 40px rgba(162,255,0,.18); transform: translateY(-6px); }
.feat-card-orange:hover{ border-color: rgba(255,165,0,.55);  box-shadow: 0 8px 40px rgba(255,165,0,.18); transform: translateY(-6px); }

.feat-img-wrap {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 16 / 9;
    flex-shrink:  0;
}

.feat-img {
    width:      100%; height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.feat-card:hover .feat-img { transform: scale(1.05); }

.feat-img-overlay {
    position:   absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--color-bg-card) 100%);
    pointer-events: none;
}

.feat-body { padding: 22px 24px 28px; flex: 1; }

.feat-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; }

.feat-desc  { color: rgba(255,255,255,.68); line-height: 1.75; font-size: .95rem; margin: 0; }

/* ============================================================
   COURSES SECTION  (reference card style)
   ============================================================ */
.courses-section {
    background: var(--color-bg-secondary);
}

.course-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius);
    border:        1px solid rgba(255,255,255,.06);
    overflow:      hidden;
    transition:    var(--transition);
    display:       flex;
    flex-direction: column;
}

.course-card:hover {
    border-color: rgba(0,229,255,.3);
    box-shadow:   0 8px 32px rgba(0,229,255,.12);
    transform:    translateY(-4px);
}

.course-img-wrap {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 16 / 9;
    flex-shrink:  0;
}

.course-thumb {
    width:      100%; height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.course-card:hover .course-thumb { transform: scale(1.04); }

/* Category badge */
.course-cat-badge {
    position:      absolute;
    top:           10px;
    inset-inline-start: 10px;
    border-radius: 20px;
    padding:       3px 11px;
    font-size:     .74rem;
    font-weight:   600;
}

.cat-coding      { background: rgba(0,229,255,.15);  border: 1px solid rgba(0,229,255,.4);  color: var(--color-cyan); }
.cat-robotics    { background: rgba(162,255,0,.15);  border: 1px solid rgba(162,255,0,.4);  color: var(--color-lime); }
.cat-electronics { background: rgba(255,165,0,.15);  border: 1px solid rgba(255,165,0,.4);  color: #FFA500; }

.course-body { padding: 16px 18px 10px; flex: 1; }

.course-title {
    font-size:    .98rem;
    font-weight:  700;
    margin-bottom: 6px;
    line-height:  1.4;
    color:        var(--color-white);
}

.course-instructor {
    color:     rgba(255,255,255,.5);
    font-size: .82rem;
    margin:    0;
    display:   flex;
    align-items: center;
    gap:       6px;
}

.course-instructor i { color: var(--color-cyan); font-size: .76rem; }

.course-foot {
    padding:    12px 18px 16px;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* ============================================================
   SECTION COMMONS
   ============================================================ */
.section-badge {
    display:       inline-block;
    background:    rgba(0,229,255,.1);
    border:        1px solid rgba(0,229,255,.3);
    color:         var(--color-cyan);
    padding:       4px 18px;
    border-radius: 50px;
    font-size:     .82rem;
    font-weight:   600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-badge.lime { background: rgba(162,255,0,.1); border-color: rgba(162,255,0,.3); color: var(--color-lime); }

.section-title { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; margin: 0; }

.title-divider {
    width:        60px; height: 3px;
    background:   linear-gradient(90deg, var(--color-cyan), transparent);
    box-shadow:   0 0 12px var(--color-cyan);
    border-radius: 2px;
    margin:       16px auto;
}

.title-divider.lime { background: linear-gradient(90deg, var(--color-lime), transparent); box-shadow: 0 0 12px var(--color-lime); }

[dir="rtl"] .title-divider      { background: linear-gradient(270deg, var(--color-cyan), transparent); }
[dir="rtl"] .title-divider.lime { background: linear-gradient(270deg, var(--color-lime), transparent); }

/* ============================================================
   FOOTER
   ============================================================ */
.icoder-footer {
    background: linear-gradient(180deg, var(--color-bg-secondary) 0%, #020810 100%);
    border-top: 1px solid rgba(0,229,255,.1);
}

.footer-top { padding: 60px 0 40px; }

.footer-logo { text-decoration: none; display: inline-flex; align-items: center; }

.footer-logo-img {
    height:      80px; width: auto;
    object-fit:  contain;
    filter:      drop-shadow(0 0 6px rgba(0,229,255,.35));
    transition:  var(--transition);
}

.footer-logo:hover .footer-logo-img {
    filter: drop-shadow(0 0 14px rgba(0,229,255,.8)) drop-shadow(0 0 28px rgba(0,229,255,.35));
}

.footer-tagline { color: rgba(255,255,255,.55); font-size: .9rem; line-height: 1.7; max-width: 300px; }

.social-links { display: flex; flex-wrap: wrap; gap: 10px; }

.social-icon {
    width:         38px; height: 38px;
    border-radius: 50%;
    border:        1px solid rgba(0,229,255,.25);
    color:         rgba(255,255,255,.65);
    display:       flex; align-items: center; justify-content: center;
    font-size:     .88rem;
    transition:    var(--transition);
    text-decoration: none;
}

.social-icon:hover {
    background: rgba(0,229,255,.1); border-color: var(--color-cyan);
    color:      var(--color-cyan);
    box-shadow: 0 0 14px rgba(0,229,255,.4);
    transform:  translateY(-3px);
}

.footer-heading { font-size: .9rem; font-weight: 700; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1.5px; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 9px; }

.footer-links a {
    color:       rgba(255,255,255,.58);
    font-size:   .88rem;
    transition:  var(--transition);
    display:     inline-flex; align-items: center; gap: 6px;
}

.footer-links a::before { content: '▸'; color: var(--color-cyan); font-size: .65rem; transition: var(--transition); }
.footer-links a:hover   { color: var(--color-cyan); padding-inline-start: 5px; }

.footer-contact { list-style: none; padding: 0; margin: 0; }

.footer-contact li {
    display:     flex; align-items: flex-start; gap: 12px;
    margin-bottom: 13px;
    color:       rgba(255,255,255,.65);
    font-size:   .88rem;
}

.footer-contact i { color: var(--color-cyan); font-size: .85rem; margin-top: 2px; min-width: 16px; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding: 18px 0; }

.copyright, .footer-made { color: rgba(255,255,255,.38); font-size: .82rem; margin: 0; }

/* ============================================================
   NEON DIVIDER
   ============================================================ */
.neon-divider {
    height: 1px; border: none;
    background: linear-gradient(90deg, transparent 0%, var(--color-cyan) 30%, var(--color-lime) 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(0,229,255,.6);
    opacity: .5;
}

/* ============================================================
   BLAZOR ERROR UI
   ============================================================ */
#blazor-error-ui {
    background: #2d0000; border-top: 2px solid #ff4444;
    bottom: 0; display: none; left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed; width: 100%; z-index: 10000;
    color: #ffcccc; font-size: .9rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; color: #ff9999; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .hero-section   { min-height: auto; padding: 60px 0; }
    .hero-content   { padding: 40px 0; }
    .hero-description { max-width: 100%; }
}

@media (max-width: 767px) {
    .feat-card      { border-radius: 14px; }
    .footer-top     { padding: 40px 0 28px; }
    .footer-tagline { max-width: 100%; }
    .hero-actions   { flex-direction: column; }
    .hero-actions .btn { width: 100%; text-align: center; }
}

/* ============================================================
   PAGE HERO  (shared by Courses, Team, About…)
   ============================================================ */
.page-hero {
    position:   relative;
    overflow:   hidden;
    padding:    80px 0 60px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,229,255,.07) 0%, transparent 60%),
        var(--color-bg);
    border-bottom: 1px solid rgba(0,229,255,.08);
}

/* ============================================================
   TEAM PAGE
   ============================================================ */
.team-hero-glow {
    position:  absolute; top: -60px; left: 50%;
    transform: translateX(-50%);
    width:     600px; height: 300px;
    background: radial-gradient(ellipse, rgba(0,229,255,.1) 0%, transparent 70%);
    pointer-events: none;
}

.team-hero-icon {
    font-size:     4rem;
    margin-bottom: 16px;
    display:       block;
    filter:        drop-shadow(0 0 14px rgba(0,229,255,.6));
    animation:     float-img 4s ease-in-out infinite;
}

/* ─── Team Card ─────────────────────────────────────────────── */
.team-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    var(--transition);
    text-align:    center;
    display:       flex;
    flex-direction: column;
}

.team-card:hover {
    border-color: rgba(0,229,255,.3);
    box-shadow:   0 12px 40px rgba(0,229,255,.12);
    transform:    translateY(-6px);
}

.team-card-featured {
    border-color: rgba(0,229,255,.2);
    background:   linear-gradient(160deg, var(--color-bg-card) 60%, rgba(0,229,255,.04) 100%);
}

.team-card-featured:hover {
    border-color: rgba(0,229,255,.5);
    box-shadow:   0 16px 50px rgba(0,229,255,.18);
}

/* ─── Avatar ────────────────────────────────────────────────── */
.team-avatar-wrap {
    position:   relative;
    width:      130px; height: 130px;
    margin:     32px auto 0;
    border-radius: 50%;
}

.team-avatar-sm { width: 100px; height: 100px; margin-top: 24px; }

.team-avatar {
    width:         100%; height: 100%;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid rgba(0,229,255,.35);
    position:      relative; z-index: 1;
    display:       block;
}

.team-avatar-fallback {
    display:         none;
    width:           100%; height: 100%;
    border-radius:   50%;
    align-items:     center;
    justify-content: center;
    font-size:       1.8rem;
    font-weight:     800;
    color:           #000;
    border:          3px solid rgba(255,255,255,.15);
    position:        relative; z-index: 1;
    letter-spacing:  1px;
}

.team-avatar-sm .team-avatar-fallback { font-size: 1.4rem; }

.team-avatar-glow {
    position:  absolute; inset: -10px;
    border-radius: 50%;
    opacity:   .35;
    filter:    blur(18px);
    z-index:   0;
    animation: pulse-glow 3s ease-in-out infinite;
}

/* ─── Card Body ─────────────────────────────────────────────── */
.team-card-body {
    padding: 20px 22px 26px;
    flex:    1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-name {
    font-size:     1.15rem;
    font-weight:   800;
    color:         var(--color-white);
    margin-bottom: 8px;
}

.team-name-sm { font-size: .98rem; margin-bottom: 6px; }

.team-role-badge {
    display:       inline-block;
    border:        1px solid;
    border-radius: 20px;
    padding:       3px 14px;
    font-size:     .76rem;
    font-weight:   700;
    margin-bottom: 14px;
}

.team-bio {
    color:       rgba(255,255,255,.58);
    font-size:   .87rem;
    line-height: 1.75;
    flex:        1;
    margin-bottom: 16px;
}

.team-bio-sm { font-size: .82rem; }

.team-social {
    display:         flex;
    gap:             8px;
    justify-content: center;
}

.team-social-btn {
    width:         34px; height: 34px;
    border-radius: 50%;
    border:        1px solid rgba(255,255,255,.15);
    color:         rgba(255,255,255,.55);
    display:       flex; align-items: center; justify-content: center;
    font-size:     .78rem;
    transition:    var(--transition);
    text-decoration: none;
}

.team-social-btn:hover {
    background:   rgba(0,229,255,.1);
    border-color: var(--color-cyan);
    color:        var(--color-cyan);
    box-shadow:   0 0 10px rgba(0,229,255,.3);
    transform:    translateY(-2px);
}

/* ─── Values ────────────────────────────────────────────────── */
.team-value-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(162,255,0,.15);
    border-radius: var(--radius);
    padding:       28px 22px;
    text-align:    center;
    transition:    var(--transition);
    height:        100%;
}

.team-value-card:hover {
    border-color: rgba(162,255,0,.45);
    box-shadow:   0 8px 28px rgba(162,255,0,.1);
    transform:    translateY(-4px);
}

.team-value-icon {
    font-size:     2.5rem;
    margin-bottom: 14px;
    display:       block;
    filter:        drop-shadow(0 0 8px rgba(162,255,0,.4));
}

.team-value-title {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--color-lime);
    margin-bottom: 8px;
}

.team-value-desc {
    color:       rgba(255,255,255,.55);
    font-size:   .85rem;
    line-height: 1.7;
    margin:      0;
}

/* ─── Join CTA ──────────────────────────────────────────────── */
.team-join-section {
    position:   relative;
    overflow:   hidden;
    padding:    100px 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,229,255,.06) 0%, transparent 60%),
        var(--color-bg);
    border-top: 1px solid rgba(0,229,255,.08);
}

/* ============================================================
   ROBOTICS PAGE
   ============================================================ */

/* ─── Hero ─────────────────────────────────────────────────── */
.rob-hero {
    position:   relative;
    overflow:   hidden;
    background:
        radial-gradient(ellipse 70% 60% at 30% 50%, rgba(162,255,0,.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0,229,255,.04) 0%, transparent 55%),
        var(--color-bg);
}

.rob-hero-glow {
    position:  absolute; top: -100px; left: 50%;
    transform: translateX(-50%);
    width:     700px; height: 500px;
    background: radial-gradient(ellipse, rgba(162,255,0,.08) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}

.rob-hero-row { min-height: calc(100vh - var(--navbar-height)); }

.rob-hero-content {
    padding:  70px 0;
    position: relative; z-index: 1;
}

.rob-badge-wrap { display: inline-block; }

.rob-badge {
    display:       inline-block;
    background:    rgba(162,255,0,.12);
    border:        1px solid rgba(162,255,0,.4);
    color:         var(--color-lime);
    padding:       5px 18px;
    border-radius: 50px;
    font-size:     .82rem;
    font-weight:   700;
    letter-spacing: 1px;
}

.rob-hero-title {
    font-size:    clamp(2.2rem, 5vw, 3.8rem);
    font-weight:  900;
    line-height:  1.15;
    margin-bottom: 14px;
}

.rob-hero-sub {
    font-size:    clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight:  700;
    color:        rgba(255,255,255,.55);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.rob-hero-desc {
    font-size:    1.05rem;
    color:        rgba(255,255,255,.7);
    line-height:  1.85;
    margin-bottom: 36px;
    max-width:    520px;
}

.rob-hero-cta { font-weight: 800; padding: 14px 38px; }

/* ─── Robot Terminal Visual ─────────────────────────────────── */
.rob-visual {
    position:  relative;
    width:     100%;
    max-width: 480px;
}

.rob-screen {
    background:    var(--color-bg-card);
    border:        2px solid rgba(162,255,0,.35);
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    0 0 50px rgba(162,255,0,.15), 0 20px 60px rgba(0,0,0,.5);
}

.rob-screen-header {
    background:    rgba(162,255,0,.07);
    border-bottom: 1px solid rgba(162,255,0,.15);
    padding:       11px 18px;
    display:       flex;
    align-items:   center;
    gap:           7px;
}

.rob-screen-label {
    margin-inline-start: 6px;
    color:    rgba(162,255,0,.6);
    font-family: var(--font-mono);
    font-size: .8rem;
}

.rob-screen-body {
    padding:     24px 28px;
    font-family: var(--font-mono);
    font-size:   .88rem;
    line-height: 2.1;
}

.rob-line { display: flex; align-items: baseline; gap: 8px; color: rgba(255,255,255,.8); }

.rob-prompt { color: var(--color-lime); font-weight: 700; }

.rob-ok { color: #27c93f; font-weight: 700; font-size: .8rem; }

.rob-cursor {
    display: inline-block;
    animation: blink-cursor .8s step-end infinite;
    color: var(--color-lime);
}

@keyframes blink-cursor {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Floating tags */
.rob-float-tag {
    position:      absolute;
    background:    rgba(10,24,40,.9);
    border:        1px solid rgba(162,255,0,.4);
    color:         var(--color-lime);
    border-radius: 30px;
    padding:       5px 14px;
    font-size:     .78rem;
    font-weight:   700;
    white-space:   nowrap;
    box-shadow:    0 0 12px rgba(162,255,0,.2);
}

.rob-ft-1 { top: -18px;  inset-inline-end:  20px;  animation: float-badge 3.5s ease-in-out infinite; }
.rob-ft-2 { top:  30%;   inset-inline-start: -20px; animation: float-badge 4s   ease-in-out infinite .7s; }
.rob-ft-3 { bottom: 20%; inset-inline-end:  -20px;  animation: float-badge 3.8s ease-in-out infinite 1.4s; }
.rob-ft-4 { bottom: -18px; inset-inline-start: 30px; animation: float-badge 4.2s ease-in-out infinite 2.1s; }

/* ─── Stats Bar ─────────────────────────────────────────────── */
.rob-stats-bar {
    background:    var(--color-bg-secondary);
    border-top:    1px solid rgba(162,255,0,.12);
    border-bottom: 1px solid rgba(162,255,0,.12);
    padding:       28px 0;
}

.rob-stat {
    text-align: center;
    padding:    0 20px;
}

.rob-stat-sep {
    border-inline-start: 1px solid rgba(255,255,255,.08);
    border-inline-end:   1px solid rgba(255,255,255,.08);
}

.rob-stat-num {
    display:     block;
    font-size:   clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.rob-stat-lbl {
    display:   block;
    color:     rgba(255,255,255,.5);
    font-size: .82rem;
}

/* ─── Skills Grid ───────────────────────────────────────────── */
.rob-skill-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius);
    padding:       28px 24px;
    border:        1px solid transparent;
    transition:    var(--transition);
    height:        100%;
}

.rob-skill-lime   { border-color: rgba(162,255,0,.15); }
.rob-skill-cyan   { border-color: rgba(0,229,255,.15); }
.rob-skill-orange { border-color: rgba(255,165,0,.15); }

.rob-skill-lime:hover   { border-color: rgba(162,255,0,.5);  box-shadow: 0 8px 32px rgba(162,255,0,.12);  transform: translateY(-5px); }
.rob-skill-cyan:hover   { border-color: rgba(0,229,255,.5);  box-shadow: 0 8px 32px rgba(0,229,255,.12); transform: translateY(-5px); }
.rob-skill-orange:hover { border-color: rgba(255,165,0,.5);  box-shadow: 0 8px 32px rgba(255,165,0,.12); transform: translateY(-5px); }

.rob-skill-icon {
    font-size:     2.4rem;
    margin-bottom: 14px;
    display:       block;
    filter:        drop-shadow(0 0 8px rgba(162,255,0,.4));
}

.rob-skill-title {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--color-white);
    margin-bottom: 8px;
}

.rob-skill-desc {
    color:       rgba(255,255,255,.58);
    font-size:   .88rem;
    line-height: 1.7;
    margin:      0;
}

/* ─── Equipment Cards ───────────────────────────────────────── */
.rob-equip-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(162,255,0,.15);
    border-radius: var(--radius);
    padding:       24px 16px;
    text-align:    center;
    transition:    var(--transition);
}

.rob-equip-card:hover {
    border-color: rgba(162,255,0,.5);
    box-shadow:   0 6px 24px rgba(162,255,0,.15);
    transform:    translateY(-4px);
}

.rob-equip-icon {
    font-size:     2.6rem;
    margin-bottom: 10px;
    display:       block;
    filter:        drop-shadow(0 0 8px rgba(162,255,0,.35));
}

.rob-equip-label {
    color:     rgba(255,255,255,.7);
    font-size: .82rem;
    font-weight: 600;
    margin:    0;
}

/* ─── CTA Section ───────────────────────────────────────────── */
.rob-cta-section {
    position:   relative;
    overflow:   hidden;
    padding:    100px 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 50%, rgba(162,255,0,.07) 0%, transparent 60%),
        var(--color-bg-secondary);
    border-top: 1px solid rgba(162,255,0,.1);
}

.rob-cta-glow {
    position:  absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:     600px; height: 400px;
    background: radial-gradient(ellipse, rgba(162,255,0,.1) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse-glow 4s ease-in-out infinite;
}

.rob-cta-robot {
    font-size:     5rem;
    margin-bottom: 20px;
    display:       block;
    filter:        drop-shadow(0 0 16px rgba(162,255,0,.6));
    animation:     float-img 3s ease-in-out infinite;
}

.rob-cta-title {
    font-size:     clamp(1.8rem, 4vw, 3rem);
    font-weight:   900;
    margin-bottom: 16px;
}

.rob-cta-desc {
    color:         rgba(255,255,255,.65);
    font-size:     1.05rem;
    max-width:     550px;
    margin:        0 auto 36px;
    line-height:   1.8;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 991px) {
    .rob-hero-row    { min-height: auto; }
    .rob-hero-content { padding: 50px 0 30px; }
    .rob-hero-desc   { max-width: 100%; }
}

@media (max-width: 575px) {
    .rob-cta-section { padding: 70px 0; }
    .rob-equip-card  { padding: 18px 10px; }
}

/* ============================================================
   IMPACT / ACHIEVEMENTS PAGE  (/team)
   ============================================================ */

/* ─── Hero ─────────────────────────────────────────────────── */
.impact-hero {
    position:   relative;
    overflow:   hidden;
    padding:    110px 0 90px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,229,255,.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 80%, rgba(162,255,0,.05) 0%, transparent 50%),
        var(--color-bg);
    border-bottom: 1px solid rgba(0,229,255,.1);
}

.impact-hero-glow-1 {
    position:  absolute; top: -80px; left: 20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,229,255,.1) 0%, transparent 70%);
    pointer-events: none; animation: pulse-glow 4s ease-in-out infinite;
}

.impact-hero-glow-2 {
    position:  absolute; bottom: -60px; right: 15%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(162,255,0,.07) 0%, transparent 70%);
    pointer-events: none; animation: pulse-glow 5s ease-in-out infinite 1s;
}

.impact-hero-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    rgba(0,229,255,.08);
    border:        1px solid rgba(0,229,255,.3);
    color:         var(--color-cyan);
    padding:       6px 20px;
    border-radius: 50px;
    font-size:     .82rem;
    font-weight:   700;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.impact-live-dot {
    width:         8px; height: 8px;
    border-radius: 50%;
    background:    var(--color-lime);
    box-shadow:    0 0 8px var(--color-lime);
    animation:     blink-cursor .9s step-end infinite;
}

.impact-hero-title {
    font-size:     clamp(2.4rem, 6vw, 4.5rem);
    font-weight:   900;
    line-height:   1.15;
    margin-bottom: 20px;
}

.impact-hero-sub {
    color:     rgba(255,255,255,.58);
    font-size: 1.1rem;
    max-width: 600px;
    margin:    0 auto;
    line-height: 1.8;
}

/* ─── Big Number Cards ──────────────────────────────────────── */
.impact-numbers-section {
    padding: 70px 0;
    background:
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
}

.impact-big-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding:       36px 24px;
    text-align:    center;
    border:        1px solid transparent;
    transition:    var(--transition);
    position:      relative;
    overflow:      hidden;
}

.impact-big-card::before {
    content:   '';
    position:  absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.02) 0%, transparent 60%);
    pointer-events: none;
}

.impact-card-cyan   { border-color: rgba(0,229,255,.2); }
.impact-card-lime   { border-color: rgba(162,255,0,.2); }
.impact-card-orange { border-color: rgba(255,140,0,.2); }

.impact-card-cyan:hover   { border-color: rgba(0,229,255,.55);  box-shadow: 0 12px 40px rgba(0,229,255,.18);  transform: translateY(-6px); }
.impact-card-lime:hover   { border-color: rgba(162,255,0,.55);  box-shadow: 0 12px 40px rgba(162,255,0,.18);  transform: translateY(-6px); }
.impact-card-orange:hover { border-color: rgba(255,140,0,.55);  box-shadow: 0 12px 40px rgba(255,140,0,.18);  transform: translateY(-6px); }

.impact-big-icon {
    font-size:     2.8rem;
    margin-bottom: 12px;
    display:       block;
    filter:        drop-shadow(0 0 10px rgba(0,229,255,.5));
}

.impact-big-num {
    display:     block;
    font-size:   clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.impact-num-orange {
    color:       #FFA500 !important;
    text-shadow: 0 0 7px #FFA500, 0 0 14px rgba(255,165,0,.7), 0 0 28px rgba(255,165,0,.4);
}

.impact-big-label {
    color:     rgba(255,255,255,.55);
    font-size: .88rem;
    font-weight: 600;
}

/* ─── Skill Bars ────────────────────────────────────────────── */
.impact-skill-row { margin-bottom: 26px; }

.impact-skill-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   8px;
}

.impact-skill-name {
    font-size:  .92rem;
    font-weight: 700;
    color:      rgba(255,255,255,.85);
}

.impact-skill-pct { font-size: .88rem; font-weight: 800; }

.impact-bar-track {
    width:         100%;
    height:        10px;
    background:    rgba(255,255,255,.06);
    border-radius: 10px;
    overflow:      hidden;
}

.impact-bar-fill {
    height:        100%;
    border-radius: 10px;
    width:         0;
    animation:     fill-bar 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.4s;
}

@keyframes fill-bar {
    to { width: var(--pct, 0%); }
}

.bar-cyan   { background: linear-gradient(90deg, rgba(0,229,255,.4), var(--color-cyan));    box-shadow: 0 0 10px rgba(0,229,255,.4); }
.bar-lime   { background: linear-gradient(90deg, rgba(162,255,0,.4), var(--color-lime));    box-shadow: 0 0 10px rgba(162,255,0,.4); }
.bar-orange { background: linear-gradient(90deg, rgba(255,140,0,.4), #FFA500);              box-shadow: 0 0 10px rgba(255,140,0,.4); }

/* ─── Timeline ──────────────────────────────────────────────── */
.impact-timeline {
    position:   relative;
    max-width:  900px;
    margin:     0 auto;
    padding:    20px 0;
}

.impact-tl-line {
    position:   absolute;
    top:        0; bottom: 0;
    left:       50%;
    transform:  translateX(-50%);
    width:      2px;
    background: linear-gradient(180deg, var(--color-cyan), var(--color-lime), var(--color-cyan));
    box-shadow: 0 0 10px rgba(0,229,255,.4);
}

.impact-tl-item {
    position:     relative;
    width:        45%;
    margin-bottom: 40px;
}

.impact-tl-left  { margin-inline-end: auto; }
.impact-tl-right { margin-inline-start: auto; }

.impact-tl-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius);
    padding:       24px;
    border:        1px solid transparent;
    transition:    var(--transition);
}

.impact-tl-cyan   { border-color: rgba(0,229,255,.2); }
.impact-tl-lime   { border-color: rgba(162,255,0,.2); }
.impact-tl-orange { border-color: rgba(255,140,0,.2); }

.impact-tl-cyan:hover   { border-color: rgba(0,229,255,.5);  box-shadow: 0 6px 24px rgba(0,229,255,.12); }
.impact-tl-lime:hover   { border-color: rgba(162,255,0,.5);  box-shadow: 0 6px 24px rgba(162,255,0,.12); }
.impact-tl-orange:hover { border-color: rgba(255,140,0,.5);  box-shadow: 0 6px 24px rgba(255,140,0,.12); }

.impact-tl-year { font-size: .78rem; font-weight: 800; margin-bottom: 6px; letter-spacing: 2px; }
.impact-tl-icon { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.impact-tl-title { font-size: .98rem; font-weight: 800; color: var(--color-white); margin-bottom: 6px; }
.impact-tl-desc  { color: rgba(255,255,255,.55); font-size: .83rem; line-height: 1.65; margin: 0; }

.impact-tl-dot {
    position:      absolute;
    top:           50%;
    width:         16px; height: 16px;
    border-radius: 50%;
    border:        2px solid var(--color-bg);
    box-shadow:    0 0 10px currentColor;
    transform:     translateY(-50%);
}

.impact-tl-left  .impact-tl-dot { inset-inline-end: -8%; }
.impact-tl-right .impact-tl-dot { inset-inline-start: -8%; }

.impact-dot-cyan   { background: var(--color-cyan);  color: var(--color-cyan); }
.impact-dot-lime   { background: var(--color-lime);  color: var(--color-lime); }
.impact-dot-orange { background: #FFA500;             color: #FFA500; }

/* ─── Testimonials ──────────────────────────────────────────── */
.impact-quote-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-lg);
    padding:       28px 24px;
    transition:    var(--transition);
    height:        100%;
    display:       flex;
    flex-direction: column;
    position:      relative;
    overflow:      hidden;
}

.impact-quote-card:hover {
    border-color: rgba(162,255,0,.3);
    box-shadow:   0 8px 32px rgba(162,255,0,.1);
    transform:    translateY(-4px);
}

.impact-quote-mark {
    font-size:    5rem;
    line-height:  1;
    color:        var(--color-lime);
    opacity:      .25;
    font-family:  Georgia, serif;
    position:     absolute;
    top:          8px;
    inset-inline-start: 16px;
}

.impact-quote-text {
    color:       rgba(255,255,255,.75);
    font-size:   .9rem;
    line-height: 1.8;
    flex:        1;
    padding-top: 24px;
    margin-bottom: 20px;
    font-style:  italic;
}

.impact-quote-footer {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.impact-quote-avatar {
    width:         40px; height: 40px;
    border-radius: 50%;
    display:       flex; align-items: center; justify-content: center;
    font-size:     .8rem;
    font-weight:   800;
    color:         #000;
    flex-shrink:   0;
}

.impact-quote-name { font-size: .88rem; font-weight: 700; color: var(--color-white); }
.impact-quote-role { font-size: .75rem; color: rgba(255,255,255,.4); }
.impact-quote-stars { font-size: .75rem; white-space: nowrap; }

/* ─── Awards ────────────────────────────────────────────────── */
.impact-award-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius);
    padding:       30px 16px;
    text-align:    center;
    border:        1px solid transparent;
    transition:    var(--transition);
}

.award-gold   { border-color: rgba(255,215,0,.3); }
.award-silver { border-color: rgba(192,192,192,.3); }
.award-cyan   { border-color: rgba(0,229,255,.2); }
.award-lime   { border-color: rgba(162,255,0,.2); }

.award-gold:hover   { border-color: rgba(255,215,0,.7); box-shadow: 0 8px 28px rgba(255,215,0,.2);   transform: translateY(-5px); }
.award-silver:hover { border-color: rgba(192,192,192,.6);box-shadow: 0 8px 28px rgba(192,192,192,.15);transform: translateY(-5px); }
.award-cyan:hover   { border-color: rgba(0,229,255,.55); box-shadow: 0 8px 28px rgba(0,229,255,.15); transform: translateY(-5px); }
.award-lime:hover   { border-color: rgba(162,255,0,.55); box-shadow: 0 8px 28px rgba(162,255,0,.15); transform: translateY(-5px); }

.impact-award-trophy { font-size: 3rem; display: block; margin-bottom: 12px; filter: drop-shadow(0 0 12px gold); }
.impact-award-title  { font-size: .85rem; font-weight: 700; color: var(--color-white); margin-bottom: 6px; }
.impact-award-year   { font-size: .75rem; color: rgba(255,255,255,.4); margin: 0; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .impact-tl-line  { left: 16px; transform: none; }
    .impact-tl-item  { width: 85%; margin-inline-start: 40px !important; }
    .impact-tl-left .impact-tl-dot,
    .impact-tl-right .impact-tl-dot { inset-inline-start: -30px; inset-inline-end: auto; }
    .impact-hero     { padding: 70px 0 60px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-page-hero { padding-bottom: 50px; }

.about-hero-glow {
    position:  absolute; top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 350px;
    background: radial-gradient(ellipse, rgba(0,229,255,.09) 0%, transparent 70%);
    pointer-events: none;
}

.about-hero-icon {
    font-size:     4rem;
    margin-bottom: 16px;
    display:       block;
    filter:        drop-shadow(0 0 14px rgba(0,229,255,.6));
    animation:     float-img 4s ease-in-out infinite;
}

/* ─── Stats Bar ─────────────────────────────────────────────── */
.about-stats-bar {
    background:    var(--color-bg-secondary);
    border-top:    1px solid rgba(0,229,255,.1);
    border-bottom: 1px solid rgba(0,229,255,.1);
    padding:       28px 0;
}

.about-stat {
    text-align: center;
    padding:    8px 16px;
}

.about-stat-sep {
    border-inline-start: 1px solid rgba(255,255,255,.07);
}

.about-stat-num {
    display:     block;
    font-size:   clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.about-stat-lbl {
    display:   block;
    color:     rgba(255,255,255,.5);
    font-size: .82rem;
}

/* ─── Story ─────────────────────────────────────────────────── */
.about-story-text {
    color:       rgba(255,255,255,.7);
    font-size:   1rem;
    line-height: 1.9;
    margin-bottom: 0;
}

.about-timeline { display: flex; flex-direction: column; gap: 14px; }

.about-tl-item {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
}

.about-tl-dot {
    width:         12px; height: 12px;
    border-radius: 50%;
    flex-shrink:   0;
    margin-top:    4px;
}

.about-tl-dot.cyan { background: var(--color-cyan); box-shadow: 0 0 8px var(--color-cyan); }
.about-tl-dot.lime { background: var(--color-lime); box-shadow: 0 0 8px var(--color-lime); }

/* ─── Story Visual ───────────────────────────────────────────── */
.about-story-visual {
    position: relative;
    height:   380px;
    display:  flex;
    align-items: center;
    justify-content: center;
}

.about-visual-center {
    position:      absolute;
    width:         110px; height: 110px;
    border-radius: 50%;
    background:    var(--color-bg-card);
    border:        2px solid rgba(0,229,255,.4);
    box-shadow:    0 0 30px rgba(0,229,255,.2);
    display:       flex;
    flex-direction: column;
    align-items:   center;
    justify-content: center;
    gap:           4px;
    animation:     pulse-glow 3s ease-in-out infinite;
}

.about-visual-card {
    position:      absolute;
    background:    var(--color-bg-card);
    border:        1px solid rgba(0,229,255,.25);
    border-radius: 14px;
    padding:       14px 18px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     .85rem;
    font-weight:   700;
    color:         rgba(255,255,255,.85);
    box-shadow:    0 4px 20px rgba(0,0,0,.4);
    white-space:   nowrap;
}

.about-vc-icon { font-size: 1.5rem; }

.about-vc-1 { top: 20px;  inset-inline-start: 0;   animation: float-badge 4s ease-in-out infinite; }
.about-vc-2 { bottom: 20px; inset-inline-end: 0;   animation: float-badge 4.5s ease-in-out infinite .6s; }
.about-vc-3 { top: 50%;  inset-inline-end: -10px;  transform: translateY(-50%); animation: float-badge 3.8s ease-in-out infinite 1.2s; }

/* ─── Mission & Vision ───────────────────────────────────────── */
.about-mv-card {
    background:    var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding:       40px 36px;
    border:        1px solid transparent;
    transition:    var(--transition);
}

.about-mv-cyan {
    border-color: rgba(0,229,255,.2);
    background:   linear-gradient(135deg, var(--color-bg-card) 60%, rgba(0,229,255,.04) 100%);
}

.about-mv-lime {
    border-color: rgba(162,255,0,.2);
    background:   linear-gradient(135deg, var(--color-bg-card) 60%, rgba(162,255,0,.04) 100%);
}

.about-mv-cyan:hover { border-color: rgba(0,229,255,.5);  box-shadow: 0 8px 36px rgba(0,229,255,.12);  transform: translateY(-4px); }
.about-mv-lime:hover { border-color: rgba(162,255,0,.5);  box-shadow: 0 8px 36px rgba(162,255,0,.12); transform: translateY(-4px); }

.about-mv-icon   { font-size: 3rem; margin-bottom: 18px; display: block; }
.about-mv-title  { font-size: 1.4rem; font-weight: 800; margin-bottom: 14px; }
.about-mv-text   { color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.8; margin: 0; }

/* ─── Why iCoder ─────────────────────────────────────────────── */
.about-why-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(0,229,255,.12);
    border-radius: var(--radius);
    padding:       28px 22px;
    text-align:    center;
    transition:    var(--transition);
    height:        100%;
}

.about-why-card:hover {
    border-color: rgba(0,229,255,.4);
    box-shadow:   0 8px 28px rgba(0,229,255,.1);
    transform:    translateY(-4px);
}

.about-why-icon  { font-size: 2.4rem; display: block; margin-bottom: 14px; filter: drop-shadow(0 0 8px rgba(0,229,255,.4)); }
.about-why-title { font-size: 1rem; font-weight: 700; color: var(--color-white); margin-bottom: 8px; }
.about-why-desc  { color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.7; margin: 0; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page-hero { padding-bottom: 50px; }

.contact-hero-glow {
    position:  absolute; top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(0,229,255,.1) 0%, transparent 70%);
    pointer-events: none;
}

.contact-hero-icon {
    font-size:     4rem;
    margin-bottom: 16px;
    display:       block;
    filter:        drop-shadow(0 0 14px rgba(0,229,255,.6));
    animation:     float-img 4s ease-in-out infinite;
}

/* ─── Info Cards ─────────────────────────────────────────────── */
.contact-info-card {
    display:       flex;
    align-items:   center;
    gap:           16px;
    background:    var(--color-bg-card);
    border:        1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    padding:       18px 20px;
    margin-bottom: 14px;
    transition:    var(--transition);
}

.contact-info-card:hover {
    border-color: rgba(0,229,255,.3);
    box-shadow:   0 4px 20px rgba(0,229,255,.08);
    transform:    translateX(-3px);
}

[dir="ltr"] .contact-info-card:hover { transform: translateX(3px); }

.contact-info-icon {
    width:         46px; height: 46px;
    border-radius: 12px;
    border:        1px solid;
    display:       flex; align-items: center; justify-content: center;
    font-size:     1.1rem;
    flex-shrink:   0;
}

.contact-info-label {
    color:     rgba(255,255,255,.45);
    font-size: .76rem;
    margin:    0 0 3px;
    font-weight: 500;
}

.contact-info-value {
    color:     var(--color-white);
    font-size: .92rem;
    font-weight: 600;
    margin:    0;
}

/* ─── Hours ──────────────────────────────────────────────────── */
.contact-hours-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(162,255,0,.2);
    border-radius: var(--radius);
    padding:       20px 22px;
}

.contact-hours-title { font-size: .95rem; font-weight: 700; margin-bottom: 14px; }

.contact-hours-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         7px 0;
    border-bottom:   1px solid rgba(255,255,255,.05);
    color:           rgba(255,255,255,.65);
    font-size:       .85rem;
}

.contact-hours-row:last-child { border-bottom: none; }

/* ─── Form ───────────────────────────────────────────────────── */
.contact-form-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(0,229,255,.18);
    border-radius: var(--radius-lg);
    padding:       40px 36px;
    box-shadow:    0 8px 40px rgba(0,0,0,.3);
}

.contact-form-title {
    font-size:     1.5rem;
    font-weight:   800;
    margin-bottom: 28px;
}

.contact-field { display: flex; flex-direction: column; gap: 6px; }

.contact-label {
    color:     rgba(255,255,255,.65);
    font-size: .85rem;
    font-weight: 600;
}

.contact-input {
    background:    rgba(255,255,255,.04);
    border:        1px solid rgba(0,229,255,.2);
    border-radius: 10px;
    color:         var(--color-white);
    padding:       12px 16px;
    font-size:     .92rem;
    font-family:   var(--font-arabic);
    transition:    var(--transition);
    outline:       none;
    width:         100%;
}

.contact-input:focus {
    border-color: rgba(0,229,255,.6);
    background:   rgba(0,229,255,.05);
    box-shadow:   0 0 0 3px rgba(0,229,255,.1);
}

.contact-input::placeholder { color: rgba(255,255,255,.25); }

.contact-textarea { resize: vertical; min-height: 130px; }

.contact-error {
    color:       #ff6b6b;
    font-size:   .85rem;
    margin:      0;
    padding:     10px 14px;
    background:  rgba(255,80,80,.08);
    border:      1px solid rgba(255,80,80,.2);
    border-radius: 8px;
}

/* ─── Success State ──────────────────────────────────────────── */
.contact-success {
    text-align: center;
    padding:    60px 20px;
}

.contact-success-icon {
    font-size:     4rem;
    display:       block;
    margin-bottom: 16px;
    filter:        drop-shadow(0 0 12px rgba(39,201,63,.7));
}

.contact-success-msg {
    color:     var(--color-white);
    font-size: 1.05rem;
    font-weight: 600;
}

/* ─── Social Buttons ─────────────────────────────────────────── */
.contact-social-btn {
    display:       inline-flex;
    align-items:   center;
    padding:       10px 22px;
    border-radius: 30px;
    border:        1px solid rgba(255,255,255,.15);
    color:         rgba(255,255,255,.7);
    font-size:     .88rem;
    font-weight:   600;
    transition:    var(--transition);
    text-decoration: none;
}

.contact-fb:hover  { border-color:#1877F2; color:#1877F2; box-shadow:0 0 14px rgba(24,119,242,.3); }
.contact-ig:hover  { border-color:#E4405F; color:#E4405F; box-shadow:0 0 14px rgba(228,64,95,.3); }
.contact-yt:hover  { border-color:#FF0000; color:#FF0000; box-shadow:0 0 14px rgba(255,0,0,.3); }
.contact-tk:hover  { border-color:#00F2EA; color:#00F2EA; box-shadow:0 0 14px rgba(0,242,234,.3); }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .contact-form-card { padding: 24px 20px; }
    .about-mv-card      { padding: 28px 22px; }
    .about-story-visual { height: 280px; }
}

/* ═══════════════════════════════════════════════════════════════
   PURPLE THEME (Security Track)
═══════════════════════════════════════════════════════════════ */
:root { --color-purple: #9945FF; }

.neon-text-purple {
    color: var(--color-purple);
    text-shadow: 0 0 10px rgba(153,69,255,.7), 0 0 20px rgba(153,69,255,.4);
}
.bar-purple {
    background: linear-gradient(90deg, #9945FF, #c278ff);
}
.impact-num-purple {
    color: #9945FF;
    text-shadow: 0 0 10px rgba(153,69,255,.7);
}
.btn-neon-purple {
    background:   rgba(153,69,255,.15);
    border:       2px solid var(--color-purple);
    color:        var(--color-purple);
    border-radius: 50px;
    font-weight:  700;
    transition:   all .3s;
}
.btn-neon-purple:hover {
    background:   rgba(153,69,255,.3);
    color:        #fff;
    box-shadow:   0 0 20px rgba(153,69,255,.5);
}
.btn-neon-lime {
    background:   rgba(162,255,0,.12);
    border:       2px solid var(--color-lime);
    color:        var(--color-lime);
    border-radius: 50px;
    font-weight:  700;
    transition:   all .3s;
}
.btn-neon-lime:hover {
    background:   rgba(162,255,0,.25);
    color:        #000;
    box-shadow:   0 0 20px rgba(162,255,0,.4);
}

/* ─── Course Badge: Security + AI ───────────────────────────── */
.badge-security {
    background: rgba(153,69,255,.2);
    color:      #c278ff;
    border:     1px solid rgba(153,69,255,.4);
}
.badge-ai {
    background: rgba(162,255,0,.15);
    color:      var(--color-lime);
    border:     1px solid rgba(162,255,0,.35);
}
.cat-security {
    background: rgba(153,69,255,.2);
    color:      #c278ff;
}
.cat-ai {
    background: rgba(162,255,0,.15);
    color:      var(--color-lime);
}

/* ─── Track Hero Glow (shared) ──────────────────────────────── */
.track-hero-glow {
    position:      absolute;
    top:           -100px;
    left:          50%;
    transform:     translateX(-50%);
    width:         700px;
    height:        700px;
    border-radius: 50%;
    pointer-events: none;
}

/* ─── Navbar Dropdown ───────────────────────────────────────── */
.icoder-dropdown {
    background:    #080f1e;
    border:        1px solid rgba(0,229,255,.2);
    border-radius: 12px;
    padding:       8px;
    min-width:     200px;
    margin-top:    8px;
}
.icoder-dropdown .dropdown-item {
    color:         rgba(255,255,255,.8);
    border-radius: 8px;
    padding:       10px 16px;
    transition:    all .2s;
    font-size:     .9rem;
    font-weight:   500;
}
.icoder-dropdown .dropdown-item:hover,
.icoder-dropdown .dropdown-item:focus {
    background:    rgba(0,229,255,.1);
    color:         var(--color-cyan);
}

/* ═══════════════════════════════════════════════════════════════
   REGISTER PAGE
═══════════════════════════════════════════════════════════════ */
.reg-form-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(0,229,255,.15);
    border-radius: 20px;
    padding:       40px;
}
.reg-field {
    display:       flex;
    flex-direction: column;
    gap:           8px;
}
.reg-label {
    color:         rgba(255,255,255,.85);
    font-size:     .9rem;
    font-weight:   600;
}
.reg-required { color: #ff6b6b; }
.reg-input {
    background:    rgba(255,255,255,.04);
    border:        1px solid rgba(0,229,255,.2);
    border-radius: 12px;
    color:         #fff;
    padding:       12px 16px;
    font-size:     .95rem;
    transition:    border-color .25s, box-shadow .25s;
    outline:       none;
    width:         100%;
}
.reg-input:focus {
    border-color:  var(--color-cyan);
    box-shadow:    0 0 0 3px rgba(0,229,255,.15);
    background:    rgba(0,229,255,.04);
}
.reg-input.is-invalid { border-color: #ff6b6b; }
.reg-input option, .reg-input optgroup {
    background: #0a1628;
    color: #fff;
}
.reg-textarea { resize: vertical; min-height: 110px; }
.reg-error-msg {
    color:       #ff6b6b;
    font-size:   .82rem;
    margin-top:  2px;
}
.reg-alert-error {
    background:    rgba(255,107,107,.1);
    border:        1px solid rgba(255,107,107,.35);
    border-radius: 10px;
    color:         #ff9999;
    padding:       12px 16px;
    font-size:     .9rem;
}
.reg-submit-btn {
    border-radius: 50px;
    font-size:     1.05rem;
    font-weight:   700;
    padding:       14px 24px;
    letter-spacing: .5px;
}
/* Success card */
.reg-success-card {
    background:    var(--color-bg-card);
    border:        1px solid rgba(162,255,0,.25);
    border-radius: 20px;
    padding:       60px 40px;
    text-align:    center;
}
.reg-success-icon {
    font-size:   4rem;
    margin-bottom: 16px;
    filter:      drop-shadow(0 0 14px rgba(162,255,0,.6));
    animation:   float-img 3s ease-in-out infinite;
}

@media (max-width: 767px) {
    .reg-form-card  { padding: 24px 18px; }
    .reg-success-card { padding: 40px 20px; }
}

/* =============================================
   Course Detail Page
   ============================================= */

.cd-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.7);
    font-size: .9rem;
}

.cd-section {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(0,229,255,.1);
    border-radius: 14px;
    padding: 28px;
}

.cd-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.cd-topics-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-topic-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(0,229,255,.04);
    border: 1px solid rgba(0,229,255,.1);
    border-radius: 10px;
    transition: all .2s;
}

.cd-topic-item:hover {
    background: rgba(0,229,255,.08);
    border-color: rgba(0,229,255,.2);
}

.cd-topic-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,229,255,.12);
    border: 1px solid rgba(0,229,255,.25);
    color: var(--color-cyan);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-topic-text {
    color: rgba(255,255,255,.8);
    font-size: .92rem;
}

.cd-instructor-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0,229,255,.04);
    border: 1px solid rgba(0,229,255,.1);
    border-radius: 12px;
}

.cd-price-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(0,229,255,.2);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 0 40px rgba(0,229,255,.05);
}

.cd-price-wrap {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.cd-price-label {
    display: block;
    color: rgba(255,255,255,.4);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

.cd-price-value {
    font-size: 2rem;
    font-weight: 800;
}

.cd-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.7);
    font-size: .9rem;
    margin-bottom: 12px;
}

/* Category badge variants for CourseDetail */
.cat-badge-coding      { background: rgba(0,229,255,.12);  color: var(--color-cyan);   border: 1px solid rgba(0,229,255,.25); }
.cat-badge-robotics    { background: rgba(162,255,0,.1);   color: var(--color-lime);   border: 1px solid rgba(162,255,0,.2); }
.cat-badge-electronics { background: rgba(255,165,0,.1);   color: #FFA500;             border: 1px solid rgba(255,165,0,.2); }
.cat-badge-security    { background: rgba(153,69,255,.12); color: var(--color-purple); border: 1px solid rgba(153,69,255,.25); }
.cat-badge-ai          { background: rgba(162,255,0,.1);   color: var(--color-lime);   border: 1px solid rgba(162,255,0,.2); }