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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

/* Icon Styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    position: relative;
}

.icon-shield::before {
    content: '';
    width: 16px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L3 7V12C3 16.55 6.84 20.74 9.91 21.79C11.12 22.26 12.88 22.26 14.09 21.79C17.16 20.74 21 16.55 21 12V7L12 2Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-lightning::before {
    content: '';
    width: 14px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2L3 14H12L11 22L21 10H12L13 2Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-globe::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M2 12H22' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-save::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16L21 8V19C21 20.1046 20.1046 21 19 21Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M17 21V13H7V21' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M7 3V8H15' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-mobile::before {
    content: '';
    width: 16px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-code::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='16,18 22,12 16,6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='8,6 2,12 8,18' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-key::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 2L19 4L15 8L12 5L11 6L14 9L10 13L9 12L8 13L11 16L7 20L3 16L7 12L8 11L7 10L8 9L5 6L9 2L12 5L16 1L18 3L21 2Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-desktop::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='12' y1='17' x2='12' y2='21' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-web::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-secure::before {
    content: '';
    width: 16px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-fast::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 7L16 12L23 17V7Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 7L7 12L14 17V7Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 7L1 12L5 17V7Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-chart::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='18' y1='20' x2='18' y2='10' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='12' y1='20' x2='12' y2='4' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='6' y1='20' x2='6' y2='14' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-warning::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18C1.64706 18.3024 1.55644 18.6453 1.55644 18.995C1.55644 19.3447 1.64706 19.6876 1.82 19.99C1.99294 20.2924 2.23757 20.5471 2.53485 20.7312C2.83213 20.9153 3.16899 21.0228 3.51 21.045H20.49C20.831 21.0228 21.1679 20.9153 21.4651 20.7312C21.7624 20.5471 22.0071 20.2924 22.18 19.99C22.3529 19.6876 22.4436 19.3447 22.4436 18.995C22.4436 18.6453 22.3529 18.3024 22.18 18L13.71 3.86C13.5317 3.56611 13.2847 3.31762 12.9894 3.13781C12.6941 2.95799 12.3589 2.86279 12.018 2.86279C11.6771 2.86279 11.3419 2.95799 11.0466 3.13781C10.7513 3.31762 10.5043 3.56611 10.326 3.86H10.29Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='12' y1='9' x2='12' y2='13' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-money::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='12' y1='1' x2='12' y2='23' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-exchange::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='17,1 21,5 17,9' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M3 11V9C3 7.93913 3.42143 6.92172 4.17157 6.17157C4.92172 5.42143 5.93913 5 7 5H21' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='7,23 3,19 7,15' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M21 13V15C21 16.0609 20.5786 17.0783 19.8284 17.8284C19.0783 18.5786 18.0609 19 17 19H3' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-search::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M21 21L16.65 16.65' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-eye::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12S5 4 12 4S23 12 23 12S19 20 12 20S1 12 1 12Z' stroke='currentColor' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-copy::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-folder::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-question::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-rocket::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2L3 6V14C3 15.66 4.34 17 6 17H16C17.66 17 19 15.66 19 14V6L16 2H6Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='6' y1='6' x2='16' y2='6' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-tool::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7 6.3C15.1 5.9 15.7 5.9 16.1 6.3L17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3L9 18H5V14L13.7 5.3C14.1 4.9 14.7 4.9 15.1 5.3L16.7 6.9C17.1 7.3 17.1 7.9 16.7 8.3L14.7 6.3Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M19 15L20 16L22 14L21 13L19 15Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M15 19L16 20L14 22L13 21L15 19Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-email::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='22,6 12,13 2,6' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-chat::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-book::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5C4 18.837 4.26339 18.2011 4.73223 17.7322C5.20107 17.2634 5.83696 17 6.5 17H20' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M6.5 2H20V22H6.5C5.83696 22 5.20107 21.7366 4.73223 21.2678C4.26339 20.7989 4 20.163 4 19.5V4.5C4 3.83696 4.26339 3.20107 4.73223 2.73223C5.20107 2.26339 5.83696 2 6.5 2V2Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-privacy::before {
    content: '';
    width: 18px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-backup::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='14,2 14,8 20,8' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='16' y1='13' x2='8' y2='13' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='16' y1='17' x2='8' y2='17' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='10,9 9,9 8,9' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-monitor::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3Z' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='8,21 16,21' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='12,17 12,21' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-clock::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Cpolyline points='12,6 12,12 16,14' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-network::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 8L23 8' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M1 16L23 16' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M6 2V6' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M10 2V6' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M14 2V6' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M18 2V6' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M6 18V22' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M10 18V22' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M14 18V22' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M18 18V22' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-biometric::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10C13.1046 10 14 9.10457 14 8C14 6.89543 13.1046 6 12 6C10.8954 6 10 6.89543 10 8C10 9.10457 10.8954 10 12 10Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 14C9.79086 14 8 15.7909 8 18V20H16V18C16 15.7909 14.2091 14 12 14Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M20 21V19C20 16.7909 18.2091 15 16 15' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 21V19C4 16.7909 5.79086 15 8 15' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-windows::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3H10V10H3V3Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M14 3H21V10H14V3Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M14 14H21V21H14V14Z' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M3 14H10V21H3V14Z' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-apple::before {
    content: '';
    width: 16px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20.94C12 20.94 18.39 14.54 18.39 8.5C18.39 4.46 15.44 1.5 12 1.5C8.56 1.5 5.61 4.46 5.61 8.5C5.61 14.54 12 20.94 12 20.94Z' stroke='currentColor' stroke-width='2'/%3E%3Ccircle cx='12' cy='8' r='3' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-linux::before {
    content: '';
    width: 18px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7V4C4 2.89543 4.89543 2 6 2H18C19.1046 2 20 2.89543 20 4V7' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M20 21V8H4V21C4 21.5523 4.44772 22 5 22H19C19.5523 22 20 21.5523 20 21Z' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Color Variables */
