/* YOXOLO Digital Compass — an interactive-looking navigation experience with real destinations. */
.yx-compass{position:relative;padding:90px 0 86px;overflow:hidden;background:radial-gradient(circle at 50% 47%,#e0ecff 0,#f6f9ff 42%,#fff 82%);border-top:1px solid #e9eef9;border-bottom:1px solid #e5ebf8}
.yx-compass:before,.yx-compass:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.yx-compass:before{width:460px;height:460px;border:1px solid #bcd1fa7a;top:140px;left:calc(50% - 230px);box-shadow:0 0 0 70px #dfe9ff35,0 0 0 140px #e9f0ff24}
.yx-compass:after{width:9px;height:9px;background:#4f6aef;left:21%;top:39%;box-shadow:550px -80px 0 #51c9bd,300px 260px 0 #8b65d6}
.yx-compass .shell{position:relative;z-index:1}
.yx-compass-head{text-align:center;max-width:690px;margin:0 auto 39px}.yx-compass-kicker{display:inline-flex;border:1px solid #d2ddff;background:#eff3ff;color:#526ce2;padding:7px 14px;border-radius:100px;font-size:10px;font-weight:900;letter-spacing:1.6px}
.yx-compass-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.5;letter-spacing:-.6px;color:#172b58;margin:16px 0 11px}.yx-compass-head p{font-size:15px;color:#617292;line-height:1.9;margin:0 auto}
.yx-compass-stage{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:190px 1fr;align-items:center;gap:35px;direction:ltr}
.yx-compass-center{width:172px;height:172px;justify-self:center;border-radius:38px;transform:rotate(-6deg);background:linear-gradient(135deg,#243d88,#172954);box-shadow:0 25px 60px #1b387348,0 0 0 15px #dce7ff80;border:1px solid #adc0ee60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.yx-compass-center>span{font:900 79px/1 system-ui;color:#fff;text-shadow:0 15px 20px #00000025}.yx-compass-center small{font:900 11px/1 system-ui;letter-spacing:3px;color:#b8caff}
.yx-compass-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;direction:rtl}
.yx-compass-option{display:flex;flex-direction:column;position:relative;gap:13px;min-width:0;min-height:245px;padding:23px 22px;border:1px solid #dbe5f9;border-radius:21px;background:#ffffffed;box-shadow:0 16px 38px #203c7412;transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none!important}
.yx-compass-option:hover,.yx-compass-option:focus-visible{transform:translateY(-7px);box-shadow:0 25px 47px #203c7425;border-color:#a9baf3;outline-offset:2px}
.yx-compass-number{font:900 11px/1 system-ui;letter-spacing:2px;color:#7a8cac}
.yx-compass-symbol{display:grid;place-items:center;width:60px;height:60px;font-size:31px;font-weight:800;border-radius:19px;color:#536de9;background:linear-gradient(135deg,#edf1ff,#dce6ff)}
.yx-compass-option.creative .yx-compass-symbol{background:linear-gradient(135deg,#e2fbf8,#ccf0ed);color:#0da59c}
.yx-compass-option.books .yx-compass-symbol{background:linear-gradient(135deg,#f5eaff,#e9ddff);color:#9764cf}
.yx-compass-info strong{display:block;font-size:19px;font-weight:900;color:#172b59;line-height:1.45;margin-bottom:7px}.yx-compass-info small{display:block;font-size:12px;line-height:1.8;color:#687b99}
.yx-compass-arrow{position:absolute;inset-inline-end:19px;top:19px;color:#5570e7;font-size:20px}
.yx-compass-caption{text-align:center;margin-top:34px;color:#7484a3;font-size:12px;letter-spacing:.4px;font-weight:750}.yx-compass-pulse{display:inline-block;width:8px;height:8px;background:#25bba1;border-radius:50%;box-shadow:0 0 0 4px #25bba124;margin-inline-end:10px}
@media(max-width:900px){.yx-compass-stage{grid-template-columns:1fr;gap:30px}.yx-compass-center{width:100px;height:100px;border-radius:25px;transform:none}.yx-compass-center>span{font-size:47px}.yx-compass-options{grid-template-columns:repeat(3,minmax(0,1fr))}.yx-compass-option{min-height:225px}}
@media(max-width:670px){.yx-compass{padding:55px 0}.yx-compass-options{grid-template-columns:1fr}.yx-compass-option{min-height:0;display:grid;grid-template-columns:65px 1fr;gap:13px;align-items:center}.yx-compass-number{grid-column:1/-1}.yx-compass-info{grid-column:2}.yx-compass-arrow{top:22px}}
@media(prefers-reduced-motion:reduce){.yx-compass-option{transition:none}}