/* ============================================================
 * NetCat V3 — Design Tokens + Component Library
 * W0009 Phase B (Issue #12): visual rebuild foundation.
 *
 * Direction: professional / restrained / credible.
 * Reference: enterprise cloud + B2B SaaS (Aliyun, Tencent Cloud,
 * Stripe, Linear). No emoji icons, no neon, no rainbow gradients,
 * no heavy JS animation libraries.
 *
 * Conventions:
 *   --nc-*            Design tokens (colors / spacing / type / radius / shadow)
 *   .nc-*             Component classes (header / footer / section / btn / card / grid)
 *   .nc-v3-*          Phase B new tokens / utilities
 *
 * Mobile-first breakpoints:
 *   ≤640    : mobile (default)
 *   641-960 : tablet
 *   ≥961    : desktop
 *
 * 8px spacing grid throughout. Use --spacing-1..--spacing-12 tokens.
 * ============================================================ */

/* ============================================================
 * 1. DESIGN TOKENS (CSS Variables)
 * ============================================================ */

:root {
    /* --- Brand --- */
    --nc-blue:           #0064d2;   /* primary brand (kept from V2) */
    --nc-blue-hover:     #1890ff;
    --nc-blue-pressed:   #0050a0;
    --nc-blue-50:        #e6f4ff;   /* very light wash */
    --nc-blue-100:       #bae0ff;

    /* --- Text --- */
    --nc-text:           #1f2329;   /* primary text */
    --nc-text-sub:       #4e5969;   /* secondary text */
    --nc-text-weak:      #86909c;   /* tertiary / hint text */
    --nc-text-inverse:    #ffffff;

    /* --- Surfaces --- */
    --nc-bg:             #ffffff;
    --nc-bg-gray:        #fafbfc;
    --nc-bg-gray-mid:    #f2f3f5;
    --nc-bg-blue:        var(--nc-blue-50);

    /* --- Borders --- */
    --nc-border:         #e5e6eb;
    --nc-border-strong:  #c9cdd4;
    --nc-border-blue:    #91d5ff;

    /* --- Status (for hover, warnings, errors) --- */
    --nc-success:        #00b42a;
    --nc-warning:        #ff7d00;
    --nc-danger:         #f53f5f;

    /* --- Spacing (8px grid) --- */
    --nc-space-1:  4px;
    --nc-space-2:  8px;
    --nc-space-3:  12px;
    --nc-space-4:  16px;
    --nc-space-5:  20px;
    --nc-space-6:  24px;
    --nc-space-8:  32px;
    --nc-space-10: 40px;
    --nc-space-12: 48px;
    --nc-space-16: 64px;
    --nc-space-20: 80px;
    --nc-space-24: 96px;
    --nc-space-32: 128px;

    /* --- Typography --- */
    --nc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
                    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                    "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nc-font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --nc-text-size-xs:    12px;     /* footnote / hint */
    --nc-text-size-sm:    14px;     /* secondary */
    --nc-text-size-base:  16px;     /* body */
    --nc-text-size-lg:    18px;     /* emphasized body */
    --nc-text-size-xl:    20px;     /* H3 */
    --nc-text-size-2xl:   24px;     /* H2-mobile */
    --nc-text-size-3xl:   32px;     /* H2-desktop */
    --nc-text-size-4xl:   40px;     /* H1-mobile */
    --nc-text-size-5xl:   48px;     /* H1-desktop */
    --nc-text-size-hero:  56px;     /* Hero H1 only */

    --nc-line-tight:      1.3;
    --nc-line-base:       1.6;
    --nc-line-loose:      1.8;

    --nc-weight-regular:  400;
    --nc-weight-medium:   500;
    --nc-weight-semibold: 600;
    --nc-weight-bold:     700;

    /* --- Radius (12-16px per Phase E) --- */
    --nc-radius-sm:    4px;
    --nc-radius:        8px;
    --nc-radius-md:    12px;
    --nc-radius-lg:    16px;
    --nc-radius-pill:  999px;

    /* --- Shadow (subtle, no neon) --- */
    --nc-shadow-sm:  0 1px 2px rgba(31, 35, 41, 0.04);
    --nc-shadow:     0 2px 8px rgba(31, 35, 41, 0.06);
    --nc-shadow-md:  0 4px 16px rgba(31, 35, 41, 0.08);
    --nc-shadow-lg:  0 8px 32px rgba(31, 35, 41, 0.10);

    /* --- Layout --- */
    --nc-container:       1200px;
    --nc-container-wide:  1320px;
    --nc-container-narrow: 880px;
    --nc-header-height:   64px;

    /* --- Motion --- */
    --nc-ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --nc-dur-sm:  120ms;
    --nc-dur:     200ms;
}

