text/css style.css ( UTF-8 Unicode text )
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Source+Sans+Pro:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    color: #545e69;
    background-color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
}

h1, h2, h3 { color: #1e2427; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 30px; }

/* All content sits above the fixed SVG canvas */
header, main, footer { position: relative; z-index: 1; }

/* ── Keyframes ── */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(50px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-50px);} to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight{ from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn     { from { opacity:0; transform:scale(0.8);       } to { opacity:1; transform:scale(1);    } }
@keyframes cardPulse   { 0%,100%{ transform:scale(1); opacity:0.5; } 50%{ transform:scale(1.1); opacity:0.8; } }

/* SVG background animations */
@keyframes sunPulse  { 0%,100%{ opacity:0.22; } 50%{ opacity:0.38; } }
@keyframes ringCW    { from{ transform:rotate(0deg);   } to{ transform:rotate(360deg);  } }
@keyframes ringCCW   { from{ transform:rotate(0deg);   } to{ transform:rotate(-360deg); } }
@keyframes bladeSpin { from{ transform:rotate(0deg);   } to{ transform:rotate(360deg);  } }
@keyframes dotBob    {
    0%,100% { transform:translateY(0px);  opacity:0.22; }
    50%     { transform:translateY(-18px); opacity:0.50; }
}
@keyframes wireDraw  {
    0%   { stroke-dashoffset:1000; opacity:0;    }
    8%   { opacity:0.40; }
    88%  { opacity:0.22; }
    100% { stroke-dashoffset:0;    opacity:0;    }
}
@keyframes leafRise  {
    0%   { transform:translateY(0)       rotate(0deg)   translateX(0px);  opacity:0;   }
    5%   { opacity:0.55; }
    90%  { opacity:0.38; }
    100% { transform:translateY(-108vh)  rotate(560deg) translateX(45px); opacity:0;   }
}
@keyframes leafSway  { 0%,100%{ transform:translateX(0px);  } 50%{ transform:translateX(32px); } }

/* Scroll animate */
.scroll-animate        { opacity:0; }
.scroll-animate.animate-in        { animation:fadeInUp     0.4s ease-out forwards; }
.scroll-animate-left   { opacity:0; }
.scroll-animate-left.animate-in   { animation:slideInLeft  0.4s ease-out forwards; }
.scroll-animate-right  { opacity:0; }
.scroll-animate-right.animate-in  { animation:slideInRight 0.4s ease-out forwards; }
.scroll-animate-scale  { opacity:0; }
.scroll-animate-scale.animate-in  { animation:scaleIn      0.4s ease-out forwards; }

/* Leaf DOM particles */
.leaf-particle { position:fixed; bottom:-60px; pointer-events:none; z-index:0; animation:leafRise linear infinite; }
.leaf-sway     { animation:leafSway ease-in-out infinite; }

/* ── Header keyframes ── */
@keyframes headerFadeUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes dividerGrow    { from{width:0;opacity:0} to{width:120px;opacity:1} }
@keyframes tagsFadeIn     { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollBounce   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes bgShift        { 0%{background-position:50% 45%} 100%{background-position:50% 55%} }

/* ── Header ── */
.header {
    position:relative; overflow:hidden;
    background:url('../img/header.jpg') center 50%/cover no-repeat;
    animation:bgShift 12s ease-in-out infinite alternate;
    color:#fff; min-height:68vh; display:flex; align-items:center;
}

.header-bg-overlay {
    position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(0,30,10,0.72) 0%, rgba(0,60,20,0.55) 50%, rgba(0,80,30,0.45) 100%);
}
.header .container { position:relative; z-index:2;
    width: 100%;
    padding: 0;}
.header-content { text-align:center; padding:60px 30px; }

/* Tile grid */
.header-tiles {
    position:absolute; inset:0; display:grid; z-index:1; pointer-events:none; overflow:hidden;
}
.header-tiles div {
    border:1px solid rgba(255,255,255,calc(var(--g,0) * 0.6));
    background:rgba(255,255,255,calc(var(--g,0) * 0.18));
    transition:background 0.35s ease, border-color 0.35s ease;
}
.header.is-hovered .header-tiles div {
    transition:none;
}
.header-tiles div.spark {
    transition:background 0.15s ease, border-color 0.15s ease;
}

/* Lead */
.header-lead-container {
    font-family: Arial;
    background: transparent;
    border-radius: 15px;
    /*backdrop-filter: blur(15px);*/
    padding: 30px 0;
    opacity:0; animation:headerFadeUp 0.7s ease-out 0.1s forwards;
}

@media (max-height: 768px) {
    .header-lead-container {
        padding: 20px;
    }
}
.header-lead {
    font-size:clamp(3em,5vw,3.5em); font-weight:700;
    line-height:1.05; color:#fff; margin:0 0 16px;
}

/* Sub */
.header-sub {
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5em;
    text-align: left;
    /*font-size: clamp(1.1rem, 2.2vw, 1.5rem);*/
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    font-size: 46px;
}

@media (max-width: 1401px) {.header-sub {font-size: 38px;}}
@media (max-width: 1201px) {.header-sub {font-size: 32px;}}
@media (max-width: 992px) {.header-sub {font-size: 28px;}}
@media (max-width: 768px) {
    .header-sub {font-size: 23px !important;}
}
.header-sub__eyebrow {
    display: block;
/*    font-weight: 600;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 0.14em;*/
/*    color: #7a9ec8;*/
/*    margin-bottom: 6px;*/
}
.eu-flag-icon {
    display: inline-block;
    width: auto;
    height: 3em;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.header-sub__text {
    display: block;
    border-left: 2px solid rgba(255,255,255,0.35);
    padding-left: 0.5em;
}
/*.header-sub__main {*/
/*    display: block;*/
/*    font-size: clamp(1.1rem, 2.2vw, 1.5rem);*/
/*    font-weight: 700;*/
/*    text-transform: uppercase;*/
/*    color: #1a3565;*/
/*    line-height: 1.2;*/
/*}*/
.header-sub strong { font-weight:700; color:#fff; }

/* Divider */
.header-divider {
    height:3px; border-radius:2px; margin:28px auto;
    background:linear-gradient(90deg,transparent,#00d060,#4ade80,transparent);
    width:0; opacity:0; animation:dividerGrow 0.7s ease-out 0.75s forwards;
}

/* Tags */
.header-tags {
    display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
    opacity:0; animation:tagsFadeIn 0.6s ease-out 1s forwards;
}
.header-tags span {
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    backdrop-filter:blur(6px); border-radius:999px;
    padding:5px 16px; font-size:0.82em; font-weight:600; color:rgba(255,255,255,0.85);
    letter-spacing:0.03em;
    transition:background 0.2s, border-color 0.2s;
}
.header-tags span:hover { background:rgba(0,208,96,0.25); border-color:#00d060; }

/* Scroll hint */
.header-scroll-hint {
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,0.5); width:28px; z-index:1;
    animation:scrollBounce 1.6s ease-in-out infinite;
}

/* ── Main ── */
.main-content { padding:80px 0; }

/* ── Platforms ── */
.sites-section { margin-bottom:80px; }
.sites-section h2 { text-align:center; font-size:2.5em; margin-bottom:60px; color:#1e2427; position:relative; }
.sites-section h2:after, .news-section h2:after {
    content:''; display:block; width:80px; height:4px;
    background:linear-gradient(90deg,#00B050,#00d060); margin:20px auto 0; border-radius:2px;
}
.sites-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-block:60px; }
.site-card {
    background:#fff; border:1px solid #e1e7ec; border-radius:12px; overflow:hidden;
    transition:all 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow:0 4px 20px rgba(0,0,0,0.08); display:flex; flex-direction:column;
}
.site-card:hover { transform:translateY(-10px); box-shadow:0 12px 40px rgba(0,0,0,0.12); border-color:currentColor; }
.site-card.card-eu4energy:hover { box-shadow:0 12px 40px rgba(0,176,80,0.15); border-color:#00B050; }
.site-card.card-eu4caet:hover   { box-shadow:0 12px 40px rgba(0,51,153,0.15); border-color:#003399; }
.site-card.card-eu4ee:hover     { box-shadow:0 12px 40px rgba(230,126,34,0.15); border-color:#e67e22; }
.site-card-header {
    display: grid;
    place-content: center;
    height: 220px;
    background:linear-gradient(135deg,#00B050 0%,#00d060 100%);
    padding:50px 30px; text-align:center; position:relative; overflow:hidden;
}
.card-eu4energy .site-card-header { background:linear-gradient(135deg,#00B050 0%,#00d060 100%); }
.card-eu4caet   .site-card-header { background:linear-gradient(to bottom, #1c81c2, #11a78d); }
.card-eu4ee     .site-card-header { background:linear-gradient(135deg,#e67e22 0%,#f39c12 100%); }
.site-card-header:before {
    content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);
    animation:cardPulse 3s ease-in-out infinite;
}
.site-card-label {
    position:absolute; top:10px; left:10px; z-index:2;
    color:#fff; font-size:0.85em; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase;
    padding:4px 10px; border-radius:4px;
    background:rgba(255,255,255,0.18); backdrop-filter:blur(4px);
    text-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.site-card-header h3 { color:#fff; font-size:2em; margin:0; position:relative; line-height: 1.2; z-index:1; text-shadow:0 2px 4px rgba(0,0,0,0.1); transition:transform 0.3s ease; }
.site-card:hover .site-card-header h3 { transform:scale(1.05); }
.site-card-content { padding:35px 30px; text-align:center; flex:1; display:flex; flex-direction:column; }
.site-card p { color:#545e69; margin-bottom:30px; line-height:1.7; flex:1; font-size:1.05em; transition:color 0.3s ease; }
.site-card:hover p { color:#1e2427; }
.site-link {
    display:inline-flex; align-items:center; justify-content:center;
    padding:14px 40px; background:linear-gradient(135deg,#00B050 0%,#00d060 100%);
    color:#fff; text-decoration:none; border-radius:30px; font-weight:600;
    transition:all 0.3s ease; text-transform:uppercase; font-size:0.875em;
    letter-spacing:0.5px; margin:0 auto; box-shadow:0 4px 15px rgba(0,176,80,0.2);
    position:relative; overflow:hidden;
}
.site-link:before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,0.2); transition:left 0.3s ease; }
.site-link:hover:before { left:100%; }
.site-link:hover { background:linear-gradient(135deg,#008f40 0%,#00B050 100%); box-shadow:0 6px 20px rgba(0,176,80,0.3); transform:translateY(-2px); }
.site-link svg { width:16px; height:16px; margin-left:8px; fill:#fff; transition:transform 0.3s ease; }
.site-link:hover svg { transform:translateX(5px); }

/* ── News ── */
.news-section { margin-bottom:80px; }
.news-section h2 { text-align:center; font-size:2.5em; margin-bottom:60px; color:#1e2427; position:relative; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.news-card {
    background:#fff; border:1px solid #e1e7ec; border-radius:12px; overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.07); transition:all 0.25s ease;
    display:flex; flex-direction:column;
}
.news-card:hover { transform:translateY(-6px); box-shadow:0 12px 36px rgba(0,176,80,0.13); border-color:#00B050; }
.news-card-thumb { display:block; position:relative; height:180px; overflow:hidden; background:#e1e7ec; text-decoration:none; }
a.news-card-title { text-decoration:none; display:block; }
.news-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.news-card:hover .news-card-thumb img { transform:scale(1.07); }
.news-source-badge { position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:20px; font-size:0.72em; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#fff; z-index:1; }
.badge-eu4caet   { background:linear-gradient(to bottom, #1c81c2, #11a78d); }
.badge-eu4energy { background:#00B050; }
.badge-eu4ee     { background:#e67e22; }
.news-card-body { padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.news-card-date { font-size:0.8em; color:#9aa5ad; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.news-card-date svg { width:13px; height:13px; fill:#9aa5ad; }
.news-card-title { font-family:'Lora',Arial,sans-serif; font-size:1.05em; font-weight:700; color:#1e2427; margin-bottom:10px; line-height:1.4; transition:color 0.2s ease; }
.news-card:hover .news-card-title { color:#00B050; }
.news-card-excerpt { font-size:0.9em; color:#6b7783; line-height:1.65; flex:1; margin-bottom:16px; }
.news-card-link { display:inline-flex; align-items:center; gap:6px; font-size:0.82em; font-weight:700; color:#00B050; text-decoration:none; text-transform:uppercase; letter-spacing:0.4px; transition:gap 0.2s ease; }
.news-card-link:hover { gap:10px; }
.news-card-link svg { width:14px; height:14px; fill:#00B050; }

/* ── Footer ── */
.footer {
    background:#1e2427; color:#8a949b; padding:50px 0 30px; text-align:center;
    background-image:url('../img/footer.jpg');
    background-size:cover; background-position:center;
}
.footer:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    content: '';
}
.footer > * {
    position: relative;
    z-index: 1;
}
.footer-content { max-width:900px; margin:0 auto; }
.footer-logo { margin-bottom:24px; transition:transform 0.3s ease; }
.footer-logo:hover { transform:scale(1.05); }
.footer-logo img { max-width:220px; height:auto; }
.footer-disclaimer {
    margin:24px auto 0; max-width:680px; padding:18px 28px;
    background:rgba(0,0,0,0.5); border-radius:10px; border:1px solid rgba(255,255,255,0.08);
}
.footer-disclaimer p { font-size:0.82em; color:rgba(255,255,255,0.82); line-height:1.75; }
.footer-copy { margin-top:22px; font-size:0.78em; color:rgba(255,255,255,0.75); }

/* ── News filter bar ── */
.news-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:36px; }
.news-filter-btn {
    padding:9px 24px; border-radius:30px; border:2px solid #e1e7ec;
    background:#fff; color:#545e69; font-size:0.875em; font-weight:600;
    cursor:pointer; transition:all 0.2s ease; letter-spacing:0.3px;
    font-family:'Source Sans Pro',Arial,sans-serif;
}
.news-filter-btn:hover { border-color:#00B050; color:#00B050; }
.news-filter-btn.active {
    background:linear-gradient(135deg,#00B050,#00d060);
    border-color:transparent; color:#fff;
    box-shadow:0 4px 14px rgba(0,176,80,0.25);
}
.news-card.hidden { display:none; }
.news-no-results { grid-column:1/-1; text-align:center; color:#9aa5ad; padding:40px 0; font-size:1.05em; }

/* ── Language switcher ── */
.lang-switch {
    position:fixed; top:16px; right:20px; z-index:1000;
    display:flex; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px);
    border-radius:30px; padding:4px; gap:2px;
    box-shadow:0 2px 12px rgba(0,0,0,0.25);
}
.lang-switch a {
    display:flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:24px; font-size:0.78em; font-weight:700;
    text-decoration:none; color:rgba(255,255,255,0.7); letter-spacing:0.5px;
    transition:all 0.2s ease; text-transform:uppercase;
}
.lang-switch a:hover { color:#fff; background:rgba(255,255,255,0.12); }
.lang-switch a.active { background:#fff; color:#1e2427; }

/* ── Responsive ── */
@media (max-width:1024px) and (min-width:769px) {
    .sites-grid { grid-template-columns:repeat(2,1fr); }
    .sites-grid .site-card:last-child { grid-column:1/-1; max-width:50%; margin:0 auto; width:100%; }
    .news-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .header { min-height:50vh; }
    .header h1 { font-size:1.75em; }
    .header p { font-size:1em; }
    .logo-text { font-size:2em; }
    .logo-wrapper { padding:20px 30px; }
    .sites-grid, .news-grid { grid-template-columns:1fr; }
    .site-card-header h3 { font-size:1.5em; }
    .main-content { padding:60px 0; }
    .header-sub {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }
    .eu-flag-icon {
        height: 3em;
        margin-bottom: 0.5em;
    }
    .header-sub__text {
        border-left: none;
        padding-left: 0;
    }
}