/* ===== FEATURE DETAIL PAGES ===== */
.feature-cards-section {
    padding: var(--section-padding) 0 0;
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.feature-nav-card {
    background: white;
    padding: 36px;
    border-radius: 24px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: var(--transition-smooth);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.feature-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.feature-nav-card .feature-icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.feature-nav-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.feature-nav-card p {
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 15px;
}

/* Feature Detailed Layout */
.feature-detailed-section {
    padding: var(--section-padding) 0;
}

.feature-detailed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

.feature-detailed:last-child {
    margin-bottom: 0;
}

.feature-detailed.reverse {
    direction: rtl;
}

.feature-detailed.reverse > * {
    direction: ltr;
}

.feature-detailed-content {
    display: flex;
    flex-direction: column;
}

.feature-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-100);
    color: var(--primary);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    width: fit-content;
}

.feature-detailed-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text);
}

.feature-detailed-content > p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 32px;
}

.feature-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--text);
}

.feature-benefits i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
}

.feature-detailed-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-mockup {
    background: var(--color-50);
    border-radius: 24px;
    padding: 32px;
    width: 100%;
    border: 1px solid var(--color-200);
}

.feature-image {
    width: 100%;
    max-width: 520px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Additional Features */
.additional-features {
    padding: var(--section-padding) 0;
    background: var(--color-50);
}

.additional-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.additional-card {
    background: white;
    padding: 40px 32px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition-smooth);
}

.additional-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.additional-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-200) 0%, var(--color-300) 100%);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.additional-icon i {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.additional-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.additional-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* ===== RESPONSIVE: 968px ===== */
@media (max-width: 968px) {
    .feature-detailed {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 80px;
    }

    .feature-detailed.reverse { direction: ltr; }
    .feature-detailed-visual { order: 2; }
    .feature-detailed-content { order: 1; }
    .feature-detailed-content h2 { font-size: 32px; }
    .feature-detailed-content > p { font-size: 16px; }
    .feature-mockup { padding: 24px; }

    .feature-image {
        max-width: 100%;
        border-radius: 12px;
    }

    .additional-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .additional-card { padding: 32px 24px; }

    .feature-cards-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

/* ===== RESPONSIVE: 640px ===== */
@media (max-width: 640px) {
    .feature-detailed { gap: 32px; margin-bottom: 60px; }
    .feature-detailed-content h2 { font-size: 26px; }
    .feature-detailed-content > p { font-size: 15px; margin-bottom: 24px; }
    .feature-benefits li { font-size: 15px; }
    .feature-mockup { padding: 16px; }
    .feature-tag { font-size: 13px; padding: 5px 12px; }
    .feature-image { border-radius: 10px; }

    .additional-grid { grid-template-columns: 1fr; }
    .additional-card { padding: 28px 20px; }

    .feature-cards-section { padding: var(--section-padding) 0 0; }
}

/* ===== Feature SVG Animations ===== */
.feature-svg {
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: visible;
}

/* -- Drag & drop animation (rooms) -- */
.svg-drag-room {
    animation: dragRoom 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dragRoom {
    0%, 10% { transform: translateY(0); }
    25%     { transform: translateY(-8px) scale(1.01); }
    40%     { transform: translateY(70px); }
    55%     { transform: translateY(70px); }
    70%     { transform: translateY(0) scale(1); }
    100%    { transform: translateY(0); }
}

.svg-drop-line {
    animation: showDropLine 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes showDropLine {
    0%, 10%  { opacity: 0; }
    25%, 50% { opacity: 1; }
    60%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-cursor {
    animation: moveCursor 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes moveCursor {
    0%       { transform: translate(410px, 170px); opacity: 0; }
    8%       { opacity: 1; }
    10%      { transform: translate(410px, 170px); }
    25%      { transform: translate(412px, 162px); }
    40%      { transform: translate(415px, 240px); }
    55%      { transform: translate(415px, 240px); }
    70%      { transform: translate(410px, 170px); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { transform: translate(410px, 170px); opacity: 0; }
}

/* -- Typing animation (line items) -- */
.svg-typing-row {
    animation: fadeInRow 5s ease infinite;
}

@keyframes fadeInRow {
    0%, 15%  { opacity: 0; }
    30%      { opacity: 1; }
    100%     { opacity: 1; }
}

.svg-type-cursor {
    animation: typeBlink 0.8s steps(2) infinite, typeCursorMove 5s ease infinite;
}

@keyframes typeBlink {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes typeCursorMove {
    0%, 10%  { transform: translateX(0); opacity: 1; }
    30%      { transform: translateX(80px); opacity: 1; }
    35%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .svg-drag-room,
    .svg-drop-line,
    .svg-cursor,
    .svg-typing-row,
    .svg-type-cursor,
    .svg-typing-row { opacity: 1; }
    .svg-cursor { opacity: 0; }
    .svg-drop-line { opacity: 0; }
}

/* ===== Sketching Page SVG Animations ===== */

/* -- Draw Room animation -- */
.svg-draw-rect {
    animation: drawRect 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes drawRect {
    0%, 5%   { width: 0; height: 0; opacity: 0; }
    8%       { width: 0; height: 0; opacity: 1; }
    30%      { width: 240px; height: 0; }
    50%      { width: 240px; height: 168px; }
    55%      { stroke-dasharray: 6 3; }
    60%      { stroke-dasharray: 0; fill-opacity: 0.06; }
    65%, 85% { width: 240px; height: 168px; opacity: 1; stroke-dasharray: 0; fill-opacity: 0.06; }
    92%      { opacity: 1; }
    98%      { opacity: 0; }
    100%     { width: 0; height: 0; opacity: 0; }
}

.svg-draw-corners {
    animation: fadeCorners 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.svg-corner-2 { animation: showCorner2 5s ease infinite; }
.svg-corner-3 { animation: showCorner3 5s ease infinite; }
.svg-corner-4 { animation: showCorner4 5s ease infinite; }

@keyframes fadeCorners {
    0%, 7%  { opacity: 0; }
    10%     { opacity: 1; }
    85%     { opacity: 1; }
    92%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes showCorner2 {
    0%, 28% { opacity: 0; } 32% { opacity: 1; } 85% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes showCorner3 {
    0%, 48% { opacity: 0; } 52% { opacity: 1; } 85% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes showCorner4 {
    0%, 48% { opacity: 0; } 52% { opacity: 1; } 85% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; }
}

.svg-draw-dims {
    animation: showDims 5s ease infinite;
}

@keyframes showDims {
    0%, 58% { opacity: 0; }
    65%     { opacity: 1; }
    85%     { opacity: 1; }
    92%     { opacity: 0; }
    100%    { opacity: 0; }
}

.svg-new-room-label {
    animation: showNewRoom 5s ease infinite;
}

@keyframes showNewRoom {
    0%, 62% { opacity: 0; transform: scale(0.8) translate(20px, 16px); }
    70%     { opacity: 1; transform: scale(1) translate(0, 0); }
    85%     { opacity: 1; }
    92%     { opacity: 0; }
    100%    { opacity: 0; }
}

.svg-sketch-cursor {
    animation: sketchCursorMove 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes sketchCursorMove {
    0%       { transform: translate(90px, 115px); opacity: 0; }
    5%       { opacity: 1; }
    8%       { transform: translate(90px, 115px); }
    30%      { transform: translate(330px, 115px); }
    50%      { transform: translate(330px, 283px); }
    55%, 70% { transform: translate(210px, 200px); }
    80%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { transform: translate(90px, 115px); opacity: 0; }
}

/* -- Openings tool cycling -- */
.svg-tab-pill {
    animation: tabSlide 8s ease infinite;
}

@keyframes tabSlide {
    0%, 10%  { transform: translateX(0); }
    20%, 30% { transform: translateX(108px); }
    45%, 55% { transform: translateX(216px); }
    70%, 80% { transform: translateX(318px); }
    92%, 100% { transform: translateX(0); }
}

.svg-tab-1 {
    animation: tabTextActive1 8s ease infinite;
}
.svg-tab-2 {
    animation: tabTextActive2 8s ease infinite;
}
.svg-tab-3 {
    animation: tabTextActive3 8s ease infinite;
}
.svg-tab-4 {
    animation: tabTextActive4 8s ease infinite;
}

@keyframes tabTextActive1 {
    0%, 10% { fill: white; } 15%, 88% { fill: #64748b; } 92%, 100% { fill: white; }
}
@keyframes tabTextActive2 {
    0%, 15% { fill: #64748b; } 20%, 30% { fill: white; } 35%, 100% { fill: #64748b; }
}
@keyframes tabTextActive3 {
    0%, 40% { fill: #64748b; } 45%, 55% { fill: white; } 60%, 100% { fill: #64748b; }
}
@keyframes tabTextActive4 {
    0%, 65% { fill: #64748b; } 70%, 80% { fill: white; } 85%, 100% { fill: #64748b; }
}

.svg-opening-door {
    animation: showPanel1 8s ease infinite;
}
.svg-opening-window {
    animation: showPanel2 8s ease infinite;
}
.svg-opening-shapes {
    animation: showPanel3 8s ease infinite;
}
.svg-opening-areas {
    animation: showPanel4 8s ease infinite;
}

@keyframes showPanel1 {
    0%, 10%  { opacity: 1; } 15% { opacity: 0; } 88% { opacity: 0; } 92%, 100% { opacity: 1; }
}
@keyframes showPanel2 {
    0%, 15%  { opacity: 0; } 20%, 30% { opacity: 1; } 35%, 100% { opacity: 0; }
}
@keyframes showPanel3 {
    0%, 40%  { opacity: 0; } 45%, 55% { opacity: 1; } 60%, 100% { opacity: 0; }
}
@keyframes showPanel4 {
    0%, 65%  { opacity: 0; } 70%, 80% { opacity: 1; } 85%, 100% { opacity: 0; }
}

/* -- Measurements stagger -- */
.svg-dim {
    opacity: 0;
}

.svg-dim-1 { animation: dimReveal 4s ease infinite; animation-delay: 0s; }
.svg-dim-2 { animation: dimReveal 4s ease infinite; animation-delay: 0.3s; }
.svg-dim-3 { animation: dimReveal 4s ease infinite; animation-delay: 0.6s; }
.svg-dim-4 { animation: dimReveal 4s ease infinite; animation-delay: 0.9s; }
.svg-dim-5 { animation: dimReveal 4s ease infinite; animation-delay: 1.2s; }
.svg-dim-6 { animation: dimReveal 4s ease infinite; animation-delay: 1.5s; }

@keyframes dimReveal {
    0%, 10%  { opacity: 0; transform: scale(0.9); }
    20%      { opacity: 1; transform: scale(1); }
    75%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-area-badge {
    animation: areaBadgeReveal 4s ease infinite;
    animation-delay: 1.8s;
    opacity: 0;
}

@keyframes areaBadgeReveal {
    0%, 5%   { opacity: 0; transform: scale(0.85); }
    15%      { opacity: 1; transform: scale(1); }
    75%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Reduced motion for sketching SVGs */
@media (prefers-reduced-motion: reduce) {
    .svg-draw-rect,
    .svg-draw-corners,
    .svg-corner-2,
    .svg-corner-3,
    .svg-corner-4,
    .svg-draw-dims,
    .svg-new-room-label,
    .svg-sketch-cursor,
    .svg-tab-pill,
    .svg-tab-1, .svg-tab-2, .svg-tab-3, .svg-tab-4,
    .svg-opening-door, .svg-opening-window, .svg-opening-shapes, .svg-opening-areas,
    .svg-dim, .svg-area-badge {
        animation: none !important;
    }
    .svg-draw-rect { width: 240px; height: 168px; opacity: 1; stroke-dasharray: 0; }
    .svg-draw-corners, .svg-draw-dims, .svg-new-room-label { opacity: 1; }
    .svg-corner-2, .svg-corner-3, .svg-corner-4 { opacity: 1; }
    .svg-sketch-cursor { opacity: 0; }
    .svg-opening-door { opacity: 1; }
    .svg-opening-window, .svg-opening-shapes, .svg-opening-areas { opacity: 0; }
    .svg-dim, .svg-area-badge { opacity: 1; transform: none; }
}

/* ===== AI Page SVG Animations ===== */

/* -- Typing prompt (section 1) -- */
.svg-ai-char { opacity: 0; }

.svg-ai-c1  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.05s; }
.svg-ai-c2  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.1s; }
.svg-ai-c3  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.15s; }
.svg-ai-c4  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.2s; }
.svg-ai-c5  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.25s; }
.svg-ai-c6  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.3s; }
.svg-ai-c7  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.35s; }
.svg-ai-c8  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.4s; }
.svg-ai-c9  { animation: aiCharReveal 8s ease infinite; animation-delay: 0.45s; }
.svg-ai-c10 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.5s; }
.svg-ai-c11 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.55s; }
.svg-ai-c12 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.6s; }
.svg-ai-c13 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.65s; }
.svg-ai-c14 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.7s; }
.svg-ai-c15 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.75s; }
.svg-ai-c16 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.8s; }
.svg-ai-c17 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.85s; }
.svg-ai-c18 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.9s; }
.svg-ai-c19 { animation: aiCharReveal 8s ease infinite; animation-delay: 0.95s; }
.svg-ai-c20 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.0s; }
.svg-ai-c21 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.05s; }
.svg-ai-c22 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.1s; }
.svg-ai-c23 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.15s; }
.svg-ai-c24 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.2s; }
.svg-ai-c25 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.25s; }
.svg-ai-c26 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.3s; }
.svg-ai-c27 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.35s; }
.svg-ai-c28 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.4s; }
.svg-ai-c29 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.45s; }
.svg-ai-c30 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.5s; }
.svg-ai-c31 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.55s; }
.svg-ai-c32 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.6s; }
.svg-ai-c33 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.65s; }
.svg-ai-c34 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.7s; }
.svg-ai-c35 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.75s; }
.svg-ai-c36 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.8s; }
.svg-ai-c37 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.85s; }
.svg-ai-c38 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.9s; }
.svg-ai-c39 { animation: aiCharReveal 8s ease infinite; animation-delay: 1.95s; }
.svg-ai-c40 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.0s; }
.svg-ai-c41 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.05s; }
.svg-ai-c42 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.1s; }
.svg-ai-c43 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.15s; }
.svg-ai-c44 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.2s; }
.svg-ai-c45 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.25s; }
.svg-ai-c46 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.3s; }
.svg-ai-c47 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.35s; }
.svg-ai-c48 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.4s; }
.svg-ai-c49 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.45s; }
.svg-ai-c50 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.5s; }
.svg-ai-c51 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.55s; }
.svg-ai-c52 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.6s; }
.svg-ai-c53 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.65s; }
.svg-ai-c54 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.7s; }
.svg-ai-c55 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.75s; }
.svg-ai-c56 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.8s; }
.svg-ai-c57 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.85s; }
.svg-ai-c58 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.9s; }
.svg-ai-c59 { animation: aiCharReveal 8s ease infinite; animation-delay: 2.95s; }
.svg-ai-c60 { animation: aiCharReveal 8s ease infinite; animation-delay: 3.0s; }
.svg-ai-c61 { animation: aiCharReveal 8s ease infinite; animation-delay: 3.05s; }
.svg-ai-c62 { animation: aiCharReveal 8s ease infinite; animation-delay: 3.1s; }
.svg-ai-c63 { animation: aiCharReveal 8s ease infinite; animation-delay: 3.15s; }
.svg-ai-c64 { animation: aiCharReveal 8s ease infinite; animation-delay: 3.2s; }
.svg-ai-c65 { animation: aiCharReveal 8s ease infinite; animation-delay: 3.25s; }

