:root {
    --font-family-heading: "Boehringer Headline", sans-serif;
    --font-family-body: "Boehringer Text", sans-serif;
    --primary-color: #00e47c;
    --secundary-color: #083029; 
    --body-color: #083029;
    --border-radius: 0;
    --font-weight: 400;
}

body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight);
    color: var(--body-color);
    line-height: 1.1;
    font-size: 1.4rem;
}

header{
    position: relative;
    min-height: 200px;
    overflow: hidden;
    display: grid;
    place-items: center;
}

header .hero2-bg{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 220vw;
    height: 130vw;
    border-radius: 50%;
    background: var(--secundary-color);
}

.logo-boe{
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--secundary-color);
}

.boe-primary-color {
    color: var(--primary-color);
}

.boe-secundary-color {
    color: var(--secundary-color);
}

.boe-primary-background {
    background-color: var(--primary-color);
    transition: all 0.5s ease-in-out;
}

.boe-secundary-background {
    background-color: var(--secundary-color);
    transition: all 0.5s ease-in-out;
}

.fw-500{
    font-weight: 500;
}

body.feed .header{
    background: var(--primary-color);
    position: relative;
    text-align: center;
}

body.feed .header .logo-boe{
    position: absolute;
    top: 20px;
    right: 20px;
}

body.feed .subHeader{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: 0px 18px 20px -5px rgba(0, 0, 0, .3);
}

