@charset "UTF-8";

/* ============ Hero ============ */
#neural {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    z-index:10;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 18% 110%, rgba(0, 102, 255, 0.25), transparent 60%);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.hero-copy {
    max-width: 680px;
    text-align: left;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 99px;
    border: 1px solid rgba(0, 242, 255, 0.35);
    background: rgba(0, 242, 255, 0.07);
    color: var(--main-color-cyan);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 32px;
    animation: pulse-border 3s infinite;
}
@keyframes pulse-border {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 242, 255, 0.25);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 242, 255, 0);
    }
}
.hero-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--main-color-cyan);
    box-shadow: 0 0 12px var(--main-color-cyan);
}
.hero h1 {
    font-size: clamp(34px, 5.4vw, 64px);
    font-weight: 800;
    color: #fff;
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin-bottom: 26px;
}
.hero h1 .grad {
    background: linear-gradient(92deg, var(--main-color) 10%, var(--main-color-cyan) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p {
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 255, 255, 0.66);
    max-width: 600px;
    margin: 0 0 44px;
    font-weight: 400;
}
.hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 64px;
}
.btn-primary {
    padding: 17px 38px;
    border-radius: 99px;
    background: linear-gradient(92deg, var(--main-color), #0052cc);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    transition: all 0.25s;
    box-shadow: 0 8px 30px rgba(0, 102, 255, 0.35);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0, 102, 255, 0.55);
}
.btn-ghost {
    padding: 17px 38px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    transition: all 0.25s;
}
.btn-ghost:hover {
    border-color: var(--main-color-cyan);
    color: var(--main-color-cyan);
    background: rgba(0, 242, 255, 0.06);
}
.hero-certs{display:flex;gap:clamp(16px,4vw,52px);flex-wrap:wrap;}
.cert-chip{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.cert-chip .ico{font-size:30px;filter:drop-shadow(0 6px 14px rgba(0,242,255,.3));}
.cert-chip b{color:#fff;font-size:15px;font-weight:700;}
.cert-chip span{color:rgba(255,255,255,.45);font-size:12.5px;}

/* ============ c_sub_section : hero-certs & sec-hero-stats ============ */
.c_sub_section .hero-certs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width: fit-content;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;}
.c_sub_section .cert-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;border-right:1px solid rgba(255,255,255,.1);}
.c_sub_section .cert-chip:last-child{border-right:none;}
.c_sub_section .cert-chip .ico{font-size:26px;filter:drop-shadow(0 4px 10px rgba(0,242,255,.3));}
.c_sub_section .cert-chip .ico img {max-height:1.75rem;vertical-align:middle;}
.c_sub_section .cert-chip b{color:#fff;font-size:1rem;font-weight:700;}
.c_sub_section .cert-chip span{color:rgba(255,255,255,.45);font-size:13px;}
.scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.scroll-hint::after {
    content: "";
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, var(--main-color-cyan), transparent);
    animation: drop 1.8s infinite;
}

@media(max-width:680px){
    .c_sub_section .hero-certs{grid-template-columns:1fr;width:100%;}
    .c_sub_section .cert-chip{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);}
    .c_sub_section .cert-chip:last-child{border-bottom:none;}
}

