/* ══════════════════════════════════════
   COMMON STYLES — tusharmodi.in redesign
   ══════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
    --bg: #f4f1ec;
    --ink: #1a1a18;
    --card: #ffffff;
    --accent: #d4410b;
    --accent2: #2b5bff;
    --muted: #8a8880;
    --border: #d8d4cc;
    --green: #1a7a4a;
    --amber: #b45309;
    --nav-bg: rgba(244, 241, 236, 0.93);
    --shadow: rgba(26, 26, 24, 0.08);
    --dot: #c8c3ba;
    --code-bg: #1e1e1c;
    --code-border: #2a2a28;
}
[data-theme="dark"] {
    --bg: #111110;
    --ink: #f0ede6;
    --card: #1c1c1a;
    --accent: #ff5722;
    --accent2: #4f7fff;
    --muted: #6b6866;
    --border: #2a2a28;
    --green: #22c55e;
    --amber: #f59e0b;
    --nav-bg: rgba(17, 17, 16, 0.93);
    --shadow: rgba(0, 0, 0, 0.35);
    --dot: #2a2a28;
    --code-bg: #161614;
    --code-border: #2a2a28;
}
/* also support explicit light attribute */
[data-theme="light"] {
    --bg: #f4f1ec;
    --ink: #1a1a18;
    --card: #ffffff;
    --accent: #d4410b;
    --accent2: #2b5bff;
    --muted: #8a8880;
    --border: #d8d4cc;
    --green: #1a7a4a;
    --amber: #b45309;
    --nav-bg: rgba(244, 241, 236, 0.93);
    --shadow: rgba(26, 26, 24, 0.08);
    --dot: #c8c3ba;
    --code-bg: #1e1e1c;
    --code-border: #2a2a28;
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) {
    *,
    *::before,
    *::after {
        cursor: none !important;
    }
    input,
    textarea,
    [contenteditable] {
        cursor: text !important;
    }
    select {
        cursor: default !important;
    }
    #cur-dot,
    #cur-ring {
        display: block;
    }
}
@media not all and (hover: hover) and (pointer: fine) {
    #cur-dot,
    #cur-ring {
        display: none !important;
    }
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Outfit", sans-serif;
    overflow-x: hidden;
    max-width: 100%;
    transition:
        background 0.35s,
        color 0.35s;
}
/* dot-grid background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

/* ── CURSOR ── */
#cur-dot,
#cur-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}
#cur-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    mix-blend-mode: exclusion;
    z-index: 9999;
    transition: width 0.15s, height 0.15s, opacity 0.2s;
}
#cur-ring {
    width: 32px;
    height: 32px;
    border: 1.5px solid #fff;
    mix-blend-mode: exclusion;
    z-index: 9998;
    transition: width 0.2s, height 0.2s, opacity 0.2s, border-width 0.15s;
}
#cur-dot.hover  { width: 10px; height: 10px; }
#cur-dot.press  { width: 4px;  height: 4px;  opacity: 0.8; }
#cur-dot.text   { opacity: 0; }
#cur-ring.hover { width: 48px; height: 48px; }
#cur-ring.press { width: 20px; height: 20px; border-width: 2.5px; }
#cur-ring.text  { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    #cur-dot,
    #cur-ring {
        transition: none !important;
    }
}

/* ── PROGRESS BAR ── */
#bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    z-index: 9999;
    width: 0;
    pointer-events: none;
}

/* ── NAV ── */
.page-main > nav {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    height: 60px;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1.5px solid var(--border);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    transition:
        background 0.3s,
        border-color 0.3s;
}
.nav-left {
    display: flex;
    align-items: center;
    padding-right: 20px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    transition: border-color 0.3s;
}
.nav-mark {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    letter-spacing: -0.5px;
    text-decoration: none;
    color: var(--ink);
    line-height: 1;
    transition: color 0.3s;
}
.nav-mark em {
    font-style: italic;
    color: var(--accent);
}
/* ── TOPBAR CLOCK ── */
.nav-clock {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.nc-datetime {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s;
}
.nc-sep {
    color: var(--accent);
    opacity: 0.7;
}
.nc-time {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--ink);
    font-weight: 500;
    transition: color 0.3s;
}
.nav-logo {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.5px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}
.nav-logo em {
    font-style: italic;
    color: var(--accent);
}
.ndot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    animation: blink 1.8s infinite;
}
.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}
.nav-link {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    padding: 6px 12px;
    border-radius: 3px;
    transition: all 0.15s;
}
.nav-link:hover,
.nav-link.active {
    background: var(--ink);
    color: var(--bg);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--border);
    flex-shrink: 0;
    transition: border-color 0.3s;
}
#tBtn {
    width: 42px;
    height: 24px;
    background: var(--border);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}
#tBtn::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    transition:
        transform 0.3s,
        background 0.3s;
}
[data-theme="dark"] #tBtn {
    background: var(--accent);
}
[data-theme="dark"] #tBtn::after {
    transform: translateX(18px);
    background: #fff;
}
.nav-cta {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 7px 16px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s;
}
.nav-cta:hover {
    background: #b53508;
}

/* ── ANIMATIONS ── */
@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.15;
    }
}
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.75);
    }
}
@keyframes roll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes rcblink {
    0%,
    100% {
        border-color: var(--accent);
    }
    50% {
        border-color: transparent;
    }
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── FOOTER (dark-band) ── */
footer {
    position: relative;
    z-index: 1;
    background: #1c1c1a;
    color: #f0ede6;
    padding: 18px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.35s;
}
.ft-logo {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    text-decoration: none;
    color: #f0ede6;
}
.ft-logo em {
    font-style: italic;
    color: var(--accent);
}
.ft-mid {
    display: flex;
    gap: 14px;
}
.ft-link {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    transition: color 0.15s;
}
.ft-link:hover,
.ft-link.cur {
    color: #f0ede6;
}
.ft-back {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}
.ft-back:hover {
    color: #f0ede6;
}
.ft-back svg {
    width: 12px;
    height: 12px;
}

/* ── FOOTER (page-footer style — about.html) ── */
.page-footer {
    position: relative;
    z-index: 1;
    background: var(--ink);
    color: var(--bg);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s;
}
.pf-logo {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    text-decoration: none;
    color: var(--bg);
}
.pf-logo em {
    font-style: italic;
    color: var(--accent);
}
.pf-copy {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
}
.pf-back {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.pf-back:hover {
    color: var(--bg);
}
.pf-back svg {
    width: 13px;
    height: 13px;
}

/* ── UTILITIES ── */
/* fade-up (about.html variant) */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
/* fade-up (.fu variant — products/blogs/etc.) */
.fu {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}
.fu.in {
    opacity: 1;
    transform: translateY(0);
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 36px;
}
.section {
    border-bottom: 1.5px solid var(--border);
}
.section:last-child {
    border-bottom: none;
}
.sec-pad {
    padding: 64px 0;
}
.sec-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}
.sec-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.sec-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3.5vw, 44px);
    letter-spacing: -0.8px;
    line-height: 0.95;
}
.sec-title em {
    font-style: italic;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    nav {
        padding: 0 20px;
    }
    .nav-center {
        display: none;
    }
    footer,
    .page-footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ══ INDEX PAGE STYLES ══ */
:root {
    --nav-h: 64px;
}

/* FLOATING BADGE */
#fbadge {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: fadeB 0.7s 1.3s forwards;
}
@keyframes fadeB {
    to {
        opacity: 1;
    }
}
#fbadge .fb-line {
    width: 1px;
    height: 50px;
    background: var(--green);
    opacity: 0.4;
}
#fbadge .fb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.8s infinite;
}
#fbadge .fb-txt {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    writing-mode: vertical-rl;
    margin: 4px 0;
}
main {
    padding-top: var(--nav-h);
}
.section {
    position: relative;
    z-index: 1;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* HERO */
#home {
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid var(--ink);
    background: var(--card);
    overflow: hidden;
    position: relative;
    transition:
        background 0.3s,
        border-color 0.3s;
}

/* canvas particle bg */
#heroBg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.hero-inner {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 40px;
    position: relative;
    z-index: 2;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bg);
    padding: 5px 12px;
    border-radius: 2px;
    margin-bottom: 24px;
    transition:
        background 0.3s,
        color 0.3s;
}
.htdot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: blink 1.8s infinite;
}
h1 {
    font-family: "DM Serif Display", serif;
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}
h1 em {
    font-style: italic;
    color: var(--accent);
}
.tw-wrap {
    font-family: "DM Mono", monospace;
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 14px;
    min-height: 22px;
    transition: color 0.3s;
}
.tw-prefix {
    color: var(--accent);
    margin-right: 6px;
}
#twt {
    border-right: 2px solid var(--accent);
    padding-right: 3px;
    animation: cblink 0.7s infinite;
}
@keyframes cblink {
    0%,
    100% {
        border-color: var(--accent);
    }
    50% {
        border-color: transparent;
    }
}
.hero-bio {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 460px;
    margin-bottom: 32px;
    transition: color 0.3s;
}

/* BUTTONS */
.hero-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-p {
    background: var(--ink);
    color: var(--bg);
    padding: 13px 24px;
    border-radius: 3px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s;
    border: 2px solid var(--ink);
}
.btn-p:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.btn-s {
    background: transparent;
    color: var(--ink);
    padding: 13px 24px;
    border-radius: 3px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--ink);
    transition: all 0.18s;
}
.btn-s:hover {
    background: var(--ink);
    color: var(--bg);
}
.btn-s:hover svg {
    stroke: var(--bg);
}
/* CV DOWNLOAD */
.btn-cv {
    background: transparent;
    color: var(--accent);
    padding: 13px 24px;
    border-radius: 3px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--accent);
    transition: all 0.18s;
    position: relative;
    overflow: hidden;
}
.btn-cv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
    z-index: 0;
}
.btn-cv:hover::before {
    transform: scaleX(1);
}
.btn-cv:hover {
    color: #fff;
}
.btn-cv:hover svg {
    stroke: #fff;
}
.btn-cv span,
.btn-cv svg {
    position: relative;
    z-index: 1;
}

/* HERO RIGHT */
.hero-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* AVATAR CARD */
.avatar-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.2s,
        background 0.3s;
}
.avatar-card:hover {
    border-color: var(--ink);
}
/* single accent top line - no rainbow */
.avatar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}
.av-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
    position: relative;
}
/* mono spinning border - only accent */
.av-ring::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: var(--border);
    animation: spin 3s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.av-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    color: var(--bg);
}
.av-name {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    line-height: 1.1;
    margin-bottom: 4px;
}
.av-name em {
    font-style: italic;
    color: var(--accent);
}
.av-role {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.av-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
/* all badges same mono style - no color */
.av-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid var(--border);
    color: var(--muted);
}
.av-badge.green {
    border-color: var(--ink);
    color: var(--ink);
}

/* STAT CARDS */
.stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.scard {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 16px 18px;
    transition:
        all 0.18s,
        background 0.3s;
    position: relative;
    overflow: hidden;
}
.scard::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s;
}
.scard:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}
.scard:hover::after {
    transform: scaleX(1);
}
.scard .num {
    font-family: "DM Serif Display", serif;
    font-size: 34px;
    line-height: 1;
}
.scard .num sup {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--accent);
}
.scard .lbl {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

/* TECH CHIPS - mono only */
.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.tchip {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 11px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    background: transparent;
    transition: all 0.18s;
    animation: chipFade 0.5s ease both;
}
.tchip:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-2px);
}
@keyframes chipFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SCROLL INDICATOR */
.scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2;
}
.scroll-hint span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}
.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--muted), transparent);
    animation: scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

.avail-c {
    background: var(--ink);
    color: var(--bg);
    border-radius: 6px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.3s;
}
.adot {
    width: 10px;
    height: 10px;
    background: #4ade80;
    border-radius: 50%;
    flex-shrink: 0;
    animation: blink 1.8s infinite;
}
.avail-c .t1 {
    font-size: 13px;
    font-weight: 600;
    color: var(--bg);
}
.avail-c .t2 {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(128, 128, 128, 0.75);
    margin-top: 2px;
    text-transform: uppercase;
}
[data-theme="dark"] .avail-c .t2 {
    color: rgba(26, 26, 24, 0.5);
}
.avail-chat-btn {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 6px 12px;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
[data-theme="dark"] .avail-chat-btn {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a18;
}

/* SEC HEADERS */
.shr {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid var(--border);
    transition: border-color 0.3s;
}
.snum {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.stit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(30px, 3.2vw, 44px);
    letter-spacing: -0.8px;
    line-height: 1;
}
.stit em {
    font-style: italic;
    color: var(--accent);
}
.slink {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.slink:hover {
    color: var(--ink);
}
.slink svg {
    width: 14px;
    height: 14px;
}

/* ABOUT */
#about {
    padding: 55px 0;
    border-bottom: 2px solid var(--ink);
    background: var(--bg);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}
.alabel {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}
.ah2 {
    font-family: "DM Serif Display", serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}
.ah2 em {
    font-style: italic;
}
.ap {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 14px;
    transition: color 0.3s;
}
.why-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.3s;
}
.why-item:last-child {
    border-bottom: none;
}
.wico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.wico svg {
    width: 16px;
    height: 16px;
}
.why-item:hover .wico {
    background: var(--ink);
    border-color: var(--ink);
}
.why-item:hover .wico svg {
    stroke: var(--bg);
}
.wn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}
.wt {
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}
.wd {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.55;
}

/* SKILL BARS */
.stsec {
    margin-bottom: 28px;
}
.stcat {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.3s;
}
.skbw {
    margin-bottom: 10px;
}
.skbh {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.sknm {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--ink);
    transition: color 0.3s;
}
.skpct {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.skt {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    transition: background 0.3s;
}
.skf {
    height: 100%;
    background: var(--ink);
    border-radius: 2px;
    width: 0%;
    transition:
        width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background 0.3s;
}
.skf.a {
    background: var(--accent);
}
.skf.b {
    background: var(--accent2);
}

/* PROJECTS */
#projects {
    padding: 55px 0;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: var(--card);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.pgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.pcard {
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 22px;
    background: var(--bg);
    transition: all 0.2s;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.pcard::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s;
}
.pcard:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--shadow);
}
.pcard:hover::after {
    transform: scaleX(1);
}
.pnum {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}
.pname {
    font-size: 16px;
    font-weight: 700;
}
.pext {
    opacity: 0.3;
}
.pext svg {
    width: 15px;
    height: 15px;
}
.pcard:hover .pext {
    opacity: 1;
}
.pdesc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
    margin: 10px 0 14px;
}
.ptags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}
.ptag {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 2px;
    transition:
        background 0.3s,
        border-color 0.3s;
}
.pfoot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
}
.pstat {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pstat svg {
    width: 12px;
    height: 12px;
}
.pstatus {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
}
.pstatus.live {
    background: rgba(26, 122, 74, 0.1);
    border: 1px solid rgba(26, 122, 74, 0.3);
    color: var(--green);
}
.pstatus.wip {
    background: rgba(180, 83, 9, 0.1);
    border: 1px solid rgba(180, 83, 9, 0.3);
    color: var(--amber);
}

/* SERVICES */
#services {
    padding: 55px 0;
    border-bottom: 2px solid var(--ink);
    background: var(--bg);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.svgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.svcard {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 26px;
    transition: all 0.2s;
}
.svcard:hover {
    border-color: var(--accent);
    box-shadow:
        0 12px 32px var(--shadow),
        inset 3px 0 0 var(--accent);
    transform: translateY(-3px);
}
.svcard:hover .svico {
    background: var(--ink);
    border-color: var(--ink);
}
.svcard:hover .svico svg {
    stroke: var(--bg);
}
.svico {
    width: 44px;
    height: 44px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.15s;
}
.svico svg {
    width: 20px;
    height: 20px;
}
.svnm {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}
.svdesc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 14px;
}
.svtag {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 2px;
}
.sv-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    padding-bottom: 1px;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.sv-quote-btn:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* PROCESS */
.pstrip {
    background: var(--ink);
    color: var(--bg);
    padding: 52px 0;
    border-bottom: 2px solid var(--ink);
    transition: background 0.3s;
}
[data-theme="dark"] .pstrip {
    background: #1c1c1a;
    border-bottom-color: #2a2a28;
}
.proc-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}
.ptop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ptop .snum {
    color: rgba(255, 255, 255, 0.3);
}
.ptop .stit {
    color: #f0ede6;
}
.p-sub {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-align: right;
    line-height: 1.7;
}
/* ── PROCESS STEPS ── */
.psteps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}
.pstep-arr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    align-self: center;
}
.pstep-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.22s;
}
.pstep-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s;
}
.pstep-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}
.pstep-card:hover::after {
    transform: scaleX(1);
}
.psc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.psc-num {
    font-family: "DM Serif Display", serif;
    font-size: 36px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.07);
    letter-spacing: -1px;
}
.psc-phase {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 3px 8px;
    border: 1px solid rgba(212, 65, 11, 0.3);
    border-radius: 2px;
    background: rgba(212, 65, 11, 0.07);
}
[data-theme="dark"] .psc-phase {
    border-color: rgba(255, 87, 34, 0.35);
    background: rgba(255, 87, 34, 0.09);
}
.psc-ico {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.18s;
    flex-shrink: 0;
}
.pstep-card:hover .psc-ico {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.psc-title {
    font-size: 14px;
    font-weight: 700;
    color: #f0ede6;
    margin-bottom: 7px;
    letter-spacing: -0.2px;
}
.psc-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.65;
    flex: 1;
    margin-bottom: 14px;
}
.psc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}
.psc-chips span {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.28);
}

/* BLOGS */
#blogs {
    padding: 55px 0;
    border-bottom: 2px solid var(--ink);
    background: var(--card);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.bgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.bcard {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}
.bcard:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--shadow);
}
.bthumb {
    height: 180px;
    border-bottom: 1.5px solid var(--border);
    position: relative;
    overflow: hidden;
}
.bthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.bcard:hover .bthumb img {
    transform: scale(1.06);
}
.bthumb .boverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        transparent 60%
    );
    pointer-events: none;
}
.bthumb .btag {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 3px 10px;
    border-radius: 2px;
}
.bbody {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bmeta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}
.bdot {
    width: 3px;
    height: 3px;
    background: var(--border);
    border-radius: 50%;
}
.bcat {
    color: var(--accent);
}
.btit {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}
.bexc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 14px;
}
.bfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
}
.bread {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
}
.bread svg {
    width: 12px;
    height: 12px;
}
.bcard:hover .bread {
    color: var(--accent);
}

