/* Phase 2 public UX enhancement - non-destructive */
:root{
  --ui-primary:#0b78b6;
  --ui-primary-2:#2563eb;
  --ui-indigo:#4338ca;
  --ui-ink:#0f172a;
  --ui-muted:#64748b;
  --ui-line:#bfdbfe;
  --ui-soft:#eff6ff;
  --ui-card:#ffffff;
  --ui-shadow:0 22px 60px rgba(15,23,42,.12);
  --ui-shadow-hover:0 30px 80px rgba(15,23,42,.18);
}
body{
  background:
    radial-gradient(circle at 8% 8%, rgba(14,165,233,.18), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(99,102,241,.16), transparent 28rem),
    linear-gradient(180deg,#f8fbff 0%, #eef6ff 100%) !important;
}
.header{border-bottom:1px solid rgba(191,219,254,.72)!important;}
.hero{isolation:isolate;min-height:210px;position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 42%),
             radial-gradient(circle at 85% 18%,rgba(255,255,255,.22),transparent 11rem);
}
.hero h1{letter-spacing:.02em;}
.hero h2{margin:8px 0 0;font-size:clamp(24px,3vw,40px);color:rgba(255,255,255,.92);}
.hero p{max-width:760px;font-size:clamp(15px,1.4vw,18px);}

.activity-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 18px;padding:14px;border:1px solid rgba(191,219,254,.7);
  border-radius:22px;background:rgba(255,255,255,.82);
  box-shadow:0 12px 36px rgba(15,23,42,.07);backdrop-filter:blur(14px);
}
.activity-search{position:relative;flex:1 1 280px;}
.activity-search input{
  width:100%;min-height:46px;border:1px solid var(--ui-line);border-radius:999px;
  padding:0 16px 0 42px;font-size:15px;font-weight:800;outline:none;color:var(--ui-ink);background:#fff;
}
.activity-search::before{
  content:"⌕";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:#2563eb;font-size:20px;font-weight:900;
}
.activity-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.activity-filter button{
  min-height:38px;border:1px solid var(--ui-line);border-radius:999px;background:#fff;color:#1e3a8a;
  padding:7px 12px;font-weight:1000;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.activity-filter button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.13);}
.activity-filter button.is-active{background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2));color:#fff;border-color:transparent;}
.activity-count{margin:-6px 0 16px;color:var(--ui-muted);font-size:14px;font-weight:900;}

.activity-groups{display:flex;flex-direction:column;gap:26px;}
.activity-group{
  border:1px solid rgba(191,219,254,.72);background:rgba(255,255,255,.52);
  border-radius:28px;padding:16px;box-shadow:0 14px 36px rgba(15,23,42,.06);
}
.activity-group-title{
  margin:0 0 14px;display:flex;align-items:center;gap:10px;color:#0f172a;font-size:22px;font-weight:1000;
}
.activity-group-title::before{
  content:"";width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#2563eb);
  box-shadow:0 0 0 6px rgba(37,99,235,.10);
}
.activity-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.activity-card{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.activity-card::after{
  content:"";position:absolute;inset:auto -20% -46% -20%;height:120px;
  background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.10),transparent 72%);
  opacity:0;transition:opacity .22s ease;pointer-events:none;
}
.activity-card:hover{transform:translateY(-6px);box-shadow:var(--ui-shadow-hover);border-color:rgba(37,99,235,.28);}
.activity-card:hover::after{opacity:1;}
.activity-cover img{transition:transform .35s ease,filter .35s ease;}
.activity-card:hover .activity-cover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.03);}
.activity-card .btn{position:relative;overflow:hidden;}
.meta-row span{min-width:0;}

