*{box-sizing:border-box;margin:0;padding:0}

:root{
  --yellow:#ffd400;
  --yellow-soft:#ffe566;
  --cyan:#43cdea;
  --black:#060708;
  --panel:#0e1012;
  --panel-2:#14171a;
  --panel-3:#090b0d;
  --white:#f6f6f2;
  --muted:#979ba1;
  --border:rgba(255,255,255,.08);
  --yellow-border:rgba(255,212,0,.18);
  --green:#55da91;
  --red:#ff7979;
}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 80% 0,rgba(255,212,0,.055),transparent 27%),
    linear-gradient(180deg,#070809,#050607);
}

a{text-decoration:none;color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px clamp(20px,5vw,72px);
  background:rgba(6,7,8,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}

.site-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-emblem{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:var(--yellow);
  font-weight:900;
  background:linear-gradient(145deg,rgba(255,212,0,.09),rgba(67,205,234,.04));
  border:1px solid var(--yellow-border);
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-text strong{
  font-size:.86rem;
  letter-spacing:.06em;
}

.brand-text small{
  color:#72767c;
  font-size:.68rem;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:34px;
}

.site-nav a{
  color:#cfd1d3;
  font-size:.86rem;
  font-weight:800;
  transition:.2s;
}

.site-nav a:hover{color:var(--yellow)}

.site-nav .admin-nav{
  padding:10px 19px;
  color:#080808;
  background:var(--yellow);
  border-radius:999px;
  box-shadow:0 8px 26px rgba(255,212,0,.12);
}

/* HOME */
.home-hero{
  position:relative;
  min-height:650px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:
    radial-gradient(circle at 73% 42%,rgba(67,205,234,.11),transparent 22%),
    radial-gradient(circle at 74% 43%,rgba(255,212,0,.06),transparent 10%),
    linear-gradient(145deg,#07090b 0%,#091019 55%,#060708 100%);
}

.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  background-image:
    linear-gradient(rgba(67,205,234,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(67,205,234,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,#000,transparent 95%);
}

.hero-noise{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 30%,rgba(255,212,0,.05),transparent 20%),
    radial-gradient(circle at 88% 20%,rgba(67,205,234,.045),transparent 18%);
}

.hero-shell{
  position:relative;
  z-index:2;
  width:min(1260px,calc(100% - 44px));
  min-height:650px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:80px;
}

.hero-chip{
  display:inline-flex;
  padding:7px 10px;
  margin-bottom:18px;
  color:var(--yellow);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.15em;
  border:1px solid rgba(255,212,0,.16);
  border-radius:999px;
  background:rgba(255,212,0,.045);
}

.hero-copy-block h1{
  max-width:720px;
  margin-bottom:22px;
  font-size:clamp(3.6rem,7vw,6.6rem);
  line-height:.95;
  letter-spacing:-.055em;
}

.hero-copy-block h1 span{
  color:var(--yellow);
}

.hero-copy-block>p{
  max-width:650px;
  margin-bottom:28px;
  color:#b9bdc3;
  line-height:1.75;
  font-size:1rem;
}

.hero-actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-bottom:34px;
}

.action-primary,
.action-secondary{
  min-width:190px;
  padding:14px 22px;
  text-align:center;
  border-radius:11px;
  font-size:.86rem;
  font-weight:900;
  transition:.18s;
}

.action-primary{
  color:#080808;
  background:var(--yellow);
  box-shadow:0 10px 30px rgba(255,212,0,.12);
}

.action-secondary{
  color:var(--cyan);
  border:1px solid rgba(67,205,234,.22);
  background:rgba(6,10,14,.55);
}

.action-primary:hover,
.action-secondary:hover{
  transform:translateY(-2px);
}

.hero-mini-stats{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.hero-mini-stats div{
  display:flex;
  align-items:center;
  gap:9px;
}

.hero-mini-stats strong{
  color:var(--yellow);
  font-size:.75rem;
}

.hero-mini-stats span{
  color:#8d9197;
  font-size:.77rem;
}

.hero-visual{
  display:flex;
  justify-content:center;
}

.terminal-card{
  width:min(470px,100%);
  border-radius:18px;
  overflow:hidden;
  background:rgba(6,9,12,.88);
  border:1px solid rgba(67,205,234,.17);
  box-shadow:
    0 30px 90px rgba(0,0,0,.45),
    0 0 70px rgba(67,205,234,.06);
  transform:rotate(1.5deg);
}

.terminal-top{
  height:46px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 15px;
  background:#0e1216;
  border-bottom:1px solid var(--border);
}

.terminal-top span{
  width:8px;height:8px;border-radius:50%;background:#353a40;
}

.terminal-top span:first-child{background:var(--yellow)}

.terminal-top small{
  margin-left:auto;
  color:#6e737a;
  font-size:.68rem;
}

.terminal-body{
  padding:28px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;
}

.terminal-body p{
  margin-bottom:13px;
  color:#c8ccd2;
}

.terminal-body b{color:var(--yellow)}
.muted-line{color:#697079!important}
.cyan{color:var(--cyan)}
.yellow{color:var(--yellow)}

.terminal-ticket{
  margin-top:26px;
  padding:18px;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(255,212,0,.07),rgba(67,205,234,.04));
  border:1px solid var(--yellow-border);
}

.terminal-ticket small{
  display:block;
  margin-bottom:7px;
  color:#7d8288;
}

.terminal-ticket strong{
  display:block;
  margin-bottom:7px;
  color:var(--yellow);
}

.terminal-ticket span{
  color:var(--cyan);
}

/* HOME FLOW */
.flow-section{
  padding:88px 24px;
  background:#060708;
}

.section-intro{
  width:min(1160px,100%);
  margin:0 auto 42px;
}

.section-intro span,
.eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--cyan);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
}

.section-intro h2{
  margin-bottom:9px;
  font-size:clamp(2rem,4.5vw,3.2rem);
}

.section-intro p{
  color:var(--muted);
  line-height:1.6;
}

.flow-timeline{
  width:min(1160px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}

.flow-timeline article{
  min-height:230px;
  padding:28px;
  background:#0d0f11;
}

.flow-index{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:34px;
  color:#080808;
  background:var(--yellow);
  border-radius:11px;
  font-size:.72rem;
  font-weight:900;
}

.flow-timeline h3{
  margin-bottom:10px;
  font-size:1rem;
}

.flow-timeline p{
  color:var(--muted);
  line-height:1.65;
  font-size:.86rem;
}

/* MEMBERSHIP */
.member-section{
  padding:30px 24px 88px;
  background:#060708;
}

.member-card{
  width:min(1160px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:38px;
  background:
    linear-gradient(135deg,rgba(255,212,0,.04),transparent 45%),
    #0d0f11;
  border:1px solid var(--yellow-border);
  border-radius:20px;
}

.member-card h2{
  max-width:520px;
  margin-bottom:14px;
  font-size:2.1rem;
}

.member-card p{
  max-width:560px;
  color:var(--muted);
  line-height:1.7;
}

.member-checklist{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.member-checklist div{
  padding:14px 16px;
  background:#090b0d;
  border:1px solid var(--border);
  border-radius:11px;
  color:#d2d5d8;
  font-size:.88rem;
}

.member-checklist span{
  margin-right:9px;
  color:var(--yellow);
}

.bottom-cta{
  width:min(1160px,calc(100% - 44px));
  margin:0 auto 70px;
  padding:26px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  background:#101214;
  border:1px solid var(--border);
  border-radius:18px;
}

.bottom-cta span{
  color:var(--yellow);
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.17em;
}

.bottom-cta h2{
  margin-top:6px;
  font-size:1.5rem;
}

.bottom-cta a{
  padding:13px 20px;
  color:#080808;
  background:var(--yellow);
  border-radius:10px;
  font-size:.83rem;
  font-weight:900;
}

/* UTILITY PAGES */
.utility-page{
  min-height:calc(100vh - 74px);
  padding:64px 24px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,212,0,.055),transparent 20%),
    radial-gradient(circle at 82% 12%,rgba(67,205,234,.04),transparent 20%),
    #070809;
}

.utility-shell{
  width:min(1120px,100%);
  min-height:600px;
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}

.compact-shell{
  min-height:500px;
}

.utility-side h1{
  max-width:470px;
  margin-bottom:18px;
  font-size:clamp(2.8rem,5vw,4.6rem);
  line-height:1;
  letter-spacing:-.045em;
}

.utility-side>p{
  max-width:500px;
  color:#a9adb3;
  line-height:1.75;
}

.side-process{
  margin-top:34px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.side-process div{
  display:flex;
  align-items:center;
  gap:12px;
  color:#b8bbc0;
  font-size:.85rem;
}

.side-process b{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#080808;
  background:var(--yellow);
  font-size:.66rem;
}

.form-panel{
  padding:34px;
  background:#0e1012;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}

.panel-heading{
  margin-bottom:26px;
}

.panel-heading span{
  color:var(--cyan);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.16em;
}

.panel-heading h2{
  margin:7px 0 6px;
  font-size:2rem;
}

.panel-heading p{
  color:var(--muted);
  font-size:.86rem;
}

.modern-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.field label{
  color:#dedfe1;
  font-size:.78rem;
  font-weight:800;
}

input,select{
  width:100%;
  padding:14px;
  color:var(--white);
  background:#090b0c;
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
  transition:.18s;
}

input::placeholder{color:#656a70}

input:focus,select:focus{
  border-color:rgba(255,212,0,.42);
  box-shadow:0 0 0 3px rgba(255,212,0,.05);
}

.submit-btn{
  width:100%;
  margin-top:3px;
  padding:14px 18px;
  border:0;
  border-radius:10px;
  color:#080808;
  background:var(--yellow);
  font-weight:900;
  cursor:pointer;
  transition:.18s;
}

.submit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 26px rgba(255,212,0,.11);
}

.login-shell{
  width:min(450px,100%);
  margin:auto;
  padding:34px;
  text-align:left;
  background:#0e1012;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}

.login-mark{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:13px;
  color:var(--yellow);
  background:rgba(255,212,0,.06);
  border:1px solid var(--yellow-border);
  font-weight:900;
}

.login-shell h1{
  margin-bottom:8px;
  font-size:2.5rem;
}

.login-shell>p{
  margin-bottom:24px;
  color:var(--muted);
}

.prototype-note{
  display:block;
  margin-top:14px;
  text-align:center;
  color:#676b70;
  font-size:.68rem;
}

/* Existing JS result classes */
.details{
  margin-top:18px;
  padding:18px;
  background:#090b0d;
  border:1px solid var(--border);
  border-radius:13px;
}

.details h3{
  margin-bottom:12px;
  font-size:.9rem;
}

.details div{
  display:grid;
  grid-template-columns:135px 1fr;
  gap:10px;
  padding:7px 0;
}

.details span{
  color:var(--muted);
  font-size:.78rem;
}

.details b{
  font-size:.82rem;
}

.msg{
  margin-top:16px;
  padding:14px;
  border-radius:11px;
  line-height:1.5;
}

.err{
  color:#ffb1b1;
  background:rgba(255,121,121,.08);
  border:1px solid rgba(255,121,121,.18);
}

.ok{
  color:#a6eec4;
  background:rgba(85,218,145,.08);
  border:1px solid rgba(85,218,145,.18);
}

.success{text-align:center}

.checkmark{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:50%;
  color:var(--green);
  background:rgba(85,218,145,.08);
  border:1px solid rgba(85,218,145,.22);
  font-size:1.8rem;
}

/* ADMIN, keep logic but align design */
.admin-wrap{
  width:min(1240px,calc(100% - 36px));
  margin:auto;
  padding:38px 0 60px;
}

.head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}

.head .tag{
  color:var(--cyan);
  font-size:.67rem;
  letter-spacing:.16em;
  font-weight:900;
}

.head h1{
  margin:7px 0 6px;
  font-size:2.4rem;
}

.head .sub{color:var(--muted)}

.btn{
  border:0;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
}

.dark{
  color:var(--white);
  background:#14171a;
  border:1px solid var(--border);
}

.red{
  color:#ffabab;
  background:rgba(255,121,121,.08);
  border:1px solid rgba(255,121,121,.18);
}

.yellow{
  color:#080808;
  background:var(--yellow);
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  margin-bottom:18px;
}

.stat{
  padding:18px;
  background:#0e1012;
  border:1px solid var(--border);
  border-radius:14px;
}

.stat small{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:.72rem;
}

.stat strong{font-size:1.3rem}

.grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
}

.side,.main{
  padding:18px;
  background:#0e1012;
  border:1px solid var(--border);
  border-radius:16px;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.menu button{
  border:0;
  padding:12px 13px;
  text-align:left;
  color:#c8cace;
  background:transparent;
  border-radius:9px;
  cursor:pointer;
  font-weight:800;
}

.menu button:hover,
.menu button.active{
  color:var(--yellow);
  background:rgba(255,212,0,.06);
}

.panel{display:none}
.panel.active{display:block}

.pt{margin-bottom:16px}
.pt h2{margin-bottom:5px}
.pt p{color:var(--muted);font-size:.82rem}

.toolbar{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.toolbar input{max-width:350px}

.table{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
}

table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
}

th,td{
  padding:12px 13px;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:.8rem;
}

th{
  color:var(--yellow);
  font-size:.66rem;
  text-transform:uppercase;
  background:#090b0d;
}

.empty{
  padding:30px;
  text-align:center;
  color:var(--muted);
}

.badge{
  display:inline-block;
  padding:5px 8px;
  border-radius:999px;
  font-size:.64rem;
  font-weight:900;
}

.registered{
  color:var(--yellow);
  background:rgba(255,212,0,.08);
}

.confirmed{color:var(--green);font-weight:900}
.pending{color:var(--muted);font-weight:800}

.qr{
  text-align:center;
  padding:14px;
}

.qrbox{
  width:220px;
  height:220px;
  margin:16px auto;
  padding:12px;
  background:#fff;
  border-radius:14px;
}

.qrpattern{
  width:100%;
  height:100%;
  background:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0/21px 21px;
}

.status{
  display:inline-flex;
  padding:6px 10px;
  color:#9beebf;
  background:rgba(85,218,145,.08);
  border:1px solid rgba(85,218,145,.16);
  border-radius:999px;
  font-size:.68rem;
  font-weight:900;
}

.settings{
  margin-bottom:11px;
  padding:15px;
  background:#090b0d;
  border:1px solid var(--border);
  border-radius:11px;
}

.settings strong{
  display:block;
  margin-bottom:5px;
  font-size:.82rem;
}

.settings span{
  color:var(--muted);
  font-size:.78rem;
}

.site-footer{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px clamp(20px,5vw,72px);
  color:#686c72;
  font-size:.72rem;
  border-top:1px solid rgba(255,255,255,.04);
  background:#050607;
}

@media(max-width:980px){
  .hero-shell,
  .utility-shell,
  .member-card{
    grid-template-columns:1fr;
  }

  .hero-visual{display:none}

  .hero-shell{
    min-height:590px;
    padding:70px 0;
  }

  .flow-timeline{
    grid-template-columns:repeat(2,1fr);
  }

  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  .site-header{
    padding:9px 12px;
  }

  .brand-text small{display:none}
  .brand-text strong{font-size:.72rem}
  .brand-emblem{width:36px;height:36px;font-size:.75rem}

  .site-nav{gap:8px}
  .site-nav a{font-size:.65rem}
  .site-nav .admin-nav{padding:8px 10px}

  .hero-shell{width:min(100% - 28px,1260px)}
  .hero-copy-block h1{font-size:3.1rem}

  .hero-actions{flex-direction:column}
  .action-primary,.action-secondary{width:100%}

  .hero-mini-stats{
    flex-direction:column;
    gap:10px;
  }

  .flow-section,.member-section{padding-left:14px;padding-right:14px}
  .flow-timeline{grid-template-columns:1fr}

  .member-card{padding:24px}
  .bottom-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .utility-page{padding:36px 14px}
  .utility-shell{gap:30px}
  .utility-side h1{font-size:2.8rem}
  .form-panel,.login-shell{padding:24px}
  .form-row{grid-template-columns:1fr}

  .head{flex-direction:column}
  .stats{grid-template-columns:1fr}

  .site-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .details div{
    grid-template-columns:1fr;
    gap:2px;
  }
}


/* =========================
   CES MOTION + VISUAL EFFECTS
   ========================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,20%), rgba(255,212,0,.035), transparent 18%);
  transition:background .12s linear;
}

.site-header{
  transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.site-header.header-scrolled{
  background:rgba(6,7,8,.975);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  border-bottom-color:rgba(255,212,0,.08);
}

.brand-emblem{
  position:relative;
  overflow:hidden;
}

.brand-emblem::after{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-100%) rotate(15deg);
  animation:brandSweep 5.8s ease-in-out infinite;
}

@keyframes brandSweep{
  0%,72%{transform:translateX(-100%) rotate(15deg)}
  88%,100%{transform:translateX(100%) rotate(15deg)}
}

.hero-chip,
.eyebrow{
  position:relative;
  overflow:hidden;
}

.hero-chip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:35px;
  left:-50px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:chipSweep 4.5s infinite;
}

@keyframes chipSweep{
  0%,60%{left:-50px}
  85%,100%{left:110%}
}

.home-hero .hero-copy-block,
.hero-visual,
.flow-timeline article,
.member-card,
.form-panel,
.login-shell{
  animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) both;
}

.hero-visual{animation-delay:.08s}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

.terminal-card{
  animation:
    terminalFloat 5s ease-in-out infinite,
    fadeUp .7s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes terminalFloat{
  0%,100%{transform:rotate(1.5deg) translateY(0)}
  50%{transform:rotate(.6deg) translateY(-8px)}
}

.terminal-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:18px;
  box-shadow:inset 0 0 50px rgba(67,205,234,.025);
}

.terminal-body{
  position:relative;
}

.terminal-body::after{
  content:"";
  display:inline-block;
  width:7px;
  height:13px;
  margin-left:5px;
  background:var(--yellow);
  vertical-align:-2px;
  animation:terminalBlink 1s steps(1) infinite;
}

@keyframes terminalBlink{
  0%,52%{opacity:1}
  53%,100%{opacity:0}
}

.flow-timeline article{
  position:relative;
  transition:
    transform .22s ease,
    background .22s ease;
}

.flow-timeline article:hover{
  transform:translateY(-5px);
  background:#111417;
  z-index:2;
}

.flow-timeline article::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,var(--yellow),var(--cyan));
  transition:transform .25s ease;
}

.flow-timeline article:hover::after{
  transform:scaleX(1);
}

.flow-index{
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.flow-timeline article:hover .flow-index{
  transform:rotate(-5deg) scale(1.07);
  box-shadow:0 8px 22px rgba(255,212,0,.14);
}

.member-checklist div{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.member-checklist div:hover{
  transform:translateX(5px);
  border-color:rgba(255,212,0,.16);
  background:#0c0f12;
}

.action-primary,
.action-secondary,
.submit-btn,
.admin-nav,
.btn{
  position:relative;
  overflow:hidden;
}

.action-primary::after,
.submit-btn::after,
.admin-nav::after{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  width:35px;
  left:-60px;
  transform:rotate(15deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .45s ease;
}

.action-primary:hover::after,
.submit-btn:hover::after,
.admin-nav:hover::after{
  left:115%;
}

input,select{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background .18s ease;
}

input:focus,select:focus{
  transform:translateY(-1px);
}

.form-panel,
.login-shell,
.side,
.main,
.stat{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.form-panel:hover,
.login-shell:hover{
  border-color:rgba(255,212,0,.13);
  box-shadow:0 34px 90px rgba(0,0,0,.36);
}

.stat:hover{
  transform:translateY(-3px);
  border-color:rgba(255,212,0,.12);
}

.qrbox{
  position:relative;
  overflow:hidden;
}

.qrbox::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  height:2px;
  top:10%;
  background:linear-gradient(90deg,transparent,var(--yellow),transparent);
  box-shadow:0 0 12px rgba(255,212,0,.45);
  opacity:.65;
  animation:qrScan 2.8s ease-in-out infinite;
}

@keyframes qrScan{
  0%,100%{top:10%}
  50%{top:88%}
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.8,.2,1);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.cursor-glow{
  position:fixed;
  width:220px;
  height:220px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.42;
  background:radial-gradient(circle,rgba(255,212,0,.055),rgba(67,205,234,.018) 38%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .2s ease;
  mix-blend-mode:screen;
}

.click-ring{
  position:fixed;
  width:14px;
  height:14px;
  border:1px solid rgba(255,212,0,.65);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%) scale(.2);
  animation:ringBurst .55s ease-out forwards;
}

@keyframes ringBurst{
  to{
    opacity:0;
    transform:translate(-50%,-50%) scale(3.8);
  }
}

@media(max-width:700px),(prefers-reduced-motion:reduce){
  .cursor-glow,
  .click-ring{
    display:none!important;
  }

  .terminal-card,
  .brand-emblem::after,
  .hero-chip::after,
  .qrbox::after{
    animation:none!important;
  }

  .home-hero .hero-copy-block,
  .hero-visual,
  .flow-timeline article,
  .member-card,
  .form-panel,
  .login-shell{
    animation:none!important;
  }
}


/* =========================
   CES LOGO INTEGRATION
   ========================= */

.brand-emblem{
  padding:3px;
  background:#0b0d0f;
}

.brand-emblem img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:9px;
}

.hero-logo-row{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:18px;
}

.hero-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(255,212,0,.18),
    0 0 26px rgba(255,212,0,.08);
}

.hero-logo-row>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.hero-logo-row strong{
  font-size:.84rem;
  letter-spacing:.04em;
}

.hero-logo-row span{
  color:var(--muted);
  font-size:.74rem;
}

/* =========================
   BSIT TEXT EFFECTS
   ========================= */

.tech-text{
  position:relative;
  display:inline-block;
  text-shadow:
    0 0 24px rgba(255,212,0,.08),
    1px 0 0 rgba(67,205,234,.22);
}

.tech-text::before,
.tech-text::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}

.tech-text.text-glitch{
  animation:textGlitchMain .24s linear 1;
}

@keyframes textGlitchMain{
  0%{transform:translate(0)}
  20%{transform:translate(-1px,1px)}
  40%{transform:translate(1px,-1px)}
  60%{transform:translate(-1px,0)}
  80%{transform:translate(1px,1px)}
  100%{transform:translate(0)}
}

.hero-copy-block h1{
  position:relative;
}

.hero-copy-block h1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:115px;
  height:2px;
  background:linear-gradient(90deg,var(--yellow),var(--cyan),transparent);
  box-shadow:0 0 14px rgba(67,205,234,.2);
  animation:headlineScan 3.6s ease-in-out infinite;
}

@keyframes headlineScan{
  0%,100%{width:85px;opacity:.55}
  50%{width:185px;opacity:1}
}

.type-cursor{
  display:inline-block;
  width:8px;
  height:1em;
  margin-left:5px;
  vertical-align:-.1em;
  background:var(--yellow);
  animation:typeBlink .9s steps(1) infinite;
}

@keyframes typeBlink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

/* =========================
   CODE MOUSE TRAIL
   ========================= */

.code-particle{
  position:fixed;
  z-index:99999;
  pointer-events:none;
  user-select:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  font-weight:800;
  color:var(--yellow);
  text-shadow:0 0 8px rgba(255,212,0,.34);
  transform:translate(-50%,-50%);
  animation:codeParticleFade .72s ease-out forwards;
}

.code-particle.cyan-code{
  color:var(--cyan);
  text-shadow:0 0 8px rgba(67,205,234,.32);
}

@keyframes codeParticleFade{
  0%{
    opacity:.85;
    transform:translate(-50%,-50%) scale(.85);
  }
  100%{
    opacity:0;
    transform:translate(var(--drift-x),var(--drift-y)) scale(.25) rotate(var(--rot));
  }
}

.binary-burst{
  position:fixed;
  z-index:99999;
  pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  font-weight:900;
  color:var(--cyan);
  animation:binaryBurst .65s ease-out forwards;
}

@keyframes binaryBurst{
  from{
    opacity:1;
    transform:translate(-50%,-50%) scale(.8);
  }
  to{
    opacity:0;
    transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.15);
  }
}