/* TESTI */
.tstrip {
    background: var(--ink);
    color: var(--bg);
    padding: 50px 0;
    border-bottom: 2px solid var(--ink);
    transition: background 0.3s;
}
.ti {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}
.ti .snum {
    color: rgba(255, 255, 255, 0.3);
}
.ti .stit {
    color: var(--bg);
}
.ti .shr {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.tgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tcard {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 22px;
    transition: border-color 0.15s;
}
.tcard:hover {
    border-color: rgba(255, 255, 255, 0.3);
}
.qico {
    margin-bottom: 12px;
    opacity: 0.3;
}
.qico svg {
    width: 22px;
    height: 22px;
    fill: var(--bg);
}
.ttxt {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-bottom: 16px;
}
.tauth {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: var(--bg);
    flex-shrink: 0;
}
.tnm {
    font-size: 13px;
    font-weight: 700;
}
.trl {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    margin-top: 1px;
}
.stars {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.stars svg {
    width: 12px;
    height: 12px;
    fill: #fbbf24;
}

/* CONTACT */
#contact {
    padding: 55px 0;
    border-bottom: 2px solid var(--ink);
    background: var(--bg);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.cinner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.clink {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.3s;
}
.clink:hover .clico svg {
    stroke: var(--accent);
}
.clico {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.3s,
        border-color 0.3s;
}
.clico svg {
    width: 16px;
    height: 16px;
    transition: stroke 0.15s;
}
.cll {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}
.clv {
    font-size: 14px;
    font-weight: 500;
    margin-top: 1px;
}
.carr {
    margin-left: auto;
    opacity: 0.3;
}
.carr svg {
    width: 16px;
    height: 16px;
}
.hform {
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 32px;
    min-width: 0;
    overflow: hidden;
    transition:
        background 0.3s,
        border-color 0.3s;
}
.ftit {
    font-family: "DM Serif Display", serif;
    font-size: 24px;
    margin-bottom: 6px;
}
.fsub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}
.frow {
    margin-bottom: 16px;
}
.flbl {
    display: block;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}
.finp,
.fsel {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    color: var(--ink);
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.15s,
        background 0.3s,
        color 0.3s;
    appearance: none;
}
.finp:focus,
.fsel:focus {
    border-color: var(--ink);
}
.fgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.fsub2 {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}
.fsub2:hover {
    background: #b53508;
}
.fsub2 svg {
    width: 16px;
    height: 16px;
}
.sucb {
    display: none;
    text-align: center;
    padding: 32px;
}
.sucb.show {
    display: block;
}
.stit2 {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    margin-top: 14px;
    margin-bottom: 6px;
}
.ssub {
    font-size: 13px;
    color: var(--muted);
}

/* FOOTER */
footer {
    background: #1c1c1a;
    color: #f0ede6;
    padding: 36px 0 20px;
    transition: background 0.3s;
}
.fin {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}
.ftop {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    margin-bottom: 0;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.flogo {
    font-family: "DM Serif Display", serif;
    font-size: 30px;
    color: var(--bg);
    margin-bottom: 8px;
}
.flogo em {
    font-style: italic;
    color: var(--accent);
}
.ftagl {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.65;
    margin-bottom: 18px;
}
.favail {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.favail .fdot {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: blink 1.8s infinite;
}
.fct {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 14px;
}
.fls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fl {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.15s;
}
.fl:hover {
    color: #f0ede6;
}
.ftag {
    font-family: "DM Mono", monospace;
    font-size: 11px !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.15s;
}
.ftag:hover {
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07);
}
.fbot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.25);
}
.fsoc {
    display: flex;
    gap: 8px;
}
.fsoc a {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fsoc a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.fsoc a svg {
    width: 15px;
    height: 15px;
    stroke: rgba(255, 255, 255, 0.5);
}
/* LEGAL STRIP */
.flegal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
}
.flegal-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.flegal-link {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    padding: 4px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.15s;
    white-space: nowrap;
}
.flegal-link:first-child {
    padding-left: 0;
}
.flegal-link:last-child {
    border-right: none;
}
.flegal-link:hover {
    color: rgba(255, 255, 255, 0.7);
}
.flegal-copy {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.18);
}
/* LEGAL MODAL */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.modal-overlay.open {
    display: flex;
}
.modal-box {
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 8px;
    max-width: 620px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1.5px solid var(--border);
}
.modal-title {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    letter-spacing: -0.4px;
}
.modal-close {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.modal-close:hover {
    background: var(--ink);
    border-color: var(--ink);
}
.modal-close:hover svg {
    stroke: var(--bg);
}
.modal-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink);
}
.modal-body {
    padding: 28px;
    overflow-y: auto;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.8;
}
.modal-body h3 {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    color: var(--ink);
    margin: 20px 0 8px;
}
.modal-body h3:first-child {
    margin-top: 0;
}
.modal-body p {
    margin-bottom: 12px;
}
.modal-body ul {
    padding-left: 20px;
    margin-bottom: 12px;
}
.modal-body ul li {
    margin-bottom: 6px;
}
.modal-last-updated {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* ANIM */
.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.fade-up.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Hero always visible */
#home * {
    opacity: 1;
    transform: none;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    nav {
        padding: 0 20px;
    }
    .nav-links,
    .nav-cta {
        display: none;
    }
    .nav-mb {
        display: flex;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        padding: 50px 20px 80px;
    }
    .hero-right {
        display: none;
    }
    .scroll-hint {
        display: none;
    }
    .about-grid,
    .cinner {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .cinner > * {
        min-width: 0;
    }
    .pgrid,
    .svgrid,
    .bgrid,
    .tgrid {
        grid-template-columns: 1fr 1fr;
    }
    .psteps {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .pstep-arr {
        display: none;
    }
    .ftop {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .container,
    .pi,
    .ti {
        padding: 0 20px;
    }
    .proc-inner {
        padding: 0 20px;
    }
    #fbadge {
        display: none;
    }
}
@media (max-width: 600px) {
    .pgrid,
    .svgrid,
    .bgrid,
    .tgrid {
        grid-template-columns: 1fr;
    }
    .psteps {
        grid-template-columns: 1fr;
    }
    .fgrid {
        grid-template-columns: 1fr;
    }
    .stat-cards {
        grid-template-columns: 1fr 1fr;
    }
    #home {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
    }
    #heroBg {
        opacity: 0.22;
    }
    .hero-inner {
        padding-top: 32px;
        padding-bottom: 40px;
    }
    .hero-tag {
        margin-bottom: 14px;
    }
    .hero-bio {
        margin-bottom: 20px;
    }
    .hero-btns {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-btns .btn-p,
    .hero-btns .btn-s,
    .hero-btns .btn-wa {
        justify-content: center;
        width: 100%;
    }
    .tech-chips {
        display: none;
    }
    .ftop {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ftop > div {
        padding: 20px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .ftop > div:last-child {
        border-bottom: none;
    }
    /* Branding block — center on mobile */
    .ftop > div:first-child {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ftop > div:first-child > div:first-child {
        justify-content: center !important;
    }
    .fsoc {
        justify-content: center;
    }
    .favail {
        justify-content: center;
    }
    /* Nav links — 2-col grid */
    .fls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
    }
    .fl {
        font-size: 14px;
        padding: 4px 0;
    }
    /* CTA card — full width */
    .ftop > div:nth-child(3) > div {
        width: 100%;
        box-sizing: border-box;
    }
    .ftop > div:nth-child(3) > div > a {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        display: flex !important;
    }
    /* Legal strip — stack vertically, center */
    .flegal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 16px 0;
    }
    .flegal-links {
        justify-content: center;
        gap: 0;
    }
    .flegal-link {
        font-size: 11px;
        padding: 4px 10px;
        letter-spacing: 0.6px;
    }
    .fin {
        padding: 0 20px;
    }
    .hform {
        padding: 20px;
    }
}
#aidog-wrap {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 8888;
    user-select: none;
}
#aidog-wrap * {
    pointer-events: all;
}
.dog-bubble {
    position: absolute;
    bottom: 76px;
    left: 0;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px 10px 10px 2px;
    padding: 9px 13px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--border);
    opacity: 0;
    transform: translateY(6px) scale(0.92);
    transition:
        opacity 0.25s,
        transform 0.25s;
    pointer-events: none;
    max-width: 190px;
    white-space: normal;
    line-height: 1.5;
    z-index: 2;
}
.dog-bubble.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.drag-hint {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
#aidog-wrap:hover .drag-hint {
    opacity: 1;
}
.dog-body {
    width: 64px;
    height: 64px;
    position: relative;
    cursor: grab;
    transition: transform 0.15s;
}
.dog-body:hover {
    transform: scale(1.08);
}
.dog-body.dragging {
    cursor: grabbing;
    transform: scale(1.15);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
}
.d-torso {
    position: absolute;
    bottom: 8px;
    left: 10px;
    width: 44px;
    height: 28px;
    background: var(--ink);
    border-radius: 12px;
    transition: background 0.3s;
}
.d-head {
    position: absolute;
    bottom: 28px;
    left: 16px;
    width: 34px;
    height: 30px;
    background: var(--ink);
    border-radius: 50% 50% 42% 42%;
    transition: background 0.3s;
}
.d-ear-l,
.d-ear-r {
    position: absolute;
    top: -8px;
    width: 11px;
    height: 16px;
    background: var(--ink);
    border-radius: 50% 50% 0 0;
    transition: background 0.3s;
}
.d-ear-l {
    left: 3px;
    transform: rotate(-12deg);
}
.d-ear-r {
    right: 3px;
    transform: rotate(12deg);
}
.d-eye-l,
.d-eye-r {
    position: absolute;
    top: 9px;
    width: 6px;
    height: 6px;
    background: var(--card);
    border-radius: 50%;
    transition: background 0.3s;
}
.d-eye-l {
    left: 6px;
}
.d-eye-r {
    right: 6px;
}
.d-eye-l::after,
.d-eye-r::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--ink);
    border-radius: 50%;
    top: 1.5px;
    left: 1.5px;
    transition: background 0.3s;
}
.d-nose {
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}
.d-mouth {
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    border: 2px solid var(--card);
    border-top: none;
    border-radius: 0 0 8px 8px;
    transition: border-color 0.3s;
}
.d-tail {
    position: absolute;
    bottom: 14px;
    right: 1px;
    width: 16px;
    height: 8px;
    background: var(--ink);
    border-radius: 0 50% 50% 0;
    transform-origin: left center;
    animation: wag 0.4s ease-in-out infinite alternate;
    transition: background 0.3s;
}
@keyframes wag {
    from {
        transform: rotate(-25deg);
    }
    to {
        transform: rotate(25deg);
    }
}
.d-leg {
    position: absolute;
    bottom: 2px;
    width: 9px;
    height: 13px;
    background: var(--ink);
    border-radius: 0 0 5px 5px;
    transition: background 0.3s;
}
.d-leg-fl {
    left: 14px;
}
.d-leg-fr {
    left: 24px;
}
.d-leg-bl {
    right: 14px;
}
.d-leg-br {
    right: 4px;
}
.d-leg-fl,
.d-leg-bl {
    animation: walkL 0.45s ease-in-out infinite alternate;
}
.d-leg-fr,
.d-leg-br {
    animation: walkL 0.45s ease-in-out infinite alternate-reverse;
}
@keyframes walkL {
    from {
        transform: rotate(-15deg);
        transform-origin: top center;
    }
    to {
        transform: rotate(15deg);
        transform-origin: top center;
    }
}
.dog-body.sit .d-leg-bl,
.dog-body.sit .d-leg-br {
    height: 8px;
    transform: rotate(80deg) !important;
    animation: none;
}
.dog-body.sit .d-leg-fl,
.dog-body.sit .d-leg-fr {
    animation: none;
    transform: none;
}
.dog-body.sit .d-tail {
    animation: wag 0.3s ease-in-out infinite alternate;
}
.dog-body.sleep .d-eye-l,
.dog-body.sleep .d-eye-r {
    height: 2px;
    border-radius: 2px;
    top: 11px;
}
.dog-body.sleep .d-eye-l::after,
.dog-body.sleep .d-eye-r::after {
    display: none;
}
.dog-body.sleep .d-tail,
.dog-body.sleep .d-leg-fl,
.dog-body.sleep .d-leg-fr,
.dog-body.sleep .d-leg-bl,
.dog-body.sleep .d-leg-br {
    animation: none;
    transform: none;
}
@keyframes jump {
    0%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-24px);
    }
    70% {
        transform: translateY(-10px);
    }
}
.dog-body.jump {
    animation: jump 0.5s ease;
}
.d-zzz {
    position: absolute;
    top: -14px;
    right: -6px;
    font-size: 12px;
    opacity: 0;
}
.dog-body.sleep .d-zzz {
    animation: zzzFloat 2s ease-in-out infinite;
}
@keyframes zzzFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(8px, -16px);
    }
}
.d-heart {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
}
.d-heart.pop {
    animation: heartPop 0.7s ease forwards;
}
@keyframes heartPop {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(0.4);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.4);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-22px) scale(1);
    }
}

/* ── AI CHATBOX ── */
#dogChat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 360px;
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 8px;
    z-index: 9000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    animation: chatSlide 0.25s ease;
}
#dogChat.open {
    display: flex;
}
@keyframes chatSlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-head {
    background: var(--ink);
    color: var(--bg);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.chat-dog-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.chat-head-info {
    flex: 1;
}
.chat-head-name {
    font-family: "DM Serif Display", serif;
    font-size: 14px;
}
.chat-head-sub {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}
.chat-close {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none !important;
    transition: background 0.15s;
    flex-shrink: 0;
}
.chat-close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.chat-close svg {
    stroke: rgba(255, 255, 255, 0.7);
}
.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px;
    min-height: 320px;
    scroll-behavior: smooth;
}
.chat-msgs::-webkit-scrollbar {
    width: 3px;
}
.chat-msgs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.cmsg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.cmsg.user {
    flex-direction: row-reverse;
}
.cmsg-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}
.cmsg.user .cmsg-av {
    background: var(--ink);
}
.cmsg-text {
    max-width: 75%;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--ink);
}
.cmsg.user .cmsg-text {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.cmsg-text.typing::after {
    content: "●●●";
    animation: dots 1s infinite;
    font-size: 12px;
    letter-spacing: 2px;
}
@keyframes dots {
    0%,
    100% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
}
.chat-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
}
.cqbtn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--muted);
    cursor: none !important;
    transition: all 0.15s;
    white-space: nowrap;
}
.cqbtn:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
#chatInput {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--ink);
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
#chatInput:focus {
    border-color: var(--ink);
}
#chatSend {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--ink);
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none !important;
    transition: background 0.15s;
}
#chatSend:hover {
    background: var(--accent);
}
#chatSend svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
}

/* ══ ABOUT PAGE STYLES ══ */
/* ── HERO ── */
.hero-fold {
    min-height: 0;
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 1;
}
/* LEFT panel */
.hf-left {
    background: var(--ink);
    color: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 44px 40px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
    border-right: 2px solid var(--ink);
}
.hf-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
    pointer-events: none;
}

/* decorative vertical text */
.hf-deco-num {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    pointer-events: none;
}

.hf-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.hf-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--accent);
}

.hf-h1 {
    font-family: "DM Serif Display", serif;
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--bg);
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}
.hf-h1 em {
    font-style: italic;
    color: var(--accent);
}

/* role typewriter line */
.hf-role-line {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    min-height: 20px;
}
.hf-role-cursor {
    border-right: 2px solid var(--accent);
    padding-right: 2px;
    animation: rcblink 0.7s infinite;
}
@keyframes rcblink {
    0%,
    100% {
        border-color: var(--accent);
    }
    50% {
        border-color: transparent;
    }
}

.hf-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    max-width: 380px;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.hf-links {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.hf-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.hf-btn svg {
    width: 14px;
    height: 14px;
}
.hf-btn.primary {
    background: var(--accent);
    color: #fff;
}
.hf-btn.primary:hover {
    background: #c0390a;
}
.hf-btn.ghost {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.hf-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* info pills at bottom */
.hf-info-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}
.hf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.4);
}
.hf-pill svg {
    width: 10px;
    height: 10px;
    opacity: 0.6;
}

/* RIGHT panel */
.hf-right {
    background: var(--card);
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    transition: background 0.3s;
}

/* avatar area — canvas behind */
.hf-av-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    min-height: 0;
}
#aboutCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.6;
}
.hf-av-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.hf-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Serif Display", serif;
    font-size: 38px;
    color: var(--bg);
    position: relative;
    box-shadow:
        0 0 0 5px var(--card),
        0 0 0 7px var(--border);
}
/* dual spinning rings */
.hf-ring1 {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: var(--accent);
    border-bottom-color: var(--accent);
    opacity: 0.7;
    animation: spin 4s linear infinite;
}
.hf-ring2 {
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-left-color: var(--border);
    border-right-color: var(--border);
    animation: spin 8s linear infinite reverse;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* status badge */
.hf-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}
.hf-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.8s infinite;
}

/* skill chips row */
.hf-skills-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 0 24px;
}
.hf-skc {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    transition: all 0.15s;
}
.hf-skc:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* stats row */
.hf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1.5px solid var(--border);
    flex-shrink: 0;
}
.hf-stat {
    padding: 18px 0;
    text-align: center;
    border-right: 1px solid var(--border);
}
.hf-stat:last-child {
    border-right: none;
}
.hf-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 28px;
    line-height: 1;
}
.hf-stat-n sup {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--accent);
}
.hf-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

/* ── MARQUEE STRIP ── */
.marquee-strip {
    background: var(--accent);
    color: #fff;
    padding: 10px 0;
    overflow: hidden;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    position: relative;
    z-index: 1;
}
.marquee-track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: marqueeRoll 18s linear infinite;
}
.marquee-track span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0 28px;
    opacity: 0.9;
}
.marquee-track span.sep {
    opacity: 0.4;
}
@keyframes marqueeRoll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ── STORY SECTION ── */
.story-section {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.story-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: start;
}
.story-left {
    position: sticky;
    top: 80px;
}
.story-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.story-heading {
    font-family: "DM Serif Display", serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.story-heading em {
    font-style: italic;
}
.story-subtext {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}
/* fact pills */
.story-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}
.sf {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ink);
    padding: 9px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: border-color 0.15s;
}
.sf:hover {
    border-color: var(--ink);
}
.sf:hover .sf-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.sf:hover .sf-ico svg {
    stroke: var(--bg);
}
.sf-ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.sf-ico svg {
    width: 14px;
    height: 14px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}

.story-right {
}
.story-p {
    font-size: 18px;
    color: var(--ink);
    line-height: 1.75;
    font-family: "DM Serif Display", serif;
    font-style: italic;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.2px;
}
.story-p:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}
.story-p strong {
    color: var(--accent);
    font-style: normal;
}

/* ── TIMELINE REDESIGNED ── */
.timeline-section {
    position: relative;
    z-index: 1;
    background: var(--ink);
    border-bottom: 2px solid var(--ink);
    transition: background 0.3s;
}
.timeline-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
}
.tl-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tl-h-left .sec-num {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
}
.tl-h-left .sec-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.6px;
    line-height: 1;
    color: var(--bg);
}
.tl-h-left .sec-tit em {
    font-style: italic;
    color: var(--accent);
}
.tl-filter {
    display: flex;
    gap: 6px;
}
.tl-filt {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
}
.tl-filt.active,
.tl-filt:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Card grid — 2 cols */
.tl-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.tl-item {
    position: relative;
}

.tl-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.tl-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s;
}
.tl-item:hover .tl-card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
}
.tl-item:hover .tl-card::after,
.tl-item.current .tl-card::after {
    background: var(--accent);
}

/* type icon */
.tl-type-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tl-type-icon svg {
    width: 15px;
    height: 15px;
    stroke: rgba(255, 255, 255, 0.5);
}
.tl-tag.work ~ .tl-type-icon {
    background: rgba(34, 197, 94, 0.1);
}
.tl-tag.work ~ .tl-type-icon svg {
    stroke: var(--green);
}

.tl-year {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tl-ydot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.tl-item.current .tl-ydot {
    animation: blink 1.5s infinite;
}

.tl-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bg);
    line-height: 1.2;
    margin-bottom: 3px;
    padding-right: 44px;
}
.tl-place {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
    font-family: "DM Mono", monospace;
    letter-spacing: 0.3px;
}
.tl-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.65;
    flex: 1;
    margin-bottom: 12px;
}
.tl-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 2px;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}
.tl-tag svg {
    width: 9px;
    height: 9px;
}
.tl-tag.work {
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--green);
}
.tl-tag.edu {
    border-color: rgba(79, 127, 255, 0.3);
    color: var(--accent2);
}
.tl-tag.cert {
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--amber);
}

/* ── SKILLS SECTION ── */
.skills-section {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.skills-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
}
.skills-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid var(--border);
}
.sk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.sk-cat-block {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.sk-cat-block:hover {
    border-color: var(--ink);
}
.sk-cat-head {
    background: var(--ink);
    color: var(--bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}
.sk-cat-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sk-cat-icon svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255, 255, 255, 0.7);
}
.sk-cat-title {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.sk-items {
    padding: 14px;
}
.sk-item {
    margin-bottom: 12px;
}
.sk-item:last-child {
    margin-bottom: 0;
}
.sk-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.sk-name {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--ink);
    transition: color 0.3s;
}
.sk-pct {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.sk-track {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.sk-fill {
    height: 100%;
    background: var(--ink);
    width: 0;
    border-radius: 2px;
    transition:
        width 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background 0.3s;
}
.sk-fill.acc {
    background: var(--accent);
}
.sk-fill.acc2 {
    background: var(--accent2);
}

/* ── VALUES ── */
.values-section {
    background: var(--ink);
    color: var(--bg);
    border-bottom: 2px solid var(--ink);
    position: relative;
    z-index: 1;
    transition: background 0.3s;
}
.values-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
}
.val-header {
    margin-bottom: 40px;
}
.val-header .sec-num {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
}
.val-header .sec-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.6px;
    color: var(--bg);
}
.val-header .sec-tit em {
    font-style: italic;
    color: var(--accent);
}
.val-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.val-card {
    background: var(--ink);
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}
.val-card:last-child {
    border-right: none;
}
.val-card:hover {
    background: rgba(255, 255, 255, 0.03);
}
.val-num {
    font-family: "DM Serif Display", serif;
    font-size: 52px;
    color: rgba(255, 255, 255, 0.08);
    line-height: 1;
    margin-bottom: 16px;
}
.val-ico {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.val-ico svg {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.6);
}
.val-card:hover .val-ico {
    background: var(--accent);
}
.val-card:hover .val-ico svg {
    stroke: #fff;
}
.val-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 6px;
}
.val-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}
.val-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.65;
}

/* ── BEYOND CODE ── */
.beyond-section {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.beyond-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 40px;
}
.beyond-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
}
.beyond-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    display: flex;
    gap: 16px;
    transition: all 0.2s;
}
.beyond-card:hover {
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--shadow);
}
.bc-ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.bc-ico svg {
    width: 22px;
    height: 22px;
}
.beyond-card:hover .bc-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.beyond-card:hover .bc-ico svg {
    stroke: var(--bg);
}
.bc-info {
}
.bc-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}
.bc-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

/* ── CTA STRIP ── */
.cta-strip {
    position: relative;
    z-index: 1;
    background: var(--accent);
    padding: 48px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
}
.cta-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.08) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
    pointer-events: none;
}
.cta-left {
    position: relative;
    z-index: 1;
}
.cta-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}
.cta-heading {
    font-family: "DM Serif Display", serif;
    font-size: clamp(24px, 3vw, 40px);
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.cta-heading em {
    font-style: italic;
}
.cta-btns {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.cta-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: 3px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.cta-btn.white {
    background: #fff;
    color: var(--accent);
}
.cta-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.cta-btn.outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.cta-btn.outline:hover {
    background: rgba(255, 255, 255, 0.12);
}
.cta-btn svg {
    width: 14px;
    height: 14px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    nav {
        padding: 0 20px;
    }
    .nav-center {
        display: none;
    }
    .hero-fold {
        grid-template-columns: 1fr;
    }
    .hf-left {
        min-height: auto;
    }
    .hf-right {
        border-left: none;
        border-top: 2px solid var(--ink);
    }
    .story-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 20px;
    }
    .story-left {
        position: static;
    }
    .tl-grid {
        grid-template-columns: 1fr;
        padding-left: 28px;
    }
    .tl-grid::before {
        left: 0;
    }
    .tl-item:nth-child(odd) {
        text-align: left;
        padding-right: 0;
    }
    .tl-item:nth-child(odd)::after,
    .tl-item:nth-child(even)::after {
        left: -22px;
        right: auto;
        transform: none;
    }
    .sk-grid {
        grid-template-columns: 1fr;
    }
    .val-grid {
        grid-template-columns: 1fr 1fr;
    }
    .beyond-grid {
        grid-template-columns: 1fr;
    }
    .cta-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 20px;
    }
    .timeline-inner,
    .skills-inner,
    .values-inner,
    .beyond-inner {
        padding: 40px 20px;
    }
    .tl-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .skills-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .page-footer {
        padding: 16px 20px;
    }
}
@media (max-width: 600px) {
    .hf-left {
        padding: 40px 24px 44px;
    }
    .hf-right {
        padding: 32px 24px;
    }
    .val-grid {
        grid-template-columns: 1fr;
    }
}

/* ══ SERVICES PAGE STYLES ══ */
/* SIDE NAV */
#sidenav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sn-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.25s;
    position: relative;
}
.sn-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bg);
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.sn-dot:hover::after {
    opacity: 1;
}
.sn-dot.active {
    background: var(--accent);
    transform: scale(1.5);
}
.sn-dot:hover:not(.active) {
    background: var(--muted);
}

/* HERO */
.hero {
    padding-top: 58px;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
    z-index: 1;
}
.hero-strip {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 36px;
    overflow: hidden;
}
.hs-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hs-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}
.hs-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.hs-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}
.hs-num {
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: -1px;
}
.hero-body {
    display: grid;
    grid-template-columns: 1fr 420px;
    border-top: 2px solid var(--ink);
}

/* LEFT */
.hb-left {
    background: var(--ink);
    color: var(--bg);
    padding: 52px 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.hb-left::before {
    content: "SV";
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-family: "DM Serif Display", serif;
    font-size: 240px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    letter-spacing: -12px;
}
.hl-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hl-eyebrow span {
    width: 24px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.hl-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(44px, 5.5vw, 76px);
    line-height: 0.9;
    letter-spacing: -2.5px;
    color: var(--bg);
    margin-bottom: 6px;
}
.hl-title em {
    font-style: italic;
    color: var(--accent);
}
.hl-sub {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 28px;
    margin-left: 2px;
}
.hl-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 36px;
}
.hl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 36px;
}
.hl-pill {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
}
.hl-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.hl-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ha {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.ha svg {
    width: 12px;
    height: 12px;
}
.ha.fill {
    background: var(--accent);
    color: #fff;
}
.ha.fill:hover {
    background: #b53508;
}
.ha.line {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
}
.ha.line:hover {
    background: rgba(255, 255, 255, 0.06);
}
.hl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hs-item {
    text-align: center;
    padding: 0 4px;
}
.hs-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.hs-n {
    font-family: "DM Serif Display", serif;
    font-size: 26px;
    line-height: 1;
    color: var(--bg);
}
.hs-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.hs-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 3px;
}

