/* ---------- HERO ---------- */
.hero{padding:64px 0 40px;background:linear-gradient(180deg,#F7FAFC,#FFFFFF)}
.hero-top{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;margin-bottom:36px}
@media(max-width:900px){.hero-top{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:600;line-height:1.12;margin-bottom:18px}
.hero h1 span{color:var(--blue)}
.hero p.lead{font-size:1.08rem;color:var(--muted);max-width:560px}
.hero-points{display:grid;gap:12px;font-size:.92rem;color:var(--ink-2)}
.hero-points li{list-style:none;display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.hero-points .ic{color:var(--teal);font-weight:700}
.hero-points b{color:var(--ink)}

/* ---------- CONSOLE: 3D + SMARTPHONE ---------- */
.console{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.console-head{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 14px;flex-wrap:wrap;gap:10px}
.console-head .t{font-family:"Lexend";font-weight:600;font-size:1rem}
.console-head .t small{display:block;font-family:"Inter";font-weight:500;color:var(--muted);font-size:.8rem}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--teal-soft);color:var(--teal)}
.console-grid{display:grid;grid-template-columns:1fr 290px;gap:18px}
@media(max-width:880px){.console-grid{grid-template-columns:1fr;justify-items:center}}
.stage3d{position:relative;width:100%;height:480px;border-radius:12px;overflow:hidden;background:radial-gradient(120% 95% at 50% 12%,#FFFFFF 0%,#EFF4F8 60%,#E2EAF1 100%);border:1px solid var(--line);cursor:grab;touch-action:none}
.stage3d:active{cursor:grabbing}
.stage3d canvas{display:block}
@media(max-width:560px){.stage3d{height:380px}}
.drag-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(14,27,44,.78);color:#fff;font-size:.76rem;font-weight:600;padding:7px 16px;border-radius:8px;pointer-events:none;white-space:nowrap;transition:opacity .5s}
.buzzer-badge{position:absolute;top:12px;left:12px;background:var(--amber-soft);color:#9A6206;font-size:.76rem;font-weight:700;padding:6px 12px;border-radius:8px;border:1px solid #F0D9AE;opacity:0;transform:translateY(-6px);transition:all .3s;z-index:5}
.buzzer-badge.on{opacity:1;transform:none;animation:wiggle .5s ease-in-out 3}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.state-pill{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:.74rem;font-weight:700;padding:6px 12px;color:var(--muted);z-index:5;display:flex;align-items:center;gap:7px}
.state-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.state-pill.alert{color:#9A6206;border-color:#F0D9AE;background:var(--amber-soft)} .state-pill.alert .dot{background:var(--amber);animation:blink 1s infinite}
.state-pill.ok{color:var(--green);border-color:#BFE2D0;background:var(--green-soft)} .state-pill.ok .dot{background:var(--green)}
@keyframes blink{50%{opacity:.3}}

/* smartphone */
.phone{width:280px;background:#0E1B2C;border-radius:34px;padding:10px;box-shadow:var(--shadow)}
.phone .screen{background:#F4F7FA;border-radius:26px;height:460px;padding:16px 12px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.phone .statusbar{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);padding:0 8px;font-weight:700}
.phone .lock-time{font-family:"Lexend";font-size:2.3rem;font-weight:600;text-align:center;line-height:1;margin:6px 0 2px;color:var(--ink)}
.phone .lock-date{text-align:center;font-size:.74rem;color:var(--muted);margin-bottom:8px}
.notif{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:10px 12px;font-size:.8rem;line-height:1.45;box-shadow:0 2px 10px rgba(14,27,44,.06);animation:slideIn .45s ease both;text-align:left}
.notif b{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--blue);margin-bottom:2px}
.notif.ok{border-left-color:var(--green)} .notif.ok b{color:var(--green)}
.notif.warn{border-left-color:var(--red);background:#FFFBFA} .notif.warn b{color:var(--red)}
.notif small{display:block;color:var(--muted);font-size:.68rem;margin-top:3px}
@keyframes slideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.phone-empty{font-size:.78rem;color:var(--muted);text-align:center;margin-top:12px}

.sim-hint{font-size:.94rem;color:var(--muted);min-height:3em;margin:16px auto 0;text-align:center;max-width:640px}
.sim-hint strong{color:var(--ink)}
.sim-controls{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.chip-btn{background:#fff;border:1.5px solid var(--line-strong);border-radius:10px;padding:11px 20px;font-family:"Inter";font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink-2);transition:all .15s}
.chip-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.chip-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.chip-btn.primary:hover{background:var(--blue-deep)}
.webgl-fallback{display:none;padding:60px 24px;text-align:center;color:var(--muted)}