/* =============================================================
   AfriJudith.online — design system
   Palette: deep blue + black, tuned for the brand mark.
   ============================================================= */

:root {
    --bg-0:        #03060d;
    --bg-1:        #060b18;
    --bg-2:        #0a1224;
    --surface:     rgba(255, 255, 255, 0.04);
    --surface-2:   rgba(255, 255, 255, 0.06);
    --border:      rgba(255, 255, 255, 0.08);
    --border-soft: rgba(255, 255, 255, 0.05);

    --text:        #f4f7ff;
    --muted:       #9ba8c1;
    --muted-2:     #6a7592;

    --brand:       #3b82f6;
    --brand-2:     #60a5fa;
    --brand-3:     #93c5fd;
    --brand-soft:  rgba(59, 130, 246, 0.15);
    --brand-glow:  rgba(59, 130, 246, 0.45);

    --ok:          #34d399;

    --radius-sm:   12px;
    --radius:      18px;
    --radius-lg:   28px;
    --radius-xl:   36px;

    --shadow-lg:   0 30px 80px -20px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 25px 80px -20px var(--brand-glow);

    --maxw:        1180px;
    --header-h:    74px;
}

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

html {
    scroll-behavior: smooth;
    /* Solid fallback so iOS overscroll / pre-paint never flashes white. */
    background: var(--bg-0);
    /* Guarantee no horizontal scroll, even if a child element accidentally
       overflows its grid track on a very narrow viewport. */
    overflow-x: hidden;
    width: 100%;
}

/* The .aurora layer (position: fixed; z-index: -1) IS our background.
   Keeping body transparent stops it from painting a solid color on top
   of the aurora — that was causing a visible two-tone seam on mobile
   wherever body height was shorter than the viewport. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: transparent;
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    /* Stop iOS Safari from auto-zooming the viewport when an input is
       focused and from picking weird font sizes for headings. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Anything visual that escapes its parent should never push a horizontal
   scrollbar onto the page. */
img, svg, video, iframe { max-width: 100%; }

/* Long words / URLs / emails wrap instead of pushing horizontal overflow
   on narrow screens. Belt-and-braces for any system-font fallback that
   measures wider than Sora. */
h1, h2, h3, h4, p, a, li, span, button, input, textarea, label {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Stop flex items from blowing out their container. By default flex
   items have min-width: auto which makes them as wide as their content,
   which can force horizontal scroll. */
.nav,
.hero-grid > *, .page-hero-grid > *,
.hero-actions > *, .landing-actions > *,
.cards > *, .work-grid > *, .skills-grid > *,
.contact-grid > *, .form-row > *,
.landing-inner > *, .socials > *, .landing-socials > *,
.work-stack > *, .stats > * {
    min-width: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: 'Sora', 'Inter', sans-serif; line-height: 1.1; letter-spacing: -0.02em; }

/* -------------------------------------------------------------
   Ambient background: subtle aurora orbs.
   ------------------------------------------------------------- */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1200px 800px at 80% -10%, rgba(59, 130, 246, 0.14), transparent 60%),
        radial-gradient(900px 700px at -10% 30%, rgba(96, 165, 250, 0.08), transparent 60%),
        radial-gradient(800px 600px at 50% 110%, rgba(59, 130, 246, 0.10), transparent 60%),
        linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
}

.aurora .orb {
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: drift 18s ease-in-out infinite;
}
.aurora .orb-1 { background: #3b82f6; top: -100px; left: -120px; }
.aurora .orb-2 { background: #60a5fa; top: 40%;    right: -160px; animation-delay: -6s; }
.aurora .orb-3 { background: #1e40af; bottom: -180px; left: 30%;  animation-delay: -12s; opacity: 0.30; }

@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(40px, -30px, 0) scale(1.08); }
}

/* -------------------------------------------------------------
   Preloader
   -------------------------------------------------------------
   `pointer-events: none` is critical: without it, the loader's
   z-index: 9999 makes it absorb every tap during the first ~1.4s
   while it fades out, which on a phone made the hamburger feel
   "dead" — taps were hitting the invisible loader, not the button.
   ------------------------------------------------------------- */
.loader {
    position: fixed;
    inset: 0;
    background: var(--bg-0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    gap: 18px;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader.hidden { opacity: 0; visibility: hidden; }

.loader-logo {
    width: 110px; height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 8px 30px var(--brand-glow));
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.05); opacity: 0.85; }
}

