@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#02060b;
  --surface:#07111c;
  --surface2:#0a1623;
  --line:rgba(255,255,255,.08);
  --line-blue:rgba(77,163,255,.33);
  --blue:#4da3ff;
  --blue2:#73c8ff;
  --text:#f0f6ff;
  --muted:#9baabd;
  --danger:#ff6f7d;
  --ok:#78e6b3;
  --shadow:0 24px 80px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:
    radial-gradient(circle at 50% -10%,rgba(77,163,255,.18),transparent 32rem),
    radial-gradient(circle at 20% 20%,rgba(77,163,255,.08),transparent 24rem),
    linear-gradient(180deg,#02060b,#030812 55%,#02060b);
  color:var(--text);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(77,163,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,163,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
p{line-height:1.75;color:#c5d0df}

.topbar{
  height:86px;
  padding:0 42px;
  display:flex;
  align-items:center;
  gap:32px;
  background:rgba(2,6,11,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:50;
}
.brand img{width:330px;max-height:62px;object-fit:contain}
.nav{margin-left:auto;display:flex;gap:26px;height:100%;align-items:center}
.nav a{
  height:100%;
  display:flex;
  align-items:center;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#d9e2ef;
  position:relative;
}
.nav a.active,.nav a:hover{color:var(--blue)}
.nav a.active:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--blue);
  box-shadow:0 0 24px rgba(77,163,255,.7);
}
.portal-link{
  border:1px solid rgba(77,163,255,.55);
  color:var(--blue);
  padding:12px 22px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:900;
  background:rgba(77,163,255,.04);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:92px 42px 78px;
  min-height:580px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(2,6,11,.1),rgba(2,6,11,.98)),
    radial-gradient(circle at 50% 20%,rgba(77,163,255,.2),transparent 27rem);
}
.hero:after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:310px;
  background:
    linear-gradient(to top,#02060b,transparent),
    repeating-linear-gradient(90deg,transparent 0 44px,rgba(77,163,255,.12) 45px 47px,transparent 48px 90px);
  opacity:.42;
  clip-path:polygon(0 42%,5% 28%,9% 55%,14% 22%,19% 66%,25% 18%,31% 58%,37% 35%,43% 70%,50% 25%,57% 52%,63% 18%,69% 60%,76% 33%,82% 68%,88% 24%,94% 56%,100% 31%,100% 100%,0 100%);
}
.hero-inner{
  width:min(1260px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:54px;
  align-items:center;
  position:relative;
  z-index:2;
}
.kicker{
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  font-weight:900;
}
h1{
  margin:12px 0 20px;
  font-size:clamp(38px,5vw,74px);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}
h2{
  margin:0;
  font-size:28px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
h3{
  margin:0;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.hero-text p{font-size:17px;max-width:700px}
.hero-panel{
  border:1px solid var(--line-blue);
  background:linear-gradient(145deg,rgba(9,17,28,.86),rgba(4,9,16,.86));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  padding:34px;
}
.hero-panel img{width:190px;margin:0 auto 22px;filter:drop-shadow(0 0 28px rgba(77,163,255,.38))}
.status-line{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.status-line span{color:var(--muted)}
.status-line b{color:#eaf2ff}
.status-ok{color:var(--ok)!important}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border:1px solid rgba(77,163,255,.62);
  color:var(--blue);
  background:rgba(77,163,255,.05);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:900;
}
.btn.secondary{border-color:var(--line);color:#dbe5f2}
.btn:hover{box-shadow:0 0 28px rgba(77,163,255,.26)}

.wrap{width:min(1320px,calc(100% - 80px));margin:0 auto}
.notice-strip{
  margin:-42px auto 54px;
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:240px repeat(3,1fr);
  gap:22px;
  padding:22px 26px;
  background:linear-gradient(180deg,rgba(9,17,28,.96),rgba(5,11,19,.96));
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  box-shadow:var(--shadow);
}
.notice-strip strong{color:var(--blue);text-transform:uppercase;letter-spacing:.08em}
.notice-strip b{display:block;margin-bottom:5px}
.notice-strip span{color:var(--muted);font-size:14px}

.section{margin-bottom:72px}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:20px;
}
.section-head a{color:var(--blue);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.grid{display:grid;gap:16px}
.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(9,17,28,.9),rgba(3,9,16,.9));
  padding:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.card:hover{border-color:rgba(77,163,255,.35)}
.icon{width:88px;margin-bottom:22px}
.card.center{text-align:center}
.card.center .icon{margin:0 auto 22px}
.card p{font-size:14px;margin-bottom:0}

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.badge{
  border:1px solid var(--line-blue);
  color:var(--blue2);
  background:rgba(77,163,255,.05);
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.page-hero{
  padding:72px 40px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 20% 0,rgba(77,163,255,.14),transparent 30rem);
}
.page-hero .inner{width:min(1180px,calc(100% - 80px));margin:0 auto}
.page-hero h1{font-size:48px}
.content{width:min(1180px,calc(100% - 80px));margin:36px auto 72px}
.panel{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(9,17,28,.92),rgba(3,9,16,.92));
  padding:32px;
  margin-bottom:20px;
}
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);background:rgba(8,15,25,.78)}
.table th,.table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.table th{color:var(--blue);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  background:#040a12;
  color:var(--text);
  padding:14px 16px;
  outline:none;
}
textarea{min-height:130px}
label{display:grid;gap:8px;font-weight:800;color:#dce6f2}
.form{display:grid;gap:18px}
.form.two{grid-template-columns:repeat(2,1fr)}
.full{grid-column:1/-1}
.alert{padding:14px 16px;border:1px solid var(--line-blue);background:rgba(77,163,255,.07);margin-bottom:18px}
.alert.error{border-color:rgba(255,111,125,.45);background:rgba(255,111,125,.08);color:#ffd4d9}

.gov-layout{display:grid;grid-template-columns:285px 1fr;min-height:calc(100vh - 86px)}
.sidebar{
  background:#030910;
  border-right:1px solid var(--line);
  padding:24px;
}
.seal-card{
  border:1px solid var(--line);
  background:rgba(77,163,255,.04);
  padding:20px;
  margin-bottom:18px;
}
.seal-card img{width:82px;margin-bottom:14px}
.seal-card strong{display:block;text-transform:uppercase}
.seal-card span{display:block;color:var(--blue);font-size:12px;text-transform:uppercase;margin-top:6px}
.sidebar a{
  display:block;
  padding:13px 14px;
  border:1px solid transparent;
  color:#ccd7e5;
  font-weight:800;
}
.sidebar a:hover{border-color:var(--line-blue);color:var(--blue);background:rgba(77,163,255,.05)}
.gov-main{padding:34px 42px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0}
.stat{border:1px solid var(--line);background:rgba(9,17,28,.82);padding:22px}
.stat b{font-size:32px;display:block}
.stat span{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:900}

.footer{
  border-top:1px solid var(--line);
  background:#02060b;
  padding:28px 48px;
  display:grid;
  grid-template-columns:300px 1fr auto;
  gap:30px;
  align-items:center;
  color:var(--muted);
}
.footer img{width:280px}
.footer-links{display:flex;gap:40px;justify-content:center}
.footer a{text-transform:uppercase;letter-spacing:.08em;font-size:12px}

@media(max-width:1100px){
  .topbar{height:auto;flex-wrap:wrap;padding:18px 22px}
  .brand img{width:260px}
  .nav{order:3;width:100%;overflow:auto;margin-left:0}
  .hero-inner{grid-template-columns:1fr}
  .notice-strip,.grid.four,.grid.three,.grid.two,.stats{grid-template-columns:1fr 1fr}
  .gov-layout{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wrap,.content,.page-hero .inner{width:calc(100% - 28px)}
  .notice-strip,.grid.four,.grid.three,.grid.two,.stats,.form.two{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start;flex-wrap:wrap;gap:18px}
}


.clean-list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.clean-list li{padding:14px 16px;border:1px solid var(--line);background:rgba(77,163,255,.035);color:#d6e2f0;line-height:1.65}
.directory-list{display:grid;gap:12px}
.directory-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);background:rgba(9,17,28,.68)}
.directory-item strong{display:block;text-transform:uppercase;letter-spacing:.04em}
.directory-item span{color:var(--muted);font-size:14px}
.action-link{color:var(--blue);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
@media(max-width:900px){.directory-item{align-items:flex-start;flex-direction:column}}


/* Full-card clickable layout */
a.card,
.clickable-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

a.card:hover,
.clickable-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77,163,255,.5);
  box-shadow: 0 0 30px rgba(77,163,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

.card-action {
  display: inline-flex;
  margin-top: 22px;
  color: var(--blue);
  border: 1px solid rgba(77,163,255,.55);
  padding: 11px 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 900;
  background: rgba(77,163,255,.045);
}

.card.center .card-action,
.clickable-card.center .card-action {
  justify-content: center;
}

.clickable-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}



/* -------------------------------------------------
   Sticky footer fix
   Keeps footer at bottom on short pages
------------------------------------------------- */

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main,
.content {
  flex: 1 0 auto;
}

.gov-layout {
  flex: 1 0 auto;
}

.footer,
footer {
  margin-top: auto;
  flex-shrink: 0;
}

.page-hero + .content {
  flex: 1 0 auto;
}


/* -------------------------------------------------
   REAL sticky footer layout
   Uses page-shell wrapper around the complete page.
------------------------------------------------- */

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

/* The complete visible page */
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header remains natural height */
.topbar {
  flex: 0 0 auto;
}

/* All public page main content grows */
.page-shell > main,
.page-shell > .content,
.page-shell > .gov-layout {
  flex: 1 0 auto;
}

/* Many pages use: header + page-hero + main.content + footer.
   The hero must not consume flex growth, the following content does. */
.page-shell > .page-hero {
  flex: 0 0 auto;
}

/* Homepage uses multiple sections, so push footer after all normal content */
.page-shell > .hero,
.page-shell > .notice-strip,
.page-shell > .wrap,
.page-shell > .section {
  flex: 0 0 auto;
}

/* If a page has only a short .content after hero, let it fill remaining height */
.page-shell > .content {
  flex-grow: 1;
}

/* Government internal two-column layout must fill remaining viewport too */
.page-shell > .gov-layout {
  flex-grow: 1;
}

/* Footer always at the bottom of the viewport on short pages */
.page-shell > .footer,
.page-shell > footer {
  margin-top: auto !important;
  flex: 0 0 auto;
}

/* Remove bottom margin from last content block where it creates false spacing */
.page-shell > .content:last-of-type {
  margin-bottom: 0;
}


/* Sticky-footer spacing correction */
.page-shell > .content {
  padding-bottom: 72px;
}

.page-shell > .content:empty {
  padding-bottom: 0;
}


/* =================================================
   FINAL FOOTER FIX - DO NOT REMOVE
   Structure:
   body > .page-shell > .page-body + footer.footer
================================================= */

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
}

.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* This wraps EVERYTHING except the footer */
.page-body {
  flex: 1 0 auto;
  display: block;
}

/* Footer is no longer inside the growing content area */
.page-shell > .footer {
  flex: 0 0 auto;
  margin-top: auto !important;
}

/* Prevent old footer/content rules from interfering */
.page-shell > footer.footer {
  width: 100%;
}

/* Existing .content bottom margins can make the footer look too high on tiny pages.
   Keep spacing as padding instead of layout-breaking margin. */
.page-body > .content {
  margin-bottom: 0 !important;
  padding-bottom: 72px;
}

.page-body > .gov-layout {
  min-height: auto;
}


/* =================================================
   HARD VIEWPORT FOOTER FIX
   Footer is pinned to the bottom of the visible screen.
   This avoids unreliable sticky/flex behavior on this layout.
================================================= */

:root {
  --footer-fixed-height: 96px;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  padding-bottom: var(--footer-fixed-height) !important;
}

/* Make sure page content never hides behind the fixed footer */
.page-shell,
.page-body,
.content,
.gov-layout,
.wrap {
  padding-bottom: 24px;
}

/* The actual hard fix */
.footer,
footer.footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  min-height: var(--footer-fixed-height);
  margin: 0 !important;
  width: 100% !important;
  background: rgba(2, 6, 11, 0.96) !important;
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* If older flex sticky rules exist, neutralize them */
.page-shell > .footer,
.page-shell > footer {
  margin-top: 0 !important;
  flex: 0 0 auto !important;
}

/* Mobile footer needs more space */
@media (max-width: 680px) {
  :root {
    --footer-fixed-height: 190px;
  }
}
.gov-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gov-form input,
.gov-form textarea,
.gov-form select {
    width: 100%;
    padding: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
}

.gov-form textarea {
    min-height: 180px;
    resize: vertical;
}

.btn-primary {
    background: rgba(77,163,255,.14);
    border: 1px solid rgba(77,163,255,.4);
    color: #4da3ff;
    padding: 14px 18px;
    cursor: pointer;
}

.btn-primary:hover {
    background: rgba(77,163,255,.24);
}

.gov-table {
    width: 100%;
    border-collapse: collapse;
}

.gov-table th,
.gov-table td {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 14px;
    text-align: left;
}

.status.operational {
    color: #4da3ff;
}

.success-panel {
    border: 1px solid rgba(77,163,255,.3);
}

/* Request overview + government forms */
.gov-form {
  display: grid;
  gap: 20px;
}

.gov-form label {
  display: grid;
  gap: 8px;
  color: #dce6f2;
  font-weight: 800;
}

.gov-form input,
.gov-form textarea,
.gov-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #040a12;
  color: var(--text);
  outline: none;
}

.gov-form textarea {
  min-height: 160px;
  resize: vertical;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  border: 1px solid rgba(77,163,255,.62);
  color: var(--blue);
  background: rgba(77,163,255,.05);
  padding: 14px 22px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.btn-primary:hover {
  box-shadow: 0 0 28px rgba(77,163,255,.26);
}

.success-panel {
  border-color: rgba(80,255,140,.32);
}

.request-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.request-status {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid rgba(77,163,255,.28);
  color: var(--blue);
  background: rgba(77,163,255,.08);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.request-status-closed,
.request-status-resolved {
  color: #78e6b3;
  border-color: rgba(120,230,179,.35);
  background: rgba(120,230,179,.08);
}

.request-status-rejected {
  color: #ff6f7d;
  border-color: rgba(255,111,125,.35);
  background: rgba(255,111,125,.08);
}



.request-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.request-entry{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
}

.request-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.request-count{
    margin-top:18px;
    color:#4da3ff;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
}

.action-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn-small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:1px solid rgba(77,163,255,.35);
    background:rgba(77,163,255,.08);
    color:#4da3ff;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.btn-small.success{
    color:#7cffb0;
    border-color:rgba(90,255,140,.35);
    background:rgba(90,255,140,.08);
}

.btn-small.review{
    color:#ffcf7c;
    border-color:rgba(255,207,124,.35);
    background:rgba(255,207,124,.08);
}

.btn-small.danger{
    color:#ff8a9b;
    border-color:rgba(255,138,155,.35);
    background:rgba(255,138,155,.08);
}

.request-message{
    white-space:pre-wrap;
    line-height:1.8;
    padding:18px;
    background:rgba(0,0,0,.24);
    border:1px solid rgba(255,255,255,.08);
}

.request-grid strong{
    color:#4da3ff;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
}



/* Request decisions are destructive:
   Accept creates a citizen and deletes the request.
   Reject deletes the request. */


/* Citizen status verification */
.citizen-status-form {
  margin-top: 22px;
  display: grid;
  gap: 18px;
}

.citizen-status-form label {
  display: grid;
  gap: 8px;
  color: #dce6f2;
  font-weight: 800;
}

.citizen-status-form input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #040a12;
  color: var(--text);
  outline: none;
}

.success-panel {
  border-color: rgba(90,255,140,.35);
}


/* Status page citizen verification */
.request-message {
  white-space: pre-wrap;
  line-height: 1.7;
  color: #d6e0ec;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  padding: 18px;
}

.success-panel {
  border-color: rgba(90,255,140,.35);
}


/* Relay password authentication */
.relay-password-field {
  display: grid;
  gap: 8px;
  min-width: 260px;
  color: #dce6f2;
  font-weight: 800;
}

.relay-password-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: #040a12;
  color: #f0f6ff;
}