:root {
  --bg-color: #100904;
  --text-color: #ffedd7;
  --divider-color: #40372e;
  --filled-bg: #382416;
  --accent-color: #dc5000;
  --muted-color: #6c5f51;
  --font-family: 'Heebo', 'Jost', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-family); font-size: 14px; line-height: 1.33; overflow-x: hidden; }
h1, h2, h3 { font-weight: 500; }
.text-10 { font-size: 10px; line-height: 1.2; }
.text-14 { font-size: 14px; line-height: 1.33; }
.text-18 { font-size: 18px; line-height: 1.2; }
.text-24 { font-size: 24px; line-height: 1.1; }
.text-29 { font-size: 29px; line-height: 1.09; }
.text-41 { font-size: 41px; line-height: 1; }
.text-51 { font-size: 51px; line-height: 0.9; }
.text-tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-color); }
.accent { color: var(--accent-color); }
a { color: var(--text-color); text-decoration: none; border-bottom: 1px solid var(--accent-color); }
.btn-pill { background-color: var(--filled-bg); color: var(--text-color); border: none; border-radius: 36px; padding: 14.4px 24px; font-family: var(--font-family); font-size: 14px; cursor: pointer; transition: opacity 0.3s ease; }
.btn-pill:hover { opacity: 0.8; }
.btn-ghost { background-color: transparent; color: var(--text-color); border: 1px solid var(--text-color); border-radius: 22.5px; padding: 7.5px 16px; font-family: var(--font-family); font-size: 12px; cursor: pointer; transition: border-color 0.3s ease; }
.btn-ghost:hover { border-color: var(--accent-color); }
.ghost-input { background: transparent; color: var(--text-color); border: none; border-bottom: 1px solid var(--text-color); border-radius: 0; padding: 1px 36px 1px 2px; font-family: var(--font-family); font-size: 14px; outline: none; }
.ghost-input::placeholder { color: rgba(255, 237, 215, 0.4); }
.divider { border-top: 1px dashed var(--divider-color); width: 100%; margin: 80px 0; }
section { padding: 80px 24px; min-height: 100vh; display: flex; flex-direction: column; }
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px dashed var(--divider-color); }
.lang-selector { background: transparent; color: var(--text-color); border: 1px solid var(--text-color); font-family: var(--font-family); border-radius: 0; padding: 4px; }
.lang-selector option { background: var(--bg-color); color: var(--text-color); }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(200px, auto)); gap: 0; border-top: 1px dashed var(--divider-color); border-left: 1px dashed var(--divider-color); margin-top: 40px; }
.hero-grid > div { border-right: 1px dashed var(--divider-color); border-bottom: 1px dashed var(--divider-color); position: relative; overflow: hidden; min-height: 300px; }
@media (max-width: 1280px) { .hero-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(200px, auto)); } }
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(200px, auto)); }
  .hero-slider-cell { grid-column: span 2; grid-row: 3; }
}
@media (max-width: 480px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(200px, auto)); }
  .hero-slider-cell { grid-column: span 1; grid-row: auto; }
}
.hero-slider-cell { grid-column: span 2; position: relative; }
.slider-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; touch-action: none; }
.slider-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.slider-handle { position: absolute; top: 0; bottom: 0; width: 2px; background-color: var(--text-color); cursor: ew-resize; z-index: 10; left: 50%; transform: translateX(-50%); }
.slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: var(--text-color); border-radius: 50%; }
.vertical-label { position: fixed; right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; font-size: 10px; letter-spacing: 0.1em; color: var(--text-color); z-index: 100; }
[dir="rtl"] .vertical-label { right: auto; left: 10px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
#panel { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-color); z-index: 1000; overflow-y: auto; padding: 24px; }
#panel.active { display: flex; }
.panel-layout { display: flex; gap: 24px; width: 100%; height: 100%; }
.panel-controls { flex: 0 0 350px; overflow-y: auto; border-right: 1px dashed var(--divider-color); padding-right: 24px; }
[dir="rtl"] .panel-controls { border-right: none; border-left: 1px dashed var(--divider-color); padding-right: 0; padding-left: 24px; }
.panel-preview { flex: 1; display: flex; flex-direction: column; position: relative; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.chat-widget { position: fixed; bottom: 24px; left: 24px; z-index: 500; }
[dir="rtl"] .chat-widget { left: auto; right: 24px; }
.chat-panel { display: none; position: absolute; bottom: 60px; left: 0; width: 320px; height: 400px; background: var(--bg-color); border: 1px solid var(--text-color); border-radius: 12px; flex-direction: column; }
[dir="rtl"] .chat-panel { left: auto; right: 0; }
.chat-panel.active { display: flex; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;}
.chat-input-area { border-top: 1px dashed var(--divider-color); padding: 12px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; }
.chip { font-size: 10px; cursor: pointer; padding: 4px 8px; border: 1px solid var(--muted-color); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { border-bottom: 1px dashed var(--divider-color); padding: 8px 4px; text-align: left; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }