/* ==========================================================
   SPOT ASSOCIATES
   Executive Portfolio
   Mohammed Aflah KH
   ========================================================== */

/* ==========================================================
   THEME VARIABLES
   ========================================================== */

:root {

    --bg: #0B1120;
    --surface: #111827;
    --surface-alt: #1E293B;

    --text: #F8FAFC;
    --muted: #94A3B8;

    --accent: #38BDF8;

    --border: rgba(255,255,255,0.08);

    --shadow-sm: 0 4px 12px rgba(0,0,0,.18);
    --shadow-md: 0 10px 30px rgba(0,0,0,.25);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.35);

    --container-width: 1280px;

    --transition: 0.3s ease;

}

/* ==========================================================
   LIGHT MODE
   ========================================================== */

body.light-mode {

    --bg: #F8FAFC;

    --surface: #FFFFFF;

    --surface-alt: #F1F5F9;

    --text: #0F172A;

    --muted: #475569;

    --accent: #0284C7;

    --border: rgba(15,23,42,.08);

    --shadow-sm: 0 4px 12px rgba(15,23,42,.05);
    --shadow-md: 0 10px 30px rgba(15,23,42,.08);
    --shadow-lg: 0 20px 60px rgba(15,23,42,.12);

}

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    overflow-x: hidden;

}

body {

    font-family: 'Inter', sans-serif;

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.8;

    transition:
        background var(--transition),
        color var(--transition);

}

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

.skip-link {

    position: absolute;

    left: -9999px;

    top: 20px;

    background: white;

    color: black;

    padding: 12px 20px;

    z-index: 99999;

    border-radius: 10px;

}

.skip-link:focus {

    left: 20px;

}

a:focus,
button:focus,
input:focus,
textarea:focus {

    outline: 3px solid var(--accent);

    outline-offset: 3px;

}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

}

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

h1 {

    font-size: clamp(3rem, 6vw, 5rem);

    line-height: 1.05;

    font-weight: 800;

}

h2 {

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

    line-height: 1.2;

    font-weight: 700;

}

h3 {

    font-size: 1.35rem;

    font-weight: 600;

}

p {

    color: var(--muted);

}

.section-label {

    display: inline-block;

    margin-bottom: 12px;

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--accent);

}

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

a {

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}

a:hover {

    color: var(--accent);

}

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

.container {

    width: min(100% - 40px, var(--container-width));

    margin-inline: auto;

}

.narrow-container {

    max-width: 850px;

    margin-inline: auto;

}

.section {

    padding: 120px 0;

}

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

.btn-primary,
.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 26px;

    border-radius: 14px;

    font-weight: 600;

    transition: var(--transition);

}

.btn-primary {

    background: var(--accent);

    color: white;

}

.btn-primary:hover {

    transform: translateY(-2px);

}

.btn-secondary {

    border: 1px solid var(--border);

    background: transparent;

}

.btn-secondary:hover {

    background: var(--surface-alt);

}

/* ==========================================================
   ACCESSIBILITY PANEL
   ========================================================== */

.accessibility-panel {

    position: fixed;

    right: 20px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 1000;

}

.accessibility-panel button {

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background: var(--accent);

    color: white;

    cursor: pointer;

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

}

/* ==========================================================
   BACK TO TOP
   ========================================================== */

.back-to-top {

    position: fixed;

    bottom: 20px;

    left: 20px;

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background: var(--accent);

    color: white;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: var(--transition);

    z-index: 999;

}

.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}
/* ==========================================================
   HEADER
   ========================================================== */

.header {

    position: sticky;

    top: 0;

    z-index: 100;

    backdrop-filter: blur(16px);

    background: rgba(11,17,32,.85);

    border-bottom: 1px solid var(--border);

}

body.light-mode .header {

    background: rgba(248,250,252,.9);

}

.header-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 80px;

}

/* ==========================================================
   LOGO
   ========================================================== */

.logo {

    font-size: 1.2rem;

    font-weight: 800;

    color: var(--accent);

    letter-spacing: .02em;

}

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

.nav-links {

    display: flex;

    align-items: center;

    gap: 32px;

    list-style: none;

}

.nav-links a {

    font-size: .95rem;

    font-weight: 500;

    color: var(--text);

}

.nav-links a:hover {

    color: var(--accent);

}

.mobile-nav-toggle {

    display: none;

    border: none;

    background: transparent;

    color: var(--text);

    cursor: pointer;

    font-size: 1.2rem;

}

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

.hero {

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

    display: flex;

    align-items: center;

    padding: 80px 0;

}

.hero-grid {

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 80px;

    align-items: center;

}

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

.hero-brand {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--accent);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-size: .9rem;

}

.hero h1 {

    margin-bottom: 20px;

}

.hero h2 {

    margin-bottom: 24px;

    color: var(--text);

}

