*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: Inter, Segoe UI, Arial, sans-serif;
    background:#ffffff;
    color:#1f2937;
    line-height:1.6;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

header{
    border-bottom:1px solid #e5e7eb;
    background:#ffffff;
    position:sticky;
    top:0;
    z-index:100;
}

.header-container{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{
    height:70px;
}

nav{
    display:flex;
    align-items:center;
    gap:28px;
}

nav a{
    text-decoration:none;
    color:#374151;
    font-weight:500;
}

nav a:hover{
    color:#111827;
}

.login-btn{
    padding:10px 18px;
    border-radius:10px;
    background:#111827;
    color:white !important;
}


footer{
    border-top:1px solid #e5e7eb;
    margin-top:80px;
    padding:36px 0;
    color:#6b7280;
}


.footer-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
}

.footer-links{
    display:flex;
    justify-content:center;
    gap:18px;
}

.footer-contact{
    display:flex;
    justify-content:flex-end;
    gap:18px;
}

.footer-bottom{
    grid-column:1 / -1;
    text-align:center;
    font-size:14px;
    margin-top:14px;
}


.footer-brand{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.footer-brand strong{
    color:#111827;
    font-size:18px;
}

.footer-brand span{
    font-size:14px;
}



.footer-links a{
    color:#6b7280;
    text-decoration:none;
    font-size:14px;
}

.footer-links a:hover{
    color:#111827;
}



.footer-contact a{
    color:#6b7280;
    text-decoration:none;
    font-size:14px;
}

.footer-contact a:hover{
    color:#111827;
}



html{
    overflow-y:scroll;
}


/* ================= HOME ================= */

.hero{
    padding:60px 0 42px;
    text-align:center;
}

.hero h1{
    font-size:54px;
    line-height:1.1;
    margin-bottom:24px;
    color:#111827;
}

.hero p{
    max-width:700px;
    margin:0 auto 32px;
    font-size:20px;
    color:#6b7280;
}

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

.home-bottom{
    padding:56px 0 0;
    text-align:center;
}

.home-bottom .hero-buttons{
    justify-content:center;
}

.page-home footer{
    margin-top:56px;
}

.btn-primary{
    display:inline-block;
    padding:14px 24px;
    border-radius:12px;
    background:#4f46e5;
    color:white;
    text-decoration:none;
    font-weight:600;
}

.btn-secondary{
    display:inline-block;
    padding:14px 24px;
    border-radius:12px;
    border:1px solid #d1d5db;
    color:#111827;
    text-decoration:none;
    font-weight:600;
}

.services{
    padding:24px 0 0;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.service-card{
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:28px;
    background:#ffffff;
}

.service-card h2{
    margin-bottom:14px;
    font-size:28px;
}

.service-card p{
    color:#6b7280;
}

.hero h1 span{
    display:block;
}


.service-card{
    position:relative;
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.service-card:nth-child(1){
    border-top:4px solid #7c3aed;
}

.service-card:nth-child(2){
    border-top:4px solid #16a34a;
}

.service-card:nth-child(3){
    border-top:4px solid #2563eb;
}

.service-card:nth-child(1) h2{
    color:#7c3aed;
}

.service-card:nth-child(2) h2{
    color:#16a34a;
}

.service-card:nth-child(3) h2{
    color:#2563eb;
}



/* ================= LOGIN ================= */

.login-page{
    min-height:auto;
    background:#eef2f7;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:36px 24px;
    margin-top:150px;
    margin-bottom:150px;
}

.login-card{
    width:100%;
    max-width:1040px;
    min-height:260px;
    background:#ffffff;
    border-radius:28px;
    padding:42px 48px 36px;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    column-gap:80px;
}

.login-left{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.login-logo{
    width:96px;
    margin-bottom:28px;
}

.login-left h1{
    font-size:44px;
    font-weight:400;
    line-height:1.1;
    color:#111827;
    margin-bottom:18px;
}

.login-left p{
    color:#374151;
    font-size:16px;
}

.login-right{
    display:flex;
    flex-direction:column;
    padding-top:0px;
}

.login-input{
    width:100%;
    height:56px;
    border:1px solid #9ca3af;
    border-radius:4px;
    padding:0 14px;
    font-size:16px;
    margin-bottom:16px;
}

.login-input:focus{
    outline:none;
    border:2px solid #111827;
}

.login-actions{
    margin-top:64px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:22px;
}

.forgot-link,
.create-account{
    color:#111827;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
}

.next-btn{
    border:0;
    border-radius:999px;
    padding:12px 28px;
    background:#111827;
    color:white;
    font-weight:700;
    cursor:pointer;
}

.next-btn:hover{
    opacity:.9;
}



@media(max-width:900px){
    .login-card{
        grid-template-columns:1fr;
        gap:32px;
        padding:34px;
    }

    .login-right{
        padding-top:0;
    }

    .login-actions{
        margin-top:32px;
        flex-wrap:wrap;
    }

    .login-left h1{
        font-size:34px;
    }
}



.form-error{
    color:#dc2626;
    font-size:14px;
    font-weight:600;
    margin-top:-10px;
}


.form-success{
    color:#15803d;
    font-size:14px;
    font-weight:600;
    margin-top:-4px;
}

@media(max-width:900px){

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:18px;
    }

    .hero-buttons{
        flex-direction:column;
    }

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


.password-field{
    position:relative;
    width:100%;
}

.password-field .login-input{
    padding-right:48px;
}

.password-toggle{
    position:absolute;
    right:12px;
    top:18px;
    border:0;
    background:transparent;
    cursor:pointer;
    font-size:16px;
}



/* ================= DASHBOARD ================= */

.dashboard-page{
    padding:70px 0 0;
}

.dashboard-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:34px;
}

.dashboard-head h1{
    font-size:46px;
    line-height:1.1;
    color:#111827;
    margin-bottom:10px;
}

.dashboard-head p{
    color:#6b7280;
    font-size:18px;
}

.dashboard-logout{
    text-decoration:none;
    color:#111827;
    border:1px solid #d1d5db;
    border-radius:999px;
    padding:10px 18px;
    font-weight:600;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.dashboard-card{
    min-width:0;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:28px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:transform .2s ease, box-shadow .2s ease;
}

.dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.dashboard-card h2{
    font-size:28px;
}

.dashboard-card p{
    color:#6b7280;
}

.dashboard-cloud{
    border-top:4px solid #7c3aed;
}

.dashboard-cloud h2{
    color:#7c3aed;
}

.dashboard-vault{
    border-top:4px solid #16a34a;
}

.dashboard-vault h2{
    color:#16a34a;
}

.dashboard-dns{
    border-top:4px solid #2563eb;
}

.dashboard-dns h2{
    color:#2563eb;
}

.dashboard-status{
    color:#6b7280;
    font-size:14px;
    font-weight:700;
    margin-top:8px;
}

.dashboard-btn{
    width:max-content;
    margin-top:auto;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid #d1d5db;
    color:#111827;
    text-decoration:none;
    font-weight:700;
}

.account-section{
    margin-top:42px;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:28px;
    background:#f9fafb;
}

.account-section h2{
    font-size:28px;
    color:#111827;
    margin-bottom:18px;
}

.account-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.account-action{
    padding:10px 18px;
    border-radius:999px;
    border:1px solid #d1d5db;
    background:#ffffff;
    color:#111827;
    text-decoration:none;
    font-weight:700;
}

.account-muted{
    color:#6b7280;
    font-size:15px;
}

.page-dashboard footer{
    margin-top:56px;
}

@media(max-width:900px){
    .dashboard-head{
        flex-direction:column;
    }

    .dashboard-head h1{
        font-size:38px;
    }

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



.twofa-card{
    max-width:720px;
    margin:0 auto;
    border:1px solid #e5e7eb;
    border-top:4px solid #111827;
    border-radius:22px;
    padding:34px;
    background:#ffffff;
}

.twofa-card h2{
    font-size:30px;
    color:#111827;
    margin-bottom:12px;
}

.twofa-card p{
    color:#6b7280;
    margin-bottom:18px;
}

.twofa-qr{
    margin:24px 0;
}

.twofa-qr img{
    width:220px;
    height:220px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:12px;
    background:#ffffff;
}

.twofa-secret{
    word-break:break-all;
    font-size:14px;
}

.twofa-form{
    max-width:360px;
}




/* ================= CLOUD DASHBOARD CARD ================= */

.cloud-plan-meta{
    margin-top:14px;
    width:100%;
}

.cloud-plan-row{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:18px;
    align-items:center;
    line-height:1.7;
    width:100%;
}

.cloud-plan-row span{
    color:#6b7280;
}

.cloud-plan-row strong{
    color:#6b7280;
    text-align:right;
    white-space:nowrap;
    justify-self:end;
}

.cloud-card-actions{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap;
    align-items:center;
    margin-top:auto;
    padding-top:8px;
    width:100%;
}

.cloud-card-actions .dashboard-btn{
    margin-top:0;
    white-space:nowrap;
    padding:9px 14px;
    font-size:15px;
}


.cloud-card-actions .dashboard-btn:last-child{
    margin-right:-5px;
}


@media(max-width:900px){
    .cloud-card-actions{
        flex-wrap:wrap;
    }
}


.cloud-manage-action .account-action{
    white-space:nowrap;
}



/* ================= CLOUD PASSWORD PAGE ================= */

.cloud-password-card{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
}

.cloud-password-form{
    max-width:420px;
    margin-top:24px;
}

.cloud-password-form .next-btn{
    margin-top:12px;
}



/* ================= PRICING ================= */

.pricing-page{
    padding:80px 0 0px;
}

.pricing-head{
    text-align:center;
    margin-bottom:56px;
}

.pricing-head h1{
    font-size:48px;
    line-height:1.1;
    color:#111827;
    margin-bottom:16px;
}

.pricing-head p{
    max-width:680px;
    margin:0 auto;
    color:#6b7280;
    font-size:19px;
}

.pricing-section{
    margin-bottom:56px;
}

.pricing-section h2{
    font-size:32px;
    color:#111827;
    margin-bottom:20px;
}

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.pricing-grid.single{
    grid-template-columns:minmax(260px,420px);
}

.price-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-top:4px solid #e5e7eb;
    border-radius:18px;
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:transform .2s ease, box-shadow .2s ease;
}

.price-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.price-card strong{
    font-size:24px;
    color:#111827;
}

.price-card span{
    font-size:22px;
    font-weight:700;
    color:#111827;
}

.price-card small{
    color:#6b7280;
    font-size:14px;
    line-height:1.5;
}

.cloud-pricing .price-card{
    border-top-color:#7c3aed;
}

.vault-card{
    border-top-color:#16a34a;
}

.dns-pricing .price-card{
    border-top-color:#2563eb;
}

.pricing-note{
    margin:56px auto 0;
    max-width:760px;
    text-align:center;
    color:#6b7280;
    font-size:16px;
    padding:22px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f9fafb;
}

@media(max-width:900px){
    .pricing-page{
        padding:50px 0 20px;
    }

    .pricing-head h1{
        font-size:38px;
    }

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

    .pricing-grid.single{
        grid-template-columns:1fr;
    }
}


.page-pricing footer{
    margin-top:56px;
}





/* ================= CLOUD PAGE ================= */

.cloud-hero{
    padding:60px 0 42px;
    text-align:center;
}

.cloud-hero h1{
    font-size:54px;
    line-height:1.1;
    color:#111827;
    margin-bottom:22px;
}

.cloud-hero p{
    max-width:760px;
    margin:0 auto;
    color:#6b7280;
    font-size:20px;
}

.cloud-features{
    padding:26px 0 50px;
}

.cloud-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.cloud-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-top:4px solid #7c3aed;
    border-radius:18px;
    padding:26px;
    transition:transform .2s ease, box-shadow .2s ease;
}

.cloud-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.cloud-card h2{
    color:#7c3aed;
    font-size:24px;
    margin-bottom:12px;
}

.cloud-card p{
    color:#6b7280;
}

.cloud-benefits{
    padding:28px 0 50px;
}

.cloud-benefits h2{
    font-size:32px;
    color:#111827;
    margin-bottom:20px;
}

.cloud-benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.benefit-card{
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:22px;
    background:#f9fafb;
    color:#111827;
}

.cloud-corporate{
    padding:28px 0 0px;
}

.corporate-card{
    border:1px solid #e5e7eb;
    border-top:4px solid #7c3aed;
    border-radius:22px;
    padding:34px;
    background:#ffffff;

    display:grid;
    grid-template-columns:1fr auto;
    column-gap:40px;
    align-items:center;
}

.corporate-card h2{
    font-size:30px;
    color:#111827;
    margin-bottom:10px;
}

.corporate-card p{
    color:#6b7280;
    margin-bottom:18px;
}

.corporate-price{
    grid-column:2;
    grid-row:1 / 4;
    align-self:center;

    padding:12px 18px;
    border-radius:999px;
    background:#f3e8ff;
    color:#6d28d9;
    font-weight:700;
    white-space:nowrap;
}

.corporate-card ul{
    list-style:none;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:22px;
}

.corporate-card li{
    color:#374151;
}

.cloud-bottom{
    padding:56px 0 0;
    text-align:center;
}

.page-cloud footer{
    margin-top:56px;
}

@media(max-width:900px){
    .cloud-hero h1{
        font-size:38px;
    }

    .cloud-hero p{
        font-size:18px;
    }

    .cloud-grid,
    .cloud-benefits-grid{
        grid-template-columns:1fr;
    }

    .corporate-card{
        grid-template-columns:1fr;
    }

    .corporate-price{
        grid-column:auto;
        grid-row:auto;
        margin:22px 0 0;
    }

    .corporate-card ul{
        flex-direction:column;
        gap:8px;
    }
}


/* ================= CLOUD MANAGE PAGE ================= */

.cloud-manage-summary{
    display:grid;
    grid-template-columns:1fr auto;
    gap:32px;
    align-items:center;
}

.cloud-manage-info p{
    margin-top:10px;
    color:#111827;
}

.cloud-manage-action{
    display:flex;
    align-items:center;
    justify-content:center;
}

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

    .cloud-manage-action{
        justify-content:flex-start;
    }
}





/* ================= CLOUD CHANGE PLAN ================= */

.cloud-change-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:24px;
}

.cloud-change-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    min-width:0;
}

