/* ==========================================
   REZINA.UZ — HOME (Intro + Hero + About + CTA)
   ========================================== */
:root{
  --yellow:#FFD700; --yellow-dark:#c7a600;
  --rubber-base:#1e1f22; --rubber-deep:#151619;
  --text-strong:#fdfdfd; --text:#e3e3e3; --muted:#b8c3d4;
  --brand:#FFD700; --brand-2:#ffea77; --radius:14px;

  /* Высота шапки для отступа героя прямо под ней */
  --header-h:72px;         /* ПК */
  --header-h-mobile:64px;  /* моб */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background-color:var(--rubber-base);
  background-image:
    radial-gradient(1200px 700px at 20% 25%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 800px at 80% 75%, rgba(255,255,255,.035), rgba(255,255,255,0) 65%),
    radial-gradient(circle, rgba(0,0,0,.40) 24%, rgba(0,0,0,0) 25%),
    radial-gradient(circle, rgba(255,255,255,.09) 28%, rgba(255,255,255,0) 29%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, rgba(0,0,0,0) 2px 8px);
  background-size:cover, cover, 26px 26px, 26px 26px, auto;
  background-position:center, center, 0 0, 0 0, 0 0;
  background-blend-mode:normal, normal, normal, overlay, multiply;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===== INTRO (аура + пульсация логотипа) ===== */
#intro{
  position:fixed; inset:0; z-index:1500;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(560px 360px at 50% 45%, rgba(255,215,0,.18), rgba(255,215,0,0) 70%),
    radial-gradient(115% 140% at 50% 40%, #121417 0%, #0f1114 70%, #0b0d10 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, rgba(0,0,0,0) 2px 8px);
  background-blend-mode:screen, normal, multiply;
  opacity:1; visibility:visible; transition: opacity .35s ease, visibility .35s ease;
}
#intro[aria-hidden="true"]{ opacity:0; visibility:hidden }
.brand{ text-align:center }
.brand-logo{
  width:min(66vw, 620px); height:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.6));
  animation: logoPulse 3.6s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes logoPulse{
  0%   { transform:scale(1);    filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
  50%  { transform:scale(1.06); filter: drop-shadow(0 14px 36px rgba(255,215,0,.70)); }
  100% { transform:scale(1);    filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
}
.tag{ margin-top:10px; color:var(--muted) }
.skip{
  position:absolute; right:16px; bottom:16px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  padding:8px 14px; border-radius:999px; color:#fff; cursor:pointer;
  backdrop-filter: blur(6px);
}

/* ===== HERO LOGO (увеличенный + пульсация + неоновое свечение) ===== */
.hero{
  /* Ставим герой сразу под фиксированной шапкой */
  padding: calc(var(--header-h) + 6px) 20px 72px;
  text-align:center;
  background:transparent;
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.hero-logo{
  margin: 0 auto 12px;         /* ближе текст к лого */
  display:flex; justify-content:center; align-items:center;
}
.hero-logo img{
  width:clamp(440px, 64vw, 840px);
  height:auto;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6))
          drop-shadow(0 0 22px rgba(255,215,0,.5));
  animation: heroPulse 3.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes heroPulse{
  0%{
    transform:scale(1);
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.6))
            drop-shadow(0 0 12px rgba(255,215,0,.25));
  }
  50%{
    transform:scale(1.12);
    filter: drop-shadow(0 0 40px rgba(255,215,0,.8))
            drop-shadow(0 0 18px rgba(255,215,0,.5));
  }
  100%{
    transform:scale(1);
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.6))
            drop-shadow(0 0 12px rgba(255,215,0,.25));
  }
}

/* ===== Заголовки/текст под логотипом ===== */
.hero h1{
  font-size:clamp(28px,5vw,46px);
  margin:0 0 10px;                 /* ближе к лого */
  color:var(--text-strong);
  font-weight:800;
}
.hero p{ color:var(--muted); margin:0 0 16px; line-height:1.5 }

/* ===== ABOUT / CTA / DIVIDER ===== */
.about-brief{ width:min(900px,92vw); margin:24px auto 10px; text-align:center }
.about-brief p{ margin:0 0 10px }

.divider{ width:min(900px,92vw); margin:22px auto; height:1px; background:rgba(255,255,255,.18) }

.btn{ padding:12px 24px; border-radius:12px; text-decoration:none; font-weight:700; display:inline-block }
.btn-primary{
  background:linear-gradient(180deg, var(--yellow), var(--brand-2));
  color:#111; font-weight:800; box-shadow:0 8px 20px rgba(0,0,0,.35)
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.5) }

/* ===== CTA: фикс центрирования ===== */
.cta-pro{
  padding:40px 20px 64px;
  display:flex;                /* центрируем контент секции */
  justify-content:center;      /* по горизонтали */
  align-items:center;          /* по вертикали */
}
.cta-pro__box{
  width:100%;
  max-width:1000px;            /* ширина самого блока */
  margin:0;                    
  text-align:center;
  background:linear-gradient(180deg, #262729, #1e1f22);
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:28px; box-shadow:0 16px 36px rgba(0,0,0,.35)
}
.cta-pro__box h2{ margin:0 0 8px; font-size:24px; color:var(--text-strong) }
.cta-pro__box p{ margin:0 0 16px; color:var(--muted) }

/* ===== SCROLL REVEAL ===== */
.reveal{ opacity:0; transform:translateY(16px) }
.reveal.in{ opacity:1; transform:none; transition:.45s }

/* ===== Мобильные корректировки ===== */
@media (max-width: 720px){
  .hero{
    padding-top: calc(var(--header-h-mobile) + 4px); /* под шапкой на мобиле */
    padding-bottom: 60px;
  }
  .hero-logo{ margin-bottom:8px; }
  .hero-logo img{ width:clamp(300px, 74vw, 500px); }

  .cta-pro{ padding:32px 16px 56px; }
  .cta-pro__box{ max-width:920px; }
}

/* ===== Showcase Carousel ===== */
.carousel{
  max-width:1100px;
  margin:24px auto 28px;
  padding:0 16px;
}
.carousel__viewport{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
}
.carousel__track{
  display:flex; gap:0;
  will-change:transform;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.slide{
  min-width:100%;
  margin:0;
  position:relative;
  display:grid;
  grid-template-rows:auto auto;
}
.slide img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.slide figcaption{
  margin:0; padding:10px 14px; color:var(--text); opacity:.9;
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.06));
  border-top:1px solid rgba(255,255,255,.08);
  font-weight:600; text-align:center;
}

/* ===== Стрелки ===== */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border:1px solid rgba(255,255,255,.25);
  border-radius:50%; background:rgba(0,0,0,.35);
  display:grid; place-items:center; backdrop-filter:blur(4px);
  cursor:pointer; font-size:22px; color:#fff; transition:background .25s;
}
.carousel__btn:hover{ background:rgba(0,0,0,.55) }
.carousel__btn.prev{ left:16px } .carousel__btn.next{ right:16px }

/* ===== Точки ===== */
.carousel__dots{
  display:flex; gap:8px; justify-content:center; margin:12px 0 0;
}
.carousel__dots button{
  width:8px; height:8px; border-radius:50%; border:none;
  background:#888; opacity:.5; cursor:pointer;
}
.carousel__dots button[aria-selected="true"]{ opacity:1; background:#fff }

@media (max-width: 860px){
  .slide img{ height:300px; }
}