.landing { min-height: 100vh; background: radial-gradient(circle at 77% 0, #dcece3 0, transparent 34rem), #f8fbf9; }
.marketing-nav, .hero, .section { max-width: 1180px; margin: auto; padding-left: 2rem; padding-right: 2rem; }
.marketing-nav { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.hero { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 3rem; padding-top: 5.5rem; padding-bottom: 5rem; }
.hero h1 { max-width: 680px; margin-bottom: 1.25rem; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.06em; }
.hero p { max-width: 560px; font-size: 1.12rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-points { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-top: 2rem; color: var(--color-muted); font-size: .9rem; }
.preview { border: 1px solid rgba(255,255,255,.8); border-radius: 24px; padding: 1rem; background: rgba(255,255,255,.72); box-shadow: 0 24px 60px rgba(19, 69, 48, .16); backdrop-filter: blur(12px); }
.preview-bar { display: flex; align-items: center; justify-content: space-between; padding: .4rem .2rem 1rem; }
.preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.section-heading { max-width: 600px; margin-bottom: 2rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.app-shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 1.25rem .85rem; overflow-y: auto; color: #d6e4dc; background: #10251d; }
.sidebar .brand { color: white; }
.nav-group { margin-top: 1.8rem; }
.nav-label { display: block; padding: 0 .7rem .5rem; color: #88a298; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .66rem .7rem; margin: .15rem 0; border-radius: var(--radius-sm); color: #d6e4dc; font-size: .92rem; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.12); }
.nav-item .nav-icon { width: 1.25rem; text-align: center; }
.app-main { min-width: 0; }
.app-header { position: sticky; z-index: 3; top: 0; display: flex; height: 74px; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2rem; border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); }
.header-actions { display: flex; align-items: center; gap: .85rem; }
.page-content { max-width: 1440px; margin: auto; padding: 2rem; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading h1 { margin-bottom: .3rem; font-size: 1.75rem; letter-spacing: -.035em; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .8fr); gap: 1.25rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.two-col { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.25rem; }
@media (max-width: 1024px) { .hero { grid-template-columns: 1fr; padding-top: 3rem; } .feature-grid { grid-template-columns: 1fr 1fr; } .dashboard-grid, .two-col { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .marketing-nav, .hero, .section { padding-left: 1rem; padding-right: 1rem; } .marketing-nav { height: 68px; } .marketing-nav .ghost:not(.language) { display: none; } .hero { padding-top: 2.5rem; } .feature-grid, .module-grid { grid-template-columns: 1fr; } .app-shell { display: block; } .sidebar { position: fixed; z-index: 10; width: 252px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .app-header { height: 64px; padding: 0 1rem; } .page-content { padding: 1.25rem 1rem; } .kpi-grid { grid-template-columns: 1fr 1fr; } .header-actions .profile-name, .header-actions .search { display: none; } }