.cloud-change-card h3{
    font-size:22px;
    color:#111827;
    margin-bottom:8px;
}

.cloud-change-card p{
    color:#6b7280;
    font-size:14px;
    min-height:44px;
    margin-bottom:16px;
}

.cloud-change-card.is-current{
    border-top:4px solid #7c3aed;
}

.cloud-change-card.is-disabled{
    opacity:.65;
}

.cloud-change-button{
    cursor:pointer;
}

.cloud-change-badge{
    display:inline-block;
    padding:10px 16px;
    border-radius:999px;
    background:#f3f4f6;
    color:#6b7280;
    font-weight:700;
    font-size:14px;
}

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


.cloud-change-payment{
    font-size:14px;
    font-weight:700;
    color:#111827 !important;
    margin-top:8px;
    margin-bottom:14px;
    min-height:auto !important;
}

.cloud-change-form{
    margin:0;
}

.cloud-change-confirm{
    display:block;
    font-size:13px;
    line-height:1.5;
    color:#6b7280;
    margin-bottom:12px;
}

.cloud-change-confirm input{
    margin-right:6px;
}


/* ================= VAULT PAGE ================= */

.vault-hero{
    padding:60px 0 42px;
    text-align:center;
}

.vault-hero h1{
    font-size:54px;
    line-height:1.1;
    color:#111827;
    margin-bottom:22px;
}

