/* ===== Blue Alien Enterprises — shared styles for legal + contact pages ===== */
:root{
  --ink:#14121d; --ink2:#1b1830; --card:#231f38; --card2:#2b2645;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --teal:#86b0c9; --teal-br:#bcdcec; --teal-dk:#486a88;
  --violet:#a66bcb; --violet-dk:#5e3a86;
  --amber:#e3a97d; --amber-dk:#c37f4d;
  --text:#efecf6; --muted:#a49ebb; --muted2:#7d7795;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--text); font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; min-height:100vh; display:flex; flex-direction:column}
h1,h2,h3,.disp{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.12; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
::selection{background:var(--violet); color:#fff}

#stars{position:fixed; inset:0; z-index:0; pointer-events:none}
.glow-a{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(120px); opacity:.5}
.ga1{top:-140px; left:38%; width:620px; height:500px; background:#3a2a66}
.ga2{top:52%; left:-120px; width:460px; height:460px; background:#2d4a66; opacity:.4}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px; position:relative; z-index:2; width:100%}

/* header / nav */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(18,16,28,.72); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:13px}
.brand img{width:46px; height:46px; border-radius:50%; box-shadow:0 0 0 1.5px var(--line2), 0 4px 14px rgba(0,0,0,.4)}
.brand .bt{font-family:"Fraunces"; font-weight:600; font-size:1.18rem; letter-spacing:.005em; line-height:1}
.brand .bs{font-size:.66rem; letter-spacing:.34em; color:var(--muted); text-transform:uppercase; margin-top:3px}
nav.links{display:flex; gap:30px; font-size:.93rem; font-weight:500; color:var(--muted)}
nav.links a{transition:color .2s} nav.links a:hover,nav.links a.active{color:var(--teal-br)}
.burger{display:none; background:none; border:1px solid var(--line2); border-radius:11px; padding:9px; color:var(--text); cursor:pointer; font-size:1rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-weight:600; font-size:.92rem;
  padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.22s; text-align:center}
.btn-primary{background:linear-gradient(135deg,var(--teal) 0%,var(--violet) 108%); color:#120f1c; box-shadow:0 6px 22px -8px var(--violet)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px -8px var(--violet)}
.btn-primary:disabled{opacity:.5; cursor:default; transform:none}
.btn-ghost{border-color:var(--line2); color:var(--text); background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-br)}

/* page head */
main{flex:1; position:relative; z-index:2}
.pagehead{padding:60px 0 6px}
.pagehead .eyebrow{color:var(--amber); font-weight:600; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.1rem); margin-top:12px}
.pagehead .updated{color:var(--muted2); font-size:.85rem; margin-top:12px}

/* legal sub-nav */
.legal-nav{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px}
.legal-nav a{font-size:.85rem; padding:7px 14px; border:1px solid var(--line2); border-radius:999px; color:var(--muted); transition:.2s}
.legal-nav a:hover,.legal-nav a.active{border-color:var(--teal); color:var(--teal-br)}

/* prose */
.prose{max-width:760px; padding:26px 0 70px; color:var(--text)}
.prose h2{font-size:1.4rem; margin:38px 0 12px; color:var(--teal-br)}
.prose h3{font-size:1.08rem; margin:22px 0 8px}
.prose p{color:var(--muted); margin:10px 0; font-size:1.0rem; line-height:1.75}
.prose ul{color:var(--muted); margin:10px 0 10px 22px; display:flex; flex-direction:column; gap:7px; font-size:1.0rem; line-height:1.6}
.prose a{color:var(--teal-br); text-decoration:underline; text-underline-offset:2px}
.prose strong{color:var(--text)}
.callout{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:12px; padding:16px 18px; margin:18px 0; color:var(--muted)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; padding:22px 0 70px; align-items:start}
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.contact-card h2{font-size:1.3rem; margin-bottom:6px}
.contact-card > p{color:var(--muted); font-size:.95rem; margin-bottom:8px}
.contact-line{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line)}
.contact-line:last-child{border-bottom:0}
.contact-line .ic{width:40px;height:40px;border-radius:11px;background:rgba(134,176,201,.12);display:grid;place-items:center;flex:none}
.contact-line .ic svg{width:19px;height:19px;color:var(--teal-br)}
.contact-line .l{font-size:.78rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
.contact-line .v{font-weight:600}
.contact-line a.v{color:var(--teal-br); text-decoration:none}
.field{margin-bottom:13px}
.field label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:5px; font-weight:500}
.field input,.field textarea,.field select{width:100%; background:var(--ink); border:1px solid var(--line2); color:var(--text);
  border-radius:12px; padding:11px 13px; font-family:inherit; font-size:.95rem}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--teal); border-color:transparent}
.frow{display:flex; gap:12px}
.frow .field{flex:1}
.formnote{font-size:.82rem;color:var(--muted2);margin-top:12px}
.okmsg{display:none;background:rgba(0,214,50,.1);border:1px solid rgba(0,214,50,.4);color:#8ef0a8;border-radius:12px;padding:14px;margin-top:12px;font-size:.92rem}
.okmsg.show{display:block}
.errmsg{display:none;background:rgba(227,120,120,.12);border:1px solid rgba(227,120,120,.4);color:#f0b8b8;border-radius:12px;padding:14px;margin-top:12px;font-size:.92rem}
.errmsg.show{display:block}

/* footer */
footer{margin-top:20px; border-top:1px solid var(--line); background:rgba(14,12,22,.6); position:relative; z-index:2}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding:56px 0 40px}
.foot .b img{width:42px; height:42px; border-radius:50%; margin-bottom:14px}
.foot p{color:var(--muted); font-size:.92rem; margin-top:8px; max-width:24rem}
.foot h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted2); margin-bottom:14px}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:10px; font-size:.94rem; color:var(--muted)}
.foot ul a:hover{color:var(--teal-br)}
.copy{border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; color:var(--muted2)}
:focus-visible{outline:2px solid var(--teal-br); outline-offset:2px; border-radius:6px}

@media(max-width:900px){
  .foot{grid-template-columns:1fr; gap:30px}
  .contact-grid{grid-template-columns:1fr}
  nav.links{display:none}
  .burger{display:block}
}
@media(max-width:560px){ .frow{flex-direction:column; gap:0} .brand .bs{display:none} }
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto}}