.loader-bar {
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.loader-progress {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius: 999px;
    animation: load 1.8s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
@keyframes load { to { width: 100%; } }

.loader-text {
    color: var(--muted-2);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------
   Header
   ------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px max(20px, 4vw);
    background: rgba(11, 14, 19, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-soft);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-mark {
    width: 42px; height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px var(--brand-glow));
}
.brand-text {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.brand-text-soft { color: var(--muted); font-weight: 500; }
.brand-text-bold { color: var(--brand-2); }

.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.nav a {
    position: relative;
    font-size: 0.92rem;
    color: var(--muted);
    transition: color 0.2s ease;
    white-space: nowrap;
}
.nav a:hover { color: var(--text); }

/* Clean active-page indicator — brand-coloured text + a thin
   gradient bar that slides in from the centre. */
.nav a.active {
    color: var(--text);
    font-weight: 600;
}
.nav a.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 12px var(--brand-glow);
    animation: navIndicator 0.35s ease-out;
}
@keyframes navIndicator {
    from { width: 0; opacity: 0; }
    to   { width: 22px; opacity: 1; }
}

.nav-cta {
    position: relative;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--brand);
    color: #02060f !important;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: ctaPulse 2.4s ease-in-out infinite;
}
.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px var(--brand-glow);
    animation-play-state: paused;
}
/* Soft "breathing" glow so the CTA gently calls attention to itself. */
@keyframes ctaPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(59, 130, 246, 0.55),
            0 8px 18px -8px var(--brand-glow);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(59, 130, 246, 0),
            0 10px 22px -8px var(--brand-glow);
    }
}
@media (prefers-reduced-motion: reduce) {
    .nav-cta { animation: none; }
    .nav a.active::after { animation: none; }
}

/* -------------------------------------------------------------
   Layout
   ------------------------------------------------------------- */
.page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 max(24px, 4vw);
}

/* Landing variant: pin the viewport on desktop/tablet (no page scroll). */
body.is-landing {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.page-landing {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
}

.section { padding: 90px 0; }
.page-section { padding: 60px 0 100px; }
.section-head {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}
.section-head h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 12px 0 14px;
}
.section-head p { color: var(--muted); }

.eyebrow {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */
.hero { padding: 72px 0 60px; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 22px;
}
.pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
    animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.4; } }

