:root{--wa-blue:#27A8E0;--wa-blue-dark:#1688b9;--wa-dark:#071927;--wa-ink:#132b3c;--wa-text:#4f6372;--wa-muted:#6b7b88;--wa-border:#dfe8ef;--wa-bg:#f6fbfd;--wa-soft:#eef8fd;--wa-white:#ffffff;--wa-shadow:0 18px 50px rgba(7,25,39,.08);--wa-shadow-strong:0 30px 80px rgba(7,25,39,.18)}
*{box-sizing:border-box}
body.portfolio-page{margin:0;background:#fff;color:var(--wa-dark);font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:hidden}
body.portfolio-page a{color:inherit;text-decoration:none}
.portfolio-hero{background:radial-gradient(circle at 15% 10%,rgba(39,168,224,.18),transparent 32%),linear-gradient(180deg,#eef8fd 0%,#fff 100%);border-bottom:1px solid var(--wa-border)}
.portfolio-hero-inner{max-width:1180px;margin:0 auto;padding:84px 22px 62px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:38px;align-items:end}
.eyebrow{margin:0 0 14px;color:var(--wa-blue);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.08em}
.portfolio-hero h1{margin:0;font-size:clamp(44px,7vw,86px);line-height:.93;letter-spacing:-.055em}
.portfolio-hero p{margin:20px 0 0;max-width:760px;color:var(--wa-text);font-size:20px;line-height:1.6}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.explorer-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;background:var(--wa-blue);color:#fff;font-weight:900;border:1px solid var(--wa-blue)}
.explorer-btn-secondary{background:#fff;color:var(--wa-dark);border-color:var(--wa-border)}
.hero-panel{display:grid;gap:14px;background:rgba(255,255,255,.92);border:1px solid var(--wa-border);padding:26px;box-shadow:0 20px 60px rgba(5,25,39,.1);border-radius:22px;backdrop-filter:blur(12px)}
.explorer-panel{grid-template-columns:1fr;align-self:stretch}
.hero-panel strong{font-size:48px;color:var(--wa-blue);line-height:1;letter-spacing:-.04em}
.hero-panel span{color:var(--wa-muted);font-weight:800}
.portfolio-main{max-width:1180px;margin:0 auto;padding:46px 22px 80px}
.explorer-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:36px}
.explorer-stat{background:#fff;border:1px solid var(--wa-border);border-radius:20px;padding:20px;box-shadow:var(--wa-shadow)}
.explorer-stat strong{display:block;color:var(--wa-blue);font-size:38px;line-height:1}
.explorer-stat span{display:block;margin-top:7px;color:var(--wa-muted);font-weight:900}
.portfolio-featured{margin-bottom:38px}.featured-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.featured-heading h2{margin:0;font-size:38px;line-height:1.05;letter-spacing:-.04em}
.featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.featured-card{display:grid;grid-template-rows:220px 1fr;min-height:440px;border:1px solid var(--wa-border);border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--wa-shadow);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.featured-card:hover{transform:translateY(-8px);box-shadow:var(--wa-shadow-strong);border-color:var(--wa-blue)}
.featured-card img{width:100%;height:100%;object-fit:cover;display:block;background:#f2f6f8;opacity:0;transition:opacity .35s ease,transform .55s ease}.featured-card:hover img{transform:scale(1.06)}.featured-card img.is-loaded{opacity:1}
.featured-card div{padding:22px}.featured-card span{display:inline-flex;margin-bottom:11px;color:var(--wa-blue);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.featured-card h3{margin:0;color:var(--wa-dark);font-size:24px;line-height:1.15;letter-spacing:-.03em}.featured-card p{margin:12px 0 0;color:var(--wa-text);font-size:15px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.explorer-browse{background:#fff;border:1px solid var(--wa-border);border-radius:24px;box-shadow:var(--wa-shadow);padding:24px;margin-bottom:30px}.explorer-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.explorer-tab,.explorer-chip{border:1px solid var(--wa-border);background:#fff;color:#243746;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}.explorer-tab.is-active,.explorer-chip.is-active,.explorer-tab:hover,.explorer-chip:hover{background:var(--wa-dark);color:#fff;border-color:var(--wa-dark)}.explorer-chip-panel{display:flex;gap:10px;flex-wrap:wrap;max-height:132px;overflow:auto}
.portfolio-toolbar-wrap{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid rgba(223,232,239,.85);border-radius:24px;box-shadow:0 14px 44px rgba(7,25,39,.08);padding:18px;margin-bottom:30px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;flex-wrap:wrap}.toolbar h2{margin:0;font-size:34px;line-height:1;letter-spacing:-.04em}.result-count{margin:8px 0 0;color:var(--wa-muted);font-size:14px;font-weight:800}
.search{width:min(100%,520px);height:56px;border:1px solid var(--wa-border);background:#fff;border-radius:999px;padding:0 22px;color:var(--wa-dark);font-size:16px;font-weight:800;outline:none;box-shadow:0 10px 28px rgba(5,25,39,.06);transition:border-color .25s ease,box-shadow .25s ease}.search::placeholder{color:#8b9aa5;font-weight:700}.search:focus{border-color:var(--wa-blue);box-shadow:0 0 0 4px rgba(39,168,224,.14),0 10px 28px rgba(5,25,39,.06)}
.advanced-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;margin-bottom:16px}.advanced-filters select,.advanced-filters button{height:44px;border:1px solid var(--wa-border);border-radius:999px;background:#fff;padding:0 14px;color:var(--wa-dark);font-weight:800;min-width:0}.advanced-filters button{background:var(--wa-dark);color:#fff;cursor:pointer}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:0;max-height:94px;overflow:auto;padding-bottom:2px}.filter-button{border:1px solid var(--wa-border);background:#fff;color:#243746;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}.filter-button.is-active,.filter-button:hover{background:var(--wa-dark);color:#fff;border-color:var(--wa-dark);transform:translateY(-1px)}
.empty{display:none;margin:26px 0;padding:30px;border:1px dashed var(--wa-border);border-radius:22px;color:var(--wa-muted);background:var(--wa-bg);font-weight:800}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}.portfolio-card{position:relative;display:flex;flex-direction:column;min-height:590px;height:100%;border:1px solid var(--wa-border);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--wa-shadow);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,opacity .45s ease;opacity:0;transform:translateY(40px)}.portfolio-card.is-visible{opacity:1;transform:translateY(0);transition-delay:var(--delay,0ms)}.portfolio-card:hover{transform:translateY(-10px);border-color:var(--wa-blue);box-shadow:var(--wa-shadow-strong)}
.portfolio-card a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}.portfolio-browser{flex:0 0 auto;background:#eef5f9}.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;background:#e4edf3;border-bottom:1px solid #d6e2ea}.browser-dot{width:11px;height:11px;border-radius:50%;background:#c5d1da}.browser-dot:nth-child(1){background:#ff5f56}.browser-dot:nth-child(2){background:#ffbd2e}.browser-dot:nth-child(3){background:#27c93f}.browser-url{margin-left:10px;color:#70818d;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.portfolio-thumb{height:240px;overflow:hidden;background:#f3f7fa}.portfolio-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease,transform .65s ease}.portfolio-thumb img.is-loaded{opacity:1}.portfolio-card:hover .portfolio-thumb img{transform:scale(1.08)}
.portfolio-card-body{display:flex;flex-direction:column;flex:1;padding:24px}.portfolio-meta{margin-bottom:14px}.portfolio-meta span{display:inline-flex;align-items:center;background:#e8f8fe;color:#0f7eb3;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.portfolio-card h3{margin:0;font-size:25px;line-height:1.18;letter-spacing:-.03em}.portfolio-card p{margin:16px 0 18px;color:var(--wa-text);line-height:1.65;font-size:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:98px}.service-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;margin-bottom:22px}.service-tags em{font-style:normal;padding:7px 12px;border-radius:999px;background:#f3f7fa;color:#60717e;font-size:12px;font-weight:800}.portfolio-actions{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid var(--wa-border)}.portfolio-actions strong{color:var(--wa-blue);font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.portfolio-actions::after{content:"→";font-size:22px;color:var(--wa-blue);transition:transform .25s ease}.portfolio-card:hover .portfolio-actions::after{transform:translateX(8px)}
.site-footer{border-top:1px solid var(--wa-border);background:#071927;color:#fff;padding:36px 22px;text-align:center}.site-footer img{max-width:170px}.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:18px;font-weight:900}
@media(max-width:1180px){.featured-grid,.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.explorer-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.advanced-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.portfolio-hero-inner{grid-template-columns:1fr}.portfolio-toolbar-wrap{position:relative;top:auto}}
@media(max-width:640px){.featured-grid,.portfolio-grid,.explorer-stats,.advanced-filters{grid-template-columns:1fr}.portfolio-card{min-height:auto}.portfolio-thumb{height:220px}.toolbar{align-items:flex-start}.search{width:100%}}