/* =====================================================================
   FRANTAL DESIGN SYSTEM  v1.0
   Tokens + base components for the Frantal ecosystem.
   Load AFTER Bootstrap so tokens/components win where intended.
   ===================================================================== */

:root {
  /* ---- Brand ---- */
  --fc-primary-900: #0a2540;  /* deep navy — headings / dark sections */
  --fc-primary-800: #0b3a6b;
  --fc-primary-700: #0b4ea2;
  --fc-primary-600: #0066cc;  /* legacy brand blue — continuity */
  --fc-primary-500: #1a7aff;
  --fc-primary-100: #e6f0fb;

  --fc-accent-600: #00a892;
  --fc-accent-500: #00c2a8;   /* teal accent — CTAs, focus, highlights */
  --fc-accent-100: #d8f7f1;

  /* ---- Neutrals ---- */
  --fc-neutral-0: #ffffff;
  --fc-neutral-50: #f7f9fc;
  --fc-neutral-100: #eef2f7;
  --fc-neutral-200: #e3e8ef;
  --fc-neutral-300: #cdd5df;
  --fc-neutral-500: #697586;
  --fc-neutral-700: #364152;
  --fc-neutral-900: #0d1320;

  /* ---- States ---- */
  --fc-success: #0ca678;
  --fc-warning: #f59f00;
  --fc-danger:  #e03131;
  --fc-info:    #1c7ed6;

  /* ---- Typography ---- */
  --fc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fc-font-display: 'Sora', 'Inter', system-ui, sans-serif;

  --fc-text-xs: .75rem;
  --fc-text-sm: .875rem;
  --fc-text-base: 1rem;
  --fc-text-lg: 1.125rem;
  --fc-text-xl: 1.5rem;
  --fc-text-2xl: 2rem;
  --fc-text-3xl: 2.5rem;
  --fc-text-4xl: clamp(2.25rem, 5vw, 3.5rem);

  --fc-leading-tight: 1.15;
  --fc-leading-normal: 1.6;

  /* ---- Spacing (4px scale) ---- */
  --fc-space-1: 4px;  --fc-space-2: 8px;  --fc-space-3: 12px;
  --fc-space-4: 16px; --fc-space-6: 24px; --fc-space-8: 32px;
  --fc-space-12: 48px; --fc-space-16: 64px; --fc-space-24: 96px;

  /* ---- Radius ---- */
  --fc-radius-sm: 8px;
  --fc-radius-md: 12px;
  --fc-radius-lg: 20px;
  --fc-radius-full: 999px;

  /* ---- Elevation ---- */
  --fc-shadow-sm: 0 1px 2px rgba(13,19,32,.06);
  --fc-shadow-md: 0 8px 24px rgba(13,19,32,.08);
  --fc-shadow-lg: 0 20px 48px rgba(13,19,32,.12);
  --fc-focus: 0 0 0 3px rgba(0,194,168,.45);

  /* ---- Motion ---- */
  --fc-ease: cubic-bezier(.16,.84,.44,1);
  --fc-dur: 200ms;

  /* Bootstrap continuity aliases */
  --primary: var(--fc-primary-600);
  --primary-dark: var(--fc-primary-800);
  --dark: var(--fc-primary-900);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
.fc-root,
body.fc-root {
  font-family: var(--fc-font-sans);
  color: var(--fc-neutral-700);
  background: var(--fc-neutral-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fc-root h1, .fc-root h2, .fc-root h3, .fc-root h4 {
  font-family: var(--fc-font-display);
  color: var(--fc-primary-900);
  line-height: var(--fc-leading-tight);
  letter-spacing: -.01em;
}

.fc-root a:not(.fc-btn):not(.fc-whatsapp) { color: var(--fc-primary-600); }

/* Accessible focus for all interactive elements */
.fc-root a:focus-visible,
.fc-root button:focus-visible,
.fc-root input:focus-visible,
.fc-root textarea:focus-visible,
.fc-root select:focus-visible,
.fc-root [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--fc-focus);
  border-radius: var(--fc-radius-sm);
}

/* Skip link */
.fc-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--fc-primary-900);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--fc-radius-sm) 0;
  font-weight: 600;
}
.fc-skip-link:focus {
  left: 0;
  color: #fff;
}

