/* =====================================================
   AETHER · Subpage stylesheet
   Shared by all internal pages (services, developers,
   company, legal). Matches the index.html design tokens.
   ===================================================== */

:root{
  --bg-0: #04070f;
  --bg-1: #070c18;
  --bg-2: #0c1428;
  --ink: #e6edf7;
  --ink-dim: #8597b3;
  --ink-ghost: #4a5a78;
  --cyan: #5fe2ff;
  --cyan-deep: #0e8fb5;
  --violet: #8a7bff;
  --amber: #ffb661;
  --line: rgba(143,172,220,0.12);
  --line-bright: rgba(143,172,220,0.28);
  --grid: rgba(95,226,255,0.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg-0);color:var(--ink);font-family:'Space Grotesk','Inter',sans-serif;overflow-x:hidden}
body{
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(95,226,255,0.06), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(138,123,255,0.05), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(14,143,181,0.06), transparent 60%),
    var(--bg-0);
  min-height:100vh;
}
.mono{font-family:'JetBrains Mono',monospace; font-feature-settings:'tnum','zero'}

.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 50%, transparent 100%);
  opacity:0.4;
}
.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.03; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* NAV */
nav.top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(4,7,15,0.55);
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink)}
.brand-mark{
  width:auto; height:50px; position:relative; flex-shrink:0;
  filter: drop-shadow(0 0 10px rgba(95,226,255,0.25));
  transition: filter .3s ease;
}
.brand:hover .brand-mark{ filter: drop-shadow(0 0 16px rgba(95,226,255,0.55)); }
.brand-mark img{ height:50px; width:auto; display:block; }
nav ul{display:flex; gap:28px; list-style:none}
nav ul a{
  color:var(--ink-dim); text-decoration:none; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:500; transition:color .2s;
  position:relative; padding:4px 2px;
}
nav ul a:hover{color:var(--ink)}
nav ul a.is-active{color:var(--cyan)}
nav ul a::before{
  content:""; position:absolute; left:-10px; top:50%; width:4px; height:4px; border-radius:50%;
  background:var(--cyan); transform:translateY(-50%) scale(0); transition:transform .2s;
}
nav ul a:hover::before, nav ul a.is-active::before{transform:translateY(-50%) scale(1)}
.nav-right{display:flex; gap:14px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; letter-spacing:0.05em;
  cursor:pointer; border:none; text-decoration:none; transition:all .25s;
  font-family: 'Space Grotesk',sans-serif;
}
.btn-primary{
  background: linear-gradient(135deg, var(--cyan) 0%, #78c8ff 50%, var(--violet) 100%);
  color:#04070f; box-shadow: 0 0 0 1px rgba(95,226,255,0.4), 0 10px 30px -10px rgba(95,226,255,0.5);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(95,226,255,0.6), 0 14px 36px -10px rgba(95,226,255,0.7) }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-bright) }
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan) }

/* PAGE HEAD */
.page-head{
  position:relative; z-index:5;
  padding: 160px 40px 60px;
  max-width: 1280px; margin: 0 auto;
}
.crumbs{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em;
  color: var(--ink-ghost); text-transform:uppercase; margin-bottom: 26px;
}
.crumbs a{ color: var(--ink-ghost); text-decoration:none; transition: color .2s }
.crumbs a:hover{ color: var(--cyan) }
.crumbs .sep{ opacity:0.5 }
.crumbs .here{ color: var(--cyan) }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.22em;
  color: var(--cyan); text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--cyan); display:inline-block }
