:root{--accent:#6BBF59;--glass: rgba(255,255,255,0.92);--text: #10222b;--muted:#6b7b7f;--bg-dark: rgba(0,0,0,0.45);--max-width:420px;font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    /* HERO */
    .hero{position:relative;height:96vh;min-height:640px;max-width:var(--max-width);margin:0 auto;overflow:hidden;} 

    .bg-video{position:absolute;inset:0;z-index:0;overflow:hidden;}
    .bg-video video{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03) saturate(1.05)}
    .bg-overlay{position:absolute;inset:0;background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 0) 60%, transparent 100%);z-index:1}

    .logo-wrap{z-index: 4;padding: 8px 14px;position:absolute;top:8%;left:50%;transform:translateX(-50%)}
    .logo{text-align: center; gap:10px}
    .logo img:first-child {height: 50px; display:block; margin:0 auto;}
    .logo img:nth-child(2) {margin-top: 25px;display: block;width: 280px;max-width: 400px;margin-left: auto;margin-right: auto;}
    .scroll-hint{position:absolute;left:50%;right: 50%; transform:translateX(-50%);bottom:28px;z-index:4}
    .arrow-btn{width:40px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;background:transparent;cursor:pointer;animation:bounce 2s infinite;color:#fff} 
    .arrow-btn svg{display:block;transform:translateY(2px)}
    @keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-6px)}}

    section{padding:0px 18px; max-width:var(--max-width);margin:0 auto}
    .panel{background:white;border-radius:16px;text-align: center;padding:20px}
    .panel h2{font-family: "Fredoka", sans-serif; font-weight: 500;text-align: center;color: #4a6d64; font-size: 22px;}
    .panel p{font-family: "Fredoka", sans-serif; font-weight: 300; font-size: 15px; text-align: justify; color: #535353; line-height: 1.4}
    .panel .sub-head img{width: 75%;text-align: center;}
    .panel .icons img{width: 50%;padding: 8px 0px}
    .panel .icons .d-flex{ display:flex; }

    /*.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1)}
    .reveal.show{opacity:1;transform:none}*/

    footer{max-width:var(--max-width);margin:0 auto}
    .scroll-section {width: 100%;overflow: hidden;background: #ed7fa7;padding: 6px 0;}
    .scroll-content {display: flex;width: max-content;white-space: nowrap;animation: scrollText 15s linear infinite;}
    .scroll-content img {height: 15px; margin-right: 20px;display: inline-block;}
    @keyframes scrollText {0% {transform: translateX(0);} 100% {transform: translateX(-100%);} }
    .copyright{background-color: #4a6d64; color: #d2e3b3; font-size: 12px; text-align: center; font-family: "Fredoka", sans-serif;}
    .copyright p{margin: 0; padding: 8px 0}

    .modal-backdrop{position:fixed;inset:0;background:rgb(255 255 255 / 50%);display:none;align-items:center;justify-content:center;z-index:60}
    .modal{width:92%;max-width:420px;background:transparent;border-radius:12px;padding:0;box-shadow:none}

    .promo-wrap{position:relative;display:block;margin:0 auto;width:92%;max-width:320px;text-align:center;}
    .promo-wrap::before {content: ""; position: absolute; inset: 0; background: url("../images/popup-bg.png") center / cover no-repeat; border-radius: 18px; z-index: 0;height: 320px; top: -45px}
    .promo-card {position: relative;z-index: 1;padding:22px 20px 28px;}
    /*.promo-badge{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:12px;background: #cf7aa6;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,0.12);z-index:5;font-size:20px;}*/
    .promo-card h4{margin: 20px 0 15px;color: #535353;font-weight:500;letter-spacing:1px;font-size:16px;}
    .promo-card h3{margin:6px 0 6px;color:#e97ca8;font-weight:700;letter-spacing:1px;font-size:20px;margin-bottom: 10px}
    .promo-card p{margin:6px 0 14px;color:#6b6b6b;font-size:15px;line-height:1.3}
    .claim-btn{background: #d44b85;color: #fff;padding: 6px 21px;border-radius: 5px;border: 0;font-weight: 700;cursor: pointer;display: inline-block;box-shadow: 0 8px 20px rgba(212, 75, 133, 0.12);font-weight: 500;margin-top: 10px;}
    /*.promo-card.scallop::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:28px;background:radial-gradient(circle at 14px 14px, transparent 9px, #fdeff2 9px) repeat-x;background-size:28px 28px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;}*/

    .promo-form{position: relative;z-index: 1;padding:18px 25px;text-align: left;}
    .promo-form #modalTitle{margin:6px 0 6px;color: #e97ca8;font-weight:700;letter-spacing:1px;font-size:16px;text-align: center;}
    .promo-form .field input{background: rgba(255,255,255,0.85);border: 1px solid rgba(0,0,0,0.03);padding:12px 12px;border-radius:8px;width:100%;box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);margin-bottom:5px;}
    .promo-form .reveal-code-btn{background:#d44b85;color:#fff;padding:6px 20px;border-radius:8px;border:0;font-weight:700;cursor:pointer;margin-top: 8px}

    .hide{display:none}
    .show{display:block}

    .field{margin-bottom:6px}
    label{display:block;font-size:13px;margin-bottom:6px;color:#334146}
    .error{color:#b00020;font-size:13px;margin-top:6px}

    :focus{outline:3px solid rgba(241,162,152,0.18);outline-offset:2px}
    .success{color:#e97ca8;font-size:20px;margin-top:50px;text-align: center;font-weight: 500}

    .scroll-gradient {
      max-width:var(--max-width);margin:0 auto;position: fixed;top: 15px;left: 0;right: 0;height: 100px;background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);opacity: 0;  transition: opacity 0.3s ease;pointer-events: none;z-index: 9999;}
      .scroll-gradient.show {opacity: 1;}