/* =====================================================================
   TalentedHub — homepage (platform landing page)
   ===================================================================== */

.btn-lg { padding: 14px 28px; font-size: 1.02rem; }

/* ---- Hero (centered landing style) ---- */
.home-hero { position: relative; overflow: hidden; padding: 76px 0 60px;
  background:
    radial-gradient(55% 80% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 60% at 12% 30%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
    radial-gradient(40% 60% at 88% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
/* Faint dot-grid pattern, fading out toward the edges */
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 16%, transparent) 2px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 32%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 62% at 50% 32%, #000 0%, transparent 78%);
  opacity: .70; }

/* Animated gradient glow — two soft color blobs slowly drifting & breathing */
.home-hero::after { content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(32% 32% at 28% 32%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
    radial-gradient(34% 34% at 72% 58%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 60%);
  filter: blur(26px); opacity: .9;
  animation: heroGlow 16s ease-in-out infinite alternate; }
@keyframes heroGlow {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(2.5%, -2%) scale(1.1) rotate(4deg); }
  100% { transform: translate(-2.5%, 2%) scale(1.04) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .home-hero::after { animation: none; } }

.home-hero-inner { position: relative; z-index: 2; max-width: 840px; margin: 0 auto; text-align: center; }

/* Floating preview cards */
.hero-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float-card { position: absolute; display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  padding: 12px 15px; box-shadow: var(--shadow-lg); white-space: nowrap;
  animation: floaty 6s ease-in-out infinite; }
.float-card .fc-text strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: .92rem; }
.float-card .fc-text span { color: var(--text-soft); font-size: .76rem; }
.float-card .fc-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-head); }
.float-card .fc-emoji { font-size: 1.5rem; }
.fc-1 { --r: -5deg; top: 24%; left: 3%;  animation-delay: 0s; }
.fc-2 { --r:  5deg; bottom: 18%; left: 6%; animation-delay: 1.4s; }
.fc-3 { --r:  5deg; top: 22%; right: 3%; animation-delay: .7s; }
.fc-4 { --r: -4deg; bottom: 17%; right: 5%; animation-delay: 2.1s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50%      { transform: translateY(-10px) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } }
@media (max-width: 1180px) { .hero-floats { display: none; } }
.home-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.9rem); font-weight: 800; line-height: 1.08; margin: 18px auto 18px; max-width: 14ch; }
.home-hero h1 .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero-sub { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-soft); max-width: 600px; margin: 0 auto; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; justify-content: center; }
.hero-trust { margin-top: 18px; color: var(--text-faint); font-size: .9rem; font-weight: 500; }

/* Hero search bar */
.hero-search { margin: 32px auto 0; max-width: 700px; }

/* Popular search chips */
.hero-chips { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-chips .hc-label { color: var(--text-faint); font-size: .88rem; font-weight: 600; }
.hero-chips a { font-size: .88rem; font-weight: 600; color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border); padding: 6px 14px; border-radius: var(--radius-pill); transition: all .2s; }
.hero-chips a:hover { color: var(--accent); border-color: var(--accent); }
.hero-chips a.hc-ghost { background: none; border: none; color: var(--accent); padding: 6px 4px; }
[data-theme="dark"] .hero-chips a.hc-ghost { color: var(--accent-2); }

/* Hero stats */
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; line-height: 1.1; }
.hero-stat strong { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stat span { color: var(--text-soft); font-size: .85rem; font-weight: 500; margin-top: 2px; }
.hs-sep { width: 1px; height: 34px; background: var(--border); }

/* ---- 3 pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: -28px; position: relative; z-index: 2; padding-bottom: 20px; }
.pillar-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-md);
  transition: transform .25s, box-shadow .25s; }
.pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pillar-icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: var(--accent-grad); color: #fff; margin-bottom: 6px; box-shadow: 0 6px 16px rgba(109,74,255,.35); }
.pillar-card h3 { font-size: 1.35rem; }
.pillar-card p { color: var(--text-soft); font-size: .96rem; flex: 1; }
.pillar-link { color: var(--accent); font-weight: 700; font-size: .92rem; margin-top: 4px; }
[data-theme="dark"] .pillar-link { color: var(--accent-2); }

/* ---- Generic home section ---- */
.home-section { padding: 40px 0 10px; }
.section-head.center { justify-content: center; text-align: center; }
.home-guides { grid-template-columns: repeat(3, 1fr); }

/* ---- Tools showcase ---- */
.home-tools { background: var(--surface-2); padding: 50px 0; margin-top: 40px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-tool-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.home-tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.home-tool-card h4 { font-size: 1.08rem; }
.home-tool-card p { color: var(--text-soft); font-size: .9rem; flex: 1; }
.home-tool-go { color: var(--accent); font-weight: 700; font-size: .85rem; }
[data-theme="dark"] .home-tool-go { color: var(--accent-2); }

/* ---- Why section ---- */
.why { padding: 50px 0 60px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 24px; }
.why-item { text-align: center; padding: 24px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.why-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.why-item h4 { font-size: 1.05rem; margin-bottom: 6px; }
.why-item p { color: var(--text-soft); font-size: .9rem; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; margin-top: 10px; }
  .home-guides { grid-template-columns: 1fr 1fr; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .home-guides, .tools-grid, .why-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1; justify-content: center; }
}

/* ---- Home: Learn to code section ---- */
.home-learn { padding: 10px 0 6px; }
.home-learn-sub { color: var(--text-soft); margin: -6px 0 18px; font-size: 1rem; }
.courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-course-card { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.home-course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.home-course-badge { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.home-course-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.home-course-text strong { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--text); }
.home-course-text em { font-style: normal; font-size: .85rem; color: var(--text-faint); font-weight: 600; }
@media (max-width: 900px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .courses-grid { grid-template-columns: 1fr; } }

/* ---- Hero CTA buttons + 4-pillar layout (landing refresh) ---- */
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }
.pillars { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }