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

body {
    font-family: 'Inter', sans-serif;
    background: #fafbfc;
    color: #2c3e50;
    line-height: 1.5;
}
html, body { height:100%; }

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

/* Hero Section */
.hero {
    padding: 30px 0 50px;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.language-selector-top {
    text-align: right;
    margin-bottom: 2rem;
}

.language-selector-top select {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.language-selector-top select option {
    background: white;
    color: #2c3e50;
}

.cloud-icon {
    margin-bottom: 1.5rem;
}

.logo-image {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.hero h1 {
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto;
    font-weight: 400;
}

/* Products Section */
.products {
    padding: 60px 0;
    background: white;
}

.products h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: stretch;
}

.products-grid .product-card {
    flex: 1 1 300px;
    max-width: 350px;
    min-width: 280px;
}

.product-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    position: relative;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.product-icon {
    margin-bottom: 1rem;
}

.product-icon svg {
    width: 48px;
    height: 48px;
}

.product-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
}

.product-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
}

.product-card p {
    margin-bottom: 1.2rem;
    color: #5a6c7d;
    font-size: 0.95rem;
    line-height: 1.4;
}

.product-badges {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.product-limit {
    background: #e74c3c;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.85rem;
}

.product-free {
    background: #27ae60;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.85rem;
}

.product-status {
    background: #f39c12;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #667eea;
    color: white;
}
.btn-wide { display:block; width:100%; text-align:center; }

.btn-primary:hover {
    background: #5a67d8;
    transform: translateY(-1px);
}

.btn-disabled {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
}

/* Contact Section */
.contact {
    padding: 60px 0;
    background: #f8f9fa;
}

.contact h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.contact-form {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #e1e8ed;
}

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

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    color: #2c3e50;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d9e0;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.captcha {
    background: #f8f9ff;
    padding: 0.8rem;
    border-radius: 6px;
    border: 1px solid #667eea;
    margin-bottom: 1.2rem;
}

.captcha label {
    color: #667eea !important;
    font-weight: 600;
}

