/* ═══════════════════════════════════════
   NOVENTIQ — LIQUID GLASS SYSTEM v4
   Apple Glassmorphism + Navy AI Palette
═══════════════════════════════════════ */
:root {
    /* ── Noventiq Navy Palette ───────────── */
    --primary-dark:    #07142A;
    --primary-color:   #0D518C;
    --secondary-color: #1575C4;
    --cyan:            #1A90D5;
    --accent-color:    #0D518C;
    --accent-hover:    #0a3f6e;

    /* ── Text & Surfaces ─────────────────── */
    --text-color:   #07142A;
    --text-muted:   #4A6080;
    --light-bg:     transparent;
    --surface-1:    rgba(255,255,255,0.70);
    --surface-2:    rgba(255,255,255,0.50);
    --white:        rgba(255,255,255,0.70);
    --gray:         #4A6080;
    --light-gray:   rgba(13,81,140,0.15);

    /* ── Glow ────────────────────────────── */
    --glow-blue:    rgba(13, 81, 140, 0.15);
    --glow-cyan:    rgba(21, 117, 196, 0.12);
    --glow-soft:    rgba(13, 81, 140, 0.07);

    /* ── Glass — Apple Style ─────────────── */
    --glass-bg:       rgba(255,255,255,0.65);
    --glass-bg-md:    rgba(255,255,255,0.80);
    --glass-border:   rgba(255,255,255,0.50);
    --glass-blur:     blur(20px) saturate(180%);
    --glass-shadow:   0 8px 32px rgba(13,81,140,.12), inset 0 1px 0 rgba(255,255,255,.70);
    --glass-hover:    rgba(255,255,255,0.82);

    /* ── Gradients ───────────────────────── */
    --grad-primary: linear-gradient(135deg, #0D518C 0%, #1575C4 100%);
    --grad-accent:  linear-gradient(135deg, #0D518C 0%, #1A90D5 100%);
    --grad-hero:    linear-gradient(-45deg, #020C1B, #071A35, #0A2E58, #0D518C, #1575C4);
    --grad-text:    linear-gradient(135deg, #0D518C, #1A90D5);

    /* ── Spacing (8 px base) ─────────────── */
    --sp-1:  8px;
    --sp-2:  16px;
    --sp-3:  24px;
    --sp-4:  32px;
    --sp-5:  48px;
    --sp-6:  64px;
    --sp-8:  80px;

    /* ── Border Radius ───────────────────── */
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  30px;

    /* ── Shadows ─────────────────────────── */
    --shadow-sm:    0 2px 8px  rgba(13,81,140,.08);
    --shadow-md:    0 6px 24px rgba(13,81,140,.12);
    --shadow-lg:    0 16px 48px rgba(13,81,140,.18);
    --shadow-cyan:  0 8px 32px rgba(21,117,196,.22);
    --shadow-red:   0 8px 32px rgba(13,81,140,.30);
    --box-shadow:   var(--shadow-md);

    /* ── Transition ──────────────────────── */
    --transition:      all 0.3s ease;
    --transition-slow: all 0.5s cubic-bezier(.25,.8,.25,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
    /* Rich gradient base — makes glass panels visible */
    background-color: #C8D8EC;
    background-image:
        radial-gradient(ellipse at 10% 15%, rgba(13,81,140,.55)  0%, transparent 45%),
        radial-gradient(ellipse at 90% 80%, rgba(21,117,196,.45) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 50%, rgba(255,255,255,.18) 0%, transparent 60%);
    background-attachment: fixed;
}
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.3; }
a { text-decoration:none; color:inherit; transition:var(--transition); }
ul { list-style:none; }
img { max-width:100%; height:auto; }

.section-padding { padding: var(--sp-8) 0; }
.bg-light { background: transparent !important; }

/* ── Section Header ──────────────────── */
.section-header { text-align:center; margin-bottom: var(--sp-5); }
.section-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
.divider { width:60px; height:4px; background:var(--accent-color); margin:var(--sp-1) auto var(--sp-2); border-radius:2px; }
.section-subtitle { font-size:1rem; color:var(--gray); }

/* ═══════════════════════════════════════
   SCROLL PROGRESS BAR  (Phase 4)
═══════════════════════════════════════ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color), var(--cyan));
    z-index: 9999;
    transition: width .1s linear;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0,198,255,.4);
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.navbar-custom {
    background: rgba(255,255,255,.72) !important;
    border-bottom: 1px solid rgba(255,255,255,.50);
    padding: 10px 0;
    transition: var(--transition);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 1px 0 rgba(255,255,255,.60), 0 4px 20px rgba(13,81,140,.08);
}
.navbar-custom.scrolled {
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.70), 0 4px 24px rgba(13,81,140,.12);
    padding: var(--sp-1) 0;
}
.navbar-logo { height:75px; width:auto; min-width:180px; object-fit:contain; }
.navbar-brand { display:flex; align-items:center; line-height:1; }
.navbar-custom .nav-link { color:var(--primary-dark) !important; font-size:.9rem; font-weight:500; padding:var(--sp-1) 14px !important; border-radius:6px; transition: var(--transition); }
.navbar-custom .nav-link:hover  { color:var(--accent-color) !important; background:rgba(13,81,140,.08); }
.navbar-custom .nav-link.active { color:var(--accent-color) !important; background:rgba(13,81,140,.10); font-weight:600; box-shadow: 0 0 12px rgba(13,81,140,.15); }
.navbar-toggler { border-color:var(--light-gray); }

/* ═══════════════════════════════════════
   HERO  (Phase 2 — Animated Gradient)
═══════════════════════════════════════ */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* Light mode — vibrant, brighter blue */
    background: linear-gradient(-45deg, #0D518C, #1269B0, #1575C4, #1A90D5, #2099D8);
    background-size: 400% 400%;
    animation: gradientShift 16s ease infinite;
    position: relative;
    overflow: hidden;
}
.hero-section::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.03'%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;
}
.hero-section::after {
    content: '';
    position: absolute;
    top: 30%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,198,255,.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,.08); z-index:1; }
.hero-content  { position:relative; z-index:2; padding: 0 var(--sp-2) 0; }

.hero-badge {
    display:inline-block; background:var(--accent-color); color:#fff;
    padding:6px var(--sp-2); border-radius:var(--radius-lg);
    font-size:.85rem; font-weight:600; letter-spacing:.5px;
    margin-bottom:var(--sp-2); text-transform:uppercase;
}
.hero-badge-white {
    display:inline-block; background:rgba(255,255,255,.12); color:#fff;
    padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-lg);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-family: 'Montserrat', sans-serif;
    font-weight:600;
    letter-spacing: 3px;
    margin-bottom:var(--sp-2); text-transform:uppercase;
    border:1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.brand-novent { color:#0B4283; }
.brand-iq     { color:#2192BF; }
.brand-eg     { color:#E31F21; }
.hero-logo-card {
    display: inline-block;
    margin: 40px auto 36px;
    padding: clamp(24px, 4vw, 44px) clamp(36px, 8vw, 96px);
    /* Light mode — brighter, lighter blue card */
    background: linear-gradient(145deg, #1A90D5 0%, #1575C4 55%, #0D518C 100%);
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 8px 32px rgba(0,0,0,.20),
        0 0 50px rgba(21,117,196,.25),
        0 0 100px rgba(26,144,213,.12);
}
.hero-logo-img {
    height: clamp(60px, 10vw, 130px);
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.hero-title { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; color:#fff; margin-bottom:var(--sp-2); }

/* Gradient text for hero highlight  (Phase 2) */
.hero-gradient-text {
    background: linear-gradient(135deg, #fff 20%, #90d0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc { font-size:1.15rem; color:rgba(255,255,255,.82); margin-bottom:var(--sp-4); max-width:600px; margin-inline:auto; }

/* Hero Stats Strip  (Phase 2) */
.hero-stats-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-5);
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid rgba(0,198,255,.20);
}
.hero-stat { text-align: center; }
.hero-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--cyan);
    line-height: 1;
    display: block;
    text-shadow: 0 0 20px rgba(0,198,255,.4);
}
.hero-stat-label {
    font-size: .7rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    display: block;
}
.hero-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.2);
}

.scroll-indicator { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-indicator a { color:rgba(255,255,255,.6); font-size:1.2rem; animation:bounce 2s infinite; display:block; will-change:transform; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
    padding: 11px var(--sp-4);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: .9rem;
    font-family: 'Poppins', sans-serif;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 6px;
}
.btn-sm { padding: var(--sp-1) var(--sp-3) !important; font-size: .825rem !important; }

.btn-primary {
    background: var(--grad-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 18px rgba(13,81,140,.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0a3f6e 0%, #0D518C 100%);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(13,81,140,.50);
    color: #fff;
}

.btn-outline-hero {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: #fff;
    padding: 11px var(--sp-4);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: .9rem;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    transition: var(--transition);
    margin: 6px;
    display: inline-block;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-outline-hero:hover {
    background: var(--glass-bg-md);
    border-color: rgba(255,255,255,.45);
    transform: translateY(-2px);
    color: #fff;
    box-shadow: var(--shadow-cyan), inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-outline { background:transparent; border:2px solid var(--secondary-color); color:var(--secondary-color); }
.btn-outline:hover { background:var(--grad-primary); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(13,81,140,.25); }

.btn-portfolio {
    display:inline-flex; align-items:center; gap:var(--sp-1);
    margin-top:var(--sp-2); color:var(--secondary-color); font-size:.875rem; font-weight:600;
    border:2px solid var(--secondary-color); padding:var(--sp-1) var(--sp-3);
    border-radius:var(--radius-xl); transition:var(--transition);
    align-self:flex-start; background:transparent;
}
.btn-portfolio:hover { background:var(--grad-primary); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 4px 14px rgba(13,81,140,.30); }

/* ═══════════════════════════════════════
   ABOUT  (Phase 5 — Dot Pattern + Glassmorphism)
═══════════════════════════════════════ */
#about {
    background: transparent;
}
.about-brand-card {
    background: linear-gradient(145deg, var(--primary-dark) 0%, #0a3d6b 40%, var(--primary-color) 100%);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(0,198,255,.10);
    border: 1px solid rgba(0,198,255,.15);
    position: relative;
    overflow: hidden;
}
.about-brand-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,198,255,.12) 0%, transparent 70%);
    pointer-events: none;
}
.noventiq-big-logo { display:flex; justify-content:center; align-items:center; padding:10px 0; }
.about-logo {
    max-width: 200px; width:100%; height:auto; object-fit:contain;
    border-radius: 0; background: transparent; padding: 0;
    box-shadow: none;
}
.about-stats { display:flex; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid rgba(255,255,255,.15); }
.stat-item { text-align:center; }
.stat-number { display:block; font-size:2rem; font-weight:800; color:#fff; }
.stat-label  { font-size:.8rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; }
.about-content h3 {
    font-size: 1.6rem;
    font-weight: 700;
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-bottom: var(--sp-2);
}
.about-text { color:var(--text-color); line-height:1.85; }
.about-meta { display:flex; flex-direction:column; gap:10px; }
.meta-row { display:flex; align-items:center; gap:10px; color:var(--gray); }
.meta-row i { color:var(--accent-color); width:18px; }

/* ═══════════════════════════════════════
   SKILLS  (Phase 5 — Gradient Background)
═══════════════════════════════════════ */
#skills.bg-light {
    background:
        radial-gradient(circle at 10% 50%, rgba(13,81,140,.08), transparent 50%),
        radial-gradient(circle at 90% 30%, rgba(21,117,196,.06), transparent 45%),
        var(--light-bg) !important;
}
.skill-category {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    box-shadow: var(--glass-shadow);
    height: 100%;
    position: relative;
    transition: var(--transition);
}
.skill-category::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-primary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.skill-category:hover { transform: translateY(-4px); box-shadow: var(--shadow-cyan); }
.skill-header { display:flex; align-items:center; gap:var(--sp-1); margin-bottom:var(--sp-2); }
.skill-category-icon { font-size:1.4rem; color:var(--accent-color); }
.skill-header h4 { font-size:1.05rem; color:var(--primary-color); margin:0; }
.skill-item { margin-bottom:14px; }
.skill-name { font-size:.875rem; font-weight:500; color:var(--text-color); display:block; margin-bottom:4px; }
.skill-bar { background:var(--light-gray); border-radius:4px; height:8px; overflow:hidden; }
.skill-progress { height:100%; width:0%; background:linear-gradient(90deg, var(--accent-color), var(--secondary-color)); border-radius:4px; transition:width 1s ease; }
.skills-list-tags { display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.skill-tag {
    background: var(--grad-primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius-lg);
    font-size: .8rem;
    font-weight: 500;
    cursor: default;
    box-shadow: 0 2px 8px rgba(13,81,140,.20);
}

/* ═══════════════════════════════════════
   SERVICES  (Phase 5 — Numbered Accent)
═══════════════════════════════════════ */
.service-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-3);
    box-shadow: var(--glass-shadow);
    height: 100%;
    text-align: center;
    transition: var(--transition-slow);
    border-bottom: 3px solid transparent;
    border-top: 1px solid rgba(13,81,140,.06);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-primary);
    opacity: 0;
    transition: opacity .3s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    border-bottom-color: transparent;
    box-shadow: var(--shadow-cyan);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
    font-size: 2.4rem;
    margin-bottom: var(--sp-2);
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
.service-card h4 { font-size:1.05rem; color:var(--primary-color); margin-bottom:var(--sp-1); }
.service-card p  { font-size:.875rem; color:var(--gray); line-height:1.7; }

/* ═══════════════════════════════════════
   PORTFOLIO FILTERS  (Phase 4)
═══════════════════════════════════════ */
.portfolio-filters { display:flex; justify-content:center; margin-bottom:var(--sp-5); overflow:visible; position:relative; z-index:500; }
.filter-bar {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--grad-primary); border-radius: var(--radius-xl);
    padding: 6px; box-shadow: 0 6px var(--sp-3) rgba(13,81,140,.25);
}
.filter-pill {
    padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-xl); border: none;
    background: transparent; color: rgba(255,255,255,.85);
    font-size: .875rem; font-weight: 500; cursor: pointer;
    font-family: 'Poppins', sans-serif; transition: var(--transition);
    white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.filter-pill:hover  { background:rgba(255,255,255,.15); color:#fff; }
.filter-pill.active { background:#fff; color:var(--primary-color); }
.filter-pill.has-selection { background:rgba(255,255,255,.2); color:#fff; }

.filter-dropdown-wrap { position:relative; }
.filter-dropdown-menu {
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
    background:#fff; border-radius:var(--radius-md);
    box-shadow:0 var(--sp-1) 40px rgba(0,0,0,.16);
    padding:var(--sp-1); min-width:240px; z-index:1000;
    display:none; max-height:320px; overflow-y:auto;
}
.filter-dropdown-menu.open { display:block; }
.filter-dropdown-item {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 14px; background:none; border:none; border-radius:var(--radius-sm);
    text-align:left; cursor:pointer; font-size:.855rem; color:var(--text-color);
    font-family:'Poppins',sans-serif; transition:background .15s, color .15s;
}
.filter-dropdown-item:hover  { background:rgba(13,81,140,.07); color:var(--primary-color); }
.filter-dropdown-item.active { background:rgba(13,81,140,.12); color:var(--primary-color); font-weight:600; }
.filter-dropdown-item .item-icon { width:18px; text-align:center; flex-shrink:0; }
.filter-chevron { font-size:.7rem; transition:transform .2s; }
.filter-pill.open .filter-chevron { transform:rotate(180deg); }

/* Result count badge */
.filter-count-wrap { display:flex; justify-content:center; margin-bottom:var(--sp-3); margin-top:calc(-1 * var(--sp-3)); }
.filter-count {
    font-size: .8rem; font-weight: 500; color: var(--gray);
    background: var(--white); padding: 4px 14px; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); border: 1px solid var(--light-gray);
}

@media (max-width:576px) {
    .filter-bar { flex-wrap:wrap; border-radius:var(--radius-md); }
    .filter-dropdown-menu { left:0; transform:none; }
}

/* ═══════════════════════════════════════
   PORTFOLIO CARDS  (Phase 3)
═══════════════════════════════════════ */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.card-reveal { animation: cardReveal .45s cubic-bezier(.25,.8,.25,1) both; will-change: opacity, transform; }

/* Filter exit */
@keyframes cardExit {
    from { opacity: 1; transform: translateY(0)    scale(1);    }
    to   { opacity: 0; transform: translateY(-10px) scale(0.94); }
}
.card-exit { animation: cardExit .22s ease forwards; pointer-events: none; will-change: opacity, transform; }

/* Spotlight */
#portfolio-grid.spotlight-active .portfolio-item {
    transition: opacity .25s ease, transform .25s ease;
}
#portfolio-grid.spotlight-active .portfolio-item:not(.spotlight-focus) {
    opacity: 0.35;
    transform: scale(0.97);
}
#portfolio-grid.spotlight-active .portfolio-item.spotlight-focus {
    position: relative;
    z-index: 2;
    transform: scale(1.02);
}

/* ═══════════════════════════════════════
   TRENDING CASE STUDIES CAROUSEL
═══════════════════════════════════════ */
.trending-section {
    padding: var(--sp-8) 0 0;
    background: transparent;
    overflow: hidden;
    position: relative;
}
.trending-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-primary);
}
.trending-section .section-header { margin-bottom: var(--sp-5); }
.trending-highlight { color: var(--secondary-color); }

/* Fade edges */
.carousel-outer {
    position: relative;
    overflow: hidden;
    padding: var(--sp-4) 0 var(--sp-8);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

@keyframes carouselScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.carousel-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
    will-change: transform;
    animation: carouselScroll 45s linear infinite;
}
.carousel-track.paused { animation-play-state: paused; }

/* Card wrapper */
.pcc-wrap { flex: 0 0 320px; }

/* The card */
.pcc {
    position: relative;
    width: 320px;
    height: 420px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    transition: transform .4s cubic-bezier(.25,.8,.25,1),
                box-shadow .4s cubic-bezier(.25,.8,.25,1);
    transform-style: preserve-3d;
}
.pcc:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 24px 60px rgba(0,0,0,.30);
}

