/* ══════════════════════════════════════════
   PAGE-LEVEL TOKENS  (inherits header vars)
══════════════════════════════════════════ */
:root {
    --brand:      #4eb39a;
    --brand-d:    #3a9b83;
    --brand-deep: #0e2d27;
    --brand-mid:  #1a4a3d;
    --tint:       rgba(78,179,154,0.08);
    --tint-b:     rgba(78,179,154,0.18);
    --border:     #deeee9;
    --text0:      #1a2e2b;
    --text1:      #334155;
    --text2:      #5f7a74;
    --text3:      #94aaa6;
    --mono:       'DM Mono', monospace;
    --sans:       'DM Sans', sans-serif;
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.05);
    --shadow-md:  0 4px 18px rgba(0,0,0,0.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
}

.founder-page {
    font-family: var(--sans);
    background: #f5f9f8;
    min-height: 100vh;
    color: var(--text0);
}

/* ══════════════════════════════════════════
   HERO — full-width dark gradient
══════════════════════════════════════════ */
.f-hero {
    background: linear-gradient(145deg, #0e2d27 0%, #1a4a3d 55%, #0d3530 100%);
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Radial glow */
.f-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 120% at 80% 50%, rgba(78,179,154,0.11) 0%, transparent 60%),
        radial-gradient(ellipse 30% 50% at 15% 80%, rgba(78,179,154,0.06) 0%, transparent 55%);
    pointer-events: none;
}

/* Shimmer top line */
.f-hero::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, #4eb39a 35%, #6fd1b3 50%, #4eb39a 65%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

/* Geometric grid texture */
.f-hero-bg-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .045;
    background-image:
        linear-gradient(rgba(78,179,154,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,179,154,1) 1px, transparent 1px);
    background-size: 48px 48px;
}

.f-hero-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 3.5rem 2rem 3rem;
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: center;
}

/* ── Avatar ── */
.f-avatar-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.f-avatar {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 3px solid rgba(78,179,154,0.45);
    box-shadow: 0 0 0 6px rgba(78,179,154,0.1), 0 12px 40px rgba(0,0,0,0.35);
    background: linear-gradient(145deg, #1a4a3d, #0e2d27);
    display: flex; align-items: center; justify-content: center;
    font-size: 4.5rem;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}
.f-avatar::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(to top, rgba(78,179,154,0.12), transparent);
    pointer-events: none;
}

/* Status dot */
.f-status {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 0.62rem; color: #6fd1b3;
    background: rgba(78,179,154,0.12); border: 1px solid rgba(78,179,154,0.25);
    border-radius: 20px; padding: 4px 12px;
}
.f-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6fd1b3;
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }

/* Social icons strip under avatar */
.f-social-strip {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.f-social-btn {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    transition: background .18s, border-color .18s, transform .15s;
    text-decoration: none; color: rgba(255,255,255,0.65);
}
.f-social-btn:hover { background: rgba(78,179,154,0.18); border-color: rgba(78,179,154,0.4); color: #6fd1b3; transform: translateY(-2px); }
.f-social-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── Hero text ── */
.f-hero-text {}

.f-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 0.62rem; color: #6fd1b3;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: .65rem;
}
.f-eyebrow::before { content: '//'; opacity: .5; }

.f-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 700; color: #fff; line-height: 1.1;
    letter-spacing: -.025em; margin-bottom: .4rem;
}
.f-hero-role {
    font-family: var(--mono); font-size: 0.78rem; color: rgba(255,255,255,0.45);
    letter-spacing: .04em; margin-bottom: 1.1rem;
}

/* Blockquote */
.f-quote {
    position: relative;
    border-left: 3px solid rgba(78,179,154,0.45);
    padding: .85rem 1.1rem;
    background: rgba(0,0,0,0.18);
    border-radius: 0 8px 8px 0;
    margin-bottom: 1.4rem;
    max-width: 520px;
    backdrop-filter: blur(4px);
}
.f-quote::before {
    content: '"';
    position: absolute; top: -.2rem; left: .7rem;
    font-size: 3rem; color: rgba(78,179,154,0.25);
    font-family: Georgia, serif; line-height: 1;
    pointer-events: none;
}
.f-quote p {
    font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.75;
    font-style: italic; padding-left: 1rem; margin: 0;
}
.f-quote cite {
    display: block; font-family: var(--mono); font-size: 0.62rem;
    color: #6fd1b3; margin-top: .5rem; padding-left: 1rem;
    font-style: normal; letter-spacing: .04em;
}

