@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
    :root {
      --bg: #0b1016;
      --bg-2: #101721;
      --surface: rgba(20, 28, 39, .78);
      --surface-strong: #172231;
      --surface-soft: rgba(255,255,255,.045);
      --text: #f4f7fb;
      --muted: #96a4b5;
      --line: rgba(255,255,255,.09);
      --accent: #d4ff4f;
      --accent-2: #83d6ff;
      --accent-ink: #11180a;
      --danger: #ff7d7d;
      --shadow: 0 20px 70px rgba(0,0,0,.27);
      --radius: 20px;
      --grid-line: rgba(255,255,255,.035);
    }
    [data-theme="light"] {
      --bg: #f3f6f8;
      --bg-2: #e8eef2;
      --surface: rgba(255,255,255,.84);
      --surface-strong: #ffffff;
      --surface-soft: rgba(10, 30, 42, .045);
      --text: #10202b;
      --muted: #637382;
      --line: rgba(16,32,43,.11);
      --accent: #b7e638;
      --accent-2: #227ea4;
      --accent-ink: #172000;
      --shadow: 0 18px 55px rgba(34,62,78,.12);
      --grid-line: rgba(16,32,43,.045);
    }
    [data-theme="royal"] {
      --bg: #0b0d1a; --bg-2: #14152b; --surface: rgba(24,24,48,.82); --surface-strong:#1d1d3a; --surface-soft:rgba(255,255,255,.055); --text:#f7f4ff; --muted:#a8a2c5; --line:rgba(203,190,255,.15); --accent:#b9a3ff; --accent-2:#70d8ff; --accent-ink:#161126; --danger:#ff93b3; --shadow:0 20px 70px rgba(35,20,90,.35); --grid-line:rgba(201,184,255,.045);
    }
    [data-theme="ocean"] {
      --bg:#07141a; --bg-2:#0b222a; --surface:rgba(12,38,47,.82); --surface-strong:#10313b; --surface-soft:rgba(255,255,255,.055); --text:#effdff; --muted:#91b6bd; --line:rgba(121,222,231,.16); --accent:#57e0d0; --accent-2:#7bb8ff; --accent-ink:#06211e; --danger:#ff9d87; --shadow:0 20px 70px rgba(0,45,60,.35); --grid-line:rgba(109,224,225,.045);
    }
    [data-theme="sunset"] {
      --bg:#1a1115; --bg-2:#2a1719; --surface:rgba(48,27,29,.82); --surface-strong:#3a2022; --surface-soft:rgba(255,255,255,.055); --text:#fff8f0; --muted:#c9a9a0; --line:rgba(255,198,148,.17); --accent:#ffbd69; --accent-2:#ff819d; --accent-ink:#291509; --danger:#ff8c7b; --shadow:0 20px 70px rgba(86,25,25,.32); --grid-line:rgba(255,195,140,.045);
    }
    [data-theme="paper"] {
      --bg:#f7f3ec; --bg-2:#eee7dc; --surface:rgba(255,253,248,.9); --surface-strong:#fffdf8; --surface-soft:rgba(57,45,31,.055); --text:#2b241d; --muted:#817467; --line:rgba(77,57,38,.14); --accent:#d48b35; --accent-2:#3d8490; --accent-ink:#261708; --danger:#b95545; --shadow:0 18px 55px rgba(79,55,29,.13); --grid-line:rgba(76,57,39,.05);
    }
    [data-theme="graphite"] {
      --bg:#101113; --bg-2:#191b1e; --surface:rgba(30,32,35,.88); --surface-strong:#25282c; --surface-soft:rgba(255,255,255,.06); --text:#f5f6f7; --muted:#a0a5ab; --line:rgba(255,255,255,.13); --accent:#f1f1ec; --accent-2:#9ca9ff; --accent-ink:#17181a; --danger:#ff8b8b; --shadow:0 20px 65px rgba(0,0,0,.4); --grid-line:rgba(255,255,255,.04);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--text); background: var(--bg); font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; min-height: 100vh; overflow-x: hidden; }
    body::before { content: ''; position: fixed; inset: 0; pointer-events:none; opacity: .62; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
    button, input { font: inherit; }
    button { cursor: pointer; border: 0; }
    .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; position: relative; }
    .sidebar { border-left: 1px solid var(--line); padding: 28px 18px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); z-index: 5; }
    .brand { display:flex; align-items:center; gap: 11px; padding: 0 8px; }
    .brand-mark { width: 39px; height: 39px; border-radius: 12px 12px 12px 4px; background: var(--accent); color: var(--accent-ink); display:grid; place-items:center; font-weight: 800; font-size: 21px; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
    .brand-name { font-weight: 700; letter-spacing: -.4px; font-size: 17px; }
    .brand-name span { color: var(--accent); font-family: 'Space Grotesk', sans-serif; direction:ltr; display:inline-block; margin-right: 4px; }
    .eyebrow { color: var(--accent); letter-spacing: 1.2px; font-size: 10px; text-transform: uppercase; font-family: 'Space Grotesk', sans-serif; }
    .nav { display:flex; flex-direction:column; gap: 5px; }
    .nav-title { color: var(--muted); font-size: 11px; padding: 0 11px 8px; }
    .nav a { color: var(--muted); text-decoration:none; display:flex; align-items:center; gap: 11px; padding: 11px; border-radius: 12px; font-size: 13px; transition:.2s; }
    .nav a:hover, .nav a.active { color: var(--text); background: var(--surface-soft); }
    .nav a.active { box-shadow: inset -3px 0 var(--accent); }
    .nav svg { width: 17px; height: 17px; stroke: currentColor; fill:none; stroke-width: 1.7; }
    .side-note { margin-top:auto; border: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); padding: 17px; border-radius: 16px; }
    .side-note strong { display:block; font-size: 13px; margin-bottom: 6px; }
    .side-note p { color:var(--muted); font-size: 11px; line-height: 1.7; margin:0; }
    main { min-width: 0; padding: 26px clamp(18px, 4vw, 56px) 60px; }
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom: 32px; }
    .crumb { color:var(--muted); font-size:12px; }
    .actions { display:flex; align-items:center; gap:9px; }
    .icon-btn, .profile { background: var(--surface); border: 1px solid var(--line); color: var(--text); height: 39px; border-radius: 12px; display:grid; place-items:center; }
    .icon-btn { width:39px; }
    .icon-btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .profile { padding: 4px 11px 4px 5px; display:flex; gap:8px; font-size:12px; }
    .avatar { width:29px; height:29px; display:grid; place-items:center; border-radius: 9px; color:#10200b; background: var(--accent); font-weight:700; }
    .hero { position:relative; overflow:hidden; border:1px solid var(--line); border-radius: 28px; padding: clamp(27px, 5vw, 55px); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 32%), radial-gradient(circle at 7% 100%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 35%), var(--surface); box-shadow:var(--shadow); }
    .hero::after { content:'DZ'; position:absolute; left: 3%; bottom:-27px; font-family:'Space Grotesk'; font-size: 170px; font-weight:700; letter-spacing:-15px; opacity:.045; direction:ltr; }
    .hero-content { position:relative; z-index:1; max-width: 720px; }
    h1 { font-size: clamp(31px, 5vw, 62px); letter-spacing: -2.4px; line-height: 1.08; margin: 13px 0 16px; max-width: 650px; }
    h1 em { font-style:normal; color: var(--accent); }
    .hero p { color: var(--muted); line-height: 1.9; max-width: 590px; margin:0 0 24px; font-size: clamp(13px, 2vw, 16px); }
    .hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
    .primary, .secondary { border-radius: 11px; padding: 12px 17px; font-weight:700; font-size:13px; transition:.2s; }
    .primary { color:var(--accent-ink); background:var(--accent); box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 20%, transparent); }
    .primary:hover { transform:translateY(-2px); filter:brightness(1.06); }
    .secondary { color:var(--text); background:var(--surface-soft); border:1px solid var(--line); }
    .secondary:hover { background:var(--surface-strong); }
    .stats { display:grid; grid-template-columns:repeat(3, 1fr); gap: 12px; margin: 17px 0 29px; }
    .stat { border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:15px 17px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
    .stat b { display:block; font-family:'Space Grotesk'; font-size: 24px; direction:ltr; text-align:right; }
    .stat span { color:var(--muted); font-size:11px; }
    .stat i { color:var(--accent); font-style:normal; font-size:11px; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin: 30px 0 15px; }
    h2 { margin:0; font-size: 20px; letter-spacing:-.5px; }
    .section-head p { color:var(--muted); font-size:12px; margin: 6px 0 0; }
    .view-all { color:var(--accent-2); background:none; font-size:12px; padding: 8px 0; }
    .toolbar { display:flex; align-items:center; gap:10px; margin-bottom:17px; }
    .search { flex:1; position:relative; }
    .search input { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line); outline:none; border-radius:12px; padding:12px 42px 12px 15px; font-size:12px; transition:.2s; }
    .search input:focus { border-color:var(--accent-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 15%, transparent); }
    .search svg { position:absolute; right:14px; top:12px; width:17px; height:17px; stroke:var(--muted); fill:none; stroke-width:1.8; }
    .filter { display:flex; gap:6px; overflow:auto; scrollbar-width:none; }
    .filter button { white-space:nowrap; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:11px; }
    .filter button.active { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:700; }
    .modules { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .module { position:relative; overflow:hidden; min-height:164px; border:1px solid var(--line); border-radius:17px; background:var(--surface); padding:17px; transition:transform .25s, border-color .25s, box-shadow .25s; display:flex; flex-direction:column; cursor:pointer; animation:cardIn .55s both; }
    .module:nth-child(2){animation-delay:.04s}.module:nth-child(3){animation-delay:.08s}.module:nth-child(4){animation-delay:.12s}.module:nth-child(5){animation-delay:.16s}.module:nth-child(6){animation-delay:.2s}.module:nth-child(7){animation-delay:.24s}.module:nth-child(8){animation-delay:.28s}.module:nth-child(9){animation-delay:.32s}.module:nth-child(10){animation-delay:.36s}.module:nth-child(11){animation-delay:.4s}.module:nth-child(12){animation-delay:.44s}
    .module:hover { transform: translateY(-6px) scale(1.012); border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line)); box-shadow: var(--shadow); }
    .module:active { transform:translateY(-2px) scale(.99); }
    .module::after { content:'افتح القسم'; position:absolute; top:12px; left:13px; color:var(--accent-2); font-size:9px; opacity:0; transform:translateY(-5px); transition:.25s; }
    .module:hover::after { opacity:1; transform:translateY(0); }
    .module::before { content:''; position:absolute; inset:auto -20px -38px auto; width:90px; height:90px; border-radius:50%; background: color-mix(in srgb, var(--module-color, var(--accent)) 12%, transparent); }
    .module-top { display:flex; justify-content:space-between; align-items:start; }
    .module-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background: color-mix(in srgb, var(--module-color, var(--accent)) 15%, transparent); color:var(--module-color, var(--accent)); }
    .module-icon svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .number { color:var(--muted); font: 11px 'Space Grotesk'; direction:ltr; }
    .module h3 { font-size:14px; margin:15px 0 5px; }
    .module p { color:var(--muted); font-size:11px; line-height:1.65; margin:0; }
    .module .arrow { margin-top:auto; padding-top:13px; color:var(--accent-2); font-size:12px; opacity:.85; }
    .module.hidden { display:none; }
    @keyframes cardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    .bottom-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 13px; margin-top:13px; }
    .focus, .quote { border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:20px; }
    .focus { display:flex; align-items:center; justify-content:space-between; gap:20px; overflow:hidden; position:relative; }
    .focus-copy { position:relative; z-index:1; }
    .focus h3, .quote h3 { font-size:16px; margin: 7px 0; }
    .focus p, .quote p { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 13px; }
    .focus-art { min-width:120px; height:120px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 14%), radial-gradient(circle at 60% 60%, var(--accent-2), transparent 18%), #1b3040; box-shadow: inset 12px -16px 35px rgba(0,0,0,.28); opacity:.8; }
    .quote { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
    .quote-mark { color:var(--accent); font: 42px Georgia; line-height:.5; }
    .quote p { color:var(--text); font-size:14px; margin-top:7px; }
    .quote small { color:var(--muted); font-size:11px; }
    .mobile-nav { display:none; }
    .toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 130px); opacity:0; background:var(--surface-strong); border:1px solid var(--line); color:var(--text); padding:12px 17px; border-radius:12px; box-shadow:var(--shadow); font-size:12px; z-index:20; transition:.3s; }
    .toast.show { transform:translate(-50%, 0); opacity:1; }
    .modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:18px; background:rgba(3,8,13,.68); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:.3s; }
    .modal-backdrop.open { opacity:1; visibility:visible; }
    .modal { width:min(100%, 560px); max-height:min(720px, 90vh); overflow:auto; border:1px solid var(--line); border-radius:24px; background:var(--surface-strong); box-shadow:0 30px 100px rgba(0,0,0,.42); transform:translateY(24px) scale(.96); transition:.35s cubic-bezier(.2,.8,.2,1); }
    .modal-backdrop.open .modal { transform:translateY(0) scale(1); }
    .modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:24px 24px 17px; border-bottom:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%); }
    .modal-kicker { color:var(--accent); font:11px 'Space Grotesk'; letter-spacing:1px; direction:ltr; }
    .modal h3 { margin:7px 0 0; font-size:22px; letter-spacing:-.6px; }
    .modal-close { width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-soft); font-size:20px; line-height:1; transition:.2s; }
    .modal-close:hover { color:var(--text); background:var(--surface); transform:rotate(90deg); }
    .modal-body { padding:18px 24px 24px; }
    .modal-intro { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 15px; }
    .detail-list { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
    .detail-list li { display:flex; align-items:center; justify-content:space-between; gap:11px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); color:var(--text); font-size:13px; animation:itemIn .4s both; cursor:pointer; transition:.2s; }
    .detail-list li:hover { background:color-mix(in srgb, var(--accent) 10%, var(--surface-soft)); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); transform:translateX(-4px); }
    .detail-list li::before { display:none; }
    .detail-label { display:flex; align-items:center; gap:11px; flex:1; }
    .detail-label::before { content:'✓'; display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:7px; color:var(--accent-ink); background:var(--accent); font-weight:700; font-size:12px; }
    .detail-go { color:var(--accent-2); font-size:16px; opacity:.75; transition:.2s; }
    .detail-list li:hover .detail-go { opacity:1; transform:translateX(-3px); }
    .item-open { flex:none; color:var(--accent-ink); background:var(--accent); border:0; border-radius:8px; padding:7px 10px; font-size:10px; font-weight:700; cursor:pointer; transition:.2s; }
    .item-open:hover { filter:brightness(1.08); transform:translateY(-1px); }
    .detail-list li:nth-child(2){animation-delay:.04s}.detail-list li:nth-child(3){animation-delay:.08s}.detail-list li:nth-child(4){animation-delay:.12s}.detail-list li:nth-child(5){animation-delay:.16s}
    @keyframes itemIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
    body.modal-open { overflow:hidden; }
    #itemModal { z-index:40; }
    #welcomeModal { z-index:60; background:rgba(3,8,13,.78); }
    .welcome-modal { width:min(100%, 860px); overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface-strong); box-shadow:0 35px 120px rgba(0,0,0,.5); transform:translateY(26px) scale(.94); transition:.5s cubic-bezier(.2,.85,.2,1); }
    .modal-backdrop.open .welcome-modal { transform:translateY(0) scale(1); }
    .welcome-top { position:relative; padding:32px 32px 24px; text-align:center; overflow:hidden; background:radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 57%); }
    .welcome-top::before { content:'م'; position:absolute; left:50%; top:-62px; transform:translateX(-50%); font-size:190px; line-height:1; color:var(--accent); opacity:.06; font-weight:700; }
    .welcome-mark { position:relative; width:58px; height:58px; display:grid; place-items:center; margin:0 auto 15px; border-radius:19px 19px 19px 5px; background:var(--accent); color:var(--accent-ink); font-size:30px; font-weight:800; box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 27%, transparent); }
    .welcome-top h2 { position:relative; margin:0 0 9px; font-size:26px; letter-spacing:-1px; }
    .welcome-top p { position:relative; color:var(--muted); max-width:480px; margin:0 auto; font-size:13px; line-height:1.9; }
    .theme-options { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; padding:0 24px 25px; max-height:420px; overflow:auto; }
    .theme-option { position:relative; text-align:right; border:1px solid var(--line); background:var(--surface-soft); color:var(--text); border-radius:18px; padding:12px; transition:.25s; cursor:pointer; }
    .theme-option:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 14px 32px rgba(0,0,0,.18); }
    .theme-option:focus-visible { outline:3px solid color-mix(in srgb, var(--accent-2) 45%, transparent); outline-offset:3px; }
    .theme-option.selected { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
    .theme-option.selected::after { content:'✓ مختار للمعاينة'; position:absolute; top:10px; left:10px; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:5px 8px; font-size:9px; font-weight:700; }
    .theme-preview { height:116px; border-radius:12px; padding:12px; margin-bottom:12px; overflow:hidden; }
    .theme-preview.dark { background:#0b1016; border:1px solid #263544; }.theme-preview.light { background:#f1f5f7; border:1px solid #d9e1e6; }.theme-preview.royal { background:#0b0d1a; border:1px solid #39345f; }.theme-preview.ocean { background:#07141a; border:1px solid #1b5960; }.theme-preview.sunset { background:#1a1115; border:1px solid #673333; }.theme-preview.paper { background:#f7f3ec; border:1px solid #ddcdb7; }.theme-preview.graphite { background:#101113; border:1px solid #44484f; }
    .preview-bar { width:55%; height:7px; border-radius:9px; margin-bottom:13px; }
    .dark .preview-bar { background:#d4ff4f; }.light .preview-bar { background:#227ea4; }.royal .preview-bar { background:#b9a3ff; }.ocean .preview-bar { background:#57e0d0; }.sunset .preview-bar { background:#ffbd69; }.paper .preview-bar { background:#d48b35; }.graphite .preview-bar { background:#f1f1ec; }
    .preview-line { height:6px; border-radius:8px; margin:8px 0; width:82%; }.preview-line.short { width:52%; }
    .dark .preview-line,.royal .preview-line,.ocean .preview-line,.sunset .preview-line,.graphite .preview-line { background:#344353; }.light .preview-line,.paper .preview-line { background:#c7d3da; }
    .preview-cards { display:flex; gap:6px; margin-top:13px; }.preview-card { height:27px; flex:1; border-radius:6px; }.dark .preview-card,.royal .preview-card,.ocean .preview-card,.sunset .preview-card,.graphite .preview-card { background:#1a2835; border:1px solid #304354; }.light .preview-card,.paper .preview-card { background:#fff; border:1px solid #d8e1e6; }
    .theme-option strong { display:block; font-size:14px; margin-bottom:3px; }.theme-option span { color:var(--muted); font-size:11px; }
    .welcome-status { color:var(--muted); font-size:11px; text-align:center; margin:0 0 12px; }
    .welcome-confirm { display:block; margin:0 auto 14px; min-width:220px; }
    .welcome-foot { padding:0 25px 23px; text-align:center; color:var(--muted); font-size:10px; }
    .theme-library { width:min(100%, 760px); max-height:min(760px, 92vh); overflow:auto; border:1px solid var(--line); border-radius:28px; background:var(--surface-strong); box-shadow:0 35px 120px rgba(0,0,0,.5); transform:translateY(26px) scale(.94); transition:.5s cubic-bezier(.2,.85,.2,1); }
    .modal-backdrop.open .theme-library { transform:translateY(0) scale(1); }
    .library-head { display:flex; justify-content:space-between; gap:18px; padding:27px 28px 19px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%); }
    .library-head h2 { margin:7px 0 5px; font-size:25px; letter-spacing:-1px; }
    .library-head p { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
    .library-close { width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-soft); font-size:20px; transition:.2s; }
    .library-close:hover { color:var(--text); transform:rotate(90deg); }
    .theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 24px 17px; }
    .theme-card { position:relative; text-align:right; border:1px solid var(--line); background:var(--surface-soft); color:var(--text); border-radius:16px; padding:10px; cursor:pointer; transition:.25s; }
    .theme-card:hover { transform:translateY(-4px); border-color:var(--accent-2); box-shadow:var(--shadow); }
    .theme-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
    .theme-card.selected::after { content:'مفعّل'; position:absolute; top:17px; left:17px; color:var(--accent-ink); background:var(--accent); border-radius:99px; padding:4px 7px; font-size:9px; font-weight:700; }
    .theme-shot { height:112px; border-radius:10px; padding:11px; margin-bottom:10px; overflow:hidden; }
    .shot-dark{background:#0b1016;border:1px solid #263544}.shot-light{background:#f1f5f7;border:1px solid #d9e1e6}.shot-royal{background:#0b0d1a;border:1px solid #39345f}.shot-ocean{background:#07141a;border:1px solid #1b5960}.shot-sunset{background:#1a1115;border:1px solid #673333}.shot-paper{background:#f7f3ec;border:1px solid #ddcdb7}.shot-graphite{background:#101113;border:1px solid #44484f}
    .shot-top{height:7px;width:52%;border-radius:9px;margin-bottom:13px}.shot-dark .shot-top{background:#d4ff4f}.shot-light .shot-top{background:#227ea4}.shot-royal .shot-top{background:#b9a3ff}.shot-ocean .shot-top{background:#57e0d0}.shot-sunset .shot-top{background:#ffbd69}.shot-paper .shot-top{background:#d48b35}.shot-graphite .shot-top{background:#f1f1ec}
    .shot-line{height:6px;width:84%;border-radius:8px;margin:8px 0}.shot-line.short{width:52%}.shot-dark .shot-line,.shot-royal .shot-line,.shot-ocean .shot-line,.shot-sunset .shot-line,.shot-graphite .shot-line{background:#354452}.shot-light .shot-line,.shot-paper .shot-line{background:#cbd5d8}
    .shot-cards{display:flex;gap:5px;margin-top:13px}.shot-card{height:25px;flex:1;border-radius:5px}.shot-dark .shot-card,.shot-royal .shot-card,.shot-ocean .shot-card,.shot-sunset .shot-card,.shot-graphite .shot-card{background:#1c2a36;border:1px solid #304354}.shot-light .shot-card,.shot-paper .shot-card{background:#fff;border:1px solid #d9e0e1}
    .theme-card strong{display:block;font-size:13px;margin-bottom:2px}.theme-card small{color:var(--muted);font-size:10px}.theme-swatch{display:flex;gap:4px;margin-top:8px}.theme-swatch i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
    .library-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 23px}.library-status{color:var(--muted);font-size:11px}.library-apply{min-width:170px}
    .ai-fab { position:fixed; left:24px; bottom:24px; z-index:22; display:flex; align-items:center; gap:9px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:15px; padding:10px 13px 10px 10px; font-size:12px; font-weight:700; box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 25%, transparent); transition:.25s; }
    .ai-fab:hover { transform:translateY(-4px); box-shadow:0 16px 36px color-mix(in srgb, var(--accent) 32%, transparent); }
    .ai-fab-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; background:rgba(0,0,0,.12); font-size:15px; }
    .ai-pulse { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#ff6c6c; box-shadow:0 0 0 4px color-mix(in srgb, #ff6c6c 18%, transparent); }
    .ai-panel { position:fixed; left:24px; bottom:82px; z-index:50; width:min(390px, calc(100vw - 32px)); height:min(610px, calc(100vh - 110px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface-strong); box-shadow:0 25px 90px rgba(0,0,0,.38); transform:translateY(18px) scale(.96); opacity:0; visibility:hidden; transition:.3s cubic-bezier(.2,.8,.2,1); }
    .ai-panel.open { transform:translateY(0) scale(1); opacity:1; visibility:visible; }
    .ai-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%); }
    .ai-agent { display:flex; align-items:center; gap:10px; }.ai-agent-mark { position:relative; width:37px; height:37px; display:grid; place-items:center; color:var(--accent-ink); background:var(--accent); border-radius:12px 12px 12px 4px; font-weight:800; }.ai-agent strong { display:block; font-size:13px; }.ai-agent span { color:var(--muted); font-size:10px; }.ai-online { display:inline-block; width:6px; height:6px; margin-left:4px; border-radius:50%; background:#58d58a; }
    .ai-close { width:30px; height:30px; border-radius:9px; color:var(--muted); background:var(--surface-soft); border:1px solid var(--line); font-size:18px; transition:.2s; }.ai-close:hover { color:var(--text); transform:rotate(90deg); }
    .ai-messages { flex:1; overflow:auto; padding:17px 14px; display:flex; flex-direction:column; gap:11px; }
    .ai-message { max-width:88%; padding:10px 12px; border-radius:14px; font-size:12px; line-height:1.8; animation:itemIn .3s both; }.ai-message.bot { align-self:flex-start; color:var(--text); background:var(--surface-soft); border:1px solid var(--line); border-top-right-radius:4px; }.ai-message.user { align-self:flex-end; color:var(--accent-ink); background:var(--accent); border-top-left-radius:4px; }
    .ai-suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }.ai-suggestion { color:var(--accent-2); background:var(--surface-soft); border:1px solid var(--line); border-radius:99px; padding:7px 9px; font-size:10px; transition:.2s; }.ai-suggestion:hover { border-color:var(--accent-2); transform:translateY(-2px); }
    .ai-input-wrap { display:flex; gap:7px; padding:11px; border-top:1px solid var(--line); background:var(--surface); }.ai-input { min-width:0; flex:1; color:var(--text); background:var(--surface-soft); border:1px solid var(--line); outline:none; border-radius:11px; padding:10px 11px; font-size:11px; }.ai-input:focus { border-color:var(--accent-2); }.ai-send { width:38px; flex:none; color:var(--accent-ink); background:var(--accent); border-radius:11px; font-size:16px; }.ai-note { color:var(--muted); font-size:9px; text-align:center; padding:0 12px 9px; }
    @media (max-width:650px){.theme-grid{grid-template-columns:repeat(2,1fr);padding:15px}.library-head{padding:22px 18px 16px}.library-foot{padding:0 15px 18px;display:block}.library-status{margin-bottom:10px}.library-apply{width:100%}.ai-fab{left:14px;bottom:78px}.ai-fab-label{display:none}.ai-panel{left:16px;bottom:142px;width:calc(100vw - 32px);height:min(570px,calc(100vh - 180px))}}
    @media (max-width:720px) { .theme-options { grid-template-columns:repeat(2,1fr); max-height:330px; } }
    @media (max-width:520px) { .welcome-top { padding:27px 20px 20px; }.welcome-top h2 { font-size:22px; }.theme-options { gap:8px; padding:0 14px 18px; grid-template-columns:repeat(2,1fr); max-height:315px; }.theme-option { padding:8px; }.theme-preview { height:88px; padding:8px; }.welcome-foot { padding:0 16px 18px; } }
    .item-symbol { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; margin-bottom:16px; color:var(--accent-ink); background:var(--accent); font-size:26px; font-weight:700; box-shadow:0 10px 25px color-mix(in srgb, var(--accent) 18%, transparent); }
    .item-path { color:var(--accent-2); font-size:11px; margin:0 0 5px; }
    .item-description { color:var(--muted); font-size:13px; line-height:1.95; margin:0 0 19px; }
    .demo-badge { display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:6px 10px; font-size:10px; font-weight:700; margin-bottom:15px; }
    .demo-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(17,24,10,.1); }
    .item-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 17px; }
    .item-stat { border:1px solid var(--line); background:var(--surface-soft); border-radius:12px; padding:10px; min-width:0; }
    .item-stat strong { display:block; font:700 17px 'Space Grotesk'; direction:ltr; margin-bottom:3px; }
    .item-stat span { display:block; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sample-title { color:var(--muted); font-size:11px; margin:0 0 8px; }
    .sample-list { display:grid; gap:7px; margin:0 0 19px; padding:0; list-style:none; }
    .sample-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text); font-size:11px; padding:8px 10px; border-radius:9px; background:var(--surface-soft); }
    .sample-data { display:flex; align-items:center; gap:8px; }
    .sample-list li::before { content:'✦'; color:var(--accent); }
    .item-actions { display:flex; gap:9px; flex-wrap:wrap; }
    .item-back { color:var(--text); background:var(--surface-soft); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:12px; }
    .item-back:hover { background:var(--surface); }
    @media (max-width:520px) { .item-stats { gap:6px; } .item-stat { padding:9px 7px; } .item-stat strong { font-size:15px; } }
    @media (max-width: 1100px) { .modules { grid-template-columns:repeat(3, minmax(0,1fr)); } }
    @media (max-width: 820px) { .app { display:block; } .sidebar { display:none; } main { padding:18px 16px 88px; } .topbar { margin-bottom:20px; } .crumb { font-size:11px; } .profile { display:none; } .modules { grid-template-columns:repeat(2, minmax(0,1fr)); } .bottom-grid { grid-template-columns:1fr; } .mobile-nav { display:flex; position:fixed; bottom:12px; left:12px; right:12px; height:60px; z-index:10; border:1px solid var(--line); background:color-mix(in srgb, var(--surface-strong) 87%, transparent); backdrop-filter:blur(16px); border-radius:18px; justify-content:space-around; align-items:center; box-shadow:var(--shadow); } .mobile-nav a { text-decoration:none; color:var(--muted); font-size:10px; display:flex; flex-direction:column; align-items:center; gap:4px; } .mobile-nav a.active { color:var(--accent); } .mobile-nav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; } }
    @media (max-width: 520px) { .hero { border-radius:20px; padding:27px 20px 30px; } h1 { letter-spacing:-1.2px; } .stats { gap:7px; } .stat { padding:12px 10px; display:block; } .stat b { font-size:20px; margin-bottom:3px; } .stat i { display:block; margin-top:4px; } .toolbar { display:block; } .filter { margin-top:8px; } .module { min-height:157px; padding:14px; } .focus { align-items:flex-start; } .focus-art { min-width:80px; width:80px; height:80px; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ─────────────────────────────────────────────────────────────
   MARJA3I DZ / SIGNATURE VISUAL IDENTITY
   Soft precision · academic confidence · purposeful motion
   ───────────────────────────────────────────────────────────── */
:root {
  --identity-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --identity-cyan: color-mix(in srgb, var(--accent-2) 78%, white 8%);
  --identity-ring: color-mix(in srgb, var(--accent-2) 28%, transparent);
}

body::after {
  content: '';
  position: fixed;
  inset: auto auto -18vh -12vw;
  width: 45vw;
  height: 45vw;
  min-width: 320px;
  min-height: 320px;
  pointer-events: none;
  z-index: -1;
  opacity: .16;
  background: radial-gradient(circle, var(--accent-2), transparent 66%);
  filter: blur(46px);
  animation: identityDrift 18s ease-in-out infinite alternate;
}

@keyframes identityDrift {
  from { transform: translate3d(0, 0, 0) scale(.9); }
  to { transform: translate3d(7vw, -4vh, 0) scale(1.12); }
}

.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 74%, transparent), transparent 72%),
    color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow: inset -1px 0 var(--line), 18px 0 55px rgba(0,0,0,.05);
}