.event-layout{align-items:start;}
.event-info,.register-card,.card{border-color:rgba(191,219,254,.65)!important;}
.public-register-form input,.public-register-form select,.public-register-form textarea{
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.public-register-form input:focus,.public-register-form select:focus,.public-register-form textarea:focus{
  border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
.register-guide{
  margin:0 0 14px;padding:14px 16px;border:1px solid #bfdbfe;border-radius:18px;
  background:linear-gradient(135deg,#eff6ff,#ffffff);color:#1e3a8a;font-size:14px;line-height:1.7;
}
.register-guide strong{display:block;font-size:15px;color:#0f172a;margin-bottom:4px;}
.form-progress{
  margin:0 0 14px;padding:13px 14px;border:1px solid #dbeafe;border-radius:18px;background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.form-progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:14px;font-weight:1000;color:#1e3a8a;}
.form-progress-bar{height:9px;border-radius:999px;background:#e5eefc;overflow:hidden;}
.form-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#0ea5e9,#2563eb);border-radius:999px;transition:width .25s ease;}
.form-progress.is-complete .form-progress-top{color:#15803d;}
.form-progress.is-complete .form-progress-fill{background:linear-gradient(90deg,#22c55e,#16a34a);}
.privacy-notice{box-shadow:0 12px 28px rgba(37,99,235,.08);}

.success-card{
  overflow:hidden;position:relative;border-radius:28px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
}
.success-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background:linear-gradient(90deg,#0ea5e9,#2563eb,#4338ca);
}
.success-card h1{font-size:clamp(28px,4vw,42px);}
.summary-grid{border:1px solid #dbeafe;border-radius:22px;padding:12px;background:#ffffff;}
.qr-box{
  border:1px solid #bfdbfe!important;border-radius:24px!important;background:#eff6ff!important;
  box-shadow:0 14px 34px rgba(37,99,235,.10);
}
.ticket-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px;}

.back-to-top{
  position:fixed;right:18px;bottom:18px;width:46px;height:46px;border:0;border-radius:50%;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2));color:#fff;font-size:20px;font-weight:1000;
  box-shadow:0 14px 32px rgba(37,99,235,.28);cursor:pointer;z-index:99;opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.reveal-on-scroll{opacity:0;transform:translateY(16px);transition:opacity .48s ease,transform .48s ease;}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0);}
.no-match{
  display:none;padding:24px;border:1px dashed #93c5fd;border-radius:22px;background:rgba(239,246,255,.82);
  color:#1e3a8a;font-weight:1000;text-align:center;
}
.no-match.is-visible{display:block;}

@media(max-width:760px){
  .activity-toolbar{display:flex;align-items:stretch;flex-direction:column;gap:12px;padding:14px;}
  .activity-search{flex:0 0 auto;width:100%;min-height:0;}
  .activity-search input{width:100%;min-height:48px;height:48px;box-sizing:border-box;}
  .activity-search::before{top:24px;transform:translateY(-50%);}
  .activity-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;justify-content:stretch;}
  .activity-filter button{width:100%;min-width:0;min-height:44px;padding:8px 10px;font-size:15px;}
  .hero{padding:28px 22px;}
  .activity-group{padding:12px;border-radius:22px;}
  .activity-group-title{font-size:19px;}
}
@media(max-width:420px){
  .activity-filter{grid-template-columns:1fr 1fr;}
  .activity-filter button{font-size:14px;}
}
@media print{
  .header,.site-footer,.actions,.ticket-actions,.back-to-top{display:none!important;}
  body{background:#fff!important;}
  .success-card{box-shadow:none!important;border:1px solid #dbeafe!important;}
}


/* Phase 3: lively public frontend */
body::before,
body::after{
  content:"";
  position:fixed;
  width:360px;
  height:360px;
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  filter:blur(2px);
}
body::before{
  left:-140px;
  top:120px;
  background:radial-gradient(circle, rgba(56,189,248,.28), transparent 68%);
  animation:floatGlowA 9s ease-in-out infinite alternate;
}
body::after{
  right:-160px;
  bottom:60px;
  background:radial-gradient(circle, rgba(99,102,241,.22), transparent 70%);
  animation:floatGlowB 11s ease-in-out infinite alternate;
}
@keyframes floatGlowA{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(42px,30px,0) scale(1.12);}
}
@keyframes floatGlowB{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-38px,-32px,0) scale(1.08);}
}

.hero{
  box-shadow:0 28px 70px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.hero::after{
  content:"";
  position:absolute;
  inset:-40% auto auto 52%;
  width:520px;
  height:520px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  transform:rotate(18deg);
  animation:heroBubble 7s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroBubble{
  from{transform:translate3d(0,0,0) scale(1) rotate(18deg);}
  to{transform:translate3d(-26px,18px,0) scale(1.08) rotate(12deg);}
}
.hero h1,
.hero h2,
.hero p{
  position:relative;
  z-index:1;
}
.hero h1{
  text-shadow:0 8px 22px rgba(15,23,42,.18);
}
.hero p{
  animation:softRise .75s ease both;
}
@keyframes softRise{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.activity-card{
  transform-style:preserve-3d;
}
.activity-card:hover{
  transform:translateY(-7px) rotateX(1.5deg) rotateY(-1.5deg);
}
.activity-card .badge{
  box-shadow:0 8px 20px rgba(22,163,74,.16);
}
.activity-card h2{
  transition:color .2s ease, transform .2s ease;
}
.activity-card:hover h2{
  color:#1d4ed8;
  transform:translateX(2px);
}
.activity-card .btn{
  box-shadow:0 14px 28px rgba(37,99,235,.18);
}
.activity-card .btn:hover{
  animation:buttonPulse .8s ease;
}
@keyframes buttonPulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.28);}
  70%{box-shadow:0 0 0 12px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}

.activity-group{
  position:relative;
  overflow:hidden;
}
.activity-group::after{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.09), transparent 68%);
  pointer-events:none;
}
.activity-group-title{
  position:relative;
}

.activity-search input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 5px rgba(37,99,235,.12), 0 12px 24px rgba(15,23,42,.06);
}
.activity-filter button{
  position:relative;
  overflow:hidden;
}
.activity-filter button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.38) 42%, transparent 68%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.activity-filter button:hover::after{
  transform:translateX(120%);
}

.form-progress{
  position:sticky;
  top:12px;
  z-index:5;
}
.form-progress-fill{
  background-size:28px 28px;
  background-image:linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%, transparent);
  animation:progressStripe 1.1s linear infinite;
}
@keyframes progressStripe{
  from{background-position:0 0;}
  to{background-position:28px 0;}
}

.public-register-form .field-wrap{
  transition:transform .18s ease, background .18s ease;
  border-radius:14px;
}
.public-register-form .field-wrap:focus-within{
  transform:translateX(2px);
}

.success-card{
  box-shadow:0 28px 80px rgba(15,23,42,.14)!important;
}
.success-card::after{
  content:"";
  position:absolute;
  right:-90px;
  top:42px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.13), transparent 70%);
  pointer-events:none;
}
.qr-box img{
  transition:transform .2s ease;
}
.qr-box:hover img{
  transform:scale(1.03);
}

.front-confetti{
  position:fixed;
  width:8px;
  height:14px;
  top:-20px;
  border-radius:3px;
  pointer-events:none;
  z-index:9999;
  opacity:.92;
  animation:confettiFall 1.9s ease-in forwards;
}
@keyframes confettiFall{
  to{transform:translate3d(var(--x, 0), 105vh, 0) rotate(540deg); opacity:0;}
}

@media(max-width:760px){
  body::before,body::after{width:240px;height:240px;}
  .hero::after{width:320px;height:320px;left:46%;top:-20%;}
  .form-progress{position:static;}
  .activity-card:hover{transform:translateY(-4px);}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}


