/* ==========================================================================
   HSYST THEME — Hub de Ideias Open Source
   Identity: Purple-primary, Green-secondary
   Personality: Visionary, Collaborative, Technological Hub
   ========================================================================== */

:root {
  /* Theme-specific overrides */
  --color-accent-primary:   #8B5CF6;  /* Purple main */
  --color-accent-secondary: #22C55E;  /* Green main */
  --color-accent-glow:      rgba(139, 92, 246, 0.35);
  --color-accent-glow-soft: rgba(139, 92, 246, 0.15);

  /* Brand gradients */
  --gradient-hero: linear-gradient(180deg, #04040a 0%, #0a0612 50%, #04040a 100%);
  --gradient-card: linear-gradient(150deg, rgba(139, 92, 246, 0.1), rgba(34, 197, 94, 0.05));
  --gradient-accent: linear-gradient(135deg, #8B5CF6, #A78BFA);
  --gradient-accent-alt: linear-gradient(135deg, #22C55E, #86EFAC);

  /* Atmosphere colors */
  --atmosphere-primary:   rgba(139, 92, 246, 0.18);
  --atmosphere-secondary: rgba(34, 197, 94, 0.14);
}

/* ---- Hero Specific ---- */
.hero {
  position: relative;
  padding: var(--space-32) var(--container-padding) var(--space-24);
  background: var(--gradient-hero);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 20%, var(--atmosphere-primary), transparent 60%),
    radial-gradient(50% 40% at 80% 80%, var(--atmosphere-secondary), transparent 55%);
  pointer-events: none;
}
.hero__floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-content);
}
.hero__float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
  animation: float-gentle 6s ease-in-out infinite;
}
.hero__float:hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-lg), var(--shadow-glow-soft);
  transform: translateY(-8px) scale(1.05) !important;
}
.hero__float--1 { top: 15%; left: 5%; width: 72px; height: 72px; animation-delay: 0s; background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.25); }
.hero__float--2 { top: 20%; right: 8%; width: 64px; height: 64px; animation-delay: -1.5s; background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.25); }
.hero__float--3 { bottom: 20%; left: 8%; width: 56px; height: 56px; animation-delay: -3s; background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); border-radius: 50%; }
.hero__float--4 { bottom: 15%; right: 5%; width: 56px; height: 56px; animation-delay: -4.5s; background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.2); border-radius: 50%; }
.hero__float-icon { color: var(--color-accent-primary); }
.hero__float--2 .hero__float-icon { color: var(--color-accent-secondary); }
.hero__float--3 .hero__float-icon { color: var(--color-purple-light); }
.hero__float--4 .hero__float-icon { color: var(--color-green-soft); }

@keyframes float-gentle {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-12px) translateX(8px); }
  50% { transform: translateY(4px) translateX(-6px); }
  75% { transform: translateY(-8px) translateX(-4px); }
}

.hero__content { position: relative; z-index: var(--z-content); max-width: 800px; margin: 0 auto; text-align: center; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-purple-light);
}
.hero__badge-icon { color: var(--color-green-main); }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-4xl), 7vw, var(--font-size-7xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--color-white-soft);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
.hero__description {
  font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-xl));
  color: var(--color-gray-neutral);
  line-height: var(--line-height-relaxed);
  max-width: 680px;
  margin: 0 auto var(--space-10);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-12); }
.hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-neutral);
  padding: var(--space-1) var(--space-3);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
}
.hero__tag:hover { border-color: var(--color-accent-primary); color: var(--color-white-soft); }
.hero__tag-icon { color: var(--color-accent-primary); }
.hero__tag-icon--green { color: var(--color-accent-secondary); }

/* ---- Philosophy / Feature Section ---- */
.philosophy { position: relative; }
.philosophy__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 900px) { .philosophy__layout { grid-template-columns: 1fr; } }
.philosophy__card { padding: var(--space-8); }
.philosophy__icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  background: rgba(139, 92, 246, 0.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-6);
}
.philosophy__icon svg { width: 28px; height: 28px; color: var(--color-purple-light); }
.philosophy__items { display: grid; gap: var(--space-6); }
.philosophy__item { display: flex; gap: var(--space-4); }
.philosophy__item-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.philosophy__item-icon svg { width: 22px; height: 22px; color: var(--color-purple-light); }
.philosophy__item-icon--green { background: rgba(34, 197, 94, 0.1); }
.philosophy__item-icon--green svg { color: var(--color-green-soft); }
.philosophy__item-title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.philosophy__item-desc { color: var(--color-gray-neutral); line-height: var(--line-height-relaxed); }

