/* index.css - Homepage styles - Refined Dark Authority */

/* ═══ HERO ═══ */
.hero{
    min-height:100vh;display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    padding:7rem 2rem 0;position:relative;overflow:hidden
}
.hero-bg{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 40%,rgba(100,255,218,.04) 0%,transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 70%,rgba(240,165,0,.03) 0%,transparent 60%),
        radial-gradient(ellipse 100% 80% at 50% 0%,rgba(100,255,218,.02) 0%,transparent 50%);
    pointer-events:none
}
.hero-content{
    max-width:1100px;width:100%;
    display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);
    align-items:center;position:relative;z-index:1
}
.hero-text{position:relative}

.hero-badge{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.4rem 1rem;
    border:1px solid rgba(100,255,218,.2);border-radius:var(--radius-pill);
    font-size:.78rem;color:var(--accent);
    font-family:var(--font-mono);
    margin-bottom:var(--space-5)
}
.badge-dot{
    width:7px;height:7px;background:var(--accent);border-radius:50%;
    animation:pulse 2s ease-in-out infinite
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(100,255,218,.4)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(100,255,218,0)}}
.badge-text{display:inline-block;transition:opacity .4s ease,transform .4s ease}
.badge-text.fade-out{opacity:0;transform:translateY(-4px)}
.badge-text.fade-in{opacity:0;transform:translateY(4px)}

.hero-title{
    font-size:3.35rem;font-weight:800;
    color:var(--text-bright);
    letter-spacing:-.03em;
    line-height:1;
    margin-bottom:.8rem
}
.hero-subtitle{
    font-family:var(--font-mono);
    font-size:1.2rem;color:var(--accent);
    margin-bottom:.8rem
}
.hero-subtitle::before{content:'> ';opacity:.4}

.hero-tagline{
    font-size:1.15rem;color:var(--text-primary);
    line-height:1.6;margin-bottom:var(--space-6);
    max-width:520px
}
.hero-actions{
    display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center
}
.hero-actions [data-lang].lang-active{display:inline-flex}

.hero-socials{display:flex;gap:.8rem;margin-top:var(--space-6)}
.hero-socials a{
    width:40px;height:40px;
    border:1px solid var(--border);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-secondary);transition:all .2s
}
.hero-socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.hero-socials .icon{width:1em;height:1em}

.hero-visual{
    display:flex;justify-content:center;align-items:center
}
.profile-frame{
    width:320px;height:320px;border-radius:50%;
    position:relative;overflow:visible;
    border:1px solid rgba(100,255,218,.06);
    box-shadow:-15px -8px 50px rgba(35,50,70,.35),18px 12px 65px rgba(30,45,65,.3),-5px 20px 80px rgba(25,40,60,.2),8px -18px 55px rgba(100,255,218,.02)
}
.profile-frame::before{
    content:'';position:absolute;inset:0;border-radius:50%;
    box-shadow:inset 0 0 35px 15px rgba(8,11,20,.9);
    z-index:2;pointer-events:none
}
.profile-frame::after{
    content:'';position:absolute;inset:-50px;
    border-radius:50%;z-index:0;
    background:
        radial-gradient(ellipse 45% 55% at 25% 35%,rgba(35,50,70,.45),transparent 70%),
        radial-gradient(ellipse 50% 40% at 75% 65%,rgba(30,45,65,.4),transparent 65%),
        radial-gradient(ellipse 60% 35% at 50% 15%,rgba(25,40,60,.35),transparent 60%),
        radial-gradient(ellipse 40% 50% at 65% 80%,rgba(32,48,68,.3),transparent 65%);
    filter:blur(18px)
}
.profile-frame img{
    width:100%;height:100%;object-fit:cover;object-position:center 20%;
    border-radius:50%;position:relative;z-index:1
}

/* ─── Proof strip ─── */

/* ═══ SERVICES TEASER ═══
   Left-aligned to match the blog/cves/tools listing pattern. Max-width
   900px ties it to the same column width as those listings so the whole
   home reads as one consistent rhythm. */
