.buttonTest{background:#afb44a;border-radius:7px;height:30px;width:130px;padding:13px; color:black; font-weight: bold;
 font-size:15;}
.btn-ali-3{
    position: relative;
    display: inline-block;
    padding: 3px 5px;
    margin: 2px;
    border-radius: 8px;
    color: #fff !important;
    background: #8d371f;
    overflow: hidden;
    text-decoration: none;
    transition: 0.3s ease;
    margin: 0px auto;
    vertical-align: middle; 
}
.btn-ali-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transition: 0.4s ease;
}

.btn-ali-3:hover::before {
    left: 100%;
}
        .btn-ali-4{
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: #fff !important;
    background: #756D2F;
    overflow: hidden;
    text-decoration: none;
    transition: 0.3s ease;
    margin: 0px auto;
    vertical-align: middle; 
}

.custom-accordion-ali7 {
  border: 2px solid #afb84b; 
  border-radius: 8px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Tahoma', sans-serif; 
  width: 100%;
  max-width: 500px; 
}

.custom-accordion__item-ali7 {
  border-bottom: 1px solid #ffffff; 
}
.custom-accordion__item-ali7:last-child {
  border-bottom: none;
}

.custom-accordion__toggle-ali7 {
  display: none;
}

.custom-accordion__header-ali7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: rgba(175, 184, 75, 0.43);
  border-bottom: 2px solid #afb84b;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.custom-accordion__header-ali7:hover {
  background-color: rgba(175, 184, 75, 0.24);
}

.custom-accordion__title-ali7 {
  flex-grow: 1;
  text-align: center;
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  padding: 0 10px;
}
.custom-accordion__icon-left-ali7,
.custom-accordion__icon-right-ali7 {
  display: flex;
  align-items: center;
}
.custom-accordion__icon-left-ali7 img {
  transform: rotate(-90deg);
  transition: transform 0.3s ease-in-out;
}
.custom-accordion__icon-right-ali7 img {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}
.custom-accordion__content-ali7 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  background-color: rgba(173, 184, 75, 0.22); 
  color: #000000;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
  padding: 0 20px;
}

.custom-accordion__content-ali7 p {
    margin: 0;
    padding: 20px 0;
}
.custom-accordion__toggle-ali7:checked + .custom-accordion__header-ali7 {
  background-color: #f5f5f5;
  border-bottom-color: #afb84b;
}

.custom-accordion__toggle-ali7:checked + .custom-accordion__header-ali7 .custom-accordion__icon-left-ali7 img {
  transform: rotate(90deg);
}

.custom-accordion__toggle-ali7:checked + .custom-accordion__header-ali7 .custom-accordion__icon-right-ali7 img {
  transform: rotate(-180deg); 
}

.custom-accordion__toggle-ali7:checked ~ .custom-accordion__content-ali7 {
  max-height: 200px; 
  padding: 0 20px; 
}

    .btn-ali-34-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    margin: 2px 2px;
    border-radius: 10px;
    color: #fff !important;
    background: linear-gradient(135deg, #afb84b, #8d371f);
    overflow: hidden;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
    vertical-align: middle;
}

.btn-ali-34-modern:hover {
    background: linear-gradient(135deg, #8d371f, #afb84b);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.btn-ali-34-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0.8;
}

.btn-ali-34-modern:hover::before {
    left: 100%;
}
.btn-ali-34-modern:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

        .paragraphali-stylish3 {
    border-radius: 10px 5px 5px 10px;
    --color-start: rgba(175, 184, 79, 0.23);
    --color-end: rgba(175, 184, 75, 0.52);
    background: linear-gradient(135deg, var(--color-start), var(--color-end));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-right: 3px solid #afb84b;
	margin: auto;
    padding:5px 2px;
}

.sj-rowtitrali {
    transition: background-color 0.25s ease, color 0.25s ease;
    position: relative;
    z-index: 1;
        background-color: #afb84b;

}
        .sj-rowsatr1 {
            transition: background-color 0.25s ease, color 0.25s ease;
    position: relative;
    z-index: 1;
                background-color: rgba(175, 184, 75, 0.3);
}

.sj-rowsatr1:hover {
    background-color: rgba(141, 55, 31, 0.3);
    color: inherit;
}
.sj-rowsatr2 {
    transition: background-color 0.25s ease, color 0.25s ease;
    position: relative;
    z-index: 1;
        background-color: rgba(175, 184, 75, 0.5);

}

.sj-rowsatr2:hover {
    background-color: rgba(141, 55, 31, 0.3);
    color: inherit;
}
html {
    scroll-behavior: smooth !important;
}
.sj-responsive-table12 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12pt;
}

.sj-responsive-table12 th,
.sj-responsive-table12 td {
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
}

.btn-responsive12 {
  font-size: 9pt !important;
  padding: 5px 8px !important;
  line-height: 1.2 !important;
  display: inline-block;
}

@media (max-width: 600px) {
  .sj-responsive-table12 {
    font-size: 9pt;
  }

  .sj-responsive-table12 th,
  .sj-responsive-table12 td {
    padding: 6px 4px;
  }

  .btn-responsive12 {
    font-size: 8pt !important;
    padding: 4px 6px !important;
  }
}
/* ظرف اصلی */
.sj-faq-container13 { 
    width: 100%; 
    max-width: 1100px; 
    margin: 30px auto; 
    direction: rtl;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start; /* جلوگیری از کش آمدن آیتم‌ها و ایجاد فضای خالی */
}