/* Hero tag pills */
.f-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.f-tag {
    font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
    padding: 3px 10px; border-radius: 4px; border: 1px solid;
    letter-spacing: .04em; text-transform: uppercase;
}
.ft-green  { color: #6fd1b3; border-color: rgba(111,209,179,.3); background: rgba(78,179,154,0.1); }
.ft-blue   { color: #93c5fd; border-color: rgba(147,197,253,.25); background: rgba(37,99,235,0.1); }
.ft-amber  { color: #fcd34d; border-color: rgba(252,211,77,.25);  background: rgba(217,119,6,0.1); }
.ft-purple { color: #d8b4fe; border-color: rgba(216,180,254,.25); background: rgba(124,58,237,0.1); }

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
.f-main {
    max-width: 1200px; margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

/* ── Cards shared ── */
.f-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    transition: box-shadow .2s;
}
.f-card:hover { box-shadow: var(--shadow-md); }

.f-card-head {
    background: #f5f9f8;
    border-bottom: 1px solid var(--border);
    padding: .85rem 1.4rem;
    display: flex; align-items: center; gap: 10px;
}
.f-card-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: #e1f5ee; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.f-card-icon svg { width: 13px; height: 13px; stroke: #3a9b83; fill: none; stroke-width: 2; }
.f-card-head h2 {
    font-size: 0.92rem; font-weight: 700; color: var(--text0);
    margin: 0;
}
.f-card-body { padding: 1.4rem 1.5rem; }

/* ── Vision card ── */
.vision-text {
    font-size: 0.92rem; color: var(--text1); line-height: 1.85;
    margin-bottom: 1rem;
}
.vision-text:last-child { margin-bottom: 0; }
.vision-text strong { color: var(--text0); }
.vision-highlight {
    background: linear-gradient(135deg, #e1f5ee 0%, #f0faf6 100%);
    border: 1px solid #b3ddd3;
    border-left: 4px solid var(--brand);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.875rem; color: var(--text1); line-height: 1.8;
}
.vision-highlight strong { color: var(--brand-deep); }

/* ── Expertise ── */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 12px;
}
.exp-item {
    background: #f5f9f8; border: 1px solid #deeee9;
    border-radius: 10px; padding: 1.1rem 1.15rem;
    position: relative; overflow: hidden;
    transition: box-shadow .18s, transform .15s;
}
.exp-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.exp-item::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--ei-color, var(--brand));
}
.exp-badge {
    font-size: 1.4rem; margin-bottom: .5rem; display: block;
}
.exp-title {
    font-size: 0.875rem; font-weight: 700; color: var(--text0); margin-bottom: .3rem;
}
.exp-desc {
    font-size: 0.8rem; color: var(--text2); line-height: 1.65;
}
.exp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .6rem; }
.exp-tag {
    font-family: var(--mono); font-size: 0.58rem; font-weight: 600;
    padding: 2px 7px; border-radius: 3px;
    background: #e1f5ee; color: #3a9b83;
    border: 1px solid #b3ddd3;
}

/* ── YouTube ── */
.yt-card-body { padding: 1.4rem 1.5rem; }
.yt-banner {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-radius: 10px; padding: 1.25rem 1.4rem;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(255,0,0,0.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.yt-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: #ff0000; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(255,0,0,0.3);
}
.yt-icon svg { width: 20px; height: 20px; fill: #fff; }
.yt-handle { font-size: 0.95rem; font-weight: 700; color: #fff; }
.yt-sub { font-family: var(--mono); font-size: 0.65rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.yt-body-text {
    font-size: 0.88rem; color: var(--text1); line-height: 1.8; margin-bottom: .85rem;
}
.yt-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .75rem; }
.yt-topic {
    font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
    padding: 3px 10px; border-radius: 4px;
    background: #f5f9f8; border: 1px solid #deeee9;
    color: var(--text2);
}
.yt-cta {
    display: inline-flex; align-items: center; gap: 7px;
    background: #ff0000; color: #fff;
    padding: 9px 18px; border-radius: 7px;
    font-size: 0.85rem; font-weight: 700;
    text-decoration: none; transition: background .15s, transform .12s;
    margin-top: .75rem;
}
.yt-cta:hover { background: #cc0000; transform: translateY(-1px); }
.yt-cta svg { width: 14px; height: 14px; fill: #fff; }

/* ── Commitment / manifesto ── */
.manifesto {
    background: linear-gradient(135deg, #0e2d27 0%, #1a4a3d 100%);
    border-radius: 12px; padding: 2rem 2.25rem;
    margin-bottom: 1.25rem;
    position: relative; overflow: hidden;
}
.manifesto::before {
    content: '❝';
    position: absolute; top: -1rem; right: 1.5rem;
    font-size: 8rem; color: rgba(78,179,154,0.07);
    font-family: Georgia, serif; line-height: 1;
    pointer-events: none;
}
.manifesto-label {
    font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
    color: #6fd1b3; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: .85rem; display: flex; align-items: center; gap: 7px;
}
.manifesto-label::before { content: '//'; opacity: .5; }
.manifesto p {
    font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.85;
    font-style: italic; position: relative; z-index: 1; margin: 0;
}
.manifesto cite {
    display: block; font-family: var(--mono); font-size: 0.65rem;
    color: #6fd1b3; margin-top: .85rem; font-style: normal; letter-spacing: .04em;
}

/* ══════════════════════════════════════════
   RIGHT SIDEBAR
══════════════════════════════════════════ */
.f-sidebar {}

/* Quick facts */
.quick-facts {
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-sm); margin-bottom: 1.25rem;
}
.qf-head {
    background: #f5f9f8; border-bottom: 1px solid var(--border);
    padding: .8rem 1.1rem;
    font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
    color: var(--text2); letter-spacing: .08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 7px;
}
.qf-head::before { content: '//'; color: var(--brand); }
.qf-rows { padding: .5rem 0; }
.qf-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid rgba(78,179,154,0.08);
    transition: background .12s;
}
.qf-row:last-child { border-bottom: none; }
.qf-row:hover { background: #f5f9f8; }
.qf-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: #e1f5ee; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 13px;
}
.qf-key { font-size: 0.72rem; font-weight: 700; color: var(--text0); margin-bottom: 1px; }
.qf-val { font-family: var(--mono); font-size: 0.68rem; color: var(--text2); }
.qf-val a { color: var(--brand-d); text-decoration: none; }
.qf-val a:hover { text-decoration: underline; }

/* Skills/certifications */
.skills-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-sm); margin-bottom: 1.25rem;
}
.skills-head {
    background: #f5f9f8; border-bottom: 1px solid var(--border);
    padding: .8rem 1.1rem;
    font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
    color: var(--text2); letter-spacing: .08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 7px;
}
.skills-head::before { content: '//'; color: var(--brand); }
.skills-body { padding: 1rem 1.1rem; }

.skill-bar-item { margin-bottom: .85rem; }
.skill-bar-item:last-child { margin-bottom: 0; }
.skill-bar-label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.78rem; font-weight: 600; color: var(--text0);
    margin-bottom: 5px;
}
.skill-bar-label span { font-family: var(--mono); font-size: 0.65rem; color: var(--text3); }
.skill-bar-track {
    height: 5px; background: #e4eeeb; border-radius: 99px; overflow: hidden;
}
.skill-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--brand-d), var(--brand));
    transition: width .9s cubic-bezier(.16,1,.3,1);
    width: 0%;
}