/* RIGHT — service visual */
.hb-right {
    border-left: 2px solid var(--ink);
    background: var(--card);
    display: flex;
    flex-direction: column;
    transition:
        background 0.35s,
        border-color 0.35s;
    position: relative;
    overflow: hidden;
}
#rightCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.4;
}
.right-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 28px 24px;
}
.svc-visual {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sv-row {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s;
}
.sv-row:hover {
    border-color: var(--accent);
    transform: translateX(4px);
}
.sv-ico {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sv-ico svg {
    width: 16px;
    height: 16px;
    stroke: var(--bg);
}
.sv-info {
    flex: 1;
}
.sv-name {
    font-family: "DM Mono", monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    transition: color 0.35s;
}
.sv-sub {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.sv-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
    border: 1px solid rgba(212, 65, 11, 0.3);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.06);
}
.right-foot {
    border-top: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.35s;
    flex-shrink: 0;
}
.rf-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.rf-btns {
    display: flex;
    gap: 6px;
}
.rfb {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rfb svg {
    width: 10px;
    height: 10px;
}
.rfb.dark {
    background: var(--ink);
    color: var(--bg);
}
.rfb.dark:hover {
    background: var(--accent);
}
.rfb.ghost {
    border: 1px solid var(--border);
    color: var(--muted);
}
.rfb.ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* MARQUEE */
.marquee {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 11px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: background 0.35s;
}
.marquee-t {
    display: flex;
    white-space: nowrap;
    animation: roll 22s linear infinite;
}
.marquee-t span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 28px;
    color: rgba(255, 255, 255, 0.35);
}
.marquee-t span.acc {
    color: var(--accent);
}
.sec-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}
.sec-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-l::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.sec-t {
    font-family: "DM Serif Display", serif;
    font-size: clamp(30px, 3.5vw, 46px);
    letter-spacing: -0.8px;
    line-height: 1;
}
.sec-t em {
    font-style: italic;
}

/* WHAT I DO — service cards */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.svc-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.22s;
}
.svc-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s;
}
.svc-card:hover {
    border-color: var(--ink);
    transform: translateY(-5px);
    box-shadow: 0 18px 48px var(--shadow);
}
.svc-card:hover::after {
    transform: scaleX(1);
}
.svc-num {
    font-family: "DM Serif Display", serif;
    font-size: 48px;
    line-height: 1;
    color: var(--border);
    position: absolute;
    top: 16px;
    right: 20px;
    letter-spacing: -2px;
    transition: color 0.22s;
}
.svc-card:hover .svc-num {
    color: rgba(212, 65, 11, 0.1);
}
.svc-icon {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.18s;
}
.svc-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--ink);
    transition: stroke 0.18s;
}
.svc-card:hover .svc-icon {
    background: var(--ink);
    border-color: var(--ink);
}
.svc-card:hover .svc-icon svg {
    stroke: var(--bg);
}
.svc-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}
.svc-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 18px;
}
.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.svc-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    transition: all 0.15s;
}
.svc-card:hover .svc-tag {
    border-color: rgba(212, 65, 11, 0.2);
    color: var(--accent);
}

/* HOW I WORK — process */
.process-wrap {
    position: relative;
}
.process-line {
    position: absolute;
    left: 21px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--border);
}
.process-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pi {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0;
    padding-bottom: 36px;
    position: relative;
}
.pi:last-child {
    padding-bottom: 0;
}
.pi-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
}
.pi-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    transition: all 0.2s;
    flex-shrink: 0;
}
.pi:hover .pi-num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}
.pi-body {
    padding: 10px 0 0 28px;
}
.pi-phase {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}
.pi-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}
.pi-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 560px;
}
.pi-chips {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pi-chip {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}

/* HOW I WORK — card grid */
.hiw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.hiw-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 28px 22px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.22s;
}
.hiw-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}
.hiw-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 16px 44px var(--shadow);
}
.hiw-card:hover::before {
    transform: scaleX(1);
}
.hiw-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.hiw-num {
    font-family: "DM Serif Display", serif;
    font-size: 36px;
    color: var(--border);
    line-height: 1;
    letter-spacing: -1px;
    transition: color 0.2s;
}
.hiw-card:hover .hiw-num {
    color: rgba(212, 65, 11, 0.12);
}
.hiw-phase {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 3px 8px;
    border: 1px solid rgba(212, 65, 11, 0.25);
    border-radius: 2px;
    background: rgba(212, 65, 11, 0.04);
}
.hiw-icon {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: all 0.2s;
}
.hiw-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--ink);
    transition: stroke 0.2s;
}
.hiw-card:hover .hiw-icon {
    background: var(--ink);
    border-color: var(--ink);
}
.hiw-card:hover .hiw-icon svg {
    stroke: var(--bg);
}
.hiw-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}
.hiw-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 14px;
}
.hiw-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.hiw-chip {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* FAQ — card grid */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.faq-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    transition: all 0.2s;
}
.faq-card:hover {
    border-color: var(--ink);
}
.faq-card-q {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 12px;
}
.faq-card-num {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 3px;
}
.faq-card-a {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
    padding-left: 30px;
}
/* FAQ CTA card */
.faq-card-cta {
    background: var(--ink);
    border-color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.faq-card-cta:hover {
    border-color: var(--ink);
}
.faq-cta-text {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.faq-cta-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 18px;
    line-height: 1.5;
}
.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
    align-self: flex-start;
}
.faq-cta-btn:hover {
    background: #c03a08;
}
.faq-cta-btn svg {
    width: 12px;
    height: 12px;
}

/* PRICING */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
}
.pr-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.22s;
}
.pr-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 14px 40px var(--shadow);
}
.pr-card.featured {
    border-color: var(--accent);
}
.pr-card.featured:hover {
    border-color: var(--ink);
}
.pr-head {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.35s;
}
.pr-card.featured .pr-head {
    background: var(--ink);
    transition: background 0.35s;
}
.pr-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    display: inline-block;
    margin-bottom: 14px;
}
.pr-name {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}
.pr-card.featured .pr-name {
    color: var(--bg);
}
.pr-sub {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.pr-card.featured .pr-sub {
    color: rgba(255, 255, 255, 0.3);
}
.pr-price {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.35s;
}
.pr-card.featured .pr-price {
    background: var(--ink);
    border-color: rgba(255, 255, 255, 0.07);
    transition:
        background 0.35s,
        border-color 0.35s;
}
.pr-amt {
    font-family: "DM Serif Display", serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -1.5px;
}
.pr-card.featured .pr-amt {
    color: var(--bg);
}
.pr-amt sup {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    color: var(--accent);
    vertical-align: super;
}
.pr-per {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}
.pr-card.featured .pr-per {
    color: rgba(255, 255, 255, 0.3);
}
.pr-features {
    padding: 20px 24px;
}
.pr-card.featured .pr-features {
    background: var(--ink);
}
.pr-feat-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
    font-size: 13px;
    color: var(--muted);
}
.pr-card.featured .pr-feat-item {
    color: rgba(255, 255, 255, 0.45);
}
.pr-feat-item:last-child {
    margin-bottom: 0;
}
.pr-feat-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: var(--green);
}
.pr-feat-item.no svg {
    stroke: var(--muted);
}
.pr-foot {
    padding: 0 24px 24px;
}
.pr-card.featured .pr-foot {
    background: var(--ink);
}
.pr-btn {
    width: 100%;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 2px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.18s;
}
.pr-btn svg {
    width: 11px;
    height: 11px;
}
.pr-btn.solid {
    background: var(--ink);
    color: var(--bg);
}
.pr-btn.solid:hover {
    background: var(--accent);
}
.pr-btn.accent {
    background: var(--accent);
    color: #fff;
}
.pr-btn.accent:hover {
    background: #b53508;
}
.pr-btn.outline {
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}
.pr-btn.outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* METRICS */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.mc {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 26px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.22s;
}
.mc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s;
}
.mc:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
}
.mc:hover::after {
    transform: scaleX(1);
}
.mc-ico {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: all 0.15s;
}
.mc-ico svg {
    width: 18px;
    height: 18px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}
.mc:hover .mc-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.mc:hover .mc-ico svg {
    stroke: var(--bg);
}
.mc-n {
    font-family: "DM Serif Display", serif;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 4px;
}
.mc-n sup {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--accent);
}
.mc-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* TESTIMONIALS */
.testi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.testi-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 26px;
    transition: all 0.22s;
}
.testi-card:hover {
    border-color: var(--ink);
}
.tc-quote {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    font-style: italic;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 20px;
    position: relative;
    padding-left: 18px;
}
.tc-quote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -4px;
    font-size: 32px;
    color: var(--accent);
    line-height: 1;
    font-style: normal;
}
.tc-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tc-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-av span {
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: var(--bg);
    font-style: italic;
}
.tc-name {
    font-size: 13px;
    font-weight: 600;
}
.tc-role {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.tc-stars {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.tc-star {
    width: 10px;
    height: 10px;
    fill: var(--accent);
}

/* FAQ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
    border-top: 1px solid var(--border);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    text-align: left;
    background: none;
    border: none;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    gap: 16px;
    transition: color 0.15s;
}
.faq-q:hover {
    color: var(--accent);
}
.faq-q svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--muted);
    transition:
        transform 0.25s,
        stroke 0.15s;
}
.faq-q:hover svg {
    stroke: var(--accent);
}
.faq-item.open .faq-q svg {
    transform: rotate(45deg);
}
.faq-a {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.3s ease,
        padding 0.3s ease;
}
.faq-item.open .faq-a {
    max-height: 200px;
    padding-bottom: 20px;
}

/* CTA */
.cta-band {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.cta-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 36px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}
.cta-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cta-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.cta-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3.5vw, 48px);
    letter-spacing: -0.8px;
    line-height: 1;
    color: var(--bg);
}
.cta-title em {
    font-style: italic;
    color: var(--accent);
}
.cta-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.7;
    margin-top: 14px;
    max-width: 480px;
}
.cta-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.cta-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
    white-space: nowrap;
}
.cta-btn svg {
    width: 12px;
    height: 12px;
}
.cta-btn.fill {
    background: var(--accent);
    color: #fff;
}
.cta-btn.fill:hover {
    background: #b53508;
}
.cta-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.5);
}
.cta-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* NEXT / FOOTER */
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 38px);
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* RESPONSIVE */
@media (max-width: 960px) {
    .hero-body {
        grid-template-columns: 1fr;
    }
    .hb-left {
        padding: 40px 24px;
    }
    .hb-right {
        border-left: none;
        border-top: 2px solid var(--ink);
        min-height: 300px;
    }
    .svc-grid {
        grid-template-columns: 1fr 1fr;
    }
    .hiw-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .metrics-row {
        grid-template-columns: 1fr 1fr;
    }
    .testi-grid {
        grid-template-columns: 1fr;
    }
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cta-btns {
        align-items: flex-start;
        flex-direction: row;
    }
    #sidenav {
        display: none;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 600px) {
    .svc-grid {
        grid-template-columns: 1fr;
    }
    .hiw-grid {
        grid-template-columns: 1fr;
    }
    .metrics-row {
        grid-template-columns: 1fr 1fr;
    }
    .hl-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .hs-item:nth-child(2) {
        border-right: none;
    }
    .cta-btns {
        flex-direction: column;
    }
    /* CTA band padding + full-width stacked buttons */
    .cta-inner {
        grid-template-columns: 1fr;
        padding: 40px 20px !important;
        gap: 28px;
    }
    .cta-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .cta-btn {
        justify-content: center;
        width: 100%;
    }
    /* Section headers — stack description below title */
    .sec-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left;
        gap: 10px;
        margin-bottom: 28px;
    }
    .sec-top > div:last-child {
        text-align: left !important;
        max-width: 100% !important;
    }
    /* Hero strip — keep single line on mobile */
    .hero-strip {
        padding: 9px 16px;
        gap: 8px;
    }
    .hs-num {
        display: none;
    }
    .hs-tag {
        font-size: 11px;
        letter-spacing: 1.2px;
    }
    .hs-tag::before {
        display: none;
    }
    .hs-status {
        font-size: 11px;
        letter-spacing: 1px;
    }
    /* Hero actions — full-width stacked buttons */
    .hl-actions {
        flex-direction: column;
    }
    .ha {
        justify-content: center;
        width: 100%;
        padding: 11px 18px;
    }
}
@media (max-width: 480px) {
    .hb-left {
        padding: 28px 16px 24px;
    }
    .hl-title {
        font-size: 38px;
        letter-spacing: -1.5px;
    }
}

/* ══ CONTACT PAGE STYLES ══ */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── PAGE HEADER ── */
.page-header {
    border-bottom: 2px solid var(--ink);
    position: relative;
    z-index: 1;
}
.ph-strip {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 36px;
}
.ph-strip-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-strip-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.ph-strip-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.ph-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}
.ph-num {
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: -1px;
}
.ph-main {
    background: var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.ph-main::before {
    content: "?";
    position: absolute;
    right: -10px;
    top: -50px;
    font-family: "DM Serif Display", serif;
    font-size: 320px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.02);
    pointer-events: none;
}
.ph-left {
}
.ph-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-eyebrow span {
    width: 24px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.ph-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 0.9;
    letter-spacing: -2.5px;
    color: var(--bg);
}
.ph-title em {
    font-style: italic;
    color: var(--accent);
}
.ph-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.75;
    margin-top: 14px;
    max-width: 500px;
}
.ph-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}
.ph-avail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
.ph-avail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
.ph-resp {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.22);
    text-align: right;
    line-height: 1.6;
}
.ph-resp strong {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
[data-theme="dark"] .ph-eyebrow {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .ph-desc {
    color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .ph-avail {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .ph-resp {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .ph-resp strong {
    color: rgba(255, 255, 255, 0.7);
}

/* ── MAIN LAYOUT ── */
.main-layout {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 36px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 52px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ── CONTACT FORM ── */
.form-wrap {
    padding: 52px 0 64px;
}
.form-heading {
    margin-bottom: 36px;
}
.fh-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fh-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.fh-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3.5vw, 42px);
    letter-spacing: -0.8px;
    line-height: 0.95;
}
.fh-title em {
    font-style: italic;
}

/* project type selector */
.type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 28px;
}
.type-btn {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 14px 12px;
    text-align: left;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.type-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}
.type-btn:hover {
    border-color: var(--ink);
}
.type-btn.on {
    border-color: var(--accent);
    background: rgba(212, 65, 11, 0.04);
}
.type-btn.on::after {
    transform: scaleX(1);
}
.tb-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: all 0.2s;
}
.tb-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--muted);
    transition: stroke 0.2s;
}
.type-btn.on .tb-icon {
    background: var(--accent);
    border-color: var(--accent);
}
.type-btn.on .tb-icon svg {
    stroke: #fff;
}
.tb-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}
.tb-sub {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}

/* form fields */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.form-field.full {
    grid-column: 1/-1;
}
.fl-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.fl-label .req {
    color: var(--accent);
}
.form-input,
.form-select,
.form-textarea {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 3px;
    padding: 11px 14px;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition:
        border-color 0.18s,
        background 0.35s;
    width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--ink);
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--muted);
}
.form-input.err,
.form-textarea.err {
    border-color: var(--accent);
}
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.65;
}
.budget-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* char count */
.field-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.char-count {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.4px;
    color: var(--muted);
}

/* checkbox */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
}
.check-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    margin-top: 1px;
}
.check-box.checked {
    background: var(--ink);
    border-color: var(--ink);
}
.check-box svg {
    width: 10px;
    height: 10px;
    stroke: #fff;
    opacity: 0;
    transition: opacity 0.15s;
}
.check-box.checked svg {
    opacity: 1;
}
.check-text {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
}
.check-text a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* submit button */
.submit-btn {
    width: 100%;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 24px;
    border-radius: 2px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.submit-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translateX(-101%);
    transition: transform 0.3s ease;
}
.submit-btn:hover::after {
    transform: translateX(0);
}
.submit-btn span,
.submit-btn svg {
    position: relative;
    z-index: 1;
}
.submit-btn svg {
    width: 13px;
    height: 13px;
}

/* success state */
.form-success {
    display: none;
    padding: 32px;
    background: var(--card);
    border: 1.5px solid var(--green);
    border-radius: 6px;
    text-align: center;
    animation: slideIn 0.4s ease;
}
.fs-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(26, 122, 74, 0.1);
    border: 1.5px solid rgba(26, 122, 74, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.fs-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
}
.fs-title {
    font-family: "DM Serif Display", serif;
    font-size: 24px;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
    color: var(--ink);
}
.fs-title em {
    font-style: italic;
    color: var(--green);
}
.fs-desc {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.7;
}

/* ── SIDEBAR ── */
.contact-sidebar {
    padding: 52px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sb-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 18px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.sb-lbl {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sb-lbl::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}

/* availability card */
.sb-card.avail-card {
    background: var(--ink);
    border-color: var(--ink);
    transition: background 0.35s;
}
.avail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
.avail-status {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.avail-title {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.4px;
    color: var(--bg);
    margin-bottom: 6px;
    line-height: 1.1;
}
.avail-title em {
    font-style: italic;
    color: var(--accent);
}
.avail-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.65;
    margin-bottom: 16px;
}
.avail-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.avail-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
}
.avail-slot-name {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.avail-slot-val {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}
.avail-slot-val.open {
    color: #4ade80;
}
.avail-slot-val.ltd {
    color: var(--amber);
}
.avail-slot-val.full {
    color: rgba(255, 255, 255, 0.25);
}
.avail-note {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1.5;
}
[data-theme="dark"] .sb-card.avail-card .avail-status {
    color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .sb-card.avail-card .avail-desc {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .sb-card.avail-card .avail-slot {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sb-card.avail-card .avail-slot-name {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .sb-card.avail-card .avail-slot-val {
    color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .sb-card.avail-card .avail-slot-val.full {
    color: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .sb-card.avail-card .avail-note {
    color: rgba(255, 255, 255, 0.25);
}

/* contact links */
.clink {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.18s;
    margin-bottom: 8px;
}
.clink:last-child {
    margin-bottom: 0;
}
.clink:hover {
    border-color: var(--ink);
    background: var(--bg);
}
.clink-ico {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.clink-ico svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}
.clink:hover .clink-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.clink:hover .clink-ico svg {
    stroke: var(--bg);
}
.clink-body {
    flex: 1;
}
.clink-name {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: var(--ink);
}
.clink-val {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}
.clink-arr {
    opacity: 0.25;
    transition: opacity 0.15s;
}
.clink:hover .clink-arr {
    opacity: 1;
}
.clink-arr svg {
    width: 12px;
    height: 12px;
    stroke: var(--ink);
}

/* process card */
.process-mini {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pm-item {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.pm-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.pm-item:first-child {
    padding-top: 0;
}
.pm-num {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    line-height: 1;
    color: var(--border);
    letter-spacing: -1px;
    flex-shrink: 0;
    width: 28px;
    transition: color 0.18s;
}
.pm-item:hover .pm-num {
    color: var(--accent);
}
.pm-body {
}
.pm-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}
.pm-desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.55;
}

/* timezone card */
.tz-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.tz-row:last-child {
    border-bottom: none;
}
.tz-row:first-child {
    padding-top: 0;
}
.tz-city {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tz-flag {
    font-size: 14px;
    line-height: 1;
}
.tz-name {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--ink);
}
.tz-time {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--muted);
}
.tz-time.mine {
    color: var(--accent);
}

/* ── FAQ ── */
.faq-section {
    border-top: 1.5px solid var(--border);
    position: relative;
    z-index: 1;
}
.faq-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 52px 36px 64px;
}
.faq-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 36px;
}
.faq-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.faq-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.faq-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.7px;
    line-height: 1;
}
.faq-title em {
    font-style: italic;
}
.faq-note {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.3px;
    text-align: right;
    max-width: 180px;
    line-height: 1.6;
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.faq-item {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.faq-item:nth-child(even) {
    border-right: none;
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    background: none;
    border: none;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    gap: 14px;
    text-align: left;
    transition: background 0.15s;
}
.faq-q:hover {
    background: var(--card);
}
.faq-q svg {
    width: 15px;
    height: 15px;
    stroke: var(--muted);
    flex-shrink: 0;
    transition:
        transform 0.25s,
        stroke 0.15s;
}
.faq-item.open .faq-q {
    background: var(--card);
}
.faq-item.open .faq-q svg {
    transform: rotate(45deg);
    stroke: var(--accent);
}
.faq-a {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.75;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.32s ease,
        padding 0.32s ease;
    padding: 0 22px;
}
.faq-item.open .faq-a {
    max-height: 240px;
    padding: 0 22px 20px;
}

/* ── MARQUEE ── */
.marquee {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.mq-t {
    display: flex;
    white-space: nowrap;
    animation: roll 26s linear infinite;
}
.mq-t span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 26px;
    color: rgba(255, 255, 255, 0.3);
}
.mq-t span.acc {
    color: var(--accent);
}
[data-theme="dark"] .mq-t span {
    color: rgba(26, 26, 24, 0.4);
}
[data-theme="dark"] .marquee-t span {
    color: rgba(26, 26, 24, 0.4);
}
@keyframes roll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ── FOOTER ── */
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 52px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 40px);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}
footer {
    position: relative;
    z-index: 1;
    background: #1c1c1a;
    color: #f0ede6;
    padding: 18px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.35s;
}
.ft-logo {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    text-decoration: none;
    color: #f0ede6;
}
.ft-logo em {
    font-style: italic;
    color: var(--accent);
}
.ft-mid {
    display: flex;
    gap: 14px;
}
.ft-link {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    transition: color 0.15s;
}
.ft-link:hover,
.ft-link.cur {
    color: #f0ede6;
}
.ft-back {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}
.ft-back:hover {
    color: #f0ede6;
}
.ft-back svg {
    width: 12px;
    height: 12px;
}

/* ── FADE UP ── */
.fu {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}
.fu.in {
    opacity: 1;
    transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    nav {
        padding: 0 20px;
    }
    .n-crumb {
        display: none;
    }
    .ph-main {
        grid-template-columns: 1fr;
        padding: 28px 20px 24px;
    }
    .ph-right {
        align-items: flex-start;
    }
    .ph-strip {
        padding: 9px 20px;
    }
    .main-layout {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 0;
    }
    .contact-sidebar {
        padding: 0 0 48px;
    }
    .faq-inner {
        padding: 44px 20px 52px;
    }
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .faq-item {
        border-right: none !important;
    }
    .faq-item:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }
    .faq-item:last-child {
        border-bottom: none;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 20px;
    }
    footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .type-selector {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .budget-row {
        grid-template-columns: 1fr;
    }
    .type-selector {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══ PROJECTS PAGE STYLES ══ */
/* project-card cursor label */
#curLabel {
    position: fixed;
    background: var(--ink);
    color: var(--bg);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
    transform: translate(-50%, -120%);
    transition:
        opacity 0.2s,
        transform 0.2s;
    white-space: nowrap;
}

/* ── PAGE PROGRESS ── */
#progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
}

/* ── HERO HEADER ── */
.page-hero {
    padding-top: 60px;
    position: relative;
    z-index: 1;
    background: var(--ink);
    color: var(--bg);
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    transition: background 0.3s;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
    pointer-events: none;
}
.ph-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 52px 40px 48px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: 40px;
}
.ph-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--accent);
}
.ph-h1 {
    font-family: "DM Serif Display", serif;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--bg);
    margin-bottom: 16px;
}
.ph-h1 em {
    font-style: italic;
    color: var(--accent);
}
.ph-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    max-width: 420px;
    line-height: 1.7;
}
.ph-right {
    text-align: right;
    flex-shrink: 0;
}
.ph-count {
    font-family: "DM Serif Display", serif;
    font-size: 80px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.06);
    letter-spacing: -4px;
}
.ph-count-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 4px;
}