/* Background image */
.pcc-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.pcc-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.pcc:hover .pcc-bg img { transform: scale(1.08); }

/* Gradient overlay */
.pcc::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(4,15,40,.97) 0%,
        rgba(4,15,40,.6)  40%,
        rgba(4,15,40,.1)  100%
    );
    transition: background .4s ease;
}
.pcc:hover::after {
    background: linear-gradient(
        to top,
        rgba(4,15,40,.99) 0%,
        rgba(4,15,40,.72) 50%,
        rgba(4,15,40,.2)  100%
    );
}

/* Shine sweep on hover */
.pcc-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg,
        rgba(255,255,255,.08) 0%,
        rgba(255,255,255,0)   60%);
    opacity: 0;
    transition: opacity .4s ease;
}
.pcc:hover .pcc-shine { opacity: 1; }

/* Content */
.pcc-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--sp-3);
    z-index: 3;
}
.pcc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pcc-badge {
    font-size: .68rem; font-weight: 600;
    padding: 3px 10px; border-radius: 20px;
    background: var(--secondary-color); color: #fff;
    display: inline-flex; align-items: center; gap: 4px;
}
.pcc-badge-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    color: rgba(255,255,255,.85);
}
.pcc-content h4 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.35;
}
.pcc-content p {
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    line-height: 1.6;
    margin-bottom: var(--sp-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .4s ease, opacity .35s ease, margin .3s ease;
}
.pcc:hover .pcc-content p {
    max-height: 80px;
    opacity: 1;
}
.pcc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-color);
    color: #fff;
    padding: 8px 20px;
    border-radius: var(--radius-xl);
    font-size: .8rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease .05s,
                transform .35s ease .05s,
                background .2s;
}
.pcc:hover .pcc-btn { opacity: 1; transform: translateY(0); }
.pcc-btn:hover { background: var(--accent-hover); color: #fff; }

/* Skeleton — uses transform translateX for GPU compositing */
.pcc-skeleton { background: #D8E8F5; overflow: hidden; }
.pcc-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
    will-change: transform;
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
}

/* ═══════════════════════════════════════
   TRENDING CARD (tc)
═══════════════════════════════════════ */
.tc-wrap { flex: 0 0 520px; }

.tc {
    display: flex;
    align-items: stretch;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    height: 290px;
    transition: transform .35s cubic-bezier(.25,.8,.25,1),
                box-shadow .35s cubic-bezier(.25,.8,.25,1);
    border: 1px solid rgba(13,81,140,.08);
}
.tc:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: var(--shadow-cyan);
}

