/* =============================================================
   FOUNDERY GROUP — brand styles & holding-page layout
   ============================================================= */

/* Page wrapper with animated background */
.fnd-page {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, rgba(245,176,66,0.04), transparent 60%),
              radial-gradient(ellipse at bottom right, rgba(167,139,250,0.04), transparent 60%);
  overflow: hidden;
}
.fnd-bg-wrap {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}
.fnd-page > section,
.fnd-page > footer {
  position: relative;
  z-index: 1;
}

/* ============= HERO ============= */
.fnd-hero {
  padding: 48px 56px 64px;
  border-bottom: 1px solid var(--line);
}
.fnd-hero-coords {
  display: flex; gap: 8px;
  font-size: 11px;
  color: var(--text-lo);
  letter-spacing: var(--tr-mono);
  margin-bottom: 32px;
}
.fnd-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 1100px) {
  .fnd-hero-grid { grid-template-columns: 1fr; }
}
.fnd-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-mid);
  margin-bottom: 24px;
  letter-spacing: var(--tr-mono);
}
.fnd-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fnd-amber);
  box-shadow: 0 0 10px var(--fnd-amber);
  animation: fnd-pulse 1.6s ease-in-out infinite;
}
@keyframes fnd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.fnd-hero-title {
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0 0 24px;
  color: var(--text-hi);
}
.fnd-grad {
  background: linear-gradient(135deg, #f5b042 0%, #fbbf24 50%, #f97316 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 600;
}
.fnd-grad-violet {
  background: linear-gradient(135deg, var(--accent-hi) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 600;
}
.fnd-hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0 0 32px;
  max-width: 560px;
}
.fnd-hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.fnd-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-width: 640px;
}
.fnd-hero-stat {
  padding: 0 12px;
  border-left: 1px solid var(--line);
}
.fnd-hero-stat:first-child { border-left: 0; padding-left: 4px; }
.fnd-stat-k {
  font-size: 10px;
  color: var(--text-lo);
  letter-spacing: var(--tr-mono);
}
.fnd-stat-v {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
  color: var(--text-hi);
}

/* HERO RIGHT — index card */
.fnd-hero-right {
  position: relative;
  height: 380px;
}
.fnd-index-card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-3);
}
.fnd-index-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.fnd-index-val {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.fnd-index-svg {
  flex: 1; width: 100%;
  color: var(--text-mid);
  min-height: 160px;
}
.fnd-index-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fnd-sector-chip {
  display: flex; flex-direction: column; gap: 2px;
}
.fnd-floating-mark {
  position: absolute;
  bottom: -40px;
  right: -40px;
  opacity: 0.06;
  pointer-events: none;
  animation: fnd-spin 80s linear infinite;
}
@keyframes fnd-spin {
  to { transform: rotate(360deg); }
}

/* ============= GENERAL SECTIONS ============= */
.fnd-section {
  padding: 64px 56px;
  border-bottom: 1px solid var(--line);
}
.fnd-section-head { margin-bottom: 32px; }
.fnd-section-eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: var(--tr-mono);
  margin-bottom: 8px;
}
.fnd-section-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-hi);
}
.fnd-section-sub {
  color: var(--text-mid);
  margin-top: 8px;
  max-width: 580px;
  font-size: 15px;
}

/* ============= PILLARS ============= */
.fnd-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .fnd-pillars { grid-template-columns: repeat(2, 1fr); } }
.fnd-pillar {
  position: relative;
  padding: 24px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.fnd-pillar:hover {
  transform: translateY(-2px);
  border-color: var(--fnd-amber);
}
.fnd-pillar-num {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 11px;
  color: var(--text-faint);
}
.fnd-pillar-k {
  font-size: 10px;
  color: var(--fnd-amber);
  letter-spacing: var(--tr-mono);
  margin-bottom: 16px;
}
.fnd-pillar-t {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--text-hi);
}
.fnd-pillar-d {
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.5;
}