.hero-tagline {

    font-size: 1.3rem;

    font-weight: 600;

    color: var(--accent);

    margin-bottom: 24px;

}

.hero-description {

    max-width: 700px;

    font-size: 1.1rem;

    margin-bottom: 40px;

}

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

.hero-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}

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

.hero-visual {

    display: flex;

    justify-content: center;

    align-items: center;

}

.portrait-card {

    width: 100%;

    max-width: 420px;

    border-radius: 32px;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);

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

    position: relative;

}

.portrait-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,
            rgba(56,189,248,.15),
            transparent 60%
        );

    pointer-events: none;

}

.portrait-card img {

    display: block;

    width: 100%;

    height: auto;

}

/* ==========================================================
   METRICS
   ========================================================== */

.metrics {

    padding: 80px 0;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

    background: var(--surface);

}

.metrics-grid {

    display: grid;

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

    gap: 40px;

    text-align: center;

}

.metric {

    position: relative;

}

.metric h3 {

    font-size: clamp(3rem, 6vw, 4.5rem);

    font-weight: 800;

    color: var(--accent);

    line-height: 1;

    margin-bottom: 12px;

}

.metric span {

    display: block;

    color: var(--muted);

    font-size: .95rem;

    line-height: 1.5;

    max-width: 180px;

    margin-inline: auto;

}
/* ==========================================================
   SECTION HEADERS
   ========================================================== */

.section h2 {

    margin-bottom: 28px;

    max-width: 900px;

}

.section p {

    max-width: 800px;

    font-size: 1.05rem;

}

/* ==========================================================
   MY STORY
   ========================================================== */

#story {

    position: relative;

}

#story .narrow-container {

    text-align: left;

}

#story p {

    margin-bottom: 24px;

}

#story p:last-child {

    margin-bottom: 0;

}

/* ==========================================================
   CAREER JOURNEY
   ========================================================== */

#journey {

    position: relative;

}

.timeline {

    position: relative;

    max-width: 1000px;

    margin-top: 80px;

    padding-left: 60px;

}

/* Vertical Line */

.timeline::before {

    content: "";

    position: absolute;

    left: 12px;

    top: 0;

    bottom: 0;

    width: 2px;

    background: var(--border);

}

/* ==========================================================
   TIMELINE ITEM
   ========================================================== */

.timeline-item {

    position: relative;

    margin-bottom: 60px;

}

.timeline-item:last-child {

    margin-bottom: 0;

}

/* Timeline Dot */

.timeline-item::before {

    content: "";

    position: absolute;

    left: -56px;

    top: 12px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 6px rgba(56,189,248,.12);

}

/* ==========================================================
   YEAR
   ========================================================== */

.timeline-year {

    font-size: .9rem;

    font-weight: 700;

    color: var(--accent);

    text-transform: uppercase;

    letter-spacing: .08em;

    margin-bottom: 12px;

}

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

.timeline-content {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 30px;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.timeline-content:hover {

    transform: translateY(-4px);

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

    border-color: rgba(56,189,248,.25);

}

.timeline-content h3 {

    margin-bottom: 10px;

}

.timeline-content p {

    margin-bottom: 10px;

}

.timeline-content p:last-child {

    margin-bottom: 0;

}

.timeline-description {

    color: var(--muted);

    font-size: .95rem;

}

/* ==========================================================
   TIMELINE EMPHASIS
   ========================================================== */

.timeline-item:nth-child(5) .timeline-content {

    border-color: rgba(56,189,248,.25);

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.06),
            transparent 60%
        ),
        var(--surface);

}

/* ==========================================================
   SECTION SPACING
   ========================================================== */

#journey .section-label,
#story .section-label {

    margin-bottom: 16px;

}
/* ==========================================================
   SELECTED IMPACT
   ========================================================== */

#impact {

    position: relative;

}

.impact-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 60px;

}

.impact-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 32px;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.impact-card:hover {

    transform: translateY(-6px);

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

    border-color: rgba(56,189,248,.25);

}

.impact-card h3 {

    margin-bottom: 24px;

    color: var(--text);

}

.impact-block {

    margin-bottom: 22px;

}

.impact-block:last-child {

    margin-bottom: 0;

}

.impact-block h4 {

    font-size: .9rem;

    text-transform: uppercase;

    letter-spacing: .08em;

    color: var(--accent);

    margin-bottom: 10px;

}

.impact-block p {

    font-size: .95rem;

}

/* ==========================================================
   CORE EXPERTISE
   ========================================================== */

.expertise-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 60px;

}

.expertise-item {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 20px;

    text-align: center;

    font-weight: 600;

    transition:
        transform .3s ease,
        border-color .3s ease;

}

.expertise-item:hover {

    transform: translateY(-4px);

    border-color: rgba(56,189,248,.25);

}

