:root{
  --fl-font: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', sans-serif;
  --fl-bg: #ffffff;
  --fl-text: #111111;
  --fl-muted: #6b7280;
  --fl-primary: #F1572D;
  --fl-secondary: #3C8DBC;
  --fl-bg-accent: #EFF0F3;
  --fl-border: #e5e7eb;
  --fl-radius: 14px;
  --fl-shadow: 0 10px 24px rgba(0,0,0,.06);
}

html, body{ font-family: var(--fl-font); color: var(--fl-text); background: var(--fl-bg); line-height: 1.6; font-weight: 400; font-size: 16px; }

.fl-container{ width: min(1100px, calc(100% - 2rem)); margin-inline: auto; }

.fl-topbar{ background: var(--fl-bg-accent); border-bottom: 1px solid var(--fl-border); font-size: .925rem; }
.fl-topbar .fl-container{ display:flex; align-items:center; justify-content:space-between; padding:.35rem 0; }
/* Right side of the topbar (buttons/links) */
.fl-topbar-right{
  margin-left: auto;        /* pushes it to the right if needed */
  display: flex;
  align-items: center;
  gap: .5rem;               /* space between items */
}

/* Optional: tighter on small screens */
@media (max-width: 600px){
  .fl-topbar-right{ gap: .35rem; }
  .fl-topbar-right .fl-cta{ padding: .35rem .6rem; font-size: .9rem; }
}

.fl-utility-nav ul{ display:flex; gap:1rem; margin:0; padding:0; list-style:none; }
.fl-utility-nav a{ text-decoration:none; color: var(--fl-muted); }
.fl-cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem; border-radius: 999px; text-decoration:none; background: var(--fl-secondary); color: #fff; font-weight: 500; }
.fl-cta.outline{ background: transparent; color: var(--fl-secondary); border: 2px solid var(--fl-secondary); }

.fl-header-main{ padding:.85rem 0; }
.fl-header-main .fl-container{ display:flex; align-items:center; gap:1rem; }
.fl-branding{ display:flex; flex-direction:column; gap:.2rem; }
.fl-site-title{ font-size:1.35rem; font-weight:600; color: var(--fl-text); text-decoration:none; }
.fl-tagline{ margin:0; color: var(--fl-muted); font-size:.95rem; }