/* CTA connect card */
.connect-card {
    background: linear-gradient(135deg, #0e2d27, #1a4a3d);
    border: 1px solid rgba(78,179,154,0.2);
    border-radius: 12px; padding: 1.4rem 1.25rem;
    margin-bottom: 1.25rem;
}
.cc-label {
    font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
    color: #6fd1b3; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 1rem; display: flex; align-items: center; gap: 6px;
}
.cc-label::before { content: '//'; opacity: .5; }
.connect-links { display: flex; flex-direction: column; gap: 8px; }
.connect-link {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: .7rem .9rem;
    text-decoration: none; color: rgba(255,255,255,0.7);
    transition: background .15s, border-color .15s, color .15s;
    font-size: 0.82rem;
}
.connect-link:hover { background: rgba(78,179,154,0.15); border-color: rgba(78,179,154,0.35); color: #6fd1b3; }
.connect-link-icon {
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.connect-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.connect-link-meta { flex: 1; }
.connect-link-label { font-weight: 600; font-size: 0.8rem; line-height: 1; margin-bottom: 2px; }
.connect-link-sub   { font-family: var(--mono); font-size: 0.6rem; color: rgba(255,255,255,0.35); }
.connect-link-arrow { font-size: 0.8rem; opacity: .4; }

/* Numbers row in sidebar */
.num-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1.25rem; }
.num-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 10px; padding: .9rem .85rem;
    text-align: center; box-shadow: var(--shadow-sm);
}
.num-card .num { font-size: 1.6rem; font-weight: 700; color: var(--brand-deep); line-height: 1; }
.num-card .num-lbl { font-family: var(--mono); font-size: 0.6rem; color: var(--text2); margin-top: 3px; letter-spacing: .05em; text-transform: uppercase; }

/* ══════════════════════════════════════════
   CERTIFICATIONS & BADGES (static grid, real images)
══════════════════════════════════════════ */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.cert-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cert-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--tint-b);
}
.cert-badge {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 4px;
}
.cert-badge img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.cert-body { flex: 1; min-width: 0; }
.cert-name {
    font-size: 0.86rem; font-weight: 700; color: var(--text0);
    line-height: 1.35; margin-bottom: 3px;
}
.cert-issuer {
    font-family: var(--mono); font-size: 0.65rem; color: var(--text2);
    margin-bottom: 8px;
}
.cert-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cert-year {
    font-family: var(--mono); font-size: 0.6rem; color: var(--text3);
    background: #f5f9f8; border: 1px solid var(--border);
    border-radius: 20px; padding: 2px 9px;
}
.cert-verify {
    font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
    color: var(--brand-d); text-decoration: none;
    display: inline-flex; align-items: center; gap: 3px;
}
.cert-verify:hover { text-decoration: underline; }
.cert-verify svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.cert-expired {
    position: absolute; top: 10px; right: 10px;
    font-family: var(--mono); font-size: 0.55rem; font-weight: 700;
    color: #b45309; background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 20px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .04em;
}