.sj-faq-item13 {
    width: calc(50% - 10px); 
    background: #ffffff;
    border: 3px solid #afb84b;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .sj-faq-item13 {
        width: 100%;
    }

    .sj-faq-header13 {
        font-size: 13px; 
        padding: 16px 18px;
    }

    .sj-faq-content13 p {
        padding: 0 18px 18px 18px;
    }
}

.sj-faq-item13:hover { 
    border-color: #756e2f; 
}

.sj-faq-header13 {
    padding: 18px 25px;
    cursor: pointer;
    display: flex;
    background: rgba(175, 184, 75, 0.14);
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    color: #000000;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(175, 184, 75, 0.22);
}

.sj-faq-icon13 { 
    font-size: 20px; 
    color: #afb84b; 
    transition: transform 0.3s; 
}

.sj-faq-item13.active .sj-faq-icon13 { 
    transform: rotate(45deg); 
}

.sj-faq-content13 {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: inherit;
}

.sj-faq-content13 p { 
    padding: 0 25px 20px 25px; 
    margin: 0; 
    color: #666;
    line-height: 1.6;
}
.sjbackhedr1214 {
    width: 100%;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible; 
    padding: 20px 10px; 
}

.sjbackhedr1214::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url('/upload2/903/files/EjlatXkM.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.sjbackhedr1214 > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 767px) {
    .sjbackhedr1214 {
        padding: 15px 5px;
    }
}
.base-preview-popup-34-SJ121 {
    display: none !important;
}

.base-preview-popup-34-SJ121.is-open-SJ121 {
    display: inline-flex !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999999 !important;
    
    width: auto !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
    
    background: #ffffff !important;
    padding: 38px 8px 8px 8px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
    
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    animation: sjPopIn 0.2s ease-out forwards !important;
}

.base-preview-popup-34-SJ121 img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: calc(92vh - 50px) !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
}

.base-preview-popup-34-SJ121 .close-popup-SJ121,
.base-preview-popup-34-SJ121 .popup-close-btn-SJ121,
.base-preview-popup-34-SJ121 button,
.base-preview-popup-34-SJ121 span[class*="close"] {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    left: auto !important;
    
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    
    background: #e9ecef !important;
    color: #212529 !important;
    border: none !important;
    border-radius: 50% !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 100 !important;
    transition: all 0.2s ease !important;
}

.base-preview-popup-34-SJ121 .close-popup-SJ121:hover,
.base-preview-popup-34-SJ121 .popup-close-btn-SJ121:hover,
.base-preview-popup-34-SJ121 button:hover {
    background: #fa5252 !important;
    color: #ffffff !important;
}

@keyframes sjPopIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
.paragraphali-stylish3{
  display:block!important;
}
.sg-sticky-toggle{
    position:fixed!important;
    right:0!important;
    bottom:0!important;
    width:1px!important;
    height:1px!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    pointer-events:none!important;
}

#sgStickyBar{
    position:fixed!important;
    right:0!important;
    left:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    min-height:54px!important;
    z-index:9900!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:5px 60px!important;
    background:rgba(140,56,29,.86)!important;
    border-top:1px solid rgba(255,255,255,.28)!important;
    box-shadow:0 -5px 16px rgba(60,20,10,.18)!important;
    font-family:inherit!important;
}

.sg-sticky-toggle:checked + #sgStickyBar{
    display:none!important;
}

.sg-sticky-main{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 auto!important;
    padding:0!important;
}

.sg-sticky-text{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
}

.sg-sticky-text strong,
.sg-sticky-text span{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    text-align:center!important;
}

.sg-sticky-text strong{
    font-size:14px!important;
    font-weight:900!important;
    line-height:1.3!important;
}

.sg-sticky-text span{
    color:rgba(255,255,255,.90)!important;
    font-size:10.5px!important;
    font-weight:650!important;
    line-height:1.25!important;
}

.sg-sticky-btn{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    flex:0 0 auto!important;
    min-width:118px!important;
    min-height:39px!important;
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:8px 18px!important;
    border:1px solid rgba(255,255,255,.35)!important;
    border-radius:13px!important;
    background:#4f6f2b!important;
    color:#fff!important;
    text-decoration:none!important;
    font-size:12.5px!important;
    font-weight:900!important;
    line-height:1!important;
    box-shadow:0 4px 12px rgba(25,40,12,.25)!important;
    transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}

.sg-sticky-btn:link,
.sg-sticky-btn:visited{
    background:#4f6f2b!important;
    color:#fff!important;
    text-decoration:none!important;
}

.sg-sticky-btn:hover,
.sg-sticky-btn:focus{
    background:#31481b!important;
    color:#fff!important;
    text-decoration:none!important;
    transform:translateY(-2px)!important;
    box-shadow:0 7px 18px rgba(20,35,12,.34),0 0 0 3px rgba(255,255,255,.12)!important;
}

.sg-sticky-btn:active{
    background:#263a15!important;
    color:#fff!important;
    transform:scale(.97)!important;
}

.sg-sticky-btn::before{
    content:"";
    position:absolute!important;
    top:-70%!important;
    left:-40px!important;
    width:24px!important;
    height:240%!important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent)!important;
    opacity:0;
    transform:translateX(0) rotate(18deg);
    pointer-events:none!important;
    animation:sgButtonShine 4.2s ease-in-out infinite!important;
}

