/* ================================================================================
   aboutdevedgar — design tokens + page styles
   Single canonical stylesheet. Mirrors harbet about_developer.php with
   uix-global-design tokens, motion tokens, reduced-motion fallbacks.
   ================================================================================ */

:root {
    /* Color — 60/30/10 */
    --abt-bg: #f8fafc;
    --abt-surface: #ffffff;
    --abt-ink: #0f172a;
    --abt-ink-muted: #475569;
    --abt-ink-soft: #64748b;
    --abt-line: #e5e7eb;
    --abt-line-soft: #f1f5f9;
    --abt-accent: #d97706;
    --abt-accent-soft: #fbbf24;
    --abt-accent-deep: #b45309;
    --abt-blue: #1d4ed8;
    --abt-blue-soft: #dbeafe;
    --abt-green: #166534;
    --abt-green-soft: #dcfce7;
    --abt-red: #b91c1c;
    --abt-red-soft: #fee2e2;

    /* Typography */
    --abt-font-display: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
    --abt-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --abt-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

    /* Radius + shadow */
    --abt-radius-sm: 8px;
    --abt-radius-md: 12px;
    --abt-radius-lg: 18px;
    --abt-radius-xl: 22px;
    --abt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --abt-shadow-md: 0 12px 28px rgba(15, 23, 42, .10);
    --abt-shadow-lg: 0 28px 60px rgba(15, 23, 42, .35);

    /* Motion tokens (per D E S I G N & W E B TEAM.txt) */
    --motion-fast: 120ms;
    --motion-ui: 180ms;
    --motion-medium: 240ms;
    --motion-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

html { scroll-behavior: smooth; }
body {
    background: var(--abt-bg);
    color: var(--abt-ink);
    font-family: var(--abt-font-body);
    -webkit-font-smoothing: antialiased;
}

/* ---- Top utility bar ----------------------------------------------------- */
.abt-topbar {
    background: #0b1220;
    color: #cbd5e1;
    font-size: .82rem;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.abt-topbar a { color: var(--abt-accent-soft); text-decoration: none; font-weight: 600; }
.abt-topbar a:hover { color: #fde68a; text-decoration: underline; }
.abt-referral-banner {
    background: linear-gradient(90deg, rgba(217,119,6,.12), rgba(251,191,36,.06));
    border-bottom: 1px solid rgba(217,119,6,.18);
    padding: 10px 16px;
    color: #78350f;
    font-size: .88rem;
    text-align: center;
}
.abt-referral-banner strong { color: #92400e; }

/* ---- Page shell ---------------------------------------------------------- */
.developer-about-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* ---- Cinematic hero ------------------------------------------------------ */
.developer-about-hero {
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(255, 153, 0, .2), transparent 38%),
        radial-gradient(circle at top right, rgba(59, 130, 246, .16), transparent 34%),
        linear-gradient(145deg, #0f172a 0%, #131f36 45%, #1f2937 100%);
    color: #f8fafc;
    border-radius: var(--abt-radius-xl);
}
.developer-about-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(30px);
    opacity: .55;
    pointer-events: none;
}
.developer-about-glow-one {
    inset: 40px auto auto 5%;
    width: 220px; height: 220px;
    background: rgba(249, 115, 22, .22);
}
.developer-about-glow-two {
    inset: auto 8% 30px auto;
    width: 240px; height: 240px;
    background: rgba(59, 130, 246, .18);
}

.developer-portrait-stack { position: relative; }
.developer-portrait-frame {
    border-radius: 28px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    box-shadow: var(--abt-shadow-lg);
}
.developer-portrait {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 22%;
    border-radius: 22px;
}
.developer-seal-chip {
    margin-top: -28px;
    margin-inline: auto;
    width: min(90%, 320px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, .86);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .35);
}
.developer-seal {
    width: 68px; height: 68px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    padding: 5px;
}
.developer-seal-chip strong,
.developer-title,
.developer-stat-card strong,
.developer-section-title,
.developer-project-card h3 {
    font-family: var(--abt-font-display);
}
.developer-seal-chip span,
.developer-subtitle,
.developer-lead {
    color: rgba(248, 250, 252, .82);
}

.developer-pill,
.developer-project-tag,
.developer-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
}
.developer-pill {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--abt-accent-soft);
}
.developer-pill-light {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--abt-accent-soft);
}
.developer-title {
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.developer-subtitle { font-size: 1.08rem; font-weight: 700; }
.developer-lead { font-size: 1rem; line-height: 1.8; max-width: 70ch; }

.developer-chip-row,
.developer-stat-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 18px;
}
.developer-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .82rem; font-weight: 600;
}
.developer-stat-card,
.developer-feature-card,
.developer-project-card,
.developer-note {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: var(--abt-radius-lg);
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.developer-stat-card { min-width: 170px; padding: 16px 18px; }
.developer-stat-card strong {
    display: block;
    font-size: 1.25rem; font-weight: 800;
    color: var(--abt-ink);
}
.developer-stat-card span {
    display: block;
    margin-top: 4px;
    font-size: .85rem;
    color: var(--abt-ink-soft);
}
.developer-section-kicker {
    background: rgba(15, 23, 42, .05);
    color: var(--abt-ink-muted);
    border: 1px solid rgba(148, 163, 184, .16);
}
.developer-section-title {
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--abt-ink);
}
.developer-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.developer-feature-card { padding: 18px; }
.developer-feature-card h3,
.developer-project-card h3 {
    font-size: 1.02rem; font-weight: 800;
    color: var(--abt-ink);
}
.developer-feature-card p,
.developer-project-card p,
.developer-bullet-list li,
.developer-note,
.developer-seal-chip div {
    color: var(--abt-ink-muted);
}
.developer-bullet-list { padding-left: 1.2rem; margin-bottom: 0; }
.developer-bullet-list li { margin-bottom: .7rem; font-weight: 600; }
.developer-note { margin-top: 18px; padding: 16px 18px; font-weight: 600; }
.developer-project-card {
    height: 100%;
    padding: 18px;
    box-shadow: 0 14px 30px rgba(15,23,42,.06);
}
.developer-project-tag {
    background: rgba(59, 130, 246, .08);
    color: var(--abt-blue);
    border: 1px solid rgba(59, 130, 246, .12);
    margin-bottom: 12px;
}
.developer-closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.developer-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 991px) {
    .developer-closing { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
    .developer-feature-grid { grid-template-columns: 1fr; }
    .developer-stat-card { min-width: calc(50% - 5px); }
}
@media (max-width: 575px) {
    .developer-stat-card,
    .developer-seal-chip { width: 100%; min-width: 100%; }
}

/* ---- Production systems portfolio table --------------------------------- */
.developer-shipped-section { border-radius: var(--abt-radius-lg); }
.developer-shipped-wrap {
    border: 1px solid var(--abt-line);
    border-radius: 14px;
    overflow: hidden;
}
.developer-shipped-table { width: 100%; margin-bottom: 0 !important; }
.developer-shipped-table thead th {
    background: var(--abt-bg);
    color: var(--abt-ink-soft);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    border-bottom: 1px solid var(--abt-line);
    padding: 12px 16px;
}
.developer-shipped-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--abt-line-soft);
    vertical-align: middle;
    transition: background var(--motion-fast) var(--ease-standard);
}
.developer-shipped-table tbody tr:hover td { background: #fffbeb; }
.developer-shipped-table tbody tr.is-this-system td {
    background: linear-gradient(90deg, rgba(251, 191, 36, .18), rgba(251, 191, 36, .05));
    border-left: 4px solid var(--abt-accent);
}
.developer-shipped-url {
    color: var(--abt-blue);
    text-decoration: none;
    font-family: var(--abt-font-mono);
    font-size: .86rem;
}
.developer-shipped-url:hover { color: #1e3a8a; text-decoration: underline; }
.developer-shipped-scope {
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 8px;
    border-radius: 6px;
}
.developer-shipped-scope.scope-gov  { background: var(--abt-blue-soft); color: #1e40af; }
.developer-shipped-scope.scope-biz  { background: var(--abt-green-soft); color: var(--abt-green); }

/* ---- Sales pitch hero ---------------------------------------------------- */
.developer-pitch-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(217,119,6,.28), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(220,38,38,.25), transparent 45%),
        linear-gradient(135deg, #0b1220 0%, #161b2e 50%, #0f172a 100%);
    color: #f8fafc;
    border-radius: var(--abt-radius-xl);
}
.developer-pitch-headline {
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}
.developer-pitch-lead {
    font-size: 1.05rem; line-height: 1.7;
    color: rgba(248,250,252,.85);
    max-width: 60ch;
}
.developer-pitch-bullets {
    list-style: none; padding: 0; margin: 18px 0;
    display: grid; gap: 8px;
}
.developer-pitch-bullets li {
    position: relative;
    padding-left: 28px;
    color: rgba(248,250,252,.92);
    font-size: .96rem; line-height: 1.5;
}
.developer-pitch-bullets li::before {
    content: '';
    position: absolute; left: 0; top: 7px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #b91c1c);
    box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}
.developer-pitch-bullets li strong { color: var(--abt-accent-soft); }
.developer-pitch-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.developer-pitch-cta {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: 0;
    box-shadow: 0 12px 28px rgba(217,119,6,.35);
    font-weight: 700;
    color: #1f1300;
    transition: transform var(--motion-ui) var(--ease-emphasized),
                box-shadow var(--motion-ui) var(--ease-emphasized);
}
.developer-pitch-cta:hover {
    background: linear-gradient(135deg, #fbbf24, #ea580c);
    color: #1f1300;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(217,119,6,.45);
}
.developer-pitch-cta:active { transform: translateY(0); }
.developer-pitch-fineprint {
    display: block; margin-top: 14px;
    color: rgba(248,250,252,.55);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.developer-pitch-proof {
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--abt-radius-lg);
    padding: 18px;
    backdrop-filter: blur(12px);
    display: flex; flex-direction: column; gap: 14px;
}
.developer-pitch-proof-row { display: flex; gap: 10px; flex-wrap: wrap; }
.developer-pitch-stat {
    flex: 1 1 130px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--abt-radius-md);
    padding: 12px 14px;
}
.developer-pitch-stat strong {
    display: block;
    font-size: 1.4rem; font-weight: 800;
    color: var(--abt-accent-soft);
    line-height: 1;
    margin-bottom: 4px;
}
.developer-pitch-stat span {
    font-size: .8rem;
    color: rgba(248,250,252,.78);
    line-height: 1.3;
}
.developer-pitch-quote {
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(220,38,38,.10));
    border-left: 3px solid var(--abt-accent-soft);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .92rem; line-height: 1.5;
    color: #fef9c3;
    font-style: italic;
}

/* ---- Portfolio gallery (auto-discovered) -------------------------------- */
.developer-portfolio-section { border-radius: var(--abt-radius-lg); }
.developer-portfolio-group {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    color: var(--abt-ink-muted);
    font-weight: 700;
    margin: 14px 0 10px;
}
.developer-portfolio-group .badge {
    margin-left: 6px;
    font-weight: 600;
    background: #e2e8f0 !important;
    color: #1e293b !important;
}
.developer-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.developer-portfolio-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--abt-surface);
    border: 1px solid var(--abt-line);
    border-left: 4px solid #ef4444;
    border-radius: var(--abt-radius-md);
    text-decoration: none;
    color: var(--abt-ink);
    transition:
        transform var(--motion-ui) var(--ease-emphasized),
        box-shadow var(--motion-ui) var(--ease-emphasized),
        border-color var(--motion-ui) var(--ease-standard);
    box-shadow: var(--abt-shadow-sm);
}
.developer-portfolio-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--abt-shadow-md);
    border-left-color: var(--abt-red);
    color: var(--abt-ink);
}
.developer-portfolio-card-training      { border-left-color: var(--abt-accent); }
.developer-portfolio-card-training:hover{ border-left-color: var(--abt-accent-deep); }
.developer-portfolio-card-project       { border-left-color: var(--abt-blue); }
.developer-portfolio-card-project:hover { border-left-color: #1d4ed8; }
.developer-portfolio-card-perspective   { border-left-color: var(--abt-green); }
.developer-portfolio-card-perspective:hover { border-left-color: #14532d; }

.developer-portfolio-card-project .developer-portfolio-icon {
    background: var(--abt-blue-soft); color: var(--abt-blue);
}
.developer-portfolio-card-perspective .developer-portfolio-icon {
    background: var(--abt-green-soft); color: var(--abt-green);
}
.developer-portfolio-card-project .developer-portfolio-action  { color: var(--abt-blue); }
.developer-portfolio-card-perspective .developer-portfolio-action { color: var(--abt-green); }

.developer-portfolio-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--abt-red-soft);
    color: var(--abt-red);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.developer-portfolio-card-training .developer-portfolio-icon {
    background: #fef3c7;
    color: var(--abt-accent-deep);
}
.developer-portfolio-meta {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.developer-portfolio-meta strong {
    font-size: .92rem;
    color: var(--abt-ink);
    font-weight: 700;
}
.developer-portfolio-filename {
    font-size: .74rem;
    color: var(--abt-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.developer-portfolio-size {
    font-size: .7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.developer-portfolio-action {
    font-size: .78rem;
    font-weight: 700;
    color: var(--abt-red);
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.developer-portfolio-card-training .developer-portfolio-action { color: var(--abt-accent-deep); }

/* SP building hero */
.developer-sp-hero {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 320px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 32px rgba(15,23,42,.18);
    margin-bottom: 16px;
    text-decoration: none;
    color: #fff;
    transition:
        transform var(--motion-ui) var(--ease-emphasized),
        box-shadow var(--motion-ui) var(--ease-emphasized);
}
.developer-sp-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(15,23,42,.28);
    color: #fff;
}
.developer-sp-hero-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    padding: 22px;
    background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,.85) 100%);
}
.developer-sp-hero-overlay h5 {
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.developer-sp-hero-overlay small {
    color: rgba(255,255,255,.78);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
}
.developer-sp-hero-overlay .developer-portfolio-action { color: var(--abt-accent-soft); }

/* ---- Section reveal animation (IntersectionObserver triggers `.is-in`) -- */
.abt-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--motion-medium) var(--ease-standard),
        transform var(--motion-medium) var(--ease-standard);
}
.abt-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Drop-in snippet copy box ------------------------------------------- */
.abt-snippet-box {
    background: #0b1220;
    color: #cbd5e1;
    border-radius: var(--abt-radius-md);
    padding: 14px 16px;
    font-family: var(--abt-font-mono);
    font-size: .82rem;
    line-height: 1.5;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.08);
}
.abt-snippet-box code { color: #fde68a; }
.abt-snippet-copy {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #e2e8f0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard);
}
.abt-snippet-copy:hover { background: rgba(255,255,255,.12); }
.abt-snippet-copy.copied { background: var(--abt-accent); color: #1f1300; border-color: var(--abt-accent); }

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .developer-pitch-cta:hover,
    .developer-portfolio-card:hover,
    .developer-sp-hero:hover,
    .developer-portfolio-card,
    .developer-pitch-cta,
    .developer-sp-hero {
        transform: none !important;
        transition: none !important;
    }
    .abt-reveal,
    .abt-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
    .abt-topbar, .abt-referral-banner, .developer-actions,
    .developer-pitch-cta-row, .abt-snippet-copy { display: none !important; }
    .developer-about-shell { max-width: 100% !important; padding: 0 !important; }
    .developer-pitch-card, .developer-about-hero {
        background: #fff !important; color: #000 !important;
        border: 1px solid #ccc;
    }
    .developer-title, .developer-section-title, .developer-pitch-headline { color: #000 !important; }
}

/* =================================================================================
   /egrd ENHANCEMENT LAYER  —  award-show polish on top of the proven harbet base
   ================================================================================= */

/* ---- Variable font (Inter) for tighter typographic rhythm ---------------- */
@font-face {
    font-family: "Inter Var";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/files/inter-latin-variable-wghtOnly-normal.woff2") format("woff2-variations");
}
:root {
    --abt-font-display: "Inter Var", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
    --abt-font-body: "Inter Var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { font-feature-settings: "cv11", "ss01", "ss03"; letter-spacing: -0.005em; }
.developer-title, .developer-pitch-headline, .developer-section-title { letter-spacing: -0.025em; text-wrap: balance; }
.developer-lead, .developer-pitch-lead, .text-muted { text-wrap: pretty; }

/* ---- Skip-to-content (a11y) --------------------------------------------- */
.abt-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--abt-accent);
    color: #1f1300;
    padding: 10px 16px;
    font-weight: 700;
    z-index: 9999;
    border-radius: 0 0 8px 0;
}
.abt-skip:focus { left: 0; outline: 3px solid #fff; }

/* ---- Page scroll progress bar ------------------------------------------- */
.abt-scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--abt-accent), var(--abt-accent-soft));
    z-index: 9998;
    box-shadow: 0 0 12px rgba(251, 191, 36, .55);
    transition: width 60ms linear;
}