/* ── FILTER BAR ── */
.filter-bar {
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--bg);
    border-bottom: 1.5px solid var(--border);
    transition:
        background 0.3s,
        border-color 0.3s;
}
.filter-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.fchip {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--muted);
    transition: all 0.15s;
}
.fchip:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.fchip.active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.fchip.tech {
    border-style: dashed;
}
.fchip.tech.active {
    background: var(--accent);
    border-color: var(--accent);
    border-style: solid;
}
.filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.view-toggle {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.vbtn {
    width: 32px;
    height: 30px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-right: 1px solid var(--border);
}
.vbtn:last-child {
    border-right: none;
}
.vbtn.active {
    background: var(--ink);
}
.vbtn svg {
    width: 14px;
    height: 14px;
    stroke: var(--muted);
}
.vbtn.active svg {
    stroke: var(--bg);
}
.result-count {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── FEATURED PROJECT ── */
.featured-wrap {
    position: relative;
    z-index: 1;
    max-width: 1340px;
    margin: 0 auto;
    padding: 40px 40px 0;
}
.featured-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.featured-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
/* ── FEATURED CARD (scoped to .featured-card) ── */
.featured-card {
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: all 0.25s;
    position: relative;
}
.featured-card:hover {
    box-shadow: 8px 8px 0 var(--ink);
    transform: translateY(-2px);
}
.featured-card .fc-left {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    position: relative;
    min-height: auto;
    overflow: visible;
}
.featured-card .fc-left::before {
    display: none;
}
.featured-card .fc-num {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.featured-card .fc-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
    color: var(--ink);
    position: relative;
    z-index: auto;
}
.featured-card .fc-title em {
    font-style: italic;
    color: var(--accent);
}
.featured-card .fc-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}
.featured-card .fc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.featured-card .fc-tag {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}
.featured-card .fc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}
.featured-card .fc-stats {
    display: flex;
    gap: 16px;
}
.featured-card .fc-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
}
.featured-card .fc-stat svg {
    width: 12px;
    height: 12px;
}
.featured-card .fc-links {
    display: flex;
    gap: 8px;
}
.featured-card .fc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.15s;
}
.featured-card .fc-link.primary {
    background: var(--ink);
    color: var(--bg);
}
.featured-card .fc-link.primary:hover {
    background: var(--accent);
}
.featured-card .fc-link.ghost {
    border: 1.5px solid var(--border);
    color: var(--ink);
}
.featured-card .fc-link.ghost:hover {
    border-color: var(--ink);
    background: var(--bg);
}
.featured-card .fc-link svg {
    width: 12px;
    height: 12px;
}
/* featured right — dashboard mockup panel */
.featured-card .fc-right {
    background: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    min-height: 380px;
    padding: 24px;
    transition: background 0.3s;
}
.featured-card .fc-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 18px 18px;
    pointer-events: none;
}
/* dashboard mockup visual */
.featured-card .fc-visual {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* top bar of the mockup */
.fc-mock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}
.fc-mock-dots {
    display: flex;
    gap: 5px;
}
.fc-mock-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.fc-mock-dots span:nth-child(1) {
    background: #ff5f57;
}
.fc-mock-dots span:nth-child(2) {
    background: #febc2e;
}
.fc-mock-dots span:nth-child(3) {
    background: #28c840;
}
.fc-mock-url {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    margin-left: 8px;
}
/* dashboard grid layout */
.fc-mock-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 10px;
}
/* stat cards row */
.fc-mock-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fc-mock-stat-label {
    width: 50%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
.fc-mock-stat-val {
    width: 60%;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.fc-mock-stat:nth-child(2) .fc-mock-stat-val {
    background: rgba(212, 65, 11, 0.5);
}
.fc-mock-stat:nth-child(3) .fc-mock-stat-val {
    background: rgba(43, 91, 255, 0.4);
}
/* chart area */
.fc-mock-chart {
    grid-column: 1 / 3;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.fc-mock-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}
.fc-mock-chart-bars span {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: rgba(212, 65, 11, 0.35);
    transition: background 0.2s;
}
.fc-mock-chart-bars span:nth-child(odd) {
    background: rgba(255, 255, 255, 0.1);
}
.fc-mock-chart-bars span:nth-child(3) {
    height: 60%;
}
.fc-mock-chart-bars span:nth-child(1) {
    height: 40%;
}
.fc-mock-chart-bars span:nth-child(2) {
    height: 75%;
}
.fc-mock-chart-bars span:nth-child(4) {
    height: 50%;
}
.fc-mock-chart-bars span:nth-child(5) {
    height: 85%;
}
.fc-mock-chart-bars span:nth-child(6) {
    height: 65%;
}
.fc-mock-chart-bars span:nth-child(7) {
    height: 45%;
}
.fc-mock-chart-bars span:nth-child(8) {
    height: 90%;
}
/* sidebar list */
.fc-mock-list {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fc-mock-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fc-mock-list-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.fc-mock-list-item:nth-child(1) .fc-mock-list-dot {
    background: var(--accent);
}
.fc-mock-list-item:nth-child(3) .fc-mock-list-dot {
    background: rgba(43, 91, 255, 0.6);
}
.fc-mock-list-line {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    flex: 1;
}
/* featured badge */
.featured-card .fc-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--accent);
    color: #fff;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    z-index: 3;
    display: inline-block;
    margin-bottom: 0;
}

/* ── PROJECTS GRID ── */
.projects-section {
    position: relative;
    z-index: 1;
    padding: 32px 0 60px;
}
.projects-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── PROJECTS LAYOUT: MAIN + SIDEBAR ── */
.proj-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.proj-main {
    min-width: 0;
}
.proj-sidebar {
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: none;
}
.proj-sidebar::-webkit-scrollbar {
    display: none;
}

/* sidebar cards (extend sb-card pattern) */
.proj-sidebar .sb-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 18px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.proj-sidebar .sb-lbl {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.proj-sidebar .sb-lbl::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}

/* availability card in sidebar */
.proj-sidebar .avail-card {
    background: var(--ink);
    border-color: var(--ink);
}
.proj-sidebar .avail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
.proj-sidebar .avail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.proj-sidebar .avail-status {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.proj-sidebar .avail-title {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    letter-spacing: -0.4px;
    color: var(--bg);
    margin-bottom: 4px;
    line-height: 1.15;
}
.proj-sidebar .avail-title em {
    font-style: italic;
    color: var(--accent);
}
.proj-sidebar .avail-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.65;
    margin-bottom: 14px;
}
.proj-sidebar .avail-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    transition: gap 0.2s;
}
.proj-sidebar .avail-cta:hover {
    gap: 10px;
}
.proj-sidebar .avail-cta svg {
    width: 12px;
    height: 12px;
}

/* quick stats mini grid */
.sb-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.sb-stat {
    background: var(--card);
    padding: 14px 12px;
    text-align: center;
}
.sb-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
}
.sb-stat-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.sb-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

/* tech stack chips in sidebar */
.sb-tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sb-tchip {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    background: transparent;
    transition: all 0.18s;
}
.sb-tchip:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-1px);
}

/* github profile card */
.sb-gh-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.sb-gh-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-gh-av svg {
    width: 18px;
    height: 18px;
    stroke: var(--bg);
}
.sb-gh-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.sb-gh-handle {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.3px;
}
.sb-gh-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}
.sb-gh-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    color: var(--ink);
    line-height: 1;
}
.sb-gh-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.sb-gh-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}
.sb-gh-link:hover {
    color: var(--ink);
}
.sb-gh-link svg {
    width: 11px;
    height: 11px;
}
.sb-svc-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sb-svc-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-svc-ico {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--surface, #f4f4f2);
    border: 1px solid var(--border, #e8e8e4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-svc-ico svg {
    width: 13px;
    height: 13px;
    stroke: var(--ink);
}
.sb-svc-name {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.3;
}

/* sidebar CTA card — scoped to beat .proj-sidebar .sb-card specificity */
.proj-sidebar .sb-card.sb-cta-card {
    background: var(--ink);
    border-color: var(--ink);
    border-radius: 6px;
    padding: 22px;
}
.proj-sidebar .sb-cta-title {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 8px;
}
.proj-sidebar .sb-cta-title em {
    font-style: italic;
    color: var(--accent);
}
.proj-sidebar .sb-cta-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 16px;
}
.proj-sidebar .sb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
}
.proj-sidebar .sb-cta-btn:hover {
    background: #c03a08;
}
.proj-sidebar .sb-cta-btn svg {
    width: 11px;
    height: 11px;
}
[data-theme="dark"] .proj-sidebar .sb-card.sb-cta-card {
    background: #1c1c1a;
    border-color: #1c1c1a;
}
[data-theme="dark"] .proj-sidebar .sb-cta-title {
    color: #f0ede6;
}
[data-theme="dark"] .proj-sidebar .sb-cta-desc {
    color: rgba(255, 255, 255, 0.5);
}

/* ── GITHUB ACTIVITY STRIP ── */
.gh-activity-section {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px 32px;
}
.gh-activity-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.gh-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.gh-activity-title {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.gh-activity-title::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}
.gh-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    color: var(--muted);
}
.gh-legend-cell {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.gh-heatmap {
    display: grid;
    grid-template-columns: repeat(52, 1fr);
    gap: 3px;
    margin-bottom: 16px;
}
.gh-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gh-cell {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.15s;
}
.gh-cell.l1 {
    background: rgba(212, 65, 11, 0.15);
}
.gh-cell.l2 {
    background: rgba(212, 65, 11, 0.3);
}
.gh-cell.l3 {
    background: rgba(212, 65, 11, 0.5);
}
.gh-cell.l4 {
    background: rgba(212, 65, 11, 0.75);
}
.gh-activity-stats {
    display: flex;
    gap: 32px;
}
.gh-a-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    color: var(--ink);
    line-height: 1;
}
.gh-a-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

/* ── TECH TOOLS SECTION ── */
.tools-section {
    position: relative;
    z-index: 1;
    padding: 48px 0;
    border-top: 1.5px solid var(--border);
}
.tools-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
}
.tools-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}
.tools-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tools-eyebrow::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.tools-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.tools-title em {
    font-style: italic;
    color: var(--accent);
}
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.tool-group {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 20px;
    transition: border-color 0.2s;
}
.tool-group:hover {
    border-color: var(--ink);
}
.tg-label {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tg-label svg {
    width: 12px;
    height: 12px;
}
.tg-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink);
    transition: color 0.15s;
}
.tg-item:hover {
    color: var(--accent);
}
.tg-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    flex-shrink: 0;
}
.tg-item span {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-left: auto;
}

/* ── PROJECT TESTIMONIALS ── */
.proj-testi-section {
    position: relative;
    padding: 48px 0;
    border-top: 1.5px solid var(--border);
}
.proj-testi-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
}
.proj-testi-header {
    margin-bottom: 28px;
}
.proj-testi-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.proj-testi-eyebrow::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.proj-testi-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.proj-testi-title em {
    font-style: italic;
    color: var(--accent);
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    transition: all 0.3s;
}
.proj-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}
.proj-grid.list-view {
    grid-template-columns: 1fr;
}

/* PROJECT CARD */
.proj-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
    position: relative;
    text-decoration: none;
    color: var(--ink);
}
.proj-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s;
}
.proj-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--shadow);
}
.proj-card:hover::after {
    transform: scaleX(1);
}
.proj-card[data-hidden="true"] {
    display: none;
}

/* card visual top */
.pc-thumb {
    height: 140px;
    background: var(--ink);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s;
}
.pc-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px
    );
    background-size: 16px 16px;
}
.pc-thumb-icon {
    position: relative;
    z-index: 1;
    opacity: 0.7;
}
.pc-thumb-icon svg {
    width: 40px;
    height: 40px;
    stroke: rgba(255, 255, 255, 0.6);
}
.pc-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.pc-status {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}
.pc-status.live {
    background: rgba(26, 122, 74, 0.15);
    border: 1px solid rgba(26, 122, 74, 0.3);
    color: var(--green);
}
.pc-status.wip {
    background: rgba(180, 83, 9, 0.12);
    border: 1px solid rgba(180, 83, 9, 0.25);
    color: var(--amber);
}
.pc-status.oss {
    background: rgba(43, 91, 255, 0.1);
    border: 1px solid rgba(43, 91, 255, 0.25);
    color: var(--accent2);
}
.pc-num {
    position: absolute;
    bottom: 10px;
    left: 14px;
    z-index: 2;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.25);
}

/* card body */
.pc-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pc-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 7px;
}
.pc-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}
.pc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.pc-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}
.pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.pc-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
}
.pc-stars svg {
    width: 11px;
    height: 11px;
    stroke: var(--amber);
}
.pc-arrow {
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.pc-arrow svg {
    width: 12px;
    height: 12px;
}
.proj-card:hover .pc-arrow {
    background: var(--ink);
    border-color: var(--ink);
}
.proj-card:hover .pc-arrow svg {
    stroke: var(--bg);
}

/* LIST VIEW card */
.proj-grid.list-view .proj-card {
    flex-direction: row;
    align-items: center;
}
.proj-grid.list-view .pc-thumb {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
}
.proj-grid.list-view .pc-body {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.proj-grid.list-view .pc-desc {
    display: none;
}
.proj-grid.list-view .pc-title {
    margin-bottom: 0;
    min-width: 160px;
}
.proj-grid.list-view .pc-tags {
    margin-bottom: 0;
    flex: 1;
}
.proj-grid.list-view .pc-foot {
    border: none;
    padding: 0;
    flex-shrink: 0;
}
.proj-grid.list-view .pc-card::after {
    display: none;
}

/* ── NO RESULTS ── */
.no-results {
    text-align: center;
    padding: 60px 20px;
    display: none;
}
.no-results.show {
    display: block;
}
.no-results svg {
    width: 48px;
    height: 48px;
    stroke: var(--border);
    margin-bottom: 16px;
}
.no-results p {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── PROJECT MODAL ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
}
.modal-overlay.open {
    display: flex;
}
.modal-box {
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 8px;
    max-width: 680px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: mSlide 0.25s ease;
}
@keyframes mSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal-head {
    background: var(--ink);
    color: var(--bg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.mh-left {
}
.mh-num {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 4px;
}
.mh-title {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    color: var(--bg);
}
.modal-close {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.18);
}
.modal-close svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255, 255, 255, 0.7);
}
.modal-body {
    overflow-y: auto;
    flex: 1;
}
.modal-body::-webkit-scrollbar {
    width: 3px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.mb-visual {
    height: 180px;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
}
.mb-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px
    );
    background-size: 18px 18px;
}
.mb-visual svg {
    width: 56px;
    height: 56px;
    stroke: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}
.mb-content {
    padding: 24px;
}
.mb-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 20px;
}
.mb-section {
    margin-bottom: 20px;
}
.mb-sec-title {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.mb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.mb-tag {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    color: var(--ink);
}
.mb-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mb-metric {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    text-align: center;
}
.mb-metric-n {
    font-family: "DM Serif Display", serif;
    font-size: 24px;
}
.mb-metric-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.mb-metric-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.mb-highlights {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mb-hi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.mb-hi svg {
    width: 14px;
    height: 14px;
    stroke: var(--green);
    flex-shrink: 0;
    margin-top: 1px;
}
.modal-foot {
    padding: 16px 24px;
    border-top: 1.5px solid var(--border);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.mf-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.15s;
}
.mf-btn svg {
    width: 13px;
    height: 13px;
}
.mf-btn.primary {
    background: var(--ink);
    color: var(--bg);
    flex: 1;
    justify-content: center;
}
.mf-btn.primary:hover {
    background: var(--accent);
}
.mf-btn.outline {
    border: 1.5px solid var(--border);
    color: var(--ink);
}
.mf-btn.outline:hover {
    border-color: var(--ink);
}

/* ── STATS STRIP ── */
.stats-strip {
    position: relative;
    z-index: 1;
    background: var(--ink);
    color: var(--bg);
    border-top: 2px solid var(--ink);
    transition: background 0.3s;
}
.ss-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.ss-item {
    background: var(--ink);
    padding: 24px 20px;
    text-align: center;
}
.ss-n {
    font-family: "DM Serif Display", serif;
    font-size: 40px;
    line-height: 1;
}
.ss-n sup {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    color: var(--accent);
}
.ss-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

/* ── CTA ── */
.cta-bar {
    position: relative;
    z-index: 1;
    background: var(--accent);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.cta-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
}
.cta-text {
    position: relative;
    z-index: 1;
}
.cta-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.cta-heading {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 36px);
    color: #fff;
    line-height: 1.1;
}
.cta-heading em {
    font-style: italic;
}
.cta-btns {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.cb {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.cb svg {
    width: 13px;
    height: 13px;
}
.cb.white {
    background: #fff;
    color: var(--accent);
}
.cb.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.cb.outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.cb.outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .ph-inner {
        grid-template-columns: 1fr;
        padding: 40px 20px 36px;
    }
    .ph-right {
        display: none;
    }
    .filter-inner {
        padding: 0;
        flex-wrap: nowrap;
        gap: 0;
    }
    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 10px 16px;
        gap: 6px;
        flex: 1;
        min-width: 0;
    }
    .filter-chips::-webkit-scrollbar {
        display: none;
    }
    .fchip {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    .filter-right {
        padding: 10px 12px 10px 0;
        flex-shrink: 0;
        border-left: 1px solid var(--border);
        align-self: stretch;
        align-items: center;
    }
    .result-count {
        display: none;
    }
    .featured-wrap {
        padding: 24px 20px 0;
    }
    .featured-card {
        grid-template-columns: 1fr;
    }
    .featured-card .fc-right {
        min-height: 200px;
    }
    .fc-mock-body {
        grid-template-columns: 1fr 1fr;
    }
    .fc-mock-list {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .projects-inner {
        padding: 0 20px;
    }
    .proj-layout {
        grid-template-columns: 1fr;
    }
    .proj-sidebar {
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .proj-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gh-activity-section {
        padding: 0 20px 24px;
    }
    .tools-inner,
    .proj-testi-inner {
        padding: 0 20px;
    }
    .tools-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ss-inner {
        grid-template-columns: 1fr 1fr;
    }
    .cta-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 20px;
    }
}
@media (max-width: 600px) {
    .proj-grid {
        grid-template-columns: 1fr;
    }
    .proj-sidebar {
        grid-template-columns: 1fr;
    }
    .gh-heatmap {
        grid-template-columns: repeat(26, 1fr);
    }
    .gh-activity-stats {
        flex-wrap: wrap;
        gap: 16px;
    }
    .tools-grid {
        grid-template-columns: 1fr;
    }
    .ss-inner {
        grid-template-columns: 1fr 1fr;
    }
    .featured-card .fc-left {
        padding: 24px 20px;
    }
    .featured-card .fc-right {
        min-height: 180px;
        padding: 16px;
    }
    .fc-mock-body {
        grid-template-columns: 1fr 1fr;
    }
    .fc-mock-list {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .fc-mock-chart {
        grid-column: 1 / -1;
    }
    .featured-card .fc-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .featured-card .fc-links {
        width: 100%;
    }
    .featured-card .fc-link {
        flex: 1;
        justify-content: center;
    }
}

/* ══ PROJECT-SINGLE PAGE STYLES ══ */
/* SIDE NAV */
#sidenav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sn-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.25s;
    position: relative;
}
.sn-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bg);
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.sn-dot:hover::after {
    opacity: 1;
}
.sn-dot.active {
    background: var(--accent);
    transform: scale(1.5);
}
.sn-dot:hover:not(.active) {
    background: var(--muted);
}

/* HERO */
.hero {
    padding-top: 58px;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
    z-index: 1;
}
.hero-strip {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 36px;
    overflow: hidden;
}
.hs-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hs-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}
.hs-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.hs-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}
.hs-num {
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: -1px;
}

.hero-body {
    display: grid;
    grid-template-columns: 1fr 420px;
    border-top: 2px solid var(--ink);
}

/* LEFT */
.hb-left {
    background: var(--ink);
    color: var(--bg);
    padding: 52px 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.hb-left::before {
    content: "01";
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-family: "DM Serif Display", serif;
    font-size: 280px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    letter-spacing: -12px;
}
.hl-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hl-eyebrow span {
    width: 24px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.hl-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(44px, 5.5vw, 76px);
    line-height: 0.9;
    letter-spacing: -2.5px;
    color: var(--bg);
    margin-bottom: 6px;
}
.hl-title em {
    font-style: italic;
    color: var(--accent);
}
.hl-sub {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 28px;
    margin-left: 2px;
}
.hl-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 36px;
}
.hl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 36px;
}
.hl-pill {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
}
.hl-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.hl-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ha {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.ha svg {
    width: 12px;
    height: 12px;
}
.ha.fill {
    background: var(--accent);
    color: #fff;
}
.ha.fill:hover {
    background: #b53508;
}
.ha.line {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.65);
}
.ha.line:hover {
    background: rgba(255, 255, 255, 0.06);
}
.hl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hs-item {
    text-align: center;
    padding: 0 4px;
}
.hs-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.hs-n {
    font-family: "DM Serif Display", serif;
    font-size: 26px;
    line-height: 1;
    color: var(--bg);
}
.hs-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.hs-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 3px;
}

/* RIGHT mockup */
.hb-right {
    border-left: 2px solid var(--ink);
    background: var(--card);
    display: flex;
    flex-direction: column;
    transition:
        background 0.35s,
        border-color 0.35s;
    position: relative;
    overflow: hidden;
}
#rightCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.4;
}
.right-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 28px 24px;
}
.browser-mock {
    width: 100%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 28px 60px var(--shadow);
    transition:
        background 0.35s,
        border-color 0.35s;
}
.bm-bar {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.bm-dots {
    display: flex;
    gap: 4px;
}
.bm-d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.bm-d:nth-child(1) {
    background: #ff5f57;
}
.bm-d:nth-child(2) {
    background: #febc2e;
}
.bm-d:nth-child(3) {
    background: #28c840;
}
.bm-addr {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 3px 10px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--muted);
    transition:
        background 0.35s,
        border-color 0.35s;
}
.bm-body {
    padding: 14px;
}
.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.dash-title-mock {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.35s;
}
.dash-topbtn {
    display: flex;
    gap: 4px;
}
.dtb {
    width: 42px;
    height: 14px;
    border-radius: 2px;
    background: var(--border);
}
.dtb:first-child {
    background: var(--accent);
    width: 56px;
}
.dash-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.dc {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 7px 8px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.dc-n {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.35s;
}
.dc-l {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1px;
}
.dc-g {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    color: var(--green);
    margin-top: 2px;
}
.dash-chart {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.dc-label {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
}
.cb-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: var(--border);
}
.cb-bar.hi {
    background: var(--accent);
    opacity: 0.75;
}
.dash-table {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.dt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.35s;
}
.dt-row:last-child {
    border-bottom: none;
}
.dt-av {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    opacity: 0.6;
}
.dt-name {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    flex: 1;
    color: var(--ink);
    transition: color 0.35s;
}
.dt-plan {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    color: var(--muted);
}
.dt-badge {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(26, 122, 74, 0.12);
    border: 1px solid rgba(26, 122, 74, 0.25);
    color: var(--green);
}
.right-foot {
    border-top: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.35s;
    flex-shrink: 0;
}
.rf-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.rf-btns {
    display: flex;
    gap: 6px;
}
.rfb {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rfb svg {
    width: 10px;
    height: 10px;
}
.rfb.dark {
    background: var(--ink);
    color: var(--bg);
}
.rfb.dark:hover {
    background: var(--accent);
}
.rfb.ghost {
    border: 1px solid var(--border);
    color: var(--muted);
}
.rfb.ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* MARQUEE */
.marquee {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 11px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: background 0.35s;
}
.marquee-t {
    display: flex;
    white-space: nowrap;
    animation: roll 20s linear infinite;
}
.marquee-t span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 28px;
    color: rgba(255, 255, 255, 0.35);
}
.marquee-t span.acc {
    color: var(--accent);
}

/* CONTENT */
.content {
    position: relative;
    z-index: 1;
}
.sec-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}
.sec-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-l::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.sec-t {
    font-family: "DM Serif Display", serif;
    font-size: clamp(30px, 3.5vw, 46px);
    letter-spacing: -0.8px;
    line-height: 1;
}
.sec-t em {
    font-style: italic;
}