/* Image column */
.tc-img {
    flex: 0 0 185px;
    overflow: hidden;
    position: relative;
}
.tc-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.tc:hover .tc-img img { transform: scale(1.07); }

/* Industry badge — inline in content */
.tc-industry-row { margin-bottom: 6px; }
.tc-industry {
    font-size: .62rem;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(13,81,140,.08);
    border: 1px solid rgba(13,81,140,.18);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.3;
}

/* Content column */
.tc-body {
    flex: 1;
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-width: 0;
}
.tc-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tc-body p {
    font-size: .78rem;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.tc-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.tc-meta-badge {
    font-size: .63rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    background: rgba(13,81,140,.07);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tc-tags { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; margin-bottom: 10px; }
.tc-tag {
    font-size: .65rem;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f0f4f8;
    color: #555;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid #e0e6ed;
}
.tc-actions { display: flex; gap: 8px; }
.tc-btn-view {
    display: inline-flex;
    align-items: center;
    background: var(--primary-color);
    color: #fff;
    padding: 7px 18px;
    border-radius: var(--radius-xl);
    font-size: .76rem;
    font-weight: 600;
    transition: background .2s, transform .2s;
    white-space: nowrap;
}
.tc-btn-view:hover { background: var(--accent-color); color: #fff; transform: translateY(-1px); }

/* Skeleton */
.tc-skeleton {
    background: #eef1f4;
    position: relative;
    overflow: hidden;
}
.tc-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    will-change: transform;
    animation: shimmer 1.4s infinite;
}

/* ═══════════════════════════════════════
   BENTO GRID
═══════════════════════════════════════ */
.bento-item { animation: cardReveal .5s ease both; }

.bento-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 300px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: box-shadow .4s ease, transform .15s ease;
    box-shadow: var(--shadow-md);
}
.bento-featured .bento-card { height: 380px; }

.bento-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.bento-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.bento-card:hover .bento-bg img { transform: scale(1.07); }

.bento-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(5,20,55,.96) 0%,
        rgba(5,20,55,.55) 45%,
        rgba(5,20,55,.15) 100%);
    z-index: 1;
    transition: background .3s ease;
}
.bento-card:hover::after {
    background: linear-gradient(to top,
        rgba(5,20,55,.98) 0%,
        rgba(5,20,55,.65) 55%,
        rgba(5,20,55,.2) 100%);
}