#services.section{max-width:1100px}
.paths-header{margin-bottom:var(--space-5)}
.paths-header .section-subtitle{max-width:1000px;margin-top:var(--space-4)}
.home-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.home-svc-card{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;text-decoration:none;transition:border-color .2s,transform .2s,background .2s}
.home-svc-card:hover{border-color:var(--accent);background:var(--bg-surface-hover);transform:translateY(-2px)}
.home-svc-card strong{color:var(--text-bright);font-size:1.05rem}
.home-svc-card span{color:var(--text-secondary);font-size:.92rem;line-height:1.6}
.home-svc-cta{
    display:flex;flex-wrap:wrap;
    gap:.8rem;
    margin-top:var(--space-6)}
/* Soft secondary path beneath the two primary CTAs: reads as a natural
   sentence ("Not sure where you fit? Book a free call →") so it doesn't
   compete visually with the buttons while still giving clients a fast
   conversion path. */
.home-svc-hint{
    margin-top:1.2rem;
    font-size:.92rem;
    color:var(--text-secondary)
}
.home-svc-hint a{color:var(--accent);text-decoration:none;border-bottom:1px dotted rgba(100,255,218,.4);transition:border-color .2s}
.home-svc-hint a:hover{border-bottom-color:var(--accent)}

/* ═══ TWO PATHS (legacy, kept in case paths-grid is reintroduced) ═══ */
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-7)}
.path-card{
    padding:2.5rem;
    display:flex;flex-direction:column;
    transition:all .3s;
    position:relative;overflow:hidden
}
.path-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    opacity:0;transition:opacity .3s
}
.path-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.path-card:hover::before{opacity:1}
.path-clients::before{background:linear-gradient(90deg,var(--accent-warm),rgba(240,165,0,.3))}
.path-learners::before{background:linear-gradient(90deg,var(--accent),rgba(100,255,218,.3))}

.path-header{
    display:flex;align-items:center;gap:var(--space-4);
    margin-bottom:1.2rem
}
.path-icon{
    width:44px;height:44px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-lg);
    color:var(--accent);
    background:rgba(100,255,218,.06);
    border:1px solid rgba(100,255,218,.12)
}
.path-clients .path-icon{
    color:var(--accent-warm);
    background:rgba(240,165,0,.06);
    border-color:rgba(240,165,0,.12)
}

.path-card h3{font-size:1.5rem;margin:0}
.path-card>p{color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-5);font-size:.95rem}
.path-card ul{list-style:none;margin-bottom:var(--space-6)}
.path-card>.btn{margin-top:auto}
.path-card li{
    color:var(--text-secondary);font-size:.9rem;
    padding:.35rem 0 .35rem 1.2rem;position:relative
}
.path-card li::before{content:'▹';position:absolute;left:0;color:var(--accent)}
.path-clients li::before{color:var(--accent-warm)}

/* ═══ RECENT WORK ═══ */
.work-tabs{
    display:flex;gap:var(--space-2);margin:2rem 0 1.5rem;
    border-bottom:1px solid var(--border);padding-bottom:0
}
.work-header .section-subtitle{max-width:760px;margin-top:var(--space-3)}
.work-hub-link{display:flex;justify-content:center;margin-top:var(--space-6)}
.work-tab{
    background:none;border:none;
    color:var(--text-secondary);
    font-family:var(--font-mono);font-size:.82rem;
    padding:.7rem 1.2rem;cursor:pointer;
    border-bottom:2px solid transparent;
    transition:all .2s;margin-bottom:-1px
}
.work-tab:hover{color:var(--text-primary)}
.work-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.work-panel{display:none}
.work-panel.active{display:block}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