/* OVERVIEW */
.ov-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}
.ov-body p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 18px;
}
.ov-body p:last-child {
    margin-bottom: 0;
}
.ov-body strong {
    color: var(--ink);
    font-weight: 600;
}
.pull-quote {
    border-left: 3px solid var(--accent);
    padding: 20px 22px;
    background: var(--card);
    border-radius: 0 6px 6px 0;
    margin: 28px 0;
    font-family: "DM Serif Display", serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
    transition: background 0.35s;
}
.ov-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.si-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 16px;
    transition:
        border-color 0.15s,
        background 0.35s;
}
.si-card:hover {
    border-color: var(--ink);
}
.si-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}
.si-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.si-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.si-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    transition: all 0.15s;
}
.si-tag:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.si-links {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.si-link {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding: 9px 11px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    transition: all 0.15s;
}
.si-link:hover {
    border-color: var(--ink);
    background: var(--bg);
}
.si-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.si-arr {
    margin-left: auto;
    opacity: 0.25;
    transition: opacity 0.15s;
}
.si-link:hover .si-arr {
    opacity: 1;
}

/* METRICS */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.mc {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 26px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.22s;
}
.mc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s;
}
.mc:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
}
.mc:hover::after {
    transform: scaleX(1);
}
.mc-ico {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: all 0.15s;
}
.mc-ico svg {
    width: 18px;
    height: 18px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}
.mc:hover .mc-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.mc:hover .mc-ico svg {
    stroke: var(--bg);
}
.mc-n {
    font-family: "DM Serif Display", serif;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 4px;
}
.mc-n sup {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--accent);
}
.mc-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* TECH STACK — horizontal scroll */
.stack-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
    margin: 0 -36px;
    padding-left: 36px;
    scrollbar-width: none;
}
.stack-scroll::-webkit-scrollbar {
    display: none;
}
.stack-row {
    display: flex;
    gap: 10px;
    width: max-content;
    padding-right: 36px;
}
.sk-chip {
    flex-shrink: 0;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    min-width: 170px;
}
.sk-chip:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}
.sk-ico {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.sk-ico svg {
    width: 18px;
    height: 18px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}
.sk-chip:hover .sk-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.sk-chip:hover .sk-ico svg {
    stroke: var(--bg);
}
.sk-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.sk-role {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.sk-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 1px;
    border: 1px solid var(--border);
    color: var(--muted);
    display: inline-block;
}
.sk-badge.p {
    border-color: rgba(212, 65, 11, 0.3);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.04);
}

/* FEATURES */
.feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.feat-item {
    padding: 22px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: background 0.15s;
}
.feat-item:nth-child(even) {
    border-right: none;
}
.feat-item:nth-last-child(-n + 2) {
    border-bottom: none;
}
.feat-item:hover {
    background: var(--card);
}
.fi-ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fi-ico svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}
.feat-item:hover .fi-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.feat-item:hover .fi-ico svg {
    stroke: var(--bg);
}
.fi-t {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}
.fi-d {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

/* CHALLENGES — problem/solution */
.ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ps-card {
    border-radius: 6px;
    padding: 22px;
    border: 1.5px solid var(--border);
    transition: all 0.2s;
}
.ps-card:hover {
    border-color: var(--ink);
}
.ps-card.problem {
    background: rgba(180, 83, 9, 0.04);
    border-color: rgba(180, 83, 9, 0.2);
}
.ps-card.solution {
    background: rgba(26, 122, 74, 0.04);
    border-color: rgba(26, 122, 74, 0.2);
}
.ps-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}
.ps-ico {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ps-ico svg {
    width: 14px;
    height: 14px;
}
.ps-card.problem .ps-ico {
    background: rgba(180, 83, 9, 0.1);
}
.ps-card.problem .ps-ico svg {
    stroke: var(--amber);
}
.ps-card.solution .ps-ico {
    background: rgba(26, 122, 74, 0.1);
}
.ps-card.solution .ps-ico svg {
    stroke: var(--green);
}
.ps-type {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.ps-card.problem .ps-type {
    color: var(--amber);
}
.ps-card.solution .ps-type {
    color: var(--green);
}
.ps-num {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
}
.ps-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
}
.ps-body {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65;
}

/* TIMELINE */
.tl-wrap {
    position: relative;
    padding-left: 20px;
}
.tl-wrap::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--border);
}
.tl-item {
    position: relative;
    padding: 0 0 28px 26px;
}
.tl-item:last-child {
    padding-bottom: 0;
}
.tl-item::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    transition: all 0.2s;
    z-index: 1;
}
.tl-item:hover::before,
.tl-item.done::before {
    background: var(--green);
    border-color: var(--green);
}
.tl-week {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.tl-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.tl-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}
.tl-chips {
    display: flex;
    gap: 5px;
    margin-top: 7px;
    flex-wrap: wrap;
}
.tl-chip {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}

/* SCREENS */
.screens-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.screen-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.22s;
}
.screen-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 14px 36px var(--shadow);
}
.sc-vis {
    height: 175px;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.sc-vis::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px
    );
    background-size: 18px 18px;
}
.sc-vis svg {
    width: 44px;
    height: 44px;
    stroke: rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}
.sc-foot {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    transition: border-color 0.35s;
}
.sc-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
}
.sc-zoom {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.sc-zoom svg {
    width: 10px;
    height: 10px;
    stroke: var(--muted);
}
.screen-card:hover .sc-zoom {
    background: var(--ink);
    border-color: var(--ink);
}
.screen-card:hover .sc-zoom svg {
    stroke: var(--bg);
}

/* NEXT PROJECT */
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 38px);
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* RESPONSIVE */
@media (max-width: 960px) {
    nav {
        padding: 0 20px;
    }
    .n-crumb {
        display: none;
    }
    .hero-body {
        grid-template-columns: 1fr;
    }
    .hb-left {
        padding: 40px 24px;
    }
    .hb-right {
        border-left: none;
        border-top: 2px solid var(--ink);
        min-height: 340px;
    }
    .wrap {
        padding: 0 20px;
    }
    .ov-grid {
        grid-template-columns: 1fr;
    }
    .metrics-row {
        grid-template-columns: 1fr 1fr;
    }
    .stack-scroll {
        margin: 0 -20px;
        padding-left: 20px;
    }
    .stack-row {
        padding-right: 20px;
    }
    .feat-grid {
        grid-template-columns: 1fr;
    }
    .feat-item {
        border-right: none !important;
    }
    .feat-item:last-child {
        border-bottom: none;
    }
    .ps-grid {
        grid-template-columns: 1fr;
    }
    .screens-grid {
        grid-template-columns: 1fr;
    }
    #sidenav {
        display: none;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .hb-left::before {
        font-size: 180px;
    }
}
@media (max-width: 600px) {
    .metrics-row {
        grid-template-columns: 1fr 1fr;
    }
    .hl-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .hs-item:nth-child(2) {
        border-right: none;
    }
}

/* ══ BLOGS PAGE STYLES ══ */
/* SIDENAV */
#sidenav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sn-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.25s;
    position: relative;
}
.sn-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bg);
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.sn-dot:hover::after {
    opacity: 1;
}
.sn-dot.active {
    background: var(--accent);
    transform: scale(1.5);
}
.sn-dot:hover:not(.active) {
    background: var(--muted);
}

/* PAGE HEADER — compact, replaces full hero */
.page-header {
    position: relative;
    z-index: 1;
    border-bottom: 2px solid var(--ink);
}
.ph-accent-bar {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 36px;
}
.ph-ab-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-ab-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.ph-ab-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.ph-ab-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    animation: blink 2s infinite;
}
.ph-ab-num {
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: -1px;
}
/* main header row */
.ph-main {
    background: var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 28px 36px 24px;
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.ph-main::before {
    content: '"';
    position: absolute;
    right: -10px;
    top: -60px;
    font-family: "DM Serif Display", serif;
    font-size: 260px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
}
.ph-left {
}
.ph-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-eyebrow span {
    width: 20px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.ph-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 0.92;
    letter-spacing: -2.5px;
    color: var(--bg);
}
.ph-title em {
    font-style: italic;
    color: var(--accent);
}
.ph-desc {
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.7;
    margin-top: 12px;
    max-width: 520px;
}
.ph-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}
/* stats inline */
.ph-stats {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    overflow: hidden;
}
.ph-stat {
    text-align: center;
    padding: 10px 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.ph-stat:last-child {
    border-right: none;
}
.ph-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    line-height: 1;
    color: #f0ede6;
}
.ph-stat-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.ph-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 3px;
}
/* pills row */
.ph-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ph-pill {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.18s;
    text-decoration: none;
}
.ph-pill:hover,
.ph-pill.on {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.08);
}
/* cta buttons */
.ph-actions {
    display: flex;
    gap: 7px;
}
.ha {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.ha svg {
    width: 11px;
    height: 11px;
}
.ha.fill {
    background: var(--accent);
    color: #fff;
}
.ha.fill:hover {
    background: #b53508;
}
.ha.line {
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.55);
}
.ha.line:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* MARQUEE */
.marquee {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.mq-t {
    display: flex;
    white-space: nowrap;
    animation: roll 28s linear infinite;
}
.mq-t span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 26px;
    color: rgba(255, 255, 255, 0.3);
}
.mq-t span.acc {
    color: var(--accent);
}

/* SHARED */
.content {
    position: relative;
    z-index: 1;
}
.sec-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}
.sec-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.sec-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(30px, 3.5vw, 48px);
    letter-spacing: -0.8px;
    line-height: 0.95;
}
.sec-title em {
    font-style: italic;
}
.sec-note {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.3px;
    text-align: right;
    max-width: 380px;
    line-height: 1.6;
}

/* FILTER BAR */
.fbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 44px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}
.fbar-lbl {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 2px;
}
.ftag {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 13px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
    background: none;
    transition: all 0.18s;
}
.ftag:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.ftag.on {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.05);
}
.fsearch {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 3px;
    padding: 5px 13px;
    transition: border-color 0.18s;
}
.fsearch:focus-within {
    border-color: var(--ink);
}
.fsearch svg {
    width: 12px;
    height: 12px;
    stroke: var(--muted);
    flex-shrink: 0;
}
.fsearch input {
    background: none;
    border: none;
    outline: none;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--ink);
    width: 150px;
}
.fsearch input::placeholder {
    color: var(--muted);
}

/* FEATURED CARD */
.feat-card {
    display: grid;
    grid-template-columns: 1fr 400px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.28s;
    text-decoration: none;
    color: inherit;
}
.feat-card:hover {
    border-color: var(--ink);
    box-shadow: 0 20px 60px var(--shadow);
    transform: translateY(-3px);
}
.fc-left {
    background: var(--ink);
    min-height: 380px;
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.fc-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px
    );
    background-size: 18px 18px;
}
.fc-bg {
    position: absolute;
    bottom: -30px;
    right: -20px;
    font-family: "DM Serif Display", serif;
    font-size: 220px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    letter-spacing: -10px;
    pointer-events: none;
}
.fc-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--accent);
    color: #fff;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.fc-category {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.fc-title {
    font-family: "DM Serif Display", serif;
    font-size: 32px;
    letter-spacing: -0.8px;
    line-height: 1.08;
    color: var(--bg);
    position: relative;
    z-index: 1;
}
.fc-title em {
    font-style: italic;
    color: var(--accent);
}
.fc-reading {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.fc-rt {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.fc-rt svg {
    width: 11px;
    height: 11px;
    stroke: rgba(255, 255, 255, 0.3);
}
.fc-right {
    background: var(--card);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.35s;
}
.fc-excerpt {
    font-size: 15.5px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 22px;
}
.fc-excerpt strong {
    color: var(--ink);
    font-weight: 600;
}
.fc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 22px;
}
.fc-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    transition: all 0.15s;
}
.feat-card:hover .fc-tag {
    border-color: rgba(212, 65, 11, 0.2);
    color: var(--accent);
}
.fc-toc {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 20px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.fc-toc-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.fc-toc ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fc-toc ul li {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px;
}
.fc-toc ul li::before {
    content: "";
    width: 8px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
    flex-shrink: 0;
}
.fc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    transition: border-color 0.35s;
}
.fc-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s;
}
.fc-av span {
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: var(--bg);
    font-style: italic;
}
.fc-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}
.fc-date {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.fc-arrow {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}
.fc-arrow svg {
    width: 12px;
    height: 12px;
    stroke: var(--muted);
    transition: stroke 0.18s;
}
.feat-card:hover .fc-arrow {
    background: var(--ink);
    border-color: var(--ink);
}
.feat-card:hover .fc-arrow svg {
    stroke: var(--bg);
}

/* feat-card dark mode */
[data-theme="dark"] .fc-left {
    background: #1c1c1a;
}
[data-theme="dark"] .fc-title {
    color: #f0ede6;
}
[data-theme="dark"] .fc-category {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .fc-rt {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .fc-rt svg {
    stroke: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .fc-toc {
    background: #161614;
    border-color: #2a2a28;
}

/* LATEST MIX */
.mix-layout {
    display: grid;
    grid-template-columns: 1fr 296px;
    gap: 32px;
    align-items: start;
}

/* POST GRID */
.pgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.pcard {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: all 0.24s;
}
.pcard::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s;
}
.pcard:hover {
    border-color: var(--ink);
    transform: translateY(-6px);
    box-shadow: 0 16px 44px var(--shadow);
}
.pcard:hover::after {
    transform: scaleX(1);
}
.pc-vis {
    height: 158px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pc-vis svg.icon {
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 1;
}
.pc-vis-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 16px 16px;
}
.pc-glyph {
    position: absolute;
    bottom: -18px;
    right: -4px;
    font-family: "DM Serif Display", serif;
    font-size: 100px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    letter-spacing: -4px;
    pointer-events: none;
}
.pc-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 2px;
    color: #fff;
    z-index: 2;
}
.pc-body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pc-title {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--ink);
    transition: color 0.2s;
}
.pc-title em {
    font-style: italic;
}
.pc-excerpt {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.68;
    flex: 1;
}
.pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pc-chip {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}
.pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    transition: border-color 0.35s;
}
.pc-date {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}
.pc-min {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.pc-min svg {
    width: 9px;
    height: 9px;
}

/* SIDEBAR */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sb-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 18px;
    transition:
        border-color 0.15s,
        background 0.35s;
}
.sb-lbl {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sb-lbl::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}
.sb-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.sb-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s;
}
.sb-av span {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    color: var(--bg);
    font-style: italic;
}
.sb-aname {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    letter-spacing: -0.3px;
}
.sb-aname em {
    font-style: italic;
    color: var(--accent);
}
.sb-abio {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
}
.sb-alink {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.15s;
    margin-top: 2px;
}
.sb-alink:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.sb-post {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}
.sb-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sb-post:first-of-type {
    padding-top: 0;
}
.sb-post:hover .sb-pt {
    color: var(--accent);
}
.sb-pn {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    line-height: 1;
    color: var(--border);
    letter-spacing: -1px;
    flex-shrink: 0;
    width: 28px;
}
.sb-pb {
}
.sb-pc {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 3px;
}
.sb-pt {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    transition: color 0.15s;
}
.sb-pm {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
}
.sb-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sb-tp {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.15s;
}
.sb-tp:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* ARCHIVE LIST */
.plist {
    display: flex;
    flex-direction: column;
}
.pli {
    display: grid;
    grid-template-columns: 56px 1fr 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.18s;
}
.pli:first-child {
    border-top: 1px solid var(--border);
}
.pli:hover .pli-num {
    color: var(--accent);
}
.pli:hover .pli-title {
    color: var(--accent);
}
.pli-num {
    font-family: "DM Serif Display", serif;
    font-size: 34px;
    line-height: 1;
    color: var(--border);
    letter-spacing: -2px;
    transition: color 0.18s;
}
.pli-main {
}
.pli-cat {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}
.pli-title {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.4px;
    line-height: 1.15;
    transition: color 0.18s;
}
.pli-title em {
    font-style: italic;
}
.pli-exc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 320px;
}
.pli-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.pli-date {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}
.pli-min {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}
.pli-arrow {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    flex-shrink: 0;
}
.pli-arrow svg {
    width: 11px;
    height: 11px;
    stroke: var(--muted);
    transition: stroke 0.18s;
}
.pli:hover .pli-arrow {
    background: var(--ink);
    border-color: var(--ink);
}
.pli:hover .pli-arrow svg {
    stroke: var(--bg);
}
.load-more {
    text-align: center;
    padding-top: 40px;
}
.lm-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 24px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    background: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s;
}
.lm-btn:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.lm-btn svg {
    width: 12px;
    height: 12px;
}

/* NEWSLETTER */
.nl-wrap {
    background: #1a1a18;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    transition: background 0.35s;
}
.nl-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.038) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
    pointer-events: none;
}
.nl-inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 0;
    position: relative;
    z-index: 1;
}
.nl-left {
    padding: 44px 44px;
}
.nl-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nl-eyebrow::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--accent);
}
.nl-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: -0.8px;
    line-height: 1;
    color: #f0ede6;
    margin-bottom: 12px;
}
.nl-title em {
    font-style: italic;
    color: var(--accent);
}
.nl-desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1.7;
    max-width: 380px;
    margin-bottom: 24px;
}
.nl-feats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nl-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.3);
}
.nl-feat svg {
    width: 12px;
    height: 12px;
    stroke: var(--green);
    flex-shrink: 0;
}
.nl-right {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nl-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.nl-input {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 12px 16px;
    color: #f0ede6;
    outline: none;
    transition: border-color 0.18s;
}
.nl-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}
.nl-input:focus {
    border-color: rgba(255, 255, 255, 0.28);
}
.nl-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 2px;
    background: var(--accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s;
}
.nl-btn:hover {
    background: #b53508;
}
.nl-btn svg {
    width: 11px;
    height: 11px;
}
.nl-note {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.16);
    text-align: center;
}
.nl-recent {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nl-rlbl {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.18);
    margin-bottom: 12px;
}
.nl-ri {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}
.nl-ri:last-child {
    margin-bottom: 0;
}
.nl-ri-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.nl-ri-txt {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.4;
}

/* TOPICS */
.topics-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tp {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tp:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.tp.hot {
    border-color: rgba(212, 65, 11, 0.25);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.04);
}
.tp-count {
    font-family: "DM Serif Display", serif;
    font-size: 12px;
    font-style: italic;
    color: var(--border);
    transition: color 0.18s;
    line-height: 1;
}
.tp:hover .tp-count,
.tp.hot .tp-count {
    color: var(--muted);
}

/* NEXT / FOOTER */
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 54px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 40px);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* RESPONSIVE */
@media (max-width: 1020px) {
    .mix-layout {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}
@media (max-width: 960px) {
    nav {
        padding: 0 20px;
    }
    .n-crumb {
        display: none;
    }
    .ph-main {
        grid-template-columns: 1fr;
        padding: 22px 20px 20px;
    }
    .ph-right {
        align-items: flex-start;
    }
    .ph-accent-bar {
        padding: 9px 20px;
    }
    .wrap {
        padding: 0 20px;
    }
    .feat-card {
        grid-template-columns: 1fr;
    }
    .fc-left {
        min-height: 200px;
    }
    .nl-inner {
        grid-template-columns: 1fr;
    }
    .nl-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 28px 36px;
    }
    .pli {
        grid-template-columns: 50px 1fr auto;
    }
    .pli-meta {
        display: none;
    }
    .sidebar {
        grid-template-columns: 1fr;
    }
    #sidenav {
        display: none;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
}
@media (max-width: 600px) {
    .pgrid {
        grid-template-columns: 1fr;
    }
    .pli {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 8px;
        padding: 18px 0;
    }
    .pli-num {
        display: none;
    }
    .pli-main {
        width: 100%;
    }
    .pli-title {
        font-size: 18px;
    }
    .pli-exc {
        max-width: 100%;
        font-size: 13px;
    }
    .pli-meta {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }
    .pli-arrow {
        display: none;
    }
    .ph-stats {
        flex-wrap: wrap;
    }
    .ph-stat {
        min-width: 80px;
    }
    .fbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .fsearch {
        display: none;
    }
}

/* ══ BLOG-SINGLE PAGE STYLES ══ */
/* ── ARTICLE HEADER ── */
.art-header {
    padding-top: 58px;
    background: var(--ink);
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.art-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
}
/* accent strip */
.art-strip {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 36px;
    position: relative;
    z-index: 1;
}
.as-cat {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 10px;
}
.as-cat::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.as-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.as-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}
/* header body */
.art-header-body {
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 36px 40px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: end;
}
.ah-left {
}
.ah-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.ah-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.4);
}
.ah-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(32px, 4.5vw, 58px);
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--bg);
    margin-bottom: 16px;
}
.ah-title em {
    font-style: italic;
    color: var(--accent);
}
.ah-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.7;
    max-width: 580px;
}
/* author row */
.ah-author-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ah-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ah-av-i {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    color: #fff;
    font-style: italic;
}
.ah-info {
    flex: 1;
}
.ah-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bg);
}
.ah-date {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
}
.ah-stats {
    display: flex;
    gap: 14px;
}
.ah-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}
.ah-stat svg {
    width: 11px;
    height: 11px;
    stroke: rgba(255, 255, 255, 0.3);
}
/* right: quick info card */
.ah-right {
}
.ah-info-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 18px 20px;
}
.aic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aic-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.aic-row:first-child {
    padding-top: 0;
}
.aic-label {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
}
.aic-val {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
}
.aic-val.green {
    color: var(--green);
}