/* =========================
   DIGITAL GRID / SCAN EFFECT
   ========================= */

.home-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20%;
  height:120px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(67,205,234,.025),
    rgba(255,212,0,.035),
    transparent
  );
  animation:pageScan 7s linear infinite;
}

@keyframes pageScan{
  from{transform:translateY(-140px)}
  to{transform:translateY(900px)}
}

.terminal-ticket{
  position:relative;
  overflow:hidden;
}

.terminal-ticket::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  top:15%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.5;
  animation:ticketScan 2.6s ease-in-out infinite;
}

@keyframes ticketScan{
  0%,100%{top:15%}
  50%{top:84%}
}

/* =========================
   IT SYMBOL DECORATIONS
   ========================= */

.form-panel::before,
.login-shell::before,
.main::before{
  content:"</>";
  position:absolute;
  right:18px;
  top:15px;
  color:rgba(67,205,234,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:2rem;
  font-weight:900;
  pointer-events:none;
}

.form-panel,
.login-shell,
.main{
  position:relative;
}

.flow-timeline article:nth-child(1)::before{content:"01";}
.flow-timeline article:nth-child(2)::before{content:"{}";}
.flow-timeline article:nth-child(3)::before{content:"ID";}
.flow-timeline article:nth-child(4)::before{content:"QR";}

.flow-timeline article::before{
  position:absolute;
  right:18px;
  bottom:14px;
  color:rgba(67,205,234,.04);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:2.3rem;
  font-weight:900;
}

@media(max-width:700px),(prefers-reduced-motion:reduce){
  .code-particle,
  .binary-burst{
    display:none!important;
  }

  .home-hero::after,
  .terminal-ticket::after,
  .hero-copy-block h1::after{
    animation:none!important;
  }
}


/* =========================
   V14 HERO AURA INTEGRATION
   ========================= */

.aura-hero{
  min-height:760px;
  background:
    radial-gradient(circle at 77% 43%,rgba(255,212,0,.10),transparent 20%),
    radial-gradient(circle at 77% 43%,rgba(67,205,234,.055),transparent 34%),
    linear-gradient(110deg,#050607 0%,#080b0f 48%,#060708 100%);
}

.aura-hero::before{
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,212,0,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(67,205,234,.03) 1px,transparent 1px);
  background-size:58px 58px;
}

.circuit-layer{
  position:absolute;
  inset:0;
  opacity:.28;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 11%,rgba(255,212,0,.10) 11% 11.08%,transparent 11.08% 100%),
    linear-gradient(0deg,transparent 0 73%,rgba(67,205,234,.08) 73% 73.08%,transparent 73.08% 100%);
}

.circuit-layer::before,
.circuit-layer::after{
  content:"";
  position:absolute;
  width:180px;
  height:130px;
  border:1px solid rgba(255,212,0,.13);
  border-right:0;
  border-bottom:0;
}

.circuit-layer::before{
  left:5%;
  top:18%;
}

.circuit-layer::after{
  right:5%;
  bottom:13%;
  transform:rotate(180deg);
}

.aura-shell{
  min-height:690px;
  grid-template-columns:.93fr 1.07fr;
  gap:35px;
}

.aura-copy{
  padding-left:10px;
}

.mini-brand-row{
  margin-bottom:26px;
}

.mini-logo{
  width:54px;
  height:54px;
}

.aura-title{
  max-width:680px;
  margin-bottom:23px;
  font-size:clamp(4rem,7vw,7rem);
  line-height:.86;
  letter-spacing:-.06em;
  color:#f5f3ea;
  text-shadow:
    0 0 1px rgba(255,255,255,.7),
    0 15px 40px rgba(0,0,0,.5);
}

.title-year{
  display:block;
  margin-top:12px;
  color:var(--yellow);
  font-size:.68em;
  text-shadow:
    0 0 18px rgba(255,212,0,.20),
    0 0 40px rgba(255,212,0,.06);
}

.aura-copy .hero-copy{
  max-width:620px;
}

.aura-actions{
  margin-bottom:28px;
}

.tech-button{
  min-width:220px;
  border-radius:10px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.button-code{
  margin-right:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem;
}

.button-arrow{
  margin-left:auto;
  font-size:1.2rem;
}

.hero-code-block{
  width:min(460px,100%);
  padding:16px 18px;
  border-left:2px solid var(--yellow);
  background:
    linear-gradient(90deg,rgba(255,212,0,.045),transparent),
    rgba(5,7,9,.62);
  color:#a9afb6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.76rem;
  line-height:1.65;
}

.code-label{
  margin-bottom:8px;
  color:var(--cyan);
}

.hero-code-block span{
  color:#ffdf47;
}

.hero-code-block b{
  color:#8eedb7;
}

.aura-logo-stage{
  position:relative;
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.energy-grid{
  position:absolute;
  width:590px;
  height:590px;
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 36%,rgba(255,212,0,.035) 36.3% 36.6%,transparent 36.9%),
    radial-gradient(circle,transparent 0 48%,rgba(67,205,234,.04) 48.2% 48.5%,transparent 48.8%),
    repeating-conic-gradient(from 0deg,rgba(255,212,0,.06) 0deg .6deg,transparent .6deg 7deg);
  mask-image:radial-gradient(circle,#000 0 62%,transparent 74%);
  animation:gridRotate 35s linear infinite;
}

@keyframes gridRotate{
  to{transform:rotate(360deg)}
}

.hero-logo-core{
  position:relative;
  z-index:4;
  width:390px;
  height:390px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,212,0,.11),rgba(4,6,8,.78) 57%,transparent 69%);
  filter:drop-shadow(0 0 28px rgba(255,212,0,.22));
}

.hero-logo-main{
  position:relative;
  z-index:3;
  width:340px;
  height:340px;
  object-fit:contain;
  border-radius:50%;
  filter:
    drop-shadow(0 0 12px rgba(255,212,0,.24))
    drop-shadow(0 0 36px rgba(255,212,0,.10));
  animation:logoFloat 5.2s ease-in-out infinite;
}

@keyframes logoFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.015)}
}

.logo-scan{
  position:absolute;
  z-index:5;
  left:35px;
  right:35px;
  height:2px;
  top:22%;
  background:linear-gradient(90deg,transparent,var(--yellow),var(--cyan),transparent);
  opacity:.65;
  box-shadow:0 0 14px rgba(255,212,0,.45);
  animation:logoScan 3.5s ease-in-out infinite;
}

@keyframes logoScan{
  0%,100%{top:22%;opacity:.25}
  50%{top:79%;opacity:.75}
}

.logo-aura-ring{
  position:absolute;
  z-index:2;
  border-radius:50%;
  border:1px solid rgba(255,212,0,.22);
  box-shadow:
    0 0 18px rgba(255,212,0,.055),
    inset 0 0 18px rgba(255,212,0,.035);
}

.ring-a{
  width:455px;
  height:455px;
  animation:ringSpin 20s linear infinite;
}

.ring-b{
  width:500px;
  height:370px;
  transform:rotate(-18deg);
  border-color:rgba(67,205,234,.18);
  animation:ringSpinB 16s linear infinite reverse;
}

.ring-c{
  width:540px;
  height:280px;
  transform:rotate(24deg);
  border-style:dashed;
  opacity:.55;
  animation:ringSpinC 22s linear infinite;
}

@keyframes ringSpin{
  to{transform:rotate(360deg)}
}
@keyframes ringSpinB{
  to{transform:rotate(342deg)}
}
@keyframes ringSpinC{
  to{transform:rotate(384deg)}
}

.energy-node{
  position:absolute;
  z-index:6;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:
    0 0 8px var(--yellow),
    0 0 18px rgba(255,212,0,.5);
  animation:nodePulse 1.8s ease-in-out infinite alternate;
}

.node-1{top:17%;left:21%}
.node-2{top:23%;right:15%;animation-delay:.4s}
.node-3{bottom:19%;left:18%;animation-delay:.8s}
.node-4{bottom:15%;right:23%;animation-delay:1.2s}

@keyframes nodePulse{
  from{transform:scale(.7);opacity:.45}
  to{transform:scale(1.5);opacity:1}
}

.floating-code{
  position:absolute;
  z-index:7;
  color:rgba(255,212,0,.68);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:900;
  text-shadow:0 0 12px rgba(255,212,0,.18);
  animation:floatCode 4s ease-in-out infinite;
}

.fc-1{left:7%;top:43%;font-size:1.7rem}
.fc-2{right:7%;top:27%;font-size:.74rem;animation-delay:.6s}
.fc-3{right:3%;bottom:24%;font-size:1.15rem;color:rgba(67,205,234,.6);animation-delay:1.1s}
.fc-4{left:13%;bottom:21%;font-size:.8rem;color:rgba(67,205,234,.6);animation-delay:1.6s}

@keyframes floatCode{
  0%,100%{transform:translateY(0);opacity:.45}
  50%{transform:translateY(-10px);opacity:.9}
}

.logo-caption{
  position:relative;
  z-index:8;
  margin-top:-6px;
  text-align:center;
}

.logo-caption strong{
  display:block;
  color:var(--yellow);
  font-size:1.05rem;
  letter-spacing:.08em;
}

.logo-caption span{
  display:block;
  margin-top:5px;
  color:#9ea4aa;
  font-size:.76rem;
}

.hero-feature-strip{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:22px;
  width:min(1180px,calc(100% - 48px));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(7,9,11,.84);
  border:1px solid rgba(255,212,0,.13);
  border-radius:14px;
  backdrop-filter:blur(10px);
  overflow:hidden;
}

.hero-feature-strip>div{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 18px;
  border-right:1px solid var(--border);
}

.hero-feature-strip>div:last-child{
  border-right:0;
}

.hero-feature-strip b{
  min-width:35px;
  color:var(--yellow);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.15rem;
}

.hero-feature-strip span{
  color:#aeb3b9;
  font-size:.74rem;
  line-height:1.4;
}

.hero-feature-strip strong{
  display:block;
  margin-bottom:2px;
  color:var(--yellow);
  font-size:.76rem;
}

@media(max-width:1050px){
  .aura-shell{
    grid-template-columns:1fr;
    padding:70px 0 130px;
  }

  .aura-logo-stage{
    min-height:480px;
  }

  .hero-logo-core{
    width:330px;
    height:330px;
  }

  .hero-logo-main{
    width:290px;
    height:290px;
  }

  .energy-grid{
    width:480px;
    height:480px;
  }

  .ring-a{width:390px;height:390px}
  .ring-b{width:430px;height:320px}
  .ring-c{width:460px;height:240px}
}

@media(max-width:760px){
  .aura-hero{
    min-height:auto;
  }

  .aura-shell{
    padding:55px 0 125px;
  }

  .aura-title{
    font-size:3.4rem;
  }

  .hero-code-block{
    font-size:.7rem;
  }

  .aura-logo-stage{
    display:none;
  }

  .hero-feature-strip{
    grid-template-columns:1fr 1fr;
    bottom:14px;
  }

  .hero-feature-strip>div{
    min-height:58px;
  }

  .hero-feature-strip>div:nth-child(2){
    border-right:0;
  }

  .hero-feature-strip>div:nth-child(-n+2){
    border-bottom:1px solid var(--border);
  }
}

