@media (max-width: 768px) {
    .about-seven-image .small-image { display: none; }
    .about-seven-image .count-card  { display: none !important; }
}

/* ── Animated circuit hero ── */
#ot-circuit-canvas {
    display: block;
    width: 100%;
    border-radius: 20px;
    filter: drop-shadow(0 0 40px rgba(30,136,229,0.18));
}

/* ── SCADA widget ── */
#scada-container {
    background: #020d1a;
    border-radius: 16px;
    border: 1px solid rgba(30,136,229,.25);
    padding: 24px;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    position: relative;
}
.scada-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(30,136,229,.18);
}
.scada-title { color: #1E88E5; font-size: 13px; letter-spacing: 2px; font-weight: bold; }
.scada-dot   { background: #00e676; width: 10px; height: 10px; border-radius: 50%; margin-left: auto; }
.scada-dot.alarm { background: #ff5252; animation: sblink .8s ease-in-out infinite; }
@keyframes sblink { 0%,100%{opacity:1} 50%{opacity:.2} }

.pipe-svg { width: 100%; height: 200px; }

.process-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 600px) { .process-panel { grid-template-columns: 1fr; } }

.gauge-wrap { background: #030f1f; border-radius: 10px; padding: 14px; border: 1px solid rgba(30,136,229,.12); }
.gauge-label { color: #1E88E5; font-size: 11px; letter-spacing: 1px; margin-bottom: 8px; }
.gauge-bar-bg { background: #0a1f33; border-radius: 4px; height: 10px; overflow: hidden; }
.gauge-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease, background .4s ease; }
.gauge-val  { color: #fff; font-size: 22px; font-weight: bold; margin-top: 6px; }
.gauge-unit { color: #1E88E5; font-size: 11px; margin-left: 4px; }

.alarm-log {
    background: #030f1f; border-radius: 10px; padding: 14px;
    border: 1px solid rgba(30,136,229,.12); grid-column: 1 / -1;
    max-height: 130px; overflow-y: auto;
}
.alarm-log-title { color: #1E88E5; font-size: 11px; letter-spacing: 1px; margin-bottom: 10px; }
.alarm-entry       { font-size: 12px; color: #a8bfcf; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.alarm-entry.crit  { color: #ff5252; }
.alarm-entry.warn  { color: #ffab40; }
.alarm-entry.ok    { color: #69f0ae; }

.hint-box {
    display: none;
    background: #0d2a45;
    border: 1px solid #1E88E5;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: #a8d8f0;
    line-height: 1.6;
}
.hint-box.visible { display: block; }
.hint-box strong  { color: #1E88E5; }

.atk-wrap { position: relative; display: inline-block; }
.atk-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #0d2a45;
    border: 1px solid #1E88E5;
    border-radius: 10px;
    padding: 10px 14px;
    width: 270px;
    font-size: 12px;
    color: #a8d8f0;
    line-height: 1.5;
    z-index: 20;
    pointer-events: none;
    white-space: normal;
    text-align: left;
}
.atk-tip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1E88E5;
}
.atk-wrap:hover .atk-tip { display: block; }

.attack-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.atk-btn {
    background: #0a2035;
    border: 1px solid rgba(255,80,80,.3);
    color: #ff6b6b;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    transition: .2s;
    white-space: nowrap;
}
.atk-btn:hover  { background: #1a1020; border-color: #ff4444; }
.atk-btn.green  { border-color: rgba(0,230,118,.3); color: #69f0ae; }
.atk-btn.green:hover { background: #0a1f18; }
.atk-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── animated hacker cursor ── */
#scada-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: left .55s cubic-bezier(.25,.46,.45,.94), top .55s cubic-bezier(.25,.46,.45,.94), opacity .25s;
}
#scada-cursor svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.9)); }
#scada-cursor.clicking #cursor-ptr { transform: scale(0.8); transform-origin: 3px 2px; transition: transform .07s; }
#cursor-ptr { transition: transform .12s; }
.atk-btn-auto-hover { background: #1a1020 !important; border-color: #ff4444 !important; box-shadow: 0 0 12px rgba(255,68,68,.4); }

.scada-alarm-overlay {
    position: absolute; inset: 0;
    background: rgba(255,0,0,.04);
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s;
}
.scada-alarm-overlay.active { opacity: 1; }

.pipe-flow { stroke-dasharray: 8 6; animation: pFlow 2s linear infinite; }
.pipe-flow.attack  { stroke: #ff4444 !important; animation: pFlow .8s linear infinite; }
.pipe-flow.stopped { animation-play-state: paused; opacity: .3; }
@keyframes pFlow { to { stroke-dashoffset: -28; } }

/* ── threat cards ── */
.threat-card {
    padding: 30px; background: #061a2e;
    border-radius: 20px; border: 1px solid rgba(30,136,229,.15);
    transition: .25s; color: #fff;
    height: 100%; display: flex; flex-direction: column;
}
.threat-card:hover { background: #08223e; transform: translateY(-4px); box-shadow: 0 0 25px rgba(30,136,229,.15); }
.threat-card h4, .threat-card p { color: #fff; }

/* ── capability cards ── */
.ot-cap-card {
    background: #071726; padding: 36px 26px; border-radius: 20px;
    text-align: center; border: 1px solid rgba(255,255,255,.06);
    transition: .25s; color: #fff;
    height: 100%; display: flex; flex-direction: column; align-items: center;
}
.ot-cap-card:hover { background: #0a2138; transform: translateY(-6px); box-shadow: 0 0 25px rgba(30,136,229,.2); }
.ot-cap-card i { font-size: 42px; color: #1E88E5; margin-bottom: 16px; display: block; }
.ot-cap-card h4, .ot-cap-card p { color: #fff; }
.ot-cap-card p { flex-grow: 1; }

/* ── who cards ── */
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-top: 40px; }
.who-card {
    background: rgba(30,136,229,.05); border-radius: 12px; padding: 24px;
    border: 1px solid rgba(30,136,229,.14); text-align: center; transition: .3s; color: #fff;
}
.who-card:hover { background: rgba(30,136,229,.1); transform: translateY(-4px); }
.who-icon { font-size: 34px; margin-bottom: 10px; }
.who-card h4 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.who-card p  { color: #9bb5c8; font-size: 14px; line-height: 1.5; }

/* ── reg cards ── */
.reg-card { background: rgba(30,136,229,.04); border-radius: 12px; transition: .3s; border: 1px solid rgba(30,136,229,.1); }
.reg-card:hover { background: rgba(30,136,229,.09); transform: translateY(-4px); }
.reg-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.reg-text  { font-size: 14px; line-height: 1.45; color: #c9d6e1; }

/* Former inline styles, converted to classes */
.ot-faq-question{font-size:20px;color:white;}
.ot-subtitle-blue{color:#1E88E5;}
.ot-heading-white{color:#ffffff;}
.ot-text-white{color:white;}
.ot-section-dark-py100{background:#02101f;padding:100px 0;}
.ot-section-intro-680{color:#c8d8e8;max-width:680px;margin:16px auto 0;}
.ot-hero-section{background:#041326;padding:140px 0 120px;position:relative;}
.ot-hero-kicker-wrap{margin-bottom:0;}
.ot-hero-text{max-width:680px;color:#c8d8e8;font-size:17px;line-height:1.7;}
.ot-hero-canvas-wrap{position:relative;max-width:560px;margin-left:auto;}
.ot-section-navy-py100{background:#041326;padding:100px 0;}
.ot-scada-status-nominal{color:#69f0ae;font-size:11px;}
.ot-gauge-temp-initial{width:72%;background:#1E88E5;}
.ot-gauge-pres-initial{width:64%;background:#1E88E5;}
.ot-attack-label-box{margin-top:14px;padding:10px 14px;background:#030f1f;border-radius:8px;border:1px solid rgba(30,136,229,.1);}
.ot-attack-label-text{color:#1E88E5;font-size:11px;letter-spacing:1px;}
.ot-section-navy-py100b{padding:100px 0;background:#041326;}
.ot-section-reg{background:#02101f;padding:100px 0;color:#fff;}
.ot-reg-heading-wrap{max-width:700px;margin:0 auto;}
.ot-reg-kicker{letter-spacing:2px;color:#1E88E5;}
.ot-reg-intro-text{color:#c9d6e1;font-size:16px;}
.ot-section-faq{background:#041326;padding:100px 0;color:#fff;}
.ot-cta-footer{background:linear-gradient(135deg,#041326,#0a3560);text-align:center;padding:100px 40px;}