:root{
    --jyh-blue:#1267f4;
    --jyh-blue2:#39a8ff;
    --jyh-navy:#0b1739;
    --jyh-text:#42506f;
    --jyh-line:#e7edf6;
    --jyh-soft:#f6f9ff;
}

.jyhero,
.jyhero *{box-sizing:border-box}

.jyhero{
    position:relative;
    overflow:hidden;
    background:#fff;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--jyh-navy);
    padding:72px 24px 26px;
}

.jyhero:before{
    content:"";
    position:absolute;
    width:760px;
    height:760px;
    right:-230px;
    top:-330px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(75,160,255,.15) 0%,rgba(75,160,255,.07) 36%,rgba(255,255,255,0) 70%);
    pointer-events:none;
}

.jyhero__inner{
    position:relative;
    z-index:2;
    width:min(1380px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
    align-items:center;
    gap:54px;
    min-height:560px;
}

.jyhero__copy{max-width:650px}

.jyhero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 13px;
    border:1px solid #dce9ff;
    background:#f6f9ff;
    border-radius:999px;
    color:#1b61d6;
    font-size:13px;
    font-weight:700;
    margin-bottom:22px;
}

.jyhero__eyebrow-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--jyh-blue2),var(--jyh-blue));
    box-shadow:0 0 0 5px rgba(18,103,244,.08);
}

.jyhero h1{
    margin:0;
    max-width:640px;
    color:#0b1739;
    font-size:clamp(48px,5vw,76px);
    line-height:1.02;
    letter-spacing:-.052em;
    font-weight:800;
}

.jyhero h1::first-line{
    color:#0b1739;
}

.jyhero__lead{
    max-width:630px;
    margin:25px 0 0;
    color:#53617d;
    font-size:18px;
    line-height:1.75;
}

.jyhero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px;
}

.jyhero__btn{
    min-height:54px;
    padding:0 23px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    gap:22px;
    justify-content:center;
    font-size:15px;
    font-weight:750;
    text-decoration:none!important;
    transition:.18s ease;
}

.jyhero__btn--primary{
    color:#fff!important;
    background:var(--jyh-blue);
    border:1px solid var(--jyh-blue);
    box-shadow:0 10px 25px rgba(18,103,244,.18);
}

.jyhero__btn--primary:hover{
    background:#0c58d8;
    transform:translateY(-2px);
}

.jyhero__btn--secondary{
    color:#145bcc!important;
    background:#fff;
    border:1px solid #bcd3f9;
}

.jyhero__btn--secondary:hover{
    border-color:#7aaaf1;
    background:#f8fbff;
    transform:translateY(-2px);
}

.jyhero__trust{
    margin-top:34px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:11px;
    color:#6d7890;
    font-size:12.5px;
    font-weight:600;
}

.jyhero__trust i{
    width:4px;
    height:4px;
    background:#b8c4d7;
    border-radius:50%;
}

.jyhero__visual{
    position:relative;
    min-height:500px;
    isolation:isolate;
}

.jyhero__orb{
    position:absolute;
    width:410px;
    height:410px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle at 42% 35%,#ffffff 0%,#f7fbff 27%,#e8f3ff 63%,#d9eaff 100%);
    border:1px solid #dcecff;
    box-shadow:
        0 35px 90px rgba(36,113,207,.13),
        inset 0 0 60px rgba(255,255,255,.75);
}

.jyhero__orb:before,
.jyhero__orb:after{
    content:"";
    position:absolute;
    inset:-55px;
    border-radius:50%;
    border:1px dashed rgba(72,141,230,.26);
}

.jyhero__orb:after{
    inset:-115px;
    border-style:solid;
    border-color:rgba(72,141,230,.12);
}

