/* =========================================================
   HUSNAIN TARIQ — PORTFOLIO
   Design language: developer console / code-editor
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');


:root {

    --navy-deepest: #020617;
    --navy-dark: #0f172a;
    --navy-mid: #172554;
    --navy: #111827;

    --blue-deep: #1e3a8a;

    --slate-border: #334155;
    --slate-panel: #1e293b;

    --sky: #38bdf8;
    --sky-soft: #7dd3fc;

    --cyan: #0284c7;
    --cyan-dark: #0369a1;

    --bg-light: #f5f7fb;

    --text-body: #1f2937;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --text-cool: #cbd5e1;

    --white: #ffffff;

    --success: #16a34a;
    --error: #dc2626;


    /* Fonts */

    --font-display: 'Sora', 'Arial', sans-serif;
    --font-body: 'Inter', 'Arial', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;


    /* Layout */

    --radius: 10px;
    --radius-lg: 16px;

    --max-w: 1100px;
}


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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;
}


html {

    scroll-behavior: smooth;
}


body {

    font-family: var(--font-body);

    background-color: var(--bg-light);

    color: var(--text-body);

    line-height: 1.65;
}


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

    html {

        scroll-behavior: auto;
    }

    * {

        animation-duration: 0.001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;
    }
}


a {

    color: inherit;
}


::selection {

    background: var(--sky);

    color: var(--navy);
}


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

header {

    background-color: var(--navy);

    position: sticky;

    top: 0;

    z-index: 1000;

    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}


.navbar {

    max-width: var(--max-w);

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;
}


.logo {

    color: white;

    font-family: var(--font-display);

    font-weight: 700;

    font-size: 22px;

    letter-spacing: -0.02em;
}


.logo span {

    color: var(--sky);
}


.nav-links {

    display: flex;

    align-items: center;

    gap: 26px;
}


.nav-links a {

    position: relative;

    color: var(--text-cool);

    text-decoration: none;

    font-family: var(--font-mono);

    font-size: 13px;

    letter-spacing: 0.01em;

    transition: color 0.25s ease;
}


.nav-links a:hover {

    color: var(--sky);
}


.nav-links a:focus-visible,
a:focus-visible,
button:focus-visible {

    outline: 2px solid var(--sky);

    outline-offset: 3px;

    border-radius: 4px;
}


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

.hero {

    min-height: 88vh;

    display: flex;

    align-items: center;

    padding: 70px 24px;

    background: linear-gradient(
        135deg,
        var(--navy),
        var(--blue-deep)
    );

    color: white;

    position: relative;

    overflow: hidden;
}


.hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(56, 189, 248, 0.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.06) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image: radial-gradient(
        ellipse 80% 60% at 50% 40%,
        black 40%,
        transparent 90%
    );

    pointer-events: none;
}


.hero-inner {

    max-width: var(--max-w);

    margin: auto;

    width: 100%;

    position: relative;

    z-index: 1;
}


.small-heading {

    color: var(--sky);

    font-family: var(--font-mono);

    font-weight: 500;

    letter-spacing: 3px;

    font-size: 13px;

    display: inline-flex;

    align-items: center;

    gap: 10px;
}


.small-heading::before {

    content: '';

    width: 22px;

    height: 1px;

    background: var(--sky);

    display: inline-block;
}


.hero h2 {

    font-family: var(--font-display);

    font-size: 56px;

    font-weight: 800;

    letter-spacing: -0.02em;

    margin: 14px 0 6px;
}


.hero h3 {

    font-family: var(--font-display);

    font-size: 22px;

    font-weight: 400;

    color: #dbeafe;

    margin-bottom: 30px;
}


/* =========================================================
   TERMINAL
========================================================= */

.terminal {

    max-width: 640px;

    background: rgba(2, 6, 23, 0.55);

    border: 1px solid rgba(56, 189, 248, 0.25);

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

    overflow: hidden;

    backdrop-filter: blur(6px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}


.terminal-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 16px;

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

    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}


.terminal-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--slate-border);
}


.terminal-dot.active {

    background: var(--sky);
}


.terminal-title {

    margin-left: 8px;

    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--text-faint);
}


.terminal-body {

    padding: 22px 20px 26px;

    font-family: var(--font-mono);

    font-size: 14px;

    line-height: 1.9;
}


.terminal-line {

    color: var(--text-cool);
}


.terminal-prompt {

    color: var(--sky);

    margin-right: 8px;
}


.terminal-output {

    color: var(--white);

    display: block;

    margin: 2px 0 12px;
}


.terminal-output.muted {

    color: var(--text-cool);

    font-family: var(--font-body);

    font-size: 14.5px;
}


.cursor {

    display: inline-block;

    width: 8px;

    height: 16px;

    background: var(--sky);

    margin-left: 4px;

    vertical-align: middle;

    animation: blink 1.1s steps(1) infinite;
}