/* ============================================================
 * 2. RESET / BASE
 * ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--nc-font-sans);
    color: var(--nc-text);
    margin: 0;
    padding: 0;
    background: var(--nc-bg);
    line-height: var(--nc-line-base);
    font-size: var(--nc-text-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--nc-blue);
    text-decoration: none;
    transition: color var(--nc-dur-sm) var(--nc-ease);
}
a:hover { color: var(--nc-blue-hover); }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--nc-text);
    font-weight: var(--nc-weight-semibold);
    line-height: var(--nc-line-tight);
}
h1 { font-size: var(--nc-text-size-4xl); }
h2 { font-size: var(--nc-text-size-2xl); }
h3 { font-size: var(--nc-text-size-xl); }

/* ============================================================
 * 3. LAYOUT UTILITIES
 * ============================================================ */

.nc-container {
    max-width: var(--nc-container);
    margin: 0 auto;
    padding: 0 var(--nc-space-6);
}
.nc-container--wide  { max-width: var(--nc-container-wide); }
.nc-container--narrow { max-width: var(--nc-container-narrow); }

.nc-section {
    padding: var(--nc-space-16) 0;
}
.nc-section--gray  { background: var(--nc-bg-gray); }
.nc-section--blue  { background: var(--nc-bg-blue); }
.nc-section--tight  { padding: var(--nc-space-10) 0; }

.nc-section-title {
    font-size: var(--nc-text-size-2xl);
    font-weight: var(--nc-weight-semibold);
    text-align: center;
    margin: 0 0 var(--nc-space-3) 0;
}
.nc-section-subtitle {
    text-align: center;
    color: var(--nc-text-sub);
    margin: 0 0 var(--nc-space-10) 0;
    font-size: var(--nc-text-size-base);
}

/* ============================================================
 * 4. GRID
 * ============================================================ */

.nc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nc-space-6);
}
.nc-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-6);
}
.nc-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-6);
}

@media (min-width: 641px) {
    .nc-grid-3 { grid-template-columns: 1fr 1fr; }
    .nc-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 961px) {
    .nc-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .nc-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .nc-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * 5. BUTTONS
 * ============================================================ */

.nc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nc-space-2);
    padding: var(--nc-space-3) var(--nc-space-6);
    border-radius: var(--nc-radius);
    font-size: var(--nc-text-size-base);
    font-weight: var(--nc-weight-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--nc-dur-sm) var(--nc-ease);
    border: 1px solid transparent;
    white-space: nowrap;
}
.nc-btn-primary {
    background: var(--nc-blue);
    color: var(--nc-text-inverse);
}
.nc-btn-primary:hover {
    background: var(--nc-blue-hover);
    color: var(--nc-text-inverse);
}
.nc-btn-primary:active {
    background: var(--nc-blue-pressed);
}
.nc-btn-ghost {
    background: transparent;
    color: var(--nc-blue);
    border-color: var(--nc-border);
}
.nc-btn-ghost:hover {
    border-color: var(--nc-blue);
    color: var(--nc-blue);
}
.nc-btn-link {
    background: transparent;
    color: var(--nc-blue);
    padding: var(--nc-space-2) 0;
    font-weight: var(--nc-weight-medium);
}
.nc-btn-link:hover { color: var(--nc-blue-hover); }

.nc-btn-sm  { padding: var(--nc-space-2) var(--nc-space-4); font-size: var(--nc-text-size-sm); }
.nc-btn-lg  { padding: var(--nc-space-4) var(--nc-space-8); font-size: var(--nc-text-size-lg); }
.nc-btn-block { display: flex; width: 100%; }

/* ============================================================
 * 6. CARDS
 * ============================================================ */

.nc-card {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: var(--nc-space-6);
    transition: all var(--nc-dur) var(--nc-ease);
}
.nc-card:hover {
    box-shadow: var(--nc-shadow);
    border-color: var(--nc-border-strong);
}
.nc-card-title {
    font-size: var(--nc-text-size-lg);
    font-weight: var(--nc-weight-semibold);
    margin: 0 0 var(--nc-space-3) 0;
}
.nc-card-desc {
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-sm);
    line-height: var(--nc-line-base);
    margin: 0;
}
.nc-card-link {
    margin-top: var(--nc-space-4);
    font-size: var(--nc-text-size-sm);
}
.nc-card-link a {
    color: var(--nc-blue);
    font-weight: var(--nc-weight-medium);
}