/* Section rhythm + utilities */
.fc-section { padding: var(--fc-space-24) 0; }
.fc-section--tight { padding: var(--fc-space-16) 0; }
.fc-bg-50 { background: var(--fc-neutral-50); }
.fc-bg-navy { background: var(--fc-primary-900); color: #fff; }
.fc-bg-navy h1, .fc-bg-navy h2, .fc-bg-navy h3, .fc-bg-navy h4 { color: #fff; }

.fc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  font-family: var(--fc-font-sans);
  font-size: var(--fc-text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fc-accent-600);
  margin-bottom: var(--fc-space-4);
}
.fc-bg-navy .fc-eyebrow { color: var(--fc-accent-500); }

.fc-section-title {
  font-size: var(--fc-text-3xl);
  font-weight: 800;
  margin-bottom: var(--fc-space-3);
}
.fc-section-subtitle {
  font-size: var(--fc-text-lg);
  color: var(--fc-neutral-500);
  max-width: 640px;
  margin: 0 auto var(--fc-space-12);
}
.fc-bg-navy .fc-section-subtitle { color: rgba(255,255,255,.78); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  font-family: var(--fc-font-sans);
  font-size: var(--fc-text-base);
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--fc-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--fc-dur) var(--fc-ease),
              box-shadow var(--fc-dur) var(--fc-ease),
              background-color var(--fc-dur) var(--fc-ease),
              color var(--fc-dur) var(--fc-ease),
              border-color var(--fc-dur) var(--fc-ease);
}
.fc-btn:active { transform: scale(.98); }

.fc-btn--primary { background: var(--fc-primary-600); color: #fff; }
.fc-btn--primary:hover { background: var(--fc-primary-700); color: #fff; transform: translateY(-2px); box-shadow: var(--fc-shadow-md); }

.fc-btn--accent { background: var(--fc-accent-500); color: #06302a; }
.fc-btn--accent:hover { background: var(--fc-accent-600); color: #06302a; transform: translateY(-2px); box-shadow: var(--fc-shadow-md); }

.fc-btn--ghost { background: transparent; color: var(--fc-primary-700); border-color: var(--fc-neutral-300); }
.fc-btn--ghost:hover { border-color: var(--fc-primary-600); color: var(--fc-primary-700); background: var(--fc-neutral-50); }

.fc-btn--on-dark { background: #fff; color: var(--fc-primary-800); }
.fc-btn--on-dark:hover { background: var(--fc-neutral-100); color: var(--fc-primary-900); transform: translateY(-2px); box-shadow: var(--fc-shadow-md); }

.fc-btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.fc-btn--ghost-dark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.fc-btn[disabled], .fc-btn:disabled { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.fc-card {
  background: var(--fc-neutral-0);
  border: 1px solid var(--fc-neutral-100);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-8);
  box-shadow: var(--fc-shadow-sm);
  transition: transform var(--fc-dur) var(--fc-ease), box-shadow var(--fc-dur) var(--fc-ease);
  height: 100%;
}
.fc-card:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-lg); }

.fc-card__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fc-radius-md);
  background: var(--fc-primary-100);
  color: var(--fc-primary-600);
  font-size: 1.4rem;
  margin-bottom: var(--fc-space-4);
}
.fc-card__title { font-size: var(--fc-text-xl); font-weight: 700; margin-bottom: var(--fc-space-2); }
.fc-card__text { color: var(--fc-neutral-500); line-height: var(--fc-leading-normal); }

/* Link with arrow micro-interaction */
.fc-link-arrow {
  display: inline-flex; align-items: center; gap: var(--fc-space-2);
  font-weight: 600; text-decoration: none; color: var(--fc-primary-600);
  margin-top: var(--fc-space-4);
}
.fc-link-arrow i { transition: transform var(--fc-dur) var(--fc-ease); }
.fc-link-arrow:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.fc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fc-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  padding: 5px 12px; border-radius: var(--fc-radius-full);
  background: var(--fc-neutral-100); color: var(--fc-neutral-700);
}
.fc-badge--accent { background: var(--fc-accent-100); color: var(--fc-accent-600); }
.fc-badge--primary { background: var(--fc-primary-100); color: var(--fc-primary-700); }