@keyframes drop {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* ============ Common section ============ */
.eyebrow {
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--main-color);
    text-transform: uppercase;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--main-color), var(--main-color-cyan));
}
.eyebrow.center {
    justify-content: center;
}
.eyebrow.center::after {
    content: "";
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--main-color-cyan), var(--main-color));
}
h2 {
    font-size: clamp(30px, 4.2vw, 52px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.sec-desc {
    font-size: clamp(16px, 1.8vw, 19px);
    color: #5b6478;
    max-width: 720px;
}
.t-center {
    text-align: center;
}
.t-center .sec-desc {
    margin: 0 auto;
}

/* reveal */
.rv {
    opacity: 0;
    transform: translateY(36px);
    transition:
            opacity 0.8s cubic-bezier(0.2, 0.7, 0.3, 1),
            transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.rv.on {
    opacity: 1;
    transform: none;
}
.rv.d1 {
    transition-delay: 0.1s;
}
.rv.d2 {
    transition-delay: 0.2s;
}
.rv.d3 {
    transition-delay: 0.3s;
}
.rv.d4 {
    transition-delay: 0.4s;
}

/* ============ Problem (before/after) ============ */
.compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(16px, 3vw, 36px);
    align-items: stretch;
    margin-top: 64px;
}
.cmp-card {
    border-radius: 24px;
    padding: clamp(28px, 4vw, 44px);
    position: relative;
}
.cmp-card.before {
    background: #f5f7fb;
    border: 1px solid #e4e8f0;
}
.cmp-card.after {
    background: linear-gradient(160deg, #062052, #0a37a0 55%, #0066ff);
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 102, 255, 0.28);
}
.cmp-tag {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}
.before .cmp-tag {
    background: #e2e7f0;
    color: #5b6478;
}
.after .cmp-tag {
    background: rgba(0, 242, 255, 0.18);
    color: var(--main-color-cyan);
}
.cmp-emoji {
    font-size: clamp(48px, 6vw, 68px);
    line-height: 1;
    margin-bottom: 22px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}
.cmp-card h3 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    margin-bottom: 14px;
    line-height: 1.35;
}
.cmp-card li {
    display: flex;
    gap: 10px;
    font-size: 15.5px;
    padding: 7px 0;
}
.before li {
    color: #5b6478;
}
.before li::before {
    content: "✕";
    color: #c44;
    font-weight: 800;
    flex-shrink: 0;
}
.after li {
    color: rgba(255, 255, 255, 0.85);
}
.after li::before {
    content: "✓";
    color: var(--main-color-cyan);
    font-weight: 800;
    flex-shrink: 0;
}
.cmp-arrow {
    align-self: center;
    font-size: 34px;
    color: var(--main-color);
    animation: nudge 1.6s infinite;
}
@keyframes nudge {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
}

/* ============ Engine pipeline ============ */
.engine {
    background: #f5f7fb;
}
.pipeline {
    margin-top: 70px;
    display: grid;
    grid-template-columns: 1fr auto 1.2fr auto 1fr;
    gap: clamp(10px, 2vw, 20px);
    align-items: stretch;
}
.pipe-node {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    padding: 30px 26px;
    text-align: center;
    transition: all 0.3s;
}
.pipe-node:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(10, 30, 80, 0.1);
    border-color: rgba(0, 102, 255, 0.35);
}
.pipe-node .ico {
    font-size: 46px;
    margin-bottom: 16px;
    filter: drop-shadow(0 8px 16px rgba(0, 102, 255, 0.2));
}
.pipe-node h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}
.pipe-node p {
    font-size: 14px;
    color: #5b6478;
    line-height: 1.55;
}
.pipe-node.core {
    background: #0a0e1a;
    position: relative;
    overflow: hidden;
}
.pipe-node.core::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(0, 242, 255, 0.18), transparent 85%);
    animation: spin 6s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.pipe-node.core > * {
    position: relative;
}
.pipe-node.core h4 {
    color: #fff;
}
.pipe-node.core p {
    color: rgba(255, 255, 255, 0.55);
}
.model-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.model-chips span {
    padding: 6px 13px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0, 102, 255, 0.18);
    border: 1px solid rgba(0, 242, 255, 0.3);
    color: var(--main-color-cyan);
}
.pipe-link {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--main-color);
}
.pipe-link svg {
    width: 34px;
    height: 18px;
}
.flowline {
    stroke: var(--main-color);
    stroke-width: 2;
    stroke-dasharray: 6 5;
    animation: dashmove 1.2s linear infinite;
}
@keyframes dashmove {
    to {
        stroke-dashoffset: -22;
    }
}

