/* ============================================================
   SiLOS — styles
   Palette: void #05080f · star #eef3ff · electric #4d8dff
   Display type: Michroma · Body: Inter/system
   ============================================================ */
:root{
  --void:#05080f;
  --panel:rgba(13,20,38,.62);
  --panel-line:rgba(140,170,230,.16);
  --star:#eef3ff;
  --dim:#92a0bd;
  --blue:#4d8dff;
  --glow:#9cc1ff;
  --err:#ff6b7a;
  --r:14px;
  --disp:'Michroma',Verdana,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--void);
  color:var(--star);
  font-family:var(--body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
}
.wordmark{font-family:var(--disp);font-size:13px;letter-spacing:.32em;color:var(--dim);text-decoration:none}
.menu-btn{
  font-family:var(--disp);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--star);background:rgba(20,30,55,.55);border:1px solid var(--panel-line);
  border-radius:999px;padding:11px 20px;cursor:pointer;backdrop-filter:blur(8px);
  transition:border-color .2s,background .2s;
}
.menu-btn:hover{border-color:var(--blue);background:rgba(30,46,84,.65)}
.menu-btn[aria-expanded="true"]{border-color:var(--blue)}

/* ---------- services menu ---------- */
.menu-panel{
  position:fixed;top:64px;right:22px;z-index:29;width:min(420px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;
  backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:18px;opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.menu-panel.open{opacity:1;transform:none;pointer-events:auto}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 6px 12px;border:1px solid transparent;border-radius:12px;
  background:rgba(255,255,255,.02);color:var(--star);text-decoration:none;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s;
}
.tile:hover{background:rgba(77,141,255,.10);border-color:rgba(77,141,255,.35);transform:translateY(-2px)}
.tile svg{width:30px;height:30px;stroke:var(--glow);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile img{height:24px;width:auto;max-width:74px;object-fit:contain;margin:3px 0}
.tile span{font-size:10.5px;letter-spacing:.06em;text-align:center;color:var(--dim);line-height:1.35}
.tile:hover span{color:var(--star)}
.tile-blurb{
  margin-top:12px;border-top:1px solid var(--panel-line);padding-top:12px;
  font-size:13px;line-height:1.6;color:var(--dim);min-height:0;display:none;
}
.tile-blurb.show{display:block;animation:fadein .3s ease}
.menu-foot{display:flex;justify-content:center;margin-top:14px}
.contact-btn{
  font-family:var(--disp);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#0b1322;background:linear-gradient(180deg,#cfe0ff,#7fa9f5);
  border:0;border-radius:999px;padding:11px 26px;cursor:pointer;
  transition:filter .18s,transform .18s;
}
.contact-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* contact form (swaps the grid) */
.contact-form{display:none;animation:fadein .35s ease}
.contact-form.show{display:block}
.contact-form h3{font-family:var(--disp);font-size:12px;letter-spacing:.26em;margin-bottom:4px}
.contact-form p.sub{font-size:12.5px;color:var(--dim);margin-bottom:14px}
.contact-form label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:10px 0 5px}
.contact-form input,.contact-form textarea{
  width:100%;background:rgba(8,13,26,.7);border:1px solid var(--panel-line);
  border-radius:10px;color:var(--star);padding:11px 12px;font:14px var(--body);
}
.contact-form textarea{min-height:88px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue)}
.captcha-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.captcha-row .q{font-size:13px;color:var(--glow);white-space:nowrap}
.captcha-row input{width:84px}
.hp{position:absolute;left:-5000px;opacity:0;height:0;width:0}
.contact-actions{display:flex;gap:10px;margin-top:16px;align-items:center}
.linkish{background:none;border:0;color:var(--dim);font-size:12px;cursor:pointer;text-decoration:underline}
.form-note{font-size:12.5px;margin-top:10px;min-height:17px}
.form-note.ok{color:#6fe3a5}.form-note.bad{color:var(--err)}

/* ---------- center stage ---------- */
.stage{
  position:relative;z-index:10;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 18px 8vh;
}
.logo{width:min(520px,78vw);height:auto;filter:drop-shadow(0 0 26px rgba(125,170,255,.28));user-select:none;-webkit-user-drag:none}
.tagline{
  margin:6px 0 34px;font-family:var(--disp);font-size:10.5px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--dim);text-align:center;
}

/* panes share a slot */
.pane-slot{position:relative;width:min(560px,92vw);min-height:240px}
.pane{position:absolute;inset:0 auto auto 0;width:100%;transition:opacity .35s ease,transform .35s ease}
.pane.hiding{opacity:0;transform:translateY(10px) scale(.985);pointer-events:none}
.pane.hidden{display:none}