/* ---- Sticky scroll-spy nav ---------------------------------------------- */
.abt-scrollspy {
    position: sticky; top: 0;
    z-index: 100;
    background: rgba(11, 18, 32, .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background var(--motion-ui) var(--ease-standard);
}
.abt-scrollspy-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
.abt-scrollspy-inner::-webkit-scrollbar { display: none; }
.abt-scrollspy-brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: #f8fafc;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.abt-scrollspy-brand img {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
}
.abt-scrollspy-brand span small {
    display: block;
    font-weight: 500;
    font-size: .68rem;
    color: rgba(248,250,252,.6);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: -2px;
}
.abt-scrollspy-list {
    display: flex; gap: 4px;
    list-style: none; padding: 0; margin: 0;
    flex-grow: 1;
    justify-content: center;
}
.abt-scrollspy-list a {
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(248,250,252,.7);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
    white-space: nowrap;
}
.abt-scrollspy-list a:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}
.abt-scrollspy-list a.is-active {
    color: var(--abt-accent-soft);
    background: rgba(251, 191, 36, .12);
}
.abt-scrollspy-cta {
    flex-shrink: 0;
    background: var(--abt-accent);
    color: #1f1300 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: .82rem;
    text-decoration: none;
    transition: transform var(--motion-ui) var(--ease-emphasized),
                box-shadow var(--motion-ui) var(--ease-emphasized);
}
.abt-scrollspy-cta:hover {
    background: var(--abt-accent-soft) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(251, 191, 36, .4);
}
@media (max-width: 991px) {
    .abt-scrollspy-list { display: none; }
}