.fl-primary-nav{ margin-left:auto; }
.fl-primary-nav ul{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.fl-primary-nav a{ text-decoration:none; padding:.6rem .8rem; border-radius:10px; color: var(--fl-text); }
.fl-primary-nav a:hover{ background: var(--fl-bg-accent); }
.fl-menu-toggle{ display:none; background:none; border:0; margin-left:auto; }
.fl-burger, .fl-burger::before, .fl-burger::after{ display:block; width:26px; height:2px; background: var(--fl-text); position:relative; border-radius:1px; }
.fl-burger::before, .fl-burger::after{ content:""; position:absolute; left:0; }
.fl-burger::before{ top:-7px; } .fl-burger::after{ top:7px; }

@media (max-width: 960px){
  .fl-primary-nav{ display:none; }
  .fl-menu-toggle{ display:inline-flex; }
}

.fl-hero{ background: linear-gradient(180deg, var(--fl-bg), #fafafa 60%, var(--fl-bg-accent)); padding: clamp(2rem, 5vw, 4rem) 0; }
.fl-hero .fl-container{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
.fl-hero-copy h1{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.15; margin:.25rem 0 .5rem; }
.fl-hero-copy p{ font-size:1.125rem; color: var(--fl-muted); max-width: 58ch; }
.fl-hero-ctas{ display:flex; gap:.75rem; margin-top:1.25rem; }
.fl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.1rem; border-radius: 14px; text-decoration:none; background: var(--fl-primary); color:#fff; font-weight:600; box-shadow: var(--fl-shadow); }
.fl-btn.outline{ background:transparent; color: var(--fl-primary); border:2px solid var(--fl-primary); box-shadow:none; }

.fl-hero-art{ text-align:right; }
.fl-dashboard-shot{ width:100%; height:auto; border-radius: 16px; box-shadow: var(--fl-shadow); border:1px solid var(--fl-border); background:#fff; }
.fl-shot-caption{ display:block; text-align:right; color: var(--fl-muted); margin-top:.35rem; font-size:.85rem; }

@media (max-width: 960px){
  .fl-hero .fl-container{ grid-template-columns: 1fr; }
  .fl-hero-art{ order:-1; text-align:left; }
}

.fl-features{ padding: 3rem 0; }
.fl-grid{ display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr); }
.fl-card{ background:#fff; border:1px solid var(--fl-border); border-radius: var(--fl-radius); padding:1.25rem; box-shadow: var(--fl-shadow); }
.fl-card h3{ margin-top:.25rem; }

@media (max-width: 960px){
  .fl-grid{ grid-template-columns: 1fr; }
}

.fl-metrics{ background: var(--fl-bg-accent); padding: 1.75rem 0; border-top:1px solid var(--fl-border); border-bottom:1px solid var(--fl-border); }
.fl-metric-list{ display:flex; gap:2rem; list-style:none; justify-content:center; margin:0; padding:0; }
.fl-metric-list strong{ font-size:1.6rem; display:block; color: var(--fl-secondary); }

.fl-cta-band{ padding:2.5rem 0; text-align:center; }
.fl-cta-band p{ color: var(--fl-muted); }

.fl-page{ padding: 2rem 0; }
.fl-page-header{ margin-bottom: 1rem; border-bottom: 1px solid var(--fl-border); padding-bottom:.75rem; }
.fl-page-title{ margin:0; }

.fl-site-footer{ margin-top: 2rem; background:#0f172a; color:#e5e7eb; }
.fl-footer-widgets{ display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr); padding: 2rem 0; }
.fl-site-footer a{ color:#fff; text-decoration: none; }
.fl-footer-bottom{ border-top:1px solid rgba(255,255,255,.15); }
.fl-footer-bottom .fl-container{ display:flex; align-items:center; justify-content:space-between; padding: 1rem 0; }
.fl-footer-nav ul{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }

@media (max-width: 960px){
  .fl-footer-widgets{ grid-template-columns: 1fr; }
}

.aligncenter{ margin-inline:auto; }
.screen-reader-text{ position:absolute; left:-9999px; }

/* Cap the logo width to 240px while keeping aspect ratio */
.fl-branding img.custom-logo,
.site-logo img {
  max-width: 240px !important;
  height: auto;
  display: block;        /* keeps layout tidy */
}

/* Keep header in one row */
.fl-header-main .fl-container{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap: nowrap;     /* don't wrap to a second line */
}

/* Brand block (logo/title) stays compact */
.fl-branding{
  flex: 0 0 auto;
}

/* Nav grows to fill the remaining space and stays on one line */
.fl-primary-nav{
  margin-left:auto;
  flex: 1 1 auto;
  min-width: 0;          /* prevents weird overflow in flex items */
}
.fl-primary-nav ul{
  display:flex;
  flex-wrap: nowrap;     /* keep items on one line */
  justify-content:flex-end;
  gap:.75rem;            /* tighten spacing if needed */
}
.fl-primary-nav li{
  display:flex;          /* keeps anchors vertically centered */
}
.fl-primary-nav a{
  white-space: nowrap;   /* prevent line breaks in long labels */
  padding:.55rem .65rem; /* slightly tighter so more items fit */
}

/* Optional: keep the tagline from pushing the row taller on desktop */
@media (min-width: 960px){
  .fl-tagline{ display:none; }
}

/* Mobile keeps the existing toggle behavior */
@media (max-width: 960px){
  .fl-primary-nav{ display:none; }  /* shown by the toggle JS */
}