/* --- Hero Section --- */
    .hero-section { overflow: hidden; z-index: 1; padding-top: 100px; padding-bottom: 0px; position: relative; overflow: hidden; border-top: #d4d4d4 1px solid; }
    .hero-bg-shapes .shape { position: absolute; z-index: -1; opacity: 0.1; }
    .shape-1 { width: 300px; height: 300px; background: #0052CC; border-radius: 50%; top: -50px; right: -100px; }
    .shape-2 { width: 200px; height: 200px; background: #00B8D9; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 0px; left: -50px; }
    .shape-3 { width: 150px; height: 150px; background: #FFAB00; border-radius: 20px; transform: rotate(45deg); top: 200px; left: 20%; }
    .hero-content { display: flex; flex-direction: column; gap: 60px; align-items: center; }
    .hero-text { display: flex; flex-direction: column; align-items: center; }
    .hero-text h1 { font-family: 'ProductSans-Bold'; font-size: 48px; line-height: 1.1; font-weight: 800; margin-bottom: 0px; color: #242424; padding: 0 22%; text-align: center; }
    .hero-text h1 span { color: #0052CC; }
    .hero-text p { font-family: 'ProductSans-Regular'; font-size: 20px; color: #42526E; margin-bottom: 40px; padding: 0 20%; text-align: center; }
    .hero-text p span { font-size: 13px; color: #707070; margin-top: 10px; }
    .hero-actions { display: flex; gap: 16px; }
    .hero-visual { position: relative; }
    .mockup-container { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1); transform: perspective(1000px) rotateY(-10deg) rotateX(5deg); transition: all 0.5s ease; margin-bottom: -60px; }
    .mockup-container:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
    .mockup-img { width: 100%; height: auto; border-radius: 8px; display: block; }
    .services-list-icon { width: 64px; }
    /* adrvertising */
    .adv-container { background-color: #90cde2; position: relative; height: 200px; display: flex; align-items: center; justify-content: center; }
    .adv-container img.left { position: absolute; left: 0; top: 0; height: 100%; }
    .adv-container img.right { position: absolute; right: 0; top: 0; height: 100%; }
    .adv-container .container { width: 1440px; max-width: 100%; padding: 0 7%; position: relative; }
    .adv-container .container h2 { color: #ffffff; font-family: 'ProductSans-Bold' }
    .adv-container .container p { color: #ffffff; font-family: 'ProductSans-Bold'; font-size: 24px;margin: 5px 0 0 0; padding-right: 45%; }
    .adv-container .container h2, .adv-container .container p { text-shadow: 0 0 5px #242424; }

    @media only screen and (max-width : 1024px) {
        .adv-container { margin-top: 68px; }
        .hero-section { padding-top: 120px; }
    }

    @media only screen and (width : 768px) {
        section.entry { padding-top: 0; } /* if advertising exists */
        .hero-section { padding-top: 120px; }
        .hero-text h1 { font-size: 36px; padding: 0 15% 20px 15%; }
        .hero-text p { padding: 0; }
    }

    @media only screen and (max-width : 760px) {
        .shape-2 { bottom: 0; left: -100px; }
        .mockup-container { display: none; }
        .adv-container { margin-top: 0; }
        .adv-container img.left { display: none;}
        .adv-container .container p { padding-right: 0; }
        .hero-section { padding-top: 60px; padding-bottom: 0px; }
        .hero-text h1 { font-size: 36px; padding: 0 0 15px 0; }
        .hero-text p { padding: 0; }
    }