/* Окна Учалы — Премиальный дизайн 2026 */
:root {
  /* Палитра — тёплые нейтральные с акцентом */
  --bg-page: oklch(97% 0.008 72);
  --bg-glass: oklch(99% 0.003 72 / 0.88);
  --bg-panel: oklch(98.5% 0.006 72);
  --bg-dark: oklch(14% 0.012 240);
  --text: oklch(22% 0.015 240);
  --text-muted: oklch(48% 0.010 240);
  --accent: oklch(62% 0.220 26);    /* тёплый янтарь */
  --accent-2: oklch(55% 0.140 200); /* стальной синий */
  --border: oklch(86% 0.008 72);

  /* Тени */
  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.12), 0 2px 4px oklch(0% 0 0 / 0.08);
  --shadow-lg: 0 20px 40px oklch(0% 0 0 / 0.16), 0 8px 16px oklch(0% 0 0 / 0.12);
  --shadow-glass: 0 8px 32px oklch(0% 0 0 / 0.12);

  /* Fluid типографика */
  --text-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:  clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base:clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-lg:  clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --text-xl:  clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.52rem + 1.16vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.84rem + 2.05vw, 3.5rem);

  /* Отступы */
  --gap-2: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --gap-3: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --gap-4: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  --gap-6: clamp(1.5rem, 1.32rem + 0.9vw, 2.125rem);
  --gap-8: clamp(2rem, 1.72rem + 1.4vw, 3rem);
  --gap-12: clamp(3rem, 2.52rem + 2.4vw, 4.75rem);
  --gap-16: clamp(4rem, 3.28rem + 3.6vw, 6.5rem);

  /* Радиусы */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Анимации */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Сброс + базовые */
*,::before,::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--text);
  background:var(--bg-page);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:800;line-height:1.2;letter-spacing:-0.02em;color:var(--bg-dark);}
h1{font-size:var(--text-3xl);margin-bottom:var(--gap-4);}
h2{font-size:var(--text-2xl);margin-bottom:var(--gap-3);}
h3{font-size:var(--text-xl);margin-bottom:var(--gap-3);}
a{color:var(--accent);text-decoration:none;transition:color 0.24s var(--ease-out);}
a:hover{color:var(--accent-2);}
img{max-width:100%;height:auto;display:block;}
button,input,textarea,select{font:inherit;color:inherit;}

/* Контейнер */
.container{
  max-width:min(1280px, calc(100% - 2rem));
  margin-inline:auto;
  padding-inline:var(--gap-4);
}

/* Шапка */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:var(--shadow-glass);
  border-bottom:1px solid var(--border);
  transition:transform 0.32s var(--ease-out);
}
.header.hidden{transform:translateY(-100%);}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:var(--gap-3);
  max-width:1280px;
  margin-inline:auto;
  padding-inline:var(--gap-4);
}
.logo{
  display:flex;
  align-items:center;
  gap:var(--gap-2);
  font-size:var(--text-xl);
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--bg-dark);
  transition:transform 0.24s var(--ease-out);
}
.logo:hover{transform:scale(1.02);}
.logo-icon{
  width:42px;
  height:42px;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid;
  place-items:center;
  font-size:22px;
  box-shadow:var(--shadow-md);
}
.nav{display:flex;gap:var(--gap-6);align-items:center;}
.nav a{
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--text-muted);
  position:relative;
}
.nav a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:50%;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width 0.28s var(--ease-out), left 0.28s var(--ease-out);
}
.nav a:hover::after,
.nav a.active::after{width:100%;left:0;}
.phone{
  font-size:var(--text-base);
  font-weight:700;
  color:var(--bg-dark);
}
.burger{
  display:none;
  width:28px;
  height:20px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.burger span{display:block;width:100%;height:2px;background:var(--text);transition:0.3s;}
@media(max-width:900px){
  .nav{display:none;}
  .burger{display:flex;}
  .phone{font-size:var(--text-sm);}
}

/* Hero — окно с анимацией */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding-top:100px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, var(--bg-page) 0%, oklch(95% 0.01 72) 100%);
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:720px;
  text-align:center;
  padding:var(--gap-8);
}
.hero h1{
  font-size:var(--text-3xl);
  margin-bottom:var(--gap-4);
  line-height:1.1;
}
.hero p{
  font-size:var(--text-lg);
  color:var(--text-muted);
  margin-bottom:var(--gap-6);
}
.hero .btn{
  font-size:var(--text-lg);
  padding:var(--gap-3) var(--gap-8);
  background:var(--accent);
  color:#fff;
  border-radius:var(--r-full);
  font-weight:700;
  box-shadow:var(--shadow-lg);
  transition:transform 0.24s var(--ease-out), box-shadow 0.24s;
  display:inline-block;
}
.hero .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 48px oklch(62% 0.220 26 / 0.28);
}

