/* TSK SMS PRO — Clean layout (no banners/images) */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; max-width: 100vw; margin: 0; }

/* Landing page */
.landing-body {
    min-height: 100vh;
    background: #050816;
    color: #f1f5f9;
    font-family: 'Outfit', sans-serif;
}
.landing-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 0%, rgba(34,211,238,.1), transparent 55%),
        radial-gradient(ellipse 60% 45% at 90% 10%, rgba(168,85,247,.1), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.landing-page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 16px 40px;
    box-sizing: border-box;
}
.landing-header { text-align: center; margin-bottom: 28px; }
.landing-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 5vw, 2rem);
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.2;
    background: linear-gradient(135deg, #22d3ee, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-subtitle {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.landing-subtitle i { color: #22d3ee; }

.landing-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.landing-feat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(12,18,41,0.85);
    border: 1px solid rgba(255,255,255,0.06);
}
.landing-feat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.landing-feat-icon.c1 { background: rgba(34,211,238,0.12); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }
.landing-feat-icon.c2 { background: rgba(168,85,247,0.12); color: #a855f7; border: 1px solid rgba(168,85,247,0.2); }
.landing-feat-icon.c3 { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.landing-feat-text { min-width: 0; flex: 1; }
.landing-feat-text strong { display: block; font-size: 14px; margin-bottom: 2px; color: #f1f5f9; line-height: 1.3; }
.landing-feat-text span { display: block; font-size: 12px; color: #94a3b8; line-height: 1.4; }

.landing-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6, #d946ef);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    min-height: 52px;
    box-sizing: border-box;
}
.landing-footer {
    margin: 20px 0 0;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
}
.landing-footer a { color: #22d3ee; text-decoration: none; font-weight: 600; }

/* App pages */
.hero-matrix-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.service-instant-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }

.page { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: block !important; width: 100%; }
.visual-panel { display: none !important; }
.form-panel { padding: 20px 16px !important; width: 100%; box-sizing: border-box; }
.form-card { max-width: 100% !important; padding: 24px 20px !important; border-radius: 14px !important; box-sizing: border-box; }

.field input, .dropdown-trigger-box, .dropdown-search-input, .btn-action-master, .btn-login, .btn { min-height: 48px; font-size: 16px; box-sizing: border-box; }
.premium-recharge-card, .activation-card, .card { padding: 18px 14px !important; border-radius: 14px !important; box-sizing: border-box; }
.page-buy.workspace-content { display: flex !important; flex-direction: column !important; }

@media (min-width: 768px) {
    .landing-page { padding: 48px 24px 56px; }
    .app-container .main-workspace { max-width: 720px; margin: 0 auto; width: 100%; }
}