*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Comfortaa","Arial","Helvetica",sans-serif;
font-size:16px;
line-height:1.7;
color:#4d4d4d;
background:#f0f0f0;
}
a{color:#19afd2;text-decoration:none;transition:color .2s}
a:hover,a:focus{color:#007eba;text-decoration:underline}

/* Header */
.site-header{
background:#fff;
box-shadow:0 2px 4px rgba(0,0,0,.15);
border-bottom:3px solid #fa8232;
position:sticky;
top:0;
z-index:100;
}
.site-header-inner{
max-width:1100px;
margin:0 auto;
padding:18px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.brand{
font-size:24px;
font-weight:bold;
color:#19afd2;
letter-spacing:.3px;
}
.brand span{color:#fa8232}
.tagline{
font-size:14px;
font-style:italic;
color:#4d4d4d;
border-left:1px solid #b3b3b3;
padding-left:16px;
}

/* Hero */
.hero{
background:linear-gradient(135deg,#00b2ff 0%,#007eba 100%);
padding:48px 20px;
}
.hero-inner{max-width:1100px;margin:0 auto}
h1{
display:inline-block;
margin:0;
padding:16px 28px;
font-size:36px;
line-height:1.25;
font-weight:400;
color:#19afd2;
background:rgba(255,255,255,.92);
border-radius:6px;
box-shadow:0 4px 20px -6px rgba(0,0,0,.3);
}

/* Layout */
main{
max-width:1100px;
margin:-24px auto 0;
padding:0 20px 40px;
position:relative;
}
article,.transition,.links-block{
background:#fff;
border-radius:6px;
box-shadow:0 2px 30px -14px #000;
padding:32px;
margin-bottom:24px;
}
article{border-top:4px solid #fa8232}
article h2,article h3,article h4{
color:#007eba;
line-height:1.3;
margin:28px 0 12px;
}
article h2{font-size:28px;font-weight:400}
article h3{font-size:22px}
article h4{font-size:18px}
article>:first-child{margin-top:0}
article p{margin:0 0 16px}
article ul,article ol{padding-left:24px;margin:0 0 16px}
article li{margin-bottom:6px}
article img{max-width:100%;height:auto}
article table{border-collapse:collapse;width:100%;margin-bottom:16px;display:block;overflow-x:auto}
article th,article td{border:1px solid #e0e0e0;padding:8px 12px;text-align:left}
article th{background:#f0f0f0;color:#007eba}
article blockquote{
margin:0 0 16px;
padding:8px 20px;
border-left:5px solid #fa8232;
background:#f0f0f0;
font-style:italic;
}

.transition{
background:#f7fcff;
border-left:5px solid #19afd2;
}
.transition p{margin:0 0 14px}
.transition p:last-child{margin-bottom:0}

/* Links */
.links-block{
background:#fff;
border:1px solid #f0f0f0;
border-top:4px solid #00b2ff;
overflow:hidden;
}
.links-block h3{
color:#007eba;
font-size:20px;
margin:28px 0 12px;
padding-bottom:8px;
border-bottom:2px solid #fa8232;
}
.links-block h3:first-child{margin-top:0}
.links-block ul{
list-style:none;
margin:0 0 8px;
padding:0;
columns:2;
column-gap:40px;
}
.links-block li{
break-inside:avoid;
padding:7px 0 7px 18px;
position:relative;
border-bottom:1px solid #f0f0f0;
word-wrap:break-word;
overflow-wrap:anywhere;
}
.links-block li::before{
content:"";
position:absolute;
left:0;
top:17px;
width:6px;
height:6px;
background:#fa8232;
border-radius:50%;
}

/* Footer */
.site-footer{
background:#007eba;
color:#fff;
border-top:4px solid #fa8232;
padding:28px 20px;
text-align:center;
}
.site-footer p{margin:0;font-size:14px;line-height:1.5}
.site-footer .brand{color:#fff;font-size:20px;display:block;margin-bottom:6px}
.site-footer .brand span{color:#fa8232}

/* Responsive */
@media (max-width:768px){
.site-header-inner{flex-direction:column;text-align:center;padding:14px 16px}
.tagline{border-left:0;padding-left:0}
.hero{padding:32px 16px}
h1{font-size:26px;padding:12px 18px}
main{padding:0 12px 28px;margin-top:-16px}
article,.transition,.links-block{padding:20px 16px}
article h2{font-size:23px}
article h3{font-size:19px}
}
@media (max-width:600px){
body{font-size:15px}
.links-block ul{columns:1}
}