/* Footer */
footer {
    background: #2c3e50;
    color: #bdc3c7;
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

/* Footer structured content */
footer .footer-meta { font-size:.7rem; line-height:1.3; display:flex; flex-direction:column; gap:.9rem; }
footer .footer-columns { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; text-align:left; }
footer .footer-col { min-width:180px; display:flex; flex-direction:column; gap:.2rem; }
footer .footer-col strong { font-size:.8rem; letter-spacing:.5px; }
footer .footer-address { display:flex; flex-direction:column; gap:.15rem; }
footer .footer-links { display:flex; flex-direction:column; gap:.35rem; }
footer .footer-links a { color:#bdc3c7; text-decoration:none; font-weight:500; font-size:.7rem; }
footer .footer-links a:hover { color:#ffffff; text-decoration:underline; }
footer .footer-copy { text-align:center; font-size:.65rem; opacity:.85; }
@media (max-width:640px){ footer .footer-columns { flex-direction:column; align-items:flex-start; } }

/* Account / Login Section */
.account-section {
    padding: 50px 0;
    background: #f8f9fa;
}

.account-wrapper {
    max-width: 480px;
    margin: 0 auto;
}

/* Wide variant for panels (user/admin) */
.account-wrapper.wide { max-width:1100px; }

/* Fullscreen Panel Layout */
.panel-shell { display:flex; min-height:100vh; width:100%; background:#f5f7fa; }
.panel-shell.edge-to-edge { background:#f5f7fa; }
.panel-side { width:230px; background:#2c3e50; color:#bdc3c7; display:flex; flex-direction:column; padding:1.4rem 1rem; }
.panel-side .brand { font-size:1rem; font-weight:600; color:#fff; margin:0 0 1.2rem; letter-spacing:.5px; }
.panel-side .nav { list-style:none; margin:0 0 1.2rem; padding:0; }
.panel-side .nav li { margin-bottom:6px; }
.panel-side .nav a { display:block; padding:8px 12px; border-radius:8px; font-size:.75rem; text-decoration:none; color:#bdc3c7; background:rgba(255,255,255,0.05); transition:.25s; font-weight:500; }
.panel-side .nav a.active, .panel-side .nav a:hover { background:#667eea; color:#fff; }
.panel-main { flex:1; display:flex; flex-direction:column; }
.panel-header { background:#fff; border-bottom:1px solid #e1e8ed; padding:1rem 1.6rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.panel-header h1, .panel-header h2 { margin:0; font-size:1.25rem; font-weight:600; color:#2c3e50; }
.panel-actions { display:flex; gap:.5rem; }
.panel-content { flex:1; padding:1.8rem 2.2rem 2.4rem; }
.panel-shell.edge-to-edge .panel-content { padding:1.6rem 1.8rem 2rem; }
.panel-inner { max-width:100%; margin:0; }
.panel-inner.two-col { display:flex; gap:1.5rem; align-items:flex-start; }
.panel-inner.two-col .user-sidebar.secondary { width:210px; }
.tab-bar { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1.2rem; }
.tab-bar a { padding:6px 14px; border-radius:20px; font-size:.65rem; letter-spacing:.5px; background:#e1e8ed; color:#2c3e50; text-decoration:none; font-weight:600; transition:.25s; }
.tab-bar a.active, .tab-bar a:hover { background:#667eea; color:#fff; }
@media (max-width:820px){ .panel-shell { flex-direction:column; } .panel-side { width:100%; flex-direction:row; flex-wrap:wrap; gap:.6rem; } .panel-side .nav { display:flex; flex-wrap:wrap; } .panel-side .nav li { margin:0 6px 6px 0; } .panel-side .brand { width:100%; } }
@media (max-width:820px){ .panel-inner.two-col { flex-direction:column; } }

.account-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 2rem 2.2rem 2.4rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.account-card h2 {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: #2c3e50;
    font-weight: 600;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.account-form input[type=email],
.account-form input[type=password] {
    padding: 10px 12px;
    border: 1px solid #d1d9e0;
    border-radius: 8px;
    font-size: .9rem;
    transition: border-color .25s;
    font-family: inherit;
}

.account-form input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.form-error {
    color: #e74c3c;
    font-size: .8rem;
    margin-bottom: .2rem;
}

.account-links {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    font-size: .75rem;
}

.account-links a {
    color: #667eea;
    text-decoration: none;
}

.account-links a:hover { text-decoration: underline; }

.account-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

/* Auth standalone pages (register / reset) */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px 0;
}

.alert-success, .alert-error {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .8rem;
    margin-bottom: .9rem;
    line-height: 1.3;
}
.alert-success { background:#e6f8ed; color:#2d7a45; border:1px solid #c4ebd5; }
.alert-error { background:#fdecea; color:#c0392b; border:1px solid #f8d0cb; }

@media (max-width: 520px) {
    .account-card { padding: 1.5rem 1.6rem 1.9rem; }
    .account-links { flex-direction: column; gap: .4rem; align-items: center; }
    .account-actions { flex-direction: column; }
}

/* Hiring Section */
.hiring {
    padding: 60px 0;
    background: white;
}

.hiring h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.hiring-content {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.hiring-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    position: relative;
}

.hiring-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.job-icon {
    margin-bottom: 1rem;
}

.job-icon svg {
    width: 48px;
    height: 48px;
}

.hiring-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
}

.hiring-card p {
    margin-bottom: 1.2rem;
    color: #5a6c7d;
    font-size: 0.95rem;
    line-height: 1.4;
}

.job-benefits {
    margin-bottom: 1.2rem;
}

.benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
    color: #5a6c7d;
    font-size: 0.9rem;
}

.benefit-icon {
    font-size: 1.1rem;
}

.hiring .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hiring .btn-primary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Certifications Section */
.certifications {
    padding: 60px 0;
    background: #f8f9fa;
}

.certifications h2 {
    text-align: center;
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.certification-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.certification-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.cert-icon {
    margin-bottom: 1rem;
}

.cert-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.certification-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
}

.certification-card p {
    color: #5a6c7d;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        justify-content: center;
    }
    
    .products-grid .product-card {
        flex: 1 1 100%;
        max-width: 400px;
    }
    
    .contact-form {
        margin: 0 1rem;
    }
    
    .certifications-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .hiring-content {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 20px 0 40px;
    }
    
    .products, .contact {
        padding: 40px 0;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}

/* Content / Legal Pages */
.content-page { padding:60px 0; background:#f8f9fa; }
.content-card { background:#fff; border:1px solid #e1e8ed; border-radius:12px; padding:2.2rem 2.4rem 2.8rem; box-shadow:0 4px 15px rgba(0,0,0,.05); max-width:960px; margin:0 auto; }
.content-card h1 { font-size:1.9rem; margin:0 0 1rem; font-weight:600; color:#2c3e50; }
.content-card h2 { font-size:1.25rem; margin:1.9rem 0 .7rem; font-weight:600; color:#2c3e50; }
.content-card p { font-size:.95rem; color:#5a6c7d; margin:0 0 1rem; line-height:1.55; }
.legal-content .note { font-size:.85rem; color:#7f8c8d; margin-top:.2rem; }
.legal-list { margin:0 0 1.1rem 1.2rem; font-size:.9rem; color:#5a6c7d; line-height:1.5; }
.legal-list.small { font-size:.8rem; }
.legal-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.legal-table th, .legal-table td { padding:.55rem .6rem; border:1px solid #e1e8ed; text-align:left; vertical-align:top; }
.legal-table thead th { background:#f0f3f8; font-size:.7rem; letter-spacing:.5px; font-weight:600; }
.last-updated { margin-top:1.2rem; font-size:.7rem; color:#95a5a6; letter-spacing:.5px; }
.back-link { color:#667eea; text-decoration:none; font-weight:500; }
.back-link:hover { text-decoration:underline; }
@media (max-width:640px){ .content-card { padding:1.6rem 1.4rem 2.2rem; } .content-card h1 { font-size:1.55rem; } .content-card h2 { font-size:1.15rem; } .legal-table { font-size:.7rem; } }

/* =============================================
    Shared User/Admin Panel Styles
    (moved from inline <style> blocks)
    ============================================= */
.user-layout { display:flex; gap:1.5rem; }
.user-sidebar { width:210px; flex-shrink:0; }
.user-sidebar.secondary { width:210px; background:#eef2f6; border:1px solid #d9e2ea; padding:1rem .9rem; border-radius:12px; }
.user-sidebar.secondary .nav a { background:transparent; color:#2c3e50; }
.user-sidebar.secondary .nav a:hover, .user-sidebar.secondary .nav a.active { background:#667eea; color:#fff; }
.user-sidebar .nav { list-style:none; padding:0; margin:0; }
.user-sidebar .nav li { margin-bottom:6px; }
.user-sidebar .nav a { display:block; padding:10px 14px; background:#f0f3f8; border-radius:8px; font-size:.8rem; font-weight:500; color:#2c3e50; text-decoration:none; transition:.25s; }
.user-sidebar .nav a.active, .user-sidebar .nav a:hover { background:#667eea; color:#fff; }
.user-content { flex:1; }
.section-box { background:#fff; border:1px solid #e1e8ed; border-radius:12px; padding:1.4rem 1.6rem; margin-bottom:1.2rem; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.key-val { display:grid; grid-template-columns:180px 1fr; gap:.4rem .8rem; font-size:.8rem; }
.key-val .key { font-weight:600; color:#2c3e50; }
.badge-small { display:inline-block; padding:2px 8px; border-radius:12px; font-size:.55rem; letter-spacing:.5px; font-weight:600; background:#bdc3c7; color:#2c3e50; }
.badge-small.admin { background:#e91e63; color:#fff; }
.badge-small.verified { background:#27ae60; color:#fff; }
.danger-btn { background:#e74c3c !important; }
@media (max-width: 820px) { .user-layout { flex-direction:column; } .user-sidebar, .user-sidebar.secondary { width:100%; } .key-val { grid-template-columns:1fr; } }
@media (max-width:820px){ .panel-inner.two-col .user-sidebar.secondary { width:100%; display:block; } }

/* Admin panel table & actions */
.admin-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table th, .admin-table td { padding:8px 10px; border-bottom:1px solid #e1e8ed; text-align:left; }
.admin-table th { background:#f0f3f8; font-weight:600; font-size:.75rem; letter-spacing:.5px; color:#2c3e50; }
.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; }
.badge-admin { background:#e91e63; color:#fff; }
.badge-user { background:#bdc3c7; color:#2c3e50; }
.badge-verified { background:#27ae60; color:#fff; }
.actions-form { display:inline; }
.actions-form button { background:#667eea; color:#fff; border:none; padding:5px 10px; border-radius:6px; cursor:pointer; font-size:.65rem; margin-right:4px; }
.actions-form button.danger { background:#e74c3c; }
.actions-form button.secondary { background:#5a6c7d; }
.flash { padding:10px 14px; border-radius:8px; font-size:.75rem; margin-bottom:1rem; }
.flash-success { background:#e6f8ed; color:#2d7a45; border:1px solid #c4ebd5; }
.flash-error { background:#fdecea; color:#c0392b; border:1px solid #f8d0cb; }
.table-wrapper { overflow-x:auto; }

/* Cookie Banner */
.cookie-banner { position:fixed; left:0; right:0; bottom:0; background:rgba(44,62,80,.97); color:#ecf0f1; padding:1rem 0; z-index:9999; box-shadow:0 -2px 12px rgba(0,0,0,.25); font-size:.8rem; }
.cookie-banner .cookie-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; gap:1.2rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cookie-banner .cookie-text { flex:1 1 420px; line-height:1.4; }
.cookie-banner .cookie-text a { color:#aabfff; text-decoration:underline; }
.cookie-banner .cookie-actions { display:flex; gap:.6rem; }
.cookie-banner button { font-size:.7rem; }
@media (max-width:640px){ .cookie-banner .cookie-inner { flex-direction:column; align-items:stretch; } .cookie-banner .cookie-actions { justify-content:flex-end; } }