.hero-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    margin-bottom: 12px;
}
.grad {
    background: linear-gradient(120deg, var(--brand), var(--brand-2) 40%, var(--brand-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-role {
    color: var(--brand-2);
    font-weight: 500;
    margin-bottom: 16px;
}
.hero-bio {
    color: var(--muted);
    max-width: 540px;
    margin-bottom: 28px;
}

.hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.meta-label {
    display: block;
    font-size: 0.7rem;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.meta-value {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 500;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-primary {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #02060f;
    box-shadow: 0 12px 30px -10px var(--brand-glow);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -10px rgba(59, 130, 246, 0.7);
}
.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.15); }

.socials {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--muted);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.social i { font-size: 0.95rem; }
.social:hover {
    color: var(--brand-2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    background: var(--surface-2);
}
/* Per-brand hover tints */
.social[aria-label="GitHub"]:hover   { color: #f6f7fb; border-color: rgba(246, 247, 251, 0.4); }
.social[aria-label="LinkedIn"]:hover { color: #38bdf8; border-color: rgba(56, 189, 248, 0.45); }
.social[aria-label="Twitter"]:hover  { color: #f6f7fb; border-color: rgba(246, 247, 251, 0.4); }
.social[aria-label="WhatsApp"]:hover { color: #25d366; border-color: rgba(37, 211, 102, 0.45); }
.social[aria-label="Email"]:hover    { color: var(--brand-2); }

/* Hero visual */
.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.logo-stage {
    position: relative;
    width: min(420px, 100%);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.20);
    inset: 0;
    animation: spin 28s linear infinite;
}
.ring::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 18px var(--brand);
    top: -5px; left: 50%;
    transform: translateX(-50%);
}
.ring-1 { inset: -6%;  animation-duration: 32s; }
.ring-2 { inset: 4%;   animation-duration: 22s; animation-direction: reverse; border-color: rgba(96, 165, 250, 0.16); }
.ring-2::after { background: var(--brand-2); box-shadow: 0 0 14px var(--brand-2); }
.ring-3 { inset: 14%;  animation-duration: 42s; border-color: rgba(147, 197, 253, 0.12); }
.ring-3::after { background: var(--brand-3); box-shadow: 0 0 12px var(--brand-3); }
@keyframes spin { to { transform: rotate(360deg); } }

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.stat:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.35);
    background: var(--surface-2);
}
.stat strong {
    display: block;
    font-family: 'Sora', sans-serif;
    color: var(--brand-2);
    font-size: 1.4rem;
    margin-bottom: 4px;
}
.stat span {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* -------------------------------------------------------------
   Highlights cards
   ------------------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 60px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 200px at 0% 0%, rgba(59, 130, 246, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.35);
}
.card:hover::before { opacity: 1; }

.card-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    margin-bottom: 18px;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.92rem; }

/* -------------------------------------------------------------
   Skills bars
   ------------------------------------------------------------- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.skill-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.skill-name { font-weight: 500; }
.skill-level { color: var(--muted-2); font-size: 0.85rem; }
.skill-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.skill-fill {
    height: 100%;
    width: var(--lvl, 0);
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius: 999px;
    transform-origin: left;
    animation: fillBar 1.4s cubic-bezier(0.6, 0, 0.4, 1) forwards;
    transform: scaleX(0);
}
@keyframes fillBar { to { transform: scaleX(1); } }

/* -------------------------------------------------------------
   Work grid — at least 4 per row on desktop, slim icon-led cards
   ------------------------------------------------------------- */
.work-grid {
    display: grid;
    /* default mobile-first: 1 col */
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 560px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px){ .work-grid { grid-template-columns: repeat(4, 1fr); } }

.work {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 18px 20px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: inherit;
}
.work::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(280px 160px at 100% 0%, rgba(59, 130, 246, 0.14), transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.work:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.35);
    background: var(--surface-2);
}
.work:hover::before { opacity: 1; }

.work-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-2);
    font-size: 1.15rem;
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.work-body { display: flex; flex-direction: column; gap: 8px; }
.work-tag {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-2);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.work-body h3 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
}
.work-body p {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------
   Contact
   ------------------------------------------------------------- */
.contact { padding-bottom: 110px; }
.contact-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 44px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(600px 300px at 90% 10%, rgba(59, 130, 246, 0.20), transparent 60%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(59, 130, 246, 0.20);
    box-shadow: var(--shadow-lg);
}
.contact-card h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin: 12px 0 10px;
}
.contact-card p { color: var(--muted); }

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--border-soft);
    padding: 22px max(24px, 4vw);
    text-align: center;
    background: rgba(11, 14, 19, 0.5);
    backdrop-filter: blur(10px);
}
.footer-inner p {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.01em;
}

/* -------------------------------------------------------------
   404
   ------------------------------------------------------------- */
