/* ═══════════════════════════════════════════════════════
   UNIESTRO — Landing Sites  (Premium Glass)
═══════════════════════════════════════════════════════ */
@import url('styles.css');

/* ──────────────────────────────────────────────────────
   GLOBAL FLOAT ANIMATION
────────────────────────────────────────────────────── */
@keyframes floatBob {
  from { transform: translateY(0px) rotate(-0.8deg); }
  to   { transform: translateY(-9px) rotate(0.8deg); }
}

/* ──────────────────────────────────────────────────────
   HERO
────────────────────────────────────────────────────── */
.landing-hero {
  position: relative; overflow: hidden;
  background: var(--bg-base);
  padding: 100px 0 88px;
}
.landing-hero .hero-sheet { top: -40px; height: 600px; }

/* Hero glow accent orbs behind content */
.landing-hero::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,197,0.14) 0%, transparent 70%);
  filter: blur(120px);
  bottom: -100px; right: 5%;
  pointer-events: none; z-index: 0;
}

/* ──────────────────────────────────────────────────────
   FEATURE ICON — glass with glow
────────────────────────────────────────────────────── */
.landing-feature-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(200,146,12,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200,146,12,0.28);
  color: var(--amber);
  box-shadow: 0 4px 16px rgba(200,146,12,0.16),
              inset 0 1px 0 rgba(255,255,255,0.60);
  flex: none;
  transition: all var(--dur) var(--ease);
}
.card:hover .landing-feature-icon {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-glow-amber);
  transform: scale(1.08);
}

/* ──────────────────────────────────────────────────────
   ECOSYSTEM NAV — deep glass dropdown
────────────────────────────────────────────────────── */
.ecosystem-nav { position: relative; }
.ecosystem-nav__toggle { font-size: 14px; font-weight: 500; color: var(--ink2); padding: 8px 13px; border-radius: 9px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); transition: color 160ms, background 160ms; }
.ecosystem-nav__toggle:hover { color: var(--ink1); background: rgba(255,255,255,0.30); }
.ecosystem-nav__menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 252px; padding: 10px;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 6px rgba(27,43,69,0.04),
              0 12px 40px rgba(27,43,69,0.12),
              0 32px 64px rgba(27,43,69,0.07),
              inset 0 1px 0 rgba(255,255,255,0.80);
  display: none; z-index: 60;
}
.ecosystem-nav.is-open .ecosystem-nav__menu { display: block; }
.ecosystem-nav__link { display: block; padding: 10px 12px; border-radius: var(--r-md); font-size: 14px; color: var(--ink2); transition: background 160ms, color 160ms; }
.ecosystem-nav__link:hover { background: rgba(200,146,12,0.09); color: var(--amber-600); }
.ecosystem-nav__link small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink4); margin-top: 2px; letter-spacing: 0.04em; }

/* ──────────────────────────────────────────────────────
   SITES INDEX GRID
────────────────────────────────────────────────────── */
.sites-index-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .sites-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .sites-index-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────
   PART OF UNIESTRO badge
────────────────────────────────────────────────────── */
.part-of-uniestro {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink3);
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 12px rgba(27,43,69,0.06),
              inset 0 1px 0 rgba(255,255,255,0.80);
  transition: all 160ms;
}
.part-of-uniestro:hover { color: var(--ink2); background: rgba(255,255,255,0.35); }

/* ──────────────────────────────────────────────────────
   FAQ DETAILS / SUMMARY
────────────────────────────────────────────────────── */
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary { cursor: pointer; user-select: none; }
details.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--amber); }
details.faq-item summary:hover { color: var(--amber-600); }

/* ──────────────────────────────────────────────────────
   LANDING RESPONSIVE GRIDS
────────────────────────────────────────────────────── */
.landing-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .landing-2col { grid-template-columns: 1fr; gap: 36px; } .landing-2col .landing-2col-swap { order: -1 !important; } }

@media (max-width: 860px) { .landing-features-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .landing-features-grid { grid-template-columns: 1fr !important; } }