/* ============================================================================
   Anvyr V2 — Components
   Principle blocks · Contact
   Product showcase styles live in pages/welcome.css
   ============================================================================ */

/* ── Principle Block ─────────────────────────────────────────────────────── */
.principle {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.principle__number {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.principle__title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.principle__body {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}


/* ── Contact Email Link ──────────────────────────────────────────────────── */
.contact-email {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    padding: 14px 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--ease-slow), transform var(--ease-slow), background var(--ease-slow);
}
.contact-email:hover {
    border-color: var(--border-active);
    background: var(--bg-elevated);
    transform: translateY(-2px);
    color: var(--text-primary);
}
[data-theme="light"] .contact-email {
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .contact-email:hover {
    box-shadow: var(--shadow-card-hover);
}

.contact-email__arrow {
    color: var(--text-muted);
    transition: transform var(--ease-slow), color var(--ease-slow);
}
.contact-email:hover .contact-email__arrow {
    transform: translateX(3px);
    color: var(--accent);
}


/* ── Status Dot (inline live indicator) ──────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: var(--space-xs);
    vertical-align: middle;
    position: relative;
    top: -1px;
}