.bgsp,.bgsp *{box-sizing:border-box}.bgsp{max-width:1250px;margin:auto;--sp-accent:#6335fa;color:#111c3c;font-family:inherit}.bgsp h1,.bgsp h3,.bgsp p{margin:0}.bgsp-hero{min-height:345px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:15px;padding:35px 4%;border-radius:14px;background:linear-gradient(110deg,#faf9ff,#f5f3ff)}.bgsp-kicker{display:inline-block;border-radius:30px;background:#ece7ff;color:var(--sp-accent);padding:7px 12px;font-size:11px;font-weight:800}.bgsp h1{font-size:clamp(32px,4vw,54px);line-height:1.1;font-weight:800;margin:16px 0 13px}.bgsp h1 em{font-style:normal;color:var(--sp-accent)}.bgsp-hero p{font-size:14px;color:#5e6983;line-height:1.6;max-width:540px}.bgsp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.bgsp-stats strong{display:block;color:var(--sp-accent);font-size:26px}.bgsp-stats small{display:block;color:#606b83;font-size:11px}.bgsp-hero-visual{position:relative;min-height:270px;display:grid;place-items:center;border-radius:45%;background:radial-gradient(ellipse,#dfd4ff 0%,#ede6ff 55%,transparent 70%)}.bgsp-hero-visual>img{height:290px;max-width:90%;object-fit:contain;align-self:end}.bgsp-portrait{text-align:center;color:var(--sp-accent);display:flex;flex-direction:column;align-items:center;justify-content:center}.bgsp-portrait span{font-size:83px;line-height:1}.bgsp-portrait strong{font-size:23px}.bgsp-portrait small{font-size:12px;color:#666}.bgsp-note{position:absolute;right:0;top:45%;max-width:150px;background:white;padding:12px 15px;border-radius:30px;font-size:11px;font-weight:800;box-shadow:0 9px 28px #36236620}.bgsp-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px;margin:22px 0;background:#f9f9ff;border-radius:30px}.bgsp-filters button{border:0;cursor:pointer;background:#f0f1f8;border-radius:22px;padding:10px 16px;font:inherit;font-size:11px;color:#19223d}.bgsp-filters button.active{background:var(--sp-accent);color:#fff;box-shadow:0 5px 15px #6335fa38}.bgsp-grid{display:grid;grid-template-columns:repeat(var(--sp-columns),minmax(0,1fr));gap:16px}.bgsp-card{overflow:hidden;border:1px solid #ebebf4;border-radius:11px;background:#fff;box-shadow:0 4px 16px #151f4408;transition:transform .2s,box-shadow .2s}.bgsp-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #151f4417}.bgsp-card[hidden],.bgsp-empty[hidden]{display:none!important}.bgsp-cover{height:175px;display:flex;align-items:center;justify-content:center;overflow:hidden;--mock:#693bfa;background:linear-gradient(125deg,#ddd6ff,#f7efff)}.bgsp-cover>img{display:block;width:100%;height:100%;object-fit:cover}.bgsp-blue{--mock:#126cc2;background:linear-gradient(125deg,#d7ebf8,#e5e8f3)}.bgsp-orange{--mock:#ed7225;background:linear-gradient(125deg,#ffe0c5,#f7e6dd)}.bgsp-green{--mock:#138d69;background:linear-gradient(125deg,#d7eee3,#e9f7ed)}.bgsp-dark{--mock:#29334b;background:linear-gradient(125deg,#a5adba,#d2d7df)}.bgsp-laptop{width:77%;max-width:275px;filter:drop-shadow(0 8px 8px #17203530)}.bgsp-screen{border:7px solid #252b36;border-bottom-width:10px;border-radius:8px 8px 3px 3px;aspect-ratio:1.8;background:#fff;overflow:hidden}.bgsp-browser{height:10%;background:#f2f3f6;display:flex;gap:3px;align-items:center;padding:0 5px}.bgsp-browser i{height:3px;width:3px;border-radius:50%;background:#a6aaba}.bgsp-browser b{height:4px;width:35%;margin:auto;border-radius:3px;background:#d9dce5}.bgsp-site{padding:5% 6%;height:90%;background:linear-gradient(125deg,#fff,#f7f9ff)}.bgsp-site-logo{display:inline-block;width:22%;height:5px;background:var(--mock);border-radius:3px}.bgsp-site-menu{display:inline-block;width:34%;height:3px;background:#cbd0dd;float:right;margin-top:2px}.bgsp-site-main{display:grid;grid-template-columns:1.2fr .8fr;gap:8%;align-items:center;margin-top:7%}.bgsp-line{display:block;height:4px;width:74%;background:#abb4c9;border-radius:3px;margin:5px 0}.bgsp-line.long{height:8px;width:100%;background:#29334b}.bgsp-line.short{width:48%}.bgsp-site-cta{display:block;background:var(--mock);width:37%;height:9px;border-radius:2px;margin-top:9px}.bgsp-site-picture{display:grid;place-items:center;aspect-ratio:1.35;border-radius:3px;background:linear-gradient(125deg,var(--mock),#c8d1ed);color:#fff;font-size:23px}.bgsp-site-tiles{display:flex;gap:5px;margin-top:7%}.bgsp-site-tiles i{flex:1;height:10px;border-radius:2px;background:#e5e8f2}.bgsp-laptop-base{height:7px;background:linear-gradient(#f0f1f4,#8b929e);width:113%;margin-left:-6.5%;border-radius:0 0 45% 45%}.bgsp-card-content{padding:12px 15px 15px}.bgsp-tag{font-size:10px;color:var(--sp-accent);background:#f0ebff;padding:4px 8px;border-radius:20px;display:inline-block}.bgsp-card h3{font-size:15px;line-height:1.3;margin:8px 0 5px;font-weight:800}.bgsp-card p{font-size:12px;line-height:1.45;color:#64708a;min-height:35px}.bgsp-card a,.bgsp-no-link{display:inline-block;margin-top:11px;color:var(--sp-accent);font-size:12px;font-weight:800;text-decoration:none}.bgsp-no-link{opacity:.7}.bgsp-empty{text-align:center;padding:30px;color:#68738a}@media(max-width:950px){.bgsp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.bgsp{padding:0 8px}.bgsp-hero{grid-template-columns:1fr;padding:24px 16px}.bgsp h1{font-size:34px}.bgsp-hero-visual{min-height:180px}.bgsp-hero-visual>img{height:200px}.bgsp-note{font-size:9px}.bgsp-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;border-radius:14px}.bgsp-filters button{white-space:nowrap;flex:none}.bgsp-grid{grid-template-columns:1fr}.bgsp-cover{height:190px}}@media(prefers-reduced-motion:reduce){.bgsp-card{transition:none}}
.bgsp-skills{padding:23px 4%;background:#fff;border:1px solid #f0eff4;border-radius:14px;margin:18px 0}.bgsp-skills h2{font-size:22px;margin:0 0 19px;color:#101b36}.bgsp-skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:35px;row-gap:19px}.bgsp-skill-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:14px}.bgsp-skill-label b{font-size:13px}.bgsp-skill-track{height:7px;background:#eaf0f5;border-radius:20px;overflow:hidden}.bgsp-skill-track span{height:100%;display:block;background:linear-gradient(90deg,#f45d4c,#ff8270);border-radius:20px}@media(max-width:650px){.bgsp-skills-grid{grid-template-columns:1fr}.bgsp-skills{padding:18px 15px}}

/* Warm yellow portfolio theme */
.bgsp{--sp-accent:#f4bf24;color:#172038}.bgsp-hero{background:linear-gradient(110deg,#fffef7,#fff7d9)}.bgsp-kicker{background:#fff1b4;color:#705100}.bgsp h1 em,.bgsp-stats strong{color:var(--sp-accent)}.bgsp-hero-visual{background:radial-gradient(ellipse,#ffeb9d 0%,#fff6d6 57%,transparent 70%)}.bgsp-filters{background:#fffaf0}.bgsp-filters button{background:#fff4d7}.bgsp-filters button.active{color:#2a240c;background:var(--sp-accent);box-shadow:0 5px 15px #d9a61a33}.bgsp-tag{background:#fff5d9;color:#795900}.bgsp-card a{color:#9b6c00}.bgsp-skill-track span{background:linear-gradient(90deg,#f0b913,#ffdc55)}

/* Coral-orange reference palette: peach/pink hero, orange controls, dark navy type. */
.bgsp{--sp-accent:#ff5636;color:#202a3d}
.bgsp-hero{background:linear-gradient(112deg,#fff8f4 0%,#ffe8df 52%,#ffcec7 82%,#f5e7f2 100%);border-radius:24px}
.bgsp-kicker{background:transparent;color:#ff5636;letter-spacing:.12em;padding-left:0}
.bgsp h1 em,.bgsp-stats strong{color:var(--sp-accent)}
.bgsp-hero-visual{background:radial-gradient(ellipse,#ffd7ce 0%,#ffe6df 55%,transparent 72%)}
.bgsp-filters{background:#fff8f6}
.bgsp-filters button{background:#fff0eb;color:#202a3d}
.bgsp-filters button.active{background:var(--sp-accent);color:#fff;box-shadow:0 5px 15px #ff56363a}
.bgsp-tag{background:#fff0eb;color:#f45135}
.bgsp-card a{color:#f45135}
.bgsp-skill-track span{background:linear-gradient(90deg,#f35b49,#ff806e)}
.bgsp-note{color:#2367db}

/* v2.4.0 progressive enhancement: content is visible until JS initializes. */
.bgsp .bgsp-hero-copy,.bgsp .bgsp-hero-visual{animation:bgspHeroIn .75s cubic-bezier(.2,.8,.2,1) both}
.bgsp .bgsp-hero-visual{animation-delay:.13s}
.bgsp .bgsp-note{animation:bgspFloat 4s ease-in-out infinite}
.bgsp .bgsp-card{transition:transform .32s ease,box-shadow .32s ease,opacity .55s ease;transform-origin:center bottom}
.bgsp .bgsp-card:hover{transform:translateY(-7px);box-shadow:0 18px 34px #17203520}
.bgsp .bgsp-cover img,.bgsp .bgsp-laptop{transition:transform .45s ease}
.bgsp .bgsp-card:hover .bgsp-cover img,.bgsp .bgsp-card:hover .bgsp-laptop{transform:scale(1.045)}
.bgsp .bgsp-filters button{transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease}
.bgsp .bgsp-filters button:hover{transform:translateY(-2px)}
.bgsp .bgsp-skill-track span{transform-origin:left center}
.bgsp.bgsp-motion .bgsp-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1);transition-delay:var(--bgsp-delay,0ms)}
.bgsp.bgsp-motion .bgsp-reveal.bgsp-inview{opacity:1;transform:translateY(0)}
.bgsp.bgsp-motion .bgsp-skill-track span{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.75,.2,1)}
.bgsp.bgsp-motion .bgsp-skills.bgsp-inview .bgsp-skill-track span{transform:scaleX(1)}
.bgsp .bgsp-skill:nth-child(2) .bgsp-skill-track span{transition-delay:.1s}
.bgsp .bgsp-skill:nth-child(3) .bgsp-skill-track span{transition-delay:.2s}
.bgsp .bgsp-skill:nth-child(4) .bgsp-skill-track span{transition-delay:.3s}
.bgsp .bgsp-skill:nth-child(5) .bgsp-skill-track span{transition-delay:.4s}
@keyframes bgspHeroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes bgspFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:650px){.bgsp .bgsp-note{animation:none}.bgsp.bgsp-motion .bgsp-reveal{transform:translateY(12px);transition-duration:.45s}.bgsp .bgsp-card:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.bgsp .bgsp-hero-copy,.bgsp .bgsp-hero-visual,.bgsp .bgsp-note{animation:none!important}.bgsp.bgsp-motion .bgsp-reveal{opacity:1!important;transform:none!important;transition:none!important}.bgsp.bgsp-motion .bgsp-skill-track span{transform:none!important;transition:none!important}.bgsp .bgsp-card,.bgsp .bgsp-cover img,.bgsp .bgsp-laptop,.bgsp .bgsp-filters button{transition:none!important}}

/* v2.5 override previous scale-only bars: animate measured percentage width */
.bgsp.bgsp-motion .bgsp-skill-track span,.bgsp.bgsp-motion .bgsp-skills.bgsp-inview .bgsp-skill-track span{transform:none!important;transition-property:width!important}
.bgsp .bgsp-skill-track{overflow:hidden}
@media(prefers-reduced-motion:reduce){.bgsp.bgsp-motion .bgsp-skill-track span{transition:none!important}}