@media(prefers-reduced-motion:reduce){
  .energy-grid,
  .hero-logo-main,
  .logo-scan,
  .logo-aura-ring,
  .energy-node,
  .floating-code{
    animation:none!important;
  }
}


/* =========================
   V15 CLEAN HERO + POWER AURA
   ========================= */

.hero-code-block,
.hero-feature-strip{
  display:none!important;
}

.aura-hero{
  min-height:700px;
}

.aura-shell{
  min-height:650px;
  padding-bottom:20px;
}

.hero-status-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  color:#d7dadd;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  font-size:.72rem;
  font-weight:800;
  backdrop-filter:blur(8px);
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#55da91;
  box-shadow:0 0 10px rgba(85,218,145,.7);
  animation:statusPulse 1.7s ease-in-out infinite;
}

@keyframes statusPulse{
  0%,100%{transform:scale(.8);opacity:.6}
  50%{transform:scale(1.25);opacity:1}
}

.muted-status{
  color:#969ba1;
}

/* Power aura around the real CES logo */

.aura-logo-stage{
  isolation:isolate;
  overflow:visible;
}

.power-aura{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter:blur(8px);
  z-index:0;
}

.aura-back{
  width:560px;
  height:560px;
  background:
    radial-gradient(circle,
      rgba(255,239,124,.24) 0%,
      rgba(255,212,0,.18) 22%,
      rgba(255,174,0,.10) 42%,
      transparent 69%);
  animation:auraBackPulse 2.7s ease-in-out infinite;
}

.aura-mid{
  width:470px;
  height:470px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 18deg,
      rgba(255,212,0,.34) 19deg 23deg,
      transparent 24deg 54deg,
      rgba(255,239,125,.26) 55deg 59deg,
      transparent 60deg 92deg,
      rgba(255,212,0,.30) 93deg 98deg,
      transparent 99deg 360deg
    );
  filter:blur(5px);
  animation:auraSpin 9s linear infinite;
}

.aura-front{
  width:410px;
  height:410px;
  background:
    radial-gradient(circle,
      transparent 0 50%,
      rgba(255,212,0,.14) 58%,
      rgba(255,246,181,.22) 62%,
      transparent 69%);
  filter:blur(3px);
  animation:auraFrontPulse 1.9s ease-in-out infinite;
}

@keyframes auraBackPulse{
  0%,100%{opacity:.64;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}

@keyframes auraFrontPulse{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.98)}
  50%{opacity:.95;transform:translate(-50%,-50%) scale(1.04)}
}

@keyframes auraSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.energy-flare{
  position:absolute;
  z-index:1;
  width:220px;
  height:520px;
  top:50%;
  pointer-events:none;
  filter:blur(8px);
  opacity:.56;
  background:
    linear-gradient(
      to top,
      transparent 0%,
      rgba(255,212,0,.04) 18%,
      rgba(255,212,0,.28) 55%,
      rgba(255,246,179,.10) 82%,
      transparent 100%
    );
  clip-path:polygon(
    50% 0%,
    67% 18%,
    58% 32%,
    77% 47%,
    57% 57%,
    72% 77%,
    51% 100%,
    39% 76%,
    22% 58%,
    42% 43%,
    30% 28%
  );
  animation:flareFlicker 1.35s ease-in-out infinite alternate;
}

.flare-left{
  left:12%;
  transform:translateY(-50%) rotate(-16deg);
}

.flare-right{
  right:10%;
  transform:translateY(-50%) rotate(18deg);
  animation-delay:.45s;
}

@keyframes flareFlicker{
  from{opacity:.28;filter:blur(10px);scale:.96 1}
  to{opacity:.72;filter:blur(5px);scale:1.05 1.08}
}

.hero-logo-core{
  z-index:5;
  transition:
    transform .12s ease-out,
    filter .25s ease;
}

.hero-logo-core.powered{
  filter:
    drop-shadow(0 0 22px rgba(255,212,0,.6))
    drop-shadow(0 0 55px rgba(255,212,0,.35));
}

.hero-logo-main{
  width:360px;
  height:360px;
  filter:
    drop-shadow(0 0 12px rgba(255,212,0,.42))
    drop-shadow(0 0 28px rgba(255,212,0,.18))
    drop-shadow(0 0 70px rgba(255,212,0,.10));
}

.spark-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
}

.aura-spark{
  position:absolute;
  width:3px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(to top,transparent,#ffd400,#fff6b8);
  box-shadow:0 0 8px rgba(255,212,0,.65);
  opacity:0;
  transform-origin:center bottom;
  animation:sparkRise var(--spark-duration) ease-out forwards;
}

@keyframes sparkRise{
  0%{
    opacity:0;
    transform:translate(0,0) scale(.6) rotate(var(--spark-rot));
  }
  15%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(var(--spark-x),var(--spark-y)) scale(.1) rotate(var(--spark-rot));
  }
}

.aura-logo-stage:hover .aura-back{
  animation-duration:1.4s;
}

.aura-logo-stage:hover .aura-front{
  animation-duration:.9s;
}

.aura-logo-stage:hover .hero-logo-main{
  filter:
    drop-shadow(0 0 20px rgba(255,212,0,.65))
    drop-shadow(0 0 42px rgba(255,212,0,.35))
    drop-shadow(0 0 95px rgba(255,212,0,.18));
}

.logo-caption{
  margin-top:3px;
}

@media(max-width:1050px){
  .aura-shell{
    padding-bottom:30px;
  }

  .aura-back{width:490px;height:490px}
  .aura-mid{width:420px;height:420px}
  .aura-front{width:360px;height:360px}
  .hero-logo-main{width:305px;height:305px}
}

@media(max-width:760px){
  .hero-status-row{
    margin-bottom:5px;
  }

  .power-aura,
  .energy-flare,
  .spark-field{
    display:none!important;
  }
}


/* =========================================================
   V15 EDIT: RIGHT-SIDE ANIMATED CES LOGO
   ========================================================= */

.v15-right-logo .aura-shell{
  grid-template-columns:minmax(430px,.92fr) minmax(520px,1.08fr);
  gap:34px;
}

.right-logo-stage{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  width:100%;
  overflow:visible;
  isolation:isolate;
}

.right-logo-glow{
  position:absolute;
  width:470px;
  height:470px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,240,145,.17) 0 18%,
      rgba(255,212,0,.12) 35%,
      rgba(255,187,0,.055) 52%,
      transparent 72%);
  filter:blur(12px);
  animation:rightGlowPulse 4.8s ease-in-out infinite;
}

@keyframes rightGlowPulse{
  0%,100%{opacity:.62;transform:scale(.96)}
  50%{opacity:.94;transform:scale(1.035)}
}

.right-logo-core{
  position:relative;
  z-index:6;
  width:390px;
  height:390px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform-style:preserve-3d;
  transition:transform .16s ease-out;
}

.right-logo-image{
  width:355px;
  height:355px;
  object-fit:contain;
  border-radius:50%;
  filter:
    drop-shadow(0 0 12px rgba(255,212,0,.32))
    drop-shadow(0 0 34px rgba(255,212,0,.14));
  animation:rightLogoFloat 5.4s ease-in-out infinite;
}

@keyframes rightLogoFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.012)}
}

.right-logo-sheen{
  position:absolute;
  z-index:7;
  inset:38px;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
}

.right-logo-sheen::after{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:-45%;
  width:20%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(16deg);
  animation:rightLogoSheen 6s ease-in-out infinite;
}

@keyframes rightLogoSheen{
  0%,72%{left:-45%;opacity:0}
  78%{opacity:1}
  94%,100%{left:125%;opacity:0}
}

.right-logo-orbit{
  position:absolute;
  z-index:3;
  border-radius:50%;
  pointer-events:none;
}

.orbit-1{
  width:450px;
  height:450px;
  border:1px solid rgba(255,212,0,.18);
  animation:rightOrbitOne 22s linear infinite;
}

.orbit-2{
  width:500px;
  height:310px;
  border:1px solid rgba(67,205,234,.13);
  transform:rotate(-19deg);
  animation:rightOrbitTwo 18s linear infinite reverse;
}

.orbit-3{
  width:525px;
  height:255px;
  border:1px dashed rgba(255,212,0,.11);
  transform:rotate(27deg);
  animation:rightOrbitThree 28s linear infinite;
}

@keyframes rightOrbitOne{
  to{transform:rotate(360deg)}
}
@keyframes rightOrbitTwo{
  to{transform:rotate(341deg)}
}
@keyframes rightOrbitThree{
  to{transform:rotate(387deg)}
}

.right-logo-dot{
  position:absolute;
  z-index:8;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 9px rgba(255,212,0,.65);
  animation:rightDotPulse 2.2s ease-in-out infinite alternate;
}

.dot-1{left:18%;top:27%}
.dot-2{right:14%;top:35%;animation-delay:.45s}
.dot-3{left:23%;bottom:25%;animation-delay:.9s}
.dot-4{right:21%;bottom:20%;animation-delay:1.3s}

@keyframes rightDotPulse{
  from{opacity:.35;transform:scale(.7)}
  to{opacity:1;transform:scale(1.35)}
}

.right-logo-caption{
  position:absolute;
  z-index:9;
  bottom:16px;
  text-align:center;
}

.right-logo-caption strong{
  display:block;
  color:var(--yellow);
  font-size:.9rem;
  letter-spacing:.1em;
}

.right-logo-caption span{
  display:block;
  margin-top:5px;
  color:#858b91;
  font-size:.69rem;
}

/* Disable the older, heavier V15 aura pieces on this homepage stage */
.v15-right-logo .power-aura,
.v15-right-logo .energy-flare,
.v15-right-logo .spark-field,
.v15-right-logo .energy-grid,
.v15-right-logo .logo-aura-ring,
.v15-right-logo .energy-node,
.v15-right-logo .hero-logo-core,
.v15-right-logo .floating-code,
.v15-right-logo .logo-caption{
  display:none!important;
}

.right-logo-stage:hover .right-logo-image{
  filter:
    drop-shadow(0 0 15px rgba(255,232,120,.45))
    drop-shadow(0 0 42px rgba(255,212,0,.20));
}

.right-logo-stage:hover .right-logo-glow{
  opacity:1;
}

@media(max-width:1050px){
  .v15-right-logo .aura-shell{
    grid-template-columns:1fr;
  }

  .right-logo-stage{
    justify-self:center;
    min-height:500px;
  }

  .right-logo-core{
    width:330px;
    height:330px;
  }

  .right-logo-image{
    width:300px;
    height:300px;
  }

  .orbit-1{width:390px;height:390px}
  .orbit-2{width:430px;height:280px}
  .orbit-3{width:455px;height:220px}
}

@media(max-width:760px){
  .right-logo-stage{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .right-logo-glow,
  .right-logo-image,
  .right-logo-sheen::after,
  .right-logo-orbit,
  .right-logo-dot{
    animation:none!important;
  }
}


/* =========================================================
   BLACK VOID + GOLDEN HALO
   ========================================================= */

body{
  background:#050505!important;
}

body::before{
  display:none!important;
}

.home-hero,
.flow-section,
.member-section{
  background:#050505!important;
}

.void-hero{
  position:relative;
  min-height:700px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.035);
  background:
    radial-gradient(circle at 76% 46%,rgba(255,212,0,.045),transparent 25%),
    #050505!important;
}

.void-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%,transparent 35%,rgba(0,0,0,.55) 100%);
}

.void-shell{
  position:relative;
  z-index:2;
  width:min(1260px,calc(100% - 44px));
  min-height:700px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.void-copy{
  position:relative;
  z-index:5;
}

.void-title{
  max-width:680px;
  margin-bottom:24px;
  font-size:clamp(4rem,7vw,7rem);
  line-height:.88;
  letter-spacing:-.06em;
  color:#f2f1eb;
}

.void-title span{
  display:block;
  margin-top:13px;
  color:var(--yellow);
  font-size:.66em;
  text-shadow:0 0 22px rgba(255,212,0,.11);
}

.void-copy .hero-copy{
  max-width:610px;
  color:#aeb1b5;
  line-height:1.72;
}

.void-actions{
  margin-bottom:25px;
}

.void-actions .action-primary,
.void-actions .action-secondary{
  border-radius:10px;
}

.void-actions .action-primary{
  box-shadow:none;
}

.void-actions .action-primary:hover{
  box-shadow:0 8px 26px rgba(255,212,0,.12);
}

.void-actions .action-secondary{
  color:#d4d5d6;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0a0a;
}

.void-logo-stage{
  position:relative;
  min-height:570px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-self:end;
  width:100%;
  isolation:isolate;
}

.gold-halo{
  position:absolute;
  left:50%;
  top:47%;
  width:520px;
  height:520px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,248,197,.14) 0 14%,
      rgba(255,220,43,.12) 27%,
      rgba(255,190,0,.065) 46%,
      rgba(255,160,0,.025) 58%,
      transparent 74%);
  filter:blur(18px);
  animation:voidHaloBreathe 7s ease-in-out infinite;
}

@keyframes voidHaloBreathe{
  0%,100%{
    opacity:.58;
    transform:translate(-50%,-50%) scale(.97);
  }
  50%{
    opacity:.86;
    transform:translate(-50%,-50%) scale(1.035);
  }
}

.gold-orbit{
  position:absolute;
  left:50%;
  top:47%;
  width:515px;
  height:300px;
  transform:translate(-50%,-50%) rotate(-17deg);
  border:1px solid rgba(255,212,0,.17);
  border-left-color:rgba(255,212,0,.34);
  border-right-color:rgba(255,212,0,.06);
  border-radius:50%;
  animation:voidOrbit 32s linear infinite;
}

@keyframes voidOrbit{
  to{
    transform:translate(-50%,-50%) rotate(343deg);
  }
}

.void-logo-core{
  position:relative;
  z-index:5;
  width:410px;
  height:410px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:transform .18s ease-out;
}

.void-logo-image{
  width:380px;
  height:380px;
  object-fit:contain;
  border-radius:50%;
  filter:
    drop-shadow(0 0 10px rgba(255,212,0,.28))
    drop-shadow(0 0 30px rgba(255,212,0,.10));
  animation:voidLogoFloat 7s ease-in-out infinite;
}

@keyframes voidLogoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

.gold-point{
  position:absolute;
  z-index:6;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 10px rgba(255,212,0,.65);
  opacity:.75;
}

.gp-1{left:18%;top:28%}
.gp-2{right:15%;top:34%}
.gp-3{left:25%;bottom:24%}
.gp-4{right:23%;bottom:20%}

.void-logo-caption{
  position:absolute;
  bottom:20px;
  z-index:7;
  text-align:center;
}

.void-logo-caption strong{
  display:block;
  color:var(--yellow);
  font-size:.86rem;
  letter-spacing:.11em;
}

.void-logo-caption span{
  display:block;
  margin-top:5px;
  color:#73767a;
  font-size:.68rem;
  letter-spacing:.08em;
}

.void-logo-stage:hover .void-logo-image{
  filter:
    drop-shadow(0 0 12px rgba(255,236,153,.36))
    drop-shadow(0 0 38px rgba(255,212,0,.15));
}

.void-logo-stage:hover .gold-halo{
  opacity:.92;
}

/* Lower sections stay restrained */
.flow-section,
.member-section{
  border-top:1px solid rgba(255,255,255,.025);
}

.flow-timeline,
.member-card{
  box-shadow:none!important;
}

.flow-timeline article{
  background:#0a0a0a!important;
}

.member-card{
  background:
    linear-gradient(135deg,rgba(255,212,0,.018),transparent 45%),
    #0a0a0a!important;
}

@media(max-width:1050px){
  .void-shell{
    grid-template-columns:1fr;
    padding:65px 0 30px;
  }

  .void-logo-stage{
    justify-self:center;
    min-height:500px;
  }

  .void-logo-core{
    width:340px;
    height:340px;
  }

  .void-logo-image{
    width:315px;
    height:315px;
  }

  .gold-halo{
    width:450px;
    height:450px;
  }

  .gold-orbit{
    width:445px;
    height:260px;
  }
}

@media(max-width:760px){
  .void-logo-stage{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .gold-halo,
  .gold-orbit,
  .void-logo-image{
    animation:none!important;
  }
}


/* =========================================================
   BLACK VOID V2
   Persistent page atmosphere + lightweight mouse trail
   ========================================================= */

body{
  isolation:isolate;
}

.global-void-atmosphere{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:#050505;
}

.global-gold-haze{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  will-change:transform;
}

.haze-one{
  width:48vw;
  height:48vw;
  min-width:520px;
  min-height:520px;
  right:-12vw;
  top:8vh;
  background:radial-gradient(circle,rgba(255,212,0,.075),rgba(255,176,0,.025) 46%,transparent 72%);
  animation:globalHazeOne 18s ease-in-out infinite alternate;
}

.haze-two{
  width:42vw;
  height:42vw;
  min-width:460px;
  min-height:460px;
  left:-18vw;
  top:65vh;
  background:radial-gradient(circle,rgba(255,212,0,.035),transparent 70%);
  animation:globalHazeTwo 24s ease-in-out infinite alternate;
}

@keyframes globalHazeOne{
  from{transform:translate3d(0,0,0) scale(.98)}
  to{transform:translate3d(-3vw,8vh,0) scale(1.05)}
}

@keyframes globalHazeTwo{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7vw,-10vh,0) scale(1.08)}
}

