:root{
    --red-600:#05445e;
    --red-700:#189ab4;
    --gray-900:#0f172a;
    --gray-700:#334155;
    --gray-600:#475569;
    --gray-500:#64748b;
    --gray-200:#e5e7eb;
    --gray-100:#f1f5f9;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  }
  *{box-sizing:border-box}
  body{
    margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
    color:var(--gray-900); background:#fff; line-height:1.55;
  }
  a{color:var(--red-700); text-decoration:none}
  a:hover{text-decoration:underline}
  .container{max-width:1120px; margin:auto; padding:0 1.25rem}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
  .brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
  .brand-badge{width:34px; height:34px; border-radius:10px; background:var(--red-600)}
  .links{display:none; gap:1.25rem}
  .actions{display:flex; gap:.6rem}
  .btn{border:1px solid var(--gray-200); padding:.6rem .9rem; border-radius:12px; font-weight:600; background:#fff}
  .btn:hover{background:#f8fafc}
  .btn-primary{background:var(--red-600); color:#fff; border-color:transparent; box-shadow:var(--shadow-sm)}
  .btn-primary:hover{background:var(--red-700)}

  /* Hero */
  .hero{
    background: linear-gradient(#ffffff, #fff5f5);
    border-bottom:1px solid var(--gray-200);
    padding-left: 1.25rem;
      padding-right: 1.25rem;
  }
  .hero-grid{
    display:grid; grid-template-columns:1fr; gap:2rem; padding:3rem 0 2.5rem;
  }
  .hero h1{font-size:clamp(2rem, 3.6vw, 3.2rem); line-height:1.15; margin:0}
  .hero .accent{color:var(--red-600)}
  .hero h2{font-size:22px;color:var(--red-600)}
  .hero p{color:var(--gray-700); font-size:1.05rem; max-width:38ch}
  .hero-cta{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
  .trust{display:flex; flex-wrap:wrap; gap:1rem; color:var(--gray-600); font-size:.95rem; margin-top:.8rem}
  .hero-card{
    border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-md)
  }
  .hero-img{display:block; width:100%; height:420px; object-fit:cover}
  .hero-tag{position:absolute; bottom:10px; right:10px; background:rgba(255,255,255,.92); padding:.45rem .7rem; border-radius:10px; font-weight:700; color:var(--red-700); border:1px solid var(--gray-200)}

  /* Steps */
  .steps{padding:0 0 2.5rem}
  .step-grid{display:grid; gap:1rem; grid-template-columns:1fr; }
  .step{border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1.1rem; background:#fff; box-shadow:var(--shadow-sm)}
  .step .icon{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#fee2e2; color:var(--red-600); margin-bottom:.5rem}
  .step h3{margin:.1rem 0 .2rem; font-size:1.05rem}

  /* AI section */
  .ai{border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); padding:3rem 0}
  .ai-grid{display:grid; grid-template-columns:1fr; gap:2rem}
  .ai h2{font-size:clamp(1.7rem, 3vw, 2.2rem); margin:0}
  .ai ul{margin:1rem 0 0; padding-left:1.2rem; color:var(--gray-700)}
  .ai-demo{border:1px solid var(--gray-200); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-md); padding:1rem}
  .demo-grid{display:grid; grid-template-columns:1fr; gap:1rem}
  .panel{background:#f8fafc; border:1px solid var(--gray-200); border-radius:14px; padding:.7rem}
  .panel h4{margin:.2rem 0 .4rem; color:var(--gray-600); font-size:.9rem}
  .panel .cardimg{width:100%; height:260px; object-fit:cover; border-radius:10px}
  .panel .after{background:#fff; border-radius:10px; padding:1rem; height:260px; overflow:auto; box-shadow: inset 0 0 0 1px var(--gray-100)}
  .demo-cta{display:flex; align-items:center; justify-content:space-between; background:#f8fafc; border:1px solid var(--gray-200); border-radius:12px; padding:.6rem .8rem; margin-top:.8rem}

  /* Examples */
  .examples{background:linear-gradient(#fff, #f6f7fb); border-bottom:1px solid var(--gray-200); padding:3rem 0}
  .ex-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem}
  .ex-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem}
  .ex{border:1px solid var(--gray-200); background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
  .ex img{display:block; width:100%; height:340px; object-fit:cover}
  .ex figcaption{padding:.8rem; font-size:.95rem; color:var(--gray-700)}
  .ex b{display:block; color:#111827}

  /* Pricing */
  .pricing{padding:3rem 0; border-bottom:1px solid var(--gray-200)}
  .pricing h2{text-align:center; margin:0}
  .pricing p{max-width:62ch; margin:.5rem auto 0; text-align:center; color:var(--gray-700)}
  .price-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.2rem}
  .price{border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1rem; background:#fff}
  .price.featured{outline:2px solid var(--red-600)}
  .price h3{margin:.2rem 0}
  .price .meta{color:var(--gray-600); font-weight:600}
  .price .num{color:var(--red-700); font-size:1.3rem; font-weight:800; margin:.3rem 0}
  .price ul{margin:.5rem 0 0; padding-left:1.2rem; color:var(--gray-700)}
  .estimator{margin:1.2rem auto 0; max-width:720px; background:#f8fafc; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:1rem}
  .estimator .row{display:grid; grid-template-columns:1fr; gap:.6rem}
  .estimator input, .estimator select{padding:.6rem .7rem; border:1px solid var(--gray-200); border-radius:10px; font:inherit}

  /* Testimonials */
  .testimonials{background:linear-gradient(#fff5f5,#ffffff); border-bottom:1px solid var(--gray-200); padding:3rem 0}
  .t-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem}
  .t{border:1px solid var(--gray-200); background:#fff; border-radius:var(--radius-lg); padding:1rem; box-shadow:var(--shadow-sm)}
  .t em{color:var(--gray-700)}

  /* FAQ */
  .faq{padding:3rem 0; border-bottom:1px solid var(--gray-200)}
  .faq h2{margin:0}
  .faq-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem}
  details{border:1px solid var(--gray-200); border-radius:12px; padding:.8rem; background:#fff}
  summary{cursor:pointer; font-weight:700}

  /* Final CTA */
  .final-cta{background:linear-gradient(90deg, var(--red-600), var(--red-700)); color:#fff; text-align:center; padding:2.4rem 0}
  .final-cta p{opacity:.9}

  /* Footer */
  .site-footer{padding:2rem 0}
  .foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
  .foot-col ul{padding-left:1rem; margin:.6rem 0 0}
  .copyright{display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:1px solid var(--gray-200); padding-top:1rem; margin-top:1rem; color:var(--gray-600); font-size:.95rem}

  /* Responsive */
  @media (min-width: 760px){
    .links{display:flex}
    .hero-grid{grid-template-columns:1.1fr .9fr; align-items:center}
    .step-grid{grid-template-columns:repeat(3,1fr)}
    .ai-grid{grid-template-columns:1.05fr .95fr}
    .demo-grid{grid-template-columns:1fr 1fr}
    .ex-grid{grid-template-columns:repeat(3,1fr)}
    .price-grid{grid-template-columns:repeat(3,1fr)}
    .estimator .row{grid-template-columns:2fr 1fr 1fr auto}
    .t-grid{grid-template-columns:repeat(3,1fr)}
    .faq-grid{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:repeat(4,1fr)}

  }
 

 
.menu-toggle {
display: block;
cursor: pointer;
background: none;
border: none;
font-size: 3.9rem;
color: var(--red-700);
}


.links.mobile {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
right: 1.25rem;
background: white;
border: 1px solid var(--gray-200);
border-radius: 12px;
box-shadow: var(--shadow-md);
padding: 1rem;
z-index: 100;
}

.carousel-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.8s ease-in-out;
  width: 100%;
}

.carousel-track a {
  flex: 0 0 100%;
  display: block;
  text-decoration: none;
}

.carousel-track img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.logo {
	padding:1px 0 0 1px;
	float:left;
}
	.logo a {
		display:block; 
		text-indent:-9999px;
		background:url(/images/FCB_logo-horizontal-hires-75.png?1) no-repeat 0 0;
		width:290px;
		height:75px;
		z-index:20;
}

@media (min-width: 760px) {
.menu-toggle {
display: none;
}
.links.mobile {
display: none !important;
}
}

.mobile-only {
  display: none;
}

@media (max-width: 759px) {
  .carousel-wrapper:not(.mobile-only) {
    display: none !important;
  }
  .mobile-only {
    display: block;
  }
}