@keyframes sgButtonShine{
    0%,68%{
        opacity:0;
        transform:translateX(0) rotate(18deg);
    }

    74%{
        opacity:1;
    }

    90%{
        opacity:1;
        transform:translateX(190px) rotate(18deg);
    }

    100%{
        opacity:0;
        transform:translateX(190px) rotate(18deg);
    }
}

.sg-sticky-close{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:27px!important;
    height:27px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.45)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.14)!important;
    color:#fff!important;
    font:400 20px/1 Arial,sans-serif!important;
    cursor:pointer!important;
    user-select:none!important;
    transition:background-color .18s ease,transform .18s ease!important;
}

.sg-sticky-close:hover{
    background:rgba(255,255,255,.30)!important;
    color:#fff!important;
    transform:translateY(-50%) rotate(90deg)!important;
}

@media(min-width:601px){
    .sg-sticky-main{
        width:max-content!important;
        max-width:calc(100% - 150px)!important;
        flex:0 0 auto!important;
        gap:175px!important;
    }

    .sg-sticky-text{
        flex:0 0 auto!important;
        width:auto!important;
        max-width:none!important;
    }
}

@media(max-width:600px){
    #sgStickyBar{
        min-height:56px!important;
        padding:4px 46px!important;
    }

    .sg-sticky-main{
        width:100%!important;
        max-width:300px!important;
        gap:14px!important;
    }

    .sg-sticky-text{
        flex:1 1 180px!important;
        max-width:190px!important;
        gap:2px!important;
    }

    .sg-sticky-text strong{
        font-size:10.5px!important;
        line-height:1.3!important;
        white-space:normal!important;
    }

    .sg-sticky-text span{
        font-size:8.2px!important;
        line-height:1.25!important;
        white-space:normal!important;
    }

    .sg-sticky-btn{
        flex:0 0 76px!important;
        width:76px!important;
        min-width:76px!important;
        min-height:34px!important;
        padding:6px 8px!important;
        font-size:10px!important;
    }

    .sg-sticky-close{
        right:12px!important;
        width:24px!important;
        height:24px!important;
        font-size:17px!important;
    }
}

@media(max-width:400px){
    #sgStickyBar{
        padding:4px 42px!important;
    }

    .sg-sticky-main{
        max-width:285px!important;
        gap:11px!important;
    }

    .sg-sticky-text{
        flex-basis:170px!important;
        max-width:178px!important;
    }

    .sg-sticky-text strong{
        font-size:9.8px!important;
        line-height:1.25!important;
    }

    .sg-sticky-text span{
        font-size:7.7px!important;
        line-height:1.25!important;
    }

    .sg-sticky-btn{
        flex-basis:70px!important;
        width:70px!important;
        min-width:70px!important;
        padding-inline:6px!important;
        font-size:9.5px!important;
    }
}

@media(max-width:350px){
    #sgStickyBar{
        padding:4px 38px!important;
    }

    .sg-sticky-main{
        max-width:260px!important;
        gap:8px!important;
    }

    .sg-sticky-text{
        max-width:160px!important;
    }

    .sg-sticky-text strong{
        font-size:9.2px!important;
    }

    .sg-sticky-text span{
        font-size:7.2px!important;
    }

    .sg-sticky-btn{
        flex-basis:66px!important;
        width:66px!important;
        min-width:66px!important;
        font-size:9px!important;
    }

    .sg-sticky-close{
        right:9px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .sg-sticky-btn::before{
        animation:none!important;
    }

    .sg-sticky-btn,
    .sg-sticky-close{
        transition:none!important;
    }
}
#sgHeroFinal{
    --sg-green:#56640f;
    --sg-green-mid:#7d8b10;
    --sg-lime:#b7c826;
    --sg-lime-light:#d3dc4a;
    --sg-red:#8c381d;
    --sg-red-dark:#6f2a18;
    --sg-brick:#b84322;
    --sg-orange:#db5b31;
    --sg-dark:#20251d;
    --sg-muted:#676d63;

    position:relative;
    width:100%;
    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            135deg,
            #fdfdfb 0%,
            #f7f8f1 42%,
            #ffffff 72%,
            #f7f3ef 100%
        );

    border:1px solid rgba(60,68,45,.14);
    border-radius:32px;

    box-shadow:
        0 20px 44px rgba(24,30,18,.18),
        0 8px 20px rgba(35,42,27,.11),
        0 3px 8px rgba(40,30,22,.06),
        inset 0 1px 0 rgba(255,255,255,.98);
}

#sgHeroFinal,
#sgHeroFinal *{
    box-sizing:border-box;
}

.sjh12-bg{
    position:absolute;
    inset:0;
    z-index:-5;
    overflow:hidden;
    pointer-events:none;
}

.sjh12-center-light{
    position:absolute;
    width:980px;
    height:620px;
    left:50%;
    top:43%;
    transform:translate(-50%,-50%);
    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 34%,
            rgba(248,249,244,.70) 57%,
            rgba(255,255,255,0) 76%
        );
}

.sjh12-green-back{
    position:absolute;
    width:840px;
    height:610px;
    left:-410px;
    bottom:-300px;

    border-radius:
        22% 78% 58% 42%
        / 36% 48% 52% 64%;

    background:
        linear-gradient(
            135deg,
            #d6de42 0%,
            #b5c220 27%,
            #88940c 58%,
            #596610 100%
        );

    transform:rotate(13deg);
}

.sjh12-green-mid{
    position:absolute;
    width:720px;
    height:510px;
    left:-350px;
    bottom:-260px;

    border-radius:
        31% 69% 54% 46%
        / 45% 31% 69% 55%;

    background:
        linear-gradient(
            145deg,
            #a9b61d 0%,
            #7e8d0d 47%,
            #54620f 100%
        );

    transform:rotate(19deg);
}

