/* ==========================================================================
   Viking Coders - shared landing page stylesheet
   File: /css/vc-landing.css   (load AFTER mainClean.css and mediaClean.css)

   Built from the live site's design system (mainClean.css / mediaClean.css):
   Montserrat, black / #0b1114 dark surfaces, #2983e5 primary blue,
   #1665b5 link blue, #fc0 yellow accent, 5px radius, soft card shadows,
   breakpoints 1200 / 992 / 768 / 550.

   Every class is prefixed "vcl-" and scoped under .vcl, so nothing here can
   collide with existing site styles. Reuse this file for every platform
   landing page (Miva, PrestaShop, ...). Platform pages only change content.
   ========================================================================== */

:root {
  /* Brand (values copied from mainClean.css) */
  --vcl-blue:        #2983e5;   /* primary: CTA band, checkmarks, focus  */
  --vcl-blue-link:   #1665b5;   /* links on light backgrounds           */
  --vcl-blue-bright: #51b5ec;   /* links on dark backgrounds            */
  --vcl-grad:        linear-gradient(180deg, #49a4ea 0, #2c6ce3 100%);
  --vcl-grad-hover:  linear-gradient(180deg, #3f97dc 0, #2159c4 100%);
  --vcl-yellow:      #fc0;
  --vcl-navy:        #0f2a44;   /* deep navy used on the PrestaShop landing page */
  --vcl-navy-dark:   #0a1d30;
  --vcl-ice:         #a4dbe8;   /* soft blue accent from the PrestaShop page */      /* pretitles, highlights, stat numbers  */

  /* Surfaces */
  --vcl-black:     #000;
  --vcl-dark:      #0b1114;
  --vcl-dark-card: #12171a;
  --vcl-white:     #fff;
  --vcl-light:     #f2f2f2;
  --vcl-form-bg:   #e6e9ee;
  --vcl-line:      #e5e5e5;
  --vcl-line-dark: rgba(255,255,255,.12);

  /* Shape and depth */
  --vcl-radius:       5px;
  --vcl-shadow:       0 1px 15px -4px rgba(0,0,0,.3);
  --vcl-shadow-hover: 0 6px 20px -6px rgba(0,0,0,.35);

  /* Layout */
  --vcl-maxw:   1400px;
  --vcl-gutter: 40px;          /* matches .container-fluid padding */
  --vcl-header-clearance: 180px; /* site header is absolute + transparent */
}

#contact-form{
  display: none !important;
}

/* ---------- Base (scoped) ---------- */
.vcl { font-family: Montserrat, sans-serif; color: #000; background: var(--vcl-white); line-height: 1.6; font-size: 1rem; }
.vcl *, .vcl *::before, .vcl *::after { box-sizing: border-box; }
.vcl :where(h1, h2, h3, h4) { font-family: inherit; font-weight: 700; line-height: 1.2; margin: 0 0 .6em; color: inherit; }
.vcl :where(h1) { font-size: 3rem; }
.vcl :where(h2) { font-size: 2.6rem; }
.vcl :where(h3) { font-size: 1.3rem; }
.vcl :where(p) { margin: 0 0 1em; }
.vcl :where(ul, ol) { margin: 0; padding: 0; }
.vcl :where(img) { max-width: 100%; height: auto; }
.vcl :where(a) { color: var(--vcl-blue-link); }
.vcl a:focus-visible, .vcl button:focus-visible, .vcl summary:focus-visible, .vcl input:focus-visible, .vcl textarea:focus-visible {
  outline: 2px solid var(--vcl-blue); outline-offset: 2px;
}
.vcl :where(strong) { font-weight: 700; }

.vcl-container { width: 100%; max-width: var(--vcl-maxw); margin: 0 auto; padding: 0 var(--vcl-gutter); }
.vcl-container--narrow { max-width: 980px; }
.vcl-center { text-align: center; }
.vcl-mt { margin-top: 40px; }
.vcl-muted { opacity: .7; font-size: .9rem; }

/* ---------- Sections ---------- */
.vcl-section { padding: 70px 0; background: var(--vcl-white); color: #000; }
.vcl-section--alt  { background: var(--vcl-light); }
.vcl-section--dark { background: var(--vcl-dark); color: #fff; }
.vcl-section--black { background: var(--vcl-black); color: #fff; }
.vcl-section--dark a, .vcl-section--black a, .vcl-hero a { color: var(--vcl-blue-bright); }

.vcl-head { max-width: 900px; margin-bottom: 40px; }
.vcl-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.vcl-head p:last-child { margin-bottom: 0; }
.vcl-intro { font-size: 1.05rem; opacity: .8; }

/* Pretitle: the site's yellow "pretitle", bolder so it reads on light backgrounds too */
.vcl-pretitle {
  display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vcl-blue-link); margin-bottom: 12px;
}
.vcl-section--dark .vcl-pretitle, .vcl-section--black .vcl-pretitle, .vcl-hero .vcl-pretitle { color: var(--vcl-yellow); }
.vcl-hl { color: var(--vcl-yellow); }                      /* highlighted word on dark */
.vcl-section:not(.vcl-section--dark):not(.vcl-section--black) .vcl-hl { color: var(--vcl-blue); }

/* ---------- Buttons ---------- */
/* DEV: if the site already has a filled CTA button class, swap it in for .vcl-btn--primary. */
.vcl-btn {
  display: inline-block; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.3;
  padding: 14px 30px; border-radius: var(--vcl-radius); text-decoration: none; text-align: center;
  cursor: pointer; border: 2px solid transparent; transition: .3s all;
}
.vcl .vcl-btn--primary { background: var(--vcl-grad); color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.1); }
.vcl .vcl-btn--primary:hover { background: var(--vcl-grad-hover); color: #fff; transform: translateY(-1px); }
/* outline button, mirrors the site's .btn-border */
.vcl .vcl-btn--border { background: transparent; color: #fff; border-color: #fff; }
.vcl .vcl-btn--border:hover { background: #fff; color: #4194e7; }
.vcl .vcl-btn--outline { background: transparent; color: var(--vcl-blue-link); border-color: var(--vcl-blue-link); }
.vcl .vcl-btn--outline:hover { background: var(--vcl-blue-link); color: #fff; }
.vcl-btn--block { display: block; width: 100%; }
.vcl-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Text link with the site's growing underline */
.vcl .vcl-more { position: relative; font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--vcl-blue-link); display: inline-block; }
.vcl .vcl-more::after { content: ""; display: block; width: 0; height: 1px; background: currentColor; transition: width .5s; }
.vcl .vcl-more:hover::after, .vcl .vcl-more:focus-visible::after { width: 100%; }
.vcl-section--dark .vcl-more, .vcl-section--black .vcl-more, .vcl-tile .vcl-more { color: var(--vcl-blue-bright); }

/* ---------- Hero (dark, clears the absolute site header) ---------- */
.vcl-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(41,131,229,.28), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(255,204,0,.08), transparent 60%),
    var(--vcl-dark);
  padding: var(--vcl-header-clearance) 0 70px;
}
.vcl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.vcl-hero h1 { font-size: 3rem; margin-bottom: 20px; }
.vcl-hero__lead { font-size: 1.15rem; opacity: .85; max-width: 760px; }
.vcl-hero .vcl-btns { margin: 28px 0 24px; }

.vcl-crumbs { font-size: .85rem; margin-bottom: 26px; }
.vcl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; }
.vcl-crumbs li { display: flex; align-items: center; opacity: .75; }
.vcl-crumbs li:not(:last-child)::after { content: "/"; opacity: .5; margin: 0 8px; }
.vcl-hero .vcl-crumbs a { color: #fff; text-decoration: none; }
.vcl-hero .vcl-crumbs a:hover { text-decoration: underline; }

/* Pills (mirrors .product-hero__platform-badge) */
.vcl-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.vcl-pills li { background: rgba(255,255,255,.08); border-radius: 20px; padding: 6px 14px; font-size: .85rem; }

/* Hero side panel: "jump to" navigation, good for scanning */
.vcl-jump { background: rgba(18,23,26,.85); border: 1px solid var(--vcl-line-dark); border-radius: var(--vcl-radius); padding: 28px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.vcl-jump__title { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vcl-yellow); margin: 0 0 14px; }
.vcl-jump ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.vcl-hero .vcl-jump a { display: block; padding: 8px 0; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 1px solid var(--vcl-line-dark); }
.vcl-hero .vcl-jump a::before { content: "\203A"; color: var(--vcl-yellow); margin-right: 8px; }
.vcl-hero .vcl-jump a:hover { color: var(--vcl-blue-bright); }
.vcl-jump__note { margin: 18px 0 0; font-size: .85rem; opacity: .7; }

/* ---------- Stats band ---------- */
.vcl-stats { background: var(--vcl-black); color: #fff; padding: 40px 0; border-top: 1px solid var(--vcl-line-dark); }
.vcl-stats ul { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; text-align: center; }
.vcl-stats__num { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--vcl-yellow); }
.vcl-stats__label { display: block; font-size: .85rem; margin-top: 6px; opacity: .8; }

/* ---------- Cards / grids ---------- */
.vcl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.vcl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vcl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vcl-card {
  background: var(--vcl-white); color: #000; border-radius: var(--vcl-radius); padding: 26px;
  box-shadow: var(--vcl-shadow); border-top: 3px solid var(--vcl-blue);
  display: flex; flex-direction: column; transition: .3s transform, .3s box-shadow;
}
.vcl-card:hover { transform: translateY(-4px); box-shadow: var(--vcl-shadow-hover); }
.vcl-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.vcl-card p { font-size: .95rem; opacity: .85; }
.vcl-card p:last-child { margin-bottom: 0; }
.vcl-card .vcl-more { margin-top: auto; }
.vcl-card__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vcl-blue-link); margin-bottom: 8px; }

/* Dark tiles (mirrors .product-tile) */
.vcl .vcl-tile { display: flex; flex-direction: column; background: var(--vcl-dark-card); color: #fff; border-radius: var(--vcl-radius); padding: 25px; box-shadow: var(--vcl-shadow); text-decoration: none; transition: .3s transform, .3s box-shadow; border: 1px solid var(--vcl-line-dark); }
.vcl-tile:hover, .vcl-tile:focus-within { transform: translateY(-4px); box-shadow: var(--vcl-shadow-hover); }
.vcl-tile h3 { font-size: 1.15rem; margin-bottom: 8px; }
.vcl-tile p { font-size: .9rem; opacity: .8; flex-grow: 1; }
.vcl-tile__tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vcl-yellow); margin-bottom: 10px; }

/* Checklist (mirrors .product-highlights__list) */
.vcl-check { list-style: none; display: grid; gap: 12px; }
.vcl-check li { position: relative; background: var(--vcl-white); color: #000; border-radius: var(--vcl-radius); padding: 16px 20px 16px 48px; font-size: .95rem; box-shadow: 0 1px 8px -4px rgba(0,0,0,.2); }
.vcl-check li::before { content: "\2713"; position: absolute; left: 20px; top: 15px; color: var(--vcl-blue); font-weight: 700; }
.vcl-section--dark .vcl-check li, .vcl-section--black .vcl-check li { background: var(--vcl-dark-card); color: #fff; box-shadow: none; border: 1px solid var(--vcl-line-dark); }
.vcl-section--dark .vcl-check li::before, .vcl-section--black .vcl-check li::before { color: var(--vcl-yellow); }
.vcl-check--2 { grid-template-columns: 1fr 1fr; }
.vcl-check--compact { margin: 4px 0 24px; gap: 8px; }
.vcl-check--compact li { background: var(--vcl-light); box-shadow: none; padding: 12px 16px 12px 42px; font-size: .9rem; }
.vcl-check--compact li::before { left: 16px; top: 11px; }

/* Split layout */
.vcl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.vcl-split--center { align-items: center; }

/* ---------- Timeline (echoes the yellow history timeline on /story) ---------- */
.vcl-timeline { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; position: relative; padding-top: 34px; }
.vcl-timeline::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: var(--vcl-yellow); border-radius: 3px; opacity: .85; }
.vcl-timeline li { position: relative; }
.vcl-timeline li::before { content: ""; position: absolute; top: -34px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--vcl-yellow); box-shadow: 0 0 0 4px var(--vcl-white); }
.vcl-timeline__year { display: block; font-size: 1.6rem; font-weight: 700; color: inherit; line-height: 1.1; margin-bottom: 6px; }
.vcl-timeline p { font-size: .9rem; opacity: .85; margin: 0; }

/* ---------- Integrations ---------- */
.vcl-int { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vcl-int__group { background: var(--vcl-white); border-radius: var(--vcl-radius); padding: 24px; box-shadow: var(--vcl-shadow); }
.vcl-int__group h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; color: var(--vcl-blue-link); }
.vcl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.vcl-chips li { font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 20px; background: var(--vcl-light); border: 1px solid var(--vcl-line); }
.vcl-section--dark .vcl-chips li, .vcl-section--black .vcl-chips li { background: rgba(255,255,255,.08); border-color: transparent; }

.vcl-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center;
  background: var(--vcl-dark); color: #fff; border-radius: var(--vcl-radius); padding: 28px 32px;
  border-left: 5px solid var(--vcl-yellow); margin-top: 30px;
}
.vcl-callout__big { font-size: 2.6rem; font-weight: 700; color: var(--vcl-yellow); line-height: 1; text-align: center; }
.vcl-callout__big small { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .8; margin-top: 6px; }
.vcl-callout h3 { margin-bottom: 6px; }
.vcl-callout div p { margin: 0; opacity: .85; font-size: .95rem; }


