@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    size-adjust: 107.64%;
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
}

/* Font Awesome Free 6.4.0 subset. Icons: CC BY 4.0. Fonts: SIL OFL 1.1. Code: MIT. https://fontawesome.com/license/free */
.fas,
.far,
.fab {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--fa-icon) no-repeat center / contain;
  mask: var(--fa-icon) no-repeat center / contain;
}
.fa-arrow-left { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l160%20160c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.2%20288%20416%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-306.7%200L214.6%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-160%20160z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-arrow-right { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M438.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L338.8%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l306.7%200L233.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-arrow-up-right-from-square { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M320%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h82.7L201.4%20265.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L448%20109.3V192c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V32c0-17.7-14.3-32-32-32H320zM80%2032C35.8%2032%200%2067.8%200%20112V432c0%2044.2%2035.8%2080%2080%2080H400c44.2%200%2080-35.8%2080-80V320c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V432c0%208.8-7.2%2016-16%2016H80c-8.8%200-16-7.2-16-16V112c0-8.8%207.2-16%2016-16H192c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H80z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-award { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M173.8%205.5c11-7.3%2025.4-7.3%2036.4%200L228%2017.2c6%203.9%2013%205.8%2020.1%205.4l21.3-1.3c13.2-.8%2025.6%206.4%2031.5%2018.2l9.6%2019.1c3.2%206.4%208.4%2011.5%2014.7%2014.7L344.5%2083c11.8%205.9%2019%2018.3%2018.2%2031.5l-1.3%2021.3c-.4%207.1%201.5%2014.2%205.4%2020.1l11.8%2017.8c7.3%2011%207.3%2025.4%200%2036.4L366.8%20228c-3.9%206-5.8%2013-5.4%2020.1l1.3%2021.3c.8%2013.2-6.4%2025.6-18.2%2031.5l-19.1%209.6c-6.4%203.2-11.5%208.4-14.7%2014.7L301%20344.5c-5.9%2011.8-18.3%2019-31.5%2018.2l-21.3-1.3c-7.1-.4-14.2%201.5-20.1%205.4l-17.8%2011.8c-11%207.3-25.4%207.3-36.4%200L156%20366.8c-6-3.9-13-5.8-20.1-5.4l-21.3%201.3c-13.2%20.8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5%20301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5%20210.2c-7.3-11-7.3-25.4%200-36.4L17.2%20156c3.9-6%205.8-13%205.4-20.1l-1.3-21.3c-.8-13.2%206.4-25.6%2018.2-31.5l19.1-9.6C65%2070.2%2070.2%2065%2073.4%2058.6L83%2039.5c5.9-11.8%2018.3-19%2031.5-18.2l21.3%201.3c7.1%20.4%2014.2-1.5%2020.1-5.4L173.8%205.5zM272%20192a80%2080%200%201%200%20-160%200%2080%2080%200%201%200%20160%200zM1.3%20441.8L44.4%20339.3c.2%20.1%20.3%20.2%20.4%20.4l9.6%2019.1c11.7%2023.2%2036%2037.3%2062%2035.8l21.3-1.3c.2%200%20.5%200%20.7%20.2l17.8%2011.8c5.1%203.3%2010.5%205.9%2016.1%207.7l-37.6%2089.3c-2.3%205.5-7.4%209.2-13.3%209.7s-11.6-2.2-14.8-7.2L74.4%20455.5l-56.1%208.3c-5.7%20.8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248%2060.4L211.7%20413c5.6-1.8%2011-4.3%2016.1-7.7l17.8-11.8c.2-.1%20.4-.2%20.7-.2l21.3%201.3c26%201.5%2050.3-12.6%2062-35.8l9.6-19.1c.1-.2%20.2-.3%20.4-.4l43.2%20102.5c2.2%205.3%201.4%2011.4-2.1%2016s-9.3%206.9-15%206l-56.1-8.3-32.2%2049.2c-3.2%205-8.9%207.7-14.8%207.2s-11-4.3-13.3-9.7z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-bars { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-book-open { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M249.6%20471.5c10.8%203.8%2022.4-4.1%2022.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4%2052%20202.4%2032%20144%2032C93.5%2032%2046.3%2045.3%2018.1%2056.1C6.8%2060.5%200%2071.7%200%2083.8V454.1c0%2011.9%2012.8%2020.2%2024.1%2016.5C55.6%20460.1%20105.5%20448%20144%20448c33.9%200%2079%2014%20105.6%2023.5zm76.8%200C353%20462%20398.1%20448%20432%20448c38.5%200%2088.4%2012.1%20119.9%2022.6c11.3%203.8%2024.1-4.6%2024.1-16.5V83.8c0-12.1-6.8-23.3-18.1-27.6C529.7%2045.3%20482.5%2032%20432%2032c-58.4%200-103.4%2020-123%2035.6c-3.3%202.6-5%206.8-5%2011V456c0%2011.4%2011.7%2019.3%2022.4%2015.5z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-brain { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M184%200c30.9%200%2056%2025.1%2056%2056V456c0%2030.9-25.1%2056-56%2056c-28.9%200-52.7-21.9-55.7-50.1c-5.2%201.4-10.7%202.1-16.3%202.1c-35.3%200-64-28.7-64-64c0-7.4%201.3-14.6%203.6-21.2C21.4%20367.4%200%20338.2%200%20304c0-31.9%2018.7-59.5%2045.8-72.3C37.1%20220.8%2032%20207%2032%20192c0-30.7%2021.6-56.3%2050.4-62.6C80.8%20123.9%2080%20118%2080%20112c0-29.9%2020.6-55.1%2048.3-62.1C131.3%2021.9%20155.1%200%20184%200zM328%200c28.9%200%2052.6%2021.9%2055.7%2049.9c27.8%207%2048.3%2032.1%2048.3%2062.1c0%206-.8%2011.9-2.4%2017.4c28.8%206.2%2050.4%2031.9%2050.4%2062.6c0%2015-5.1%2028.8-13.8%2039.7C493.3%20244.5%20512%20272.1%20512%20304c0%2034.2-21.4%2063.4-51.6%2074.8c2.3%206.6%203.6%2013.8%203.6%2021.2c0%2035.3-28.7%2064-64%2064c-5.6%200-11.1-.7-16.3-2.1c-3%2028.2-26.8%2050.1-55.7%2050.1c-30.9%200-56-25.1-56-56V56c0-30.9%2025.1-56%2056-56z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-briefcase { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M184%2048H328c4.4%200%208%203.6%208%208V96H176V56c0-4.4%203.6-8%208-8zm-56%208V96H64C28.7%2096%200%20124.7%200%20160v96H192%20320%20512V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9%200-56%2025.1-56%2056zM512%20288H320v32c0%2017.7-14.3%2032-32%2032H224c-17.7%200-32-14.3-32-32V288H0V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V288z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-calendar-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M152%2024c0-13.3-10.7-24-24-24s-24%2010.7-24%2024V64H64C28.7%2064%200%2092.7%200%20128v16%2048V448c0%2035.3%2028.7%2064%2064%2064H384c35.3%200%2064-28.7%2064-64V192%20144%20128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24%2010.7-24%2024V64H152V24zM48%20192h80v56H48V192zm0%20104h80v64H48V296zm128%200h96v64H176V296zm144%200h80v64H320V296zm80-48H320V192h80v56zm0%20160v40c0%208.8-7.2%2016-16%2016H320V408h80zm-128%200v56H176V408h96zm-144%200v56H64c-8.8%200-16-7.2-16-16V408h80zM272%20248H176V192h96v56z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-calendar-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M128%200c17.7%200%2032%2014.3%2032%2032V64H288V32c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032V64h48c26.5%200%2048%2021.5%2048%2048v48H0V112C0%2085.5%2021.5%2064%2048%2064H96V32c0-17.7%2014.3-32%2032-32zM0%20192H448V464c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V192zm64%2080v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V272c0-8.8-7.2-16-16-16H80c-8.8%200-16%207.2-16%2016zm128%200v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V272c0-8.8-7.2-16-16-16H208c-8.8%200-16%207.2-16%2016zm144-16c-8.8%200-16%207.2-16%2016v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V272c0-8.8-7.2-16-16-16H336zM64%20400v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V400c0-8.8-7.2-16-16-16H80c-8.8%200-16%207.2-16%2016zm144-16c-8.8%200-16%207.2-16%2016v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V400c0-8.8-7.2-16-16-16H208zm112%2016v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16V400c0-8.8-7.2-16-16-16H336c-8.8%200-16%207.2-16%2016z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-certificate { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M211%207.3C205%201%20196-1.4%20187.6%20.8s-14.9%208.9-17.1%2017.3L154.7%2080.6l-62-17.5c-8.4-2.4-17.4%200-23.5%206.1s-8.5%2015.1-6.1%2023.5l17.5%2062L18.1%20170.6c-8.4%202.1-15%208.7-17.3%2017.1S1%20205%207.3%20211l46.2%2045L7.3%20301C1%20307-1.4%20316%20.8%20324.4s8.9%2014.9%2017.3%2017.1l62.5%2015.8-17.5%2062c-2.4%208.4%200%2017.4%206.1%2023.5s15.1%208.5%2023.5%206.1l62-17.5%2015.8%2062.5c2.1%208.4%208.7%2015%2017.1%2017.3s17.3-.2%2023.4-6.4l45-46.2%2045%2046.2c6.1%206.2%2015%208.7%2023.4%206.4s14.9-8.9%2017.1-17.3l15.8-62.5%2062%2017.5c8.4%202.4%2017.4%200%2023.5-6.1s8.5-15.1%206.1-23.5l-17.5-62%2062.5-15.8c8.4-2.1%2015-8.7%2017.3-17.1s-.2-17.3-6.4-23.4l-46.2-45%2046.2-45c6.2-6.1%208.7-15%206.4-23.4s-8.9-14.9-17.3-17.1l-62.5-15.8%2017.5-62c2.4-8.4%200-17.4-6.1-23.5s-15.1-8.5-23.5-6.1l-62%2017.5L341.4%2018.1c-2.1-8.4-8.7-15-17.1-17.3S307%201%20301%207.3L256%2053.5%20211%207.3z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-chalkboard-teacher { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M160%2064c0-35.3%2028.7-64%2064-64H576c35.3%200%2064%2028.7%2064%2064V352c0%2035.3-28.7%2064-64%2064H336.8c-11.8-25.5-29.9-47.5-52.4-64H384V320c0-17.7%2014.3-32%2032-32h64c17.7%200%2032%2014.3%2032%2032v32h64V64L224%2064v49.1C205.2%20102.2%20183.3%2096%20160%2096V64zm0%2064a96%2096%200%201%201%200%20192%2096%2096%200%201%201%200-192zM133.3%20352h53.3C260.3%20352%20320%20411.7%20320%20485.3c0%2014.7-11.9%2026.7-26.7%2026.7H26.7C11.9%20512%200%20500.1%200%20485.3C0%20411.7%2059.7%20352%20133.3%20352z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-check { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-check-circle { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM369%20209L241%20337c-9.4%209.4-24.6%209.4-33.9%200l-64-64c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200l47%2047L335%20175c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-clipboard-check { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M192%200c-41.8%200-77.4%2026.7-90.5%2064H64C28.7%2064%200%2092.7%200%20128V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V128c0-35.3-28.7-64-64-64H282.5C269.4%2026.7%20233.8%200%20192%200zm0%2064a32%2032%200%201%201%200%2064%2032%2032%200%201%201%200-64zM305%20273L177%20401c-9.4%209.4-24.6%209.4-33.9%200L79%20337c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200l47%2047L271%20239c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-clock { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M464%20256A208%20208%200%201%201%2048%20256a208%20208%200%201%201%20416%200zM0%20256a256%20256%200%201%200%20512%200A256%20256%200%201%200%200%20256zM232%20120V256c0%208%204%2015.5%2010.7%2020l96%2064c11%207.4%2025.9%204.4%2033.3-6.7s4.4-25.9-6.7-33.3L280%20243.2V120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-cloud-upload-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M144%20480C64.5%20480%200%20415.5%200%20336c0-62.8%2040.2-116.2%2096.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4%2071.6-160%20160-160c59.3%200%20111%2032.2%20138.7%2080.2C409.9%20102%20428.3%2096%20448%2096c53%200%2096%2043%2096%2096c0%2012.2-2.3%2023.8-6.4%2034.6C596%20238.4%20640%20290.1%20640%20352c0%2070.7-57.3%20128-128%20128H144zm79-217c-9.4%209.4-9.4%2024.6%200%2033.9s24.6%209.4%2033.9%200l39-39V392c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24V257.9l39%2039c9.4%209.4%2024.6%209.4%2033.9%200s9.4-24.6%200-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9%200l-80%2080z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-diagram-project { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M0%2080C0%2053.5%2021.5%2032%2048%2032h96c26.5%200%2048%2021.5%2048%2048V96H384V80c0-26.5%2021.5-48%2048-48h96c26.5%200%2048%2021.5%2048%2048v96c0%2026.5-21.5%2048-48%2048H432c-26.5%200-48-21.5-48-48V160H192v16c0%201.7-.1%203.4-.3%205L272%20288h96c26.5%200%2048%2021.5%2048%2048v96c0%2026.5-21.5%2048-48%2048H272c-26.5%200-48-21.5-48-48V336c0-1.7%20.1-3.4%20.3-5L144%20224H48c-26.5%200-48-21.5-48-48V80z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-envelope { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M48%2064C21.5%2064%200%2085.5%200%20112c0%2015.1%207.1%2029.3%2019.2%2038.4L236.8%20313.6c11.4%208.5%2027%208.5%2038.4%200L492.8%20150.4c12.1-9.1%2019.2-23.3%2019.2-38.4c0-26.5-21.5-48-48-48H48zM0%20176V384c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V176L294.4%20339.2c-22.8%2017.1-54%2017.1-76.8%200L0%20176z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-external-link-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M320%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h82.7L201.4%20265.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L448%20109.3V192c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V32c0-17.7-14.3-32-32-32H320zM80%2032C35.8%2032%200%2067.8%200%20112V432c0%2044.2%2035.8%2080%2080%2080H400c44.2%200%2080-35.8%2080-80V320c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V432c0%208.8-7.2%2016-16%2016H80c-8.8%200-16-7.2-16-16V112c0-8.8%207.2-16%2016-16H192c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H80z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-facebook { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20256C504%20119%20393%208%20256%208S8%20119%208%20256c0%20123.78%2090.69%20226.38%20209.25%20245V327.69h-63V256h63v-54.64c0-62.15%2037-96.48%2093.67-96.48%2027.14%200%2055.52%204.84%2055.52%204.84v61h-31.28c-30.8%200-40.41%2019.12-40.41%2038.73V256h68.78l-11%2071.69h-57.78V501C413.31%20482.38%20504%20379.78%20504%20256z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-feather-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M278.5%20215.6L23%20471c-9.4%209.4-9.4%2024.6%200%2033.9s24.6%209.4%2033.9%200l74.8-74.8c7.4%204.6%2015.3%208.2%2023.8%2010.5C200.3%20452.8%20270%20454.5%20338%20409.4c12.2-8.1%205.8-25.4-8.8-25.4l-16.1%200c-5.1%200-9.2-4.1-9.2-9.2c0-4.1%202.7-7.6%206.5-8.8l97.7-29.3c3.4-1%206.4-3.1%208.4-6.1c4.4-6.4%208.6-12.9%2012.6-19.6c6.2-10.3-1.5-23-13.5-23l-38.6%200c-5.1%200-9.2-4.1-9.2-9.2c0-4.1%202.7-7.6%206.5-8.8l80.9-24.3c4.6-1.4%208.4-4.8%2010.2-9.3C494.5%20163%20507.8%2086.1%20511.9%2036.8c.8-9.9-3-19.6-10-26.6s-16.7-10.8-26.6-10C391.5%207%20228.5%2040.5%20137.4%20131.6C57.3%20211.7%2056.7%20302.3%2071.3%20356.4c2.1%207.9%2012%209.6%2017.8%203.8L253.6%20195.8c6.2-6.2%2016.4-6.2%2022.6%200c5.4%205.4%206.1%2013.6%202.2%2019.8z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-file-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V160H256c-17.7%200-32-14.3-32-32V0H64zM256%200V128H384L256%200zM112%20256H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-file-contract { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V160H256c-17.7%200-32-14.3-32-32V0H64zM256%200V128H384L256%200zM80%2064h64c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H80c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064h64c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H80c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm54.2%20253.8c-6.1%2020.3-24.8%2034.2-46%2034.2H80c-8.8%200-16-7.2-16-16s7.2-16%2016-16h8.2c7.1%200%2013.3-4.6%2015.3-11.4l14.9-49.5c3.4-11.3%2013.8-19.1%2025.6-19.1s22.2%207.7%2025.6%2019.1l11.6%2038.6c7.4-6.2%2016.8-9.7%2026.8-9.7c15.9%200%2030.4%209%2037.5%2023.2l4.4%208.8H304c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H240c-6.1%200-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2%202.1-8.8%205.5l-8.8%2017.7c-2.9%205.9-9.2%209.4-15.7%208.8s-12.1-5.1-13.9-11.3L144%20349l-9.8%2032.8z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-file-pdf { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2028.7%2028.7%200%2064%200H224V128c0%2017.7%2014.3%2032%2032%2032H384V304H176c-35.3%200-64%2028.7-64%2064V512H64c-35.3%200-64-28.7-64-64V64zm384%2064H256V0L384%20128zM176%20352h32c30.9%200%2056%2025.1%2056%2056s-25.1%2056-56%2056H192v32c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V448%20368c0-8.8%207.2-16%2016-16zm32%2080c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H192v48h16zm96-80h32c26.5%200%2048%2021.5%2048%2048v64c0%2026.5-21.5%2048-48%2048H304c-8.8%200-16-7.2-16-16V368c0-8.8%207.2-16%2016-16zm32%20128c8.8%200%2016-7.2%2016-16V400c0-8.8-7.2-16-16-16H320v96h16zm80-112c0-8.8%207.2-16%2016-16h48c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H448v32h32c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H448v48c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V432%20368z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-file-signature { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V428.7c-2.7%201.1-5.4%202-8.2%202.7l-60.1%2015c-3%20.7-6%201.2-9%201.4c-.9%20.1-1.8%20.2-2.7%20.2H240c-6.1%200-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2%202.1-8.8%205.5l-8.8%2017.7c-2.9%205.9-9.2%209.4-15.7%208.8s-12.1-5.1-13.9-11.3L144%20381l-9.8%2032.8c-6.1%2020.3-24.8%2034.2-46%2034.2H80c-8.8%200-16-7.2-16-16s7.2-16%2016-16h8.2c7.1%200%2013.3-4.6%2015.3-11.4l14.9-49.5c3.4-11.3%2013.8-19.1%2025.6-19.1s22.2%207.8%2025.6%2019.1l11.6%2038.6c7.4-6.2%2016.8-9.7%2026.8-9.7c15.9%200%2030.4%209%2037.5%2023.2l4.4%208.8h8.9c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3%208.6-21.5%2016.8-29.7L384%20203.6V160H256c-17.7%200-32-14.3-32-32V0H64zM256%200V128H384L256%200zM549.8%20139.7c-15.6-15.6-40.9-15.6-56.6%200l-29.4%2029.4%2071%2071%2029.4-29.4c15.6-15.6%2015.6-40.9%200-56.6l-14.4-14.4zM311.9%20321c-4.1%204.1-7%209.2-8.4%2014.9l-15%2060.1c-1.4%205.5%20.2%2011.2%204.2%2015.2s9.7%205.6%2015.2%204.2l60.1-15c5.6-1.4%2010.8-4.3%2014.9-8.4L512.1%20262.7l-71-71L311.9%20321z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-globe { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M352%20256c0%2022.2-1.2%2043.6-3.3%2064H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6%203.3-64H348.7c2.2%2020.4%203.3%2041.8%203.3%2064zm28.8-64H503.9c5.3%2020.5%208.1%2041.9%208.1%2064s-2.8%2043.5-8.1%2064H380.8c2.1-20.6%203.2-42%203.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3%2020.7%20142%2077.5%20171.9%20151.6zm-149.1%200H167.7c6.1-36.4%2015.5-68.6%2027-94.7c10.5-23.6%2022.2-40.7%2033.5-51.5C239.4%203.2%20248.7%200%20256%200s16.6%203.2%2027.8%2013.8c11.3%2010.8%2023%2027.9%2033.5%2051.5c11.6%2026%2020.9%2058.2%2027%2094.7zm-209%200H18.6C48.6%2085.9%20112.2%2029.1%20190.6%208.4C165.1%2042.6%20145.3%2096.1%20135.3%20160zM8.1%20192H131.2c-2.1%2020.6-3.2%2042-3.2%2064s1.1%2043.4%203.2%2064H8.1C2.8%20299.5%200%20278.1%200%20256s2.8-43.5%208.1-64zM194.7%20446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1%2036.4-15.5%2068.6-27%2094.6c-10.5%2023.6-22.2%2040.7-33.5%2051.5C272.6%20508.8%20263.3%20512%20256%20512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3%20352c10%2063.9%2029.8%20117.4%2055.3%20151.6C112.2%20482.9%2048.6%20426.1%2018.6%20352H135.3zm358.1%200c-30%2074.1-93.6%20130.9-171.9%20151.6c25.5-34.2%2045.2-87.7%2055.3-151.6H493.4z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-graduation-cap { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M320%2032c-8.1%200-16.1%201.4-23.7%204.1L15.8%20137.4C6.3%20140.9%200%20149.9%200%20160s6.3%2019.1%2015.8%2022.6l57.9%2020.9C57.3%20229.3%2048%20259.8%2048%20291.9v28.1c0%2028.4-10.8%2057.7-22.3%2080.8c-6.5%2013-13.9%2025.8-22.5%2037.6C0%20442.7-.9%20448.3%20.9%20453.4s6%208.9%2011.2%2010.2l64%2016c4.2%201.1%208.7%20.3%2012.4-2s6.3-6.1%207.1-10.4c8.6-42.8%204.3-81.2-2.1-108.7C90.3%20344.3%2086%20329.8%2080%20316.5V291.9c0-30.2%2010.2-58.7%2027.9-81.5c12.9-15.5%2029.6-28%2049.2-35.7l157-61.7c8.2-3.2%2017.5%20.8%2020.7%209s-.8%2017.5-9%2020.7l-157%2061.7c-12.4%204.9-23.3%2012.4-32.2%2021.6l159.6%2057.6c7.6%202.7%2015.6%204.1%2023.7%204.1s16.1-1.4%2023.7-4.1L624.2%20182.6c9.5-3.4%2015.8-12.5%2015.8-22.6s-6.3-19.1-15.8-22.6L343.7%2036.1C336.1%2033.4%20328.1%2032%20320%2032zM128%20408c0%2035.3%2086%2072%20192%2072s192-36.7%20192-72L496.7%20262.6%20354.5%20314c-11.1%204-22.8%206-34.5%206s-23.5-2-34.5-6L143.3%20262.6%20128%20408z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-hands-helping { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M544%20248v3.3l69.7-69.7c21.9-21.9%2021.9-57.3%200-79.2L535.6%2024.4c-21.9-21.9-57.3-21.9-79.2%200L416.3%2064.5c-2.7-.3-5.5-.5-8.3-.5H296c-37.1%200-67.6%2028-71.6%2064H224V248c0%2022.1%2017.9%2040%2040%2040s40-17.9%2040-40V176c0%200%200-.1%200-.1V160l16%200%20136%200c0%200%200%200%20.1%200H464c44.2%200%2080%2035.8%2080%2080v8zM336%20192v56c0%2039.8-32.2%2072-72%2072s-72-32.2-72-72V129.4c-35.9%206.2-65.8%2032.3-76%2068.2L99.5%20255.2%2026.3%20328.4c-21.9%2021.9-21.9%2057.3%200%2079.2l78.1%2078.1c21.9%2021.9%2057.3%2021.9%2079.2%200l37.7-37.7c.9%200%201.8%20.1%202.7%20.1H384c26.5%200%2048-21.5%2048-48c0-5.6-1-11-2.7-16H432c26.5%200%2048-21.5%2048-48c0-12.8-5-24.4-13.2-33c25.7-5%2045.1-27.6%2045.2-54.8v-.4c-.1-30.8-25.1-55.8-56-55.8c0%200%200%200%200%200l-120%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-id-badge { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V64c0-35.3-28.7-64-64-64H64zm96%20320h64c44.2%200%2080%2035.8%2080%2080c0%208.8-7.2%2016-16%2016H96c-8.8%200-16-7.2-16-16c0-44.2%2035.8-80%2080-80zm-32-96a64%2064%200%201%201%20128%200%2064%2064%200%201%201%20-128%200zM144%2064h96c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H144c-8.8%200-16-7.2-16-16s7.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-instagram { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M224.1%20141c-63.6%200-114.9%2051.3-114.9%20114.9s51.3%20114.9%20114.9%20114.9S339%20319.5%20339%20255.9%20287.7%20141%20224.1%20141zm0%20189.6c-41.1%200-74.7-33.5-74.7-74.7s33.5-74.7%2074.7-74.7%2074.7%2033.5%2074.7%2074.7-33.6%2074.7-74.7%2074.7zm146.4-194.3c0%2014.9-12%2026.8-26.8%2026.8-14.9%200-26.8-12-26.8-26.8s12-26.8%2026.8-26.8%2026.8%2012%2026.8%2026.8zm76.1%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM398.8%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-layer-group { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M264.5%205.2c14.9-6.9%2032.1-6.9%2047%200l218.6%20101c8.5%203.9%2013.9%2012.4%2013.9%2021.8s-5.4%2017.9-13.9%2021.8l-218.6%20101c-14.9%206.9-32.1%206.9-47%200L45.9%20149.8C37.4%20145.8%2032%20137.3%2032%20128s5.4-17.9%2013.9-21.8L264.5%205.2zM476.9%20209.6l53.2%2024.6c8.5%203.9%2013.9%2012.4%2013.9%2021.8s-5.4%2017.9-13.9%2021.8l-218.6%20101c-14.9%206.9-32.1%206.9-47%200L45.9%20277.8C37.4%20273.8%2032%20265.3%2032%20256s5.4-17.9%2013.9-21.8l53.2-24.6%20152%2070.2c23.4%2010.8%2050.4%2010.8%2073.8%200l152-70.2zm-152%20198.2l152-70.2%2053.2%2024.6c8.5%203.9%2013.9%2012.4%2013.9%2021.8s-5.4%2017.9-13.9%2021.8l-218.6%20101c-14.9%206.9-32.1%206.9-47%200L45.9%20405.8C37.4%20401.8%2032%20393.3%2032%20384s5.4-17.9%2013.9-21.8l53.2-24.6%20152%2070.2c23.4%2010.8%2050.4%2010.8%2073.8%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-linkedin { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M416%2032H31.9C14.3%2032%200%2046.5%200%2064.3v383.4C0%20465.5%2014.3%20480%2031.9%20480H416c17.6%200%2032-14.5%2032-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4%20416H69V202.2h66.5V416zm-33.2-243c-21.3%200-38.5-17.3-38.5-38.5S80.9%2096%20102.2%2096c21.2%200%2038.5%2017.3%2038.5%2038.5%200%2021.3-17.2%2038.5-38.5%2038.5zm282.1%20243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6%200-39.9%2027-39.9%2054.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8%2030.6-34.5%2062.9-34.5%2067.2%200%2079.7%2044.3%2079.7%20101.9V416z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-list-ol { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M24%2056c0-13.3%2010.7-24%2024-24H80c13.3%200%2024%2010.7%2024%2024V176h16c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H40c-13.3%200-24-10.7-24-24s10.7-24%2024-24H56V80H48C34.7%2080%2024%2069.3%2024%2056zM86.7%20341.2c-6.5-7.4-18.3-6.9-24%201.2L51.5%20357.9c-7.7%2010.8-22.7%2013.3-33.5%205.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2%2072.3-35.6%2099.2-4.9c21.3%2024.4%2020.8%2060.9-1.1%2084.7L86.8%20432H120c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H32c-9.5%200-18.2-5.6-22-14.4s-2.1-18.9%204.3-25.9l72-78c5.3-5.8%205.4-14.6%20.3-20.5zM224%2064H480c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H224c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160H480c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H224c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160H480c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H224c-17.7%200-32-14.3-32-32s14.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-paper-plane { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M498.1%205.6c10.1%207%2015.4%2019.1%2013.5%2031.2l-64%20416c-1.5%209.7-7.4%2018.2-16%2023s-18.9%205.4-28%201.6L284%20427.7l-68.5%2074.1c-8.9%209.7-22.9%2012.9-35.2%208.1S160%20493.2%20160%20480V396.4c0-4%201.5-7.8%204.2-10.7L331.8%20202.8c5.8-6.3%205.6-16-.4-22s-15.7-6.4-22-.7L106%20360.8%2017.7%20316.6C7.1%20311.3%20.3%20300.7%200%20288.9s5.9-22.8%2016.1-28.7l448-256c10.7-6.1%2023.9-5.5%2034%201.4z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-pen-nib { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M368.4%2018.3L312.7%2074.1%20437.9%20199.3l55.7-55.7c21.9-21.9%2021.9-57.3%200-79.2L447.6%2018.3c-21.9-21.9-57.3-21.9-79.2%200zM288%2094.6l-9.2%202.8L134.7%20140.6c-19.9%206-35.7%2021.2-42.3%2041L3.8%20445.8c-3.8%2011.3-1%2023.9%207.3%2032.4L164.7%20324.7c-3-6.3-4.7-13.3-4.7-20.7c0-26.5%2021.5-48%2048-48s48%2021.5%2048%2048s-21.5%2048-48%2048c-7.4%200-14.4-1.7-20.7-4.7L33.7%20500.9c8.6%208.3%2021.1%2011.2%2032.4%207.3l264.3-88.6c19.7-6.6%2035-22.4%2041-42.3l43.2-144.1%202.8-9.2L288%2094.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-play { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M73%2039c-14.8-9.1-33.4-9.4-48.5-.9S0%2062.6%200%2080V432c0%2017.4%209.4%2033.4%2024.5%2041.9s33.7%208.1%2048.5-.9L361%20297c14.3-8.7%2023-24.2%2023-41s-8.7-32.2-23-41L73%2039z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-play-circle { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M0%20256a256%20256%200%201%201%20512%200A256%20256%200%201%201%200%20256zM188.3%20147.1c-7.6%204.2-12.3%2012.3-12.3%2020.9V344c0%208.7%204.7%2016.7%2012.3%2020.9s16.8%204.1%2024.3-.5l144-88c7.1-4.4%2011.5-12.1%2011.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-rocket { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M156.6%20384.9L125.7%20354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9%207-20.5%2011.8-33.8L24%20288c-8.6%200-16.6-4.6-20.9-12.1s-4.2-16.7%20.2-24.1l52.5-88.5c13-21.9%2036.5-35.3%2061.9-35.3l82.3%200c2.4-4%204.8-7.7%207.2-11.3C289.1-4.1%20411.1-8.1%20483.9%205.3c11.6%202.1%2020.6%2011.2%2022.8%2022.8c13.4%2072.9%209.3%20194.8-111.4%20276.7c-3.5%202.4-7.3%204.8-11.3%207.2v82.3c0%2025.4-13.4%2049-35.3%2061.9l-88.5%2052.5c-7.4%204.4-16.6%204.5-24.1%20.2s-12.1-12.2-12.1-20.9V380.8c-14.1%204.9-26.4%208.9-35.7%2011.9c-11.2%203.6-23.4%20.5-31.8-7.8zM384%20168a40%2040%200%201%200%200-80%2040%2040%200%201%200%200%2080z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-school { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M337.8%205.4C327-1.8%20313-1.8%20302.2%205.4L166.3%2096H48C21.5%2096%200%20117.5%200%20144V464c0%2026.5%2021.5%2048%2048%2048H592c26.5%200%2048-21.5%2048-48V144c0-26.5-21.5-48-48-48H473.7L337.8%205.4zM256%20416c0-35.3%2028.7-64%2064-64s64%2028.7%2064%2064v96H256V416zM96%20192h32c8.8%200%2016%207.2%2016%2016v64c0%208.8-7.2%2016-16%2016H96c-8.8%200-16-7.2-16-16V208c0-8.8%207.2-16%2016-16zm400%2016c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016v64c0%208.8-7.2%2016-16%2016H512c-8.8%200-16-7.2-16-16V208zM96%20320h32c8.8%200%2016%207.2%2016%2016v64c0%208.8-7.2%2016-16%2016H96c-8.8%200-16-7.2-16-16V336c0-8.8%207.2-16%2016-16zm400%2016c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016v64c0%208.8-7.2%2016-16%2016H512c-8.8%200-16-7.2-16-16V336zM232%20176a88%2088%200%201%201%20176%200%2088%2088%200%201%201%20-176%200zm88-48c-8.8%200-16%207.2-16%2016v32c0%208.8%207.2%2016%2016%2016h32c8.8%200%2016-7.2%2016-16s-7.2-16-16-16H336V144c0-8.8-7.2-16-16-16z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-shield-alt { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%200c4.6%200%209.2%201%2013.4%202.9L457.7%2082.8c22%209.3%2038.4%2031%2038.3%2057.2c-.5%2099.2-41.3%20280.7-213.6%20363.2c-16.7%208-36.1%208-52.8%200C57.3%20420.7%2016.5%20239.2%2016%20140c-.1-26.2%2016.3-47.9%2038.3-57.2L242.7%202.9C246.8%201%20251.4%200%20256%200zm0%2066.8V444.8C394%20378%20431.1%20230.1%20432%20141.4L256%2066.8l0%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-spinner { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M304%2048a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zm0%20416a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM48%20304a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zm464-48a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM142.9%20437A48%2048%200%201%200%2075%20369.1%2048%2048%200%201%200%20142.9%20437zm0-294.2A48%2048%200%201%200%2075%2075a48%2048%200%201%200%2067.9%2067.9zM369.1%20437A48%2048%200%201%200%20437%20369.1%2048%2048%200%201%200%20369.1%20437z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-sticky-note { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H288V368c0-26.5%2021.5-48%2048-48H448V96c0-35.3-28.7-64-64-64H64zM448%20352H402.7%20336c-8.8%200-16%207.2-16%2016v66.7V480l32-32%2064-64%2032-32z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-times { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-tools { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M78.6%205C69.1-2.4%2055.6-1.5%2047%207L7%2047c-8.5%208.5-9.4%2022-2.1%2031.6l80%20104c4.5%205.9%2011.6%209.4%2019%209.4h54.1l109%20109c-14.7%2029-10%2065.4%2014.3%2089.6l112%20112c12.5%2012.5%2032.8%2012.5%2045.3%200l64-64c12.5-12.5%2012.5-32.8%200-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109V104c0-7.5-3.5-14.5-9.4-19L78.6%205zM19.9%20396.1C7.2%20408.8%200%20426.1%200%20444.1C0%20481.6%2030.4%20512%2067.9%20512c18%200%2035.3-7.2%2048-19.9L233.7%20374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9%20396.1zM512%20144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9%2063.9c-3%203-7.1%204.7-11.3%204.7H352c-8.8%200-16-7.2-16-16V102.6c0-4.2%201.7-8.3%204.7-11.3l63.9-63.9c8.1-8.1%205.2-21.8-6-24.2C388.7%201.1%20378.5%200%20368%200C288.5%200%20224%2064.5%20224%20144l0%20.8%2085.3%2085.3c36-9.1%2075.8%20.5%20104%2028.7L429%20274.5c49-23%2083-72.8%2083-130.5zM56%20432a24%2024%200%201%201%2048%200%2024%2024%200%201%201%20-48%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-twitter { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M459.37%20151.716c.325%204.548.325%209.097.325%2013.645%200%20138.72-105.583%20298.558-298.558%20298.558-59.452%200-114.68-17.219-161.137-47.106%208.447.974%2016.568%201.299%2025.34%201.299%2049.055%200%2094.213-16.568%20130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772%206.498.974%2012.995%201.624%2019.818%201.624%209.421%200%2018.843-1.3%2027.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969%207.797%2030.214%2012.67%2047.431%2013.319-28.264-18.843-46.781-51.005-46.781-87.391%200-19.492%205.197-37.36%2014.294-52.954%2051.655%2063.675%20129.3%20105.258%20216.365%20109.807-1.624-7.797-2.599-15.918-2.599-24.04%200-57.828%2046.782-104.934%20104.934-104.934%2030.213%200%2057.502%2012.67%2076.67%2033.137%2023.715-4.548%2046.456-13.32%2066.599-25.34-7.798%2024.366-24.366%2044.833-46.132%2057.827%2021.117-2.273%2041.584-8.122%2060.426-16.243-14.292%2020.791-32.161%2039.308-52.628%2054.253z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-university { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M243.4%202.6l-224%2096c-14%206-21.8%2021-18.7%2035.8S16.8%20160%2032%20160v8c0%2013.3%2010.7%2024%2024%2024H456c13.3%200%2024-10.7%2024-24v-8c15.2%200%2028.3-10.7%2031.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2%200zM128%20224H64V420.3c-.6%20.3-1.2%20.7-1.8%201.1l-48%2032c-11.7%207.8-17%2022.4-12.9%2035.9S17.9%20512%2032%20512H480c14.1%200%2026.5-9.2%2030.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256%2064a32%2032%200%201%201%200%2064%2032%2032%200%201%201%200-64z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-unlock { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M144%20144c0-44.2%2035.8-80%2080-80c31.9%200%2059.4%2018.6%2072.3%2045.7c7.6%2016%2026.7%2022.8%2042.6%2015.2s22.8-26.7%2015.2-42.6C331%2033.7%20281.5%200%20224%200C144.5%200%2080%2064.5%2080%20144v48H64c-35.3%200-64%2028.7-64%2064V448c0%2035.3%2028.7%2064%2064%2064H384c35.3%200%2064-28.7%2064-64V256c0-35.3-28.7-64-64-64H144V144z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-user-graduate { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M219.3%20.5c3.1-.6%206.3-.6%209.4%200l200%2040C439.9%2042.7%20448%2052.6%20448%2064s-8.1%2021.3-19.3%2023.5L352%20102.9V160c0%2070.7-57.3%20128-128%20128s-128-57.3-128-128V102.9L48%2093.3v65.1l15.7%2078.4c.9%204.7-.3%209.6-3.3%2013.3s-7.6%205.9-12.4%205.9H16c-4.8%200-9.3-2.1-12.4-5.9s-4.3-8.6-3.3-13.3L16%20158.4V86.6C6.5%2083.3%200%2074.3%200%2064C0%2052.6%208.1%2042.7%2019.3%2040.5l200-40zM111.9%20327.7c10.5-3.4%2021.8%20.4%2029.4%208.5l71%2075.5c6.3%206.7%2017%206.7%2023.3%200l71-75.5c7.6-8.1%2018.9-11.9%2029.4-8.5C401%20348.6%20448%20409.4%20448%20481.3c0%2017-13.8%2030.7-30.7%2030.7H30.7C13.8%20512%200%20498.2%200%20481.3c0-71.9%2047-132.7%20111.9-153.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-user-tie { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M224%20256A128%20128%200%201%201%20224%200a128%20128%200%201%201%200%20256zM209.1%20359.2l-18.6-31c-6.4-10.7%201.3-24.2%2013.7-24.2H224h19.7c12.4%200%2020.1%2013.6%2013.7%2024.2l-18.6%2031%2033.4%20123.9%2036-146.9c2-8.1%209.8-13.4%2017.9-11.3c70.1%2017.6%20121.9%2081%20121.9%20156.4c0%2017-13.8%2030.7-30.7%2030.7H285.5c-2.1%200-4-.4-5.8-1.1l.3%201.1H168l.3-1.1c-1.8%20.7-3.8%201.1-5.8%201.1H30.7C13.8%20512%200%20498.2%200%20481.3c0-75.5%2051.9-138.9%20121.9-156.4c8.1-2%2015.9%203.3%2017.9%2011.3l36%20146.9%2033.4-123.9z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-users { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M144%200a80%2080%200%201%201%200%20160A80%2080%200%201%201%20144%200zM512%200a80%2080%200%201%201%200%20160A80%2080%200%201%201%20512%200zM0%20298.7C0%20239.8%2047.8%20192%20106.7%20192h42.7c15.9%200%2031%203.5%2044.6%209.7c-1.3%207.2-1.9%2014.7-1.9%2022.3c0%2038.2%2016.8%2072.5%2043.3%2096c-.2%200-.4%200-.7%200H21.3C9.6%20320%200%20310.4%200%20298.7zM405.3%20320c-.2%200-.4%200-.7%200c26.6-23.5%2043.3-57.8%2043.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3%2028.7-9.7%2044.6-9.7h42.7C592.2%20192%20640%20239.8%20640%20298.7c0%2011.8-9.6%2021.3-21.3%2021.3H405.3zM224%20224a96%2096%200%201%201%20192%200%2096%2096%200%201%201%20-192%200zM128%20485.3C128%20411.7%20187.7%20352%20261.3%20352H378.7C452.3%20352%20512%20411.7%20512%20485.3c0%2014.7-11.9%2026.7-26.7%2026.7H154.7c-14.7%200-26.7-11.9-26.7-26.7z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-users-cog { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M144%20160A80%2080%200%201%200%20144%200a80%2080%200%201%200%200%20160zm368%200A80%2080%200%201%200%20512%200a80%2080%200%201%200%200%20160zM0%20298.7C0%20310.4%209.6%20320%2021.3%20320H234.7c.2%200%20.4%200%20.7%200c-26.6-23.5-43.3-57.8-43.3-96c0-7.6%20.7-15%201.9-22.3c-13.6-6.3-28.7-9.7-44.6-9.7H106.7C47.8%20192%200%20239.8%200%20298.7zM320%20320c24%200%2045.9-8.8%2062.7-23.3c2.5-3.7%205.2-7.3%208-10.7c2.7-3.3%205.7-6.1%209-8.3C410%20262.3%20416%20243.9%20416%20224c0-53-43-96-96-96s-96%2043-96%2096s43%2096%2096%2096zm65.4%2060.2c-10.3-5.9-18.1-16.2-20.8-28.2H261.3C187.7%20352%20128%20411.7%20128%20485.3c0%2014.7%2011.9%2026.7%2026.7%2026.7H455.2c-2.1-5.2-3.2-10.9-3.2-16.4v-3c-1.3-.7-2.7-1.5-4-2.3l-2.6%201.5c-16.8%209.7-40.5%208-54.7-9.7c-4.5-5.6-8.6-11.5-12.4-17.6l-.1-.2-.1-.2-2.4-4.1-.1-.2-.1-.2c-3.4-6.2-6.4-12.6-9-19.3c-8.2-21.2%202.2-42.6%2019-52.3l2.7-1.5c0-.8%200-1.5%200-2.3s0-1.5%200-2.3l-2.7-1.5zM533.3%20192H490.7c-15.9%200-31%203.5-44.6%209.7c1.3%207.2%201.9%2014.7%201.9%2022.3c0%2017.4-3.5%2033.9-9.7%2049c2.5%20.9%204.9%202%207.1%203.3l2.6%201.5c1.3-.8%202.6-1.6%204-2.3v-3c0-19.4%2013.3-39.1%2035.8-42.6c7.9-1.2%2016-1.9%2024.2-1.9s16.3%20.6%2024.2%201.9c22.5%203.5%2035.8%2023.2%2035.8%2042.6v3c1.3%20.7%202.7%201.5%204%202.3l2.6-1.5c16.8-9.7%2040.5-8%2054.7%209.7c2.3%202.8%204.5%205.8%206.6%208.7c-2.1-57.1-49-102.7-106.6-102.7zm91.3%20163.9c6.3-3.6%209.5-11.1%206.8-18c-2.1-5.5-4.6-10.8-7.4-15.9l-2.3-4c-3.1-5.1-6.5-9.9-10.2-14.5c-4.6-5.7-12.7-6.7-19-3L574.4%20311c-8.9-7.6-19.1-13.6-30.4-17.6v-21c0-7.3-4.9-13.8-12.1-14.9c-6.5-1-13.1-1.5-19.9-1.5s-13.4%20.5-19.9%201.5c-7.2%201.1-12.1%207.6-12.1%2014.9v21c-11.2%204-21.5%2010-30.4%2017.6l-18.2-10.5c-6.3-3.6-14.4-2.6-19%203c-3.7%204.6-7.1%209.5-10.2%2014.6l-2.3%203.9c-2.8%205.1-5.3%2010.4-7.4%2015.9c-2.6%206.8%20.5%2014.3%206.8%2017.9l18.2%2010.5c-1%205.7-1.6%2011.6-1.6%2017.6s.6%2011.9%201.6%2017.5l-18.2%2010.5c-6.3%203.6-9.5%2011.1-6.8%2017.9c2.1%205.5%204.6%2010.7%207.4%2015.8l2.4%204.1c3%205.1%206.4%209.9%2010.1%2014.5c4.6%205.7%2012.7%206.7%2019%203L449.6%20457c8.9%207.6%2019.2%2013.6%2030.4%2017.6v21c0%207.3%204.9%2013.8%2012.1%2014.9c6.5%201%2013.1%201.5%2019.9%201.5s13.4-.5%2019.9-1.5c7.2-1.1%2012.1-7.6%2012.1-14.9v-21c11.2-4%2021.5-10%2030.4-17.6l18.2%2010.5c6.3%203.6%2014.4%202.6%2019-3c3.7-4.6%207.1-9.4%2010.1-14.5l2.4-4.2c2.8-5.1%205.3-10.3%207.4-15.8c2.6-6.8-.5-14.3-6.8-17.9l-18.2-10.5c1-5.7%201.6-11.6%201.6-17.5s-.6-11.9-1.6-17.6l18.2-10.5zM472%20384a40%2040%200%201%201%2080%200%2040%2040%200%201%201%20-80%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-video { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M0%20128C0%2092.7%2028.7%2064%2064%2064H320c35.3%200%2064%2028.7%2064%2064V384c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V128zM559.1%2099.8c10.4%205.6%2016.9%2016.4%2016.9%2028.2V384c0%2011.8-6.5%2022.6-16.9%2028.2s-23%205-32.9-1.6l-96-64L416%20337.1V320%20192%20174.9l14.2-9.5%2096-64c9.8-6.5%2022.4-7.2%2032.9-1.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-youtube { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M549.655%20124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781%2064%20288%2064%20288%2064S117.22%2064%2074.629%2075.486c-23.497%206.322-42.003%2024.947-48.284%2048.597-11.412%2042.867-11.412%20132.305-11.412%20132.305s0%2089.438%2011.412%20132.305c6.281%2023.65%2024.787%2041.5%2048.284%2047.821C117.22%20448%20288%20448%20288%20448s170.78%200%20213.371-11.486c23.497-6.321%2042.003-24.171%2048.284-47.821%2011.412-42.867%2011.412-132.305%2011.412-132.305s0-89.438-11.412-132.305zm-317.51%20213.508V175.185l142.739%2081.205-142.739%2081.201z%22%2F%3E%3C%2Fsvg%3E"); }
.fa-cogs { --fa-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M308.5%20135.3c7.1-6.3%209.9-16.2%206.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304%2089.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2%209.3c-10.7-8.8-23-16-36.2-20.9L199%2027.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9%208.4%20167.2%208%20160.4%208h-.7c-6.8%200-13.5%20.4-20.1%201.2c-9.4%201.1-16.6%208.6-18.5%2017.8L115%2056.1c-13.3%205-25.5%2012.1-36.2%2020.9L50.5%2067.8c-9-3-19-.5-24.7%207.1c-3.5%204.7-6.8%209.6-9.9%2014.6l-3%205.3c-2.8%205-5.3%2010.2-7.6%2015.6c-3.7%208.7-.9%2018.6%206.2%2025l22.2%2019.8C32.6%20161.9%2032%20168.9%2032%20176s.6%2014.1%201.7%2020.9L11.5%20216.7c-7.1%206.3-9.9%2016.2-6.2%2025c2.3%205.3%204.8%2010.5%207.6%2015.6l3%205.2c3%205.1%206.3%209.9%209.9%2014.6c5.7%207.6%2015.7%2010.1%2024.7%207.1l28.2-9.3c10.7%208.8%2023%2016%2036.2%2020.9l6.1%2029.1c1.9%209.3%209.1%2016.7%2018.5%2017.8c6.7%20.8%2013.5%201.2%2020.4%201.2s13.7-.4%2020.4-1.2c9.4-1.1%2016.6-8.6%2018.5-17.8l6.1-29.1c13.3-5%2025.5-12.1%2036.2-20.9l28.2%209.3c9%203%2019%20.5%2024.7-7.1c3.5-4.7%206.8-9.5%209.8-14.6l3.1-5.4c2.8-5%205.3-10.2%207.6-15.5c3.7-8.7%20.9-18.6-6.2-25l-22.2-19.8c1.1-6.8%201.7-13.8%201.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112%20176a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zM504.7%20500.5c6.3%207.1%2016.2%209.9%2025%206.2c5.3-2.3%2010.5-4.8%2015.5-7.6l5.4-3.1c5-3%209.9-6.3%2014.6-9.8c7.6-5.7%2010.1-15.7%207.1-24.7l-9.3-28.2c8.8-10.7%2016-23%2020.9-36.2l29.1-6.1c9.3-1.9%2016.7-9.1%2017.8-18.5c.8-6.7%201.2-13.5%201.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9%20307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9%20.5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25%206.2l-19.8%2022.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1%20.6-20.9%201.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3%202.3-10.5%204.8-15.6%207.6l-5.2%203c-5.1%203-9.9%206.3-14.6%209.9c-7.6%205.7-10.1%2015.7-7.1%2024.7l9.3%2028.2c-8.8%2010.7-16%2023-20.9%2036.2L315.1%20313c-9.3%201.9-16.7%209.1-17.8%2018.5c-.8%206.7-1.2%2013.5-1.2%2020.4s.4%2013.7%201.2%2020.4c1.1%209.4%208.6%2016.6%2017.8%2018.5l29.1%206.1c5%2013.3%2012.1%2025.5%2020.9%2036.2l-9.3%2028.2c-3%209-.5%2019%207.1%2024.7c4.7%203.5%209.5%206.8%2014.6%209.8l5.4%203.1c5%202.8%2010.2%205.3%2015.5%207.6c8.7%203.7%2018.6%20.9%2025-6.2l19.8-22.2c6.8%201.1%2013.8%201.7%2020.9%201.7s14.1-.6%2020.9-1.7l19.8%2022.2zM464%20304a48%2048%200%201%201%200%2096%2048%2048%200%201%201%200-96z%22%2F%3E%3C%2Fsvg%3E"); }

/* ========================================
   PREMIUM ANIMATIONS - ROBSPAIN.COM
   Brand Colors:
   - Chalkboard Green: #1E3A34
   - Vintage Gold: #E3B23C
   - Cream: #FAF3E0
   - Emerald: #047857
======================================== */

/* ========================================
   FADE-IN-UP ANIMATION
   Usage: Add .fade-in-up to any element
======================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for multiple elements */
.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.fade-in-up:nth-child(2) { transition-delay: 100ms; }
.fade-in-up:nth-child(3) { transition-delay: 200ms; }
.fade-in-up:nth-child(4) { transition-delay: 300ms; }
.fade-in-up:nth-child(5) { transition-delay: 400ms; }
.fade-in-up:nth-child(6) { transition-delay: 500ms; }

/* ========================================
   SHIMMER TEXT ANIMATION
   Usage: Add .shimmer-text to text elements
======================================== */
.shimmer-text {
    background: linear-gradient(
        120deg,
        #1E3A34 0%,
        #E3B23C 40%,
        #047857 50%,
        #E3B23C 60%,
        #1E3A34 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Slower shimmer variant */
.shimmer-text-slow {
    background: linear-gradient(
        120deg,
        #1E3A34 0%,
        #E3B23C 40%,
        #047857 50%,
        #E3B23C 60%,
        #1E3A34 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 6s linear infinite;
}

/* ========================================
   HOVER LIFT ANIMATION
   Usage: Add .hover-lift to cards, buttons
======================================== */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(30, 58, 52, 0.15),
                0 10px 20px rgba(30, 58, 52, 0.1);
}

.hover-lift:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 58, 52, 0.1);
}

/* Subtle lift variant */
.hover-lift-subtle {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift-subtle:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(30, 58, 52, 0.12);
}

/* ========================================
   GRADIENT BACKGROUND ANIMATION
   Usage: Add .gradient-bg to sections
======================================== */
.gradient-bg {
    background: linear-gradient(
        135deg,
        #1E3A34 0%,
        #047857 50%,
        #1E3A34 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animated gradient overlay */
.gradient-overlay {
    position: relative;
    overflow: hidden;
}

.gradient-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(227, 178, 60, 0.2) 50%,
        transparent 100%
    );
    animation: slideRight 3s ease-in-out infinite;
}

@keyframes slideRight {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ========================================
   NUMBER COUNTER ANIMATION
   Usage: Add .number-counter to stat elements
======================================== */
.number-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.number-counter.counting {
    animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ========================================
   BUTTON ENHANCEMENTS
======================================== */
.btn-premium {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 14px 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: #FAF3E0;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-premium:hover::before {
    width: 300px;
    height: 300px;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(4, 120, 87, 0.3),
                0 0 40px rgba(227, 178, 60, 0.2);
}

.btn-premium:active {
    transform: translateY(0);
}

/* Gold variant */
.btn-premium-gold {
    background: linear-gradient(135deg, #E3B23C 0%, #d4a52e 100%);
    color: #1E3A34;
}

.btn-premium-gold:hover {
    box-shadow: 0 12px 24px rgba(227, 178, 60, 0.3),
                0 0 40px rgba(4, 120, 87, 0.2);
}

/* ========================================
   CARD ENHANCEMENTS
======================================== */
.card-premium {
    position: relative;
    border-radius: 16px;
    background: white;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.card-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #047857, #E3B23C);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-premium:hover::after {
    opacity: 1;
}

.card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(30, 58, 52, 0.15);
}

/* ========================================
   PARALLAX EFFECTS
======================================== */
.parallax-slow {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.parallax-medium {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.parallax-fast {
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* ========================================
   FADE IN VARIANTS
======================================== */
.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
}

/* ========================================
   SCALE ANIMATIONS
======================================== */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   BORDER ANIMATIONS
======================================== */
.border-draw {
    position: relative;
}

.border-draw::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #047857;
    border-radius: inherit;
    clip-path: polygon(
        0 0,
        0 0,
        0 100%,
        0 100%
    );
    transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.border-draw.visible::before {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

/* ========================================
   GLOW EFFECTS
======================================== */
.glow-on-hover {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-on-hover::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #047857, #E3B23C);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    filter: blur(20px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-on-hover:hover::after {
    opacity: 0.6;
}

/* ========================================
   LOADING & SKELETON ANIMATIONS
======================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */
@media (max-width: 768px) {
    .fade-in-up {
        transform: translateY(20px);
    }
    
    .hover-lift:hover {
        transform: translateY(-4px);
    }
    
    .card-premium:hover {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .fade-in {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.hover-lift,
.parallax-slow,
.parallax-medium,
.parallax-fast {
    will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.visible {
    will-change: auto;
}

/* Premium Enhanced Styles - $25k Professional Design */

/* Advanced Custom Properties */
:root {
    /* Premium Color Palette */
    --primary-50: #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-400: #34d399;
    --primary-500: #10b981;
    --primary-600: #059669;
    --primary-700: #047857;
    --primary-800: #065f46;
    --primary-900: #064e3b;

    /* Sophisticated Grays */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Premium Gradients */
    --gradient-primary: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    --gradient-surface: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b  25%, #334155 50%, #475569 75%, #64748b 100%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);

    /* Advanced Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-premium: 0 32px 64px -12px rgba(16, 185, 129, 0.25);
    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);

    /* Premium Typography */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Advanced Spacing */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Advanced Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* Premium Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Premium Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Premium Typography System */
.display-1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.display-2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.heading-1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.heading-2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.3;
}

.heading-3 {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
}

.body-large {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--gray-600);
}

.body-medium {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gray-600);
}

/* Premium Navigation - Pro Max Glass Edition */
.nav-premium {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
    transition: all var(--transition-normal);
}

.logo-premium {
    font-size: 1.8rem;
    font-weight: 800; /* Authority weight */
    color: var(--gray-900);
    text-decoration: none;
    transition: all var(--transition-normal);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.03em;
}

.logo-premium:hover {
    color: var(--primary-600);
}

.nav-link-premium {
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
    position: relative;
    transition: all var(--transition-normal);
    padding: 12px 0;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nav-link-premium:hover {
    color: var(--primary-600);
}


/* Premium CTA Button */
.cta-nav-premium {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cta-nav-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-premium);
}

/* Premium Hero Section - Pro Max Light Edition */
.hero-premium {
    min-height: 75vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 120px 0 var(--space-8) 0;
}

.hero-background-premium {
    position: absolute;
    inset: 0;
    opacity: 1;
    background: 
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(52, 211, 153, 0.05) 0%, transparent 40%);
}

.hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    z-index: 0;
}

.hero-orbs-premium {
    position: absolute;
    inset: 0;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    animation: float 6s ease-in-out infinite;
}

.hero-content-premium {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    justify-items: start;
}

.hero-text-premium {
    color: var(--gray-900);
    text-align: left;
}

.hero-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-700);
    margin-bottom: var(--space-6);
}

.hero-title-premium {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    letter-spacing: -0.04em;
    color: var(--gray-900);
    text-align: left;
}

.hero-subtitle-premium {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--gray-600);
    margin-bottom: var(--space-8);
    max-width: 600px;
    text-align: left;
}

.hero-stats-premium {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    justify-content: flex-start;
}

.stat-number-premium {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-500);
    line-height: 1;
}

.stat-label-premium {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-weight: 600;
}

.hero-actions-premium {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: flex-start;
}

.btn-secondary-premium {
    background: white;
    color: var(--gray-700);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-secondary-premium:hover {
    border-color: var(--primary-400);
    color: var(--primary-700);
    transform: translateY(-2px);
}

.hero-visual-premium {
    position: relative;
    justify-self: center;
    margin-top: 0;
}

.hero-image-container-premium {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(16, 185, 129, 0.15);
    border: 12px solid white;
}

.hero-image-premium {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.hero-image-container-premium:hover .hero-image-premium {
    transform: scale(1.05);
}

/* Green overlay and glow effects removed for cleaner hero image */

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: rotate(0deg) scale(1); }
    50% { opacity: 0.9; transform: rotate(12deg) scale(1.02); }
}

/* Premium Floating Elements */
.floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 11; /* ensure above image/overlay */
}

.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-xl);
    animation: float 4s ease-in-out infinite;
}

.floating-card-1 {
    top: 10%;
    right: -10%;
    animation-delay: 0s;
}

.floating-card-2 {
    bottom: 20%;
    left: -15%;
    animation-delay: 2s;
}

/* Contact Section Contrast Fixes */
.contact-section .section-title-premium {
    color: white;
}

.contact-section .section-description-premium {
    color: rgba(255, 255, 255, 0.9);
}

.contact-section .text-gradient {
    background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-section .section-badge-premium {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animation Classes */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease-out forwards;
}

.animate-scale-up {
    opacity: 0;
    transform: scale(0.9);
    animation: scaleUp 0.8s ease-out forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleUp {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Premium Sections */
.section-premium {
    padding: var(--space-24) 0;
    position: relative;
}

.section-premium.alt {
    background: white;
}

.section-header-premium {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-16);
}

.section-badge-premium {
    display: inline-block;
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary-700);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.section-title-premium {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
    margin-bottom: var(--space-6);
}

.text-gradient {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-description-premium {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--gray-600);
}

/* Premium Cards Grid */
.cards-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.card-premium {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.card-premium:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.card-premium:hover::before {
    transform: scaleX(1);
}

.card-icon-premium {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    color: white;
    font-size: 1.5rem;
}

.card-title-premium {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.card-description-premium {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.card-link-premium {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition-normal);
}

.card-link-premium:hover {
    color: var(--primary-700);
    gap: var(--space-3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content-premium {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }

    .hero-stats-premium {
        justify-content: center;
    }
}

/* Mobile optimization for very small screens */
@media (max-width: 480px) {
    :root {
        --space-4: 0.75rem;
        --space-6: 1rem;
        --space-8: 1.25rem;
        --space-12: 1.5rem;
        --space-16: 2rem;
        --space-24: 2.5rem;
    }

    .hero-content-premium {
        padding: var(--space-4);
        gap: var(--space-6);
    }

    .hero-stats-premium {
        flex-direction: column;
        gap: var(--space-4);
        align-items: center;
    }

    .stat-premium {
        min-width: auto;
        text-align: center;
    }

    .hero-title-premium {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.2;
    }

    .hero-actions-premium {
        flex-direction: column;
        gap: var(--space-4);
        align-items: stretch;
    }

    .btn-primary-premium,
    .btn-secondary-premium {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    :root {
        --space-4: 1rem;
        --space-6: 1.25rem;
        --space-8: 1.5rem;
        --space-12: 2rem;
        --space-16: 2.5rem;
        --space-24: 3rem;
    }

    .nav-links-premium {
        gap: var(--space-4);
    }

    .hero-stats-premium {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-6);
        flex-wrap: wrap;
    }

    .hero-content-premium {
        padding: var(--space-6);
        gap: var(--space-8);
    }

    .hero-actions-premium {
        justify-content: center;
    }

    .cards-grid-premium {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Premium Section Enhancements - $25k Design Level */

/* Free Training Section - Glass Morphism */
.free-training-premium {
    background: linear-gradient(135deg,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(30, 41, 59, 0.9) 25%,
        rgba(51, 65, 85, 0.85) 50%,
        rgba(71, 85, 105, 0.8) 75%,
        rgba(100, 116, 139, 0.75) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--space-32) 0;
}

/* Trusted By (Authority Bar) */
.trusted-section {
    background: #0b1220;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.trusted-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-6) 0;
}

.trusted-label {
    color: #a7f3d0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.behavior-school-ctas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.behavior-school-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    text-decoration: none;
    border: 2px solid #10B981;
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
    transition: all 0.3s ease;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.behavior-school-cta:hover {
    background: linear-gradient(135deg, #10B981, #34d399);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    border-color: #34d399;
}

.behavior-school-cta i {
    color: #34d399;
    font-size: 1.25rem;
    transition: color 0.3s ease;
}

.behavior-school-cta:hover i {
    color: white;
}

.behavior-school-cta span {
    font-size: 1rem;
    transition: color 0.3s ease;
}

.behavior-school-cta:hover span {
    color: white;
}

/* Behavior School Professional Section */
.behavior-school-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: var(--space-24) 0;
}

/* Modern Display Cards Grid */
.display-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    margin-top: var(--space-12);
}

/* Responsive behavior for smaller screens */
@media (max-width: 1024px) {
    .display-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 640px) {
    .display-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        margin-top: var(--space-8);
    }
}

/* Modern Display Cards */
.display-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(229, 231, 235, 0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    height: 100%;
}

.display-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: inherit;
}

/* Card Background Effects */
.card-background {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.display-card:hover .card-background {
    opacity: 1;
}

.card-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(16, 185, 129, 0.15) 1px, transparent 0);
    background-size: 20px 20px;
    animation: patternFloat 8s ease-in-out infinite;
}

.card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite alternate;
}

@keyframes patternFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, 10px); }
}

@keyframes glowPulse {
    0% { opacity: 0.5; }
    100% { opacity: 0.8; }
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.community-card .card-icon {
    background: linear-gradient(135deg, #10B981, #059669);
}

.tools-card .card-icon {
    background: linear-gradient(135deg, #059669, #34d399);
}

.transformation-card .card-icon {
    background: linear-gradient(135deg, #34d399, #10B981);
}

.display-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.card-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

.display-card:hover .card-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Card Body */
.card-body {
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.display-card:hover .card-title {
    color: #059669;
}

.card-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 1.5rem;
    text-align: left;
}

.highlight {
    color: #10B981;
    font-weight: 600;
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.card-action {
    font-weight: 600;
    color: #059669;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.display-card:hover .card-action {
    color: #047857;
    transform: translateX(4px);
}

.card-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.card-arrow i {
    font-size: 1rem;
    color: #10B981;
    transition: all 0.3s ease;
}

.display-card:hover .card-arrow {
    background: #10B981;
    transform: translateX(8px);
}

.display-card:hover .card-arrow i {
    color: white;
    transform: translateX(2px);
}

/* Value Proposition Section - Modern Bento Style */
.value-proposition-section {
    background: #0f172a;
    padding: var(--space-20) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.proposition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.proposition-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.proposition-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-500);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

.proposition-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.proposition-card:hover::before {
    transform: scaleX(1);
}

.proposition-icon {
    width: 48px;
    height: 48px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    color: #10b981 !important; /* High contrast emerald icon color */
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.proposition-card:hover .proposition-icon {
    background: #10b981;
    color: #ffffff !important;
    transform: scale(1.1) rotate(5deg);
}

.proposition-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff !important; /* Force high contrast on dark background */
    margin-bottom: var(--space-4);
    line-height: 1.4;
}

.proposition-card p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cbd5e1 !important; /* Force high contrast (light slate) on dark background */
    margin: 0;
    flex-grow: 1;
}

/* NOTE: NEVER USE BLACK OR DARK TEXT IN THE PROPOSITION SECTION. 
   IT HAS A DARK BACKGROUND (#0f172a) AND REQUIRES LIGHT TEXT FOR ACCESSIBILITY. */

@media (max-width: 1024px) {
    .proposition-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .proposition-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .proposition-card {
        padding: var(--space-8);
    }
}

/* About Introduction Section */
.about-intro-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    padding: var(--space-20) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.about-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="intro-dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="0.8" fill="%2310B981" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23intro-dots)"/></svg>') repeat;
    pointer-events: none;
    z-index: 1;
}

.about-intro-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Enhanced styling moved to section below */

/* Gradient Text Scroll Effect */
.gradient-text-scroll {
    position: relative;
    overflow: hidden;
}

.gradient-text-content {
    background: linear-gradient(
        90deg,
        var(--text-secondary) 0%,
        var(--text-secondary) 30%,
        #10B981 50%,
        #059669 55%,
        #34d399 60%,
        var(--text-secondary) 70%,
        var(--text-secondary) 100%
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientScroll 8s ease-in-out infinite;
    display: inline;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

@keyframes gradientScroll {
    0%, 20% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    80%, 100% {
        background-position: 0% 50%;
    }
}

/* Enhanced styling for the about intro section */
.about-intro-content p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .about-intro-section {
        padding: var(--space-16) 0;
    }

    .about-intro-content p {
        font-size: 1.375rem;
        line-height: 1.7;
    }
}

/* Stats Section */
.stats-section {
    background: #fff;
    padding: var(--space-16) 0;
    border-bottom: 1px solid #e5e7eb;
}

.stats-section .hero-stats-premium {
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

.stats-section .stat-premium {
    text-align: center;
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.stats-section .stat-number-premium {
    color: var(--primary-600);
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
    margin-bottom: 0.5rem;
}

.stats-section .stat-label-premium {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .trusted-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }

    .stats-section .hero-stats-premium {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* FAQ Section */
.faq-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 4rem 0 2rem 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="faq-pattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="3" cy="3" r="1.5" fill="%23059669" opacity="0.08"/><circle cx="15" cy="15" r="1" fill="%2310B981" opacity="0.06"/></pattern></defs><rect width="100" height="100" fill="url(%23faq-pattern)"/></svg>') repeat;
    pointer-events: none;
}

.faq-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(16, 185, 129, 0.02) 50%,
        transparent 70%
    );
    animation: shimmer 8s ease-in-out infinite;
    pointer-events: none;
}

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

/* About Section (Two-Column) */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-12);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

/* Projects Section (Two-Column) */
.projects-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-12);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: var(--space-12);
}

.projects-visual {
    position: relative;
}

.resource-hub-section {
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}

.resource-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: 1120px;
    margin: var(--space-10) auto 0;
}

.resource-hub-card {
    display: block;
    min-height: 220px;
    padding: var(--space-6);
    border: 1px solid rgba(15, 107, 85, 0.14);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 22px 60px rgba(15, 49, 40, 0.07);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.resource-hub-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.38);
    box-shadow: 0 28px 70px rgba(15, 49, 40, 0.12);
}

.resource-hub-card span {
    display: block;
    margin-bottom: var(--space-4);
    color: var(--primary-700);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.resource-hub-card h3 {
    margin: 0 0 var(--space-3);
    color: var(--gray-900);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.12;
}

.resource-hub-card p {
    margin: 0;
    color: var(--gray-600);
    line-height: 1.62;
}

.study-tools-promo {
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 88% 12%, rgba(244, 197, 66, 0.24), transparent 9rem),
        radial-gradient(circle at 8% 86%, rgba(16, 185, 129, 0.22), transparent 10rem),
        linear-gradient(135deg, #062719 0%, #0f6b55 58%, #10231f 100%);
    border: 1px solid rgba(16, 185, 129, 0.34);
    border-radius: var(--radius-2xl);
    box-shadow: 0 28px 80px rgba(15, 49, 40, 0.2);
    color: white;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    position: relative;
    text-decoration: none;
}

.study-tools-promo::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    content: "";
    inset: 0;
    opacity: 0.42;
    pointer-events: none;
    position: absolute;
}

.study-tools-promo > * {
    position: relative;
    z-index: 1;
}

.study-tools-promo__header,
.study-tools-promo__footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.study-tools-promo__header span {
    color: #bdf7df;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.study-tools-promo__header i {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.study-tools-promo__screen {
    align-self: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(4, 20, 15, 0.26);
    color: #15231f;
    display: grid;
    gap: 0.85rem;
    margin: 1.1rem 0;
    padding: 1rem;
}

.study-tools-promo__metric {
    align-items: center;
    display: flex;
    gap: 0.85rem;
}

.study-tools-promo__metric strong {
    align-items: center;
    background: #0f6b55;
    border-radius: 1rem;
    color: white;
    display: flex;
    font-size: 2.4rem;
    height: 4rem;
    justify-content: center;
    line-height: 1;
    width: 4rem;
}

.study-tools-promo__metric span,
.study-tools-promo__footer span {
    color: #dffbf0;
    font-weight: 800;
}

.study-tools-promo__metric span {
    color: #51645e;
}

.study-tools-promo__question {
    background: #f2faf6;
    border: 1px solid rgba(15, 107, 85, 0.13);
    border-radius: 1rem;
    padding: 0.85rem;
}

.study-tools-promo__pill {
    background: #d8fae9;
    border-radius: 999px;
    color: #0f6b55;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 0.55rem;
    padding: 0.35rem 0.65rem;
    text-transform: uppercase;
}

.study-tools-promo__question p {
    color: #33443f;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.45;
    margin: 0;
}

.study-tools-promo__answers {
    display: grid;
    gap: 0.45rem;
}

.study-tools-promo__answers span {
    background: linear-gradient(90deg, #dffbf0, #f8faf8);
    border-radius: 999px;
    display: block;
    height: 0.72rem;
}

.study-tools-promo__answers span:nth-child(2) {
    width: 82%;
}

.study-tools-promo__answers span:nth-child(3) {
    width: 68%;
}

.study-tools-promo__footer strong {
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    color: #0f6b55;
    display: inline-flex;
    font-size: 0.92rem;
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
}

.projects-content {
    padding-left: var(--space-4);
}

.projects-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: var(--space-5);
}

.project-highlight {
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 2px solid #10B981;
    position: relative;
    margin-top: var(--space-8);
}

.project-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #059669, #10B981);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.project-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-800);
    margin-bottom: var(--space-3);
    margin-top: var(--space-2);
}

.project-description {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.project-features {
    list-style: none;
    padding: 0;
    color: var(--gray-600);
    margin-bottom: var(--space-6);
}

.project-features li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.project-link:hover {
    color: var(--primary-700);
}

.about-copy p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: var(--space-5);
}

.about-visual {
    position: relative;
}

.about-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 657;
    object-fit: contain;
    object-position: center center;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    background: var(--gray-950);
}

.about-image-placeholder {
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, #eef2ff, #e0f7f1);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-weight: 600;
}

.placeholder-label {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .resource-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .projects-content {
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .resource-hub-grid {
        grid-template-columns: 1fr;
    }

    .resource-hub-card {
        min-height: auto;
    }
}

.faq-title {
    color: #1f2937;
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-10);
    font-weight: 700;
    position: relative;
    padding-bottom: var(--space-4);
}

.faq-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #059669, #10B981, #34d399);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 1000px; margin: 0 auto; }

.faq-item {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-6);
    color: #374151;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: #1f2937;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.faq-item[open] {
    background: rgba(255,255,255,0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: rgba(16, 185, 129, 0.2);
}

.faq-item[open]::before {
    transform: scaleX(1);
}

.faq-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.85);
}

.faq-item:hover::before {
    transform: scaleX(0.3);
}

.faq-item summary:hover {
    color: #059669;
}

.faq-item summary {
    position: relative;
    z-index: 2;
}

.faq-item p {
    color: #4b5563;
    margin-top: var(--space-3);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .faq-grid { grid-template-columns: 1fr; }
}

/* Interviews & Appearances */
.interviews-section {
    background: #fff;
    padding: var(--space-24) 0;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive video grid */
@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

@media (max-width: 640px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.video-card {
    display: block;
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    background: #f8fafc;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl); }

.video-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    background-size: cover;
    background-position: center;
}

.video-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    opacity: 0.0;
    transition: opacity var(--transition-normal);
    background: radial-gradient(40% 40% at 50% 50%, rgba(16,185,129,0.35), transparent 70%);
}

.video-card:hover .video-overlay { opacity: 1; }

.video-overlay i {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 10px 20px rgba(16,185,129,0.25);
}

.video-title {
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    color: #111827;
}

/* Transformation Program Section */
.transformation-program-section {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    padding: var(--space-24) 0;
}

.transformation-program-section .container {
    max-width: 1200px;
}

.program-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.program-header h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.program-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    margin-top: var(--space-2);
}

.program-content {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--space-12);
    align-items: start;
}

.program-details {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
}

.program-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(16,185,129,0.15);
    color: #a7f3d0;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(16,185,129,0.35);
    margin-bottom: var(--space-4);
}

.program-highlight h3 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--space-3);
}

.program-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.7;
}

.program-outcomes h4 {
    color: #fff;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.outcome {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.outcome-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #059669, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(16,185,129,0.25);
}

.outcome-copy h5 {
    color: #fff;
    margin: 0 0 0.25rem 0;
    font-size: 1.05rem;
}

.outcome-copy p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.program-cta {
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.94));
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-2xl);
    border: 1px solid rgba(0,0,0,0.06);
}

.pricing { text-align: center; margin-bottom: var(--space-6); }
.price-current { color: #111827; font-weight: 700; letter-spacing: 0.02em; }
.price-amount { font-size: 2rem; font-weight: 800; color: #111827; margin-top: 0.25rem; }
.payment-options { color: #6b7280; margin-top: 0.25rem; }

.program-join-btn { width: 100%; margin-bottom: var(--space-6); }

.program-includes { list-style: none; padding: 0; margin: 0 0 var(--space-6) 0; color: #374151; }
.program-includes li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.program-includes i { color: #10b981; }

.program-trust { display: grid; gap: 0.5rem; margin-bottom: var(--space-4); }
.guarantee-badge { display: inline-flex; align-items: center; gap: 0.5rem; color: #065f46; background: #d1fae5; border: 1px solid #a7f3d0; padding: 0.35rem 0.6rem; border-radius: 999px; font-size: 0.85rem; }

.urgency { text-align: center; color: #ef4444; font-weight: 600; }

@media (max-width: 1024px) {
    .program-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .transformation-program-section { padding: var(--space-16) 0; }
    .program-details { padding: var(--space-6); }
    .outcomes-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .outcome { padding: var(--space-4); }
    .program-cta { padding: var(--space-6); }
    .price-amount { font-size: 1.75rem; }
}

@media (max-width: 480px) {
    .hero-highlights-premium { gap: var(--space-2); }
    .hero-pill { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
    .behavior-school-ctas { gap: var(--space-3); }
    .behavior-school-cta { padding: 0.75rem 1rem; font-size: 0.9rem; }
}

.training-background-premium {
    position: absolute;
    inset: 0;
    opacity: 0.4;
}

.training-mesh-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(52, 211, 153, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(6, 95, 70, 0.3) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    animation: meshMove 10s ease-in-out infinite;
}

@keyframes meshMove {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
    33% { transform: translateX(-10px) translateY(-10px) rotate(1deg); }
    66% { transform: translateX(10px) translateY(10px) rotate(-1deg); }
}

.training-floating-elements {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.1),
        rgba(52, 211, 153, 0.05));
    filter: blur(40px);
    animation: floatShape 8s ease-in-out infinite;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 300px;
    height: 300px;
    top: 70%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 60%;
    animation-delay: 4s;
}

.shape-4 {
    width: 250px;
    height: 250px;
    top: 40%;
    right: 40%;
    animation-delay: 6s;
}

@keyframes floatShape {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-20px) rotate(5deg) scale(1.1); }
    50% { transform: translateY(10px) rotate(-3deg) scale(0.9); }
    75% { transform: translateY(-15px) rotate(7deg) scale(1.05); }
}

.training-content-premium {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.training-header-premium {
    text-align: center;
    margin-bottom: var(--space-16);
}

.masterclass-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    color: #10b981;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-8);
    position: relative;
    overflow: hidden;
}

.badge-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
        transparent,
        rgba(16, 185, 129, 0.1),
        transparent);
    animation: badgeGlow 3s ease-in-out infinite;
}

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

.training-title-premium {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: white;
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.training-subtitle-premium {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 600;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-6);
}

.training-description-premium {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.training-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

/* Benefits Grid - Premium */
.benefits-grid-premium {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.benefit-card-premium {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.benefit-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.benefit-card-premium:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

.benefit-card-premium:hover::before {
    transform: scaleX(1);
}

.benefit-content-premium {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.benefit-icon-premium {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.benefit-content-premium h4 {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: var(--space-2);
}

.benefit-content-premium p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Premium Form Container */
.form-container-premium {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-3xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-2xl);
    position: relative;
    overflow: hidden;
}

.form-container-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.05) 0%,
        rgba(52, 211, 153, 0.02) 50%,
        rgba(16, 185, 129, 0.05) 100%);
    border-radius: var(--radius-3xl);
}

.form-header-premium {
    text-align: center;
    margin-bottom: var(--space-8);
    position: relative;
    z-index: 2;
}

.form-header-premium h4 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.form-subtitle-premium {
    color: var(--gray-600);
    font-size: 1rem;
}

.premium-lead-form {
    position: relative;
    z-index: 2;
}

.form-group-premium {
    margin-bottom: var(--space-6);
    position: relative;
}

.input-container-premium {
    position: relative;
}

.input-icon-premium {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 1.125rem;
    z-index: 2;
}

.premium-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    font-size: 1rem;
    font-weight: 500;
    background: white;
    transition: all var(--transition-normal);
    position: relative;
    z-index: 1;
}

.premium-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.premium-input:focus + .input-border-premium {
    transform: scaleX(1);
}

.input-border-premium {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
    border-radius: var(--radius-sm);
}

.premium-submit-btn {
    width: 100%;
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: var(--space-5) var(--space-8);
    border-radius: var(--radius-xl);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.premium-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-premium);
}

.btn-ripple {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.premium-submit-btn:hover .btn-ripple {
    transform: translateX(100%);
}

.form-footer-premium {
    margin-top: var(--space-8);
    text-align: center;
    position: relative;
    z-index: 2;
}

.security-badge-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
}

.training-stats-premium {
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}

.stat-text {
    color: var(--gray-600);
    font-weight: 500;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .training-main-content {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .form-container-premium {
        padding: var(--space-8);
    }
}

@media (max-width: 768px) {
    .free-training-premium {
        padding: var(--space-20) 0;
    }

    .training-header-premium {
        margin-bottom: var(--space-12);
    }

    .form-container-premium {
        padding: var(--space-6);
    }

    .premium-input {
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    }

    .premium-submit-btn {
        padding: var(--space-4) var(--space-6);
    }
}

/* Glass Effect Enhancement */
.glass-effect {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Premium hover states */
.benefit-card-premium:nth-child(odd) {
    animation: floatUp 6s ease-in-out infinite;
}

.benefit-card-premium:nth-child(even) {
    animation: floatUp 6s ease-in-out infinite reverse;
}

@keyframes floatUp {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Testimonials Section */
.testimonials-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: var(--space-24) 0;
    position: relative;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--space-8);
    max-width: 1400px;
    margin: 0 auto;
    margin-top: var(--space-12);
}

.testimonial-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(16, 185, 129, 0.1);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.testimonial-card:hover::before {
    transform: scaleX(1);
}

.testimonial-content {
    margin-bottom: var(--space-6);
}

.quote-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25);
}

.testimonial-content blockquote {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gray-700);
    font-style: italic;
    margin: 0;
    position: relative;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}

.author-avatar {
    position: relative;
    flex-shrink: 0;
}

.author-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.author-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.25rem 0;
}

.author-info p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

/* Testimonial Animation */
.testimonial-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card:nth-child(4) { animation-delay: 0.4s; }
.testimonial-card:nth-child(5) { animation-delay: 0.5s; }
.testimonial-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .testimonial-card {
        padding: var(--space-6);
    }

    .testimonial-content blockquote {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .testimonials-section {
        padding: var(--space-16) 0;
    }

    .testimonial-card {
        padding: var(--space-5);
    }

    .author-avatar img {
        width: 48px;
        height: 48px;
    }
}

/* Unified Services Section */
.service-tiers {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: var(--space-12);
}

.service-tier {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 2px solid #e5e7eb;
    position: relative;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    width: 100%;
}

.service-tier:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.premium-tier {
    border-color: #10B981;
    transform: scale(1.05);
}

.premium-tier:hover {
    transform: scale(1.05) translateY(-8px);
}

.tier-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #059669, #10B981);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.premium-badge {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.tier-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.tier-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 1.5rem;
    color: white;
}

.premium-tier .tier-icon {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.tier-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: var(--space-2);
}

.tier-price {
    font-size: 1.125rem;
    font-weight: 600;
    color: #10B981;
}

.premium-tier .tier-price {
    color: #f97316;
}

.tier-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tier-content p {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    flex-grow: 1;
}

.tier-features li {
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.tier-cta {
    display: block;
    text-align: center;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.free-cta {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #d1d5db;
}

.free-cta:hover {
    background: #e5e7eb;
    text-decoration: none;
    color: #1f2937;
}

.tools-cta {
    background: #10B981;
    color: white;
}

.tools-cta:hover {
    background: #059669;
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
}

.premium-cta {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.premium-cta:hover {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .service-tiers {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .premium-tier {
        transform: none;
        order: -1;
    }

    .premium-tier:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .service-tier {
        padding: var(--space-6);
    }

    .service-tiers {
        gap: var(--space-6);
    }
}

/* Modern Contact Form */
.contact-form-modern {
    max-width: 640px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    border: 1px solid rgba(229, 231, 235, 0.8);
    position: relative;
    overflow: hidden;
}

.contact-form-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10B981, #059669, #1F4D3F);
}

.form-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.form-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 1.5;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group-modern {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-group-modern.full-width {
    grid-column: 1 / -1;
}

.form-group-modern label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.025em;
}

.required {
    color: #ef4444;
    margin-left: 2px;
}

.form-group-modern input,
.form-group-modern select,
.form-group-modern textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: #fafafa;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.form-group-modern input:focus,
.form-group-modern select:focus,
.form-group-modern textarea:focus {
    outline: none;
    border-color: #10B981;
    background: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
    transform: translateY(-1px);
}

.form-group-modern textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.form-group-modern select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    padding-right: 3rem;
    appearance: none;
}

.submit-btn-modern {
    width: 100%;
    padding: 1.125rem 2rem;
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.submit-btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.submit-btn-modern:hover::before {
    left: 100%;
}

.submit-btn-modern:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}

.submit-btn-modern:active {
    transform: translateY(0);
}

.submit-btn-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.form-status {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.form-status.success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.form-status.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.field-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.form-group-modern input.error,
.form-group-modern select.error,
.form-group-modern textarea.error {
    border-color: #ef4444;
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Problem/Solution Split Section */
.problem-solution-section {
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, var(--background-slate) 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
}

.problem-solution-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(5, 150, 105, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.problem-solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
    position: relative;
    z-index: 1;
}

/* Problem Side Styling */
.problem-side {
    background: rgba(239, 68, 68, 0.03);
    border-left: 4px solid #ef4444;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
}

.problem-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: var(--space-6);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.problem-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.problem-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.problem-item:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(-5px);
}

.problem-icon {
    color: #ef4444;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.problem-item span {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
}

/* Solution Side Styling */
.solution-side {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-left: 4px solid var(--accent-color);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
}

.solution-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: var(--space-6);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.solution-description {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--space-6);
    text-align: center;
    font-weight: 500;
}

.solution-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(5px);
}

.benefit-icon {
    color: var(--accent-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.benefit-item span {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
}

.solution-cta {
    text-align: center;
}

.cta-button-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: var(--gradient-emerald);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-xl);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.025em;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-3);
}

.cta-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.4);
    color: white;
    text-decoration: none;
}

.cta-button-primary i {
    transition: transform 0.3s ease;
}

.cta-button-primary:hover i {
    transform: translateX(3px);
}

.cta-subtitle {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .problem-solution-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .problem-side, .solution-side {
        padding: var(--space-6);
    }

    .problem-title, .solution-title {
        font-size: 1.3rem;
    }

    .solution-description {
        font-size: 1rem;
    }

    .cta-button-primary {
        padding: var(--space-3) var(--space-6);
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .contact-form-modern {
        margin: 0 1rem;
        padding: 2rem 1.5rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-title {
        font-size: 1.5rem;
    }
}

/* Follow Section */
.social-follow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    max-width: 1000px;
    margin: 0 auto;
    margin-top: var(--space-12);
}

.social-follow-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.social-follow-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
    text-decoration: none;
    color: inherit;
}

.social-follow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.social-follow-card:hover::before {
    transform: scaleX(1);
}

.social-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.social-follow-card.linkedin .social-icon {
    background: linear-gradient(135deg, #0077b5, #00a0dc);
}

.social-follow-card.facebook .social-icon {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.social-follow-card.twitter .social-icon {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.social-follow-card.instagram .social-icon {
    background: linear-gradient(135deg, #e4405f, #fd5949, #fccc63, #f77737);
}

.social-content {
    flex: 1;
}

.social-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.social-content p {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.follow-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-600);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.social-follow-card:hover .follow-cta {
    color: var(--primary-700);
    transform: translateX(4px);
}

.follow-cta i {
    transition: transform 0.2s ease;
}

.social-follow-card:hover .follow-cta i {
    transform: translateX(4px);
}

/* Responsive Design for Follow Section */
@media (max-width: 768px) {
    .social-follow-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .social-follow-card {
        padding: var(--space-6);
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .social-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
}

/* Personal Story Section */
.personal-story-section {
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.personal-story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.06) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(5, 150, 105, 0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

.personal-story-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.story-intro {
    text-align: center;
    margin-bottom: var(--space-16);
}

.story-greeting {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.story-greeting .highlight {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-tagline {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
    max-width: 700px;
    margin: 0 auto;
}

.story-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
    margin-bottom: var(--space-16);
}

.story-narrative {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden;
}

.story-narrative::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.story-narrative p {
    color: var(--text-primary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.story-narrative p:last-child {
    margin-bottom: 0;
}

.story-narrative strong {
    color: var(--primary-700);
    font-weight: 700;
}

.story-stats {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid rgba(16, 185, 129, 0.2);
    backdrop-filter: blur(10px);
}

.stats-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.stats-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.stats-header p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    border: 1px solid rgba(16, 185, 129, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-600);
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.achievement-highlight {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 2px solid var(--accent-color);
    text-align: center;
    position: relative;
}

.achievement-highlight::before {
    content: '★';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.achievement-highlight h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-800);
    margin-bottom: var(--space-2);
}

.achievement-highlight p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.story-quote {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-12);
}

.story-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    color: rgba(16, 185, 129, 0.2);
    font-family: serif;
    line-height: 1;
}

.quote-text {
    font-size: 1.375rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
    font-weight: 500;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 2;
}

.quote-attribution {
    color: var(--primary-700);
    font-weight: 600;
    font-size: 1rem;
    font-style: normal;
}

.story-cta {
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(10px);
}

.story-cta h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.story-cta p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.story-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: var(--gradient-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-xl);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.025em;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.story-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.4);
    color: white;
    text-decoration: none;
}

.story-cta-button i {
    transition: transform 0.3s ease;
}

.story-cta-button:hover i {
    transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .story-main {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .personal-story-section {
        padding: var(--space-16) 0;
    }

    .story-intro {
        margin-bottom: var(--space-12);
    }

    .story-narrative, .story-stats, .story-quote, .story-cta {
        padding: var(--space-6);
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .stat-number {
        font-size: 2rem;
    }

    .story-tagline {
        font-size: 1.25rem;
    }

    .quote-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .story-narrative p {
        font-size: 1rem;
    }

    .story-cta p {
        font-size: 1rem;
    }

    .story-cta-button {
        padding: var(--space-3) var(--space-6);
        font-size: 1rem;
    }
}

/* Enhanced Display Cards - 21st.dev Skewed Stack Design */
.display-cards-container {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    min-height: 400px;
}

.display-cards-stack {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.display-card {
    position: absolute;
    width: 350px;
    height: 220px;
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transform-origin: center;
}

.card-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: skew(8deg);
}

/* Individual Card Positioning and Skewing */
.card-1 {
    transform: skew(-8deg) rotate(-2deg) translateX(-40px) translateY(-10px);
    z-index: 4;
}

.card-2 {
    transform: skew(-8deg) rotate(1deg) translateX(10px) translateY(20px);
    z-index: 3;
}

.card-3 {
    transform: skew(-8deg) rotate(-1deg) translateX(60px) translateY(50px);
    z-index: 2;
}

.card-4 {
    transform: skew(-8deg) rotate(2deg) translateX(110px) translateY(80px);
    z-index: 1;
}

/* Hover Effects */
.display-card:hover {
    transform: skew(-8deg) rotate(0deg) translateY(-30px) scale(1.05);
    z-index: 10 !important;
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-1:hover {
    transform: skew(-8deg) rotate(0deg) translateX(-40px) translateY(-40px) scale(1.05);
}

.card-2:hover {
    transform: skew(-8deg) rotate(0deg) translateX(10px) translateY(-10px) scale(1.05);
}

.card-3:hover {
    transform: skew(-8deg) rotate(0deg) translateX(60px) translateY(20px) scale(1.05);
}

.card-4:hover {
    transform: skew(-8deg) rotate(0deg) translateX(110px) translateY(50px) scale(1.05);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.social-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.linkedin-card .social-icon-badge {
    background: linear-gradient(135deg, #0077B5 0%, #004182 100%);
    color: white;
}

.facebook-card .social-icon-badge {
    background: linear-gradient(135deg, #1877F2 0%, #0C5AA6 100%);
    color: white;
}

.twitter-card .social-icon-badge {
    background: linear-gradient(135deg, #1DA1F2 0%, #0C85D0 100%);
    color: white;
}

.instagram-card .social-icon-badge {
    background: linear-gradient(135deg, #E4405F 0%, #833AB4 50%, #F77737 100%);
    color: white;
}

.card-meta {
    flex: 1;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.card-type {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin-bottom: 1rem;
    flex: 1;
    font-size: 0.9rem;
}

.card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.action-text {
    color: #10B981;
    font-weight: 600;
    font-size: 0.85rem;
}

.action-icon {
    color: #10B981;
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.display-card:hover .action-icon {
    transform: translateX(4px);
}

/* Responsive Design for Display Cards */
@media (max-width: 768px) {
    .display-cards-container {
        margin-top: 2rem;
        min-height: auto;
        padding: 0 1rem;
    }

    .display-cards-stack {
        height: auto;
        min-height: 600px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .display-card {
        position: relative;
        width: 100%;
        max-width: 340px;
        height: 160px;
        margin: 0;
        padding: 1.25rem;
    }

    .card-1, .card-2, .card-3, .card-4 {
        transform: skew(-3deg) rotate(0deg) translateX(0) translateY(0);
        position: relative;
        z-index: auto;
    }

    .display-card:hover {
        transform: skew(-3deg) rotate(0deg) translateY(-8px) scale(1.03);
    }

    .card-1:hover, .card-2:hover, .card-3:hover, .card-4:hover {
        transform: skew(-3deg) rotate(0deg) translateY(-8px) scale(1.03);
    }

    .card-inner {
        transform: skew(3deg);
        padding: 0;
    }

    .card-header {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .social-icon-badge {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
        border-radius: 6px;
    }

    .card-title {
        font-size: 1.05rem;
        margin-bottom: 0.125rem;
    }

    .card-type {
        font-size: 0.7rem;
    }

    .card-description {
        font-size: 0.875rem;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    .card-action {
        padding-top: 0.5rem;
    }

    .action-text {
        font-size: 0.825rem;
    }

    .action-icon {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .display-cards-container {
        margin-top: 1.5rem;
        padding: 0 0.75rem;
    }

    .display-cards-stack {
        min-height: 520px;
        gap: 1.25rem;
        padding: 1.5rem 0;
    }

    .display-card {
        width: 100%;
        max-width: 300px;
        height: 140px;
        padding: 1rem;
    }

    .card-1, .card-2, .card-3, .card-4 {
        transform: skew(-2deg) rotate(0deg) translateX(0) translateY(0);
    }

    .display-card:hover {
        transform: skew(-2deg) rotate(0deg) translateY(-6px) scale(1.02);
    }

    .card-1:hover, .card-2:hover, .card-3:hover, .card-4:hover {
        transform: skew(-2deg) rotate(0deg) translateY(-6px) scale(1.02);
    }

    .card-inner {
        transform: skew(2deg);
    }

    .card-header {
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }

    .social-icon-badge {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    .card-title {
        font-size: 0.95rem;
    }

    .card-type {
        font-size: 0.65rem;
    }

    .card-description {
        font-size: 0.8rem;
        line-height: 1.25;
        margin-bottom: 0.5rem;
    }

    .action-text {
        font-size: 0.75rem;
    }

    .action-icon {
        font-size: 0.7rem;
    }
}

/* YouTube Video Feed Section */
.youtube-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.youtube-video-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.youtube-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.youtube-video-card .video-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1e293b;
}

.youtube-video-card .video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.youtube-video-card:hover .video-thumbnail img {
    transform: scale(1.05);
}

.youtube-video-card .thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.youtube-video-card .thumbnail-placeholder i {
    font-size: 3rem;
    color: #10B981;
    opacity: 0.5;
}

.youtube-video-card .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(16, 185, 129, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.youtube-video-card:hover .play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.youtube-video-card .play-overlay i {
    color: white;
    font-size: 1.5rem;
    margin-left: 4px;
}

.youtube-video-card .video-info {
    padding: 16px 20px 20px;
}

.youtube-video-card .video-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.youtube-video-card .video-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: #64748b;
}

.youtube-video-card .video-type {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: capitalize;
}

.youtube-cta {
    text-align: center;
    margin-top: 40px;
}

.btn-secondary-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    border: 2px solid #10B981;
    color: #10B981;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secondary-premium:hover {
    background: #10B981;
    color: white;
}

.btn-secondary-premium i {
    font-size: 1.25rem;
}

/* Dark mode / dark section support */
.section-premium .youtube-video-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-premium .youtube-video-card .video-title {
    color: white;
}

.section-premium .youtube-video-card .video-meta {
    color: #94a3b8;
}

@media (max-width: 768px) {
    .youtube-feed-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .youtube-video-card .video-info {
        padding: 12px 16px 16px;
    }
    
    .youtube-video-card .video-title {
        font-size: 0.9375rem;
    }
}

/* Premium Personal Story Section - $25K Design */
.personal-story-section {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.personal-story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(5, 150, 105, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 60% 40%, rgba(34, 197, 94, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.story-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Single Column Layout */
.story-single-column {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Credentials Showcase within Single Column */
.credentials-showcase {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.credentials-showcase .credentials-card {
    max-width: 600px;
    width: 100%;
}

.story-header {
    text-align: center;
    margin-bottom: 80px;
}

.story-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
}

.story-text {
    background: white;
    border-radius: 24px;
    padding: 60px;
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.08),
        0 8px 16px -8px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(16, 185, 129, 0.06);
    position: relative;
    overflow: hidden;
}

.story-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #10b981 0%, #059669 50%, #047857 100%);
}

.story-text::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.story-paragraph {
    margin-bottom: 32px;
}

.story-paragraph:last-child {
    margin-bottom: 0;
}

.story-paragraph p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #2d3748;
    margin: 0;
    font-weight: 400;
}

.story-paragraph strong {
    font-weight: 700;
    color: #1a202c;
}

.story-paragraph a {
    color: #059669;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.story-paragraph a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.3s ease;
}

.story-paragraph a:hover::after {
    width: 100%;
}

.story-cta {
    margin-top: 48px;
    text-align: left;
}

.story-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    text-decoration: none;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.025em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 10px 20px -8px rgba(16, 185, 129, 0.4),
        0 6px 12px -6px rgba(16, 185, 129, 0.2);
    position: relative;
    overflow: hidden;
}

.story-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.story-button:hover::before {
    left: 100%;
}

.story-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 20px 40px -8px rgba(16, 185, 129, 0.5),
        0 12px 24px -6px rgba(16, 185, 129, 0.3);
    color: white;
    text-decoration: none;
}

.story-button i {
    transition: transform 0.3s ease;
}

.story-button:hover i {
    transform: translateX(4px);
}

.story-visual {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.credentials-card {
    background: white;
    border-radius: 24px;
    padding: 48px;
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.1),
        0 12px 24px -8px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(16, 185, 129, 0.08);
    position: relative;
    overflow: hidden;
}

.credentials-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #059669 0%, #10b981 50%, #34d399 100%);
}

.credentials-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 2px solid #f7fafc;
    position: relative;
}

.credentials-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #10b981, #059669);
}

.credentials-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.credentials-header p {
    font-size: 1rem;
    color: #059669;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.credentials-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}

.stat-item {
    text-align: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%);
    border-radius: 16px;
    border: 1px solid rgba(16, 185, 129, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(16, 185, 129, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #059669;
    display: block;
    margin-bottom: 8px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.9rem;
    color: #4a5568;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.credentials-highlights {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border-left: 4px solid #10b981;
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    transform: translateX(4px);
}

.highlight-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 1.2rem;
}

.highlight-item span {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    flex: 1;
}

.transformation-quote {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 48px;
}

.transformation-quote::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8rem;
    color: rgba(16, 185, 129, 0.1);
    font-family: 'Georgia', serif;
    line-height: 1;
    z-index: 1;
}

.transformation-quote::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    z-index: 1;
}

.transformation-quote blockquote {
    font-size: 1.3rem;
    line-height: 1.6;
    color: white;
    font-style: italic;
    font-weight: 500;
    margin: 0 0 24px 0;
    position: relative;
    z-index: 2;
    letter-spacing: 0.01em;
}

.transformation-quote cite {
    color: #10b981;
    font-weight: 700;
    font-size: 1.1rem;
    font-style: normal;
    position: relative;
    z-index: 2;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .story-grid {
        gap: 60px;
    }

    .story-text {
        padding: 48px;
    }

    .credentials-card {
        padding: 40px;
    }
}

@media (max-width: 968px) {
    .personal-story-section {
        padding: 80px 0;
    }

    .story-content {
        padding: 0 24px;
    }

    .story-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .story-text {
        padding: 40px;
    }

    .credentials-stats {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .credentials-card {
        padding: 32px;
    }

    .transformation-quote {
        padding: 32px;
    }
}

@media (max-width: 640px) {
    .personal-story-section {
        padding: 60px 0;
    }

    .story-header {
        margin-bottom: 60px;
    }

    .story-text {
        padding: 32px;
    }

    .story-paragraph p {
        font-size: 1.1rem;
    }

    .credentials-card {
        padding: 24px;
    }

    .transformation-quote {
        padding: 24px;
    }

    .transformation-quote blockquote {
        font-size: 1.1rem;
    }
}
/* Premium Responsive Design - Enterprise Grade */

/* Advanced Container System */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

.container-wide {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 4rem);
}

/* Responsive Typography Scale */
:root {
    /* Fluid Typography */
    --text-xs: clamp(0.75rem, 1vw, 0.875rem);
    --text-sm: clamp(0.875rem, 1.2vw, 1rem);
    --text-base: clamp(1rem, 1.4vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.6vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.8vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 2.2vw, 2rem);
    --text-3xl: clamp(1.875rem, 3vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 4vw, 3.5rem);
    --text-5xl: clamp(3rem, 6vw, 5rem);
    --text-6xl: clamp(3.75rem, 8vw, 6rem);

    /* Responsive Spacing */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 2vw, 1rem);
    --space-md: clamp(1rem, 3vw, 1.5rem);
    --space-lg: clamp(1.5rem, 4vw, 2rem);
    --space-xl: clamp(2rem, 6vw, 3rem);
    --space-2xl: clamp(3rem, 8vw, 4rem);
    --space-3xl: clamp(4rem, 10vw, 6rem);
    --space-4xl: clamp(6rem, 12vw, 8rem);
}

/* Responsive Grid System */
.grid-responsive {
    display: grid;
    gap: var(--space-lg);
}

.grid-1-2 {
    grid-template-columns: 1fr 2fr;
}

.grid-2-1 {
    grid-template-columns: 2fr 1fr;
}

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Breakpoint Utilities */
@media (max-width: 1536px) {
    :root {
        --space-4xl: clamp(5rem, 10vw, 7rem);
        --space-3xl: clamp(3.5rem, 8vw, 5rem);
    }
}

@media (max-width: 1280px) {
    .grid-1-2,
    .grid-2-1 {
        grid-template-columns: 1fr;
    }

    .hero-content-premium {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }

    .training-main-content {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 1024px) {
    .nav-links-premium {
        display: none;
    }

    .hero-stats-premium {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }

    .hero-actions-premium {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .cards-grid-premium {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }
}

@media (max-width: 768px) {
    :root {
        --space-xs: 0.5rem;
        --space-sm: 0.75rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 2.5rem;
        --space-3xl: 3rem;
        --space-4xl: 4rem;
    }

    .nav-content-premium {
        padding: var(--space-md);
    }

    .hero-premium {
        min-height: 65vh;
        padding-top: 80px;
    }

    .hero-content-premium {
        padding: var(--space-md);
        gap: var(--space-xl);
    }

    .hero-badge-premium {
        font-size: 0.75rem;
        padding: var(--space-xs) var(--space-md);
    }

    .hero-stats-premium {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .stat-premium {
        padding: var(--space-md);
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 200px;
    }

    .floating-card {
        display: none;
    }

    .benefits-grid-premium {
        gap: var(--space-md);
    }

    .benefit-card-premium {
        padding: var(--space-md);
    }

    .form-container-premium {
        padding: var(--space-lg);
        margin: var(--space-md);
    }

    .footer-social-links {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .bacb-info {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 1rem;
    }

    .hero-title-premium {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.2;
    }

    .hero-subtitle-premium {
        font-size: 1rem;
        line-height: 1.5;
    }

    .btn-primary-premium,
    .btn-secondary-premium {
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }

    .section-title-premium {
        font-size: clamp(1.875rem, 6vw, 2.5rem);
    }

    .section-description-premium {
        font-size: 1rem;
    }

    .card-premium {
        padding: var(--space-lg);
    }

    .training-title-premium {
        font-size: clamp(1.875rem, 6vw, 2.5rem);
    }

    .training-subtitle-premium {
        font-size: clamp(1.25rem, 4vw, 1.75rem);
    }

    .premium-input {
        padding: var(--space-md);
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .premium-submit-btn {
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-actions-premium {
        gap: var(--space-sm);
    }

    .hero-stats-premium {
        gap: var(--space-xs);
    }

    .stat-number-premium {
        font-size: 1.875rem;
    }

    .benefit-content-premium {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .benefit-icon-premium {
        align-self: center;
    }

    .form-header-premium h4 {
        font-size: 1.5rem;
    }

    .footer-social-links {
        grid-template-columns: 1fr;
    }
}

/* Landscape Mobile Optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-premium {
        min-height: 80vh;
        padding-top: 60px;
    }

    .hero-content-premium {
        gap: var(--space-lg);
    }

    .hero-stats-premium {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-lg);
    }
}

/* High DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image-premium {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .floating-orb,
    .floating-shape,
    .floating-card {
        animation: none !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #1f2937;
        --gray-100: #374151;
        --gray-200: #4b5563;
    }

    .form-container-premium {
        background: rgba(31, 41, 55, 0.95);
        color: white;
    }

    .premium-input {
        background: rgba(55, 65, 81, 0.8);
        color: white;
        border-color: rgba(75, 85, 99, 0.5);
    }

    .premium-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
}

/* Print Styles */
@media print {
    .nav-premium,
    .floating-orb,
    .floating-shape,
    .floating-card,
    .training-floating-elements,
    .hero-orbs-premium {
        display: none !important;
    }

    .hero-premium {
        background: white !important;
        color: black !important;
        min-height: auto !important;
    }

    .section-premium {
        page-break-inside: avoid;
    }

    .card-premium {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* Container Queries (Progressive Enhancement) */
@supports (container-type: inline-size) {
    .card-premium {
        container-type: inline-size;
    }

    @container (max-width: 300px) {
        .card-premium {
            padding: var(--space-md);
        }

        .card-title-premium {
            font-size: 1.25rem;
        }
    }
}

/* Focus Visible Support */
@supports selector(:focus-visible) {
    .nav-link-premium:focus,
    .btn-primary-premium:focus,
    .btn-secondary-premium:focus,
    .premium-input:focus {
        outline: none;
    }

    .nav-link-premium:focus-visible,
    .btn-primary-premium:focus-visible,
    .btn-secondary-premium:focus-visible,
    .premium-input:focus-visible {
        outline: 2px solid var(--primary-500);
        outline-offset: 2px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn-primary-premium,
    .btn-secondary-premium,
    .nav-link-premium,
    .card-link-premium {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .premium-input {
        min-height: 44px;
        font-size: 16px;
    }

    .social-link {
        min-height: 44px;
        padding: var(--space-md);
    }
}

/* Performance Optimizations */
.hero-background-premium,
.training-background-premium {
    will-change: transform;
    transform: translateZ(0);
}

.floating-orb,
.floating-shape {
    will-change: transform;
    transform: translateZ(0);
}

/* Accessibility Enhancements */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-600);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
}

.skip-link:focus {
    top: 6px;
}

/* Blog Content Responsiveness */
.about-copy img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
}

.about-copy blockquote {
    border-left: 4px solid var(--primary-500);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--gray-600);
}

@media (max-width: 640px) {
    .about-copy {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}

/* Premium Design System - Senior Developer Grade */
:root {
    /* Enhanced Color Palette */
    --primary-900: #0B2027;
    --primary-800: #1F4D3F;
    --primary-700: #2D5F4F;
    --primary-600: #3B705F;
    --primary-500: #059669;
    --primary-400: #10B981;
    --primary-300: #34D399;
    --primary-200: #6EE7B7;
    --primary-100: #A7F3D0;
    --primary-50: #D1FAE5;

    /* Sophisticated Grays */
    --gray-950: #0A0A0A;
    --gray-900: #1A1A1A;
    --gray-800: #2A2A2A;
    --gray-700: #3A3A3A;
    --gray-600: #4A5568;
    --gray-500: #667085;
    --gray-400: #8B96AA;
    --gray-300: #A8B2C7;
    --gray-200: #D1D9E8;
    --gray-100: #F3F6FB;
    --gray-50: #FAFBFC;

    /* Advanced Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;

    /* Spacing Scale */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Advanced Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* Premium Gradients */
    --gradient-brand: linear-gradient(135deg, #0B2027 0%, #1F4D3F 25%, #059669 50%, #10B981 75%, #34D399 100%);
    --gradient-emerald: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
    --gradient-subtle: linear-gradient(135deg, #F3F6FB 0%, #FAFBFC 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    
    /* Animation Variables */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Border Radius Scale */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
}

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

html {
    font-size: 16px;
    line-height: 1.5;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-variation-settings: 'opsz' 32;
    color: var(--gray-900);
    background-color: var(--gray-50);
    line-height: 1.8; /* Pro Max readability */
    overflow-x: hidden;
    min-height: 100vh;
}

/* Custom Selection Color */
::selection {
    background: var(--primary-400);
    color: white;
}

/* Premium Typography System - Authority Overhaul */
.text-display-2xl {
    font-size: var(--text-9xl);
    font-weight: 900; /* Maximum Authority */
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.text-display-xl {
    font-size: var(--text-8xl);
    font-weight: 900; /* Maximum Authority */
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.text-display-lg {
    font-size: var(--text-7xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.text-display-md {
    font-size: var(--text-6xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.text-display-sm {
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.text-h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.text-h2 {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.text-h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.4;
}

.text-h4 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.4;
}

.text-h5 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.5;
}

.text-body-xl {
    font-size: var(--text-xl);
    line-height: 1.7;
}

.text-body-lg {
    font-size: var(--text-lg);
    line-height: 1.7;
}

.text-body-md {
    font-size: var(--text-base);
    line-height: 1.6;
}

.text-body-sm {
    font-size: var(--text-sm);
    line-height: 1.6;
}

.text-caption {
    font-size: var(--text-xs);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Advanced Layout System */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container-sm {
    max-width: 640px;
}

.container-md {
    max-width: 768px;
}

.container-lg {
    max-width: 1024px;
}

.container-xl {
    max-width: 1280px;
}

/* Premium Hero Section */
.hero-premium {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gray-50) 0%, #ffffff 100%);
    padding: var(--space-8) 0;
}

.hero-background-premium {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
}

.hero-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: grid-move 20s linear infinite;
    z-index: -3;
}

@keyframes grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Animated Background Paths */
.animated-paths-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    overflow: hidden;
}

.animated-paths-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    min-height: 800px;
    pointer-events: none;
}

.animated-path {
    filter: blur(0.2px);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.path-1 {
    stroke-dasharray: 5, 10;
    animation: dashArray1 6s ease-in-out infinite;
}

.path-2 {
    stroke-dasharray: 8, 15;
    animation: dashArray2 8s ease-in-out infinite;
}

.path-3 {
    stroke-dasharray: 12, 20;
    animation: dashArray3 10s ease-in-out infinite;
}

.floating-path {
    filter: blur(0.3px);
    stroke-linecap: round;
}

@keyframes dashArray1 {
    0%, 100% { stroke-dasharray: 5, 10; }
    50% { stroke-dasharray: 15, 5; }
}

@keyframes dashArray2 {
    0%, 100% { stroke-dasharray: 8, 15; }
    50% { stroke-dasharray: 20, 8; }
}

@keyframes dashArray3 {
    0%, 100% { stroke-dasharray: 12, 20; }
    50% { stroke-dasharray: 25, 10; }
}

/* Responsive adjustments for animated paths */
@media (max-width: 768px) {
    .animated-paths-svg {
        min-width: 768px;
        min-height: 600px;
    }

    .animated-path {
        stroke-width: 2;
        filter: blur(0.3px);
    }

    .floating-path {
        opacity: 0.05;
    }
}

.hero-orbs-premium {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-emerald);
    filter: blur(120px);
    animation: float-premium 8s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    top: -20%;
    right: -15%;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    bottom: -10%;
    left: -10%;
    animation-delay: 3s;
    background: linear-gradient(135deg, var(--primary-800), var(--primary-500));
}

.orb-3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 60%;
    animation-delay: 6s;
    background: linear-gradient(135deg, var(--primary-200), var(--primary-400));
}

@keyframes float-premium {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-20px) rotate(90deg) scale(1.1); }
    50% { transform: translateY(0px) rotate(180deg) scale(1); }
    75% { transform: translateY(20px) rotate(270deg) scale(0.9); }
}

/* Navigation Enhancement - High-Fidelity Glassmorphism */
.nav-premium {
    position: relative;
    width: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* .scrolled class removed - navigation is no longer persistent */

.nav-content-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
}

.logo-premium {
    font-size: var(--text-xl);
    font-weight: 800; /* Authority Branding */
    color: var(--gray-900);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-premium:hover {
    color: var(--primary-600);
    transform: scale(1.05);
}

.nav-links-premium {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.nav-link-premium {
    position: relative;
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 600; /* Pro Max confidence */
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-link-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-emerald);
    border-radius: var(--radius-md);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.nav-link-premium:hover::before {
    opacity: 0.08;
}

.nav-link-premium:hover {
    color: var(--primary-700);
    transform: translateY(-2px);
}

.cta-nav-premium {
    background: var(--gradient-emerald);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.cta-nav-premium:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.3);
}

/* Premium Hero Content */
.hero-content-premium {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text-premium {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.hero-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--gradient-glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: var(--primary-700);
    font-weight: 600;
    font-size: var(--text-sm);
    width: fit-content;
    box-shadow: var(--shadow-sm);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-500);
    border-radius: 50%;
    animation: pulse-premium 2s infinite;
}

@keyframes pulse-premium {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-title-premium {
    font-size: clamp(var(--text-4xl), 4vw, var(--text-7xl));
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--gray-900);
    margin: 0;
}

.hero-title-gradient {
    background: var(--gradient-emerald);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle-premium {
    font-size: var(--text-xl);
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.hero-stats-premium {
    display: flex;
    gap: var(--space-8);
    margin: var(--space-8) 0;
}

.stat-premium {
    text-align: center;
}

.stat-number-premium {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--primary-600);
    line-height: 1;
}

.stat-label-premium {
    font-size: var(--text-sm);
    color: var(--gray-600);
    margin-top: var(--space-1);
    font-weight: 500;
}

.hero-actions-premium {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.btn-primary-premium {
    background: var(--gradient-emerald);
    color: white;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--duration-300) var(--ease-out);
    box-shadow: var(--shadow-lg);
    border: none;
    cursor: pointer;
}

.btn-primary-premium:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-2xl);
}

.btn-secondary-premium {
    color: var(--gray-700);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--duration-300) var(--ease-out);
    border: 2px solid var(--gray-300);
    background: white;
}

.btn-secondary-premium:hover {
    border-color: var(--primary-400);
    color: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Premium Hero Image */
.hero-visual-premium {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-container-premium {
    position: relative;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: all var(--duration-500) var(--ease-out);
}

.hero-image-container-premium:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 40px 80px -12px rgb(0 0 0 / 0.25);
}

.hero-image-premium {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-3xl);
}

.hero-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-glass);
    border-radius: var(--radius-3xl);
    opacity: 0;
    transition: opacity var(--duration-300) var(--ease-out);
}

.hero-image-container-premium:hover .hero-image-overlay {
    opacity: 1;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.floating-card {
    position: absolute;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    animation: float-card 4s ease-in-out infinite;
}

.floating-card-1 {
    top: 10%;
    right: -10%;
    animation-delay: 0s;
}

.floating-card-2 {
    bottom: 20%;
    left: -15%;
    animation-delay: 2s;
}

@keyframes float-card {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Premium Sections */
.section-premium {
    padding: var(--space-20) 0;
    position: relative;
}

/* Alternating section backgrounds for better visual flow */
.section-premium:nth-child(even) {
    background: var(--gray-50);
}

.section-premium:nth-child(odd) {
    background: white;
}

.section-premium.alt {
    background: var(--gray-100);
}

.section-header-premium {
    text-align: center;
    margin-bottom: var(--space-20);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-badge-premium {
    display: inline-block;
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.section-title-premium {
    font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.section-description-premium {
    font-size: var(--text-xl);
    color: var(--gray-600);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* Premium Cards - Pro Max depth */
.cards-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-16);
}

.card-premium {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(16, 185, 129, 0.05);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-emerald);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-premium:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.15);
    border-color: var(--primary-300);
    background: white;
}

.card-premium:hover::before {
    transform: scaleX(1);
}

.card-icon-premium {
    width: 60px;
    height: 60px;
    background: var(--gradient-emerald);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    font-size: var(--text-2xl);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.3);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-premium:hover .card-icon-premium {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 15px 30px -5px rgba(16, 185, 129, 0.4);
}

.card-title-premium {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-3);
}

.card-description-premium {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.card-link-premium {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--duration-300) var(--ease-out);
}

.card-link-premium:hover {
    color: var(--primary-700);
    transform: translateX(4px);
}

.contact-content-simple {
    display: flex;
    justify-content: center;
    margin-top: var(--space-12);
}

.contact-content-simple .contact-form-modern {
    width: 100%;
    max-width: 800px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-content-premium {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        text-align: center;
    }
    
    .hero-text-premium {
        align-items: center;
    }
    
    .hero-visual-premium {
        order: -1;
    }
    
    .hero-image-container-premium {
        max-width: 320px;
        margin: 0 auto;
        transform: none;
    }
    
    .hero-image-container-premium:hover {
        transform: scale(1.03);
    }
    
    .hero-badge-premium {
        margin: 0 auto;
    }
    
    .hero-actions-premium {
        justify-content: center;
    }
    
    .hero-title-premium {
        font-size: clamp(2rem, 5vw, 3.5rem);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-4);
    }
    
    .nav-links-premium {
        display: none;
    }
    
    .hero-stats-premium {
        gap: var(--space-6);
    }
    
    .hero-actions-premium {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-primary-premium,
    .btn-secondary-premium {
        justify-content: center;
        width: 100%;
    }
    
    .section-premium {
        padding: var(--space-20) 0;
    }
    
    .cards-grid-premium {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Animation System */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--duration-700) var(--ease-out);
}

.animate-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all var(--duration-700) var(--ease-out);
}

.animate-fade-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

.animate-fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all var(--duration-700) var(--ease-out);
}

.animate-fade-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

.animate-scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: all var(--duration-700) var(--ease-out);
}

.animate-scale-up.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Stagger animations */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Homepage scroll motion system */
.home-motion-section {
    position: relative;
    overflow: hidden;
    --section-progress: 0;
    --section-drift: calc((var(--section-progress) - 0.5) * 34px);
}

.home-motion-section > .container {
    position: relative;
    z-index: 1;
}

.home-motion-section::after {
    content: "";
    position: absolute;
    inset: -18% -8%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, var(--section-drift), 0);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
    background:
        radial-gradient(circle at 12% 22%, rgba(16, 185, 129, 0.10), transparent 30%),
        radial-gradient(circle at 88% 78%, rgba(45, 212, 191, 0.08), transparent 34%),
        linear-gradient(115deg, transparent 0%, rgba(16, 185, 129, 0.045) 48%, transparent 58%),
        linear-gradient(rgba(16, 185, 129, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.035) 1px, transparent 1px);
    background-size: auto, auto, 420px 100%, 86px 86px, 86px 86px;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.home-motion-section.section-in-view::after {
    opacity: 1;
}

.motion-ready {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 760ms var(--ease-out),
        transform 760ms var(--ease-out),
        filter 760ms var(--ease-out),
        box-shadow 300ms var(--ease-out),
        border-color 300ms var(--ease-out);
    transition-delay: calc(var(--motion-index, 0) * 70ms);
    will-change: opacity, transform, filter;
}

.motion-ready.motion-from-left {
    transform: translate3d(-36px, 20px, 0) scale(0.985);
}

.motion-ready.motion-from-right {
    transform: translate3d(36px, 20px, 0) scale(0.985);
}

.motion-ready.motion-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.motion-tilt.motion-in-view:hover {
    transform: translate3d(0, -7px, 0) scale(1.012);
}

.video-card.motion-tilt {
    isolation: isolate;
}

.video-card.motion-tilt .video-thumb {
    transition: transform 700ms var(--ease-out);
}

.video-card.motion-tilt:hover .video-thumb {
    transform: scale(1.035);
}

.stat-premium.motion-in-view .stat-number-premium,
.credentials-stats .stat-item.motion-in-view .stat-number {
    text-shadow: 0 0 24px rgba(16, 185, 129, 0.22);
}

.problem-side.motion-in-view,
.solution-side.motion-in-view,
.credentials-card.motion-in-view,
.project-highlight.motion-in-view,
.service-tier.motion-in-view,
.contact-form-modern.motion-in-view {
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.home-motion-section.section-in-view .section-title-premium .text-gradient,
.home-motion-section.section-in-view .hero-title-gradient {
    background-size: 180% 180%;
    animation: section-gradient-shift 6s ease-in-out infinite alternate;
}

@keyframes section-gradient-shift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-motion-section::after,
    .home-motion-section.section-in-view .section-title-premium .text-gradient,
    .home-motion-section.section-in-view .hero-title-gradient {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    .motion-ready,
    .motion-ready.motion-from-left,
    .motion-ready.motion-from-right,
    .motion-ready.motion-in-view,
    .motion-tilt.motion-in-view:hover,
    .video-card.motion-tilt:hover .video-thumb {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* Premium Free Training Section */
.free-training-premium {
    position: relative;
    padding: var(--space-32) 0;
    background: linear-gradient(135deg, #0B2027 0%, #1F4D3F 50%, #2D5F4F 100%);
    overflow: hidden;
}

.training-background-premium {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.training-mesh-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(5, 150, 105, 0.3) 0%, transparent 50%);
    animation: mesh-move 15s ease-in-out infinite;
}

@keyframes mesh-move {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.training-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.floating-shape {
    position: absolute;
    background: var(--gradient-emerald);
    opacity: 0.1;
    border-radius: 50%;
    animation: float-shape 8s ease-in-out infinite;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 70%;
    right: 20%;
    animation-delay: 2s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 70%;
    animation-delay: 4s;
}

.shape-4 {
    width: 80px;
    height: 80px;
    top: 30%;
    right: 10%;
    animation-delay: 6s;
}

@keyframes float-shape {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
}

.training-content-premium {
    position: relative;
    z-index: 1;
}

.training-header-premium {
    text-align: center;
    margin-bottom: var(--space-16);
}

.masterclass-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    color: white;
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-8);
    position: relative;
    overflow: hidden;
}

.badge-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-emerald);
    opacity: 0.2;
    border-radius: var(--radius-full);
    animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.05); opacity: 0.4; }
}

.masterclass-badge-premium i {
    font-size: var(--text-lg);
    z-index: 1;
    position: relative;
}

.masterclass-badge-premium span {
    z-index: 1;
    position: relative;
}

.training-title-premium {
    font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
    font-weight: 800;
    color: white;
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.training-subtitle-premium {
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: 600;
    color: var(--primary-200);
    margin-bottom: var(--space-6);
    line-height: 1.2;
}

.training-description-premium {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto var(--space-12);
    line-height: 1.7;
}

.training-main-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-16);
    align-items: start;
}

.benefits-grid-premium {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.benefit-card-premium {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    transition: all var(--duration-300) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.benefit-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-emerald);
    transform: scaleX(0);
    transition: transform var(--duration-300) var(--ease-out);
}

.benefit-card-premium:hover::before {
    transform: scaleX(1);
}

.benefit-card-premium:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateX(8px);
}

.benefit-icon-premium {
    width: 50px;
    height: 50px;
    background: var(--gradient-emerald);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.benefit-content-premium h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-2);
}

.benefit-content-premium p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: var(--text-sm);
}

.form-container-premium {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-3xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-2xl);
    position: relative;
    overflow: hidden;
}

.form-container-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-emerald);
    opacity: 0.05;
    border-radius: var(--radius-3xl);
}

.form-header-premium {
    text-align: center;
    margin-bottom: var(--space-8);
}

.form-header-premium h4 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-2);
}

.form-subtitle-premium {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
}

.premium-lead-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.form-group-premium {
    position: relative;
}

.input-container-premium {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-premium {
    position: absolute;
    left: var(--space-4);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-sm);
    z-index: 2;
    transition: color var(--duration-300) var(--ease-out);
}

.premium-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    color: white;
    font-size: var(--text-base);
    font-weight: 500;
    transition: all var(--duration-300) var(--ease-out);
    backdrop-filter: blur(10px);
}

.premium-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.premium-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-400);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.premium-input:focus + .input-border-premium {
    transform: scaleX(1);
}

.premium-input:focus ~ .input-icon-premium {
    color: var(--primary-300);
}

.input-border-premium {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-emerald);
    transform: scaleX(0);
    transition: transform var(--duration-300) var(--ease-out);
}

.premium-submit-btn {
    background: var(--gradient-emerald);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-8);
    color: white;
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--duration-300) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-lg);
}

.premium-submit-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-2xl);
}

.premium-submit-btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-text,
.btn-icon {
    position: relative;
    z-index: 2;
    transition: all var(--duration-300) var(--ease-out);
}

.btn-icon {
    transition: transform var(--duration-300) var(--ease-out);
}

.premium-submit-btn:hover .btn-icon {
    transform: translateX(4px);
}

.btn-ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    border-radius: var(--radius-xl);
    opacity: 0;
    transition: all var(--duration-300) var(--ease-out);
}

.premium-submit-btn:active .btn-ripple {
    transform: scale(1);
    opacity: 1;
}

.form-footer-premium {
    text-align: center;
}

.security-badge-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-xs);
    margin-bottom: var(--space-6);
}

.training-stats-premium {
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.training-stats-premium .stat-text {
    color: var(--primary-200);
    font-weight: 600;
    font-size: var(--text-sm);
}

/* Responsive Design for Training Section */
@media (max-width: 1024px) {
    .training-main-content {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    
    .form-container-premium {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .free-training-premium {
        padding: var(--space-20) 0;
    }
    
    .training-title-premium {
        font-size: var(--text-3xl);
    }
    
    .training-subtitle-premium {
        font-size: var(--text-xl);
    }
    
    .form-container-premium {
        padding: var(--space-8);
    }
    
    .benefits-grid-premium {
        gap: var(--space-3);
    }
    
    .benefit-card-premium {
        padding: var(--space-4);
    }
    
    .benefit-card-premium:hover {
        transform: none;
    }
}

/* Utility Classes */
.text-gradient {
    background: var(--gradient-emerald);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.shadow-glow {
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.3);
}

.transform-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Homepage Hero Redesign */
.hero-premium {
    min-height: auto;
    display: flex;
    align-items: center;
    padding: clamp(3rem, 5vh, 4.5rem) 0 clamp(2.5rem, 4vh, 3.5rem);
    background:
        radial-gradient(circle at 78% 24%, rgba(52, 211, 153, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 18% 80%, rgba(20, 184, 166, 0.14) 0%, transparent 34%),
        linear-gradient(135deg, #031b14 0%, #063626 46%, #082f24 100%);
    color: #f8fafc;
}

.hero-background-premium {
    z-index: 0;
    opacity: 1;
    background: transparent;
}

.hero-background-premium::before,
.hero-background-premium::after {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
}

.hero-background-premium::before {
    background-image:
        linear-gradient(rgba(167, 243, 208, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167, 243, 208, 0.075) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 52%, rgba(0, 0, 0, 0.2));
    animation: hero-grid-drift 26s linear infinite;
}

.hero-background-premium::after {
    background:
        repeating-radial-gradient(ellipse at 72% 42%, transparent 0 34px, rgba(110, 231, 183, 0.08) 35px 37px, transparent 38px 70px),
        repeating-radial-gradient(ellipse at 24% 70%, transparent 0 46px, rgba(45, 212, 191, 0.06) 47px 49px, transparent 50px 92px);
    opacity: 0.9;
    transform: rotate(-8deg);
    animation: hero-contour-shift 18s ease-in-out infinite alternate;
}

.hero-grid-pattern {
    background-image:
        linear-gradient(110deg, transparent 0%, rgba(16, 185, 129, 0.12) 48%, transparent 54%),
        linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 280px 100%, 84px 84px, 84px 84px;
    opacity: 0.7;
    z-index: 1;
    animation: hero-scan 9s ease-in-out infinite;
}

.animated-paths-container,
.hero-orbs-premium {
    z-index: 1;
    opacity: 0.45;
}

.hero-content-premium {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.78fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    min-height: 0;
    padding: 0;
}

.hero-text-premium {
    color: #f8fafc;
    gap: 1.5rem;
    max-width: 720px;
}

.hero-title-premium {
    max-width: 760px;
    color: #ffffff;
    font-size: clamp(3rem, 6.4vw, 6.4rem);
    line-height: 0.94;
    letter-spacing: 0;
    text-wrap: balance;
}

.hero-title-gradient {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 42%, #a7f3d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle-premium {
    max-width: 640px;
    margin: 0;
    color: #d1fae5;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.65;
    font-weight: 500;
}

.hero-subtitle-premium a {
    color: #86efac;
    text-decoration: underline;
    text-decoration-color: rgba(134, 239, 172, 0.35);
    text-underline-offset: 0.22em;
}

.hero-actions-premium {
    gap: 1rem;
    margin-top: 0.5rem;
}

.hero-actions-premium .btn-primary-premium,
.hero-actions-premium .btn-secondary-premium {
    min-height: 56px;
    border-radius: 8px;
    padding: 0.95rem 1.35rem;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: none;
}

.hero-actions-premium .btn-primary-premium {
    background: #34d399;
    color: #042016;
}

.hero-actions-premium .btn-primary-premium:hover {
    background: #6ee7b7;
    transform: translateY(-2px);
}

.hero-actions-premium .btn-secondary-premium {
    background: rgba(255, 255, 255, 0.08);
    color: #ecfdf5;
    border: 1px solid rgba(167, 243, 208, 0.35);
}

.hero-actions-premium .btn-secondary-premium:hover {
    background: rgba(167, 243, 208, 0.14);
    color: #ffffff;
    border-color: rgba(167, 243, 208, 0.72);
    transform: translateY(-2px);
}

.hero-visual-premium {
    justify-self: end;
    width: min(100%, 360px);
}

.hero-image-container-premium {
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(167, 243, 208, 0.42);
    border-radius: 8px;
    background: rgba(3, 27, 20, 0.55);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), 0 0 0 10px rgba(255, 255, 255, 0.035);
    transform: none;
}

.hero-image-container-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 0 10px rgba(52, 211, 153, 0.08);
}

.hero-image-premium {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
}

@keyframes hero-grid-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(72px, 72px, 0); }
}

@keyframes hero-contour-shift {
    from { transform: rotate(-8deg) translate3d(-1%, 0, 0); }
    to { transform: rotate(-8deg) translate3d(2%, -2%, 0); }
}

@keyframes hero-scan {
    0%, 100% { background-position: -280px 0, 0 0, 0 0; }
    50% { background-position: 280px 0, 32px 24px, 32px 24px; }
}

@media (max-width: 980px) {
    .hero-premium {
        min-height: auto;
        padding: 5rem 0 3.5rem;
    }

    .hero-content-premium {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 2.5rem;
    }

    .hero-text-premium {
        max-width: 760px;
    }

    .hero-visual-premium {
        justify-self: start;
        width: min(100%, 360px);
    }
}

@media (max-width: 640px) {
    .hero-premium {
        padding: 4rem 0 2.75rem;
    }

    .hero-content-premium {
        gap: 2rem;
    }

    .hero-title-premium {
        font-size: clamp(2.6rem, 15vw, 4.1rem);
        line-height: 0.98;
    }

    .hero-actions-premium {
        width: 100%;
    }

    .hero-actions-premium .btn-primary-premium,
    .hero-actions-premium .btn-secondary-premium {
        width: 100%;
        justify-content: center;
    }

    .hero-visual-premium {
        width: min(100%, 320px);
    }
}

/* Video Funnel Single View Styles */

.video-funnel-section {
    padding: var(--space-24) 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.funnel-progress-container {
    max-width: 600px;
    margin: 1.5rem auto 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary, #10B981);
    transition: width 0.5s ease;
}

.progress-percentage {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.video-display-container {
    max-width: 900px;
    margin: 3rem auto 0;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.video-player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #020617; /* Deeper cinematic black */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

.video-placeholder-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.7) 0%, rgba(2, 6, 23, 0.9) 100%);
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-placeholder-overlay:hover {
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.6) 0%, rgba(2, 6, 23, 0.8) 100%);
}

.play-btn-large {
    width: 90px; /* Slightly larger */
    height: 90px;
    background: var(--color-primary, #10B981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
    animation: pulse-pro-max 2s infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-placeholder-overlay:hover .play-btn-large {
    transform: scale(1.1);
    background: #34d399;
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.6);
}

.video-player-frame iframe,
.video-player-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #020617;
}

@keyframes pulse-pro-max {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 30px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.video-nav-controls {
    padding: 2.5rem; /* More breathability */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(16, 185, 129, 0.1);
}

.video-info-box .step-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 900; /* Authority weight */
    color: var(--color-primary, #10B981);
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.current-step-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.next-video-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: #0f172a;
    color: white;
    border: none;
    border-radius: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.3);
}

.next-video-btn:hover {
    background: var(--color-primary, #10B981);
    transform: translateX(8px) scale(1.05);
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.4);
}

.video-bento-grid {
    max-width: 1100px;
    margin: 2rem auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.video-step-card {
    min-height: 150px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    border: 1px solid #dbe3ea;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.video-step-card:hover,
.video-step-card.active {
    transform: translateY(-2px);
    border-color: var(--color-primary, #10B981);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.video-step-card.locked {
    cursor: not-allowed;
    opacity: 0.55;
}

.video-step-number {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--color-primary, #10B981);
    text-transform: uppercase;
}

.video-step-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.video-step-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.75rem;
    font-weight: 800;
}

/* Opt-in Form Overlay */
.optin-overlay {
    max-width: 400px;
    width: 100%;
}

.optin-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

.optin-form {
    display: flex;
    gap: 0.5rem;
}

.optin-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.optin-btn {
    padding: 0.75rem 1.25rem;
    background: var(--color-primary, #10B981);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 768px) {
    .video-nav-controls {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .next-video-btn {
        width: 100%;
        justify-content: center;
    }
    
    .optin-form {
        flex-direction: column;
    }
}

.script-content-view {
    width: 100%;
    height: 100%;
    padding: 2rem;
    overflow-y: auto;
    text-align: left;
    background: #0f172a;
    color: #e2e8f0;
    line-height: 1.6;
    font-size: 1.1rem;
}

.script-preview-inner {
    max-width: 680px;
    margin: 0 auto;
}

.script-preview-note {
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #bbf7d0;
    font-size: 0.95rem;
}

.script-content-view h2, .script-content-view h3 {
    color: var(--color-primary, #10B981);
    margin-top: 1.5rem;
}

.script-content-view strong {
    color: white;
}

/* ── Bento Grid Cards ──────────────────────────────────────────── */

.video-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.bento-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  min-height: 110px;
}

.bento-card:hover {
  border-color: #10B981;
  transform: translateY(-2px);
}

.bento-card.is-active {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.15);
}

.bento-card.is-locked {
  cursor: not-allowed;
  opacity: 0.38;
}

.bento-step-num {
  font-size: 0.7rem;
  font-weight: 900;
  color: #10B981;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.bento-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
  flex: 1;
}

.bento-status {
  font-size: 0.85rem;
  color: #475569;
}

.bento-card.is-active .bento-status,
.bento-status .fa-check-circle {
  color: #10B981;
}

/* ── Section background ───────────────────────────────────────── */

.video-funnel-section {
  background: #0b1120;
  border-top: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Optin overlay polish ─────────────────────────────────────── */

.optin-overlay {
  max-width: 460px;
  width: 100%;
  padding: 0 1rem;
}

.optin-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: #fff;
}

.optin-subtitle {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.optin-form {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.optin-input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
}
.optin-input::placeholder { color: #64748b; }
.optin-input:focus {
  outline: none;
  border-color: #10B981;
}

.optin-btn {
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: #10B981;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.optin-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}

.optin-success {
  text-align: center;
  color: #10B981;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .video-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

:root {
    --primary-color: #1F4D3F;
    --secondary-color: #059669;
    --accent-color: #10B981;
    --emerald-light: #ECFDF5;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --background-light: #FAF3E0;
    --background-white: #ffffff;
    --background-slate: #F8FAFC;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-emerald: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    --gradient-light: linear-gradient(135deg, var(--background-light) 0%, #F1F5F9 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", "Inter Fallback", sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-section {
    background: var(--gradient-primary);
    color: white;
    padding: 4rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>') no-repeat center center;
    background-size: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-description {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
}

.credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.credential {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.profile-photo {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
}

section {
    padding: 4rem 0;
}

.about-section {
    background: var(--background-light);
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-primary);
}

.about-text p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.services-section {
    background: var(--background-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: var(--background-white);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.service-card ul {
    list-style: none;
}

.service-card li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1.5rem;
}

.service-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.testimonials-section {
    background: var(--gradient-light);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial {
    background: var(--background-white);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.testimonial blockquote {
    font-size: 1.125rem;
    font-style: italic;
    margin-bottom: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.testimonial cite {
    color: var(--primary-color);
    font-weight: 500;
}

.achievements-section {
    background: var(--background-white);
    padding: 0.5rem 0 2rem 0;
}

.achievements-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
}

.achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    width: 100%;
    max-width: 300px;
}

.achievement:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.achievement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #10B981, #059669);
    border-radius: 50%;
    color: white;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    margin-bottom: 0.5rem;
}

.achievement-text {
    width: 100%;
}

.achievement-text h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1f2937;
    line-height: 1.3;
}

.achievement-text p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
}

/* Mobile responsive for achievements */
@media (max-width: 768px) {
    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
    }

    .achievement {
        padding: 1.5rem 1rem;
    }

    .achievement-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Teaching Experience Section */
.teaching-experience-section {
    background: var(--background-slate);
    padding: 4rem 0;
}

.teaching-experience-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.teaching-intro {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.teaching-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.teaching-timeline::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-color);
}

.teaching-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    padding-left: 0;
}

.teaching-item::before {
    content: '';
    position: absolute;
    left: 114px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 3px var(--accent-color);
}

.teaching-item.current::before {
    background: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 3px var(--primary-color), 0 0 0 6px rgba(31, 77, 63, 0.3);
    }
    50% {
        box-shadow: 0 0 0 3px var(--primary-color), 0 0 0 12px rgba(31, 77, 63, 0.1);
    }
    100% {
        box-shadow: 0 0 0 3px var(--primary-color), 0 0 0 6px rgba(31, 77, 63, 0.3);
    }
}

.teaching-year {
    background: var(--gradient-emerald);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 100px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.teaching-content {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.teaching-content:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.teaching-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.teaching-content h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
}

.teaching-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.contact-section {
    background: var(--gradient-primary);
    color: white;
}

.contact-section h2 {
    color: white;
    text-align: center;
    margin-bottom: 2rem;
}

.contact-section h3 {
    color: white;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
}

/* Contact Social Section */
.contact-social-section {
    padding-right: 1rem;
}

.contact-social-section .display-cards-container {
    margin-top: 2rem;
    min-height: 300px;
}

.contact-social-section .display-cards-stack {
    height: 250px;
    max-width: 600px;
}

.contact-social-section .display-card {
    width: 280px;
    height: 180px;
}

/* Responsive for Contact Layout */
@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-social-section {
        padding-right: 0;
        order: 2;
    }

    .contact-form-modern {
        order: 1;
    }
}

.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

.contact-info p {
    margin-bottom: 2rem;
    opacity: 0.9;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-link {
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    transition: background 0.3s ease;
    display: inline-block;
}

.contact-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.location {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
}

.contact-form {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.submit-btn {
    background: white;
    color: var(--primary-color);
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.footer {
    background: #1a1a1a;
    color: #ffffff;
    padding: 4rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-section .footer-heading {
    color: #10B981;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid #10B981;
    padding-bottom: 0.5rem;
}

.footer-links-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-link {
    color: #cccccc;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.footer-link:hover {
    color: #10B981;
    transform: translateX(5px);
}

.footer-link i {
    width: 16px;
    color: #10B981;
}

/* Social Links */
.footer-social-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-link {
    color: #cccccc;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.social-link:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    transform: translateX(5px);
}

.social-link i {
    width: 20px;
    font-size: 1.1rem;
}

.social-link.linkedin:hover { color: #10B981; }
.social-link.facebook:hover { color: #10B981; }
.social-link.instagram:hover { color: #10B981; }
.social-link.twitter:hover { color: #10B981; }

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 1.5rem;
    text-align: center;
}

.footer-bottom-content p {
    margin: 0.5rem 0;
    color: #cccccc;
    font-size: 0.9rem;
}

.footer-note {
    font-style: italic;
    color: #999;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
        max-width: 100%;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .training-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .training-content h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .outcomes-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-card.featured {
        transform: none;
        margin: 1rem 0;
    }

    /* Section spacing optimization */
    .section-premium {
        padding: 3rem 0;
    }

    .section-header-premium {
        margin-bottom: 2rem;
    }

    /* Responsive Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bacb-info {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-social-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .profile-photo {
        width: 200px;
        height: 200px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-links {
        justify-content: center;
    }

    h2 {
        font-size: 2rem;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .achievement {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .achievement-icon {
        margin: 0 auto;
    }

    .teaching-experience-section h2 {
        font-size: 2rem;
    }

    .teaching-timeline::before {
        left: 2rem;
    }

    .teaching-item {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
        padding-left: 3rem;
    }

    .teaching-item::before {
        left: 1.4rem;
    }

    .teaching-year {
        align-self: flex-start;
        min-width: auto;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .bacb-info {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Mobile optimization for smaller screens */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .section-premium {
        padding: 2rem 0;
    }

    .hero-content {
        gap: 1rem;
        padding: 1rem 0;
    }

    .section-header-premium {
        margin-bottom: 1.5rem;
    }

    .section-title-premium {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .cards-grid-premium {
        gap: 1rem;
    }

    .card-premium {
        padding: 1.5rem;
    }

    .achievements-grid {
        gap: 1rem;
    }

    .achievement {
        padding: 1rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .teaching-item {
        padding-left: 2rem;
        margin-bottom: 1.5rem;
    }

    .legal-content {
        padding: 1rem;
    }
}

/* Legal Pages Styles */
.simple-header {
    background: var(--primary-color);
    color: white;
    padding: 1rem 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h1 a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
}

.header-content nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.header-content nav a:hover {
    opacity: 0.8;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.legal-content h1 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.last-updated {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.legal-content section {
    margin-bottom: 2rem;
}

.legal-content h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 1rem;
    text-align: left;
}

.legal-content h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.legal-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.legal-content ul {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.legal-content li {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.legal-content a {
    color: var(--accent-color);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

/* Contact Form Enhancements */
.contact-form .form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
}

.status-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-btn:disabled:hover {
    background-color: var(--primary-color);
}

/* Loading spinner animation */
.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive YouTube Embeds */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Email Capture Styles - Sticky Banner & Exit Intent */

/* === STICKY BANNER === */
.sticky-email-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: white;
  padding: 1rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
}

.sticky-email-banner.visible {
  transform: translateY(0);
}

.sticky-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sticky-banner-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sticky-banner-icon {
  font-size: 1.5rem;
}

.sticky-banner-message {
  font-size: 0.95rem;
}

.sticky-banner-message strong {
  font-weight: 600;
}

.sticky-banner-form {
  display: flex;
  gap: 0.5rem;
  flex: 0 1 auto;
}

.sticky-banner-input {
  padding: 0.625rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 8px;
  font-size: 0.875rem;
  min-width: 240px;
  transition: all 0.2s;
}

.sticky-banner-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.sticky-banner-input:focus {
  outline: none;
  border-color: #10b981;
  background: rgba(255, 255, 255, 0.15);
}

.sticky-banner-button {
  padding: 0.625rem 1.5rem;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.sticky-banner-button:hover {
  background: #059669;
  transform: translateY(-2px);
}

.sticky-banner-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.sticky-banner-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.sticky-banner-close:hover {
  color: white;
}

/* === EXIT INTENT POPUP === */
.exit-intent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.exit-intent-overlay.visible {
  opacity: 1;
}

.exit-intent-modal {
  background: white;
  border-radius: 24px;
  padding: 3rem 2.5rem;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease-in-out;
}

.exit-intent-overlay.visible .exit-intent-modal {
  transform: scale(1);
}

.exit-intent-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-intent-close:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: rotate(90deg);
}

.exit-intent-content {
  text-align: center;
}

.exit-intent-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.exit-intent-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1rem 0;
}

.exit-intent-description {
  font-size: 1.125rem;
  color: #64748b;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

.exit-intent-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.exit-intent-input {
  padding: 1rem 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.2s;
}

.exit-intent-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.exit-intent-button {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.2s;
}

.exit-intent-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.exit-intent-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.exit-intent-privacy {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  .sticky-banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .sticky-banner-text {
    justify-content: center;
  }
  
  .sticky-banner-form {
    flex-direction: column;
    width: 100%;
  }
  
  .sticky-banner-input {
    width: 100%;
    min-width: auto;
  }
  
  .sticky-banner-button {
    width: 100%;
  }
  
  .sticky-banner-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
  
  .exit-intent-modal {
    padding: 2rem 1.5rem;
  }
  
  .exit-intent-title {
    font-size: 1.5rem;
  }
  
  .exit-intent-description {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .sticky-email-banner {
    padding: 0.75rem;
  }
  
  .sticky-banner-message {
    font-size: 0.875rem;
  }
  
  .sticky-banner-icon {
    font-size: 1.25rem;
  }
}

/* Above-the-fold hero and headings paint immediately. Scroll motion still runs below the first screen. */
.hero-premium .animate-fade-up,
.hero-premium .animate-scale-up,
.cv-hero .animate-fade-up,
.cv-hero .animate-scale-up,
.blog-header-premium.animate-fade-up,
h1.animate-fade-up {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
}

/* Admin pages keep the Font Awesome font. The public subset uses masks. */
.admin-page .fas,
.admin-page .far,
.admin-page .fab {
    background: none;
    -webkit-mask: none;
    mask: none;
    width: auto;
    height: auto;
}