/* ---------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------- */
.fc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--fc-space-4); }
.fc-label { font-size: var(--fc-text-sm); font-weight: 600; color: var(--fc-neutral-700); }
.fc-input, .fc-textarea {
  font-family: var(--fc-font-sans); font-size: var(--fc-text-base);
  color: var(--fc-neutral-900);
  padding: 12px 14px;
  border: 1.5px solid var(--fc-neutral-300);
  border-radius: var(--fc-radius-sm);
  background: #fff;
  transition: border-color var(--fc-dur) var(--fc-ease), box-shadow var(--fc-dur) var(--fc-ease);
}
.fc-input:focus, .fc-textarea:focus { outline: none; border-color: var(--fc-primary-600); box-shadow: var(--fc-focus); }

/* ---------------------------------------------------------------------
   Toasts (replaces alert())
   --------------------------------------------------------------------- */
.fc-toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 3000;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.fc-toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; color: var(--fc-neutral-900);
  border-left: 4px solid var(--fc-info);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow-lg);
  padding: 14px 16px;
  animation: fc-toast-in var(--fc-dur) var(--fc-ease);
}
.fc-toast--success { border-left-color: var(--fc-success); }
.fc-toast--warning { border-left-color: var(--fc-warning); }
.fc-toast--danger  { border-left-color: var(--fc-danger); }
@keyframes fc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------------------- */
.fc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--fc-ease), transform .5s var(--fc-ease); }
.fc-reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   Hero tech accents (reusable across inner pages)
   --------------------------------------------------------------------- */
.fc-hero-tech { position: relative; overflow: hidden; }
.fc-hero-tech > .container { position: relative; z-index: 1; }
.fc-hero-tech::before {
  content: ''; position: absolute; width: 460px; height: 460px;
  right: -120px; top: -150px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 32% 30%, rgba(0,194,168,.30), transparent 62%);
  filter: blur(16px); animation: fc-orb 16s ease-in-out infinite alternate;
}
.fc-hero-tech::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 28%, #000 40%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 28%, #000 40%, transparent 100%);
}
@keyframes fc-orb { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px,42px) scale(1.12); } }

