/* ===========================
   CSS VARIABLES & ROOT STYLES
   =========================== */

:root {
    /* Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1a2847;
    --bg-tertiary: #243556;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --accent: #0ea5e9;
    --accent-hover: #06b6d4;
    --accent-light: #00d9ff;
    --success: #10b981;
    --error: #ef4444;
    --border: #334155;
    --border-light: #475569;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'Courier New', monospace;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.4);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
}

/* ===========================
   RESET & BASE STYLES
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: var(--font-size-base);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

/* ===========================
   LAYOUT UTILITIES
   =========================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section {
    padding: var(--spacing-3xl) 0;
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }
}

/* ===========================
   TYPOGRAPHY
   =========================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    line-height: 1.8;
    max-width: 70ch;
}

@media (max-width: 768px) {
    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

    h3 {
        font-size: var(--font-size-xl);
    }
}

/* ===========================
   BUTTONS
   =========================== */

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    border: 2px solid transparent;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: var(--bg-primary);
    font-weight: 700;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.35);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-secondary:hover {
    background-color: rgba(14, 165, 233, 0.12);
    border-color: var(--accent-hover);
}

@media (max-width: 768px) {
    .btn {
        padding: 12px 20px;
        font-size: var(--font-size-sm);
        width: 100%;
        display: block;
    }

    .hero-cta {
        flex-direction: column;
    }
}

/* ===========================
   NAVIGATION
   =========================== */

.navbar {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-xl);
    align-items: center;
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    text-transform: capitalize;
    position: relative;
    padding: 4px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.cta-nav {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: var(--bg-primary);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.cta-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(14, 165, 233, 0.3);
}

.cta-nav::after {
    display: none;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 2.5px;
    background-color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background-color: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        gap: 0;
        padding: var(--spacing-lg) 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }

    .nav-menu.active {
        max-height: 500px;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-link {
        display: block;
        padding: var(--spacing-md) var(--spacing-lg);
        color: var(--text-secondary);
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active {
        background-color: rgba(14, 165, 233, 0.12);
        color: var(--accent);
    }

    .cta-nav {
        margin: var(--spacing-md) var(--spacing-lg);
        width: calc(100% - 2 * var(--spacing-lg));
        display: block;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* ===========================
   HERO SECTION
   =========================== */

.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: var(--spacing-2xl) 0;
    background: radial-gradient(circle at 80% 50%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 10;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.hero-content {
    max-width: 700px;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    margin-bottom: var(--spacing-md);
    animation: slideInUp 0.8s ease-out;
    font-weight: 800;
}

.hero-subtitle {
    font-size: var(--font-size-2xl);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
    animation: slideInUp 0.8s ease-out 0.1s both;
    max-width: 100%;
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.9;
    animation: slideInUp 0.8s ease-out 0.2s both;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    animation: slideInUp 0.8s ease-out 0.3s both;
}

.hero-visual {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 1s ease-out 0.4s both;
}

.network-diagram {
    max-width: 100%;
    height: 100%;
    filter: drop-shadow(0 20px 40px rgba(14, 165, 233, 0.15));
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero-cta,
    .hero-visual {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .hero-visual {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: var(--spacing-2xl) 0;
    }

    .hero-visual {
        display: none;
    }
}

/* ===========================
   SECTION TITLES
   =========================== */

.section-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2xl);
    position: relative;
    padding-bottom: var(--spacing-lg);
    font-weight: 800;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: var(--radius-sm);
}

/* ===========================
   ABOUT SECTION
   =========================== */

.about-section {
    background-color: var(--bg-primary);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-2xl);
    align-items: flex-start;
}

.about-text p {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.9;
}

.about-info-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.info-card {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(14, 165, 233, 0.2);
    transition: all var(--transition-base);
}

.info-card:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    border-color: var(--accent);
    transform: translateX(4px);
}

.info-card.certified {
    border-color: var(--accent);
}

.info-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.info-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent);
    margin-bottom: var(--spacing-xs);
}

.info-subtext {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   EXPERIENCE SECTION
   =========================== */

.experience-section {
    background-color: var(--bg-primary);
}

.experience-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.experience-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(26, 40, 71, 0.5) 100%);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--accent);
    transition: all var(--transition-base);
}

.experience-card:hover {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(36, 53, 86, 0.6) 100%);
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.experience-info {
    flex: 1;
}

.experience-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    font-weight: 700;
}

.experience-company {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin: 0;
}

.experience-date-pill {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(6, 182, 212, 0.1));
    color: var(--accent);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.experience-details {
    list-style: none;
    color: var(--text-secondary);
}

.experience-details li {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    position: relative;
    line-height: 1.7;
    font-size: var(--font-size-sm);
}

.experience-details li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .experience-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .experience-date-pill {
        width: fit-content;
    }
}

/* ===========================
   PROJECTS SECTION
   =========================== */

.projects-section {
    background-color: var(--bg-primary);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--spacing-xl);
}

.project-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(26, 40, 71, 0.5) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-card:hover {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(36, 53, 86, 0.6) 100%);
    border-color: var(--accent);
    transform: translateY(-12px);
    box-shadow: var(--shadow-xl);
}

.project-visual {
    height: 140px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(6, 182, 212, 0.06) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    padding: var(--spacing-lg);
}

.project-icon {
    width: 80px;
    height: 80px;
    animation: float 3s ease-in-out infinite;
}

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

.project-header {
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
}

.project-header h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.project-type {
    display: inline-block;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(6, 182, 212, 0.1));
    color: var(--accent);
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.project-description {
    color: var(--text-secondary);
    padding: 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
}

.project-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.tech-tag {
    background-color: rgba(14, 165, 233, 0.1);
    color: var(--accent);
    padding: 5px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid rgba(14, 165, 233, 0.2);
    transition: all var(--transition-fast);
}

.tech-tag:hover {
    background-color: rgba(14, 165, 233, 0.2);
    border-color: var(--accent);
}

.project-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    border-top: 1px solid var(--border);
    padding-top: var(--spacing-lg);
    margin-top: auto;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.detail-label {
    font-size: var(--font-size-sm);
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   SKILLS SECTION
   =========================== */

.skills-section {
    background-color: var(--bg-secondary);
    padding-bottom: var(--spacing-3xl);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.skill-category {
    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(15, 23, 42, 0.8) 100%);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
}

.skill-category:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15);
}

.skill-category-title {
    color: var(--accent);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.skill-chip {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(6, 182, 212, 0.08));
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid rgba(14, 165, 233, 0.15);
    transition: all var(--transition-fast);
}

.skill-chip:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.15));
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   CERTIFICATIONS SECTION
   =========================== */

.certifications-section {
    background-color: var(--bg-primary);
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    max-width: 600px;
}

.cert-card-compact {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    transition: all var(--transition-base);
}

.cert-card-compact:hover {
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.25);
    transform: translateY(-4px);
}

.cert-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(6, 182, 212, 0.1));
    border-radius: var(--radius-lg);
}

.cert-icon svg {
    width: 100%;
    height: 100%;
}

.cert-info {
    flex: 1;
}

.cert-label {
    font-size: var(--font-size-sm);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.cert-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: 700;
}

.cert-code {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 600;
    margin: 0;
}

@media (max-width: 768px) {
    .cert-card-compact {
        flex-direction: column;
        text-align: center;
    }

    .cert-icon {
        width: 100px;
        height: 100px;
    }
}

/* ===========================
   BEYOND IT SECTION
   =========================== */

.beyond-it-section {
    background-color: var(--bg-secondary);
}

.beyond-it-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.beyond-it-text h3 {
    color: var(--accent);
    margin-bottom: var(--spacing-lg);
    font-weight: 800;
}

.beyond-it-text p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.9;
}

.beyond-it-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    text-align: center;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    transition: all var(--transition-base);
    width: 100%;
    max-width: 400px;
}

.image-placeholder:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
}

.placeholder-icon {
    width: 100px;
    height: 100px;
    opacity: 0.6;
    transition: opacity var(--transition-base);
}

.image-placeholder:hover .placeholder-icon {
    opacity: 0.9;
}

.placeholder-text {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    transition: color var(--transition-base);
}

.image-placeholder:hover .placeholder-text {
    color: var(--accent);
}

@media (max-width: 1024px) {
    .beyond-it-content {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   CONTACT SECTION
   =========================== */

.contact-section {
    background-color: var(--bg-primary);
}

.contact-content {
    max-width: 900px;
    margin: 0 auto;
}

.contact-intro {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.9;
}

.contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.contact-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(26, 40, 71, 0.5) 100%);
    border: 1px solid var(--border-light);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    transition: all var(--transition-base);
}

.contact-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15);
    transform: translateY(-4px);
}

.contact-icon {
    font-size: 28px;
    min-width: 40px;
}

.contact-info {
    flex: 1;
}

.contact-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.contact-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: 600;
    word-break: break-word;
}

.contact-link {
    font-size: var(--font-size-lg);
    color: var(--accent);
    font-weight: 600;
    transition: all var(--transition-fast);
    display: inline-block;
}

.contact-link:hover {
    color: var(--accent-hover);
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .contact-details {
        grid-template-columns: 1fr;
    }

    .contact-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ===========================
   FOOTER
   =========================== */

.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    padding: var(--spacing-xl) 0;
    text-align: center;
    color: var(--text-secondary);
}

.footer p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 600;
}

/* ===========================
   ACCESSIBILITY & RESPONSIVE
   =========================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --accent: #00d9ff;
        --text-primary: #ffffff;
    }
}

/* Print styles */
@media print {
    body {
        background-color: white;
        color: black;
    }

    .navbar,
    .footer {
        display: none;
    }
}

/* ===== SHAMIL HERO SOCCER UPGRADE START ===== */


/* ==========================================================
   HERO — EXTRA POLISH
   ========================================================== */

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-bottom: 22px;
    padding: 8px 14px;

    border: 1px solid rgba(14, 165, 233, 0.28);
    border-radius: 999px;

    background: rgba(14, 165, 233, 0.08);

    color: var(--text-secondary);

    font-size: 13px;
    font-weight: 700;
}


.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 0 5px rgba(16, 185, 129, 0.10),
        0 0 14px rgba(16, 185, 129, 0.35);
}


.hero-proof {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 20px;

    margin-top: 24px;

    color: var(--text-secondary);

    font-size: 13px;
    font-weight: 600;
}


.hero-proof span {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}


.hero-proof span::before {
    content: '';

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 10px rgba(14, 165, 233, 0.55);
}


.hero-visual::before {
    content: '';

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    border: 1px solid rgba(14, 165, 233, 0.10);

    box-shadow:
        0 0 0 35px rgba(14, 165, 233, 0.025),
        0 0 70px rgba(14, 165, 233, 0.08);

    pointer-events: none;
}


/* ==========================================================
   BEYOND IT — FEATURED SOCCER SECTION
   ========================================================== */

.beyond-it-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 38%,
            rgba(14, 165, 233, 0.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            var(--bg-secondary) 0%,
            rgba(26, 40, 71, 0.92) 100%
        );
}


.beyond-it-section::before {
    content: '';

    position: absolute;

    top: 80px;
    right: -120px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    border: 1px solid rgba(14, 165, 233, 0.07);

    pointer-events: none;
}


.beyond-it-feature {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.92fr);

    gap: 64px;

    align-items: center;
}


.beyond-it-copy {
    max-width: 650px;
}


.beyond-it-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--accent);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.beyond-it-copy h3 {
    margin-bottom: 20px;

    color: var(--text-primary);

    font-size: clamp(2rem, 4vw, 2.55rem);

    font-weight: 800;
}


.beyond-it-copy p {
    margin-bottom: 18px;

    color: var(--text-secondary);

    line-height: 1.9;
}


/* ==========================================================
   SOCCER STATS
   ========================================================== */

.soccer-stats {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin: 30px 0;
}


.soccer-stat {
    min-height: 105px;

    padding: 18px 12px;

    border:
        1px solid rgba(14, 165, 233, 0.22);

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            rgba(14, 165, 233, 0.11),
            rgba(6, 182, 212, 0.035)
        );

    text-align: center;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base);
}


.soccer-stat:hover {
    transform: translateY(-3px);

    border-color:
        rgba(14, 165, 233, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(14, 165, 233, 0.16),
            rgba(6, 182, 212, 0.06)
        );
}


.soccer-stat strong {
    display: block;

    margin-bottom: 5px;

    color: var(--accent);

    font-size: 25px;

    line-height: 1.1;
}


.soccer-stat span {
    display: block;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================================
   FUTURE SOCCER PAGE BUTTON
   ========================================================== */

.soccer-more-btn {
    margin-top: 2px;
}


.soccer-more-btn:disabled {
    opacity: 0.72;

    cursor: default;

    transform: none;

    box-shadow: none;
}


.soccer-more-btn:disabled:hover {
    background-color: transparent;

    border-color: var(--accent);
}


.soccer-coming-soon {
    margin: 10px 0 0;

    color: var(--text-secondary);

    font-size: 12px;

    opacity: 0.70;
}


/* ==========================================================
   FEATURED SOCCER PHOTO
   ========================================================== */

.beyond-it-photo-card {
    position: relative;

    width: 100%;
    max-width: 460px;

    margin-left: auto;

    padding-bottom: 30px;
}


.photo-frame {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(14, 165, 233, 0.36);

    border-radius: 22px;

    background: var(--bg-primary);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.32),
        0 0 50px rgba(14, 165, 233, 0.08);
}


.photo-frame::before {
    content: '';

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(15, 23, 42, 0.32),
            transparent 42%
        );

    pointer-events: none;
}


.photo-frame img {
    display: block;

    width: 100%;
    height: 570px;

    object-fit: cover;

    object-position: center;

    transition:
        transform 450ms ease,
        filter 450ms ease;
}


.beyond-it-photo-card:hover
.photo-frame img {
    transform: scale(1.025);
}


.photo-caption {
    position: absolute;

    z-index: 2;

    right: 22px;
    bottom: 0;
    left: 22px;

    padding: 16px 18px;

    border:
        1px solid rgba(14, 165, 233, 0.30);

    border-radius: 14px;

    background:
        rgba(15, 23, 42, 0.93);

    box-shadow: var(--shadow-lg);

    backdrop-filter: blur(14px);
}


.photo-caption span {
    display: block;

    margin-bottom: 4px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.photo-caption strong {
    color: var(--text-primary);

    font-size: 14px;

    line-height: 1.45;
}


/* ==========================================================
   CONTACT SMALL POLISH
   ========================================================== */

.cta-nav.active,
.cta-nav:hover,
.cta-nav:focus-visible {
    color: var(--bg-primary);
}


.contact-info {
    min-width: 0;
}


.contact-email {
    display: inline-block;

    max-width: 100%;

    color: var(--text-primary);

    font-size: 15px;

    word-break: normal;

    overflow-wrap: anywhere;
}


.contact-email:hover {
    color: var(--accent);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .beyond-it-feature {
        grid-template-columns: 1fr;

        gap: 48px;
    }


    .beyond-it-photo-card {
        width: min(100%, 520px);

        margin: 0 auto;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .hero-status {
        font-size: 12px;
    }


    .hero-proof {
        gap: 9px 14px;
    }


    .soccer-stats {
        grid-template-columns: 1fr;
    }


    .soccer-stat {
        min-height: auto;
    }


    .photo-frame img {
        height: min(130vw, 540px);
    }


    .photo-caption {
        position: relative;

        right: auto;
        bottom: auto;
        left: auto;

        margin-top: 12px;
    }


    .beyond-it-photo-card {
        padding-bottom: 0;
    }
}


@media (min-width: 1100px) {

    .contact-email {
        white-space: nowrap;
    }
}


/* ===== SHAMIL HERO SOCCER UPGRADE END ===== */


/* ===== HERO V3 START ===== */


/* ==========================================================
   HERO BACKGROUND
   ========================================================== */

.hero {
    position: relative;

    background:
        radial-gradient(
            circle at 82% 48%,
            rgba(14, 165, 233, 0.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 14% 15%,
            rgba(6, 182, 212, 0.035),
            transparent 26%
        ),
        var(--bg-primary);
}


.hero::before {
    content: '';

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.14;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.045) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, 0.45) 58%,
            black 100%
        );
}


/* ==========================================================
   HERO LEFT CONTENT
   ========================================================== */

.hero-content {
    position: relative;

    z-index: 3;
}


.hero-title {
    letter-spacing: -1.5px;

    text-shadow:
        0 10px 35px rgba(0, 0, 0, 0.28);
}


.hero-subtitle {
    line-height: 1.45;
}


.hero-description {
    max-width: 630px;
}


/* ==========================================================
   HERO VISUAL
   ========================================================== */

.hero-visual {
    position: relative;

    min-height: 480px;

    display: flex;

    justify-content: center;
    align-items: center;
}


.hero-visual::before {
    display: none;
}


.hero-visual-shell {
    position: relative;

    width: min(100%, 475px);

    aspect-ratio: 1 / 1;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(14, 165, 233, 0.16);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at center,
            rgba(14, 165, 233, 0.10),
            transparent 47%
        ),
        linear-gradient(
            145deg,
            rgba(26, 40, 71, 0.62),
            rgba(15, 23, 42, 0.42)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(10px);

    overflow: visible;
}


/* subtle top glow */

.hero-visual-shell::before {
    content: '';

    position: absolute;

    top: -1px;
    left: 18%;

    width: 64%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(14, 165, 233, 0.75),
            transparent
        );
}


/* ==========================================================
   INFRASTRUCTURE LABEL
   ========================================================== */

.hero-network-label {
    position: absolute;

    top: 22px;
    left: 24px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 11px;

    border:
        1px solid rgba(14, 165, 233, 0.18);

    border-radius: 999px;

    background:
        rgba(15, 23, 42, 0.58);

    color: var(--text-secondary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.3px;
}


.network-live-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 12px rgba(14, 165, 233, 0.8);
}


/* ==========================================================
   NETWORK GRAPHIC
   ========================================================== */

.network-diagram {
    width: 76%;
    height: 76%;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 20px 35px
            rgba(14, 165, 233, 0.12)
        );
}


.network-line {
    stroke: #0ea5e9;

    stroke-width: 1.4;

    opacity: 0.43;
}


.network-line-soft {
    opacity: 0.23;
}


.network-node {
    fill: #0ea5e9;

    opacity: 0.82;
}


.network-node-center {
    fill: #00d9ff;
}


.network-node-ring {
    fill: none;

    stroke: #0ea5e9;

    stroke-width: 2;

    opacity: 0.35;
}


.network-small-node {
    fill: #06b6d4;

    opacity: 0.45;
}


/* ==========================================================
   ORBITS
   ========================================================== */

.hero-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(14, 165, 233, 0.08);

    pointer-events: none;
}


.hero-orbit-one {
    width: 305px;
    height: 305px;
}


.hero-orbit-two {
    width: 385px;
    height: 385px;

    border-color:
        rgba(14, 165, 233, 0.045);
}


/* ==========================================================
   FLOATING TECH CARDS
   ========================================================== */

.hero-tech-card {
    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 158px;

    padding: 11px 13px;

    border:
        1px solid rgba(14, 165, 233, 0.23);

    border-radius: 13px;

    background:
        rgba(15, 23, 42, 0.92);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.30);

    backdrop-filter: blur(12px);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease;
}


.hero-tech-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(14, 165, 233, 0.65);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(14, 165, 233, 0.07);
}


.hero-tech-card small {
    display: block;

    margin-bottom: 1px;

    color: var(--text-secondary);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.hero-tech-card strong {
    display: block;

    color: var(--text-primary);

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


.tech-card-windows {
    top: 25%;

    left: -27px;
}


.tech-card-network {
    top: 26%;

    right: -24px;
}


.tech-card-cloud {
    right: 8%;

    bottom: -19px;
}


/* ==========================================================
   WINDOWS ICON
   ========================================================== */

.tech-card-icon {
    width: 27px;
    height: 27px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    grid-template-rows:
        repeat(2, 1fr);

    gap: 2px;
}


.tech-card-icon span {
    display: block;

    background: var(--accent);

    border-radius: 1px;
}


/* ==========================================================
   NETWORK MINI ICON
   ========================================================== */

.network-mini-icon {
    position: relative;

    width: 30px;
    height: 28px;
}


.network-mini-icon span {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 8px rgba(14, 165, 233, 0.35);
}


.network-mini-icon span:nth-child(1) {
    top: 0;
    left: 11px;
}


.network-mini-icon span:nth-child(2) {
    left: 0;
    bottom: 0;
}


.network-mini-icon span:nth-child(3) {
    right: 0;
    bottom: 0;
}


.network-mini-icon::before,
.network-mini-icon::after {
    content: '';

    position: absolute;

    top: 10px;

    width: 17px;
    height: 1px;

    background:
        rgba(14, 165, 233, 0.65);
}


.network-mini-icon::before {
    left: 2px;

    transform: rotate(-48deg);
}


.network-mini-icon::after {
    right: 2px;

    transform: rotate(48deg);
}


/* ==========================================================
   CLOUD ICON
   ========================================================== */

.cloud-mini-icon {
    width: 30px;

    color: var(--accent);

    font-size: 24px;

    line-height: 1;

    text-align: center;

    filter:
        drop-shadow(
            0 0 7px
            rgba(14, 165, 233, 0.25)
        );
}


/* ==========================================================
   STATUS / PROOF POLISH
   ========================================================== */

.hero-status {
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


.hero-proof {
    padding-top: 3px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, 0.85fr);

        gap: 34px;
    }


    .hero-tech-card {
        min-width: 140px;
    }


    .tech-card-windows {
        left: -8px;
    }


    .tech-card-network {
        right: -7px;
    }

}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 900px) {

    .hero-container {
        grid-template-columns: 1fr;
    }


    .hero-content {
        max-width: 760px;
    }


    .hero-visual {
        min-height: 430px;

        margin-top: 20px;
    }


    .hero-visual-shell {
        width: min(100%, 470px);
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .hero-visual {
        display: flex;

        min-height: 310px;

        margin-top: 22px;
    }


    .hero-visual-shell {
        width: min(100%, 330px);

        border-radius: 24px;
    }


    .hero-network-label {
        top: 14px;
        left: 15px;

        font-size: 9px;
    }


    .network-diagram {
        width: 72%;
        height: 72%;
    }


    .hero-orbit-one {
        width: 220px;
        height: 220px;
    }


    .hero-orbit-two {
        width: 280px;
        height: 280px;
    }


    .hero-tech-card {
        min-width: auto;

        padding: 8px 10px;

        gap: 7px;
    }


    .hero-tech-card strong {
        font-size: 10px;
    }


    .hero-tech-card small {
        display: none;
    }


    .tech-card-windows {
        left: 5px;

        top: 30%;
    }


    .tech-card-network {
        right: 5px;

        top: 30%;
    }


    .tech-card-cloud {
        right: 12px;

        bottom: 4px;
    }


    .tech-card-icon {
        width: 21px;
        height: 21px;
    }


    .network-mini-icon {
        transform: scale(0.8);
    }


    .cloud-mini-icon {
        width: 22px;

        font-size: 19px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-tech-card {
        transition: none;
    }


    .hero-tech-card:hover {
        transform: none;
    }

}


/* ===== HERO V3 END ===== */





/* ===== PREMIUM DARK THEME START ===== */


/* ==========================================================
   DEEPER COLOR SYSTEM
   ========================================================== */

:root {

    --bg-primary: #080d18;

    --bg-secondary: #0d1524;

    --bg-tertiary: #111c30;

    --text-primary: #edf2f8;

    --text-secondary: #99a8bd;

    --accent: #2563eb;

    --accent-hover: #3b82f6;

    --accent-light: #60a5fa;

    --border: #1c2a3d;

    --border-light: #2b3c55;

    --success: #22c55e;


    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.22);

    --shadow-md:
        0 8px 24px rgba(0, 0, 0, 0.28);

    --shadow-lg:
        0 18px 50px rgba(0, 0, 0, 0.38);

    --shadow-xl:
        0 30px 80px rgba(0, 0, 0, 0.48);

}


/* ==========================================================
   GLOBAL PAGE
   ========================================================== */

body {

    background:
        linear-gradient(
            180deg,
            #080d18 0%,
            #09101d 50%,
            #080d18 100%
        );

    color: var(--text-primary);

}


/* ==========================================================
   NAVBAR
   ========================================================== */

.navbar {

    background:
        rgba(7, 12, 22, 0.94);

    border-bottom:
        1px solid rgba(96, 165, 250, 0.09);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.26);

}


.logo {

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #60a5fa
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}


/* ==========================================================
   NAV LINKS
   ========================================================== */

.nav-link {

    color: #96a5bb;

}


.nav-link:hover,
.nav-link.active {

    color: #60a5fa;

}


.nav-link::after {

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

}


/* ==========================================================
   CONTACT NAV BUTTON
   ========================================================== */

.cta-nav {

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    color: #f8fafc;

    border:
        1px solid rgba(96, 165, 250, 0.24);

    box-shadow:
        0 8px 22px rgba(37, 99, 235, 0.18);

}


.cta-nav:hover {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

}


/* ==========================================================
   HERO
   ========================================================== */

.hero {

    background:

        radial-gradient(
            circle at 79% 42%,
            rgba(37, 99, 235, 0.12),
            transparent 31%
        ),

        radial-gradient(
            circle at 17% 19%,
            rgba(59, 130, 246, 0.045),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #080d18 0%,
            #0a1220 48%,
            #08101d 100%
        );

}


/* ==========================================================
   SMALLER, CLEANER HERO NAME
   ========================================================== */

.hero-title {

    font-size:
        clamp(
            2.7rem,
            5vw,
            3.55rem
        );

    line-height: 1.06;

    letter-spacing: -1.6px;

    margin-bottom: 20px;

    text-shadow:
        0 15px 40px rgba(0, 0, 0, 0.38);

}


/* ==========================================================
   HERO SUBTITLE
   ========================================================== */

.hero-subtitle {

    background:
        linear-gradient(
            90deg,
            #3b82f6 0%,
            #60a5fa 55%,
            #93c5fd 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size:
        clamp(
            1.35rem,
            2.5vw,
            1.75rem
        );

    line-height: 1.42;

    font-weight: 750;

}


/* ==========================================================
   HERO DESCRIPTION
   ========================================================== */

.hero-description {

    color: #9ba9bd;

}


/* ==========================================================
   OPEN-TO-WORK CHIP
   ========================================================== */

.hero-status {

    background:
        rgba(13, 26, 46, 0.78);

    color: #aab8ca;

    border:
        1px solid rgba(96, 165, 250, 0.18);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.02);

}


/* ==========================================================
   HERO PRIMARY BUTTON
   ========================================================== */

.btn-primary {

    background:
        linear-gradient(
            135deg,
            #1d4ed8 0%,
            #2563eb 55%,
            #3b82f6 100%
        );

    color: white;

    border:
        1px solid rgba(96, 165, 250, 0.22);

    box-shadow:
        0 10px 30px
        rgba(37, 99, 235, 0.20);

}


.btn-primary:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    box-shadow:
        0 15px 36px
        rgba(37, 99, 235, 0.26);

}


/* ==========================================================
   SECONDARY BUTTON
   ========================================================== */

.btn-secondary {

    color: #60a5fa;

    border-color:
        rgba(96, 165, 250, 0.55);

    background:
        rgba(12, 21, 37, 0.65);

}


.btn-secondary:hover {

    color: #93c5fd;

    background:
        rgba(37, 99, 235, 0.09);

    border-color:
        #3b82f6;

}


/* ==========================================================
   HERO PROOF ROW
   ========================================================== */

.hero-proof {

    color: #8494aa;

}


.hero-proof span::before {

    background: #3b82f6;

    box-shadow:
        0 0 8px
        rgba(59, 130, 246, 0.45);

}


/* ==========================================================
   HERO VISUAL PANEL
   ========================================================== */

.hero-visual-shell {

    background:

        radial-gradient(
            circle at 50% 47%,
            rgba(37, 99, 235, 0.11),
            transparent 43%
        ),

        linear-gradient(
            145deg,
            rgba(13, 24, 42, 0.97),
            rgba(8, 15, 28, 0.94)
        );

    border:
        1px solid rgba(96, 165, 250, 0.13);

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

}


/* ==========================================================
   FLOATING HERO CARDS
   ========================================================== */

.hero-tech-card {

    background:
        rgba(8, 15, 28, 0.95);

    border:
        1px solid rgba(96, 165, 250, 0.19);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.34);

}


.hero-tech-card:hover {

    border-color:
        rgba(96, 165, 250, 0.43);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(37, 99, 235, 0.07);

}


/* ==========================================================
   HERO SVG
   ========================================================== */

.network-line {

    stroke: #3b82f6;

}


.network-node {

    fill: #3b82f6;

}


.network-node-center {

    fill: #60a5fa;

}


.network-node-ring {

    stroke: #2563eb;

}


.network-small-node {

    fill: #60a5fa;

}


/* ==========================================================
   SECTION TITLES
   ========================================================== */

.section-title {

    color: #edf2f8;

}


.section-title::after {

    background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #3b82f6
        );

}


/* ==========================================================
   ABOUT
   ========================================================== */

.about-section {

    background:
        linear-gradient(
            180deg,
            #080d18,
            #0a111e
        );

}


.info-card {

    background:
        linear-gradient(
            135deg,
            rgba(18, 33, 55, 0.80),
            rgba(9, 18, 33, 0.85)
        );

    border:
        1px solid rgba(96, 165, 250, 0.12);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16);

}


.info-card:hover {

    background:
        linear-gradient(
            135deg,
            rgba(22, 40, 66, 0.90),
            rgba(10, 19, 35, 0.92)
        );

    border-color:
        rgba(59, 130, 246, 0.42);

}


.info-value {

    color: #60a5fa;

}


/* ==========================================================
   EXPERIENCE
   ========================================================== */

.experience-section {

    background:
        #080d18;

}


.experience-card {

    background:
        linear-gradient(
            145deg,
            #101a2c 0%,
            #0b1423 100%
        );

    border:
        1px solid rgba(86, 108, 140, 0.26);

    border-left:
        3px solid #2563eb;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.22);

}


.experience-card:hover {

    background:
        linear-gradient(
            145deg,
            #142039 0%,
            #0c1627 100%
        );

    border-color:
        rgba(59, 130, 246, 0.30);

    border-left-color:
        #3b82f6;

}


.experience-company {

    color: #60a5fa;

}


.experience-date-pill {

    background:
        rgba(37, 99, 235, 0.11);

    color: #60a5fa;

    border:
        1px solid rgba(59, 130, 246, 0.18);

}


/* ==========================================================
   PROJECTS
   ========================================================== */

.projects-section {

    background:
        linear-gradient(
            180deg,
            #080d18,
            #09111f
        );

}


.project-card {

    background:
        linear-gradient(
            145deg,
            #101a2c,
            #0a1322
        );

    border:
        1px solid rgba(82, 103, 133, 0.27);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22);

}


.project-card:hover {

    background:
        linear-gradient(
            145deg,
            #14223a,
            #0b1526
        );

    border-color:
        rgba(59, 130, 246, 0.44);

    transform:
        translateY(-8px);

}


.project-visual {

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.12),
            rgba(9, 18, 32, 0.50)
        );

    border-bottom:
        1px solid rgba(96, 165, 250, 0.10);

}


.project-type {

    background:
        rgba(37, 99, 235, 0.11);

    color: #60a5fa;

    border:
        1px solid rgba(59, 130, 246, 0.20);

}


.tech-tag {

    color: #80b4fa;

    background:
        rgba(37, 99, 235, 0.075);

    border:
        1px solid rgba(59, 130, 246, 0.16);

}


/* ==========================================================
   SKILLS
   ========================================================== */

.skills-section {

    background:
        linear-gradient(
            180deg,
            #0c1423,
            #0a111e
        );

}


.skill-category {

    background:
        linear-gradient(
            145deg,
            #0b1423,
            #080f1c
        );

    border:
        1px solid rgba(86, 108, 140, 0.28);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

}


.skill-category:hover {

    border-color:
        rgba(59, 130, 246, 0.40);

}


.skill-category-title {

    color: #60a5fa;

}


.skill-chip {

    color: #a8b8cb;

    background:
        rgba(29, 78, 216, 0.075);

    border:
        1px solid rgba(59, 130, 246, 0.13);

}


.skill-chip:hover {

    color: #93c5fd;

    background:
        rgba(37, 99, 235, 0.13);

    border-color:
        rgba(59, 130, 246, 0.38);

}


/* ==========================================================
   CERTIFICATION
   ========================================================== */

.certifications-section {

    background:
        #080d18;

}


.cert-card-compact {

    background:
        linear-gradient(
            145deg,
            #101a2c,
            #0a1423
        );

    border:
        1px solid rgba(59, 130, 246, 0.35);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.24);

}


.cert-card-compact:hover {

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.32),
        0 0 22px rgba(37, 99, 235, 0.08);

}


.cert-label {

    color: #60a5fa;

}


/* ==========================================================
   SOCCER / BEYOND IT
   ========================================================== */

.beyond-it-section {

    background:

        radial-gradient(
            circle at 86% 39%,
            rgba(37, 99, 235, 0.09),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #0c1525,
            #0a1220
        );

}


.soccer-stat {

    background:
        linear-gradient(
            145deg,
            #111d31,
            #0c1627
        );

    border:
        1px solid rgba(59, 130, 246, 0.20);

}


.soccer-stat strong {

    color: #60a5fa;

}


.photo-frame {

    border:
        1px solid rgba(96, 165, 250, 0.24);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.40);

}


.photo-caption {

    background:
        rgba(8, 14, 25, 0.95);

    border:
        1px solid rgba(96, 165, 250, 0.19);

}


/* ==========================================================
   CONTACT
   ========================================================== */

.contact-section {

    background:
        linear-gradient(
            180deg,
            #080d18,
            #090f1b
        );

}


.contact-card {

    background:
        linear-gradient(
            145deg,
            #101a2c,
            #0a1322
        );

    border:
        1px solid rgba(86, 108, 140, 0.26);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.20);

}


.contact-card:hover {

    border-color:
        rgba(59, 130, 246, 0.36);

}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer {

    background:
        #070c15;

    border-top:
        1px solid rgba(96, 165, 250, 0.08);

}


/* ==========================================================
   DESKTOP REFINEMENT
   ========================================================== */

@media (min-width: 1100px) {

    .hero {

        min-height: 86vh;

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .hero-title {

        font-size:
            clamp(
                2.4rem,
                12vw,
                3rem
            );

    }


    .hero-subtitle {

        font-size:
            1.25rem;

    }

}


/* ===== PREMIUM DARK THEME END ===== */


/* ===== HERO TEXT POLISH START ===== */


/* ==========================================================
   HERO NAME
   ========================================================== */

.hero-title {

    font-size:
        clamp(
            2.6rem,
            4.5vw,
            3.25rem
        );

    line-height: 1.03;

    letter-spacing: -1.4px;

    margin-bottom: 18px;

    background:
        linear-gradient(
            105deg,
            #8fb8f7 0%,
            #5e8fe8 38%,
            #3568c9 72%,
            #274d9f 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

    text-shadow: none;
}


/* ==========================================================
   HERO SUBTITLE
   ========================================================== */

.hero-subtitle {

    font-size:
        clamp(
            1.3rem,
            2.2vw,
            1.65rem
        );

    line-height: 1.42;

    margin-bottom: 22px;

    background:
        linear-gradient(
            100deg,
            #6ea2ee 0%,
            #447bd4 52%,
            #2f5fb5 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

    font-weight: 750;
}


/* ==========================================================
   HERO DESCRIPTION
   ========================================================== */

.hero-description {

    color: #8799b4;

    font-size: 17px;

    line-height: 1.85;

    margin-bottom: 28px;
}


/* ==========================================================
   HERO STATUS
   ========================================================== */

.hero-status {

    color: #93a8c3;

    background:
        linear-gradient(
            135deg,
            rgba(18, 31, 53, 0.88),
            rgba(11, 21, 38, 0.88)
        );

    border:
        1px solid rgba(72, 116, 190, 0.26);
}


/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.btn-primary {

    background:
        linear-gradient(
            135deg,
            #1e4fae 0%,
            #2a61c7 52%,
            #356fdb 100%
        );

    border:
        1px solid rgba(95, 145, 225, 0.26);

    color: #dce8fb;

    box-shadow:
        0 10px 30px rgba(22, 67, 150, 0.24);
}


.btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #285fc8,
            #3c79e4
        );

    color: #edf4ff;

    box-shadow:
        0 14px 34px rgba(37, 84, 174, 0.28);
}


/* ==========================================================
   SECONDARY BUTTONS
   ========================================================== */

.btn-secondary {

    color: #7ea7e8;

    border-color:
        rgba(74, 116, 184, 0.62);

    background:
        linear-gradient(
            135deg,
            rgba(13, 23, 40, 0.92),
            rgba(10, 18, 33, 0.86)
        );
}


.btn-secondary:hover {

    color: #a3c1f0;

    border-color:
        rgba(84, 135, 220, 0.8);

    background:
        rgba(34, 70, 134, 0.15);
}


/* ==========================================================
   HERO PROOF ROW
   ========================================================== */

.hero-proof {

    color: #788ba7;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .hero-title {

        font-size:
            clamp(
                2.25rem,
                11vw,
                2.8rem
            );
    }


    .hero-subtitle {

        font-size: 1.2rem;
    }


    .hero-description {

        font-size: 16px;
    }

}


/* ===== HERO TEXT POLISH END ===== */


/* ===== FINAL NAME POLISH START ===== */

.hero-title {
    font-size:
        clamp(
            2.45rem,
            4.1vw,
            3rem
        );

    background:
        linear-gradient(
            105deg,
            #6f9fe8 0%,
            #4b78d2 48%,
            #2f5db6 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    color: transparent;

    letter-spacing: -1.3px;
    line-height: 1.04;
}

@media (max-width: 768px) {
    .hero-title {
        font-size:
            clamp(
                2.15rem,
                10.5vw,
                2.65rem
            );
    }
}

/* ===== FINAL NAME POLISH END ===== */


/* ===== NAME NODE COLOR START ===== */

.hero-title {
    background:
        linear-gradient(
            105deg,
            #7fb2ff 0%,
            #4f8df7 42%,
            #2f6fe4 72%,
            #1f56c7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 0 18px rgba(79, 141, 247, 0.08);
}

/* ===== NAME NODE COLOR END ===== */


/* ===== EXACT MOCKUP HERO START ===== */


/* ==========================================================
   HERO BASE
   ========================================================== */

.mockup-hero {

    min-height:
        calc(100vh - 84px);

    padding:
        24px 0 44px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 77% 45%,
            rgba(31, 86, 199, 0.11),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #050a12 0%,
            #07101d 54%,
            #050b15 100%
        );

}


.mockup-hero-container {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        0 64px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(580px, 1.06fr);

    align-items: center;

    gap: 70px;

}


/* ==========================================================
   LEFT SIDE
   ========================================================== */

.mockup-hero-copy {

    max-width: 690px;

}


.mockup-hero .hero-title {

    margin:
        0 0 30px;

    font-size:
        clamp(
            3.2rem,
            4.7vw,
            4.45rem
        );

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -2px;

    background:
        linear-gradient(
            105deg,
            #7fb2ff 0%,
            #4d88ef 42%,
            #2f6fe4 72%,
            #2058ca 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

}


.mockup-hero .hero-subtitle {

    max-width: 690px;

    margin:
        0 0 30px;

    font-size:
        clamp(
            1.55rem,
            2.15vw,
            2rem
        );

    line-height: 1.4;

    font-weight: 760;

    background:
        linear-gradient(
            100deg,
            #72a8f6,
            #4e84e2 55%,
            #3268c6
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

}


.mockup-hero .hero-description {

    max-width: 670px;

    margin:
        0 0 32px;

    color: #93a4ba;

    font-size: 17px;

    line-height: 1.95;

}


.mockup-hero .hero-cta {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

}


.mockup-hero .btn {

    padding:
        14px 28px;

    border-radius: 13px;

    font-size: 16px;

    font-weight: 700;

}


.mockup-hero .btn-primary {

    color: #f7fbff;

    border:
        1px solid rgba(100, 153, 238, 0.27);

    background:
        linear-gradient(
            135deg,
            #1752c3,
            #2369e6
        );

    box-shadow:
        0 14px 32px
        rgba(19, 80, 190, 0.25);

}


.mockup-hero .btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #2166dc,
            #327df2
        );

}


.mockup-hero .btn-secondary {

    color: #78a9ec;

    border:
        2px solid #28558e;

    background:
        rgba(7, 14, 26, 0.72);

}


.mockup-hero .btn-secondary:hover {

    color: #a3c7f7;

    border-color: #3c72ba;

    background:
        rgba(26, 63, 117, 0.13);

}


/* ==========================================================
   PROOF ROW
   ========================================================== */

.mockup-hero .hero-proof {

    display: flex;

    flex-wrap: wrap;

    gap:
        12px 26px;

    margin-top: 27px;

    color: #8293aa;

    font-size: 13px;

    font-weight: 650;

}


.mockup-hero .hero-proof span {

    display: flex;

    align-items: center;

    gap: 10px;

}


.mockup-hero .hero-proof span::before {

    content: '';

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #357ff2;

    box-shadow:
        0 0 9px
        rgba(53, 127, 242, 0.38);

}


/* ==========================================================
   RIGHT TECH PANEL
   ========================================================== */

.mockup-tech-panel {

    position: relative;

    width: 100%;

    max-width: 650px;

    aspect-ratio: 1 / 1;

    justify-self: center;

    border:
        1px solid rgba(58, 108, 180, 0.30);

    border-radius: 34px;

    background:

        radial-gradient(
            circle at center,
            rgba(22, 77, 160, 0.10),
            transparent 44%
        ),

        linear-gradient(
            145deg,
            rgba(10, 25, 46, 0.96),
            rgba(5, 14, 27, 0.98)
        );

    box-shadow:

        0 34px 80px
        rgba(0, 0, 0, 0.34),

        inset 0 1px 0
        rgba(255, 255, 255, 0.02);

}


/* subtle top accent */

.mockup-tech-panel::before {

    content: '';

    position: absolute;

    top: -1px;
    left: 18%;

    width: 64%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(48, 113, 224, 0.56),
            transparent
        );

}


/* ==========================================================
   PANEL LABEL
   ========================================================== */

.panel-label {

    position: absolute;

    z-index: 12;

    top: 28px;
    left: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 14px;

    border:
        1px solid rgba(47, 111, 228, 0.24);

    border-radius: 999px;

    background:
        rgba(7, 18, 34, 0.88);

    color: #9baac0;

    font-size: 12px;

    font-weight: 700;

}


.panel-label span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #2f75ef;

    box-shadow:
        0 0 10px
        rgba(47, 117, 239, 0.58);

}


/* ==========================================================
   ORBITS
   ========================================================== */

.orbit {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid rgba(48, 100, 175, 0.11);

}


.orbit-one {

    width: 270px;
    height: 270px;

}


.orbit-two {

    width: 390px;
    height: 390px;

}


.orbit-three {

    width: 505px;
    height: 505px;

    border-color:
        rgba(48, 100, 175, 0.065);

}


/* ==========================================================
   NETWORK
   ========================================================== */

.mockup-network {

    position: absolute;

    z-index: 4;

    width: 66%;
    height: 66%;

    top: 17%;
    left: 17%;

}


.mock-net-line {

    stroke: #256bd7;

    stroke-width: 1.5;

    opacity: 0.80;

}


.mock-net-line.soft {

    opacity: 0.42;

}


.mock-node {

    fill: #337ce9;

    filter:
        drop-shadow(
            0 0 6px
            rgba(51, 124, 233, 0.48)
        );

}


.center-ring-large {

    fill: rgba(23, 83, 171, 0.10);

    stroke: rgba(67, 135, 236, 0.22);

    stroke-width: 2;

}


.center-ring {

    fill: rgba(26, 94, 197, 0.18);

    stroke: #337de9;

    stroke-width: 2;

}


.center-node {

    fill: #6daeff;

}


.small-accent-node {

    fill: #2e6fc7;

    opacity: 0.70;

}


/* ==========================================================
   FLOATING CARDS
   ========================================================== */

.floating-card {

    position: absolute;

    z-index: 15;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        14px 17px;

    border:
        1px solid rgba(55, 111, 188, 0.34);

    border-radius: 15px;

    background:
        rgba(5, 14, 27, 0.96);

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.36);

    backdrop-filter: blur(12px);

}


.floating-card small {

    display: block;

    margin-bottom: 2px;

    color: #8797ae;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;

}


.floating-card strong {

    display: block;

    color: #e9eef7;

    font-size: 13px;

    font-weight: 750;

    white-space: nowrap;

}


.windows-card {

    left: -43px;
    top: 29%;

}


.networking-card {

    right: -42px;
    top: 31%;

}


.azure-card {

    right: 6%;

    bottom: -29px;

}


/* ==========================================================
   WINDOWS SYMBOL
   ========================================================== */

.windows-symbol {

    width: 35px;
    height: 35px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 3px;

}


.windows-symbol span {

    background:
        #2679ef;

}


/* ==========================================================
   NETWORK CARD ICON
   ========================================================== */

.network-card-icon {

    width: 37px;
    height: 37px;

}


.network-card-icon line {

    stroke: #2781f4;

    stroke-width: 2;

}


.network-card-icon circle {

    fill: #2781f4;

}


/* ==========================================================
   CLOUD
   ========================================================== */

.cloud-card-icon {

    width: 37px;
    height: 31px;

    fill: #2d82f5;

}


/* ==========================================================
   PERSON
   ========================================================== */

.hero-person {

    position: absolute;

    z-index: 9;

    width: 185px;

    height: 310px;

    bottom: -25px;

    left: 37%;

    transform:
        translateX(-50%);

    pointer-events: none;

}


.hero-person svg {

    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    overflow: visible;

    filter:
        drop-shadow(
            0 14px 15px
            rgba(0, 0, 0, 0.50)
        );

}


.person-fill {

    fill: #0a1320;

    stroke: #448be7;

    stroke-width: 1.7;

}


.person-hair {

    fill: #050b12;

    stroke: #397acc;

    stroke-width: 1.1;

}


.person-body {

    fill:
        #08111e;

    stroke:
        #3b83dd;

    stroke-width: 1.7;

}


.person-limb {

    fill: none;

    stroke:
        #3b83dd;

    stroke-width: 13;

    stroke-linecap: round;

}


.reaching-arm {

    stroke:
        #5599ed;

}


.person-hand {

    fill:
        #79b6ff;

    stroke:
        #4d91e7;

    stroke-width: 2;

}


.person-leg {

    fill: none;

    stroke:
        #1e477e;

    stroke-width: 16;

    stroke-linecap: round;

}


.person-shoe {

    fill: #07101a;

    stroke: #4289df;

    stroke-width: 1.4;

}


.person-highlight {

    fill: none;

    stroke:
        rgba(94, 162, 246, 0.75);

    stroke-width: 2;

    stroke-linecap: round;

}


.person-floor-glow {

    position: absolute;

    z-index: 1;

    left: 50%;
    bottom: 2px;

    width: 170px;
    height: 25px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(31, 97, 190, 0.24),
            transparent 68%
        );

    filter:
        blur(6px);

}


/* ==========================================================
   LARGE SCREEN
   ========================================================== */

@media (min-width: 1500px) {

    .mockup-tech-panel {

        max-width: 680px;

    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1180px) {

    .mockup-hero-container {

        padding:
            0 34px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(470px, 0.92fr);

        gap: 45px;

    }


    .mockup-tech-panel {

        max-width: 540px;

    }


    .windows-card {

        left: -15px;

    }


    .networking-card {

        right: -15px;

    }


    .hero-person {

        width: 150px;

        height: 270px;

    }

}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 940px) {

    .mockup-hero {

        padding:
            60px 0;

    }


    .mockup-hero-container {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .mockup-hero-copy {

        max-width: 760px;

    }


    .mockup-tech-panel {

        width: min(100%, 590px);

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .mockup-hero-container {

        padding:
            0 18px;

    }


    .mockup-hero .hero-title {

        font-size:
            clamp(
                2.5rem,
                13vw,
                3.2rem
            );

    }


    .mockup-hero .hero-subtitle {

        font-size:
            1.25rem;

    }


    .mockup-hero .hero-description {

        font-size:
            15px;

    }


    .mockup-hero .hero-cta {

        flex-direction: column;

    }


    .mockup-hero .btn {

        width: 100%;

    }


    .mockup-tech-panel {

        width: 100%;

        border-radius: 25px;

    }


    .panel-label {

        top: 15px;
        left: 15px;

        font-size: 9px;

    }


    .floating-card {

        padding:
            8px 10px;

        gap: 8px;

    }


    .floating-card small {

        display: none;

    }


    .floating-card strong {

        font-size: 10px;

    }


    .windows-symbol {

        width: 24px;
        height: 24px;

    }


    .network-card-icon {

        width: 25px;
        height: 25px;

    }


    .cloud-card-icon {

        width: 27px;
        height: 23px;

    }


    .windows-card {

        left: 6px;
        top: 31%;

    }


    .networking-card {

        right: 6px;
        top: 33%;

    }


    .azure-card {

        right: 10px;

        bottom: -20px;

    }


    .hero-person {

        width: 110px;

        height: 205px;

        bottom: -15px;

        left: 38%;

    }


    .orbit-three {

        display: none;

    }

}


/* ==========================================================
   MOTION ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .floating-card,
    .hero-person {

        transition: none;

    }

}


/* ===== EXACT MOCKUP HERO END ===== */


/* ===== REAL HERO PERSON START ===== */

.hero-person {
    display: none !important;
}

.hero-person-real {
    position: absolute;

    z-index: 10;

    left: 38%;
    bottom: -35px;

    width: 215px;

    transform: translateX(-50%);

    pointer-events: none;
}

.hero-person-real img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 20px
            rgba(0, 0, 0, 0.48)
        )
        drop-shadow(
            0 0 12px
            rgba(47, 111, 228, 0.18)
        );
}

.hero-person-real .person-floor-glow {
    position: absolute;

    z-index: -1;

    left: 50%;
    bottom: 6px;

    width: 190px;
    height: 28px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(37, 99, 235, 0.30),
            rgba(37, 99, 235, 0.09) 42%,
            transparent 72%
        );

    filter: blur(8px);
}

/* Make the network center glow slightly stronger */
.center-node {
    fill: #78b6ff;

    filter:
        drop-shadow(
            0 0 10px
            rgba(91, 160, 255, 0.78)
        )
        drop-shadow(
            0 0 22px
            rgba(47, 111, 228, 0.50)
        );
}

.center-ring {
    stroke: #4389ec;
}

.center-ring-large {
    stroke: rgba(67, 137, 236, 0.30);
}

/* Slightly brighten the node/hand interaction area */
.mockup-tech-panel {
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(28, 91, 196, 0.12),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            rgba(10, 25, 46, 0.96),
            rgba(5, 14, 27, 0.98)
        );
}

@media (max-width: 1180px) {
    .hero-person-real {
        width: 185px;

        left: 39%;

        bottom: -28px;
    }
}

@media (max-width: 940px) {
    .hero-person-real {
        width: 175px;

        left: 39%;

        bottom: -26px;
    }
}

@media (max-width: 700px) {
    .hero-person-real {
        width: 115px;

        left: 39%;

        bottom: -17px;
    }

    .hero-person-real .person-floor-glow {
        width: 105px;
        height: 18px;
    }
}

/* ===== REAL HERO PERSON END ===== */


/* ===== HERO PERSON FINAL POSITION START ===== */

.hero-person-real {
    left: 40%;
    bottom: -18px;
    width: 240px;
}

.hero-person-real img {
    filter:
        drop-shadow(
            0 18px 22px
            rgba(0, 0, 0, 0.52)
        )
        drop-shadow(
            0 0 14px
            rgba(47, 111, 228, 0.22)
        );
}

.hero-person-real .person-floor-glow {
    width: 215px;
    height: 32px;
    bottom: 2px;

    background:
        radial-gradient(
            ellipse,
            rgba(37, 99, 235, 0.36),
            rgba(37, 99, 235, 0.10) 45%,
            transparent 72%
        );

    filter: blur(9px);
}

@media (max-width: 1180px) {
    .hero-person-real {
        left: 40%;
        bottom: -16px;
        width: 205px;
    }
}

@media (max-width: 940px) {
    .hero-person-real {
        left: 40%;
        bottom: -15px;
        width: 190px;
    }
}

@media (max-width: 700px) {
    .hero-person-real {
        left: 40%;
        bottom: -10px;
        width: 125px;
    }
}

/* ===== HERO PERSON FINAL POSITION END ===== */


/* ===== CINEMATIC HERO GLOW START ===== */


/* ==========================================================
   DEEPER HERO BACKGROUND
   ========================================================== */

.mockup-hero {
    background:
        radial-gradient(
            circle at 78% 44%,
            rgba(18, 78, 190, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 48% 88%,
            rgba(20, 79, 190, 0.05),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #030711 0%,
            #050b16 46%,
            #030812 100%
        );
}


/* ==========================================================
   NAME — MORE LUMINOUS
   ========================================================== */

.mockup-hero .hero-title {
    background:
        linear-gradient(
            105deg,
            #84b8ff 0%,
            #5595ff 40%,
            #2d75ef 72%,
            #1f5fd8 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 16px
            rgba(54, 126, 245, 0.14)
        );
}


/* ==========================================================
   SUBTITLE
   ========================================================== */

.mockup-hero .hero-subtitle {
    background:
        linear-gradient(
            100deg,
            #7fb2f8 0%,
            #5590eb 55%,
            #3470d5 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    color: transparent;
}


/* ==========================================================
   RIGHT PANEL — STRONGER GLOW
   ========================================================== */

.mockup-tech-panel {
    border:
        1px solid rgba(49, 123, 255, 0.58);

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(25, 94, 225, 0.16),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(5, 18, 38, 0.98),
            rgba(2, 9, 20, 0.99)
        );

    box-shadow:
        0 0 0 1px rgba(42, 104, 224, 0.06),
        0 0 24px rgba(31, 102, 240, 0.14),
        0 0 55px rgba(21, 73, 182, 0.10),
        0 34px 80px rgba(0, 0, 0, 0.42),
        inset 0 0 45px rgba(22, 83, 190, 0.06);
}


/* ==========================================================
   BRIGHTER TOP EDGE
   ========================================================== */

.mockup-tech-panel::before {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(71, 139, 255, 0.95),
            rgba(42, 111, 243, 0.72),
            transparent
        );

    box-shadow:
        0 0 16px rgba(47, 116, 245, 0.50);
}


/* ==========================================================
   PARTICLE FIELD
   ========================================================== */

.mockup-tech-panel::after {
    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    opacity: 0.82;

    background-image:
        radial-gradient(
            circle at 12% 16%,
            rgba(73, 145, 255, 0.95) 0 1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 21% 37%,
            rgba(56, 124, 244, 0.65) 0 1px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 29% 74%,
            rgba(71, 144, 255, 0.70) 0 1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 39% 23%,
            rgba(95, 158, 255, 0.90) 0 1.2px,
            transparent 2px
        ),
        radial-gradient(
            circle at 48% 68%,
            rgba(69, 137, 250, 0.75) 0 1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 58% 14%,
            rgba(84, 154, 255, 0.85) 0 1.1px,
            transparent 1.9px
        ),
        radial-gradient(
            circle at 68% 34%,
            rgba(55, 129, 245, 0.70) 0 1px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 74% 72%,
            rgba(80, 151, 255, 0.80) 0 1.1px,
            transparent 1.9px
        ),
        radial-gradient(
            circle at 86% 20%,
            rgba(97, 166, 255, 0.90) 0 1.2px,
            transparent 2px
        ),
        radial-gradient(
            circle at 92% 58%,
            rgba(70, 143, 255, 0.70) 0 1px,
            transparent 1.8px
        );
}


/* ==========================================================
   ORBIT RINGS
   ========================================================== */

.orbit-one,
.orbit-two,
.orbit-three {
    border-color:
        rgba(39, 100, 207, 0.16);
}

.orbit-one {
    box-shadow:
        0 0 30px rgba(35, 101, 225, 0.03);
}


/* ==========================================================
   NETWORK LINES
   ========================================================== */

.mock-net-line {
    stroke: #2f7df2;

    opacity: 0.95;

    filter:
        drop-shadow(
            0 0 3px
            rgba(47, 125, 242, 0.48)
        );
}

.mock-net-line.soft {
    opacity: 0.56;
}


/* ==========================================================
   NETWORK NODES
   ========================================================== */

.mock-node {
    fill: #4a95ff;

    filter:
        drop-shadow(
            0 0 5px
            rgba(74, 149, 255, 0.82)
        )
        drop-shadow(
            0 0 12px
            rgba(42, 111, 235, 0.40)
        );
}


/* ==========================================================
   CENTER NODE — MAIN FOCUS
   ========================================================== */

.center-ring-large {
    fill:
        rgba(35, 102, 228, 0.12);

    stroke:
        rgba(79, 151, 255, 0.44);

    stroke-width: 2;
}

.center-ring {
    fill:
        rgba(46, 121, 242, 0.22);

    stroke: #5ba5ff;

    stroke-width: 2.2;

    filter:
        drop-shadow(
            0 0 7px
            rgba(70, 145, 255, 0.60)
        );
}

.center-node {
    fill: #a4d2ff;

    filter:
        drop-shadow(
            0 0 7px
            rgba(166, 214, 255, 1)
        )
        drop-shadow(
            0 0 16px
            rgba(74, 151, 255, 0.92)
        )
        drop-shadow(
            0 0 30px
            rgba(28, 101, 235, 0.60)
        );
}


/* extra center aura */

.mockup-network {
    filter:
        drop-shadow(
            0 0 10px
            rgba(35, 111, 245, 0.11)
        );
}


/* ==========================================================
   FLOATING CARDS
   ========================================================== */

.floating-card {
    border:
        1px solid rgba(59, 132, 255, 0.46);

    background:
        linear-gradient(
            145deg,
            rgba(4, 13, 27, 0.98),
            rgba(3, 10, 22, 0.98)
        );

    box-shadow:
        0 0 0 1px rgba(34, 91, 186, 0.04),
        0 0 16px rgba(31, 101, 230, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.42);
}

.floating-card:hover {
    border-color:
        rgba(82, 153, 255, 0.76);

    box-shadow:
        0 0 22px rgba(42, 116, 245, 0.15),
        0 20px 45px rgba(0, 0, 0, 0.45);
}


/* ==========================================================
   WINDOWS / NETWORK / AZURE ICONS
   ========================================================== */

.windows-symbol span {
    background:
        linear-gradient(
            135deg,
            #2580ff,
            #1e63df
        );

    box-shadow:
        0 0 8px
        rgba(38, 128, 255, 0.22);
}

.network-card-icon line {
    stroke: #3c91ff;
}

.network-card-icon circle {
    fill: #3c91ff;

    filter:
        drop-shadow(
            0 0 5px
            rgba(60, 145, 255, 0.55)
        );
}

.cloud-card-icon {
    fill: #2f89ff;

    filter:
        drop-shadow(
            0 0 8px
            rgba(47, 137, 255, 0.30)
        );
}


/* ==========================================================
   PERSON — STRONGER BLUE RIM LIGHT
   ========================================================== */

.hero-person-real img {
    filter:
        drop-shadow(
            0 20px 24px
            rgba(0, 0, 0, 0.58)
        )
        drop-shadow(
            0 0 8px
            rgba(58, 132, 255, 0.30)
        )
        drop-shadow(
            0 0 18px
            rgba(31, 101, 230, 0.18)
        );
}


/* ==========================================================
   PERSON FLOOR GLOW
   ========================================================== */

.hero-person-real .person-floor-glow {
    width: 255px;
    height: 40px;

    bottom: -2px;

    background:
        radial-gradient(
            ellipse,
            rgba(53, 132, 255, 0.52) 0%,
            rgba(31, 94, 210, 0.24) 35%,
            rgba(20, 60, 140, 0.08) 58%,
            transparent 74%
        );

    filter: blur(10px);

    box-shadow:
        0 0 28px rgba(37, 103, 230, 0.18);
}


/* ==========================================================
   BUTTONS — MORE ALIVE
   ========================================================== */

.mockup-hero .btn-primary {
    background:
        linear-gradient(
            135deg,
            #1263e8,
            #1f78ff
        );

    border:
        1px solid rgba(93, 158, 255, 0.45);

    box-shadow:
        0 0 18px rgba(30, 108, 245, 0.18),
        0 14px 32px rgba(15, 72, 176, 0.28);
}

.mockup-hero .btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #1d72f4,
            #348cff
        );

    box-shadow:
        0 0 24px rgba(40, 124, 255, 0.24),
        0 16px 36px rgba(15, 72, 176, 0.32);
}

.mockup-hero .btn-secondary {
    border-color:
        rgba(67, 126, 205, 0.72);

    color: #83b5f5;

    background:
        rgba(4, 11, 23, 0.82);

    box-shadow:
        inset 0 0 12px
        rgba(26, 77, 148, 0.05);
}

.mockup-hero .btn-secondary:hover {
    border-color:
        rgba(92, 158, 255, 0.90);

    color: #abd0ff;

    background:
        rgba(19, 65, 135, 0.12);
}


/* ==========================================================
   PROOF DOTS
   ========================================================== */

.mockup-hero .hero-proof span::before {
    background: #3789ff;

    box-shadow:
        0 0 9px
        rgba(55, 137, 255, 0.72);
}


/* ==========================================================
   PANEL LABEL
   ========================================================== */

.panel-label {
    border-color:
        rgba(54, 126, 244, 0.40);

    background:
        rgba(3, 12, 25, 0.90);
}

.panel-label span {
    background: #2e84ff;

    box-shadow:
        0 0 10px
        rgba(46, 132, 255, 0.78);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .mockup-tech-panel::after {
        opacity: 0.52;
    }

    .hero-person-real .person-floor-glow {
        width: 140px;
        height: 24px;
    }

}


/* ===== CINEMATIC HERO GLOW END ===== */


/* ===== FINAL HERO ALIGNMENT START ===== */


/* ==========================================================
   HERO HEIGHT + OVERALL BALANCE
   ========================================================== */

.mockup-hero {
    min-height: 78vh;

    padding:
        22px 0 28px;

    align-items: center;
}


/* ==========================================================
   HERO GRID
   ========================================================== */

.mockup-hero-container {
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(560px, 1.05fr);

    gap: 48px;

    align-items: center;
}


/* ==========================================================
   LEFT CONTENT
   ========================================================== */

.mockup-hero-copy {
    max-width: 670px;
}

.mockup-hero .hero-title {
    margin-bottom: 24px;
}

.mockup-hero .hero-subtitle {
    margin-bottom: 24px;
}

.mockup-hero .hero-description {
    margin-bottom: 26px;
    line-height: 1.85;
}

.mockup-hero .hero-proof {
    margin-top: 22px;
}


/* ==========================================================
   RIGHT PANEL POSITION
   ========================================================== */

.mockup-tech-panel {
    max-width: 620px;

    transform:
        translateY(-10px);
}


/* ==========================================================
   PERSON — FINAL POSITION
   ========================================================== */

.hero-person-real {
    width: 225px;

    left: 40%;

    bottom: -8px;
}


/* ==========================================================
   FLOATING CARDS
   ========================================================== */

.windows-card {
    left: -34px;
    top: 29%;
}

.networking-card {
    right: -34px;
    top: 31%;
}

.azure-card {
    right: 6%;
    bottom: -22px;
}


/* ==========================================================
   PANEL LABEL
   ========================================================== */

.panel-label {
    top: 24px;
    left: 26px;
}


/* ==========================================================
   DESKTOP TIGHTER FIT
   ========================================================== */

@media (min-width: 1200px) {

    .mockup-hero {
        min-height:
            calc(100vh - 88px);
    }

    .mockup-hero-container {
        padding:
            0 54px;
    }
}


/* ==========================================================
   MEDIUM SCREENS
   ========================================================== */

@media (max-width: 1180px) {

    .mockup-hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(470px, 0.92fr);

        gap: 38px;

        padding:
            0 30px;
    }

    .mockup-tech-panel {
        max-width: 540px;

        transform:
            translateY(-4px);
    }

    .hero-person-real {
        width: 200px;

        left: 40%;

        bottom: -4px;
    }

    .windows-card {
        left: -12px;
    }

    .networking-card {
        right: -12px;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 940px) {

    .mockup-hero {
        min-height: auto;

        padding:
            54px 0 64px;
    }

    .mockup-hero-container {
        grid-template-columns: 1fr;

        gap: 54px;
    }

    .mockup-tech-panel {
        transform: none;
    }

    .hero-person-real {
        width: 185px;

        left: 40%;

        bottom: -6px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .mockup-hero {
        padding:
            44px 0 56px;
    }

    .mockup-hero-container {
        gap: 40px;
    }

    .hero-person-real {
        width: 118px;

        left: 40%;

        bottom: -3px;
    }

    .mockup-tech-panel {
        width: 100%;
    }

}


/* ===== FINAL HERO ALIGNMENT END ===== */


/* ===== REFERENCE TEXT COLORS START ===== */


/* HERO NAME — brighter electric blue like the reference */
.mockup-hero .hero-title {
    background:
        linear-gradient(
            105deg,
            #8fc2ff 0%,
            #65a6ff 26%,
            #3d8cff 54%,
            #1f70f2 78%,
            #1457d7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 14px
            rgba(46, 127, 255, 0.18)
        );
}


/* HERO SUBTITLE — slightly softer than the name */
.mockup-hero .hero-subtitle {
    background:
        linear-gradient(
            100deg,
            #80b5f5 0%,
            #5f9ce9 38%,
            #4382db 68%,
            #2c68c7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;
}


/* DESCRIPTION — cool blue-gray, not plain gray/white */
.mockup-hero .hero-description {
    color: #8ea5c2;
}


/* PROOF ROW */
.mockup-hero .hero-proof {
    color: #7f95b3;
}


/* NAV ACTIVE */
.nav-link.active,
.nav-link:hover {
    color: #3990ff;
}


/* LOGO */
.logo {
    background:
        linear-gradient(
            135deg,
            #5ca1ff,
            #2777f2
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* SECTION TITLES — slightly cooler */
.section-title {
    color: #dbe9fb;
}


/* ===== REFERENCE TEXT COLORS END ===== */





/* ===== FINAL MICRO POLISH START ===== */


/* 1 + 2. Person slightly left and 4px up */
.hero-person-real {
    left: 39%;
    bottom: -4px;
}


/* 3. Slightly reduce left/right gap */
.mockup-hero-container {
    gap: 40px;
}


/* 4. Fingertip / center interaction a little brighter */
.center-node {
    filter:
        drop-shadow(
            0 0 8px
            rgba(166, 214, 255, 1)
        )
        drop-shadow(
            0 0 18px
            rgba(74, 151, 255, 0.98)
        )
        drop-shadow(
            0 0 33px
            rgba(28, 101, 235, 0.66)
        );
}


/* Slightly strengthen glow around the person's fingertip area */
.hero-person-real img {
    filter:
        drop-shadow(
            0 20px 24px
            rgba(0, 0, 0, 0.58)
        )
        drop-shadow(
            0 0 9px
            rgba(58, 132, 255, 0.34)
        )
        drop-shadow(
            0 0 20px
            rgba(31, 101, 230, 0.20)
        );
}


/* Keep responsive positioning consistent */
@media (max-width: 1180px) {
    .mockup-hero-container {
        gap: 34px;
    }

    .hero-person-real {
        left: 39%;
        bottom: -2px;
    }
}


@media (max-width: 940px) {
    .mockup-hero-container {
        gap: 50px;
    }

    .hero-person-real {
        left: 39%;
        bottom: -2px;
    }
}


@media (max-width: 700px) {
    .hero-person-real {
        left: 39%;
        bottom: 0;
    }
}


/* ===== FINAL MICRO POLISH END ===== */


/* ===== CINEMATIC PROJECTS START ===== */


/* ==========================================================
   PROJECTS SECTION
   ========================================================== */

.projects-section {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(28, 91, 205, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #050a13 0%,
            #070d18 100%
        );
}


/* ==========================================================
   PROJECT GRID
   ========================================================== */

.projects-grid {
    gap: 26px;
}


/* ==========================================================
   PROJECT CARD
   ========================================================== */

.project-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(9, 20, 38, 0.98),
            rgba(5, 13, 26, 0.99)
        );

    border:
        1px solid rgba(58, 121, 222, 0.24);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease,
        background 280ms ease;
}


/* subtle top edge */
.project-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 16%;

    width: 68%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(66, 135, 255, 0.55),
            transparent
        );

    opacity: 0.55;

    transition:
        opacity 280ms ease,
        box-shadow 280ms ease;
}


/* subtle corner glow */
.project-card::after {
    content: '';

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(38, 107, 235, 0.10),
            transparent 68%
        );

    pointer-events: none;

    transition:
        opacity 280ms ease,
        transform 280ms ease;
}


.project-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(75, 145, 255, 0.52);

    background:
        linear-gradient(
            145deg,
            rgba(11, 25, 47, 0.99),
            rgba(5, 14, 28, 0.99)
        );

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.36),
        0 0 25px rgba(35, 102, 225, 0.10);
}


.project-card:hover::before {
    opacity: 1;

    box-shadow:
        0 0 14px rgba(53, 123, 245, 0.36);
}


.project-card:hover::after {
    opacity: 1;

    transform: scale(1.12);
}


/* ==========================================================
   TOP VISUAL AREA
   ========================================================== */

.project-visual {
    position: relative;

    min-height: 178px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(35, 101, 220, 0.13),
            rgba(6, 15, 29, 0.18) 55%,
            rgba(4, 11, 22, 0.50) 100%
        );

    border-bottom:
        1px solid rgba(69, 132, 232, 0.11);
}


/* glowing ring behind icon */
.project-visual::before {
    content: '';

    position: absolute;

    width: 92px;
    height: 92px;

    border-radius: 50%;

    border:
        1px solid rgba(59, 130, 246, 0.13);

    box-shadow:
        0 0 0 18px rgba(37, 99, 235, 0.025),
        0 0 30px rgba(37, 99, 235, 0.06);
}


/* ==========================================================
   PROJECT ICONS
   ========================================================== */

.project-icon,
.project-visual svg {
    position: relative;

    z-index: 2;

    color: #4b91f7;

    filter:
        drop-shadow(
            0 0 8px
            rgba(55, 130, 245, 0.32)
        );

    transition:
        transform 280ms ease,
        filter 280ms ease;
}


.project-card:hover .project-icon,
.project-card:hover .project-visual svg {
    transform: translateY(-3px) scale(1.035);

    filter:
        drop-shadow(
            0 0 12px
            rgba(66, 144, 255, 0.50)
        );
}


/* ==========================================================
   CARD CONTENT
   ========================================================== */

.project-content {
    position: relative;

    z-index: 2;

    padding: 30px 30px 32px;
}


.project-title {
    color: #dbe9fb;

    font-size: 1.28rem;

    line-height: 1.35;

    margin-bottom: 10px;
}


.project-description {
    color: #8fa3bf;

    line-height: 1.78;
}


/* ==========================================================
   PROJECT TYPE
   ========================================================== */

.project-type {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 999px;

    color: #6da8f4;

    background:
        rgba(34, 89, 181, 0.12);

    border:
        1px solid rgba(67, 128, 221, 0.22);

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
}


/* ==========================================================
   TECH TAGS
   ========================================================== */

.project-tech {
    margin-top: 23px;

    gap: 9px;
}


.tech-tag {
    color: #82aee8;

    background:
        rgba(24, 67, 136, 0.13);

    border:
        1px solid rgba(64, 118, 201, 0.19);

    border-radius: 10px;

    transition:
        color 220ms ease,
        background 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}


.tech-tag:hover {
    color: #a9caff;

    background:
        rgba(41, 97, 190, 0.18);

    border-color:
        rgba(72, 139, 239, 0.42);

    transform: translateY(-1px);
}


/* ==========================================================
   SLIGHT VARIATION BETWEEN CARDS
   ========================================================== */

/* CondorCare */
.project-card:nth-child(1) .project-visual {
    background:
        radial-gradient(
            circle at center,
            rgba(31, 103, 229, 0.15),
            rgba(5, 15, 31, 0.22) 58%,
            rgba(4, 11, 22, 0.52) 100%
        );
}


/* Smart Gym */
.project-card:nth-child(2) .project-visual {
    background:
        radial-gradient(
            circle at center,
            rgba(37, 110, 220, 0.12),
            rgba(7, 17, 32, 0.21) 58%,
            rgba(4, 11, 22, 0.52) 100%
        );
}


/* Network + Cloud */
.project-card:nth-child(3) .project-visual {
    background:
        radial-gradient(
            circle at center,
            rgba(30, 88, 201, 0.16),
            rgba(5, 15, 31, 0.20) 58%,
            rgba(4, 11, 22, 0.52) 100%
        );
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .projects-grid {
        gap: 22px;
    }

    .project-visual {
        min-height: 160px;
    }

}


@media (max-width: 700px) {

    .project-content {
        padding: 25px 22px 28px;
    }

    .project-visual {
        min-height: 145px;
    }

}


/* ===== CINEMATIC PROJECTS END ===== */


/* ===== CINEMATIC SKILLS START ===== */


/* ==========================================================
   SKILLS SECTION
   ========================================================== */

.skills-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 8%,
            rgba(33, 101, 220, 0.06),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 82%,
            rgba(29, 82, 184, 0.05),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #07101d 0%,
            #050b14 100%
        );
}


/* subtle background grid */
.skills-section::before {
    content: '';

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.10;

    background-image:
        linear-gradient(
            rgba(70, 125, 210, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(70, 125, 210, 0.08) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 20%,
            black 78%,
            transparent 100%
        );
}


/* ==========================================================
   SKILL GRID
   ========================================================== */

.skills-grid {
    position: relative;

    z-index: 2;

    gap: 26px;
}


/* ==========================================================
   SKILL CARD
   ========================================================== */

.skill-category {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(8, 19, 36, 0.98),
            rgba(4, 11, 22, 0.99)
        );

    border:
        1px solid rgba(58, 118, 210, 0.23);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease,
        background 280ms ease;
}


/* top light line */
.skill-category::before {
    content: '';

    position: absolute;

    top: 0;
    left: -40%;

    width: 45%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(77, 145, 255, 0.75),
            transparent
        );

    transition:
        left 500ms ease;
}


/* moving light glow */
.skill-category::after {
    content: '';

    position: absolute;

    top: -100px;
    left: -120px;

    width: 180px;
    height: 280px;

    transform: rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(61, 128, 235, 0.055),
            transparent
        );

    pointer-events: none;

    transition:
        left 550ms ease;
}


.skill-category:hover {
    transform: translateY(-7px);

    border-color:
        rgba(73, 144, 255, 0.50);

    background:
        linear-gradient(
            145deg,
            rgba(11, 26, 48, 0.99),
            rgba(5, 14, 27, 0.99)
        );

    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.36),
        0 0 26px rgba(37, 105, 225, 0.10);
}


.skill-category:hover::before {
    left: 100%;
}


.skill-category:hover::after {
    left: 110%;
}


/* ==========================================================
   SKILL TITLE
   ========================================================== */

.skill-category-title {
    position: relative;

    z-index: 2;

    color: #69a2ee;

    font-size: 1.05rem;

    letter-spacing: 0.4px;

    margin-bottom: 22px;

    transition:
        color 240ms ease,
        text-shadow 240ms ease;
}


.skill-category:hover .skill-category-title {
    color: #8bbcff;

    text-shadow:
        0 0 14px rgba(69, 139, 245, 0.14);
}


/* ==========================================================
   SKILL CHIPS
   ========================================================== */

.skill-list,
.skill-chips {
    position: relative;

    z-index: 2;
}


.skill-chip {
    position: relative;

    overflow: hidden;

    color: #9cb0ca;

    background:
        linear-gradient(
            135deg,
            rgba(22, 57, 114, 0.13),
            rgba(11, 32, 69, 0.12)
        );

    border:
        1px solid rgba(61, 118, 205, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.012);

    transition:
        transform 200ms ease,
        color 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease;
}


/* subtle chip highlight */
.skill-chip::before {
    content: '';

    position: absolute;

    inset: 0;

    opacity: 0;

    background:
        linear-gradient(
            135deg,
            rgba(76, 143, 245, 0.08),
            transparent 60%
        );

    transition: opacity 200ms ease;
}


.skill-chip:hover {
    transform: translateY(-2px);

    color: #b5d0f5;

    border-color:
        rgba(73, 145, 255, 0.42);

    background:
        linear-gradient(
            135deg,
            rgba(30, 75, 150, 0.18),
            rgba(12, 37, 78, 0.15)
        );

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.18),
        0 0 10px rgba(48, 112, 228, 0.06);
}


.skill-chip:hover::before {
    opacity: 1;
}


/* ==========================================================
   CARD-SPECIFIC DEPTH
   ========================================================== */

.skill-category:nth-child(1) {
    background:
        radial-gradient(
            circle at 20% 12%,
            rgba(42, 115, 239, 0.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(8, 19, 36, 0.98),
            rgba(4, 11, 22, 0.99)
        );
}


.skill-category:nth-child(2) {
    background:
        radial-gradient(
            circle at 78% 14%,
            rgba(35, 100, 221, 0.07),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(8, 19, 36, 0.98),
            rgba(4, 11, 22, 0.99)
        );
}


.skill-category:nth-child(3) {
    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(31, 95, 215, 0.09),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(8, 19, 36, 0.98),
            rgba(4, 11, 22, 0.99)
        );
}


/* ==========================================================
   SOFT AMBIENT LIGHT ON HOVER
   ========================================================== */

.skill-category:hover {
    --skill-glow:
        rgba(44, 118, 241, 0.10);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .skills-grid {
        gap: 22px;
    }

}


@media (max-width: 700px) {

    .skill-category {
        padding: 26px 22px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .skill-category,
    .skill-category::before,
    .skill-category::after,
    .skill-chip {
        transition: none;
    }

    .skill-category:hover,
    .skill-chip:hover {
        transform: none;
    }

}


/* ===== CINEMATIC SKILLS END ===== */





/* ===== CERTIFICATION V2 START ===== */


/* ==========================================================
   SECTION ATMOSPHERE
   ========================================================== */

.certifications-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 30% 45%,
            rgba(27, 105, 238, 0.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 45%,
            rgba(24, 74, 175, 0.035),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #040913 0%,
            #060c17 100%
        );
}


/* faint certification grid */

.certifications-section::before {
    content: '';

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.10;

    background-image:
        linear-gradient(
            rgba(60, 122, 225, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(60, 122, 225, 0.06) 1px,
            transparent 1px
        );

    background-size: 44px 44px;

    mask-image:
        radial-gradient(
            circle at 35% 50%,
            black,
            transparent 65%
        );
}


/* ==========================================================
   MAIN DIGITAL CREDENTIAL
   ========================================================== */

.cert-card-compact {
    position: relative;

    width: min(100%, 980px);
    min-height: 210px;

    padding: 32px 280px 32px 38px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(31, 112, 255, 0.13),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            rgba(8, 20, 40, 0.99),
            rgba(3, 11, 24, 0.995)
        );

    border:
        1px solid rgba(56, 133, 255, 0.42);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.36),
        0 0 25px rgba(31, 105, 235, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.025);

    transition:
        transform 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}


/* ==========================================================
   MOVING ELECTRIC BORDER LIGHT
   ========================================================== */

.cert-card-compact::before {
    content: '';

    position: absolute;

    width: 260px;
    height: 2px;

    top: 0;
    left: -260px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4d9cff,
            #78b8ff,
            transparent
        );

    box-shadow:
        0 0 14px rgba(66, 145, 255, 0.70);

    animation:
        credentialScan 4.8s ease-in-out infinite;

    pointer-events: none;
}


@keyframes credentialScan {

    0% {
        left: -260px;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    75%,
    100% {
        left: 105%;
        opacity: 0;
    }

}


/* ==========================================================
   RIGHT-SIDE AZ-900 WATERMARK
   ========================================================== */

.cert-card-compact::after {
    content: 'AZ-900';

    position: absolute;

    right: 36px;
    top: 50%;

    transform:
        translateY(-50%);

    font-size: 4.7rem;
    font-weight: 900;

    letter-spacing: -3px;

    color:
        rgba(71, 137, 241, 0.055);

    text-shadow:
        0 0 35px
        rgba(47, 118, 240, 0.05);

    transition:
        color 320ms ease,
        text-shadow 320ms ease,
        transform 320ms ease;

    pointer-events: none;
}


.cert-card-compact:hover::after {
    color:
        rgba(78, 151, 255, 0.105);

    text-shadow:
        0 0 35px
        rgba(47, 118, 240, 0.10);

    transform:
        translateY(-50%)
        translateX(-4px);
}


/* ==========================================================
   CARD HOVER
   ========================================================== */

.cert-card-compact:hover {
    transform:
        perspective(1100px)
        rotateX(0.8deg)
        rotateY(-1deg);

    border-color:
        rgba(77, 153, 255, 0.72);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(33, 111, 241, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.035);
}


/* ==========================================================
   ICON AREA
   ========================================================== */

.cert-icon-container,
.cert-icon {
    position: relative;

    z-index: 3;

    flex-shrink: 0;

    transition:
        transform 320ms ease,
        filter 320ms ease;
}


.cert-icon-container {
    margin-right: 30px;

    padding: 17px;

    border-radius: 17px;

    background:
        radial-gradient(
            circle,
            rgba(29, 129, 255, 0.18),
            rgba(10, 49, 100, 0.10)
        );

    border:
        1px solid rgba(56, 145, 255, 0.28);

    box-shadow:
        inset 0 0 20px rgba(26, 98, 216, 0.09),
        0 0 18px rgba(36, 118, 240, 0.08);
}


.cert-card-compact:hover .cert-icon-container {
    transform:
        translateY(-3px)
        scale(1.045);

    filter:
        drop-shadow(
            0 0 14px
            rgba(52, 144, 255, 0.44)
        );
}


/* ==========================================================
   TEXT BLOCK
   ========================================================== */

.cert-content,
.cert-info {
    position: relative;

    z-index: 3;
}


.cert-title {
    margin: 6px 0 6px;

    color: #dce9fa;

    font-size: 1.45rem;

    font-weight: 800;

    letter-spacing: -0.3px;

    transition:
        color 250ms ease,
        text-shadow 250ms ease;
}


.cert-card-compact:hover .cert-title {
    color: #eff6ff;

    text-shadow:
        0 0 18px
        rgba(62, 139, 247, 0.12);
}


.cert-code {
    color: #6fa5ed;

    font-weight: 750;

    letter-spacing: 1.5px;
}


/* ==========================================================
   COMPLETED — FIX THAT LONG GREEN BAR
   ========================================================== */

.cert-label,
.cert-status {
    display: inline-flex !important;

    width: fit-content !important;

    align-items: center;

    gap: 8px;

    padding: 6px 11px !important;

    margin-bottom: 4px;

    border-radius: 999px !important;

    color: #68e1ab !important;

    background:
        rgba(18, 151, 106, 0.10) !important;

    border:
        1px solid rgba(54, 211, 153, 0.22) !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    letter-spacing: 1.2px;

    line-height: 1 !important;

    box-shadow:
        0 0 12px rgba(16, 185, 129, 0.04);

    transition:
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}


/* little verified dot */

.cert-label::before,
.cert-status::before {
    content: '';

    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #35d99c;

    box-shadow:
        0 0 8px
        rgba(53, 217, 156, 0.70);
}


.cert-card-compact:hover .cert-label,
.cert-card-compact:hover .cert-status {
    border-color:
        rgba(62, 225, 166, 0.40) !important;

    background:
        rgba(18, 151, 106, 0.14) !important;

    box-shadow:
        0 0 17px rgba(16, 185, 129, 0.07);
}


/* ==========================================================
   SUBTLE BLUE ORBIT ON RIGHT
   ========================================================== */

.cert-card-compact .cert-content::after,
.cert-card-compact .cert-info::after {
    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    left: 520px;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(52, 119, 228, 0.055);

    box-shadow:
        0 0 0 50px
        rgba(50, 111, 215, 0.018);

    pointer-events: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 800px) {

    .cert-card-compact {
        padding:
            28px 26px;

        min-height: 190px;
    }


    .cert-card-compact::after {
        font-size: 3rem;

        right: 20px;

        opacity: 0.65;
    }


    .cert-icon-container {
        margin-right: 20px;
    }

}


@media (max-width: 560px) {

    .cert-card-compact {
        align-items: flex-start;
    }


    .cert-card-compact::after {
        display: none;
    }


    .cert-title {
        font-size: 1.15rem;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cert-card-compact,
    .cert-card-compact::before,
    .cert-card-compact::after,
    .cert-icon-container {
        transition: none;
        animation: none;
    }


    .cert-card-compact:hover {
        transform: none;
    }

}


/* ===== CERTIFICATION V2 END ===== */





/* ===== CERT FINAL SPACING START ===== */


/* wider credential card */
.cert-card-compact {
    width: min(100%, 1080px);

    min-height: 220px;

    padding:
        34px 300px 34px 42px;
}


/* give content more breathing room */
.cert-content,
.cert-info {
    max-width: 620px;
}


/* cleaner title */
.cert-title {
    max-width: 520px;

    font-size: 1.42rem;

    line-height: 1.28;

    margin:
        8px 0 7px;
}


/* move watermark farther right + slightly smaller */
.cert-card-compact::after {
    right: 26px;

    font-size: 4.15rem;

    letter-spacing: -2px;

    color:
        rgba(71, 137, 241, 0.050);
}


/* slightly soften hover watermark */
.cert-card-compact:hover::after {
    color:
        rgba(78, 151, 255, 0.095);

    transform:
        translateY(-50%)
        translateX(-2px);
}


/* keep icon spacing balanced */
.cert-icon-container {
    margin-right: 32px;
}


/* medium screens */
@media (max-width: 1000px) {

    .cert-card-compact {
        padding:
            32px 230px 32px 34px;
    }

    .cert-card-compact::after {
        font-size: 3.6rem;

        right: 20px;
    }

    .cert-title {
        max-width: 440px;
    }

}


/* tablet */
@media (max-width: 800px) {

    .cert-card-compact {
        padding:
            28px 26px;

        min-height: 190px;
    }

    .cert-card-compact::after {
        font-size: 2.8rem;

        right: 18px;

        opacity: 0.55;
    }

    .cert-title {
        max-width: 360px;
    }

}


/* phone */
@media (max-width: 560px) {

    .cert-card-compact::after {
        display: none;
    }

    .cert-title {
        max-width: 100%;

        font-size: 1.15rem;
    }

}


/* ===== CERT FINAL SPACING END ===== */


/* ===== CERT TITLE FINAL FIX START ===== */

/* give the title block enough width */
.cert-content,
.cert-info {
    max-width: 700px;
    min-width: 0;
}

/* cleaner certification title */
.cert-title {
    max-width: 620px;

    font-size: 1.45rem;

    line-height: 1.22;

    margin: 8px 0 8px;

    white-space: normal;
}

/* keep the title area wider */
.cert-card-compact {
    padding-right: 250px;
}

/* push watermark farther right */
.cert-card-compact::after {
    right: 18px;

    font-size: 3.8rem;

    letter-spacing: -1.5px;

    color:
        rgba(71, 137, 241, 0.045);
}

/* medium desktop */
@media (min-width: 900px) {

    .cert-title {
        width: 540px;
    }

}

/* smaller screens */
@media (max-width: 900px) {

    .cert-card-compact {
        padding-right: 180px;
    }

    .cert-title {
        max-width: 460px;
    }

    .cert-card-compact::after {
        font-size: 3.2rem;
    }

}

/* mobile */
@media (max-width: 700px) {

    .cert-card-compact {
        padding-right: 26px;
    }

    .cert-title {
        max-width: 100%;
    }

    .cert-card-compact::after {
        display: none;
    }

}

/* ===== CERT TITLE FINAL FIX END ===== */





/* ===== CERT WATERMARK FINAL START ===== */

.cert-card-compact::after {
    right: -8px;

    font-size: 3.55rem;

    letter-spacing: -1px;

    color:
        rgba(71, 137, 241, 0.035);
}

.cert-card-compact:hover::after {
    color:
        rgba(78, 151, 255, 0.075);

    transform:
        translateY(-50%)
        translateX(-2px);
}

/* ===== CERT WATERMARK FINAL END ===== */


/* ===== CERT WATERMARK POSITION FINAL START ===== */

.cert-card-compact::after {
    right: -60px;
    top: 54%;

    font-size: 3.25rem;

    letter-spacing: -1px;

    color:
        rgba(71, 137, 241, 0.028);
}

.cert-card-compact:hover::after {
    color:
        rgba(78, 151, 255, 0.060);

    transform:
        translateY(-50%)
        translateX(-3px);
}

/* ===== CERT WATERMARK POSITION FINAL END ===== */


/* ===== CERT CLEAN FINAL START ===== */


/* Give the credential a proper desktop width */
.cert-card-compact {
    width: min(100%, 1020px) !important;
    min-height: 230px !important;

    padding:
        36px 285px 36px 42px !important;

    display: flex !important;
    align-items: center !important;
}


/* Main information gets its own space */
.cert-content,
.cert-info {
    position: relative;
    z-index: 4;

    width: 100%;
    max-width: 570px !important;
}


/* EXACTLY TWO TITLE LINES */
.cert-title-final {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 500px !important;

    margin: 8px 0 9px !important;

    font-size: 1.42rem !important;
    line-height: 1.18 !important;

    font-weight: 800 !important;
    letter-spacing: -0.35px !important;

    color: #e4edf9 !important;

    white-space: normal !important;
}


.cert-title-final span {
    display: block !important;
    white-space: nowrap !important;
}


/* First line slightly softer */
.cert-title-final span:first-child {
    color: #d6e5f8;
}


/* Azure Fundamentals gets the stronger emphasis */
.cert-title-final span:last-child {
    color: #edf5ff;
}


/* ----------------------------------------------------------
   WATERMARK GETS ITS OWN RIGHT-SIDE ZONE
   ---------------------------------------------------------- */

.cert-card-compact::after {
    content: 'AZ-900' !important;

    position: absolute !important;

    right: 34px !important;
    top: 50% !important;

    transform:
        translateY(-50%) !important;

    font-size: 3.35rem !important;
    line-height: 1 !important;

    font-weight: 900 !important;
    letter-spacing: -1.5px !important;

    color:
        rgba(72, 137, 239, 0.055) !important;

    text-shadow:
        0 0 28px
        rgba(42, 111, 230, 0.05) !important;

    pointer-events: none !important;

    z-index: 1 !important;
}


.cert-card-compact:hover::after {
    color:
        rgba(83, 156, 255, 0.10) !important;

    transform:
        translateY(-50%)
        translateX(-3px) !important;
}


/* Keep icon cleanly separated */
.cert-icon-container {
    flex-shrink: 0 !important;

    margin-right: 30px !important;
}


/* Keep completed pill compact */
.cert-label,
.cert-status {
    width: fit-content !important;
    max-width: fit-content !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .cert-card-compact {
        padding:
            32px 190px 32px 32px !important;
    }

    .cert-title-final {
        max-width: 430px !important;
        font-size: 1.28rem !important;
    }

    .cert-card-compact::after {
        right: 20px !important;
        font-size: 2.7rem !important;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 650px) {

    .cert-card-compact {
        padding:
            28px 24px !important;

        min-height: 190px !important;
    }

    .cert-card-compact::after {
        display: none !important;
    }

    .cert-title-final {
        max-width: 100% !important;
        font-size: 1.15rem !important;
    }

    .cert-title-final span {
        white-space: normal !important;
    }

}


/* ===== CERT CLEAN FINAL END ===== */


/* ===== ABOUT PREMIUM START ===== */


/* ==========================================================
   ABOUT SECTION
   ========================================================== */

.about-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(28, 89, 194, 0.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #050a13 0%,
            #07101c 100%
        );
}


/* soft ambient glow */
.about-section::before {
    content: '';

    position: absolute;

    width: 520px;
    height: 520px;

    right: -190px;
    top: 90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(42, 113, 235, 0.075),
            transparent 68%
        );

    filter: blur(4px);

    pointer-events: none;
}


/* ==========================================================
   ABOUT CONTENT
   ========================================================== */

.about-content {
    position: relative;
    z-index: 2;

    gap: 54px;
}


/* ==========================================================
   LEFT TEXT SIDE
   ========================================================== */

.about-text {
    position: relative;

    padding-left: 24px;
}


/* vertical accent */
.about-text::before {
    content: '';

    position: absolute;

    left: 0;
    top: 6px;

    width: 2px;
    height: 72%;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #3f8df8,
            rgba(48, 110, 215, 0.22),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(47, 125, 242, 0.12);
}


.about-text p {
    color: #8fa3be;

    line-height: 1.9;

    transition:
        color 250ms ease;
}


.about-text:hover p {
    color: #9db0c9;
}


/* ==========================================================
   RIGHT INFO CARDS
   ========================================================== */

.about-highlights,
.about-info,
.about-cards {
    position: relative;

    z-index: 2;
}


/* support several possible card class names */
.info-card,
.about-card,
.about-highlight {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(8, 20, 37, 0.97),
            rgba(5, 13, 25, 0.99)
        );

    border:
        1px solid rgba(55, 113, 202, 0.22);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.018);

    transition:
        border-color 260ms ease,
        background 260ms ease,
        box-shadow 260ms ease,
        transform 260ms ease;
}


/* small corner glow */
.info-card::before,
.about-card::before,
.about-highlight::before {
    content: '';

    position: absolute;

    width: 120px;
    height: 120px;

    right: -50px;
    top: -50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 125, 242, 0.09),
            transparent 70%
        );

    opacity: 0.55;

    transition:
        opacity 260ms ease,
        transform 260ms ease;
}


/* different from project/skill hover:
   only a tiny nudge + stronger inner light */
.info-card:hover,
.about-card:hover,
.about-highlight:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(71, 140, 245, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(11, 27, 48, 0.99),
            rgba(5, 14, 27, 0.99)
        );

    box-shadow:
        0 17px 38px rgba(0, 0, 0, 0.29),
        0 0 18px rgba(37, 104, 225, 0.07);
}


.info-card:hover::before,
.about-card:hover::before,
.about-highlight:hover::before {
    opacity: 1;

    transform:
        scale(1.12);
}


/* ==========================================================
   INFO LABELS
   ========================================================== */

.info-label,
.about-card-label {
    color: #8498b3;

    letter-spacing: 0.8px;

    font-size: 12px;

    font-weight: 750;

    text-transform: uppercase;
}


/* ==========================================================
   INFO VALUES
   ========================================================== */

.info-value,
.about-card-value {
    color: #6ea4ee;

    transition:
        color 220ms ease,
        text-shadow 220ms ease;
}


.info-card:hover .info-value,
.about-card:hover .about-card-value,
.about-highlight:hover .info-value {
    color: #8bbcff;

    text-shadow:
        0 0 12px
        rgba(65, 137, 244, 0.10);
}


/* ==========================================================
   SUBTLE INDIVIDUAL CARD PERSONALITY
   ========================================================== */

.info-card:nth-child(1),
.about-card:nth-child(1),
.about-highlight:nth-child(1) {
    border-left:
        2px solid rgba(62, 133, 238, 0.32);
}


.info-card:nth-child(2),
.about-card:nth-child(2),
.about-highlight:nth-child(2) {
    border-left:
        2px solid rgba(54, 118, 220, 0.28);
}


.info-card:nth-child(3),
.about-card:nth-child(3),
.about-highlight:nth-child(3) {
    border-left:
        2px solid rgba(49, 105, 203, 0.25);
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.about-section .section-title {
    color: #dce9f8;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .about-content {
        gap: 38px;
    }

}


@media (max-width: 700px) {

    .about-text {
        padding-left: 18px;
    }

    .about-text::before {
        height: 62%;
    }

    .info-card:hover,
    .about-card:hover,
    .about-highlight:hover {
        transform: none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .info-card,
    .about-card,
    .about-highlight,
    .info-card::before,
    .about-card::before,
    .about-highlight::before {
        transition: none;
    }

}


/* ===== ABOUT PREMIUM END ===== */


/* ===== PREMIUM HEADING GRADIENT START ===== */


/* ==========================================================
   ALL MAIN SECTION HEADINGS
   ========================================================== */

.section-title {
    display: inline-block;

    background:
        linear-gradient(
            105deg,
            #dbe9fb 0%,
            #a9c9f7 28%,
            #78a9ef 52%,
            #4d87e3 76%,
            #2f68c7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;

    text-shadow: none;

    filter:
        drop-shadow(
            0 0 10px
            rgba(61, 132, 240, 0.07)
        );
}


/* ==========================================================
   UNDERLINE MATCHES THE HEADING
   ========================================================== */

.section-title::after {
    background:
        linear-gradient(
            90deg,
            #6fa9f5,
            #3978df,
            #2458b6
        );

    box-shadow:
        0 0 10px
        rgba(53, 122, 231, 0.20);
}


/* ==========================================================
   ABOUT
   ========================================================== */

.about-section .section-title {
    background:
        linear-gradient(
            105deg,
            #dceafb 0%,
            #a8c8f6 30%,
            #6ca0ea 60%,
            #376fcd 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   PROJECTS
   ========================================================== */

.projects-section .section-title {
    background:
        linear-gradient(
            105deg,
            #e0ecfb 0%,
            #abc9f4 28%,
            #74a6ee 58%,
            #3974d7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   SKILLS
   ========================================================== */

.skills-section .section-title {
    background:
        linear-gradient(
            105deg,
            #dbe9fa 0%,
            #9fc0f0 30%,
            #6398e6 60%,
            #326bc9 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   CERTIFICATIONS
   ========================================================== */

.certifications-section .section-title {
    background:
        linear-gradient(
            105deg,
            #e3eefb 0%,
            #adcaf4 30%,
            #73a5ec 58%,
            #356fd1 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   BEYOND IT
   ========================================================== */

.beyond-it-section .section-title {
    background:
        linear-gradient(
            105deg,
            #dce9f9 0%,
            #a4c4f0 28%,
            #679ae4 60%,
            #356bc7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   CONTACT
   ========================================================== */

.contact-section .section-title {
    background:
        linear-gradient(
            105deg,
            #e0ecfa 0%,
            #aac8f2 30%,
            #6ca0e8 60%,
            #3771cf 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .section-title {
        filter:
            drop-shadow(
                0 0 7px
                rgba(61, 132, 240, 0.05)
            );
    }

}


/* ===== PREMIUM HEADING GRADIENT END ===== */


/* ===== HEADING AMBIENT GLOW START ===== */

.section-title {
    position: relative;

    filter:
        drop-shadow(
            0 0 7px
            rgba(77, 145, 245, 0.11)
        );

    animation:
        sectionTitleGlow
        4.8s ease-in-out
        infinite;
}


.section-title::after {
    box-shadow:
        0 0 8px rgba(53, 122, 231, 0.22);

    animation:
        sectionUnderlineGlow
        4.8s ease-in-out
        infinite;
}


@keyframes sectionTitleGlow {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 6px
                rgba(77, 145, 245, 0.08)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 11px
                rgba(77, 145, 245, 0.18)
            );
    }

}


@keyframes sectionUnderlineGlow {

    0%,
    100% {
        box-shadow:
            0 0 7px
            rgba(53, 122, 231, 0.18);
    }

    50% {
        box-shadow:
            0 0 14px
            rgba(67, 139, 245, 0.38);
    }

}


/* slightly stronger when hovered */
.section-title:hover {
    filter:
        drop-shadow(
            0 0 13px
            rgba(86, 153, 255, 0.24)
        );
}


/* accessibility */
@media (prefers-reduced-motion: reduce) {

    .section-title,
    .section-title::after {
        animation: none;
    }

}

/* ===== HEADING AMBIENT GLOW END ===== */


/* ===== EXPERIENCE TIMELINE START ===== */


/* ==========================================================
   EXPERIENCE SECTION
   ========================================================== */

.experience-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 35%,
            rgba(34, 102, 220, 0.055),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #050a13 0%,
            #070e19 100%
        );
}


/* subtle vertical ambient glow */
.experience-section::before {
    content: '';

    position: absolute;

    left: 112px;
    top: 150px;

    width: 1px;
    height: 72%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(55, 127, 241, 0.22) 15%,
            rgba(55, 127, 241, 0.18) 70%,
            transparent
        );

    box-shadow:
        0 0 12px rgba(47, 116, 233, 0.10);

    pointer-events: none;
}


/* ==========================================================
   EXPERIENCE LIST
   ========================================================== */

.experience-list,
.experience-container,
.experience-grid {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   EXPERIENCE CARD
   ========================================================== */

.experience-card {
    position: relative;

    overflow: visible;

    margin-left: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 19, 36, 0.98),
            rgba(4, 12, 24, 0.99)
        );

    border:
        1px solid rgba(57, 115, 205, 0.22);

    border-left:
        2px solid rgba(54, 126, 235, 0.50);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255,255,255,0.018);

    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms ease,
        background 260ms ease;
}


/* glowing timeline node */
.experience-card::before {
    content: '';

    position: absolute;

    left: -45px;
    top: 42px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #347ff1;

    border:
        3px solid #081323;

    box-shadow:
        0 0 0 4px rgba(52, 127, 241, 0.10),
        0 0 12px rgba(52, 127, 241, 0.42);

    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        background 240ms ease;
}


/* connector from node to card */
.experience-card::after {
    content: '';

    position: absolute;

    left: -31px;
    top: 47px;

    width: 29px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(58, 132, 243, 0.55),
            rgba(58, 132, 243, 0.08)
        );

    transition:
        width 240ms ease,
        background 240ms ease;
}


.experience-card:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(72, 142, 248, 0.38);

    border-left-color:
        rgba(74, 148, 255, 0.88);

    background:
        linear-gradient(
            145deg,
            rgba(10, 25, 47, 0.99),
            rgba(5, 14, 27, 0.99)
        );

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.31),
        0 0 20px rgba(35, 102, 225, 0.07);
}


.experience-card:hover::before {
    transform:
        scale(1.18);

    background: #58a0ff;

    box-shadow:
        0 0 0 5px rgba(52, 127, 241, 0.12),
        0 0 16px rgba(72, 151, 255, 0.72);
}


.experience-card:hover::after {
    width: 34px;

    background:
        linear-gradient(
            90deg,
            rgba(78, 151, 255, 0.85),
            rgba(78, 151, 255, 0.12)
        );
}


/* ==========================================================
   ROLE TITLE
   ========================================================== */

.experience-title,
.experience-role,
.job-title {
    color: #dce9f8;

    font-weight: 800;

    transition:
        color 220ms ease,
        text-shadow 220ms ease;
}


.experience-card:hover .experience-title,
.experience-card:hover .experience-role,
.experience-card:hover .job-title {
    color: #edf5ff;

    text-shadow:
        0 0 13px rgba(68, 139, 245, 0.10);
}


/* ==========================================================
   COMPANY
   ========================================================== */

.experience-company,
.company-name {
    color: #69a0eb;

    font-weight: 700;

    transition:
        color 220ms ease;
}


.experience-card:hover .experience-company,
.experience-card:hover .company-name {
    color: #87b7fa;
}


/* ==========================================================
   DATE / STATUS STAMP
   ========================================================== */

.experience-date,
.experience-date-pill,
.job-date {
    color: #78a9ea;

    background:
        linear-gradient(
            135deg,
            rgba(29, 76, 151, 0.14),
            rgba(11, 40, 84, 0.12)
        );

    border:
        1px solid rgba(59, 122, 215, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.015);

    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}


.experience-card:hover .experience-date,
.experience-card:hover .experience-date-pill,
.experience-card:hover .job-date {
    color: #96c1fb;

    border-color:
        rgba(74, 145, 245, 0.40);

    background:
        rgba(37, 92, 181, 0.16);

    box-shadow:
        0 0 12px rgba(40, 107, 225, 0.06);
}


/* ==========================================================
   BULLET POINTS
   ========================================================== */

.experience-card li {
    color: #91a5c0;

    transition:
        color 200ms ease,
        transform 200ms ease;
}


.experience-card:hover li {
    color: #9fb2ca;
}


/* blue arrow/bullet feel */
.experience-card li::marker {
    color: #4c8fe9;
}


/* ==========================================================
   SUBTLE CARD INDEX / SYSTEM LOG FEEL
   ========================================================== */

.experience-card:nth-child(1) {
    --timeline-node: #4e93f8;
}

.experience-card:nth-child(2) {
    --timeline-node: #3f82e8;
}

.experience-card:nth-child(3) {
    --timeline-node: #336fd1;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .experience-section::before {
        left: 55px;
    }

    .experience-card {
        margin-left: 26px;
    }

    .experience-card::before {
        left: -36px;
    }

    .experience-card::after {
        left: -24px;
        width: 22px;
    }

}


@media (max-width: 700px) {

    .experience-section::before {
        display: none;
    }

    .experience-card {
        margin-left: 0;
    }

    .experience-card::before,
    .experience-card::after {
        display: none;
    }

    .experience-card:hover {
        transform: none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .experience-card,
    .experience-card::before,
    .experience-card::after {
        transition: none;
    }

    .experience-card:hover {
        transform: none;
    }

}


/* ===== EXPERIENCE TIMELINE END ===== */


/* ===== BEYOND IT CINEMATIC START ===== */


/* ==========================================================
   BEYOND IT SECTION
   ========================================================== */

.beyond-it-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(40, 108, 221, 0.065),
            transparent 29%
        ),
        radial-gradient(
            circle at 15% 72%,
            rgba(25, 77, 157, 0.035),
            transparent 25%
        ),
        #050a13;
}


/* subtle ambient spotlight */
.beyond-it-section::before {
    content: '';

    position: absolute;

    width: 520px;
    height: 520px;

    right: -160px;
    top: 110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(52, 123, 238, 0.075) 0%,
            rgba(29, 83, 177, 0.025) 42%,
            transparent 70%
        );

    filter: blur(4px);

    pointer-events: none;
}


/* ==========================================================
   MAIN SOCCER CONTENT
   ========================================================== */

.soccer-feature,
.beyond-it-content,
.soccer-showcase {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   PHOTO
   ========================================================== */

.soccer-image,
.soccer-photo,
.soccer-feature-image {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    border:
        1px solid rgba(71, 130, 220, 0.22);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.38),
        0 0 30px rgba(30, 95, 207, 0.05);

    transition:
        border-color 420ms ease,
        box-shadow 420ms ease,
        transform 420ms ease;
}


/* Actual image */
.soccer-image img,
.soccer-photo img,
.soccer-feature-image img,
.beyond-it-section img {
    transition:
        transform 900ms cubic-bezier(.2,.7,.2,1),
        filter 600ms ease;

    transform: scale(1.001);
}


/* Premium photo interaction */
.soccer-image:hover,
.soccer-photo:hover,
.soccer-feature-image:hover {
    border-color:
        rgba(80, 151, 255, 0.42);

    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.44),
        0 0 34px rgba(42, 111, 224, 0.10);

    transform:
        translateY(-3px);
}


.soccer-image:hover img,
.soccer-photo:hover img,
.soccer-feature-image:hover img {
    transform:
        scale(1.035);

    filter:
        contrast(1.03)
        saturate(1.035);
}


/* ==========================================================
   OPTIONAL IMAGE EDGE LIGHT
   ========================================================== */

.soccer-image::after,
.soccer-photo::after,
.soccer-feature-image::after {
    content: '';

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 55%,
            rgba(79, 151, 255, 0.055) 76%,
            transparent 100%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 450ms ease;
}


.soccer-image:hover::after,
.soccer-photo:hover::after,
.soccer-feature-image:hover::after {
    opacity: 1;
}


/* ==========================================================
   TEXT SIDE
   ========================================================== */

.beyond-it-section .soccer-content,
.beyond-it-section .beyond-text,
.beyond-it-section .soccer-info {
    position: relative;
}


/* small blue accent line */
.beyond-it-section .soccer-content::before,
.beyond-it-section .beyond-text::before,
.beyond-it-section .soccer-info::before {
    content: '';

    position: absolute;

    left: -22px;
    top: 5px;

    width: 2px;
    height: 56px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #69a5f8,
            #2c6ed5,
            transparent
        );

    box-shadow:
        0 0 12px rgba(63, 137, 242, 0.18);
}


/* ==========================================================
   SOCCER STATS
   ========================================================== */

.soccer-stats,
.beyond-stats {
    position: relative;
}


.soccer-stat,
.stat-card,
.beyond-stat {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(11, 25, 45, 0.88),
            rgba(5, 14, 27, 0.94)
        );

    border:
        1px solid rgba(62, 121, 211, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.015);

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        background 280ms ease,
        box-shadow 280ms ease;
}


.soccer-stat::before,
.stat-card::before,
.beyond-stat::before {
    content: '';

    position: absolute;

    width: 70px;
    height: 70px;

    right: -24px;
    top: -26px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(67, 139, 244, 0.12),
            transparent 68%
        );

    opacity: .45;

    transition:
        opacity 280ms ease,
        transform 280ms ease;
}


.soccer-stat:hover,
.stat-card:hover,
.beyond-stat:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(72, 143, 247, 0.36);

    background:
        linear-gradient(
            145deg,
            rgba(13, 31, 56, 0.96),
            rgba(6, 17, 33, 0.98)
        );

    box-shadow:
        0 12px 26px rgba(0,0,0,0.19),
        0 0 18px rgba(41, 107, 221, 0.055);
}


.soccer-stat:hover::before,
.stat-card:hover::before,
.beyond-stat:hover::before {
    opacity: 1;

    transform:
        scale(1.15);
}


/* Numbers */
.soccer-stat strong,
.soccer-stat .stat-number,
.stat-card strong,
.stat-card .stat-number,
.beyond-stat strong {
    color: #75aef8;

    transition:
        color 250ms ease,
        text-shadow 250ms ease;
}


.soccer-stat:hover strong,
.soccer-stat:hover .stat-number,
.stat-card:hover strong,
.stat-card:hover .stat-number,
.beyond-stat:hover strong {
    color: #9ac5ff;

    text-shadow:
        0 0 12px rgba(77, 151, 252, 0.18);
}


/* ==========================================================
   SOCCER HIGHLIGHTS BUTTON
   ========================================================== */

.beyond-it-section a[href*="soccer"],
.beyond-it-section .soccer-button,
.beyond-it-section .soccer-btn {
    position: relative;

    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
}


.beyond-it-section a[href*="soccer"]:hover,
.beyond-it-section .soccer-button:hover,
.beyond-it-section .soccer-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(33, 101, 219, 0.16);
}


/* ==========================================================
   VERY SUBTLE IDLE PHOTO BREATH
   ========================================================== */

@keyframes soccerAmbientGlow {

    0%,
    100% {
        box-shadow:
            0 24px 60px rgba(0,0,0,0.38),
            0 0 22px rgba(38, 105, 216, 0.035);
    }

    50% {
        box-shadow:
            0 24px 60px rgba(0,0,0,0.38),
            0 0 30px rgba(38, 105, 216, 0.065);
    }

}


.soccer-image,
.soccer-photo,
.soccer-feature-image {
    animation:
        soccerAmbientGlow
        6s ease-in-out
        infinite;
}


/* ==========================================================
   MOBILE WILL BE POLISHED LATER
   Basic safety only for now
   ========================================================== */

@media (max-width: 700px) {

    .beyond-it-section .soccer-content::before,
    .beyond-it-section .beyond-text::before,
    .beyond-it-section .soccer-info::before {
        display: none;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .soccer-image,
    .soccer-photo,
    .soccer-feature-image {
        animation: none;
    }

    .soccer-image img,
    .soccer-photo img,
    .soccer-feature-image img,
    .beyond-it-section img {
        transition: none;
    }

}


/* ===== BEYOND IT CINEMATIC END ===== */
















/* ===== BEYOND IT FINAL SPACING START ===== */

@media (min-width: 901px) {

    /* Reduce overall spacing after the main section heading */
    #beyond-it .section-header,
    .beyond-it-section .section-header {
        margin-bottom: 24px !important;
        padding-bottom: 0 !important;
    }

    #beyond-it .section-title,
    .beyond-it-section .section-title {
        margin-bottom: 20px !important;
    }

    /* Pull actual soccer content upward naturally */
    #beyond-it .soccer-feature,
    #beyond-it .soccer-showcase,
    #beyond-it .beyond-it-content,
    #beyond-it .beyond-content,
    .beyond-it-section .soccer-feature,
    .beyond-it-section .soccer-showcase,
    .beyond-it-section .beyond-it-content,
    .beyond-it-section .beyond-content {
        margin-top: -18px !important;
        transform: none !important;
    }

    /* Keep a little breathing room before OUTSIDE TECHNOLOGY */
    #beyond-it .eyebrow,
    #beyond-it .section-label,
    #beyond-it .soccer-label,
    .beyond-it-section .eyebrow,
    .beyond-it-section .section-label,
    .beyond-it-section .soccer-label {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

}

/* ===== BEYOND IT FINAL SPACING END ===== */


/* ===== CONTACT SIGNAL START ===== */


/* ==========================================================
   CONTACT SECTION
   ========================================================== */

.contact-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(38, 103, 213, 0.055),
            transparent 30%
        ),
        #050a13;
}


/* soft ambient glow behind the contact row */
.contact-section::before {
    content: '';

    position: absolute;

    left: 50%;
    top: 58%;

    width: 820px;
    height: 260px;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            ellipse,
            rgba(45, 118, 236, 0.07) 0%,
            rgba(28, 76, 159, 0.025) 48%,
            transparent 72%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==========================================================
   CONTACT INTRO TEXT
   ========================================================== */

.contact-section .contact-text,
.contact-section .contact-intro,
.contact-section > .container > p {
    position: relative;
    z-index: 2;

    color: #9baec7;

    line-height: 1.9;
}


/* ==========================================================
   CONTACT CARDS WRAPPER
   ========================================================== */

.contact-grid,
.contact-cards,
.contact-info {
    position: relative;
    z-index: 2;
}


/* subtle signal line behind cards */
.contact-grid::before,
.contact-cards::before,
.contact-info::before {
    content: '';

    position: absolute;

    left: 8%;
    right: 8%;
    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(55, 124, 234, 0.14) 15%,
            rgba(69, 142, 250, 0.32) 50%,
            rgba(55, 124, 234, 0.14) 85%,
            transparent 100%
        );

    box-shadow:
        0 0 12px rgba(52, 123, 235, 0.08);

    pointer-events: none;
}


/* ==========================================================
   CONTACT CARD
   ========================================================== */

.contact-card {
    position: relative;
    z-index: 2;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(12, 26, 46, 0.96),
            rgba(6, 15, 29, 0.99)
        );

    border:
        1px solid rgba(63, 120, 207, 0.23);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.018);

    transition:
        border-color 300ms ease,
        box-shadow 300ms ease,
        background 300ms ease;
}


/* glowing status node */
.contact-card::before {
    content: '';

    position: absolute;

    top: 18px;
    right: 18px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #3d86f4;

    box-shadow:
        0 0 0 4px rgba(61, 134, 244, 0.07),
        0 0 11px rgba(61, 134, 244, 0.30);

    animation:
        contactNodePulse
        3.8s ease-in-out
        infinite;
}


/* faint inner signal sweep */
.contact-card::after {
    content: '';

    position: absolute;

    width: 120px;
    height: 120px;

    right: -45px;
    bottom: -48px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(62, 137, 245, 0.10),
            rgba(62, 137, 245, 0.025) 45%,
            transparent 70%
        );

    opacity: .45;

    transition:
        opacity 300ms ease,
        transform 300ms ease;
}


.contact-card:hover {
    border-color:
        rgba(72, 144, 250, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(14, 31, 55, 0.99),
            rgba(6, 17, 33, 0.99)
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(44, 111, 224, 0.07);
}


.contact-card:hover::after {
    opacity: 1;
    transform: scale(1.18);
}


/* ==========================================================
   CONTACT ICONS
   ========================================================== */

.contact-icon,
.contact-card .icon,
.contact-card > span:first-child {
    transition:
        transform 280ms ease,
        filter 280ms ease;
}


.contact-card:hover .contact-icon,
.contact-card:hover .icon,
.contact-card:hover > span:first-child {
    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 0 10px
            rgba(74, 145, 247, 0.18)
        );
}


/* ==========================================================
   LABELS
   ========================================================== */

.contact-card h3,
.contact-card .contact-label {
    color: #9db2ce;

    letter-spacing: .04em;

    transition:
        color 240ms ease;
}


.contact-card:hover h3,
.contact-card:hover .contact-label {
    color: #b7c9df;
}


/* ==========================================================
   CONTACT VALUES / LINKS
   ========================================================== */

.contact-card p,
.contact-card a {
    transition:
        color 240ms ease,
        text-shadow 240ms ease;
}


.contact-card a {
    color: #4e8cf0;
}


.contact-card a:hover {
    color: #7fb4ff;

    text-shadow:
        0 0 12px
        rgba(75, 147, 255, 0.18);
}


/* ==========================================================
   DIFFERENT NODE TIMING FOR EACH CARD
   ========================================================== */

.contact-card:nth-child(1)::before {
    animation-delay: 0s;
}

.contact-card:nth-child(2)::before {
    animation-delay: .6s;
}

.contact-card:nth-child(3)::before {
    animation-delay: 1.2s;
}


/* ==========================================================
   PULSE ANIMATION
   ========================================================== */

@keyframes contactNodePulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 4px rgba(61, 134, 244, 0.06),
            0 0 9px rgba(61, 134, 244, 0.22);
    }

    50% {
        transform: scale(1.18);

        box-shadow:
            0 0 0 6px rgba(61, 134, 244, 0.08),
            0 0 15px rgba(61, 134, 244, 0.44);
    }

}


/* ==========================================================
   FOOTER POLISH
   ========================================================== */

footer,
.footer {
    border-top:
        1px solid rgba(58, 111, 190, 0.10);

    background:
        linear-gradient(
            180deg,
            #050a13,
            #040810
        );
}


footer p,
.footer p {
    color: #8295ae;
}


/* ==========================================================
   BASIC MOBILE SAFETY
   Full mobile pass comes later
   ========================================================== */

@media (max-width: 700px) {

    .contact-grid::before,
    .contact-cards::before,
    .contact-info::before {
        display: none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-card::before {
        animation: none;
    }

}


/* ===== CONTACT SIGNAL END ===== */


/* ===== FINAL DESKTOP SPACING POLISH START ===== */

@media (min-width: 901px) {


    /* ======================================================
       SECTION SCROLL POSITION
       Keeps headings comfortably below sticky navigation
       ====================================================== */

    .about-section,
    .experience-section,
    .projects-section,
    .skills-section,
    .certifications-section,
    .beyond-it-section,
    .contact-section {
        scroll-margin-top: 90px;
    }


    /* ======================================================
       ABOUT
       ====================================================== */

    .about-section {
        padding-top: 82px !important;
        padding-bottom: 82px !important;
    }


    /* ======================================================
       EXPERIENCE
       Slightly tighter transition from About
       ====================================================== */

    .experience-section {
        padding-top: 80px !important;
        padding-bottom: 82px !important;
    }


    /* ======================================================
       PROJECTS
       Remove excessive empty area above heading
       ====================================================== */

    .projects-section {
        padding-top: 80px !important;
        padding-bottom: 86px !important;
    }


    /* ======================================================
       SKILLS
       Keep room for two rows but avoid unnecessary bottom gap
       ====================================================== */

    .skills-section {
        padding-top: 82px !important;
        padding-bottom: 78px !important;
    }


    /* ======================================================
       CERTIFICATIONS
       Only one credential currently, so section does not
       need to occupy a huge amount of vertical space
       ====================================================== */

    .certifications-section {
        padding-top: 80px !important;
        padding-bottom: 82px !important;
        min-height: auto !important;
    }


    /* Certification card stays comfortably separated
       from the section heading */
    .certifications-section .cert-card-compact,
    .certifications-section .cert-card,
    .certifications-section .certification-card {
        margin-top: 48px;
        margin-bottom: 0;
    }


    /* ======================================================
       BEYOND IT
       Keep the tighter spacing we already established
       ====================================================== */

    .beyond-it-section {
        padding-top: 80px !important;
        padding-bottom: 82px !important;
    }


    /* ======================================================
       CONTACT
       Final section should feel complete without being huge
       ====================================================== */

    .contact-section {
        padding-top: 80px !important;
        padding-bottom: 74px !important;
        min-height: auto !important;
    }


    /* Slightly tighten intro → cards */
    .contact-section .contact-grid,
    .contact-section .contact-cards,
    .contact-section .contact-info {
        margin-top: 52px !important;
    }


    /* ======================================================
       CONSISTENT SECTION TITLE RHYTHM
       ====================================================== */

    .about-section .section-title,
    .experience-section .section-title,
    .projects-section .section-title,
    .skills-section .section-title,
    .certifications-section .section-title,
    .contact-section .section-title {
        margin-top: 0 !important;
    }


    /* ======================================================
       FOOTER
       ====================================================== */

    footer,
    .footer {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

}


/* ===== FINAL DESKTOP SPACING POLISH END ===== */


/* ===== PREMIUM CURSOR ORB START ===== */


/* ==========================================================
   CUSTOM FOLLOW ORB
   Normal system cursor remains visible
   ========================================================== */

.cursor-orb {
    position: fixed;

    left: 0;
    top: 0;

    width: 14px;
    height: 14px;

    border-radius: 999px;

    pointer-events: none;

    z-index: 999999;

    opacity: 0;

    transform:
        translate3d(-100px, -100px, 0)
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #f2f7ff 24%,
            #a9ceff 48%,
            #5a9df8 72%,
            rgba(54, 128, 239, 0.20) 100%
        );

    box-shadow:
        0 0 7px rgba(255,255,255,0.72),
        0 0 14px rgba(123,183,255,0.48),
        0 0 28px rgba(54,128,239,0.18);

    will-change:
        transform,
        width,
        height,
        opacity;

    transition:
        width 180ms ease,
        height 180ms ease,
        opacity 220ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}


/* tiny bright core */
.cursor-orb::before {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    background: #ffffff;

    box-shadow:
        0 0 6px rgba(255,255,255,0.95);
}


/* visible after first mouse movement */
.cursor-orb.is-visible {
    opacity: 1;
}


/* grows slightly over interactive elements */
.cursor-orb.is-interactive {
    width: 22px;
    height: 22px;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #ddecff 25%,
            #7ab5ff 58%,
            rgba(49,121,237,0.30) 100%
        );

    box-shadow:
        0 0 9px rgba(255,255,255,0.78),
        0 0 18px rgba(112,177,255,0.55),
        0 0 34px rgba(48,119,234,0.24);
}


/* ==========================================================
   MOBILE / TOUCH
   ========================================================== */

@media (hover: none),
       (pointer: coarse) {

    .cursor-orb {
        display: none !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cursor-orb {
        display: none !important;
    }

}


/* ===== PREMIUM CURSOR ORB END ===== */


/* ===== HERO LIVING NETWORK START ===== */


/* ==========================================================
   1. PERSON ALIGNMENT
   Move Shamil slightly right + upward so fingertip
   meets the centre network node.
   ========================================================== */

@media (min-width: 941px) {

    .hero-person-real {
        left: 41.4% !important;
        bottom: 8px !important;

        animation:
            heroPersonFloat 5.8s ease-in-out infinite;
    }

}


/* ==========================================================
   PERSON SUBTLE MOTION
   ========================================================== */

@keyframes heroPersonFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-3px);
    }

}


/* ==========================================================
   2. CENTRE NODE
   ========================================================== */

.mockup-tech-panel .center-node,
.mockup-tech-panel .network-center,
.mockup-tech-panel .main-node {
    animation:
        heroCenterPulse 2.8s ease-in-out infinite;

    transform-origin: center;
}


@keyframes heroCenterPulse {

    0%,
    100% {
        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.75))
            drop-shadow(0 0 12px rgba(68,145,255,.55));

        transform: scale(1);
    }

    50% {
        filter:
            drop-shadow(0 0 9px rgba(255,255,255,.95))
            drop-shadow(0 0 22px rgba(70,150,255,.85));

        transform: scale(1.13);
    }

}


/* ==========================================================
   3. NETWORK SVG
   ========================================================== */

.mockup-tech-panel svg {
    animation:
        networkBreathing 6.5s ease-in-out infinite;

    transform-origin: center;
}


@keyframes networkBreathing {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 4px
                rgba(47,125,242,.10)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 10px
                rgba(47,125,242,.22)
            );
    }

}


/* ==========================================================
   NETWORK NODES
   ========================================================== */

.mockup-tech-panel circle {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        networkNodePulse
        3.4s ease-in-out
        infinite;
}


.mockup-tech-panel circle:nth-of-type(2) {
    animation-delay: .4s;
}

.mockup-tech-panel circle:nth-of-type(3) {
    animation-delay: .8s;
}

.mockup-tech-panel circle:nth-of-type(4) {
    animation-delay: 1.2s;
}

.mockup-tech-panel circle:nth-of-type(5) {
    animation-delay: 1.6s;
}


@keyframes networkNodePulse {

    0%,
    100% {
        opacity: .82;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.10);
    }

}


/* ==========================================================
   4. ORBIT RINGS
   Slow cinematic movement
   ========================================================== */

.mockup-tech-panel .orbit-ring:nth-of-type(1),
.mockup-tech-panel .orbit-1 {
    animation:
        orbitRotateOne
        24s linear infinite;
}


.mockup-tech-panel .orbit-ring:nth-of-type(2),
.mockup-tech-panel .orbit-2 {
    animation:
        orbitRotateTwo
        32s linear infinite reverse;
}


.mockup-tech-panel .orbit-ring:nth-of-type(3),
.mockup-tech-panel .orbit-3 {
    animation:
        orbitRotateOne
        42s linear infinite;
}


@keyframes orbitRotateOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes orbitRotateTwo {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================
   5. FLOATING TECH CARDS
   Different motion for each card
   ========================================================== */

.mockup-tech-panel .tech-card,
.mockup-tech-panel .floating-card {
    will-change: transform;
}


.mockup-tech-panel .tech-card:nth-of-type(1),
.mockup-tech-panel .floating-card:nth-of-type(1) {
    animation:
        techCardFloatOne
        5.5s ease-in-out infinite;
}


.mockup-tech-panel .tech-card:nth-of-type(2),
.mockup-tech-panel .floating-card:nth-of-type(2) {
    animation:
        techCardFloatTwo
        6.3s ease-in-out infinite;
}


.mockup-tech-panel .tech-card:nth-of-type(3),
.mockup-tech-panel .floating-card:nth-of-type(3) {
    animation:
        techCardFloatThree
        7s ease-in-out infinite;
}


@keyframes techCardFloatOne {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

}


@keyframes techCardFloatTwo {

    0%,
    100% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(3px, -4px);
    }

}


@keyframes techCardFloatThree {

    0%,
    100% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(-3px, -5px);
    }

}


/* ==========================================================
   6. FINGER CONTACT GLOW
   ========================================================== */

.hero-person-real::after {
    content: '';

    position: absolute;

    /*
       Positioned around fingertip area of current PNG.
       This creates the feeling that the hand is powering
       the centre node.
    */

    left: 67%;
    top: 17%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #ddebff 28%,
            #69aaff 55%,
            transparent 74%
        );

    box-shadow:
        0 0 8px rgba(255,255,255,.85),
        0 0 18px rgba(85,155,255,.75),
        0 0 34px rgba(47,125,242,.38);

    pointer-events: none;

    animation:
        fingerContactPulse
        2.2s ease-in-out infinite;
}


@keyframes fingerContactPulse {

    0%,
    100% {
        opacity: .72;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }

}


/* ==========================================================
   7. PANEL AMBIENT GLOW
   ========================================================== */

.mockup-tech-panel {
    animation:
        heroPanelGlow
        7s ease-in-out infinite;
}


@keyframes heroPanelGlow {

    0%,
    100% {
        box-shadow:
            inset 0 0 40px rgba(31,93,187,.035),
            0 0 20px rgba(23,80,175,.035);
    }

    50% {
        box-shadow:
            inset 0 0 55px rgba(31,93,187,.07),
            0 0 32px rgba(23,80,175,.07);
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-person-real,
    .hero-person-real::after,
    .mockup-tech-panel,
    .mockup-tech-panel svg,
    .mockup-tech-panel circle,
    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .orbit-ring {
        animation: none !important;
    }

}


/* ===== HERO LIVING NETWORK END ===== */


/* ===== HERO PERSON FINAL ALIGNMENT START ===== */

@media (min-width: 941px) {

    /*
       Move the person left so the actual fingertip
       reaches the central infrastructure node.
    */

    .hero-person-real {
        left: 19% !important;
        bottom: 8px !important;
    }

}

/* ===== HERO PERSON FINAL ALIGNMENT END ===== */



/* ===== HERO PERSON SIZE ALIGN START ===== */

@media (min-width: 941px) {

    /*
       Slightly smaller person for better proportion
       inside the infrastructure panel.
    */

    .hero-person-real {
        width: 192px !important;

        left: 23% !important;
        bottom: 18px !important;
    }

    .hero-person-real img {
        width: 100% !important;
        height: auto !important;
    }

}

/* ===== HERO PERSON SIZE ALIGN END ===== */







/* ===== SAFE HERO LIFE START ===== */


/* ==========================================================
   PANEL AMBIENT BREATHING
   Does NOT change position or dimensions
   ========================================================== */

.mockup-tech-panel {
    animation:
        safeHeroPanelBreath
        7s ease-in-out
        infinite;
}


@keyframes safeHeroPanelBreath {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(51, 119, 229, 0.06),
            0 0 26px rgba(34, 98, 207, 0.035),
            inset 0 0 32px rgba(39, 103, 211, 0.025);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(63, 137, 246, 0.09),
            0 0 38px rgba(40, 111, 230, 0.065),
            inset 0 0 46px rgba(43, 113, 230, 0.045);
    }

}


/* ==========================================================
   NETWORK LINES
   Animated dash movement = subtle data flow
   Geometry stays exactly where it is.
   ========================================================== */

.mockup-tech-panel svg line,
.mockup-tech-panel svg polyline {
    stroke-dasharray: 14 8;

    animation:
        safeNetworkDataFlow
        10s linear
        infinite;
}


@keyframes safeNetworkDataFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -44;
    }

}


/* ==========================================================
   NETWORK NODES
   Different timing so network feels alive
   ========================================================== */

.mockup-tech-panel svg circle {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        safeHeroNodePulse
        3.6s ease-in-out
        infinite;
}


.mockup-tech-panel svg circle:nth-of-type(2) {
    animation-delay: .45s;
}

.mockup-tech-panel svg circle:nth-of-type(3) {
    animation-delay: .9s;
}

.mockup-tech-panel svg circle:nth-of-type(4) {
    animation-delay: 1.35s;
}

.mockup-tech-panel svg circle:nth-of-type(5) {
    animation-delay: 1.8s;
}


@keyframes safeHeroNodePulse {

    0%,
    100% {
        opacity: .82;

        filter:
            drop-shadow(
                0 0 3px
                rgba(70, 147, 255, .28)
            );
    }

    50% {
        opacity: 1;

        filter:
            drop-shadow(
                0 0 9px
                rgba(82, 160, 255, .72)
            );
    }

}


/* ==========================================================
   TECH CARDS
   Uses CSS "translate" rather than transform,
   so existing positioning is not overwritten.
   ========================================================== */

.mockup-tech-panel .tech-card:nth-of-type(1),
.mockup-tech-panel .floating-card:nth-of-type(1) {
    animation:
        safeTechFloatOne
        5.8s ease-in-out
        infinite;
}


.mockup-tech-panel .tech-card:nth-of-type(2),
.mockup-tech-panel .floating-card:nth-of-type(2) {
    animation:
        safeTechFloatTwo
        6.7s ease-in-out
        infinite;
}


.mockup-tech-panel .tech-card:nth-of-type(3),
.mockup-tech-panel .floating-card:nth-of-type(3) {
    animation:
        safeTechFloatThree
        7.4s ease-in-out
        infinite;
}


@keyframes safeTechFloatOne {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -4px;
    }

}


@keyframes safeTechFloatTwo {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 3px -3px;
    }

}


@keyframes safeTechFloatThree {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: -3px -4px;
    }

}


/* ==========================================================
   CENTER CONTACT AREA
   Stronger pulse where fingertip meets network
   ========================================================== */

.mockup-tech-panel .center-node,
.mockup-tech-panel .network-center,
.mockup-tech-panel .main-node {
    animation:
        safeCenterContact
        2.35s ease-in-out
        infinite !important;
}


@keyframes safeCenterContact {

    0%,
    100% {
        opacity: .9;

        filter:
            drop-shadow(
                0 0 7px
                rgba(255,255,255,.68)
            )
            drop-shadow(
                0 0 15px
                rgba(69,146,255,.48)
            );
    }

    50% {
        opacity: 1;

        filter:
            drop-shadow(
                0 0 11px
                rgba(255,255,255,.95)
            )
            drop-shadow(
                0 0 25px
                rgba(72,153,255,.80)
            );
    }

}


/* ==========================================================
   ORBIT RINGS
   Barely visible brightness cycle
   No layout movement.
   ========================================================== */

.mockup-tech-panel .orbit-ring,
.mockup-tech-panel .orbit-1,
.mockup-tech-panel .orbit-2,
.mockup-tech-panel .orbit-3 {
    animation:
        safeOrbitBreath
        8s ease-in-out
        infinite;
}


.mockup-tech-panel .orbit-2 {
    animation-delay: 1.5s;
}

.mockup-tech-panel .orbit-3 {
    animation-delay: 3s;
}


@keyframes safeOrbitBreath {

    0%,
    100% {
        opacity: .42;
    }

    50% {
        opacity: .68;
    }

}


/* ==========================================================
   PERSON
   IMPORTANT:
   No new positioning, sizing or transform here.
   Your current alignment remains untouched.
   ========================================================== */


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .mockup-tech-panel,
    .mockup-tech-panel svg line,
    .mockup-tech-panel svg polyline,
    .mockup-tech-panel svg circle,
    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .center-node,
    .mockup-tech-panel .network-center,
    .mockup-tech-panel .main-node,
    .mockup-tech-panel .orbit-ring,
    .mockup-tech-panel .orbit-1,
    .mockup-tech-panel .orbit-2,
    .mockup-tech-panel .orbit-3 {
        animation: none !important;
    }

}


/* ===== SAFE HERO LIFE END ===== */



/* ===== HERO CURSOR QUIET MODE START ===== */

.cursor-orb.hero-quiet {
    width: 7px !important;
    height: 7px !important;

    opacity: .42 !important;

    box-shadow:
        0 0 5px rgba(255,255,255,.45),
        0 0 10px rgba(100,165,255,.22) !important;
}

/* ===== HERO CURSOR QUIET MODE END ===== */



/* ===== REMOVE OLD HERO BODY GLOW START ===== */

/*
   Removes the old artificial contact glow that moved
   onto Shamil's shoulder after resizing/repositioning.
*/

.hero-person-real::after,
.hero-person-real::before {
    content: none !important;
    display: none !important;
    animation: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* ===== REMOVE OLD HERO BODY GLOW END ===== */



/* ===== SMOOTH NAV PERFORMANCE START ===== */


/* ----------------------------------------------------------
   NEVER SHOW A WHITE PAGE BETWEEN SECTIONS
   ---------------------------------------------------------- */

html,
body {
    background: #030711 !important;
}


/*
   We manage navigation animation ourselves below.
   This avoids stacking browser smooth scrolling with JS.
*/
html {
    scroll-behavior: auto !important;
}





/* ----------------------------------------------------------
   PAUSE EXPENSIVE HERO ANIMATIONS ONCE HERO IS OFF SCREEN
   ---------------------------------------------------------- */

.mockup-hero.hero-motion-paused .mockup-tech-panel,
.mockup-hero.hero-motion-paused .hero-person-real,
.mockup-hero.hero-motion-paused .mockup-tech-panel svg,
.mockup-hero.hero-motion-paused .mockup-tech-panel svg line,
.mockup-hero.hero-motion-paused .mockup-tech-panel svg polyline,
.mockup-hero.hero-motion-paused .mockup-tech-panel svg circle,
.mockup-hero.hero-motion-paused .tech-card,
.mockup-hero.hero-motion-paused .floating-card,
.mockup-hero.hero-motion-paused .orbit-ring {
    animation-play-state: paused !important;
}


/* Helps browser optimize animated areas */
.mockup-tech-panel,
.cursor-orb {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ===== SMOOTH NAV PERFORMANCE END ===== */














/* ===== CONTACT CLEAN COMPACT START ===== */

@media (min-width: 901px) {

    /* ------------------------------------------------------
       CONTACT SECTION
       ------------------------------------------------------ */

    .contact-section {
        min-height: auto !important;

        padding-top: 64px !important;
        padding-bottom: 52px !important;
    }


    /* ------------------------------------------------------
       INTRO
       ------------------------------------------------------ */

    .contact-section .contact-intro,
    .contact-section .contact-text,
    .contact-section > .container > p {

        max-width: 900px !important;

        margin-top: 40px !important;
        margin-bottom: 38px !important;

        line-height: 1.75 !important;
    }


    /* ------------------------------------------------------
       CARD ROW
       ------------------------------------------------------ */

    .contact-grid,
    .contact-cards,
    .contact-info {

        max-width: 1120px !important;

        gap: 26px !important;

        margin-top: 0 !important;
    }


    /* ------------------------------------------------------
       CONTACT CARDS

       Only outer sizing is changed.
       Existing internal layout remains untouched.
       ------------------------------------------------------ */

    .contact-card {

        min-height: 150px !important;

        padding-top: 24px !important;
        padding-bottom: 24px !important;

        border-radius: 16px !important;
    }


    /* ------------------------------------------------------
       DON'T ALLOW OLD EXPERIMENTAL WIDTH RULES
       ------------------------------------------------------ */

    .contact-card p,
    .contact-card a,
    .contact-card h3,
    .contact-card .contact-label {

        max-width: none !important;

        word-break: normal !important;
    }


    /* Email can stay naturally readable */
    .contact-card a[href^="mailto:"] {

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    /* ------------------------------------------------------
       FOOTER
       ------------------------------------------------------ */

    footer,
    .footer {

        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

}


/* Basic phone protection only.
   Full mobile design comes later. */

@media (max-width: 900px) {

    .contact-card {

        min-height: auto !important;
    }

}


/* ===== CONTACT CLEAN COMPACT END ===== */



/* ===== CERT COMPACT FINAL START ===== */

@media (min-width: 901px) {

    /* Section itself does not need excessive height */
    .certifications-section {
        min-height: auto !important;
        padding-top: 74px !important;
        padding-bottom: 70px !important;
    }


    /* Main credential */
    .cert-card-compact {
        width: min(100%, 720px) !important;

        min-height: 170px !important;

        padding:
            28px 190px
            28px 32px !important;

        margin-top: 42px !important;

        border-radius: 20px !important;
    }


    /* Icon slightly smaller */
    .cert-card-compact .cert-icon,
    .cert-card-compact .cert-badge-icon {
        transform: scale(.92);
        transform-origin: center;
    }


    /* Title stays strong without dominating */
    .cert-card-compact .cert-title-final,
    .cert-card-compact .cert-title {
        font-size: 1.28rem !important;
        line-height: 1.28 !important;
    }


    /* Completed pill */
    .cert-card-compact .cert-status,
    .cert-card-compact .completed-badge,
    .cert-card-compact .status-pill {
        transform: scale(.94);
        transform-origin: left center;
    }


    /* Watermark stays visible but less oversized */
    .cert-card-compact::after,
    .cert-card-compact .cert-watermark {
        font-size: 2.9rem !important;
        right: 28px !important;
    }

}


/* Phone safety only for now */
@media (max-width: 900px) {

    .cert-card-compact {
        width: 100% !important;

        min-height: auto !important;

        padding: 24px !important;
    }

}


/* ===== CERT COMPACT FINAL END ===== */



/* ===== CONTACT FINAL HUB START ===== */


/* ==========================================================
   CONTACT SECTION
   ========================================================== */

.contact-final {
    position: relative;

    min-height: auto !important;

    padding-top: 76px !important;
    padding-bottom: 68px !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 52%,
            rgba(37, 103, 218, 0.055),
            transparent 34%
        ),
        #050a13;
}


/* ==========================================================
   MAIN HUB
   ========================================================== */

.contact-final-shell {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap: 46px;

    width: min(100%, 1040px);

    margin:
        48px auto
        0;

    padding:
        38px 40px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 22, 41, .96),
            rgba(4, 12, 24, .99)
        );

    border:
        1px solid
        rgba(58, 122, 218, .23);

    box-shadow:
        0 28px 65px
        rgba(0,0,0,.28),
        inset 0 1px 0
        rgba(255,255,255,.018);

    overflow: hidden;
}


/* blue light along top */
.contact-final-shell::before {
    content: '';

    position: absolute;

    left: 8%;
    right: 48%;
    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4793ff,
            transparent
        );

    box-shadow:
        0 0 16px
        rgba(58, 137, 249, .38);
}


/* subtle background light */
.contact-final-shell::after {
    content: '';

    position: absolute;

    width: 280px;
    height: 280px;

    left: -120px;
    bottom: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(39, 108, 223, .10),
            transparent 68%
        );

    pointer-events: none;
}


/* ==========================================================
   LEFT SIDE
   ========================================================== */

.contact-final-intro {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.contact-status {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-bottom: 18px;

    padding:
        7px 12px;

    border-radius: 999px;

    border:
        1px solid
        rgba(57, 137, 245, .23);

    background:
        rgba(27, 79, 164, .10);

    color: #8fb9f4;

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .04em;
}


.contact-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4a94ff;

    box-shadow:
        0 0 0 4px
        rgba(68, 144, 255, .07),
        0 0 10px
        rgba(68, 144, 255, .50);

    animation:
        contactFinalStatusPulse
        3s ease-in-out
        infinite;
}


@keyframes contactFinalStatusPulse {

    0%,
    100% {
        opacity: .7;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }

}


.contact-final-intro h3 {
    margin:
        0 0 14px;

    font-size:
        clamp(1.8rem, 2.6vw, 2.55rem);

    line-height: 1.08;

    background:
        linear-gradient(
            105deg,
            #e5effc,
            #91bdf8 50%,
            #4d8ae4
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.contact-final-intro p {
    max-width: 470px;

    margin: 0;

    color: #93a7c1;

    font-size: 1rem;

    line-height: 1.75;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.contact-final-actions {
    display: flex;

    gap: 12px;

    margin-top: 25px;
}


.contact-primary-btn,
.contact-secondary-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding:
        0 19px;

    border-radius: 12px;

    font-weight: 750;

    text-decoration: none;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
}


.contact-primary-btn {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #2e82f6,
            #2367dc
        );

    border:
        1px solid
        rgba(98, 166, 255, .38);

    box-shadow:
        0 10px 24px
        rgba(31, 103, 225, .16);
}


.contact-secondary-btn {
    color: #86b5f8;

    background:
        rgba(8, 23, 44, .68);

    border:
        1px solid
        rgba(65, 134, 235, .34);
}


.contact-primary-btn:hover,
.contact-secondary-btn:hover {
    transform:
        translateY(-2px);
}


.contact-primary-btn:hover {
    box-shadow:
        0 13px 30px
        rgba(39, 113, 232, .25);
}


.contact-primary-btn span {
    transition:
        transform 200ms ease;
}


.contact-primary-btn:hover span {
    transform:
        translateX(3px);
}


/* ==========================================================
   RIGHT SIDE
   ========================================================== */

.contact-final-details {
    position: relative;
    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 10px;

    justify-content: center;
}


/* individual compact rows */
.contact-detail-row {
    position: relative;

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

    min-height: 72px;

    padding:
        13px 15px;

    border-radius: 14px;

    border:
        1px solid
        rgba(55, 113, 201, .16);

    background:
        linear-gradient(
            135deg,
            rgba(10, 25, 47, .74),
            rgba(6, 16, 31, .82)
        );

    text-decoration: none;

    transition:
        border-color 230ms ease,
        background 230ms ease,
        transform 230ms ease,
        box-shadow 230ms ease;
}


.contact-detail-link:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(70, 143, 247, .36);

    background:
        linear-gradient(
            135deg,
            rgba(13, 32, 58, .94),
            rgba(6, 18, 34, .95)
        );

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.15);
}


/* ==========================================================
   ICON
   ========================================================== */

.contact-detail-icon {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    border:
        1px solid
        rgba(66, 139, 243, .26);

    background:
        rgba(29, 81, 167, .15);

    box-shadow:
        inset 0 0 14px
        rgba(42, 113, 226, .04);
}


.contact-detail-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #62a4ff;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ==========================================================
   TEXT
   ========================================================== */

.contact-detail-label {
    display: block;

    margin-bottom: 4px;

    color: #788da9;

    font-size: .66rem;

    font-weight: 850;

    letter-spacing: .12em;
}


.contact-detail-row strong {
    display: block;

    color: #d7e5f6;

    font-size: .96rem;

    font-weight: 720;

    line-height: 1.35;

    white-space: nowrap;
}


.contact-detail-link strong {
    color: #7fb4fb;
}


/* ==========================================================
   ARROW
   ========================================================== */

.contact-row-arrow {
    color: #4b8ce6;

    font-size: 1rem;

    opacity: .7;

    transition:
        transform 220ms ease,
        color 220ms ease;
}


.contact-detail-link:hover .contact-row-arrow {
    transform:
        translate(2px, -2px);

    color: #83b8ff;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.contact-final + footer,
.contact-final + .footer {
    margin-top: 0 !important;
}


/* ==========================================================
   MOBILE PRE-SAFETY
   Proper mobile polish still comes later.
   ========================================================== */

@media (max-width: 900px) {

    .contact-final-shell {
        grid-template-columns:
            1fr;

        gap: 30px;

        padding:
            30px 25px;
    }

}


@media (max-width: 600px) {

    .contact-final {
        padding-top:
            60px !important;

        padding-bottom:
            50px !important;
    }

    .contact-final-shell {
        margin-top: 34px;

        padding:
            25px 18px;

        border-radius: 18px;
    }

    .contact-final-actions {
        flex-direction: column;
    }

    .contact-primary-btn,
    .contact-secondary-btn {
        width: 100%;
    }

    .contact-detail-row strong {
        white-space: normal;

        overflow-wrap: anywhere;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-status-dot {
        animation: none;
    }

}


/* ===== CONTACT FINAL HUB END ===== */



/* ===== CERTIFICATIONS FINAL V2 START ===== */


/* ==========================================================
   SECTION
   ========================================================== */

.certs-final {
    position: relative;

    min-height: auto !important;

    padding-top: 76px !important;
    padding-bottom: 78px !important;

    background:
        radial-gradient(
            circle at 38% 55%,
            rgba(37, 105, 219, .045),
            transparent 35%
        ),
        #050a13;
}


/* ==========================================================
   GRID
   AZ-900 gets more visual weight than WHMIS
   ========================================================== */

.certs-final-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .65fr);

    gap: 22px;

    width: min(100%, 1040px);

    margin-top: 48px;
}


/* ==========================================================
   COMMON CARD
   ========================================================== */

.cert-final-card {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    border:
        1px solid
        rgba(57, 123, 221, .25);

    background:
        linear-gradient(
            145deg,
            rgba(8, 22, 42, .98),
            rgba(4, 13, 26, .99)
        );

    box-shadow:
        0 20px 48px
        rgba(0,0,0,.27),
        inset 0 1px 0
        rgba(255,255,255,.018);

    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms ease;
}


.cert-final-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(74, 147, 249, .43);

    box-shadow:
        0 25px 56px
        rgba(0,0,0,.31),
        0 0 25px
        rgba(45, 112, 226, .07);
}


/* animated top line */
.cert-final-card::before {
    content: '';

    position: absolute;

    left: -35%;
    top: 0;

    width: 35%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #56a2ff,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(74, 151, 255, .32);

    animation:
        certFinalLineMove
        7s ease-in-out
        infinite;
}


@keyframes certFinalLineMove {

    0% {
        left: -35%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: .9;
    }

    100% {
        left: 105%;
        opacity: 0;
    }

}


/* ==========================================================
   PRIMARY — AZURE
   ========================================================== */

.cert-final-primary {
    min-height: 220px;

    padding:
        30px 210px
        30px 30px;
}


/* ==========================================================
   SECONDARY — WHMIS
   ========================================================== */

.cert-final-secondary {
    min-height: 220px;

    padding:
        30px 30px;
}


/* ==========================================================
   TOP ROW
   ========================================================== */

.cert-final-top {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;
}


/* ==========================================================
   ICONS
   ========================================================== */

.cert-final-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 113, 198, .22),
            rgba(11, 63, 122, .14)
        );

    border:
        1px solid
        rgba(39, 165, 239, .31);

    box-shadow:
        0 0 24px
        rgba(0, 157, 255, .07);
}


.cert-final-icon svg {
    width: 30px;
    height: 30px;

    fill: none;

    stroke: #21a8ec;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.cert-final-whmis-icon svg {
    stroke: #72a8ee;
}


/* ==========================================================
   COMPLETED PILL
   ========================================================== */

.cert-final-status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    padding:
        6px 11px;

    border-radius: 999px;

    text-transform: uppercase;

    font-size: .67rem;

    font-weight: 850;

    letter-spacing: .075em;
}


.cert-final-status-complete {
    color: #69e5ae;

    background:
        rgba(19, 114, 88, .10);

    border:
        1px solid
        rgba(44, 201, 153, .23);
}


.cert-final-status-complete span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #46dfa3;

    box-shadow:
        0 0 9px
        rgba(70, 223, 163, .55);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.cert-final-content {
    position: relative;

    z-index: 2;
}


.cert-final-provider {
    display: block;

    margin-bottom: 8px;

    color: #7087a5;

    font-size: .68rem;

    font-weight: 850;

    letter-spacing: .13em;
}


.cert-final-content h3 {
    margin:
        0 0 11px;

    color: #e5eef9;

    font-size: 1.32rem;

    line-height: 1.23;

    font-weight: 820;
}


.cert-final-code {
    color: #76aef8;

    font-size: .78rem;

    font-weight: 850;

    letter-spacing: .18em;
}


.cert-final-description {
    margin:
        0 0 12px;

    color: #90a5bf;

    font-size: .88rem;

    line-height: 1.55;
}


.cert-final-date {
    margin:
        10px 0 0;

    color: #7188a5;

    font-size: .78rem;

    font-weight: 650;
}


/* ==========================================================
   WATERMARKS
   ========================================================== */

.cert-final-watermark {
    position: absolute;

    right: 27px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        rgba(73, 132, 219, .045);

    font-size: 3rem;

    font-weight: 900;

    letter-spacing: -.04em;

    pointer-events: none;
}


.cert-final-watermark-small {
    right: 18px;

    top: auto;
    bottom: 12px;

    transform: none;

    font-size: 2.15rem;

    color:
        rgba(73, 132, 219, .035);
}


/* ==========================================================
   MOBILE SAFETY
   Full mobile pass still comes later
   ========================================================== */

@media (max-width: 900px) {

    .certs-final-grid {
        grid-template-columns:
            1fr;
    }

    .cert-final-primary,
    .cert-final-secondary {
        min-height: auto;

        padding:
            26px;
    }

    .cert-final-watermark {
        display: none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cert-final-card::before {
        animation: none;
    }

}


/* ===== CERTIFICATIONS FINAL V2 END ===== */



/* ===== CERT FINAL SPACING POLISH START ===== */

@media (min-width: 901px) {

    .certs-final {
        padding-top: 68px !important;
        padding-bottom: 66px !important;
    }

    .certs-final-grid {
        margin-top: 40px !important;
        gap: 20px !important;
    }

    .cert-final-primary {
        min-height: 198px !important;

        padding:
            27px 190px
            27px 28px !important;
    }

    .cert-final-secondary {
        min-height: 198px !important;

        padding:
            27px 27px !important;
    }

    .cert-final-top {
        margin-bottom: 18px !important;
    }

    .cert-final-icon {
        width: 54px !important;
        height: 54px !important;

        flex-basis: 54px !important;
    }

    .cert-final-icon svg {
        width: 27px !important;
        height: 27px !important;
    }

    .cert-final-content h3 {
        font-size: 1.26rem !important;
    }

    .cert-final-watermark {
        font-size: 2.7rem !important;
    }

}

/* ===== CERT FINAL SPACING POLISH END ===== */



/* ===== CERT REVEAL AND MS MARK START ===== */


/* ==========================================================
   MICROSOFT / WINDOWS-STYLE FOUR PANE MARK
   Created with CSS — no image file.
   ========================================================== */

.cert-ms-mark {
    width: 29px;
    height: 29px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    grid-template-rows:
        repeat(2, 1fr);

    gap: 3px;

    transform:
        perspective(80px)
        rotateY(-5deg);
}


.cert-ms-mark span {
    display: block;

    border-radius: 1px;

    background:
        linear-gradient(
            145deg,
            #65b7ff 0%,
            #2f91f3 48%,
            #1671dc 100%
        );

    box-shadow:
        0 0 7px
        rgba(40, 143, 244, .18);
}


.cert-final-card:hover .cert-ms-mark span {
    box-shadow:
        0 0 11px
        rgba(61, 157, 255, .35);
}


/* ==========================================================
   CERTIFICATE SCROLL REVEAL
   Starts slightly below and invisible.
   JavaScript adds .cert-revealed.
   ========================================================== */

.cert-final-card.cert-awaiting-reveal {
    opacity: 0;

    translate:
        0 34px;

    filter:
        blur(2px);

    transition:
        opacity 720ms
        cubic-bezier(.2,.75,.2,1),

        translate 720ms
        cubic-bezier(.2,.75,.2,1),

        filter 620ms ease,

        border-color 260ms ease,

        box-shadow 260ms ease,

        transform 260ms ease;
}


.cert-final-card.cert-awaiting-reveal.cert-revealed {
    opacity: 1;

    translate:
        0 0;

    filter:
        blur(0);
}


/* Azure arrives first */
.cert-final-primary.cert-awaiting-reveal {
    transition-delay: 40ms;
}


/* WHMIS follows slightly after */
.cert-final-secondary.cert-awaiting-reveal {
    transition-delay: 150ms;
}


/* Keep normal hover once revealed */
.cert-final-card.cert-revealed:hover {
    transform:
        translateY(-3px);
}


/* ==========================================================
   SMALL EXTRA GLOW AS CARD ARRIVES
   ========================================================== */

.cert-final-card.cert-revealed {
    animation:
        certRevealGlow
        900ms ease-out
        1;
}


@keyframes certRevealGlow {

    0% {
        box-shadow:
            0 15px 35px
            rgba(0,0,0,.20),
            0 0 0
            rgba(54,132,244,0);
    }

    55% {
        box-shadow:
            0 22px 48px
            rgba(0,0,0,.27),
            0 0 25px
            rgba(54,132,244,.09);
    }

    100% {
        box-shadow:
            0 20px 48px
            rgba(0,0,0,.27),
            0 0 0
            rgba(54,132,244,0);
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cert-final-card.cert-awaiting-reveal {
        opacity: 1;

        translate:
            0 0;

        filter: none;

        transition: none;
    }

    .cert-final-card.cert-revealed {
        animation: none;
    }

}


/* ===== CERT REVEAL AND MS MARK END ===== */



/* ===== CERT TRUE REVEAL START ===== */


/* ==========================================================
   HIDDEN BY DEFAULT
   This prevents the browser from showing the cards
   before JavaScript starts the reveal.
   ========================================================== */

.cert-final-card {
    opacity: 0;

    transform:
        translateY(42px)
        scale(.985);

    filter:
        blur(3px);

    transition:
        opacity 700ms
        cubic-bezier(.16,.82,.28,1),

        transform 760ms
        cubic-bezier(.16,.82,.28,1),

        filter 600ms ease,

        border-color 260ms ease,

        box-shadow 260ms ease;
}


/* ==========================================================
   REVEALED
   ========================================================== */

.cert-final-card.cert-show {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);
}


/* Azure first */
.cert-final-primary.cert-show {
    transition-delay: 70ms;
}


/* WHMIS follows */
.cert-final-secondary.cert-show {
    transition-delay: 220ms;
}


/* ==========================================================
   HOVER AFTER REVEAL
   ========================================================== */

.cert-final-card.cert-show:hover {
    transform:
        translateY(-3px)
        scale(1);
}


/* ==========================================================
   SOFT ARRIVAL GLOW
   ========================================================== */

.cert-final-card.cert-show {
    animation:
        certArrivalGlow
        900ms ease-out
        1;
}


@keyframes certArrivalGlow {

    0% {
        box-shadow:
            0 18px 40px rgba(0,0,0,.22),
            0 0 0 rgba(62,139,248,0);
    }

    55% {
        box-shadow:
            0 22px 50px rgba(0,0,0,.27),
            0 0 28px rgba(62,139,248,.11);
    }

    100% {
        box-shadow:
            0 20px 48px rgba(0,0,0,.27),
            0 0 0 rgba(62,139,248,0);
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cert-final-card {
        opacity: 1;

        transform: none;

        filter: none;

        transition: none;
    }

    .cert-final-card.cert-show {
        animation: none;
    }

}


/* ===== CERT TRUE REVEAL END ===== */



/* ===== ABOUT PERFORMANCE POLISH START ===== */

/*
   Rendering optimization only.
   No visual redesign and no scroll hijacking.
*/

.about-section {
    contain: paint;
}

.about-section .info-card,
.about-section .about-card,
.about-section .about-highlight {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.about-section .info-card:hover,
.about-section .about-card:hover,
.about-section .about-highlight:hover {
    will-change: transform;
}

/* ===== ABOUT PERFORMANCE POLISH END ===== */



/* ===== CERT WATERMARK HOVER START ===== */

.cert-final-watermark {
    opacity: 0 !important;

    font-size: 2.35rem !important;

    transform:
        translateY(-42%)
        translateY(8px);

    transition:
        opacity 280ms ease,
        transform 320ms ease,
        color 280ms ease;
}


.cert-final-watermark-small {
    opacity: 0 !important;

    font-size: 1.85rem !important;

    transform:
        translateY(8px);

    transition:
        opacity 280ms ease,
        transform 320ms ease,
        color 280ms ease;
}


/* Show only when card is hovered */

.cert-final-card:hover .cert-final-watermark {
    opacity: 1 !important;

    transform:
        translateY(-50%)
        translateY(0);

    color:
        rgba(88, 145, 229, .075) !important;
}


.cert-final-card:hover .cert-final-watermark-small {
    opacity: 1 !important;

    transform:
        translateY(0);

    color:
        rgba(88, 145, 229, .065) !important;
}


/* Slightly stronger on Azure primary card */

.cert-final-primary:hover .cert-final-watermark {
    color:
        rgba(83, 148, 239, .085) !important;
}


/* ===== CERT WATERMARK HOVER END ===== */



/* ===== ABOUT V3 PREMIUM START ===== */


/* ==========================================================
   ABOUT SECTION
   ========================================================== */

.about-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 77% 48%,
            rgba(41, 106, 221, 0.045),
            transparent 30%
        ),
        #050a13;
}


/* ==========================================================
   LEFT TEXT AREA
   ========================================================== */

.about-text {
    position: relative;

    padding:
        4px 0
        4px 28px;

    max-width: 760px;
}


/* vertical profile accent */
.about-text::before {
    content: '';

    position: absolute;

    left: 0;
    top: 4px;
    bottom: 4px;

    width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #58a0ff,
            #2e78e5 46%,
            rgba(37, 91, 179, .14)
        );

    box-shadow:
        0 0 15px
        rgba(63, 137, 242, .12);
}


/* subtle reading glow */
.about-text::after {
    content: '';

    position: absolute;

    left: -55px;
    top: 18%;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(44, 111, 224, .055),
            transparent 70%
        );

    pointer-events: none;
}


.about-text p {
    position: relative;
    z-index: 2;

    color: #91a5bf;

    line-height: 1.92;

    margin-bottom: 30px;
}


.about-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   RIGHT-SIDE DASHBOARD
   Supports current About class variants
   ========================================================== */

.about-highlights,
.about-info,
.about-cards {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 14px !important;
}


/* ambient glow behind dashboard */
.about-highlights::before,
.about-info::before,
.about-cards::before {
    content: '';

    position: absolute;

    width: 280px;
    height: 360px;

    right: -80px;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(45, 112, 227, .07),
            transparent 68%
        );

    filter: blur(4px);

    pointer-events: none;
}


/* ==========================================================
   DASHBOARD CARDS
   ========================================================== */

.about-section .info-card,
.about-section .about-card,
.about-section .about-highlight {
    position: relative;

    min-height: 108px !important;

    padding:
        22px 27px !important;

    border-radius: 17px !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(43, 106, 213, .055),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(9, 22, 41, .97),
            rgba(5, 14, 27, .99)
        ) !important;

    border:
        1px solid
        rgba(57, 116, 207, .22) !important;

    box-shadow:
        0 13px 30px
        rgba(0,0,0,.18),
        inset 0 1px 0
        rgba(255,255,255,.015);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background 250ms ease,
        box-shadow 250ms ease;
}


/* small active indicator */
.about-section .info-card::after,
.about-section .about-card::after,
.about-section .about-highlight::after {
    content: '';

    position: absolute;

    right: 20px;
    top: 20px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #438bf5;

    box-shadow:
        0 0 0 4px
        rgba(67, 139, 245, .055),
        0 0 10px
        rgba(67, 139, 245, .25);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        background 250ms ease;
}


/* inner spotlight */
.about-section .info-card::before,
.about-section .about-card::before,
.about-section .about-highlight::before {
    content: '';

    position: absolute;

    width: 120px;
    height: 120px;

    right: -38px;
    bottom: -55px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(66, 137, 241, .08),
            transparent 69%
        );

    opacity: .45;

    transition:
        opacity 250ms ease,
        transform 250ms ease;
}


/* ==========================================================
   HOVER — CALM, NOT PROJECT-CARD STYLE
   ========================================================== */

.about-section .info-card:hover,
.about-section .about-card:hover,
.about-section .about-highlight:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(72, 143, 247, .37) !important;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(50, 121, 235, .095),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(11, 27, 49, .99),
            rgba(5, 15, 29, .99)
        ) !important;

    box-shadow:
        0 17px 36px
        rgba(0,0,0,.22),
        0 0 20px
        rgba(40, 106, 218, .05);
}


.about-section .info-card:hover::after,
.about-section .about-card:hover::after,
.about-section .about-highlight:hover::after {
    transform:
        scale(1.22);

    background: #66a7ff;

    box-shadow:
        0 0 0 5px
        rgba(76, 151, 255, .07),
        0 0 15px
        rgba(76, 151, 255, .43);
}


.about-section .info-card:hover::before,
.about-section .about-card:hover::before,
.about-section .about-highlight:hover::before {
    opacity: 1;

    transform:
        scale(1.14);
}


/* ==========================================================
   LABELS / VALUES
   ========================================================== */

.about-section .info-card .label,
.about-section .about-card .label,
.about-section .about-highlight .label,
.about-section .info-card h4,
.about-section .about-card h4,
.about-section .about-highlight h4 {
    color: #8196b3;

    font-size: .72rem;

    font-weight: 850;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.about-section .info-card .value,
.about-section .about-card .value,
.about-section .about-highlight .value,
.about-section .info-card strong,
.about-section .about-card strong,
.about-section .about-highlight strong {
    color: #74aaf2;

    font-weight: 760;

    transition:
        color 220ms ease,
        text-shadow 220ms ease;
}


.about-section .info-card:hover .value,
.about-section .about-card:hover .value,
.about-section .about-highlight:hover .value,
.about-section .info-card:hover strong,
.about-section .about-card:hover strong,
.about-section .about-highlight:hover strong {
    color: #92bdFA;

    text-shadow:
        0 0 12px
        rgba(75, 148, 250, .10);
}


/* secondary lines such as Graduated 2026 / AZ-900 */
.about-section .info-card p,
.about-section .about-card p,
.about-section .about-highlight p {
    color: #8da0b9;

    line-height: 1.5;
}


/* ==========================================================
   SUBTLE DIFFERENCE BETWEEN CARDS
   ========================================================== */

.about-section .info-card:nth-child(2)::after,
.about-section .about-card:nth-child(2)::after,
.about-section .about-highlight:nth-child(2)::after {
    animation-delay: .4s;
}


.about-section .info-card:nth-child(3)::after,
.about-section .about-card:nth-child(3)::after,
.about-section .about-highlight:nth-child(3)::after {
    animation-delay: .8s;
}


.about-section .info-card:nth-child(4)::after,
.about-section .about-card:nth-child(4)::after,
.about-section .about-highlight:nth-child(4)::after {
    animation-delay: 1.2s;
}


/* ==========================================================
   DESKTOP SPACING
   ========================================================== */

@media (min-width: 901px) {

    .about-section {
        padding-top: 72px !important;
        padding-bottom: 76px !important;
    }

}


/* ==========================================================
   MOBILE SAFETY
   Full phone styling comes later
   ========================================================== */

@media (max-width: 900px) {

    .about-text {
        padding-left: 20px;
    }

    .about-section .info-card,
    .about-section .about-card,
    .about-section .about-highlight {
        min-height: auto !important;

        padding:
            20px 22px !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .about-section .info-card,
    .about-section .about-card,
    .about-section .about-highlight {
        transition: none;
    }

    .about-section .info-card:hover,
    .about-section .about-card:hover,
    .about-section .about-highlight:hover {
        transform: none;
    }

}


/* ===== ABOUT V3 PREMIUM END ===== */



/* ===== ABOUT V3 COMPACT START ===== */

@media (min-width: 901px) {

    .about-section {
        padding-top: 66px !important;
        padding-bottom: 60px !important;
    }

    .about-highlights,
    .about-info,
    .about-cards {
        gap: 10px !important;
    }

    .about-section .info-card,
    .about-section .about-card,
    .about-section .about-highlight {
        min-height: 96px !important;

        padding:
            18px 26px !important;
    }

    .about-text p {
        margin-bottom: 24px !important;
    }

}

/* ===== ABOUT V3 COMPACT END ===== */



/* ===== ABOUT TO EXPERIENCE GAP START ===== */

@media (min-width: 901px) {

    .about-section {
        padding-bottom: 42px !important;
    }

    .experience-section {
        padding-top: 62px !important;
    }

}

/* ===== ABOUT TO EXPERIENCE GAP END ===== */



/* ===== EXPERIENCE CLEAN REVEAL START ===== */


/* ==========================================================
   EXPERIENCE CARD ENTRANCE

   Timeline stays untouched.
   Only the actual card moves.
   ========================================================== */

.experience-card.exp-reveal-ready {
    opacity: 0;

    translate: 0 28px;

    filter: blur(1.5px);

    transition:
        opacity 680ms cubic-bezier(.2,.75,.2,1),
        translate 720ms cubic-bezier(.2,.75,.2,1),
        filter 520ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}


.experience-card.exp-reveal-ready.exp-revealed {
    opacity: 1;

    translate: 0 0;

    filter: blur(0);
}


/* Slight stagger between jobs */

.experience-card:nth-of-type(1) {
    transition-delay: 40ms;
}

.experience-card:nth-of-type(2) {
    transition-delay: 110ms;
}

.experience-card:nth-of-type(3) {
    transition-delay: 180ms;
}


/* Preserve existing hover movement */

.experience-card.exp-revealed:hover {
    transition-delay: 0ms;
}


/* ==========================================================
   IMPORTANT:
   Do not animate timeline / left rail / nodes.
   This prevents the strange line movement you noticed.
   ========================================================== */

.experience-section .timeline,
.experience-section .timeline-line,
.experience-section .experience-line,
.experience-section .timeline-dot,
.experience-section .experience-dot {
    animation: none !important;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .experience-card.exp-reveal-ready {
        opacity: 1;
        translate: 0 0;
        filter: none;
        transition: none;
    }

}


/* ===== EXPERIENCE CLEAN REVEAL END ===== */


/* ===== BEYOND IT FINAL POLISH START ===== */

@media (min-width: 901px) {

    /* Slightly cleaner text column */
    .beyond-it-section .beyond-content,
    .beyond-it-section .soccer-content {
        max-width: 760px;
    }


    /* Achievement cards */
    .beyond-it-section .stats-grid,
    .beyond-it-section .soccer-stats,
    .beyond-it-section .achievement-grid {
        gap: 14px !important;
        margin-top: 30px !important;
    }


    .beyond-it-section .stat-card,
    .beyond-it-section .soccer-stat,
    .beyond-it-section .achievement-card {
        min-height: 118px !important;

        padding:
            20px 18px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        border-radius: 17px !important;
    }


    /* Main label */
    .beyond-it-section .stat-card strong,
    .beyond-it-section .soccer-stat strong,
    .beyond-it-section .achievement-card strong,
    .beyond-it-section .stat-number {
        font-size: 1.22rem !important;

        line-height: 1.22 !important;

        white-space: normal !important;

        max-width: 190px;

        color: #79adf4;
    }


    /* Secondary label */
    .beyond-it-section .stat-card span,
    .beyond-it-section .soccer-stat span,
    .beyond-it-section .achievement-card span,
    .beyond-it-section .stat-label {
        margin-top: 7px !important;

        font-size: .77rem !important;

        line-height: 1.35 !important;

        color: #93a6bf;
    }


    /* Button spacing */
    .beyond-it-section .soccer-button,
    .beyond-it-section .btn,
    .beyond-it-section a[href*="soccer"] {
        margin-top: 28px !important;
    }


    /* Keep image strong */
    .beyond-it-section img {
        transition:
            transform 650ms cubic-bezier(.2,.75,.2,1),
            filter 400ms ease;
    }

    .beyond-it-section img:hover {
        transform: scale(1.018);

        filter:
            brightness(1.03)
            contrast(1.02);
    }

}


/* ===== BEYOND IT FINAL POLISH END ===== */



/* ===== SOCCER QUALITY CARDS START ===== */

@media (min-width: 901px) {

    /* ======================================================
       SMALLER, CLEANER QUALITY CARDS
       ====================================================== */

    .beyond-it-section .stats-grid,
    .beyond-it-section .soccer-stats,
    .beyond-it-section .achievement-grid {
        gap: 13px !important;
        margin-top: 26px !important;
    }


    .beyond-it-section .stat-card,
    .beyond-it-section .soccer-stat,
    .beyond-it-section .achievement-card {
        position: relative;

        min-height: 96px !important;

        padding:
            17px 16px !important;

        border-radius: 15px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                rgba(10, 24, 43, .98),
                rgba(5, 14, 27, .99)
            ) !important;

        border:
            1px solid
            rgba(58, 119, 210, .22) !important;

        box-shadow:
            0 12px 28px
            rgba(0,0,0,.17),
            inset 0 1px 0
            rgba(255,255,255,.015);

        transition:
            transform 260ms ease,
            border-color 260ms ease,
            box-shadow 260ms ease,
            background 260ms ease;
    }


    /* ======================================================
       SMALL ELECTRIC TOP LIGHT
       ====================================================== */

    .beyond-it-section .stat-card::before,
    .beyond-it-section .soccer-stat::before,
    .beyond-it-section .achievement-card::before {
        content: '';

        position: absolute;

        top: 0;
        left: 26%;
        right: 26%;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(80, 157, 255, .55),
                transparent
            );

        opacity: .35;

        transition:
            opacity 260ms ease,
            left 260ms ease,
            right 260ms ease,
            box-shadow 260ms ease;
    }


    /* ======================================================
       SOFT INNER GLOW
       ====================================================== */

    .beyond-it-section .stat-card::after,
    .beyond-it-section .soccer-stat::after,
    .beyond-it-section .achievement-card::after {
        content: '';

        position: absolute;

        width: 100px;
        height: 100px;

        right: -48px;
        bottom: -58px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(54, 128, 236, .09),
                transparent 70%
            );

        opacity: .45;

        pointer-events: none;

        transition:
            opacity 260ms ease,
            transform 260ms ease;
    }


    /* ======================================================
       HOVER
       ====================================================== */

    .beyond-it-section .stat-card:hover,
    .beyond-it-section .soccer-stat:hover,
    .beyond-it-section .achievement-card:hover {
        transform:
            translateY(-4px);

        border-color:
            rgba(77, 150, 250, .38) !important;

        background:
            linear-gradient(
                145deg,
                rgba(12, 30, 53, .99),
                rgba(5, 16, 30, .99)
            ) !important;

        box-shadow:
            0 17px 34px
            rgba(0,0,0,.22),
            0 0 21px
            rgba(42, 109, 222, .06);
    }


    .beyond-it-section .stat-card:hover::before,
    .beyond-it-section .soccer-stat:hover::before,
    .beyond-it-section .achievement-card:hover::before {
        left: 12%;
        right: 12%;

        opacity: .9;

        box-shadow:
            0 0 12px
            rgba(71, 148, 255, .28);
    }


    .beyond-it-section .stat-card:hover::after,
    .beyond-it-section .soccer-stat:hover::after,
    .beyond-it-section .achievement-card:hover::after {
        opacity: .9;

        transform:
            scale(1.18);
    }


    /* ======================================================
       MAIN QUALITY NAME
       ====================================================== */

    .beyond-it-section .stat-card strong,
    .beyond-it-section .soccer-stat strong,
    .beyond-it-section .achievement-card strong,
    .beyond-it-section .stat-number {
        position: relative;
        z-index: 2;

        max-width: 200px;

        font-size: 1.08rem !important;
        line-height: 1.2 !important;

        color: #79aef5 !important;

        white-space: normal !important;
    }


    /* ======================================================
       DESCRIPTION
       ====================================================== */

    .beyond-it-section .stat-card span,
    .beyond-it-section .soccer-stat span,
    .beyond-it-section .achievement-card span,
    .beyond-it-section .stat-label {
        position: relative;
        z-index: 2;

        max-width: 210px;

        margin-top: 6px !important;

        font-size: .72rem !important;
        line-height: 1.35 !important;

        color: #94a6bd !important;

        white-space: normal !important;
    }


    /* ======================================================
       PARAGRAPH RHYTHM
       ====================================================== */

    .beyond-it-section p {
        max-width: 760px;

        line-height: 1.85;
    }

}


/* Mobile safety — real mobile design comes later */
@media (max-width: 900px) {

    .beyond-it-section .stat-card,
    .beyond-it-section .soccer-stat,
    .beyond-it-section .achievement-card {
        min-height: auto !important;
    }

}


/* ===== SOCCER QUALITY CARDS END ===== */



/* ===== BEYOND PREMIUM FINAL START ===== */


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 901px) {

    /* ------------------------------------------------------
       PULL SECTION UP
       Reduces unnecessary space under sticky navigation
       ------------------------------------------------------ */

    .beyond-it-section {
        padding-top: 44px !important;
        padding-bottom: 60px !important;
    }


    /* Section heading spacing */
    .beyond-it-section .section-title {
        margin-bottom: 34px !important;
    }


    /* ------------------------------------------------------
       SOCCER TEXT
       ------------------------------------------------------ */

    .beyond-it-section p {
        max-width: 760px !important;

        line-height: 1.82 !important;

        color: #95a8c1;
    }


    /* ------------------------------------------------------
       QUALITY CARDS CONTAINER
       ------------------------------------------------------ */

    .beyond-it-section .stats-grid,
    .beyond-it-section .soccer-stats,
    .beyond-it-section .achievement-grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 14px !important;

        margin-top: 25px !important;

        max-width: 760px !important;
    }


    /* ------------------------------------------------------
       SMALLER PREMIUM CARDS
       ------------------------------------------------------ */

    .beyond-it-section .stat-card,
    .beyond-it-section .soccer-stat,
    .beyond-it-section .achievement-card {
        position: relative;

        min-height: 104px !important;

        padding:
            18px 16px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        border-radius: 16px !important;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(58, 132, 239, .055),
                transparent 40%
            ),
            linear-gradient(
                145deg,
                rgba(9, 23, 43, .98),
                rgba(5, 14, 27, .99)
            ) !important;

        border:
            1px solid
            rgba(59, 121, 213, .23) !important;

        box-shadow:
            0 13px 30px
            rgba(0,0,0,.19),
            inset 0 1px 0
            rgba(255,255,255,.015);

        transition:
            transform 260ms ease,
            border-color 260ms ease,
            box-shadow 260ms ease,
            background 260ms ease;
    }


    /* ------------------------------------------------------
       SMALL BLUE ENERGY BAR
       ------------------------------------------------------ */

    .beyond-it-section .stat-card::before,
    .beyond-it-section .soccer-stat::before,
    .beyond-it-section .achievement-card::before {
        content: '';

        position: absolute;

        top: 0;

        left: 34%;
        right: 34%;

        height: 2px;

        border-radius: 999px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #4794ff,
                transparent
            );

        opacity: .45;

        box-shadow:
            0 0 10px
            rgba(65, 145, 255, .18);

        transition:
            left 280ms ease,
            right 280ms ease,
            opacity 280ms ease,
            box-shadow 280ms ease;
    }


    /* ------------------------------------------------------
       SUBTLE INNER GLOW
       ------------------------------------------------------ */

    .beyond-it-section .stat-card::after,
    .beyond-it-section .soccer-stat::after,
    .beyond-it-section .achievement-card::after {
        content: '';

        position: absolute;

        width: 105px;
        height: 105px;

        right: -48px;
        bottom: -62px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(52, 126, 239, .10),
                transparent 68%
            );

        opacity: .40;

        pointer-events: none;

        transition:
            opacity 260ms ease,
            transform 260ms ease;
    }


    /* ------------------------------------------------------
       CARD HOVER
       ------------------------------------------------------ */

    .beyond-it-section .stat-card:hover,
    .beyond-it-section .soccer-stat:hover,
    .beyond-it-section .achievement-card:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(78, 153, 255, .42) !important;

        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(70, 148, 255, .105),
                transparent 45%
            ),
            linear-gradient(
                145deg,
                rgba(12, 30, 54, .99),
                rgba(5, 16, 30, .99)
            ) !important;

        box-shadow:
            0 18px 37px
            rgba(0,0,0,.25),
            0 0 25px
            rgba(44, 113, 229, .07);
    }


    .beyond-it-section .stat-card:hover::before,
    .beyond-it-section .soccer-stat:hover::before,
    .beyond-it-section .achievement-card:hover::before {
        left: 15%;
        right: 15%;

        opacity: 1;

        box-shadow:
            0 0 16px
            rgba(71, 150, 255, .38);
    }


    .beyond-it-section .stat-card:hover::after,
    .beyond-it-section .soccer-stat:hover::after,
    .beyond-it-section .achievement-card:hover::after {
        opacity: 1;

        transform:
            scale(1.18);
    }


    /* ------------------------------------------------------
       CARD TITLE
       ------------------------------------------------------ */

    .beyond-it-section .stat-card strong,
    .beyond-it-section .soccer-stat strong,
    .beyond-it-section .achievement-card strong,
    .beyond-it-section .stat-number {
        position: relative;

        z-index: 2;

        margin: 0 !important;

        max-width: 190px;

        font-size: 1.06rem !important;

        line-height: 1.2 !important;

        color: #7eb2f8 !important;

        white-space: normal !important;

        transition:
            color 220ms ease,
            text-shadow 220ms ease;
    }


    .beyond-it-section .stat-card:hover strong,
    .beyond-it-section .soccer-stat:hover strong,
    .beyond-it-section .achievement-card:hover strong,
    .beyond-it-section .stat-card:hover .stat-number {
        color: #a0c8ff !important;

        text-shadow:
            0 0 13px
            rgba(76, 151, 255, .16);
    }


    /* ------------------------------------------------------
       CARD DESCRIPTION
       ------------------------------------------------------ */

    .beyond-it-section .stat-card span,
    .beyond-it-section .soccer-stat span,
    .beyond-it-section .achievement-card span,
    .beyond-it-section .stat-label {
        position: relative;

        z-index: 2;

        max-width: 190px;

        margin-top: 7px !important;

        color: #91a5be !important;

        font-size: .72rem !important;

        line-height: 1.35 !important;

        white-space: normal !important;
    }


    /* ------------------------------------------------------
       SOCCER BUTTON
       ------------------------------------------------------ */

    .beyond-it-section .soccer-button,
    .beyond-it-section a[href*="soccer"] {
        position: relative;

        margin-top: 27px !important;

        transition:
            transform 240ms ease,
            border-color 240ms ease,
            color 240ms ease,
            box-shadow 240ms ease;
    }


    .beyond-it-section .soccer-button:hover,
    .beyond-it-section a[href*="soccer"]:hover {
        transform:
            translateY(-2px);

        border-color:
            rgba(80, 157, 255, .55) !important;

        color: #91beff !important;

        box-shadow:
            0 0 22px
            rgba(49, 122, 235, .09);
    }


    /* ------------------------------------------------------
       HELPER TEXT BELOW BUTTON
       ------------------------------------------------------ */

    .beyond-it-section .soccer-button + p,
    .beyond-it-section a[href*="soccer"] + p {
        margin-top: 10px !important;

        color: #667c98 !important;

        font-size: .73rem !important;

        letter-spacing: .015em;
    }


    /* ------------------------------------------------------
       IMAGE
       ------------------------------------------------------ */

    .beyond-it-section img {
        transition:
            transform 650ms
            cubic-bezier(.2,.75,.2,1),

            filter 400ms ease;
    }


    .beyond-it-section img:hover {
        transform:
            scale(1.014);

        filter:
            brightness(1.025)
            contrast(1.02);
    }

}


/* ==========================================================
   PHONE SAFETY
   Real mobile pass still comes next.
   ========================================================== */

@media (max-width: 900px) {

    .beyond-it-section {
        padding-top: 52px !important;
    }

    .beyond-it-section .stat-card,
    .beyond-it-section .soccer-stat,
    .beyond-it-section .achievement-card {
        min-height: auto !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .beyond-it-section .stat-card,
    .beyond-it-section .soccer-stat,
    .beyond-it-section .achievement-card,
    .beyond-it-section img {
        transition: none !important;
    }

}


/* ===== BEYOND PREMIUM FINAL END ===== */



/* ===== CONTACT FINAL POLISH START ===== */


/* ==========================================================
   BEYOND IT -> CONTACT SPACING
   ========================================================== */

@media (min-width: 901px) {

    .beyond-it-section {
        padding-bottom: 42px !important;
    }

    .contact-final {
        padding-top: 48px !important;
        padding-bottom: 58px !important;
    }

}


/* ==========================================================
   CONTACT ANCHOR POSITION
   Makes nav click land closer to the top.
   ========================================================== */

#contact {
    scroll-margin-top: 76px;
}


/* ==========================================================
   CONTACT TITLE SPACING
   ========================================================== */

.contact-final .section-title {
    margin-bottom: 30px !important;
}


/* ==========================================================
   CONTACT HUB SLIGHTLY TIGHTER
   ========================================================== */

.contact-final-shell {
    margin-top: 34px !important;
}


/* ==========================================================
   LIVE / AVAILABLE STATUS
   ========================================================== */

.contact-status {
    border-color:
        rgba(61, 214, 158, .22) !important;

    background:
        rgba(27, 123, 91, .07) !important;

    color:
        #9dd9c3 !important;
}


.contact-status-dot {
    background:
        #4de0a6 !important;

    box-shadow:
        0 0 0 4px rgba(77, 224, 166, .07),
        0 0 11px rgba(77, 224, 166, .48) !important;

    animation:
        contactGreenPulse
        2.4s ease-in-out
        infinite !important;
}


@keyframes contactGreenPulse {

    0%,
    100% {
        transform: scale(.88);

        box-shadow:
            0 0 0 3px rgba(77, 224, 166, .05),
            0 0 8px rgba(77, 224, 166, .35);
    }

    50% {
        transform: scale(1.12);

        box-shadow:
            0 0 0 6px rgba(77, 224, 166, .08),
            0 0 16px rgba(77, 224, 166, .60);
    }

}


/* ==========================================================
   ALL THREE CONTACT ROWS INTERACTIVE
   Includes Location even though it isn't a link.
   ========================================================== */

.contact-detail-row {
    cursor: default;

    transition:
        transform 230ms ease,
        border-color 230ms ease,
        background 230ms ease,
        box-shadow 230ms ease !important;
}


.contact-detail-row:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(72, 145, 247, .37) !important;

    background:
        linear-gradient(
            135deg,
            rgba(13, 33, 59, .95),
            rgba(6, 18, 34, .96)
        ) !important;

    box-shadow:
        0 9px 23px
        rgba(0,0,0,.18),
        0 0 18px
        rgba(48, 116, 226, .045);
}


/* Links still get pointer cursor */

a.contact-detail-row {
    cursor: pointer;
}


/* ==========================================================
   ICON RESPONSE
   ========================================================== */

.contact-detail-icon {
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        background 240ms ease,
        box-shadow 240ms ease;
}


.contact-detail-row:hover .contact-detail-icon {
    transform:
        scale(1.06);

    border-color:
        rgba(79, 153, 255, .42);

    background:
        rgba(35, 94, 187, .20);

    box-shadow:
        0 0 17px
        rgba(51, 128, 239, .10);
}


.contact-detail-icon svg {
    transition:
        stroke 220ms ease,
        transform 220ms ease,
        filter 220ms ease;
}


.contact-detail-row:hover .contact-detail-icon svg {
    stroke:
        #83baff;

    transform:
        scale(1.05);

    filter:
        drop-shadow(
            0 0 5px
            rgba(72, 151, 255, .25)
        );
}


/* ==========================================================
   LOCATION ROW GETS A VERY SUBTLE ACTIVE LIGHT
   ========================================================== */

.contact-final-details > .contact-detail-row:first-child::after {
    content: '';

    position: absolute;

    right: 16px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #397fdc;

    opacity: .34;

    box-shadow:
        0 0 8px
        rgba(57, 127, 220, .26);

    transition:
        opacity 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}


.contact-final-details > .contact-detail-row:first-child:hover::after {
    opacity: 1;

    transform:
        scale(1.18);

    box-shadow:
        0 0 13px
        rgba(68, 145, 246, .52);
}


/* ==========================================================
   KEEP PHONE SAFE
   ========================================================== */

@media (max-width: 900px) {

    #contact {
        scroll-margin-top: 66px;
    }

    .contact-final {
        padding-top: 48px !important;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-status-dot {
        animation: none !important;
    }

    .contact-detail-row:hover,
    .contact-detail-row:hover .contact-detail-icon {
        transform: none;
    }

}


/* ===== CONTACT FINAL POLISH END ===== */



/* ===== MOBILE HOME V1 START ===== */


/* ==========================================================
   MOBILE HERO
   Desktop styles remain untouched.
   ========================================================== */

@media (max-width: 900px) {

    /* ------------------------------------------------------
       HERO STRUCTURE
       ------------------------------------------------------ */

    .mockup-hero {
        display: flex !important;
        flex-direction: column !important;

        gap: 32px !important;

        min-height: auto !important;

        padding:
            54px 24px
            48px !important;

        overflow: hidden;
    }


    .mockup-hero-copy {
        width: 100% !important;
        max-width: none !important;

        padding: 0 !important;

        position: relative;
        z-index: 4;
    }


    /* ------------------------------------------------------
       NAME
       ------------------------------------------------------ */

    .mockup-hero .hero-title {
        margin:
            0 0 22px !important;

        font-size:
            clamp(2.8rem, 12vw, 4rem) !important;

        line-height: .98 !important;

        letter-spacing: -.045em !important;

        max-width: 100% !important;

        filter:
            drop-shadow(
                0 0 12px
                rgba(45, 123, 245, .12)
            ) !important;
    }


    /* ------------------------------------------------------
       SUBTITLE
       ------------------------------------------------------ */

    .mockup-hero .hero-subtitle {
        margin:
            0 0 21px !important;

        max-width: 100% !important;

        font-size:
            clamp(1.22rem, 5.5vw, 1.55rem) !important;

        line-height: 1.42 !important;

        letter-spacing: -.015em;
    }


    /* ------------------------------------------------------
       DESCRIPTION
       ------------------------------------------------------ */

    .mockup-hero .hero-description {
        margin:
            0 0 26px !important;

        max-width: 100% !important;

        font-size: .98rem !important;

        line-height: 1.72 !important;

        color: #8fa4bf !important;
    }


    /* ------------------------------------------------------
       BUTTONS
       ------------------------------------------------------ */

    .mockup-hero .hero-cta {
        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

        gap: 11px !important;

        width: 100% !important;

        margin-top: 0 !important;
    }


    .mockup-hero .hero-cta a {
        min-height: 52px !important;

        padding:
            13px 14px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center;

        font-size: .91rem !important;

        border-radius: 13px !important;
    }


    /* Main CTA gets full row */
    .mockup-hero .hero-cta a:first-child {
        grid-column:
            1 / -1;
    }


    /* ------------------------------------------------------
       PROOF / QUICK CREDENTIALS
       ------------------------------------------------------ */

    .mockup-hero .hero-proof {
        display: flex !important;

        flex-wrap: wrap !important;

        gap:
            10px 18px !important;

        margin-top: 21px !important;
    }


    .mockup-hero .hero-proof > * {
        font-size: .74rem !important;

        line-height: 1.35 !important;
    }


    /* ======================================================
       MOBILE TECH VISUAL
       Keep the exciting part of desktop.
       ====================================================== */

    .mockup-tech-panel {
        position: relative !important;

        width: 100% !important;

        height: 365px !important;
        min-height: 365px !important;

        margin:
            4px auto 0 !important;

        border-radius: 24px !important;

        overflow: hidden !important;

        transform: none !important;

        background:
            radial-gradient(
                circle at 50% 51%,
                rgba(29, 100, 214, .09),
                transparent 32%
            ),
            #05101f !important;
    }


    /* Orbit/network slightly scaled down */
    .mockup-tech-panel .orbit-ring,
    .mockup-tech-panel .hero-orbit {
        transform:
            scale(.78);
    }


    /* ------------------------------------------------------
       PERSON
       Keep finger aligned near central network node.
       ------------------------------------------------------ */

    .hero-person-real {
        width: 132px !important;

        left: 50% !important;
        bottom: -3px !important;

        transform:
            translateX(-50%) !important;

        filter:
            drop-shadow(
                0 0 12px
                rgba(34, 122, 255, .18)
            ) !important;
    }


    .hero-person-real img {
        width: 100% !important;
        height: auto !important;
    }


    /* ------------------------------------------------------
       FLOATING TECH CARDS
       Make them compact instead of deleting them.
       ------------------------------------------------------ */

    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .hero-tech-card {
        transform:
            scale(.72);

        transform-origin:
            center;
    }


    /* ======================================================
       NAVBAR
       ====================================================== */

    header,
    .navbar,
    nav {
        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    /* Prevent anchor from hiding under mobile nav */
    #home {
        scroll-margin-top: 68px;
    }

}


/* ==========================================================
   SMALLER PHONES
   ========================================================== */

@media (max-width: 480px) {

    .mockup-hero {
        padding:
            46px 20px
            42px !important;

        gap: 27px !important;
    }


    .mockup-hero .hero-title {
        font-size:
            clamp(2.65rem, 13vw, 3.45rem) !important;
    }


    .mockup-hero .hero-subtitle {
        font-size:
            1.18rem !important;
    }


    .mockup-tech-panel {
        height: 335px !important;
        min-height: 335px !important;

        border-radius: 21px !important;
    }


    .hero-person-real {
        width: 122px !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mockup-tech-panel *,
    .hero-person-real {
        animation: none !important;
        transition: none !important;
    }

}


/* ===== MOBILE HOME V1 END ===== */



/* ===== MOBILE HOME V1 POLISH START ===== */

@media (max-width: 900px) {

    /* Reduce odd visual band below navbar */
    .mockup-hero {
        padding-top: 38px !important;
        gap: 24px !important;
    }

    /* Keep hero content closer together */
    .mockup-hero .hero-proof {
        margin-bottom: 4px !important;
    }

    /* Pull tech panel slightly upward */
    .mockup-tech-panel {
        margin-top: -2px !important;
    }

}


@media (max-width: 480px) {

    .mockup-hero {
        padding-top: 34px !important;
        gap: 22px !important;
    }

}

/* ===== MOBILE HOME V1 POLISH END ===== */



/* ===== MOBILE HOME FINAL COMPACT START ===== */

@media (max-width: 900px) {

    .mockup-hero {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
        gap: 20px !important;
    }

    .mockup-hero .hero-title {
        margin-bottom: 18px !important;
    }

    .mockup-hero .hero-subtitle {
        margin-bottom: 18px !important;
    }

    .mockup-hero .hero-description {
        margin-bottom: 22px !important;
        line-height: 1.65 !important;
    }

    .mockup-hero .hero-cta {
        gap: 10px !important;
    }

    .mockup-hero .hero-cta a {
        min-height: 48px !important;
        padding: 11px 13px !important;
    }

    .mockup-hero .hero-proof {
        margin-top: 18px !important;
        margin-bottom: 0 !important;
    }

    .mockup-tech-panel {
        margin-top: -6px !important;
    }

}

@media (max-width: 480px) {

    .mockup-hero {
        padding-top: 30px !important;
        padding-bottom: 34px !important;
    }

}

/* ===== MOBILE HOME FINAL COMPACT END ===== */



/* ===== MOBILE HERO FIX V2 START ===== */

@media (max-width: 900px) {

    /* ======================================================
       REMOVE OLD DESKTOP DECORATIVE BAND / OVERLAY
       This is what is clipping the hero title on mobile.
       ====================================================== */

    #home::before,
    .mockup-hero::before {
        display: none !important;
        content: none !important;
    }


    /* ======================================================
       HERO START POSITION
       ====================================================== */

    #home {
        scroll-margin-top: 70px !important;
    }

    .mockup-hero {
        position: relative !important;

        margin-top: 0 !important;

        padding-top: 56px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-bottom: 38px !important;

        gap: 22px !important;

        overflow: visible !important;
    }


    /* Make sure title can never sit underneath another layer */

    .mockup-hero-copy {
        position: relative !important;
        z-index: 5 !important;

        overflow: visible !important;
    }


    .mockup-hero .hero-title {
        position: relative !important;

        margin-top: 0 !important;
        margin-bottom: 20px !important;

        padding-top: 0 !important;

        line-height: 1.00 !important;

        transform: none !important;

        overflow: visible !important;
    }


    /* ======================================================
       TECH PANEL — MORE PHONE FRIENDLY
       ====================================================== */

    .mockup-tech-panel {
        position: relative !important;

        width: 100% !important;

        height: 350px !important;
        min-height: 350px !important;

        margin-top: 2px !important;

        border-radius: 22px !important;

        overflow: hidden !important;
    }


    /* ======================================================
       PERSON
       Slightly smaller so the whole composition breathes.
       ====================================================== */

    .hero-person-real {
        width: 112px !important;

        left: 50% !important;

        bottom: 7px !important;

        transform:
            translateX(-50%) !important;

        z-index: 4 !important;
    }


    .hero-person-real img {
        width: 100% !important;
        height: auto !important;
    }


    /* ======================================================
       FLOATING CARDS
       Slightly smaller so none feel cramped.
       ====================================================== */

    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .hero-tech-card {
        transform:
            scale(.64) !important;

        transform-origin:
            center !important;
    }


    /* ------------------------------------------------------
       The bottom card was being clipped.
       Pull the final floating card upward.
       ------------------------------------------------------ */

    .mockup-tech-panel .tech-card:last-of-type,
    .mockup-tech-panel .floating-card:last-of-type,
    .mockup-tech-panel .hero-tech-card:last-of-type {
        bottom: 10px !important;
    }


    /* ======================================================
       NETWORK / ORBITS
       Keep center composition compact.
       ====================================================== */

    .mockup-tech-panel .orbit-ring,
    .mockup-tech-panel .hero-orbit {
        transform:
            scale(.73) !important;
    }

}


/* ==========================================================
   400px / NORMAL PHONE WIDTH
   ========================================================== */

@media (max-width: 480px) {

    .mockup-hero {
        padding-top: 50px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    .mockup-hero .hero-title {
        font-size:
            clamp(2.6rem, 12.5vw, 3.3rem) !important;
    }


    .mockup-tech-panel {
        height: 340px !important;
        min-height: 340px !important;
    }


    .hero-person-real {
        width: 108px !important;

        bottom: 8px !important;
    }

}


/* ===== MOBILE HERO FIX V2 END ===== */















/* ===== MOBILE EXTRA STRIP FIX START ===== */

@media (max-width: 900px) {

    /* Remove leftover decorative/mobile band below navbar */
    .hero-container::before,
    .hero-container::after,
    .mockup-hero::before,
    .mockup-hero::after,
    #home::before,
    #home::after {
        display: none !important;
        content: none !important;
    }

    /* Prevent any inherited hero background strip */
    .hero-container,
    .mockup-hero,
    #home {
        background-color: transparent;
        border-top: none !important;
    }

}

/* ===== MOBILE EXTRA STRIP FIX END ===== */



/* ===== MOBILE HERO STRIP HARD FIX START ===== */

@media (max-width: 900px) {

    /* Remove the full-width blue band under the mobile navbar */
    .hero-container,
    .mockup-hero,
    .hero-section,
    #home {
        background-image: none !important;
        border-top: 0 !important;
        box-shadow: none !important;
    }

    /* Kill any dedicated top decorative layer */
    .hero-container > .hero-bg,
    .mockup-hero > .hero-bg,
    .hero-background,
    .hero-top-glow,
    .hero-band,
    .hero-strip {
        display: none !important;
    }

    /* Make the hero begin directly on the normal dark background */
    #home,
    .hero-section,
    .hero-container,
    .mockup-hero {
        background:
            #030711 !important;
    }

    /* Slight clean spacing below the navbar */
    .mockup-hero {
        padding-top: 30px !important;
    }

}

/* ===== MOBILE HERO STRIP HARD FIX END ===== */



/* ===== MOBILE NAV MENU GAP FIX START ===== */

@media (max-width: 900px) {

    /* Closed menu must take absolutely no space */
    .nav-menu {
        max-height: 0 !important;
        height: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;

        opacity: 0;

        pointer-events: none;

        border: 0 !important;

        transition:
            max-height 280ms ease,
            opacity 220ms ease,
            padding 280ms ease;
    }


    /* When your existing JS adds an active/open/show class */
    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height: auto !important;
        max-height: 520px !important;

        padding-top: 18px !important;
        padding-bottom: 18px !important;

        opacity: 1;

        pointer-events: auto;
    }

}

/* ===== MOBILE NAV MENU GAP FIX END ===== */











































/* ===== DEDICATED MOBILE HERO V2 START ===== */


/* ==========================================================
   DESKTOP
   New mobile visual stays completely hidden.
   ========================================================== */

.mobile-tech-v2 {
    display: none;
}


/* ==========================================================
   PHONE / TABLET
   ========================================================== */

@media (max-width: 900px) {

    /* Hide original desktop tech artwork ONLY on mobile */
    .mockup-tech-panel {
        display: none !important;
    }


    /* ======================================================
       MOBILE PANEL
       ====================================================== */

    .mobile-tech-v2 {
        position: relative;

        display: block;

        width: 100%;
        height: 365px;

        margin-top: 4px;

        overflow: hidden;

        border-radius: 24px;

        border:
            1px solid
            rgba(53, 132, 242, .52);

        background:
            radial-gradient(
                circle at 50% 57%,
                rgba(39, 116, 232, .16),
                transparent 27%
            ),
            radial-gradient(
                circle at 50% 90%,
                rgba(28, 81, 166, .08),
                transparent 42%
            ),
            linear-gradient(
                180deg,
                #061221 0%,
                #030a14 100%
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.02),
            0 20px 40px rgba(0,0,0,.22);

        isolation: isolate;

        animation:
            mobilePanelEntrance
            .72s
            cubic-bezier(.2,.75,.25,1)
            both;
    }


    @keyframes mobilePanelEntrance {

        from {
            opacity: 0;
            transform:
                translateY(15px)
                scale(.985);
        }

        to {
            opacity: 1;
            transform:
                translateY(0)
                scale(1);
        }

    }


    /* ======================================================
       HEADER
       ====================================================== */

    .mobile-tech-v2-label {
        position: absolute;

        top: 18px;
        left: 18px;

        z-index: 20;

        display: flex;
        align-items: center;

        gap: 8px;

        padding:
            9px 14px;

        border-radius:
            999px;

        border:
            1px solid
            rgba(55, 134, 242, .34);

        background:
            rgba(4, 14, 29, .88);

        color:
            #a9bdd9;

        font-size:
            .76rem;

        font-weight:
            750;

        letter-spacing:
            .01em;

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);
    }


    .mobile-tech-v2-dot {
        width: 8px;
        height: 8px;

        border-radius:
            50%;

        background:
            #3d96ff;

        box-shadow:
            0 0 10px
            rgba(61,150,255,.85);
    }


    /* ======================================================
       ORBITS
       ====================================================== */

    .mobile-tech-v2-orbit {
        position: absolute;

        left: 50%;
        top: 56%;

        transform:
            translate(-50%, -50%);

        border-radius:
            50%;

        border:
            1px solid
            rgba(47, 112, 206, .16);

        pointer-events:
            none;
    }


    .orbit-one {
        width: 315px;
        height: 315px;
    }


    .orbit-two {
        width: 225px;
        height: 225px;

        border-color:
            rgba(47, 112, 206, .13);
    }


    /* ======================================================
       NETWORK
       ====================================================== */

    .mobile-tech-v2-network {
        position: absolute;

        width: 225px;
        height: 190px;

        left: 50%;
        top: 46%;

        transform:
            translate(-50%, -50%);

        z-index: 5;

        overflow:
            visible;
    }


    .mobile-network-lines line {
        stroke:
            rgba(53, 137, 249, .78);

        stroke-width:
            1.6;

        stroke-dasharray:
            7 6;

        filter:
            drop-shadow(
                0 0 3px
                rgba(46, 133, 255, .28)
            );
    }


    .mobile-network-nodes circle {
        fill:
            #459cff;

        filter:
            drop-shadow(
                0 0 7px
                rgba(69,156,255,.76)
            );

        animation:
            mobileNodeBreath
            2.8s ease-in-out
            infinite;
    }


    @keyframes mobileNodeBreath {

        0%,
        100% {
            opacity: .75;
        }

        50% {
            opacity: 1;
        }

    }


    .mobile-network-center-ring {
        fill:
            none;

        stroke:
            #449bff;

        transform-origin:
            130px 112px;

        opacity:
            .40;

        animation:
            mobileCenterRing
            2.7s ease-out
            infinite;
    }


    .ring-b {
        animation-delay:
            1.1s;
    }


    @keyframes mobileCenterRing {

        0% {
            transform:
                scale(.65);

            opacity:
                .70;
        }

        100% {
            transform:
                scale(1.5);

            opacity:
                0;
        }

    }


    .mobile-network-center {
        fill:
            #80bdff;

        filter:
            drop-shadow(
                0 0 11px
                #4199ff
            );
    }


    /* ======================================================
       PERSON
       ====================================================== */

    .mobile-tech-v2-person {
        position: absolute;

        width: 157px;

        left: 49.5%;
        bottom: 3px;

        transform:
            translateX(-50%);

        z-index: 12;

        pointer-events:
            none;

        filter:
            drop-shadow(
                0 0 11px
                rgba(40, 126, 255, .33)
            )
            drop-shadow(
                0 10px 12px
                rgba(0,0,0,.22)
            );

        animation:
            mobilePersonFloatV2
            5.6s ease-in-out
            infinite;
    }


    @keyframes mobilePersonFloatV2 {

        0%,
        100% {
            transform:
                translateX(-50%)
                translateY(0);
        }

        50% {
            transform:
                translateX(-50%)
                translateY(-2px);
        }

    }


    .mobile-tech-v2-person-glow {
        position: absolute;

        width: 155px;
        height: 155px;

        left: 50%;
        top: 59%;

        transform:
            translate(-50%, -50%);

        border-radius:
            50%;

        background:
            radial-gradient(
                circle,
                rgba(46, 136, 255, .13),
                rgba(31, 92, 197, .04) 43%,
                transparent 72%
            );

        z-index:
            2;

        animation:
            mobilePersonGlow
            4.5s ease-in-out
            infinite;
    }


    @keyframes mobilePersonGlow {

        0%,
        100% {
            opacity: .55;
        }

        50% {
            opacity: 1;
        }

    }


    /* ======================================================
       TECHNOLOGY CARDS
       ====================================================== */

    .mobile-tech-v2-chip {
        position: absolute;

        z-index:
            25;

        display: flex;
        align-items: center;

        gap:
            8px;

        min-height:
            38px;

        padding:
            7px 11px;

        border-radius:
            12px;

        border:
            1px solid
            rgba(57, 136, 242, .35);

        background:
            rgba(3, 13, 27, .91);

        color:
            #dae7f9;

        font-size:
            .70rem;

        line-height:
            1;

        font-weight:
            750;

        white-space:
            nowrap;

        box-shadow:
            0 10px 22px
            rgba(0,0,0,.18);

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

        animation:
            mobileCardFloatV2
            5s ease-in-out
            infinite;
    }


    @keyframes mobileCardFloatV2 {

        0%,
        100% {
            transform:
                translateY(0);
        }

        50% {
            transform:
                translateY(-3px);
        }

    }


    /* WINDOWS */

    .mobile-tech-v2-windows {
        top:
            92px;

        left:
            14px;
    }


    /* NETWORK */

    .mobile-tech-v2-networking {
        top:
            92px;

        right:
            14px;

        animation-delay:
            -1.7s;
    }


    /* AZURE */

    .mobile-tech-v2-azure {
        right:
            14px;

        bottom:
            14px;

        animation-delay:
            -3.2s;
    }


    /* ======================================================
       WINDOWS ICON
       ====================================================== */

    .mobile-windows-icon {
        display:
            grid;

        grid-template-columns:
            repeat(2, 9px);

        grid-template-rows:
            repeat(2, 9px);

        gap:
            2px;
    }


    .mobile-windows-icon i {
        display:
            block;

        background:
            linear-gradient(
                145deg,
                #43a2ff,
                #1d6fe8
            );

        box-shadow:
            0 0 5px
            rgba(47, 141, 255, .35);
    }


    /* ======================================================
       NETWORK ICON
       ====================================================== */

    .mobile-network-icon {
        position:
            relative;

        width:
            23px;

        height:
            20px;
    }


    .mobile-network-icon i {
        position:
            absolute;

        width:
            6px;

        height:
            6px;

        border-radius:
            50%;

        background:
            #469dff;

        box-shadow:
            0 0 6px
            rgba(70,157,255,.6);
    }


    .mobile-network-icon i:nth-child(1) {
        left: 8px;
        top: 0;
    }


    .mobile-network-icon i:nth-child(2) {
        left: 0;
        bottom: 0;
    }


    .mobile-network-icon i:nth-child(3) {
        right: 0;
        bottom: 0;
    }


    .mobile-network-icon::before,
    .mobile-network-icon::after {
        content:
            '';

        position:
            absolute;

        width:
            12px;

        height:
            1px;

        top:
            9px;

        background:
            #3988ea;
    }


    .mobile-network-icon::before {
        left:
            1px;

        transform:
            rotate(-46deg);
    }


    .mobile-network-icon::after {
        right:
            1px;

        transform:
            rotate(46deg);
    }


    /* ======================================================
       CLOUD ICON
       ====================================================== */

    .mobile-cloud-icon {
        position:
            relative;

        width:
            24px;

        height:
            12px;

        border-radius:
            8px;

        background:
            #429aff;

        box-shadow:
            0 0 7px
            rgba(66,154,255,.35);
    }


    .mobile-cloud-icon::before {
        content:
            '';

        position:
            absolute;

        width:
            11px;

        height:
            11px;

        border-radius:
            50%;

        left:
            4px;

        top:
            -6px;

        background:
            #429aff;
    }


    /* ======================================================
       PARTICLES
       ====================================================== */

    .mobile-particle {
        position:
            absolute;

        width:
            3px;

        height:
            3px;

        border-radius:
            50%;

        background:
            #448fe9;

        opacity:
            .62;

        box-shadow:
            0 0 5px
            rgba(68,143,233,.45);

        animation:
            mobileParticleBlink
            4s ease-in-out
            infinite;
    }


    .p1 {
        left: 16%;
        top: 34%;
    }

    .p2 {
        left: 81%;
        top: 34%;
        animation-delay: -1s;
    }

    .p3 {
        left: 23%;
        top: 72%;
        animation-delay: -2s;
    }

    .p4 {
        left: 81%;
        top: 69%;
        animation-delay: -.6s;
    }

    .p5 {
        left: 52%;
        top: 24%;
        animation-delay: -2.8s;
    }


    @keyframes mobileParticleBlink {

        0%,
        100% {
            opacity: .20;
        }

        50% {
            opacity: .78;
        }

    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 380px) {

    .mobile-tech-v2 {
        height:
            338px;
    }


    .mobile-tech-v2-person {
        width:
            143px;
    }


    .mobile-tech-v2-network {
        width:
            205px;

        height:
            175px;
    }


    .mobile-tech-v2-chip {
        font-size:
            .63rem;

        padding:
            6px 8px;
    }


    .mobile-tech-v2-windows {
        left:
            9px;
    }


    .mobile-tech-v2-networking {
        right:
            9px;
    }


    .mobile-tech-v2-azure {
        right:
            9px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mobile-tech-v2,
    .mobile-tech-v2 *,
    .mobile-tech-v2::before,
    .mobile-tech-v2::after {
        animation:
            none !important;
    }

}


/* ===== DEDICATED MOBILE HERO V2 END ===== */



/* ===== MOBILE V2 FINAL TUNE START ===== */

@media (max-width: 900px) {

    /* Give center network slightly more breathing room */
    .mobile-tech-v2-windows,
    .mobile-tech-v2-networking {
        top: 84px !important;
    }

    /* Azure: slightly less dominant + closer to edge */
    .mobile-tech-v2-azure {
        right: 10px !important;
        bottom: 10px !important;

        transform:
            scale(.93) !important;

        transform-origin:
            bottom right !important;
    }

    /* Person stays dominant */
    .mobile-tech-v2-person {
        width: 157px !important;
    }

}

@media (max-width: 380px) {

    .mobile-tech-v2-windows,
    .mobile-tech-v2-networking {
        top: 80px !important;
    }

    .mobile-tech-v2-azure {
        right: 8px !important;
        bottom: 8px !important;
        transform: scale(.88) !important;
    }

}

/* ===== MOBILE V2 FINAL TUNE END ===== */



/* ===== MOBILE HERO PANEL REDESIGN START ===== */

@media (max-width: 900px) {

    /* ======================================================
       MAIN PANEL
       ====================================================== */

    .mockup-tech-panel {
        position: relative !important;

        height: 300px !important;
        min-height: 300px !important;

        overflow: hidden !important;

        border-radius: 22px !important;

        border:
            1px solid
            rgba(52, 128, 235, .46) !important;

        background:
            radial-gradient(
                circle at 50% 56%,
                rgba(44, 119, 233, .11),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                #06111f 0%,
                #040b16 100%
            ) !important;

        box-shadow:
            0 16px 35px rgba(0,0,0,.20),
            inset 0 1px 0 rgba(255,255,255,.015) !important;
    }


    /* ======================================================
       TOP HEADER PILL
       ====================================================== */

    .mockup-tech-panel .tech-label,
    .mockup-tech-panel .panel-label,
    .mockup-tech-panel [class*="infrastructure"] {
        position: absolute !important;

        top: 16px !important;
        left: 16px !important;

        z-index: 8 !important;

        transform: none !important;

        padding:
            7px 12px !important;

        border-radius: 999px !important;

        font-size: .67rem !important;

        border:
            1px solid
            rgba(63, 140, 244, .34) !important;

        background:
            rgba(6, 18, 34, .88) !important;

        box-shadow:
            0 0 14px
            rgba(49, 126, 232, .07);
    }


    /* ======================================================
       NETWORK
       ====================================================== */

    .mockup-tech-panel svg {
        position: relative;

        z-index: 2;

        transform:
            translateY(14px)
            scale(.86) !important;

        transform-origin:
            center !important;

        opacity: .92;
    }


    /* ======================================================
       PERSON
       ====================================================== */

    .hero-person-real {
        width: 112px !important;

        left: 50% !important;
        bottom: 18px !important;

        transform:
            translateX(-50%) !important;

        z-index: 6 !important;

        filter:
            drop-shadow(
                0 0 9px
                rgba(42, 126, 255, .24)
            ) !important;
    }


    .hero-person-real img {
        width: 100% !important;
        height: auto !important;
    }


    /* ======================================================
       SYSTEM CARDS
       ====================================================== */

    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .hero-tech-card {
        z-index: 7 !important;

        transform:
            scale(.57) !important;

        transform-origin:
            center !important;

        filter:
            brightness(1.05)
            contrast(1.03);

        animation:
            mobileNodeFloat
            4.8s ease-in-out
            infinite;
    }


    @keyframes mobileNodeFloat {

        0%,
        100% {
            translate: 0 0;
        }

        50% {
            translate: 0 -2px;
        }

    }


    /* ======================================================
       AZURE
       Make it feel like a real third node, not tiny footer chip
       ====================================================== */

    .mockup-tech-panel [class*="azure"],
    .mockup-tech-panel [class*="Azure"],
    .mockup-tech-panel [class*="cloud-card"],
    .mockup-tech-panel [class*="cloudCard"] {
        position: absolute !important;

        top: 74px !important;
        right: 10px !important;

        left: auto !important;
        bottom: auto !important;

        transform:
            scale(.57) !important;

        transform-origin:
            top right !important;

        z-index: 8 !important;
    }


    /* ======================================================
       WINDOWS
       ====================================================== */

    .mockup-tech-panel [class*="windows"],
    .mockup-tech-panel [class*="Windows"] {
        left: 10px !important;

        right: auto !important;
    }


    /* ======================================================
       NETWORKING
       ====================================================== */

    .mockup-tech-panel [class*="network-card"],
    .mockup-tech-panel [class*="networking-card"] {
        right: 10px !important;
    }


    /* ======================================================
       LOWER STATUS STRIP
       ====================================================== */

    .mockup-tech-panel::before {
        content:
            'IT Support  •  Infrastructure  •  Cloud' !important;

        display: flex !important;

        align-items: center;
        justify-content: center;

        position: absolute;

        left: 18px;
        right: 18px;
        bottom: 8px;

        height: 24px;

        border-radius: 9px;

        color:
            rgba(143, 176, 219, .66);

        font-size: .58rem;
        font-weight: 650;

        letter-spacing: .045em;

        background:
            linear-gradient(
                90deg,
                rgba(8, 20, 36, .70),
                rgba(13, 32, 57, .62),
                rgba(8, 20, 36, .70)
            );

        border:
            1px solid
            rgba(50, 112, 196, .14);

        z-index: 9;

        pointer-events: none;
    }


    /* ======================================================
       SUBTLE PARTICLES
       ====================================================== */

    .mockup-tech-panel::after {
        opacity: .24 !important;
    }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 380px) {

    .mockup-tech-panel {
        height: 282px !important;
        min-height: 282px !important;
    }

    .hero-person-real {
        width: 103px !important;
        bottom: 18px !important;
    }

    .mockup-tech-panel svg {
        transform:
            translateY(15px)
            scale(.80) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .hero-tech-card {
        animation: none !important;
    }

}


/* ===== MOBILE HERO PANEL REDESIGN END ===== */



/* ===== MOBILE V2 MOTION POLISH START ===== */

@media (max-width: 900px) {

    /* ======================================================
       INFRASTRUCTURE & CLOUD
       Soft breathing glow
       ====================================================== */

    .mobile-tech-v2-label {
        border-color:
            rgba(67, 145, 255, .38) !important;

        box-shadow:
            0 0 0 rgba(55, 137, 255, 0);

        animation:
            mobileInfraBreath
            3.2s ease-in-out
            infinite !important;
    }

    @keyframes mobileInfraBreath {

        0%,
        100% {
            border-color:
                rgba(67, 145, 255, .30);

            box-shadow:
                0 0 0
                rgba(55, 137, 255, 0);

            transform:
                translateY(0);
        }

        50% {
            border-color:
                rgba(91, 162, 255, .58);

            box-shadow:
                0 0 18px
                rgba(55, 137, 255, .17);

            transform:
                translateY(-1px);
        }

    }


    /* Blue status dot */
    .mobile-tech-v2-dot {
        animation:
            mobileInfraDot
            2.1s ease-in-out
            infinite !important;
    }

    @keyframes mobileInfraDot {

        0%,
        100% {
            transform: scale(1);

            box-shadow:
                0 0 7px
                rgba(61,150,255,.65);
        }

        50% {
            transform: scale(1.22);

            box-shadow:
                0 0 9px
                rgba(61,150,255,1),
                0 0 18px
                rgba(61,150,255,.48);
        }

    }


    /* ======================================================
       WINDOWS SERVER
       Push slightly farther left
       ====================================================== */

    .mobile-tech-v2-windows {
        left: 9px !important;

        animation:
            mobileWindowsFloat
            4.7s ease-in-out
            infinite !important;
    }

    @keyframes mobileWindowsFloat {

        0%,
        100% {
            transform:
                translate(0, 0);
        }

        50% {
            transform:
                translate(-2px, -4px);
        }

    }


    /* ======================================================
       NETWORKING
       Push slightly farther right
       ====================================================== */

    .mobile-tech-v2-networking {
        right: 9px !important;

        animation:
            mobileNetworkingFloat
            5.1s ease-in-out
            infinite !important;
    }

    @keyframes mobileNetworkingFloat {

        0%,
        100% {
            transform:
                translate(0, 0);
        }

        50% {
            transform:
                translate(2px, -4px);
        }

    }


    /* Cleaner networking icon */
    .mobile-network-icon i {
        background:
            #58a6ff !important;

        box-shadow:
            0 0 7px
            rgba(65, 153, 255, .72) !important;
    }

    .mobile-network-icon::before,
    .mobile-network-icon::after {
        height:
            1.5px !important;

        background:
            linear-gradient(
                90deg,
                #3488ed,
                #64aeff
            ) !important;

        box-shadow:
            0 0 5px
            rgba(60, 146, 255, .28);
    }


    /* ======================================================
       MICROSOFT AZURE
       It was visually static before.
       Give it its own movement.
       ====================================================== */

    .mobile-tech-v2-azure {
        right:
            8px !important;

        bottom:
            10px !important;

        animation:
            mobileAzureFloat
            5.4s ease-in-out
            infinite !important;

        box-shadow:
            0 10px 22px
            rgba(0,0,0,.19),
            0 0 12px
            rgba(57, 139, 255, .06) !important;
    }

    @keyframes mobileAzureFloat {

        0%,
        100% {
            transform:
                translate(0, 0);
        }

        50% {
            transform:
                translate(2px, -5px);
        }

    }


    /* Azure cloud gets a subtle pulse */
    .mobile-cloud-icon {
        animation:
            mobileCloudPulse
            3.3s ease-in-out
            infinite;
    }

    @keyframes mobileCloudPulse {

        0%,
        100% {
            filter:
                brightness(1);

            box-shadow:
                0 0 7px
                rgba(66,154,255,.30);
        }

        50% {
            filter:
                brightness(1.10);

            box-shadow:
                0 0 11px
                rgba(66,154,255,.55);
        }

    }

}


/* Small phones */
@media (max-width: 380px) {

    .mobile-tech-v2-windows {
        left: 6px !important;
    }

    .mobile-tech-v2-networking {
        right: 6px !important;
    }

    .mobile-tech-v2-azure {
        right: 6px !important;
    }

}


/* Accessibility */
@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mobile-tech-v2-label,
    .mobile-tech-v2-dot,
    .mobile-tech-v2-windows,
    .mobile-tech-v2-networking,
    .mobile-tech-v2-azure,
    .mobile-cloud-icon {
        animation:
            none !important;
    }

}

/* ===== MOBILE V2 MOTION POLISH END ===== */



/* ===== MOBILE V2 ICON AZURE FIX START ===== */

@media (max-width: 900px) {

    /* ======================================================
       CLEANER NETWORKING ICON
       ====================================================== */

    .mobile-network-icon {
        width: 24px !important;
        height: 22px !important;
    }

    .mobile-network-icon i {
        width: 6px !important;
        height: 6px !important;

        background: #5aa8ff !important;

        box-shadow:
            0 0 6px rgba(90, 168, 255, .55) !important;
    }

    .mobile-network-icon i:nth-child(1) {
        left: 9px !important;
        top: 1px !important;
    }

    .mobile-network-icon i:nth-child(2) {
        left: 1px !important;
        bottom: 1px !important;
    }

    .mobile-network-icon i:nth-child(3) {
        right: 1px !important;
        bottom: 1px !important;
    }

    .mobile-network-icon::before,
    .mobile-network-icon::after {
        width: 12px !important;
        height: 1px !important;

        top: 11px !important;

        background: rgba(84, 161, 255, .88) !important;

        box-shadow:
            0 0 4px rgba(84, 161, 255, .22);
    }

    .mobile-network-icon::before {
        left: 1px !important;
        transform: rotate(-47deg) !important;
    }

    .mobile-network-icon::after {
        right: 1px !important;
        transform: rotate(47deg) !important;
    }


    /* ======================================================
       AZURE
       Move away from shoe + force movement
       ====================================================== */

    .mobile-tech-v2 .mobile-tech-v2-azure {
        right: 10px !important;
        bottom: 42px !important;

        transform-origin: center !important;

        animation:
            mobileAzureFloatFinal
            4.8s ease-in-out
            infinite !important;

        will-change: transform;
    }

    @keyframes mobileAzureFloatFinal {

        0%,
        100% {
            transform:
                translate3d(0, 0, 0);
        }

        50% {
            transform:
                translate3d(0, -6px, 0);
        }

    }


    /* Make the Azure cloud breathe slightly too */
    .mobile-tech-v2 .mobile-cloud-icon {
        animation:
            mobileAzureCloudGlow
            3s ease-in-out
            infinite !important;
    }

    @keyframes mobileAzureCloudGlow {

        0%,
        100% {
            filter:
                brightness(1);

            box-shadow:
                0 0 6px
                rgba(66,154,255,.30);
        }

        50% {
            filter:
                brightness(1.12);

            box-shadow:
                0 0 13px
                rgba(66,154,255,.58);
        }

    }

}


@media (max-width: 380px) {

    .mobile-tech-v2 .mobile-tech-v2-azure {
        right: 8px !important;
        bottom: 36px !important;
    }

}


/* ===== MOBILE V2 ICON AZURE FIX END ===== */



/* ===== AZURE REAL FLOAT FIX START ===== */

@media (max-width: 900px) {

    .mobile-tech-v2 .mobile-tech-v2-azure {
        /*
        Keep whatever scale/transform we already use.
        Animate translate separately so old !important
        transform rules cannot block the movement.
        */
        animation:
            azureRealFloat
            4.6s ease-in-out
            infinite !important;

        will-change:
            translate;

        translate:
            0 0;
    }


    @keyframes azureRealFloat {

        0%,
        100% {
            translate:
                0 0;
        }

        50% {
            translate:
                0 -7px;
        }

    }

}


/* ===== AZURE REAL FLOAT FIX END ===== */











































































































/* ===== ABOUT MOBILE INSTRUMENT TILES FINAL START ===== */

@media (max-width: 900px) {

    /* ======================================================
       2 x 2 SYSTEM
       ====================================================== */

    #about .about-info-panel {
        position: relative !important;

        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        width: 100% !important;

        padding: 12px 0 !important;

        background: none !important;
        border: none !important;
        box-shadow: none !important;

        isolation: isolate !important;
        overflow: visible !important;
    }


    /* ======================================================
       SHARED LIQUID — BRIGHTER + MORE NOTICEABLE
       ====================================================== */

    #about .about-info-panel::before {
        content: '' !important;

        position: absolute !important;
        z-index: 0 !important;

        pointer-events: none !important;

        width: 310px !important;
        height: 245px !important;

        left: -45px !important;
        top: 5px !important;

        border-radius:
            53% 47% 62% 38% /
            44% 58% 42% 56% !important;

        background:
            radial-gradient(
                ellipse at 38% 35%,
                rgba(53, 139, 244, .50) 0%,
                rgba(31, 91, 182, .27) 28%,
                rgba(20, 62, 128, .11) 52%,
                transparent 73%
            ) !important;

        filter: blur(27px) !important;

        opacity: .88 !important;

        animation:
            aboutLiquidPrimary
            6.2s ease-in-out
            infinite alternate !important;
    }


    #about .about-info-panel::after {
        content: '' !important;

        position: absolute !important;
        z-index: 0 !important;

        pointer-events: none !important;

        width: 250px !important;
        height: 205px !important;

        right: -40px !important;
        bottom: -12px !important;

        border-radius:
            42% 58% 48% 52% /
            58% 43% 57% 42% !important;

        background:
            radial-gradient(
                ellipse at 55% 50%,
                rgba(83, 163, 250, .38) 0%,
                rgba(38, 101, 194, .21) 30%,
                rgba(17, 58, 121, .08) 55%,
                transparent 74%
            ) !important;

        filter: blur(29px) !important;

        opacity: .72 !important;

        animation:
            aboutLiquidSecondary
            7.4s ease-in-out
            infinite alternate-reverse !important;
    }


    @keyframes aboutLiquidPrimary {

        0% {
            transform:
                translate3d(-10px, -7px, 0)
                rotate(-8deg)
                scale(.94);
        }

        35% {
            transform:
                translate3d(55px, 16px, 0)
                rotate(2deg)
                scale(1.08);
        }

        68% {
            transform:
                translate3d(105px, 60px, 0)
                rotate(-4deg)
                scale(1.03);
        }

        100% {
            transform:
                translate3d(145px, 20px, 0)
                rotate(7deg)
                scale(1.11);
        }

    }


    @keyframes aboutLiquidSecondary {

        0% {
            transform:
                translate3d(5px, 10px, 0)
                rotate(5deg)
                scale(.94);
        }

        45% {
            transform:
                translate3d(-65px, -20px, 0)
                rotate(-5deg)
                scale(1.08);
        }

        100% {
            transform:
                translate3d(-125px, -58px, 0)
                rotate(6deg)
                scale(1.12);
        }

    }


    /* ======================================================
       PREMIUM INSTRUMENT TILE
       ====================================================== */

    #about .about-info-panel > .info-card {
        position: relative !important;
        z-index: 2 !important;

        min-width: 0 !important;
        min-height: 158px !important;

        margin: 0 !important;

        padding:
            62px 18px 20px !important;

        /*
           Two backgrounds:
           1 = card surface
           2 = animated border current
        */
        background:

            radial-gradient(
                circle at 18% 8%,
                rgba(84, 155, 238, .13),
                transparent 34%
            ),

            linear-gradient(
                145deg,
                rgba(7, 25, 47, .87),
                rgba(4, 15, 30, .95)
            ) padding-box,

            linear-gradient(
                115deg,
                rgba(64, 132, 220, .18) 0%,
                rgba(126, 188, 255, .72) 18%,
                rgba(65, 135, 224, .20) 31%,
                rgba(42, 93, 161, .16) 65%,
                rgba(106, 174, 250, .52) 83%,
                rgba(58, 117, 199, .18) 100%
            ) border-box !important;

        background-size:
            100% 100%,
            100% 100%,
            240% 100% !important;

        background-position:
            0 0,
            0 0,
            100% 0;

        border:
            1px solid transparent !important;

        border-radius:
            22px 22px 22px 10px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),

            inset 0 -24px 45px rgba(0,0,0,.11),

            0 16px 34px rgba(0,0,0,.18) !important;

        backdrop-filter:
            blur(10px) saturate(120%) !important;

        -webkit-backdrop-filter:
            blur(10px) saturate(120%) !important;

        overflow: hidden !important;

        animation:
            aboutTileEdgeCurrent
            7s linear
            infinite !important;

        transition:
            transform .22s cubic-bezier(.2,.75,.2,1),
            box-shadow .22s ease !important;
    }


    /* moving border only */
    @keyframes aboutTileEdgeCurrent {

        from {
            background-position:
                0 0,
                0 0,
                160% 0;
        }

        to {
            background-position:
                0 0,
                0 0,
                -80% 0;
        }

    }


    /* ======================================================
       SMALL INTERNAL LEFT RAIL
       ====================================================== */

    #about .about-info-panel > .info-card {
        box-shadow:
            inset 3px 0 0 rgba(64, 137, 229, .10),

            inset 0 1px 0 rgba(255,255,255,.045),

            inset 0 -24px 45px rgba(0,0,0,.11),

            0 16px 34px rgba(0,0,0,.18) !important;
    }


    /* ======================================================
       ICON DOCK
       ====================================================== */

    #about .about-info-panel > .info-card::before {
        content: '' !important;

        display: block !important;

        position: absolute !important;

        width: 39px !important;
        height: 39px !important;

        top: 16px !important;
        left: 17px !important;

        border-radius:
            12px 12px 12px 5px !important;

        background-color:
            rgba(29, 76, 134, .22) !important;

        background-position:
            center !important;

        background-repeat:
            no-repeat !important;

        background-size:
            19px 19px !important;

        border:
            1px solid rgba(95, 159, 239, .27) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            inset 0 -8px 16px rgba(0,0,0,.10) !important;

        animation:
            none !important;
    }


    /* Location */
    #about .info-card:nth-child(1)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388bdff' stroke-width='1.8'%3E%3Cpath d='M12 21s6-5 6-11a6 6 0 1 0-12 0c0 6 6 11 6 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.1'/%3E%3C/svg%3E") !important;
    }


    /* Education */
    #about .info-card:nth-child(2)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388bdff' stroke-width='1.8'%3E%3Cpath d='m3 9 9-5 9 5-9 5-9-5Z'/%3E%3Cpath d='M7 12v4c3 2 7 2 10 0v-4'/%3E%3C/svg%3E") !important;
    }


    /* Focus Areas */
    #about .info-card:nth-child(3)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388bdff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='18' cy='17' r='2'/%3E%3Cpath d='M11 8 7 15M13 8l4 7M8 17h8'/%3E%3C/svg%3E") !important;
    }


    /* Certification */
    #about .info-card:nth-child(4)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388bdff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m9 13-1 8 3-1.7L12 19l1 .3 3 1.7-1-8'/%3E%3C/svg%3E") !important;
    }


    /* ======================================================
       NUMBER BADGE
       ====================================================== */

    #about .about-info-panel > .info-card::after {
        position: absolute !important;

        top: 17px !important;
        right: 16px !important;

        width: auto !important;
        height: auto !important;

        padding:
            5px 7px !important;

        border-radius:
            7px !important;

        background:
            rgba(31, 70, 119, .16) !important;

        border:
            1px solid rgba(85, 139, 207, .10) !important;

        color:
            rgba(119, 169, 229, .52) !important;

        font-size:
            .58rem !important;

        font-weight:
            850 !important;

        letter-spacing:
            .12em !important;

        line-height:
            1 !important;

        box-shadow:
            none !important;

        opacity:
            1 !important;

        animation:
            none !important;
    }


    #about .info-card:nth-child(1)::after {
        content: '01' !important;
    }

    #about .info-card:nth-child(2)::after {
        content: '02' !important;
    }

    #about .info-card:nth-child(3)::after {
        content: '03' !important;
    }

    #about .info-card:nth-child(4)::after {
        content: '04' !important;
    }


    /* ======================================================
       LABEL
       ====================================================== */

    #about .about-info-panel .info-label {
        position: relative !important;

        margin:
            0 0 9px !important;

        padding-bottom:
            9px !important;

        color:
            #91a3ba !important;

        font-size:
            .62rem !important;

        line-height:
            1.2 !important;

        font-weight:
            850 !important;

        letter-spacing:
            .115em !important;

        text-transform:
            uppercase !important;
    }


    #about .about-info-panel .info-label::after {
        content: '' !important;

        position: absolute !important;

        left: 0 !important;
        bottom: 0 !important;

        width: 30px !important;
        height: 1px !important;

        background:
            linear-gradient(
                90deg,
                rgba(91, 158, 240, .65),
                transparent
            ) !important;
    }


    /* ======================================================
       VALUE
       ====================================================== */

    #about .about-info-panel .info-value {
        margin: 0 !important;

        color:
            #83b9fb !important;

        font-size:
            .94rem !important;

        line-height:
            1.32 !important;

        font-weight:
            760 !important;

        letter-spacing:
            -.014em !important;

        overflow-wrap:
            anywhere !important;
    }


    #about .about-info-panel .info-subtext {
        margin-top:
            6px !important;

        color:
            #8d9fb5 !important;

        font-size:
            .70rem !important;

        line-height:
            1.35 !important;
    }


    #about .info-card:nth-child(3) .info-value {
        font-size:
            .83rem !important;

        line-height:
            1.45 !important;
    }


    #about .info-card:nth-child(4) .info-value {
        font-size:
            .83rem !important;

        line-height:
            1.32 !important;
    }


    /* ======================================================
       DEPTH VARIATION
       ====================================================== */

    #about .info-card:nth-child(2),
    #about .info-card:nth-child(4) {
        transform:
            translateY(5px);
    }


    /* ======================================================
       TOUCH
       ====================================================== */

    #about .about-info-panel > .info-card:active {
        transform:
            translateY(2px)
            scale(.965) !important;

        box-shadow:
            inset 3px 0 0 rgba(76, 151, 241, .16),

            inset 0 1px 0 rgba(255,255,255,.05),

            inset 0 -20px 35px rgba(0,0,0,.10),

            0 8px 20px rgba(0,0,0,.15) !important;
    }

}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width: 355px) {

    #about .about-info-panel {
        gap:
            9px !important;
    }


    #about .about-info-panel > .info-card {
        min-height:
            150px !important;

        padding:
            60px 14px 17px !important;
    }


    #about .about-info-panel .info-value {
        font-size:
            .87rem !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    #about .about-info-panel::before,
    #about .about-info-panel::after,
    #about .about-info-panel > .info-card {
        animation:
            none !important;
    }

}

/* ===== ABOUT MOBILE INSTRUMENT TILES FINAL END ===== */



/* ===== ABOUT MOBILE FINAL PREMIUM POLISH START ===== */

@media (max-width: 900px) {

    /* ======================================================
       GRID
       ====================================================== */

    #about .about-info-panel {
        position: relative !important;

        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 14px !important;

        width: 100% !important;

        padding: 6px 0 !important;

        background: none !important;
        border: 0 !important;
        box-shadow: none !important;

        isolation: isolate !important;
        overflow: visible !important;
    }


    /* ======================================================
       BRIGHTER SHARED LIQUID
       ====================================================== */

    #about .about-info-panel::before {
        content: '' !important;

        position: absolute !important;
        z-index: 0 !important;

        width: 320px !important;
        height: 250px !important;

        left: -55px !important;
        top: -2px !important;

        pointer-events: none !important;

        border-radius:
            52% 48% 60% 40% /
            46% 55% 45% 54% !important;

        background:
            radial-gradient(
                ellipse at 36% 34%,
                rgba(60, 143, 247, .55) 0%,
                rgba(38, 102, 198, .29) 31%,
                rgba(18, 59, 120, .10) 57%,
                transparent 74%
            ) !important;

        filter: blur(29px) !important;

        opacity: .92 !important;

        animation:
            aboutFinalLiquidOne
            7.3s ease-in-out
            infinite alternate !important;
    }


    #about .about-info-panel::after {
        content: '' !important;

        position: absolute !important;
        z-index: 0 !important;

        width: 260px !important;
        height: 220px !important;

        right: -45px !important;
        bottom: -20px !important;

        pointer-events: none !important;

        border-radius:
            42% 58% 49% 51% /
            58% 42% 58% 42% !important;

        background:
            radial-gradient(
                ellipse at 55% 52%,
                rgba(84, 164, 255, .43) 0%,
                rgba(36, 96, 188, .22) 34%,
                rgba(16, 53, 111, .08) 58%,
                transparent 75%
            ) !important;

        filter: blur(31px) !important;

        opacity: .76 !important;

        animation:
            aboutFinalLiquidTwo
            8.4s ease-in-out
            infinite alternate-reverse !important;
    }


    @keyframes aboutFinalLiquidOne {

        0% {
            transform:
                translate3d(-8px, -5px, 0)
                rotate(-7deg)
                scale(.95);
        }

        45% {
            transform:
                translate3d(78px, 30px, 0)
                rotate(3deg)
                scale(1.08);
        }

        100% {
            transform:
                translate3d(145px, 55px, 0)
                rotate(8deg)
                scale(1.12);
        }

    }


    @keyframes aboutFinalLiquidTwo {

        0% {
            transform:
                translate3d(4px, 8px, 0)
                rotate(4deg)
                scale(.96);
        }

        50% {
            transform:
                translate3d(-70px, -25px, 0)
                rotate(-4deg)
                scale(1.08);
        }

        100% {
            transform:
                translate3d(-125px, -55px, 0)
                rotate(6deg)
                scale(1.12);
        }

    }


    /* ======================================================
       FINAL PREMIUM TILE SURFACE
       ====================================================== */

    #about .about-info-panel > .info-card {
        position: relative !important;
        z-index: 2 !important;

        min-height: 156px !important;

        padding:
            62px 18px 20px !important;

        margin: 0 !important;

        border-radius:
            22px 22px 22px 11px !important;

        border:
            1px solid rgba(88, 153, 234, .28) !important;

        background:

            radial-gradient(
                circle at 18% 8%,
                rgba(93, 171, 255, .16),
                transparent 34%
            ),

            radial-gradient(
                circle at 95% 95%,
                rgba(31, 94, 184, .10),
                transparent 42%
            ),

            linear-gradient(
                145deg,
                rgba(9, 29, 54, .91) 0%,
                rgba(5, 19, 37, .96) 58%,
                rgba(4, 15, 30, .98) 100%
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.055),
            inset 3px 0 0 rgba(69, 142, 232, .11),
            inset 0 -22px 38px rgba(0,0,0,.10),
            0 15px 34px rgba(0,0,0,.18) !important;

        backdrop-filter:
            blur(11px)
            saturate(120%) !important;

        -webkit-backdrop-filter:
            blur(11px)
            saturate(120%) !important;

        overflow: hidden !important;

        transition:
            transform .23s cubic-bezier(.2,.75,.2,1),
            border-color .23s ease,
            box-shadow .23s ease !important;
    }


    /* ======================================================
       ICON DOCK
       Keep your existing icons, improve container
       ====================================================== */

    #about .about-info-panel > .info-card::before {
        display: block !important;

        width: 40px !important;
        height: 40px !important;

        top: 16px !important;
        left: 17px !important;

        border-radius:
            13px 13px 13px 6px !important;

        background-color:
            rgba(31, 81, 143, .23) !important;

        border:
            1px solid rgba(93, 158, 239, .27) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.055),
            inset 0 -10px 18px rgba(0,0,0,.11),
            0 5px 14px rgba(0,0,0,.07) !important;

        background-position:
            center !important;

        background-repeat:
            no-repeat !important;

        background-size:
            19px 19px !important;

        opacity:
            1 !important;

        animation:
            none !important;
    }


    /* ======================================================
       REMOVE 01 / 02 / 03 / 04 COMPLETELY
       ====================================================== */

    #about .about-info-panel > .info-card::after {
        content:
            none !important;

        display:
            none !important;
    }


    /* ======================================================
       TEXT
       ====================================================== */

    #about .about-info-panel .info-label {
        position: relative !important;

        margin:
            0 0 11px !important;

        padding-bottom:
            9px !important;

        color:
            #98aac2 !important;

        font-size:
            .64rem !important;

        line-height:
            1.2 !important;

        font-weight:
            850 !important;

        letter-spacing:
            .115em !important;

        text-transform:
            uppercase !important;
    }


    #about .about-info-panel .info-label::after {
        content: '' !important;

        position: absolute !important;

        left: 0 !important;
        bottom: 0 !important;

        width: 34px !important;
        height: 1px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(89, 161, 247, .76),
                rgba(89, 161, 247, .05)
            ) !important;
    }


    #about .about-info-panel .info-value {
        margin:
            0 !important;

        color:
            #84baff !important;

        font-size:
            .95rem !important;

        line-height:
            1.32 !important;

        font-weight:
            760 !important;

        letter-spacing:
            -.014em !important;

        overflow-wrap:
            anywhere !important;
    }


    #about .about-info-panel .info-subtext {
        margin-top:
            6px !important;

        color:
            #8fa2ba !important;

        font-size:
            .71rem !important;

        line-height:
            1.35 !important;
    }


    #about .about-info-panel
    > .info-card:nth-child(3)
    .info-value {
        font-size:
            .84rem !important;

        line-height:
            1.45 !important;
    }


    #about .about-info-panel
    > .info-card:nth-child(4)
    .info-value {
        font-size:
            .84rem !important;

        line-height:
            1.34 !important;
    }


    /* ======================================================
       SUBTLE ASYMMETRY
       Not "jiggling" — just less robotic
       ====================================================== */

    #about .about-info-panel
    > .info-card:nth-child(2),

    #about .about-info-panel
    > .info-card:nth-child(4) {
        transform:
            translateY(5px);
    }


    /* ======================================================
       TOUCH RESPONSE
       ====================================================== */

    #about .about-info-panel > .info-card:active {
        transform:
            translateY(2px)
            scale(.968) !important;

        border-color:
            rgba(103, 171, 255, .48) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            inset 3px 0 0 rgba(78, 151, 240, .15),
            inset 0 -18px 30px rgba(0,0,0,.09),
            0 8px 22px rgba(0,0,0,.15) !important;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 355px) {

    #about .about-info-panel {
        gap:
            10px !important;
    }


    #about .about-info-panel > .info-card {
        min-height:
            148px !important;

        padding:
            60px 14px 17px !important;
    }


    #about .about-info-panel .info-value {
        font-size:
            .88rem !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    #about .about-info-panel::before,
    #about .about-info-panel::after {
        animation:
            none !important;
    }

}

/* ===== ABOUT MOBILE FINAL PREMIUM POLISH END ===== */



/* ===== ABOUT MOBILE MOTION POLISH START ===== */

@media (max-width: 900px) {

    /* ======================================================
       SUBTLE CARD FLOAT
       Very small movement only
       ====================================================== */

    #about .about-info-panel > .info-card {
        will-change: transform !important;
    }


    #about .about-info-panel > .info-card:nth-child(1) {
        animation:
            aboutTileFloatA
            7s ease-in-out
            infinite alternate !important;
    }


    #about .about-info-panel > .info-card:nth-child(2) {
        animation:
            aboutTileFloatB
            7.6s ease-in-out
            infinite alternate !important;
    }


    #about .about-info-panel > .info-card:nth-child(3) {
        animation:
            aboutTileFloatB
            7.2s ease-in-out
            infinite alternate-reverse !important;
    }


    #about .about-info-panel > .info-card:nth-child(4) {
        animation:
            aboutTileFloatA
            7.8s ease-in-out
            infinite alternate-reverse !important;
    }


    @keyframes aboutTileFloatA {

        0% {
            transform:
                translate3d(0, 0, 0);
        }

        100% {
            transform:
                translate3d(3px, -2px, 0);
        }

    }


    @keyframes aboutTileFloatB {

        0% {
            transform:
                translate3d(0, 0, 0);
        }

        100% {
            transform:
                translate3d(-3px, 2px, 0);
        }

    }


    /* ======================================================
       SLIGHTLY BRIGHTER MAIN TEXT
       Same website blue — no new colors
       ====================================================== */

    #about .about-info-panel .info-value {
        color:
            #8fc2ff !important;

        text-shadow:
            0 0 16px
            rgba(75, 148, 236, .07) !important;
    }


    /* ======================================================
       ICONS A LITTLE CRISPER
       ====================================================== */

    #about .about-info-panel > .info-card::before {
        filter:
            brightness(1.08)
            saturate(1.05) !important;
    }


    /* ======================================================
       TINY TOUCH RESPONSE
       ====================================================== */

    #about .about-info-panel > .info-card:active {
        animation:
            none !important;

        transform:
            translateY(1px)
            scale(.97) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    #about .about-info-panel > .info-card {
        animation:
            none !important;

        transform:
            none !important;
    }

}

/* ===== ABOUT MOBILE MOTION POLISH END ===== */



/* ===== EXPERIENCE MOBILE PREMIUM TIMELINE START ===== */

@media (max-width: 700px) {

    /* ======================================================
       SECTION
       ====================================================== */

    #experience {
        position: relative !important;

        padding-top: 62px !important;
        padding-bottom: 66px !important;

        overflow: hidden !important;
    }


    #experience .section-title {
        margin-bottom: 46px !important;
    }


    /* ======================================================
       EXPERIENCE LIST = TIMELINE SYSTEM
       ====================================================== */

    #experience .experience-list {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 22px !important;

        width: 100% !important;

        padding-left: 27px !important;
    }


    /*
       Main timeline rail
    */
    #experience .experience-list::before {
        content: '' !important;

        position: absolute !important;

        left: 7px !important;
        top: 25px !important;
        bottom: 28px !important;

        width: 1px !important;

        background:
            linear-gradient(
                180deg,
                rgba(84, 157, 250, .72) 0%,
                rgba(51, 119, 218, .40) 35%,
                rgba(40, 92, 172, .25) 75%,
                rgba(40, 92, 172, .04) 100%
            ) !important;

        box-shadow:
            0 0 10px rgba(65, 140, 235, .10) !important;

        pointer-events: none !important;
    }


    /* ======================================================
       JOB CARD
       ====================================================== */

    #experience .experience-card {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            23px 18px 21px 20px !important;

        border-radius:
            18px !important;

        border:
            1px solid rgba(58, 119, 205, .24) !important;

        border-left:
            1px solid rgba(70, 145, 241, .42) !important;

        background:

            radial-gradient(
                circle at 4% 0%,
                rgba(58, 131, 226, .095),
                transparent 31%
            ),

            linear-gradient(
                145deg,
                rgba(8, 22, 42, .97),
                rgba(4, 14, 28, .99)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 12px 28px rgba(0,0,0,.19) !important;

        overflow: visible !important;

        transform: none !important;

        transition:
            transform .20s ease,
            border-color .20s ease,
            background .20s ease !important;
    }


    /* ======================================================
       TIMELINE NODE
       Re-enable it on mobile
       ====================================================== */

    #experience .experience-card::before {
        content: '' !important;

        display: block !important;

        position: absolute !important;

        left: -27px !important;
        top: 27px !important;

        width: 10px !important;
        height: 10px !important;

        border-radius: 50% !important;

        background:
            #579df6 !important;

        border:
            3px solid #07111f !important;

        box-shadow:
            0 0 0 3px rgba(75, 146, 238, .10),
            0 0 12px rgba(75, 146, 238, .36) !important;

        z-index: 4 !important;
    }


    /*
       Small connector:
       timeline node → card
    */
    #experience .experience-card::after {
        content: '' !important;

        display: block !important;

        position: absolute !important;

        left: -17px !important;
        top: 34px !important;

        width: 16px !important;
        height: 1px !important;

        background:
            linear-gradient(
                90deg,
                rgba(76, 151, 246, .62),
                rgba(76, 151, 246, .12)
            ) !important;

        z-index: 3 !important;
    }


    /* ======================================================
       HEADER
       ====================================================== */

    #experience .experience-header {
        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 13px !important;

        margin-bottom: 19px !important;
    }


    #experience .experience-info {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* ======================================================
       ROLE TITLE
       ====================================================== */

    #experience .experience-title {
        margin:
            0 0 7px !important;

        color:
            #e2edfb !important;

        font-size:
            1.08rem !important;

        line-height:
            1.27 !important;

        letter-spacing:
            -.018em !important;

        font-weight:
            800 !important;
    }


    /* ======================================================
       COMPANY
       ====================================================== */

    #experience .experience-company {
        margin:
            0 !important;

        color:
            #75aaf2 !important;

        font-size:
            .81rem !important;

        line-height:
            1.42 !important;

        font-weight:
            700 !important;
    }


    /* ======================================================
       DATE BADGE
       Fix Toyota overflow
       ====================================================== */

    #experience .experience-date-pill {
        display: inline-flex !important;

        align-items: center !important;

        width: fit-content !important;
        max-width: 100% !important;

        padding:
            7px 11px !important;

        margin:
            0 !important;

        border-radius:
            9px !important;

        white-space:
            normal !important;

        overflow-wrap:
            anywhere !important;

        color:
            #8bb9f6 !important;

        font-size:
            .70rem !important;

        line-height:
            1.35 !important;

        font-weight:
            700 !important;

        background:
            linear-gradient(
                135deg,
                rgba(34, 82, 153, .17),
                rgba(14, 43, 89, .13)
            ) !important;

        border:
            1px solid rgba(68, 132, 222, .22) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.018) !important;
    }


    /* Toyota date is long */
    #experience
    .experience-card:nth-child(3)
    .experience-date-pill {
        font-size:
            .67rem !important;

        padding:
            7px 10px !important;
    }


    /* ======================================================
       BULLET LIST
       ====================================================== */

    #experience .experience-details {
        display: flex !important;
        flex-direction: column !important;

        gap: 11px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        list-style:
            none !important;
    }


    #experience .experience-details li {
        position: relative !important;

        margin:
            0 !important;

        padding-left:
            20px !important;

        color:
            #94a8c1 !important;

        font-size:
            .82rem !important;

        line-height:
            1.60 !important;

        font-weight:
            400 !important;
    }


    /*
       Cleaner technical arrow
    */
    #experience .experience-details li::before {
        content:
            '→' !important;

        position:
            absolute !important;

        left:
            0 !important;

        top:
            0 !important;

        color:
            #4f96ef !important;

        font-size:
            .80rem !important;

        font-weight:
            700 !important;

        opacity:
            .90 !important;
    }


    /* ======================================================
       SUBTLE CARD DIFFERENTIATION
       Still SAME blue palette
       ====================================================== */

    #experience .experience-card:nth-child(1) {
        border-left-color:
            rgba(82, 157, 250, .65) !important;
    }


    #experience .experience-card:nth-child(2) {
        border-left-color:
            rgba(65, 137, 229, .50) !important;
    }


    /*
       Toyota slightly quieter because it is not the IT role,
       but it still belongs visually.
    */
    #experience .experience-card:nth-child(3) {
        border-left-color:
            rgba(55, 113, 193, .36) !important;

        background:

            radial-gradient(
                circle at 4% 0%,
                rgba(48, 104, 185, .065),
                transparent 31%
            ),

            linear-gradient(
                145deg,
                rgba(7, 19, 36, .97),
                rgba(4, 13, 26, .99)
            ) !important;
    }


    #experience .experience-card:nth-child(3)::before {
        background:
            #427fce !important;

        box-shadow:
            0 0 0 3px rgba(65, 127, 208, .08),
            0 0 10px rgba(65, 127, 208, .22) !important;
    }


    /* ======================================================
       TAP RESPONSE
       No floating here
       ====================================================== */

    #experience .experience-card:active {
        transform:
            translateX(2px)
            scale(.988) !important;

        border-color:
            rgba(71, 142, 237, .36) !important;
    }


    /* ======================================================
       REMOVE DESKTOP HOVER MOVEMENT ON PHONE
       ====================================================== */

    #experience .experience-card:hover {
        transform:
            none !important;
    }


    /* ======================================================
       EXPERIENCE → PROJECTS GAP
       ====================================================== */

    #experience + #projects {
        padding-top:
            62px !important;
    }

}


/* ==========================================================
   NARROW PHONES
   ========================================================== */

@media (max-width: 355px) {

    #experience .experience-list {
        padding-left:
            23px !important;
    }


    #experience .experience-card {
        padding:
            20px 15px 19px 17px !important;
    }


    #experience .experience-card::before {
        left:
            -23px !important;
    }


    #experience .experience-card::after {
        left:
            -14px !important;

        width:
            13px !important;
    }


    #experience .experience-title {
        font-size:
            1rem !important;
    }


    #experience .experience-details li {
        font-size:
            .79rem !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #experience .experience-card {
        transition:
            none !important;
    }

}

/* ===== EXPERIENCE MOBILE PREMIUM TIMELINE END ===== */







/* ===== EXPERIENCE MOBILE FINAL POLISH START ===== */

@media (max-width: 700px) {

    /* ======================================================
       TIMELINE SPACING
       Give the nodes slightly more breathing room
       ====================================================== */

    #experience .experience-list {
        padding-left:
            31px !important;
    }


    #experience .experience-card::before {
        left:
            -31px !important;
    }


    #experience .experience-card::after {
        left:
            -20px !important;

        width:
            19px !important;
    }


    /* ======================================================
       CARD SPACING
       ====================================================== */

    #experience .experience-card {
        padding:
            23px 18px 22px 20px !important;

        border-radius:
            19px !important;
    }


    /* ======================================================
       BULLET DENSITY
       Slightly tighter, easier to scan
       ====================================================== */

    #experience .experience-details {
        gap:
            9px !important;
    }


    #experience .experience-details li {
        font-size:
            .81rem !important;

        line-height:
            1.52 !important;

        padding-left:
            19px !important;
    }


    #experience .experience-details li::before {
        top:
            1px !important;

        opacity:
            .82 !important;
    }


    /* ======================================================
       ROLE / COMPANY POLISH
       ====================================================== */

    #experience .experience-title {
        margin-bottom:
            6px !important;

        letter-spacing:
            -.015em !important;
    }


    #experience .experience-company {
        color:
            #78acf2 !important;
    }


    /* ======================================================
       DATE BADGE
       Slightly cleaner and less heavy
       ====================================================== */

    #experience .experience-date-pill {
        padding:
            7px 11px !important;

        border-color:
            rgba(72, 137, 225, .19) !important;

        background:
            linear-gradient(
                135deg,
                rgba(35, 82, 151, .15),
                rgba(13, 41, 84, .10)
            ) !important;
    }


    /* ======================================================
       SCROLL REVEAL
       CSS-only reveal using modern view timeline support.
       Falls back cleanly if browser doesn't support it.
       ====================================================== */

    @supports (animation-timeline: view()) {

        #experience .experience-card {
            animation:
                experienceMobileReveal
                linear both !important;

            animation-timeline:
                view() !important;

            animation-range:
                entry 8%
                cover 28% !important;
        }


        @keyframes experienceMobileReveal {

            from {
                opacity: 0;
                transform:
                    translate3d(10px, 10px, 0)
                    scale(.985);
            }

            to {
                opacity: 1;
                transform:
                    translate3d(0, 0, 0)
                    scale(1);
            }

        }

    }


    /* ======================================================
       NODE APPEARANCE
       ====================================================== */

    #experience .experience-card::before {
        transition:
            transform .22s ease,
            opacity .22s ease !important;
    }


    #experience .experience-card:active::before {
        transform:
            scale(1.12) !important;
    }


    /* ======================================================
       TAP RESPONSE
       ====================================================== */

    #experience .experience-card:active {
        transform:
            translateX(2px)
            scale(.989) !important;
    }

}


/* ==========================================================
   NARROW PHONE
   ========================================================== */

@media (max-width: 355px) {

    #experience .experience-list {
        padding-left:
            27px !important;
    }


    #experience .experience-card::before {
        left:
            -27px !important;
    }


    #experience .experience-card::after {
        left:
            -17px !important;

        width:
            16px !important;
    }


    #experience .experience-details li {
        font-size:
            .78rem !important;

        line-height:
            1.50 !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #experience .experience-card {
        animation:
            none !important;

        opacity:
            1 !important;

        transform:
            none !important;
    }

}

/* ===== EXPERIENCE MOBILE FINAL POLISH END ===== */



/* ===== PROJECTS MOBILE SHOWCASE START ===== */

@media (max-width: 700px) {

    /* ======================================================
       SECTION
       ====================================================== */

    #projects {
        position: relative !important;

        padding-top: 64px !important;
        padding-bottom: 68px !important;

        overflow: hidden !important;
    }


    #projects .section-title {
        margin-bottom: 48px !important;
    }


    /* ======================================================
       PROJECT GRID
       ====================================================== */

    #projects .projects-grid {
        display: flex !important;

        flex-direction: column !important;

        gap: 28px !important;

        width: 100% !important;
    }


    /* ======================================================
       PROJECT CARD
       ====================================================== */

    #projects .project-card {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        border:
            1px solid rgba(59, 121, 207, .24) !important;

        background:

            radial-gradient(
                circle at 50% 0%,
                rgba(52, 131, 231, .10),
                transparent 30%
            ),

            linear-gradient(
                150deg,
                rgba(7, 23, 43, .98),
                rgba(4, 15, 29, .99)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 16px 34px rgba(0,0,0,.18) !important;

        transform: none !important;

        transition:
            transform .22s cubic-bezier(.2,.75,.2,1),
            border-color .22s ease,
            box-shadow .22s ease !important;
    }


    /* ======================================================
       VISUAL / ICON HEADER
       ====================================================== */

    #projects .project-visual,
    #projects .project-icon-wrap,
    #projects .project-icon-container {
        position: relative !important;

        min-height: 150px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-bottom:
            1px solid rgba(53, 105, 178, .16) !important;

        background:

            radial-gradient(
                circle at 50% 50%,
                rgba(36, 103, 199, .14),
                rgba(17, 52, 106, .06) 36%,
                transparent 68%
            ) !important;

        overflow: hidden !important;
    }


    /*
       Subtle orbit ring around the project icon area
    */
    #projects .project-visual::before,
    #projects .project-icon-wrap::before,
    #projects .project-icon-container::before {
        content: '' !important;

        position: absolute !important;

        width: 116px !important;
        height: 116px !important;

        border-radius: 50% !important;

        border:
            1px solid rgba(72, 136, 219, .12) !important;

        box-shadow:
            inset 0 0 26px rgba(43, 103, 190, .06) !important;

        pointer-events: none !important;
    }


    /*
       Small rotating arc — very restrained
    */
    #projects .project-visual::after,
    #projects .project-icon-wrap::after,
    #projects .project-icon-container::after {
        content: '' !important;

        position: absolute !important;

        width: 116px !important;
        height: 116px !important;

        border-radius: 50% !important;

        border:
            1px solid transparent !important;

        border-top-color:
            rgba(64, 152, 246, .42) !important;

        border-right-color:
            rgba(64, 152, 246, .08) !important;

        animation:
            projectOrbitMobile
            11s linear
            infinite !important;

        pointer-events: none !important;
    }


    @keyframes projectOrbitMobile {

        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }

    }


    /* ======================================================
       CARD BODY
       ====================================================== */

    #projects .project-content,
    #projects .project-body {
        padding:
            25px 21px 22px !important;
    }


    /* ======================================================
       PROJECT TITLE
       ====================================================== */

    #projects .project-title,
    #projects .project-card h3 {
        margin:
            0 0 10px !important;

        color:
            #e4edf9 !important;

        font-size:
            1.08rem !important;

        line-height:
            1.28 !important;

        font-weight:
            800 !important;

        letter-spacing:
            -.015em !important;
    }


    /* ======================================================
       PROJECT TYPE PILL
       ====================================================== */

    #projects .project-type,
    #projects .project-badge,
    #projects .project-category {
        display: inline-flex !important;

        align-items: center !important;

        width: fit-content !important;

        max-width: 100% !important;

        padding:
            7px 11px !important;

        margin:
            0 0 18px !important;

        border-radius:
            999px !important;

        color:
            #79aff4 !important;

        font-size:
            .70rem !important;

        line-height:
            1.25 !important;

        font-weight:
            750 !important;

        background:
            rgba(27, 69, 132, .18) !important;

        border:
            1px solid rgba(64, 132, 221, .22) !important;
    }


    /* ======================================================
       DESCRIPTION
       ====================================================== */

    #projects .project-description,
    #projects .project-card p {
        color:
            #96a9c2 !important;

        font-size:
            .83rem !important;

        line-height:
            1.62 !important;
    }


    /* ======================================================
       TECH TAGS
       ====================================================== */

    #projects .project-tags,
    #projects .tech-tags {
        display: flex !important;

        flex-wrap: wrap !important;

        gap: 8px !important;

        margin-top:
            18px !important;
    }


    #projects .project-tags span,
    #projects .tech-tags span,
    #projects .project-tag {
        padding:
            7px 11px !important;

        border-radius:
            10px !important;

        color:
            #8fb9ef !important;

        font-size:
            .73rem !important;

        line-height:
            1.2 !important;

        font-weight:
            650 !important;

        background:
            linear-gradient(
                145deg,
                rgba(23, 60, 117, .26),
                rgba(10, 33, 72, .22)
            ) !important;

        border:
            1px solid rgba(62, 124, 209, .18) !important;

        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease !important;
    }


    #projects .project-tags span:active,
    #projects .tech-tags span:active,
    #projects .project-tag:active {
        transform:
            scale(.95) !important;

        border-color:
            rgba(83, 153, 241, .40) !important;

        background:
            rgba(31, 78, 150, .32) !important;
    }


    /* ======================================================
       KEY FEATURES / CONTRIBUTION BLOCKS
       ====================================================== */

    #projects .project-extra,
    #projects .project-details,
    #projects .project-meta-section {
        border-top:
            1px solid rgba(53, 105, 178, .15) !important;

        padding:
            20px 21px !important;
    }


    #projects .project-extra h4,
    #projects .project-details h4,
    #projects .project-meta-section h4 {
        margin:
            0 0 8px !important;

        color:
            #4288f4 !important;

        font-size:
            .75rem !important;

        line-height:
            1.2 !important;

        letter-spacing:
            .07em !important;

        text-transform:
            uppercase !important;

        font-weight:
            800 !important;
    }


    #projects .project-extra p,
    #projects .project-details p,
    #projects .project-meta-section p {
        margin:
            0 0 16px !important;

        color:
            #97aac2 !important;

        font-size:
            .81rem !important;

        line-height:
            1.58 !important;
    }


    #projects .project-extra p:last-child,
    #projects .project-details p:last-child,
    #projects .project-meta-section p:last-child {
        margin-bottom:
            0 !important;
    }


    /* ======================================================
       CARD DIFFERENTIATION
       Same palette, tiny differences
       ====================================================== */

    #projects .project-card:nth-child(1) {
        border-color:
            rgba(68, 137, 226, .30) !important;
    }


    #projects .project-card:nth-child(2) {
        border-color:
            rgba(57, 123, 210, .25) !important;
    }


    #projects .project-card:nth-child(3) {
        border-color:
            rgba(48, 108, 191, .22) !important;
    }


    /* ======================================================
       SCROLL REVEAL
       ====================================================== */

    @supports (animation-timeline: view()) {

        #projects .project-card {
            animation:
                projectMobileReveal
                linear both !important;

            animation-timeline:
                view() !important;

            animation-range:
                entry 8%
                cover 24% !important;
        }


        @keyframes projectMobileReveal {

            from {
                opacity: 0;
                transform:
                    translate3d(0, 15px, 0)
                    scale(.985);
            }

            to {
                opacity: 1;
                transform:
                    translate3d(0, 0, 0)
                    scale(1);
            }

        }

    }


    /* ======================================================
       TAP / SHOWCASE RESPONSE
       ====================================================== */

    #projects .project-card:active {
        transform:
            perspective(900px)
            rotateX(.5deg)
            rotateY(-.8deg)
            scale(.987) !important;

        border-color:
            rgba(76, 148, 238, .40) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 9px 24px rgba(0,0,0,.17) !important;
    }


    /* remove desktop hover jump on phone */
    #projects .project-card:hover {
        transform:
            none !important;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 355px) {

    #projects .project-content,
    #projects .project-body {
        padding:
            22px 17px 20px !important;
    }


    #projects .project-extra,
    #projects .project-details,
    #projects .project-meta-section {
        padding:
            18px 17px !important;
    }


    #projects .project-title,
    #projects .project-card h3 {
        font-size:
            1rem !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #projects .project-card,
    #projects .project-visual::after,
    #projects .project-icon-wrap::after,
    #projects .project-icon-container::after {
        animation:
            none !important;
    }

}

/* ===== PROJECTS MOBILE SHOWCASE END ===== */



/* ===== PROJECTS MOBILE FINAL POLISH START ===== */

@media (max-width: 700px) {

    /* tighten section spacing slightly */
    #projects {
        padding-top: 58px !important;
        padding-bottom: 64px !important;
    }

    #projects .section-title {
        margin-bottom: 42px !important;
    }


    /* shorter visual/header area */
    #projects .project-visual,
    #projects .project-icon-wrap,
    #projects .project-icon-container {
        min-height: 124px !important;
    }


    /* slightly smaller orbit so it feels tighter */
    #projects .project-visual::before,
    #projects .project-icon-wrap::before,
    #projects .project-icon-container::before,
    #projects .project-visual::after,
    #projects .project-icon-wrap::after,
    #projects .project-icon-container::after {
        width: 96px !important;
        height: 96px !important;
    }


    /* richer icon zone */
    #projects .project-visual,
    #projects .project-icon-wrap,
    #projects .project-icon-container {
        background:
            radial-gradient(
                circle at 50% 48%,
                rgba(49, 131, 235, .18),
                rgba(22, 69, 140, .07) 38%,
                transparent 68%
            ) !important;
    }


    /* slightly brighter icon itself */
    #projects .project-icon,
    #projects .project-visual svg,
    #projects .project-icon-wrap svg,
    #projects .project-icon-container svg {
        filter:
            brightness(1.08)
            saturate(1.05) !important;
    }


    /* bring content up a little */
    #projects .project-content,
    #projects .project-body {
        padding-top: 22px !important;
    }


    /* slightly tighter gap between cards */
    #projects .projects-grid {
        gap: 24px !important;
    }

}


/* narrow phones */
@media (max-width: 355px) {

    #projects .project-visual,
    #projects .project-icon-wrap,
    #projects .project-icon-container {
        min-height: 116px !important;
    }

}

/* ===== PROJECTS MOBILE FINAL POLISH END ===== */



/* ===== SKILLS MOBILE PREMIUM MODULES START ===== */

@media (max-width: 700px) {

    /* ======================================================
       SECTION
       ====================================================== */

    #skills {
        position: relative !important;

        padding-top: 60px !important;
        padding-bottom: 64px !important;

        overflow: hidden !important;
    }


    #skills .section-title {
        margin-bottom: 44px !important;
    }


    /* ======================================================
       GRID
       ====================================================== */

    #skills .skills-grid {
        display: flex !important;

        flex-direction: column !important;

        gap: 22px !important;

        width: 100% !important;
    }


    /* ======================================================
       SKILL CATEGORY CARD
       ====================================================== */

    #skills .skill-category,
    #skills .skills-card,
    #skills .skill-card {
        position: relative !important;

        width: 100% !important;

        padding:
            24px 22px 23px !important;

        margin: 0 !important;

        border-radius:
            18px !important;

        border:
            1px solid rgba(56, 118, 204, .23) !important;

        background:

            radial-gradient(
                circle at 0% 0%,
                rgba(55, 130, 226, .095),
                transparent 32%
            ),

            linear-gradient(
                145deg,
                rgba(7, 22, 41, .97),
                rgba(4, 15, 28, .99)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 12px 28px rgba(0,0,0,.16) !important;

        overflow: hidden !important;

        transition:
            transform .20s ease,
            border-color .20s ease,
            box-shadow .20s ease !important;
    }


    /* ======================================================
       TOP ACCENT
       ====================================================== */

    #skills .skill-category::before,
    #skills .skills-card::before,
    #skills .skill-card::before {
        content: '' !important;

        position: absolute !important;

        top: 0 !important;
        left: 22px !important;

        width: 62px !important;
        height: 2px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(78, 155, 248, .86),
                rgba(78, 155, 248, .10)
            ) !important;

        pointer-events: none !important;
    }


    /* ======================================================
       CATEGORY HEADING
       ====================================================== */

    #skills .skill-category h3,
    #skills .skills-card h3,
    #skills .skill-card h3,
    #skills .skill-category-title {
        margin:
            7px 0 20px !important;

        color:
            #77adf3 !important;

        font-size:
            1rem !important;

        line-height:
            1.30 !important;

        font-weight:
            800 !important;

        letter-spacing:
            .015em !important;

        text-transform:
            uppercase !important;
    }


    /* ======================================================
       SKILL CHIP WRAPPER
       ====================================================== */

    #skills .skill-tags,
    #skills .skills-list,
    #skills .skill-list,
    #skills .skills-tags {
        display: flex !important;

        flex-wrap: wrap !important;

        gap:
            9px !important;
    }


    /* ======================================================
       SKILL CHIPS
       ====================================================== */

    #skills .skill-tag,
    #skills .skill-tags span,
    #skills .skills-list span,
    #skills .skill-list span,
    #skills .skills-tags span {
        display: inline-flex !important;

        align-items: center !important;

        min-height:
            38px !important;

        padding:
            8px 12px !important;

        border-radius:
            11px !important;

        color:
            #a8bdd7 !important;

        font-size:
            .78rem !important;

        line-height:
            1.25 !important;

        font-weight:
            600 !important;

        background:
            linear-gradient(
                145deg,
                rgba(17, 47, 92, .28),
                rgba(8, 29, 63, .22)
            ) !important;

        border:
            1px solid rgba(57, 117, 200, .18) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.018) !important;

        transition:
            transform .18s ease,
            border-color .18s ease,
            color .18s ease,
            background .18s ease !important;
    }


    /* ======================================================
       TOUCH RESPONSE
       ====================================================== */

    #skills .skill-tag:active,
    #skills .skill-tags span:active,
    #skills .skills-list span:active,
    #skills .skill-list span:active,
    #skills .skills-tags span:active {
        transform:
            translateY(-1px)
            scale(.965) !important;

        color:
            #8fc1ff !important;

        border-color:
            rgba(83, 153, 241, .38) !important;

        background:
            rgba(28, 72, 138, .30) !important;
    }


    /* ======================================================
       CATEGORY DIFFERENTIATION
       SAME BLUE SYSTEM
       ====================================================== */

    #skills .skill-category:nth-child(1),
    #skills .skills-card:nth-child(1),
    #skills .skill-card:nth-child(1) {
        border-color:
            rgba(65, 137, 226, .28) !important;
    }


    #skills .skill-category:nth-child(2),
    #skills .skills-card:nth-child(2),
    #skills .skill-card:nth-child(2) {
        border-color:
            rgba(59, 127, 213, .24) !important;
    }


    #skills .skill-category:nth-child(3),
    #skills .skills-card:nth-child(3),
    #skills .skill-card:nth-child(3) {
        border-color:
            rgba(55, 120, 202, .22) !important;
    }


    #skills .skill-category:nth-child(4),
    #skills .skills-card:nth-child(4),
    #skills .skill-card:nth-child(4) {
        border-color:
            rgba(50, 112, 191, .20) !important;
    }


    #skills .skill-category:nth-child(5),
    #skills .skills-card:nth-child(5),
    #skills .skill-card:nth-child(5) {
        border-color:
            rgba(47, 105, 181, .19) !important;
    }


    /* ======================================================
       SCROLL REVEAL
       ====================================================== */

    @supports (animation-timeline: view()) {

        #skills .skill-category,
        #skills .skills-card,
        #skills .skill-card {
            animation:
                skillModuleReveal
                linear both !important;

            animation-timeline:
                view() !important;

            animation-range:
                entry 10%
                cover 24% !important;
        }


        @keyframes skillModuleReveal {

            from {
                opacity: 0;
                transform:
                    translate3d(0, 12px, 0)
                    scale(.988);
            }

            to {
                opacity: 1;
                transform:
                    translate3d(0, 0, 0)
                    scale(1);
            }

        }

    }


    /* ======================================================
       CARD TAP RESPONSE
       ====================================================== */

    #skills .skill-category:active,
    #skills .skills-card:active,
    #skills .skill-card:active {
        transform:
            scale(.989) !important;

        border-color:
            rgba(75, 145, 235, .34) !important;
    }


    /* remove desktop hover movement on phone */
    #skills .skill-category:hover,
    #skills .skills-card:hover,
    #skills .skill-card:hover {
        transform:
            none !important;
    }

}


/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media (max-width: 355px) {

    #skills .skill-category,
    #skills .skills-card,
    #skills .skill-card {
        padding:
            21px 18px 20px !important;
    }


    #skills .skill-category h3,
    #skills .skills-card h3,
    #skills .skill-card h3,
    #skills .skill-category-title {
        font-size:
            .94rem !important;
    }


    #skills .skill-tag,
    #skills .skill-tags span,
    #skills .skills-list span,
    #skills .skill-list span,
    #skills .skills-tags span {
        font-size:
            .74rem !important;

        padding:
            7px 10px !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #skills .skill-category,
    #skills .skills-card,
    #skills .skill-card {
        animation:
            none !important;
    }

}

/* ===== SKILLS MOBILE PREMIUM MODULES END ===== */















/* ===== SKILLS MOBILE KINETIC FINAL START ===== */

@media (max-width: 700px) {

    /* ======================================================
       KEEP CATEGORY CARDS FULLY VISIBLE
       ====================================================== */

    #skills .skill-category {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;

        background:
            radial-gradient(
                circle at 12% 6%,
                rgba(64, 145, 244, .16),
                transparent 35%
            ),
            radial-gradient(
                circle at 92% 88%,
                rgba(27, 78, 158, .08),
                transparent 40%
            ),
            linear-gradient(
                145deg,
                rgba(8, 24, 45, .98),
                rgba(4, 15, 29, .99)
            ) !important;
    }


    /* ======================================================
       CATEGORY TITLES
       ====================================================== */

    #skills .skill-category-title {
        color:
            #8bc0ff !important;

        text-shadow:
            0 0 18px rgba(70, 142, 232, .09) !important;
    }


    /* ======================================================
       TOP LIVE ACCENT
       ====================================================== */

    #skills .skill-category::before {
        width:
            78px !important;

        background:
            linear-gradient(
                90deg,
                rgba(91, 170, 255, .98),
                rgba(63, 137, 234, .44),
                transparent
            ) !important;

        animation:
            skillTopPulse
            3.6s ease-in-out
            infinite !important;
    }


    @keyframes skillTopPulse {

        0%,
        100% {
            opacity: .48;
            transform:
                scaleX(.76);
            transform-origin:
                left center;
        }

        45% {
            opacity: 1;
            transform:
                scaleX(1);
            transform-origin:
                left center;
        }

        65% {
            opacity: .78;
            transform:
                scaleX(.91);
            transform-origin:
                left center;
        }

    }


    /* ======================================================
       CHIP BASE
       ====================================================== */

    #skills .skill-chip {
        position:
            relative !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        min-height:
            39px !important;

        padding:
            9px 13px !important;

        border-radius:
            11px !important;

        color:
            #b5cae5 !important;

        font-size:
            .78rem !important;

        line-height:
            1.25 !important;

        font-weight:
            600 !important;

        background:
            linear-gradient(
                145deg,
                rgba(24, 64, 123, .39),
                rgba(9, 31, 66, .29)
            ) !important;

        border:
            1px solid
            rgba(67, 135, 224, .27) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 4px 12px rgba(0,0,0,.08) !important;

        will-change:
            transform,
            filter !important;
    }


    /* ======================================================
       NEW MOVEMENT
       Faster, stepped, not slow drifting
       ====================================================== */

    #skills .skill-chip:nth-child(4n+1) {
        animation:
            skillKineticA
            4.0s cubic-bezier(.45,0,.25,1)
            infinite !important;
    }


    #skills .skill-chip:nth-child(4n+2) {
        animation:
            skillKineticB
            4.4s cubic-bezier(.45,0,.25,1)
            infinite !important;
    }


    #skills .skill-chip:nth-child(4n+3) {
        animation:
            skillKineticC
            4.8s cubic-bezier(.45,0,.25,1)
            infinite !important;
    }


    #skills .skill-chip:nth-child(4n) {
        animation:
            skillKineticD
            4.3s cubic-bezier(.45,0,.25,1)
            infinite !important;
    }


    /* ======================================================
       MOTION A
       ====================================================== */

    @keyframes skillKineticA {

        0%,
        18% {
            transform:
                translate3d(0, 0, 0)
                scale(1);

            filter:
                brightness(1);
        }

        34% {
            transform:
                translate3d(4px, -3px, 0)
                scale(1.015);

            filter:
                brightness(1.08);
        }

        48% {
            transform:
                translate3d(2px, -1px, 0)
                scale(1.006);
        }

        67% {
            transform:
                translate3d(-2px, 2px, 0)
                scale(1.01);

            filter:
                brightness(1.04);
        }

        84%,
        100% {
            transform:
                translate3d(0, 0, 0)
                scale(1);

            filter:
                brightness(1);
        }

    }


    /* ======================================================
       MOTION B
       ====================================================== */

    @keyframes skillKineticB {

        0%,
        15% {
            transform:
                translate3d(0, 0, 0)
                scale(1);
        }

        30% {
            transform:
                translate3d(-4px, 2px, 0)
                scale(1.012);

            filter:
                brightness(1.07);
        }

        52% {
            transform:
                translate3d(-1px, -2px, 0)
                scale(1.006);
        }

        72% {
            transform:
                translate3d(3px, 1px, 0)
                scale(1.01);
        }

        88%,
        100% {
            transform:
                translate3d(0, 0, 0)
                scale(1);

            filter:
                brightness(1);
        }

    }


    /* ======================================================
       MOTION C
       ====================================================== */

    @keyframes skillKineticC {

        0%,
        20% {
            transform:
                translate3d(0, 0, 0)
                scale(1);
        }

        36% {
            transform:
                translate3d(3px, 3px, 0)
                scale(1.013);

            filter:
                brightness(1.08);
        }

        56% {
            transform:
                translate3d(-2px, 1px, 0)
                scale(1.006);
        }

        73% {
            transform:
                translate3d(1px, -3px, 0)
                scale(1.01);
        }

        88%,
        100% {
            transform:
                translate3d(0, 0, 0)
                scale(1);

            filter:
                brightness(1);
        }

    }


    /* ======================================================
       MOTION D
       ====================================================== */

    @keyframes skillKineticD {

        0%,
        17% {
            transform:
                translate3d(0, 0, 0)
                scale(1);
        }

        33% {
            transform:
                translate3d(-3px, -3px, 0)
                scale(1.014);

            filter:
                brightness(1.07);
        }

        51% {
            transform:
                translate3d(2px, -1px, 0)
                scale(1.007);
        }

        70% {
            transform:
                translate3d(-1px, 2px, 0)
                scale(1.01);
        }

        87%,
        100% {
            transform:
                translate3d(0, 0, 0)
                scale(1);

            filter:
                brightness(1);
        }

    }


    /* ======================================================
       DIFFERENT START POSITIONS
       Prevent synchronized motion
       ====================================================== */

    #skills .skill-chip:nth-child(2n) {
        animation-delay:
            -1.1s !important;
    }


    #skills .skill-chip:nth-child(3n) {
        animation-delay:
            -2.0s !important;
    }


    #skills .skill-chip:nth-child(5n) {
        animation-delay:
            -2.8s !important;
    }


    /* ======================================================
       TOUCH RESPONSE
       ====================================================== */

    #skills .skill-chip:active {
        animation:
            none !important;

        transform:
            translateY(-2px)
            scale(.94) !important;

        filter:
            brightness(1.12) !important;

        color:
            #96c9ff !important;

        border-color:
            rgba(96, 168, 255, .50) !important;

        background:
            rgba(31, 80, 151, .42) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #skills .skill-category::before,
    #skills .skill-chip {
        animation:
            none !important;

        transform:
            none !important;

        filter:
            none !important;
    }

}

/* ===== SKILLS MOBILE KINETIC FINAL END ===== */



/* ===== CERTIFICATIONS MOBILE INTERACTION START ===== */

@media (max-width: 700px) {

    /* ======================================================
       CARD BASE
       ====================================================== */

    #certifications .cert-card,
    #certifications .cert-card-compact,
    #certifications .certification-card {
        position: relative !important;

        overflow: hidden !important;

        transition:
            transform .22s cubic-bezier(.2,.75,.2,1),
            border-color .22s ease,
            box-shadow .22s ease,
            filter .22s ease !important;
    }


    /* ======================================================
       SUBTLE EDGE SWEEP
       ====================================================== */

    #certifications .cert-card::before,
    #certifications .cert-card-compact::before,
    #certifications .certification-card::before {
        content: '' !important;

        position: absolute !important;

        top: 0 !important;
        left: -45% !important;

        width: 38% !important;
        height: 1px !important;

        z-index: 5 !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(94, 170, 255, .78),
                transparent
            ) !important;

        opacity: 0 !important;

        pointer-events: none !important;

        animation:
            certEdgeSweep
            7.8s ease-in-out
            infinite !important;
    }


    @keyframes certEdgeSweep {

        0%,
        67% {
            left: -45%;
            opacity: 0;
        }

        72% {
            opacity: .85;
        }

        89% {
            left: 110%;
            opacity: .45;
        }

        94%,
        100% {
            left: 110%;
            opacity: 0;
        }

    }


    /* ======================================================
       COMPLETED BADGE
       ====================================================== */

    #certifications .cert-status,
    #certifications .completed-badge,
    #certifications .cert-completed {
        animation:
            certCompletedPulse
            3.8s ease-in-out
            infinite !important;
    }


    @keyframes certCompletedPulse {

        0%,
        100% {
            filter:
                brightness(1);

            transform:
                scale(1);
        }

        50% {
            filter:
                brightness(1.08);

            transform:
                scale(1.018);
        }

    }


    /* ======================================================
       ICON RESPONSE
       ====================================================== */

    #certifications .cert-icon,
    #certifications .cert-logo,
    #certifications .cert-badge-icon,
    #certifications .cert-card svg {
        transition:
            transform .20s ease,
            filter .20s ease !important;
    }


    /* ======================================================
       WATERMARK
       Hidden normally, visible on touch
       ====================================================== */

    #certifications .cert-watermark,
    #certifications .cert-card-watermark,
    #certifications .watermark {
        opacity:
            0 !important;

        transform:
            scale(.96) !important;

        transition:
            opacity .22s ease,
            transform .22s ease !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       TAP RESPONSE
       ====================================================== */

    #certifications .cert-card:active,
    #certifications .cert-card-compact:active,
    #certifications .certification-card:active {
        transform:
            translateY(-3px)
            scale(.985) !important;

        border-color:
            rgba(91, 158, 242, .42) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 12px 28px rgba(0,0,0,.18) !important;
    }


    #certifications .cert-card:active .cert-icon,
    #certifications .cert-card:active .cert-logo,
    #certifications .cert-card:active .cert-badge-icon,
    #certifications .cert-card:active svg,

    #certifications .cert-card-compact:active .cert-icon,
    #certifications .cert-card-compact:active .cert-logo,
    #certifications .cert-card-compact:active .cert-badge-icon,
    #certifications .cert-card-compact:active svg,

    #certifications .certification-card:active .cert-icon,
    #certifications .certification-card:active .cert-logo,
    #certifications .certification-card:active .cert-badge-icon,
    #certifications .certification-card:active svg {
        transform:
            scale(1.055) !important;

        filter:
            brightness(1.12)
            saturate(1.08) !important;
    }


    #certifications .cert-card:active .cert-watermark,
    #certifications .cert-card:active .cert-card-watermark,
    #certifications .cert-card:active .watermark,

    #certifications .cert-card-compact:active .cert-watermark,
    #certifications .cert-card-compact:active .cert-card-watermark,
    #certifications .cert-card-compact:active .watermark,

    #certifications .certification-card:active .cert-watermark,
    #certifications .certification-card:active .cert-card-watermark,
    #certifications .certification-card:active .watermark {
        opacity:
            .12 !important;

        transform:
            scale(1) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #certifications .cert-card::before,
    #certifications .cert-card-compact::before,
    #certifications .certification-card::before,

    #certifications .cert-status,
    #certifications .completed-badge,
    #certifications .cert-completed {
        animation:
            none !important;
    }

}

/* ===== CERTIFICATIONS MOBILE INTERACTION END ===== */



/* ===== CERTIFICATIONS MOBILE FINAL VISUAL POLISH START ===== */

@media (max-width: 700px) {

    /* ======================================================
       RICHER CERT CARD SURFACE
       ====================================================== */

    #certifications .cert-card,
    #certifications .cert-card-compact,
    #certifications .certification-card {
        background:

            radial-gradient(
                circle at 12% 8%,
                rgba(66, 148, 247, .16),
                transparent 34%
            ),

            radial-gradient(
                circle at 92% 92%,
                rgba(24, 75, 152, .08),
                transparent 40%
            ),

            linear-gradient(
                145deg,
                rgba(8, 24, 45, .98),
                rgba(4, 15, 29, .99)
            ) !important;

        border-color:
            rgba(62, 129, 216, .27) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            inset 0 -20px 34px rgba(0,0,0,.08),
            0 14px 30px rgba(0,0,0,.17) !important;
    }


    /* ======================================================
       ICON ZONE
       Slightly more premium / dimensional
       ====================================================== */

    #certifications .cert-icon,
    #certifications .cert-logo,
    #certifications .cert-badge-icon {
        position:
            relative !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            inset 0 -10px 18px rgba(0,0,0,.10),
            0 5px 14px rgba(0,0,0,.08) !important;

        filter:
            brightness(1.05)
            saturate(1.04) !important;
    }


    /* ======================================================
       TEXT HIERARCHY
       ====================================================== */

    #certifications .cert-issuer,
    #certifications .cert-provider,
    #certifications .cert-org {
        color:
            #8ea4c0 !important;
    }


    #certifications .cert-title,
    #certifications .cert-card h3,
    #certifications .certification-card h3 {
        color:
            #e5edf9 !important;

        text-shadow:
            0 0 18px
            rgba(75, 146, 236, .045) !important;
    }


    #certifications .cert-code,
    #certifications .cert-id,
    #certifications .cert-name-code {
        color:
            #82b8fb !important;
    }


    /* ======================================================
       COMPLETED BADGE
       Keep green but make it feel cleaner
       ====================================================== */

    #certifications .cert-status,
    #certifications .completed-badge,
    #certifications .cert-completed {
        background:
            linear-gradient(
                145deg,
                rgba(7, 70, 60, .36),
                rgba(4, 48, 43, .28)
            ) !important;

        border:
            1px solid rgba(39, 197, 153, .24) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 3px 10px rgba(0,0,0,.07) !important;
    }


    /* ======================================================
       TINY TOP EDGE DETAIL
       ====================================================== */

    #certifications .cert-card::after,
    #certifications .cert-card-compact::after,
    #certifications .certification-card::after {
        content: '' !important;

        position: absolute !important;

        top: 0 !important;
        left: 18px !important;

        width: 70px !important;
        height: 1px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(92, 166, 255, .72),
                transparent
            ) !important;

        opacity:
            .70 !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       TOUCH RESPONSE
       ====================================================== */

    #certifications .cert-card:active,
    #certifications .cert-card-compact:active,
    #certifications .certification-card:active {
        transform:
            translateY(-2px)
            scale(.986) !important;

        border-color:
            rgba(91, 158, 242, .42) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 10px 24px rgba(0,0,0,.16) !important;
    }

}

/* ===== CERTIFICATIONS MOBILE FINAL VISUAL POLISH END ===== */



















/* ===== CERTIFICATIONS REAL TAP INTERACTION START ===== */

@media (max-width: 700px) {

    #certifications .cert-final-card {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate !important;

        transform-style: preserve-3d !important;

        transition:
            transform .22s cubic-bezier(.2,.75,.2,1),
            border-color .22s ease,
            box-shadow .22s ease,
            filter .22s ease !important;
    }


    /* ======================================================
       PERIMETER TRACE SYSTEM
       ====================================================== */

    #certifications .cert-trace-svg {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 8 !important;

        pointer-events: none !important;

        overflow: visible !important;
    }


    #certifications .cert-trace-svg rect {
        fill: none !important;

        stroke:
            rgba(103, 176, 255, .96) !important;

        stroke-width:
            1.35 !important;

        vector-effect:
            non-scaling-stroke !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;

        /*
           Hidden by default.
           JS triggers the dash animation.
        */
        stroke-dasharray:
            1 !important;

        stroke-dashoffset:
            1 !important;

        opacity:
            0 !important;
    }


    #certifications .cert-final-card.cert-real-active
    .cert-trace-svg rect {
        animation:
            certPerimeterRun
            .92s cubic-bezier(.35,.1,.2,1)
            1 !important;
    }


    @keyframes certPerimeterRun {

        0% {
            stroke-dashoffset: 1;
            opacity: 0;
            filter:
                drop-shadow(
                    0 0 0 rgba(82, 156, 244, 0)
                );
        }

        8% {
            opacity: 1;
        }

        42% {
            filter:
                drop-shadow(
                    0 0 4px rgba(82, 156, 244, .38)
                );
        }

        82% {
            stroke-dashoffset: 0;
            opacity: 1;
        }

        100% {
            stroke-dashoffset: 0;
            opacity: 0;

            filter:
                drop-shadow(
                    0 0 0 rgba(82, 156, 244, 0)
                );
        }

    }


    /* ======================================================
       CARD RESPONSE
       ====================================================== */

    #certifications .cert-final-card.cert-real-active {
        transform:
            perspective(850px)
            rotateX(1.2deg)
            rotateY(-1.8deg)
            translateY(-3px)
            scale(.987) !important;

        border-color:
            rgba(101, 171, 255, .42) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            0 16px 34px rgba(0,0,0,.21) !important;

        filter:
            brightness(1.028) !important;
    }


    /* ======================================================
       ICON POP
       ====================================================== */

    #certifications .cert-final-card.cert-real-active
    .cert-final-icon {
        animation:
            certFinalIconPop
            .52s ease-out
            1 !important;
    }


    @keyframes certFinalIconPop {

        0% {
            transform: scale(1);
            filter: brightness(1);
        }

        48% {
            transform: scale(1.085);

            filter:
                brightness(1.17)
                saturate(1.08);
        }

        100% {
            transform: scale(1);

            filter:
                brightness(1.04);
        }

    }


    /* ======================================================
       COMPLETED BADGE PULSE
       ====================================================== */

    #certifications .cert-final-card.cert-real-active
    .cert-final-status {
        animation:
            certFinalStatusPulse
            .60s ease-out
            1 !important;
    }


    @keyframes certFinalStatusPulse {

        0% {
            transform: scale(1);
            filter: brightness(1);
        }

        42% {
            transform: scale(1.065);
            filter: brightness(1.20);
        }

        100% {
            transform: scale(1);
            filter: brightness(1);
        }

    }


    /* ======================================================
       WATERMARK
       ====================================================== */

    #certifications .cert-final-watermark {
        transition:
            opacity .22s ease,
            transform .22s ease,
            filter .22s ease !important;
    }


    #certifications .cert-final-card.cert-real-active
    .cert-final-watermark {
        opacity:
            .10 !important;

        transform:
            scale(1.02)
            rotate(-2deg) !important;

        filter:
            brightness(1.10) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #certifications .cert-final-card,
    #certifications .cert-final-icon,
    #certifications .cert-final-status,
    #certifications .cert-final-watermark,
    #certifications .cert-trace-svg rect {
        animation:
            none !important;

        transition:
            none !important;
    }

}

/* ===== CERTIFICATIONS REAL TAP INTERACTION END ===== */



/* ===== CERTIFICATIONS WATERMARK REVEAL START ===== */

@media (max-width: 700px) {

    #certifications .cert-final-watermark {
        opacity: 0 !important;

        transform:
            scale(.96)
            rotate(-3deg) !important;

        filter:
            brightness(.95) !important;

        transition:
            opacity .22s ease,
            transform .28s cubic-bezier(.2,.75,.2,1),
            filter .22s ease !important;

        pointer-events:
            none !important;
    }


    #certifications
    .cert-final-card.cert-real-active
    .cert-final-watermark {
        opacity:
            .12 !important;

        transform:
            scale(1.03)
            rotate(-2deg) !important;

        filter:
            brightness(1.12) !important;
    }

}


/* Reduced motion */
@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #certifications .cert-final-watermark {
        transition:
            none !important;
    }

}

/* ===== CERTIFICATIONS WATERMARK REVEAL END ===== */



/* ===== CERTIFICATIONS DOUBLE PULSE FINAL START ===== */

@media (max-width: 700px) {

    /* ======================================================
       DOUBLE BORDER TRACE
       ====================================================== */

    #certifications
    .cert-final-card.cert-real-active
    .cert-trace-svg rect {
        animation:
            certPerimeterDouble
            1.45s cubic-bezier(.35,.1,.2,1)
            1 !important;
    }


    @keyframes certPerimeterDouble {

        /* first trace */
        0% {
            stroke-dashoffset: 1;
            opacity: 0;
        }

        5% {
            opacity: 1;
        }

        35% {
            stroke-dashoffset: 0;
            opacity: 1;
        }

        43% {
            stroke-dashoffset: 0;
            opacity: 0;
        }

        /* reset quickly */
        44% {
            stroke-dashoffset: 1;
            opacity: 0;
        }

        /* second trace */
        50% {
            opacity: 1;
        }

        82% {
            stroke-dashoffset: 0;
            opacity: 1;
        }

        100% {
            stroke-dashoffset: 0;
            opacity: 0;
        }

    }


    /* ======================================================
       DOUBLE ICON PULSE
       ====================================================== */

    #certifications
    .cert-final-card.cert-real-active
    .cert-final-icon {
        animation:
            certIconDoublePulse
            1.15s ease-in-out
            1 !important;
    }


    @keyframes certIconDoublePulse {

        0% {
            transform: scale(1);
            filter: brightness(1);
        }

        18% {
            transform: scale(1.08);
            filter:
                brightness(1.17)
                saturate(1.08);
        }

        34% {
            transform: scale(1);
            filter: brightness(1.03);
        }

        56% {
            transform: scale(1.075);
            filter:
                brightness(1.15)
                saturate(1.06);
        }

        74% {
            transform: scale(1);
            filter: brightness(1.03);
        }

        100% {
            transform: scale(1);
            filter: brightness(1.03);
        }

    }


    /* ======================================================
       DOUBLE COMPLETED PULSE
       ====================================================== */

    #certifications
    .cert-final-card.cert-real-active
    .cert-final-status {
        animation:
            certStatusDoublePulse
            1.15s ease-in-out
            1 !important;
    }


    @keyframes certStatusDoublePulse {

        0% {
            transform: scale(1);
            filter: brightness(1);
        }

        18% {
            transform: scale(1.065);
            filter: brightness(1.22);
        }

        34% {
            transform: scale(1);
            filter: brightness(1);
        }

        56% {
            transform: scale(1.06);
            filter: brightness(1.18);
        }

        74% {
            transform: scale(1);
            filter: brightness(1);
        }

        100% {
            transform: scale(1);
            filter: brightness(1);
        }

    }


    /* ======================================================
       KEEP CARD ACTIVE LONG ENOUGH TO NOTICE
       ====================================================== */

    #certifications .cert-final-card.cert-real-active {
        transform:
            perspective(850px)
            rotateX(1.2deg)
            rotateY(-1.8deg)
            translateY(-3px)
            scale(.987) !important;

        border-color:
            rgba(101, 171, 255, .46) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            0 16px 34px rgba(0,0,0,.21) !important;
    }

}

/* ===== CERTIFICATIONS DOUBLE PULSE FINAL END ===== */







/* ===== BEYOND IT MOBILE PREMIUM SPORT START ===== */

@media (max-width: 700px) {

    /* ======================================================
       SECTION
       ====================================================== */

    #beyond-it {
        position: relative !important;

        padding-top: 56px !important;
        padding-bottom: 66px !important;

        overflow: hidden !important;

        background:
            radial-gradient(
                circle at 10% 42%,
                rgba(41, 102, 201, .055),
                transparent 28%
            ),
            radial-gradient(
                circle at 95% 71%,
                rgba(37, 91, 180, .045),
                transparent 26%
            ),
            #030711 !important;
    }


    #beyond-it .section-title {
        margin-bottom: 46px !important;
    }


    #beyond-it .beyond-it-feature {
        display: flex !important;
        flex-direction: column !important;

        gap: 38px !important;
    }


    /* ======================================================
       COPY
       ====================================================== */

    #beyond-it .beyond-it-eyebrow {
        display: inline-block !important;

        margin-bottom: 14px !important;

        color: #438dff !important;

        font-size: .69rem !important;
        font-weight: 850 !important;

        letter-spacing: .16em !important;

        text-transform: uppercase !important;
    }


    #beyond-it .beyond-it-copy h3 {
        margin: 0 0 24px !important;

        color: #f1f5fb !important;

        font-size: 2rem !important;
        line-height: 1.04 !important;

        font-weight: 850 !important;
    }


    #beyond-it .beyond-it-copy > p {
        margin-bottom: 19px !important;

        color: #a4b4ca !important;

        font-size: .96rem !important;
        line-height: 1.77 !important;
    }


    /* ======================================================
       QUALITY GRID
       ====================================================== */

    #beyond-it .soccer-stats {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        margin-top: 30px !important;
    }


    #beyond-it .soccer-stat {
        position: relative !important;

        min-height: 122px !important;

        padding: 19px 13px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        border-radius: 18px !important;

        overflow: hidden !important;
        isolation: isolate !important;

        background:
            radial-gradient(
                circle at 25% 0%,
                rgba(73, 151, 255, .19),
                transparent 42%
            ),
            linear-gradient(
                155deg,
                rgba(10, 31, 58, .99),
                rgba(4, 17, 34, .995)
            ) !important;

        border:
            1px solid rgba(64, 137, 229, .34) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            inset 0 -20px 36px rgba(0,0,0,.08),
            0 12px 25px rgba(0,0,0,.17) !important;

        transition:
            transform .23s cubic-bezier(.2,.8,.2,1),
            border-color .23s ease,
            box-shadow .23s ease,
            filter .23s ease !important;
    }


    #beyond-it .soccer-stat:nth-child(3) {
        grid-column: 1 / -1 !important;

        min-height: 108px !important;
    }


    /* ======================================================
       MOVING STADIUM LIGHT
       ====================================================== */

    #beyond-it .soccer-stat::before {
        content: '' !important;

        position: absolute !important;

        width: 105px !important;
        height: 175% !important;

        top: -38% !important;
        left: -110px !important;

        z-index: 0 !important;

        transform:
            rotate(18deg) !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(74, 150, 255, .02),
                rgba(104, 177, 255, .16),
                rgba(74, 150, 255, .03),
                transparent
            ) !important;

        filter:
            blur(3px) !important;

        animation:
            soccerLightSweep
            4.4s ease-in-out
            infinite !important;

        pointer-events: none !important;
    }


    #beyond-it .soccer-stat:nth-child(2)::before {
        animation-delay:
            -1.45s !important;
    }


    #beyond-it .soccer-stat:nth-child(3)::before {
        animation-delay:
            -2.6s !important;
    }


    @keyframes soccerLightSweep {

        0%,
        25% {
            left: -110px;
            opacity: 0;
        }

        32% {
            opacity: 1;
        }

        68% {
            opacity: .72;
        }

        78%,
        100% {
            left: calc(100% + 45px);
            opacity: 0;
        }
    }


    /* animated edge accent */
    #beyond-it .soccer-stat::after {
        content: '' !important;

        position: absolute !important;

        left: 22px !important;
        top: 0 !important;

        width: 72px !important;
        height: 2px !important;

        border-radius: 999px !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                90deg,
                #61a7ff,
                rgba(61, 167, 255, .28),
                transparent
            ) !important;

        animation:
            soccerEdgeBreath
            2.8s ease-in-out
            infinite !important;
    }


    @keyframes soccerEdgeBreath {

        0%,
        100% {
            opacity: .48;
            transform: scaleX(.72);
            transform-origin: left center;
        }

        50% {
            opacity: 1;
            transform: scaleX(1);
            transform-origin: left center;
        }
    }


    #beyond-it .soccer-stat strong,
    #beyond-it .soccer-stat span {
        position: relative !important;
        z-index: 3 !important;
    }


    #beyond-it .soccer-stat strong {
        color: #82b7ff !important;

        font-size: 1.04rem !important;
        line-height: 1.18 !important;

        font-weight: 850 !important;

        text-shadow:
            0 0 18px rgba(67, 142, 238, .10) !important;
    }


    #beyond-it .soccer-stat span {
        margin-top: 8px !important;

        max-width: 145px !important;

        color: #a1b3ca !important;

        font-size: .72rem !important;
        line-height: 1.38 !important;

        font-weight: 650 !important;
    }


    #beyond-it .soccer-stat:nth-child(3) span {
        max-width: 220px !important;
    }


    /* ======================================================
       QUALITY CARD TAP
       ====================================================== */

    #beyond-it .soccer-stat.soccer-stat-active {
        transform:
            translateY(-4px)
            scale(.975) !important;

        border-color:
            rgba(96, 165, 255, .58) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.055),
            0 16px 31px rgba(0,0,0,.21) !important;

        filter:
            brightness(1.06) !important;
    }


    #beyond-it
    .soccer-stat.soccer-stat-active
    strong {
        animation:
            soccerTitlePop
            .48s ease-out
            1 !important;
    }


    @keyframes soccerTitlePop {

        0% {
            transform: scale(1);
        }

        48% {
            transform: scale(1.075);
        }

        100% {
            transform: scale(1);
        }
    }


    /* ======================================================
       BUTTON
       ====================================================== */

    #beyond-it .soccer-more-btn {
        position: relative !important;

        width: 100% !important;

        min-height: 54px !important;

        margin-top: 27px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 15px !important;

        color: #80b2f3 !important;

        font-size: .90rem !important;
        font-weight: 750 !important;

        opacity: 1 !important;

        background:
            linear-gradient(
                145deg,
                rgba(18, 47, 88, .38),
                rgba(7, 24, 48, .38)
            ) !important;

        border:
            1px solid rgba(73, 142, 233, .42) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 8px 18px rgba(0,0,0,.11) !important;
    }


    #beyond-it .soccer-coming-soon {
        margin-top: 12px !important;
        margin-bottom: 0 !important;

        color: #71849e !important;

        font-size: .74rem !important;
        line-height: 1.45 !important;
    }


    /* ======================================================
       SMALL PHONE
       ====================================================== */

    @media (max-width: 355px) {

        #beyond-it .soccer-stat {
            min-height: 116px !important;

            padding:
                17px 10px !important;
        }

        #beyond-it .soccer-stat strong {
            font-size:
                .96rem !important;
        }

        #beyond-it .beyond-it-photo-card {
            height:
                460px !important;
        }

    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #beyond-it .soccer-stat,
    #beyond-it .soccer-stat::before,
    #beyond-it .soccer-stat::after,
    #beyond-it .beyond-it-photo-card::before,
    #beyond-it .photo-frame img {
        animation:
            none !important;
    }

}

/* ===== BEYOND IT MOBILE PREMIUM SPORT END ===== */



































/* ===== SOCCER QUALITY TRACER FINAL START ===== */

@media (max-width: 700px) {

    #beyond-it .soccer-stat {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate !important;

        background:
            radial-gradient(
                circle at 18% 8%,
                rgba(66, 145, 249, .20),
                transparent 42%
            ),
            radial-gradient(
                circle at 88% 88%,
                rgba(32, 83, 165, .08),
                transparent 42%
            ),
            linear-gradient(
                150deg,
                rgba(9, 29, 57, .995),
                rgba(4, 15, 31, .998)
            ) !important;

        border:
            1px solid rgba(69, 142, 235, .38) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            inset 0 -24px 42px rgba(0,0,0,.07),
            0 12px 26px rgba(0,0,0,.17) !important;

        transition:
            transform .24s cubic-bezier(.2,.8,.2,1),
            border-color .24s ease,
            box-shadow .24s ease,
            filter .24s ease !important;
    }


    /* remove unwanted old decorative top line */
    #beyond-it .soccer-stat::after {
        content: none !important;
        display: none !important;
        animation: none !important;
    }


    /* ======================================================
       SUBTLE MOVING BLUE DEPTH INSIDE
       ====================================================== */

    #beyond-it .soccer-stat::before {
        content: '' !important;

        position: absolute !important;

        width: 185px !important;
        height: 150px !important;

        left: -72px !important;
        top: -52px !important;

        z-index: 0 !important;

        border-radius:
            45% 55% 61% 39% /
            52% 43% 57% 48% !important;

        background:
            radial-gradient(
                ellipse at center,
                rgba(70, 148, 255, .25) 0%,
                rgba(45, 108, 205, .12) 42%,
                transparent 72%
            ) !important;

        filter:
            blur(13px) !important;

        opacity:
            .84 !important;

        pointer-events:
            none !important;

        animation:
            soccerLightA
            5.4s ease-in-out
            infinite alternate !important;
    }


    #beyond-it .soccer-stat:nth-child(2)::before {
        animation-name:
            soccerLightB !important;

        animation-duration:
            6s !important;
    }


    #beyond-it .soccer-stat:nth-child(3)::before {
        animation-name:
            soccerLightC !important;

        animation-duration:
            6.5s !important;
    }


    @keyframes soccerLightA {

        from {
            transform:
                translate3d(-10px, 0, 0)
                scale(.94);
        }

        to {
            transform:
                translate3d(110px, 38px, 0)
                scale(1.10);
        }

    }


    @keyframes soccerLightB {

        from {
            transform:
                translate3d(100px, -8px, 0)
                scale(.95);
        }

        to {
            transform:
                translate3d(-28px, 44px, 0)
                scale(1.10);
        }

    }


    @keyframes soccerLightC {

        from {
            transform:
                translate3d(-18px, 4px, 0)
                scale(.96);
        }

        to {
            transform:
                translate3d(205px, 30px, 0)
                scale(1.08);
        }

    }


    /* ======================================================
       TEXT
       ====================================================== */

    #beyond-it .soccer-stat strong,
    #beyond-it .soccer-stat span {
        position: relative !important;
        z-index: 5 !important;
    }


    #beyond-it .soccer-stat strong {
        color:
            #84b8fb !important;

        text-shadow:
            0 1px 0 rgba(255,255,255,.025),
            0 0 15px rgba(70,145,238,.10) !important;
    }


    /* ======================================================
       REAL SVG TRACER
       ====================================================== */

    #beyond-it .soccer-border-svg {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        z-index: 8 !important;

        pointer-events: none !important;

        overflow: visible !important;
    }


    #beyond-it .soccer-border-path {
        fill: none !important;

        stroke:
            rgba(115, 187, 255, .96) !important;

        stroke-width:
            1.55 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;

        opacity:
            .90 !important;

        filter:
            drop-shadow(
                0 0 2px rgba(153,210,255,.58)
            )
            drop-shadow(
                0 0 5px rgba(72,151,242,.30)
            ) !important;

        animation:
            soccerTracerMove
            var(--soccer-trace-speed, 4.4s)
            linear
            infinite !important;
    }


    @keyframes soccerTracerMove {

        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset:
                var(--soccer-trace-length, -600);
        }

    }


    /* different normal speeds */
    #beyond-it .soccer-stat:nth-child(1) {
        --soccer-trace-speed: 4.1s;
    }

    #beyond-it .soccer-stat:nth-child(2) {
        --soccer-trace-speed: 4.8s;
    }

    #beyond-it .soccer-stat:nth-child(3) {
        --soccer-trace-speed: 5.4s;
    }


    /* ======================================================
       ACTIVE / TAP — FIVE SECONDS
       ====================================================== */

    #beyond-it .soccer-stat.soccer-stat-active {
        animation:
            soccerCardSettle
            .55s cubic-bezier(.2,.8,.2,1)
            1 !important;

        transform:
            perspective(850px)
            rotateX(1.05deg)
            rotateY(-1.25deg)
            translateY(-4px)
            scale(.979) !important;

        border-color:
            rgba(104, 176, 255, .68) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06),
            0 18px 34px rgba(0,0,0,.23) !important;

        filter:
            brightness(1.065) !important;
    }


    @keyframes soccerCardSettle {

        0% {
            transform:
                translateY(0)
                scale(1);
        }

        42% {
            transform:
                perspective(850px)
                rotateX(1.15deg)
                rotateY(-1.3deg)
                translateY(-5px)
                scale(.974);
        }

        68% {
            transform:
                perspective(850px)
                rotateX(.7deg)
                rotateY(-.8deg)
                translateY(-2px)
                scale(.986);
        }

        100% {
            transform:
                perspective(850px)
                rotateX(1.05deg)
                rotateY(-1.25deg)
                translateY(-4px)
                scale(.979);
        }

    }


    #beyond-it
    .soccer-stat.soccer-stat-active
    .soccer-border-path {

        animation-duration:
            .95s !important;

        stroke:
            rgba(142, 204, 255, 1) !important;

        stroke-width:
            1.8 !important;

        opacity:
            1 !important;

        filter:
            drop-shadow(
                0 0 2px rgba(181,222,255,.88)
            )
            drop-shadow(
                0 0 6px rgba(85,166,255,.56)
            )
            drop-shadow(
                0 0 10px rgba(56,128,220,.22)
            ) !important;
    }


    #beyond-it
    .soccer-stat.soccer-stat-active
    strong {

        color:
            #a2cfff !important;

        text-shadow:
            0 0 15px rgba(94,169,255,.20) !important;

        animation:
            soccerTitleReaction
            .50s ease-out
            1 !important;
    }


    @keyframes soccerTitleReaction {

        0% {
            transform:
                translateY(0)
                scale(1);
        }

        45% {
            transform:
                translateY(-2px)
                scale(1.06);
        }

        100% {
            transform:
                translateY(0)
                scale(1);
        }

    }


    #beyond-it
    .soccer-stat.soccer-stat-active::before {

        opacity:
            1 !important;

        filter:
            blur(9px)
            brightness(1.20) !important;
    }

}


/* reduced motion */
@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #beyond-it .soccer-stat::before,
    #beyond-it .soccer-border-path,
    #beyond-it .soccer-stat.soccer-stat-active {

        animation:
            none !important;
    }

}

/* ===== SOCCER QUALITY TRACER FINAL END ===== */











/* ===== BEYOND IT PHOTO FEATURE V2 START ===== */

@media (max-width: 700px) {

    /* ======================================================
       PHOTO CARD
       ====================================================== */

    #beyond-it .beyond-it-photo-card {
        position: relative !important;

        width: 100% !important;
        height: 455px !important;

        overflow: hidden !important;
        isolation: isolate !important;

        border-radius: 23px !important;

        background: #06101e !important;

        border:
            1px solid rgba(73, 143, 232, .40) !important;

        box-shadow:
            0 22px 46px rgba(0,0,0,.29),
            inset 0 1px 0 rgba(255,255,255,.04) !important;

        transform-style: preserve-3d !important;

        transition:
            transform .32s cubic-bezier(.2,.8,.2,1),
            border-color .32s ease,
            box-shadow .32s ease !important;
    }


    /* ======================================================
       IMAGE
       ====================================================== */

    #beyond-it .photo-frame {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;

        border-radius: inherit !important;
    }


    #beyond-it .photo-frame img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: 50% 46% !important;

        transform:
            scale(1.025) !important;

        animation:
            beyondPhotoFloatV2
            9s ease-in-out
            infinite alternate !important;

        transition:
            transform .55s cubic-bezier(.2,.8,.2,1),
            filter .38s ease !important;
    }


    @keyframes beyondPhotoFloatV2 {

        from {
            transform:
                scale(1.025)
                translate3d(0, 0, 0);
        }

        to {
            transform:
                scale(1.06)
                translate3d(0, -5px, 0);
        }

    }


    /* ======================================================
       IMAGE DEPTH
       ====================================================== */

    #beyond-it .photo-frame::after {
        content: '' !important;

        position: absolute !important;

        inset: 0 !important;

        z-index: 3 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                to bottom,
                rgba(2,7,14,.03) 0%,
                rgba(2,7,14,0) 42%,
                rgba(3,9,18,.08) 58%,
                rgba(3,9,18,.38) 78%,
                rgba(3,9,18,.74) 100%
            ) !important;
    }


    /* ======================================================
       SLOW DIAGONAL LIGHT THROUGH PHOTO
       ====================================================== */

    #beyond-it .beyond-it-photo-card::before {
        content: '' !important;

        position: absolute !important;

        width: 150px !important;
        height: 145% !important;

        left: -190px !important;
        top: -20% !important;

        z-index: 4 !important;

        transform:
            rotate(15deg) !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(79, 153, 246, .015),
                rgba(103, 175, 255, .09),
                rgba(79, 153, 246, .015),
                transparent
            ) !important;

        filter:
            blur(5px) !important;

        pointer-events:
            none !important;

        animation:
            beyondPhotoSweepV2
            7.5s ease-in-out
            infinite !important;
    }


    @keyframes beyondPhotoSweepV2 {

        0%,
        23% {
            left: -190px;
            opacity: 0;
        }

        32% {
            opacity: .85;
        }

        72% {
            opacity: .55;
        }

        82%,
        100% {
            left: calc(100% + 100px);
            opacity: 0;
        }

    }


    /* ======================================================
       FLOATING GLASS CAPTION
       ====================================================== */

    #beyond-it .photo-caption {
        position: absolute !important;

        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;

        z-index: 7 !important;

        padding:
            15px 16px 16px 17px !important;

        border-radius:
            16px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 17, 32, .70),
                rgba(4, 14, 28, .54)
            ) !important;

        border:
            1px solid rgba(103, 160, 230, .18) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 10px 26px rgba(0,0,0,.18) !important;

        backdrop-filter:
            blur(9px)
            saturate(112%) !important;

        -webkit-backdrop-filter:
            blur(9px)
            saturate(112%) !important;

        transition:
            transform .30s cubic-bezier(.2,.8,.2,1),
            border-color .30s ease,
            background .30s ease !important;
    }


    /* small vertical accent */
    #beyond-it .photo-caption::before {
        content: '' !important;

        position: absolute !important;

        left: 0 !important;
        top: 15px !important;

        width: 2px !important;
        height: 34px !important;

        border-radius:
            0 999px 999px 0 !important;

        background:
            linear-gradient(
                to bottom,
                rgba(110, 181, 255, .92),
                rgba(62, 126, 218, .22)
            ) !important;

        pointer-events:
            none !important;
    }


    #beyond-it .photo-caption span {
        display: inline-flex !important;

        align-items: center !important;

        min-height: 22px !important;

        margin-bottom: 8px !important;

        padding:
            4px 8px !important;

        border-radius:
            999px !important;

        color:
            #78b3ff !important;

        background:
            rgba(45, 111, 204, .12) !important;

        border:
            1px solid rgba(91, 158, 240, .18) !important;

        font-size:
            .62rem !important;

        font-weight:
            850 !important;

        line-height:
            1 !important;

        letter-spacing:
            .13em !important;

        text-transform:
            uppercase !important;
    }


    #beyond-it .photo-caption strong {
        display: block !important;

        max-width: 290px !important;

        margin: 0 !important;

        color:
            #f3f7fc !important;

        font-size:
            .96rem !important;

        font-weight:
            760 !important;

        line-height:
            1.42 !important;

        text-shadow:
            0 2px 12px rgba(0,0,0,.38) !important;
    }


    /* ======================================================
       TAP STATE
       ====================================================== */

    #beyond-it
    .beyond-it-photo-card.beyond-photo-active {
        transform:
            perspective(900px)
            rotateX(1.3deg)
            rotateY(-1.8deg)
            translateY(-4px)
            scale(.985) !important;

        border-color:
            rgba(103, 174, 255, .62) !important;

        box-shadow:
            0 28px 52px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.055) !important;
    }


    #beyond-it
    .beyond-it-photo-card.beyond-photo-active
    .photo-frame img {
        animation:
            none !important;

        transform:
            scale(1.085)
            translateY(-5px) !important;

        filter:
            brightness(1.065)
            contrast(1.035)
            saturate(1.035) !important;
    }


    #beyond-it
    .beyond-it-photo-card.beyond-photo-active
    .photo-caption {
        transform:
            translateY(-5px)
            scale(1.012) !important;

        border-color:
            rgba(102, 169, 248, .30) !important;

        background:
            linear-gradient(
                145deg,
                rgba(7, 22, 42, .78),
                rgba(5, 16, 31, .62)
            ) !important;
    }

}


/* ==========================================================
   VERY SMALL PHONE
   ========================================================== */

@media (max-width: 355px) {

    #beyond-it .beyond-it-photo-card {
        height:
            430px !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #beyond-it .photo-frame img,
    #beyond-it .beyond-it-photo-card::before {
        animation:
            none !important;
    }

}

/* ===== BEYOND IT PHOTO FEATURE V2 END ===== */



/* ===== BEYOND IT PHOTO FINAL POLISH START ===== */

@media (max-width: 700px) {

    /* slightly more photo visible */
    #beyond-it .beyond-it-photo-card {
        height:
            440px !important;
    }


    /* smaller, lighter caption panel */
    #beyond-it .photo-caption {
        left:
            18px !important;

        right:
            18px !important;

        bottom:
            14px !important;

        padding:
            12px 14px 13px 15px !important;

        border-radius:
            14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 17, 32, .60),
                rgba(4, 14, 28, .43)
            ) !important;

        backdrop-filter:
            blur(7px)
            saturate(108%) !important;

        -webkit-backdrop-filter:
            blur(7px)
            saturate(108%) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 8px 20px rgba(0,0,0,.14) !important;
    }


    #beyond-it .photo-caption::before {
        top:
            13px !important;

        height:
            30px !important;
    }


    #beyond-it .photo-caption span {
        min-height:
            20px !important;

        margin-bottom:
            6px !important;

        padding:
            3px 7px !important;

        font-size:
            .59rem !important;
    }


    #beyond-it .photo-caption strong {
        max-width:
            270px !important;

        font-size:
            .91rem !important;

        line-height:
            1.38 !important;
    }


    /* tighten end of Beyond IT section */
    #beyond-it {
        padding-bottom:
            34px !important;
    }


    #contact {
        padding-top:
            38px !important;
    }

}


@media (max-width: 355px) {

    #beyond-it .beyond-it-photo-card {
        height:
            418px !important;
    }

}

/* ===== BEYOND IT PHOTO FINAL POLISH END ===== */



/* ===== BEYOND IT CAPTION SLIM FINAL START ===== */

@media (max-width: 700px) {

    #beyond-it .photo-caption {
        left: 18px !important;
        right: 18px !important;
        bottom: 14px !important;

        padding:
            10px 13px 11px 14px !important;

        border-radius:
            13px !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 17, 32, .54),
                rgba(4, 14, 28, .38)
            ) !important;

        backdrop-filter:
            blur(6px)
            saturate(106%) !important;

        -webkit-backdrop-filter:
            blur(6px)
            saturate(106%) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 7px 18px rgba(0,0,0,.12) !important;
    }

    #beyond-it .photo-caption::before {
        top: 11px !important;
        height: 27px !important;
    }

    #beyond-it .photo-caption span {
        min-height: 18px !important;
        margin-bottom: 5px !important;

        padding:
            3px 7px !important;

        font-size:
            .57rem !important;
    }

    #beyond-it .photo-caption strong {
        max-width:
            260px !important;

        font-size:
            .88rem !important;

        line-height:
            1.34 !important;
    }

}

/* ===== BEYOND IT CAPTION SLIM FINAL END ===== */











/* ===== BEYOND IT CONTACT SPACING FINAL START ===== */

@media (max-width: 700px) {

    #beyond-it {
        padding-bottom: 18px !important;
    }

    #contact {
        padding-top: 24px !important;
    }

}

/* ===== BEYOND IT CONTACT SPACING FINAL END ===== */



/* ===== MOBILE NAV VIEWPORT FIX START ===== */

@media (max-width: 900px) {

    .nav-menu {
        position: fixed !important;

        top: 70px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            rgba(8, 18, 34, .985) !important;

        border-bottom:
            1px solid rgba(74, 124, 189, .20) !important;

        opacity: 0 !important;

        pointer-events: none !important;

        transition:
            height .30s ease,
            opacity .22s ease,
            padding .30s ease !important;

        z-index: 999 !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 70px) !important;

        max-height:
            calc(100dvh - 70px) !important;

        padding:
            18px 0 24px !important;

        overflow-y:
            auto !important;

        overflow-x:
            hidden !important;

        -webkit-overflow-scrolling:
            touch !important;

        opacity:
            1 !important;

        pointer-events:
            auto !important;
    }


    .nav-menu li {
        width:
            100% !important;
    }


    .nav-link {
        display:
            block !important;

        width:
            100% !important;

        padding:
            15px 24px !important;
    }


    .cta-nav {
        width:
            calc(100% - 48px) !important;

        margin:
            14px 24px 8px !important;

        text-align:
            center !important;
    }

}

/* fallback for browsers without dynamic viewport units */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 70px) !important;

            max-height:
                calc(100vh - 70px) !important;
        }

    }

}

/* ===== MOBILE NAV VIEWPORT FIX END ===== */



/* ===== MOBILE NAV PREMIUM FINAL START ===== */

@media (max-width: 900px) {

    /* ------------------------------------------------------
       NAVBAR
       ------------------------------------------------------ */

    .navbar {
        background:
            rgba(4, 12, 24, .97) !important;

        border-bottom:
            1px solid rgba(70, 129, 204, .17) !important;

        box-shadow:
            0 8px 26px rgba(0,0,0,.15) !important;

        backdrop-filter:
            blur(16px)
            saturate(115%) !important;

        -webkit-backdrop-filter:
            blur(16px)
            saturate(115%) !important;
    }


    .nav-container {
        min-height:
            70px !important;

        padding:
            0 24px !important;
    }


    /* ------------------------------------------------------
       HAMBURGER / CLOSE BUTTON
       ------------------------------------------------------ */

    .nav-toggle {
        position:
            relative !important;

        width:
            44px !important;

        height:
            44px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            5px !important;

        padding:
            0 !important;

        border-radius:
            13px !important;

        background:
            rgba(15, 35, 62, .20) !important;

        border:
            1px solid rgba(91, 151, 226, .10) !important;

        transition:
            background .22s ease,
            border-color .22s ease,
            transform .22s ease !important;
    }


    .nav-toggle span {
        position:
            absolute !important;

        width:
            25px !important;

        height:
            2px !important;

        border-radius:
            999px !important;

        background:
            #e7eef8 !important;

        transition:
            transform .32s cubic-bezier(.2,.8,.2,1),
            opacity .20s ease !important;
    }


    .nav-toggle span:nth-child(1) {
        transform:
            translateY(-7px) !important;
    }

    .nav-toggle span:nth-child(2) {
        transform:
            translateY(0) !important;
    }

    .nav-toggle span:nth-child(3) {
        transform:
            translateY(7px) !important;
    }


    .nav-toggle.active {
        background:
            rgba(25, 68, 120, .20) !important;

        border-color:
            rgba(93, 165, 255, .22) !important;
    }


    .nav-toggle.active span:nth-child(1) {
        transform:
            rotate(45deg) !important;
    }

    .nav-toggle.active span:nth-child(2) {
        opacity:
            0 !important;

        transform:
            scaleX(.2) !important;
    }

    .nav-toggle.active span:nth-child(3) {
        transform:
            rotate(-45deg) !important;
    }


    /* ------------------------------------------------------
       FULL MOBILE MENU
       ------------------------------------------------------ */

    .nav-menu {
        position:
            fixed !important;

        top:
            70px !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        height:
            0 !important;

        max-height:
            0 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap:
            7px !important;

        margin:
            0 !important;

        padding:
            0 20px !important;

        overflow:
            hidden !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;

        background:
            radial-gradient(
                circle at 90% 6%,
                rgba(37, 99, 235, .12),
                transparent 35%
            ),
            radial-gradient(
                circle at 7% 68%,
                rgba(36, 109, 210, .055),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                rgba(6, 17, 33, .995),
                rgba(4, 13, 27, .998)
            ) !important;

        border-bottom:
            1px solid rgba(72, 134, 211, .15) !important;

        box-shadow:
            0 26px 45px rgba(0,0,0,.28) !important;

        backdrop-filter:
            blur(18px)
            saturate(110%) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(110%) !important;

        transition:
            opacity .22s ease,
            padding .30s ease !important;

        z-index:
            999 !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {

        height:
            calc(100dvh - 70px) !important;

        max-height:
            calc(100dvh - 70px) !important;

        padding:
            22px 20px 25px !important;

        overflow-y:
            auto !important;

        overflow-x:
            hidden !important;

        opacity:
            1 !important;

        pointer-events:
            auto !important;

        -webkit-overflow-scrolling:
            touch !important;
    }


    /* ------------------------------------------------------
       SMALL NAVIGATION LABEL
       ------------------------------------------------------ */

    .nav-menu::before {
        content:
            'NAVIGATION' !important;

        display:
            block !important;

        width:
            100% !important;

        margin:
            1px 0 7px !important;

        padding:
            0 10px !important;

        color:
            rgba(112, 163, 228, .58) !important;

        font-size:
            .62rem !important;

        font-weight:
            800 !important;

        line-height:
            1 !important;

        letter-spacing:
            .18em !important;
    }


    /* ------------------------------------------------------
       ITEMS
       ------------------------------------------------------ */

    .nav-menu li {
        width:
            100% !important;

        margin:
            0 !important;
    }


    .nav-link {
        position:
            relative !important;

        display:
            flex !important;

        align-items:
            center !important;

        min-height:
            52px !important;

        width:
            100% !important;

        padding:
            0 16px !important;

        border-radius:
            13px !important;

        color:
            #a8b9cf !important;

        background:
            transparent !important;

        border:
            1px solid transparent !important;

        font-size:
            .94rem !important;

        font-weight:
            600 !important;

        letter-spacing:
            .005em !important;

        transition:
            color .20s ease,
            background .20s ease,
            border-color .20s ease,
            transform .20s ease !important;
    }


    /* tiny point */
    .nav-link::before {
        content:
            '' !important;

        width:
            5px !important;

        height:
            5px !important;

        margin-right:
            12px !important;

        flex:
            0 0 auto !important;

        border-radius:
            50% !important;

        background:
            rgba(116, 158, 211, .25) !important;

        box-shadow:
            none !important;

        transition:
            background .20s ease,
            box-shadow .20s ease,
            transform .20s ease !important;
    }


    .nav-link::after {
        content:
            '' !important;

        display:
            block !important;

        position:
            absolute !important;

        right:
            16px !important;

        top:
            50% !important;

        width:
            7px !important;

        height:
            7px !important;

        border-top:
            1.5px solid currentColor !important;

        border-right:
            1.5px solid currentColor !important;

        transform:
            translateY(-50%)
            rotate(45deg) !important;

        opacity:
            .28 !important;

        background:
            none !important;
    }


    /* ------------------------------------------------------
       ACTIVE SECTION
       ------------------------------------------------------ */

    .nav-link.active {
        color:
            #78b5ff !important;

        background:
            linear-gradient(
                100deg,
                rgba(24, 83, 144, .29),
                rgba(13, 44, 79, .18)
            ) !important;

        border-color:
            rgba(69, 144, 231, .19) !important;

        box-shadow:
            inset 3px 0 0 rgba(67, 153, 255, .88),
            inset 0 1px 0 rgba(255,255,255,.02),
            0 6px 18px rgba(0,0,0,.08) !important;
    }


    .nav-link.active::before {
        background:
            #69adff !important;

        box-shadow:
            0 0 9px rgba(79, 159, 255, .55) !important;

        transform:
            scale(1.12) !important;
    }


    .nav-link.active::after {
        opacity:
            .72 !important;
    }


    /* ------------------------------------------------------
       CONTACT BUTTON
       ------------------------------------------------------ */

    .nav-menu .cta-nav {
        justify-content:
            center !important;

        min-height:
            52px !important;

        width:
            100% !important;

        margin:
            10px 0 5px !important;

        padding:
            0 18px !important;

        color:
            #ffffff !important;

        border-radius:
            14px !important;

        background:
            linear-gradient(
                135deg,
                #1e57d8,
                #2e6bf1
            ) !important;

        border:
            1px solid rgba(126, 178, 255, .30) !important;

        box-shadow:
            0 13px 25px rgba(25, 89, 215, .22),
            inset 0 1px 0 rgba(255,255,255,.12) !important;
    }


    .nav-menu .cta-nav::before,
    .nav-menu .cta-nav::after {
        display:
            none !important;
    }


    /* ------------------------------------------------------
       PRESS RESPONSE
       ------------------------------------------------------ */

    .nav-link:active {
        transform:
            scale(.985) !important;
    }


    .nav-menu .cta-nav:active {
        transform:
            scale(.98) !important;
    }

}


/* fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 70px) !important;

            max-height:
                calc(100vh - 70px) !important;
        }

    }

}

/* ===== MOBILE NAV PREMIUM FINAL END ===== */



/* ===== MOBILE NAV PREMIUM POLISH START ===== */

@media (max-width: 900px) {

    /* ------------------------------------------------------
       MENU FITS BETTER ON PHONE
       ------------------------------------------------------ */

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        padding:
            17px 20px 20px !important;

        gap:
            2px !important;
    }


    /* ------------------------------------------------------
       NAVIGATION LABEL
       ------------------------------------------------------ */

    .nav-menu::before {
        margin:
            0 0 8px !important;

        padding:
            0 12px !important;

        font-size:
            .58rem !important;

        letter-spacing:
            .19em !important;

        color:
            rgba(105, 160, 228, .62) !important;
    }


    /* ------------------------------------------------------
       CLEANER / MORE COMPACT ROWS
       ------------------------------------------------------ */

    .nav-link {
        min-height:
            46px !important;

        padding:
            0 13px !important;

        border-radius:
            11px !important;

        font-size:
            .91rem !important;

        font-weight:
            610 !important;

        color:
            #aebed1 !important;
    }


    /* remove the awkward right chevron */
    .nav-link::after {
        content:
            none !important;

        display:
            none !important;
    }


    /* keep ONE simple dot */
    .nav-link::before {
        width:
            5px !important;

        height:
            5px !important;

        margin-right:
            12px !important;

        border-radius:
            50% !important;

        background:
            rgba(111, 157, 212, .30) !important;

        box-shadow:
            none !important;
    }


    /* ------------------------------------------------------
       ACTIVE SECTION
       ------------------------------------------------------ */

    .nav-link.active {
        color:
            #8bc0ff !important;

        background:
            linear-gradient(
                90deg,
                rgba(29, 92, 164, .27),
                rgba(13, 49, 88, .15)
            ) !important;

        border:
            1px solid rgba(72, 145, 231, .20) !important;

        box-shadow:
            inset 3px 0 0 #4e9eff,
            inset 0 1px 0 rgba(255,255,255,.025) !important;
    }


    .nav-link.active::before {
        background:
            #70b1ff !important;

        box-shadow:
            0 0 8px rgba(83, 164, 255, .52) !important;
    }


    /* ------------------------------------------------------
       CONTACT NOW FITS IN VIEW MUCH MORE EASILY
       ------------------------------------------------------ */

    .nav-menu .cta-nav {
        min-height:
            48px !important;

        margin:
            8px 0 2px !important;

        border-radius:
            12px !important;

        font-size:
            .90rem !important;

        font-weight:
            750 !important;

        background:
            linear-gradient(
                135deg,
                #2459d7,
                #316bea
            ) !important;

        box-shadow:
            0 10px 22px rgba(30, 88, 206, .20),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }


    /* ------------------------------------------------------
       CLEANER CLOSE BUTTON
       ------------------------------------------------------ */

    .nav-toggle {
        width:
            42px !important;

        height:
            42px !important;

        border-radius:
            12px !important;

        background:
            rgba(14, 36, 63, .24) !important;

        border:
            1px solid rgba(83, 148, 225, .17) !important;
    }


    .nav-toggle.active span {
        width:
            23px !important;

        height:
            2px !important;
    }

}

/* ===== MOBILE NAV PREMIUM POLISH END ===== */



/* ===== MOBILE NAV DETAIL POLISH START ===== */

@media (max-width: 900px) {

    /* ======================================================
       NAVIGATION HEADING
       ====================================================== */

    .nav-menu::before {
        content:
            'NAVIGATION' !important;

        position:
            relative !important;

        display:
            block !important;

        width:
            fit-content !important;

        margin:
            0 0 11px 4px !important;

        padding:
            0 0 9px !important;

        color:
            #b9d6fb !important;

        font-size:
            .68rem !important;

        font-weight:
            850 !important;

        letter-spacing:
            .16em !important;

        text-transform:
            uppercase !important;

        text-shadow:
            0 0 12px rgba(87, 156, 244, .12) !important;

        border-bottom:
            2px solid rgba(76, 150, 244, .78) !important;
    }


    /* small soft underline extension */
    .nav-menu::after {
        content:
            '' !important;

        position:
            absolute !important;

        top:
            47px !important;

        left:
            24px !important;

        width:
            74px !important;

        height:
            1px !important;

        background:
            linear-gradient(
                90deg,
                rgba(78, 154, 248, .45),
                transparent
            ) !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       ACTIVE ROW - SLIGHTLY MORE DEPTH
       ====================================================== */

    .nav-link.active {
        background:
            linear-gradient(
                100deg,
                rgba(25, 91, 167, .34) 0%,
                rgba(13, 50, 91, .22) 52%,
                rgba(6, 23, 44, .14) 100%
            ) !important;

        border-color:
            rgba(82, 155, 239, .27) !important;

        box-shadow:
            inset 3px 0 0 #55a4ff,
            inset 0 1px 0 rgba(255,255,255,.03),
            0 8px 18px rgba(0,0,0,.10) !important;
    }


    /* ======================================================
       CONTACT CTA - DARK LEFT / BRIGHT RIGHT
       ====================================================== */

    .nav-menu .cta-nav {
        position:
            relative !important;

        overflow:
            hidden !important;

        min-height:
            50px !important;

        margin:
            10px 0 3px !important;

        border-radius:
            13px !important;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                100deg,
                #0d2f67 0%,
                #184cae 38%,
                #2f6dea 100%
            ) !important;

        border:
            1px solid rgba(117, 174, 247, .32) !important;

        box-shadow:
            0 13px 26px rgba(24, 78, 185, .24),
            inset 0 1px 0 rgba(255,255,255,.12),
            inset 18px 0 30px rgba(2, 13, 31, .18) !important;

        text-shadow:
            0 1px 8px rgba(0,0,0,.22) !important;

        transition:
            transform .20s ease,
            box-shadow .22s ease,
            filter .22s ease !important;
    }


    /* subtle moving sheen */
    .nav-menu .cta-nav::before {
        content:
            '' !important;

        display:
            block !important;

        position:
            absolute !important;

        top:
            -30% !important;

        left:
            -70px !important;

        width:
            46px !important;

        height:
            160% !important;

        transform:
            rotate(16deg) !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.11),
                transparent
            ) !important;

        animation:
            mobileContactSheen
            4.8s ease-in-out
            infinite !important;

        pointer-events:
            none !important;
    }


    @keyframes mobileContactSheen {

        0%,
        35% {
            left: -70px;
            opacity: 0;
        }

        45% {
            opacity: .65;
        }

        75% {
            opacity: .35;
        }

        88%,
        100% {
            left: calc(100% + 30px);
            opacity: 0;
        }

    }


    .nav-menu .cta-nav:active {
        transform:
            scale(.982) !important;

        filter:
            brightness(1.04) !important;
    }


    /* ======================================================
       CLOSE BUTTON - SOFTER / CLEANER
       ====================================================== */

    .nav-toggle.active {
        background:
            linear-gradient(
                145deg,
                rgba(13, 34, 58, .46),
                rgba(8, 24, 43, .30)
            ) !important;

        border:
            1px solid rgba(95, 157, 229, .18) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 6px 15px rgba(0,0,0,.12) !important;
    }


    .nav-toggle.active span {
        background:
            #dce9f8 !important;

        opacity:
            .92 !important;
    }

}


/* reduced motion */
@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .nav-menu .cta-nav::before {
        animation:
            none !important;
    }

}

/* ===== MOBILE NAV DETAIL POLISH END ===== */



/* ===== MOBILE COMPACT NAV FINAL START ===== */

@media (max-width: 900px) {

    /* ======================================================
       COMPACT TOP BAR
       ====================================================== */

    .navbar {
        min-height:
            60px !important;

        background:
            linear-gradient(
                180deg,
                rgba(4, 12, 24, .97),
                rgba(4, 12, 24, .93)
            ) !important;

        border-bottom:
            1px solid rgba(77, 134, 205, .16) !important;

        box-shadow:
            0 7px 22px rgba(0,0,0,.14) !important;

        backdrop-filter:
            blur(15px)
            saturate(112%) !important;

        -webkit-backdrop-filter:
            blur(15px)
            saturate(112%) !important;
    }


    .nav-container {
        min-height:
            60px !important;

        height:
            60px !important;

        padding:
            0 20px !important;
    }


    /* ======================================================
       STK LOGO
       ====================================================== */

    .logo {
        font-size:
            1.34rem !important;

        font-weight:
            850 !important;

        letter-spacing:
            .11em !important;

        line-height:
            1 !important;

        background:
            linear-gradient(
                135deg,
                #78b5ff 0%,
                #3b82f6 55%,
                #2563eb 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;

        filter:
            drop-shadow(
                0 0 8px rgba(67, 143, 244, .12)
            ) !important;
    }


    /* ======================================================
       SMALLER MENU BUTTON
       ====================================================== */

    .nav-toggle {
        width:
            39px !important;

        height:
            39px !important;

        border-radius:
            11px !important;

        background:
            linear-gradient(
                145deg,
                rgba(14, 35, 61, .34),
                rgba(8, 24, 43, .22)
            ) !important;

        border:
            1px solid rgba(89, 150, 224, .16) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 5px 13px rgba(0,0,0,.10) !important;
    }


    .nav-toggle span {
        width:
            22px !important;

        height:
            1.8px !important;
    }


    .nav-toggle span:nth-child(1) {
        transform:
            translateY(-6px) !important;
    }

    .nav-toggle span:nth-child(2) {
        transform:
            translateY(0) !important;
    }

    .nav-toggle span:nth-child(3) {
        transform:
            translateY(6px) !important;
    }


    .nav-toggle.active span:nth-child(1) {
        transform:
            rotate(45deg) !important;
    }

    .nav-toggle.active span:nth-child(2) {
        opacity:
            0 !important;
    }

    .nav-toggle.active span:nth-child(3) {
        transform:
            rotate(-45deg) !important;
    }


    /* ======================================================
       OPEN MENU NOW STARTS BELOW 60PX BAR
       ====================================================== */

    .nav-menu {
        top:
            60px !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 60px) !important;

        max-height:
            calc(100dvh - 60px) !important;
    }

}


/* fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 60px) !important;

            max-height:
                calc(100vh - 60px) !important;
        }

    }

}

/* ===== MOBILE COMPACT NAV FINAL END ===== */



/* ===== MOBILE FLOATING NAV BAR START ===== */

@media (max-width: 900px) {

    /* ======================================================
       NAVBAR BECOMES A FLOATING SHELL
       ====================================================== */

    .navbar {
        position:
            sticky !important;

        top:
            8px !important;

        width:
            calc(100% - 24px) !important;

        margin:
            8px 12px 0 !important;

        min-height:
            56px !important;

        border-radius:
            17px !important;

        overflow:
            visible !important;

        background:
            linear-gradient(
                145deg,
                rgba(6, 17, 31, .91),
                rgba(5, 14, 27, .84)
            ) !important;

        border:
            1px solid rgba(86, 146, 220, .18) !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.025) !important;

        backdrop-filter:
            blur(16px)
            saturate(112%) !important;

        -webkit-backdrop-filter:
            blur(16px)
            saturate(112%) !important;

        z-index:
            1000 !important;
    }


    /* ======================================================
       INNER BAR
       ====================================================== */

    .nav-container {
        width:
            100% !important;

        height:
            56px !important;

        min-height:
            56px !important;

        padding:
            0 14px 0 16px !important;

        border-radius:
            inherit !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;
    }


    /* ======================================================
       STK
       ====================================================== */

    .logo {
        font-size:
            1.25rem !important;

        font-weight:
            850 !important;

        letter-spacing:
            .12em !important;

        line-height:
            1 !important;

        background:
            linear-gradient(
                135deg,
                #7db9ff 0%,
                #4c94f7 45%,
                #2f6fe6 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;

        filter:
            drop-shadow(
                0 0 8px rgba(66, 145, 244, .10)
            ) !important;
    }


    /* ======================================================
       MENU BUTTON
       ====================================================== */

    .nav-toggle {
        width:
            38px !important;

        height:
            38px !important;

        border-radius:
            11px !important;

        background:
            linear-gradient(
                145deg,
                rgba(14, 37, 64, .38),
                rgba(8, 25, 45, .26)
            ) !important;

        border:
            1px solid rgba(92, 155, 232, .17) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 5px 12px rgba(0,0,0,.10) !important;
    }


    .nav-toggle span {
        width:
            21px !important;

        height:
            1.8px !important;
    }


    .nav-toggle span:nth-child(1) {
        transform:
            translateY(-5.5px) !important;
    }

    .nav-toggle span:nth-child(2) {
        transform:
            translateY(0) !important;
    }

    .nav-toggle span:nth-child(3) {
        transform:
            translateY(5.5px) !important;
    }


    .nav-toggle.active span:nth-child(1) {
        transform:
            rotate(45deg) !important;
    }

    .nav-toggle.active span:nth-child(2) {
        opacity:
            0 !important;
    }

    .nav-toggle.active span:nth-child(3) {
        transform:
            rotate(-45deg) !important;
    }


    /* ======================================================
       OPEN MENU ATTACHES BELOW FLOATING BAR
       ====================================================== */

    .nav-menu {
        position:
            fixed !important;

        top:
            72px !important;

        left:
            12px !important;

        right:
            12px !important;

        width:
            auto !important;

        border-radius:
            17px !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 84px) !important;

        max-height:
            calc(100dvh - 84px) !important;
    }


    /* ======================================================
       KEEP PAGE CONTENT FROM HIDING UNDER FLOATING NAV
       BUT USE LESS SPACE THAN OLD FULL STRIP
       ====================================================== */

    body {
        padding-top:
            0 !important;
    }


    #home {
        margin-top:
            -2px !important;
    }

}


/* fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 84px) !important;

            max-height:
                calc(100vh - 84px) !important;
        }

    }

}

/* ===== MOBILE FLOATING NAV BAR END ===== */







/* ===== TRUE FLOATING MOBILE NAV START ===== */

@media (max-width: 900px) {

    /* ======================================================
       TRUE FLOATING NAV — NO LAYOUT SPACE
       ====================================================== */

    .navbar {
        position:
            fixed !important;

        top:
            10px !important;

        left:
            12px !important;

        right:
            12px !important;

        width:
            auto !important;

        margin:
            0 !important;

        min-height:
            56px !important;

        border-radius:
            17px !important;

        z-index:
            1200 !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 16, 30, .91),
                rgba(4, 13, 25, .85)
            ) !important;

        border:
            1px solid rgba(85, 148, 224, .20) !important;

        box-shadow:
            0 14px 34px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.03) !important;

        backdrop-filter:
            blur(18px)
            saturate(115%) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(115%) !important;
    }


    .nav-container {
        width:
            100% !important;

        height:
            56px !important;

        min-height:
            56px !important;

        padding:
            0 14px 0 17px !important;
    }


    /* ======================================================
       MENU OPENS BELOW FLOATING CAPSULE
       ====================================================== */

    .nav-menu {
        position:
            fixed !important;

        top:
            76px !important;

        left:
            12px !important;

        right:
            12px !important;

        width:
            auto !important;

        border-radius:
            17px !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 88px) !important;

        max-height:
            calc(100dvh - 88px) !important;
    }


    /* ======================================================
       PAGE ITSELF NO LONGER RESERVES NAVBAR SPACE
       ====================================================== */

    body {
        padding-top:
            0 !important;
    }


    /*
       Give anchor destinations enough breathing room so
       headings aren't hidden behind the floating bar.
    */

    section[id] {
        scroll-margin-top:
            82px !important;
    }

}


/* browser fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 88px) !important;

            max-height:
                calc(100vh - 88px) !important;
        }

    }

}

/* ===== TRUE FLOATING MOBILE NAV END ===== */



/* ===== FLOATING NAV MICRO POLISH START ===== */

@media (max-width: 900px) {

    .navbar {
        top:
            8px !important;

        left:
            15px !important;

        right:
            15px !important;

        border:
            1px solid rgba(86, 146, 220, .14) !important;

        background:
            linear-gradient(
                145deg,
                rgba(5, 16, 30, .88),
                rgba(4, 13, 25, .81)
            ) !important;

        box-shadow:
            0 10px 26px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.02) !important;

        backdrop-filter:
            blur(17px)
            saturate(112%) !important;

        -webkit-backdrop-filter:
            blur(17px)
            saturate(112%) !important;
    }


    .nav-menu {
        top:
            74px !important;

        left:
            15px !important;

        right:
            15px !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 86px) !important;

        max-height:
            calc(100dvh - 86px) !important;
    }


    .nav-toggle {
        transition:
            transform .20s ease,
            border-color .20s ease,
            box-shadow .20s ease,
            background .20s ease !important;
    }


    .nav-toggle:active {
        transform:
            scale(.96) !important;

        border-color:
            rgba(104, 174, 255, .28) !important;

        box-shadow:
            0 0 0 4px rgba(71, 143, 236, .06),
            inset 0 1px 0 rgba(255,255,255,.03),
            0 5px 12px rgba(0,0,0,.10) !important;
    }


    .nav-toggle.active {
        border-color:
            rgba(101, 169, 248, .22) !important;

        box-shadow:
            0 0 0 3px rgba(68, 139, 231, .04),
            inset 0 1px 0 rgba(255,255,255,.025),
            0 6px 15px rgba(0,0,0,.11) !important;
    }

}


@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 86px) !important;

            max-height:
                calc(100vh - 86px) !important;
        }

    }

}

/* ===== FLOATING NAV MICRO POLISH END ===== */



/* ===== FLOATING NAV OPEN ALIGNMENT START ===== */

@media (max-width: 900px) {

    /* keep panel perfectly aligned with floating bar */
    .nav-menu {
        top:
            78px !important;

        left:
            15px !important;

        right:
            15px !important;

        width:
            auto !important;

        border-radius:
            16px !important;

        border:
            1px solid rgba(84, 149, 228, .16) !important;

        border-top-color:
            rgba(101, 166, 244, .22) !important;

        box-shadow:
            0 18px 38px rgba(0,0,0,.27),
            0 -8px 22px rgba(0,0,0,.10),
            inset 0 1px 0 rgba(255,255,255,.025) !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 94px) !important;

        max-height:
            calc(100dvh - 94px) !important;
    }


    /* subtle visual separation under floating bar */
    .nav-menu::before {
        margin-top:
            1px !important;
    }

}


/* fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 94px) !important;

            max-height:
                calc(100vh - 94px) !important;
        }

    }

}

/* ===== FLOATING NAV OPEN ALIGNMENT END ===== */



/* ===== FLOATING MENU FINAL FIT START ===== */

@media (max-width: 900px) {

    /* ======================================================
       REDUCE GAP BELOW FLOATING STK BAR
       ====================================================== */

    .nav-menu {
        top:
            70px !important;

        left:
            15px !important;

        right:
            15px !important;

        width:
            auto !important;

        border-radius:
            16px !important;
    }


    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 80px) !important;

        max-height:
            calc(100dvh - 80px) !important;

        padding:
            15px 20px 17px !important;

        gap:
            1px !important;
    }


    /* ======================================================
       NAVIGATION HEADING — MATCH SITE SECTION LANGUAGE
       ====================================================== */

    .nav-menu::before {
        content:
            'NAVIGATION' !important;

        position:
            relative !important;

        display:
            block !important;

        width:
            fit-content !important;

        margin:
            0 0 10px 4px !important;

        padding:
            0 0 9px !important;

        font-size:
            .72rem !important;

        font-weight:
            850 !important;

        line-height:
            1 !important;

        letter-spacing:
            .14em !important;

        text-transform:
            uppercase !important;

        color:
            #dbe9fb !important;

        background:
            linear-gradient(
                110deg,
                #dbe9fb 0%,
                #9cc8ff 55%,
                #5fa5ff 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;

        border:
            0 !important;

        text-shadow:
            none !important;
    }


    /* ONE underline only */
    .nav-menu::before {
        border-bottom:
            3px solid transparent !important;

        border-image:
            linear-gradient(
                90deg,
                #3b82f6,
                #67b5ff
            )
            1 !important;
    }


    /* kill the second decorative line */
    .nav-menu::after {
        content:
            none !important;

        display:
            none !important;
    }


    /* ======================================================
       COMPACT ROWS A LITTLE MORE
       ====================================================== */

    .nav-link {
        min-height:
            44px !important;

        padding:
            0 13px !important;

        font-size:
            .90rem !important;
    }


    /* ======================================================
       CONTACT FITS COMFORTABLY
       ====================================================== */

    .nav-menu .cta-nav {
        min-height:
            46px !important;

        margin:
            7px 0 1px !important;

        border-radius:
            12px !important;
    }

}


/* fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 80px) !important;

            max-height:
                calc(100vh - 80px) !important;
        }

    }

}

/* ===== FLOATING MENU FINAL FIT END ===== */



/* ===== MOBILE NAV HEADING + TOGGLE SMOOTH FINAL START ===== */

@media (max-width: 900px) {

    /* ======================================================
       NAVIGATION HEADING — MATCH MAIN SITE HEADING LANGUAGE
       ====================================================== */

    .nav-menu::before {
        content:
            'Navigation' !important;

        display:
            block !important;

        width:
            fit-content !important;

        margin:
            1px 0 12px 4px !important;

        padding:
            0 0 10px !important;

        font-size:
            1.12rem !important;

        font-weight:
            800 !important;

        line-height:
            1 !important;

        letter-spacing:
            -.015em !important;

        text-transform:
            none !important;

        color:
            #dbe9fb !important;

        background:
            linear-gradient(
                105deg,
                #dbe9fb 0%,
                #a7ccfb 47%,
                #559cff 100%
            ) !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;

        text-shadow:
            none !important;

        border:
            0 !important;

        position:
            relative !important;
    }


    /* exactly ONE underline */
    .nav-menu::before {
        box-shadow:
            inset 0 -3px 0 rgba(0,0,0,0) !important;
    }


    .nav-menu::after {
        content:
            '' !important;

        display:
            block !important;

        position:
            absolute !important;

        top:
            49px !important;

        left:
            24px !important;

        width:
            72px !important;

        height:
            3px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                #3b82f6,
                #60a5fa
            ) !important;

        box-shadow:
            0 0 10px rgba(59,130,246,.12) !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       REMOVE THE HARSH BLUE PRESS FLASH
       ====================================================== */

    .nav-toggle {
        -webkit-tap-highlight-color:
            transparent !important;

        outline:
            none !important;

        transition:
            background .28s ease,
            border-color .28s ease,
            box-shadow .28s ease,
            transform .22s ease !important;
    }


    .nav-toggle:focus {
        outline:
            none !important;
    }


    /* pressing it should feel soft, not flash blue */
    .nav-toggle:active {
        transform:
            scale(.975) !important;

        background:
            linear-gradient(
                145deg,
                rgba(13, 34, 58, .40),
                rgba(8, 24, 43, .27)
            ) !important;

        border-color:
            rgba(94, 154, 225, .17) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 4px 11px rgba(0,0,0,.10) !important;

        filter:
            none !important;
    }


    /* open/X state — subtle transition instead of blue jump */
    .nav-toggle.active {
        background:
            linear-gradient(
                145deg,
                rgba(14, 35, 60, .44),
                rgba(8, 24, 43, .31)
            ) !important;

        border-color:
            rgba(100, 160, 230, .18) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.028),
            0 6px 15px rgba(0,0,0,.12) !important;
    }


    .nav-toggle.active span {
        background:
            #dbe8f7 !important;

        opacity:
            .94 !important;
    }


    /* no browser blue focus ring after tapping */
    .nav-toggle:focus-visible {
        outline:
            none !important;

        box-shadow:
            0 0 0 3px rgba(79, 145, 231, .07),
            inset 0 1px 0 rgba(255,255,255,.028),
            0 6px 15px rgba(0,0,0,.12) !important;
    }

}

/* ===== MOBILE NAV HEADING + TOGGLE SMOOTH FINAL END ===== */



/* ===== FLOATING NAV GAP TIGHTEN START ===== */

@media (max-width: 900px) {

    .nav-menu {
        top:
            67px !important;
    }

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {
        height:
            calc(100dvh - 77px) !important;

        max-height:
            calc(100dvh - 77px) !important;
    }

}

@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            height:
                calc(100vh - 77px) !important;

            max-height:
                calc(100vh - 77px) !important;
        }

    }

}

/* ===== FLOATING NAV GAP TIGHTEN END ===== */



/* ===== MOBILE SECTION LANDING FINAL START ===== */

@media (max-width: 900px) {

    /*
       The JS now lands directly near each section heading.
       Keep native/manual anchor behavior reasonable too.
    */

    section[id] {
        scroll-margin-top:
            76px !important;
    }

}

/* ===== MOBILE SECTION LANDING FINAL END ===== */







/* ===== BEYOND IT PHOTO INTERACTION MASTER START ===== */

@media (max-width: 700px) {

    /* ======================================================
       COMPLETELY NEUTRALIZE OLD ACTIVE CLASS
       ====================================================== */

    #beyond-it
    .beyond-it-photo-card.beyond-photo-active {

        transform:
            none !important;

        filter:
            none !important;
    }


    #beyond-it
    .beyond-it-photo-card.beyond-photo-active
    .photo-frame {

        transform:
            none !important;

        filter:
            none !important;
    }


    #beyond-it
    .beyond-it-photo-card.beyond-photo-active
    .photo-frame img {

        filter:
            none !important;
    }


    #beyond-it
    .beyond-it-photo-card.beyond-photo-active
    .photo-caption {

        transform:
            none !important;
    }


    /* ======================================================
       PHOTO CARD — SIMPLE, SMOOTH INTERACTION
       ====================================================== */

    #beyond-it .beyond-it-photo-card {

        -webkit-tap-highlight-color:
            transparent !important;

        touch-action:
            manipulation !important;

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        transition:
            transform .34s cubic-bezier(.22,.75,.22,1),
            border-color .30s ease,
            box-shadow .34s ease !important;
    }


    /*
       Important:
       We move .photo-frame instead of constantly fighting
       with the image's own slow drift animation.
    */

    #beyond-it .photo-frame {

        transform:
            translate3d(0,0,0)
            scale(1) !important;

        transition:
            transform .38s cubic-bezier(.22,.75,.22,1),
            filter .32s ease !important;

        transform-origin:
            center center !important;
    }


    /* ======================================================
       FINGER DOWN
       ====================================================== */

    #beyond-it
    .beyond-it-photo-card.photo-pressed {

        transform:
            translate3d(0, 2px, 0)
            scale(.987) !important;

        border-color:
            rgba(91, 160, 244, .54) !important;

        box-shadow:
            0 16px 30px rgba(0,0,0,.23),
            inset 0 1px 0 rgba(255,255,255,.035) !important;
    }


    #beyond-it
    .beyond-it-photo-card.photo-pressed
    .photo-frame {

        transform:
            scale(1.018) !important;

        filter:
            brightness(1.025)
            saturate(1.015) !important;
    }


    #beyond-it
    .beyond-it-photo-card.photo-pressed
    .photo-caption {

        transform:
            translateY(1px)
            scale(.993) !important;
    }


    /* ======================================================
       PREMIUM CAPTION PANEL
       ====================================================== */

    #beyond-it .photo-caption {

        position:
            absolute !important;

        overflow:
            hidden !important;

        background:
            radial-gradient(
                circle at 88% 20%,
                rgba(55, 133, 228, .15),
                transparent 40%
            ),
            linear-gradient(
                145deg,
                rgba(9, 27, 50, .72),
                rgba(5, 18, 35, .58)
            ) !important;

        border:
            1px solid rgba(93, 158, 237, .22) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            inset 0 -18px 36px rgba(0,0,0,.08),
            0 10px 24px rgba(0,0,0,.15) !important;

        backdrop-filter:
            blur(8px)
            saturate(118%) !important;

        -webkit-backdrop-filter:
            blur(8px)
            saturate(118%) !important;

        transition:
            transform .36s cubic-bezier(.22,.75,.22,1),
            background .30s ease,
            border-color .30s ease,
            box-shadow .30s ease !important;
    }


    /*
       Soft internal blue atmosphere.
       Not a static vertical line.
    */

    #beyond-it .photo-caption::before {

        content:
            '' !important;

        display:
            block !important;

        position:
            absolute !important;

        width:
            115px !important;

        height:
            90px !important;

        top:
            -48px !important;

        right:
            -35px !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle,
                rgba(70, 151, 250, .22),
                rgba(44, 111, 205, .08) 45%,
                transparent 72%
            ) !important;

        filter:
            blur(7px) !important;

        pointer-events:
            none !important;

        animation:
            beyondCaptionAtmosphere
            5.8s ease-in-out
            infinite alternate !important;
    }


    @keyframes beyondCaptionAtmosphere {

        from {
            transform:
                translate3d(0,0,0)
                scale(.96);

            opacity:
                .65;
        }

        to {
            transform:
                translate3d(-24px, 20px, 0)
                scale(1.10);

            opacity:
                1;
        }

    }


    /* subtle top highlight */
    #beyond-it .photo-caption::after {

        content:
            '' !important;

        position:
            absolute !important;

        top:
            0 !important;

        left:
            18px !important;

        width:
            72px !important;

        height:
            1px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(101, 177, 255, .72),
                rgba(76, 145, 232, .16),
                transparent
            ) !important;

        opacity:
            .70 !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       BEYOND IT PILL
       ====================================================== */

    #beyond-it .photo-caption span {

        position:
            relative !important;

        z-index:
            2 !important;

        color:
            #90c3ff !important;

        background:
            linear-gradient(
                145deg,
                rgba(35, 92, 163, .22),
                rgba(20, 61, 111, .15)
            ) !important;

        border:
            1px solid rgba(94, 166, 245, .25) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025) !important;
    }


    #beyond-it .photo-caption strong {

        position:
            relative !important;

        z-index:
            2 !important;

        color:
            #f5f8fc !important;

        text-shadow:
            0 2px 13px rgba(0,0,0,.30) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #beyond-it .photo-caption::before {

        animation:
            none !important;
    }

}

/* ===== BEYOND IT PHOTO INTERACTION MASTER END ===== */



/* ===== BEYOND IT CLEAN PHOTO FINAL START ===== */

@media (max-width: 700px) {

    /* ======================================================
       PHOTO CARD
       ====================================================== */

    #beyond-it .beyond-it-photo-card {
        position: relative !important;
        overflow: hidden !important;

        -webkit-tap-highlight-color: transparent !important;

        transform: scale(1) !important;

        transition:
            transform .28s cubic-bezier(.2,.75,.2,1),
            border-color .28s ease,
            box-shadow .28s ease !important;
    }


    /* ======================================================
       KILL ALL OLD INTERACTION STATES
       ====================================================== */

    #beyond-it
    .beyond-it-photo-card.beyond-photo-active,

    #beyond-it
    .beyond-it-photo-card.photo-pressed,

    #beyond-it
    .beyond-it-photo-card.photo-touching,

    #beyond-it
    .beyond-it-photo-card.photo-touch-release {

        transform: scale(1) !important;

        filter: none !important;

        animation: none !important;
    }


    #beyond-it
    .beyond-it-photo-card.beyond-photo-active
    .photo-frame,

    #beyond-it
    .beyond-it-photo-card.photo-pressed
    .photo-frame,

    #beyond-it
    .beyond-it-photo-card.photo-touching
    .photo-frame {

        transform: none !important;
        filter: none !important;
    }


    /* ======================================================
       SIMPLE TOUCH — NO JS NEEDED
       ====================================================== */

    #beyond-it .beyond-it-photo-card:active {

        transform:
            scale(.988)
            translateY(1px) !important;

        border-color:
            rgba(94, 161, 242, .52) !important;

        box-shadow:
            0 15px 30px rgba(0,0,0,.23),
            inset 0 1px 0 rgba(255,255,255,.035) !important;
    }


    #beyond-it .photo-frame {

        transition:
            transform .32s cubic-bezier(.2,.75,.2,1),
            filter .28s ease !important;
    }


    #beyond-it
    .beyond-it-photo-card:active
    .photo-frame {

        transform:
            scale(1.018) !important;

        filter:
            brightness(1.025) !important;
    }


    /* ======================================================
       CLEAN CINEMATIC BOTTOM GRADIENT
       ====================================================== */

    #beyond-it .photo-frame::after {

        content: '' !important;

        position: absolute !important;
        inset: 0 !important;

        z-index: 3 !important;

        background:
            linear-gradient(
                to bottom,
                transparent 0%,
                transparent 55%,
                rgba(3,10,20,.08) 67%,
                rgba(3,10,20,.34) 78%,
                rgba(3,10,20,.76) 100%
            ) !important;

        pointer-events: none !important;
    }


    /* ======================================================
       REMOVE THE BIG DARK CAPTION BOX
       ====================================================== */

    #beyond-it .photo-caption {

        position: absolute !important;

        left: 20px !important;
        right: 20px !important;
        bottom: 19px !important;

        z-index: 7 !important;

        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        overflow: visible !important;

        transform: none !important;

        transition:
            transform .28s cubic-bezier(.2,.75,.2,1) !important;
    }


    /* remove all old lines / blobs */
    #beyond-it .photo-caption::before,
    #beyond-it .photo-caption::after {

        content: none !important;
        display: none !important;
    }


    /* ======================================================
       SMALL PREMIUM BEYOND IT PILL
       ====================================================== */

    #beyond-it .photo-caption span {

        position: relative !important;

        display: inline-flex !important;

        width: auto !important;

        min-height: 22px !important;

        align-items: center !important;

        margin: 0 0 8px !important;

        padding:
            4px 9px !important;

        border-radius:
            999px !important;

        color:
            #8fc3ff !important;

        background:
            rgba(7, 25, 46, .64) !important;

        border:
            1px solid rgba(105, 173, 249, .28) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 5px 14px rgba(0,0,0,.15) !important;

        backdrop-filter:
            blur(7px) !important;

        -webkit-backdrop-filter:
            blur(7px) !important;

        font-size:
            .58rem !important;

        font-weight:
            850 !important;

        line-height:
            1 !important;

        letter-spacing:
            .13em !important;

        text-transform:
            uppercase !important;
    }


    /* ======================================================
       CAPTION TEXT DIRECTLY ON PHOTO
       ====================================================== */

    #beyond-it .photo-caption strong {

        display: block !important;

        max-width:
            285px !important;

        margin: 0 !important;

        color:
            #f6f9fd !important;

        font-size:
            .93rem !important;

        font-weight:
            760 !important;

        line-height:
            1.38 !important;

        text-shadow:
            0 2px 8px rgba(0,0,0,.78),
            0 5px 18px rgba(0,0,0,.42) !important;
    }


    #beyond-it
    .beyond-it-photo-card:active
    .photo-caption {

        transform:
            translateY(-2px) !important;
    }

}


/* reduced motion */
@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #beyond-it .beyond-it-photo-card,
    #beyond-it .photo-frame,
    #beyond-it .photo-caption {

        transition: none !important;
    }

}

/* ===== BEYOND IT CLEAN PHOTO FINAL END ===== */











/* ===== BEYOND IT FLOATING GLASS PILL START ===== */

@media (max-width: 700px) {

    /* ======================================================
       ONLY THE SMALL "BEYOND IT" BADGE
       ====================================================== */

    #beyond-it .photo-caption span {

        position:
            relative !important;

        z-index:
            5 !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            auto !important;

        min-height:
            23px !important;

        margin:
            0 0 9px !important;

        padding:
            5px 10px !important;

        border-radius:
            999px !important;

        color:
            #96c8ff !important;

        background:
            linear-gradient(
                145deg,
                rgba(13, 36, 64, .46),
                rgba(7, 24, 44, .27)
            ) !important;

        border:
            1px solid rgba(125, 185, 251, .28) !important;

        backdrop-filter:
            blur(12px)
            saturate(140%) !important;

        -webkit-backdrop-filter:
            blur(12px)
            saturate(140%) !important;

        box-shadow:
            0 7px 18px rgba(0,0,0,.20),
            inset 0 1px 0 rgba(255,255,255,.08),
            inset 0 -1px 0 rgba(255,255,255,.025) !important;

        font-size:
            .58rem !important;

        font-weight:
            850 !important;

        line-height:
            1 !important;

        letter-spacing:
            .13em !important;

        text-transform:
            uppercase !important;

        overflow:
            hidden !important;

        transform:
            translate3d(0,0,0) !important;

        animation:
            beyondItPillFloat
            5.2s ease-in-out
            infinite !important;

        transition:
            border-color .25s ease,
            box-shadow .25s ease,
            filter .25s ease !important;

        -webkit-tap-highlight-color:
            transparent !important;
    }


    /* ======================================================
       GLASS REFLECTION INSIDE PILL
       ====================================================== */

    #beyond-it .photo-caption span::before {

        content:
            '' !important;

        position:
            absolute !important;

        inset:
            0 !important;

        border-radius:
            inherit !important;

        background:
            linear-gradient(
                120deg,
                rgba(255,255,255,.10) 0%,
                rgba(255,255,255,.035) 32%,
                transparent 58%
            ) !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       VERY SOFT BLUE ATMOSPHERE
       ====================================================== */

    #beyond-it .photo-caption span::after {

        content:
            '' !important;

        position:
            absolute !important;

        width:
            54px !important;

        height:
            34px !important;

        top:
            -22px !important;

        right:
            -15px !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle,
                rgba(82, 165, 255, .24),
                transparent 70%
            ) !important;

        filter:
            blur(5px) !important;

        pointer-events:
            none !important;
    }


    /* ======================================================
       SMALL PREMIUM FLOAT
       ====================================================== */

    @keyframes beyondItPillFloat {

        0%,
        100% {
            transform:
                translate3d(0, 0, 0);
        }

        50% {
            transform:
                translate3d(0, -3px, 0);
        }

    }


    /* ======================================================
       TOUCH RESPONSE
       ====================================================== */

    #beyond-it
    .photo-caption span:active {

        animation-play-state:
            paused !important;

        filter:
            brightness(1.06) !important;

        border-color:
            rgba(145, 202, 255, .40) !important;

        box-shadow:
            0 9px 20px rgba(0,0,0,.22),
            0 0 14px rgba(61, 143, 239, .10),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #beyond-it .photo-caption span {
        animation:
            none !important;
    }

}

/* ===== BEYOND IT FLOATING GLASS PILL END ===== */







/* ===== CONTACT MOBILE CINEMATIC FINAL START ===== */

@media (max-width: 700px) {

    /* ======================================================
       CONTACT SECTION
       ====================================================== */

    #contact {
        position: relative !important;
        overflow: hidden !important;

        padding-top: 20px !important;
        padding-bottom: 38px !important;
    }

    #contact .section-title {
        margin-bottom: 22px !important;
    }


    /* ======================================================
       MAIN CONTACT PANEL
       ====================================================== */

    #contact .contact-final-shell {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        padding: 20px !important;

        border-radius: 24px !important;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(39, 112, 219, .19),
                transparent 34%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(25, 79, 160, .08),
                transparent 38%
            ),
            linear-gradient(
                145deg,
                rgba(7, 22, 41, .985),
                rgba(4, 14, 29, .995)
            ) !important;

        border:
            1px solid rgba(83, 149, 231, .24) !important;

        box-shadow:
            0 24px 52px rgba(0,0,0,.27),
            inset 0 1px 0 rgba(255,255,255,.035),
            inset 0 -1px 0 rgba(255,255,255,.01) !important;
    }


    /* ======================================================
       LARGE MOVING AMBIENT LIGHT
       ====================================================== */

    #contact .contact-final-shell::before {
        content: '' !important;

        position: absolute !important;

        width: 250px !important;
        height: 210px !important;

        top: -115px !important;
        right: -120px !important;

        z-index: 0 !important;

        border-radius:
            47% 53% 62% 38% /
            52% 40% 60% 48% !important;

        background:
            radial-gradient(
                ellipse at center,
                rgba(67, 145, 255, .22),
                rgba(46, 100, 191, .08) 47%,
                transparent 72%
            ) !important;

        filter: blur(14px) !important;

        opacity: .85 !important;

        pointer-events: none !important;

        animation:
            contactAmbientDrift
            8s ease-in-out
            infinite alternate !important;
    }


    @keyframes contactAmbientDrift {

        from {
            transform:
                translate3d(0,0,0)
                rotate(-4deg)
                scale(.95);
        }

        to {
            transform:
                translate3d(-85px,78px,0)
                rotate(8deg)
                scale(1.14);
        }
    }


    /* very subtle top edge */
    #contact .contact-final-shell::after {
        content: '' !important;

        position: absolute !important;

        top: 0 !important;
        left: 24px !important;

        width: 110px !important;
        height: 1px !important;

        border-radius: 999px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(104,174,255,.68),
                transparent
            ) !important;

        opacity: .75 !important;

        pointer-events: none !important;
    }


    #contact .contact-final-intro,
    #contact .contact-final-details {
        position: relative !important;
        z-index: 2 !important;
    }


    /* ======================================================
       STATUS BADGE
       ====================================================== */

    #contact .contact-status {
        display: inline-flex !important;
        align-items: center !important;

        width: fit-content !important;
        max-width: 100% !important;

        gap: 9px !important;

        margin: 0 0 18px !important;
        padding: 8px 12px !important;

        border-radius: 999px !important;

        color: #a4efd4 !important;

        background:
            linear-gradient(
                145deg,
                rgba(8, 58, 58, .38),
                rgba(5, 36, 45, .25)
            ) !important;

        border:
            1px solid rgba(58, 205, 171, .25) !important;

        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;

        box-shadow:
            0 7px 18px rgba(0,0,0,.11),
            inset 0 1px 0 rgba(255,255,255,.035) !important;

        font-size: .71rem !important;
        font-weight: 780 !important;
        line-height: 1.2 !important;
    }


    #contact .contact-status-dot {
        width: 8px !important;
        height: 8px !important;

        flex: 0 0 8px !important;

        border-radius: 50% !important;

        background: #55e2b3 !important;

        box-shadow:
            0 0 0 5px rgba(85,226,179,.07),
            0 0 12px rgba(85,226,179,.55) !important;

        animation:
            contactLivePulse
            2.6s ease-in-out
            infinite !important;
    }


    @keyframes contactLivePulse {
        0%, 100% {
            transform: scale(1);
            opacity: .78;
        }

        50% {
            transform: scale(1.18);
            opacity: 1;
        }
    }


    /* ======================================================
       LET'S CONNECT
       ====================================================== */

    #contact .contact-final-intro h3 {
        margin: 0 0 13px !important;

        font-size: 1.78rem !important;
        line-height: 1.08 !important;

        font-weight: 830 !important;
        letter-spacing: -.028em !important;

        color: #e4efff !important;

        background:
            linear-gradient(
                105deg,
                #edf5ff 0%,
                #c0dcff 48%,
                #66aaff 100%
            ) !important;

        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;

        text-shadow: none !important;
    }


    #contact .contact-final-intro > p {
        margin: 0 !important;

        color: #9dafc7 !important;

        font-size: .94rem !important;
        line-height: 1.66 !important;

        font-weight: 470 !important;
    }


    /* ======================================================
       ACTIONS
       ====================================================== */

    #contact .contact-final-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 9px !important;

        margin-top: 21px !important;
    }


    /* ======================================================
       EMAIL — PRIMARY
       ====================================================== */

    #contact .contact-primary-btn {
        position: relative !important;
        overflow: hidden !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 12px !important;

        min-height: 53px !important;

        padding: 0 18px !important;

        border-radius: 14px !important;

        color: #ffffff !important;

        background:
            linear-gradient(
                105deg,
                #0c2f6d 0%,
                #174da9 35%,
                #2563dc 66%,
                #3783f6 100%
            ) !important;

        border:
            1px solid rgba(126, 181, 255, .33) !important;

        box-shadow:
            0 14px 28px rgba(25, 86, 210, .23),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 18px 0 30px rgba(2,13,31,.15) !important;

        font-size: .95rem !important;
        font-weight: 770 !important;

        -webkit-tap-highlight-color: transparent !important;

        transition:
            transform .20s ease,
            filter .22s ease,
            box-shadow .22s ease !important;
    }


    /* moving sheen */
    #contact .contact-primary-btn::before {
        content: '' !important;

        position: absolute !important;

        top: -35% !important;
        left: -70px !important;

        width: 45px !important;
        height: 170% !important;

        transform: rotate(16deg) !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.13),
                transparent
            ) !important;

        animation:
            contactEmailSweep
            5.3s ease-in-out
            infinite !important;

        pointer-events: none !important;
    }


    @keyframes contactEmailSweep {

        0%, 36% {
            left: -70px;
            opacity: 0;
        }

        48% {
            opacity: .65;
        }

        78% {
            opacity: .30;
        }

        90%, 100% {
            left: calc(100% + 35px);
            opacity: 0;
        }
    }


    #contact .contact-primary-btn:active {
        transform: scale(.982) !important;

        filter: brightness(1.05) !important;

        box-shadow:
            0 10px 22px rgba(25,86,210,.19),
            inset 0 1px 0 rgba(255,255,255,.13) !important;
    }


    #contact .contact-primary-btn span {
        transition: transform .20s ease !important;
    }


    #contact .contact-primary-btn:active span {
        transform: translateX(3px) !important;
    }


    /* ======================================================
       LINKEDIN — GLASS SECONDARY
       ====================================================== */

    #contact .contact-secondary-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 50px !important;

        padding: 0 18px !important;

        border-radius: 14px !important;

        color: #80baff !important;

        background:
            radial-gradient(
                circle at 85% 0%,
                rgba(51,123,219,.12),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                rgba(10,35,66,.60),
                rgba(6,24,46,.43)
            ) !important;

        border:
            1px solid rgba(80, 148, 232, .25) !important;

        backdrop-filter:
            blur(10px)
            saturate(120%) !important;

        -webkit-backdrop-filter:
            blur(10px)
            saturate(120%) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 8px 18px rgba(0,0,0,.10) !important;

        font-size: .93rem !important;
        font-weight: 730 !important;

        -webkit-tap-highlight-color: transparent !important;

        transition:
            transform .20s ease,
            border-color .22s ease,
            background .22s ease !important;
    }


    #contact .contact-secondary-btn:active {
        transform: scale(.985) !important;

        border-color:
            rgba(103,174,255,.40) !important;

        background:
            linear-gradient(
                145deg,
                rgba(15,48,88,.68),
                rgba(7,29,55,.50)
            ) !important;
    }


    /* ======================================================
       CONTACT DETAILS GROUP
       ====================================================== */

    #contact .contact-final-details {
        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;

        margin-top: 1px !important;

        padding-top: 14px !important;

        border-top:
            1px solid rgba(75,137,211,.13) !important;
    }


    /* ======================================================
       DETAIL ROWS — INTEGRATED GLASS
       ====================================================== */

    #contact .contact-detail-row {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            44px minmax(0, 1fr) auto !important;

        align-items: center !important;

        gap: 12px !important;

        min-height: 68px !important;

        padding: 9px 11px !important;

        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(10,31,56,.48),
                rgba(6,22,41,.32)
            ) !important;

        border:
            1px solid rgba(73,136,216,.14) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.018) !important;

        -webkit-tap-highlight-color: transparent !important;

        transition:
            transform .20s ease,
            background .22s ease,
            border-color .22s ease !important;
    }


    /* ======================================================
       DETAIL ICON
       ====================================================== */

    #contact .contact-detail-icon {
        width: 40px !important;
        height: 40px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        color: #70b0ff !important;

        background:
            linear-gradient(
                145deg,
                rgba(17,67,124,.46),
                rgba(8,35,68,.35)
            ) !important;

        border:
            1px solid rgba(81,151,238,.24) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03) !important;
    }


    #contact .contact-detail-icon svg {
        width: 20px !important;
        height: 20px !important;

        fill: none !important;

        stroke: currentColor !important;
        stroke-width: 1.7 !important;
    }


    #contact .contact-detail-label {
        display: block !important;

        margin-bottom: 4px !important;

        color: #7e95b3 !important;

        font-size: .60rem !important;
        line-height: 1 !important;

        font-weight: 830 !important;
        letter-spacing: .13em !important;
    }


    #contact .contact-detail-row strong {
        display: block !important;

        min-width: 0 !important;

        color: #dce8f7 !important;

        font-size: .83rem !important;
        line-height: 1.32 !important;

        font-weight: 690 !important;

        overflow-wrap: anywhere !important;
    }


    #contact .contact-row-arrow {
        color: #5c9be9 !important;

        font-size: .90rem !important;

        opacity: .58 !important;

        transition:
            transform .20s ease,
            opacity .20s ease !important;
    }


    #contact .contact-detail-link:active {
        transform: scale(.988) !important;

        background:
            linear-gradient(
                145deg,
                rgba(14,42,76,.58),
                rgba(7,28,52,.42)
            ) !important;

        border-color:
            rgba(91,158,240,.28) !important;
    }


    #contact
    .contact-detail-link:active
    .contact-row-arrow {
        transform:
            translate(2px,-2px) !important;

        opacity: 1 !important;
    }

}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 355px) {

    #contact .contact-final-shell {
        padding: 17px !important;
    }

    #contact .contact-final-intro h3 {
        font-size: 1.58rem !important;
    }

    #contact .contact-detail-row {
        grid-template-columns:
            40px minmax(0, 1fr) auto !important;

        gap: 9px !important;

        padding: 8px 9px !important;
    }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    #contact .contact-final-shell::before,
    #contact .contact-status-dot,
    #contact .contact-primary-btn::before {
        animation: none !important;
    }
}

/* ===== CONTACT MOBILE CINEMATIC FINAL END ===== */



/* ===== CONTACT FINAL MICRO POLISH START ===== */

@media (max-width: 700px) {

    /* ======================================================
       GIVE THE PAGE A REAL END
       ====================================================== */

    #contact {
        padding-bottom:
            82px !important;
    }


    /* ======================================================
       TIGHTER MAIN SHELL
       ====================================================== */

    #contact .contact-final-shell {
        gap:
            13px !important;

        padding:
            18px !important;
    }


    /* ======================================================
       SMALLER STATUS PILL
       ====================================================== */

    #contact .contact-status {
        margin-bottom:
            15px !important;

        padding:
            7px 11px !important;

        gap:
            8px !important;

        font-size:
            .68rem !important;
    }


    #contact .contact-status-dot {
        width:
            7px !important;

        height:
            7px !important;

        flex-basis:
            7px !important;
    }


    /* ======================================================
       INTRO SPACING
       ====================================================== */

    #contact .contact-final-intro h3 {
        margin-bottom:
            11px !important;
    }


    #contact .contact-final-actions {
        margin-top:
            18px !important;

        gap:
            8px !important;
    }


    /* ======================================================
       EMAIL BUTTON — SLIGHTLY LESS BRIGHT
       ====================================================== */

    #contact .contact-primary-btn {
        min-height:
            51px !important;

        background:
            linear-gradient(
                105deg,
                #0b2c65 0%,
                #15479e 36%,
                #215dce 68%,
                #3276e8 100%
            ) !important;

        box-shadow:
            0 12px 24px rgba(24, 78, 190, .20),
            inset 0 1px 0 rgba(255,255,255,.11),
            inset 16px 0 26px rgba(2,13,31,.13) !important;
    }


    #contact .contact-secondary-btn {
        min-height:
            48px !important;
    }


    /* ======================================================
       DETAILS CLOSER TO BUTTONS
       ====================================================== */

    #contact .contact-final-details {
        margin-top:
            0 !important;

        padding-top:
            11px !important;

        gap:
            5px !important;
    }


    /* ======================================================
       FLATTER / MORE INTEGRATED DETAIL ROWS
       ====================================================== */

    #contact .contact-detail-row {
        min-height:
            64px !important;

        padding:
            8px 10px !important;

        border-radius:
            12px !important;

        background:
            linear-gradient(
                145deg,
                rgba(9, 29, 52, .38),
                rgba(6, 21, 39, .25)
            ) !important;

        border:
            1px solid rgba(72, 134, 211, .10) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.012) !important;
    }


    #contact .contact-detail-icon {
        width:
            38px !important;

        height:
            38px !important;

        border-radius:
            11px !important;
    }


    #contact .contact-detail-row strong {
        font-size:
            .81rem !important;
    }


    #contact .contact-detail-label {
        margin-bottom:
            3px !important;

        font-size:
            .58rem !important;
    }

}


/* smaller phones */
@media (max-width: 355px) {

    #contact {
        padding-bottom:
            90px !important;
    }

}

/* ===== CONTACT FINAL MICRO POLISH END ===== */



















/* ===== MOBILE SCROLL STRUCTURE FINAL START ===== */

@media (max-width: 700px) {

    /*
       Keep normal browser document scrolling.
       Do NOT create another viewport-height scroll container.
    */

    html {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        position: static !important;

        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;

        overflow-x: hidden !important;
    }


    /*
       Contact stays in normal document flow.
       Its inner card may still clip visual effects to its
       rounded corners, which is intentional.
    */

    #contact,
    #contact.contact-final,
    .contact-final {
        position: relative !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        padding-bottom: 28px !important;
    }


    #contact .container,
    #contact .contact-final-shell,
    #contact .contact-final-intro,
    #contact .contact-final-actions,
    #contact .contact-final-details {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }


    #contact .contact-final-shell {
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }


    /*
       REAL document-flow spacer.
       This is not fake Contact padding.
       It physically exists after the page content and therefore
       guarantees that the browser's scrollHeight extends beyond
       the final card and floating navbar.
    */

    .portfolio-mobile-end-spacer {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: 110px !important;

        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background:
            linear-gradient(
                180deg,
                #040911 0%,
                #030711 100%
            ) !important;

        pointer-events: none !important;
    }

}


/* Desktop should not get extra blank space */
@media (min-width: 701px) {

    .portfolio-mobile-end-spacer {
        display: none !important;
    }

}

/* ===== MOBILE SCROLL STRUCTURE FINAL END ===== */



/* ===== CONTACT LOCATION + PAGE END POLISH START ===== */

@media (max-width: 700px) {

    /* ======================================================
       LOCATION — PREMIUM GLASS ROW
       ====================================================== */

    #contact
    .contact-final-details
    > .contact-detail-row:first-child {

        position:
            relative !important;

        min-height:
            66px !important;

        padding:
            10px 12px !important;

        border-radius:
            15px !important;

        overflow:
            hidden !important;

        background:
            radial-gradient(
                circle at 0% 50%,
                rgba(46, 121, 221, .15),
                transparent 40%
            ),
            linear-gradient(
                120deg,
                rgba(10, 38, 70, .62),
                rgba(6, 24, 46, .43) 58%,
                rgba(5, 19, 37, .34)
            ) !important;

        border:
            1px solid rgba(79, 151, 238, .20) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 9px 20px rgba(0,0,0,.10) !important;

        backdrop-filter:
            blur(11px)
            saturate(120%) !important;

        -webkit-backdrop-filter:
            blur(11px)
            saturate(120%) !important;

        transition:
            transform .22s ease,
            border-color .22s ease,
            background .22s ease !important;
    }


    /* subtle inner blue atmosphere */
    #contact
    .contact-final-details
    > .contact-detail-row:first-child::before {

        content:
            '' !important;

        position:
            absolute !important;

        width:
            85px !important;

        height:
            85px !important;

        left:
            -38px !important;

        top:
            50% !important;

        transform:
            translateY(-50%) !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle,
                rgba(73, 151, 255, .17),
                transparent 70%
            ) !important;

        filter:
            blur(7px) !important;

        pointer-events:
            none !important;
    }


    /* remove old blue dot on right */
    #contact
    .contact-final-details
    > .contact-detail-row:first-child::after {

        display:
            none !important;

        content:
            none !important;
    }


    /* ======================================================
       LOCATION ICON
       ====================================================== */

    #contact
    .contact-final-details
    > .contact-detail-row:first-child
    .contact-detail-icon {

        position:
            relative !important;

        z-index:
            2 !important;

        width:
            42px !important;

        height:
            42px !important;

        border-radius:
            13px !important;

        color:
            #79b7ff !important;

        background:
            linear-gradient(
                145deg,
                rgba(17, 71, 133, .55),
                rgba(8, 35, 68, .44)
            ) !important;

        border:
            1px solid rgba(92, 164, 250, .27) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 7px 16px rgba(0,0,0,.12) !important;
    }


    /* ======================================================
       LOCATION TEXT
       ====================================================== */

    #contact
    .contact-final-details
    > .contact-detail-row:first-child
    .contact-detail-label {

        color:
            #8199b8 !important;

        font-size:
            .57rem !important;

        font-weight:
            850 !important;

        letter-spacing:
            .15em !important;
    }


    #contact
    .contact-final-details
    > .contact-detail-row:first-child
    strong {

        color:
            #e2edfb !important;

        font-size:
            .84rem !important;

        font-weight:
            720 !important;

        letter-spacing:
            -.01em !important;
    }


    /* tiny touch response */
    #contact
    .contact-final-details
    > .contact-detail-row:first-child:active {

        transform:
            scale(.988) !important;

        border-color:
            rgba(96, 169, 255, .34) !important;
    }


    /* ======================================================
       FOOTER — CLEANER END
       ====================================================== */

    .footer {
        padding-top:
            17px !important;

        padding-bottom:
            17px !important;
    }


    .footer p {
        color:
            #667b95 !important;

        font-size:
            .65rem !important;

        opacity:
            .88 !important;
    }


    /*
       We only needed 110px while diagnosing the scroll.
       Now keep a tiny intentional finish.
    */

    .portfolio-mobile-end-spacer {
        height:
            24px !important;

        background:
            #030711 !important;
    }

}

/* ===== CONTACT LOCATION + PAGE END POLISH END ===== */



/* ===== EMAIL BUTTON EDGE FIX START ===== */

@media (max-width: 700px) {

    #contact .contact-final-actions {
        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }


    #contact .contact-primary-btn,
    #contact .contact-secondary-btn {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform-origin: center !important;
    }


    #contact .contact-primary-btn {
        left: auto !important;
        right: auto !important;
    }

}

/* ===== EMAIL BUTTON EDGE FIX END ===== */



/* ===== EMAIL ARTIFACT CLEANUP START ===== */

@media (max-width: 700px) {

    /* Kill the old animated layer completely */
    #contact .contact-primary-btn::before,
    #contact .contact-primary-btn::after {
        content: none !important;
        display: none !important;
        animation: none !important;
    }


    #contact .contact-primary-btn {
        overflow: hidden !important;
        isolation: isolate !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;

        box-sizing: border-box !important;
    }

}

/* ===== EMAIL ARTIFACT CLEANUP END ===== */



/* ===== CONTACT BUTTON WIDTH POLISH START ===== */

@media (max-width: 700px) {

    #contact .contact-primary-btn,
    #contact .contact-secondary-btn {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;
    }

    #contact .contact-primary-btn {
        min-height: 50px !important;
    }

    #contact .contact-secondary-btn {
        min-height: 47px !important;
    }

}

/* ===== CONTACT BUTTON WIDTH POLISH END ===== */



/* ===== FINAL SITE END POLISH START ===== */

@media (max-width: 700px) {

    /* ======================================================
       FINAL DIVIDER ABOVE FOOTER
       ====================================================== */

    .footer {
        position: relative !important;

        margin-top:
            8px !important;

        padding-top:
            28px !important;

        padding-bottom:
            18px !important;

        overflow:
            visible !important;

        background:
            linear-gradient(
                180deg,
                rgba(4, 10, 20, .98),
                #030711
            ) !important;

        border-top:
            none !important;
    }


    .footer::before {
        content: '' !important;

        position: absolute !important;

        top:
            7px !important;

        left:
            50% !important;

        width:
            72% !important;

        height:
            1px !important;

        transform:
            translateX(-50%) !important;

        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(74, 151, 244, .16) 18%,
                rgba(83, 166, 255, .55) 50%,
                rgba(74, 151, 244, .16) 82%,
                transparent 100%
            ) !important;

        pointer-events:
            none !important;
    }


    /* tiny center light */
    .footer::after {
        content: '' !important;

        position: absolute !important;

        top:
            4px !important;

        left:
            50% !important;

        width:
            7px !important;

        height:
            7px !important;

        transform:
            translateX(-50%) !important;

        border-radius:
            50% !important;

        background:
            #5da7ff !important;

        box-shadow:
            0 0 9px rgba(93, 167, 255, .45),
            0 0 20px rgba(62, 134, 229, .16) !important;

        opacity:
            .78 !important;

        pointer-events:
            none !important;

        animation:
            footerEndPulse
            3.6s ease-in-out
            infinite !important;
    }


    @keyframes footerEndPulse {

        0%,
        100% {
            transform:
                translateX(-50%)
                scale(.88);

            opacity:
                .55;
        }

        50% {
            transform:
                translateX(-50%)
                scale(1.08);

            opacity:
                .95;
        }
    }


    /* ======================================================
       COPYRIGHT
       ====================================================== */

    .footer p {
        position:
            relative !important;

        z-index:
            2 !important;

        margin:
            0 !important;

        text-align:
            center !important;

        color:
            #71849d !important;

        font-size:
            .64rem !important;

        line-height:
            1.5 !important;

        letter-spacing:
            .01em !important;

        opacity:
            .90 !important;
    }


    /* keep the very final blank area small */
    .portfolio-mobile-end-spacer {
        height:
            16px !important;

        background:
            #030711 !important;
    }

}


/* accessibility */
@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    .footer::after {
        animation:
            none !important;
    }

}

/* ===== FINAL SITE END POLISH END ===== */



/* ===== FOOTER GLOW BOOST START ===== */

@media (max-width: 700px) {

    .footer::after {
        width: 8px !important;
        height: 8px !important;

        top: 3px !important;

        background:
            #6cb3ff !important;

        box-shadow:
            0 0 8px rgba(108, 179, 255, .75),
            0 0 18px rgba(87, 158, 247, .42),
            0 0 32px rgba(55, 126, 226, .20) !important;

        animation:
            footerEndPulseBoost
            3.1s ease-in-out
            infinite !important;
    }


    @keyframes footerEndPulseBoost {

        0%,
        100% {
            transform:
                translateX(-50%)
                scale(.86);

            opacity:
                .52;

            box-shadow:
                0 0 6px rgba(108, 179, 255, .50),
                0 0 14px rgba(87, 158, 247, .24),
                0 0 24px rgba(55, 126, 226, .10);
        }

        50% {
            transform:
                translateX(-50%)
                scale(1.18);

            opacity:
                1;

            box-shadow:
                0 0 10px rgba(108, 179, 255, .95),
                0 0 22px rgba(87, 158, 247, .58),
                0 0 38px rgba(55, 126, 226, .28);
        }
    }

}

/* ===== FOOTER GLOW BOOST END ===== */



/* ===== MOBILE HERO NAV CLEARANCE START ===== */

@media (max-width: 700px) {

    #home {
        padding-top: 88px !important;
    }

}

/* ===== MOBILE HERO NAV CLEARANCE END ===== */



/* ===== CERTIFICATIONS MOBILE GAP FIX START ===== */

@media (max-width: 700px) {

    #certifications .section-title {
        margin-bottom: 30px !important;
    }

    #certifications .certifications-grid,
    #certifications .certification-grid,
    #certifications .cert-grid {
        margin-top: 0 !important;
    }

}

/* ===== CERTIFICATIONS MOBILE GAP FIX END ===== */



/* ===== MOBILE SECTION LANDING OFFSET START ===== */

@media (max-width: 700px) {

    #about,
    #experience,
    #projects,
    #skills,
    #certifications,
    #beyond-it,
    #contact {
        scroll-margin-top: 96px !important;
    }

}

/* ===== MOBILE SECTION LANDING OFFSET END ===== */



/* ===== CONTACT LANDING FINAL OFFSET START ===== */

@media (max-width: 700px) {

    #contact {
        scroll-margin-top: 125px !important;
    }

}

/* ===== CONTACT LANDING FINAL OFFSET END ===== */



/* ===== CONTACT MATCH SKILLS SPACING START ===== */

@media (max-width: 700px) {

    /*
       Give Contact the same real breathing space
       that sections like Skills have before the heading.
    */

    #contact {
        padding-top: 88px !important;
        scroll-margin-top: 96px !important;
    }

}

/* ===== CONTACT MATCH SKILLS SPACING END ===== */



/* ===== MOBILE REVEAL MASTER START ===== */

@media (max-width: 700px) {

    .mobile-reveal-master {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.992);

        transition:
            opacity .62s cubic-bezier(.22,.61,.36,1),
            transform .72s cubic-bezier(.22,.61,.36,1);

        will-change:
            opacity,
            transform;
    }


    .mobile-reveal-master.mobile-reveal-visible {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }


    /* headings should feel a little cleaner/faster */
    .section-title.mobile-reveal-master {
        transform:
            translateY(14px);

        transition-duration:
            .52s,
            .62s;
    }


    /* stagger helper classes */
    .mobile-reveal-delay-1 {
        transition-delay: .05s;
    }

    .mobile-reveal-delay-2 {
        transition-delay: .10s;
    }

    .mobile-reveal-delay-3 {
        transition-delay: .15s;
    }

    .mobile-reveal-delay-4 {
        transition-delay: .20s;
    }

}


/* Accessibility */
@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    .mobile-reveal-master {
        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }

}

/* ===== MOBILE REVEAL MASTER END ===== */



/* ===== FOOTER BREATHING LIGHT FINAL START ===== */

@media (max-width: 700px) {

    .footer::after {

        width:
            8px !important;

        height:
            8px !important;

        background:
            #74b9ff !important;

        opacity:
            1 !important;

        animation:
            footerBreathingLight
            2.6s ease-in-out
            infinite !important;

        will-change:
            transform,
            opacity,
            box-shadow !important;
    }


    @keyframes footerBreathingLight {

        0%,
        100% {

            transform:
                translateX(-50%)
                scale(.88);

            opacity:
                .60;

            box-shadow:
                0 0 4px rgba(116,185,255,.55),
                0 0 10px rgba(83,157,247,.26),
                0 0 20px rgba(45,112,211,.10);
        }


        50% {

            transform:
                translateX(-50%)
                scale(1.16);

            opacity:
                1;

            box-shadow:
                0 0 9px rgba(116,185,255,1),
                0 0 20px rgba(83,157,247,.70),
                0 0 38px rgba(45,112,211,.34),
                0 0 55px rgba(41,103,196,.13);
        }

    }

}


/* Reduced motion */
@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    .footer::after {
        animation:
            none !important;
    }

}

/* ===== FOOTER BREATHING LIGHT FINAL END ===== */



/* ===== FOOTER GLOW STRONG FINAL START ===== */

@media (max-width: 700px) {

    .footer::after {

        width:
            9px !important;

        height:
            9px !important;

        background:
            #7fc0ff !important;

        animation:
            footerGlowStrong
            2.35s ease-in-out
            infinite !important;

        will-change:
            transform,
            opacity,
            box-shadow !important;
    }


    @keyframes footerGlowStrong {

        0%,
        100% {

            transform:
                translateX(-50%)
                scale(.86);

            opacity:
                .58;

            box-shadow:
                0 0 6px rgba(127,192,255,.62),
                0 0 14px rgba(89,164,255,.34),
                0 0 28px rgba(48,120,224,.16),
                0 0 44px rgba(43,104,198,.07);
        }


        50% {

            transform:
                translateX(-50%)
                scale(1.24);

            opacity:
                1;

            box-shadow:
                0 0 12px rgba(127,192,255,1),
                0 0 26px rgba(89,164,255,.88),
                0 0 46px rgba(48,120,224,.52),
                0 0 70px rgba(43,104,198,.24);
        }

    }

}


@media (
    max-width: 700px
) and (
    prefers-reduced-motion: reduce
) {

    .footer::after {
        animation:
            none !important;
    }

}

/* ===== FOOTER GLOW STRONG FINAL END ===== */



/* ===== MOBILE NAV HEIGHT FIX START ===== */

@media (max-width: 700px) {

    .nav-menu {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding-bottom: 18px !important;
    }

}

/* ===== MOBILE NAV HEIGHT FIX END ===== */



/* ===== MOBILE NAV CONTENT HEIGHT FINAL START ===== */

@media (max-width: 900px) {

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            calc(100dvh - 90px) !important;

        padding-bottom:
            18px !important;

        overflow-y:
            auto !important;
    }

}


/* fallback */
@supports not (height: 100dvh) {

    @media (max-width: 900px) {

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {

            height:
                auto !important;

            min-height:
                0 !important;

            max-height:
                calc(100vh - 90px) !important;
        }

    }

}

/* ===== MOBILE NAV CONTENT HEIGHT FINAL END ===== */



/* ===== MOBILE LIQUID GLASS NAV START ===== */

@media (max-width: 900px) {

    /* ======================================================
       FLOATING STK BAR — DARK LIQUID GLASS
       ====================================================== */

    .navbar {

        background:
            linear-gradient(
                135deg,
                rgba(5, 18, 33, .70),
                rgba(5, 20, 39, .56)
            ) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(155%) !important;

        backdrop-filter:
            blur(18px)
            saturate(155%) !important;

        border:
            1px solid rgba(111, 172, 255, .16) !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.075),
            inset 0 -1px 0 rgba(72,141,227,.045) !important;
    }


    /*
       Very subtle light layer.
       Gives the bar that curved glass feeling.
    */

    .navbar::before {

        content:
            '' !important;

        position:
            absolute !important;

        inset:
            0 !important;

        pointer-events:
            none !important;

        border-radius:
            inherit !important;

        background:
            linear-gradient(
                115deg,
                rgba(255,255,255,.07) 0%,
                rgba(255,255,255,.015) 30%,
                transparent 55%,
                rgba(68,142,241,.045) 100%
            ) !important;

        opacity:
            .72 !important;
    }



    /* ======================================================
       OPEN NAVIGATION PANEL — FROSTED GLASS
       ====================================================== */

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {

        background:
            linear-gradient(
                145deg,
                rgba(5, 20, 41, .78) 0%,
                rgba(4, 17, 34, .67) 52%,
                rgba(3, 15, 29, .72) 100%
            ) !important;

        -webkit-backdrop-filter:
            blur(22px)
            saturate(145%) !important;

        backdrop-filter:
            blur(22px)
            saturate(145%) !important;

        border:
            1px solid rgba(88, 153, 239, .18) !important;

        box-shadow:
            0 22px 50px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.075),
            inset 0 -1px 0 rgba(62,131,223,.05) !important;
    }



    /* ======================================================
       GLASS LIGHT REFLECTION
       ====================================================== */

    .nav-menu.active::before,
    .nav-menu.open::before,
    .nav-menu.show::before,
    .nav-menu.is-open::before {

        /*
           Keep your Navigation heading exactly as it is.
           Do NOT replace it with a decorative overlay.
        */
    }



    /* ======================================================
       MENU ROWS
       ====================================================== */

    .nav-menu .nav-link {

        background:
            transparent !important;

        border-color:
            transparent !important;
    }


    .nav-menu .nav-link.active {

        background:
            linear-gradient(
                100deg,
                rgba(43, 112, 203, .25),
                rgba(13, 48, 89, .15)
            ) !important;

        border:
            1px solid rgba(102, 171, 255, .19) !important;

        box-shadow:
            inset 3px 0 0 #58a4ff,
            inset 0 1px 0 rgba(255,255,255,.045),
            0 5px 18px rgba(0,0,0,.10) !important;
    }



    /* ======================================================
       CONTACT CTA — GLASSY BLUE
       ====================================================== */

    .nav-menu .cta-nav {

        background:
            linear-gradient(
                135deg,
                rgba(24, 81, 205, .86),
                rgba(46, 107, 241, .83)
            ) !important;

        -webkit-backdrop-filter:
            blur(12px) !important;

        backdrop-filter:
            blur(12px) !important;

        border:
            1px solid rgba(141, 190, 255, .32) !important;

        box-shadow:
            0 10px 25px rgba(21, 80, 190, .22),
            inset 0 1px 0 rgba(255,255,255,.17) !important;
    }

}


/* ==========================================================
   FALLBACK FOR BROWSERS WITHOUT BACKDROP FILTER
   ========================================================== */

@supports not (
    backdrop-filter: blur(10px)
) {

    @media (max-width: 900px) {

        .navbar {
            background:
                rgba(5, 18, 34, .94) !important;
        }

        .nav-menu.active,
        .nav-menu.open,
        .nav-menu.show,
        .nav-menu.is-open {
            background:
                rgba(4, 17, 34, .96) !important;
        }

    }

}

/* ===== MOBILE LIQUID GLASS NAV END ===== */



/* ===== MOBILE GLASS NAV REFINEMENT START ===== */

@media (max-width: 900px) {

    /* Floating STK bar */
    .navbar {
        background:
            linear-gradient(
                135deg,
                rgba(4, 17, 32, .82),
                rgba(5, 20, 38, .74)
            ) !important;

        -webkit-backdrop-filter:
            blur(22px)
            saturate(150%) !important;

        backdrop-filter:
            blur(22px)
            saturate(150%) !important;

        border:
            1px solid rgba(104, 166, 247, .18) !important;
    }


    /* Open navigation glass panel */
    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {

        background:
            linear-gradient(
                145deg,
                rgba(4, 18, 37, .88) 0%,
                rgba(4, 17, 34, .82) 55%,
                rgba(3, 15, 29, .86) 100%
            ) !important;

        -webkit-backdrop-filter:
            blur(28px)
            saturate(145%) !important;

        backdrop-filter:
            blur(28px)
            saturate(145%) !important;

        border:
            1px solid rgba(91, 154, 239, .20) !important;

        box-shadow:
            0 22px 48px rgba(0,0,0,.36),
            inset 0 1px 0 rgba(255,255,255,.07) !important;
    }

}

/* ===== MOBILE GLASS NAV REFINEMENT END ===== */



/* ===== MOBILE NAV GLASS BALANCE START ===== */

@media (max-width: 900px) {

    /* ======================================================
       STK BAR — MORE VISIBLE GLASS
       ====================================================== */

    .navbar {
        background:
            linear-gradient(
                135deg,
                rgba(5, 18, 34, .68),
                rgba(5, 20, 38, .58)
            ) !important;

        -webkit-backdrop-filter:
            blur(20px)
            saturate(155%) !important;

        backdrop-filter:
            blur(20px)
            saturate(155%) !important;

        border:
            1px solid rgba(108, 170, 255, .18) !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.26),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
    }


    /* ======================================================
       NAVIGATION PANEL — DARKER, CLEANER GLASS
       MATCHES STK BAR TONE
       ====================================================== */

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {

        background:
            linear-gradient(
                145deg,
                rgba(4, 17, 33, .96),
                rgba(4, 18, 35, .93)
            ) !important;

        -webkit-backdrop-filter:
            blur(22px)
            saturate(135%) !important;

        backdrop-filter:
            blur(22px)
            saturate(135%) !important;

        border:
            1px solid rgba(91, 153, 237, .18) !important;

        box-shadow:
            0 20px 45px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.06) !important;
    }


    /* active row stays glassy but readable */
    .nav-menu .nav-link.active {

        background:
            linear-gradient(
                100deg,
                rgba(34, 94, 170, .34),
                rgba(12, 41, 76, .22)
            ) !important;

        border:
            1px solid rgba(96, 163, 246, .20) !important;
    }

}

/* ===== MOBILE NAV GLASS BALANCE END ===== */



/* ===== NAV PANEL DARK GLASS FINAL START ===== */

@media (max-width: 900px) {

    .nav-menu.active,
    .nav-menu.open,
    .nav-menu.show,
    .nav-menu.is-open {

        background:
            linear-gradient(
                145deg,
                rgba(4, 17, 33, .985),
                rgba(4, 18, 35, .965)
            ) !important;

        -webkit-backdrop-filter:
            blur(20px)
            saturate(125%) !important;

        backdrop-filter:
            blur(20px)
            saturate(125%) !important;

        border:
            1px solid rgba(91, 153, 237, .18) !important;

        box-shadow:
            0 20px 45px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.055) !important;
    }

}

/* ===== NAV PANEL DARK GLASS FINAL END ===== */











/* ===== MOBILE TOUCH LIGHT PREMIUM START ===== */

@media (max-width: 900px) {

    .mobile-touch-light {
        position: fixed;
        left: 0;
        top: 0;

        width: 64px;
        height: 64px;

        pointer-events: none;
        z-index: 99999;

        transform:
            translate(-50%, -50%)
            scale(.45);

        opacity: 0;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(195, 229, 255, .95) 0%,
                rgba(104, 181, 255, .55) 14%,
                rgba(57, 133, 246, .22) 35%,
                rgba(36, 95, 202, .08) 55%,
                rgba(36, 95, 202, 0) 72%
            );

        filter:
            blur(1px);

        will-change:
            transform,
            opacity;
    }


    .mobile-touch-light::after {
        content: '';

        position: absolute;
        inset: 14px;

        border-radius: 50%;

        border:
            1px solid rgba(111, 185, 255, .48);

        opacity: 0;
    }


    .mobile-touch-light.touch-light-active {
        animation:
            touchLightBloom
            .58s
            cubic-bezier(.22,.61,.36,1)
            forwards;
    }


    .mobile-touch-light.touch-light-active::after {
        animation:
            touchLightRing
            .58s
            cubic-bezier(.22,.61,.36,1)
            forwards;
    }


    @keyframes touchLightBloom {

        0% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(.35);
        }

        14% {
            opacity: .95;
            transform:
                translate(-50%, -50%)
                scale(.68);
        }

        42% {
            opacity: .62;
            transform:
                translate(-50%, -50%)
                scale(1);
        }

        100% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(1.55);
        }

    }


    @keyframes touchLightRing {

        0% {
            opacity: 0;
            transform: scale(.55);
        }

        24% {
            opacity: .62;
        }

        100% {
            opacity: 0;
            transform: scale(1.9);
        }

    }

}


@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mobile-touch-light {
        display: none !important;
    }

}

/* ===== MOBILE TOUCH LIGHT PREMIUM END ===== */



/* ===== MOBILE TOUCH LIGHT PREMIUM FINAL START ===== */

@media (max-width: 900px) {

    .mobile-touch-light {

        width:
            78px !important;

        height:
            78px !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle,
                rgba(228, 244, 255, .90) 0%,
                rgba(146, 207, 255, .48) 8%,
                rgba(84, 164, 255, .24) 22%,
                rgba(51, 126, 236, .10) 42%,
                rgba(35, 88, 190, .035) 56%,
                rgba(35, 88, 190, 0) 72%
            ) !important;

        box-shadow:
            none !important;

        filter:
            blur(2.4px) !important;

        opacity:
            0;

        transform:
            translate(-50%, -50%)
            scale(.35);

        will-change:
            transform,
            opacity;
    }


    /*
       Remove the old visible ring completely.
    */

    .mobile-touch-light::before,
    .mobile-touch-light::after {

        content:
            none !important;

        display:
            none !important;
    }


    .mobile-touch-light.touch-light-active {

        animation:
            premiumTouchBloom
            .46s
            cubic-bezier(.22,.61,.36,1)
            forwards !important;
    }


    @keyframes premiumTouchBloom {

        0% {

            opacity:
                0;

            transform:
                translate(-50%, -50%)
                scale(.30);
        }


        14% {

            opacity:
                .82;

            transform:
                translate(-50%, -50%)
                scale(.55);
        }


        38% {

            opacity:
                .52;

            transform:
                translate(-50%, -50%)
                scale(.82);
        }


        68% {

            opacity:
                .22;

            transform:
                translate(-50%, -50%)
                scale(1.08);
        }


        100% {

            opacity:
                0;

            transform:
                translate(-50%, -50%)
                scale(1.34);
        }

    }

}


/* reduced motion */
@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mobile-touch-light {

        display:
            none !important;
    }

}

/* ===== MOBILE TOUCH LIGHT PREMIUM FINAL END ===== */



/* ===== MOBILE TOUCH LIGHT CENTER BOOST START ===== */

@media (max-width: 900px) {

    .mobile-touch-light {

        background:
            radial-gradient(
                circle,
                rgba(238, 248, 255, .98) 0%,
                rgba(162, 218, 255, .56) 8%,
                rgba(88, 168, 255, .26) 22%,
                rgba(51, 126, 236, .10) 42%,
                rgba(35, 88, 190, .035) 56%,
                rgba(35, 88, 190, 0) 72%
            ) !important;
    }

}

/* ===== MOBILE TOUCH LIGHT CENTER BOOST END ===== */



/* ===== MOBILE HERO FINAL MICRO POLISH START ===== */

@media (max-width: 900px) {

    /* ======================================================
       INFRASTRUCTURE & CLOUD
       Keep the label physically still.
       Only light / border should breathe.
       ====================================================== */

    .mobile-tech-v2-label {

        transform:
            translate3d(0, 0, 0) !important;

        animation:
            mobileInfraPremiumGlow
            3.4s ease-in-out
            infinite !important;

        will-change:
            box-shadow,
            border-color !important;
    }


    @keyframes mobileInfraPremiumGlow {

        0%,
        100% {

            transform:
                translate3d(0, 0, 0);

            border-color:
                rgba(67, 145, 255, .30);

            box-shadow:
                0 0 0 rgba(55,137,255,0),
                inset 0 1px 0 rgba(255,255,255,.025);
        }


        50% {

            transform:
                translate3d(0, 0, 0);

            border-color:
                rgba(92, 164, 255, .54);

            box-shadow:
                0 0 17px rgba(55,137,255,.14),
                inset 0 1px 0 rgba(255,255,255,.055);
        }

    }



    /* ======================================================
       NETWORKING ICON
       Cleaner node topology
       ====================================================== */

    .mobile-network-icon {

        position:
            relative !important;

        width:
            25px !important;

        height:
            23px !important;

        flex:
            0 0 25px !important;

        filter:
            drop-shadow(
                0 0 4px
                rgba(66,150,255,.20)
            );
    }


    /* three cleaner nodes */

    .mobile-network-icon i {

        width:
            6px !important;

        height:
            6px !important;

        border:
            1px solid
            rgba(177,220,255,.40) !important;

        background:
            radial-gradient(
                circle at 35% 30%,
                #a7d8ff 0%,
                #5cacff 34%,
                #2879e9 100%
            ) !important;

        box-shadow:
            0 0 5px rgba(91,176,255,.72),
            0 0 10px rgba(55,137,255,.30) !important;
    }


    .mobile-network-icon i:nth-child(1) {

        left:
            9.5px !important;

        top:
            0 !important;
    }


    .mobile-network-icon i:nth-child(2) {

        left:
            0 !important;

        bottom:
            0 !important;
    }


    .mobile-network-icon i:nth-child(3) {

        right:
            0 !important;

        bottom:
            0 !important;
    }


    /* left connection */

    .mobile-network-icon::before {

        content:
            '' !important;

        position:
            absolute !important;

        width:
            13px !important;

        height:
            1.5px !important;

        left:
            2px !important;

        top:
            11px !important;

        transform:
            rotate(-48deg) !important;

        transform-origin:
            center !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(65,151,255,.28),
                rgba(103,185,255,.95)
            ) !important;

        box-shadow:
            0 0 5px
            rgba(70,156,255,.28) !important;
    }


    /* right connection */

    .mobile-network-icon::after {

        content:
            '' !important;

        position:
            absolute !important;

        width:
            13px !important;

        height:
            1.5px !important;

        right:
            2px !important;

        top:
            11px !important;

        transform:
            rotate(48deg) !important;

        transform-origin:
            center !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(103,185,255,.95),
                rgba(65,151,255,.28)
            ) !important;

        box-shadow:
            0 0 5px
            rgba(70,156,255,.28) !important;
    }



    /* ======================================================
       CARD MOTION SMOOTHING
       Preserve movement but make it less mechanical.
       ====================================================== */

    .mobile-tech-v2-windows,
    .mobile-tech-v2-networking,
    .mobile-tech-v2-azure {

        backface-visibility:
            hidden !important;

        -webkit-backface-visibility:
            hidden !important;

        transform-style:
            preserve-3d !important;
    }


    .mobile-tech-v2-windows {

        animation:
            mobileWindowsPremiumFloat
            5.2s cubic-bezier(.45,0,.55,1)
            infinite !important;
    }


    @keyframes mobileWindowsPremiumFloat {

        0%,
        100% {
            transform:
                translate3d(0,0,0);
        }

        50% {
            transform:
                translate3d(-2px,-4px,0);
        }

    }


    .mobile-tech-v2-networking {

        animation:
            mobileNetworkingPremiumFloat
            5.5s cubic-bezier(.45,0,.55,1)
            infinite !important;
    }


    @keyframes mobileNetworkingPremiumFloat {

        0%,
        100% {
            transform:
                translate3d(0,0,0);
        }

        50% {
            transform:
                translate3d(2px,-4px,0);
        }

    }

}


/* reduced motion */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .mobile-tech-v2-label,
    .mobile-tech-v2-windows,
    .mobile-tech-v2-networking {

        animation:
            none !important;

        transform:
            none !important;
    }

}

/* ===== MOBILE HERO FINAL MICRO POLISH END ===== */



/* ===== STK PREMIUM MONOGRAM START ===== */

@media (max-width: 900px) {

    .logo {

        position:
            relative !important;

        display:
            inline-block !important;

        font-size:
            1.32rem !important;

        font-weight:
            900 !important;

        line-height:
            1 !important;

        letter-spacing:
            .13em !important;

        background:
            linear-gradient(
                120deg,
                #d9efff 0%,
                #9dceff 20%,
                #62adff 43%,
                #3b82f6 67%,
                #74b9ff 84%,
                #cce8ff 100%
            ) !important;

        background-size:
            220% 100% !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;

        filter:
            drop-shadow(
                0 0 5px
                rgba(81, 161, 255, .30)
            )
            drop-shadow(
                0 0 13px
                rgba(45, 113, 225, .10)
            ) !important;

        animation:
            stkPremiumShimmer
            6.5s ease-in-out
            infinite !important;

        transform:
            translateZ(0);

        will-change:
            background-position,
            filter;
    }


    @keyframes stkPremiumShimmer {

        0%,
        28% {
            background-position:
                100% 50%;

            filter:
                drop-shadow(
                    0 0 5px
                    rgba(81,161,255,.24)
                )
                drop-shadow(
                    0 0 12px
                    rgba(45,113,225,.08)
                );
        }


        48% {

            background-position:
                45% 50%;

            filter:
                drop-shadow(
                    0 0 7px
                    rgba(104,181,255,.43)
                )
                drop-shadow(
                    0 0 17px
                    rgba(45,113,225,.14)
                );
        }


        68%,
        100% {

            background-position:
                0% 50%;

            filter:
                drop-shadow(
                    0 0 5px
                    rgba(81,161,255,.24)
                )
                drop-shadow(
                    0 0 12px
                    rgba(45,113,225,.08)
                );
        }

    }

}


/* reduced motion */

@media (
    max-width: 900px
) and (
    prefers-reduced-motion: reduce
) {

    .logo {

        animation:
            none !important;

        background-position:
            50% 50% !important;
    }

}

/* ===== STK PREMIUM MONOGRAM END ===== */







/* ===== MOBILE STK BAR SLIM POLISH START ===== */

@media (max-width: 900px) {

    .navbar {

        min-height:
            52px !important;

        border-radius:
            16px !important;
    }


    .nav-container {

        height:
            52px !important;

        min-height:
            52px !important;

        padding:
            0 12px 0 16px !important;
    }


    .nav-toggle {

        width:
            37px !important;

        height:
            37px !important;

        border-radius:
            10px !important;
    }


    .logo {

        font-size:
            1.30rem !important;
    }

}

/* ===== MOBILE STK BAR SLIM POLISH END ===== */



/* ===== DESKTOP MOBILE-EFFECT CLEANUP START ===== */

/*
   These elements are created for mobile tap interactions.
   Hide them completely on desktop so they cannot affect
   layout or render default black SVG rectangles.
*/

@media (min-width: 901px) {

    #certifications .cert-trace-svg,

    #beyond-it .soccer-trace-svg,
    #beyond-it .soccer-border-svg,
    #beyond-it .soccer-orbit-light,

    .mobile-touch-light,
    .mobile-fingertip-glow {

        display:
            none !important;

        width:
            0 !important;

        height:
            0 !important;

        position:
            absolute !important;

        pointer-events:
            none !important;
    }


    /*
       Extra protection:
       even if an interaction SVG somehow becomes visible,
       its rectangle can never become a black fill.
    */

    #certifications .cert-trace-svg rect,
    #beyond-it .soccer-border-svg rect,
    #beyond-it .soccer-trace-svg rect {

        fill:
            none !important;
    }

}

/* ===== DESKTOP MOBILE-EFFECT CLEANUP END ===== */



/* ===== DESKTOP FLOATING GLASS NAV START ===== */

@media (min-width: 901px) {

    .navbar {

        /*
           FLOATING SHELL
        */

        position:
            sticky !important;

        top:
            12px !important;

        width:
            calc(100% - 36px) !important;

        margin:
            14px auto 0 !important;

        border-radius:
            20px !important;


        /*
           PREMIUM DARK GLASS
        */

        background:
            linear-gradient(
                135deg,
                rgba(5, 15, 29, .82) 0%,
                rgba(5, 18, 35, .72) 50%,
                rgba(4, 14, 27, .80) 100%
            ) !important;

        -webkit-backdrop-filter:
            blur(22px)
            saturate(145%) !important;

        backdrop-filter:
            blur(22px)
            saturate(145%) !important;


        /*
           GLASS EDGE
        */

        border:
            1px solid
            rgba(96, 165, 250, .17) !important;

        border-bottom:
            1px solid
            rgba(78, 145, 230, .16) !important;


        /*
           DEPTH
        */

        box-shadow:
            0 18px 45px rgba(0,0,0,.30),
            0 5px 18px rgba(0,0,0,.14),
            inset 0 1px 0 rgba(255,255,255,.065),
            inset 0 -1px 0 rgba(55,126,219,.035)
            !important;

        overflow:
            visible !important;

        z-index:
            1000 !important;

        isolation:
            isolate;
    }


    /*
       Keep the existing desktop navigation layout.
       Only make sure it follows the rounded shell.
    */

    .navbar .nav-container {

        border-radius:
            inherit !important;
    }

}

/* ===== DESKTOP FLOATING GLASS NAV END ===== */



/* ===== DESKTOP NAV PREMIUM POLISH START ===== */

@media (min-width: 901px) {

    /* ======================================================
       FLOATING GLASS SHELL
       Slightly slimmer + more frosted
       ====================================================== */

    .navbar {

        min-height:
            70px !important;

        background:
            linear-gradient(
                135deg,
                rgba(5, 15, 29, .74) 0%,
                rgba(5, 18, 35, .62) 50%,
                rgba(4, 14, 27, .72) 100%
            ) !important;

        -webkit-backdrop-filter:
            blur(26px)
            saturate(150%) !important;

        backdrop-filter:
            blur(26px)
            saturate(150%) !important;

        border:
            1px solid
            rgba(101, 168, 255, .18) !important;

        box-shadow:
            0 16px 40px rgba(0,0,0,.27),
            0 4px 14px rgba(0,0,0,.12),
            inset 0 1px 0 rgba(255,255,255,.075),
            inset 0 -1px 0 rgba(57,125,219,.035)
            !important;
    }


    .navbar .nav-container {

        min-height:
            70px !important;

        padding-top:
            0 !important;

        padding-bottom:
            0 !important;
    }



    /* ======================================================
       PREMIUM STK WORDMARK
       ====================================================== */

    .navbar .logo {

        position:
            relative !important;

        display:
            inline-block !important;

        font-size:
            1.58rem !important;

        font-weight:
            900 !important;

        letter-spacing:
            .13em !important;

        line-height:
            1 !important;

        background:
            linear-gradient(
                120deg,
                #dff2ff 0%,
                #a6d3ff 18%,
                #67b0ff 42%,
                #3b82f6 66%,
                #79bdff 84%,
                #d4edff 100%
            ) !important;

        background-size:
            220% 100% !important;

        -webkit-background-clip:
            text !important;

        background-clip:
            text !important;

        -webkit-text-fill-color:
            transparent !important;

        filter:
            drop-shadow(
                0 0 6px
                rgba(90,170,255,.30)
            )
            drop-shadow(
                0 0 15px
                rgba(45,113,225,.08)
            ) !important;

        animation:
            desktopStkShimmer
            7s ease-in-out
            infinite !important;
    }


    @keyframes desktopStkShimmer {

        0%,
        30% {

            background-position:
                100% 50%;

            filter:
                drop-shadow(
                    0 0 5px
                    rgba(90,170,255,.24)
                )
                drop-shadow(
                    0 0 12px
                    rgba(45,113,225,.06)
                );
        }


        50% {

            background-position:
                45% 50%;

            filter:
                drop-shadow(
                    0 0 8px
                    rgba(111,190,255,.40)
                )
                drop-shadow(
                    0 0 18px
                    rgba(45,113,225,.12)
                );
        }


        72%,
        100% {

            background-position:
                0% 50%;

            filter:
                drop-shadow(
                    0 0 5px
                    rgba(90,170,255,.24)
                )
                drop-shadow(
                    0 0 12px
                    rgba(45,113,225,.06)
                );
        }

    }



    /* ======================================================
       NAV LINKS
       ====================================================== */

    .navbar .nav-link {

        position:
            relative !important;

        padding:
            10px 12px !important;

        border-radius:
            10px !important;

        color:
            #a7b6ca !important;

        transition:
            color .22s ease,
            background .22s ease,
            border-color .22s ease,
            box-shadow .22s ease
            !important;
    }


    .navbar .nav-link:hover {

        color:
            #d9e9fb !important;

        background:
            rgba(33, 85, 148, .10) !important;
    }


    .navbar .nav-link.active {

        color:
            #76b7ff !important;

        background:
            linear-gradient(
                135deg,
                rgba(31, 90, 164, .18),
                rgba(12, 42, 78, .10)
            ) !important;

        border:
            1px solid
            rgba(100, 170, 255, .12) !important;

        box-shadow:
            inset 0 1px 0
            rgba(255,255,255,.035),
            0 5px 16px
            rgba(0,0,0,.08)
            !important;
    }


    /* cleaner underline */
    .navbar .nav-link::after {

        left:
            50% !important;

        bottom:
            -3px !important;

        width:
            0 !important;

        height:
            2px !important;

        transform:
            translateX(-50%) !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                #3b82f6,
                #77bcff
            ) !important;

        box-shadow:
            0 0 8px
            rgba(73,154,255,.26);

        transition:
            width .24s ease !important;
    }


    .navbar .nav-link:hover::after,
    .navbar .nav-link.active::after {

        width:
            58% !important;
    }



    /* ======================================================
       CONTACT CTA
       More integrated with the glass bar
       ====================================================== */

    .navbar .cta-nav {

        padding:
            11px 20px !important;

        border-radius:
            12px !important;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                135deg,
                rgba(35, 96, 220, .92),
                rgba(48, 111, 241, .88)
            ) !important;

        border:
            1px solid
            rgba(151, 198, 255, .26) !important;

        box-shadow:
            0 10px 24px
            rgba(31, 92, 210, .20),
            inset 0 1px 0
            rgba(255,255,255,.14)
            !important;

        transition:
            transform .22s ease,
            box-shadow .22s ease,
            filter .22s ease
            !important;
    }


    .navbar .cta-nav:hover {

        transform:
            translateY(-1px) !important;

        filter:
            brightness(1.05) !important;

        box-shadow:
            0 13px 28px
            rgba(31, 92, 210, .27),
            inset 0 1px 0
            rgba(255,255,255,.17)
            !important;
    }


    .navbar .cta-nav::after {

        display:
            none !important;
    }

}


/* reduced motion */

@media (
    min-width: 901px
) and (
    prefers-reduced-motion: reduce
) {

    .navbar .logo {

        animation:
            none !important;

        background-position:
            50% 50% !important;
    }

}

/* ===== DESKTOP NAV PREMIUM POLISH END ===== */



/* ===== DESKTOP EXPERIENCE GLASS POLISH START ===== */

@media (min-width: 901px) {

    #experience .experience-card,
    #experience .timeline-card,
    #experience .exp-card {

        background:
            linear-gradient(
                145deg,
                rgba(7, 24, 45, .88) 0%,
                rgba(5, 20, 38, .82) 58%,
                rgba(4, 17, 32, .88) 100%
            ) !important;

        border:
            1px solid
            rgba(75, 149, 244, .27) !important;

        box-shadow:
            0 18px 42px rgba(0,0,0,.24),
            0 6px 18px rgba(0,0,0,.10),
            inset 0 1px 0 rgba(255,255,255,.055),
            inset 0 -1px 0 rgba(59,130,246,.035)
            !important;

        -webkit-backdrop-filter:
            blur(12px)
            saturate(120%) !important;

        backdrop-filter:
            blur(12px)
            saturate(120%) !important;

        transition:
            transform .24s ease,
            border-color .24s ease,
            box-shadow .24s ease,
            background .24s ease
            !important;
    }


    #experience .experience-card:hover,
    #experience .timeline-card:hover,
    #experience .exp-card:hover {

        transform:
            translateY(-3px) !important;

        border-color:
            rgba(91, 164, 255, .40) !important;

        box-shadow:
            0 22px 48px rgba(0,0,0,.28),
            0 8px 22px rgba(0,0,0,.12),
            0 0 22px rgba(51, 126, 236, .07),
            inset 0 1px 0 rgba(255,255,255,.075)
            !important;
    }

}


/* reduced motion */

@media (
    min-width: 901px
) and (
    prefers-reduced-motion: reduce
) {

    #experience .experience-card,
    #experience .timeline-card,
    #experience .exp-card {

        transition:
            none !important;
    }


    #experience .experience-card:hover,
    #experience .timeline-card:hover,
    #experience .exp-card:hover {

        transform:
            none !important;
    }

}

/* ===== DESKTOP EXPERIENCE GLASS POLISH END ===== */



/* ===== DESKTOP PROJECTS MICRO POLISH START ===== */

@media (min-width: 901px) {

    #projects .project-card {

        background:
            linear-gradient(
                145deg,
                rgba(8, 22, 42, .92) 0%,
                rgba(5, 16, 32, .88) 58%,
                rgba(4, 13, 27, .93) 100%
            ) !important;

        border-color:
            rgba(75, 145, 238, .27) !important;

        box-shadow:
            0 18px 42px rgba(0,0,0,.27),
            0 6px 18px rgba(0,0,0,.08),
            inset 0 1px 0 rgba(255,255,255,.050),
            inset 0 -1px 0 rgba(50,120,220,.025)
            !important;

        -webkit-backdrop-filter:
            blur(12px)
            saturate(120%) !important;

        backdrop-filter:
            blur(12px)
            saturate(120%) !important;
    }


    #projects .project-card::before {

        opacity:
            .62 !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(91, 160, 255, .62),
                rgba(155, 207, 255, .30),
                transparent
            ) !important;
    }


    #projects .project-card::after {

        background:
            radial-gradient(
                circle,
                rgba(47, 119, 238, .12),
                transparent 68%
            ) !important;
    }


    #projects .project-card:hover {

        transform:
            translateY(-4px) !important;

        border-color:
            rgba(92, 164, 255, .42) !important;

        background:
            linear-gradient(
                145deg,
                rgba(10, 27, 50, .95),
                rgba(5, 17, 34, .92)
            ) !important;

        box-shadow:
            0 22px 48px rgba(0,0,0,.31),
            0 8px 20px rgba(0,0,0,.10),
            0 0 24px rgba(45, 113, 225, .08),
            inset 0 1px 0 rgba(255,255,255,.065)
            !important;
    }

}


/* reduced motion */

@media (
    min-width: 901px
) and (
    prefers-reduced-motion: reduce
) {

    #projects .project-card:hover {

        transform:
            none !important;
    }

}

/* ===== DESKTOP PROJECTS MICRO POLISH END ===== */







/* ===== DESKTOP BEYOND IT AMBIENT END GLOW START ===== */

@media (min-width: 901px) {

    #beyond-it {
        position:
            relative !important;
    }

    #beyond-it::after {

        content:
            '' !important;

        position:
            absolute !important;

        left:
            50% !important;

        bottom:
            18px !important;

        width:
            min(56%, 760px) !important;

        height:
            110px !important;

        transform:
            translateX(-50%) !important;

        background:
            radial-gradient(
                ellipse at center,
                rgba(54, 126, 235, .075) 0%,
                rgba(54, 126, 235, .032) 38%,
                rgba(54, 126, 235, .012) 58%,
                transparent 76%
            ) !important;

        filter:
            blur(24px) !important;

        opacity:
            .78 !important;

        pointer-events:
            none !important;
    }

    #beyond-it::before {
        content:
            none !important;
    }

}

/* ===== DESKTOP BEYOND IT AMBIENT END GLOW END ===== */







/* ===== DESKTOP HERO GPU SMOOTHING START ===== */

@media (min-width: 901px) {

    /*
       No animation is removed.
       No cursor behavior is changed.

       These simply encourage Chrome to keep the hero's
       moving layers on their own compositor layers.
    */

    .mockup-tech-panel {
        isolation: isolate !important;

        transform:
            translateY(-10px)
            translateZ(0);

        backface-visibility:
            hidden !important;

        -webkit-backface-visibility:
            hidden !important;
    }


    .mockup-tech-panel svg,
    .mockup-tech-panel circle,
    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .orbit-ring,
    .mockup-tech-panel .center-node,
    .mockup-tech-panel .network-center,
    .mockup-tech-panel .main-node,
    .hero-person-real {

        backface-visibility:
            hidden !important;

        -webkit-backface-visibility:
            hidden !important;

        transform-style:
            preserve-3d !important;
    }


    /*
       Elements whose animations already use transform/filter
       are prepared ahead of time instead of Chrome repeatedly
       promoting/demoting them while the page is moving.
    */

    .mockup-tech-panel svg,
    .mockup-tech-panel circle,
    .mockup-tech-panel .center-node,
    .mockup-tech-panel .network-center,
    .mockup-tech-panel .main-node {

        will-change:
            transform,
            filter;
    }


    .mockup-tech-panel .tech-card,
    .mockup-tech-panel .floating-card,
    .mockup-tech-panel .orbit-ring,
    .hero-person-real {

        will-change:
            transform;
    }


    /*
       Decorative layers never need mouse hit-testing.
       This reduces a little unnecessary work while the
       pointer moves across the hero.
    */

    .mockup-tech-panel::before,
    .mockup-tech-panel::after,
    .person-floor-glow {

        pointer-events:
            none !important;
    }

}

/* ===== DESKTOP HERO GPU SMOOTHING END ===== */