/* ============================================================
   TECHNOLOGY PAGE CSS
   ============================================================ */

/* ---- Tech Paragraphs ---- */
.tech-para {
    font-size: 16px; color: var(--text-gray);
    line-height: 1.9; margin-bottom: 20px;
}

/* ---- Ionization Diagram ---- */
.ion-diagram { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 24px 0; }
.ion-step { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ion-node {
    padding: 12px 20px; border-radius: 12px; text-align: center;
    font-size: 14px; font-weight: 700; line-height: 1.4;
}
.water-in  { background: #E0F7FA; color: var(--text-dark); }
.electrode {
    background: linear-gradient(135deg, #1E3A5F, #14B8A6); color: white;
    animation: pulse 2s infinite;
}
.ion-split { display: flex; flex-direction: column; gap: 8px; }
.alkaline  { background: var(--primary); color: white; }
.acidic    { background: #E2E8F0; color: var(--text-gray); }
.ion-arrow { font-size: 24px; color: var(--primary); animation: shimmer 1.5s infinite; }

/* ---- Molecule Animation ---- */
.ph-scale-wrap { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; }
.ph-scale { width: 100%; max-width: 280px; }
.ph-bar {
    height: 16px; border-radius: 8px;
    background: linear-gradient(to right, #EF4444, #F59E0B, #22C55E, #14B8A6, #3B82F6);
    position: relative; margin-bottom: 6px;
}
.ph-indicator {
    position: absolute; top: -4px; width: 24px; height: 24px;
    border-radius: 50%; background: var(--primary);
    border: 3px solid white; box-shadow: var(--shadow-md);
    left: calc(9/14 * 100% - 12px);
    animation: phSlide 3s ease-in-out infinite alternate;
}
@keyframes phSlide {
    from { left: calc(9.0/14 * 100% - 12px); }
    to   { left: calc(9.5/14 * 100% - 12px); }
}
.ph-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-gray); }
.ph-value { text-align: center; margin-top: 12px; font-size: 15px; color: var(--text-dark); }
.ph-value strong { color: var(--primary); }

.molecule-dots { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.m-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%;
    font-size: 13px; font-weight: 700; animation: ionMove 2s ease-in-out infinite alternate;
}
.alkaline-dot { background: rgba(20,184,166,.15); color: var(--primary); }
.acidic-dot   { background: rgba(239,68,68,.1); color: #EF4444; animation-direction: alternate-reverse; }
@keyframes ionMove {
    from { transform: translateX(-8px) scale(0.95); }
    to   { transform: translateX(8px) scale(1.05); }
}

/* ---- Step Cards ---- */
.step-card {
    cursor: pointer; text-align: center; position: relative; padding-bottom: 48px;
    border: 1px solid var(--border);
}
.step-card:hover, .step-card.accordion-open { border-color: var(--primary); }
.step-num {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: white;
    font-size: 20px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    transition: transform 0.35s;
}
.step-card:hover .step-num, .step-card.accordion-open .step-num { transform: rotate(360deg); }
.step-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); }
.step-desc  { font-size: 14px; color: var(--text-gray); line-height: 1.7; }
.step-detail { overflow: hidden; transition: max-height 0.35s ease; }
.step-detail-text {
    font-size: 13px; color: var(--primary); padding: 12px;
    background: rgba(20,184,166,0.06); border-radius: 8px;
    line-height: 1.7;
}
.step-toggle {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--primary); display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(20,184,166,0.1);
}
.toggle-icon { transition: transform 0.3s; }
.accordion-open .toggle-icon { transform: rotate(180deg); }

/* ---- Tech Feature Cards ---- */
.tech-feature-card {
    border: 2px solid transparent; cursor: pointer;
    transition: all var(--transition);
}
.tech-feature-card:hover  { border-color: rgba(20,184,166,0.3); }
.tech-feature-card.card-active {
    background: linear-gradient(135deg, var(--primary), var(--dark-teal));
    border-color: transparent;
}
.tech-feature-card.card-active .tech-card-title,
.tech-feature-card.card-active .tech-card-desc { color: white; }
.tech-feature-card.card-active .icon-circle { background: rgba(255,255,255,0.2); color: white; }
.tech-card-title { font-size: 18px; font-weight: 700; margin: 16px 0 10px; color: var(--text-dark); }
.tech-card-desc  { font-size: 14px; color: var(--text-gray); line-height: 1.7; }
.tech-card-info  {
    font-size: 13px; color: white; margin-top: 12px; padding: 10px 12px;
    background: rgba(255,255,255,0.15); border-radius: 8px;
    display: none; line-height: 1.7;
}
.tech-feature-card.card-active .tech-card-info { display: block; }

/* ---- Tech Benefit Cards ---- */
.tech-benefit-card {
    cursor: pointer; position: relative; padding-bottom: 44px;
    border: 1px solid var(--border);
}
.tech-benefit-card:hover, .tech-benefit-card.accordion-open { border-color: var(--primary); }
.tech-benefit-card h3 { font-size: 18px; font-weight: 700; margin: 16px 0 10px; }

/* ---- Conveyor Animation ---- */
.conveyor-anim { animation: slideRight 2s linear infinite; }
.cert-rotate    { animation: spin 8s linear infinite; transform-origin: 120px 35px; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .ion-step { flex-direction: column; }
    .ion-split { flex-direction: row; }
}