/* ============ 4 automation logics ============ */
.logic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 64px;
}
.logic-card {
    border: 1px solid #e4e8f0;
    border-radius: 24px;
    padding: clamp(28px, 3.4vw, 42px);
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: all 0.35s;
}
.logic-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--main-color), var(--main-color-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}
.logic-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(10, 30, 80, 0.12);
}
.logic-card:hover::before {
    transform: scaleX(1);
}
.logic-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.logic-emoji {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(150deg, #edf3ff, #dcebff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    flex-shrink: 0;
    box-shadow:
            inset 0 -3px 8px rgba(0, 102, 255, 0.1),
            0 8px 20px rgba(0, 102, 255, 0.12);
}
.logic-name {
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.logic-name small {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color);
    margin-top: 3px;
}
.logic-card p {
    color: #5b6478;
    font-size: 15.5px;
    margin-bottom: 18px;
}
.logic-formula {
    font-size: 13px;
    font-weight: 600;
    color: var(--main-color);
    background: rgba(0, 102, 255, 0.06);
    border: 1px dashed rgba(0, 102, 255, 0.3);
    padding: 10px 16px;
    border-radius: 12px;
    display: inline-block;
}
.logic-effect {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1a2236;
}
.logic-effect::before {
    content: "⚡";
    font-size: 16px;
}

/* ============ Verified results (dark) ============ */
.verified {
    background: #0a0e1a;
    overflow: hidden;
}
.verified::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse 70% 50% at 20% 0%, rgba(0, 102, 255, 0.18), transparent 60%),
            radial-gradient(ellipse 50% 40% at 90% 100%, rgba(0, 242, 255, 0.1), transparent 60%);
}
.verified .container {
    position: relative;
}
.verified h2 {
    color: #fff;
}
.verified .sec-desc {
    color: rgba(255, 255, 255, 0.55);
}
.verified .eyebrow {
    color: var(--main-color-cyan);
}
.verified .eyebrow::before {
    background: linear-gradient(90deg, var(--main-color-cyan), var(--main-color));
}
.cert-banner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 242, 255, 0.25);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14.5px;
    margin-top: 24px;
}
.cert-banner b {
    color: var(--main-color-cyan);
}
.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 64px;
}
.metric-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 34px 30px;
    transition: all 0.3s;
    backdrop-filter: blur(6px);
}
.metric-card:hover {
    border-color: rgba(0, 242, 255, 0.45);
    background: rgba(0, 242, 255, 0.05);
    transform: translateY(-4px);
}
.metric-label {
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
    line-height: 1.45;
}
.metric-value {
    font-size: clamp(40px, 4.6vw, 56px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.metric-value .unit {
    font-size: 0.45em;
    font-weight: 700;
    color: var(--main-color-cyan);
    margin-left: 4px;
}
.metric-target {
    margin-top: 18px;
}
.metric-target .bar {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: visible;
    margin-bottom: 10px;
}
.metric-target .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--main-color), var(--main-color-cyan));
    width: 0;
    transition: width 1.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    box-shadow: 0 0 14px rgba(0, 242, 255, 0.5);
}
.metric-target small {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    justify-content: space-between;
}
.metric-target small b {
    color: var(--main-color-cyan);
    font-weight: 700;
}
.metric-note {
    margin-top: 36px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.metric-note::before {
    content: "ⓘ";
    color: var(--main-color-cyan);
}

/* ============ Field results ============ */
.field-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: 24px;
}
.lead-viz {
    background: #f5f7fb;
    border: 1px solid #e4e8f0;
    border-radius: 26px;
    padding: clamp(28px, 3.5vw, 44px);
}
.lead-row {
    margin-bottom: 30px;
}
.lead-row:last-child {
    margin-bottom: 0;
}
.lead-row .lr-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.lead-row .lr-head b {
    font-size: 15.5px;
    font-weight: 700;
}
.lead-row .lr-head span {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color);
}
.lr-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lr-bar {
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    width: 0;
    transition: width 1.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lr-bar.old {
    background: #dde3ee;
    color: #5b6478;
}
.lr-bar.new {
    background: linear-gradient(90deg, var(--main-color), var(--main-color-cyan));
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 102, 255, 0.3);
}
.field-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.fs-card {
    border: 1px solid #e4e8f0;
    border-radius: 20px;
    padding: 26px 24px;
    transition: all 0.3s;
}
.fs-card:hover {
    border-color: var(--main-color);
    box-shadow: 0 14px 36px rgba(10, 30, 80, 0.08);
}
.fs-card .num {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: var(--main-color);
    line-height: 1.1;
}
.fs-card .num em {
    font-style: normal;
    font-size: 0.5em;
    color: var(--main-color-cyan);
    -webkit-text-stroke: 0.4px var(--main-color);
}
.fs-card p {
    font-size: 14px;
    color: #5b6478;
    margin-top: 8px;
}
.field-foot {
    text-align:right;
    margin-top: 28px;
    font-size: 0.938rem;
    color: #98a0b3;
}

