/* ── Azaro Security — Shared Stylesheet ──────────────────── */

:root {
  /* Dark — Deep Navy */
  --bg:           oklch(0.12 0.018 250);
  --bg-deep:      oklch(0.22 0.020 248);
  --ink:          oklch(0.93 0.006 240);
  --ink-soft:     oklch(0.72 0.012 240);
  --ink-mute:     oklch(0.50 0.010 245);
  --accent:       oklch(0.72 0.140 235);
  --accent-soft:  oklch(0.72 0.140 235 / 0.22);

  --serif: "Newsreader", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 56rem;
}

* { box-sizing: border-box; }

/* ── Skip link ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 180ms ease;
}
.skip-link:focus { top: 0; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
}

/* faint cool grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(oklch(0.82 0.005 240 / 0.045) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
}

/* ── Motion layer ────────────────────────────────────── */
.motion-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* Primary glow — top-left corner, sweeps across */
.aurora.a1 {
  width: 95vmax; height: 95vmax;
  top: -32vmax; left: -32vmax;
  background: radial-gradient(circle at 44% 44%,
    oklch(0.38 0.14 245) 0%,
    transparent 62%
  );
}

/* Counter-glow — bottom-right, drifts opposite */
.aurora.a2 {
  width: 88vmax; height: 88vmax;
  bottom: -30vmax; right: -30vmax;
  background: radial-gradient(circle at 56% 56%,
    oklch(0.32 0.12 258) 0%,
    transparent 62%
  );
}

/* Accent depth — centre-ish, lazy orbit, vivid teal-blue */
.aurora.a3 {
  width: 68vmax; height: 68vmax;
  top: 32%; left: 22%;
  background: radial-gradient(circle,
    oklch(0.44 0.17 225) 0%,
    transparent 68%
  );
}

/* ── Motion intensity levels ─────────────────────────── */
body.motion-subtle .aurora          { opacity: 0.45; }
body.motion-subtle .aurora.a1       { animation: shadowA 68s ease-in-out infinite alternate; }
body.motion-subtle .aurora.a2       { animation: shadowB 82s ease-in-out infinite alternate; }
body.motion-subtle .aurora.a3       { animation: accentDrift 96s ease-in-out infinite alternate; }

body.motion-generous .aurora        { opacity: 0.70; }
body.motion-generous .aurora.a1     { animation: shadowA 38s ease-in-out infinite alternate; }
body.motion-generous .aurora.a2     { animation: shadowB 48s ease-in-out infinite alternate; }
body.motion-generous .aurora.a3     { animation: accentDrift 58s ease-in-out infinite alternate; }

@keyframes shadowA {
  0%   { transform: translate(0,       0)       scale(1);    }
  35%  { transform: translate(58vmax,  18vmax)  scale(1.10); }
  68%  { transform: translate(38vmax,  58vmax)  scale(0.94); }
  100% { transform: translate(65vmax,  44vmax)  scale(1.06); }
}

@keyframes shadowB {
  0%   { transform: translate(0,        0)        scale(1);    }
  38%  { transform: translate(-54vmax, -20vmax)   scale(1.08); }
  72%  { transform: translate(-32vmax, -58vmax)   scale(0.90); }
  100% { transform: translate(-60vmax, -40vmax)   scale(1.04); }
}

@keyframes accentDrift {
  0%   { transform: translate(0,       0)       scale(1);    }
  50%  { transform: translate(20vmax, -22vmax)  scale(1.18); }
  100% { transform: translate(-14vmax, 20vmax)  scale(0.86); }
}

/* ── Ribbons ─────────────────────────────────────── */
.ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms ease;
}
.ribbon path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400 600;
  stroke-dashoffset: 0;
}

body.motion-subtle   .ribbon          { opacity: 0.32; }
body.motion-subtle   .ribbon .r1      { animation: ribbonShift1 28s ease-in-out infinite alternate,           dashDrift 60s linear infinite; }
body.motion-subtle   .ribbon .r2      { animation: ribbonShift2 36s ease-in-out infinite alternate,           dashDrift 80s linear infinite reverse; }
body.motion-subtle   .ribbon .r3      { animation: ribbonShift1 44s ease-in-out infinite alternate-reverse,   dashDrift 90s linear infinite; }
body.motion-subtle   .ribbon .r4      { animation: ribbonShift2 50s ease-in-out infinite alternate,           dashDrift 100s linear infinite reverse; }
body.motion-subtle   .ribbon .r5      { animation: ribbonShift1 56s ease-in-out infinite alternate-reverse,   dashDrift 70s linear infinite; }

body.motion-generous .ribbon          { opacity: 0.50; }
body.motion-generous .ribbon path     { stroke-width: 1.4; }
body.motion-generous .ribbon .r1      { animation: ribbonShift1 16s ease-in-out infinite alternate,           dashDrift 32s linear infinite; }
body.motion-generous .ribbon .r2      { animation: ribbonShift2 20s ease-in-out infinite alternate,           dashDrift 42s linear infinite reverse; }
body.motion-generous .ribbon .r3      { animation: ribbonShift1 24s ease-in-out infinite alternate-reverse,   dashDrift 50s linear infinite; }
body.motion-generous .ribbon .r4      { animation: ribbonShift2 28s ease-in-out infinite alternate,           dashDrift 56s linear infinite reverse; }
body.motion-generous .ribbon .r5      { animation: ribbonShift1 32s ease-in-out infinite alternate-reverse,   dashDrift 38s linear infinite; }

@keyframes ribbonShift1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(2.5%, -1.5%); }
}
@keyframes ribbonShift2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-3%, 2%); }
}
@keyframes dashDrift {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -2000; }
}

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.72; }
}

body.motion-generous .hero h1 .amp,
body.motion-generous .focus-prose em {
  animation: shimmer 6s ease-in-out infinite;
}
body.motion-generous .focus-prose em:nth-of-type(2) { animation-delay: 1.2s; }
body.motion-generous .focus-prose em:nth-of-type(3) { animation-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .aurora,
  .ribbon path,
  .hero h1 .amp,
  .focus-prose em { animation: none !important; opacity: 0 !important; }
}

/* ── Reveal on scroll ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Layout ──────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 2vh, 2rem);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Logo ────────────────────────────────────────────── */
/*
  Full logo — circular horse badge, "AZARO" wordmark, and
  "Medical Device, Cybersecurity" tagline — shown at natural
  size. The source PNG has a transparent background.
*/
.mark {
  margin-bottom: 0;
}
.logo-full {
  width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 32px oklch(0.65 0.16 235 / 0.40));
}

/* ── Hero ────────────────────────────────────────────── */
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 1.3rem;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .amp {
  font-style: italic;
  color: var(--accent);
}
.hero .lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.3vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30rem;
  text-wrap: pretty;
}

/* ── Sections ────────────────────────────────────────── */
section {
  margin-top: 0;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--bg-deep), transparent);
}

.prose {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.prose .name {
  font-weight: 500;
}
.prose + .prose {
  margin-top: 1.1rem;
  color: var(--ink-soft);
}

.focus-prose {
  font-family: var(--serif);
  font-size: 1.13rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.focus-prose em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* ── Get in touch CTA ────────────────────────────────── */
.cta-link {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  transition: color 220ms ease, border-color 220ms ease;
}
.cta-link::after {
  content: "→";
  font-style: normal;
  font-size: 0.85em;
  display: inline-block;
  transition: transform 220ms ease;
}
.cta-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
}
.cta-link:hover::after {
  transform: translateX(4px);
}
.cta-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Contact ─────────────────────────────────────────── */
.contact {
  margin-top: 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--bg-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact a {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.contact a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}
.contact a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.contact-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-right: 0.4em;
  flex-shrink: 0;
  transition: color 180ms ease;
}

/* ── Colophon ────────────────────────────────────────── */
.colophon {
  margin-top: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.colophon .location::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.55rem;
  transform: translateY(-1px);
  vertical-align: middle;
}


/* ── Legal pages ─────────────────────────────────────── */
.page--legal {
  justify-content: flex-start;
  gap: 0;
}

.legal-header {
  margin-bottom: 0.5rem;
}

.legal-back {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-decoration: none;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
  transition: color 180ms ease;
}
.legal-back::before { content: "←"; }
.legal-back:hover { color: var(--accent); }

.legal-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.010em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.legal-date {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin: 0 0 2.5rem;
}

.legal-section {
  margin-top: 2.2rem;
  padding-bottom: 0.2rem;
  border-top: 1px solid var(--bg-deep);
  padding-top: 1.8rem;
}
.legal-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.legal-section h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.85rem;
}
.legal-section p,
.legal-section ul {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}
.legal-section ul {
  padding-left: 1.4rem;
}
.legal-section li + li { margin-top: 0.3rem; }
.legal-section a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--bg-deep);
  transition: color 180ms ease, border-color 180ms ease;
}
.legal-section a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}

/* Colophon links */
.colophon a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 180ms ease;
}
.colophon a:hover { color: var(--accent); }
.colophon-sep { opacity: 0.4; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .contact { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}