/* auth card */
.auth-card{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;
  backdrop-filter:blur(14px);padding:26px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.auth-card .field{margin-bottom:14px}
.auth-card input{
  width:100%;background:rgba(8,13,26,.72);border:1px solid var(--panel-line);
  border-radius:11px;color:var(--star);padding:14px 15px;font:15px var(--body);
  transition:border-color .2s;
}
.auth-card input::placeholder{color:#9aa6bd}
.auth-card input:focus{outline:none;border-color:var(--blue)}
.auth-card input:focus::placeholder{color:transparent}   /* inner text disappears on click */
.auth-row{display:flex;gap:12px;align-items:stretch;margin-top:4px}

/* silver metallic buttons */
.btn-chrome{
  position:relative;overflow:hidden;border:1px solid #aeb6c2;border-radius:11px;
  font-family:var(--disp);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#1c2330;padding:14px 18px;cursor:pointer;flex:1;
  background:linear-gradient(180deg,#f4f7fb 0%,#cfd6df 38%,#9aa4b1 50%,#c4ccd6 64%,#eef2f7 100%);
  box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(0,0,0,.45);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-chrome::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-22deg);transition:left .5s ease;
}
.btn-chrome:hover{filter:brightness(1.05)}
.btn-chrome:hover::after{left:120%}
.btn-chrome:active{transform:translateY(1px);box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(0,0,0,.4)}
.btn-ai{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.btn-ai .spark{font-size:14px}
.auth-msg{min-height:18px;margin-top:12px;font-size:13px;color:var(--err);text-align:center}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.auth-card.shake{animation:shake .45s ease}

/* search pane (Google-esque) */
.search-pane .pill{
  display:flex;align-items:center;gap:12px;
  background:rgba(14,21,40,.78);border:1px solid var(--panel-line);border-radius:999px;
  padding:7px 9px 7px 22px;backdrop-filter:blur(14px);
  box-shadow:0 26px 70px rgba(0,0,0,.5);transition:border-color .2s,box-shadow .2s;
}
.search-pane .pill:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(77,141,255,.14),0 26px 70px rgba(0,0,0,.5)}
.search-pane input{
  flex:1;background:none;border:0;color:var(--star);font:17px var(--body);min-width:0;
}
.search-pane input::placeholder{color:#8e9bb6}
.search-pane input:focus{outline:none}
.go{
  flex:0 0 auto;border:1px solid #aeb6c2;border-radius:999px;width:46px;height:46px;
  background:linear-gradient(180deg,#f4f7fb,#9aa4b1 55%,#e7ecf2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:17px;color:#1c2330;
  transition:filter .15s,transform .15s;
}
.go:hover{filter:brightness(1.07)}
.go:active{transform:scale(.96)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.chip{
  font-size:12.5px;color:var(--dim);background:rgba(255,255,255,.03);
  border:1px solid var(--panel-line);border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:color .18s,border-color .18s;
}
.chip:hover{color:var(--star);border-color:var(--blue)}
.answer{
  margin-top:18px;background:var(--panel);border:1px solid var(--panel-line);
  border-radius:16px;backdrop-filter:blur(12px);padding:18px 20px;display:none;
}
.answer.show{display:block;animation:fadein .3s ease}
.answer .who{font-family:var(--disp);font-size:9.5px;letter-spacing:.3em;color:var(--glow);margin-bottom:9px}
.answer .body{font-size:14.5px;line-height:1.7;color:#dbe4f5;white-space:pre-wrap}
.caret{display:inline-block;width:8px;background:var(--glow);height:15px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.back-link{margin-top:14px;text-align:center}
.back-link button{background:none;border:0;color:var(--dim);font-size:12.5px;cursor:pointer;letter-spacing:.04em}
.back-link button:hover{color:var(--star)}

/* ---------- ghost footer ---------- */
.ghost-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:34px;
  padding:16px 10px 18px;opacity:.07;transition:opacity .35s ease;
}
.ghost-footer:hover,.ghost-footer:focus-within{opacity:.92}
.ghost-footer a{display:flex;align-items:center;text-decoration:none}
.ghost-footer img{height:15px;width:auto;filter:grayscale(1) brightness(1.6)}
.ghost-footer img.taller{height:19px}
.ghost-footer a:hover img{filter:none}

@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media (max-width:560px){
  .auth-row{flex-direction:column}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .tagline{letter-spacing:.34em}
  .ghost-footer{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}