*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#070b10;
  --panel:#0c1315;
  --gold:#e6c06a;
  --gold2:#f5dea0;
  --text:#fffaf0;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.16);
  --error:#ff8e8e;
  --ok:#8ee6ae;
}
html{
  background:var(--ink);
  scroll-behavior:smooth;
  min-height:100%;
}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
button,input{font:inherit}
button{border:0}

.scroll-container {
  min-height: 100vh;
  overflow: visible;
  scroll-behavior: smooth;
  background: var(--ink);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
}

.video-showcase{
  position:relative;
  min-height:100svh;
  background:#05080c;
}

.video-stage{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:#05080c;
  isolation:isolate;
}

.scene-section {
  position: absolute;
  inset:0;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #05080c;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  will-change:opacity,transform;
}

.scene-section.active{
  opacity:1;
  visibility:visible;
}

.scene-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 74% 20%, rgba(230, 192, 106, 0.15), transparent 35%),
    linear-gradient(90deg, rgba(7, 11, 16, 0.85) 0%, rgba(7, 11, 16, 0.55) 45%, rgba(7, 11, 16, 0.25) 100%),
    linear-gradient(0deg, rgba(7, 11, 16, 0.9) 0%, transparent 50%, rgba(7, 11, 16, 0.4) 100%);
  pointer-events: none;
}

.scene-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 85%);
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 1.8s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px clamp(18px, 3vw, 42px);
  background: linear-gradient(to bottom, rgba(7, 11, 16, 0.85), transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
}

.brand-logo {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(230, 192, 106, .34);
  background: #fff;
  box-shadow: 0 18px 42px rgba(230, 192, 106, .24);
}

.brand-logo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  padding: 0;
}

.logo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #182019;
  font-weight: 900;
  opacity: 0;
}

.brand-logo.broken img { display: none }
.brand-logo.broken .logo-fallback { opacity: 1 }

.brand-copy strong {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 18px;
  line-height: 1;
}

.brand-copy small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.login-jump {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  background: rgba(0, 0, 0, .32);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.login-jump:hover { border-color: rgba(230, 192, 106, .72); color: var(--gold2); transform: translateY(-1px) }

.scene-copy {
  position: absolute;
  left: clamp(24px, 8vw, 120px);
  right: clamp(24px, 8vw, 120px);
  bottom: clamp(100px, 15vh, 180px);
  z-index: 3;
  max-width: 850px;
}

.scene-copy p {
  margin: 0 0 16px;
  color: var(--gold2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.scene-copy h1 {
  margin: 0;
  max-width: 900px;
  font-family: "Playfair Display", serif;
  font-size: clamp(54px, 8.2vw, 126px);
  line-height: .88;
  letter-spacing: 0;
  text-shadow: 0 28px 80px rgba(0, 0, 0, .68);
}

.scene-copy span {
  display: block;
  max-width: 620px;
  margin-top: 26px;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.75;
}

.scene-controls {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: rgba(7, 11, 16, 0.45);
  padding: 16px 8px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.scene-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: all 0.25s ease;
  line-height: 1;
}

.scene-arrow:hover { border-color: rgba(230, 192, 106, .72); color: var(--gold2); transform: scale(1.08) }

.scene-dots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.scene-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: height .25s, background .25s;
}

.scene-dots button.active {
  height: 26px;
  width: 8px;
  background: var(--gold);
}

.scene-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 105;
  height: 3px;
  background: rgba(255, 255, 255, .08);
}

.scene-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  animation: pulse-scroll 2.5s infinite ease-in-out;
  pointer-events: none;
}

