/* Aurrum Careers — Coming Soon splash. Colors sampled from the real logo. */

:root{
  --cs-bg:#0A1114;
  --cs-surface:#12191D;
  --cs-ink:#F8F8F8;
  --cs-ink-dim:#B7BDBB;
  --cs-accent:#A88850;
  --cs-accent-dim:rgba(168,136,80,0.32);
  --cs-teal:#085068;
  --cs-teal-dim:rgba(8,80,104,0.35);
  --cs-radius-pill:999px;
  --cs-radius-md:14px;
}

html{ background:var(--cs-bg); }

body.cs-body{
  margin:0;
  background:var(--cs-bg);
  color:var(--cs-ink);
  font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.cs-body *{ box-sizing:border-box; }

.cs-stage{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:clamp(48px, 9vw, 96px) clamp(24px, 8vw, 8vw);
  max-width:1800px;
  margin:0 auto;
}

.cs-glow{
  position:absolute;
  top:50%;
  right:-12%;
  width:56vw;
  height:56vw;
  max-width:900px;
  max-height:900px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(168,136,80,0.22) 0%, rgba(168,136,80,0.07) 42%, rgba(168,136,80,0) 68%),
    radial-gradient(circle at 65% 65%, rgba(8,80,104,0.28) 0%, rgba(8,80,104,0.09) 45%, rgba(8,80,104,0) 72%);
  pointer-events:none;
  animation:cs-pulse 8s ease-in-out infinite;
}

@keyframes cs-pulse{
  0%, 100% { opacity:0.85; transform:translateY(-50%) scale(1); }
  50% { opacity:1; transform:translateY(-50%) scale(1.06); }
}

.cs-container{
  position:relative;
  z-index:1;
  max-width:640px;
  width:100%;
  opacity:0;
  transform:translateY(14px);
  animation:cs-in 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}

@keyframes cs-in{
  to { opacity:1; transform:translateY(0); }
}

.cs-mark{
  margin-bottom:clamp(36px, 7vw, 64px);
}

.cs-logo{
  display:block;
  height:clamp(44px, 6vw, 60px);
  width:auto;
  max-width:100%;
}

.cs-headline{
  margin:0 0 clamp(18px, 3vw, 28px);
  font-family:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(32px, 6.5vw, 64px);
  line-height:1.06;
  letter-spacing:-0.01em;
  color:var(--cs-ink);
}

.cs-gold{
  color:var(--cs-accent);
}

.cs-sub{
  margin:0 0 clamp(24px, 4vw, 40px);
  max-width:52ch;
  font-size:clamp(15px, 1.6vw, 18px);
  line-height:1.65;
  color:var(--cs-ink-dim);
}

.cs-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:clamp(20px, 3vw, 36px);
  padding:clamp(16px, 2.5vw, 22px) clamp(16px, 2.5vw, 24px);
  background:var(--cs-surface);
  border:1px solid var(--cs-accent-dim);
  border-left:3px solid var(--cs-teal);
  border-radius:var(--cs-radius-md);
}

.cs-panel--success p{
  margin:0;
  color:var(--cs-ink);
  font-size:15.5px;
}

.cs-label{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--cs-ink-dim);
}

.cs-field-row{
  display:flex;
  gap:10px;
}

.cs-input{
  flex:1;
  min-width:0;
  padding:13px 20px;
  background:transparent;
  border:1px solid var(--cs-accent-dim);
  border-radius:var(--cs-radius-pill);
  color:var(--cs-ink);
  font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size:15px;
}

.cs-input::placeholder{ color:#6d7472; }

.cs-input:focus{
  outline:none;
  border-color:var(--cs-accent);
  box-shadow:0 0 0 3px var(--cs-accent-dim);
}

.cs-btn{
  padding:13px 26px;
  background:var(--cs-accent);
  color:var(--cs-bg);
  border:none;
  border-radius:var(--cs-radius-pill);
  font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  white-space:nowrap;
  flex:none;
}

.cs-btn:hover{ filter:brightness(1.1); }

.cs-error{
  margin:2px 0 0;
  font-size:13.5px;
  color:#E8B4B4;
}

.cs-contact{
  margin:0;
  font-size:14.5px;
  color:var(--cs-ink-dim);
}

.cs-contact a{
  color:var(--cs-accent);
  text-decoration:none;
  border-bottom:1px solid var(--cs-accent-dim);
}

.cs-contact a:hover{ border-bottom-color:var(--cs-accent); }

/* Small laptop / tablet landscape */
@media (max-width: 1024px){
  .cs-glow{
    width:62vw;
    height:62vw;
    right:-16%;
  }
}

/* Tablet portrait */
@media (max-width: 768px){
  .cs-stage{
    align-items:flex-start;
    padding-top:clamp(64px, 12vw, 88px);
  }

  .cs-glow{
    width:90vw;
    height:90vw;
    right:-24%;
    top:6%;
    transform:none;
  }

  .cs-container{
    max-width:100%;
  }
}

/* Phones */
@media (max-width: 640px){
  .cs-stage{
    padding-left:24px;
    padding-right:24px;
  }

  .cs-glow{
    width:130vw;
    height:130vw;
    right:-30%;
    top:10%;
  }

  .cs-logo{
    height:38px;
  }

  .cs-field-row{
    flex-direction:column;
  }

  .cs-btn{
    width:100%;
  }

  .cs-contact{
    font-size:14px;
  }
}

/* Small phones */
@media (max-width: 380px){
  .cs-stage{
    padding-left:18px;
    padding-right:18px;
  }

  .cs-mark{
    margin-bottom:28px;
  }

  .cs-logo{
    height:32px;
  }

  .cs-panel{
    padding:14px;
  }
}

/* Short viewports (landscape phones / small laptops) */
@media (max-height: 560px){
  .cs-stage{
    align-items:center;
    padding-top:clamp(32px, 6vh, 56px);
    padding-bottom:clamp(32px, 6vh, 56px);
  }

  .cs-mark{
    margin-bottom:20px;
  }

  .cs-headline{
    margin-bottom:14px;
  }

  .cs-sub{
    margin-bottom:20px;
  }

  .cs-panel{
    margin-bottom:16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .cs-glow{ animation:none; }
  .cs-container{ animation:none; opacity:1; transform:none; }
}