.sjh12-green-front{
    position:absolute;
    width:610px;
    height:420px;
    left:-300px;
    bottom:-220px;

    border-radius:
        38% 62% 73% 27%
        / 56% 39% 61% 44%;

    background:
        linear-gradient(
            135deg,
            #d1dc3f 0%,
            #b5c625 45%,
            #8d9c12 100%
        );

    transform:rotate(25deg);
}

.sjh12-green-glow{
    position:absolute;
    width:430px;
    height:260px;
    left:-90px;
    bottom:-70px;
    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(226,237,95,.50),
            rgba(190,207,43,.18) 46%,
            transparent 72%
        );

    transform:rotate(-10deg);
}

.sjh12-red-back{
    position:absolute;
    width:570px;
    height:430px;
    right:-300px;
    bottom:-230px;

    border-radius:
        74% 26% 35% 65%
        / 61% 44% 56% 39%;

    background:
        linear-gradient(
            145deg,
            #762916 0%,
            #9d321a 35%,
            #c14422 68%,
            #e25f33 100%
        );

    transform:rotate(-18deg);
}

.sjh12-red-mid{
    position:absolute;
    width:450px;
    height:350px;
    right:-240px;
    bottom:-190px;

    border-radius:
        65% 35% 27% 73%
        / 52% 66% 34% 48%;

    background:
        linear-gradient(
            135deg,
            #9c3219 0%,
            #c44624 53%,
            #e5683e 100%
        );

    transform:rotate(-25deg);
}

.sjh12-red-front{
    position:absolute;
    width:340px;
    height:270px;
    right:-175px;
    bottom:-145px;

    border-radius:
        55% 45% 36% 64%
        / 63% 41% 59% 37%;

    background:
        linear-gradient(
            145deg,
            #bf4222,
            #e16135
        );

    transform:rotate(-32deg);
}

.sjh12-top-green{
    position:absolute;
    width:460px;
    height:180px;
    left:-180px;
    top:-105px;

    border-radius:
        0 0 75% 25%
        / 0 0 90% 10%;

    background:
        linear-gradient(
            110deg,
            rgba(112,126,13,.92),
            rgba(183,200,38,.65)
        );

    transform:rotate(-5deg);
}

.sjh12-top-red{
    position:absolute;
    width:390px;
    height:150px;
    right:-190px;
    top:-80px;

    border-radius:
        0 0 20% 80%
        / 0 0 15% 85%;

    background:
        linear-gradient(
            120deg,
            rgba(110,41,22,.82),
            rgba(198,67,34,.56)
        );

    transform:rotate(6deg);
}

.sjh12-wave-a{
    position:absolute;
    width:850px;
    height:310px;
    left:14%;
    top:70px;

    border-radius:
        34% 66% 49% 51%
        / 48% 42% 58% 52%;

    background:
        linear-gradient(
            135deg,
            rgba(220,222,216,.52),
            rgba(247,248,245,.10)
        );

    transform:rotate(5deg);
}

.sjh12-wave-b{
    position:absolute;
    width:760px;
    height:270px;
    left:34%;
    bottom:-95px;

    border-radius:
        59% 41% 63% 37%
        / 39% 60% 40% 61%;

    background:
        linear-gradient(
            125deg,
            rgba(216,220,211,.42),
            rgba(252,252,250,.08)
        );

    transform:rotate(-7deg);
}

.sjh12-lines{
    position:absolute;
    width:760px;
    height:320px;
    left:7%;
    top:-140px;
    opacity:.28;
    border-radius:50%;

    background:
        repeating-radial-gradient(
            ellipse at 46% 62%,
            transparent 0 7px,
            rgba(90,103,77,.12) 8px 9px
        );

    transform:rotate(-8deg);
}

.sjh12-grid{
    position:absolute;
    width:420px;
    height:260px;
    right:8%;
    top:12%;
    opacity:.12;

    background-image:
        linear-gradient(
            rgba(79,111,43,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79,111,43,.18) 1px,
            transparent 1px
        );

    background-size:26px 26px;

    -webkit-mask-image:
        linear-gradient(
            135deg,
            transparent 0%,
            #000 36%,
            #000 70%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            135deg,
            transparent 0%,
            #000 36%,
            #000 70%,
            transparent 100%
        );
}

.sjh12-shell{
    position:relative;
    z-index:3;

    width:min(1180px,calc(100% - 40px));
    min-height:440px;
    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(320px,.92fr);

    align-items:center;
    gap:clamp(28px,4vw,52px);

    padding:
        clamp(34px,4vw,46px)
        0;
}

.sjh12-content{
    min-width:0;
    direction:rtl;
    text-align:right;
}

#sgHeroFinal h1{
    max-width:730px;
    margin:0;

    color:var(--sg-red);

    font-size:clamp(28px,3.1vw,46px);
    font-weight:900;
    line-height:1.45;
    letter-spacing:-.6px;
}

.sjh12-desc{
    max-width:680px;
    margin:14px 0 0;

    color:#20221e;

    font-size:clamp(13.5px,1.15vw,16.5px);
    font-weight:600;
    line-height:2;
}