/* ---- Section anchor offset for sticky nav ------------------------------- */
section[id] { scroll-margin-top: 80px; }

/* ---- Cinematic noise grain overlay (purposeful texture, not slop) ------- */
.developer-pitch-card,
.developer-about-hero {
    isolation: isolate;
    overflow: hidden;
}
.developer-pitch-card::after,
.developer-about-hero::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.06;
    mix-blend-mode: overlay;
    z-index: 1;
}
.developer-pitch-card > .card-body,
.developer-about-hero > .card-body { position: relative; z-index: 2; }

/* ---- Mouse-follow gradient glow on hero --------------------------------- */
.developer-pitch-card,
.developer-about-hero {
    --mx: 50%;
    --my: 50%;
}
.developer-pitch-card::before,
.developer-about-hero::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 380px at var(--mx) var(--my),
                rgba(251, 191, 36, .18), transparent 60%);
    transition: opacity var(--motion-medium) var(--ease-standard);
    opacity: 0;
    z-index: 1;
}
.developer-pitch-card.is-hover::before,
.developer-about-hero.is-hover::before { opacity: 1; }

/* ---- 3D tilt on cards (subtle, mouse-driven) ---------------------------- */
.abt-tilt {
    transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0);
    transition: transform var(--motion-medium) var(--ease-emphasized);
    transform-style: preserve-3d;
    will-change: transform;
}
.abt-tilt.is-tilting {
    transition: none;
}