@keyframes blink {

    0%,
    49% {

        opacity: 1;
    }

    50%,
    100% {

        opacity: 0;
    }
}


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

.hero-buttons {

    margin-top: 34px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


.btn {

    display: inline-block;

    padding: 13px 26px;

    background-color: var(--sky);

    color: var(--navy-dark);

    text-decoration: none;

    border-radius: 7px;

    font-family: var(--font-display);

    font-weight: 700;

    font-size: 14.5px;

    transition: 0.25s ease;
}


.btn:hover {

    background-color: var(--sky-soft);

    transform: translateY(-2px);
}


.secondary-btn {

    background-color: transparent;

    color: white;

    border: 1px solid rgba(56, 189, 248, 0.55);
}


.secondary-btn:hover {

    background-color: rgba(56, 189, 248, 0.08);
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section {

    max-width: var(--max-w);

    margin: auto;

    padding: 96px 24px;
}


.section-head {

    text-align: center;

    max-width: 640px;

    margin: 0 auto 46px;
}


.section-label {

    color: var(--cyan);

    font-family: var(--font-mono);

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 3px;

    display: inline-flex;

    align-items: center;

    gap: 10px;
}


.section h2 {

    font-family: var(--font-display);

    font-size: 34px;

    font-weight: 700;

    letter-spacing: -0.01em;

    margin: 12px 0 0;

    color: var(--navy);
}


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

.editor-panel {

    max-width: 760px;

    margin: 0 auto;

    background: white;

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

    border: 1px solid #e2e8f0;

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);

    overflow: hidden;
}


.editor-tab {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 20px;

    background: var(--navy);
}


.editor-tab span.file-name {

    font-family: var(--font-mono);

    font-size: 12.5px;

    color: var(--text-cool);

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.25);

    padding: 4px 10px;

    border-radius: 5px;
}


.editor-body {

    padding: 34px 36px;
}


.editor-body p {

    color: var(--text-muted);

    margin-bottom: 16px;

    font-size: 16px;
}


.editor-body p:last-child {

    margin-bottom: 0;
}


.editor-body p .stack {

    color: var(--cyan-dark);

    font-family: var(--font-mono);

    font-size: 14.5px;

    background: #f0f9ff;

    padding: 2px 6px;

    border-radius: 4px;
}


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

.timeline {

    position: relative;

    max-width: 720px;

    margin: 0 auto;

    padding-left: 34px;
}


.timeline::before {

    content: '';

    position: absolute;

    left: 6px;

    top: 6px;

    bottom: 6px;

    width: 2px;

    background: linear-gradient(
        to bottom,
        var(--sky),
        #e2e8f0
    );
}


.timeline-item {

    position: relative;

    padding-bottom: 34px;
}


.timeline-item:last-child {

    padding-bottom: 0;
}


.timeline-item::before {

    content: '';

    position: absolute;

    left: -34px;

    top: 6px;

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background: var(--sky);

    border: 3px solid var(--bg-light);

    box-shadow: 0 0 0 2px var(--sky);
}


.timeline-item.current::before {

    background: var(--cyan);

    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25);
}


.timeline-card {

    background: white;

    padding: 22px 26px;

    border-radius: var(--radius);

    border: 1px solid #e2e8f0;

    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);

    transition: 0.25s ease;
}


.timeline-card:hover {

    transform: translateX(4px);

    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
}


.timeline-card h3 {

    font-family: var(--font-display);

    font-size: 18px;

    color: var(--navy);

    margin-bottom: 4px;
}


.timeline-card p {

    color: var(--text-muted);

    font-size: 15px;
}


.badge {

    display: inline-block;

    margin-top: 12px;

    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--cyan-dark);

    background: #f0f9ff;

    border: 1px solid #bae6fd;

    padding: 4px 10px;

    border-radius: 20px;
}


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

.skills {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    max-width: 760px;

    margin: 0 auto;
}


.skills span {

    font-family: var(--font-mono);

    font-size: 14px;

    background-color: white;

    padding: 11px 20px;

    border-radius: 8px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

    color: var(--navy);

    transition: 0.25s ease;
}


.skills span:hover {

    background-color: var(--cyan);

    border-color: var(--cyan);

    color: white;

    transform: translateY(-3px);
}


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

.cards {

    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );

    gap: 22px;

    margin-top: 6px;
}


.project-card {

    background-color: white;

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

    border: 1px solid #e2e8f0;

    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);

    overflow: hidden;

    transition: 0.3s ease;

    display: flex;

    flex-direction: column;
}


.project-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}


.project-card .card-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 16px;

    background: var(--navy);
}


.project-card .card-bar span.dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--slate-border);
}


.project-card .card-bar span.dot.active {

    background: var(--sky);
}


.project-card .card-body {

    padding: 22px 24px 26px;

    flex: 1;

    display: flex;

    flex-direction: column;
}


