/* ===== Halverson Labs — NG-inspired homepage theme (drop-in) ===== */

/* Palette & tokens (NG vibe) */
:root{
  --bg:#041025;                /* page background (very dark navy) */
  --nav:#071937;               /* header/nav bar */
  --panel:#0b1f42;             /* panels/tiles */
  --panel-2:#0d264f;
  --line:#1a3a6b;              /* subtle borders */
  --brand:#1e90ff;             /* bold NG-ish blue */
  --brand-2:#2bb0ff;           /* lighter accent */
  --text:#f2f7ff;              /* high contrast text */
  --muted:#a8bfdf;             /* secondary text */
  --ok:#48e29b;
  --shadow:0 18px 40px rgba(0,0,0,.38);
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(43,160,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg) 300px, var(--bg));
  color:var(--text);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Page container */
.container{max-width:1280px;margin:0 auto;padding:0 28px}

/* ===== Header (NG-style bar with accent rule) ===== */
.header-wrap{
  background:var(--nav);
  border-bottom:1px solid #0e2a59;
  position:sticky;top:0;z-index:50;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0 14px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow);
}
.brand-title{
  font-weight:900;letter-spacing:.04em;text-transform:uppercase;
}

/* thin bright accent bar under the header (NG vibe) */
.accent-bar{
  height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 2px 0 rgba(0,0,0,.2) inset;
}

/* Nav — uppercase, spaced */
.nav a{
  text-decoration:none;color:#cfe2ff;opacity:.9;
  margin-left:20px;padding:10px 12px;border-radius:10px;
  letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;
  transition:background .15s,opacity .15s,border-color .15s;
  border:1px solid transparent;
}
.nav a:hover{opacity:1;background:rgba(255,255,255,.06);border-color:#2b4f85}

/* ===== Hero (oversized with diagonal accent) ===== */
.hero{
  position:relative;overflow:hidden;margin:32px 0 36px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:var(--shadow);
}
.hero::before{
  /* angled blue ribbon sweeping across the bottom */
  content:"";position:absolute;left:-10%;right:-10%;bottom:-100px;height:220px;
  background:linear-gradient(90deg,transparent 0%,rgba(30,144,255,.25) 30%,rgba(43,176,255,.10) 100%);
  transform:skewY(-7deg);pointer-events:none;
}
.hero-inner{
  display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
  padding:40px 34px;position:relative;z-index:1;
}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr}}

/* Hero text */
.h-eyebrow{
  font-size:.82rem;color:var(--brand-2);letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px
}
.h-title{
  font-size:2.75rem;line-height:1.08;font-weight:900;letter-spacing:.01em;margin-bottom:12px
}
.h-sub{color:var(--muted);max-width:62ch;margin-bottom:18px}

/* CTA buttons (bold, rectangular) */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:13px 18px;border-radius:10px;font-weight:800;border:2px solid transparent;transition:.15s;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#00101A;border-color:rgba(0,0,0,.0);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{
  border-color:#2b4f85;color:var(--text);background:rgba(255,255,255,.02)
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* ===== Hero image pane — uses your E-2 Hawkeye asset ===== */
.hero-art{
  height: 420px; /* tweak to 360/480 as you prefer */
  border-radius:14px;border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(4,16,37,0) 0%, rgba(4,16,37,.38) 85%), /* darken lower edge */
    radial-gradient(520px 240px at 70% 30%, rgba(43,176,255,.20), transparent 60%),
    url('/static/hero-aero.jpg') center/cover no-repeat;
  box-shadow:var(--shadow);
}

/* ===== Informational band (wide NG-style banner) ===== */
.band{
  margin:10px 0 24px;padding:18px 22px;border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(30,144,255,.16), rgba(30,144,255,.05));
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.band strong{letter-spacing:.02em}

/* ===== Feature grid (clean tiles) ===== */
.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.card{
  padding:22px;border-radius:16px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.card h3{font-size:1.05rem;margin-bottom:8px}
.card p{color:var(--muted)}

/* ===== Footer ===== */
.footer-wrap{margin-top:36px;background:#061530;border-top:1px solid #0e2a59}
.footer{max-width:1280px;margin:0 auto;padding:16px 28px;color:#b4c7e6;opacity:.88;font-size:.92rem;text-align:center}
.footer a{color:#bfe0ff;text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ===== Small helpers ===== */
.badge{
  display:inline-block;padding:4px 9px;border-radius:999px;
  font-size:.72rem;font-weight:900;color:#00101A;margin-left:8px;
  background:linear-gradient(135deg,var(--ok),#9bffd1);
}

/* ===== Mentee Survey — NG-inspired form styles ===== */
.form-wrap{margin:26px 0}
.form-card{
  padding:24px;border-radius:16px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.form-title{font-size:1.35rem;font-weight:900;margin-bottom:6px;letter-spacing:.01em}
.form-sub{color:var(--muted);margin-bottom:18px}

.form-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:980px){.form-grid{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:8px}
.field.inline{flex-direction:row;align-items:center;gap:12px}

label{
  font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;font-size:.8rem;color:#cfe2ff;
}

.input, .select, .textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #2b4f85; background:rgba(255,255,255,.02); color:var(--text);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder, .textarea::placeholder{color:#9db3d1aa}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(43,176,255,.18);
  background:rgba(255,255,255,.03);
}

.row-span-2{grid-row:span 2 / span 2}
.col-span-2{grid-column:span 2 / span 2}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;border:1px solid #2b4f85;color:var(--text);
  background:rgba(255,255,255,.02);cursor:pointer;user-select:none;
}
.pill input{appearance:none;width:14px;height:14px;border:2px solid #7fbaff;border-radius:50%;display:inline-block}
.pill input:checked{background:var(--brand);border-color:var(--brand)}

.option-cards{display:flex;flex-wrap:wrap;gap:12px}
.option-card{
  flex:1 1 200px; min-width:180px; padding:14px;border-radius:12px;
  border:1px solid #2b4f85;background:rgba(255,255,255,.02);cursor:pointer
}
.option-card:hover{background:rgba(255,255,255,.05)}
.option-card input{margin-right:8px;transform:translateY(1px)}

.form-actions{display:flex;gap:12px;justify-content:flex-start;margin-top:8px}
.btn-wide{min-width:200px}

.helper{color:var(--muted);font-size:.9rem}
.required::after{content:" *"; color:#ff9393}