/* ============================================================
 * 7. PRODUCT CARDS (Lite / Standard / Private)
 * ============================================================ */

.nc-product {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: var(--nc-space-8);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all var(--nc-dur) var(--nc-ease);
}
.nc-product:hover {
    box-shadow: var(--nc-shadow-md);
}
.nc-product-featured {
    border-color: var(--nc-blue);
    border-width: 2px;
    box-shadow: var(--nc-shadow);
}
.nc-product-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nc-blue);
    color: var(--nc-text-inverse);
    padding: 2px 10px;
    border-radius: var(--nc-radius-pill);
    font-size: var(--nc-text-size-xs);
    font-weight: var(--nc-weight-medium);
}
.nc-product-title {
    font-size: var(--nc-text-size-2xl);
    font-weight: var(--nc-weight-semibold);
    margin: 0 0 var(--nc-space-2) 0;
}
.nc-product-tagline {
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-sm);
    margin: 0 0 var(--nc-space-3) 0;
}
.nc-product-meta {
    color: var(--nc-text-weak);
    font-size: var(--nc-text-size-sm);
    margin: 0 0 var(--nc-space-4) 0;
    padding-bottom: var(--nc-space-4);
    border-bottom: 1px solid var(--nc-border);
}
.nc-product ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--nc-space-6) 0;
    flex: 1;
}
.nc-product ul li {
    color: var(--nc-text);
    font-size: var(--nc-text-size-sm);
    padding: var(--nc-space-2) 0;
    position: relative;
    padding-left: var(--nc-space-6);
}
.nc-product ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--nc-blue-50);
    border-radius: 50%;
}
.nc-product ul li::after {
    content: "✓";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nc-blue);
    font-size: 10px;
    font-weight: var(--nc-weight-bold);
}
.nc-product-cta {
    text-align: center;
    padding: var(--nc-space-3) var(--nc-space-4);
    background: var(--nc-bg-gray);
    color: var(--nc-blue);
    border-radius: var(--nc-radius);
    font-weight: var(--nc-weight-medium);
    text-decoration: none;
    transition: all var(--nc-dur-sm) var(--nc-ease);
}
.nc-product-cta:hover {
    background: var(--nc-blue);
    color: var(--nc-text-inverse);
}
.nc-product-featured .nc-product-cta {
    background: var(--nc-blue);
    color: var(--nc-text-inverse);
}
.nc-product-featured .nc-product-cta:hover {
    background: var(--nc-blue-hover);
}

/* ============================================================
 * 8. HEADER (sticky, single row, 6-item + CTA)
 * ============================================================ */

