/* ============================================================
   VEZETI — Main Stylesheet
   Edit brand colors in :root below. All pages share this file.
   ============================================================ */

:root {
  /* Brand colors (from vezeti.net) */
  --navy: #0f2a4a;          /* deep brand blue — headings, footer */
  --primary: #14406e;       /* primary blue */
  --accent: #2d7dd2;        /* bright blue — buttons, links */
  --accent-dark: #1f5fa8;   /* hover state */
  --light-blue: #d5e0eb;    /* brand light blue (site theme color) */
  --bg-soft: #f5f8fc;       /* soft section background */
  --text: #33414f;          /* body text */
  --muted: #6b7a89;         /* secondary text */
  --white: #ffffff;
  --border: #e2e9f1;
  --success: #1f9d61;

  /* Typography */
  --font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(15, 42, 74, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 42, 74, 0.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* guards against the hero image's horizontal overshoot */
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-dark); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 72px 0; }

.section-soft { background: var(--bg-soft); }
.section-light-blue { background: var(--light-blue); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section-head .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}
.section-head p { color: var(--muted); margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 30px;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--light-blue); color: var(--navy); }
.btn-lg { padding: 16px 40px; font-size: 1.05rem; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: var(--light-blue);
  font-size: 0.85rem;
  padding: 7px 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { color: var(--light-blue); }
.topbar a:hover { color: var(--white); }
.topbar-contacts { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow); }

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 50px; width: auto; }
.brand .brand-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}
.brand .brand-name span { color: var(--accent); }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: block;
  padding: 26px 14px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
}
.main-nav > li > a:hover, .main-nav > li > a.active { color: var(--accent); }

.has-dropdown > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg) translateY(-3px);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.22s ease;
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 22px;
  font-size: 0.9rem;
  color: var(--text);
}
.dropdown a:hover { background: var(--bg-soft); color: var(--accent); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 10px 24px; }

/* Login menu (header button that opens the list of product portals). It
   reuses .has-dropdown, so it opens on hover and on click like the other
   menus. The padding/negative margin stretches the hover area down to the
   list, so the list does not close while the cursor travels to it. */
.login-menu { position: relative; padding: 16px 0; margin: -16px 0; }
.login-menu > a.btn::after { border-color: currentColor; margin-left: 6px; padding: 2.5px; }
/* Keep the header on one line now that Login carries an arrow */
.nav-wrap { gap: 18px; }
.nav-cta, .brand { flex-shrink: 0; }
.nav-cta .btn { padding: 10px 20px; white-space: nowrap; }
.main-nav > li > a { white-space: nowrap; }
@media (max-width: 1260px) and (min-width: 881px) {
  .main-nav { gap: 0; }
  .main-nav > li > a { padding: 26px 9px; font-size: 0.88rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 9px 15px; font-size: 0.88rem; }
}
@media (max-width: 1000px) and (min-width: 881px) {
  .nav-wrap { gap: 8px; }
  .main-nav > li > a { padding: 26px 4px; font-size: 0.8rem; }
  .has-dropdown > a::after { margin-left: 4px; padding: 2.5px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 8px 11px; font-size: 0.82rem; }
  .brand img { height: 40px; }
  /* Tightest desktop widths: the logo already links home, so the Home link gives way */
  .main-nav > li:first-child { display: none; }
}
.login-menu .login-dropdown {
  left: auto;
  right: 0;
  min-width: 210px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.login-dropdown a {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 0.82rem;
}
/* The copy inside the main menu is for phones only */
.nav-login-mobile { display: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--navy);
  border-radius: 3px;
  transition: all 0.3s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 55%, var(--accent-dark) 100%);
  color: var(--white);
  padding: 96px 0;
}
.hero .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.hero h1 { color: var(--white); margin-bottom: 18px; max-width: 600px; }
.hero .hero-sub { font-size: 1.15rem; color: var(--light-blue); margin-bottom: 30px; max-width: 540px; }
.hero .price-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  padding: 8px 22px;
  font-weight: 600;
  margin-bottom: 26px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap;  }

.hero-content { flex: 1 1 460px; }

/* Image sits in its own column next to the text, sized to the column
   rather than bleeding off the right edge of the viewport. */
/*.hero-image { flex: 100 100 54%; min-width: 0; max-width: 720px; display: flex; justify-content:space-around; }
.hero-lady-img { width: 100%; height:auto; display:flexbox; } */


/* The lady's image container (right side) */
.hero-lady-img {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Make the image larger */
  width: 55%; /* Increase from current size */
  max-width: 700px;
  height: auto;
}
/* The lady's image itself */
.hero-lady-img {
  width: 100%;
  height: auto;
  /* Position so her waist aligns with the blue bottom edge */
  /* The image should extend below the blue section */
  transform: translateY(15%); /* Push image down so waist sits at the boundary */
  /* Optional: scale up the image */
  transform: scale(1.0) translateY(17.8%);
  transform-origin: bottom center;
}