.scroll-indicator span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mouse-icon {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.mouse-icon .wheel {
  width: 3px;
  height: 7px;
  background-color: var(--gold);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 1.6s infinite ease-in-out;
}

@keyframes scroll-wheel {
  0% { top: 6px; opacity: 1; }
  50% { top: 14px; opacity: 0.2; }
  100% { top: 6px; opacity: 1; }
}

@keyframes pulse-scroll {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

.auth-section {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 104px clamp(18px, 4vw, 58px) 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 64% 18%, rgba(230, 192, 106, .18), transparent 28%),
    linear-gradient(145deg, #28141c 0%, #12251f 44%, #071013 100%);
}

.auth-bg {
  position: absolute;
  inset: 0;
  opacity: .7;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:76px 76px;
}
.login-card{
  position:relative;
  z-index:2;
  width:min(100%,470px);
  padding:34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075));
  box-shadow:0 26px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.login-head p{
  margin:0;
  color:var(--gold2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.login-head h2{
  margin:12px 0 0;
  font-family:"Playfair Display",serif;
  font-size:clamp(36px,4vw,54px);
  line-height:.98;
}
.login-head span{
  display:block;
  margin-top:15px;
  color:rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.65;
}
.field{
  display:block;
  margin-top:18px;
}
.field>span{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.64);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.field input{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  outline:none;
  color:#fff;
  background:rgba(4,8,10,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
}
.field input::placeholder{color:rgba(255,255,255,.34)}
.field input:focus{
  border-color:rgba(230,192,106,.82);
  background:rgba(4,8,10,.58);
  box-shadow:0 0 0 4px rgba(230,192,106,.13),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.field small{
  display:none;
  margin-top:7px;
  color:var(--error);
  font-size:12px;
}
.field.error small{display:block}
.password-wrap{position:relative}
.password-wrap input{padding-right:52px}
.eye-btn{
  position:absolute;
  right:10px;
  top:50%;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:rgba(255,255,255,.62);
  background:transparent;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .18s,color .18s;
}
.eye-btn:hover{background:rgba(255,255,255,.1);color:var(--gold2)}
.eye-btn svg{width:19px;height:19px}
.remember-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.5;
  cursor:pointer;
}
.remember-row input{
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:#e6c06a;
}
.save-note{
  margin:11px 0 0;
  color:rgba(255,255,255,.48);
  font-size:12px;
  line-height:1.55;
}
.submit-btn{
  position:relative;
  width:100%;
  min-height:56px;
  margin-top:22px;
  border-radius:17px;
  overflow:hidden;
  color:#111813;
  background:linear-gradient(135deg,#fff0b8,#e6c06a 52%,#b58231);
  box-shadow:0 18px 42px rgba(230,192,106,.27);
  cursor:pointer;
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 24px 56px rgba(230,192,106,.35);filter:saturate(1.05)}
.submit-btn:disabled{cursor:wait;opacity:.78}
.btn-loader{
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  border:2px solid rgba(17,24,19,.25);
  border-top-color:#111813;
  border-radius:50%;
  animation:spin .75s linear infinite;
}
.submit-btn.loading .btn-label{opacity:0}
.submit-btn.loading .btn-loader{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.status{
  display:none;
  margin-top:15px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  color:rgba(255,255,255,.78);
  background:rgba(0,0,0,.24);
  font-size:13px;
  line-height:1.5;
}
.status.show{display:block}
.status.ok{color:var(--ok);border-color:rgba(142,230,174,.38)}
.status.err{color:var(--error);border-color:rgba(255,142,142,.38)}
@media (max-width: 1020px){
  .auth-section{padding:90px 18px 44px}
  .scene-copy{
    left:24px;
    right:24px;
    bottom:96px;
  }
  .scene-copy h1{font-size:clamp(44px,10vw,78px)}
  .scene-controls{
    right:12px;
    padding:12px 6px;
  }
  .scene-arrow{
    width:28px;
    height:28px;
    font-size:14px;
  }
  .scene-dots button{
    width:6px;
    height:6px;
  }
  .scene-dots button.active{
    height:18px;
    width:6px;
  }
}
@media (max-width: 640px){
  .site-header{
    padding:12px 14px;
    gap:10px;
    background:linear-gradient(to bottom, rgba(7,11,16,.92), rgba(7,11,16,.32), transparent);
  }
  .brand{gap:9px;min-width:0}
  .brand-logo{width:42px;height:42px;border-radius:12px;flex:0 0 auto}
  .brand-copy{min-width:0}
  .brand-copy strong{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
  }
  .brand-copy small{display:none}
  .login-jump{
    min-height:36px;
    padding:0 12px;
    font-size:10px;
    letter-spacing:.1em;
    flex:0 0 auto;
  }
  .scene-copy{
    left:18px;
    right:18px;
    bottom:118px;
    max-width:calc(100vw - 36px);
  }
  .scene-copy p{font-size:10px;margin-bottom:8px}
  .scene-copy h1{font-size:clamp(36px,11vw,52px);line-height:.94}
  .scene-copy span{margin-top:12px;font-size:13px;line-height:1.65}
  .scene-controls{
    left:50%;
    right:auto;
    top:auto;
    bottom:22px;
    transform:translateX(-50%);
    flex-direction:row;
    gap:12px;
    padding:8px 12px;
    border-radius:999px;
  }
  .scene-dots{flex-direction:row;gap:8px}
  .scene-dots button{width:7px;height:7px}
  .scene-dots button.active{width:24px;height:7px}
  .scene-arrow{width:34px;height:34px;font-size:20px}
  .scroll-indicator{display:none}
  .auth-section{
    min-height:100svh;
    align-items:center;
    padding:86px 14px 34px;
  }
  .login-card{padding:24px 20px;border-radius:22px}
  .login-head h2{font-size:34px}
  .field input{min-height:50px}
}
@media (max-width: 390px){
  .brand-copy strong{max-width:118px}
  .login-jump{padding:0 10px}
  .scene-copy h1{font-size:34px}
  .login-card{padding:22px 16px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}