/* Card icon lift tied to card hover */
.fc-card__icon { transition: transform var(--fc-dur) var(--fc-ease), background var(--fc-dur) var(--fc-ease), color var(--fc-dur) var(--fc-ease); }
.fc-card:hover .fc-card__icon { transform: translateY(-2px) scale(1.06); background: var(--fc-primary-600); color: #fff; }

/* ---------------------------------------------------------------------
   Floating WhatsApp
   --------------------------------------------------------------------- */
.fc-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 1500;
  width: 56px; height: 56px; border-radius: var(--fc-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff; font-size: 1.6rem;
  box-shadow: var(--fc-shadow-lg);
  transition: transform var(--fc-dur) var(--fc-ease);
}
.fc-whatsapp:hover { transform: translateY(-3px) scale(1.05); color: #fff; }

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fc-root *, .fc-reveal { transition: none !important; animation: none !important; }
  .fc-reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   DARK THEME  ·  "HakyOff-style" tech aesthetic with Frantal colours
   Site-wide dark surface, navy base + turquoise accent + terminal feel.
   Appended last so it overrides the light defaults above.
   ===================================================================== */
:root {
  /* Dark surfaces */
  --fc-d-bg:        #060b16;   /* page base — near-black navy */
  --fc-d-bg-2:      #0a1426;   /* elevated band / alt sections */
  --fc-d-surface:   #0d1a30;   /* cards */
  --fc-d-surface-2: #11213c;   /* nested / hovered */
  --fc-d-line:      rgba(255,255,255,.08);
  --fc-d-line-2:    rgba(255,255,255,.14);
  --fc-d-text:      #e8eefb;   /* primary text */
  --fc-d-muted:     #93a3bf;   /* secondary text */
  --fc-d-faint:     #8294b5;   /* tertiary — bumped for WCAG AA contrast on dark bg */
  --fc-accent:      #00d9bd;   /* brighter teal for dark bg */
  --fc-accent-soft: rgba(0,217,189,.14);
  --fc-glow:        rgba(0,217,189,.30);
  --fc-glow-blue:   rgba(26,122,255,.22);
  --fc-font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
}

/* ---- Base surface ---- */
body.fc-root {
  background:
    radial-gradient(1100px 600px at 88% -8%, var(--fc-glow), transparent 60%),
    radial-gradient(900px 560px at -10% 12%, var(--fc-glow-blue), transparent 55%),
    var(--fc-d-bg);
  background-attachment: fixed;
  color: var(--fc-d-text);
}
.fc-root h1, .fc-root h2, .fc-root h3, .fc-root h4, .fc-root h5, .fc-root h6 { color: var(--fc-d-text); }
.fc-root p { color: var(--fc-d-muted); }
.fc-root a:not(.fc-btn):not(.fc-whatsapp) { color: var(--fc-accent); }

/* Mono display utility (terminal feel for hero / section titles) */
.fc-mono { font-family: var(--fc-font-mono); letter-spacing: -.02em; }

/* ---- Sections ---- */
.fc-section, .fc-section--tight { position: relative; }
.fc-bg-50 { background: var(--fc-d-bg-2); }
.fc-bg-navy { background: var(--fc-d-bg-2); }

.fc-eyebrow { color: var(--fc-accent); }
.fc-bg-navy .fc-eyebrow { color: var(--fc-accent); }
.fc-section-subtitle { color: var(--fc-d-muted); }
.fc-bg-navy .fc-section-subtitle { color: var(--fc-d-muted); }

/* Decorative grid + glow background for any section */
.fc-grid-bg { position: relative; overflow: hidden; }
.fc-grid-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  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: 46px 46px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
}
.fc-grid-bg > * { position: relative; z-index: 1; }

/* Ghost watermark heading (HakyOff repeated title vibe) */
.fc-ghost-title {
  font-family: var(--fc-font-mono); font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 6rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06);
  text-stroke: 1px rgba(255,255,255,.06);
  text-transform: uppercase; letter-spacing: .04em;
  user-select: none; pointer-events: none; margin: 0;
}