/* ── MAIN LAYOUT ── */
.art-layout {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 36px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ── ARTICLE BODY ── */
.art-body {
    padding: 52px 0 64px;
}

/* typography */
.art-body h2 {
    font-family: "DM Serif Display", serif;
    font-size: 28px;
    letter-spacing: -0.6px;
    line-height: 1.1;
    margin: 44px 0 16px;
    color: var(--ink);
}
.art-body h2 em {
    font-style: italic;
}
.art-body h3 {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.3px;
    line-height: 1.15;
    margin: 32px 0 12px;
    color: var(--ink);
}
.art-body p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 20px;
}
.art-body p:last-child {
    margin-bottom: 0;
}
.art-body strong {
    color: var(--ink);
    font-weight: 600;
}
.art-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.15s;
}
.art-body a:hover {
    opacity: 0.75;
}

/* intro — first paragraph bigger */
.art-intro {
    font-size: 18px !important;
    line-height: 1.78 !important;
    color: var(--ink) !important;
    font-weight: 300;
}

/* pull quote */
.pull-quote {
    border-left: 3px solid var(--accent);
    padding: 20px 24px;
    background: var(--card);
    border-radius: 0 6px 6px 0;
    margin: 32px 0;
    font-family: "DM Serif Display", serif;
    font-size: 21px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
    transition: background 0.35s;
}

/* callout boxes */
.callout {
    border-radius: 6px;
    padding: 18px 20px;
    margin: 28px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.callout.info {
    background: rgba(43, 91, 255, 0.06);
    border: 1px solid rgba(43, 91, 255, 0.18);
}
.callout.warn {
    background: rgba(180, 83, 9, 0.06);
    border: 1px solid rgba(180, 83, 9, 0.18);
}
.callout.tip {
    background: rgba(26, 122, 74, 0.06);
    border: 1px solid rgba(26, 122, 74, 0.18);
}
.callout-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.callout.info .callout-icon {
    background: rgba(43, 91, 255, 0.12);
}
.callout.warn .callout-icon {
    background: rgba(180, 83, 9, 0.1);
}
.callout.tip .callout-icon {
    background: rgba(26, 122, 74, 0.1);
}
.callout-icon svg {
    width: 14px;
    height: 14px;
}
.callout.info .callout-icon svg {
    stroke: var(--accent2);
}
.callout.warn .callout-icon svg {
    stroke: var(--amber);
}
.callout.tip .callout-icon svg {
    stroke: var(--green);
}
.callout-body {
}
.callout-title {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.callout.info .callout-title {
    color: var(--accent2);
}
.callout.warn .callout-title {
    color: var(--amber);
}
.callout.tip .callout-title {
    color: var(--green);
}
.callout-body p {
    font-size: 13.5px !important;
    margin-bottom: 0 !important;
    line-height: 1.65 !important;
}

/* code blocks */
.code-block {
    margin: 28px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--code-border);
}
.cb-header {
    background: #252520;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
}
.cb-dots {
    display: flex;
    gap: 5px;
}
.cb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cb-dot:nth-child(1) {
    background: #ff5f57;
}
.cb-dot:nth-child(2) {
    background: #febc2e;
}
.cb-dot:nth-child(3) {
    background: #28c840;
}
.cb-lang {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
}
.cb-copy {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 3px 9px;
    transition: all 0.15s;
}
.cb-copy:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.25);
}
.cb-code {
    background: var(--code-bg);
    padding: 20px 20px;
    overflow-x: auto;
}
.cb-code pre {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    line-height: 1.75;
    color: #c9c5b8;
    margin: 0;
}
/* simple syntax colours */
.t-kw {
    color: #ff7b72;
}
.t-str {
    color: #a5d6ff;
}
.t-cmt {
    color: #4d4d45;
    font-style: italic;
}
.t-fn {
    color: #d2a8ff;
}
.t-num {
    color: #79c0ff;
}
.t-prop {
    color: #ffa657;
}
.t-op {
    color: #ff7b72;
}
.t-type {
    color: #7ee787;
}

/* inline code */
.art-body code {
    font-family: "DM Mono", monospace;
    font-size: 12.5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    color: var(--accent);
    transition:
        background 0.35s,
        border-color 0.35s;
}

/* comparison table */
.comp-table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid var(--border);
}
.comp-table th {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--ink);
    color: rgba(255, 255, 255, 0.5);
    padding: 11px 16px;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.comp-table th:last-child {
    border-right: none;
}
.comp-table td {
    font-size: 13px;
    padding: 11px 16px;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    color: var(--muted);
    vertical-align: top;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.comp-table td:first-child {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.comp-table td:last-child {
    border-right: none;
}
.comp-table tr:hover td {
    background: var(--card);
}
.td-good {
    color: var(--green) !important;
}
.td-bad {
    color: #b91c1c !important;
}
.td-mid {
    color: var(--amber) !important;
}

/* numbered steps */
.steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 28px 0;
}
.step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0;
    padding-bottom: 28px;
    position: relative;
}
.step:last-child {
    padding-bottom: 0;
}
.step::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.step:last-child::before {
    display: none;
}
.step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    flex-shrink: 0;
    transition:
        all 0.2s,
        background 0.35s;
}
.step:hover .step-num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}
.step-body {
    padding: 8px 0 0 22px;
}
.step-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--ink);
}
.step-desc {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.7;
}

/* article hr */
.art-hr {
    height: 1px;
    background: var(--border);
    margin: 40px 0;
    border: none;
}

/* tag list at bottom */
.art-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}
.art-tag {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.18s;
}
.art-tag:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* share row */
.art-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}
.art-share-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.share-btn {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    text-decoration: none;
}
.share-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--muted);
    fill: none;
    transition: stroke 0.18s;
}
.share-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
}
.share-btn:hover svg {
    stroke: var(--bg);
}

/* author bio card */
.author-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    margin-top: 48px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.ac-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s;
}
.ac-av-i {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    color: var(--bg);
    font-style: italic;
}
.ac-body {
    flex: 1;
}
.ac-name {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}
.ac-name em {
    font-style: italic;
    color: var(--accent);
}
.ac-bio {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 14px;
}
.ac-links {
    display: flex;
    gap: 7px;
}
.ac-link {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 13px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.15s;
}
.ac-link:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.ac-link.primary {
    background: var(--ink);
    color: var(--bg);
}
.ac-link.primary:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* ── SIDEBAR ── */
.art-sidebar {
    padding: 52px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 78px;
}
.sb-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 18px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.sb-lbl {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sb-lbl::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}

/* TOC */
.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.toc-item {
    display: block;
}
.toc-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
    border-left: 2px solid transparent;
    padding-left: 10px;
    margin-left: -10px;
}
.toc-link:hover {
    color: var(--ink);
}
.toc-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
}
.toc-link.h3 {
    padding-left: 22px;
    font-size: 8.5px;
    opacity: 0.8;
}

/* reading progress in sidebar */
.read-progress {
    margin-bottom: 4px;
}
.rp-bar-wrap {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.rp-bar-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.2s;
    border-radius: 2px;
}
.rp-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

/* related posts */
.rel-post {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}
.rel-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.rel-post:first-of-type {
    padding-top: 0;
}
.rel-post:hover .rp-title {
    color: var(--accent);
}
.rp-vis {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-vis svg {
    width: 18px;
    height: 18px;
}
.rp-body {
}
.rp-cat {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 3px;
}
.rp-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    transition: color 0.15s;
}
.rp-meta {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
}

/* newsletter mini */
.nl-mini {
    background: var(--ink);
    border-radius: 5px;
    padding: 18px;
    transition: background 0.35s;
}
.nl-mini-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.nl-mini-eyebrow::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}
.nl-mini-title {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    letter-spacing: -0.3px;
    color: var(--bg);
    margin-bottom: 6px;
    line-height: 1.1;
}
.nl-mini-title em {
    font-style: italic;
    color: var(--accent);
}
.nl-mini-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.6;
    margin-bottom: 14px;
}
.nl-mini-input {
    width: 100%;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 9px 12px;
    color: var(--bg);
    outline: none;
    margin-bottom: 7px;
    transition: border-color 0.18s;
}
.nl-mini-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}
.nl-mini-input:focus {
    border-color: rgba(255, 255, 255, 0.28);
}
.nl-mini-btn {
    width: 100%;
    font-family: "DM Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 9px 14px;
    border-radius: 2px;
    background: var(--accent);
    color: #fff;
    border: none;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.nl-mini-btn:hover {
    background: #b53508;
}
.nl-mini-btn svg {
    width: 10px;
    height: 10px;
}

/* ── NEXT/PREV & RELATED SECTION ── */
.art-nav-row {
    border-top: 2px solid var(--border);
    background: var(--bg);
    position: relative;
    z-index: 1;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.art-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: none;
}
.art-nav-item {
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.art-nav-item:first-child {
    border-right: 1px solid var(--border);
}
.art-nav-item:hover {
    background: var(--card);
}
.an-dir {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.an-dir svg {
    width: 10px;
    height: 10px;
    stroke: var(--muted);
}
.an-title {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--ink);
}
.an-title em {
    font-style: italic;
}
.an-meta {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
}
.art-nav-item:last-child {
    text-align: right;
}
.art-nav-item:last-child .an-dir {
    justify-content: flex-end;
}

/* related articles full width */
.related-section {
    background: var(--bg);
    position: relative;
    z-index: 1;
    border-top: 1.5px solid var(--border);
    transition: background 0.35s;
}
.related-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 52px 36px;
}
.rel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}
.rel-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rel-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.rel-title {
    font-family: "DM Serif Display", serif;
    font-size: 28px;
    letter-spacing: -0.6px;
    line-height: 1;
}
.rel-title em {
    font-style: italic;
}
.rel-link {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}
.rel-link svg {
    width: 11px;
    height: 11px;
}
.rel-link:hover {
    color: var(--ink);
}
.rel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.rel-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.22s;
    position: relative;
}
.rel-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s;
}
.rel-card:hover {
    border-color: var(--ink);
    transform: translateY(-5px);
    box-shadow: 0 14px 40px var(--shadow);
}
.rel-card:hover::after {
    transform: scaleX(1);
}
.rc-vis {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.rc-vis-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 14px 14px;
}
.rc-vis svg.ico {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1;
}
.rc-cat {
    position: absolute;
    top: 11px;
    left: 11px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    color: #fff;
    z-index: 2;
}
.rc-body {
    padding: 16px 16px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rc-title {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--ink);
}
.rc-title em {
    font-style: italic;
}
.rc-excerpt {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
}
.rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    transition: border-color 0.35s;
}
.rc-date {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--muted);
}
.rc-min {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--muted);
}

/* FOOTER */
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(20px, 2.8vw, 36px);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .art-header-body {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 20px 24px;
    }
    .ah-right {
        display: none;
    }
    .art-strip {
        padding: 9px 20px;
    }
    .art-layout {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    .art-sidebar {
        display: none;
    }
    .art-nav-inner {
        padding: 0 20px;
    }
    .related-inner {
        padding: 36px 20px;
    }
    .rel-grid {
        grid-template-columns: 1fr 1fr;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 20px;
    }
    footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
}
@media (max-width: 600px) {
    .art-nav-inner {
        grid-template-columns: 1fr;
    }
    .art-nav-item:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .rel-grid {
        grid-template-columns: 1fr;
    }
}

/* ══ PRODUCTS PAGE STYLES ══ */
/* PAGE HEADER */
.page-header {
    border-bottom: 2px solid var(--ink);
    position: relative;
    z-index: 1;
}
.ph-strip {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 36px;
}
.ph-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.ph-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.ph-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}
.ph-num {
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: -1px;
}
.ph-body {
    background: var(--ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    border-top: 0;
    transition: background 0.35s;
}
.ph-left {
    padding: 44px 52px 40px;
    position: relative;
    overflow: hidden;
}
.ph-left::before {
    content: "∞";
    position: absolute;
    right: -20px;
    top: -40px;
    font-family: "DM Serif Display", serif;
    font-size: 300px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
}
.ph-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-eyebrow span {
    width: 24px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.ph-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 0.9;
    letter-spacing: -2.5px;
    color: var(--bg);
    margin-bottom: 14px;
}
.ph-title em {
    font-style: italic;
    color: var(--accent);
}
.ph-desc {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.78;
    max-width: 460px;
    margin-bottom: 28px;
}
.ph-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ha {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.ha svg {
    width: 11px;
    height: 11px;
}
.ha.fill {
    background: var(--accent);
    color: #fff;
}
.ha.fill:hover {
    background: #b53508;
}
.ha.line {
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.55);
}
.ha.line:hover {
    background: rgba(255, 255, 255, 0.05);
}
.ph-right {
    border-left: 2px solid rgba(255, 255, 255, 0.07);
    padding: 44px 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* stats grid */
.ph-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
.ph-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    padding: 16px 18px;
}
.ph-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 32px;
    line-height: 1;
    color: #f0ede6;
}
.ph-stat-n sup {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--accent);
}
.ph-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}
/* category pills */
.ph-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ph-cat {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.18s;
}
.ph-cat.on,
.ph-cat:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.08);
}

/* MARQUEE */
.marquee {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.mq-t {
    display: flex;
    white-space: nowrap;
    animation: roll 28s linear infinite;
}
.mq-t span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 26px;
    color: rgba(255, 255, 255, 0.3);
}
.mq-t span.acc {
    color: var(--accent);
}

/* FILTER BAR */
.fbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}
.fbar-lbl {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
}
.ftag {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 13px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
    background: none;
    transition: all 0.18s;
}
.ftag:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.ftag.on {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.05);
}
.fsearch {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 3px;
    padding: 5px 13px;
    transition: border-color 0.18s;
}
.fsearch:focus-within {
    border-color: var(--ink);
}
.fsearch svg {
    width: 12px;
    height: 12px;
    stroke: var(--muted);
}
.fsearch input {
    background: none;
    border: none;
    outline: none;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--ink);
    width: 150px;
}
.fsearch input::placeholder {
    color: var(--muted);
}

/* ══ FEATURED PRODUCT — BIG CARD ══ */
.feat-product {
    display: grid;
    grid-template-columns: 1fr 400px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.28s;
    margin-bottom: 48px;
}
.feat-product:hover {
    border-color: var(--ink);
    box-shadow: 0 20px 60px var(--shadow);
}
.fp-vis {
    background: var(--ink);
    min-height: 360px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.fp-vis::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
}
/* animated icon bg */
.fp-icon-bg {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(212, 65, 11, 0.06);
    border: 1px solid rgba(212, 65, 11, 0.1);
}
.fp-icon-bg2 {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(212, 65, 11, 0.04);
    border: 1px solid rgba(212, 65, 11, 0.08);
}
.fp-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--accent);
    color: #fff;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    position: relative;
    z-index: 1;
}
.fp-badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.5s infinite;
}
.fp-vis-icon {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.fp-vis-icon svg {
    width: 34px;
    height: 34px;
    stroke: rgba(255, 255, 255, 0.7);
}
.fp-vis-bottom {
    position: relative;
    z-index: 1;
}
.fp-vis-name {
    font-family: "DM Serif Display", serif;
    font-size: 36px;
    letter-spacing: -0.8px;
    line-height: 1;
    color: var(--bg);
    margin-bottom: 6px;
}
.fp-vis-name em {
    font-style: italic;
    color: var(--accent);
}
.fp-vis-cat {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}
.fp-body {
    background: var(--card);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.35s;
}
.fp-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.82;
    margin-bottom: 20px;
}
.fp-desc strong {
    color: var(--ink);
    font-weight: 600;
}
/* feature list */
.fp-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}
.fp-feat {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--muted);
}
.fp-feat svg {
    width: 14px;
    height: 14px;
    stroke: var(--green);
    flex-shrink: 0;
    margin-top: 2px;
}
/* tags */
.fp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 22px;
}
.fp-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}
/* price + cta */
.fp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    transition: border-color 0.35s;
}
.fp-price-wrap {
}
.fp-price-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
    background: rgba(26, 122, 74, 0.1);
    border: 1px solid rgba(26, 122, 74, 0.25);
    color: var(--green);
    display: inline-block;
    margin-bottom: 4px;
}
.fp-price {
    font-family: "DM Serif Display", serif;
    font-size: 28px;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--ink);
}
.fp-price sub {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    vertical-align: middle;
}
.fp-cta {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    background: var(--ink);
    color: var(--bg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
}
.fp-cta svg {
    width: 11px;
    height: 11px;
}
.fp-cta:hover {
    background: var(--accent);
}

/* ══ PRODUCT GRID ══ */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.prod-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.24s;
    position: relative;
}
.prod-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s;
}
.prod-card:hover {
    border-color: var(--ink);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px var(--shadow);
}
.prod-card:hover::after {
    transform: scaleX(1);
}
/* visual area */
.pc-vis {
    height: 170px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-shrink: 0;
}
.pc-vis img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    transition: opacity 0.3s;
}
.prod-card:hover .pc-vis img {
    opacity: 0.45;
}
.pc-vis-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        transparent 100%
    );
}
.pc-vis-content {
    position: relative;
    z-index: 3;
    padding: 12px 14px;
    width: 100%;
}
.pc-vis-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 16px 16px;
    z-index: 1;
}
.pc-glyph {
    position: absolute;
    font-family: "DM Serif Display", serif;
    font-size: 110px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.06);
    bottom: -20px;
    right: -8px;
    letter-spacing: -4px;
    pointer-events: none;
    z-index: 2;
}
.pc-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pc-icon svg {
    width: 28px;
    height: 28px;
}
/* status badge */
.pc-status {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 2px;
    z-index: 4;
}
.pc-status.live {
    background: rgba(26, 122, 74, 0.9);
    color: #fff;
}
.pc-status.beta {
    background: rgba(43, 91, 255, 0.9);
    color: #fff;
}
.pc-status.soon {
    background: rgba(26, 26, 24, 0.7);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pc-status.free {
    background: rgba(212, 65, 11, 0.9);
    color: #fff;
}
/* body */
.pc-body {
    padding: 20px 20px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-name {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.4px;
    line-height: 1.1;
    color: var(--ink);
}
.pc-name em {
    font-style: italic;
}
.pc-tagline {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: -2px;
}
.pc-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.68;
    flex: 1;
}
/* mini feature pills */
.pc-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.pc-feat {
    font-family: "DM Mono", monospace;
    font-size: 6.5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}
/* footer */
.pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    transition: border-color 0.35s;
    margin-top: auto;
    flex-shrink: 0;
}
.pc-price-info {
}
.pc-price-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}
.pc-price-val {
    font-family: "DM Serif Display", serif;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.3px;
    color: var(--ink);
}
.pc-price-val.free-clr {
    color: var(--green);
}
.pc-price-val sub {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    vertical-align: middle;
}
.pc-btn {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.18s;
    flex-shrink: 0;
}
.pc-btn svg {
    width: 10px;
    height: 10px;
}
.pc-btn.dark {
    background: var(--ink);
    color: var(--bg);
}
.pc-btn.dark:hover {
    background: var(--accent);
}
.pc-btn.outline {
    border: 1.5px solid var(--border);
    color: var(--muted);
}
.pc-btn.outline:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.pc-btn.disabled {
    background: var(--border);
    color: var(--muted);
    pointer-events: none;
}

/* ══ COMING SOON — wide list ══ */
.soon-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.soon-item {
    display: grid;
    grid-template-columns: 56px 1fr 200px auto;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}
.soon-item:first-child {
    border-top: 1px solid var(--border);
}
.soon-num {
    font-family: "DM Serif Display", serif;
    font-size: 32px;
    line-height: 1;
    color: var(--border);
    letter-spacing: -2px;
}
.soon-body {
}
.soon-cat {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.soon-name {
    font-family: "DM Serif Display", serif;
    font-size: 19px;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
.soon-name em {
    font-style: italic;
}
.soon-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 4px;
    max-width: 380px;
}
.soon-eta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.soon-eta-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}
.soon-eta-val {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--ink);
}
.soon-eta-bar {
    width: 100%;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.soon-eta-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}
.soon-notify {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 2px;
    border: 1.5px solid var(--border);
    color: var(--muted);
    background: none;
    transition: all 0.18s;
    white-space: nowrap;
}
.soon-notify:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.soon-notify.notified {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

/* ══ NEWSLETTER / NOTIFY BAND ══ */
.notify-band {
    background: var(--ink);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    transition: background 0.35s;
}
.notify-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
    pointer-events: none;
}
.nb-inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    position: relative;
    z-index: 1;
}
.nb-left {
    padding: 44px 44px;
}
.nb-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nb-eyebrow::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--accent);
}
.nb-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: -0.7px;
    line-height: 1;
    color: var(--bg);
    margin-bottom: 10px;
}
.nb-title em {
    font-style: italic;
    color: var(--accent);
}
.nb-desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.7;
    max-width: 360px;
    margin-bottom: 20px;
}
.nb-perks {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.nb-perk {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "DM Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.28);
}
.nb-perk svg {
    width: 12px;
    height: 12px;
    stroke: var(--green);
    flex-shrink: 0;
}
.nb-right {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nb-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 12px;
}
.nb-input {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 11px 15px;
    color: var(--bg);
    outline: none;
    transition: border-color 0.18s;
}
.nb-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}
.nb-input:focus {
    border-color: rgba(255, 255, 255, 0.28);
}
.nb-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 2px;
    background: var(--accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s;
}
.nb-btn:hover {
    background: #b53508;
}
.nb-btn svg {
    width: 11px;
    height: 11px;
}
.nb-note {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.15);
    text-align: center;
}
.nb-recent {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nb-rlbl {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.18);
    margin-bottom: 10px;
}
.nb-ri {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.nb-ri:last-child {
    margin-bottom: 0;
}
.nb-ri-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.nb-ri-txt {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.22);
    line-height: 1.4;
}

/* ══ TESTIMONIALS ══ */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tc {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    transition: all 0.22s;
}
.tc:hover {
    border-color: var(--ink);
}
.tc-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}
.tc-star {
    width: 12px;
    height: 12px;
    fill: var(--accent);
}
.tc-quote {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 16px;
    position: relative;
    padding-left: 16px;
}
.tc-quote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -4px;
    font-size: 28px;
    color: var(--accent);
    line-height: 1;
    font-style: normal;
}
.tc-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tc-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-av span {
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: #fff;
    font-style: italic;
}
.tc-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.tc-role {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.tc-product {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(212, 65, 11, 0.08);
    border: 1px solid rgba(212, 65, 11, 0.15);
    color: var(--accent);
}

/* FOOTER */
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 40px);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ═══ PRODUCT STATS STRIP ═══ */
.prod-stats-strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--card);
    padding: 48px 0;
}
.pss-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}
.pss-item {
    text-align: center;
}
.pss-icon {
    width: 28px;
    height: 28px;
    margin: 0 auto 12px;
    color: var(--accent);
}
.pss-icon svg {
    width: 100%;
    height: 100%;
}
.pss-val {
    font-family: "Syne", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 6px;
}
.pss-val sup {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 2px;
}
.pss-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ═══ TECH STACK ═══ */
.prod-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.pt-category {
    background: var(--card);
    padding: 28px 24px;
}
.pt-cat-label {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}
.pt-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pt-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pt-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
}
.pt-name {
    font-size: 13.5px;
    color: var(--ink);
    letter-spacing: 0.2px;
}

