/* ============================================================
   Light premium theme (homepage POC).
   Linked only on index.html. Brand: Ink #141418, Canvas #F6F5F1, Orange #FF5C39.
   ============================================================ */

/* Base surfaces */
body.body,
.pagewrapper { background-color: #F6F5F1 !important; }
body.body { color: #15151B; }

/* Headings + hero — bold, near-black (ViDesigns-style) */
.heading,
.section-heading,
.client-name,
.wbs-heading-h5,
.faq-question-label,
.heading-h3-contact-form { color: #141418 !important; }
.heading { font-weight: 700 !important; letter-spacing: -0.015em; }
.section-heading { font-weight: 700 !important; letter-spacing: -0.01em; }
.client-name, .wbs-heading-h5, .faq-question-label { font-weight: 700 !important; }

.leading-web-development-agency { color: #141418 !important; font-weight: 700 !important; }
.trusted-by-heading { color: #8A8A94 !important; }

.margin-bottom-24px,
.faq-answer-p,
.project-summery,
.text-span-contact-form,
.wbs-step-component p,
.client-information p { color: #55555F !important; }

.wbs-step-3-simple-number { color: #FF5C39 !important; }
.tool-name { color: #3A3A44 !important; }

/* Navbar */
.navbar-no-shadow,
.navbar-no-shadow-container { background-color: #F6F5F1 !important; }
.nav-link-2,
.navbar-brand .text-block { color: #15151B !important; }
.navbar-brand img { filter: none; } /* new logo is already dark */
.menu-button-2 { color: #15151B; }
/* The white button variant is invisible on light -> make it a visible
   outline ink pill everywhere (nav "Book a call", "Get Started", card CTAs). */
.button-primary.white {
  background-color: transparent !important;
  color: #141418 !important;
  border: 1.6px solid #141418 !important;
  transition: background-color .2s ease, color .2s ease;
}
.button-primary.white:hover {
  background-color: #141418 !important;
  color: #ffffff !important;
}

/* Trust logo strip: light-grey marks -> readable dark-grey on light bg */
.clients-image-three { filter: invert(0.82) grayscale(0.2); opacity: 0.9; }

/* Project / SaaS cards */
.client-block { background-color: #FFFFFF; border: 1px solid #E7E6E0; }
.platform {
  color: #3A3A44 !important;
  background-color: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.12) !important;
}
.site-link {
  color: #141418 !important;
  border: 1px solid rgba(20,20,24,0.22) !important;
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color .2s ease, color .2s ease;
}
.site-link:hover {
  background-color: transparent !important;
  border-color: #FF5C39 !important;
  color: #FF5C39 !important;
}

/* FAQ arrows (white) -> dark */
.faq-arrow { filter: brightness(0) saturate(100%); opacity: 0.55; }

/* Form inputs */
.ms-input,
.text-field-4,
.w-input,
.w-select,
textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #E0DFD9 !important;
  color: #15151B !important;
}

/* ---- Modern elevated blocks (depth instead of flat) ---- */

/* Process: aligned white cards, no dated stagger / dotted curve */
.wbs-step-3 { column-gap: 24px; row-gap: 24px; }
.wbs-step-3:before, .wbs-step-3:after { display: none !important; }
.wbs-step-3-item,
.wbs-step-3-item-top {
  margin-top: 0 !important;
  background: #FFFFFF;
  border: 1px solid #ECEBE4;
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.wbs-step-3-item:hover,
.wbs-step-3-item-top:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(20,20,30,0.10);
}
.wbs-step-3-simple-number { color: #FF5C39 !important; }

/* Tech stack: soft white chips with a hairline + hover, not hard borders */
.div-block-4 {
  background: #FFFFFF !important;
  border: 1px solid #ECEBE4 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.div-block-4:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20,20,30,0.08);
}

/* Testimonials: white cards (not flat grey) with shadow + hover */
.wbs-testimonial-5-item {
  background: #FFFFFF !important;
  border: 1px solid #ECEBE4;
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.wbs-testimonial-5-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(20,20,30,0.10);
}
.wbs-testimonial-5-content { color: #2A2A33 !important; }

/* FAQ: card blocks with a real surface + hairline + hover */
.faq-item-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #ECEBE4 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq-item-wrapper:hover { box-shadow: 0 8px 22px rgba(20,20,30,0.07); }

/* Project + SaaS cards: lift on hover */
.client-block {
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.client-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20,20,30,0.10);
}

/* Scroll-reveal entrance */
.reveal-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal-up.in { opacity: 1; transform: none; }

/* ---- Consistent, centred, dark page heroes across all templates ---- */
.hero-main-heading,
.hero-without-image .heading,
.ft-hero .section-heading {
  color: #141418 !important;
  font-weight: 700 !important;
  text-align: center;
  font-size: clamp(2.2rem, 6vw, 64px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em;
}
.hero-without-image .hero-wrapper-two,
.hero-without-image .home-hero,
.hero-without-image .pricing-container,
.ft-hero { text-align: center; }
.hero-without-image .hero-wrapper-two > *,
.hero-without-image .home-hero .margin-bottom-24px { margin-left: auto; margin-right: auto; }

/* Centre section titles site-wide for consistency */
.section-heading { text-align: center; }

/* ---- Free Tools: hero sub, badge, cards ---- */
.ft-subtitle { color: #55555F !important; }
.ft-badge {
  background: #FFFFFF !important;
  border: 1px solid #ECEBE4 !important;
  color: #55555F !important;
}
.ft-card {
  background: #FFFFFF !important;
  border: 1px solid #ECEBE4 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
}
.ft-card:hover { box-shadow: 0 16px 38px rgba(20,20,30,0.10); transform: translateY(-4px); }
.ft-card h3 { color: #141418 !important; font-weight: 700 !important; }
.ft-card p { color: #55555F !important; }
.ft-card-arrow { color: #FF5C39 !important; }

/* Catch inline light hero sub-copy that CSS can reach by class */
.margin-bottom-24px, .hero-main-heading + p { color: #55555F !important; }

/* ---- Clean nav hover + active: orange text only, no box/pill ---- */
.nav-link-2,
.nav-link-2:hover,
.nav-link-2.w--current {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.nav-link-2:hover,
.nav-link-2.w--current,
.nav-link-2[aria-current="page"] { color: #FF5C39 !important; }
.nav-link-2.w--current,
.nav-link-2[aria-current="page"] { font-weight: 700; }
/* active item must stay visible even if it carried the old "hide" class */
.nav-link-2[aria-current="page"] { display: block !important; }

/* ---- Tech Stack: flatten rigid columns into one balanced grid ---- */
.quick-stack-2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 14px !important;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 !important;
}
.quick-stack-2 .w-layout-cell,
.quick-stack-2 .div-block-9 { display: contents !important; }
.quick-stack-2 .div-block-4 {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-content: flex-start;
  gap: 12px;
  padding: 15px 18px !important;
}
/* Tech icons are light SVGs that vanish on white chips -> render as dark marks */
.tool-icon, .tool-icon.white { filter: brightness(0) !important; opacity: 0.82; }

/* Footer social icons -> white on the dark footer */
.footer-dark .footer-social-block img,
.footer-dark .footer-social-block-two img { filter: brightness(0) invert(1); opacity: 0.75; }
.footer-dark .footer-social-block a:hover img,
.footer-dark .footer-social-block-two a:hover img { opacity: 1; }

/* ---- Generic content cards that were dark-surfaced ---- */
.plan-option-item { background-color: #FFFFFF !important; border: 1px solid #ECEBE4; }
.plan-title-text, .plan-price-usd { color: #141418 !important; }
.plan-details-text { color: #3A3A44 !important; }

/* ---- Marketing & Ads pricing cards -> light brand (match pricing page) ---- */
.pricing-section-heading { color: #141418 !important; }
.pricing-card {
  background: #FFFFFF !important;
  border: 1px solid #ECEBE4 !important;
  box-shadow: 0 1px 2px rgba(20,20,30,0.04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,20,30,0.10); }
.pricing-card.popular { border-color: #FF5C39 !important; box-shadow: 0 0 0 1.5px rgba(255,92,57,0.5) !important; }
.pricing-card .card-name { color: #141418 !important; font-weight: 700 !important; }
.pricing-card .card-badge { color: #ffffff !important; }
.pricing-card .card-price { color: #141418 !important; }
.pricing-card .card-price span { color: #8A8A94 !important; }
.pricing-card .card-features { color: #55555F !important; }
.pricing-card .card-expected { color: #55555F !important; border-top-color: #ECEBE4 !important; }
.pricing-card .card-expected strong { color: #141418 !important; }

/* Keep the footer dark as a premium contrast anchor (never lighten its text) */
.footer-dark { background-color: #151521 !important; }
/* Footer text stays light on the dark footer */
.footer-dark .footer-link { color: rgba(255,255,255,0.72) !important; }
.footer-dark .footer-link:hover { color: #FF5C39 !important; }
.footer-dark .title-small { color: #ffffff !important; }
.footer-dark .ci-ai-eval-title { color: #ffffff !important; }
.footer-dark .footer-brand .text-block { color: #ffffff !important; }
.footer-dark .footer-bottom-center,
.footer-dark .footer-bottom-left { color: rgba(255,255,255,0.6) !important; }

/* Logo sizing: smaller navbar mark, footer keeps its original white mark */
.navbar-brand img { width: 38px !important; height: auto; }
.footer-brand img { width: 44px !important; height: auto; }

/* ---- Mobile: open nav menu must be readable ---- */
@media screen and (max-width: 991px) {
  .nav-menu-wrapper-2.w-nav-menu { background-color: #F6F5F1 !important; box-shadow: 0 16px 40px rgba(20,20,30,0.12); }
  .nav-menu { background-color: #F6F5F1 !important; }
  .nav-menu .nav-link-2 { color: #141418 !important; }
  .menu-button-2 { background-color: transparent !important; color: #141418 !important; }
  .menu-button-2.w--open { background-color: #141418 !important; color: #ffffff !important; }
}

/* ---- Mobile: footer spans full container width, columns stack ---- */
@media screen and (max-width: 767px) {
  .footer-dark .container { width: 100% !important; max-width: 100% !important; }
  .footer-wrapper, .footer-content { display: block !important; width: 100%; }
  .footer-content .footer-block { width: 100%; margin-bottom: 22px; }
  .footer-brand-area, .footer-bottom-row { width: 100%; }
}