:root{
–eoy-bg: rgba(10, 12, 16, 0.62);
–eoy-card: #ffffff;
–eoy-text: #111827;
–eoy-muted: #6b7280;
–eoy-accent: #111827;
–eoy-border: rgba(17,24,39,.10);
–eoy-shadow: 0 20px 60px rgba(0,0,0,.25);
–eoy-radius: 18px;
}

.eoy-popup-backdrop{
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background: var(–eoy-bg);
z-index: 999999;
}
.eoy-popup-backdrop.is-open{ display: flex; }

.eoy-popup{
width: 100%;
max-width: 520px;
background: var(–eoy-card);
color: var(–eoy-text);
border: 1px solid var(–eoy-border);
border-radius: var(–eoy-radius);
box-shadow: var(–eoy-shadow);
overflow: hidden;
transform: translateY(8px) scale(.98);
opacity: 0;
transition: transform .22s ease, opacity .22s ease;
position: relative;
}
.eoy-popup-backdrop.is-open .eoy-popup{
transform: translateY(0) scale(1);
opacity: 1;
}

.eoy-popup-header{
padding: 18px 20px 0;
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
}

.eoy-close{
border: 1px solid var(–eoy-border);
background: #fff;
color: var(–eoy-muted);
width: 40px;
height: 40px;
border-radius: 12px;
cursor: pointer;
display: grid;
place-items: center;
transition: transform .15s ease, background .15s ease, color .15s ease;
flex: 0 0 auto;
}
.eoy-close:hover{ transform: translateY(-1px); background: #f9fafb; color: #111827; }
.eoy-close:active{ transform: translateY(0px); }

.eoy-topline{
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(–eoy-muted);
margin: 0 0 6px;
}
.eoy-title{
margin: 0;
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.02em;
}

.eoy-body{
padding: 14px 20px 18px;
}
.eoy-copy{
margin: 10px 0 0;
font-size: 15.5px;
line-height: 1.55;
color: #1f2937;
}

.eoy-highlight{
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 14px;
background: #f9fafb;
border: 1px solid var(–eoy-border);
display: flex;
gap: 10px;
align-items: flex-start;
}
.eoy-badge{
width: 34px;
height: 34px;
border-radius: 12px;
background: #111827;
color: #fff;
display: grid;
place-items: center;
font-size: 16px;
flex: 0 0 auto;
}
.eoy-highlight p{
margin: 0;
font-size: 14px;
color: #374151;
}

.eoy-footer{
padding: 0 20px 20px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.eoy-cta{
appearance: none;
border: 0;
text-decoration: none;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 15px;
padding: 13px 16px;
border-radius: 14px;
background: var(–eoy-accent);
color: #fff;
transition: transform .15s ease, opacity .15s ease;
}
.eoy-cta:hover{ transform: translateY(-1px); opacity: .96; }
.eoy-cta:active{ transform: translateY(0px); }

.eoy-secondary{
text-align: center;
font-size: 13px;
color: var(–eoy-muted);
}
.eoy-secondary button{
border: 0;
background: transparent;
color: #111827;
font-weight: 600;
cursor: pointer;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
}

/* Mobile tweaks */
@media (max-width: 420px){
.eoy-title{ font-size: 24px; }
.eoy-close{ width: 38px; height: 38px; border-radius: 12px; }
}

(function(){
// 🔧 Settings
var SHOW_DELAY_MS = 900; // time before showing popup
var SHOW_ONCE_PER_SESSION = true; // true = once per tab session, false = every page load
var STORAGE_KEY = “eoy_popup_seen_v1”; // change if you want to re-show to previous visitors

var backdrop = document.getElementById(“eoyBackdrop”);
var closeBtn = document.getElementById(“eoyClose”);
var laterBtn = document.getElementById(“eoyLater”);

function markSeen(){
try{
if (SHOW_ONCE_PER_SESSION){
sessionStorage.setItem(STORAGE_KEY, “1”);
} else {
localStorage.setItem(STORAGE_KEY, “1”);
}
}catch(e){}
}

function hasSeen(){
try{
return (SHOW_ONCE_PER_SESSION ? sessionStorage.getItem(STORAGE_KEY) : localStorage.getItem(STORAGE_KEY)) === “1”;
}catch(e){
return false;
}
}

function openPopup(){
if (!backdrop) return;
backdrop.classList.add(“is-open”);
backdrop.setAttribute(“aria-hidden”, “false”);
// prevent background scroll
document.documentElement.style.overflow = “hidden”;
document.body.style.overflow = “hidden”;
}

function closePopup(){
if (!backdrop) return;
backdrop.classList.remove(“is-open”);
backdrop.setAttribute(“aria-hidden”, “true”);
document.documentElement.style.overflow = “”;
document.body.style.overflow = “”;
markSeen();
}

// Close when clicking outside the card
backdrop.addEventListener(“click”, function(e){
if (e.target === backdrop) closePopup();
});

closeBtn.addEventListener(“click”, closePopup);
laterBtn.addEventListener(“click”, closePopup);

// Close on ESC
document.addEventListener(“keydown”, function(e){
if (e.key === “Escape” && backdrop.classList.contains(“is-open”)) closePopup();
});

// Show popup
window.addEventListener(“load”, function(){
if (hasSeen()) return;
setTimeout(openPopup, SHOW_DELAY_MS);
});
})();