.nc-header {
    background: var(--nc-bg);
    border-bottom: 1px solid var(--nc-border);
    height: var(--nc-header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--nc-space-6);
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: var(--nc-container);
    margin: 0 auto;
}
.nc-logo {
    font-size: var(--nc-text-size-lg);
    font-weight: var(--nc-weight-bold);
    color: var(--nc-text);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.nc-nav {
    display: none;
    gap: var(--nc-space-8);
    margin-left: var(--nc-space-12);
    list-style: none;
    padding: 0;
}
.nc-nav a {
    color: var(--nc-text);
    text-decoration: none;
    font-size: var(--nc-text-size-sm);
    font-weight: var(--nc-weight-medium);
    padding: var(--nc-space-2) 0;
}
.nc-nav a:hover { color: var(--nc-blue); }
.nc-header-actions { margin-left: auto; display: flex; gap: var(--nc-space-3); align-items: center; }
.nc-cta-top {
    background: var(--nc-blue);
    color: var(--nc-text-inverse) !important;
    padding: var(--nc-space-2) var(--nc-space-5);
    border-radius: var(--nc-radius);
    font-size: var(--nc-text-size-sm);
    font-weight: var(--nc-weight-medium);
    text-decoration: none;
    transition: background var(--nc-dur-sm) var(--nc-ease);
}
.nc-cta-top:hover { background: var(--nc-blue-hover); color: var(--nc-text-inverse) !important; }

@media (min-width: 961px) {
    .nc-nav { display: flex; }
}

/* ============================================================
 * 9. HERO (V3 — left/right layout, anchored visual)
 * ============================================================ */

.nc-hero {
    padding: var(--nc-space-16) var(--nc-space-6) var(--nc-space-20);
    background: linear-gradient(180deg, var(--nc-bg-blue) 0%, var(--nc-bg) 100%);
}
.nc-hero-grid {
    max-width: var(--nc-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-12);
    align-items: center;
}
.nc-hero-content { max-width: 100%; }
.nc-hero-eyebrow {
    display: inline-block;
    color: var(--nc-blue);
    font-size: var(--nc-text-size-sm);
    font-weight: var(--nc-weight-medium);
    background: var(--nc-bg);
    border: 1px solid var(--nc-border-blue);
    border-radius: var(--nc-radius-pill);
    padding: var(--nc-space-1) var(--nc-space-3);
    margin-bottom: var(--nc-space-5);
}
.nc-hero h1 {
    font-size: var(--nc-text-size-4xl);
    line-height: var(--nc-line-tight);
    font-weight: var(--nc-weight-bold);
    margin: 0 0 var(--nc-space-5) 0;
    letter-spacing: -0.02em;
    color: var(--nc-text);
}
.nc-hero-sub {
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-lg);
    line-height: var(--nc-line-base);
    margin: 0 0 var(--nc-space-8) 0;
    max-width: 560px;
}
.nc-hero-actions {
    display: flex;
    gap: var(--nc-space-3);
    margin-bottom: var(--nc-space-6);
    flex-wrap: wrap;
}
.nc-hero-trust {
    color: var(--nc-text-weak);
    font-size: var(--nc-text-size-sm);
    margin: 0;
    padding-top: var(--nc-space-4);
    border-top: 1px solid var(--nc-border);
}

/* --- Hero V3 diagram (left=content, right=architecture SVG) --- */
.nc-hero-diagram {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-space-8);
    box-shadow: var(--nc-shadow);
}
.nc-hero-diagram-title {
    font-size: var(--nc-text-size-sm);
    color: var(--nc-text-weak);
    text-align: center;
    margin: 0 0 var(--nc-space-4) 0;
    font-weight: var(--nc-weight-medium);
}
.nc-hero-diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 961px) {
    .nc-hero { padding: var(--nc-space-24) var(--nc-space-6) var(--nc-space-32); }
    .nc-hero-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--nc-space-16);
    }
    .nc-hero h1 { font-size: var(--nc-text-size-5xl); }
}

/* ============================================================
 * 9B. PAGE HEADER (used by all sub-pages like /ai-lite/, /contact/)
 * ============================================================ */

.nc-page-header {
    max-width: var(--nc-container);
    margin: 0 auto;
    padding: var(--nc-space-16) var(--nc-space-6) var(--nc-space-10);
    text-align: center !important;
}
.nc-page-header h1 {
    font-size: var(--nc-text-size-4xl);
    font-weight: var(--nc-weight-bold);
    margin: 0 0 var(--nc-space-4) 0;
    color: var(--nc-text);
    letter-spacing: -0.02em;
}
.nc-page-header > p,
.nc-page-header p {
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-lg);
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 961px) {
    .nc-page-header h1 { font-size: var(--nc-text-size-5xl); }
}

/* ============================================================
 * 9C. ARCHITECTURE (vertical step list with arrows)
 * Used by KB / Agent / Contact pages to show how data flows
 * ============================================================ */

.nc-architecture {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: var(--nc-space-6);
}
.nc-architecture-step {
    display: flex;
    gap: var(--nc-space-3);
    align-items: flex-start;
    padding: var(--nc-space-2) 0;
}
.nc-architecture-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nc-blue-50);
    color: var(--nc-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--nc-weight-semibold);
    font-size: var(--nc-text-size-sm);
}
.nc-architecture-text {
    flex: 1;
    padding-top: 2px;
}
.nc-architecture-text strong {
    display: block;
    color: var(--nc-text);
    font-weight: var(--nc-weight-semibold);
    font-size: var(--nc-text-size-base);
    margin-bottom: 2px;
}
.nc-architecture-text span {
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-sm);
    line-height: var(--nc-line-base);
}
.nc-architecture-arrow {
    text-align: center;
    color: var(--nc-blue);
    font-size: var(--nc-text-size-lg);
    padding: var(--nc-space-1) 0;
    line-height: 1;
}