/* 3D-окно с открывающейся створкой */
.window-3d{
  position:absolute;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  width:clamp(320px, 40vw, 480px);
  height:clamp(420px, 52vw, 640px);
  perspective:1400px;
  z-index:1;
}
.window-frame{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}
.window-glass{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, oklch(98% 0.01 200 / 0.6), oklch(96% 0.015 200 / 0.7));
  backdrop-filter:blur(8px);
  border:12px solid oklch(88% 0.02 72);
  border-radius:var(--r-md);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.3),
    0 24px 60px oklch(0% 0 0 / 0.2);
  overflow:hidden;
}
.window-glass::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('/assets/img/photos/hero-view.jpg') center/cover;
  opacity:0.85;
}
.window-sash{
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background:linear-gradient(135deg, oklch(98% 0.008 200 / 0.92), oklch(96% 0.012 200 / 0.88));
  backdrop-filter:blur(12px);
  border-left:8px solid oklch(88% 0.02 72);
  border-top:12px solid oklch(88% 0.02 72);
  border-right:12px solid oklch(88% 0.02 72);
  border-bottom:12px solid oklch(88% 0.02 72);
  box-shadow:
    -8px 0 24px oklch(0% 0 0 / 0.16),
    inset 0 0 0 1px oklch(100% 0 0 / 0.2);
  transform-origin:left center;
  transform:rotateY(0deg);
  transition:transform 1.2s var(--ease-in-out);
  border-radius:0 var(--r-md) var(--r-md) 0;
  overflow:hidden;
}
.window-sash::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('/assets/img/photos/hero-behind.jpg') center/cover;
  opacity:0.7;
}
.window-sash.open{
  transform:rotateY(-92deg);
}
.window-handle{
  position:absolute;
  left:16px;
  top:50%;
  width:8px;
  height:48px;
  background:oklch(72% 0.02 72);
  border-radius:4px;
  transform:translateY(-50%);
  box-shadow:0 2px 6px oklch(0% 0 0 / 0.3);
}
@media(max-width:900px){
  .window-3d{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    margin:var(--gap-8) auto;
    width:min(90%, 360px);
    height:480px;
  }
}

/* Секции */
.section{
  padding-block:var(--gap-16);
  position:relative;
}
.section-title{
  text-align:center;
  margin-bottom:var(--gap-12);
}
.section-title h2{
  font-size:var(--text-2xl);
  margin-bottom:var(--gap-2);
}
.section-title p{
  font-size:var(--text-base);
  color:var(--text-muted);
}

/* Карточки каталога */
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--gap-6);
}
.product-card{
  background:var(--bg-panel);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform 0.32s var(--ease-out), box-shadow 0.32s;
  position:relative;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
.product-image{
  aspect-ratio:1;
  overflow:hidden;
  position:relative;
  background:var(--bg-page);
}
.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s var(--ease-out);
}
.product-card:hover .product-image img{
  transform:scale(1.08);
}
.product-badge{
  position:absolute;
  top:var(--gap-3);
  left:var(--gap-3);
  background:var(--accent);
  color:#fff;
  padding:var(--gap-2) var(--gap-3);
  border-radius:var(--r-full);
  font-size:var(--text-xs);
  font-weight:700;
  box-shadow:var(--shadow-md);
}
.product-body{
  padding:var(--gap-4);
}
.product-brand{
  font-size:var(--text-xs);
  color:var(--text-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:var(--gap-2);
}
.product-name{
  font-size:var(--text-lg);
  font-weight:700;
  margin-bottom:var(--gap-2);
  color:var(--bg-dark);
}
.product-desc{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin-bottom:var(--gap-3);
}
.product-specs{
  display:flex;
  gap:var(--gap-4);
  margin-bottom:var(--gap-4);
  font-size:var(--text-sm);
}
.spec{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.spec-label{
  color:var(--text-muted);
  font-size:var(--text-xs);
}
.spec-value{
  font-weight:700;
  color:var(--bg-dark);
}
.product-link{
  display:inline-flex;
  align-items:center;
  gap:var(--gap-2);
  font-weight:600;
  font-size:var(--text-sm);
}

/* Стеклянные панели */
.glass-panel{
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--gap-6);
  box-shadow:var(--shadow-md);
}

/* Форма */
.form-tabs{
  display:flex;
  gap:var(--gap-2);
  margin-bottom:var(--gap-6);
  border-bottom:2px solid var(--border);
}
.form-tab{
  flex:1;
  padding:var(--gap-3);
  text-align:center;
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--text-muted);
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:0.24s;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.form-tab:hover{background:var(--bg-page);}
.form-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.form-grid{
  display:grid;
  gap:var(--gap-4);
}
.form-field label{
  display:block;
  font-size:var(--text-sm);
  font-weight:600;
  margin-bottom:var(--gap-2);
  color:var(--text);
}
.form-field input,
.form-field textarea{
  width:100%;
  padding:var(--gap-3);
  border:2px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  transition:border-color 0.24s, box-shadow 0.24s;
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px oklch(62% 0.220 26 / 0.12);
}
.btn{
  padding:var(--gap-3) var(--gap-6);
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--r-full);
  font-weight:700;
  font-size:var(--text-base);
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:transform 0.24s var(--ease-out), box-shadow 0.24s;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.btn:active{
  transform:translateY(0);
}

/* Подвал */
.footer{
  background:var(--bg-dark);
  color:oklch(82% 0.008 240);
  padding-block:var(--gap-12);
}
.footer a{
  color:oklch(88% 0.01 240);
}
.footer a:hover{
  color:var(--accent);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--gap-8);
  margin-bottom:var(--gap-8);
}
.footer-col h4{
  font-size:var(--text-base);
  font-weight:700;
  margin-bottom:var(--gap-3);
  color:#fff;
}
.footer-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--gap-2);
}
.footer-bottom{
  border-top:1px solid oklch(26% 0.012 240);
  padding-top:var(--gap-6);
  text-align:center;
  font-size:var(--text-sm);
  color:var(--text-muted);
}

/* Анимации появления */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
.reveal{
  opacity:0;
  animation:fadeInUp 0.8s var(--ease-out) forwards;
}
.reveal.visible{
  opacity:1;
}