/* Shared black-and-mint visual language with the Firasa website. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --bg: #0a0a0a; --bg-2: #101412; --card: #161a18; --card-2: #1c2420;
  --line: #2b3430; --txt: #eeeded; --txt-dim: #afbbb4;
  --accent: #00ffab; --accent-dk: #009e6a;
}
body { background: #0a0a0a; font-family: Inter, system-ui, sans-serif; }
body::before, body::after { display: none; }
.topbar { background: #0a0a0aee; border-color: var(--line); }
.hero__title { letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.hero__sub { color: var(--txt-dim); max-width: 650px; margin-inline: auto; }
.card, .tile, .cat, .stat, .lsn, .opt, .helper-panel, .helper-bubble {
  background: #161a18; border-color: #303b34; box-shadow: none; backdrop-filter: none;
}
.tile { border-radius: 20px; padding: 24px; }
.tile:hover, .lsn:hover, .opt:hover { background: #1b2821; border-color: #00ffab80; }
.dock { background: #111713; border-color: #303b34; box-shadow: none; }
.exit-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#profileOut, #trQuit { min-width: 44px; min-height: 44px; justify-content: center; }
#profileOut:focus-visible, #trQuit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 899px) { .dock { transform: none; } }
.dock__i { color: #c0cec6; }
.who-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.who-list li { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; min-width: 0; padding: 16px; overflow: hidden; border: 1px solid #303b34; border-radius: 16px; }
.who-list li::before { display: none; }
.who-list strong, .who-list span { display: block; min-width: 0; margin: 8px 0 0; overflow-wrap: anywhere; }
.who-scene { grid-row: 1 / 3; width: 240px; max-width: 100%; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 12px; background: #101713; }
.who-scene img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; display: block; animation: who-reveal 4s ease-out both; }
@keyframes who-reveal { from { transform: scale(1.04); filter: brightness(.85); } to { transform: scale(1); filter: brightness(1); } }
@media (max-width: 639px) { .who-list li { grid-template-columns: minmax(0, 1fr); gap: 8px; } .who-scene { grid-row: auto; width: 216px; } }
@media (prefers-reduced-motion: reduce) { .who-scene img { animation: none; } }
.dock__i.is-on { background: #00ffab18; color: #00ffab; }
.btn--primary { background: #00ffab; color: #07140e; border-color: #00ffab; border-radius: 999px; box-shadow: 0 6px 24px #00ffab20; }
.btn--primary:hover { background: #8affd6; color: #07140e; }
.muted, .lesson__hint, .lsn__m, .cat__head > .muted { color: #afbbb4; }
.helper { background: #17251d; border-color: #456252; }
.home-start .btn { min-height: 48px; padding-inline: 28px; }
button:focus-visible, a:focus-visible { outline-color: #00ffab; }
input, select, textarea { accent-color: #00ffab; }
::selection { background: #00ffab; color: #07140e; }
@media (max-width: 420px) { .tile { padding: 18px; } }
/* Original user artwork is displayed whole; the device photo replaces the portrait. */
.topbar__mask .firasa-brand { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 0; }
#screen-home .hero__mask { width: min(70%, 448px); height: auto; margin-inline: auto; }
.firasa-devices { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 20px; }
.device-demo { position: relative; display: block !important; container-type: inline-size; }
.device-demo__stage { position: relative; }
.device-demo__label { position: absolute; top: 3%; left: 3%; border-radius: 8px; padding: 5px 8px; background: #061510e8; color: #d2fbea; font-size: clamp(9px, 2cqw, 12px); }
.device-demo__screen { position: absolute; overflow: hidden; border-radius: 5px; pointer-events: none; --delay: 0s; }
.device-demo__screen--laptop { left: 17%; top: 20%; width: 18%; height: 25%; }
.device-demo__screen--phone { left: 79%; top: 33%; width: 10%; height: 13%; --delay: 1s; }
.device-demo__scan { position: absolute; left: 0; right: 0; height: 2px; background: #85ffdc; box-shadow: 0 0 12px 3px #00ffab88; animation: device-scan 9s linear infinite; animation-delay: var(--delay); }
.device-demo__target { position: absolute; inset: 8%; border: 2px solid #00ffab; border-radius: 30%; box-shadow: inset 0 0 15px #00ffab44; animation: device-detected 9s infinite; animation-delay: var(--delay); }
.device-demo__detected { position: absolute; bottom: 0; left: 0; right: 0; background: #061510ed; color: #adffdf; font-size: clamp(7px, 1.5cqw, 10px); text-align: center; animation: device-detected 9s infinite; animation-delay: var(--delay); }
.device-demo__results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; text-align: left; }
.device-demo__result { display: grid; grid-template-columns: 1fr; padding: 12px; border: 1px solid #315345; border-radius: 12px; background: #111e18; font-size: 13px; line-height: 1.5; --delay: 0s; }
.device-demo__result--phone { --delay: 1s; }
.device-demo__result strong { color: #8affd0; margin-bottom: 4px; }
.device-demo__working, .device-demo__conclusion { grid-area: 2 / 1; }
.device-demo__working { animation: device-working 9s infinite; animation-delay: var(--delay); }
.device-demo__conclusion { animation: device-conclusion 9s infinite; animation-delay: var(--delay); opacity: 0; }
@keyframes device-scan { 0% { top: 0; opacity: 0; } 5% { opacity: 1; } 35% { top: 90%; opacity: 1; } 40%,100% { top: 90%; opacity: 0; } }
@keyframes device-detected { 0%,34%,85%,100% { opacity: 0; } 38%,78% { opacity: 1; } }
@keyframes device-working { 0%,34%,95%,100% { opacity: 1; } 40%,90% { opacity: 0; } }
@keyframes device-conclusion { 0%,39%,95%,100% { opacity: 0; } 45%,90% { opacity: 1; } }
@media (max-width: 480px) { .device-demo__results { grid-template-columns: 1fr; } }
@media (max-width: 480px) { #screen-home .hero__mask { width: min(86%, 380px); } }
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; height: auto; }
  .topbar .room-key, .topbar .plan-badge { max-width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .device-demo * { animation: none !important; }
  .device-demo__scan, .device-demo__working { visibility: hidden; }
  .device-demo__target, .device-demo__detected, .device-demo__conclusion { opacity: 1; }
}