.global-star-field{
  position:absolute;
  inset:0;
  opacity:.30;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,212,0,.70) 0 1px,transparent 1.5px),
    radial-gradient(circle at 28% 49%,rgba(255,212,0,.35) 0 1px,transparent 1.5px),
    radial-gradient(circle at 46% 81%,rgba(255,236,150,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 63% 33%,rgba(255,212,0,.48) 0 1px,transparent 1.5px),
    radial-gradient(circle at 79% 70%,rgba(255,212,0,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 21%,rgba(255,238,165,.48) 0 1px,transparent 1.5px);
}

/* Let the persistent fixed background remain visible while scrolling. */
.home-hero,
.flow-section,
.member-section,
.site-footer{
  background:transparent!important;
}

.flow-section::before,
.member-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,5,5,.60),rgba(5,5,5,.76));
}

.flow-section,
.member-section{
  position:relative;
  isolation:isolate;
}

/* Lightweight gold mouse trail */
.mouse-gold-trail{
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
}

.gold-trail-dot{
  position:fixed;
  width:7px;
  height:7px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,218,55,.92);
  box-shadow:
    0 0 7px rgba(255,232,115,.72),
    0 0 15px rgba(255,212,0,.28);
  transform:translate(-50%,-50%) scale(1);
  animation:goldTrailFade .62s ease-out forwards;
  will-change:transform,opacity;
}

@keyframes goldTrailFade{
  0%{
    opacity:.82;
    transform:translate(-50%,-50%) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.18);
  }
}

@media(max-width:760px){
  .mouse-gold-trail{
    display:none;
  }

  .global-gold-haze{
    animation:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mouse-gold-trail{
    display:none;
  }

  .global-gold-haze{
    animation:none!important;
  }
}


/* =========================================================
   BLACK VOID V3
   Smooth lower-section slide transitions + gold-only hover
   ========================================================= */

/* Replace generic reveal with directional slide-in */
.reveal{
  opacity:0!important;
  transform:translateY(34px)!important;
  transition:
    opacity .75s ease,
    transform .85s cubic-bezier(.16,.84,.28,1)!important;
}

.reveal.visible{
  opacity:1!important;
  transform:translateY(0)!important;
}

/* Alternate horizontal motion for lower content */
.flow-timeline.reveal{
  transform:translateX(-34px)!important;
}

.flow-timeline.reveal.visible{
  transform:translateX(0)!important;
}

.member-card.reveal{
  transform:translateX(34px)!important;
}

.member-card.reveal.visible{
  transform:translateX(0)!important;
}

.bottom-cta.reveal{
  transform:translateY(28px) scale(.985)!important;
}

.bottom-cta.reveal.visible{
  transform:translateY(0) scale(1)!important;
}

/* Gold-only section labels */
.section-intro span,
.eyebrow{
  color:var(--yellow)!important;
}

/* Flow cards, cleaner hover */
.flow-timeline article{
  transition:
    transform .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease!important;
}

.flow-timeline article:hover{
  transform:translateY(-4px)!important;
  background:#0d0d0d!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,212,0,.09),
    0 14px 34px rgba(0,0,0,.18)!important;
}

/* remove old cyan gradient underline */
.flow-timeline article::after{
  background:linear-gradient(90deg,var(--yellow),rgba(255,212,0,.18),transparent)!important;
  height:1px!important;
}

.flow-timeline article:hover::after{
  transform:scaleX(1)!important;
}

/* Gold-only index hover */
.flow-timeline article:hover .flow-index{
  transform:translateY(-2px) scale(1.035)!important;
  box-shadow:0 8px 20px rgba(255,212,0,.11)!important;
}

/* Membership cards, no cyan */
.member-checklist div{
  position:relative;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease!important;
}

.member-checklist div:hover{
  transform:translateX(4px)!important;
  border-color:rgba(255,212,0,.14)!important;
  background:#0d0d0d!important;
  box-shadow:inset 2px 0 0 rgba(255,212,0,.46)!important;
}

/* No cyan decorative text in lower cards */
.flow-timeline article::before{
  color:rgba(255,212,0,.04)!important;
}

/* Bottom CTA hover stays gold and clean */
.bottom-cta{
  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease!important;
}

.bottom-cta:hover{
  border-color:rgba(255,212,0,.12)!important;
  background:#0c0c0c!important;
}

.bottom-cta a{
  transition:
    transform .2s ease,
    box-shadow .2s ease!important;
}

.bottom-cta a:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 24px rgba(255,212,0,.13)!important;
}

/* Remove cyan from any lower pseudo elements */
.flow-section .cyan,
.member-section .cyan,
.flow-section [style*="cyan"],
.member-section [style*="cyan"]{
  color:var(--yellow)!important;
}

/* Soft divider transition between hero and lower sections */
.flow-section::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(720px,76%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.12),transparent);
  pointer-events:none;
}

.member-section::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(620px,68%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.08),transparent);
  pointer-events:none;
}

/* Avoid too much motion on mobile */
@media(max-width:760px){
  .flow-timeline.reveal,
  .member-card.reveal,
  .bottom-cta.reveal{
    transform:translateY(22px)!important;
  }

  .flow-timeline.reveal.visible,
  .member-card.reveal.visible,
  .bottom-cta.reveal.visible{
    transform:translateY(0)!important;
  }
}

/* V4 CODE SYMBOL CURSOR TRAIL */
.gold-trail-dot{
 width:auto!important;height:auto!important;border-radius:0!important;background:none!important;box-shadow:none!important;
 color:rgba(255,218,55,.9)!important;font-family:"Courier New",monospace!important;font-size:13px!important;font-weight:700!important;
 text-shadow:0 0 5px rgba(255,232,115,.6),0 0 12px rgba(255,212,0,.22)!important;
 animation:codeTrailFade .72s ease-out forwards!important;
}
@keyframes codeTrailFade{
 0%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-65%) scale(.7) rotate(var(--trail-rotate,0deg))}
}


/* =========================================================
   V5 RESPONSIVE MOBILE EXPERIENCE
   Desktop keeps orbit + mouse code trail.
   Mobile gets centered logo + soft breathing halo + touch ripple.
   ========================================================= */

.mobile-hero-logo{
  display:none;
}

.touch-ripple{
  position:fixed;
  z-index:9999;
  width:18px;
  height:18px;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(255,212,0,.65);
  box-shadow:
    0 0 10px rgba(255,212,0,.22),
    inset 0 0 8px rgba(255,212,0,.08);
  transform:translate(-50%,-50%) scale(.2);
  animation:mobileTouchRipple .48s ease-out forwards;
}

@keyframes mobileTouchRipple{
  0%{
    opacity:.8;
    transform:translate(-50%,-50%) scale(.2);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(2.8);
  }
}

@media(max-width:760px){

  /* Mobile hero becomes its own intentional layout */
  .void-hero{
    min-height:auto!important;
    padding:38px 0 30px;
    background:
      linear-gradient(
        180deg,
        #050505 0%,
        #060606 48%,
        #080704 100%
      )!important;
  }

  .void-shell{
    width:min(100% - 28px,1260px)!important;
    min-height:0!important;
    display:block!important;
    padding:0!important;
  }

  .void-copy{
    text-align:left;
  }

  .mini-brand-row{
    margin-bottom:20px!important;
  }

  .void-title{
    font-size:clamp(2.9rem,14vw,4.2rem)!important;
    line-height:.90!important;
    margin-bottom:20px!important;
  }

  .void-title span{
    margin-top:9px!important;
  }

  .void-copy .hero-copy{
    max-width:100%!important;
    margin-bottom:22px!important;
    font-size:.93rem!important;
    line-height:1.66!important;
  }

  .void-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-bottom:18px!important;
  }

  .void-actions .action-primary,
  .void-actions .action-secondary{
    width:100%!important;
    min-width:0!important;
    padding:14px 17px!important;
  }

  .hero-status-row{
    gap:8px!important;
  }

  .status-pill{
    padding:8px 10px!important;
    font-size:.66rem!important;
  }

  /* Hide desktop visual, show lightweight mobile visual */
  .void-logo-stage{
    display:none!important;
  }

  .mobile-hero-logo{
    position:relative;
    display:flex;
    width:100%;
    min-height:270px;
    margin-top:18px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    overflow:hidden;
  }

  .mobile-hero-logo img{
    position:relative;
    z-index:3;
    width:min(210px,58vw);
    height:min(210px,58vw);
    object-fit:contain;
    border-radius:50%;
    filter:
      drop-shadow(0 0 10px rgba(255,212,0,.28))
      drop-shadow(0 0 24px rgba(255,212,0,.10));
    animation:mobileLogoBreathe 5.8s ease-in-out infinite;
  }

  .mobile-halo{
    position:absolute;
    z-index:1;
    width:260px;
    height:260px;
    border-radius:50%;
    background:
      radial-gradient(circle,
        rgba(255,242,157,.15) 0 18%,
        rgba(255,212,0,.10) 34%,
        rgba(255,175,0,.035) 54%,
        transparent 72%);
    filter:blur(14px);
    animation:mobileHaloBreathe 6s ease-in-out infinite;
  }

  .mobile-logo-caption{
    position:relative;
    z-index:3;
    margin-top:2px;
    color:rgba(255,212,0,.76);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.13em;
  }

  @keyframes mobileLogoBreathe{
    0%,100%{
      transform:translateY(0) scale(1);
    }
    50%{
      transform:translateY(-4px) scale(1.01);
    }
  }

  @keyframes mobileHaloBreathe{
    0%,100%{
      opacity:.55;
      transform:scale(.97);
    }
    50%{
      opacity:.82;
      transform:scale(1.035);
    }
  }

  /* Persistent but subtle mobile background */
  .global-star-field{
    opacity:.18!important;
  }

  .haze-one{
    width:420px!important;
    height:420px!important;
    min-width:0!important;
    min-height:0!important;
    right:-210px!important;
    top:80px!important;
    opacity:.65;
  }

  .haze-two{
    width:340px!important;
    height:340px!important;
    min-width:0!important;
    min-height:0!important;
    left:-220px!important;
    top:72vh!important;
    opacity:.40;
  }

  /* Lower cards */
  .flow-section{
    padding-top:56px!important;
    padding-bottom:58px!important;
  }

  .section-intro{
    margin-bottom:28px!important;
  }

  .flow-timeline article{
    min-height:auto!important;
    padding:23px!important;
  }

  .flow-index{
    margin-bottom:20px!important;
  }

  .member-section{
    padding-bottom:62px!important;
  }

  .member-card{
    gap:28px!important;
    padding:24px!important;
  }

  .bottom-cta{
    width:calc(100% - 28px)!important;
    margin-bottom:42px!important;
    padding:22px!important;
  }

  /* No mouse trail on touch devices */
  .mouse-gold-trail{
    display:none!important;
  }
}

@media(max-width:430px){
  .site-nav a{
    font-size:.60rem!important;
  }

  .site-nav{
    gap:5px!important;
  }

  .site-nav .admin-nav{
    padding:8px 9px!important;
  }

  .brand-text strong{
    font-size:.67rem!important;
  }

  .void-title{
    font-size:2.8rem!important;
  }

  .mobile-hero-logo{
    min-height:245px;
  }

  .mobile-hero-logo img{
    width:185px;
    height:185px;
  }

  .mobile-halo{
    width:225px;
    height:225px;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-hero-logo img,
  .mobile-halo{
    animation:none!important;
  }
}


/* =========================================================
   V10 CHECK PAGE, GOLD STARFIELD + METEOR SHOWER
   ========================================================= */

.check-page{
  position:relative;
  overflow-x:hidden;
  background:#050505!important;
}

.check-space-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,212,0,.055),transparent 24%),
    radial-gradient(circle at 18% 82%,rgba(255,176,0,.025),transparent 26%),
    #050505;
}

.check-stars{
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    radial-gradient(circle at 7% 14%,rgba(255,226,74,.85) 0 1px,transparent 1.6px),
    radial-gradient(circle at 13% 38%,rgba(255,212,0,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 19% 72%,rgba(255,236,141,.58) 0 1px,transparent 1.6px),
    radial-gradient(circle at 27% 22%,rgba(255,212,0,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 33% 61%,rgba(255,231,103,.70) 0 1px,transparent 1.6px),
    radial-gradient(circle at 41% 11%,rgba(255,212,0,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 49% 47%,rgba(255,226,83,.55) 0 1px,transparent 1.6px),
    radial-gradient(circle at 56% 82%,rgba(255,212,0,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 63% 29%,rgba(255,238,159,.68) 0 1px,transparent 1.6px),
    radial-gradient(circle at 71% 66%,rgba(255,212,0,.52) 0 1px,transparent 1.6px),
    radial-gradient(circle at 79% 13%,rgba(255,226,71,.78) 0 1px,transparent 1.6px),
    radial-gradient(circle at 86% 43%,rgba(255,212,0,.44) 0 1px,transparent 1.5px),
    radial-gradient(circle at 92% 79%,rgba(255,236,138,.62) 0 1px,transparent 1.6px),
    radial-gradient(circle at 97% 26%,rgba(255,212,0,.36) 0 1px,transparent 1.5px);
  animation:checkStarsBreathe 7s ease-in-out infinite;
}

@keyframes checkStarsBreathe{
  0%,100%{opacity:.36;filter:brightness(.9)}
  50%{opacity:.62;filter:brightness(1.08)}
}

.meteor{
  position:absolute;
  width:120px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,244,162,.88) 60%,
    rgba(255,212,0,1)
  );
  box-shadow:
    0 0 7px rgba(255,212,0,.45),
    0 0 14px rgba(255,212,0,.18);
  opacity:0;
  transform:rotate(-28deg);
  transform-origin:right center;
}

.meteor::after{
  content:"";
  position:absolute;
  right:-2px;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff3a5;
  box-shadow:
    0 0 8px rgba(255,239,135,.85),
    0 0 16px rgba(255,212,0,.45);
}

.meteor-1{
  top:13%;
  left:82%;
  animation:meteorFall 8.8s linear infinite;
}

.meteor-2{
  top:34%;
  left:104%;
  animation:meteorFall 11.5s linear 3.8s infinite;
  transform:rotate(-31deg) scale(.8);
}

.meteor-3{
  top:6%;
  left:70%;
  animation:meteorFall 14s linear 7.2s infinite;
  transform:rotate(-25deg) scale(.65);
}

@keyframes meteorFall{
  0%,76%{
    opacity:0;
    translate:0 0;
  }
  78%{
    opacity:.92;
  }
  88%{
    opacity:.9;
  }
  100%{
    opacity:0;
    translate:-75vw 52vh;
  }
}

/* Let the check utility area reveal the page background */
.check-page .utility-page{
  background:transparent!important;
}

.check-page .utility-shell{
  position:relative;
  z-index:2;
}

/* subtle gold tint on the check form, no cyan pop */
.check-page .form-panel{
  background:rgba(14,16,18,.92)!important;
  backdrop-filter:blur(8px);
  border-color:rgba(255,212,0,.08)!important;
}

.check-page .panel-heading span{
  color:var(--yellow)!important;
}

@media(max-width:760px){
  .meteor{
    width:85px;
    opacity:.7;
  }

  .meteor-2,
  .meteor-3{
    display:none;
  }

  .check-stars{
    opacity:.38;
    animation-duration:9s;
  }
}

@media(prefers-reduced-motion:reduce){
  .meteor,
  .check-stars{
    animation:none!important;
  }

  .meteor{
    display:none!important;
  }
}


/* =========================================================
   V11 CHECK PAGE, SPARSE NATURAL STARS + METEOR STREAKS
   ========================================================= */

.check-page .check-stars{
  position:absolute;
  inset:0;
  opacity:1!important;
  background:none!important;
  animation:none!important;
}

.check-star{
  position:absolute;
  border-radius:50%;
  background:rgba(255,232,112,.9);
  box-shadow:0 0 5px rgba(255,212,0,.22);
  opacity:var(--star-opacity,.45);
  width:var(--star-size,1px);
  height:var(--star-size,1px);
  animation:singleStarTwinkle var(--star-duration,5s) ease-in-out infinite;
}

@keyframes singleStarTwinkle{
  0%,100%{opacity:calc(var(--star-opacity,.45) * .55)}
  50%{opacity:var(--star-opacity,.45)}
}

/* Make meteors the real visual accent */
.check-page .meteor{
  width:170px!important;
  height:1px!important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,223,73,.08) 24%,
    rgba(255,236,129,.55) 70%,
    rgba(255,248,196,.96) 100%
  )!important;
  box-shadow:
    0 0 8px rgba(255,212,0,.28),
    0 0 18px rgba(255,212,0,.10)!important;
  opacity:0;
}

.check-page .meteor::after{
  width:4px!important;
  height:4px!important;
  background:#fff3a4!important;
  box-shadow:
    0 0 8px rgba(255,244,170,.85),
    0 0 18px rgba(255,212,0,.38)!important;
}

.check-page .meteor-1{
  top:8%!important;
  left:105%!important;
  transform:rotate(-31deg)!important;
  animation:meteorNaturalOne 9.6s linear 1.2s infinite!important;
}

.check-page .meteor-2{
  top:26%!important;
  left:112%!important;
  transform:rotate(-28deg) scale(.84)!important;
  animation:meteorNaturalTwo 13.8s linear 5.6s infinite!important;
}

.check-page .meteor-3{
  top:3%!important;
  left:98%!important;
  transform:rotate(-35deg) scale(.68)!important;
  animation:meteorNaturalThree 17.5s linear 9.8s infinite!important;
}

.check-page .meteor-4{
  top:17%!important;
  left:118%!important;
  transform:rotate(-26deg) scale(.58)!important;
  animation:meteorNaturalFour 21s linear 13.4s infinite!important;
}