/* ---- Brand pulse on the SP seal (signature touch) ----------------------- */
@keyframes abt-seal-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.4); }
    50%      { box-shadow: 0 0 0 10px rgba(251,191,36,0); }
}
.developer-seal {
    animation: abt-seal-pulse 3.2s var(--ease-standard) infinite;
}

/* ---- Animated count-up stat ---------------------------------------------- */
.abt-count {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1.6ch;
    transition: color var(--motion-medium) var(--ease-standard);
}
.abt-count.is-running { color: var(--abt-accent-soft); }

/* ---- PROCESS section (5-step flow) -------------------------------------- */
.abt-process-section { border-radius: var(--abt-radius-lg); }
.abt-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    position: relative;
    counter-reset: abt-step;
}
.abt-process-grid::before {
    content: "";
    position: absolute;
    top: 28px; left: 4%; right: 4%; height: 2px;
    background: repeating-linear-gradient(90deg,
        rgba(217, 119, 6, .35) 0 6px, transparent 6px 12px);
    z-index: 0;
}
.abt-process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 14px 12px;
    background: var(--abt-surface);
    border: 1px solid var(--abt-line);
    border-radius: var(--abt-radius-md);
    transition: transform var(--motion-ui) var(--ease-emphasized),
                box-shadow var(--motion-ui) var(--ease-emphasized);
}
.abt-process-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--abt-shadow-md);
    border-color: var(--abt-accent-soft);
}
.abt-process-num {
    counter-increment: abt-step;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #b91c1c);
    color: #1f1300;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--abt-font-display);
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 10px;
    box-shadow: 0 6px 16px rgba(217, 119, 6, .25);
    border: 4px solid var(--abt-surface);
}
.abt-process-num::before { content: counter(abt-step); }
.abt-process-step h4 {
    font-family: var(--abt-font-display);
    font-size: .92rem;
    font-weight: 800;
    color: var(--abt-ink);
    margin-bottom: 4px;
}
.abt-process-step p {
    font-size: .78rem;
    color: var(--abt-ink-muted);
    line-height: 1.45;
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .abt-process-grid { grid-template-columns: repeat(2, 1fr); }
    .abt-process-grid::before { display: none; }
}
@media (max-width: 575px) {
    .abt-process-grid { grid-template-columns: 1fr; }
}

