:root {
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #111827; /* charcoal */
    --muted: #4b5563;
    --border: #e5e7eb;
    /* Stronger, modern mint (vivid but clean) */
    --mint: #19E6B6;
    --mint-deep: #0FBF95;
    --mint-soft: rgba(25, 230, 182, .18);
    --mint-soft-2: rgba(25, 230, 182, .10);
    --charcoal: #111827;
    --shadow: 0 10px 30px rgba(17,24,39,.08), 0 0 0 1px rgba(25,230,182,.10);
    --shadow-mint: 0 12px 34px rgba(17,24,39,.10), 0 0 0 6px var(--mint-soft);
    --radius: 18px;
}


* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height: 1.5;
}

a {
    color: inherit
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 18px
}

.grid {
    display: grid;
    gap: 26px;
    align-items: center
}

.grid-3 {
    display: grid;
    gap: 18px
}

@media (min-width: 900px) {
    .grid {
        grid-template-columns: .9fr 1.1fr; /* 40/60-ish */
    }

    .grid-3 {
        grid-template-columns: repeat(3,1fr)
    }
}


.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

    .skip-link:focus {
        left: 18px;
        top: 18px;
        width: auto;
        height: auto;
        background: var(--mint);
        color: var(--charcoal);
        padding: 10px 12px;
        border-radius: 10px;
        z-index: 9999
    }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}

    .site-header .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
    }

    /* Push nav to the right */
    .site-header nav {
        margin-left: auto;
    }

/* Keep items aligned nicely */
.nav {
    justify-content: flex-end;
}


.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 750;
    letter-spacing: .2px
}

    .brand svg {
        color: var(--mint)
    }

.nav {
    list-style: none;
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0
}

    .nav a {
        text-decoration: none;
        color: var(--text);
        opacity: .9
    }

        .nav a:hover {
            opacity: 1
        }

.nav-toggle {
    display: none
}

@media (max-width: 760px) {
    .nav-toggle {
        display: inline-flex;
        border: 1px solid var(--border);
        background: #fff;
        padding: 8px 10px;
        border-radius: 12px
    }

    .nav {
        display: none;
        position: absolute;
        right: 18px;
        top: 58px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 10px;
        box-shadow: var(--shadow);
        flex-direction: column
    }

        .nav.is-open {
            display: flex
        }
}

/* Ensure nav button keeps white text */
.nav a.btn {
    color: #fff;
}

    .nav a.btn:hover {
        color: #fff; /* keep white on hover too */
    }

/* Make header CTA button more compact */
.site-header .nav .btn-small {
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 12px;
}


.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
}

    .social-link svg {
        color: var(--mint)
    }

.hero {
    padding: 54px 0 20px
}

h1 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    margin: 0 0 14px
}

h2 {
    font-size: clamp(24px, 2.4vw, 30px);
    margin: 0 0 14px
}

h3 {
    margin: 0 0 8px
}

.lede {
    font-size: 18px;
    color: var(--muted);
    margin: 0 0 10px
}

.stack > * + * {
    margin-top: 10px
}

.underline {
    position: relative;
    padding: 0 2px;
}

    .underline::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: .12em;
        height: .28em;
        background: var(--mint);
        opacity: .55;
        border-radius: 999px;
        z-index: -1;
    }
/* Make underline visible inside rotator captions */
.rotator-captions .underline {
    display: inline-block;
    position: relative;
    z-index: 0; /* creates a stacking context for the ::after */
}

    .rotator-captions .underline::after {
        z-index: -1; /* behind the text, but still inside this span */
        height: .22em;
        bottom: .08em;
        opacity: .75;
    }

.rotator-cap:not(.is-active).underline::after {
    display: none;
}

/* Rotator captions: show only active */
.rotator-cap {
    display: none !important;
}

    .rotator-cap.is-active {
        display: inline-block !important;
        position: relative;
        z-index: 0;
        padding: 0 2px;
    }

        /* Mint underline for active caption */
        .rotator-cap.is-active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: .08em;
            height: .22em;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--mint), rgba(25,230,182,.55));
            opacity: .75;
            z-index: -1;
        }

/* Make the whole laptop screen clickable without changing layout */
.rotator-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

    .rotator-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 6px var(--mint-soft);
        border-radius: inherit;
    }

.section {
    padding: 44px 0
}

    .section.alt {
        background: #f9fafb;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border)
    }

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

/* Cards/boxes: mint-graded shadow + mint glow on hover */
.card {
    box-shadow: var(--shadow);
}

    .card:hover {
        border-color: rgba(25,230,182,.35);
        box-shadow: var(--shadow-mint);
    }

/* List items are boxes too — keep consistent */
.list-item {
    box-shadow: var(--shadow);
}

    .list-item:hover {
        border-color: rgba(25,230,182,.35);
        box-shadow: var(--shadow-mint);
    }


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--charcoal);
    color: #fff;
    border: 1px solid var(--charcoal);
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 650;
}

    .btn:hover {
        filter: brightness(1.05)
    }

    .btn:active {
        transform: translateY(1px)
    }

.btn-small {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px
}

/* Secondary button base (your current “Email instead” look) */
.btn-secondary {
    background: var(--charcoal);
    color: #fff;
    border: 1px solid rgba(25,230,182,.45);
    box-shadow: 0 8px 18px rgba(17,24,39,.10);
}

    /* Make hover identical to primary .btn hover */
    .btn-secondary:hover {
        color: #fff;
        box-shadow: 0 10px 24px rgba(17,24,39,.12), 0 0 0 6px var(--mint-soft);
        filter: brightness(1.05);
    }

    /* Match focus style too (optional but nice) */
    .btn-secondary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 6px var(--mint-soft), 0 10px 24px rgba(17,24,39,.12);
    }