/* ---------- Hero carousel (home page) ----------
   The hero is a row of full-width slides inside .hero-track; main.js moves
   the track left one slide at a time, so each new slide comes in from the
   right. All slides stretch to the tallest one, so the page never jumps. */
.hero-carousel {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.hero-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.hero-track.no-anim { transition: none; }
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 96px 0;
  overflow: hidden;
}
.hero-slide > .container { flex: 1 1 auto; }

/* Promo slide headings look like the main h1 without being a second h1 */
.hero .hero-title {
  color: var(--white);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  margin-bottom: 18px;
  max-width: 600px;
}

/* Each slide gets its own shade so the change is visible as it slides in */
.hero-slide-main  { background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 55%, var(--accent-dark) 100%); }
.promo-cc         { background: linear-gradient(135deg, #0b2440 0%, #14406e 50%, #1b7a8f 100%); }
.promo-phone      { background: linear-gradient(135deg, #132f55 0%, #1f5fa8 60%, #2d7dd2 100%); }
.promo-blog       { background: linear-gradient(135deg, #0f2a4a 0%, #23346b 55%, #3a4fa3 100%); }

/* Soft glowing shapes drifting behind the slide content */
.hero-slide-main::before,
.hero-slide-promo::before,
.hero-slide-promo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
  animation: heroDrift 14s ease-in-out infinite alternate;
}
.hero-slide-main::before,
.hero-slide-promo::before { width: 520px; height: 520px; top: -220px; left: -140px; }
.hero-slide-promo::after  { width: 420px; height: 420px; bottom: -200px; right: 8%; animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes heroDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}
.hero-slide > .container { z-index: 1; }

/* Content rises into place each time its slide becomes the active one */
.hero-slide .hero-content > *,
.hero-slide .hero-promo-visual {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Fade only: a transform here would re-anchor the absolutely placed lady image */
.hero-slide .hero-image { opacity: 0; transition: opacity 0.9s ease; }
.hero-slide.is-active .hero-content > *,
.hero-slide.is-active .hero-promo-visual,
.hero-slide.is-active .hero-image { opacity: 1; transform: none; }
.hero-slide.is-active .hero-content > *:nth-child(1) { transition-delay: 0.25s; }
.hero-slide.is-active .hero-content > *:nth-child(2) { transition-delay: 0.38s; }
.hero-slide.is-active .hero-content > *:nth-child(3) { transition-delay: 0.51s; }
.hero-slide.is-active .hero-content > *:nth-child(4) { transition-delay: 0.64s; }
.hero-slide.is-active .hero-promo-visual,
.hero-slide.is-active .hero-image { transition-delay: 0.45s; }
/* Without JavaScript nothing marks a slide active — keep everything visible */
.hero-carousel:not(.is-ready) .hero-content > *,
.hero-carousel:not(.is-ready) .hero-promo-visual,
.hero-carousel:not(.is-ready) .hero-image { opacity: 1; transform: none; }

/* Right-hand visual on promo slides */
.hero-promo-visual {
  flex: 0 1 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.promo-checklist {
  list-style: none;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 26px 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.promo-checklist li {
  position: relative;
  padding: 11px 0 11px 38px;
  color: var(--white);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.promo-checklist li:last-child { border-bottom: 0; }
.promo-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  font-size: 0.8rem;
  line-height: 24px;
  text-align: center;
}
.promo-phone-img {
  max-height: 380px;
  width: auto;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: heroFloat 5s ease-in-out infinite;
}
.promo-blog-card {
  display: block;
  max-width: 400px;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: rotate(2deg);
  transition: transform 0.4s ease;
}
.promo-blog-card:hover { transform: rotate(0deg) scale(1.03); }
.promo-blog-card img { display: block; width: 100%; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Banner slide: a heading with the banner picture framed underneath. The
   picture is never cropped — it scales to the container width. */
.hero-slide-banner {
  padding: 56px 0 76px;
  background: linear-gradient(135deg, #0b2440 0%, var(--primary) 50%, var(--accent) 100%);
}
.hero .banner-wrap { flex-direction: column; justify-content: center; gap: 22px; }
.banner-title { color: var(--white); text-align: center; }
.banner-wrap picture { display: block; width: 100%; }

/* Banner frame: a border of light that travels round the picture, a soft glow
   behind it, a shine that sweeps across every few seconds, and a gentle
   expand with a deeper shadow when the cursor is over it. */
@property --banner-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.banner-frame {
  --banner-ring: conic-gradient(from var(--banner-angle),
    #2d7dd2 0deg, #7fd1ff 60deg, #ffffff 110deg, #ffd166 150deg,
    #2d7dd2 200deg, #14406e 280deg, #2d7dd2 360deg);
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  padding: 4px;
  border-radius: 20px;
  background: var(--banner-ring);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: bannerSpin 6s linear infinite;
}
/* the glow: a blurred copy of the same ring, sitting just outside the frame */
.banner-frame::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 26px;
  background: var(--banner-ring);
  filter: blur(18px);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
@keyframes bannerSpin { to { --banner-angle: 360deg; } }

.banner-frame picture {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
/* the shine: a slanted band of light crossing the picture */
.banner-frame picture::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  animation: bannerShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bannerShine {
  0%        { transform: translateX(-140%) skewX(-18deg); }
  30%, 100% { transform: translateX(320%) skewX(-18deg); }
}
/* Only the slide on screen animates */
.hero-slide:not(.is-active) .banner-frame,
.hero-slide:not(.is-active) .banner-frame picture::after { animation-play-state: paused; }

/* Expand on hover. `scale` is used (not transform) so it does not fight the
   slide-in animation, which owns transform. */
.hero-slide .banner-wrap > .banner-frame {
  transition: opacity 0.7s ease, transform 0.7s ease, scale 0.4s ease, box-shadow 0.4s ease;
}
.hero-slide.is-active .banner-wrap > .banner-frame { transition-delay: 0.45s, 0.45s, 0s, 0s; }
.banner-frame:hover {
  scale: 1.035;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5), 0 0 46px rgba(127, 209, 255, 0.55);
}
.banner-frame:hover::before { opacity: 0.95; }
.banner-link:focus-visible { outline: 3px solid #ffd166; outline-offset: 6px; }
/* Large screens: the hero takes the shape of the full-bleed banner (2.5 : 1),
   so that banner can fill it edge to edge without being cropped. Every slide
   is the same height, so the others are centred inside that shape. */
@media (min-width: 1200px) {
  /* Wide screens take the banner's shape, but never taller than the space left
     on screen under the header (about 115px), so nothing runs below the fold.
     The banners are sized from --hero-h, so they shrink with it uncropped. */
  .hero-carousel { --hero-h: max(420px, min(40vw, 800px, calc(100vh - 125px))); }
  .hero-carousel .hero-slide { height: var(--hero-h); padding-top: 0; padding-bottom: 0; }

  /* Slide 1: the lady stands on the hero's bottom edge whatever its height */
  .hero-slide-main > .container { align-self: stretch; }
  .hero-slide-main .hero-lady-img {
    width: auto;
    max-width: 55%;
    max-height: 96%;
    transform: none;
  }

  /* Framed banners shrink to fit the hero height instead of overflowing it.
     --ratio is the picture's width / height; --banner-chrome is the space
     kept for the heading, the gaps and the dots. */
  .hero-carousel .hero-slide-banner { padding-bottom: 30px; }
  .banner-frame {
    max-width: calc((var(--hero-h) - var(--banner-chrome, 110px)) * var(--ratio, 2.5));
    margin-inline: auto;
  }
  .banner-title ~ .banner-frame { --banner-chrome: 190px; }

  /* Big banner (add hero-slide-big to a banner slide): the picture is as
     large as the hero allows — it may run wider than the page's text column —
     keeping only a thin margin so the glowing border stays visible. Never
     cropped: the frame is sized from the picture's own shape. */
  .hero .hero-slide-big .banner-wrap { max-width: none; padding: 0 22px; }
  .hero-carousel .hero-slide-big { padding-bottom: 30px; }
  .hero-slide-big .banner-frame { --banner-chrome: 64px; }
  .hero-slide-big .banner-note { display: none; }

  /* Split banner: the picture takes all the height, the text the width left */
  .hero .hero-slide-split .banner-wrap { padding: 0 76px; } /* clears the arrows */
  .hero-slide-split .banner-frame {
    flex: 0 1 calc((var(--hero-h) - var(--banner-chrome)) * var(--ratio));
    width: auto;
    max-width: none;
    margin-inline: 0;
  }

  /* Slide 1's heading eases down a little so it fits the shorter hero */
  .hero-slide-main h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
}
/* Short laptop screens: tighten slide 1 so it fits the capped hero */
@media (min-width: 1200px) and (max-height: 760px) {
  .hero-slide-main h1 { font-size: 2.3rem; margin-bottom: 12px; max-width: 560px; }
  .hero .hero-slide-main .price-tag { margin-bottom: 14px; padding: 6px 18px; font-size: 0.9rem; }
  .hero .hero-slide-main .hero-sub { font-size: 1rem; line-height: 1.55; margin-bottom: 18px; }
  .hero-slide-main .btn-lg { padding: 12px 30px; font-size: 0.98rem; }
}
/* In-between widths: the hero's height comes from its content, so trim the padding */
@media (min-width: 881px) and (max-width: 1199px) {
  .hero-slide { padding: 48px 0 56px; }
  /* Narrower lady and text column, so the phone in her hand clears the paragraph */
  .hero-slide-main .hero-lady-img { width: 46%; right: 24px; }
  .hero .hero-slide-main h1, .hero .hero-slide-main .hero-sub { max-width: 46vw; }
}

/* Split banner (add hero-slide-split to a banner slide): real text in .banner-copy
   beside the framed picture; stacks on phones, with the text first. */
.banner-copy { min-width: 0; }
.hero .banner-copy .hero-title { max-width: none; font-size: clamp(1.6rem, 2.35vw, 2.2rem); }
/* keeps each half of the title whole, so it breaks at the dash */
.banner-copy .hero-title span { display: inline-block; }
.hero .banner-copy .hero-sub { max-width: none; }
@media (min-width: 881px) {
  .hero .hero-slide-split .banner-wrap { flex-direction: row; justify-content: center; gap: 36px; }
  .hero-slide-split .banner-copy { flex: 0 1 460px; min-width: 280px; }
}
@media (min-width: 881px) and (max-width: 1199px) {
  .hero .hero-slide-split .banner-wrap { padding: 0 44px; gap: 28px; }
  .hero-slide-split .banner-frame { flex: 0 1 60%; }
  .hero-slide-split .btn-lg { padding: 12px 24px; font-size: 0.95rem; }
}
@media (max-width: 880px) {
  .hero-slide-split .banner-copy { text-align: center; }
  .hero-slide-split .hero-actions { justify-content: center; }
}

/* Attention shake (add banner-shake to a .banner-frame): a quick side-to-side
   shake, then still, repeating every 5 seconds while the slide is on screen.
   `translate` and `rotate` are used so it does not interfere with the
   slide-in (transform) or the hover expand (scale). */
.banner-frame.banner-shake { animation: bannerSpin 6s linear infinite, bannerShake 5s ease-in-out 1.1s infinite; }
@keyframes bannerShake {
  0%, 14%, 100% { translate: 0 0; rotate: 0deg; }
  2%  { translate: -9px 0; rotate: -0.5deg; }
  4%  { translate: 9px 0;  rotate: 0.5deg; }
  6%  { translate: -7px 0; rotate: -0.4deg; }
  8%  { translate: 7px 0;  rotate: 0.4deg; }
  10% { translate: -4px 0; rotate: -0.2deg; }
  12% { translate: 4px 0;  rotate: 0.2deg; }
}

/* Button under a banner — phones only, where the picture's own "click here" is cropped small */
.banner-cta { display: none; }
/* The picture already carries this wording on wide screens; the note is only
   shown on phones, where the picture is cropped to its left half. */
.banner-note { display: none; color: var(--light-blue); text-align: center; max-width: 520px; }
.hero-slide .banner-wrap > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero-slide.is-active .banner-wrap > * { opacity: 1; transform: none; transition-delay: 0.3s; }
.hero-slide.is-active .banner-wrap > picture { transition-delay: 0.45s; }
.hero-carousel:not(.is-ready) .banner-wrap > * { opacity: 1; transform: none; }

/* Arrows and dots */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 42, 74, 0.45);
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-arrow:hover { background: var(--accent); transform: scale(1.08); }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50px;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(15, 42, 74, 0.25);
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}
.hero-dot.is-active { width: 34px; background: var(--white); }
/* Narrower screens: the slide content reaches the edges, so the arrows shrink
   and fade back until pointed at */
@media (max-width: 1320px) {
  .hero-arrow { width: 36px; height: 36px; margin-top: -18px; font-size: 1.35rem; opacity: 0.55; }
  .hero-arrow:hover, .hero-arrow:focus-visible { opacity: 1; }
  .hero-prev { left: 6px; }
  .hero-next { right: 6px; }
}
.hero-arrow:focus-visible,
.hero-dot:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.hero-carousel:not(.is-ready) .hero-arrow,
.hero-carousel:not(.is-ready) .hero-dots { display: none; }

/* ---------- Updates ticker (home page) ---------- */
.updates-ticker {
  display: flex;
  align-items: stretch;
  background: var(--navy);
  color: var(--white);
  font-size: 0.92rem;
  overflow: hidden;
}
.ticker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 11px 22px;
  background: var(--accent);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.78rem;
  z-index: 1;
  box-shadow: 8px 0 16px rgba(15, 42, 74, 0.6);
}
.ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-track {
  display: flex;
  flex: 0 0 auto;
  list-style: none;
  white-space: nowrap;
  animation: tickerScroll var(--ticker-duration, 45s) linear infinite;
}
.updates-ticker:hover .ticker-track,
.updates-ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track li { padding: 0 34px; position: relative; }
.ticker-track li::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}
.ticker-track a { color: var(--light-blue); }
.ticker-track a:hover { color: var(--white); text-decoration: underline; }
.ticker-track strong { color: #ffd166; font-weight: 600; }
/* main.js doubles the list, so sliding it by half its width loops seamlessly */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Scroll reveal (home page; classes are added by main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Visitors who ask their device for less motion get a still page */
@media (prefers-reduced-motion: reduce) {
  .hero-track { transition: none; }
  .hero-slide .hero-content > *,
  .hero-slide .hero-promo-visual,
  .hero-slide .banner-wrap > *,
  .hero-slide .hero-image { opacity: 1; transform: none; transition: none; }
  .hero-slide-main::before,
  .hero-slide-promo::before,
  .hero-slide-promo::after,
  .promo-phone-img,
  .banner-frame,
  .banner-frame.banner-shake,
  .banner-frame picture::after { animation: none; }
  .banner-frame:hover { scale: none; }
  .ticker-track { animation: none; flex-wrap: wrap; white-space: normal; padding: 8px 0; }
  .ticker-track li { padding: 3px 18px; }
  .ticker-track li[aria-hidden="true"] { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Policy pages (long legal text with numbered sections) ---------- */
.policy p { margin-bottom: 14px; }
.policy h2 { font-size: 1.3rem; margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--border); }
.policy h3 { font-size: 1.02rem; margin: 22px 0 8px; color: var(--primary); }
.policy ul { list-style: disc; margin: 0 0 18px 24px; }
.policy ul li { margin-bottom: 6px; }
.policy-meta { color: var(--muted); }
.policy-meta strong { color: var(--navy); font-family: var(--font-heading); font-size: 1.05rem; }
.policy-contact {
  font-style: normal;
  line-height: 1.9;
  padding: 18px 22px;
  margin-bottom: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Page hero (inner pages) */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 72px 0;
  text-align: center;
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: var(--light-blue); max-width: 720px; margin: 14px auto 0; }

/* ---------- Cards / Grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card img.card-thumb {
  border-radius: 8px;
  margin-bottom: 18px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.95rem; }

.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--light-blue);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

/* Split (text + image) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split h2 { margin-bottom: 16px; }
.split p { margin-bottom: 16px; }
.split .lead { font-size: 1.08rem; color: var(--primary); font-weight: 500; }

/* ---------- Logo strip ---------- */
.logo-strip { padding: 56px 0; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  align-items: center;
}
.logo-grid img {
  filter: grayscale(100%);
  opacity: 0.65;
  transition: all 0.25s ease;
  margin: 0 auto;
  max-height: 56px;
  width: auto;
}
.logo-grid img:hover { filter: none; opacity: 1; }

/* ---------- Pricing ---------- */
.billing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 44px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.billing-toggle .save-badge {
  background: var(--success);
  color: var(--white);
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 50px;
  margin-left: 6px;
}
.switch { position: relative; width: 58px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--light-blue);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(28px); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }

.price-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card.popular { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 50px;
}
.price-card h3 { margin-bottom: 6px; }
.price-card .price {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
}
.price-card .price small { font-size: 0.95rem; color: var(--muted); font-weight: 500; }
.price-card .setup-fee { color: var(--muted); font-size: 0.85rem; margin-bottom: 22px; }
.price-card ul { flex: 1; margin-bottom: 26px; }
.price-card ul li {
  padding: 8px 0 8px 30px;
  position: relative;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--border);
}
.price-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}
.pricing-note { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 26px; }

/* ---------- Sign-up plan cards ---------- */
.plan-card { cursor: pointer; text-align: left; }
.plan-card .plan-radio {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}
.plan-card.selected { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--light-blue);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); color: var(--white); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 24px 22px; color: var(--muted); font-size: 0.95rem; }

/* ---------- Testimonials ---------- */
.testimonial-slider { position: relative; max-width: 820px; margin: 0 auto; }
.testimonial {
  display: none;
  text-align: center;
  padding: 12px 36px;
}
.testimonial.active { display: block; animation: fadeIn 0.5s ease; }
.testimonial blockquote {
  font-size: 1.12rem;
  color: var(--text);
  font-style: italic;
  margin-bottom: 26px;
}
.testimonial .avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
}
.testimonial .t-name { font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.testimonial .t-role { color: var(--muted); font-size: 0.88rem; }

.slider-nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.slider-btn:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--primary), var(--accent-dark));
  color: var(--white);
  text-align: center;
  border-radius: var(--radius);
  padding: 64px 32px;
}
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p { color: var(--light-blue); margin-bottom: 28px; }

/* ---------- Video embed ---------- */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  margin: 40px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-facade::after { content: ""; position: absolute; inset: 0; background: rgba(15, 42, 74, 0.18); transition: background 0.2s ease; }
.video-facade:hover::after { background: rgba(15, 42, 74, 0.32); }
.video-facade .play-btn {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(15, 42, 74, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-facade:hover .play-btn { background: var(--accent); transform: scale(1.08); }
.video-facade .play-btn svg { fill: var(--white); margin-left: 4px; }

/* ---------- Countdown ---------- */
.countdown-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px 0;
}
.countdown-unit {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 110px;
  padding: 22px 10px;
  text-align: center;
}
.countdown-unit .countdown-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--primary);
  line-height: 1;
}
.countdown-unit .countdown-label {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 560px) {
  .countdown-unit { min-width: 76px; padding: 16px 6px; }
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group.full { grid-column: 1 / -1; }
label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
label .req { color: #d23c3c; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15);
  background: var(--white);
}
textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }
.form-feedback { margin-top: 14px; font-weight: 600; display: none; }
.form-feedback.success { display: block; color: var(--success); }
.form-feedback.error { display: block; color: #d23c3c; }

/* ---------- Sign-up page ---------- */
.signup-wrap { max-width: 900px; margin: 0 auto; }
.signup-card { padding: 48px; }
.signup-step-title { margin-bottom: 24px; }
.signup-step-title:not(:first-child) { margin-top: 44px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.checkbox-row label { margin-bottom: 0; font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; color: var(--text); }
.signup-login-note { text-align: center; margin-top: 22px; font-size: 0.92rem; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
.contact-info-card {
  background: var(--navy);
  color: var(--light-blue);
  border-radius: var(--radius);
  padding: 40px;
}
.contact-info-card h3 { color: var(--white); margin-bottom: 22px; }
.contact-info-card .info-row { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.contact-info-card .info-row strong { color: var(--white); display: block; font-family: var(--font-heading); font-size: 0.9rem; }
.contact-info-card a { color: var(--light-blue); }
.contact-info-card a:hover { color: var(--white); }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius); margin-top: 48px; }

/* ---------- Tables (Start-up bundle) ---------- */
.table-wrap { overflow-x: auto; }
table.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.compare th {
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  padding: 16px 20px;
  text-align: left;
  font-size: 1rem;
}
table.compare td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  vertical-align: top;
}
table.compare tr:nth-child(even) td { background: var(--bg-soft); }

/* ---------- Career ---------- */
.job-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin-bottom: 16px;
  transition: box-shadow 0.25s ease;
}
.job-card:hover { box-shadow: var(--shadow); }
.job-card .job-meta { color: var(--muted); font-size: 0.88rem; }
.job-tag {
  display: inline-block;
  background: var(--light-blue);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  margin-right: 8px;
}

/* ---------- Blog ---------- */
.blog-search-bar { max-width: 620px; margin: 0 auto 28px; position: relative; }
.blog-search-bar input[type="search"] {
  width: 100%;
  padding: 15px 22px 15px 48px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}
.blog-search-bar input[type="search"]:focus { box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15); }
.blog-search-bar .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}

