/* ──────────────────────────────────────────────────────────────
   Founding Creative — Component styles
   Depends on tokens.css
   ────────────────────────────────────────────────────────────── */

/* ── Button glow ring — holographic conic animation ────────── */
@property --holo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes btn-holo-spin {
  to { --holo-angle: 360deg; }
}
@keyframes holo-pulse {
  0%, 100% { opacity: .75; filter: blur(10px) saturate(1.5) brightness(1);    }
  50%      { opacity: 1;   filter: blur(18px) saturate(1.7) brightness(1.15); }
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600; line-height: 1.5;
  padding: 10px 24px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative; isolation: isolate;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Holographic glow ring — hidden by default, activated on hover.
   Cycles through brand spectrum only (no white). border-radius: inherit
   ensures the ring conforms to any button shape. */
.btn::before {
  content: "";
  position: absolute; inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--holo-angle),
    #69EEFF, #6EFFB6, #C6A2FF, #FF6EC7, #6EFFB6, #69EEFF
  );
  opacity: 0;
  filter: blur(12px) saturate(1.5) brightness(1.1);
  transition: opacity .35s ease;
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
  animation: btn-holo-spin 4.5s linear infinite, holo-pulse 2s ease-in-out infinite;
}

.btn--primary {
  background: var(--mint);
  color: var(--n-black);
  border-color: var(--mint);
}
.btn--primary:hover { background: var(--mint); border-color: var(--mint); }

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--white-20);
}
.btn--secondary:hover { background: rgba(255,255,255,.06); border-color: var(--white-40); }

.btn--link {
  background: transparent;
  color: var(--text);
  padding: 10px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--white-20);
}
.btn--link:hover { border-bottom-color: var(--mint); color: var(--mint); }
.btn--link::before { display: none; } /* link variant has no glow ring */

.btn--small { padding: 6px 16px; font-size: 14px; }
.btn .arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Chips / Tags ─────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: var(--white-10);
  color: var(--text);
  border: 1px solid var(--white-10);
}
.chip--mint { background: rgba(126,248,147,0.15); color: var(--mint); border-color: rgba(126,248,147,0.3); }
.chip--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
  padding: 0 var(--s-9);
  background: transparent;
}
.navbar__logo { height: 32px; display: flex; align-items: center; }
.navbar__logo svg, .navbar__logo img { height: 100%; width: auto; }
.navbar__nav { display: flex; gap: 32px; align-items: center; }
.navbar__link {
  font-size: 16px; color: var(--text);
  padding: 8px 4px;
  position: relative;
}
.navbar__link:hover { color: var(--mint); }
.navbar__actions { display: flex; gap: 12px; align-items: center; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--fg);
  border: 1px solid var(--white-10);
  border-radius: var(--r-lg);
  padding: 32px;
  color: var(--text);
  overflow: hidden;
}
.card--case {
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--n-ink);
}
.card--case .card__image {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--holo-cyan), var(--holo-lavender));
  position: relative;
}
.card--case .card__body { padding: 24px; }
.card--case .card__title { font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.card--case .card__meta { font-size: 14px; color: var(--text-dim); }

.card--scheme-navy  { background: var(--deep-navy);  border-color: var(--holo-cyan); }
.card--scheme-teal  { background: var(--deep-teal);  border-color: var(--holo-cyan-pale); }
.card--scheme-plum  { background: var(--deep-plum);  border-color: var(--holo-lavender); }

/* ── Icon tile (hero glyph container) ─────────────────────── */
.icon-tile {
  width: 112px; height: 112px;
  border-radius: var(--r-md);
  background: var(--white-10);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
}
.icon-tile svg { width: 64px; height: 64px; color: var(--mint); }

/* ── Dividers ─────────────────────────────────────────────── */
.divider { border: 0; border-top: 1px solid var(--white-10); margin: 0; }

/* ── Holographic background (brand signature) ─────────────── */
/* The "wave + conic gradient" treatment used across hero sections. */
.holo-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.holo-bg__grad {
  position: absolute; inset: -10% -10% -10% -10%;
  background: conic-gradient(
    from 0deg,
    var(--holo-cyan)     0%,
    var(--holo-mint)     25%,
    var(--white)         50%,
    var(--holo-lavender) 75%,
    var(--holo-cyan)     100%
  );
  filter: blur(0);
  animation: holo-spin 24s linear infinite;
}
.holo-bg__waves {
  position: absolute; inset: 0;
  background: url('../assets/logos/wave-white.svg') center center / 180% auto no-repeat;
  opacity: 0.35; mix-blend-mode: overlay;
}
.holo-bg__veil {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
}
.holo-bg__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, var(--n-black) 0%, rgba(0,0,0,0) 100%);
}
@keyframes holo-spin {
  0%   { transform: rotate(0deg)   scale(1.2); }
  100% { transform: rotate(360deg) scale(1.2); }
}
.holo-bg--light .holo-bg__veil { background: rgba(0,0,0,0.0); }
.holo-bg--light .holo-bg__waves { mix-blend-mode: soft-light; opacity: 0.5; }

/* ── Section layout ───────────────────────────────────────── */
.section {
  position: relative;
  padding: 80px var(--gutter);
  background: var(--n-black);
  z-index: 1;
}
.section--tight { padding: 60px var(--gutter); }
.section--hero  { padding: 150px var(--gutter) 80px; }
.section__inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }

/* Curved divider (from homepage) */
.curve-divider {
  display: block; width: 100%; height: 150px;
  background: var(--n-black);
  clip-path: path('M 0 150 L 0 0 C 300 0 500 60 720 60 C 940 60 1140 0 1440 0 L 1440 150 Z');
}

/* ── Utility ──────────────────────────────────────────────── */
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }
.muted { color: var(--text-dim); }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); }
.mono-up { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600; }