/* light Weight */
@font-face {
  font-family: 'reisinger michal';
  src: url('../../assets/fonts/reisinger-michal-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap; 
}

/* Regular Weight */
@font-face {
  font-family: 'reisinger michal';
  src: url('../../assets/fonts/reisinger-michal-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold Weight */
@font-face {
  font-family: 'reisinger michal';
  src: url('../../assets/fonts/reisinger-michal-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}




/******** 1. Use a more-intuitive box-sizing model ********/
*, *::before, *::after { box-sizing: border-box; }


/******** 2. Remove default margin ********/
*:not(dialog) { margin: 0; }


/******** 3. Accessible rem basis (1rem = 10px, but respects user browser settings) ********/
html { 
  font-size: 62.5%;  
  scroll-behavior: smooth;
    /* font-size: calc(100vw / 144); */

}



/******** 4. Set core body defaults ********/
body {
  font-family: var(--font-main);
  font-weight: var(--fw-light);
  text-align: center;
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body,html{  overflow-x: hidden; }


/******** 5. Inherit fonts for form controls ********/
input, button, textarea, select { font: inherit; }


/******** 6. Avoid text overflows and improve readability ********/

/* Prevents long words or URLs from breaking outside their container */
p, h1, h2, h3, h4, h5, h6, span, a { 
  overflow-wrap: break-word; 
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Prevents a single lonely word from sitting by itself on the very last line */
p { text-wrap: pretty; }

/* Evens out the width of multi-line titles so they look symmetrical */
/* h1, h2, h3, h4, h5, h6 { text-wrap: balance;  } */


/******** 7. Image, SVG, and Media Reset ********/
img, svg, picture, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/******** 8. Reset Anchor Link ********/
a {
  color: inherit;
  text-decoration: none;
}

strong, b{font-weight: var(--fw-bold);}


/******** Global Canvas & Dark Background ********/
  html , body {background-color: var(--bg-main);}




:root {

        /* =========================================
        Spacing System (4px Grid)
        ========================================= */
        --space-4: 0.4rem;
        --space-8: 0.8rem;
        --space-12: 1.2rem;
        --space-16: 1.6rem;
        --space-18: 1.8rem;
        --space-20: 2.0rem;
        --space-24: 2.4rem;
        --space-27: 2.7rem;
        --space-28: 2.8rem;
        --space-30: 3rem;
        --space-32: 3.2rem;
        --space-36: 3.6rem;
        --space-40: 4.0rem;
        --space-44: 4.4rem;
        --space-48: 4.8rem;
        --space-52: 5.2rem;
        --space-56: 5.6rem;
        --space-60: 6.0rem;
        --space-64: 6.4rem;
        --space-68: 6.8rem;
        --space-72: 7.2rem;
        --space-76: 7.6rem;
        --space-80: 8.0rem;
        --space-84: 8.4rem;
        --space-88: 8.8rem;
        --space-92: 9.2rem;
        --space-96: 9.6rem;
        --space-100: 10.0rem;
        --space-120: 12.0rem;
        --space-160: 16.0rem;

        /* =========================================
        Layout margins and Gutters
        ========================================= */
        --layout-grid-margin: clamp(1.2rem, -6.60rem + 20.00vw, 2.4rem);
        --ticker-gap: var(--space-92);
        --ticker-gap-mobile: var(--space-52);
        

    /* =========================================
        60% - Background Colors
        ========================================= */
        --bg-main: #1E232B;
        --bg-secondary: #292E3F;

    /* =========================================
        30% - Text Colors
        ========================================= */
        --text-main: #ffffff ; 

    /* =========================================
        10% - CTA (Call to Action) Colors
        ========================================= */
        --cta-main: #2B4DFF;
        --cta-secondary: #3C466A;
        --error-message:yellow;


    /* =========================================
                Shadows & Gradients
     ========================================= */

    /* X: 0, Y: -4, Blur: 20.2px, Spread: 10px, Color: Black at 25% */
    --shadow-cards: 0 -4px 20.2px 10px rgba(0, 0, 0, 0.25);

        /* =========================================
                    Typography Token
        ========================================= */
        --font-main: 'reisinger michal', sans-serif;


        /* =========================================
                        Font Weights        
        ========================================= */
        --fw-light: 300;
        --fw-regular: 400;
        --fw-bold: 700;

        /* =========================================
            Mobile Breakpoint (Default)
            390*844 iphone 12 pro
            414*844
            428*926
            430*932
            440*956
            448*997 pixel 8 pro
        ========================================= */
        --fs-heading-1: clamp(3.1rem, -0.80rem + 10.00vw, 3.68rem);
        --fs-heading-2: clamp(2.8rem, 0.11rem + 6.90vw, 3.2rem); 
        --fs-subtitle:  clamp(1.9rem, 1.47rem + 1.11vw, 2rem);
        --fs-h3: clamp(1.9rem, 1.47rem + 1.11vw, 2rem);
        --fs-hero-body: clamp(1.7rem, -0.32rem + 5.17vw, 2rem);       
        --fs-body: 1.6rem;
        --fs-form-header: clamp(2.4rem, -0.96rem + 8.62vw, 2.9rem);
        --fs-form-subtitle: clamp(1.6rem, -1.09rem + 6.90vw, 2rem);
        --fs-animated-number: 7.2rem;

        --gap-hero-header: clamp(var(--space-24), -2.98rem + 13.79vw, var(--space-32));
        --gap-hero-cta: clamp(var(--space-32), 0.51rem + 6.90vw, var(--space-36));
        --gap-hero-img:clamp(3.2rem, -7.20rem + 26.67vw, 4.8rem);


        --size-logo-height: clamp(4rem, -4.07rem + 20.69vw, 5.2rem);


}


    /* =========================================
        Tablet Breakpoint (712px and up)
    ========================================= */
    @media (min-width: 712px) {
        :root {
            /* =========================================
            Layout margins and Gutters
            ========================================= */
            --layout-grid-margin: var(--space-32); 


            /* =========================================
                        Typography Token
            ========================================= */

            --fs-heading-1: clamp(3.7rem, 1.19rem + 3.53vw, 4.8rem);
            --fs-heading-2: clamp(4rem, 2.17rem + 2.56vw, 4.8rem); 
            --fs-subtitle:clamp(2rem, 1.09rem + 1.28vw, 2.4rem);
            --fs-h3:clamp(2rem, 0.17rem + 2.56vw, 2.8rem);
            --fs-hero-body: clamp(1.8rem, 1.34rem + 0.64vw, 2rem);
            --fs-body:clamp(1.6rem, 0.92rem + 0.96vw, 1.9rem);
            --fs-form-header:clamp(4rem, 2.17rem + 2.56vw, 4.8rem);
            --fs-form-subtitle: clamp(2.4rem, 1.49rem + 1.28vw, 2.8rem);
    
            --gap-hero-header:clamp(3.2rem, 1.37rem + 2.56vw, 4rem);
            --gap-hero-cta: clamp(4rem, 2.17rem + 2.56vw, 4.8rem);
            --size-logo-height: clamp(5.2rem, 0.64rem + 6.41vw, 7.2rem);

        }
    }


   /* =========================================
   Desktop Overrides (1200px and up)
   ========================================= */
    @media (min-width: 1200px) {
         :root {
        /* =========================================
                Layout margins and Gutters
        ========================================= */
            --layout-grid-margin: var(--space-52); 
         

        /* =========================================
                        Typography Token
        ========================================= */
            --fs-heading-1: clamp(4.4rem, -2.00rem + 5.00vw, 5.2rem);
            --fs-heading-2: clamp(4.2rem, 1.20rem + 2.50vw, 4.8rem);
            --fs-hero-body: clamp(1.9rem, -0.50rem + 1.88vw, 2.2rem); 
            --fs-subtitle:clamp(2rem, 0.40rem + 1.25vw, 2.2rem);
            --fs-h3:clamp(2rem, 0.40rem + 1.25vw, 2.2rem);
            --fs-body:clamp(1.5rem, -0.10rem + 1.25vw, 1.7rem);

            --fs-form-header:clamp(4.2rem, 1.20rem + 2.50vw, 4.8rem);
            --fs-form-subtitle: 2.4rem;

            --fs-animated-number:clamp(7.2rem, -7.20rem + 11.25vw, 9rem);;

            --gap-hero-header:clamp(3.6rem, -6.00rem + 7.50vw, 4.8rem);
            --gap-hero-cta: clamp(4rem, -5.60rem + 7.50vw, 5.2rem);
            --gap-hero-img: 4rem;
            --size-logo-height: 4.8rem;
    }
}   

@media (min-width: 1441px) {

         :root {
        /* =========================================
                Layout margins and Gutters
        ========================================= */
            --layout-grid-margin: var(--space-64); 
         

        /* =========================================
                        Typography Token
        ========================================= */
            --fs-heading-1: clamp(5.2rem, 3.09rem + 1.46vw, 5.9rem);
            --fs-heading-2: clamp(4.2rem, 1.20rem + 2.50vw, 4.8rem);
            --fs-hero-body: clamp(2.2rem, 1.30rem + 0.63vw, 2.5rem);
            --fs-subtitle:2rem;
            --fs-h3:2rem;
            --fs-body:clamp(1.5rem, 1.00rem + 0.42vw, 1.6rem);

            --fs-form-header:clamp(4.2rem, 1.20rem + 2.50vw, 4.8rem);
            --fs-form-subtitle: 2.4rem;

            --gap-hero-header:clamp(3.6rem, -6.00rem + 7.50vw, 4.8rem);
            --gap-hero-cta: clamp(4rem, -5.60rem + 7.50vw, 5.2rem);
            --gap-hero-img: clamp(4rem, -0.81rem + 3.34vw, 5.6rem);/*updated*/
            --size-logo-height: 4.8rem;
    }
}

@media (min-width: 1921px) {
         :root {
        /* =========================================
                Layout margins and Gutters
        ========================================= */
            --layout-grid-margin: clamp(6.4rem, 1.15rem + 2.74vw, 8rem);
         

        /* =========================================
                        Typography Token
        ========================================= */
            --fs-heading-1: clamp(5.9rem, 1.63rem + 2.22vw, 7.2rem);
            --fs-heading-2: clamp(4.8rem, 3.49rem + 0.68vw, 5.2rem);
            --fs-hero-body: clamp(2.5rem, 0.86rem + 0.85vw, 3rem);
            --fs-subtitle:clamp(2rem, 0.69rem + 0.68vw, 2.4rem);
            --fs-h3:clamp(2rem, 0.69rem + 0.68vw, 2.4rem);
            --fs-body:clamp(1.7rem, 0.71rem + 0.51vw, 2rem);

            --fs-form-header:clamp(5.2rem, 0.06rem + 3.57vw, 9rem);
            --fs-form-subtitle: clamp(2.4rem, -0.85rem + 2.25vw, 4.8rem);

            --gap-hero-header:clamp(4.8rem, 3.49rem + 0.68vw, 5.2rem);
            --gap-hero-cta: clamp(5.2rem, 3.89rem + 0.68vw, 5.6rem);
            --size-logo-height: 4.8rem;
    }

}



/* =========================================
               BUTTONS
   ========================================= */
.cta-btn { 
   display: inline-block; /* Forces the container to wrap the padding */
   font-weight: var(--fw-regular);
   font-size: var(--fs-hero-body);
   background-color: var(--cta-main);
   padding-inline: var(--space-36);
   padding-block: var(--space-18);
   border-radius: var(--space-40);
}

   @media (min-width: 712px) {
      .cta-btn { 
         padding-inline: clamp(3.6rem, 1.77rem + 2.56vw, 4.4rem);
         padding-block: clamp(2rem, 1.09rem + 1.28vw, 2.4rem);
      }
   }

   @media (min-width: 1200px) {
      .cta-btn { padding-block: 2.2rem;}
   }
   

 /* =========================================
   Adaptive Text Highlight Bar
   ========================================= */

   .highlight-bar{
      position: relative;
      display: inline-block;
      white-space: nowrap;
      z-index: 1;
   }

   .highlight-bar::after {
      content: '';
      position: absolute;
      height: 0.4em;
      left: -0.15em;
      right: -0.15em;
      bottom: -0.2em;
      border-radius: 1em;
      background-color: var(--cta-main);
      z-index: -1;

   }

       @media (min-width: 760px) {
         .highlight-bar::after {
            display: none; 
         }

         .highlight-group{
            position: relative;
            display: inline-block;
            white-space: nowrap;
            z-index: 1;
         }

         .highlight-group::after {
            content: '';
            position: absolute;
            height: 0.48em;
            left: -0.15em;
            right: -0.15em;
            bottom: -0.24em;
            border-radius: 1em;
            background-color: var(--cta-main);
            z-index: -1;
      }
}

/* =========================================
                  FORMS
   ========================================= */
.contact-form{
   background-color: var(--cta-main);
   padding-inline: var(--space-16);
   padding-block: var(--space-40);
   border-radius: var(--space-20);
}

.contact-form > h2{
   font-size: var(--fs-form-header);
   line-height: 1.3; 
   margin-bottom: var(--space-28);

}
.contact-form > p{
   font-size: var( --fs-form-subtitle); 
   font-weight: var(--fw-regular);
}

.contact-form form{
   width: 100%;
   display: flex;
   flex-direction: column;
   gap:clamp(var(--space-24), -2.98rem + 13.79vw, var(--space-32));
   padding-top: clamp(var(--space-28), -10.65rem + 34.48vw, var(--space-48));
}

.form-input , .form-submit-btn{
   text-align: right;
   padding-inline:var(--space-16);
   padding-block: var(--space-20);
   border-radius: var(--space-40);
   border: none;
}
.form-input{background-color: rgba(159, 179, 253, 1);}
.form-submit-btn{background-color:var(--bg-main)}

.form-input::placeholder,
.form-submit-btn,
.privacy_consent_checkbox
{ font-size: var( --fs-body); line-height: 1.6;}

.form-input::placeholder{
   color:#474F5B ;
   font-weight: var(--fw-regular);
}

.form-submit-btn{
   color: var(--text-main);
   font-weight: var(--fw-bold);
   text-align: center;
}

.privacy_consent_checkbox{
   text-align: right;
   display: flex;
   align-items: center;
}

.privacy_consent_checkbox input[type="checkbox"]{
   transform: scale(2);
   transform-origin: right center; 
   margin-left: var(--space-28); 
   cursor: pointer;
}


   @media (min-width: 712px) {

   .contact-form{
      padding-inline: var(--space-40);
      padding-block: var(--space-60);

   }

   .form-input , 
   .form-submit-btn{
      padding-block: var(--space-24);
      padding-inline: var(--space-28);
   }
   
}


   @media (min-width: 1200px) {

    .contact-form > h2 {margin-bottom: var(--space-36);}

    .contact-form  {
        padding-inline: clamp(7.2rem, -15.20rem + 17.50vw, 10rem);
        padding-block: 8rem;
    }

    .contact-form form {padding-top: var(--space-60);}
   
}

@media (min-width: 1921px) {
    .contact-form > h2 { margin-bottom: var(--space-84); }

    .contact-form form {
    padding-top: clamp(4.8rem, -3.32rem + 5.63vw, 10.8rem);
    gap: clamp(3.2rem, 0.76rem + 1.69vw, 5rem);
}

}





/* =========================================
               CARDS #1
   ========================================= */
/********General Container for all cards******/

   .cards-container{
      display: flex;
      flex-direction: column;
      gap: var(--space-40);
}

   @media (min-width: 1200px) {
      .cards-container{
            flex-direction:row;
            width: 100%;
      }

      .section-3 .cards-container{flex-direction: column;}  
   }

   @media (min-width: 1921px) { 
     .cards-container{gap: var(--space-100);}
   }
   
/***************************************/


.features_cards {
   width: 100%;
   padding-inline: var(--space-24);
   padding-block: var(--space-40);
   border-radius: var(--space-20);
   border: 1.6px solid transparent;
   background: 
     linear-gradient(rgba(40 45 62 / 76%)) padding-box,
     
     linear-gradient(
        0deg, 
        rgba(41, 46, 63, 0.72) 0%, 
        rgba(90, 102, 143, 0.72) 100%
     ) border-box;
}
.features_cards h3 { margin-bottom: var(--space-32);}


   @media (min-width: 712px) {
      .features_cards {
         padding-inline: var(--space-60);
         padding-block: var(--space-64);
      }
   }



   @media (min-width: 1200px) {
   .features_cards {
         padding-inline: clamp(1.4rem, -0.20rem + 1.25vw, 1.6rem);
         padding-block: var(--space-32);
      }
        
   }

      @media (min-width: 1921px) {
        .features_cards {
        padding-inline: 2.8rem;
        padding-block: var(--space-40);
        }
        
   }
   


/* =========================================
               CARDS #2
   ========================================= */



.section-3 > .cards-container {
      /* border: 4px dashed blue; */
      display: grid;
}

.benefit_card > p {padding-block: 0.8em 1em;}

.benefit_card { 
   grid-area: 1 / 1;
   /* border: 2px solid lime; */
   width: 100%;
   position: relative;
   padding-inline: var(--space-24);
   padding-block: var(--space-24);
   border-radius: var(--space-20);
   background-color: var(--bg-secondary) ;
   box-shadow: var( --shadow-cards);
}


.benefit_card  {
   display: flex;
   flex-direction: column;
   gap:clamp(var(--space-20), -3.38rem + 13.79vw, var(--space-28));
}

   .benefit_card   > img {
      aspect-ratio: 1/1;
      width:var(--space-40) ;
   }


   @media (min-width: 712px) {

   .benefit_card  {
      padding-inline: var(--space-48);
      padding-block: clamp(3.2rem, 1.37rem + 2.56vw, 4rem);
    }

 .benefit_card  {gap:clamp(2.8rem, 0.97rem + 2.56vw, 3.6rem);}


    .benefit_card   > img {width:clamp(4rem, 1.26rem + 3.85vw, 5.2rem); }
}


@media (min-width: 1200px) {

    .benefit_card {
        padding-inline: clamp(2.4rem, -4.00rem + 5.00vw, 3.2rem);
        padding-block: var(--space-20);
    }

    .benefit_card  { gap: clamp(2.4rem, -4.00rem + 5.00vw, 3.2rem);}

    .benefit_card   > img { width: clamp(4rem, -4.00rem + 6.25vw, 5rem); }

}

    @media (min-width: 1921px) {

        .benefit_card {padding-block: var(--space-60);}

        .benefit_card > img { width: clamp(5rem, 1.72rem + 1.71vw, 6rem);}

        .benefit_card { padding-inline: clamp(3.2rem, -7.96rem + 5.81vw, 6.6rem);}
}




/* =========================================
               FQA - Animated
   ========================================= */

.fqa-items, .faq-question h3{
   text-align: right;
   font-size: var( --fs-body);
}

.faq-question h3{font-weight: var(--fw-regular);}

.fqa-items{
   width: 100%;
   padding-inline: var(--space-12);
   padding-block: var(--space-20);
   border-radius: var(--space-12);
   background-color: var(--bg-secondary);
   border: none;
   margin-bottom: var(--space-24);
}

.fqa-items:last-child{
   margin-bottom: 0;
}

.faq-question{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-12) ;
   background-color: inherit;
   border: none;
}


.faq-answers p{
padding-top: var(--space-24);
}

.faq-question img{
   aspect-ratio: 1/1;
   width: var(--space-28);
   transition: transform 0.4s ease;
}

/* ---  ANIMATION LOGIC --> Active --- */
/* Rotate the arrow straight down when '.active' is added */
.fqa-items.active .faq-question img{
   transform: rotate(-135deg);
}

/* Expand the answer container to full size when '.active' is added */
.fqa-items.active .faq-answers {
   grid-template-rows: 1fr; /*This calculates the accurate height,1fr tells the browser to look at the text, calculate exactly how tall it currently is, and expand the container vertically to fit it perfectly.*/
}



/* ---  ANIMATION LOGIC --> Not Active --- */
/*  Remove your margin-bottom when closed so it doesn't leave a weird empty gap */
.fqa-items:not(.active) .faq-question{
   margin-bottom: 0;
}

/* The Grid Trick to crush the answer container to 0 height */
.faq-answers{
   display: grid;
   grid-template-rows: 0fr; /*0fr gives the browser a strict starting point of exactly zero height.*/
  transition: grid-template-rows 0.4s ease;
}

/* Hide the text that gets crushed */
.faq-full-answer {
   overflow: hidden; 
}



@media (min-width: 712px) {

    .faq-question img { width: var(--space-36);}

    .faq-question {gap: var(--space-20);}

    .fqa-items {
         padding-inline: var(--space-32);
         padding-block: var(--space-40);
    }

    .faq-answers p { padding-top: var(--space-28); }
}





/* =========================================
            animated working progress 
   =========================================
*/
.proccess-container{
   width: 100%;/*FORCE THE WRAPPER TO THE EDGES */
}
 
.progress-bars{
   display: flex;
   align-items: center;
   width: 100%;
   gap: var(--space-12);
   margin-top: var(--space-56);
}

.step {
   flex: 1; /* Each item will occupy exactly 1/5 of the container width */
   background-color: var(--bg-secondary);
   padding-block: var(--space-12);
   border-radius: var(--space-40);

}

.current_step{
   flex: 2;/*  item that directs it to grow and take up twice as much remaining space */
   background-color: var(--cta-main);
}

.step_count{
   font-size: var(--fs-animated-number);
   color: var(--cta-main);
   font-weight: var(--fw-bold);
   margin-block: var(--space-80) var(--space-28);
}

.steps_desc h3 { margin-bottom: var(--space-32);}

.step-conent{ 
   display: grid;
   width: 100%; 
}

.step-container {
   grid-area: 1/1;
   opacity: 0;
   visibility: hidden;
}

.step-container:first-child{
   opacity: 1;
   visibility: visible;
}



   @media (min-width: 712px) {
      .steps_desc, .step_count{padding-inline: var(--space-80);}
      .progress-bars{margin-top: var(--space-100);}
   }




   @media (min-width: 1200px) {
      .proccess-container{
         /* border: 2px solid red; */
         padding-inline:clamp(16rem, -8.00rem + 18.75vw, 19rem);
         display: flex;
         align-items: center;
         gap: 11.2rem;
         margin-top: var(--space-64);

      }

      .progress-bars{
         /* border: 2px dashed rgb(72, 0, 255); */
         flex-direction: column;
         aspect-ratio: 10/140;
         width: 3.6rem;
         align-items:normal;
         margin-top: 0;
         justify-content: center;

      }

      .step-container{
         /* border: 2px dashed rgb(0, 195, 255); */
         display: flex;
      }
      .step_count{ margin-block: var(--space-44) var(--space-28);}


      .steps_desc h3 {
         margin-block:var(--space-32) var(--space-28);
      }

      .steps_desc{
          /* border: 2px dashed rgb(255, 0, 234); */
          padding-inline: var(--space-32);
      }

      .step_count {
         padding-inline: 0;
         margin-block: 0 var(--space-36);
      }

      .step {padding-block: 0; }

      .step-name{display: flex;}

      .faq-answers p { padding-inline: var(--space-60); }
      
        
   }

    @media (min-width: 1441px) {

     .proccess-container {
        padding-inline: clamp(19rem, -28.36rem + 32.86vw, 54rem);
        gap: clamp(11.2rem, -9.10rem + 14.08vw, 26.2rem);
    }
}
   

   




/* =========================================
    (Mobile First)
   ========================================= */
.container{
    /* border: 2px solid rgb(106, 0, 255); */
    margin-inline: var(--layout-grid-margin);
    margin-bottom: var(--space-84);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container:last-child{margin-bottom: var(--space-40);}

section{isolation: isolate;}

.header-subtitle{
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-bold);
}

.logo{
    margin-top: clamp(0.4rem, -3.50rem + 10.00vw, 1rem);
    mix-blend-mode: color-dodge;
}

.error-massage{
    display: none; 
    font-weight: var(--fw-bold); 
    color: var( --error-message)
}

.display-a-tag{
    text-decoration: underline;
    font-weight: var(--fw-bold);
}


.header-container{margin-bottom: var(--space-16);}

.block-mobile { display: block; padding-top: var(--space-8) ;}

.content-aligned-right{text-align: right;} 

h1 {
    padding-bottom: var(--gap-hero-header) ;
    font-size: var( --fs-heading-1);
}

h2 { 
    font-size: var(--fs-heading-2); 
    margin-bottom: var(--space-52); 
    line-height: 1.2;
}

h3 { font-size: var(--fs-h3);  color: var(--text-main);}

p , input {font-size: var( --fs-body); line-height: 1.8;}


/* #################### Hero section #################### */
.header-container > .logo{
    aspect-ratio: 104/40 ;
    height:var(--size-logo-height);
}

.hero-section p{
    padding-bottom: var( --gap-hero-cta);
    font-size: var(--fs-hero-body);
}

.hero-content{
    margin-bottom: var(--gap-hero-img);
    flex-shrink: 0; /* Protects your text block from shrinking */
}


.hero-visual, .hero-section { position: relative; }

.hero-section.container {
    height: clamp(712px, 85svh, 794px);

    /* Leaves the left and right completely open, but strictly crops the phone at the bottom edge! */
    overflow-x: visible;
    overflow-y: clip;

    justify-content: flex-start;
    margin-bottom: 0;
    z-index: 10;
}

.hero-visual{
    width: 100%;
    /* CRITICAL: Tells the browser NOT to squish the image to fit the screen. 
       It forces the phone to spill out the bottom so it can be dynamically cropped. */
    flex-shrink: 0;
}

.hero-section::before{
    content: '';
    position: absolute;
    width: 100vw; /* Forces the width to be exactly 100% of the user's physical screen, ignoring any container margins */
    top: 0;
    bottom: 0;
    background-image: url('../../assets/visuals/noise.avif');
    background-repeat: repeat;
    transform: translateX(-50%);
    left: 50%; /* Pushes the starting left edge of this layer to the exact middle of the screen */
    opacity: 0.9;
    z-index: -3;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
}

.hero-visual::before, 
.section-2::before {
    content: '';
    position: absolute;
    width: 44rem;
    height: 60rem;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(137, 154, 239, 0.95) 0%, 
        rgba(67, 95, 231, 0.45) 100%
    );
    filter: blur(10rem);
    opacity: 0.9;
    pointer-events: none;
    z-index: -2;
    left: 50%;    /* Centers the gradient horizontally */
    transform: translate(-50% , -50%);
}

.hero-visual::before {
    top: 33%; 
}

.hero-visual::after {
    content: '';
    position: absolute;
    width: 43rem;      
    height: 23.8rem;
    opacity: 0.26;
    transform: translate(-50% , -50%);
    border-radius: 50%;  /* Centers the gradient horizontally */
    top: 12%; 
    left: 50%;
    background: linear-gradient(
    180deg, 
    rgba(213, 228, 255, 0.88) 0%, 
    rgba(229, 239, 255, 0.32) 61%
    );
    filter: blur(8rem);
    z-index: -1;
    pointer-events: none;
}

/* =========================================
   Firefox-Only Rendering Fixes
   ========================================= */
@supports (-moz-appearance: none) {
    
    /* Targets the massive background glow */
    .hero-visual::before, 
    .section-2::before {
        /* Lower this value until Firefox's brightness matches Chrome's 0.9 */
        opacity: 0.5; 
    }

    /* Targets the smaller, inner highlight */
    .hero-visual::after {
        /* Lower this value until it matches Chrome's 0.26 */
        opacity: 0.15; 
    }
}

.animated-mockup{ 
    position: relative;
    width: 88%;
    margin: 0 auto;
}

.animated-mockup{ 
    position: relative;
    width: 88%;
    margin: 0 auto;
}

.animated-mockup img{
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.screen-video{
    position: absolute;
    z-index: 1;
    top: 18%;
    left: 4%;
    width: 92%;
    height: 72% ;

    /* 
    IMPORTANT NOTE:
    Because we force the video into a strict box (92% width and 70% height), 
    'object-fit: cover' acts exactly like a cropping tool. 
    It fills this 92x70 box completely, prevents the video from squishing, 
    and simply trims (crops) whatever spills outside the boundaries.
  */
    object-fit: cover;
}

.bubble{
    position: absolute;
    z-index: 10;
}

.bubble-top-right{
    top:clamp(-4.4rem, 4.60rem + -20.00vw, -3.2rem);
    right:clamp(-4rem, 11.00rem + -33.33vw, -2rem);
    width: clamp(24rem, -9.62rem + 86.21vw, 29rem);
}

.bubble-top-left{
    top: clamp(9rem, 2.50rem + 16.67vw, 10rem);
    left: clamp(-7.5rem, -0.00rem + -16.67vw, -6.5rem);
    width:clamp(25rem, -1.00rem + 66.67vw, 29rem);
}


.watermark {
    display: none; /* Completely removes them from the mobile layout */
}


/* #################### #2 section #################### */

.section-2 {
    position: relative;
    overflow-x: visible;
    overflow-y: clip;
    padding-top: var(--space-48);
}

.section-2::before {
    top: -20rem; 
    z-index: -10;
}

.section-2 > .header-subtitle { margin-bottom: var(--space-16);}



/* #################### #3 section #################### */

.main-content > .header-subtitle { margin-bottom: var(--space-24);}

.main-content{margin-bottom: var(--space-36);}

.section-3{
    /* border: 2px solid red;  */
    margin-bottom: 0;}

    .hide-on-mobile {display: none;}
    
    /* Optional: Center the text that is left over so it looks good on mobile */
    .mobile-action-text {
        margin-block: 2rem 1rem; 
    }


/* #################### #4 section #################### */
.customers-logo {
    width: 100%;
    margin:0 auto; /* Centers the container */
}
.customers-logo .header-subtitle {
    margin-bottom: var(--space-40);
    text-wrap: balance;

    @media (min-width:712px) {
         margin-bottom: var(--space-72);
    }
}
.logos-ticker-wrapper {
    width: 100%;
    height: 60vh;
    max-height: 50rem;
    overflow: hidden;
    position: relative;
    direction: ltr;

    /* Fades at the top and bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

/* 1. ANIMATE THE PARENT (Remove padding here so math is clean) */
.brand-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-secondary);
    width: 100%;
    gap: 0;
}

.brand-logos.is-animating { animation: marquee-vertical 30s linear infinite; }

.ticker-track[aria-hidden="true"] {display: flex;}

/* 2. RIGID TRACK BLOCKS */
.ticker-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ticker-gap-mobile);
    
    /* This creates the exact gap between Track 1 and Track 2 */
    padding-bottom: var(--ticker-gap-mobile); 
    
    width: 100%;
    flex-shrink: 0;
}

/* 3. CONTROL IMAGE HEIGHTS */
.ticker-track img {
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* 4. FLAWLESS VERTICAL MATH */
@keyframes marquee-vertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

    


.customers-recommendation{
    margin-bottom: var(--space-80);
    display: flex;
    flex-direction: column;
    gap: var(--space-52);
    width: 100%;

    @media (min-width:712px) {margin-bottom: var(--space-96);}
    @media (min-width:712px) {margin-bottom: var(--space-96);}
}


.recommendation{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: var(--space-8);
}

.recommendation-slot{
    flex: 1 1 calc(50% - (var(--space-8) / 2));

    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    aspect-ratio: 9/16;

    gap: var(--space-12);
    color: var(--cta-main);
    border-radius: var(--space-12);
    background: var(--bg-secondary);

}

/* Sizing the SVG Play Button */
.recommendation-slot svg {
    aspect-ratio: 1 / 1;
    width: var(--space-56);
}


/* ---------------------- YOUTUBE FACADE STYLES ---------------------- */
/* The background poster image */
.facade-poster {
      /* border: 2px solid rgb(0, 179, 255); */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      transition: transform 0.3s ease;
}

.recommendation-slot:hover .facade-poster { transform: scale(1.03); }

.facade-play-btn {z-index: 2; position: absolute;}

.facade-iframe {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 3;
}

/* ----------------------SCREEN SHOTS ---------------------- */


.recommendation-screensohots{
    margin-top: var(--space-16);
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    justify-content: space-evenly;
    border: 1.2px solid #393E4C;
    background-color: var(--bg-secondary);
    padding: var(--space-12);
    gap: var(--space-20);
    border-radius: var(--space-20);
    transition: transform 0.3s ease;

}

.recommendation-screensohots:hover { transform: scale(1.03); }


.recommendation-screensohots img{
    max-width: 100%; /*It tells the browser, "You can be your natural 339px size, but if the parent container shrinks smaller than that, you must shrink too."*/
    height: auto; /*This forces the image to scale proportionally so the WhatsApp text doesn't look stretched or squished.*/
    object-fit: contain;
    margin: 0 auto;

}




/* #################### #4 section #################### */
.section-5  > h2{  margin-bottom: var(--space-40); }

/* #################### #6 section #################### */

.about-info > h2{ margin-bottom: 0; margin-block: 0;}

.section-6.container, .section-7.container{ margin-block: var(--space-120) var(--space-84); }

.profile-img {width: 100%;}

.profile-img img{
    height: auto;
    display: block;
    margin: 0 auto;
    @media (min-width: 712px ){max-width: 100%;}
}

.about-info{
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}


.site-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--space-20);
}

.site-footer > .logo{
margin-top: 0;
aspect-ratio: 104/40 ;
height: var(--space-52);
}

.site-footer-links{margin-block: var(--space-20);}




/* =========================================
        Tablet Breakpoint (712px and up)
    ========================================= */

    @media (min-width: 712px) {

        .container{margin-bottom: var(--space-120);}

        .header-container{margin-bottom: var(--space-20);}

        .hero-section.container {height: clamp(800px, 85svh, 1200px);}

        .block-mobile { 
            display: inline; 
            padding-top: 0 ;
        }

          .hero-section::before{
            opacity: 1;
        }


        .hero-section::before{
            opacity: 0.6;
        }

        .hero-visual::before, 
        .section-2::before {
            width:clamp(92rem, 69.18rem + 32.05vw, 102rem);
            height: clamp(85rem, 32.51rem + 73.72vw, 108rem);
            opacity: 0.9;
        }

        .hero-visual::before {
            top: 48%;
        }

        .hero-visual::after{
            width: clamp(52rem, 24.62rem + 38.46vw, 64rem);
            height: clamp(36rem, 26.87rem + 12.82vw, 40rem);
        }


        .animated-mockup { 
            width: clamp(45.36rem, 17.43rem + 39.23vw, 57.6rem);
        }

        .screen-video{
            left: 4%;
            height: 70% ;
        }

        .bubble-top-right {
            top:clamp(27rem, 6.46rem + 28.85vw, 36rem);
            right: clamp(-4.4rem, -8.96rem + 6.41vw, -2.4rem);
            width: clamp(30rem, 7.18rem + 32.05vw, 40rem);
        }


        .bubble-top-left {
            top: 2rem;
            left: -5rem;
            width: clamp(35rem, 7.62rem + 38.46vw, 47rem);
        }


        .bubble-bottom-left {
            bottom: clamp(46rem, 23.18rem + 32.05vw, 56rem);
            left: clamp(-3.4rem, -11.16rem + 10.90vw, 0rem);
            width: clamp(24.8rem, 8.37rem + 23.08vw, 32rem);
        }

        .watermark{
            display: block;
            position: absolute;
            z-index: -4;
            pointer-events: none;
        }

        .watermark-left{
            width: clamp(22rem, 8.31rem + 19.23vw, 28rem);
            left: clamp(-9rem, -15.85rem + 9.62vw, -6rem);
            top: 13%;
        }

        .watermark-right {
            width: clamp(41.4rem, 16.30rem + 35.26vw, 52.4rem);
            right: clamp(-9rem, -18.13rem + 12.82vw, -5rem);
            top: 14%;
        }



/* #################### #2 section #################### */
        .section-2::before {
            top: clamp(-40rem, -0.62rem + -38.46vw, -28rem);
            z-index: -10;
        }

        h2 {margin-bottom:var(--space-52); text-wrap: balance;}

        .section-2 {padding-top: var(--space-84);}

/* #################### #3 section #################### */
        .main-content{margin-bottom: var(--space-48);}



/* #################### #4 section #################### */
  
.recommendation {
            max-width: 60rem;
            gap: var(--space-32);
            flex-direction: row-reverse; 
            justify-content: center;
            flex-wrap: nowrap;
    }

    .recommendation-screensohots{ margin-top: 0;}
    .recommendation-slot,
    .recommendation-screensohots { flex: 1 1 0;   /* Give them all exactly equal space (1/3 each) */}

    .customers-logo {max-width: 1200px;}

    .brand-logos {
        flex-direction: row;
        width: max-content;
    }

    .brand-logos.is-animating {animation: marquee 25s linear infinite}

    .brand-logos:hover{animation-play-state: paused;}

    .logos-ticker-wrapper {
        -webkit-mask-image: linear-gradient(to right, transparent, var(--bg-main) 12%, var(--bg-secondary) 76%, transparent);
        mask-image: linear-gradient(to right, transparent, var(--bg-main) 12%, var(--bg-secondary) 76%, transparent);
        /* background-color: var(--bg-secondary); */
        height: auto;
    }
    

    .ticker-track {
        flex-direction: row;
        gap: var(--ticker-gap);
        padding: 0 var(--ticker-gap) 0 0 ; 
        width: max-content;
    }

       .ticker-track img{
        width: auto;
        height: auto;
        max-width: none;
        max-height: 12rem;  
       }

    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } 
    }
       


/* #################### #6 section #################### */
        .about-info{
            gap: var(--space-40);
            padding-inline: var(--space-52);
        }

        /* Applies when .about-info is the "only child" currently rendering inside that section. */
        .section-6 .about-info:only-child{
            margin: 0 auto;
            align-items: center;
            text-align: center;
        }
}


   /* =========================================
   Desktop Overrides (1200px and up)
   ========================================= */

   @media (min-width: 1200px) and (max-width: 1280px) {
    
    .hero-content h1 {
        padding-inline: clamp(13rem, -77.00rem + 75.00vw, 19rem);
    }
    
}

   /* #################### Hero section #################### */

   @media(min-width: 760px){        
    .new-line{ 
        display: block; 
        padding-bottom: 0.55em
    }

    .profile-img img{
    /* max-width: 82%; */
}

    .new-line:last-child{padding-bottom: 0;}
}

    @media (min-width: 1200px) {
        .hide-on-mobile {display: block;}

        .container {margin-bottom: 19rem;}

        .hero-section.container { height: clamp(800px, 92vh, 1080px) }

        .header-container > .logo {height: clamp(5.2rem, -1.20rem + 5.00vw, 6rem);}

        .header-container {margin-bottom: clamp(1.2rem, -0.80rem + 1.67vw, 1.6rem);}

        .animated-mockup { width: clamp(40rem, 16.00rem + 18.75vw, 43rem); }

        .hero-visual::before, .section-2::before {
            width: clamp(108rem, 18.00rem + 75.00vw, 126rem);
            height: 54rem;
            filter: blur(clamp(10rem, -10.00rem + 16.67vw, 14rem));
        }

        .hero-visual::before {top: 30%}

        .hero-visual::after {
            width: clamp(47rem, -198.00rem + 204.17vw, 96rem);
            height: clamp(81rem, 56.00rem + 20.83vw, 86rem);
            top: 10%;
        }

        .watermark-right {
            width: clamp(40rem, -24.00rem + 50.00vw, 48rem);
            right:-3.6rem;
            top:-17.6%;
        }    


        .watermark-left {
            width: clamp(40rem, -24.00rem + 50.00vw, 48rem);
            left: -4rem;
            top: -17.6%;
        }

        .bubble-top-right {
            top: clamp(21rem, -3.00rem + 18.75vw, 24rem);
            right: clamp(7rem, -33.00rem + 31.25vw, 12rem);
            width: clamp(36rem, 20.00rem + 12.50vw, 38rem);
        }

        .bubble-top-left {
            top: clamp(14rem, 4.00rem + 8.33vw, 16rem);
            left: clamp(12.9rem, -21.50rem + 26.88vw, 17.2rem);
            width: clamp(35rem, 11.00rem + 18.75vw, 38rem);
        }

        .bubble-bottom-left {
            bottom: clamp(42rem, 10.00rem + 25.00vw, 46rem);
            left: clamp(9rem, -31.00rem + 31.25vw, 14rem);
            width:clamp(34rem, 18.00rem + 12.50vw, 36rem);
        }


        /* #################### #2 section #################### */
        .section-2::before {
            top: -15rem;
        }

        .section-2 > h2 {margin-bottom: var(--space-68);}

        .section-2 > h3 {margin-bottom: var(--space-24);}

        .section-2 {padding-top: var(--space-96);}


    /* #################### #2 section #################### */
        .section-3.container{
            flex-direction: row;
            gap: clamp(16rem, -80.00rem + 75.00vw, 28rem);
            align-items: baseline;
            margin-bottom: 0;
        } 

        .section-3 .main-content{text-align: right;}

        .main-content > h3 {margin-bottom: var(--space-28);}
      


     /* #################### #4 section #################### */
    .recommendation {gap: var(--space-48);}
    .brand-logos:hover {animation-play-state: paused;}


    /* #################### #6 section #################### */
        .section-6.container{
            flex-direction: row;
            /* gap:clamp(8rem, -56.00rem + 50.00vw, 16rem); */
        }

        .about-info,
        .profile-img {
            flex: 1; /* This guarantees they are the exact same width */
        }
        
        .about-info {
        text-align:justify;
        margin: 0 auto;
        }

        .about-info > p{max-width: 56ch;}

}



