/* Brand skin for the landing page. Loaded AFTER the page's inline <style>.
   Scoped under body.landing-page. Mock: redesign/site_.pdf page 2. */

.landing-page .nav { background: rgba(255,255,255,0.96); }
.landing-page .nav-logo img { height: 30px; width: auto; }
.landing-page .nav-btn-ghost { color: var(--color-text, #1d1d1f); }
.landing-page .nav-btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.landing-page .nav-btn-fill { background: var(--color-accent); color: #fff; }
.landing-page .nav-btn-fill:hover { background: var(--color-accent-hover); }

/* Hero: brand gradient, light first line + bold emphasised line, bars rising at the sides. */
.landing-page .hero {
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    /* The designer's hero gradient (page 2 of the mock): left to right, eased from the brand blue to deep navy. */
    background: linear-gradient(90deg, #485caa 0%, #3d4f97 12.5%, #2c3979 31%, #1a235a 50%, #0b1140 65%, #00032c 75.7%, #00032c 100%);
    color: #fff;
}
.landing-page .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('/images/brand/deco-hero.svg') center bottom / cover no-repeat;
}
.landing-page .hero-content { position: relative; z-index: 1; }
.landing-page .hero h1 {
    font-weight: 300;
    letter-spacing: -1px;
    color: #fff;
}
.landing-page .hero h1 em {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: #fff;
}
.landing-page .hero p { color: rgba(255,255,255,0.88); }

.landing-page .btn { font-weight: 600; }
.landing-page .btn-primary {
    background: var(--color-action);
    color: var(--color-on-action);
    font-weight: 700;
}
.landing-page .btn-primary:hover { background: var(--color-action-hover); }
.landing-page .btn-secondary {
    background: var(--color-accent);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35);
}
.landing-page .btn-secondary:hover { background: color-mix(in srgb, var(--color-accent) 80%, white); }

.landing-page .section-title { color: var(--color-accent); font-weight: 600; }
.landing-page .section-subtitle { color: var(--color-accent); opacity: 0.85; }

.landing-page .feature-card { background: var(--color-bg, #f5f5f7); }
.landing-page .feature-icon { background: var(--color-accent); color: var(--color-action); }
.landing-page .feature-card h3 { color: var(--color-accent); }
.landing-page .feature-card p { color: var(--color-text-secondary, #6e6e73); }

.landing-page .apps-section {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-accent) 16%, #ffffff);
}
.landing-page .apps-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url('/images/brand/deco-apps.svg') left center / cover no-repeat;
}
.landing-page .apps-section .section-inner { position: relative; z-index: 1; }
.landing-page .app-card h3 { color: var(--color-accent); }
.landing-page .app-icon-notes { background: var(--color-brand-purple); color: #fff; }
.landing-page .app-icon-directory { background: var(--color-action); color: var(--color-on-action); }

@media (max-width: 600px) {
    .landing-page .hero::after { opacity: 0.7; }
    .landing-page .apps-section::before { display: none; }
}
@media print {
    .landing-page .hero::after,
    .landing-page .apps-section::before { display: none; }
}