@keyframes aiCharReveal {
    0%, 1%  { opacity: 0; }
    2%      { opacity: 1; }
    80%     { opacity: 1; }
    90%     { opacity: 0; }
    100%    { opacity: 0; }
}

.svg-ai-cursor {
    animation: aiCursorBlink 0.7s steps(2) infinite, aiCursorMove 8s ease infinite;
}

@keyframes aiCursorBlink {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes aiCursorMove {
    0%       { transform: translate(0, 0); }
    1%       { transform: translate(0, 0); }
    21%      { transform: translate(220px, 0); }
    22%      { transform: translate(0, 20px); }
    41%      { transform: translate(190px, 20px); }
    42%, 80% { transform: translate(190px, 20px); }
    90%      { transform: translate(190px, 20px); opacity: 1; }
    95%      { opacity: 0; }
    100%     { transform: translate(0, 0); opacity: 0; }
}

.svg-ai-btn {
    animation: aiBtnPulse 8s ease infinite;
}

@keyframes aiBtnPulse {
    0%, 42%  { opacity: 0.4; }
    45%      { opacity: 1; }
    100%     { opacity: 1; }
}

.svg-ai-dot1 { animation: aiDotBounce 8s ease infinite; animation-delay: 3.6s; }
.svg-ai-dot2 { animation: aiDotBounce 8s ease infinite; animation-delay: 3.8s; }
.svg-ai-dot3 { animation: aiDotBounce 8s ease infinite; animation-delay: 4.0s; }

@keyframes aiDotBounce {
    0%, 1%   { opacity: 0; }
    2%, 8%  { opacity: 0.8; }
    10%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-ai-result {
    opacity: 0;
    animation: aiResultReveal 8s ease infinite;
}

@keyframes aiResultReveal {
    0%, 56%  { opacity: 0; transform: translateY(8px); }
    62%      { opacity: 1; transform: translateY(0); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* -- Line item generation (section 2) -- */
.svg-ai-row { opacity: 0; }

.svg-ai-row-1 { animation: aiRowSlideIn 6s ease infinite; animation-delay: 0.3s; }
.svg-ai-row-2 { animation: aiRowSlideIn 6s ease infinite; animation-delay: 0.9s; }
.svg-ai-row-3 { animation: aiRowSlideIn 6s ease infinite; animation-delay: 1.5s; }

@keyframes aiRowSlideIn {
    0%, 5%   { opacity: 0; transform: translateY(6px); }
    12%      { opacity: 1; transform: translateY(0); }
    75%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-ai-shimmer {
    animation: aiShimmer 6s ease infinite;
}

@keyframes aiShimmer {
    0%       { opacity: 0; }
    5%       { opacity: 0.6; }
    30%      { opacity: 0.6; }
    40%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-ai-total {
    opacity: 0;
    animation: aiTotalReveal 6s ease infinite;
}

@keyframes aiTotalReveal {
    0%, 32%  { opacity: 0; }
    40%      { opacity: 1; }
    75%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* -- Pricing suggestions (section 3) -- */
.svg-ai-price { opacity: 0; }

.svg-ai-price-1 { animation: aiPriceReveal 7s ease infinite; animation-delay: 0.2s; }
.svg-ai-price-2 { animation: aiPriceReveal 7s ease infinite; animation-delay: 0.7s; }
.svg-ai-price-3 { animation: aiPriceReveal 7s ease infinite; animation-delay: 1.2s; }

@keyframes aiPriceReveal {
    0%, 3%   { opacity: 0; transform: translateX(-6px); }
    10%      { opacity: 1; transform: translateX(0); }
    72%      { opacity: 1; }
    85%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-ai-conf { opacity: 0; animation: aiConfReveal 7s ease infinite; }

@keyframes aiConfReveal {
    0%, 22%  { opacity: 0; }
    30%      { opacity: 1; }
    72%      { opacity: 1; }
    85%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-ai-conf-fill {
    animation: aiConfFill 7s ease infinite;
}

@keyframes aiConfFill {
    0%, 25%  { width: 0; }
    40%      { width: 166px; }
    72%      { width: 166px; }
    85%      { width: 0; }
    100%     { width: 0; }
}

/* Reduced motion for AI SVGs */
@media (prefers-reduced-motion: reduce) {
    .svg-ai-char,
    .svg-ai-btn,
    .svg-ai-result,
    .svg-ai-row,
    .svg-ai-shimmer,
    .svg-ai-total,
    .svg-ai-price,
    .svg-ai-conf,
    .svg-ai-conf-fill,
    .svg-ai-cursor,
    .svg-ai-dot1, .svg-ai-dot2, .svg-ai-dot3 {
        animation: none !important;
    }
    .svg-ai-char { opacity: 1; }
    .svg-ai-cursor { opacity: 0; }
    .svg-ai-btn { opacity: 1; }
    .svg-ai-result { opacity: 1; transform: none; }
    .svg-ai-row { opacity: 1; transform: none; }
    .svg-ai-shimmer { opacity: 0; }
    .svg-ai-total { opacity: 1; }
    .svg-ai-price { opacity: 1; transform: none; }
    .svg-ai-conf { opacity: 1; }
    .svg-ai-conf-fill { width: 166px; }
    .svg-ai-dot1, .svg-ai-dot2, .svg-ai-dot3 { opacity: 0; }
}

/* ===== Clients Page SVG Animations ===== */

/* -- Client cards stagger in -- */
.svg-cl-card { opacity: 0; }

.svg-cl-card-1 { animation: clCardIn 5s ease infinite; animation-delay: 0s; }
.svg-cl-card-2 { animation: clCardIn 5s ease infinite; animation-delay: 0.3s; }
.svg-cl-card-3 { animation: clCardIn 5s ease infinite; animation-delay: 0.6s; }

@keyframes clCardIn {
    0%, 5%   { opacity: 0; transform: translateY(8px); }
    15%      { opacity: 1; transform: translateY(0); }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* -- Estimate timeline stagger -- */
.svg-cl-est { opacity: 0; }

.svg-cl-est-1 { animation: clEstIn 6s ease infinite; animation-delay: 0s; }
.svg-cl-est-2 { animation: clEstIn 6s ease infinite; animation-delay: 0.4s; }
.svg-cl-est-3 { animation: clEstIn 6s ease infinite; animation-delay: 0.8s; }
.svg-cl-est-4 { animation: clEstIn 6s ease infinite; animation-delay: 1.2s; }

@keyframes clEstIn {
    0%, 3%   { opacity: 0; transform: translateX(-8px); }
    12%      { opacity: 1; transform: translateX(0); }
    75%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* -- Client detail panels -- */
.svg-cl-notes {
    animation: clPanelFade 6s ease infinite;
}

.svg-cl-activity {
    animation: clPanelFade 6s ease infinite;
    animation-delay: 0.3s;
}

@keyframes clPanelFade {
    0%, 5%   { opacity: 0; transform: translateY(6px); }
    15%      { opacity: 1; transform: translateY(0); }
    78%      { opacity: 1; }
    92%      { opacity: 0; }
    100%     { opacity: 0; }
}

.svg-cl-note-cursor {
    animation: clNoteBlink 0.8s steps(2) infinite;
}

@keyframes clNoteBlink {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* -- Activity items stagger -- */
.svg-cl-act { opacity: 0; }

.svg-cl-act-1 { animation: clActIn 6s ease infinite; animation-delay: 0.5s; }
.svg-cl-act-2 { animation: clActIn 6s ease infinite; animation-delay: 0.9s; }
.svg-cl-act-3 { animation: clActIn 6s ease infinite; animation-delay: 1.3s; }

@keyframes clActIn {
    0%, 3%   { opacity: 0; }
    10%      { opacity: 1; }
    72%      { opacity: 1; }
    85%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Reduced motion for Clients SVGs */
@media (prefers-reduced-motion: reduce) {
    .svg-cl-card,
    .svg-cl-est,
    .svg-cl-notes,
    .svg-cl-activity,
    .svg-cl-act,
    .svg-cl-note-cursor {
        animation: none !important;
    }
    .svg-cl-card, .svg-cl-est, .svg-cl-notes, .svg-cl-activity, .svg-cl-act { opacity: 1; transform: none; }
    .svg-cl-note-cursor { opacity: 0; }
}