/* Blog cards in work section */
.wk-blog-card{
    overflow:hidden;transition:all .3s
}
.wk-blog-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.wk-blog-card a{display:block;padding:var(--space-5);text-decoration:none;color:inherit}
.wk-blog-card .wk-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.wk-blog-card .wk-date{color:var(--accent);font-family:var(--font-mono);font-size:.72rem}
.wk-blog-card .wk-read{color:var(--text-secondary);font-family:var(--font-mono);font-size:.72rem}
.wk-blog-card h3{font-size:.95rem;color:var(--text-bright);margin-bottom:.4rem;line-height:1.3;font-family:var(--font-display)}
.wk-blog-card p{color:var(--text-secondary);font-size:.82rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* CVE cards in work section */
/* Home-tab CVE cards render the same .cve-card markup as /cves (shared
   styles in tools.css), so this block only sets padding overrides that
   keep the triple-column grid readable at homepage density. */
.work-grid .cve-card{padding:1.2rem}
/* The 3-column homepage grid gives each card ~220px of header width, which
   is too tight for a long CVE id plus the longest severity word ("CRITICAL")
   under the default sizes: the badge would wrap to its own line. Keep the
   id and badge on one line here with a smaller id and a tighter badge. The
   single-column /cves listing keeps the default (larger) sizes. */
.work-grid .cve-card-header{flex-wrap:nowrap;gap:.45rem}
.work-grid .cve-card-id{font-size:.9rem;white-space:nowrap}
.work-grid .cve-card-label{flex-shrink:0;white-space:nowrap;font-size:.62rem;padding:.12rem .4rem}

/* Tool cards in work section */
.wk-tool-card{
    padding:var(--space-5);transition:all .3s;
    position:relative;overflow:hidden
}
.wk-tool-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--accent),rgba(100,255,218,.15));
    opacity:0;transition:opacity .3s
}
.wk-tool-card:hover{border-color:rgba(100,255,218,.3);transform:translateY(-3px);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.wk-tool-card:hover::before{opacity:1}
.wk-tool-card a{text-decoration:none;color:inherit;display:flex;gap:1.1rem;align-items:flex-start}
.wk-tool-icon{
    width:48px;height:48px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,rgba(100,255,218,.1),rgba(100,255,218,.04));
    border:1px solid rgba(100,255,218,.15);
    color:var(--accent);
    transition:all .3s
}
.wk-tool-card:hover .wk-tool-icon{
    box-shadow:0 0 18px rgba(100,255,218,.1);
    border-color:rgba(100,255,218,.3)
}
.wk-tool-icon svg{width:26px;height:26px}
.wk-tool-body{flex:1;min-width:0}
.wk-tool-body h3{font-size:.95rem;color:var(--text-bright);margin-bottom:.3rem;font-family:var(--font-display)}
.wk-tool-card .wk-tool-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--space-2);font-family:var(--font-mono);font-size:.72rem}
.wk-tool-card .wk-tool-lang{color:var(--accent);padding:.15rem .5rem;background:var(--accent-dim);border-radius:var(--radius);font-weight:500}
.wk-tool-card .wk-tool-stars{
    color:var(--accent-warm);display:inline-flex;align-items:center;gap:.3rem;
    background:var(--accent-warm-dim);padding:.15rem .5rem;border-radius:var(--radius);font-weight:600
}
.wk-tool-card .wk-tool-stars::before{content:'\2605';font-size:.85rem}
.wk-tool-body p{color:var(--text-secondary);font-size:.82rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk-tool-arrow{
    position:absolute;top:1.5rem;right:1.2rem;
    color:var(--text-muted);font-size:1rem;
    transition:all .3s;opacity:0;transform:translateX(-8px)
}
.wk-tool-card:hover .wk-tool-arrow{opacity:1;transform:translateX(0);color:var(--accent)}

/* ═══ BACKGROUND (Experience + Certs) ═══ */
.bg-content{max-width:860px;margin:0 auto}

/* ─── Dual career paths ─── */
.career-paths{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);
    margin-bottom:var(--space-8)}
.career-track{padding:0}