@media (min-width: 1441px) {

    .animated-mockup{width: clamp(43rem, 9.91rem + 22.96vw, 54rem);}

    /* .hero-section.container { height: 92svh; } */

    .bubble-top-right {
        top: clamp(24rem, -0.07rem + 16.70vw, 32rem);
        right: clamp(12rem, -30.12rem + 29.23vw, 26rem);
        width: clamp(38rem, 25.97rem + 8.35vw, 42rem);
    }

    .bubble-top-left {
        top: clamp(16rem, -11.08rem + 18.79vw, 25rem);
        left: clamp(17.2rem, -26.72rem + 30.48vw, 31.8rem);
        width: clamp(38rem, 25.97rem + 8.35vw, 42rem);
    }

    .bubble-bottom-left {
        bottom: clamp(46rem, 18.92rem + 18.79vw, 55rem);
        left: clamp(14rem, -22.10rem + 25.05vw, 26rem);
        width: clamp(36rem, 17.95rem + 12.53vw, 42rem);
    }

    .watermark-right {
        width: clamp(48rem, -18.18rem + 45.93vw, 70rem);
        right: clamp(-5.6rem, 2.42rem + -4.18vw, -3.6rem);
        top: -20.6%;
    }

    .watermark-left {
        width: clamp(48rem, -18.18rem + 45.93vw, 70rem);
        left: clamp(-7rem, 5.03rem + -6.26vw, -4rem);
        top: -20.6%;
    }

    .hero-visual::before, .section-2::before {
        width: 152rem;
        height: 68rem;
    }



}