/* ============ OS ecosystem ============ */
.os-sec {
    background: linear-gradient(180deg, #fff 0%, #f5f7fb 100%);
}
.os-wrap {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.os-brain {
    position: relative;
    width: min(280px, 70vw);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 54px;
}
.os-brain .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 102, 255, 0.35);
    animation: spin 22s linear infinite;
}
.os-brain .ring.r2 {
    inset: 11%;
    border-color: rgba(0, 242, 255, 0.4);
    animation-duration: 14s;
    animation-direction: reverse;
}
.os-core {
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #3a86ff, #0046c0 72%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow:
            0 24px 70px rgba(0, 102, 255, 0.45),
            inset 0 -10px 30px rgba(0, 20, 80, 0.5);
}
.os-core .ico {
    font-size: 44px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.os-core b {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.os-core span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
}
.os-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}
.os-card {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}
.os-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 102, 255, 0.4);
}
.os-card .ico {
    font-size: 38px;
    margin-bottom: 14px;
    filter: drop-shadow(0 8px 16px rgba(0, 102, 255, 0.18));
}
.os-card b {
    display: block;
    font-size: 18px;
    font-weight: 800;
}
.os-card small {
    display: block;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 10px;
}
.os-card p {
    font-size: 13.5px;
    color: #5b6478;
    line-height: 1.5;
}
.os-card .go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--main-color);
}
.os-card .go::after {
    content: "→";
    transition: transform 0.25s;
}
.os-card:hover .go::after {
    transform: translateX(4px);
}
.badge-stage {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 99px;
}
.badge-stage.live {
    background: #e6f9f0;
    color: #0b8a50;
}
.badge-stage.dev {
    background: #fff4e2;
    color: #b26a00;
}

/* ============ WINI ============ */
.wini {
    background: #f5f7fb;
}
.wini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.wini-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 99px;
    background: #fff4e2;
    color: #b26a00;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}
.wini-feats {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.wini-feat {
    display: flex;
    gap: 16px;
}
.wini-feat .fi {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(150deg, #edf3ff, #dcebff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.12);
}
.wini-feat b {
    display: block;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 3px;
}
.wini-feat p {
    font-size: 14.5px;
    color: #5b6478;
}
.chat-frame {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(10, 30, 80, 0.14);
    overflow: hidden;
}
.wini-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 22px;
    border-bottom: 1px solid #e4e8f0;
}
.wini-top .wmark {
    width: 26px;
    height: 26px;
}
.wini-top b {
    font-size: 18px;
    font-weight: 800;
    color: #23304a;
}
.wini-top .beta {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #19b5c8;
    padding: 3px 9px;
    border-radius: 6px;
}
.wini-date {
    display: flex;
    justify-content: center;
    padding: 18px 0 4px;
}
.wini-date span {
    background: #23304a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 99px;
    letter-spacing: 0.04em;
}
.wini-msg {
    display: flex;
    gap: 14px;
    padding: 20px 22px 8px;
}
.wini-msg .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(150deg, #eaf2ff, #d7e8ff);
    border: 1px solid #e4e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.wini-msg .meta {
    font-size: 13.5px;
    color: #5b6478;
    margin-bottom: 10px;
}
.wini-msg .meta b {
    color: #1a2236;
    margin-right: 8px;
}
.wini-msg .meta .on {
    color: #19b5c8;
}
.report {
    font-size: 13.5px;
    line-height: 1.7;
    color: #39435c;
}
.wseg {
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wseg.show {
    opacity: 1;
    transform: none;
}
.report .rt {
    font-weight: 800;
    color: #1a2236;
}
.report .sub {
    color: #5b6478;
    font-size: 12.5px;
}
.report hr {
    border: 0;
    border-top: 1px solid #e4e8f0;
    margin: 13px 0;
}
.report .alert {
    background: #fff7e8;
    border: 1px solid #f4dfb5;
    color: #8a6210;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    margin: 10px 0 2px;
    display: flex;
    gap: 7px;
}
.rline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2.5px 0;
}
.rline .ic {
    width: 18px;
    text-align: center;
}
.rline .sub2 {
    padding-left: 26px;
    color: #5b6478;
    font-size: 12.5px;
}
.pbar-row {
    display: grid;
    grid-template-columns: 42px 34px 1fr 38px;
    align-items: center;
    gap: 9px;
    padding: 3px 0 3px 26px;
    font-size: 12.5px;
    color: #5b6478;
}
.pbar-row .lk {
}
.pbar-row .num {
    text-align: right;
    font-weight: 700;
    color: #39435c;
}
.pbar {
    height: 9px;
    border-radius: 99px;
    background: #eef1f7;
    overflow: hidden;
}
.pbar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--main-color), #4d9aff);
    width: 0;
    transition: width 1.1s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pbar-row .pct {
    font-weight: 700;
    color: var(--main-color);
}
.stage-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.stage-btns span {
    font-size: 12.5px;
    font-weight: 700;
    color: #2b5fd9;
    background: #fff;
    border: 1px solid #c9d8f5;
    border-radius: 9px;
    padding: 7px 12px;
    cursor: default;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.stage-btns span::after {
    content: "›";
    font-weight: 800;
}
.stage-btns span:hover {
    background: #f0f6ff;
    border-color: var(--main-color);
}
.cmd-list {
    margin-top: 8px;
}
.cmd-list li {
    padding: 3px 0 3px 14px;
    position: relative;
    color: #5b6478;
    font-size: 12.5px;
}
.cmd-list li::before {
    content: "·";
    position: absolute;
    left: 2px;
    color: var(--main-color);
    font-weight: 800;
}
.cmd-list code {
    background: #f2f5fa;
    border: 1px solid #e4e8f0;
    border-radius: 6px;
    padding: 1.5px 7px;
    color: #39435c;
    font-size: 12px;
}
.wini-input {
    margin: 16px 22px 20px;
    padding: 11px 16px;
    border: 1px solid #e4e8f0;
    border-radius: 12px;
    background: #fafbfd;
    color: #a6aec0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wini-input .send {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
    .gnb,
    .header-cta .btn-quote {
        display: none;
    }
    .burger {
        display: flex;
    }
    .pipeline {
        grid-template-columns: 1fr;
    }
    .pipe-link {
        transform: rotate(90deg);
        padding: 6px 0;
    }
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .os-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .field-grid {
        grid-template-columns: 1fr;
    }
    .wini-grid {
        grid-template-columns: 1fr;
    }
    .hero-shade {
        background: linear-gradient(
                180deg,
                rgba(10, 14, 26, 0.86) 0%,
                rgba(10, 14, 26, 0.72) 60%,
                rgba(10, 14, 26, 0.84) 100%
        );
    }
}
@media (max-width: 680px) {
    .compare {
        grid-template-columns: 1fr;
    }
    .cmp-arrow {
        transform: rotate(90deg);
        justify-self: center;
        animation: none;
    }
    .logic-grid {
        grid-template-columns: 1fr;
    }
    .metric-grid {
        grid-template-columns: 1fr;
    }
    .field-stats {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    .rv {
        opacity: 1;
        transform: none;
    }
    html {
        scroll-behavior: auto;
    }
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--main-color-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}
/* ===== FBW page extras ===== */
.intro-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 64px;
}
.is-card {
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    padding: 34px 28px;
    text-align: center;
    transition: all 0.3s;
    background: #fff;
}
.is-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(10, 30, 80, 0.1);
    border-color: rgba(0, 102, 255, 0.35);
}
.is-card .num {
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 800;
    color: var(--main-color);
    line-height: 1.05;
}
.is-card .num em {
    font-style: normal;
    font-size: 1.25rem;
    color: #222;
    margin-left: 3px;
}
.is-card p {
    font-size:var(--fs-desc-sub);
    color: #5b6478;
    margin-top: 10px;
}

/* flow */
.flow {
    margin-top: 70px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: clamp(6px, 1vw, 12px);
    align-items: stretch;
}
.flow-step {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 20px;
    padding: 30px 18px 26px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}