/* ============================================================
 * 9D. CARD TAG (small label inside a card, e.g. "能力 1")
 * ============================================================ */

.nc-card-tag {
    display: inline-block;
    background: var(--nc-bg-blue);
    color: var(--nc-blue);
    font-size: var(--nc-text-size-xs);
    font-weight: var(--nc-weight-medium);
    padding: 2px 8px;
    border-radius: var(--nc-radius-sm);
    margin-bottom: var(--nc-space-3);
}

/* ============================================================
 * 9E. TABLE (product comparison)
 * ============================================================ */

.nc-table-wrap {
    overflow-x: auto;
    border-radius: var(--nc-radius-md);
    border: 1px solid var(--nc-border);
    background: var(--nc-bg);
}
.nc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nc-text-size-sm);
    min-width: 540px;
}
.nc-table thead th {
    background: var(--nc-bg-gray);
    color: var(--nc-text);
    font-weight: var(--nc-weight-semibold);
    padding: var(--nc-space-3) var(--nc-space-4);
    text-align: left;
    border-bottom: 1px solid var(--nc-border);
}
.nc-table tbody td {
    padding: var(--nc-space-3) var(--nc-space-4);
    color: var(--nc-text);
    border-bottom: 1px solid var(--nc-border);
    vertical-align: top;
}
.nc-table tbody tr:last-child td {
    border-bottom: none;
}
.nc-table-check {
    color: var(--nc-success);
    font-weight: var(--nc-weight-semibold);
}
.nc-table-cross {
    color: var(--nc-text-weak);
}

/* ============================================================
 * 9F. PRODUCT LIST — "not included" line (Lite page exclusion list)
 * ============================================================ */

.nc-product-li-not {
    color: var(--nc-text-sub) !important;
    list-style: none !important;
    position: relative;
    padding-left: var(--nc-space-6) !important;
}
.nc-product-li-not::before {
    background: var(--nc-bg-gray-mid) !important;
}
.nc-product-li-not::after {
    content: "✕" !important;
    color: var(--nc-text-weak) !important;
    left: 0 !important;
    background: none !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ============================================================
 * 9G. CONTACT FORM section (different from .nc-form which is
 * the bare CF7 form. .nc-form-section wraps the form card
 * into a 2-column page section alongside contact info.)
 * ============================================================ */

.nc-form-section {
    padding-top: var(--nc-space-10);
    padding-bottom: var(--nc-space-10);
}
.nc-form-card {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-space-8);
    box-shadow: var(--nc-shadow);
}
.nc-form-disclaimer {
    color: var(--nc-text-weak);
    font-size: var(--nc-text-size-xs);
    margin-top: var(--nc-space-4);
}

/* ============================================================
 * 9H. SECTION GRAY (alias of .nc-section--gray, used by V2-era HTML)
 * ============================================================ */

.nc-section-gray {
    background: var(--nc-bg-gray);
}

.nc-scenario-card {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: var(--nc-space-6);
    position: relative;
}
.nc-scenario-tag {
    display: inline-block;
    background: var(--nc-bg-gray-mid);
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-xs);
    padding: 2px 8px;
    border-radius: var(--nc-radius-sm);
    margin-left: var(--nc-space-2);
    vertical-align: middle;
}

/* Inner container wrapper used by page HTML (synonym for .nc-container) */
.nc-section-inner {
    max-width: var(--nc-container);
    margin: 0 auto;
    padding: 0 var(--nc-space-6);
}

/* 4-step flow used by home page POC section */
.nc-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-4);
    counter-reset: flow;
}
.nc-flow-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-4);
    counter-reset: flow;
}
.nc-flow-step {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: var(--nc-space-6);
    position: relative;
    counter-increment: flow;
}
.nc-flow-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nc-blue);
    color: var(--nc-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--nc-weight-semibold);
    margin-bottom: var(--nc-space-3);
    font-size: var(--nc-text-size-base);
}

@media (min-width: 641px) {
    .nc-flow, .nc-flow-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 961px) {
    .nc-flow { grid-template-columns: repeat(4, 1fr); }
    .nc-flow-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * 11. ARCHITECTURE DIAGRAM (KB / Agent pages)
 * ============================================================ */

.nc-arch {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-space-8);
    box-shadow: var(--nc-shadow-sm);
}
.nc-arch svg { width: 100%; height: auto; }

