/* ==================== CSS VARIABLES ==================== */
      :root {
        --color-primary: #7a5233;
        --color-secondary: #b68554;
        --color-accent: #e9d2b1;
        --color-bg: #fbf7f0;
        --color-text: #6a4934;
        --color-text-light: #876955;
        --color-white: #ffffff;

        --font-heading: "Noto Serif", serif;
        --font-body: "Noto Sans", sans-serif;
        --font-accent: "Noto Serif", serif;

        --spacing-xs: 8px;
        --spacing-sm: 16px;
        --spacing-md: 24px;
        --spacing-lg: 48px;
        --spacing-xl: 80px;
        --spacing-2xl: 120px;

        --max-width: 1200px;
        --transition: 300ms ease;
        --shadow-sm: 0 2px 8px rgba(122, 82, 51, 0.08);
        --shadow-md: 0 4px 20px rgba(122, 82, 51, 0.12);
        --shadow-lg: 0 8px 40px rgba(122, 82, 51, 0.16);
      }

      /* ==================== RESET & BASE ==================== */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-text);
        background-color: var(--color-bg);
        overflow-x: hidden;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }

      ul {
        list-style: none;
      }

      /* ==================== TYPOGRAPHY ==================== */
      h1,
      h2,
      h3,
      h4 {
        font-family: var(--font-heading);
        font-weight: 500;
        line-height: 1.2;
      }

      h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
      }
      h2 {
        font-size: clamp(2rem, 4vw, 3rem);
      }
      h3 {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
      }

      .eyebrow {
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--color-secondary);
        margin-bottom: var(--spacing-sm);
      }

      /* ==================== UTILITIES ==================== */
      .container {
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--spacing-md);
      }

      .section {
        padding: var(--spacing-lg) 0;
      }

      @media (min-width: 768px) {
        .section {
          padding: var(--spacing-xl) 0;
        }
      }

      /* Animation classes */
      .fade-up {
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.6s ease-out,
          transform 0.6s ease-out;
      }

      .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .stagger-1 {
        transition-delay: 0.1s;
      }
      .stagger-2 {
        transition-delay: 0.2s;
      }
      .stagger-3 {
        transition-delay: 0.3s;
      }
      .stagger-4 {
        transition-delay: 0.4s;
      }

      /* ==================== BUTTONS ==================== */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: 16px 36px;
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: 1px;
        border-radius: 4px;
        transition: all var(--transition);
      }

      .btn-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        stroke: currentColor;
      }

      .btn-primary {
        background: var(--color-primary);
        color: var(--color-white);
        position: relative;
        overflow: hidden;
      }

      .btn-primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
      }

      .btn-primary:hover::before {
        left: 100%;
      }

      .btn-primary:hover {
        background: var(--color-secondary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }

      .btn-secondary {
        background: transparent;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
      }

      .btn-secondary:hover {
        background: var(--color-primary);
        color: var(--color-white);
      }

      /* ==================== HEADER ==================== */
      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: var(--spacing-md) 0;
        transition: all var(--transition);
      }

      .home-page .header:not(.scrolled) {
        background: rgba(251, 247, 240, 0.88);
        backdrop-filter: blur(6px);
      }

      .home-page .header:not(.scrolled) .nav-link {
        color: var(--color-primary);
      }

      .home-page .header:not(.scrolled) .logo-icon,
      .home-page .header:not(.scrolled) .logo-wordmark {
        filter: brightness(0) saturate(100%) invert(27%) sepia(18%) saturate(1072%) hue-rotate(342deg)
          brightness(93%) contrast(88%);
      }

      .home-page .header:not(.scrolled) .menu-toggle span {
        background: var(--color-primary);
      }

      .home-page .header:not(.scrolled) .header-cta {
        background: var(--color-primary);
        color: var(--color-white);
        border-color: transparent;
      }

      .header.scrolled {
        background: rgba(250, 247, 242, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow-sm);
        padding: var(--spacing-sm) 0;
      }

      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .logo {
        font-family: var(--font-heading);
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--color-white);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
      }

      .logo-icon {
        width: 52px;
        height: 52px;
        object-fit: contain;
        flex-shrink: 0;
        filter: brightness(0) invert(1);
      }

      .logo-wordmark {
        width: 120px;
        height: auto;
        object-fit: contain;
        flex-shrink: 0;
        filter: brightness(0) invert(1);
      }

      .nav-desktop {
        display: none;
      }

      @media (min-width: 992px) {
        .nav-desktop {
          display: flex;
          align-items: center;
          gap: var(--spacing-lg);
        }
      }

      .nav-link {
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--color-white);
        position: relative;
        padding: 4px 0;
      }

      .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--color-accent);
        transition: width var(--transition);
      }

      .nav-link:hover::after,
      .nav-link.active::after {
        width: 100%;
      }

      .nav-dropdown {
        position: relative;
      }

      .nav-dropdown-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .nav-dropdown-chevron {
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform var(--transition);
      }

      .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 16px);
        left: 50%;
        z-index: 10;
        min-width: 250px;
        padding: 8px;
        background: rgba(251, 247, 240, 0.98);
        border: 1px solid rgba(122, 82, 51, 0.12);
        border-radius: 8px;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: all var(--transition);
      }

      .nav-dropdown-menu::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 18px;
      }

      .nav-dropdown-menu a {
        display: block;
        padding: 10px 12px;
        color: var(--color-primary);
        border-radius: 6px;
        font-size: 0.875rem;
        white-space: nowrap;
        transition: background var(--transition);
      }

      .nav-dropdown-menu a:hover,
      .nav-dropdown-menu a:focus-visible {
        background: var(--color-accent);
      }

      .nav-dropdown:hover .nav-dropdown-menu,
      .nav-dropdown:focus-within .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
      }

      .nav-dropdown:hover .nav-dropdown-chevron,
      .nav-dropdown:focus-within .nav-dropdown-chevron {
        transform: rotate(225deg) translate(-1px, -1px);
      }

      .header-cta {
        display: none;
      }

      @media (min-width: 992px) {
        .header-cta {
          display: inline-flex;
        }
      }

      @media (max-width: 991px) {
        .logo {
          color: var(--color-white);
        }

        .logo-icon {
          filter: brightness(0) invert(1);
        }

        .logo-wordmark {
          filter: brightness(0) invert(1);
        }
      }

      /* Mobile menu toggle */
      .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
      }

      @media (min-width: 992px) {
        .menu-toggle {
          display: none;
        }
      }

      .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-white);
        transition: all var(--transition);
      }

      .header .header-cta {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-white);
        border: 1px solid rgba(255, 255, 255, 0.22);
      }

      .header .header-cta:hover {
        background: rgba(255, 255, 255, 0.22);
        color: var(--color-white);
      }

      .header.scrolled .logo,
      .header.scrolled .nav-link {
        color: var(--color-primary);
      }

      .header.scrolled .logo-icon {
        filter: brightness(0) saturate(100%) invert(27%) sepia(18%) saturate(1072%) hue-rotate(342deg)
          brightness(93%) contrast(88%);
      }

      .header.scrolled .logo-wordmark {
        filter: brightness(0) saturate(100%) invert(27%) sepia(18%) saturate(1072%) hue-rotate(342deg)
          brightness(93%) contrast(88%);
      }

      .header.scrolled .menu-toggle span {
        background: var(--color-primary);
      }

      .header.scrolled .header-cta {
        background: var(--color-primary);
        color: var(--color-white);
        border-color: transparent;
      }

      .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      .menu-toggle.active span:nth-child(2) {
        opacity: 0;
      }

      .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }

      /* Mobile nav overlay */
      .nav-mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-lg);
        padding: 96px 24px 32px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
        z-index: 999;
      }

      .nav-mobile.active {
        opacity: 1;
        visibility: visible;
      }

      .nav-mobile a {
        font-family: var(--font-heading);
        font-size: 2rem;
        color: var(--color-primary);
      }

      .nav-mobile-product-group {
        display: grid;
        gap: 8px;
        width: 100%;
        text-align: center;
      }

      .nav-mobile-product-links {
        display: grid;
        gap: 6px;
      }

      .nav-mobile .nav-mobile-product-link {
        font-family: var(--font-body);
        font-size: 0.9375rem;
        color: var(--color-text-light);
      }

      .nav-mobile-actions {
        display: grid;
        gap: 18px;
        width: min(280px, calc(100% - 48px));
        margin-bottom: var(--spacing-sm);
      }

      .nav-mobile .nav-mobile-btn {
        width: 100%;
        min-height: 48px;
        padding: 13px 18px;
        border-radius: 4px;
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .nav-mobile .nav-mobile-price {
        background: var(--color-primary);
        color: var(--color-white);
      }

      .nav-mobile .nav-mobile-calc {
        background: transparent;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
      }

      .nav-mobile .nav-mobile-phone {
        background: transparent;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
      }

      /* ==================== ABOUT SECTION ==================== */
      .about {
        background: var(--color-white);
      }

      .about-grid {
        display: grid;
        gap: var(--spacing-xl);
        align-items: center;
      }

      @media (min-width: 992px) {
        .about-grid {
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-2xl);
        }
      }

      .about-image {
        position: relative;
      }

      .about-image img {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: none;
      }

      .about-content h2 {
        margin-bottom: var(--spacing-md);
        color: var(--color-primary);
      }

      .about-content p {
        color: var(--color-text-light);
        margin-bottom: var(--spacing-md);
      }

      .about-values {
        display: grid;
        gap: 14px;
        margin-top: var(--spacing-sm);
      }

      @media (min-width: 640px) {
        .about-values {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 992px) {
        .about-values {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .value-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 8px 0;
      }

      .value-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        stroke: var(--color-secondary);
      }

      .value-text {
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--color-primary);
      }

      /* ==================== PRODUCTS SECTION ==================== */
      .products {
        padding-top: clamp(108px, 9vw, 128px);
        background: var(--color-bg);
      }

      .products .section-header h1 {
        font-size: clamp(2rem, 4vw, 3rem);
        color: var(--color-primary);
        margin-bottom: var(--spacing-sm);
        text-shadow: none;
      }

      .products .section-header p {
        color: var(--color-text-light);
      }

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

      .products-phone {
        position: relative;
        overflow: hidden;
        margin-bottom: var(--spacing-lg);
        border-radius: 8px;
        transition: all var(--transition);
      }

      .products-phone::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
      }

      .products-phone:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }

      .products-phone:hover::before {
        left: 100%;
      }

      .calculator-bridge {
        padding: 28px 0;
        background: #f2e6d8;
        text-align: center;
      }

      .calculator-bridge-button {
        position: relative;
        display: inline-flex;
        min-width: min(340px, 100%);
        flex-direction: column;
        align-items: center;
        gap: 3px;
        overflow: hidden;
        padding: 15px 34px 14px;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
        border-radius: 8px;
        transition: all var(--transition);
      }

      .calculator-bridge-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
      }

      .calculator-bridge-button:hover {
        color: var(--color-white);
        background: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }

      .calculator-bridge-button:hover::before {
        left: 100%;
      }

      .calculator-bridge-title {
        font-family: var(--font-body);
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .calculator-bridge-subtitle {
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: normal;
        text-transform: none;
        opacity: 0.78;
      }

      .section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto var(--spacing-xl);
      }

      .section-header h2 {
        color: var(--color-primary);
        margin-bottom: var(--spacing-sm);
      }

      .section-header p {
        color: var(--color-text-light);
      }

      .products-grid {
        display: grid;
        gap: var(--spacing-lg);
      }

      @media (min-width: 768px) {
        .products-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

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

      .product-card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        transition: all var(--transition);
        cursor: pointer;
      }

      .product-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
      }

      .product-image {
        position: relative;
        aspect-ratio: 16/10;
        overflow: hidden;
      }

      .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
      }

      .product-card:hover .product-image img {
        transform: scale(1.08);
      }

      .product-overlay {
        position: absolute;
        inset: 0;
        background: rgba(61, 43, 31, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity var(--transition);
      }

      .product-card:hover .product-overlay {
        opacity: 1;
      }

      .product-overlay span {
        color: var(--color-white);
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 0.875rem;
        padding: 12px 24px;
        border: 2px solid var(--color-white);
        transition: all var(--transition);
      }

      .product-overlay span:hover {
        background: var(--color-white);
        color: var(--color-primary);
      }

      .product-info {
        padding: var(--spacing-md);
      }

      .product-info h3 {
        color: var(--color-primary);
        margin-bottom: var(--spacing-xs);
      }

      .product-info p {
        font-size: 0.9375rem;
        color: var(--color-text-light);
      }

      /* ==================== PRODUCT PAGES ==================== */
      .product-hero {
        position: relative;
        min-height: min(760px, 88vh);
        display: grid;
        align-items: end;
        padding: 160px 0 96px;
        color: var(--color-white);
        background: linear-gradient(90deg, rgba(42, 28, 18, 0.78), rgba(42, 28, 18, 0.26)), url("../photo/abash-blinds-generated.webp") center / cover;
      }

      .product-hero-copy { max-width: 700px; }
      .product-hero .eyebrow { color: var(--color-accent); }
      .product-hero h1 { margin-bottom: var(--spacing-sm); }
      .product-hero p { max-width: 620px; font-size: clamp(1.05rem, 2vw, 1.25rem); }
      .product-hero .btn { margin-top: var(--spacing-md); }
      .product-page-intro { max-width: 850px; margin: 0 auto; font-size: 1.0625rem; color: var(--color-text-light); }
      .product-page-intro p + p { margin-top: var(--spacing-sm); }
      .abash-material {
        background-color: var(--color-bg);
        background-image: linear-gradient(90deg, rgba(251, 247, 240, 0.98) 0%, rgba(251, 247, 240, 0.94) 46%, rgba(251, 247, 240, 0.78) 100%), url("../photo/abash-blinds-generated.webp");
        background-position: center, center right;
        background-size: cover;
      }
      .lipa-bambuk-material {
        background-color: var(--color-bg);
        background-image: linear-gradient(90deg, rgba(251, 247, 240, 0.98) 0%, rgba(251, 247, 240, 0.94) 46%, rgba(251, 247, 240, 0.78) 100%), url("../photo/lipa-bambuk-hero.webp");
        background-position: center, center right;
        background-size: cover;
      }
      .premium-hero {
        background-image: linear-gradient(90deg, rgba(30, 21, 16, 0.78), rgba(30, 21, 16, 0.18)), url("../photo/premium-hero.webp");
        background-position: center;
      }
      .premium-material {
        background-color: var(--color-bg);
        background-image: linear-gradient(90deg, rgba(251, 247, 240, 0.98) 0%, rgba(251, 247, 240, 0.94) 46%, rgba(251, 247, 240, 0.76) 100%), url("../photo/premium-hero.webp");
        background-position: center, center right;
        background-size: cover;
      }
      .abash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
      .abash-card { padding: var(--spacing-md); background: var(--color-white); border-radius: 12px; box-shadow: var(--shadow-sm); }
      .abash-card svg { width: 52px; height: 52px; margin-bottom: var(--spacing-sm); stroke: var(--color-secondary); transition: transform var(--transition), stroke var(--transition); }
      .abash-card:hover svg { stroke: var(--color-primary); transform: scale(1.08); }
      .abash-card h3 { color: var(--color-primary); margin-bottom: var(--spacing-xs); }
      .abash-card p { color: var(--color-text-light); font-size: 0.9375rem; }
      .abash-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
      .abash-split h2 { color: var(--color-primary); margin-bottom: var(--spacing-sm); }
      .abash-split p { color: var(--color-text-light); }
      .abash-split p + p { margin-top: var(--spacing-sm); }
      .abash-feature-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
      .abash-feature-layout--reverse .abash-feature-image { order: 2; }
      .abash-feature-image { overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-md); }
      .abash-feature-image img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
      .abash-feature-copy h2 { color: var(--color-primary); margin-bottom: var(--spacing-sm); }
      .abash-feature-copy p { color: var(--color-text-light); }
      .abash-list { display: grid; gap: 10px; margin-top: var(--spacing-md); }
      .abash-list li { position: relative; padding-left: 24px; color: var(--color-text-light); }
      .abash-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); }
      .abash-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-md); background: var(--color-white); box-shadow: var(--shadow-sm); }
      .abash-table th, .abash-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-accent); }
      .abash-table th { width: 38%; color: var(--color-primary); font-weight: 600; }
      .abash-cta { text-align: center; background: var(--color-secondary); color: var(--color-white); }
      .abash-cta h2 { color: var(--color-white); margin-bottom: var(--spacing-sm); }
      .abash-cta p { max-width: 720px; margin: 0 auto var(--spacing-md); color: rgba(255,255,255,.8); }
      .abash-cta .btn { background: var(--color-primary); color: var(--color-white); }
      .faq-list { display: grid; gap: var(--spacing-sm); max-width: 900px; margin: var(--spacing-lg) auto 0; }
      .faq-list details { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-accent); border-radius: 8px; background: var(--color-white); }
      .faq-list summary { cursor: pointer; color: var(--color-primary); font-family: var(--font-heading); font-weight: 600; }
      .faq-list p { margin-top: 12px; color: var(--color-text-light); }
      @media (max-width: 767px) { .product-hero { min-height: 620px; padding: 140px 0 64px; } .abash-grid, .abash-split, .abash-feature-layout { grid-template-columns: 1fr; } .abash-feature-layout--reverse .abash-feature-image { order: initial; } .abash-feature-image img { min-height: 260px; } .abash-table th, .abash-table td { padding: 11px; } .abash-material { background-image: linear-gradient(rgba(251, 247, 240, 0.94), rgba(251, 247, 240, 0.94)), url("../photo/abash-blinds-generated.webp"); } .lipa-bambuk-material { background-image: linear-gradient(rgba(251, 247, 240, 0.94), rgba(251, 247, 240, 0.94)), url("../photo/lipa-bambuk-hero.webp"); } .premium-material { background-image: linear-gradient(rgba(251, 247, 240, 0.94), rgba(251, 247, 240, 0.94)), url("../photo/premium-hero.webp"); } }

      .product-card--motorized {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
        width: 100%;
      }

      .product-card--motorized .product-image {
        aspect-ratio: 16 / 10;
      }

      .product-card--motorized .product-info {
        align-self: center;
      }

      .voice-assistants {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: var(--spacing-md);
      }

      .voice-assistant {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 10px 5px 6px;
        border: 1px solid var(--color-accent);
        border-radius: 999px;
        color: var(--color-primary);
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1;
      }

      .voice-assistant-icon {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        color: var(--color-white);
        font-size: 0.75rem;
        font-weight: 700;
      }

      .voice-assistant--alice .voice-assistant-icon {
        background: #7b3ff2;
      }

      .voice-assistant--siri .voice-assistant-icon {
        background: conic-gradient(from 210deg, #f04e98, #8e4bf2, #3aa9fa, #54dbb2, #f0d35c, #f04e98);
      }

      @media (max-width: 640px) {
        .product-card--motorized {
          display: block;
          width: 100%;
        }

        .product-card--motorized .product-image {
          aspect-ratio: 16 / 10;
        }
      }

      /* ==================== FEATURES SECTION ==================== */
      .features {
        background: var(--color-primary);
        color: var(--color-white);
        padding-bottom: clamp(32px, 4vw, 48px);
      }

      .features .section-header h2 {
        color: var(--color-white);
      }

      .features .section-header {
        margin-bottom: 40px;
      }

      .features .section-header p {
        color: rgba(255, 255, 255, 0.7);
      }

      .features .section-header .features-production-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-md);
        color: var(--color-accent);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        line-height: 1.4;
        text-transform: uppercase;
      }

      .features-production-note::before,
      .features-production-note::after {
        content: "";
        width: 44px;
        height: 1px;
        background: currentColor;
        opacity: 0.55;
      }

      .features-grid {
        display: grid;
        gap: var(--spacing-lg);
      }

      @media (min-width: 768px) {
        .features-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 992px) {
        .features-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .feature-item {
        text-align: center;
        padding: var(--spacing-md);
      }

      .feature-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto var(--spacing-md);
        stroke: var(--color-secondary);
        transition: all var(--transition);
      }

      .feature-item:hover .feature-icon {
        stroke: var(--color-accent);
        transform: scale(1.1);
      }

      .feature-stat {
        font-family: var(--font-accent);
        font-size: clamp(2.2rem, 4vw, 2.7rem);
        font-weight: 600;
        color: var(--color-accent);
        line-height: 1;
        margin-bottom: var(--spacing-xs);
      }

      .feature-label {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: var(--spacing-xs);
      }

      .feature-desc {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.7);
      }

      /* ==================== COLLABORATION SECTION ==================== */
      .collaboration {
        background: var(--color-white);
      }

      .collaboration-wrap {
        display: grid;
        gap: var(--spacing-lg);
        align-items: start;
      }

      @media (min-width: 992px) {
        .collaboration-wrap {
          grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
          gap: var(--spacing-xl);
        }
      }

      .collaboration-copy h2 {
        color: var(--color-primary);
        margin-bottom: var(--spacing-md);
      }

      .collaboration-copy p {
        color: var(--color-text-light);
        margin-bottom: var(--spacing-md);
      }

      .collaboration-card {
        background: linear-gradient(180deg, rgba(251, 247, 240, 0.92), rgba(255, 255, 255, 0.98));
        border: 1px solid rgba(122, 82, 51, 0.12);
        border-radius: 16px;
        padding: clamp(24px, 3vw, 36px);
        box-shadow: var(--shadow-sm);
      }

      .collaboration-card h3 {
        color: var(--color-primary);
        margin-bottom: var(--spacing-md);
      }

      .collaboration-list {
        display: grid;
        gap: 14px;
      }

      .collaboration-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: var(--color-text);
      }

      .collaboration-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        stroke: var(--color-secondary);
        margin-top: 2px;
      }

      .collaboration-cta {
        margin-top: var(--spacing-md);
        text-align: left;
      }

      .collaboration-cta .btn {
        border-radius: 8px;
      }

      /* ==================== GALLERY SECTION ==================== */
      .gallery {
        background: var(--color-white);
        padding-top: var(--spacing-md);
      }

      @media (min-width: 768px) {
        .gallery {
          padding-top: var(--spacing-lg);
        }
      }

      .gallery-grid {
        display: grid;
        gap: var(--spacing-sm);
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: 768px) {
        .gallery-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: var(--spacing-md);
        }
      }

      .gallery-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
      }

      .gallery-item:nth-child(1) {
        grid-column: span 2;
      }

      .gallery-item:nth-child(4) {
        grid-column: span 2;
      }

      @media (min-width: 768px) {
        .gallery-item:nth-child(1),
        .gallery-item:nth-child(4) {
          grid-column: span 1;
        }
      }

      .gallery-item img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transition: transform 0.6s ease;
      }

      .gallery-item:hover img {
        transform: scale(1.05);
      }

      .gallery-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(61, 43, 31, 0.5), transparent);
        opacity: 0;
        transition: opacity var(--transition);
      }

      .gallery-item:hover::after {
        opacity: 1;
      }

      /* Lightbox */
      .lightbox {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
      }

      .lightbox.active {
        opacity: 1;
        visibility: visible;
      }

      .lightbox img {
        max-width: 90%;
        max-height: 90vh;
        border-radius: 8px;
        transform: scale(0.9);
        transition: transform 0.4s ease;
      }

      .lightbox.active img {
        transform: scale(1);
      }

      .lightbox-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        font-size: 2rem;
        cursor: pointer;
        transition: transform var(--transition);
      }

      .lightbox-close:hover {
        transform: rotate(90deg);
      }

      /* ==================== TESTIMONIALS SECTION ==================== */
      .testimonials {
        background: var(--color-bg);
      }

      .testimonial-slider {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
      }

      .testimonial-track {
        overflow: hidden;
      }

      .testimonial-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.92);
        color: var(--color-primary);
        box-shadow: var(--shadow-sm);
        z-index: 2;
        transition: all var(--transition);
      }

      .testimonial-arrow:hover {
        background: var(--color-primary);
        color: var(--color-white);
        transform: translateY(-50%) scale(1.05);
      }

      .testimonial-arrow.prev {
        left: -24px;
      }

      .testimonial-arrow.next {
        right: -24px;
      }

      .testimonial-arrow svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
      }

      .testimonial-slides {
        display: flex;
        transition: transform 0.5s ease;
      }

      .testimonial-slide {
        flex: 0 0 100%;
        padding: 0 var(--spacing-md);
        text-align: center;
      }

      .testimonial-quote {
        position: relative;
        font-family: var(--font-heading);
        font-size: clamp(1.25rem, 3vw, 1.75rem);
        font-style: italic;
        color: var(--color-primary);
        margin-bottom: var(--spacing-lg);
        line-height: 1.6;
      }

      .testimonial-quote::before {
        content: '"';
        font-family: var(--font-accent);
        font-size: 6rem;
        color: var(--color-secondary);
        opacity: 0.3;
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1;
      }

      .testimonial-author {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
      }

      .testimonial-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--color-secondary);
      }

      .testimonial-name {
        font-weight: 600;
        color: var(--color-primary);
      }

      .testimonial-location {
        font-size: 0.875rem;
        color: var(--color-text-light);
      }

      .testimonial-nav {
        display: flex;
        justify-content: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-lg);
      }

      .testimonial-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--color-secondary);
        opacity: 0.4;
        cursor: pointer;
        transition: all var(--transition);
      }

      .testimonial-dot.active {
        opacity: 1;
        transform: scale(1.2);
      }

      @media (max-width: 900px) {
        .testimonial-slider {
          padding: 0 56px;
        }

        .testimonial-arrow.prev {
          left: 0;
        }

        .testimonial-arrow.next {
          right: 0;
        }
      }

      @media (max-width: 640px) {
        .footer-legal {
          justify-content: center;
        }

        .testimonial-slider {
          padding: 0 44px;
        }

        .testimonial-arrow {
          width: 40px;
          height: 40px;
        }
      }

      /* ==================== SHUTTERS CTA SECTION ==================== */
      .shutters-cta.section {
        padding: var(--spacing-lg) 0;
      }

      .shutters-cta {
        background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
        color: var(--color-primary);
      }

      .shutters-cta-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: clamp(24px, 4vw, 40px);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: var(--shadow-md);
      }

      .shutters-cta-copy {
        max-width: 680px;
      }

      .shutters-cta h2 {
        color: var(--color-primary);
        margin-bottom: 10px;
      }

      .shutters-cta p {
        color: rgba(61, 43, 31, 0.8);
        margin-bottom: 0;
      }

      .shutters-cta .btn {
        background: var(--color-primary);
        color: var(--color-white);
        flex-shrink: 0;
      }

      .shutters-cta .btn:hover {
        background: var(--color-white);
        color: var(--color-primary);
        transform: translateY(-2px);
      }

      @media (min-width: 900px) {
        .shutters-cta-inner {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
        }
      }

      /* ==================== CONTACT SECTION ==================== */
      .contact {
        background: var(--color-white);
      }

      .contact-grid {
        display: grid;
        gap: var(--spacing-xl);
      }

      @media (min-width: 992px) {
        .contact-grid {
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-2xl);
        }
      }

      .contact-info h2 {
        color: var(--color-primary);
        margin-bottom: var(--spacing-md);
      }

      .contact-info > p {
        color: var(--color-text-light);
        margin-bottom: var(--spacing-lg);
      }

      .contact-details {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
      }

      .contact-item {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
      }

      .contact-icon {
        width: 24px;
        height: 24px;
        stroke: var(--color-secondary);
        flex-shrink: 0;
        margin-top: 2px;
      }

      .contact-item strong {
        display: block;
        color: var(--color-primary);
        margin-bottom: 2px;
      }

      .contact-item span {
        color: var(--color-text-light);
        font-size: 0.9375rem;
      }

      .contact-form {
        background: var(--color-bg);
        padding: var(--spacing-lg);
        border-radius: 12px;
      }

      .contact-placeholder {
        display: grid;
        gap: var(--spacing-md);
      }

      .contact-placeholder-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        padding: clamp(24px, 4vw, 40px);
        background: rgba(255, 248, 240, 0.9);
        border: 1px solid rgba(139, 111, 78, 0.16);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
        display: grid;
        place-items: center;
      }

      .contact-placeholder-mark {
        width: min(100%, 240px);
        height: auto;
        display: block;
      }

      .contact-placeholder-mark-circle {
        fill: rgba(139, 111, 78, 0.92);
        stroke: rgba(139, 111, 78, 0.92);
      }

      .contact-placeholder-mark-logo {
        fill: #fff;
      }

      .contact-placeholder-copy {
        display: grid;
        gap: 10px;
      }

      .contact-placeholder-copy h3 {
        color: var(--color-primary);
      }

      .contact-placeholder-copy p {
        color: var(--color-text-light);
        margin: 0;
      }

      .form-group {
        margin-bottom: var(--spacing-md);
      }

      .form-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-primary);
        margin-bottom: var(--spacing-xs);
      }

      .form-input {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
        font-family: var(--font-body);
        border: 2px solid transparent;
        border-radius: 6px;
        background: var(--color-white);
        color: var(--color-text);
        transition: all var(--transition);
      }

      .form-input:focus {
        outline: none;
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.2);
      }

      .form-input::placeholder {
        color: var(--color-text-light);
        opacity: 0.6;
      }

      .form-input.error {
        border-color: #e74c3c;
      }

      .form-error {
        font-size: 0.8125rem;
        color: #e74c3c;
        margin-top: 4px;
        display: none;
      }

      .form-input.error + .form-error {
        display: block;
      }

      textarea.form-input {
        min-height: 120px;
        resize: vertical;
      }

      .form-submit {
        width: 100%;
        margin-top: var(--spacing-sm);
      }

      .form-success {
        text-align: center;
        padding: var(--spacing-xl);
        display: none;
      }

      .form-success.active {
        display: block;
      }

      .form-success svg {
        width: 64px;
        height: 64px;
        stroke: #27ae60;
        margin-bottom: var(--spacing-md);
      }

      .form-success h3 {
        color: var(--color-primary);
        margin-bottom: var(--spacing-sm);
      }

      .form-success p {
        color: var(--color-text-light);
      }

      /* ==================== CSS EFFECTS SECTION ==================== */
      .css-effects {
        background:
          radial-gradient(circle at top left, rgba(212, 168, 83, 0.14), transparent 36%),
          linear-gradient(180deg, #f7f2ea 0%, #efe5d6 100%);
      }

      .effects-grid {
        display: grid;
        gap: var(--spacing-lg);
      }

      @media (min-width: 960px) {
        .effects-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .effect-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(61, 43, 31, 0.08);
        box-shadow: var(--shadow-md);
      }

      .effect-demo {
        position: relative;
        min-height: 340px;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 229, 211, 0.75)),
          linear-gradient(180deg, #ddd4c8, #f8f4ee);
      }

      .effect-demo::before {
        content: "";
        position: absolute;
        inset: 18px;
        border-radius: 14px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15)),
          url("../photo/palette-1-900.jpg") center/cover;
        box-shadow: inset 0 0 0 1px rgba(61, 43, 31, 0.08);
      }

      .effect-card:nth-child(2) .effect-demo::before {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.12)),
          url("../photo/palette-2-900.jpg") center/cover;
      }

      .effect-card:nth-child(3) .effect-demo::before {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.1)),
          url("../photo/palette-3-900.jpg") center/cover;
      }

      .effect-surface {
        position: relative;
        z-index: 1;
        width: min(100%, 260px);
        aspect-ratio: 4 / 5;
        border-radius: 12px;
      }

      .effect-info {
        padding: 24px 24px 28px;
      }

      .effect-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-secondary);
      }

      .effect-info h3 {
        color: var(--color-primary);
        margin-bottom: 10px;
      }

      .effect-info p {
        color: var(--color-text-light);
        font-size: 0.95rem;
      }

      .horizontal-blinds {
        display: grid;
        gap: 8px;
        align-content: stretch;
        padding: 18px 16px;
        background: rgba(255, 248, 240, 0.28);
        box-shadow:
          inset 0 0 0 1px rgba(61, 43, 31, 0.16),
          0 18px 32px rgba(61, 43, 31, 0.16);
      }

      .horizontal-blinds span {
        display: block;
        height: 16px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f6e7c8 0%, #c3975a 48%, #7a5731 100%);
        transform-origin: center;
        animation: slatTilt 4.5s ease-in-out infinite;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.4) inset,
          0 7px 14px rgba(61, 43, 31, 0.12);
      }

      .horizontal-blinds span:nth-child(2n) {
        animation-delay: -0.45s;
      }

      .horizontal-blinds span:nth-child(3n) {
        animation-delay: -0.9s;
      }

      .vertical-blinds {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
        padding: 16px;
        background: rgba(255, 248, 240, 0.24);
        box-shadow:
          inset 0 0 0 1px rgba(61, 43, 31, 0.16),
          0 18px 32px rgba(61, 43, 31, 0.16);
      }

      .vertical-blinds span {
        display: block;
        height: 100%;
        min-height: 220px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f3e0bb 0%, #bf8f53 52%, #81572d 100%);
        transform-origin: top center;
        animation: stripSwing 5.4s ease-in-out infinite;
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.38) inset,
          0 10px 18px rgba(61, 43, 31, 0.12);
      }

      .vertical-blinds span:nth-child(2) {
        animation-delay: -0.4s;
      }
      .vertical-blinds span:nth-child(3) {
        animation-delay: -0.8s;
      }
      .vertical-blinds span:nth-child(4) {
        animation-delay: -1.2s;
      }
      .vertical-blinds span:nth-child(5) {
        animation-delay: -1.6s;
      }
      .vertical-blinds span:nth-child(6) {
        animation-delay: -2s;
      }
      .vertical-blinds span:nth-child(7) {
        animation-delay: -2.4s;
      }

      .split-shutters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .shutter-panel {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        background: linear-gradient(180deg, #ecd7b1 0%, #c79452 52%, #85592f 100%);
        box-shadow:
          inset 0 0 0 1px rgba(61, 43, 31, 0.16),
          0 18px 32px rgba(61, 43, 31, 0.16);
      }

      .shutter-panel::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 8px;
        background: repeating-linear-gradient(
          180deg,
          rgba(255, 245, 230, 0.94) 0 10px,
          rgba(185, 126, 64, 0.9) 10px 18px
        );
        box-shadow: inset 0 0 0 1px rgba(61, 43, 31, 0.14);
      }

      .shutter-panel.left {
        transform-origin: left center;
        animation: panelOpenLeft 5.5s ease-in-out infinite;
      }

      .shutter-panel.right {
        transform-origin: right center;
        animation: panelOpenRight 5.5s ease-in-out infinite;
      }

      @keyframes slatTilt {
        0%,
        100% {
          transform: perspective(160px) rotateX(0deg) scaleY(1);
        }
        35% {
          transform: perspective(160px) rotateX(58deg) scaleY(0.82);
        }
        65% {
          transform: perspective(160px) rotateX(10deg) scaleY(0.96);
        }
      }

      @keyframes stripSwing {
        0%,
        100% {
          transform: perspective(240px) rotateY(0deg);
        }
        32% {
          transform: perspective(240px) rotateY(58deg);
        }
        58% {
          transform: perspective(240px) rotateY(14deg);
        }
      }

      @keyframes panelOpenLeft {
        0%,
        100% {
          transform: perspective(600px) rotateY(0deg);
        }
        35% {
          transform: perspective(600px) rotateY(-62deg);
        }
        60% {
          transform: perspective(600px) rotateY(-18deg);
        }
      }

      @keyframes panelOpenRight {
        0%,
        100% {
          transform: perspective(600px) rotateY(0deg);
        }
        35% {
          transform: perspective(600px) rotateY(62deg);
        }
        60% {
          transform: perspective(600px) rotateY(18deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .horizontal-blinds span,
        .vertical-blinds span,
        .shutter-panel.left,
        .shutter-panel.right {
          animation: none;
        }
      }

      .effects-grid.effects-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }

      .effect-gallery-card {
        background: rgba(255, 255, 255, 0.78);
      }

      .effect-gallery {
        position: relative;
        aspect-ratio: 16 / 10;
        background: #20160f;
        overflow: hidden;
        cursor: pointer;
      }

      .effect-gallery::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(22, 14, 9, 0.06), rgba(22, 14, 9, 0.28));
        pointer-events: none;
        z-index: 4;
      }

      .effect-gallery-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .effect-gallery-img.current {
        z-index: 1;
      }

      .effect-gallery-img.next {
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        will-change: clip-path, opacity, transform, filter;
      }

      .effect-gallery.animating .effect-gallery-img.next {
        opacity: 1;
      }

      .effect-blinds {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        --blind-fill: rgba(236, 231, 223, 0.96);
        --blind-line: rgba(165, 155, 143, 0.95);
        --blind-shadow: rgba(112, 101, 90, 0.32);
      }

      .effect-blinds::before,
      .effect-blinds::after {
        content: "";
        position: absolute;
        inset: 0;
      }

      .effect-gallery[data-effect="effect-venetian-horizontal"] .effect-blinds {
        background: repeating-linear-gradient(
          180deg,
          var(--blind-fill) 0 16px,
          var(--blind-line) 16px 18px,
          var(--blind-shadow) 18px 20px,
          transparent 20px 24px
        );
        box-shadow: inset 0 0 0 1px rgba(61, 43, 31, 0.08);
      }

      .effect-gallery[data-effect="effect-venetian-horizontal"] .effect-blinds::after {
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 24px);
        mix-blend-mode: screen;
      }

      .effect-gallery[data-effect="effect-venetian-vertical"] .effect-blinds {
        background: repeating-linear-gradient(
          90deg,
          var(--blind-fill) 0 18px,
          var(--blind-line) 18px 20px,
          var(--blind-shadow) 20px 22px,
          transparent 22px 28px
        );
        box-shadow: inset 0 0 0 1px rgba(61, 43, 31, 0.08);
      }

      .effect-gallery[data-effect="effect-venetian-vertical"] .effect-blinds::after {
        background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 28px);
        mix-blend-mode: screen;
      }

      .effect-gallery[data-effect="effect-accordion-bands"] .effect-blinds {
        background: repeating-linear-gradient(
          180deg,
          var(--blind-fill) 0 14px,
          var(--blind-line) 14px 16px,
          var(--blind-shadow) 16px 18px,
          transparent 18px 22px
        );
        box-shadow: inset 0 0 0 1px rgba(61, 43, 31, 0.08);
      }

      .effect-gallery[data-effect="effect-accordion-bands"] .effect-blinds::after {
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 22px);
        mix-blend-mode: screen;
      }

      .effect-gallery[data-effect="effect-venetian-horizontal"].animating .effect-blinds {
        animation: horizontalBlindOverlay 0.75s ease-out forwards;
      }

      .effect-gallery[data-effect="effect-venetian-vertical"].animating .effect-blinds {
        animation: verticalBlindOverlay 0.72s ease-out forwards;
      }

      .effect-gallery[data-effect="effect-accordion-bands"].animating .effect-blinds {
        animation: accordionOverlay 0.82s ease-out forwards;
      }

      .effect-overlay-label {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 5;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(28, 18, 12, 0.72);
        color: rgba(255, 248, 240, 0.92);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
      }

      .effect-gallery-nav {
        display: flex;
        gap: 12px;
        justify-content: center;
        padding: 16px 20px 0;
      }

      .effect-gallery-btn {
        min-width: 110px;
        padding: 10px 18px;
        border-radius: 999px;
        background: var(--color-primary);
        color: var(--color-white);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition:
          transform var(--transition),
          background var(--transition),
          box-shadow var(--transition);
      }

      .effect-gallery-btn:hover {
        background: var(--color-secondary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
      }

      .effect-gallery-btn:disabled {
        opacity: 0.6;
        cursor: progress;
        transform: none;
      }

      .effect-gallery-meta {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 24px 0;
        color: var(--color-text-light);
        font-size: 0.82rem;
      }

      .effect-gallery-meta span:last-child {
        font-variant-numeric: tabular-nums;
      }

      .effect-venetian-horizontal.next {
        animation: venetianHorizontalReveal 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

      .effect-venetian-vertical.next {
        animation: venetianVerticalReveal 0.72s cubic-bezier(0.34, 1.08, 0.64, 1) forwards;
      }

      .effect-accordion-bands.next {
        animation: accordionBandReveal 0.82s cubic-bezier(0.5, 0, 0.3, 1) forwards;
      }

      @keyframes venetianHorizontalReveal {
        0% {
          clip-path: inset(0 0 100% 0);
          opacity: 0.2;
        }
        16% {
          clip-path: inset(0 0 78% 0);
          opacity: 1;
        }
        32% {
          clip-path: inset(0 0 58% 0);
        }
        48% {
          clip-path: inset(0 0 40% 0);
        }
        64% {
          clip-path: inset(0 0 24% 0);
        }
        82% {
          clip-path: inset(0 0 10% 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
          opacity: 1;
        }
      }

      @keyframes venetianVerticalReveal {
        0% {
          clip-path: inset(0 100% 0 0);
          opacity: 0.18;
        }
        18% {
          clip-path: inset(0 82% 0 0);
          opacity: 1;
        }
        36% {
          clip-path: inset(0 60% 0 0);
        }
        54% {
          clip-path: inset(0 38% 0 0);
        }
        72% {
          clip-path: inset(0 18% 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
          opacity: 1;
        }
      }

      @keyframes accordionBandReveal {
        0% {
          clip-path: inset(0 0 100% 0);
          opacity: 0.18;
          transform: scaleY(1.03);
        }
        18% {
          clip-path: inset(0 0 82% 0);
          opacity: 1;
        }
        36% {
          clip-path: inset(0 0 58% 0);
        }
        56% {
          clip-path: inset(0 0 36% 0);
        }
        78% {
          clip-path: inset(0 0 14% 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
          opacity: 1;
          transform: scaleY(1);
        }
      }

      @keyframes horizontalBlindOverlay {
        0% {
          opacity: 0;
          clip-path: inset(0 0 100% 0);
          transform: perspective(500px) rotateX(68deg);
        }
        18% {
          opacity: 1;
          clip-path: inset(0 0 76% 0);
        }
        56% {
          opacity: 1;
          clip-path: inset(0 0 28% 0);
          transform: perspective(500px) rotateX(24deg);
        }
        100% {
          opacity: 0;
          clip-path: inset(0 0 0 0);
          transform: perspective(500px) rotateX(0deg);
        }
      }

      @keyframes verticalBlindOverlay {
        0% {
          opacity: 0;
          clip-path: inset(0 100% 0 0);
          transform: perspective(500px) rotateY(68deg);
        }
        18% {
          opacity: 1;
          clip-path: inset(0 78% 0 0);
        }
        56% {
          opacity: 1;
          clip-path: inset(0 26% 0 0);
          transform: perspective(500px) rotateY(22deg);
        }
        100% {
          opacity: 0;
          clip-path: inset(0 0 0 0);
          transform: perspective(500px) rotateY(0deg);
        }
      }

      @keyframes accordionOverlay {
        0% {
          opacity: 0;
          clip-path: inset(0 0 100% 0);
          transform: perspective(500px) rotateX(78deg);
        }
        24% {
          opacity: 1;
          clip-path: inset(0 0 76% 0);
        }
        54% {
          opacity: 1;
          clip-path: inset(0 0 34% 0);
          transform: perspective(500px) rotateX(28deg);
        }
        100% {
          opacity: 0;
          clip-path: inset(0 0 0 0);
          transform: perspective(500px) rotateX(0deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .effect-venetian-horizontal.next,
        .effect-venetian-vertical.next,
        .effect-accordion-bands.next {
          animation: none;
          clip-path: inset(0 0 0 0);
          opacity: 1;
          transform: none;
          filter: none;
        }

        .effect-blinds,
        .effect-blinds::before,
        .effect-blinds::after {
          animation: none !important;
          opacity: 0 !important;
          transform: none !important;
          clip-path: none !important;
        }
      }

      /* ==================== STYLE COMPARE SECTION ==================== */
      .style-compare {
        background:
          radial-gradient(circle at top right, rgba(201, 166, 107, 0.16), transparent 30%),
          linear-gradient(180deg, #f6f1e8 0%, #fffdf9 100%);
      }

      .compare-grid {
        display: grid;
        gap: var(--spacing-lg);
      }

      @media (min-width: 960px) {
        .compare-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 1280px) {
        .compare-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .compare-card {
        padding: clamp(22px, 3vw, 32px);
        border-radius: 22px;
        border: 1px solid rgba(61, 43, 31, 0.08);
        background: rgba(255, 255, 255, 0.78);
        box-shadow: var(--shadow-md);
      }

      .compare-card-header {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: baseline;
        margin-bottom: var(--spacing-md);
      }

      .compare-card-header h3 {
        color: var(--color-primary);
      }

      .compare-chip {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        background: rgba(61, 43, 31, 0.08);
        color: var(--color-primary);
      }

      .compare-intro {
        color: var(--color-text-light);
        margin-bottom: var(--spacing-md);
      }

      .swatch-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: var(--spacing-lg);
      }

      .swatch {
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(61, 43, 31, 0.08);
        background: var(--color-white);
      }

      .swatch-color {
        height: 76px;
      }

      .swatch-meta {
        padding: 12px 14px;
      }

      .swatch-label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 4px;
      }

      .swatch-hex {
        font-size: 0.78rem;
        color: var(--color-text-light);
        letter-spacing: 0.04em;
      }

      .compare-preview {
        padding: 18px;
        border-radius: 18px;
        border: 1px solid rgba(61, 43, 31, 0.08);
        background: #fff;
      }

      .preview-surface {
        padding: 22px;
        border-radius: 16px;
        margin-bottom: 16px;
      }

      .preview-surface h4 {
        margin-bottom: 10px;
      }

      .preview-surface p {
        margin-bottom: 16px;
        font-size: 0.94rem;
      }

      .preview-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .preview-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 11px 16px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .compare-notes {
        margin-top: 14px;
        color: var(--color-text-light);
        font-size: 0.84rem;
        line-height: 1.6;
      }

      .compare-card.ours .preview-surface {
        background: linear-gradient(135deg, rgba(201, 166, 107, 0.16), rgba(250, 247, 242, 0.92));
      }

      .compare-card.ours .preview-surface h4,
      .compare-card.ours .preview-surface p {
        color: var(--color-primary);
      }

      .compare-card.ours .preview-btn.primary {
        background: var(--color-primary);
        color: var(--color-white);
      }

      .compare-card.ours .preview-btn.secondary {
        background: transparent;
        color: var(--color-primary);
        border: 1px solid rgba(61, 43, 31, 0.2);
      }

      .compare-card.selectblinds {
        background: rgba(248, 250, 253, 0.96);
      }

      .compare-card.selectblinds .compare-chip {
        background: rgba(23, 53, 112, 0.1);
        color: #173570;
      }

      .compare-card.selectblinds .compare-card-header h3,
      .compare-card.selectblinds .swatch-label {
        color: #173570;
      }

      .compare-card.selectblinds .preview-surface {
        background: linear-gradient(135deg, rgba(23, 53, 112, 0.08), rgba(255, 255, 255, 0.96));
      }

      .compare-card.selectblinds .preview-surface h4 {
        color: #173570;
      }

      .compare-card.selectblinds .preview-surface p {
        color: #54657f;
      }

      .compare-card.selectblinds .preview-btn.primary {
        background: #f58220;
        color: #ffffff;
      }

      .compare-card.selectblinds .preview-btn.secondary {
        background: #ffffff;
        color: #173570;
        border: 1px solid rgba(23, 53, 112, 0.18);
      }

      .compare-card.modern-neutral {
        background: rgba(246, 247, 248, 0.96);
      }

      .compare-card.modern-neutral .compare-chip {
        background: rgba(56, 64, 74, 0.1);
        color: #38404a;
      }

      .compare-card.modern-neutral .compare-card-header h3,
      .compare-card.modern-neutral .swatch-label {
        color: #38404a;
      }

      .compare-card.modern-neutral .preview-surface {
        background: linear-gradient(135deg, rgba(56, 64, 74, 0.08), rgba(255, 255, 255, 0.96));
      }

      .compare-card.modern-neutral .preview-surface h4 {
        color: #38404a;
      }

      .compare-card.modern-neutral .preview-surface p {
        color: #66707c;
      }

      .compare-card.modern-neutral .preview-btn.primary {
        background: #38404a;
        color: #ffffff;
      }

      .compare-card.modern-neutral .preview-btn.secondary {
        background: #ffffff;
        color: #38404a;
        border: 1px solid rgba(56, 64, 74, 0.16);
      }

      .compare-card.soft-sage {
        background: rgba(246, 249, 244, 0.96);
      }

      .compare-card.soft-sage .compare-chip {
        background: rgba(103, 126, 110, 0.12);
        color: #677e6e;
      }

      .compare-card.soft-sage .compare-card-header h3,
      .compare-card.soft-sage .swatch-label {
        color: #415349;
      }

      .compare-card.soft-sage .preview-surface {
        background: linear-gradient(135deg, rgba(175, 191, 175, 0.24), rgba(255, 255, 255, 0.94));
      }

      .compare-card.soft-sage .preview-surface h4 {
        color: #415349;
      }

      .compare-card.soft-sage .preview-surface p {
        color: #617067;
      }

      .compare-card.soft-sage .preview-btn.primary {
        background: #677e6e;
        color: #ffffff;
      }

      .compare-card.soft-sage .preview-btn.secondary {
        background: #ffffff;
        color: #415349;
        border: 1px solid rgba(103, 126, 110, 0.18);
      }

      .compare-card.luxury-dark {
        background: rgba(29, 31, 35, 0.96);
        border-color: rgba(255, 255, 255, 0.08);
      }

      .compare-card.luxury-dark .compare-card-header h3,
      .compare-card.luxury-dark .swatch-label,
      .compare-card.luxury-dark .compare-intro,
      .compare-card.luxury-dark .compare-notes,
      .compare-card.luxury-dark .swatch-hex {
        color: rgba(245, 240, 232, 0.92);
      }

      .compare-card.luxury-dark .compare-chip {
        background: rgba(198, 166, 110, 0.14);
        color: #d1b079;
      }

      .compare-card.luxury-dark .swatch {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
      }

      .compare-card.luxury-dark .compare-preview {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
      }

      .compare-card.luxury-dark .preview-surface {
        background: linear-gradient(135deg, rgba(209, 176, 121, 0.12), rgba(49, 52, 58, 0.98));
      }

      .compare-card.luxury-dark .preview-surface h4 {
        color: #f5f0e8;
      }

      .compare-card.luxury-dark .preview-surface p {
        color: rgba(245, 240, 232, 0.76);
      }

      .compare-card.luxury-dark .preview-btn.primary {
        background: #d1b079;
        color: #1d1f23;
      }

      .compare-card.luxury-dark .preview-btn.secondary {
        background: transparent;
        color: #f5f0e8;
        border: 1px solid rgba(245, 240, 232, 0.16);
      }

      .compare-card.warm-light-wood {
        background: rgba(252, 248, 241, 0.98);
      }

      .compare-card.warm-light-wood .compare-chip {
        background: rgba(182, 133, 84, 0.12);
        color: #9c6d45;
      }

      .compare-card.warm-light-wood .compare-card-header h3,
      .compare-card.warm-light-wood .swatch-label {
        color: #7a5233;
      }

      .compare-card.warm-light-wood .preview-surface {
        background: linear-gradient(135deg, rgba(233, 210, 177, 0.34), rgba(255, 252, 246, 0.96));
      }

      .compare-card.warm-light-wood .preview-surface h4 {
        color: #7a5233;
      }

      .compare-card.warm-light-wood .preview-surface p {
        color: #876955;
      }

      .compare-card.warm-light-wood .preview-btn.primary {
        background: #b68554;
        color: #ffffff;
      }

      .compare-card.warm-light-wood .preview-btn.secondary {
        background: #ffffff;
        color: #7a5233;
        border: 1px solid rgba(182, 133, 84, 0.2);
      }

      /* ==================== FOOTER ==================== */
      .footer {
        background: var(--color-primary);
        color: var(--color-white);
        padding: var(--spacing-xl) 0 var(--spacing-md);
      }

      .footer-grid {
        display: grid;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
      }

      @media (min-width: 768px) {
        .footer-grid {
          grid-template-columns: 2fr 1fr 1fr 1fr;
        }
      }

      .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-brand .logo {
        order: 0;
        color: var(--color-white);
        margin-bottom: var(--spacing-md);
      }

      .footer-brand .logo-icon,
      .footer-brand .logo-wordmark {
        filter: brightness(0) invert(1);
      }

      .footer-brand p {
        order: 1;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9375rem;
        max-width: 280px;
      }

      .footer-price-btn {
        order: 2;
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: var(--spacing-md);
        padding: 12px 20px;
        border-radius: 4px;
        background: var(--color-accent);
        color: var(--color-primary);
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
        transition: background var(--transition), color var(--transition);
      }

      .footer-price-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
      }

      .footer-price-btn:hover::before {
        left: 100%;
      }

      .footer-price-btn + .footer-calc-btn {
        margin-top: 18px;
      }

      .footer-price-btn + .footer-phone-btn {
        margin-top: 18px;
      }

      .footer-calc-btn {
        order: 2;
        border-color: var(--color-white);
        color: var(--color-white);
      }

      .footer-calc-btn:hover {
        background: var(--color-white);
        color: var(--color-primary);
      }

      .footer-phone-btn {
        order: 2;
        border-color: var(--color-white);
        color: var(--color-white);
      }

      .footer-phone-btn:hover {
        background: var(--color-white);
        color: var(--color-primary);
      }

      .footer-price-btn:hover {
        background: #f3dfc3;
        color: #5a3b23;
      }

      .footer-price-btn .btn-icon {
        position: relative;
        z-index: 1;
        width: 18px;
        height: 18px;
        stroke: currentColor;
      }

      .footer-price-btn span {
        position: relative;
        z-index: 1;
      }

      .footer-title {
        font-family: var(--font-heading);
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: var(--spacing-md);
      }

      .footer-links a {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9375rem;
        padding: 6px 0;
        transition: color var(--transition);
      }

      .footer-links a:hover {
        color: var(--color-secondary);
      }

      .social-links {
        display: flex;
        gap: var(--spacing-sm);
      }

      .social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition);
      }

      .social-link:hover {
        background: var(--color-secondary);
        transform: translateY(-3px);
      }

      .social-link svg {
        width: 20px;
        height: 20px;
        stroke: var(--color-white);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: var(--spacing-md);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
      }

      @media (min-width: 768px) {
        .footer-bottom {
          flex-direction: row;
          justify-content: space-between;
        }
      }

      .footer-bottom p {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
      }

      .footer-legal {
        display: flex;
        gap: var(--spacing-md);
      }

      .footer-legal a {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
        transition: color var(--transition);
      }

      .footer-legal a:hover {
        color: var(--color-secondary);
      }

      .footer-notice {
        margin-top: var(--spacing-md);
        padding: 14px 18px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

      .footer-notice p {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.8125rem;
        line-height: 1.6;
        text-align: center;
        margin: 0;
      }

      /* ==================== CONFETTI ==================== */
      .confetti {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 3000;
        overflow: hidden;
      }

      .confetti-piece {
        position: absolute;
        width: 10px;
        height: 10px;
        animation: confetti-fall 3s ease-out forwards;
      }

      @keyframes confetti-fall {
        0% {
          transform: translateY(-100px) rotate(0deg);
          opacity: 1;
        }
        100% {
          transform: translateY(100vh) rotate(720deg);
          opacity: 0;
        }
      }