:root {
     --clay: #f0f5fe;
     --warm-white: #fffefe;
     --ink: #0d2d6b;
     --ink-soft: #1a4fa0;
     --oak: #2563c8;
     --oak-light: #f0f5fe;
     --steel: #4A5568;
     --accent: #1a4fa0;
     --accent-soft: #E8886C;
     --border: #D4C8BA;

     --f-display: 'Syne', sans-serif;
     --f-body: 'Syne', sans-serif;

     --radius: 4px;
     --section-pad: 88px 0;
 }

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


 /* ── HERO ──────────────────────────────── */
 .hero {
     background: var(--ink);
     color: var(--warm-white);
     padding: 100px 5% 80px;
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         linear-gradient(rgba(8, 33, 61, 0.171), rgba(26, 79, 160, 0.178)),
         url(/assete/images/page-banner/furniture\ banner.webp);
     background-size: cover;
     background-position: center;
 }

 .hero-inner {
     max-width: 1280px;
     position: relative;
     z-index: 1;
     margin: auto;
 }

 .hero-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--f-body);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--oak-light);
     margin-bottom: 28px;
 }

 .hero-label::before {
     content: '';
     display: block;
     width: 24px;
     height: 1px;
     background: var(--oak-light);
 }

 .hero h1 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     line-height: 1.05;
     max-width: 700px;
 }

 .hero h1 em {
     font-style: italic;
     color: var(--oak-light);
 }

 .hero-sub {
     margin-top: 28px;
     font-size: 1.05rem;
     color: rgb(247, 244, 240);
     max-width: 560px;
     font-weight: 300;
 }

 .hero-cta {
     display: inline-block;
     margin-top: 44px;
     padding: 14px 36px;
     background: var(--accent);
     color: #fff;
     font-weight: 600;
     font-size: 0.9rem;
     letter-spacing: 0.04em;
     text-decoration: none;
     border-radius: var(--radius);
     transition: background 0.2s, transform 0.2s;
 }

 .hero-cta:hover {
     background: #325ff3;
     transform: translateY(-2px);
 }

 /* ── OVERVIEW ──────────────────────────── */
 .overview {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0;
     max-width: 1160px;
     margin: 64px auto;
     padding: 0 5%;
 }

 .overview-text {
     padding-right: 60px;
 }

 .overview-text h2 {
     font-family: var(--f-display);
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 20px;
 }

 .overview-text p {
     color: var(--ink-soft);
     font-size: 0.97rem;
     margin-bottom: 14px;
 }

 .overview-stat-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1px;
     background: var(--border);
     border: 1px solid var(--border);
     border-radius: 6px;
     overflow: hidden;
     align-self: start;
 }

 .stat-card {
     background: var(--warm-white);
     padding: 32px 24px;
     transition: background 0.2s;
 }

 .product-img {
     width: 100%;
     height: 100px;
     /* adjust */
     overflow: hidden;
     border-radius: 10px;
     margin-bottom: 12px;
 }

 .product-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .stat-card:hover {
     background: var(--clay);
 }

 .stat-num {
     font-family: var(--f-display);
     font-size: 2.4rem;
     font-weight: 900;
     color: var(--oak);
     line-height: 1;
 }

 .stat-label {
     font-size: 0.82rem;
     color: var(--ink-soft);
     margin-top: 6px;
     font-weight: 500;
 }

 /* ── FEATURES ──────────────────────────── */
 .features {
     background: var(--ink);
     color: var(--warm-white);
     padding: var(--section-pad);
     padding-left: 5%;
     padding-right: 5%;
 }

 .section-header {
     text-align: center;
     max-width: 600px;
     margin: 0 auto 56px;
 }

 .section-header .eyebrow {
     font-size: 10.5px;
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--oak-light);
     margin-bottom: 14px;
 }

 .section-header h2 {
     font-family: var(--f-display);
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     line-height: 1.25;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     max-width: 1100px;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.08);
 }

 .feat-card {
     background: var(--ink);
     padding: 36px 28px;
     position: relative;
     transition: background 0.25s;
 }

 .feat-card:hover {
     background: #2a2720;
 }

 .feat-icon {
     font-size: 2rem;
     margin-bottom: 18px;
     display: block;
 }

 .feat-card h3 {
     font-family: var(--f-display);
     font-size: 1.05rem;
     font-weight: 600;
     margin-bottom: 10px;
     color: var(--oak-light);
 }

 .feat-card p {
     font-size: 0.88rem;
     color: rgba(247, 244, 240, 0.65);
     line-height: 1.65;
 }

 /* ── PRODUCTS ──────────────────────────── */
 .products {
     padding: var(--section-pad);
     padding-left: 5%;
     padding-right: 5%;
     background: var(--warm-white);
 }

 .products .section-header .eyebrow {
     color: var(--oak);
 }

 .products .section-header h2 {
     color: var(--ink);
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 16px;
     max-width: 1100px;
     margin: 0 auto;
 }

 .product-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 10px;
     text-align: center;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
     cursor: default;
 }

 .product-card:hover {
     border-color: var(--oak);
     box-shadow: 0 8px 28px rgba(139, 111, 71, 0.12);
     transform: translateY(-3px);
 }

 .product-icon {
     font-size: 2rem;
     margin-bottom: 14px;
     display: block;
 }

 .product-card h3 {
     font-family: var(--f-display);
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--ink);
     line-height: 1.35;
 }

 /* ── INDUSTRIES ──────────────────────────── */
 .industries {
     background: var(--clay);
     padding: var(--section-pad);
     padding-left: 5%;
     padding-right: 5%;
 }

 .industries .section-header .eyebrow {
     color: var(--oak);
 }

 .industries .section-header h2 {
     color: var(--ink);
 }

 .industries-list {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     justify-content: center;
     max-width: 800px;
     margin: 0 auto;
 }

 .industry-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 22px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 40px;
     font-size: 0.88rem;
     font-weight: 500;
     color: var(--ink-soft);
     transition: background 0.2s, border-color 0.2s;
 }

 .industry-tag:hover {
     background: var(--ink);
     color: var(--warm-white);
     border-color: var(--ink);
 }

 /* ── INTEGRATIONS ──────────────────────────── */
 .integrations {
     background: var(--warm-white);
     padding: var(--section-pad);
     padding-left: 5%;
     padding-right: 5%;
 }

 .integrations .section-header .eyebrow {
     color: var(--oak);
 }

 .integrations-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     max-width: 960px;
     margin: 0 auto;
 }

 .int-card {
     border-left: 3px solid var(--oak);
     padding: 22px 24px;
     background: var(--clay);
     border-radius: 0 6px 6px 0;
 }

 .int-card h3 {
     font-family: var(--f-display);
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 8px;
 }

 .int-card p {
     font-size: 0.86rem;
     color: var(--ink-soft);
 }

 /* ── FAQ ──────────────────────────────── */
 .faq {
     background: var(--ink);
     color: var(--warm-white);
     padding: var(--section-pad);
     padding-left: 5%;
     padding-right: 5%;
 }

 .faq .section-header .eyebrow {
     color: var(--oak-light);
 }

 .faq-list {
     max-width: 760px;
     margin: 0 auto;
 }

 .faq-item {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .faq-question {
     width: 100%;
     background: none;
     border: none;
     color: var(--warm-white);
     font-family: var(--f-display);
     font-size: 1rem;
     font-weight: 600;
     text-align: left;
     padding: 22px 0;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
 }

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

 .faq-chevron {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     transition: transform 0.3s;
 }

 .faq-item.open .faq-chevron {
     transform: rotate(180deg);
 }

 .faq-answer {
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.35s ease;
 }

 .faq-item.open .faq-answer {
     max-height: 200px;
 }

 .faq-answer p {
     font-size: 0.9rem;
     color: rgba(247, 244, 240, 0.65);
     padding-bottom: 22px;
     line-height: 1.7;
 }

 /* ── CTA BANNER ──────────────────────────── */
 .cta-banner {
     background: var(--accent);
     color: #fff;
     padding: 64px 5%;
     text-align: center;
 }

 .cta-banner h2 {
     font-family: var(--f-display);
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     margin-bottom: 16px;
 }

 .cta-banner p {
     font-size: 1rem;
     opacity: 0.85;
     max-width: 500px;
     margin: 0 auto 36px;
 }

 .cta-btn {
     display: inline-block;
     padding: 14px 40px;
     background: #fff;
     color: var(--accent);
     font-weight: 700;
     font-size: 0.9rem;
     border-radius: var(--radius);
     text-decoration: none;
     transition: opacity 0.2s, transform 0.2s;
 }

 .cta-btn:hover {
     opacity: 0.92;
     transform: translateY(-2px);
 }

 /* ── SCROLL REVEAL ──────────────────────── */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .reveal.visible {
     opacity: 1;
     transform: none;
 }

 /* ── RESPONSIVE ─────────────────────────── */
 @media (max-width: 900px) {
     .overview {
         grid-template-columns: 1fr;
     }

     .overview-text {
         padding-right: 0;
         margin-bottom: 40px;
     }

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

     .products-grid {
         grid-template-columns: repeat(3, 1fr);
     }

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

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

     .products-grid {
         grid-template-columns: repeat(2, 1fr);
     }

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