/* ---------- Compact AI band ---------- */
.vcl-aiband { background: var(--vcl-black); color: #fff; padding: 44px 0; border-top: 1px solid var(--vcl-line-dark); border-bottom: 1px solid var(--vcl-line-dark); }
.vcl-aiband__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.vcl-aiband .vcl-pretitle { color: var(--vcl-yellow); margin-bottom: 8px; }
.vcl-aiband h2 { font-size: 1.8rem; margin-bottom: 10px; }
.vcl-aiband p:not(.vcl-pretitle) { margin: 0; max-width: 860px; font-size: .95rem; opacity: .85; }

/* ---------- Case studies ---------- */
.vcl-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; background: var(--vcl-white); border-radius: var(--vcl-radius); box-shadow: var(--vcl-shadow); padding: 44px; }
.vcl-feature__tag, .vcl-case__tag { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.vcl-feature h3 { font-size: 2rem; }
.vcl-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vcl-metric { background: var(--vcl-dark); color: #fff; border-radius: var(--vcl-radius); padding: 22px 20px; }
.vcl-metric b { display: block; font-size: 2.4rem; line-height: 1; color: var(--vcl-yellow); margin-bottom: 8px; }
.vcl-metric span { font-size: .85rem; opacity: .85; }
.vcl-metrics__note { grid-column: 1 / -1; font-size: .8rem; opacity: .6; margin: 0; }

.vcl-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.vcl-case { background: var(--vcl-white); border-radius: var(--vcl-radius); box-shadow: var(--vcl-shadow); padding: 32px; display: flex; flex-direction: column; }
.vcl-case h3 { font-size: 1.5rem; }
.vcl-case p { font-size: .95rem; }
.vcl-case .vcl-more { margin-top: auto; }
.vcl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.vcl-tags li { font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--vcl-light); }

.vcl-quote { margin: 8px 0 22px; padding: 20px 22px; border-left: 4px solid var(--vcl-yellow); background: var(--vcl-light); border-radius: 0 var(--vcl-radius) var(--vcl-radius) 0; }
.vcl-quote p { font-style: italic; font-size: .95rem; margin-bottom: 10px; }
.vcl-quote .vcl-quote__by { font-style: normal; font-weight: 700; font-size: .85rem; margin: 0; }
.vcl-quote__by span { font-weight: 400; opacity: .7; }
.vcl-quote--big p { font-size: 1.1rem; }
.vcl-section--dark .vcl-quote, .vcl-section--black .vcl-quote { background: var(--vcl-dark-card); }

/* Store list */
.vcl-stores { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; }
.vcl-stores li { padding: 10px 0; border-bottom: 1px solid var(--vcl-line); font-weight: 600; font-size: .95rem; }
.vcl .vcl-stores a { color: #000; text-decoration: none; }
.vcl .vcl-stores a:hover { color: var(--vcl-blue-link); text-decoration: underline; }

/* ---------- Plans ---------- */
.vcl-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vcl-plan { position: relative; display: flex; flex-direction: column; background: var(--vcl-white); color: #000; border-radius: var(--vcl-radius); padding: 36px; box-shadow: var(--vcl-shadow); border: 2px solid transparent; }
.vcl-plan--featured { border-color: var(--vcl-blue); }
.vcl-plan__flag { position: absolute; top: -14px; left: 36px; margin: 0; background: var(--vcl-yellow); color: #000; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; }
.vcl-plan h3 { font-size: 1.6rem; margin-bottom: 6px; }
.vcl-plan__desc { opacity: .8; }
.vcl-plan ul { list-style: none; margin: 10px 0 28px; display: grid; gap: 10px; }
.vcl-plan li { position: relative; padding-left: 26px; font-size: .95rem; }
.vcl-plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--vcl-blue); font-weight: 700; }
.vcl-plan .vcl-btn { margin-top: auto; }

/* ---------- Steps ---------- */
.vcl-steps { list-style: none; counter-reset: vcl; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vcl-steps li { counter-increment: vcl; position: relative; background: var(--vcl-white); border-radius: var(--vcl-radius); padding: 60px 24px 24px; box-shadow: var(--vcl-shadow); }
.vcl-steps li::before { content: counter(vcl, decimal-leading-zero); position: absolute; top: 18px; left: 24px; font-size: 1.5rem; font-weight: 700; color: var(--vcl-blue); }
.vcl-steps h3 { font-size: 1.1rem; margin-bottom: 6px; }
.vcl-steps p { font-size: .92rem; opacity: .85; margin: 0; }

/* ---------- FAQ ---------- */
.vcl-faq details { background: var(--vcl-white); border-radius: var(--vcl-radius); box-shadow: 0 1px 8px -4px rgba(0,0,0,.25); margin-bottom: 10px; }
.vcl-faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 56px 18px 22px; font-weight: 700; font-size: 1.02rem; }
.vcl-faq summary::-webkit-details-marker { display: none; }
.vcl-faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--vcl-blue); }
.vcl-faq details[open] summary::after { content: "\2212"; }
.vcl-faq details > div { padding: 0 22px 20px; font-size: .95rem; opacity: .9; }
.vcl-faq details > div p:last-child { margin-bottom: 0; }