/* ---- Cards ---- */
.fc-card {
  background: linear-gradient(180deg, var(--fc-d-surface) 0%, var(--fc-d-bg-2) 100%);
  border: 1px solid var(--fc-d-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.fc-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--fc-accent), var(--fc-primary-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--fc-dur) var(--fc-ease);
}
.fc-card:hover {
  border-color: var(--fc-d-line-2);
  box-shadow: 0 0 0 1px var(--fc-accent-soft), 0 24px 56px rgba(0,0,0,.5);
}
.fc-card:hover::after { transform: scaleX(1); }
.fc-card__title { color: var(--fc-d-text); }
.fc-card__text { color: var(--fc-d-muted); }
.fc-card__icon { background: var(--fc-accent-soft); color: var(--fc-accent); }
.fc-card:hover .fc-card__icon { background: var(--fc-accent); color: #04211c; }
.fc-link-arrow { color: var(--fc-accent); }

/* ---- Badges ---- */
.fc-badge { background: rgba(255,255,255,.06); color: var(--fc-d-muted); border: 1px solid var(--fc-d-line); }
.fc-badge--accent { background: var(--fc-accent-soft); color: var(--fc-accent); border-color: transparent; }
.fc-badge--primary { background: rgba(26,122,255,.16); color: #7bb6ff; border-color: transparent; }

/* ---- Buttons (dark adaptations) ---- */
.fc-btn--accent { background: var(--fc-accent); color: #04211c; box-shadow: 0 8px 24px rgba(0,217,189,.25); }
.fc-btn--accent:hover { background: #25ecd2; color: #04211c; box-shadow: 0 12px 30px rgba(0,217,189,.38); }
.fc-btn--primary { background: var(--fc-primary-600); color: #fff; }
.fc-btn--primary:hover { background: var(--fc-primary-500); color: #fff; }
.fc-btn--ghost { background: rgba(255,255,255,.02); color: var(--fc-d-text); border-color: var(--fc-d-line-2); }
.fc-btn--ghost:hover { background: rgba(255,255,255,.06); color: #fff; border-color: var(--fc-accent); }
.fc-btn--on-dark { background: var(--fc-accent); color: #04211c; }
.fc-btn--on-dark:hover { background: #25ecd2; color: #04211c; }

/* ---- Inputs ---- */
.fc-input, .fc-textarea, .fc-root .form-control, .fc-root .form-select {
  background: var(--fc-d-surface); color: var(--fc-d-text);
  border: 1.5px solid var(--fc-d-line-2);
}
.fc-input::placeholder, .fc-textarea::placeholder, .fc-root .form-control::placeholder { color: var(--fc-d-faint); }
.fc-input:focus, .fc-textarea:focus, .fc-root .form-control:focus, .fc-root .form-select:focus {
  background: var(--fc-d-surface-2); color: var(--fc-d-text);
  border-color: var(--fc-accent); box-shadow: 0 0 0 3px var(--fc-accent-soft);
}
.fc-label { color: var(--fc-d-text); }

/* ---- Toast stays readable (keep light card) ---- */

/* ---- Utility chips (feature row, HakyOff hero stats) ---- */
.fc-feat { display: inline-flex; align-items: center; gap: 12px; }
.fc-feat__icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fc-accent-soft); color: var(--fc-accent); font-size: 1.05rem;
  border: 1px solid var(--fc-d-line);
}
.fc-feat__t { display: block; font-family: var(--fc-font-display); font-weight: 700; color: var(--fc-d-text); line-height: 1.15; }
.fc-feat__s { display: block; font-size: var(--fc-text-sm); color: var(--fc-d-muted); }

/* Divider line with accent tick */
.fc-rule { height: 1px; background: var(--fc-d-line); border: 0; margin: var(--fc-space-12) 0; }

/* Text helpers */
.fc-text-accent { color: var(--fc-accent) !important; }
.fc-text-muted-d { color: var(--fc-d-muted) !important; }

/* =====================================================================
   CURSOR FX  ·  lightweight immersive pointer glow + click ripples
   Enabled only on fine pointers (mouse). Pure transform/opacity = cheap.
   ===================================================================== */
.fc-cursor-on { --fc-cur-size: 26px; }

/* Soft glow that trails the cursor (the "envolvente" aura) */
.fc-cursor-aura {
  position: fixed; top: 0; left: 0; z-index: 4000; pointer-events: none;
  width: 280px; height: 280px; margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fc-glow, rgba(0,217,189,.30)) 0%, rgba(0,217,189,.10) 35%, transparent 68%);
  opacity: 0; mix-blend-mode: screen;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity .35s var(--fc-ease, ease);
  will-change: transform, opacity;
}
.fc-cursor-on .fc-cursor-aura { opacity: .55; }

/* Precise dot at the real cursor position */
.fc-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 4001; pointer-events: none;
  width: var(--fc-cur-size); height: var(--fc-cur-size);
  margin: calc(var(--fc-cur-size) / -2) 0 0 calc(var(--fc-cur-size) / -2);
  border-radius: 50%;
  border: 1.5px solid var(--fc-accent, #00d9bd);
  box-shadow: 0 0 12px rgba(0,217,189,.45);
  background: rgba(0,217,189,.06);
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: width .18s var(--fc-ease, ease), height .18s var(--fc-ease, ease),
              margin .18s var(--fc-ease, ease), opacity .25s ease,
              background-color .18s ease, border-color .18s ease;
  will-change: transform;
}
.fc-cursor-on .fc-cursor-dot { opacity: 1; }

/* Grow + fill when hovering something clickable */
.fc-cursor-dot.is-active {
  --fc-cur-size: 52px;
  background: rgba(0,217,189,.16);
  border-color: var(--fc-accent, #00d9bd);
  box-shadow: 0 0 22px rgba(0,217,189,.55);
}
.fc-cursor-on.fc-cursor-pressed .fc-cursor-dot { transform: translate3d(var(--fc-cx, -9999px), var(--fc-cy, -9999px), 0) scale(.8); }

/* Click ripple */
.fc-ripple {
  position: fixed; z-index: 3999; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--fc-accent, #00d9bd);
  background: rgba(0,217,189,.12);
  animation: fc-ripple-out .6s var(--fc-ease, ease) forwards;
}
@keyframes fc-ripple-out {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(7); }
}

/* Hide the native cursor only when the custom one is active (still show text I-beam on inputs) */
.fc-cursor-on, .fc-cursor-on a, .fc-cursor-on button,
.fc-cursor-on .fc-btn, .fc-cursor-on [role="button"],
.fc-cursor-on .nav-link, .fc-cursor-on label {
  cursor: none;
}
.fc-cursor-on input, .fc-cursor-on textarea, .fc-cursor-on select,
.fc-cursor-on [contenteditable] { cursor: auto; }

@media (prefers-reduced-motion: reduce) {
  .fc-cursor-aura, .fc-cursor-dot, .fc-ripple { display: none !important; }
}

/* =====================================================================
   LEGAL / LONG-FORM CONTENT  ·  dark themed document card
   Used by terms.php, privacy.php, cookies.php (overrides legacy inline
   white-box + #0066cc styles with !important so no markup churn needed).
   ===================================================================== */
.fc-legal {
  background: linear-gradient(180deg, var(--fc-d-surface), var(--fc-d-bg-2)) !important;
  color: var(--fc-d-muted) !important;
  border: 1px solid var(--fc-d-line);
  border-radius: var(--fc-radius-lg) !important;
  padding: clamp(24px, 4vw, 48px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 56px rgba(0,0,0,.45) !important;
  line-height: 1.8;
}
.fc-legal h2 {
  font-family: var(--fc-font-display);
  color: var(--fc-d-text) !important;
  font-size: var(--fc-text-xl) !important;
  margin: 34px 0 14px !important;
  padding-top: 18px;
  border-top: 1px solid var(--fc-d-line);
}
.fc-legal > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px !important; }
.fc-legal h3, .fc-legal h4 {
  color: var(--fc-accent) !important;
  font-size: var(--fc-text-lg);
  margin: 20px 0 10px !important;
  font-family: var(--fc-font-display);
}
.fc-legal p, .fc-legal li { color: var(--fc-d-muted) !important; }
.fc-legal strong { color: var(--fc-d-text); }
.fc-legal ul { padding-left: 1.25rem; }
.fc-legal li { margin-bottom: 6px; }
.fc-legal li::marker { color: var(--fc-accent); }
.fc-legal a { color: var(--fc-accent) !important; text-decoration: none; }
.fc-legal a:hover { text-decoration: underline; }