/* ---- Principles ---- */
.principles { position: relative; border-top: 1px solid var(--color-border-subtle); }
.principles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .principles__grid { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .principles__grid { grid-template-columns: repeat(3, 1fr); } }
.principle-card { position: relative; overflow: hidden; }
.principle-card--certified {
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(150deg, rgba(34, 197, 94, 0.12), rgba(139, 92, 246, 0.06));
}
.principle-card__header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.principle-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  background: rgba(139, 92, 246, 0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.principle-card__icon svg { width: 24px; height: 24px; color: var(--color-purple-light); }
.principle-card__icon--green { background: rgba(34, 197, 94, 0.15); }
.principle-card__icon--green svg { color: var(--color-green-soft); }
.principle-card__title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
.principle-card__desc { color: var(--color-gray-neutral); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); }
.principle-card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-medium); color: var(--color-green-soft); }
.principle-card__link:hover { gap: var(--space-3); }

/* ---- Why Collaborate ---- */
.collaborate { position: relative; border-top: 1px solid var(--color-border-subtle); }
.collaborate__layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 900px) { .collaborate__layout { grid-template-columns: 1fr; } }
.collaborate__quote {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.collaborate__quote-title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); background: linear-gradient(90deg, var(--color-purple-light), var(--color-green-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.collaborate__quote-text { color: var(--color-gray-neutral); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.collaborate__benefits { display: grid; gap: var(--space-5); }
.collaborate__benefit { display: flex; gap: var(--space-4); }
.collaborate__benefit-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.15);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.collaborate__benefit:hover .collaborate__benefit-icon { transform: scale(1.1) rotate(3deg); }
.collaborate__benefit-icon svg { width: 22px; height: 22px; color: var(--color-purple-light); }
.collaborate__benefit-icon--green { background: rgba(34, 197, 94, 0.15); }
.collaborate__benefit-icon--green svg { color: var(--color-green-soft); }
.collaborate__benefit-title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.collaborate__benefit-desc { color: var(--color-gray-neutral); }

/* ---- How It Works (Steps) ---- */
.steps { position: relative; border-top: 1px solid var(--color-border-subtle); }
.steps__timeline { position: relative; max-width: 800px; margin: 0 auto; }
.steps__timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-purple-main), var(--color-green-main));
  opacity: 0.3;
  transform: translateX(-50%);
}
@media (max-width: 768px) { .steps__timeline::before { left: 24px; } }
.step { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); position: relative; }
.step:last-child { margin-bottom: 0; }
.step--left { flex-direction: row; }
.step--right { flex-direction: row-reverse; }
@media (max-width: 768px) { .step--left, .step--right { flex-direction: column; align-items: flex-start; } }
.step__content {
  flex: 1;
  max-width: 400px;
  padding: var(--space-8);
  text-align: right;
}
.step--right .step__content { text-align: left; }
@media (max-width: 768px) { .step__content { text-align: left !important; max-width: none; width: 100%; } }
.step__number {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-black-deep);
  box-shadow: var(--shadow-lg), var(--shadow-glow-soft);
  animation: pulse-ring 3s ease-in-out infinite;
}
.step--even .step__number { background: var(--gradient-accent-alt); }
@keyframes pulse-ring {
  0%, 100% { box-shadow: var(--shadow-lg), var(--shadow-glow-soft), 0 0 0 0 var(--color-accent-glow); }
  50% { box-shadow: var(--shadow-lg), var(--shadow-glow-soft), 0 0 0 16px transparent; }
}
.step__title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
.step__desc { color: var(--color-gray-neutral); line-height: var(--line-height-relaxed); }

