:root {
      --brand: #295f98;
      --brand-2: #f4b860;
      --dark: #122033;
      --soft: #f7f9fc;
      --muted: #6b7280;
      --success-soft: #eaf8ef;
      --danger-soft: #fff0f0;
      --brand-soft: rgba(41,95,152,0.08);
      --radius-xl: 1.5rem;
      --shadow-soft: 0 20px 50px rgba(18, 32, 51, 0.08);
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--dark);
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .navbar {
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.92);
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }

    .brand-galleria {
      color: var(--brand);
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .brand-furniture { color: var(--brand-2); }

    .btn-brand {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 0.9rem 1.35rem;
      font-weight: 700;
    }

    .btn-brand:hover {
      background: #204b79;
      color: #fff;
    }

    .btn-soft {
      background: #fff;
      color: var(--dark);
      border: 1px solid rgba(18, 32, 51, 0.1);
      border-radius: 999px;
      padding: 0.9rem 1.35rem;
      font-weight: 700;
    }

    .hero {
      padding: 7rem 0 3rem;
      background:
        radial-gradient(circle at top right, rgba(244,184,96,0.18), transparent 24%),
        radial-gradient(circle at top left, rgba(41,95,152,0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .section-padding { padding: 4.5rem 0; }

    .breadcrumb-soft {
      color: var(--muted);
      font-size: 0.95rem;
    }

    .breadcrumb-soft a {
      color: var(--muted);
      text-decoration: none;
    }

    .hero-badge,
    .section-badge,
    .mini-tag,
    .sale-chip,
    .trust-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      padding: 0.45rem 0.85rem;
      font-weight: 700;
      font-size: 0.86rem;
    }

    .hero-badge,
    .section-badge {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .sale-chip {
      background: var(--danger-soft);
      color: #cf3d3d;
    }

    .trust-chip {
      background: var(--success-soft);
      color: #16824f;
    }

    .mini-tag {
      background: #f5f7fb;
      color: #495466;
      font-weight: 600;
    }

    .hero-title,
    .section-title {
      letter-spacing: -0.04em;
      font-weight: 800;
    }

    .hero-title {
      font-size: clamp(2.3rem, 5vw, 4.3rem);
      line-height: 1.02;
    }

    .section-title {
      font-size: clamp(1.8rem, 3vw, 3rem);
    }

    .hero-text,
    .section-text {
      color: var(--muted);
      font-size: 1.04rem;
    }

    .hero-text { max-width: 660px; }
    .section-text { max-width: 760px; }

    .panel,
    .product-stage,
    .price-card,
    .benefit-card,
    .testimonial-card,
    .faq-card,
    .comparison-card,
    .content-card,
    .cta-card {
      border: 1px solid rgba(18, 32, 51, 0.06);
      border-radius: 1.6rem;
      box-shadow: var(--shadow-soft);
      background: #fff;
    }

    .product-stage {
      overflow: hidden;
      min-height: 100%;
      background: linear-gradient(135deg, #f1f6ff, #fff4e6);
      padding: 2rem;
      position: relative;
    }

    .stage-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: rgba(255,255,255,0.92);
      color: var(--dark);
      border-radius: 999px;
      padding: 0.45rem 0.8rem;
      font-weight: 800;
      font-size: 0.8rem;
      z-index: 2;
    }

    .mattress-illustration {
      width: 88%;
      max-width: 520px;
      margin: 4rem auto 1rem;
      aspect-ratio: 16 / 10;
      border-radius: 2rem;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: 0 32px 70px rgba(18, 32, 51, 0.12), inset 0 -12px 30px rgba(41,95,152,0.06);
      position: relative;
      border: 1px solid rgba(18, 32, 51, 0.06);
    }

    .mattress-illustration::before {
      content: '';
      position: absolute;
      inset: 11% 7% 47% 7%;
      border-radius: 1.45rem;
      background: linear-gradient(135deg, #ffffff, #eef5ff);
      border: 1px solid rgba(18, 32, 51, 0.05);
    }

    .mattress-illustration::after {
      content: '';
      position: absolute;
      inset: 53% 9% 14% 9%;
      border-radius: 0 0 1.5rem 1.5rem;
      background: linear-gradient(135deg, #dfeaf8, #f9e6c3);
    }

    .spring-lines {
      position: absolute;
      left: 14%;
      right: 14%;
      bottom: 18%;
      height: 26%;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px;
    }

    .spring-lines span {
      border: 2px solid rgba(41,95,152,0.22);
      border-top: none;
      border-bottom: none;
      border-radius: 999px;
    }

    .floating-note {
      position: absolute;
      background: rgba(255,255,255,0.95);
      border: 1px solid rgba(18,32,51,0.06);
      box-shadow: var(--shadow-soft);
      border-radius: 1rem;
      padding: 0.85rem 1rem;
      max-width: 200px;
      font-size: 0.9rem;
      font-weight: 700;
    }

    .note-1 { top: 18%; right: 2%; }
    .note-2 { bottom: 12%; left: 0; }

    .price-card { padding: 1.5rem; }

    .price-row {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      flex-wrap: wrap;
    }

    .new-price {
      font-size: 2rem;
      font-weight: 800;
      color: var(--brand);
      line-height: 1;
    }

    .old-price {
      color: #9ca3af;
      text-decoration: line-through;
      font-weight: 700;
    }

    .save-text {
      color: #16824f;
      font-weight: 700;
    }

    .icon-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.9rem;
    }

    .info-pill {
      background: #f7f9fc;
      border-radius: 1rem;
      padding: 0.9rem 1rem;
      font-weight: 700;
      color: #314153;
    }

    .benefit-card,
    .testimonial-card,
    .faq-card,
    .comparison-card,
    .content-card {
      padding: 1.4rem;
      height: 100%;
    }

    .benefit-icon {
      width: 54px;
      height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 1.25rem;
      margin-bottom: 1rem;
    }

    .star-row {
      color: #f4b860;
      letter-spacing: 0.14em;
      font-size: 1rem;
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
    }

    .testimonial-image {
      display: block;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-radius: var(--radius-xl);
      background: #e8edf3;
      box-shadow: var(--shadow-soft);
    }

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

    .comparison-list,
    .feature-list,
    .faq-list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }

    .comparison-list li,
    .feature-list li,
    .faq-list li {
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(18,32,51,0.08);
    }

    .comparison-list li:last-child,
    .feature-list li:last-child,
    .faq-list li:last-child { border-bottom: none; }

    .story-block {
      background: linear-gradient(135deg, #fff, #f9fbff);
      border-radius: 1.4rem;
      padding: 1.4rem;
      border: 1px solid rgba(18,32,51,0.06);
    }

    .cta-card {
      background: linear-gradient(135deg, #1d3557, #295f98);
      color: #fff;
      padding: 2rem;
      overflow: hidden;
      position: relative;
    }

    .cta-card::after {
      content: '';
      position: absolute;
      width: 260px;
      height: 260px;
      right: -80px;
      top: -80px;
      background: rgba(255,255,255,0.08);
      border-radius: 50%;
    }

    .sticky-box {
      position: sticky;
      top: 95px;
    }

    .footer {
      background: #0f1b2b;
      color: rgba(255,255,255,0.8);
      padding: 2rem 0;
    }

    .footer a {
      color: rgba(255,255,255,0.8);
      text-decoration: none;
    }

    .footer a:hover { color: #fff; }

    @media (max-width: 991.98px) {
      .hero { padding-top: 6rem; }
      .sticky-box { position: static; }
      .note-1, .note-2 { position: static; margin: 1rem auto 0; }
      .mattress-illustration { margin-top: 2rem; }
      .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 575.98px) {
      .testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
      }
    }

    /* Related-product cards: two columns on mobile, three from tablet upward. */
    .related-products-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin: 0;
    }

    .related-products-grid > [class*="col-"] {
      width: auto;
      max-width: none;
      padding: 0;
    }

    .related-products-grid .product-card {
      display: block;
      height: 100%;
    }

    .related-products-grid .product-image {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border: 1px solid var(--bs-border-color-translucent);
      border-radius: var(--bs-border-radius-xl);
      background-color: var(--bs-light);
    }

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

    @media (min-width: 768px) {
      .related-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
      }
    }