.track-header{
    display:flex;align-items:center;gap:.45rem;
    margin-bottom:1.2rem;
    padding-bottom:.8rem;
    border-bottom:1px solid var(--border)
}
.track-icon{
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0
}
.track-icon svg{display:block}
.track-freelance .track-icon{color:var(--accent)}
.career-track:not(.track-freelance) .track-icon{color:var(--accent-warm)}
.track-header h3{
    font-size:.78rem;font-family:var(--font-mono);
    color:var(--text-secondary);font-weight:600;
    letter-spacing:1px;text-transform:uppercase;
    line-height:1
}

.track-items{display:flex;flex-direction:column;gap:var(--space-2)}

/* Visual grouping for items that belong together: same employer (corporate
   path: 4 offsec roles) or sub-activities of a single role (freelance path:
   what I do as a freelance). The accent rail on the left + the small label
   make the hierarchy obvious without an extra heading. */
.tl-group{
    position:relative;
    display:flex;flex-direction:column;gap:var(--space-2);
    padding:1.4rem .8rem .8rem 1.1rem;
    border-left:2px solid var(--accent-dim);
    margin-left:.4rem
}
.tl-group-label{
    position:absolute;top:.45rem;left:.9rem;
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:1.2px;
    padding:.1rem .4rem;
    background:var(--bg-deep);
    border-radius:3px
}
/* Corporate (warm-accent) gets a warm rail; freelance (default) keeps cyan. */
.career-track:not(.track-freelance) .tl-group{border-left-color:var(--accent-warm-dim)}
.career-track:not(.track-freelance) .tl-group-label{color:var(--accent-warm)}
.career-track.track-freelance .tl-group-label{color:var(--accent)}

.tl-item{
    padding:.75rem 1rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    transition:border-color .2s
}
.tl-item:hover{border-color:var(--border-hover)}

.tl-top{
    display:flex;align-items:center;
    gap:var(--space-2);flex-wrap:wrap
}
.tl-top strong{
    font-size:.92rem;color:var(--text-bright);
    font-family:var(--font-display);font-weight:600;line-height:1.3
}
.tl-year{
    font-family:var(--font-mono);font-size:.75rem;
    color:var(--text-secondary);font-weight:500;
    white-space:nowrap;
    margin-left:auto
}
.tl-meta{
    display:block;font-size:.8rem;
    color:var(--text-secondary);line-height:1.4;
    margin-top:.2rem
}

/* Current role highlight */
.tl-current{
    border-color:rgba(100,255,218,.15);
    background:rgba(100,255,218,.03)
}
.career-track:not(.track-freelance) .tl-current{
    border-color:rgba(240,165,0,.15);
    background:rgba(240,165,0,.03)
}
.tl-current .tl-year{color:var(--accent)}
.career-track:not(.track-freelance) .tl-current .tl-year{color:var(--accent-warm)}

.tl-badge{
    font-family:var(--font-mono);font-size:.58rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.8px;
    color:var(--accent);
    background:var(--accent-dim);
    padding:.15rem .5rem;border-radius:var(--radius-pill);
    flex-shrink:0;line-height:1
}
.career-track:not(.track-freelance) .tl-badge{
    color:var(--accent-warm);
    background:var(--accent-warm-dim)
}

/* ─── Certifications ─── */
.certs-section{margin-bottom:2.5rem}

.certs-label{
    display:flex;align-items:center;gap:.45rem;
    margin-bottom:1.2rem;
    padding-bottom:.8rem;
    border-bottom:1px solid var(--border)
}
.certs-label .track-icon{color:var(--accent)}
.certs-label h3{
    font-size:.78rem;font-family:var(--font-mono);
    color:var(--text-secondary);font-weight:600;
    letter-spacing:1px;text-transform:uppercase;
    line-height:1
}

.certs-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}

.cert-card{
    display:flex;align-items:center;gap:.8rem;
    padding:.75rem 1rem;
    border-radius:var(--radius);
    text-decoration:none;
    color:inherit;
    transition:all .25s;
    position:relative;
    overflow:hidden
}
.cert-card::before{
    content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
    background:var(--accent);
    opacity:0;transition:opacity .25s
}
.cert-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:0 4px 24px rgba(0,0,0,.25);
    color:inherit
}
.cert-card:hover::before{opacity:1}