:root {
    --primary-blue: #1e40af;
    --light-blue: #3b82f6;
    --dark-blue: #1e3a8a;
    --accent-blue: #60a5fa;
    --white: #ffffff;
    --light-gray: #f8fafc;
    --gray: #64748b;
    --dark-gray: #334155;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Navigation */
.navbar {
    background: var(--white);
    box-shadow: var(--shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 15px 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    height: 40px;
    width: auto;
}

.brand-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.nav-link:hover {
    color: var(--primary-blue);
    background-color: var(--light-gray);
}

/* Navigation Restore Button - Hidden by default */
.nav-restore {
    display: none;
}

/* Show restore button when body has restore-active class */
.restore-active .nav-restore {
    display: flex;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--primary-blue);
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text h1 {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero-text h2 {
    font-size: 24px;
    color: var(--gray);
    margin-bottom: 24px;
    font-weight: 400;
}

.hero-description {
    font-size: 18px;
    color: var(--dark-gray);
    margin-bottom: 32px;
    line-height: 1.7;
}

/* Restore Section - Hidden by default */
.restore-section {
    display: none;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 32px;
    text-align: center;
}

.restore-active .restore-section {
    display: block;
}

.btn-restore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--primary-blue);
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}

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

.restore-text {
    color: var(--white);
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    background: var(--dark-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    box-shadow: var(--shadow);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Phone Mockup */
.wallet-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-mockup {
    width: 280px;
    height: 560px;
    background: linear-gradient(145deg, var(--primary-blue), var(--light-blue));
    border-radius: 40px;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.phone-mockup::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.screen {
    width: 100%;
    height: 100%;
    background: var(--white);
    border-radius: 25px;
    padding: 20px;
    overflow: hidden;
}

.wallet-interface {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wallet-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--light-gray);
}

.wallet-logo {
    width: 32px;
    height: 32px;
}

.wallet-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-blue);
}

.balance-card {
    background: linear-gradient(135deg, var(--light-gray), var(--white));
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.balance-label {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 8px;
}

.balance-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 4px;
}

.balance-usd {
    font-size: 14px;
    color: var(--gray);
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.action-btn {
    background: var(--primary-blue);
    color: var(--white);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

/* Features Section */
.features {
    padding: 100px 0;
    background: var(--white);
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--gray);
    text-align: center;
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.feature-card {
    background: var(--white);
    padding: 32px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--light-gray);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--primary-blue);
}

.feature-icon .icon {
    width: 48px;
    height: 48px;
    font-size: 48px;
}

.feature-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.feature-card p {
    color: var(--dark-gray);
    line-height: 1.6;
}

/* Download Section */
.download {
    padding: 100px 0;
    background: var(--light-gray);
}

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

.download-card {
    background: var(--white);
    padding: 40px 32px;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.platform-icon {
    font-size: 64px;
    margin-bottom: 24px;
    color: var(--primary-blue);
}

.platform-icon .icon {
    width: 64px;
    height: 64px;
    font-size: 64px;
}

.download-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.download-card p {
    color: var(--dark-gray);
    margin-bottom: 24px;
    line-height: 1.6;
}

.btn-download {
    background: var(--primary-blue);
    color: var(--white);
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-download:hover {
    background: var(--dark-blue);
    transform: translateY(-2px);
}

/* Stats Section */
.stats {
    padding: 80px 0;
    background: var(--primary-blue);
    color: var(--white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--white);
}

.stat-label {
    font-size: 16px;
    opacity: 0.9;
}

/* CTA Section */
.cta {
    padding: 100px 0;
    background: var(--white);
    text-align: center;
}

.cta h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.cta p {
    font-size: 18px;
    color: var(--gray);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: var(--dark-blue);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--white);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--white);
}

.footer-section ul li span {
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
}

.footer-logo {
    height: 40px;
    margin-bottom: 16px;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text h1 {
        font-size: 36px;
    }
    
    .hero-text h2 {
        font-size: 20px;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .phone-mockup {
        width: 240px;
        height: 480px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .download-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-text h1 {
        font-size: 28px;
    }
    
    .features,
    .download,
    .cta {
        padding: 60px 0;
    }
    
    .stats {
        padding: 50px 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .stat-number {
        font-size: 36px;
    }
}