/* Frankie Felicie Ministries — 2026 visual system */
:root {
  --ff-ink:#07111f;
  --ff-ink-2:#0b1730;
  --ff-surface:#0f1d39;
  --ff-surface-2:#122346;
  --ff-text:#f8fbff;
  --ff-muted:#b7c4d8;
  --ff-gold:#e8be68;
  --ff-gold-2:#fff0b7;
  --ff-blue:#4b7cff;
  --ff-cyan:#73dbff;
  --ff-violet:#8b6cff;
  --ff-line:rgba(255,255,255,.11);
  --ff-glass:rgba(10,22,43,.62);
  --ff-shadow:0 28px 90px rgba(0,0,0,.32);
  --ff-radius:28px;
  --ff-radius-sm:18px;
  --ff-max:1240px;
}

html{scroll-behavior:smooth;background:var(--ff-ink)}
body{
  color:var(--ff-text)!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(75,124,255,.20),transparent 28rem),
    radial-gradient(circle at 90% 18%,rgba(139,108,255,.17),transparent 30rem),
    linear-gradient(180deg,#07111f 0%,#0a1730 48%,#07111f 100%)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
::selection{background:rgba(232,190,104,.9);color:#08111f}

h1,h2,h3,h4,h5,h6{color:var(--ff-text)!important;letter-spacing:-.025em}
h1,h2,.font-serif{font-family:"Cormorant Garamond","Crimson Text",Georgia,serif!important}
p{color:var(--ff-muted)}
a{transition:color .25s ease,opacity .25s ease,transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}

nav,.navbar{
  background:rgba(6,14,29,.72)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
nav h1,.navbar h1{color:white!important}
nav p,.navbar p{color:#aebbd1!important}
nav a,.navbar a,nav button,.navbar button{color:#dfe8f6!important}
nav a:hover,.navbar a:hover,nav button:hover,.navbar button:hover{color:#fff3c7!important}
nav .bg-blue-600,nav .bg-gradient-to-br,.navbar .bg-blue-600,.navbar .bg-gradient-to-br{
  background:linear-gradient(135deg,var(--ff-gold),#a5792e)!important;
  box-shadow:0 0 28px rgba(232,190,104,.22)!important;
}
.dropdown-menu{
  background:rgba(9,20,41,.96)!important;border:1px solid var(--ff-line)!important;
  box-shadow:var(--ff-shadow)!important;backdrop-filter:blur(20px);border-radius:18px!important;
}
.dropdown-menu a:hover{background:rgba(255,255,255,.06)!important}

.hero,.hero-gradient,[class*="hero-gradient"]{
  background:
    radial-gradient(circle at 50% 35%,rgba(115,219,255,.16),transparent 22rem),
    radial-gradient(circle at 22% 45%,rgba(75,124,255,.23),transparent 30rem),
    radial-gradient(circle at 82% 26%,rgba(139,108,255,.19),transparent 26rem),
    linear-gradient(135deg,#081326 0%,#0c1b38 52%,#07111f 100%)!important;
}
.hero{isolation:isolate}
.hero::after{
  content:"";position:absolute;inset:auto 0 0;height:160px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#07111f);
}
.hero-content{max-width:var(--ff-max)!important}
.hero-title{
  font-size:clamp(3.7rem,8vw,7.8rem)!important;line-height:.9!important;font-weight:700!important;
  text-wrap:balance;text-shadow:0 12px 50px rgba(0,0,0,.35)
}
.hero-title::after{
  content:"";display:block;width:110px;height:2px;margin:28px auto 0;
  background:linear-gradient(90deg,transparent,var(--ff-gold),transparent);box-shadow:0 0 26px rgba(232,190,104,.55)
}
.hero-verse{font-size:clamp(1.1rem,2vw,1.45rem)!important;color:#d8e4f6!important;max-width:820px!important}
.hero-ref{color:var(--ff-gold-2)!important;letter-spacing:.08em;text-transform:uppercase;font-size:.86rem!important}

section{position:relative}
section:not(.hero){background:transparent!important}
.max-w-6xl,.max-w-7xl{max-width:var(--ff-max)!important}

.ff-kicker,.section-kicker{
  display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;border:1px solid rgba(232,190,104,.24);
  border-radius:999px;background:rgba(232,190,104,.06);color:var(--ff-gold-2);font-size:.72rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase
}

.bg-white,.bg-gray-50,.bg-gray-100,.bg-blue-50,.bg-indigo-50,.bg-purple-50{
  background:rgba(13,29,57,.58)!important;color:var(--ff-text)!important
}
.text-gray-900,.text-gray-800,.text-gray-700{color:var(--ff-text)!important}
.text-gray-600,.text-gray-500,.text-gray-400{color:var(--ff-muted)!important}
.text-blue-700,.text-blue-600,.text-indigo-700,.text-purple-700{color:var(--ff-gold-2)!important}
.border-gray-100,.border-gray-200,.border-gray-300{border-color:var(--ff-line)!important}
.shadow,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:var(--ff-shadow)!important}

.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-3xl{border-radius:var(--ff-radius-sm)!important}

.card,.glass-card,.service-card,.sermon-card,.study-card,
.bg-white.rounded-lg,.bg-white.rounded-xl,.bg-white.rounded-2xl,.bg-white.rounded-3xl{
  background:linear-gradient(145deg,rgba(20,40,76,.72),rgba(8,20,40,.76))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 25px 70px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:relative;overflow:hidden;
}
.card::before,.glass-card::before,.service-card::before,.sermon-card::before,.study-card::before,
.bg-white.rounded-xl::before,.bg-white.rounded-2xl::before,.bg-white.rounded-3xl::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(232,190,104,.05));
}
.card:hover,.glass-card:hover,.service-card:hover,.sermon-card:hover,.study-card:hover,
.bg-white.rounded-xl:hover,.bg-white.rounded-2xl:hover,.bg-white.rounded-3xl:hover{
  transform:translateY(-6px);border-color:rgba(232,190,104,.25)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.32),0 0 40px rgba(75,124,255,.08)!important
}

button,.btn,a[class*="px-"][class*="py-"]{border-radius:999px!important}
.bg-blue-600,.bg-blue-700,.bg-indigo-600,.bg-purple-600,.bg-gradient-to-r{
  background:linear-gradient(135deg,#f1d18a,#b58336)!important;color:#0b1424!important;border:none!important;
  box-shadow:0 12px 38px rgba(190,135,54,.20)!important;font-weight:800!important
}
.bg-blue-600:hover,.bg-blue-700:hover,.bg-indigo-600:hover,.bg-purple-600:hover,.bg-gradient-to-r:hover{
  transform:translateY(-2px);box-shadow:0 18px 45px rgba(190,135,54,.28)!important
}

input,textarea,select{
  background:rgba(4,13,29,.78)!important;color:#f8fbff!important;border:1px solid rgba(255,255,255,.13)!important;
  border-radius:16px!important;box-shadow:inset 0 1px rgba(255,255,255,.03)!important
}
input:focus,textarea:focus,select:focus{outline:none!important;border-color:rgba(232,190,104,.6)!important;box-shadow:0 0 0 4px rgba(232,190,104,.08)!important}

img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s ease}
figure:hover img,.group:hover img{transform:scale(1.025);filter:saturate(1.08) contrast(1.03)}

footer{background:#050c18!important;border-top:1px solid rgba(255,255,255,.08)!important}
footer p,footer a{color:#aebbd1!important}
footer a:hover{color:var(--ff-gold-2)!important}

.ff-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.ff-reveal.ff-visible{opacity:1;transform:none}
.ff-glow-orb{position:absolute;border-radius:999px;filter:blur(50px);opacity:.22;pointer-events:none;animation:ffFloat 9s ease-in-out infinite alternate}
@keyframes ffFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-24px,0) scale(1.08)}}

@media (max-width:768px){
  :root{--ff-radius:22px;--ff-radius-sm:16px}
  .hero-title{font-size:clamp(3.2rem,16vw,5.4rem)!important}
  .hero-content{padding-top:5rem!important;padding-bottom:5rem!important}
  nav,.navbar{background:rgba(5,13,27,.91)!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .ff-reveal{opacity:1;transform:none}
}