.cert-icon{
    width:36px;height:36px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,rgba(100,255,218,.1),rgba(100,255,218,.03));
    border:1px solid rgba(100,255,218,.12);
    color:var(--accent);
    transition:all .25s
}
.cert-card:hover .cert-icon{
    box-shadow:0 0 14px rgba(100,255,218,.08);
    border-color:rgba(100,255,218,.25)
}

.cert-info{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:.1rem
}
.cert-name{
    font-size:.88rem;font-weight:600;
    color:var(--text-bright);
    font-family:var(--font-display);
    line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cert-issuer{
    font-family:var(--font-mono);font-size:.68rem;
    color:var(--text-secondary);
    letter-spacing:.2px
}

.cert-verify{
    flex-shrink:0;
    font-family:var(--font-mono);font-size:.68rem;
    color:var(--text-muted);
    display:flex;align-items:center;gap:.3rem;
    opacity:0;transform:translateX(-6px);
    transition:all .25s
}
.cert-verify svg{transition:transform .25s}
.cert-card:hover .cert-verify{
    opacity:1;transform:translateX(0);
    color:var(--accent)
}
.cert-card:hover .cert-verify svg{transform:translate(1px,-1px)}

.bg-link{text-align:center}
.bg-link a{
    color:var(--accent);font-family:var(--font-mono);font-size:.85rem;
    text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);transition:opacity .2s
}
.bg-link a:hover{opacity:.7}

/* ═══ TESTIMONIALS ═══
   .test-card and its variants live in common.css now so every page
   that loads it picks up the shared design. Only the home-specific
   layout bits stay here. */
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-7)}
#testimonials.section{max-width:1100px}
.test-more{display:flex;margin-top:var(--space-5)}

/* Verifiable-proof strip below the testimonial carousel. Anonymized quotes
   benefit from a row of public, checkable credentials (CVEs, LinkedIn,
   GitHub) so a buyer can independently validate the person behind them. */
.test-proof{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:.85rem 1.4rem;
    margin-top:1.6rem;
    padding-top:1.2rem;
    border-top:1px dashed var(--border)
}
.test-proof-label{
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:700;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:1.5px
}
.test-proof-link{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:var(--font-mono);
    font-size:.82rem;
    color:var(--text-secondary);
    text-decoration:none;
    transition:color .2s
}
.test-proof-link:hover{color:var(--accent)}
.test-proof-link .icon{width:14px;height:14px;flex-shrink:0}

/* ── Rotator: cards stacked in a single CSS-grid cell so the container
      sizes to the tallest quote. Only .is-active is visible; others fade
      out with opacity. JS handles the class toggling and pausing. */
.test-rotator{margin-top:var(--space-7);position:relative}
.test-stack{display:grid;grid-template-areas:"stack"}
.test-stack > .test-card{
    grid-area:stack;
    opacity:0;visibility:hidden;
    transition:opacity .45s ease;
    pointer-events:none
}
.test-stack > .test-card.is-active{
    opacity:1;visibility:visible;
    pointer-events:auto
}
.test-stack > .test-card:hover{transform:none}
.test-dots{
    display:flex;justify-content:center;gap:.6rem;
    margin-top:1.2rem
}
.test-dot{
    width:8px;height:8px;
    border:none;padding:0;
    border-radius:50%;
    background:var(--border);
    cursor:pointer;
    transition:background .2s,transform .2s
}
.test-dot:hover{background:var(--border-hover)}
.test-dot[aria-selected="true"]{background:var(--accent);transform:scale(1.25)}
.test-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ═══ MENTORING ═══ */
.ment-header .section-subtitle{margin:0 auto}
.booking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-7)}
.booking-card{
    padding:2rem 1.5rem;
    text-align:center;
    display:flex;flex-direction:column;
    position:relative;
    transition:all .3s
}
.booking-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.booking-popular{border-color:var(--accent)}
.booking-popular::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),rgba(100,255,218,.3));
    border-radius:var(--radius-lg) var(--radius-lg) 0 0
}
.booking-tag{
    position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    background:var(--accent);color:var(--bg-deep);
    font-size:.68rem;font-weight:700;font-family:var(--font-mono);
    padding:.2rem .8rem;border-radius:var(--radius-pill);
    text-transform:uppercase;letter-spacing:.5px;white-space:nowrap
}
.booking-card h3{font-size:1.15rem;margin:.5rem 0 .3rem}
.booking-dur{color:var(--text-secondary);font-size:.78rem;font-family:var(--font-mono)}
.booking-price{
    color:var(--accent);font-size:2rem;font-weight:700;
    font-family:var(--font-mono);margin:.5rem 0 .8rem
}
.price-old{color:var(--text-muted);font-size:.9rem;font-weight:400;text-decoration:line-through;margin-right:.3rem}
.booking-note-text{color:var(--text-secondary);font-size:.85rem;line-height:1.6;margin-bottom:var(--space-5);flex-grow:1}
.booking-btn{width:100%;justify-content:center;padding:.7rem;font-size:.82rem}