.project-card h3 {

    font-family: var(--font-display);

    font-size: 18px;

    color: var(--navy);

    margin-bottom: 10px;
}


.project-card p {

    color: var(--text-muted);

    font-size: 14.5px;

    flex: 1;
}


.project-card a {

    display: inline-block;

    margin-top: 18px;

    color: var(--cyan-dark);

    text-decoration: none;

    font-family: var(--font-mono);

    font-size: 13.5px;

    font-weight: 500;

    transition: 0.2s ease;
}


.project-card a:hover {

    color: var(--cyan);

    transform: translateX(3px);
}


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

.contact-section {

    background: linear-gradient(
        135deg,
        var(--navy-deepest),
        var(--navy-dark),
        var(--navy-mid)
    );

    color: white;

    padding: 100px 24px;
}


.contact-container {

    max-width: var(--max-w);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


.contact-info .section-label {

    color: var(--sky);

    margin-bottom: 15px;
}


.contact-info h2 {

    font-family: var(--font-display);

    font-size: 44px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 20px;

    color: white;
}


.contact-info h2 span {

    color: var(--sky);
}


.contact-description {

    color: var(--text-cool);

    max-width: 480px;

    line-height: 1.8;

    margin-bottom: 34px;
}


.contact-details {

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.contact-item {

    display: flex;

    align-items: center;

    gap: 15px;
}


.contact-icon {

    width: 46px;

    height: 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: var(--slate-panel);

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

    border-radius: 10px;

    color: var(--sky);

    font-weight: 600;

    font-family: var(--font-mono);

    font-size: 13px;

    flex-shrink: 0;
}


.contact-item h3 {

    margin: 0;

    font-size: 15.5px;

    font-family: var(--font-display);
}


.contact-item p {

    margin: 2px 0 0;

    color: var(--text-faint);

    font-size: 14px;
}


.contact-item p a {

    text-decoration: none;

    transition: color 0.2s ease;
}


.contact-item p a:hover {

    color: var(--sky);

    text-decoration: underline;
}


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

.contact-form {

    background-color: white;

    padding: 34px;

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

    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);

    display: flex;

    flex-direction: column;
}


.contact-form h3 {

    font-family: var(--font-display);

    color: var(--navy);

    font-size: 22px;

    margin-bottom: 20px;
}


.contact-form label {

    color: #374151;

    font-family: var(--font-mono);

    font-size: 12.5px;

    letter-spacing: 0.02em;

    font-weight: 500;

    margin-top: 14px;

    margin-bottom: 7px;
}


.contact-form input,
.contact-form textarea {

    width: 100%;

    padding: 13px 15px;

    border: 1px solid #d1d5db;

    border-radius: 7px;

    font-family: var(--font-body);

    font-size: 15px;

    outline: none;

    transition: 0.2s;
}


.contact-form input:focus,
.contact-form textarea:focus {

    border-color: var(--cyan);

    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}


.contact-form input:disabled,
.contact-form textarea:disabled {

    background-color: #f3f4f6;

    cursor: not-allowed;
}


.contact-form textarea {

    resize: vertical;
}


.send-btn {

    margin-top: 22px;

    padding: 14px;

    border: none;

    border-radius: 7px;

    background-color: var(--cyan);

    color: white;

    font-family: var(--font-display);

    font-size: 15.5px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;
}


.send-btn:hover {

    background-color: var(--cyan-dark);

    transform: translateY(-2px);
}


.send-btn:disabled {

    background-color: #94a3b8;

    cursor: not-allowed;

    transform: none;
}


.form-status {

    margin-top: 14px;

    font-size: 14px;

    font-family: var(--font-body);

    min-height: 1.2em;
}


.form-status.success {

    color: var(--success);
}


.form-status.error {

    color: var(--error);
}


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

footer {

    background-color: var(--navy-deepest);

    color: var(--text-faint);

    text-align: center;

    padding: 26px;

    font-size: 14px;
}


footer div {

    margin-top: 8px;
}


footer a {

    color: var(--sky);

    text-decoration: none;

    margin: 0 8px;

    font-family: var(--font-mono);

    font-size: 13px;
}


footer a:hover {

    text-decoration: underline;
}


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

@media (max-width: 750px) {

    .navbar {

        flex-direction: column;

        gap: 14px;

        padding: 16px 20px;
    }


    .nav-links {

        flex-wrap: wrap;

        justify-content: center;

        gap: 16px;
    }


    .hero {

        min-height: auto;

        padding: 56px 20px 60px;
    }


    .hero h2 {

        font-size: 38px;
    }


    .hero h3 {

        font-size: 18px;
    }


    .section {

        padding: 64px 20px;
    }


    .editor-body {

        padding: 26px 22px;
    }


    .contact-container {

        grid-template-columns: 1fr;

        gap: 44px;
    }


    .contact-info h2 {

        font-size: 34px;
    }


    .timeline {

        padding-left: 28px;
    }
}