:root {
    --color-navigation: rgba(180, 146, 252, 0.55);
    --outlines: #141414;
}

/* Container fills whatever space its parent (#hero) gives it */
/* Generic page section container if you want consistent width */

/* HERO: full viewport height */
/* HERO sticker container */
/* HERO SECTION: first section with the sticker */
/* ================================
   HERO SECTION (draggable sticker)
   ================================ */
#hero.hero-section {
    /* full viewport minus scroll-inner vertical padding */
    min-height: calc(100vh - 6rem);

    display: flex;
    align-items: stretch;
    /* sticker-container fills the height */
    justify-content: center;
    margin-top: 0;
    /* hero starts immediately */
}

/* sticker-container inside hero */
#hero .sticker-container {
    position: relative;
    flex: 1 1 auto;
    /* fills hero vertically & horizontally */
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin: 0 auto;
    overflow: hidden;
    /* keeps sticker visually inside */
}

/* neutral base rule in case sticker-container is reused */
.sticker-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* =====================================
   INTRO SECTION (below hero
   ===================================== */


/* BLUR BOX (full width, but low-height = cheap) */
.intro-section .intro-blur {
    width: 100%;
    /* full available width */
    margin: 0;
    /* aligns perfectly with page-section */
    padding: 2rem 0;
    /* internal spacing only */
    box-sizing: border-box;

    border-radius: 24px;

    /* LIGHT blur + light tint */
    /* background: rgba(255, 255, 255, 0.85); */

    /* performance hack: create a new layer */
    will-change: backdrop-filter;
    border-radius: 50px;
}

/* OPTIONAL: turn blur off for very small screens */
@media (max-width: 700px) {
    .intro-section .intro-blur {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* background: rgba(255, 255, 255, 0.9); */
    }
}


/* ================================
   TEXT RULES (unchanged)
   ================================ */
.bg-text {
    padding: 10px;
    position: relative;
    z-index: 1;
    font-size: clamp(1.4rem, 2vw + 1rem, 2.5rem);
    line-height: 1.5;
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
        sans-serif;
    margin-top: 0px;
}

.name-swap {
    display: inline-block;
    font-weight: 700;
    text-align: center;
}

/* ... (icons, .sticker, .text-pill, etc. stay exactly as you have them) */

/* Icons after each sentence: inline, follow text size (em-based) */
/* Support both img and video elements */
.para-icon {
    height: 2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.35em;
    display: inline-block;
}

.para-icon2 {
    height: 1.33em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.35em;
    display: inline-block;
}

/* Ensure video icons behave like inline images */
video.para-icon,
video.para-icon2 {
    object-fit: contain;
    pointer-events: none;
}

.hamzetmad {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

.js-nav-link:hover .hamzetmad {
    filter: invert(86%) sepia(23%) saturate(3839%) hue-rotate(206deg) brightness(99%) contrast(97%);
    opacity: 0.55;
    /* your transparency */
}

/* Draggable sticker – size in em so it scales with text */
.sticker {
    position: absolute;
    user-select: none;
    z-index: 2;

    /* min, preferred (based on viewport), max */
    width: clamp(150px, 25vw, 600px);
}

/* Bigger sticker on mobile */
@media (max-width: 700px) {
    .sticker {
        width: clamp(200px, 50vw, 300px);
    }
}

.text-pill {
    display: inline-block;
    padding: 0em 0.5em;
    border-radius: 999px;
    border: 1px solid black;
    background: transparent;
    color: black;

    text-decoration: none;
    font: inherit;
    font-weight: inherit;
    line-height: 1.2;

    vertical-align: baseline;
    margin: 0 0.2em;
    cursor: pointer;

    transition: all 0.2s ease;
    background: var(--color-navigation);
}

.text-pill:hover {
    background: #141414;
    color: white;
    border-color: none;
}