@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

*,*::before,*::after{box-sizing:border-box;}

body{
	margin:0;padding:0;
	font-family:"Inter","Segoe UI",Roboto,"Noto Sans",sans-serif;
	color:#2d2d3f;line-height:1.7;
	background:
		radial-gradient(1100px 500px at 50% -8%, rgba(33,32,235,.07), transparent 60%),
		linear-gradient(180deg,#eef1f6 0%,#e7ebf3 100%);
	background-attachment:fixed;
	min-height:100vh;display:flex;flex-direction:column;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ---- content card ---- */
.page-body{
	flex:1;width:92%;max-width:880px;margin:44px auto;
	background:#fff;border-radius:18px;position:relative;overflow:hidden;
	padding:52px 52px 46px;
	box-shadow:0 10px 40px rgba(30,40,80,.09),0 1px 3px rgba(30,40,80,.05);
}
.page-body::before{
	content:"";position:absolute;top:0;left:0;right:0;height:5px;
	background:linear-gradient(90deg,#2120eb,#5b5bff 55%,#8f8fff);
}

/* ---- typography ---- */
h1{
	position:relative;margin:0 0 26px;padding-bottom:18px;
	font-size:30px;font-weight:800;color:#111634;letter-spacing:-.5px;line-height:1.25;
}
h1::before{
	content:"ДОВІДКОВИЙ ЦЕНТР";display:block;margin-bottom:12px;
	font-size:11px;font-weight:800;letter-spacing:2.5px;color:#2120eb;
}
h1::after{
	content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,#2120eb,#8f8fff);
}
h2{
	position:relative;margin:36px 0 14px;padding-bottom:9px;
	font-size:19px;font-weight:700;color:#16213e;letter-spacing:-.2px;
	border-bottom:1px solid #e8ecf2;
}
h2::after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:2px;background:#2120eb;}
h3{font-size:16px;font-weight:600;color:#16213e;margin:22px 0 10px;}
p{margin:0 0 15px;font-size:15px;color:#4a4a68;}
strong{font-weight:600;color:#2d2d3f;}
a{color:#2120eb;text-decoration:none;transition:color .2s;}
a:hover{color:#5b5bff;text-decoration:underline;}

/* ---- updated date pill ---- */
.date-label{
	display:inline-flex;align-items:center;gap:6px;
	font-size:12.5px;font-weight:600;color:#5257b8;
	background:rgba(33,32,235,.07);border:1px solid rgba(33,32,235,.14);
	padding:5px 13px;border-radius:999px;margin-bottom:22px;
}
.date-label::before{content:"";width:6px;height:6px;border-radius:50%;background:#2120eb;}

/* ---- lists ---- */
.page-body ul{list-style:none;margin:0 0 16px;padding:0;}
.page-body ul li{
	position:relative;padding-left:26px;margin-bottom:11px;
	font-size:15px;color:#4a4a68;line-height:1.6;
}
.page-body ul li::before{
	content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;
	background:#2120eb;box-shadow:0 0 0 4px rgba(33,32,235,.12);
}

/* ---- callout / note ---- */
.note-block{
	position:relative;margin:26px 0 16px;padding:16px 18px 16px 48px;
	font-size:14px;line-height:1.65;color:#4b4b66;
	background:linear-gradient(180deg,#f7f8fd,#f3f4fb);
	border:1px solid #e6e8f5;border-left:4px solid #2120eb;border-radius:0 10px 10px 0;
}
.note-block::before{
	content:"";position:absolute;left:16px;top:17px;width:20px;height:20px;
	background:#2120eb;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 1 21h22L12 2zm0 5.7L18.5 19h-13L12 7.7zM11 10h2v5h-2v-5zm0 6h2v2h-2v-2z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 1 21h22L12 2zm0 5.7L18.5 19h-13L12 7.7zM11 10h2v5h-2v-5zm0 6h2v2h-2v-2z'/%3E%3C/svg%3E");
}

/* ---- contact cards ---- */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:6px 0 4px;}
.contact-card{
	display:flex;flex-direction:column;gap:2px;text-decoration:none;
	padding:20px 18px;border-radius:14px;background:#f7f8fd;border:1px solid #e6e8f5;
	transition:transform .16s,box-shadow .2s,border-color .2s;
}
a.contact-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(33,32,235,.12);border-color:#c9caf5;}
.contact-card__ic{
	width:44px;height:44px;border-radius:11px;margin-bottom:12px;color:#fff;
	background:linear-gradient(150deg,#5b5bff,#2120eb);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 14px rgba(33,32,235,.28);
}
.contact-card__lbl{font-size:12px;font-weight:600;color:#8489ad;text-transform:uppercase;letter-spacing:.5px;}
.contact-card__val{font-size:15.5px;font-weight:700;color:#16213e;word-break:break-word;}
.contact-note{font-size:13.5px;color:#7a7f96;margin-top:14px;}

/* ---- responsive ---- */
@media (max-width:640px){
	.page-body{padding:34px 22px 30px;margin:22px auto;border-radius:14px;}
	h1{font-size:24px;}
	h1::before{font-size:10px;letter-spacing:2px;}
	h2{font-size:17px;margin-top:28px;}
	.contact-cards{grid-template-columns:1fr;}
}