@keyframes meteorNaturalOne{
  0%,77%{opacity:0;translate:0 0}
  79%{opacity:.95}
  88%{opacity:.9}
  100%{opacity:0;translate:-120vw 78vh}
}

@keyframes meteorNaturalTwo{
  0%,82%{opacity:0;translate:0 0}
  84%{opacity:.75}
  92%{opacity:.72}
  100%{opacity:0;translate:-125vw 74vh}
}

@keyframes meteorNaturalThree{
  0%,86%{opacity:0;translate:0 0}
  88%{opacity:.62}
  94%{opacity:.58}
  100%{opacity:0;translate:-112vw 70vh}
}

@keyframes meteorNaturalFour{
  0%,89%{opacity:0;translate:0 0}
  91%{opacity:.52}
  96%{opacity:.48}
  100%{opacity:0;translate:-118vw 76vh}
}

@media(max-width:760px){
  .check-page .meteor{
    width:120px!important;
  }

  .check-page .meteor-3,
  .check-page .meteor-4{
    display:none!important;
  }
}

/* V12, persistent yellow holographic HUD atmosphere */
.check-page .check-space-bg{
 background:
  radial-gradient(circle at 73% 48%,rgba(255,212,0,.07),transparent 27%),
  radial-gradient(circle at 18% 45%,rgba(255,190,0,.035),transparent 24%),
  linear-gradient(rgba(255,212,0,.012) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,212,0,.012) 1px,transparent 1px),
  #050505!important;
 background-size:auto,auto,72px 72px,72px 72px,auto!important;
}
.hud-ring,.hud-arc,.hud-crosshair,.hud-data,.hud-scanline{position:absolute;pointer-events:none}
.hud-ring{border-radius:50%;border:1px solid rgba(255,212,0,.14)}
.hud-ring::before,.hud-ring::after{content:"";position:absolute;border-radius:50%;inset:12%;border:1px dashed rgba(255,212,0,.08)}
.hud-ring::after{inset:28%;border-style:solid;border-color:rgba(255,212,0,.06)}
.hud-ring-a{width:560px;height:560px;right:-180px;top:12%;animation:hudSpin 36s linear infinite}
.hud-ring-b{width:330px;height:330px;left:-120px;bottom:-80px;animation:hudSpinReverse 28s linear infinite}
.hud-arc{width:430px;height:430px;border-radius:50%;border:1px solid transparent}
.hud-arc-a{right:9%;top:19%;border-top-color:rgba(255,212,0,.22);border-right-color:rgba(255,212,0,.08);animation:hudSpin 18s linear infinite}
.hud-arc-b{left:8%;top:20%;width:240px;height:240px;border-left-color:rgba(255,212,0,.13);border-bottom-color:rgba(255,212,0,.05);animation:hudSpinReverse 22s linear infinite}
@keyframes hudSpin{to{transform:rotate(360deg)}}
@keyframes hudSpinReverse{to{transform:rotate(-360deg)}}
.hud-crosshair{width:42px;height:42px;opacity:.32}
.hud-crosshair::before,.hud-crosshair::after{content:"";position:absolute;background:rgba(255,212,0,.32)}
.hud-crosshair::before{width:100%;height:1px;top:50%}
.hud-crosshair::after{height:100%;width:1px;left:50%}
.hud-crosshair-a{right:22%;top:14%}.hud-crosshair-b{left:17%;bottom:18%}
.hud-data{font:700 9px/1.7 "Courier New",monospace;letter-spacing:.12em;color:rgba(255,212,0,.22)}
.hud-data-a{right:4%;bottom:9%;text-align:right}.hud-data-b{left:4%;top:16%}
.hud-scanline{left:0;right:0;height:1px;top:15%;opacity:.25;background:linear-gradient(90deg,transparent,rgba(255,212,0,.25),transparent);box-shadow:0 0 10px rgba(255,212,0,.08);animation:hudScan 8s ease-in-out infinite}
@keyframes hudScan{0%,100%{top:14%;opacity:.08}50%{top:82%;opacity:.3}}
.check-page .form-panel{box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 55px rgba(255,212,0,.035)!important}
.check-page .utility-side{position:relative}
.check-page .utility-side::after{content:"";position:absolute;left:0;bottom:-28px;width:120px;height:1px;background:linear-gradient(90deg,rgba(255,212,0,.45),transparent);box-shadow:0 0 9px rgba(255,212,0,.18)}
@media(max-width:760px){
 .hud-ring-a{width:360px;height:360px;right:-210px}.hud-ring-b,.hud-arc-b,.hud-data{display:none}
 .hud-arc-a{width:260px;height:260px;right:-90px;top:24%}.hud-scanline{animation-duration:10s}
}
@media(prefers-reduced-motion:reduce){.hud-ring,.hud-arc,.hud-scanline{animation:none!important}}


/* =========================================================
   V13 CONSTELLATION BACKGROUND
   Shared by Check Registration + Registration
   ========================================================= */

.check-page,
.registration-page{
  position:relative;
  overflow-x:hidden;
  background:#050505!important;
}

.constellation-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 24%,rgba(255,212,0,.045),transparent 25%),
    radial-gradient(circle at 20% 80%,rgba(255,180,0,.022),transparent 28%),
    #050505;
}

.constellation-stars{
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    radial-gradient(circle at 8% 17%,rgba(255,235,140,.80) 0 1px,transparent 1.6px),
    radial-gradient(circle at 16% 39%,rgba(255,212,0,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 25% 69%,rgba(255,239,159,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 34% 25%,rgba(255,212,0,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 43% 53%,rgba(255,229,100,.65) 0 1px,transparent 1.6px),
    radial-gradient(circle at 54% 15%,rgba(255,212,0,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 65% 76%,rgba(255,233,123,.52) 0 1px,transparent 1.6px),
    radial-gradient(circle at 74% 34%,rgba(255,212,0,.46) 0 1px,transparent 1.5px),
    radial-gradient(circle at 84% 63%,rgba(255,237,151,.58) 0 1px,transparent 1.6px),
    radial-gradient(circle at 93% 21%,rgba(255,212,0,.40) 0 1px,transparent 1.5px);
  animation:constellationStarBreathe 6.5s ease-in-out infinite;
}

@keyframes constellationStarBreathe{
  0%,100%{opacity:.32;filter:brightness(.9)}
  50%{opacity:.62;filter:brightness(1.12)}
}

.constellation-map{
  position:absolute;
  overflow:visible;
  opacity:.48;
  filter:drop-shadow(0 0 7px rgba(255,212,0,.08));
}

.constellation-map-a{
  width:46vw;
  height:34vw;
  min-width:520px;
  min-height:360px;
  right:-4vw;
  top:5vh;
  animation:constellationFloatA 12s ease-in-out infinite alternate;
}

.constellation-map-b{
  width:34vw;
  height:28vw;
  min-width:430px;
  min-height:300px;
  left:-7vw;
  bottom:-5vh;
  opacity:.28;
  animation:constellationFloatB 15s ease-in-out infinite alternate;
}

.constellation-lines line{
  stroke:rgba(255,212,0,.18);
  stroke-width:1;
}

.constellation-points circle{
  fill:#ffd400;
  opacity:.72;
  filter:drop-shadow(0 0 4px rgba(255,212,0,.7));
  animation:constellationPointTwinkle 3.8s ease-in-out infinite;
}

.constellation-points circle:nth-child(2n){animation-delay:.7s}
.constellation-points circle:nth-child(3n){animation-delay:1.4s}
.constellation-points circle:nth-child(4n){animation-delay:2.1s}

@keyframes constellationPointTwinkle{
  0%,100%{opacity:.28}
  50%{opacity:1}
}

@keyframes constellationFloatA{
  from{transform:translate3d(0,0,0) rotate(-2deg)}
  to{transform:translate3d(-1.5vw,1vh,0) rotate(1.5deg)}
}

@keyframes constellationFloatB{
  from{transform:translate3d(0,0,0) rotate(1deg)}
  to{transform:translate3d(1vw,-1vh,0) rotate(-1.5deg)}
}

.constellation-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(75px);
  opacity:.26;
}

.glow-a{
  width:380px;
  height:380px;
  right:8%;
  top:18%;
  background:radial-gradient(circle,rgba(255,212,0,.12),transparent 70%);
}

.glow-b{
  width:280px;
  height:280px;
  left:5%;
  bottom:12%;
  background:radial-gradient(circle,rgba(255,180,0,.07),transparent 70%);
}

/* Remove previous meteor/HUD layers if any markup or CSS remains */
.check-page .meteor,
.check-page .hud-ring,
.check-page .hud-arc,
.check-page .hud-crosshair,
.check-page .hud-data,
.check-page .hud-scanline,
.check-page .check-stars{
  display:none!important;
}

/* Let both utility pages reveal the constellation background */
.check-page .utility-page,
.registration-page .utility-page{
  background:transparent!important;
}

.check-page .utility-shell,
.registration-page .utility-shell{
  position:relative;
  z-index:2;
}

.check-page .form-panel,
.registration-page .form-panel{
  background:rgba(14,16,18,.92)!important;
  border-color:rgba(255,212,0,.08)!important;
  backdrop-filter:blur(8px);
  box-shadow:
    0 22px 70px rgba(0,0,0,.50),
    0 0 48px rgba(255,212,0,.025)!important;
}

.check-page .panel-heading span,
.registration-page .panel-heading span{
  color:var(--yellow)!important;
}

@media(max-width:760px){
  .constellation-map-a{
    width:520px;
    height:360px;
    right:-260px;
    top:12vh;
    opacity:.34;
    animation-duration:16s;
  }

  .constellation-map-b{
    display:none;
  }

  .constellation-stars{
    opacity:.38;
  }

  .glow-a{
    width:260px;
    height:260px;
    right:-80px;
  }

  .glow-b{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .constellation-map,
  .constellation-stars,
  .constellation-points circle{
    animation:none!important;
  }
}


/* =========================================================
   V14 FULL-PAGE CONSTELLATION FIELD
   Check + Registration, 3-second shimmer cycle
   ========================================================= */

.check-page,
.registration-page{
  min-height:100vh;
  background:#050505!important;
}

/* Cover every inch of the viewport and continue behind content */
.constellation-bg{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  overflow:hidden!important;
  z-index:-1!important;
  background:
    radial-gradient(circle at 78% 20%,rgba(255,212,0,.065),transparent 27%),
    radial-gradient(circle at 22% 82%,rgba(255,176,0,.035),transparent 31%),
    radial-gradient(circle at 48% 54%,rgba(255,212,0,.018),transparent 38%),
    #050505!important;
}

/* Denser but still elegant star bed */
.constellation-stars{
  position:absolute!important;
  inset:0!important;
  opacity:.68!important;
  background:
    radial-gradient(circle at 4% 12%,rgba(255,241,169,.80) 0 1px,transparent 1.6px),
    radial-gradient(circle at 9% 31%,rgba(255,212,0,.48) 0 1px,transparent 1.5px),
    radial-gradient(circle at 14% 64%,rgba(255,231,112,.58) 0 1px,transparent 1.6px),
    radial-gradient(circle at 19% 88%,rgba(255,212,0,.36) 0 1px,transparent 1.5px),
    radial-gradient(circle at 24% 21%,rgba(255,240,154,.60) 0 1px,transparent 1.6px),
    radial-gradient(circle at 29% 48%,rgba(255,212,0,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 35% 76%,rgba(255,235,126,.56) 0 1px,transparent 1.6px),
    radial-gradient(circle at 41% 15%,rgba(255,212,0,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 47% 37%,rgba(255,241,166,.62) 0 1px,transparent 1.6px),
    radial-gradient(circle at 53% 67%,rgba(255,212,0,.44) 0 1px,transparent 1.5px),
    radial-gradient(circle at 59% 90%,rgba(255,234,117,.52) 0 1px,transparent 1.6px),
    radial-gradient(circle at 64% 26%,rgba(255,212,0,.43) 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 54%,rgba(255,241,165,.64) 0 1px,transparent 1.6px),
    radial-gradient(circle at 76% 81%,rgba(255,212,0,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 18%,rgba(255,237,139,.64) 0 1px,transparent 1.6px),
    radial-gradient(circle at 87% 44%,rgba(255,212,0,.44) 0 1px,transparent 1.5px),
    radial-gradient(circle at 92% 71%,rgba(255,239,151,.58) 0 1px,transparent 1.6px),
    radial-gradient(circle at 97% 33%,rgba(255,212,0,.38) 0 1px,transparent 1.5px)!important;
  animation:fullStarShimmer 3s ease-in-out infinite!important;
}

@keyframes fullStarShimmer{
  0%,70%,100%{
    opacity:.36;
    filter:brightness(.88);
  }
  82%{
    opacity:.86;
    filter:brightness(1.55);
  }
  88%{
    opacity:.58;
    filter:brightness(1.05);
  }
  93%{
    opacity:.95;
    filter:brightness(1.72);
  }
}

/* Main constellations span wider across the viewport */
.constellation-map-a{
  width:58vw!important;
  height:42vw!important;
  min-width:720px!important;
  min-height:440px!important;
  right:-8vw!important;
  top:0!important;
  opacity:.58!important;
}

.constellation-map-b{
  width:46vw!important;
  height:38vw!important;
  min-width:600px!important;
  min-height:390px!important;
  left:-10vw!important;
  bottom:-10vh!important;
  opacity:.38!important;
}

/* Add stronger line shimmer every 3 seconds */
.constellation-lines line{
  stroke:rgba(255,212,0,.20)!important;
  animation:constellationLineShine 3s ease-in-out infinite;
}

@keyframes constellationLineShine{
  0%,70%,100%{
    stroke:rgba(255,212,0,.14);
    filter:none;
  }
  84%{
    stroke:rgba(255,232,102,.48);
    filter:drop-shadow(0 0 4px rgba(255,212,0,.45));
  }
  92%{
    stroke:rgba(255,245,170,.64);
    filter:drop-shadow(0 0 7px rgba(255,212,0,.65));
  }
}

/* Star nodes flash brighter on same 3-second rhythm */
.constellation-points circle{
  fill:#ffd400!important;
  animation:constellationNodeShine 3s ease-in-out infinite!important;
}

.constellation-points circle:nth-child(2n){animation-delay:.15s!important}
.constellation-points circle:nth-child(3n){animation-delay:.30s!important}
.constellation-points circle:nth-child(4n){animation-delay:.45s!important}

@keyframes constellationNodeShine{
  0%,68%,100%{
    opacity:.32;
    filter:drop-shadow(0 0 2px rgba(255,212,0,.22));
  }
  80%{
    opacity:.92;
    filter:drop-shadow(0 0 7px rgba(255,212,0,.74));
  }
  90%{
    opacity:1;
    filter:
      drop-shadow(0 0 9px rgba(255,242,156,.92))
      drop-shadow(0 0 18px rgba(255,212,0,.55));
  }
}

/* Slow gold glow pools, also pulse every 3 seconds */
.constellation-glow{
  animation:constellationGlowPulse 3s ease-in-out infinite!important;
}

@keyframes constellationGlowPulse{
  0%,70%,100%{opacity:.16;transform:scale(.98)}
  86%{opacity:.36;transform:scale(1.04)}
  93%{opacity:.46;transform:scale(1.07)}
}

/* Keep utility content above the background while preserving the effect */
.check-page .utility-page,
.registration-page .utility-page{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 74px);
  background:transparent!important;
}

/* Make the entire form area feel embedded in the constellation field */
.check-page .form-panel,
.registration-page .form-panel{
  background:rgba(12,13,14,.90)!important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.58),
    0 0 70px rgba(255,212,0,.035)!important;
}

/* Mobile gets the full field too, but fewer moving pieces */
@media(max-width:760px){
  .constellation-map-a{
    width:720px!important;
    height:460px!important;
    min-width:720px!important;
    min-height:460px!important;
    right:-420px!important;
    top:6vh!important;
    opacity:.42!important;
  }

  .constellation-map-b{
    display:block!important;
    width:620px!important;
    height:400px!important;
    min-width:620px!important;
    min-height:400px!important;
    left:-440px!important;
    bottom:-8vh!important;
    opacity:.24!important;
  }

  .constellation-stars{
    animation-duration:3s!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .constellation-stars,
  .constellation-lines line,
  .constellation-points circle,
  .constellation-glow{
    animation:none!important;
  }
}


/* V15 ADMIN LOGIN, GOLD CROWN EFFECT */
.admin-login-page{
  background:
    radial-gradient(circle at 50% 35%,rgba(255,212,0,.045),transparent 30%),
    #050505;
}

.admin-login-page .login-shell{
  position:relative;
  overflow:visible;
}

.admin-crown-stage{
  position:relative;
  width:150px;
  height:105px;
  margin:0 auto 10px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  filter:drop-shadow(0 0 14px rgba(255,212,0,.16));
}

.css-crown{
  position:relative;
  z-index:3;
  width:104px;
  height:60px;
  animation:crownFloat 4.8s ease-in-out infinite;
}

.crown-tip{
  position:absolute;
  bottom:13px;
  width:26px;
  height:48px;
  background:linear-gradient(180deg,#fff0a6 0%,#ffd400 38%,#b98200 100%);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  transform-origin:50% 100%;
  opacity:.96;
}

.tip-one{left:0;transform:rotate(-12deg) scale(.78)}
.tip-two{left:20px;transform:rotate(-5deg) scale(.94)}
.tip-three{left:39px;height:59px;transform:scale(1.04)}
.tip-four{left:59px;transform:rotate(5deg) scale(.94)}
.tip-five{left:79px;transform:rotate(12deg) scale(.78)}

.crown-base{
  position:absolute;
  left:5px;
  right:5px;
  bottom:2px;
  height:18px;
  border-radius:4px 4px 9px 9px;
  background:linear-gradient(180deg,#ffe76b,#d9a900 72%,#8c6500);
  border:1px solid rgba(255,245,180,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 12px rgba(255,212,0,.34);
}

.crown-aura{
  position:absolute;
  left:50%;
  top:54%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.crown-aura-one{
  width:125px;height:78px;
  background:radial-gradient(ellipse,rgba(255,212,0,.18),rgba(255,212,0,.045) 48%,transparent 72%);
  filter:blur(10px);
  animation:crownAura 3s ease-in-out infinite;
}

.crown-aura-two{
  width:155px;height:95px;
  border:1px solid rgba(255,212,0,.09);
  box-shadow:0 0 20px rgba(255,212,0,.05);
  animation:crownRing 7s linear infinite;
}

.crown-spark{
  position:absolute;
  z-index:4;
  width:3px;height:3px;
  border-radius:50%;
  background:#fff3a5;
  box-shadow:0 0 7px #ffd400,0 0 14px rgba(255,212,0,.55);
  animation:crownSpark 3s ease-in-out infinite;
}

.spark-one{left:18px;top:38px;animation-delay:.2s}
.spark-two{right:17px;top:28px;animation-delay:.9s}
.spark-three{left:42px;top:7px;animation-delay:1.5s}
.spark-four{right:43px;top:10px;animation-delay:2.1s}

@keyframes crownFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-5px) rotate(1deg)}
}

@keyframes crownAura{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.95)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}
}

@keyframes crownRing{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes crownSpark{
  0%,100%{opacity:.12;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.8)}
}

@media(max-width:760px){
  .admin-crown-stage{transform:scale(.88);margin-bottom:2px}
}

@media(prefers-reduced-motion:reduce){
  .css-crown,.crown-aura,.crown-spark{animation:none!important}
}

/* V16, unify public-page gold and add angelic falling light to admin login */
:root{
  --yellow:#ffd400!important;
  --yellow-soft:#ffe566!important;
  --yellow-border:rgba(255,212,0,.18)!important;
}

/* Force the three public pages to the exact same gold accent family */
body:not(.admin-login-page) .yellow,
.check-page .panel-heading span,
.registration-page .panel-heading span{color:#ffd400!important}

.admin-login-page{
  position:relative;
  overflow-x:hidden;
  min-height:100vh;
  background:#050505!important;
}
.admin-login-page .site-header,
.admin-login-page .login-shell{position:relative;z-index:3}
.angelic-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(ellipse at 50% -8%,rgba(255,238,145,.15),transparent 38%),
  radial-gradient(ellipse at 50% 36%,rgba(255,212,0,.045),transparent 36%)}
.angelic-radiance{position:absolute;left:50%;top:-18%;width:78vw;height:64vh;transform:translateX(-50%);background:conic-gradient(from 245deg at 50% 0%,transparent 0 32%,rgba(255,226,92,.035) 35%,transparent 39%,rgba(255,244,174,.055) 44%,transparent 49%,rgba(255,212,0,.03) 54%,transparent 60%);filter:blur(7px);animation:heavenBreathe 6s ease-in-out infinite}
.light-fall{position:absolute;top:-28vh;width:1px;height:30vh;background:linear-gradient(to bottom,transparent,rgba(255,244,175,.72),rgba(255,212,0,.16),transparent);box-shadow:0 0 8px rgba(255,212,0,.22);opacity:0;animation:angelFall 5.4s linear infinite}
.lf1{left:13%;animation-delay:.2s}.lf2{left:28%;height:22vh;animation-delay:2.1s}.lf3{left:43%;animation-delay:1.1s}.lf4{left:59%;height:25vh;animation-delay:3.2s}.lf5{left:76%;animation-delay:1.7s}.lf6{left:89%;height:20vh;animation-delay:4.1s}
.angel-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff1a0;box-shadow:0 0 7px #ffd400,0 0 16px rgba(255,212,0,.38);animation:angelSpark 3s ease-in-out infinite}
.as1{left:10%;top:22%;animation-delay:.2s}.as2{left:23%;top:68%;animation-delay:1.4s}.as3{left:38%;top:35%;animation-delay:2.2s}.as4{left:64%;top:21%;animation-delay:.8s}.as5{left:79%;top:61%;animation-delay:1.8s}.as6{left:92%;top:39%;animation-delay:2.6s}
@keyframes angelFall{0%{transform:translateY(-20vh);opacity:0}12%{opacity:.48}72%{opacity:.28}100%{transform:translateY(150vh);opacity:0}}
@keyframes heavenBreathe{0%,100%{opacity:.45;transform:translateX(-50%) scale(.98)}50%{opacity:.9;transform:translateX(-50%) scale(1.04)}}
@keyframes angelSpark{0%,100%{opacity:.12;transform:scale(.55)}50%{opacity:.9;transform:scale(1.45)}}
.admin-login-page .login-shell{background:rgba(13,14,15,.91)!important;border-color:rgba(255,212,0,.12)!important;box-shadow:0 24px 80px rgba(0,0,0,.62),0 0 65px rgba(255,212,0,.035)!important}
.admin-login-page input:focus{border-color:rgba(255,212,0,.55)!important;box-shadow:0 0 0 3px rgba(255,212,0,.07)!important}
@media(max-width:760px){.angelic-radiance{width:140vw}.light-fall:nth-of-type(even){display:none}.angel-spark{opacity:.7}}
@media(prefers-reduced-motion:reduce){.angelic-radiance,.light-fall,.angel-spark{animation:none!important}.light-fall{display:none}}


/* =========================================================
   V17 ADMIN LOGIN, MINIMAL YELLOW DOMAIN AURA
   ========================================================= */

.admin-login-page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#030303!important;
}

.admin-login-page .angelic-bg{
  display:none!important;
}

.domain-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,212,0,.035),transparent 30%),
    #030303;
}

.domain-void{
  position:absolute;
  left:50%;
  top:48%;
  width:min(58vw,760px);
  height:min(58vw,760px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      #000 0 37%,
      rgba(0,0,0,.98) 38%,
      rgba(255,212,0,.06) 46%,
      rgba(255,212,0,.12) 53%,
      rgba(255,212,0,.035) 63%,
      transparent 72%);
  box-shadow:
    0 0 45px rgba(255,212,0,.08),
    0 0 130px rgba(255,212,0,.045);
  filter:blur(2px);
  animation:domainVoidPulse 7s ease-in-out infinite;
}

.domain-void::after{
  content:"";
  position:absolute;
  inset:-5%;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 18deg,
      rgba(255,222,76,.08) 20deg 24deg,
      transparent 26deg 62deg,
      rgba(255,241,163,.05) 64deg 68deg,
      transparent 70deg 112deg,
      rgba(255,212,0,.07) 114deg 119deg,
      transparent 121deg 360deg
    );
  filter:blur(9px);
  animation:domainEnergySpin 18s linear infinite;
}