/* ---------- CTA band (mirrors .product-cta-banner) ---------- */
.vcl-cta { background: var(--vcl-navy); color: #fff; text-align: center; padding: 60px 0; }
.vcl-cta h2 { font-size: 2rem; margin-bottom: 10px; }
.vcl-cta p { opacity: .9; margin-bottom: 25px; }
.vcl-cta .vcl-btns { justify-content: center; }
.vcl .vcl-cta .vcl-btn--light { background: #fff; color: var(--vcl-navy); }
.vcl .vcl-cta .vcl-btn--light:hover { background: var(--vcl-ice); color: var(--vcl-navy); }
.vcl .vcl-cta .vcl-btn--border:hover { background: #fff; color: var(--vcl-navy); }

/* ---------- Contact (mirrors #contact-form / #top-products) ---------- */
.vcl-contact { background: var(--vcl-form-bg); }
.vcl-contact__phone { font-size: 1.3rem; font-weight: 700; }
.vcl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.vcl-form label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 20px; }
.vcl-form__full { grid-column: 1 / -1; }
.vcl-form input, .vcl-form textarea, .vcl-form select {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; font-weight: 400; color: #000;
  padding: 15px 20px; background: #fff; border: 0; border-radius: var(--vcl-radius); box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.vcl-form textarea { min-height: 140px; resize: vertical; }
.vcl-form .vcl-btn { grid-column: 1 / -1; border: 0; }

/* ---------- Client logo grid (no outbound links) ---------- */
.vcl-logos { --cols: 7; --gap: 16px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.vcl-logos > .vcl-logo { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.vcl-logo { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; min-height: 140px; background: var(--vcl-white); border-radius: var(--vcl-radius); padding: 16px 16px 14px; box-shadow: var(--vcl-shadow); text-align: center; transition: .3s transform, .3s box-shadow; }
.vcl-logo:hover { transform: translateY(-4px); box-shadow: var(--vcl-shadow-hover); }
.vcl-logo__mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; background: #fff; border-radius: var(--vcl-radius); overflow: hidden; }
.vcl-logo__mark img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.vcl-logo__word { display: none; font-size: 1.15rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--vcl-dark); }
.vcl-logo__name { font-size: .8rem; font-weight: 600; opacity: .65; }
.vcl-logo.is-text .vcl-logo__word { display: block; }
.vcl-logo.is-text .vcl-logo__name { display: none; }
.vcl-logo.is-text .vcl-logo__mark { background: var(--vcl-dark); }
.vcl-logo.is-text .vcl-logo__word { color: #fff; padding: 0 12px; }

/* Phone line under hero / CTA buttons */
.vcl-hero__call, .vcl-cta__call { font-size: .9rem; opacity: .85; margin: -8px 0 22px; }
.vcl-cta__call { margin: 16px 0 0; }
.vcl .vcl-cta__call a { color: var(--vcl-ice); font-weight: 700; }
.vcl-hero__call a { font-weight: 700; }

/* In-page anchors land below any sticky header */
.vcl [id] { scroll-margin-top: 30px; }

/* ---------- Responsive (site breakpoints) ---------- */
@media only screen and (max-width: 1200px) {
  :root { --vcl-header-clearance: 150px; }
  .vcl :where(h1), .vcl-hero h1 { font-size: 2.6rem; }
  .vcl :where(h2) { font-size: 2.2rem; }
  .vcl-stats ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .vcl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 50px; }
  .vcl-timeline::before { display: none; }
  .vcl-timeline li { border-top: 3px solid var(--vcl-yellow); padding-top: 22px; }
  .vcl-timeline li::before { top: -11px; }
  .vcl-stores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcl-logos { --cols: 5; }
}
@media only screen and (max-width: 992px) {
  :root { --vcl-gutter: 30px; }
  .vcl-hero__grid, .vcl-split, .vcl-feature, .vcl-plans, .vcl-cases { grid-template-columns: minmax(0, 1fr); }
  .vcl-hero__grid, .vcl-split { gap: 40px; }
  .vcl-feature { padding: 32px; gap: 30px; }
  .vcl-grid--3, .vcl-int, .vcl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-callout { grid-template-columns: auto minmax(0, 1fr); }
  .vcl-callout .vcl-btn { grid-column: 1 / -1; justify-self: start; }
  .vcl-aiband__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vcl-aiband .vcl-btn { justify-self: start; }
}
@media only screen and (max-width: 768px) {
  :root { --vcl-header-clearance: 120px; --vcl-gutter: 20px; }
  .vcl-section { padding: 50px 0; }
  .vcl :where(h1), .vcl-hero h1 { font-size: 2.1rem; }
  .vcl :where(h2) { font-size: 1.8rem; }
  .vcl-hero__lead { font-size: 1.05rem; }
  .vcl-stats__num { font-size: 1.9rem; }
  .vcl-check--2 { grid-template-columns: minmax(0, 1fr); }
  .vcl-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-logos { --cols: 4; --gap: 12px; }
  .vcl-logo { padding: 12px 10px 10px; min-height: 0; gap: 8px; }
  .vcl-logo__mark { height: 64px; }
  .vcl-logo__name { font-size: .75rem; }
  .vcl-logo__word { font-size: 1rem; }
}
@media only screen and (max-width: 550px) {
  .vcl-logos { --cols: 2; }
  :root { --vcl-header-clearance: 110px; --vcl-gutter: 16px; }
  .vcl-section { padding: 40px 0; }
  .vcl-aiband { padding: 34px 0; }
  .vcl-aiband h2 { font-size: 1.4rem; }
  .vcl :where(h1), .vcl-hero h1 { font-size: 1.8rem; }
  .vcl :where(h2) { font-size: 1.55rem; }
  .vcl-hero { padding-bottom: 50px; }
  .vcl-btns .vcl-btn { width: 100%; }
  .vcl-jump { padding: 22px; }
  .vcl-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-grid, .vcl-grid--3, .vcl-grid--4, .vcl-int, .vcl-steps, .vcl-form { grid-template-columns: minmax(0, 1fr); }
  .vcl-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .vcl-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vcl-metric { padding: 16px 14px; }
  .vcl-metric b { font-size: 1.9rem; }
  .vcl-feature, .vcl-case, .vcl-plan { padding: 24px 20px; }
  .vcl-feature h3 { font-size: 1.6rem; }
  .vcl-callout { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; text-align: left; }
  .vcl-callout__big { text-align: left; }
  .vcl-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .vcl-stores li { font-size: .88rem; }
  .vcl-faq summary { padding: 16px 48px 16px 18px; font-size: .98rem; }
  .vcl-faq details > div { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .vcl-card, .vcl-tile, .vcl-btn, .vcl-more::after { transition: none; }
  .vcl-card:hover, .vcl-tile:hover, .vcl-logo:hover, .vcl .vcl-btn--primary:hover { transform: none; }
}

/* ==========================================================================
   Viking Coders - redesigned Services + Integrations sections (Miva page)
   File: /css/vcl-sections.css   (load AFTER vc-landing.css)
   Uses the vc-landing.css tokens. Classes: .vcl-svc* and .vcl-int2*
   ========================================================================== */

/* ---------- SERVICES: 3 groups, icon rows ---------- */
.vcl-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); column-gap: 20px; row-gap: 0; }
/* Subgrid: all three cards share the same row heights, so headers and every
   service row line up across the columns and the cards end at the same height. */
.vcl-svc__group { background: #fff; border-radius: var(--vcl-radius); box-shadow: var(--vcl-shadow); overflow: hidden; display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.vcl-svc__head { position: relative; padding: 26px 26px 20px; background: var(--vcl-dark); color: #fff; }
.vcl-svc__num { position: absolute; top: 20px; right: 24px; font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--vcl-yellow); opacity: .9; }
.vcl .vcl-svc__head h3 { font-size: 1.3rem; margin: 0 0 4px; padding-right: 60px; }
.vcl .vcl-svc__head p { margin: 0; font-size: .88rem; opacity: .75; padding-right: 50px; }
.vcl-svc__list { list-style: none; margin: 0; padding: 0; grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; }
.vcl-svc__list li { display: flex; }
.vcl-svc__list li > .vcl-svc__item { flex: 1; }
.vcl-svc__list li + li { border-top: 1px solid var(--vcl-line); }
.vcl .vcl-svc__item { display: flex; align-items: center; gap: 14px; padding: 16px 22px; color: #000; text-decoration: none; transition: .25s background; }
.vcl a.vcl-svc__item:hover { background: #f6f9fd; }
.vcl-svc__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #eaf3fd; color: var(--vcl-blue-link); transition: .25s all; }
.vcl a.vcl-svc__item:hover .vcl-svc__icon { background: var(--vcl-blue-link); color: #fff; }
.vcl-ico { width: 22px; height: 22px; display: block; }
.vcl-svc__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vcl-svc__text strong { font-size: .98rem; line-height: 1.3; }
.vcl-svc__text span { font-size: .84rem; line-height: 1.4; opacity: .7; }
.vcl-svc__go { flex: 0 0 auto; color: var(--vcl-blue-link); opacity: 0; transform: translateX(-4px); transition: .25s all; }
.vcl-svc__go .vcl-ico { width: 18px; height: 18px; }
.vcl a.vcl-svc__item:hover .vcl-svc__go, .vcl a.vcl-svc__item:focus-visible .vcl-svc__go { opacity: 1; transform: none; }

@supports not (grid-template-rows: subgrid) {
  .vcl-svc { grid-template-rows: none; }
  .vcl-svc__group { display: flex; flex-direction: column; grid-row: auto; }
  .vcl-svc__head { min-height: 118px; }
  .vcl-svc__list { display: block; flex: 1; }
  .vcl-svc__list li { min-height: 86px; }
}

/* ---------- INTEGRATIONS: logo wall + filter ---------- */
.vcl-int2__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 26px; }
.vcl-int2__top .vcl-head { margin-bottom: 0; }
.vcl-int2__facts { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 4px 24px; flex: 0 0 auto; border-left: 3px solid var(--vcl-yellow); }
.vcl-int2__facts li { display: flex; align-items: center; gap: 12px; font-size: .92rem; line-height: 1.3; }
.vcl-int2__facts b { font-weight: 700; color: var(--vcl-blue-link); }
.vcl-int2__fi { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #eaf3fd; color: var(--vcl-blue-link); }
.vcl-int2__fi .vcl-ico { width: 20px; height: 20px; }

.vcl-int2__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.vcl-int2__filters[hidden] { display: none; }
.vcl-int2__filters button {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--vcl-line); background: #fff; color: #000; transition: .2s all;
}
.vcl-int2__filters button span { font-weight: 700; opacity: .5; margin-left: 2px; }
.vcl-int2__filters button:hover { border-color: var(--vcl-blue-link); color: var(--vcl-blue-link); }
.vcl-int2__filters button.is-on { background: var(--vcl-dark); border-color: var(--vcl-dark); color: #fff; }
.vcl-int2__filters button.is-on span { opacity: .7; color: var(--vcl-yellow); }
.vcl-int2__filters button:focus-visible { outline: 2px solid var(--vcl-blue); outline-offset: 2px; }

.vcl-int2__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.vcl-int2__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 108px; padding: 14px 10px 10px; background: #f0f0f0; border-radius: var(--vcl-radius); text-align: center; border: 1px solid transparent; transition: .25s all; }
.vcl-int2__tile:hover { background: #fff; border-color: var(--vcl-line); box-shadow: var(--vcl-shadow); transform: translateY(-2px); }
.vcl-int2__tile[hidden] { display: none; }
.vcl-int2__mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; }
.vcl-int2__mark img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.vcl-int2__word { display: none; font-size: .95rem; font-weight: 700; line-height: 1.2; color: var(--vcl-dark); }
.vcl-int2__name { font-size: .72rem; font-weight: 600; line-height: 1.25; opacity: .6; }
.vcl-int2__tile.is-text .vcl-int2__word { display: block; }
.vcl-int2__tile.is-text .vcl-int2__name { display: none; }

.vcl-int2__more { background: var(--vcl-navy, #0f2a44); padding: 0; }
.vcl-int2__more:hover { background: var(--vcl-navy-dark, #0a1d30); border-color: transparent; }
.vcl .vcl-int2__more a { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; height: 100%; padding: 14px; color: #fff; text-decoration: none; text-align: left; }
.vcl-int2__more b { font-size: .92rem; color: var(--vcl-yellow); }
.vcl-int2__more span { font-size: .75rem; line-height: 1.35; opacity: .85; }

/* Phones: "Show all" button under a shortened wall (added by vcl-integrations.js) */
.vcl-int2__showall { text-align: center; margin: 16px 0 0; }
.vcl .vcl-int2__toggle { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .9rem; font-weight: 700; color: var(--vcl-blue-link); background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.vcl .vcl-int2__toggle:hover span { text-decoration: underline; }
.vcl .vcl-int2__toggle:focus-visible { outline: 2px solid var(--vcl-blue); outline-offset: 2px; border-radius: 4px; }
.vcl-int2__toggle .vcl-ico { width: 18px; height: 18px; transition: .25s transform; }
.vcl-int2__toggle[aria-expanded="true"] .vcl-ico { transform: rotate(180deg); }
.vcl-int2__toggle [hidden] { display: none; }
.vcl-int2__showall[hidden] { display: none; }

/* ---------- Responsive (site breakpoints) ---------- */
@media only screen and (max-width: 1200px) {
  .vcl-int2__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media only screen and (max-width: 992px) {
  .vcl-svc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; max-width: 680px; }
  .vcl-svc__group { display: flex; flex-direction: column; grid-row: auto; }
  .vcl-svc__list { display: block; }
  .vcl-int2__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .vcl-int2__facts { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
  .vcl-int2__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media only screen and (max-width: 550px) {
  .vcl-svc__head { padding: 22px 20px 16px; }
  .vcl .vcl-svc__item { padding: 13px 16px; }
  .vcl-svc__go { opacity: 1; transform: none; }
  .vcl-int2__filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 0 16px 4px; scrollbar-width: none; }
  .vcl-int2__filters::-webkit-scrollbar { display: none; }
  .vcl-int2__filters button { flex: 0 0 auto; }
  .vcl-int2__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vcl-int2__tile { min-height: 92px; padding: 10px 6px 8px; }
  .vcl-int2__mark { height: 40px; }
  .vcl-int2__word { font-size: .82rem; }
  .vcl-int2__more { grid-column: 1 / -1; min-height: 0; }
  .vcl .vcl-int2__more a { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vcl-svc__item, .vcl-svc__icon, .vcl-svc__go, .vcl-int2__tile { transition: none; }
  .vcl-int2__tile:hover { transform: none; }
}
/* ==========================================================================
   Viking Coders - sticky section menu for landing pages
   File: /css/vcl-subnav.css   (load AFTER vc-landing.css)

   Same design as the sub-nav on the PrestaShop module pages (vc-module.css):
   white bar that sticks to the top of the screen, underlined active link,
   and a call-to-action button that slides in once the hero has scrolled away.
   Every class is prefixed "vcl-subnav" so nothing else on the page changes.
   ========================================================================== */

main.vcl { --vcl-subnav-h: 60px; }

.vcl-subnav {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--vcl-line, #e5e5e5);
  box-shadow: 0 6px 16px -14px rgba(0,0,0,.5);
}
.vcl-subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--vcl-subnav-h); }

.vcl-subnav__links { list-style: none; display: flex; gap: 4px; margin: 0 -10px; padding: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vcl-subnav__links::-webkit-scrollbar { display: none; }
.vcl .vcl-subnav__links a {
  display: block; padding: 19px 10px 17px;
  font-size: .88rem; font-weight: 600; line-height: 1.2; color: #000; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; opacity: .75; transition: .3s all;
}
.vcl .vcl-subnav__links a:hover { opacity: 1; }
.vcl .vcl-subnav__links a.is-active { opacity: 1; color: var(--vcl-blue-link, #1665b5); border-bottom-color: var(--vcl-blue, #2983e5); }
.vcl .vcl-subnav__links a:focus-visible { outline: 2px solid var(--vcl-blue, #2983e5); outline-offset: -4px; }

/* Right side: appears once the hero (and its buttons) scroll out of view */
.vcl-subnav__cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(4px); transition: .3s all; }
.vcl-subnav.is-cta-visible .vcl-subnav__cta { opacity: 1; visibility: visible; transform: none; }
.vcl-subnav__note { font-size: .9rem; font-weight: 700; }
.vcl .vcl-subnav__btn { padding: 9px 20px; font-size: 14px; }

/* In-page jumps land just below the sticky bar */
main.vcl [id] { scroll-margin-top: calc(var(--vcl-subnav-h) + 16px); }

/* ---------- Responsive (site breakpoints) ---------- */

@media only screen and (max-width: 1200px) {
  .vcl-subnav__note { display: none; }
}
@media only screen and (max-width: 992px) {
  .vcl-subnav__cta { display: none; }
  /* Links scroll sideways; a soft fade on the right hints there are more */
  .vcl-subnav__links { margin: 0 calc(var(--vcl-gutter, 30px) * -1); padding: 0 var(--vcl-gutter, 30px);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .vcl-subnav__links.is-end { -webkit-mask-image: none; mask-image: none; }
}
@media only screen and (max-width: 550px) {
  main.vcl { --vcl-subnav-h: 52px; }
  .vcl .vcl-subnav__links a { padding: 16px 9px 13px; font-size: .84rem; }
  .vcl-subnav{position: fixed; top: 68px; left: 0; width: 100%;}
  .vcl-hero{padding-top: 148px;}
}
@media only screen and (max-width: 375px) {
    .vcl-subnav {top: 60px;}
}
@media (prefers-reduced-motion: reduce) {
  .vcl .vcl-subnav__links a, .vcl-subnav__cta { transition: none; }
}