/*
 * IBN Accountants — Main Stylesheet
 * Structured, clean CSS extracted from index.html
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── CSS Variables ── */
:root {
  --primary-navy:    #0b1c30;
  --primary-blue:    #0040a1;
  --accent-sapphire: #0056d2;
  --neutral-slate:   #4a5468;
  --outline-silver:  #cbd5e1;
}

/* ── Base ── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--primary-navy);
  background-color: #f8f9ff;
}

.font-serif { font-family: 'Playfair Display', Georgia, serif; }
.font-mono  { font-family: 'JetBrains Mono', SFMono-Regular, monospace; }

::selection {
  background-color: #e0e7ff;
  color: var(--accent-sapphire);
}

/* ── Glass panel ── */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--outline-silver); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Range slider ── */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-sapphire);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background: var(--primary-blue);
}

/* ────────────────────────────────────────────
   VIEW / TAB SYSTEM
──────────────────────────────────────────── */
.view-section         { display: none; }
.view-section.active  { display: block; animation: fadeIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────
   LOADING SCREEN
──────────────────────────────────────────── */
#ibn-loader {
  position: fixed;
  inset: 0;
  background: var(--primary-navy);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#ibn-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.97); }
}

.loader-bar {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  background: linear-gradient(90deg, #0040a1, #0056d2, #60a5fa);
  border-radius: 99px;
  animation: loaderFill 1.8s ease-in-out forwards;
}
@keyframes loaderFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

/* ────────────────────────────────────────────
   SCROLL REVEAL ANIMATIONS
──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ────────────────────────────────────────────
   ANIMATIONS
──────────────────────────────────────────── */
@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.float-card       { animation: floatCard 4s ease-in-out infinite; }
.float-card-delay { animation: floatCard 4s ease-in-out 1s infinite; }

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-animate { animation: countUp 0.5s ease forwards; }

/* ────────────────────────────────────────────
   SERVICE IMAGE CARDS (hover zoom)
──────────────────────────────────────────── */
.service-img-wrap { overflow: hidden; border-radius: 0.75rem; }
.service-img-wrap img { transition: transform 0.5s ease; }
.service-img-wrap:hover img { transform: scale(1.04); }

/* ────────────────────────────────────────────
   NAVIGATION ACTIVE LINE
──────────────────────────────────────────── */
.nav-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-blue);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* ────────────────────────────────────────────
   MOBILE MENU
──────────────────────────────────────────── */
#mobile-menu {
  border-top: 1px solid #e5e7eb;
}

/* ────────────────────────────────────────────
   HERO GRID OVERLAY
──────────────────────────────────────────── */
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, #fff 59px, #fff 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, #fff 59px, #fff 60px);
}

/* ────────────────────────────────────────────
   FAQ ACCORDION ICON ROTATION
──────────────────────────────────────────── */
.faq-icon { transition: transform 0.3s ease; }
.faq-icon.rotate-180 { transform: rotate(180deg); }

/* ────────────────────────────────────────────
   SPINNER (form submit loading)
──────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ────────────────────────────────────────────
   RESPONSIVE — ensure hero text readable on mobile
──────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-h1 { font-size: 2.5rem; line-height: 1.1; }
}