.flow-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(10, 30, 80, 0.1);
    border-color: rgba(0, 102, 255, 0.35);
}
.flow-step .fnum {
    position: absolute;
    top: 14px;
    right: 16px;
    font-weight: 800;
    color: rgba(0, 102, 255, 0.28);
}
.flow-step .ico {
    font-size: 42px;
    margin-bottom: 14px;
    filter: drop-shadow(0 8px 16px rgba(0, 102, 255, 0.2));
}
.flow-step .ico img {
    max-height:3rem;
    vertical-align: middle;
}
.flow-step h4 {
    font-size: var(--fs-label-sub);
    font-weight: 700;
    color:var(--main-color);
    margin-bottom: 7px;
}
.flow-step p {
    font-size: var(--fs-desc-sub);
    color: #5b6478;
    line-height: 1.5;
}
.flow-conn {
    align-self: center;
    color: var(--main-color);
}
.flow-conn svg {
    width: 38px;
    height: 18px;
}

/* 8 modules */
.mod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 60px;
}
.mod-card {
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    padding: 30px 26px;
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: all 0.35s;
}
.mod-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--main-color), var(--main-color-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}
.mod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 52px rgba(10, 30, 80, 0.12);
}
.mod-card:hover::before {
    transform: scaleX(1);
}
.mod-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.mod-ico {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(150deg, #edf3ff, #dcebff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    box-shadow:
            inset 0 -3px 8px rgba(0, 102, 255, 0.1),
            0 8px 18px rgba(0, 102, 255, 0.12);
}
.mod-ico img {
    max-height:2.5rem;
}
.mod-head b {
    font-size: var(--fs-label-sub);
    font-weight: 700;
    letter-spacing: -0.01em;
    display: block;
    line-height: 1.1;
}
.mod-head small {
    font-size: var(--fs-desc-sub);
    font-weight: 600;
    color: var(--main-color);
}
.mod-card p {
    font-size: var(--fs-desc-sub);
    color: #5b6478;
    line-height: 1.6;
    margin-bottom: 16px;
}
.mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.mod-tags span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #5b6478;
    background: #f5f7fb;
    border: 1px solid #e4e8f0;
    border-radius: 99px;
    padding: 5px 11px;
}

/* dark logic cards (reuse logic-card with dark variant) */
.logic-card.dark {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}
.logic-card.dark::before {
    background: linear-gradient(90deg, var(--main-color-cyan), var(--main-color));
}
.logic-card.dark:hover {
    box-shadow: 0 24px 56px rgba(0, 30, 90, 0.35);
}
.logic-card.dark .logic-emoji {
    background: linear-gradient(150deg, rgba(0, 102, 255, 0.18), rgba(0, 242, 255, 0.14));
    box-shadow: inset 0 -3px 8px rgba(0, 242, 255, 0.1);
}
.logic-card.dark .logic-name {
    color: #fff;
}
.logic-card.dark p {
    color: rgba(255, 255, 255, 0.62);
}
.logic-card.dark .logic-effect {
    color: #fff;
}