.sjh12-specs{
    width:100%;
    max-width:610px;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:8px;
    margin:20px 0 0;
    padding:7px;

    list-style:none;

    background:rgba(255,255,255,.83);

    border:1px solid rgba(79,111,43,.13);
    border-radius:16px;

    box-shadow:
        0 14px 28px rgba(31,38,24,.13),
        0 5px 12px rgba(79,96,15,.08),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.sjh12-spec{
    min-width:0;
    min-height:58px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:7px 10px;

    text-align:center;

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(250,251,246,.96),
            rgba(244,246,236,.92)
        );
}

.sjh12-spec strong{
    display:block;

    color:var(--sg-green);

    font-size:14px;
    font-weight:950;
    line-height:1.4;
}

.sjh12-spec span{
    display:block;

    margin-top:2px;

    color:var(--sg-muted);

    font-size:9.5px;
    font-weight:700;
    line-height:1.45;
}

.sjh12-actions{
    width:100%;

    display:flex;
    justify-content:center;

    margin-top:22px;
}

.sjh12-action-dock{
    position:relative;

    display:inline-flex;
    align-items:center;

    gap:6px;
    padding:6px;
    direction:rtl;

    border:1px solid rgba(67,76,52,.13);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(246,247,240,.90)
        );

    box-shadow:
        0 12px 26px rgba(31,38,24,.13),
        0 4px 10px rgba(70,78,48,.07),
        inset 0 1px 0 rgba(255,255,255,.98);
}

.sjh12-btn{
    position:relative;

    min-width:165px;
    min-height:49px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;
    padding:9px 18px;

    overflow:hidden;

    border-radius:13px;

    text-decoration:none!important;

    font-size:12.5px;
    font-weight:900;
    line-height:1;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.sjh12-btn-text{
    position:relative;
    z-index:2;
    white-space:nowrap;
}

.sjh12-btn-icon{
    position:relative;
    z-index:2;

    width:28px;
    height:28px;
    flex:0 0 28px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    transition:
        transform .20s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.sjh12-btn-primary{
    color:#fff!important;

    border:1px solid rgba(73,88,13,.95);

    background:
        linear-gradient(
            135deg,
            #788716 0%,
            #5f700f 45%,
            #46570d 100%
        );

    box-shadow:
        0 8px 18px rgba(75,91,14,.23),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.sjh12-btn-primary::before{
    content:"";

    position:absolute;

    width:86px;
    height:110px;

    top:-50px;
    right:-30px;

    transform:rotate(28deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    pointer-events:none;
}

.sjh12-btn-primary .sjh12-btn-icon{
    color:#52620e;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 3px 8px rgba(30,40,15,.16);
}

.sjh12-btn-primary .sjh12-btn-icon i{
    display:block;
    font-size:15px;
    line-height:1;
}

.sjh12-btn-secondary{
    color:#fff!important;

    border:1px solid rgba(111,42,24,.92);

    background:
        linear-gradient(
            135deg,
            #ad492a 0%,
            #91391f 48%,
            #742b19 100%
        );

    box-shadow:
        0 8px 18px rgba(113,43,23,.20),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.sjh12-btn-secondary::before{
    content:"";

    position:absolute;

    width:86px;
    height:110px;

    top:-50px;
    right:-30px;

    transform:rotate(28deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.11),
            transparent
        );

    pointer-events:none;
}

.sjh12-btn-secondary .sjh12-btn-icon{
    color:#8c381d;

    background:#fff;

    box-shadow:
        0 3px 8px rgba(79,32,19,.18);
}

.sjh12-down-chevron::before{
    content:"";

    display:block;

    width:8px;
    height:8px;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:rotate(45deg);
    transform-origin:center;
}

.sjh12-btn-primary:hover,
.sjh12-btn-primary:focus-visible,
.sjh12-btn-secondary:hover,
.sjh12-btn-secondary:focus-visible{
    color:#fff!important;
    transform:translateY(-2px);
}

.sjh12-btn-primary:hover,
.sjh12-btn-primary:focus-visible{
    background:
        linear-gradient(
            135deg,
            #697a12,
            #4b5d0d
        );

    box-shadow:
        0 12px 23px rgba(66,82,12,.29),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.sjh12-btn-secondary:hover,
.sjh12-btn-secondary:focus-visible{
    background:
        linear-gradient(
            135deg,
            #9d3d21,
            #6f2918
        );

    box-shadow:
        0 12px 23px rgba(100,39,22,.27),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.sjh12-btn-primary:hover .sjh12-btn-icon,
.sjh12-btn-primary:focus-visible .sjh12-btn-icon,
.sjh12-btn-secondary:hover .sjh12-btn-icon,
.sjh12-btn-secondary:focus-visible .sjh12-btn-icon{
    transform:
        scale(1.08)
        rotate(-5deg);
}

.sjh12-btn:focus-visible{
    outline:3px solid rgba(183,200,38,.34);
    outline-offset:3px;
}

.sjh12-visual{
    position:relative;

    min-width:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 8px;
}

.sjh12-image-stage{
    position:relative;

    width:min(100%,500px);

    aspect-ratio:1 / 1;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    padding:12px;
}

.sjh12-image-stage::before{
    content:"";

    position:absolute;

    width:88%;
    height:88%;

    left:6%;
    top:6%;

    border-radius:
        59% 41% 65% 35%
        / 42% 61% 39% 58%;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(255,255,255,.97),
            rgba(255,255,255,.79) 48%,
            rgba(202,213,116,.16) 68%,
            rgba(255,255,255,0) 74%
        );

    border:1px solid rgba(79,111,43,.11);

    transform:rotate(-6deg);
}

.sjh12-image-stage::after{
    content:"";

    position:absolute;

    width:60%;
    height:16px;

    left:50%;
    bottom:7%;

    transform:translateX(-50%);

    border-radius:50%;

    background:rgba(38,48,27,.08);
}

.sjh12-image{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    display:block;

    max-width:100%;

    object-fit:contain;
    object-position:center;
}

@media(max-width:1199px){

    .sjh12-shell{
        width:calc(100% - 34px);

        grid-template-columns:
            minmax(0,1.05fr)
            minmax(300px,.95fr);

        gap:30px;

        padding:34px 0;
    }

    #sgHeroFinal h1{
        font-size:clamp(27px,3vw,39px);
    }

    .sjh12-image-stage{
        width:min(100%,440px);
        padding:12px;
    }

    .sjh12-specs{
        max-width:580px;
    }
}

@media(max-width:980px){

    .sjh12-shell{
        grid-template-columns:
            minmax(0,1.05fr)
            minmax(270px,.95fr);

        gap:24px;
    }

    #sgHeroFinal h1{
        font-size:clamp(26px,3.4vw,35px);
    }

    .sjh12-desc{
        font-size:13.5px;
    }

    .sjh12-image-stage{
        width:min(100%,390px);
        padding:13px;
    }

    .sjh12-btn{
        min-width:150px;

        padding-left:15px;
        padding-right:15px;
    }
}

@media(max-width:850px){

    #sgHeroFinal{
        border-radius:27px;
    }

    .sjh12-shell{
        width:calc(100% - 30px);

        min-height:auto;

        grid-template-columns:1fr;

        gap:18px;

        padding:30px 0 26px;
    }

    .sjh12-content{
        text-align:center;
    }

    #sgHeroFinal h1,
    .sjh12-desc,
    .sjh12-specs{
        margin-left:auto;
        margin-right:auto;
    }

    #sgHeroFinal h1{
        max-width:680px;

        font-size:clamp(27px,5vw,38px);

        line-height:1.45;
    }

    .sjh12-desc{
        max-width:650px;

        margin-top:11px;

        font-size:14px;

        line-height:1.95;
    }

    .sjh12-specs{
        max-width:590px;
        margin-top:17px;
    }

    .sjh12-actions{
        margin-top:18px;
    }

    .sjh12-visual{
        padding:0 18px;
    }

    .sjh12-image-stage{
        width:min(72vw,410px);
        padding:16px;
    }

    .sjh12-grid{
        right:-80px;
    }

    .sjh12-green-back{
        left:-540px;
    }

    .sjh12-green-mid{
        left:-480px;
    }

    .sjh12-green-front{
        left:-420px;
    }

    .sjh12-red-back{
        right:-420px;
    }

    .sjh12-red-mid{
        right:-360px;
    }

    .sjh12-red-front{
        right:-270px;
    }
}

@media(max-width:640px){

    #sgHeroFinal{
        border-radius:24px;
    }

    .sjh12-shell{
        width:calc(100% - 26px);

        gap:16px;

        padding:26px 0 22px;
    }

    #sgHeroFinal h1{
        max-width:520px;

        font-size:clamp(24px,6vw,31px);

        line-height:1.5;
    }

    .sjh12-desc{
        max-width:520px;

        font-size:13px;
    }

    .sjh12-specs{
        max-width:500px;

        gap:6px;

        padding:6px;
    }

    .sjh12-spec{
        padding:7px 6px;
    }

    .sjh12-spec strong{
        font-size:13px;
    }

    .sjh12-spec span{
        font-size:8.7px;
    }

    .sjh12-action-dock{
        max-width:360px;
    }

    .sjh12-visual{
        padding:0 20px;
    }

    .sjh12-image-stage{
        width:min(78vw,370px);
        padding:18px;
    }
}

