:root{
  --bg:#121212;
  --bg2:#0d1014;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --teal:#008080;
  --amber:#FFC857;
  --coral:#FF6F61;
  --radius:18px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 15% 0%, rgba(0,128,128,.22), transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(255,200,87,.14), transparent 55%),
    radial-gradient(900px 700px at 60% 100%, rgba(255,111,97,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial;
  line-height:1.45;
}

a{color:inherit}
.wrap{width:min(1100px, calc(100% - 40px)); margin:0 auto}

.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(12px);
  background:linear-gradient(to bottom, rgba(18,18,18,.82), rgba(18,18,18,.55));
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:Poppins,Montserrat,Roboto,sans-serif}
.logo{
  width:36px; height:36px; border-radius:14px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,200,87,.96), rgba(255,200,87,0) 65%),
    radial-gradient(16px 16px at 70% 65%, rgba(0,128,128,.65), rgba(0,128,128,0) 70%),
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.18));
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.brand strong{letter-spacing:.2px}
.brand small{display:block; font-size:12px; color:var(--muted); margin-top:1px}

.links{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.links a{color:var(--muted); text-decoration:none; font-weight:650}
.links a:hover{color:var(--text)}

.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  padding:10px 14px; border-radius:14px;
  font-weight:800; letter-spacing:.2px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  transition: transform .28s var(--ease), background-color .22s ease, border-color .22s ease, box-shadow .28s var(--ease);
  position:relative;
  overflow:hidden;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.10); box-shadow:0 14px 34px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0)}
.btn.primary{
  color:#111;
  background:linear-gradient(135deg, var(--amber), rgba(255,200,87,.78));
  border-color:rgba(255,200,87,.35);
  box-shadow:0 22px 70px rgba(255,200,87,.12), 0 16px 46px rgba(0,0,0,.35);
}
.btn.primary:hover{background:linear-gradient(135deg, rgba(255,200,87,.92), var(--amber));}

.ripple{
  position:absolute;
  border-radius:999px;
  transform:scale(0);
  background:rgba(255,255,255,.35);
  animation:ripple .55s var(--ease);
  pointer-events:none;
}
@keyframes ripple{to{transform:scale(1); opacity:0}}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-weight:650;
}
.dot{width:10px; height:10px; border-radius:99px; background:rgba(255,255,255,.18)}
.dot.ok{background:rgba(0,128,128,.92)}
.dot.warn{background:rgba(255,111,97,.92)}

.hero{padding:44px 0 10px; position:relative}
.heroCanvas{position:absolute; inset:-20px 0 auto 0; height:340px; width:100%; pointer-events:none; opacity:.42; mix-blend-mode:screen}
.grid{display:grid; gap:14px}
.grid.two{grid-template-columns: 1.2fr .8fr}
.grid.three{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 920px){.grid.two,.grid.three{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{padding:18px}

h1,h2,h3{margin:0; letter-spacing:-.02em}
h1{font-family:Poppins,Montserrat,Roboto,sans-serif; font-size:46px; line-height:1.05}
h2,h3{font-family:Poppins,Montserrat,Roboto,sans-serif}
@media (max-width: 520px){h1{font-size:36px}}
.subtitle{margin:10px 0 0; color:var(--muted); max-width:70ch}

.section{padding:22px 0}
.kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62)}

.metric{display:flex; align-items:flex-start; gap:12px}
.metric strong{font-size:18px}
.metric p{margin:4px 0 0; color:var(--muted)}

.feature{position:relative; overflow:hidden}
.feature .glow{
  position:absolute; inset:-40%;
  background:radial-gradient(circle at 40% 40%, rgba(255,200,87,.20), transparent 45%),
             radial-gradient(circle at 70% 70%, rgba(0,184,148,.14), transparent 50%);
  transform:translate3d(0,0,0);
  opacity:.85;
  pointer-events:none;
}

.step{display:flex; gap:12px; align-items:flex-start}
.ico{width:34px;height:34px;border-radius:14px; border:1px solid var(--line); background:rgba(0,128,128,.12); box-shadow:0 16px 44px rgba(0,0,0,.35)}
.hoverMore{max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:max-height .55s var(--ease), opacity .25s ease, transform .25s ease}
.card[data-hover]:hover .hoverMore{max-height:220px; opacity:1; transform:none}

.field{display:flex; flex-direction:column; gap:6px}
.input{
  width:100%; padding:11px 12px; border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s var(--ease);
}
.input:focus{border-color:rgba(255,200,87,.35); box-shadow:0 0 0 6px rgba(255,200,87,.10)}

.progress{height:10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--line); overflow:hidden}
.progress > div{height:100%; width:0%; background:linear-gradient(90deg, rgba(0,128,128,.75), rgba(255,200,87,.75)); transition:width .55s var(--ease)}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.on{opacity:1; transform:none}

.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:12px 10px; border-bottom:1px solid var(--line); text-align:left}
.table th{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.62)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); font-weight:800}
.badge.pop{border-color:rgba(255,200,87,.35)}

.faq button{width:100%; text-align:left; padding:14px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-weight:800; transition: transform .22s var(--ease), background-color .22s ease}
.faq button:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.faq .a{max-height:0; overflow:hidden; transition:max-height .55s var(--ease), opacity .25s ease, transform .25s ease; opacity:0; transform: translateY(-4px); color:var(--muted); padding:0 14px}
.faq .open .a{max-height:260px; opacity:1; transform:none; padding:10px 14px 14px}

.footer{padding:24px 0 34px; color:var(--muted)}

/* Admin table */
#adminPanel{display:none}
#adminUsersBody td{border-bottom:1px solid var(--line)}