/* Quantum Spirit Suite — shared stylesheet (gateway: index.html, home.html)
   Visual language inherited from docs/manuel/poc/poc_menu.html: pitch black,
   dot grid + ambient orange/purple glow, Outfit display + DM Sans body,
   glass cards, animated top hairline. */

:root{
  --bg:#0A0A0A; --black:#000;
  --orange:#FF6B35; --orange-lt:#FF9500; --red:#FF4500; --pink:#FF2D55; --pink2:#FF2D87; --purple:#B24BF3; --purple-dk:#7C3AED; --cyan:#00D4FF;
  --amber:#FFB020;
  --white:#FFFFFF; --g1:#F2F2F0; --g2:#C9C9C9; --g3:#9A9A9A; --g4:#6E6E6E;
  --card:rgba(255,255,255,.025); --card-2:rgba(255,255,255,.04); --cbd:rgba(255,255,255,.07); --cbd-2:rgba(255,255,255,.10);
  --grad:linear-gradient(135deg,#FF6B35,#FF4500,#FF2D55);
  --grad-op:linear-gradient(90deg,#FF6B35,#B24BF3);
  --disp:"Outfit",-apple-system,sans-serif; --body:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); background:var(--bg); color:var(--g2); min-height:100vh;
  -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
}
/* layered atmosphere: dot grid + ambient orange/purple glow */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle 1px,rgba(255,255,255,.05) 1px,transparent 1px); background-size:30px 30px;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 75% 8%,rgba(255,107,53,.10) 0%,rgba(178,75,243,.05) 38%,transparent 70%),
    radial-gradient(55% 45% at 12% 88%,rgba(178,75,243,.08) 0%,rgba(255,107,53,.04) 40%,transparent 72%);
}

/* animated top hairline */
.toprule{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:5;
  background:linear-gradient(90deg,transparent,var(--orange),var(--pink),var(--purple),transparent);
  background-size:200% 100%; animation:slide 7s linear infinite; opacity:.85;
}
@keyframes slide{ to{ background-position:200% 0; } }

/* crest, reused on both pages */
.crest{ display:flex; align-items:center; gap:14px; }
.crest svg{ width:30px; height:30px; filter:drop-shadow(0 0 10px rgba(255,107,53,.4)); flex:0 0 auto; }
.crest .nm{ font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--white); }

/* entrance */
@keyframes up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.rise{ opacity:0; animation:up .6s cubic-bezier(.22,1,.36,1) forwards; }

/* ============ GATE (index.html) ============ */
.gate-wrap{
  position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px; text-align:center;
}
.gate-crest{ justify-content:center; margin-bottom:38px; }
.gate-card{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--cbd);
  border-radius:20px; padding:46px 38px 38px; backdrop-filter:blur(10px);
}
.gate-title{
  font-family:var(--disp); font-size:28px; font-weight:700; letter-spacing:-.5px; color:var(--white);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  width:fit-content; margin:0 auto 10px;
}
.gate-sub{ font-size:13px; color:var(--g4); letter-spacing:.04em; line-height:1.6; margin-bottom:32px; }
.gate-form{ display:flex; flex-direction:column; gap:14px; }
.gate-form input[type="password"]{
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--cbd-2); border-radius:10px;
  padding:14px 16px; font-family:var(--body); font-size:15px; color:var(--white); letter-spacing:.06em;
  outline:none; transition:border-color .2s, background .2s;
}
.gate-form input[type="password"]:focus{ border-color:rgba(255,107,53,.6); background:rgba(255,255,255,.05); }
.gate-form input[type="password"]::placeholder{ color:var(--g4); }
.gate-btn{
  width:100%; border:none; border-radius:10px; padding:14px 16px; cursor:pointer;
  font-family:var(--disp); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white); background:var(--grad); transition:filter .2s, transform .2s;
}
.gate-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.gate-btn:active{ transform:translateY(0); }
.gate-error{
  font-size:12px; color:var(--pink); letter-spacing:.03em; min-height:16px; margin-top:2px;
}
.gate-error.show{ animation:shake .32s linear; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.gate-foot{ margin-top:34px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--g4); }

@media(max-width:480px){
  .gate-card{ padding:38px 24px 30px; }
  .gate-title{ font-size:24px; }
}

/* ============ HOME (home.html) ============ */
.wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:40px 40px 70px; }

.hd{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.chip{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--g3);
  background:var(--card); border:1px solid var(--cbd); border-radius:100px; padding:7px 16px; white-space:nowrap;
}

.hero{ margin-bottom:54px; }
.hero h1{
  font-family:var(--disp); font-size:48px; font-weight:700; line-height:1.08; letter-spacing:-1px; color:var(--white);
  max-width:820px;
}
.hero .sub{ font-family:var(--disp); font-weight:300; font-size:19px; color:var(--g3); margin-top:14px; }

.sec{
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--g3); margin:0 0 18px; display:flex; align-items:center; gap:16px;
}
.sec::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(255,107,53,.35),rgba(255,255,255,.04) 60%,transparent); }

/* engine tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:52px; }
.tile{
  position:relative; background:var(--card); border:1px solid var(--cbd); border-radius:16px;
  padding:26px 24px; display:flex; flex-direction:column; min-height:186px; backdrop-filter:blur(8px);
  transition:transform .25s, border-color .25s, background .25s;
}
.tile-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.tile h3{ font-family:var(--disp); font-size:20px; font-weight:600; color:var(--white); }
.tile p{ font-size:13px; line-height:1.6; color:var(--g3); flex:1; }
.status{
  font-family:var(--disp); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; white-space:nowrap;
}
.status.live{ color:var(--white); background:linear-gradient(135deg,rgba(255,107,53,.9),rgba(255,45,85,.9)); }
.status.dev{ color:var(--amber); background:rgba(255,176,32,.10); border:1px solid rgba(255,176,32,.28); }

.tile.live{
  cursor:pointer; text-decoration:none; border-color:rgba(255,107,53,.4);
  box-shadow:0 0 34px rgba(255,107,53,.14);
}
.tile.live:hover{ transform:translateY(-4px); border-color:rgba(255,107,53,.7); box-shadow:0 0 46px rgba(255,107,53,.24); }
.tile.dev{ opacity:.55; filter:saturate(.75); cursor:default; }

/* shared core strip */
.core{
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:flex-start;
  background:var(--card); border:1px solid var(--cbd); border-radius:14px; padding:20px 26px; margin-bottom:52px;
}
.core span{ font-size:12.5px; color:var(--g3); letter-spacing:.02em; }
.core span b{ color:var(--g1); font-weight:500; }

/* instance panel */
.instance{
  background:var(--card); border:1px solid var(--cbd); border-radius:16px; padding:28px 26px;
  backdrop-filter:blur(8px); margin-bottom:56px;
}
.instance h4{ font-family:var(--disp); font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--white); text-transform:uppercase; margin-bottom:16px; }
.instance ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.instance li{ font-size:13px; color:var(--g3); line-height:1.5; padding-left:16px; position:relative; }
.instance li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--grad); }

/* footer */
.foot{
  border-top:1px solid var(--cbd); padding-top:20px; text-align:center;
  font-family:var(--disp); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--g4);
}

@media(max-width:960px){
  .tiles{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:38px; }
}
@media(max-width:640px){
  .wrap{ padding:28px 20px 50px; }
  .tiles{ grid-template-columns:1fr; }
  .hd{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero h1{ font-size:30px; }
  .core{ flex-direction:column; align-items:flex-start; gap:10px; }
}