/* =============================================================================
   Fervonix — style.css
   Plain CSS (no build step). Layers a custom brand theme on top of Bootstrap 5
   (loaded via CDN with data-bs-theme="dark"). Design tokens live in :root.
   Sections:  1 tokens · 2 base · 3 animated background · 4 navbar · 5 hero
              6 sections/helpers · 7 components · 8 forms · 9 footer · 10 motion
              11 responsive
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
  --fx-blue: #3B82F6;
  --fx-blue-600: #2563EB;
  --fx-blue-300: #93C5FD;
  --fx-cyan: #22D3EE;
  --fx-cyan-300: #67E8F9;
  --fx-teal: #2DD4BF;       /* nature/organic accent */
  --fx-green: #34D399;      /* aurora green */

  --fx-navy-900: #0A0E27;
  --fx-navy-800: #0F172A;
  --fx-navy-700: #131B33;
  --fx-navy-600: #1C2747;

  --fx-white: #FFFFFF;
  --fx-text: #E2E8F0;
  --fx-text-soft: #CBD5E1;
  --fx-muted: #94A3B8;
  --fx-border: rgba(148, 163, 184, 0.14);
  --fx-border-lit: rgba(59, 130, 246, 0.45);

  --fx-light-bg: #F8FAFC;
  --fx-ink: #0B1220;

  --fx-grad-blue-cyan: linear-gradient(120deg, var(--fx-cyan) 0%, var(--fx-blue) 55%, var(--fx-blue-600) 100%);
  --fx-grad-text: linear-gradient(100deg, var(--fx-cyan-300) 0%, var(--fx-blue) 45%, var(--fx-blue-300) 100%);
  --fx-grad-nature: linear-gradient(110deg, var(--fx-green) 0%, var(--fx-teal) 35%, var(--fx-cyan) 70%, var(--fx-blue) 100%);

  --fx-font-ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  --fx-shadow-soft: 0 18px 48px -24px rgba(2, 6, 23, 0.75);
  --fx-shadow-glow: 0 0 0 1px var(--fx-border-lit), 0 22px 60px -28px rgba(59, 130, 246, 0.55);

  /* Bootstrap overrides (CDN theme reads these) */
  --bs-primary: #3B82F6;
  --bs-primary-rgb: 59, 130, 246;
  --bs-body-bg: #0A0E27;
  --bs-body-color: #E2E8F0;
  --bs-body-font-family: var(--fx-font-body);
  --bs-border-color: rgba(148, 163, 184, 0.14);
  --bs-link-color-rgb: 147, 197, 253;
  --bs-link-hover-color-rgb: 34, 211, 238;
  scroll-behavior: smooth;
}

/* ---- 2. Base ------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--fx-navy-600) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--fx-navy-600); border-radius: 10px; border: 2px solid var(--fx-navy-900); }
::-webkit-scrollbar-thumb:hover { background: #28365C; }
::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }

/* html paints the base color; body is transparent so the fixed animated
   .bg-stage (z-index -1) shows through the whole site. */
html { background-color: var(--fx-navy-900); }
body {
  font-family: var(--fx-font-body);
  background-color: transparent;
  color: var(--fx-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--fx-font-ui); font-weight: 600; color: var(--fx-white); letter-spacing: -0.02em; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--fx-font-ui); font-weight: 700; letter-spacing: -0.025em; }
a { text-decoration: none; }
.lead { color: var(--fx-text-soft); }
.text-mono { font-family: var(--fx-font-mono); }
.text-muted-2 { color: var(--fx-muted) !important; }

.text-gradient {
  background: var(--fx-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-nature {
  background: var(--fx-grad-nature);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--fx-font-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fx-blue-300);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-blue)); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; }

/* Section with its own background image (via bg_style()); overlay keeps text legible */
.section-bg { position: relative; background-repeat: no-repeat; }
.section-bg > .container { position: relative; z-index: 2; }

.bg-navy-800 { background-color: rgba(15, 23, 42, 0.72) !important; }
.bg-panel { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); }

.link-arrow {
  font-family: var(--fx-font-ui); font-weight: 600; color: var(--fx-blue-300);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap 0.2s ease, color 0.2s ease;
}
.link-arrow:hover { gap: 0.7rem; color: var(--fx-cyan); }

/* ---- 3. Animated nature/aurora background -------------------------------- */
.bg-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% -10%, #10183a 0%, var(--fx-navy-900) 55%); }
#bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Soft drifting aurora ribbons (northern-lights vibe = nature + futuristic) */
.aurora {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
  mix-blend-mode: screen; will-change: transform;
}
.aurora-1 { width: 60vw; height: 60vw; top: -18%; left: -10%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.55), transparent 62%);
  animation: aurora-drift-a 26s ease-in-out infinite; }
.aurora-2 { width: 55vw; height: 55vw; top: 5%; right: -12%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.5), transparent 62%);
  animation: aurora-drift-b 32s ease-in-out infinite; }
.aurora-3 { width: 70vw; height: 70vw; bottom: -28%; left: 20%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.45), transparent 62%);
  animation: aurora-drift-c 38s ease-in-out infinite; }

.bg-vignette { position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 40%, rgba(10, 14, 39, 0.55) 100%); }

@keyframes aurora-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes aurora-drift-b { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-7vw, 9vh) scale(0.9); } }
@keyframes aurora-drift-c { 0%,100% { transform: translate(0,0) scale(0.95); } 50% { transform: translate(5vw, -7vh) scale(1.2); } }

/* ---- 4. Navbar ----------------------------------------------------------- */
.fx-navbar {
  background: rgba(10, 14, 39, 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; padding-block: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
.fx-navbar.is-scrolled { background: rgba(10, 14, 39, 0.92); border-bottom-color: var(--fx-border); box-shadow: 0 12px 40px -28px rgba(0,0,0,0.9); padding-block: 0.6rem; }
.fx-navbar .navbar-brand { font-family: var(--fx-font-ui); font-weight: 700; letter-spacing: -0.03em; font-size: 1.35rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fx-white); }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--fx-grad-blue-cyan); color: var(--fx-navy-900); box-shadow: 0 6px 18px -6px rgba(34, 211, 238, 0.6); flex: 0 0 auto; }
.brand-mark svg { width: 18px; height: 18px; }
.fx-navbar .nav-link { font-family: var(--fx-font-ui); font-weight: 500; font-size: 0.96rem; color: var(--fx-text-soft); position: relative; transition: color 0.2s ease; }
.fx-navbar .nav-link::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0.35rem; height: 2px; border-radius: 2px; background: var(--fx-grad-blue-cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.fx-navbar .nav-link:hover, .fx-navbar .nav-link:focus, .fx-navbar .nav-link.active { color: var(--fx-white); }
.fx-navbar .nav-link.active::after, .fx-navbar .nav-link:hover::after { transform: scaleX(1); }
.fx-navbar .navbar-toggler { border-color: var(--fx-border); padding: 0.4rem 0.6rem; }
.fx-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.4); }

@media (max-width: 991.98px) {
  .fx-navbar .navbar-collapse { margin-top: 0.9rem; padding: 0.5rem; background: var(--fx-navy-800); border: 1px solid var(--fx-border); border-radius: 1rem; }
  .fx-navbar .nav-link { padding-block: 0.7rem; }
  .fx-navbar .nav-link::after { left: 0.75rem; bottom: 0.45rem; }
  .fx-navbar .navbar-nav { gap: 0.1rem; }
  .fx-navbar .nav-cta { margin-top: 0.4rem; }
}

/* ---- 5. Hero & page headers --------------------------------------------- */
.hero { position: relative; padding-top: clamp(7rem, 14vw, 11rem); padding-bottom: clamp(4rem, 9vw, 7rem); overflow: hidden; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.04; font-weight: 700; }
.hero .typed-line { font-family: var(--fx-font-mono); color: var(--fx-cyan-300); }
.page-header { position: relative; padding-top: clamp(7rem, 13vw, 9.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); overflow: hidden; border-bottom: 1px solid var(--fx-border); }

/* ---- 6. Pills, tags, stats ---------------------------------------------- */
.fx-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--fx-border); background: rgba(15, 23, 42, 0.6); font-family: var(--fx-font-mono); font-size: 0.78rem; color: var(--fx-text-soft); }
.fx-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-teal); animation: pulse-glow 2.4s infinite; }
.tag { font-family: var(--fx-font-mono); font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--fx-border); color: var(--fx-blue-300); background: rgba(59, 130, 246, 0.08); display: inline-block; }

.stat .stat-num { font-family: var(--fx-font-ui); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; background: var(--fx-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stat .stat-label { color: var(--fx-muted); font-size: 0.92rem; margin-top: 0.35rem; }

/* ---- 7. Cards, terminal, marquee, CTA, accordion ------------------------ */
.fx-card { position: relative; height: 100%; background: linear-gradient(180deg, rgba(19,27,51,0.85), rgba(15,23,42,0.85)); border: 1px solid var(--fx-border); border-radius: 1rem; padding: 1.75rem; overflow: hidden; backdrop-filter: blur(6px); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.fx-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--fx-grad-blue-cyan); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; }
.fx-card:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-soft); border-color: transparent; }
.fx-card:hover::before { opacity: 1; }
.fx-card-featured { border-color: var(--fx-border-lit); box-shadow: var(--fx-shadow-glow); }
.fx-card-featured::before { opacity: 1; }
.fx-card h3, .fx-card h4, .fx-card h5 { margin-bottom: 0.5rem; }
.fx-card p { color: var(--fx-muted); font-size: 0.96rem; }

.fx-card-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 1.1rem; color: var(--fx-cyan); background: rgba(45, 212, 191, 0.1); border: 1px solid var(--fx-border); }
.step-card .step-no { font-family: var(--fx-font-mono); font-size: 0.85rem; color: var(--fx-blue-300); border: 1px solid var(--fx-border); border-radius: 8px; padding: 0.15rem 0.55rem; display: inline-block; }

.terminal { border-radius: 14px; background: rgba(7, 11, 28, 0.92); border: 1px solid var(--fx-border); box-shadow: var(--fx-shadow-soft); overflow: hidden; font-family: var(--fx-font-mono); }
.terminal-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: rgba(15, 23, 42, 0.9); border-bottom: 1px solid var(--fx-border); }
.terminal-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; }
.terminal-bar .term-title { margin-left: 0.6rem; color: var(--fx-muted); font-size: 0.8rem; }
.terminal-body { padding: 1.25rem 1.35rem; font-size: 0.9rem; line-height: 1.85; color: var(--fx-text-soft); overflow-x: auto; }
.terminal-body .c-key { color: #c792ea; } .terminal-body .c-fn { color: var(--fx-cyan-300); } .terminal-body .c-str { color: #9ece6a; }
.terminal-body .c-num { color: #ff9e64; } .terminal-body .c-com, .terminal-body .c-muted { color: var(--fx-muted); } .terminal-body .c-prompt { color: var(--fx-cyan); }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; align-items: center; animation: marquee 28s linear infinite; }
.marquee-item { color: var(--fx-muted); font-family: var(--fx-font-ui); font-weight: 600; font-size: 1.1rem; white-space: nowrap; opacity: 0.8; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.cta-band { position: relative; border-radius: 1.5rem; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(circle at 0% 0%, rgba(45,212,191,0.18), transparent 55%), radial-gradient(circle at 100% 100%, rgba(59,130,246,0.22), transparent 55%), rgba(19,27,51,0.85); border: 1px solid var(--fx-border); backdrop-filter: blur(6px); }

.accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--fx-text); --bs-accordion-border-color: var(--fx-border); --bs-accordion-btn-color: var(--fx-white); --bs-accordion-btn-bg: rgba(19,27,51,0.7); --bs-accordion-active-bg: rgba(59,130,246,0.1); --bs-accordion-active-color: var(--fx-white); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.25); --bs-accordion-border-radius: 0.85rem; }
.accordion-item { margin-bottom: 0.75rem; border-radius: 0.85rem; overflow: hidden; }
.accordion-button { font-family: var(--fx-font-ui); font-weight: 600; }

/* ---- 8. Buttons & forms -------------------------------------------------- */
.btn { letter-spacing: -0.01em; font-family: var(--fx-font-ui); font-weight: 600; border-radius: 0.6rem; padding: 0.7rem 1.5rem; }
.btn-sm { padding: 0.45rem 1rem; }
.btn-lg { padding: 0.85rem 1.9rem; }
.btn-primary { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; background: var(--fx-grad-blue-cyan); background-size: 160% auto; border: none; color: var(--fx-navy-900); font-weight: 700; box-shadow: 0 12px 30px -14px rgba(34,211,238,0.7); transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-position: right center; color: var(--fx-navy-900); transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(34,211,238,0.8); }
.btn-outline-light { border-color: var(--fx-border); color: var(--fx-text); }
.btn-outline-light:hover, .btn-outline-light:focus { background: rgba(59,130,246,0.1); border-color: var(--fx-border-lit); color: var(--fx-white); }