.vault-hero p{
    max-width:760px;
    margin:0 auto;
    color:#6b7280;
    font-size:20px;
}

.vault-features{
    padding:26px 0 50px;
}

.vault-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.vault-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-top:4px solid #16a34a;
    border-radius:18px;
    padding:26px;
    transition:transform .2s ease, box-shadow .2s ease;
}

.vault-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.vault-card h2{
    color:#16a34a;
    font-size:24px;
    margin-bottom:12px;
}

.vault-card p{
    color:#6b7280;
}

.vault-benefits{
    padding:28px 0 50px;
}

.vault-benefits h2{
    font-size:32px;
    color:#111827;
    margin-bottom:20px;
}

.vault-benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.vault-access{
    padding:28px 0 0px;
}

.vault-access-card{
    border:1px solid #e5e7eb;
    border-top:4px solid #16a34a;
    border-radius:22px;
    padding:34px;
    background:#ffffff;

    display:grid;
    grid-template-columns:1fr auto;
    column-gap:40px;
    align-items:center;
}

.vault-access-card h2{
    font-size:30px;
    color:#111827;
    margin-bottom:10px;
}

.vault-access-card p{
    color:#6b7280;
    margin-bottom:18px;
}

.vault-access-card ul{
    list-style:none;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:22px;
}

