/* style/landing.css - match the provided mockup */

:root{
  --goldA: rgba(252,211,77,1);
  --goldB: rgba(245,158,11,1);
  --line: rgba(255,255,255,.10);
  --card: rgba(255,255,255,.05);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
}

.page-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 450px at 50% 15%, rgba(255,255,255,.06), transparent 65%),
    radial-gradient(750px 380px at 85% 25%, rgba(245,158,11,.18), transparent 60%),
    radial-gradient(750px 380px at 15% 25%, rgba(245,158,11,.10), transparent 60%),
    radial-gradient(1200px 700px at 50% 65%, rgba(255,255,255,.03), transparent 70%),
    #050505;
}

/* glitter effect using layered tiny radial dots */
.page-bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255,200,80,.7), transparent 55%),
    radial-gradient(2px 2px at 18% 30%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(2px 2px at 75% 20%, rgba(255,200,80,.6), transparent 55%),
    radial-gradient(2px 2px at 82% 32%, rgba(255,255,255,.3), transparent 55%),
    radial-gradient(2px 2px at 66% 44%, rgba(255,200,80,.55), transparent 55%),
    radial-gradient(2px 2px at 28% 48%, rgba(255,255,255,.25), transparent 55%),
    radial-gradient(2px 2px at 40% 18%, rgba(255,200,80,.5), transparent 55%),
    radial-gradient(2px 2px at 55% 28%, rgba(255,255,255,.22), transparent 55%);
  opacity:.9;
  filter: blur(.1px);
}

/* keep content above bg */
.kafxa-wrap{ position: relative; z-index: 1; }

/* --- TOPBAR (matches mockup) --- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
  gap: 12px;
}
.topnav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.top-link{
  color: rgba(255,255,255,.80);
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 10px 6px;
  border-bottom: 2px solid transparent;
}
.top-link:hover{ color: rgba(255,255,255,.95); }
.top-link.active{
  color: rgba(255,255,255,.95);
  border-bottom-color: rgba(245,158,11,.65);
}
.top-cta{
  text-decoration:none;
  background: linear-gradient(180deg, rgba(252,211,77,.95), rgba(245,158,11,.95));
  color:#111;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(245,158,11,.30);
  box-shadow: 0 10px 25px rgba(245,158,11,.18);
}
.top-cta:hover{ filter: brightness(1.03); }

/* --- HERO --- */
.hero{
  text-align:center;
  padding: 22px 0 10px;
}
.brandmark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 6px;
}
.trophy{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  box-shadow: 0 0 30px rgba(245,158,11,.18);
}
.kafxa-title{
  font-size: 42px;
  font-weight: 1000;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(180deg, rgba(252,211,77,1), rgba(245,158,11,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 760px){
  .kafxa-title{ font-size: 52px; }
}

.hero-h1{
  margin: 18px auto 0;
  max-width: 20ch;
  font-size: 34px;
  font-weight: 950;
  line-height: 1.1;
}
.hero-h1 .gold{
  background: linear-gradient(180deg, rgba(252,211,77,1), rgba(245,158,11,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.hero-sub{
  margin: 10px auto 0;
  max-width: 62ch;
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.6;
}

.hero-btn{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(252,211,77,.95), rgba(245,158,11,.95));
  color:#111;
  font-weight: 900;
  border-radius: 14px;
  padding: 12px 18px;
  text-decoration:none;
  border: 1px solid rgba(245,158,11,.30);
  box-shadow: 0 14px 35px rgba(245,158,11,.16);
}
.hero-btn:hover{ filter: brightness(1.03); }

.hero-tabs{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 760px){
  .hero-tabs{ grid-template-columns: repeat(3, 1fr); }
}
.tab-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.tab-btn:hover{
  border-color: rgba(245,158,11,.25);
  background: rgba(255,255,255,.06);
}
.tab-ico{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.22);
}

/* --- NOMINATION PANEL --- */
.section-title{
  text-align:center;
  margin: 26px 0 6px;
  font-size: 30px;
  font-weight: 950;
}
.section-sub{
  text-align:center;
  margin: 0 auto 14px;
  max-width: 70ch;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

.nom-card{
  max-width: 760px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 60px rgba(0,0,0,.45);
  padding: 18px;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

.field label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline:none;
}
.field textarea{ min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(245,158,11,.35);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}

.file-row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
}
.file-row .hint{
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

.submit-wrap{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items:center;
}
.submit-btn{
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(245,158,11,.30);
  background: linear-gradient(180deg, rgba(252,211,77,.95), rgba(245,158,11,.95));
  color: #111;
  font-weight: 950;
  cursor:pointer;
  box-shadow: 0 14px 35px rgba(245,158,11,.16);
}
.submit-btn:hover{ filter: brightness(1.03); }

.status{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}
.status.ok{ color: rgba(34,197,94,.95); }
.status.err{ color: rgba(239,68,68,.95); }

/* Fix dropdown colors across browsers */
.field select{
  background: rgba(0,0,0,.65) !important;
  color: rgba(255,255,255,.92) !important;
}

.field select option{
  background: #0b0b0b !important;
  color: #ffffff !important;
}

/* Side wing ornaments */
.wing{
  position: fixed;
  top: 120px;
  width: min(320px, 28vw);
  height: auto;
  opacity: .85;
  z-index: 0;               /* behind page content */
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(245,158,11,.10));
}

.wing-left{ left: -30px; }
.wing-right{ right: -30px; }

@media (max-width: 640px){
  .wing{
    top: 170px;
    width: 220px;
    opacity: .65;
  }
  .wing-left{ left: -70px; }
  .wing-right{ right: -70px; }
}



.soc-disabled{opacity:.35; border-style:dashed; cursor:not-allowed;}