.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px
}

.list {
    display: grid;
    gap: 14px
}

@media(min-width:900px) {
    .list {
        grid-template-columns: repeat(2,1fr)
    }
}

.list-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

    .list-item h3 {
        display: flex;
        align-items: center;
        gap: 10px
    }

        .list-item h3::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--mint);
            box-shadow: 0 0 0 6px rgba(126,229,195,.18);
        }

.form .field {
    display: block;
    margin: 0 0 12px
}

.field span {
    display: block;
    font-weight: 650;
    margin: 0 0 6px
}

input, textarea {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    outline: none;
}

    input:focus, textarea:focus {
        border-color: var(--mint);
        box-shadow: 0 0 0 6px rgba(126,229,195,.18)
    }

.flex {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px
}

.muted {
    color: var(--muted)
}

.hidden {
    display: none
}

/* Rotator images should stack and fade */
.rotator {
    position: relative;
    width: 100%;
    height: 100%;
}

.rotator-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity .35s ease, transform .35s ease;
}

    .rotator-img.is-active {
        opacity: 1;
        transform: scale(1);
    }


.rotator-captions {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px
}

.rotator-cap {
    display: none
}

    .rotator-cap.is-active {
        display: inline
    }

/* Caption underline: slimmer + lower so it looks clean at small font sizes */
.rotator-captions .underline::after {
    height: .22em;
    bottom: .08em;
    opacity: .65;
}


/* Links: subtle mint hover */
a:hover {
    color: var(--mint-deep);
}

/* Brand + icons already use var(--mint) — keep */

/* Primary button: charcoal + mint edge + mint glow on hover */
.btn {
    background: var(--charcoal);
    border: 1px solid rgba(25,230,182,.35);
    box-shadow: 0 8px 18px rgba(17,24,39,.10);
}

    .btn:hover {
        box-shadow: 0 10px 24px rgba(17,24,39,.12), 0 0 0 6px var(--mint-soft);
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 6px var(--mint-soft), 0 10px 24px rgba(17,24,39,.12);
    }

/* Cards: slight mint border on hover */
.card:hover {
    border-color: rgba(25,230,182,.35);
}


/* Laptop mockup: rotator sits inside the screen area */
.hero-card {
    padding: 16px;
}

.laptop {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(25,230,182,.08), rgba(17,24,39,.02));
    border: 1px solid rgba(25,230,182,.25);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Screen area */
.laptop-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #0b1220;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(25,230,182,.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

    /* Small “camera” dot */
    .laptop-screen::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 6px;
        height: 6px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgba(25,230,182,.55);
        box-shadow: 0 0 0 6px rgba(25,230,182,.12);
        z-index: 5;
    }

/* Keyboard/base */
.laptop-base {
    height: 22px;
    margin: 12px auto 2px;
    width: 92%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(17,24,39,.10), rgba(17,24,39,.03));
    border: 1px solid rgba(17,24,39,.08);
}

.hero-card:hover {
    box-shadow: var(--shadow-mint);
}


/* Captions under the laptop */
.rotator-captions {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
}

/* Underline: stronger mint */
.underline::after {
    background: linear-gradient(90deg, var(--mint), rgba(25,230,182,.55));
    opacity: .75;
}

/* Focus rings more mint-forward */
input:focus, textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 6px var(--mint-soft);
}

/* List bullets: stronger mint glow */
.list-item h3::before {
    background: var(--mint);
    box-shadow: 0 0 0 7px var(--mint-soft);
}


.site-footer {
    padding: 22px 0
}

.footer-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0
}

    .footer-links a {
        text-decoration: none;
        color: var(--muted)
    }

        .footer-links a:hover {
            color: var(--text)
        }

.laptop-photo {
    position: relative;
    width: 100%;
}

.laptop-frame {
    width: 100%;
    height: auto;
    display: block;
}

/* Make the slot clip perfectly */
.laptop-photo {
    /* Tune these 4 values once for your laptop-frame.png */
    --screen-left: 14%;
    --screen-top: 11%;
    --screen-width: 72%;
    --screen-height: 72%;
}

.laptop-screen-slot {
    position: absolute;
    left: var(--screen-left);
    top: var(--screen-top);
    width: var(--screen-width);
    height: var(--screen-height);
    overflow: hidden;
    border-radius: 10px;
}


    /* Ensure the rotator also clips + inherits the rounded corners */
    .laptop-screen-slot .rotator {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: inherit;
    }

    /* Remove any scaling that can cause 1–2px overflow artifacts */
    .laptop-screen-slot .rotator-img {
        transform: none !important; /* overrides your scale(1.01) */
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


/* Footer buttons: consistent style + alignment */
.site-footer .footer-links {
    align-items: center;
}

    .site-footer .footer-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--muted);
        text-decoration: none;
        line-height: 1; /* fixes vertical misalignment */
        font-weight: 600;
        transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
    }

        /* If "LinkedIn" has class social-link in footer, neutralize its special size */
        .site-footer .footer-links a.social-link {
            width: auto;
            height: auto;
            border-radius: 12px;
            background: #fff;
        }

        /* Hover: mint-graded glow like the rest of the site */
        .site-footer .footer-links a:hover {
            color: var(--text);
            border-color: rgba(25,230,182,.45);
            box-shadow: 0 10px 24px rgba(17,24,39,.08), 0 0 0 6px var(--mint-soft);
        }

        /* Active press */
        .site-footer .footer-links a:active {
            transform: translateY(1px);
        }