*{box-sizing:border-box}body{margin:0;font:17px/1.7 system-ui,Segoe UI,Arial,sans-serif;color:#1d2433;background:#fafbfc}a{color:#0a5c8f}header{background:#0b2a3f;color:#fff}.w{max-width:1080px;margin:auto;padding:0 18px}.hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}.logo{color:#fff;font-weight:800;font-size:22px;text-decoration:none}.logo span{color:#f2b134}nav a{color:#dbe9f3;margin-right:14px;text-decoration:none;font-size:15px}nav a:hover{color:#fff}.hero{background:#e8f1f7;padding:36px 0}.hero h1{margin:0 0 8px;font-size:2rem}form.s{display:flex;gap:8px;margin-top:14px}form.s input{flex:1;padding:11px;border:1px solid #9bb;border-radius:6px;font-size:16px}button,.btn{background:#0a5c8f;color:#fff;border:0;border-radius:6px;padding:11px 16px;text-decoration:none;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:20px 0}.card{background:#fff;border:1px solid #dde4ea;border-radius:8px;overflow:hidden}.card img{width:100%;height:auto;display:block}.card div{padding:12px 14px}.card h3{margin:.2em 0;font-size:1.05rem}.meta{font-size:.85rem;color:#566}.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;margin:1em 0}th,td{border:1px solid #ccd;padding:8px;text-align:left}th{background:#eef3f7}.note{background:#fff7e0;border-left:4px solid #f2b134;padding:10px 14px;margin:20px 0;font-size:.95rem}article{max-width:760px;margin:auto}article img{max-width:100%;height:auto}footer{background:#0b2a3f;color:#cfe;padding:26px 0;margin-top:40px;font-size:.92rem}footer a{color:#fff;margin-right:12px}.bc{font-size:.85rem;margin:14px 0}@media(max-width:600px){body{font-size:16px}.hero h1{font-size:1.6rem}}
.h3{background:radial-gradient(circle at 70% 30%,#14507a,#071a2a 70%);color:#fff;padding:48px 0 56px;overflow:hidden}
.h3 .w{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.h3 h1{font-size:2.4rem;line-height:1.2;margin:0 0 12px}.h3 h1 em{color:#f2b134;font-style:normal}
.h3 p{color:#d5e6f2}.h3 form.s input{background:#fff}.h3 button{background:#f2b134;color:#111;font-weight:700}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.badges span{background:#ffffff1c;border:1px solid #ffffff33;border-radius:20px;padding:4px 12px;font-size:.85rem}
.scene{perspective:900px;height:300px;display:flex;align-items:center;justify-content:center}
.cube{position:relative;width:170px;height:170px;transform-style:preserve-3d;animation:spin 18s linear infinite}
.scene:hover .cube{animation-play-state:paused}.scene{animation:fl 5s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-10px)}}.h3{position:relative}.h3:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 60px);pointer-events:none}
.cube div{position:absolute;width:170px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;border:2px solid #ffffff66;border-radius:14px;background:linear-gradient(135deg,#1479b8,#0b3a5c);box-shadow:inset 0 0 30px #5ab4f033;text-align:center}
.cube div b{font-size:2.2rem}
.cube .f1{transform:translateZ(85px)}.cube .f2{transform:rotateY(90deg) translateZ(85px)}.cube .f3{transform:rotateY(180deg) translateZ(85px)}.cube .f4{transform:rotateY(-90deg) translateZ(85px)}.cube .f5{transform:rotateX(90deg) translateZ(85px)}.cube .f6{transform:rotateX(-90deg) translateZ(85px)}
@keyframes spin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:18px 0}
.tile{display:block;background:#fff;border:1px solid #dde4ea;border-radius:12px;padding:18px;text-decoration:none;color:#1d2433;transition:transform .25s,box-shadow .25s;transform-style:preserve-3d}
.tile:hover{transform:perspective(600px) rotateX(4deg) rotateY(-4deg) translateY(-4px);box-shadow:0 14px 26px #0b2a3f26}
.tile b{display:block;font-size:1.6rem}.tile span{font-weight:600}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.steps div{background:#eef5fa;border-radius:12px;padding:16px}
.card{transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0b2a3f22}
@media(max-width:800px){.h3 .w{grid-template-columns:1fr}.scene{height:240px}.cube,.cube div{width:130px;height:130px}.cube .f1{transform:translateZ(65px)}.cube .f2{transform:rotateY(90deg) translateZ(65px)}.cube .f3{transform:rotateY(180deg) translateZ(65px)}.cube .f4{transform:rotateY(-90deg) translateZ(65px)}.cube .f5{transform:rotateX(90deg) translateZ(65px)}.cube .f6{transform:rotateX(-90deg) translateZ(65px)}.h3 h1{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){.scene{animation:none}.cube{animation:none;transform:rotateX(-20deg) rotateY(-30deg)}.tile,.card{transition:none}}

.tool input[type=number],.tool input[type=date]{width:100%;padding:11px;border:1px solid #c9d6e0;border-radius:6px;font-size:16px;background:#fff}.tool .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tool .fld{margin:12px 0}.tool .fld span{display:block;font-weight:700;margin-bottom:4px}.tool .hint{font-size:.82rem;color:#566;margin-top:3px}.tool .gb{display:flex;gap:10px;flex-wrap:wrap}.gcard{background:linear-gradient(135deg,#17804a,#0f6a3d);color:#fff;border-radius:12px 12px 0 0;padding:18px 22px;text-align:center}.gcard h1{color:#fff;margin:0 0 6px}.gcard p{margin:0;color:#e6f6ec}.gform{background:#fff;border:1px solid #dde4ea;border-top:0;border-radius:0 0 12px 12px;padding:6px 22px 20px}.gbtn{background:#17804a;flex:1}.gbtn2{background:#e8eaed;color:#222}@media(max-width:600px){.tool .row{grid-template-columns:1fr}}
.tool label{display:block;padding:9px 12px;border:1px solid #dde4ea;border-radius:8px;margin:7px 0;background:#fff;cursor:pointer}.tool input{margin-right:8px}#res{margin-top:14px;padding:14px;border-radius:8px;background:#eef5fa}fieldset{border:0;padding:0;margin:0}.tpl{background:#f4f7fa;border:1px solid #dde4ea;border-radius:8px;padding:14px;white-space:pre-wrap;font-size:.9rem;overflow-x:auto}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0}.pg-n{display:inline-block;min-width:40px;text-align:center;padding:8px 14px;border:1px solid #c9d6e0;border-radius:8px;background:#fff;text-decoration:none;font-weight:600}.pg-n.on{background:#0a5c8f;color:#fff;border-color:#0a5c8f}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}.fg .logo{font-size:24px;display:inline-block;margin-bottom:6px}.fg a{display:block;margin:5px 0}.fn{border-top:1px solid #ffffff2a;margin-top:18px;padding-top:12px;font-size:.85rem}@media(max-width:800px){.fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:1/-1}}@media(max-width:520px){.fg{grid-template-columns:1fr}}
main h1{font-size:2rem;line-height:1.25;margin:.6em 0 .3em;color:#0b2a3f}
.pg{max-width:780px;margin:28px auto;background:#fff;border:1px solid #dde4ea;border-radius:12px;padding:10px 30px 24px}
.ch{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#0b2a3f,#14507a);color:#fff;border-radius:14px;padding:22px 26px;margin:24px 0}
.ch h1{color:#fff;margin:0}.ch p{margin:.3em 0 0;color:#d5e6f2}.ch span{font-size:3rem}
article h2{margin:1.8em 0 .5em;padding-left:12px;border-left:5px solid #f2b134;color:#0b2a3f;font-size:1.5rem}
article h3{margin:1.4em 0 .4em;color:#14507a}article p,article li{font-size:1.04rem}
article figure{margin:18px 0}article figure img{border-radius:12px}article figcaption{font-size:.82rem;color:#667;margin-top:4px}
caption{font-weight:700;text-align:left;padding:6px 0}
.steps div{position:relative;padding:22px 18px 18px}.steps i{display:inline-flex;width:36px;height:36px;border-radius:50%;background:#0a5c8f;color:#fff;font-style:normal;font-weight:700;align-items:center;justify-content:center;margin-bottom:8px}
.steps strong{display:block;font-size:1.1rem}.steps a{font-weight:600;text-decoration:none}
footer p strong{color:#f2b134}footer a{display:inline-block;margin:2px 12px 2px 0}
main h2{margin-top:1.6em}

figure{margin:1.4rem 0}figure img{width:100%;height:auto;border-radius:10px}figcaption{font-size:.85rem;color:#52606d;margin-top:.4rem}.callout{background:#eef6ff;border-left:5px solid #1f6feb;padding:1rem 1.2rem;margin:2rem 0;border-radius:6px}.callout ul{margin:.5rem 0 .5rem 1.2rem}

header{position:sticky;top:0;z-index:20;box-shadow:0 2px 10px #0003}.panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel div{background:#ffffff14;border:1px solid #ffffff33;border-radius:14px;padding:22px;text-align:center}.panel b{display:block;font-size:2.4rem;color:#f2b134}.panel span{color:#d5e6f2}main h2{margin-top:2rem;border-left:5px solid #f2b134;padding-left:10px}article h2{margin-top:1.8rem}article p,article li{max-width:70ch}.card img{aspect-ratio:1200/630;object-fit:cover}.tile{border-radius:14px}
.tool-info{max-width:760px;margin:2rem auto}.tool-info li{margin:.3rem 0}article h3{margin-top:1.2rem}

.h3{background:linear-gradient(120deg,#071a2a,#0f4c75,#0b2a3f);background-size:200% 200%;animation:bg 14s ease infinite}@keyframes bg{50%{background-position:100% 50%}}
.stage{position:relative;perspective:1000px;max-width:520px;margin:auto}.sky{width:100%;display:block;border-radius:26px;box-shadow:0 30px 60px #0008;transform:rotateY(-10deg) rotateX(4deg);transition:transform .5s}.stage:hover .sky{transform:rotateY(0) rotateX(0)}
.far{animation:pa 9s ease-in-out infinite alternate}.near{animation:pa 6s ease-in-out infinite alternate}@keyframes pa{to{transform:translateX(8px)}}
.chip{position:absolute;background:#ffffffee;color:#0b2a3f;font-weight:700;font-size:.9rem;padding:9px 14px;border-radius:30px;text-decoration:none;box-shadow:0 12px 24px #0006;animation:fl 5s ease-in-out infinite;transform:translateZ(60px)}.chip:hover{background:#f2b134}
.c1{left:-4%;top:14%}.c2{right:-4%;top:30%;animation-delay:.8s}.c3{left:2%;bottom:12%;animation-delay:1.6s}.c4{right:4%;bottom:6%;animation-delay:2.2s}@keyframes fl{50%{translate:0 -10px}}
.card:hover,.tile:hover{transform:perspective(700px) rotateX(3deg) translateY(-6px)}
@media(max-width:800px){.stage{max-width:380px}.sky{transform:none}.chip{font-size:.8rem;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.h3,.far,.near,.chip{animation:none}.sky{transition:none}}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-28px;position:relative;z-index:2}.strip div{background:#fff;border-radius:14px;padding:16px;text-align:center;box-shadow:0 10px 24px #0b2a3f26}.strip b{display:block;font-size:1.8rem;color:#0a5c8f}.strip span{font-size:.85rem;color:#566}@media(max-width:600px){.strip{grid-template-columns:1fr 1fr}}