/* ============= JacanaFly — Theme (v2) ============= */
:root{
  --bg:#0b1220; --bg2:#0e152a; --fg:#e6edf6; --muted:#9bb0c8;
  --brand:#22d3ee; --brand2:#3b82f6; --line:#203053; --card:#0e1730;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  min-height:100%;
  display:flex;flex-direction:column;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(1200px 600px at 90% -20%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

/* layout */
.wrap{max-width:1120px;margin:0 auto;padding:28px 20px}
header{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo span{background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;margin-left:14px}
.nav a:hover{color:#cfe4ff}
main{flex:1} /* makes page fill to the bottom */
footer{border-top:1px solid var(--line);margin-top:32px}

/* components */
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid #2a3b6a;
  background:rgba(15,23,42,.55);color:var(--fg);text-decoration:none;transition:.2s ease}
.btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#081226;font-weight:700}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(34,211,238,.18)}
.badge{display:inline-block;color:#b7c7e6;border:1px solid #28406e;border-radius:999px;padding:4px 10px;font-size:12px}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:20px;transition:.2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 60px rgba(59,130,246,.25), inset 0 0 0 1px rgba(59,130,246,.3)}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

h1{margin:0 0 12px;font-size:42px;line-height:1.1}
h2{margin:8px 0 10px;font-size:26px}
h3{margin:6px 0 8px;font-size:18px}
.kicker{font-size:12px;color:#9db0cd;letter-spacing:.15em;text-transform:uppercase}
.muted{color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table td{border-top:1px solid var(--line);padding:10px 0;color:#c6d3e6}

/* hero */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  padding:20px 0;        /* was 36px */
  min-height:52vh;       /* was 70vh */
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;min-height:auto}
}


/* forms */
input,select,button,textarea{
  width:100%;padding:12px 12px;border-radius:10px;border:1px solid #2a3b6a;background:#0c152a;color:var(--fg);outline:none
}
label{font-size:14px;color:#c9d5e8}
.checkrow{display:flex;gap:10px;align-items:flex-start}
small.helper{color:#9db0cd}

/* bubbles */
.bubble{position:relative;overflow:hidden}
.bubble:before,.bubble:after{
  content:"";position:absolute;border-radius:999px;filter:blur(50px);opacity:.35;z-index:-1
}
.bubble:before{width:320px;height:320px;background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.7),transparent 60%);top:-80px;left:-60px}
.bubble:after{width:420px;height:420px;background:radial-gradient(circle at 60% 40%,rgba(59,130,246,.7),transparent 60%);bottom:-160px;right:-120px}