/* ==========================================================================
   HOME – SECTIONS
   ========================================================================== */

.ws-section {
    background: var(--color-bg-secondary, #11102a);
    padding: 96px 0;
}

.ws-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md, 16px);
    margin-top: var(--margin-2xl, 48px);
}
.wsc {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-2xl, 24px);
    padding: var(--padding-lg, 24px) var(--padding-md, 16px);
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s,
                border-color .3s;
}
.wsc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-2xl, 24px) var(--radius-2xl, 24px) 0 0;
}
.wsc-work::before { background: var(--color-primary-500, #3d2c8d); }
.wsc-pers::before { background: var(--color-success, #34D399); }
.wsc-fin::before { background: var(--color-warning, #FBBF24); }
.wsc-add::before { background: var(--color-border, #4a3a8a); }
.wsc:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover, 0 20px 56px rgba(0, 0, 0, 0.45));
    border-color: rgba(151, 136, 229, 0.35);
}
.wsc-head {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
    margin-bottom: var(--margin-md, 16px);
}
.wsc-em { font-size: 1.5rem; }
.wsc-name {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    flex: 1;
}
.wsc-timer {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary-300, #6a5ab9);
    font-family: var(--font-family-mono, 'Fira Code', monospace);
    background: rgba(106, 90, 185, 0.1);
    padding: 3px var(--padding-sm, 8px);
    border-radius: var(--radius-sm, 4px);
}
.wsc-timer-off {
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    background: rgba(255, 255, 255, 0.04);
}
.wsc-feats {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wsc-feat {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    padding: 5px var(--padding-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    background: rgba(255, 255, 255, 0.03);
}
.wsc-feat-on {
    background: rgba(61, 44, 141, 0.15);
    border: 1px solid rgba(106, 90, 185, 0.2);
    color: var(--color-primary-100, #c4b7ff);
    font-weight: var(--font-weight-medium, 500);
}
.wsc-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border-style: dashed;
    border-color: rgba(106, 90, 185, 0.2);
    background: transparent;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.wsc-add:hover {
    border-color: rgba(106, 90, 185, 0.4);
    background: rgba(106, 90, 185, 0.04);
}
.wsc-add-i {
    font-size: 2.2rem;
    color: rgba(106, 90, 185, 0.3);
    margin-bottom: var(--margin-sm, 8px);
}
.wsc-add-t {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.wsc-add-s {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    opacity: .55;
    margin-top: 4px;
    text-align: center;
}

.feat-section {
    background: var(--color-bg-primary, #0d0b1e);
    padding: 96px 0;
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md, 16px);
}
.fc {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-xl, 16px);
    padding: var(--padding-lg, 24px);
    position: relative;
    overflow: hidden;
    transition: border-color .3s,
                transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s;
}
.fc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(106, 90, 185, 0.3), transparent);
}
.fc:hover {
    border-color: rgba(106, 90, 185, 0.38);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-feature-hover, 0 16px 48px rgba(0, 0, 0, 0.38));
}
.fic {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--margin-md, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.fic-timer { background: rgba(61, 44, 141, 0.15); }
.fic-goal { background: rgba(52, 211, 153, 0.1); }
.fic-note { background: rgba(167, 139, 250, 0.1); }
.fic-timeline { background: rgba(96, 165, 250, 0.1); }
.fic-pages { background: rgba(251, 191, 36, 0.1); }
.fic-events { background: rgba(251, 145, 117, 0.1); }
.fic-chat { background: rgba(96, 165, 250, 0.1); }
.fic-analytics { background: rgba(6, 182, 212, 0.1); }
.fic-timing { background: rgba(249, 115, 22, 0.1); }

.fn {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 6px;
}
.fd {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}

.timing-section {
    background: var(--color-bg-secondary, #11102a);
    padding: 96px 0;
}

.timing-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl, 32px);
    margin-top: var(--margin-2xl, 48px);
    align-items: start;
}
.timing-grid-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-muted, rgba(151, 136, 229, 0.18));
    border-radius: var(--radius-2xl, 24px);
    overflow: hidden;
}
.tgc-head {
    padding: var(--padding-md, 16px) var(--padding-xl, 32px) var(--padding-md, 16px);
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tgc-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
}
.tgc-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary-300, #6a5ab9);
    background: rgba(106, 90, 185, 0.12);
    border: 1px solid rgba(106, 90, 185, 0.2);
    padding: 3px var(--padding-sm, 8px);
    border-radius: var(--radius-pill, 9999px);
}
.tgc-body { padding: var(--padding-md, 16px) var(--padding-xl, 32px); }

.th-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
    margin-bottom: var(--margin-sm, 8px);
}
.th-lbl {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    width: 38px;
    flex-shrink: 0;
    font-family: var(--font-family-mono, 'Fira Code', monospace);
}
.th-bar {
    height: 24px;
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    padding: 0 var(--padding-sm, 8px);
    min-width: 40px;
}
.th-bar span {
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
.th-empty {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    flex: 1;
}
.th-now .th-lbl {
    color: var(--color-primary-300, #6a5ab9);
    font-weight: var(--font-weight-bold, 700);
}
.tgc-hint {
    padding: var(--padding-sm, 8px) var(--padding-xl, 32px);
    border-top: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    font-size: 11px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    text-align: center;
}

.timing-feats {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md, 16px);
}
.tf-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md, 16px);
    transition: transform .2s;
}
.tf-item:hover { transform: translateX(4px); }
.tf-ic {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 8px);
    background: rgba(106, 90, 185, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.tf-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 4px;
}
.tf-desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}