.bento-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    opacity: 0;
    transition: opacity .35s ease;
    box-shadow: inset 0 0 0 1.5px rgba(33,142,199,.7),
                0 0 40px rgba(33,142,199,.25);
}
.bento-card:hover .bento-glow { opacity: 1; }

.bento-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--sp-3);
    z-index: 3;
}
.bento-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bento-content h4 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}
.bento-featured .bento-content h4 { font-size: 1.35rem; }
.bento-content p {
    color: rgba(255,255,255,.75);
    font-size: .82rem;
    line-height: 1.65;
    margin-bottom: var(--sp-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bento-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: var(--accent-color);
    padding: 7px 18px;
    border-radius: var(--radius-xl);
    font-size: .8rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, background .2s;
}
.bento-card:hover .bento-btn { opacity: 1; transform: translateY(0); }
.bento-btn:hover { background: var(--accent-hover); color: #fff; }

.portfolio-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    isolation: isolate;
    z-index: 1;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.portfolio-card:hover { transform:translateY(-6px); box-shadow: var(--shadow-cyan); }

/* 16:9 image ratio (Phase 3) */
.portfolio-img { position:relative; overflow:hidden; background:#E2EEF8; padding-top:56.25%; }
.portfolio-img img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:fill;
    transition: transform .45s ease;
}
.portfolio-card:hover .portfolio-img img { transform:scale(1.06); }

/* Frosted glass overlay (Phase 3) */
.portfolio-overlay {
    position:absolute; inset:0;
    background: rgba(7,28,56,.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition: opacity .35s ease;
}
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-links { display:flex; gap:var(--sp-1); }
.portfolio-link {
    width:44px; height:44px; background:var(--accent-color); color:#fff; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; transition:var(--transition);
    box-shadow: 0 4px 12px rgba(217,35,50,.4);
}
.portfolio-link:hover { background:#fff; color:var(--accent-color); transform:scale(1.12); }

.portfolio-content { padding:var(--sp-3); flex:1; display:flex; flex-direction:column; }
.portfolio-content h4 { font-size:1rem; color:var(--primary-color); margin-bottom:var(--sp-1); font-weight:600; }
.portfolio-content p  { font-size:.875rem; color:var(--gray); flex:1; line-height:1.65; }
.project-meta-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--sp-1); }

/* Badge hierarchy (Phase 3) */
.meta-badge {
    font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:var(--radius-lg);
    display:inline-flex; align-items:center; gap:4px;
}
.meta-badge.badge-filled  { background:var(--secondary-color); color:#fff; border:1px solid var(--secondary-color); }
.meta-badge.badge-outline { background:transparent; color:var(--secondary-color); border:1px solid rgba(33,142,199,.5); }
.meta-badge.badge-ghost   { background:rgba(33,142,199,.08); color:#218EC7; border:1px solid rgba(33,142,199,.2); }

/* ── Spinner ─────────────────────────── */
.spinner-accent { color:var(--accent-color); }

/* ═══════════════════════════════════════
   SKELETON SCREENS  (Phase 3/7)
═══════════════════════════════════════ */
@keyframes skeletonPulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.skeleton-img, .skeleton-line, .skeleton-tag { will-change: opacity; }

.skeleton-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.skeleton-img {
    width: 100%;
    padding-top: 56.25%;
    background: #D8E8F5;
    animation: skeletonPulse 1.6s ease infinite;
}
.skeleton-body { padding: var(--sp-3); }
.skeleton-line {
    height: 11px;
    border-radius: 6px;
    background: #D8E8F5;
    animation: skeletonPulse 1.6s ease infinite;
    margin-bottom: 10px;
    width: 100%;
}
.skeleton-line:nth-child(2) { animation-delay: .15s; }
.skeleton-line:nth-child(3) { animation-delay: .3s; }
.skeleton-line:nth-child(4) { animation-delay: .45s; }
.skeleton-badge {
    height: 20px; width: 60px;
    border-radius: var(--radius-lg);
    background: #D8E8F5;
    animation: skeletonPulse 1.6s ease infinite;
    display: inline-block;
}

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-info h3, .contact-form h3 { font-size:1.4rem; color:var(--primary-color); margin-bottom:var(--sp-2); }
.contact-details { display:flex; flex-direction:column; gap:var(--sp-2); }
.contact-item { display:flex; align-items:flex-start; gap:var(--sp-2); }
.contact-item i { font-size:1.3rem; color:var(--accent-color); margin-top:2px; }
.contact-item h5 { font-size:.95rem; font-weight:600; margin:0 0 2px; }
.contact-item p { font-size:.9rem; color:var(--gray); margin:0; }
.contact-item a {
    font-size:.9rem; color:var(--secondary-color); margin:0;
    font-weight:500; text-decoration:underline; text-underline-offset:3px;
}
.contact-item a:hover { color:var(--primary-color); }
.contact-form {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
}
.form-group { margin-bottom:var(--sp-2); }
.form-control {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(13,81,140,.20);
    padding: 10px 14px;
    font-size: .9rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color .2s, box-shadow .2s;
    background: rgba(255,255,255,.60);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.form-control:focus { border-color:var(--secondary-color); box-shadow:0 0 0 3px rgba(15,91,155,.15); outline:none; background: rgba(255,255,255,.80); }

/* ── Fixed UI ────────────────────────── */
.back-to-top { position:fixed; bottom:90px; right:20px; z-index:999; width:42px; height:42px; background:var(--grad-accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; opacity:0; visibility:hidden; transition:var(--transition); box-shadow:0 4px 16px rgba(13,81,140,.40); }
.back-to-top.active { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--accent-hover); transform:translateY(-3px); }

.social-icons {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--sp-1);
    z-index: 999;
    background: rgba(5, 18, 40, 0.88);
    padding: 10px var(--sp-2);
    border-radius: var(--radius-xl);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0,198,255,.12);
    box-shadow: 0 8px 32px rgba(0,0,0,.30);
}
.social-icons a { color:rgba(255,255,255,.75); font-size:1.1rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:var(--transition); text-decoration:none; }
.social-icons a:hover { color:#fff; background:var(--accent-color); transform:translateY(-3px); box-shadow: var(--shadow-red); }

/* ═══════════════════════════════════════
   INNER PAGE HERO BANNER
═══════════════════════════════════════ */
.page-hero {
    background: linear-gradient(-45deg, #020C1B, #071A35, #0A2E58, #0D518C);
    background-size: 300% 300%;
    animation: gradientShift 14s ease infinite;
    padding: 130px 0 55px;
    position: relative;
    overflow: hidden;
}
.page-hero::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.03'%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;
}
.page-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}
/* ── Breadcrumb as pill buttons ──────── */
.page-hero .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.page-hero .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: .78rem;
    font-weight: 500;
}
.page-hero .breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: var(--transition);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.page-hero .breadcrumb-item a::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f015';
    font-size: .7rem;
    opacity: .85;
}
.page-hero .breadcrumb-item a:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.40);
    color: #fff;
    transform: translateY(-1px);
}
.page-hero .breadcrumb-item.active {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-xl);
    background: var(--grad-accent);
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(13,81,140,.40);
}
/* Replace / separator with chevron icon */
.page-hero .breadcrumb-item + .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
.page-hero .breadcrumb-item + .breadcrumb-item::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .55rem;
    color: rgba(255,255,255,.35);
    padding: 0 2px;
    float: none;
}

