/* ============================================================
   SecureSmartHomes — Shared Design System
   Single source of truth for tokens, nav, typography, cards,
   backgrounds, and the animation library.
   Load order: Tailwind CDN first, then this file.
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root {
  --tan: #bf8b5e;
  --tan-bright: #d4a373;
  --ink: #0a0a0c;
  --ink-2: #141418;
  --ink-3: #1c1c21;
  --line: #2a2a31;
  --line-soft: #1c1c21;
  --live: #4ade80;
  --warn: #f59e0b;
}

/* ---------- 2 · BASE ---------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: var(--ink);
}
body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #e8e8ec;
  -webkit-font-smoothing: antialiased;
}
.font-mono, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- 3 · UTILITY CLASSES ---------- */
.text-tan { color: var(--tan); }
.text-tan-bright { color: var(--tan-bright); }
.bg-tan { background-color: var(--tan); }
.border-tan { border-color: var(--tan); }
.bg-ink { background-color: var(--ink); }
.bg-ink-2 { background-color: var(--ink-2); }
.bg-ink-3 { background-color: var(--ink-3); }
.border-line { border-color: var(--line); }
.bg-line { background-color: var(--line); }

/* ---------- 4 · BACKGROUND PATTERNS ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(191,139,94,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,139,94,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-grid-tight {
  background-image:
    linear-gradient(rgba(191,139,94,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,139,94,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-radial {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(191,139,94,.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(191,139,94,.08), transparent 70%),
    var(--ink);
}

/* ---------- 5 · EYEBROWS / PILLAR NUMBERS ---------- */
.pillar-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--tan);
}
.eyebrow {
  color: var(--tan);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .3em;
}

/* ---------- 6 · NAVIGATION ---------- */
nav.top {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(10,10,12,.75);
  border-bottom: 1px solid rgba(191,139,94,.15);
}

.nav-dropdown { position: relative; }
.nav-dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: rgba(10,10,12,.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(191,139,94,.25);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .18s ease;
  z-index: 100;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown:focus-within .nav-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: #d1d5db;
  font-size: 13px;
  border-radius: 8px;
  transition: all .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-content a:hover {
  background: rgba(191,139,94,.12);
  color: #fff;
}
.dropdown-arrow { transition: transform .2s ease; }
.nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }

/* Mobile */
@media (max-width: 1024px) {
  .lg-only { display: none !important; }
}
@media (min-width: 1025px) {
  .mobile-only { display: none !important; }
}
.mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  background: rgba(0,0,0,.5);
  border-radius: 8px;
  margin-top: .25rem;
}
.mobile-dropdown-content.open { max-height: 500px; }
.mobile-dropdown-content a {
  padding-left: 2rem !important;
  font-size: .875rem;
  border-left: 2px solid rgba(191,139,94,.3);
  margin-left: 1rem;
}

/* ---------- 7 · CARDS & COMPONENTS ---------- */
.pkg-card { transition: all .25s ease; }
.pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--tan);
}

/* FAQ accordion (smart-locks / security-cameras style) */
.faq { }
.faq-btn { cursor: pointer; }
.faq-icon { transition: transform .2s ease; }
.faq.open .faq-icon { transform: rotate(45deg); }
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq.open .faq-content { max-height: 600px; }

/* Feature accordion (local-storage style) */
.accordion-button { transition: all .3s ease; }
.accordion-button:hover { background-color: rgba(191,139,94,.1); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
}
.accordion-content.active {
  max-height: 3000px;
  transition: max-height .5s ease-in;
}
.accordion-icon { transition: transform .3s ease; }
.accordion-icon.rotated { transform: rotate(180deg); }

/* Phone frame (used on smart-locks + dashboard) */
.phone {
  width: 320px;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: #000;
  padding: 10px;
  box-shadow:
    0 0 0 2px #2a2a2f,
    0 0 0 4px #0e0e11,
    0 40px 80px -20px rgba(0,0,0,.8),
    0 0 120px rgba(191,139,94,.15);
  position: relative;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 34px;
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 28px;
  background: #000;
  border-radius: 999px;
  z-index: 10;
}