/* ---- Final CTA ---- */
.cta { position: relative; border-top: 1px solid var(--color-border-subtle); }
.cta__card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.cta__title { font-family: var(--font-display); font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl)); font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-4); background: linear-gradient(90deg, var(--color-purple-light), var(--color-green-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta__desc { font-size: var(--font-size-xl); color: var(--color-gray-neutral); margin-bottom: var(--space-8); max-width: 600px; margin-left: auto; margin-right: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-8); }
.cta__contacts { color: var(--color-gray-muted); font-size: var(--font-size-sm); }
.cta__contacts a { color: var(--color-gray-neutral); }
.cta__contacts a:hover { color: var(--color-accent-primary); }

/* ---- FAQ ---- */
.faq { position: relative; border-top: 1px solid var(--color-border-subtle); }
.faq__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); max-width: 900px; margin: 0 auto; }
@media (max-width: 768px) { .faq__grid { grid-template-columns: 1fr; } }
.faq__item { overflow: hidden; }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white-soft);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.faq__question:hover { border-color: var(--color-accent-primary); background: var(--glass-bg-strong); }
.faq__arrow { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-purple-light); transition: transform var(--duration-normal) var(--ease-out); }
.faq__item--open .faq__arrow { transform: rotate(180deg); }
.faq__answer { padding: 0 var(--space-6); max-height: 0; overflow: hidden; transition: all var(--duration-normal) var(--ease-out); }
.faq__item--open .faq__answer { padding: var(--space-4) var(--space-6) var(--space-6); max-height: 300px; }
.faq__answer-text { color: var(--color-gray-neutral); line-height: var(--line-height-relaxed); }

/* ---- Team ---- */
.team { position: relative; border-top: 1px solid var(--color-border-subtle); }
.team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
@media (min-width: 768px) { .team__grid { grid-template-columns: repeat(4, 1fr); } }
.team__card { text-align: center; }
.team__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-6);
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-black-deep);
  box-shadow: var(--shadow-lg), var(--shadow-glow-soft);
  animation: pulse-ring 4s ease-in-out infinite;
}
.team__card:nth-child(2) .team__avatar { background: var(--gradient-accent-alt); animation-delay: -1s; }
.team__card:nth-child(3) .team__avatar { background: var(--gradient-accent); animation-delay: -2s; }
.team__card:nth-child(4) .team__avatar { background: var(--gradient-accent-alt); animation-delay: -3s; }
.team__name { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.team__handle { color: var(--color-purple-light); font-size: var(--font-size-sm); margin-bottom: var(--space-4); }
.team__card:nth-child(2) .team__handle, .team__card:nth-child(4) .team__handle { color: var(--color-green-soft); }
.team__bio { color: var(--color-gray-neutral); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.team__badges { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

/* ---- Service Page Overlay (CAPTCHA) ---- */
.service-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(139, 92, 246, 0.18), transparent 60%),
              radial-gradient(100% 80% at 100% 110%, rgba(34, 197, 94, 0.14), transparent 55%),
              rgba(4, 4, 10, 0.94);
  backdrop-filter: blur(14px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}
.service-overlay__card {
  background: linear-gradient(160deg, rgba(20, 14, 40, 0.9), rgba(8, 6, 16, 0.95));
  color: var(--color-white-soft);
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px var(--color-purple-glow);
  text-align: center;
  animation: fade-in-up 0.6s var(--ease-out) both;
  position: relative;
  overflow: hidden;
}
.service-overlay__card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 260%;
  padding-bottom: 260%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent);
  pointer-events: none;
  animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.service-overlay__logo {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  background: linear-gradient(90deg, var(--color-purple-light), var(--color-green-soft), var(--color-purple-light));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 6s linear infinite;
}
.service-overlay__spinner {
  width: 54px; height: 54px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--color-purple-main), var(--color-green-main), var(--color-purple-main));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: spin 0.9s linear infinite;
}
.service-overlay__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin: var(--space-4) 0 var(--space-2); font-family: var(--font-display); }
.service-overlay__desc { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.62); margin-bottom: var(--space-6); line-height: var(--line-height-relaxed); }
.service-overlay__status { font-size: var(--font-size-xs); color: rgba(255, 255, 255, 0.4); letter-spacing: 0.14em; text-transform: uppercase; margin-top: var(--space-4); font-weight: var(--font-weight-semibold); }
.service-overlay__success { display: none; font-size: var(--font-size-base); color: var(--color-green-soft); margin-top: var(--space-4); animation: fade-in-up 0.4s ease; font-weight: var(--font-weight-semibold); }