/* ============================================
   GigOps.AI — Multi-page site additions
   Flavor theming (TourOps blue ↔ FestivalOps emerald)
   + shared nav/footer, comparison, pillars,
     feature index, platform, endorsement.
   Loads AFTER styles.css to extend it.
   ============================================ */

/* ── Flavor token system ─────────────────────────
   One engine, two products. The primary accent is the
   only thing that re-skins; success-green stays put. */
:root {
  --primary:        #3B6CF6;
  --primary-dk:     #1C3D8A;
  --primary-light:  #5B8AFF;
  --primary-soft:   #EEF3FF;
  --primary-border: #C5D4FA;
  --primary-grad:   linear-gradient(135deg, #1C3D8A 0%, #3B6CF6 60%, #5B8AFF 100%);
  --primary-rgb:    59,108,246;

  /* Alias the legacy blue tokens to the primary so the whole
     existing stylesheet + mocks follow the flavor automatically. */
  --blue:      var(--primary);
  --blue-dk:   var(--primary-dk);
  --blue-soft: var(--primary-soft);
  --grad:      var(--primary-grad);
}

[data-flavor="festival"] {
  --primary:        #047857;
  --primary-dk:     #03543F;
  --primary-light:  #10B981;
  --primary-soft:   #E7F5EF;
  --primary-border: #BBE3CF;
  --primary-grad:   linear-gradient(135deg, #03543F 0%, #047857 55%, #10B981 100%);
  --primary-rgb:    4,120,87;
}

/* Smooth the re-skin so toggling feels like a product, not a reload */
.flavor-tint,
.brand-icon,
.feat-icon,
.btn-blue,
.am-icon { transition: background .35s ease, color .35s ease, border-color .35s ease; }

/* ── Nav extensions ──────────────────────────────── */
.nav-link.active { color: var(--text); background: rgba(var(--primary-rgb),0.08); }
.nav-products {
  position: relative;
}
.nav-flavor-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.nav-flavor-dot.blue { background: #3B6CF6; }
.nav-flavor-dot.green { background: #047857; }

/* By-GigOps endorsement chip */
.by-gigops {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--text-3);
}
.by-gigops .mk {
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--primary-grad); flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.by-gigops strong { color: var(--text-2); font-weight: 500; }

/* Product wordmark (TourOps / FestivalOps) */
.product-mark { font-weight: 300; letter-spacing: -0.03em; }
.product-mark b { font-weight: 600; color: var(--primary); }

/* ── Flavor switch (segmented control) ───────────── */
.flavor-switch {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
  gap: 2px;
}
.flavor-switch button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--text-3);
  letter-spacing: -0.005em; white-space: nowrap;
  transition: color .2s, background .2s;
}
.flavor-switch button .sw-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.4; transition: opacity .2s;
}
.flavor-switch button .sub {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--text-4); display: none;
}
.flavor-switch button[data-active="true"] { color: var(--text); background: var(--bg-mute); }
.flavor-switch button[data-flavor-target="tour"][data-active="true"]      { color: #1C3D8A; background: #EEF3FF; }
.flavor-switch button[data-flavor-target="festival"][data-active="true"]  { color: #03543F; background: #E7F5EF; }
.flavor-switch button[data-active="true"] .sw-dot { opacity: 1; }
.flavor-switch button[data-flavor-target="tour"] .sw-dot      { color: #3B6CF6; }
.flavor-switch button[data-flavor-target="festival"] .sw-dot  { color: #047857; }

@media (min-width: 560px) {
  .flavor-switch button { flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 18px; }
  .flavor-switch button .top { display: inline-flex; align-items: center; gap: 7px; }
  .flavor-switch button .sub { display: block; padding-left: 15px; }
}

.hero-switch-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 14px;
}

/* ── Dual hero CTA ───────────────────────────────── */
.hero-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin: 8px 0 4px;
}

/* ── Problem band ────────────────────────────────── */
.problem {
  text-align: center;
}
.problem-line {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;
  max-width: 880px; margin: 0 auto; text-wrap: balance;
}
.problem-line s { color: var(--text-4); text-decoration-color: var(--border-2); text-decoration-thickness: 2px; }
.problem-line em { font-style: normal; color: var(--primary); font-weight: 600; }
.problem-tags {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}
.problem-tags .pt {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 13px; letter-spacing: 0.01em;
}

/* ── Two flavors explainer ───────────────────────── */
.flavors-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 8px;
}
@media (max-width: 820px) { .flavors-split { grid-template-columns: 1fr; } }

.flavor-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 36px 34px 30px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.flavor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.flavor-card.tour    { border-color: #C5D4FA; background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 60%); }
.flavor-card.festival{ border-color: #BBE3CF; background: linear-gradient(180deg, #EFF9F3 0%, #FFFFFF 60%); }
.flavor-card .fc-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.flavor-card.tour .fc-eyebrow { color: #3B6CF6; }
.flavor-card.festival .fc-eyebrow { color: #047857; }
.flavor-card .fc-eyebrow .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.flavor-card h3 {
  font-size: 30px; font-weight: 500; letter-spacing: -0.03em;
  display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px;
}
.flavor-card h3 b { font-weight: 600; }
.flavor-card.tour h3 b { color: #3B6CF6; }
.flavor-card.festival h3 b { color: #047857; }
.flavor-card .fc-tag { font-size: 15px; color: var(--text-2); font-weight: 500; margin-bottom: 16px; }
.flavor-card .fc-tag em { font-style: italic; color: var(--text); }
.flavor-card .fc-desc { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.flavor-card .fc-leads { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.flavor-card .fc-leads li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.flavor-card .fc-leads li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; }
.flavor-card.tour .fc-leads li svg { color: #3B6CF6; }
.flavor-card.festival .fc-leads li svg { color: #047857; }
.flavor-card .fc-cta { margin-top: auto; }
.flavor-card .fc-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.flavor-card.tour .fc-link { color: #2E5BE0; }
.flavor-card.festival .fc-link { color: #047857; }
.flavor-card .fc-link svg { width: 15px; height: 15px; transition: transform .15s; }
.flavor-card:hover .fc-link svg { transform: translateX(3px); }
.flavor-card .fc-by { margin-top: 16px; }

/* ── Comparison table ────────────────────────────── */
.compare-wrap {
  margin-top: 40px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.compare {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.compare th, .compare td { padding: 14px 22px; text-align: left; vertical-align: top; }
.compare thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); font-weight: 500;
  border-bottom: 1px solid var(--border); background: var(--bg-mute);
}
.compare thead th.tour    { color: #2E5BE0; }
.compare thead th.festival{ color: #047857; }
.compare thead th .th-flag {
  display: inline-flex; align-items: center; gap: 7px;
}
.compare thead th .th-flag .d { width: 8px; height: 8px; border-radius: 50%; }
.compare thead th.tour .d { background: #3B6CF6; }
.compare thead th.festival .d { background: #047857; }
.compare tbody td { border-bottom: 1px solid var(--border-soft); color: var(--text-2); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody td:first-child { color: var(--text); font-weight: 500; width: 22%; }
.compare tbody td strong { color: var(--text); font-weight: 600; }
.compare tbody tr:hover td { background: rgba(var(--primary-rgb),0.03); }
.compare .col-festival { background: rgba(4,120,87,0.025); }
@media (max-width: 760px) {
  .compare th, .compare td { padding: 12px 14px; font-size: 13px; }
  .compare-scroll { overflow-x: auto; }
  .compare { min-width: 640px; }
}

/* ── Feature pillars ─────────────────────────────── */
.pillar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 26px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pillar:hover { border-color: var(--border-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.pillar .feat-icon { margin-bottom: 16px; }
.pillar h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 14px; }
.pillar ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pillar li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: var(--text-2); padding-bottom: 9px;
  border-bottom: 1px solid var(--border-soft);
}
.pillar li:last-child { border-bottom: 0; padding-bottom: 0; }
.pillar li .tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.tag.both   { background: var(--bg-mute); color: var(--text-3); }
.tag.tour   { background: #EEF3FF; color: #2E5BE0; }
.tag.festival { background: #E7F5EF; color: #047857; }

/* ── Crew mobile portal band ─────────────────────── */
.portal-band {
  background: var(--bg-deep); color: var(--text-inv);
  position: relative; overflow: hidden;
}
.portal-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 360px at 85% 10%, rgba(var(--primary-rgb),0.20), transparent 60%),
    radial-gradient(500px 300px at 5% 90%, rgba(var(--primary-rgb),0.12), transparent 60%);
  pointer-events: none;
}
.portal-inner {
  display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .portal-inner { grid-template-columns: 1fr; gap: 40px; justify-items: center; text-align: center; } }
.portal-copy .eyebrow { color: var(--primary-light); }
.portal-copy h2 { color: var(--text-inv); font-size: clamp(28px,3.2vw,42px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; margin: 14px 0 16px; }
.portal-copy .lead { color: rgba(245,247,255,0.7); }
.portal-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 26px; max-width: 520px; }
@media (max-width: 880px) { .portal-feats { text-align: left; margin: 26px auto 0; } }
.portal-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(245,247,255,0.82); }
.portal-feats li svg { width: 16px; height: 16px; color: var(--primary-light); flex-shrink: 0; margin-top: 2px; }

/* ── Built-in AI band ────────────────────────────── */
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .ai-grid { grid-template-columns: 1fr; gap: 36px; } }
.ai-demo {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px;
}
.ai-paste {
  background: var(--bg-deep); color: rgba(245,247,255,0.78);
  border-radius: 10px; padding: 16px; font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.65; white-space: pre-wrap;
  border: 1px solid rgba(255,255,255,0.08); min-height: 120px;
}
.ai-paste .hl { color: #93B0FF; }
.ai-arrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary); margin: 14px 0;
}
.ai-arrow svg { width: 16px; height: 16px; }
.ai-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-field {
  border: 1px solid var(--primary-border); background: var(--primary-soft);
  border-radius: 8px; padding: 9px 12px;
}
.ai-field .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
.ai-field .v { font-size: 13px; color: var(--text); font-weight: 500; margin-top: 2px; }
.ai-field.full { grid-column: span 2; }

/* ── Proof points ────────────────────────────────── */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 820px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
.proof {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; background: var(--bg-card);
}
.proof .feat-icon { margin-bottom: 14px; }
.proof h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.proof p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }

/* ── Feature index (Features page) ───────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-seg { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; }
.filter-seg button {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--text-3); display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, background .15s;
}
.filter-seg button .d { width: 7px; height: 7px; border-radius: 50%; }
.filter-seg button[data-filter="all"] .d { background: var(--text-4); }
.filter-seg button[data-filter="tour"] .d { background: #3B6CF6; }
.filter-seg button[data-filter="festival"] .d { background: #047857; }
.filter-seg button[aria-pressed="true"] { color: var(--text); background: var(--bg-mute); }
.filter-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-4); letter-spacing: 0.04em; }

.fcat { margin-bottom: 44px; }
.fcat-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.fcat-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.fcat-head .n { font-family: var(--font-mono); font-size: 12px; color: var(--text-4); }
.findex { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 760px) { .findex { grid-template-columns: 1fr; } }
.fitem {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  padding: 16px 18px; transition: border-color .15s, box-shadow .15s, opacity .2s;
}
.fitem:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.fitem.hidden { display: none; }
.fitem .fi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.fitem .fi-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.fitem .fi-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ── Platform / engine page ──────────────────────── */
.engine-diagram {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px;
}
@media (max-width: 820px) { .engine-diagram { grid-template-columns: 1fr; } }
.portal-tile {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 26px; position: relative;
}
.portal-tile .feat-icon { margin-bottom: 16px; }
.portal-tile h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.portal-tile p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.portal-tile .pt-tag { position: absolute; top: 22px; right: 22px; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); letter-spacing: 0.05em; text-transform: uppercase; }

.engine-base {
  margin-top: 16px; border: 1px solid var(--primary-border);
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-lg); padding: 26px 30px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
}
.engine-base .eb-label { display: flex; align-items: center; gap: 14px; }
.engine-base .eb-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--primary-grad); box-shadow: 0 6px 18px rgba(var(--primary-rgb),0.35), inset 0 1px 0 rgba(255,255,255,0.2); position: relative; flex-shrink: 0; }
.engine-base .eb-mark::after { content: ""; position: absolute; inset: 8px 8px auto auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.85); }
.engine-base h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.engine-base .sb { font-size: 13px; color: var(--text-2); }
.engine-base .eb-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.engine-base .eb-tags span { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--bg-card); border: 1px solid var(--primary-border); border-radius: 7px; padding: 6px 10px; }

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .spec-grid { grid-template-columns: 1fr; } }
.spec {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 26px;
  background: var(--bg-card);
}
.spec .feat-icon { margin-bottom: 14px; }
.spec h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.spec p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.spec ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.spec li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); }
.spec li svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; margin-top: 3px; }

/* ── Product-page hero variant ───────────────────── */
.phero { padding: 84px 0 0; }
.phero .eyebrow-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.phero h1 { font-size: clamp(40px,5.2vw,68px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 500; max-width: 16ch; }
.phero h1 em { font-style: normal; background: var(--primary-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.phero .lead { font-size: 19px; margin: 22px 0 32px; }
.phero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Section eyebrow color follows flavor on product pages */
.eyebrow { color: var(--primary); }
.eyebrow .dot { background: var(--primary); }

/* ── Footer extensions ───────────────────────────── */
.foot-flavors { display: flex; gap: 8px; margin-top: 14px; }
.foot-flavors a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-family: var(--font-sans); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 11px;
}
.foot-flavors a:hover { border-color: var(--border-2); color: var(--text); }
.foot-flavors a .d { width: 7px; height: 7px; border-radius: 50%; }
.foot-flavors a .d.blue { background: #3B6CF6; }
.foot-flavors a .d.green { background: #047857; }

/* Reveal safety: never keep content hidden for reduced-motion / print / PDF */
@media (prefers-reduced-motion: reduce), print {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Section background helper ───────────────────── */
.section.soft { background: var(--bg-soft); }
.section.soft[data-flavor] { }