/* ==========================================================================
   Featured Project — homepage-only section (see index.html, between
   "why-section" and "services-section"). Not part of the shared
   stylesheet list since no other page uses it — same rationale as
   hero-video.js being a homepage-only script.
   ========================================================================== */

.featured-project-section{
  position:relative;overflow:hidden;
  padding:var(--space-section-y) var(--space-section-x);
  background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.featured-project-section__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60vw;height:60vw;max-width:680px;max-height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(155,84,255,.24),transparent 70%);
  filter:blur(50px);pointer-events:none;z-index:0;
}
.featured-project-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}

/* ---- Left: content ---- */
.featured-project__desc{
  margin:18px 0 22px;font-size:16px;line-height:1.75;color:var(--text-2);max-width:48ch;
}
.featured-project__list{margin:0 0 32px}
.featured-project__ctas{display:flex;flex-wrap:wrap;gap:14px}

/* ---- Right: video ---- */
.featured-project__video-frame{
  position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:#000 center/cover no-repeat;
  border:1px solid var(--line);
  box-shadow:0 30px 90px -24px rgba(107,95,255,.5),0 0 0 1px rgba(155,84,255,.14);
}
.featured-project__video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
/* Play glyph shown over the poster thumbnail until the iframe mounts
   (lazy-loaded — see assets/js/featured-project.js); fades out once
   `.is-loaded` is added so it never sits on top of the playing video. */
.featured-project__video-frame::after{
  content:"";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(9,9,12,.15),rgba(9,9,12,.45));
  opacity:1;transition:opacity .4s var(--ease);pointer-events:none;
}
.featured-project__video-frame.is-loaded::after{opacity:0}

@media (max-width:1000px){
  .featured-project-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .featured-project-section__glow{width:90vw;height:90vw}
}