/* =========================================================================
   FinedgeTech — Stylesheet
   Works alongside Tailwind (CDN, utility classes) for layout; this file
   holds brand fonts, colors, animations and small custom components.
   ========================================================================= */

:root{
  --navy-900:#001738;
  --navy-800:#00224f;
  --navy-700:#002b66;
  --blue-600:#0055D4;
  --blue-700:#0047ba;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background:#fff;
  color:#0f172a;
}

.font-display{font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;}
.font-mono{font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;}

/* Page transitions (hash-routed SPA-style pages) */
.page-view{display:none;}
.page-view.active{display:block;}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.animate-fadeIn{animation:fadeIn .35s ease-out both;}

@keyframes pulseSoft{0%,100%{opacity:1;}50%{opacity:.45;}}
.animate-pulse-soft{animation:pulseSoft 2s ease-in-out infinite;}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#f1f5f9;}
::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:#60a5fa;}

/* Modal helpers */
.modal-overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;justify-content:center;
  padding:1rem;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff;border-radius:1.25rem;max-width:56rem;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,.4);
  border:1px solid #e2e8f0;
}

/* FAQ accordion */
.faq-item[open] > summary .faq-chevron{transform:rotate(180deg);}
summary{list-style:none;cursor:pointer;}
summary::-webkit-details-marker{display:none;}

/* Nav link active state helper */
.nav-tab.active{background:#0055D4;color:#fff;box-shadow:0 4px 14px rgba(0,85,212,.25);}
.nav-tab.active .nav-tab-icon{color:#fff;}
.nav-tab:not(.active){color:#334155;}
.nav-tab:not(.active):hover{background:rgba(255,255,255,.85);color:#1d4ed8;}

/* Grid background for hero */
.grid-bg{
  background-image:
    linear-gradient(to right, #0284c708 1px, transparent 1px),
    linear-gradient(to bottom, #0284c708 1px, transparent 1px);
  background-size:32px 32px;
}

/* Toast */
#toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(20px);
  z-index:70;background:var(--navy-800);border:1px solid #2563eb;color:#fff;
  padding:.75rem 1.25rem;border-radius:.85rem;font-size:.85rem;font-weight:500;
  box-shadow:0 20px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  display:flex;align-items:center;gap:.5rem;max-width:90vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Simple icon sizing fallback if inline svg used */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;}

/* Mobile nav drawer */
#mobile-nav-drawer{display:none;}
#mobile-nav-drawer.open{display:block;}

/* Loading spinner for form submit */
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Utility: line clamp */
.line-clamp-3{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.line-clamp-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}