.tl-section {
    background: var(--color-bg-primary, #0d0b1e);
    padding: 96px 0;
}

.drill-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-lg, 24px);
    margin-top: var(--margin-2xl, 48px);
}
.dl {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-xl, 16px);
    padding: var(--padding-lg, 24px);
    position: relative;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s,
                border-color .3s;
}
.dl:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover, 0 20px 56px rgba(0, 0, 0, 0.45));
}
.dl.da {
    border-color: rgba(151, 136, 229, 0.5);
    box-shadow: 0 0 0 3px rgba(151, 136, 229, 0.1);
}
.dl-lbl {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-primary-300, #6a5ab9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--margin-md, 16px);
}
.dl-year {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.dyc {
    aspect-ratio: 1;
    border-radius: var(--radius-sm, 4px);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.dyc:hover {
    background: rgba(106, 90, 185, 0.2);
    color: var(--color-text-primary, #f0f0f0);
}
.dyc.da {
    background: var(--color-primary-600, #1c0c5b);
    color: var(--color-text-primary, #f0f0f0);
}
.dl-stats {
    margin-top: var(--margin-md, 16px);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dl-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px var(--padding-sm, 8px);
    border-radius: 6px;
}
.dl-stat-coding {
    background: rgba(61, 44, 141, 0.12);
    border: 1px solid rgba(106, 90, 185, 0.2);
}
.dl-stat-design {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.18);
}
.dl-stat-writing {
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.18);
}
.dl-stat-name {
    font-size: 12px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    font-weight: var(--font-weight-bold, 700);
}
.dl-stat-time {
    font-size: 11px;
    color: var(--color-primary-300, #6a5ab9);
    font-family: var(--font-family-mono, 'Fira Code', monospace);
}
.dl-stat-design .dl-stat-time { color: var(--color-info, #60A5FA); }
.dl-stat-writing .dl-stat-time { color: var(--color-success, #34D399); }

.dl-arr {
    position: absolute;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: rgba(106, 90, 185, 0.3);
    pointer-events: none;
}

.dl-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.dmc {
    aspect-ratio: 1;
    border-radius: var(--radius-sm, 4px);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    cursor: pointer;
}
.dmc.da {
    background: var(--color-primary-600, #1c0c5b);
    color: var(--color-text-primary, #f0f0f0);
}
.dl-month-info { margin-top: var(--margin-md, 16px); }
.dl-month-total {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--margin-sm, 8px);
}
.dl-month-progress {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill, 9999px);
    margin-bottom: var(--margin-sm, 8px);
    overflow: hidden;
}
.dl-month-progress-fill {
    width: 65%;
    height: 100%;
    background: var(--color-primary-500, #3d2c8d);
    border-radius: var(--radius-pill, 9999px);
}
.dl-month-hint {
    font-size: 11px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    line-height: var(--line-height-lg, 1.75);
}

.d24 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.d24r {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
}
.d24l {
    font-size: 11px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    width: 36px;
    flex-shrink: 0;
    font-family: var(--font-family-mono, 'Fira Code', monospace);
}
.d24b {
    height: 22px;
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    padding: 0 var(--padding-sm, 8px);
}
.d24b span {
    font-size: 10px;
    font-weight: var(--font-weight-bold, 700);
    color: rgba(255, 255, 255, 0.9);
}
.d24-empty {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    flex: 1;
}
.d24-hint {
    margin-top: var(--margin-sm, 8px);
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    line-height: var(--line-height-lg, 1.75);
}

.drill-cap {
    text-align: center;
    margin-top: var(--margin-lg, 24px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}

.pages-section {
    background: var(--color-bg-secondary, #11102a);
    padding: 96px 0;
}

.pages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-lg, 24px);
    margin-top: var(--margin-2xl, 48px);
    align-items: start;
}
.pg-card {
    border: 1px solid var(--color-border-muted, rgba(151, 136, 229, 0.18));
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    background: var(--color-bg-card, #1a1840);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s;
}
.pg-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover, 0 20px 56px rgba(0, 0, 0, 0.45));
}
.pg-top {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
    padding: var(--padding-sm, 8px) var(--padding-md, 16px);
    background: var(--color-bg-tertiary, #181634);
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
}
.pg-dots { display: flex; gap: 4px; }
.pg-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}
.pg-url {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-family: var(--font-family-mono, 'Fira Code', monospace);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pg-pub {
    font-size: 9px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-success, #34D399);
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: var(--radius-sm, 4px);
    padding: 2px 7px;
}
.pg-body { padding: var(--padding-md, 16px); }
.pg-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 800;
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: var(--margin-md, 16px);
}
.pg-sh {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    margin-bottom: 6px;
}
.pg-prog-wrap {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill, 9999px);
    margin-bottom: var(--margin-md, 16px);
    overflow: hidden;
}
.pg-prog {
    height: 100%;
    border-radius: var(--radius-pill, 9999px);
    background: var(--color-primary-500, #3d2c8d);
}
.pg-prog-dim { background: rgba(106, 90, 185, 0.25); }

.pg-placeholders {
    margin-top: var(--margin-md, 16px);
    padding: var(--padding-sm, 8px);
    background: rgba(106, 90, 185, 0.06);
    border: 1px solid rgba(106, 90, 185, 0.15);
    border-radius: var(--radius-md, 8px);
}
.pg-placeholder-label {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.pg-placeholder-row {
    font-size: 11px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    font-family: var(--font-family-mono, 'Fira Code', monospace);
    line-height: var(--line-height-lg, 1.75);
}
.pg-ph-key { color: var(--color-primary-300, #6a5ab9); }

.pg-ph {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm, 8px);
    margin-bottom: var(--margin-sm, 8px);
}
.pg-ph-cell {
    background: rgba(106, 90, 185, 0.08);
    border-radius: var(--radius-md, 8px);
    padding: var(--padding-sm, 8px);
    text-align: center;
}
.pg-ph-val {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 800;
    color: var(--color-primary-300, #6a5ab9);
}
.pg-ph-key {
    font-size: 8px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    margin-top: 2px;
}
.pg-ph-key code { font-size: 7px; }

.pg-recent { margin-top: var(--margin-md, 16px); }
.pg-recent-label {
    font-size: 12px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    margin-bottom: var(--margin-sm, 8px);
}
.pg-recent-item {
    font-size: 11px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.pg-recent-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pg-recent-dot-p300 { background: var(--color-primary-300, #6a5ab9); }
.pg-recent-dot-success { background: var(--color-success, #34D399); }
.pg-recent-dot-warn { background: var(--color-warning, #FBBF24); }

.pg-foot {
    padding: var(--padding-sm, 8px) var(--padding-md, 16px);
    background: var(--color-bg-tertiary, #181634);
    border-top: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    font-size: 11px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}

.pf-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md, 16px);
}
.pfl {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md, 16px);
    transition: transform .2s;
}
.pfl:hover { transform: translateX(4px); }
.pfl-ic {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md, 8px);
    background: rgba(106, 90, 185, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.pfl-t {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 4px;
}
.pfl-d {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}

.ea-section {
    background: var(--color-bg-primary, #0d0b1e);
    padding: 96px 0;
}

.ea-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl, 32px);
    margin-top: var(--margin-2xl, 48px);
    align-items: start;
}
.ea-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-2xl, 24px);
    overflow: hidden;
    transition: border-color .3s,
                transform .3s cubic-bezier(.22, 1, .36, 1);
}
.ea-card:hover {
    border-color: rgba(106, 90, 185, 0.35);
    transform: translateY(-4px);
}
.ea-head {
    padding: var(--padding-md, 16px) var(--padding-xl, 32px) var(--padding-md, 16px);
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
}
.ea-icon { font-size: 1.4rem; }
.ea-htitle {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
}
.ea-hsub {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}
.ea-body { padding: var(--padding-md, 16px) var(--padding-xl, 32px); }

.ev-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md, 16px);
    padding: var(--padding-sm, 8px) 0;
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
}
.ev-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ev-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.ev-dot-p300 { background: var(--color-primary-300, #6a5ab9); }
.ev-dot-success { background: var(--color-success, #34D399); }
.ev-dot-warn { background: var(--color-warning, #FBBF24); }
.ev-dot-muted { background: var(--color-text-muted-2, rgba(255, 255, 255, 0.3)); }

.ev-content { flex: 1; }
.ev-name {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 2px;
}
.ev-time {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.ev-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold, 700);
    padding: 3px 9px;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid;
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
}
.ev-soon {
    color: var(--color-warning, #FBBF24);
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.25);
}
.ev-rec {
    color: var(--color-info, #60A5FA);
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.25);
}
.ev-done {
    color: var(--color-success, #34D399);
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.25);
}

.al-item {
    display: flex;
    align-items: center;
    gap: var(--gap-md, 16px);
    padding: var(--padding-sm, 8px) 0;
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
}
.al-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.al-time {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 800;
    color: var(--color-text-primary, #f0f0f0);
    font-family: var(--font-family-mono, 'Fira Code', monospace);
    width: 80px;
    flex-shrink: 0;
}
.al-info { flex: 1; }
.al-name {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 2px;
}
.al-days {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.al-tog {
    width: 36px;
    height: 20px;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid var(--color-border-muted, rgba(151, 136, 229, 0.18));
    background: var(--color-bg-tertiary, #181634);
    position: relative;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}
.al-tog.on {
    background: var(--color-primary-600, #1c0c5b);
    border-color: var(--color-primary-600, #1c0c5b);
}
.al-tog::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-text-primary, #f0f0f0);
    transition: left .2s;
}
.al-tog.on::after { left: 18px; }

.chat-section {
    background: var(--color-bg-primary, #0d0b1e);
    padding: 96px 0;
}

.chat-demo {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--gap-xl, 32px);
    margin-top: var(--margin-2xl, 48px);
    align-items: start;
}
.chat-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-muted, rgba(151, 136, 229, 0.18));
    border-radius: var(--radius-2xl, 24px);
    overflow: hidden;
    transition: border-color .3s;
}
.chat-card:hover { border-color: rgba(106, 90, 185, 0.35); }

.chat-head {
    padding: var(--padding-md, 16px) var(--padding-md, 16px);
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
}
.ch-ws {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.ch-name {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
}
.ch-online {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-success, #34D399);
}
.ch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success, #34D399);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.85); }
}

.chat-filter {
    padding: var(--padding-sm, 8px) var(--padding-md, 16px);
    border-bottom: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    display: flex;
    gap: 6px;
}
.chat-filter-chip {
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    padding: 3px var(--padding-sm, 8px);
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.chat-filter-active {
    background: var(--color-primary-600, #1c0c5b);
    border-color: var(--color-primary-600, #1c0c5b);
    color: var(--color-text-primary, #f0f0f0);
}

.chat-body {
    padding: var(--padding-md, 16px) var(--padding-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 8px);
    min-height: 240px;
}
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-sm, 8px);
}
.chat-msg.mo { justify-content: flex-start; }
.chat-msg.ms { justify-content: flex-end; }

.chat-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    flex-shrink: 0;
}
.chat-av-p500 { background: var(--color-primary-500, #3d2c8d); }
.chat-av-warn { background: var(--color-warning, #FBBF24); color: #000; }

.chat-bub {
    max-width: 260px;
    padding: var(--padding-sm, 8px) var(--padding-md, 16px);
    border-radius: var(--radius-lg, 12px);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-md, 1.5);
}
.chat-bub.bo {
    background: var(--color-bg-tertiary, #181634);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}
.chat-bub.bs {
    background: var(--color-primary-600, #1c0c5b);
    color: var(--color-text-primary, #f0f0f0);
}
.chat-meta {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    margin-top: 3px;
}
.chat-meta-right { text-align: right; }

.chat-input-row {
    padding: var(--padding-md, 16px) var(--padding-md, 16px);
    border-top: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 8px);
}
.chat-inp {
    flex: 1;
    background: var(--color-bg-tertiary, #181634);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-pill, 9999px);
    padding: var(--padding-sm, 8px) var(--padding-md, 16px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-family: var(--font-family-sans, 'Roboto', sans-serif);
}
.chat-send {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-600, #1c0c5b);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.chat-feats {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md, 16px);
}
.chat-limits {
    padding: var(--padding-md, 16px);
    background: rgba(61, 44, 141, 0.1);
    border: 1px solid rgba(106, 90, 185, 0.2);
    border-radius: var(--radius-lg, 12px);
}
.chat-limits-title {
    font-size: 13px;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 6px;
}
.chat-limits-text {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}

.palette-section {
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-primary, #0d0b1e);
}
.pal-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, var(--color-bg-primary, #0d0b1e) 0%, #060414 60%);
}
.pal-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pal-wrap { position: relative; z-index: 5; }
.pal-tag { color: var(--color-primary-300, #6a5ab9); opacity: .7; }
.pal-title { color: var(--color-text-primary, #f0f0f0); }
.pal-sub { color: var(--color-text-secondary, rgba(255, 255, 255, 0.7)); opacity: .42; }

.textile-wrap {
    max-width: 880px;
    margin: var(--margin-2xl, 48px) auto 0;
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-2xl, 0 40px 100px rgba(0, 0, 0, 0.6));
}
.tr {
    display: flex;
    align-items: stretch;
    height: 54px;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1),
                filter .25s;
    position: relative;
}
.tr:hover {
    transform: scaleY(1.12);
    z-index: 2;
    filter: brightness(1.1);
}
.ts { flex: 1; height: 100%; }
.tr-dark { border-top: 1px solid rgba(255, 255, 255, 0.04); }

.ts-sky-1 { background: #e8eefc; }
.ts-sky-2 { background: #d0ddf7; }
.ts-sky-3 { background: #b4c6f2; }
.ts-sky-4 { background: #8ea7e9; }
.ts-sky-5 { background: #7286d3; }

.ts-gold-1 { background: #fcf2d6; }
.ts-gold-2 { background: #fae8b5; }
.ts-gold-3 { background: #f5de9c; }
.ts-gold-4 { background: #f0d48a; }
.ts-gold-5 { background: #e8c872; }

.ts-azure-1 { background: #ebf8ff; }
.ts-azure-2 { background: #d9f0ff; }
.ts-azure-3 { background: #bce0ff; }
.ts-azure-4 { background: #89cff3; }
.ts-azure-5 { background: #00a9ff; }

.ts-meadow-1 { background: #f4fce3; }
.ts-meadow-2 { background: #ebf9c6; }
.ts-meadow-3 { background: #d9f5a9; }
.ts-meadow-4 { background: #bfea7c; }
.ts-meadow-5 { background: #fff67e; }

.ts-indigo-1 { background: var(--color-primary-700, #0f082d); }
.ts-indigo-2 { background: var(--color-primary-600, #1c0c5b); }
.ts-indigo-3 { background: var(--color-primary-500, #3d2c8d); }
.ts-indigo-4 { background: var(--color-primary-300, #6a5ab9); }
.ts-indigo-5 { background: var(--color-primary-100, #c4b7ff); }

.ts-arctic-1 { background: #1b262c; }
.ts-arctic-2 { background: #0f4c75; }
.ts-arctic-3 { background: #3a739c; }
.ts-arctic-4 { background: #6699c2; }
.ts-arctic-5 { background: #99bbd9; }

.ts-ocean-1 { background: #0b2447; }
.ts-ocean-2 { background: #19376d; }
.ts-ocean-3 { background: #3a599a; }
.ts-ocean-4 { background: #5c7bb7; }
.ts-ocean-5 { background: #89a9e4; }

.ts-twilight-1 { background: #0c134f; }
.ts-twilight-2 { background: #1d267d; }
.ts-twilight-3 { background: #4a53a9; }
.ts-twilight-4 { background: #7a83d9; }
.ts-twilight-5 { background: #aab3ff; }

.tr-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: rgba(0, 0, 0, 0.55);
    background: rgba(255, 255, 255, 0.72);
    padding: 3px var(--padding-md, 16px);
    border-radius: var(--radius-pill, 9999px);
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s;
}
.tr-dark .tr-name {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.5);
}
.tr:hover .tr-name { opacity: 1; }

.tr-sem {
    display: flex;
    height: 100%;
    flex-shrink: 0;
}
.tr-sem div { width: 22px; height: 100%; }

.tr-sem-green { background: #059669; }
.tr-sem-orange { background: #f97316; }
.tr-sem-red { background: #dc2626; }
.tr-sem-blue { background: #1d4ed8; }
.tr-sem-green2 { background: #16A34A; }
.tr-sem-amber { background: #D97706; }
.tr-sem-red2 { background: #B91C1C; }
.tr-sem-blue2 { background: #2563EB; }
.tr-sem-green3 { background: #059669; }
.tr-sem-amber2 { background: #F59E0B; }
.tr-sem-red3 { background: #E11D48; }
.tr-sem-cyan { background: #0284C7; }
.tr-sem-green4 { background: #16A34A; }
.tr-sem-amber3 { background: #F59E0B; }
.tr-sem-red4 { background: #E11D48; }
.tr-sem-cyan2 { background: #06B6D4; }
.tr-sem-success { background: var(--color-success, #34D399); }
.tr-sem-warn { background: var(--color-warning, #FBBF24); }
.tr-sem-error { background: var(--color-error, #FB7185); }
.tr-sem-info { background: var(--color-info, #60A5FA); }
.tr-sem-success2 { background: var(--color-success, #34D399); }
.tr-sem-amber4 { background: #F59E0B; }
.tr-sem-red5 { background: #F87171; }
.tr-sem-info2 { background: var(--color-info, #60A5FA); }
.tr-sem-teal { background: #2DD4BF; }
.tr-sem-amber5 { background: #F59E0B; }
.tr-sem-red6 { background: #EF4444; }
.tr-sem-sky { background: #38BDF8; }
.tr-sem-success3 { background: var(--color-success, #34D399); }
.tr-sem-warn2 { background: var(--color-warning, #FBBF24); }
.tr-sem-rose { background: #F43F5E; }
.tr-sem-lightblue { background: #93C5FD; }

.tr-div {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--padding-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tr-div span {
    font-size: 10px;
    font-weight: var(--font-weight-bold, 700);
    color: rgba(255, 200, 80, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.pal-cap {
    text-align: center;
    margin-top: var(--margin-lg, 24px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    opacity: .3;
}

.security-section {
    background: var(--color-bg-secondary, #11102a);
    padding: 96px 0;
}

.sec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md, 16px);
    margin-top: var(--margin-2xl, 48px);
}
.sec-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-xl, 16px);
    padding: var(--padding-lg, 24px);
    transition: border-color .3s,
                transform .3s cubic-bezier(.22, 1, .36, 1);
}
.sec-card:hover {
    border-color: rgba(106, 90, 185, 0.38);
    transform: translateY(-4px);
}
.sec-icon { font-size: 1.8rem; margin-bottom: var(--margin-md, 16px); }
.sec-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: var(--margin-sm, 8px);
}
.sec-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.si {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}
.si-ic {
    font-size: 12px;
    margin-top: 1px;
    flex-shrink: 0;
}

.sec-bottom {
    background: var(--color-bg-primary, #0d0b1e);
    border: 1px solid var(--color-border-muted, rgba(151, 136, 229, 0.18));
    border-radius: var(--radius-2xl, 24px);
    padding: var(--padding-2xl, 48px);
    margin-top: var(--margin-2xl, 48px);
    display: flex;
    align-items: center;
    gap: var(--gap-xl, 32px);
    transition: border-color .3s;
}
.sec-bottom:hover { border-color: rgba(106, 90, 185, 0.35); }
.sec-b-icon {
    font-size: 2.8rem;
    flex-shrink: 0;
}
.sec-b-title {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 800;
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: 6px;
}
.sec-b-sub {
    font-size: var(--font-size-md, 1rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
    max-width: 620px;
}
.sec-email { color: var(--color-primary-300, #6a5ab9); }

.community-section {
    background: var(--color-bg-primary, #0d0b1e);
    padding: 96px 0;
}

.comm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md, 16px);
    margin-top: var(--margin-2xl, 48px);
}
.comm-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-xl, 16px);
    padding: var(--padding-lg, 24px);
    transition: border-color .3s,
                transform .3s cubic-bezier(.22, 1, .36, 1);
}
.comm-card:hover {
    border-color: rgba(106, 90, 185, 0.38);
    transform: translateY(-4px);
}
.comm-icon { font-size: 1.8rem; margin-bottom: var(--margin-md, 16px); }
.comm-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: var(--margin-sm, 8px);
}
.comm-desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}

.comm-banner {
    background: linear-gradient(135deg, rgba(61, 44, 141, 0.4), rgba(28, 12, 91, 0.6));
    border: 1px solid rgba(106, 90, 185, 0.25);
    border-radius: var(--radius-2xl, 24px);
    padding: var(--padding-2xl, 48px);
    margin-top: var(--margin-xl, 32px);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.comm-banner::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(rgba(106, 90, 185, 0.15), transparent 65%);
    pointer-events: none;
}
.comm-banner-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: var(--margin-sm, 8px);
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
}
.comm-banner-sub {
    font-size: var(--font-size-md, 1rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
    max-width: 640px;
    margin: 0 auto var(--margin-lg, 24px);
    position: relative;
    z-index: 1;
}
.comm-pills {
    display: flex;
    gap: var(--gap-sm, 8px);
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.comm-pill {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    padding: 6px var(--padding-md, 16px);
    border-radius: var(--radius-pill, 9999px);
    background: rgba(106, 90, 185, 0.12);
    border: 1px solid rgba(106, 90, 185, 0.25);
    color: var(--color-primary-300, #6a5ab9);
}

.sum-section {
    background: var(--color-bg-secondary, #11102a);
    padding: 96px 0;
}

.sum-demo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md, 16px);
    margin-top: var(--margin-2xl, 48px);
}
.sum-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-xl, 16px);
    padding: var(--padding-lg, 24px);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s;
}
.sum-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}
.sum-day {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--margin-sm, 8px);
}
.sum-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: var(--margin-sm, 8px);
}
.sum-body {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    line-height: var(--line-height-lg, 1.75);
}
.sum-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm, 8px);
    margin-top: var(--margin-md, 16px);
}
.ss {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.ss span {
    color: var(--color-primary-300, #6a5ab9);
    font-weight: var(--font-weight-bold, 700);
}

.sum-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    border-color: rgba(106, 90, 185, 0.2);
    background: transparent;
    min-height: 180px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.sum-add:hover {
    border-color: rgba(106, 90, 185, 0.4);
    background: rgba(106, 90, 185, 0.04);
}
.sum-add-i {
    font-size: 2.2rem;
    color: rgba(106, 90, 185, 0.3);
    margin-bottom: var(--margin-sm, 8px);
}
.sum-add-t {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.sum-add-s {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
    opacity: .5;
    margin-top: 4px;
    text-align: center;
    line-height: var(--line-height-md, 1.5);
}

.plat-section {
    background: var(--color-bg-primary, #0d0b1e);
    padding: 96px 0;
    text-align: center;
}

.plat-grid {
    display: flex;
    justify-content: center;
    gap: var(--gap-md, 16px);
    margin-top: var(--margin-2xl, 48px);
    flex-wrap: wrap;
}
.plat-card {
    background: var(--color-bg-card, #1a1840);
    border: 1px solid var(--color-border-subtle, rgba(151, 136, 229, 0.10));
    border-radius: var(--radius-xl, 16px);
    padding: var(--padding-xl, 32px);
    min-width: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm, 8px);
    transition: border-color .3s,
                transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s;
}
.plat-card:hover {
    border-color: rgba(106, 90, 185, 0.38);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}
.plat-ic {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.plat-ic-windows { background: rgba(61, 44, 141, 0.15); }
.plat-ic-linux { background: rgba(52, 211, 153, 0.1); }
.plat-ic-android { background: rgba(96, 165, 250, 0.1); }
.plat-ic-web { background: rgba(61, 44, 141, 0.2); }

.plat-n {
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #f0f0f0);
}
.plat-s {
    font-size: 10px;
    color: var(--color-text-muted-2, rgba(255, 255, 255, 0.3));
}
.plat-web {
    border-color: rgba(106, 90, 185, 0.3);
    background: rgba(61, 44, 141, 0.08);
}
.plat-web .plat-n { color: var(--color-primary-300, #6a5ab9); }
.web-badge {
    font-size: 10px;
    font-weight: var(--font-weight-bold, 700);
    background: var(--color-primary-600, #1c0c5b);
    color: var(--color-text-primary, #f0f0f0);
    padding: 3px var(--padding-sm, 8px);
    border-radius: var(--radius-pill, 9999px);
    font-family: var(--font-family-mono, 'Fira Code', monospace);
}

.cta-final {
    text-align: center;
    background: var(--color-bg-secondary, #11102a);
    position: relative;
    overflow: hidden;
    padding: 120px var(--padding-xl, 32px) 140px;
}
.cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(rgba(61, 44, 141, 0.2), transparent 65%);
    pointer-events: none;
    animation: glowpulse 5s ease-in-out infinite;
}
.cta-h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -2px;
    color: var(--color-text-primary, #f0f0f0);
    margin-bottom: var(--margin-md, 16px);
    position: relative;
    z-index: 2;
    line-height: var(--line-height-sm, 1.25);
}
.cta-sub {
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    font-size: var(--font-size-lg, 1.125rem);
    margin-bottom: var(--margin-xl, 32px);
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-lg, 1.75);
}
.cta-btns {
    display: flex;
    gap: var(--gap-md, 16px);
    justify-content: center;
    position: relative;
    z-index: 2;
}
.cta-btn-primary {
    font-size: 1.05rem;
    padding: 15px 36px;
}
.cta-btn-ghost {
    font-size: 1.05rem;
    padding: 15px 28px;
}

@media (max-width: 1024px) {
    .ws-cards,
    .feat-grid,
    .sec-grid,
    .comm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .timing-demo,
    .pages-grid,
    .ea-grid,
    .chat-demo,
    .sum-demo {
        grid-template-columns: 1fr;
    }
    .drill-demo { grid-template-columns: 1fr; }
    .dl-arr { display: none; }
}

@media (max-width: 768px) {
    .ws-cards,
    .feat-grid,
    .sec-grid,
    .comm-grid,
    .sum-demo {
        grid-template-columns: 1fr;
    }
    .sec-bottom {
        flex-direction: column;
        padding: var(--padding-lg, 24px);
        text-align: center;
    }
    .comm-banner {
        padding: var(--padding-xl, 32px);
    }
    .cta-btns {
        flex-direction: column;
        align-items: center;
    }
    .cta-btn-primary,
    .cta-btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cta-h2 { font-size: clamp(1.6rem, 4vw, 2rem); }
    .cta-sub { font-size: var(--font-size-md, 1rem); }
    .comm-banner-title { font-size: 1.2rem; }
    .comm-pill { font-size: var(--font-size-xs, 0.75rem); padding: 4px var(--padding-md, 16px); }
}