/* ============================================
   THEME: Fik
   Clean SaaS precision — Fikri Studio inspired
   Electric blue primary, slate neutrals, crisp geometry
   Fonts: Sora (geometric tech-forward display + body)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

:root[data-theme="fik"] {
  /* Fonts — Sora: geometric, clean, tech-forward */
  --font-serif: 'Sora', system-ui, sans-serif;
  --font-sans:  'Sora', system-ui, sans-serif;

  /* Core palette — Fikri design tokens */
  --color-primary:       #2563EB;
  --color-primary-dark:  #1D4ED8;
  --color-primary-light: #DBEAFE;

  --color-bg:            #F8FAFC;
  --color-bg-alt:        #F1F5F9;
  --color-bg-light:      #E2E8F0;
  --color-bg-card:       #FFFFFF;

  --color-text:          #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:    rgba(15, 23, 42, 0.45);
  --color-text-subtle:   rgba(15, 23, 42, 0.28);

  --color-accent:        #2563EB;
  --color-accent-hover:  #1D4ED8;
  --color-highlight:     #3B82F6;

  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-divider:       rgba(226, 232, 240, 0.8);

  /* Nav — white, clean, ruled by a crisp bottom border */
  --nav-bg: rgba(255, 255, 255, 0.96);
  --nav-height: 4.25rem;

  /* Footer — deep slate, professional close */
  --footer-bg: #0F172A;
  --footer-text: rgba(241, 245, 249, 0.5);
  --footer-text-strong: rgba(241, 245, 249, 0.85);
  --footer-border: rgba(241, 245, 249, 0.08);

  /* Buttons */
  --btn-primary-bg:      #2563EB;
  --btn-primary-text:    #FFFFFF;
  --btn-secondary-border: #CBD5E1;

  /* Layout — tighter radii, sharper edges than pill themes */
  --site-margin: clamp(1.5rem, 5vw, 5rem);
  --max-width: 1280px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 8px;   /* Fik uses rectangular buttons, not pills */

  --transition-fast: 150ms ease;
  --transition-med:  250ms ease;
  --transition-slow: 350ms ease;

  --logo-filter: none;
  --holly-bg: #0F172A;
}

/* ---- Nav: clean white with sharp bottom rule ---- */
:root[data-theme="fik"] nav {
  border-bottom-color: #E2E8F0;
  backdrop-filter: blur(12px);
}

:root[data-theme="fik"] .nav-links a {
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
}
:root[data-theme="fik"] .nav-links a:hover {
  color: #2563EB;
  opacity: 1;
}

:root[data-theme="fik"] nav .btn-secondary {
  color: #475569;
  border-color: #CBD5E1;
  background: transparent;
  font-size: 0.875rem;
}
:root[data-theme="fik"] nav .btn-secondary:hover {
  color: #2563EB;
  border-color: #93C5FD;
  opacity: 1;
}

:root[data-theme="fik"] nav .btn-primary {
  background: #2563EB;
  color: #ffffff;
  font-size: 0.875rem;
}
:root[data-theme="fik"] nav .btn-primary:hover {
  background: #1D4ED8;
  opacity: 1;
}

:root[data-theme="fik"] .theme-switcher-btn {
  color: #64748B;
  background: #F8FAFC;
  border-color: #E2E8F0;
  font-size: 0.8rem;
}
:root[data-theme="fik"] .theme-switcher-btn:hover {
  color: #2563EB;
  border-color: #93C5FD;
}

/* ---- Typography ---- */
:root[data-theme="fik"] h1,
:root[data-theme="fik"] h2,
:root[data-theme="fik"] h3 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0F172A;
}

:root[data-theme="fik"] h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  font-weight: 800;
}

:root[data-theme="fik"] h2 {
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.12;
}

:root[data-theme="fik"] h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root[data-theme="fik"] h4 {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94A3B8;
}