@media(max-width:520px){

    #sgHeroFinal{
        border-radius:22px;

        box-shadow:
            0 15px 32px rgba(24,30,18,.15),
            0 6px 15px rgba(35,42,27,.09),
            0 2px 6px rgba(40,30,22,.05),
            inset 0 1px 0 rgba(255,255,255,.98);
    }

    .sjh12-shell{
        width:calc(100% - 24px);

        gap:14px;

        padding:23px 0 20px;
    }

    #sgHeroFinal h1{
        max-width:400px;

        font-size:clamp(23px,6.8vw,26px);
        font-weight:900;

        line-height:1.52;

        letter-spacing:-.3px;
    }

    .sjh12-desc{
        max-width:410px;

        margin-top:9px;

        color:#20221e;

        font-size:12.5px;

        line-height:1.9;
    }

    .sjh12-specs{
        width:100%;
        max-width:410px;

        gap:5px;

        margin-top:14px;

        padding:5px;

        border-radius:13px;

        box-shadow:
            0 10px 20px rgba(31,38,24,.11),
            0 4px 9px rgba(79,96,15,.06),
            inset 0 1px 0 rgba(255,255,255,.92);
    }

    .sjh12-spec{
        min-height:52px;

        padding:6px 4px;
    }

    .sjh12-spec strong{
        font-size:12px;
    }

    .sjh12-spec span{
        font-size:8px;
        line-height:1.4;
    }

    .sjh12-actions{
        margin-top:16px;
    }

    .sjh12-action-dock{
        width:min(100%,340px);

        gap:5px;

        padding:5px;

        border-radius:15px;

        box-shadow:
            0 9px 19px rgba(31,38,24,.11),
            0 3px 8px rgba(70,78,48,.06),
            inset 0 1px 0 rgba(255,255,255,.98);
    }

    .sjh12-btn{
        flex:1;

        min-width:0;
        min-height:44px;

        gap:6px;

        padding:7px 8px;

        border-radius:11px;

        font-size:10.5px;
    }

    .sjh12-btn-icon{
        width:24px;
        height:24px;

        flex-basis:24px;
    }

    .sjh12-btn-primary .sjh12-btn-icon i{
        font-size:13px;
    }

    .sjh12-down-chevron::before{
        width:7px;
        height:7px;
    }

    .sjh12-visual{
        width:100%;

        padding:0 24px;
    }

    .sjh12-image-stage{
        width:min(80vw,335px);
        padding:18px;
    }

    .sjh12-image{
        width:100%;
        height:100%;

        object-fit:contain;
        object-position:center;
    }

    .sjh12-center-light{
        width:600px;
        height:650px;
    }

    .sjh12-wave-a{
        width:550px;
        height:240px;

        left:-80px;
        top:180px;
    }

    .sjh12-wave-b{
        width:520px;
        height:230px;

        left:8%;
        bottom:-80px;
    }

    .sjh12-green-back{
        width:600px;
        height:390px;

        left:-470px;
        bottom:-200px;
    }

    .sjh12-green-mid{
        width:530px;
        height:340px;

        left:-420px;
        bottom:-175px;
    }

    .sjh12-green-front{
        width:450px;
        height:290px;

        left:-360px;
        bottom:-155px;
    }

    .sjh12-green-glow{
        width:300px;
        height:180px;

        left:-110px;
        bottom:-55px;
    }

    .sjh12-red-back{
        width:390px;
        height:300px;

        right:-315px;
        bottom:-150px;
    }

    .sjh12-red-mid{
        width:330px;
        height:250px;

        right:-270px;
        bottom:-130px;
    }

    .sjh12-red-front{
        width:260px;
        height:210px;

        right:-210px;
        bottom:-110px;
    }

    .sjh12-top-green{
        width:300px;
        height:120px;

        left:-180px;
        top:-75px;
    }

    .sjh12-top-red{
        width:260px;
        height:100px;

        right:-170px;
        top:-65px;
    }

    .sjh12-lines{
        width:470px;
        height:230px;

        left:-80px;
        top:-110px;

        opacity:.19;
    }

    .sjh12-grid{
        display:none;
    }
}