.domain-ring{
  position:absolute;
  left:50%;
  top:48%;
  border-radius:50%;
  pointer-events:none;
}

.ring-main{
  width:min(66vw,860px);
  height:min(66vw,860px);
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,212,0,.13);
  box-shadow:
    inset 0 0 50px rgba(255,212,0,.025),
    0 0 50px rgba(255,212,0,.025);
  animation:domainRingSpin 32s linear infinite;
}

.ring-main::before,
.ring-main::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:7%;
  border:1px solid rgba(255,212,0,.055);
}

.ring-main::after{
  inset:16%;
  border-style:dashed;
  border-color:rgba(255,212,0,.045);
}

.ring-soft{
  width:min(74vw,980px);
  height:min(42vw,540px);
  transform:translate(-50%,-50%) rotate(-16deg);
  border:1px solid rgba(255,212,0,.07);
  filter:blur(.2px);
  animation:domainRingSoft 40s linear infinite reverse;
}

.domain-haze{
  position:absolute;
  top:50%;
  width:42vw;
  height:30vh;
  filter:blur(55px);
  opacity:.20;
}

.haze-left{
  left:-8vw;
  background:radial-gradient(ellipse,rgba(255,212,0,.14),transparent 70%);
  transform:rotate(9deg);
  animation:domainHazeLeft 10s ease-in-out infinite alternate;
}

.haze-right{
  right:-8vw;
  background:radial-gradient(ellipse,rgba(255,225,88,.12),transparent 70%);
  transform:rotate(-8deg);
  animation:domainHazeRight 12s ease-in-out infinite alternate;
}

.domain-wisp{
  position:absolute;
  width:48vw;
  height:12vh;
  border-radius:50%;
  filter:blur(20px);
  opacity:.12;
  background:
    linear-gradient(90deg,transparent,rgba(255,235,140,.24),transparent);
}

.wisp-1{
  left:6vw;
  top:24%;
  transform:rotate(-10deg);
  animation:wispDriftOne 14s ease-in-out infinite alternate;
}

.wisp-2{
  right:4vw;
  top:58%;
  transform:rotate(12deg);
  animation:wispDriftTwo 17s ease-in-out infinite alternate;
}

.wisp-3{
  left:28%;
  bottom:8%;
  width:36vw;
  transform:rotate(-3deg);
  opacity:.08;
  animation:wispDriftThree 19s ease-in-out infinite alternate;
}

.domain-dust{
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    radial-gradient(circle at 9% 14%,rgba(255,225,88,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 17% 71%,rgba(255,212,0,.32) 0 1px,transparent 1.5px),
    radial-gradient(circle at 31% 34%,rgba(255,236,132,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 47% 82%,rgba(255,212,0,.30) 0 1px,transparent 1.5px),
    radial-gradient(circle at 62% 19%,rgba(255,230,105,.44) 0 1px,transparent 1.5px),
    radial-gradient(circle at 73% 64%,rgba(255,212,0,.34) 0 1px,transparent 1.5px),
    radial-gradient(circle at 88% 29%,rgba(255,236,140,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 95% 78%,rgba(255,212,0,.28) 0 1px,transparent 1.5px);
  animation:domainDustShine 5s ease-in-out infinite;
}

.admin-login-page .site-header,
.admin-login-page .login-shell{
  position:relative;
  z-index:3;
}

.admin-login-page .login-shell{
  background:rgba(8,9,10,.88)!important;
  backdrop-filter:blur(12px);
  border-color:rgba(255,212,0,.10)!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.72),
    0 0 70px rgba(255,212,0,.025)!important;
}

/* Let the crown feel like it belongs to the domain core */
.admin-login-page .admin-crown-stage{
  filter:
    drop-shadow(0 0 14px rgba(255,212,0,.22))
    drop-shadow(0 0 35px rgba(255,212,0,.08));
}

@keyframes domainVoidPulse{
  0%,100%{
    transform:translate(-50%,-50%) scale(.98);
    filter:blur(2px) brightness(.92);
  }
  50%{
    transform:translate(-50%,-50%) scale(1.025);
    filter:blur(1.5px) brightness(1.08);
  }
}

@keyframes domainEnergySpin{
  to{transform:rotate(360deg)}
}

@keyframes domainRingSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes domainRingSoft{
  to{transform:translate(-50%,-50%) rotate(344deg)}
}

@keyframes domainHazeLeft{
  from{transform:translate3d(-2vw,0,0) rotate(9deg);opacity:.11}
  to{transform:translate3d(5vw,-2vh,0) rotate(6deg);opacity:.23}
}

@keyframes domainHazeRight{
  from{transform:translate3d(2vw,0,0) rotate(-8deg);opacity:.10}
  to{transform:translate3d(-5vw,2vh,0) rotate(-5deg);opacity:.21}
}

@keyframes wispDriftOne{
  from{transform:translateX(-5vw) rotate(-10deg);opacity:.07}
  to{transform:translateX(10vw) rotate(-7deg);opacity:.15}
}

@keyframes wispDriftTwo{
  from{transform:translateX(6vw) rotate(12deg);opacity:.06}
  to{transform:translateX(-10vw) rotate(9deg);opacity:.14}
}

@keyframes wispDriftThree{
  from{transform:translateY(0) rotate(-3deg);opacity:.04}
  to{transform:translateY(-4vh) rotate(0deg);opacity:.10}
}

@keyframes domainDustShine{
  0%,100%{opacity:.13;filter:brightness(.9)}
  50%{opacity:.28;filter:brightness(1.2)}
}

@media(max-width:760px){
  .domain-void{
    width:520px;
    height:520px;
  }

  .ring-main{
    width:610px;
    height:610px;
  }

  .ring-soft{
    width:680px;
    height:390px;
  }

  .domain-haze{
    width:60vw;
  }

  .domain-wisp{
    width:72vw;
  }
}

@media(prefers-reduced-motion:reduce){
  .domain-void,
  .domain-ring,
  .domain-haze,
  .domain-wisp,
  .domain-dust{
    animation:none!important;
  }
}


/* =========================================================
   V18 CINEMATIC BLUR + ZOOM PAGE TRANSITION
   Inspired by the uploaded reference video.
   ========================================================= */

html{
  background:#050505;
}

body{
  transition:
    filter .42s cubic-bezier(.2,.72,.2,1),
    transform .42s cubic-bezier(.2,.72,.2,1),
    opacity .42s ease;
  transform-origin:center center;
}

body.page-leaving{
  filter:blur(12px) brightness(1.14);
  transform:scale(1.035);
  opacity:.12;
}

body.page-entering{
  animation:pageEnterBlur .62s cubic-bezier(.16,.84,.28,1) both;
}

@keyframes pageEnterBlur{
  0%{
    filter:blur(15px) brightness(1.18);
    transform:scale(1.045);
    opacity:.08;
  }
  52%{
    filter:blur(5px) brightness(1.07);
    transform:scale(1.015);
    opacity:.74;
  }
  100%{
    filter:blur(0) brightness(1);
    transform:scale(1);
    opacity:1;
  }
}

.page-transition{
  position:fixed;
  inset:0;
  z-index:2147480000;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,238,146,.14) 0,
      rgba(255,212,0,.055) 24%,
      rgba(5,5,5,.50) 62%,
      #050505 100%);
  backdrop-filter:blur(0);
  transition:
    opacity .38s ease,
    backdrop-filter .38s ease;
}

.page-transition.active{
  opacity:1;
  backdrop-filter:blur(13px);
}

/* gentle gold bloom during midpoint */
.page-transition::after{
  content:"";
  position:absolute;
  inset:-10%;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,245,177,.22),
      rgba(255,212,0,.08) 25%,
      transparent 58%);
  filter:blur(30px);
  transform:scale(.72);
}

.page-transition.active::after{
  animation:transitionBloom .44s ease-out forwards;
}

@keyframes transitionBloom{
  0%{
    opacity:0;
    transform:scale(.65);
  }
  48%{
    opacity:.75;
    transform:scale(1);
  }
  100%{
    opacity:0;
    transform:scale(1.2);
  }
}

/* keep UI responsive and avoid excessive motion on mobile */
@media(max-width:760px){
  body.page-leaving{
    filter:blur(8px) brightness(1.08);
    transform:scale(1.02);
  }

  body.page-entering{
    animation-duration:.48s;
  }

  .page-transition.active{
    backdrop-filter:blur(8px);
  }
}

@media(prefers-reduced-motion:reduce){
  body,
  body.page-leaving,
  body.page-entering{
    animation:none!important;
    transition:none!important;
    filter:none!important;
    transform:none!important;
    opacity:1!important;
  }

  .page-transition{
    display:none!important;
  }
}


/* =========================================================
   V19 OSO WEEK SCROLL STORY
   Uses the user's archival OSO photos.
   ========================================================= */

.oso-story{
  position:relative;
  height:430vh;
  background:#050505;
  isolation:isolate;
}

.oso-story-sticky{
  position:sticky;
  top:0;
  height:100vh;
  min-height:650px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 45%,rgba(255,212,0,.055),transparent 26%),
    radial-gradient(circle at 18% 68%,rgba(255,176,0,.022),transparent 28%),
    #050505;
}

.story-ambient{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  opacity:.22;
}

.ambient-left{
  width:35vw;
  height:35vw;
  left:-16vw;
  bottom:-10vw;
  background:radial-gradient(circle,rgba(255,212,0,.16),transparent 70%);
}

.ambient-right{
  width:42vw;
  height:42vw;
  right:-18vw;
  top:10vh;
  background:radial-gradient(circle,rgba(255,212,0,.12),transparent 70%);
}

.story-topline{
  position:absolute;
  z-index:30;
  top:100px;
  left:50%;
  width:min(1320px,calc(100% - 64px));
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:"Courier New",monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.15em;
  color:rgba(255,212,0,.58);
}

.story-counter{
  color:#747474;
}

.story-counter b{
  color:#ffd400;
}

.story-ghost-word{
  position:absolute;
  z-index:0;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) translateX(var(--ghost-x,0px));
  font-size:clamp(8rem,20vw,24rem);
  font-weight:900;
  letter-spacing:-.075em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,212,0,.045);
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
}

.story-stage{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
}

.story-photo{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#090909;
  border:1px solid rgba(255,212,0,.12);
  box-shadow:
    0 32px 100px rgba(0,0,0,.55),
    0 0 65px rgba(255,212,0,.025);
  will-change:transform,opacity,clip-path;
}

.story-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(var(--img-scale,1.04));
  filter:saturate(.88) contrast(1.03) brightness(.78);
  transition:filter .25s ease;
}

.story-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),transparent 56%,rgba(0,0,0,.48)),
    radial-gradient(circle at 80% 20%,rgba(255,212,0,.06),transparent 33%);
  pointer-events:none;
}

