body { background: #f6f3ee; color: #5c6578; }
h1, h2, h3, .slide-title { color: #172033; letter-spacing: -0.03em; }

.fx-top { background: #10182e; color: #d5dbe8; font-size: 13px; }
.fx-top-in, .fx-head-in, .fx-band-head, .fx-cta-in, .fx-faq-grid { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fx-top-in { min-height: 38px; }
.fx-top a { color: #fff; }
.fx-top-links { display: flex; gap: 1.1rem; }
.fx-head { background: #fbf8f4; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid #efe8de; }
.fx-head-in { min-height: 84px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.fx-head .site-nav ul { justify-content: center; }
.fx-head .site-nav a { color: #243049; font-weight: 600; font-size: 15px; }
.logo img { height: 54px; width: auto; }
.fx-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 18px; border-radius: 999px;
  background: #c4622d; color: #fff; font-weight: 700; border: 1px solid #c4622d;
}
.fx-pill-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.fx-pill-line { background: #fff; color: #172033; border-color: #e4ddd2; }
.fx-tools { display: flex; align-items: center; gap: .4rem; }

.fx-hero { position: relative; min-height: 78vh; background: #0d1730; color: #fff; overflow: hidden; }
.fx-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.fx-slide.is-active, .fx-slide.is-on { opacity: 1; z-index: 1; }
.fx-slide img { width: 100%; height: 100%; object-fit: cover; }
.fx-hero-copy {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(10,18,40,.92) 0%, rgba(10,18,40,.72) 42%, rgba(10,18,40,.15) 100%);
}
.fx-hero h1, .fx-hero h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.4rem); max-width: 12ch; line-height: 1.05; margin: .8rem 0; }
.fx-hero p { color: rgba(255,255,255,.82); max-width: 42ch; }
.fx-kicker { display: inline-flex; color: #fff; background: rgba(255,255,255,.12); border-radius: 999px; padding: .35rem .8rem; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.fx-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.fx-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; display: flex; justify-content: center; gap: .4rem; }
.fx-dots button { width: 22px; height: 4px; border: 0; border-radius: 99px; background: rgba(255,255,255,.35); }
.fx-dots button.is-on { background: #c4622d; width: 36px; }

.fx-about, .fx-works, .fx-faq, .fx-news { padding: 88px 0; background: #fbf8f4; }
.fx-about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items: center; }
.fx-about-photos { position: relative; }
.fx-about-photos > img:first-child { width: 86%; height: 460px; object-fit: cover; border-radius: 18px; }
.fx-float { position: absolute; right: 0; bottom: 28px; width: 42%; height: 160px; object-fit: cover; border: 6px solid #fbf8f4; border-radius: 16px; }
.fx-badge { position: absolute; left: 16px; top: 16px; background: #121a33; color: #fff; border-radius: 14px; padding: .8rem 1rem; }
.fx-badge strong { display: block; font-size: 1.6rem; }
.fx-eyebrow { color: #c4622d; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.fx-lead { font-size: 1.02rem; }
.fx-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin: 1.2rem 0 1.4rem; }
.fx-points b, .fx-points span { display: block; }
.fx-points b { color: #172033; }
.fx-points span { font-size: .88rem; }

.fx-band { background: #f3efe8; padding: 80px 0; }
.fx-band-head { margin-bottom: 1.6rem; }
.fx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fx-card { background: #fff; border-radius: 18px; padding: 1.3rem 1.2rem 1.4rem; color: inherit; min-height: 190px; box-shadow: 0 10px 30px rgba(18,26,51,.04); }
.fx-no { color: #c9c2b6; font-weight: 800; }
.fx-card h3 { margin: .6rem 0 .35rem; font-size: 1.15rem; }
.fx-card p { margin: 0 0 .8rem; }
.fx-more { color: #c4622d; font-weight: 700; font-size: .9rem; }

.fx-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.fx-mosaic img { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; }
.fx-cta { background: #121a33; color: #fff; padding: 72px 0; }
.fx-cta h2, .fx-cta p { color: #fff; }
.fx-faq-grid { align-items: start; display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; }
.fx-faq details { background: #fff; border-radius: 14px; padding: .9rem 1rem; margin: .6rem 0; }
.fx-faq summary { cursor: pointer; font-weight: 700; color: #172033; }
.fx-faq aside { background: #121a33; color: #fff; border-radius: 20px; padding: 1.6rem; }
.fx-faq aside h3, .fx-faq aside p { color: #fff; }
.fx-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fx-news-grid a { background: #fff; border-radius: 16px; overflow: hidden; color: inherit; display: block; }
.fx-news-grid img { width: 100%; height: 180px; object-fit: cover; }
.fx-news-grid h3, .fx-news-grid time { display: block; padding: 0 1rem; }
.fx-news-grid h3 { padding-bottom: 1rem; }
.fx-foot { background: #10182e; color: rgba(255,255,255,.75); padding: 64px 0 0; }
.fx-foot h2 { color: #fff; font-size: 1rem; }
.fx-foot a:hover { color: #e7b08a; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2rem; padding: 1rem 0; }
.fx-wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  background: #25d366; color: #fff; border-radius: 999px; padding: .75rem 1rem; font-weight: 800;
}
.page-hero { background: #121a33; }
.nav-toggle { display: none; }
@media (max-width: 980px) {
  .fx-head-in { grid-template-columns: auto auto; }
  .fx-head .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; padding: .6rem 1rem 1rem; }
  .fx-head .site-nav.is-open { display: block; }
  .fx-head .site-nav ul { flex-direction: column; }
  .nav-toggle { display: inline-flex; }
  .fx-about-grid, .fx-cards, .fx-mosaic, .fx-news-grid, .fx-faq-grid, .footer-grid { grid-template-columns: 1fr; }
  .fx-top-in, .fx-band-head, .fx-cta-in { align-items: flex-start; flex-direction: column; }
  .fx-about-photos > img:first-child { width: 100%; height: 240px; }
  .fx-float { display: none; }
  .fx-hero { min-height: 70vh; }
}