/* ==========================================================================
   ManoCarPlay - base stylesheet
   Fonts, design tokens, resets, layout helpers, shared components
   ========================================================================== */

@font-face {
  font-family: "Clash";
  src: url("../fonts/ClashGrotesk-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Mori";
  src: url("../fonts/PPMori-Regular.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "MoriSemi";
  src: url("../fonts/PPMori-SemiBold.otf") format("opentype");
  font-display: swap;
}

:root {
  --navy: #080e41;
  --navy-80: rgba(8, 14, 65, 0.5);
  --navy-40: rgba(8, 14, 65, 0.25);
  --blue: #1a258a;
  --light-blue: #f0f4f8;
  --soft-blue: #aac9f4;
  --green: #a5ef72;
  --green-light: #cff5b5;
  --green-dark: #00ac1d;
  --pink: #fe4d77;
  --white: #fff;
  --page-width: 1400px;
  --header-width: 1300px;
  --radius: 4px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: "Mori", sans-serif;
  font-size: 16px;
  line-height: 1.3em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: "Clash", sans-serif; font-weight: 400; }
p, a, div, span, li, input, button, label { font-family: "Mori", sans-serif; }
img { border: 0; }
a { color: inherit; }
button { font: inherit; }

/* --------------------------------------------------------- layout helpers */
.he_page-width { max-width: var(--page-width); margin: auto; padding: 0 16px; }
.he_page-width * { letter-spacing: 0; }
.he_product-outer-section { padding: 64px 0; }
.he_product-outer-section.greyBgFull { background: linear-gradient(180deg, #fff, #f0f4f8 35%); }
.he_product-outer-section.ha_light-blue-bg_fromwhite { background: linear-gradient(180deg, #fff, #f0f4f8 35%); }
.blueAllBg { background: var(--blue) !important; }
.blueAllBg * { color: #fff !important; }

/* Visibility helpers: only ever *hide*, so an element keeps whatever display
   value its own component rule gives it (flex, grid, …). */
@media (min-width: 679px) { .Mobile_only { display: none !important; } }
@media (max-width: 678px) { .Desktop_only { display: none !important; } }
.hided { display: none !important; }

/* dotted rule used across the whole site (6px repeat, 2px tall) */
.hea_border-line {
  display: block !important;
  width: 100%;
  min-width: 2px;
  min-height: 2px;
  background-color: var(--navy-80);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2' viewBox='0 0 6 2'%3E%3Cpath d='M1 1H6' stroke='%23292923' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='0.01 6'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2' viewBox='0 0 6 2'%3E%3Cpath d='M1 1H6' stroke='%23292923' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='0.01 6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 6px 2px;
  mask-size: 6px 2px;
  -webkit-mask-position: top left;
  mask-position: top left;
}

/* ----------------------------------------------------------- shared type */
.he_product-main-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.15em;
  font-weight: 400;
}
.he_product-main-title span {
  background: var(--green-light);
  padding: 0 4px;
  line-height: 1.3em;
}
.he_product-main-title.borderedSpan span { background: transparent; font-weight: 500; }
.he_product-main-title.hugeTitle { font-size: 64px; }
.he_product-main-subtitle { margin: 0; font-size: 26px; line-height: 1.15em; font-weight: 400; }

.he_product-text { margin: 16px 0; font-size: 16px; line-height: 1.3em; }
.he_product-text * { font-size: 16px; line-height: 1.3em; margin: 0; }
.he_product-medium-text { margin: 16px 0; }
.he_product-medium-text * {
  font-size: 20px; line-height: 1.3em; margin: 0; max-width: 400px;
  font-family: "Clash", sans-serif;
}

/* ------------------------------------------------------------- buttons */
.he_product-cta,
.he_product-cta__url {
  display: block;
  padding: 16px;
  background: var(--green);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3em;
  color: var(--navy) !important;
  font-family: "MoriSemi", sans-serif;
  transition: filter 0.2s;
}
.he_product-cta:hover,
.he_product-cta__url:hover { filter: brightness(0.95); }
/* ta pati klase naudojama ir <button> elementams (i krepseli) */
button.he_product-cta,
button.he_product-cta__url {
  width: 100%; border: 0; -webkit-appearance: none; appearance: none;
}
.he_product-cta-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; line-height: 1.3em; margin: 12px 0 0;
}
.he_product-cta-footer span { display: flex; align-items: center; color: var(--navy-80) !important; }
.he_product-cta-footer img { max-width: 20px; position: relative; bottom: 2px; }

/* --------------------------------------------------------- press ticker */
.section_press_logos_outer { position: relative; margin: auto auto 32px; }
.section_press_logos_outer .section_holder {
  position: relative; max-width: 100vw; margin: auto; line-height: 1; background: #fff;
}
@keyframes logo_scroll { 0% { transform: translate(0); } 100% { transform: translate(-50%); } }
.section_press_logos_outer .press_logos_wrapper {
  display: grid; margin: auto; grid-template-columns: 1fr; justify-items: center;
  text-align: center; padding: 0; align-content: center; grid-gap: 20px 70px;
  padding-top: 40px !important; padding-bottom: 40px !important; align-items: center;
}
.section_press_logos_outer .title_wrap { font-size: 24px; color: var(--navy); margin: 0; }
.section_press_logos_outer .auto_scrolling_logos { width: 100%; overflow: hidden; min-width: 1px; }
.section_press_logos_outer .logos_wrap {
  display: flex; animation: logo_scroll 60s infinite linear; align-items: center; width: fit-content;
}
.logos-wrap_text {
  color: var(--navy); margin: 0 16px; font-size: 16px; line-height: 1.3em; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Clash", sans-serif;
}
.logos-wrap_text span { display: flex; align-items: center; }
.logos-wrap_text span img { width: 16px !important; display: block !important; margin: 0 !important; height: auto !important; }

/* --------------------------------------------------- money back section */
.he_money-guarantee-box { background: var(--light-blue); padding: 40px; }
.he_guarantee-grid { display: flex; gap: 20px; margin-top: 50px; }
.he_guarantee-grid > div { width: 100%; }
.he_guarantee-grid-box { background: #fff; padding: 16px; border-radius: var(--radius); }
.he_guarantee-header { display: flex; align-items: center; gap: 20px; }
.he_guarantee-header > div:nth-child(1) { width: 20%; }
.he_guarantee-header > div:nth-child(2) { width: 80%; }
.he_guarantee-header img { display: block; width: 100%; border-radius: var(--radius); }
.he_guarantee-header h4 { margin: 0; font-size: 24px; line-height: 1.15em; font-weight: 400; }
.he_guarantee-box-content { margin-top: 16px; padding-top: 8px; position: relative; }
.he_guarantee-box-content .hea_border-line { position: absolute; top: 0; left: 0; background-color: var(--navy-80); }
.he_guarantee-box-content p { font-size: 14px; line-height: 1.15em; margin: 8px 0 0; opacity: 0.7; }

/* ------------------------------------------------------------ utilities */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 678px) {
  .he_product-outer-section { padding: 24px 0; overflow: hidden; }
  .he_product-main-title { font-size: 36px; line-height: 1.15em; }
  .he_product-main-title.hugeTitle { font-size: 40px; }
  .he_product-main-subtitle { font-size: 20px; }
  .he_product-text { margin: 8px 0; }
  .he_product-cta, .he_product-cta__url { font-size: 14px; }
  .he_product-btn-container { margin-top: 12px; }

  .he_money-guarantee-box { padding: 32px 16px; }
  .he_guarantee-grid { flex-wrap: wrap; gap: 8px; margin-top: 40px; }
  .he_guarantee-header > div:nth-child(1) { width: 30%; }

  .section_press_logos_outer .press_logos_wrapper {
    padding-top: 24px !important; padding-bottom: 24px !important;
  }
}