/* ------------- BRAND TOKENS ------------- */
:root{
  --clr-primary : #001F3F;  /* Deep Navy */
  --clr-accent  : #007BFF;  /* CTA Blue */
  --clr-text    : #333333;  /* Charcoal */
  --clr-bg      : #FFFFFF;  /* White */

  --clr-success : #027A48;
  --clr-error   : #B42318;
}

/* ---------- Map over Webflow token soup ---------- */
:root{
  --base-color-brand--black      : var(--clr-primary);
  --base-color-neutral--black    : var(--clr-primary);
  --base-color-brand--white      : var(--clr-bg);
  --base-color-neutral--white    : var(--clr-bg);

  --text-color--text-primary     : var(--clr-text);
  --text-color--text-alternate   : var(--clr-bg);
  --link-color--link-primary     : var(--clr-accent);

  --background-color--background-primary   : var(--clr-bg);
  --background-color--background-secondary : #F7F9FC;
}

/* =================================================
   GLOBAL
   ================================================= */
html,body{
  background:var(--clr-bg);
  color:var(--clr-text);
}

h1,h2,h3,h4,h5,h6{color:var(--clr-primary);margin:0;font-weight:600}
a{color:var(--clr-accent);text-decoration:none}
a:hover{text-decoration:underline}

/* shared container alignment */
.page-wrapper,
.main-wrapper,
.container-large,
.container-large-secondary,
.container-small,
.container-xsmall{
  width:100%;
  max-width:80rem;
  margin-left:auto;
  margin-right:auto;
}

/* =================================================
   HEADER / NAVBAR
   ================================================= */
.site-header{
  width:100%;
  background:var(--clr-bg);
  border-bottom:1px solid #e5e7eb;
  padding:1rem 5%;
}

.header-inner{
  width:100%;
  max-width:80rem;
  margin:0 auto;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

/* logo */
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.wordmark{font-size:1.125rem;font-weight:600;color:var(--clr-primary)}

/* nav block */
.header-nav{display:flex;align-items:center;gap:1.5rem}
.link-login{
  color:var(--clr-text) !important;
  font-weight:400 !important;
  transition:color .2s;
}
.link-login:hover{color:var(--clr-primary)}

/* primary CTA */
.btn-primary{
  background:var(--clr-accent);
  color:#fff !important;
  padding:.6rem 1.6rem;
  border-radius:999px;
  font-weight:500;
  white-space:nowrap;
  transition:background .15s,transform .15s;
}
.btn-primary:hover{background:#0066e0;transform:translateY(-2px)}
.btn-primary:active{transform:none}

/* mobile breakpoint */
@media(max-width:640px){
  .header-inner{flex-wrap:wrap;gap:1rem}
  .header-nav{gap:1rem}
}

/* =================================================
   BUTTONS & FORMS
   ================================================= */
.button,
.button-block-primary,
.submit-button,
.f-navigation-button{
  background:var(--clr-primary) !important;
  border:0;
  color:#fff !important;
}

.button-block-secondary,
.button-block-alternate{
  background:var(--clr-accent) !important;
  color:#fff !important;
}

.form-checkbox-icon.w--redirected-checked{
  background:var(--clr-accent);
  border-color:var(--clr-accent);
}

/* =================================================
   SECTION & CARD BACKGROUNDS
   ================================================= */
/* Nuke rainbow gradients */
.section-hero,
.section-hero.features,
.pricing-plan.feature,
.updates-hero-wrap.blog.section-hero.rounded-corners{
  background:var(--clr-bg) !important;
}

.pricing-plan,
.layout-item,
.testimonial-content{
  background:var(--clr-bg);
}

/* =================================================
   SVG LOGO COLORS
   ================================================= */
.valandar-logo .shield,
.valandar-logo .vee,
.valandar-logo .sun,
.valandar-logo .sun-rays line{
  fill:var(--clr-primary);
  stroke:var(--clr-primary);
}

/* =================================================
   FOOTER
   ================================================= */
.footer,
.footer-link,
.footer-social-link,
.footer-credit-text{
  background:var(--clr-bg);
  color:var(--clr-text);
}
.footer a:hover{color:var(--clr-accent)}

/* =================================================
   HERO VISUAL ALIGNMENT TWEAKS
   ================================================= */
/* Center the feature pill, hero image, logo strip */
.hero-feature,
.header-image-wrapper,
.layout-image-wrapper-three,
.logo-component{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

/* Make request‑demo form align with center column */
.hero-form{justify-content:center}

/* tighten sub‑text width */
.max-width-large,
.max-width-large-secondary{max-width:42rem !important;margin-left:auto;margin-right:auto}

/* ---------- HERO HEADING 2‑LINE RULE ---------- */
.hero-head{
  max-width:32ch;          /* widen until text wraps only once */
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  line-height:1.15;
}
/* keep “by AI” (or any span you mark) glued together */
.hero-head .nowrap{white-space:nowrap;}

@media(max-width:420px){
  .hero-head{max-width:38ch;}   /* allow a bit more width on tiny phones */
}

/* =================================================
   END OVERRIDE
   ================================================= */




/* 1️⃣  Logo icon + wordmark  */
.logo svg path,
.logo .wordmark {

  color: var(--clr-primary, #001F3F);  /* text logo */
}

/* 2️⃣  Login link  */
.header-nav .link-login {
  color: var(--clr-text, #333333);
  text-decoration: none;
  transition: color .2s;
}
.header-nav .link-login:hover {
  color: var(--clr-primary, #001F3F);
}

/* 3️⃣  Fail‑safe: make sure no stray <a> tags up there default to black */
.site-header a {
  color: inherit;
}
/* keep the V cut‑out hollow */
.valandar-logo .vee{
  fill: none !important;        /* no solid fill  */
  stroke: var(--clr-primary);   /* outline keeps Deep Navy */
}