h1.page-title{
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 600; line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 24px; max-width: 980px;
}
h1.page-title .g{
  background: linear-gradient(100deg, #fff 0%, #c7e5ff 30%, var(--cyan) 60%, var(--violet) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.page-lede{
  font-size: 18px; line-height:1.65; color: var(--ink-dim); max-width: 720px;
}

/* SECTIONS */
.page-body{
  position:relative; z-index:4;
  max-width: 1280px; margin: 0 auto;
  padding: 40px 40px 120px;
}
.section{
  padding: 60px 0; border-top: 1px solid var(--line);
}
.section:first-of-type{ border-top:none; padding-top: 20px }
.section h2{
  font-size: clamp(28px, 3vw, 40px); font-weight:600; letter-spacing:-0.015em;
  line-height: 1.05; margin-bottom: 18px; max-width: 780px;
}
.section h2 .g{ background: linear-gradient(100deg, var(--cyan), var(--violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.section p{ font-size: 16px; line-height: 1.7; color: var(--ink-dim); max-width: 720px; margin-bottom: 16px }
.section ul{ list-style:none; margin: 16px 0 24px; max-width: 760px }
.section ul li{
  position:relative; padding-left: 22px; padding-bottom: 12px;
  color: var(--ink-dim); font-size: 15.5px; line-height: 1.65;
}
.section ul li::before{
  content:""; position:absolute; left:0; top: 10px; width:8px; height:1px;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan);
}
.section ul li strong{ color: var(--ink); font-weight: 600 }

/* CARDS / GRID */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px }
.card{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(12,20,40,0.55), rgba(7,12,24,0.45));
  border:1px solid var(--line); border-radius: 14px;
  padding: 26px; transition: border-color .3s, transform .3s;
}
.card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(95,226,255,0.07), transparent 50%);
  opacity:0; transition: opacity .3s; pointer-events:none;
}
.card:hover{ border-color: var(--line-bright) }
.card:hover::before{ opacity:1 }
.card .card-num{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--ink-ghost); letter-spacing:0.18em }
.card h3{ font-size: 20px; font-weight:600; letter-spacing:-0.01em; margin: 10px 0 8px; color: var(--ink) }
.card p{ font-size: 14px; line-height:1.6; color: var(--ink-dim) }

.kv{
  display:grid; grid-template-columns: 200px 1fr; gap: 14px 28px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.kv:last-child{ border-bottom:none }
.kv dt{
  font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--ink-ghost);
  letter-spacing:0.18em; text-transform:uppercase; padding-top: 3px;
}
.kv dd{ color: var(--ink-dim); font-size: 15.5px; line-height: 1.65 }
.kv dd strong{ color: var(--ink); font-weight: 600 }