.not-found {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 24px;
}
.not-found h1 {
    font-size: 6rem;
    background: linear-gradient(120deg, var(--brand), var(--brand-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------
   Landing (100vh) layout
   ------------------------------------------------------------- */
.landing {
    width: 100%;
    display: flex;
    justify-content: center;
}
.landing-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Children that could exceed the column (a long title, a URL, an
       inline-flex social pill row) must clip to the column width
       rather than push horizontal overflow. */
    min-width: 0;
}

.landing-logo-stage {
    position: relative;
    width: clamp(160px, 22vh, 230px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}
.landing-logo {
    width: 84%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 22px 50px var(--brand-glow));
    animation: float 6s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.landing-title {
    /* Scales smoothly from ~22px on a 320px phone to ~54px on desktop
       without the floor that previously caused overflow with the
       system-font fallback. */
    font-size: clamp(1.4rem, 7.5vw, 3.4rem);
    line-height: 1.1;
    max-width: 100%;
}
.landing-role {
    color: var(--brand-2);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
}
.landing-tagline {
    color: var(--muted);
    max-width: 560px;
    font-size: clamp(0.92rem, 1.5vw, 1.02rem);
    text-wrap: pretty;
}
.landing-tagline strong { color: var(--text); font-weight: 600; }
/* Manual line break that only kicks in on phones — desktop keeps the
   sentence flowing on one or two natural lines, mobile splits it
   cleanly after "Takoradi Technical University," so the second clause
   starts on its own line and never runs to the screen edge. */
.brk-mobile { display: none; }

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.landing-socials {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.landing-socials a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--muted);
    transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.landing-socials a i { font-size: 0.9rem; }
.landing-socials a:hover {
    color: var(--brand-2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    background: var(--surface-2);
}
.landing-socials a[aria-label="GitHub"]:hover   { color: #f6f7fb; border-color: rgba(246, 247, 251, 0.4); }
.landing-socials a[aria-label="LinkedIn"]:hover { color: #38bdf8; border-color: rgba(56, 189, 248, 0.45); }
.landing-socials a[aria-label="Twitter"]:hover  { color: #f6f7fb; border-color: rgba(246, 247, 251, 0.4); }
.landing-socials a[aria-label="WhatsApp"]:hover { color: #25d366; border-color: rgba(37, 211, 102, 0.45); }

/* -------------------------------------------------------------
   Page hero (About)
   ------------------------------------------------------------- */
.page-hero { padding: 80px 0 60px; }
.page-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
    align-items: stretch;
}
.page-title {
    font-size: clamp(1.5rem, 6vw, 3.2rem);
    margin: 14px 0 18px;
    line-height: 1.1;
    max-width: 100%;
}
.page-lead {
    color: var(--muted);
    max-width: 580px;
    margin-bottom: 24px;
    font-size: 1.02rem;
}

.about-aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* -------------------------------------------------------------
   About → portrait card (replaces the old spinning-rings logo).
   Card stretches to match the height of the text column on the
   left, so both sides of the hero line up. Image fills via
   object-fit: cover.
   ------------------------------------------------------------- */
.about-portrait {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 460px;
    align-self: center;
    flex: 1 1 auto;
    min-height: 320px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: var(--surface);
    box-shadow:
        0 30px 60px -25px rgba(2, 6, 23, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 20px 60px -20px var(--brand-glow);
    isolation: isolate;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.about-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(2, 6, 23, 0) 55%,
        rgba(2, 6, 23, 0.55) 88%,
        rgba(2, 6, 23, 0.85) 100%);
    pointer-events: none;
    z-index: 1;
}
.about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 30%;
    display: block;
    transition: transform 0.6s ease;
}
.about-portrait:hover {
    transform: translateY(-4px);
    box-shadow:
        0 36px 70px -25px rgba(2, 6, 23, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 28px 70px -18px var(--brand-glow);
}
.about-portrait:hover img { transform: scale(1.03); }

.about-portrait figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
}
.portrait-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.portrait-badge i {
    color: #4ade80;
    font-size: 0.55rem;
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.35); }
}

.page-cta {
    margin-top: 40px;
    text-align: center;
}

/* -------------------------------------------------------------
   Work — stack chips
   ------------------------------------------------------------- */
.work-stack {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.work-stack li {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 500;
}

/* -------------------------------------------------------------
   Contact page
   ------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
    align-items: stretch;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.info-block { display: flex; flex-direction: column; gap: 6px; }
.info-value {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}
a.info-value:hover { color: var(--brand-2); }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    background:
        radial-gradient(500px 250px at 90% -10%, rgba(59, 130, 246, 0.16), transparent 60%),
        var(--surface);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: var(--radius-lg);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note {
    color: var(--muted-2);
    font-size: 0.78rem;
    margin-top: 4px;
}
.form-note a { color: var(--brand-2); }
.form-note a:hover { text-decoration: underline; }

/* Inline form feedback */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 4px;
    border: 1px solid transparent;
    line-height: 1.45;
}
.alert-success {
    background: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.35);
    color: #a7f3d0;
}
.alert-error {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}
.field-error {
    color: #fca5a5;
    font-size: 0.75rem;
    margin-top: 2px;
}
.contact-form input.is-error,
.contact-form textarea.is-error {
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

/* Honeypot — off-screen but still in the layout for bots */
.hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Math captcha row */
.contact-form .captcha {
    background: rgba(56, 189, 248, 0.05);
    border: 1px dashed rgba(56, 189, 248, 0.28);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-form .captcha > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-1);
    font-size: 0.85rem;
}
.contact-form .captcha > span i { color: var(--brand-2); }
.contact-form .captcha > span strong {
    color: var(--text);
    letter-spacing: 0.2px;
}
.contact-form .captcha input {
    max-width: 200px;
}

/* -------------------------------------------------------------
   Responsive — mobile-first stepwise enhancements
   ------------------------------------------------------------- */

/* Tablet / small laptop */
@media (max-width: 1024px) {
    .hero-grid       { grid-template-columns: 1fr; gap: 36px; }
    .hero-visual     { order: -1; }
    .contact-card    { grid-template-columns: 1fr; padding: 32px; }
    .page-hero-grid  { grid-template-columns: 1fr; gap: 36px; align-items: start; }
    .about-aside     { order: -1; height: auto; }
    /* Portrait orientation matching the source image (which is roughly
       square). Avoids the previous 4/3 box that stretched the image
       horizontally on smaller screens. */
    .about-portrait  {
        aspect-ratio: 1 / 1;
        min-height: 0;
        flex: 0 0 auto;
        max-width: 460px;
        margin: 0 auto;
    }
    .contact-grid    { grid-template-columns: 1fr; }
}

/* Small tablet — desktop nav stays, just smaller text */
@media (max-width: 1024px) and (min-width: 769px) {
    .nav     { gap: 6px 18px; }
    .nav a   { font-size: 0.88rem; }
    .nav-cta { padding: 8px 14px; font-size: 0.85rem; }
}

/* Tablet & smaller — header wraps, nav becomes a compact inline row */
@media (max-width: 768px) {
    :root { --header-h: auto; }

    /* Tighter, mobile-native horizontal padding. Replaces the desktop
       max(24px, 4vw) so 320–768px viewports get a comfortable 16px
       gutter without feeling cramped or wasting screen real estate. */
    .page { padding: 0 16px; }

    /* Header wraps into two rows on phones: brand on top, nav links
       below. No drawer, no hamburger — the nav is always visible and
       links navigate on the first tap. */
    .site-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 14px;
    }
    .brand {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
    .brand-text { font-size: 0.95rem; }
    .brand-mark { width: 36px; height: 36px; }

    .nav {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 10px;
    }
    .nav a {
        font-size: 0.9rem;
        padding: 6px 10px;
        border-radius: 8px;
    }
    .nav a:hover { background: var(--surface); }
    .nav a.active {
        background: rgba(59, 130, 246, 0.16);
        color: var(--brand-2);
        font-weight: 600;
    }
    /* The animated underline used on desktop sits awkwardly when the
       row wraps, so hide it and let the background tint do the work. */
    .nav a.active::after { display: none; }
    .nav-cta {
        padding: 7px 14px !important;
        font-size: 0.85rem !important;
    }

    /* On phones the landing flows naturally from the top — no forced
       100dvh, no flex centring. The aurora layer paints the dark
       gradient over the full viewport, so any "extra" space below
       the hero stays visually consistent rather than looking like a
       blank trailing area. */
    body.is-landing {
        height: auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .page-landing {
        display: block;
        height: auto;
        min-height: 0;
        /* Generous breathing room above the hero so the logo never
           crowds the sticky header on tall phones. */
        padding: 84px 0 56px;
    }
    .landing              { display: block; }
    /* Inner column gets its own horizontal padding so the title and
       tagline never touch the screen edges — they wrap inside a
       comfortable reading column instead. */
    .landing-inner        { gap: 16px; margin: 0 auto; padding: 0 12px; }
    /* Bigger, more confident logo on phones. */
    .landing-logo-stage   { width: clamp(200px, 56vw, 280px); margin-bottom: 6px; }
    /* Fluid title with a small floor and a fluid ceiling that only
       depends on viewport width — wraps naturally instead of pushing
       to the edges, regardless of font fallback. */
    .landing-title        { font-size: clamp(1.5rem, 7vw, 2.4rem); padding: 0; }
    .landing-role         { font-size: clamp(0.9rem, 3.6vw, 1.05rem); }
    .landing-tagline      {
        font-size: clamp(0.85rem, 3.6vw, 0.98rem);
        max-width: 32ch;       /* ~32 characters — wraps after the first clause cleanly */
        margin-left: auto;
        margin-right: auto;
    }
    .brk-mobile { display: inline; }
    .landing-socials      { gap: 6px; }

    /* The rest of the small-screen tuning */
    .section         { padding: 64px 0; }
    .page-section    { padding: 48px 0 80px; }
    .hero            { padding: 36px 0; }
    .page-hero       { padding: 40px 0; }
    .section-head    { margin-bottom: 36px; }
    .hero-meta       { padding: 14px 16px; }
    .skills-grid     { padding: 22px; gap: 16px 22px; }
    .contact-info,
    .contact-form    { padding: 22px; }
    .form-row        { grid-template-columns: 1fr; }
    .stats           { gap: 8px; }
    .stat            { padding: 14px 10px; }
    .stat strong     { font-size: 1.2rem; }
}

/* Phone — slightly tighter header chrome */
@media (max-width: 560px) {
    .site-header { padding: 10px 14px; }
    .brand-text  { font-size: 0.9rem; }
    .brand-mark  { width: 32px; height: 32px; }
    .nav a       { font-size: 0.85rem; padding: 5px 9px; }

    .page-section   { padding: 36px 0 64px; }
    .page-hero      { padding: 32px 0; }
    .section-head   { margin-bottom: 28px; }
    .hero-meta      { grid-template-columns: 1fr; padding: 14px 16px; gap: 12px; }
    .skills-grid    { padding: 18px; grid-template-columns: 1fr; }
    .cards          { gap: 12px; }
    .card           { padding: 20px 18px; }
    .contact-info,
    .contact-form   { padding: 18px; }
    .contact-form input,
    .contact-form textarea { font-size: 0.9rem; padding: 10px 12px; }
    .btn-lg         { padding: 13px 22px; font-size: 0.92rem; }

    .work           { padding: 16px; gap: 10px; }
    .work-icon      { width: 38px; height: 38px; font-size: 1rem; }
    .work-body h3   { font-size: 0.95rem; }
    .work-body p    { font-size: 0.82rem; -webkit-line-clamp: 4; }

    /* Portrait: phones get a vertical-friendly card so the photo
       reads naturally and doesn't look squashed sideways. */
    .about-portrait {
        aspect-ratio: 4 / 5;
        max-width: 100%;
        border-radius: 18px;
    }

    .landing-inner       { gap: 10px; }
    .landing-tagline     { font-size: 0.85rem; }
    .landing-actions .btn{ padding: 10px 16px; font-size: 0.85rem; }
    .footer-inner p      { font-size: 0.78rem; }

    .page-hero-grid      { gap: 26px; }
    .page-title          { font-size: clamp(1.7rem, 7vw, 2.3rem); margin: 10px 0 12px; }
    .page-lead           { font-size: 0.95rem; }
    .hero-actions        { gap: 10px; }
    .hero-actions .btn   { flex: 1 1 auto; justify-content: center; }
}

/* Tiny phones — iPhone SE 1st-gen (320px), Galaxy S Mini, etc. */
@media (max-width: 380px) {
    .page                  { padding: 0 14px; }
    .brand-text-soft       { display: none; }
    .brand-mark            { width: 30px; height: 30px; }
    .nav a                 { font-size: 0.82rem; padding: 5px 8px; }
    .nav-cta               { padding: 6px 12px !important; font-size: 0.8rem !important; }

    .landing-inner         { gap: 8px; }
    .landing-role          { font-size: 0.88rem; }

    /* Force long words / URLs / emails to break instead of forcing
       horizontal scroll on narrow screens. */
    h1, h2, h3, p, a, span { overflow-wrap: anywhere; word-break: break-word; }

    .page-title            { font-size: clamp(1.5rem, 7.5vw, 2rem); }
    .page-lead             { font-size: 0.9rem; }

    .card                  { padding: 18px 16px; }
    .work                  { padding: 14px; }

    /* Contact form: cap the captcha so it can never overflow the
       form's content box on 320px. */
    .contact-form .captcha input { max-width: 100%; }
    .contact-form input,
    .contact-form textarea { font-size: 0.88rem; padding: 10px 12px; }

    .footer-inner p        { font-size: 0.72rem; line-height: 1.4; }
}

/* Short / landscape — pack the landing tighter. Scoped to
   `orientation: landscape` so portrait phones (which can scroll
   thanks to the mobile fix above) still show the full hero. */
@media (max-height: 720px) and (orientation: landscape) {
    .landing-inner       { gap: 6px; }
    .landing-logo-stage  { width: clamp(120px, 18vh, 170px); margin-bottom: 0; }
    .landing-title       { font-size: clamp(1.5rem, 4vw, 2.2rem); }
    .landing-tagline     { display: none; }
}
@media (max-height: 540px) and (orientation: landscape) {
    .landing-logo-stage  { width: clamp(96px, 14vh, 130px); }
    .landing-role        { font-size: 0.85rem; }
    .pill                { padding: 4px 10px; font-size: 0.7rem; }
    .landing-actions .btn{ padding: 8px 14px; font-size: 0.8rem; }
    .landing-socials     { display: none; }
}

/* -------------------------------------------------------------
   Mobile FAB — bottom-right quick-nav (phones / tablets only)
   -------------------------------------------------------------
   Hidden by default; the @media (max-width: 768px) block below
   turns it on. Anchored to the bottom-right and lifted with
   `safe-area-inset` so it clears iPhone home-indicator gestures.
   ------------------------------------------------------------- */
.mfab {
    display: none;
}

@media (max-width: 768px) {
    /* On phones the FAB IS the navigation. Hide the inline header
       links so we don't show two menus side by side. The brand stays
       visible on the left of the header. */
    .site-header .nav { display: none; }
    .site-header { justify-content: flex-start; }

    .mfab {
        display: block;
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
        z-index: 200;
    }

    .mfab-btn {
        position: relative;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #02060f;
        box-shadow:
            0 14px 30px -8px var(--brand-glow),
            0 4px 12px rgba(0, 0, 0, 0.35);
        display: grid;
        place-items: center;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mfab-btn:active { transform: scale(0.94); }

    .mfab-icon {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        transition: opacity 0.2s ease, transform 0.25s ease;
    }
    .mfab-icon-close { opacity: 0; transform: rotate(-45deg); font-size: 1.3rem; }

    /* Hamburger built from 3 spans — no extra icon font needed for
       the closed state, so the FAB renders even if FontAwesome is
       still loading. */
    .mfab-icon-bars {
        display: grid;
        gap: 5px;
    }
    .mfab-icon-bars span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #02060f;
    }

    .mfab.is-open .mfab-icon-bars  { opacity: 0; transform: rotate(45deg); }
    .mfab.is-open .mfab-icon-close { opacity: 1; transform: rotate(0); }
    .mfab.is-open .mfab-btn        { transform: rotate(0); }

    .mfab-menu {
        position: absolute;
        right: 0;
        bottom: 72px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 200px;
        padding: 10px;
        background: rgba(11, 14, 19, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(0.96);
        transform-origin: bottom right;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .mfab.is-open .mfab-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .mfab-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        color: var(--text);
        font-size: 0.92rem;
        font-weight: 500;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .mfab-link i {
        width: 18px;
        text-align: center;
        color: var(--muted);
        font-size: 0.95rem;
    }
    .mfab-link:active { background: var(--surface-2); }
    .mfab-link.is-active {
        background: rgba(59, 130, 246, 0.16);
        color: var(--brand-2);
    }
    .mfab-link.is-active i { color: var(--brand-2); }

    .mfab-link-cta {
        margin-top: 4px;
        background: linear-gradient(120deg, var(--brand), var(--brand-2));
        color: #02060f;
    }
    .mfab-link-cta i { color: #02060f; }
    .mfab-link-cta.is-active { background: linear-gradient(120deg, var(--brand-2), var(--brand-3)); color: #02060f; }

    /* Make sure footer never sits under the FAB. */
    .site-footer { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}