/* ================================================================
   Aria product page — dark, technical, precise.
   Jarvity is soft and playful; Aria is a studio tool, so this page
   goes the other way: near-black, cyan/indigo light, hard edges,
   monospaced labels. Scoped to body.aria only.
   ================================================================ */
body.aria{
  --cy:#3FE0CE;          /* Aria accent (note teal) */
  --bl:#4C8DFF;          /* editor blue */
  --am:#FF9F45;          /* pitch-curve orange */
  --panel:rgba(255,255,255,.028);
  --edge:rgba(255,255,255,.10);
  background:#05070C;
}
/* aurora glow behind everything, cool instead of gold */
body.aria::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 42vw at 78% -6%, rgba(76,141,255,.20), transparent 62%),
    radial-gradient(52vw 40vw at 6% 12%, rgba(63,224,206,.13), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(120,90,255,.13), transparent 64%);
}
body.aria header{backdrop-filter:blur(14px);background:rgba(5,7,12,.6);border-bottom:1px solid var(--edge)}
body.aria .logo .dot{background:var(--cy);box-shadow:0 0 12px var(--cy)}
body.aria .langsel .menu a.on{color:var(--cy)}
body.aria ::selection{background:var(--cy);color:#04131a}

.amain{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px}
.amain section{padding:clamp(64px,8vw,116px) 0;border:none}

/* ---------- hero ---------- */
.ahero{padding:clamp(104px,13vw,168px) 0 clamp(30px,4vw,54px) !important;
  display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px)}
.ahero-top{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.aicon{width:92px;height:92px;border-radius:22px;border:1px solid var(--edge);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(63,224,206,.10) inset;flex:none}
.akicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.34em;
  color:var(--cy);text-transform:uppercase;margin-bottom:12px}
.ahero h1{font-size:clamp(52px,10vw,124px);line-height:.86;font-weight:900;letter-spacing:-.05em;
  text-transform:uppercase;margin:0}
.ahero h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--cy),var(--bl) 58%,#A98CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.atag{font-size:clamp(15px,2vw,21px);color:var(--ink);font-weight:300;max-width:720px;margin:22px 0 0}
.asub{color:var(--sub);font-size:15px;max-width:680px;margin:14px 0 0}

/* status chip + actions */
.arow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.achip{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:999px;
  border:1px solid rgba(63,224,206,.34);background:rgba(63,224,206,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;
  color:var(--cy);text-transform:uppercase}
.achip i{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy);
  animation:apulse 2.2s ease-in-out infinite;font-style:normal}
@keyframes apulse{50%{opacity:.28}}
.abtn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:8px;
  font-weight:700;font-size:14px;letter-spacing:.03em;transition:.22s;
  background:linear-gradient(100deg,var(--cy),var(--bl));color:#04121a}
.abtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(76,141,255,.30)}
.abtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}
.abtn.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(63,224,206,.5);box-shadow:none}

/* ---------- the piano-roll showpiece ---------- */
.aroll{position:relative;border:1px solid var(--edge);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0A0E17,#070A11);
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
.aroll-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--edge);
  background:rgba(255,255,255,.028)}
.aroll-bar b{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.aroll-bar b:nth-child(2){background:rgba(255,255,255,.11)}
.aroll-bar b:nth-child(3){background:rgba(255,255,255,.08)}
.aroll-bar span{margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.16em;color:var(--sub);text-transform:uppercase}
.aroll svg{display:block;width:100%;height:auto}

/* ---------- section furniture ---------- */
.aeyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.34em;
  color:var(--cy);text-transform:uppercase;margin-bottom:18px}
.amain h2{font-size:clamp(30px,5.2vw,62px);line-height:1.02;font-weight:900;letter-spacing:-.04em;margin-bottom:14px}
.amain h2 .thin{font-weight:200}
.alead{font-size:clamp(16px,1.9vw,20px);color:var(--ink);font-weight:300;max-width:760px;margin-bottom:44px}

/* feature grid */
.afeats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.afeat{position:relative;padding:28px 26px 30px;border:1px solid var(--edge);border-radius:12px;
  background:var(--panel);overflow:hidden;transition:border-color .3s,transform .3s,background .3s}
.afeat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);opacity:0;transition:opacity .3s}
.afeat:hover{transform:translateY(-4px);border-color:rgba(63,224,206,.32);background:rgba(255,255,255,.05)}
.afeat:hover::after{opacity:.9}
.afeat .no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.2em;
  color:var(--cy);opacity:.75;margin-bottom:16px}
.afeat h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:9px}
.afeat p{font-size:14.5px;color:var(--sub);margin:0;line-height:1.75}

/* workflow rail */
.aflow{display:grid;gap:0}
.astep{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);padding:30px 0;
  border-top:1px solid var(--edge);transition:background .3s,padding-left .35s cubic-bezier(.2,.8,.2,1)}
.astep:last-child{border-bottom:1px solid var(--edge)}
.astep:hover{background:linear-gradient(90deg,rgba(63,224,206,.055),transparent);padding-left:14px}
.astep .sn{font-size:clamp(30px,4.4vw,54px);font-weight:200;letter-spacing:-.04em;line-height:1;
  color:var(--cy);opacity:.85;min-width:2.2ch}
.astep h3{font-size:19px;margin-bottom:7px}
.astep p{margin:0;font-size:15px;color:var(--sub)}

/* spec table */
.aspec{width:100%;border-collapse:collapse;border:1px solid var(--edge);border-radius:12px;overflow:hidden}
.aspec th,.aspec td{padding:17px 22px;border-bottom:1px solid var(--edge);text-align:left;font-size:15px}
.aspec th{width:32%;color:var(--sub);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,255,255,.022);white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.aspec td{color:var(--ink)}
.aspec tr:last-child th,.aspec tr:last-child td{border-bottom:none}

/* notice + closing call to action */
.anote{border-left:2px solid var(--am);border-radius:0 10px 10px 0;background:rgba(255,159,69,.07);
  padding:16px 20px;margin-top:26px;font-size:14.5px;color:var(--ink)}
.acta{text-align:center;border-top:1px solid var(--edge)}
.acta h2{margin-bottom:16px}
.acta p{color:var(--sub);max-width:600px;margin:0 auto 26px}

@media(max-width:820px){
  .ahero-top{grid-template-columns:auto 1fr;gap:18px}
  .aicon{width:66px;height:66px;border-radius:16px}
  .aspec th,.aspec td{display:block;width:100%}
  .aspec th{border-bottom:none;padding-bottom:2px}
  .aspec td{padding-top:0}
  .astep{grid-template-columns:1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  body.aria *{animation:none !important}
}