:root {
      --ink: #1f2a25;
      --muted: #69736e;
      --paper: #f7f6f2;
      --paper-deep: #eeece5;
      --line: #deddd6;
      --accent: #bf5a3f;
      --accent-dark: #9d422d;
      --forest: #2e5144;
      --sage: #dfe8df;
      --white: #ffffff;
      --shadow: 0 22px 55px rgba(31, 42, 37, .11);
      --radius: 22px;
      --furniture-color: #b48a64;
      --furniture-dark: #805a3e;
      --wall-color: #e6ded3;
      --room-floor: #b59270;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--paper);
      font-family: "Manrope", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, select { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--accent); font-size: 11px; font-weight: 800;
      letter-spacing: .14em; text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2 { font-family: "Playfair Display", Georgia, serif; letter-spacing: -.04em; }
    h2 { font-size: clamp(34px, 4vw, 53px); line-height: 1.04; margin-bottom: 18px; }
    .lead { color: var(--muted); font-size: 16px; line-height: 1.7; }

    .site-header {
      position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(222, 221, 214, .75);
      background: rgba(247, 246, 242, .9); backdrop-filter: blur(12px);
    }
    .header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.04em; }
    .brand small { margin-left: -5px; font-size: 10px; font-weight: 500; letter-spacing: -.03em; }
    .brand-mark { position: relative; display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid var(--forest); border-radius: 8px 8px 2px 2px; }
    .brand-mark::before { content: ""; width: 10px; height: 15px; border: 2px solid var(--forest); border-bottom: 0; border-radius: 7px 7px 0 0; }
    .brand-mark::after { content: ""; position: absolute; bottom: -5px; width: 36px; height: 2px; background: var(--forest); border-radius: 2px; }
    .desktop-nav { display: flex; align-items: center; gap: clamp(14px, 2.3vw, 30px); color: var(--muted); font-size: 13px; font-weight: 700; }
    .desktop-nav a { transition: color .2s; }
    .desktop-nav a:hover { color: var(--accent); }
    .header-cta, .button-primary, .button-ghost { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 100px; font-weight: 800; transition: transform .2s, background .2s, color .2s; }
    .header-cta { min-height: 42px; padding: 0 18px; background: var(--forest); color: #fff; font-size: 12px; }
    .header-cta:hover, .button-primary:hover { transform: translateY(-2px); background: #214237; }

    .hero { position: relative; overflow: hidden; padding: clamp(58px, 9vw, 116px) 0 84px; }
    .hero::before { content: ""; position: absolute; z-index: -1; top: -240px; right: -150px; width: 620px; height: 620px; border-radius: 50%; background: #e8eee7; }
    .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 54px; }
    h1 { max-width: 660px; margin-bottom: 22px; font-size: clamp(49px, 6.4vw, 82px); line-height: .98; }
    h1 em { color: var(--accent); font-weight: inherit; }
    .hero-copy .lead { max-width: 530px; margin-bottom: 30px; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
    .button-primary { min-height: 54px; padding: 0 24px; background: var(--forest); color: #fff; font-size: 13px; }
    .button-primary .arrow { margin-left: 12px; font-size: 18px; line-height: 0; }
    .button-ghost { min-height: 52px; padding: 0 18px; color: var(--ink); border: 1px solid var(--line); background: transparent; font-size: 13px; }
    .button-ghost:hover { background: var(--white); transform: translateY(-2px); }
    .hero-note { display: flex; align-items: center; gap: 10px; margin-top: 32px; color: var(--muted); font-size: 12px; }
    .hero-note svg { flex: 0 0 auto; color: var(--accent); }

    .hero-card { position: relative; min-height: 430px; border-radius: 190px 190px 18px 18px; background: #d6e0d5; overflow: hidden; box-shadow: var(--shadow); }
    .hero-card .sun { position: absolute; width: 170px; height: 170px; top: 50px; right: 54px; border-radius: 50%; background: #f0c975; opacity: .94; }
    .hero-card .hero-window { position: absolute; left: 12%; top: 11%; width: 36%; height: 42%; border: 10px solid #f1eee4; border-bottom-width: 13px; background: linear-gradient(150deg, #c6e0e3, #d9eee9 56%, #a8c0a9 57%); box-shadow: 0 15px 0 rgba(87, 107, 91, .15); }
    .hero-window::before, .hero-window::after { content: ""; position: absolute; background: rgba(241, 238, 228, .92); }
    .hero-window::before { width: 5px; height: 100%; left: 50%; transform: translateX(-50%); }
    .hero-window::after { height: 5px; width: 100%; top: 48%; }
    .hero-plant { position: absolute; width: 80px; height: 125px; right: 7%; bottom: 50px; border-radius: 45% 45% 20% 20%; background: #779678; transform: rotate(9deg); }
    .hero-plant::before, .hero-plant::after { content: ""; position: absolute; width: 59px; height: 93px; background: #668d71; border-radius: 65% 6% 65% 6%; }
    .hero-plant::before { left: -35px; top: -21px; transform: rotate(-28deg); }
    .hero-plant::after { right: -26px; top: -42px; transform: rotate(29deg); }
    .hero-pot { position: absolute; z-index: 2; right: 8%; bottom: 0; width: 103px; height: 79px; clip-path: polygon(8% 0, 92% 0, 77% 100%, 23% 100%); background: #c96b4e; }
    .hero-cabinet { position: absolute; bottom: 35px; left: 24%; width: 45%; height: 235px; border-radius: 3px 3px 1px 1px; background: #bb9068; box-shadow: inset 12px 0 0 rgba(255,255,255,.12), inset -11px 0 0 rgba(75,48,29,.1), 13px 18px 20px rgba(58,62,46,.17); }
    .hero-cabinet::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: rgba(77, 48, 31, .32); }
    .hero-cabinet::after { content: ""; position: absolute; width: 6px; height: 42px; border-radius: 10px; background: #3c453e; left: calc(50% - 16px); top: 96px; box-shadow: 26px 0 #3c453e; }
    .hero-floor { position: absolute; height: 90px; inset: auto 0 0; background: repeating-linear-gradient(90deg, #aa805f 0 1px, transparent 1px 80px), #c29a75; transform: perspective(290px) rotateX(28deg); transform-origin: bottom; }
    .hero-sticker { position: absolute; left: 5%; bottom: 40px; z-index: 4; padding: 12px 14px; color: var(--forest); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 9px 25px rgba(52,62,48,.13); font-size: 11px; font-weight: 800; line-height: 1.35; }
    .hero-sticker b { display: block; color: var(--accent); font-size: 18px; }

    .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfaf7; }
    .trust-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
    .trust-list li { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 83px; padding: 14px; border-right: 1px solid var(--line); color: #54605a; font-size: 12px; font-weight: 700; text-align: center; }
    .trust-list li:first-child { border-left: 1px solid var(--line); }
    .trust-icon { color: var(--accent); font-size: 18px; }

    section { padding: 105px 0; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 42px; }
    .section-heading h2 { max-width: 610px; margin-bottom: 0; }
    .section-heading .lead { max-width: 370px; margin-bottom: 0; }

    .configurator-section { overflow: hidden; background: #ebece5; }
    .configurator-intro { margin-bottom: 37px; }
    .configurator-intro h2 { max-width: 620px; margin: 11px 0 12px; }
    .configurator-intro .lead { max-width: 630px; margin: 0; }
    .configurator-shell { display: grid; grid-template-columns: minmax(0, 1fr) 360px; overflow: hidden; border: 1px solid rgba(123, 134, 123, .25); border-radius: var(--radius); background: #fff; box-shadow: 0 18px 45px rgba(31, 42, 37, .08); }

    .scene-area { position: relative; min-height: 635px; overflow: hidden; background: #d9ded8; }
    .scene-label { position: absolute; top: 22px; left: 25px; z-index: 5; display: inline-flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 100px; background: rgba(255,255,255,.82); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(5px); }
    .scene-label i { width: 7px; height: 7px; border-radius: 50%; background: #5ca26f; }
    .camera-tools { position: absolute; z-index: 9; top: 18px; right: 18px; display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid rgba(121,112,99,.2); border-radius: 9px; background: rgba(255,255,255,.8); box-shadow: 0 5px 15px rgba(44,38,30,.06); backdrop-filter: blur(8px); }
    .camera-tools button { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #5f5a52; font-size: 14px; font-weight: 800; }
    .camera-tools button:hover { background: #edf4f0; color: var(--forest); }
    .camera-tools output { min-width: 38px; color: #7b746b; font-size: 9px; font-weight: 800; text-align: center; }
    .scene.is-dragging { cursor: grabbing; }
    .scene:fullscreen { background: #e7e1d8; }
    .scene:fullscreen .scene-label { top: 24px; left: 24px; }
    .scene:fullscreen .camera-tools { top: 24px; right: 24px; }
    .scene { position: absolute; inset: 0; perspective: 900px; touch-action: auto; }
    .wall { position: absolute; inset: 0 0 26% 0; background-color: var(--wall-color); transition: background .35s ease; }
    .wall.is-wallpaper { background-color: var(--wall-color); background-image: radial-gradient(circle at 50% 50%, rgba(110,132,110,.34) 0 1px, transparent 1.5px), radial-gradient(circle at 1px 1px, rgba(110,132,110,.15) 0 1px, transparent 1.5px); background-size: 25px 25px, 12px 12px; }
    .wall.is-tile { background-color: var(--wall-color); background-image: linear-gradient(rgba(255,255,255,.73) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.73) 2px, transparent 2px); background-size: 54px 54px; }
    .floor { position: absolute; z-index: 2; inset: 74% 0 0; height: auto; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(94,59,37,.18) 0 1px, transparent 1px 80px), linear-gradient(160deg, #d0aa82, var(--room-floor)); transition: background .35s ease; }
    .floor.is-tile { background-color: var(--floor-color); background-image: linear-gradient(rgba(255,255,255,.56) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.56) 2px, transparent 2px); background-size: 55px 55px; }
    .floor.is-carpet { background-color: var(--floor-color); background-image: radial-gradient(rgba(70,55,45,.19) .8px, transparent .9px); background-size: 5px 5px; }
    .floor.is-wood { background-color: var(--floor-color); background-image: repeating-linear-gradient(90deg, rgba(70,42,23,.23) 0 2px, transparent 2px 115px), repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 38px); }
    .floor.is-laminate { background-color: var(--floor-color); background-image: repeating-linear-gradient(90deg, rgba(78,52,31,.2) 0 1px, transparent 1px 92px), repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1px, transparent 1px 52px); }
    .floor::before { content: ""; position: absolute; inset: 0; opacity: .32; background: linear-gradient(168deg, transparent 0 18%, rgba(255,255,255,.28) 18.3% 18.7%, transparent 19% 39%, rgba(255,255,255,.2) 39.3% 39.7%, transparent 40%); pointer-events: none; }
    .floor::after { content: ""; position: absolute; top: 0; width: 100%; border-top: 10px solid rgba(65,48,35,.12); }
    .room-details { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
    .ceiling-bulb { position: absolute; left: 50%; top: 4%; width: 18px; height: 25px; border-radius: 50% 50% 45% 45%; background: var(--light-color, #fff3b0); box-shadow: 0 0 16px 8px color-mix(in srgb, var(--light-color, #fff3b0) 72%, transparent), 0 0 70px 32px color-mix(in srgb, var(--light-color, #fff3b0) 34%, transparent); transform: translateX(-50%); transition: background .25s ease, box-shadow .25s ease; }
    .ceiling-bulb::before { content: ""; position: absolute; left: 7px; bottom: 20px; width: 3px; height: 58px; background: #48443c; }
    .ceiling-bulb::after { content: ""; position: absolute; left: 5px; bottom: -5px; width: 8px; height: 6px; border-radius: 1px 1px 3px 3px; background: #777063; }
    .baseboard { position: absolute; left: 0; right: 0; bottom: 25.8%; height: 13px; background: linear-gradient(#f5f0e5, #c9c1b3); box-shadow: 0 2px 3px rgba(45,38,31,.2); }
    .rug { position: absolute; z-index: 2; left: 10%; right: 10%; bottom: 5%; height: 19%; border: 3px solid color-mix(in srgb, var(--rug-color, #c9b49b) 72%, #665344); border-radius: 50%; transform: perspective(300px) rotateX(42deg); background-color: var(--rug-color, #c9b49b); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 3px, rgba(83,61,45,.12) 3px 6px, transparent 6px 15px), repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 2px, transparent 2px 9px); box-shadow: 0 9px 0 rgba(73,52,37,.16), 0 15px 13px rgba(51,39,29,.24), inset 0 0 0 2px rgba(255,255,255,.14); opacity: 1; }
    .scene-lighting { position: absolute; z-index: 7; inset: 0; pointer-events: none; opacity: var(--light-strength, .65); mix-blend-mode: color; background: radial-gradient(ellipse 48% 57% at 50% 8%, var(--light-color, #ffd38a) 0, color-mix(in srgb, var(--light-color, #ffd38a) 52%, transparent) 28%, transparent 76%); box-shadow: inset 0 0 180px rgba(22,28,38,var(--light-darkness,.2)); transition: opacity .25s ease, background .25s ease, box-shadow .25s ease; }
    .scene-lighting::after { content: ""; position: absolute; left: 50%; top: 7%; width: 18%; height: 82%; transform: translateX(-50%); background: linear-gradient(180deg, color-mix(in srgb, var(--light-color, #ffd38a) 32%, transparent), transparent 78%); opacity: .65; filter: blur(16px); }
    .furniture-shadow { position: absolute; z-index: 3; bottom: 15%; left: 50%; width: 47%; height: 42px; border-radius: 50%; background: rgba(59, 44, 32, .22); filter: blur(10px); transform: translateX(-50%); }
    .furniture-stage { position: absolute; z-index: 4; bottom: 14%; left: 50%; width: min(51%, 420px); height: 57%; transform: translateX(-50%); transition: width .3s ease, height .3s ease, transform .3s ease; }
    .furniture { position: absolute; inset: auto 0 0; margin: auto; color: var(--furniture-color); filter: drop-shadow(9px 12px 7px rgba(58,46,34,.18)); animation: furnitureIn .38s ease-out; }
    @keyframes furnitureIn { from { opacity: .2; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .furniture .body { position: absolute; overflow: hidden; border-radius: 4px 4px 1px 1px; background: linear-gradient(90deg, color-mix(in srgb, currentColor 86%, #fff), currentColor 20%, color-mix(in srgb, currentColor 89%, #000)); box-shadow: inset 12px 0 rgba(255,255,255,.11), inset -8px 0 rgba(42,28,17,.1); }
    .furniture .line { position: absolute; background: rgba(58, 42, 28, .34); }
    .furniture .handle { position: absolute; z-index: 2; width: 5px; height: 38px; border-radius: 9px; background: #39463e; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .furniture .leg { position: absolute; bottom: -16px; width: 8px; height: 18px; background: var(--furniture-dark); }
    .furniture--wardrobe { width: 74%; height: 100%; }
    .furniture--wardrobe .body { inset: 0; }
    .furniture--wardrobe .line:nth-of-type(1) { height: 100%; width: 2px; left: 50%; }
    .furniture--wardrobe .line:nth-of-type(2) { display: none; }
    .furniture--wardrobe .handle.one { left: calc(50% - 15px); top: 40%; }
    .furniture--wardrobe .handle.two { left: calc(50% + 11px); top: 40%; }
    .furniture--wardrobe .handle.three, .furniture--wardrobe .handle.four { display: none; }
    .furniture--wardrobe .leg { bottom: -15px; }
    .furniture--wardrobe .leg.a { left: 7%; } .furniture--wardrobe .leg.b { right: 7%; }
    .furniture--dresser { width: 88%; height: 56%; }
    .furniture--dresser .body { inset: 0; }
    .furniture--dresser .line.one, .furniture--dresser .line.two, .furniture--dresser .line.three { left: 0; width: 100%; height: 2px; }
    .furniture--dresser .line.one { top: 25%; } .furniture--dresser .line.two { top: 50%; } .furniture--dresser .line.three { top: 75%; }
    .furniture--dresser .handle { width: 32px; height: 4px; left: calc(50% - 16px); border-radius: 8px; }
    .furniture--dresser .handle.one { top: calc(12.5% - 2px); }.furniture--dresser .handle.two { top: calc(37.5% - 2px); }.furniture--dresser .handle.three { top: calc(62.5% - 2px); }.furniture--dresser .handle.four { top: calc(87.5% - 2px); }
    .furniture--dresser .leg { bottom: -16px; }.furniture--dresser .leg.a { left: 8%; }.furniture--dresser .leg.b { right: 8%; }
    .furniture--bedside { width: 45%; height: 51%; }
    .furniture--bedside .body { inset: 0; }
    .furniture--bedside .line { left: 0; width: 100%; height: 2px; top: 47%; }
    .furniture--bedside .handle { width: 22px; height: 4px; left: calc(50% - 11px); top: 23%; }
    .furniture--bedside .handle.two { top: 70%; }
    .furniture--bedside .leg { bottom: -18px; height: 20px; }.furniture--bedside .leg.a { left: 10%; }.furniture--bedside .leg.b { right: 10%; }
    .furniture--tv { width: 91%; height: 37%; }
    .furniture--tv .body { inset: 0; }
    .furniture--tv .line.one { top: 0; left: 33.33%; width: 2px; height: 100%; }.furniture--tv .line.two { top: 0; left: 66.66%; width: 2px; height: 100%; }
    .furniture--tv .handle { width: 5px; height: 25px; top: calc(50% - 12px); }.furniture--tv .handle.one { left: calc(33.33% - 14px); }.furniture--tv .handle.two { left: calc(33.33% + 10px); }.furniture--tv .handle.three { left: calc(66.66% - 14px); }.furniture--tv .handle.four { left: calc(66.66% + 10px); }
    .furniture--tv .leg { bottom: -17px; transform: skewX(-16deg); }.furniture--tv .leg.a { left: 10%; }.furniture--tv .leg.b { right: 10%; }
    .scene-caption { position: absolute; z-index: 8; left: 24px; bottom: 20px; max-width: 245px; padding: 12px 14px; color: #38443d; border-left: 3px solid var(--accent); background: rgba(255,255,255,.86); font-size: 11px; font-weight: 600; line-height: 1.5; backdrop-filter: blur(7px); }

    .controls-panel { padding: 29px 25px 24px; background: #fcfcfa; }
    .controls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
    .controls-head h3 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.05em; }
    .reset-button { padding: 7px 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
    .control-group { margin-top: 21px; }
    .control-label { display: block; margin-bottom: 11px; color: #4d5851; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .dimension-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .dimension-grid label { display: grid; grid-template-columns: 26px 1fr 26px; grid-template-rows: auto 40px; align-items: center; gap: 3px; }
    .dimension-grid label > span { grid-column: 1 / -1; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
    .dimension-grid input { width: 100%; min-width: 0; height: 38px; padding: 0 2px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 11px; font-weight: 800; text-align: center; }
    .stepper { height: 38px; padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 18px; line-height: 1; }
    .stepper:hover { color: #fff; background: var(--accent); }
    .product-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-tab { min-height: 56px; padding: 8px; color: #66716a; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 11px; font-weight: 800; text-align: left; }
    .product-tab span { display: block; margin-bottom: 2px; color: #98a19b; font-size: 9px; font-weight: 700; }
    .product-tab.active { color: var(--forest); border-color: var(--forest); background: #e7efe8; box-shadow: inset 0 0 0 1px var(--forest); }
    .product-tab.active span { color: var(--accent); }
    .select-wrap { position: relative; }
    .select-wrap::after { content: "⌄"; position: absolute; top: 50%; right: 13px; color: var(--muted); transform: translateY(-57%); pointer-events: none; }
    select { width: 100%; min-height: 47px; padding: 0 35px 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; outline: none; background: #fff; font-size: 12px; font-weight: 700; appearance: none; }
    select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(46,81,68,.1); }
    .swatches { display: flex; flex-wrap: wrap; gap: 9px; }
    .palette-menu { border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
    .palette-menu + .palette-menu { margin-top: 8px; }
    .palette-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 13px; color: var(--ink); font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
    .palette-menu summary::-webkit-details-marker { display: none; }
    .palette-menu summary::after { content: "+"; color: var(--accent); font-size: 18px; font-weight: 400; }
    .palette-menu[open] summary::after { content: "−"; }
    .palette-menu[open] summary { border-bottom: 1px solid var(--line); }
    .palette-menu .swatches { max-height: 190px; padding: 12px; overflow-y: auto; }
    .swatch { position: relative; width: 29px; height: 29px; border: 2px solid #fff; border-radius: 50%; outline: 1px solid rgba(31,42,37,.22); background: var(--swatch); transition: transform .2s; }
    .swatch:hover { transform: scale(1.1); }
    .swatch.active { outline: 2px solid var(--forest); outline-offset: 2px; }
    .swatch.active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); font-size: 14px; font-weight: 800; }
    .wall-type-row { display: flex; gap: 7px; }
    .type-chip { flex: 1; min-height: 35px; padding: 0 7px; color: #6f7973; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 10px; font-weight: 800; }
    .type-chip.active { color: var(--forest); border-color: var(--forest); background: #e7efe8; }
    .range-label { display: flex; justify-content: space-between; margin: -3px 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
    .range-label output { color: var(--accent); }
    .light-range { width: 100%; height: 5px; accent-color: var(--accent); cursor: pointer; }
    .estimate { margin-top: 22px; padding: 17px; border-radius: 13px; color: #f9faf7; background: var(--forest); }
    .estimate-note { display: block; margin-bottom: 4px; color: #bfcec4; font-size: 10px; font-weight: 700; }
    .estimate-value { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.06em; }
    .estimate-details { display: block; margin-top: 4px; color: #d5e0d8; font-size: 10px; line-height: 1.45; }
    .estimate .button-primary { width: 100%; min-height: 43px; margin-top: 14px; background: #fff; color: var(--forest); font-size: 11px; }
    .estimate .button-primary:hover { background: #f0f3ee; }
    .price-disclaimer { margin: 10px 2px 0; color: #89918c; font-size: 9px; line-height: 1.45; }

    .steps { background: #f8f7f3; }
    .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .step { min-height: 230px; padding: 27px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
    .step-number { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 42px; color: var(--accent); border-radius: 50%; background: #fae9e2; font-size: 12px; font-weight: 800; }
    .step h3 { margin-bottom: 10px; font-size: 17px; letter-spacing: -.04em; }
    .step p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

    .about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
    .about-visual { position: relative; min-height: 422px; overflow: hidden; border-radius: 160px 160px 14px 14px; background: #e2d8c8; }
    .about-visual::before { content: ""; position: absolute; left: 20%; bottom: 0; width: 58%; height: 68%; background: #7a9b80; border-radius: 50% 50% 0 0; opacity: .58; }
    .about-visual::after { content: ""; position: absolute; width: 43%; height: 43%; right: 0; bottom: 0; border-radius: 50% 0 0 0; background: #c47759; }
    .about-card { position: absolute; z-index: 2; bottom: 38px; left: 36px; max-width: 203px; padding: 22px; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 12px 25px rgba(48,47,39,.11); }
    .about-card strong { display: block; margin-bottom: 3px; color: var(--accent); font-family: "Playfair Display", Georgia, serif; font-size: 35px; line-height: 1; }
    .about-card span { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.5; }
    .about-copy h2 { margin: 11px 0 19px; }
    .checks { display: grid; gap: 13px; padding: 0; margin: 27px 0 0; list-style: none; }
    .checks li { position: relative; padding-left: 31px; font-size: 13px; font-weight: 700; line-height: 1.45; }
    .checks li::before { content: "✓"; position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 20px; height: 20px; color: var(--forest); border-radius: 50%; background: var(--sage); font-size: 12px; }

    .faq-section { padding-top: 0; }
    .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(35px, 9vw, 115px); }
    .faq-grid h2 { margin: 10px 0 0; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-item button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--ink); border: 0; background: transparent; font-size: 14px; font-weight: 800; text-align: left; }
    .faq-item button span:last-child { color: var(--accent); font-size: 21px; font-weight: 400; transition: transform .2s; }
    .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
    .faq-answer p { overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
    .faq-item.open .faq-answer { grid-template-rows: 1fr; }
    .faq-item.open .faq-answer p { padding-bottom: 19px; }
    .faq-item.open button span:last-child { transform: rotate(45deg); }

    .contact-section { padding: 0 0 105px; }
    .contact-card { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 30px; padding: clamp(32px, 5vw, 58px); overflow: hidden; color: #fff; border-radius: 20px; background: var(--forest); }
    .contact-card h2 { margin: 12px 0 15px; color: #fff; }
    .contact-card .eyebrow { color: #edaf92; }
    .contact-card p { max-width: 550px; margin: 0; color: #cbd9d0; font-size: 14px; line-height: 1.65; }
    .contact-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }
    .contact-actions a { min-height: 48px; padding: 0 17px; }
    .contact-actions .button-primary { background: var(--accent); }
    .contact-actions .button-primary:hover { background: #d36b4d; }
    .contact-actions .button-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
    .contact-actions .button-ghost:hover { background: rgba(255,255,255,.12); }

    footer { padding: 28px 0; border-top: 1px solid var(--line); background: #fbfaf7; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; }
    .footer-inner .brand { color: var(--ink); }
    .footer-links { display: flex; gap: 18px; font-weight: 700; }

    @media (max-width: 900px) {
      .desktop-nav { display: none; }
      .hero-grid, .about-grid, .faq-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 680px; }
      .hero-card { max-width: 650px; min-height: 385px; }
      .configurator-shell { grid-template-columns: 1fr; }
      .scene-area { min-height: 530px; }
      .controls-panel { padding: 28px; }
      .product-tabs { grid-template-columns: repeat(4, 1fr); }
      .section-heading { display: block; }
      .section-heading h2 { margin-bottom: 16px; }
      .about-visual { max-width: 620px; }
      .faq-grid { gap: 28px; }
      .contact-card { grid-template-columns: 1fr; }
      .contact-actions { justify-content: flex-start; }
    }
    @media (max-width: 600px) {
      .container { width: min(100% - 28px, 1180px); }
      .header-inner { min-height: 65px; }
      .header-cta { min-height: 38px; padding: 0 12px; font-size: 10px; }
      .hero { padding: 49px 0 58px; }
      .hero-card { min-height: 300px; border-radius: 130px 130px 14px 14px; }
      .hero-cabinet { height: 160px; }
      .hero-window { border-width: 7px; }
      .hero-plant { transform: scale(.7) rotate(9deg); transform-origin: bottom; }
      .hero-pot { transform: scale(.7); transform-origin: bottom; }
      .hero-sticker { bottom: 18px; transform: scale(.8); transform-origin: left bottom; }
      .trust-list { grid-template-columns: repeat(2, 1fr); }
      .trust-list li { min-height: 68px; padding: 8px; font-size: 10px; }
      .trust-list li:nth-child(3) { border-left: 1px solid var(--line); }
      section { padding: 72px 0; }
      .scene-area { min-height: 400px; }
      .furniture-stage { width: 60%; height: 53%; }
      .wall::before { right: 6%; }
      .wall::after { right: calc(6% + 10.5% - 2px); }
      .wall-shelf { display: none; }
      .scene-caption { left: 14px; bottom: 13px; max-width: 180px; padding: 9px 10px; font-size: 9px; }
      .controls-panel { padding: 22px 17px; }
      .product-tabs { grid-template-columns: repeat(2, 1fr); }
      .steps-grid { grid-template-columns: 1fr; }
      .step { min-height: unset; padding: 22px; }
      .step-number { margin-bottom: 25px; }
      .about-visual { min-height: 340px; }
      .contact-section { padding-bottom: 72px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }

    /* Reference adaptation: warm canvas, flat surfaces, coral pulse, mobile first. */
    :root {
      --ink: #000000;
      --muted: #5f5c55;
      --paper: #ebeadf;
      --paper-deep: #d5cec0;
      --line: #000000;
      --accent: #f04923;
      --accent-dark: #c93719;
      --forest: #000000;
      --sage: #d5cec0;
      --white: #ffffff;
      --shadow: none;
      --radius: 12px;
    }
    body { background: var(--paper); color: var(--ink); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.05em; }
    h1, h2 { font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -.06em; }
    h1 { font-size: clamp(40px, 12vw, 74px); line-height: 1.02; }
    h2 { font-size: clamp(28px, 8vw, 53px); line-height: 1.08; }
    .container { width: min(1200px, calc(100% - 32px)); }
    .site-header { position: sticky; top: 10px; margin: 10px 16px 0; border: 0; border-radius: 12px; background: #fff; box-shadow: none; }
    .header-inner { min-height: 58px; padding: 0 14px; }
    .brand { color: #000; font-weight: 700; }
    .brand-mark { border-color: #000; width: 28px; height: 28px; border-radius: 7px 7px 2px 2px; }
    .brand-mark::before { border-color: #000; }
    .brand-mark::after { background: #000; }
    .desktop-nav { display: none; }
    .header-cta { min-height: 38px; padding: 0 14px; background: #000; color: #fff; font-size: 11px; }
    .hero { padding: 54px 0 28px; }
    .hero::before { top: 110px; right: -250px; width: 520px; height: 520px; background: #d5cec0; }
    .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
    .hero-copy .lead { margin-bottom: 24px; color: #383630; font-size: 16px; line-height: 1.5; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .button-primary, .button-ghost { min-height: 48px; padding: 0 22px; border: 1px solid #000; font-size: 14px; }
    .button-primary { background: #000; color: #fff; }
    .button-primary:hover { background: var(--accent); }
    .button-ghost { background: transparent; color: #000; }
    .hero-note { margin-top: 26px; font-size: 12px; }
    .hero-card { min-height: 360px; border-radius: 12px; background: var(--paper-deep); box-shadow: none; }
    .hero-sticker { background: var(--accent); color: #fff; border-radius: 999px; box-shadow: none; }
    .hero-sticker b { color: #fff; }
    .trust-strip { border: 0; background: transparent; }
    .trust-list { gap: 8px; grid-template-columns: repeat(2, 1fr); }
    .trust-list li, .trust-list li:first-child { min-height: 64px; border: 0; border-radius: 12px; background: #fff; color: #000; font-size: 12px; }
    .trust-icon { color: var(--accent); }
    section { padding: 72px 0; }
    .configurator-section { background: var(--paper); }
    .configurator-intro { margin-bottom: 24px; }
    .configurator-intro h2 { margin: 10px 0 13px; }
    .configurator-intro .lead { font-size: 15px; line-height: 1.5; }
    .configurator-shell { display: flex; flex-direction: column; border: 0; border-radius: 12px; box-shadow: none; background: transparent; }
    .scene-area { min-height: 430px; border-radius: 12px; background: var(--paper-deep); }
    .scene-label { top: 14px; left: 14px; border-radius: 999px; background: #fff; font-size: 10px; }
    .scene-caption { left: 14px; bottom: 14px; border: 0; border-radius: 12px; background: #fff; color: #000; }
    .controls-panel { margin-top: 8px; padding: 20px 16px; border-radius: 12px; background: #fff; }
    .controls-head { padding-bottom: 18px; }
    .controls-head h3 { font-size: 22px; }
    .product-tabs { gap: 8px; }
    .product-tab { min-height: 58px; border: 1px solid #000; border-radius: 12px; background: #fff; color: #000; }
    .product-tab.active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }
    .product-tab.active span { color: #fff; }
    select { border: 1px solid #000; border-radius: 12px; background: #fff; }
    .swatch { width: 32px; height: 32px; outline-color: #000; }
    .type-chip { min-height: 38px; border: 1px solid #000; border-radius: 999px; color: #000; background: #fff; }
    .type-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; }
    .estimate { margin-top: 22px; border-radius: 12px; background: var(--accent); color: #fff; }
    .estimate-note, .estimate-details { color: #fff; }
    .estimate .button-primary { border-color: #000; background: #fff; color: #000; }
    .steps { background: transparent; }
    .steps-grid { grid-template-columns: 1fr; gap: 8px; }
    .step { min-height: 0; padding: 22px; border: 0; border-radius: 12px; background: #fff; }
    .step-number { margin-bottom: 24px; color: #fff; background: var(--accent); }
    .step h3 { font-size: 18px; }
    .step p { color: #5f5c55; }
    .about-grid { gap: 30px; }
    .about-visual { min-height: 340px; border-radius: 12px; background: var(--paper-deep); }
    .about-card { bottom: 18px; left: 18px; border-radius: 12px; box-shadow: none; }
    .about-card strong { color: var(--accent); }
    .faq-grid { gap: 28px; }
    .faq-item button { font-size: 15px; letter-spacing: -.04em; }
    .contact-section { padding-bottom: 72px; }
    .contact-card { display: block; padding: 24px; border-radius: 12px; background: var(--accent); }
    .contact-card h2 { color: #fff; font-size: 34px; }
    .contact-card p { color: #fff; }
    .contact-actions { display: grid; gap: 10px; margin-top: 24px; }
    .contact-actions .button-primary { background: #fff; color: #000; }
    .contact-actions .button-ghost { color: #fff; border-color: #fff; }
    footer { border: 0; background: #fff; }
    .footer-links { display: none; }
    /* Reference-inspired service UI: compact header, warm canvas and card-based workspace. */
    :root {
      --ink: #2d2a25;
      --muted: #77736b;
      --paper: #faf8f2;
      --paper-deep: #f1eee6;
      --line: #e3ded3;
      --accent: #9b6a3d;
      --accent-dark: #78502e;
      --forest: #2f705b;
      --sage: #e7eee8;
      --shadow: 0 14px 34px rgba(55, 48, 37, .08);
      --radius: 15px;
    }
    body { background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
    h1, h2, h3, p { font-family: "DM Sans", Arial, sans-serif; }
    h1, h2 { letter-spacing: -.055em; }
    .container { width: min(1120px, calc(100% - 30px)); }
    .site-header { top: 0; margin: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: rgba(250,248,242,.96); box-shadow: 0 5px 18px rgba(55,48,37,.04); }
    .header-inner { min-height: 62px; gap: 10px; }
    .brand { font-size: 15px; }
    .brand-mark { width: 27px; height: 27px; border-color: var(--accent); border-radius: 5px; }
    .brand-mark::before { border-color: var(--accent); }
    .brand-mark::after { width: 31px; background: var(--accent); }
    .desktop-nav { gap: 16px; font-size: 11px; }
    .desktop-nav a { color: #625d54; }
    .header-cta { min-height: 36px; padding: 0 13px; border: 1px solid #d6c4ae; background: #fffdf8; color: var(--accent-dark); font-size: 11px; }
    .header-cta:hover { background: #f2e8db; }
    .hero { padding: 54px 0 48px; }
    .hero::before { top: -390px; right: -260px; width: 560px; height: 560px; background: #edf1eb; }
    .hero-grid { display: block; }
    .hero-copy { max-width: 780px; }
    .eyebrow { font-size: 10px; letter-spacing: .1em; }
    h1 { max-width: 760px; margin-bottom: 15px; font-size: clamp(42px, 8vw, 72px); line-height: 1.02; }
    .hero-copy .lead { max-width: 650px; margin-bottom: 24px; font-size: 15px; line-height: 1.55; }
    .button-primary { min-height: 46px; padding: 0 19px; border-radius: 9px; background: var(--forest); font-size: 12px; }
    .button-primary:hover { background: #255b49; }
    .button-ghost { min-height: 46px; border-radius: 9px; font-size: 12px; background: rgba(255,255,255,.42); }
    .hero-actions { gap: 9px; }
    .hero-note { margin-top: 19px; font-size: 11px; }
    .hero-card { max-width: 600px; min-height: 310px; margin-top: 32px; border: 1px solid #e1d8ca; border-radius: 15px; background: #fffdf8; box-shadow: var(--shadow); }
    .hero-card .sun, .hero-card .hero-window, .hero-card .hero-plant, .hero-card .hero-pot { display: none; }
    .hero-card .hero-floor { height: 65px; background: repeating-linear-gradient(90deg, rgba(124,87,54,.28) 0 1px, transparent 1px 58px), #e0c49d; }
    .hero-cabinet { bottom: 48px; left: 27%; width: 39%; height: 185px; background: linear-gradient(90deg, #d2af87, #b98c60 52%, #a77b52); box-shadow: 0 13px 18px rgba(61,45,30,.16); }
    .hero-sticker { top: 17px; left: 17px; bottom: auto; padding: 9px 11px; border: 1px solid #e4ddd2; border-radius: 9px; background: #fff; box-shadow: none; color: #6c665d; font-size: 10px; }
    .hero-sticker b { color: var(--forest); font-size: 16px; }
    .trust-strip { background: #fffdf8; }
    .trust-list li { min-height: 64px; border-color: var(--line); font-size: 11px; }
    section { padding: 70px 0; }
    .configurator-section { background: #f0eee8; }
    .configurator-intro { max-width: 710px; margin-bottom: 24px; }
    .configurator-intro h2 { margin-top: 9px; font-size: clamp(31px, 5vw, 48px); }
    .configurator-intro .lead { font-size: 14px; line-height: 1.55; }
    .configurator-shell { border: 1px solid #ded8cd; border-radius: 15px; box-shadow: 0 12px 30px rgba(55,48,37,.07); }
    .scene-area { min-height: 540px; background: #e8e0d3; }
    .controls-panel { padding: 22px 19px; background: #fffdf9; }
    .controls-head { padding-bottom: 17px; }
    .controls-head h3 { font-size: 18px; }
    .control-group { margin-top: 17px; }
    .control-label { margin-bottom: 8px; color: #726c62; font-size: 9px; letter-spacing: .08em; }
    .palette-menu, .select-wrap, .dimension-grid label, .product-tab { border-color: #e2dbd0; background: #fff; }
    .palette-menu summary { min-height: 40px; font-size: 10px; }
    .swatch { width: 21px; height: 21px; }
    .type-chip { padding: 8px 10px; border-radius: 7px; font-size: 10px; }
    .type-chip.active { background: var(--forest); border-color: var(--forest); }
    .estimate { border-radius: 10px; background: var(--forest); }
    .estimate .button-primary { background: #fff; color: var(--forest); }
    .steps { background: #fffdf8; }
    .step { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
    .step-number { background: var(--accent); }
    .contact-card { border-radius: 14px; background: var(--forest); }
    footer { background: #fffdf8; }
    @media (max-width: 759px) {
      .desktop-nav { display: none; }
      .header-inner { min-height: 58px; }
      .header-cta { font-size: 10px; padding: 0 10px; }
      .hero { padding-top: 42px; }
      .hero-card { min-height: 260px; }
      .hero-cabinet { height: 150px; bottom: 39px; }
      .trust-list { grid-template-columns: repeat(2, 1fr); }
      .trust-list li { min-height: 55px; padding: 9px; }
      .scene-area { min-height: 430px; }
    }
    #threeCanvas { position: absolute; z-index: 4; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: auto; }
    .legacy-stage { display: none !important; }
    .scene-lighting { z-index: 7; }
    .scene.mode-details #threeCanvas { filter: contrast(1.08) saturate(.92); }
    .editor-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .section-toolbar { display: flex; gap: 7px; margin-top: 9px; }
    .compact-button { min-height: 34px; flex: 1; padding: 0 8px; border-radius: 7px; font-size: 10px; }
    .section-list { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
    .section-tab { flex: 0 0 auto; min-width: 58px; min-height: 34px; padding: 4px 8px; color: #70685e; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 10px; font-weight: 800; }
    .section-tab.active { color: var(--forest); border-color: var(--forest); background: #e7efe8; }
    .section-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
    .editor-select, .editor-number { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; }
    .editor-field { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
    .editor-field.full { grid-column: 1 / -1; }
    .editor-cabinet { position: absolute; inset: 0; display: flex; padding: 3px; border: 3px solid var(--furniture-dark); border-radius: 3px; background: color-mix(in srgb, var(--furniture-color) 75%, #302015); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 11px 16px 14px rgba(51,35,22,.2); transform-style: preserve-3d; }
    .editor-section { position: relative; flex: 1 1 0; min-width: 0; margin-right: 3px; overflow: hidden; border-right: 3px solid color-mix(in srgb, var(--furniture-dark) 78%, #000); background: linear-gradient(90deg, color-mix(in srgb, var(--furniture-color) 62%, #fff), var(--furniture-color) 54%, color-mix(in srgb, var(--furniture-color) 66%, #000)); }
    .editor-section:last-child { margin-right: 0; border-right: 0; }
    .editor-back { position: absolute; inset: 0; background: rgba(48,32,20,.16); }
    .editor-shelf { position: absolute; left: 4%; right: 4%; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--furniture-color) 68%, #3a2417); box-shadow: 0 2px 2px rgba(40,25,15,.24); }
    .editor-drawer { position: absolute; left: 7%; right: 7%; height: 14%; border: 2px solid color-mix(in srgb, var(--furniture-dark) 72%, #fff); border-radius: 2px; background: color-mix(in srgb, var(--furniture-color) 78%, #fff); box-shadow: inset 0 -4px rgba(50,30,18,.12); }
    .editor-drawer::after { content: ""; position: absolute; left: 42%; top: 42%; width: 16%; height: 3px; border-radius: 3px; background: #4d4235; }
    .editor-door { position: absolute; z-index: 3; inset: 0; border: 2px solid rgba(49,31,19,.26); background: linear-gradient(90deg, color-mix(in srgb, var(--furniture-color) 86%, #fff), var(--furniture-color) 45%, color-mix(in srgb, var(--furniture-color) 78%, #000)); transform-origin: left center; transition: opacity .25s, transform .25s; }
    .editor-door::after { content: ""; position: absolute; top: 42%; right: 9%; width: 5px; height: 34px; border-radius: 5px; background: #39463e; }
    .editor-section[data-facade="open"] .editor-door { opacity: 0; pointer-events: none; }
    .editor-section[data-facade="glass"] .editor-door { background: linear-gradient(135deg, rgba(218,240,239,.62), rgba(116,163,158,.24)); border-color: rgba(255,255,255,.6); }
    .scene.mode-compose .editor-cabinet { transform: rotateY(-7deg) rotateX(2deg); }
    .scene.mode-details .editor-door { opacity: .18; }
    .scene.mode-details .editor-section { outline: 1px dashed rgba(255,255,255,.7); outline-offset: -7px; }
    .editor-link { color: #5d665f; font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; }
    .editor-link:hover { color: var(--accent); }
    .configurator-shell { border: 1px solid #d9d4ca; box-shadow: 0 18px 40px rgba(52,47,39,.07); }
    .wall-type-row { gap: 8px; }
    .type-chip { min-width: 0; border-width: 1px; box-shadow: none; }
    .wall-type-row .type-chip { margin: 0; }
    .section-toolbar { gap: 8px; }
    .section-toolbar .compact-button { min-width: 0; padding: 0 9px; }
    .dimension-grid { gap: 9px; }
    .dimension-grid label { gap: 4px; }
    .camera-tools + .wall {}
    .scene-area { background: #e7e1d8; }
    .scene-label { border: 1px solid rgba(121,112,99,.18); box-shadow: 0 5px 15px rgba(44,38,30,.06); }
    .controls-panel { border-left: 1px solid #e3ded5; }
    .controls-head { border-bottom-color: #e3ded5; }
    .editor-tools { padding: 14px; border: 1px solid #e1dcd3; border-radius: 10px; background: #faf9f6; }
    .editor-modes .type-chip, .section-toolbar .button-ghost { border-color: #d7d1c7; background: #fff; color: #68635b; }
    .editor-modes .type-chip.active { color: #2e5f50; border-color: #78a291; background: #edf4f0; }
    .section-tab { border-color: #d7d1c7; }
    .section-tab.active { border-color: #78a291; background: #edf4f0; }
    .editor-hint { margin: 10px 0 0; color: #8b857b; font-size: 9px; line-height: 1.45; }
    .hardware-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hardware-grid select { min-height: 40px; font-size: 10px; }
    .editor-cabinet { transform-style: preserve-3d; }
    .editor-cabinet::before, .editor-cabinet::after { content: ""; position: absolute; z-index: 5; top: 3px; bottom: 3px; width: var(--depth-visual, 26px); background: linear-gradient(90deg, color-mix(in srgb, var(--furniture-dark) 72%, #fff), var(--furniture-color)); opacity: .95; pointer-events: none; }
    .editor-cabinet::before { left: calc(var(--depth-visual, 26px) * -1); transform-origin: right center; transform: skewY(-12deg); border-radius: 3px 0 0 3px; }
    .editor-cabinet::after { right: calc(var(--depth-visual, 26px) * -1); transform-origin: left center; transform: skewY(12deg); border-radius: 0 3px 3px 0; }
    .scene.mode-3d .editor-cabinet { transform: rotateY(var(--camera-y, 0deg)) rotateX(var(--camera-x, 0deg)); }
    .scene.mode-compose .editor-cabinet { transform: rotateY(calc(var(--camera-y, 0deg) - 9deg)) rotateX(calc(var(--camera-x, 0deg) + 2deg)); }
    @media (max-width: 759px) { .hardware-grid { grid-template-columns: 1fr; } .camera-tools { top: 13px; right: 13px; } }
    .editor-cabinet { border: 3px solid color-mix(in srgb, var(--furniture-dark) 62%, #8b7a68); background: color-mix(in srgb, var(--furniture-color) 78%, #5f4734); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 10px 14px 18px rgba(51,35,22,.16); }
    .editor-section { border-right: 1px solid color-mix(in srgb, var(--furniture-dark) 58%, #c7b7a4); }
    .editor-door { border: 1px solid rgba(49,31,19,.18); box-shadow: inset 1px 0 rgba(255,255,255,.2); }
    .editor-shelf { height: 3px; }
    .editor-drawer { border: 1px solid rgba(76,57,40,.35); }
    .furniture { filter: drop-shadow(7px 10px 8px rgba(58,46,34,.14)); }
    .scene-caption { border-left: 2px solid var(--accent); box-shadow: 0 6px 18px rgba(44,38,30,.06); }
    .estimate { box-shadow: 0 8px 20px rgba(44,78,64,.12); }
    @media (min-width: 760px) {
      .site-header { top: 16px; margin: 16px 16px 0; }
      .desktop-nav { display: flex; }
      .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
      .hero-actions { flex-direction: row; align-items: center; }
      .configurator-shell { display: grid; grid-template-columns: minmax(0, 1fr) 360px; background: #fff; }
      .controls-panel { margin-top: 0; }
      .steps-grid { grid-template-columns: repeat(3, 1fr); }
      .about-grid { grid-template-columns: .9fr 1.1fr; }
      .contact-card { display: grid; }
      .contact-actions { display: flex; margin-top: 0; }
    }
    .editor-page-note { max-width: 720px; margin: 0 auto 22px; padding: 12px 16px; color: #6c665d; border: 1px solid #ded8ce; border-radius: 9px; background: #faf9f6; font-size: 11px; line-height: 1.5; }

    /* ===== 3D-комната, мобильная адаптация, производительность ===== */
    .wall, .floor, .room-details, .furniture-shadow, .legacy-stage, .scene-lighting { display: none !important; }
    .scene { perspective: none; touch-action: pan-y; }
    #threeCanvas { touch-action: pan-y; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
    #threeCanvas:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
    .scene.is-dragging #threeCanvas { cursor: grabbing; }
    .scene-area { background: linear-gradient(180deg, #efe9df, #e2dbcf); }
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: clip; }
    img, canvas, svg, video { max-width: 100%; }
    .steps, #about, .faq-section, .contact-section, footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }
    @media (max-width: 759px) {
      .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
      .scene-area { min-height: 380px; min-height: clamp(340px, 62svh, 520px); }
      .scene-label { top: 58px; left: 12px; padding: 6px 10px; font-size: 10px; }
      .camera-tools { top: 12px; right: 12px; left: auto; }
      .scene-caption { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 8px 10px; font-size: 10px; }
      .controls-panel { padding: 20px 16px; }
      input, select, textarea { font-size: 16px !important; }
      .section-list, .swatches { -webkit-overflow-scrolling: touch; }
    }
    @media (pointer: coarse) {
      .swatch { width: 34px; height: 34px; }
      .swatches { gap: 10px; }
      .camera-tools button { width: 38px; height: 38px; font-size: 18px; }
      .type-chip, .section-tab, .compact-button, .reset-button { min-height: 40px; }
    }

    /* Сцена «прилипает» к экрану, пока листаются настройки (иначе на длинной панели видно пустой фон) */
    .configurator-section, .configurator-shell { overflow: clip; }
    @media (min-width: 760px) {
      .configurator-shell { background: linear-gradient(90deg, #e7e1d8 calc(100% - 360px), #fff 0); }
      .scene-area { position: sticky; top: 92px; align-self: start; height: min(calc(100vh - 108px), 820px); min-height: 480px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    /* ===== Фон под комнатой ===== */
    .scene-area { background: radial-gradient(ellipse at 50% 36%, #3a4d56 0%, #26343b 52%, #1b252a 100%); }
    .scene-caption { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
    .camera-tools { background: rgba(255,253,248,.94); }
    @media (min-width: 760px) {
      .configurator-shell { background: linear-gradient(90deg, #1b252a calc(100% - 360px), #fff 0); }
    }

    /* ===== Окно «Связаться» ===== */
    .button-primary, .button-ghost, .header-cta { font-family: inherit; cursor: pointer; }
    .contact-actions button { min-height: 48px; padding: 0 24px; }
    .contact-modal { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; color: var(--ink); border: 0; border-radius: 24px; background: #fffdf8; box-shadow: 0 30px 80px rgba(14,22,26,.5); overflow: auto; overscroll-behavior: contain; }
    .contact-modal::backdrop { background: rgba(14,22,26,.6); }
    .contact-modal[open] { animation: cm-pop .22s cubic-bezier(.2,.8,.2,1); }
    .contact-modal[open]::backdrop { animation: cm-fade .22s ease-out; }
    @keyframes cm-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
    .cm-sheet { position: relative; padding: 30px 26px 26px; }
    .cm-grab { display: none; }
    .cm-sheet h2 { margin: 8px 0 8px; padding-right: 44px; font-size: 26px; line-height: 1.12; letter-spacing: -.03em; }
    .cm-lead { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .cm-close { position: absolute; top: 14px; right: 14px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; transition: background .2s, transform .2s; }
    .cm-close:hover { background: #f1ece3; }
    .cm-close:focus-visible, .cm-row:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
    .cm-list { display: grid; gap: 10px; }
    .cm-row { display: flex; min-height: 64px; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, background .2s, transform .2s; -webkit-tap-highlight-color: transparent; }
    a.cm-row:hover { border-color: var(--forest); background: #f6faf7; transform: translateY(-1px); }
    a.cm-row:active { transform: scale(.99); }
    .cm-row.is-empty { opacity: .55; }
    .cm-ico { display: grid; width: 44px; height: 44px; flex: none; place-items: center; color: #fff; border-radius: 13px; background: var(--forest); }
    .cm-ico svg { width: 22px; height: 22px; }
    .cm-row[data-kind="telegram"] .cm-ico { background: #2a9bd6; }
    .cm-row[data-kind="instagram"] .cm-ico { background: linear-gradient(135deg, #f5a623, #e1306c 55%, #7b3fe4); }
    .cm-row[data-kind="max"] .cm-ico { background: linear-gradient(135deg, #3d7bff, #8a46ff); }
    .cm-text { display: grid; min-width: 0; flex: 1; gap: 2px; }
    .cm-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
    .cm-value { overflow: hidden; font-size: 16px; font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
    .cm-arrow { flex: none; color: var(--muted); font-size: 18px; }
    @media (max-width: 759px) {
      /* На телефоне окно выезжает снизу, как шторка */
      .contact-modal { width: 100%; max-width: none; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92vh; max-height: 92dvh; }
      .contact-modal[open] { animation: cm-sheet .26s cubic-bezier(.2,.8,.2,1); }
      @keyframes cm-sheet { from { transform: translateY(100%); } to { transform: none; } }
      .cm-sheet { padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
      .cm-grab { display: block; width: 42px; height: 4px; margin: 0 auto 16px; border-radius: 4px; background: #d8d1c4; }
      .cm-sheet h2 { font-size: 23px; }
      .cm-close { top: 18px; right: 14px; }
    }

    /* ===== Кухня ===== */
    [hidden] { display: none !important; }
    .product-tabs { grid-template-columns: repeat(2, 1fr); }
    .editor-select, .editor-number { min-width: 0; }

    /* ===== Правки по списку ===== */
    .header-cta, .header-cta:hover { border: 0; background: var(--forest); color: #fff; }
    .header-cta:hover { background: #214237; }
    .hero-card { min-height: 400px; background: #f4ece0; }
    .hero-card .hero-kitchen { position: absolute; left: 0; right: 0; top: 0; bottom: 36px; width: 100%; height: calc(100% - 36px); }
    .hero-card .hero-cabinet { display: none; }
    .screen-tip { display: flex; max-width: 640px; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; color: var(--forest); font-size: 12.5px; font-weight: 600; line-height: 1.5; border: 1px solid #cfe0d6; border-radius: 12px; background: #eef5f0; }
    .screen-tip svg { flex: none; margin-top: 2px; }
    .decor-block { margin-top: 14px; }
    .control-sub { display: block; margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
    .decor-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
    .decor-swatch { aspect-ratio: 1; padding: 0; cursor: pointer; border: 2px solid #fff; border-radius: 50%; background-color: #ddd; background-size: cover; background-position: center; box-shadow: 0 0 0 1px #d9d0c2; transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
    .decor-swatch:hover { transform: scale(1.08); }
    .decor-swatch.active { box-shadow: 0 0 0 2.5px var(--forest); }
    .decor-swatch.is-none { background: var(--palette-color, #b48a64); position: relative; }
    .decor-swatch.is-none::after { content: "∅"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
    .decor-note { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
    #shiftRange { width: 100%; margin: 10px 0 0; accent-color: var(--forest); }
    .shift-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .doors-row { margin-top: 14px; }
    .doors-row .editor-modes { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 759px) {
      .hero-card { min-height: 300px; }
      .decor-grid { grid-template-columns: repeat(6, 1fr); }
      .screen-tip { font-size: 12px; }
    }
  

/* ===== Список мебели, карусель, контакты, защита ===== */
.hero-card { aspect-ratio: 4 / 3; min-height: 0 !important; overflow: hidden; }
.hero-card .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.hero-card .hero-floor, .hero-card .hero-kitchen { display: none; }
.products, .works { padding: 72px 0 24px; }
.products .section-lead, .works .section-lead { max-width: 720px; margin: 10px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fffdf8; box-shadow: 0 8px 24px rgba(60,45,30,.06); transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(60,45,30,.12); }
.pc-media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; background: #eee6d8; -webkit-user-drag: none; user-select: none; }
.pc-media--icon { display: grid; place-items: center; color: var(--forest); background: linear-gradient(135deg, #eaf2ec, #f4ede0); }
.pc-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.pc-body h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pc-price b { color: var(--forest); font-size: 22px; letter-spacing: -.03em; }
.pc-price span { color: var(--muted); font-size: 12px; font-weight: 600; }
.pc-price small { display: block; font-size: 11px; font-weight: 500; opacity: .85; }
.pc-body p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.pc-link { margin-top: auto; color: var(--forest); font-size: 14px; font-weight: 800; text-decoration: none; }
.pc-link:hover { text-decoration: underline; }
.carousel { position: relative; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; outline: none; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.grab { cursor: grabbing; scroll-snap-type: none; }
.carousel-track:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 16px; }
.slide { position: relative; flex: 0 0 min(340px, 78vw); margin: 0; overflow: hidden; scroll-snap-align: start; border-radius: 18px; background: #eee6d8; cursor: zoom-in; }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 16px 14px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.35; background: linear-gradient(transparent, rgba(20,16,12,.78)); pointer-events: none; }
.slide figcaption span { display: block; margin-bottom: 3px; opacity: .8; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.car-btn { position: absolute; top: 50%; z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; margin-top: -23px; padding: 0 0 4px; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,253,248,.95); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.car-btn.prev { left: -14px; } .car-btn.next { right: -14px; }
.car-btn:hover { background: #fff; }
.carousel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.car-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.car-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4cbbb; transition: background .2s, transform .2s; }
.car-dot.on { background: var(--forest); transform: scale(1.35); }
.car-count { color: var(--muted); font-size: 12px; font-weight: 700; }
.lightbox { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; color: #fff; border: 0; background: rgba(12,10,8,.94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 900px); max-height: 82vh; max-height: 82dvh; border-radius: 10px; user-select: none; -webkit-user-drag: none; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 14px; font-weight: 600; padding: 0 70px; }
.lb-close, .lb-nav { position: absolute; display: grid; width: 48px; height: 48px; place-items: center; padding: 0 0 4px; color: #fff; font-size: 30px; cursor: pointer; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.12); }
.lb-close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
.lb-nav { top: 50%; margin-top: -24px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 700; }
.contact-links a { color: var(--forest); text-decoration: none; } .contact-links a:hover { text-decoration: underline; }
.footer-contacts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; }
.footer-contacts a { color: inherit; text-decoration: none; opacity: .85; } .footer-contacts a:hover { text-decoration: underline; opacity: 1; }
.cm-note { margin: 14px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
button.cm-row { width: 100%; font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 959px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .car-btn.prev { left: 4px; } .car-btn.next { right: 4px; } }
@media (max-width: 599px) { .products, .works { padding-top: 52px; } .product-grid { grid-template-columns: 1fr; } .car-btn { display: none; } .hero-card { aspect-ratio: 5 / 4; } }