/* ===============================
   GemFin Hub — External Styles
   Cyan→Gold + RGB Blend
   =============================== */

:root{
  --gf-bg:#0a0e14;
  --gf-card:#121a24;
  --gf-text:#eaf4ff;
  --gf-sub:#9eb3cc;
  --gf-accent:#38cfff;
  --gf-gold:#ffd36e;
  --gf-edge:#1c2736;
  --gf-shadow: 0 10px 30px rgba(0,0,0,.45);
  --gf-glow: 0 0 20px rgba(56,207,255,.35);

  /* Cyan→Gold */
  --gf-gradient-cy: radial-gradient(900px 500px at 12% -8%,
                        rgba(56,207,255,.12),
                        rgba(255,211,110,.08) 45%,
                        transparent 75%),
                    radial-gradient(800px 450px at 88% 5%,
                        rgba(255,211,110,.10),
                        rgba(56,207,255,.08) 50%,
                        transparent 80%);

  /* Red→Green→Blue */
  --gf-gradient-rgb: radial-gradient(1000px 600px at 20% -15%,
                        rgba(255,60,60,.10),
                        rgba(60,255,120,.08) 40%,
                        rgba(60,120,255,.08) 70%,
                        transparent 90%);

  /* Combined */
  --gf-gradient: var(--gf-gradient-rgb), var(--gf-gradient-cy);

  --gf-gradient-animate: 24s;
  --gf-gradient-animate-delay: 0s;
}

html, body { background: var(--gf-bg); color: var(--gf-text); }
.bg-gf { background: var(--gf-bg); }

.text-gf { color: var(--gf-text) !important; }
.text-gf-sub { color: var(--gf-sub) !important; }
.text-gf-accent { color: var(--gf-accent) !important; }
.text-gf-muted { color: #7f93ad !important; }

.border-gf-edge { border-color: var(--gf-edge) !important; }

.navbar {
  background: rgba(10,14,20,.6);
  backdrop-filter: blur(6px);
}
.navbar-brand { display:flex; align-items:center; gap:.5rem; }
.brand-dot {
  width:10px; height:10px; border-radius:50%;
  background: var(--gf-accent); box-shadow: var(--gf-glow); display:inline-block;
}

/* Section gradient wash */
section {
  background: var(--gf-bg);
  position: relative;
  overflow: clip;
}
section::before {
  content:"";
  position:absolute; inset:-10% -5%;
  background: var(--gf-gradient);
  pointer-events:none;
  z-index:0;
  transform: translate3d(0,0,0);
  animation: gfDrift var(--gf-gradient-animate) ease-in-out var(--gf-gradient-animate-delay) infinite alternate;
}
section > * { position:relative; z-index:1; }

/* Hero stronger blend */
.gf-hero {
  position: relative;
  background:
    var(--gf-gradient),
    linear-gradient(180deg, rgba(18,26,36,.7), rgba(10,14,20,1) 60%);
}
.gf-hero::before {
  content:"";
  position:absolute; inset:-12% -8%;
  background: var(--gf-gradient);
  mix-blend-mode: lighten;
  opacity:.6;
  pointer-events:none;
  z-index:0;
  animation: gfDrift calc(var(--gf-gradient-animate) * 1.1) ease-in-out .2s infinite alternate;
}
.gf-hero > * { position:relative; z-index:1; }

/* Cards */
.gf-card {
  background:
    linear-gradient(180deg, rgba(18,26,36,.92), rgba(18,26,36,.7)),
    var(--gf-gradient);
  background-blend-mode: normal, soft-light;
  border: 1px solid var(--gf-edge);
  border-radius:1.25rem;
  box-shadow: var(--gf-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gf-card:hover {
  border-color: var(--gf-accent);
  box-shadow: var(--gf-glow);
  transform: translateY(-2px);
}

/* Spotlight */
.gf-spotlight {
  border:1px solid var(--gf-edge);
  background:
    linear-gradient(180deg, rgba(18,26,36,.88), rgba(18,26,36,.65)),
    var(--gf-gradient);
  background-blend-mode: normal, soft-light;
  border-radius:1.25rem;
}

/* Progress bars */
.gf-progress {
  height: 8px;
  background:#0f1822;
  border:1px solid var(--gf-edge);
  border-radius: 999px;
  overflow: hidden;
}
.gf-progress .progress-bar {
  background: linear-gradient(90deg, var(--gf-accent), #8ee6ff);
  box-shadow: var(--gf-glow);
}

/* Buttons */
.btn { border-radius: .9rem; }
.btn-gf-accent {
  --bs-btn-color:#001018;
  --bs-btn-bg:var(--gf-accent);
  --bs-btn-border-color:var(--gf-accent);
  --bs-btn-hover-bg:#67dbff;
  --bs-btn-hover-border-color:#67dbff;
  --bs-btn-shadow: var(--gf-glow);
  box-shadow: var(--gf-glow);
}
.btn-outline-gf {
  --bs-btn-color:var(--gf-text);
  --bs-btn-border-color:var(--gf-edge);
  --bs-btn-hover-color:var(--gf-text);
  --bs-btn-hover-bg:rgba(56,207,255,.12);
  --bs-btn-hover-border-color:var(--gf-accent);
  border-width:1px;
}

/* Hero quick tiles */
.gf-hero-card {
  background: linear-gradient(180deg, rgba(18,26,36,.9), rgba(18,26,36,.65));
  border: 1px solid var(--gf-edge);
  border-radius:1.25rem;
  box-shadow: var(--gf-shadow);
}
.tile {
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1rem; border:1px solid var(--gf-edge);
  border-radius:1rem; color:var(--gf-text); text-decoration:none;
  background:rgba(18,26,36,.6);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tile:hover {
  border-color:var(--gf-accent);
  box-shadow: var(--gf-glow);
  color:var(--gf-text);
  transform: translateY(-1px);
}
.tile i { font-size:1.2rem; color:var(--gf-accent); }

/* Links */
.link-gf { color: var(--gf-accent); text-decoration: none; }
.link-gf:hover { color:#8ee6ff; text-decoration: underline; }

/* Headings */
h1, h2, h3, .display-5 { color: var(--gf-text); }

/* -------------------------------
   Motion controls
   ------------------------------- */
@keyframes gfDrift {
  0%   { transform: translate3d(0,0,0) scale(1);    filter: saturate(1); }
  100% { transform: translate3d(0,-1.5%,0) scale(1.02); filter: saturate(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --gf-gradient-animate: 0s; }
  section::before, .gf-hero::before { animation: none !important; }
}