.vault-access-card li{
    color:#374151;
}

.vault-price{
    grid-column:2;
    grid-row:1 / 4;
    align-self:center;

    padding:12px 18px;
    border-radius:999px;
    background:#dcfce7;
    color:#15803d;
    font-weight:700;
    white-space:nowrap;
}


.vault-bottom{
    padding:56px 0 0;
    text-align:center;
}

.page-vault footer{
    margin-top:56px;
}



@media(max-width:900px){
    .vault-hero h1{
        font-size:38px;
    }

    .vault-hero p{
        font-size:18px;
    }

    .vault-grid,
    .vault-benefits-grid{
        grid-template-columns:1fr;
    }

    .vault-access-card{
        grid-template-columns:1fr;
    }

    .vault-price{
        grid-column:auto;
        grid-row:auto;
        margin:22px 0 0;
    }

    .vault-access-card ul{
        flex-direction:column;
        gap:8px;
    }
}


/* ================= DNS PAGE ================= */

.dns-hero{
    padding:60px 0 42px;
    text-align:center;
}

.dns-hero h1{
    font-size:54px;
    line-height:1.1;
    color:#111827;
    margin-bottom:22px;
}

.dns-hero p{
    max-width:760px;
    margin:0 auto;
    color:#6b7280;
    font-size:20px;
}