/* ============= BRAND PORTFOLIO ============= */
.fnd-sector-tabs {
  display: flex; gap: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
}
.fnd-sector-tab {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-mono);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.fnd-sector-tab:hover { color: var(--text-hi); }
.fnd-sector-tab.is-active {
  background: var(--accent);
  color: var(--text-on-accent);
}
.fnd-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.fnd-brand-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  display: flex; flex-direction: column;
  position: relative;
}
.fnd-brand-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--brand-grad);
  opacity: 0.7;
}
.fnd-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-line);
}
.fnd-brand-img {
  position: relative;
  height: 180px;
  background-size: cover; background-position: center;
}
.fnd-brand-img-overlay {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
}
.fnd-brand-stage {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.55);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  backdrop-filter: blur(6px);
}
.fnd-brand-stage .dot { width: 6px; height: 6px; border-radius: 50%; }
.fnd-brand-stage .dot.is-live { background: #34d399; box-shadow: 0 0 8px #34d399; }
.fnd-brand-stage .dot.is-beta { background: #f5b042; }
.fnd-brand-stage .dot.is-soon { background: #9aa3b2; }
.fnd-brand-sector {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  backdrop-filter: blur(6px);
}
.fnd-brand-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.fnd-brand-domain {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}
.fnd-brand-alt {
  font-size: 11px;
  color: var(--text-lo);
  margin-top: 2px;
  letter-spacing: var(--tr-mono);
}
.fnd-brand-tagline {
  margin-top: 8px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.fnd-brand-desc {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}
.fnd-brand-kpis {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.fnd-brand-kpi {
  flex: 1;
}
.fnd-brand-cta {
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-hi);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: all var(--dur-1) var(--ease);
  font-family: var(--font-sans);
}
.fnd-brand-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.fnd-brand-cta svg { width: 14px; height: 14px; }

/* ============= CTA CARD ============= */
.fnd-cta-card {
  position: relative;
  padding: 56px 48px;
  background:
    radial-gradient(ellipse at top right, rgba(245,176,66,0.10), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(167,139,250,0.10), transparent 60%),
    var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.fnd-cta-card::before {
  content:'';
  position: absolute; inset: -2px;
  background: linear-gradient(120deg, var(--fnd-amber), var(--accent), var(--fnd-cyan), var(--fnd-amber));
  background-size: 300% 300%;
  border-radius: var(--r-xl);
  z-index: -1;
  opacity: 0.15;
  animation: fnd-grad-anim 12s ease infinite;
  filter: blur(20px);
}
@keyframes fnd-grad-anim {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.fnd-cta-coords {
  display: flex; gap: 8px;
  font-size: 11px;
  color: var(--fnd-amber);
  letter-spacing: var(--tr-mono);
  margin-bottom: 16px;
}
.fnd-cta-title {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  max-width: 880px;
  color: var(--text-hi);
}
.fnd-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* ============= FOOTER ============= */
.fnd-footer {
  padding: 40px 56px 56px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}
.fnd-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  font-size: 12px;
}
.fnd-footer-cols .t {
  color: var(--text-lo);
  letter-spacing: var(--tr-mono);
  margin-bottom: 12px;
}
.fnd-footer-cols a {
  display: block;
  color: var(--text-mid);
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.fnd-footer-cols a:hover { color: var(--accent); }

/* ============= LIGHT THEME PORTFOLIO TWEAKS ============= */
:root[data-theme="light"] .fnd-brand-stage,
:root[data-theme="light"] .fnd-brand-sector {
  background: rgba(255,255,255,0.88);
  color: #16151a;
}
:root[data-theme="light"] .fnd-brand-card:hover {
  box-shadow: 0 24px 60px rgba(40,30,80,0.12), 0 0 0 1px var(--accent-line);
}

/* ============= RESPONSIVE ============= */
@media (max-width: 800px) {
  .fnd-hero, .fnd-section, .fnd-footer { padding-left: 24px; padding-right: 24px; }
  .fnd-hero-stats { grid-template-columns: repeat(2,1fr); }
  .fnd-footer { grid-template-columns: 1fr; }
  .fnd-footer-cols { grid-template-columns: repeat(2,1fr); }
}