/* ============================================================
 * 12. CTA BANNER (page-bottom)
 * ============================================================ */

.nc-cta-banner {
    background: var(--nc-bg-blue);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-space-12) var(--nc-space-6);
    text-align: center;
    margin: var(--nc-space-16) 0;
}
.nc-cta-banner h2 {
    font-size: var(--nc-text-size-2xl);
    margin: 0 0 var(--nc-space-4) 0;
}
.nc-cta-banner p {
    color: var(--nc-text-sub);
    margin: 0 0 var(--nc-space-6) 0;
    font-size: var(--nc-text-size-base);
}

/* ============================================================
 * 13. FOOTER (4-col desktop → stacked mobile)
 * ============================================================ */

.nc-footer {
    background: var(--nc-bg-gray);
    border-top: 1px solid var(--nc-border);
    padding: var(--nc-space-12) 0 var(--nc-space-6);
    margin-top: var(--nc-space-16);
}
.nc-footer-inner {
    max-width: var(--nc-container);
    margin: 0 auto;
    padding: 0 var(--nc-space-6);
}
.nc-footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-8);
    margin-bottom: var(--nc-space-8);
}
.nc-footer-cols h4 {
    font-size: var(--nc-text-size-sm);
    font-weight: var(--nc-weight-semibold);
    margin: 0 0 var(--nc-space-3) 0;
    color: var(--nc-text);
}
.nc-footer-cols p {
    font-size: var(--nc-text-size-sm);
    color: var(--nc-text-sub);
    margin: 0 0 var(--nc-space-2) 0;
    line-height: var(--nc-line-base);
}
.nc-footer-cols ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nc-footer-cols ul li {
    padding: var(--nc-space-1) 0;
}
.nc-footer-cols ul li a {
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-sm);
    text-decoration: none;
}
.nc-footer-cols ul li a:hover { color: var(--nc-blue); }
.contact-label { margin-top: var(--nc-space-3); }
.nc-footer-bottom {
    text-align: center;
    color: var(--nc-text-weak);
    font-size: var(--nc-text-size-sm);
    padding-top: var(--nc-space-6);
    border-top: 1px solid var(--nc-border);
}
.nc-footer-bottom a { color: var(--nc-text-sub); }

@media (min-width: 641px) {
    .nc-footer-cols {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--nc-space-12);
    }
}

/* ============================================================
 * 14. FAQ
 * ============================================================ */

.nc-faq-item {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    margin-bottom: var(--nc-space-3);
    transition: border-color var(--nc-dur-sm) var(--nc-ease);
}
.nc-faq-item[open] {
    border-color: var(--nc-blue);
}
.nc-faq-q {
    cursor: pointer;
    font-weight: var(--nc-weight-medium);
    font-size: var(--nc-text-size-base);
    padding: var(--nc-space-4) var(--nc-space-5);
    list-style: none;
    position: relative;
    color: var(--nc-text);
}
.nc-faq-q::-webkit-details-marker { display: none; }
.nc-faq-q::after {
    content: "+";
    position: absolute;
    right: var(--nc-space-5);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--nc-text-size-xl);
    color: var(--nc-text-weak);
    transition: transform var(--nc-dur-sm) var(--nc-ease);
}
.nc-faq-item[open] .nc-faq-q::after {
    content: "−";
    color: var(--nc-blue);
}
.nc-faq-a {
    padding: 0 var(--nc-space-5) var(--nc-space-5);
    color: var(--nc-text-sub);
    font-size: var(--nc-text-size-sm);
    line-height: var(--nc-line-base);
}

/* ============================================================
 * 15. CONTACT FORM
 * ============================================================ */