.dns-features{
    padding:26px 0 50px;
}

.dns-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.dns-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-top:4px solid #2563eb;
    border-radius:18px;
    padding:26px;
    transition:transform .2s ease, box-shadow .2s ease;
}

.dns-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.dns-card h2{
    color:#2563eb;
    font-size:24px;
    margin-bottom:12px;
}

.dns-card p{
    color:#6b7280;
}

.dns-benefits{
    padding:28px 0 50px;
}

.dns-benefits h2{
    font-size:32px;
    color:#111827;
    margin-bottom:20px;
}

.dns-benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.dns-guard{
    padding:28px 0 0;
}

.dns-guard-card{
    border:1px solid #e5e7eb;
    border-top:4px solid #2563eb;
    border-radius:22px;
    padding:34px;
    background:#ffffff;

    display:grid;
    grid-template-columns:1fr auto;
    column-gap:40px;
    align-items:center;
}

.dns-guard-card h2{
    font-size:30px;
    color:#111827;
    margin-bottom:10px;
}

.dns-guard-card p{
    color:#6b7280;
    margin-bottom:18px;
}

.dns-guard-card ul{
    list-style:none;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:22px;
}

.dns-guard-card li{
    color:#374151;
}

.dns-price{
    grid-column:2;
    grid-row:1 / 4;
    align-self:center;

    padding:12px 18px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-weight:700;
    white-space:nowrap;
}

.dns-bottom{
    padding:56px 0 0;
    text-align:center;
}

.page-dns footer{
    margin-top:56px;
}

