.applications-page { --app-pink:#f860ac; --app-muted:#786573; }
.app-hero { display:grid; grid-template-columns:1.12fr 1fr; gap:65px; align-items:center; padding-top:80px; padding-bottom:76px; }
.sales-v3 .app-hero h1 { font-size:clamp(46px,4.6vw,67px); line-height:1.08; letter-spacing:-2.8px; font-weight:500; margin-top:23px; }
.app-hero h1 span { color:#a42b65; }
.app-hero p,.app-python-section p,.app-laravel-section p { color:var(--app-muted); font-size:18px; line-height:1.8; margin-top:25px; }
.app-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.app-actions .text-button { display:inline-flex; gap:12px; align-items:center; font-size:15px; }
.app-hero>div>small { display:block; margin-top:22px; color:#987a8b; font-size:14px; line-height:1.7; }
.app-hero-art { background:#fbf0f7; padding:26px; border:1px solid #edd9e5; border-radius:14px; box-shadow:0 23px 50px #672b4a09; transform:rotate(1deg); }
.app-art-top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:26px; }
.app-art-top img { width:119px; height:auto; }
.app-art-top>span { font-size:12px; letter-spacing:1.2px; color:#a27b92; }
.app-project { display:flex; align-items:center; gap:14px; padding:22px 17px; background:#fff; border:1px solid #ebdce5; border-radius:9px; margin-top:12px; }
.app-project>span { display:grid; place-items:center; width:40px; height:40px; border-radius:9px; background:#f9e9f3; color:#ab6287; font-size:23px; flex-shrink:0; }
.app-project>div { flex:1; }
.app-project strong { font-weight:550; font-size:17px; }
.app-project small { display:block; margin-top:7px; color:#947a89; font-size:13px; }
.app-project em { color:#397653; background:#eaf5ed; border-radius:20px; padding:6px 9px; font-style:normal; font-size:12px; }
.app-art-bottom { display:flex; gap:22px; margin-top:25px; color:#946c82; font-size:13px; }
.app-art-bottom span { display:flex; align-items:center; gap:7px; }
.app-hero-art>p { font-size:12px; line-height:1.6; color:#a07e91; margin-top:19px; }
.app-outcomes { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-bottom:83px; }
.sales-v3 .app-outcomes h2 { font-size:26px; letter-spacing:-.8px; line-height:1.24; max-width:310px; }
.app-outcomes p { font-size:17px; line-height:1.8; color:var(--app-muted); margin-top:17px; }
.app-demo-band { background:#fbf6f9; border-block:1px solid #efe4eb; padding-block:76px; scroll-margin-top:30px; }
.app-section-heading { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:70px; margin-bottom:38px; }
.sales-v3 .app-section-heading h2,.sales-v3 .app-python-section h2,.sales-v3 .app-laravel-section h2 { font-size:44px; letter-spacing:-1.8px; line-height:1.12; margin-top:20px; }
.app-section-heading>p { color:var(--app-muted); font-size:17px; line-height:1.8; }
.app-demo { border:1px solid #e4cfdd; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 15px 40px #69324e06; }
.app-demo-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #eadce5; padding-inline:22px; background:#fffcfe; }
.app-demo-tabs button { padding:23px 12px; background:transparent; border:0; border-bottom:3px solid transparent; color:#96778a; font-size:16px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; }
.app-demo-tabs button[aria-selected=true] { border-bottom-color:var(--app-pink); color:#993b6b; }
.app-demo-tabs button .sales-icon { font-size:21px; }
.app-demo-body { display:grid; grid-template-columns:1fr 1.03fr; gap:45px; padding:44px; align-items:center; }
.sales-v3 .app-demo-story h3 { font-size:35px; letter-spacing:-1.2px; line-height:1.12; margin-top:21px; }
.app-demo-story>p { font-size:17px; color:var(--app-muted); line-height:1.8; margin-top:22px; }
.app-demo-story ul { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px; }
.app-demo-story li { display:flex; gap:9px; color:#866278; font-size:15px; line-height:1.7; }
.app-demo-story li .sales-icon { color:#a26387; }
.app-preview { border:1px solid #e6d6e0; border-radius:10px; background:#fffafc; padding:24px; min-width:0; }
.app-preview-top { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #eadde6; padding-bottom:20px; }
.app-preview-top>span { display:flex; align-items:center; gap:9px; font-size:15px; color:#966c83; }
.app-preview-top strong { font-weight:500; color:#5e4856; }
.app-preview-top>small { font-size:12px; color:#a68b9a; }
.app-runtime-fields { margin:24px 0 0; display:grid; gap:16px; }
.app-runtime-fields>div { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:12px; }
.app-runtime-fields dt { font-size:14px; color:#8b6c7e; }
.app-runtime-fields dd { font-size:14px; color:#654657; margin:0; background:#fff; border:1px solid #e7d6e0; padding:12px 13px; border-radius:5px; }
.app-preview-actions { display:flex; gap:9px; margin-top:24px; flex-wrap:wrap; }
.app-preview-actions>span { background:#f4e6ef; color:#94627d; padding:10px 12px; font-size:13px; border-radius:5px; }
.app-example-output { display:flex; gap:12px; padding:20px 15px; border:1px solid #d8e9da; border-radius:7px; background:#f2f8f2; margin-top:22px; }
.app-example-output>.sales-icon { color:#62906b; font-size:24px; }
.app-example-output strong { color:#52765a; font-size:16px; font-weight:500; }
.app-example-output p { font-size:13px; line-height:1.7; color:#78927d; margin-top:5px; }
.app-output-note { font-size:12px; color:#9e8292; line-height:1.7; margin-top:16px; }
.app-log-button { display:flex; align-items:center; gap:9px; color:#92617d; font-size:14px; border:0; background:none; padding:0; margin-top:22px; cursor:pointer; text-align:left; }
.app-log-button .sales-icon:last-child { margin-left:auto; }
.app-detail { padding-left:20px; margin:18px 0 0; font-size:14px; color:#85677a; line-height:1.9; }
.app-detail li+li { margin-top:9px; }
.app-demo-footer { padding:17px 28px; background:#faf5f8; border-top:1px solid #ede0e8; font-size:12px; line-height:1.7; color:#a08294; display:flex; gap:9px; }
.app-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.app-python-section,.app-laravel-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-block:84px; }
.app-env-art { padding:30px; background:#fbf0f7; border:1px solid #edd9e5; border-radius:12px; display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.app-env-art article { background:#fff; border:1px solid #e8d6e2; border-radius:8px; padding:25px 18px; }
.app-env-art article>span { font-size:30px; color:#b46b93; }
.app-env-art strong { display:block; font-size:17px; font-weight:500; margin-top:20px; }
.app-env-art small { display:block; font-size:13px; color:#96758a; line-height:1.6; margin-top:10px; }
.app-env-art article>p { font-size:12px; color:#8d6b80; margin-top:18px; line-height:1.6; }
.app-env-art>p { grid-column:1/-1; color:#a27b92; font-size:13px; line-height:1.7; margin-top:5px; }
.app-laravel-section { padding-top:25px; border-bottom:1px solid #ede2e9; }
.app-laravel-steps { display:grid; gap:18px; }
.app-laravel-steps article { display:flex; align-items:flex-start; gap:20px; padding:25px; border:1px solid #eadce5; border-radius:9px; }
.app-laravel-steps article>span { color:#b97498; background:#fbf0f6; border:1px solid #f0dbe7; padding:12px; font-size:25px; border-radius:8px; }
.sales-v3 .app-laravel-steps h3 { font-size:22px; letter-spacing:-.6px; }
.app-laravel-steps p { color:#98788b; font-size:15px; line-height:1.7; margin-top:9px; }
.app-related { padding-bottom:65px; }
.app-related>div { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:25px; }
.app-related a { display:flex; align-items:center; gap:12px; border:1px solid #e7d6e1; padding:24px 19px; border-radius:7px; }
.app-related a>span { font-size:23px; color:#b67096; }
.app-related strong { font-size:16px; font-weight:500; flex:1; }
.app-related a>.sales-icon { color:#bd8ca7; }
.applications-page .final-cta .app-actions { justify-content:center; }
@media(max-width:1050px) { .app-hero { gap:35px; } .app-demo-body { padding:30px; gap:30px; } .app-python-section,.app-laravel-section { gap:40px; } .app-env-art { padding:20px; } .app-env-art article { padding:20px 13px; } .app-art-top>span { font-size:12px; } .app-hero-art { padding:20px; } .app-project { padding:18px 13px; gap:9px; } .app-project strong { font-size:15px; } }
@media(max-width:800px) { .app-hero,.app-section-heading,.app-python-section,.app-laravel-section { grid-template-columns:1fr; } .app-hero { padding-top:49px; gap:40px; } .app-hero>div:first-child { max-width:640px; } .app-hero-art { max-width:550px; width:100%; box-sizing:border-box; margin:auto; } .app-outcomes { gap:25px; } .app-demo-body { grid-template-columns:1fr; gap:30px; } .app-demo-story { max-width:620px; } .app-preview { max-width:580px; width:100%; box-sizing:border-box; margin:auto; } .app-section-heading { gap:22px; } .app-outcomes { grid-template-columns:1fr; } .app-outcomes article { display:grid; grid-template-columns:45px 1fr; column-gap:20px; } .app-outcomes article>span { grid-row:1/3; } .app-outcomes p { margin-top:13px; } .sales-v3 .app-outcomes h2 { max-width:none; } .app-env-art { max-width:580px; width:100%; box-sizing:border-box; margin:auto; } .app-related>div { grid-template-columns:1fr; } .app-related a { padding:20px; } }
@media(max-width:500px) { .sales-v3 .app-hero h1 { font-size:44px; letter-spacing:-1.9px; } .app-hero p,.app-python-section p,.app-laravel-section p { font-size:17px; } .app-actions { gap:22px; } .app-hero-art { transform:none; padding:18px 13px; } .app-art-top img { width:105px; } .app-project { padding:18px 10px; } .app-project>span { width:32px; height:32px; font-size:20px; } .app-project strong { font-size:15px; } .app-project small { font-size:12px; } .app-project em { font-size:12px; padding:5px 7px; } .app-art-bottom { gap:13px; font-size:12px; flex-wrap:wrap; } .app-outcomes { padding-bottom:52px; gap:30px; } .app-demo-band { padding-block:51px; } .sales-v3 .app-section-heading h2,.sales-v3 .app-python-section h2,.sales-v3 .app-laravel-section h2 { font-size:35px; letter-spacing:-1.2px; } .app-demo-tabs { padding:0 8px; } .app-demo-tabs button { padding:19px 5px; gap:7px; font-size:14px; } .app-demo-tabs button .sales-icon { font-size:17px; } .app-demo-body { padding:26px 18px; } .sales-v3 .app-demo-story h3 { font-size:31px; } .app-preview { padding:19px 14px; } .app-preview-top>small { display:none; } .app-runtime-fields>div { grid-template-columns:1fr 1.2fr; gap:8px; } .app-runtime-fields dt,.app-runtime-fields dd { font-size:13px; } .app-runtime-fields dd { padding:11px 9px; } .app-demo-footer { padding:16px 18px; } .app-python-section,.app-laravel-section { padding-block:52px; gap:28px; } .app-laravel-section { padding-top:0; } .app-env-art { padding:16px 12px; gap:10px; } .app-env-art article { padding:21px 11px; } .app-env-art strong { font-size:15px; } .app-env-art small { font-size:12px; } .app-laravel-steps article { padding:21px 18px; gap:15px; } .app-laravel-steps article>span { padding:10px; font-size:22px; } .sales-v3 .app-laravel-steps h3 { font-size:21px; } .app-related { padding-bottom:46px; } }