/* Phase 4: make frontend form progress clearer */
.form-progress{
  border:2px solid #93c5fd !important;
  background:#ffffff !important;
  box-shadow:0 14px 34px rgba(37,99,235,.12) !important;
}
.form-progress-top{
  color:#0f172a !important;
}
.form-progress-text{
  color:#1d4ed8 !important;
}
.form-progress-state{
  color:#dc2626 !important;
}
.form-progress.is-complete .form-progress-state{
  color:#16a34a !important;
}
.form-progress-bar{
  height:14px !important;
  background:#dbeafe !important;
  border:1px solid #bfdbfe !important;
}
.form-progress-fill{
  background:linear-gradient(90deg,#0284c7,#2563eb,#4338ca) !important;
  box-shadow:0 0 12px rgba(37,99,235,.38) !important;
}
.form-progress.is-complete .form-progress-fill{
  background:linear-gradient(90deg,#16a34a,#22c55e) !important;
  box-shadow:0 0 12px rgba(22,163,74,.32) !important;
}
@media(max-width:760px){
  .form-progress{
    padding:14px 16px !important;
  }
  .form-progress-top{
    font-size:16px !important;
    line-height:1.35 !important;
  }
  .form-progress-bar{
    height:13px !important;
  }
}


/* Phase 5: front welcome animation */
.welcome-screen{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(56,189,248,.32), transparent 30rem),
    radial-gradient(circle at 82% 22%, rgba(99,102,241,.30), transparent 28rem),
    linear-gradient(135deg,#eff6ff 0%, #ffffff 42%, #dbeafe 100%);
  transition:opacity .45s ease, visibility .45s ease;
}
.welcome-screen.is-leaving{
  opacity:0;
  visibility:hidden;
}
.welcome-card{
  width:min(92vw, 620px);
  border:1px solid rgba(147,197,253,.9);
  border-radius:34px;
  background:rgba(255,255,255,.78);
  box-shadow:0 30px 90px rgba(15,23,42,.18);
  backdrop-filter:blur(18px);
  padding:38px 34px;
  text-align:center;
  position:relative;
  overflow:hidden;
  animation:welcomeCardIn .72s cubic-bezier(.2,.86,.2,1) both;
}
.welcome-card::before{
  content:"";
  position:absolute;
  inset:-45% auto auto 50%;
  width:420px;
  height:420px;
  border-radius:50%;
  background:rgba(37,99,235,.10);
  transform:translateX(-50%);
  animation:welcomeOrb 4.2s ease-in-out infinite alternate;
}
.welcome-card::after{
  content:"";
  position:absolute;
  left:-18%;
  right:-18%;
  bottom:-90px;
  height:180px;
  background:radial-gradient(circle at 50% 0%, rgba(14,165,233,.16), transparent 68%);
}
.welcome-logo{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  min-height:94px;
  margin:0 auto 18px;
  padding:14px 20px;
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 18px 40px rgba(15,23,42,.10);
  animation:welcomeLogoFloat 2.8s ease-in-out infinite alternate;
}
.welcome-logo img{
  max-width:250px;
  max-height:86px;
  object-fit:contain;
}
.welcome-title{
  position:relative;
  z-index:1;
  margin:0;
  color:#0f172a;
  font-size:clamp(28px, 5vw, 48px);
  line-height:1.16;
  font-weight:1000;
  letter-spacing:.02em;
}
.welcome-subtitle{
  position:relative;
  z-index:1;
  margin:12px auto 0;
  color:#1d4ed8;
  font-size:clamp(17px, 2.4vw, 22px);
  font-weight:1000;
}
.welcome-caption{
  position:relative;
  z-index:1;
  margin:14px auto 0;
  color:#475569;
  font-size:15px;
  font-weight:800;
  line-height:1.7;
}
.welcome-loader{
  position:relative;
  z-index:1;
  width:min(360px, 70vw);
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:#dbeafe;
  margin:24px auto 0;
  border:1px solid #bfdbfe;
}
.welcome-loader span{
  display:block;
  height:100%;
  width:38%;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#2563eb,#4338ca);
  animation:welcomeLoad 1.15s ease-in-out infinite alternate;
}
.welcome-skip{
  position:relative;
  z-index:1;
  margin-top:20px;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:#ffffff;
  color:#1e3a8a;
  min-height:40px;
  padding:8px 18px;
  font-weight:1000;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.welcome-skip:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(37,99,235,.14);
}
@keyframes welcomeCardIn{
  from{opacity:0;transform:translateY(20px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes welcomeOrb{
  from{transform:translateX(-50%) translateY(0) scale(1);}
  to{transform:translateX(-50%) translateY(20px) scale(1.08);}
}
@keyframes welcomeLogoFloat{
  from{transform:translateY(0);}
  to{transform:translateY(-8px);}
}
@keyframes welcomeLoad{
  from{transform:translateX(-60%);}
  to{transform:translateX(210%);}
}
@media(max-width:560px){
  .welcome-card{
    padding:32px 22px;
    border-radius:28px;
  }
  .welcome-logo{
    min-width:210px;
    min-height:84px;
  }
  .welcome-logo img{
    max-width:220px;
  }
}
@media (prefers-reduced-motion: reduce){
  .welcome-screen{
    display:none !important;
  }
}


/* Phase 6: stronger and clearly visible welcome animation */
body.welcome-lock{
  overflow:hidden !important;
}
.welcome-screen-strong{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(56,189,248,.38), transparent 30rem),
    radial-gradient(circle at 82% 22%, rgba(99,102,241,.36), transparent 28rem),
    linear-gradient(135deg,#dbeafe 0%, #ffffff 42%, #bfdbfe 100%) !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .62s ease, visibility .62s ease, transform .62s ease !important;
}
.welcome-screen-strong.is-leaving{
  opacity:0 !important;
  visibility:hidden !important;
  transform:scale(1.025) !important;
}
.welcome-screen-strong .welcome-card{
  width:min(92vw, 760px) !important;
  min-height:480px !important;
  border:2px solid rgba(59,130,246,.55) !important;
  border-radius:42px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 38px 110px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter:blur(22px) !important;
  padding:48px 42px !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
  animation:welcomeCardPop .82s cubic-bezier(.16,1,.3,1) both !important;
}
.welcome-screen-strong .welcome-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-46% auto auto 50% !important;
  width:620px !important;
  height:620px !important;
  border-radius:50% !important;
  background:conic-gradient(from 160deg, rgba(14,165,233,.22), rgba(37,99,235,.10), rgba(99,102,241,.24), rgba(14,165,233,.22)) !important;
  transform:translateX(-50%) !important;
  animation:welcomeOrbSpin 6.5s linear infinite !important;
}
.welcome-screen-strong .welcome-logo{
  position:relative !important;
  z-index:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:330px !important;
  min-height:132px !important;
  margin:0 auto 20px !important;
  padding:18px 28px !important;
  border-radius:28px !important;
  background:#ffffff !important;
  box-shadow:0 22px 54px rgba(15,23,42,.18) !important;
  animation:welcomeLogoBounce 1.15s ease both, welcomeLogoFloat 2.2s ease-in-out 1.15s infinite alternate !important;
}
.welcome-screen-strong .welcome-logo img{
  max-width:320px !important;
  max-height:112px !important;
  object-fit:contain !important;
}
.welcome-kicker{
  position:relative !important;
  z-index:2 !important;
  display:inline-flex !important;
  margin:0 auto 12px !important;
  padding:7px 14px !important;
  border-radius:999px !important;
  background:#eff6ff !important;
  border:1px solid #93c5fd !important;
  color:#1d4ed8 !important;
  font-size:15px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
}
.welcome-screen-strong .welcome-title{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  color:#0f172a !important;
  font-size:clamp(42px, 7vw, 72px) !important;
  line-height:1.08 !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
  text-shadow:0 12px 28px rgba(15,23,42,.14) !important;
  animation:welcomeTextIn .9s ease .22s both !important;
}
.welcome-screen-strong .welcome-subtitle{
  position:relative !important;
  z-index:2 !important;
  margin:18px auto 0 !important;
  color:#1d4ed8 !important;
  font-size:clamp(20px, 3vw, 30px) !important;
  font-weight:1000 !important;
  animation:welcomeTextIn .9s ease .38s both !important;
}
.welcome-screen-strong .welcome-caption{
  position:relative !important;
  z-index:2 !important;
  margin:16px auto 0 !important;
  color:#334155 !important;
  font-size:17px !important;
  font-weight:900 !important;
  line-height:1.7 !important;
  animation:welcomeTextIn .9s ease .52s both !important;
}
.welcome-screen-strong .welcome-loader{
  position:relative !important;
  z-index:2 !important;
  width:min(430px, 72vw) !important;
  height:13px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:#dbeafe !important;
  margin:28px auto 0 !important;
  border:1px solid #93c5fd !important;
}
.welcome-screen-strong .welcome-loader span{
  display:block !important;
  height:100% !important;
  width:42% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#0ea5e9,#2563eb,#4338ca) !important;
  box-shadow:0 0 18px rgba(37,99,235,.48) !important;
  animation:welcomeLoadStrong 1.05s ease-in-out infinite alternate !important;
}
.welcome-screen-strong .welcome-skip{
  position:relative !important;
  z-index:2 !important;
  margin-top:24px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#0b78b6,#2563eb) !important;
  color:#ffffff !important;
  min-height:50px !important;
  padding:12px 26px !important;
  font-size:17px !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  box-shadow:0 18px 38px rgba(37,99,235,.28) !important;
  transition:transform .16s ease, box-shadow .16s ease !important;
}
.welcome-screen-strong .welcome-skip:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 24px 48px rgba(37,99,235,.36) !important;
}
.welcome-particle{
  position:absolute !important;
  z-index:1 !important;
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  background:#2563eb !important;
  left:calc((var(--i) * 5.5%) + 3%) !important;
  top:calc((var(--i) * 7%) % 85%) !important;
  opacity:.48 !important;
  animation:welcomeParticle 4.8s ease-in-out infinite alternate !important;
  animation-delay:calc(var(--i) * -.18s) !important;
}
.welcome-particle.p0{background:#0ea5e9 !important;width:10px !important;height:10px !important;}
.welcome-particle.p1{background:#2563eb !important;}
.welcome-particle.p2{background:#22c55e !important;width:9px !important;height:9px !important;}
.welcome-particle.p3{background:#f59e0b !important;width:8px !important;height:8px !important;}
.welcome-particle.p4{background:#a855f7 !important;width:11px !important;height:11px !important;}
.welcome-particle.p5{background:#38bdf8 !important;width:7px !important;height:7px !important;}

@keyframes welcomeCardPop{
  from{opacity:0;transform:translateY(32px) scale(.90);}
  60%{opacity:1;transform:translateY(-4px) scale(1.015);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes welcomeOrbSpin{
  from{transform:translateX(-50%) rotate(0deg);}
  to{transform:translateX(-50%) rotate(360deg);}
}
@keyframes welcomeLogoBounce{
  from{opacity:0;transform:translateY(-18px) scale(.82);}
  70%{opacity:1;transform:translateY(4px) scale(1.04);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes welcomeTextIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes welcomeLoadStrong{
  from{transform:translateX(-70%);}
  to{transform:translateX(210%);}
}
@keyframes welcomeParticle{
  from{transform:translate3d(0,0,0) scale(.8);opacity:.25;}
  to{transform:translate3d(22px,-30px,0) scale(1.35);opacity:.62;}
}

@media(max-width:560px){
  .welcome-screen-strong .welcome-card{
    min-height:460px !important;
    padding:36px 22px !important;
    border-radius:32px !important;
  }
  .welcome-screen-strong .welcome-logo{
    min-width:250px !important;
    min-height:104px !important;
  }
  .welcome-screen-strong .welcome-logo img{
    max-width:250px !important;
    max-height:92px !important;
  }
  .welcome-screen-strong .welcome-title{
    font-size:42px !important;
  }
}


/* Phase 7: welcome animation auto-enter, no foundation text, no button */
.welcome-screen-strong .welcome-kicker,
.welcome-screen-strong .welcome-skip{
  display:none !important;
}
.welcome-screen-strong .welcome-card{
  min-height:430px !important;
  padding-bottom:44px !important;
}
.welcome-auto-text{
  position:relative !important;
  z-index:2 !important;
  margin-top:18px !important;
  color:#1d4ed8 !important;
  font-size:15px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  animation:welcomeAutoBlink 1.05s ease-in-out infinite alternate !important;
}
@keyframes welcomeAutoBlink{
  from{opacity:.45; transform:translateY(0);}
  to{opacity:1; transform:translateY(-2px);}
}
@media(max-width:560px){
  .welcome-screen-strong .welcome-card{
    min-height:410px !important;
    padding-bottom:36px !important;
  }
}


/* Phase 8: welcome preload wording */
.welcome-screen-strong .welcome-caption{
  min-height:30px !important;
}
.welcome-auto-text{
  min-height:24px !important;
}


/* Phase 9: welcome subtitle line break */
.welcome-screen-strong .welcome-subtitle{
  line-height:1.28 !important;
}


/* Phase 10: cinematic STEAM welcome page */
.welcome-cinematic{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 22% 22%, rgba(14,165,233,.42), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(99,102,241,.42), transparent 32rem),
    radial-gradient(circle at 50% 105%, rgba(37,99,235,.32), transparent 32rem),
    linear-gradient(135deg,#06162f 0%, #0b2a5a 42%, #14213d 100%) !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .76s ease, visibility .76s ease, transform .76s ease !important;
}
.welcome-cinematic.is-leaving{
  opacity:0 !important;
  visibility:hidden !important;
  transform:scale(1.04) !important;
}
.cin-bg-grid{
  position:absolute;
  inset:-2px;
  opacity:.34;
  background-image:
    linear-gradient(rgba(147,197,253,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,197,253,.18) 1px, transparent 1px);
  background-size:52px 52px;
  transform:perspective(700px) rotateX(62deg) translateY(120px) scale(1.4);
  transform-origin:center bottom;
  animation:cinGridMove 3.2s linear infinite;
}
.cin-light{
  position:absolute;
  width:42vw;
  height:42vw;
  border-radius:50%;
  filter:blur(28px);
  opacity:.56;
  animation:cinLightFloat 5s ease-in-out infinite alternate;
}
.cin-light.left{
  left:-15vw;
  top:-10vw;
  background:radial-gradient(circle, rgba(34,211,238,.58), transparent 68%);
}
.cin-light.right{
  right:-14vw;
  bottom:-12vw;
  background:radial-gradient(circle, rgba(99,102,241,.58), transparent 70%);
  animation-delay:-1.4s;
}
.cin-orbit{
  position:absolute;
  border:1px solid rgba(191,219,254,.30);
  border-radius:50%;
  pointer-events:none;
  animation:cinOrbitSpin 9s linear infinite;
}
.cin-orbit span{
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 22px #38bdf8;
  top:50%;
  right:-7px;
}
.orbit-a{width:760px;height:760px;}
.orbit-b{width:980px;height:520px;transform:rotate(-18deg);animation-duration:12s;}
.orbit-c{width:520px;height:980px;transform:rotate(28deg);animation-duration:15s;}
.cin-star{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  left:calc((var(--i) * 2.43%) + 1%);
  top:calc(((var(--i) * 17) % 100) * 1%);
  background:#bfdbfe;
  box-shadow:0 0 14px rgba(191,219,254,.9);
  opacity:.42;
  animation:cinStarFloat 3.8s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.08s);
}
.cin-star.s1{width:8px;height:8px;background:#38bdf8;}
.cin-star.s2{width:6px;height:6px;background:#a5b4fc;}
.cin-star.s3{width:9px;height:9px;background:#22c55e;}
.cin-star.s4{width:4px;height:4px;background:#fbbf24;}
.cin-star.s5{width:7px;height:7px;background:#c084fc;}
.cin-star.s6{width:3px;height:3px;background:#ffffff;}
.cin-circuit{
  position:absolute;
  height:2px;
  width:160px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(125,211,252,.68), transparent);
  opacity:.32;
  animation:cinCircuit 2.8s ease-in-out infinite;
}
.c0{left:7%;top:22%}.c1{right:8%;top:30%;animation-delay:-.4s}.c2{left:15%;bottom:28%;animation-delay:-.8s}.c3{right:18%;bottom:18%;animation-delay:-1.2s}.c4{left:38%;top:12%;animation-delay:-1.5s}.c5{right:36%;bottom:10%;animation-delay:-1.9s}.c6{left:4%;bottom:12%;animation-delay:-2.2s}.c7{right:3%;top:54%;animation-delay:-2.6s}.c8{left:44%;bottom:34%;animation-delay:-3s}
.cin-scanline{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  height:28%;
  transform:translateY(-120%);
  animation:cinScan 3.4s ease-in-out infinite;
  pointer-events:none;
}
.welcome-cinematic .cin-card{
  width:min(92vw, 820px) !important;
  min-height:560px !important;
  border:1px solid rgba(147,197,253,.72) !important;
  border-radius:44px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,246,255,.82)),
    radial-gradient(circle at 50% 0%, rgba(14,165,233,.18), transparent 60%) !important;
  box-shadow:
    0 42px 130px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 0 80px rgba(59,130,246,.30) !important;
  backdrop-filter:blur(24px) saturate(1.2) !important;
  padding:52px 46px 46px !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
  animation:cinCardEnter .95s cubic-bezier(.16,1,.3,1) both !important;
}
.welcome-cinematic .cin-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-80% auto auto 50% !important;
  width:780px !important;
  height:780px !important;
  border-radius:50% !important;
  background:conic-gradient(from 180deg, rgba(14,165,233,.24), rgba(99,102,241,.10), rgba(34,211,238,.24), rgba(37,99,235,.14), rgba(14,165,233,.24)) !important;
  transform:translateX(-50%) !important;
  animation:cinHaloSpin 7s linear infinite !important;
}
.welcome-cinematic .cin-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(125deg, transparent 0%, rgba(255,255,255,.42) 38%, transparent 56%) !important;
  transform:translateX(-120%) !important;
  animation:cinCardShine 2.4s ease-in-out .35s both !important;
  pointer-events:none !important;
}
.cin-logo-ring{
  position:relative;
  z-index:2;
  width:max-content;
  margin:0 auto 20px;
  padding:10px;
  border-radius:34px;
  background:linear-gradient(135deg, rgba(14,165,233,.55), rgba(99,102,241,.42), rgba(34,211,238,.55));
  box-shadow:0 26px 58px rgba(37,99,235,.26);
  animation:cinLogoRing 2.6s ease-in-out infinite alternate;
}
.welcome-cinematic .welcome-logo{
  margin:0 !important;
  min-width:340px !important;
  min-height:124px !important;
  padding:18px 30px !important;
  border-radius:25px !important;
  background:#fff !important;
  box-shadow:none !important;
  animation:none !important;
}
.welcome-cinematic .welcome-logo img{
  max-width:325px !important;
  max-height:105px !important;
}
.cin-chip{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  color:#bfdbfe;
  border:1px solid rgba(147,197,253,.45);
  font-size:13px;
  font-weight:1000;
  letter-spacing:.16em;
  box-shadow:0 12px 30px rgba(15,23,42,.20);
  animation:cinTextEnter .7s ease .18s both;
}
.welcome-cinematic .cin-title{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  color:#071326 !important;
  font-size:clamp(42px, 6vw, 76px) !important;
  line-height:1.04 !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
  text-shadow:0 14px 32px rgba(15,23,42,.16) !important;
  animation:cinTextEnter .8s ease .28s both !important;
}
.welcome-cinematic .cin-title span{
  color:#1d4ed8;
}
.welcome-cinematic .cin-title strong{
  color:#0f172a;
}
.welcome-cinematic .cin-subtitle{
  position:relative !important;
  z-index:2 !important;
  margin:18px auto 0 !important;
  color:#2563eb !important;
  font-size:clamp(22px, 3vw, 34px) !important;
  line-height:1.22 !important;
  font-weight:1000 !important;
  text-shadow:0 10px 24px rgba(37,99,235,.12) !important;
  animation:cinTextEnter .85s ease .42s both !important;
}
.cin-status-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:22px auto 0;
  color:#334155;
  font-size:14px;
  font-weight:1000;
  animation:cinTextEnter .85s ease .56s both;
}
.cin-status-row i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#0ea5e9;
  box-shadow:0 0 16px rgba(14,165,233,.8);
}
.welcome-cinematic .cin-loader{
  position:relative !important;
  z-index:2 !important;
  width:min(480px, 72vw) !important;
  height:14px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:#dbeafe !important;
  margin:26px auto 0 !important;
  border:1px solid #93c5fd !important;
  box-shadow:inset 0 2px 5px rgba(15,23,42,.08) !important;
}
.welcome-cinematic .cin-loader span{
  display:block !important;
  height:100% !important;
  width:46% !important;
  border-radius:999px !important;
  background:
    linear-gradient(90deg,#06b6d4,#2563eb,#7c3aed) !important;
  box-shadow:0 0 20px rgba(37,99,235,.58) !important;
  animation:cinLoad 1.05s ease-in-out infinite alternate !important;
}
.welcome-cinematic .cin-auto-text{
  position:relative !important;
  z-index:2 !important;
  margin-top:18px !important;
  color:#1d4ed8 !important;
  font-size:16px !important;
  font-weight:1000 !important;
  letter-spacing:.06em !important;
  animation:cinAutoBlink 1.1s ease-in-out infinite alternate !important;
}

@keyframes cinGridMove{from{background-position:0 0,0 0;}to{background-position:52px 52px,52px 52px;}}
@keyframes cinLightFloat{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(38px,26px,0) scale(1.12);}}
@keyframes cinOrbitSpin{from{rotate:0deg;}to{rotate:360deg;}}
@keyframes cinStarFloat{from{transform:translateY(0) scale(.8);opacity:.22;}to{transform:translateY(-30px) scale(1.3);opacity:.74;}}
@keyframes cinCircuit{0%,100%{transform:translateX(-24px);opacity:.12;}50%{transform:translateX(24px);opacity:.55;}}
@keyframes cinScan{0%{transform:translateY(-130%);}45%,100%{transform:translateY(390%);}}
@keyframes cinCardEnter{from{opacity:0;transform:translateY(36px) scale(.88) rotateX(8deg);}65%{opacity:1;transform:translateY(-5px) scale(1.015) rotateX(0);}to{opacity:1;transform:translateY(0) scale(1) rotateX(0);}}
@keyframes cinHaloSpin{from{transform:translateX(-50%) rotate(0deg);}to{transform:translateX(-50%) rotate(360deg);}}
@keyframes cinCardShine{from{transform:translateX(-130%);}to{transform:translateX(140%);}}
@keyframes cinLogoRing{from{transform:translateY(0) scale(1);}to{transform:translateY(-8px) scale(1.025);}}
@keyframes cinTextEnter{from{opacity:0;transform:translateY(16px);filter:blur(4px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
@keyframes cinLoad{from{transform:translateX(-72%);}to{transform:translateX(186%);}}
@keyframes cinAutoBlink{from{opacity:.48;}to{opacity:1;}}

@media(max-width:680px){
  .welcome-cinematic .cin-card{
    min-height:560px !important;
    padding:38px 22px !important;
    border-radius:34px !important;
  }
  .welcome-cinematic .welcome-logo{
    min-width:260px !important;
    min-height:102px !important;
    padding:14px 20px !important;
  }
  .welcome-cinematic .welcome-logo img{
    max-width:250px !important;
    max-height:86px !important;
  }
  .cin-status-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .orbit-a{width:520px;height:520px;}
  .orbit-b{width:620px;height:360px;}
  .orbit-c{width:360px;height:620px;}
}


/* Phase 11: cinematic public homepage */
body{
  background:
    radial-gradient(circle at 18% 8%, rgba(14,165,233,.25), transparent 28rem),
    radial-gradient(circle at 88% 10%, rgba(124,58,237,.20), transparent 30rem),
    radial-gradient(circle at 50% 95%, rgba(37,99,235,.16), transparent 32rem),
    linear-gradient(180deg,#06162f 0%, #0b2a5a 38%, #f4f8ff 72%, #eef6ff 100%) !important;
  min-height:100vh;
}
body::before{
  background:
    linear-gradient(rgba(147,197,253,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,197,253,.13) 1px, transparent 1px) !important;
  background-size:58px 58px !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  opacity:.45 !important;
  filter:none !important;
  animation:frontGridDrift 22s linear infinite !important;
}
body::after{
  width:520px !important;
  height:520px !important;
  right:-180px !important;
  top:160px !important;
  bottom:auto !important;
  background:radial-gradient(circle, rgba(14,165,233,.22), transparent 68%) !important;
  animation:frontGlowPulse 7s ease-in-out infinite alternate !important;
}
.header{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  border-bottom:1px solid rgba(147,197,253,.45) !important;
  box-shadow:0 12px 34px rgba(15,23,42,.12) !important;
}
.brand-logo{
  position:relative;
}
.brand-logo::after{
  content:"";
  position:absolute;
  inset:-10px -16px;
  border-radius:20px;
  background:radial-gradient(circle, rgba(37,99,235,.14), transparent 70%);
  z-index:-1;
}
.main{
  position:relative;
  z-index:1;
}
.hero{
  position:relative;
  border:1px solid rgba(147,197,253,.58) !important;
  border-radius:34px !important;
  background:
    linear-gradient(135deg, rgba(14,165,233,.92) 0%, rgba(37,99,235,.92) 50%, rgba(67,56,202,.92) 100%) !important;
  box-shadow:
    0 38px 110px rgba(15,23,42,.34),
    0 0 0 1px rgba(255,255,255,.20) inset,
    0 0 70px rgba(59,130,246,.25) !important;
  overflow:hidden !important;
  padding:58px 48px !important;
  transform-style:preserve-3d;
}
.hero::before{
  background:
    linear-gradient(115deg, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 15rem),
    radial-gradient(circle at 12% 85%, rgba(34,211,238,.30), transparent 16rem) !important;
}
.hero::after{
  width:650px !important;
  height:650px !important;
  top:-300px !important;
  left:55% !important;
  background:conic-gradient(from 180deg, rgba(255,255,255,.24), rgba(125,211,252,.06), rgba(255,255,255,.22)) !important;
  opacity:.9 !important;
  animation:frontHeroHalo 9s linear infinite !important;
}
.hero h1{
  max-width:760px;
  font-size:clamp(34px,5vw,62px) !important;
  line-height:1.15 !important;
  text-shadow:0 18px 42px rgba(15,23,42,.28) !important;
}
.hero h2{
  font-size:clamp(26px,3vw,42px) !important;
  color:#dbeafe !important;
  text-shadow:0 10px 30px rgba(15,23,42,.18) !important;
}
.hero p{
  color:rgba(255,255,255,.92) !important;
  font-weight:900 !important;
}
.hero .hero-tech-badges{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.hero .hero-tech-badges span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.26);
  font-weight:1000;
  backdrop-filter:blur(10px);
}
.hero .hero-tech-badges span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#67e8f9;
  box-shadow:0 0 16px #67e8f9;
}
.section-title{
  display:flex;
  align-items:center;
  gap:12px;
  color:#ffffff !important;
  text-shadow:0 12px 28px rgba(15,23,42,.38);
  margin-top:42px !important;
}
.section-title::before{
  content:"";
  width:15px;
  height:38px;
  border-radius:999px;
  background:linear-gradient(180deg,#22d3ee,#2563eb);
  box-shadow:0 0 28px rgba(34,211,238,.65);
}
.activity-toolbar{
  border:1px solid rgba(147,197,253,.62) !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.22) !important;
}
.activity-group{
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,246,255,.78)) !important;
  border:1px solid rgba(147,197,253,.72) !important;
  box-shadow:
    0 24px 70px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
  backdrop-filter:blur(14px);
}
.activity-group-title{
  color:#0f172a !important;
}
.activity-card{
  border:1px solid rgba(147,197,253,.72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.10) !important;
}
.activity-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(125deg, transparent 0%, rgba(255,255,255,.62) 42%, transparent 62%);
  transform:translateX(-140%);
  transition:transform .75s ease;
  pointer-events:none;
  z-index:2;
}
.activity-card:hover::before{
  transform:translateX(140%);
}
.activity-card:hover{
  box-shadow:
    0 30px 90px rgba(15,23,42,.22),
    0 0 44px rgba(37,99,235,.16) !important;
}
.activity-card h2{
  font-weight:1000 !important;
}
.activity-card .badge{
  position:relative;
  z-index:3;
}
.activity-card .btn{
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#4338ca) !important;
  border:0 !important;
  box-shadow:0 16px 38px rgba(37,99,235,.30) !important;
}
.activity-card .btn:hover{
  box-shadow:0 22px 52px rgba(37,99,235,.42) !important;
}
.front-floating-dot{
  position:fixed;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 20px rgba(56,189,248,.8);
  pointer-events:none;
  z-index:0;
  opacity:.36;
  animation:frontDotFloat 7s ease-in-out infinite alternate;
}
.front-floating-dot.d1{left:8%;top:34%;animation-delay:-.4s;background:#22c55e;}
.front-floating-dot.d2{right:12%;top:28%;animation-delay:-1.2s;background:#a78bfa;}
.front-floating-dot.d3{left:20%;bottom:18%;animation-delay:-2s;background:#f59e0b;}
.front-floating-dot.d4{right:22%;bottom:24%;animation-delay:-2.8s;background:#38bdf8;}
.front-floating-dot.d5{left:48%;top:18%;animation-delay:-3.6s;background:#c084fc;}
.front-scroll-line{
  position:fixed;
  left:0;
  top:0;
  height:4px;
  width:0;
  z-index:9999;
  background:linear-gradient(90deg,#22d3ee,#2563eb,#a855f7);
  box-shadow:0 0 18px rgba(37,99,235,.65);
  pointer-events:none;
}
@keyframes frontGridDrift{
  from{background-position:0 0,0 0;}
  to{background-position:58px 58px,58px 58px;}
}
@keyframes frontGlowPulse{
  from{transform:translate3d(0,0,0) scale(1);opacity:.55;}
  to{transform:translate3d(-34px,28px,0) scale(1.14);opacity:.82;}
}
@keyframes frontHeroHalo{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes frontDotFloat{
  from{transform:translate3d(0,0,0) scale(.85);opacity:.22;}
  to{transform:translate3d(28px,-34px,0) scale(1.35);opacity:.58;}
}
@media(max-width:760px){
  body{
    background:
      radial-gradient(circle at 20% 6%, rgba(14,165,233,.25), transparent 18rem),
      linear-gradient(180deg,#08224a 0%, #0b2a5a 34%, #f4f8ff 72%, #eef6ff 100%) !important;
  }
  .hero{
    padding:38px 26px !important;
    border-radius:28px !important;
  }
  .hero h1{
    font-size:clamp(34px,9vw,48px) !important;
  }
  .hero .hero-tech-badges{
    gap:8px;
  }
  .hero .hero-tech-badges span{
    font-size:13px;
    padding:7px 10px;
  }
  .section-title{
    color:#0f172a !important;
    text-shadow:none !important;
  }
  .front-floating-dot{
    display:none;
  }
}


/* Phase 12: match header color with cinematic frontend */
.header{
  background:
    linear-gradient(180deg, rgba(6,22,47,.96), rgba(8,34,74,.92)) !important;
  border-bottom:1px solid rgba(56,189,248,.28) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(18px) saturate(1.15) !important;
}
.header-inner{
  min-height:110px !important;
  display:flex !important;
  align-items:center !important;
}
.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 18px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(147,197,253,.45) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 32px rgba(56,189,248,.16) !important;
}
.brand-logo img{
  display:block !important;
  max-height:74px !important;
  width:auto !important;
}
.brand-logo::after{
  inset:-14px -18px !important;
  background:radial-gradient(circle, rgba(56,189,248,.22), transparent 72%) !important;
}
.nav a{
  color:#ffffff !important;
  background:rgba(37,99,235,.36) !important;
  border:1px solid rgba(147,197,253,.38) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
}
.main{
  padding-top:38px !important;
}
@media(max-width:760px){
  .header-inner{
    min-height:94px !important;
    justify-content:center !important;
  }
  .brand-logo{
    padding:10px 14px !important;
    border-radius:18px !important;
  }
  .brand-logo img{
    max-height:58px !important;
  }
  .main{
    padding-top:28px !important;
  }
}


/* Phase 13: frontend readability and remove extra hero badges */
.hero .hero-tech-badges{
  display:none !important;
}
.hero h1,
.hero h2,
.hero p{
  color:#ffffff !important;
  text-shadow:0 12px 32px rgba(0,0,0,.36) !important;
}
.hero h1{
  letter-spacing:.01em !important;
}
.hero p{
  color:#f8fafc !important;
  font-weight:1000 !important;
}
.section-title{
  color:#f8fafc !important;
  text-shadow:0 12px 30px rgba(0,0,0,.42) !important;
}
.section-title::before{
  box-shadow:0 0 28px rgba(34,211,238,.78) !important;
}
.activity-count{
  color:#dbeafe !important;
  font-weight:1000 !important;
  text-shadow:0 8px 20px rgba(0,0,0,.28) !important;
}
.activity-search input{
  color:#0f172a !important;
}
.activity-search input::placeholder{
  color:#64748b !important;
  opacity:1 !important;
}
.activity-filter button{
  color:#1e3a8a !important;
}
.activity-filter button.is-active{
  color:#ffffff !important;
}
.activity-group-title{
  color:#0f172a !important;
}
.activity-card h2{
  color:#0f172a !important;
}
.activity-card:hover h2{
  color:#1d4ed8 !important;
}
.meta-row strong{
  color:#475569 !important;
}
.meta-row span{
  color:#334155 !important;
}
.badge.closed{
  color:#991b1b !important;
  background:#fee2e2 !important;
}
.badge:not(.closed){
  color:#166534 !important;
  background:#dcfce7 !important;
}
.main{
  padding-top:64px !important;
}
.header + .main{
  margin-top:0 !important;
}
@media(max-width:760px){
  .section-title{
    color:#f8fafc !important;
    text-shadow:0 10px 24px rgba(0,0,0,.42) !important;
  }
  .activity-count{
    color:#dbeafe !important;
  }
  .hero{
    margin-top:8px !important;
  }
  .main{
    padding-top:34px !important;
  }
}



/* Phase 14: activity capacity progress */
.capacity-progress-card{position:relative;z-index:3;margin:14px 0 16px;padding:13px 14px;border-radius:18px;border:1px solid #bfdbfe;background:#f8fbff;box-shadow:0 10px 24px rgba(15,23,42,.06);}
.capacity-progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;color:#0f172a;font-size:14px;font-weight:1000;}
.capacity-progress-top span{color:#1d4ed8;}
.capacity-progress-track{height:12px;border-radius:999px;background:#dbeafe;overflow:hidden;border:1px solid #bfdbfe;}
.capacity-progress-fill{height:100%;width:0;border-radius:999px;transition:width .35s ease;background:linear-gradient(90deg,#0ea5e9,#2563eb);box-shadow:0 0 14px rgba(37,99,235,.32);}
.capacity-progress-note{margin-top:7px;font-size:13px;color:#475569;font-weight:900;}
.capacity-progress-card.is-warning .capacity-progress-fill{background:linear-gradient(90deg,#f59e0b,#f97316);box-shadow:0 0 14px rgba(249,115,22,.32);}
.capacity-progress-card.is-warning .capacity-progress-top span,.capacity-progress-card.is-warning .capacity-progress-note{color:#c2410c;}
.capacity-progress-card.is-danger .capacity-progress-fill,.capacity-progress-card.is-full .capacity-progress-fill{background:linear-gradient(90deg,#ef4444,#dc2626);box-shadow:0 0 14px rgba(220,38,38,.30);}
.capacity-progress-card.is-danger .capacity-progress-top span,.capacity-progress-card.is-danger .capacity-progress-note,.capacity-progress-card.is-full .capacity-progress-top span,.capacity-progress-card.is-full .capacity-progress-note{color:#b91c1c;}
.activity-card:hover .capacity-progress-fill{animation:capacityGlow 1.25s ease-in-out infinite alternate;}
@keyframes capacityGlow{from{filter:brightness(1);}to{filter:brightness(1.14);}}


/* Phase 27: registration count wording with waitlist */
.capacity-progress-top strong{
  white-space:nowrap;
}
.capacity-progress-top span{
  text-align:right;
  line-height:1.35;
}
.capacity-progress-note{
  line-height:1.5;
}
@media(max-width:640px){
  .capacity-progress-top{
    align-items:flex-start;
  }
  .capacity-progress-top span{
    font-size:13px;
  }
  .capacity-progress-note{
    font-size:12.5px;
  }
}


/* Phase 28: registration count total including pending/waitlist */
.capacity-progress-top strong{
  white-space:nowrap;
}
.capacity-progress-top span{
  text-align:right;
}
.capacity-progress-note{
  line-height:1.5;
}


/* Phase 30: desktop hero title no-wrap and capacity wording */
@media (min-width: 901px){
  .hero-title,
  .hero h1,
  .hero-card h1,
  .front-hero h1,
  .landing-hero h1,
  .site-hero h1{
    white-space:nowrap !important;
    word-break:keep-all !important;
    line-height:1.08 !important;
    font-size:clamp(42px, 5.2vw, 82px) !important;
    letter-spacing:-0.04em !important;
  }
}

@media (max-width: 900px){
  .hero-title,
  .hero h1,
  .hero-card h1,
  .front-hero h1,
  .landing-hero h1,
  .site-hero h1{
    white-space:normal !important;
    word-break:keep-all !important;
  }
}

.capacity-progress-card{
  display:block !important;
  margin-top:22px !important;
}
.capacity-progress-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.capacity-progress-track,
.capacity-progress-fill{
  display:block !important;
}
.capacity-progress-note{
  font-weight:900 !important;
}


/* Phase 31: order-based capacity display */
.capacity-progress-note{
  font-weight:900 !important;
}


/* Phase 32: welcome screen UTC time */
.cin-utc-row{
  justify-content:center !important;
  gap:10px !important;
  letter-spacing:.04em !important;
}
.cin-utc-row .cin-utc-label{
  opacity:.86 !important;
}
.cin-utc-row .cin-utc-time{
  font-variant-numeric:tabular-nums !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  letter-spacing:.02em !important;
  color:#dff7ff !important;
}
@media(max-width:640px){
  .cin-utc-row{
    font-size:12px !important;
  }
}


/* Phase 33: welcome local timezone and high-contrast clock */
.cin-utc-row{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(37,99,235,.25) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.12) !important;
  color:#0f172a !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}

.cin-utc-row i{
  width:6px !important;
  height:6px !important;
  border-radius:999px !important;
  background:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
}

.cin-utc-row .cin-utc-label{
  color:#1d4ed8 !important;
  opacity:1 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}

.cin-utc-row .cin-utc-time{
  color:#0f172a !important;
  opacity:1 !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  white-space:nowrap !important;
}

@media(max-width:640px){
  .cin-utc-row{
    padding:9px 12px !important;
    gap:8px !important;
    font-size:11.5px !important;
    max-width:100% !important;
  }
  .cin-utc-row .cin-utc-label{
    max-width:120px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}