/* App Marketing Pages — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=Merriweather:wght@700;900&display=swap');

.app-hero { margin-top: var(--nav-height); background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #1976D2 100%); padding: 72px 24px 56px; position: relative; overflow: hidden; }
.app-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.app-hero-inner { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; position:relative; z-index:1; }
.app-hero-text { color:#fff; }
.app-hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.12); backdrop-filter:blur(10px); padding:8px 18px; border-radius:50px; font-size:0.85rem; font-weight:500; margin-bottom:20px; border:1px solid rgba(255,255,255,0.15); }
.app-hero-text h1 { font-family:'Merriweather',serif; font-size:2.4rem; font-weight:900; line-height:1.25; margin-bottom:18px; }
.app-hero-text p { font-size:1.05rem; opacity:0.9; line-height:1.7; margin-bottom:28px; }
.app-hero-phones { display:flex; justify-content:center; align-items:flex-end; gap:16px; }
.app-phone { background:#fff; border-radius:24px; padding:6px; box-shadow:0 20px 56px rgba(0,0,0,0.2); transition:transform 0.3s; }
.app-phone:hover { transform:translateY(-4px); }
.app-phone img { width:200px; border-radius:20px; display:block; }
.app-phone.small { transform:scale(0.85) translateY(16px); }
.btn-appstore { display:inline-flex; align-items:center; gap:10px; background:rgba(0,0,0,0.85); color:#fff; padding:14px 28px; border-radius:12px; text-decoration:none; font-weight:600; transition:all 0.2s; font-size:1rem; }
.btn-appstore:hover { background:rgba(0,0,0,0.95); transform:translateY(-2px); color:#fff; }
.app-features { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:var(--max-width); margin:0 auto; }
.app-feature-card { background:var(--card); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:transform 0.3s,box-shadow 0.3s; }
.app-feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.app-feature-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
.app-feature-card h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; color:var(--primary-dark); }
.app-feature-card p { color:var(--text-dim); font-size:0.92rem; line-height:1.6; margin:0; }
.app-feature-row { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.app-feature-row.reverse { direction:rtl; }
.app-feature-row.reverse > * { direction:ltr; }
.app-feature-row h3 { font-family:'Merriweather',serif; font-size:1.6rem; font-weight:700; color:var(--primary); margin-bottom:14px; line-height:1.3; }
.app-feature-row p { color:var(--text-dim); font-size:1rem; margin-bottom:20px; line-height:1.7; }
.app-feature-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.app-feature-list li { display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; color:var(--text); }
.app-feature-list .fi { flex-shrink:0; width:26px; height:26px; border-radius:7px; background:rgba(11,61,145,0.07); display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--accent); font-weight:700; }
.app-phone-showcase { display:flex; justify-content:center; }
.app-phone-showcase img { width:260px; border-radius:24px; box-shadow:0 16px 48px rgba(0,0,0,0.12); }
.app-privacy { background:linear-gradient(135deg,#1A2332 0%,#0A1628 100%); color:#fff; border-radius:var(--radius); padding:56px; max-width:var(--max-width); margin:0 auto; }
.app-privacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.app-privacy h2 { font-family:'Merriweather',serif; font-size:1.8rem; margin-bottom:14px; }
.app-privacy p { opacity:0.8; line-height:1.7; margin-bottom:20px; }
.app-privacy-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.app-privacy-list li { display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; }
.app-privacy-list .chk { color:var(--accent); font-weight:700; flex-shrink:0; }
.app-cta { text-align:center; background:var(--bg-white); }
.app-cta h2 { font-family:'Merriweather',serif; font-size:2rem; color:var(--primary); margin-bottom:14px; }
.app-cta p { color:var(--text-dim); font-size:1.05rem; margin-bottom:28px; }
.app-tag { display:inline-flex; align-items:center; gap:6px; background:rgba(11,61,145,0.06); padding:6px 16px; border-radius:50px; font-size:0.82rem; font-weight:600; color:var(--primary); margin-bottom:14px; }

@media(max-width:768px) {
    .app-hero-inner { grid-template-columns:1fr; text-align:center; }
    .app-hero-text h1 { font-size:1.8rem; }
    .app-hero-phones { margin-top:32px; }
    .app-phone img { width:150px; }
    .app-features { grid-template-columns:1fr; }
    .app-feature-row,.app-feature-row.reverse { grid-template-columns:1fr; gap:32px; direction:ltr; }
    .app-phone-showcase { order:-1; }
    .app-phone-showcase img { width:200px; }
    .app-privacy { padding:32px 20px; }
    .app-privacy-grid { grid-template-columns:1fr; }
}