.ment-extra{
    text-align:center;margin-top:var(--space-6);
    color:var(--text-secondary);font-size:.88rem;
    font-family:var(--font-mono)
}
.ment-extra a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.ment-extra a:hover{border-bottom-color:var(--accent)}

.talks-strip{
    margin-top:var(--space-7);padding:var(--space-6);text-align:center
}
.talks-strip p{color:var(--text-secondary);font-size:.92rem;line-height:1.6;margin-bottom:var(--space-4)}
.talks-strip strong{color:var(--text-bright)}

/* ═══ CONTACT ═══ */
#contact{padding-bottom:var(--space-8)}
.contact-box{
    max-width:1000px;margin:0 auto;
    display:grid;grid-template-columns:.85fr 1.15fr;
    gap:var(--space-8);align-items:start
}
.contact-intro h2{font-size:2.35rem;margin-bottom:var(--space-4)}
.contact-intro>p{color:var(--text-secondary);font-size:1rem;line-height:1.7}
.contact-facts{list-style:none;margin:var(--space-6) 0;display:flex;flex-direction:column;gap:.65rem}
.contact-facts li{color:var(--text-secondary);font-size:.9rem;line-height:1.55;padding-left:1.35rem;position:relative}
.contact-facts li::before{content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:700}
.contact-facts a,.contact-speaking a{color:var(--accent);border-bottom:1px dotted color-mix(in srgb,var(--accent) 45%,transparent)}
.contact-facts a:hover,.contact-speaking a:hover{border-bottom-style:solid}
.project-brief{
    display:grid;grid-template-columns:1fr 1fr;gap:1rem;
    padding:1.6rem;background:var(--bg-surface);
    border:1px solid var(--border);border-radius:var(--radius-lg)
}
.brief-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.brief-field-wide{grid-column:1/-1}
.brief-field label{color:var(--text-bright);font-family:var(--font-mono);font-size:.75rem;font-weight:600}
.brief-field input,.brief-field select,.brief-field textarea{
    width:100%;min-height:44px;padding:.72rem .8rem;
    color:var(--text-primary);background:var(--bg-deep);
    border:1px solid var(--border);border-radius:var(--radius);
    font:inherit;font-size:.92rem;line-height:1.45
}
.brief-field textarea{min-height:110px;resize:vertical}
.brief-field input::placeholder,.brief-field textarea::placeholder{color:var(--text-muted);opacity:.9}
.brief-field input:hover,.brief-field select:hover,.brief-field textarea:hover{border-color:var(--border-hover)}
.brief-field input:focus-visible,.brief-field select:focus-visible,.brief-field textarea:focus-visible{border-color:var(--accent)}
.brief-submit{grid-column:1/-1;justify-content:center;min-height:46px}
.brief-privacy{grid-column:1/-1;color:var(--text-muted);font-family:var(--font-mono);font-size:.7rem;line-height:1.5;text-align:center;margin:-.35rem 0 0}
.brief-status{grid-column:1/-1;min-height:1.2em;color:var(--accent);font-family:var(--font-mono);font-size:.75rem;text-align:center}
.contact-email{
    display:inline-flex;align-items:center;gap:.8rem;
    color:var(--accent);font-family:var(--font-mono);font-size:1.05rem;
    padding:.9rem 2rem;border:1.5px solid var(--accent);
    border-radius:var(--radius);transition:all .3s;cursor:pointer;text-decoration:none
}
.contact-email:hover{background:var(--accent-dim);transform:translateY(-2px);box-shadow:0 4px 20px rgba(100,255,218,.12);color:var(--accent)}
.contact-email .icon{width:1.2em;height:1.2em}
.contact-meta{color:var(--text-secondary);font-size:.78rem;font-family:var(--font-mono);margin-top:var(--space-5);letter-spacing:.3px}
.contact-speaking{color:var(--text-secondary);font-size:.82rem;margin-top:1.2rem;font-family:var(--font-mono);line-height:1.6}