/* ═══ PRODUCT FAQ ═══ */
.prod-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.prod-faq-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.prod-faq-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 28px;
}
.prod-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.5;
}
.prod-faq-num {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 3px;
}
.prod-faq-a {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    padding-left: 30px;
}
.prod-faq-cta {
    background: rgba(212, 65, 11, 0.06);
    border-color: rgba(212, 65, 11, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex: 1;
}
.prod-faq-cta-text {
    font-family: "Syne", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}
.prod-faq-cta-desc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.prod-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.prod-faq-cta-btn:hover {
    background: rgba(212, 65, 11, 1);
}
.prod-faq-cta-btn svg {
    width: 16px;
    height: 16px;
}

/* RESPONSIVE */
@media (max-width: 1020px) {
    .prod-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 960px) {
    nav {
        padding: 0 20px;
    }
    .n-crumb {
        display: none;
    }
    .ph-body {
        grid-template-columns: 1fr;
    }
    .ph-left {
        padding: 32px 20px 24px;
    }
    .ph-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding: 24px 20px;
    }
    .ph-strip {
        padding: 9px 20px;
    }
    .wrap {
        padding: 0 20px;
    }
    .feat-product {
        grid-template-columns: 1fr;
    }
    .fp-vis {
        min-height: 220px;
    }
    .nb-inner {
        grid-template-columns: 1fr;
    }
    .nb-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 28px 36px;
    }
    .testi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .soon-item {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
    .soon-num,
    .soon-eta {
        display: none;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .pss-inner {
        grid-template-columns: repeat(3, 1fr);
    }
    .prod-tech-grid {
        grid-template-columns: 1fr 1fr;
    }
    .prod-faq-grid {
        grid-template-columns: 1fr;
    }
    .prod-stats-strip {
        padding: 36px 0;
    }
    footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
}
@media (max-width: 600px) {
    .prod-grid {
        grid-template-columns: 1fr;
    }
    .testi-grid {
        grid-template-columns: 1fr;
    }
    .fbar {
        flex-wrap: wrap;
    }
    .fsearch {
        display: none;
    }
    .ph-stats {
        grid-template-columns: 1fr 1fr;
    }
    .pss-inner {
        grid-template-columns: 1fr 1fr;
    }
    .prod-tech-grid {
        grid-template-columns: 1fr;
    }
}

/* ══ PRODUCT-SINGLE PAGE STYLES ══ */
#sidenav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sn-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.25s;
    position: relative;
}
.sn-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bg);
    padding: 3px 8px;
    border-radius: 2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.sn-dot:hover::after {
    opacity: 1;
}
.sn-dot.active {
    background: var(--accent);
    transform: scale(1.5);
}
.sn-dot:hover:not(.active) {
    background: var(--muted);
}
.prod-hero {
    padding-top: 58px;
    position: relative;
    z-index: 1;
    border-bottom: 2px solid var(--ink);
}
.ph-strip {
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 36px;
}
.ph-tag {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.ph-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.ph-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}
.ph-num {
    font-family: "DM Serif Display", serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.22);
}
.hero-body {
    display: grid;
    grid-template-columns: 1fr 380px;
    min-height: calc(100vh - 58px - 36px);
    border-top: 2px solid var(--ink);
}
.hb-left {
    background: var(--ink);
    padding: 48px 52px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
}
.hb-left::before {
    content: "Rs";
    position: absolute;
    right: -20px;
    top: -30px;
    font-family: "DM Serif Display", serif;
    font-size: 300px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
    font-style: italic;
}
.hl-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hl-eyebrow span {
    width: 24px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.hl-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(44px, 5.5vw, 78px);
    line-height: 0.88;
    letter-spacing: -2.5px;
    color: var(--bg);
    margin-bottom: 10px;
}
.hl-title em {
    font-style: italic;
    color: var(--accent);
}
.hl-sub {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 22px;
}
.hl-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.8;
    max-width: 500px;
    margin-bottom: 28px;
}
.hl-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 32px;
}
.hl-feat {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.38);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hl-feat svg {
    width: 9px;
    height: 9px;
    stroke: var(--green);
}
.hl-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.ha {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s;
}
.ha svg {
    width: 12px;
    height: 12px;
}
.ha.fill {
    background: var(--accent);
    color: #fff;
}
.ha.fill:hover {
    background: #b53508;
}
.ha.line {
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.55);
}
.ha.line:hover {
    background: rgba(255, 255, 255, 0.06);
}
.hl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hls {
    text-align: center;
}
.hls:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.hls-n {
    font-family: "DM Serif Display", serif;
    font-size: 26px;
    line-height: 1;
    color: var(--bg);
}
.hls-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.hls-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-top: 4px;
}
.hb-right {
    border-left: 2px solid var(--ink);
    background: var(--card);
    display: flex;
    flex-direction: column;
    transition:
        background 0.35s,
        border-color 0.35s;
    position: relative;
    overflow: hidden;
}
.hbr-img {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
.hbr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.35s;
}
[data-theme="dark"] .hbr-img img {
    opacity: 0.35;
}
.hbr-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(26, 26, 24, 0.5) 0%,
        transparent 60%
    );
}
.hbr-img-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: rgba(26, 122, 74, 0.9);
    border-radius: 2px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hbr-img-bdot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.5s infinite;
}
.hbr-rating {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hbr-stars {
    display: flex;
    gap: 2px;
}
.hbr-star {
    width: 12px;
    height: 12px;
    fill: var(--accent);
}
.hbr-score {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #fff;
    font-weight: 500;
}
.hbr-count {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}
.hbr-foot {
    border-top: 1px solid var(--border);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    transition: border-color 0.35s;
}
.hbrf-label {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.hbrf-btns {
    display: flex;
    gap: 6px;
}
.rfb {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rfb.dark {
    background: var(--ink);
    color: var(--bg);
}
.rfb.dark:hover {
    background: var(--accent);
}
.rfb.ghost {
    border: 1px solid var(--border);
    color: var(--muted);
}
.rfb.ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.marquee {
    background: var(--ink);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.mq-t {
    display: flex;
    white-space: nowrap;
    animation: roll 26s linear infinite;
}
.mq-t span {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 0 26px;
    color: rgba(255, 255, 255, 0.3);
}
.mq-t span.acc {
    color: var(--accent);
}
.content {
    position: relative;
    z-index: 1;
}
.sec-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}
.sec-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--accent);
}
.sec-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3.5vw, 44px);
    letter-spacing: -0.8px;
    line-height: 0.95;
}
.sec-title em {
    font-style: italic;
}
.sec-note {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    color: var(--muted);
    text-align: right;
    max-width: 380px;
    line-height: 1.6;
}
.main-layout {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 36px;
    display: grid;
    grid-template-columns: 1fr 294px;
    gap: 48px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.screens-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sc-card {
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    transition: all 0.22s;
    position: relative;
}
.sc-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px var(--shadow);
}
.sc-card img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    display: block;
    opacity: 0.75;
    transition: opacity 0.25s;
}
.sc-card:hover img {
    opacity: 1;
}
.sc-foot {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    transition: border-color 0.35s;
}
.sc-label {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
}
.sc-zoom {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.sc-zoom svg {
    width: 10px;
    height: 10px;
    stroke: var(--muted);
}
.sc-card:hover .sc-zoom {
    background: var(--ink);
    border-color: var(--ink);
}
.sc-card:hover .sc-zoom svg {
    stroke: var(--bg);
}
.ov-body p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 18px;
}
.ov-body strong {
    color: var(--ink);
    font-weight: 600;
}
.pull-quote {
    border-left: 3px solid var(--accent);
    padding: 18px 22px;
    background: var(--card);
    border-radius: 0 6px 6px 0;
    margin: 28px 0;
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
    transition: background 0.35s;
}
.feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.fi {
    padding: 22px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: background 0.15s;
}
.fi:nth-child(even) {
    border-right: none;
}
.fi:nth-last-child(-n + 2) {
    border-bottom: none;
}
.fi:hover {
    background: var(--card);
}
.fi-ico {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fi-ico svg {
    width: 17px;
    height: 17px;
    stroke: var(--ink);
    transition: stroke 0.15s;
}
.fi:hover .fi-ico {
    background: var(--ink);
    border-color: var(--ink);
}
.fi:hover .fi-ico svg {
    stroke: var(--bg);
}
.fi-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}
.fi-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}
.hiw-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.hiw-steps::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 22px;
    bottom: 22px;
    width: 1px;
    background: var(--border);
}
.hiw-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0;
    padding-bottom: 32px;
}
.hiw-step:last-child {
    padding-bottom: 0;
}
.hiw-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition:
        all 0.2s,
        background 0.35s;
}
.hiw-step:hover .hiw-num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}
.hiw-body {
    padding: 9px 0 0 22px;
}
.hiw-label {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}
.hiw-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}
.hiw-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.pr-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.22s;
}
.pr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px var(--shadow);
}
.pr-card.featured {
    border-color: var(--accent);
}
.pr-head {
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--border);
}
.pr-card.featured .pr-head {
    background: var(--ink);
}
.pr-badge {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    display: inline-block;
    margin-bottom: 12px;
}
.pr-name {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    letter-spacing: -0.4px;
    margin-bottom: 5px;
}
.pr-card.featured .pr-name {
    color: var(--bg);
}
.pr-sub {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.pr-card.featured .pr-sub {
    color: rgba(255, 255, 255, 0.3);
}
.pr-price-wrap {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.pr-card.featured .pr-price-wrap {
    background: var(--ink);
    border-color: rgba(255, 255, 255, 0.07);
}
.pr-price {
    font-family: "DM Serif Display", serif;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -1.5px;
}
.pr-card.featured .pr-price {
    color: var(--bg);
}
.pr-price sup {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    color: var(--accent);
    vertical-align: super;
}
.pr-per {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}
.pr-card.featured .pr-per {
    color: rgba(255, 255, 255, 0.3);
}
.pr-feats {
    padding: 18px 22px;
}
.pr-card.featured .pr-feats {
    background: var(--ink);
}
.pr-feat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--muted);
}
.pr-card.featured .pr-feat {
    color: rgba(255, 255, 255, 0.4);
}
.pr-feat:last-child {
    margin-bottom: 0;
}
.pr-feat svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 3px;
}
.pr-feat.yes svg {
    stroke: var(--green);
}
.pr-feat.no svg {
    stroke: var(--muted);
    opacity: 0.5;
}
.pr-foot {
    padding: 0 22px 22px;
}
.pr-card.featured .pr-foot {
    background: var(--ink);
}
.pr-btn {
    width: 100%;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 2px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.18s;
}
.pr-btn svg {
    width: 11px;
    height: 11px;
}
.pr-btn.solid {
    background: var(--ink);
    color: var(--bg);
}
.pr-btn.solid:hover {
    background: var(--accent);
}
.pr-btn.accent-btn {
    background: var(--accent);
    color: #fff;
}
.pr-btn.accent-btn:hover {
    background: #b53508;
}
.pr-btn.outline {
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.55);
}
.pr-btn.outline:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.faq-list {
    display: flex;
    flex-direction: column;
}
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
    border-top: 1px solid var(--border);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    background: none;
    border: none;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    gap: 14px;
    text-align: left;
    transition: color 0.15s;
}
.faq-q:hover {
    color: var(--accent);
}
.faq-q svg {
    width: 15px;
    height: 15px;
    stroke: var(--muted);
    flex-shrink: 0;
    transition:
        transform 0.25s,
        stroke 0.15s;
}
.faq-item.open .faq-q svg {
    transform: rotate(45deg);
    stroke: var(--accent);
}
.faq-a {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.75;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.32s ease,
        padding 0.32s ease;
}
.faq-item.open .faq-a {
    max-height: 200px;
    padding-bottom: 18px;
}
.testi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.tc {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    transition: all 0.22s;
}
.tc:hover {
    border-color: var(--ink);
}
.tc-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
}
.tc-star {
    width: 12px;
    height: 12px;
    fill: var(--accent);
}
.tc-quote {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 16px;
    padding-left: 16px;
    position: relative;
}
.tc-quote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -4px;
    font-size: 28px;
    color: var(--accent);
    line-height: 1;
    font-style: normal;
}
.tc-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tc-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-av span {
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    color: #fff;
    font-style: italic;
}
.tc-name {
    font-size: 13px;
    font-weight: 600;
}
.tc-role {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}
.sidebar {
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 78px;
}
.sb-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 18px;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.sb-lbl {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sb-lbl::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}
.sb-cta-card {
    background: var(--ink);
    border-color: var(--ink);
    border-radius: 6px;
    padding: 22px;
    transition: background 0.35s;
}
.sb-cta-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sb-cta-eyebrow::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--accent);
}
.sb-cta-title {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    letter-spacing: -0.4px;
    line-height: 1.1;
    color: var(--bg);
    margin-bottom: 8px;
}
.sb-cta-title em {
    font-style: italic;
    color: var(--accent);
}
.sb-cta-price {
    font-family: "DM Serif Display", serif;
    font-size: 36px;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--bg);
    margin-bottom: 4px;
}
.sb-cta-price sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
    vertical-align: super;
}
.sb-cta-per {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 16px;
}
.sb-cta-feats {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}
.sb-cta-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.3);
}
.sb-cta-feat svg {
    width: 11px;
    height: 11px;
    stroke: var(--green);
    flex-shrink: 0;
}
.sb-cta-btn {
    width: 100%;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 16px;
    border-radius: 2px;
    background: var(--accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s;
    margin-bottom: 8px;
}
.sb-cta-btn:hover {
    background: #b53508;
}
.sb-cta-btn svg {
    width: 11px;
    height: 11px;
}
.sb-cta-free {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: 100%;
    padding: 9px 16px;
    border-radius: 2px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.45);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.15s;
}
.sb-cta-free:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}
.sb-note {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.18);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}
.sb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.sb-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sb-row:first-child {
    padding-top: 0;
}
.sb-row-key {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.sb-row-val {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}
.sb-row-val.green {
    color: var(--green);
}
.sb-row-val.accent {
    color: var(--accent);
}
.sb-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sb-tech {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--muted);
}
.other-prod {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}
.other-prod:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.other-prod:first-of-type {
    padding-top: 0;
}
.other-prod:hover .op-name {
    color: var(--accent);
}
.op-vis {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}
.op-vis img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}
.op-cat {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 3px;
}
.op-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.15s;
}
.op-price {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    color: var(--muted);
    margin-top: 2px;
}
.next-proj {
    position: relative;
    z-index: 1;
    background: var(--accent);
    overflow: hidden;
    border-top: 2px solid var(--ink);
}
.np-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 52px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 1;
}
.next-proj::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.07) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
.np-lbl {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.np-tit {
    font-family: "DM Serif Display", serif;
    font-size: clamp(22px, 3vw, 40px);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}
.np-tit em {
    font-style: italic;
}
.np-r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.np-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.np-btn svg {
    width: 12px;
    height: 12px;
}
.np-btn.white {
    background: #fff;
    color: var(--accent);
}
.np-btn.white:hover {
    background: rgba(255, 255, 255, 0.9);
}
.np-btn.ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.np-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 960px) {
    nav {
        padding: 0 20px;
    }
    .n-crumb {
        display: none;
    }
    .hero-body {
        grid-template-columns: 1fr;
    }
    .hb-left {
        padding: 36px 22px 32px;
    }
    .hb-right {
        border-left: none;
        border-top: 2px solid var(--ink);
        min-height: 260px;
    }
    .ph-strip {
        padding: 9px 20px;
    }
    .main-layout {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 0;
    }
    .sidebar {
        padding: 0 0 48px;
        position: static;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .testi-grid {
        grid-template-columns: 1fr;
    }
    .feat-grid {
        grid-template-columns: 1fr;
    }
    .fi {
        border-right: none !important;
    }
    #sidenav {
        display: none;
    }
    .np-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    footer {
        padding: 16px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .hl-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .hls:nth-child(2) {
        border-right: none;
    }
}
@media (max-width: 600px) {
    .screens-grid {
        grid-template-columns: 1fr;
    }
}

/* ══ LOGIN PAGE STYLES ══ */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ── LAYOUT ── */
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ══ LEFT PANEL ══ */
.left {
    background: var(--ink);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 44px 40px;
    transition: background 0.35s;
}
/* dot grid */
.left::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
/* big glyph bg */
.left::after {
    content: "∞";
    position: absolute;
    right: -40px;
    bottom: -80px;
    font-family: "DM Serif Display", serif;
    font-size: 420px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
    letter-spacing: -10px;
}

/* top bar */
.l-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.l-logo {
    font-family: "DM Serif Display", serif;
    font-size: 20px;
    letter-spacing: -0.4px;
    text-decoration: none;
    color: var(--bg);
    display: flex;
    align-items: center;
    gap: 8px;
}
.l-logo em {
    font-style: italic;
    color: var(--accent);
}
.l-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}
.l-version {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 2px;
}

/* middle content */
.l-mid {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 0 32px;
}
.l-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.l-eyebrow span {
    width: 24px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.l-headline {
    font-family: "DM Serif Display", serif;
    font-size: clamp(36px, 3.8vw, 58px);
    line-height: 0.92;
    letter-spacing: -2px;
    color: var(--bg);
    margin-bottom: 16px;
}
.l-headline em {
    font-style: italic;
    color: var(--accent);
}
.l-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.75;
    max-width: 380px;
    margin-bottom: 36px;
}

/* product pills */
.l-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
}
.lp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    transition: all 0.2s;
}
.lp-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}
.lp-ico {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-ico svg {
    width: 16px;
    height: 16px;
}
.lp-body {
    flex: 1;
}
.lp-name {
    font-family: "DM Serif Display", serif;
    font-size: 14px;
    line-height: 1;
    color: var(--bg);
    margin-bottom: 2px;
}
.lp-name em {
    font-style: italic;
}
.lp-desc {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
}
.lp-badge {
    font-family: "DM Mono", monospace;
    font-size: 6.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    flex-shrink: 0;
}
.lp-badge.live {
    background: rgba(26, 122, 74, 0.7);
    color: #4ade80;
}
.lp-badge.free {
    background: rgba(212, 65, 11, 0.7);
    color: #ffb89a;
}
.lp-badge.beta {
    background: rgba(43, 91, 255, 0.7);
    color: #a5bfff;
}

/* bottom stat strip */
.l-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 20px;
    position: relative;
    z-index: 1;
}
.l-stat {
    text-align: center;
}
.l-stat:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.l-stat-n {
    font-family: "DM Serif Display", serif;
    font-size: 24px;
    line-height: 1;
    color: var(--bg);
}
.l-stat-n sup {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--accent);
}
.l-stat-l {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    margin-top: 3px;
}

/* ══ RIGHT PANEL ══ */
.right {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    transition: background 0.35s;
}
/* dot grid bg */
.right::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}
/* canvas sits behind everything in right panel */
#bgCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.35s;
}

/* top bar right */
.r-top {
    padding: 22px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.r-back {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.r-back svg {
    width: 12px;
    height: 12px;
}
.r-back:hover {
    color: var(--ink);
}
.r-toggle {
    width: 40px;
    height: 22px;
    background: var(--border);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    position: relative;
    transition: background 0.3s;
}
.r-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink);
    transition: transform 0.3s;
}
[data-theme="dark"] .r-toggle {
    background: var(--accent);
}
[data-theme="dark"] .r-toggle::after {
    transform: translateX(18px);
    background: #fff;
}

/* form area */
.r-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 44px 40px;
    position: relative;
    z-index: 1;
}
.form-box {
    width: 100%;
    max-width: 400px;
    animation: fadeUp 0.5s ease both;
}

/* form header */
.fb-head {
    margin-bottom: 32px;
}
.fb-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fb-eyebrow::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--accent);
}
.fb-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.8px;
    line-height: 0.95;
    margin-bottom: 8px;
}
.fb-title em {
    font-style: italic;
}
.fb-sub {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
}
.fb-sub a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.fb-sub a:hover {
    text-decoration: underline;
}

/* forgot pw link */
.field {
    margin-bottom: 14px;
}
.field-label {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.field-label a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.15s;
}
.field-label a:hover {
    opacity: 0.75;
}
.field-wrap {
    position: relative;
}
.field-input {
    width: 100%;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 3px;
    padding: 11px 14px;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.field-input::placeholder {
    color: var(--muted);
}
.field-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(26, 26, 24, 0.06);
}
[data-theme="dark"] .field-input:focus {
    box-shadow: 0 0 0 3px rgba(238, 234, 226, 0.06);
}
.field-input.error {
    border-color: var(--accent) !important;
}
.field-input.ok {
    border-color: var(--green) !important;
}
.field-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--muted);
}
.field-icon.toggle-pw {
    cursor: pointer !important;
}
.field-icon.toggle-pw:hover {
    stroke: var(--ink);
}
.field-err {
    font-family: "DM Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-top: 5px;
    display: none;
}
.field.has-err .field-err {
    display: block;
}

/* remember row */
.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.check-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s;
    position: relative;
}
.check-box.checked {
    background: var(--ink);
    border-color: var(--ink);
}
.check-box.checked::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
.check-label {
    font-family: "DM Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}

/* submit button */
.submit-btn {
    width: 100%;
    padding: 13px 20px;
    border-radius: 3px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background 0.18s,
        transform 0.15s;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.submit-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.2s;
}
.submit-btn:hover {
    background: var(--accent);
}
.submit-btn:hover::before {
    opacity: 1;
    animation: shimmer 1.2s infinite;
}
.submit-btn:active {
    transform: scale(0.985);
}
.submit-btn svg {
    width: 14px;
    height: 14px;
}
.submit-btn.loading .btn-txt {
    display: none;
}
.submit-btn.loading .btn-spin {
    display: block;
}
.submit-btn.success {
    background: var(--green);
}
.btn-spin {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* forgot pw link */
.form-foot {
    text-align: center;
    font-family: "DM Mono", monospace;
    font-size: 8.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.form-foot a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}
.form-foot a:hover {
    color: var(--accent);
}

/* success screen */
.success-screen {
    display: none;
    text-align: center;
    animation: fadeUp 0.4s ease both;
}
.ss-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(26, 122, 74, 0.1);
    border: 1.5px solid rgba(26, 122, 74, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.ss-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
}
.ss-title {
    font-family: "DM Serif Display", serif;
    font-size: 28px;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}
.ss-title em {
    font-style: italic;
    color: var(--green);
}
.ss-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.65;
}
.ss-btn {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: 3px;
    background: var(--ink);
    color: var(--bg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s;
}
.ss-btn:hover {
    background: var(--accent);
}
.ss-btn svg {
    width: 11px;
    height: 11px;
}

/* register panel (hidden by default) - removed */

/* ── BOTTOM FOOTER ── */
.r-foot {
    padding: 14px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: border-color 0.35s;
}
.rf-copy {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}
.rf-links {
    display: flex;
    gap: 12px;
}
.rf-link {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
}
.rf-link:hover {
    color: var(--ink);
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    body {
        overflow: auto;
    }
    .wrapper {
        grid-template-columns: 1fr;
        height: auto;
    }
    .left {
        min-height: auto;
        padding: 28px 24px 32px;
    }
    .l-products {
        display: none;
    }
    .l-mid {
        padding: 24px 0 20px;
    }
    .r-top {
        padding: 16px 24px;
    }
    .r-body {
        padding: 16px 24px 32px;
        align-items: flex-start;
    }
    .r-foot {
        padding: 12px 24px;
    }
}

/* ══ 404 PAGE STYLES ══ */
body {
    display: flex;
    flex-direction: column;
}
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-18px);
    }
}
@keyframes glitch1 {
    0%,
    90%,
    100% {
        transform: translate(0);
    }
    91% {
        transform: translate(-3px, 1px);
    }
    93% {
        transform: translate(3px, -1px);
    }
    95% {
        transform: translate(-2px, 2px);
    }
}
@keyframes glitch2 {
    0%,
    88%,
    100% {
        opacity: 0;
        transform: translate(0);
    }
    89% {
        opacity: 0.6;
        transform: translate(4px, -2px);
    }
    92% {
        opacity: 0.6;
        transform: translate(-4px, 2px);
    }
    94% {
        opacity: 0;
    }
}
@keyframes scanline {
    0% {
        top: -10%;
    }
    100% {
        top: 110%;
    }
}

