<!DOCTYPE html>

<head>

<title>SpacePluto · Космически блог и услуги</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background-color: #03050b;

font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;

color: #eef2ff;

line-height: 1.5;

scroll-behavior: smooth;

}

/* custom scroll */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #0a0e1a;

}

::-webkit-scrollbar-thumb {

background: #3b4b6e;

border-radius: 12px;

}

::-webkit-scrollbar-thumb:hover {

background: #5f7fbf;

}

/* stars background effect */

.stars-bg {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -2;

background: radial-gradient(ellipse at 20% 30%, #0a0f1c, #02040c);

overflow: hidden;

}

.stars-bg::before,

.stars-bg::after {

content: "";

position: absolute;

width: 100%;

height: 100%;

background-image:

radial-gradient(2px 2px at 15% 60%, rgba(255,255,245,0.8), rgba(0,0,0,0)),

radial-gradient(1px 1px at 72% 18%, rgba(255,240,210,0.7), rgba(0,0,0,0)),

radial-gradient(3px 1px at 34% 88%, #ffffff30, rgba(0,0,0,0)),

radial-gradient(1px 1px at 91% 43%, #f5e6d3, rgba(0,0,0,0));

background-repeat: no-repeat;

background-size: 200px 200px, 300px 300px, 400px 400px, 250px 250px;

opacity: 0.6;

animation: starDrift 80s linear infinite;

}

.stars-bg::after {

background-image:

radial-gradient(1.5px 1.5px at 8% 92%, #ffe6b3, rgba(0,0,0,0)),

radial-gradient(2px 2px at 44% 15%, #fff0d0, rgba(0,0,0,0)),

radial-gradient(1px 1px at 68% 77%, #f0eefc, rgba(0,0,0,0)),

radial-gradient(2px 1px at 27% 45%, #cbd5ff, rgba(0,0,0,0));

background-repeat: no-repeat;

background-size: 280px 280px, 350px 350px, 220px 220px, 300px 300px;

opacity: 0.5;

animation: starDriftReverse 95s linear infinite;

}

@keyframes starDrift {

0% { transform: translate(0, 0);}

100% { transform: translate(40px, 30px);}

}

@keyframes starDriftReverse {

0% { transform: translate(0, 0);}

100% { transform: translate(-35px, 45px);}

}

.container {

max-width: 1280px;

margin: 0 auto;

padding: 0 28px;

}

/* header / nav */

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

padding: 28px 0 20px;

border-bottom: 1px solid rgba(72, 97, 143, 0.3);

backdrop-filter: blur(2px);

}

.logo {

display: flex;

align-items: center;

gap: 12px;

font-weight: 800;

font-size: 1.8rem;

letter-spacing: -0.02em;

background: linear-gradient(135deg, #FFFFFF, #b9d0ff);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

.logo i {

background: none;

-webkit-background-clip: unset;

background-clip: unset;

color: #ddb6ff;

font-size: 2rem;

color: #c2a2ff;

}

.nav-links {

display: flex;

gap: 2rem;

align-items: center;

}

.nav-links a {

text-decoration: none;

color: #cddcff;

font-weight: 500;

transition: 0.2s;

font-size: 1rem;

}

.nav-links a:hover {

color: white;

text-shadow: 0 0 6px #a0c0ff;

}

.btn-outline-light {

border: 1px solid #8ca9ff;

padding: 8px 20px;

border-radius: 40px;

background: rgba(20, 28, 44, 0.6);

backdrop-filter: blur(4px);

font-weight: 600;

}

.btn-outline-light:hover {

background: #2f3b6e;

border-color: #c7dcff;

}

/* hero section */

.hero {

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

padding: 70px 0 60px;

}

.badge {

background: rgba(98, 125, 182, 0.2);

backdrop-filter: blur(4px);

padding: 6px 18px;

border-radius: 60px;

font-size: 0.85rem;

font-weight: 500;

letter-spacing: 1px;

border: 0.5px solid rgba(140, 180, 255, 0.4);

margin-bottom: 28px;

display: inline-block;

}

.hero h1 {

font-size: 4rem;

font-weight: 800;

background: linear-gradient(120deg, #ffffff, #b3caff, #dbb9ff);

background-clip: text;

-webkit-background-clip: text;

color: transparent;

max-width: 950px;

line-height: 1.2;

margin-bottom: 20px;

}

.hero p {

font-size: 1.25rem;

color: #b9c8ff;

max-width: 650px;

margin-bottom: 36px;

}

.btn-group {

display: flex;

gap: 20px;

flex-wrap: wrap;

justify-content: center;

}

.btn-primary {

background: linear-gradient(95deg, #2c3e8f, #4a6bc3);

border: none;

padding: 12px 34px;

border-radius: 40px;

font-weight: 700;

font-size: 1rem;

color: white;

cursor: pointer;

transition: transform 0.2s, box-shadow 0.2s;

box-shadow: 0 8px 20px rgba(0, 20, 80, 0.4);

}

.btn-primary:hover {

transform: translateY(-3px);

background: linear-gradient(95deg, #3b52a5, #5f7fdd);

box-shadow: 0 15px 28px -8px rgba(50, 90, 200, 0.5);

}

.btn-secondary {

background: rgba(20, 28, 52, 0.7);

backdrop-filter: blur(4px);

border: 1px solid #6783c7;

padding: 12px 32px;

border-radius: 40px;

font-weight: 600;

color: #e6f0ff;

transition: 0.2s;

}

.btn-secondary:hover {

background: #2a3660;

border-color: #aec2ff;

}

/* cards / services & blog preview */

.section-title {

font-size: 2rem;

font-weight: 700;

margin: 60px 0 20px 0;

letter-spacing: -0.3px;

position: relative;

display: inline-block;

}

.section-title:after {

content: '';

position: absolute;

bottom: -10px;

left: 0;

width: 60%;

height: 3px;

background: linear-gradient(90deg, #7b9eff, #312e5e, transparent);

border-radius: 3px;

}

.grid-3 {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));

gap: 32px;

margin: 40px 0 30px;

}

.cosmic-card {

background: rgba(12, 18, 32, 0.7);

backdrop-filter: blur(12px);

border-radius: 36px;

padding: 28px 24px;

border: 1px solid rgba(98, 138, 212, 0.3);

transition: all 0.25s ease;

box-shadow: 0 15px 35px -12px rgba(0,0,0,0.4);

}

.cosmic-card:hover {

border-color: #87a6f0;

transform: translateY(-6px);

background: rgba(18, 26, 48, 0.85);

box-shadow: 0 28px 40px -18px #1f2b66;

}

.card-icon {

font-size: 2.4rem;

color: #b2c9ff;

margin-bottom: 20px;

}

.cosmic-card h3 {

font-size: 1.6rem;

font-weight: 600;

margin-bottom: 12px;

}

.cosmic-card p {

color: #cbdaf5;

margin-bottom: 20px;

line-height: 1.5;

}

.read-more {

color: #acc6ff;

font-weight: 600;

text-decoration: none;

display: inline-flex;

align-items: center;

gap: 8px;

transition: gap 0.2s;

}

.read-more i {

font-size: 0.8rem;

}

.read-more:hover {

color: white;

gap: 12px;

}

/* blog preview row */

.blog-highlight {

background: linear-gradient(125deg, #0b1022, #030617);

border-radius: 48px;

padding: 40px 32px;

margin: 35px 0 30px;

border: 1px solid #25345e;

}

.flex-blog {

display: flex;

flex-wrap: wrap;

gap: 40px;

align-items: center;

justify-content: space-between;

}

.blog-text {

flex: 1.2;

}

.blog-text h3 {

font-size: 1.8rem;

margin-bottom: 14px;

}

.blog-meta {

display: flex;

gap: 24px;

color: #98abdd;

font-size: 0.85rem;

margin: 18px 0 12px;

}

.blog-text p {

color: #cfddff;

margin: 16px 0;

}

.blog-img-placeholder {

flex: 0.8;

background: radial-gradient(circle at 30% 40%, #1f2c52, #070c1a);

border-radius: 32px;

padding: 32px 20px;

text-align: center;

border: 1px solid #3e5082;

box-shadow: 0 20px 30px -20px black;

}

.blog-img-placeholder i {

font-size: 4rem;

color: #c3d4ff;

}

.blog-img-placeholder p {

margin-top: 12px;

font-weight: 500;

}

/* cta section */

.cta-section {

margin: 70px 0 60px;

background: rgba(19, 29, 56, 0.5);

backdrop-filter: blur(8px);

border-radius: 60px;

padding: 60px 40px;

text-align: center;

border: 1px solid rgba(106, 138, 206, 0.5);

}

.cta-section h2 {

font-size: 2.3rem;

font-weight: 700;

}

.newsletter {

display: flex;

max-width: 520px;

margin: 28px auto 0;

gap: 12px;

flex-wrap: wrap;

justify-content: center;

}

.newsletter input {

flex: 2;

padding: 16px 20px;

border-radius: 80px;

border: none;

background: #101624;

color: white;

font-size: 1rem;

border: 1px solid #415683;

outline: none;

}

.newsletter input:focus {

border-color: #7d9eff;

}

.newsletter button {

background: #2e4185;

border: none;

padding: 0 36px;

border-radius: 80px;

font-weight: bold;

color: white;

cursor: pointer;

transition: 0.2s;

}

.newsletter button:hover {

background: #4f6fcf;

}

/* footer */

footer {

border-top: 1px solid #1f2a46;

padding: 40px 0 30px;

margin-top: 40px;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap: 30px;

}

.footer-col p {

color: #8a9bcf;

max-width: 260px;

}

.social-links a {

color: #adc0f0;

margin-right: 22px;

font-size: 1.4rem;

transition: 0.2s;

}

.social-links a:hover {

color: white;

}

.footer-links {

display: flex;

gap: 48px;

}

.footer-links div a {

display: block;

color: #bbceff;

text-decoration: none;

margin-bottom: 12px;

font-size: 0.9rem;

}

.footer-links div a:hover {

color: white;

}

.copyright {

text-align: center;

padding: 20px 0 10px;

font-size: 0.8rem;

color: #5e6f9b;

}

@media (max-width: 720px) {

.navbar {

flex-direction: column;

gap: 20px;

}

.hero h1 {

font-size: 2.5rem;

}

.section-title {

font-size: 1.8rem;

}

.cta-section {

padding: 40px 20px;

}

</style>

</head>

<body>

<span>SPACEPLUTO</span>

</div>

<a href="#">Услуги</a>

<a href="#">Наблюдения</a>

<a href="#" class="btn-outline-light">Контакт</a>

</div>

</nav>

<i class="fas fa-meteor"></i> • ОТВОРЕНИ ЗА ВСЕЛЕНАТА

</div>

<h1>Космически хроники<br>от отвъд Плутон</h1>

<p>Астрономически блог, професионални наблюдения и астрографични услуги. Открийте тайните на дълбокия космос заедно с SpacePluto.</p>

<button class="btn-primary" id="exploreBtn"><i class="fas fa-rocket"></i> Изследвай</button>

<button class="btn-secondary" id="serviceBtn"><i class="fas fa-chart-line"></i> Нашите услуги</button>

</div>

</section>

<div>

<h2 class="section-title"><i class="fas fa-satellite-dish"></i> Космически услуги</h2>

<h3>Астро-фотография</h3>

<p>Професионален улов на мъглявини, галактики и далечни звездни купове. Персонални астроснимки с телескопи от клас обсерватория.</p>

<a href="#" class="read-more">Научете повече <i class="fas fa-arrow-right"></i></a>

</div>

<h3>Космически консултации</h3>

<p>Анализи на звездни карти, сателитни траектории и астрофизични данни за ваши проекти или изследвания. Екип от физици.</p>

<a href="#" class="read-more">Научете повече <i class="fas fa-arrow-right"></i></a>

</div>

<h3>Астроблог & Новини</h3>

<p>Ежеседмични анализи за открития на JWST, мисии до Европа, астероиди и космическо време. Бъдете винаги информирани.</p>

<a href="#" class="read-more">Към блога <i class="fas fa-arrow-right"></i></a>

</div>

<h3>🌌 Плутон: Планетата, която не спира да ни учудва</h3>

<span><i class="fas fa-user-astronaut"></i> Д-р Елена К. </span>

<span><i class="far fa-comment"></i> 7 коментара</span>

</div>

<p>Нови снимки от New Horizons разкриха криовулкани и възможни органични молекули на повърхността. Как това променя представата ни за периферията на Слънчевата система? Прочетете задълбочения анализ на SpacePluto екипа...</p>

<a href="#" class="read-more">Прочети статията <i class="fas fa-arrow-right"></i></a>

</div>

<p>🔭 Плутон в истински цветове</p>

</div>

<h2 class="section-title"><i class="fas fa-pen-fancy"></i> От блога</h2>

<h3>Тъмната страна на Луната</h3>

<p>Артемида мисии, лунни бази и какво крие далечната страна на нашия спътник. Бъдещето на лунната индустрия.</p>

<a href="#" class="read-more">Прочети <i class="fas fa-arrow-right"></i></a>

</div>

<h3>Екзопланети: нови светове</h3>

<p>Откриха 5 потенциално обитаеми свята в зоната на обитаемост на звезди тип K. Близки ли са до Земята?</p>

<a href="#" class="read-more">Прочети <i class="fas fa-arrow-right"></i></a>

</div>

<h3>Космическо време 2026</h3>

<p>Слънчевият максимум удря рекорди — как това влияе на сателитите и наземните комуникации. Прогнози и съвети.</p>

<a href="#" class="read-more">Прочети <i class="fas fa-arrow-right"></i></a>

</div>

<h2>Готови за междузвездно пътешествие?</h2>

<p style="max-width:550px; margin:12px auto 0;">Абонирайте се за нашия космически дайджест — всяка седмица най-вълнуващите новини и специални оферти за услуги.</p>

<button id="subscribeBtn">Абонамент <i class="fas fa-paper-plane"></i></button>

</div>

</div>

<span>SPACEPLUTO</span>

</div>

<p>Отвъд границите на Слънчевата система — наука, въображение и открития. Вашият портал към космоса.</p>

</div>

<div>

<a href="#">Услуги</a>

</div>

<div>

<a href="#">Политика</a>

<a href="#">Общи условия</a>

<a href="#">Контакти</a>

</div>

</footer>

<i class="far fa-copyright"></i> 2026 SpacePluto — Космически хъб. Вдъхновен от далечни светове.

</div>

(function(){

// Smooth scroll & alert interactions with modern feel

const exploreBtn = document.getElementById('exploreBtn');

const serviceBtn = document.getElementById('serviceBtn');

const subscribeBtn = document.getElementById('subscribeBtn');

const emailInput = document.getElementById('emailInput');

const feedbackMsg = document.getElementById('feedbackMsg');

if(exploreBtn) {

exploreBtn.addEventListener('click', () => {

const blogSection = document.querySelector('.blog-highlight');

if(blogSection) {

blogSection.scrollIntoView({ behavior: 'smooth', block: 'start' });

// subtle animation / feedback

blogSection.style.transition = '0.3s';

blogSection.style.boxShadow = '0 0 0 2px #7b9eff, 0 10px 30px -5px #1f2f66';

setTimeout(() => { blogSection.style.boxShadow = ''; }, 900);

} else {

window.scrollTo({ top: document.body.scrollHeight * 0.4, behavior: 'smooth' });

}

});

}

if(serviceBtn) {

serviceBtn.addEventListener('click', () => {

const servicesGrid = document.getElementById('servicesGrid');

if(servicesGrid) {

servicesGrid.scrollIntoView({ behavior: 'smooth', block: 'center' });

const firstCard = document.querySelector('.cosmic-card');

if(firstCard) {

firstCard.style.transform = 'scale(1.01)';

setTimeout(() => { if(firstCard) firstCard.style.transform = ''; }, 400);

}

});

}

if(subscribeBtn && emailInput) {

subscribeBtn.addEventListener('click', () => {

const email = emailInput.value.trim();

const emailPattern = /^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$/;

if(email === "") {

feedbackMsg.innerHTML = "📡 Моля, въведете имейл адрес, за да получавате космически новини.";

feedbackMsg.style.color = "#ffbc6e";

} else if(!emailPattern.test(email)) {

feedbackMsg.innerHTML = "⚠️ Невалиден формат. Пример: name@domain.com";

feedbackMsg.style.color = "#ffacaa";

} else {

feedbackMsg.innerHTML = `✅ Благодарим, ${email}! Вие сте част от междузвездната общност на SpacePluto. 🚀`;

feedbackMsg.style.color = "#b3f0b0";

emailInput.value = "";

// optional reset after 6 seconds

setTimeout(() => {

if(feedbackMsg) feedbackMsg.innerHTML = "";

}, 5500);

}

});

}

// Additional hover effect for all read-more links (just for modern feel)

const readMoreLinks = document.querySelectorAll('.read-more');

readMoreLinks.forEach(link => {

link.addEventListener('click', (e) => {

e.preventDefault();

// gentle alert replacement - could route but just show modal-like message friendly

alert("✨ Скоро ще отворим пълната статия / услуга. Следете SpacePluto за космически детайли!");

});

// quick console greet

console.log("🚀 SpacePluto — където космосът оживява.");

})();

</script>

</body>

</html>