.sxpj{--bg:#f3f1ee; --fg:#1f1f1f; --muted:#555; --soft:#999; --card:#fff; --line:#e4e0d9; --blue:#3452ff; --red:#ff1053; --dark:#15171d; --disp:"Space Grotesk","Segoe UI",Arial,sans-serif; --body:"Poppins","Segoe UI",Arial,sans-serif;}
.sxpj{color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.65;}
.sxpj-wrap{max-width:1100px; margin:0 auto; padding-inline:24px;}
.sxpj h1,.sxpj h2,.sxpj h3{font-family:var(--disp); font-weight:700; letter-spacing:-.01em; margin:0;}
.sxpj-badge{display:inline-block; background:#333; color:#fff; border-radius:20px; padding:7px 14px; font-size:14px; font-weight:700;}
.sxpj-btn{display:inline-block; background:var(--blue); color:#fff; border-radius:200px; padding:15px 28px; font-size:14px; font-weight:600; text-decoration:none; transition:background .2s, transform .15s;}
.sxpj-btn:hover{background:#2440d8; transform:translateY(-1px);}
.sxpj-rv{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.sxpj-rv.sxpj-on{opacity:1; transform:none;}
.sxpj-hero{padding:46px 0 10px;}
.sxpj-hero h1{font-size:clamp(32px,4.2vw,48px); line-height:1.1; margin:16px 0 14px;}
.sxpj-hero h1 em{font-style:normal; color:var(--blue);}
.sxpj-hero p.sxpj-sub{color:var(--muted); font-size:18px; max-width:52ch; margin:0;}
.sxpj-bar{display:flex; gap:5px; padding:9px 11px; background:#f6f5f2; border-bottom:1px solid #ececec;}
.sxpj-bar i{width:9px; height:9px; border-radius:50%; background:#e4e0d9;}
.sxpj-bar i:nth-child(1){background:#ff5f57}.sxpj-bar i:nth-child(2){background:#febc2e}.sxpj-bar i:nth-child(3){background:#28c840}
.sxpj-cs{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; padding:28px 0;}
.sxpj-cs.sxpj-rev{direction:rtl;}
.sxpj-cs > *{direction:ltr;}
@media(max-width:860px){.sxpj-cs{grid-template-columns:1fr; gap:18px; padding:20px 0;}}
.sxpj-frame{background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(31,31,31,.1); display:block;}
.sxpj-shot2{aspect-ratio:3/2; overflow:hidden; background:#fff; border-radius:13px;}
.sxpj-shot2 img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.sxpj-frame:hover .sxpj-shot2 img{transform:scale(1.2);}
.sxpj-no{font-family:var(--disp); font-size:14px; color:var(--blue); font-weight:700; letter-spacing:.1em;}
.sxpj-cs h3{font-size:26px; margin:8px 0 10px;}
.sxpj-cs p{color:var(--muted); font-size:15px; margin:0 0 16px;}
.sxpj-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px;}
.sxpj-ch{background:rgba(52,82,255,.07); color:var(--blue); border-radius:200px; padding:6px 13px; font-size:12.5px; font-weight:600;}
.sxpj-cta-l{color:var(--fg); font-weight:600; font-size:14.5px; text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:2px;}
.sxpj-cta-l:hover{color:var(--blue);}
.sxpj-sec-head{margin:44px 0 24px;}
.sxpj-sec-head h2{font-size:30px; margin-top:12px;}
.sxpj-pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 18px;}
@media(max-width:860px){.sxpj-pgrid{grid-template-columns:1fr;}}
.sxpj-pc{background:transparent; text-decoration:none; color:var(--fg); display:block;}

.sxpj-pc .sxpj-shot{aspect-ratio:3/2; overflow:hidden; background:#fff; border-radius:14px; box-shadow:0 10px 28px rgba(31,31,31,.1); transition:transform .35s, box-shadow .35s;}
.sxpj-pc:hover .sxpj-shot{box-shadow:0 18px 44px rgba(31,31,31,.18);}
.sxpj-pc .sxpj-shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}

.sxpj-pc .sxpj-ph{height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-size:40px; font-weight:700; color:#fff; background:linear-gradient(135deg,#3452ff,#7b5cff);}
.sxpj-pc .sxpj-meta{padding:13px 17px 15px;}
.sxpj-pc .sxpj-meta h3{font-size:15.5px; line-height:1.35;}
.sxpj-pc .sxpj-meta span{font-size:11.5px; color:var(--soft); text-transform:uppercase; letter-spacing:.06em;}
.sxpj-ctab{background:var(--dark); color:#fff; border-radius:18px; padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:52px 0 64px; position:relative; overflow:hidden;}
.sxpj-ctab::after{content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:var(--blue); filter:blur(90px); opacity:.3; right:-80px; top:-100px;}
.sxpj-ctab h2{color:#fff; font-size:28px; position:relative; z-index:1;}
.sxpj-ctab p{color:rgba(255,255,255,.65); margin:8px 0 0; font-size:15px; position:relative; z-index:1;}
.sxpj-ctab .sxpj-btn{position:relative; z-index:1;}
@media (prefers-reduced-motion:reduce){.sxpj-rv{transition:none; opacity:1; transform:none;} .sxpj-shot2 img,.sxpj-pc .sxpj-shot img{transition:none;}}

/* Hover: besisukantis spalvotas remelis */
@property --sxpjang{syntax:'<angle>'; initial-value:0deg; inherits:false;}
.sxpj-pc, .sxpj-frame{position:relative; z-index:0;}
.sxpj-pc::before, .sxpj-frame::before{content:""; position:absolute; inset:-3px; border-radius:17px; padding:3px; background:conic-gradient(from var(--sxpjang), #3452ff, #ff5a8d, #7b5cff, #3452ff); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; z-index:1; opacity:0; transition:opacity .25s; animation:sxpj-ringspin 4s linear infinite; pointer-events:none;}
.sxpj-pc:hover::before, .sxpj-frame:hover::before{opacity:1;}
@keyframes sxpj-ringspin{to{--sxpjang:360deg;}}
@media (prefers-reduced-motion:reduce){.sxpj-pc::before,.sxpj-frame::before{animation:none;}}

/* B3 */
.sxpj-pc .sxpj-meta{display:flex; flex-direction:column; padding:9px 4px 0; position:relative;}
.sxpj-pc .sxpj-meta h3{order:-1; font-size:15px; line-height:1.35;}
.sxpj-pc::before{display:none;}

/* B3v2 */
.sxpj-pc .sxpj-meta span{display:none;}
.sxpj-pc .sxpj-shot{position:relative;}
.sxpj-pc .sxpj-shot::after{content:""; position:absolute; inset:0; border-radius:14px; padding:3px; background:conic-gradient(from var(--sxpjang), #3452ff, #ff5a8d, #7b5cff, #3452ff); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; z-index:2; opacity:0; transition:opacity .25s; animation:sxpj-ringspin 4s linear infinite; pointer-events:none;}
.sxpj-pc:hover .sxpj-shot::after{opacity:1;}
.sxpj-pc:hover .sxpj-shot img{transform:scale(1.2);}

/* Projektu logotipai vietoj pavadinimo */
.sxpj-cs h3.sxpj-logo{margin:0 0 12px; line-height:1;}
.sxpj-cs h3.sxpj-logo img{max-height:52px; max-width:240px; width:auto; height:auto; display:block; object-fit:contain;}
@media(max-width:700px){.sxpj-cs h3.sxpj-logo img{max-height:42px; max-width:190px;}}
.sxpj-cs h3.sxpj-logo-tall img{max-height:80px; max-width:200px;}
@media(max-width:700px){.sxpj-cs h3.sxpj-logo-tall img{max-height:64px;}}