/* MAIN */
main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 0 36px;
}

/* BIG 404 */
.err-wrap {
    text-align: center;
    max-width: 680px;
    width: 100%;
}
.num-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
}
.big-404 {
    font-family: "DM Serif Display", serif;
    font-size: clamp(120px, 18vw, 220px);
    line-height: 1;
    letter-spacing: -8px;
    color: var(--ink);
    animation: glitch1 6s infinite;
    position: relative;
    z-index: 2;
    user-select: none;
}
.big-404 em {
    font-style: italic;
    color: var(--accent);
}
/* glitch clone layers */
.big-404::before {
    content: "4\000000004";
    position: absolute;
    inset: 0;
    font-family: "DM Serif Display", serif;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--accent2);
    animation: glitch2 6s infinite;
    z-index: 1;
    clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
}
.big-404::after {
    content: "4\000000004";
    position: absolute;
    inset: 0;
    font-family: "DM Serif Display", serif;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--green);
    animation: glitch2 6s infinite 0.3s;
    z-index: 1;
    clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
    opacity: 0;
}
/* scanline */
.scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 65, 11, 0.3),
        transparent
    );
    animation: scanline 3s linear infinite;
    pointer-events: none;
    z-index: 3;
}

/* floating illustration */
.float-box {
    animation: float 4s ease-in-out infinite;
    margin-bottom: 28px;
    position: relative;
    display: inline-block;
}
.fb-inner {
    width: 120px;
    height: 120px;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition:
        background 0.35s,
        border-color 0.35s;
}
.fb-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0.4;
}
.fb-inner svg {
    width: 48px;
    height: 48px;
    stroke: var(--muted);
    position: relative;
    z-index: 1;
}
.fb-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-badge svg {
    width: 13px;
    height: 13px;
    stroke: #fff;
}

/* text content */
.err-eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: fadeUp 0.5s ease 0.1s both;
}
.err-eyebrow::before,
.err-eyebrow::after {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--accent);
}
.err-title {
    font-family: "DM Serif Display", serif;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: -0.6px;
    line-height: 1;
    margin-bottom: 12px;
    animation: fadeUp 0.5s ease 0.2s both;
}
.err-title em {
    font-style: italic;
}
.err-sub {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 420px;
    margin: 0 auto 32px;
    animation: fadeUp 0.5s ease 0.3s both;
}

/* CTA buttons */
.err-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    animation: fadeUp 0.5s ease 0.4s both;
}
.eb {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s;
}
.eb svg {
    width: 11px;
    height: 11px;
}
.eb.fill {
    background: var(--ink);
    color: var(--bg);
}
.eb.fill:hover {
    background: var(--accent);
}
.eb.line {
    border: 1.5px solid var(--border);
    color: var(--muted);
}
.eb.line:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* quick links */
.err-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    animation: fadeUp 0.5s ease 0.5s both;
}
.err-links-lbl {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.el {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.15s;
}
.el:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.05);
}

/* FOOTER */
footer {
    position: relative;
    z-index: 1;
    background: #1c1c1a;
    color: #f0ede6;
    padding: 14px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.35s;
}
.ft-logo {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    text-decoration: none;
    color: #f0ede6;
}
.ft-logo em {
    font-style: italic;
    color: var(--accent);
}
.ft-copy {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 600px) {
    nav {
        padding: 0 20px;
    }
    main {
        padding: 0 20px;
    }
    footer {
        padding: 14px 20px;
    }
    .err-btns {
        flex-direction: column;
        align-items: center;
    }
}

/* ══════════════════════════════════════════════════
   SIDEBAR + TOPBAR LAYOUT
   ══════════════════════════════════════════════════ */

/* ── PAGE LAYOUT WRAPPER ── */
.page-layout {
    display: flex;
    min-height: 100vh;
    margin-top: 0;
    overflow-x: hidden;
    max-width: 100vw;
}
.page-main {
    margin-left: 260px;
    flex: 1;
    min-width: 0;
}
/* Remove legacy main top-padding; .page-layout margin handles it */
.page-layout ~ main,
.page-main > main {
    padding-top: 0;
}

/* ── SIDEBAR PANEL ── */
#msidebar.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--card);
    border-right: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: 0 0 28px;
    transition:
        background 0.35s,
        border-color 0.35s,
        transform 0.28s ease;
}
#msidebar.sidebar::before {
    content: "";
    position: fixed;
    top: 3px;
    left: 0;
    width: 260px;
    height: 100vh;
    background:
        radial-gradient(
            ellipse 200px 260px at 50% 12%,
            rgba(212, 65, 11, 0.13) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 160px 160px at 88% 88%,
            rgba(212, 65, 11, 0.08) 0%,
            transparent 100%
        );
    pointer-events: none;
    z-index: 91;
    animation: sb-glow-breathe 6s ease-in-out infinite alternate;
}
@keyframes sb-glow-breathe {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}
/* Thin custom scrollbar for sidebar */
#msidebar.sidebar::-webkit-scrollbar {
    width: 3px;
}
#msidebar.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
#msidebar.sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ── SIDEBAR INTERNAL COMPONENTS ── */
.sb-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 14px 8px;
    min-height: 38px;
}
.sb-brand-mark {
    font-family: "DM Serif Display", serif;
    font-size: 16px;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -0.3px;
    text-decoration: none;
    transition: color 0.2s;
}
.sb-brand-mark em {
    font-style: italic;
    color: var(--accent);
}
.sb-close {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 10px 12px;
    color: var(--muted);
    line-height: 0;
    transition: all 0.15s;
}
.sb-close:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* Profile section */
.sb-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 10px 18px 0;
    border-bottom: none;
}

/* Avatar with animated conic sweep */
.sb-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-avatar-wrap::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: var(--border);
    animation: spin 3s linear infinite;
}
.sb-avatar-ring {
    display: none;
}
.sb-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px var(--shadow);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.sb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sb-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--bg);
    font-family: "DM Serif Display", serif;
    font-size: 26px;
    font-style: italic;
    transition:
        background 0.35s,
        color 0.35s;
}
.sb-pinfo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}
.sb-pname {
    font-family: "DM Serif Display", serif;
    font-size: 17px;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
.sb-prole {
    font-size: 11px;
    font-family: "DM Mono", monospace;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.sb-avail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--green);
    background: rgba(26, 122, 74, 0.08);
    border: 1px solid rgba(26, 122, 74, 0.2);
    border-radius: 20px;
    padding: 3px 10px;
    margin-top: 3px;
    white-space: nowrap;
    width: fit-content;
}
.sb-adot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.8s infinite;
    flex-shrink: 0;
}

/* Stats row */
.sb-stats {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-top: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    transition: background 0.35s;
}
.sb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.sb-stat + .sb-stat {
    border-left: 1px solid var(--border);
}
.sb-sn {
    font-family: "DM Serif Display", serif;
    font-size: 19px;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--accent);
}
.sb-sn sup {
    font-size: 11px;
    font-family: "DM Mono", monospace;
    letter-spacing: 0.3px;
    color: var(--muted);
}
.sb-sl {
    font-family: "DM Mono", monospace;
    font-size: 7.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* Tech chips */
.sb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.sb-chip {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
    background: transparent;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}
.sb-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 65, 11, 0.05);
}

.sb-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

/* Nav section label */
.sb-nav-label {
    font-family: "DM Mono", monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 18px 4px;
    opacity: 0.6;
}

/* Navigation links */
.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 10px 14px;
}
.sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}
.sb-link svg {
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.15s;
    stroke: currentColor;
}
.sb-link:hover {
    color: var(--ink);
    background: rgba(26, 26, 24, 0.05);
    border-left-color: var(--border);
}
.sb-link:hover svg {
    opacity: 0.9;
}
.sb-link.active {
    color: var(--accent);
    background: rgba(212, 65, 11, 0.07);
    border-left-color: var(--accent);
}
.sb-link.active svg {
    opacity: 1;
    stroke: var(--accent);
}

/* Bottom: socials + actions */
.sb-bottom {
    margin-top: auto;
    padding: 14px 18px 0;
    border-top: 1px solid var(--border);
}
.sb-social {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
    justify-content: center;
}
.sb-social a {
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.15s;
    line-height: 0;
}
.sb-social a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(212, 65, 11, 0.06);
}
.sb-social svg {
    stroke: currentColor;
}
.sb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sb-cta {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent) 0%, #ff5a1f 100%);
    color: #fff;
    padding: 9px 14px;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(212, 65, 11, 0.28);
    transition:
        opacity 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
    flex: 1;
    text-align: center;
}
.sb-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(212, 65, 11, 0.4);
}

/* ── TOPBAR THEME TOGGLE ── */
#topbarThemeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    color: var(--ink);
    flex-shrink: 0;
    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
    line-height: 0;
}
#topbarThemeBtn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}
.theme-icon {
    stroke: currentColor;
}
.theme-sun {
    display: block;
}
.theme-moon {
    display: none;
}
[data-theme="dark"] .theme-sun {
    display: none;
}
[data-theme="dark"] .theme-moon {
    display: block;
}

/* ── HAMBURGER TOGGLE (topbar, mobile only) ── */
#sbToggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    padding: 11px 11px;
    color: var(--ink);
    line-height: 0;
    transition: all 0.15s;
}
#sbToggle:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
#sbToggle svg {
    stroke: currentColor;
}

/* ── SIDEBAR OVERLAY (mobile) ── */
#sbOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 89;
    backdrop-filter: blur(2px);
}
#sbOverlay.show {
    display: block;
}

/* ── RESPONSIVE: Mobile / Tablet ── */
@media (max-width: 1024px) {
    .page-main > nav {
        left: 0;
    }
    #msidebar.sidebar {
        transform: translateX(-100%);
        z-index: 95;
        box-shadow: none;
    }
    #msidebar.sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px var(--shadow);
    }
    .sb-close {
        display: flex;
        align-items: center;
    }
    .sb-head {
        margin-bottom: 16px;
    }
    .page-main {
        margin-left: 0;
    }
    #sbToggle {
        display: flex;
    }
    /* Restore nav-center hiding on small screens for cleaner topbar */
    .nav-center {
        display: none;
    }
}
@media (min-width: 1025px) {
    /* Keep nav-center visible on desktop */
    .nav-center {
        display: flex;
    }
    .sb-head {
        /* Hide close button on desktop — sidebar always open */
        /* sb-close is already display:none by default */
    }
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — DARK-BAND SECTIONS FIX
   These sections use background:var(--ink) + color:var(--bg)
   which were correct in light mode (dark bg, light text) but
   invert in dark mode (cream bg, dark text). This block keeps
   them dark and text light in dark mode.
   ══════════════════════════════════════════════════════════ */

/* ── Section backgrounds stay dark ── */
[data-theme="dark"] .tstrip,
[data-theme="dark"] .pstrip,
[data-theme="dark"] .timeline-section,
[data-theme="dark"] .values-section,
[data-theme="dark"] .hb-left,
[data-theme="dark"] .ph-main,
[data-theme="dark"] .avail-card.sb-card,
[data-theme="dark"] .cta-band,
[data-theme="dark"] .faq-card-cta,
[data-theme="dark"] .sk-cat-head {
    background: #1c1c1a;
}

/* ── Section border-colors that also used var(--ink) ── */
[data-theme="dark"] .tstrip,
[data-theme="dark"] .pstrip {
    border-color: #2a2a28;
}
[data-theme="dark"] .timeline-section {
    border-bottom-color: #2a2a28;
}
[data-theme="dark"] .cta-band {
    border-top-color: #2a2a28;
}

/* ── Body text: sections set color:var(--bg) which is dark in dark mode ── */
[data-theme="dark"] .tstrip,
[data-theme="dark"] .pstrip,
[data-theme="dark"] .hb-left {
    color: #f0ede6;
}

/* ── Explicit color:var(--bg) overrides inside dark-band elements ── */
/* Testimonials */
[data-theme="dark"] .ti .stit,
[data-theme="dark"] .ti .slink,
[data-theme="dark"] .tav {
    color: #f0ede6;
}
/* Process strip */
[data-theme="dark"] .ptop .stit {
    color: #f0ede6;
}
/* Footer logos (all pages) */
[data-theme="dark"] .flogo,
[data-theme="dark"] .pf-logo {
    color: #f0ede6;
}
/* About page — timeline heading */
[data-theme="dark"] .tl-h-left .sec-tit {
    color: #f0ede6;
}
/* About page — values section heading */
[data-theme="dark"] .val-header .sec-tit {
    color: #f0ede6;
}
/* About page — skills cat head */
[data-theme="dark"] .sk-cat-title {
    color: rgba(255, 255, 255, 0.6);
}
/* Services hero left */
[data-theme="dark"] .hl-title {
    color: #f0ede6;
}
/* Contact page header */
[data-theme="dark"] .ph-main {
    color: #f0ede6;
}
[data-theme="dark"] .ph-title {
    color: #f0ede6;
}
/* Services FAQ CTA */
[data-theme="dark"] .faq-cta-text {
    color: #f0ede6;
}
/* Services / general CTA band */
[data-theme="dark"] .cta-title {
    color: #f0ede6;
}
/* Hero stats number (hs-n uses color:var(--bg) which goes dark in dark mode) */
[data-theme="dark"] .hs-n {
    color: #f0ede6;
}
/* Availability card in contact sidebar */
[data-theme="dark"] .avail-card.sb-card .avail-title {
    color: #f0ede6;
}

/* =============================================
   HOME PAGE REDESIGN — NEW SECTIONS
   ============================================= */

/* ---- Hero Problem Line ---- */
.hero-problem {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero-problem::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

/* ---- Hero Em Gradient ---- */
.hero-em-grad {
    background: linear-gradient(90deg, var(--accent) 0%, #111111 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: heroGradShift 4s linear infinite;
}
@keyframes heroGradShift {
    0% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 0% center;
    }
}

/* ---- WhatsApp Button ---- */
.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: #25d366;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s,
        transform 0.15s,
        box-shadow 0.2s;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.28);
}
.btn-wa:hover {
    background: #1ebe5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.38);
}

/* ---- Trust Strip ---- */
.trust-strip-wrap {
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding: 14px 0;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.trust-strip-label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 24px;
    white-space: nowrap;
}
.trust-track-outer {
    overflow: hidden;
    flex: 1;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}
.trust-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: trustScroll 28s linear infinite;
}
.trust-track:hover {
    animation-play-state: paused;
}
@keyframes trustScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}
.ts-badge svg {
    color: var(--accent);
    flex-shrink: 0;
}
.ts-sep {
    color: var(--border);
    font-size: 14px;
    padding: 0 4px;
    flex-shrink: 0;
    user-select: none;
}

/* ---- Benefit Cards (Why Choose Us) ---- */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (max-width: 600px) {
    .benefit-grid {
        grid-template-columns: 1fr;
    }
}
.benefit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 18px;
    transition:
        border-color 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.benefit-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
}
.bc-ico {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 8px;
    margin-bottom: 4px;
}
.bc-ico svg {
    width: 18px;
    height: 18px;
}
.bc-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}
.bc-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
}

/* ---- Services Card Number + Bullet List ---- */
.svnum {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    margin-bottom: 10px;
    opacity: 0.8;
}
.sv-bullets {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sv-bullets li {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.45;
}
.sv-bullets li::before {
    content: "→";
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
/* ---- Industries We Serve ---- */
.ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .ind-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .ind-grid {
        grid-template-columns: 1fr;
    }
}
.ind-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 18px 20px;
    transition:
        border-color 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
    cursor: default;
}
.ind-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
}
.ind-ico {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 10px;
    margin-bottom: 12px;
}
.ind-ico svg {
    width: 20px;
    height: 20px;
}
.ind-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.ind-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
}

/* ---- Case Studies industry tag ---- */
.pind {
    display: inline-block;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ---- Tech Stack Grid ---- */
.ts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .ts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .ts-grid {
        grid-template-columns: 1fr;
    }
}
.ts-cat-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 18px;
}
.ts-cat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.ts-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.ts-pill {
    display: inline-block;
    padding: 5px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}
.ts-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ---- FAQ Accordion ---- */
.faq-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-q {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    transition: background 0.15s;
}
.faq-q:hover {
    background: var(--surface);
}
.faq-arr {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.25s;
}
.faq-item.open .faq-arr {
    transform: rotate(180deg);
    color: var(--accent);
}
.faq-item.open .faq-q {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.35s ease,
        padding 0.3s ease;
    padding: 0 24px;
}
.faq-a p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
    padding-bottom: 20px;
}
.faq-item.open .faq-a {
    max-height: 300px;
    padding-top: 0;
}

/* ---- CTA Banner ---- */
.cta-banner {
    position: relative;
    background: #0c0c0b;
    padding: 90px 24px;
    overflow: hidden;
}
.cta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: ctaGlowPulse 6s ease-in-out infinite;
}
.cta-glow-1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(
        circle,
        rgba(212, 65, 11, 0.2) 0%,
        transparent 70%
    );
    top: -120px;
    right: 8%;
    animation-delay: 0s;
}
.cta-glow-2 {
    width: 380px;
    height: 380px;
    background: radial-gradient(
        circle,
        rgba(43, 91, 255, 0.16) 0%,
        transparent 70%
    );
    bottom: -80px;
    left: 5%;
    animation-delay: -3s;
}
@keyframes ctaGlowPulse {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}
.cta-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.cta-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: center;
}
@media (max-width: 900px) {
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 600px) {
    .cta-inner {
        gap: 24px;
        padding: 0;
    }
    .cta-head,
    .cta-sub {
        width: 100%;
    }
    .cta-stats {
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
    }
    .cta-stat {
        flex: 1;
        min-width: 80px;
    }
    .cta-wa,
    .cta-outline {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}
.cta-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(212, 65, 11, 0.1);
    border: 1px solid rgba(212, 65, 11, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d4410b;
    margin-bottom: 24px;
}
.cta-badge-dot {
    width: 7px;
    height: 7px;
    background: #d4410b;
    border-radius: 50%;
    animation: ctaDotPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ctaDotPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(212, 65, 11, 0.5);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(212, 65, 11, 0);
    }
}
.cta-head {
    font-size: clamp(30px, 4.5vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: -0.03em;
}
.cta-head em {
    font-style: normal;
    background: linear-gradient(90deg, #d4410b 0%, #ff6b35 40%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ctaGradShift 4s linear infinite;
}
@keyframes ctaGradShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}
.cta-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
    line-height: 1.7;
}
.cta-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
}
.cta-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cs-num {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.cs-lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.35;
}
.cta-sdiv {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.cta-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cta-wa {
    font-size: 14px;
    padding: 13px 26px;
}
.cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.cta-outline:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
}
/* CTA right card */
.cta-right {
    display: flex;
}
.cta-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cta-av-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.cta-av-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}
.cta-av-pulse span {
    display: block;
    width: 10px;
    height: 10px;
    background: #25d366;
    border-radius: 50%;
    position: relative;
}
.cta-av-pulse span::after {
    content: "";
    position: absolute;
    inset: -4px;
    background: rgba(37, 211, 102, 0.3);
    border-radius: 50%;
    animation: ctaAvPulse 2s ease-in-out infinite;
}
@keyframes ctaAvPulse {
    0%,
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.6);
        opacity: 0;
    }
}
.cta-av-status {
    font-size: 13px;
    font-weight: 600;
    color: #25d366;
}
.cta-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
}
.cta-av-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cta-av-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cta-av-ico {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
}
.cta-av-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
}
.cta-av-val {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.cta-review {
    padding-top: 4px;
}
.cta-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
}
.cta-review-txt {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0 0 8px;
    font-style: italic;
}
.cta-review-auth {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

/* ---- Contact textarea ---- */
.ftarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    max-width: 100%;
}

/* ---- Dark mode adjustments ---- */
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .ind-card,
[data-theme="dark"] .ts-cat-block,
[data-theme="dark"] .faq-wrap {
    background: var(--surface);
}
[data-theme="dark"] .bc-title,
[data-theme="dark"] .ind-name {
    color: #f0ede6;
}
[data-theme="dark"] .trust-strip-wrap {
    background: var(--surface);
}
[data-theme="dark"] .cta-head {
    color: #f0ede6;
}
[data-theme="dark"] .faq-q {
    color: #f0ede6;
}

/* ── PRICING ── */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.price-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.price-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.pc-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 16px;
}
.pc-tier {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.pc-price {
    font-family: "DM Serif Display", serif;
    font-size: 28px;
    color: var(--ink);
    margin-bottom: 4px;
}
.pc-range {
    font-size: 18px;
    color: var(--muted);
}
.pc-best {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.pc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pc-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
}
.pc-note {
    color: var(--muted);
    font-size: 11px;
}
.pc-cta {
    display: block;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 11px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: all 0.2s;
    margin-top: auto;
}
.pc-cta:hover {
    background: var(--ink);
    color: var(--bg);
}
.pc-cta-featured {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.pc-cta-featured:hover {
    opacity: 0.9;
}
@media (max-width: 768px) {
    .price-grid {
        grid-template-columns: 1fr;
    }
}

/* ── PROJECT OUTCOME BADGE ── */
.poutcome {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 2px 7px;
}

/* ════════════════════════════════════════════════════
   FONT SIZE SCALE — readable at 100% zoom
   Equivalent to 120 % browser-zoom readability.
   Decorative badges / DM-Mono labels left unchanged.
   ════════════════════════════════════════════════════ */

/* 15 px → 18 px  (primary body / card titles) */
.hero-bio,
.tw-wrap,
.ap,
.svnm,
.btit,
.faq-card-q,
.fl {
    font-size: 18px;
}

/* 16 px → 19 px  (project card name) */
.pname {
    font-size: 19px;
}

/* 14 px → 17 px  (secondary body / form / testimonial) */
.ttxt,
.clv,
.ftagl,
.psc-title,
.finp,
.fsel,
.modal-body {
    font-size: 17px;
}

/* 13 px → 16 px  (descriptions / small body copy) */
.btn-p,
.btn-s,
.btn-cv,
.svdesc,
.wt,
.pdesc,
.fsub,
.ssub,
.faq-card-a,
.tnm,
.pr-feat-item {
    font-size: 16px;
}

/* 12 px → 14 px  (smallest readable content) */
.nav-link,
.wd,
.bexc,
.psc-desc {
    font-size: 14px;
}