/* TERMINAL / CODE */
.terminal{
  border:1px solid var(--line-bright); border-radius: 14px; overflow:hidden;
  background: linear-gradient(180deg, rgba(12,20,40,0.7), rgba(7,12,24,0.7));
  margin: 24px 0;
}
.term-head{
  display:flex; align-items:center; gap:10px; padding: 10px 14px;
  border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--ink-ghost); letter-spacing:0.1em;
}
.term-dots{ display:flex; gap:6px }
.term-dots i{ width:10px; height:10px; border-radius:50%; background:#24314e; display:inline-block }
.term-dots i.a{ background:#ff6b7a } .term-dots i.b{ background:#ffb661 } .term-dots i.c{ background:#4ade80 }
.term-body{ padding: 20px 22px; font-family:'JetBrains Mono',monospace; font-size: 13px; color: var(--ink-dim); line-height: 1.7; overflow-x:auto }
.term-body .p{ color: var(--cyan) } .term-body .k{ color: var(--violet) } .term-body .n{ color: var(--amber) } .term-body .s{ color: #4ade80 } .term-body .c{ color: var(--ink-ghost) }
.term-body pre{ white-space: pre; font-family: inherit }

/* INLINE CTA */
.inline-cta{
  margin-top: 60px; padding: 36px 40px; border-radius: 18px; position:relative; overflow:hidden;
  border: 1px solid var(--line-bright);
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(95,226,255,0.10), transparent 60%),
    radial-gradient(500px 240px at 0% 100%, rgba(138,123,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(12,20,40,0.65), rgba(7,12,24,0.65));
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap;
}
.inline-cta h3{ font-size: 22px; font-weight:600; letter-spacing:-0.01em; margin-bottom:6px }
.inline-cta p{ font-size: 14.5px; color: var(--ink-dim); max-width: 540px }
.inline-cta .actions{ display:flex; gap:10px; flex-wrap: wrap }

/* TABLE */
.table-wrap{ overflow-x:auto; margin: 24px 0; border:1px solid var(--line); border-radius: 12px }
table.t{
  width:100%; border-collapse: collapse; font-size: 14px;
}
table.t th, table.t td{
  padding: 14px 18px; text-align:left; border-bottom: 1px solid var(--line);
}
table.t th{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em;
  text-transform: uppercase; color: var(--ink-ghost); font-weight:500;
  background: rgba(95,226,255,0.02);
}
table.t td{ color: var(--ink-dim) }
table.t td strong{ color: var(--ink); font-weight:600 }
table.t tr:last-child td{ border-bottom:none }

/* FOOTER */
footer{
  position:relative; z-index:4; padding: 80px 40px 40px;
  border-top: 1px solid var(--line);
  background: rgba(4,7,15,0.8);
}
.foot-inner{ max-width: 1520px; margin: 0 auto }
.foot-top{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px }
.foot-top p{ font-size: 14px; color: var(--ink-dim); line-height:1.65; max-width: 320px; margin-top: 18px }
.foot-col h5{ font-size:11px; letter-spacing:0.18em; color:var(--ink-ghost); text-transform:uppercase; margin-bottom: 18px; font-family:'JetBrains Mono',monospace }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px }
.foot-col a{ color:var(--ink-dim); text-decoration:none; font-size: 14px; transition: color .2s }
.foot-col a:hover{ color:var(--cyan) }
.foot-bottom{ padding-top: 28px; border-top: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-ghost); letter-spacing:0.14em; gap: 14px; flex-wrap: wrap }

/* REVEAL */
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1) }
.reveal.in{ opacity:1; transform: none }

/* STATUS PAGE */
.status-row{
  display:grid; grid-template-columns: 1.5fr 1fr 100px 120px; gap: 14px;
  align-items:center; padding: 16px 20px;
  border:1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(12,20,40,0.5), rgba(7,12,24,0.4));
}
.status-row .s-name{ color: var(--ink); font-size: 15px; font-weight:500 }
.status-row .s-desc{ color: var(--ink-dim); font-size: 13px }
.status-row .s-uptime{ font-family:'JetBrains Mono',monospace; font-size: 13px; color: var(--ink-dim); text-align:right }
.status-row .s-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size: 11px; letter-spacing:0.12em;
  padding: 5px 10px; border-radius: 100px; border: 1px solid var(--line-bright);
  color: var(--ink-dim);
}
.s-pill.ok{ color:#4ade80; border-color: rgba(74,222,128,0.4) }
.s-pill.ok::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow: 0 0 8px #4ade80 }
.s-pill.deg{ color: var(--amber); border-color: rgba(255,182,97,0.4) }
.s-pill.deg::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--amber); box-shadow: 0 0 8px var(--amber) }

/* RESPONSIVE */
@media (max-width: 1100px){
  .grid-3{ grid-template-columns: 1fr 1fr }
  .grid-2{ grid-template-columns: 1fr }
  .foot-top{ grid-template-columns: 1fr 1fr }
  nav ul{ display:none }
}
@media (max-width: 640px){
  nav.top{ padding: 14px 18px }
  .page-head{ padding: 120px 18px 40px }
  .page-body{ padding: 20px 18px 80px }
  .inline-cta{ padding: 28px 22px }
  .grid-3{ grid-template-columns: 1fr }
  .kv{ grid-template-columns: 1fr; gap: 6px }
  .status-row{ grid-template-columns: 1fr; gap: 8px }
  .status-row .s-uptime{ text-align:left }
}