:root{
  --teal-700: #156972;
  --teal-800: #0f5a62;
  --navy-900: #0E253E;
  --peach-300: #EDC79B;
  --peach-200: #F2D7B5;
  --bg: #ffffff;
  --text: #081521;
  --muted: #4b5b6a;
  --field-bg: #04282C;
  --field-text: #e9f1f2;
  --btn-bg: #0b3940;
  --btn-text: #ffffff;
  --radius: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.split{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  min-height:100dvh;
}

.left{
  position:relative;
  padding: clamp(24px, 4vw, 48px);
  background:
    linear-gradient(90deg, #ffffff 0 55%, transparent 55%),
    #ffffff;
}

.brand h1{
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--teal-700);
  margin: 8px 0 6px;
  font-size: clamp(28px,4.2vw,44px);
}

.brand .divider{
  display:block;
  width:min(240px, 40%);
  height:6px;
  background: var(--peach-300);
  border-radius: 6px;
}

.photo-card{
  width: min(680px, 92%);
  aspect-ratio: 16/9;
  margin-top: clamp(24px, 6vh, 48px);
  border-radius: 16px;
  background:
    linear-gradient(to bottom, rgba(237,199,155,.9), rgba(237,199,155,.9)) 0 80%/100% 22% no-repeat,
    url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

/* small cube mark bottom-left */
.cp-logo{
  position:absolute;
  left: clamp(18px, 3vw, 36px);
  bottom: clamp(18px, 3vw, 36px);
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--teal-700);
}
.cp-logo small{ color: var(--muted); }
.cp-logo .cube{
  width: 42px; height: 42px; position: relative;
}
.cp-logo .cube span{
  position:absolute; inset:0; border:3px solid var(--teal-700); border-radius: 4px;
  transform: rotate(45deg);
}
.cp-logo .cube span:nth-child(2){ inset:6px; opacity:.7; }
.cp-logo .cube span:nth-child(3){ inset:12px; opacity:.45; }

.right{
  background: var(--teal-700);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(24px, 4vw, 56px);
  position:relative;
}

.logo-wrap{
  position:absolute; right: clamp(20px, 3vw, 40px); top: clamp(18px, 3vw, 32px);
  opacity:.95;
}
.logo-wrap img{
  height: 120px; width:auto; object-fit:contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,.05));
}

.card{
  width: min(560px, 92vw);
  background: rgba(255,255,255, .04);
  backdrop-filter: blur(2px);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 28px);
  color: #eaf5f7;
  box-shadow: 0 14px 48px rgba(0,0,0,.15);
}

.hints{
  display:flex; gap:26px; padding:0; margin:0 0 12px; list-style:none;
}
.hints li{
  display:flex; align-items:center; gap:10px; opacity:.95;
  font-size: clamp(16px, 1.4vw, 20px);
}
.hints img{ width:22px; height:22px; color:#f3d7b6; filter: invert(93%) sepia(12%) saturate(468%) hue-rotate(315deg) brightness(94%) contrast(88%); }

.fields{ display:grid; gap:14px; margin-top:12px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path: inset(50%); }

input[type="text"], input[type="password"]{
  width:100%;
  background: var(--field-bg);
  color: var(--field-text);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 16px 14px;
  font-size: 16px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder{ color: rgba(233,241,242,.75); }
input:focus{ border-color: #f2d7b5; box-shadow: 0 0 0 3px rgba(242,215,181,.25); }

button{
  margin-top: 4px;
  appearance:none;
  border:0;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 14px 18px;
  font-weight: 700;
  letter-spacing:.4px;
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
button:hover{ filter: brightness(1.06); }
button:active{ transform: translateY(1px); }

.note{
  margin-top: 18px;
  background: rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  color: #e6f1f2;
}
.note-head{
  display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.note-head img{ width:20px; height:20px; filter: invert(93%) sepia(12%) saturate(468%) hue-rotate(315deg) brightness(94%) contrast(88%); }
.note p{
  margin:0; opacity:.95; font-style: italic;
}

/* Responsive */
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
  .right{ min-height: 60vh; }
  .left{ min-height: 40vh; }
  .photo-card{ width: 100%; }
  .logo-wrap{ position: static; align-self:flex-end; margin-bottom: 14px; }
}