.form-control, .form-select { background-color: rgba(15,23,42,0.6); border-color: var(--fx-border); color: var(--fx-text); font-size: 0.97rem; padding: 0.8rem 1rem; }
.form-control::placeholder { color: var(--fx-muted); }
.form-control:focus, .form-select:focus { background-color: rgba(15,23,42,0.85); border-color: var(--fx-blue); box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.25); color: var(--fx-text); }
.form-label { color: var(--fx-text-soft); font-weight: 500; }
.field-note { font-size: 0.82rem; color: var(--fx-muted); }
.form-status { border-radius: 0.75rem; padding: 0.85rem 1rem; font-size: 0.92rem; display: none; }
.form-status.is-visible { display: block; animation: rise 0.4s ease; }
.form-status.is-ok { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.4); color: #86efac; }

.contact-aside { background: linear-gradient(180deg, rgba(19,27,51,0.85), rgba(15,23,42,0.85)); border: 1px solid var(--fx-border); border-radius: 1.25rem; padding: clamp(1.5rem, 4vw, 2.25rem); height: 100%; backdrop-filter: blur(6px); }
.contact-row { display: flex; gap: 1rem; align-items: flex-start; }
.contact-row + .contact-row { margin-top: 1.5rem; }
.contact-ico { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: rgba(45,212,191,0.1); border: 1px solid var(--fx-border); color: var(--fx-cyan); }

/* ---- 9. Footer ----------------------------------------------------------- */
.fx-footer { background: rgba(15,23,42,0.85); backdrop-filter: blur(8px); border-top: 1px solid var(--fx-border); padding-top: clamp(3rem, 6vw, 4.5rem); color: var(--fx-text-soft); position: relative; }
.fx-footer .footer-brand { font-family: var(--fx-font-ui); font-weight: 700; font-size: 1.3rem; color: var(--fx-white); display: inline-flex; align-items: center; gap: 0.5rem; }
.fx-footer h6 { font-family: var(--fx-font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fx-muted); }
.fx-footer a { color: var(--fx-text-soft); transition: color 0.2s ease; }
.fx-footer a:hover { color: var(--fx-cyan); }
.fx-footer .footer-bottom { border-top: 1px solid var(--fx-border); margin-top: clamp(2rem, 5vw, 3rem); padding-block: 1.4rem; font-size: 0.88rem; color: var(--fx-muted); }
.social-link { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--fx-border); border-radius: 10px; color: var(--fx-text-soft); transition: all 0.25s ease; }
.social-link:hover { border-color: var(--fx-border-lit); color: var(--fx-white); transform: translateY(-2px); }

/* Light legal section */
.section-light { background: var(--fx-light-bg); color: var(--fx-ink); }
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--fx-ink); }
.section-light p, .section-light li, .section-light .lead { color: #334155; }
.legal h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.legal p, .legal li { color: #475569; line-height: 1.8; }
.legal ol, .legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal-toc { position: sticky; top: 6.5rem; border-left: 2px solid #e2e8f0; padding-left: 1rem; }
.legal-toc a { color: #64748b; display: block; padding: 0.3rem 0; font-size: 0.92rem; }
.legal-toc a:hover { color: var(--fx-blue-600); }

/* ---- 10. Motion utilities ------------------------------------------------ */
.fx-float { animation: float 6s ease-in-out infinite; }
.text-gradient-animated { background: linear-gradient(100deg, var(--fx-green), var(--fx-cyan), var(--fx-blue-300), var(--fx-teal)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradient-pan 6s linear infinite alternate; }
.typed-caret::after { content: "▌"; margin-left: 2px; color: var(--fx-cyan); animation: blink 1s step-end infinite; }
/* Safety net: if JS is off OR AOS fails to load, never leave content hidden. */
.no-js [data-aos],
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.5); } 50% { box-shadow: 0 0 0 8px rgba(45,212,191,0); } }
@keyframes gradient-pan { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---- 11. Responsive & reduced motion ------------------------------------ */
@media (max-width: 767.98px) {
  .fx-card { padding: 1.4rem; }
  .cta-band { border-radius: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .aurora { animation: none; }
}