/* ==========================================================
   EDUCATION
   ========================================================== */

.education-grid {

    display: grid;

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

    gap: 40px;

    margin-top: 60px;

}

.education-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 35px;

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

}

.education-card h3 {

    margin-bottom: 24px;

}

.education-item {

    margin-bottom: 30px;

}

.education-item:last-child {

    margin-bottom: 0;

}

.education-item h4 {

    margin-bottom: 8px;

}

.education-item span {

    display: block;

    margin-top: 8px;

    color: var(--muted);

    font-size: .9rem;

}

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

.certification-list {

    list-style: none;

}

.certification-list li {

    padding: 14px 0;

    border-bottom: 1px solid var(--border);

    color: var(--muted);

}

.certification-list li:last-child {

    border-bottom: none;

}

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

.contact-section {

    text-align: center;

}

.contact-container {

    max-width: 850px;

}

.contact-intro {

    margin: 30px auto 50px;

}

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 18px;

    align-items: center;

}

.contact-item {

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--text);

}

.contact-item i {

    color: var(--accent);

    width: 20px;

    text-align: center;

}

.contact-item a {

    color: var(--text);

}

.contact-item a:hover {

    color: var(--accent);

}

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

.footer {

    border-top: 1px solid var(--border);

    padding: 50px 0;

    margin-top: 40px;

}

.footer-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

}

.footer h3 {

    margin-bottom: 8px;

}

.footer p {

    font-size: .95rem;

}

.footer-links {

    display: flex;

    gap: 24px;

    flex-wrap: wrap;

}

.footer-links a {

    color: var(--muted);

}

.footer-links a:hover {

    color: var(--accent);

}
/* ==========================================================
   ANIMATIONS
   ========================================================== */

.fade-in {

    opacity: 0;

    transform: translateY(30px);

}

.fade-in.visible {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

/* ==========================================================
   GLOBAL HOVER IMPROVEMENTS
   ========================================================== */

.impact-card,
.timeline-content,
.education-card,
.expertise-item {

    will-change: transform;

}

.btn-primary,
.btn-secondary {

    will-change: transform;

}

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

.mobile-nav-open {

    display: flex !important;

    flex-direction: column;

    position: absolute;

    top: 80px;

    right: 20px;

    width: 280px;

    padding: 24px;

    border-radius: 20px;

    background: var(--surface);

    border: 1px solid var(--border);

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

    gap: 20px;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {

    .hero-grid {

        gap: 50px;

    }

    .metrics-grid {

        gap: 25px;

    }

}

@media (max-width: 992px) {

    .hero {

        min-height: auto;

        padding: 120px 0 80px;

    }

    .hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-description {

        margin-inline: auto;

    }

    .hero-actions {

        justify-content: center;

    }

    .portrait-card {

        max-width: 360px;

    }

    .metrics-grid {

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

        gap: 40px;

    }

    .impact-grid {

        grid-template-columns: 1fr;

    }

    .expertise-grid {

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

    }

    .education-grid {

        grid-template-columns: 1fr;

    }

    .footer-container {

        flex-direction: column;

        text-align: center;

    }

}

@media (max-width: 768px) {

    .header-container {

        min-height: 70px;

    }

    .mobile-nav-toggle {

        display: block;

    }

    .nav-links {

        display: none;

    }

    .section {

        padding: 90px 0;

    }

    h1 {

        font-size: 3rem;

    }

    h2 {

        font-size: 2rem;

    }

    .hero-tagline {

        font-size: 1.1rem;

    }

    .timeline {

        padding-left: 40px;

    }

    .timeline-item::before {

        left: -36px;

    }

    .timeline::before {

        left: 20px;

    }

}

@media (max-width: 640px) {

    .container {

        width: min(100% - 24px, var(--container-width));

    }

    .metrics-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .expertise-grid {

        grid-template-columns: 1fr;

    }

    .hero-actions {

        flex-direction: column;

    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

    }

    .contact-item {

        flex-wrap: wrap;

        justify-content: center;

    }

    .footer-links {

        justify-content: center;

    }

}

@media (max-width: 480px) {

    h1 {

        font-size: 2.4rem;

    }

    h2 {

        font-size: 1.7rem;

    }

    .hero {

        padding-top: 100px;

    }

    .metric h3 {

        font-size: 3rem;

    }

    .timeline-content {

        padding: 22px;

    }

    .impact-card {

        padding: 24px;

    }

    .education-card {

        padding: 24px;

    }

}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {

    .accessibility-panel,
    .back-to-top,
    .mobile-nav-toggle {

        display: none !important;

    }

    body {

        background: white;

        color: black;

    }

}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection {

    background: var(--accent);

    color: white;

}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: var(--bg);

}

::-webkit-scrollbar-thumb {

    background: var(--surface-alt);

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--accent);

}