.brand-mark {
  position: relative;
  isolation: isolate;
  box-shadow: 0 8px 24px var(--identity-glow), 0 0 0 6px color-mix(in srgb, var(--accent) 5%, transparent);
}
.brand-mark::after {
  content: '✦';
  position: absolute;
  inset: -9px -8px auto auto;
  z-index: -1;
  color: var(--accent-2);
  font-size: 11px;
  opacity: .9;
  animation: starFloat 3.4s ease-in-out infinite;
}
@keyframes starFloat { 50% { transform: translateY(-3px) rotate(18deg); opacity: .55; } }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.crumb::before {
  content: '◈';
  color: var(--accent);
  font-size: 11px;
  filter: drop-shadow(0 0 6px var(--identity-glow));
}

.icon-btn, .profile { box-shadow: 0 7px 22px rgba(0,0,0,.06); }
.icon-btn:hover { color: var(--accent); border-color: var(--identity-ring); transform: translateY(-2px); }

.hero {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--accent-2) 20%, var(--line));
  background:
    radial-gradient(circle at 91% 12%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 23%),
    radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 29%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 50%, var(--surface)), var(--surface));
}
.hero::before {
  content: '✦  ◌  ✧';
  position: absolute;
  top: 23px;
  left: 30px;
  color: var(--accent-2);
  opacity: .3;
  letter-spacing: 13px;
  font-size: 18px;
  animation: constellation 8s ease-in-out infinite;
}
@keyframes constellation { 50% { transform: translateY(7px); opacity: .52; } }
.hero::after { text-shadow: 0 0 40px var(--identity-glow); }

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.hero .eyebrow::before { content: '●'; font-size: 7px; color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }

.section-head h2, .focus h3 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-head h2::before { content: '✦'; color: var(--accent); font-size: 15px; }
.focus h3::before { content: '↗'; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--accent-ink); background: var(--accent); font-size: 14px; }

.module {
  border-color: color-mix(in srgb, var(--module-color, var(--accent)) 17%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--module-color, var(--accent)) 5%, transparent), transparent 46%),
    var(--surface);
  box-shadow: 0 7px 24px rgba(0,0,0,.035);
}
.module::before {
  width: 150px;
  height: 150px;
  right: -65px;
  bottom: -75px;
  background: radial-gradient(circle, color-mix(in srgb, var(--module-color, var(--accent)) 19%, transparent), transparent 69%);
  transition: transform .45s ease;
}
.module:hover::before { transform: scale(1.28) translate(-8px, -8px); }
.module-top { position: relative; z-index: 1; }
.module-icon {
  border: 1px solid color-mix(in srgb, var(--module-color, var(--accent)) 30%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 7px 18px color-mix(in srgb, var(--module-color, var(--accent)) 10%, transparent);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.module:hover .module-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 10px 23px color-mix(in srgb, var(--module-color, var(--accent)) 22%, transparent); }
.module h3, .module p, .module .arrow { position: relative; z-index: 1; }
.module .number {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
}
.module .number::before { content: '•'; color: var(--module-color, var(--accent)); font-size: 13px; line-height: 0; }
.module .arrow { display: inline-flex; align-items: center; gap: 5px; }
.module .arrow::before { content: '↳'; font-size: 15px; color: var(--module-color, var(--accent)); }

.detail-list li, .theme-option, .theme-card, .stat, .focus, .quote {
  box-shadow: 0 7px 22px rgba(0,0,0,.035);
}
.theme-option, .theme-card { backdrop-filter: blur(10px); }
.theme-option:hover, .theme-card:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--accent-2) 12%, transparent); }