:root[data-theme="fik"] p {
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* em in headings → electric blue */
:root[data-theme="fik"] em {
  font-style: normal;
  color: #2563EB;
}

/* Section eyebrows */
:root[data-theme="fik"] .section-eyebrow {
  color: #2563EB;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* ---- Buttons — sharp rectangle, SaaS-native ---- */
:root[data-theme="fik"] .btn {
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root[data-theme="fik"] .btn-primary {
  background: #2563EB;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 0 0 0 rgba(37, 99, 235, 0);
  transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
:root[data-theme="fik"] .btn-primary:hover {
  background: #1D4ED8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
  opacity: 1;
}

:root[data-theme="fik"] .btn-secondary {
  color: #374151;
  border-color: #D1D5DB;
  border-radius: 8px;
  background: #FFFFFF;
}
:root[data-theme="fik"] .btn-secondary:hover {
  border-color: #93C5FD;
  color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  opacity: 1;
}

/* ---- Hero ---- */
:root[data-theme="fik"] .hero {
  background: #F8FAFC;
  position: relative;
}

/* Subtle grid dot pattern for hero */
:root[data-theme="fik"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.45;
  pointer-events: none;
}

:root[data-theme="fik"] .hero-kicker {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
}

:root[data-theme="fik"] .hero-kicker-dot {
  background: #2563EB;
}

:root[data-theme="fik"] .hero-stat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

:root[data-theme="fik"] .hero-stat-card.accent-card {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

:root[data-theme="fik"] .hero-stat-value {
  color: #0F172A;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

:root[data-theme="fik"] .hero-stat-label {
  color: #64748B;
  font-size: 0.8rem;
}

/* ---- Trusted strip ---- */
:root[data-theme="fik"] .trusted-strip {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

:root[data-theme="fik"] .trusted-label {
  color: #94A3B8;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Cards: clean white, crisp bordered ---- */
:root[data-theme="fik"] .feature-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
:root[data-theme="fik"] .feature-item:hover {
  border-color: #93C5FD;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08), 0 0 0 1px #DBEAFE;
  transform: translateY(-2px);
}

:root[data-theme="fik"] .feature-item h3 {
  color: #0F172A;
}
:root[data-theme="fik"] .feature-item p {
  color: #64748B;
}

:root[data-theme="fik"] .acc-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
:root[data-theme="fik"] .acc-card:hover {
  border-color: #BFDBFE;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.07);
}

:root[data-theme="fik"] .acc-card h4 {
  color: #0F172A;
}
:root[data-theme="fik"] .acc-card p {
  color: #64748B;
}

:root[data-theme="fik"] .audience-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
:root[data-theme="fik"] .audience-card:hover {
  border-color: #93C5FD;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
  transform: translateY(-2px);
}

:root[data-theme="fik"] .audience-card h3 {
  color: #0F172A;
}
:root[data-theme="fik"] .audience-card p {
  color: #64748B;
}

/* ---- Problem section ---- */
:root[data-theme="fik"] .problem-num {
  color: #2563EB;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.04em;
  opacity: 0.25;
}

:root[data-theme="fik"] .problem-item h3 {
  color: #0F172A;
}

:root[data-theme="fik"] .problem-item p {
  color: #64748B;
}

/* ---- ACC list ---- */
:root[data-theme="fik"] .acc-list li::before {
  color: #2563EB;
}

/* ---- Audience tags — badge style ---- */
:root[data-theme="fik"] .audience-tag {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 999px;
}

/* ---- Integration pills ---- */
:root[data-theme="fik"] .integration-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #374151;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
:root[data-theme="fik"] .integration-pill:hover {
  border-color: #BFDBFE;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

:root[data-theme="fik"] .integration-group-label {
  color: #94A3B8;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Pricing card ---- */
:root[data-theme="fik"] .pricing-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}

:root[data-theme="fik"] .pricing-amount {
  color: #0F172A;
  font-weight: 800;
  letter-spacing: -0.04em;
}

:root[data-theme="fik"] .pricing-amount sup {
  color: #2563EB;
}

:root[data-theme="fik"] .pricing-period {
  color: #64748B;
  font-size: 0.85rem;
}

:root[data-theme="fik"] .pricing-divider {
  border-color: #E2E8F0;
}

:root[data-theme="fik"] .pricing-referral {
  color: #0F172A;
}

:root[data-theme="fik"] .pricing-note {
  color: #64748B;
}

:root[data-theme="fik"] .pricing-includes li::before {
  color: #2563EB;
}

:root[data-theme="fik"] .pricing-enterprise {
  color: #94A3B8;
  font-size: 0.8rem;
}

/* ---- Holly / CTA dark section ---- */
:root[data-theme="fik"] .holly-section {
  background: #0F172A;
  position: relative;
  overflow: hidden;
}

/* Subtle blue glow in the CTA section */
:root[data-theme="fik"] .holly-section::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(37, 99, 235, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

:root[data-theme="fik"] .holly-section h2 {
  color: #F8FAFC;
  position: relative;
  z-index: 1;
}

:root[data-theme="fik"] .holly-section .lead {
  color: rgba(241, 245, 249, 0.7);
  position: relative;
  z-index: 1;
}

:root[data-theme="fik"] .holly-badge {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(37, 99, 235, 0.4);
  color: #93C5FD;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

:root[data-theme="fik"] .holly-form {
  position: relative;
  z-index: 1;
}

:root[data-theme="fik"] .holly-form input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #F8FAFC;
  border-radius: 8px;
}

:root[data-theme="fik"] .holly-form input::placeholder {
  color: rgba(241, 245, 249, 0.4);
}

:root[data-theme="fik"] .holly-form input:focus {
  border-color: #3B82F6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

:root[data-theme="fik"] .holly-form button {
  background: #2563EB;
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
}

:root[data-theme="fik"] .holly-form button:hover {
  background: #1D4ED8;
  opacity: 1;
}

/* ---- Stat cards ---- */
:root[data-theme="fik"] .stat-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="fik"] .stat-value {
  color: #60A5FA;
}

:root[data-theme="fik"] .stat-label {
  color: rgba(241, 245, 249, 0.55);
}

/* ---- Feature item icons ---- */
:root[data-theme="fik"] .feature-item-icon,
:root[data-theme="fik"] .acc-card-icon,
:root[data-theme="fik"] .audience-card-icon {
  color: #2563EB;
  background: #EFF6FF;
  border-radius: 8px;
  padding: 0.5rem;
  display: inline-flex;
}

/* ---- Problem card variant ---- */
:root[data-theme="fik"] .problem-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root[data-theme="fik"] .problem-card h3 {
  color: #0F172A;
}
:root[data-theme="fik"] .problem-card p {
  color: #64748B;
}

/* ---- Section alt — barely there tint ---- */
:root[data-theme="fik"] section.alt {
  background: #F1F5F9;
}

/* ---- Logo marquee — on white strip ---- */
:root[data-theme="fik"] .logo-marquee-item img {
  filter: grayscale(1) opacity(0.55);
  transition: filter 250ms ease;
}
:root[data-theme="fik"] .logo-marquee-item:hover img {
  filter: grayscale(0) opacity(1);
}
/* Hemisphere Health stays blue on hover */
:root[data-theme="fik"] .logo-marquee-item:hover img.logo-hemisphere {
  filter: none;
}