.story-photo figcaption{
  position:absolute;
  z-index:4;
  left:18px;
  right:18px;
  bottom:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-size:.68rem;
  letter-spacing:.11em;
}

.story-photo figcaption span{
  color:#ffd400;
  font-family:"Courier New",monospace;
}

.story-photo-1{
  width:min(56vw,860px);
  height:min(67vh,650px);
  left:52%;
  top:51%;
  transform:
    translate(-50%,-50%)
    translate(var(--p1-x,0px),var(--p1-y,0px))
    rotate(var(--p1-r,-4deg))
    scale(var(--p1-s,.86));
  opacity:var(--p1-o,0);
  clip-path:inset(var(--p1-clip,0 0 0 0) round 22px);
}

.story-photo-2{
  width:min(62vw,920px);
  height:min(68vh,660px);
  left:51%;
  top:50%;
  transform:
    translate(-50%,-50%)
    translate(var(--p2-x,44vw),var(--p2-y,3vh))
    rotate(var(--p2-r,5deg))
    scale(var(--p2-s,.92));
  opacity:var(--p2-o,0);
  clip-path:inset(var(--p2-clip,0 0 0 0) round 22px);
}

.story-photo-3{
  width:min(64vw,980px);
  height:min(70vh,690px);
  left:50%;
  top:49%;
  transform:
    translate(-50%,-50%)
    translate(var(--p3-x,0px),var(--p3-y,28vh))
    rotate(var(--p3-r,-2deg))
    scale(var(--p3-s,.94));
  opacity:var(--p3-o,0);
  clip-path:inset(var(--p3-clip,0 0 0 0) round 22px);
}

.story-copy{
  position:absolute;
  z-index:20;
  pointer-events:none;
  will-change:transform,opacity;
}

.story-eyebrow{
  display:block;
  margin-bottom:14px;
  color:#ffd400;
  font-family:"Courier New",monospace;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
}

.story-copy h2{
  margin:0;
  color:#f2f1eb;
  font-size:clamp(3.6rem,7.2vw,8.2rem);
  line-height:.88;
  letter-spacing:-.06em;
}

.story-copy h2 em{
  color:#ffd400;
  font-style:normal;
}

.story-copy-intro{
  left:max(5vw,48px);
  bottom:11vh;
  opacity:var(--intro-o,1);
  transform:translateY(var(--intro-y,0px));
}

.story-copy-middle{
  left:max(5vw,48px);
  top:17vh;
  opacity:var(--middle-o,0);
  transform:translateX(var(--middle-x,-40px));
}

.story-copy-middle h2{
  font-size:clamp(3rem,5.5vw,6.2rem);
  max-width:950px;
}

.story-copy-final{
  right:max(5vw,48px);
  top:50%;
  max-width:650px;
  transform:translateY(-50%) translateX(var(--final-x,70px));
  opacity:var(--final-o,0);
  text-align:right;
  pointer-events:auto;
}

.story-copy-final h2{
  font-size:clamp(4rem,7vw,7.5rem);
}

.story-copy-final p{
  margin:22px 0 26px auto;
  max-width:440px;
  color:#a4a4a4;
  font-size:1rem;
  line-height:1.65;
}

.story-cta{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:14px 19px;
  border-radius:999px;
  background:#ffd400;
  color:#060606;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 10px 28px rgba(255,212,0,.13);
  transition:transform .2s ease,box-shadow .2s ease;
}

.story-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(255,212,0,.18);
}

.story-cta span{
  font-size:1.1rem;
}

.story-progress{
  position:absolute;
  z-index:40;
  left:50%;
  bottom:28px;
  width:min(520px,42vw);
  height:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.08);
}

.story-progress-fill{
  display:block;
  width:var(--story-progress,0%);
  height:100%;
  background:linear-gradient(90deg,#ffd400,rgba(255,212,0,.25));
  box-shadow:0 0 10px rgba(255,212,0,.28);
}

/* Smooth bridge into the existing registration flow */
.oso-story + .flow-section{
  position:relative;
  border-top:0!important;
  background:#050505!important;
}

.oso-story + .flow-section::before{
  background:
    linear-gradient(to bottom,#050505 0%,rgba(5,5,5,.96) 22%,rgba(5,5,5,.76) 100%)!important;
}

/* Mobile gets an intentional editorial stack instead of heavy sticky math */
@media(max-width:760px){
  .oso-story{
    height:auto;
    padding:70px 14px 74px;
  }

  .oso-story-sticky{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    background:transparent;
  }

  .story-topline{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    transform:none;
    margin-bottom:28px;
  }

  .story-counter,
  .story-progress,
  .story-ghost-word,
  .story-copy-middle{
    display:none;
  }

  .story-copy{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    opacity:1!important;
    text-align:left;
  }

  .story-copy-intro{
    margin-bottom:34px;
  }

  .story-copy h2,
  .story-copy-final h2{
    font-size:clamp(2.8rem,14vw,4.4rem);
  }

  .story-stage{
    position:relative;
    inset:auto;
    display:grid;
    gap:16px;
  }

  .story-photo{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/10;
    transform:none!important;
    opacity:1!important;
    clip-path:none!important;
    border-radius:16px;
  }

  .story-photo img{
    filter:saturate(.9) contrast(1.02) brightness(.82);
  }

  .story-copy-final{
    margin-top:38px;
    max-width:none;
    pointer-events:auto;
  }

  .story-copy-final p{
    margin:18px 0 22px;
  }

  .ambient-left,
  .ambient-right{
    opacity:.12;
  }
}

@media(prefers-reduced-motion:reduce){
  .oso-story{
    height:auto;
    padding:80px 20px;
  }

  .oso-story-sticky{
    position:relative;
    height:auto;
  }

  .story-stage{
    position:relative;
    display:grid;
    gap:18px;
  }

  .story-photo,
  .story-copy{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    transform:none!important;
    opacity:1!important;
    clip-path:none!important;
  }

  .story-photo{
    aspect-ratio:16/10;
  }

  .story-progress,
  .story-ghost-word{
    display:none;
  }
}


/* =========================================================
   V20 ADMIN LOGIN POLISH
   Production-style typography and layout
   ========================================================= */

.admin-login-page{
  min-height:100vh;
  background:#030303!important;
  color:#f4f2e9;
}

.admin-auth-shell{
  position:relative;
  z-index:4;
  width:min(100%,920px);
  min-height:calc(100vh - 74px);
  margin:0 auto;
  padding:70px 24px 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.admin-auth-card{
  position:relative;
  width:min(100%,560px);
  padding:38px 38px 28px;
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(255,212,0,.018),transparent 38%),
    rgba(10,11,12,.92);
  border:1px solid rgba(255,212,0,.10);
  box-shadow:
    0 28px 90px rgba(0,0,0,.66),
    0 0 70px rgba(255,212,0,.025);
  backdrop-filter:blur(14px);
}

.admin-auth-copy{
  text-align:center;
  margin-bottom:28px;
}

.admin-auth-copy .eyebrow{
  margin-bottom:12px;
  color:#ffd400!important;
  font-family:"Courier New",monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.16em;
}

.admin-auth-copy h1{
  margin:0;
  color:#f2f1eb;
  font-size:clamp(2.4rem,5vw,3.8rem);
  line-height:.94;
  letter-spacing:-.055em;
}

.admin-auth-copy p{
  max-width:430px;
  margin:18px auto 0;
  color:#96999d;
  font-size:.9rem;
  line-height:1.65;
}

.admin-auth-form{
  display:grid;
  gap:17px;
}

.admin-auth-form label{
  display:grid;
  gap:8px;
  color:#d6d6d3;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
}

.admin-auth-form input{
  width:100%;
  height:52px;
  padding:0 15px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  background:#08090a;
  color:#f3f1e8;
  font:inherit;
  outline:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.admin-auth-form input::placeholder{
  color:#64676b;
}

.admin-auth-form input:focus{
  border-color:rgba(255,212,0,.42);
  box-shadow:0 0 0 3px rgba(255,212,0,.055);
  background:#0a0b0c;
}

.password-field{
  position:relative;
}

.password-field input{
  padding-right:74px;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:11px;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#ffd400;
  font-family:"Courier New",monospace;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}

.admin-signin-btn{
  min-height:52px;
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:11px!important;
  padding:0 17px!important;
  background:#ffd400!important;
  color:#050505!important;
  font-size:.82rem!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  box-shadow:none!important;
}

.admin-signin-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(255,212,0,.13)!important;
}

.admin-signin-btn span{
  font-size:1.1rem;
}

.login-message{
  min-height:18px;
  margin-top:2px;
  font-size:.75rem;
  line-height:1.5;
  color:#a7aaad;
}

.login-message .msg,
.login-message .err{
  margin:0;
}

.admin-auth-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.055);
  color:#5f6265;
  font-family:"Courier New",monospace;
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.12em;
}

/* Align admin typography with public pages */
.admin-login-page,
.admin-auth-card,
.admin-auth-form,
.admin-auth-copy{
  font-family:Arial,Helvetica,sans-serif;
}

/* Refine crown scale with the new card */
.admin-auth-card .admin-crown-stage{
  margin-bottom:8px;
  transform:scale(.94);
}

@media(max-width:760px){
  .admin-auth-shell{
    min-height:calc(100vh - 64px);
    padding:42px 14px 28px;
  }

  .admin-auth-card{
    padding:28px 20px 22px;
    border-radius:18px;
  }

  .admin-auth-copy h1{
    font-size:2.55rem;
  }

  .admin-auth-copy p{
    font-size:.84rem;
  }

  .admin-auth-footer{
    flex-direction:column;
    gap:6px;
  }
}


/* =========================================================
   V23 SECURE ATTENDANCE SESSION UI
   ========================================================= */

.attendance-page{
  min-height:100vh;
  background:#050505!important;
}

.attendance-utility{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 74px);
  background:transparent!important;
}

.attendance-panel{
  background:rgba(12,13,14,.92)!important;
  border-color:rgba(255,212,0,.09)!important;
  backdrop-filter:blur(10px);
}

.session-control-grid{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(320px,1.2fr);
  gap:26px;
  align-items:stretch;
}

.session-control-panel,
.session-display-panel{
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  background:#0a0b0c;
  padding:22px;
}

.session-control-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}

.session-duration-label{
  display:grid;
  gap:8px;
  font-size:.76rem;
  font-weight:800;
  color:#d4d4cf;
}

.session-duration-label select{
  height:46px;
  padding:0 12px;
  border-radius:10px;
  background:#070808;
  border:1px solid rgba(255,255,255,.08);
  color:#f4f2e9;
  outline:none;
}

.admin-session-btn{
  width:100%;
}

.secondary-btn{
  min-height:43px;
  border-radius:10px;
  border:1px solid rgba(255,212,0,.14);
  background:#101112;
  color:#f3f1e8;
  font-weight:800;
  cursor:pointer;
  padding:0 14px;
}

.secondary-btn:hover{
  border-color:rgba(255,212,0,.28);
  background:#14140f;
}

.session-display-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:390px;
}

.session-state-badge{
  margin-bottom:16px;
  padding:7px 10px;
  border-radius:999px;
  background:#111;
  border:1px solid rgba(255,255,255,.07);
  color:#777;
  font-family:"Courier New",monospace;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.08em;
}

.session-state-badge.active{
  color:#5de69a;
  border-color:rgba(93,230,154,.2);
  background:rgba(93,230,154,.06);
}

.secure-qr-placeholder{
  position:relative;
  width:218px;
  height:218px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#f7f7f3;
  color:#090909;
  overflow:hidden;
  box-shadow:0 0 40px rgba(255,212,0,.04);
}

.secure-qr-placeholder .qr-grid{
  position:absolute;
  inset:12px;
  opacity:.11;
  background:
    linear-gradient(90deg,#000 8px,transparent 8px) 0 0/18px 18px,
    linear-gradient(#000 8px,transparent 8px) 0 0/18px 18px;
}

.secure-qr-placeholder span{
  position:relative;
  z-index:2;
  max-width:150px;
  text-align:center;
  font-family:"Courier New",monospace;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
}

.session-link-box{
  width:100%;
  margin-top:18px;
  display:grid;
  gap:7px;
}

.session-link-box span{
  color:#777;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.session-link-box code{
  display:block;
  width:100%;
  overflow-wrap:anywhere;
  padding:11px 12px;
  border-radius:9px;
  background:#060707;
  border:1px solid rgba(255,255,255,.06);
  color:#ffd400;
  font-size:.67rem;
  line-height:1.5;
}

.session-expiry{
  margin-top:12px;
  min-height:20px;
  color:#a8a8a3;
  font-family:"Courier New",monospace;
  font-size:.72rem;
}

.session-actions{
  margin-top:12px;
}

.status-confirmed{
  color:#5de69a;
  font-weight:800;
}

.status-pending{
  color:#ffd400;
  font-weight:800;
}

@media(max-width:900px){
  .session-control-grid{
    grid-template-columns:1fr;
  }

  .session-display-panel{
    min-height:330px;
  }
}

@media(max-width:760px){
  .attendance-utility .utility-shell{
    display:block;
  }

  .attendance-utility .utility-side{
    margin-bottom:26px;
  }
}


/* =========================================================
   V25 ATTENDANCE PAGE UI FIX
   Mobile-first, consistent with Registration + Check
   ========================================================= */

.attendance-page{
  min-height:100vh;
  background:#050505!important;
  color:#f3f1e8;
  overflow-x:hidden;
}

.attendance-page .site-header{
  position:relative;
  z-index:20;
}

.attendance-page .site-header .brand img{
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  object-fit:contain!important;
  border-radius:50%;
}

.attendance-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 28%,rgba(255,212,0,.055),transparent 26%),
    radial-gradient(circle at 18% 76%,rgba(255,178,0,.025),transparent 28%),
    #050505;
}

.attendance-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,212,0,.08);
}

.orbit-one{
  width:560px;
  height:560px;
  right:-210px;
  top:8%;
  box-shadow:
    inset 0 0 45px rgba(255,212,0,.018),
    0 0 45px rgba(255,212,0,.018);
  animation:attendanceOrbitSpin 34s linear infinite;
}

.orbit-one::before{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  border:1px dashed rgba(255,212,0,.055);
}

.orbit-two{
  width:350px;
  height:350px;
  left:-150px;
  bottom:-90px;
  opacity:.55;
  animation:attendanceOrbitSpinReverse 28s linear infinite;
}

.attendance-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(65px);
}

.attendance-glow.glow-one{
  width:320px;
  height:320px;
  right:8%;
  top:24%;
  background:radial-gradient(circle,rgba(255,212,0,.11),transparent 72%);
  opacity:.24;
}

.attendance-glow.glow-two{
  width:260px;
  height:260px;
  left:5%;
  bottom:10%;
  background:radial-gradient(circle,rgba(255,183,0,.06),transparent 72%);
  opacity:.20;
}

.attendance-stars{
  position:absolute;
  inset:0;
  opacity:.35;
  background:
    radial-gradient(circle at 8% 16%,rgba(255,239,148,.68) 0 1px,transparent 1.6px),
    radial-gradient(circle at 18% 49%,rgba(255,212,0,.36) 0 1px,transparent 1.5px),
    radial-gradient(circle at 27% 80%,rgba(255,233,126,.44) 0 1px,transparent 1.6px),
    radial-gradient(circle at 42% 27%,rgba(255,212,0,.30) 0 1px,transparent 1.5px),
    radial-gradient(circle at 55% 67%,rgba(255,239,151,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 68% 17%,rgba(255,212,0,.35) 0 1px,transparent 1.5px),
    radial-gradient(circle at 81% 72%,rgba(255,235,130,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 94% 38%,rgba(255,212,0,.30) 0 1px,transparent 1.5px);
  animation:attendanceStarsGlow 5s ease-in-out infinite;
}

.attendance-main{
  position:relative;
  z-index:2;
  width:min(1220px,calc(100% - 40px));
  min-height:calc(100vh - 74px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
  gap:70px;
  align-items:center;
  padding:54px 0;
}

.attendance-copy{
  max-width:620px;
}

.attendance-copy h1{
  margin:18px 0 20px;
  max-width:720px;
  color:#f3f1e8;
  font-size:clamp(3.6rem,6.6vw,7.4rem);
  line-height:.88;
  letter-spacing:-.065em;
}

.attendance-copy > p{
  max-width:570px;
  color:#a1a3a6;
  font-size:1rem;
  line-height:1.7;
}

.attendance-steps{
  margin-top:34px;
  display:grid;
  gap:10px;
}

.attendance-steps div{
  display:flex;
  align-items:center;
  gap:12px;
  color:#b8b8b4;
  font-size:.86rem;
}

.attendance-steps b{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:10px;
  background:#ffd400;
  color:#060606;
  font-family:"Courier New",monospace;
  font-size:.68rem;
}

.attendance-card{
  width:100%;
  max-width:540px;
  justify-self:end;
  padding:30px;
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,212,0,.018),transparent 38%),
    rgba(12,13,14,.93);
  border:1px solid rgba(255,212,0,.11);
  box-shadow:
    0 28px 90px rgba(0,0,0,.62),
    0 0 70px rgba(255,212,0,.025);
  backdrop-filter:blur(12px);
}

.attendance-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:30px;
}

.attendance-mini-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.attendance-mini-brand img{
  width:42px!important;
  height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  object-fit:contain!important;
  border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(255,212,0,.09));
}

.attendance-mini-brand span{
  display:grid;
  gap:2px;
}

.attendance-mini-brand strong{
  color:#f1efe8;
  font-size:.78rem;
  letter-spacing:.06em;
}