.jyhero__core{
    position:absolute;
    width:220px;
    height:170px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:28px;
    background:linear-gradient(145deg,#fff,#eef6ff);
    border:1px solid #dcecff;
    box-shadow:0 26px 65px rgba(23,90,176,.18);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.jyhero__core strong{
    font-size:26px;
    letter-spacing:-.035em;
    margin-top:12px;
}

.jyhero__core small{
    font-size:12px;
    color:#7a869d;
    margin-top:3px;
}

.jyhero__core-mark{
    position:relative;
    width:55px;
    height:55px;
    border-radius:18px;
    background:linear-gradient(135deg,#20b8ff,#1267f4 54%,#6950ff);
    box-shadow:0 10px 25px rgba(18,103,244,.22);
    transform:rotate(7deg);
}

.jyhero__core-mark:before,
.jyhero__core-mark:after{
    content:"";
    position:absolute;
    width:30px;
    height:12px;
    border:6px solid #fff;
    border-left:0;
    border-radius:0 20px 20px 0;
}

.jyhero__core-mark:before{left:7px;top:10px;transform:rotate(35deg)}
.jyhero__core-mark:after{right:7px;bottom:10px;transform:rotate(215deg)}

.jyhero__tile{
    position:absolute;
    z-index:8;
    width:190px;
    min-height:84px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px;
    background:rgba(255,255,255,.96);
    border:1px solid #e1e9f5;
    border-radius:18px;
    box-shadow:0 16px 42px rgba(18,65,120,.11);
}

.jyhero__tile-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:#1267f4;
    background:#eef5ff;
}

.jyhero__tile-icon svg{width:23px;height:23px}

.jyhero__tile strong{
    display:block;
    font-size:14px;
    margin-bottom:4px;
}

.jyhero__tile small{
    display:block;
    color:#7b879d;
    font-size:10.5px;
    line-height:1.35;
}

.jyhero__tile--products{left:3%;top:13%}
.jyhero__tile--services{right:2%;top:16%}
.jyhero__tile--automation{left:5%;bottom:12%}
.jyhero__tile--web{right:3%;bottom:15%}

.jyhero__line{
    position:absolute;
    z-index:3;
    width:170px;
    height:1px;
    background:linear-gradient(90deg,transparent,#8fbcf5,transparent);
    transform-origin:left center;
}

.jyhero__line--one{left:26%;top:35%;transform:rotate(15deg)}
.jyhero__line--two{right:12%;top:36%;transform:rotate(164deg)}
.jyhero__line--three{left:25%;bottom:32%;transform:rotate(-18deg)}
.jyhero__line--four{right:11%;bottom:34%;transform:rotate(195deg)}

.jyhero__featured{
    position:relative;
    z-index:3;
    width:min(1380px,100%);
    margin:20px auto 0;
    min-height:108px;
    display:grid;
    grid-template-columns:180px 1.35fr 1.65fr;
    align-items:center;
    gap:28px;
    padding:22px 28px;
    border:1px solid #e4ebf5;
    border-radius:18px;
    background:linear-gradient(90deg,#fbfdff,#f6f9ff);
    box-shadow:0 10px 35px rgba(15,23,42,.04);
}

.jyhero__featured-label{
    color:#1267f4;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
}

.jyhero__featured-copy strong{
    display:block;
    font-size:20px;
    letter-spacing:-.025em;
    margin-bottom:6px;
}

.jyhero__featured-copy span{
    display:block;
    color:#68758e;
    font-size:12.5px;
    line-height:1.55;
}

.jyhero__featured-points{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
}

.jyhero__featured-points span{
    padding:8px 10px;
    border:1px solid #dfe9f7;
    border-radius:999px;
    background:#fff;
    color:#52617d;
    font-size:11.5px;
    white-space:nowrap;
}

@media(max-width:1050px){
    .jyhero{padding-top:48px}
    .jyhero__inner{
        grid-template-columns:1fr;
        gap:24px;
    }
    .jyhero__copy{max-width:760px}
    .jyhero__visual{min-height:520px}
    .jyhero__featured{
        grid-template-columns:1fr;
        gap:14px;
    }
    .jyhero__featured-points{justify-content:flex-start}
}

@media(max-width:680px){
    .jyhero{padding:34px 18px 20px}
    .jyhero h1{font-size:44px}
    .jyhero__lead{font-size:16px}
    .jyhero__actions{display:grid;grid-template-columns:1fr}
    .jyhero__btn{width:100%}
    .jyhero__trust{line-height:1.7}
    .jyhero__trust i{display:none}
    .jyhero__visual{min-height:420px}
    .jyhero__orb{width:265px;height:265px}
    .jyhero__core{width:160px;height:125px;border-radius:22px}
    .jyhero__core strong{font-size:21px}
    .jyhero__core-mark{width:44px;height:44px}
    .jyhero__tile{width:145px;min-height:66px;padding:10px;border-radius:14px}
    .jyhero__tile-icon{width:34px;height:34px}
    .jyhero__tile small{display:none}
    .jyhero__tile--products{left:0;top:8%}
    .jyhero__tile--services{right:0;top:11%}
    .jyhero__tile--automation{left:0;bottom:7%}
    .jyhero__tile--web{right:0;bottom:9%}
    .jyhero__featured{padding:20px}
}