*,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   /* ================================================
           TOKEN SYSTEM — Dark Mode (padrão)
        ================================================ */
   :root,
   [data-theme="dark"] {
       --c-bg: #0e0e10;
       --c-surface: #141416;
       --c-surface-2: #1a1a1e;
       --c-surface-3: #222228;
       --c-border: #2a2a2f;
       --c-border-subtle: #1f1f24;

       --c-text: #ececec;
       --c-text-2: #9898a6;
       --c-text-3: #ccc1c1;

       --c-accent: #3b82f6;
       --c-accent-dim: rgba(59, 130, 246, .12);
       --c-accent-line: rgba(59, 130, 246, .3);

       --c-pos: #22c55e;
       --c-pos-dim: rgba(34, 197, 94, .12);
       --c-pos-line: rgba(34, 197, 94, .3);

       --c-warn: #f59e0b;
       --c-warn-dim: rgba(245, 158, 11, .12);
       --c-warn-line: rgba(245, 158, 11, .3);

       --c-neg: #ef4444;
       --c-neg-dim: rgba(239, 68, 68, .12);
       --c-neg-line: rgba(239, 68, 68, .3);

       --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
       --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
   }

   /* ================================================
           TOKEN SYSTEM — Light Mode
        ================================================ */
   [data-theme="light"] {
       --c-bg: #f5f5f5;
       --c-surface: #ffffff;
       --c-surface-2: #f8f8f8;
       --c-surface-3: #f0f0f0;
       --c-border: #e2e2e2;
       --c-border-subtle: #ebebeb;

       --c-text: #111111;
       --c-text-2: #555560;
       --c-text-3: #9898a6;

       --c-accent: #2563eb;
       --c-accent-dim: rgba(37, 99, 235, .08);
       --c-accent-line: rgba(37, 99, 235, .25);

       --c-pos: #16a34a;
       --c-pos-dim: rgba(22, 163, 74, .08);
       --c-pos-line: rgba(22, 163, 74, .25);

       --c-warn: #d97706;
       --c-warn-dim: rgba(217, 119, 6, .08);
       --c-warn-line: rgba(217, 119, 6, .25);

       --c-neg: #dc2626;
       --c-neg-dim: rgba(220, 38, 38, .08);
       --c-neg-line: rgba(220, 38, 38, .25);

       --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
       --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
   }

   /* ================================================
           BASE
        ================================================ */
   html {
       font-size: 15px;
   }

   body {
       font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background-color: var(--c-bg);
       padding: 0 15px 40px 15px;
       color: var(--c-text);
       width: 100vw;
       line-height: 1.5;
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
       transition: background-color .2s ease, color .2s ease;
   }

   /* ================================================
           LAYOUT
        ================================================ */
   .page {
       max-width: 1120px;
       margin: 0 auto;
       padding: 0 24px 80px;
   }

   /* ================================================
           TOP BAR
        ================================================ */
   .topbar {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       height: 100px;
       border-bottom: 1px solid var(--c-border);
       position: sticky;
       top: 0;
       z-index: 50;
       background: var(--c-bg);
       padding: 0 24px;
       margin: 0 12px;
       transition: background-color .2s ease;
   }

   .topbar-left {
       display: flex;
       align-items: center;
       margin-top: 15px;
       gap: 10px;
   }

   .wordmark {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .wordmark-icon {
       width: 22px;
       height: 22px;
       color: var(--c-accent);
       flex-shrink: 0;
   }

   .wordmark-text {
       font-size: .875rem;
       font-weight: 500;
       color: var(--c-text);
       letter-spacing: -.01em;
   }

   .topbar-divider {
       width: 1px;
       height: 16px;
       background: var(--c-border);
   }

   .topbar-label {
       font-size: .8rem;
       color: var(--c-text-3);
   }

   .topbar-right {
       display: flex;
       align-items: center;
       margin-bottom: 10px;
       margin-top: 10px;
       gap: 8px;
   }

   .chip {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 7px 10px;
       border-radius: 6px;
       font-size: .75rem;
       font-weight: 500;
       border: 1px solid var(--c-border);
       background: var(--c-surface);
       color: var(--c-text-2);
       font-family: 'Geist Mono', monospace;
   }

   .chip-dot {
       width: 5px;
       height: 5px;
       border-radius: 50%;
       background: var(--c-pos);
   }

   /* Theme Toggle */
   .theme-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       border-radius: 6px;
       border: 1px solid var(--c-border);
       background: var(--c-surface);
       color: var(--c-text-2);
       cursor: pointer;
       transition: all .15s ease;
   }

   .theme-btn:hover {
       background: var(--c-surface-2);
       color: var(--c-text);
       border-color: var(--c-text-3);
   }

   .icon-sun,
   .icon-moon {
       width: 16px;
       height: 15px;
   }

   [data-theme="dark"] .icon-sun {
       display: none;
   }

   [data-theme="light"] .icon-moon {
       display: none;
   }

   .print-btn-top {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 7px 12px;
       border-radius: 6px;
       border: 1px solid var(--c-border);
       background: var(--c-surface);
       color: var(--c-text-2);
       font-family: inherit;
       font-size: .8rem;
       font-weight: 500;
       cursor: pointer;
       transition: all .15s ease;
   }

   .print-btn-top:hover {
       background: var(--c-surface-2);
       color: var(--c-text);
   }

   /* ================================================
           SECTION HEADING
        ================================================ */
   .page-header {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
       gap: 10px;
       padding: 48px 0 40px;
       border-bottom: 1px solid var(--c-border);
       margin-bottom: 40px;
   }

   .page-header-title {
       font-size: 2.5rem;
       font-weight: 600;
       color: var(--c-text);
       letter-spacing: -.03em;
       line-height: 1.15;
       margin-bottom: 6px;
   }

   .page-header-subtitle {
       font-size: 1.2rem;
       font-weight: 400;
       color: var(--c-text);
       letter-spacing: -.015em;
       line-height: 1.15;
       margin-bottom: 6px;
   }

   .page-header-meta {
       font-size: .9rem;
       color: var(--c-text-3);
       font-family: 'Geist Mono', monospace;
   }

   /* ================================================
           SECTION BLOCK
        ================================================ */
   .section-heading {
       display: flex;
       align-items: baseline;
       gap: 12px;
       margin-bottom: 20px;
   }

   .section-heading h2 {
       font-size: 1rem;
       font-weight: 600;
       color: var(--c-text);
       letter-spacing: -.015em;
   }

   .section-heading .section-count {
       font-size: .75rem;
       color: var(--c-text-3);
       font-family: 'Geist Mono', monospace;
   }

   .section-rule {
       border: none;
       border-top: 1px solid var(--c-border);
       margin: 40px 0;
   }

   /* ================================================
           KPI GRID
        ================================================ */
   .kpi-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 1px;
       background: var(--c-border);
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       margin-bottom: 40px;
   }

   .kpi-cell {
       background: var(--c-surface);
       padding: 24px;
       transition: background .15s;
   }

   .kpi-cell:hover {
       background: var(--c-surface-2);
   }

   .kpi-label {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
       margin-bottom: 10px;
   }

   .kpi-value {
       font-size: 2.25rem;
       font-weight: 300;
       letter-spacing: -.04em;
       line-height: 1;
       font-family: 'Geist', sans-serif;
       margin-bottom: 6px;
   }

   .kpi-sub {
       font-size: .75rem;
       color: var(--c-text-3);
   }

   /* ================================================
           SELECTOR
        ================================================ */
   .selector-section {
       margin-bottom: 32px;
   }

   .selector-label {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
       margin-bottom: 8px;
   }

   .select-wrap {
       position: relative;
       max-width: 480px;
   }

   select {
       width: 100%;
       appearance: none;
       background: var(--c-surface);
       border: 1px solid var(--c-border);
       border-radius: 8px;
       padding: 10px 36px 10px 14px;
       color: var(--c-text);
       font-family: inherit;
       font-size: .875rem;
       cursor: pointer;
       outline: none;
       transition: border-color .15s;
   }

   select:hover {
       border-color: var(--c-text-3);
   }

   select:focus {
       border-color: var(--c-accent);
       box-shadow: 0 0 0 3px var(--c-accent-dim);
   }

   .select-chevron {
       position: absolute;
       right: 12px;
       top: 50%;
       transform: translateY(-50%);
       pointer-events: none;
       color: var(--c-text-3);
       width: 14px;
       height: 14px;
   }

   /* ================================================
           ENTITY KPI GRID (menor, por entidade)
        ================================================ */
   .entity-kpi-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 12px;
       margin-bottom: 32px;
   }

   .entity-kpi {
       background: var(--c-surface);
       border: 1px solid var(--c-border);
       border-radius: 8px;
       padding: 18px 20px;
       transition: border-color .15s;
   }

   .entity-kpi:hover {
       border-color: var(--c-text-3);
   }

   .entity-kpi-label {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
       margin-bottom: 8px;
   }

   .entity-kpi-value {
       font-size: 1.625rem;
       font-weight: 400;
       letter-spacing: -.03em;
       line-height: 1;
       font-family: 'Geist', sans-serif;
       margin-bottom: 4px;
   }

   .entity-kpi-sub {
       font-size: .72rem;
       color: var(--c-text-3);
       font-family: 'Geist Mono', monospace;
   }

   .entity-kpi-sub-sentimento {
       display: flex;
       flex-direction: column;
       gap: 4px;
       font-size: .72rem;
       color: var(--c-text-3);
       font-family: 'Geist Mono', monospace;
   }

   /* ================================================
           RANKING
        ================================================ */
   .ranking-table {
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       margin-bottom: 40px;
   }

   .ranking-row {
       display: grid;
       grid-template-columns: 44px 1fr auto auto;
       align-items: center;
       gap: 0;
       padding: 0;
       border-bottom: 1px solid var(--c-border-subtle);
       background: var(--c-surface);
       transition: background .12s;
   }

   .ranking-row:last-child {
       border-bottom: none;
   }

   .ranking-row:hover {
       background: var(--c-surface-2);
   }

   .ranking-pos {
       font-family: 'Geist Mono', monospace;
       font-size: 1rem;
       color: var(--c-text-3);
       text-align: center;
       padding: 14px 0;
       border-right: 1px solid var(--c-border-subtle);
   }

   .ranking-name {
       font-size: .875rem;
       font-weight: 500;
       color: var(--c-text);
       padding: 14px 16px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .ranking-bar-area {
       padding: 14px 20px;
       display: flex;
       align-items: center;
       gap: 12px;
       flex: 1;
       min-width: 180px;
   }

   .ranking-track {
       flex: 1;
       height: 4px;
       background: var(--c-surface-3);
       border-radius: 2px;
       overflow: hidden;
   }

   .ranking-fill {
       height: 100%;
       border-radius: 2px;
       transition: width .8s cubic-bezier(.4, 0, .2, 1);
   }

   .ranking-nps {
       font-family: 'Geist Mono', monospace;
       font-size: .8rem;
       font-weight: 500;
       color: var(--c-text);
       min-width: 36px;
       text-align: right;
   }

   .ranking-count {
       font-size: .72rem;
       color: var(--c-text-3);
       font-family: 'Geist Mono', monospace;
       padding: 14px 16px;
       text-align: right;
       white-space: nowrap;
   }

   /* ================================================
           CHARTS AREA
        ================================================ */
   .charts-row {
       display: flex;
       flex-direction: row;
       gap: 16px;
       width: 100%;
       margin-bottom: 32px;
   }

   .chart-card {
       border: 1px solid var(--c-border);
       border-radius: 10px;
       width: 100%;
       background: var(--c-surface);
       padding: 24px;
   }

   .chart-title {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
       margin-bottom: 20px;
   }

   .chart-canvas-wrap {
       display: flex;
       justify-content: center;
       height: 220px;
   }

   /* ================================================
           WORDCLOUD
        ================================================ */
   .wordcloud-wrap {
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       background: var(--c-surface);
       margin-bottom: 32px;
   }

   .wordcloud-header {
       padding: 14px 20px;
       border-bottom: 1px solid var(--c-border);
   }

   .wordcloud-header span {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
   }

   .wordcloud-body {
       padding: 20px;
       display: flex;
       justify-content: center;
       min-height: 200px;
       align-items: center;
   }

   .wordcloud-body img {
       max-width: 100%;
       height: auto;
       border-radius: 4px;
   }

   /* ================================================
           KEYWORDS
        ================================================ */
   .keywords-wrap {
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       background: var(--c-surface);
       margin-bottom: 32px;
   }

   .keywords-header {
       padding: 14px 20px;
       border-bottom: 1px solid var(--c-border);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .keywords-header span {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
   }

   .keywords-body {
       padding: 8px 0;
   }

   .kw-row {
       display: grid;
       grid-template-columns: 130px 1fr 36px 20px;
       align-items: center;
       gap: 12px;
       padding: 8px 20px;
       transition: background .12s;
   }

   .kw-row:hover {
       background: var(--c-surface-2);
   }

   .kw-word {
       font-size: .825rem;
       font-weight: 500;
       color: var(--c-text);
       text-align: right;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .kw-track {
       height: 3px;
       background: var(--c-surface-3);
       border-radius: 2px;
       overflow: hidden;
   }

   .kw-fill {
       height: 100%;
       border-radius: 2px;
   }

   .kw-freq {
       font-size: .72rem;
       font-family: 'Geist Mono', monospace;
       color: var(--c-text-3);
       text-align: center;
   }

   .kw-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       margin: auto;
   }

   /* ================================================
           HIGHLIGHTS
        ================================================ */
   .highlights-cols {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-bottom: 32px;
   }

   .highlights-col-wrap {
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       background: var(--c-surface);
   }

   .highlights-col-header {
       padding: 12px 20px;
       border-bottom: 1px solid var(--c-border);
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .col-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       flex-shrink: 0;
   }

   .highlights-col-header span {
       font-size: .7rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
   }

   .highlights-col-body {
       padding: 4px 0;
   }

   .quote-item {
       padding: 14px 20px;
       border-bottom: 1px solid var(--c-border-subtle);
       transition: background .12s;
   }

   .quote-item:last-child {
       border-bottom: none;
   }

   .quote-item:hover {
       background: var(--c-surface-2);
   }

   .quote-text {
       font-size: .85rem;
       line-height: 1.55;
       color: var(--c-text);
       margin-bottom: 10px;
   }

   .quote-meta {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .quote-ticket {
       font-size: .7rem;
       font-family: 'Geist Mono', monospace;
       color: var(--c-text-3);
   }

   .nota-pill {
       font-size: .7rem;
       font-family: 'Geist Mono', monospace;
       font-weight: 600;
       padding: 2px 8px;
       border-radius: 4px;
   }

   /* ================================================
           TABLE SECTION
        ================================================ */
   .table-section {
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       background: var(--c-surface);
   }

   .table-toolbar {
       display: flex;
       align-items: flex-end;
       gap: 12px;
       padding: 16px 20px;
       border-bottom: 1px solid var(--c-border);
       flex-wrap: wrap;
   }

   .field-group {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .field-label {
       font-size: .68rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
   }

   .field-input {
       appearance: none;
       background: var(--c-surface-2);
       border: 1px solid var(--c-border);
       border-radius: 6px;
       padding: 7px 12px;
       color: var(--c-text);
       font-family: inherit;
       font-size: .825rem;
       outline: none;
       transition: border-color .15s;
       height: 34px;
   }

   .field-input:hover {
       border-color: var(--c-text-3);
   }

   .field-input:focus {
       border-color: var(--c-accent);
       box-shadow: 0 0 0 3px var(--c-accent-dim);
   }

   .search-wrap {
       position: relative;
   }

   .search-wrap .field-input {
       padding-left: 32px;
       min-width: 240px;
   }

   .search-icon {
       position: absolute;
       left: 10px;
       top: 50%;
       transform: translateY(-50%);
       width: 14px;
       height: 14px;
       color: var(--c-text-3);
       pointer-events: none;
   }

   .table-actions {
       margin-left: auto;
       display: flex;
       gap: 8px;
       flex-shrink: 0;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       height: 34px;
       padding: 0 14px;
       border-radius: 6px;
       font-family: inherit;
       font-size: .8rem;
       font-weight: 500;
       cursor: pointer;
       border: 1px solid var(--c-border);
       background: var(--c-surface-2);
       color: var(--c-text-2);
       transition: all .15s;
   }

   .btn:hover {
       background: var(--c-surface-3);
       color: var(--c-text);
       border-color: var(--c-text-3);
   }

   .btn-primary {
       background: var(--c-accent);
       border-color: var(--c-accent);
       color: #fff;
   }

   .btn-primary:hover {
       opacity: .88;
       background: var(--c-accent);
       color: #fff;
   }

   .table-summary-bar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 8px 20px;
       border-bottom: 1px solid var(--c-border-subtle);
       background: var(--c-surface-2);
   }

   .table-count {
       font-size: .72rem;
       font-family: 'Geist Mono', monospace;
       color: var(--c-text-3);
   }

   .table-wrap {
       overflow-x: auto;
   }

   table {
       width: 100%;
       border-collapse: collapse;
   }

   thead th {
       padding: 10px 16px;
       text-align: left;
       font-size: .68rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .1em;
       color: var(--c-text-3);
       background: var(--c-surface-2);
       border-bottom: 1px solid var(--c-border);
       cursor: pointer;
       user-select: none;
       white-space: nowrap;
       transition: background .12s;
   }

   thead th:hover {
       background: var(--c-surface-3);
       color: var(--c-text-2);
   }

   thead th.sorted {
       color: var(--c-accent);
   }

   .sort-ind {
       display: inline;
       margin-left: 4px;
       opacity: .5;
       font-family: 'Geist Mono', monospace;
   }

   thead th.sorted .sort-ind {
       opacity: 1;
   }

   tbody td {
       padding: 12px 16px;
       border-bottom: 1px solid var(--c-border-subtle);
       font-size: .825rem;
       vertical-align: middle;
   }

   tbody tr:last-child td {
       border-bottom: none;
   }

   tbody tr:hover td {
       background: var(--c-surface-2);
   }

   .td-ticket {
       font-family: 'Geist Mono', monospace;
       font-size: .75rem;
       color: var(--c-text-3);
   }

   .td-nota {
       font-family: 'Geist Mono', monospace;
       font-weight: 500;
       font-size: .825rem;
   }

   .td-comment {
       max-width: 500px;
       line-height: 1.5;
       color: var(--c-text);
   }

   .sent-badge {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 3px 8px;
       border-radius: 4px;
       font-size: .7rem;
       font-weight: 500;
   }

   .sent-dot {
       width: 5px;
       height: 5px;
       border-radius: 50%;
   }

   .pos {
       background: var(--c-pos-dim);
       color: var(--c-pos);
   }

   .pos .sent-dot {
       background: var(--c-pos);
   }

   .neg {
       background: var(--c-neg-dim);
       color: var(--c-neg);
   }

   .neg .sent-dot {
       background: var(--c-neg);
   }

   .neu {
       background: var(--c-surface-3);
       color: var(--c-text-2);
   }

   .neu .sent-dot {
       background: var(--c-text-3);
   }

   /* ================================================
           FOOTER
        ================================================ */
   .footer {
       padding: 32px 0 16px;
       border-top: 1px solid var(--c-border);
       margin-top: 64px;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .footer-text {
       display: flex;
       flex-direction: column;
       font-size: .72rem;
       font-family: 'Geist Mono', monospace;
       color: var(--c-text-3);
   }

   .footer-text a {
       all: unset;
       cursor: pointer;
       color: var(--c-text);
       text-decoration: none;
   }

   .footer-text a:hover {
       color: var(--c-accent);
   }

   /* ================================================
           RESPONSIVE
        ================================================ */
   @media (max-width: 1132px) {
       .kpi-grid {
           grid-template-columns: 1fr 1fr;
       }

       .entity-kpi-grid {
           grid-template-columns: 1fr 1fr;
       }

       .charts-row {
           flex-direction: column;
       }

       .highlights-cols {
           grid-template-columns: 1fr;
       }

       .ranking-row {
           grid-template-columns: 44px 1fr auto;
       }

       .ranking-bar-area {
           display: none;
       }
   }

   @media (max-width: 600px) {
       .page {
           padding: 0 16px 80px;
       }

       .topbar {
           padding: 0 20px;
       }

       .kpi-grid {
           grid-template-columns: 1fr;
       }

       .entity-kpi-grid {
           grid-template-columns: 1fr 1fr;
       }

       .table-toolbar {
           flex-direction: column;
           align-items: stretch;
       }

       .table-actions {
           margin-left: 0;
       }

       .search-wrap .field-input {
           min-width: 100%;
       }
   }

   /* ================================================
           HOME PAGE — Hero & Presentation
        ================================================ */
   .home-hero {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       padding: 80px 24px 64px;
       gap: 24px;
   }

   .home-hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 5px 12px;
       border-radius: 100px;
       border: 1px solid var(--c-accent-line);
       background: var(--c-accent-dim);
       font-size: .72rem;
       font-weight: 500;
       font-family: 'Geist Mono', monospace;
       color: var(--c-accent);
       letter-spacing: .05em;
       text-transform: uppercase;
       animation: fadeInDown .5s ease both;
   }

   .home-hero-badge-dot {
       width: 5px;
       height: 5px;
       border-radius: 50%;
       background: var(--c-accent);
       animation: pulse 2s infinite;
   }

   @keyframes pulse {

       0%,
       100% {
           opacity: 1;
           transform: scale(1);
       }

       50% {
           opacity: .5;
           transform: scale(.8);
       }
   }

   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-12px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(16px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .home-hero-title {
       font-size: clamp(2.2rem, 5vw, 3.5rem);
       font-weight: 600;
       color: var(--c-text);
       letter-spacing: -.04em;
       line-height: 1.1;
       max-width: 700px;
       animation: fadeInUp .55s ease .1s both;
   }

   .home-hero-title-accent {
       color: var(--c-accent);
   }

   .home-hero-desc {
       font-size: 1.05rem;
       text-align: justify;
       text-indent: 12px;
       color: var(--c-text-2);
       line-height: 1.7;
       max-width: 560px;
       animation: fadeInUp .55s ease .2s both;
   }

   .home-hero-actions {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 12px;
       margin-top: 8px;
       animation: fadeInUp .55s ease .3s both;
   }

   .home-btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 12px 24px;
       border-radius: 8px;
       font-family: inherit;
       font-size: .9rem;
       font-weight: 500;
       text-decoration: none;
       cursor: pointer;
       transition: all .18s ease;
       white-space: nowrap;
   }

   .home-btn-primary {
       background: var(--c-accent);
       color: #fff;
       border: 1px solid var(--c-accent);
       box-shadow: 0 0 0 0 var(--c-accent-dim);
   }

   .home-btn-primary:hover {
       opacity: .88;
       transform: translateY(-1px);
       box-shadow: 0 6px 20px var(--c-accent-dim);
   }

   .home-btn-secondary {
       background: var(--c-surface);
       color: var(--c-text);
       border: 1px solid var(--c-border);
   }

   .home-btn-secondary:hover {
       background: var(--c-surface-2);
       border-color: var(--c-text-3);
       transform: translateY(-1px);
   }

   .home-btn svg {
       flex-shrink: 0;
   }

   /* ================================================
           HOME PAGE — Divider
        ================================================ */
   .home-divider {
       border: none;
       border-top: 1px solid var(--c-border);
       margin: 0 0 48px;
   }

   /* ================================================
           HOME PAGE — Feature Cards
        ================================================ */
   .home-features-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1px;
       background: var(--c-border);
       border: 1px solid var(--c-border);
       border-radius: 10px;
       overflow: hidden;
       margin-bottom: 48px;
   }

   .home-feature-card {
       background: var(--c-surface);
       padding: 28px 24px;
       transition: background .15s ease;
   }

   .home-feature-card:hover {
       background: var(--c-surface-2);
   }

   .home-feature-icon {
       width: 36px;
       height: 36px;
       border-radius: 8px;
       border: 1px solid var(--c-border);
       background: var(--c-surface-2);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 16px;
       color: var(--c-accent);
   }

   .home-feature-label {
       font-size: .875rem;
       font-weight: 600;
       color: var(--c-text);
       letter-spacing: -.01em;
       margin-bottom: 8px;
   }

   .home-feature-desc {
       font-size: .8rem;
       text-align: justify;
       text-indent: 12px;
       color: var(--c-text-2);
       line-height: 1.6;
   }

   /* ================================================
           RESPONSIVE — Home Page
        ================================================ */
   @media (max-width: 900px) {
       .home-features-grid {
           grid-template-columns: 1fr 1fr;
       }
   }

   @media (max-width: 600px) {
       .home-hero {
           padding: 56px 0 40px;
       }

       .home-hero-actions {
           flex-direction: column;
           width: 100%;
       }

       .home-btn {
           justify-content: center;
       }

       .home-features-grid {
           grid-template-columns: 1fr;
       }
   }

   /* ================================================
           PRINT
        ================================================ */
   @media print {
       .topbar {
           position: relative;
           border-bottom: 1px solid #ddd;
       }

       .theme-btn,
       .print-btn-top {
           display: none;
       }

       [data-theme="dark"] {
           --c-bg: #fff;
           --c-surface: #fff;
           --c-surface-2: #f8f8f8;
           --c-surface-3: #f0f0f0;
           --c-border: #e2e2e2;
           --c-border-subtle: #ebebeb;
           --c-text: #111;
           --c-text-2: #444;
           --c-text-3: #888;
       }
   }