/* ===== Ruah Freedom Center — homepage building-project band (index.php) ===== */
:root{ --fc-amber:#f2a23a; --fc-orange:#ed6b1f; --fc-char:#23262b; --fc-grid:46px; }

.fc-band{
    position:relative; overflow:hidden;
    background:
        radial-gradient(90% 120% at 82% 0%, rgba(237,107,31,.20) 0%, transparent 55%),
        linear-gradient(160deg,#2b2f36 0%,#1c1f24 100%);
}
/* faint blueprint grid — this is a building project */
.fc-band:before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:var(--fc-grid) var(--fc-grid);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
/* light travelling down a randomly-chosen blueprint line — beams injected by js/freedom-center.js */
.fc-beams{
    position:absolute; inset:0; overflow:hidden; pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.fc-beam{
    position:absolute; top:0; left:0; width:1px; height:220px; opacity:0;
    transform:translateY(-220px);
    background:linear-gradient(180deg,
        rgba(242,162,58,0) 0%,
        rgba(242,162,58,.55) 45%,
        #ffd9a1 72%,
        rgba(255,255,255,.95) 88%,
        rgba(237,107,31,0) 100%);
    filter:drop-shadow(0 0 7px rgba(242,162,58,.7));
    will-change:transform;
}
.fc-beam.is-running{
    animation:fc-beam-travel var(--fc-beam-dur,4.5s) cubic-bezier(.45,0,.55,1);
}
@keyframes fc-beam-travel{
    0%{ transform:translateY(-220px); opacity:0; }
    10%{ opacity:1; }
    88%{ opacity:1; }
    100%{ transform:translateY(var(--fc-band-h,620px)); opacity:0; }
}
.fc-band .container{ position:relative; z-index:1; }
.fc-logo-wrap{
    background:#fff; border-radius:22px; padding:34px;
    box-shadow:0 34px 70px -30px rgba(0,0,0,.7);
    display:inline-block; max-width:420px; width:100%;
}
.fc-logo-wrap img{ width:100%; height:auto; display:block; }
.fc-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--alt-font); font-weight:700; text-transform:uppercase;
    letter-spacing:3px; font-size:12px; color:var(--fc-amber);
}
.fc-eyebrow .dot{
    width:9px; height:9px; border-radius:50%; background:var(--fc-orange);
    box-shadow:0 0 0 0 rgba(237,107,31,.6); animation:fc-pulse 2.2s infinite;
}
@keyframes fc-pulse{
    0%{ box-shadow:0 0 0 0 rgba(237,107,31,.55); }
    70%{ box-shadow:0 0 0 12px rgba(237,107,31,0); }
    100%{ box-shadow:0 0 0 0 rgba(237,107,31,0); }
}
.fc-title{
    font-family:var(--alt-font); font-weight:700; color:#fff;
    font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; letter-spacing:-1px;
    margin:16px 0 16px;
}
.fc-title em{ font-style:normal; color:var(--fc-amber); }
.fc-lede{ color:rgba(255,255,255,.72); max-width:52ch; font-size:1.02rem; margin-bottom:26px; }
.fc-pillars{
    list-style:none; padding:0; margin:0 0 30px; display:flex; flex-wrap:wrap; gap:14px 26px;
}
.fc-pillars li{ display:flex; align-items:center; gap:11px; color:#fff; font-family:var(--alt-font); font-weight:600; }
.fc-pillars i{
    width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
    background:linear-gradient(140deg,var(--fc-amber),var(--fc-orange)); color:#fff; font-size:15px;
}
.fc-cta{
    display:inline-flex; align-items:center; gap:11px; text-decoration:none;
    font-family:var(--alt-font); font-weight:700; font-size:16px; color:#fff !important;
    padding:16px 34px; border-radius:100px;
    background:linear-gradient(135deg,var(--fc-amber),var(--fc-orange));
    box-shadow:0 16px 34px -14px rgba(237,107,31,.8); transition:transform .25s ease, box-shadow .25s ease;
}
.fc-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -14px rgba(237,107,31,.95); }
.fc-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:991px){ .fc-logo-wrap{ margin-bottom:36px; } }
@media (prefers-reduced-motion:reduce){ .fc-eyebrow .dot{ animation:none; } .fc-cta:hover{ transform:none; } .fc-beams{ display:none; } }