/* ── Other credentials sub-section (text-link chips) ── */
.cert-sub {
    margin-top: 1.75rem;
    padding-top: 1.4rem;
    border-top: 1px dashed var(--border);
}
.cert-sub-head {
    font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
    color: var(--text2); letter-spacing: .08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 7px;
    margin-bottom: .4rem;
}
.cert-sub-head::before { content: '//'; color: var(--brand); }
.cert-sub-note {
    font-size: 0.78rem; color: var(--text2); line-height: 1.6;
    margin-bottom: .9rem;
}
.cert-other-list {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.cert-other-item {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f5f9f8; border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 12px 7px 7px;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.cert-other-item:hover { background: var(--tint); border-color: var(--tint-b); transform: translateY(-1px); }
.cert-other-icon {
    width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 0.6rem; font-weight: 700; color: #fff;
}
.cert-other-text { display: flex; flex-direction: column; line-height: 1.25; }
.cert-other-name { font-size: 0.76rem; font-weight: 700; color: var(--text0); }
.cert-other-provider { font-family: var(--mono); font-size: 0.6rem; color: var(--text3); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .f-hero-inner { grid-template-columns: 1fr; text-align: center; }
    .f-avatar-wrap { align-items: center; }
    .f-quote { margin: 0 auto 1.4rem; }
    .f-tags { justify-content: center; }
    .f-eyebrow { justify-content: center; }
    .f-main { grid-template-columns: 1fr; }
    .f-sidebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
    .f-sidebar > * { margin-bottom: 0 !important; }
}
@media (max-width: 600px) {
    .f-hero-inner { padding: 2.5rem 1.25rem 2rem; }
    .f-hero h1 { font-size: 1.65rem; }
    .f-main { padding: 1.5rem 1rem 3rem; }
    .expertise-grid { grid-template-columns: 1fr; }
    .cert-grid { grid-template-columns: 1fr; }
    .f-card-body { padding: 1.1rem 1.15rem; }
    .num-row { grid-template-columns: repeat(4,1fr); }
    .f-sidebar { grid-template-columns: 1fr; }
}