/* ============================================================
   ASPEX STUDIOS — shared stylesheet
   Palette: Ink #06090F · Carbon #0C121C · Bone #EAE7DF
            Ash #8E99A8 · Signal #6E8BFF → #46D5C8
   Type:    Frank Ruhl Libre (display) · IBM Plex Sans (body)
            IBM Plex Mono (schematic labels)
   ============================================================ */

:root{
  --ink:#06090f;
  --carbon:#0c121c;
  --panel:#0e1622;
  --line:rgba(126,162,204,.14);
  --grid:rgba(126,162,204,.055);
  --bone:#eae7df;
  --ash:#8e99a8;
  --sig-a:#6e8bff;
  --sig-b:#46d5c8;
  --sig-grad:linear-gradient(90deg,var(--sig-a),var(--sig-b));
  --max:1120px;
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:rgba(110,139,255,.35)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(6,9,15,.72);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:34px;height:34px}
.brand b{
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  letter-spacing:.22em;text-transform:uppercase;
}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--ash);
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{
  color:var(--bone);border-bottom-color:var(--sig-b);
}
.nav-toggle{display:none;background:none;border:1px solid var(--line);
  color:var(--bone);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.15em;padding:8px 14px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{position:relative;z-index:2;padding-top:112px;padding-bottom:120px;text-align:center}
.hero .mark-lg{width:88px;height:88px;margin:0 auto 30px}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.08;
}
.hero .tag{
  margin-top:18px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--ash);
}
.hero .cta-row{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.waves{position:absolute;inset:auto 0 -2px 0;z-index:1;opacity:.9;pointer-events:none}
.tunnel{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  z-index:0;opacity:.5;pointer-events:none}
.tunnel circle{fill:none;stroke:rgba(126,162,204,.16);stroke-width:1}

/* small page hero (sub-pages) */
.page-hero{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .wrap{padding:76px 24px 58px;position:relative;z-index:2}
.page-hero h1{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3rem);
  letter-spacing:.12em;text-transform:uppercase}
.page-hero p{margin-top:12px;color:var(--ash);max-width:60ch;font-family:var(--serif);font-style:italic}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sig-b);margin-bottom:14px;
}
.eyebrow::before{content:"// "}
h2.sec{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.3rem);
  letter-spacing:.06em;line-height:1.2}
.btn{
  display:inline-block;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:13px 26px;border:1px solid var(--line);color:var(--bone);
  transition:border-color .2s,background .2s;
}
.btn:hover{border-color:var(--sig-b);background:rgba(70,213,200,.06)}
.btn.solid{border:none;background:var(--sig-grad);color:#04121a;font-weight:600}
.btn.solid:hover{filter:brightness(1.08)}
section{padding:88px 0}
.rule{height:1px;background:var(--line)}

/* ---------- mission ---------- */
.mission{background:var(--carbon);border-bottom:1px solid var(--line)}
.mission .wrap{max-width:800px;text-align:center}
.mission p{font-size:1.15rem;color:#c8ccd4}
.mission p strong{color:var(--bone)}

/* ---------- ecosystem grid (home) ---------- */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.eco-card{
  background:var(--panel);border:1px solid var(--line);padding:34px 28px;
  text-decoration:none;position:relative;transition:transform .25s,border-color .25s;
}
.eco-card::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--sig-grad);transition:width .3s;
}
.eco-card:hover{transform:translateY(-4px);border-color:rgba(110,139,255,.4)}
.eco-card:hover::after{width:100%}
.eco-card .glyph{width:44px;height:44px;margin-bottom:20px}
.eco-card h3{font-family:var(--serif);font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase}
.eco-card .sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sig-b);margin:8px 0 14px}
.eco-card p{color:var(--ash);font-size:.94rem}

/* ---------- technology blocks ---------- */
.tech{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:74px 0}
.tech + .tech{border-top:1px solid var(--line)}
.tech.flip .tech-visual{order:2}
.tech-visual{
  background:var(--panel);border:1px solid var(--line);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.tech-visual svg{width:78%;height:78%}
.tech-copy h3{font-family:var(--serif);font-size:1.7rem;letter-spacing:.1em;text-transform:uppercase}
.tech-copy .role{font-family:var(--serif);font-style:italic;color:var(--sig-b);margin:8px 0 18px}
.tech-copy p{color:#b9bec7}
.tech-copy .idx{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--ash);
  display:block;margin-bottom:14px}

/* ---------- support ---------- */
.support-card{
  background:var(--panel);border:1px solid var(--line);
  padding:48px 40px;text-align:center;max-width:720px;margin:0 auto;
}
.support-card .mail{
  display:inline-block;margin-top:22px;font-family:var(--mono);
  font-size:1rem;letter-spacing:.05em;color:var(--sig-b);
  text-decoration:none;border-bottom:1px solid rgba(70,213,200,.4);
  padding-bottom:2px;
}
.faq{max-width:760px;margin:0 auto}
.faq details{border:1px solid var(--line);background:var(--panel);margin-bottom:14px}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.03em;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--sig-b);font-size:1.1rem}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 24px 22px;color:var(--ash);font-size:.95rem}

/* ---------- privacy ---------- */
.legal{max-width:780px;margin:0 auto}
.legal .intro{font-family:var(--serif);font-style:italic;font-size:1.15rem;
  color:#c8ccd4;margin-bottom:40px}
.legal .clause{border-left:2px solid transparent;
  border-image:linear-gradient(180deg,var(--sig-a),var(--sig-b)) 1;
  padding:4px 0 4px 26px;margin-bottom:34px}
.legal .clause h3{font-family:var(--serif);font-size:1.15rem;
  letter-spacing:.06em;margin-bottom:8px}
.legal .clause p{color:var(--ash);font-size:.97rem}
.legal .closing{border-top:1px solid var(--line);padding-top:30px;color:#b9bec7}
.legal .updated{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);margin-top:26px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--carbon)}
.site-foot .wrap{padding:44px 24px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap}
.site-foot .cols{display:flex;gap:34px;list-style:none;flex-wrap:wrap}
.site-foot a{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);text-decoration:none}
.site-foot a:hover{color:var(--bone)}
.site-foot .fine{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--ash);width:100%;margin-top:8px}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* ---------- motion ---------- */
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.waves .drift{animation:drift 14s linear infinite}
.waves .drift.slow{animation-duration:22s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .eco-grid{grid-template-columns:1fr}
  .tech{grid-template-columns:1fr;gap:34px;padding:56px 0}
  .tech.flip .tech-visual{order:0}
  section{padding:64px 0}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(6,9,15,.97);border-bottom:1px solid var(--line);
    display:none;padding:10px 24px 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:14px 0}
}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--sig-b);outline-offset:3px}