/* partners */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 60px;
}
.partner-card {
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    padding: 36px 30px;
    text-align: center;
    transition: all 0.3s;
}
.partner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(10, 30, 80, 0.1);
    border-color: rgba(0, 102, 255, 0.4);
}
.partner-card .p-ico {
    font-size: 40px;
    margin-bottom: 16px;
}
.partner-card .p-ico img {
    height:50px;
}
.partner-card b {
    display: block;
    font-size: var(--fs-label-sub);
    font-weight: 700;
    margin-bottom: 10px;
}
.partner-card p {
    font-size: var(--fs-desc-sub);
    color: #5b6478;
    line-height: 1.55;
}
/* 카드별 브랜드 색상 (타이틀 + 호버 테두리 동일) */
.partner-grid .partner-card:nth-child(1) b { color: #03C75A; }
.partner-grid .partner-card:nth-child(1):hover { border-color: #03C75A; box-shadow: 0 20px 46px rgba(3,199,90,.14); }

.partner-grid .partner-card:nth-child(2) b { color: #2772bd; }
.partner-grid .partner-card:nth-child(2):hover { border-color: #2772bd; box-shadow: 0 20px 46px rgba(39,114,189,.14); }

.partner-grid .partner-card:nth-child(3) b { color: #7b4af4; }
.partner-grid .partner-card:nth-child(3):hover { border-color: #7b4af4; box-shadow: 0 20px 46px rgba(123,74,244,.14); }

/* who it's for */
.onb-fbw {
    background: #f5f7fb;
}
.for-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 60px;
}
.for-card {
    text-align: center;
    background: #fff;
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    padding: 38px 32px;
    transition: all 0.3s;
}
.for-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(10, 30, 80, 0.1);
}
.for-card .ico {
    font-size: 60px;
    margin-bottom: 18px;
    filter: drop-shadow(0 6px 12px rgba(0, 102, 255, 0.15));
    text-align: center;
}
.for-card .ico img {
    max-height:4rem;
    vertical-align: middle;
}
.for-card h4 {
    font-size: var(--fs-label-sub);
    color:var(--main-color);
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.for-card p {
    font-size: var(--fs-desc-sub);
    color: #5b6478;
    line-height: 1.6;
}

/* hub-and-spoke integration infographic */
.hub {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 64px auto 0;
    aspect-ratio: 760/560;
}
.hub-rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 50%;
    animation: hub-spin 36s linear infinite;
}
@keyframes hub-spin {
    to { transform: rotate(360deg); }
}
.hub-rings .orbit-dash {
    fill: none;
    stroke: #c9d8f5;
    stroke-width: 1.5;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
}
/* 불빛 꼬리 — 넓고 흐릿한 잔상 */
.hub-rings .orbit-glow-trail {
    fill: none;
    stroke: rgba(0, 102, 255, 0.18);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 120 1464;
    stroke-dashoffset: 0;
    animation: orbit-light-a 12s linear infinite;
}
/* 불빛 코어 — 작고 밝은 빛점 (반대편 시작, 속도 다름) */
.hub-rings .orbit-glow-core {
    fill: none;
    stroke: rgba(0, 140, 255, 0.85);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 28 1556;
    stroke-dashoffset: -792;
    filter: drop-shadow(0 0 5px rgba(0, 102, 255, 0.7));
    animation: orbit-light-b 9s linear infinite;
}
@keyframes orbit-light-a {
    to { stroke-dashoffset: -1584; }
}
@keyframes orbit-light-b {
    from { stroke-dashoffset: -792; }
    to   { stroke-dashoffset: -2376; }
}
.hub-rings .spoke {
    stroke: #d8e2f4;
    stroke-width: 1.5;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
}
.hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 43%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hub-core .ring {
    position: absolute;
    border-radius: 50%;
}
.hub-core .r-outer {
    inset: 0;
    background: rgba(0, 102, 255, 0.08);
}
.hub-core .r-mid {
    inset: 11%;
    background: rgba(0, 102, 255, 0.16);
}
.hub-core .core-disc {
    position: relative;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #3a86ff, #0057e0 74%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    box-shadow:
            0 24px 60px rgba(0, 102, 255, 0.4),
            inset 0 -8px 24px rgba(0, 30, 90, 0.45);
}
.core-disc .core-mark {
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1;
    color: #fff;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
.core-disc b {
    font-size: clamp(15px, 1.9vw, 20px);
    font-weight: 800;
    line-height: 1.32;
    text-align: center;
    letter-spacing: -0.01em;
}
.node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 13px;
    width: clamp(190px, 26vw, 240px);
}
.node-ico {
    width: clamp(50px, 6vw, 62px);
    height: clamp(50px, 6vw, 62px);
    border-radius: 50%;
    background: linear-gradient(150deg, #EDF3FF, #DCEBFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 3vw, 30px);
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.node-ico img {
    max-height:2.5rem;
    vertical-align: middle;
}
.node-txt b {
    display: block;
    font-size: var(--fs-label-sub);
    font-weight: 800;
    color: #1a2236;
}
.node-txt b .en {
    color: var(--main-color);
    font-size: var(--fs-label-sub);
    font-weight: 700;
}
.node-txt p {
    font-size: var(--fs-desc-sub);
    color: #5b6478;
    line-height: 1.45;
}
.node.n-tl {
    top: 8%;
    left: 0;
}
.node.n-tr {
    top: 8%;
    right: 0;
    flex-direction: row-reverse;
    text-align: right;
}
.node.n-bl {
    bottom: 8%;
    left: 0;
}
.node.n-br {
    bottom: 8%;
    right: 0;
    flex-direction: row-reverse;
    text-align: right;
}
.hub-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 54px;
}
.hub-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 99px;
    background: #f5f7fb;
    border: 1px solid #e4e8f0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2236;
}
.hub-benefits .hb-ico {
    font-size: 18px;
}
.hub-benefits .hb-ico img {
    max-height:1.5rem;
    vertical-align: middle;
}
.ai-link {
    margin-top: 44px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 30px;
    border-radius: 20px;
    background: #0a0e1a;
    border: 1px solid rgba(0, 242, 255, 0.2);
    flex-wrap: wrap;
}
.ai-link .ail-ico {
    font-size: 38px;
    flex-shrink: 0;
}
.ai-link .ail-ico img {
    max-height: 4rem;
    vertical-align: middle;
}
.ai-link .ail-txt {
    flex: 1;
    min-width: 240px;
}
.ai-link .ail-txt b {
    color: #fff;
    font-size: var(--fs-label-sub);
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}
.ai-link .ail-txt p {
    font-size: var(--fs-desc-sub);
    color: rgba(255, 255, 255, 0.55);
}
.ai-link .ail-btn {
    padding: 12px 22px;
    border-radius: 99px;
    border: 1px solid rgba(0, 242, 255, 0.5);
    color: var(--main-color-cyan);
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
    transition: all 0.25s;
}
.ai-link .ail-btn:hover {
    background: rgba(0, 242, 255, 0.1);
    transform: translateY(-2px);
}

/* operational quality grid */
.opq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
}
.opq-card {
    text-align:center;
    border: 1px solid #e4e8f0;
    border-radius: 22px;
    padding: 34px 30px;
    background: #fff;
    transition: all 0.3s;
}
.opq-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(10, 30, 80, 0.1);
    border-color: rgba(0, 102, 255, 0.35);
}
.opq-card.hi {
    background: linear-gradient(160deg, #062052, #0066ff);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 24px 60px rgba(0, 102, 255, 0.28);
}
.opq-num {
    font-size: clamp(36px, 4vw, 50px);
    font-weight: 800;
    color: var(--main-color);
    line-height: 1;
}
.opq-card.hi .opq-num {
    color: #fff;
}
.opq-num em {
    font-style: normal;
    font-size: 1.25rem;
    color: var(--main-color-cyan);
    margin-left: 3px;
}
.opq-card.hi .opq-num em {
    -webkit-text-stroke: 0;
}
.opq-card b {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    margin: 14px 0 8px;
}
.opq-card p {
    font-size: var(--fs-desc-sub);
    color: #5b6478;
    line-height: 1.5;
}
.opq-card.hi p {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1024px) {
    .intro-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .flow {
        grid-template-columns: 1fr;
    }
    .flow-conn {
        text-align:center;
        padding: 20px 0;
    }
    .flow-conn svg {
        transform: rotate(90deg);
    }
    .mod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .partner-grid {
        grid-template-columns: 1fr;
    }
    .for-grid {
        grid-template-columns: 1fr;
    }
    .opq-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 780px) {
    /* hub → vertical stacked list on narrow screens */
    .hub {
        aspect-ratio: auto;
        max-width: 100%;
        padding-top: 8px;
    }
    .hub-rings {
        display: none;
    }
    .hub-core {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: clamp(150px, 52vw, 190px);
        margin: 0 auto 30px;
    }
    .node {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        box-sizing: border-box;
        flex-direction: row !important;
        text-align: left !important;
        margin-bottom: 14px;
        padding: 16px 18px;
        border: 1px solid #e4e8f0;
        border-radius: 16px;
        background: #fff;
    }
    .hub { overflow: hidden; }

    .hub-benefits {
        margin-top: 20px;
    }
}
@media (max-width: 680px) {
    .intro-stats {
        grid-template-columns: 1fr;
    }
    .mod-grid {
        grid-template-columns: 1fr;
    }
    .ai-link .ail-ico {
        margin: 0 auto;
    }
    .ai-link .ail-btn {
        margin:0 auto;
    }
    .opq-card {
        text-align:center;
    }
    .hub-benefits li {
        width:100%;
    }
}