.nc-form-intro {
    color: var(--nc-text-sub);
    margin: 0 0 var(--nc-space-6) 0;
    font-size: var(--nc-text-size-sm);
}
.nc-form label {
    display: block;
    margin-bottom: var(--nc-space-4);
    color: var(--nc-text);
    font-size: var(--nc-text-size-sm);
    font-weight: var(--nc-weight-medium);
}
.nc-form input[type="text"],
.nc-form input[type="email"],
.nc-form input[type="tel"],
.nc-form textarea,
.nc-form select {
    display: block;
    width: 100%;
    padding: var(--nc-space-3);
    margin-top: var(--nc-space-2);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    font-size: var(--nc-text-size-base);
    font-family: inherit;
    background: var(--nc-bg);
    color: var(--nc-text);
    transition: border-color var(--nc-dur-sm) var(--nc-ease);
}
.nc-form input:focus,
.nc-form textarea:focus,
.nc-form select:focus {
    outline: none;
    border-color: var(--nc-blue);
    box-shadow: 0 0 0 3px var(--nc-blue-50);
}
.nc-form textarea {
    min-height: 96px;
    resize: vertical;
}
.nc-form-consent {
    display: flex !important;
    align-items: flex-start;
    gap: var(--nc-space-2);
    font-size: var(--nc-text-size-xs) !important;
    color: var(--nc-text-sub) !important;
    font-weight: var(--nc-weight-regular) !important;
    line-height: var(--nc-line-base);
}
.nc-form-consent input { margin-top: 4px; flex-shrink: 0; }
.nc-form-consent a { color: var(--nc-blue); }

/* ============================================================
 * 16. CONTACT PAGE — two-column layout (V3)
 * ============================================================ */

.nc-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-space-12);
}
.nc-contact-info h3 {
    font-size: var(--nc-text-size-xl);
    margin: var(--nc-space-6) 0 var(--nc-space-2) 0;
}
.nc-contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--nc-space-6) 0;
}
.nc-contact-info ul li {
    padding: var(--nc-space-2) 0;
    color: var(--nc-text);
    font-size: var(--nc-text-size-sm);
    border-bottom: 1px solid var(--nc-border);
}
.nc-contact-info ul li:last-child { border-bottom: none; }
.nc-contact-eval-flow {
    background: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    padding: var(--nc-space-6);
}
.nc-contact-eval-step {
    display: flex;
    gap: var(--nc-space-3);
    align-items: flex-start;
    padding: var(--nc-space-3) 0;
}
.nc-contact-eval-step + .nc-contact-eval-step {
    border-top: 1px dashed var(--nc-border);
}
.nc-contact-eval-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nc-bg-blue);
    color: var(--nc-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--nc-weight-semibold);
    font-size: var(--nc-text-size-sm);
}
.nc-contact-eval-step-title { font-weight: var(--nc-weight-medium); color: var(--nc-text); }
.nc-contact-eval-step-desc { color: var(--nc-text-sub); font-size: var(--nc-text-size-sm); }

@media (min-width: 961px) {
    .nc-contact-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
 * 17. UTILITIES
 * ============================================================ */

.nc-text-center { text-align: center; }
.nc-mb-3  { margin-bottom: var(--nc-space-3); }
.nc-mb-4  { margin-bottom: var(--nc-space-4); }
.nc-mb-6  { margin-bottom: var(--nc-space-6); }
.nc-mb-8  { margin-bottom: var(--nc-space-8); }
.nc-mt-3  { margin-top: var(--nc-space-3); }
.nc-mt-4  { margin-top: var(--nc-space-4); }
.nc-mt-6  { margin-top: var(--nc-space-6); }
.nc-mt-8  { margin-top: var(--nc-space-8); }

.nc-text-sub   { color: var(--nc-text-sub); }
.nc-text-weak  { color: var(--nc-text-weak); }
.nc-text-blue  { color: var(--nc-blue); }

/* ============================================================
 * 18. ENTRY-HEADER HIDING (Phase B — wp-block-post-title redundant)
 * ============================================================ */

.entry-header {
    margin: 0 !important;
    padding: 0 !important;
}
.entry-header .wp-block-post-title,
.wp-block-post-title { display: none !important; }

/* ============================================================
 * 19. MOBILE TWEAKS
 * ============================================================ */

@media (max-width: 640px) {
    .nc-hero { padding: var(--nc-space-12) var(--nc-space-5) var(--nc-space-16); }
    .nc-hero h1 { font-size: var(--nc-text-size-3xl); }
    .nc-hero-sub { font-size: var(--nc-text-size-base); }
    .nc-hero-actions { flex-direction: column; align-items: stretch; }
    .nc-hero-actions .nc-btn { width: 100%; }
    .nc-section { padding: var(--nc-space-12) 0; }
    .nc-section-title { font-size: var(--nc-text-size-2xl); }
    .nc-product { padding: var(--nc-space-6); }
    .nc-product-title { font-size: var(--nc-text-size-xl); }
    .nc-cta-banner { padding: var(--nc-space-10) var(--space-5); }
    .nc-cta-banner h2 { font-size: var(--nc-text-size-xl); }
}