.ai-fab { border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent); box-shadow: 0 12px 30px var(--identity-glow), 0 0 0 5px color-mix(in srgb, var(--accent) 5%, transparent); }
.ai-fab-icon { position: relative; }
.ai-fab-icon::after { content: '✦'; position: absolute; top: -5px; right: -4px; color: var(--accent-2); font-size: 8px; }
.ai-panel { backdrop-filter: blur(22px); }

@media (max-width: 650px) {
  .crumb { padding: 6px 9px; font-size: 10px; }
  .hero::before { left: 17px; top: 17px; font-size: 13px; letter-spacing: 8px; }
  .module:hover { transform: translateY(-3px) scale(1.006); }
}

@media (prefers-reduced-motion: reduce) {
  body::after, .brand-mark::after, .hero::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   MARJA3I DZ / INTERFACE SIGNATURE LAYER
   Distinctive iconography · quiet focus · visual comfort
   ───────────────────────────────────────────────────────────── */
.platform-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  padding: 7px 10px;
  font-size: 10px;
  white-space: nowrap;
}
.platform-status i,
.crumb-signal {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58d58a;
  box-shadow: 0 0 0 4px color-mix(in srgb, #58d58a 14%, transparent), 0 0 14px color-mix(in srgb, #58d58a 54%, transparent);
}
.crumb-signal { margin-inline-start: 2px; width: 5px; height: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, #58d58a 12%, transparent); }

.hero { min-height: 330px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.hero-content { flex: 1; }
.hero-orbit { position: absolute; top: 27px; inset-inline-end: 34px; display: flex; gap: 12px; color: var(--accent-2); opacity: .46; font-size: 17px; letter-spacing: 3px; }
.hero-orbit span:nth-child(2) { color: var(--accent); transform: translateY(10px); }
.hero-orbit span:nth-child(3) { transform: translateY(-5px); }
.eyebrow-badge { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px; color: var(--accent-2); font-size: 9px; letter-spacing: 0; }
.eyebrow-badge::first-letter { color: #58d58a; }
.hero-actions .button-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-inline-end: 5px; border-radius: 6px; background: color-mix(in srgb, currentColor 13%, transparent); font-size: 13px; }
.hero-actions .secondary .button-icon { color: var(--accent-2); }
.hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin-top: 25px; color: var(--muted); font-size: 10px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 5px; }
.hero-trust i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; color: var(--accent-ink); background: var(--accent); font-style: normal; font-size: 9px; }
.hero-trust span:nth-child(2) i { color: var(--accent-ink); background: var(--accent-2); }
.hero-trust span:nth-child(3) i { color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); }
.hero-seal { position: relative; flex: 0 0 178px; width: 178px; height: 178px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent-2) 31%, var(--line)); border-radius: 50%; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 36%), color-mix(in srgb, var(--surface-strong) 40%, transparent); box-shadow: inset 0 0 42px color-mix(in srgb, var(--accent-2) 10%, transparent), 0 18px 55px rgba(0,0,0,.13); transform: rotate(8deg); }
.hero-seal::before, .hero-seal::after { content: ''; position: absolute; border: 1px dashed color-mix(in srgb, var(--accent-2) 35%, transparent); border-radius: 50%; }
.hero-seal::before { inset: 13px; }
.hero-seal::after { inset: 26px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.hero-seal .seal-ring { position: absolute; inset: -7px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; animation: sealSpin 16s linear infinite; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
.hero-seal strong { position: relative; z-index: 1; color: var(--accent); font-size: 55px; line-height: 1; transform: rotate(-8deg); }
.hero-seal span { position: absolute; bottom: 39px; color: var(--accent-2); font: 700 10px 'Space Grotesk'; letter-spacing: 3px; direction: ltr; transform: rotate(-8deg); }

.stat { position: relative; overflow: hidden; align-items: center; }
.stat::after { content: '✦'; position: absolute; inset: auto 13px 9px auto; color: var(--accent); opacity: .11; font-size: 30px; }
.stat-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 14px; }
.stat:nth-child(2) .stat-icon { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 30%, var(--line)); background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.stat:nth-child(3) .stat-icon { color: #58d58a; border-color: color-mix(in srgb, #58d58a 30%, var(--line)); background: color-mix(in srgb, #58d58a 8%, transparent); }
.stat > div:nth-child(2) { margin-inline-end: auto; }
.section-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--accent-2); font: 10px 'Space Grotesk'; letter-spacing: 1px; }
.section-kicker span { display: grid; place-items: center; min-width: 23px; height: 19px; border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line)); border-radius: 6px; font-size: 9px; }
.view-all { display: inline-flex; align-items: center; gap: 8px; }
.view-all span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--accent-ink); background: var(--accent); transition: transform .2s; }
.view-all:hover span { transform: translateX(-3px); }