@media(max-width:380px){

    .sjh12-shell{
        width:calc(100% - 20px);

        padding-top:20px;
        padding-bottom:18px;
    }

    #sgHeroFinal h1{
        font-size:22px;

        line-height:1.55;
    }

    .sjh12-desc{
        font-size:11.8px;

        line-height:1.85;
    }

    .sjh12-specs{
        gap:4px;

        padding:4px;
    }

    .sjh12-spec{
        min-height:50px;

        padding:5px 3px;
    }

    .sjh12-spec strong{
        font-size:11px;
    }

    .sjh12-spec span{
        font-size:7.3px;
    }

    .sjh12-action-dock{
        width:100%;
    }

    .sjh12-btn{
        gap:4px;

        padding-inline:5px;

        font-size:9.6px;
    }

    .sjh12-btn-icon{
        width:22px;
        height:22px;

        flex-basis:22px;
    }

    .sjh12-btn-primary .sjh12-btn-icon i{
        font-size:12px;
    }

    .sjh12-down-chevron::before{
        width:6px;
        height:6px;
    }

    .sjh12-visual{
        padding:0 22px;
    }

    .sjh12-image-stage{
        width:min(78vw,305px);
        padding:16px;
    }
}

@media(max-width:330px){

    #sgHeroFinal{
        border-radius:18px;
    }

    .sjh12-shell{
        width:calc(100% - 16px);
    }

    #sgHeroFinal h1{
        font-size:20.5px;
    }

    .sjh12-desc{
        font-size:11px;
    }

    .sjh12-spec strong{
        font-size:10.5px;
    }

    .sjh12-spec span{
        font-size:7px;
    }

    .sjh12-btn{
        font-size:9px;

        padding-inline:4px;
    }

    .sjh12-btn-icon{
        width:21px;
        height:21px;

        flex-basis:21px;
    }

    .sjh12-visual{
        padding:0 18px;
    }

    .sjh12-image-stage{
        width:min(76vw,280px);
        padding:14px;
    }
}

@media(prefers-reduced-motion:reduce){

    .sjh12-btn,
    .sjh12-btn-icon{
        transition:none;
    }
}
.sjv12-wrap{
    width:min(100%,820px);
    margin:28px auto;
    padding:0 16px;
    box-sizing:border-box;
}

.sjv12-frame{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;

    border-radius:18px;
    background:#111;

    box-shadow:
        0 12px 28px rgba(25,30,20,.12),
        0 4px 10px rgba(25,30,20,.06);
}

.sjv12-frame iframe{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    margin:0;
    padding:0;

    border:0;
}

@media(max-width:768px){

    .sjv12-wrap{
        width:100%;
        margin:22px auto;
        padding:0 12px;
    }

    .sjv12-frame{
        border-radius:14px;
    }
}

@media(max-width:480px){

    .sjv12-wrap{
        margin:18px auto;
        padding:0 8px;
    }

    .sjv12-frame{
        border-radius:12px;
    }
}
.sjb12-btn,
.sjb12-btn *{
    box-sizing:border-box;
}