.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 48px; }
.blog-filter-btn {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  padding: 8px 20px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.blog-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.blog-filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card { display: flex; flex-direction: column; }
.blog-card-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--light-blue);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.blog-card h3 { margin-bottom: 10px; }
.blog-card h3 a { color: var(--navy); }
.blog-card h3 a:hover { color: var(--accent); }
.blog-card-meta { display: flex; gap: 14px; color: var(--muted); font-size: 0.8rem; margin-top: auto; padding-top: 18px; }
.blog-card-more { margin-top: 16px; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; }
.blog-empty-state { display: none; text-align: center; color: var(--muted); padding: 20px 0 40px; }

/* ---------- Blog article ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--light-blue); }
.breadcrumb a { color: var(--light-blue); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.6; }
.article-meta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--light-blue);
  font-size: 0.9rem;
  margin-top: 16px;
}
.article-cover {
  max-width: 900px;
  margin: -36px auto 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.article-cover img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }

.article-body { max-width: 720px; margin: 0 auto; }
.article-body p { margin-bottom: 20px; }
.article-body h2 { margin: 44px 0 18px; }
.article-body h3 { margin: 32px 0 14px; }
.article-body strong { color: var(--navy); }
.article-body ul, .article-body ol { list-style: disc; margin: 0 0 22px 22px; }
.article-body ul li, .article-body ol li { margin-bottom: 10px; }
.article-figure { margin: 28px 0 32px; }
.article-figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.article-figure figcaption { margin-top: 10px; text-align: center; font-size: 0.85rem; color: var(--muted); }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; }
.article-footnote { color: var(--muted); font-style: italic; font-size: 0.92rem; }

.share-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 40px; }
.share-row span { font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; color: var(--muted); margin-right: 4px; }
.share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.share-btn:hover { background: var(--accent); color: var(--white); }
.share-row.share-row-top { justify-content: center; }
.share-btn { position: relative; }
.share-btn .share-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.share-btn.copied .share-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Engagement bar (views / like / share) ---------- */
.engagement-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 18px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.engagement-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.engagement-stat .emoji { font-size: 1rem; }
.like-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.like-btn .like-icon { font-size: 1.05rem; filter: grayscale(1) opacity(0.55); transition: filter 0.2s ease, transform 0.2s ease; }
.like-btn:hover { border-color: var(--accent); color: var(--accent); }
.like-btn.liked { border-color: var(--accent); color: var(--accent); }
.like-btn.liked .like-icon { filter: none; transform: scale(1.15); }
.engagement-bar .share-row { margin: 0; }
@media (max-width: 560px) {
  .engagement-bar { gap: 14px; padding: 16px; }
}

