/* ── Article Styles ── */
       .breadcrumb {
           display: flex;
           align-items: center;
           gap: var(--sp-2);
           font-size: var(--fs-14);
           color: var(--fg-mute);
           margin-bottom: var(--sp-6);
           padding: var(--sp-6);

           flex-wrap: wrap;
           border-top: 1px solid var(--line);
           border-bottom: 1px solid var(--line);

       }

       .breadcrumb a {
           color: var(--fg-soft);
           transition: color 300ms;
       }

       .breadcrumb a:hover {
           color: var(--accent);
       }

       .breadcrumb [aria-current="page"] {
           color: var(--fg);
           font-weight: 500;
       }

       .article-hero {
           padding-top: var(--sp-6);
           padding-bottom: var(--sp-7);
       }

       .article-hero-grid {
           display: grid;
           gap: var(--sp-7);
           align-items: start;
       }

       /* ── FAQ Section ── */
       .faq-section {
           padding-top: var(--sp-6);
           padding-bottom: 0;
       }

       .faq-header {
           margin-bottom: var(--sp-6);
       }

       .faq-header h2 {
           margin-bottom: var(--sp-2);
       }

       /* ── FAQ List ── */
       .faq-list {
           display: flex;
           flex-direction: column;
           gap: var(--sp-3);
       }

       .faq-item {
           border: 1px solid var(--line);
           border-radius: var(--r-md);
           background: var(--bg-elev);
           transition: all var(--d-fast) var(--ease-out);
           overflow: hidden;
           height: max-content;
           max-height: 60px;
       }

       .faq-item:hover {
           border-color: var(--line-strong);
       }

       .faq-item.is-active {
           border-color: var(--accent);
           box-shadow: 0 0 0 1px var(--accent);
           height: max-content;
           max-height: 500px;
           transition: all var(--d-fast) var(--ease-out);

       }

       /* ── Question Button ── */
       .faq-question {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: var(--sp-4);
           width: 100%;
           padding: var(--sp-4) var(--sp-5);
           font-family: var(--ff-display);
           font-size: var(--fs-18);
           font-weight: 500;
           line-height: var(--lh-snug);
           text-align: left;
           color: var(--fg);
           background: transparent;
           border: 0;
           cursor: pointer;
           transition: color var(--d-fast) var(--ease-out);
           position: relative;
           -webkit-tap-highlight-color: transparent;
       }

       .faq-question:hover {
           color: var(--accent);
       }

       .faq-question:focus-visible {
           outline-offset: -2px;
       }

       .faq-icon {
           flex-shrink: 0;
           width: 28px;
           height: 28px;
           display: grid;
           place-items: center;
           border-radius: 50%;
           background: var(--bg-sunk);
           border: 1px solid var(--line);
           transition: background var(--d-fast) var(--ease-out),
               transform var(--d-base) var(--ease-out),
               border-color var(--d-fast) var(--ease-out);
       }

       .faq-icon svg {
           width: 16px;
           height: 16px;
           stroke: var(--fg-mute);
           transition: stroke var(--d-fast) var(--ease-out),
               transform var(--d-base) var(--ease-out);
       }

       .faq-question[aria-expanded="true"] .faq-icon {
           background: var(--accent);
           border-color: var(--accent);
       }

       .faq-question[aria-expanded="true"] .faq-icon svg {
           stroke: #fff;
           transform: rotate(180deg);
       }

       /* ── Answer ── */
       .faq-answer {
           display: grid;
           grid-template-rows: 0fr;
           transition: grid-template-rows var(--d-slow) var(--ease-out);
           will-change: grid-template-rows;
       }

       .faq-answer>div {
           overflow: hidden;
           color: var(--fg-soft);
           font-size: var(--fs-16);
           line-height: var(--lh-normal);
           padding: 0 var(--sp-5) var(--sp-4);
       }

       .faq-item.is-active .faq-answer {
           grid-template-rows: 1fr;
       }

       .faq-answer p {
           margin-bottom: var(--sp-3);
       }

       .faq-answer p:last-child {
           margin-bottom: 0;
       }

       /* ── Responsive ── */
       @media (max-width: 760px) {
           .faq-question {
               padding: var(--sp-3) var(--sp-4);
               font-size: var(--fs-16);
           }

           .faq-answer>div {
               padding: 0 var(--sp-4) var(--sp-3);
               font-size: var(--fs-14);
           }
       }

       @media (max-width: 480px) {
           .faq-question {
               padding: var(--sp-2) var(--sp-3);
               font-size: var(--fs-14);
           }

           .faq-answer>div {
               padding: 0 var(--sp-3) var(--sp-2);
           }

           .faq-icon {
               width: 24px;
               height: 24px;
           }

           .faq-icon svg {
               width: 14px;
               height: 14px;
           }
       }

       @media (min-width: 900px) {
           .article-hero-grid {
               grid-template-columns: 1fr 1fr;
               gap: var(--sp-8);
           }
       }

       .article-hero-content {
           display: flex;
           flex-direction: column;
           gap: var(--sp-4);
       }

       .article-meta {
           display: flex;
           align-items: center;
           gap: var(--sp-3);
           font-size: var(--fs-14);
           color: var(--fg-mute);
           flex-wrap: wrap;
       }

       .article-meta .chip {
           background: var(--accent);
           color: #fff;
           border-color: var(--accent);
           font-weight: 500;
       }

       .article-excerpt {
           font-size: var(--fs-20);
           line-height: var(--lh-snug);
           color: var(--fg-soft);
           max-width: 560px;
       }

       .article-author {
           display: flex;
           align-items: center;
           gap: var(--sp-4);
           margin-top: var(--sp-3);
       }

       .article-author img {
           width: 48px;
           height: 48px;
           border-radius: 50%;
           object-fit: cover;
       }

       .article-author strong {
           display: block;
           font-weight: 600;
       }

       .article-author span {
           font-size: var(--fs-14);
           color: var(--fg-mute);
       }

       .article-hero-image {
           border-radius: var(--r-lg);
           overflow: hidden;
           background: var(--bg-sunk);
           max-height: 550px;
       }

       .article-hero-image img {
           width: 100%;
           height: auto;
           object-fit: cover;
           object-position: top;
           transition: transform 800ms var(--ease-out);
       }

       .article-hero-image:hover img {
           transform: scale(1.02);
       }

       .article-body {
           padding-top: 0;
           padding-bottom: var(--sp-8);
       }

       .article-prose {
           display: flex;
           flex-direction: column;
           gap: var(--sp-5);
       }

       .article-prose .lead {
           font-size: var(--fs-20);
           line-height: var(--lh-normal);
           color: var(--fg-soft);
           padding-bottom: var(--sp-4);
           border-bottom: 1px solid var(--line);
       }

       .article-prose section {
           scroll-margin-top: 80px;
           display: flex;
           flex-direction: column;
           gap: var(--sp-3);
       }

       .article-prose h2 {
           font-family: var(--ff-display);
           font-size: var(--fs-display-s);
           font-weight: 500;
           line-height: var(--lh-tight);
           margin-top: var(--sp-7);
           margin-bottom: var(--sp-2);
           scroll-margin-top: 80px;
       }

       .article-prose h2:first-of-type {
           margin-top: 0;
       }

       .article-prose p {
           color: var(--fg-soft);
           max-width: 680px;
           line-height: var(--lh-loose);
       }

       .article-prose hr {
           border: 0;
           border-top: 1px solid var(--line);
           margin: var(--sp-7) 0;
       }

       .toc {
           background: var(--bg-elev);
           padding: var(--sp-5) var(--sp-6);
           border-radius: var(--r-md);
           border: 1px solid var(--line);
           margin: var(--sp-4) 0 var(--sp-6);
       }

       .toc h3 {
           font-size: var(--fs-16);
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: var(--tracking-wide);
           color: var(--fg-mute);
           margin-bottom: var(--sp-3);
           font-family: var(--ff-sans);
           display: flex;
           align-items: center;
           gap: var(--sp-2);
       }

       .toc h3 .icon {
           width: 20px;
           height: 20px;
           stroke-width: 2;
           color: var(--accent);
       }

       .toc ul {
           display: flex;
           flex-direction: column;
           gap: var(--sp-2);
           padding-left: 0;
       }

       .toc li {
           list-style: none;
       }

       .toc a {
           color: var(--fg-soft);
           font-size: var(--fs-15);
           transition: color 300ms;
           display: inline-flex;
           align-items: center;
           gap: var(--sp-2);
       }

       .toc a::before {
           content: "—";
           color: var(--accent);
           opacity: 0.6;
       }

       .toc a:hover {
           color: var(--accent);
       }

       .pull-quote {
           margin: var(--sp-5) 0;
           padding: var(--sp-5) var(--sp-6);
           background: var(--bg-sunk);
           border-radius: var(--r-md);
           border: 1px solid var(--line);
       }

       .pull-quote blockquote {
           margin: 0;
           padding: 0;
           border-left: 0;
           background: transparent;
       }

       .pull-quote blockquote p {
           font-family: var(--ff-display);
           font-size: var(--fs-24);
           line-height: var(--lh-snug);
           font-style: italic;
           color: var(--fg);
           max-width: 100%;
       }

       .pull-quote blockquote cite {
           display: block;
           margin-top: var(--sp-2);
           font-size: var(--fs-16);
           font-style: normal;
           color: var(--fg-mute);
           font-family: var(--ff-sans);
       }

       .stat-grid {
           display: grid;
           gap: var(--sp-4);
           margin: var(--sp-4) 0;
           background: var(--bg-elev);
           padding: var(--sp-5);
           border-radius: var(--r-md);
           border: 1px solid var(--line);
       }

       @media (min-width: 600px) {
           .stat-grid {
               grid-template-columns: 1fr 1fr;
           }
       }

       .stat-item {
           display: flex;
           flex-direction: column;
           gap: var(--sp-2);
           padding: var(--sp-3);
           background: var(--bg);
           border-radius: var(--r-sm);
       }

       .stat-number {
           font-family: var(--ff-display);
           font-size: var(--fs-display-s);
           font-weight: 700;
           line-height: 1;
           color: var(--accent);
       }

       .stat-label {
           font-size: var(--fs-14);
           color: var(--fg-soft);
           line-height: var(--lh-normal);
       }

       .insight-box {
           background: var(--bg-elev);
           padding: var(--sp-4) var(--sp-5);
           border-radius: var(--r-md);
           border-left: 4px solid var(--accent);
           margin: var(--sp-4) 0;
       }

       .insight-box h4 {
           font-size: var(--fs-16);
           font-weight: 600;
           margin-bottom: var(--sp-2);
           color: var(--fg);
           display: flex;
           align-items: center;
           gap: var(--sp-2);
       }

       .insight-box h4 .icon {
           width: 20px;
           height: 20px;
           stroke-width: 2;
           color: var(--accent);
           flex-shrink: 0;
       }

       .insight-box p {
           font-size: var(--fs-15);
           color: var(--fg-soft);
           max-width: 100% !important;
       }

       .insight-box code {
           font-family: var(--ff-mono);
           font-size: var(--fs-13);
           background: var(--bg-sunk);
           padding: 1px 6px;
           border-radius: var(--r-xs);
           color: var(--fg);
       }

       /* ── ACCORDION CODE BLOCKS ── */
       .code-block {
           border-radius: var(--r-md);
           overflow: visible;
           border: 1px solid var(--line);
           background: var(--bg-sunk);
           margin: var(--sp-4) 0;
       }

       .code-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: var(--sp-2) var(--sp-4);
           background: var(--bg-elev);
           border-bottom: 1px solid var(--line);
           font-size: var(--fs-12);
           color: var(--fg-mute);
           cursor: pointer;
           user-select: none;
           transition: background 300ms, border-color 300ms;
           position: relative;
           border-radius: var(--r-md);
       }

       .code-header:hover {
           background: var(--bg-sunk);
           border-color: var(--line-strong);
       }

       .code-header .code-lang {
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: var(--tracking-wide);
           font-size: var(--fs-11);
           display: flex;
           align-items: center;
           gap: var(--sp-2);
       }

       .code-header .code-lang .toggle-icon {
           display: inline-block;
           transition: transform 350ms var(--ease-out);
           font-size: var(--fs-14);
           line-height: 1;
       }

       .code-header .code-lang .toggle-icon.is-open {
           transform: rotate(90deg);
       }

       .code-header .code-copy {
           background: none;
           border: 0;
           color: var(--fg-mute);
           cursor: pointer;
           padding: var(--sp-1);
           border-radius: var(--r-xs);
           transition: color 300ms, background 300ms;
           display: flex;
           align-items: center;
           gap: var(--sp-1);
           position: relative;
       }

       .code-header .code-copy:hover {
           color: var(--fg);
           background: var(--bg-sunk);
       }

       /* Copy Tooltip */
       .copy-tooltip {
           position: absolute;
           bottom: calc(100% + 8px);
           right: 0;
           background: var(--fg);
           color: var(--bg);
           padding: 4px 12px;
           border-radius: var(--r-sm);
           font-size: var(--fs-12);
           font-weight: 500;
           white-space: nowrap;
           opacity: 0;
           transform: translateY(6px);
           transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
           pointer-events: none;
           z-index: 10;
       }

       .copy-tooltip.is-visible {
           opacity: 1;
           transform: translateY(0);
       }

       .copy-tooltip::after {
           content: "";
           position: absolute;
           top: 100%;
           right: 12px;
           border: 4px solid transparent;
           border-top-color: var(--fg);
       }

       .code-pre-wrap {
           max-height: 0;
           overflow: hidden;
           transition: max-height 450ms var(--ease-out), opacity 350ms var(--ease-out), padding 350ms var(--ease-out);
           opacity: 0;
           padding: 0 var(--sp-5);
       }

       .code-pre-wrap.is-open {
           max-height: 800px;
           opacity: 1;
           padding: var(--sp-4) var(--sp-5);
       }

       .code-pre {
           margin: 0;
           overflow-x: auto;
           font-family: var(--ff-mono);
           font-size: var(--fs-14);
           line-height: 1.7;
           color: var(--fg);
       }

       .code-pre code {
           display: block;
           white-space: pre-wrap;
           word-break: break-word;
       }

       /* Syntax Highlighting Tokens */
       .token.comment {
           color: #6a9955;
           font-style: italic;
       }

       .token.selector {
           color: #d19a66;
       }

       .token.property {
           color: #e06c75;
       }

       .token.value {
           color: #98c379;
       }

       .token.number {
           color: #d19a66;
       }

       .token.function {
           color: #61afef;
       }

       .token.punctuation {
           color: #abb2bf;
       }

       .token.keyword {
           color: #c678dd;
       }

       .token.string {
           color: #98c379;
       }

       .token.tag {
           color: #e06c75;
       }

       .token.attr {
           color: #d19a66;
       }

       .token.operator {
           color: #56b6c2;
       }

       .token.class-name {
           color: #61afef;
       }

       /* ── EXAMPLES SLIDER ── */
       .examples-slider-wrapper {
           margin: var(--sp-6) 0 var(--sp-8);
           width: 100%;
           border-radius: var(--r-md);
           overflow: hidden;
           background: var(--bg-sunk);
           border: 1px solid var(--line);
       }

       .examples-slider-container {
           position: relative;
           overflow: hidden;
           border-radius: var(--r-md);
           margin: 12px;
           box-sizing: border-box;
       }

       .examples-slider-track {
           display: flex;
           transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
           will-change: transform;
           width: 100%;
       }

       .examples-slide {
           flex: 0 0 100%;
           position: relative;
           overflow: hidden;
           background: var(--bg-sunk);
           min-height: 380px;
       }

       .examples-slide .slide-inner {
           position: relative;
           width: 100%;
           height: 100%;
           min-height: 380px;
       }

       .examples-slide .slide-image {
           width: 100%;
           height: 100%;
           min-height: 380px;
           object-fit: cover;
           display: block;
           transition: opacity 400ms var(--ease-out);
       }

       .examples-slide .slide-image.hidden {
           display: none;
       }

       .examples-slide .slide-prompt {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           padding: var(--sp-6) var(--sp-7);
           background: var(--bg-elev);
           display: flex;
           flex-direction: column;
           justify-content: center;
           gap: var(--sp-3);
           opacity: 0;
           pointer-events: none;
           transition: opacity 400ms var(--ease-out);
           overflow-y: auto;
       }

       .examples-slide .slide-prompt.is-active {
           opacity: 1;
           pointer-events: auto;
       }

       .examples-slide .slide-prompt h4 {
           font-family: var(--ff-display);
           font-size: var(--fs-20);
           color: var(--accent);
           font-weight: 500;
       }

       .examples-slide .slide-prompt p {
           font-size: var(--fs-16);
           line-height: var(--lh-loose);
           color: var(--fg-soft);
           max-width: 100%;
           font-family: var(--ff-mono);
           background: var(--bg-sunk);
           padding: var(--sp-4);
           border-radius: var(--r-sm);
           border-left: 3px solid var(--accent);
       }

       .examples-slide .slide-overlay {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           padding: var(--sp-5) var(--sp-6);
           background: var(--accent);
           color: #fff;
           width: max-content;
           opacity: 0;
           display: none;
       }

       .slide-inner:hover .slide-overlay {
           opacity: 1;
           display: block;
       }

       .examples-slide .slide-overlay h3 {
           font-family: var(--ff-display);
           font-size: var(--fs-24);
           font-weight: 500;
           margin-bottom: var(--sp-1);
       }

       .examples-slide .slide-overlay p {
           font-size: var(--fs-16);
           opacity: 0.9;
           max-width: 100%;
           color: #f0f0f0;
           margin: 0;
       }

       /* Slide Tabs */
       .slide-tabs {
           position: absolute;
           top: var(--sp-4);
           right: var(--sp-4);
           gap: var(--sp-2);
           z-index: 5;
           background: rgba(0, 0, 0, 0.55);
           backdrop-filter: blur(6px);
           -webkit-backdrop-filter: blur(6px);
           padding: 4px;
           border-radius: var(--r-pill);
           border: 1px solid rgba(255, 255, 255, 0.15);
           opacity: 0;
           display: none;
       }

       .slide-inner:hover .slide-tabs {
           opacity: 1;
           display: flex;
       }

       .slide-tabs .tab-btn {
           padding: 6px 16px;
           border-radius: var(--r-pill);
           font-size: var(--fs-12);
           font-weight: 500;
           color: rgba(255, 255, 255, 0.7);
           transition: background 300ms var(--ease-out), color 300ms var(--ease-out);
           cursor: pointer;
           border: 0;
           background: transparent;
       }

       .slide-tabs .tab-btn:hover {
           color: #fff;
           background: rgba(255, 255, 255, 0.12);
       }

       .slide-tabs .tab-btn.is-active {
           background: var(--accent);
           color: #fff;
       }

       .slide-tabs .tab-btn.is-active:hover {
           background: var(--c-accent-hi);
       }

       /* Slider Controls */
       .slider-controls {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: var(--sp-4);
           padding: var(--sp-4) var(--sp-5);
           background: var(--bg-elev);
           border-top: 1px solid var(--line);
           flex-wrap: wrap;
       }

       .slider-btn {
           width: 44px;
           height: 44px;
           border-radius: 50%;
           border: 1px solid var(--line);
           display: grid;
           place-items: center;
           transition: background 300ms, color 300ms, border-color 300ms, transform 300ms;
           background: var(--bg);
           color: var(--fg);
           cursor: pointer;
       }

       .slider-btn:hover {
           background: var(--fg);
           color: var(--bg);
           border-color: var(--fg);
           transform: scale(1.05);
       }

       .slider-btn:disabled {
           opacity: 0.35;
           pointer-events: none;
       }

       .slider-btn svg {
           width: 20px;
           height: 20px;
           stroke-width: 2.2;
       }

       .slider-dots {
           display: flex;
           gap: var(--sp-2);
           align-items: center;
       }

       .slider-dot {
           width: 10px;
           height: 10px;
           border-radius: 50%;
           border: 1px solid var(--line);
           background: var(--bg);
           transition: background 350ms var(--ease-out), transform 350ms var(--ease-out), border-color 350ms var(--ease-out);
           cursor: pointer;
           padding: 0;
       }

       .slider-dot.is-active {
           background: var(--accent);
           border-color: var(--accent);
           transform: scale(1.2);
       }

       .slider-dot:hover {
           border-color: var(--fg);
       }

       .slider-counter {
           font-size: var(--fs-14);
           color: var(--fg-mute);
           font-variant-numeric: tabular-nums;
           min-width: 48px;
           text-align: center;
       }

       @media (max-width: 600px) {
           .examples-slide {
               min-height: 280px;
           }

           .examples-slide .slide-inner {
               min-height: 280px;
           }

           .examples-slide .slide-image {
               min-height: 280px;
           }

           .examples-slide .slide-overlay {
               padding: var(--sp-4) var(--sp-4);
           }

           .examples-slide .slide-overlay h3 {
               font-size: var(--fs-18);
           }

           .examples-slide .slide-overlay p {
               font-size: var(--fs-14);
           }

           .examples-slide .slide-prompt {
               padding: var(--sp-4);
           }

           .examples-slide .slide-prompt p {
               font-size: var(--fs-14);
               padding: var(--sp-3);
           }

           .slide-tabs {
               top: var(--sp-3);
               right: var(--sp-3);
               padding: 3px;
           }

           .slide-tabs .tab-btn {
               padding: 4px 12px;
               font-size: var(--fs-11);
           }

           .slider-controls {
               padding: var(--sp-3) var(--sp-3);
               gap: var(--sp-3);
           }

           .slider-btn {
               width: 38px;
               height: 38px;
           }

           .slider-btn svg {
               width: 16px;
               height: 16px;
           }

           .slider-dot {
               width: 8px;
               height: 8px;
           }
       }

       @media (max-width: 400px) {
           .examples-slide {
               min-height: 220px;
           }

           .examples-slide .slide-inner {
               min-height: 220px;
           }

           .examples-slide .slide-image {
               min-height: 220px;
           }

           .examples-slide .slide-overlay h3 {
               font-size: var(--fs-16);
           }

           .examples-slide .slide-overlay p {
               font-size: var(--fs-12);
           }

           .examples-slide .slide-prompt p {
               font-size: var(--fs-13);
           }

           .slide-tabs .tab-btn {
               padding: 3px 10px;
               font-size: var(--fs-10);
           }
       }

       /* ── Related Styles ── */
       .related-styles {
           padding-top: 0;
           padding-bottom: var(--sp-9);
       }

       .related-grid {
           display: grid;
           gap: var(--sp-5);
       }

       @media (min-width: 600px) {
           .related-grid {
               grid-template-columns: repeat(3, 1fr);
           }
       }

       @media (max-width: 599px) {
           .related-grid {
               grid-template-columns: 1fr;
           }
       }

       .related-card {
           background: var(--bg-elev);
           border-radius: var(--r-md);
           overflow: hidden;
           border: 1px solid var(--line);
           transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
           display: flex;
           flex-direction: column;
           text-decoration: none;
           color: inherit;
       }

       .related-card:hover {
           transform: translateY(-4px);
           box-shadow: var(--sh-3);
       }

       .related-card img {
           width: 100%;
           height: 180px;
           object-fit: cover;
       }

       .related-card-body {
           padding: var(--sp-4);
           display: flex;
           flex-direction: column;
           gap: var(--sp-2);
           flex: 1;
       }

       .related-card-body h3 {
           font-family: var(--ff-display);
           font-size: var(--fs-20);
           font-weight: 500;
       }

       .related-card-body p {
           font-size: var(--fs-15);
           color: var(--fg-soft);
           line-height: var(--lh-normal);
           flex: 1;
       }

       .related-card-body .chip {
           align-self: flex-start;
           margin-top: var(--sp-2);
           transition: background 300ms, color 300ms, border-color 300ms;
       }

       .related-card:hover .chip {
           background: var(--accent);
           color: #fff;
           border-color: var(--accent);
       }

       .tag-cloud {
           display: flex;
           flex-wrap: wrap;
           gap: var(--sp-2);
           margin: var(--sp-3) 0;
       }

       .tag-cloud .chip {
           font-size: var(--fs-12);
           padding: 6px 14px;
           text-decoration: none;
       }

       .tag-cloud .chip:hover {
           background: var(--accent);
           color: #fff;
           border-color: var(--accent);
       }

       /* ── Inspirations ── */
       .inspiration-grid {
           display: grid;
           gap: var(--sp-4);
           margin: var(--sp-4) 0;
       }

       @media (min-width: 600px) {
           .inspiration-grid {
               grid-template-columns: 1fr 1fr;
           }
       }

       .inspiration-card {
           background: var(--bg-elev);
           border-radius: var(--r-md);
           padding: var(--sp-4) var(--sp-5);
           border: 1px solid var(--line);
           transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out), border-color 350ms var(--ease-out);
           display: flex;
           flex-direction: column;
           gap: var(--sp-2);
       }

       .inspiration-card:hover {
           transform: translateY(-3px);
           box-shadow: var(--sh-2);
           border-color: var(--accent);
       }

       .inspiration-card .insp-header,
       #future-trends .futu-heading {
           display: flex;
           align-items: center;
           gap: var(--sp-3);
       }

       .inspiration-card .insp-header svg,
       #future-trends .futu-heading svg {
           width: 24px;
           height: 24px;
           flex-shrink: 0;
           color: var(--accent);
       }

       .inspiration-card .insp-header h4,
       #future-trends .futu-heading h3 {
           font-family: var(--ff-display);
           font-size: var(--fs-18);
           font-weight: 500;
       }

       .inspiration-card p {
           font-size: var(--fs-14);
           color: var(--fg-soft);
           line-height: var(--lh-normal);
           margin: 0;
       }

       .inspiration-card a {
           color: var(--accent);
           font-weight: 500;
           font-size: var(--fs-14);
           display: inline-flex;
           align-items: center;
           gap: var(--sp-2);
           transition: gap 300ms var(--ease-out);
           width: max-content;
       }

       .inspiration-card a:hover {
           gap: var(--sp-3);
       }

       .inspiration-card a svg {
           width: 14px;
           height: 14px;
           transition: transform 300ms var(--ease-out);
       }

       .inspiration-card a:hover svg {
           transform: translateX(3px) rotate(-3deg);
       }

       /* ─── FUTURE TRENDS — Bento Card Redesign ─── */

       #future-trends {
           margin-top: var(--sp-6);
           padding-top: var(--sp-4);
       }

       #future-trends h2 {
           font-family: var(--ff-display);
           font-size: var(--fs-display-s);
           font-weight: 500;
           line-height: var(--lh-tight);
           margin-bottom: var(--sp-3);
           scroll-margin-top: 80px;
       }

       #future-trends>p {
           color: var(--fg-soft);
           font-size: var(--fs-18);
           max-width: 680px;
           line-height: var(--lh-loose);
           margin-bottom: var(--sp-7);
       }

       /* ── Trends Grid ── */
       .trends-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: var(--sp-5);
           margin: var(--sp-5) 0 var(--sp-6);
       }

       @media (max-width: 760px) {
           .trends-grid {
               grid-template-columns: 1fr;
               gap: var(--sp-4);
           }
       }

       /* ── Individual Trend Card ── */
       .trend-card {
           background: var(--bg-elev);
           border-radius: var(--r-lg);
           padding: var(--sp-5) var(--sp-6);
           border: 1px solid var(--line);
           transition: transform 400ms var(--ease-out),
               box-shadow 400ms var(--ease-out),
               border-color 400ms var(--ease-out);
           position: relative;
           overflow: hidden;
           display: flex;
           flex-direction: column;
           gap: var(--sp-3);
       }

       .trend-card::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 3px;
           background: linear-gradient(90deg, var(--accent), var(--c-accent-hi));
           opacity: 0;
           transition: opacity 400ms var(--ease-out);
       }

       .trend-card:hover {
           transform: translateY(-4px);
           box-shadow: var(--sh-3);
           border-color: var(--line-strong);
       }

       .trend-card:hover::before {
           opacity: 1;
       }

       /* ── Trend Number Badge ── */
       .trend-number {
           font-family: var(--ff-display);
           font-size: var(--fs-12);
           font-weight: 500;
           color: var(--fg-mute);
           letter-spacing: var(--tracking-wide);
           text-transform: uppercase;
           display: inline-flex;
           align-items: center;
           gap: var(--sp-2);
           padding: 3px 12px 3px 3px;
           border-radius: var(--r-pill);
           background: var(--bg-sunk);
           width: max-content;
           border: 1px solid var(--line);
           transition: background 300ms, border-color 300ms, color 300ms;
       }

       .trend-number .num {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 22px;
           height: 22px;
           border-radius: 50%;
           background: var(--accent);
           color: #fff;
           font-size: var(--fs-11);
           font-weight: 600;
           font-family: var(--ff-sans);
           flex-shrink: 0;
           transition: background 300ms, transform 300ms;
       }

       .trend-card:hover .trend-number .num {
           transform: scale(1.1);
           background: var(--c-accent-hi);
       }

       .trend-number .label {
           font-size: var(--fs-10);
           letter-spacing: var(--tracking-wide);
           text-transform: uppercase;
           color: var(--fg-mute);
           font-weight: 500;
       }

       /* ── Trend Icon ── */
       .trend-icon-wrap {
           display: flex;
           align-items: center;
           justify-content: center;
           width: 48px;
           height: 48px;
           border-radius: var(--r-md);
           background: color-mix(in srgb, var(--accent) 8%, transparent);
           color: var(--accent);
           flex-shrink: 0;
           transition: background 400ms var(--ease-out),
               transform 400ms var(--ease-out),
               color 400ms var(--ease-out);
       }

       .trend-card:hover .trend-icon-wrap {
           background: color-mix(in srgb, var(--accent) 18%, transparent);
           transform: scale(1.04);
       }

       .trend-icon-wrap svg {
           width: 24px;
           height: 24px;
           stroke-width: 2;
       }

       /* ── Trend Header (icon + title) ── */
       .trend-header {
           display: flex;
           align-items: center;
           gap: var(--sp-4);
           margin-top: var(--sp-1);
       }

       .trend-header h3 {
           font-family: var(--ff-display);
           font-size: var(--fs-20);
           font-weight: 500;
           line-height: var(--lh-snug);
           color: var(--fg);
           margin: 0;
           letter-spacing: -0.2px;
       }

       /* ── Trend Description ── */
       .trend-card p {
           font-size: var(--fs-15);
           line-height: var(--lh-normal);
           color: var(--fg-soft);
           margin: 0;
           padding-left: calc(48px + var(--sp-4));
       }

       /* ── Trend Tags / Keywords ── */
       .trend-tags {
           display: flex;
           flex-wrap: wrap;
           gap: var(--sp-2);
           margin-top: var(--sp-2);
           padding-left: calc(48px + var(--sp-4));
       }

       .trend-tag {
           font-size: var(--fs-11);
           font-weight: 500;
           padding: 3px 12px;
           border-radius: var(--r-pill);
           background: var(--bg-sunk);
           border: 1px solid var(--line);
           color: var(--fg-mute);
           letter-spacing: 0.3px;
           transition: background 300ms, color 300ms, border-color 300ms;
       }

       .trend-card:hover .trend-tag {
           background: color-mix(in srgb, var(--accent) 6%, var(--bg-sunk));
           border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
           color: var(--fg);
       }

       /* ── Decorative Glow (on hover) ── */
       .trend-card .glow {
           position: absolute;
           top: -60px;
           right: -60px;
           width: 160px;
           height: 160px;
           border-radius: 50%;
           background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
           pointer-events: none;
           opacity: 0;
           transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
           transform: scale(0.8);
       }

       .trend-card:hover .glow {
           opacity: 1;
           transform: scale(1);
       }

       /* ── Responsive tweaks ── */
       @media (max-width: 600px) {
           .trend-card {
               padding: var(--sp-4) var(--sp-4);
           }

           .trend-header h3 {
               font-size: var(--fs-18);
           }

           .trend-card p {
               font-size: var(--fs-14);
               padding-left: 0;
               margin-top: var(--sp-2);
           }

           .trend-tags {
               padding-left: 0;
           }

           .trend-icon-wrap {
               width: 40px;
               height: 40px;
           }

           .trend-icon-wrap svg {
               width: 20px;
               height: 20px;
           }
       }

       @media (max-width: 400px) {
           .trend-card {
               padding: var(--sp-3) var(--sp-4);
           }

           .trend-header {
               flex-wrap: wrap;
               gap: var(--sp-2);
           }

           .trend-header h3 {
               font-size: var(--fs-16);
           }
       }

       /* ─── Stat-grid inside future-trends ─── */
       #future-trends .stat-grid {
           margin-top: var(--sp-4);
           background: var(--bg-elev);
           border: 1px solid var(--line);
           border-radius: var(--r-md);
           padding: var(--sp-5);
       }

       #future-trends .stat-grid .stat-item {
           background: var(--bg);
           padding: var(--sp-4);
           border-radius: var(--r-sm);
           border: 1px solid var(--line);
           transition: transform 300ms var(--ease-out), border-color 300ms var(--ease-out);
       }

       #future-trends .stat-grid .stat-item:hover {
           transform: translateY(-2px);
           border-color: var(--accent);
       }

       #future-trends .stat-grid .stat-number {
           font-family: var(--ff-display);
           font-size: var(--fs-display-s);
           font-weight: 700;
           color: var(--accent);
           line-height: 1;
           display: block;
       }

       #future-trends .stat-grid .stat-label {
           font-size: var(--fs-14);
           color: var(--fg-soft);
           line-height: var(--lh-normal);
           display: block;
           margin-top: var(--sp-1);
       }

       /* ─── Responsive tweaks for stat-grid ─── */
       @media (max-width: 600px) {
           #future-trends .stat-grid {
               grid-template-columns: 1fr;
               padding: var(--sp-3);
           }

           #future-trends .stat-grid .stat-item {
               padding: var(--sp-3);
           }

           #future-trends .stat-grid .stat-number {
               font-size: var(--fs-32);
           }
       }

       @media (max-width: 600px) {
           .inspiration-card {
               padding: var(--sp-3) var(--sp-4);
           }

           .inspiration-card .insp-header h4 {
               font-size: var(--fs-16);
           }

           .inspiration-card p {
               font-size: var(--fs-13);
           }
       }

       @media (max-width: 900px) {
           .example-overlay h3 {
               font-size: var(--fs-16);
           }

           .example-overlay p {
               font-size: var(--fs-12);
           }
       }

       @media (max-width: 600px) {
           .article-hero h1 {
               font-size: var(--fs-display-s) !important;
           }

           .article-excerpt {
               font-size: var(--fs-18);
           }

           .article-prose h2 {
               font-size: var(--fs-32);
           }

           .article-prose blockquote p,
           .pull-quote blockquote p {
               font-size: var(--fs-20);
           }

           .article-cta {
               padding: var(--sp-5) var(--sp-4);
           }

           .toc {
               padding: var(--sp-4);
           }

           .stat-grid {
               grid-template-columns: 1fr;
               padding: var(--sp-4);
           }

           .stat-number {
               font-size: var(--fs-32);
           }

           .code-pre-wrap.is-open {
               padding: var(--sp-3);
           }

           .code-pre {
               font-size: var(--fs-12);
           }

           .code-header {
               padding: var(--sp-2) var(--sp-3);
               font-size: var(--fs-11);
           }
       }

       @media (max-width: 400px) {
           .article-meta {
               font-size: var(--fs-12);
               gap: var(--sp-2);
           }

           .article-prose blockquote,
           .pull-quote {
               padding: var(--sp-4);
           }

           .insight-box {
               padding: var(--sp-3) var(--sp-4);
           }

           .insight-box p {
               font-size: var(--fs-14);
           }
       }