.sjb12-btn{
    --sjb12-bg-start:#56640f;
    --sjb12-bg-mid:#4f5f0d;
    --sjb12-bg-end:#46570d;

    --sjb12-bg-hover-start:#52640e;
    --sjb12-bg-hover-mid:#48580c;
    --sjb12-bg-hover-end:#3f500c;

    --sjb12-text:#ffffff;
    --sjb12-border:#43520c;

    --sjb12-icon-bg:#ffffff;
    --sjb12-icon-color:#52620e;

    position:relative;
    isolation:isolate;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    max-width:100%;
    min-width:160px;
    min-height:50px;

    gap:10px;
    padding:10px 18px;

    overflow:hidden;

    direction:rtl;

    border:1px solid var(--sjb12-border);
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--sjb12-bg-start) 0%,
            var(--sjb12-bg-mid) 48%,
            var(--sjb12-bg-end) 100%
        );

    color:var(--sjb12-text) !important;

    box-shadow:
        0 9px 20px rgba(70,84,13,.24),
        0 3px 8px rgba(45,56,9,.12),
        inset 0 1px 0 rgba(255,255,255,.16);

    font-family:inherit;
    font-size:13px;
    font-weight:900;
    line-height:1.45;

    text-align:center;
    text-decoration:none !important;

    cursor:pointer;
    user-select:none;

    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;

    transform:translateY(0);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.sjb12-btn::before{
    content:"";

    position:absolute;
    z-index:-1;
    inset:0;

    background:
        linear-gradient(
            135deg,
            var(--sjb12-bg-hover-start) 0%,
            var(--sjb12-bg-hover-mid) 48%,
            var(--sjb12-bg-hover-end) 100%
        );

    opacity:0;

    transition:opacity .18s ease;

    pointer-events:none;
}

.sjb12-btn::after{
    content:"";

    position:absolute;
    z-index:1;

    width:70px;
    height:150%;

    top:-25%;
    left:-105px;

    transform:skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    pointer-events:none;

    transition:left .42s ease;
}

.sjb12-btn-text{
    position:relative;
    z-index:3;

    max-width:100%;

    color:inherit;

    white-space:nowrap;
}

.sjb12-btn-icon{
    position:relative;
    z-index:3;

    width:30px;
    height:30px;
    flex:0 0 30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--sjb12-icon-bg);
    color:var(--sjb12-icon-color);

    box-shadow:
        0 3px 8px rgba(28,36,13,.17),
        inset 0 1px 0 rgba(255,255,255,.95);

    transform:translateX(0) scale(1);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.sjb12-btn-icon i{
    display:block;

    margin:0;
    padding:0;

    color:inherit;

    font-size:15px;
    line-height:1;

    transform:translateX(0);

    transition:transform .18s ease;
}

@media(hover:hover) and (pointer:fine){

    .sjb12-btn:hover{
        transform:translateY(-2px);

        border-color:#39480a;

        box-shadow:
            0 13px 26px rgba(70,84,13,.29),
            0 5px 11px rgba(45,56,9,.14),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .sjb12-btn:hover::before{
        opacity:1;
    }

    .sjb12-btn:hover::after{
        left:calc(100% + 35px);
    }

    .sjb12-btn:hover .sjb12-btn-icon{
        transform:translateX(-2px) scale(1.08) rotate(-4deg);

        box-shadow:
            0 5px 10px rgba(28,36,13,.20),
            inset 0 1px 0 rgba(255,255,255,.98);
    }

    .sjb12-btn:hover .sjb12-btn-icon i{
        transform:translateX(-1px);
    }
}

.sjb12-btn:focus-visible{
    outline:3px solid rgba(183,200,38,.55);
    outline-offset:4px;

    transform:translateY(-2px);

    border-color:#39480a;

    box-shadow:
        0 13px 26px rgba(70,84,13,.28),
        0 0 0 4px rgba(183,200,38,.15),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.sjb12-btn:focus-visible::before{
    opacity:1;
}

.sjb12-btn:focus-visible .sjb12-btn-icon{
    transform:translateX(-2px) scale(1.08);
}

.sjb12-btn:active{
    transform:translateY(0) scale(.985);

    box-shadow:
        0 5px 12px rgba(70,84,13,.21),
        inset 0 2px 4px rgba(30,40,7,.14);
}

.sjb12-btn:active .sjb12-btn-icon{
    transform:translateX(-1px) scale(1.02);
}

.sjb12-btn[aria-disabled="true"]{
    opacity:.58;
    cursor:not-allowed;
    pointer-events:none;
}

.sjb12-btn-center{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.sjb12-btn-full{
    width:100%;
}

@media(max-width:640px){

    .sjb12-btn{
        min-width:145px;
        min-height:48px;

        gap:8px;
        padding:9px 15px;

        border-radius:12px;

        font-size:12px;
    }

    .sjb12-btn-icon{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .sjb12-btn-icon i{
        font-size:14px;
    }
}

@media(max-width:380px){

    .sjb12-btn{
        min-width:135px;

        gap:7px;
        padding:8px 12px;

        font-size:11px;
    }

    .sjb12-btn-icon{
        width:26px;
        height:26px;
        flex-basis:26px;
    }

    .sjb12-btn-icon i{
        font-size:13px;
    }

    .sjb12-btn-text{
        white-space:normal;
        overflow-wrap:break-word;
    }
}

@media(prefers-reduced-motion:reduce){

    .sjb12-btn,
    .sjb12-btn::before,
    .sjb12-btn::after,
    .sjb12-btn-icon,
    .sjb12-btn-icon i{
        transition:none;
    }
}