@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Roboto:wght@300;400;500;700;900&family=Montserrat:wght@300;400;600;700;800&family=Open+Sans:wght@300;400;600;700;800&family=Poppins:wght@300;400;600;700;800&family=Playfair+Display:wght@400;600;700;800;900&family=Raleway:wght@300;400;600;700;800&family=Oswald:wght@300;400;600;700&display=swap";
:root{--gradient-1:linear-gradient(135deg,#4a90e2 0%,#5b9fd8 50%,#6b7fd7 100%);--gradient-2:linear-gradient(135deg,#5ab9ea 0%,#6b8fe8 70%,#7b68ee 100%);--gradient-3:linear-gradient(135deg,#4a9fd8 0%,#5b9fd8 50%,#6bb0e8 100%);--font-brand:64px;--font-heading:56px;--font-logo:32px;--phone-shadow:0 30px 80px rgba(0,0,0,.35),0 15px 40px rgba(0,0,0,.2);--panel-shadow:0 20px 60px rgba(0,0,0,.4)}.template-container{flex-direction:column;gap:16px;min-width:250px;display:flex}.template{aspect-ratio:9/16;width:100%;box-shadow:none;border-radius:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;position:relative;overflow:hidden}.template-content{flex-direction:column;width:100%;height:100%;padding:40px 50px;display:flex;position:relative}.template-one{background:var(--gradient-1)}.template-one .brand-section{z-index:10;flex-direction:column;gap:12px;display:flex;position:relative}.template-one .brand-logo{background:#fff;border-radius:10px;justify-content:center;align-items:center;width:52px;height:52px;display:flex;box-shadow:0 4px 12px rgba(0,0,0,.1)}.template-one .brand-logo-text{color:#4a90e2;font-size:.5em;font-weight:700}.template-one .brand-name{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.1);font-size:1em;font-weight:300;line-height:1.2}.template-one .phone-position-left{position:absolute;bottom:40px;left:50px}.template-two{background:var(--gradient-2)}.template-two .template-content{justify-content:center;align-items:center}.template-two .phone-position-center{margin-bottom:40px}.template-two .tagline-text{color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.15);text-align:right;max-width:60%;font-size:.875em;font-weight:700;line-height:1.2;position:absolute;bottom:50px;right:50px}.template-three{background:var(--gradient-3)}.template-three .header-text{color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.15);text-align:right;max-width:60%;font-size:.875em;font-weight:700;line-height:1.2;position:absolute;top:40px;right:50px}.template-three .phone-position-right{position:absolute;bottom:40px;right:50px}.phone-mockup{transform-origin:50%;width:100%;transition:transform .3s}.phone-bezel{box-shadow:var(--phone-shadow),inset 0 0 0 1px rgba(255,255,255,.5);background:#fff;border-radius:45px;padding:10px;position:relative}.phone-screen{aspect-ratio:9/19.5;background:#000;border-radius:35px;justify-content:center;align-items:center;display:flex;overflow:hidden}.screenshot-image{object-fit:cover;width:100%;height:100%;display:block}.placeholder-screen{color:#6b7280;flex-direction:column;justify-content:center;align-items:center;display:flex}.export-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4a90e2,#5b9fd8);border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 12px rgba(74,144,226,.3)}.export-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(74,144,226,.4)}.export-button:active{transform:translateY(0)}.export-button:focus{outline-offset:2px;outline:2px solid #4a90e2}@media (max-width:768px){.template-content{padding:30px 35px}.template-one .brand-logo{width:40px;height:40px}.template-one .phone-position-left{bottom:30px;left:35px}.template-two .tagline-text{bottom:35px;right:35px}.template-three .header-text{top:30px;right:35px}.template-three .phone-position-right{bottom:30px;right:35px}}@media (max-width:480px){.template-content{padding:20px 25px}.template-one .brand-logo{width:32px;height:32px}}.template-dynamic{background:var(--gradient-1);aspect-ratio:1242/2688!important}.template-dynamic .template-content{justify-content:center;align-items:center}.template-dynamic .phone-position-center{position:relative}.template-dynamic .dynamic-tagline{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2);word-wrap:break-word;max-width:600px;padding:0 20px;font-weight:700;line-height:1.2}