/* ============================================================
   8 · ANIMATION LIBRARY
   Copy of all 8 .anim-* blocks from animations.html
   ============================================================ */

/* Status ping */
@keyframes ping-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}
.live-dot { animation: ping-dot 1.6s ease-in-out infinite; }

/* ---- 8.1 AI CAMERA DETECTION ---- */
.anim-ai-camera {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #0c0c10 0%, #18181b 50%, #0c0c10 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
.anim-ai-camera::before {
  content: '● REC';
  position: absolute; top: 10px; left: 12px;
  color: #ef4444; font-size: 10px; letter-spacing: .2em; z-index: 5;
  animation: cam-rec 2s infinite;
}
.anim-ai-camera::after {
  content: 'CAM 01 · 1080p';
  position: absolute; top: 10px; right: 12px;
  color: #9ca3af; font-size: 10px; letter-spacing: .15em; z-index: 5;
}
@keyframes cam-rec { 0%, 60% { opacity: 1; } 70%, 100% { opacity: .3; } }
.anim-ai-camera .scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 90%, rgba(191,139,94,.08), transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.015) 60px 61px);
}
.anim-ai-camera .ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.5));
  border-top: 1px solid rgba(191,139,94,.15);
}
.anim-ai-camera .house {
  position: absolute; left: 8%; bottom: 30%; width: 28%; height: 45%;
  background: linear-gradient(180deg, #1a1a1e, #0e0e12);
  border: 1px solid #2a2a31;
  clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
}
.anim-ai-camera .tree {
  position: absolute; right: 8%; bottom: 30%; width: 8%; height: 40%;
  background: radial-gradient(circle at 50% 60%, #1a2a1a, #0a140a);
  border-radius: 50% 50% 40% 40%;
}
.anim-ai-camera .person {
  position: absolute; bottom: 15%; left: -10%;
  width: 32px; height: 70px;
  animation: cam-walk 7s linear infinite;
}
.anim-ai-camera .person svg { width: 100%; height: 100%; }
@keyframes cam-walk { 0% { left: -10%; } 100% { left: 105%; } }
.anim-ai-camera .bbox {
  position: absolute; bottom: 13%; left: -10%;
  width: 44px; height: 80px;
  border: 1.5px solid #22d3ee;
  box-shadow: 0 0 0 1px rgba(34,211,238,.2), inset 0 0 12px rgba(34,211,238,.1);
  animation: cam-walk 7s linear infinite;
}
.anim-ai-camera .bbox::before {
  content: 'PERSON · 0.97';
  position: absolute; top: -18px; left: -1px;
  background: #22d3ee; color: #0a0a0c; font-size: 9px; padding: 2px 5px;
  font-weight: 700; letter-spacing: .08em; white-space: nowrap;
}
.anim-ai-camera .crosshair-h,
.anim-ai-camera .crosshair-v {
  position: absolute; background: rgba(191,139,94,.1);
}
.anim-ai-camera .crosshair-h { left: 0; right: 0; top: 50%; height: 1px; }
.anim-ai-camera .crosshair-v { top: 0; bottom: 0; left: 50%; width: 1px; }
.anim-ai-camera .ticker {
  position: absolute; left: 12px; bottom: 10px; z-index: 5;
  color: #4ade80; font-size: 10px; letter-spacing: .1em;
}

/* ---- 8.2 MAGLOCK GATE (top-down) ---- */
.anim-gate {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #0c0c10, #18181b);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.anim-gate .label {
  position: absolute; top: 10px; left: 12px; z-index: 10;
  font-family: 'JetBrains Mono', monospace; color: var(--tan);
  font-size: 10px; letter-spacing: .25em;
}
.anim-gate .status {
  position: absolute; top: 10px; right: 12px; z-index: 10;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .15em; color: #4ade80;
}
.anim-gate .yard {
  position: absolute; inset: 34px 20px 20px 20px;
  background: radial-gradient(ellipse at 50% 100%, rgba(191,139,94,.06), transparent 60%);
  border: 1px dashed rgba(191,139,94,.15);
  border-radius: 4px;
}
.anim-gate .house-wall-l,
.anim-gate .house-wall-r {
  position: absolute; top: 34px; bottom: 20px; width: 40px;
  background: repeating-linear-gradient(90deg, #1c1c21 0 10px, #141418 10px 12px);
  border: 1px solid #2a2a31;
}
.anim-gate .house-wall-l { left: 20px; }
.anim-gate .house-wall-r { right: 20px; }
.anim-gate .gate {
  position: absolute;
  top: calc(50% - 3px); left: calc(50% - 90px);
  width: 120px; height: 6px;
  background: var(--tan);
  transform-origin: 100% 50%;
  transform: rotate(0deg);
  animation: gate-swing 5s infinite;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.anim-gate .gate::before {
  content: ''; position: absolute; inset: -10px 0 -10px 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(191,139,94,.4) 10px 12px);
}
@keyframes gate-swing {
  0%, 25%   { transform: rotate(0deg); }
  40%, 65%  { transform: rotate(-75deg); }
  80%, 100% { transform: rotate(0deg); }
}
.anim-gate .maglock {
  position: absolute; top: calc(50% - 8px); right: calc(50% - 100px);
  width: 10px; height: 16px;
  background: linear-gradient(180deg, #d4a373, #8a5f3d);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(191,139,94,.4);
}
.anim-gate .pulse {
  position: absolute; top: calc(50% - 20px); right: calc(50% - 112px);
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--tan);
  animation: gate-pulse 5s infinite;
  opacity: 0;
}
@keyframes gate-pulse {
  0%, 28%  { opacity: 0; transform: scale(.5); }
  30%      { opacity: .8; transform: scale(1); }
  42%      { opacity: 0; transform: scale(1.8); }
  100%     { opacity: 0; }
}

/* ---- 8.3 HOMEHUB PHONE ---- */
.anim-homehub {
  position: relative; aspect-ratio: 9 / 16; max-height: 520px;
  margin: 0 auto;
  background: linear-gradient(180deg, #0c0c10, #18181b);
  border-radius: 32px; border: 1px solid var(--line);
  padding: 10px;
}
.anim-homehub .notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 20px; background: #000; border-radius: 12px; z-index: 5;
}
.anim-homehub .screen {
  position: relative; height: 100%; width: 100%;
  background: linear-gradient(180deg, #111115, #05050a);
  border-radius: 24px; overflow: hidden;
  padding: 32px 16px 16px 16px;
  font-family: 'Inter', sans-serif;
}
.anim-homehub .time {
  text-align: center; color: #fff; font-size: 11px; opacity: .7;
  letter-spacing: .1em; font-family: 'JetBrains Mono', monospace;
}
.anim-homehub .title {
  color: var(--tan); font-size: 11px; letter-spacing: .3em;
  text-align: center; margin-top: 12px; font-family: 'JetBrains Mono', monospace;
}
.anim-homehub .mode {
  margin: 16px auto 0 auto; padding: 18px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(191,139,94,.04);
  text-align: center;
  animation: hub-mode 8s infinite;
}
@keyframes hub-mode {
  0%, 30%  { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.3); }
  35%, 65% { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.3); }
  70%, 100%{ background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
}
.anim-homehub .mode-icon {
  width: 48px; height: 48px; margin: 0 auto 8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: hub-icon 8s infinite;
}
@keyframes hub-icon {
  0%, 30%  { background: rgba(74,222,128,.15); color: #4ade80; }
  35%, 65% { background: rgba(34,211,238,.15); color: #22d3ee; }
  70%, 100%{ background: rgba(239,68,68,.15); color: #ef4444; }
}
.anim-homehub .mode-label { color: #fff; font-weight: 700; font-size: 16px; }
.anim-homehub .mode-sub {
  color: #6b7280; font-size: 10px; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .1em;
}
.anim-homehub .cards { margin-top: 14px; display: grid; gap: 8px; }
.anim-homehub .card {
  padding: 10px 12px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
}
.anim-homehub .card .k { color: #9ca3af; }
.anim-homehub .card .v { color: var(--tan); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.anim-homehub .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  display: inline-block; margin-right: 6px;
  animation: hub-dot 2s infinite;
}
@keyframes hub-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- 8.4 NAS (Personal Cloud) ---- */
.anim-nas {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #0c0c10, #18181b);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
.anim-nas .label {
  position: absolute; top: 12px; left: 14px;
  color: var(--tan); font-size: 10px; letter-spacing: .25em;
}
.anim-nas .stack {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 140px; z-index: 2;
}
.anim-nas .tower {
  width: 100%; padding: 10px 10px; margin: 3px 0;
  background: linear-gradient(180deg, #1a1a1e, #0e0e12);
  border: 1px solid #1c1c21; border-radius: 4px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: #fff;
}
.anim-nas .tower .led {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: nas-led 1.6s infinite;
}
@keyframes nas-led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.anim-nas .tower .cap { color: var(--tan); font-size: 9px; letter-spacing: .1em; }
.anim-nas .orbit {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.anim-nas .orbit-ring {
  position: absolute; border: 1px dashed rgba(191,139,94,.2); border-radius: 50%;
}
.anim-nas .orbit-ring.r1 { width: 56%; height: 72%; }
.anim-nas .orbit-ring.r2 { width: 78%; height: 92%; }
.anim-nas .service {
  position: absolute; width: 74px; padding: 7px 4px;
  background: #141418; border: 1px solid #1c1c21; border-radius: 6px;
  text-align: center; font-size: 9px; color: #fff;
  animation: nas-pulse 3s infinite;
}
.anim-nas .service .sv-icon { font-size: 14px; margin-bottom: 2px; color: var(--tan); }
.anim-nas .s1 { top: 8%;  left: 6%;  animation-delay: 0s; }
.anim-nas .s2 { top: 8%;  right: 6%; animation-delay: .5s; }
.anim-nas .s3 { bottom: 8%; left: 6%; animation-delay: 1s; }
.anim-nas .s4 { bottom: 8%; right: 6%; animation-delay: 1.5s; }
@keyframes nas-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191,139,94,.3); border-color: #1c1c21; }
  50%      { box-shadow: 0 0 0 3px rgba(191,139,94,.1); border-color: var(--tan); }
}

/* ---- 8.5 SHADOW NETWORK ---- */
.anim-shadow {
  position: relative; aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #0c0c10 0%, #101020 50%, #0c0c10 100%);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; font-family: 'JetBrains Mono', monospace;
}
.anim-shadow .label { position: absolute; top: 10px; left: 12px; color: var(--tan); font-size: 10px; letter-spacing: .25em; }
.anim-shadow .status { position: absolute; top: 10px; right: 12px; color: #4ade80; font-size: 10px; letter-spacing: .15em; }
.anim-shadow .status::before { content: '●'; margin-right: 6px; animation: sh-blink 1.5s infinite; }
@keyframes sh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.anim-shadow .node { position: absolute; width: 60px; transform: translate(-50%, -50%); text-align: center; }
.anim-shadow .node .dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto; background: #1a1a1e; border: 1.5px solid var(--tan); }
.anim-shadow .node .tag { color: #fff; font-size: 9px; margin-top: 4px; letter-spacing: .1em; }
.anim-shadow .node .sub { color: #6b7280; font-size: 8px; margin-top: 2px; }
.anim-shadow .you   { top: 50%; left: 8%;  }
.anim-shadow .mull  { top: 30%; left: 35%; }
.anim-shadow .tor1  { top: 70%; left: 55%; }
.anim-shadow .tor2  { top: 35%; left: 75%; }
.anim-shadow .exit  { top: 55%; left: 92%; }
.anim-shadow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anim-shadow .path { stroke: var(--tan); stroke-width: 1; fill: none; stroke-dasharray: 4 6; opacity: .4; }
.anim-shadow .packet {
  stroke: var(--tan); stroke-width: 3; stroke-linecap: round; fill: none;
  stroke-dasharray: 6 1000; stroke-dashoffset: 1000;
  animation: shadow-packet 4s linear infinite;
}
@keyframes shadow-packet { 100% { stroke-dashoffset: 0; } }

/* ---- 8.6 PASSWORD VAULT ---- */
.anim-vault {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #0c0c10, #18181b);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; padding: 24px;
  font-family: 'JetBrains Mono', monospace;
}
.anim-vault .label { color: var(--tan); font-size: 10px; letter-spacing: .25em; margin-bottom: 14px; }
.anim-vault .rows { display: grid; gap: 10px; }
.anim-vault .row {
  display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; gap: 10px;
  padding: 8px 12px; background: #141418; border: 1px solid var(--line); border-radius: 6px;
  font-size: 10px;
}
.anim-vault .row .site { color: #9ca3af; letter-spacing: .05em; }
.anim-vault .row .bars { display: flex; gap: 2px; }
.anim-vault .row .bars span { flex: 1; height: 8px; background: #4ade80; border-radius: 2px; }
.anim-vault .row .pwd { color: #fff; overflow: hidden; white-space: nowrap; }
.anim-vault .row.r1 .pwd::after { content: '••••••••••••'; }
.anim-vault .row.r2 .pwd::after { content: '••••••••••••••••'; }
.anim-vault .row.r3 .pwd::after { content: '••••••••••'; }
.anim-vault .row.r4 .pwd::after { content: '•••••••••••••••••'; }
.anim-vault .shimmer {
  position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(191,139,94,.1), transparent);
  animation: vault-shimmer 4s linear infinite;
}
@keyframes vault-shimmer { 100% { left: 130%; } }

/* ---- 8.7 OWNERSHIP MATH ---- */
.anim-ownership {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #0c0c10, #18181b);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
.anim-ownership .label { color: var(--tan); font-size: 10px; letter-spacing: .25em; }
.anim-ownership .bars { margin-top: 24px; }
.anim-ownership .bar-row { margin-bottom: 16px; }
.anim-ownership .bar-row .name {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #9ca3af; margin-bottom: 5px;
}
.anim-ownership .bar-row .name .v { color: #fff; font-weight: 600; }
.anim-ownership .bar {
  height: 14px; background: #141418; border: 1px solid var(--line); border-radius: 3px;
  position: relative; overflow: hidden;
}
.anim-ownership .bar .fill {
  height: 100%; background: linear-gradient(90deg, #ef4444, #b91c1c);
  animation: own-grow 5s ease-out infinite;
}
.anim-ownership .bar.own .fill {
  background: linear-gradient(90deg, var(--tan), #8a5f3d);
  animation: own-still 5s linear infinite;
}
@keyframes own-grow { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes own-still { 0%, 100% { width: 30%; } }
.anim-ownership .total {
  margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
  text-align: center;
}
.anim-ownership .total .k { color: #9ca3af; font-size: 10px; letter-spacing: .2em; }
.anim-ownership .total .v {
  color: var(--tan); font-size: 36px; font-weight: 700;
  font-family: 'Inter', sans-serif; margin-top: 4px;
}

/* ---- 8.8 SECURITY SHADES (Lockdown) ---- */
.anim-shades {
  position: relative; aspect-ratio: 3 / 4; max-width: 320px; margin: 0 auto;
  background: linear-gradient(180deg, #0c0c10, #18181b);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; font-family: 'JetBrains Mono', monospace;
}
.anim-shades .label { position: absolute; top: 10px; left: 12px; color: var(--tan); font-size: 10px; letter-spacing: .25em; z-index: 5; }
.anim-shades .status {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  color: #ef4444; font-size: 10px; letter-spacing: .15em;
  animation: sh-blink 1.2s infinite;
}
.anim-shades .window {
  position: absolute; inset: 34px 20px 40px 20px;
  background: linear-gradient(180deg, rgba(120,120,140,.25), rgba(60,60,80,.15) 55%, #0a0a0c);
  border: 2px solid var(--line); border-radius: 4px; overflow: hidden;
}
.anim-shades .mullion-h { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); transform: translateY(-1px); }
.anim-shades .mullion-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--line); transform: translateX(-1px); }
.anim-shades .curtain {
  position: absolute; left: 0; right: 0; top: 0;
  background: repeating-linear-gradient(to bottom, #27272a 0 6px, #18181b 6px 8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  animation: shades-drop 5s infinite;
}
.anim-shades .curtain::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: #3f3f46;
}
@keyframes shades-drop {
  0%, 10%  { height: 15%; }
  45%, 65% { height: 100%; }
  95%, 100% { height: 15%; }
}
.anim-shades .ctrl {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: #9ca3af;
}