:root{--modal-p1:rgb(var(--p1));--modal-p1-light:color-mix(in srgb,rgb(var(--p1)) 20%,rgb(0,0,0) 95%);--modal-bg:rgba(255,255,255,0.82);--modal-border:rgba(82,113,255,0.13);--modal-shadow:0 8px 32px 0 rgba(82,113,255,0.18),0 1.5px 8px 0 rgba(0,0,0,0.09);--modal-glass:blur(32px) saturate(1.4);--modal-divider:#e5e7eb;--modal-input-bg:rgba(255,255,255,0.95);--modal-input-border:#d1d5db;--modal-input-focus:var(--modal-p1);--modal-btn-bg:linear-gradient(90deg,var(--modal-p1) 0%,var(--modal-p1-light) 100%);--modal-btn-bg-hover:linear-gradient(90deg,var(--modal-p1-light) 0%,var(--modal-p1) 100%);--modal-btn-alt-bg:#f3f4f6;--modal-btn-alt-hover:#e5e7eb;--modal-btn-alt-border:#e0e7ef;--modal-btn-alt-border-hover:#b6d0ff;--modal-title:#222b45;--modal-desc:#4a5568;--modal-error:#e53e3e;--modal-success:#38a169}.portfolio-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:"Lora",serif}.portfolio-modal{background:var(--modal-bg);padding:1.6rem 1.2rem 1.3rem 1.2rem;border-radius:24px;max-width:420px;width:96vw;min-width:0;box-shadow:var(--modal-shadow);display:flex;flex-direction:column;align-items:center;position:relative;animation:modalIn 0.44s cubic-bezier(.4,2,.6,1) both;border:1.5px solid var(--modal-border);font-family:'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;backdrop-filter:var(--modal-glass);-webkit-backdrop-filter:var(--modal-glass);transition:box-shadow 0.2s,border 0.2s;margin:2.5vh 0;z-index:1}.portfolio-modal-logo{width:48px;height:48px;object-fit:cover;margin-bottom:0.5rem;border-radius:10px;box-shadow:0 2px 8px rgba(82,113,255,0.10);background:#fff;display:block;z-index:1;animation:logoPulse 2s ease-in-out infinite}.portfolio-modal-close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:2.2rem;color:var(--modal-p1);cursor:pointer;transition:color 0.2s,background 0.2s;line-height:1;z-index:2;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.5);box-shadow:0 2px 8px rgba(82,113,255,0.07)}.portfolio-modal-close:hover{color:#fff;background:var(--modal-p1)}.portfolio-modal h2{margin-bottom:0.4rem;font-size:1.25rem;font-weight:800;letter-spacing:0.01em;color:var(--modal-title);text-align:center}.portfolio-modal-desc{font-size:0.92rem;color:var(--modal-desc);margin-bottom:0.9rem;text-align:center;line-height:1.5}.portfolio-modal-privacy{display:block;font-size:0.89em;color:#888;margin-top:0.4em}.portfolio-modal-label{display:block;font-size:0.95rem;color:var(--modal-title);margin-bottom:0.15rem;font-weight:500;letter-spacing:0.01em}.portfolio-modal-input-wrap{display:flex;align-items:center;width:100%;position:relative;margin-bottom:0.9rem;animation:fadeInUp 0.5s ease-out 0.1s both}.portfolio-modal-input{width:100%;padding:0.8rem 1rem;border:1.5px solid var(--modal-input-border);border-radius:10px;font-size:1rem;background:var(--modal-input-bg);transition:all 0.2s ease;font-family:"Lora",serif;box-shadow:0 1px 2px rgba(82,113,255,0.03);color:#222b45;outline:none}.portfolio-modal-input:focus{border:1.5px solid var(--modal-input-focus);background:#fff;box-shadow:0 0 0 3px var(--modal-p1-light),0 2px 8px rgba(82,113,255,0.1);transform:translateY(-1px)}.portfolio-modal-eye{background:none;border:none;position:absolute;right:0.7em;top:50%;transform:translateY(-50%);font-size:1.35em;color:#aaa;cursor:pointer;padding:0 0.3em;z-index:1;transition:color 0.18s}.portfolio-modal-eye:hover{color:var(--modal-p1)}.portfolio-modal-btn,.portfolio-modal-btn-alt{width:100%;padding:0.6rem 0.8rem;border:none;border-radius:8px;font-size:0.92rem;margin-bottom:0.4rem;cursor:pointer;font-weight:700;letter-spacing:0.01em;transition:all 0.2s ease;font-family:"Lora",serif;display:flex;align-items:center;justify-content:center;gap:0.35em;position:relative;overflow:hidden}.portfolio-modal-btn{background:var(--modal-btn-bg);color:#fff;box-shadow:0 2px 8px rgba(82,113,255,0.10);border:1.5px solid var(--modal-p1);animation:fadeInUp 0.5s ease-out 0.2s both}.portfolio-modal-btn:hover{background:var(--modal-btn-bg-hover);box-shadow:0 4px 16px rgba(82,113,255,0.13);color:#fff;border-color:var(--modal-p1-light);transform:translateY(-1px) scale(1.02)}.portfolio-modal-btn-alt{background:var(--modal-btn-alt-bg);color:var(--modal-p1);border:1.5px solid var(--modal-btn-alt-border);animation:fadeInUp 0.5s ease-out 0.4s both}.portfolio-modal-btn-alt:hover{background:var(--modal-btn-alt-hover);color:var(--modal-p1);border-color:var(--modal-btn-alt-border-hover);transform:translateY(-1px) scale(1.02)}.ripple{position:relative;overflow:hidden}.ripple:after{content:"";display:block;position:absolute;border-radius:50%;pointer-events:none;width:100px;height:100px;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);background:rgba(82,113,255,0.18);opacity:0.7;transition:transform 0.4s,opacity 0.4s}.ripple:active:after{transform:translate(-50%,-50%) scale(1.2);opacity:0;transition:0s}.portfolio-modal-divider{width:100%;text-align:center;margin:14px 0 14px 0;position:relative;height:16px;animation:fadeInUp 0.5s ease-out 0.3s both}.portfolio-modal-divider span{background:var(--modal-bg);color:#aaa;padding:0 12px;position:relative;z-index:1;font-size:0.95rem}.portfolio-modal-divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--modal-divider);z-index:0}.portfolio-modal-error{color:var(--modal-error);background:#fff0f0;border:1px solid var(--modal-error);border-radius:8px;padding:0.5em 0.8em;margin-bottom:0.6em;font-size:0.95em;text-align:center}.portfolio-modal-success{color:var(--modal-success);background:#f0fff4;border:1px solid var(--modal-success);border-radius:8px;padding:0.5em 0.8em;margin-top:0.6em;font-size:0.95em;text-align:center;display:flex;align-items:center;justify-content:center;gap:0.4em;animation:successSlideIn 0.4s ease-out}.portfolio-modal-success .modal-success-icon{font-size:1.4em;vertical-align:-2px}.portfolio-modal-faq{width:100%;margin:0.8em 0 0.15em 0;background:#f8fafc;border-radius:7px;border:1px solid #e0e7ef;padding:0.5em 0.8em;font-size:0.9em;color:#444;box-shadow:0 1px 4px rgba(82,113,255,0.04);transition:all 0.2s ease}.portfolio-modal-faq:hover{box-shadow:0 2px 8px rgba(82,113,255,0.08);transform:translateY(-1px)}.portfolio-modal-faq[open]{box-shadow:0 2px 8px rgba(82,113,255,0.08);animation:faqOpen 0.3s ease-out}.portfolio-modal-faq summary{font-weight:600;color:var(--modal-p1);cursor:pointer;outline:none;margin-bottom:0.2em}.portfolio-modal-faq summary::-webkit-details-marker{display:none}.portfolio-modal-faq div{margin-top:0.2em;color:#555}.portfolio-modal-help{margin-top:1.2em;text-align:center;font-size:0.95em;color:#888;display:flex;flex-direction:column;gap:0.25em;align-items:center}.portfolio-modal-help-link{color:var(--modal-p1);text-decoration:none;margin:0 0.3em;font-weight:500;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:0.3em}.portfolio-modal-help-link:hover{color:var(--modal-p1-light);text-decoration:underline;transform:translateY(-1px)}.modal-btn-icon{font-size:1.05em;vertical-align:-2px}.modal-lock-icon{font-size:1.05em;color:var(--modal-p1)}.modal-spinner{display:inline-block;width:1.1em;height:1.1em;border:2.5px solid #fff;border-top:2.5px solid var(--modal-p1-light);border-radius:50%;animation:spin 0.7s linear infinite;margin-left:0.5em;vertical-align:middle}.portfolio-blur{filter:blur(8px) grayscale(0.2) brightness(0.8);pointer-events:none;user-select:none}@keyframes fadeInOverlay{0%{opacity:0}100%{opacity:1}}@keyframes modalIn{0%{transform:scale(0.85) translateY(60px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}@keyframes successSlideIn{0%{opacity:0;transform:translateY(-10px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes faqOpen{0%{opacity:0.8;transform:scale(0.98)}100%{opacity:1;transform:scale(1)}}@keyframes spin{100%{transform:rotate(360deg)}}@media (max-width:900px){.portfolio-modal{max-width:98vw;padding:1.2rem 0.7rem 1.2rem 0.7rem}}@media (max-width:600px){.portfolio-modal{max-width:100vw;min-width:0;border-radius:18px}.portfolio-modal-logo{width:32px;height:32px}}