@media(max-width:900px){
    .dns-hero h1{
        font-size:38px;
    }

    .dns-hero p{
        font-size:18px;
    }

    .dns-grid,
    .dns-benefits-grid{
        grid-template-columns:1fr;
    }

    .dns-guard-card{
        grid-template-columns:1fr;
    }

    .dns-price{
        grid-column:auto;
        grid-row:auto;
        margin:22px 0 0;
    }

    .dns-guard-card ul{
        flex-direction:column;
        gap:8px;
    }
}




/* ================= COMPARISON PAGE ================= */

.comparison-hero{
    padding:60px 0 42px;
    text-align:center;
}

.comparison-hero h1{
    font-size:54px;
    line-height:1.1;
    color:#111827;
    margin-bottom:22px;
}

.comparison-hero p{
    max-width:760px;
    margin:0 auto;
    color:#6b7280;
    font-size:20px;
}

.comparison-section{
    padding:32px 0 0px;
}

.comparison-section h2{
    font-size:32px;
    color:#111827;
    margin-bottom:20px;
}

.comparison-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.comparison-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:28px;
    transition:transform .2s ease, box-shadow .2s ease;
}

.comparison-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.comparison-card h3{
    font-size:24px;
    color:#111827;
    margin-bottom:12px;
}

.comparison-card p{
    color:#6b7280;
}

.highlight-cloud{
    border-top:4px solid #7c3aed;
}

.highlight-vault{
    border-top:4px solid #16a34a;
}

.highlight-dns{
    border-top:4px solid #2563eb;
}

.highlight-cloud h3{
    color:#7c3aed;
}

.highlight-vault h3{
    color:#16a34a;
}

.highlight-dns h3{
    color:#2563eb;
}

.comparison-note-section{
    padding:56px 0 0;
}

.comparison-note{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
    color:#6b7280;
    font-size:16px;
    padding:22px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f9fafb;
}

.page-comparison footer{
    margin-top:56px;
}