body.feed .subHeader a{
    color: var(--body-color);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

body.feed .subHeader .divider{
    width: 5px;
    height: 35px;
    position: relative;
}

body.feed .subHeader .divider:after{
    position: absolute;
    content: "";
    background-color: var(--primary-color);
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

body.feed .subHeader .userName{
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    background: #083029;
    background: -webkit-linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#083029", endColorstr="#00E37D", GradientType=1);
    text-align: center;
    line-height: 35px;
    color: #ffffff;
    font-weight: 700;
}

body.feed .feed-container{
    width: 80%;
    margin-inline: auto;
}

body.feed .feed-container .border{
    border: 1px solid var(--primary-color) !important;
    border-radius: 10px;
}

body.feed .feed-container .border ul{
    margin-bottom: 0;
    padding-right: 10px;
}

body.feed .feed-container .border ul li{
    line-height: 1.1;
    margin-bottom: 10px;
}

body.feed .feed-container .border .button-gradient-1{
    line-height: 2;
}

.button-gradient-1{
    background: #06583C;
    background: -webkit-linear-gradient(90deg, rgba(6, 88, 60, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(6, 88, 60, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: linear-gradient(90deg, rgba(6, 88, 60, 1) 0%, rgba(0, 227, 125, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06583C", endColorstr="#00E37D", GradientType=1);
    padding: 20px 20px;
    border-radius: 10px;
    font-weight: 700;
    color: #ffffff;
    transition: all .5s ease;
    text-align: center;
    font-size: 110%;
    line-height: 1;
}

.button-gradient-1.small{
    font-size: 100%;
    padding: 10px 20px;
    display: inline-block;
}

.button-gradient-1.like:hover{
    cursor: pointer;
}

.button-gradient-1.like:hover img, .button-gradient-1.like.active img{
    content: url("../../img/liked-icon.svg");
}

.button-gradient-1.like.active:hover img{
    content: url("../../img/like-icon.svg");
}

.button-gradient-1:not(.like):hover{
    background: #00E37D;
    background: -webkit-linear-gradient(90deg, rgba(0, 227, 125, 1) 0%, rgba(6, 88, 60, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(0, 227, 125, 1) 0%, rgba(6, 88, 60, 1) 100%);
    background: linear-gradient(90deg, rgba(0, 227, 125, 1) 0%, rgba(6, 88, 60, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00E37D", endColorstr="#06583C", GradientType=1);
    cursor: pointer;
}

.button-border-1{
    border: 1px solid var(--primary-color);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--primary-color);
    transition: all .5s ease;
    text-align: center;
    font-size: 100%;
    line-height: 1;
    display: inline-block;
}

.button-border-1:hover{
    cursor: pointer;
}

.button-border-1:hover img:first-child, .button-border-1.active img:first-child{
    content: url("../../img/comment-closed-icon.svg");
}

.button-border-1.active:hover img:first-child{
    content: url("../../img/comment-icon.svg");
}

.button-border-1 img:last-child, .button-border-1.active:hover img:last-child{
    rotate: 180deg;
}

.button-border-1:hover img:last-child, .button-border-1.active img:last-child{
    rotate: 0deg;
}

body.feed .feed-container .posts-container .post{
    padding: 30px;
    box-shadow: 0px 0px 20px rgba(0,0,0,.3);
    border-radius: 10px;
    margin-bottom: 20px;
}

body.feed .feed-container .posts-container .post:last-child{
    margin-bottom: 0;
}

body.feed .feed-container .posts-container .post .post-header{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body.feed .feed-container .posts-container .post .post-header .post-userName{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #083029;
    background: -webkit-linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#083029", endColorstr="#00E37D", GradientType=1);
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    font-size: 110%;
    font-weight: 700;
}

body.feed .feed-container .posts-container .post .post-header .post-details{
    flex: 2;
}

body.feed .feed-container .posts-container .post .post-header .post-details p{
    font-weight: 500;
    color: #429082;
    margin-bottom: 5px;
}

body.feed .feed-container .posts-container .post .post-header .post-details p.userName{
    font-weight: 700;
}

body.feed .feed-container .posts-container .post .post-header .post-date{
    font-weight: 700;
    color: #429082;
    margin-bottom: 5px;
    font-size: 90%;
}

body.feed .feed-container .posts-container .post .post-description{
    background-color: #e6fcf2;
    font-style: italic;
    border-left: 5px solid var(--primary-color);
}

body.feed .feed-container .posts-container .post .divider{
    border-bottom: 1px solid var(--primary-color);
}

body.feed .feed-container .posts-container .post .post-comments .post-comment{
    background-color: #f8f5f0;
    border-radius: 10px;
    margin-bottom: 20px;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment:last-child{
    margin-bottom: 0;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment.mine{
    background-color: #e6fcf2;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment .post-userName{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #083029;
    background: -webkit-linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    background: linear-gradient(90deg, rgba(8, 48, 41, 1) 0%, rgba(0, 227, 125, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#083029", endColorstr="#00E37D", GradientType=1);
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    font-size: 110%;
    font-weight: 700;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment .post-comment-details{
    flex: 2;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment .post-comment-details p{
    font-weight: 500;
    color: #083029;
    margin-bottom: 5px;
    font-style: italic;
}

body.feed .feed-container .posts-container .post .post-comments .post-comment .post-comment-details p.userName{
    font-weight: 700;
    color: #429082;
    font-style: normal;
}

body.feed input[type="text"], body.feed select, body.feed textarea{
    border-color: var(--primary-color) !important;
    resize: none;
}

body.feed.upload input[type="text"], body.feed.upload select, body.feed.upload textarea, body.feed.upload input[type="text"]::placeholder, body.feed.upload select::placeholder, body.feed.upload textarea::placeholder{
    color: var(--primary-color);
    font-weight: 500;
}

.modal-title{
    color: var(--secundary-color);
}

.modal-body {
    color: #000000;
}

.boe-primary-button, .boe-primary-button:focus-visible, .boe-primary-button:focus {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 16px;
    padding-left: 16px;
    border: .125rem solid rgba(0, 0, 0, 0);
    border-radius: 10px;
    min-height: 2rem;
    outline: none;
    cursor: pointer;
    transition: all .3s;
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--primary-color);
    transition: all 0.5s ease-in-out;
}

.boe-secundary-button, .boe-secundary-button:focus-visible, .boe-secundary-button:focus {
    background-color: var(--secundary-color);
    transition: all 0.5s ease-in-out;
}

.boe-primary-button:hover{
    background-color: var(--secundary-color);
    color: #ffffff;
    cursor: pointer;
}

.boe-secundary-button:hover{
    background-color: var(--primary-color);
    cursor: pointer;
}


body.feed.upload .upload-container{
    width: 80%;
    margin-inline: auto;
    padding: 30px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
    border-radius: 10px;
}

body.feed.upload .upload-container .upload-area{
    background-color: #b3f7d8;
    padding: 20px 30px;
    box-shadow: inset 0px 0px 20px 5px rgba(255, 255, 255, .5);
    border-radius: 10px;
    text-align: center;
}

body.feed.upload .upload-container #uploadBtn {
    background: #429082;
    color: #ffffff;
    border: 0;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 100%;
    font-weight: 700;
    display: inline-block;
}

body.feed.upload .upload-container #uploadBtn:hover {
    background-color: var(--secundary-color);
}

body.feed.upload .upload-container .thumb-wrap {
    width: min(240px, 100%);
    margin-inline: auto;
}

body.feed.upload .upload-container #thumb {
    width: 100%;
}

body.feed.upload .upload-container #fileMsg {
    word-break: break-all;
}

body.feed.upload .upload-container .divider{
    border-bottom: 1px solid var(--primary-color);
}

@media screen and (max-width: 768px) {
    .footer-bg .semi-circle{
        height: 400px !important;
    }
}

.intro{
    background-color: var(--secundary-color);
    width: 100dvw;
    height: 100dvh;
    align-content: center;
    text-align: center;
    position:relative;
    z-index:2;
}

.intro footer{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.intro footer .footer-bg{
    position: relative;
    min-height: 200px;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.intro footer .footer-bg div{            
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    height: 500px;
    border-radius: 50%;
    background: #ffffff;
}

.after{
    position: fixed;
    inset: 0;
    z-index: 1;
    background: #ffffff; /* replace with your real page bg */
    overflow: auto;

    /* reveal origin (center of screen – matches your centered button) */
    --rx: 50%;
    --ry: 50%;

    /* hidden state */
    clip-path: circle(0px at var(--rx) var(--ry));
    transition: clip-path 5s 1s cubic-bezier(.2,.9,.2,1);
}

.power-wrap{
    display: inline-grid;
    place-items: center;
}

/* esconde o checkbox mas mantém acessível */
.power-toggle{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* when power is ON → expand to cover the whole viewport */
.intro:has(#pwr:checked) + .after{
    z-index: 3;
    clip-path: circle(150vmax at 50% 50%);
}

/* optional: fade the intro out once revealed */
.intro:has(#pwr:checked){
    opacity: 0;
    transform: scale(.98);
    transition: opacity 1s 1s ease, transform 1s 1s ease;
    pointer-events: none;
}

.power-btn{
    width: 240px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary-color);
    position: relative;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);
    transition: transform .12s ease, box-shadow .2s ease;
}

/* anel do símbolo */
.power-btn::before{
    content: "";
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 26px solid var(--secundary-color);
    border-top-color: transparent;
    opacity: 1;
    transition: border-color .2s ease;
}

/* traço vertical */
.power-btn::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 34%;
    left: 50%;
    top: 14%;
    transform: translateX(-50%);
    background: var(--secundary-color);
    box-shadow: 0 0 0 6px var(--primary-color); /* “corte” no anel */
    transition: background .2s ease, box-shadow .2s ease;
}


/* focus visível quando navegas por teclado */
.power-toggle:focus-visible + .power-btn{
    /*outline: 3px solid rgba(255,255,255,.35);
    outline-offset: 6px;*/
}

/* estado ON (checked) */
.power-toggle:checked + .power-btn{
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 22px #ffffff,
    inset 0 0 0 2px rgba(255,255,255,.08);
}

.power-toggle:checked + .power-btn::before{
    border-color: #ffffff;
    border-top-color: transparent;
}

.power-toggle:checked + .power-btn::after{
    background: #ffffff;
    box-shadow: 0 0 0 6px var(--primary-color);
}

.content{
    padding-inline: 2.5%;
    text-align: center;
}

.field{
    position:relative;
    width:min(520px, 90vw);
    margin:16px auto;
}

.field input{
    width:100%;
    padding:25px 20px 14px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: color-mix(in srgb, var(--secundary-color) 88%, black);
    color:#eafff6;
    outline:0;

    box-shadow:
        0 14px 34px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.06);

    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.field input::placeholder{
    color: transparent; /* floating label trick */
}

.field label{
    position:absolute;
    left:20px;
    top:14px;
    font-size:14px;
    color: rgba(234,255,246,.65);
    pointer-events:none;
    transition: transform .18s ease, top .18s ease, opacity .18s ease, color .18s ease;
}

/* focus */
.field input:focus{
    border-color: color-mix(in srgb, var(--primary-color) 70%, transparent);
    background: color-mix(in srgb, var(--secundary-color) 92%, black);
    box-shadow:
        0 14px 34px rgba(0,0,0,.5),
        0 0 0 6px color-mix(in srgb, var(--primary-color) 16%, transparent),
        0 0 26px color-mix(in srgb, var(--primary-color) 35%, transparent),
        inset 0 0 0 1px rgba(255,255,255,.08);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label{
    top:10px;
    transform: scale(.92);
    opacity:.95;
    color: var(--primary-color);
}

.field-select select{
  width:100%;
  padding:25px 44px 14px 20px;     /* right padding for arrow */
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: color-mix(in srgb, var(--secundary-color) 88%, black);
  color:#eafff6;
  outline:0;

  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.06);

  appearance:none;                 /* hide default arrow */
  -webkit-appearance:none;
  -moz-appearance:none;

  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

/* custom arrow */
.field-select::after{
    content:"";
    position:absolute;
    right:18px;
    top:50%;
    width:10px;
    height:10px;
    border-right:2px solid rgba(234,255,246,.75);
    border-bottom:2px solid rgba(234,255,246,.75);
    transform: translateY(-35%) rotate(45deg);
    pointer-events:none;
    transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}

/* label */
.field-select label{
    position:absolute;
    left:20px;
    top:14px;
    font-size:14px;
    color: rgba(234,255,246,.65);
    pointer-events:none;
    transition: transform .18s ease, top .18s ease, opacity .18s ease, color .18s ease;
}

/* float label when focused OR when a value is selected (valid) */
.field-select select:focus + label,
.field-select select:valid + label{
    top:10px;
    transform: scale(.92);
    opacity:.95;
    color: var(--primary-color);
}

/* focus glow */
.field-select select:focus{
    border-color: color-mix(in srgb, var(--primary-color) 70%, transparent);
    background: color-mix(in srgb, var(--secundary-color) 92%, black);
    box-shadow:
    0 14px 34px rgba(0,0,0,.5),
    0 0 0 6px color-mix(in srgb, var(--primary-color) 16%, transparent),
    0 0 26px color-mix(in srgb, var(--primary-color) 35%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* optional: disabled look */
.field-select select:disabled{
    opacity:.6;
    cursor:not-allowed;
}

.upload__input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.upload__btn{
    margin-top: 1rem;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 34px;
    border-radius:999px;

    color: var(--primary-color);
    cursor:pointer;
    user-select:none;
    font-weight: 700;

    /* main fill */
    background: var(--secundary-color);

    /* outer dark stroke + subtle depth */
    box-shadow:
    0 0 0 6px rgba(2,18,15,.95),
    0 0 0 8px rgba(0,228,124,.28),
    0 10px 22px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(0,228,124,.35);

    /*transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;*/
    transition: all 0.5s linear;
}

.upload__btn:hover{
    /*box-shadow:
    0 0 0 6px rgba(2,18,15,.95),
    0 0 0 8px rgba(0,228,124,.38),
    0 12px 26px rgba(0,0,0,.4),
    0 0 22px rgba(0,228,124,.25),
    inset 0 0 0 2px rgba(0,228,124,.45);*/
    background-color: var(--primary-color);
    color: var(--secundary-color);
}

/* keyboard focus */
.upload__input:focus-visible + .upload__btn{
    outline: 3px solid rgba(0,228,124,.45);
    outline-offset: 6px;
}

.gdpr{
    width:min(520px, 90vw);
    margin: 30px auto;
    display:flex;
    gap:12px;
    align-items:flex-start;
    text-align: left;
}

/* hide native checkbox */
.gdpr__input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

/* clickable label */
.gdpr__label{
    position:relative;
    padding-left:44px;
    cursor:pointer;
    user-select:none;
}

/* box */
.gdpr__label::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    width:26px;
    height:26px;
    border-radius:8px;
    background: color-mix(in srgb, var(--secundary-color) 88%, black);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 10px 22px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.06);
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}

/* check mark */
.gdpr__label::after{
    content:"";
    position:absolute;
    left:11px;
    top:16px;
    width:10px;
    height:6px;
    border-left:3px solid transparent;
    border-bottom:3px solid transparent;
    transform: rotate(-45deg) scale(0);
    transform-origin:left bottom;
    transition: transform .18s ease;
}

/* hover */
.gdpr__label:hover::before{
    border-color: rgba(255,255,255,.18);
}

/* checked state */
.gdpr__input:checked + .gdpr__label::before{
    border-color: color-mix(in srgb, var(--primary-color) 70%, transparent);
    box-shadow:
        0 10px 22px rgba(0,0,0,.35),
        0 0 0 6px color-mix(in srgb, var(--primary-color) 16%, transparent),
        0 0 22px color-mix(in srgb, var(--primary-color) 28%, transparent),
        inset 0 0 0 2px rgba(0,228,124,.25);
}

.gdpr__input:checked + .gdpr__label::after{
    border-left-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    transform: rotate(-45deg) scale(1.5);
}

/* keyboard focus */
.gdpr__input:focus-visible + .gdpr__label::before{
    outline: 3px solid rgba(0,228,124,.35);
    outline-offset: 4px;
}

.gdpr__link{
    color: var(--primary-color);
    text-decoration: none;
    margin-left:6px;
    border-bottom: 1px solid rgba(0,228,124,.35);
}

.gdpr__link:hover{
    border-bottom-color: rgba(0,228,124,.75);
}

.btn-b{
    padding:14px 22px;
    border:0;
    border-radius:14px;
    background: var(--primary-color);
    cursor:pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-b:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 18px rgba(0,228,124,.25);
}
.btn-b:active{ transform: translateY(0); filter: brightness(.98); }
.btn-b:focus-visible{ outline: 3px solid var(--secundary-color); outline-offset: 4px; }

#trail{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.particle{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-color, #00e47c);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: pop 700ms ease-out forwards;
  filter: blur(.1px);
  opacity: .9;
}

@keyframes pop{
  0%   { transform: translate(-50%,-50%) scale(1);   opacity:.9; }
  100% { transform: translate(-50%,-50%) scale(.2);  opacity:0; }
}

/* layer sits over the page but doesn't block clicks */
.float-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* raise/lower as needed */
  overflow: hidden;
}

/* bubble base */
.bubble{
  position:absolute;
  left: calc(var(--x) * 1%);
  top: 110%;
  width: calc(var(--s) * 1px);
  height: calc(var(--s) * 1px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 100%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary-color) 50%, transparent);
  opacity: var(--o);
  filter: blur(.2px);

  animation:
    floatUp var(--dur) linear infinite,
    sway var(--sway) ease-in-out infinite;
  animation-delay: var(--delay);
  transform: translateZ(0);
}

@keyframes floatUp{
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-140vh) translateX(0); }
}

@keyframes sway{
  0%,100% { margin-left: -18px; }
  50%     { margin-left:  18px; }
}

/* tweak each bubble via nth-child */
.bubble:nth-child(1)  { --x: 10; --s: 10; --o: .35; --dur: 14s; --sway: 3.5s; --delay: -2s; }
.bubble:nth-child(2)  { --x: 22; --s: 18; --o: .28; --dur: 18s; --sway: 5s;   --delay: -9s; }
.bubble:nth-child(3)  { --x: 35; --s: 8;  --o: .40; --dur: 12s; --sway: 3s;   --delay: -5s; }
.bubble:nth-child(4)  { --x: 48; --s: 22; --o: .22; --dur: 22s; --sway: 6s;   --delay: -14s; }
.bubble:nth-child(5)  { --x: 58; --s: 12; --o: .32; --dur: 16s; --sway: 4s;   --delay: -7s; }
.bubble:nth-child(6)  { --x: 66; --s: 7;  --o: .45; --dur: 11s; --sway: 2.8s; --delay: -1s; }
.bubble:nth-child(7)  { --x: 74; --s: 16; --o: .26; --dur: 19s; --sway: 5.4s; --delay: -12s;}
.bubble:nth-child(8)  { --x: 82; --s: 9;  --o: .38; --dur: 13s; --sway: 3.2s; --delay: -8s; }
.bubble:nth-child(9)  { --x: 90; --s: 26; --o: .18; --dur: 24s; --sway: 6.5s; --delay: -16s;}
.bubble:nth-child(10) { --x: 15; --s: 14; --o: .30; --dur: 17s; --sway: 4.6s; --delay: -10s;}
.bubble:nth-child(11) { --x: 40; --s: 6;  --o: .48; --dur: 10s; --sway: 2.6s; --delay: -3s; }
.bubble:nth-child(12) { --x: 62; --s: 20; --o: .20; --dur: 21s; --sway: 6s;   --delay: -15s;}


.tips{
    background: var(--bg);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
    width: max(520px, 80dvw);
    margin-inline: auto;
}

/* each column */
.tip{
    display: grid;
    grid-template-columns: 84px 1fr; /* icon + text */
    gap: 14px;
    align-items: start;
}

/* icon box */
.tip__icon{
    width: 84px;
    height: 84px;
    border: 3px solid var(--border);
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--ink);
    position: relative;
}

.tip__text h4{
    margin: 2px 0 6px;
    color: #000;
    text-align: left;
}

.tip__text p{
    margin: 0;
    color: #000;
    max-width: 70%;
    text-align: left;
}

/* responsive */
@media (max-width: 1000px){
  .tips{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .tips{ grid-template-columns: 1fr; }
  .tip{ grid-template-columns: 72px 1fr; }
  .tip__icon{ width: 72px; height: 72px; border-radius: 14px; }
  .ico{ width: 48px; height: 48px; }
}

.share-photo{
    width: max(520px, 80dvw);
    margin-inline: auto;
    background-color: var(--primary-color);
    padding: 30px 30px;
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
}

.after footer .footer-bg{
    position: relative;
    min-height: 200px;
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-top: 5rem;
}

.after footer .footer-bg div.semi-circle{            
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    height: 500px;
    border-radius: 50%;
    background: var(--secundary-color);
}

.after footer .footer-bg div.semi-circle div{
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbs{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;           /* keep behind content */
  overflow: hidden;
}

.orb{
  position:absolute;
  border-radius:50%;
  background:#fff;      /* FULL white circle */

  /* only shadow makes it visible on white */
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 6px 18px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.04);

  will-change: transform;
}

/* sizes + motion */
.orb--a{
  width: 320px;
  height: 320px;
  animation: driftA 22s ease-in-out infinite alternate;
}

.orb--b{
  width: 440px;
  height: 440px;
  animation: driftB 28s ease-in-out infinite alternate;
}

/* drifting paths */
@keyframes driftA{
  0%   { transform: translate(-12vw, 12vh); }
  25%  { transform: translate(18vw, 8vh); }
  50%  { transform: translate(6vw, 58vh); }
  75%  { transform: translate(42vw, 30vh); }
  100% { transform: translate(10vw, 78vh); }
}

@keyframes driftB{
  0%   { transform: translate(60vw, -10vh); }
  20%  { transform: translate(38vw, 18vh); }
  45%  { transform: translate(70vw, 46vh); }
  70%  { transform: translate(30vw, 70vh); }
  100% { transform: translate(52vw, 26vh); }
}

@media (prefers-reduced-motion: reduce){
  .orb{ animation: none; }
}

@media only screen and (max-width: 800px){
    iframe{
        width: 100%;
    }

    .share-photo{
        max-width: 100%;
    }
}