.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   TINT ACADEMY LA — GLOBAL STYLES
   Один файл. Куди вставляти:
   WP Admin → Elementor → Site Settings → Custom CSS
============================================================ */

/* ============ FONTS ============ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');

/* ============ ROOT VARIABLES ============ */
:root{
  --tac-bg:#000;
  --tac-bg-2:#0a0a0a;
  --tac-bg-3:#101010;
  --tac-line:#1d1d1d;
  --tac-text:#ffffff;
  --tac-mute:#9a9a9a;
  --tac-muted:#bdbdbd;
  --tac-red:#e10600;
  --tac-red-dark:#7a0000;
}

/* ============================================================
   1 · БАЗА — html / body / scrollbar / selection
============================================================ */

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

body,
body.elementor-page{
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
  color:#fff !important;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection      {background:#e10600; color:#fff;}
::-moz-selection {background:#e10600; color:#fff;}

::-webkit-scrollbar             {width:8px; height:8px;}
::-webkit-scrollbar-track       {background:#000;}
::-webkit-scrollbar-thumb       {background:#2a2a2a; border-radius:4px;}
::-webkit-scrollbar-thumb:hover {background:#e10600;}

/* ============================================================
   2 · ELEMENTOR — обнуляємо padding / margin / height
============================================================ */

/* ───── FLEXBOX CONTAINERS (новий движок Elementor v3.16+) ───── */
/* Це найголовніше — обнуляє padding/gap/margin на нових контейнерах */

html body.elementor-page .e-con,
html body.elementor-page .e-con.e-flex,
html body.elementor-page .e-con.e-grid,
html body.elementor-page .e-con-boxed,
html body.elementor-page .e-con-full,
html body.elementor-page [data-element_type="container"],
html body.elementor-page .elementor-element[data-element_type="container"]{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
  max-width:100% !important;
  width:100% !important;

  /* Перебиваємо CSS-змінні Elementor через які він стилізує контейнер */
  --padding-top:0 !important;
  --padding-right:0 !important;
  --padding-bottom:0 !important;
  --padding-left:0 !important;
  --padding-block-start:0 !important;
  --padding-block-end:0 !important;
  --padding-inline-start:0 !important;
  --padding-inline-end:0 !important;
  --margin-top:0 !important;
  --margin-right:0 !important;
  --margin-bottom:0 !important;
  --margin-left:0 !important;
  --margin-block-start:0 !important;
  --margin-block-end:0 !important;
  --margin-inline-start:0 !important;
  --margin-inline-end:0 !important;
  --gap:0 !important;
  --row-gap:0 !important;
  --column-gap:0 !important;
  --grid-gap:0 !important;
  --min-height:0 !important;
  --content-width:100% !important;
  --container-max-width:100% !important;
  --container-widget-width:100% !important;
}

/* Inner container (всередині .e-con > .e-con-inner) */
html body.elementor-page .e-con > .e-con-inner,
html body.elementor-page .e-con-inner{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
  max-width:100% !important;
  width:100% !important;
}

/* Widgets всередині контейнера — вже мають свої правила нижче,
   але дублюємо для гарантії */
html body.elementor-page .e-con > .elementor-widget,
html body.elementor-page .e-con-inner > .elementor-widget,
html body.elementor-page .e-con > .elementor-element{
  margin:0 !important;
  padding:0 !important;
  --margin-top:0 !important;
  --margin-bottom:0 !important;
  --padding-top:0 !important;
  --padding-bottom:0 !important;
  width:100% !important;
}

/* ───── СТАРІ SECTIONS (Elementor pre-v3.16) ───── */
/* Sections */
html body.elementor-page .elementor-section,
html body.elementor-page .elementor-top-section,
html body.elementor-page .elementor-inner-section,
html body.elementor-page .elementor-section.elementor-section-boxed,
html body.elementor-page .elementor-section.elementor-section-stretched,
html body.elementor-page .elementor-section.elementor-section-height-default,
html body.elementor-page .elementor-section.elementor-section-height-full,
html body.elementor-page .elementor-section.elementor-section-height-min-height,
html body.elementor-page .elementor-section[data-element_type="section"],
html body.elementor-page .elementor-element.elementor-section{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* Container / row + всі типи column-gap */
html body.elementor-page .elementor-container,
html body.elementor-page .elementor-row,
html body.elementor-page .elementor-section > .elementor-container,
html body.elementor-page .elementor-container.elementor-column-gap-default,
html body.elementor-page .elementor-container.elementor-column-gap-no,
html body.elementor-page .elementor-container.elementor-column-gap-narrow,
html body.elementor-page .elementor-container.elementor-column-gap-extended,
html body.elementor-page .elementor-container.elementor-column-gap-wide,
html body.elementor-page .elementor-container.elementor-column-gap-wider{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  max-width:100% !important;
  width:100% !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
}

/* Columns */
html body.elementor-page .elementor-column,
html body.elementor-page .elementor-column-wrap,
html body.elementor-page .elementor-element-populated,
html body.elementor-page .elementor-widget-wrap,
html body.elementor-page .elementor-inner-column,
html body.elementor-page [data-element_type="column"],
html body.elementor-page .elementor .elementor-column.elementor-col-100,
html body.elementor-page .elementor .elementor-column.elementor-col-50{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  width:100% !important;
}

/* Widgets — головна причина зазорів (дефолт margin-bottom:20px) */
html body.elementor-page .elementor-widget,
html body.elementor-page .elementor-widget-html,
html body.elementor-page .elementor-element,
html body.elementor-page .elementor-element[data-element_type$=".html"],
html body.elementor-page .elementor-widget:not(:last-child){
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
}

html body.elementor-page .elementor-widget .elementor-widget-container,
html body.elementor-page .elementor-widget-html .elementor-widget-container{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  overflow:visible !important;
}

/* Псевдо-елементи / shape dividers */
html body.elementor-page .elementor-shape{display:none !important;}
html body.elementor-page .elementor-section::before,
html body.elementor-page .elementor-section::after,
html body.elementor-page .elementor-column::before,
html body.elementor-page .elementor-column::after{
  display:none !important;
  content:none !important;
}

/* ============================================================
   3 · ТЕМА — обнуляємо main / content / article
============================================================ */

html body.elementor-page main,
html body.elementor-page .site-main,
html body.elementor-page .site-content,
html body.elementor-page #content,
html body.elementor-page #main,
html body.elementor-page #primary,
html body.elementor-page .entry-content,
html body.elementor-page .post-content,
html body.elementor-page .page-content,
html body.elementor-page article,
html body.elementor-page .post,
html body.elementor-page .page,
html body.elementor-page .hentry{
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  min-height:0 !important;
}

/* Ховаємо дефолтні headers/titles теми */
.entry-header,
.page-header,
.entry-title:not([class*="tac-"]),
.elementor-page .site-header + .entry-content > .entry-header{
  display:none;
}

/* Порожні елементи що теми створюють */
html body.elementor-page > p:empty,
html body.elementor-page > div:empty{
  display:none !important;
}

/* ============================================================
   4 · РЕСЕТ ВСЕРЕДИНІ НАШИХ БЛОКІВ (.tac-*)
============================================================ */

[class^="tac-"], [class*=" tac-"],
[class^="tac-"] *, [class*=" tac-"] *{
  box-sizing:border-box;
}

[class^="tac-"] h1, [class^="tac-"] h2, [class^="tac-"] h3,
[class^="tac-"] h4, [class^="tac-"] h5, [class^="tac-"] h6,
[class*=" tac-"] h1, [class*=" tac-"] h2, [class*=" tac-"] h3,
[class*=" tac-"] h4, [class*=" tac-"] h5, [class*=" tac-"] h6{
  margin:0;
  padding:0;
  color:#fff;
  font-weight:normal;
  line-height:1;
  font-family:'Bebas Neue','Oswald',sans-serif;
}

[class^="tac-"] p,
[class*=" tac-"] p{margin:0; padding:0;}

[class^="tac-"] ul, [class^="tac-"] ol,
[class*=" tac-"] ul, [class*=" tac-"] ol{
  list-style:none; margin:0; padding:0;
}

[class^="tac-"] a,
[class*=" tac-"] a{
  text-decoration:none;
  color:inherit;
  transition:color .25s ease;
}

[class^="tac-"] img,
[class*=" tac-"] img{
  max-width:100%; height:auto; display:block; border:0;
}

[class^="tac-"] button,
[class*=" tac-"] button{
  font-family:inherit; cursor:pointer; border:0; background:none;
}

[class^="tac-"] input,
[class^="tac-"] select,
[class^="tac-"] textarea,
[class*=" tac-"] input,
[class*=" tac-"] select,
[class*=" tac-"] textarea{
  font-family:inherit;
  outline:none;
  border-radius:0;
  -webkit-appearance:none;
}

/* ============================================================
   5 · FULL-WIDTH BREAKOUT — блоки на всю ширину екрану
============================================================ */

.elementor-widget-html .tac-header,
.elementor-widget-html .tac-hero,
.elementor-widget-html .tac-features,
.elementor-widget-html .tac-earn,
.elementor-widget-html .tac-bonus,
.elementor-widget-html .tac-rev,
.elementor-widget-html .tac-apply,
.elementor-widget-html .tac-foot{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  position:relative;
  left:0;
  right:0;
}

/* Header — фіксований, окрема історія */
.elementor-widget-html .tac-header{
  position:fixed !important;
  margin:0 !important;
  width:100% !important;
  left:0 !important;
}

/* Inner-контейнери — обмежуємо до 1320px */
.elementor-widget-html .tac-hero__inner,
.elementor-widget-html .tac-features__inner,
.elementor-widget-html .tac-earn__inner,
.elementor-widget-html .tac-bonus__inner,
.elementor-widget-html .tac-rev__inner,
.elementor-widget-html .tac-apply__inner,
.elementor-widget-html .tac-foot__inner{
  width:100% !important;
  max-width:1320px !important;
}

/* ============================================================
   6 · HERO — пропорції та контраст
============================================================ */

.tac-hero{
  padding:140px 0 90px !important;
  min-height:auto !important;
}

.tac-hero__inner{
  padding:0 40px !important;
  gap:50px !important;
}
@media(min-width:1400px){
  .tac-hero__inner{padding:0 60px !important;}
}

/* "/ АВТО" — світліший і більший */
.tac-hero__title .l3{
  font-size:.7em !important;
  color:#bdbdbd !important;
  letter-spacing:4px !important;
  margin-top:6px;
}

/* "ТОНИРОВКЕ" — silver-градієнт */
.tac-hero__title .l2{
  background:linear-gradient(180deg,#ffffff 0%,#cccccc 60%,#888888 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* Червона лінія під "ТОНИРОВКЕ" */
.tac-hero__title .l2::after{
  width:160px !important;
  height:4px !important;
  background:#e10600 !important;
  bottom:4px !important;
}

/* "15 МАЯ" — світліший градієнт */
.tac-date__day{
  background:linear-gradient(180deg,#ffffff 0%,#dcdcdc 50%,#a0a0a0 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* Картка з датою — blur + анімовані куточки */
.tac-card{
  background:rgba(255,255,255,.025) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}
.tac-card::before, .tac-card::after{
  width:36px !important;
  height:36px !important;
  border-width:2px !important;
  transition:all .4s ease;
}
.tac-card:hover::before{top:-6px !important; left:-6px !important;}
.tac-card:hover::after {bottom:-6px !important; right:-6px !important;}

.tac-price{
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.05);
}

.tac-header{
  background:rgba(0,0,0,.75) !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}

/* ============================================================
   7 · КНОПКИ — primary з accent-куточком, ghost
============================================================ */

.tac-btn,
.tac-hero .tac-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  padding:18px 36px !important;
  font-family:'Bebas Neue',sans-serif !important;
  font-size:18px !important;
  letter-spacing:3px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  border:0;
  position:relative !important;
  overflow:hidden !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  transition:transform .3s ease, color .3s ease, background .3s ease;
}

/* PRIMARY */
.tac-btn--primary{
  background:#fff !important;
  color:#000 !important;
}
.tac-btn--primary span{
  color:#000 !important;
  position:relative;
  z-index:2;
  transition:color .35s ease;
}
.tac-btn--primary::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,#e10600 0%,#ff2820 100%) !important;
  transform:translateY(101%) !important;
  transition:transform .4s cubic-bezier(.7,0,.2,1) !important;
  z-index:1 !important;
}
.tac-btn--primary::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:14px; height:100%;
  background:#000;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  z-index:3;
  transition:background .35s ease;
}
.tac-btn--primary:hover            {transform:translateY(-2px);}
.tac-btn--primary:hover span       {color:#fff !important;}
.tac-btn--primary:hover::before    {transform:translateY(0) !important;}
.tac-btn--primary:hover::after     {background:#fff;}

/* GHOST */
.tac-btn--ghost{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.3) !important;
}
.tac-btn--ghost span{
  color:#fff !important;
  position:relative;
  z-index:2;
}
.tac-btn--ghost:hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.05) !important;
}

/* ============================================================
   8 · ANCHOR SCROLL — відступ під фіксований header
============================================================ */

[id="about"], [id="features"], [id="earnings"],
[id="reviews"], [id="apply"]{
  scroll-margin-top:120px;   /* більше через лого що звисає */
}

/* ============================================================
   9 · CF7 — глобальні фікси для форми
============================================================ */

.tac-form-wrap .wpcf7              {margin:0 !important; padding:0 !important;}
.tac-form-wrap .wpcf7-form         {margin:0 !important;}
.tac-form-wrap .wpcf7 br           {display:none;}
.tac-form-wrap .wpcf7-form-control-wrap{display:block; width:100%;}
.tac-form-wrap .screen-reader-response{display:none !important;}
.tac-form-wrap .wpcf7-spinner{
  background:#fff !important;
  margin:0 0 0 12px !important;
  vertical-align:middle;
}

/* ============================================================
   10 · WP ADMIN BAR — компенсація для фіксованого header
============================================================ */

@media screen and (min-width:783px){
  body.admin-bar .tac-header{top:32px !important;}
}
@media screen and (max-width:782px){
  body.admin-bar .tac-header{top:46px !important;}
}

/* ============================================================
   11 · МОБІЛЬНІ
============================================================ */

@media(max-width:980px){
  html body.elementor-page .elementor-section .elementor-container{
    padding:0 !important;
  }
}

@media(max-width:560px){
  .tac-hero__actions{
    flex-direction:column;
    width:100%;
  }
  .tac-hero__actions .tac-btn{
    width:100%;
    padding:18px 24px !important;
  }
  .tac-hero__inner   {padding:0 20px !important;}
  .tac-date__day     {font-size:64px !important;}
  .tac-price__now    {font-size:64px !important;}
}

/* ============================================================
   12 · PRINT
============================================================ */

@media print{
  .tac-header, .tac-foot{display:none;}
}/* End custom CSS */