@media(max-width:900px){
    .comparison-hero h1{
        font-size:38px;
    }

    .comparison-hero p{
        font-size:18px;
    }

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



/* ================= ABOUT PAGE ================= */

.about-hero{
    padding:60px 0 42px;
    text-align:center;
}

.about-hero h1{
    font-size:54px;
    line-height:1.1;
    color:#111827;
    margin-bottom:22px;
}

.about-hero p{
    max-width:760px;
    margin:0 auto;
    color:#6b7280;
    font-size:20px;
}

.about-section{
    padding:26px 0 0;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.about-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-top:4px solid #111827;
    border-radius:18px;
    padding:28px;
}

.about-card h2{
    font-size:26px;
    color:#111827;
    margin-bottom:14px;
}

.about-card p,
.about-card li{
    color:#6b7280;
}

.about-card ul{
    list-style:none;
}

.about-card li{
    margin-bottom:8px;
}

.about-note-section{
    padding:56px 0 0;
}

.about-note{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
    color:#6b7280;
    font-size:16px;
    padding:22px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f9fafb;
}

.page-about footer{
    margin-top:56px;
}

@media(max-width:900px){
    .about-hero h1{
        font-size:38px;
    }

    .about-hero p{
        font-size:18px;
    }

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




/* ================= LEGAL PAGES ================= */

.legal-page{
    padding:60px 0 0;
}

.legal-card{
    max-width:900px;
    margin:0 auto;
    border:1px solid #e5e7eb;
    border-top:4px solid #111827;
    border-radius:22px;
    padding:42px;
    background:#ffffff;
}

.legal-card h1{
    font-size:42px;
    line-height:1.1;
    color:#111827;
    margin-bottom:22px;
}

.legal-card h2{
    font-size:24px;
    color:#111827;
    margin-top:32px;
    margin-bottom:12px;
}

.legal-card p{
    color:#6b7280;
    margin-bottom:14px;
}

.page-legal footer{
    margin-top:56px;
}

@media(max-width:900px){
    .legal-card{
        padding:28px;
    }

    .legal-card h1{
        font-size:34px;
    }
}




/* ================= MOBILE HEADER + FOOTER ================= */

@media(max-width:900px){

    .header-container{
        height:auto;
        padding-top:14px;
        padding-bottom:14px;
        flex-direction:column;
        gap:14px;
    }

    .logo img{
        height:64px;
    }

    nav{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
        gap:14px 18px;
    }

    nav a{
        font-size:14px;
    }

    .login-btn{
        padding:9px 16px;
    }

.footer-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
}

.footer-links,
.footer-contact{
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 18px;
}

.footer-bottom{
    margin-top:0;
}
}

/* ================= CLOUD BUY PAGE ================= */

.cloud-buy-card{
    cursor:pointer;
    position:relative;
    min-height:190px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto;
    column-gap:24px;
    row-gap:6px;
    align-items:center;
}

.cloud-buy-card input[type="radio"]{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:start;
}

.cloud-buy-card h2{
    grid-column:1;
    grid-row:1;
    align-self:end;
    margin:0;
}

.cloud-buy-card p{
    grid-column:1;
    grid-row:2;
    margin:0;
    align-self:start;
}

.cloud-buy-prices{
    grid-column:2;
    grid-row:1 / 4;
    justify-self:end;
    align-self:center;
    text-align:right;
    margin-top:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.cloud-buy-card.is-selected{
    border-color:#7c3aed;
    box-shadow:0 18px 40px rgba(124,58,237,.12);
}


.cloud-buy-prices span{
    font-size:15px;
    font-weight:700;
    color:#111827;
}

.cloud-buy-prices span:first-child{
    color:#7c3aed;
}

.cloud-buy-prices span:last-child{
    color:#6b7280;
}

.cloud-billing-actions .account-action{
    cursor:pointer;
}

.cloud-billing-actions .account-action.is-selected{
    border-color:#7c3aed;
    box-shadow:0 10px 24px rgba(124,58,237,.10);
}

.cloud-selected-summary{
    margin-top:18px;
    padding:16px 18px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#ffffff;
    color:#374151;
}

.cloud-selected-summary strong{
    color:#111827;
}

#cloudPayButton:disabled{
    opacity:.45;
    cursor:not-allowed !important;
}


/* ================= CLOUD PAYMENT PROCESSING OVERLAY ================= */

.cloud-processing-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.cloud-processing-overlay.is-visible{
    display:flex;
}

.cloud-processing-box{
    width:min(520px,100%);
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:36px;
    text-align:center;
    box-shadow:0 24px 70px rgba(15,23,42,.14);
}

.cloud-processing-box h2{
    color:#111827;
    font-size:28px;
    margin:18px 0 12px;
}

.cloud-processing-box p{
    color:#4b5563;
    line-height:1.7;
    margin:0 0 12px;
}

.cloud-processing-small{
    font-size:14px;
    color:#6b7280 !important;
}

.cloud-spinner{
    width:58px;
    height:58px;
    border-radius:50%;
    border:5px solid #e5e7eb;
    border-top-color:#7c3aed;
    margin:0 auto;
    animation:cloudSpin .9s linear infinite;
}

@keyframes cloudSpin{
    to{
        transform:rotate(360deg);
    }
}

.cloud-danger-button{
    border-color:#fecaca !important;
    color:#991b1b !important;
    background:#fff !important;
}

.cloud-danger-button:hover{
    background:#fef2f2 !important;
    border-color:#fca5a5 !important;
}

.cloud-cancel-form{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    margin:0;
}

.cloud-cancel-confirm{
    margin-bottom:0;
    text-align:right;
    max-width:320px;
}

@media(max-width:900px){
    .cloud-cancel-form{
        align-items:flex-start;
    }

    .cloud-cancel-confirm{
        text-align:left;
        max-width:none;
    }
}

.cloud-cancel-warning{
    margin:22px 0;
    padding:16px 18px;
    border:1px solid #fecaca;
    border-radius:16px;
    background:#fef2f2;
    color:#991b1b;
    font-size:14px;
    line-height:1.7;
}

.cloud-cancel-warning strong{
    color:#7f1d1d;
}