/* ═══ RESPONSIVE ═══ */
@media(max-width:968px){
    .hero-content{grid-template-columns:1fr;text-align:center}
    .hero-visual{order:-1}
    .profile-frame{width:240px;height:240px}
    .hero-title{font-size:2.75rem}
    .hero-tagline{margin-left:auto;margin-right:auto}
    .hero-actions{justify-content:center}
    .hero-socials{justify-content:center}
    .hero-badge{margin-left:auto;margin-right:auto}
    
    .paths-grid,.home-svc-grid{grid-template-columns:1fr}
    .work-grid{grid-template-columns:1fr}
    .career-paths{grid-template-columns:1fr;gap:2.5rem}
    .certs-grid{grid-template-columns:1fr}
    .tl-top{flex-direction:column;align-items:flex-start;gap:.2rem}
    .tl-year{margin-left:0}
    .test-grid{grid-template-columns:1fr}
    .booking-grid{grid-template-columns:1fr}
    .contact-box{grid-template-columns:1fr;gap:var(--space-6)}
}

@media(max-width:768px){
    .hero{min-height:auto;padding:6.5rem 1.5rem 3rem}
    .hero-title{font-size:2.35rem}
    .hero-subtitle{font-size:1rem}
    
    
    /* `.section` is defined once, in common.css. A copy here loaded later
       and, being the same specificity, beat the hero padding rule for
       every page that also loads this stylesheet (/about). */
    .section-title{font-size:2rem}
    .work-grid{grid-template-columns:1fr}
    .wk-cve-card{flex-direction:column;align-items:flex-start}
    .wk-cve-card a{flex-direction:column;align-items:flex-start}
}

@media(max-width:640px){
    .hero-visual{display:none}
    .hero-title{font-size:2.15rem}
    .hero-content{gap:0}
    .hero-actions,.home-svc-cta{display:grid;grid-template-columns:1fr;width:100%}
    .hero-actions .btn,.home-svc-cta .btn{width:100%;justify-content:center;text-align:center}
    .project-brief{grid-template-columns:1fr;padding:1.25rem}
    .brief-field,.brief-field-wide{grid-column:1}
    .contact-intro h2{font-size:1.8rem}
    .work-tabs{overflow-x:auto;scrollbar-width:thin}
    .work-tab{min-height:44px;white-space:nowrap}
}

/* ─── Light mode overrides ─── */
html[data-theme="light"] .profile-frame{border-color:rgba(0,0,0,.1);animation:none;box-shadow:0 8px 40px rgba(0,0,0,.18)}
html[data-theme="light"] .profile-frame::before{box-shadow:none}
html[data-theme="light"] .profile-frame::after{display:none}
html[data-theme="light"] .hero-bg{opacity:.4}
html[data-theme="light"] .hero-badge{border-color:rgba(13,125,95,.3)}