.article-tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; margin: 8px auto 40px; }

/* ---------- Author bio ---------- */
.author-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto 40px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.author-card .author-avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-card .author-label { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.author-card h4 { margin-bottom: 4px; }
.author-card .author-title { color: var(--accent); font-size: 0.88rem; font-weight: 600; margin-bottom: 10px; }
.author-card p.author-bio-text { color: var(--muted); font-size: 0.94rem; margin: 0; }
@media (max-width: 560px) {
  .author-card { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- App icon / store badge (VezetiPhone marketing page) ---------- */
.app-icon-tile {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: var(--shadow-lg);
}
.app-icon-tile svg { width: 46px; height: 46px; fill: var(--white); }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  border-radius: 12px;
  padding: 12px 22px;
  font-family: var(--font-heading);
  cursor: default;
}
.store-badge .store-badge-icon { font-size: 1.5rem; line-height: 1; }
.store-badge .store-badge-text { text-align: left; line-height: 1.25; }
.store-badge .store-badge-text small { display: block; font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.store-badge .store-badge-text span { display: block; font-size: 1rem; font-weight: 600; }

/* ---------- Device-framed screenshots ---------- */
.screenshot-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 36px;
  margin: 40px 0;
}
.screenshot-item { text-align: center; max-width: 240px; }
.device-mockup {
  background: #101418;
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
}
.device-mockup.device-tablet { border-radius: 22px; padding: 12px; }
.device-mockup .device-cam { width: 7px; height: 7px; border-radius: 50%; background: #2a2f36; margin: 0 auto 6px; }
.device-mockup img { display: block; width: 100%; border-radius: 22px; }
.device-mockup.device-tablet img { border-radius: 10px; }
.screenshot-item .screenshot-caption { display: block; margin-top: 14px; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--navy); }
@media (max-width: 560px) {
  .screenshot-gallery { gap: 24px; }
  .screenshot-item { max-width: 190px; }
}

/* ---------- Blog comments ---------- */
.comments-section { max-width: 720px; margin: 64px auto 0; }
.comments-section h2 { margin-bottom: 6px; }
.comments-count { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }

.comment-list { margin-bottom: 36px; }
.comment-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: 0; }
.comment-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.comment-name { font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.comment-date { color: var(--muted); font-size: 0.8rem; }
.comment-message { color: var(--text); font-size: 0.95rem; white-space: pre-wrap; word-wrap: break-word; }
.comment-empty { color: var(--muted); font-size: 0.92rem; margin-bottom: 36px; }

.comment-form-card h3 { margin-bottom: 18px; }
.comment-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #b8c7d6;
  padding: 72px 0 0;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer h4 {
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site-footer ul li { margin-bottom: 11px; }
.site-footer a { color: #b8c7d6; }
.site-footer a:hover { color: var(--white); }

.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.social-row a:hover { background: var(--accent); color: var(--white); }

.newsletter-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.newsletter-input-row { display: flex; gap: 0; }
.newsletter-input-row input {
  border-radius: 50px 0 0 50px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
.newsletter-input-row input::placeholder { color: #93a7ba; }
.newsletter-input-row button {
  border: 0;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 0 24px;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.newsletter-input-row button:hover { background: var(--accent-dark); }

/* Data protection compliance panel — sits above the copyright line on every page */
.footer-compliance {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 40px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.07), rgba(45, 125, 210, 0.12));
}
.footer-compliance-badge {
  flex: 0 0 auto;
  display: block;
  width: 132px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  cursor: zoom-in;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-compliance-badge:hover { transform: scale(1.06); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.footer-compliance-badge img { display: block; width: 100%; height: auto; }
.footer-compliance-text { flex: 1 1 auto; min-width: 0; }
.footer-compliance-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7fd1ff;
  margin-bottom: 4px;
}
.footer-compliance-text strong { display: block; color: var(--white); font-family: var(--font-heading); font-size: 1rem; margin-bottom: 4px; }
.footer-compliance-text p { font-size: 0.88rem; line-height: 1.55; }
.site-footer a.footer-compliance-btn {
  flex: 0 0 auto;
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50px;
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-footer a.footer-compliance-btn:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) {
  .footer-compliance { flex-direction: column; text-align: center; gap: 16px; }
  .footer-compliance-badge { width: 180px; }
}

/* Floating compliance badge (top right; built by main.js on every page) */
.ndpc-float {
  position: fixed;
  top: 128px;
  right: 18px;
  z-index: 900; /* under the sticky header (1000) so menus open over it */
  width: 300px;
  padding: 10px 10px 0;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 16px 44px rgba(15, 42, 74, 0.32);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ndpc-float.is-shown { opacity: 1; transform: none; }
.ndpc-float-img {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
}
.ndpc-float-img img { display: block; width: 100%; height: auto; }
.ndpc-float-actions { display: flex; justify-content: space-between; gap: 6px; padding: 8px 2px 10px; }
.ndpc-float-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.ndpc-float-link:hover { color: var(--accent-dark); text-decoration: underline; }
.ndpc-float-img:focus-visible,
.ndpc-float-link:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.ndpc-close {
  position: absolute;
  top: -11px;
  left: -11px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--navy);
  color: var(--white);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ndpc-close:hover { background: #c0392b; transform: scale(1.1); }
.ndpc-close:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
/* Smaller laptops: a little narrower so it covers less of the page */
@media (max-width: 1320px) {
  .ndpc-float { width: 250px; }
}
@media (max-width: 880px) {
  .ndpc-float { top: 88px; right: 10px; width: 150px; padding: 6px 6px 0; border-radius: 12px; }
  .ndpc-float-actions { flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 8px; }
  .ndpc-float-link { font-size: 0.72rem; }
}

/* Enlarged badge: big enough for a phone camera to read the QR code on any screen */
.ndpc-zoom {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 28, 50, 0.78);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ndpc-zoom.is-shown { opacity: 1; }
.ndpc-zoom-card {
  position: relative;
  width: min(720px, 100%, calc(100vh - 112px));
  padding: 12px 12px 0;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  transition: transform 0.25s ease;
}
.ndpc-zoom.is-shown .ndpc-zoom-card { transform: none; }
.ndpc-zoom-card img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ndpc-zoom-card .ndpc-close { top: -13px; left: auto; right: -13px; width: 38px; height: 38px; font-size: 1.4rem; }
.ndpc-zoom-hint { padding: 12px 6px 14px; text-align: center; font-size: 0.92rem; color: var(--text); }
.ndpc-zoom-hint a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .ndpc-float, .ndpc-zoom, .ndpc-zoom-card { transition: none; transform: none; }
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  text-align: center;
  font-size: 0.85rem;
}

/* ---------- Scroll to top ---------- */
#scrollTop {
  position: fixed;
  right: 20px; /* centred above the web chat button */
  bottom: 96px; /* clears the web chat frame, 88px tall when closed */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 900;
  box-shadow: var(--shadow);
}
#scrollTop.visible { opacity: 1; visibility: visible; }
#scrollTop:hover { background: var(--accent-dark); transform: translateY(-3px); }

/* ---------- WhatsApp chat button ---------- */
.whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 900;
  transition: all 0.3s ease;
}
.whatsapp-float:hover { background: #1ebe5b; transform: translateY(-3px); color: #fff; }
@keyframes whatsappPop {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.2); }
  55% { transform: scale(0.94); }
  75% { transform: scale(1.08); }
}
.whatsapp-float.pop, .telegram-float.pop { animation: whatsappPop 0.7s ease; }

/* Telegram live chat: same size and height as WhatsApp, directly beside it, in Telegram's own blue */
.telegram-float {
  position: fixed;
  left: 92px; /* WhatsApp's left (24) + its width (56) + a 12px gap */
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 900;
  transition: all 0.3s ease;
}
.telegram-float svg { display: block; }
.telegram-float:hover { filter: brightness(0.92); transform: translateY(-3px); color: #fff; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 32px; }
.hidden { display: none !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .main-nav > li > a { padding: 26px 10px; font-size: 0.88rem; }
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 90px 0 40px;
    box-shadow: var(--shadow-lg);
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 999;
  }
  .main-nav.open { right: 0; }
  .main-nav > li > a { padding: 14px 28px; border-bottom: 1px solid var(--border); }

  .dropdown {
    position: static;
    opacity: 1;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    max-height: 0;
    padding: 0;
    background: var(--bg-soft);
    transition: max-height 0.3s ease;
  }
  .has-dropdown.open .dropdown { visibility: visible; max-height: 500px; }
  .dropdown a { padding: 11px 40px; }

  .nav-cta .btn-outline, .login-menu { display: none; }
  .nav-login-mobile { display: block; }

  .split, .contact-grid { grid-template-columns: 1fr; }
  .hero .container { flex-direction: column; align-items: stretch; }
  .hero h1, .hero .hero-title { max-width: none; }
  /* Phones: the lady sits under the buttons, standing on the bottom edge,
     instead of floating over the text. */
  .hero-slide { padding: 56px 0 64px; align-items: flex-start; }
  .hero-slide-main { padding-bottom: 0; }
  .hero-image { max-width: 340px; margin: 28px auto 0; }
  .hero-lady-img { position: static; display: block; width: 100%; max-width: none; transform: none; }
  .hero-promo-visual { flex: 0 0 auto; margin-top: 8px; }
  .promo-phone-img { max-height: 300px; }
  .promo-blog-card { max-width: 340px; }
  /* Banner slide on phones: add the thank-you wording as real text */
  .hero-slide-banner { padding: 48px 0 64px; align-items: center; }
  .hero .banner-wrap { align-items: center; }
  .banner-note { display: block; }
  .banner-cta { display: inline-block; }
  .hero-arrow { display: none; }
  .ticker-label { padding: 10px 14px; }
  .grid-3, .pricing-grid, .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .article-cover { margin-top: 0; }
  section { padding: 56px 0; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar { display: none; }
  .job-card { flex-direction: column; align-items: flex-start; }
}

/* WebP hero: the <picture> wrapper must not change the layout of the img inside it */
.hero-image picture { display: contents; }