/* ---- TECH STACK badges --------------------------------------------------- */
.abt-stack-section { border-radius: var(--abt-radius-lg); }
.abt-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.abt-stack-pill {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--abt-line);
    border-radius: var(--abt-radius-md);
    transition: transform var(--motion-ui) var(--ease-emphasized),
                border-color var(--motion-ui) var(--ease-standard),
                box-shadow var(--motion-ui) var(--ease-emphasized);
}
.abt-stack-pill:hover {
    transform: translateY(-2px);
    border-color: var(--abt-accent-soft);
    box-shadow: var(--abt-shadow-md);
}
.abt-stack-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(217,119,6,.12), rgba(251,191,36,.06));
    color: var(--abt-accent-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    border: 1px solid rgba(217,119,6,.18);
}
.abt-stack-meta strong {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    color: var(--abt-ink);
    line-height: 1.2;
}
.abt-stack-meta span {
    display: block;
    font-size: .72rem;
    color: var(--abt-ink-soft);
    margin-top: 2px;
}

/* ---- Filter chips on portfolio gallery ---------------------------------- */
.abt-filter-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 4px 0 18px;
}
.abt-filter {
    background: var(--abt-surface);
    border: 1px solid var(--abt-line);
    color: var(--abt-ink-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}
.abt-filter:hover {
    background: #fffbeb;
    color: var(--abt-accent-deep);
    border-color: var(--abt-accent-soft);
}
.abt-filter.is-active {
    background: var(--abt-ink);
    color: var(--abt-accent-soft);
    border-color: var(--abt-ink);
}
.abt-filter .badge {
    margin-left: 6px;
    background: rgba(255,255,255,.08);
    color: inherit;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .65rem;
}
.abt-filter:not(.is-active) .badge {
    background: var(--abt-line-soft);
    color: var(--abt-ink-soft);
}
.abt-portfolio-group-wrap[data-hidden="true"] { display: none; }

/* ---- Tighter universal focus rings (a11y) -------------------------------- */
:focus-visible {
    outline: 3px solid var(--abt-accent-soft);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible,
.developer-pitch-cta:focus-visible,
.abt-filter:focus-visible {
    outline-offset: 3px;
}

/* ---- Visually-hidden helper --------------------------------------------- */
.abt-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
    border: 0;
}

/* ---- Reduced motion for the new layer ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .developer-seal { animation: none; }
    .abt-scroll-progress { transition: none; }
    .developer-pitch-card::before,
    .developer-about-hero::before { display: none; }
    .abt-tilt { transform: none !important; }
    .abt-process-step:hover,
    .abt-stack-pill:hover { transform: none; }
    .abt-count.is-running { color: inherit; }
}