.portfolio-page{background:#f8f9ff;color:#111735}.portfolio-page main{overflow:hidden}.portfolio-hero{padding:95px 0 75px;background:radial-gradient(circle at 80% 15%,#dce5ff,transparent 28rem),radial-gradient(circle at 5% 90%,#eaffca,transparent 25rem),#fff}.portfolio-eyebrow{margin:0 0 15px;color:#3157ff;font-size:9px;font-weight:800;letter-spacing:.2em}.portfolio-hero h1{max-width:900px;margin:0;font-size:clamp(50px,7vw,92px);font-weight:800;line-height:.95;letter-spacing:-.07em}.portfolio-hero h1 em{color:#3157ff;font-style:normal}.portfolio-hero>div>p:last-child{max-width:650px;margin:25px 0 0;color:#6e7898;font-size:14px;line-height:1.8}
.portfolio-list{padding:80px 0 110px}.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.portfolio-card{overflow:hidden;border:1px solid #dce3f7;border-radius:24px;background:#fff;box-shadow:0 20px 55px #3157ff0c;transition:.3s ease}.portfolio-card:hover{box-shadow:0 30px 70px #3157ff1a;transform:translateY(-7px)}.portfolio-preview-trigger{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}.portfolio-browser{position:relative;display:block;height:330px;padding-top:32px;overflow:hidden;background:linear-gradient(145deg,#edf1ff,#f8faff)}.portfolio-browser>i{position:absolute;top:13px;width:7px;height:7px;border-radius:50%;background:#ff625a}.portfolio-browser>i:first-child{left:16px}.portfolio-browser>i:nth-child(2){left:28px;background:#ffc04a}.portfolio-browser>i:nth-child(3){left:40px;background:#32c855}.portfolio-browser>small{position:absolute;top:10px;left:50%;max-width:55%;overflow:hidden;color:#7c85a3;font-size:7px;text-overflow:ellipsis;white-space:nowrap;transform:translateX(-50%)}.portfolio-browser img{width:100%;height:100%;object-fit:cover;object-position:top}.portfolio-placeholder{display:grid;place-items:center;height:100%;background:radial-gradient(circle,#3157ff24,transparent 42%),#f4f6ff}.portfolio-placeholder b{display:grid;place-items:center;width:70px;height:70px;border-radius:22px;background:#3157ff;color:#fff;font-size:22px}.portfolio-placeholder span{color:#3157ff;font-size:8px;font-weight:800;letter-spacing:.16em}.portfolio-card-copy{display:grid;padding:25px}.portfolio-card-copy>small{color:#3157ff;font-size:7px;font-weight:800;letter-spacing:.14em}.portfolio-card-copy>strong{margin-top:8px;font-size:24px}.portfolio-card-copy>em{min-height:42px;margin-top:8px;color:#717a98;font-size:10px;font-style:normal;line-height:1.7}.portfolio-card-copy>b{display:flex;align-items:center;gap:7px;margin-top:20px;color:#3157ff;font-size:10px}.portfolio-card-copy svg{width:16px}.portfolio-empty{padding:70px;border:1px dashed #cad3ed;border-radius:24px;color:#747e9b;text-align:center}
.portfolio-modal{position:fixed;z-index:10000;inset:0;display:grid;place-items:center;padding:18px}.portfolio-modal[hidden]{display:none}.portfolio-backdrop{position:absolute;inset:0;border:0;background:#10152dcc;backdrop-filter:blur(12px)}.portfolio-modal-panel{position:relative;z-index:2;width:min(960px,100%);max-height:calc(100dvh - 36px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid #ffffff33;border-radius:28px;background:#f5f7ff;box-shadow:0 40px 120px #0008;animation:portfolioModalIn .38s cubic-bezier(.2,.8,.2,1)}.portfolio-modal-panel>header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:#fff}.portfolio-modal-panel>header small,.portfolio-modal-panel>header strong{display:block}.portfolio-modal-panel>header small{color:#3157ff;font-size:6px;letter-spacing:.16em}.portfolio-modal-panel>header strong{font-size:13px}.portfolio-modal-panel>header button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #dce3f7;border-radius:50%;background:#f6f8ff;color:#111735;cursor:pointer}.portfolio-modal-panel>header svg{width:18px}.portfolio-phone-stage{display:grid;place-items:center;min-height:0;padding:22px;overflow:auto;background:radial-gradient(circle,#dce5ff,transparent 42%),#eef1fb}.portfolio-phone{position:relative;width:340px;height:680px;flex:0 0 auto;padding:10px;border:4px solid #11162d;border-radius:54px;background:#11162d;box-shadow:0 35px 80px #17245d4d}.portfolio-phone-island{position:absolute;z-index:5;top:17px;left:50%;width:105px;height:25px;border-radius:20px;background:#090c19;transform:translateX(-50%)}.portfolio-phone iframe{width:100%;height:100%;border:0;border-radius:41px;background:#fff}.portfolio-modal-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:14px 20px;background:#fff}.portfolio-modal-panel>footer p{max-width:620px;margin:0;color:#737c99;font-size:8px}.portfolio-modal-panel>footer .btn{flex:0 0 auto;padding:10px 15px;border-radius:10px;font-size:9px}
html.portfolio-modal-open{overflow:hidden}@keyframes portfolioModalIn{from{opacity:0;transform:translateY(25px) scale(.96)}}@media(max-width:700px){.portfolio-hero{padding:58px 0 48px}.portfolio-hero h1{font-size:49px}.portfolio-grid{grid-template-columns:1fr}.portfolio-list{padding:50px 0 85px}.portfolio-browser{height:250px}.portfolio-modal{padding:8px}.portfolio-modal-panel{max-height:calc(100dvh - 16px);border-radius:22px}.portfolio-phone-stage{padding:15px}.portfolio-phone{width:min(330px,82vw);height:min(660px,68dvh);border-radius:46px}.portfolio-phone iframe{border-radius:34px}.portfolio-modal-panel>footer{align-items:stretch;flex-direction:column;gap:9px}.portfolio-modal-panel>footer .btn{width:100%}}@media(prefers-reduced-motion:reduce){.portfolio-card,.portfolio-modal-panel{transition:none;animation:none}}