@media (min-width: 1921px) {

    .container {margin-bottom: clamp(19rem, 6.82rem + 8.45vw, 28rem);}

    .header-container {margin-bottom: clamp(1.6rem, -0.37rem + 1.03vw, 2.2rem);}

    .cta-btn {padding-block: clamp(2.2rem, 0.89rem + 0.68vw, 2.6rem);}

    .bubble-top-left {left: clamp(31.8rem, -58.50rem + 47.01vw, 59.3rem);}

    .bubble-bottom-left { left: clamp(26rem, -62.66rem + 46.15vw, 53rem);}

    .bubble-top-right {right: clamp(26rem, -62.66rem + 46.15vw, 53rem);}

    .watermark-right {
    width: clamp(70rem, -32.64rem + 51.81vw, 100rem);
    right:clamp(-9rem, 12.42rem + -8.55vw, -4rem);
    top: -28%
    }

    .watermark-left {
    width:clamp(70rem, -32.64rem + 51.81vw, 100rem);
    left: clamp(-9rem, 12.42rem + -8.55vw, -4rem);
    top: -28%
    }


  .section-2 > .header-subtitle { margin-bottom: var(--space-28);}
  .section-2 > h2 { margin-bottom: var(--space-68); }

  .section-3.container{gap: clamp(28rem, -42.36rem + 48.83vw, 80rem);}

  .section-4 > h2{margin-top:12rem}

}



/* ---------------------- Consent banner (built by custom/js/tracking.js) ---------------------- */
.consent-banner{
   position: fixed;
   inset-inline: var(--space-16);
   bottom: var(--space-16);
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding: var(--space-20);
   background-color: var(--bg-secondary);
   border-radius: var(--space-20);
   box-shadow: var(--shadow-cards);
   font-size: 1.5rem;
   line-height: 1.6;
   text-align: right;
}

.consent-banner a{
   text-decoration: underline;
   font-weight: var(--fw-bold);
}

.consent-banner-actions{
   display: flex;
   gap: var(--space-12);
}

.consent-banner-actions button{
   flex: 1;
   padding-block: var(--space-12);
   padding-inline: var(--space-24);
   border: none;
   border-radius: var(--space-40);
   font-weight: var(--fw-bold);
   color: var(--text-main);
   cursor: pointer;
}

.consent-accept{ background-color: var(--cta-main); }
.consent-decline{ background-color: var(--cta-secondary); }

@media (min-width: 712px) {
   .consent-banner{
      flex-direction: row;
      align-items: center;
      max-width: 90rem;
      margin-inline: auto;
      bottom: var(--space-24);
   }
   .consent-banner-actions{ flex-shrink: 0; }
}