@media (max-width: 820px) {
  .platform-status { display: none; }
  .hero { min-height: auto; }
  .hero-seal { flex-basis: 132px; width: 132px; height: 132px; }
  .hero-seal strong { font-size: 42px; }
  .hero-seal span { bottom: 28px; }
}
@media (max-width: 520px) {
  .hero { display: block; }
  .hero-orbit { top: 17px; inset-inline-end: 18px; font-size: 13px; gap: 8px; }
  .hero-seal { width: 94px; height: 94px; margin: 24px 0 0 auto; }
  .hero-seal::before { inset: 8px; }
  .hero-seal::after { inset: 18px; }
  .hero-seal .seal-ring { inset: -5px; }
  .hero-seal strong { font-size: 30px; }
  .hero-seal span { bottom: 20px; font-size: 8px; letter-spacing: 2px; }
  .hero-trust { gap: 8px; margin-top: 19px; }
  .hero-trust span { font-size: 9px; }
  .stat { min-height: 94px; }
  .stat-icon { width: 27px; height: 27px; font-size: 12px; }
  .stat > div:nth-child(2) { margin-inline-start: 8px; }
}
@media (prefers-reduced-motion: reduce) { .hero-seal .seal-ring { animation: none; } }

.ai-note { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ai-note-dot { width: 6px; height: 6px; border-radius: 50%; background: #58d58a; box-shadow: 0 0 0 3px color-mix(in srgb, #58d58a 14%, transparent); }

/* ─────────────────────────────────────────────────────────────
   MARJA3I DZ / SOFT INTERACTION MOTION
   ───────────────────────────────────────────────────────────── */
.theme-switching,
.theme-switching * { transition: background-color .42s ease, border-color .42s ease, color .42s ease, box-shadow .42s ease !important; }

.reveal-ready { opacity: 0; transform: translateY(15px); transition: opacity .58s ease var(--reveal-delay, 0ms), transform .58s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms); }
.reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
.hero.reveal-ready { transform: translateY(18px) scale(.992); }
.hero.reveal-ready.is-visible { transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1); }
.stats.reveal-ready.is-visible { transition-delay: 80ms; }

.primary, .secondary, .view-all, .ai-suggestion, .ai-send { position: relative; overflow: hidden; isolation: isolate; }
.ui-ripple { position: absolute; z-index: -1; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; background: color-mix(in srgb, currentColor 22%, transparent); transform: translate(-50%, -50%) scale(1); animation: uiRipple .52s ease-out forwards; }
@keyframes uiRipple { to { transform: translate(-50%, -50%) scale(22); opacity: 0; } }

@media (max-width: 520px) {
  .reveal-ready { transform: translateY(10px); }
  .hero.reveal-ready { transform: translateY(12px); }
  .hero.reveal-ready.is-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready, .reveal-ready.is-visible { opacity: 1; transform: none; transition: none; }
  .theme-switching, .theme-switching * { transition: none !important; }
}