.attendance-mini-brand small{
  color:#777a7e;
  font-size:.65rem;
}

.session-live-indicator{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:#101112;
  color:#777a7d;
  font-family:"Courier New",monospace;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
}

.session-live-indicator.active{
  color:#5de69a;
  border-color:rgba(93,230,154,.22);
  background:rgba(93,230,154,.06);
}

.session-live-indicator.invalid{
  color:#ff7d7d;
  border-color:rgba(255,125,125,.20);
  background:rgba(255,125,125,.05);
}

.attendance-heading{
  margin-bottom:22px;
}

.attendance-heading span{
  color:#ffd400!important;
}

.attendance-heading h2{
  margin:6px 0 8px;
  font-size:2rem;
  letter-spacing:-.035em;
}

.attendance-heading p{
  color:#8d9094;
  line-height:1.6;
}

.attendance-form{
  display:grid;
  gap:16px;
}

.attendance-form label{
  display:grid;
  gap:8px;
  color:#d6d6d3;
  font-size:.78rem;
  font-weight:800;
}

.attendance-form input{
  width:100%;
  height:54px;
  padding:0 15px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  background:#08090a;
  color:#f3f1e8;
  font-size:.98rem;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.attendance-form input::placeholder{
  color:#5f6266;
}

.attendance-form input:focus{
  border-color:rgba(255,212,0,.46);
  box-shadow:0 0 0 3px rgba(255,212,0,.055);
}

.attendance-submit{
  min-height:52px;
  border-radius:11px!important;
  margin:0!important;
}

.attendance-message{
  margin-top:18px;
}

.attendance-message .details{
  background:#08090a;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  padding:18px;
}

.attendance-message .details > div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:9px;
}

.attendance-message .details span{
  color:#787b7f;
  font-size:.74rem;
}

.attendance-message .details b{
  color:#f2f1eb;
  font-size:.76rem;
  text-align:right;
}

.attendance-card-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:24px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.055);
  color:#5d6063;
  font-family:"Courier New",monospace;
  font-size:.60rem;
  font-weight:700;
  letter-spacing:.12em;
}

@keyframes attendanceOrbitSpin{
  to{transform:rotate(360deg)}
}

@keyframes attendanceOrbitSpinReverse{
  to{transform:rotate(-360deg)}
}

@keyframes attendanceStarsGlow{
  0%,100%{opacity:.20;filter:brightness(.9)}
  50%{opacity:.42;filter:brightness(1.12)}
}

@media(max-width:900px){
  .attendance-main{
    grid-template-columns:1fr;
    gap:38px;
    padding:42px 0 54px;
  }

  .attendance-copy{
    max-width:760px;
  }

  .attendance-card{
    max-width:none;
    justify-self:stretch;
  }
}

@media(max-width:760px){
  .attendance-page .site-header{
    padding-left:14px;
    padding-right:14px;
  }

  .attendance-page .brand-text small{
    display:none;
  }

  .attendance-page .site-nav{
    gap:8px!important;
  }

  .attendance-page .site-nav a{
    font-size:.62rem!important;
  }

  .attendance-main{
    width:min(100% - 28px,1220px);
    padding-top:30px;
  }

  .attendance-copy h1{
    font-size:clamp(3rem,15vw,4.4rem);
  }

  .attendance-copy > p{
    font-size:.9rem;
  }

  .attendance-steps{
    margin-top:26px;
  }

  .attendance-card{
    padding:22px 18px 20px;
    border-radius:18px;
  }

  .attendance-card-top{
    align-items:flex-start;
  }

  .attendance-mini-brand img{
    width:36px!important;
    height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
  }

  .attendance-heading h2{
    font-size:1.7rem;
  }

  .orbit-one{
    width:430px;
    height:430px;
    right:-280px;
  }

  .orbit-two{
    width:280px;
    height:280px;
    left:-190px;
  }
}

@media(prefers-reduced-motion:reduce){
  .attendance-orbit,
  .attendance-stars{
    animation:none!important;
  }
}


/* =========================================================
   V26 ADMIN STUDENT DATABASE
   ========================================================= */

.admin-panel[hidden]{
  display:none!important;
}

.admin-panel{
  width:100%;
}

[data-admin-tab]{
  cursor:pointer;
}

[data-admin-tab].active{
  color:#ffd400!important;
  background:rgba(255,212,0,.07)!important;
}

.student-db-card{
  min-width:0;
}

.student-db-heading,
.export-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

.student-db-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 190px 110px;
  gap:12px;
  align-items:end;
  margin-bottom:18px;
}

.student-db-toolbar label{
  display:grid;
  gap:7px;
}

.student-db-toolbar label > span,
.student-db-count > span{
  color:#777a7e;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.student-db-toolbar input,
.student-db-toolbar select{
  width:100%;
  height:44px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.08);
  background:#080909;
  color:#f1efe8;
  padding:0 12px;
  outline:none;
}

.student-db-toolbar input:focus,
.student-db-toolbar select:focus{
  border-color:rgba(255,212,0,.38);
  box-shadow:0 0 0 3px rgba(255,212,0,.045);
}

.student-db-count{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:#080909;
}

.student-db-count strong{
  color:#ffd400;
  font-size:1rem;
}

.student-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid rgba(255,255,255,.065);
  border-radius:13px;
  background:#080909;
}

.student-table{
  width:100%;
  min-width:1120px;
  border-collapse:collapse;
  font-size:.74rem;
}

.student-table th{
  position:sticky;
  top:0;
  z-index:2;
  padding:13px 14px;
  text-align:left;
  color:#777a7e;
  background:#0d0e0f;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.62rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.student-table td{
  padding:13px 14px;
  color:#d8d8d4;
  border-bottom:1px solid rgba(255,255,255,.045);
  white-space:nowrap;
}

.student-table tbody tr:hover{
  background:rgba(255,212,0,.018);
}

.student-table tbody tr:last-child td{
  border-bottom:0;
}

.empty-table-cell{
  padding:34px!important;
  text-align:center;
  color:#74777a!important;
}

.export-note{
  margin-top:14px;
  padding:13px 14px;
  border-radius:10px;
  background:#080909;
  border:1px solid rgba(255,255,255,.06);
  color:#777a7e;
  font-size:.76rem;
  line-height:1.55;
}

.export-csv-btn{
  width:auto!important;
  min-width:150px;
  padding-left:18px!important;
  padding-right:18px!important;
}

@media(max-width:900px){
  .student-db-toolbar{
    grid-template-columns:1fr 1fr;
  }

  .student-db-count{
    grid-column:1 / -1;
  }

  .student-db-heading,
  .export-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:600px){
  .student-db-toolbar{
    grid-template-columns:1fr;
  }

  .student-db-count{
    grid-column:auto;
  }
}


/* V27 HOTFIX */
.student-table td.status-confirmed{
  color:#5de69a!important;
  font-weight:900;
}
.student-table td.status-pending{
  color:#ffd400!important;
  font-weight:900;
}


/* =========================================================
   V28 EVENT SETTINGS
   ========================================================= */

.event-settings-card{
  max-width:1100px;
}

.event-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}

.setting-card{
  min-height:190px;
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.065);
  background:#090a0b;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
}

.setting-copy{
  display:grid;
  gap:7px;
}

.setting-kicker{
  color:#ffd400;
  font-family:"Courier New",monospace;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.11em;
}

.setting-copy h3{
  margin:0;
  color:#f2f1eb;
  font-size:1.05rem;
}

.setting-copy p{
  margin:0;
  max-width:460px;
  color:#7f8286;
  font-size:.78rem;
  line-height:1.55;
}

.switch-control{
  display:flex;
  align-items:center;
  gap:11px;
  cursor:pointer;
  width:max-content;
}

.switch-control input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.switch-track{
  position:relative;
  width:48px;
  height:26px;
  border-radius:999px;
  background:#17191a;
  border:1px solid rgba(255,255,255,.09);
  transition:.2s ease;
}

.switch-thumb{
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#777b7d;
  transition:.2s ease;
}

.switch-control input:checked + .switch-track{
  background:rgba(255,212,0,.14);
  border-color:rgba(255,212,0,.32);
}

.switch-control input:checked + .switch-track .switch-thumb{
  transform:translateX(22px);
  background:#ffd400;
  box-shadow:0 0 12px rgba(255,212,0,.24);
}

.switch-control > span:last-child{
  color:#c5c5c1;
  font-size:.77rem;
  font-weight:800;
}

.settings-select{
  width:180px;
  height:44px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.08);
  background:#070808;
  color:#f3f1e8;
  padding:0 11px;
}

.settings-summary-card{
  background:
    linear-gradient(145deg,rgba(255,212,0,.035),transparent 48%),
    #090a0b;
}

.event-settings-actions{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.settings-save-btn{
  width:auto!important;
  min-width:190px;
  padding-left:20px!important;
  padding-right:20px!important;
}

@media(max-width:800px){
  .event-settings-grid{
    grid-template-columns:1fr;
  }

  .event-settings-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .settings-save-btn{
    width:100%!important;
  }
}


/* =========================================================
   V29 EXPORT DATA
   ========================================================= */

.export-card{
  max-width:1100px;
}

.export-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}

.export-option-card{
  min-height:180px;
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.065);
  background:#090a0b;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.export-option-card h3{
  margin:0;
  color:#f3f1e8;
  font-size:1.05rem;
}

.export-option-card p{
  margin:0;
  color:#7e8185;
  font-size:.78rem;
  line-height:1.55;
}

.export-select{
  width:100%!important;
  max-width:310px;
  margin-top:auto;
}

.export-count{
  margin-top:auto;
  color:#ffd400;
  font-size:3.2rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.05em;
}

.export-field-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:auto;
}

.export-field-list span{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(255,212,0,.10);
  background:rgba(255,212,0,.035);
  color:#b9b9b4;
  font-size:.65rem;
}

.export-security-card{
  background:
    linear-gradient(145deg,rgba(255,212,0,.03),transparent 50%),
    #090a0b;
}

.export-actions-row{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.export-filename-preview{
  display:block;
  margin-top:5px;
  color:#686b6e;
  font-family:"Courier New",monospace;
  font-size:.62rem;
}

.export-csv-btn{
  min-width:160px!important;
  width:auto!important;
}

@media(max-width:800px){
  .export-grid{
    grid-template-columns:1fr;
  }

  .export-actions-row{
    align-items:stretch;
    flex-direction:column;
  }

  .export-csv-btn{
    width:100%!important;
  }
}


/* V32 CLEAN REAL QR */
.secure-qr-placeholder{
  position:relative;
  display:grid!important;
  place-items:center!important;
  padding:12px!important;
  background:#f7f7f3!important;
  overflow:hidden!important;
}

.qr-idle-state{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.qr-idle-state .qr-grid{
  position:absolute;
  inset:12px;
  opacity:.11;
  background:
    linear-gradient(90deg,#000 8px,transparent 8px) 0 0/18px 18px,
    linear-gradient(#000 8px,transparent 8px) 0 0/18px 18px;
}

.qr-idle-state > span{
  position:relative;
  z-index:2;
  color:#050505;
  font-family:"Courier New",monospace;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
}

.real-qr-code{
  position:relative;
  z-index:5;
  width:224px;
  height:224px;
  background:#fff;
  line-height:0;
}

.real-qr-code canvas,
.real-qr-code img{
  display:block!important;
  width:224px!important;
  height:224px!important;
  max-width:224px!important;
  max-height:224px!important;
}

.secure-qr-placeholder.has-real-qr{
  width:248px!important;
  height:248px!important;
  background:#fff!important;
  box-shadow:0 0 36px rgba(255,212,0,.08)!important;
}


/* =========================================================
   V33 QR SHARE + PERFORMANCE + LOGOUT FIX
   ========================================================= */

/* QR gets a generous white quiet zone. */
.secure-qr-placeholder.has-real-qr{
  box-sizing:content-box!important;
  width:216px!important;
  height:216px!important;
  padding:20px!important;
  border-radius:10px!important;
  overflow:visible!important;
  background:#ffffff!important;
}

.real-qr-code{
  width:216px!important;
  height:216px!important;
  background:#ffffff!important;
  overflow:visible!important;
}

.real-qr-code canvas,
.real-qr-code img{
  width:216px!important;
  height:216px!important;
  max-width:216px!important;
  max-height:216px!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
}

.session-actions{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.session-actions .secondary-btn{
  min-height:40px;
}

.qr-sharing-note{
  max-width:520px;
  margin-top:10px;
  color:#777b7f;
  text-align:center;
  font-size:.68rem;
  line-height:1.5;
}

/* Fullscreen/presentation QR. */
.secure-qr-placeholder:fullscreen,
.secure-qr-placeholder.qr-presentation-mode{
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  border-radius:0!important;
  background:#ffffff!important;
  display:grid!important;
  place-items:center!important;
  z-index:2147483000!important;
}

.secure-qr-placeholder:fullscreen .real-qr-code,
.secure-qr-placeholder.qr-presentation-mode .real-qr-code{
  width:min(72vmin,720px)!important;
  height:min(72vmin,720px)!important;
}

.secure-qr-placeholder:fullscreen .real-qr-code canvas,
.secure-qr-placeholder:fullscreen .real-qr-code img,
.secure-qr-placeholder.qr-presentation-mode .real-qr-code canvas,
.secure-qr-placeholder.qr-presentation-mode .real-qr-code img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}

/* Fast, lightweight page navigation. No dramatic blur/zoom. */
body{
  transition:opacity .12s ease!important;
  transform:none!important;
  filter:none!important;
}

body.page-leaving{
  opacity:.72!important;
  transform:none!important;
  filter:none!important;
}

body.page-entering{
  animation:pageEnterFast .16s ease both!important;
}

@keyframes pageEnterFast{
  from{opacity:.72}
  to{opacity:1}
}

.page-transition{
  background:rgba(5,5,5,.22)!important;
  backdrop-filter:none!important;
  transition:opacity .12s ease!important;
}

.page-transition.active{
  opacity:1!important;
  backdrop-filter:none!important;
}

.page-transition::after{
  display:none!important;
}

/* Slightly reduce persistent GPU blur cost in the header. */
.site-header{
  backdrop-filter:blur(7px)!important;
}

@media(max-width:760px){
  .secure-qr-placeholder.has-real-qr{
    width:200px!important;
    height:200px!important;
    padding:17px!important;
  }

  .real-qr-code,
  .real-qr-code canvas,
  .real-qr-code img{
    width:200px!important;
    height:200px!important;
    max-width:200px!important;
    max-height:200px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body,
  .page-transition{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   V34 QR OUTPUT FIX + UNLIMITED SESSION
   ========================================================= */

/* QRCode.js intentionally toggles canvas/img display.
   Do not force both visible, or two QR codes stack vertically. */
.real-qr-code canvas,
.real-qr-code img{
  width:216px!important;
  height:216px!important;
  max-width:216px!important;
  max-height:216px!important;
  border:0!important;
  border-radius:0!important;
  object-fit:contain!important;
}

/* Respect the library's inline visibility state. */
.real-qr-code canvas[style*="display: none"]{
  display:none!important;
}

.real-qr-code img[style*="display: none"]{
  display:none!important;
}

/* Full screen QR must also show only the active QR output. */
.secure-qr-placeholder:fullscreen .real-qr-code canvas,
.secure-qr-placeholder:fullscreen .real-qr-code img,
.secure-qr-placeholder.qr-presentation-mode .real-qr-code canvas,
.secure-qr-placeholder.qr-presentation-mode .real-qr-code img{
  max-width:none!important;
  max-height:none!important;
}

.session-expiry{
  text-align:center;
}


/* =========================================================
   V35 PERSISTENT ATTENDANCE SESSION + HISTORY
   ========================================================= */

.session-history-card{
  margin-top:18px;
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.065);
  background:#090a0b;
}

.session-history-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:16px;
}

.session-history-heading h3{
  margin:5px 0 3px;
  color:#f3f1e8;
  font-size:1.05rem;
}

.session-history-heading p,
.session-history-note{
  margin:0;
  color:#777b7f;
  font-size:.72rem;
  line-height:1.5;
}

.session-history-wrap{
  width:100%;
  overflow:auto;
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  background:#070808;
}

.session-history-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-size:.72rem;
}

.session-history-table th{
  padding:11px 12px;
  text-align:left;
  color:#707479;
  background:#0d0e0f;
  border-bottom:1px solid rgba(255,255,255,.065);
  font-size:.60rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.session-history-table td{
  padding:11px 12px;
  color:#d1d1cc;
  border-bottom:1px solid rgba(255,255,255,.04);
  white-space:nowrap;
}

.session-history-table tbody tr:last-child td{
  border-bottom:0;
}

.history-status{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  font-family:"Courier New",monospace;
  font-size:.60rem;
  font-weight:900;
  letter-spacing:.05em;
}

.history-active{
  color:#5de69a;
  background:rgba(93,230,154,.06);
  border:1px solid rgba(93,230,154,.18);
}

.history-ended{
  color:#ffd400;
  background:rgba(255,212,0,.05);
  border:1px solid rgba(255,212,0,.14);
}

.history-expired{
  color:#999d9f;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.history-end-btn{
  min-height:32px;
  padding:0 11px;
  border-radius:7px;
  border:1px solid rgba(255,212,0,.17);
  background:#111212;
  color:#f0eee7;
  font-size:.67rem;
  font-weight:800;
  cursor:pointer;
}

.history-end-btn:hover{
  border-color:rgba(255,212,0,.38);
  color:#ffd400;
}

.session-history-note{
  margin-top:11px;
}

@media(max-width:760px){
  .session-history-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}