/* ============================================================================
   Aries site accent + page styles. Imports shared/base.css for all structure.
   ACCENT derived from the ram mark: warm orange/red horn → cool blue horn.
   ========================================================================== */
:root {
  --accent:      #ff7a3c;   /* warm orange (left horn) */
  --accent-2:    #4aa6e8;   /* cool blue   (right horn) */
  --accent-grad: linear-gradient(100deg, #e8412b 0%, #ff7a3c 38%, #6cb6ee 70%, #4aa6e8 100%);
  --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* --- HERO --- */
.hero { position: relative; padding-block: var(--sp-9) var(--sp-8); overflow: hidden; }
.hero::before {            /* soft warm→cool glow behind the mark */
  content: ""; position: absolute; inset: -20% 0 auto 0; height: 520px; z-index: 0;
  background:
    radial-gradient(60% 60% at 38% 30%, rgba(232,65,43,.18), transparent 70%),
    radial-gradient(60% 60% at 64% 34%, rgba(74,166,232,.16), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; display: grid; justify-items: center;
              text-align: center; gap: var(--sp-5); }
/* True-transparent PNGs now — the old mix-blend:screen / aspect-ratio:1 hack for
   the near-black JPGs is gone; the art carries its own alpha and aspect. */
.hero .mark {
  width: min(340px, 72vw); height: auto;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.5));
}
.hero h1 { line-height: 0; }
.hero .hero-word {
  width: min(232px, 56vw); height: auto; margin-inline: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.45));
}

/* --- TOPBAR brand: ram-mark icon + transparent wordmark (replaces the old dot +
   text). Aries-scoped; the shared .dot rule in base.css is left untouched. --- */
.nav .brand { gap: var(--sp-2); }
.nav .brand .brand-mark { height: 26px; width: auto; }
.nav .brand .brand-word { height: 17px; width: auto; }
.hero .tagline { font-size: var(--fs-lg); color: var(--text-dim); max-width: 46ch; }
.hero .cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
             margin-top: var(--sp-2); }
.hero .badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
                margin-top: var(--sp-3); }
.badge { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-dim);
         border: 1px solid var(--border); border-radius: var(--radius-pill);
         padding: .4rem .7rem; background: var(--surface); }
.badge b { color: var(--accent); font-weight: 700; }

/* --- generic section heading --- */
.section h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.section .lead { margin-bottom: var(--sp-6); }

/* --- "what is" feature row --- */
.features { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.feature .ic { font: 700 var(--fs-lg)/1 var(--font-mono); color: var(--accent);
               margin-bottom: var(--sp-3); }
.note { border-left: 2px solid var(--accent); background: var(--accent-tint);
        padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0;
        color: var(--text-dim); font-size: var(--fs-sm); }
.note b { color: var(--text); }

/* --- install steps --- */
.steps { display: grid; gap: var(--sp-5); }
.install-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 820px){ .install-grid { grid-template-columns: 1fr 1fr; } }

/* --- tools --- */
.toolgroup { margin-bottom: var(--sp-6); }
.toolgroup > h3 { font-size: var(--fs-lg); display: flex; align-items: baseline; gap: var(--sp-3);
                  margin-bottom: var(--sp-4); }
.toolgroup > h3 .count { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-faint); }
.tool { display: grid; gap: var(--sp-1); padding: var(--sp-4) 0; border-top: 1px solid var(--border-soft); }
.tool:first-of-type { border-top: 0; }
.tool .name { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent);
              font-weight: 600; }
.tool .desc { color: var(--text-dim); font-size: var(--fs-sm); }