/* ═══════════════════════════════════════
   FOOTER  (Phase 7)
═══════════════════════════════════════ */
.site-footer {
    background: linear-gradient(135deg, #020c1b 0%, #051c38 60%, #07142a 100%);
    color: rgba(255,255,255,.7);
    border-top: 1px solid rgba(0,198,255,.10);
}
.footer-logo { height:34px; opacity:.9; filter:brightness(1); }
.footer-tagline { font-size:.85rem; color:rgba(255,255,255,.4); margin-top:var(--sp-1); }
.footer-heading { font-size:.75rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:rgba(255,255,255,.45); margin-bottom:var(--sp-2); }
.footer-nav a { color:rgba(255,255,255,.55); font-size:.875rem; display:block; margin-bottom:8px; transition:var(--transition); }
.footer-nav a:hover { color:#fff; padding-left:4px; }
.footer-social-link {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.65);
    font-size:.95rem; transition:var(--transition);
}
.footer-social-link:hover { background:var(--accent-color); color:#fff; transform:translateY(-2px); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: var(--sp-3) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1);
}
.footer-copy { font-size:.8rem; color:#fff; margin:0; }

/* ═══════════════════════════════════════
   PROJECT DETAIL PAGE  (Phase 6)
═══════════════════════════════════════ */
.project-loading, .project-error {
    min-height:80vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding-top:var(--sp-8);
}

/* Blurred Hero (Phase 6) */
.project-hero {
    padding-top: 70px;
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: #07172c;
}
.project-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(.3) saturate(.7);
    transform: scale(1.08);
}
.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5,28,56,.2) 0%, rgba(5,28,56,.75) 60%, rgba(5,28,56,.97) 100%);
}
.project-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--sp-6) 0 var(--sp-4);
}
.project-hero-title {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin-bottom: var(--sp-2);
}
.project-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}
.project-hero-badge {
    font-size: .75rem; font-weight: 600;
    padding: 4px 12px; border-radius: var(--radius-lg);
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    display: inline-flex; align-items: center; gap: 5px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.project-hero-media { position:relative; z-index:2; }

/* Video / Image */
.video-wrapper { position:relative; width:100%; max-width:960px; margin:0 auto; aspect-ratio:16/9; background:#000; }
.video-wrapper iframe, .video-wrapper video { position:absolute; inset:0; width:100%; height:100%; }
.project-hero-img { display:block; width:100%; max-width:960px; max-height:460px; object-fit:cover; margin:0 auto; }

/* Project info */
.project-page-title { font-size:2rem; font-weight:700; color:var(--primary-color); }
.project-description { line-height:1.85; color:var(--text-color); }
.project-description h2,.project-description h3 { color:var(--primary-color); margin:1.5rem 0 .75rem; font-weight:600; }
.project-description h2 { font-size:1.4rem; }
.project-description h3 { font-size:1.15rem; }
.project-description p { margin-bottom:1rem; }
.project-description ul,.project-description ol { padding-left:1.5rem; margin-bottom:1rem; }
.project-description code { background:var(--light-bg); padding:2px 6px; border-radius:var(--radius-sm); font-size:.875rem; color:var(--accent-color); }
.project-description pre { background:var(--primary-color); color:#ecf0f1; padding:var(--sp-2); border-radius:var(--radius-sm); overflow-x:auto; margin-bottom:1rem; }
.project-description pre code { background:none; color:inherit; padding:0; }
.project-description blockquote { border-left:4px solid var(--accent-color); margin:1rem 0; padding:.5rem 1rem; background:rgba(227,24,55,.07); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--gray); }
.project-description img { max-width:100%; border-radius:var(--radius-sm); margin:1rem 0; }
.project-description a { color:var(--accent-color); text-decoration:underline; }

.project-meta-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-top: 4px solid var(--accent-color);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    box-shadow: var(--glass-shadow);
    position: sticky;
    top: 90px;
}
.meta-title { font-size:1rem; font-weight:600; color:var(--primary-color); margin-bottom:var(--sp-2); }
.meta-list { list-style:none; padding:0; }
.meta-list li { display:flex; flex-direction:column; padding:10px 0; border-bottom:1px solid var(--light-gray); }
.meta-list li:last-child { border-bottom:none; }
.meta-label { font-size:.75rem; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:.5px; }
.meta-value { font-size:.9rem; color:var(--text-color); margin-top:2px; }
.meta-links { display:flex; flex-direction:column; gap:10px; }
.meta-link { display:flex; align-items:center; gap:var(--sp-1); padding:10px var(--sp-2); border-radius:var(--radius-sm); background:var(--light-bg); color:var(--text-color); font-size:.9rem; font-weight:500; transition:var(--transition); }
.meta-link:hover { background:var(--accent-color); color:#fff; transform:translateX(4px); }

/* Project tags (on project page) */
.project-tags { display:flex; flex-wrap:wrap; gap:5px; }
.project-tag { background:rgba(13,81,140,.08); color:var(--primary-color); border:1px solid rgba(13,81,140,.2); padding:3px 10px; border-radius:var(--radius-lg); font-size:.72rem; font-weight:500; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:992px) {
    .hero-title { font-size:2.5rem; }
    .about-stats { gap:var(--sp-2); }
    .hero-stats-strip { gap:var(--sp-4); }
}
@media (max-width:768px) {
    .section-padding { padding:var(--sp-6) 0; }
    .hero-title { font-size:2rem; }
    .hero-stats-strip { gap:var(--sp-3); }
    .hero-stat-num { font-size:1.5rem; }
    .social-icons { padding:var(--sp-1) 14px; gap:var(--sp-1); }
    .footer-bottom { justify-content:center; text-align:center; }
}
@media (max-width:480px) {
    .hero-stats-strip { gap:var(--sp-2); }
    .hero-stat-divider { display:none; }
    .filter-count-wrap { display:none; }
}

/* ═══════════════════════════════════════
   DARK MODE — Futuristic AI Theme
   Deep Space Navy + Electric Blue Glow
═══════════════════════════════════════ */

/* ── Smooth transition on theme switch ── */
*, *::before, *::after {
    transition: background-color .3s ease, border-color .3s ease, color .2s ease, box-shadow .3s ease;
}

/* ── CSS Variables Override ──────────── */
[data-theme="dark"] {
    --primary-color:   #0F5B9B;
    --secondary-color: #126DA6;
    --cyan:            #126DA6;
    --accent-color:    #0F5B9B;
    --accent-hover:    #0d4f87;
    --grad-accent:     linear-gradient(135deg, #0F5B9B 0%, #126DA6 100%);
    --grad-primary:    linear-gradient(135deg, #0F5B9B 0%, #126DA6 100%);

    /* Dark glass — noticeably lighter than background */
    --glass-bg:       rgba(22, 48, 90, 0.72);
    --glass-bg-md:    rgba(22, 48, 90, 0.88);
    --glass-border:   rgba(255,255,255,0.12);
    --glass-blur:     blur(24px) saturate(180%);
    --glass-shadow:   0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    --glass-hover:    rgba(28, 58, 105, 0.82);
    --white:          rgba(22, 48, 90, 0.72);

    --text-color:   #D8EEFF;
    --text-muted:   #7AAAC8;
    --light-bg:     #08101C;
    --surface-1:    #0A1828;
    --surface-2:    #0D1E32;
    --white:        #0A1828;
    --gray:         #7AAAC8;
    --light-gray:   rgba(15,91,155,.20);

    --shadow-sm:    0 2px 12px  rgba(0,0,0,.40);
    --shadow-md:    0 6px 28px  rgba(0,0,0,.50);
    --shadow-lg:    0 16px 52px rgba(0,0,0,.60);
    --shadow-cyan:  0 8px 32px  rgba(15,91,155,.40);
    --shadow-red:   0 8px 32px  rgba(18,109,166,.45);
    --box-shadow:   var(--shadow-md);

    --grad-text:    linear-gradient(135deg, #126DA6, #5DCFFF);
}

/* ── Hero Logo Card — Dark Mode ─────── */
[data-theme="dark"] .hero-logo-card {
    /* Dark mode — very deep navy, almost black */
    background: linear-gradient(145deg, #020810 0%, #040F1E 50%, #07192E 100%);
    border-color: rgba(255,255,255,.06);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 8px 40px rgba(0,0,0,.70),
        0 0 80px rgba(15,91,155,.25),
        0 0 140px rgba(18,109,166,.10);
}

/* ── Hero — Deep Dark Navy ───────────── */
[data-theme="dark"] .hero-section {
    background: linear-gradient(-45deg, #010810, #030D1C, #061528, #0A2646, #0D3A6B);
}
[data-theme="dark"] .hero-section::before {
    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;
}

/* ── Body — Deep Space with Glass Orbs ─ */
[data-theme="dark"] body {
    background-color: #03080F;
    background-image:
        radial-gradient(ellipse at 10% 15%, rgba(15,91,155,.60)  0%, transparent 45%),
        radial-gradient(ellipse at 90% 80%, rgba(18,109,166,.50) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 50%, rgba(255,255,255,.03) 0%, transparent 60%);
}

/* ── Navbar ──────────────────────────── */
[data-theme="dark"] .navbar-custom {
    background: rgba(8,18,35,.70) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}
[data-theme="dark"] .navbar-custom.scrolled {
    background: rgba(8,18,35,.85) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 28px rgba(0,0,0,.45);
}
[data-theme="dark"] .navbar-custom .nav-link { color: #C8E0F5 !important; }
[data-theme="dark"] .navbar-custom .nav-link:hover { color: #126DA6 !important; background: rgba(15,91,155,.10); }
[data-theme="dark"] .navbar-custom .nav-link.active {
    color: #126DA6 !important;
    background: rgba(15,91,155,.12);
    box-shadow: 0 0 16px rgba(15,91,155,.20);
}
[data-theme="dark"] .navbar-toggler { border-color: rgba(15,91,155,.3); }

/* ── Section Backgrounds ─────────────── */
[data-theme="dark"] .bg-light {
    background:
        radial-gradient(circle at 80% 20%, rgba(13,81,140,.18), transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(15,91,155,.12), transparent 50%),
        #08101C !important;
}
[data-theme="dark"] #about {
    background: transparent;
}
[data-theme="dark"] #skills.bg-light,
[data-theme="dark"] .bg-light {
    background: transparent !important;
}

/* ── Cards — Dark Glass ──────────────── */
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .skill-category,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-meta-card,
[data-theme="dark"] .contact-form {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
[data-theme="dark"] .portfolio-card:hover {
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 0 40px rgba(15,91,155,.30), 0 8px 40px rgba(0,0,0,.50);
}
[data-theme="dark"] .skill-category:hover {
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 0 32px rgba(15,91,155,.25), 0 8px 32px rgba(0,0,0,.45);
}
[data-theme="dark"] .service-card:hover {
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 0 36px rgba(15,91,155,.28), 0 8px 36px rgba(0,0,0,.48);
}

/* ── About Brand Card — Deep Glass ───── */
[data-theme="dark"] .about-brand-card {
    background: rgba(18,42,82,.80);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 0 60px rgba(15,91,155,.20), var(--glass-shadow);
}

/* ── Skill Progress Bars — Glow ──────── */
[data-theme="dark"] .skill-progress {
    box-shadow: 0 0 8px rgba(18,109,166,.50);
}
[data-theme="dark"] .skill-bar { background: rgba(15,91,155,.15); }

/* ── Contact & Forms ─────────────────── */
[data-theme="dark"] .contact-form,
[data-theme="dark"] .contact-info {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}
[data-theme="dark"] .form-control {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
    color: #D8EEFF;
}
[data-theme="dark"] .form-control:focus {
    background: #071525;
    border-color: rgba(18,109,166,.55);
    box-shadow: 0 0 0 3px rgba(15,91,155,.15);
    color: #D8EEFF;
}
[data-theme="dark"] .form-control::placeholder { color: #4A6A88; }

/* ── Portfolio Image Placeholder ──────── */
[data-theme="dark"] .portfolio-img { background: #071525; }

/* ── Skeleton Screens ────────────────── */
[data-theme="dark"] .skeleton-card { background: #0A1828; }
[data-theme="dark"] .skeleton-img,
[data-theme="dark"] .skeleton-line { background: rgba(15,91,155,.12); }

/* ── Trending Section ────────────────── */
[data-theme="dark"] .trending-section {
    background: linear-gradient(180deg, #060D18 0%, #08101C 100%);
    border-top: 1px solid rgba(15,91,155,.10);
}
[data-theme="dark"] .trending-section::before {
    background: var(--grad-primary);
    opacity: .6;
}

/* ── Trending Cards — Dark Glass ──────── */
[data-theme="dark"] .tc {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
[data-theme="dark"] .tc:hover {
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 0 40px rgba(15,91,155,.28), 0 8px 36px rgba(0,0,0,.50);
}
[data-theme="dark"] .tc-body h4 { color: #FFFFFF; }
[data-theme="dark"] .tc-body p  { color: rgba(255,255,255,.80); }
[data-theme="dark"] .portfolio-content h4 { color: #FFFFFF; }
[data-theme="dark"] .portfolio-content p  { color: rgba(255,255,255,.78); }
[data-theme="dark"] .meta-row { color: rgba(255,255,255,.90); }
[data-theme="dark"] .about-text { color: rgba(255,255,255,.85); }
[data-theme="dark"] .section-subtitle { color: rgba(255,255,255,.80); }
[data-theme="dark"] .service-card h4 { color: #FFFFFF; }
[data-theme="dark"] .service-card p  { color: rgba(255,255,255,.80); }
[data-theme="dark"] .contact-info h3,
[data-theme="dark"] .contact-form h3  { color: #FFFFFF; }
[data-theme="dark"] .contact-item p   { color: rgba(255,255,255,.85); }
[data-theme="dark"] .contact-item a   { color: #90C8F0; }
[data-theme="dark"] .form-control::placeholder { color: rgba(255,255,255,.40); }
[data-theme="dark"] .form-control     { color: rgba(255,255,255,.90); }
[data-theme="dark"] .skill-header h4 { color: #FFFFFF; }
[data-theme="dark"] .skill-name { color: rgba(255,255,255,.90); }

/* ── Meta Badges — Dark Mode ─────────── */
[data-theme="dark"] .meta-badge.badge-filled {
    background: rgba(15,91,155,.85);
    border-color: rgba(18,109,166,.90);
    color: #fff;
}
[data-theme="dark"] .meta-badge.badge-outline {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.88);
}
[data-theme="dark"] .meta-badge.badge-ghost {
    background: rgba(15,91,155,.22);
    border-color: rgba(255,255,255,.20);
    color: rgba(255,255,255,.88);
}
[data-theme="dark"] .tc-tag {
    background: rgba(13,81,140,.20);
    color: #90C4E8;
    border-color: rgba(15,91,155,.20);
}
[data-theme="dark"] .tc-industry { color: #126DA6; }
[data-theme="dark"] .tc-meta-badge {
    background: rgba(13,81,140,.20);
    color: #90C4E8;
    border-color: rgba(15,91,155,.15);
}
[data-theme="dark"] .tc-skeleton {
    background: rgba(15,91,155,.07);
}

/* ── Page Hero Banner ────────────────── */
[data-theme="dark"] .page-hero {
    background: linear-gradient(-45deg, #02070F, #051020, #071830, #0D2E52);
    border-bottom: 1px solid rgba(15,91,155,.15);
}
[data-theme="dark"] .page-hero .breadcrumb-item.active {
    background: linear-gradient(135deg, #0F5B9B 0%, #126DA6 100%);
    box-shadow: 0 4px 14px rgba(15,91,155,.45);
}
[data-theme="dark"] .page-hero .breadcrumb-item a {
    background: rgba(15,91,155,.20);
    border-color: rgba(15,91,155,.35);
}
[data-theme="dark"] .page-hero .breadcrumb-item a:hover {
    background: rgba(15,91,155,.30);
    border-color: rgba(18,109,166,.55);
}

/* ── Footer ──────────────────────────── */
[data-theme="dark"] .site-footer {
    background: linear-gradient(135deg, #020810 0%, #050F1E 60%, #071525 100%);
    border-top: 1px solid rgba(15,91,155,.12);
}

/* ── Social Icons ────────────────────── */
[data-theme="dark"] .social-icons {
    background: rgba(10,24,40,.90);
    border: 1px solid rgba(15,91,155,.20);
}

/* ── Portfolio Filters — Dark Mode ───── */
[data-theme="dark"] .filter-bar {
    background: linear-gradient(135deg, rgba(15,91,155,.70) 0%, rgba(18,109,166,.60) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .filter-pill.active {
    background: rgba(255,255,255,.90);
    color: var(--primary-color);
}
[data-theme="dark"] .filter-dropdown-menu {
    background: rgba(8,18,38,.88);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .filter-dropdown-item {
    color: #C8E0F5;
}
[data-theme="dark"] .filter-dropdown-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
[data-theme="dark"] .filter-dropdown-item.active {
    background: rgba(15,91,155,.35);
    color: #fff;
    font-weight: 600;
}
[data-theme="dark"] .filter-count {
    background: rgba(15,91,155,.30);
    color: #C8E0F5;
    border-color: rgba(255,255,255,.10);
}

/* ── Theme Toggle Button ─────────────── */
.theme-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--light-gray);
    background: transparent;
    color: var(--primary-color);
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
    margin-left: var(--sp-1);
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--surface-2);
    border-color: var(--secondary-color);
    box-shadow: 0 0 14px rgba(13,81,140,.20);
    transform: rotate(15deg);
}
[data-theme="dark"] .theme-toggle {
    border-color: rgba(15,91,155,.30);
    color: #126DA6;
    background: rgba(15,91,155,.06);
}
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(15,91,155,.12);
    box-shadow: 0 0 18px rgba(18,109,166,.35);
}